/* ── PJ Dick Design System aligned variables ─────────────────────
   Primary palette mirrors the corporate design system (Bootstrap 5.3
   based, served from apps1.pjdick.com/design-system-2). The Lindy
   green (#01483A) and gold (#FBB040) accents have been retired from
   the UI in favor of the corporate primary green. The gold value
   survives as the corporate `warning` swatch (#FBB040 == --bs-warning)
   and is referenced semantically below for missing/incomplete data.
   Gold is also retained in chart series in app.js, intentionally,
   so charts keep a recognizable second-color accent.

   Light/dark theming: every theme-sensitive value lives in a CSS
   custom property here at :root. Dark mode overrides the same
   names below in [data-bs-theme="dark"]. The corporate primary
   green stays put in both themes -- only chrome (surfaces, text,
   borders, gridlines, subtle backgrounds) flips. Chart dataset
   colors are set in app.js and stay constant in both themes.
   ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
:root {
  --green: #248551; --green-light: #2d9c61; --green-pale: #d3e7dc;
  --warning: #FBB040; --warning-dark: #D4922E;
  --olive: #9EA374; --gray: #BABCBE;
  --bg: #F2F3F5; --surface: #FFFFFF; --text: #2D2D2D; --text-muted: #6B7280;
  --border: #D1D5DB; --border-light: #E5E7EB;
  --positive: #15803D; --negative: #DC2626; --red: #dc2626; --red-light: #fef2f2;
  --info: #2563EB;
  /* Chart chrome -- read by app.js getThemeColors(). Datasets stay
     constant across themes; these style only the gridlines, ticks,
     axis titles, axis borders, tooltip background, and subtotal
     row background that frame the data. */
  --chart-grid:        #f0f0f0;
  --chart-grid-strong: #eeeeee;
  --chart-tick:        #555555;
  --chart-axis-label:  #999999;
  --chart-title:       #aaaaaa;
  --chart-tooltip-bg:  #248551;
  --chart-tooltip-fg:  #ffffff;
  --chart-empty:       rgba(226,232,240,0.5);
  --chart-empty-border:rgba(226,232,240,0.8);
  --subtotal-bg:       #f8f9fb;
  --subtotal-border:   #e0e3ea;
  --hover-bg:          rgba(36,133,81,0.06);
  --overlay-bg:        rgba(94,111,102,0.5);   /* desaturated green-gray, was rgba(36,133,81,0.45) -- the saturated primary read too vivid as a full-screen scrim */
  --row-even-bg:       #f8f9fa;
  --input-bg:          #ffffff;
  --select-arrow:      #6B7280;
  --green-subtle-border:#B5D5CC;
  --green-subtle-tag-bg:#F0FAF4;
  --warning-soft-bg:   #FFFBEB;
  --negative-soft-bg:  #FEE2E2;
  --modal-bg:          #ffffff;
  --modal-overlay-bg:  rgba(0,0,0,0.5);
  /* RGB triplet of --green for rgba() composition in CSS where we
     can't use color-mix yet on older Chromium. Kept manual to
     avoid runtime gymnastics. */
  --green-rgb: 36, 133, 81;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-pill: 20px;
}

/* ── Dark theme overrides ────────────────────────────────────────
   Activated by `<body data-bs-theme="dark">`. Naming matches the
   corporate design system's Bootstrap convention. The primary
   green and chart series colors deliberately stay put. */
[data-bs-theme="dark"] {
  --green-pale:        #0e3520;   /* dark-mode "subtle primary" -- corporate --bs-primary-bg-subtle */
  --bg:                #1a1d21;
  --surface:           #26292d;   /* corporate --bs-dark */
  --text:              #e9ecef;
  --text-muted:        #cdcdcd;
  --border:            #3a3f44;
  --border-light:      #2f3337;
  --red-light:         #2a1416;
  --chart-grid:        #2f3337;
  --chart-grid-strong: #3a3f44;
  --chart-tick:        #adb5bd;
  --chart-axis-label:  #cdcdcd;
  --chart-title:       #6c757d;
  --chart-tooltip-bg:  #248551;   /* primary stays the same per brand */
  --chart-tooltip-fg:  #ffffff;
  --chart-empty:       rgba(73,80,87,0.4);
  --chart-empty-border:rgba(73,80,87,0.6);
  --subtotal-bg:       #2f3337;
  --subtotal-border:   #3a3f44;
  --hover-bg:          rgba(36,133,81,0.18);
  --overlay-bg:        rgba(13,18,22,0.7);
  --row-even-bg:       #2a2d31;
  --input-bg:          #2f3337;
  --select-arrow:      #adb5bd;
  --green-subtle-border:#3a5a4a;
  --green-subtle-tag-bg:#0e3520;
  --warning-soft-bg:   #2a2515;
  --negative-soft-bg:  #3a1c1f;
  --modal-bg:          #26292d;
  --modal-overlay-bg:  rgba(0,0,0,0.7);
}

/* Print mode is always rendered as light theme regardless of the
   on-screen choice -- nobody wants to waste toner printing a dark
   background. The injected print overlay (in app.js) already uses
   light-theme colors; this block ensures any rules above don't
   leak in via `data-bs-theme="dark"`. */
@media print {
  [data-bs-theme="dark"] {
    --bg: #ffffff; --surface: #ffffff; --text: #000000; --text-muted: #555555;
    --border: #cccccc; --border-light: #e5e5e5;
    --chart-grid: #f0f0f0; --chart-grid-strong: #eeeeee;
    --chart-tick: #555555; --chart-axis-label: #999999;
    --chart-title: #aaaaaa;
    --subtotal-bg: #f8f9fb; --subtotal-border: #e0e3ea;
  }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; background: var(--bg); min-height: 100vh; color: var(--text); margin: 0; padding: 0; }

/* ── Navigation Bar ──────────────────────────────────────────── */
nav { background: var(--green); padding: 0 24px; display: flex; align-items: center; position: sticky; top: 0; z-index: 100; border-bottom: 3px solid var(--green-light); box-shadow: 0 2px 8px rgba(0,0,0,0.15); flex-wrap: wrap; }
.nav-brand { display: flex; align-items: center; gap: 12px; padding: 10px 0; margin-right: 24px; }
.nav-brand-badge { background: white; color: var(--green); font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 4px; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; }
.nav-brand-logo  { height: 30px; width: auto; display: block; flex-shrink: 0; }
.nav-title { font-size: 16px; font-weight: 700; color: white; white-space: nowrap; }
.nav-tabs { display: flex; align-items: stretch; gap: 0; flex: 1; }
.nav-tab { padding: 14px 16px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6); cursor: pointer; border: none; background: none; transition: all 0.2s; user-select: none; border-bottom: 3px solid transparent; margin-bottom: -3px; white-space: nowrap; }
.nav-tab:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.05); }
.nav-tab.active { color: white; border-bottom-color: white; font-weight: 600; padding-bottom: 17px;}
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 0; }
.nav-user { font-size: 12px; color: rgba(255,255,255,0.85); margin-right: 4px; white-space: nowrap; }
.nav-btn { padding: 7px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: white; transition: all 0.2s; white-space: nowrap; font-family: inherit; }
.nav-btn:hover { background: rgba(255,255,255,0.1); }
.nav-btn.btn-save { background: white; color: var(--green); border-color: white; }
.nav-btn.btn-save:hover { background: rgba(255,255,255,0.85); }
.tab-content { display: none; }
.tab-content.active { display: flex; flex-direction: column; gap: var(--space-md); }

/* ── Page layout ─────────────────────────────────────────────── */
.page { max-width: 1400px; margin: 0 auto; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }

/* ── Controls bar ────────────────────────────────────────────── */
.controls { display: flex; align-items: flex-end; gap: var(--space-lg); flex-wrap: wrap; }
.control-group { display: flex; flex-direction: column; gap: 5px; }
.control-group label, .date-group label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
select {
  appearance: none;
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 36px 8px 12px; font-size: 13px; font-family: inherit;
  color: var(--text); cursor: pointer; min-width: 240px; transition: border-color 0.2s;
}
[data-bs-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23adb5bd' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}
select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(36,133,81,0.15); }
.last-updated { font-size: 11px; color: var(--text-muted); align-self: flex-end; padding-bottom: 2px; }
.date-group { display: flex; flex-direction: column; gap: 5px; }
input[type="date"] {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 13px; font-family: inherit;
  color: var(--text); cursor: pointer; transition: border-color 0.2s; background: var(--input-bg);
}
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.9); }
input[type="date"]:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(36,133,81,0.15); }

/* ── Stat / KPI Cards ────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); }
.stat { background: var(--surface); border-radius: var(--radius-md); padding: 16px 20px; border: 1px solid var(--border); border-top: 4px solid var(--green); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 4px; font-weight: 600; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--green); }
.stat-sub   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.stat-value.in-val  { color: var(--green); }
.stat-value.out-val { color: var(--negative); }
.stat-value.net-pos { color: var(--green); }
.stat-value.net-neg { color: var(--negative); }
.inout-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); }

/* ── Main card (chart + sidebar) ─────────────────────────────── */
.main-card { background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: flex; overflow: hidden; }
.sidebar { width: 220px; min-width: 220px; border-right: 1px solid var(--border-light); display: flex; flex-direction: column; }
.sidebar-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
.sidebar-header span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); }
.sidebar-actions { display: flex; gap: 8px; }
.btn-text { font-size: 11px; color: var(--green); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; font-weight: 600; }
.btn-text:hover { text-decoration: underline; }
.material-list { padding: 8px 0; overflow-y: auto; flex: 1; }
.material-item { display: flex; align-items: center; gap: 10px; padding: 7px 16px; cursor: pointer; transition: background 0.1s; user-select: none; }
.material-item:hover { background: var(--hover-bg); }
.material-item input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; accent-color: var(--green); }
.mat-label { font-size: 12px; color: var(--text-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mat-badge { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); flex-shrink: 0; }
.mat-badge.pos { background: var(--green-pale); color: var(--green); }
.mat-badge.neg { background: var(--negative-soft-bg); color: var(--negative); }
.chart-area { flex: 1; padding: 24px; display: flex; flex-direction: column; min-width: 0; }
.chart-title    { font-size: 22px; font-weight: 700; color: var(--green); margin-bottom: 4px; }
.chart-subtitle { font-size: 12px; color: var(--text-muted); margin-bottom: var(--space-md); }
.chart-wrapper  { position: relative; flex: 1; min-height: 380px; }
.no-data { display: none; flex-direction: column; align-items: center; justify-content: center; height: 380px; color: var(--border); font-size: 14px; gap: 10px; }
.no-data svg { opacity: 0.3; }

/* ── Filter tags ──────────────────────────────────────────────── */
.filter-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.filter-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600;
              background: var(--green-pale); color: var(--green); border: 1px solid var(--green-subtle-border);
              border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.filter-tag.date-tag { background: var(--green-subtle-tag-bg); color: var(--green); border-color: var(--green-subtle-border); }
[data-bs-theme="dark"] .filter-tag { color: #7cb697; }
[data-bs-theme="dark"] .filter-tag.date-tag { color: #7cb697; }

/* ── Gauge chart ─────────────────────────────────────────────── */
.gauge-wrapper { position: relative; min-height: 420px; }
.gauge-no-data { display: none; flex-direction: column; align-items: center; justify-content: center; height: 360px; color: var(--border); font-size: 14px; gap: 10px; }
.gauge-legend { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.gauge-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.gauge-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

/* ── Settings panel ──────────────────────────────────────────── */
.settings-note { font-size: 12px; color: var(--text-muted); padding: 4px 0 8px; }
.settings-note span { color: var(--warning-dark); font-weight: 700; }
.settings-table-wrap { overflow-x: auto; }
.settings-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.settings-table thead th { background: var(--green); color: white; padding: 8px 14px; text-align: left;
                            font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
                            font-weight: 600; border-bottom: 2px solid var(--green-light); white-space: nowrap; }
.settings-table tbody tr { border-bottom: 1px solid var(--border-light); }
.settings-table tbody tr:nth-child(even) { background: var(--row-even-bg); }
.settings-table tbody tr:hover { background: var(--hover-bg); }
.settings-table tbody td { padding: 7px 14px; color: var(--text-muted); vertical-align: middle; }
.settings-table .td-missing { color: var(--warning-dark); font-size: 10px; font-weight: 700; }
/* Read-only display cells for max-capacity and reorder-line values in
   the Bin Capacities table. Visually matches a numeric data cell:
   slight emphasis, right-aligned to align decimals across rows. When
   the value is missing, the `.td-missing` class layered on top swaps
   the color to the warning tone. */
.cap-readonly { font-weight: 600; color: var(--text); }
.cap-readonly.td-missing { color: var(--warning-dark); font-size: 12px; font-weight: 600; }
/* The .cap-input / .btn-save-cap / .save-confirm rules are kept for
   reference but no longer used: bin capacities became API-sourced and
   read-only in this build. Safe to delete in a future cleanup. */
.cap-input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 9px;
             font-size: 12px; font-family: inherit; color: var(--text);
             width: 100px; transition: border-color 0.2s; }
.cap-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(36,133,81,0.15); }
.cap-input.missing { border-color: var(--warning); background: var(--warning-soft-bg); }
.btn-save-cap { background: var(--green); color: white; border: none; border-radius: var(--radius-sm);
                padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
                font-family: inherit; transition: background 0.2s; }
.btn-save-cap:hover { background: var(--green-light); color: white; }
.save-confirm { font-size: 12px; color: var(--green); margin-left: 12px; display: none; }

/* ── VQ Table ─────────────────────────────────────────────────── */
.chart-row { display: flex; gap: var(--space-md); align-items: flex-start; }
.chart-row > .inout-card { flex: 1; min-width: 0; }
.vq-table-card { width: 320px; min-width: 280px; background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: flex; flex-direction: column; overflow: hidden; }
.vq-table-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border-light); }
.vq-table-header span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); }
.vq-table-scroll { overflow-y: auto; flex: 1; max-height: 520px; }
.vq-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.vq-table thead th { position: sticky; top: 0; background: var(--green); color: white; padding: 8px 12px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; border-bottom: 2px solid var(--green-light); white-space: nowrap; }
.vq-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.1s; }
.vq-table tbody tr:nth-child(even) { background: var(--row-even-bg); }
.vq-table tbody tr:hover { background: var(--hover-bg); }
.vq-table tbody td { padding: 7px 12px; color: var(--text-muted); vertical-align: top; }
.vq-table .td-mat { font-weight: 600; color: var(--green); white-space: nowrap; }
.vq-table .td-truck { font-weight: 600; color: var(--green); white-space: nowrap; }
.vq-table .td-vendor { color: var(--green); }
.vq-table .td-quarry { color: var(--text-muted); }
.vq-empty { padding: 24px 16px; text-align: center; color: var(--border); font-size: 12px; }

/* ── In/Out & Trucking sections ──────────────────────────────── */
.section-divider { border: none; border-top: 2px solid var(--border-light); margin: 4px 0; }
.inout-card { background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 24px; display: flex; flex-direction: column; gap: var(--space-md); }
.inout-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); }
.inout-title-block .inout-title    { font-size: 22px; font-weight: 700; color: var(--green); }
.inout-title-block .inout-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.date-controls { display: flex; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; }
.inout-chart-wrapper { position: relative; min-height: 360px; }
.inout-no-data { display: none; flex-direction: column; align-items: center; justify-content: center; height: 360px; color: var(--border); font-size: 14px; gap: 10px; }
.legend-row { display: flex; gap: 20px; align-items: center; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.legend-dot.in-dot  { background: rgba(36,133,81,0.8); }
.legend-dot.out-dot { background: rgba(251,176,64,0.9); }

/* ── Footer ──────────────────────────────────────────────────── */
.page-footer { text-align: center; padding: 20px 0 8px; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border-light); margin-top: 10px; }
.page-footer span { margin: 0 8px; }

/* ── Instructions Modal ──────────────────────────────────────── */
.modal-overlay { position:fixed;inset:0;background:var(--modal-overlay-bg);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 0.3s; }
.modal-overlay.hidden { opacity:0;pointer-events:none; }
.modal-box { background:var(--modal-bg);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.3);overflow:hidden; }
.modal-header-bar { background:linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);color:white;padding:22px 32px;display:flex;align-items:center;gap:14px; }
.modal-logo { background:white;color:var(--green);font-size:11px;font-weight:800;padding:5px 12px;border-radius:5px;letter-spacing:0.8px;text-transform:uppercase; }
.modal-title { font-size:18px;font-weight:700; }
.modal-body-content { padding:24px 32px; }
.modal-steps { list-style:none;display:flex;flex-direction:column;gap:16px;margin-bottom:28px;padding:0; }
.modal-steps li { display:flex;gap:14px;align-items:flex-start; }
.step-num { font-size:11px;font-weight:600;color:var(--green);background:var(--green-pale);border:1px solid var(--green-light);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px; }
.step-text { font-size:13px;color:var(--text);line-height:1.6; }
.step-text strong { color:var(--green);font-weight:600; }
.modal-section-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--green);margin-bottom:12px; }
.modal-footer { display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border-light);padding-top:20px;gap:12px;flex-wrap:wrap;margin-top:20px; }
.modal-checkbox-wrap { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);cursor:pointer;user-select:none; }
.modal-checkbox-wrap input[type="checkbox"] { accent-color:var(--green);width:14px;height:14px;cursor:pointer; }
.modal-close-btn { background:var(--green);color:white;border:none;padding:10px 28px;border-radius:6px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:0.02em;transition:opacity 0.2s; }
.modal-close-btn:hover { opacity:0.88; }

/* ── User Guide ──────────────────────────────────────────────── */
.guide-section { background:var(--surface);border:1px solid var(--border-light);border-radius:10px;padding:24px;margin-bottom:16px; }
.guide-section h3 { font-size:21px;font-weight:700;color:var(--green);margin:0 0 12px 0;padding-bottom:8px;border-bottom:1px solid var(--border-light); }
.guide-feature { display:flex;gap:12px;margin-bottom:14px; }
.guide-icon { width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.guide-feature h4 { font-size:13px;font-weight:600;color:var(--text);margin:0 0 3px 0; }
.guide-feature p { font-size:12px;color:var(--text-muted);margin:0;line-height:1.5; }

/* ── Toast ────────────────────────────────────────────────────── */
.save-toast { position:fixed;bottom:24px;right:24px;background:var(--green);color:white;padding:12px 20px;border-radius:8px;font-size:13px;font-weight:600;z-index:999;opacity:0;transform:translateY(10px);transition:all 0.3s;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,0.2); }
.save-toast.visible { opacity:1;transform:translateY(0); }

/* ── Load Data Modal ─────────────────────────────────────────── */
.update-overlay { position:fixed;inset:0;background:var(--modal-overlay-bg);z-index:200;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity 0.3s; }
.update-overlay.visible { opacity:1;pointer-events:auto; }
.update-modal { background:var(--modal-bg);border-radius:var(--radius-lg);max-width:600px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.2);overflow:hidden; }
.update-header { background:var(--green);color:white;padding:16px 20px;display:flex;justify-content:space-between;align-items:center; }
.update-header h3 { margin:0;font-size:16px;font-weight:700; }
.close-btn { background:none;border:none;color:white;font-size:22px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:opacity 0.2s; }
.close-btn:hover { opacity:0.7; }
.update-body { padding:20px; }
.dropzone { border:2px dashed var(--border);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;cursor:pointer;transition:all 0.2s;background:var(--surface); }
.dropzone:hover { border-color:var(--green);background:var(--green-pale); }
.dropzone.dragover { border-color:var(--green);background:var(--green-pale); }
.dropzone-icon { font-size:40px;margin-bottom:12px; }
.dropzone-text { font-size:14px;color:var(--text);margin-bottom:8px;font-weight:600; }
.dropzone-hint { font-size:12px;color:var(--text-muted);margin-bottom:16px; }
.file-input { display:none; }
.status-message { margin-top:16px;padding:12px;border-radius:var(--radius-sm);font-size:13px;display:none; }
.status-message.success { background:#D1FAE5;color:#065F46;border:1px solid #A7F3D0;display:block; }
.status-message.error { background:#FEE2E2;color:#7F1D1D;border:1px solid #FECACA;display:block; }
.status-message.loading { background:#DBEAFE;color:#1E40AF;border:1px solid #BFDBFE;display:block; }
[data-bs-theme="dark"] .status-message.success { background:#0e3520;color:#a6c988;border-color:#15401f; }
[data-bs-theme="dark"] .status-message.error { background:#3a1c1f;color:#e36776;border-color:#5b2730; }
[data-bs-theme="dark"] .status-message.loading { background:#102140;color:#7da4e8;border-color:#1a3160; }
.update-footer { padding:12px 20px;text-align:center;border-top:1px solid var(--border);background:var(--bg); }
.update-footer-text { font-size:12px;color:var(--text-muted); }

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  nav, .no-print, .save-toast { display: none !important; }
  body { background: white; }
  .main-card, .inout-card, .vq-table-card, .stat, .guide-section { box-shadow: none; border: 1px solid #ddd; }
  @page { size: letter landscape; margin: 0.5in; }
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .stats, .inout-stats { grid-template-columns: repeat(2, 1fr); }
  .chart-row { flex-direction: column; }
  .vq-table-card { width: 100%; }
  nav { flex-wrap: wrap; }
  .main-card { flex-direction: column; }
  .sidebar { width: 100%; min-width: unset; border-right: none; border-bottom: 1px solid var(--border-light); }
}
@media (max-width: 600px) {
  .page { padding: var(--space-md); }
  .stats, .inout-stats { grid-template-columns: 1fr; }
}

/* ── Loading overlay (shown during API fetch / refresh) ──────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Must render above .modal-overlay (the startup instructions popup,
     z-index: 10000) -- the sign-in/loading state needs to stay on top
     even if that popup is also showing, so users aren't confused about
     whether sign-in is still pending. */
  z-index: 10010;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  pointer-events: none;
}
.loading-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.loading-card {
  background: var(--surface);
  padding: 20px 28px;
  border-radius: 10px;
  border-top: 4px solid var(--green-light);
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  min-width: 220px;
  max-width: 360px;
}
.loading-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(36, 133, 81, 0.12);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: loading-spin 0.9s linear infinite;
  flex-shrink: 0;
}
.loading-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--green);
  line-height: 1.4;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}
@media print {
  .loading-overlay { display: none !important; }
}

/* ── Auth gate (before Entra sign-in resolves) ───────────────────
   Applied to <body> by default in the HTML so there's no flash of
   the full dashboard before app.js runs. Removed by bootstrapAuth()
   once sign-in succeeds (or immediately, for a saved file:// snapshot
   where there's no auth gate at all). Only the nav brand/title and
   the theme toggle stay visible -- everything else that could leak
   data or controls is hidden until a user is confirmed signed in. */
body.auth-pending .nav-tabs { display: none; }
body.auth-pending .nav-actions .nav-btn:not(.theme-toggle) { display: none; }
body.auth-pending .page { display: none; }

/* ── Theme toggle button (in nav-actions) ────────────────────────
   Same outline-style as the other nav buttons; the contained icon
   swaps via two child spans (.theme-icon-light / .theme-icon-dark)
   that are revealed/hidden based on the current theme. */
.theme-toggle {
  padding: 7px 10px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Match nav-btn's natural line-box (font-size 12 * default ~1.5)
     so the toggle ends up the same height as its neighbors in both
     light and dark mode regardless of which icon is shown. */
  line-height: 18px;
  /* Force monochrome (text-style) rendering of the sun/moon glyphs
     so iOS / iPadOS don't paint them as yellow / colored emoji.
     Paired with U+FE0E in the HTML for double coverage on browsers
     that don't support font-variant-emoji yet. */
  font-variant-emoji: text;
  -webkit-font-feature-settings: "liga" off;
}
.theme-toggle .theme-icon-light { font-size: 14px; }            /* moon ☾ -- already legible at small size */
.theme-toggle .theme-icon-dark  { font-size: 18px; }  /* sun ☀ -- needs more pixels to read as a sun rather than an asterisk */
.theme-toggle .theme-icon-dark { display: none; }
[data-bs-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-toggle .theme-icon-dark  { display: inline; }

/* ── Utility classes for JS-rendered table cells ─────────────────
   These replace inline style="..." strings that were embedded in
   string-concatenated HTML in app.js. By moving them to CSS we
   get automatic theme-awareness via the variables above. */
.td-money         { text-align: right; white-space: nowrap; color: var(--green); }
.td-money-bold    { text-align: right; white-space: nowrap; color: var(--green); font-weight: 700; }
.td-loads         { text-align: right; color: var(--text-muted); }
.td-loads-bold    { text-align: right; font-weight: 700; color: var(--green); }
.td-subtotal-cell { background: var(--subtotal-bg); border-top: 1px solid var(--subtotal-border); }
.td-subtotal-label{ background: var(--subtotal-bg); border-top: 1px solid var(--subtotal-border); font-size: 10px; color: var(--text-muted); font-weight: 600; }
.cap-mat-bold     { font-weight: 600; color: var(--green); }
.cap-current-amt  { color: var(--text-muted); }
.cap-status       { font-weight: 700; }
.cap-status.ok       { color: var(--green); }
.cap-status.over     { color: var(--warning-dark); }
.cap-status.critical { color: var(--negative); }

/* Bootstrap-style helpers for inline overrides we still want
   (last-updated label is muted but flips with the theme). */
.text-muted-soft { color: var(--text-muted) !important; }

/* Dark theme: dashboard inline-styled placeholder content in
   index.html still uses background:#f8f9fb on subtotal cells.
   Once the JS re-renders the table those classes take over,
   but until then the placeholder benefits from a dark-mode
   friendly subtotal-bg via the same var. The print media query
   above keeps print rendered as light. */