/* =====================================================================
   MAK Overseas — Client Portal
   Brand tokens carried over from the public site so the portal reads as
   the same company: cyan #00AEEF + red #E31F25, Playfair + Roboto.
   ===================================================================== */
:root{
  --brand:#00AEEF; --brand-600:#0093CC; --brand-700:#0079A8;
  --accent:#E31F25; --accent-600:#C4171C;
  --ink:#0A1B29; --ink-2:#12314A; --body:#48606F; --muted:#7B8C99;
  --line:#E3EAEF; --line-2:#D2DDE5;
  --bg:#FFFFFF; --surface:#F5F9FC; --flax:#F3EADA;
  --card:#FFFFFF;            /* panels, cards, inputs, modals */
  --on-brand:#FFFFFF;        /* text sitting on a brand / accent fill */
  --on-solid:#FFFFFF;        /* text sitting on the --ink fill */
  --brand-wash:#E1F4FD;      /* tinted chips and pills */
  --danger-wash:#FCE8E9; --danger-line:#F6C9CB; --danger-ink:#9B1419;
  --ok-line:#BFE5D6; --info-line:#B8E3F7; --warn-line:#F3DDB8;
  --drop-hover:#F2FBFF;
  --veil:rgba(255,255,255,.94);   /* sticky bars over scrolling content */
  --badge-bg:#E31F25; --badge-fg:#FFFFFF;

  /* The sign-in hero is a branded dark panel in BOTH themes, so its colours
     are fixed here and deliberately NOT redefined in the dark blocks below.
     Building it from --ink would flip it light while its text stayed white. */
  --hero-from:#0A1B29; --hero-mid:#12314A; --hero-to:#0B3D57;
  --hero-fg:#FFFFFF; --hero-body:#B9CEDB; --hero-point:#D6E5EE; --hero-foot:#7E9BAC;
  --ok:#12805C; --ok-bg:#E4F5EE;
  --warn:#B26A00; --warn-bg:#FDF1DF;
  --idle:#8496A3; --idle-bg:#EFF3F6;

  --radius:14px; --radius-lg:22px; --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(10,27,41,.06), 0 2px 8px rgba(10,27,41,.05);
  --shadow:0 4px 12px rgba(10,27,41,.07), 0 18px 40px -18px rgba(10,27,41,.25);
  --shadow-lg:0 10px 30px rgba(10,27,41,.10), 0 40px 80px -40px rgba(10,27,41,.45);
  --f-display:"Playfair Display", Georgia, serif;
  --f-body:"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--body);
  font-family:var(--f-body); font-size:15px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display); color:var(--ink); font-weight:600;
  line-height:1.2; letter-spacing:-.01em; margin:0 0 .4em}
h1{font-size:1.9rem} h2{font-size:1.4rem} h3{font-size:1.12rem} h4{font-size:1rem}
p{margin:0 0 .8em}
a{color:var(--brand-700); text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%; height:auto; display:block}
ul,ol{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset:2px; border-radius:6px;
}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* ------------------------------------------------------------- buttons */
.btn{
  --btn-bg:var(--brand); --btn-fg:var(--on-brand);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--btn-bg); color:var(--btn-fg); font-weight:500; font-size:.92rem;
  padding:11px 20px; border:1px solid transparent; border-radius:100px;
  cursor:pointer; white-space:nowrap; transition:transform .18s, background .18s, box-shadow .18s;
}
.btn:hover:not(:disabled){transform:translateY(-1px); background:var(--brand-600); color:var(--on-brand)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover:not(:disabled){background:var(--ink); color:var(--on-solid); border-color:var(--ink)}
.btn-soft{background:var(--card); color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow-sm)}
.btn-soft:hover:not(:disabled){background:var(--surface); color:var(--ink)}
.btn-danger{background:var(--accent)}
.btn-danger:hover:not(:disabled){background:var(--accent-600)}
.btn-sm{padding:7px 14px; font-size:.84rem}
.btn-block{width:100%}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.linkish{background:none;border:0;padding:0;color:var(--brand-700);cursor:pointer;
  font-size:.88rem;text-decoration:underline}
.linkish:hover{color:var(--accent)}

/* -------------------------------------------------------------- fields */
.field{margin-bottom:14px}
.field > label,.lbl{
  display:block; font-size:.74rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.input,input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],input[type=url],select,textarea{
  width:100%; background:var(--card); border:1px solid var(--line-2);
  border-radius:var(--radius-sm); padding:10px 12px; font-size:.93rem; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
textarea{min-height:74px; resize:vertical; line-height:1.5}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237B8C99' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px;
  padding-right:32px; cursor:pointer}
.input:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent);
  outline:none}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:0 14px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:0 14px}
.grid-auto{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:0 14px}
@media (max-width:720px){.grid-2,.grid-3,.grid-auto{grid-template-columns:1fr}}

/* --------------------------------------------------------------- cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
.card-pad{padding:20px 22px}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 22px; border-bottom:1px solid var(--line)}
.card-head h2,.card-head h3{margin:0}

/* --------------------------------------------------------------- pills */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:.73rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:100px;
  background:var(--idle-bg); color:var(--idle)}
.pill-done{background:var(--ok-bg); color:var(--ok)}
.pill-active{background:var(--brand-wash); color:var(--brand-700)}
.pill-pending{background:var(--idle-bg); color:var(--idle)}
.pill-warn{background:var(--warn-bg); color:var(--warn)}
.pill-danger{background:var(--danger-wash); color:var(--accent-600)}
.pill-brand{background:var(--brand-wash); color:var(--brand-700)}

/* ------------------------------------------------------------ progress */
.bar{height:7px; background:var(--line); border-radius:100px; overflow:hidden}
.bar > i{display:block; height:100%; border-radius:100px;
  background:linear-gradient(90deg,var(--brand),var(--brand-700)); transition:width .5s ease}
.bar-lg{height:10px}

/* ============================ AUTH SCREEN ============================ */
.auth{min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr}
@media (max-width:900px){.auth{grid-template-columns:1fr}}
.auth-brand{
  position:relative;
  background:linear-gradient(160deg,var(--hero-from) 0%,var(--hero-mid) 55%,var(--hero-to) 100%);
  color:var(--hero-fg); padding:56px clamp(28px,5vw,64px); display:flex; flex-direction:column;
  justify-content:space-between; overflow:hidden;
}
@media (max-width:900px){.auth-brand{padding:32px 24px; min-height:auto}}
.auth-brand::after{content:""; position:absolute; inset:auto -120px -180px auto; width:460px;
  height:460px; border-radius:50%; background:radial-gradient(circle,rgba(0,174,239,.34),transparent 68%)}
.auth-brand > *{position:relative; z-index:1}
.auth-logo{display:flex; align-items:center; gap:12px}
.auth-logo img{width:44px; height:44px}
.auth-logo b{font-family:var(--f-display); font-size:1.3rem; letter-spacing:.02em; color:var(--hero-fg)}
.auth-logo span{display:block; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brand); font-weight:500}
.auth-brand h1{color:var(--hero-fg); font-size:clamp(1.7rem,1.1rem+1.8vw,2.5rem); margin:36px 0 14px; max-width:15ch}
.auth-brand p{color:var(--hero-body); max-width:44ch; font-weight:300}
.auth-points{margin-top:26px; display:grid; gap:12px}
.auth-points li{display:flex; gap:11px; align-items:flex-start; color:var(--hero-point); font-size:.9rem; font-weight:300}
.auth-points svg{flex:none; width:19px; height:19px; margin-top:2px; stroke:var(--brand);
  fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.auth-foot{margin-top:40px; font-size:.8rem; color:var(--hero-foot)}
.auth-foot a{color:var(--hero-body)}
.auth-panel{display:flex; align-items:center; justify-content:center; padding:40px 24px; background:var(--bg)}
.auth-box{width:100%; max-width:400px}
.tabs{display:flex; gap:4px; background:var(--surface); border:1px solid var(--line);
  padding:4px; border-radius:100px; margin-bottom:26px}
.tabs button{flex:1; background:none; border:0; padding:9px 12px; border-radius:100px;
  font-size:.9rem; font-weight:500; color:var(--body); cursor:pointer; transition:.18s}
.tabs button[aria-selected=true]{background:var(--ink); color:var(--on-solid); box-shadow:var(--shadow-sm)}

/* ============================= APP SHELL ============================= */
.topbar{position:sticky; top:0; z-index:60; background:var(--veil);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.topbar-in{max-width:1240px; margin-inline:auto; padding:0 clamp(16px,3vw,28px);
  height:64px; display:flex; align-items:center; gap:18px}
.tb-brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.tb-brand img{width:34px; height:34px}
.tb-brand b{font-family:var(--f-display); color:var(--ink); font-size:1.05rem; line-height:1}
.tb-brand span{display:block; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brand-700); font-weight:600}
.tb-nav{display:flex; gap:2px}
.tb-nav button{background:none; border:0; padding:8px 14px; border-radius:100px; cursor:pointer;
  font-size:.9rem; font-weight:500; color:var(--body); transition:.16s}
.tb-nav button:hover{background:var(--surface); color:var(--ink)}
.tb-nav button[aria-current=page]{background:var(--ink); color:var(--on-solid)}
@media (max-width:760px){
  .topbar-in{height:auto; flex-wrap:wrap; padding-block:10px; gap:10px}
  .tb-nav{order:3; width:100%; overflow-x:auto; padding-bottom:2px}
}
.who{display:flex; align-items:center; gap:10px}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--on-solid);
  display:grid; place-items:center; font-size:.8rem; font-weight:600; flex:none}
.who-txt{line-height:1.25}
.who-txt b{display:block; font-size:.85rem; color:var(--ink); font-weight:600}
.who-txt span{font-size:.72rem; color:var(--muted)}
@media (max-width:560px){.who-txt{display:none}}
.page{max-width:1240px; margin-inline:auto; padding:26px clamp(16px,3vw,28px) 72px}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:20px}
.page-head p{margin:0; color:var(--muted); font-size:.92rem}
.kicker{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-700); margin-bottom:4px}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.toolbar .input,.toolbar select{width:auto; min-width:150px}
.search{flex:1 1 210px; max-width:330px}

/* --------------------------------------------------------- order cards */
.order-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px}
.order-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; cursor:pointer; transition:.2s; text-align:left; width:100%; font:inherit;
  box-shadow:var(--shadow-sm)}
.order-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2)}
.oc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px}
.oc-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.94rem;
  font-weight:600; color:var(--ink); letter-spacing:.02em}
.oc-title{color:var(--ink); font-weight:500; margin:0 0 3px; font-size:1rem}
.oc-meta{font-size:.83rem; color:var(--muted); margin-bottom:14px}
.oc-prog{display:flex; align-items:center; justify-content:space-between; font-size:.8rem;
  margin-bottom:6px}
.oc-prog b{color:var(--ink)}
.oc-foot{display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:.82rem}
.dots{display:flex; gap:4px}
.dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2)}
.dots i.done{background:var(--brand)}
.dots i.active{background:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 26%,transparent)}

/* ----------------------------------------------------------- timeline */
.stage-list{display:grid; gap:12px}
.stage{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:border-color .2s, box-shadow .2s}
.stage.is-open{border-color:var(--line-2); box-shadow:var(--shadow-sm)}
.stage-btn{width:100%; display:flex; align-items:center; gap:14px; padding:15px 18px;
  background:none; border:0; cursor:pointer; text-align:left; font:inherit}
.stage-btn:hover{background:var(--surface)}
.st-mark{position:relative; flex:none; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:.9rem;
  font-family:var(--f-display); background:var(--idle-bg); color:var(--idle);
  border:2px solid transparent}
.stage[data-state=done] .st-mark{background:var(--brand); color:var(--on-brand)}
.stage[data-state=active] .st-mark{background:var(--card); color:var(--brand-700); border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.st-mark svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round}
.st-body{flex:1; min-width:0}
.st-body h3{margin:0; font-size:1rem; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.st-body p{margin:1px 0 0; font-size:.83rem; color:var(--muted)}
.st-right{display:flex; align-items:center; gap:10px; flex:none}
.chev{width:17px; height:17px; stroke:var(--muted); fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .22s}
.stage.is-open .chev{transform:rotate(180deg)}
.stage-panel{border-top:1px solid var(--line); padding:18px; background:var(--surface)}
.clip{display:inline-flex; align-items:center; gap:4px; font-size:.78rem; color:var(--muted);
  font-weight:500}
.clip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* stage read-only detail rows */
.dl{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:13px 18px;
  margin-bottom:4px}
.dl div{min-width:0}
.dl dt{font-size:.71rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2px}
.dl dd{margin:0; color:var(--ink); font-size:.93rem; word-break:break-word}
.ms-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.ms{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:500;
  padding:6px 13px; border-radius:100px; background:var(--card); border:1px solid var(--line-2);
  color:var(--muted)}
.ms.on{background:var(--ok-bg); border-color:transparent; color:var(--ok)}
.ms svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round}
.note-box{background:var(--flax); border-radius:var(--radius-sm); padding:11px 14px;
  font-size:.9rem; color:var(--ink-2); margin:12px 0}

/* -------------------------------------------------------- attachments */
.att-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:16px 0 9px; padding-top:14px; border-top:1px dashed var(--line-2)}
.att-head h4{margin:0; font-size:.79rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-family:var(--f-body); font-weight:700}
.att-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px}
.att{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; transition:.18s}
.att:hover{border-color:var(--brand); box-shadow:var(--shadow-sm)}
.att a.att-main{display:block; color:inherit}
.att-thumb{aspect-ratio:4/3; background:var(--surface); display:grid; place-items:center;
  overflow:hidden; border-bottom:1px solid var(--line)}
.att-thumb img{width:100%; height:100%; object-fit:cover}
.att-thumb svg{width:32px; height:32px; stroke:var(--muted); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.att-meta{padding:8px 10px}
.att-meta b{display:block; font-size:.79rem; color:var(--ink); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.att-meta span{font-size:.71rem; color:var(--muted)}
.att-del{position:absolute; top:6px; right:6px; width:25px; height:25px; border-radius:50%;
  background:var(--veil); border:1px solid var(--line-2); cursor:pointer;
  display:grid; place-items:center; opacity:0; transition:.15s; padding:0}
.att:hover .att-del{opacity:1}
.att-del:hover{background:var(--accent); border-color:var(--accent)}
.att-del svg{width:12px;height:12px;stroke:var(--body);fill:none;stroke-width:2.4;stroke-linecap:round}
.att-del:hover svg{stroke:var(--on-brand)}

.drop{border:1.5px dashed var(--line-2); border-radius:var(--radius-sm); background:var(--card);
  padding:16px; text-align:center; cursor:pointer; transition:.18s; display:block}
.drop:hover,.drop.over{border-color:var(--brand); background:var(--drop-hover)}
.drop svg{width:22px; height:22px; stroke:var(--brand); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; margin:0 auto 5px}
.drop b{display:block; font-size:.87rem; color:var(--ink); font-weight:500}
.drop span{font-size:.76rem; color:var(--muted)}

/* -------------------------------------------------------------- table */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.tbl{width:100%; border-collapse:collapse; font-size:.88rem; min-width:640px}
table.tbl th{text-align:left; font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); padding:11px 13px; border-bottom:1px solid var(--line);
  white-space:nowrap; background:var(--surface); position:sticky; top:0}
table.tbl td{padding:11px 13px; border-bottom:1px solid var(--line); color:var(--ink);
  vertical-align:middle}
table.tbl tbody tr:hover{background:var(--surface)}
table.tbl tbody tr:last-child td{border-bottom:0}
.stage-cells{display:flex; gap:3px}
.sc{width:20px; height:20px; border-radius:5px; display:grid; place-items:center;
  font-size:.62rem; font-weight:700; background:var(--idle-bg); color:var(--idle)}
.sc.done{background:var(--brand); color:var(--on-brand)}
.sc.active{background:var(--brand-wash); color:var(--brand-700); box-shadow:inset 0 0 0 1.5px var(--brand)}

/* --------------------------------------------------------------- misc */
.empty{text-align:center; padding:56px 22px; color:var(--muted)}
.empty svg{width:44px; height:44px; stroke:var(--line-2); fill:none; stroke-width:1.5;
  margin:0 auto 14px; stroke-linecap:round; stroke-linejoin:round}
.empty h3{color:var(--ink)}
.msg{padding:11px 14px; border-radius:var(--radius-sm); font-size:.88rem; margin-bottom:14px}
.msg-err{background:var(--danger-wash); color:var(--danger-ink); border:1px solid var(--danger-line)}
.msg-ok{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line)}
.msg-info{background:var(--brand-wash); color:var(--brand-700); border:1px solid var(--info-line)}
.msg-warn{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line)}

.toast-wrap{position:fixed; right:18px; bottom:18px; z-index:200; display:grid; gap:9px;
  max-width:min(370px,calc(100vw - 36px))}
.toast{background:var(--ink); color:var(--on-solid); padding:12px 16px; border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); font-size:.88rem; animation:slidein .26s ease}
.toast.ok{background:var(--ok)} .toast.err{background:var(--accent-600)}
@keyframes slidein{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

.modal-back{position:fixed; inset:0; background:rgba(10,27,41,.55); z-index:150;
  display:grid; place-items:center; padding:20px; animation:fade .18s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:520px; max-height:90vh; overflow:auto}
.modal-lg{max-width:820px}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); z-index:2}
.modal-head h2{margin:0; font-size:1.15rem}
.modal-body{padding:20px 22px}
.modal-foot{display:flex; justify-content:flex-end; gap:9px; padding:15px 22px;
  border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--card)}
.x{background:none; border:0; cursor:pointer; padding:5px; line-height:0; border-radius:6px}
.x:hover{background:var(--surface)}
.x svg{width:19px; height:19px; stroke:var(--body); fill:none; stroke-width:2.2; stroke-linecap:round}

.spin{width:19px; height:19px; border:2.4px solid var(--line-2); border-top-color:var(--brand);
  border-radius:50%; animation:spin .7s linear infinite; margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{padding:56px; text-align:center}

.code-box{display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--on-solid);
  padding:13px 16px; border-radius:var(--radius-sm); font-family:ui-monospace,Menlo,monospace;
  font-size:1.02rem; letter-spacing:.05em; margin:12px 0; word-break:break-all}
.code-box button{margin-left:auto; flex:none}


/* =====================================================================
   Dark theme.

   Three states, not two: an explicit choice stamps data-theme on <html>,
   while the default "system" setting stamps nothing and is decided purely
   by prefers-color-scheme. Tokens are redefined in both places so either
   route resolves, and components only ever read the tokens.
   ===================================================================== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  /* Cyan is lifted and de-saturated slightly so it holds up on a dark
     ground; the ink/solid pair inverts so anything that sat as white-on-navy
     becomes navy-on-pale rather than disappearing. */
  --brand:#38C0F0; --brand-600:#5ACCF4; --brand-700:#8BDCF8;
  --accent:#FF6B70; --accent-600:#FF8A8E;

  --ink:#E9F2F8; --ink-2:#C5D9E5; --body:#A6BECC; --muted:#7C94A3;
  --line:#1E3341; --line-2:#2B4555;

  --bg:#0D1A23; --surface:#091319; --flax:#2A2214;
  --card:#101F2A;
  --on-brand:#062430;
  --on-solid:#0D1A23;
  --brand-wash:#0E2E3D;
  --danger-wash:#3A1618; --danger-line:#5C2427; --danger-ink:#FFB3B6;
  --ok-line:#1B5241; --info-line:#1B4256; --warn-line:#5A421A;
  --drop-hover:#0F2A38;
  --veil:rgba(16,31,42,.94);
  --badge-bg:#C8262C; --badge-fg:#FFFFFF;

  --ok:#4FD0A1; --ok-bg:#0D3227;
  --warn:#E9A441; --warn-bg:#32250E;
  --idle:#8398A6; --idle-bg:#16242E;

  --shadow-sm:0 1px 2px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.24);
  --shadow:0 4px 12px rgba(0,0,0,.34), 0 18px 40px -18px rgba(0,0,0,.6);
  --shadow-lg:0 10px 30px rgba(0,0,0,.42), 0 40px 80px -40px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  /* Cyan is lifted and de-saturated slightly so it holds up on a dark
     ground; the ink/solid pair inverts so anything that sat as white-on-navy
     becomes navy-on-pale rather than disappearing. */
  --brand:#38C0F0; --brand-600:#5ACCF4; --brand-700:#8BDCF8;
  --accent:#FF6B70; --accent-600:#FF8A8E;

  --ink:#E9F2F8; --ink-2:#C5D9E5; --body:#A6BECC; --muted:#7C94A3;
  --line:#1E3341; --line-2:#2B4555;

  --bg:#0D1A23; --surface:#091319; --flax:#2A2214;
  --card:#101F2A;
  --on-brand:#062430;
  --on-solid:#0D1A23;
  --brand-wash:#0E2E3D;
  --danger-wash:#3A1618; --danger-line:#5C2427; --danger-ink:#FFB3B6;
  --ok-line:#1B5241; --info-line:#1B4256; --warn-line:#5A421A;
  --drop-hover:#0F2A38;
  --veil:rgba(16,31,42,.94);
  --badge-bg:#C8262C; --badge-fg:#FFFFFF;

  --ok:#4FD0A1; --ok-bg:#0D3227;
  --warn:#E9A441; --warn-bg:#32250E;
  --idle:#8398A6; --idle-bg:#16242E;

  --shadow-sm:0 1px 2px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.24);
  --shadow:0 4px 12px rgba(0,0,0,.34), 0 18px 40px -18px rgba(0,0,0,.6);
  --shadow-lg:0 10px 30px rgba(0,0,0,.42), 0 40px 80px -40px rgba(0,0,0,.8);
}

/* The theme toggle itself */
.theme-btn{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  background:transparent; border:1px solid var(--line-2); border-radius:50%;
  cursor:pointer; color:var(--body); transition:background .16s, color .16s, border-color .16s;
}
.theme-btn:hover{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
.theme-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.theme-btn .i-sun{display:none}
.theme-btn .i-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:none}
}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-moon{display:block}

@media print{
  .topbar,.toolbar,.btn,.no-print{display:none !important}
  body{background:#fff; font-size:11px}
  .page{padding:0; max-width:none}
  .card{box-shadow:none; border-color:#ccc; break-inside:avoid}
  table.tbl{min-width:0; font-size:10px}
  table.tbl th{background:#f2f2f2 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .sc{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* ---------------------------------------------------- unread badge */
.badge{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  margin-inline-start:6px; border-radius:100px;
  background:var(--badge-bg); color:var(--badge-fg);
  font-size:.68rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
}
.tb-nav button[aria-current=page] .badge{background:var(--on-solid); color:var(--ink)}

/* ---------------------------------------------------- notifications */
.notif-list{display:grid; gap:10px}
.notif{
  display:flex; align-items:flex-start; gap:14px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:15px 18px;
}
.notif.is-unread{border-color:color-mix(in srgb, var(--brand) 45%, var(--line))}
.notif-main{flex:1; min-width:0}
.notif h3{margin:0 0 3px; font-size:1rem; display:flex; align-items:center; gap:8px}
.notif.is-unread h3::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); flex:none;
}
.notif p{margin:0 0 5px; font-size:.9rem; white-space:pre-line}

/* ------------------------------------------- repeatable row tables */
.rows-head{
  display:flex; align-items:center; gap:8px; margin:14px 0 7px;
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
table.tbl-rows{min-width:480px; font-size:.86rem; background:var(--card)}
table.tbl-rows th{position:static}

/* ------------------------------------------ language + theme controls */
.io-controls{display:flex; align-items:center; gap:8px; flex:none}
.auth-box > .io-controls{justify-content:flex-end; margin-bottom:18px}
.lang-switch{display:inline-flex; background:var(--surface); border:1px solid var(--line);
  border-radius:100px; padding:3px; gap:2px}
.lang-switch button{background:none; border:0; padding:5px 11px; border-radius:100px;
  font-size:.8rem; font-weight:500; color:var(--muted); cursor:pointer; transition:.15s;
  font-family:var(--f-body)}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button[aria-pressed=true]{background:var(--ink); color:var(--on-solid)}
@media (max-width:560px){.lang-switch button{padding:5px 8px; font-size:.75rem}}

/* =====================================================================
   Print provenance stamp
   Every printed sheet carries a server-issued serial, the moment it was
   printed and who printed it. Fixed positioning is what makes it repeat
   on every page; the page margin below reserves the strip it sits in so
   it can never overlap the content.
   ===================================================================== */
.print-stamp{display:none}
@media print{
  @page{margin:15mm 14mm}

  /*
   * A fixed element in print anchors to the page area -- the box inside the
   * @page margins -- not to the paper edge. Offsetting the stamp from the
   * right therefore places it over the content, not beside it. The only way
   * to keep them apart is to reserve a strip the text cannot enter, and that
   * strip is only worth losing when a stamp is actually being printed.
   */
  body.has-stamp{padding-right:12mm}

  .print-stamp{
    display:block; position:fixed; right:0; top:50%;
    transform:translateY(-50%);
    writing-mode:vertical-rl; text-orientation:mixed;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:6pt; line-height:1; letter-spacing:.14em;
    color:#7B8C99; white-space:nowrap; pointer-events:none;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .print-stamp b{font-weight:600; color:#48606F}
}

/* =====================================================================
   Stage rail
   -----------------------------------------------------------------
   Icons above a track with a tick per stage, in the manner of a
   shipping progress strip. A percentage says how far; the icons say
   what is actually happening, which is the question a buyer asks.

   Icon colour is carried by three tokens rather than baked into the
   SVG, so one drawing serves done / current / pending in both themes.
   ===================================================================== */
.track{display:flex; flex-direction:column; gap:9px}

.track-strip{position:relative}

.track-icons{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  align-items:end; gap:2px; margin-bottom:9px;
}
.stop{
  --ic-p:var(--idle); --ic-a:var(--line-2); --ic-n:var(--card);
  display:grid; place-items:center; gap:4px;
  padding:0; background:none; border:0; min-width:0;
  transition:transform .2s ease;
}
.stop .stage-ic{
  width:100%; max-width:30px; height:auto; aspect-ratio:1;
  display:block; overflow:visible;
}
.stage-ic .p{fill:var(--ic-p)}
.stage-ic .a{fill:var(--ic-a)}
.stage-ic .n{fill:var(--ic-n)}
.stage-ic .s{fill:none; stroke:var(--ic-n); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.stage-ic .s2{fill:none; stroke:var(--ic-p); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}

.stop.done{--ic-p:var(--brand); --ic-a:var(--accent)}
.stop.active{--ic-p:var(--brand); --ic-a:var(--accent); transform:translateY(-2px)}
.stop.active .stage-ic{filter:drop-shadow(0 3px 6px color-mix(in srgb,var(--brand) 34%,transparent))}

/* the track itself */
.track-line{position:relative; height:4px; background:var(--line);
  border-radius:100px; margin:0 2px}
.track-line > i{
  position:absolute; inset-block:0; inset-inline-start:0;
  border-radius:100px; background:linear-gradient(90deg,var(--brand-700),var(--brand));
  transition:width .55s cubic-bezier(.4,0,.2,1);
}
.track-ticks{
  position:absolute; inset-block-start:-3px; inset-inline:0; height:10px;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px;
  pointer-events:none;
}
.track-ticks span{display:grid; place-items:center}
.track-ticks span::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:var(--card); box-shadow:inset 0 0 0 2.5px var(--line);
  transition:box-shadow .3s ease, background .3s ease;
}
.track-ticks span.done::before{background:var(--brand); box-shadow:inset 0 0 0 2.5px var(--brand)}
.track-ticks span.active::before{
  background:var(--card); box-shadow:inset 0 0 0 3px var(--brand),
    0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);
}

.track-foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:.83rem; color:var(--muted);
}
.track-foot b{color:var(--ink); font-weight:500}
.track-pct{font-family:var(--f-display); font-size:1.35rem; font-weight:700;
  color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums}

/* larger, on the order page */
.track-lg .stop .stage-ic{max-width:38px}
.track-lg .track-line{height:5px}
.track-lg .track-ticks{inset-block-start:-3.5px; height:12px}
.track-lg .track-ticks span::before{width:12px; height:12px}

/* compact, on the order cards -- icons stay, labels do not */
.track-sm{gap:7px}
.track-sm .stop .stage-ic{max-width:19px}
.track-sm .track-icons{margin-bottom:7px; gap:1px}
.track-sm .track-line{height:3px}
.track-sm .track-ticks{inset-block-start:-2.5px; height:8px}
.track-sm .track-ticks span::before{width:8px; height:8px; box-shadow:inset 0 0 0 2px var(--line)}
.track-sm .track-ticks span.done::before{box-shadow:inset 0 0 0 2px var(--brand)}
.track-sm .track-foot{font-size:.78rem}
.track-sm .track-pct{font-size:1.05rem}

@media (max-width:560px){
  .track-lg .stop .stage-ic{max-width:26px}
  .stop .stage-ic{max-width:22px}
}

@media print{
  .stage-ic,.track-line,.track-line > i,.track-ticks span::before{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .stop.active .stage-ic{filter:none}
}

/* app version on the sign-in screen */
.version{
  display:block; margin-top:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.7rem; letter-spacing:.08em; color:#5C7688;
}
.auth-panel .version{color:var(--muted)}

/* fallback mark when a stage has no icon yet */
.stage-ic-text text{fill:var(--ic-n)}

/* =====================================================================
   Order sheet — printing one shipment
   -----------------------------------------------------------------
   The screen keeps stages collapsed; paper cannot be clicked open, so
   every panel is forced visible. Anything that only exists to be
   operated — upload zones, delete buttons, chevrons — is removed
   rather than printed as dead furniture.
   ===================================================================== */
@media print{
  /* every stage opens, whatever the reader had expanded */
  .stage-panel{display:block !important; background:transparent;
    border-top:1px solid #d8e2e8; padding:10px 0 4px}
  .stage{break-inside:avoid; border:1px solid #d8e2e8; margin-bottom:6px;
    box-shadow:none}
  .stage-btn{padding:8px 10px}
  .stage-list{gap:6px}

  /* operable furniture has no meaning on paper */
  .drop, .att-del, .chev, .io-controls, .who, .tb-nav,
  .stage-btn .clip, #btn-print-order{display:none !important}

  /* the header block reads as a document heading */
  .page-head{margin-bottom:8px}
  .oc-code, .kicker{font-size:9px; letter-spacing:.14em}
  #view h1{font-size:17pt; margin-bottom:2px}
  .card{border:1px solid #d8e2e8}
  .card-pad{padding:12px}

  /* the stage rail is the summary of the sheet, so keep it whole */
  .track{break-inside:avoid; margin-bottom:6px}
  .track-icons{margin-bottom:6px}
  .stop .stage-ic{max-width:20px}
  .track-pct{font-size:14pt}

  /* facts and stage fields in tighter columns */
  .dl{grid-template-columns:repeat(3,1fr); gap:7px 14px}
  .dl dt{font-size:7.5pt; letter-spacing:.06em}
  .dl dd{font-size:9pt}
  .ms-row{margin-bottom:8px}
  .ms{padding:3px 8px; font-size:8pt;
    -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .note-box{-webkit-print-color-adjust:exact; print-color-adjust:exact;
    padding:8px 10px; font-size:8.5pt}

  /* container rows keep their table shape */
  table.tbl-rows{font-size:8.5pt}
  .rows-head{margin:8px 0 4px; font-size:7.5pt}

  /* attachments become a named list; thumbnails say nothing in print */
  .att-grid{display:block !important}
  .att{display:block; border:0; margin:0 0 2px; break-inside:avoid}
  .att-thumb{display:none !important}
  .att-meta{padding:0}
  .att-meta b{display:inline; font-size:8.5pt; font-weight:400}
  .att-meta b::before{content:"• "}
  .att-meta span{font-size:7.5pt}
  .att-head{margin:8px 0 4px; padding-top:6px}
  .att-head h4{font-size:7.5pt}

  /* pills carry state, so they must actually print */
  .pill{-webkit-print-color-adjust:exact; print-color-adjust:exact;
    font-size:7.5pt; padding:2px 7px}
  .st-mark{-webkit-print-color-adjust:exact; print-color-adjust:exact;
    width:26px; height:26px; font-size:8pt}
  .st-body h3{font-size:10pt}
  .st-body p{font-size:8pt}
}

/* ---- supervisor assignment picker -----------------------------------
   A long client or order list has to stay inside the modal rather than
   pushing its buttons off the bottom of the screen, so the list scrolls
   on its own and the footer stays reachable. Colours come from the
   tokens above, so dark mode needs no separate rule. */
.check-list {
  max-height: 34vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 4px;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.35;
}
.check:hover { background: var(--card); }
.check + .check { border-top: 1px solid var(--line); }
.check input { margin: 2px 0 0; flex: none; }
.check span { min-width: 0; }

/* ---- pager -----------------------------------------------------------
   Sits under a table or grid: page size on the left, position in the
   middle, movement on the right. Wraps to two rows on a narrow screen
   rather than pushing the table sideways. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: .86rem;
  color: var(--body);
}
.pager-per { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pager-per select { padding: 4px 8px; font-size: .86rem; }
.pager-info { color: var(--muted); }
.pager-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}
.pager-page { color: var(--muted); }
.pager button[disabled] { opacity: .45; cursor: default; }

/* ---- view switch (cards / list) -------------------------------------- */
.viewswitch { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-sm);
              background: var(--surface); border: 1px solid var(--line); }
.viewswitch button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--body); font: inherit; font-size: .85rem;
}
.viewswitch button svg { width: 15px; height: 15px; }
.viewswitch button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }

/* Orders as rows rather than cards. */
.order-rows { display: flex; flex-direction: column; gap: 8px; }
.order-row {
  display: grid;
  grid-template-columns: minmax(120px,auto) minmax(0,1fr) minmax(140px,220px) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.order-row:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.order-row .or-code { font-weight: 700; font-size: .9rem; }
.order-row .or-title { font-weight: 600; }
.order-row .or-meta { color: var(--muted); font-size: .82rem; margin: 2px 0 0; }
.order-row .or-pct { font-weight: 700; font-size: .9rem; }
@media (max-width: 760px) {
  .order-row { grid-template-columns: 1fr; gap: 8px; }
}