/* ============================================================
   Dark-mode readability fixes.
   Loaded last so it wins the cascade. Every rule is scoped to
   `body.dark`, so light mode is untouched and standalone
   email / PDF / report templates (rendered without body.dark)
   are never affected.

   Palette mirrors the template's own dark vars:
     surface     #24272d   card / body background
     surface-2   #2c2f37   elevated strips (headers, footers, panels)
     border      #474a56
     text        #eaeaec
     heading     #ffffff
     muted       #a7adba
   ============================================================ */

/* ---- .bg-light: template paints dark text on a dark bg here ---- */
body.dark .bg-light {
    background-color: #2c2f37 !important;
    color: #eaeaec !important;
}
body.dark .bg-light-light {
    color: #eaeaec !important;
}

/* ---- Logo: the template forces filter:brightness(100), washing the
   colour logo out to solid white. Leave it as-is in dark mode. ---- */
body.dark nav .app-logo .logo img {
    filter: none !important;
}

/* ---- .bg-dark: the template flips --dark to a LIGHT value, so bg-dark
   renders near-white while its text-white children also go light
   (light-on-light). It's used as a dark header band — keep it dark. ---- */
body.dark .bg-dark {
    background-color: #1b1e24 !important;
    color: #eaeaec !important;
}

/* ---- Cards / panels ---- */
body.dark .card,
body.dark .card-body,
body.dark .card-footer {
    color: #eaeaec;
}
body.dark .card-header {
    color: #eaeaec;
    border-bottom-color: #474a56;
}
body.dark .card-footer {
    border-top-color: #474a56;
}
body.dark .card-title,
body.dark .card h1, body.dark .card h2, body.dark .card h3,
body.dark .card h4, body.dark .card h5, body.dark .card h6 {
    color: #ffffff;
}

/* ---- Tables ---- */
body.dark .table {
    --bs-table-color: #eaeaec;
    --bs-table-border-color: #474a56;
    color: #eaeaec;
}
body.dark .table > :not(caption) > * > *,
body.dark .table thead tr th,
body.dark .table tbody tr td {
    color: #eaeaec;
    border-color: #474a56;
}
body.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, .035);
    color: #eaeaec;
}
body.dark .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, .06);
    color: #ffffff;
}
body.dark .table-bordered > :not(caption) > * > * {
    border-color: #474a56;
}
/* .table-light used on a row OR on <thead> (e.g. faults page header,
   which otherwise stays Bootstrap-white). Descendant selectors so it
   covers both <tr class="table-light"> and <thead class="table-light">. */
body.dark .table-light {
    --bs-table-bg: #2c2f37;
    --bs-table-color: #eaeaec;
    --bs-table-border-color: #474a56;
}
body.dark .table-light,
body.dark .table-light th,
body.dark .table-light td {
    background-color: #2c2f37 !important;
    color: #eaeaec !important;
    border-color: #474a56 !important;
}

/* Contextual row variants (flagged rows = .table-warning, etc.). Bootstrap
   paints these with a light background, so our light table text is only
   legible on hover. Re-tint the cells dark so they read at rest. */
body.dark .table-primary > td,   body.dark .table-primary > th,
body.dark .table-secondary > td, body.dark .table-secondary > th,
body.dark .table-success > td,   body.dark .table-success > th,
body.dark .table-danger > td,    body.dark .table-danger > th,
body.dark .table-warning > td,   body.dark .table-warning > th,
body.dark .table-info > td,      body.dark .table-info > th {
    color: #eaeaec !important;
    border-color: #474a56 !important;
}
body.dark .table-primary > td,   body.dark .table-primary > th   { background-color: rgba(var(--primary), .22) !important; }
body.dark .table-secondary > td, body.dark .table-secondary > th { background-color: rgba(var(--secondary), .22) !important; }
body.dark .table-success > td,   body.dark .table-success > th   { background-color: rgba(var(--success), .22) !important; }
body.dark .table-danger > td,    body.dark .table-danger > th    { background-color: rgba(var(--danger), .22) !important; }
body.dark .table-warning > td,   body.dark .table-warning > th   { background-color: rgba(var(--warning), .22) !important; }
body.dark .table-info > td,      body.dark .table-info > th      { background-color: rgba(var(--info), .22) !important; }

/* ---- Modals (data tables frequently live inside modals) ---- */
body.dark .modal-footer {
    background-color: #2c2f37 !important;
    border-top-color: #474a56 !important;
}
/* _modals.scss forces a light grey header + dark title on every modal */
body.dark .modal-header:not(.bg-danger):not(.bg-primary) {
    background-color: #2c2f37 !important;
    border-bottom-color: #474a56 !important;
}
body.dark .modal-header:not(.bg-danger):not(.bg-primary) .modal-title {
    color: #eaeaec !important;
}
body.dark .modal-header:not(.bg-danger):not(.bg-primary) .btn-close {
    filter: brightness(0) invert(1) !important;
}
body.dark .modal-tabel thead tr th {
    background: #2c2f37 !important;
    color: #eaeaec !important;
}
body.dark .modal-content {
    color: #eaeaec;
}

/* ---- Notes ----
   .note-text hard-codes color:#333 (invisible on dark). Drop to `inherit`
   (not a fixed colour) so it picks up the light card/modal text colour while
   still letting utility classes like .text-danger / .text-muted win. */
body.dark .note-text {
    color: inherit;
}

/* ---- Blockquotes (e.g. dashboard daily-quote widget) ----
   The quote hard-codes a dark inline colour, invisible on a dark card. */
body.dark .card blockquote {
    color: #eaeaec !important;
}

/* ---- Soft "subtle" backgrounds ----
   Bootstrap's .bg-*-subtle are light pastels (used for note cards, pills,
   timeline items) and don't flip for this template's dark mode. Re-tint them
   dark so light text on top stays readable. */
body.dark .bg-primary-subtle   { background-color: rgba(var(--primary), .15) !important; }
body.dark .bg-secondary-subtle { background-color: rgba(var(--secondary), .15) !important; }
body.dark .bg-success-subtle   { background-color: rgba(var(--success), .15) !important; }
body.dark .bg-danger-subtle    { background-color: rgba(var(--danger), .15) !important; }
body.dark .bg-warning-subtle   { background-color: rgba(var(--warning), .15) !important; }
body.dark .bg-info-subtle      { background-color: rgba(var(--info), .15) !important; }
body.dark .bg-light-subtle,
body.dark .bg-dark-subtle      { background-color: #2c2f37 !important; }

/* ============================================================
   Component <style>-block overrides.
   These pages declare their own <style> with hard-coded light
   backgrounds / dark text. @yield('css') renders them before this
   file, and `body.dark .x` outranks their `.x`, so !important here
   wins. Light mode is unaffected.
   ============================================================ */

/* @mention autocomplete dropdown (.tribute-container) — was white */
body.dark .tribute-container {
    background-color: #2c2f37 !important;
    border-color: #474a56 !important;
}
body.dark .tribute-container li { color: #eaeaec !important; }
body.dark .tribute-container li::before { color: #a7adba !important; }
body.dark .tribute-container li.highlight,
body.dark .tribute-container li:hover {
    background-color: rgba(var(--primary), .3) !important;
    color: #ffffff !important;
}

/* Note / history timelines */
body.dark .app-timeline-box::before { background: #474a56 !important; }
body.dark .timeline-icon { background: #24272d !important; }
body.dark .timeline-content p { color: #cfd3db !important; }
/* circuits/show re-paints these soft classes as light pastels — re-darken */
body.dark .bg-light-primary { background-color: rgba(var(--primary), .12) !important; border-color: rgba(var(--primary), .35) !important; }
body.dark .bg-light-danger  { background-color: rgba(var(--danger), .12)  !important; border-color: rgba(var(--danger), .35)  !important; }
body.dark .bg-light-success { background-color: rgba(var(--success), .12) !important; border-color: rgba(var(--success), .35) !important; }

/* "What's New" / app-updates feed — was white cards with dark text */
body.dark .update-entry { background-color: #2c2f37 !important; border-color: #474a56 !important; }
body.dark .release-head { border-bottom-color: #474a56 !important; }
body.dark .release-head .version { color: #ffffff !important; }
body.dark .update-entry .body p { color: #cfd3db !important; }
body.dark .entry-actions a,
body.dark .entry-actions button { color: #a7adba !important; }
body.dark .entry-actions a:hover,
body.dark .entry-actions button:hover { color: #ffffff !important; }

/* Gross-profit report service links */
body.dark .service-link { border-bottom-color: rgba(255, 255, 255, .3) !important; }
body.dark .service-link:hover { color: #4db6bd !important; border-bottom-color: #4db6bd !important; }

/* Tailwind gray utility used as a table header (gross-profit service
   breakdowns) — light grey, leaving our light header text invisible. */
body.dark .bg-gray-100 { background-color: #2c2f37 !important; }

/* Global search results dropdown — was white with dark text */
body.dark .global-search-dropdown {
    background: #24272d !important;
    border-color: #474a56 !important;
}
body.dark .global-search-dropdown .gs-result { border-bottom-color: rgba(255, 255, 255, .06) !important; }
body.dark .global-search-dropdown .gs-result:hover,
body.dark .global-search-dropdown .gs-result.gs-active { background: rgba(255, 255, 255, .06) !important; }
body.dark .global-search-dropdown .gs-title { color: #eaeaec !important; }
body.dark .global-search-dropdown .gs-subtitle { color: #a7adba !important; }

/* Sidebar footer links + back button — dark text on dark chrome */
body.dark .sidebar-footer { background: transparent !important; border-top-color: #474a56 !important; }
body.dark .sidebar-footer-link { color: #cfd3db !important; }
body.dark .sidebar-footer-link:hover { background: rgba(var(--primary), .18) !important; color: #ffffff !important; }
body.dark .app-back-btn { background: #2c2f37 !important; border-color: #474a56 !important; color: #cfd3db !important; }
body.dark .app-back-btn:hover { background: #3a3f49 !important; color: #ffffff !important; }

/* ---- Hard-coded light inline backgrounds inside app UI ----
   Screen-only so printing / PDF export of report pages stays light.
   Matches background declarations only (never `color:` values). */
@media screen {
    body.dark [style*="background:#fff"],
    body.dark [style*="background: #fff"],
    body.dark [style*="background-color:#fff"],
    body.dark [style*="background-color: #fff"],
    body.dark [style*="background:white"],
    body.dark [style*="background: white"],
    body.dark [style*="background-color:white"],
    body.dark [style*="background-color: white"],
    body.dark [style*="#f8f9fa"],
    body.dark [style*="#fafafa"],
    body.dark [style*="#f9f9f9"],
    body.dark [style*="#f2f2f2"],
    body.dark [style*="#f1f1f1"],
    body.dark [style*="#eeeeee"],
    body.dark [style*="background:#eee"],
    body.dark [style*="background: #eee"] {
        background-color: #24272d !important;
        border-color: #474a56 !important;
    }
}

/* ============================================================
   Team Chat
   ============================================================ */
body.dark .chat-app { background: #24272d !important; border-color: #474a56 !important; }
body.dark .chat-sidebar { border-right-color: #474a56 !important; }
body.dark .chat-sidebar-head,
body.dark .chat-search,
body.dark .chat-thread-head,
body.dark .chat-composer { background: #2c2f37 !important; border-color: #474a56 !important; }
body.dark .chat-sidebar-head h5,
body.dark .chat-thread-head .title { color: #ffffff !important; }
body.dark .chat-conv-item { border-bottom-color: #2c2f37 !important; }
body.dark .chat-conv-item:hover { background: #2c2f37 !important; }
body.dark .chat-conv-item.active { background: #313641 !important; }
body.dark .chat-conv-title { color: #eaeaec !important; }
body.dark .chat-conv-preview,
body.dark .chat-thread-head .sub,
body.dark .chat-msg-author,
body.dark .chat-meta-row,
body.dark .chat-receipt { color: #a7adba !important; }
body.dark .chat-messages { background: #1f2228 !important; }
body.dark .chat-bubble { background: #2c2f37 !important; border-color: #474a56 !important; color: #eaeaec !important; }
body.dark .chat-msg.own .chat-bubble { background: #2f6bff !important; border-color: #2f6bff !important; color: #fff !important; }
body.dark .chat-bubble.deleted { background: #2a2d34 !important; color: #8a909c !important; }
body.dark .chat-system span { background: #2c2f37 !important; color: #a7adba !important; }
body.dark .chat-composer textarea { background: #1f2228 !important; border-color: #474a56 !important; color: #eaeaec !important; }
body.dark .chat-icon-btn { background: #2c2f37 !important; border-color: #474a56 !important; color: #cdd2db !important; }
body.dark .chat-icon-btn.send { background: #2f6bff !important; border-color: #2f6bff !important; color: #fff !important; }
body.dark .chat-attach-file,
body.dark .chat-attach-preview .chip { background: #2c2f37 !important; color: #9db4ff !important; }
body.dark .tribute-container { background: #2c2f37 !important; border-color: #474a56 !important; }
body.dark .tribute-container li { color: #eaeaec !important; }
body.dark .tribute-container li.highlight,
body.dark .tribute-container li:hover { background: #2f6bff !important; color: #fff !important; }

/* ============================================================
   BI Dashboard
   ============================================================ */
body.dark .bi-kpi-card { background: #2c2f37 !important; }
body.dark .bi-kpi-label { color: #a7adba !important; }
body.dark .bi-kpi-value { color: #ffffff !important; }
body.dark .bi-kpi-sub   { color: #a7adba !important; }
body.dark .sync-badge   { color: #a7adba !important; }
body.dark .fno-matrix tbody.fno-group td { background: #313641 !important; color: #ffffff !important; }
body.dark .fno-matrix .badge.bg-light { background: #1f2228 !important; color: #eaeaec !important; }

/* ============================================================
   GLOBAL: white dropdown panels (autocomplete results + global search).
   These components hardcode a white background with dark text in their own
   stylesheets, which is invisible against dark-mode text. Rather than patch each
   feature, this covers the shared conventions once:
     - any `*-autocomplete` wrapper containing a `.results` panel
       (faults circuit search, Service Delivery + Cancellations customer search,
        and any future autocomplete that follows the `*-autocomplete` + `.results`
        + `.item` convention), and
     - the header global-search dropdown.
   New autocompletes following the convention are covered automatically. ---- */
body.dark [class*="autocomplete"] .results,
body.dark .global-search-dropdown {
    background: #2c2f37 !important;
    border-color: #474a56 !important;
    color: #eaeaec !important;
}
body.dark [class*="autocomplete"] .results .item {
    color: #eaeaec !important;
    border-bottom-color: #474a56 !important;
}
body.dark [class*="autocomplete"] .results .item:hover {
    background: #313641 !important;
}
body.dark [class*="autocomplete"] .results .item .text-muted {
    color: #a7adba !important;
}

/* Global-search inner elements */
body.dark .global-search-dropdown .gs-category-header { background: #24272d !important; color: #a7adba !important; }
body.dark .global-search-dropdown .gs-result { color: #eaeaec !important; }
body.dark .global-search-dropdown .gs-result:hover,
body.dark .global-search-dropdown .gs-result.gs-active { background: #313641 !important; }
body.dark .global-search-dropdown .gs-title { color: #eaeaec !important; }
body.dark .global-search-dropdown .gs-subtitle,
body.dark .global-search-dropdown .gs-meta,
body.dark .global-search-dropdown .gs-empty,
body.dark .global-search-dropdown .gs-loading { color: #a7adba !important; }

/* ---------------------------------------------------------------------------
   Bootstrap semantic utilities that never flip to dark.

   Bootstrap 5.3 keys its dark theme off [data-bs-theme="dark"] on :root. This app
   sets document.body.className instead (layout/master.blade.php), so Bootstrap's
   dark theme never activates and every --bs-* variable keeps its light value.

   The worst offender is .text-dark, which resolves to rgba(var(--bs-dark-rgb),1)
   with !important — #212529 on a #24272d card is a contrast ratio of 1.03:1,
   i.e. invisible. It appears 178 times across 47 files, including every KPI tile
   on the dashboard. .bg-white fails twice over: Bootstrap paints it white while
   the template's own rule puts light text on it (1.2:1).

   Fixing the variables would be neater but would require setting data-bs-theme,
   which changes behaviour app-wide. These overrides are the contained fix.
   --------------------------------------------------------------------------- */
body.dark .text-dark,
body.dark .text-black            { color: #eaeaec !important; }   /* 1.03:1 -> 12.46:1 */

body.dark .bg-white              { background-color: #2c2f37 !important; color: #eaeaec !important; }
body.dark .bg-white .text-muted  { color: #a7adba !important; }

body.dark .border-light          { border-color: #474a56 !important; }

/* Emphasis variants resolve to --bs-*-text, also never overridden in dark scope. */
body.dark .text-success-emphasis { color: #75b798 !important; }
body.dark .text-danger-emphasis  { color: #ea868f !important; }
body.dark .text-warning-emphasis { color: #ffda6a !important; }
body.dark .text-info-emphasis    { color: #6edff6 !important; }

/* Service Delivery — group-by-technician headers (list view) */
body.dark .sd-group-head > td        { background: #2f333c !important; border-top-color: #474a56 !important; }
body.dark .sd-group-toggle           { color: #eaeaec !important; }
body.dark .sd-group-mobile .sd-group-toggle { background: #2f333c !important; border-color: #474a56 !important; }
body.dark .sd-area-head > td         { background: #292c34 !important; color: #a7adba !important; }
body.dark .sd-group-mobile .sd-area-label   { color: #a7adba !important; }