/*
 * Dark theme overrides.
 *
 * Everything here is scoped under [data-bs-theme="dark"]. Bootstrap 5.3 already
 * re-themes its own components from that attribute; this file exists only for
 * what Bootstrap does not own - the NiceAdmin chrome, pepper-style.css, and the
 * widgets that ship their own CSS.
 *
 * Palette (contrast ratios against #212529 page / #2b3035 surface):
 *   page background  #212529
 *   raised surface   #2b3035
 *   primary text     #dee2e6   11.85:1 / 10.23:1
 *   muted text       #adb5bd    7.43:1 /  6.42:1
 *   divider          #495057   decorative only
 *   control border   #7d868f    3.60:1 against a surface
 *   accent as text   #6ea8fe    6.39:1 /  5.51:1
 *   accent as fill   #0d6efd   unchanged from light mode
 *
 * Two additions outside the eight above:
 *
 * #ea868f, Bootstrap 5.3's own dark-theme danger-text variant (the color
 * --bs-danger-text-emphasis resolves to under [data-bs-theme="dark"]).
 * pepper-style.css hardcodes the light-mode danger red (#dc3545) on
 * .has-error, which fails 4.5:1 on both surfaces here; #ea868f is the
 * established swap for a failing light-mode color, the same pattern already
 * used for #0d6efd -> #6ea8fe above.
 *   danger text      #ea868f    6.10:1 /  5.27:1
 *
 * #343a40, the raised-hover surface: used where a hovered/active element on
 * top of the #2b3035 surface needs to read as "raised" one step further
 * (sidebar nav hover, notification-item hover, select2 multi-select choice
 * pills, fullcalendar's today cell, .btn-light hover/active).
 *   raised hover     #343a40    8.84:1 for #dee2e6 text on it
 */

/* ---------------------------------------------------------- page and chrome */

[data-bs-theme="dark"] body {
    background: #212529;
    color: #dee2e6;
}

[data-bs-theme="dark"] #main,
[data-bs-theme="dark"] .pagetitle h1 {
    color: #dee2e6;
}

[data-bs-theme="dark"] .header {
    background: #2b3035;
    border-bottom: 1px solid #495057;
    box-shadow: none;
}

[data-bs-theme="dark"] .header .toggle-sidebar-btn,
[data-bs-theme="dark"] .header-nav .nav-icon,
[data-bs-theme="dark"] .header-nav .nav-profile {
    color: #dee2e6;
}

[data-bs-theme="dark"] .logo span {
    color: #dee2e6;
}

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

[data-bs-theme="dark"] .sidebar {
    background: #2b3035;
    border-right: 1px solid #495057;
    scrollbar-color: #7d868f transparent;
}

[data-bs-theme="dark"] .sidebar::-webkit-scrollbar {
    background-color: transparent;
}

[data-bs-theme="dark"] .sidebar::-webkit-scrollbar-thumb {
    background-color: #7d868f;
}

[data-bs-theme="dark"] .sidebar-nav .nav-heading {
    color: #adb5bd;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link {
    color: #dee2e6;
    background: transparent;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed {
    color: #adb5bd;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link:hover,
[data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed:hover {
    color: #6ea8fe;
    background: #343a40;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link i,
[data-bs-theme="dark"] .sidebar-nav .nav-link:hover i {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .sidebar-nav .nav-content a {
    color: #adb5bd;
}

[data-bs-theme="dark"] .sidebar-nav .nav-content a.active,
[data-bs-theme="dark"] .sidebar-nav .nav-content a:hover {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .sidebar-nav .nav-content a.active i {
    background-color: #0d6efd;
}

/* ------------------------------------------------------------- nav tabs */

[data-bs-theme="dark"] .nav-tabs-bordered .nav-link {
    color: #dee2e6;
}

[data-bs-theme="dark"] .nav-tabs-bordered .nav-link:hover,
[data-bs-theme="dark"] .nav-tabs-bordered .nav-link:focus {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .nav-tabs-bordered .nav-link.active {
    background-color: #2b3035;
    color: #6ea8fe;
    border-bottom: 2px solid #0d6efd;
}

/* ----------------------------------------------------------- links and text */

/* :not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) keeps this
   from outranking Bootstrap's own .btn/.dropdown-item/.nav-link/.page-link
   color (specificity 0,1,0) - a bare "a" is 0,1,1 and would otherwise win,
   painting e.g. <a class="btn btn-primary"> text #6ea8fe on a #0d6efd fill
   (1.87:1, unreadable) instead of leaving Bootstrap's own themed color */
[data-bs-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link),
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .breadcrumb a {
    color: #6ea8fe;
}

/* Bootstrap's dark block does not redefine --bs-primary-rgb, so .text-primary
   stays #0d6efd - 3.43:1 on the page background, a live WCAG AA failure (the
   public dashboard's "Last Refreshed" timestamp uses it). !important matches
   Bootstrap's own .text-primary declaration, which also carries it - the
   precedent already set for .has-error below. */
[data-bs-theme="dark"] .text-primary {
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .footer {
    color: #adb5bd !important;
}

[data-bs-theme="dark"] .footer {
    background: #2b3035;
    border-top: 1px solid #495057;
}

[data-bs-theme="dark"] .footer .copyright {
    color: #adb5bd;
}

/* Bootstrap re-themes the dropdown itself (bg/border via its own CSS
   variables), but these two NiceAdmin child rules hardcode their own
   #444444 text color independent of Bootstrap's variables, so Bootstrap's
   dark theming never touches them. Left alone they render as ~1.6:1
   contrast against the dark dropdown bg - effectively invisible. */

[data-bs-theme="dark"] .header-nav .profile .dropdown-header h6 {
    color: #dee2e6;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-footer a {
    color: #6ea8fe;
}

/* ------------------------------------------------------------ header extras */

[data-bs-theme="dark"] .header-nav .notifications .notification-item p {
    color: #adb5bd;
}

/* #343a40 (the documented raised-hover surface), not #495057 (the divider):
   the item's own text stays #adb5bd on hover, and #adb5bd on #495057 is
   3.94:1 - under the 4.5:1 text threshold. #343a40 clears it at 5.55:1. */
[data-bs-theme="dark"] .header-nav .notifications .notification-item:hover {
    background-color: #343a40;
}

/* ------------------------------------------------------------------ select2 */

[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #2b3035;
    border-color: #7d868f;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #dee2e6;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #343a40;
    border-color: #7d868f;
}

[data-bs-theme="dark"] .select2-dropdown {
    background-color: #2b3035;
    border-color: #7d868f;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option {
    color: #dee2e6;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0d6efd;
    color: #fff;
}

[data-bs-theme="dark"] .select2-search__field {
    background-color: #212529;
    border-color: #7d868f;
    color: #dee2e6;
}

/* --------------------------------------------------------------- datatables */

/* Bundled DataTables is 2.3.4 with the bs5 styling package (confirmed via
   public/assets/js/datatables.min.js: ext.classes.container is
   "dt-container dt-bootstrap5", not the 1.x "dataTables_wrapper" family).
   The filter input and length select get Bootstrap's own form-control /
   form-select classes, and paging renders as a Bootstrap .pagination of
   .page-item/.page-link - all already re-themed by Bootstrap, so only the
   plain-text layout labels need color here. */

[data-bs-theme="dark"] .dt-container,
[data-bs-theme="dark"] .dt-container .dt-info,
[data-bs-theme="dark"] .dt-container .dt-length label,
[data-bs-theme="dark"] .dt-container .dt-search label {
    color: #dee2e6;
}

/* pepper-style.css hardcodes a light header fill for every DataTable's
   <thead>; independent of the DataTables version, so still visible bleed */
[data-bs-theme="dark"] .dataTable thead th {
    background-color: #2b3035;
}

/* ---------------------------------------------------------- bootstrap-select */

[data-bs-theme="dark"] .bootstrap-select .dropdown-toggle,
[data-bs-theme="dark"] .bootstrap-select .dropdown-menu {
    background-color: #2b3035;
    border-color: #7d868f;
    color: #dee2e6;
}

/* bootstrap-select.css hardcodes #f5f5f5 on its own "no results" row inside
   the (now dark) dropdown-menu, independent of Bootstrap's theming */
[data-bs-theme="dark"] .bootstrap-select .no-results {
    background-color: #2b3035;
    color: #adb5bd;
}

/* ------------------------------------------------------------- fullcalendar */

[data-bs-theme="dark"] .fc {
    --fc-border-color: #495057;
    --fc-page-bg-color: #212529;
    --fc-neutral-bg-color: #2b3035;
    --fc-today-bg-color: #343a40;
    color: #dee2e6;
}

[data-bs-theme="dark"] .fc .fc-col-header-cell-cushion,
[data-bs-theme="dark"] .fc .fc-daygrid-day-number,
[data-bs-theme="dark"] .fc .fc-toolbar-title {
    color: #dee2e6;
}

/* ------------------------------------------------ inputs and table borders */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    border-color: #7d868f;
}

[data-bs-theme="dark"] .table {
    --bs-table-border-color: #495057;
}

/* ------------------------------------------------------- pepper-style.css */

/* .has-error is applied app-wide (public/js/pepper.js:205,
   Pepper.singleErrorDisplay adds it to any .form-group on a validation
   error), not just on the four auth views it's hardcoded into. Its danger
   red (#dc3545) fails 4.5:1 on both dark surfaces (3.41:1 / 2.94:1), and its
   form-control border also drops under the 3:1 border threshold on the
   raised surface (2.94:1 on #2b3035). Both need the swap; the source rules
   carry !important so the override must too, or it loses regardless of
   selector specificity. */
[data-bs-theme="dark"] .has-error .col-form-label {
    color: #ea868f !important;
}

[data-bs-theme="dark"] .has-error .form-control {
    border-color: #ea868f !important;
}

/* .btn-white (purchase-orders/view.blade.php "Re-Attempt Approval") is a
   literal white button - the white-box problem this task exists to fix */
[data-bs-theme="dark"] .btn-white {
    color: #dee2e6;
    background-color: #2b3035;
    border-color: #7d868f;
}

/* Bootstrap 5.3's dark block redefines --bs-light-text-emphasis and
   --bs-light-bg-subtle but NOT --bs-light-rgb (or --bs-white-rgb), so
   .bg-light/.btn-light/.bg-white stay their light-mode colors - solid white
   rectangles on the dark page. 32 .bg-light and 12 .btn-light uses app-wide,
   including the public monitor-group dashboard's Apply Filters button and
   Auto-Refresh dropdown toggle (both .btn-light, unauthenticated page). Text
   on the new #2b3035 surface inherits body's #dee2e6 - 10.23:1, well over
   the 4.5:1 threshold. */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white {
    background-color: #2b3035 !important;
    color: #dee2e6;
}

/* .btn-light uses Bootstrap's own custom-property scheme (--bs-btn-*), so
   the override targets those rather than raw background/color - that keeps
   hover and active states (which Bootstrap derives from the same
   properties) coherent instead of freezing them at the light-mode hover
   color. Hover/active bg is #343a40, the documented raised-hover surface
   (text on it: 8.84:1). Border and idle bg text: 10.23:1 / 3.60:1 border. */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: #dee2e6;
    --bs-btn-bg: #2b3035;
    --bs-btn-border-color: #7d868f;
    --bs-btn-hover-color: #dee2e6;
    --bs-btn-hover-bg: #343a40;
    --bs-btn-hover-border-color: #7d868f;
    --bs-btn-active-color: #dee2e6;
    --bs-btn-active-bg: #343a40;
    --bs-btn-active-border-color: #7d868f;
    --bs-btn-disabled-color: #adb5bd;
    --bs-btn-disabled-bg: #2b3035;
    --bs-btn-disabled-border-color: #7d868f;
}

/* mt-element-step ships six visual variants; only .step-line is used
   anywhere (resources/views/feedback/view.blade.php). Its idle-state number
   ring and the connecting line between steps hardcode #e5e5e5 */
[data-bs-theme="dark"] .mt-element-step .step-line .mt-step-number {
    border-color: #7d868f;
}

[data-bs-theme="dark"] .mt-element-step .step-line .mt-step-title:after,
[data-bs-theme="dark"] .mt-element-step .step-line .mt-step-title:before {
    background-color: #495057;
}

/* .mt-step-comment (feedback/view.blade.php) is a light dashed-border box */
[data-bs-theme="dark"] .mt-step-comment {
    background-color: #2b3035;
    border-color: #7d868f;
}

/* .block-add-box (inventory/qty-bulk-changes.blade.php) is a solid white
   dashed-border box */
[data-bs-theme="dark"] .block-add-box {
    background-color: #2b3035;
    border-color: #7d868f;
}

/* Third-level sidebar nav toggle (e.g. Software > Reports > Dashboard).
   pepper-style.css targets it with an attribute selector that outranks the
   general .nav-content a / a.active rules above, so its own #012970 /
   #899bbd never picked up dark theming from those */
[data-bs-theme="dark"] .sidebar-nav .nav-content a[data-bs-toggle="collapse"] {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .sidebar-nav .nav-content a[data-bs-toggle="collapse"].collapsed {
    color: #adb5bd;
}

/* --------------------------------------------- NiceAdmin literals on
   Bootstrap components

   Bootstrap 5.3 re-themes the components it owns, but only through its own
   custom properties. Where NiceAdmin paints the same component with a literal,
   Bootstrap's dark values never reach it. These are those cases - each one
   stayed light in dark mode until it was named here. */

/* style.css:227-233 sets background-color:#fff on the card cap rather than
   using --bs-card-cap-bg, so every card header and footer in the application
   stayed white. This is the widest of them: 78 views use .card-header. */
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background-color: #2b3035;
    border-color: #495057;
    color: #dee2e6;
}

/* style.css:344-348 paints the active tab white with the light-mode accent */
[data-bs-theme="dark"] .nav-tabs-bordered .nav-link.active {
    background-color: #2b3035;
    color: #6ea8fe;
    border-bottom-color: #6ea8fe;
}

/* Dropdown and menu hover states, all #f6f9ff in style.css (:151, :557, :590) */
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .header-nav .profile .dropdown-item:hover,
[data-bs-theme="dark"] .header-nav .messages .message-item:hover {
    background-color: #343a40;
}

/* style.css:157-165 - the caret under a dropdown menu is a rotated square
   painted #fff. Left light it reads as a white notch above a dark menu, so it
   takes the dropdown's own surface, which Bootstrap resolves to the body
   background in dark mode */
[data-bs-theme="dark"] .dropdown-menu-arrow::before {
    background: #212529;
    border-top-color: #495057;
    border-left-color: #495057;
}

/* style.css:404-411 */
[data-bs-theme="dark"] .header .search-bar {
    background: #2b3035;
}

/* ------------------------------------------- customer logo, per theme

   Blade cannot pick a variant: the theme is resolved in the browser, after the
   page is rendered. So both are emitted and these rules choose. */

/* With a dark variant present, swap to it */
[data-bs-theme="dark"] .group-logo-wrap .group-logo-dark {
    display: inline-block;
}

[data-bs-theme="dark"] .group-logo-wrap:has(.group-logo-dark) .group-logo-light {
    display: none;
}

/* Without one, the customer's only logo is usually dark ink and would vanish
   on the dark page, so it sits on a light panel instead. Requiring a second
   upload would leave every group looking broken until somebody chased it. */
[data-bs-theme="dark"] .group-logo-wrap.needs-chip {
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 6px;
}