/* ---------- Design tokens ----------
   SAMLAR MS — barn green + weathered egg-yolk gold + warm paper, on Inter type
   with tabular JetBrains Mono for every figure/quantity — a farm ledger feel,
   modernized with soft depth, generous spacing, and a graphical dashboard.
*/
:root {
  --ink: #22241F;
  --ink-soft: #55544a;
  --muted: #8a8878;
  --barn: #24331F;
  --barn-light: #3B5233;
  --barn-lighter: #4E6C43;
  --yolk: #E0A937;
  --yolk-dark: #B8842E;
  --yolk-soft: #FBF0D6;
  --paper: #FAF7F0;
  --paper-dim: #F1ECDF;
  --card: #FFFFFF;
  --line: #E4DECB;
  --danger: #B23A28;
  --danger-soft: #FBEAE6;
  --ok: #3E7A4C;
  --ok-soft: #E4F1E4;
  --info: #2E6B8A;
  --info-soft: #E4EFF5;
  /* Two supporting pastel tints for the dashboard's graphical summary cards — the barn/yolk
     pair stays the primary brand identity everywhere else (nav, buttons, badges); these two
     exist only to give the top-of-dashboard stat cards the same friendly, tinted-panel variety
     a farmer flipping between "today's numbers" cards would expect, without diluting the brand. */
  --mint: #E7F4E2;
  --mint-ink: #2F6B3E;
  --sky: #E4EEF8;
  --sky-ink: #2A5F8A;
  --radius: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(34,36,31,0.06), 0 1px 1px rgba(34,36,31,0.04);
  --shadow-md: 0 8px 24px rgba(34,36,31,0.08), 0 2px 6px rgba(34,36,31,0.06);
  --shadow-lg: 0 24px 64px rgba(20,24,16,0.28);
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .card h2 { font-family: var(--font-display); letter-spacing: 0; }
.hidden { display: none !important; }
.tabular { font-family: 'JetBrains Mono', "SF Mono", "Roboto Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }

/* ---------- Landing / intro page ---------- */
.landing-screen {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(224,169,55,0.16), transparent 40%),
    radial-gradient(circle at 92% 90%, rgba(78,108,67,0.4), transparent 55%),
    linear-gradient(155deg, var(--barn) 0%, #121B0D 100%);
  display: flex; align-items: center; justify-content: center; padding: 72px 40px;
}
@media (max-width: 600px) { .landing-screen { padding: 48px 20px; } }
/* signature detail: subtle grain so the dark hero never looks like a flat gradient */
.landing-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
/* signature detail: one confident diagonal shard of gold breaking the flat backdrop */
.landing-diagonal {
  position: absolute; top: -20%; right: -10%; width: 60%; height: 160%;
  background: linear-gradient(135deg, rgba(224,169,55,0.10), transparent 55%);
  transform: rotate(-12deg);
  pointer-events: none;
}
.landing-inner {
  position: relative; z-index: 1;
  max-width: 1180px; width: 100%; color: var(--paper);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center;
}
@media (max-width: 900px) { .landing-inner { grid-template-columns: 1fr; gap: 48px; } }

.landing-left { text-align: left; }
.landing-brand { margin-bottom: 34px; }
.brand-mark-svg.large { width: 60px; height: 60px; display: block; margin-bottom: 22px; }
.landing-eyebrow {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: var(--yolk); margin: 0 0 14px;
}
.landing-brand h1 {
  font-family: var(--font-display); font-size: 54px; font-weight: 700; margin: 0 0 18px; line-height: 1.02;
  letter-spacing: -0.5px;
}
@media (max-width: 600px) { .landing-brand h1 { font-size: 34px; } .landing-tagline { font-size: 15px; } }
.landing-brand h1 em { font-style: italic; font-weight: 500; color: var(--yolk); }
.landing-tagline { font-size: 16.5px; color: #d7ddce; max-width: 420px; margin: 0; line-height: 1.6; }

.landing-cta {
  margin-top: 38px;
  background: var(--yolk); color: var(--ink); border: none; padding: 16px 30px;
  border-radius: 3px; font-family: var(--font-body); font-size: 14.5px; font-weight: 700;
  letter-spacing: 0.2px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-md); transition: transform .12s, background .15s, gap .15s;
}
@media (max-width: 600px) { .landing-cta { width: 100%; justify-content: center; } }
.landing-cta:hover { background: #ecbb52; gap: 15px; }
.landing-cta:active { transform: translateY(1px); }

/* editorial numbered list — replaces the generic centered card grid */
.landing-features { list-style: none; margin: 0; padding: 0; text-align: left; }
.feature-row {
  display: grid; grid-template-columns: 34px 30px 1fr; column-gap: 16px; align-items: start;
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.14);
}
.landing-features li:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.feature-index {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--yolk);
  font-weight: 600; padding-top: 3px;
}
.feature-icon-svg { width: 26px; height: 26px; color: var(--yolk); flex-shrink: 0; }
.feature-copy h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #fff; font-family: var(--font-display); }
.feature-copy p { margin: 0; font-size: 12.5px; color: #b9c0ae; line-height: 1.55; max-width: 40ch; }

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(224,169,55,0.16), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(78,108,67,0.35), transparent 50%),
    linear-gradient(160deg, var(--barn) 0%, #1A2617 100%);
  padding: 24px;
}
.login-card {
  background: var(--card);
  border-radius: 4px;
  padding: 46px 40px;
  width: 100%; max-width: 420px;
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--yolk);
  position: relative;
}
@media (max-width: 480px) { .login-card { padding: 32px 22px; } }
.brand { text-align: center; margin-bottom: 30px; }
.brand-mark-svg {
  width: 56px; height: 56px; margin: 0 auto 12px; display: block;
  filter: drop-shadow(0 2px 4px rgba(34,36,31,0.15));
}
.brand-mark-svg.small { width: 26px; height: 26px; margin: 0 8px 0 0; display: inline-block; vertical-align: -6px; }
.brand h1 { margin: 6px 0 2px; font-size: 27px; font-weight: 700; letter-spacing: -0.2px; }
.brand-sub { margin: 0; color: var(--muted); font-size: 13px; font-family: var(--font-body); }

#login-form label, #register-form label {
  display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 14px; color: var(--ink-soft);
}
#login-form input, #register-form input, #register-form select {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 7px; font-size: 16px; background: #fff;
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
#login-form input:focus, #register-form input:focus, #register-form select:focus {
  outline: none; border-color: var(--barn-lighter); box-shadow: 0 0 0 3px rgba(78,108,67,0.15);
}
#login-form button, #register-form button {
  width: 100%; padding: 12px; margin-top: 6px;
  background: var(--barn); color: var(--paper); border: none; border-radius: 7px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer;
  transition: background .15s, transform .1s;
}
#login-form button:hover, #register-form button:hover { background: var(--barn-light); }
#login-form button:active, #register-form button:active { transform: scale(0.99); }
.login-error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 8px 0 0; }

.switch-form-link { text-align: center; font-size: 13px; margin: 12px 0 0; }
.switch-form-link a { color: var(--barn); font-weight: 700; text-decoration: none; }
.switch-form-link a:hover { text-decoration: underline; }
.register-success { color: var(--ok); font-size: 13px; margin: 8px 0 0; }


/* ---------- App shell: responsive sidebar ---------- */
.app { min-height: 100vh; display: flex; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.sidebar {
  width: 240px; flex-shrink: 0; background: linear-gradient(180deg, var(--barn) 0%, #1B2916 100%);
  color: var(--paper); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: 30;
  transition: width .18s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 16px; white-space: nowrap; overflow: hidden; }
.sidebar-brand-text { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.sidebar nav.tabs { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; flex: 1; overflow-y: auto; overflow-x: hidden; }
.sidebar nav.tabs button {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: transparent; border: none; color: #cfd6c9; padding: 10px 12px;
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  font-family: inherit; transition: background .15s, color .15s;
}
.sidebar nav.tabs button .tab-icon { width: 19px; height: 19px; flex-shrink: 0; display: flex; }
.sidebar nav.tabs button .tab-icon svg { width: 100%; height: 100%; }
.sidebar nav.tabs button.active { background: var(--yolk); color: var(--ink); }
.sidebar nav.tabs button:hover:not(.active) { background: rgba(255,255,255,0.1); color: #fff; }
.sidebar-footer { padding: 14px 16px 18px; border-top: 1px solid rgba(255,255,255,0.14); }
.sidebar-user { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; overflow: hidden; }
.sidebar-user-name { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-pill { background: var(--yolk); color: var(--ink); padding: 3px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; align-self: flex-start; }
.sidebar-footer .link-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-decoration: none;
  color: #cfd6c9; padding: 9px 8px; margin: 0 -4px;
  /* these are <button>s: strip the UA border/background/font so they match the nav items
     rather than rendering as grey bevelled OS buttons inside the dark sidebar */
  background: none; border: 0; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; text-align: left;
  transition: background .15s, color .15s;
}
.sidebar-footer .link-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-footer .link-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }

.role-switcher { margin-bottom: 12px; }
.role-switcher-label { display: block; font-size: 10px; color: #9fab93; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; margin-bottom: 5px; }
#role-switcher-select, #request-role-select {
  width: 100%; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 7px; padding: 7px 9px; font-size: 12.5px; font-family: inherit;
}
#role-switcher-select option, #request-role-select option { color: var(--ink); }
.request-role-form { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.request-role-form button { width: 100%; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15,18,10,0.5); z-index: 25; }
.sidebar-overlay.show { display: block; }

.mobile-topbar { display: none; }
.hamburger-btn { background: none; border: none; padding: 6px; cursor: pointer; color: var(--ink); display: flex; }
.hamburger-btn svg { width: 24px; height: 24px; }

.view { flex: 1; padding: 26px; max-width: 1180px; width: 100%; margin: 0 auto; }
@media (max-width: 640px) { .view { padding: 14px; } }

/* Tablet: icon-only mini-sidebar, labels become native tooltips on hover */
@media (max-width: 1024px) and (min-width: 768px) {
  .sidebar { width: 72px; }
  .sidebar-brand-text, .sidebar-footer-label, .sidebar-user, .role-switcher, .request-role-form { display: none; }
  .sidebar-brand { justify-content: center; padding: 20px 0 16px; }
  .sidebar nav.tabs button { justify-content: center; padding: 12px; }
  .sidebar nav.tabs button .tab-label { display: none; }
  .sidebar-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 18px; }
  .sidebar-footer .link-btn { width: auto; justify-content: center; padding: 8px; }
}

/* Mobile: sidebar hidden, slides in as an overlay drawer via the hamburger icon */
@media (max-width: 767px) {
  .mobile-topbar {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: var(--card); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 20;
  }
  .mobile-topbar-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; flex: 1; }
  .mobile-topbar .brand-mark-svg.small { margin: 0; }
  .sidebar {
    position: fixed; top: 0; left: 0; width: 250px; height: 100vh;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
}

/* ---------- Shared components ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.card .sub { color: var(--muted); font-size: 12.5px; margin: 0 0 16px; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .grid.cols-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .grid.cols-6 { grid-template-columns: repeat(2, 1fr); } }

.stat {
  border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px;
  background: linear-gradient(180deg, #fff 0%, var(--paper-dim) 130%);
  position: relative; overflow: hidden;
}
.stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--yolk); }
.stat .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 700; }
.stat .value { font-size: 25px; font-weight: 800; margin-top: 4px; }
.stat .value.neg { color: var(--danger); }
.stat .value.pos { color: var(--ok); }
.stat .hint { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* progress / bar-chart visualization (pure CSS, no chart libs) */
.barrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.barrow .barlabel { width: 120px; font-size: 12px; font-weight: 600; color: var(--ink-soft); flex-shrink: 0; }
.barrow .bartrack { flex: 1; height: 14px; background: var(--paper-dim); border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.barrow .barfill { height: 100%; background: linear-gradient(90deg, var(--barn-lighter), var(--ok)); border-radius: 8px; transition: width .3s; }
.barrow .barfill.warn { background: linear-gradient(90deg, var(--yolk-dark), var(--yolk)); }
.barrow .barfill.low { background: linear-gradient(90deg, var(--danger), #d9604a); }
.barrow .barval { width: 64px; text-align: right; font-size: 12px; font-weight: 700; flex-shrink: 0; }
@media (max-width: 480px) { .barrow .barlabel { width: 78px; font-size: 11px; } .barrow .barval { width: 52px; font-size: 11px; } }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
.diag-table { max-width: 420px; }
.diag-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.diag-table td:first-child { color: var(--muted); }
th, td { text-align: left; padding: 10px 11px; border-bottom: 1px solid var(--line); }
th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 700; background: var(--paper-dim); }
tbody tr:hover { background: var(--paper-dim); }
td.num { font-family: 'JetBrains Mono', "SF Mono", monospace; text-align: right; }
th.num { text-align: right; }
.table-wrap { overflow-x: auto; }

form.inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 18px; }
form.inline label { display: flex; flex-direction: column; font-size: 11px; font-weight: 700; color: var(--ink-soft); gap: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
form.inline input, form.inline select {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; min-width: 130px;
  font-family: inherit; background: #fff; transition: border-color .15s, box-shadow .15s;
}
form.inline input:focus, form.inline select:focus { outline: none; border-color: var(--barn-lighter); box-shadow: 0 0 0 3px rgba(78,108,67,0.15); }
form.inline button {
  background: var(--barn); color: var(--paper); border: none; padding: 10px 18px;
  border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer; height: 39px;
  transition: background .15s, transform .1s;
}
form.inline button:hover { background: var(--barn-light); }
form.inline button:active { transform: scale(0.98); }
form.inline button.danger { background: var(--danger); }
form.inline button.danger:hover { background: #8f2d1f; }
form.inline .fullrow { flex-basis: 100%; }
@media (max-width: 600px) {
  form.inline { flex-direction: column; align-items: stretch; gap: 10px; }
  form.inline label, form.inline input, form.inline select, form.inline button { width: 100%; min-width: 0; }
  /* 44px is the standard minimum comfortable tap target size (Apple HIG / Android guidance) —
     the default 38-39px from the desktop padding values is a little tight for touch. */
  form.inline input, form.inline select { font-size: 16px; padding: 12px 11px; min-height: 44px; box-sizing: border-box; }
  form.inline button { min-height: 44px; }
  .card { padding: 16px; }
}

.btn-sm { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 11.5px; font-weight: 600; transition: all .15s; }
@media (max-width: 600px) { .btn-sm { padding: 8px 12px; font-size: 12.5px; } }
.btn-sm:hover { border-color: var(--barn-lighter); background: var(--paper-dim); }
.btn-sm.primary { background: var(--barn); color: var(--paper); border-color: var(--barn); }
.btn-sm.primary:hover { background: var(--barn-light); }
.btn-sm.danger { background: none; border-color: var(--danger); color: var(--danger); }
.btn-sm.danger:hover { background: var(--danger-soft); }
.btn-sm.ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-sm.ok:hover { opacity: .9; }

.badge { padding: 3px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 800; text-transform: capitalize; letter-spacing: 0.2px; }
.badge.pending { background: var(--yolk-soft); color: var(--yolk-dark); }
.badge.reserved { background: var(--yolk-soft); color: var(--yolk-dark); }
.badge.partial { background: var(--info-soft); color: var(--info); }
.badge.delivered { background: var(--ok-soft); color: var(--ok); }
.badge.received { background: var(--ok-soft); color: var(--ok); }
.badge.completed, .badge.paid { background: var(--barn); color: var(--paper); }
.badge.active { background: var(--ok-soft); color: var(--ok); }
.badge.sold { background: var(--paper-dim); color: var(--muted); }
.badge.revoked { background: var(--paper-dim); color: var(--muted); }
.badge.unpaid { background: var(--danger-soft); color: var(--danger); }

.alert-item { padding: 11px 13px; border-left: 3px solid var(--danger); background: var(--danger-soft); margin-bottom: 8px; font-size: 13px; border-radius: 5px; }
.alert-item.warn { border-left-color: var(--yolk-dark); background: var(--yolk-soft); }
.empty { color: var(--muted); font-size: 13px; padding: 22px 0; text-align: center; }
.toast {
  position: fixed; bottom: 20px; right: 20px; background: var(--barn); color: var(--paper);
  padding: 13px 20px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(10px); transition: all 0.2s; pointer-events: none; z-index: 100;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--danger); }

.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 800; margin: 26px 0 10px; }
.section-title:first-child { margin-top: 0; }
.pill-note { display: inline-block; background: var(--info-soft); color: var(--info); font-size: 11.5px; padding: 6px 12px; border-radius: 7px; margin-bottom: 14px; }
.pill { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; vertical-align: middle; }
.pill.warn { background: var(--yolk-soft); color: var(--yolk-dark); }
.date-locked-note { display: inline-flex; align-items: center; font-size: 11px; color: var(--muted); font-style: italic; align-self: flex-end; padding-bottom: 9px; }

/* ---------- Dashboard: icon-chip stats, split layout, donut gauge ---------- */
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.dash-head h1 { font-size: 24px; font-weight: 700; margin: 0; }
.dash-head .dash-sub { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.dash-period { border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 7px 16px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
@media (max-width: 480px) { .dash-head h1 { font-size: 20px; } .donut-wrap { width: 140px; height: 140px; } .ichip { padding: 13px 14px; } }

.dash-chiprow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.ichip { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.ichip-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--yolk-soft); color: var(--yolk-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ichip-icon svg { width: 21px; height: 21px; }
.ichip-icon.ok { background: var(--ok-soft); color: var(--ok); }
.ichip-icon.danger { background: var(--danger-soft); color: var(--danger); }
.ichip-icon.info { background: var(--info-soft); color: var(--info); }
.ichip-body .ichip-label { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.ichip-body .ichip-value { font-size: 19px; font-weight: 800; margin-top: 3px; font-family: var(--font-display); }

.dash-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .dash-split { grid-template-columns: 1fr; } }

.donut-card { display: flex; flex-direction: column; align-items: center; }
.donut-wrap { position: relative; width: 168px; height: 168px; margin: 6px auto 20px; }
.donut-wrap svg { width: 100%; height: 100%; }
.donut-ring-bg { stroke: var(--paper-dim); }
.donut-ring-fg { stroke: var(--ok); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.donut-ring-fg.warn { stroke: var(--yolk-dark); }
.donut-ring-fg.low { stroke: var(--danger); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-center .pct { font-size: 26px; font-weight: 700; font-family: var(--font-display); color: var(--ink); }
.donut-center .lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; margin-top: 2px; }
.donut-sidestats { width: 100%; }
.donut-sidestat { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding: 10px 2px; }
.donut-sidestat .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.donut-sidestat .v { font-size: 15px; font-weight: 800; }

/* month-by-month revenue/cost bar chart */
.month-chart { display: flex; gap: 16px; align-items: flex-end; height: 190px; padding: 24px 4px 0; overflow-x: auto; }
.month-col { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 46px; position: relative; }
.month-col.best .month-bars { filter: drop-shadow(0 0 0 transparent); }
.month-star { position: absolute; top: -20px; color: var(--yolk-dark); font-size: 14px; line-height: 1; }
.month-bars { display: flex; gap: 5px; align-items: flex-end; height: 140px; }
.mbar { width: 15px; border-radius: 4px 4px 1px 1px; transition: height .4s ease; }
.mbar.revenue { background: linear-gradient(180deg, var(--barn-lighter), var(--ok)); }
.mbar.costs { background: linear-gradient(180deg, #d9604a, var(--danger)); }
.month-col.best .mbar.revenue { background: linear-gradient(180deg, var(--yolk), var(--yolk-dark)); }
.month-label { font-size: 10.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.month-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.month-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.month-legend .dot.revenue { background: var(--ok); }
.month-legend .dot.costs { background: var(--danger); }

/* multi-role assignment UI (Admin / Users tab) */
.role-checkbox-group { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; }
.role-checkbox { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.role-checkbox input { margin: 0; }
.role-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.role-badge {
  display: inline-flex; align-items: center; gap: 5px; background: var(--paper-dim); border: 1px solid var(--line);
  border-radius: 20px; padding: 3px 4px 3px 10px; font-size: 11px; font-weight: 700; color: var(--ink-soft);
}
.role-badge.current { background: var(--yolk-soft); border-color: var(--yolk); color: var(--yolk-dark); }
.role-remove {
  background: none; border: none; cursor: pointer; color: inherit; font-size: 14px; line-height: 1;
  padding: 2px 6px; border-radius: 50%; opacity: 0.6;
}
.role-remove:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.role-edit {
  background: none; border: none; cursor: pointer; color: inherit; font-size: 12px; line-height: 1;
  padding: 2px 5px; border-radius: 50%; opacity: 0.6;
}
.role-edit:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.role-add-row { display: flex; gap: 6px; align-items: center; }
.role-add-row select { font-size: 11.5px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); }

/* ---------- Graphical summary cards: tinted panel + big number + mini ring gauge ---------- */
.summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 18px; }
.summary-ring-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,0.04);
}
.summary-ring-card.mint { background: var(--mint); }
.summary-ring-card.sky { background: var(--sky); }
.summary-ring-card.gold { background: var(--yolk-soft); }
.src-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.7; }
.summary-ring-card.mint .src-eyebrow, .summary-ring-card.mint .src-sub { color: var(--mint-ink); }
.summary-ring-card.sky .src-eyebrow, .summary-ring-card.sky .src-sub { color: var(--sky-ink); }
.summary-ring-card.gold .src-eyebrow, .summary-ring-card.gold .src-sub { color: var(--yolk-dark); }
.src-value { font-size: 28px; font-weight: 800; font-family: var(--font-display); margin-top: 4px; color: var(--ink); line-height: 1.1; }
.src-sub { font-size: 11.5px; margin-top: 3px; font-weight: 600; }
.mini-ring { position: relative; width: 60px; height: 60px; flex-shrink: 0; }
.mini-ring svg { width: 100%; height: 100%; }
.mini-ring-bg { stroke: rgba(0,0,0,0.08); }
.mini-ring-fg { stroke: var(--ok); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.mini-ring-fg.warn { stroke: var(--yolk-dark); }
.mini-ring-fg.low { stroke: var(--danger); }
.mini-ring-fg.info { stroke: var(--info); }
.mini-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; font-family: var(--font-display); color: var(--ink); }
@media (max-width: 480px) { .summary-ring-card { padding: 16px 18px; } .src-value { font-size: 22px; } .mini-ring { width: 48px; height: 48px; } .mini-ring-pct { font-size: 10.5px; } }

/* ---------- Hero banner: hand-drawn farm scene, no external/stock imagery ---------- */
.hero-banner {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px;
  box-shadow: var(--shadow-md); min-height: 220px; display: flex; align-items: flex-end;
}
.hero-banner-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-banner-scene svg { width: 100%; height: 100%; display: block; }
.hero-banner-scrim {
  position: absolute; inset: 0;
  /* Stronger and less steep than before — the earlier version faded to fully transparent by
     mid-height, so title/subtitle text sitting anywhere above the very bottom edge (e.g. when it
     wraps to two lines on narrow screens) had poor contrast against the brighter parts of the
     illustration (the sun glow especially). This keeps a solid dark base across the whole lower
     two-thirds where text actually sits. */
  background: linear-gradient(0deg, rgba(15,20,11,0.82) 0%, rgba(15,20,11,0.6) 45%, rgba(15,20,11,0.22) 75%, rgba(15,20,11,0) 100%);
}
.hero-banner-content { position: relative; z-index: 1; padding: 22px 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; width: 100%; flex-wrap: wrap; }
.hero-banner-eyebrow { color: var(--yolk); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 6px; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.hero-banner-content h2 { color: #fff; font-size: 22px; margin: 0 0 4px; font-family: var(--font-display); text-shadow: 0 1px 5px rgba(0,0,0,0.65); }
.hero-banner-content p { color: #f0f2ec; font-size: 13px; margin: 0; max-width: 38ch; text-shadow: 0 1px 4px rgba(0,0,0,0.65); }
.hero-banner-cta {
  background: var(--yolk); color: var(--ink); border: none; padding: 11px 20px; border-radius: 9px;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, transform .1s;
  flex-shrink: 0;
}
.hero-banner-cta:hover { background: #ecbb52; }
.hero-banner-cta:active { transform: scale(0.98); }
.hero-banner-stat {
  position: absolute; top: 18px; right: 18px; z-index: 1; background: rgba(255,255,255,0.94);
  border-radius: 12px; padding: 9px 14px; box-shadow: var(--shadow-md); text-align: right;
}
.hero-banner-stat .v { font-size: 17px; font-weight: 800; font-family: var(--font-display); color: var(--barn); line-height: 1.1; }
.hero-banner-stat .k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--muted); }
@media (max-width: 600px) {
  .hero-banner { min-height: 190px; }
  .hero-banner-content { padding: 16px 18px; }
  .hero-banner-content h2 { font-size: 18px; }
  .hero-banner-stat { top: 12px; right: 12px; padding: 7px 11px; }
  .hero-banner-stat .v { font-size: 14px; }
}

/* tinted variant of the existing donut-card, for the graphical dashboard's cost/margin panel */
.donut-card.tinted { background: var(--mint); border-color: rgba(0,0,0,0.04); }
.donut-card.tinted h2, .donut-card.tinted .sub { color: var(--mint-ink); }
.donut-card.tinted .donut-ring-bg { stroke: rgba(255,255,255,0.6); }
.donut-card.tinted .donut-sidestat { border-top-color: rgba(47,107,62,0.18); }


/* ========================================================================== 
   SAMLAR MS visual refresh — field notes, not dashboard decoration
   ========================================================================== */
:root {
  --ink: #1b251d;
  --ink-soft: #526055;
  --muted: #7e8a7f;
  --barn: #173324;
  --barn-light: #274b36;
  --barn-lighter: #3d6d4e;
  --yolk: #e6b84e;
  --yolk-dark: #ae7922;
  --yolk-soft: #f7edd0;
  --paper: #f4f1e8;
  --paper-dim: #e8e7dc;
  --card: #fbfaf5;
  --line: #d6ddd2;
  --danger: #a64535;
  --danger-soft: #f8e9e4;
  --ok: #3d754c;
  --ok-soft: #e6f1e4;
  --info: #32647a;
  --info-soft: #e4eff2;
  --mint: #e4f0e2;
  --mint-ink: #2e6540;
  --sky: #e6eef1;
  --sky-ink: #2e5f72;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 0 rgba(24,40,28,.05), 0 10px 24px rgba(24,40,28,.045);
  --shadow-md: 0 1px 0 rgba(24,40,28,.07), 0 18px 40px rgba(24,40,28,.09);
  --shadow-lg: 0 26px 70px rgba(11,26,16,.22);
}

body {
  background: var(--paper);
  color: var(--ink);
  background-image: linear-gradient(90deg, rgba(255,255,255,.24) 0 1px, transparent 1px), linear-gradient(rgba(31,54,37,.025) 1px, transparent 1px);
  background-size: 72px 72px, 100% 8px;
}

button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(230,184,78,.55); outline-offset: 2px; }

/* Landing: a quiet field-map pattern with one clear focal point. */
.landing-screen {
  background-color: #14271b;
  background-image: radial-gradient(circle at 17% 18%, rgba(230,184,78,.14), transparent 23%), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(135deg, #203a27 0%, #132619 65%, #102116 100%);
  background-size: auto, 88px 88px, 88px 88px, auto;
  padding: 58px 44px;
}
.landing-screen::before {
  content: '';
  position: absolute;
  right: -12vw;
  top: 8vh;
  width: 54vw;
  height: 54vw;
  min-width: 430px;
  min-height: 430px;
  border: 1px solid rgba(230,184,78,.24);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(230,184,78,.035), 0 0 0 92px rgba(230,184,78,.025), 0 0 0 168px rgba(230,184,78,.02);
  pointer-events: none;
}
.landing-screen::after {
  content: '';
  position: absolute;
  right: 19%;
  bottom: 12%;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(255,255,255,.18);
  transform: rotate(45deg);
  pointer-events: none;
}
.landing-grain { opacity: .09; mix-blend-mode: screen; }
.landing-diagonal {
  top: auto;
  right: 5%;
  bottom: 5%;
  width: 46%;
  height: 38%;
  transform: none;
  background: repeating-linear-gradient(172deg, transparent 0 17px, rgba(230,184,78,.09) 18px, transparent 19px 34px);
  opacity: .7;
}
.landing-inner { max-width: 1240px; grid-template-columns: .86fr 1.14fr; gap: 104px; }
.landing-left { position: relative; padding-left: 18px; }
.landing-left::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 2px; width: 2px; background: var(--yolk); opacity: .9; }
.brand-mark-svg.large { width: 68px; height: 68px; margin-bottom: 28px; }
.landing-eyebrow { letter-spacing: 2.5px; color: #f0c967; }
.landing-brand h1 { font-size: clamp(48px, 6vw, 76px); line-height: .94; letter-spacing: -2.4px; }
.landing-brand h1 em { color: #efc866; }
.landing-tagline { max-width: 38ch; font-size: 17px; line-height: 1.62; color: #ced8cd; }
.landing-cta { margin-top: 42px; padding: 15px 22px; background: var(--yolk); border: 1px solid rgba(255,255,255,.08); border-radius: 5px; box-shadow: 0 8px 0 rgba(0,0,0,.16); }
.landing-cta:hover { background: #f0c55f; transform: translateY(-1px); }
.feature-row { grid-template-columns: 38px 38px 1fr; column-gap: 14px; padding: 20px 0; border-top-color: rgba(255,255,255,.16); }
.feature-index { font-size: 11px; color: #efc866; padding-top: 10px; }
.feature-icon-svg { width: 28px; height: 28px; padding: 6px; margin-top: 2px; color: #efc866; border: 1px solid rgba(230,184,78,.42); border-radius: 8px; background: rgba(230,184,78,.08); }
.feature-copy h3 { font-size: 15px; letter-spacing: .1px; }
.feature-copy p { max-width: 44ch; color: #aebcaf; }

/* Auth: make the form feel like part of the same system, not a detached template. */
.login-screen { background-color: var(--paper); background-image: linear-gradient(90deg, rgba(27,52,35,.05) 1px, transparent 1px), linear-gradient(rgba(27,52,35,.03) 1px, transparent 1px); background-size: 72px 72px; position: relative; }
.login-screen::before { content: 'FIELD OPERATIONS / 01'; position: absolute; top: 28px; left: 32px; color: var(--barn); opacity: .5; font-size: 10px; letter-spacing: 1.6px; font-weight: 800; }
.login-screen::after { content: ''; position: absolute; right: 5vw; bottom: 7vh; width: 220px; height: 220px; border: 1px solid rgba(23,51,36,.12); border-radius: 50%; box-shadow: 0 0 0 22px rgba(23,51,36,.025), 0 0 0 54px rgba(23,51,36,.02); }
.login-card { max-width: 456px; padding: 42px 42px 30px; background: rgba(251,250,245,.95); border: 1px solid var(--line); border-top: 3px solid var(--barn); border-radius: 14px; box-shadow: var(--shadow-md); z-index: 1; }
.brand { text-align: left; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.brand-mark-svg { margin: 0 0 15px; width: 50px; height: 50px; }
.brand h1 { font-size: 29px; letter-spacing: -1px; }
.brand-sub { font-size: 12px; color: var(--ink-soft); }
#login-form label, #register-form label { color: var(--ink); font-size: 11px; letter-spacing: .65px; text-transform: uppercase; }
#login-form input, #register-form input, #register-form select { margin-top: 7px; padding: 12px 13px; background: #fffef9; border-radius: 6px; border-color: #ccd6c9; }
#login-form button, #register-form button { margin-top: 8px; padding: 13px; border-radius: 6px; background: var(--barn); }
#login-form button:hover, #register-form button:hover { background: var(--barn-light); }
.switch-form-link { font-size: 12px; }
.switch-form-link a { color: var(--barn-light); }

/* App shell: separate navigation, work surface, and operational signals. */
.app { background: var(--paper); }
.sidebar { width: 258px; background: #162c1d; background-image: linear-gradient(180deg, rgba(255,255,255,.035), transparent 36%), repeating-linear-gradient(165deg, transparent 0 28px, rgba(255,255,255,.02) 29px, transparent 30px); border-right: 1px solid rgba(255,255,255,.06); }
.sidebar-brand { padding: 24px 22px 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar-brand-text { letter-spacing: .5px; }
.sidebar nav.tabs { padding: 18px 12px; gap: 4px; }
.sidebar nav.tabs button { padding: 11px 13px; border-radius: 7px; font-size: 12.5px; color: #bdcbbd; }
.sidebar nav.tabs button.active { background: var(--yolk); box-shadow: 4px 0 0 #f3d277; color: var(--ink); }
.sidebar nav.tabs button:hover:not(.active) { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-footer { padding: 17px 18px 20px; border-top-color: rgba(255,255,255,.12); }
.sidebar-user-name { font-size: 12.5px; }
.role-pill { border-radius: 4px; padding: 4px 8px; font-size: 9px; letter-spacing: .8px; }
.view { max-width: 1280px; padding: 34px 36px 48px; }
@media (max-width: 640px) { .view { padding: 20px 16px 32px; } }

/* Shared surfaces: flatter edges, warmer paper, sharper hierarchy. */
.card { background: rgba(251,250,245,.94); border-color: var(--line); border-radius: 12px; padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.card h2 { font-size: 16px; letter-spacing: -.2px; }
.card .sub { color: var(--ink-soft); font-size: 12px; }
.stat { border-color: var(--line); border-radius: 10px; background: #fbfaf5; box-shadow: none; }
.stat::before { width: 3px; background: var(--yolk); }
.ichip { border-color: var(--line); border-radius: 11px; background: #fbfaf5; padding: 17px 18px; box-shadow: none; }
.ichip::after { content: ''; position: absolute; right: 14px; bottom: 12px; width: 18px; height: 1px; background: var(--line); }
.ichip { position: relative; overflow: hidden; }
.ichip-icon { border-radius: 8px; width: 38px; height: 38px; background: var(--yolk-soft); }
.ichip-body .ichip-label { letter-spacing: .8px; color: var(--ink-soft); }
.ichip-body .ichip-value { font-size: 22px; letter-spacing: -.5px; }
table { font-size: 12.5px; }
th, td { padding: 12px 12px; }
th { background: #e9ece2; color: var(--ink-soft); letter-spacing: .8px; }
tbody tr:nth-child(even) { background: rgba(233,236,226,.22); }
tbody tr:hover { background: #f3efdc; }
form.inline input, form.inline select { border-color: #ccd6c9; border-radius: 6px; background: #fffef9; }
form.inline button { border-radius: 6px; background: var(--barn); }
.btn-sm { border-color: #cbd5ca; border-radius: 5px; background: #fffef9; }
.badge { border-radius: 4px; padding: 4px 8px; letter-spacing: .45px; }
.alert-item { border-left-width: 4px; border-radius: 0 7px 7px 0; padding: 12px 14px; }
.empty { border: 1px dashed var(--line); border-radius: 8px; padding: 26px 18px; }

/* Dashboard: the header and chart blocks should feel like one reporting instrument. */
.dash-head { align-items: flex-end; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.dash-head h1 { font-size: 30px; letter-spacing: -1.1px; }
.dash-head .dash-sub { color: var(--ink-soft); font-size: 12.5px; }
.dash-period { border-color: #cbd5ca; border-radius: 5px; background: #fffef9; padding: 8px 13px; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.dash-chiprow { gap: 12px; margin-bottom: 22px; }
.dash-split { gap: 16px; }
.donut-card { background: #fbfaf5; }
.month-chart { border-top: 1px solid var(--line); background: repeating-linear-gradient(0deg, transparent 0 34px, rgba(55,84,62,.06) 35px); }
.month-bars { gap: 4px; }
.mbar { width: 13px; border-radius: 2px 2px 0 0; }
.hero-banner { border-radius: 12px; min-height: 236px; box-shadow: var(--shadow-md); border: 1px solid rgba(255,255,255,.12); }
.hero-banner-scrim { background: linear-gradient(0deg, rgba(12,29,18,.92), rgba(12,29,18,.36) 62%, rgba(12,29,18,.06)); }
.hero-banner-content { padding: 24px 28px; }
.hero-banner-eyebrow { letter-spacing: 1.2px; }
.hero-banner-content h2 { font-size: 25px; letter-spacing: -.7px; }
.hero-banner-cta { border-radius: 5px; padding: 11px 16px; }
.hero-banner-stat { border-radius: 6px; padding: 10px 13px; }

@media (max-width: 900px) {
  .landing-inner { gap: 58px; }
  .landing-screen::before { right: -30vw; }
}
@media (max-width: 600px) {
  .landing-screen { padding: 38px 20px; }
  .landing-left { padding-left: 14px; }
  .landing-brand h1 { font-size: 44px; letter-spacing: -1.5px; }
  .landing-tagline { font-size: 15px; }
  .feature-row { grid-template-columns: 30px 34px 1fr; column-gap: 10px; }
  .login-screen::before { top: 16px; left: 18px; font-size: 8px; }
  .login-card { padding: 30px 22px 24px; }
  .view { background-size: 48px 48px, 100% 8px; }
  .dash-head h1 { font-size: 24px; }
}


/* Template-informed workspace header: compact utility bar above the reporting canvas. */
.desktop-topbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 36px;
  background: rgba(251,250,245,.88);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 18;
  backdrop-filter: blur(12px);
}
.desktop-breadcrumb { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); font-size: 12px; font-weight: 700; }
.topbar-kicker { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 1.1px; white-space: nowrap; }
.desktop-breadcrumb #topbar-context { position: relative; padding-left: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desktop-breadcrumb #topbar-context::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; margin-top: -1px; border-radius: 50%; background: var(--yolk-dark); }
.topbar-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.topbar-status { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.topbar-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(61,117,76,.13); }
.topbar-user { color: var(--ink-soft); font-size: 12px; font-weight: 700; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--barn); color: var(--paper); font-size: 10px; font-weight: 800; letter-spacing: .4px; }
@media (max-width: 767px) { .desktop-topbar { display: none; } }
@media (max-width: 600px) { .desktop-topbar { padding: 0 16px; } }


/* Landing page responsive pass: the first-load experience must work independently of the app shell. */
@media (max-width: 900px) {
  .landing-screen {
    min-height: 100svh;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 44px 24px 56px;
  }
  .landing-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    max-width: 720px;
    min-width: 0;
  }
  .landing-left { text-align: center; min-width: 0; }
  .landing-brand { margin-bottom: 24px; }
  .brand-mark-svg.large { margin-left: auto; margin-right: auto; }
  .landing-tagline { margin-left: auto; margin-right: auto; }
  .landing-features { width: 100%; min-width: 0; }
  .feature-row { min-width: 0; }
  .feature-copy { min-width: 0; }
  .feature-copy p { max-width: none; }
}

@media (max-width: 560px) {
  .landing-screen { padding: 28px 16px 40px; }
  .landing-inner { gap: 32px; }
  .landing-brand h1 { font-size: clamp(34px, 13vw, 50px); line-height: .98; overflow-wrap: anywhere; }
  .landing-eyebrow { font-size: 10px; letter-spacing: 1.45px; }
  .landing-tagline { font-size: 15px; line-height: 1.55; }
  .landing-cta { width: 100%; min-height: 48px; justify-content: center; margin-top: 28px; padding: 14px 18px; }
  .feature-row { grid-template-columns: 27px 25px minmax(0, 1fr); column-gap: 10px; padding: 15px 0; }
  .feature-icon-svg { width: 24px; height: 24px; }
  .feature-copy h3 { font-size: 14px; line-height: 1.3; }
  .feature-copy p { font-size: 12px; line-height: 1.5; }
}

@media (max-width: 380px) {
  .landing-screen { padding-left: 13px; padding-right: 13px; }
  .landing-inner { gap: 27px; }
  .feature-row { grid-template-columns: 24px 23px minmax(0, 1fr); column-gap: 8px; }
  .feature-index { font-size: 10px; }
  .feature-copy h3 { font-size: 13px; }
  .feature-copy p { font-size: 11.5px; }
}


/* Reports: pair the request form with a guidance panel so the view reads as a deliberate
   two-part layout rather than one small form adrift in an empty page. */
.reports-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.reports-layout .card { margin-bottom: 0; }
@media (max-width: 860px) { .reports-layout { grid-template-columns: minmax(0, 1fr); } }
.report-help { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.report-help li { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.report-help strong { color: var(--ink); font-weight: 700; }