/* Opal Helpdesk - Custom Styling */

/* Hide the search banner completely */
.helpdesk-home-container .search-banner,
.helpdesk-home-container .search-banner.d-flex,
div.search-banner.d-flex,
.search-banner.d-flex,
.search-banner {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Adjust tiles to start from top */
.tiles-banner {
    padding-top: 20px !important;
}

/* Replace GLPI logo with Opal logo */
.navbar-brand img,
.navbar .brand-logo,
header .navbar-brand img {
    content: url('/pics/opal-logo-white.png') !important;
    max-height: 40px !important;
    width: auto !important;
}

/* Hide GLPI text if any */
.navbar-brand span.brand-text,
.navbar-brand .glpi-logo-text {
    display: none !important;
}

/* Force Opal logo with cache buster */
.glpi-logo {
    background-image: url('/pics/logos/logo-GLPI-100-white.png?v=20260121') !important;
}

/* ========================================
   Mobile Responsive - File Upload Field
   ======================================== */

/* File upload container - mobile fix */
@media screen and (max-width: 768px) {
    /* Main file upload container */
    .fileupload,
    .fileupload-container,
    .upload-zone,
    div[class*='fileupload'],
    .form-field-file,
    .glpi-file-upload {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* File input and dropzone */
    .fileupload .upload-area,
    .fileupload .dropzone,
    .fileupload .filepond--root,
    .filepond--root,
    .filepond--drop-label {
        max-width: 100% !important;
        width: 100% !important;
        min-width: unset !important;
    }
    
    /* File list */
    .fileupload .files-list,
    .uploaded-files-list,
    .filepond--list {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    
    /* Form fields general mobile fix */
    .form-group,
    .form-field,
    .mb-3,
    .card-body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Ticket form container */
    .ticket-form,
    .itil-form,
    form.itil-object-form,
    .helpdesk-form {
        max-width: 100% !important;
        padding: 10px !important;
        overflow-x: hidden !important;
    }
    
    /* Input fields */
    input[type=text],
    input[type=email],
    input[type=tel],
    textarea,
    select,
    .form-control,
    .form-select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Tables inside forms */
    table {
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }
    
    /* Buttons */
    .btn,
    button {
        max-width: 100% !important;
        white-space: normal !important;
    }
    
    /* Card components */
    .card {
        max-width: 100% !important;
        margin-left: 5px !important;
        margin-right: 5px !important;
    }
}

/* Extra small screens (phones) */
@media screen and (max-width: 480px) {
    .fileupload,
    .fileupload-container {
        padding: 5px !important;
    }
    
    .filepond--panel-root {
        max-width: calc(100vw - 30px) !important;
    }
    
    /* Reduce font size for better fit */
    .filepond--drop-label label {
        font-size: 14px !important;
    }
}

/* Prevent horizontal scroll on body */
body {
    overflow-x: hidden !important;
}

html {
    overflow-x: hidden !important;
}

/* ========================================
   Mobile - Submit Button Full Width
   ======================================== */

@media screen and (max-width: 768px) {
    /* Submit button full width on mobile */
    button[type='submit'],
    .btn-primary,
    button.btn-primary,
    form button[type='submit'],
    .form-submit-btn,
    button:has(> .ti-send),
    button:contains('إرسال') {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 15px 0 !important;
        padding: 15px 20px !important;
        font-size: 18px !important;
    }
    
    /* Form footer/actions container */
    .form-actions,
    .card-footer,
    .form-footer,
    form > button,
    form > .btn {
        width: 100% !important;
        padding: 10px !important;
    }
}