/* ============================================================================
 * VouchOne — Brand Guide v2 Design Tokens (COLORS)
 * ----------------------------------------------------------------------------
 * Source of truth: docs/voucher-create-handover.md §1
 * Load order: adminlte.css -> custom.css -> THIS FILE. It wins by being last;
 *             no !important needed except the dark-sidebar bg (see §E).
 * Scope: colors only. Fonts are a separate change. Do not add font rules here.
 *
 * To roll this back, see docs/brand-tokens-rollback-plan.md (Tier 0 = remove
 * the <link> tags that load this file).
 * ========================================================================== */


/* ── §A. Raw brand palette ────────────────────────────────────────────────
 * Named handles for every Brand Guide v2 color. Everything below consumes
 * these so the hex values live in exactly one place.
 *
 * ⚠ TEAL RULE: --vo-teal (#35C6C1) is for ICONS / decorative highlights ONLY.
 *   It fails WCAG AA contrast as text on white/light backgrounds (~2.3:1).
 *   For teal-family TEXT or labels use --vo-teal-dark (#1E8B88) instead.
 */
:root {
  --vo-navy:       #193864; /* primary buttons, headings, sidebar text-on-dark */
  --vo-deep-navy:  #0E2240; /* dark sidebar bg, body text on light */
  --vo-navy-mid:   #234A80; /* primary button hover */
  --vo-blue:       #2E6FA3; /* links, focus rings, info accents, active nav */
  --vo-teal:       #35C6C1; /* ICONS ONLY — never text on white */
  --vo-teal-dark:  #1E8B88; /* teal-family text/labels (passes contrast) */
  --vo-off-white:  #F7F9FC; /* page bg, readonly fields, drawer bg */
  --vo-mist:       #E2E8F0; /* borders, dividers */
  --vo-slate-mid:  #718096; /* helper text, muted labels */
  --vo-charcoal:   #4A5568; /* secondary body text */
}


/* ── §B. Bootstrap 5 variable remap ───────────────────────────────────────
 * Re-point Bootstrap's semantic tokens at the brand palette. This is what
 * rebrands the shell for free. NOTE: success/warning/danger/info are left
 * untouched on purpose — voucher status uses named .badge-status-* classes
 * (see §D) so we never disturb alerts/validation across the app.
 */
:root {
  /* Primary — replaces the legacy #087990 override in custom.css */
  --bs-primary:               #193864;
  --bs-primary-rgb:           25, 56, 100;
  --bs-primary-text-emphasis: #0E2240;
  --bs-primary-bg-subtle:     #EBF3FA;
  --bs-primary-border-subtle: #C3D6EC;

  /* Links */
  --bs-link-color:            #193864;
  --bs-link-color-rgb:        25, 56, 100;
  --bs-link-hover-color:      #234A80;
  --bs-link-hover-color-rgb:  35, 74, 128;

  /* Body & text */
  --bs-body-color:            #4A5568;
  --bs-body-color-rgb:        74, 85, 104;
  --bs-secondary-color:       rgba(113, 128, 150, 1);   /* Slate Mid — .text-muted */
  --bs-secondary-color-rgb:   113, 128, 150;

  /* Borders & dividers */
  --bs-border-color:          #E2E8F0;

  /* Radius — 7px controls, 10px cards */
  --bs-border-radius:         0.4375rem;  /* 7px  */
  --bs-border-radius-lg:      0.625rem;   /* 10px */

  /* Focus ring — 1.5px Blue border + soft Blue glow */
  --bs-focus-ring-width:      1.5px;
  --bs-focus-ring-color:      rgba(46, 111, 163, 0.15);
}

/* Card radius keyed to the large radius token */
.card { --bs-card-border-radius: var(--bs-border-radius-lg); }

/* Visible focus ring for form controls, using the brand blue border */
.form-control:focus,
.form-select:focus {
  border-color: #2E6FA3;
  box-shadow: 0 0 0 3px rgba(46, 111, 163, 0.15);
}

.list-group {
  --bs-list-group-active-bg:           #193864;
  --bs-list-group-active-border-color: #193864;
  --bs-list-group-active-color:        #fff;
}


/* ── §C. Brand buttons ────────────────────────────────────────────────────
 * These class names already exist in custom.css with the legacy teal; we
 * redefine them here (cascade-later wins) so custom.css stays untouched and
 * rollback is a single <link> removal.
 *
 *   .btn-voprimary          = filled primary  (Navy, hover Navy Mid)
 *   .btn-outline-voprimary  = secondary       (Navy outline, fills on hover)
 */
.btn-voprimary {
  --bs-btn-color:                 #fff;
  --bs-btn-bg:                    #193864;
  --bs-btn-border-color:          #193864;
  --bs-btn-hover-color:           #fff;
  --bs-btn-hover-bg:              #234A80;
  --bs-btn-hover-border-color:    #234A80;
  --bs-btn-focus-shadow-rgb:      46, 111, 163;
  --bs-btn-active-color:          #fff;
  --bs-btn-active-bg:             #1B3C6A;
  --bs-btn-active-border-color:   #16335A;
  --bs-btn-active-shadow:         inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:        #fff;
  --bs-btn-disabled-bg:           #193864;
  --bs-btn-disabled-border-color: #193864;
  --bs-btn-disabled-opacity:      0.5;
}

.btn-outline-voprimary {
  --bs-btn-color:                 #193864;
  --bs-btn-border-color:          #193864;
  --bs-btn-hover-color:           #fff;
  --bs-btn-hover-bg:              #193864;
  --bs-btn-hover-border-color:    #193864;
  --bs-btn-focus-shadow-rgb:      46, 111, 163;
  --bs-btn-active-color:          #fff;
  --bs-btn-active-bg:             #193864;
  --bs-btn-active-border-color:   #193864;
  --bs-btn-active-shadow:         inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:        #193864;
  --bs-btn-disabled-bg:           transparent;
  --bs-btn-disabled-border-color: #193864;
  --bs-gradient:                  none;
}


/* ── §D. Voucher lifecycle status badges ──────────────────────────────────
 * Named classes mapped to App\Enums\VoucherStatus via VoucherStatus::badgeClass().
 * Use alongside Bootstrap's base: class="badge badge-status-draft".
 * Literal hex (not var()) so these survive contexts that don't load §A/§B
 * (e.g. a future print stylesheet).
 *
 * Cancelled/Voided fg uses Charcoal #4A5568 (not the spec's #666666) to pass
 * WCAG AA on the #F0F0F0 background. See docs/voucher-create-handover.md §1.
 */
.badge-status-draft,
.badge-status-for-approval,
.badge-status-posted,
.badge-status-rejected,
.badge-status-cancelled,
.badge-status-voided {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.badge-status-draft        { background-color: #EBF3FA; color: #2E6FA3; }
.badge-status-for-approval { background-color: #FFF8E6; color: #92650A; }
.badge-status-posted       { background-color: #E6F6F0; color: #0D6E4E; }
.badge-status-rejected     { background-color: #FEF0F0; color: #C53030; }
.badge-status-cancelled    { background-color: #F0F0F0; color: #4A5568; }
.badge-status-voided       { background-color: #F0F0F0; color: #4A5568; }


/* ── §E. Sidebar ──────────────────────────────────────────────────────────
 * Light sidebar stays WHITE (custom.css already sets #fff). We only retint the
 * active/hover states from legacy teal to Navy.
 */
.app-sidebar {
  --lte-sidebar-hover-color:          #193864;
  --lte-sidebar-hover-bg:             rgba(25, 56, 100, 0.08);
  --lte-sidebar-active-color:         #193864;
  --lte-sidebar-menu-active-bg:       rgba(25, 56, 100, 0.10);
  --lte-sidebar-menu-active-color:    #193864;
  --lte-sidebar-submenu-hover-color:  #193864;
  --lte-sidebar-submenu-hover-bg:     rgba(25, 56, 100, 0.06);
  --lte-sidebar-submenu-active-color: #193864;
  --lte-sidebar-submenu-active-bg:    rgba(25, 56, 100, 0.08);
}

.app-sidebar .brand-text { color: #193864; }

/* Dark sidebar: Deep Navy bg. !important is required to beat the existing
 * !important on the same property in custom.css; cascade order breaks the tie. */
.app-sidebar[data-bs-theme=dark] {
  background-color: #0E2240 !important;
  border-right: 1px solid rgba(46, 100, 160, 0.25);
}


/* ── §F. Brand "info" accent ──────────────────────────────────────────────
 * Bootstrap's info cyan (#0dcaf0) clashes with the Navy/Blue palette. Use this
 * as a drop-in replacement for `text-bg-info` and `bg-info text-dark` to render
 * brand Blue instead. White text on Blue #2E6FA3 passes WCAG AA (~4.6:1).
 * (We do NOT override Bootstrap's --bs-info globally — see §B note.)
 */
.text-bg-vo-info {
  color: #fff;
  background-color: #2E6FA3;
}