/* =====================================================================
   SIDOKU QS — APPLICATION SHELL
   Same tokens as the public site. Nothing new is invented here; the app
   is meant to look like the same product, not a separate admin tool.
   ===================================================================== */

:root{
  --ink:#17212b; --muted:#6f7d88; --line:#e7ebee; --soft:#f6f8f9; --white:#fff;
  --green:#07845b; --green-dark:#056447; --mint:#e5f5ee; --dark:#10252b;
  --blue:#2563eb; --amber:#9a5b00; --amber-bg:#fff4e2; --amber-line:#f0d5ab;
  --red:#a32c22; --red-bg:#fdeceb;
  --shadow:0 20px 70px rgba(16,37,43,.12);
  --shadow-sm:0 4px 14px rgba(16,37,43,.09);
  --radius:18px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--soft); color:var(--ink);
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}

/* ---------- buttons (identical to the marketing site) ---------- */

.btn{
  position:relative; overflow:hidden; border:0; border-radius:9px;
  padding:12px 17px; font-weight:750; font-size:13px;
  transition:.25s ease; display:inline-flex; align-items:center; gap:8px;
  justify-content:center; white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-light{background:var(--mint);color:var(--green-dark)}
.btn-outline{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.btn-outline:hover{border-color:var(--green);color:var(--green-dark)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid #f3c9c4}
.btn-sm{padding:7px 12px;font-size:12px;border-radius:8px}
.btn-block{width:100%}

/* ---------- app chrome: fixed sidebar + scrolling main ---------- */

#shell{--side-w:248px}
#shell.is-tight{--side-w:72px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:60;padding:10px 16px;
  background:var(--green);color:#fff;font-weight:800;border-radius:0 0 10px 0;
}
.skip:focus{left:0}

.side{
  position:fixed;inset:0 auto 0 0;width:var(--side-w);z-index:40;
  background:var(--white);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:width .22s ease,transform .24s ease;
}

.side-top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:16px 14px 14px 18px;border-bottom:1px solid var(--line);flex:none;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:850;font-size:16.5px;letter-spacing:-.03em;color:var(--dark);min-width:0}
.brand-mark{width:32px;height:32px;border-radius:10px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:900;flex:none}
.brand-word{white-space:nowrap;overflow:hidden}

.side-collapse{
  width:26px;height:26px;flex:none;border:1px solid var(--line);border-radius:8px;
  background:var(--white);color:var(--muted);font-size:15px;line-height:1;
  display:grid;place-items:center;transition:.2s ease;
}
.side-collapse:hover{border-color:var(--green);color:var(--green-dark);background:var(--mint)}

.side-nav{flex:1;overflow-y:auto;padding:12px 10px 18px}
.side-group{
  font-size:10.5px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:16px 10px 6px;margin:0;
}
.side-nav a{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;margin-bottom:2px;border-radius:10px;
  font-size:13.5px;font-weight:650;color:var(--muted);
  white-space:nowrap;transition:.18s ease;
}
.side-nav a svg{
  width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.side-nav a:hover{background:var(--soft);color:var(--ink)}
.side-nav a.is-active{background:var(--mint);color:var(--green-dark);font-weight:800}
.side-nav a.is-active svg{stroke:var(--green-dark)}

.side-foot{
  flex:none;border-top:1px solid var(--line);padding:12px;
  display:grid;gap:9px;justify-items:stretch;
}
.who{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:30px;background:var(--white);min-width:0}
.who-av{width:27px;height:27px;border-radius:50%;background:var(--mint);color:var(--green-dark);display:grid;place-items:center;font-weight:850;font-size:12px;flex:none}
.who-text{min-width:0}
.who-name{display:block;font-size:12.5px;font-weight:750;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-role{display:block;font-size:10.5px;color:var(--muted)}

.lang-switch{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:30px;background:var(--soft);justify-self:start}
.lang-opt{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:800;padding:6px 11px;border-radius:30px;transition:.2s ease}
.lang-opt.is-on{background:var(--white);color:var(--green-dark);box-shadow:0 2px 8px rgba(16,37,43,.1)}

/* collapsed rail: icons only */
#shell.is-tight .brand-word,
#shell.is-tight .side-nav a span,
#shell.is-tight .side-group,
#shell.is-tight .who-text,
#shell.is-tight .lang-switch,
#shell.is-tight #signout{display:none}
#shell.is-tight .side-top{padding:16px 10px 14px;justify-content:center;flex-wrap:wrap;gap:10px}
#shell.is-tight .side-nav a{justify-content:center;padding:11px 0}
#shell.is-tight .side-collapse{transform:rotate(180deg)}
#shell.is-tight .who{justify-content:center;padding:6px}

.app-main{margin-left:var(--side-w);transition:margin-left .22s ease;min-height:100vh}

.topbar{
  position:sticky;top:0;z-index:20;display:none;align-items:center;gap:12px;
  height:54px;padding:0 16px;background:rgba(255,255,255,.95);
  backdrop-filter:blur(15px);border-bottom:1px solid var(--line);
}
.side-open{
  width:34px;height:34px;border:1px solid var(--line);border-radius:9px;
  background:var(--white);color:var(--ink);font-size:16px;line-height:1;display:grid;place-items:center;
}
.topbar-title{font-size:14px;font-weight:800;color:var(--dark)}

.side-scrim{position:fixed;inset:0;z-index:35;background:rgba(16,37,43,.45);backdrop-filter:blur(2px)}

.demo-banner{
  background:#fff4e2;border-bottom:1px solid #f0d5ab;color:#9a5b00;
  font-size:12.5px;font-weight:700;text-align:center;padding:9px 16px;line-height:1.55;
}
.demo-banner button{
  background:none;border:0;color:#9a5b00;text-decoration:underline;
  font-weight:800;padding:0 0 0 8px;font-size:12.5px;
}
.demo-banner button + button{padding-left:14px}

.wrap{max-width:1360px;margin:0 auto;padding:28px 26px 80px}

/* ---------- page furniture ---------- */

.page-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:24px}
.page-head h1{font-size:28px;letter-spacing:-.04em;color:var(--dark);line-height:1.15}
.page-head p{color:var(--muted);font-size:14px;margin-top:5px}
.page-actions{display:flex;gap:9px;flex-wrap:wrap}

.crumb{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.crumb a:hover{color:var(--green)}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--soft)}
.card-head h2,.card-head h3{font-size:16px;letter-spacing:-.03em;color:var(--dark)}
.card-body{padding:20px}

.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-side{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);align-items:start}

/* ---------- stats ---------- */

.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;transition:.3s ease}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:rgba(7,132,91,.28)}
.stat span{display:block;font-size:11px;letter-spacing:.08em;color:var(--muted);font-weight:800;margin-bottom:9px}
.stat b{font-size:31px;letter-spacing:-.05em;color:var(--dark);font-variant-numeric:tabular-nums;line-height:1}
.stat.is-warn b{color:var(--amber)}
.stat small{display:block;margin-top:7px;font-size:12px;color:var(--muted)}

/* ---------- badges ---------- */

.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:30px;font-size:10.5px;font-weight:850;letter-spacing:.03em;white-space:nowrap}
.badge-draft{background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.badge-review{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-line)}
.badge-ok{background:var(--mint);color:var(--green-dark);border:1px solid rgba(7,132,91,.22)}
.badge-bad{background:var(--red-bg);color:var(--red);border:1px solid #f3c9c4}
.badge-high{background:var(--mint);color:var(--green-dark)}
.badge-medium{background:var(--amber-bg);color:var(--amber)}
.badge-low{background:var(--red-bg);color:var(--red)}

.draft-stamp{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:30px;
  background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-line);
  font-size:11px;font-weight:850;letter-spacing:.04em;
}
.draft-stamp::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);animation:pulseDot 2.2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ---------- forms ---------- */

.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:750;color:var(--ink);margin-bottom:6px}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.5}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font-size:14px;color:var(--ink);background:var(--white);font-family:inherit;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(7,132,91,.12);
}
.field textarea{min-height:84px;resize:vertical}
.field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.req::after{content:" *";color:var(--red)}

.form-error{
  background:var(--red-bg);color:var(--red);border:1px solid #f3c9c4;
  border-radius:10px;padding:11px 14px;font-size:13px;margin-bottom:14px;
}
.form-note{
  background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-line);
  border-radius:10px;padding:11px 14px;font-size:12.5px;line-height:1.6;margin-bottom:14px;
}

/* ---------- auth ---------- */

.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:
  radial-gradient(70% 55% at 50% 0%,var(--mint) 0%,transparent 60%),var(--soft)}
.auth-card{width:100%;max-width:420px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:34px}
.auth-card h1{font-size:24px;letter-spacing:-.04em;color:var(--dark);margin-bottom:6px}
.auth-card .sub{color:var(--muted);font-size:13.5px;margin-bottom:22px}
.auth-alt{text-align:center;margin-top:16px;font-size:13px;color:var(--muted)}
.auth-alt button{background:none;border:0;color:var(--green-dark);font-weight:800;padding:0}

/* ---------- tables ---------- */

.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--white)}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data thead th{
  position:sticky;top:0;z-index:2;background:var(--soft);text-align:left;
  font-size:11px;letter-spacing:.07em;font-weight:800;color:var(--muted);
  padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.data td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background .2s ease}
table.data tbody tr:hover{background:#fafcfb}
table.data tbody tr.is-open{background:var(--mint)}
table.data .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted);white-space:nowrap}
.desc{min-width:230px;line-height:1.4}
.desc small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}

.cell-in{
  width:92px;padding:6px 8px;text-align:right;border:1px solid var(--line);
  border-radius:7px;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:var(--ink);background:var(--white);transition:.2s ease;
}
.cell-in:focus{outline:2px solid var(--green);outline-offset:1px}
.cell-in.is-dirty{border-color:var(--green);background:var(--mint)}

.rowact{display:flex;gap:4px;flex-wrap:wrap}
.iconbtn{
  border:1px solid var(--line);background:var(--white);border-radius:7px;
  width:28px;height:28px;display:grid;place-items:center;
  font-size:12px;color:var(--muted);transition:.2s ease;
}
.iconbtn:hover{border-color:var(--green);color:var(--green-dark);background:var(--mint)}
.iconbtn.on-accept:hover{border-color:var(--green);color:var(--green)}
.iconbtn.on-reject:hover{border-color:#e0b4ae;color:var(--red);background:var(--red-bg)}

.rate-warn{
  display:block;margin-top:5px;font-size:11px;font-weight:800;
  color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-line);
  border-radius:6px;padding:3px 7px;
}

.detail{background:var(--soft);border-top:1px solid var(--line)}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;padding:16px 12px}
.detail-grid dt{font-size:10.5px;letter-spacing:.07em;font-weight:800;color:var(--muted);margin-bottom:4px}
.detail-grid dd{font-size:12.5px;line-height:1.55}

/* ---------- filters ---------- */

.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.filt{
  border:1px solid var(--line);background:var(--white);border-radius:30px;
  padding:7px 14px;font-size:12.5px;font-weight:750;color:var(--muted);transition:.2s ease;
}
.filt:hover{border-color:var(--green);color:var(--green-dark)}
.filt.is-on{background:var(--green);border-color:var(--green);color:#fff}
.filt b{font-variant-numeric:tabular-nums;opacity:.75;margin-left:4px;font-weight:800}

/* ---------- estimate summary ---------- */

.sum-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.sum-row b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:750;transition:color .3s ease}
.sum-row.grand{border-bottom:0;padding-top:15px;font-size:15px;color:var(--dark);font-weight:800}
.sum-row.grand b{font-size:23px;color:var(--green-dark)}
.sum-row b.flash{animation:flashVal .7s ease}
@keyframes flashVal{0%{color:var(--green);transform:scale(1.05)}100%{color:inherit;transform:scale(1)}}
.slider-row{display:flex;align-items:center;gap:13px;padding:12px 0 4px;flex-wrap:wrap}
.slider-row label{font-size:13px;font-weight:750;flex:none}
.slider-row input[type=range]{flex:1;min-width:150px;accent-color:var(--green)}
.slider-val{font-variant-numeric:tabular-nums;font-weight:800;color:var(--green-dark);min-width:56px;text-align:right}

/* ---------- progress ---------- */

.bar{height:8px;border-radius:20px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:20px;background:var(--green);width:0;transition:width .5s cubic-bezier(.22,1,.36,1)}
.bar.is-amber i{background:var(--amber)}

.stages{margin-top:16px;display:grid;gap:9px}
.stage{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--muted);opacity:.45;transition:.35s ease}
.stage.is-on{opacity:1;color:var(--ink);font-weight:700}
.stage.is-done{opacity:1;color:var(--green-dark)}
.stage-dot{width:19px;height:19px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:10px;transition:.35s ease}
.stage.is-on .stage-dot{border-color:var(--green);animation:spinDot 1s linear infinite}
.stage.is-done .stage-dot{border-color:var(--green);background:var(--green);color:#fff}
.stage.is-done .stage-dot::after{content:"✓"}
@keyframes spinDot{to{transform:rotate(360deg)}}

/* ---------- skeleton, empty, toast ---------- */

.skel{background:linear-gradient(90deg,var(--soft),#eef2f4,var(--soft));background-size:220% 100%;animation:skelShine 1.3s linear infinite;border-radius:8px;height:14px}
.skel.tall{height:76px;border-radius:12px}
@keyframes skelShine{from{background-position:180% 0}to{background-position:-60% 0}}

.empty{padding:48px 22px;text-align:center;color:var(--muted);font-size:13.5px}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:7px;letter-spacing:-.02em}
.empty .btn{margin-top:16px}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--dark);color:#eaf4f0;padding:13px 20px;border-radius:11px;
  font-size:13px;font-weight:650;box-shadow:var(--shadow);z-index:200;
  max-width:min(520px,calc(100vw - 32px));transition:opacity .3s ease,transform .3s ease;
}
.toast.is-bad{background:#7a2018}
.toast.is-good{background:var(--green-dark)}

/* ---------- modal ---------- */

.modal{position:fixed;inset:0;background:rgba(16,37,43,.55);backdrop-filter:blur(4px);display:none;place-items:center;z-index:100;padding:20px;overflow:auto}
.modal.show{display:grid}
.modal-box{background:var(--white);border-radius:var(--radius);width:100%;max-width:620px;box-shadow:var(--shadow);animation:modalIn .3s cubic-bezier(.22,1,.36,1);max-height:92vh;display:flex;flex-direction:column}
.modal-box.wide{max-width:860px}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modal-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px}
.modal-head h2{font-size:19px;letter-spacing:-.03em;color:var(--dark)}
.modal-body{padding:22px;overflow:auto}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.x{border:0;background:none;font-size:22px;color:var(--muted);line-height:1;padding:0 4px}

/* ---------- dropzone ---------- */

.drop{
  border:2px dashed var(--line);border-radius:14px;padding:32px 20px;text-align:center;
  background:var(--soft);transition:.25s ease;cursor:pointer;
}
.drop:hover,.drop.is-over{border-color:var(--green);background:var(--mint)}
.drop b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:5px}
.drop span{font-size:12px;color:var(--muted)}
.drop input[type=file]{display:none}
.picked{margin-top:13px;font-size:12.5px;font-weight:750;color:var(--green-dark)}

/* ---------- list rows ---------- */

.row-link{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);transition:.22s ease}
.row-link:last-child{border-bottom:0}
.row-link:hover{background:var(--mint)}
.row-link .grow{flex:1;min-width:0}
.row-link b{display:block;font-size:14px;color:var(--dark);letter-spacing:-.02em}
.row-link small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* ---------- rfq output ---------- */

.rfq-out{
  border:1px solid var(--line);border-radius:12px;background:var(--dark);color:#d7e6e2;
  padding:15px 17px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;line-height:1.65;white-space:pre-wrap;min-height:280px;max-height:520px;overflow:auto;
}
.pack{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px}
.pack label{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.pack input{margin-top:3px;accent-color:var(--green);width:16px;height:16px}
.pack h4{font-size:13.5px;margin-bottom:2px}
.pack p{font-size:12px;color:var(--muted)}

/* ---------- sub navigation ---------- */

.subtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--line)}
.subtab{
  padding:9px 15px;font-size:13px;font-weight:750;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.2s ease;
}
.subtab:hover{color:var(--ink)}
.subtab.is-on{color:var(--green-dark);border-bottom-color:var(--green)}
.subtab-count{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:6px;border-radius:20px;background:var(--amber-bg);color:var(--amber);
  font-size:10.5px;font-weight:900;vertical-align:1px;
}

/* ---------- kanban boards — the lead pipeline and the task board ---------- */

.pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.pipe-col{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pipe-head{
  padding:13px 15px;border-bottom:1px solid var(--line);background:var(--white);
  display:flex;flex-direction:column;gap:2px;
}
.pipe-head b{font-size:12.5px;letter-spacing:-.01em;color:var(--dark)}
.pipe-head span{font-size:11px;font-weight:750;color:var(--muted);font-variant-numeric:tabular-nums}
.pipe-body{padding:11px;display:grid;gap:9px;min-height:90px}

.pipe-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:13px;transition:.22s ease}
.pipe-card:hover{border-color:rgba(7,132,91,.35);box-shadow:0 8px 24px rgba(16,37,43,.09)}
.pipe-open{
  display:block;width:100%;text-align:left;background:none;border:0;
  padding:13px 40px 13px 14px;font:inherit;color:inherit;
}
.pipe-open b{display:block;font-size:13px;line-height:1.4;color:var(--dark);letter-spacing:-.01em}
.pipe-open small{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45}
.pipe-val{
  display:inline-block;margin:8px 0 6px;font-size:14px;font-weight:850;
  color:var(--green-dark);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.pipe-next{display:block;font-size:11px;color:var(--ink);margin-bottom:7px;line-height:1.45}
.pipe-adv{
  position:absolute;top:10px;right:10px;min-width:26px;height:26px;padding:0 6px;border-radius:8px;
  border:1px solid var(--line);background:var(--white);color:var(--muted);
  font-size:11px;font-weight:850;line-height:1;display:grid;place-items:center;transition:.2s ease;
}
.pipe-adv:hover{border-color:var(--green);background:var(--mint);color:var(--green-dark)}
.pipe-empty{padding:16px 4px;text-align:center;font-size:12px;color:var(--muted)}

/* ---------- job lifecycle flow ---------- */

.flow{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:0;list-style:none;margin:0;padding:0;overflow-x:auto;
}
.flow-step{position:relative;min-width:100px}
/* the connector sits behind the dot and stops at the step's own centre */
.flow-step::before{
  content:"";position:absolute;top:15px;left:0;width:50%;height:2px;background:var(--line);
}
.flow-step::after{
  content:"";position:absolute;top:15px;left:50%;width:50%;height:2px;background:var(--line);
}
.flow-step:first-child::before,
.flow-step:last-child::after{display:none}
.flow-step.is-done::before,
.flow-step.is-done::after,
.flow-step.is-now::before{background:var(--green)}

.flow-step a{
  position:relative;display:grid;justify-items:center;gap:5px;
  padding:0 6px;text-align:center;
}
.flow-dot{
  position:relative;z-index:1;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:850;
  background:var(--white);border:2px solid var(--line);color:var(--muted);
  transition:.2s ease;
}
.flow-step.is-done .flow-dot{background:var(--green);border-color:var(--green);color:#fff}
.flow-step.is-now .flow-dot{
  border-color:var(--green);color:var(--green-dark);
  box-shadow:0 0 0 4px rgba(7,132,91,.14);
}
.flow-label{font-size:12.5px;font-weight:800;color:var(--dark);line-height:1.25}
.flow-step.is-todo .flow-label{color:var(--muted)}
.flow-note{font-size:10.5px;color:var(--muted);line-height:1.35}
.flow-step a:hover .flow-dot{border-color:var(--green)}
.flow-step a:hover .flow-label{color:var(--green-dark)}

/* Below this the eight steps stop fitting side by side, so the flow runs
   down the page instead of scrolling sideways out of view. */
@media(max-width:1180px){
  .flow{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;gap:0}
  .flow-step{min-width:0}
  .flow-step::before{top:0;left:15px;width:2px;height:50%}
  .flow-step::after{top:50%;left:15px;width:2px;height:50%}
  .flow-step a{
    grid-template-columns:32px 1fr;justify-items:start;
    align-items:center;gap:2px 13px;text-align:left;padding:9px 0;
  }
  .flow-dot{grid-row:span 2}
  .flow-label,.flow-note{grid-column:2}
}

/* ---------- donut + funnel ---------- */

.chart-empty{padding:24px 4px;text-align:center;font-size:12.5px;color:var(--muted)}

.donut-wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.donut{width:140px;height:140px;flex:none;transform:rotate(-90deg)}
.donut .dtrack{fill:none;stroke:var(--line);stroke-width:15}
.donut .dseg{fill:none;stroke-width:15;transition:stroke-dasharray .5s cubic-bezier(.22,1,.36,1)}
.donut text{transform:rotate(90deg);transform-origin:70px 70px;text-anchor:middle}
.donut .dval{font-size:17px;font-weight:850;fill:var(--dark)}
.donut .dlab{font-size:8.5px;font-weight:800;fill:var(--muted);letter-spacing:.05em;text-transform:uppercase}

.legend{flex:1;min-width:170px;list-style:none;margin:0;padding:0;display:grid;gap:7px}
.legend li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}
.legend span{flex:1;min-width:0}
.legend b{color:var(--dark);font-variant-numeric:tabular-nums}

.funnel{display:grid;gap:11px}
.funnel-row{display:grid;grid-template-columns:112px 1fr auto;gap:5px 12px;align-items:center}
.funnel-lab{font-size:12.5px;font-weight:750;color:var(--ink)}
.funnel-track{height:22px;border-radius:6px;background:var(--soft);overflow:hidden}
.funnel-track i{
  display:block;height:100%;border-radius:6px;width:0;
  background:linear-gradient(90deg,var(--green),#3aa886);
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
.funnel-val{font-size:13px;font-weight:850;color:var(--green-dark);font-variant-numeric:tabular-nums;white-space:nowrap}
.funnel-count{grid-column:2 / -1;font-size:11px;color:var(--muted)}

/* ---------- files ---------- */

.dropzone{
  display:grid;justify-items:center;gap:5px;
  padding:30px 22px;border:2px dashed var(--line);border-radius:var(--radius);
  background:var(--soft);text-align:center;cursor:pointer;transition:.2s ease;
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--green);background:var(--mint)}
.dropzone.is-over{border-color:var(--green);background:var(--mint);transform:scale(1.005)}
.dropzone svg{
  width:30px;height:30px;fill:none;stroke:var(--green-dark);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:3px;
}
.dropzone b{font-size:14.5px;color:var(--dark)}
.dropzone span{font-size:12px;color:var(--muted)}

.fileglyph{
  flex:none;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;font-size:10px;font-weight:900;letter-spacing:.03em;
  border:1px solid var(--line);background:var(--soft);color:var(--muted);
}
.fileglyph.is-big{width:46px;height:46px;font-size:11.5px}
.fileglyph.is-pdf{background:#fdecea;border-color:#f3c9c4;color:#a3231a}
.fileglyph.is-doc{background:#e8f0fe;border-color:#c6d9fb;color:#1b4fc4}
.fileglyph.is-xls{background:var(--mint);border-color:rgba(7,132,91,.25);color:var(--green-dark)}
.fileglyph.is-img{background:#f3ecfd;border-color:#dbc9f7;color:#6b32b8}

.filerow{gap:13px}
.checkline{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:650}
.checkline input{width:17px;height:17px;accent-color:var(--green);flex:none;margin:0}
.checkline input:disabled{opacity:.5}
.sheetrow{cursor:pointer;transition:background .18s ease}
.sheetrow:hover{background:var(--mint)}

.filehead{display:flex;align-items:center;gap:13px;padding-bottom:16px}
.filehead b{display:block;font-size:14px;color:var(--dark);word-break:break-all}
.filehead span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- misc row helpers ---------- */

.row-link.as-row{width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;font:inherit;color:inherit}
.muted-sm{font-size:12px;color:var(--muted);font-weight:750}
.modal-foot .grow{flex:1}
.detail-grid .dt{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--muted);margin-bottom:3px;text-transform:uppercase}
.detail-grid b{font-size:13.5px;color:var(--dark);line-height:1.45}
.costline{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.catline{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:10px}
.catline span{
  padding:4px 9px;border:1px solid var(--line);border-radius:30px;
  font-size:11px;color:var(--muted);background:var(--soft);
}
.catline b{color:var(--dark);font-variant-numeric:tabular-nums;margin-left:3px}
.src-row{display:grid;grid-template-columns:130px 1fr 32px;gap:12px;align-items:center;margin-bottom:11px;font-size:12.5px;color:var(--muted)}
.src-row b{text-align:right;color:var(--dark);font-variant-numeric:tabular-nums}

/* ---------- responsive ---------- */

@media(max-width:1150px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-side{grid-template-columns:1fr}
  .pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1040px){
  /* Below this the sidebar becomes a drawer, so the rail toggle is retired
     and the menu button in the top bar takes over. */
  #shell{--side-w:0px}
  .side{
    width:262px;transform:translateX(-100%);
    box-shadow:0 24px 70px rgba(16,37,43,.22);
  }
  #shell.is-open .side{transform:none}
  #shell.is-tight .side{width:262px}
  #shell.is-tight .brand-word,
  #shell.is-tight .side-nav a span,
  #shell.is-tight .side-group,
  #shell.is-tight .who-text,
  #shell.is-tight .lang-switch,
  #shell.is-tight #signout{display:revert}
  #shell.is-tight .side-nav a{justify-content:flex-start;padding:9px 11px}
  #shell.is-tight .side-top{padding:16px 14px 14px 18px;justify-content:space-between;flex-wrap:nowrap}
  .side-collapse{display:none}
  .topbar{display:flex}
  .app-main{margin-left:0}
}
@media(max-width:860px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .field-row,.field-row-3{grid-template-columns:1fr}
  .wrap{padding:20px 16px 70px}
  .pipeline{grid-template-columns:1fr}
  .src-row{grid-template-columns:100px 1fr 30px}
}
@media(max-width:560px){
  .grid-4{grid-template-columns:1fr}
  .page-head h1{font-size:23px}
}

/* ---------- Khmer typography ---------- */

[data-lang="km"] body,[data-lang="km"] button,[data-lang="km"] input,
[data-lang="km"] select,[data-lang="km"] textarea{
  font-family:"Noto Sans Khmer",Inter,ui-sans-serif,system-ui,sans-serif;
}
[data-lang="km"] h1,[data-lang="km"] h2,[data-lang="km"] h3,[data-lang="km"] h4{letter-spacing:0;line-height:1.5}
[data-lang="km"] .page-head h1{font-size:23px;line-height:1.5}
[data-lang="km"] .btn,[data-lang="km"] .badge,[data-lang="km"] .filt,
[data-lang="km"] .draft-stamp,[data-lang="km"] .app-nav a{line-height:1.95}
[data-lang="km"] .stat span,[data-lang="km"] .sum-row,[data-lang="km"] .field label{line-height:1.85}
[data-lang="km"] table.data thead th{line-height:1.7}
[data-lang="km"] .app-header-inner{height:auto;padding-top:10px;padding-bottom:10px}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .btn:hover,.stat:hover{transform:none}
}

/* ---------- print (report export fallback) ---------- */

@media print{
  .app-header,.page-actions,.filters,.rowact,.no-print{display:none!important}
  body{background:#fff}
  .wrap{padding:0}
  .card{border:0;box-shadow:none}
}