/* Quotation & Invoice Comparison Dashboard — azizsaif.com/quotations
   Design system: "Quiet ledger". Warm paper, ink text, one deep-green accent.
   One typeface (Inter), tabular numerals everywhere, hairline rules, no motion.
   Rules: colour carries meaning or it is not used. Radius is 10 (surfaces),
   7 (controls) or 4 (pills) — nothing else. Nothing on this page animates. */
:root{
  --paper:#FAF9F7; --white:#fff; --line:#E7E4DE; --line-soft:#F0EFEB; --wash:#F2F1ED;
  --ink:#17181A; --ink-2:#4A4E53; --mute:#6C7076; --mute-l:#93979C;
  --accent:#1F5F4B; --accent-d:#17493A; --accent-l:#8FBDAB; --accent-wash:#EDF4F0;
  --red:#A8322C; --red-wash:#FBEFEE; --red-line:#E3C7C4;
  --amber:#8A6415; --amber-wash:#FBF3E4;
  --ff:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --r:10px; --r-c:7px; --r-p:4px; --maxw:1500px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ff);background:var(--paper);color:var(--ink);line-height:1.55;
  font-size:14.5px;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--accent)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== header ===== */
header.top{background:var(--ink);color:#fff;padding:26px 0 22px;border-bottom:1px solid #2A2C2F}
.brand{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--accent-l)}
.brand .pearl{width:9px;height:9px;border-radius:50%;background:var(--accent-l)}
header.top h1{font-size:27px;font-weight:660;letter-spacing:-.6px;margin:11px 0 7px;color:#fff;line-height:1.2}
header.top h1 em{color:var(--accent-l);font-style:normal;font-weight:660}
header.top p{color:#A8ACB1;max-width:820px;font-size:14.5px;line-height:1.6}
.privacy{display:inline-flex;align-items:center;gap:7px;margin-top:15px;border:1px solid #33403B;
  color:var(--accent-l);padding:6px 13px;border-radius:var(--r-p);font-size:12px;font-weight:550}

/* ===== action bar ===== */
.actionbar{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--line)}
.actionbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:11px;padding-bottom:11px}
.actionbar .spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff);font-weight:550;font-size:12.5px;
  border:1px solid transparent;border-radius:var(--r-c);padding:9px 15px;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;text-decoration:none}
.btn.gold{background:var(--accent);color:#fff}
.btn.gold:hover{background:var(--accent-d)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#000}
.btn.ghost{background:var(--white);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--mute-l)}
.btn.danger{background:var(--white);border-color:var(--red-line);color:var(--red)}
.btn.danger:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn.sm{font-size:11.5px;padding:6px 11px}
.btn:disabled{background:#F2F1ED;color:var(--mute-l);border-color:#F2F1ED;cursor:not-allowed}
.status{font-size:13px;color:var(--mute);font-weight:550}
.status.done{color:var(--accent);font-weight:600}
.expgrp{display:flex;gap:6px;align-items:center;border-left:1px solid var(--line);padding-left:11px}
.expgrp .lab{font-size:10px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--mute-l)}

/* ===== upload ===== */
section{padding:24px 0}
.drop{background:var(--white);border:1.5px dashed var(--line);border-radius:var(--r);
  padding:34px 24px;text-align:center;cursor:pointer;transition:border-color .12s,background .12s}
.drop:hover,.drop.over{border-color:var(--accent-l);background:#FCFCFB}
.drop.ok{border-style:solid;border-color:#CFDFD8;padding:14px 20px;text-align:left}
.dropmini{display:none}
.drop.ok .dropintro{display:none}
.drop.ok .dropmini{display:inline-flex;vertical-align:middle;margin-right:12px}
.drop.ok .files{margin-top:0;justify-content:flex-start;display:inline-flex;vertical-align:middle}
.drop.ok #clearRow{display:inline-block!important;margin-top:0;margin-left:12px;vertical-align:middle}
.drop.ok .demorow{display:none}
.demorow{margin-top:16px}
.drop .tag{display:inline-block;background:var(--wash);color:var(--ink-2);font-size:10.5px;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-p);margin-bottom:14px}
.drop h3{font-size:20px;font-weight:640;letter-spacing:-.4px;margin:0 0 6px}
.drop .hint{font-size:13px;color:var(--mute)}
.drop .opts{margin-top:14px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.drop .opts label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.arrowdn{font-size:20px;color:var(--mute-l);line-height:1;margin-top:14px}
.upbtn{margin-top:14px;font-size:13.5px;font-weight:600;letter-spacing:.6px;padding:12px 28px}
.drop.ok .arrowdn{display:none}
.files{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--wash);border:1px solid var(--line);
  border-radius:var(--r-p);padding:5px 10px;font-size:12px;font-weight:550;max-width:340px}
.chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.ok{background:var(--accent-wash);border-color:#CFDFD8;color:var(--accent)}
.chip.bad{background:var(--red-wash);border-color:var(--red-line);color:var(--red)}
.chip.busy{background:var(--amber-wash);border-color:#EBDCC0;color:var(--amber)}
.bar{height:4px;background:var(--line);border-radius:var(--r-p);overflow:hidden;margin-top:16px;display:none}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.err{margin-top:14px;background:var(--red-wash);border:1px solid var(--red-line);color:var(--red);
  border-radius:var(--r-c);padding:12px 15px;font-size:13px;display:none;text-align:left}

/* ===== KPIs — colour only where it means something ===== */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.kpi .lab{font-size:10px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--mute-l)}
.kpi .val{font-size:25px;font-weight:640;letter-spacing:-.7px;margin-top:4px;line-height:1.2}
.kpi.good .val{color:var(--accent)}
.kpi.bad .val{color:var(--red)}
.kpi .sub2{font-size:11.5px;color:var(--mute);margin-top:3px}
.neg{color:var(--red)}.pos{color:var(--accent)}

/* ===== filters ===== */
.filters{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.filters .fhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.filters .fhead h3{font-size:16.5px;font-weight:640;letter-spacing:-.3px}
.searchrow{display:flex;gap:8px;margin-bottom:12px}
.searchrow input{flex:1;font-family:var(--ff);font-size:14px;border:1px solid var(--line);
  border-radius:var(--r-c);padding:10px 14px;background:var(--white);color:var(--ink)}
.searchrow input::placeholder{color:var(--mute-l)}
.searchrow input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:10px}
.fgrid label{display:block;font-size:9.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--mute-l);margin-bottom:4px}
.fgrid select,.fgrid input{width:100%;font-family:var(--ff);font-size:13px;border:1px solid var(--line);
  border-radius:var(--r-c);padding:8px 9px;background:var(--white);color:var(--ink)}
.fgrid select:focus,.fgrid input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.fx{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);display:none}
.fx.on{display:block}
.fx .fxrow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.fx .fxi{width:132px}
.hintline{font-size:11.5px;color:var(--mute-l);margin-top:9px}

/* ===== tabs ===== */
.tabbar{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:16px}
.tab{padding:11px 14px;font-family:var(--ff);font-weight:550;font-size:12.5px;color:var(--mute);cursor:pointer;
  border:none;border-bottom:2px solid transparent;background:none;white-space:nowrap;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.tab .n{background:var(--wash);color:var(--mute);border-radius:var(--r-p);padding:1px 6px;font-size:11px;margin-left:6px}
.tab.active .n{background:var(--accent);color:#fff}
.pane{display:none}
.pane.active{display:block}

/* ===== cards & tables ===== */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.card>.scroll{overflow-x:auto;margin:0 -20px -18px;padding:0 20px 18px}
.card h3{font-size:16.5px;font-weight:640;letter-spacing:-.3px;margin-bottom:3px}
.card .desc{font-size:12.5px;color:var(--mute);margin-bottom:13px}
.cardhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px}
.cardhead .spacer{flex:1}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--wash);color:var(--ink-2);text-align:left;padding:8px 11px;font-size:10.5px;
  letter-spacing:.5px;text-transform:uppercase;font-weight:600;white-space:nowrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:0}
th.sortable{cursor:pointer}
th.sortable:hover{color:var(--accent)}
th.num,td.num{text-align:right}
td{padding:8px 11px;border-bottom:1px solid var(--line-soft);vertical-align:middle;
  white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#F8F7F5}
tr.total td{background:var(--wash);font-weight:600;border-top:1px solid var(--line)}
tr.best td{background:var(--accent-wash)}
td.best{background:var(--accent-wash);font-weight:600;color:var(--accent)}
td.worst{color:var(--red)}
.pill{display:inline-block;border-radius:var(--r-p);padding:2px 7px;font-size:10.5px;font-weight:600;white-space:nowrap}
.pill.r{background:var(--red-wash);color:var(--red)}
.pill.y{background:var(--amber-wash);color:var(--amber)}
.pill.g{background:var(--accent-wash);color:var(--accent)}
.pill.b{background:var(--wash);color:var(--ink-2)}
.pill.n{background:var(--wash);color:var(--mute)}
.muted{color:var(--mute-l)}
.empty{padding:36px 10px;text-align:center;color:var(--mute-l);font-size:14px}
.rowlink{cursor:pointer}
details.tc{margin-top:8px;border-top:1px solid var(--line-soft);padding-top:8px}
details.tc summary{cursor:pointer;font-size:12.5px;font-weight:550;color:var(--accent)}
details.tc pre{white-space:pre-wrap;font-family:var(--ff);font-size:12.5px;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-c);padding:12px 14px;margin-top:8px;max-height:300px;overflow:auto}
.raw{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-c);padding:12px 14px;max-height:420px;overflow:auto}

/* ===== scoring ===== */
.sbar{display:block;height:4px;background:var(--line);border-radius:var(--r-p);overflow:hidden;min-width:70px;margin-top:4px}
.sbar i{display:block;height:100%;background:var(--accent)}
.rank{font-size:17px;font-weight:640}
.weights{display:flex;flex-wrap:wrap;gap:18px;align-items:center;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:var(--r-c);padding:11px 14px;margin-bottom:14px}
.weights .w{font-size:12px;font-weight:550;color:var(--mute)}
.weights .w b{color:var(--ink)}
.weights input[type=range]{vertical-align:middle;width:96px;accent-color:var(--accent)}

/* ===== decision frame ===== */
.decision{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);padding:22px 24px}
.decision .dh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.decision h3{font-size:20px;font-weight:640;letter-spacing:-.4px}
.decision .sk{font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--accent);background:var(--accent-wash);border-radius:var(--r-p);padding:3px 9px}
.decision .lead{font-size:12.5px;color:var(--mute);margin-bottom:16px}
.dsec{border-top:1px solid var(--line-soft);padding:15px 0 5px}
.dsec h4{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.dsec h4 span{color:var(--accent);margin-right:7px}
.dsec .body{font-size:14.5px}
.dsec ol,.dsec ul{margin:0 0 0 20px}
.dsec li{margin-bottom:6px}
.dsec .body[contenteditable=true]:focus{outline:2px solid var(--accent-l);outline-offset:4px;border-radius:var(--r-p)}
.dsec.final{background:var(--accent-wash);border-radius:var(--r-c);padding:15px 17px;border-top:none;margin-top:12px}
.dsec.final .body{font-size:15px}
.doorpill{font-size:10px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;border-radius:var(--r-p);padding:3px 9px}
.doorpill.one{background:var(--red-wash);color:var(--red)}
.doorpill.two{background:var(--accent-wash);color:var(--accent)}

#reportFrame{width:100%;min-height:80vh;border:1px solid var(--line);border-radius:var(--r-c);background:#fff}

footer.bot{background:var(--ink);color:#8E9296;padding:26px 0;margin-top:28px;font-size:12.5px}
footer.bot a{color:var(--accent-l);text-decoration:none}
footer.bot a:hover{color:#fff}
footer.bot .fr{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
footer.bot .spacer{flex:1}

@media print{
  .actionbar,.drop,.filters,.tabbar,footer.bot,header.top .privacy,.btn{display:none!important}
  .pane{display:block!important}
  body{background:#fff;font-size:11px}
  .card,.kpi,.decision{break-inside:avoid}
  td{white-space:normal;max-width:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}