/* Five Laser Cut - OEM RFQ Tracker
   Palette sampled from the company logo: navy #1b2646, gold #f89b31, charcoal #393938.
   No web fonts - this must work on a shop-floor machine with no internet. */
:root{
  color-scheme:light;
  --navy:#1b2646; --navy-d:#121a33; --navy-l:#2a3860;
  --gold:#f89b31; --gold-d:#d97e14; --gold-w:#fff6ea;
  --char:#393938; --ink:#22242c; --mute:#6c7183;
  --line:#dde1e9; --soft:#f4f6fa; --page:#eef1f6; --card:#fff;
  --ok:#15803d; --ok-w:#eafaf0; --bad:#b3261e; --bad-w:#fdeeed;
  --warn:#9a6400; --warn-w:#fff8e6;
  --r:5px;
  --sans:"Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(27,38,70,.07),0 2px 10px rgba(27,38,70,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--page);color:var(--ink);font:14.5px/1.5 var(--sans);
     -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
a{color:var(--navy-l)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ---------- app frame ---------- */
.top{background:var(--navy);color:#fff;border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:40}
.top .bar{max-width:1440px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.brand img{height:30px;display:block}
.brand .t{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#b9c0d4;
          padding-left:11px;border-left:1px solid rgba(255,255,255,.22)}
.top .sp{flex:1}
.who{display:flex;align-items:center;gap:9px;font-size:13px;color:#c9cfe0}
.who .nm{color:#fff;font-weight:600}
.who .rl{background:rgba(248,155,49,.16);color:var(--gold);padding:2px 8px;border-radius:99px;
         font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.lnk{background:none;border:0;color:#c9cfe0;cursor:pointer;padding:5px 8px;border-radius:var(--r);font-size:13px}
.lnk:hover{background:rgba(255,255,255,.1);color:#fff}

/* the bell : every account is told about every movement, so it sits in
   the chrome on every screen rather than on a tab someone has to find */
.bell{position:relative;background:none;border:0;cursor:pointer;padding:6px;border-radius:var(--r);
      color:#c9cfe0;line-height:0;flex:none}
.bell:hover{background:rgba(255,255,255,.1);color:#fff}
.bell svg{width:21px;height:21px;fill:currentColor;display:block}
.bell .n{position:absolute;top:-1px;right:-3px;min-width:17px;height:17px;padding:0 4px;
         background:var(--gold);color:var(--navy-d);border-radius:99px;font-size:10.5px;font-weight:800;
         line-height:17px;text-align:center;font-variant-numeric:tabular-nums}

/* tab bar - the gold rule marks the open tab and nothing else */
.tabs{background:var(--navy-d);border-bottom:1px solid rgba(255,255,255,.08)}
.tabs .row{max-width:1440px;margin:0 auto;padding:0 20px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin}
.tab{background:none;border:0;border-bottom:3px solid transparent;color:#aeb6cd;cursor:pointer;
     padding:11px 15px;font-size:13px;font-weight:600;white-space:nowrap;letter-spacing:.01em}
.tab:hover{color:#fff}
.tab[aria-selected="true"]{color:#fff;border-bottom-color:var(--gold)}
.tab .n{background:var(--gold);color:var(--navy-d);border-radius:99px;padding:1px 7px;margin-left:7px;
        font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.tab[aria-selected="true"] .n{background:var(--gold)}

main{max-width:1440px;margin:0 auto;padding:22px 20px 64px}
.head{display:flex;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.head h1{font-size:22px}
.head .sub{color:var(--mute);font-size:13px;margin-top:3px}
.head .sp{flex:1}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
      margin-bottom:16px}
.card>h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
         padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card>h2 .sp{flex:1}
.pad{padding:16px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line);
     border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow)}
.kpi.act{border-left-color:var(--gold);background:var(--gold-w)}
.kpi .lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:700}
.kpi .v{font-size:26px;font-weight:700;color:var(--navy);margin-top:5px;font-variant-numeric:tabular-nums;
        line-height:1.1}
.kpi .v.sm{font-size:19px}
.kpi .h{font-size:12px;color:var(--mute);margin-top:2px}

/* ---------- the step spine : signature device ----------
   Six notches in a rail, one per step. Filled = done, gold = where the
   RFQ sits now. Reads left to right like the route sheet it replaces. */
.spine{display:inline-flex;align-items:center;gap:0;vertical-align:middle}
.spine i{width:15px;height:5px;background:var(--line);display:block;font-style:normal}
.spine i:first-child{border-radius:3px 0 0 3px}
.spine i:last-child{border-radius:0 3px 3px 0}
.spine i+i{margin-left:2px}
.spine i.done{background:var(--navy)}
.spine i.at{background:var(--gold)}
.spine.dead i.done,.spine.dead i.at{background:#c3c7d2}
.spine-lg i{width:34px;height:6px}

/* ---------- stage pill ---------- */
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;
      letter-spacing:.03em;white-space:nowrap;border:1px solid transparent}
.pill.wait{background:var(--soft);color:var(--mute);border-color:var(--line)}
.pill.act{background:var(--gold-w);color:var(--gold-d);border-color:#f6d5a6}
.pill.ok{background:var(--ok-w);color:var(--ok);border-color:#bfe6cd}
.pill.bad{background:var(--bad-w);color:var(--bad);border-color:#f3c9c6}
.pill.gm{background:#eef1fb;color:var(--navy-l);border-color:#ccd4ee}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;padding:9px 12px;background:var(--soft);border-bottom:1px solid var(--line);
         font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:700;
         position:sticky;top:0;z-index:1}
tbody td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--soft)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
td.c,th.c{text-align:center}
td .sub{display:block;color:var(--mute);font-size:12px;margin-top:1px}
.num{font-variant-numeric:tabular-nums}
.neg{color:var(--bad);font-weight:700}
.pos{color:var(--ok)}
.scroll{overflow-x:auto}

/* ---------- forms ---------- */
.grid{display:grid;gap:13px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
label{display:block}
label .lb{display:block;font-size:12.5px;color:var(--char);margin-bottom:4px;font-weight:600}
label .hint{display:block;font-size:11.5px;color:var(--mute);margin-top:3px;font-weight:400}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],select,textarea{
  width:100%;padding:8px 10px;border:1px solid #c8cedb;border-radius:var(--r);background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
input[readonly]{background:var(--soft);color:var(--mute)}
/* A read-only box normally reads as "not your business" or "not filled in
   yet". The issued RFQ number is neither - it is the one field on the form
   already decided, and the GM has to be able to read it off the screen onto
   a drawing. So: white like a live field and a gold edge to mark it as the
   tracker's own, but plainly not typeable. The grey background of the rule
   above is deliberately overridden - greyed out was read as empty. */
input[readonly].issued{background:#fff;border-color:#c8cedb;border-left:3px solid var(--gold);
  color:var(--navy);font-weight:700;font-size:15px;letter-spacing:.6px;
  font-family:Consolas,"Courier New",monospace}
textarea{min-height:66px;resize:vertical}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 14px}
legend{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:700;padding:0 6px}

.btn{display:inline-flex;align-items:center;gap:7px;background:var(--navy);color:#fff;border:1px solid var(--navy);
     border-radius:var(--r);padding:8px 15px;font-size:13.5px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--navy-l)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy-d)}
.btn.gold:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.btn.ghost{background:#fff;color:var(--navy);border-color:#c8cedb}
.btn.ghost:hover{background:var(--soft)}
.btn.danger{background:#fff;color:var(--bad);border-color:#e8b6b2}
.btn.danger:hover{background:var(--bad-w)}
.btn.sm{padding:5px 11px;font-size:12.5px}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}

/* ---------- notes ---------- */
.note{padding:11px 13px;border-radius:var(--r);font-size:13px;border-left:3px solid;margin-bottom:13px}
.note.info{background:var(--soft);border-color:var(--navy-l);color:var(--char)}
.note.warn{background:var(--warn-w);border-color:var(--gold);color:#6b4700}
.note.bad{background:var(--bad-w);border-color:var(--bad);color:#7d1a15}
.note.ok{background:var(--ok-w);border-color:var(--ok);color:#0f5c2c}
.note b{display:block;margin-bottom:2px}

.empty{text-align:center;padding:44px 20px;color:var(--mute)}
.empty .big{font-size:15px;color:var(--char);font-weight:600;margin-bottom:5px}

/* ---------- sign in ---------- */
.signin{min-height:100vh;display:grid;place-items:center;padding:24px;
        background:linear-gradient(160deg,var(--navy) 0%,var(--navy-d) 62%,#0c1327 100%)}
.signin .box{width:100%;max-width:372px;background:#fff;border-radius:7px;overflow:hidden;
             box-shadow:0 18px 50px rgba(0,0,0,.35)}
.signin .cap{padding:26px 28px 20px;text-align:center;border-bottom:3px solid var(--gold)}
.signin .cap img{height:44px;margin-bottom:12px}
.signin .cap .t{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--mute);font-weight:700}
.signin form{padding:22px 28px 26px}
.signin .btn{width:100%;justify-content:center;margin-top:15px;padding:10px}
.signin label{margin-bottom:12px}

/* ---------- detail ---------- */
.split{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.spec{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:13px}
.spec dt{color:var(--mute);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding-top:2px}
.spec dd{margin:0;font-weight:600;color:var(--ink);word-break:break-word}
.hist{list-style:none;margin:0;padding:0;font-size:12.5px;max-height:330px;overflow-y:auto}
.hist li{padding:7px 0;border-bottom:1px solid var(--line);color:var(--char)}
.hist li:last-child{border-bottom:0}
.hist .w{color:var(--mute);font-size:11.5px;display:block;margin-top:1px}

/* item rows open into an inline editor */
.item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;background:#fff}
.item>.h{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer}
.item>.h:hover{background:var(--soft)}
.item.open>.h{border-bottom:1px solid var(--line);background:var(--soft)}
.item .sno{width:24px;height:24px;border-radius:var(--r);background:var(--navy);color:#fff;display:grid;
           place-items:center;font-size:12px;font-weight:700;flex:none}
.item .ttl{font-weight:600;flex:1;min-width:0}
.item .ttl .sub{display:block;color:var(--mute);font-size:12px;font-weight:400;margin-top:1px;
                overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .body{padding:14px}
/* Bodies are rendered for every item and hidden here rather than built on
   click: "save everything and submit" has to be able to read inputs the
   person never opened, and a body that does not exist has no value to read. */
.item:not(.open)>.body{display:none}
/* value on the collapsed row; absent entirely for roles who see no money */
.item .amt{flex:none;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:13.5px}
.item .amt .sub{display:block;color:var(--mute);font-size:11.5px;font-weight:400;margin-top:1px;white-space:nowrap}
.item.loss .amt{color:var(--bad)}
.item.loss .sno{background:var(--bad)}

/* ---------- the six steps, with a stamp on each ----------
   A rail down the left with a numbered node per step: done in navy,
   the current one in gold, the rest empty. The timestamp and the name
   sit beside it, because "who finished it and when" is the question
   this screen exists to answer. */
.track{list-style:none;margin:0;padding:14px 16px}
.track li{display:flex;gap:13px;padding-bottom:15px;position:relative}
.track li:last-child{padding-bottom:0}
.track li:not(:last-child):before{content:"";position:absolute;left:12px;top:26px;bottom:1px;
                                  width:2px;background:var(--line)}
.track li.done:not(:last-child):before{background:var(--navy)}
.track .k{width:26px;height:26px;border-radius:99px;flex:none;display:grid;place-items:center;
          background:#fff;border:2px solid var(--line);color:var(--mute);
          font-size:12px;font-weight:800;position:relative;z-index:1}
.track li.done .k{background:var(--navy);border-color:var(--navy);color:#fff}
.track li.at .k{background:var(--gold);border-color:var(--gold);color:var(--navy-d)}
.track li b{display:block;font-size:13.5px;color:var(--mute);font-weight:600;padding-top:3px}
.track li.done b,.track li.at b{color:var(--ink)}
.track .w{display:block;color:var(--mute);font-size:12px;margin-top:1px}
.track li.at .w{color:var(--gold-d);font-weight:600}

/* ---------- upload panel ---------- */
.drop{border:1px dashed #c2c9d8;border-radius:var(--r);background:var(--soft);padding:13px 14px;margin-bottom:13px}
.drop .dt{font-size:12.5px;font-weight:700;color:var(--char)}
.drop .dh{font-size:12px;color:var(--mute);margin:2px 0 9px}
.drop .note{margin:11px 0 0}
input[type=file]{flex:1;min-width:190px;font-size:12.5px;padding:6px;background:#fff;
                 border:1px solid #c8cedb;border-radius:var(--r)}

/* ---------- costing grid ----------
   A column with nothing in it is outlined in gold and grows a "why is this
   blank?" box underneath. That box is the only way past the submit button,
   so it has to be impossible to miss and impossible to mistake for the value. */
label.blank input.cval{border-color:var(--gold);background:var(--gold-w)}
input.why{margin-top:5px;font-size:12px;padding:5px 8px;border-style:dashed;border-color:var(--gold)}
.miss{margin-top:12px;font-size:13px}
.grid>label.full{grid-column:1/-1}
.mt{margin-top:13px}
.pt0{margin-top:0}
.grow{flex:1;min-width:170px}

/* ---------- notification list ---------- */
.notes{list-style:none;margin:0;padding:0;font-size:13px}
.notes li{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;border-left:3px solid transparent}
.notes li:last-child{border-bottom:0}
.notes li:hover{background:var(--soft)}
.notes li.new{background:var(--gold-w);border-left-color:var(--gold)}
.notes li b{display:block;color:var(--ink);font-weight:600}
.notes .w{display:block;color:var(--mute);font-size:11.5px;margin-top:2px}

.modal{position:fixed;inset:0;background:rgba(18,26,51,.55);display:grid;place-items:center;padding:20px;z-index:60}
.modal .box{background:#fff;border-radius:7px;max-width:520px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.3);
            max-height:88vh;overflow-y:auto}
.modal h3{padding:16px 18px;border-bottom:1px solid var(--line);font-size:15px}
.modal .mb{padding:18px}
.modal .mf{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;
           background:var(--soft)}
.toast{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:9px;max-width:390px}
.toast div{background:var(--navy);color:#fff;padding:11px 15px;border-radius:var(--r);font-size:13.5px;
           box-shadow:0 6px 22px rgba(0,0,0,.25);border-left:3px solid var(--gold)}
.toast div.bad{background:var(--bad);border-left-color:#fff}
.toast div.ok{background:var(--ok);border-left-color:var(--gold)}

.mono{font-family:Consolas,"Courier New",monospace;font-size:12.5px}
.key{background:var(--navy-d);color:var(--gold);padding:2px 7px;border-radius:3px;font-family:Consolas,monospace;
     font-size:13px;letter-spacing:.04em}

@media (max-width:960px){.split{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  main{padding:16px 12px 50px}
  .top .bar{padding:8px 12px;gap:10px}
  .brand .t{display:none}
  .tabs .row{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
:focus-visible{outline:2px solid var(--gold);outline-offset:1px}