/*
 * brand.css — one place where the client's colour reaches the interface.
 *
 * The compiled theme paints roughly 140 rules with a literal `var(--brand-primary, #a2ae39)`, so every button, badge,
 * tab, checkbox and focus ring was the same olive whichever client's host you were on. That is
 * why "branding is not applied in many places": the colour was not a variable anywhere, it was
 * baked into CSS nobody can regenerate without the T-09 asset build.
 *
 * This file is loaded AFTER the theme on every layout and re-states those surfaces in terms of
 * three custom properties, which the layout head sets per host:
 *
 *   --brand-primary       the client's colour
 *   --brand-on-primary    black or white, whichever can be read on it (computed, not chosen)
 *   --brand-secondary     the client's accent
 *
 * Every reference carries its own fallback — `var(--brand-primary, #a2ae39)` — rather than a
 * `:root` block in this file. A `:root` block here would load AFTER the inline tokens the layout
 * writes and quietly put the platform's olive back, which is exactly what it did the first time.
 *
 * It is deliberately hand-written and not compiled: the theme's Sass regenerates 82 committed
 * files, which is its own deploy. This is additive and reversible by deleting one <link>.
 */

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

.btn-primary,
.btn-accent {
  background-color: var(--brand-fill, #a2ae39) !important;
  border-color: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active {
  background-color: var(--brand-primary-dim, #8c9631) !important;
  border-color: var(--brand-primary-dim, #8c9631) !important;
  color: var(--brand-on-primary, #ffffff) !important;
}

.btn-primary:focus,
.btn-accent:focus,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-fill, #a2ae39) 35%, transparent) !important;
}

.btn-outline-primary,
.btn-outline-accent {
  color: var(--brand-primary, #a2ae39) !important;
  border-color: var(--brand-fill, #a2ae39) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-accent:hover {
  background-color: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
}

.btn-flat-primary,
.btn-flat-accent {
  color: var(--brand-primary, #a2ae39) !important;
}

.btn-flat-primary:hover,
.btn-flat-accent:hover {
  background-color: var(--brand-primary-soft, rgba(var(--brand-primary-rgb, 162, 174, 57), .12)) !important;
}

.btn-relief-primary {
  background-color: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
}

/* ---------- surfaces, text and borders ----------------------------------- */

.bg-primary,
.bg-accent {
  background-color: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
}

.bg-light-primary {
  background-color: var(--brand-primary-soft, rgba(var(--brand-primary-rgb, 162, 174, 57), .12)) !important;
  color: var(--brand-primary, #a2ae39) !important;
}

.text-primary,
.text-accent {
  color: var(--brand-primary, #a2ae39) !important;
}

.border-primary,
.border-accent {
  border-color: var(--brand-fill, #a2ae39) !important;
}

.border-left-primary {
  border-left: 3px solid var(--brand-fill, #a2ae39) !important;
}

/* ---------- badges ------------------------------------------------------- */

.badge-primary,
.badge-accent {
  background-color: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
}

.badge-light-primary {
  background-color: var(--brand-primary-soft, rgba(var(--brand-primary-rgb, 162, 174, 57), .12)) !important;
  color: var(--brand-primary, #a2ae39) !important;
}

/* ---------- navigation --------------------------------------------------- */

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--brand-primary, #a2ae39) !important;
  border-bottom-color: var(--brand-fill, #a2ae39) !important;
}

.nav-tabs .nav-link.active::after {
  background: linear-gradient(30deg, var(--brand-fill, #a2ae39), color-mix(in srgb, var(--brand-primary, #a2ae39) 55%, white)) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-fill, #a2ae39) 35%, transparent) !important;
}

.main-menu.menu-light .navigation li a,
.main-menu.menu-light .navigation > li.open > a,
.main-menu.menu-light .navigation > li.sidebar-group-active > a,
.main-menu.menu-light .navigation > li ul li,
.main-menu.menu-light .navigation > li ul .open > a,
.main-menu.menu-light .navigation > li ul .sidebar-group-active > a {
  color: #8FA0B5;
}

.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-light .navigation li.active > a {
  background: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--brand-fill, #a2ae39) 55%, transparent) !important;
}

.main-menu.menu-light .navigation > li > a:hover {
  color: var(--ink, #0f1723);
  background: color-mix(in srgb, var(--brand-fill, #a2ae39) 10%, transparent);
}

.page-item.active .page-link {
  background-color: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
}

.page-link:hover {
  color: var(--brand-primary, #a2ae39);
}

/* ---------- form controls ------------------------------------------------ */

.form-control:focus,
.form-select:focus,
.custom-select:focus {
  border-color: var(--brand-fill, #a2ae39) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-fill, #a2ae39) 22%, transparent) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand-fill, #a2ae39) !important;
  border-color: var(--brand-fill, #a2ae39) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand-fill, #a2ae39) !important;
  border-color: var(--brand-fill, #a2ae39) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-fill, #a2ae39) 22%, transparent) !important;
}

/* ---------- links -------------------------------------------------------- */

/* Links read in the brand's *ink* -- the brand darkened until it is legible on white. The brand
 * itself, used as text, was 2.3:1 for HalaBag's olive. Sidebar links are not links in this sense:
 * they take the menu's own ink (below). */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.navbar-brand):not(.menu-link) {
  color: var(--brand-ink, #5f6621);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.navbar-brand):not(.menu-link):hover {
  color: var(--brand-ink, #5f6621);
  text-decoration: underline;
}

/* ---------- odds and ends the theme paints ------------------------------- */

.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--brand-primary, #a2ae39) !important;
}

.progress-bar-primary .progress-bar,
.progress-bar.bg-primary {
  background-color: var(--brand-fill, #a2ae39) !important;
}

.list-group-item.active {
  background-color: var(--brand-fill, #a2ae39) !important;
  border-color: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
}

.table th a,
.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: var(--brand-primary-soft, rgba(var(--brand-primary-rgb, 162, 174, 57), .12)) !important;
}

.avatar.bg-light-primary {
  background-color: var(--brand-primary-soft, rgba(var(--brand-primary-rgb, 162, 174, 57), .12)) !important;
  color: var(--brand-primary, #a2ae39) !important;
}

::selection {
  background: color-mix(in srgb, var(--brand-fill, #a2ae39) 28%, transparent);
}

/*
 * A browser without `color-mix` (anything older than 2023) simply keeps the theme's own colour
 * for the soft variants, which is a mild mismatch rather than a broken page. The solid surfaces
 * above use the raw variable and work everywhere.
 */

/* =========================================================================
 * Typography — sharpening the shell
 * =========================================================================
 *
 * The complaint was that the interface reads dull and soft rather than sharp
 * and corporate. Measured, the cause is three things, not a colour:
 *
 *  1. **Poppins at 17px, weight 400.** Poppins is a geometric face — circular
 *     bowls, a single-storey `a`, low stroke contrast, wide sidebearings. It is
 *     a friendly consumer typeface, and at 1.0625rem it is also large, so dense
 *     operational tables look loose and blobby. It reads approachable. It does
 *     not read precise.
 *
 *  2. **Proportional digits.** This is an operations system: waybills, weights,
 *     money, times, percentages. With proportional numerals the columns do not
 *     line up vertically and every table looks slightly ragged, which is the
 *     single biggest contributor to "not sharp" and the one nobody names.
 *
 *  3. **No hierarchy.** Headings sit near the body weight, so a page reads as
 *     one undifferentiated grey block.
 *
 * **Inter is already being downloaded on every page** (styles.blade.php, at
 * 400/500/600/700) and was used by exactly one report. It is the obvious answer:
 * tall x-height, rectangular letterforms, designed for dense screen UI, and it
 * carries real tabular figures. Switching to it costs no extra request.
 *
 * Arabic keeps Tajawal — Inter has no Arabic glyphs, so the stack falls through
 * naturally, and RTL is given Tajawal first so it is never reached for.
 *
 * Nothing here is `!important` except where it must beat a compiled rule, and
 * nothing sets a blanket `*` font, so the icon fonts are untouched.
 */

/* Declared on `body`, never on `:root`.
 *
 * This file loads after the inline token block the layout writes, so a `:root`
 * here wins over it — which is exactly how the platform's olive once came back
 * on a client's host. `ShellBrandingTest` forbids a `:root` block outright, and
 * the rule is worth keeping blanket rather than "only for brand tokens".
 * Everything visible is inside `body`, so nothing is lost. */
body {
  --ui-font: 'Inter', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ui-font-ar: 'Tajawal', 'Inter', -apple-system, sans-serif;

  /* Text, darkest to lightest. The theme's own muted grey is too light to scan
   * quickly in a table, so secondary text is darkened rather than greyed out. */
  --ink: #0f1723;
  --ink-2: #33415c;
  --ink-muted: #5b6b85;
  --hairline: #dfe3ea;

  /* Surfaces, lightest first. Pages across this application paint their own panels with literal
   * `#fff` in their own <style> blocks -- 654 of them -- and a literal cannot follow a theme.
   * Tokenising them (tools/branding/tokenise-surfaces.php) is what lets a page go dark at all;
   * these are the light values, which are what those literals already were. */
  --surface-1: #ffffff;   /* cards, panels, table bodies */
  --surface-2: #f7f8fa;   /* subtle fills: table headers, striped rows */
  --surface-3: #eceff4;   /* muted fills: disabled, wells, empty states */
}

body,
.content-wrapper,
.card,
.main-menu,
.navbar,
button,
input,
select,
textarea,
.form-control,
.btn,
label,
table {
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 1rem;              /* from 1.0625rem — denser without a reflow */
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.006em;     /* Inter is slightly wide by default at UI sizes */
}

/* Arabic reaches for Tajawal first rather than falling through Inter. */
[dir='rtl'] body,
[dir='rtl'] .card,
[dir='rtl'] table,
html[lang='ar'] body {
  font-family: var(--ui-font-ar);
  letter-spacing: normal;       /* never track Arabic */
}

/* ---------- hierarchy ---------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.card-title,
.content-header-title {
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.018em;
  line-height: 1.25;
}

h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.4rem; }
h3, .h3 { font-size: 1.2rem; }
h4, .h4 { font-size: 1.05rem; }
h5, .h5 { font-size: 0.95rem; }

[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3,
[dir='rtl'] h4, [dir='rtl'] h5, [dir='rtl'] h6 {
  letter-spacing: normal;
}

strong, b, .font-weight-bold { font-weight: 650; }

.text-muted,
.text-secondary,
small.text-muted {
  color: var(--ink-muted) !important;
}

/* ---------- numbers line up ---------------------------------------------
 * The one change that does most of the work. Every figure in a table, a badge,
 * a tile or a form field uses tabular figures with a slashed zero, so columns
 * align and a 0 can never be read as an O in a waybill.
 */

table,
.table,
td, th,
.tile strong,
.stat, .stats, .badge,
input[type='number'],
input[type='date'],
input[type='time'],
code, kbd, samp,
.waybill, .amount, .money {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

code, kbd, samp, .waybill {
  font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0;
}

/* ---------- tables read as data ------------------------------------------ */

.table thead th,
.table thead td,
table thead th,
table thead td,
table.dataTable thead th,
table.dataTable thead td,
.trp-dt .trp-dt-table thead th,
.trp-dt table.display thead th,
.trp-dt table.dataTable thead th,
.dr-page table thead th,
.dr-page #dailyReportsTable thead th,
.dt-column-title {
  font-size: 0.72rem;
  /* 1000 is CSS Fonts L4; 900 is the Inter/L3 ceiling browsers always accept. */
  font-weight: 900 !important;
  font-weight: 1000 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-table-head-color, var(--brand-primary, #a2ae39));
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

[dir='rtl'] .table thead th,
[dir='rtl'] table thead th {
  letter-spacing: normal;
}

.table td,
table td {
  color: var(--ink-2);
  border-top: 1px solid var(--hairline);
}

/* ---------- edges ---------------------------------------------------------
 * Softly-blurred shadows on a near-white background are what make a page look
 * hazy. A definite hairline reads as engineered.
 */

.card {
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(15, 23, 35, 0.04);
}

.form-control,
.custom-select {
  border-color: var(--hairline);
  color: var(--ink);
}

.form-control::placeholder { color: #9aa7bd; }

label,
.form-label,
.col-form-label {
  font-weight: 550;
  color: var(--ink-2);
  letter-spacing: -0.004em;
}

[dir='rtl'] label,
[dir='rtl'] .form-label { letter-spacing: normal; }

/* ---------- buttons state their business --------------------------------- */

.btn {
  font-weight: 600;
  letter-spacing: -0.004em;
}

[dir='rtl'] .btn { letter-spacing: normal; }

.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---------- a logo on the brand colour -----------------------------------
 * One logo file cannot serve both a white header and a saturated panel. On the
 * login page the same image was used for both and came out as a dark shape on a
 * dark field. `--brand-logo-knockout` reduces it to a single tone — white on a
 * deep brand colour, black on a pale one — chosen by the same luminance test
 * that picks the text colour. Applied only where the logo sits on the colour.
 */
.brand-logo-on-primary img,
img.brand-logo-on-primary {
  filter: var(--brand-logo-knockout, brightness(0) invert(1));
}

/* =========================================================================
 * Warning is a meaning, not a brand colour
 * =========================================================================
 *
 * Vuexy's `$warning` was set to the brand olive when the theme was customised,
 * so `.btn-warning` and `.btn-primary` compile to the *same* `var(--brand-primary, #a2ae39)`. Every
 * "are you sure" button on every screen looks exactly like "Save".
 *
 * Measured: of 242 selector/property pairs painting the olive, about half are
 * the `warning` family. `danger` (#ea5455), `success` (#198754) and `info`
 * (#00cfe8) were all left alone — warning is the only semantic colour that was
 * taken, which is why it reads as an accident rather than a decision.
 *
 * Restored to amber here rather than in the Sass, because regenerating the
 * theme rewrites 82 committed files and is its own deploy. Amber is a fixed
 * value on purpose: a warning must not follow the client's brand, or a client
 * whose colour happens to be green would ship a green warning.
 */

body {
  --warn: #c2410c;          /* text and borders: dark enough to read on white */
  --warn-bg: #f59e0b;       /* fills */
  --warn-soft: #fffbeb;     /* tints */
  --warn-line: #fcd34d;
}

.btn-warning,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning.disabled,
.btn-relief-warning {
  background-color: var(--warn-bg) !important;
  border-color: var(--warn-bg) !important;
  color: #1b1f24 !important;          /* amber is light; white on it fails contrast */
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning.active {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}

.btn-outline-warning,
.btn-flat-warning {
  color: var(--warn) !important;
  border-color: var(--warn-line) !important;
  background-color: transparent !important;
}

.btn-outline-warning:hover,
.btn-flat-warning:hover {
  background-color: var(--warn-soft) !important;
  color: var(--warn) !important;
}

.badge-warning,
.badge.badge-warning,
.bg-warning,
.chip-warning,
.bullet.bullet-warning {
  background-color: var(--warn-bg) !important;
  color: #1b1f24 !important;
}

.text-warning,
.alert-warning {
  color: var(--warn) !important;
}

.alert-warning {
  background-color: var(--warn-soft) !important;
  border-color: var(--warn-line) !important;
}

.border-warning,
.border-top-warning,
.border-bottom-warning,
.border-left-warning,
.border-right-warning {
  border-color: var(--warn-line) !important;
}

.custom-switch-warning .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--warn-bg) !important;
}

/* ---------- and the accent family does follow the brand ------------------
 * The other half of those 242 rules. `accent` is the theme's own name for the
 * brand colour, so these are the surfaces that were meant to be branded and
 * were simply not restated when the client colour became a variable.
 */

.accent,
.text-accent { color: var(--brand-primary, #a2ae39) !important; }

.bg-accent,
.badge-accent,
.badge.badge-accent,
.chip-accent,
.bullet.bullet-accent {
  background-color: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
}

.border-accent,
.border-top-accent,
.border-bottom-accent,
.border-left-accent,
.border-right-accent { border-color: var(--brand-fill, #a2ae39) !important; }

.btn-outline-accent {
  color: var(--brand-primary, #a2ae39) !important;
  border-color: var(--brand-fill, #a2ae39) !important;
}

.btn-outline-accent:hover,
.btn-relief-accent {
  background-color: var(--brand-fill, #a2ae39) !important;
  color: var(--brand-on-primary, #ffffff) !important;
}

.alert-accent {
  color: var(--brand-primary, #a2ae39) !important;
  background-color: var(--brand-primary-soft, rgba(var(--brand-primary-rgb, 162, 174, 57), .12)) !important;
  border-color: var(--brand-fill, #a2ae39) !important;
}

.custom-switch-accent .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand-fill, #a2ae39) !important;
}

/* =========================================================================
 * Dark mode
 * =========================================================================
 *
 * The theme already ships `body.dark-layout` and loads `dark-layout.css`
 * unconditionally; what was missing was a way for a person to choose. See
 * `panels/theme-switch.blade.php`.
 *
 * **This block is not optional.** The typography layer above sets the body
 * colour to `--ink`, a near-black. On the dark background (#262c49) that is
 * invisible — so every token it introduced has to be restated here, or turning
 * dark mode on produces a blank-looking page.
 *
 * Values follow the theme's own dark palette rather than new ones: #c2c6dc is
 * what `dark-layout.css` uses for text, #262c49 the page, #10163a a card.
 */

/* `body.dark-layout` only — never `.dark-layout body`.
 *
 * The head script marks <html> before <body> exists so the icon is right on the first paint. If
 * these tokens keyed off that too, the dark text colours would apply during the window before the
 * theme's own `body.dark-layout` rules did, and any page whose background is hardcoded light would
 * render unreadable text. Keying strictly off the body class means the text and the background can
 * never disagree. */
body.dark-layout,
html[data-bs-theme="dark"] body {
  --ink: #e4e8f4;
  --ink-2: #c2c6dc;
  --ink-muted: #8f98b8;
  --hairline: #3a4166;

  /* Matched to what the theme's own dark stylesheet already paints, so a tokenised page sits on
   * the same surfaces as an untokenised one rather than introducing a third palette. The theme
   * makes a card *darker* than the page, not lighter, which is worth keeping: it is what makes
   * a panel read as recessed rather than as a light box someone forgot to restyle. */
  --surface-1: #10163a;   /* cards and panels -- the theme's own card colour */
  --surface-2: #1a2044;   /* subtle fills */
  --surface-3: #262c49;   /* muted fills -- the theme's page background */

  /* Amber holds its meaning in the dark, but the light-mode fill is too bright
   * against #262c49 and the dark text on it stops working. */
  --warn: #fbbf24;
  --warn-bg: #d97706;
  --warn-soft: rgba(217, 119, 6, 0.14);
  --warn-line: #92400e;
}

body.dark-layout .btn-warning,
html[data-bs-theme="dark"] body .btn-warning,
body.dark-layout .badge-warning,
html[data-bs-theme="dark"] body .badge-warning,
body.dark-layout .bg-warning,
html[data-bs-theme="dark"] body .bg-warning,
body.dark-layout .chip-warning,
html[data-bs-theme="dark"] body .chip-warning {
  color: #ffffff !important;
}

body.dark-layout .card,
html[data-bs-theme="dark"] body .card {
  border-color: var(--hairline);
  box-shadow: none;         /* a shadow on a dark field is dirt, not depth */
}

body.dark-layout .form-control,
html[data-bs-theme="dark"] body .form-control,
body.dark-layout .custom-select,
html[data-bs-theme="dark"] body .custom-select {
  background-color: #1b2143;
  border-color: var(--hairline);
  color: var(--ink);
}

body.dark-layout .form-control::placeholder { color: #6f7aa0; },
html[data-bs-theme="dark"] body .form-control::placeholder { color: #6f7aa0; }

body.dark-layout .table td { border-top-color: var(--hairline); },
html[data-bs-theme="dark"] body .table td { border-top-color: var(--hairline); }
body.dark-layout .table thead th { border-bottom-color: var(--hairline); },
html[data-bs-theme="dark"] body .table thead th { border-bottom-color: var(--hairline); }

/* ---------- the switcher itself ------------------------------------------
 * One icon shows at a time: whichever mode is in force. `data-theme` is written
 * on <html> by the head script, so the icon is correct on the first paint and
 * never flickers through the other two.
 */

.theme-switch .theme-icon-system,
.theme-switch .theme-icon-light,
.theme-switch .theme-icon-dark { display: none; }

html[data-theme='system'] .theme-switch .theme-icon-system,
html[data-theme='light'] .theme-switch .theme-icon-light,
html[data-theme='dark'] .theme-switch .theme-icon-dark { display: inline-block; }

/* Nothing chosen yet: `system` is the default, so show its icon. */
html:not([data-theme]) .theme-switch .theme-icon-system { display: inline-block; }

.theme-switch .dropdown-item.active {
  background-color: var(--brand-primary-soft, rgba(var(--brand-primary-rgb, 162, 174, 57), .12)) !important;
  color: var(--brand-primary, #a2ae39) !important;
  font-weight: 600;
}

/* ---------- the base selectors the generator must not touch ---------------
 * `.btn` and `a` are painted the platform olive in the compiled theme as a
 * *default* — `.btn` is olive precisely so `.btn-primary` can be white on green
 * and `.btn-danger` white on red. Restating them with `!important` inverts that
 * and turns every button's text the brand colour, on red and amber too. So they
 * are caught here with `:not()`, matching only the case nobody has styled.
 */

.btn:not([class*='btn-']) {
  color: var(--brand-primary, #a2ae39);
}

a:not([class*='btn']):not(.dropdown-item):not(.nav-link):not(.page-link):not(.menu-link) {
  color: var(--brand-ink, #5f6621);
}

/* ---------- the menu collapse control ------------------------------------
 * Was `text-warning`, i.e. amber: the control for collapsing the menu wore the
 * colour that means something is wrong. Chrome takes the menu's ink.
 */
.modern-nav-toggle .hb-menu-toggle {
  color: var(--ink-muted, #6b7280);
  transition: color .15s ease;
}

.modern-nav-toggle:hover .hb-menu-toggle,
.modern-nav-toggle:focus .hb-menu-toggle {
  color: var(--brand-primary, #a2ae39);
}

/* ---------- dark mode: the ink the compiled theme hardcodes -------------------
 * Vuexy's own stylesheets are left untokenised on purpose -- they ship a dark
 * theme that works -- but a few text colours are written as literals there and
 * have no dark counterpart, so they stay near-black on a near-black panel. These
 * are the ones a measured sweep of all 66 pages actually found, rather than
 * every rule that might in principle be wrong.
 */
body.dark-layout .table th,
html[data-bs-theme="dark"] body .table th,
body.dark-layout table thead th,
html[data-bs-theme="dark"] body table thead th,
body.dark-layout .table thead th,
html[data-bs-theme="dark"] body .table thead th {
  color: var(--brand-table-head-color, var(--brand-primary, #a2ae39));
}

body.dark-layout .breadcrumb-item,
html[data-bs-theme="dark"] body .breadcrumb-item,
body.dark-layout .breadcrumb-item.active,
html[data-bs-theme="dark"] body .breadcrumb-item.active,
body.dark-layout .breadcrumb-item a,
html[data-bs-theme="dark"] body .breadcrumb-item a {
  color: var(--ink-2);
}

/* ---------- anything sitting on the brand colour -----------------------------
 * A filled brand control paints `--brand-fill`, which is the client's real
 * colour in both themes, so its contents take the colour computed to be read on
 * it. Icons inside such a control were inheriting the page's ordinary ink and
 * were then read against a saturated background at 2.3:1.
 */
.btn-accent,
.btn-accent:hover,
.btn-accent:focus,
.btn-accent .material-icons,
.btn-accent i,
.btn-primary .material-icons,
.bg-accent .material-icons {
  color: var(--brand-on-fill, #ffffff);
}

/* `.table` carries its own near-black in the compiled theme (`color: #172130`), which every cell
 * then inherits. The header was corrected above; this is the body of every table in the product. */
body.dark-layout .table,
html[data-bs-theme="dark"] body .table,
body.dark-layout .table td,
html[data-bs-theme="dark"] body .table td,
body.dark-layout table.dataTable,
html[data-bs-theme="dark"] body table.dataTable,
body.dark-layout table.dataTable td,
html[data-bs-theme="dark"] body table.dataTable td {
  color: var(--ink-2);
}

/* The breadcrumb takes its colour from the compiled theme's near-black and has no dark
 * counterpart. Marked important because the theme's own rule is, and a breadcrumb is a leaf
 * label -- there is nothing further down for this to interfere with. */
body.dark-layout .breadcrumb .breadcrumb-item,
html[data-bs-theme="dark"] body .breadcrumb .breadcrumb-item,
body.dark-layout .breadcrumb .breadcrumb-item.active,
html[data-bs-theme="dark"] body .breadcrumb .breadcrumb-item.active,
body.dark-layout .breadcrumb .breadcrumb-item a,
html[data-bs-theme="dark"] body .breadcrumb .breadcrumb-item a,
body.dark-layout ol.breadcrumb li,
html[data-bs-theme="dark"] body ol.breadcrumb li {
  color: var(--ink-2) !important;
}


/* ---------- the sidebar (v10 shell) ----------------------------------------
 * Menu text is ink, never the brand: a brand colour used as text on the white
 * menu is illegible whenever the brand is light (HalaBag's olive was 2.3:1).
 * The brand appears as a wash on hover and on the current page (brand-bridge).
 */
.layout-menu .menu-link,
.layout-menu .menu-link .menu-icon,
.layout-menu .menu-header,
.layout-menu .menu-header-text {
  color: var(--ink-2, #33415c) !important;
}

.layout-menu .menu-item > .menu-link:hover {
  color: var(--ink, #0f1723) !important;
  background: color-mix(in srgb, var(--brand-fill, #a2ae39) 10%, transparent) !important;
}

.layout-menu .menu-item.open > .menu-link.menu-toggle,
.layout-menu .menu-item.active > .menu-link.menu-toggle {
  color: var(--ink, #0f1723) !important;
  background: color-mix(in srgb, var(--brand-fill, #a2ae39) 12%, transparent) !important;
  font-weight: 600;
}

/* The current page: see layouts/v10/partials/brand-bridge (a brand wash with a brand edge). */

.layout-menu .menu-sub .menu-link::before {
  background-color: currentColor;
}

/* ---------- the top bar ----------------------------------------------------
 * The brand is its background, so its text is whichever of black or white can
 * be read on that colour (was always white: 2.3:1 on HalaBag's olive).
 * Dropdowns hanging from it are panels of their own and keep their ink.
 */
.hb-navbar,
.hb-navbar .nav-link,
.hb-navbar .navbar-nav .nav-link i,
.hb-navbar .material-icons,
.hb-navbar .material-icons-outlined,
.hb-navbar .user-name,
.hb-navbar .user-status,
.hb-navbar .selected-language,
.hb-navbar .fw-semibold,
.hb-navbar small {
  color: var(--brand-header-text, var(--brand-on-fill, #ffffff)) !important;
}

/* The panel sets its own ink: inheriting took the bar's on-fill (white on a dark brand). */
.hb-navbar .dropdown-menu {
  color: var(--ink-2, #33415c) !important;
}

.hb-navbar .dropdown-menu * {
  color: inherit !important;
}

.hb-navbar .dropdown-menu .dropdown-item {
  color: var(--ink-2, #33415c) !important;
}