/* ============================================================================
   MGT PLATFORM — Design System
   Light, editorial-agricultural. Outfit throughout.
   ============================================================================ */

:root {
  /* Palette — warm light theme */
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #fbf9f4;
  --ink: #1a1f1c;
  --ink-2: #3d4540;
  --ink-muted: #6b7670;
  --ink-faint: #9ba39e;
  --rule: #e4e0d7;
  --rule-strong: #c9c4b8;

  /* Brand — deep forest green (distinct, agricultural, confident) */
  --primary: #1a4d2e;
  --primary-hover: #143a23;
  --primary-soft: #e8efe9;
  --primary-ink: #ffffff;

  /* Accent — warm ochre/amber */
  --accent: #b8722a;
  --accent-hover: #9a5f21;
  --accent-soft: #f4ead8;

  /* Semantic */
  --good: #2f6b3a;
  --warn: #a67014;
  --bad: #8b2f2f;
  --good-soft: #e7efe4;
  --warn-soft: #f6ecd5;
  --bad-soft: #f3e2e2;

  /* Typography scale */
  --font-sans: 'Outfit', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing, radii, shadow */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-xs: 0 1px 2px rgba(20,30,25,0.04);
  --shadow-sm: 0 1px 3px rgba(20,30,25,0.06), 0 1px 2px rgba(20,30,25,0.04);
  --shadow-md: 0 4px 12px rgba(20,30,25,0.06), 0 2px 4px rgba(20,30,25,0.04);
  --shadow-lg: 0 12px 32px rgba(20,30,25,0.08), 0 4px 8px rgba(20,30,25,0.04);

  /* Layout */
  --sidebar-w: 260px;
  --topbar-h: 60px;
  --max-content: 1280px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { min-height: 100vh; }

/* Typography -------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  color: var(--ink);
  letter-spacing: -0.018em;
  margin: 0;
  font-weight: 600;
}
h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; }
h2 { font-size: 22px; line-height: 1.25; }
h3 { font-size: 17px; line-height: 1.35; }
h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); font-weight: 600; }
p  { margin: 0 0 1em; color: var(--ink-2); }
a  { color: var(--primary); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
a:hover { border-bottom-color: var(--primary); }
small, .small { font-size: 12.5px; color: var(--ink-muted); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* Layout shell ------------------------------------------------------------ */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  padding: 22px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar .brand {
  display: flex; align-items: baseline; gap: 10px;
  padding: 4px 8px 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 14px;
}
.sidebar .brand .mark {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--primary);
}
.sidebar .brand .sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.nav-group { margin: 10px 0 4px; }
.nav-group .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding: 10px 10px 4px;
  font-weight: 600;
}
.nav-group.collapsible .label.collapsible-label { transition: color .15s ease; }
.nav-group.collapsible .label.collapsible-label:hover { color: var(--ink); }
.nav-group.collapsible.collapsed .label { opacity: 0.55; }
.nav-group.collapsible.collapsed .label:hover { opacity: 1; }
.nav-group.collapsible.expanded .label { color: var(--primary); opacity: 1; }
.collapse-chev { transition: transform .15s ease; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 14px;
  border: none;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); border-bottom: none; }
.nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.nav-item .glyph { width: 16px; opacity: 0.7; font-size: 13px; text-align: center; }

.sidebar .footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-muted);
}
.sidebar .user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.sidebar .user-chip .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}
.sidebar .signout {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
  background: none; border: none;
  padding: 6px 10px;
  text-align: left;
  width: 100%;
  border-radius: var(--radius-sm);
}
.sidebar .signout:hover { background: var(--surface-2); color: var(--ink); }

.main {
  padding: 32px 40px 56px;
  max-width: 100%;
  overflow-x: hidden;
}
.main-inner { max-width: var(--max-content); margin: 0 auto; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 28px;
}
.page-head .title-block .eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.page-head .title-block p {
  color: var(--ink-muted);
  margin: 6px 0 0;
  max-width: 640px;
}
.page-head .actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Cards / panels ---------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-xs);
}
.card + .card { margin-top: 18px; }
.card h2 { margin-bottom: 4px; }
.card h3 { margin-bottom: 14px; }
.card .card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.card .card-head h2, .card .card-head h3 { margin: 0; }

.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}

/* Stat tiles -------------------------------------------------------------- */
.stat {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); font-weight: 600; }
.stat .value { font-size: 28px; font-weight: 500; margin-top: 8px; letter-spacing: -0.02em; color: var(--ink); }
.stat .delta { font-size: 12.5px; margin-top: 4px; color: var(--ink-muted); }
.stat .delta.up { color: var(--good); }
.stat .delta.down { color: var(--bad); }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-muted); border-bottom-color: var(--ink-muted); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: 5px 11px; font-size: 13px; }
.btn.lg { padding: 12px 22px; font-size: 15px; }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Forms ------------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--ink-2); margin-bottom: 6px;
}
.field .hint { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
textarea { resize: vertical; min-height: 80px; }
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }

.inline-field { display: inline-flex; align-items: center; gap: 8px; }
.inline-field input { width: auto; }

/* Tables ------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; background: var(--surface); }
table.data th, table.data td {
  padding: 10px 14px;
  text-align: left;
  font-size: 13.5px;
  border-bottom: 1px solid var(--rule);
}
table.data th {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
table.data td.rank { font-weight: 600; color: var(--primary); }

/* Badges ------------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
}
.badge.good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.bad  { background: var(--bad-soft);  color: var(--bad);  border-color: transparent; }
.badge.primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.badge.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* Notices ----------------------------------------------------------------- */
.notice {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  border: 1px solid transparent;
  margin-bottom: 18px;
}
.notice.info { background: var(--primary-soft); color: var(--primary); }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.bad  { background: var(--bad-soft);  color: var(--bad);  }
.notice.good { background: var(--good-soft); color: var(--good); }
.notice strong { font-weight: 600; }

/* Utility ----------------------------------------------------------------- */
.row { display: flex; gap: 12px; align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.muted { color: var(--ink-muted); }
.spacer { flex: 1; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.hidden { display: none !important; }
.numeric { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Loading / spinner ------------------------------------------------------- */
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--rule-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--rule) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: shine 1.5s linear infinite;
  border-radius: var(--radius-sm);
  height: 14px;
}
@keyframes shine { to { background-position: -200% 0; } }

/* Responsive sidebar collapse (simple) ------------------------------------ */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 60; width: var(--sidebar-w); transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .mobile-toggle { display: inline-flex !important; }
  .main { padding: 20px 20px 48px; }
}
.mobile-toggle {
  display: none;
  position: fixed; top: 14px; left: 14px;
  background: var(--surface); border: 1px solid var(--rule);
  padding: 8px 12px; border-radius: var(--radius-sm); z-index: 70;
  cursor: pointer; font-family: var(--font-sans); font-size: 13px;
}

/* Auth pages -------------------------------------------------------------- */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background:
    radial-gradient(circle at 15% 5%, rgba(26,77,46,0.04) 0%, transparent 50%),
    radial-gradient(circle at 85% 95%, rgba(184,114,42,0.04) 0%, transparent 50%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-md);
}
.auth-card .brand-row {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.auth-card .brand-row .mark { font-size: 22px; color: var(--primary); font-weight: 600; letter-spacing: -0.02em; }
.auth-card .brand-row .sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); }
.auth-card h1 { font-size: 24px; margin-bottom: 6px; }
.auth-card .lede { color: var(--ink-muted); margin-bottom: 28px; }
.auth-card .btn-row { margin-top: 24px; }
.auth-card .foot { margin-top: 20px; font-size: 13px; color: var(--ink-muted); text-align: center; }

/* ============================================================================
   Global empty-state pattern — reusable across list/table pages
   Pages use this when their table has no data yet, giving the user a clear
   "nothing here yet" card instead of a bare table header.
   ============================================================================ */
/* Global empty-state pattern */
.empty-state {
  text-align: center; padding: 36px 24px;
  background: var(--surface-2); border-radius: var(--radius); margin: 16px 0;
}
.empty-state .big { font-size: 15px; color: var(--ink); font-weight: 500; margin-bottom: 6px; }
.empty-state .sub { font-size: 13px; color: var(--ink-muted); max-width: 540px; margin: 0 auto 14px; line-height: 1.55; }
.empty-state .actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.empty-state.error-state { background: var(--bad-soft); }
.empty-state.error-state .big { color: var(--bad); }

/* Skeleton loader — used instead of the bare "Loading…" text
   to give a sense of what's about to appear. */
.skeleton-list { padding: 0; }
.skeleton-list .skeleton-row {
  height: 40px; background: var(--surface-2); border-radius: 4px;
  margin-bottom: 6px; animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-list .skeleton-row:nth-child(2) { animation-delay: 0.1s; }
.skeleton-list .skeleton-row:nth-child(3) { animation-delay: 0.2s; }
.skeleton-list .skeleton-row:nth-child(4) { animation-delay: 0.3s; }
@keyframes skeleton-pulse {
  0% { opacity: 0.6; }
  50% { opacity: 0.95; }
  100% { opacity: 0.6; }
}

/* ============================================================================
   PRINT STYLESHEET — sale-day ready output
   ============================================================================
   Rules applied only when the user prints. Strips app chrome (sidebar, buttons,
   nav) and expands the main content area to full paper width. Pages that want
   additional print customization (extra blank columns for "Actual bid" /
   "Notes") add their own inline <style> for @media print.
   ============================================================================ */
@media print {
  /* Black-on-white everywhere — don't waste colour ink on backgrounds */
  * { background: transparent !important; color: #000 !important; box-shadow: none !important; }
  
  /* Strip app chrome — sidebar, tabs, action buttons */
  #mgt-sidebar, aside, nav, .actions, .btn, button, .species-toggle, .tabs-bar, .filters-bar { display: none !important; }
  
  /* Keep .print-show content visible in print mode (overrides earlier hidden classes) */
  .print-show, .print-only { display: block !important; }
  .print-hide { display: none !important; }
  
  /* Expand the main content to full page width */
  body, html { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .app { display: block !important; }
  .main { margin-left: 0 !important; padding: 0 !important; }
  .main-inner { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
  
  /* Reduce card chrome to minimal visual noise */
  .card {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    page-break-inside: avoid;
  }
  .card-head h2, .card-head h3, .card-head h1 { font-size: 14px !important; margin: 0 0 4px 0 !important; }
  .page-head { margin: 0 0 14px 0 !important; }
  .page-head h1 { font-size: 18px !important; margin: 0 !important; }
  .page-head .eyebrow { font-size: 10px !important; }
  .page-head p { font-size: 11px !important; margin-top: 4px !important; }
  
  /* Tables: full-width, tight padding, thin borders */
  table {
    width: 100% !important;
    font-size: 11px !important;
    border-collapse: collapse !important;
  }
  table th, table td {
    padding: 4px 6px !important;
    border-bottom: 1px solid #999 !important;
  }
  table thead {
    border-bottom: 2px solid #000 !important;
    display: table-header-group; /* repeat header on each page */
  }
  table th {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
  }
  table tr { page-break-inside: avoid; }
  
  /* Coloured chips/pills: keep shape but use outline instead of fill */
  .badge, .status-badge, .source-chip, .coverage-warn, .meta-pill {
    background: transparent !important;
    border: 1px solid #999 !important;
    font-weight: 500 !important;
  }
  
  /* Accuracy superscripts should still print with visible contrast */
  .acc-sup { color: #555 !important; }
  .acc-sup.acc-low { color: #000 !important; font-weight: 700 !important; text-decoration: underline !important; }
  
  /* Contribution bars: use outline boxes so they still print recognisably */
  .contrib-bar { background: #666 !important; }
  .contrib-bar.neg { background: #000 !important; }
  .contrib-bar-wrap { border: 1px solid #ccc !important; }
  
  /* Hide the stepper / tabs / methodology details by default in print */
  details { border: 1px solid #ccc; padding: 8px; page-break-inside: avoid; }
  details summary { font-weight: 600; }
  
  /* Every page gets a page header with a horizontal rule */
  .page-head::after {
    content: "";
    display: block;
    border-top: 2px solid #000;
    margin-top: 8px;
  }
  
  /* Page setup */
  @page { margin: 14mm; }
  
  /* Notices stripped except warnings */
  .notice { border-left: 3px solid #000 !important; padding-left: 8px !important; font-size: 10px !important; }
  .notice.hidden { display: none !important; }
  
  /* Form fields: show the value not the input in print */
  input, select, textarea {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 11px !important;
  }
}