/* =========================================================
   GLOBAL LAYOUT
   Stripe / Vercel dark gradient aesthetic
   ========================================================= */

body {
    background: radial-gradient(circle at top left, #1f2937 0, #020617 45%, #000 100%);
    color: #e5e7eb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

.app-outer {
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.page-container {
    max-width: 1400px;
}

.page-inner {
    padding: 8px 0 32px 0;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.main-navbar {
    background: linear-gradient(90deg, #020617 0%, #020617 50%, #0f172a 100%) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.navbar-brand-title {
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #e5e7eb !important;
    font-size: 1.1rem;
}

.nav-link-custom {
    color: #9ca3af !important;
    margin-left: 12px;
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
}

.nav-link-custom:hover {
    color: #e5e7eb !important;
}

.nav-link-custom::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #6366f1, #22d3ee);
    transition: width 0.2s ease-out;
}

.nav-link-custom:hover::after {
    width: 100%;
}


/* =========================================================
   TITLES & SECTIONS
   ========================================================= */

.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 18px;
    background: linear-gradient(90deg, #f9fafb, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}


/* =========================================================
   CONTENT & CARDS
   ========================================================= */

.content-box {
    background: radial-gradient(circle at top left, rgba(148, 163, 253, 0.06), rgba(15, 23, 42, 0.95));
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.8),
        0 0 0 1px rgba(15, 23, 42, 0.8);
}

.graph-card {
    height: 320px;
}


/* =========================================================
   FILTER LABELS
   ========================================================= */

.filter-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    margin-bottom: 4px;
}


/* =========================================================
   DATE PICKER — FULL DARK THEME
   ========================================================= */

.DateRangePickerInput {
    background-color: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-radius: 8px !important;
}

.DateInput {
    background-color: transparent !important;
}

.DateInput_input {
    background-color: transparent !important;
    color: #e5e7eb !important;
    border: none !important;
    padding: 6px 10px;
    font-size: 0.9rem;
}

.DateInput_input__focused {
    border-bottom: 1px solid #6366f1 !important;
}

/* Calendar popup */
.DayPicker {
    background-color: rgba(15, 23, 42, 0.98) !important;
    border-radius: 12px !important;
    color: #e5e7eb !important;
}

/* Placeholder text for date picker */
.DateInput_input::placeholder {
    color: #94a3b8 !important;
}


/* =========================================================
   DROPDOWN — DARK MODE WITH MATCHING PLACEHOLDER
   ========================================================= */

/* Dropdown shell */
.filter-dropdown .Select-control {
    background-color: rgba(15, 23, 42, 0.9) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    color: #e5e7eb !important;
}

/* Hover glow */
.filter-dropdown .Select-control:hover {
    border-color: rgba(129, 140, 248, 0.8) !important;
}

/* ACTUAL placeholder: reliably caught here */
.filter-dropdown .Select-placeholder {
    color: #94a3b8 !important;   /* same as date picker */
    opacity: 0.8 !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
}

/* Dropdown menu */
.Select-menu-outer {
    background-color: rgba(2, 6, 23, 0.98) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    color: #e5e7eb !important;
}


/* =========================================================
   METRIC CARDS
   ========================================================= */

.metric-card {
    background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.15), rgba(15, 23, 42, 0.95));
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.65);
    transition: 0.15s ease-out;
}

.metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.9);
    border-color: rgba(129, 140, 248, 0.7);
}

.metric-card-icon {
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.metric-card-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #9ca3af;
}

.metric-card-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: #e5e7eb;
}

.metric-card-subvalue {
    font-size: 0.9rem;
    color: #cbd5f5;
}


/* =========================================================
   DATATABLE — DARK + CENTERED + HOVER EFFECTS
   ========================================================= */

.dash-spreadsheet-container {
    border-radius: 12px;
    overflow: hidden;
}

.dash-table-container .dash-spreadsheet-menu {
    background-color: #020617;
}

/* Alternating rows */
.dash-spreadsheet .dash-row:nth-child(even) .dash-cell {
    background-color: rgba(15, 23, 42, 0.98) !important;
}

.dash-spreadsheet .dash-row:nth-child(odd) .dash-cell {
    background-color: rgba(15, 23, 42, 0.92) !important;
}

/* Row hover */
.dash-spreadsheet .dash-row:hover .dash-cell {
    background-color: rgba(30, 64, 175, 0.5) !important;
}

/* Badge tweaks */
.badge {
    font-size: 0.7rem;
    padding: 4px 10px;
}


/* =========================================================
   PLOTLY GRAPH TWEAKS
   ========================================================= */

.js-plotly-plot .plotly .modebar {
    background-color: transparent !important;
}

svg .hoverlayer .bg {
    fill: rgba(15, 23, 42, 0.95) !important;
    stroke: rgba(148, 163, 184, 0.6) !important;
    stroke-width: 1;
}

/* Selected dropdown value text color (react-select v1) */
.filter-dropdown .Select-value-label {
    color: #e5e7eb !important;   /* light gray */
    font-size: 0.95rem;
}

/* Selected text (react-select v2) */
.filter-dropdown .Select__single-value {
    color: #e5e7eb !important;
}

/* Auto-generated fallback class used by Dash */
.filter-dropdown .css-1uccc91-singleValue,
.filter-dropdown .css-1wa3eu0-placeholder {
    color: #e5e7eb !important;
}

/* Selected dropdown value text color (react-select v1) */
.filter-dropdown .Select-value-label {
    color: #e5e7eb !important;   /* light gray */
    font-size: 0.95rem;
}

/* Selected text (react-select v2) */
.filter-dropdown .Select__single-value {
    color: #e5e7eb !important;
}

/* Auto-generated fallback class used by Dash */
.filter-dropdown .css-1uccc91-singleValue,
.filter-dropdown .css-1wa3eu0-placeholder {
    color: #e5e7eb !important;
}

/* Make DatePickerRange appear BELOW the label like the dropdown */
.filter-date {
    display: block !important;
    width: 100% !important;
}

.filter-date .DateRangePickerInput {
    width: 100% !important;
    display: block !important;
}

/* =========================================================
   FIX DATATABLE BORDERS (Remove white + unify dark theme)
   ========================================================= */

/* Outer table border */
.dash-spreadsheet-container {
    border: 1px solid rgba(148, 163, 184, 0.18) !important; /* soft gray */
    border-radius: 12px !important;
}

/* Cell borders */
.dash-spreadsheet .dash-cell {
    border-color: rgba(75, 85, 99, 0.35) !important; /* slate-500-ish */
}

/* Header row border */
.dash-spreadsheet .dash-header .dash-cell {
    border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
    background-color: rgba(30, 30, 40, 0.95) !important;
}

/* Remove bright white vertical grid lines */
.dash-spreadsheet .column-header-name {
    border-right: 1px solid rgba(75, 85, 99, 0.25) !important;
}

/* Remove leftover white borders from menu */
.dash-table-container .dash-spreadsheet-menu {
    border-bottom: 1px solid rgba(75, 85, 99, 0.25) !important;
    background-color: rgba(15, 23, 42, 0.95) !important;
}

/* =========================================================
   FIX DATATABLE HEADER — remove white text + white borders
   ========================================================= */

/* Header cell background + border */
.dash-spreadsheet .dash-header .dash-cell {
    background-color: rgba(30, 41, 59, 0.95) !important; /* deep slate */
    color: #e5e7eb !important;                           /* light text */
    border-color: rgba(75, 85, 99, 0.45) !important;     /* soft gray border */
    font-weight: 600 !important;
}

/* For Dash's fallback header elements */
.dash-table-container .dash-spreadsheet thead th {
    background-color: rgba(30, 41, 59, 0.95) !important;
    color: #e5e7eb !important;
    border-bottom: 1px solid rgba(75, 85, 99, 0.45) !important;
}

/* Header text inside internal span wrapper */
.dash-spreadsheet .dash-header span {
    color: #e5e7eb !important;
}

/* Remove any remaining white outline */
.dash-table-container th {
    border-color: rgba(75, 85, 99, 0.45) !important;
}

/* Fix DataTable turning white after updates */

.dash-spreadsheet-container {
    background-color: #0f172a !important;    /* deep navy */
}

.dash-spreadsheet {
    background-color: #0f172a !important;
}

.dash-spreadsheet .dash-cell {
    background-color: #1e293b !important;    /* slightly lighter navy */
    color: #e2e8f0 !important;               /* light gray text */
    border-color: rgba(148, 163, 184, 0.25) !important;
}

.dash-spreadsheet .dash-header .dash-cell {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35) !important;
}

.dash-table-container .dash-spreadsheet-menu {
    background-color: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

/* ============================================================
   FORCE DATATABLE HEADER TO DARK MODE (all dash versions)
   ============================================================ */

/* Main header cells */
.dash-spreadsheet .dash-header .dash-cell {
    background-color: #1e293b !important;     /* dark slate */
    color: #f1f5f9 !important;                /* light text */
    font-weight: 700 !important;
    border-color: rgba(148,163,184,0.35) !important;
}

/* Fallback header selector used by newer Dash versions */
.dash-table-container .dash-spreadsheet thead th {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(148,163,184,0.35) !important;
}

/* Header inner text wrapper */
.dash-spreadsheet .dash-header span {
    color: #f1f5f9 !important;
}

/* Fix for auto-generated class names (Dash 2.15+) */
.dash-table-container th.cell--header {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    font-weight: 700 !important;
}

/* Override aggressive theme styles from CYBORG */
table.dash-table-container table {
    background-color: #1e293b !important;
}


/* ============================================================
   MOBILE RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 768px) {

    .content-box {
        padding: 15px !important;
        border-radius: 10px;
    }

    .page-title {
        font-size: 1.3rem !important;
        margin-bottom: 15px;
    }

    .section-title {
        font-size: 1.1rem !important;
    }

    /* Reduce metric card padding */
    .metric-card {
        padding: 15px !important;
    }

    /* Shrink graphs to fit screen */
    .graph-card {
        border-radius: 10px !important;
    }

    .js-plotly-plot {
        width: 100% !important;
    }

    /* Fix dropdown text sizing */
    .filter-dropdown .Select-control {
        font-size: 0.9rem !important;
    }

    /* Mobile-friendly DatePicker */
    .DateRangePickerInput {
        width: 100% !important;
        font-size: 0.85rem !important;
        padding: 4px !important;
    }

    /* Table */
    .dash-spreadsheet-container {
        overflow-x: scroll !important;
    }

    th, td {
        font-size: 0.85rem !important;
    }
}

/* Hide cards on desktop */
@media (min-width: 769px) {
    .mobile-cards {
        display: none !important;
    }
}

/* Mobile card styles */
@media (max-width: 768px) {
    .mobile-card-item {
        background: #1e293b;
        border: 1px solid rgba(148,163,184,0.25);
        padding: 12px;
        border-radius: 12px;
    }

    .card-mobile-title {
        font-size: 1rem;
        font-weight: 600;
        color: #f8fafc;
    }

    .card-mobile-sub {
        font-size: 0.9rem;
        color: #cbd5e1;
        margin-top: 4px;
    }

    .card-mobile-badge {
        margin-top: 8px;
    }
}

@media (max-width: 768px) {
    .content-box {
        overflow: visible !important;
    }
}

/* ===========================================
   MOBILE TABLE + CARD HANDLING
   =========================================== */

/* Hide DataTable on mobile */
@media (max-width: 768px) {
    #checkin-table {
        display: none !important;
    }
}

/* Hide cards on desktop */
@media (min-width: 769px) {
    .mobile-cards {
        display: none !important;
    }
}

/* ===========================================
   Fix map/table overlap on mobile
   =========================================== */
@media (max-width: 768px) {
    .content-box {
        overflow: visible !important;
    }
}

/* Map container (graph-card) handles new height */
.graph-card {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

/* ===========================================
   Mobile card styling
   =========================================== */
.mobile-card-item {
    background: #1e293b;
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: 12px;
    padding: 15px;
}

.card-mobile-title {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.card-mobile-sub {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin-top: 4px;
}

.card-mobile-badge {
    font-size: 0.85rem;
}

/* Hide DataTable on mobile */
@media (max-width: 768px) {
    #checkin-table {
        display: none !important;
    }
}

/* Hide mobile cards on desktop */
@media (min-width: 769px) {
    .mobile-cards {
        display: none !important;
    }
}

/* Fix map/table overlap */
@media (max-width: 768px) {
    .content-box {
        overflow: visible !important;
    }
}

.graph-card {
    position: relative !important;
    width: 100% !important;
}

/* Hide navbar on mobile */
@media (max-width: 768px) {
    .main-navbar {
        display: none !important;
    }
}