/* ================================================================
   ALBARAA ZY MOTORSPORT — Hire-Purchase Management System
   Interface system rebuilt around the supplied brand kit.
   No build step; served directly by Cloudflare Workers assets.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --ink: #07080a;
  --ink-2: #0d0f12;
  --ink-3: #13161a;
  --panel: #111419;
  --panel-2: #171b20;
  --panel-3: #1d2229;
  --line: #282e36;
  --line-soft: #1f242b;
  --red: #ed171f;
  --red-2: #b70810;
  --red-soft: rgba(237,23,31,.12);
  --white: #f7f8fa;
  --text: #e7e9ed;
  --silver: #b9bec7;
  --muted: #7f8792;
  --success: #32c77a;
  --success-soft: rgba(50,199,122,.12);
  --warning: #e2a83b;
  --warning-soft: rgba(226,168,59,.12);
  --info: #5aa8ff;
  --info-soft: rgba(90,168,255,.12);
  --danger: #ff4a51;
  --danger-soft: rgba(255,74,81,.12);
  --shadow: 0 24px 70px rgba(0,0,0,.42);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.2);
  --radius: 12px;
  --radius-lg: 18px;
  --sidebar: 268px;
  --font-display: 'Rajdhani', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--text); font-family: var(--font-body); }
body { min-height: 100vh; font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
::selection { background: rgba(237,23,31,.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #313740; border-radius: 20px; border: 2px solid var(--ink-2); }
::-webkit-scrollbar-track { background: var(--ink-2); }

.is-hidden { display: none !important; }
.subtle, .muted { color: var(--muted); }
.text-red { color: var(--red); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-right { text-align: right; }
.no-wrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Shared buttons / form controls ---------- */
.btn {
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 15px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 650;
  cursor: pointer;
  transition: .18s ease;
  text-decoration: none;
  white-space: nowrap;
  background: var(--panel-2);
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, #f31d25, #b60910); border-color: #ff343b; color: #fff; box-shadow: 0 8px 22px rgba(237,23,31,.16); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.btn-secondary:hover { border-color: #414954; background: var(--panel-3); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--silver); }
.btn-ghost:hover { background: rgba(255,255,255,.05); color: var(--white); }
.btn-danger { background: var(--danger-soft); border-color: rgba(255,74,81,.24); color: #ff8186; }
.btn-success { background: var(--success-soft); border-color: rgba(50,199,122,.25); color: #71e2a6; }
.btn-lg { min-height: 48px; padding: 13px 18px; }
.btn-sm { min-height: 32px; padding: 6px 10px; border-radius: 7px; font-size: 12px; }
.btn-block { width: 100%; }

.icon-btn {
  width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); color: var(--silver); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .18s ease;
}
.icon-btn:hover { color: var(--white); border-color: #424954; background: var(--panel-3); }
.icon-btn svg { width: 19px; height: 19px; }

.field-label { display: block; margin: 14px 0 7px; color: #cbd0d7; font-size: 12px; font-weight: 650; }
.input-shell { position: relative; display: flex; align-items: center; }
.input-shell > svg { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.input-shell input { padding-left: 42px; }
.ghost-input { position: absolute; right: 5px; width: 34px; height: 34px; border: 0; background: transparent; }

input, select, textarea {
  width: 100%; background: #0d1014; border: 1px solid #2a3038; color: var(--text);
  border-radius: 9px; padding: 10px 12px; min-height: 42px; outline: none; transition: .16s ease;
}
textarea { resize: vertical; min-height: 92px; }
input::placeholder, textarea::placeholder { color: #626a74; }
input:focus, select:focus, textarea:focus { border-color: rgba(237,23,31,.85); box-shadow: 0 0 0 3px rgba(237,23,31,.08); }
select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%); background-position: calc(100% - 17px) 17px,calc(100% - 12px) 17px; background-size: 5px 5px,5px 5px; background-repeat:no-repeat; padding-right: 32px; }
input[type="file"] { padding: 8px; }
input[type="file"]::file-selector-button { background: var(--panel-3); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; margin-right: 10px; }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.form-note { background: var(--info-soft); border: 1px solid rgba(90,168,255,.18); color: #b9d8fb; padding: 11px 13px; border-radius: 9px; font-size: 12px; margin-top: 14px; }
.todo-note { background: var(--warning-soft); border: 1px solid rgba(226,168,59,.22); color: #e6c98c; padding: 11px 13px; border-radius: 9px; font-size: 12px; }

/* ---------- Auth screen ---------- */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(420px,.75fr); background: #08090b; }
.auth-visual { position: relative; overflow: hidden; min-height: 700px; background: #050607; border-right: 1px solid #20242b; }
.auth-visual::before { content:""; position:absolute; inset:0; background-image: linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.55)), url('/assets/honeycomb.png'); background-size: auto, 330px auto; opacity:.45; }
.auth-visual::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 70% 58%,rgba(237,23,31,.16),transparent 36%), linear-gradient(135deg,transparent 0 63%,rgba(237,23,31,.08) 63% 65%,transparent 65%); }
.auth-visual-grid { position:absolute; inset:0; opacity:.18; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom,#000,transparent 90%); }
.auth-logo { position:absolute; top:46px; left:56px; z-index:2; width:min(380px,48%); height:auto; }
.auth-copy { position:absolute; z-index:3; left:58px; top:32%; max-width: 590px; }
.eyebrow { font-family: var(--font-display); font-weight:700; letter-spacing:.14em; font-size:11px; color:#9199a4; text-transform:uppercase; }
.eyebrow.red { color:#ff545a; }
.auth-copy h1 { margin: 10px 0 12px; font-family: var(--font-display); font-size: clamp(42px,5vw,72px); line-height:.92; letter-spacing:-.025em; text-transform:uppercase; font-style:italic; color:#fff; }
.auth-copy p { max-width:520px; color:#9ba3ad; font-size:15px; }
.auth-car { position:absolute; z-index:2; width:min(850px,86%); right:-8%; bottom:-1%; filter: drop-shadow(0 28px 30px rgba(0,0,0,.7)); opacity:.95; }
.auth-red-line { position:absolute; z-index:4; left:0; right:0; bottom:0; height:6px; background: linear-gradient(90deg,var(--red) 0 26%,#4f0609 26% 34%,transparent 34%); }
.auth-form-wrap { display:flex; align-items:center; justify-content:center; padding:40px; background: linear-gradient(180deg,#0b0d10,#08090b); }
.auth-card { width:min(420px,100%); }
.auth-card h2 { font-family: var(--font-display); font-size:34px; line-height:1; margin:9px 0 7px; color:#fff; text-transform:uppercase; }
.auth-card .subtle { margin:0 0 28px; }
.auth-card .btn { margin-top:22px; }
.mobile-auth-logo { display:none; }
.auth-security-note { margin-top:18px; display:flex; gap:9px; align-items:flex-start; color:#6f7782; font-size:11px; line-height:1.45; }
.auth-security-note svg { width:18px; height:18px; flex:0 0 auto; margin-top:1px; }
.error-message, .success-message { border-radius:8px; padding:10px 12px; margin-top:12px; font-size:12px; }
.error-message { color:#ffb8bb; background:var(--danger-soft); border:1px solid rgba(255,74,81,.22); }
.success-message { color:#a8e9c7; background:var(--success-soft); border:1px solid rgba(50,199,122,.22); }

/* ---------- App layout ---------- */
.admin-body { overflow-x:hidden; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); background:var(--ink); }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; background:linear-gradient(180deg,#0c0e11,#080a0d); border-right:1px solid #20242b; z-index:40; }
.sidebar::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.09; background:url('/assets/carbon.png') repeat; background-size:38px auto; }
.sidebar-brand { position:relative; z-index:1; min-height:90px; display:flex; align-items:center; padding:20px 19px 15px; border-bottom:1px solid var(--line-soft); }
.sidebar-brand img { width:202px; max-width:calc(100% - 25px); height:auto; }
.sidebar-close { display:none; margin-left:auto; }
.mode-pill { position:relative; z-index:1; margin:14px 16px 8px; border:1px solid rgba(226,168,59,.2); background:rgba(226,168,59,.07); color:#dabb7a; border-radius:8px; padding:7px 9px; display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:.08em; }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--warning); box-shadow:0 0 0 4px rgba(226,168,59,.11); }
.side-nav { position:relative; z-index:1; padding:5px 10px 14px; overflow-y:auto; flex:1; }
.nav-caption { padding:15px 10px 6px; color:#555d68; font-size:9px; letter-spacing:.14em; font-weight:700; text-transform:uppercase; }
.nav-item { width:100%; border:0; background:transparent; color:#8d95a0; border-radius:9px; min-height:42px; padding:8px 10px; display:flex; align-items:center; gap:10px; cursor:pointer; font-size:12px; font-weight:550; text-align:left; transition:.16s ease; position:relative; }
.nav-item svg { width:18px; height:18px; flex:0 0 auto; }
.nav-item:hover { background:rgba(255,255,255,.035); color:#d4d8dd; }
.nav-item.active { color:#fff; background:linear-gradient(90deg,rgba(237,23,31,.14),rgba(237,23,31,.035)); box-shadow:inset 2px 0 0 var(--red); }
.nav-item.active svg { color:#ff3940; }
.nav-count { margin-left:auto; min-width:20px; height:20px; border-radius:20px; display:inline-flex; align-items:center; justify-content:center; background:var(--red); color:#fff; font-size:10px; font-weight:700; padding:0 6px; }
.sidebar-footer { position:relative; z-index:1; padding:10px; border-top:1px solid var(--line-soft); }
.sidebar-help { margin:2px 5px 10px; padding:11px 12px; border:1px solid #232830; background:rgba(255,255,255,.02); border-radius:9px; display:grid; gap:2px; }
.sidebar-help-kicker { color:#616974; font-size:8px; letter-spacing:.12em; font-weight:700; }
.sidebar-help strong { font-family:var(--font-display); color:#d8dbe0; font-size:12px; }
.sidebar-help span:last-child { color:#656d78; font-size:9px; }
.logout-item { color:#8d95a0; }
.logout-item:hover { color:#ff767b; background:rgba(237,23,31,.06); }

.main-shell { min-width:0; background: radial-gradient(circle at 82% -20%,rgba(237,23,31,.065),transparent 32%), var(--ink); }
.topbar { position:sticky; top:0; z-index:25; min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 28px; background:rgba(7,8,10,.88); border-bottom:1px solid rgba(40,46,54,.85); backdrop-filter: blur(14px); }
.topbar-left { display:flex; align-items:center; gap:13px; min-width:0; }
.page-kicker { color:#666f7a; font-size:9px; letter-spacing:.13em; font-weight:700; text-transform:uppercase; margin-bottom:1px; }
.topbar h1 { font-family:var(--font-display); text-transform:uppercase; margin:0; font-size:25px; line-height:1; letter-spacing:.01em; color:#f7f8fa; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.search-trigger { width:230px; height:40px; border:1px solid var(--line); background:#0d1014; color:#6f7781; border-radius:9px; display:flex; align-items:center; gap:8px; padding:0 9px; cursor:pointer; font-size:11px; }
.search-trigger:hover { border-color:#3a424c; color:#aeb4bc; }
.search-trigger svg { width:16px; height:16px; }
kbd { margin-left:auto; border:1px solid #303640; background:#171b20; color:#69717c; border-radius:5px; padding:2px 5px; font-size:9px; font-family:inherit; box-shadow:inset 0 -1px 0 rgba(255,255,255,.03); }
.profile-chip { margin-left:3px; display:flex; align-items:center; gap:9px; padding:4px 8px 4px 4px; border:1px solid var(--line-soft); border-radius:10px; background:rgba(255,255,255,.015); }
.profile-avatar { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#303640,#171b20); border:1px solid #383f49; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:12px; color:#e9eaed; }
.profile-copy { display:grid; line-height:1.15; min-width:70px; }
.profile-copy strong { font-size:10px; color:#d8dce1; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-copy span { font-size:9px; color:#6b737d; margin-top:3px; }
.mobile-menu { display:none; }

.training-banner { margin:18px 28px 0; min-height:50px; padding:10px 13px; display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid rgba(226,168,59,.2); border-radius:10px; background:linear-gradient(90deg,rgba(226,168,59,.085),rgba(226,168,59,.025)); }
.training-banner > div { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.training-banner strong { font-family:var(--font-display); letter-spacing:.06em; color:#e4bd68; font-size:12px; }
.training-banner span { color:#91836a; font-size:10px; }
.training-badge { border:1px solid rgba(226,168,59,.25); border-radius:6px; padding:4px 7px; font-weight:700; letter-spacing:.08em; }

.view-root { padding:25px 28px 52px; max-width:1600px; margin:0 auto; }
.view-enter { animation:viewIn .22s ease both; }
@keyframes viewIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

/* ---------- View headers ---------- */
.view-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.view-heading h2 { font-family:var(--font-display); font-size:26px; text-transform:uppercase; margin:0 0 3px; color:#fff; }
.view-heading p { margin:0; color:#717986; font-size:11px; max-width:700px; }
.view-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Overview ---------- */
.command-hero { position:relative; overflow:hidden; min-height:162px; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(112deg,#11151a 0 58%,#090b0e 58%); padding:25px 28px; margin-bottom:18px; box-shadow:var(--shadow-soft); }
.command-hero::before { content:""; position:absolute; inset:0; background:url('/assets/honeycomb.png'); background-size:260px auto; opacity:.14; }
.command-hero::after { content:""; position:absolute; right:-28px; top:-70px; width:370px; height:280px; background:url('/assets/racing-corner.png') center/contain no-repeat; opacity:.22; pointer-events:none; }
.command-hero-content { position:relative; z-index:2; max-width:720px; }
.command-hero h2 { font-family:var(--font-display); font-size:34px; text-transform:uppercase; margin:5px 0 4px; line-height:1; color:#fff; }
.command-hero p { color:#8f97a1; max-width:620px; margin:0; font-size:12px; }
.hero-actions { margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.hero-rule { position:absolute; left:0; bottom:0; height:4px; width:42%; background:linear-gradient(90deg,var(--red),#67080c 75%,transparent); }

.kpi-grid { display:grid; grid-template-columns:repeat(6,minmax(135px,1fr)); gap:10px; margin-bottom:18px; }
.kpi-card { position:relative; overflow:hidden; min-height:116px; padding:15px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,#12161b,#0f1216); }
.kpi-card::after { content:""; position:absolute; top:0; right:0; width:46px; height:3px; background:#3d444e; }
.kpi-card.alert::after { background:var(--red); }
.kpi-card.success::after { background:var(--success); }
.kpi-label { color:#7a828d; font-size:9px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.kpi-value { margin-top:9px; font-family:var(--font-display); font-size:31px; font-weight:700; line-height:1; color:#f4f5f7; }
.kpi-sub { color:#606873; font-size:9px; margin-top:7px; }
.kpi-sub strong { color:#aeb4bc; }

.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.65fr); gap:12px; margin-bottom:12px; }
.dashboard-grid.equal { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,#111419,#0f1216); box-shadow:0 7px 20px rgba(0,0,0,.11); min-width:0; }
.card-header { min-height:57px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 15px; border-bottom:1px solid var(--line-soft); }
.card-title-wrap { min-width:0; }
.card-title { margin:0; font-family:var(--font-display); font-size:16px; text-transform:uppercase; color:#e7e9ec; }
.card-subtitle { color:#626a75; font-size:9px; margin-top:1px; }
.card-body { padding:15px; }
.card-body.no-pad { padding:0; }

.chart-wrap { height:235px; position:relative; }
.chart-wrap svg { width:100%; height:100%; overflow:visible; }
.chart-grid-line { stroke:#242a31; stroke-width:1; }
.chart-axis-text { fill:#616975; stroke:none; font-size:9px; font-family:var(--font-body); }
.chart-area-due { fill:rgba(90,168,255,.06); stroke:none; }
.chart-line-due { stroke:#5aa8ff; fill:none; stroke-width:2; }
.chart-line-collected { stroke:#39cb80; fill:none; stroke-width:2.2; }
.chart-point { stroke-width:2; fill:#0f1216; }
.chart-legend { display:flex; gap:14px; align-items:center; font-size:9px; color:#747c87; }
.legend-dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; }
.legend-dot.due { background:var(--info); }
.legend-dot.collected { background:var(--success); }

.fleet-donut-row { display:grid; grid-template-columns:118px minmax(0,1fr); align-items:center; gap:18px; min-height:190px; }
.donut { width:112px; height:112px; border-radius:50%; position:relative; display:grid; place-items:center; background:conic-gradient(var(--red) 0 25%,#4d5661 25% 55%,var(--success) 55% 78%,var(--warning) 78% 100%); }
.donut::after { content:""; width:76px; height:76px; border-radius:50%; background:#111419; border:1px solid #252b32; }
.donut-center { position:absolute; z-index:2; text-align:center; }
.donut-center strong { display:block; font-family:var(--font-display); font-size:25px; line-height:1; }
.donut-center span { color:#686f79; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.fleet-legend { display:grid; gap:8px; }
.fleet-legend-row { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #1f242a; padding-bottom:7px; }
.fleet-legend-row:last-child { border-bottom:0; }
.fleet-legend-row span:first-child { display:flex; align-items:center; gap:7px; color:#8f969f; font-size:10px; }
.fleet-legend-row strong { font-family:var(--font-display); font-size:14px; }

.queue-list { display:grid; }
.queue-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:11px; align-items:center; padding:12px 15px; border-bottom:1px solid var(--line-soft); }
.queue-row:last-child { border-bottom:0; }
.queue-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#191e24; border:1px solid #252b33; color:#8b939d; }
.queue-icon svg { width:17px; height:17px; }
.queue-row-main { min-width:0; }
.queue-row-main strong { display:block; color:#d4d8dd; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-row-main span { color:#69717c; font-size:9px; }
.queue-value { text-align:right; font-size:10px; color:#b4bac2; }
.queue-value strong { display:block; font-family:var(--font-display); font-size:13px; color:#e3e5e8; }

.activity-list { display:grid; }
.activity-item { display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:10px; padding:11px 15px; border-bottom:1px solid var(--line-soft); align-items:start; }
.activity-item:last-child { border-bottom:0; }
.activity-dot { width:7px; height:7px; border-radius:50%; background:#4a535e; margin-top:5px; }
.activity-item:first-child .activity-dot { background:var(--red); box-shadow:0 0 0 3px rgba(237,23,31,.08); }
.activity-copy { min-width:0; }
.activity-copy strong { font-size:10px; color:#bfc4cb; }
.activity-copy span { display:block; color:#626a75; font-size:9px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-time { color:#59616b; font-size:8px; white-space:nowrap; }

/* ---------- Data views / tables ---------- */
.data-card { border:1px solid var(--line); border-radius:var(--radius); background:#101318; overflow:hidden; }
.table-toolbar { min-height:59px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line-soft); background:#111419; }
.toolbar-left, .toolbar-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.toolbar-search { width:250px; position:relative; }
.toolbar-search svg { position:absolute; width:15px; height:15px; left:11px; top:50%; transform:translateY(-50%); color:#626b76; }
.toolbar-search input { min-height:36px; padding:8px 10px 8px 34px; border-radius:8px; font-size:10px; background:#0c0f13; }
.filter-select { width:auto; min-width:140px; min-height:36px; padding-top:7px; padding-bottom:7px; font-size:10px; }
.result-count { color:#626a75; font-size:9px; }
.table-wrap { width:100%; overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:10px; }
th { height:38px; padding:8px 12px; background:#0c0f13; border-bottom:1px solid #252b32; color:#6d7580; font-size:8px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; text-align:left; white-space:nowrap; }
td { padding:11px 12px; border-bottom:1px solid #1c2127; color:#aeb4bc; vertical-align:middle; }
tbody tr { transition:.13s ease; }
tbody tr:hover { background:rgba(255,255,255,.018); }
tbody tr:last-child td { border-bottom:0; }
.clickable-row { cursor:pointer; }
.cell-primary { color:#e0e3e6; font-weight:600; font-size:10px; }
.cell-secondary { color:#656e78; font-size:9px; margin-top:2px; }
.cell-id { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#707986; font-size:9px; }
.table-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.table-empty { text-align:center; padding:42px 15px !important; color:#606873; }
.table-empty strong { display:block; color:#969da6; margin-bottom:4px; }

.status-badge { display:inline-flex; align-items:center; gap:5px; border-radius:20px; padding:4px 7px; border:1px solid #303640; background:rgba(255,255,255,.025); color:#a1a8b0; font-size:8px; font-weight:700; white-space:nowrap; }
.status-badge::before { content:""; width:5px; height:5px; border-radius:50%; background:#747c87; }
.status-badge.active, .status-badge.paid, .status-badge.approved, .status-badge.available, .status-badge.sent { color:#79dfaa; border-color:rgba(50,199,122,.2); background:rgba(50,199,122,.07); }
.status-badge.active::before, .status-badge.paid::before, .status-badge.approved::before, .status-badge.available::before, .status-badge.sent::before { background:var(--success); }
.status-badge.overdue, .status-badge.default, .status-badge.defaulted, .status-badge.rejected, .status-badge.failed { color:#ff8a8e; border-color:rgba(255,74,81,.22); background:rgba(255,74,81,.07); }
.status-badge.overdue::before, .status-badge.default::before, .status-badge.defaulted::before, .status-badge.rejected::before, .status-badge.failed::before { background:var(--danger); }
.status-badge.overduefinalnotice, .status-badge.pending, .status-badge.unallocated { color:#e8c77e; border-color:rgba(226,168,59,.22); background:rgba(226,168,59,.07); }
.status-badge.overduefinalnotice::before, .status-badge.pending::before, .status-badge.unallocated::before { background:var(--warning); }
.status-badge.onhirepurchase { color:#8bc4ff; border-color:rgba(90,168,255,.22); background:rgba(90,168,255,.07); }
.status-badge.onhirepurchase::before { background:var(--info); }
.status-badge.sold, .status-badge.repossessed, .status-badge.terminated, .status-badge.inactive { color:#9ba2ab; }

/* ---------- Detail drawer ---------- */
.drawer-backdrop { position:fixed; inset:0; z-index:69; background:rgba(0,0,0,.42); backdrop-filter:blur(2px); }
.detail-drawer { position:fixed; z-index:70; top:0; right:0; width:min(570px,94vw); height:100vh; background:#0d1014; border-left:1px solid #2a3038; box-shadow:-25px 0 70px rgba(0,0,0,.48); transform:translateX(103%); transition:.24s ease; display:flex; flex-direction:column; }
.detail-drawer.open { transform:translateX(0); }
.drawer-header { min-height:80px; padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:15px; background:#0f1216; }
.drawer-header h2 { margin:2px 0 0; font-family:var(--font-display); font-size:23px; text-transform:uppercase; }
.drawer-body { padding:18px 20px 36px; overflow-y:auto; flex:1; }
.detail-hero { border:1px solid #272d35; border-radius:12px; padding:16px; background:linear-gradient(135deg,#15191f,#101318); margin-bottom:14px; position:relative; overflow:hidden; }
.detail-hero::after { content:""; position:absolute; right:-20px; bottom:-45px; width:170px; height:120px; background:url('/assets/checkered-strip.png') center/contain no-repeat; opacity:.08; transform:rotate(-8deg); }
.detail-hero h3 { margin:5px 0 0; font-family:var(--font-display); font-size:27px; text-transform:uppercase; color:#fff; }
.detail-hero p { margin:3px 0 0; color:#6c7480; font-size:10px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.detail-stat { border:1px solid #232930; border-radius:9px; padding:10px 11px; background:#101419; min-width:0; }
.detail-stat span { display:block; color:#626a75; font-size:8px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px; }
.detail-stat strong { display:block; color:#d8dce1; font-size:11px; overflow-wrap:anywhere; }
.detail-section { margin-top:19px; }
.detail-section-title { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.detail-section-title h4 { margin:0; font-family:var(--font-display); text-transform:uppercase; font-size:14px; color:#dfe2e6; }
.mini-list { border:1px solid #232930; border-radius:10px; overflow:hidden; }
.mini-row { padding:10px 11px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; border-bottom:1px solid #1f242a; align-items:center; }
.mini-row:last-child { border-bottom:0; }
.mini-row strong { display:block; font-size:10px; color:#c8cdd3; }
.mini-row span { color:#636c77; font-size:9px; }
.timeline { display:grid; position:relative; }
.timeline::before { content:""; position:absolute; left:8px; top:8px; bottom:8px; width:1px; background:#292f37; }
.timeline-item { position:relative; padding:0 0 15px 27px; }
.timeline-dot { position:absolute; left:4px; top:5px; width:9px; height:9px; border-radius:50%; background:#12161b; border:2px solid #5b6470; }
.timeline-item:first-child .timeline-dot { border-color:var(--red); }
.timeline-item strong { display:block; font-size:10px; color:#c8cdd3; }
.timeline-item span { color:#666f7a; font-size:9px; }

/* ---------- Modal ---------- */
.modal-backdrop { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.7); backdrop-filter:blur(5px); }
.modal { width:min(620px,96vw); max-height:90vh; overflow:hidden; display:flex; flex-direction:column; border:1px solid #303640; border-radius:15px; background:#0e1115; box-shadow:var(--shadow); animation:modalIn .18s ease both; }
@keyframes modalIn { from { opacity:0; transform:translateY(9px) scale(.988); } to { opacity:1; transform:none; } }
.modal-header { min-height:72px; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); background:#111419; }
.modal-header h2 { margin:2px 0 0; font-family:var(--font-display); text-transform:uppercase; font-size:22px; }
.modal-body { padding:18px; overflow-y:auto; }

/* ---------- Command palette ---------- */
.command-backdrop { position:fixed; inset:0; z-index:95; display:flex; align-items:flex-start; justify-content:center; padding-top:min(16vh,150px); background:rgba(0,0,0,.62); backdrop-filter:blur(6px); }
.command-palette { width:min(650px,94vw); background:#101318; border:1px solid #323943; border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.62); overflow:hidden; }
.command-input-wrap { height:59px; display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid #282e36; }
.command-input-wrap svg { width:20px; height:20px; color:#7d8590; }
.command-input-wrap input { border:0; background:transparent; box-shadow:none; min-height:0; padding:0; font-size:13px; }
.command-input-wrap input:focus { box-shadow:none; }
.command-input-wrap kbd { margin-left:0; }
.command-results { max-height:420px; overflow:auto; padding:7px; }
.command-empty { color:#606873; text-align:center; padding:32px 15px; font-size:11px; }
.command-item { width:100%; border:0; background:transparent; border-radius:9px; padding:9px 10px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:10px; align-items:center; color:inherit; text-align:left; cursor:pointer; }
.command-item:hover, .command-item.active { background:#181d23; }
.command-type { width:34px; height:34px; border-radius:8px; background:#20262d; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:10px; font-weight:700; color:#9ca3ad; }
.command-copy { min-width:0; }
.command-copy strong { display:block; color:#d8dce1; font-size:10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.command-copy span { display:block; color:#626b76; font-size:9px; margin-top:2px; }
.command-meta { color:#59616b; font-size:8px; }

/* ---------- Reports ---------- */
.report-tabs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; padding:5px; border:1px solid var(--line); border-radius:10px; background:#0f1216; width:max-content; max-width:100%; }
.report-tab { border:0; background:transparent; color:#737b85; border-radius:7px; min-height:32px; padding:6px 10px; cursor:pointer; font-size:9px; font-weight:650; }
.report-tab:hover { color:#aeb4bc; background:rgba(255,255,255,.025); }
.report-tab.active { color:#fff; background:#252b32; }
.report-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.report-metric { border:1px solid var(--line); border-radius:10px; padding:12px; background:#101318; }
.report-metric span { color:#646d78; font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.report-metric strong { display:block; font-family:var(--font-display); color:#eef0f2; font-size:22px; margin-top:4px; }
.report-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:end; padding:12px; border:1px solid var(--line); border-radius:10px; background:#101318; margin-bottom:12px; }
.report-filter { min-width:150px; }
.report-filter label { display:block; color:#626a75; font-size:8px; margin-bottom:5px; text-transform:uppercase; letter-spacing:.06em; }
.report-filter input, .report-filter select { min-height:35px; padding:7px 9px; font-size:9px; }

/* ---------- Toasts ---------- */
.toast-stack { position:fixed; z-index:120; right:18px; bottom:18px; display:grid; gap:8px; width:min(360px,calc(100vw - 36px)); pointer-events:none; }
.toast { pointer-events:auto; border:1px solid #303740; background:#15191f; border-radius:10px; box-shadow:0 15px 35px rgba(0,0,0,.36); padding:11px 12px; display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:9px; align-items:start; animation:toastIn .2s ease both; }
@keyframes toastIn { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
.toast-icon { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.05); font-size:11px; }
.toast.success .toast-icon { color:var(--success); background:var(--success-soft); }
.toast.error .toast-icon { color:var(--danger); background:var(--danger-soft); }
.toast strong { display:block; color:#d9dde1; font-size:10px; }
.toast span { color:#737b86; font-size:9px; display:block; margin-top:2px; }
.toast button { border:0; background:transparent; color:#626a75; cursor:pointer; padding:0 2px; }

/* ---------- Skeleton / loading ---------- */
.skeleton { position:relative; overflow:hidden; background:#171b20 !important; color:transparent !important; border-color:#1c2127 !important; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent); animation:shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform:translateX(100%); } }
.loading-state { min-height:260px; display:grid; place-items:center; color:#626b76; }
.spinner { width:24px; height:24px; border:2px solid #2b3138; border-top-color:var(--red); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 10px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Public / Buyer portal ---------- */
.public-body { min-height:100vh; background:radial-gradient(circle at 82% 8%,rgba(237,23,31,.10),transparent 24%),#08090b; }
.portal-shell { max-width:1120px; margin:0 auto; padding:24px 22px 50px; }
.portal-topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:26px; }
.portal-topbar img { width:245px; max-width:58vw; }
.portal-topbar a { color:#777f89; font-size:10px; text-decoration:none; }
.portal-topbar a:hover { color:#fff; }
.portal-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr); gap:16px; align-items:stretch; }
.portal-hero { min-height:530px; border:1px solid var(--line); border-radius:18px; overflow:hidden; position:relative; background:#080a0d; }
.portal-hero::before { content:""; position:absolute; inset:0; background:url('/assets/hero-car.png') center bottom/cover no-repeat; opacity:.8; }
.portal-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,5,6,.08),rgba(4,5,6,.92) 82%),linear-gradient(90deg,rgba(237,23,31,.08),transparent 50%); }
.portal-hero-content { position:absolute; z-index:2; left:28px; right:28px; bottom:27px; }
.portal-hero h1 { font-family:var(--font-display); text-transform:uppercase; font-style:italic; font-size:42px; line-height:.94; margin:7px 0 9px; }
.portal-hero p { color:#9ca3ad; max-width:520px; margin:0; font-size:12px; }
.portal-card { border:1px solid var(--line); border-radius:18px; background:#0e1115; padding:25px; min-height:530px; display:flex; flex-direction:column; justify-content:center; }
.portal-card h2 { font-family:var(--font-display); text-transform:uppercase; font-size:30px; margin:7px 0 4px; }
.portal-card p { color:#747c87; margin:0 0 19px; font-size:11px; }
.portal-choice { border:1px solid #252b32; background:#11151a; border-radius:11px; padding:15px; text-decoration:none; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center; margin-top:9px; transition:.18s ease; }
.portal-choice:hover { border-color:#3a424b; background:#15191f; transform:translateY(-1px); }
.portal-choice.primary:hover { border-color:rgba(237,23,31,.45); }
.portal-choice-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background:#1d2228; color:#a8afb8; }
.portal-choice.primary .portal-choice-icon { background:var(--red-soft); color:#ff4d54; }
.portal-choice-icon svg { width:20px; height:20px; }
.portal-choice strong { display:block; font-size:11px; }
.portal-choice span { display:block; color:#676f79; font-size:9px; margin-top:2px; }
.portal-choice > svg { width:16px; height:16px; color:#5f6772; }

.buyer-shell { max-width:940px; margin:0 auto; padding:24px 22px 60px; }
.buyer-card { border:1px solid var(--line); border-radius:16px; background:#0e1115; overflow:hidden; }
.buyer-login { max-width:480px; margin:70px auto 0; padding:28px; }
.buyer-login h1 { font-family:var(--font-display); font-size:32px; text-transform:uppercase; margin:7px 0 4px; }
.buyer-login p { color:#717985; font-size:11px; margin:0 0 20px; }
.buyer-header { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:24px 0 15px; }
.buyer-header h1 { font-family:var(--font-display); text-transform:uppercase; font-size:31px; margin:0; }
.buyer-header p { margin:2px 0 0; color:#707884; font-size:10px; }
.buyer-summary { display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:9px; margin-bottom:12px; }
.buyer-summary-card { border:1px solid var(--line); border-radius:12px; background:#101318; padding:15px; }
.buyer-summary-card.featured { background:linear-gradient(135deg,#171b21,#101318); border-color:#343b45; }
.buyer-summary-card span { display:block; color:#68717c; font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.buyer-summary-card strong { display:block; font-family:var(--font-display); font-size:23px; color:#edf0f2; margin-top:5px; }
.buyer-content-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.75fr); gap:12px; }
.upload-zone { border:1px dashed #39414b; border-radius:11px; padding:18px; text-align:center; background:#0d1014; }
.upload-zone:hover { border-color:#555e69; }
.upload-list { list-style:none; margin:0; padding:0; }
.upload-list li { padding:10px 0; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:12px; align-items:center; color:#9ba2ab; font-size:10px; }
.upload-list li:last-child { border-bottom:0; }
.mode-watermark { border:1px solid rgba(226,168,59,.22); background:var(--warning-soft); color:#d6b66f; border-radius:9px; padding:9px 11px; text-align:center; font-size:10px; margin-bottom:14px; }
.stat-row { padding:10px 0; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:12px; }
.stat-row:last-child { border-bottom:0; }
.stat-row .label { color:#68717c; font-size:9px; }
.stat-row .value { color:#d8dce1; font-weight:600; font-size:10px; }
.badge { display:inline-flex; border-radius:20px; padding:4px 7px; border:1px solid #303640; font-size:8px; font-weight:700; }
.badge.status-active, .badge.status-approved { color:#79dfaa; border-color:rgba(50,199,122,.22); background:var(--success-soft); }
.badge.status-overdue, .badge.status-default, .badge.status-rejected { color:#ff8a8e; border-color:rgba(255,74,81,.22); background:var(--danger-soft); }
.badge.status-final-notice, .badge.status-pending { color:#e6c57c; border-color:rgba(226,168,59,.22); background:var(--warning-soft); }

/* ---------- Responsive ---------- */
.mobile-backdrop { display:none; }
@media (max-width: 1260px) {
  .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); }
}
@media (max-width: 1040px) {
  :root { --sidebar: 238px; }
  .sidebar-brand img { width:180px; }
  .dashboard-grid, .dashboard-grid.equal { grid-template-columns:1fr; }
  .report-summary { grid-template-columns:repeat(2,1fr); }
  .buyer-summary { grid-template-columns:repeat(2,1fr); }
  .buyer-content-grid { grid-template-columns:1fr; }
  .portal-grid { grid-template-columns:1fr; }
  .portal-hero { min-height:430px; }
  .portal-card { min-height:auto; }
}
@media (max-width: 820px) {
  .app-shell { display:block; }
  .sidebar { position:fixed; left:0; top:0; width:min(286px,88vw); transform:translateX(-103%); transition:.24s ease; box-shadow:25px 0 60px rgba(0,0,0,.5); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-close { display:inline-flex; }
  .mobile-backdrop { display:block; position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.54); opacity:0; pointer-events:none; transition:.2s ease; }
  .mobile-backdrop.open { opacity:1; pointer-events:auto; }
  .mobile-menu { display:inline-flex; }
  .topbar { padding:10px 16px; min-height:68px; }
  .view-root { padding:20px 16px 44px; }
  .training-banner { margin:14px 16px 0; }
  .search-trigger { width:40px; padding:0; justify-content:center; }
  .search-trigger span, .search-trigger kbd { display:none; }
  .profile-copy { display:none; }
  .profile-chip { padding:3px; }
  .command-hero { padding:21px; }
  .command-hero h2 { font-size:29px; }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .view-heading { align-items:flex-start; flex-direction:column; }
  .view-actions { width:100%; }
  .view-actions .btn { flex:1; }
  .table-toolbar { align-items:stretch; flex-direction:column; }
  .toolbar-left, .toolbar-right { width:100%; }
  .toolbar-search { flex:1; width:auto; }
  .auth-shell { display:block; }
  .auth-visual { display:none; }
  .auth-form-wrap { min-height:100vh; padding:28px 22px; }
  .mobile-auth-logo { display:block; margin-bottom:28px; }
  .mobile-auth-logo img { width:245px; max-width:70vw; }
}
@media (max-width: 600px) {
  .topbar h1 { font-size:20px; }
  .page-kicker { display:none; }
  .topbar-actions > .icon-btn:not(#mobile-menu) { display:none; }
  .training-banner { align-items:flex-start; }
  .training-banner > div { display:grid; gap:2px; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .kpi-card { min-height:100px; padding:12px; }
  .kpi-value { font-size:26px; }
  .fleet-donut-row { grid-template-columns:100px minmax(0,1fr); gap:11px; }
  .donut { width:96px; height:96px; }
  .donut::after { width:66px; height:66px; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .span-2 { grid-column:auto; }
  .detail-grid { grid-template-columns:1fr; }
  .modal-backdrop { padding:8px; align-items:flex-end; }
  .modal { width:100%; max-height:94vh; border-radius:14px 14px 0 0; }
  .report-summary { grid-template-columns:1fr 1fr; }
  .report-tabs { width:100%; overflow:auto; flex-wrap:nowrap; }
  .report-tab { white-space:nowrap; }
  .buyer-summary { grid-template-columns:1fr 1fr; }
  .portal-shell, .buyer-shell { padding-left:14px; padding-right:14px; }
  .portal-hero { min-height:360px; }
  .portal-hero h1 { font-size:34px; }
}

/* Report filter controls */
.report-filter-card{margin:0 0 12px;overflow:visible}
.report-filter-card .table-toolbar{align-items:flex-end}
.inline-filter{display:grid;gap:6px;min-width:150px}
.inline-filter span{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.inline-filter input,.inline-filter select{min-height:38px}
@media(max-width:760px){.report-filter-card .toolbar-left,.report-filter-card .toolbar-right{width:100%}.inline-filter{min-width:min(100%,220px);flex:1}}

/* ==================================================================
   SEPTEMBER 2026 OPERATIONS UX UPDATE
   Crisp black/white surfaces, larger type, light mode and contextual
   record workflows. No decorative grey-shadow UI.
   ================================================================== */
:root{
  --ink:#000;--ink-2:#050505;--ink-3:#0a0a0a;--panel:#050505;--panel-2:#0a0a0a;--panel-3:#111;
  --line:#292929;--line-soft:#1c1c1c;--white:#fff;--text:#fff;--silver:#e6e6e6;--muted:#a6a6a6;
  --shadow:none;--shadow-soft:none;
}
html[data-theme="light"]{
  color-scheme:light;
  --ink:#fff;--ink-2:#fafafa;--ink-3:#f4f4f4;--panel:#fff;--panel-2:#f8f8f8;--panel-3:#f1f1f1;
  --line:#dedede;--line-soft:#ececec;--white:#111;--text:#111;--silver:#333;--muted:#686868;
  --success-soft:#ecfff4;--warning-soft:#fff8e8;--info-soft:#eef6ff;--danger-soft:#fff0f0;
}
html[data-theme="light"],html[data-theme="light"] body{background:#fff;color:#111}
body{font-size:15px;line-height:1.55}.field-label{font-size:13px;color:var(--silver)}
input,select,textarea{background:var(--panel);border-color:var(--line);color:var(--text);font-size:14px}
input::placeholder,textarea::placeholder{color:var(--muted)}
.btn{background:var(--panel-2);border-radius:7px;font-size:13px;box-shadow:none}.btn:hover{transform:none}
.btn-primary{background:var(--red);border-color:var(--red);box-shadow:none}.btn-secondary{background:var(--panel);border-color:var(--line)}.btn-ghost:hover{background:var(--panel-2);color:var(--text)}
.icon-btn{background:var(--panel);border-color:var(--line);color:var(--silver)}
.app-shell{background:var(--ink)}.sidebar{background:#000;border-right:1px solid #222}.main-shell{background:var(--ink)}
html[data-theme="light"] .sidebar{background:#fff;border-right-color:#ddd}.sidebar::before{display:none}.nav-item{font-size:13px;color:#aaa;border-radius:6px}.nav-item:hover{background:#111;color:#fff}.nav-item.active{background:#111;box-shadow:inset 3px 0 0 var(--red)}
html[data-theme="light"] .nav-item{color:#555}html[data-theme="light"] .nav-item:hover{background:#f5f5f5;color:#111}html[data-theme="light"] .nav-item.active{background:#f5f5f5;color:#111}
.mode-pill{background:transparent;border-color:#6f551e;color:#e6bd67}.topbar{background:var(--ink);border-bottom:1px solid var(--line);backdrop-filter:none}.topbar h1,.view-heading h2,.card-title{color:var(--text)}.page-kicker,.view-heading p,.card-subtitle{color:var(--muted)}
.search-trigger{background:var(--panel);border-color:var(--line);color:var(--muted)}.profile-chip{background:var(--panel);border-color:var(--line)}.profile-avatar{background:var(--panel-3);color:var(--text);border-color:var(--line)}.profile-copy strong{color:var(--text)}
.view-heading{align-items:center;margin-bottom:18px}.view-heading h2{font-size:30px}.view-heading p{font-size:13px}
.card,.data-card,.command-hero,.kpi-card{background:var(--panel);box-shadow:none;border-color:var(--line)}.card{border-radius:8px}.data-card{border-radius:8px}.kpi-card{border-radius:8px;text-align:left;color:var(--text);cursor:default}.kpi-card[data-nav]{cursor:pointer}.kpi-card[data-nav]:hover{border-color:#666}.kpi-card::after{height:2px}.kpi-label{font-size:10px;color:var(--muted)}.kpi-value{font-size:29px;color:var(--text)}.kpi-sub{font-size:10px;color:var(--muted)}
.command-hero{display:none}.training-banner{display:none!important}.card-header{border-bottom-color:var(--line-soft)}
.table-wrap{background:var(--panel)}table{font-size:13px}thead th{background:var(--panel-2);color:var(--muted);font-size:10px;border-bottom-color:var(--line)}tbody td{border-bottom-color:var(--line-soft);color:var(--text)}tbody tr:hover{background:var(--panel-2)}
.status-badge{font-size:10px;border-radius:4px}.status-badge.allocatedunpaid{color:#79bfff;background:rgba(90,168,255,.10);border-color:rgba(90,168,255,.24)}.status-badge.businessabsorbed{color:#ddd;background:rgba(255,255,255,.07);border-color:#333}.status-badge.missing,.status-badge.incomplete,.status-badge.overdue,.status-badge.overduefinalnotice,.status-badge.default,.status-badge.defaulted,.status-badge.failed{color:#ff777c;background:var(--danger-soft);border-color:rgba(237,23,31,.28)}.status-badge.ready,.status-badge.uploaded,.status-badge.paid,.status-badge.completed,.status-badge.sent,.status-badge.approved{color:#59d994;background:var(--success-soft);border-color:rgba(50,199,122,.28)}
.link-btn{border:0;background:transparent;padding:0;color:var(--text);font-weight:700;cursor:pointer;text-align:left}.link-btn:hover{color:var(--red)}
.section-label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--muted);margin:2px 0 10px}.financial-kpis{grid-template-columns:repeat(6,minmax(150px,1fr))}.liability-kpis{grid-template-columns:repeat(3,minmax(180px,1fr));max-width:850px}.notification-kpis{grid-template-columns:repeat(4,minmax(150px,1fr))}
.attention-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:-6px 0 18px}.attention-grid button{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:12px 14px;text-align:left;cursor:pointer}.attention-grid button:hover{border-color:var(--red)}.attention-grid strong{display:block;font-family:var(--font-display);font-size:22px}.attention-grid span{display:block;color:var(--muted);font-size:11px}
.inner-tabs{display:flex;gap:3px;overflow:auto;border-bottom:1px solid var(--line);margin:0 0 18px}.inner-tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);padding:11px 12px;font-weight:700;white-space:nowrap;cursor:pointer}.inner-tab:hover{color:var(--text)}.inner-tab.active{color:var(--text);border-bottom-color:var(--red)}.tab-panel{min-width:0}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:14px 0}.info-block{background:var(--panel);padding:12px}.info-block span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.info-block strong{display:block;color:var(--text);font-size:13px;font-weight:650;word-break:break-word}
.readiness-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-left:3px solid var(--success);padding:12px 13px;margin-bottom:14px;background:var(--panel)}.readiness-card.attention{border-left-color:var(--red)}.readiness-card div{display:grid;gap:2px}.readiness-card strong{color:var(--text)}.readiness-card span{color:var(--muted);font-size:11px}
.record-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:21px 0 8px}.record-section-head h3{font-family:var(--font-display);text-transform:uppercase;margin:0;font-size:18px;color:var(--text)}.mini-list{border:1px solid var(--line);border-radius:7px;overflow:hidden}.mini-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-bottom:1px solid var(--line-soft);background:var(--panel);color:var(--text)}.mini-row:last-child{border-bottom:0}.mini-row>div:first-child{display:grid;gap:2px;text-align:left}.mini-row strong{font-size:13px}.mini-row span{font-size:10px;color:var(--muted)}.row-button{width:100%;border-top:0;border-left:0;border-right:0;cursor:pointer}.row-button:hover{background:var(--panel-2)}.empty-mini{padding:18px;color:var(--muted);font-size:12px}
.quick-docs,.compliance-grid>div{border:1px solid var(--line);background:var(--panel);padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.quick-docs div,.compliance-grid>div{color:var(--text)}.quick-docs div{display:grid}.quick-docs span,.compliance-grid span{font-size:10px;color:var(--muted)}.compliance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.compliance-grid>div{display:grid;grid-template-columns:1fr auto;align-items:center}.compliance-grid>div span{grid-column:1}.compliance-grid>div strong{grid-column:1}.compliance-grid>div button{grid-column:2;grid-row:1/3}
.statement-title,.statement-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.statement-title{border-bottom:2px solid var(--red);padding-bottom:12px;margin-bottom:14px}.statement-title span,.statement-head span{color:var(--muted);font-size:11px}.statement-title h2,.statement-head h3{margin:2px 0 0;font-family:var(--font-display);text-transform:uppercase;color:var(--text)}.statement-summary,.report-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 16px}.statement-summary>div,.report-summary>div{border:1px solid var(--line);padding:12px;background:var(--panel)}.statement-summary span,.report-summary span{display:block;color:var(--muted);font-size:10px}.statement-summary strong,.report-summary strong{display:block;font-size:20px;font-family:var(--font-display);color:var(--text);margin-top:4px}.statement-section{border:1px solid var(--line);padding:14px;margin:12px 0;background:var(--panel)}.progress-line{height:6px;background:var(--panel-3);margin:14px 0 6px;overflow:hidden}.progress-line span{display:block;height:100%;background:var(--red)}.settlement-card{border-left:3px solid var(--red);background:var(--panel-2);padding:12px;margin-top:14px;display:grid}.settlement-card strong{font-size:24px;color:var(--text)}.settlement-card small,.settlement-card span{color:var(--muted)}.empty-state-box{border:1px solid var(--line);padding:18px;display:grid;gap:4px}.empty-state-box span{color:var(--muted)}
.agreement-status-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);margin-bottom:14px}.agreement-status-strip>div{padding:11px;border-right:1px solid var(--line)}.agreement-status-strip>div:last-child{border-right:0}.agreement-status-strip span{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}.compact-calculation{border:1px solid var(--line);padding:10px 12px;color:var(--muted);min-height:42px}.closure-grid{display:grid;grid-template-columns:1fr;gap:7px}.closure-grid>div{border:1px solid var(--line);padding:10px}.closure-grid span{display:block;color:var(--muted);font-size:11px}.closure-grid strong{color:var(--text)}
.channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.channel-card{border:1px solid var(--line);background:var(--panel);padding:14px}.channel-card>div:first-child span{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.08em}.channel-card h3{margin:3px 0 10px;color:var(--text);font-size:18px}.channel-meta{display:flex;gap:5px;margin-bottom:10px}.channel-card dl{display:grid;grid-template-columns:80px 1fr;gap:5px;font-size:11px}.channel-card dt{color:var(--muted)}.channel-card dd{margin:0;color:var(--text)}.infrastructure-card{margin-top:12px}.infra-grid{display:grid;grid-template-columns:1fr auto;gap:8px 20px}.infra-grid span{color:var(--muted)}.infra-grid strong{color:var(--text)}.message-preview{max-width:460px;white-space:normal;line-height:1.45;color:var(--silver);font-size:11px}
.filter-bar{display:flex;align-items:end;gap:8px;flex-wrap:wrap;border:1px solid var(--line);background:var(--panel);padding:10px;margin:10px 0}.filter-bar label{display:grid;gap:3px;color:var(--muted);font-size:10px}.filter-bar input,.filter-bar select{min-width:150px}.report-tabs{display:none}
.table-actions{display:flex;gap:5px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.cell-secondary{color:var(--muted);font-size:10px}.cell-id{font-family:ui-monospace,monospace;color:var(--muted);font-size:9px;margin-top:2px}.data-card{overflow:hidden}.table-toolbar{border-bottom-color:var(--line)}
.modal{background:var(--panel);border-color:var(--line);box-shadow:none}.detail-drawer{background:var(--panel);border-left-color:var(--line);box-shadow:none}.modal-backdrop,.drawer-backdrop,.command-backdrop{background:rgba(0,0,0,.72)}html[data-theme="light"] .modal-backdrop,html[data-theme="light"] .drawer-backdrop,html[data-theme="light"] .command-backdrop{background:rgba(0,0,0,.35)}

/* Buyer portal */
.buyer-body{background:var(--ink);min-height:100vh}.buyer-login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,560px);background:var(--ink)}.buyer-login-brand{background:#000;display:flex;flex-direction:column;justify-content:center;padding:8vw;position:relative;overflow:hidden}.buyer-login-brand::after{content:"";position:absolute;width:65%;height:5px;background:var(--red);left:0;bottom:0}.buyer-login-brand img{width:min(440px,80%)}.buyer-login-brand h1{font-family:var(--font-display);font-size:54px;text-transform:uppercase;color:#fff;margin:25px 0 0}.buyer-login-card{align-self:center;margin:50px;width:min(420px,calc(100% - 60px))}.buyer-login-card h2{font-family:var(--font-display);text-transform:uppercase;font-size:34px;color:var(--text);margin:8px 0 20px}.buyer-topbar{height:76px;padding:10px max(20px,5vw);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--ink);position:sticky;top:0;z-index:10}.buyer-topbar img{width:230px}.buyer-topbar-actions{display:flex;gap:8px;align-items:center}.buyer-portal-root{max-width:1220px;margin:0 auto;padding:32px max(18px,3vw) 70px}.buyer-welcome{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.buyer-welcome>div{display:grid}.buyer-welcome span{color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11px}.buyer-welcome h1{font-family:var(--font-display);font-size:36px;text-transform:uppercase;color:var(--text);margin:2px 0}.buyer-welcome small{color:var(--muted)}.buyer-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.buyer-summary-card{border:1px solid var(--line);background:var(--panel);padding:16px}.buyer-summary-card.critical{border-top:3px solid var(--red)}.buyer-summary-card span{font-size:10px;color:var(--muted);text-transform:uppercase}.buyer-summary-card strong{display:block;font-family:var(--font-display);font-size:27px;color:var(--text);margin:6px 0}.buyer-summary-card small{color:var(--muted)}.buyer-panel{border:1px solid var(--line);background:var(--panel);margin-top:12px;padding:18px}.buyer-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.buyer-panel-head span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.buyer-panel-head h2{font-family:var(--font-display);text-transform:uppercase;font-size:22px;color:var(--text);margin:2px 0}.buyer-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}.buyer-info-grid>div{background:var(--panel);padding:12px}.buyer-info-grid span{display:block;color:var(--muted);font-size:10px}.buyer-info-grid strong{display:block;color:var(--text);margin-top:3px}.buyer-progress{height:7px;background:var(--panel-3);margin:16px 0 5px}.buyer-progress span{height:100%;background:var(--red);display:block}.buyer-settlement{display:grid;border-left:3px solid var(--red);padding:10px 12px;background:var(--panel-2);margin-top:15px}.buyer-settlement strong{font-size:24px;color:var(--text)}.buyer-settlement span,.buyer-settlement small{color:var(--muted)}.buyer-doc-list,.buyer-history-list{border:1px solid var(--line)}.buyer-doc-row,.buyer-history-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px;background:var(--panel);border:0;border-bottom:1px solid var(--line);color:var(--text);text-align:left}.buyer-doc-row:last-child,.buyer-history-row:last-child{border-bottom:0}.buyer-history-row{cursor:pointer}.buyer-history-row:hover,.buyer-history-row.selected{background:var(--panel-2)}.buyer-doc-row>div,.buyer-history-row>div{display:grid}.buyer-doc-row span,.buyer-history-row span{font-size:10px;color:var(--muted)}.rejection-text{color:var(--red);font-size:10px;margin-top:3px}.buyer-upload-dialog{max-width:540px}.upload-context{border:1px solid var(--line);background:var(--panel-2);padding:12px;display:grid;margin-bottom:12px}.upload-context strong{font-size:22px;color:var(--text)}.upload-context span{color:var(--muted)}.empty-account{padding:20px;display:grid;gap:4px}.empty-account span{color:var(--muted)}

@media(max-width:1250px){.financial-kpis{grid-template-columns:repeat(3,minmax(150px,1fr))}.attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.statement-summary,.report-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.buyer-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.financial-kpis,.liability-kpis,.notification-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid,.dashboard-grid.equal{grid-template-columns:1fr}.channel-grid{grid-template-columns:1fr}.info-grid,.compliance-grid,.buyer-info-grid{grid-template-columns:1fr}.buyer-login-shell{grid-template-columns:1fr}.buyer-login-brand{min-height:250px;padding:35px}.buyer-login-brand h1{font-size:38px}.buyer-login-card{margin:35px auto}.buyer-summary-grid{grid-template-columns:1fr 1fr}.agreement-status-strip{grid-template-columns:1fr}.agreement-status-strip>div{border-right:0;border-bottom:1px solid var(--line)}.agreement-status-strip>div:last-child{border-bottom:0}}
@media(max-width:620px){body{font-size:14px}.view-root{padding-left:15px;padding-right:15px}.financial-kpis,.liability-kpis,.notification-kpis,.attention-grid,.statement-summary,.report-summary,.buyer-summary-grid{grid-template-columns:1fr}.buyer-topbar img{width:170px}.buyer-portal-root{padding-top:20px}.buyer-welcome{align-items:flex-start;flex-direction:column}.buyer-panel{padding:12px}.table-wrap{overflow:auto}.statement-title{flex-direction:column}.view-heading{align-items:flex-start}.view-heading h2{font-size:26px}}
@media print{
  .buyer-topbar,.buyer-panel button,.buyer-history-list button,.btn{display:none!important}
  .buyer-account-shell,.buyer-portal-root,.buyer-panel,.buyer-summary-card{background:#fff!important;color:#000!important;border-color:#bbb!important}
  .buyer-portal-root{max-width:none;padding:0}.buyer-panel,.buyer-summary-card{break-inside:avoid}
  .buyer-panel h2,.buyer-panel strong,.buyer-welcome h1,.buyer-summary-card strong{color:#000!important}
  .buyer-panel span,.buyer-panel small,.buyer-welcome small,.buyer-summary-card span,.buyer-summary-card small{color:#444!important}
  table{font-size:10px}thead th,tbody td{color:#000!important;background:#fff!important;border-color:#ddd!important}
}

/* === September 2026 final visual refinement ===
   Stakeholder direction: stronger black/white contrast, larger readable type,
   no grey-card/shadow-heavy look, while retaining red as the brand accent. */
:root{
  --ink:#000000;
  --ink-2:#000000;
  --ink-3:#050505;
  --panel:#000000;
  --panel-2:#060606;
  --panel-3:#0b0b0b;
  --line:#2a2a2a;
  --line-soft:#1d1d1d;
  --white:#ffffff;
  --text:#ffffff;
  --silver:#e7e7e7;
  --muted:#b8b8b8;
  --shadow:none;
  --shadow-soft:none;
}
html[data-theme="light"]{
  --ink:#ffffff;
  --ink-2:#ffffff;
  --ink-3:#fafafa;
  --panel:#ffffff;
  --panel-2:#fafafa;
  --panel-3:#f4f4f4;
  --line:#d7d7d7;
  --line-soft:#e8e8e8;
  --white:#111111;
  --text:#111111;
  --silver:#333333;
  --muted:#666666;
  --shadow:none;
  --shadow-soft:none;
}
body{font-size:15px;line-height:1.55}
.field-label{font-size:13px}.btn{font-size:14px}.btn-sm{font-size:13px}
table{font-size:14px}thead th{font-size:11px}.cell-secondary{font-size:11px}.cell-id{font-size:10px}
.nav-item{font-size:14px}.kpi-label,.statement-summary span,.report-summary span,.buyer-summary-card span{font-size:11px}
.kpi-sub,.mini-row span,.buyer-doc-row span,.buyer-history-row span{font-size:11px}
.card,.data-card,.kpi-card,.statement-section,.buyer-panel,.buyer-summary-card,.channel-card{box-shadow:none!important}
html[data-theme="dark"] .sidebar{background:#000;border-right-color:#252525}
html[data-theme="dark"] .topbar{background:#000;border-bottom-color:#252525}
html[data-theme="dark"] tbody tr:hover,html[data-theme="dark"] .row-button:hover{background:#080808}
html[data-theme="dark"] .nav-item:hover{background:#0a0a0a;color:#fff}
html[data-theme="dark"] .nav-item.active{background:#0a0a0a;color:#fff}
.buyer-summary-grid-six{grid-template-columns:repeat(3,minmax(0,1fr))}
.statement-summary-wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.statement-summary .critical,.buyer-summary-card.critical{border-top:3px solid var(--red)}
@media(max-width:1000px){.buyer-summary-grid-six,.statement-summary-wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.buyer-summary-grid-six,.statement-summary-wide{grid-template-columns:1fr}}

/* ==================================================================
   v0.2 PROFESSIONAL POLISH
   Dense operational information with clearer hierarchy and less visual noise.
   ================================================================== */
:root{
  --radius-xs:5px;
  --radius-sm:7px;
  --radius-md:10px;
  --focus-ring:0 0 0 3px rgba(237,23,31,.16);
}
html{scrollbar-color:#343434 transparent}
html[data-theme="light"]{scrollbar-color:#bbb transparent}
body{letter-spacing:.003em}
button,input,select,textarea{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:var(--focus-ring)}
input[type="file"]{padding:9px;min-height:44px}
input[type="file"]::file-selector-button{border:1px solid var(--line);background:var(--panel-2);color:var(--text);padding:7px 10px;margin-right:10px;border-radius:5px;cursor:pointer}

.sidebar{width:var(--sidebar);padding-bottom:12px}
.sidebar-brand{min-height:91px;padding:18px 20px;border-bottom:1px solid #1f1f1f}
html[data-theme="light"] .sidebar-brand{border-bottom-color:#e6e6e6}
.sidebar-brand img{width:min(205px,86%)}
.side-nav{padding:13px 10px 18px}
.nav-caption{font-size:9px;letter-spacing:.15em;margin:17px 10px 7px;color:#6f6f6f}
.nav-item{min-height:42px;padding:9px 10px;gap:11px;font-weight:650;letter-spacing:.005em}
.nav-item svg{width:18px;height:18px;opacity:.82}
.nav-item.active svg{opacity:1}
.nav-count{min-width:21px;height:21px;padding:0 6px;display:inline-grid;place-items:center;margin-left:auto;border-radius:99px;background:var(--red);color:#fff;font-size:10px;font-weight:800}
.sidebar-footer{border-top:1px solid #1f1f1f;padding:11px 10px 0}
html[data-theme="light"] .sidebar-footer{border-top-color:#e8e8e8}

.topbar{min-height:78px;padding:12px 28px}
.topbar h1{font-size:25px;letter-spacing:-.015em}
.page-kicker{font-size:9px;letter-spacing:.14em}
.search-trigger{min-height:39px;border-radius:7px}
.profile-chip{border-radius:7px;min-height:42px}
.profile-avatar{border-radius:5px}

.view-root{padding:27px 28px 56px;max-width:1680px;width:100%;margin:0 auto}
.view-enter{animation:viewIn .16s ease-out}
@keyframes viewIn{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}
.view-heading{border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:20px}
.view-heading h2{font-size:32px;letter-spacing:-.025em}
.view-actions{gap:8px;display:flex;align-items:center;flex-wrap:wrap}

.btn{min-height:38px;padding:8px 12px;font-weight:750;letter-spacing:.01em;border-radius:6px}
.btn-sm{min-height:32px;padding:6px 9px;font-size:11px}
.btn-lg{min-height:47px;font-size:14px}
.btn-primary:hover{filter:brightness(1.08)}
.btn-secondary:hover{border-color:#777}
html[data-theme="light"] .btn-secondary:hover{border-color:#999;background:#f3f3f3}

.kpi-grid{gap:9px}
.kpi-card{min-height:119px;padding:16px;border-radius:7px;display:flex;flex-direction:column;justify-content:space-between}
.kpi-card[data-nav]{transition:border-color .15s ease,background .15s ease}
.kpi-card[data-nav]:hover{background:var(--panel-2);border-color:#666}
.kpi-card.alert{border-top:3px solid var(--red)}
.kpi-label{font-size:10px;font-weight:800;letter-spacing:.08em}
.kpi-value{font-size:31px;letter-spacing:-.025em;margin:5px 0}
.kpi-sub{font-size:11px;line-height:1.35}
.notification-kpis-six{grid-template-columns:repeat(6,minmax(135px,1fr))}

.card,.data-card,.buyer-panel,.statement-section{border-radius:7px}
.card-header{padding:15px 16px}
.card-body{padding:16px}
.card-title{font-size:16px;letter-spacing:.005em}
.card-subtitle{font-size:11px;margin-top:2px}
.section-label{font-size:10px;margin:22px 0 9px}

.table-wrap{border-radius:6px;overflow:auto;border:1px solid var(--line)}
.table-wrap table{border:0;min-width:760px}
thead th{position:sticky;top:0;z-index:2;font-size:9px;letter-spacing:.09em;padding:11px 12px;border-bottom:1px solid var(--line)}
tbody td{padding:11px 12px;vertical-align:middle;border-bottom:1px solid var(--line-soft);font-size:12px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.018)}
html[data-theme="light"] tbody tr:hover td{background:#fafafa}
.cell-id,.cell-secondary{font-size:10px;color:var(--muted);margin-top:2px}
.table-actions{gap:6px;flex-wrap:nowrap}
.link-btn{font-weight:750;text-decoration:none}

.table-toolbar{padding:12px;border-bottom:1px solid var(--line);gap:10px}
.toolbar-search{min-width:260px;max-width:480px;background:var(--panel);border-radius:6px}
.filter-bar{gap:8px;align-items:flex-end;padding:12px;border:1px solid var(--line);background:var(--panel);margin-bottom:12px;border-radius:7px}
.filter-bar label{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;display:grid;gap:5px}
.filter-bar input,.filter-bar select{min-height:37px;min-width:150px}

.inner-tabs{display:flex;gap:2px;padding:3px;background:var(--panel-2);border:1px solid var(--line);border-radius:7px;margin:0 0 13px;overflow:auto}
.inner-tab{border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:800;padding:9px 12px;border-radius:5px;white-space:nowrap;cursor:pointer}
.inner-tab:hover{color:var(--text);background:var(--panel)}
.inner-tab.active{background:var(--text);color:var(--ink)}
html[data-theme="light"] .inner-tab.active{background:#111;color:#fff}

.info-grid{gap:1px;border:1px solid var(--line);background:var(--line);border-radius:6px;overflow:hidden}
.info-block{background:var(--panel);padding:12px}
.info-block span{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.info-block strong{font-size:13px;margin-top:3px;color:var(--text);font-weight:750}
.record-section-head{margin-top:20px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.record-section-head h3{font-size:14px;letter-spacing:.01em}
.mini-list{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.mini-row{padding:11px 12px}

.modal-backdrop,.drawer-backdrop,.command-backdrop{backdrop-filter:blur(3px)}
.modal{border-radius:9px;border-color:#343434;box-shadow:0 20px 70px rgba(0,0,0,.55)}
html[data-theme="light"] .modal{border-color:#ddd;box-shadow:0 18px 55px rgba(0,0,0,.16)}
.modal-header{padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-header h2{font-size:23px}
.modal-body{padding:18px}
.form-grid{gap:14px 12px}
.form-actions{margin-top:6px;padding-top:15px;border-top:1px solid var(--line)}
.field-label{font-weight:750;letter-spacing:.015em}
.field-hint{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.4}
.detail-drawer{width:min(760px,94vw);background:var(--ink);border-left:1px solid var(--line)}
.drawer-header{padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-body{padding:20px}

.payment-context{border:1px solid var(--line);background:var(--panel-2);border-radius:7px;padding:13px}
.payment-context-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.payment-context-grid>div{background:var(--panel);padding:10px}
.payment-context-grid span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.07em}
.payment-context-grid strong{display:block;color:var(--text);font-size:12px;margin-top:3px}
.inline-alert{margin-top:10px;border-left:3px solid var(--warning);background:var(--warning-soft);padding:9px 11px;color:var(--text);font-size:11px}

.status-badge{font-size:9px;padding:4px 7px;font-weight:800;letter-spacing:.02em}
.status-badge.delivered,.status-badge.read{color:#59d994;background:var(--success-soft);border-color:rgba(50,199,122,.28)}
.status-badge.delivered::before,.status-badge.read::before{background:var(--success)}
.status-badge.retry,.status-badge.processing,.status-badge.pending,.status-badge.queued{color:#e6bd67;background:var(--warning-soft);border-color:rgba(226,168,59,.28)}
.status-badge.retry::before,.status-badge.processing::before,.status-badge.queued::before{background:var(--warning)}
.status-badge.test{color:#8bc4ff;background:var(--info-soft);border-color:rgba(90,168,255,.28)}
.status-badge.test::before{background:var(--info)}

.channel-grid{gap:10px}.channel-card{border-radius:7px;padding:15px}.channel-card h3{font-size:17px}.channel-meta{gap:5px}
.infrastructure-card code{font-size:11px;word-break:break-all}
.infra-grid{grid-template-columns:minmax(155px,.5fr) minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.infra-grid>*{background:var(--panel);padding:10px 12px;margin:0}
.infra-grid span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.infra-grid strong{font-size:12px;color:var(--text)}
.message-preview{max-width:440px;line-height:1.45;color:var(--silver)}

.attention-grid{gap:8px}.attention-grid button{min-height:88px;border-radius:7px;padding:13px;background:var(--panel);border:1px solid var(--line);text-align:left}.attention-grid button:hover{background:var(--panel-2);border-color:#666}.attention-grid strong{font-size:25px}.attention-grid span{font-size:10px;line-height:1.3}

.statement-summary-wide,.buyer-summary-grid-six{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.statement-summary>div,.buyer-summary-card{border-radius:6px;padding:15px}
.statement-summary span,.buyer-summary-card span{font-weight:800;letter-spacing:.065em}
.statement-summary strong,.buyer-summary-card strong{font-size:25px}
.statement-summary small,.buyer-summary-card small{font-size:10px;color:var(--muted)}
.statement-title{padding:8px 0 14px}.statement-title h2{font-size:27px}.statement-head{align-items:center}
.progress-line,.buyer-progress{border-radius:99px;height:7px}.progress-line span,.buyer-progress span{border-radius:99px}

.buyer-topbar{height:72px;box-shadow:none}.buyer-topbar img{width:210px}
.buyer-portal-root{max-width:1280px;padding-top:27px}
.buyer-welcome{padding-bottom:15px;border-bottom:1px solid var(--line)}
.buyer-welcome h1{font-size:35px;letter-spacing:-.02em}
.buyer-panel{padding:16px;border-radius:7px}
.buyer-panel-head{border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:13px}
.buyer-info-grid{border-radius:6px;overflow:hidden}
.buyer-doc-list,.buyer-history-list{border-radius:6px;overflow:hidden}
.buyer-history-row:hover,.buyer-history-row.selected{box-shadow:inset 3px 0 0 var(--red)}

.auth-card,.buyer-login-card{border:1px solid var(--line);background:var(--panel);padding:28px;border-radius:9px}
.auth-card h2,.buyer-login-card h2{letter-spacing:-.02em}
.auth-form-wrap{background:var(--ink)}
.buyer-login-brand h1{letter-spacing:-.025em}

@media(max-width:1360px){.notification-kpis-six{grid-template-columns:repeat(3,minmax(135px,1fr))}}
@media(max-width:900px){.view-root{padding:22px 18px 48px}.topbar{padding-left:18px;padding-right:18px}.payment-context-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.notification-kpis-six{grid-template-columns:repeat(2,minmax(135px,1fr))}}
@media(max-width:620px){.view-heading h2{font-size:27px}.view-heading{padding-bottom:13px}.view-actions{width:100%}.view-actions .btn{flex:1}.payment-context-grid,.notification-kpis-six{grid-template-columns:1fr}.statement-summary-wide,.buyer-summary-grid-six{grid-template-columns:1fr}.modal-body{padding:15px}.drawer-body{padding:15px}.filter-bar{display:grid;grid-template-columns:1fr}.filter-bar input,.filter-bar select{width:100%;min-width:0}.buyer-login-card{padding:22px}.buyer-topbar{padding-left:14px;padding-right:14px}.buyer-topbar-actions{gap:5px}.buyer-topbar-actions .btn{padding:6px 8px}}

@media print{
  .buyer-topbar,.sidebar,.topbar,.view-actions,.inner-tabs,.btn,.icon-btn{display:none!important}
  .buyer-portal-root,.view-root{max-width:none!important;padding:0!important;margin:0!important}
  body,.buyer-body,.admin-body{background:#fff!important;color:#111!important}
  .buyer-panel,.buyer-summary-card,.statement-section,.statement-summary>div{break-inside:avoid;border-color:#ccc!important;background:#fff!important;color:#111!important}
}
.rule-trigger-summary{border-left:3px solid var(--red);background:var(--panel-2);padding:11px 12px;display:grid;gap:2px;border-radius:0 6px 6px 0}.rule-trigger-summary span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.rule-trigger-summary strong{font-size:14px;color:var(--text)}.rule-trigger-summary small{font-size:10px;color:var(--muted)}
.buyer-preview-frame{background:var(--ink);padding:4px;max-width:1180px;margin:0 auto}.buyer-preview-frame .buyer-panel{margin-top:10px}.preview-readonly{align-self:flex-start;border:1px solid var(--line);background:var(--panel-2);color:var(--muted)!important;border-radius:99px;padding:5px 8px;font-size:9px!important;text-transform:uppercase;letter-spacing:.08em}

/* v0.3 — fleet position, buyer contract selector, owner financing details */
.fleet-kpis{grid-template-columns:repeat(3,minmax(180px,1fr));max-width:920px;margin-bottom:22px}
.fleet-kpis .kpi-card{min-height:118px}
.fleet-kpis .kpi-value{font-size:34px}

.owner-payment-details,.payment-details-preview{margin-top:14px;border:1px solid var(--line);background:var(--panel-2);border-radius:7px;padding:14px;display:grid;gap:6px}
.owner-payment-details>span,.payment-details-preview>span{font-size:9px;text-transform:uppercase;letter-spacing:.075em;color:var(--muted);font-weight:800}
.owner-payment-details>strong{font-size:13px;color:var(--text);line-height:1.55;font-weight:650;white-space:normal}
.owner-payment-details>small{margin-top:4px;color:var(--muted);font-size:10px}
.payment-details-preview>strong{font-size:15px;color:var(--text)}
.payment-details-preview>div{white-space:normal;line-height:1.55;color:var(--text);font-size:12px}
.contract-recipient-list{display:grid;gap:7px;margin-top:7px;max-height:320px;overflow:auto}
.contract-recipient{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:10px 11px;cursor:pointer}
.contract-recipient:hover{background:var(--panel-2)}
.contract-recipient input{width:auto;margin-top:3px;accent-color:var(--red)}
.contract-recipient span{display:grid;gap:2px}
.contract-recipient strong{font-size:12px;color:var(--text)}
.contract-recipient small{font-size:10px;color:var(--muted)}

.buyer-contract-selector{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:13px 14px;margin:14px 0}
.buyer-contract-selector>div{display:grid;gap:3px;min-width:0}
.buyer-contract-selector span{font-size:9px;text-transform:uppercase;letter-spacing:.075em;color:var(--muted);font-weight:800}
.buyer-contract-selector strong{font-size:14px;color:var(--text)}
.buyer-contract-selector select{width:min(540px,56vw);min-width:280px}

@media(max-width:900px){.fleet-kpis{grid-template-columns:repeat(3,minmax(130px,1fr));max-width:none}}
@media(max-width:620px){.fleet-kpis{grid-template-columns:1fr}.buyer-contract-selector{align-items:stretch;flex-direction:column}.buyer-contract-selector select{width:100%;min-width:0}}
@media print{.buyer-contract-selector{display:none!important}}

/* v0.3.1 — single page-title hierarchy. The sticky topbar is the only page heading. */
.view-heading.view-heading-compact{
  min-height:0;
  margin:0 0 14px;
  padding:0;
  border-bottom:0;
  align-items:center;
  justify-content:flex-end;
}
.view-heading.view-heading-compact.has-description{
  justify-content:space-between;
}
.view-heading.view-heading-compact > p{
  margin:0;
  max-width:760px;
}
@media(max-width:620px){
  .view-heading.view-heading-compact{
    margin-bottom:12px;
    padding-bottom:0;
    align-items:stretch;
  }
}


/* v0.4.2 cross-device hardening */
html,body{max-width:100%;overflow-x:hidden}
.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
input,select,textarea,button{max-width:100%}
@media(max-width:820px){
  .main-shell{width:100%;min-width:0}
  .topbar-left{min-width:0}
  .topbar-actions{flex-shrink:0}
  .detail-drawer{width:min(94vw,520px)}
}
@media(max-width:620px){
  .auth-form-wrap{padding:20px 14px}
  .auth-card{width:100%;max-width:100%;padding:22px 18px}
  .buyer-login-shell{min-height:100svh}
  .buyer-login-brand{min-height:150px;padding:24px 18px}
  .buyer-login-brand img{width:min(220px,72vw)}
  .buyer-login-card{width:calc(100% - 28px);margin:22px auto;padding:22px 18px}
  .buyer-topbar{gap:10px;align-items:flex-start;flex-wrap:wrap}
  .buyer-topbar-actions{width:100%;display:flex;flex-wrap:wrap}
  .buyer-topbar-actions .btn{flex:1 1 auto;min-height:42px}
  .topbar-actions{gap:4px}
  .profile-chip{max-width:44px}
  .table-wrap table{min-width:680px}
  .modal{max-width:100%}
  .detail-drawer{width:100vw}
}


/* v0.4.3 — distraction-free portal sign-in screens */
.portal-login-screen{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:28px 18px;background:var(--ink);}
.portal-login-card{width:min(420px,100%);display:flex;flex-direction:column;gap:0;padding:30px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:none;}
.portal-login-logo{display:block;width:min(250px,72%);height:auto;margin:0 auto 28px;}
.portal-login-card h1{margin:0 0 26px;text-align:center;font-family:var(--font-display);font-size:32px;line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;color:var(--text);}
.portal-login-card .field-label{margin-top:14px;}
.portal-login-card .btn{margin-top:24px;}
.portal-login-card input{width:100%;}
.portal-login-card #login-error,.portal-login-card #buyer-login-error{margin-top:12px;}
@media(max-width:620px){.portal-login-screen{padding:18px 14px;align-items:center}.portal-login-card{padding:24px 18px;border-radius:8px}.portal-login-logo{width:min(220px,72vw);margin-bottom:24px}.portal-login-card h1{font-size:28px;margin-bottom:22px}}