/* ═══════════════════════════════════════════════════════════════
   SWAPNOKUTIR ADMIN — MODERN SLEEK THEME
   Inspired by the login page:
     - Deep navy → cyan gradient (#0f2460 → #1e3a8a → #0ea5e9)
     - Rounded white cards with a cyan top accent
     - Soft drop shadows tinted with brand blue
     - Inter typography, generous spacing
   Palette tokens:
     Navy 900 #0f2460   Navy 800 #1e3a8a   Blue 700 #1d4ed8
     Blue 600 #2563eb   Blue 500 #3b82f6   Cyan  #0ea5e9
     Tint  100 #dbeafe  Tint  50  #eff6ff  Page  #f1f5ff

   IMPORTANT — AdminJS v6 data-css pattern:
     Every action button is rendered with
         data-css="{resourceId}-{actionName}-button"
     e.g.  User-new-button, User-filter-button, Project-show-button.
     Filter drawer uses
         data-css="{resourceId}-filter-drawer"
         data-css="{resourceId}-filter-drawer-content"
         data-css="{resourceId}-filter-drawer-footer"
     Therefore selectors use the `$=` (ends-with) attribute match.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ─── Global typography & page canvas ─── */
body,
[data-css="app"],
main,
[data-css="page"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    color: #0f172a !important;
    background: #f1f5ff !important;
}

main,
[data-css="page"] { background: transparent !important; }

@keyframes sk-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
[data-css="page"] > * { animation: sk-fade-in 0.35s ease-out both; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; border: 2px solid transparent; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
    .sidebar-wrapper {
        width: 350px !important;
        min-width: 350px !important;
        max-width: 350px !important;
        position: relative !important;
        display: flex !important;
    }
    [data-css="sidebar"] { 
        position: relative !important; 
        height: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    /* Hide the hamburger button completely on desktop */
    [data-css="sidebar-toggle"],
    .sidebar-toggle,
    [data-testid="sidebar-toggle"],
    [class*="SidebarToggle"],
    header button[class*="Button"],
    [class*="NavBar"] button[class*="Button"] {
        display: none !important;
    }
    
    /* Hide the AdminJS hamburger button since sidebar is visible */
    [data-css="topbar"] > *:first-child,
    [data-css="top-bar"] > *:first-child,
    [data-css="navbar"] > *:first-child,
    .adminjs_NavBar > *:first-child,
    header > *:first-child,
    [data-css="topbar"] div[style*="cursor: pointer"],
    .adminjs_NavBar div[style*="cursor: pointer"] {
        display: none !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 1279px) {
    .sidebar-wrapper {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 280px !important;
        z-index: 100000 !important;
        background: #ffffff !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s !important;
        border-right: 1px solid #e2e8f0 !important;
        box-shadow: 4px 0 24px rgba(15, 36, 96, 0.15) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Closed state: slide left off-screen */
    .sidebar-wrapper.sk-hidden {
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Open state: slide in to screen */
    .sidebar-wrapper.sk-visible {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    [data-css="sidebar"] {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
    }
    
    /* Ensure the hamburger button is visible on mobile */
    [data-css="sidebar-toggle"],
    .sidebar-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Custom sidebar scroll container: hide layout-squeezing scrollbar */
.sk-sidebar-scroll {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important;  /* IE and Edge */
    background: #ffffff !important;
    width: 100% !important;
}
.sk-sidebar-scroll::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari and Opera */
}


.sidebar-wrapper {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 4px 0 24px rgba(15, 36, 96, 0.04) !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

[data-css="sidebar"] {
    background: transparent !important;
    border-right: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

[data-css="sidebar-logo"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: #f5f7fb !important; /* Opaque background to hide scrolling items */
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    padding: 16px 14px !important;
    text-decoration: none !important;
    gap: 10px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-css="sidebar-logo"] img {
    max-height: 44px !important;
    height: 44px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    display: block !important;
    filter: drop-shadow(0 2px 6px rgba(30,58,138,0.18));
}

[data-css="sidebar-logo"]::after {
    content: "Swapnokutir Admin";
    white-space: nowrap;
    display: block !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1e3a8a !important;
    line-height: 1.3 !important;
    letter-spacing: -0.2px;
}

[data-css="sidebar-logo"] h1 { display: none !important; }

nav > section, aside > section { padding: 10px 10px !important; }
nav > section:first-child, aside > section:first-child {
    padding: 10px 10px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-css="sidebar"] h2,
[data-css="sidebar"] [class*="GroupTitle"] {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 14px 12px 8px 12px !important;
    margin: 0 !important;
}

[data-css="sidebar"] a {
    color: #334155 !important;
    border-radius: 10px !important;
    margin: 4px 12px !important;
    padding: 9px 12px 9px 16px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}

[data-css="sidebar"] a * {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Child routes (nested inside the group) should be slightly smaller and lighter */
[data-css="sidebar"] li ul a {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding-left: 24px !important; /* give them a slight indent if not already there */
}

[data-css="sidebar"] li ul a.active,
[data-css="sidebar"] li ul a.is-active,
[data-css="sidebar"] li ul a[aria-current="page"] {
    font-weight: 600 !important;
}

[data-css="sidebar"] a:hover {
    background: #eff6ff !important;
    color: #1e3a8a !important;
    opacity: 1 !important;
}

/* 
   SIMPLE SIDEBAR HIGHLIGHT 
   Targeting standard AdminJS active classes and aria-current attribute.
*/
[data-css="sidebar"] a.active,
[data-css="sidebar"] a.is-active,
[data-css="sidebar"] a[aria-current="page"],
[data-css="sidebar"] a:hover {
    background: #e2e8f0 !important;
    color: #1e3a8a !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    margin: 4px 12px !important;
    padding: 9px 12px 9px 16px !important;
    transition: all 0.2s ease !important;
}

[data-css="sidebar"] a.active *,
[data-css="sidebar"] a.is-active *,
[data-css="sidebar"] a[aria-current="page"] *,
[data-css="sidebar"] a:hover * {
    color: #1e3a8a !important;
}

[data-css="sidebar"] a.active svg,
[data-css="sidebar"] a[aria-current="page"] svg,
[data-css="sidebar"] a:hover svg {
    color: #1e3a8a !important;
    fill: #1e3a8a !important;
}

/* Hide default indicator */
[data-css="sidebar"] a.active::before,
[data-css="sidebar"] a[aria-current="page"]::before {
    display: none !important;
}

[data-css="sidebar"] a svg { 
    flex-shrink: 0; 
    margin-right: 12px; 
    transition: all 0.2s ease;
}

[data-css="sidebar"] footer,
[data-css="sidebar"] [class*="Footer"] {
    background: transparent !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 12px 14px !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOP NAV / HEADER
   AdminJS renders the topbar with data-css="topbar" (no dash) and
   className "adminjs_NavBar". The earlier "top-bar"/"navbar" selectors
   never matched — keeping them as fallbacks but adding the real ones.
   ═══════════════════════════════════════════════════════════════ */
header,
[data-css="topbar"],
[data-css="top-bar"],
[data-css="navbar"],
[class*="NavBar"] {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: saturate(180%) blur(10px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(10px) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(15, 36, 96, 0.04) !important;
    position: relative !important;
    z-index: 50 !important;
}

header h1, header h2, [data-css="topbar"] h1, [data-css="navbar"] h1 {
    color: #1e3a8a !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px;
}

/* Topbar user-info (CurrentUserNav) renders email + role on the right.
   Keep it below the filter drawer so the drawer header isn't pierced. */
[data-css="logged-in"] {
    position: relative !important;
    z-index: 1 !important;
}

[data-css="breadcrumbs"] a, nav[class*="Breadcrumb"] a {
    color: #64748b !important;
    font-weight: 500 !important;
}
[data-css="breadcrumbs"] a:hover, nav[class*="Breadcrumb"] a:hover { color: #1d4ed8 !important; }

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */
section[data-testid="login"],
div[data-testid="login"],
body > div > section,
.adminjs_Login,
[class*="Login"] {
    background: #1e3a8a !important;
    min-height: 100vh !important;
}

section[data-testid="login"] > div,
div[data-testid="login"] > div {
    background: #1e3a8a !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

section[data-testid="login"] form,
div[data-testid="login"] form {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px rgba(15, 36, 96, 0.4), 0 8px 20px rgba(14, 165, 233, 0.2) !important;
    padding: 40px 36px !important;
    border-top: 4px solid #0ea5e9 !important;
}

section[data-testid="login"] img,
div[data-testid="login"] img {
    max-height: 130px !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto 8px auto !important;
}

section[data-testid="login"] h1,
section[data-testid="login"] h2,
div[data-testid="login"] h1,
div[data-testid="login"] h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1e3a8a !important;
    text-align: center !important;
    margin-bottom: 20px !important;
}

section[data-testid="login"] input,
div[data-testid="login"] input {
    border: 1.5px solid #bfdbfe !important;
    border-radius: 8px !important;
    color: #1e3a8a !important;
    background: #f8faff !important;
}

section[data-testid="login"] input:focus,
div[data-testid="login"] input:focus {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS & CONTENT SECTIONS
   ═══════════════════════════════════════════════════════════════ */
[data-css="page"] > section,
[data-css="page"] section[class*="Box"],
section[class*="Wrapper"][class*="Content"],
[data-css$="-records"],
[data-css$="-records-table"],
[data-css$="-list-table-wrapper"],
[data-css$="-show"],
[data-css$="-edit"],
[data-css$="-new"],
.sk-table-scroll-wrapper {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(15, 36, 96, 0.05), 0 12px 28px rgba(15, 36, 96, 0.04) !important;
    border: 1px solid #e9edf7 !important;
    overflow: visible !important; /* Allow dropdowns/datepickers to pop out */
}

h1[class*="Header"],
h2[class*="Header"],
[data-css="page"] h1,
[data-css="page"] > header h1 {
    color: #0f172a !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   Selectors use $= to match `{resourceId}-{actionName}-button`
   ═══════════════════════════════════════════════════════════════ */
/* ── 0. UNIFIED BUTTON SIZING (Universal Base) ── */
[data-css$="-new-button"],
[data-css$="-filter-button"],
[data-css$="-show-button"]:not(td *),
[data-css$="-edit-button"]:not(td *),
[data-css$="-delete-button"]:not(td *),
button[type="submit"],
[data-css$="-list-button"],
a[class*="BackButton"],
button[class*="BackButton"],
.sk-unified-btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    min-width: 100px !important;
    border: none !important;
}

/* ── 1. PRIMARY / SUBMIT / NEW ── */
button[type="submit"],
[data-css$="-new-button"],
[data-css$="-new-button"]:hover,
[data-css$="-new-button"]:active {
    background: #1e3a8a !important;
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.3) !important;
}
button[type="submit"]:hover {
    background: #1d4ed8 !important;
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4) !important;
    transform: translateY(-1px) !important;
}
[data-css$="-new-button"] *, button[type="submit"] * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ── 2. FILTER & SHOW/EXPLORE (Secondary) ── */
[data-css$="-filter-button"],
[data-css$="-filter-button"]:hover,
[data-css$="-show-button"]:not(td *),
[data-css$="-show-button"]:not(td *):hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1e3a8a !important;
    border: 1.5px solid #1e3a8a !important;
    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.05) !important;
}
[data-css$="-filter-button"]:hover,
[data-css$="-show-button"]:not(td *):hover {
    background-color: #eff6ff !important;
    border-color: #1d4ed8 !important;
    color: #1d4ed8 !important;
}
[data-css$="-filter-button"] *, [data-css$="-show-button"] * {
    color: #1e3a8a !important;
    fill: #1e3a8a !important;
}

/* ── 3. EDIT (Outlined Primary) ── */
[data-css$="-edit-button"]:not(td *),
[data-css$="-edit-button"]:not(td *):hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1e3a8a !important;
    border: 1.5px solid #1e3a8a !important;
}
[data-css$="-edit-button"]:not(td *):hover {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
}
[data-css$="-edit-button"]:not(td *):hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ── 4. DELETE (Danger) ── */
[data-css$="-delete-button"]:not(td *),
[data-css$="-delete-button"]:not(td *):hover {
    background: #ef4444 !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}
[data-css$="-delete-button"]:not(td *):hover {
    background: #dc2626 !important;
    background-color: #dc2626 !important;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35) !important;
    transform: translateY(-1px);
}

/* ── 5. BACK / CANCEL ── */
[data-css$="-list-button"],
a[class*="BackButton"],
button[class*="BackButton"] {
    background: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}
[data-css$="-list-button"]:hover,
a[class*="BackButton"]:hover,
button[class*="BackButton"]:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #cbd5e1 !important;
    opacity: 1 !important;
}
[data-css$="-list-button"]:hover *,
a[class*="BackButton"]:hover *,
button[class*="BackButton"]:hover * {
    color: #1d4ed8 !important;
    fill: #1d4ed8 !important;
}

/* ── 6. CUSTOM RECORD ACTIONS (Featured Toggle) ── */
[data-css$="-setAsFeatured-button"]:not(td *),
[data-css$="-removeFeature-button"]:not(td *),
[data-css$="-setAsFeatured-button"]:not(td *):hover,
[data-css$="-removeFeature-button"]:not(td *):hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1e3a8a !important;
    border: 1.5px solid #1e3a8a !important;
}
[data-css$="-setAsFeatured-button"]:not(td *):hover,
[data-css$="-removeFeature-button"]:not(td *):hover {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
}
[data-css$="-setAsFeatured-button"]:not(td *):hover *,
[data-css$="-removeFeature-button"]:not(td *):hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ── 7. PAGINATION ── */
/* Ultra-broad selectors to override styled-component inline styles */
nav[class*="Pagination"] a,
nav[class*="Pagination"] button,
nav[class*="pagination"] a,
nav[class*="pagination"] button,
div[class*="Pagination"] a,
div[class*="Pagination"] button,
[class*="Pagination"] a,
[class*="Pagination"] button,
[class*="paginate"] a,
[class*="paginate"] button {
    color: #1e3a8a !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    background-color: transparent !important;
}

nav[class*="Pagination"] a:hover,
nav[class*="Pagination"] button:hover,
nav[class*="pagination"] a:hover,
nav[class*="pagination"] button:hover,
div[class*="Pagination"] a:hover,
div[class*="Pagination"] button:hover,
[class*="Pagination"] a:hover,
[class*="Pagination"] button:hover,
[class*="paginate"] a:hover,
[class*="paginate"] button:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    opacity: 1 !important;
}
/* Force hover text + children visible */
[class*="Pagination"] a:hover *,
[class*="Pagination"] button:hover *,
[class*="paginate"] a:hover *,
[class*="paginate"] button:hover * {
    color: #1d4ed8 !important;
    opacity: 1 !important;
}

nav[class*="Pagination"] a[aria-current],
nav[class*="Pagination"] button[aria-current],
[class*="Pagination"] a[aria-current],
[class*="Pagination"] button[aria-current] {
    background: #1e3a8a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(14,165,233,0.35) !important;
}
[class*="Pagination"] a[aria-current] *,
[class*="Pagination"] button[aria-current] * {
    color: #ffffff !important;
}

/* ── 8. HEADER buttons ── */
header button, header a {
    color: #1e3a8a !important;
    border-radius: 8px !important;
}
header button:hover, header a:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    opacity: 1 !important;
}

/* ── 9. DROPDOWN items ── */
[class*="DropDownMenu"],
[class*="dropdown-menu"],
.adminjs_DropDownMenu {
    z-index: 99999 !important;
}

[class*="DropDown"],
[class*="dropdown"],
[class*="ButtonGroup"] {
    overflow: visible !important;
}

[class*="DropDown"] a, [class*="DropDown"] button,
[class*="dropdown"] a, [class*="dropdown"] button,
[class*="DropDown"] [data-css*="-button"],
[class*="dropdown"] [data-css*="-button"] {
    color: #1e3a8a !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    min-width: unset !important;
    height: auto !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    display: flex !important;
    justify-content: flex-start !important;
}
[class*="DropDown"] a:hover, [class*="DropDown"] button:hover,
[class*="dropdown"] a:hover, [class*="dropdown"] button:hover,
[class*="DropDown"] [data-css*="-button"]:hover,
[class*="dropdown"] [data-css*="-button"]:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    opacity: 1 !important;
}

[data-css="sidebar"] a:hover { opacity: 1 !important; }

/* ── 10. ADD NEW ITEM (Array fields) ── */
[data-css$="-add-new-item"],
[data-css*="Add-New-Item"],
[data-css*="add-new-item"],
button[data-css*="add-new-item"],
[data-css$="-edit"] button[class*="Button"]:not([type="submit"]):not([data-css$="-filter-button"]),
[data-css$="-new"] button[class*="Button"]:not([type="submit"]):not([data-css$="-filter-button"]),
[data-css$="-edit"] a[class*="Button"]:not([data-css$="-filter-button"]),
[data-css$="-new"] a[class*="Button"]:not([data-css$="-filter-button"]) {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #1e3a8a !important;
    color: #1e3a8a !important;
    border-radius: 999px !important;
    padding: 8px 24px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

[data-css$="-add-new-item"]:hover,
[data-css*="Add-New-Item"]:hover,
[data-css*="add-new-item"]:hover,
button[data-css*="add-new-item"]:hover,
div[class*="Section"] button[class*="Button"]:not([type="submit"]):hover,
div[class*="FormGroup"] button[class*="Button"]:not([type="submit"]):hover {
    background-color: #1e3a8a !important;
    background: #1e3a8a !important;
    border-color: #1e3a8a !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

[data-css$="-add-new-item"]:hover *,
[data-css*="Add-New-Item"]:hover *,
[data-css*="add-new-item"]:hover *,
button[data-css*="add-new-item"]:hover *,
div[class*="Section"] button[class*="Button"]:not([type="submit"]):hover *,
div[class*="FormGroup"] button[class*="Button"]:not([type="submit"]):hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
}

button svg, a svg { fill: currentColor !important; }

/* ═══════════════════════════════════════════════════════════════
   FILTER DRAWER — {resourceId}-filter-drawer
   ═══════════════════════════════════════════════════════════════ */
/* The AdminJS Drawer defaults to z-index:100 — far below the table's
   row-action ButtonGroup (z-index:9999) and AdminJS's built-in
   DropDownItem (z-index:10000). That caused (a) the topbar email/role
   to bleed through the drawer header and (b) the table's ⋯ menus to
   bleed through the drawer body. Force the drawer above all of them. */
[data-css$="-filter-drawer"],
section[class*="Drawer_Filter"],
section[class*="adminjs_Drawer"] {
    z-index: 100000 !important;
}

[data-css$="-filter-drawer"],
div[class*="Drawer"][class*="Content"] {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-left: none !important;
    box-shadow: -24px 0 60px rgba(15, 36, 96, 0.25), inset 3px 0 0 #0ea5e9 !important;
    min-width: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

[data-css$="-filter-drawer"] > div { background-color: #ffffff !important; }

/* Drawer title row — H3 holds the ChevronRight close button + "Filters" text.
   There is NO <header> tag in AdminJS drawers. */
[data-css$="-filter-drawer"] h3,
[data-css$="-filter-drawer-content"] h3,
[data-css$="-filter-drawer"] [class*="H3"],
[data-css$="-filter-drawer-content"] [class*="H3"],
section[class*="Drawer"] > div > h3:first-child,
section[class*="Drawer_Filter"] h3:first-of-type {
    background: #1e3a8a !important;
    color: #ffffff !important;
    padding: 20px 22px !important;
    margin: 0 !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    letter-spacing: 0.3px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 2px 12px rgba(30,58,138,0.2) !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
}

[data-css$="-filter-drawer"] h3 *,
[data-css$="-filter-drawer-content"] h3 *,
section[class*="Drawer_Filter"] h3 * {
    color: #ffffff !important;
}

/* Drawer close (ChevronRight) button — visible, NO hover effect */
[data-css$="-filter-drawer"] h3 button,
[data-css$="-filter-drawer-content"] h3 button,
section[class*="Drawer_Filter"] h3 button,
[data-css$="-filter-drawer"] h3 button:hover,
[data-css$="-filter-drawer-content"] h3 button:hover,
section[class*="Drawer_Filter"] h3 button:hover,
[data-css$="-filter-drawer"] h3 button:focus,
[data-css$="-filter-drawer-content"] h3 button:focus {
    background: rgba(255, 255, 255, 0.18) !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    filter: none !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9999 !important;
}

[data-css$="-filter-drawer"] h3 button *,
[data-css$="-filter-drawer-content"] h3 button *,
section[class*="Drawer_Filter"] h3 button *,
[data-css$="-filter-drawer"] h3 button svg,
[data-css$="-filter-drawer-content"] h3 button svg,
section[class*="Drawer_Filter"] h3 button svg,
[data-css$="-filter-drawer"] h3 button:hover svg,
[data-css$="-filter-drawer-content"] h3 button:hover svg,
section[class*="Drawer_Filter"] h3 button:hover svg {
    color: #1e3a8a !important;
    fill: #1e3a8a !important;
    stroke: #1e3a8a !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
}

/* Drawer content — scrollable area between header and footer.
   Extra bottom padding keeps the last field from sitting flush against
   the pinned footer when the user scrolls to the end. */
[data-css$="-filter-drawer-content"],
[data-css$="-filter-drawer"] > div:not(header):not(footer),
[class*="Drawer"] > div:not(header):not(footer) {
    padding: 20px 22px 32px !important;
    background: #f8fafc !important;
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Date picker inputs inside drawer — prevent calendar icon from overlaying */
[data-css$="-filter-drawer"] [class*="DatePicker"],
[data-css$="-filter-drawer-content"] [class*="DatePicker"],
[data-css$="-filter-drawer"] [class*="Datepicker"],
[data-css$="-filter-drawer-content"] [class*="Datepicker"] {
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

[data-css$="-filter-drawer"] .react-datepicker-wrapper,
[data-css$="-filter-drawer-content"] .react-datepicker-wrapper {
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px !important;
}

[data-css$="-filter-drawer"] [class*="DatePicker"] input,
[data-css$="-filter-drawer-content"] [class*="DatePicker"] input,
[data-css$="-filter-drawer"] [class*="Datepicker"] input,
[data-css$="-filter-drawer-content"] [class*="Datepicker"] input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 42px !important;
}

/* Calendar icon button inside date inputs — position inside the field */
[data-css$="-filter-drawer"] [class*="DatePicker"] button,
[data-css$="-filter-drawer-content"] [class*="DatePicker"] button,
[data-css$="-filter-drawer"] [class*="Datepicker"] button,
[data-css$="-filter-drawer-content"] [class*="Datepicker"] button {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    width: auto !important;
    height: auto !important;
    z-index: 2 !important;
    border-radius: 6px !important;
}

[data-css$="-filter-drawer"] [class*="DatePicker"] button:hover,
[data-css$="-filter-drawer-content"] [class*="DatePicker"] button:hover,
[data-css$="-filter-drawer"] [class*="Datepicker"] button:hover,
[data-css$="-filter-drawer-content"] [class*="Datepicker"] button:hover {
    background: rgba(30, 58, 138, 0.08) !important;
    background-color: rgba(30, 58, 138, 0.08) !important;
    transform: translateY(-50%) !important;
}

[data-css$="-filter-drawer"] [class*="DatePicker"] button svg,
[data-css$="-filter-drawer-content"] [class*="DatePicker"] button svg,
[data-css$="-filter-drawer"] [class*="Datepicker"] button svg,
[data-css$="-filter-drawer-content"] [class*="Datepicker"] button svg {
    color: #1e3a8a !important;
    fill: #1e3a8a !important;
    width: 18px !important;
    height: 18px !important;
}

/* Drawer footer — pinned at bottom via flex-shrink: 0 */
[data-css$="-filter-drawer-footer"],
[data-css$="-filter-drawer"] footer,
aside[class*="Drawer"] footer,
[class*="Drawer"] footer {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 14px 20px !important;
    display: flex !important;
    gap: 10px !important;
    box-shadow: 0 -4px 16px rgba(15,36,96,0.06) !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
}

/* Filter field GROUPS — no outer border/card (prevents double border).
   The input itself carries the themed border. */
[data-css$="-filter-drawer"] [class*="FormGroup"],
[data-css$="-filter-drawer-content"] [class*="FormGroup"],
aside[class*="Drawer"] [class*="FormGroup"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    box-shadow: none !important;
}

/* Drawer labels */
[data-css$="-filter-drawer"] label,
[data-css$="-filter-drawer"] [class*="Label"],
[data-css$="-filter-drawer-content"] label,
[data-css$="-filter-drawer-content"] [class*="Label"],
aside[class*="Drawer"] label,
aside[class*="Drawer"] [class*="Label"] {
    color: #475569 !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* ═══════════════════════════════════════════════════════════════
   DRAWER INPUT FIELDS — themed border
   ═══════════════════════════════════════════════════════════════ */
[data-css$="-filter-drawer"] input:not([type="checkbox"]):not([type="radio"]),
[data-css$="-filter-drawer"] textarea,
[data-css$="-filter-drawer"] select,
[data-css$="-filter-drawer-content"] input:not([type="checkbox"]):not([type="radio"]),
[data-css$="-filter-drawer-content"] textarea,
[data-css$="-filter-drawer-content"] select,
aside[class*="Drawer"] input:not([type="checkbox"]):not([type="radio"]),
aside[class*="Drawer"] textarea,
aside[class*="Drawer"] select {
    background-color: #f8faff !important;
    color: #0f172a !important;
    border: 1.5px solid #bfdbfe !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
[data-css$="-filter-drawer"] input:hover,
[data-css$="-filter-drawer"] textarea:hover,
[data-css$="-filter-drawer-content"] input:hover,
[data-css$="-filter-drawer-content"] textarea:hover,
aside[class*="Drawer"] input:hover,
aside[class*="Drawer"] textarea:hover { border-color: #93c5fd !important; }

[data-css$="-filter-drawer"] input:focus,
[data-css$="-filter-drawer"] textarea:focus,
[data-css$="-filter-drawer-content"] input:focus,
[data-css$="-filter-drawer-content"] textarea:focus,
aside[class*="Drawer"] input:focus,
aside[class*="Drawer"] textarea:focus {
    outline: none !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important;
}

[data-css$="-filter-drawer"] input::placeholder,
[data-css$="-filter-drawer-content"] input::placeholder,
aside[class*="Drawer"] input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* react-select in drawer */
[data-css$="-filter-drawer"] [class*="control"],
[data-css$="-filter-drawer-content"] [class*="control"],
aside[class*="Drawer"] [class*="control"] {
    background-color: #f8faff !important;
    border: 1.5px solid #bfdbfe !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
[data-css$="-filter-drawer"] [class*="control"]:hover,
[data-css$="-filter-drawer-content"] [class*="control"]:hover,
aside[class*="Drawer"] [class*="control"]:hover { border-color: #93c5fd !important; }

[data-css$="-filter-drawer"] [class*="control"][class*="focused"],
[data-css$="-filter-drawer-content"] [class*="control"][class*="focused"],
aside[class*="Drawer"] [class*="control"][class*="focused"],
[data-css$="-filter-drawer"] [class*="control"]:focus-within,
[data-css$="-filter-drawer-content"] [class*="control"]:focus-within,
aside[class*="Drawer"] [class*="control"]:focus-within {
    background-color: #ffffff !important;
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important;
}

/* Selected value text (after choosing an option) — overrides react-select
   inline `color: white` from filterStyles. */
[data-css$="-filter-drawer"] [class*="singleValue"],
[data-css$="-filter-drawer-content"] [class*="singleValue"],
aside[class*="Drawer"] [class*="singleValue"],
[data-css$="-filter-drawer"] [class*="singleValue"] *,
[data-css$="-filter-drawer-content"] [class*="singleValue"] *,
aside[class*="Drawer"] [class*="singleValue"] * {
    color: #0f172a !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* react-select INPUT WRAPPER div — inline style sets color: white. Override. */
[data-css$="-filter-drawer"] [class*="Input"],
[data-css$="-filter-drawer-content"] [class*="Input"],
aside[class*="Drawer"] [class*="Input"],
[data-css$="-filter-drawer"] [class*="css-"][class*="Input"],
[data-css$="-filter-drawer-content"] [class*="css-"][class*="Input"] {
    color: #0f172a !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* react-select native <input> — must have NO border/bg so the outer control
   is the only bordered element (fixes the double-border). Specificity here
   beats the general drawer-input rule with its two :not() additions. */
[data-css$="-filter-drawer"] [class*="control"] input:not([type="checkbox"]):not([type="radio"]),
[data-css$="-filter-drawer-content"] [class*="control"] input:not([type="checkbox"]):not([type="radio"]),
aside[class*="Drawer"] [class*="control"] input:not([type="checkbox"]):not([type="radio"]),
[data-css$="-filter-drawer"] [class*="Input"] input:not([type="checkbox"]):not([type="radio"]),
[data-css$="-filter-drawer-content"] [class*="Input"] input:not([type="checkbox"]):not([type="radio"]),
aside[class*="Drawer"] [class*="Input"] input:not([type="checkbox"]):not([type="radio"]) {
    color: #0f172a !important;
    opacity: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

[data-css$="-filter-drawer"] [class*="control"] input:focus,
[data-css$="-filter-drawer-content"] [class*="control"] input:focus,
aside[class*="Drawer"] [class*="control"] input:focus,
[data-css$="-filter-drawer"] [class*="Input"] input:focus,
[data-css$="-filter-drawer-content"] [class*="Input"] input:focus,
aside[class*="Drawer"] [class*="Input"] input:focus {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
}

/* ValueContainer — force child text to be visible */
[data-css$="-filter-drawer"] [class*="ValueContainer"],
[data-css$="-filter-drawer-content"] [class*="ValueContainer"],
aside[class*="Drawer"] [class*="ValueContainer"] {
    color: #0f172a !important;
    padding: 2px 8px !important;
}
[data-css$="-filter-drawer"] [class*="ValueContainer"] *,
[data-css$="-filter-drawer-content"] [class*="ValueContainer"] *,
aside[class*="Drawer"] [class*="ValueContainer"] * {
    color: #0f172a !important;
    opacity: 1 !important;
}

/* Placeholder — lighter color, listed AFTER ValueContainer * override */
[data-css$="-filter-drawer"] [class*="ValueContainer"] [class*="placeholder"],
[data-css$="-filter-drawer-content"] [class*="ValueContainer"] [class*="placeholder"],
aside[class*="Drawer"] [class*="ValueContainer"] [class*="placeholder"] {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

[data-css$="-filter-drawer"] [class*="placeholder"],
[data-css$="-filter-drawer-content"] [class*="placeholder"],
aside[class*="Drawer"] [class*="placeholder"] {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* Dropdown / clear indicators — visible, no hover change */
[data-css$="-filter-drawer"] [class*="indicatorContainer"],
[data-css$="-filter-drawer-content"] [class*="indicatorContainer"],
aside[class*="Drawer"] [class*="indicatorContainer"],
[data-css$="-filter-drawer"] [class*="IndicatorContainer"],
[data-css$="-filter-drawer-content"] [class*="IndicatorContainer"],
aside[class*="Drawer"] [class*="IndicatorContainer"],
[data-css$="-filter-drawer"] [class*="dropdownIndicator"],
[data-css$="-filter-drawer-content"] [class*="dropdownIndicator"],
aside[class*="Drawer"] [class*="dropdownIndicator"],
[data-css$="-filter-drawer"] [class*="clearIndicator"],
[data-css$="-filter-drawer-content"] [class*="clearIndicator"],
aside[class*="Drawer"] [class*="clearIndicator"],
[data-css$="-filter-drawer"] [class*="indicatorContainer"]:hover,
[data-css$="-filter-drawer-content"] [class*="indicatorContainer"]:hover,
aside[class*="Drawer"] [class*="indicatorContainer"]:hover,
[data-css$="-filter-drawer"] [class*="dropdownIndicator"]:hover,
[data-css$="-filter-drawer-content"] [class*="dropdownIndicator"]:hover,
aside[class*="Drawer"] [class*="dropdownIndicator"]:hover,
[data-css$="-filter-drawer"] [class*="clearIndicator"]:hover,
[data-css$="-filter-drawer-content"] [class*="clearIndicator"]:hover,
aside[class*="Drawer"] [class*="clearIndicator"]:hover {
    color: #1e3a8a !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    padding: 6px !important;
    cursor: pointer !important;
}

[data-css$="-filter-drawer"] [class*="indicatorContainer"] svg,
[data-css$="-filter-drawer-content"] [class*="indicatorContainer"] svg,
aside[class*="Drawer"] [class*="indicatorContainer"] svg,
[data-css$="-filter-drawer"] [class*="dropdownIndicator"] svg,
[data-css$="-filter-drawer-content"] [class*="dropdownIndicator"] svg,
aside[class*="Drawer"] [class*="dropdownIndicator"] svg,
[data-css$="-filter-drawer"] [class*="clearIndicator"] svg,
[data-css$="-filter-drawer-content"] [class*="clearIndicator"] svg,
aside[class*="Drawer"] [class*="clearIndicator"] svg,
[data-css$="-filter-drawer"] [class*="indicatorContainer"]:hover svg,
[data-css$="-filter-drawer-content"] [class*="indicatorContainer"]:hover svg,
aside[class*="Drawer"] [class*="indicatorContainer"]:hover svg,
[data-css$="-filter-drawer"] [class*="dropdownIndicator"]:hover svg,
[data-css$="-filter-drawer-content"] [class*="dropdownIndicator"]:hover svg,
aside[class*="Drawer"] [class*="dropdownIndicator"]:hover svg {
    color: #1e3a8a !important;
    fill: #1e3a8a !important;
    stroke: #1e3a8a !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
}

/* Indicator separator — subtle divider */
[data-css$="-filter-drawer"] [class*="indicatorSeparator"],
[data-css$="-filter-drawer-content"] [class*="indicatorSeparator"],
aside[class*="Drawer"] [class*="indicatorSeparator"] {
    background-color: #e2e8f0 !important;
    width: 1px !important;
}

/* Multi-value pills */
[data-css$="-filter-drawer"] [class*="multiValue"],
[data-css$="-filter-drawer-content"] [class*="multiValue"],
aside[class*="Drawer"] [class*="multiValue"] {
    background-color: #dbeafe !important;
    border-radius: 999px !important;
    padding: 2px 4px !important;
}
[data-css$="-filter-drawer"] [class*="multiValue"] [class*="Label"],
[data-css$="-filter-drawer-content"] [class*="multiValue"] [class*="Label"],
aside[class*="Drawer"] [class*="multiValue"] [class*="Label"] {
    color: #1e3a8a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 2px 6px !important;
}
[data-css$="-filter-drawer"] [class*="multiValue"] [class*="Remove"]:hover,
[data-css$="-filter-drawer-content"] [class*="multiValue"] [class*="Remove"]:hover,
aside[class*="Drawer"] [class*="multiValue"] [class*="Remove"]:hover {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
}

/* Select portal menu */
[class*="menu"] [class*="option"] {
    background-color: #ffffff !important;
    color: #0f172a !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: background-color 0.12s ease !important;
}
[class*="menu"] [class*="option"][class*="focused"],
[class*="menu"] [class*="option"]:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}
[class*="menu"] [class*="option"][class*="selected"] {
    background: #1e3a8a !important;
    color: #ffffff !important;
}

/* Drawer Apply button (primary) */
[data-css$="-filter-drawer-button-apply"],
a[data-css$="-filter-drawer-button-apply"],
button[data-css$="-filter-drawer-button-apply"] {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.30) !important;
}
[data-css$="-filter-drawer-button-apply"] *,
[data-css$="-filter-drawer-button-apply"]:hover *,
button[data-css$="-filter-drawer-button-apply"] *,
button[data-css$="-filter-drawer-button-apply"]:hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Drawer Reset button (secondary) */
[data-css$="-filter-drawer-button-reset"],
a[data-css$="-filter-drawer-button-reset"],
button[data-css$="-filter-drawer-button-reset"] {
    background-color: #ffffff !important;
    color: #1e3a8a !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}
[data-css$="-filter-drawer-button-reset"]:hover,
button[data-css$="-filter-drawer-button-reset"]:hover {
    background-color: #f1f5f9 !important;
    color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    opacity: 1 !important;
}
[data-css$="-filter-drawer-button-reset"] *,
[data-css$="-filter-drawer-button-reset"]:hover * {
    color: #1e3a8a !important;
    fill: #1e3a8a !important;
}

/* ═══════════════════════════════════════════════════════════════
   FORMS — Edit / New / Show
   ═══════════════════════════════════════════════════════════════ */
[data-css$="-edit"],
[data-css$="-new"],
[data-css$="-show"] { padding: 24px !important; }

[data-css$="-edit"] h2,
[data-css$="-new"] h2,
[data-css$="-show"] h2,
[data-css$="-edit"] h3,
[data-css$="-new"] h3,
[data-css$="-show"] h3 {
    color: #0f172a !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    margin: 6px 0 14px 0 !important;
}

[data-css$="-edit"] [class*="FormGroup"],
[data-css$="-new"] [class*="FormGroup"] { margin-bottom: 18px !important; }

[data-css$="-edit"] label,
[data-css$="-new"] label,
[data-css$="-show"] label,
section[class*="DrawerContent"] label {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.1px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

[data-css$="-edit"] input:not([type="checkbox"]):not([type="radio"]),
[data-css$="-new"] input:not([type="checkbox"]):not([type="radio"]),
[data-css$="-edit"] textarea,
[data-css$="-new"] textarea,
[data-css$="-edit"] select,
[data-css$="-new"] select {
    color: #0f172a !important;
    background-color: #f8faff !important;
    border: 1.5px solid #bfdbfe !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
[data-css$="-edit"] input:hover,
[data-css$="-new"] input:hover,
[data-css$="-edit"] textarea:hover,
[data-css$="-new"] textarea:hover,
[data-css$="-edit"] select:hover,
[data-css$="-new"] select:hover { border-color: #93c5fd !important; }

[data-css$="-edit"] input:focus,
[data-css$="-new"] input:focus,
[data-css$="-edit"] textarea:focus,
[data-css$="-new"] textarea:focus,
[data-css$="-edit"] select:focus,
[data-css$="-new"] select:focus {
    border-color: #0ea5e9 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important;
    outline: none !important;
}

[data-css$="-edit"] input::placeholder,
[data-css$="-new"] input::placeholder,
[data-css$="-edit"] textarea::placeholder,
[data-css$="-new"] textarea::placeholder { color: #94a3b8 !important; }

[data-css$="-edit"] [class*="control"],
[data-css$="-new"] [class*="control"] {
    background-color: #f8faff !important;
    border: 1.5px solid #bfdbfe !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}
[data-css$="-edit"] [class*="control"]:hover,
[data-css$="-new"] [class*="control"]:hover { border-color: #93c5fd !important; }
[data-css$="-edit"] [class*="control"][class*="focused"],
[data-css$="-new"] [class*="control"][class*="focused"] {
    border-color: #0ea5e9 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */
table {
    background: #ffffff !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    border-radius: 16px !important;
}
table thead { background: transparent !important; }
table thead th { background: #f8faff !important; }
table thead th:first-child { border-top-left-radius: 16px !important; }
table thead th:last-child { border-top-right-radius: 16px !important; }
table tbody tr:last-child td:first-child { border-bottom-left-radius: 16px !important; }
table tbody tr:last-child td:last-child { border-bottom-right-radius: 16px !important; }
table th {
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
table td {
    color: #1e293b !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px !important;
}
table tbody tr { transition: background-color 0.12s ease !important; }
table tbody tr:hover { background-color: #f8faff !important; }

table td a:not([data-css$="-new-button"]):not([data-css$="-filter-button"]),
table td button:not([data-css$="-new-button"]):not([data-css$="-filter-button"]) {
    color: #1e3a8a !important;
    border-radius: 8px !important;
}
table td a:not([data-css$="-new-button"]):not([data-css$="-filter-button"]):hover,
table td button:not([data-css$="-new-button"]):not([data-css$="-filter-button"]):hover {
    color: #1d4ed8 !important;
    background-color: #eff6ff !important;
    opacity: 1 !important;
}

table input[type="checkbox"] {
    accent-color: #0ea5e9 !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */
[class*="Badge"], [class*="badge"], .status-pill {
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
[class*="Modal"], [role="dialog"] { border-radius: 16px !important; overflow: hidden !important; }
[class*="Modal"] > div, [role="dialog"] > div {
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(15, 36, 96, 0.35), 0 8px 20px rgba(14, 165, 233, 0.15) !important;
}
[class*="Modal"] [class*="Header"], [role="dialog"] [class*="Header"] {
    background: #1e3a8a !important;
    color: #ffffff !important;
    padding: 18px 22px !important;
}
[class*="Modal"] [class*="Header"] *, [role="dialog"] [class*="Header"] * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST / NOTICES
   ═══════════════════════════════════════════════════════════════ */
[class*="Notice"], [class*="notice"] {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 12px 30px rgba(15, 36, 96, 0.15) !important;
    font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════
   SELECTION
   ═══════════════════════════════════════════════════════════════ */
::selection { background: rgba(14, 165, 233, 0.25); color: #0f172a; }

/* ═══════════════════════════════════════════════════════════════
   TERMINAL LOCKS — must be last
   Higher-specificity overrides to beat any AdminJS hover injection.
   ═══════════════════════════════════════════════════════════════ */

/* CREATE NEW — absolutely locked */
body [data-css$="-new-button"],
body a[data-css$="-new-button"],
body button[data-css$="-new-button"],
body [data-css$="-new-button"]:link,
body [data-css$="-new-button"]:visited,
body [data-css$="-new-button"]:hover,
body [data-css$="-new-button"]:focus,
body [data-css$="-new-button"]:focus-visible,
body [data-css$="-new-button"]:active,
body a[data-css$="-new-button"]:hover,
body a[data-css$="-new-button"]:focus,
body button[data-css$="-new-button"]:hover,
body button[data-css$="-new-button"]:focus,
main [data-css$="-new-button"],
main [data-css$="-new-button"]:hover,
main [data-css$="-new-button"]:focus,
[data-css="page"] [data-css$="-new-button"],
[data-css="page"] [data-css$="-new-button"]:hover {
    background: #1e3a8a !important;
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.30) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
}

body [data-css$="-new-button"] *,
body [data-css$="-new-button"]:hover *,
body [data-css$="-new-button"]:focus *,
body [data-css$="-new-button"]:active *,
main [data-css$="-new-button"] *,
main [data-css$="-new-button"]:hover *,
[data-css="page"] [data-css$="-new-button"] *,
[data-css="page"] [data-css$="-new-button"]:hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* FILTER BUTTON — absolutely locked, no hover change */
body [data-css$="-filter-button"],
body a[data-css$="-filter-button"],
body button[data-css$="-filter-button"],
body [data-css$="-filter-button"]:hover,
body [data-css$="-filter-button"]:focus,
body [data-css$="-filter-button"]:active,
body a[data-css$="-filter-button"]:hover,
body button[data-css$="-filter-button"]:hover,
main [data-css$="-filter-button"],
main [data-css$="-filter-button"]:hover,
[data-css="page"] [data-css$="-filter-button"],
[data-css="page"] [data-css$="-filter-button"]:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1e3a8a !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
    cursor: pointer !important;
}

body [data-css$="-filter-button"] *,
body [data-css$="-filter-button"]:hover *,
main [data-css$="-filter-button"] *,
main [data-css$="-filter-button"]:hover *,
[data-css="page"] [data-css$="-filter-button"] *,
[data-css="page"] [data-css$="-filter-button"]:hover * {
    color: #1e3a8a !important;
    fill: #1e3a8a !important;
    stroke: #1e3a8a !important;
    opacity: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   FINAL NUCLEAR OVERRIDES FOR FILTER DRAWER
   Fixes: Arrow visibility, selected text, and double borders.
   ═══════════════════════════════════════════════════════════════ */

/* 1. FORCE ARROW VISIBILITY & REMOVE HOVER EFFECT */
[data-css*="filter-drawer"] [class*="indicator"],
[data-css*="filter-drawer"] [class*="Indicator"],
[data-css*="filter-drawer"] [class*="dropdownIndicator"],
[data-css*="filter-drawer"] [class*="DropdownIndicator"] {
    color: #1e3a8a !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 6px !important;
    cursor: pointer !important;
}

[data-css*="filter-drawer"] [class*="indicator"]:hover,
[data-css*="filter-drawer"] [class*="Indicator"]:hover,
[data-css*="filter-drawer"] [class*="dropdownIndicator"]:hover,
[data-css*="filter-drawer"] [class*="DropdownIndicator"]:hover {
    background: transparent !important;
    background-color: transparent !important;
    transform: none !important;
    color: #1e3a8a !important;
}

[data-css*="filter-drawer"] [class*="indicator"] svg,
[data-css*="filter-drawer"] [class*="Indicator"] svg {
    color: #1e3a8a !important;
    fill: #1e3a8a !important;
    stroke: #1e3a8a !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}

/* 2. FORCE SELECTED TEXT VISIBILITY (OVERRIDE INLINE WHITE) */
[data-css*="filter-drawer"] [class*="singleValue"],
[data-css*="filter-drawer"] [class*="SingleValue"],
[data-css*="filter-drawer"] [class*="singleValue"] *,
[data-css*="filter-drawer"] [class*="Input"] input,
[data-css*="filter-drawer"] [class*="input"] input {
    color: #0f172a !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. FIX DOUBLE BORDERS */
/* Remove borders from all wrappers first */
[data-css*="filter-drawer"] [class*="FormGroup"],
[data-css*="filter-drawer"] [class*="Box"],
[data-css*="filter-drawer"] div[class*="css-"][class*="control"] {
    /* We want the control to have the border, but maybe it's being doubled by another div */
}

/* Ensure the react-select internal input has NO border (the main cause of double border) */
[data-css*="filter-drawer"] [class*="control"] input,
[data-css*="filter-drawer"] [class*="Input"] input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
}

/* Set the single clean border on the control wrapper */
[data-css*="filter-drawer"] [class*="control"] {
    border: 1.5px solid #bfdbfe !important;
    border-radius: 10px !important;
    background-color: #f8faff !important;
}

[data-css*="filter-drawer"] [class*="control"]:hover {
    border-color: #93c5fd !important;
}

[data-css*="filter-drawer"] [class*="control"][class*="focused"],
[data-css*="filter-drawer"] [class*="control"]:focus-within {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. DROPDOWN & DATEPICKER OVERLAP FIX
   ═══════════════════════════════════════════════════════════════ */

/* 1. GLOBAL SELECT / DROPDOWN FIX */
/* Ensure Select dropdown menu is always on top of other elements */
[class*="Control"],
[class*="control"] {
    z-index: 5 !important;
}

/* Target react-select menu and AdminJS Select menu classes */
[class*="Menu"],
[class*="menu"],
[class*="MenuList"],
.css-b62m3t-container [class*="-menu"] {
    z-index: 9999 !important;
    visibility: visible !important;
    background-color: #ffffff !important;
}

/* Ensure text color in Select components is visible globally */
[class*="ValueContainer"],
[class*="singleValue"],
[class*="Select"] *,
[class*="option"]:not([class*="focused"]) {
    color: #0f172a !important;
}

/* Placeholder color */
[class*="placeholder"] {
    color: #94a3b8 !important;
}

/* 2. Refine DatePicker z-index: Only the POPUP should be high, not the container */
[class*="DatePicker"],
[class*="Datepicker"],
[class*="datepicker"],
.adminjs_Datepicker {
    z-index: auto !important; /* Reset container z-index */
}

/* Specifically target the popper/portal which holds the calendar */
.react-datepicker-popper,
.react-datepicker__portal,
.adminjs_Datepicker [class*="portal"],
.adminjs_Datepicker [class*="popper"] {
    z-index: 1000000 !important;
}

/* 5. DRAWER SCROLL CONTAINER — keep the pinned-footer flex layout.
   The drawer is a flex column (header + scrollable content + footer).
   Content scrolls INTERNALLY so the footer stays pinned at the bottom
   on mobile. Dropdown "pop-out" is handled by react-datepicker portals
   and the z-index rules above — do NOT invert overflow here, that broke
   mobile by letting content render below the footer. */
[data-css$="-filter-drawer"] {
    overflow: hidden !important;
}

[data-css$="-filter-drawer-content"] {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Ensure the map container doesn't overlap the calendar if it's nearby */
[id^="map-"],
#unified-map-container,
.leaflet-container {
    z-index: 1 !important;
    position: relative !important;
}

/* 6. FIX FOR ACTION FOOTER COVERING POPUPS
   On edit/new forms the DatePicker popper renders inline and gets painted
   below the Save-button footer due to ancestor stacking contexts. The real
   fix lives in the resource config (`withPortal: true` on date properties)
   which renders the calendar in a body-level portal. The rule below just
   keeps that portal above everything else on screen. */
.react-datepicker-popper,
.react-datepicker__portal {
    z-index: 9999999 !important;
}

/* ═══════════════════════════════════════════════════════════════
   DATE PICKER — EDIT / NEW FORMS
   Without these rules the DatePicker wrapper collapses to 0 width
   and only the calendar icon is visible on the right edge.
   Uses both [class*="DatePicker"] AND .adminjs_DatePicker for
   maximum coverage against styled-component class hashing.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Outer wrapper — full width block */
[data-css$="-edit"] .adminjs_DatePicker,
[data-css$="-new"] .adminjs_DatePicker,
[data-css$="-edit"] [class*="DatePicker"],
[data-css$="-new"] [class*="DatePicker"],
[data-css$="-edit"] [class*="Datepicker"],
[data-css$="-new"] [class*="Datepicker"],
.adminjs_DatePicker {
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 2. react-datepicker-wrapper — block/full-width, no border here (border on input) */
[data-css$="-edit"] .adminjs_DatePicker .react-datepicker-wrapper,
[data-css$="-new"] .adminjs_DatePicker .react-datepicker-wrapper,
.adminjs_DatePicker .react-datepicker-wrapper,
[data-css$="-edit"] [class*="DatePicker"] .react-datepicker-wrapper,
[data-css$="-new"] [class*="DatePicker"] .react-datepicker-wrapper {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 3. Input container — full width block */
[data-css$="-edit"] .adminjs_DatePicker .react-datepicker__input-container,
[data-css$="-new"] .adminjs_DatePicker .react-datepicker__input-container,
.adminjs_DatePicker .react-datepicker__input-container,
[data-css$="-edit"] [class*="DatePicker"] .react-datepicker__input-container,
[data-css$="-new"] [class*="DatePicker"] .react-datepicker__input-container {
    display: block !important;
    width: 100% !important;
}

/* 4. The actual <input> — full width, themed border (same as other form inputs) */
[data-css$="-edit"] .adminjs_DatePicker input,
[data-css$="-new"] .adminjs_DatePicker input,
.adminjs_DatePicker input,
[data-css$="-edit"] [class*="DatePicker"] input,
[data-css$="-new"] [class*="DatePicker"] input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 46px 10px 14px !important;
    border: 1.5px solid #bfdbfe !important;
    border-radius: 10px !important;
    background-color: #f8faff !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: 42px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

[data-css$="-edit"] .adminjs_DatePicker input:hover,
[data-css$="-new"] .adminjs_DatePicker input:hover,
.adminjs_DatePicker input:hover {
    border-color: #93c5fd !important;
}

[data-css$="-edit"] .adminjs_DatePicker input:focus,
[data-css$="-new"] .adminjs_DatePicker input:focus,
.adminjs_DatePicker input:focus {
    border-color: #0ea5e9 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important;
    outline: none !important;
}

[data-css$="-edit"] .adminjs_DatePicker input::placeholder,
[data-css$="-new"] .adminjs_DatePicker input::placeholder,
.adminjs_DatePicker input::placeholder {
    color: #94a3b8 !important;
}

/* 5. Calendar icon — position as overlay inside the input,
      override the generic pill-button rule that turns every
      <button type="button"> on edit/new forms into a pill. */
[data-css$="-edit"] .adminjs_DatePicker [class*="Icon"],
[data-css$="-new"] .adminjs_DatePicker [class*="Icon"],
.adminjs_DatePicker [class*="Icon"],
[data-css$="-edit"] [class*="DatePicker"] [class*="Icon"],
[data-css$="-new"] [class*="DatePicker"] [class*="Icon"] {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    min-width: 38px !important;
    width: 38px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #1e3a8a !important;
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: 2 !important;
    cursor: pointer !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

[data-css$="-edit"] .adminjs_DatePicker [class*="Icon"] svg,
[data-css$="-new"] .adminjs_DatePicker [class*="Icon"] svg,
.adminjs_DatePicker [class*="Icon"] svg,
[data-css$="-edit"] [class*="DatePicker"] [class*="Icon"] svg,
[data-css$="-new"] [class*="DatePicker"] [class*="Icon"] svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    width: 18px !important;
    height: 18px !important;
}

/* Also handle if there's a button inside the datepicker */
[data-css$="-edit"] .adminjs_DatePicker button[type="button"],
[data-css$="-new"] .adminjs_DatePicker button[type="button"],
[data-css$="-edit"] [class*="DatePicker"] button[type="button"],
[data-css$="-new"] [class*="DatePicker"] button[type="button"] {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    width: 38px !important;
    height: 100% !important;
    min-height: 0 !important;
    z-index: 3 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

[data-css$="-edit"] .adminjs_DatePicker button[type="button"]:hover,
[data-css$="-new"] .adminjs_DatePicker button[type="button"]:hover,
[data-css$="-edit"] [class*="DatePicker"] button[type="button"]:hover,
[data-css$="-new"] [class*="DatePicker"] button[type="button"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

[data-css$="-edit"] .adminjs_DatePicker button[type="button"] svg,
[data-css$="-new"] .adminjs_DatePicker button[type="button"] svg,
[data-css$="-edit"] [class*="DatePicker"] button[type="button"] svg,
[data-css$="-new"] [class*="DatePicker"] button[type="button"] svg,
[data-css$="-edit"] .adminjs_DatePicker button[type="button"]:hover svg,
[data-css$="-new"] .adminjs_DatePicker button[type="button"]:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    width: 18px !important;
    height: 18px !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE TABLES — show ALL desktop columns on small screens
   and let the table scroll horizontally inside its wrapper.

   AdminJS hides every non-title column below 769px via the styled-
   system `display` prop (see node_modules/adminjs/.../records-table/
   utils/display.js — returns ['none','none','table-cell',...]).
   We force every <th> and <td> back to table-cell on small screens
   so the whole desktop layout is visible, and let the Box wrapper
   (data-css="<resource>-list-table-wrapper", see actions/list.js)
   scroll horizontally instead of clipping.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
    html body [data-css$="-list-table-wrapper"],
    html body .sk-table-scroll-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
        width: 100% !important;
    }
    html body [data-css$="-list-table-wrapper"] table,
    html body .sk-table-scroll-wrapper table {
        display: table !important;
        width: max-content !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }
    html body [data-css$="-list-table-wrapper"] table thead,
    html body [data-css$="-list-table-wrapper"] table tbody,
    html body [data-css$="-list-table-wrapper"] table tr,
    html body .sk-table-scroll-wrapper table thead,
    html body .sk-table-scroll-wrapper table tbody,
    html body .sk-table-scroll-wrapper table tr {
        display: table-row-group !important;
    }
    html body [data-css$="-list-table-wrapper"] table thead,
    html body .sk-table-scroll-wrapper table thead {
        display: table-header-group !important;
    }
    html body [data-css$="-list-table-wrapper"] table tr,
    html body .sk-table-scroll-wrapper table tr {
        display: table-row !important;
    }
    html body [data-css$="-list-table-wrapper"] table thead tr th,
    html body [data-css$="-list-table-wrapper"] table tbody tr td,
    html body [data-css$="-list-table-wrapper"] table th[class*="adminjs"],
    html body [data-css$="-list-table-wrapper"] table td[class*="adminjs"],
    html body .sk-table-scroll-wrapper table thead tr th,
    html body .sk-table-scroll-wrapper table tbody tr td,
    html body .sk-table-scroll-wrapper table th[class*="adminjs"],
    html body .sk-table-scroll-wrapper table td[class*="adminjs"] {
        display: table-cell !important;
        white-space: nowrap !important;
        visibility: visible !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HIDE DEFAULT ADMINJS LOADER
   AdminJS shows its own "Loading..." spinner before custom components
   mount. We hide it so only our skeleton loaders are visible.
   ═══════════════════════════════════════════════════════════════ */
[class*="Loader"],
[class*="loader"],
[data-css="loading"],
[data-testid="loading"],
div[class*="Loader__StyledLoader"],
div[class*="Loader__Wrapper"] {
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — 375px minimum
   Full admin panel responsive overrides for phones & small tablets.
   ═══════════════════════════════════════════════════════════════ */

/* ── Small screens (phones) ── */
@media (max-width: 768px) {

    /* --- Main content area --- */
    [data-css="page"],
    [data-css="page"] > section,
    main > section {
        padding: 10px !important;
    }

    /* --- Cards & content wrappers --- */
    [data-css="page"] > section,
    [data-css="page"] section[class*="Box"],
    section[class*="Wrapper"][class*="Content"],
    [data-css$="-records"],
    [data-css$="-records-table"],
    [data-css$="-show"],
    [data-css$="-edit"],
    [data-css$="-new"] {
        border-radius: 12px !important;
        margin: 0 !important;
    }

    /* --- Forms — reduce padding --- */
    [data-css$="-edit"],
    [data-css$="-new"],
    [data-css$="-show"] {
        padding: 12px !important;
    }

    /* --- Header / TopBar --- */
    header,
    [data-css="top-bar"],
    [data-css="navbar"] {
        padding: 8px 12px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* --- Breadcrumbs --- */
    [data-css="breadcrumbs"],
    nav[class*="Breadcrumb"] {
        font-size: 12px !important;
    }

    /* --- Page action header (title + buttons row) --- */
    [data-css="page"] > section:first-child,
    [data-css$="-records"] > div:first-child,
    [class*="ActionHeader"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    /* --- Action buttons (Create new, Filter, Edit, Delete, Explore) --- */
    [data-css$="-new-button"],
    [data-css$="-filter-button"],
    [data-css$="-show-button"]:not(td *),
    [data-css$="-edit-button"]:not(td *),
    [data-css$="-delete-button"]:not(td *),
    button[type="submit"],
    [data-css$="-list-button"],
    a[class*="BackButton"],
    button[class*="BackButton"],
    .sk-unified-btn {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        min-width: 90px !important;
    }

    /* --- Search Bar Centering --- */
    [data-css="page"] section[class*="Box"] > div:has(input[placeholder*="Search"]) {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 360px !important;
    }

    /* --- Filter drawer — responsive width without breaking AdminJS closed state offset --- */
    [data-css$="-filter-drawer"],
    div[class*="Drawer"][class*="Content"] {
        min-width: 0 !important;
        max-width: 100vw !important;
        /* Removed width: 100vw !important to prevent the drawer from leaking when right: -400px is applied */
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        box-sizing: border-box !important;
    }

    /* --- Filter drawer header — compact on mobile --- */
    [data-css$="-filter-drawer"] h3,
    [data-css$="-filter-drawer-content"] h3 {
        padding: 16px 18px !important;
        font-size: 16px !important;
    }

    /* --- Filter drawer content — tighter padding on mobile, extra padding at bottom for footer --- */
    [data-css$="-filter-drawer-content"],
    [data-css$="-filter-drawer"] > div:not(header):not(footer),
    [class*="Drawer"] > div:not(header):not(footer) {
        padding: 16px 16px 80px 16px !important;
    }

    /* --- Filter drawer footer — fixed to bottom on mobile --- */
    [data-css$="-filter-drawer-footer"],
    [data-css$="-filter-drawer"] footer,
    [class*="Drawer"] footer {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 12px 16px !important;
        z-index: 1100 !important;
        box-sizing: border-box !important;
    }

    /* --- Filter form groups — less margin on mobile --- */
    [data-css$="-filter-drawer"] [class*="FormGroup"],
    [data-css$="-filter-drawer-content"] [class*="FormGroup"] {
        margin-bottom: 18px !important;
    }

    /* --- Table cells --- */
    table th {
        padding: 8px 10px !important;
        font-size: 10px !important;
    }
    table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* --- Forms & Fields stacking --- */
    [data-css$="-edit"] form [class*="FormGroup"],
    [data-css$="-new"] form [class*="FormGroup"],
    [data-css$="-show"] [class*="FormGroup"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- Sidebar logo --- */
    [data-css="sidebar-logo"] {
        padding: 12px 10px !important;
    }
    [data-css="sidebar-logo"] img {
        max-height: 36px !important;
        height: 36px !important;
    }
    [data-css="sidebar-logo"]::after {
        font-size: 14px !important;
    }

    /* --- Sidebar links --- */
    [data-css="sidebar"] a {
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 8px 10px 8px 14px !important;
        margin: 3px 8px !important;
    }

    /* --- Pagination — tighter spacing --- */
    [class*="Pagination"] a,
    [class*="Pagination"] button {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    /* --- Modals — full width on mobile --- */
    [class*="Modal"] > div,
    [role="dialog"] > div {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
    }
}

/* ── Very small screens (375px) ── */
@media (max-width: 420px) {

    [data-css="page"],
    [data-css="page"] > section,
    main > section {
        padding: 6px !important;
    }

    [data-css$="-edit"],
    [data-css$="-new"],
    [data-css$="-show"] {
        padding: 8px !important;
    }

    header,
    [data-css="top-bar"],
    [data-css="navbar"] {
        padding: 6px 8px !important;
    }

    /* Stat cards in dashboard — already grid-cols-2 via Tailwind */

    /* Filter drawer — extra compact on very small screens */
    [data-css$="-filter-drawer"] h3,
    [data-css$="-filter-drawer-content"] h3 {
        padding: 12px 14px !important;
        margin: 0 !important;
        font-size: 15px !important;
    }

    /* Bottom padding must clear the absolute-positioned footer (set in
       the >=421px media query above). Without enough room here the last
       field slides under the Apply/Reset bar on small phones. */
    [data-css$="-filter-drawer-content"],
    [data-css$="-filter-drawer"] > div:not(header):not(footer),
    [class*="Drawer"] > div:not(header):not(footer) {
        padding: 12px 12px 88px 12px !important;
    }

    [data-css$="-filter-drawer"] [class*="FormGroup"],
    [data-css$="-filter-drawer-content"] [class*="FormGroup"] {
        margin-bottom: 14px !important;
    }

    [data-css$="-filter-drawer-footer"],
    [data-css$="-filter-drawer"] footer,
    [class*="Drawer"] footer {
        padding: 10px 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TABLE DROPDOWN FIX
   Ensures that action menus (Show/Edit/Delete) don't get clipped by
   table row or container overflow.
   ═══════════════════════════════════════════════════════════════ */
table, 
thead, 
tbody, 
tr, 
td {
    overflow: visible !important;
}

/* Force the action column cell to be visible even if other cells have overflow rules */
td:last-child, 
th:last-child,
[class*="Actions"],
[class*="actions"] {
    overflow: visible !important;
}

/* Ensure the scroll wrapper doesn't clip vertically */
[data-css$="-list-table-wrapper"],
.sk-table-scroll-wrapper {
    overflow-y: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM SIDEBAR NAV (hover-to-open + active-route auto-open)
   Rendered by src/modules/common/components/auto-expand-sidebar-resources.tsx
   ═══════════════════════════════════════════════════════════════ */
[data-css="sidebar"] .sk-sidebar-nav {
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
}

[data-css="sidebar"] .sk-sidebar-group,
[data-css="sidebar"] .sk-sidebar-flat {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Group header — styled to match AdminJS top-level anchors. */
[data-css="sidebar"] .sk-sidebar-group-header {
    display: flex !important;
    align-items: center !important;
    width: calc(100% - 24px) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #334155 !important;
    border-radius: 10px !important;
    margin: 4px 12px !important;
    padding: 9px 12px 9px 16px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    font-family: inherit !important;
    text-align: left !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
    gap: 12px;
}

[data-css="sidebar"] .sk-sidebar-group-header svg:first-child,
[data-css="sidebar"] .sk-sidebar-flat a svg {
    flex-shrink: 0;
}

[data-css="sidebar"] .sk-sidebar-group-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-css="sidebar"] .sk-sidebar-group:hover > .sk-sidebar-group-header,
[data-css="sidebar"] .sk-sidebar-group.is-open > .sk-sidebar-group-header {
    background: #eff6ff !important;
    color: #1e3a8a !important;
}

/* Active-route group gets a stronger highlight so the user can tell which
   group "owns" the current page even when another group is hover-opened. */
[data-css="sidebar"] .sk-sidebar-group.has-active > .sk-sidebar-group-header {
    color: #1e3a8a !important;
    font-weight: 700 !important;
}

[data-css="sidebar"] .sk-sidebar-group.has-active > .sk-sidebar-group-header .sk-sidebar-chevron {
    color: #1e3a8a;
}

/* Chevron rotates 180° when the group is open. */
[data-css="sidebar"] .sk-sidebar-chevron {
    margin-left: auto;
    color: #94a3b8;
    transition: transform 0.25s ease, color 0.18s ease;
    flex-shrink: 0;
}

[data-css="sidebar"] .sk-sidebar-group.is-open > .sk-sidebar-group-header .sk-sidebar-chevron {
    transform: rotate(180deg);
    color: #1e3a8a;
}

/* Submenu animation — CSS max-height transition. The component sets the
   numeric max-height inline so the value reflects child count; the timing
   and easing live here. */
[data-css="sidebar"] .sk-sidebar-submenu-wrapper {
    overflow: hidden;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-css="sidebar"] .sk-sidebar-submenu {
    list-style: none !important;
    margin: 0 !important;
    padding: 2px 0 6px 0 !important;
}

[data-css="sidebar"] .sk-sidebar-submenu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Inherit the existing a-tag styling from earlier in this file; just adjust
   the indentation so submenu items read as nested. */
[data-css="sidebar"] .sk-sidebar-submenu a {
    padding-left: 44px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

[data-css="sidebar"] .sk-sidebar-submenu a.is-active,
[data-css="sidebar"] .sk-sidebar-submenu a[aria-current="page"] {
    font-weight: 600 !important;
}