/* =============================================================================
   Redan Coupon — Premium enterprise design system
   ---------------------------------------------------------------------------
   Design principles
   -----------------
     1. One confident accent (Redan royal blue, #104090 from the logo) with
        Redan orange as the active marker on dark chrome. Color is a signal,
        never decoration — green = approved/credit, sky = info, amber =
        pending, red = exception/debit.
     2. Warm slate neutrals — not corporate cold gray.
     3. Whitespace > borders. Subtle 1 px lines, almost-invisible shadows.
     4. Soft active states (tinted background + indicator), never filled blocks.
     5. Typography does the work — weight + scale + tracking carry hierarchy.
     6. Sharp 6-8 px radii. Restraint everywhere.

   Reference influence: Linear, Mercury, Notion, Stripe Dashboard, Pleo.

   Every existing class is preserved (.btn-brand, .glass-card, .product-tile,
   .badge.text-bg-*, .rail-item.active, etc.) — only their appearance is
   retuned. No template edits required.

   NOTE: do not reintroduce bare `.nav-item` / `.nav-section` rules. Those are
   Bootstrap's own class names for nav list items, so styling them here reaches
   every standard nav in page content. The old dark sidebar did exactly that
   and painted Bootstrap tab icons white on a white page. The shell's own
   navigation uses .navrail / .rail-item / .tab / .subtab.
   ========================================================================== */

/* Tokens live in tokens.css, which base.html loads first. The legacy names
   this file uses (--accent-*, --slate-*, --ink, --radius, --glass-*) are
   defined there as aliases of the new tokens, so this stylesheet is
   unchanged by the port and inherits dark mode without being touched. */

/* ============ BASE ======================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ -webkit-text-size-adjust: 100%; }
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--page-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11" 1, "ss01" 1;
  font-variation-settings: "opsz" 14;
}
body.bg-page, .bg-page{ background: var(--page-bg); }

h1, h2, h3, h4, h5, h6{ color: var(--ink); letter-spacing: -0.015em; }

a{ color: var(--accent); text-decoration: none; transition: color 120ms; }
a:hover{ color: var(--accent-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

hr{ border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }

::selection{ background: var(--accent-soft-2); color: var(--accent-800); }

.text-brand{ color: var(--accent) !important; }
.text-accent{ color: var(--accent) !important; }
.text-muted{ color: var(--muted) !important; }
.text-muted-2{ color: var(--muted-2) !important; }
.text-success{ color: var(--success) !important; }
.text-danger{ color: var(--danger) !important; }
.bg-brand{ background: var(--slate-900) !important; color: #fff; }
.bg-brand-dark{ background: var(--slate-900) !important; color: #fff; }
.bg-surface{ background: var(--surface) !important; }
.bg-surface-2{ background: var(--surface-2) !important; }
.xsmall{ font-size: 11px; line-height: 1.35; letter-spacing: 0; }
/* Escape hatch for a line of prose inside a .font-monospace cell — a price
   is monospaced so the digits line up, its validity window is not. */
.font-sans{ font-family: var(--font-sans); }

/* Auth pages =============================================================== */
.auth-stage{
  min-height: 100vh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5rem 1rem 3rem;
  background: var(--page-bg);
}
.auth-stage .auth-shell{ width: 100%; max-width: 420px; }

/* ============ BUTTONS ==================================================== */
.btn{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  font-size: var(--fs-13); font-weight: 500; line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer; user-select: none; text-decoration: none;
  font-family: inherit;
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms, transform 50ms;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
  min-height: var(--control-h);
}
.btn:active:not(:disabled){ transform: translateY(0.5px); }
.btn:disabled, .btn.disabled{ cursor: not-allowed; opacity: .50; }
/* Fixed, not var(--control-h): inheriting the base control height made every
   small button 34px — identical to a full-size one, so the size stopped
   meaning anything. The reference pins .btn-sm to 28px for the same
   reason, and deliberately does not scale it with density. */
.btn-sm{ font-size: var(--fs-12); padding: 6px 12px; min-height: 28px; }
.btn-lg{ font-size: var(--fs-14); padding: 10px 20px; }

/* Primary — the only solid-color button in the system. The label is
   --text-invert, not white: in dark mode the accent lightens to #7aa7e3 and
   white on it measures 2.5:1. Measured in the browser, not assumed. */
.btn-brand,
.btn-accent{
  color: var(--text-invert);
  background: var(--accent);
  border-color: var(--accent);
}
.btn-brand:hover:not(:disabled),
.btn-accent:hover:not(:disabled){
  background: var(--accent-700);
  border-color: var(--accent-700);
  color: #fff;
}
.btn-brand:focus-visible,
.btn-accent:focus-visible{ box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }

/* Outline brand — most secondary actions */
.btn-outline-brand{
  color: var(--accent);
  background: var(--surface);
  border-color: var(--accent-300);
}
.btn-outline-brand:hover:not(:disabled){
  background: var(--accent-50);
  border-color: var(--accent);
  color: var(--accent-700);
}
.btn-outline-brand:focus-visible{ box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }

/* Neutral secondary — quietest action */
.btn-outline-secondary{
  color: var(--ink-2);
  background: var(--surface);
  border-color: var(--line);
}
.btn-outline-secondary:hover:not(:disabled){
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-success{
  color: #fff; background: var(--success); border-color: var(--success);
}
.btn-success:hover:not(:disabled){ background: #036647; border-color: #036647; color: #fff; }

.btn-outline-danger{
  color: var(--danger); background: var(--surface); border-color: var(--danger-line);
}
.btn-outline-danger:hover:not(:disabled){
  background: var(--danger); color: #fff; border-color: var(--danger);
}
.btn-danger{ color: #fff; background: var(--danger); border-color: var(--danger); }
.btn-danger:hover:not(:disabled){ background: #991717; border-color: #991717; color: #fff; }

.btn-outline-light{
  color: #fff; background: transparent; border-color: rgba(255,255,255,.5);
}
.btn-outline-light:hover{ background: rgba(255,255,255,.12); color: #fff; }

.btn-link{
  color: var(--accent); background: none; border: 0; padding: 4px 6px;
  font-size: var(--fs-13); font-family: inherit; font-weight: 500;
}
.btn-link:hover{ color: var(--accent-700); text-decoration: none; }

/* ============ APP SHELL ================================================== */
.app-shell{ display: flex; min-height: 100vh; background: var(--page-bg); }
.app-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content{ flex: 1; padding: 28px 32px 44px; }
.app-footer{
  padding: 14px 32px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
  background: var(--surface);
}.brand-mark{
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--slate-900), var(--slate-800));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; font-weight: 600;
  overflow: hidden;
}
/* Logo mark: white plate so the logo holds contrast on the dark chrome. */
.brand-mark.brand-mark-logo{ background: #fff; padding: 3px; }
.brand-mark img{ width: 100%; height: 100%; object-fit: contain; display: block; }
/* Logo on the auth / login screens */
.auth-logo{ height: 72px; width: auto; }

/* Searchable-select picker: hide the native control, keep it submitting */
.pk-native{ display: none !important; }
.pk-trigger{ cursor: pointer; }

/* ── Split login screen (scoped: only the /login page) ───────────────── */
.login-wrap{ min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-side{
  background: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%);
  color: #fff; padding: 60px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.login-brand{ display: inline-block; }
.login-logo{
  width: 132px; max-width: 60%; height: auto; display: block;
  background: #fff; padding: 12px 16px; border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.20);
}
.login-side h1{
  color: #fff; font-size: 38px; line-height: 1.12; letter-spacing: -.02em;
  max-width: 460px; font-weight: 700; margin: 0;
}
.login-tagline{ font-size: 15px; line-height: 1.55; opacity: .9; max-width: 460px; margin: 16px 0 0; }
.login-brand-name{ font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.015em; }
.login-foot{ font-size: 12px; opacity: .7; }
.login-form{
  display: flex; align-items: center; justify-content: center;
  padding: 60px; background: #fff;
}
.login-panel{ width: 100%; max-width: 380px; }
.login-panel-brand{ display: block; text-align: center; margin-bottom: 18px; }
.login-panel-logo{ height: 64px; width: auto; }
.login-panel h2{ font-size: 24px; margin-bottom: 6px; color: var(--ink); font-weight: 700; }
.login-lede{ color: var(--muted); margin-bottom: 28px; font-size: 14px; }
@media (max-width: 900px){
  .login-wrap{ grid-template-columns: 1fr; }
  .login-side{ padding: 36px 28px; gap: 22px; }
  .login-side h1{ font-size: 26px; }
  .login-form{ padding: 40px 24px; }
}.brand-text{ display: flex; flex-direction: column; line-height: 1.15; }
.brand-name{ font-weight: 700; font-size: 14px; color: #fff; letter-spacing: -0.005em; }
.brand-sub{
  font-size: 10px; color: var(--chrome-muted); text-transform: uppercase;
  letter-spacing: .08em; margin-top: 2px; font-weight: 600;
}.nav-group{ overflow: hidden; }
.nav-group.collapsed{ display: none; }

/* Quote → invoice progress stepper */
.qprogress{ display: flex; margin: 0; padding: 0; list-style: none; }
.qprogress li{
  flex: 1 1 0; position: relative; text-align: center;
  font-size: 11px; color: var(--muted);
}
.qprogress li:not(:first-child)::before{
  content: ""; position: absolute; top: 13px; left: -50%;
  width: 100%; height: 2px; background: var(--line-2); z-index: 0;
}
.qprogress .qp-dot{
  width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--line-2); color: var(--muted-2);
  font-size: 12px; font-weight: 600;
  border: 2px solid var(--line-2); position: relative; z-index: 1;
}
.qprogress .qp-label{ display: block; line-height: 1.2; }
/* completed + current use the brand accent */
.qprogress li.done .qp-dot{ background: var(--accent); border-color: var(--accent); color: #fff; }
.qprogress li.done::before{ background: var(--accent); }
.qprogress li.current .qp-dot{
  /* var(--bg-surface), not #fff: in dark the brand token lightens to
     #7aa7e3 while a literal white disc stays white — measured 2.48:1. */
  background: var(--bg-surface); border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.qprogress li.current::before{ background: var(--accent); }
.qprogress li.current .qp-label{ color: var(--ink); font-weight: 600; }
/* expired — amber current marker; cancelled — muted grey */
.qprogress.is-expired li.current .qp-dot{ border-color: #d39e00; color: #b8860b; box-shadow: 0 0 0 4px rgba(211,158,0,.15); }
.qprogress.is-expired li.current .qp-label{ color: #8a6d00; }
.qprogress.is-cancelled li .qp-dot{ background: var(--line-2); border-color: var(--line-2); color: var(--muted-2); }
.qprogress.is-cancelled li::before{ background: var(--line-2); }
.qprogress.is-cancelled .qp-label{ text-decoration: line-through; }
/* ============ THEME / DENSITY SWITCHES =================================== */
/* Both glyphs ship in the markup and the attribute on <html> picks one: the
   sun while light, the moon while dark, so the icon reports the current mode
   the way aria-checked does. The inline script in base.html always stamps
   data-theme; without it neither selector matches and both icons appear. */
.theme-icon{ display: inline-grid; place-items: center; }
:root[data-theme="dark"] .theme-icon-light,
:root[data-theme="light"] .theme-icon-dark{ display: none; }
.theme-btn .theme-icon{ font-size: 15px; }

/* ============ TOPBAR ===================================================== */
.topbar{
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 26px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar-toggle{
  background: var(--surface); border: 1px solid var(--line);
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--ink);
}
.topbar-toggle:hover{ background: var(--hover); }

.topbar-title{ flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.topbar-eyebrow,
.topbar-title .text-muted{
  letter-spacing: .08em; font-size: 10px; font-weight: 600;
  color: var(--muted-2); text-transform: uppercase;
}
.topbar-title h1{
  font-weight: 700; letter-spacing: -0.015em; color: var(--ink);
  font-size: 16px; margin: 2px 0 0;
}
.topbar-title h1:empty{ display: none; }
.topbar-subtitle{ font-size: 12px; color: var(--muted); margin-top: 2px; }
.topbar-actions{ display: flex; align-items: center; gap: 8px; }

/* Search field — quiet, large hit area */
.topbar-search{
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 14px 6px 12px;
  min-width: 260px; max-width: 340px;
  color: var(--muted);
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.topbar-search:focus-within{
  /* Not #fff — see .form-control:focus below. (This selector is currently
     unused by any template; kept consistent so it is not a trap later.) */
  background: var(--bg-surface); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.topbar-search input{
  border: 0; background: transparent; outline: none;
  font-size: 13px; color: var(--ink); width: 100%;
}
.topbar-search input::placeholder{ color: var(--muted-2); }

.icon-btn{
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); font-size: 15px; text-decoration: none;
  transition: background 120ms, border-color 120ms;
}
.icon-btn:hover{ background: var(--hover); color: var(--ink); text-decoration: none; }

/* User + account chips */
.user-chip,
.account-chip{
  display: flex; align-items: center; gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 4px 12px 4px 5px;
  border-radius: 999px;
  cursor: pointer; color: var(--ink);
  transition: background 120ms, border-color 120ms;
}
.user-chip:hover,
.account-chip:hover{ background: var(--hover); border-color: var(--line-strong); }
.account-chip{ padding: 4px 12px; }
.user-avatar{
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--slate-800), var(--slate-900));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--fs-11); flex-shrink: 0;
}

/* ============ PAGE HEADER ================================================ */
.page-header{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.page-header h1,
.page-header h4{
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 4px; color: var(--ink);
}
.page-header .page-eyebrow{
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px;
}
.page-header .page-subtitle,
.page-header .text-muted.small{ font-size: 13px; color: var(--muted); line-height: 1.45; }
.page-header .page-actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ============ TOOLBARS / VIEW-PILLS ====================================== */
.toolbar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.view-pills{
  display: inline-flex; gap: 1px;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 3px; border-radius: var(--radius);
}
.view-pills .pill{
  padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  background: transparent; border: 0;
}
.view-pills .pill:hover{ color: var(--ink-2); }
.view-pills .pill.active{
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs);
}

/* ============ CARDS ====================================================== */
.card,
.glass-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.card-header{
  background: transparent;
  border-bottom: 1px solid var(--line-2);
  padding: 14px 20px;
  font-weight: 600; font-size: 14px;
  color: var(--ink);
}
.card-header.bg-white{ background: transparent !important; }
.card-body{ padding: 20px; }
.shadow-sm{ box-shadow: var(--shadow-xs) !important; }

/* Stat cards — minimal */
.stat-card{
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
  padding-left: 18px;
}
.stat-card .stat-icon{ position: absolute; right: 16px; top: 16px; font-size: 28px; opacity: .08; color: var(--ink); }
.stat-card.stat-primary{ border-left: 3px solid var(--accent); }
.stat-card.stat-success{ border-left: 3px solid var(--success); }
.stat-card.stat-warning{ border-left: 3px solid var(--warning); }
.stat-card.stat-danger { border-left: 3px solid var(--danger); }
.stat-card.stat-info   { border-left: 3px solid var(--accent); }
/* A counter at zero: still a card, but not asking to be looked at. */
.stat-card.stat-muted  { border-left: 3px solid var(--line-2); }
.stat-card.stat-muted .h3{ color: var(--muted); }

/* ============ TABLES ===================================================== */
/* The MyWetStock reference treatment (see the tables group in tokens.css):
   sentence-case muted headers on a faint tint, horizontal rules only, a tinted
   hover, and outer gutters that meet the panel edge. Uppercase letter-spaced
   headers were the previous look; they cost width and read as a consumer
   dashboard, so they are gone on purpose. */
.table{ margin-bottom: 0; width: 100%; border-collapse: collapse; }
.table > :not(caption) > * > *{
  padding: var(--row-py) 16px; background-color: transparent;
  border-color: var(--table-rule);
  vertical-align: middle;
  color: var(--table-text);
}
.table > :not(caption) > * > :first-child{ padding-left: var(--table-gutter); }
.table > :not(caption) > * > :last-child{ padding-right: var(--table-gutter); }
.table thead{ background: transparent; }
.table thead th{
  padding-top: var(--table-head-py); padding-bottom: var(--table-head-py);
  background: var(--table-head-bg);
  font-weight: 600; color: var(--table-head-text);
  font-size: 12px; text-transform: none; letter-spacing: .2px;
  border-bottom: 1px solid var(--table-head-rule);
}
.table tbody td{ border-bottom: 1px solid var(--table-rule); }
/* The panel draws the bottom edge; a rule 1px above it reads as a mistake. */
.table tbody tr:last-child td{ border-bottom: 0; }
.table tbody tr{ transition: background 80ms; }
.table tbody tr:hover{ background: var(--table-hover); }
.table tbody tr.table-warning{ background: var(--warning-soft); }
.table tbody tr.table-warning:hover{ background: #FDE9C3; }

/* ============ BADGES ===================================================== */
/* Premium badges: very subtle backgrounds, semantic colored text */
.badge{
  font-weight: 500; letter-spacing: 0;
  padding: 3px 9px; border-radius: var(--radius-sm); font-size: 11px; line-height: 1.4;
  display: inline-flex; align-items: center; gap: 5px;
}
.text-bg-warning{ background: var(--warning-soft) !important; color: var(--warning-text) !important; }
.text-bg-success{ background: var(--success-soft) !important; color: var(--success-text) !important; }
.text-bg-danger { background: var(--danger-soft) !important;  color: var(--danger-text) !important; }
.text-bg-info   { background: var(--info-soft) !important;    color: var(--info-text) !important; }
.text-bg-light  { background: var(--surface-2) !important;    color: var(--ink-2) !important; border: 1px solid var(--line); }
.text-bg-secondary{ background: var(--slate-100) !important;  color: var(--slate-600) !important; }

/* ============ ALERTS ===================================================== */
.alert{
  border-radius: var(--radius);
  padding: 12px 16px;
  border: 1px solid transparent; font-size: var(--fs-13);
}
.alert-success{ background: var(--success-soft); color: var(--success-text); border-color: var(--success-line); }
.alert-warning{ background: var(--warning-soft); color: var(--warning-text); border-color: var(--warning-line); }
.alert-danger { background: var(--danger-soft);  color: var(--danger-text);  border-color: var(--danger-line); }
/* A server-side error is one thing everywhere: this alert, announced to
   assistive tech, with an icon so it is not only a colour. 103 sites carried
   eight class variants and two rendered the error as grey body text. */
.alert-danger{ display:flex; gap:10px; align-items:flex-start; padding:10px 14px; font-size:13px; }
.alert-danger::before{ content:"\F33A"; font-family:"bootstrap-icons"; flex:none; font-size:15px; line-height:1.4; }
.alert-info   { background: var(--info-soft);    color: var(--info-text);    border-color: var(--info-line); }
.alert-light  { background: var(--surface-2);    color: var(--ink-2);        border-color: var(--line); }

/* ============ FORMS ====================================================== */
/* The required star is drawn from the attribute that already makes the field
   required, so the two can never disagree: 82 stars were typed by hand and
   27 required fields had none. A label paired by for= gets it; so does one
   that wraps its control. */
.req-star{ color: var(--danger); font-weight: 600; }
/* Without the script (a printed page), the adjacent case still draws it. */
label.form-label:not([data-required]):has(+ [required])::after,
label.form-label:not([data-required]):has(+ .input-group [required])::after{ content:" *"; color: var(--danger); font-weight: 600; }
.form-control, .form-select, .input-group-text{
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: inherit;
  transition: border-color 120ms, box-shadow 120ms;
}
.form-control:focus, .form-select:focus{
  /* Not #fff: input text is white in dark, so a white focus background
     makes the field you are typing into invisible. 102 templates. */
  background: var(--bg-surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}
.form-control::placeholder{ color: var(--muted-2); }
.input-group-text{
  color: var(--muted); font-weight: 500; font-size: 13px;
  background: var(--surface-2);
}
.form-label{ font-weight: 500; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; letter-spacing: -0.005em; }
.form-text{ font-size: 12px; color: var(--muted); line-height: 1.4; }
.form-check-input:checked{ background-color: var(--accent); border-color: var(--accent); }
.form-switch .form-check-input:checked{ background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus{ box-shadow: 0 0 0 3px var(--accent-ring); border-color: var(--accent); }

/* ============ DROPDOWNS ================================================== */
.dropdown-menu{
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 5px;
  font-size: var(--fs-13);
}
.dropdown-item{ border-radius: var(--radius-sm); padding: 7px 12px; color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus{ background: var(--accent-soft); color: var(--accent-700); }
.dropdown-item.active, .dropdown-item:active{ background: var(--accent); color: #fff; }
.dropdown-header{
  color: var(--muted-2); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px;
}
.dropdown-divider{ border-color: var(--line); margin: 5px 4px; }

/* ============ MODALS ===================================================== */
.modal-content{
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
}
.modal-header{ border-bottom: 1px solid var(--line-2); padding: 16px 22px; }
.modal-header .modal-title{ font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.modal-body{ padding: 22px; }
.modal-footer{ border-top: 1px solid var(--line-2); padding: 14px 22px; gap: 8px; }

/* ============ HERO / LANDING ============================================= */
.hero{
  background: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-800) 60%, var(--accent-800) 100%);
  position: relative; overflow: hidden; color: #fff;
  border-radius: var(--radius-md);
}
.hero::after{
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(15, 118, 110, .25), transparent 70%);
}
.feat-icon{
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 12px;
}
.feat-icon.danger{ background: var(--danger-soft); color: var(--danger); }

/* ============ PRODUCT / FUEL CHOOSER ===================================== */
.product-card{
  background: var(--surface);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md);
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.product-card:hover{ border-color: var(--accent) !important; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.product-icon{
  width: 38px; height: 38px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}

.product-choice{
  display: block; cursor: pointer; background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 14px 12px;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
  height: 100%; position: relative; user-select: none;
}
.product-choice:hover{ border-color: var(--line-strong); box-shadow: var(--shadow-xs); transform: translateY(-1px); }
.product-choice .check-mark{ opacity: 0; color: var(--accent); font-size: 18px; transition: opacity 120ms; }
.product-choice.selected{ border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-ring); }
.product-choice.selected .check-mark{ opacity: 1; }

.step-badge{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}

.fuel-choice{
  --fuel-accent: var(--accent);
  display: block; cursor: pointer; background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--radius-md);
  padding: 16px; height: 100%; user-select: none;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.fuel-choice:hover{ border-color: var(--line-strong); box-shadow: var(--shadow-xs); transform: translateY(-1px); }
.fuel-choice.selected{
  border-color: var(--fuel-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fuel-accent) 16%, transparent);
  background: color-mix(in srgb, var(--fuel-accent) 4%, var(--surface));
}
.fuel-choice .fuel-mark{
  width: 42px; height: 42px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--fuel-accent) 10%, transparent);
  color: var(--fuel-accent);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.fuel-choice .check-mark{ opacity: 0; color: var(--fuel-accent); font-size: 19px; transition: opacity 120ms; }
.fuel-choice.selected .check-mark{ opacity: 1; }

.fuel-band{
  --fuel-accent: var(--accent);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 14px 14px;
  border-left: 3px solid var(--fuel-accent);
}
.fuel-band-head{ display: flex; align-items: center; gap: 10px; padding: 2px 4px 8px; }
.fuel-band-subtotal{
  font-weight: 600; color: var(--fuel-accent); font-size: 13px;
  background: color-mix(in srgb, var(--fuel-accent) 8%, transparent);
  padding: 3px 10px; border-radius: 999px;
}

.product-tile{
  --fuel-accent: var(--accent);
  display: block; cursor: text;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px; height: 100%;
  position: relative; overflow: hidden;
  transition: border-color 120ms, box-shadow 120ms, background 120ms, transform 120ms;
}
.product-tile:hover{
  border-color: color-mix(in srgb, var(--fuel-accent) 40%, var(--line));
  box-shadow: var(--shadow-xs); transform: translateY(-1px);
}
.product-tile.filled{
  border-color: var(--fuel-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fuel-accent) 16%, transparent), var(--shadow-xs);
  background: color-mix(in srgb, var(--fuel-accent) 4%, var(--surface));
}
.product-tile.error{
  border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft); background: #FFF8F8;
}
.product-tile .tile-error{ margin-top: 4px; line-height: 1.3; }
.product-tile .tile-stripe{ display: none; }
.product-tile .tile-row1{ display: flex; justify-content: space-between; align-items: baseline; }
.product-tile .tile-denom{ font-size: 17px; font-weight: 600; color: var(--fuel-accent); letter-spacing: -0.01em; }
.product-tile .tile-denom-card{ font-size: var(--fs-14); }
.product-tile .tile-cost{ font-weight: 500; color: var(--ink-2); font-size: var(--fs-11); }
.product-tile .tile-sub{ margin-top: 1px; margin-bottom: 8px; }
.product-tile .tile-input .input-group-text{ background: var(--surface); font-size: 12px; }
.product-tile .tile-result{ margin-top: 6px; min-height: 18px; font-size: 12px; color: var(--fuel-accent); font-weight: 500; }
.product-tile .tile-result-row{ display: flex; justify-content: space-between; }
.product-tile .tile-result-total{ color: var(--fuel-accent); font-weight: 600; }

/* ============ NOTES DETAILS ============================================== */
.notes-card summary{ list-style: none; cursor: pointer; }
.notes-card summary::-webkit-details-marker{ display: none; }
.notes-card[open] .chevron{ transform: rotate(180deg); }
.notes-card .chevron{ transition: transform 150ms; }

/* ============ STICKY ==================================================== */
@media (min-width: 1200px){ .sticky-side{ position: sticky; top: calc(var(--topbar-h) + 16px); } }
@media (min-width: 992px ){ .sticky-summary{ position: sticky; top: calc(var(--topbar-h) + 16px); } }

/* ============ STATIONS PANEL ============================================ */
.stations-card{ background: var(--surface); }
.stations-card h6 i{ color: var(--accent); }
.station-list{ list-style: none; padding: 0; margin: 0; }
.station-item{
  padding: 14px 0; border-top: 1px solid var(--line-2);
  display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 4px;
}
.station-item:first-child{ border-top: none; padding-top: 4px; }
.station-name{ grid-column: 1; grid-row: 1; font-weight: 500; font-size: var(--fs-13); color: var(--ink); line-height: 1.3; }
.station-fuels{ grid-column: 2; grid-row: 1; display: flex; gap: 4px; flex-shrink: 0; align-items: flex-start; }
.station-fuels .fuel-chip{ font-size: 10px; padding: 2px 7px; line-height: 1.2; }
.station-fuels .fuel-chip i{ font-size: 10px; }
.station-address{ grid-column: 1/-1; grid-row: 2; line-height: 1.4; font-size: 12px; color: var(--muted); }
.station-meta{ grid-column: 1/-1; grid-row: 3; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.station-meta i{ opacity: .7; margin-right: 3px; }

/* ============ ADMIN BITS ================================================ */
.awaiting-card{ border-left: 3px solid var(--warning) !important; }
.awaiting-card thead th{ background: var(--warning-soft); }
.awaiting-card input.font-monospace{ letter-spacing: .04em; }

/* FileMaker reconciliation panel */
.lookup-panel-row .lookup-panel-cell{ background: var(--surface-2); border-top: 0 !important; }
.lookup-panel{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px; margin: 14px;
  box-shadow: var(--shadow-xs);
}
.lookup-panel-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.lookup-status{ margin-bottom: 10px; font-size: 13px; }
.lookup-status.muted{ color: var(--muted); }
.compare-col{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; height: 100%;
}
.compare-col.compare-fm{ background: var(--accent-soft); border-color: var(--accent-200); }
.compare-head{
  font-weight: 600; color: var(--accent-700); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; border-bottom: 1px solid var(--line);
  padding-bottom: 6px; margin-bottom: 6px;
}
.compare-dl{ display: grid; grid-template-columns: 90px 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.compare-dl dt{ color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.compare-dl dd{ margin: 0; color: var(--ink); }
.compare-dl dd.compare-match{ color: var(--success); font-weight: 600; }
.compare-dl dd.compare-diff{ color: var(--danger-text); font-weight: 600; background: var(--danger-soft); padding: 0 6px; border-radius: 3px; }
.lookup-actions{ margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.source-btn.active{ background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* Settings landing cards */
.settings-card{ color: inherit; transition: transform 120ms, box-shadow 120ms, border-color 120ms; text-decoration: none; }
.settings-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; border-color: var(--accent-300); }
.settings-icon{
  width: 42px; height: 42px; border-radius: var(--radius); flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}

/* The field column beside a settings card's icon. 280px keeps the input and
   its button on one line on a desk; on a phone the column is about 250px, so
   a floor of 280 stood the card's content past its own edge once .d-flex
   started working again. It may shrink there — the button wraps under the
   input, which is what flex-wrap on the form is for. */
.settings-field{ min-width: 280px; }
@media (max-width: 768px){ .settings-field{ min-width: 0; } }

/* fuel chip — semantic color only */
.fuel-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.fuel-chip.diesel_50{ background: var(--accent-soft); color: var(--accent-700); }
.fuel-chip.blend    { background: rgba(146, 64, 14, .08); color: var(--fuel-blend); }
.fuel-chip i{ font-size: 12px; }

/* equal-height side cards on quote grid */
.quote-grid > [class^="col-"] > .card{ height: 100%; }

/* monospace */
.font-monospace{ font-family: "SFMono-Regular", Menlo, Consolas, monospace; }

/* History rows: highlight active */
.history-current{ background: var(--accent-soft) !important; }

/* ============ KANBAN ==================================================== */
.kanban{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.kanban-col{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.kanban-col-head{
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: var(--fs-13); color: var(--ink-2);
}
.kanban-col-head .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.kanban-card{
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; font-size: 13px;
}

/* ============ LIST GROUPS ================================================ */
.list-group-item{ border-color: var(--line-2); padding: 12px 14px; }
.list-group-item-action:hover, .list-group-item-action:focus{ background: var(--hover); }
.list-group-flush .list-group-item{ border-left: 0; border-right: 0; }

/* ============ MOBILE ==================================================== */
@media (max-width: 991.98px){
  .app-content{ padding: 18px 16px 32px; }
  .topbar{ padding: 0 16px; }
  .app-footer{ padding: 14px 16px; }
  .topbar-search{ display: none; }
  .page-header{ align-items: flex-start; }
  .page-header h4, .page-header h1{ font-size: 19px; }
}

/* ── Quick search (topbar) + breadcrumb — UX redesign Phase 3 ──
   Retuned to design tokens (was hardcoding a divergent brand green). */
.app-search{ display:flex; align-items:center; gap:8px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:7px 12px; min-width:280px;
  transition:border-color 120ms, box-shadow 120ms, background 120ms; }
.app-search i{ color:var(--muted-2); font-size:15px; }
.app-search input{ border:none; outline:none; background:transparent; font-size: var(--fs-13); width:100%;
  color:var(--ink); }
.app-search input::placeholder{ color:var(--muted-2); }
.app-search:focus-within{ background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
/* A real button, so it must read as one: it opens the ⌘K launcher. */
.app-search .cmdk-hint{ flex:none; font-family:inherit; font-size: var(--fs-11); color:var(--muted-2);
  background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:1px 6px; line-height:1.4;
  cursor:pointer; transition:color 100ms, border-color 100ms; }
.app-search .cmdk-hint:hover{ color:var(--ink); border-color:var(--accent); }
.app-crumb{ display:flex; align-items:center; gap:8px; font-size: var(--fs-12); color:var(--muted); margin-bottom:14px;
  flex-wrap:wrap; }
.app-crumb a{ color:var(--accent); text-decoration:none; }
.app-crumb a:hover{ text-decoration:underline; }
.app-crumb .sep{ color:var(--line-strong); }
.app-crumb .ws{ color:var(--muted); }
.app-crumb .cur{ color:var(--ink); font-weight:600; }

/* ── Saved views bar — UX redesign Phase 3b (token-based) ── */
.saved-views{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.saved-views .sv-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); font-weight:700; }
.saved-views .sv-chip{ display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-12); text-decoration:none;
  color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px 6px 4px 12px; }
.saved-views .sv-chip:hover{ border-color:var(--accent); }
.saved-views .sv-chip.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-700); font-weight:600; }
.saved-views .sv-x{ border:none; background:transparent; color:var(--muted-2); font-size:15px; line-height:1; cursor:pointer; padding:0 4px; }
.saved-views .sv-x:hover{ color:var(--danger); }
.saved-views .sv-save{ font-size: var(--fs-12); border:1px dashed var(--line-strong); background:transparent; color:var(--muted);
  border-radius:999px; padding:5px 12px; cursor:pointer; }
.saved-views .sv-save:hover{ border-color:var(--accent); color:var(--accent-700); }

/* =============================================================================
   UX PROGRAM · Phase 1 — shared foundations
   ---------------------------------------------------------------------------
   Additive, token-driven. Behaviour lives in /static/js/ux.js.
   ========================================================================== */

/* ── Tabular numerics — money & quantities align in columns ────────────── */
.table{ font-variant-numeric: tabular-nums; }
.num, td.num, th.num, .tabular,
.stat-value, .kpi-value, .metric-value{ font-variant-numeric: tabular-nums; }
td.num, th.num, .num{ text-align: right; }

/* ── Sortable / sticky data grids (progressive enhancement) ────────────── */
.table.is-sortable thead th{ position: sticky; top: 0; z-index: 3; background: var(--table-head-bg); }
.table.is-sortable thead th::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line);
}
th.th-sort{ cursor: pointer; user-select: none; white-space: nowrap; transition: color 100ms; }
th.th-sort:hover{ color: var(--ink); }
th.th-sort .sort-ind{
  display:inline-block; width:0; margin-left:5px; font-size:9px; opacity:.35;
  vertical-align: 1px; transition: opacity 100ms;
}
th.th-sort:hover .sort-ind{ opacity:.7; }
th.th-sort[aria-sort="none"] .sort-ind::before{ content:"\2195"; }        /* ↕ */
th.th-sort[aria-sort="ascending"] .sort-ind::before{ content:"\2191"; }   /* ↑ */
th.th-sort[aria-sort="descending"] .sort-ind::before{ content:"\2193"; }  /* ↓ */
th.th-sort[aria-sort="ascending"] .sort-ind,
th.th-sort[aria-sort="descending"] .sort-ind{ opacity:1; color: var(--accent); width:auto; }

/* ── Command palette (Ctrl / ⌘ + K) ────────────────────────────────────── */
.cmdk-overlay{
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(15, 23, 42, .38);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px; opacity: 0; pointer-events: none;
  transition: opacity 120ms ease;
}
.cmdk-overlay.open{ opacity: 1; pointer-events: auto; }
.cmdk{
  width: 100%; max-width: 560px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); overflow: hidden;
  transform: translateY(-6px); transition: transform 120ms ease;
}
.cmdk-overlay.open .cmdk{ transform: translateY(0); }
.cmdk-head{ display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.cmdk-head i{ color: var(--muted); font-size: 16px; }
.cmdk-head input{
  flex: 1; border: 0; outline: none; background: transparent;
  font-size: 15px; color: var(--ink); font-family: inherit;
}
.cmdk-head input::placeholder{ color: var(--muted-2); }
.cmdk-head kbd{
  font-size: 10px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; font-family: inherit;
}
.cmdk-list{ max-height: 46vh; overflow-y: auto; padding: 6px; }
.cmdk-group{ font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-2); padding: 10px 12px 4px; }
.cmdk-item{
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-size: var(--fs-13); cursor: pointer;
}
.cmdk-item i{ width: 18px; text-align: center; color: var(--muted); font-size: 15px; }
.cmdk-item .cmdk-sub{ color: var(--muted-2); font-size: var(--fs-11); margin-left: auto; }
.cmdk-item.active, .cmdk-item:hover{ background: var(--accent-soft); color: var(--accent-700); }
.cmdk-item.active i, .cmdk-item:hover i{ color: var(--accent); }
.cmdk-empty{ padding: 26px 16px; text-align: center; color: var(--muted-2); font-size: 13px; }
.cmdk-foot{ display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line-2);
  font-size: 11px; color: var(--muted-2); }
.cmdk-foot kbd{ font-family: inherit; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; color: var(--muted); }

/* ── Charts (inline SVG) ───────────────────────────────────────────────── */
.chart{ margin:0; width:100%; }
.chart svg{ overflow:visible; }
.chart svg text{ font-variant-numeric:tabular-nums; }
.chart-tip{ position:absolute; top:-6px; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:11px; line-height:1.3; white-space:nowrap;
  padding:4px 8px; border-radius:var(--radius-sm); box-shadow:var(--shadow-md); pointer-events:none; z-index:5; }
.chart-tip b{ font-weight:600; }
.chart-tip span{ display:block; color:var(--muted-2); font-size:10px; }
.chart-empty{ display:flex; align-items:center; justify-content:center; height:120px; color:var(--muted-2); font-size:13px; }

/* ── Accessibility — skip link + keyboard focus rings (WCAG AA) ────────── */
.skip-link{
  position:fixed; left:12px; top:-56px; z-index:2000;
  background:var(--accent); color:#fff; font-size:13px; font-weight:600;
  padding:9px 16px; border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  transition:top 140ms ease;
}
.skip-link:focus{ top:12px; color:#fff; text-decoration:none; outline:2px solid #fff; outline-offset:2px; }

/* Visible focus for keyboard users on every interactive surface. Mouse
   clicks (which don't match :focus-visible) stay ring-free. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-item:focus-visible,
.icon-btn:focus-visible, .user-chip:focus-visible, .account-chip:focus-visible,
.view-pills .pill:focus-visible, .dgrid-btn:focus-visible, .dgrid-page-btn:focus-visible,
.cmdk-item:focus-visible, .sv-chip:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm);
}
/* A field reached by keyboard shows the same two-colour ring the buttons do;
   the mouse-focus glow below is too faint on a dark surface to count. */
input:focus-visible, select:focus-visible, textarea:focus-visible,
.form-control:focus-visible, .form-select:focus-visible{
  outline: none; box-shadow: var(--focus-ring);
}
.dgrid-filter:focus-within{ box-shadow: var(--focus-ring); }

/* ── Inline form validation ────────────────────────────────────────────── */
.field-error{ color:var(--danger); font-size:12px; line-height:1.35; margin-top:5px; display:flex; align-items:flex-start; gap:5px; }
.field-error::before{ content:"\F33A"; font-family:"bootstrap-icons"; font-size:12px; line-height:1.2; flex:none; }
.form-control.is-invalid, .form-select.is-invalid, textarea.is-invalid,
input.is-invalid{ border-color:var(--danger) !important; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus,
input.is-invalid:focus{ box-shadow:0 0 0 3px var(--danger-soft) !important; }

/* ── Favourite (pin) star in the topbar ────────────────────────────────── */
.icon-btn.is-fav i{ color:var(--warning); }

/* ── DataGrid — toolbar, column chooser, pager over enhanced tables ────── */
.dgrid{ margin-bottom: 4px; }
.dgrid-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.dgrid-filter{ display:flex; align-items:center; gap:8px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:6px 12px; min-width:220px;
  transition:border-color 120ms, box-shadow 120ms, background 120ms; }
.dgrid-filter:focus-within{ background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.dgrid-filter i{ color:var(--muted-2); font-size:14px; }
.dgrid-filter input{ border:0; outline:0; background:transparent; font-size:13px; color:var(--ink); width:100%; }
.dgrid-filter input::placeholder{ color:var(--muted-2); }
.dgrid-count{ font-size:12px; color:var(--muted); margin-right:auto; font-variant-numeric:tabular-nums; }
.dgrid-tools{ display:flex; gap:8px; }
.dgrid-btn{ display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-12); padding:6px 12px;
  border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-sm); color:var(--ink-2); cursor:pointer; }
.dgrid-btn:hover{ background:var(--hover); border-color:var(--line-strong); color:var(--ink); }
.dgrid-btn i{ font-size:14px; color:var(--muted); }
.dgrid-menu-wrap{ position:relative; }
.dgrid-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:40; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:5px;
  min-width:200px; max-height:320px; overflow:auto; display:none; }
.dgrid-menu.open{ display:block; }
.dgrid-menu label{ display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:var(--radius-sm);
  font-size:13px; cursor:pointer; color:var(--text); white-space:nowrap; }
.dgrid-menu label:hover{ background:var(--accent-soft); color:var(--accent-700); }
.dgrid-menu input[type="checkbox"]{ accent-color:var(--accent); }
.dgrid-pager{ display:flex; align-items:center; gap:10px; margin-top:12px; font-size: var(--fs-12);
  color:var(--muted); flex-wrap:wrap; }
.dgrid-pager .spacer{ margin-left:auto; }
.dgrid-page-btn{ border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-sm);
  padding:4px 11px; cursor:pointer; color:var(--ink-2); font-size: var(--fs-12); }
.dgrid-page-btn:hover:not(:disabled){ background:var(--hover); border-color:var(--line-strong); }
.dgrid-page-btn:disabled{ opacity:.4; cursor:default; }
.dgrid-size{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 8px;
  background:var(--surface); font-size: var(--fs-12); color:var(--ink-2); font-family:inherit; }
th.dg-hidden-col, td.dg-hidden-col{ display:none !important; }
/* Selection column + bulk-action bar */
th.dg-select-col, td.dg-select-col{ width:38px; text-align:center; padding-left:12px !important; padding-right:6px !important; }
.dg-select-all, .dg-select-row{ accent-color:var(--accent); cursor:pointer; width:15px; height:15px; }
.dgrid-bulkbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px;
  background:var(--accent-soft); border:1px solid var(--accent-200); border-radius:var(--radius);
  padding:8px 12px; }
.dgrid-bulk-count{ font-size:13px; font-weight:600; color:var(--accent-700); margin-right:auto; font-variant-numeric:tabular-nums; }
.dgrid-btn-danger{ border-color:var(--danger-line); color:var(--danger); }
.dgrid-btn-danger:hover{ background:var(--danger); color:#fff; border-color:var(--danger); }
.dgrid-btn-danger:hover i{ color:#fff; }
.dgrid-bulk-clear{ border:0; background:transparent; color:var(--muted); font-size: var(--fs-12); cursor:pointer; padding:4px 8px; }
.dgrid-bulk-clear:hover{ color:var(--ink); text-decoration:underline; }

/* ── Toasts — transient, non-blocking feedback ─────────────────────────── */
.toast-stack{
  position: fixed; right: 18px; bottom: 18px; z-index: 1090;
  display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 36px));
}
.toast-item{
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 12px 14px; font-size: var(--fs-13); color: var(--ink-2);
  opacity: 0; transform: translateY(8px); transition: opacity 160ms ease, transform 160ms ease;
}
.toast-item.show{ opacity: 1; transform: translateY(0); }
.toast-item.leaving{ opacity: 0; transform: translateY(8px); }
.toast-item i.toast-ic{ font-size: 16px; margin-top: 1px; flex: none; }
.toast-item.toast-success{ border-left-color: var(--success); }
.toast-item.toast-success i.toast-ic{ color: var(--success); }
.toast-item.toast-error{ border-left-color: var(--danger); }
.toast-item.toast-error i.toast-ic{ color: var(--danger); }
.toast-item.toast-info{ border-left-color: var(--accent); }
.toast-item.toast-info i.toast-ic{ color: var(--accent); }
.toast-item .toast-body{ flex: 1; line-height: 1.4; }
.toast-item .toast-x{ border: 0; background: transparent; color: var(--muted-2); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; }
.toast-item .toast-x:hover{ color: var(--ink); }
@media (prefers-reduced-motion: reduce){
  .toast-item, .cmdk, .cmdk-overlay{ transition: none; }
}

/* ============ ENTERPRISE REFRESH (2026-08) =============================== */
/* KPI numbers carry the dashboard: big, bold, ink. */
.stat-value, .kpi-value, .metric-value{
  font-size: 24px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1.15;
}
.stat-label, .kpi-label, .metric-label{
  font-size: var(--fs-11); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.stat-card.stat-info{ border-left-color: var(--info); }

/* Financial semantics — consistent everywhere money moves.
   Credits are green, debits are red; both tabular and bold enough to scan. */
.amt-credit{ color: var(--credit) !important; font-weight: 600; font-variant-numeric: tabular-nums; }
.amt-debit { color: var(--debit) !important;  font-weight: 600; font-variant-numeric: tabular-nums; }
.amt-zero  { color: var(--muted-2) !important; font-variant-numeric: tabular-nums; }

/* Direction chips (manual adjustments, ledger rows) */
.chip-credit, .chip-debit{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  padding: 3px 9px; border-radius: var(--radius-sm);
}
.chip-credit{ background: var(--success-soft); color: var(--success-text); }
.chip-debit { background: var(--danger-soft);  color: var(--danger-text); }

/* ============ PUBLIC LANDING ============================================= */
.landing-nav{ background: var(--surface); border-bottom: 1px solid var(--line); }
.landing-logo{ height: 30px; border-radius: 4px; }

.landing-hero{ max-width: 760px; padding: 40px 0 44px; }
.landing-eyebrow{
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-700); margin-bottom: 14px;
}
.landing-h1{
  font-size: clamp(30px, 4.5vw, 44px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.08; color: var(--ink);
  margin-bottom: 18px;
}
.landing-sub{ font-size: var(--fs-16); line-height: 1.65; color: var(--text); margin-bottom: 24px; }
.landing-reassure{ font-size: 13px; color: var(--muted); margin: 14px 0 0; max-width: 560px; }

.landing-card{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 22px 20px;
  font-size: var(--fs-13); line-height: 1.6; color: var(--text);
}
.landing-card-icon{ font-size: 24px; color: var(--accent); display: block; margin-bottom: 14px; }

.landing-section{ margin-top: 52px; }
.landing-door{
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 18px 20px;
  text-decoration: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.landing-door:hover{ border-color: var(--accent-300); box-shadow: var(--shadow-sm); text-decoration: none; }
.landing-door-title{
  font-weight: 700; font-size: 15px; color: var(--accent-700);
  display: flex; align-items: center; gap: 6px;
}
.landing-door-title i{ font-size: 12px; }
.landing-door-sub{ font-size: 13px; color: var(--muted); }

.landing-apply{
  margin: 52px 0 24px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 32px;
}
.landing-steps{ padding-left: 20px; margin-bottom: 16px; }
.landing-steps li{ margin-bottom: 12px; line-height: 1.6; color: var(--text); }
.landing-steps li strong{ color: var(--ink); }
.landing-nav .btn{ white-space: nowrap; }
.landing-cta{ display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 767px){
  .landing-hero{ padding: 20px 0 30px; }
  .landing-apply{ padding: 22px 20px; }
  .landing-sub{ font-size: 15px; }
  /* Full-width, thumb-friendly CTAs on phones */
  .landing-cta{ flex-direction: column; }
  .landing-cta .btn{ width: 100%; justify-content: center; }
  .landing-steps{ padding-left: 18px; }
}

/* ============ TAB-BASED SHELL (2026-08 redesign) ========================= */
/* Vertical shell: sticky navy app bar + primary tabs + contextual subtabs.  */
.app-shell-top{ min-height: 100vh; display: flex; flex-direction: column; }
.appbar-group{ position: sticky; top: 0; z-index: 60; box-shadow: var(--shadow-sm); }

.appbar{
  position: static;             /* the group is sticky, not the bar itself */
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
  border-bottom: 0;
  height: var(--topbar-h); padding: 0 20px;
}
.appbar-brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; }
.appbar-brand:hover{ text-decoration: none; }
.appbar-brand-text{ flex-direction: column; line-height: 1.1; }
.appbar-name{ font-weight: 700; font-size: 14px; color: #fff; letter-spacing: -0.005em; }
.appbar-sub{ font-size: 10px; color: var(--chrome-muted); text-transform: uppercase;
             letter-spacing: .08em; font-weight: 600; margin-top: 1px; }
.appbar-title{ margin-left: 6px; }
.appbar .topbar-eyebrow{ color: var(--chrome-muted); }
.appbar .topbar-title h1, .appbar h1{ color: #fff; }
.appbar .topbar-subtitle{ color: var(--chrome-muted); }
.appbar .icon-btn{ background: rgba(255,255,255,.06); border-color: transparent; color: #fff; }
.appbar .icon-btn:hover{ background: rgba(255,255,255,.14); }
.appbar .user-chip{
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff;
}
.appbar .user-chip:hover{ background: rgba(255,255,255,.15); }
.appbar .user-chip .fw-semibold{ color: #fff; }
.appbar .user-chip .text-muted{ color: var(--chrome-muted) !important; }
.appbar .account-chip{
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff;
}
.appbar .app-search{
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); color: #fff;
}
.appbar .app-search input{ color: #fff; }
.appbar .app-search input::placeholder{ color: rgba(255,255,255,.55); }
.appbar .app-search i{ color: rgba(255,255,255,.6); }

/* ── Primary tabs: on the navy chrome, orange active indicator ─────────── */
.tabbar{
  background: var(--chrome-2);
  border-bottom: 1px solid var(--line);
}
.tabbar-scroll{
  display: flex; align-items: stretch; gap: 2px;
  padding: 0 12px; overflow-x: auto; scrollbar-width: none;
}
.tabbar-scroll::-webkit-scrollbar{ display: none; }
.tab{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 14px 9px; border: 0; background: none;
  color: var(--chrome-text); font-size: var(--fs-13); font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 100ms, background 100ms;
}
.tab i{ font-size: 15px; color: var(--chrome-muted); transition: color 100ms; }
.tab:hover{ color: #fff; background: rgba(255,255,255,.05); text-decoration: none; }
.tab:hover i{ color: rgba(255,255,255,.85); }
.tab.active{
  color: #fff; font-weight: 600;
  border-bottom-color: var(--chrome-accent);
}
.tab.active i{ color: var(--chrome-accent); }
.tab:focus-visible{ outline: 2px solid var(--chrome-accent); outline-offset: -2px; }
.tab-badge{
  background: var(--warning-soft); color: var(--warning-text);
  font-size: var(--fs-11); font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
}
.tab-more .dropdown-menu{ font-size: var(--fs-13); }

/* ── Secondary tabs: section dock — icon pills on a light strip ────────── */
.subtabbar{
  background: linear-gradient(180deg, var(--surface) 0%, var(--accent-50) 140%);
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}
.subtab-scroll{
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px; overflow-x: auto; scrollbar-width: none;
}
.subtab-scroll::-webkit-scrollbar{ display: none; }
.subtab-section{
  align-items: center; gap: 7px; flex: 0 0 auto;
  font-size: var(--fs-11); font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  padding: 0 14px 0 4px; margin-right: 4px;
  border-right: 1px solid var(--line);
}
.subtab-section .bi{ color: var(--chrome-accent, #FF6F44); font-size: 14px; }
.subtab{
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 6px 14px; font-size: 13px; font-weight: 500;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border-radius: 999px;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}
.subtab .bi{ font-size: 13px; opacity: .7; transition: opacity 120ms; }
.subtab:hover{
  color: var(--accent-700); text-decoration: none;
  background: var(--accent-100);
}
.subtab:hover .bi{ opacity: 1; }
.subtab.active{
  color: #fff; font-weight: 600;
  background: linear-gradient(135deg, var(--accent-700), var(--accent-500));
  box-shadow: 0 2px 8px rgba(16, 64, 144, .30);
}
.subtab.active .bi{ opacity: 1; }
.subtab:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.subtab-badge{
  background: var(--chrome-accent, #FF6F44); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 999px;
}
.subtab:not(.active) .subtab-badge{
  background: var(--warning-soft); color: var(--warning-text);
}

/* ── Content width + responsive ────────────────────────────────────────── */
.container-page{ width: 100%; max-width: 1320px; margin: 0 auto; }
.app-shell-top .app-content{ flex: 1; }
@media (max-width: 640px){
  /* The bar is shorter on a phone, so the token that everything else derives
     from is what changes — not the bar and then, separately, whatever is
     pinned beneath it. */
  :root{ --topbar-h: 54px; }
  .appbar{ padding: 0 12px; }
  .tab span{ display: none; }              /* icons only on phones */
  .tab{ padding: 12px 13px 10px; }
  .tab-more .tab span{ display: none; }
  .subtab{ font-size: var(--fs-12); padding: 6px 11px; }

  /* The bar must FIT. Every collection-office and customer page overflowed
     by ~56px at 375px because the account or office chip was 196px wide
     beside three icon buttons, and the page scrolled sideways under a title
     that had wrapped to four lines. On a phone the chip is the icon and a
     short name, the account number badge goes (it is on the dashboard), the
     empty title column collapses, and nothing in the bar may grow past it. */
  .appbar{ overflow: hidden; }
  .appbar > *{ min-width: 0; }
  .appbar .account-chip{ max-width: 44vw; padding: 4px 8px; gap: 6px; }
  .appbar .account-chip .text-truncate{ max-width: 30vw !important; }
  .appbar .account-chip .badge{ display: none; }
  .appbar .dropdown.me-2{ margin-right: 4px !important; }
  .topbar-title:not(:has(h1:not(:empty))){ flex: 0 1 0; }
  .topbar-eyebrow, .topbar-subtitle{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions{ gap: 4px; flex: none; }
}

/* ── Side rail primary navigation (desktop) ─────────────────────────────── */
.app-body{ display: flex; flex: 1; min-height: 0; align-items: stretch; }
.app-main-col{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.navrail{
  flex-direction: column; gap: 2px;
  width: var(--rail-w); flex-shrink: 0;
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
  padding: 14px 10px 16px;
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
  overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.rail-item{
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--chrome-text); font-size: var(--fs-13); font-weight: 500;
  text-decoration: none; position: relative; border: 0; background: none;
  text-align: left; cursor: pointer;
  transition: background 100ms, color 100ms;
}
.rail-item i{ font-size: 16px; width: 20px; text-align: center;
              color: var(--chrome-muted); transition: color 100ms; }
.rail-item:hover{ background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.rail-item:hover i{ color: rgba(255,255,255,.85); }
.rail-item.active{ background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.rail-item.active::before{
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  background: var(--chrome-accent); border-radius: 0 3px 3px 0;
}
.rail-item.active i{ color: var(--chrome-accent); }
.rail-item:focus-visible{ outline: 2px solid var(--chrome-accent); outline-offset: -2px; }

/* Header alone is sticky now; tab row (mobile) sticks under it */
.appbar-group{ box-shadow: none; }
.tabbar.d-lg-none{ position: sticky; top: var(--topbar-h); z-index: 55; }

/* ── Collapsible rail (icons only) ─────────────────────────────────────── */
/* The module bar wraps each section in .rail-section so a link and its
   disclosure can share one underline. Everywhere else — the vertical rail the
   customer portal still uses — the wrapper must have no layout effect at all,
   which is what display:contents buys. The chevron inside it is hidden until
   the bar goes horizontal. */
.rail-section{ display: contents; }
.rail-disclose{ display: none; }
/* The product name belongs to the staff skin only — the customer portal and the
   wallet carry Redan's own branding, so the name never appears there. Hidden by
   default and revealed only inside the office module bar. */
.rail-brand{ display: none; }

.navrail{ transition: width 160ms ease; }
.navrail.collapsed{ width: 64px; padding-left: 8px; padding-right: 8px; }
.navrail.collapsed .rail-item{ justify-content: center; padding: 10px 0; }
.navrail.collapsed .rail-item span{ display: none; }
.navrail.collapsed .rail-item .tab-badge{
  position: absolute; top: 4px; right: 6px; margin: 0 !important;
  padding: 1px 5px; font-size: var(--fs-11);
}
.navrail.collapsed .rail-item i{ width: auto; }
.rail-collapse{ color: var(--chrome-muted); font-size: var(--fs-12); margin-top: 6px; }
.rail-collapse:hover{ color: #fff; }

/* Staff sign-in: visually distinct from the customer door so the two are
   never confused (internal access is never advertised to customers). */
.login-side-staff{background:linear-gradient(160deg,#0f2a44 0%,#16324f 60%,#1d3d5e 100%)}
.login-side-staff .login-brand-name::after{content:" · STAFF";font-weight:700;opacity:.7;
  letter-spacing:.08em;font-size:.72em}

/* ============ REPORT UNIT SELECTION ====================================== */
/* Litres / value / both is a view over figures that are always computed, so
   it hides cells rather than changing the query. Header and body cell carry
   the same class, so a column disappears whole and the table stays square —
   no colspan arithmetic, and the export is unaffected by the choice. */
.units-value  .u-litres { display: none !important; }
.units-litres .u-value  { display: none !important; }