/* ==========================================================================
   Didar Asia ERP — Prototype v2 design system
   Brand language carried over from Prototype v1 (deep green / gold).
   Layout structure follows the approved dual-rail reference screenshot.
   ========================================================================== */

:root{
  /* brand */
  --ink:#16211E; --ink-2:#3C4B46; --muted:#6B7C76; --faint:#93A29C;
  --line:#E2EAE6; --line-soft:#EDF2F0; --canvas:#F2F6F4; --surface:#FFFFFF;
  --brand:#12352E; --brand-2:#245B4E; --brand-3:#397A67; --brand-wash:#EDF4F1;
  --gold:#C39A4B; --gold-wash:#FBF4E6;
  /* status */
  --ok:#2D7A5C; --ok-wash:#E7F3EE;
  --warn:#B7791F; --warn-wash:#FDF3E0;
  --bad:#B2453F; --bad-wash:#FBEBEA;
  --info:#3A6E9E; --info-wash:#EBF2F8;
  --neutral:#63757F; --neutral-wash:#EEF2F4;
  /* metrics */
  --rail-w:64px; --nav-w:248px; --top-h:60px; --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(20,45,38,.05), 0 8px 24px rgba(20,45,38,.06);
  --shadow-lg:0 20px 60px rgba(15,40,33,.18);
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body.da-boot{margin:0;font-family:var(--font);background:var(--canvas);color:var(--ink);
  font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{letter-spacing:-.015em;margin:0}
a{color:var(--brand-2);text-decoration:none}
button{font:inherit}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.small{font-size:12px}.xsmall{font-size:11px}.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800;margin:0 0 3px}
.field-label{font-size:11px;font-weight:700;color:var(--ink-2);display:block;margin-bottom:5px}
:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#CBD8D3;border-radius:9px;border:2px solid transparent;background-clip:content-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(140deg,var(--brand-2),var(--brand));
  color:#F0D9A6;display:grid;place-items:center;font-weight:800;letter-spacing:.04em;flex:none}
.brand-mark.sm{width:32px;height:32px;border-radius:9px;font-size:12px}

/* ================= LOGIN ================= */
.login-screen{position:fixed;inset:0;display:grid;grid-template-columns:1.05fr .95fr;z-index:2000;background:var(--surface)}
.login-art{background:radial-gradient(120% 90% at 15% 0%,#1D4A3F 0%,#12352E 55%,#0C2621 100%);color:#EAF2EF;padding:52px 56px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-art:after{content:"";position:absolute;right:-140px;bottom:-160px;width:460px;height:460px;border-radius:50%;border:1px solid rgba(195,154,75,.28)}
.login-art:before{content:"";position:absolute;right:-60px;bottom:-80px;width:300px;height:300px;border-radius:50%;border:1px solid rgba(195,154,75,.18)}
.login-brand{display:flex;gap:12px;align-items:center;margin-bottom:44px}
.login-brand strong{display:block;font-size:15px}.login-brand small{color:#9FBAB1;font-size:11px}
.login-art h1{font-size:36px;font-weight:800;line-height:1.18;letter-spacing:-.03em}
.login-art>p{color:#A9C3BA;max-width:400px;margin:16px 0 30px}
.login-points{list-style:none;padding:0;margin:0;display:grid;gap:12px;position:relative;z-index:1}
.login-points li{display:flex;gap:11px;align-items:center;font-size:12.5px;color:#CBDDD7}
.login-points i{color:var(--gold);font-size:15px}
.login-form{display:grid;place-items:center;padding:30px;overflow:auto}
.login-card{width:min(380px,100%)}
.login-card h2{font-size:25px;margin-bottom:6px}
@media(max-width:900px){.login-screen{grid-template-columns:1fr}.login-art{display:none}}

/* ================= SHELL ================= */
.app-shell{display:grid;grid-template-columns:var(--rail-w) var(--nav-w) minmax(0,1fr);min-height:100vh}
body.nav-collapsed .app-shell{grid-template-columns:var(--rail-w) 0 minmax(0,1fr)}
body.nav-collapsed .navpanel{transform:translateX(-100%);opacity:0;pointer-events:none}

/* rail */
.rail{background:var(--brand);display:flex;flex-direction:column;align-items:center;padding:12px 0 10px;
  position:sticky;top:0;height:100vh;z-index:40}
.rail-brand{width:40px;height:40px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#F0D9A6;font-weight:800;margin-bottom:14px}
.rail-scroll{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;overflow-y:auto;padding:2px 0;scrollbar-width:none}
.rail-scroll::-webkit-scrollbar{display:none}
.rail-btn{width:40px;height:38px;border:0;border-radius:11px;background:transparent;color:#9FBBB2;font-size:16px;
  display:grid;place-items:center;position:relative;transition:.14s}
.rail-btn:hover{background:rgba(255,255,255,.09);color:#fff}
.rail-btn.active{background:rgba(240,217,166,.16);color:#F3DDAC}
.rail-btn.active:before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
.rail-btn .rail-badge{position:absolute;top:3px;right:4px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;
  background:var(--gold);color:#3B2B08;font-size:9px;font-weight:800;display:grid;place-items:center}
.rail-foot{width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;border-top:1px solid rgba(255,255,255,.1);padding-top:9px}

/* nav panel */
.navpanel{background:var(--surface);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;transition:.2s ease;z-index:35;min-width:0}
.navpanel-head{padding:14px 16px 12px;border-bottom:1px solid var(--line-soft)}
.np-brand{display:flex;gap:10px;align-items:center;min-width:0}
.np-brand strong{display:block;font-size:13px;white-space:nowrap}
.np-brand small{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navpanel-scroll{flex:1;overflow-y:auto;padding:10px 10px 18px}
.np-group{margin-bottom:2px}
.np-group-btn{width:100%;border:0;background:transparent;border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:10px;
  color:var(--ink-2);font-weight:600;font-size:12.5px;text-align:left}
.np-group-btn:hover{background:var(--brand-wash);color:var(--brand)}
.np-group-btn i.lead{font-size:15px;color:var(--brand-3);width:18px;text-align:center;flex:none}
.np-group-btn .chev{margin-left:auto;font-size:11px;color:var(--faint);transition:.18s}
.np-group.open>.np-group-btn{color:var(--brand);font-weight:700}
.np-group.open>.np-group-btn .chev{transform:rotate(90deg)}
.np-group.has-active>.np-group-btn{background:var(--brand-wash);color:var(--brand)}
.np-sub{display:none;padding:2px 0 6px 30px;margin-left:8px;border-left:1px solid var(--line)}
.np-group.open .np-sub{display:block}
.np-sub button{display:flex;width:100%;border:0;background:transparent;border-radius:8px;padding:6px 9px;font-size:12px;
  color:var(--muted);text-align:left;align-items:center;gap:7px}
.np-sub button:hover{background:var(--line-soft);color:var(--ink)}
.np-sub button.active{background:var(--brand-wash);color:var(--brand);font-weight:700}
.np-sub .cnt{margin-left:auto;font-size:10px;font-weight:700;color:var(--faint);background:var(--line-soft);border-radius:7px;padding:1px 6px}
.np-sub button.active .cnt{background:#fff;color:var(--brand-2)}
.navpanel-foot{border-top:1px solid var(--line-soft);padding:8px 10px 10px}
.np-item{width:100%;border:0;background:transparent;border-radius:9px;padding:7px 10px;display:flex;gap:10px;align-items:center;
  color:var(--muted);font-size:12px;text-align:left}
.np-item:hover{background:var(--line-soft);color:var(--ink)}
.np-item i{font-size:14px;width:18px;text-align:center}
.np-user{display:flex;gap:9px;align-items:center;padding:9px 8px 3px;margin-top:6px;border-top:1px solid var(--line-soft)}
.np-user strong{display:block;font-size:12px}.np-user small{display:block;font-size:10.5px;color:var(--muted)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-2);color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:700;flex:none}

/* topbar */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--top-h);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:0 16px;position:sticky;top:0;z-index:30}
.icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink-2);
  display:inline-grid;place-items:center;position:relative;flex:none}
.icon-btn:hover{background:var(--brand-wash);border-color:#CFDED8;color:var(--brand)}
.icon-btn .dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--bad);border:2px solid #fff}
.global-search{position:relative;flex:1;max-width:520px}
.global-search>i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:13px}
.global-search input{width:100%;height:34px;border:1px solid var(--line);background:#F7FAF9;border-radius:9px;padding:0 12px 0 32px;font-size:12.5px;outline:0}
.global-search input:focus{background:#fff;border-color:var(--brand-3);box-shadow:0 0 0 3px rgba(57,122,103,.1)}
.search-results{position:absolute;top:40px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);max-height:420px;overflow:auto;z-index:60;padding:6px}
.sr-group{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:800;padding:9px 10px 4px}
.sr-item{display:flex;gap:10px;align-items:center;width:100%;border:0;background:transparent;border-radius:9px;padding:8px 10px;text-align:left}
.sr-item:hover{background:var(--brand-wash)}
.sr-item strong{display:block;font-size:12px}.sr-item small{display:block;font-size:10.5px;color:var(--muted)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.entity-select{height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:12px;padding:0 8px;max-width:190px;color:var(--ink-2)}
.profile-btn{border:0;background:transparent;padding:0}
.btn-brand{background:var(--brand);border:1px solid var(--brand);color:#fff;font-weight:600;border-radius:9px}
.btn-brand:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.btn-outline-brand{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:9px;font-weight:600}
.btn-outline-brand:hover{background:var(--brand-wash);border-color:#CFDED8;color:var(--brand)}
.btn-sm{font-size:12px;padding:.34rem .7rem}
.btn-xs{font-size:11px;padding:.2rem .5rem;border-radius:7px}

/* ================= PAGE ================= */
.page{padding:20px 22px 60px;max-width:1680px;width:100%;margin:0 auto;min-width:0}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.crumb{font-size:11px;color:var(--muted);margin-bottom:5px;display:flex;gap:6px;align-items:center}
.crumb i{font-size:9px;color:var(--faint)}
.page-head h1{font-size:22px;font-weight:750}
.page-head .sub{color:var(--muted);font-size:12.5px;margin:4px 0 0;max-width:720px}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* cards */
.card-x{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-x .ch{padding:14px 16px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card-x .ch h3{font-size:13.5px;font-weight:700}
.card-x .ch p{margin:2px 0 0;font-size:11px;color:var(--muted)}
.card-x .cb{padding:16px}
.card-x .cb.flush{padding:0}
.grid{display:grid;gap:14px}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-21{grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr)}
.g-12{grid-template-columns:minmax(260px,1fr) minmax(0,2fr)}
.mb14{margin-bottom:14px}

/* KPI */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;box-shadow:var(--shadow);min-width:0}
.kpi .kt{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.kpi .kl{font-size:11px;color:var(--muted);font-weight:600}
.kpi .ki{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-wash);color:var(--brand-2);font-size:14px;flex:none}
.kpi .kv{font-size:23px;font-weight:800;letter-spacing:-.03em;margin:9px 0 5px;font-variant-numeric:tabular-nums}
.kpi .km{font-size:10.5px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kpi.tone-ok .ki{background:var(--ok-wash);color:var(--ok)}
.kpi.tone-warn .ki{background:var(--warn-wash);color:var(--warn)}
.kpi.tone-bad .ki{background:var(--bad-wash);color:var(--bad)}
.kpi.tone-gold .ki{background:var(--gold-wash);color:#8F6B27}
.kpi.clickable{cursor:pointer;transition:.15s}
.kpi.clickable:hover{border-color:#C6D7D1;transform:translateY(-1px);box-shadow:0 10px 26px rgba(20,45,38,.09)}
.up{color:var(--ok);font-weight:700}.down{color:var(--bad);font-weight:700}

/* badges */
.badge-x{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:3px 9px;font-size:10.5px;font-weight:700;white-space:nowrap;line-height:1.5}
.badge-x:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.badge-x.plain:before{display:none}
.b-ok{background:var(--ok-wash);color:var(--ok)}
.b-warn{background:var(--warn-wash);color:var(--warn)}
.b-bad{background:var(--bad-wash);color:var(--bad)}
.b-info{background:var(--info-wash);color:var(--info)}
.b-neutral{background:var(--neutral-wash);color:var(--neutral)}
.b-brand{background:var(--brand-wash);color:var(--brand-2)}
.b-gold{background:var(--gold-wash);color:#8F6B27}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:20px;
  padding:3px 10px;font-size:11px;color:var(--ink-2);font-weight:600}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tag{display:inline-block;border:1px solid var(--line);background:#F8FBFA;border-radius:7px;padding:2px 7px;font-size:10.5px;color:var(--muted);font-weight:600}

/* tables */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:640px}
table.tbl th{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:#F7FAF9;
  padding:10px 13px;text-align:left;white-space:nowrap;font-weight:800;border-bottom:1px solid var(--line)}
table.tbl td{padding:11px 13px;border-bottom:1px solid var(--line-soft);font-size:12px;vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr.rowlink{cursor:pointer}
table.tbl tbody tr.rowlink:hover{background:#F8FBFA}
table.tbl td .t1{font-weight:700;display:block}
table.tbl td .t2{display:block;color:var(--muted);font-size:10.5px;margin-top:2px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.toolbar{padding:12px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line-soft)}
.toolbar .sel{height:31px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:11.5px;padding:0 7px;color:var(--ink-2);max-width:170px}
.toolbar .srch{height:31px;border:1px solid var(--line);border-radius:8px;background:#F7FAF9;font-size:11.5px;padding:0 10px;min-width:180px;outline:0}
.toolbar .spacer{flex:1}
.table-foot{padding:10px 14px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}

/* progress / meters */
.meter{height:6px;border-radius:6px;background:#E8EFEC;overflow:hidden;min-width:60px}
.meter>span{display:block;height:100%;background:var(--brand-3);border-radius:6px}
.meter.ok>span{background:var(--ok)}.meter.warn>span{background:var(--warn)}.meter.bad>span{background:var(--bad)}

/* ============ DEAL SPINE (signature element) ============ */
.spine{background:linear-gradient(160deg,#14382F 0%,#1C4A3F 100%);color:#E9F2EF;border-radius:var(--r);padding:16px 18px;margin-bottom:14px;position:relative;overflow:hidden}
.spine-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.spine h2{font-size:19px;font-weight:750;color:#fff}
.spine .code{font-size:11px;letter-spacing:.08em;color:#F0D9A6;font-weight:800}
.spine .sub{color:#A6C1B8;font-size:12px;margin-top:3px}
.spine-facts{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.12)}
.spine-facts div span{display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#8FAFA5}
.spine-facts div strong{display:block;font-size:13px;margin-top:3px;color:#fff;font-variant-numeric:tabular-nums}
.stage-rail{display:flex;gap:3px;margin-top:14px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.stage-pip{flex:1;min-width:74px;border:0;background:rgba(255,255,255,.08);border-radius:7px;padding:6px 8px;text-align:left;color:#B7CEC7;position:relative}
.stage-pip small{display:block;font-size:9px;font-weight:700;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-pip.done{background:rgba(45,122,92,.34);color:#D6EDE2}
.stage-pip.now{background:var(--gold);color:#3A2A06;font-weight:800}
.stage-pip.blocked{background:rgba(178,69,63,.55);color:#FFE2E0}
.stage-pip i{font-size:10px}
.spine-blocker{margin-top:12px;background:rgba(178,69,63,.22);border:1px solid rgba(255,190,185,.35);border-radius:10px;padding:9px 12px;
  display:flex;gap:10px;align-items:flex-start;font-size:12px;color:#FFDFDC}
.spine-blocker i{color:#FFB3AE;font-size:14px;margin-top:1px}
.spine-next{margin-top:10px;background:rgba(255,255,255,.09);border-radius:10px;padding:9px 12px;display:flex;gap:10px;align-items:center;
  font-size:12px;color:#D9E8E3;flex-wrap:wrap}

/* tabs */
.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:14px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;padding:9px 13px;font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:700}
.tabs button .n{font-size:10px;background:var(--line-soft);border-radius:7px;padding:1px 5px;margin-left:5px;color:var(--muted)}
.tabs button.active .n{background:var(--brand-wash);color:var(--brand-2)}

/* definition lists */
.dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.dl>div span{display:block;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:700}
.dl>div strong{display:block;font-size:12.5px;margin-top:3px;font-weight:650}
.dl>div.wide{grid-column:1/-1}

/* lists */
.row-list>div{padding:11px 0;border-bottom:1px solid var(--line-soft);display:flex;gap:12px;align-items:flex-start}
.row-list>div:last-child{border-bottom:0}
.row-list .rl-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-wash);color:var(--brand-2);flex:none}
.row-list strong{display:block;font-size:12.5px}
.row-list p{margin:2px 0 0;font-size:11px;color:var(--muted)}

/* timeline */
.tl{position:relative;padding-left:24px}
.tl:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl-i{position:relative;padding-bottom:16px}
.tl-i:last-child{padding-bottom:0}
.tl-i:before{content:"";position:absolute;left:-20px;top:4px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--brand-3)}
.tl-i.done:before{background:var(--ok);border-color:var(--ok)}
.tl-i.late:before{background:var(--bad);border-color:var(--bad)}
.tl-i.wait:before{background:#fff;border-color:var(--line)}
.tl-i strong{font-size:12.5px;display:block}
.tl-i p{margin:2px 0 0;font-size:11px;color:var(--muted)}

/* checklist */
.chk{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.chk:last-child{border-bottom:0}
.chk .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;margin-top:1px;font-size:11px;color:transparent}
.chk.done .box{background:var(--ok);border-color:var(--ok);color:#fff}
.chk.blocked .box{background:var(--bad-wash);border-color:var(--bad);color:var(--bad)}
.chk strong{display:block;font-size:12.5px}
.chk p{margin:2px 0 0;font-size:11px;color:var(--muted)}

/* comparison matrix */
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
.cmp th,.cmp td{padding:10px 12px;border-bottom:1px solid var(--line-soft);font-size:12px;text-align:left}
.cmp thead th{background:#F7FAF9;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}
.cmp td.crit{font-weight:700;color:var(--ink-2);background:#FCFDFD;width:180px}
.cmp .win{background:var(--ok-wash)}
.cmp .fail{background:var(--bad-wash);color:var(--bad)}
.cmp .best{font-weight:800;color:var(--ok)}

/* alerts */
.note{border-radius:11px;padding:11px 13px;font-size:12px;display:flex;gap:10px;align-items:flex-start;border:1px solid transparent}
.note i{font-size:14px;margin-top:1px;flex:none}
.note strong{display:block;margin-bottom:1px}
.note-bad{background:var(--bad-wash);border-color:#F0CFCC;color:#7E2F2B}
.note-warn{background:var(--warn-wash);border-color:#F0DDB6;color:#7E560F}
.note-ok{background:var(--ok-wash);border-color:#C9E4D8;color:#1D5943}
.note-info{background:var(--info-wash);border-color:#CFE0EE;color:#2A5378}
.note-brand{background:var(--brand-wash);border-color:#CFE2DA;color:var(--brand)}

/* empty / loading / denied */
.state-box{text-align:center;padding:52px 22px}
.state-box .si{width:52px;height:52px;border-radius:16px;background:var(--brand-wash);color:var(--brand-2);display:grid;place-items:center;
  font-size:22px;margin:0 auto 14px}
.state-box h3{font-size:16px;margin-bottom:6px}
.state-box p{color:var(--muted);max-width:460px;margin:0 auto 16px;font-size:12.5px}
.skel{background:linear-gradient(90deg,#EDF2F0 25%,#F6F9F8 50%,#EDF2F0 75%);background-size:400% 100%;
  animation:sh 1.3s ease infinite;border-radius:7px}
@keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}}

/* document paper */
.paper{background:#fff;border:1px solid var(--line);border-radius:8px;padding:30px 34px;max-width:820px;margin:0 auto;
  box-shadow:0 6px 26px rgba(20,45,38,.08);font-size:12px}
.paper-head{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border-bottom:2px solid var(--brand);
  padding-bottom:16px;margin-bottom:18px}
.paper-head h4{font-size:14px;color:var(--brand)}
.paper-head small{color:var(--muted);font-size:10.5px}
.paper-title{text-align:right}
.paper-title strong{display:block;font-size:16px;color:var(--brand);letter-spacing:.02em}
.paper h5{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--brand-2);margin:18px 0 9px;
  padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.paper table{width:100%;border-collapse:collapse;font-size:11.5px}
.paper table th{background:#F7FAF9;text-align:left;padding:7px 9px;font-size:10px;text-transform:uppercase;color:var(--muted)}
.paper table td{padding:7px 9px;border-bottom:1px solid var(--line-soft)}
.watermark{position:relative}
.watermark:after{content:attr(data-wm);position:absolute;inset:0;display:grid;place-items:center;font-size:64px;font-weight:800;
  color:rgba(178,69,63,.09);transform:rotate(-22deg);pointer-events:none;letter-spacing:.1em}

/* drawer */
.drawer-backdrop{position:fixed;inset:0;background:rgba(12,26,22,.45);z-index:1050}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,94vw);background:#fff;z-index:1060;display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg)}
.drawer-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer-head h3{font-size:15px}
.drawer-body{flex:1;overflow:auto;padding:12px 14px}
.notif{display:flex;gap:11px;padding:11px;border-radius:11px;border:1px solid var(--line-soft);margin-bottom:8px}
.notif:hover{background:#F8FBFA;cursor:pointer}
.notif .ni{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.notif strong{display:block;font-size:12.5px}
.notif p{margin:2px 0 0;font-size:11px;color:var(--muted)}

/* modal + toast */
.modal-content{border:0;border-radius:16px;box-shadow:var(--shadow-lg)}
.modal-header{border-bottom:1px solid var(--line);padding:16px 20px}
.modal-body{padding:18px 20px}
.modal-footer{border-top:1px solid var(--line);padding:12px 20px}
.toast-stack{position:fixed;right:18px;bottom:18px;z-index:2100;display:flex;flex-direction:column;gap:8px;max-width:340px}
.toast-x{background:var(--brand);color:#fff;border-radius:11px;padding:11px 14px;font-size:12px;box-shadow:var(--shadow-lg);
  display:flex;gap:10px;align-items:flex-start;animation:tin .2s ease}
.toast-x.bad{background:#8E332E}.toast-x.warn{background:#8A5C11}.toast-x.ok{background:#1F6249}
.toast-x i{font-size:14px;margin-top:1px}
@keyframes tin{from{transform:translateY(12px);opacity:0}}

/* forms */
.form-control,.form-select{font-size:12.5px;border-color:#D8E2DE;border-radius:9px;padding:.45rem .65rem}
.form-control:focus,.form-select:focus{border-color:var(--brand-3);box-shadow:0 0 0 3px rgba(57,122,103,.1)}
.form-control::placeholder{color:#A9B7B2}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.fgrid .full{grid-column:1/-1}
.req:after{content:" *";color:var(--bad)}
.stepper{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.stepper .st{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--faint)}
.stepper .st .n{width:23px;height:23px;border-radius:50%;background:var(--line-soft);display:grid;place-items:center;font-size:10.5px}
.stepper .st.on{color:var(--brand)}.stepper .st.on .n{background:var(--brand);color:#fff}
.stepper .st.ok{color:var(--ok)}.stepper .st.ok .n{background:var(--ok);color:#fff}
.stepper .bar{flex:1;height:1px;background:var(--line);min-width:14px}

/* fab */
.fab{position:fixed;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;border:0;background:var(--brand);color:#F0D9A6;
  font-size:20px;box-shadow:var(--shadow-lg);z-index:900}

/* pipeline board */
.board{display:flex;gap:11px;overflow-x:auto;padding-bottom:10px}
.board-col{background:#EBF1EE;border-radius:13px;padding:10px;min-width:236px;width:236px;flex:none}
.board-col h4{font-size:11.5px;display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;color:var(--ink-2)}
.board-col h4 span{font-size:10px;background:#fff;border-radius:8px;padding:2px 7px;color:var(--muted)}
.dcard{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:8px;cursor:pointer;transition:.14s}
.dcard:hover{border-color:#B9CEC7;transform:translateY(-1px);box-shadow:var(--shadow)}
.dcard .dc-code{font-size:9.5px;letter-spacing:.05em;color:var(--gold);font-weight:800}
.dcard h5{font-size:12px;margin:4px 0 5px;line-height:1.35}
.dcard p{font-size:10.5px;color:var(--muted);margin:0 0 8px}
.dcard .dc-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px}
.dcard .dc-foot strong{color:var(--brand-2);font-variant-numeric:tabular-nums}

/* charts */
.chart{width:100%;height:220px;overflow:visible}
.chart .gl{stroke:#EAF0ED;stroke-width:1}
.chart .lbl{font-size:9px;fill:#8A9994}
.chart .bar{fill:var(--brand-3)}
.chart .bar.alt{fill:var(--gold)}
.chart .area{fill:url(#ag)}
.chart .line{fill:none;stroke:var(--brand-2);stroke-width:2.2}
.chart .line2{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:4 3}
.donut-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.legend{display:grid;gap:7px;font-size:11px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:7px}

/* role visibility helper */
.locked{position:relative;filter:grayscale(.55);opacity:.55}
.locked:after{content:"\F47F";font-family:bootstrap-icons;position:absolute;right:9px;top:9px;color:var(--muted)}

/* ================= RESPONSIVE ================= */
@media(max-width:1300px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-21,.g-12{grid-template-columns:1fr}}
@media(max-width:1200px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:991.98px){
  .app-shell{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .navpanel{position:fixed;left:var(--rail-w);top:0;bottom:0;width:var(--nav-w);transform:translateX(-115%);box-shadow:var(--shadow-lg)}
  body.nav-open .navpanel{transform:translateX(0)}
  body.nav-collapsed .app-shell{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .page{padding:16px 14px 70px}
  .entity-select{display:none}
}
@media(max-width:767.98px){
  .app-shell{grid-template-columns:0 minmax(0,1fr)}
  .rail{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:.2s}
  body.nav-open .rail{transform:translateX(0)}
  body.nav-open .navpanel{left:var(--rail-w)}
  .g-4,.g-3,.g-2{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .page-head h1{font-size:18px}
  .kpi .kv{font-size:20px}
  .spine{padding:14px}
  .spine-facts{gap:14px}
  .topbar{padding:0 12px;gap:8px}
  .global-search input{font-size:16px}
  .paper{padding:18px 16px}
  .drawer{width:100%}
}
@media print{.rail,.navpanel,.topbar,.head-actions,.fab{display:none!important}.app-shell{grid-template-columns:1fr}}

/* ---------- additions used by the module screens ---------- */
.btn-outline-bad{border:1px solid var(--bad);color:var(--bad);background:#fff;font-weight:600}
.btn-outline-bad:hover{background:var(--bad);color:#fff}

/* toolbar meta */
.toolbar .tb-meta{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}

/* global search result rows */
.sr-i{display:flex;gap:10px;align-items:center;width:100%;border:0;background:transparent;border-radius:9px;padding:8px 10px;text-align:left}
.sr-i:hover{background:var(--brand-wash)}
.sr-i i{color:var(--brand-3);font-size:14px;width:18px;text-align:center;flex:none}
.sr-i strong{display:block;font-size:12px;color:var(--ink)}
.sr-i small{display:block;font-size:10.5px;color:var(--muted)}
.sr-empty{padding:14px;font-size:12px;color:var(--muted)}

/* document preview sheet */
.paper .ph{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  border-bottom:2px solid var(--brand);padding-bottom:14px;margin-bottom:18px}
.paper .ph .logo{font-size:16px;font-weight:800;letter-spacing:.09em;color:var(--brand)}
.paper .pb{font-size:12px}
.paper .pf{margin-top:24px;padding-top:12px;border-top:1px solid var(--line);
  font-size:10px;color:var(--muted);text-align:center;letter-spacing:.02em}
.paper.water{position:relative;overflow:hidden}
.paper.water:after{content:attr(data-mark);position:absolute;top:44%;left:50%;
  transform:translate(-50%,-50%) rotate(-24deg);font-size:56px;font-weight:800;letter-spacing:.1em;
  color:rgba(178,69,63,.10);pointer-events:none;white-space:nowrap}

/* route stepper */
.stepper{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.stepper .st{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--faint);
  background:var(--line-soft);border-radius:20px;padding:4px 11px 4px 5px;white-space:nowrap}
.stepper .st span{width:17px;height:17px;border-radius:50%;background:#fff;color:var(--faint);
  display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;flex:none}
.stepper .st.done{background:var(--ok-wash);color:var(--ok)}
.stepper .st.done span{background:var(--ok);color:#fff}
.stepper .st.now{background:var(--brand-wash);color:var(--brand)}
.stepper .st.now span{background:var(--brand);color:#fff}
.stepper.mini .st{font-size:10px;padding:3px 8px 3px 4px}
.stepper.mini .st span{width:14px;height:14px;font-size:8.5px}

@media print{ .stepper .st{background:#fff;border:1px solid #ccc} }

/* ============================================================
   MODULE LAUNCHER — the first screen after sign in
   ============================================================ */
.launch{max-width:1180px;margin:0 auto;padding:4px 0 40px}
.launch-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding:26px 28px;border-radius:20px;margin-bottom:26px;color:#fff;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 62%,#2E6E5E 100%);
  box-shadow:0 18px 44px -26px rgba(10,42,35,.7)}
.lh-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#F0D9A6;margin-bottom:8px;font-weight:600}
.launch-head h1{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.launch-head p{margin:0;font-size:13.5px;color:rgba(255,255,255,.82);max-width:56ch;line-height:1.55}
.lh-stats{display:flex;gap:10px;flex-wrap:wrap}
.lh-stat{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);border-radius:13px;
  padding:10px 15px;min-width:92px;text-align:left;color:#fff;transition:.15s}
.lh-stat:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.lh-stat strong{display:block;font-size:22px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.lh-stat span{font-size:11px;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.06em}
.lh-stat.bad strong{color:#FFB3AE} .lh-stat.warn strong{color:#F3DDAC}

.app-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.app-tile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  padding:20px 12px 16px;border-radius:18px;border:1px solid var(--line);background:var(--card);transition:.16s}
.app-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--a) 55%,var(--line));
  box-shadow:0 16px 34px -20px color-mix(in srgb,var(--a) 60%,transparent)}
.app-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:24px;color:#fff;
  background:linear-gradient(140deg,var(--a) 0%,var(--a2) 100%);
  box-shadow:0 10px 20px -12px color-mix(in srgb,var(--a2) 85%,transparent)}
.app-nm{font-size:13.5px;font-weight:650;color:var(--ink);line-height:1.25}
.app-sub{font-size:10.5px;color:var(--muted);letter-spacing:.02em}
.app-badge{position:absolute;top:12px;right:12px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--bad);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;box-shadow:0 3px 8px -3px rgba(180,40,32,.8)}
.app-tile.is-locked{cursor:not-allowed;opacity:.5}
.app-tile.is-locked:hover{transform:none;box-shadow:none;border-color:var(--line)}
.app-tile.is-locked .app-ic{background:linear-gradient(140deg,#B9C3C0,#8E9B98);box-shadow:none}
.app-lock{position:absolute;top:12px;right:12px;color:var(--muted);font-size:11px}

.launch-foot{margin-top:30px}
.lf-title{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:650;margin-bottom:12px}
.lf-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lf-card{text-align:left;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:13px 15px;transition:.15s}
.lf-card:hover{border-color:var(--brand-2);transform:translateY(-2px);box-shadow:var(--sh)}
.lf-code{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--brand-2)}
.lf-name{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:4px 0 7px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lf-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}

@media(max-width:1200px){ .app-grid{grid-template-columns:repeat(5,1fr)} .lf-row{grid-template-columns:repeat(2,1fr)} }
@media(max-width:991px){ .app-grid{grid-template-columns:repeat(4,1fr)} }
@media(max-width:767px){
  .app-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .app-tile{padding:15px 8px 12px;border-radius:15px}
  .app-ic{width:46px;height:46px;font-size:20px;border-radius:14px}
  .app-nm{font-size:12px}
  .app-sub{display:none}
  .launch-head{padding:20px;border-radius:16px}
  .launch-head h1{font-size:21px}
  .lh-stats{width:100%}
  .lh-stat{flex:1;min-width:0;padding:9px 10px}
  .lf-row{grid-template-columns:1fr}
}
.rail-apps{margin-bottom:10px;background:rgba(255,255,255,.07);color:#F0D9A6}

/* ============================================================
   LAUNCHER MODE — full-width Odoo-style home (no rail / nav)
   ============================================================ */
body.launcher-mode .rail,
body.launcher-mode .navpanel  { display: none !important; }
body.launcher-mode .app-shell { grid-template-columns: 1fr !important; }
body.launcher-mode .topbar    { display: none !important; }
body.launcher-mode .main      { min-height: 100vh; }

/* topbar on launcher is replaced by its own minimal header inside .launch */
.launch-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px 0; gap: 16px;
}
.launch-topbar .lt-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px; color: var(--ink);
}
.lt-brand .brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand); color: #F0D9A6;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.launch-topbar .lt-right { display: flex; align-items: center; gap: 10px; }
.launch-topbar .lt-company {
  font-size: 12px; color: var(--muted); background: var(--bg2);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px;
}
.launch-topbar .lt-user {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.lt-user .avatar { width: 32px; height: 32px; font-size: 12px; border-radius: 50%;
  background: var(--brand); color: #F0D9A6; display: grid; place-items: center; font-weight: 700; }
.launch-topbar .lt-signout {
  border: 1px solid var(--line); background: transparent; border-radius: 8px;
  padding: 5px 12px; font-size: 12px; color: var(--muted); cursor: pointer;
}
.launch-topbar .lt-signout:hover { background: var(--bg2); color: var(--ink); }

/* re-layout the launch grid with more padding now that it's full-width */
body.launcher-mode .launch { max-width: 1240px; margin: 0 auto; padding: 12px 32px 48px; }
body.launcher-mode .app-grid { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1100px) { body.launcher-mode .app-grid { grid-template-columns: repeat(5,1fr); } }
@media (max-width: 860px)  { body.launcher-mode .app-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 600px)  { body.launcher-mode .app-grid { grid-template-columns: repeat(3,1fr); }
  body.launcher-mode .launch { padding: 10px 14px 32px; } }

/* ============================================================
   AUTOMATION REGISTER
   ============================================================ */
.aut-row{display:grid;grid-template-columns:68px 1fr 140px;gap:12px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--line)}
.aut-row:last-child{border-bottom:0}
.aut-id{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--brand-2);padding-top:2px;font-variant-numeric:tabular-nums}
.aut-trigger{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px}
.aut-action{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:5px}
.aut-cond{font-size:11.5px;color:var(--muted2,#8CA89E)}
.aut-go{padding-top:2px}
@media(max-width:767px){.aut-row{grid-template-columns:60px 1fr;}.aut-go{grid-column:2}}

/* ============================================================
   UAT WALKTHROUGH
   ============================================================ */
.uat-header{margin-bottom:6px}
.uat-progress{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.uat-prog-bar{flex:1;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.uat-prog-fill{height:100%;border-radius:4px;background:var(--ok);transition:.4s}
.uat-progress span{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}

.uat-group{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.uat-group-head{background:var(--bg2);padding:13px 18px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}

.uat-card{border-bottom:1px solid var(--line)}
.uat-card:last-child{border-bottom:0}
.uat-card-head{display:flex;align-items:center;gap:12px;padding:14px 18px 0}
.uat-num{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--brand-2);
  background:color-mix(in srgb,var(--brand-2) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-2) 25%,transparent);
  border-radius:6px;padding:3px 8px;white-space:nowrap}
.uat-title{flex:1;font-size:14px;font-weight:650;color:var(--ink)}
.uat-status{flex-shrink:0}
.uat-card-body{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;padding:12px 18px 16px;align-items:start}
.uat-col{}
.uat-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:700;margin-bottom:5px}
.uat-text{font-size:13px;color:var(--ink);line-height:1.55}
.uat-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding-top:18px}
@media(max-width:900px){
  .uat-card-body{grid-template-columns:1fr;gap:12px}
  .uat-actions{flex-direction:row;flex-wrap:wrap}
}

/* ============================================================
   PARTY PROFILE
   ============================================================ */
.party-profile{padding:4px 0 32px;max-width:1200px;margin:0 auto}

.pp-hero{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:22px}
.pp-avatar{width:72px;height:72px;flex-shrink:0;border-radius:18px;
  background:linear-gradient(140deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#F0D9A6;font-size:24px;font-weight:800;display:grid;place-items:center;letter-spacing:-.02em}
.pp-meta{flex:1;min-width:0}
.pp-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:5px;font-weight:600}
.pp-name{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 4px}
.pp-sub{font-size:13px;color:var(--muted)}
.pp-tags{display:flex;gap:6px;flex-wrap:wrap}
.pp-hero-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;padding-top:4px}

.pp-contact{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.pp-contact:last-child{border-bottom:0}
.pp-contact-avatar{width:38px;height:38px;border-radius:50%;background:var(--bg2);
  color:var(--brand-2);font-size:13px;font-weight:700;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line)}
.pp-contact-body{min-width:0}
.pp-contact-name{font-size:13.5px;font-weight:650;color:var(--ink);display:flex;align-items:center;gap:6px}
.pp-contact-role{font-size:12px;color:var(--muted);margin-bottom:3px}
.pp-contact-links{font-size:12px;color:var(--brand-2)}
.pp-contact-links a{color:inherit;text-decoration:none}
.pp-contact-links a:hover{text-decoration:underline}

/* ============================================================
   DOCUMENT FORMS — paper rendering + tile launcher
   ============================================================ */

/* Form tile grid (v1-style template launcher) */
.form-tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.form-tile{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--line);background:var(--card);
  border-radius:14px;padding:14px 16px;position:relative;text-align:left;transition:.16s;cursor:pointer}
.form-tile:hover{border-color:color-mix(in srgb,var(--a) 60%,var(--line));
  box-shadow:0 10px 24px -16px color-mix(in srgb,var(--a) 55%,transparent);transform:translateY(-2px)}
.form-tile-ic{width:42px;height:42px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(140deg,var(--a) 0%,color-mix(in srgb,var(--a) 65%,#000) 100%);color:#fff;
  box-shadow:0 6px 14px -8px color-mix(in srgb,var(--a) 80%,transparent)}
.form-tile-code{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--brand-2);margin-bottom:2px}
.form-tile-name{font-size:13px;font-weight:650;color:var(--ink);line-height:1.3;margin-bottom:4px}
.form-tile-who{font-size:11px;color:var(--muted);margin-bottom:6px}
.form-tile-seq{position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:50%;
  background:var(--brand);color:#F0D9A6;font-size:10px;font-weight:800;display:grid;place-items:center}
@media(max-width:991px){.form-tile-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.form-tile-grid{grid-template-columns:1fr}}

/* Paper document wrapper */
.form-paper-wrap{font-family:'Times New Roman',Times,serif;font-size:12.5px;color:#1a1a1a;
  background:#fff;border:1px solid #ddd;border-radius:8px;padding:32px 36px;
  max-width:860px;margin:0 auto;line-height:1.55}
.form-paper-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:18px;border-bottom:2px solid #12352E;margin-bottom:18px}
.form-logo{display:flex;align-items:flex-start;gap:12px}
.form-logo-mark{width:44px;height:44px;background:#12352E;color:#C39A4B;font-size:14px;font-weight:900;
  border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.form-logo-name{font-size:11.5px;font-weight:800;color:#12352E;letter-spacing:.02em;text-transform:uppercase}
.form-logo-addr{font-size:9.5px;color:#555;margin-top:2px}
.form-doc-meta{text-align:right}
.form-doc-type{font-size:14px;font-weight:800;color:#12352E;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.form-doc-ref{font-size:12px;color:#666;margin-top:4px;font-style:italic}
.form-meta-table{font-size:11px;border-collapse:collapse}
.form-meta-table th{text-align:right;padding:2px 8px 2px 0;font-weight:700;color:#444;white-space:nowrap}
.form-meta-table td{color:#222}
.form-sub-title{text-align:center;font-size:13px;margin:10px 0 18px}

/* Section labels */
.form-section-label{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:#12352E;padding:5px 10px;margin:18px 0 10px;border-radius:4px}

/* Body text */
.form-salutation{margin:14px 0 8px;font-size:13px;font-weight:600}
.form-body{margin:8px 0;font-size:12.5px;line-height:1.65}
.form-clause{margin:8px 0;font-size:12px;line-height:1.65;color:#333;text-align:justify}
.form-note{font-size:11px;color:#666;margin:6px 0;font-style:italic}
.form-warning{font-weight:800;color:#c0392b;font-size:12px;margin:10px 0;text-align:center;
  border:1px dashed #c0392b;padding:4px;border-radius:4px}
.form-validity{font-style:italic;font-size:11.5px;color:#444;margin:14px 0;border-left:3px solid #C39A4B;padding-left:10px}
.form-spec-placeholder{border:1px dashed #bbb;padding:12px;margin:12px 0;color:#888;font-size:11.5px;
  text-align:center;border-radius:4px}

/* Data tables inside forms */
.form-table{border-collapse:collapse;width:100%;margin:8px 0 12px}
.form-table th{text-align:left;padding:5px 8px;font-size:11.5px;font-weight:700;color:#444;
  white-space:nowrap;background:#f5f5f5;border:1px solid #ddd;width:28%}
.form-table td{padding:5px 8px;font-size:12px;color:#1a1a1a;border:1px solid #ddd}
.form-table .merge-empty{color:#aaa;font-style:italic}

/* Line item table */
.form-line-table{border-collapse:collapse;width:100%;margin:12px 0}
.form-line-table th{background:#12352E;color:#F0D9A6;padding:7px 10px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;border:1px solid #0a2520}
.form-line-table td{padding:8px 10px;border:1px solid #ddd;font-size:12px}
.form-line-table tfoot td{background:#f5f5f5;font-weight:700}
.form-line-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* Procedure list */
.form-procedure{margin:8px 0 12px;padding-left:20px}
.form-procedure li{margin:7px 0;font-size:12px;line-height:1.6}

/* Two-column party layout in SPA */
.form-parties-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}

/* PI terms block */
.form-pi-terms{margin:12px 0}
.form-po-header{margin-bottom:12px}

/* Signature block */
.form-sig-row{display:flex;gap:32px;margin:32px 0 18px;justify-content:space-around}
.form-sig-block{flex:1;max-width:260px;text-align:center}
.form-sig-line{border-bottom:1px solid #222;height:48px;margin-bottom:6px}
.form-sig-label{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#12352E}
.form-sig-name{font-size:11.5px;color:#333;margin-top:3px}
.form-sig-meta{font-size:10px;color:#888;margin-top:2px}
.mt-4{margin-top:16px!important}

/* Dark mode — keep paper white */
@media(prefers-color-scheme:dark){.form-paper-wrap{background:#fff;color:#1a1a1a}}

/* Form shortcut strip on the deal documents tab */
.form-shortcut-strip{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;
  padding:11px 16px;margin-bottom:14px}
.fsc-label{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase;margin-right:4px;white-space:nowrap}
.fsc-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;
  border:1px solid color-mix(in srgb,var(--a) 40%,var(--line));
  background:color-mix(in srgb,var(--a) 8%,var(--card));
  color:color-mix(in srgb,var(--a) 80%,#000);
  border-radius:8px;font-size:11.5px;font-weight:700;cursor:pointer;transition:.14s;white-space:nowrap}
.fsc-btn:hover{background:var(--a);color:#fff;border-color:var(--a);transform:translateY(-1px);
  box-shadow:0 6px 14px -8px color-mix(in srgb,var(--a) 70%,transparent)}

/* ============================================================
   USER EDITOR MODAL — full-width two-column layout
   ============================================================ */
.modal-ue { max-width: 1020px !important; }

/* Grid */
.ue-grid { display: grid; grid-template-columns: 320px 1fr; gap: 24px; }
.ue-identity { }
.ue-access { }
.ue-section { font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--line) }

/* Company block */
.ue-company { border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:10px }
.ue-company-head { display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px;background:var(--bg2);flex-wrap:wrap;gap:8px }
.ue-company-name { display:flex;align-items:center;gap:0 }
.ue-modules { padding:14px }
.ue-all-badge { font-size:12px;font-weight:600;color:var(--ok);margin-bottom:10px }

/* Module pills */
.ue-mod-grid { display:flex;flex-wrap:wrap;gap:6px }
.ue-mod { display:inline-flex;align-items:center;gap:5px;padding:5px 11px;
  border:1px solid var(--line);border-radius:8px;font-size:12px;cursor:pointer;
  background:var(--bg2);color:var(--muted);transition:.12s;user-select:none }
.ue-mod input[type="checkbox"]{ display:none }
.ue-mod:hover { border-color:var(--brand-2);color:var(--brand-2) }
.ue-mod.on { background:color-mix(in srgb,var(--brand-2) 12%,var(--card));
  border-color:var(--brand-2);color:var(--brand-2);font-weight:600 }
.ue-mod.on i { color:var(--brand-2) }

/* Permission matrix */
.perm-matrix { min-width:700px }
.perm-role-head { min-width:110px }
.perm-role-label { font-size:11px;font-weight:700;writing-mode:horizontal-tb;
  max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.perm-cell { text-align:center;padding:6px }

@media(max-width:860px){
  .ue-grid { grid-template-columns:1fr; }
  .modal-ue { max-width:96vw !important; }
}

/* ============================================================
   QUICK LOI — 5-step mobile flow
   ============================================================ */
.qloi-shell{max-width:720px;margin:0 auto}
.qloi-rail{display:flex;align-items:center;margin-bottom:24px}
.qloi-step{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.qloi-step-n{width:28px;height:28px;border-radius:50%;background:var(--bg2);border:2px solid var(--line);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted);flex-shrink:0}
.qloi-step-l{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qloi-step.active .qloi-step-n{background:var(--brand);border-color:var(--brand);color:#F0D9A6}
.qloi-step.active .qloi-step-l{color:var(--ink);font-weight:600}
.qloi-rail-line{flex:1;height:2px;background:var(--line);min-width:8px}
.qloi-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}
.qloi-panel-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.qloi-badge{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:color-mix(in srgb,var(--brand-2) 12%,transparent);color:var(--brand-2);
  border:1px solid color-mix(in srgb,var(--brand-2) 25%,transparent);border-radius:6px;padding:3px 8px}
.qloi-doc-wrap{max-height:480px;overflow-y:auto;border:1px solid var(--line);border-radius:10px}
.qloi-nav{display:flex;justify-content:space-between;margin-top:6px}
@media(max-width:600px){.qloi-step-l{display:none}}

/* ============================================================
   APPROVAL PACK + SIGN-OFF CHECKLIST
   ============================================================ */
.apack-section-head{font-size:13px;font-weight:700;color:var(--ink);
  border-left:4px solid var(--brand);padding:10px 14px;background:var(--bg2);
  border-radius:0 10px 10px 0;margin-bottom:10px}
.apack-card{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:8px;background:var(--card)}
.apack-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.apack-req-id{font-size:11px;font-weight:800;letter-spacing:.08em;
  background:color-mix(in srgb,var(--brand-2) 12%,transparent);color:var(--brand-2);
  border:1px solid color-mix(in srgb,var(--brand-2) 25%,transparent);
  border-radius:6px;padding:3px 9px;white-space:nowrap;flex-shrink:0}
.apack-req-title{flex:1;font-size:14px;font-weight:650;color:var(--ink)}
.apack-req-desc{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 8px}
.apack-demo{font-size:12px;background:color-mix(in srgb,var(--gold) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);color:var(--ink);
  border-radius:8px;padding:8px 12px;margin-bottom:8px}
.apack-screens{display:flex;flex-wrap:wrap;gap:5px}
.apack-screen-btn,.apack-aut-btn{font-size:11px;padding:3px 9px;border-radius:6px;
  border:1px solid var(--line);background:var(--bg2);color:var(--muted);cursor:pointer;transition:.12s}
.apack-screen-btn:hover,.apack-aut-btn:hover{border-color:var(--brand-2);color:var(--brand-2);background:var(--card)}

/* Sign-off */
.signoff-status{padding:14px 18px;border-radius:12px;font-size:14px;font-weight:600;margin-bottom:18px}
.signoff-status.ready{background:color-mix(in srgb,var(--ok) 12%,transparent);
  color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.signoff-status.pending{background:var(--bg2);color:var(--muted);border:1px solid var(--line)}
.signoff-section{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:12px 0 8px;border-bottom:1px solid var(--line);margin-bottom:0}
.signoff-table{width:100%;border-collapse:collapse;margin-bottom:8px;font-size:13px}
.signoff-table thead th{background:var(--bg2);padding:8px 12px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line);text-align:left}
.signoff-table tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.signoff-id{font-weight:700;color:var(--brand-2);font-size:11.5px;white-space:nowrap}
.signoff-actions{display:flex;gap:5px;white-space:nowrap}
.btn-xs{padding:3px 10px;font-size:11.5px;border-radius:6px}
.signoff-row.pass{background:color-mix(in srgb,var(--ok) 5%,transparent)}
.signoff-row.fail{background:color-mix(in srgb,#c0392b 5%,transparent)}
.signoff-row.defer{background:color-mix(in srgb,var(--gold) 5%,transparent)}
.signoff-sigblock .form-sig-row{justify-content:space-around}

/* Print styles for the sign-off */
@media print{
  .rail,.navpanel,.topbar,.launch-topbar,.btn:not(.no-print),.apack-screen-btn,.apack-aut-btn,
  [data-go],[data-act],#page>.crumb,.fab{display:none!important}
  body{background:#fff!important}
  .signoff-table{font-size:11px}
  .form-paper-wrap{box-shadow:none;border:none}
}

/* ====== Prototype v2.1 additions ====== */

/* Demo environment banner */
.demo-banner{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:#78350f;color:#fef3c7;
  font-size:11.5px;padding:6px 40px 6px 16px;text-align:center;
  line-height:1.4;
}
.demo-banner-close{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:#fef3c7;font-size:18px;cursor:pointer;
  line-height:1;padding:0 4px;
}
.demo-banner ~ .login-screen,
.demo-banner ~ .app-shell { margin-top:32px; }
body:not(:has(.demo-banner)) .login-screen,
body:not(:has(.demo-banner)) .app-shell { margin-top:0; }

/* Company prefix badge */
.prefix-badge{
  display:inline-block;font-size:10px;font-weight:700;
  padding:1px 5px;border-radius:3px;
  background:rgba(255,255,255,.12);color:var(--brand-light);
  letter-spacing:.05em;margin-left:6px;vertical-align:middle;
}

/* Finance & Accounting module unified colours */
.nav-finance-unified { color: #34d399; }

/* SAMPLE TEMPLATE watermark */
.tpl-sample-note{
  background:#7f1d1d22;border:1px solid #ef444444;
  border-radius:6px;padding:8px 12px;
  font-size:11px;color:#fca5a5;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}

/* Blocked state highlight */
.state-blocked-row td { background:rgba(239,68,68,.06)!important; }

/* M01-M10 module tags */
.module-tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:700;padding:1px 6px;
  border-radius:3px;background:#1e3a5f;color:#93c5fd;
  letter-spacing:.04em;
}

/* Role-gated: hidden (not disabled) — handled via JS but fallback */
.role-hidden { display:none !important; }

/* Finance & Accounting sub-section headers */
.fin-section-hd{
  font-size:.65rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  padding:10px 12px 4px;
}

/* ── v2.1 Fulfillment and Facilitation ── */
.b-gold { background: rgba(228,180,80,.18); color: #E4B450; }
.b-ok-wash  { background: rgba(34,197,94,.08); }
.b-warn-wash{ background: rgba(245,158,11,.08); }
.b-info-wash{ background: rgba(79,142,247,.08); }

/* Sell workflow guide cards */
.fulfillment-path-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  height: 100%;
}

/* Facilitation badge */
.facilitation-role-tag {
  font-size: .72rem;
  background: rgba(228,180,80,.15);
  color: #E4B450;
  padding: .15rem .5rem;
  border-radius: 4px;
  font-weight: 700;
}

/* Requirements intake */
.req-msg-box {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-size: .85rem;
  white-space: pre-wrap;
}

/* Negotiation timeline */
.neg-round {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.neg-round:last-child { border-bottom: none; }
.neg-round-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.neg-round-num.outgoing { background: var(--brand); color: #fff; }
.neg-round-num.incoming { background: var(--warn-light, #78350f44); color: var(--yellow); }

/* Document exchange log */
.doc-exchange-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.doc-exchange-arrow { color: var(--muted); font-size: 1.1rem; }