/* Modern shell surfaces — body, scrollbars, topbar, modal, theme-aware overrides.
   Pairs with includes/head-modern.html and includes/shell-scripts.html.
   Load AFTER sb-admin-2.css (if that file is present) so .bg-white counter-override wins. */

/* Body font + page background (light + dark) */
html, body { font-family: 'Inter', system-ui, sans-serif; background: #f7f8fb; }
html.dark, html.dark body { background: #0b1020; color: #e5e7eb; }

/* Scrollbar theming */
.scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-area::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
html.dark .scroll-area::-webkit-scrollbar-thumb { background: #374151; }

/* Topbar dark-mode surface */
html.dark .modern-topbar { background-color: #111827 !important; border-color: #1f2937 !important; }
html.dark .modern-topbar a { color: #cbd5e1; }
html.dark .modern-topbar .text-slate-500 { color: #94a3b8 !important; }
html.dark .modern-topbar .text-slate-800 { color: #e2e8f0 !important; }

/* Tailwind utility class dark overrides (used by modern shell markup) */
html.dark .bg-white { background-color: #111827 !important; }
html.dark .bg-slate-50 { background-color: #0f172a !important; }
html.dark .bg-slate-100 { background-color: #1e293b !important; }
html.dark .border-slate-100 { border-color: #1e293b !important; }
html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .text-slate-900 { color: #f1f5f9 !important; }
html.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-slate-400 { color: #64748b !important; }
html.dark .hover\:bg-slate-50:hover { background-color: #1e293b !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }
html.dark .bg-brand-50 { background-color: rgba(99, 102, 241, 0.15) !important; }
html.dark .text-brand-700 { color: #a5b4fc !important; }
html.dark input, html.dark select { background-color: #0f172a !important; color: #e5e7eb !important; border-color: #334155 !important; }

/* Light-mode counter-overrides — protects modern surfaces from sb-admin-2.css
   which sets .bg-white to #484954!important. */
html:not(.dark) .bg-white       { background-color: #ffffff !important; }
html:not(.dark) .modern-sidebar { background-color: #ffffff !important; }
html:not(.dark) .modern-topbar  { background-color: #ffffff !important; }

/* Logo swap (both prefixed and unprefixed, so either markup works) */
html:not(.dark) .logo-dark,
html:not(.dark) .modern-sidebar .logo-dark { display: none !important; }
html.dark       .logo-light,
html.dark       .modern-sidebar .logo-light { display: none !important; }

/* Modern modal (Tailwind-styled, replaces Bootstrap modal) */
.modern-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5);
    display: none; align-items: center; justify-content: center; z-index: 1000;
}
.modern-modal-backdrop.is-open { display: flex; }
.modern-modal { background: #fff; border-radius: 0.75rem; box-shadow: 0 20px 50px rgba(0,0,0,0.25); width: 100%; max-width: 440px; margin: 1rem; overflow: hidden; }
html.dark .modern-modal { background: #111827; color: #e5e7eb; }
.modern-modal__header { padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; font-weight: 600; font-size: 1rem; }
html.dark .modern-modal__header { border-color: #1f2937; }
.modern-modal__body { padding: 1rem 1.25rem; font-size: 0.875rem; color: #475569; }
html.dark .modern-modal__body { color: #94a3b8; }
.modern-modal__footer { padding: 0.75rem 1.25rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 0.5rem; }
html.dark .modern-modal__footer { border-color: #1f2937; }

/* Hide legacy scroll-to-top button in the modern shell */
.scroll-to-top { display: none !important; }

/* Leaflet map — let hover fall through person markers so plane popups aren't blocked.
   !important is needed to beat Leaflet's .leaflet-interactive default. */
.text-below-marker:has(.fa-person),
.leaflet-marker-icon:has(.fa-person) { pointer-events: none !important; }

/* Mobile sidebar drawer — hidden off-canvas on narrow screens, revealed by
   the hamburger toggle injected via shell-scripts.html. Desktop is unchanged. */
.sidebar-mobile-toggle { display: none !important; }
.modern-sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 899;
    display: none;
}
.modern-sidebar-backdrop.is-open { display: block; }

@media (max-width: 1023px) {
    .sidebar-mobile-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        margin-right: 0.25rem;
        color: #64748b;
        border-radius: 0.5rem;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    .sidebar-mobile-toggle:hover { background: #f1f5f9; }
    html.dark .sidebar-mobile-toggle { color: #cbd5e1; }
    html.dark .sidebar-mobile-toggle:hover { background: #1e293b; }

    .modern-sidebar {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        z-index: 900;
        transform: translateX(-100%) !important;
        transition: transform 0.2s ease;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }
    .modern-sidebar.is-open { transform: translateX(0) !important; }
}