:root{
  --bg:#f3f5f8; --surface:#fff; --ink:#15202b; --ink-2:#4a5866; --muted:#6b7886; --line:#dfe4ea; --line-2:#eef1f4;
  --nav:#0f2236; --nav-ink:#b9c6d3; --nav-active:#1d3a57;
  --brand:#e08a1e; --primary:#1f5fae; --primary-ink:#fff; --danger:#c0392b; --ok:#1e8e5a; --warn:#b7791f;
  --radius:8px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  font-size:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;line-height:1.45}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}
h1{font-size:22px;margin:0 0 4px} h2{font-size:19px;margin:0 0 12px} h3{font-size:15px;margin:0 0 12px} h4{font-size:13px;margin:12px 0 8px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
code{font-family:ui-monospace,Consolas,monospace;font-size:.92em}
.muted{color:var(--muted)} .small{font-size:12px} .r{text-align:right} .c{text-align:center} .nowrap{white-space:nowrap} .wrap{word-break:break-word;max-width:420px}
.mt{margin-top:14px} .center{text-align:center} .warn{color:var(--warn)} .inline{display:inline}
[hidden]{display:none!important}

/* top bar + shell */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;background:var(--nav);color:#fff;border-bottom:1px solid #0a1826}
.brand{display:flex;align-items:center;gap:10px;color:#fff} .brand:hover{text-decoration:none}
.brand-mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:7px;background:var(--brand);color:#1b1206;font-weight:800;letter-spacing:-.5px}
.brand-mark.lg{width:44px;height:44px;font-size:18px;border-radius:10px}
.brand-text{display:flex;flex-direction:column;font-weight:700;line-height:1.1} .brand-text small{font-weight:400;color:var(--nav-ink);font-size:11px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.whoami{display:flex;flex-direction:column;text-align:right;line-height:1.2} .whoami small{color:var(--nav-ink);font-size:11px}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.shell{display:flex;min-height:calc(100vh - 56px);background:linear-gradient(to right,var(--nav) 220px,var(--bg) 220px)}
.nav{width:220px;flex:none;background:var(--nav);padding:10px 8px 24px;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto}
.nav-sec{color:#6f8296;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;padding:14px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;color:var(--nav-ink);padding:8px 10px;border-radius:6px;font-size:13.5px}
.nav-item:hover{background:#16304a;color:#fff;text-decoration:none}
.nav-item.active{background:var(--nav-active);color:#fff;box-shadow:inset 3px 0 0 var(--brand)}
.ico{width:18px;height:18px;fill:currentColor;flex:none}
.main{flex:1;min-width:0;padding:22px 28px 60px;max-width:1280px}
.main.wide{max-width:none}

/* page head */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head p{margin:2px 0 0}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* cards + grids */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card.flush{padding:0;overflow:hidden}
.card-head{display:flex;justify-content:space-between;align-items:center}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.span-2{grid-column:span 2} .span-3{grid-column:span 3}
.stack{display:flex;flex-direction:column;gap:12px} .stack-lg{display:flex;flex-direction:column;gap:16px}
.row,.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.scroll-x{overflow-x:auto}
.est-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;align-items:start}

/* stats */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.stat{flex:1 1 130px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;color:var(--ink-2);font-size:12.5px;box-shadow:var(--shadow)}
.stat span{display:block;font-size:24px;font-weight:700;color:var(--ink)} .stat:hover{text-decoration:none;border-color:var(--primary)}
.stat-warn{border-left:4px solid var(--warn)}

/* forms */
label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
label.check{flex-direction:row;align-items:center;gap:8px;font-weight:500}
input,select,textarea{font:inherit;font-weight:400;color:var(--ink);background:#fff;border:1px solid #c9d1da;border-radius:6px;padding:7px 9px;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(31,95,174,.25);border-color:var(--primary)}
input[readonly]{background:var(--line-2);color:var(--muted)}
textarea{resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}
.form-grid .span-2{grid-column:span 2}
.form-actions{grid-column:1/-1;display:flex;gap:8px;align-items:center;margin-top:4px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filters input[name=q]{min-width:260px}
.w-xs{width:64px}.w-sm{width:96px}.w-md{width:150px}.grow{flex:1;min-width:160px}
.otp{font-size:22px;letter-spacing:.3em;text-align:center;font-family:ui-monospace,Consolas,monospace}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:600;font-size:13px;padding:7px 13px;border-radius:6px;border:1px solid #c3ccd6;background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{background:#f4f6f9;text-decoration:none}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)} .btn-primary:hover{background:#184f93}
.btn-danger{color:var(--danger);border-color:#e5b3ad} .btn-danger:hover{background:#fdf1ef}
.btn-ghost{background:transparent;border-color:transparent} .topbar .btn-ghost{color:#fff;border-color:#35506b} .topbar .btn-ghost:hover{background:#16304a}
.btn-sm{padding:4px 9px;font-size:12px} .btn-block{width:100%;justify-content:center;padding:10px}
.link{background:none;border:0;color:var(--primary);cursor:pointer;font:inherit;padding:0}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:#f7f9fb;border-bottom:1px solid var(--line);padding:9px 10px;white-space:nowrap}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tbody tr:hover td{background:#fafbfd}
.tbl.compact td,.tbl.compact th{padding:6px 8px}
.tbl th.r,.tbl td.r{text-align:right}
.tbl tr.grp td{background:#f1f4f8;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.tbl tr.sum td{font-weight:700;border-top:1px solid var(--line)}
.tbl tr.grand td{font-weight:800;font-size:15px;background:#fff7ea;border-top:2px solid var(--brand)}
.tbl tr.overridden td{background:#fffbea}
.tbl tr.warn-row td{background:#fff6f5}
.empty-row{text-align:center;color:var(--muted);padding:26px!important}
.matrix td.c input{width:17px;height:17px}
.yes{color:var(--ok);font-weight:700}.no{color:#b3bcc6}

/* chips */
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;background:#eef1f5;color:var(--ink-2);white-space:nowrap}
.st-draft{background:#eef1f5;color:#4a5866}.st-submitted{background:#fff3dc;color:#8a5a00}.st-reviewed{background:#e6effc;color:#1f5fae}
.st-approved{background:#e3f5ec;color:#16774a}.st-returned{background:#fde9e7;color:#a8321f}
.role-chip{display:inline-block;padding:1px 8px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.02em}
.role-super_admin{background:#2b1d4e;color:#e6dcff}.role-est_manager{background:#0f4c81;color:#fff}.role-est_engineer{background:#1d7a74;color:#fff}
.role-estimator{background:#e08a1e;color:#1b1206}.role-viewer{background:#dde3ea;color:#344150}
.topbar .role-chip{font-size:10px}

/* flash */
.flash{padding:10px 14px;border-radius:6px;margin-bottom:14px;border:1px solid;font-size:13px}
.flash-success{background:#ebf8f1;border-color:#b5e2c9;color:#145c3b}
.flash-error{background:#fdf0ee;border-color:#f0c3bc;color:#8e2a1c}
.flash-info{background:#eef4fc;border-color:#c4d8f2;color:#1d4a80}

/* misc */
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;margin:0} .kv dt{color:var(--muted)} .kv dd{margin:0}
.kv.cols{grid-template-columns:repeat(3,90px 1fr)}
.perm-list{columns:2;font-size:12px;padding-left:18px}
.role-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.role-card{padding:12px} .role-card p{margin:6px 0 0}
.role-help{margin-top:14px;display:grid;gap:4px}
.timeline{list-style:none;padding:0;margin:0;font-size:12.5px} .timeline li{padding:8px 0;border-bottom:1px solid var(--line-2)}
.timeline.compact li{padding:5px 0}
.comment{margin-top:4px;padding:6px 8px;background:#f7f9fb;border-left:3px solid var(--brand);border-radius:3px}
.notes{white-space:pre-wrap;background:#f7f9fb;padding:10px;border-radius:6px}
.workflow{margin-bottom:16px;padding:12px 14px;border-left:4px solid var(--primary)}
.wf-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .wf-form input{flex:1;min-width:220px}
.edit-row td{padding:4px 4px!important;vertical-align:middle} .edit-row input,.edit-row select{width:100%;padding:5px 6px;font-size:12.5px} .edit-row select{min-width:118px} .edit-row td:nth-child(3) input{min-width:170px} .edit-row td:nth-child(8) input{min-width:70px} .edit-row .w-sm{width:84px} .edit-row .w-xs{width:56px} .edit-row .amt{font-weight:600}
.add-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.add-line h4{grid-column:1/-1;margin:0}
.summary .tbl td:first-child{color:var(--ink-2)}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:12px}
.temp-pass code.big{font-size:20px;background:#fff7ea;padding:4px 10px;border-radius:6px;border:1px dashed var(--brand)}
.pw-meter{height:5px;background:var(--line-2);border-radius:3px;overflow:hidden;margin-top:-6px}
.pw-meter span{display:block;height:100%;width:0;background:var(--danger);transition:width .2s}
.pw-meter span.m1{width:33%;background:var(--danger)}.pw-meter span.m2{width:66%;background:var(--warn)}.pw-meter span.m3{width:100%;background:var(--ok)}
.empty{text-align:center;padding:60px 20px}
details summary{cursor:pointer;color:var(--primary);font-weight:600;font-size:13px;margin-bottom:8px}
.idle-warn{position:fixed;bottom:18px;right:18px;background:#1d2733;color:#fff;padding:12px 16px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:13px;z-index:50}
.idle-warn a{color:#ffd28a}

/* auth pages */
.auth-body{background:linear-gradient(160deg,#0f2236 0%,#17324e 55%,#23466b 100%);min-height:100vh}
.auth-wrap{max-width:420px;margin:0 auto;padding:8vh 16px 40px}
.auth-brand{display:flex;gap:12px;align-items:center;color:#fff;margin-bottom:18px}
.auth-brand small{display:block;color:#9fb3c8;font-size:12px}
.auth-card{padding:26px}
.auth-foot{color:#8ea3b8;text-align:center;font-size:12px;margin-top:16px}
.qr-box{display:flex;justify-content:center;margin:12px 0} .qr-box svg{width:200px;height:200px;border:1px solid var(--line);border-radius:6px}
.secret{display:block;font-size:15px;letter-spacing:.08em;background:#f3f5f8;padding:8px;border-radius:6px;margin:6px 0;word-break:break-all}
.auth-body .print-sheet{background:#fff}

/* print sheet */
.print-sheet{max-width:960px;margin:0 auto}
.auth-wrap:has(.print-sheet){max-width:1000px;padding-top:24px}
.print-head{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid var(--brand);margin-bottom:12px}
.print-head p{margin:0 0 10px}
.totals-print{width:360px;margin:14px 0 0 auto}

@media (max-width:1100px){.est-grid{grid-template-columns:1fr}.role-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .menu-btn{display:block}
  .nav{position:fixed;left:0;top:56px;z-index:30;transform:translateX(-100%);transition:transform .2s}
  body.nav-open .nav{transform:none}
  .main{padding:16px}
  .shell{background:var(--bg)}
  .grid-2,.form-grid,.add-line{grid-template-columns:1fr}.span-2,.span-3,.form-grid .span-2{grid-column:auto}
  .whoami{display:none}
  .kv.cols{grid-template-columns:90px 1fr}
}
@media print{
  body,.auth-body{background:#fff!important}
  .auth-brand,.auth-foot,.no-print,.topbar,.nav{display:none!important}
  .auth-card{box-shadow:none;border:0;padding:0}
  .auth-wrap{max-width:none;padding:0}
  .tbl th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tbl tr.grand td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- phase 2: calculation sheets ---- */
.mb{margin-bottom:16px}
.calc-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.calc-result{position:sticky;top:70px;max-height:calc(100vh - 86px);overflow:auto}
@media (max-width:1300px){.calc-grid{grid-template-columns:1fr}.calc-result{position:static;max-height:none}}
.calc-group{border:1px solid var(--line);border-radius:8px;padding:10px 12px 12px;margin:0 0 12px;min-width:0}
.calc-group legend{font-weight:700;font-size:13px;padding:0 6px;color:var(--ink)}
.calc-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 12px}
.calc-fields .span-2{grid-column:span 2}
.unit{font-weight:400;color:var(--muted);font-size:11px}
.calc-tbl td{padding:3px 4px}.calc-tbl input,.calc-tbl select{padding:4px 6px;font-size:12.5px}
.calc-tbl input.w-s{width:78px}.calc-tbl input.w-m{width:130px}.calc-tbl input.w-l{width:220px}.calc-tbl select{max-width:170px}
.calc-fields input.w-s{width:100%}
.sticky-actions{position:sticky;bottom:0;background:var(--surface);padding:10px 0 2px;border-top:1px solid var(--line);z-index:2}
.cost-sheet tr.sec td{background:#eef3fa;font-weight:700;border-top:2px solid #cfdcee}
.cost-sheet td{font-size:12.5px}
.calc-roll{margin-top:12px;max-width:560px;margin-left:auto}
.calc-roll tr.sum td{font-weight:700;border-top:1px solid var(--line)}
.calc-roll tr.grand td{font-weight:800;font-size:14px;background:#fff7ea;border-top:2px solid var(--brand)}
.calc-kpis{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.kpi{flex:1 1 140px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:11.5px;color:var(--ink-2);background:#fbfcfd}
.kpi span{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.warn-list{margin:4px 0 0 18px;padding:0}
.add-calc{position:relative}.add-calc summary{list-style:none;cursor:pointer}.add-calc summary::-webkit-details-marker{display:none}
.add-calc .menu{position:absolute;right:0;top:36px;z-index:30;width:420px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(16,24,40,.15);padding:6px}
.add-calc .menu a{display:flex;flex-direction:column;padding:8px 10px;border-radius:6px;color:var(--ink)}
.add-calc .menu a:hover{background:#f1f5fb;text-decoration:none}
tr.calc-line td{background:#fafcff}
.chip-calc{background:#e8f0fb;color:#1f5fae;font-size:10px;padding:1px 6px}
tr.changed td{background:#fffaf0}
.prose ul{margin:4px 0 12px 18px;padding:0}.prose li{margin:4px 0}
.ref-tbl td,.ref-tbl th{font-size:12px;padding:3px 6px}
.tall{max-height:520px;overflow:auto}
details.card>summary{cursor:pointer}
.print-inputs .calc-group{break-inside:avoid}
.wide-print{max-width:1100px}
@media print{.calc-result{position:static;max-height:none}.print-inputs select{appearance:none;border:0}.print-inputs input{border:0}}
.sched td,.sched th{font-size:12px}
.checks{margin-bottom:12px}.checks td{font-size:12px}