/* WJ Group dark theme: <html data-bs-theme="dark">, chosen in the account menu (System / Light / Dark; site.js).
   Loaded after brand.css and site.css, and only overrides them.

   Built from the brand palette (guidelines p.25) for screens in low light:
   - Base: a deeper shade of brand navy; brand navy #082145 itself for the sidebar and header bars, where the logo is
     the blue version the guidelines show on navy (p.20; wwwroot/branding/wj-group-logo-blue.svg).
   - Primary actions: brand blue with navy text (5.3:1, as brand.css pairs them). Links: a lighter brand blue (7:1+).
   - Beige and blue keep their roles as translucent tints; coral stays the accent (counts, rejected, urgent).
   Contrast (WCAG AA): body text #e6ebf2 on #051329 is 15:1, secondary text 11:1 (raised for older eyes, feedback of
   7 October, with firmer lines between the parts of a page). Printing always uses the light theme
   (site.js swaps it for the print). */
[data-bs-theme=dark] {
  --wj-dark-base: #051329;
  --wj-dark-bar: #082145;
  --wj-dark-surface: #0a2347;
  --wj-dark-raised: #0f2d57;
  --wj-dark-text: #e6ebf2;
  --wj-dark-muted: rgba(230, 235, 242, .82);
  --wj-dark-line: rgba(230, 235, 242, .24);
  --wj-dark-line-strong: rgba(230, 235, 242, .5);
  --wj-dark-link: #5cc4ec;
  --wj-dark-tint-blue: rgba(0, 159, 218, .16);
  --wj-dark-tint-blue-strong: rgba(0, 159, 218, .3);
  --wj-dark-tint-beige: rgba(217, 209, 189, .1);
  --wj-dark-tint-beige-strong: rgba(217, 209, 189, .2);

  color-scheme: dark;
  --bs-body-bg: var(--wj-dark-base);
  --bs-body-bg-rgb: 5, 19, 41;
  --bs-body-color: var(--wj-dark-text);
  --bs-body-color-rgb: 230, 235, 242;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: var(--wj-dark-muted);
  --bs-secondary-bg: var(--wj-dark-raised);
  --bs-tertiary-bg: var(--wj-dark-surface);
  --bs-tertiary-bg-rgb: 10, 35, 71;
  --bs-heading-color: #fff;
  --bs-link-color: var(--wj-dark-link);
  --bs-link-color-rgb: 92, 196, 236;
  --bs-link-hover-color: #fff;
  --bs-link-hover-color-rgb: 255, 255, 255;
  --bs-border-color: var(--wj-dark-line);
  --bs-border-color-translucent: var(--wj-dark-line);
  --bs-focus-ring-color: rgba(0, 159, 218, .55);
  --bs-primary: var(--wj-blue);
  --bs-primary-rgb: 0, 159, 218;
}

/* ---- Bars: brand navy with the blue logo ---- */
.wj-logo-dark { display: none; }
[data-bs-theme=dark] .wj-logo-light { display: none; }
[data-bs-theme=dark] .wj-logo-dark { display: block; }

[data-bs-theme=dark] .wj-header,
[data-bs-theme=dark] .wj-hubbar,
[data-bs-theme=dark] .wj-topbar { background: var(--wj-dark-bar); border-bottom: 1px solid var(--wj-dark-line); }
[data-bs-theme=dark] .wj-topbar-app { color: var(--wj-dark-text); }
[data-bs-theme=dark] .wj-menu-btn { border-color: var(--wj-dark-line-strong); }
[data-bs-theme=dark] .wj-menu-btn .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e6ebf2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .wj-skip { background: var(--wj-dark-raised); color: #fff; }

/* ---- Sidebar ---- */
[data-bs-theme=dark] .wj-sidebar-panel { --bs-offcanvas-bg: var(--wj-dark-bar); --bs-offcanvas-color: var(--wj-dark-text); color: var(--wj-dark-text); }
@media (min-width: 1280px) {
  [data-bs-theme=dark] .wj-sidebar { background: var(--wj-dark-bar); border-right: 1px solid var(--wj-dark-line); }
}
[data-bs-theme=dark] .wj-app-name { color: var(--wj-blue-50); }
[data-bs-theme=dark] .wj-nav-group { border-top-color: var(--wj-dark-line); }
[data-bs-theme=dark] .wj-nav-heading { background: rgba(230, 235, 242, .06); color: var(--wj-dark-text); }
[data-bs-theme=dark] .wj-nav-heading:hover { background: rgba(230, 235, 242, .12); }
[data-bs-theme=dark] .wj-sidebar .nav-link,
[data-bs-theme=dark] .wj-account-who { color: var(--wj-dark-text); }
[data-bs-theme=dark] .wj-sidebar .nav-link:hover,
[data-bs-theme=dark] .wj-sidebar .nav-link:focus-visible,
[data-bs-theme=dark] .wj-account-who:hover { color: #fff; background: rgba(230, 235, 242, .08); }
[data-bs-theme=dark] .wj-sidebar .nav-link.active,
[data-bs-theme=dark] .wj-sidebar .nav-link.is-current {
  color: #fff;
  background: var(--wj-dark-tint-blue-strong);
  box-shadow: inset 3px 0 0 var(--wj-blue);
}
[data-bs-theme=dark] .wj-rail-toggle { color: var(--wj-dark-text); }
[data-bs-theme=dark] .wj-rail-toggle:hover { color: #fff; background: rgba(230, 235, 242, .08); }
@media (min-width: 1280px) {
  [data-bs-theme=dark] .wj-rail .wj-nav-group:has(.nav-link.active, .nav-link.is-current) > .wj-nav-heading {
    color: #fff;
    background: var(--wj-dark-tint-blue-strong);
    box-shadow: inset 3px 0 0 var(--wj-blue);
  }
  [data-bs-theme=dark] .wj-rail .wj-sidebar [data-nav-group].wj-flyout {
    background: var(--wj-dark-bar);
    border: 1px solid var(--wj-dark-line);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .6);
  }
  [data-bs-theme=dark] .wj-rail [data-nav-group].wj-flyout::before { color: var(--wj-blue-50); }
}
[data-bs-theme=dark] .wj-account { border-top-color: var(--wj-dark-line); box-shadow: 0 -10px 12px -10px rgba(0, 0, 0, .6); }
[data-bs-theme=dark] .wj-nav { scrollbar-color: rgba(230, 235, 242, .25) transparent; }
[data-bs-theme=dark] .wj-nav::-webkit-scrollbar-thumb { background-color: rgba(230, 235, 242, .25); }
[data-bs-theme=dark] .wj-nav::-webkit-scrollbar-thumb:hover { background-color: rgba(230, 235, 242, .4); }
[data-bs-theme=dark] .wj-sidebar .avatar,
[data-bs-theme=dark] .wj-hubbar .avatar { box-shadow: 0 0 0 2px var(--wj-blue); }
[data-bs-theme=dark] .wj-hubbar .wj-account-who { color: var(--wj-dark-text); }
[data-bs-theme=dark] .wj-hubbar .wj-account-who:hover { background: rgba(230, 235, 242, .08); }

/* ---- Buttons ---- */
[data-bs-theme=dark] .btn-primary {
  --bs-btn-color: var(--wj-navy);
  --bs-btn-bg: var(--wj-blue);
  --bs-btn-border-color: var(--wj-blue);
  --bs-btn-hover-color: var(--wj-navy);
  --bs-btn-hover-bg: var(--wj-blue-80);
  --bs-btn-hover-border-color: var(--wj-blue-80);
  --bs-btn-active-color: var(--wj-navy);
  --bs-btn-active-bg: var(--wj-blue-50);
  --bs-btn-active-border-color: var(--wj-blue-50);
}
/* Unusable buttons are grey, as in brand.css. */
[data-bs-theme=dark] .btn-primary, [data-bs-theme=dark] .btn-outline-primary {
  --bs-btn-disabled-color: var(--bs-tertiary-color);
  --bs-btn-disabled-bg: var(--bs-tertiary-bg);
  --bs-btn-disabled-border-color: var(--bs-border-color);
  --bs-btn-disabled-opacity: 1;
}
[data-bs-theme=dark] .btn-outline-primary {
  --bs-btn-color: var(--wj-blue-50);
  --bs-btn-border-color: var(--wj-blue-50);
  --bs-btn-hover-color: var(--wj-navy);
  --bs-btn-hover-bg: var(--wj-blue-50);
  --bs-btn-hover-border-color: var(--wj-blue-50);
  --bs-btn-active-color: var(--wj-navy);
  --bs-btn-active-bg: var(--wj-blue-50);
  --bs-btn-active-border-color: var(--wj-blue-50);
}
[data-bs-theme=dark] .btn-outline-secondary {
  --bs-btn-color: var(--wj-dark-text);
  --bs-btn-border-color: var(--wj-dark-line-strong);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(230, 235, 242, .1);
  --bs-btn-hover-border-color: var(--wj-dark-text);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(230, 235, 242, .16);
  --bs-btn-active-border-color: var(--wj-dark-text);
}
[data-bs-theme=dark] .btn-link { --bs-btn-color: var(--wj-dark-link); --bs-btn-hover-color: #fff; }
[data-bs-theme=dark] .btn-close { filter: var(--bs-btn-close-white-filter); }

/* ---- Forms ---- */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select { background-color: var(--wj-dark-surface); border-color: var(--wj-dark-line-strong); }
[data-bs-theme=dark] .form-control:disabled,
[data-bs-theme=dark] .form-select:disabled { background-color: rgba(230, 235, 242, .05); }
[data-bs-theme=dark] .form-check-input { background-color: var(--wj-dark-surface); border-color: var(--wj-dark-line-strong); }
[data-bs-theme=dark] .form-check-input:checked { background-color: var(--wj-blue); border-color: var(--wj-blue); }
[data-bs-theme=dark] .dropdown-menu {
  --bs-dropdown-bg: var(--wj-dark-raised);
  --bs-dropdown-border-color: var(--wj-dark-line);
  --bs-dropdown-link-color: var(--wj-dark-text);
  --bs-dropdown-link-hover-bg: var(--wj-dark-tint-blue);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-active-bg: var(--wj-dark-tint-blue-strong);
  --bs-dropdown-link-active-color: #fff;
}

/* ---- Cards, lists, tables ---- */
[data-bs-theme=dark] .card { --bs-card-bg: var(--wj-dark-surface); --bs-card-border-color: var(--wj-dark-line); --bs-card-cap-bg: var(--wj-dark-raised); }
[data-bs-theme=dark] .card-header { color: #fff; }
[data-bs-theme=dark] .list-group { --bs-list-group-bg: var(--wj-dark-surface); --bs-list-group-border-color: var(--wj-dark-line); --bs-list-group-action-hover-bg: var(--wj-dark-tint-blue); }
[data-bs-theme=dark] .table {
  --bs-table-color: var(--wj-dark-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--wj-dark-line);
  --bs-table-hover-bg: var(--wj-dark-tint-blue);
  --bs-table-hover-color: #fff;
  --bs-table-striped-bg: rgba(230, 235, 242, .03);
}
[data-bs-theme=dark] .table > thead > tr > th { border-bottom-color: var(--wj-dark-line-strong); }
[data-bs-theme=dark] .pagination {
  --bs-pagination-bg: var(--wj-dark-surface);
  --bs-pagination-color: var(--wj-dark-text);
  --bs-pagination-border-color: var(--wj-dark-line);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--wj-dark-tint-blue);
  --bs-pagination-hover-border-color: var(--wj-dark-line);
  --bs-pagination-focus-color: #fff;
  --bs-pagination-active-color: var(--wj-navy);
  --bs-pagination-active-bg: var(--wj-blue);
  --bs-pagination-active-border-color: var(--wj-blue);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-color: var(--wj-dark-muted);
  --bs-pagination-disabled-border-color: var(--wj-dark-line);
}
[data-bs-theme=dark] .nav-tabs { --bs-nav-tabs-border-color: var(--wj-dark-line); --bs-nav-tabs-link-active-bg: var(--wj-dark-base); --bs-nav-tabs-link-active-color: #fff; --bs-nav-tabs-link-active-border-color: var(--wj-dark-line) var(--wj-dark-line) var(--wj-dark-base); }
[data-bs-theme=dark] .nav-tabs .nav-link { color: var(--wj-dark-link); }
[data-bs-theme=dark] .nav-pills { --bs-nav-pills-link-active-bg: var(--wj-blue); --bs-nav-pills-link-active-color: var(--wj-navy); --bs-nav-link-color: var(--wj-dark-text); --bs-nav-link-hover-color: #fff; }
[data-bs-theme=dark] .modal { --bs-modal-bg: var(--wj-dark-surface); --bs-modal-border-color: var(--wj-dark-line); }

/* ---- Badges / chips: tinted fills with light text (the light theme's pale fills would glare) ---- */
[data-bs-theme=dark] .text-bg-info { background-color: var(--wj-dark-tint-blue-strong) !important; color: #d3f0fb !important; }
[data-bs-theme=dark] .text-bg-secondary { background-color: rgba(230, 235, 242, .22) !important; color: #fff !important; }
[data-bs-theme=dark] .text-bg-warning { background-color: var(--wj-dark-tint-beige-strong) !important; color: #f2ede1 !important; }
[data-bs-theme=dark] .text-bg-light { background-color: rgba(230, 235, 242, .08) !important; color: var(--wj-dark-text) !important; }
[data-bs-theme=dark] .text-bg-light.border { border-color: var(--wj-dark-line) !important; }
[data-bs-theme=dark] .text-bg-primary { background-color: var(--wj-blue) !important; color: var(--wj-navy) !important; }
[data-bs-theme=dark] .text-bg-danger { background-color: var(--wj-coral) !important; color: var(--wj-navy) !important; }

[data-bs-theme=dark] .status-draft { background: rgba(230, 235, 242, .08); color: var(--wj-dark-text); border-color: var(--wj-dark-line-strong); }
[data-bs-theme=dark] .status-pending { background: var(--wj-dark-tint-blue-strong); color: #d3f0fb; }
[data-bs-theme=dark] .status-approved { background: #2a9a62; color: #fff; }
[data-bs-theme=dark] .status-void { background: rgba(230, 235, 242, .16); color: var(--wj-dark-text); }
[data-bs-theme=dark] .stage-approval { background: var(--wj-dark-tint-blue-strong); color: #d3f0fb; }
[data-bs-theme=dark] .stage-send { background: var(--wj-dark-tint-beige); color: #f2ede1; }
[data-bs-theme=dark] .stage-delivery { background: var(--wj-dark-tint-blue); color: #d3f0fb; border-color: rgba(0, 159, 218, .4); }
[data-bs-theme=dark] .stage-invoice { background: rgba(217, 209, 189, .12); color: #f2ede1; border-color: rgba(217, 209, 189, .35); }
[data-bs-theme=dark] .stage-closed { background: #2a9a62; color: #fff; }
[data-bs-theme=dark] .stage-none { background: rgba(230, 235, 242, .08); color: var(--wj-dark-text); }
/* The timeline's Document pill (site.css .tl-document): a brand-blue tint, light text. */
[data-bs-theme=dark] .tl-document { background: rgba(0, 159, 218, .16); color: var(--wj-dark-text); border-color: rgba(0, 159, 218, .45); }

/* ---- Alerts ---- */
[data-bs-theme=dark] .alert-warning { --bs-alert-bg: var(--wj-dark-tint-beige); --bs-alert-border-color: rgba(217, 209, 189, .35); --bs-alert-color: #f2ede1; }
[data-bs-theme=dark] .alert-secondary { --bs-alert-bg: rgba(230, 235, 242, .05); --bs-alert-border-color: var(--wj-dark-line); --bs-alert-color: var(--wj-dark-text); }
[data-bs-theme=dark] .alert-info { --bs-alert-bg: var(--wj-dark-tint-blue); --bs-alert-border-color: rgba(0, 159, 218, .4); --bs-alert-color: #d3f0fb; }
[data-bs-theme=dark] .alert-success { --bs-alert-bg: rgba(42, 154, 98, .15); --bs-alert-border-color: rgba(42, 154, 98, .45); --bs-alert-color: #c9efda; }
[data-bs-theme=dark] .alert-danger { --bs-alert-bg: rgba(250, 102, 97, .14); --bs-alert-border-color: rgba(250, 102, 97, .45); --bs-alert-color: #ffd6d4; }
[data-bs-theme=dark] .alert-no-project { background: linear-gradient(90deg, rgba(250, 102, 97, .34) 0%, rgba(250, 102, 97, .16) 45%, rgba(250, 102, 97, .05) 100%); border-color: rgba(250, 102, 97, .45); border-left-color: var(--wj-coral); color: #ffe1df; }

/* ---- Approval steps ---- */
[data-bs-theme=dark] .approval-step { border-left-color: var(--wj-dark-line); }
[data-bs-theme=dark] .approval-step.done { border-left-color: #2a9a62; }

/* ---- Pills ---- */
[data-bs-theme=dark] .pill-active { background: rgba(42, 154, 98, .18); color: #c9efda; border-color: rgba(42, 154, 98, .5); }
[data-bs-theme=dark] .pill-inactive { background: rgba(230, 235, 242, .06); color: var(--wj-dark-muted); border-color: var(--wj-dark-line); }
[data-bs-theme=dark] .pill-admin { background: var(--wj-blue); color: var(--wj-navy); }
[data-bs-theme=dark] .pill-approver { background: var(--wj-dark-tint-blue-strong); color: #d3f0fb; }
[data-bs-theme=dark] .pill-director { background: transparent; color: var(--wj-dark-text); border-color: var(--wj-dark-text); }
[data-bs-theme=dark] .pill-requester { background: var(--wj-dark-tint-beige); color: #f2ede1; border-color: rgba(217, 209, 189, .35); }
[data-bs-theme=dark] .pill-yard-viewer { background: transparent; color: var(--wj-dark-text); border-color: var(--wj-dark-line-strong); }
[data-bs-theme=dark] .pill-procurement { background: var(--wj-blue-50); color: var(--wj-navy); }
[data-bs-theme=dark] .pill-finance { background: transparent; color: var(--wj-dark-text); border-color: var(--wj-dark-line-strong); }

/* Avatars: the navy tones would vanish on navy. */
[data-bs-theme=dark] .avatar-tone-0 { background: #1c3d6e; }
[data-bs-theme=dark] .avatar-tone-5 { background: #3a5275; }

/* ---- site.css: home tiles, people, hub, pickers ---- */
[data-bs-theme=dark] .option-card-on { box-shadow: 0 0 0 .2rem var(--wj-dark-tint-blue); }
[data-bs-theme=dark] .hub-card-mrf { border-top-color: var(--wj-blue-50); }
[data-bs-theme=dark] .hub-count { color: var(--wj-dark-text); }
[data-bs-theme=dark] .hub-count:hover, [data-bs-theme=dark] .hub-count:focus-visible { color: #fff; }
[data-bs-theme=dark] a.home-tile:hover, [data-bs-theme=dark] a.home-tile:focus-visible { background: var(--wj-dark-tint-blue); }
[data-bs-theme=dark] .bar-track { background: var(--wj-dark-tint-blue); }
[data-bs-theme=dark] .person-card { background: var(--wj-dark-surface); border-color: var(--wj-dark-line); }
[data-bs-theme=dark] .person-card:hover, [data-bs-theme=dark] .person-card:focus-visible { background: var(--wj-dark-tint-blue); }
[data-bs-theme=dark] .person-card-counts strong,
[data-bs-theme=dark] .person-card-waiting strong,
[data-bs-theme=dark] .home-today-total strong,
[data-bs-theme=dark] .home-today-counts strong { color: #fff; }
/* The section a sidebar link went to (home.js): a lighter blue on the dark page. */
@keyframes home-flash-dark {
  0%, 35% { outline: 3px solid var(--wj-blue-80); }
  100% { outline: 3px solid transparent; }
}
[data-bs-theme=dark] .home-flash { animation-name: home-flash-dark; }
[data-bs-theme=dark] .home-tile.is-filtering,
[data-bs-theme=dark] .person-card.is-filtering { border-color: var(--wj-blue); box-shadow: inset 0 0 0 1px var(--wj-blue); background: var(--wj-dark-tint-blue); }
[data-bs-theme=dark] a.is-filtering:not(.home-tile):not(.person-card) { color: #fff; }
[data-bs-theme=dark] .search-select-list .dropdown-item.active { background: var(--wj-dark-tint-blue-strong); color: #fff; }

/* ---- The theme choice in the account menus ---- */
[data-bs-theme=dark] .wj-theme .btn { --bs-btn-color: var(--wj-dark-text); --bs-btn-border-color: var(--wj-dark-line-strong); }
[data-bs-theme=dark] .wj-theme .btn.active { --bs-btn-active-bg: var(--wj-blue); --bs-btn-active-color: var(--wj-navy); --bs-btn-active-border-color: var(--wj-blue); }
[data-bs-theme=dark] .person-card.is-filtering::after { background: var(--wj-blue); color: var(--wj-navy); }

/* ---- PO home: PO tracking folded in (stage tiles, people card, the list's With chip) ---- */
[data-bs-theme=dark] .home-tile-stage { border-top-color: var(--wj-dark-line-strong); }
[data-bs-theme=dark] .po-list-owner { background: var(--wj-dark-raised) !important; color: var(--wj-dark-text) !important; border-color: var(--wj-dark-line-strong) !important; }

/* The account menu's away status (site.css): the ring matches the dark bar, the dots a touch brighter. */
[data-bs-theme=dark] .wj-status-dot { background: #3ccf7c; box-shadow: 0 0 0 2px var(--wj-dark-bar); }
[data-bs-theme=dark] .wj-status-dot.is-away { background: #f5b82e; }

/* Notifications: the bell on the dark header bars (brand.css). The feed and dialog use Bootstrap's own colours. */
[data-bs-theme=dark] .wj-bell-btn { color: var(--wj-dark-text); }
[data-bs-theme=dark] .wj-bell-btn:hover,
[data-bs-theme=dark] .wj-bell-btn:focus-visible,
[data-bs-theme=dark] .wj-bell-btn[aria-expanded="true"] { color: #fff; background: rgba(230, 235, 242, .08); }
[data-bs-theme=dark] .wj-notice.is-unread .wj-notice-dot { background: var(--wj-dark-link); }