/* ==========================================================================
   GoldLedger ERP - interface styles

   The system is used all day by people entering numbers, so the interface is
   built to get out of the way: quiet chrome, loud figures. Every money and
   weight column uses tabular numerals so digits line up down the page, and
   nothing decorative competes with the data.
   ========================================================================== */

:root{
  /* Surfaces ---------------------------------------------------------- */
  --bg:#f2f4f7;
  --panel:#ffffff;
  --panel-2:#f8fafc;

  /* Ink --------------------------------------------------------------- */
  --ink:#111721;
  --ink-2:#495365;
  --ink-3:#7b8698;
  --line:#dfe4ec;
  --line-2:#eef1f6;

  /* Brand blue. The deep tone is for text on white, the bright one for
     accents on the dark sidebar - the same blue read at three light levels.
     It sits deliberately deeper than the informational blue below, so a
     brand element and a plain link never look like the same thing.        */
  --brand:#17548f;
  --brand-2:#2f7ac7;
  --brand-3:#7cb8ec;
  --brand-soft:#eaf3fc;
  --brand-edge:#c2ddf6;

  /* Sidebar ----------------------------------------------------------- */
  --nav:#111823;
  --nav-2:#1b2431;
  --nav-3:#26313f;
  --nav-ink:#9aa5b6;
  --nav-ink-2:#f2f5f9;

  /* Meaning ----------------------------------------------------------- */
  --ok:#15703f;     --ok-bg:#e7f5ec;   --ok-edge:#b9e0c8;
  --warn:#8a5c07;   --warn-bg:#fdf4e3; --warn-edge:#efd9ae;
  --bad:#b02318;    --bad-bg:#fdeceb;  --bad-edge:#f0c4c0;
  --info:#155ca6;   --info-bg:#e9f1fb; --info-edge:#c2d9f2;
  --muted-bg:#edf0f4;

  --radius:9px;
  --radius-sm:6px;
  --shadow:0 1px 1px rgba(17,23,33,.04), 0 1px 3px rgba(17,23,33,.05);
  --shadow-lift:0 2px 4px rgba(17,23,33,.06), 0 8px 22px rgba(17,23,33,.07);
  --ring:0 0 0 3px rgba(47,122,199,.30);
  --sidebar-w:240px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--info); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.011em}
table{border-collapse:collapse; width:100%}
input,select,textarea,button{font:inherit}

/* Anyone working by keyboard must be able to see where they are. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm);
}

/* ---------- Layout ---------- */
.app{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,var(--nav) 0%,#0d131c 100%);
  color:var(--nav-ink); display:flex; flex-direction:column; position:sticky; top:0;
  height:100vh; overflow-y:auto; scrollbar-width:thin;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:#2b3646; border-radius:4px}
.sidebar::-webkit-scrollbar-thumb:hover{background:#3a4759}

.brand{
  display:flex; align-items:center; gap:11px; padding:16px 18px;
  border-bottom:1px solid #212b39; position:sticky; top:0; z-index:2;
  background:var(--nav);
}
.brand-mark{
  width:32px;height:32px;border-radius:9px;flex:0 0 32px;
  background:linear-gradient(145deg,var(--brand-3),var(--brand));
  display:grid;place-items:center;color:#ffffff;font-weight:800;font-size:14px;
  box-shadow:0 2px 8px rgba(124,184,236,.28);
}
.brand-text b{display:block;color:#fff;font-size:14px;letter-spacing:-.012em;line-height:1.25}
.brand-text span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#717d92;margin-top:1px}

.nav{padding:8px 0 30px}
.nav-group{
  padding:16px 18px 6px; font-size:10px; text-transform:uppercase;
  letter-spacing:.11em; color:#63708a; font-weight:700;
}
.nav a{
  display:flex; align-items:center; gap:10px; padding:8px 18px; color:var(--nav-ink);
  font-size:13.2px; border-left:3px solid transparent; text-decoration:none;
  transition:background .12s ease, color .12s ease;
}
.nav a:hover{background:var(--nav-2); color:var(--nav-ink-2); text-decoration:none}
.nav a.active{
  background:linear-gradient(90deg,rgba(47,122,199,.20),rgba(47,122,199,0) 70%),var(--nav-2);
  color:#fff; border-left-color:var(--brand-2); font-weight:600;
}
.nav a .ico{width:17px; text-align:center; opacity:.9; font-size:13.5px; flex:0 0 17px}

/* Icon rail - frees ~184px for wide data-entry sheets */
.app.rail .sidebar{width:58px; flex:0 0 58px}
.app.rail .brand{padding:16px 13px; justify-content:center}
.app.rail .brand-text{display:none}
.app.rail .nav-group{
  font-size:0; padding:10px 0 4px; margin:0 12px; border-top:1px solid #212b39; height:1px; overflow:hidden;
}
.app.rail .nav a{justify-content:center; padding:10px 0; border-left-width:0; border-right:3px solid transparent}
.app.rail .nav a span:not(.ico){display:none}
.app.rail .nav a .ico{font-size:16px; width:auto}
.app.rail .nav a.active{border-right-color:var(--brand-2); background:var(--nav-2)}

.rail-toggle{
  border:1px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer;
  width:30px; height:30px; border-radius:var(--radius-sm); font-size:13px; line-height:1; padding:0;
}
.rail-toggle:hover{background:var(--panel-2); color:var(--ink); border-color:#cbd3de}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.6) blur(6px);
  border-bottom:1px solid var(--line); padding:0 22px;
  height:58px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:20;
}
.topbar .page-title{font-size:15.5px; font-weight:650; margin-right:auto; letter-spacing:-.012em}
.topbar .page-title small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:400;letter-spacing:0}

.site-switch{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.site-switch label{white-space:nowrap}
.site-switch select{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px 10px; background:#fff;
  font-size:12.5px; color:var(--ink); min-width:150px;
}
.site-switch select:hover{border-color:#c9d1dd}
/* The company box sits before the site box and is weighted a little heavier:
   which business you are in matters more than which site. */
.company-switch select{
  font-weight:650; border-color:var(--brand-edge); background:var(--brand-soft);
  min-width:172px; color:var(--brand);
}
.company-switch label{font-weight:650; color:var(--ink)}

.userchip{display:flex;align-items:center;gap:10px;padding-left:15px;border-left:1px solid var(--line)}
.avatar{
  width:31px;height:31px;border-radius:50%;
  background:linear-gradient(145deg,var(--brand-soft),#cfe3f8);
  color:var(--brand); display:grid;place-items:center;font-weight:700;font-size:12px;
  border:1px solid var(--brand-edge);
}
.userchip .who{line-height:1.28}
.userchip .who b{display:block;font-size:12.5px;font-weight:650}
.userchip .who span{display:block;font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em}

.content{padding:20px 22px 52px; flex:1}

/* ---------- Cards & sections ---------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden;
}
.card-head{
  padding:14px 16px; border-bottom:1px solid var(--line-2); display:flex;
  align-items:center; gap:12px; flex-wrap:wrap; background:var(--panel);
}
.card-head h2{font-size:13.5px; margin-right:auto; letter-spacing:-.005em; color:var(--ink)}
.card-head h2 small{display:block; font-weight:400; font-size:11.5px; color:var(--ink-3); margin-top:2px; letter-spacing:0}
.card-body{padding:16px}
.card-body.tight{padding:0}
.card-foot{
  padding:12px 16px; border-top:1px solid var(--line-2); background:var(--panel-2);
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
}

/* ---------- KPI tiles ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:12px; margin-bottom:18px}
/* Stays a plain block, not a flex row: most tiles in the system are written
   without an icon, and they must lay out exactly the same either way. The
   icon, where there is one, floats out of the way. */
.kpi{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 15px 14px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  display:block;
  transition:box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
/* A tile that links somewhere lifts slightly, so it reads as pressable. */
a.kpi:hover{box-shadow:var(--shadow-lift); transform:translateY(-1px); border-color:#cfd7e2; text-decoration:none}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand-2)}
.kpi.ok::before{background:var(--ok)} .kpi.bad::before{background:var(--bad)}
.kpi.info::before{background:var(--info)} .kpi.warn::before{background:var(--warn)}

.kpi .kpi-icon{
  float:right; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  font-size:16px; background:var(--brand-soft); border:1px solid var(--brand-edge);
  margin:1px 0 4px 10px;
}
.kpi.ok   .kpi-icon{background:var(--ok-bg);   border-color:var(--ok-edge)}
.kpi.bad  .kpi-icon{background:var(--bad-bg);  border-color:var(--bad-edge)}
.kpi.info .kpi-icon{background:var(--info-bg); border-color:var(--info-edge)}
.kpi.warn .kpi-icon{background:var(--warn-bg); border-color:var(--warn-edge)}
.kpi .kpi-text{min-width:0}

.kpi .label{font-size:10.5px; text-transform:uppercase; letter-spacing:.085em; color:var(--ink-3); font-weight:700}
.kpi .value{
  font-size:21px; font-weight:680; letter-spacing:-.025em; margin-top:3px;
  font-variant-numeric:tabular-nums; color:var(--ink); line-height:1.15;
}
.kpi .value .small{font-size:12px; font-weight:500; color:var(--ink-3)}
.kpi .sub{font-size:11.5px; color:var(--ink-3); margin-top:3px; line-height:1.4}
.kpi .value.neg{color:var(--bad)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table.grid{font-size:13.2px}
table.grid th{
  text-align:left; padding:10px 12px; background:var(--panel-2); border-bottom:1px solid var(--line);
  font-size:10.8px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2);
  font-weight:700; white-space:nowrap; position:sticky; top:0; z-index:1;
}
table.grid td{padding:9px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle}
table.grid tbody tr{transition:background .1s ease}
table.grid tbody tr:hover{background:#f7fafd}
table.grid tbody tr:last-child td{border-bottom:none}
table.grid td.num, table.grid th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.grid td.mono{font-family:var(--mono); font-size:12px; color:var(--ink-2)}
table.grid td.center, table.grid th.center{text-align:center}
table.grid tr.total td{
  font-weight:700; background:var(--panel-2); border-top:2px solid var(--line);
  border-bottom:none; font-variant-numeric:tabular-nums;
}
table.grid tr.subtotal td{font-weight:600; background:#fbfcfe}
table.grid tr.section td{
  background:#eef1f6; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2);
}
table.grid tr.void td{opacity:.48; text-decoration:line-through}
.indent{padding-left:26px !important}
.neg{color:var(--bad)}
.pos{color:var(--ok)}
.empty{padding:44px 20px; text-align:center; color:var(--ink-3); font-size:13px}
.empty .big{font-size:28px; margin-bottom:6px; opacity:.45}

/* ---------- Badges ---------- */
.badge{
  display:inline-block; padding:2.5px 8px; border-radius:20px; font-size:10.2px;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  border:1px solid transparent;
}
.badge-ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-edge)}
.badge-warn{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-edge)}
.badge-bad{background:var(--bad-bg); color:var(--bad); border-color:var(--bad-edge)}
.badge-info{background:var(--info-bg); color:var(--info); border-color:var(--info-edge)}
.badge-muted{background:var(--muted-bg); color:var(--ink-2); border-color:#dde2ea}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:#fff; color:var(--ink); font-size:13px;
  font-weight:550; cursor:pointer; text-decoration:none; line-height:1.35;
  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover{background:var(--panel-2); border-color:#cbd3de; text-decoration:none}
.btn:active{background:#eef1f5}
.btn-primary{
  background:linear-gradient(180deg,#2069b5,var(--brand)); border-color:#14497e; color:#fff;
  box-shadow:0 1px 2px rgba(23,84,143,.30);
}
.btn-primary:hover{background:linear-gradient(180deg,#2775c6,#195a97); color:#fff; border-color:#123f6d}
.btn-primary:active{background:var(--brand)}
.btn-danger{background:#fff; border-color:var(--bad-edge); color:var(--bad)}
.btn-danger:hover{background:var(--bad-bg); border-color:#e5aca6}
.btn-sm{padding:4.5px 10px; font-size:12px}
.btn-link{border:none;background:none;padding:0;color:var(--info)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn:disabled:hover{background:#fff}
.btn-group{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- Forms ---------- */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(218px,1fr)); gap:15px}
.form-grid.two{grid-template-columns:repeat(2,1fr)}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-size:11.5px; font-weight:650; color:var(--ink-2)}
.field label .req{color:var(--bad)}
.field .hint{font-size:11px; color:var(--ink-3); line-height:1.45}
.field input, .field select, .field textarea{
  border:1px solid #ccd4df; border-radius:var(--radius-sm); padding:8px 11px; background:#fff;
  color:var(--ink); width:100%; font-size:13.5px; transition:border-color .12s ease, box-shadow .12s ease;
}
.field input:hover, .field select:hover, .field textarea:hover{border-color:#b7c1d0}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand-2); box-shadow:var(--ring)
}
.field input[readonly]{background:var(--panel-2); color:var(--ink-2)}
/* A figure the form works out for itself: shaded, right-aligned, not typeable */
.field input.calc-out{
  background:#edf3f9; border-color:#ccd9e6; color:var(--ink); font-weight:680;
  text-align:right; font-variant-numeric:tabular-nums; cursor:default;
}
.field input.calc-out:focus{outline:none; box-shadow:none; border-color:#ccd9e6}
.field label .auto{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3);
  font-weight:700; margin-left:6px; background:#edf3f9; padding:1.5px 6px; border-radius:4px;
}
.field textarea{min-height:68px; resize:vertical}
.field input.num{text-align:right; font-variant-numeric:tabular-nums}
.inline-check{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer}
.inline-check input{width:auto; cursor:pointer}

/* ---------- Filter bar ---------- */
.filters{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.filters .field{min-width:138px}
.filters .field label{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em}

/* ---------- Flash ---------- */
.flash{
  padding:11px 15px; border-radius:var(--radius); margin-bottom:14px; font-size:13.2px;
  border:1px solid transparent; display:flex; gap:10px; align-items:flex-start; line-height:1.5;
}
.flash-success{background:var(--ok-bg); border-color:var(--ok-edge); color:#0f5c33}
.flash-error{background:var(--bad-bg); border-color:var(--bad-edge); color:#8c1c13}
.flash-warning{background:var(--warn-bg); border-color:var(--warn-edge); color:#77500a}
.flash-info{background:var(--info-bg); border-color:var(--info-edge); color:#134a86}

/* ---------- Statements ---------- */
.statement{max-width:960px}
.statement-head{text-align:center; padding:20px 16px 8px}
.statement-head h1{font-size:18px}
.statement-head .org{font-size:12.5px; color:var(--brand); font-weight:700; letter-spacing:.02em}
.statement-head .period{font-size:12px; color:var(--ink-3); margin-top:4px}
.balance-note{padding:11px 16px; font-size:12.5px; border-top:1px solid var(--line-2)}
.balance-note.ok{color:var(--ok); background:var(--ok-bg)}
.balance-note.bad{color:var(--bad); background:var(--bad-bg)}

/* ---------- Journal preview ---------- */
.jv{border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin-top:6px}
.jv table{font-size:12.5px}
.jv th{background:var(--panel-2)}

/* ---------- Day sheet ---------- */
.daysheet{display:grid; grid-template-columns:repeat(auto-fit,minmax(282px,1fr)); gap:14px}
.daysheet .card{margin:0}
.sheet-line{
  display:flex; justify-content:space-between; gap:12px; padding:6px 0;
  border-bottom:1px dashed var(--line-2); font-size:13px;
}
.sheet-line:last-child{border-bottom:none}
.sheet-line .k{color:var(--ink-2)}
.sheet-line .v{font-variant-numeric:tabular-nums; font-weight:650}
.sheet-line.tot{border-top:2px solid var(--line); margin-top:6px; padding-top:8px; font-weight:700}

/* ==========================================================================
   Entry grid - the plant sheet
   Fixed layout with percentage columns so the whole sheet always fits the
   pane; below --sheet-min it falls back to scrolling rather than crushing.
   ========================================================================== */
.sheet-scroll{
  overflow-x:auto; border:1px solid #cdd4dc; border-radius:7px; background:#fff;
}
table.sheet{
  width:100%; min-width:860px; border-collapse:separate; border-spacing:0;
  table-layout:fixed; font-size:11.5px; font-variant-numeric:tabular-nums;
}
/* No position:sticky here - the scroll container is the sticky context, so a
   top offset drops the header into the middle of the rows. */
table.sheet th{
  background:#5b8c3e; color:#fff; padding:6px 6px; font-size:10.5px; font-weight:700;
  line-height:1.2; letter-spacing:.005em; text-transform:none; text-align:right;
  border-right:1px solid #4a7433; border-bottom:1px solid #40642c;
  white-space:normal; vertical-align:bottom;
}
table.sheet th:last-child{border-right:none}
table.sheet th.left{text-align:left}
table.sheet th.mid{text-align:center}
table.sheet th .sub{
  display:block; font-weight:500; font-size:9.5px; opacity:.8; letter-spacing:.02em;
}
table.sheet td{
  border-right:1px solid #e0e5ea; border-bottom:1px solid #e0e5ea;
  padding:0; background:#fff; overflow:hidden;
}
table.sheet td:last-child{border-right:none}
table.sheet tbody tr:nth-child(even) td{background:#fafbfc}
table.sheet tbody tr:hover td{background:#f4f8f1}
table.sheet tbody tr:focus-within td{background:#f0f6ea}
table.sheet tbody tr:focus-within td.rowno{background:#5b8c3e; color:#fff}

table.sheet td.calc{
  padding:6px 7px; text-align:right; font-weight:600; color:var(--ink);
  background:#f6f8fa; white-space:nowrap; text-overflow:ellipsis;
}
/* Very large figures step down a size rather than being cut off */
table.sheet td.calc.tight{font-size:10.3px; letter-spacing:-.2px; padding-left:3px; padding-right:5px}
table.sheet td.calc.tighter{font-size:9.4px; letter-spacing:-.3px; padding-left:2px; padding-right:4px}
/* A worked-out cell is read-only, so it is tinted and shows a plain cursor */
table.sheet td.calc{cursor:default; user-select:text}
table.sheet td.calc.zero{color:#aab2bb; font-weight:500}
table.sheet td.calc.negcell{background:#fdecea !important; color:var(--bad); font-weight:700}
table.sheet td.result{background:#eef3f8; font-weight:700}
table.sheet tbody tr:nth-child(even) td.result{background:#e9eff6}
table.sheet tbody tr:nth-child(even) td.calc{background:#f2f5f8}
table.sheet td.calc.muted-cell{color:var(--ink-3); font-weight:500}
table.sheet td.rowno{
  background:#eef1f5; text-align:center; padding:6px 2px; color:var(--ink-3);
  font-size:10.5px; font-weight:600;
}
table.sheet td.act{text-align:center; padding:0}

table.sheet input, table.sheet select{
  border:none; background:transparent; width:100%; padding:6px 6px;
  font-size:11.5px; border-radius:0; color:var(--ink); min-width:0;
}
table.sheet select{cursor:pointer; text-overflow:ellipsis}
table.sheet input:focus, table.sheet select:focus{
  outline:2px solid var(--brand-2); outline-offset:-2px; background:#fff;
}
table.sheet input.num{text-align:right; font-variant-numeric:tabular-nums}
table.sheet input::placeholder{color:#b6bec8}
table.sheet .job-pick{
  display:none; border-top:1px dashed var(--line); font-size:10.5px; color:var(--ink-2); padding:3px 6px;
}
table.sheet .job-pick.on{display:block}

/* Offer of what the customer drew earlier. Hidden unless they owe something,
   and never ticked for them - an old balance only counts when it is chosen. */
table.sheet .draw-opt{
  display:none; align-items:center; gap:5px; cursor:pointer;
  border-top:1px dashed var(--line); font-size:10.5px; color:var(--bad);
  padding:3px 6px; font-weight:600;
}
table.sheet .draw-opt.on{display:flex}
table.sheet .draw-opt input{margin:0; cursor:pointer}

/* Diggers' share: the percentage is typed, the money underneath is worked out. */
table.sheet td.wcell{padding:0; vertical-align:top}
table.sheet td.wcell input{border:none; width:100%; padding:6px 5px; text-align:right}
table.sheet td.wcell input.locked{background:#f2f5f8; color:#aab2bb; cursor:not-allowed}
table.sheet td.wcell .wamt{
  padding:2px 5px 4px; text-align:right; font-size:10.2px; font-weight:700;
  color:var(--ink-2); border-top:1px dashed var(--line); font-variant-numeric:tabular-nums;
}
table.sheet td.wcell .wamt.zero{color:#c2c8d0; font-weight:500}

table.sheet tfoot td{
  background:#e4ecdd; font-weight:700; padding:8px 5px; text-align:right;
  font-size:10.8px; border-top:2px solid #5b8c3e; border-bottom:none;
  white-space:nowrap; overflow:hidden;
}
table.sheet tfoot td.left{text-align:left; font-size:11px}
table.sheet tfoot td.split{text-align:center; font-size:9.8px; font-weight:600}
table.sheet tfoot td.tight{font-size:9.8px; letter-spacing:-.2px; padding-left:3px; padding-right:3px}
table.sheet tfoot td.tighter{font-size:9px; letter-spacing:-.3px; padding-left:2px; padding-right:2px}

.rm-row{
  background:none; border:none; color:#b9c0c8; cursor:pointer; font-size:14px;
  line-height:1; padding:6px 4px; width:100%;
}
.rm-row:hover{color:var(--bad); background:var(--bad-bg)}

/* Live totals above the sheet */
.sheet-tally{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:7px;
  overflow:hidden; margin-bottom:12px;
}
.sheet-tally div{background:#fff; padding:9px 12px}
.sheet-tally .k{font-size:10px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-3); font-weight:700}
.sheet-tally .v{font-size:16px; font-weight:650; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; margin-top:2px}
.sheet-tally .v.neg{color:var(--bad)}
.sheet-tally .v small{font-size:11px; color:var(--ink-3); font-weight:500}

.sheet-legend{
  display:flex; gap:6px 18px; flex-wrap:wrap; font-size:11px; color:var(--ink-3); padding:10px 2px 0;
}
.sheet-legend b{color:var(--ink-2); font-weight:600}

@media (max-width:1180px){
  .sheet-scroll{box-shadow:inset -12px 0 12px -12px rgba(0,0,0,.18)}
}

/* ---------- Misc ---------- */
.muted{color:var(--ink-3)}
.small{font-size:12px}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap}
.tabs a{padding:8px 14px; font-size:13px; color:var(--ink-2); border-bottom:2px solid transparent}
.tabs a:hover{color:var(--ink); text-decoration:none}
.tabs a.active{color:var(--brand); border-bottom-color:var(--brand); font-weight:600}
.pager{display:flex; gap:6px; align-items:center; justify-content:flex-end; padding:12px 16px; font-size:12.5px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.right{text-align:right}
.nowrap{white-space:nowrap}
.pill{display:inline-block;padding:1px 7px;border-radius:9px;background:var(--muted-bg);
  font-size:11px;color:var(--ink-2)}
.progress{height:5px;background:var(--line-2);border-radius:3px;overflow:hidden;margin-top:5px}
.progress span{display:block;height:100%;background:var(--brand-2)}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:linear-gradient(150deg,#0f1620 0%,#1b2838 48%,#12406e 100%)}
.auth-card{width:100%; max-width:398px; background:#fff; border-radius:12px;
  box-shadow:0 22px 60px rgba(0,0,0,.34); overflow:hidden}
.auth-head{padding:26px 30px 18px; text-align:center; border-bottom:1px solid var(--line-2)}
.auth-head .brand-mark{margin:0 auto 11px; width:42px; height:42px; font-size:18px; border-radius:10px}
.auth-head h1{font-size:18px}
.auth-head p{margin:5px 0 0; font-size:12.5px; color:var(--ink-3)}
.auth-body{padding:22px 30px 26px}
.auth-body .field{margin-bottom:13px}
.auth-body .btn{width:100%; justify-content:center; padding:9px}
.auth-foot{padding:13px 30px; background:#fafbfc; border-top:1px solid var(--line-2);
  font-size:11.5px; color:var(--ink-3); text-align:center}

/* ---------- Install ---------- */
.install-wrap{max-width:720px; margin:40px auto; padding:0 20px}
.step-list{list-style:none; padding:0; margin:0 0 18px; display:flex; gap:8px; flex-wrap:wrap}
.step-list li{font-size:12px; padding:5px 11px; border-radius:20px; background:var(--muted-bg); color:var(--ink-2)}
.step-list li.done{background:var(--ok-bg); color:var(--ok)}
.step-list li.now{background:var(--brand-soft); color:var(--brand); font-weight:600}
.check{font-size:13px; padding:6px 0; border-bottom:1px solid var(--line-2); display:flex; gap:9px}
.check:last-child{border-bottom:none}
.check .st{width:18px}

/* ---------- Print ---------- */
@media print{
  .sidebar,.topbar,.no-print,.card-foot,.filters{display:none !important}
  body{background:#fff}
  .content{padding:0}
  .card{border:none; box-shadow:none; margin:0}
  .card-head{border-bottom:1px solid #999}
  table.grid th{background:#fff !important; border-bottom:1px solid #333}
  a{color:#000; text-decoration:none}
}

@media (max-width:900px){
  .sidebar{position:fixed; left:-var(--sidebar-w); z-index:60}
  .app.nav-open .sidebar{left:0}
  .split{grid-template-columns:1fr}
  .form-grid.two{grid-template-columns:1fr}
}

/* A row where somebody's permission has been changed from what their role
   gives them, so a personal exception is never invisible. */
table.perm-table tr.perm-changed td{background:var(--brand-soft)}
table.perm-table tr.perm-changed td:first-child{box-shadow:inset 3px 0 0 var(--brand-2)}

/* A cash customer's row on the plant sheet. There is no agreement behind it,
   so the price and the fees are typed for that run - the tint is there to say
   the blanks are expected rather than something that failed to load. */
table.sheet tr.cash-row > td { background: #fffaf0; }
table.sheet tr.cash-row input.js-rate,
table.sheet tr.cash-row input.js-srate,
table.sheet tr.cash-row input.js-transport { box-shadow: inset 0 0 0 1px #d9a441; }

/* "The company keeps the gold" - our own material milled under a name that is
   only there so the run can be traced. No price, no fees, nothing owed, so
   those boxes are emptied and locked rather than left looking fillable. */
table.sheet tr.own-row > td { background: #f3f7f3; }
table.sheet label.own-opt { display: block; margin-top: 3px; font-size: 11px; color: #5b6b5b; }