/* Sidebar responsive styles */
/* LTR close button positioning */
html:not([dir="rtl"]) .sidebar-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #6c757d;
    font-size: 1.2rem;
    padding: 5px;
    cursor: pointer;
    z-index: 1000;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* RTL close button positioning */
html[dir="rtl"] .sidebar-close-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    background: none;
    border: none;
    color: #6c757d;
    font-size: 1.2rem;
    padding: 5px;
    cursor: pointer;
    z-index: 1000;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.sidebar-close-btn:hover {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

.sidebar-close-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

/* Mobile sidebar overlay */
@media (max-width: 767.98px) {
    /* LTR (Left-to-Right) styles */
    html:not([dir="rtl"]) #sidebar:not(.active) {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        visibility: hidden;
    }
    
    html:not([dir="rtl"]) #sidebar.active {
        transform: translateX(0);
        transition: transform 0.3s ease;
        visibility: visible;
    }
    
    /* RTL (Right-to-Left) styles */
    html[dir="rtl"] #sidebar:not(.active) {
        transform: translateX(100%);
        transition: transform 0.3s ease;
        visibility: hidden;
    }
    
    html[dir="rtl"] #sidebar.active {
        transform: translateX(0);
        transition: transform 0.3s ease;
        visibility: visible;
    }
    
    /* Add overlay when sidebar is open on mobile */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        display: none;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* Ensure sidebar is above overlay - LTR */
    html:not([dir="rtl"]) #sidebar {
        z-index: 1050;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
    }
    
    /* Ensure sidebar is above overlay - RTL */
    html[dir="rtl"] #sidebar {
        z-index: 1050;
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
    }
}

/* Desktop behavior - keep existing functionality */
@media (min-width: 768px) {
    /* Le sidebar ne peut pas se replier en desktop (transform forcé à none
       ci-dessous) : afficher le bouton close ici ne ferait rien de visible
       au clic et flotte de façon confuse au-dessus du contenu — masqué. */
    .sidebar-close-btn {
        display: none;
    }

    /* LTR desktop */
    html:not([dir="rtl"]) #sidebar {
        position: relative;
        transform: none !important;
    }
    
    /* RTL desktop */
    html[dir="rtl"] #sidebar {
        position: relative;
        transform: none !important;
    }
}

/* Burger button styling */
.burger-btn {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s ease;
}

.burger-btn:hover {
    color: #495057;
    text-decoration: none;
}

/* Ensure proper spacing */
.sidebar-header {
    padding: 1rem;
}

/* Animation for smooth transitions */
#sidebar {
    transition: transform 0.3s ease;
}

/* Mobile-specific adjustments */
@media (max-width: 767.98px) {
    .sidebar-wrapper {
        height: 100vh;
        overflow-y: auto;
    }
    
    /* Ensure logo is centered with close button */
    .sidebar-header .d-flex {
        width: 100%;
        justify-content: center;
    }
    
    /* RTL-specific adjustments */
    html[dir="rtl"] .sidebar-header .d-flex {
        width: 100%;
        justify-content: center;
    }
}

/* Topbar background: app.css leaves .navbar transparent (only .navbar-fixed,
   an unused class, sets it), so this used to be hardcoded inline as white
   in Topbar.jsx. Moved here and scoped to light mode only, since app-dark.css
   already styles body.theme-dark .navbar itself and an inline style would
   have overridden it in dark mode. */
body:not(.theme-dark) .navbar {
    background-color: #fff;
}

/* .thead-dark (otherpages.css) hardcodes a light-gray header background that
   never adapts to dark mode, leaving a bright white strip across every
   DataTable header. Give it a dark-appropriate tone, matching card headers. */
body.theme-dark .thead-dark {
    background-color: #1e1e2d;
}

/* app.css hardcodes `body { background-color: #f7f7f7 }` as a literal value
   instead of `var(--bs-body-bg)`, so app-dark.css redefining that CSS
   variable under body.theme-dark never actually repaints the page background
   (every other dark-mode rule targets its own element directly, so this was
   the one spot still falling through to the light color). */
body.theme-dark {
    background-color: #151521;
}

/* react-select (SelectField, the shared dropdown used across the whole admin,
   plus AsyncCustomerSelect) renders its own emotion-generated styles that
   default to a white control/menu, which app-dark.css has no way to reach
   since react-select isn't part of that template. classNamePrefix gives us
   stable classes to target instead; !important is needed because emotion's
   own <style> tags are inserted at mount time, after these static sheets. */
body.theme-dark .select-field__control,
body.theme-dark .react-select__control {
    background-color: #1b1b29 !important;
    border-color: #35354f !important;
}
body.theme-dark .select-field__control--is-focused,
body.theme-dark .react-select__control--is-focused {
    border-color: var(--bs-primary, #087C7C) !important;
}
body.theme-dark .select-field__single-value,
body.theme-dark .select-field__input-container,
body.theme-dark .react-select__single-value,
body.theme-dark .react-select__input-container {
    color: #c2c2d9 !important;
}
body.theme-dark .select-field__placeholder,
body.theme-dark .react-select__placeholder {
    color: #6c757d !important;
}
body.theme-dark .select-field__menu,
body.theme-dark .react-select__menu {
    background-color: #1e1e2d !important;
}
body.theme-dark .select-field__option,
body.theme-dark .react-select__option {
    background-color: transparent !important;
    color: #c2c2d9 !important;
}
body.theme-dark .select-field__option--is-focused,
body.theme-dark .react-select__option--is-focused {
    background-color: rgba(255, 255, 255, 0.075) !important;
}
body.theme-dark .select-field__option--is-selected,
body.theme-dark .react-select__option--is-selected {
    background-color: var(--bs-primary, #087C7C) !important;
    color: #fff !important;
}
body.theme-dark .select-field__indicator-separator,
body.theme-dark .react-select__indicator-separator {
    background-color: #35354f !important;
}
body.theme-dark .select-field__dropdown-indicator,
body.theme-dark .select-field__clear-indicator,
body.theme-dark .react-select__dropdown-indicator,
body.theme-dark .react-select__clear-indicator {
    color: #6c757d !important;
}
body.theme-dark .select-field__multi-value,
body.theme-dark .react-select__multi-value {
    background-color: #35354f !important;
}
body.theme-dark .select-field__multi-value__label,
body.theme-dark .react-select__multi-value__label {
    color: #c2c2d9 !important;
}

/* app-dark.css sets --bs-accordion-active-bg to the same light blue tint
   in both themes (a vendor oversight, not something we can fix by re-scoping
   a variable since it's declared once, unconditionally) — the open/expanded
   accordion header (SEO Details, 3D Tour, Verified File, System Settings'
   Advanced block, ...) was staying light-blue in dark mode. */
body.theme-dark .accordion-button:not(.collapsed) {
    background-color: #1e1e2d;
}