/* Cannaplus cockpit - the design system (Step 3, 2026-09-16).

   One token set, both themes. Bootstrap 5.3 stays for the grid, forms, modals
   and utilities; everything it paints is re-pointed at these tokens so every
   page changes at once. Component rules below replace Bootstrap's coloured
   defaults with one panel, one button family and semantic chips.

   Colour is a signal: --good / --watch / --crit / --info only. The accent
   (--leaf) is for the one primary action and the current navigation item. */

:root, [data-bs-theme="light"] {
  --paper: #F4F6F3; --surface: #FFFFFF; --ink: #172119; --muted: #66746B; --hair: #D9E0DA; --hair-strong: #C4CEC7;
  --leaf: #1E6A48; --leaf-hover: #175539; --leaf-ink: #FFFFFF; --leaf-tint: #E5F0EA; --leaf-tint-ink: #17563A;
  --good: #23825A; --good-tint: #E3F2EA; --watch: #A6731C; --watch-tint: #F7EDD8; --crit: #B3382E; --crit-tint: #F8E4E1; --info: #4B6F87; --info-tint: #E4ECF2;
  --rail: #10201A; --rail-ink: #C9D6CE; --rail-ink-strong: #FFFFFF; --rail-active: rgba(255,255,255,.10); --rail-hair: rgba(255,255,255,.08);
  --code-bg: #EEF2EF; --focus: #6BC29A; --shadow: 0 8px 24px rgba(23,33,25,.10);
  --sans: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Bootstrap re-pointed at the tokens */
  --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-body-font-family: var(--sans); --bs-body-font-size: .875rem; --bs-body-line-height: 1.45;
  --bs-secondary-color: var(--muted); --bs-tertiary-color: var(--muted); --bs-border-color: var(--hair); --bs-border-color-translucent: var(--hair);
  --bs-tertiary-bg: var(--code-bg); --bs-secondary-bg: var(--code-bg); --bs-light: var(--code-bg); --bs-light-rgb: 238, 242, 239;
  --bs-primary: var(--leaf); --bs-primary-rgb: 30, 106, 72; --bs-link-color: var(--leaf); --bs-link-color-rgb: 30, 106, 72; --bs-link-hover-color: var(--leaf-hover); --bs-link-hover-color-rgb: 23, 85, 57;
  --bs-success: var(--good); --bs-success-rgb: 35, 130, 90; --bs-warning: var(--watch); --bs-warning-rgb: 166, 115, 28; --bs-danger: var(--crit); --bs-danger-rgb: 179, 56, 46; --bs-info: var(--info); --bs-info-rgb: 75, 111, 135;
  --bs-border-radius: .375rem; --bs-border-radius-sm: .3rem; --bs-border-radius-lg: .5rem; --bs-font-monospace: var(--mono);
  --bs-heading-color: var(--ink); --bs-emphasis-color: var(--ink);
}
[data-bs-theme="dark"] {
  --paper: #101613; --surface: #171F1A; --ink: #E6ECE7; --muted: #93A198; --hair: #263029; --hair-strong: #35423A;
  --leaf: #6BC29A; --leaf-hover: #86D2AE; --leaf-ink: #0F1A14; --leaf-tint: #1B3328; --leaf-tint-ink: #9FDBC0;
  --good: #5CC08F; --good-tint: #183226; --watch: #D9A24A; --watch-tint: #3A2E15; --crit: #E07A6F; --crit-tint: #3D1E1A; --info: #7FA6C0; --info-tint: #1C2A33;
  --rail: #0B120E; --rail-ink: #A9B8AF; --rail-ink-strong: #FFFFFF; --rail-active: rgba(255,255,255,.08); --rail-hair: rgba(255,255,255,.07);
  --code-bg: #1F2923; --focus: #6BC29A; --shadow: 0 8px 24px rgba(0,0,0,.45);
  --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-secondary-color: var(--muted); --bs-tertiary-color: var(--muted);
  --bs-border-color: var(--hair); --bs-border-color-translucent: var(--hair); --bs-tertiary-bg: var(--code-bg); --bs-secondary-bg: var(--code-bg);
  --bs-light: var(--code-bg); --bs-light-rgb: 31, 41, 35; --bs-primary: var(--leaf); --bs-primary-rgb: 107, 194, 154;
  --bs-link-color: var(--leaf); --bs-link-color-rgb: 107, 194, 154; --bs-link-hover-color: var(--leaf-hover); --bs-link-hover-color-rgb: 134, 210, 174;
  --bs-success: var(--good); --bs-success-rgb: 92, 192, 143; --bs-warning: var(--watch); --bs-warning-rgb: 217, 162, 74; --bs-danger: var(--crit); --bs-danger-rgb: 224, 122, 111; --bs-info: var(--info); --bs-info-rgb: 127, 166, 192;
  --bs-heading-color: var(--ink); --bs-emphasis-color: var(--ink);
}

/* ------------------------------------------------------------------ base */
html { height: 100%; }
body { min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: .875rem; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
h1, .h1 { font-size: 1.5rem; } h2, .h2 { font-size: 1.25rem; } h3, .h3 { font-size: 1.125rem; } h4, .h4, h5, .h5 { font-size: 1rem; } h6, .h6 { font-size: .9rem; }
.h3.mb-0, h1.h3 { font-size: 1.375rem; }
code, kbd, pre, .font-monospace, .mono { font-family: var(--mono) !important; font-size: .92em; }
code { color: var(--ink); background: var(--code-bg); padding: .05em .3em; border-radius: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none !important; }
.num, .text-end, td.text-end, th.text-end { font-variant-numeric: tabular-nums; }
a { text-decoration: none; } a:hover { text-decoration: underline; }
.text-muted, .text-body-secondary, .text-body-tertiary, .form-text, .small.text-muted { color: var(--muted) !important; }
.text-success { color: var(--good) !important; } .text-warning, .text-warning-emphasis { color: var(--watch) !important; } .text-danger, .text-danger-emphasis { color: var(--crit) !important; } .text-primary { color: var(--leaf) !important; } .text-info { color: var(--info) !important; }
.bg-light { background: var(--code-bg) !important; } .bg-white { background: var(--surface) !important; }
hr { border-color: var(--hair); opacity: 1; }

/* --------------------------------------------------------- app shell */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
/* pages without a menu (sign-in, setup, no-access): no column is reserved for the rail */
.shell.no-rail { grid-template-columns: minmax(0, 1fr); }
.shell.no-rail .content { max-width: none; }
.rail { background: var(--rail); color: var(--rail-ink); padding: 14px 10px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.rail .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: var(--rail-ink-strong); font-weight: 600; font-size: 15px; letter-spacing: -.01em; text-decoration: none; }
.rail .brand i.mark { width: 26px; height: 26px; border-radius: 6px; background: var(--leaf); position: relative; flex: none; }
.rail .brand i.mark::after { content: ""; position: absolute; inset: 7px 6px 6px 7px; border-radius: 50% 0 50% 0; background: #fff; opacity: .9; }
.rail .grp { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; padding: 12px 8px 4px; color: var(--rail-ink); opacity: .55; }
.rail a.item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; color: var(--rail-ink); font-size: 13.5px; text-decoration: none; }
.rail a.item:hover { background: var(--rail-active); color: var(--rail-ink-strong); text-decoration: none; }
.rail a.item.on { background: var(--rail-active); color: var(--rail-ink-strong); }
.rail a.item .bi { font-size: 15px; opacity: .85; width: 18px; text-align: center; }
.rail a.item .cnt { margin-left: auto; font-family: var(--mono); font-size: 11px; background: var(--crit); color: #fff; padding: 1px 6px; border-radius: 10px; }
.rail a.item .cnt.warn { background: var(--watch); }
.rail .foot { margin-top: auto; padding: 12px 8px 0; font-size: 11.5px; opacity: .6; border-top: 1px solid var(--rail-hair); }
.rail .foot a { color: inherit; }
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 20px; background: var(--surface); border-bottom: 1px solid var(--hair); position: sticky; top: 0; z-index: 1020; }
.topbar .burger { display: none; }
.topbar .search-wrap { flex: 1; max-width: 560px; position: relative; }
.topbar .search-wrap .form-control { background: var(--paper); border-color: var(--hair-strong); padding-left: 2rem; }
.topbar .search-wrap .bi-search { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.topbar .search-wrap kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font: 11px var(--mono); border: 1px solid var(--hair-strong); border-radius: 4px; padding: 1px 5px; color: var(--muted); background: var(--surface); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.credits { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); text-decoration: none !important; }
.credits .bar { width: 64px; height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.credits .bar i { display: block; height: 100%; background: var(--leaf); }
.credits.warn .bar i { background: var(--watch); } .credits.low .bar i { background: var(--crit); }
.credits b { color: var(--ink); font-weight: 500; font-family: var(--mono); font-size: 12px; }
.credits.stale { opacity: .65; }
.clock { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--leaf-tint); color: var(--leaf-tint-ink); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.content { padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 18px; max-width: 1360px; width: 100%; }
.content > .container, .content > .container-fluid { padding: 0; max-width: none; }
.content .container.py-4 { padding-block: 0 !important; }
@media (max-width: 991.98px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: fixed; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%); transition: transform .18s; z-index: 1040; }
  .rail.open { transform: none; box-shadow: var(--shadow); }
  .topbar .burger { display: inline-flex; }
  .topbar .clock { display: none; }
  .content { padding: 16px 16px 32px; }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* collapsed rail: icons only, labels as tooltips (desktop; the mobile drawer is unaffected) */
.rail-collapse { display: flex; align-items: center; justify-content: center; width: 100%; border: 0; background: transparent; color: var(--rail-ink); padding: 4px 8px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; opacity: .7; }
.rail-collapse:hover { opacity: 1; background: var(--rail-active); }
@media (min-width: 992px) {
  html.rail-mini .shell { grid-template-columns: 64px minmax(0, 1fr); }
  html.rail-mini .rail { padding: 14px 8px 12px; overflow-x: hidden; }
  html.rail-mini .rail .brand { justify-content: center; padding: 6px 0 10px; font-size: 0; }
  html.rail-mini .rail .grp { font-size: 0; height: 1px; margin: 8px 6px 4px; padding: 0; background: var(--rail-hair); opacity: 1; }
  html.rail-mini .rail a.item { justify-content: center; padding: 9px 0; font-size: 0; gap: 0; position: relative; }
  html.rail-mini .rail a.item .bi { font-size: 18px; width: auto; }
  html.rail-mini .rail a.item .bi.bi-chevron-down, html.rail-mini .rail a.item .bi.bi-dot { display: none; }
  html.rail-mini .rail a.item .cnt { position: absolute; top: 4px; right: 8px; font-size: 0; width: 8px; height: 8px; padding: 0; border-radius: 50%; margin: 0; }
  html.rail-mini .rail #rail-scrapers { display: none !important; }
  html.rail-mini .rail .foot { display: none; }
  html.rail-mini .rail-collapse .bi { transform: rotate(180deg); }
}

/* page header pattern */
.page-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.page-head > div:first-child { flex: 1 1 380px; min-width: 0; }
.page-head h1 { font-size: 1.375rem; margin: 0; }
.page-head .meta { color: var(--muted); font-size: 13px; margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; }
.page-head .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.updated { font-size: 12px; color: var(--muted); }

/* ----------------------------------------------------------- panels */
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: 6px; box-shadow: none !important; --bs-card-cap-bg: transparent; --bs-card-border-color: var(--hair); }
.card-header { background: transparent; border-bottom: 1px solid var(--hair); font-weight: 600; font-size: 13.5px; padding: .6rem .9rem; color: var(--ink); }
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-info, .card-header.bg-warning, .card-header.bg-danger, .card-header.bg-dark, .card-header.bg-secondary, .card-header.text-white, .card-header.text-bg-primary, .card-header.text-bg-success, .card-header.text-bg-dark {
  background: transparent !important; color: var(--ink) !important;
}
.card-header .btn-close-white { filter: none; }
.card.border-primary, .card.border-success, .card.border-info, .card.border-warning, .card.border-secondary { border-color: var(--hair) !important; }
.card.border-danger { border-color: var(--crit) !important; }
.card-body { padding: .9rem; }
.card.shadow, .card.shadow-sm, .shadow, .shadow-sm { box-shadow: none !important; }
.list-group { --bs-list-group-bg: var(--surface); --bs-list-group-border-color: var(--hair); --bs-list-group-color: var(--ink); --bs-list-group-action-hover-bg: var(--code-bg); --bs-list-group-action-hover-color: var(--ink); --bs-list-group-active-bg: var(--leaf); --bs-list-group-active-border-color: var(--leaf); }
.modal-content { background: var(--surface); border: 1px solid var(--hair); color: var(--ink); }
.modal-header, .modal-footer { border-color: var(--hair); }
.dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--hair-strong); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--code-bg); --bs-dropdown-link-hover-color: var(--ink); --bs-dropdown-link-active-bg: var(--leaf); box-shadow: var(--shadow); }
.dropdown-header { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.accordion { --bs-accordion-bg: var(--surface); --bs-accordion-border-color: var(--hair); --bs-accordion-active-bg: var(--leaf-tint); --bs-accordion-active-color: var(--leaf-tint-ink); --bs-accordion-btn-color: var(--ink); --bs-accordion-btn-focus-box-shadow: none; }
.offcanvas { background: var(--surface); color: var(--ink); }
.tooltip { --bs-tooltip-bg: var(--ink); --bs-tooltip-color: var(--paper); }
.popover { --bs-popover-bg: var(--surface); --bs-popover-border-color: var(--hair-strong); --bs-popover-body-color: var(--ink); }
.toast { background: var(--surface); border-color: var(--hair-strong); color: var(--ink); }

/* KPI strip: one bordered object, not a row of cards */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--hair); background: var(--surface); border-radius: 6px; overflow: hidden; }
.kpis .kpi { padding: 12px 16px; border-right: 1px solid var(--hair); min-width: 0; }
.kpis .kpi:last-child { border-right: 0; }
.kpi .l { font-size: 12px; color: var(--muted); }
.kpi .v { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi .v small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.kpi .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.crit .v { color: var(--crit); } .kpi.watch .v { color: var(--watch); } .kpi.good .v { color: var(--good); }

/* guidance folds away */
details.guide { font-size: 12.5px; color: var(--muted); }
details.guide summary { cursor: pointer; color: var(--leaf); font-weight: 500; list-style: none; display: inline-block; }
details.guide summary::-webkit-details-marker { display: none; }
details.guide summary::before { content: "▸ "; } details.guide[open] summary::before { content: "▾ "; }
details.guide > :not(summary) { margin-top: 6px; max-width: 78ch; }
details.guide ul, details.guide ol { padding-left: 1.2rem; margin-bottom: 0; }

/* ---------------------------------------------------------- buttons */
.btn { --bs-btn-font-weight: 500; --bs-btn-font-size: .8125rem; --bs-btn-padding-y: .42rem; --bs-btn-padding-x: .75rem; --bs-btn-border-radius: 6px; --bs-btn-focus-box-shadow: none; }
.btn-sm { --bs-btn-font-size: .78rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .6rem; }
.btn-lg { --bs-btn-font-size: .9rem; }
/* one primary, everything else neutral; destructive stays red; success/warning/info/secondary/dark/light collapse to neutral */
.btn-primary, .btn-success { --bs-btn-bg: var(--leaf); --bs-btn-border-color: var(--leaf); --bs-btn-color: var(--leaf-ink); --bs-btn-hover-bg: var(--leaf-hover); --bs-btn-hover-border-color: var(--leaf-hover); --bs-btn-hover-color: var(--leaf-ink); --bs-btn-active-bg: var(--leaf-hover); --bs-btn-active-border-color: var(--leaf-hover); --bs-btn-active-color: var(--leaf-ink); --bs-btn-disabled-bg: var(--leaf); --bs-btn-disabled-border-color: var(--leaf); --bs-btn-disabled-color: var(--leaf-ink); }
.btn-secondary, .btn-info, .btn-warning, .btn-dark, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-dark, .btn-outline-light {
  --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--hair-strong); --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--code-bg); --bs-btn-hover-border-color: var(--hair-strong); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--code-bg); --bs-btn-active-border-color: var(--hair-strong); --bs-btn-active-color: var(--ink); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--hair); --bs-btn-disabled-color: var(--muted);
}
.btn-danger { --bs-btn-bg: var(--crit); --bs-btn-border-color: var(--crit); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--crit); --bs-btn-hover-border-color: var(--crit); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--crit); --bs-btn-active-color: #fff; }
.btn-outline-danger { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--hair-strong); --bs-btn-color: var(--crit); --bs-btn-hover-bg: var(--crit-tint); --bs-btn-hover-border-color: var(--crit); --bs-btn-hover-color: var(--crit); --bs-btn-active-bg: var(--crit-tint); --bs-btn-active-color: var(--crit); }
.btn-link { --bs-btn-color: var(--leaf); --bs-btn-hover-color: var(--leaf-hover); }
.btn-check:checked + .btn, .btn.active { background: var(--leaf) !important; border-color: var(--leaf) !important; color: var(--leaf-ink) !important; }
.btn-group .btn { --bs-btn-border-radius: 6px; }
.nav-pills .nav-link { color: var(--ink); } .nav-pills .nav-link.active { background: var(--leaf); color: var(--leaf-ink); }
.nav-tabs { --bs-nav-tabs-border-color: var(--hair); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent transparent var(--leaf); --bs-nav-tabs-link-active-color: var(--ink); --bs-nav-link-color: var(--muted); --bs-nav-link-hover-color: var(--ink); --bs-nav-tabs-link-hover-border-color: transparent; }
.nav-tabs .nav-link { border-bottom-width: 2px; font-weight: 500; }
.nav-tabs .nav-link.active { border-bottom: 2px solid var(--leaf); }

/* ------------------------------------------------------------ forms */
.form-control, .form-select { background: var(--surface); border-color: var(--hair-strong); color: var(--ink); font-size: .875rem; }
.form-control:focus, .form-select:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-tint); background: var(--surface); color: var(--ink); }
.form-control::placeholder { color: var(--muted); }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2366746B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-label, label { font-size: 12.5px; color: var(--muted); }
.form-check-input { border-color: var(--hair-strong); background-color: var(--surface); }
.form-check-input:checked { background-color: var(--leaf); border-color: var(--leaf); }
.form-check-input:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-tint); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C4CEC7'/%3e%3c/svg%3e"); }
.input-group-text { background: var(--code-bg); border-color: var(--hair-strong); color: var(--muted); font-size: .8125rem; }

/* ----------------------------------------------------------- tables */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--hair); --bs-table-striped-bg: var(--paper); --bs-table-striped-color: var(--ink); --bs-table-hover-bg: var(--code-bg); --bs-table-hover-color: var(--ink); font-size: 13px; }
.table > :not(caption) > * > * { padding: .5rem .65rem; }
.table thead th, .table-light th, .table > thead > tr > th, .table .table-light > th { background: var(--surface) !important; color: var(--muted) !important; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.table-light, .table-secondary, .table-primary, .table-info { --bs-table-bg: var(--code-bg); --bs-table-color: var(--ink); }
.table-success { --bs-table-bg: var(--good-tint); --bs-table-color: var(--ink); } .table-warning { --bs-table-bg: var(--watch-tint); --bs-table-color: var(--ink); } .table-danger { --bs-table-bg: var(--crit-tint); --bs-table-color: var(--ink); }
.table-sm > :not(caption) > * > * { padding: .35rem .55rem; }
.table-responsive { border-radius: 0; }
.table tbody tr.base td { background: var(--leaf-tint); }
.table .action-increase { border-left: 3px solid var(--info); } .table .action-decrease { border-left: 3px solid var(--crit); } .table .action-keep { border-left: 3px solid var(--good); } .table .action-review { border-left: 3px solid var(--watch); }
.table-responsive { overflow-x: auto; }

/* ------------------------------------------------------------ chips */
.badge { font-weight: 500; font-size: 11.5px; letter-spacing: 0; padding: .28em .6em; border-radius: 999px; line-height: 1.5; }
.badge.bg-success, .badge.text-bg-success { background: var(--good-tint) !important; color: var(--good) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--watch-tint) !important; color: var(--watch) !important; }
.badge.bg-danger, .badge.text-bg-danger { background: var(--crit-tint) !important; color: var(--crit) !important; }
.badge.bg-info, .badge.text-bg-info, .badge.bg-primary, .badge.text-bg-primary { background: var(--info-tint) !important; color: var(--info) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light, .badge.bg-dark, .badge.text-bg-dark { background: var(--code-bg) !important; color: var(--muted) !important; }
.badge.rounded-pill { border-radius: 999px; }
.rail .cnt, .nav .badge.bg-danger { background: var(--crit) !important; color: #fff !important; }

/* ----------------------------------------------------------- alerts */
.alert { border: 1px solid var(--hair); border-left-width: 3px; background: var(--surface); color: var(--ink); border-radius: 6px; padding: .6rem .9rem; font-size: 13px; }
.alert-info, .alert-primary, .alert-secondary, .alert-light { border-left-color: var(--info); }
.alert-success { border-left-color: var(--good); } .alert-warning { border-left-color: var(--watch); } .alert-danger { border-left-color: var(--crit); background: var(--crit-tint); }
.alert-heading { font-size: 13.5px; font-weight: 600; }
.alert .btn-close { filter: none; }
.alert ul, .alert ol { margin-bottom: 0; padding-left: 1.2rem; }

/* ------------------------------------------------------ progress etc. */
.progress { --bs-progress-bg: var(--hair); --bs-progress-bar-bg: var(--leaf); height: .6rem; }
.pagination { --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--hair-strong); --bs-pagination-color: var(--ink); --bs-pagination-hover-bg: var(--code-bg); --bs-pagination-hover-color: var(--ink); --bs-pagination-active-bg: var(--leaf); --bs-pagination-active-border-color: var(--leaf); --bs-pagination-focus-box-shadow: none; --bs-pagination-disabled-bg: var(--surface); --bs-pagination-disabled-color: var(--muted); }
.spinner-border { color: var(--leaf); }
.border-purple { border-color: var(--hair) !important; }
.flash-container { margin-bottom: 0; }
.notes-pin, #notes-toggle { z-index: 1030; }

/* --------------------------------------------------------- printing */
@media print { .rail, .topbar, .btn, .notes-pin, #_globalToastWrap { display: none !important; } .shell { display: block; } .content { padding: 0; } .card { break-inside: avoid; } }