/* =============================================================================
   Bradawl design tokens — SKIN-01
   All var(--bradawl-*) references in later deltas come from this block only.
   Raw hex values must not appear outside this file.
   ============================================================================= */

:root {
  /* Values follow the Bradawl site (site/src/Bradawl.Web/wwwroot/css/site.css). */
  --bradawl-ink:            #12100d;   /* body background — page canvas (site --bg) */
  --bradawl-charcoal:       #181511;   /* app shell: sidebar + topbar (site --bg-2) */
  --bradawl-panel:          #181511;   /* topbar (alias of charcoal) */
  --bradawl-panel-2:        #1c1915;   /* card / panel surface (site --bg-3) */
  --bradawl-border:         #3e372c;   /* card borders, sidebar border (site --line-2) */
  --bradawl-divider:        #2e2921;   /* internal dividers inside cards (site --line) */
  --bradawl-ivory:          #f0e9db;   /* primary text (site --head) */
  --bradawl-text:           #cbc3b3;   /* body copy (site --text) */
  --bradawl-muted:          #918979;   /* secondary / muted text (site --dim) */
  --bradawl-brass:          #d9952a;   /* brand accent ONLY — never a status colour (site --amber) */
  --bradawl-brass-2:        #efb350;   /* brand accent, hover (site --amber-2) */
  --bradawl-on-brass:       #1b1307;   /* text on a brass fill (site --on-amber) */
  --bradawl-delivered:      #7fb0c4;   /* delivered status (site --note) */
  --bradawl-warning-amber:  #c9734a;   /* warning / at-risk ONLY (site --warn; distinct from the brand amber) */
  --bradawl-success:        #22C55E;
  --bradawl-alert:          #DC2626;
  --bradawl-locked:         #6B7280;
  --bradawl-radius-card:    10px;
  --bradawl-sans:           'IBM Plex Sans', system-ui, sans-serif;
  --bradawl-serif:          'Newsreader', Georgia, serif;
  --bradawl-mono:           'IBM Plex Mono', ui-monospace, monospace;
}

/* Type, as on the Bradawl site: IBM Plex Sans for text, Newsreader for page headings (fonts/fonts.css, self-hosted). */
:root, [data-bs-theme] {
  --bs-body-font-family:    var(--bradawl-sans);
  --bs-font-sans-serif:     var(--bradawl-sans);
  --bs-font-monospace:      var(--bradawl-mono);
}
body { font-family: var(--bradawl-sans); }

/* Vuexy runs in its light theme underneath this dark skin; point the light-theme values it still reads (headings,
   labels, the translucent strip behind the floating navbar) at the Bradawl palette. */
:root, [data-bs-theme] {
  --bs-heading-color:       var(--bradawl-ivory);
  --bs-body-bg-rgb:         18, 16, 13;     /* --bradawl-ink */
  --bs-body-color-rgb:      203, 195, 179;  /* --bradawl-text */
  --bs-paper-bg:            var(--bradawl-panel-2);
  --bs-paper-bg-rgb:        28, 25, 21;     /* --bradawl-panel-2 */
}
.form-label, .form-check-label, .col-form-label { color: var(--bradawl-text); }
.form-control, .form-select {
  background-color: var(--bradawl-ink);
  border-color: var(--bradawl-border);
  color: var(--bradawl-ivory);
}
/* Autofilled fields (the browser filling a saved name or email). The theme clips the browser's autofill background
   to the text, which paints the letters in that pale tint and blurs them on Bradawl's dark fields. Keep the field
   ink and the text ivory instead (Stevie, 30 Oct 2026). */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill, input:-internal-autofill-selected {
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--bradawl-ivory) !important;
  caret-color: var(--bradawl-ivory);
  -webkit-box-shadow: 0 0 0 1000px var(--bradawl-ink) inset !important;
  box-shadow: 0 0 0 1000px var(--bradawl-ink) inset !important;
  transition: background-color 9999s ease-out 0s;
}
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--bradawl-serif); font-weight: 600; }


/* =============================================================================
   SKIN-02 — Sidebar + topbar chrome
   All values via var(--bradawl-*) only. No raw hex below this line.
   color-mix() used for alpha-composited tints.
   ============================================================================= */

/* ── Sidebar: shell ────────────────────────────────────────────────────────── */

#layout-menu {
  background-color: var(--bradawl-charcoal) !important;
  border-right: 1px solid var(--bradawl-border) !important;
}

.menu-inner-shadow {
  background: linear-gradient(
    var(--bradawl-charcoal) 5%,
    color-mix(in srgb, var(--bradawl-charcoal) 0%, transparent)
  ) !important;
}

/* ── Sidebar: brand zone ───────────────────────────────────────────────────── */

.menu-vertical .app-brand.demo {
  border-bottom: 1px solid var(--bradawl-border);
}

.app-brand-link { gap: 10px; text-decoration: none; }
.app-brand-text.demo {
  color: var(--bradawl-ivory) !important;
  font-family: var(--bradawl-sans);
  font-size: 1.2rem !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.bradawl-mark { position: relative; width: 40px; height: 12px; display: block; flex: none; }
.bradawl-mark::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--bradawl-ivory); }
.bradawl-mark::after { content: ''; position: absolute; left: 14px; top: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bradawl-brass); box-shadow: 0 0 10px color-mix(in srgb, var(--bradawl-brass-2) 70%, transparent); }

/* ── Sidebar: nav links ────────────────────────────────────────────────────── */

.menu-vertical .menu-link {
  color: var(--bradawl-muted) !important;
  font-family: var(--bradawl-sans);
}

.menu-vertical .menu-link:hover {
  color: var(--bradawl-ivory) !important;
  background-color: color-mix(in srgb, var(--bradawl-ivory) 6%, transparent) !important;
}

.menu-vertical .menu-icon {
  color: var(--bradawl-muted) !important;
}

/* Open parent: full ivory so expanded state reads clearly */
.menu-vertical .menu-item.open > .menu-link {
  color: var(--bradawl-ivory) !important;
}

.menu-vertical .menu-item.open > .menu-link .menu-icon {
  color: var(--bradawl-ivory) !important;
}

/* Section header labels */
.menu-vertical .menu-header > .menu-header-text {
  color: var(--bradawl-border) !important;
  letter-spacing: 0.06em;
  font-family: var(--bradawl-sans);
}

/* Chevron toggles */
.menu-vertical .menu-toggle::after {
  color: var(--bradawl-muted) !important;
}

/* ── Sidebar: active item — brass left bar + warm charcoal highlight ─────── */

.menu-vertical .menu-item.active > .menu-link {
  position: relative;
  color: var(--bradawl-ivory) !important;
  background-color: color-mix(in srgb, var(--bradawl-brass) 14%, transparent) !important;
}

.menu-vertical .menu-item.active > .menu-link .menu-icon {
  color: var(--bradawl-brass) !important;
}

.menu-vertical .menu-item.active > .menu-link::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background-color: var(--bradawl-brass);
  border-radius: 0 2px 2px 0;
}

/* Sub-items are already indented; suppress the bar at second level */
.menu-vertical .menu-sub .menu-item.active > .menu-link::before {
  display: none;
}

/* ── Sidebar: custom scrollbar (WebKit / Blink) ────────────────────────────── */

.menu-inner::-webkit-scrollbar        { width: 4px; }
.menu-inner::-webkit-scrollbar-track  { background: transparent; }
.menu-inner::-webkit-scrollbar-thumb  {
  background: var(--bradawl-border);
  border-radius: 2px;
}

/* ── Topbar: shell ─────────────────────────────────────────────────────────── */

#layout-navbar,
.layout-navbar {
  background-color: var(--bradawl-panel) !important;
  border-bottom: 1px solid var(--bradawl-border) !important;
  box-shadow: none !important;
}

/* Detached card variant used by _ContentNavbarLayout */
.layout-navbar.navbar-detached {
  background-color: var(--bradawl-panel) !important;
  border: 1px solid var(--bradawl-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── Topbar: control colours ───────────────────────────────────────────────── */

.layout-navbar .nav-link,
.layout-navbar .navbar-nav .nav-link {
  color: var(--bradawl-muted) !important;
  font-family: var(--bradawl-sans);
}

.layout-navbar .nav-link:hover,
.layout-navbar .navbar-nav .nav-link:hover {
  color: var(--bradawl-ivory) !important;
}

.layout-navbar .text-heading {
  color: var(--bradawl-ivory) !important;
  font-family: var(--bradawl-sans);
}

/* ── Topbar: search placeholder style ──────────────────────────────────────── */
/* Text is set via JS in _CommonMasterLayout.cshtml; these rules style it.     */

#autocomplete .aa-Input::placeholder {
  color: var(--bradawl-muted);
  font-family: var(--bradawl-sans);
  font-size: 0.875rem;
}


/* =============================================================================
   SKIN-03 — Kill Vuexy purple (#7367f0), skin all data surfaces
   Strategy: override Bootstrap CSS variables at :root so every component that
   consumes --bs-primary (buttons, badges, progress, links, charts via config.js,
   focus rings, check/radio inputs, pagination, tabs…) picks up Bradawl tokens
   automatically. Hard class overrides only where variables don't reach.
   All colour via var(--bradawl-*). No raw hex below this line.
   ============================================================================= */

/* ── Bootstrap primary → Bradawl brass (hits every BS component) ──────────── */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary:                    var(--bradawl-brass);
  --bs-primary-rgb:                217, 149, 42;
  --bs-primary-text-emphasis:      var(--bradawl-brass);
  --bs-primary-bg-subtle:          color-mix(in srgb, var(--bradawl-brass) 18%, transparent);
  --bs-primary-border-subtle:      color-mix(in srgb, var(--bradawl-brass) 40%, transparent);
  --bs-link-color:                 var(--bradawl-brass);
  --bs-link-hover-color:           var(--bradawl-brass-2);

  /* Body + border system */
  --bs-body-color:                 var(--bradawl-ivory);
  --bs-body-bg:                    var(--bradawl-ink);
  --bs-secondary-color:            var(--bradawl-muted);   /* .text-muted */
  --bs-border-color:               var(--bradawl-border);

  /* Semantic token redirections — wire Bootstrap states to Bradawl palette */
  --bs-success:                    var(--bradawl-success);
  --bs-success-rgb:                34, 197, 94;
  --bs-success-bg-subtle:          color-mix(in srgb, var(--bradawl-success) 15%, transparent);
  --bs-success-border-subtle:      color-mix(in srgb, var(--bradawl-success) 40%, transparent);

  --bs-warning:                    var(--bradawl-warning-amber);
  --bs-warning-rgb:                201, 115, 74;
  --bs-warning-bg-subtle:          color-mix(in srgb, var(--bradawl-warning-amber) 15%, transparent);
  --bs-warning-border-subtle:      color-mix(in srgb, var(--bradawl-warning-amber) 40%, transparent);

  --bs-danger:                     var(--bradawl-alert);
  --bs-danger-rgb:                 220, 38, 38;
  --bs-danger-bg-subtle:           color-mix(in srgb, var(--bradawl-alert) 15%, transparent);
  --bs-danger-border-subtle:       color-mix(in srgb, var(--bradawl-alert) 40%, transparent);

  --bs-info:                       var(--bradawl-delivered);
  --bs-info-rgb:                   127, 176, 196;   /* #7fb0c4 */
  --bs-info-bg-subtle:             color-mix(in srgb, var(--bradawl-delivered) 15%, transparent);
  --bs-info-border-subtle:         color-mix(in srgb, var(--bradawl-delivered) 40%, transparent);

  --bs-secondary:                  var(--bradawl-muted);
  --bs-secondary-rgb:              145, 137, 121;   /* #918979 */
  --bs-secondary-bg-subtle:        color-mix(in srgb, var(--bradawl-muted) 12%, transparent);
}

/* ── Metric cards — identical neutral frame on every card ─────────────────── */

.card {
  --bs-card-bg:            var(--bradawl-panel-2);
  --bs-card-border-color:  var(--bradawl-border);
  --bs-card-border-radius: var(--bradawl-radius-card);
  --bs-card-border-width:  1px;
  box-shadow: none;
}

/* Dividers inside cards use the lighter divider token */
.list-group-item {
  --bs-list-group-bg:            transparent;
  --bs-list-group-border-color:  var(--bradawl-divider);
  --bs-list-group-color:         var(--bradawl-muted);
  border-color: var(--bradawl-divider);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.btn-primary {
  --bs-btn-bg:                     var(--bradawl-brass);
  --bs-btn-border-color:           var(--bradawl-brass);
  --bs-btn-color:                  var(--bradawl-on-brass);
  --bs-btn-hover-bg:               var(--bradawl-brass-2);
  --bs-btn-hover-border-color:     var(--bradawl-brass-2);
  --bs-btn-hover-color:            var(--bradawl-on-brass);
  --bs-btn-active-bg:              color-mix(in srgb, var(--bradawl-brass) 68%, black);
  --bs-btn-active-border-color:    color-mix(in srgb, var(--bradawl-brass) 68%, black);
  --bs-btn-active-color:           var(--bradawl-on-brass);
  --bs-btn-disabled-bg:            color-mix(in srgb, var(--bradawl-brass) 55%, transparent);
  --bs-btn-disabled-border-color:  transparent;
  --bs-btn-disabled-color:         var(--bradawl-muted);
  --bs-btn-focus-shadow-rgb:       217, 149, 42;
}

.btn-outline-primary {
  --bs-btn-color:                  var(--bradawl-brass);
  --bs-btn-border-color:           var(--bradawl-brass);
  --bs-btn-hover-bg:               var(--bradawl-brass);
  --bs-btn-hover-color:            var(--bradawl-on-brass);
  --bs-btn-hover-border-color:     var(--bradawl-brass);
  --bs-btn-active-bg:              var(--bradawl-brass);
  --bs-btn-active-color:           var(--bradawl-on-brass);
  --bs-btn-active-border-color:    var(--bradawl-brass);
  --bs-btn-focus-shadow-rgb:       217, 149, 42;
}

.btn-danger {
  --bs-btn-bg:                     var(--bradawl-alert);
  --bs-btn-border-color:           var(--bradawl-alert);
  --bs-btn-color:                  var(--bradawl-ivory);
  --bs-btn-hover-bg:               color-mix(in srgb, var(--bradawl-alert) 82%, black);
  --bs-btn-hover-border-color:     color-mix(in srgb, var(--bradawl-alert) 82%, black);
  --bs-btn-focus-shadow-rgb:       220, 38, 38;
}

.btn-outline-danger {
  --bs-btn-color:                  var(--bradawl-alert);
  --bs-btn-border-color:           var(--bradawl-alert);
  --bs-btn-hover-bg:               var(--bradawl-alert);
  --bs-btn-hover-color:            var(--bradawl-ivory);
}

/* Secondary: charcoal fill + border */
.btn-secondary {
  --bs-btn-bg:                     var(--bradawl-charcoal);
  --bs-btn-border-color:           var(--bradawl-border);
  --bs-btn-color:                  var(--bradawl-ivory);
  --bs-btn-hover-bg:               color-mix(in srgb, var(--bradawl-charcoal) 70%, white);
  --bs-btn-hover-color:            var(--bradawl-ivory);
}

/* ── Badges and status chips ───────────────────────────────────────────────── */
/* Vuexy .bg-label-* classes use their own variables; override with !important */

.bg-label-primary {
  background-color: color-mix(in srgb, var(--bradawl-brass) 15%, transparent) !important;
  color: var(--bradawl-brass) !important;
}

.bg-label-success {
  background-color: color-mix(in srgb, var(--bradawl-success) 15%, transparent) !important;
  color: var(--bradawl-success) !important;
}

.bg-label-warning {
  background-color: color-mix(in srgb, var(--bradawl-warning-amber) 15%, transparent) !important;
  color: var(--bradawl-warning-amber) !important;
}

.bg-label-danger {
  background-color: color-mix(in srgb, var(--bradawl-alert) 15%, transparent) !important;
  color: var(--bradawl-alert) !important;
}

.bg-label-info {
  background-color: color-mix(in srgb, var(--bradawl-delivered) 15%, transparent) !important;
  color: var(--bradawl-delivered) !important;
}

.bg-label-secondary {
  background-color: color-mix(in srgb, var(--bradawl-locked) 15%, transparent) !important;
  color: var(--bradawl-locked) !important;
}

/* ── Progress bars ─────────────────────────────────────────────────────────── */

.progress {
  --bs-progress-bar-bg: var(--bradawl-brass);
  --bs-progress-bg:     color-mix(in srgb, var(--bradawl-border) 60%, transparent);
}

.progress-bar                       { background-color: var(--bradawl-brass) !important; }
.progress-bar.bg-success            { background-color: var(--bradawl-success) !important; }
.progress-bar.bg-warning            { background-color: var(--bradawl-warning-amber) !important; }
.progress-bar.bg-danger             { background-color: var(--bradawl-alert) !important; }
.progress-bar.bg-info               { background-color: var(--bradawl-delivered) !important; }

/* ── Tables ────────────────────────────────────────────────────────────────── */

.table {
  --bs-table-bg:               transparent;
  --bs-table-striped-bg:       color-mix(in srgb, var(--bradawl-border) 20%, transparent);
  --bs-table-hover-bg:         color-mix(in srgb, var(--bradawl-ivory) 4%, transparent);
  --bs-table-active-bg:        color-mix(in srgb, var(--bradawl-brass) 10%, transparent);
  --bs-table-border-color:     var(--bradawl-border);
  color:                       var(--bradawl-muted);
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--bradawl-border);
}

.table > thead > tr > th,
.table > thead > tr > td {
  color: var(--bradawl-ivory);
  border-bottom-color: var(--bradawl-border);
}

/* ── Tabs ──────────────────────────────────────────────────────────────────── */

.nav-tabs {
  --bs-nav-tabs-border-color:          var(--bradawl-border);
  --bs-nav-tabs-link-active-color:     var(--bradawl-ivory);
  --bs-nav-tabs-link-active-bg:        transparent;
  --bs-nav-tabs-link-active-border-color: var(--bradawl-border) var(--bradawl-border) transparent;
  --bs-nav-tabs-link-hover-border-color: var(--bradawl-border);
}

.nav-tabs .nav-link {
  color: var(--bradawl-muted);
}

.nav-tabs .nav-link:hover {
  color: var(--bradawl-ivory);
}

/* Active tab — brass bottom indicator */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color:              var(--bradawl-ivory) !important;
  border-bottom-color: var(--bradawl-brass) !important;
}

/* Pill tabs — brass fill instead of Vuexy purple pill */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--bradawl-brass) !important;
  color:            var(--bradawl-on-brass) !important;
}

.nav-pills .nav-link {
  color: var(--bradawl-muted);
}

/* ── Form controls (focus rings + check/radio) ────────────────────────────── */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: color-mix(in srgb, var(--bradawl-brass) 70%, transparent) !important;
  box-shadow:   0 0 0 0.2rem color-mix(in srgb, var(--bradawl-brass) 20%, transparent) !important;
}

.form-check-input:checked {
  background-color: var(--bradawl-brass) !important;
  border-color:     var(--bradawl-brass) !important;
}

.form-switch .form-check-input:checked {
  background-color: var(--bradawl-brass) !important;
  border-color:     var(--bradawl-brass) !important;
}

/* ── Pagination ────────────────────────────────────────────────────────────── */

.page-link {
  color: var(--bradawl-muted);
  border-color: var(--bradawl-border);
}

.page-link:hover {
  color: var(--bradawl-ivory);
  border-color: var(--bradawl-border);
}

.page-item.active .page-link {
  background-color: var(--bradawl-brass) !important;
  border-color:     var(--bradawl-brass) !important;
  color:            var(--bradawl-ivory) !important;
}

/* ── Dropdowns ─────────────────────────────────────────────────────────────── */

.dropdown-menu {
  --bs-dropdown-bg:                var(--bradawl-panel);
  --bs-dropdown-border-color:      var(--bradawl-border);
  --bs-dropdown-link-color:        var(--bradawl-muted);
  --bs-dropdown-link-hover-color:  var(--bradawl-ivory);
  --bs-dropdown-link-hover-bg:     color-mix(in srgb, var(--bradawl-ivory) 6%, transparent);
  --bs-dropdown-link-active-color: var(--bradawl-ivory);
  --bs-dropdown-link-active-bg:    color-mix(in srgb, var(--bradawl-brass) 14%, transparent);
  --bs-dropdown-divider-bg:        var(--bradawl-border);
}

/* ── Notification dot (keep alert-red, not brass) ──────────────────────────── */

.badge-notifications.bg-danger,
.badge-dot.bg-danger {
  background-color: var(--bradawl-alert) !important;
}