/* ==========================================================================
   CNQ Business Suite — dark mode text contrast

   Loaded from layout/header.php after bs-mobile-fixes.css and bs-ui-fixes.css,
   which every one of the suite's ~140 pages includes. In-body, for the same
   reason and by the same convention as those two sheets — see their headers.

   WHY THIS FILE EXISTS

   Metronic's dark theme reuses one grey ramp for both surfaces and text:

       --bs-gray-100  #1b1b29   --bs-gray-400  #474761
       --bs-gray-200  #2B2B40   --bs-gray-500  #565674
       --bs-gray-300  #323248   --bs-gray-600  #6D6D80

   100-300 are backgrounds and borders and are correct as they are. But 400-600
   are what the theme hands to text — .text-muted, .text-gray-400/500/600, the
   unselected tab in .nav-line-tabs, the .btn-light label, the footer menu —
   and against the suite's card background (#1e1e2d) they measure:

       #474761  1.83:1      #565674  2.33:1      #6D6D80  3.24:1

   against the 4.5:1 WCAG AA needs for body text. Every label, subtitle, table
   header, tab and helper line in the suite was below the floor in dark mode,
   which is what the "faint and unreadable" report describes. An audit of the
   account page alone counted 30 failing runs of text.

   WHY IT OVERRIDES THE UTILITIES RATHER THAN THE PALETTE

   Raising --bs-gray-400/500/600 themselves would have lightened every border,
   divider and muted surface that shares the ramp — a different, and wrong,
   visual change. These rules only touch colours applied to text.

   `!important` appears only where Bootstrap's own colour utilities use it
   (.text-* are `color: … !important` in Bootstrap 5.3, so nothing weaker can
   win). The component rules below are plain declarations; this sheet is later
   in the cascade than style.bundle.css, so equal specificity is enough.

   Values keep the theme's existing ordering — dim < muted < soft < strong —
   and are the same blue-tinted family, just moved above the readable floor.
   Measured against #1e1e2d (card) and #2B2B40 (raised surfaces):

       --cnq-dark-text-dim     #9DA0B4   5.9:1 / 5.1:1
       --cnq-dark-text-muted   #A8ABBE   6.6:1 / 5.7:1
       --cnq-dark-text-soft    #B3B6C8   7.4:1 / 6.4:1
       --cnq-dark-text-strong  #C9CBD8   9.2:1 / 8.0:1

   NOT COVERED HERE: white text on the brand fills (.btn-primary and friends)
   sits at 2.97:1, but it measures the same in light mode — that is the brand
   colour, not a dark-mode regression, and changing it is a design decision.
   ========================================================================== */

:root[data-bs-theme="dark"],
[data-bs-theme="dark"] {
    --cnq-dark-text-dim:    #9DA0B4;
    --cnq-dark-text-muted:  #A8ABBE;
    --cnq-dark-text-soft:   #B3B6C8;
    --cnq-dark-text-strong: #C9CBD8;
}

/* ==========================================================================
   1. TEXT COLOUR UTILITIES

   Bootstrap declares these with !important, so the override needs it too.
   Descendant icons are included: .text-gray-500 i inherits nothing, the theme
   colours it from the same variable.
   ========================================================================== */

[data-bs-theme="dark"] .text-gray-400,
[data-bs-theme="dark"] .text-gray-400 i {
    color: var(--cnq-dark-text-dim) !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-gray-500,
[data-bs-theme="dark"] .text-gray-500 i {
    color: var(--cnq-dark-text-muted) !important;
}

[data-bs-theme="dark"] .text-gray-600,
[data-bs-theme="dark"] .text-gray-600 i {
    color: var(--cnq-dark-text-soft) !important;
}

[data-bs-theme="dark"] .text-gray-700,
[data-bs-theme="dark"] .text-gray-700 i {
    color: var(--cnq-dark-text-strong) !important;
}

/* ==========================================================================
   2. COMPONENTS THAT COLOUR THEIR OWN TEXT

   These do not go through the utilities, so raising the utilities alone left
   them behind. Plain declarations: this sheet is later in the cascade.
   ========================================================================== */

/* Field labels, helper lines and table headers — the "labels and subtitles"
   the report calls out. */
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-text,
[data-bs-theme="dark"] .table thead th {
    color: var(--cnq-dark-text-soft);
}

/* Unselected tabs. The active one keeps the theme's own highlight colour. */
[data-bs-theme="dark"] .nav-line-tabs .nav-item .nav-link:not(.active),
[data-bs-theme="dark"] .nav .nav-link:not(.active):not(.btn) {
    color: var(--cnq-dark-text-muted);
}

/* Secondary buttons: the theme labels these with --bs-light-inverse (#7E8299,
   3.64:1), which is below the floor on their own dark fill. */
[data-bs-theme="dark"] .btn.btn-light,
[data-bs-theme="dark"] .btn.btn-active-light-primary:not(.active) {
    color: var(--cnq-dark-text-strong);
}

/* .btn-secondary labels itself with --bs-secondary-inverse (#92929F) on
   --bs-secondary (#323248): 4.05:1, just under the floor. */
[data-bs-theme="dark"] .btn.btn-secondary {
    color: var(--cnq-dark-text-strong);
}

/* Footer and inline menus that opt into a grey with .menu-gray-*. */
[data-bs-theme="dark"] .menu.menu-gray-600 .menu-link,
[data-bs-theme="dark"] .menu.menu-gray-500 .menu-link {
    color: var(--cnq-dark-text-soft);
}

/* ==========================================================================
   3. MODULE SURFACES THAT HARD-CODE A LIGHT BACKGROUND      (BS-1, re-filed)

   The 10 Sep pass fixed the Finance dashboard: its token block and its nine
   .cnq-service-card tiles. The same shape was never addressed in HRMS or CRM,
   which is why the report kept coming back saying "across multiple pages and
   modules". Measured in the harness, in real dark mode (stored preference,
   then a load — flipping data-bs-theme with a script AFTER load measures a
   half-applied theme and invents failures that are not there):

       HRMS dashboard   8 module cards, white on a pastel   1.07 - 1.11:1
       CRM dashboard    .crm-mini-kpi / .crm-ops-link,
                        muted text on #fff                  2.27:1

   Both are the identical fault: a surface painted light unconditionally,
   under text the dark theme has already flipped to a light colour.

   The tiles keep their colour coding — the pastel is mixed into the dark
   surface exactly as the Finance rule does, so the cards stay tellable apart.
   The flat declaration ahead of it is for engines without color-mix().
   ========================================================================== */

/* Dashboard tiles that carry their pastel as --tile (Finance, HRMS). The rule
   used to live inline in finance/index.php and reached only that page. */
[data-bs-theme="dark"] .cnq-service-card,
html[data-bs-theme="dark"] .cnq-service-card {
    background: #111827 !important;
    background: color-mix(in srgb, var(--tile, #111827) 14%, #111827) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
}

/* The white icon chip inside a tile is invisible on the dark surface. */
[data-bs-theme="dark"] .cnq-service-card .symbol-label.bg-white {
    background-color: rgba(148, 163, 184, .14) !important;
}

/* CRM's dashboard panels. They set `background:#fff` in the page's own <style>
   and never had a dark counterpart, so every muted line inside them sat on
   white. .crm-ops-link also pins its own near-black text colour. */
[data-bs-theme="dark"] .crm-mini-kpi,
[data-bs-theme="dark"] .crm-ops-link {
    background: #1e1e2d;
    border-color: rgba(148, 163, 184, .16);
}
[data-bs-theme="dark"] .crm-ops-link,
[data-bs-theme="dark"] .crm-ops-link:hover {
    color: var(--cnq-dark-text-strong);
}
[data-bs-theme="dark"] .crm-ops-card {
    background: linear-gradient(180deg, #1e1e2d 0%, #191927 100%);
    border-color: rgba(148, 163, 184, .16);
}
[data-bs-theme="dark"] .crm-kpi {
    border-color: rgba(148, 163, 184, .16);
}
[data-bs-theme="dark"] .crm-source-bar {
    background: rgba(148, 163, 184, .22);
}

/* ==========================================================================
   4. THE ONE "LIGHT-*" VARIANT THAT IS A DARK-MODE REGRESSION

   .btn-light-* and .badge-light-* pair a brand foreground with a tinted
   background, and the theme swaps the BACKGROUND for dark while leaving the
   foreground alone. For four of the five variants that still works:

                       light mode      dark mode
       light-primary     2.72:1          4.57:1
       light-success     1.92:1          6.68:1
       light-warning     1.58:1          7.73:1
       light-info        5.59:1          2.31:1   <- only this one gets worse

   #7239EA is dark purple, so it reads on the pale #F8F5FF and disappears on
   the dark #2F264F. The others are light hues and gain contrast in dark mode;
   where they are poor they are poor in BOTH themes, which is Metronic's own
   design and not this sheet's business — the same line the header draws
   around the solid brand fills.

   #A98BF5 is the same hue, lifted to 5.09:1 on #2F264F (6.02:1 on a card),
   which puts it beside light-primary and light-success rather than ahead of
   them.
   ========================================================================== */

[data-bs-theme="dark"] .btn.btn-light-info,
[data-bs-theme="dark"] .btn.btn-light-info i,
[data-bs-theme="dark"] .badge.badge-light-info,
[data-bs-theme="dark"] .text-info {
    color: #A98BF5;
}