/*
 * DuvaPaint — dark theme
 * ----------------------------------------------------------------------------
 * Opt-in: the <html> element gets data-theme="dark" (set by duva-theme.js and
 * remembered per browser). It mostly just redefines the tokens from
 * duva-modern.css, plus the handful of template classes that hard-code light
 * colours — so every page follows without being edited individually.
 *
 * Deliberately a deep neutral, not pure black. Pure black pushes contrast so
 * high that text edges shimmer on an LCD, and it flattens the surface
 * hierarchy that makes cards readable.
 */

html[data-theme="dark"] {
    --duva-ink:        #e8eaf0;
    --duva-ink-soft:   #b9bfcd;
    --duva-muted:      #8b93a5;
    --duva-line:       #2b3242;
    --duva-line-soft:  #232935;
    --duva-bg:         #12151d;
    --duva-surface:    #1a1f2b;

    --duva-primary:    #38bdf8;
    --duva-primary-d:  #0ea5e9;
    --duva-success:    #34d399;
    --duva-warning:    #fbbf24;
    --duva-danger:     #f87171;
    --duva-info:       #22d3ee;

    --duva-shadow:     0 1px 2px rgba(0, 0, 0, .3);
    --duva-shadow-md:  0 6px 20px rgba(0, 0, 0, .38);

    color-scheme: dark;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .vertical-layout {
    background: var(--duva-bg) !important;
    color: var(--duva-ink);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .duva-kpi,
html[data-theme="dark"] .main-menu,
html[data-theme="dark"] .main-menu.menu-light,
html[data-theme="dark"] .navbar-header,
html[data-theme="dark"] .main-menu .navbar-header,
html[data-theme="dark"] .header-navbar,
html[data-theme="dark"] .header-navbar.navbar-fixed-top,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
    background: var(--duva-surface) !important;
    border-color: var(--duva-line) !important;
    color: var(--duva-ink);
}

html[data-theme="dark"] .card-header { border-bottom-color: var(--duva-line-soft); }

/* Template utility classes that hard-code a white surface. */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .white,
html[data-theme="dark"] .card-content,
html[data-theme="dark"] .content-body > .card { background: var(--duva-surface) !important; }

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .content-header-title,
html[data-theme="dark"] .card-title { color: var(--duva-ink) !important; }

/* Plain KPI numbers read as ink; the status variants below keep their meaning. */
html[data-theme="dark"] .duva-kpi .k-value { color: var(--duva-ink); }
html[data-theme="dark"] .duva-kpi .k-value.ok    { color: #6ee7b7; }
html[data-theme="dark"] .duva-kpi .k-value.warn  { color: #fbbf24; }
html[data-theme="dark"] .duva-kpi .k-value.muted { color: #6b7488; }
html[data-theme="dark"] .duva-kpi .k-label { color: var(--duva-muted); }
html[data-theme="dark"] .duva-kpi .k-sub   { color: var(--duva-muted); }
html[data-theme="dark"] a.duva-kpi:hover   { border-color: rgba(56,189,248,.35); }

/* ------------------------------------------------------------------- tables */

html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable { color: var(--duva-ink); }

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] table.dataTable thead th {
    background: #202634 !important;
    border-bottom-color: var(--duva-line) !important;
    color: var(--duva-muted) !important;
}
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] table.dataTable tbody td { border-top-color: var(--duva-line-soft) !important; }
html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] table.dataTable tbody tr:hover { background: #202735; }

/* -------------------------------------------------------------------- forms */

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background: #151a24;
    border-color: var(--duva-line);
    color: var(--duva-ink);
}
html[data-theme="dark"] .form-control::placeholder { color: #6b7488; }
html[data-theme="dark"] .form-control:focus {
    border-color: var(--duva-primary);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .15);
}
html[data-theme="dark"] label { color: var(--duva-ink-soft); }

/* ------------------------------------------------------------------ sidebar */

html[data-theme="dark"] .main-menu .navigation { background: transparent !important; }
html[data-theme="dark"] .main-menu .navigation > li > a { color: var(--duva-ink-soft) !important; }
html[data-theme="dark"] .main-menu .navigation > li > a:hover {
    background: #222938 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .main-menu .navigation > li.active > a,
html[data-theme="dark"] .main-menu .navigation li.active > a {
    background: rgba(56, 189, 248, .14) !important;
    color: #7dd3fc !important;
}

/* ------------------------------------------------------------------ buttons */

html[data-theme="dark"] .btn-primary {
    background: var(--duva-primary-d);
    border-color: var(--duva-primary-d);
    color: #04232f;
}
html[data-theme="dark"] .btn-primary:hover {
    background: var(--duva-primary) !important;
    border-color: var(--duva-primary) !important;
}
html[data-theme="dark"] .btn-outline-secondary { border-color: var(--duva-line); color: var(--duva-ink-soft); }
html[data-theme="dark"] .btn-outline-secondary:hover { background: #222938; color: #ffffff; }

/* Badges keep their meaning; darkened so the text stays legible. */
html[data-theme="dark"] .badge-success, html[data-theme="dark"] .badge.bg-success { background: rgba(52, 211, 153, .18) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .badge-danger,  html[data-theme="dark"] .badge.bg-danger  { background: rgba(248, 113, 113, .18) !important; color: #fca5a5 !important; }
html[data-theme="dark"] .badge-warning, html[data-theme="dark"] .badge.bg-warning { background: rgba(251, 191, 36, .18) !important; color: #fcd34d !important; }
html[data-theme="dark"] .badge-info,    html[data-theme="dark"] .badge.bg-info    { background: rgba(34, 211, 238, .18) !important; color: #67e8f9 !important; }
html[data-theme="dark"] .badge-primary, html[data-theme="dark"] .badge.bg-primary { background: rgba(56, 189, 248, .18) !important; color: #7dd3fc !important; }
html[data-theme="dark"] .badge-secondary { background: #262d3b !important; color: #9aa3b5 !important; }

/* ------------------------------------------------------------------- states */

html[data-theme="dark"] .duva-skeleton {
    background: linear-gradient(90deg, #202634 25%, #262d3b 50%, #202634 75%);
    background-size: 200% 100%;
}
html[data-theme="dark"] .duva-error {
    background: rgba(248, 113, 113, .1);
    border-color: rgba(248, 113, 113, .35);
    color: #fca5a5;
}
html[data-theme="dark"] .duva-empty { color: var(--duva-muted); }
html[data-theme="dark"] .duva-empty .duva-empty-title { color: var(--duva-ink); }

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--duva-ink-soft) !important; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--duva-primary-d) !important;
    border-color: var(--duva-primary-d) !important;
    color: #04232f !important;
}

/* --------------------------------------------------------------- fleet map */

html[data-theme="dark"] .fleet-side,
html[data-theme="dark"] .fleet-map-card,
html[data-theme="dark"] .fleet-panel,
html[data-theme="dark"] .fleet-stat {
    background: var(--duva-surface) !important;
    border-color: var(--duva-line) !important;
}
html[data-theme="dark"] .fleet-item:hover { background: #202735; }
html[data-theme="dark"] .fleet-item.selected {
    background: rgba(56, 189, 248, .12);
    box-shadow: inset 3px 0 0 var(--duva-primary);
}
html[data-theme="dark"] .fleet-item .nm,
html[data-theme="dark"] .fleet-panel h6 { color: var(--duva-ink); }
html[data-theme="dark"] .fleet-panel .row-kv span:last-child { color: var(--duva-ink); }
html[data-theme="dark"] .fleet-legend { background: rgba(26, 31, 43, .95); border-color: var(--duva-line); }
html[data-theme="dark"] .fleet-legend div { color: var(--duva-ink-soft); }
html[data-theme="dark"] .fleet-search input,
html[data-theme="dark"] .fleet-search select {
    background: #151a24;
    border-color: var(--duva-line);
    color: var(--duva-ink);
}

/* --------------------------------------------------------------- the toggle */

.duva-theme-toggle {
    background: transparent;
    border: 1px solid var(--duva-line);
    border-radius: var(--duva-radius-sm, 8px);
    color: var(--duva-ink-soft);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 6px 10px;
}
.duva-theme-toggle:hover { background: rgba(127, 127, 127, .12); color: var(--duva-ink); }

/* ============================================================================
 * TEMPLATE PALETTE CLASSES IN DARK MODE
 * ----------------------------------------------------------------------------
 * The stock admin template colours text and icon tiles with its own utility
 * classes (.primary, .warning, .card-icon, .display-4 ...). Those were written
 * for a white page, so on a dark surface they came out as bright white tiles
 * and shouting orange numbers.
 *
 * The rule applied here: big numbers are DATA, so they read in the normal ink
 * colour. Colour is kept for meaning only - status, direction, small labels.
 * That is what stops a dashboard looking like a fruit salad.
 * ========================================================================= */

/* --- big figures: ink, not decoration ------------------------------------ */
html[data-theme="dark"] .display-1,
html[data-theme="dark"] .display-2,
html[data-theme="dark"] .display-3,
html[data-theme="dark"] .display-4,
html[data-theme="dark"] .heading-text,
html[data-theme="dark"] .stats-amount h3,
html[data-theme="dark"] .stats-amount h4 {
    color: var(--duva-ink) !important;
    font-weight: 650;
    letter-spacing: -.02em;
}

/* The small caption under each figure stays quiet. */
html[data-theme="dark"] .stats-amount .text-muted,
html[data-theme="dark"] .blue-grey,
html[data-theme="dark"] .blue-grey.darken-1,
html[data-theme="dark"] .blue-grey.darken-2,
html[data-theme="dark"] .blue-grey.darken-3 { color: var(--duva-muted) !important; }

/* --- palette text colours, retuned for a dark surface -------------------- */
html[data-theme="dark"] .primary,
html[data-theme="dark"] .primary.darken-1,
html[data-theme="dark"] .primary.darken-2 { color: #7dd3fc !important; }

html[data-theme="dark"] .warning,
html[data-theme="dark"] .warning.darken-1,
html[data-theme="dark"] .warning.darken-2 { color: #fcd34d !important; }

html[data-theme="dark"] .success,
html[data-theme="dark"] .success.darken-1,
html[data-theme="dark"] .success.darken-2 { color: #6ee7b7 !important; }

html[data-theme="dark"] .danger,
html[data-theme="dark"] .danger.darken-1,
html[data-theme="dark"] .danger.darken-2 { color: #fca5a5 !important; }

html[data-theme="dark"] .info,
html[data-theme="dark"] .info.darken-1 { color: #67e8f9 !important; }

/*
 * A big figure that happens to carry a palette class is still a figure.
 * These combinations are written out because .blue-grey.darken-1 (two classes)
 * would otherwise out-rank a plain .display-4 and wash the number out to grey -
 * which is exactly what made "Rs. 120.264M" look faded.
 */
html[data-theme="dark"] .display-4.blue-grey,
html[data-theme="dark"] .display-4.blue-grey.darken-1,
html[data-theme="dark"] .display-4.warning,
html[data-theme="dark"] .display-4.warning.darken-1,
html[data-theme="dark"] .display-4.primary,
html[data-theme="dark"] .display-4.success,
html[data-theme="dark"] .display-4.danger,
html[data-theme="dark"] h1.primary.text-bold-400,
html[data-theme="dark"] h1.warning.text-bold-400,
html[data-theme="dark"] h3.display-4 { color: var(--duva-ink) !important; }

/* The small caption directly under a big figure stays quiet. */
html[data-theme="dark"] .display-4 + span,
html[data-theme="dark"] .display-4 ~ .blue-grey { color: var(--duva-muted) !important; }

/* --- icon tiles: the white blocks ---------------------------------------- */
/* Were solid white squares floating on the dark page. Now a faint tinted
   panel with the icon carrying the colour - visible, not shouting. */
html[data-theme="dark"] .card-icon {
    background: #232a38 !important;
    border: 1px solid var(--duva-line);
    border-radius: 12px;
    box-shadow: none !important;
}
html[data-theme="dark"] .card-icon i,
html[data-theme="dark"] .card-icon .icon { color: inherit !important; }
html[data-theme="dark"] .card-icon.primary { color: #7dd3fc !important; background: rgba(56,189,248,.10) !important; border-color: rgba(56,189,248,.22); }
html[data-theme="dark"] .card-icon.danger  { color: #fca5a5 !important; background: rgba(248,113,113,.10) !important; border-color: rgba(248,113,113,.22); }
html[data-theme="dark"] .card-icon.success { color: #6ee7b7 !important; background: rgba(52,211,153,.10) !important; border-color: rgba(52,211,153,.22); }
html[data-theme="dark"] .card-icon.warning { color: #fcd34d !important; background: rgba(251,191,36,.10) !important; border-color: rgba(251,191,36,.22); }
html[data-theme="dark"] .customize-icon { color: inherit !important; }

/* --- divider borders between stat columns -------------------------------- */
html[data-theme="dark"] [class*="border-right-"],
html[data-theme="dark"] [class*="border-left-"],
html[data-theme="dark"] [class*="border-top-"],
html[data-theme="dark"] [class*="border-bottom-"] { border-color: var(--duva-line) !important; }

/* --- the account dropdown: was dark text on a dark panel ----------------- */
html[data-theme="dark"] .dropdown-menu { box-shadow: var(--duva-shadow-md); }
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .dropdown-item i { color: var(--duva-ink-soft) !important; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background: #232a38 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .dropdown-divider { border-top-color: var(--duva-line); }
html[data-theme="dark"] .dropdown-user-link .user-name { color: var(--duva-ink) !important; }

/* --- activity / "top bookers" lists -------------------------------------- */
html[data-theme="dark"] .media,
html[data-theme="dark"] .media-body,
html[data-theme="dark"] .media-body .list-group-item-heading { color: var(--duva-ink); }
html[data-theme="dark"] .media:hover { background: #202735; }
html[data-theme="dark"] .media-list .media { border-color: var(--duva-line-soft) !important; }
html[data-theme="dark"] .list-group-item {
    background: transparent;
    border-color: var(--duva-line-soft);
    color: var(--duva-ink);
}

/* --- empty-state sentences inside cards ---------------------------------- */
html[data-theme="dark"] .card-body > .text-center,
html[data-theme="dark"] .no-data-text { color: var(--duva-muted) !important; }

/* --- misc template surfaces that stayed light ---------------------------- */
html[data-theme="dark"] .card-content,
html[data-theme="dark"] .card-dashboard,
html[data-theme="dark"] .ps,
html[data-theme="dark"] .height-450 { background: transparent !important; }

html[data-theme="dark"] hr { border-top-color: var(--duva-line); }
html[data-theme="dark"] .text-bold-400,
html[data-theme="dark"] .text-bold-600 { color: inherit; }

/* Warning banners keep their amber meaning, tinted for a dark surface. */
html[data-theme="dark"] .fleet-banner,
html[data-theme="dark"] .banner-warning {
    background: rgba(251, 191, 36, .12) !important;
    border-color: rgba(251, 191, 36, .35) !important;
    color: #fcd34d !important;
}

/* Attendance-style frozen columns and any other sticky cell must stay opaque. */
html[data-theme="dark"] .attendance-table .agent-col { background: var(--duva-surface); }
html[data-theme="dark"] .attendance-table thead .agent-col { background: var(--duva-line-soft); }

/* Leaflet (classic pages) chrome. */
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
    background: var(--duva-surface);
    color: var(--duva-ink);
}
html[data-theme="dark"] .leaflet-control-zoom a {
    background: var(--duva-surface);
    border-color: var(--duva-line);
    color: var(--duva-ink);
}
html[data-theme="dark"] .leaflet-bar a:hover { background: #232a38; }

/* Map tiles are bright by nature; take the glare off without hiding detail. */
html[data-theme="dark"] .leaflet-tile-pane,
html[data-theme="dark"] .maplibregl-canvas { filter: brightness(.82) contrast(1.04); }

/* Route page: the summary strip and warning banner on a dark surface. */
html[data-theme="dark"] .day-summary-strip {
    background: var(--duva-line-soft) !important;
    border-top-color: var(--duva-line) !important;
}
html[data-theme="dark"] .day-summary-item .value { color: var(--duva-ink); }
html[data-theme="dark"] .day-summary-item .label,
html[data-theme="dark"] .day-summary-item .sub,
html[data-theme="dark"] .quality-note { color: var(--duva-muted); }
html[data-theme="dark"] .status-box,
html[data-theme="dark"] .map-overlay,
html[data-theme="dark"] .legend-box,
html[data-theme="dark"] .map-tools {
    background: var(--duva-surface) !important;
    border-color: var(--duva-line) !important;
    color: var(--duva-ink);
}
html[data-theme="dark"] .status-meta,
html[data-theme="dark"] .legend-row { color: var(--duva-muted); }

/* ============================================================================
 * TABLE ROWS — force transparent
 * ----------------------------------------------------------------------------
 * DataTables and the admin template paint table rows with an opaque light
 * background of their own. Only the :hover rule was being overridden, so a
 * table sat white on the dark page and went dark only under the cursor.
 *
 * Rows should have NO background of their own - they should show the dark card
 * behind them. Declared for every variant those plugins generate (odd / even /
 * stripe / the sorted column / fixed-column clones), because any one left out
 * is a white stripe.
 * ========================================================================= */

html[data-theme="dark"] .table,
html[data-theme="dark"] .table > tbody,
html[data-theme="dark"] .table > tbody > tr,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] table.dataTable tbody,
html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable tbody th,
html[data-theme="dark"] table.dataTable tbody tr.odd,
html[data-theme="dark"] table.dataTable tbody tr.even,
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.stripe tbody tr.even,
html[data-theme="dark"] table.dataTable.display tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.even,
html[data-theme="dark"] table.dataTable.table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] table.dataTable.table-striped tbody tr:nth-of-type(even),
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(even),
html[data-theme="dark"] table.dataTable tbody tr.odd > .sorting_1,
html[data-theme="dark"] table.dataTable tbody tr.even > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_1,
html[data-theme="dark"] .DTFC_Cloned tbody tr,
html[data-theme="dark"] .DTFC_LeftBodyLiner,
html[data-theme="dark"] .dataTables_scrollBody {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--duva-ink);
}

/* Hover stays as the only row highlight, so the eye follows the cursor. */
html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] .table tbody tr:hover > td,
html[data-theme="dark"] table.dataTable tbody tr:hover,
html[data-theme="dark"] table.dataTable tbody tr:hover > td,
html[data-theme="dark"] table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_1 {
    background-color: #212936 !important;
}

/* The table's own chrome. */
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td,
html[data-theme="dark"] .DTFC_Cloned thead th {
    background-color: #202634 !important;
    color: var(--duva-muted) !important;
    border-color: var(--duva-line) !important;
}
html[data-theme="dark"] table.dataTable.no-footer { border-bottom-color: var(--duva-line); }
html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable tbody th { border-color: var(--duva-line-soft) !important; }

/* A checked row (the select-all column) still needs to read as selected. */
html[data-theme="dark"] table.dataTable tbody > tr.selected,
html[data-theme="dark"] table.dataTable tbody > tr > .selected {
    background-color: rgba(56, 189, 248, .14) !important;
}

/* Any page-level card or stat tile that still declares a light surface. */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .perf-table,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .info-card {
    background: var(--duva-surface) !important;
    border-color: var(--duva-line) !important;
    color: var(--duva-ink);
}