/* ============================================================
   Tempest design system — Apple-inspired
   SF Pro system type · #f5f5f7 canvas · #0071e3 accent
   Frosted chrome, pill controls, borderless cards, iOS status
   colours. Token names (--wt-*) preserved from the previous
   theme so every template keeps working unchanged.
   ============================================================ */

:root {
  /* Core palette — Apple light */
  --wt-cream:      #f5f5f7;  /* page canvas                 */
  --wt-cream-2:    #fafafc;  /* raised tint / table headers */
  --wt-cream-3:    #e8e8ed;  /* subtle fill / chips         */
  --wt-line:       #d2d2d7;  /* hairline border             */
  --wt-line-soft:  #e5e5ea;
  --wt-ink:        #1d1d1f;  /* primary text / chrome       */
  --wt-ink-2:      #424245;
  --wt-muted:      #6e6e73;  /* secondary text              */
  --wt-violet:     #0071e3;  /* accent (token name kept)    */
  --wt-violet-dk:  #0058b0;
  --wt-surface:    #ffffff;  /* card surface                */
  --wt-accent-rgb: 0, 113, 227;

  /* iOS system colours */
  --sys-green:  #34c759; --sys-green-text:  #1d7d3f;
  --sys-orange: #ff9500; --sys-orange-text: #9a5b00;
  --sys-red:    #ff3b30; --sys-red-text:    #c22b22;
  --sys-indigo: #5e5ce6; --sys-indigo-text: #3634a3;

  /* SF Pro via the native system stack */
  --wt-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* legacy aliases kept so existing inline refs keep working */
  --navy: var(--wt-ink);
  --navy-mid: var(--wt-ink-2);
  --gold: var(--wt-violet);
  --gold-light: var(--wt-violet);

  /* Bootstrap surface tokens */
  --bs-body-font-family: var(--wt-font);
  --bs-body-bg: var(--wt-cream);
  --bs-body-color: var(--wt-ink);
  --bs-border-color: var(--wt-line-soft);
  --bs-primary: var(--wt-violet);
  --bs-primary-rgb: 0, 113, 227;
  --bs-link-color: var(--wt-violet);
  --bs-link-hover-color: #0077ed;

  /* Geometry, depth and motion */
  --wt-radius-sm: 10px;
  --wt-radius:    16px;
  --wt-radius-lg: 24px;
  --wt-shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
  --wt-shadow-sm: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .05);
  --wt-shadow:    0 4px 16px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .08);
  --wt-shadow-lg: 0 16px 48px rgba(0, 0, 0, .16);
  --wt-ease:      cubic-bezier(.2, .7, .3, 1);
  --wt-blur:      saturate(180%) blur(20px);
}

body {
  background: var(--wt-cream);
  color: var(--wt-ink);
  font-family: var(--wt-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--wt-font);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--wt-ink);
}
h1, .h1, h2, .h2 { letter-spacing: -0.025em; }

a { text-decoration: none; }

.text-muted { color: var(--wt-muted) !important; }

/* ---- Top navigation: frosted glass, pill states ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: var(--wt-blur);
  backdrop-filter: var(--wt-blur);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.navbar .nav-link,
.navbar .navbar-text {
  color: var(--wt-ink) !important;
}
.navbar .nav-link {
  font-weight: 500;
  font-size: .92rem;
  opacity: .8;
  border-radius: 980px;
  padding: .42rem .85rem;
  transition: background-color .15s var(--wt-ease), color .15s var(--wt-ease), opacity .15s var(--wt-ease);
}
.navbar .nav-link:hover,
.navbar .nav-item.dropdown:hover > .nav-link {
  opacity: 1;
  background-color: rgba(0, 0, 0, .06);
}
.navbar .nav-link.active {
  opacity: 1;
  color: var(--wt-violet) !important;
  background-color: rgba(var(--wt-accent-rgb), .10);
}
.navbar .navbar-text { opacity: .7; }
.navbar-toggler { border-color: var(--wt-line); }

/* Dropdown (hover) menus — white, blurred, rounded like macOS menus */
.navbar .dropdown-menu {
  background-color: var(--wt-surface) !important;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 14px;
  margin-top: .35rem;
  padding: .4rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .14), 0 2px 10px rgba(0, 0, 0, .06);
}
.navbar .dropdown-item {
  color: var(--wt-ink) !important;
  border-radius: 8px;
  padding: .42rem .7rem;
  font-size: .9rem;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: rgba(0, 0, 0, .05) !important;
  color: var(--wt-ink) !important;
}
.navbar .dropdown-header {
  color: var(--wt-muted) !important;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.navbar .dropdown-item-text { color: var(--wt-muted) !important; }
.navbar .dropdown-divider { border-top-color: rgba(0, 0, 0, .08); margin: .35rem .3rem; }

/* ---- Brand lockups ---- */
/* App-icon tile: blue gradient rounded square with the Tempest glyph */
.brand-tile {
  width: 27px; height: 27px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 7px;
  background: linear-gradient(160deg, #3f9dff 0%, #0071e3 55%, #0058b0 100%);
  color: #fff;
  font-size: .78rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 3px rgba(0,88,176,.35);
}
.brand-logo {              /* legacy triangle glyph used around the app */
  color: var(--wt-violet);
  font-size: 1.35rem;
}
.brand-name {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--wt-ink);
  font-size: 1.12rem;
}
.brand-sub {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--wt-muted) !important;
}
/* Firm co-brand — quiet, secondary */
.wt-logo { gap: 7px; }
.wt-mark {
  width: 16px; height: 16px;
  background: linear-gradient(160deg, #48484d, #1d1d1f);
  border-radius: 5px;
  display: inline-block;
  flex-shrink: 0;
}
.wt-word {
  font-family: var(--wt-font);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.92rem;
  color: var(--wt-muted);
  white-space: nowrap;
}
.wt-brand-img { height: 38px; width: auto; display: block; border-radius: 6px; }
/* Hairline separating the product brand from the firm co-brand */
.wt-divider {
  width: 1px;
  align-self: stretch;
  min-height: 22px;
  background: var(--wt-line);
  display: inline-block;
}

/* Content dropdowns (outside the nav) */
.dropdown-menu,
.dropdown-menu-dark {
  --bs-dropdown-bg: var(--wt-surface);
  --bs-dropdown-color: var(--wt-ink);
  --bs-dropdown-link-color: var(--wt-ink);
  --bs-dropdown-link-hover-bg: var(--wt-cream);
  --bs-dropdown-link-hover-color: var(--wt-ink);
  --bs-dropdown-link-active-bg: rgba(var(--wt-accent-rgb), .10);
  --bs-dropdown-link-active-color: var(--wt-violet);
  --bs-dropdown-border-color: rgba(0, 0, 0, .06);
  border-radius: 12px;
  box-shadow: var(--wt-shadow);
  padding-block: .35rem;
}
.dropdown-item { border-radius: 8px; margin-inline: .3rem; width: auto; padding-inline: .6rem; }

/* ---- Buttons: Apple pills ---- */
.btn {
  --bs-btn-border-radius: 980px;
  border-radius: 980px;
  font-weight: 500;
  padding-inline: 1.1rem;
  transition: background-color .18s var(--wt-ease), border-color .18s var(--wt-ease),
              color .18s var(--wt-ease), box-shadow .2s var(--wt-ease),
              transform .12s var(--wt-ease), filter .18s var(--wt-ease);
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.disabled { box-shadow: none; opacity: .45; }
.btn-sm { --bs-btn-border-radius: 980px; border-radius: 980px; padding-inline: .85rem; }
.btn-lg { --bs-btn-border-radius: 980px; border-radius: 980px; padding-inline: 1.4rem; }

.btn-primary {
  --bs-btn-bg: var(--wt-violet);
  --bs-btn-border-color: var(--wt-violet);
  --bs-btn-hover-bg: #0077ed;
  --bs-btn-hover-border-color: #0077ed;
  --bs-btn-active-bg: var(--wt-violet-dk);
  --bs-btn-active-border-color: var(--wt-violet-dk);
  --bs-btn-disabled-bg: var(--wt-violet);
  --bs-btn-disabled-border-color: var(--wt-violet);
}
.btn-outline-primary {
  --bs-btn-color: var(--wt-violet);
  --bs-btn-border-color: var(--wt-violet);
  --bs-btn-hover-bg: var(--wt-violet);
  --bs-btn-hover-border-color: var(--wt-violet);
  --bs-btn-active-bg: var(--wt-violet-dk);
  --bs-btn-active-border-color: var(--wt-violet-dk);
}
.btn-secondary {
  --bs-btn-bg: var(--wt-cream-3);
  --bs-btn-border-color: var(--wt-cream-3);
  --bs-btn-color: var(--wt-ink);
  --bs-btn-hover-bg: #dcdce1;
  --bs-btn-hover-border-color: #dcdce1;
  --bs-btn-hover-color: var(--wt-ink);
  --bs-btn-active-bg: #d0d0d6;
  --bs-btn-active-color: var(--wt-ink);
}
.bg-primary { background-color: var(--wt-violet) !important; }

/* Solid buttons carry a whisper of elevation and brighten on hover */
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark {
  box-shadow: var(--wt-shadow-xs);
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover,
.btn-warning:hover, .btn-info:hover, .btn-dark:hover {
  filter: brightness(1.05);
  box-shadow: var(--wt-shadow-sm);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger,
.btn-outline-success, .btn-outline-warning, .btn-outline-info, .btn-link {
  box-shadow: none;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-danger:hover,
.btn-outline-success:hover, .btn-outline-warning:hover, .btn-outline-info:hover {
  box-shadow: var(--wt-shadow-xs);
}
/* Tiny inline action buttons (edit/delete icons): keep them calm */
.btn.py-0 { padding-inline: .5rem; }
.btn.py-0:active { transform: none; }
/* Segmented controls (btn-check groups) read as one quiet pill */
.btn-group > .btn { box-shadow: none; }
.btn-group > .btn:active { transform: none; }

/* ---- Focus: crisp Apple-blue halo ---- */
.btn:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus,
.quick-status-select:focus, .btn-check:focus-visible + .btn {
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--wt-accent-rgb), .25);
  border-color: var(--wt-violet);
}

/* ---- Form controls ---- */
.form-control, .form-select {
  border-radius: var(--wt-radius-sm);
  border-color: var(--wt-line);
  transition: border-color .15s var(--wt-ease), box-shadow .15s var(--wt-ease),
              background-color .15s var(--wt-ease);
}
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: #aeaeb2; }
.form-control-sm, .form-select-sm { border-radius: 8px; }
.input-group-text {
  border-radius: var(--wt-radius-sm);
  background: var(--wt-cream);
  border-color: var(--wt-line);
  color: var(--wt-muted);
}
.form-check-input { transition: background-color .15s var(--wt-ease), border-color .15s var(--wt-ease); cursor: pointer; }
.form-check-input:checked { background-color: var(--wt-violet); border-color: var(--wt-violet); }
/* iOS-style switches */
.form-switch .form-check-input:checked { background-color: var(--sys-green); border-color: var(--sys-green); }

/* ---- Cards: borderless, softly lifted ---- */
.card {
  border: 1px solid rgba(0, 0, 0, .04);
  box-shadow: var(--wt-shadow-sm);
  border-radius: var(--wt-radius);
  background: var(--wt-surface);
}
.card-header {
  border-bottom: 1px solid var(--wt-line-soft);
  background: var(--wt-surface);
  border-radius: var(--wt-radius) var(--wt-radius) 0 0 !important;
  font-weight: 600;
  color: var(--wt-ink);
}
.card-footer { border-radius: 0 0 var(--wt-radius) var(--wt-radius); }
.shadow-sm { box-shadow: var(--wt-shadow-sm) !important; }
.shadow    { box-shadow: var(--wt-shadow) !important; }
.shadow-lg { box-shadow: var(--wt-shadow-lg) !important; }
/* Interactive tiles get a quiet hover lift */
.drill-card, .card[role="button"], a.card {
  transition: transform .18s var(--wt-ease), box-shadow .18s var(--wt-ease);
}
.drill-card:hover, .card[role="button"]:hover, a.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--wt-shadow);
}

/* Pillar cards */
.pillar-card {
  border-left: 3px solid var(--pillar-color, var(--wt-violet));
  transition: transform .15s, box-shadow .15s;
}
.pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--wt-shadow);
}
.pillar-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 980px;
  color: white;
}

/* Progress bars */
.progress {
  border-radius: 980px;
  background: var(--wt-cream-3);
}
.progress-bar { border-radius: 980px; background-color: var(--wt-violet); }

/* Status badges */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

/* Score stars — amber, like ratings */
.score-star { color: var(--sys-orange); }
.score-star.empty { color: var(--wt-line); }

/* Strategy tree */
.strategy-level {
  padding-left: 1.5rem;
  border-left: 2px solid var(--wt-line-soft);
  margin-left: 1rem;
}
.strategy-level:hover { border-left-color: var(--wt-violet); }
.level-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wt-muted);
}

/* Tables */
.table { --bs-table-border-color: var(--wt-line-soft); }
.table > :not(caption) > * > * { padding-block: .68rem; }
.table > thead th {
  font-weight: 600;
  color: var(--wt-muted);
  border-bottom: 1px solid var(--wt-line);
}
.table-hover > tbody > tr { transition: background-color .12s var(--wt-ease); }
.table-assessment th {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wt-muted);
  background: var(--wt-cream-2);
}
.table-assessment td {
  vertical-align: middle;
  font-size: 0.88rem;
}

/* ---- North star hero: deep black, blue aura ---- */
.northstar-hero {
  background:
    radial-gradient(120% 160% at 85% 0%, rgba(10, 132, 255, .22) 0%, rgba(10, 132, 255, 0) 55%),
    linear-gradient(180deg, #0b0b0f 0%, #1d1d1f 100%);
  color: white;
  border-radius: var(--wt-radius-lg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.northstar-hero h1, .northstar-hero h2, .northstar-hero h3 { color: #fff; }
.northstar-hero::after {
  content: '▲';
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8rem;
  color: rgba(10, 132, 255, 0.18);
  pointer-events: none;
}

/* Milestone status */
.milestone-pending { border-left: 3px solid var(--wt-line); }
.milestone-in_progress { border-left: 3px solid var(--wt-violet); }
.milestone-complete { border-left: 3px solid var(--sys-green); }
.milestone-at_risk { border-left: 3px solid var(--sys-red); }

/* Sidebar nav on pillar pages */
.cap-nav-item {
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 980px;
  color: var(--wt-muted);
  text-decoration: none;
  display: block;
  transition: background .1s, color .1s;
}
.cap-nav-item:hover { background: var(--wt-cream-3); color: var(--wt-ink); }
.cap-nav-item.active { background: rgba(var(--wt-accent-rgb), .10); color: var(--wt-violet); }

/* ---- Footer: quiet, light, hairline ---- */
.footer {
  background: transparent;
  color: var(--wt-muted);
  border-top: 1px solid var(--wt-line-soft);
  margin-top: auto;
}
.footer .text-muted { color: #86868b !important; }

/* Donut chart containers */
.chart-sm { max-width: 120px; }

/* Page headings */
.page-header {
  border-bottom: 1px solid var(--wt-line-soft);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.product-row:hover { background: var(--wt-cream); cursor: pointer; }

/* Inline quick-status select — iOS tint chips */
.quick-status-select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 980px;
  border: 1.5px solid currentColor;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  width: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236e6e73'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
  transition: box-shadow .15s;
}
.quick-status-select.status-not_assessed  { background-color: var(--wt-cream-3); color: #6e6e73; border-color: #c7c7cc; }
.quick-status-select.status-under_review  { background-color: #e8f1fd; color: var(--wt-violet-dk); border-color: var(--wt-violet); }
.quick-status-select.status-shortlisted   { background-color: #ececfe; color: var(--sys-indigo-text); border-color: var(--sys-indigo); }
.quick-status-select.status-selected      { background-color: #e4f7e9; color: var(--sys-green-text); border-color: var(--sys-green); }
.quick-status-select.status-on_hold       { background-color: #fff3e0; color: var(--sys-orange-text); border-color: var(--sys-orange); }
.quick-status-select.status-rejected      { background-color: #fdeae8; color: var(--sys-red-text); border-color: var(--sys-red); }
.quick-status-select.status-deferred      { background-color: var(--wt-cream-3); color: #6e6e73; border-color: #c7c7cc; }

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--wt-ink);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--wt-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Badges, alerts, list groups */
.badge { border-radius: 980px; font-weight: 600; letter-spacing: .01em; padding: .4em .72em; }
.alert { border-radius: var(--wt-radius-sm); border-color: transparent; }
.list-group { border-radius: var(--wt-radius-sm); }
.list-group-item:first-child { border-top-left-radius: var(--wt-radius-sm); border-top-right-radius: var(--wt-radius-sm); }
.list-group-item:last-child { border-bottom-left-radius: var(--wt-radius-sm); border-bottom-right-radius: var(--wt-radius-sm); }

/* Accordion overrides */
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 4px rgba(var(--wt-accent-rgb), .25);
  --bs-accordion-active-color: var(--wt-ink);
  --bs-accordion-border-color: var(--wt-line-soft);
}
.accordion-button:not(.collapsed) {
  background: var(--wt-cream-2);
  color: var(--wt-ink);
}
.accordion-button::after { flex-shrink: 0; }

/* ---- Tabs: quiet, underlined in accent blue ---- */
.nav-tabs { border-bottom-color: var(--wt-line-soft); }
.nav-tabs .nav-link { border: none; border-radius: 0; color: var(--wt-muted); font-weight: 500; padding: .5rem .9rem; transition: color .15s var(--wt-ease), box-shadow .15s var(--wt-ease); }
.nav-tabs .nav-link:hover { color: var(--wt-ink); border: none; }
.nav-tabs .nav-link.active {
  color: var(--wt-ink);
  background: transparent;
  border: none;
  box-shadow: inset 0 -2px 0 0 var(--wt-violet);
}
/* Pill nav variant */
.nav-pills .nav-link { border-radius: 980px; color: var(--wt-muted); font-weight: 500; }
.nav-pills .nav-link.active { background-color: var(--wt-violet); }

/* ---- Executive summary hero ---- */
.exec-hero {
  background:
    radial-gradient(110% 180% at 90% 110%, rgba(10, 132, 255, .20) 0%, rgba(10, 132, 255, 0) 55%),
    linear-gradient(150deg, #0b0b0f 0%, #17171a 55%, #26262a 100%);
  border-radius: var(--wt-radius-lg);
  color: white;
  position: relative;
  overflow: hidden;
}
.exec-hero h1, .exec-hero h2, .exec-hero h3, .exec-hero h4 { color: #fff; }
.exec-hero::before {
  content: '▲';
  position: absolute;
  right: -20px; bottom: -40px;
  font-size: 22rem;
  color: rgba(10, 132, 255, .08);
  pointer-events: none;
  line-height: 1;
}
.challenge-card {
  border-top: 3px solid var(--cc, var(--wt-violet));
  transition: transform .15s, box-shadow .15s;
}
.challenge-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wt-shadow);
}
.layer-box {
  border: 1px solid var(--wt-line-soft);
  border-radius: var(--wt-radius-sm);
  background: var(--wt-surface);
  padding: 1rem 1.5rem;
  position: relative;
}
.layer-box.active-layer {
  border-color: var(--wt-violet);
  background: linear-gradient(135deg, #eef5ff 0%, #fff 60%);
}
.layer-arrow {
  text-align: center;
  color: var(--wt-muted);
  font-size: 1.4rem;
  line-height: 1;
  margin: 4px 0;
}
.outcome-card { border-top: 3px solid var(--oc, var(--wt-violet)); }
.pillar-accordion .accordion-button { padding: 1rem 1.25rem; }
.pillar-accordion .accordion-button:not(.collapsed) { background: var(--wt-surface); }
.progress-ring-wrap {
  position: relative;
  width: 64px; height: 64px;
  flex-shrink: 0;
}
.progress-ring-wrap svg { transform: rotate(-90deg); }
.progress-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
}

@media print {
  .navbar, .footer, .btn, .accordion-button::after { display: none !important; }
  .accordion-collapse { display: block !important; }
  .exec-hero::before { display: none; }
  body { background: white; }
  .card { box-shadow: none; border: 1px solid var(--wt-line) !important; }
  .page-break { page-break-before: always; }
}

/* Roadmap legend */
.legend-block {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}

/* ---- AG-Grid theme: light, precise, blue accents ---- */
.ag-theme-alpine {
  --ag-font-family: var(--wt-font);
  --ag-font-size: 13px;
  --ag-background-color: var(--wt-surface);
  --ag-header-background-color: var(--wt-cream-2);
  --ag-odd-row-background-color: #fbfbfd;
  --ag-row-hover-color: var(--wt-cream);
  --ag-border-color: var(--wt-line-soft);
  --ag-header-foreground-color: var(--wt-muted);
  --ag-foreground-color: var(--wt-ink);
  --ag-cell-horizontal-border: solid var(--wt-line-soft);
  --ag-selected-row-background-color: #e8f1fd;
  --ag-range-selection-border-color: var(--wt-violet);
}
.ag-theme-alpine .ag-header-cell-label {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ag-theme-alpine .ag-row-group { font-weight: 700; }
/* Only colour actual year group headers — not the empty spacer cells above pinned columns */
.ag-theme-alpine .ag-header-group-cell:not(.ag-header-group-cell-no-group) {
  background: var(--wt-ink) !important;
  color: white !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  justify-content: center;
}
.ag-theme-alpine .ag-header-group-cell.ag-header-group-cell-no-group {
  background: var(--wt-cream-2) !important;
  border-bottom: 1px solid var(--wt-line-soft);
}
.ag-theme-alpine .ag-header-group-cell-label { justify-content: center; }
.current-month-header {
  background: rgba(var(--wt-accent-rgb), 0.10) !important;
  border-bottom: 3px solid var(--wt-violet) !important;
}
.year-group-header { text-align: center; }
.ag-theme-alpine .ag-cell { line-height: 36px; }

/* ════════════════════════════════════════════════════════════════════
   Darkmode — per-user appearance preference (html.theme-dark + data-bs-theme="dark")
   True Apple dark: near-black canvas, iOS grey surfaces, #0a84ff accent.
   ════════════════════════════════════════════════════════════════════ */
html.theme-dark {
  --wt-cream:     #0b0b0e;   /* page background */
  --wt-cream-2:   #151518;   /* raised tint */
  --wt-cream-3:   #2c2c2e;   /* subtle fill */
  --wt-line:      #38383a;   /* hairline border */
  --wt-line-soft: #2c2c2e;
  --wt-ink:       #f5f5f7;   /* primary text */
  --wt-ink-2:     #d1d1d6;
  --wt-muted:     #98989d;   /* secondary text */
  --wt-violet:    #0a84ff;   /* accent (iOS dark blue) */
  --wt-violet-dk: #0060df;
  --wt-surface:   #1c1c1e;   /* card surface */
  --wt-accent-rgb: 10, 132, 255;

  --bs-body-bg:        #0b0b0e;
  --bs-body-color:     #f5f5f7;
  --bs-border-color:   #2c2c2e;
  --bs-secondary-color: rgba(245,245,247,.65);
  color-scheme: dark;
}
html.theme-dark body { background: var(--wt-cream); color: var(--wt-ink); }

/* Surfaces */
html.theme-dark .card,
html.theme-dark .modal-content > .modal-body,
html.theme-dark .list-group-item,
html.theme-dark .accordion-item {
  background-color: var(--wt-surface);
  color: var(--wt-ink);
  border-color: rgba(255,255,255,.06);
}
html.theme-dark .card-header,
html.theme-dark .card-footer { background-color: rgba(255,255,255,.03); border-color: var(--wt-line-soft); }

/* Frosted dark navbar */
html.theme-dark .navbar {
  background: rgba(22, 22, 23, .72) !important;
  border-bottom-color: rgba(255, 255, 255, .10);
}
html.theme-dark .navbar .nav-link:hover,
html.theme-dark .navbar .nav-item.dropdown:hover > .nav-link {
  background-color: rgba(255, 255, 255, .10);
}
html.theme-dark .navbar .dropdown-menu {
  background-color: #1c1c1e !important;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
html.theme-dark .navbar .dropdown-item:hover,
html.theme-dark .navbar .dropdown-item:focus {
  background-color: rgba(255, 255, 255, .08) !important;
}
html.theme-dark .navbar .dropdown-divider { border-top-color: rgba(255,255,255,.10); }

/* Utility classes that don't auto-flip with Bootstrap's dark theme */
html.theme-dark .bg-white   { background-color: var(--wt-surface) !important; }
html.theme-dark .bg-light   { background-color: var(--wt-cream-3) !important; color: var(--wt-ink) !important; }
html.theme-dark .text-dark  { color: var(--wt-ink) !important; }
html.theme-dark .text-muted { color: var(--wt-muted) !important; }
html.theme-dark .border,
html.theme-dark .border-top,
html.theme-dark .border-bottom,
html.theme-dark .border-start,
html.theme-dark .border-end { border-color: var(--wt-line-soft) !important; }

/* Tables */
html.theme-dark .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--wt-ink);
  --bs-table-border-color: var(--wt-line-soft);
}
html.theme-dark .table-light,
html.theme-dark .table > thead.table-light th { background-color: var(--wt-cream-3); color: var(--wt-ink); }

/* Form controls outside modals */
html.theme-dark .form-control,
html.theme-dark .form-select {
  background-color: #1c1c1e;
  border-color: var(--wt-line);
  color: var(--wt-ink);
}
html.theme-dark .form-control::placeholder { color: var(--wt-muted); }

/* Footer */
html.theme-dark .footer { border-top-color: var(--wt-line-soft); }
html.theme-dark .footer .text-muted { color: var(--wt-muted) !important; }

/* ag-grid: dark Quartz palette */
html.theme-dark .ag-theme-quartz { --ag-background-color: #1c1c1e; --ag-foreground-color: #f5f5f7;
  --ag-header-background-color: #2c2c2e; --ag-odd-row-background-color: #18181a;
  --ag-border-color: #38383a; --ag-row-hover-color: #26262a; }

/* ── Darkmode: neutralise hard-coded LIGHT inline backgrounds & tiles ──
   Inline styles (e.g. style="background:#fff") can't be hit by class rules,
   so target them by attribute substring and force them onto dark surfaces.
   Coloured (brand/accent) inline backgrounds are left untouched. */
html.theme-dark [style*="background:#fff"],
html.theme-dark [style*="background: #fff"],
html.theme-dark [style*="background:#FFF"],
html.theme-dark [style*="background:white"],
html.theme-dark [style*="background: white"],
html.theme-dark [style*="background-color:#fff"],
html.theme-dark [style*="background-color: #fff"],
html.theme-dark [style*="background-color:white"],
html.theme-dark [style*="background:#f8fafc"],
html.theme-dark [style*="background: #f8fafc"],
html.theme-dark [style*="background:#f1f5f9"],
html.theme-dark [style*="background:#fafafa"],
html.theme-dark [style*="background:#f9fafb"],
html.theme-dark [style*="background:#f5f5f7"],
html.theme-dark [style*="background:#fafafc"],
html.theme-dark [style*="background:#e8e8ed"],
html.theme-dark [style*="background:#f5f0e6"],
html.theme-dark [style*="background:#f4efe8"],
html.theme-dark [style*="background:#ede8e0"] {
  background: var(--wt-surface) !important;
  background-color: var(--wt-surface) !important;
}
/* Light progress / bar tracks → dark track */
html.theme-dark [style*="background:#e2e8f0"],
html.theme-dark [style*="background: #e2e8f0"],
html.theme-dark [style*="background:#f1f5f9"] {
  background: #2c2c2e !important;
}
/* Light hairline borders declared inline */
html.theme-dark [style*="border-bottom:1px solid #e2e8f0"],
html.theme-dark [style*="border-top:1px solid #e2e8f0"],
html.theme-dark [style*="border:1px solid #e2e8f0"],
html.theme-dark [style*="border-top:1px solid #f1f5f9"] {
  border-color: var(--wt-line-soft) !important;
}
/* Bootstrap soft-tint utilities used as tiles */
html.theme-dark .bg-light,
html.theme-dark .bg-body,
html.theme-dark .bg-body-tertiary,
html.theme-dark .bg-body-secondary { background-color: var(--wt-cream-3) !important; color: var(--wt-ink) !important; }
html.theme-dark .badge.bg-light { color: var(--wt-ink) !important; border-color: var(--wt-line) !important; }
/* Alerts / info tiles that default to light */
html.theme-dark .alert-light,
html.theme-dark .alert-info,
html.theme-dark .alert-secondary { background-color: var(--wt-cream-3); border-color: var(--wt-line-soft); color: var(--wt-ink); }

/* Darkmode: collapsible card-header hovers */
html.theme-dark .pm-pillar-card .card-header:hover,
html.theme-dark .cap-card .card-header:hover,
html.theme-dark .card-header.collapse-toggle:hover,
html.theme-dark .collapse-toggle:hover,
html.theme-dark .drill-card:hover {
  background-color: #26262a !important;
}
/* ag-grid row hover */
html.theme-dark .ag-theme-quartz,
html.theme-dark .ag-theme-quartz-dark {
  --ag-row-hover-color: #26262a;
  --ag-selected-row-background-color: #1c3050;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .drill-card, .form-control, .form-select, .table-hover > tbody > tr { transition: none !important; }
  .btn:active, .drill-card:hover, .card[role="button"]:hover { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ⌘K command palette + navbar search pill + Admin Console
   ════════════════════════════════════════════════════════════════════ */
.nav-search-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  border: none; cursor: pointer;
  background: rgba(0, 0, 0, .05);
  color: var(--wt-muted);
  font-family: var(--wt-font); font-size: .85rem;
  border-radius: 980px;
  padding: .38rem .8rem;
  transition: background-color .15s var(--wt-ease), color .15s var(--wt-ease);
}
.nav-search-pill:hover { background: rgba(0, 0, 0, .09); color: var(--wt-ink); }
.nav-search-pill kbd {
  background: rgba(0, 0, 0, .06); color: var(--wt-muted);
  border-radius: 5px; padding: .05rem .32rem; font-size: .7rem;
  font-family: var(--wt-font);
}
html.theme-dark .nav-search-pill { background: rgba(255,255,255,.10); }
html.theme-dark .nav-search-pill:hover { background: rgba(255,255,255,.16); color: var(--wt-ink); }
html.theme-dark .nav-search-pill kbd { background: rgba(255,255,255,.10); }

.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 21000;
  background: rgba(0, 0, 0, .30);
}
.cmdk-panel {
  width: min(620px, 92vw);
  margin: 13vh auto 0;
  background: var(--wt-surface);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .30);
  overflow: hidden;
}
.cmdk-inputwrap {
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 1.15rem;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.cmdk-inputwrap .bi-search { color: var(--wt-muted); font-size: 1.05rem; }
.cmdk-inputwrap input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--wt-font); font-size: 1.08rem; color: var(--wt-ink);
}
.cmdk-inputwrap input::placeholder { color: #aeaeb2; }
.cmdk-inputwrap kbd {
  background: rgba(0,0,0,.06); color: var(--wt-muted);
  border-radius: 5px; padding: .1rem .4rem; font-size: .72rem; font-family: var(--wt-font);
}
.cmdk-results { max-height: 46vh; overflow-y: auto; padding: .45rem; }
.cmdk-group {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--wt-muted);
  padding: .55rem .65rem .25rem;
}
.cmdk-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .65rem;
  border-radius: 10px;
  cursor: pointer;
  color: var(--wt-ink);
}
.cmdk-item .bi { color: var(--wt-muted); font-size: .95rem; width: 1.1rem; text-align: center; }
.cmdk-item.sel { background: rgba(var(--wt-accent-rgb), .12); }
.cmdk-item.sel .bi, .cmdk-item.sel .cmdk-t { color: var(--wt-violet); }
.cmdk-t { font-weight: 500; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-s { margin-left: auto; color: var(--wt-muted); font-size: .78rem; flex-shrink: 0; padding-left: 1rem; }
.cmdk-empty { padding: 1.6rem; text-align: center; color: var(--wt-muted); font-size: .92rem; }
.cmdk-foot {
  display: flex; gap: 1.1rem; justify-content: flex-end;
  padding: .5rem .9rem;
  border-top: 1px solid rgba(0, 0, 0, .07);
  color: var(--wt-muted); font-size: .72rem;
}
.cmdk-foot kbd {
  background: rgba(0,0,0,.06); border-radius: 4px;
  padding: .02rem .3rem; font-size: .72rem; font-family: var(--wt-font);
}
html.theme-dark .cmdk-panel { background: #1c1c1e; border-color: rgba(255,255,255,.10); }
html.theme-dark .cmdk-inputwrap { border-bottom-color: rgba(255,255,255,.08); }
html.theme-dark .cmdk-inputwrap input { color: var(--wt-ink); }
html.theme-dark .cmdk-inputwrap kbd,
html.theme-dark .cmdk-foot kbd { background: rgba(255,255,255,.10); }
html.theme-dark .cmdk-foot { border-top-color: rgba(255,255,255,.08); }

/* ---- Admin Console ---- */
.ac-rail {
  position: sticky; top: 84px;
  width: 205px; flex-shrink: 0;
}
.ac-rail-title {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--wt-muted);
  padding: 0 .8rem .45rem;
}
.ac-rail-link {
  display: block;
  padding: .42rem .8rem;
  border-radius: 980px;
  color: var(--wt-ink);
  font-size: .9rem;
  transition: background-color .12s var(--wt-ease);
}
.ac-rail-link:hover { background: rgba(0, 0, 0, .05); color: var(--wt-ink); }
html.theme-dark .ac-rail-link:hover { background: rgba(255, 255, 255, .08); }
.ac-section {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--wt-muted);
  margin-bottom: .65rem;
  scroll-margin-top: 90px;
}
.ac-card { color: inherit; display: block; }
a.ac-card:hover { color: inherit; }
.ac-tile {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--tile, var(--wt-violet));
  color: #fff; font-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.ac-action { color: var(--wt-violet); font-weight: 500; }
.ac-switch-row { cursor: pointer; border-radius: 8px; padding-inline: .4rem; }
.ac-switch-row:hover { background: rgba(0, 0, 0, .04); }
html.theme-dark .ac-switch-row:hover { background: rgba(255, 255, 255, .06); }

/* ---- Portfolio navigator (the Strategy Manager dropdown) ---- */
.dm-menu { padding-bottom: .3rem !important; }
.dm-search-wrap {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(0, 0, 0, .05);
  border-radius: 10px;
  padding: .42rem .7rem;
}
.dm-search-wrap .bi { color: var(--wt-muted); font-size: .85rem; }
.dm-search-wrap input {
  border: 0; outline: 0; background: transparent; flex: 1;
  font-family: var(--wt-font); font-size: .88rem; color: var(--wt-ink);
}
.dm-search-wrap input::placeholder { color: #aeaeb2; }
.dm-search-wrap:focus-within {
  background: var(--wt-surface);
  box-shadow: 0 0 0 3px rgba(var(--wt-accent-rgb), .22);
}

/* Department accordion heads — quiet small caps with a count pill */
.dm-menu .dm-dept-head {
  background: transparent; border: 0; cursor: pointer;
  border-radius: 8px;
  color: var(--wt-muted);
  padding-block: .42rem !important;
  transition: background-color .12s var(--wt-ease), color .12s var(--wt-ease);
}
.dm-menu .dm-dept-head:hover { background: rgba(0, 0, 0, .05); color: var(--wt-ink); }
.dm-dept-name {
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.dm-count {
  display: inline-block; min-width: 1.5rem; text-align: center;
  background: var(--wt-cream-3); color: var(--wt-muted);
  font-size: .7rem; font-weight: 600;
  border-radius: 980px; padding: .1rem .45rem;
}
.dm-menu .dm-dept.open > .dm-dept-head { color: var(--wt-ink); }
.dm-menu .dm-dept.open > .dm-dept-head .dm-chev { transform: rotate(180deg); }
.dm-menu .dm-chev { transition: transform .15s ease; color: var(--wt-muted); }

/* Portfolio rows — primary entries with a blue target glyph */
.dm-menu .dm-port {
  color: var(--wt-ink) !important;
  font-size: .9rem; font-weight: 600;
  border-radius: 8px;
  margin-inline: .3rem;
  padding-block: .38rem;
  cursor: pointer;
}
.dm-menu .dm-port:hover { background: rgba(0, 0, 0, .05); }
.dm-menu .dm-port .bi-bullseye { color: var(--wt-violet); font-size: .85rem; }
.dm-port-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Program rows — indented, with a blue code chip */
.dm-code {
  display: inline-block; min-width: 1.7rem; text-align: center; flex-shrink: 0;
  background: rgba(var(--wt-accent-rgb), .12);
  color: var(--wt-violet);
  font-size: .7rem; font-weight: 700;
  border-radius: 6px; padding: .16rem .4rem;
  font-variant-numeric: tabular-nums;
}
.dm-menu .dm-item { font-size: .88rem; }
.dm-menu .dm-item:hover .dm-code { background: rgba(var(--wt-accent-rgb), .2); }
.dm-menu .dm-port-group + .dm-port-group { margin-top: .15rem; }

/* Scrollbar */
.dm-menu .dm-scroll::-webkit-scrollbar { width: 8px; }
.dm-menu .dm-scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .16); border-radius: 4px; }

/* Dark mode */
html.theme-dark .dm-search-wrap { background: rgba(255, 255, 255, .08); }
html.theme-dark .dm-search-wrap:focus-within { background: #1c1c1e; }
html.theme-dark .dm-search-wrap input { color: var(--wt-ink); }
html.theme-dark .dm-menu .dm-dept-head:hover,
html.theme-dark .dm-menu .dm-port:hover { background: rgba(255, 255, 255, .08); }
html.theme-dark .dm-count { background: rgba(255, 255, 255, .10); }
html.theme-dark .dm-menu .dm-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }

/* ════════════════════════════════════════════════════════════════════
   UNIFORMITY LAYER — every page, one language
   Global polish for components the sub-pages use ad hoc, so modals,
   pagination, tooltips, toasts and the odd button variants all match
   the design system without per-page edits.
   ════════════════════════════════════════════════════════════════════ */

/* ---- Modals: rounded, borderless, floating ---- */
.modal-content {
  border: none;
  border-radius: var(--wt-radius);
  box-shadow: var(--wt-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--wt-line-soft); }
.modal-footer { border-top: 1px solid var(--wt-line-soft); }
.modal-title { font-weight: 600; letter-spacing: -0.01em; }
.modal-backdrop.show { opacity: .35; }
html.theme-dark .modal-content { background: var(--wt-surface); color: var(--wt-ink); }
html.theme-dark .modal-header, html.theme-dark .modal-footer { border-color: var(--wt-line-soft); }

/* ---- Button variants the pages reach for ---- */
.btn-dark {
  --bs-btn-bg: var(--wt-ink);
  --bs-btn-border-color: var(--wt-ink);
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-bg: #000;
}
html.theme-dark .btn-dark {
  --bs-btn-bg: var(--wt-cream-3);
  --bs-btn-border-color: var(--wt-cream-3);
  --bs-btn-color: var(--wt-ink);
  --bs-btn-hover-bg: #3a3a3c;
  --bs-btn-hover-border-color: #3a3a3c;
  --bs-btn-hover-color: var(--wt-ink);
}
.btn-outline-secondary {
  --bs-btn-color: var(--wt-ink);
  --bs-btn-border-color: var(--wt-line);
  --bs-btn-hover-bg: var(--wt-cream-3);
  --bs-btn-hover-border-color: var(--wt-line);
  --bs-btn-hover-color: var(--wt-ink);
  --bs-btn-active-bg: var(--wt-cream-3);
  --bs-btn-active-border-color: var(--wt-line);
  --bs-btn-active-color: var(--wt-ink);
}
.btn-outline-dark {
  --bs-btn-color: var(--wt-ink);
  --bs-btn-border-color: var(--wt-line);
  --bs-btn-hover-bg: var(--wt-ink);
  --bs-btn-hover-border-color: var(--wt-ink);
}
.btn-light {
  --bs-btn-bg: var(--wt-cream-3);
  --bs-btn-border-color: var(--wt-cream-3);
  --bs-btn-color: var(--wt-ink);
  --bs-btn-hover-bg: #dcdce1;
  --bs-btn-hover-border-color: #dcdce1;
}
.btn-success { --bs-btn-bg: var(--sys-green); --bs-btn-border-color: var(--sys-green); --bs-btn-hover-bg: #2eb350; --bs-btn-hover-border-color: #2eb350; }
.btn-danger  { --bs-btn-bg: var(--sys-red); --bs-btn-border-color: var(--sys-red); --bs-btn-hover-bg: #e63529; --bs-btn-hover-border-color: #e63529; }
.btn-warning { --bs-btn-bg: var(--sys-orange); --bs-btn-border-color: var(--sys-orange); --bs-btn-hover-bg: #e68600; --bs-btn-hover-border-color: #e68600; color: #fff; }
.btn-warning:hover { color: #fff; }

/* ---- Badges: soft tints instead of loud solids ---- */
.badge.bg-secondary { background-color: var(--wt-cream-3) !important; color: var(--wt-muted) !important; }
.badge.bg-light { background-color: var(--wt-cream-3) !important; color: var(--wt-muted) !important; }
.badge.bg-danger { background-color: var(--sys-red) !important; }
.badge.bg-success { background-color: var(--sys-green) !important; }
.badge.bg-warning { background-color: var(--sys-orange) !important; }
.badge.bg-info { background-color: #30b0c7 !important; }

/* ---- Pagination: pill segments ---- */
.pagination { --bs-pagination-border-radius: 980px; gap: .25rem; }
.pagination .page-link {
  border: none; border-radius: 980px;
  color: var(--wt-ink); font-weight: 500;
  padding: .38rem .8rem;
}
.pagination .page-link:hover { background: var(--wt-cream-3); }
.pagination .page-item.active .page-link { background: var(--wt-violet); color: #fff; }
.pagination .page-item.disabled .page-link { background: transparent; color: var(--wt-line); }

/* ---- Tooltips, popovers, toasts ---- */
.tooltip .tooltip-inner {
  background: rgba(29, 29, 31, .96);
  border-radius: 8px;
  padding: .4rem .65rem;
  font-family: var(--wt-font); font-size: .78rem;
}
.popover {
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 12px;
  box-shadow: var(--wt-shadow);
  font-family: var(--wt-font);
}
.popover-header { background: var(--wt-cream-2); border-bottom-color: var(--wt-line-soft); border-radius: 12px 12px 0 0; font-weight: 600; }
.toast {
  border: none; border-radius: var(--wt-radius-sm);
  box-shadow: var(--wt-shadow);
  background: rgba(255, 255, 255, .97);
}
html.theme-dark .toast { background: #2c2c2e; color: var(--wt-ink); }
.toast-header { border-bottom-color: var(--wt-line-soft); background: transparent; }

/* ---- Breadcrumbs ---- */
.breadcrumb { --bs-breadcrumb-divider-color: var(--wt-line); font-size: .85rem; }
.breadcrumb-item a { color: var(--wt-muted); }
.breadcrumb-item a:hover { color: var(--wt-violet); }
.breadcrumb-item.active { color: var(--wt-ink); font-weight: 500; }

/* ---- Forms & misc ---- */
.form-label { font-weight: 500; font-size: .85rem; color: var(--wt-ink-2); }
hr { border-top-color: var(--wt-line-soft); opacity: 1; }
kbd {
  background: var(--wt-cream-3); color: var(--wt-muted);
  border-radius: 5px; font-family: var(--wt-font); font-size: .78em;
  padding: .12em .4em; box-shadow: none;
}
.btn-close:focus { box-shadow: 0 0 0 4px rgba(var(--wt-accent-rgb), .25); }
::selection { background: rgba(var(--wt-accent-rgb), .22); }

/* Offcanvas panels */
.offcanvas { border: none !important; box-shadow: var(--wt-shadow-lg); }
html.theme-dark .offcanvas { background: var(--wt-surface); color: var(--wt-ink); }

/* Right-cluster navbar menus (department switcher, user menu) hang from the
   right edge of their trigger, so they never drift or overflow the viewport. */
.navbar .dropdown-menu-end,
.navbar .navbar-nav:last-child .dropdown-menu {
  right: 0 !important;
  left: auto !important;
}