:root{
  --bg:#f1f4f8; --panel:#ffffff; --ink:#16202c; --muted:#64748b;
  --line:#e3e8ee; --line-strong:#c9d3de;
  --brand:#0f4c81; --brand-dark:#0c3a63; --brand-soft:#e8f0f7;
  --green:#0f7038; --green-soft:#e3f4ea;
  --amber:#96590a; --amber-soft:#fef4d6;
  --slate:#44546a; --slate-soft:#eef2f6;
  --red:#b42318; --red-soft:#fdeceb;

  /* sidebar (dark navy — deeper than --brand so the app chrome recedes) */
  --nav-bg:#0a2f52; --nav-bg-2:#082744;
  --nav-ink:#b7cde2; --nav-ink-dim:#7b9dbd;
  --nav-hover:rgba(255,255,255,.07);
  --nav-w:250px;

  --radius:10px; --radius-sm:8px;
  --shadow-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.07);
  --shadow-2:0 4px 12px rgba(16,24,40,.07),0 2px 4px rgba(16,24,40,.04);
  --shadow-nav:2px 0 12px rgba(8,32,58,.18);
  --shadow:var(--shadow-1);           /* back-compat: existing rules use --shadow */
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --z-nav:60; --z-scrim:50; --z-topbar:40; --z-sticky:20;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .4rem; line-height:1.25; font-weight:650; letter-spacing:-.01em}
h1{font-size:1.4rem} h2{font-size:1.08rem} h3{font-size:.98rem}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.mono{font-family:var(--mono)}
/* tabular figures so numeric columns don't jitter */
.stat .num,.matrix td,.tag{font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}

.skip-link{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brand); color:#fff; padding:.6rem 1rem; border-radius:0 0 8px 0}
.skip-link:focus{left:0; text-decoration:none}

/* ======================= app shell ======================= */
.app-shell{display:grid; grid-template-columns:var(--nav-w) 1fr; min-height:100dvh}
.app-shell.no-nav{grid-template-columns:1fr}
.app-main{display:flex; flex-direction:column; min-width:0}   /* min-width:0 lets tables scroll */

/* ---------- sidebar ---------- */
.sidebar{
  display:flex; flex-direction:column; position:sticky; top:0; height:100dvh;
  background:linear-gradient(180deg,var(--nav-bg) 0%,var(--nav-bg-2) 100%);
  color:#fff; z-index:var(--z-nav); box-shadow:var(--shadow-nav);
}
.sidebar-brand{display:flex; align-items:center; gap:.65rem; padding:1.05rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.09)}
.sidebar-mark{display:grid; place-items:center; width:32px; height:32px; flex:none;
  border-radius:8px; background:rgba(255,255,255,.1); color:#8fc0e8}
.sidebar-mark svg{width:19px; height:19px}
.sidebar-brand-text{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.sidebar-brand-text strong{font-size:1rem; font-weight:800; letter-spacing:.02em}
.sidebar-brand-text small{font-size:.68rem; color:var(--nav-ink-dim); letter-spacing:.1em;
  text-transform:uppercase; font-weight:600}
.sidebar-close{display:none; margin-left:auto; width:40px; height:40px; padding:0;
  background:none; border:0; border-radius:8px; color:var(--nav-ink); cursor:pointer}
.sidebar-close svg{width:20px; height:20px}
.sidebar-close:hover{background:var(--nav-hover); color:#fff}

.sidebar-nav{flex:1; overflow-y:auto; padding:.9rem .6rem}
.nav-group{padding:.6rem .6rem .3rem; font-size:.67rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--nav-ink-dim)}
.nav-group:first-child{padding-top:0}
.nav-item{display:flex; align-items:center; gap:.7rem; padding:.6rem .65rem; margin-bottom:2px;
  min-height:42px; border-radius:8px; color:var(--nav-ink); font-size:.89rem; font-weight:550;
  position:relative; transition:background .15s, color .15s}
.nav-item:hover{background:var(--nav-hover); color:#fff; text-decoration:none}
/* active state uses a bar + weight + colour, never colour alone */
.nav-item.active{background:rgba(143,192,232,.16); color:#fff; font-weight:700}
.nav-item.active::before{content:""; position:absolute; left:-.6rem; top:50%; transform:translateY(-50%);
  width:3px; height:22px; border-radius:0 3px 3px 0; background:#8fc0e8}
.nav-ico{display:grid; place-items:center; width:20px; height:20px; flex:none}
.nav-ico svg{width:18px; height:18px}
.nav-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.sidebar-user{padding:.8rem; border-top:1px solid rgba(255,255,255,.09); background:rgba(0,0,0,.12)}
.su-row{display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; min-width:0}
.su-meta{min-width:0}
.su-name{font-size:.85rem; font-weight:650; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.su-role{font-size:.72rem; color:var(--nav-ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.su-actions{display:flex; gap:.35rem}
.su-actions a{display:flex; align-items:center; justify-content:center; gap:.35rem; flex:1;
  min-height:34px; padding:.3rem .4rem; border-radius:7px; font-size:.76rem; font-weight:600;
  color:var(--nav-ink); background:rgba(255,255,255,.06); transition:background .15s, color .15s}
.su-actions a:hover{background:rgba(255,255,255,.14); color:#fff; text-decoration:none}
.su-actions svg{width:14px; height:14px; flex:none}

.avatar{width:34px;height:34px;border-radius:9px;background:#8fc0e8; flex:none;
  display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#0a2f52}

/* ---------- mobile top bar + drawer ---------- */
.topbar{display:none; align-items:center; gap:.7rem; height:56px; padding:0 .9rem;
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:var(--z-topbar)}
.topbar-title{font-weight:700; font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar-brand{margin-left:auto; font-weight:800; color:var(--brand); font-size:.9rem}
.nav-toggle{display:grid; place-items:center; width:44px; height:44px; flex:none; padding:0;
  background:none; border:1px solid var(--line); border-radius:8px; color:var(--ink); cursor:pointer}
.nav-toggle svg{width:20px; height:20px}
.nav-toggle:hover{background:var(--slate-soft)}
.scrim{position:fixed; inset:0; background:rgba(8,32,58,.5); z-index:var(--z-scrim)}

.wrap{width:100%; max-width:1280px; margin:0 auto; padding:1.4rem; flex:1}
.wrap-wide{max-width:1500px}

.app-foot{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1rem 1.4rem; border-top:1px solid var(--line); color:var(--muted); font-size:.75rem}
.app-credit strong{color:var(--brand); font-weight:700}

@media(max-width:1023px){
  .app-shell{grid-template-columns:1fr}
  /* visibility:hidden (not just translateX) so the closed drawer is out of the
     accessibility tree — otherwise keyboard users can Tab into an off-screen menu. */
  .sidebar{position:fixed; top:0; left:0; width:min(84vw,var(--nav-w)); height:100dvh;
    transform:translateX(-100%); visibility:hidden;
    transition:transform .22s ease-out, visibility .22s linear}
  .sidebar.open{transform:none; visibility:visible}
  .sidebar-close{display:grid}
  .topbar{display:flex}
  .wrap{padding:1rem}
  /* 16px inputs on mobile: anything smaller makes iOS zoom on focus */
  input[type=text],input[type=password],input[type=email],input[type=number],
  input[type=date],select,textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .sidebar{transition:none}
}

/* panels / cards */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1); margin-bottom:1.1rem; overflow:hidden}
.panel-head{display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line); background:#fbfcfd}
.panel-head h2,.panel-head h3{margin:0}
.panel-head .spacer{flex:1}
/* overflow-x:auto because most templates drop a wide <table> straight into a
   panel-body with no .tbl-scroll wrapper. Without this, .panel's overflow:hidden
   clips the far columns and they become unreachable on narrow screens. */
.panel-body{padding:1.1rem; overflow-x:auto}
.panel-body.tight{padding:.65rem}

/* stat tiles */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.85rem; margin-bottom:1.1rem}
.stat{position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:.95rem 1.1rem; box-shadow:var(--shadow-1); overflow:hidden}
/* colour accent bar — the number's colour is reinforced, not the only signal */
.stat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--slate)}
.stat.brand::before{background:var(--brand)} .stat.green::before{background:var(--green)}
.stat.amber::before{background:var(--amber)} .stat.slate::before{background:var(--slate)}
.stat .num{font-size:1.85rem; font-weight:750; line-height:1; letter-spacing:-.02em}
.stat .lbl{color:var(--muted); font-size:.79rem; margin-top:.35rem; font-weight:550}
.stat.green .num{color:var(--green)} .stat.amber .num{color:var(--amber)}
.stat.brand .num{color:var(--brand)} .stat.slate .num{color:var(--slate)}

/* buttons — min-height 38px desktop, 44px touch (see the coarse-pointer rule below) */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; cursor:pointer;
  border:1px solid var(--line-strong); background:#fff; color:var(--ink);
  padding:.5rem .85rem; min-height:38px; border-radius:var(--radius-sm);
  font-size:.87rem; font-weight:600; font-family:inherit;
  transition:background .14s, border-color .14s, box-shadow .14s;
  text-decoration:none; line-height:1.1; box-shadow:var(--shadow-1)}
.btn:hover{background:#f8fafc; text-decoration:none; border-color:var(--slate)}
.btn:active{transform:translateY(1px)}
@media(pointer:coarse){ .btn{min-height:44px} }
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark); border-color:var(--brand-dark); color:#fff}
.btn-approve{background:var(--green); border-color:var(--green); color:#fff}
.btn-approve:hover{background:#0e6633; color:#fff}
.btn-danger{background:#fff; border-color:var(--red); color:var(--red)}
.btn-danger:hover{background:var(--red-soft)}
.btn-sm{padding:.28rem .55rem; font-size:.8rem}
.btn-ghost{border-color:transparent; background:transparent}
.btn-ghost:hover{background:#eef2f6}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-row{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}

/* badges */
.badge{display:inline-flex; align-items:center; gap:.3rem; padding:.16rem .55rem;
  border-radius:999px; font-size:.74rem; font-weight:650; border:1px solid transparent; white-space:nowrap}
.badge-draft{background:var(--slate-soft); color:var(--slate); border-color:#dbe2ea}
.badge-submitted{background:var(--amber-soft); color:var(--amber); border-color:#f3e3b3}
.badge-approved{background:var(--green-soft); color:var(--green); border-color:#c5e8d3}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge-role{background:var(--brand-soft); color:var(--brand-dark); border-color:#cfe0ee;
  font-weight:600; font-size:.72rem}

/* forms */
.field{margin-bottom:.75rem}
.field label{display:block; font-weight:600; font-size:.82rem; margin-bottom:.25rem; color:#374151}
.field .hint{color:var(--muted); font-size:.76rem; margin-top:.2rem}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],select,textarea{
  width:100%; padding:.5rem .6rem; border:1px solid var(--line-strong); border-radius:8px;
  font-size:.88rem; font-family:inherit; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
input[readonly]{background:#f3f4f6; color:var(--muted)}
textarea{resize:vertical; min-height:64px}
.grid{display:grid; gap:.75rem 1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* tables */
table.grid-table{width:100%; border-collapse:collapse; font-size:.86rem}
table.grid-table th,table.grid-table td{border:1px solid var(--line); padding:.55rem .65rem;
  text-align:left; vertical-align:middle}
table.grid-table thead th{background:#eef2f7; font-weight:700; color:#334155; font-size:.76rem;
  letter-spacing:.04em; text-transform:uppercase; position:sticky; top:0; z-index:2}
table.grid-table tbody tr:hover{background:#f6f9fc}
table.grid-table td input,table.grid-table td select{padding:.4rem .5rem; font-size:.83rem; min-height:36px}
.col-target{background:var(--brand-soft)!important}
/* wide tables scroll inside their own box — the page never scrolls sideways */
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
@media(max-width:1023px){
  .tbl-scroll{margin-inline:-.65rem; padding-inline:.65rem}
  table.grid-table{font-size:.84rem}
  table.grid-table thead th{position:static}   /* sticky + horizontal scroll misbehaves on mobile */
}

/* status matrix (dashboard) */
.matrix td, .matrix th{text-align:center; font-size:.78rem}
.matrix td.sm-cell{text-align:left; font-weight:600}
.cell-status{display:inline-block; width:100%; padding:.2rem .1rem; border-radius:6px; font-weight:650; font-size:.72rem}
.cell-draft{background:var(--slate-soft); color:var(--slate)}
.cell-submitted{background:var(--amber-soft); color:var(--amber)}
.cell-approved{background:var(--green-soft); color:var(--green)}

/* flash / alerts */
.alert{padding:.6rem .85rem; border-radius:8px; margin-bottom:.8rem; font-size:.86rem; border:1px solid transparent}
.alert-success{background:var(--green-soft); color:var(--green); border-color:#c5e8d3}
.alert-danger{background:var(--red-soft); color:var(--red); border-color:#f3c9c5}
.alert-warning{background:var(--amber-soft); color:var(--amber); border-color:#f3e3b3}
.alert-info{background:var(--brand-soft); color:var(--brand-dark); border-color:#cfe0ee}
.inline-msg{font-size:.8rem; font-weight:600}
.inline-msg.success{color:var(--green)} .inline-msg.danger{color:var(--red)}

/* section cards on detail page */
.section-card{scroll-margin-top:76px}
/* sidebar layout: nothing overlays the top on desktop, so stick to 0.
   On mobile the 56px topbar is sticky, so offset by exactly that. */
.section-nav{position:sticky; top:0; background:var(--bg); z-index:var(--z-sticky);
  padding:.6rem 0; display:flex; gap:.4rem; flex-wrap:wrap;
  border-bottom:1px solid var(--line); margin-bottom:1rem}
.section-nav a{display:inline-flex; align-items:center; min-height:36px;
  padding:.35rem .75rem; border-radius:7px; font-size:.83rem; font-weight:600;
  border:1px solid var(--line); background:#fff; color:var(--slate); box-shadow:var(--shadow-1)}
.section-nav a:hover{text-decoration:none; border-color:var(--brand); color:var(--brand)}
@media(max-width:1023px){
  .section-nav{top:56px}
  .section-card{scroll-margin-top:120px}
}

.step-card{border:1px solid var(--line); border-radius:9px; margin-bottom:.7rem; background:#fcfdfe}
.step-card.qad{background:var(--brand-soft); border-color:#cfe0ee}
.step-head{display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; border-bottom:1px solid var(--line)}
.step-head .order{width:26px;height:26px;border-radius:6px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.8rem;flex:none}
.step-card.qad .step-head .order{background:var(--slate)}
.step-body{padding:.7rem}

.readonly-val{padding:.5rem .6rem; background:#f8fafc; border:1px dashed var(--line-strong);
  border-radius:8px; min-height:36px; font-size:.88rem}
.readonly-val:empty::after{content:"—"; color:var(--muted)}

.kv{display:grid; grid-template-columns:190px 1fr; gap:.3rem .8rem}
.kv dt{color:var(--muted); font-weight:600; font-size:.82rem}
.kv dd{margin:0}

.lock-note{display:flex; align-items:center; gap:.5rem; background:var(--green-soft);
  color:var(--green); padding:.45rem .7rem; border-radius:8px; font-size:.82rem; font-weight:600}

/* ============================ login ============================ */
/* Split screen: product context on the left, focused form on the right. */
.auth{min-height:100dvh; display:grid; grid-template-columns:1.05fr .95fr; margin:0; max-width:none; padding:0}

/* --- left: brand / context panel --- */
.auth-brand{
  position:relative; display:flex; align-items:center; padding:3rem;
  background:linear-gradient(150deg,#0f4c81 0%,#0c3a63 55%,#092c4b 100%);
  color:#fff; overflow:hidden;
}
/* subtle woven-warp texture: a nod to the product, not decoration for its own sake */
.auth-brand::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.07;
  background-image:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 14px),
                   repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 14px);
}
.auth-brand-inner{position:relative; z-index:1; max-width:30rem}
.auth-logo{display:flex; align-items:center; gap:.7rem; margin-bottom:2.6rem}
.auth-logo svg{width:30px; height:30px; color:#8fc0e8; flex:none}
.auth-logo-name{font-size:1.15rem; font-weight:800; letter-spacing:.02em; line-height:1.1}
.auth-logo-sub{font-size:.74rem; color:#a8c8e2; letter-spacing:.09em; text-transform:uppercase; font-weight:600}

.auth-headline{font-size:1.95rem; line-height:1.25; font-weight:750; margin:0 0 .9rem; letter-spacing:-.015em; color:#fff}
.auth-lede{margin:0 0 2rem; color:#c3d8ea; font-size:.94rem; line-height:1.65; max-width:27rem}

.auth-flow{list-style:none; margin:0 0 2rem; padding:0; display:flex; flex-wrap:wrap; gap:.45rem}
.auth-flow li{display:flex; align-items:center; gap:.45rem; padding:.34rem .7rem .34rem .34rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:999px}
.auth-flow-n{display:grid; place-items:center; width:20px; height:20px; flex:none; border-radius:50%;
  background:#8fc0e8; color:#0c3a63; font-size:.7rem; font-weight:800}
.auth-flow-t{font-size:.79rem; font-weight:600; color:#e4eef7; white-space:nowrap}

.auth-trust{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.auth-trust li{display:flex; align-items:flex-start; gap:.6rem; font-size:.86rem; color:#c3d8ea; line-height:1.5}
.auth-trust svg{width:17px; height:17px; flex:none; margin-top:.12rem; color:#8fc0e8}

/* --- right: form panel --- */
.auth-panel{display:flex; flex-direction:column; justify-content:center;
  padding:3rem 2rem 1.4rem; background:var(--panel)}
.auth-card{width:100%; max-width:23rem; margin:auto}

.auth-mobile-brand{display:none; align-items:center; gap:.55rem; margin-bottom:1.6rem;
  color:var(--brand); font-size:1rem}
.auth-mobile-brand svg{width:24px; height:24px; flex:none}
.auth-mobile-brand strong{font-weight:800}

.auth-title{font-size:1.6rem; font-weight:750; margin:0 0 .35rem; color:var(--ink); letter-spacing:-.01em}
.auth-subtitle{margin:0 0 1.5rem; color:var(--muted); font-size:.88rem; line-height:1.55}

/* error alert: icon + text, never colour alone */
.auth-card .alert{display:flex; align-items:flex-start; gap:.5rem; font-weight:500}
.auth-card .alert svg{width:17px; height:17px; flex:none; margin-top:.1rem}

.auth-card .field{margin-bottom:1rem}
.auth-card .field label{font-size:.83rem; color:var(--ink); margin-bottom:.35rem}
.auth-card input[type=text],.auth-card input[type=password]{
  padding:.62rem .75rem; font-size:.92rem; min-height:44px; border-radius:8px;
  transition:border-color .15s, box-shadow .15s;
}
.field-err{color:var(--red); font-size:.79rem; font-weight:600; margin-top:.3rem}

/* password show/hide */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:3rem}
/* 44x44 minimum tap target (WCAG / Apple HIG) */
.pw-toggle{position:absolute; top:50%; right:2px; transform:translateY(-50%);
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  background:none; border:0; border-radius:7px; cursor:pointer; color:var(--muted);
  transition:color .15s, background .15s}
.pw-toggle:hover{color:var(--brand); background:var(--brand-soft)}
.pw-toggle:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
.pw-toggle svg{width:18px; height:18px}
.pw-toggle.is-on{color:var(--brand)}

.auth-remember{display:flex; align-items:center; gap:.5rem; cursor:pointer;
  margin:0 0 1.25rem; font-size:.85rem; color:var(--slate); user-select:none}
.auth-remember input{width:16px; height:16px; margin:0; accent-color:var(--brand); cursor:pointer}

.auth-submit{width:100%; justify-content:center; min-height:44px; font-size:.92rem; font-weight:650}
.auth-submit.is-loading{opacity:.75; cursor:progress}

.auth-help{margin:1.35rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line);
  color:var(--muted); font-size:.79rem; line-height:1.6}

.auth-foot{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  max-width:23rem; width:100%; margin:2rem auto 0; padding-top:.9rem;
  color:var(--muted); font-size:.74rem}
.auth-credit strong{color:var(--brand); font-weight:700}

/* --- responsive: below 900px the context panel folds into a header --- */
@media(max-width:900px){
  .auth{grid-template-columns:1fr; min-height:100dvh}
  .auth-brand{display:none}
  .auth-panel{padding:2rem 1.25rem 1.25rem; justify-content:flex-start}
  .auth-card{margin:2.5rem auto auto}
  .auth-mobile-brand{display:flex}
}
@media(max-width:1100px) and (min-width:901px){
  .auth-brand{padding:2.25rem}
  .auth-headline{font-size:1.65rem}
  .auth-trust li{font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){
  .auth-card input,.pw-toggle,.auth-submit{transition:none}
}

/* misc */
.hr{height:1px; background:var(--line); margin:1rem 0; border:0}
.toolbar{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem}
.toolbar .spacer{flex:1}
.pill-legend{display:flex; gap:.8rem; flex-wrap:wrap; font-size:.78rem; color:var(--muted); align-items:center}
.tag{font-family:var(--mono); font-size:.78rem; background:#f1f5f9; padding:.1rem .4rem; border-radius:5px}
.empty{padding:2rem; text-align:center; color:var(--muted)}
.htmx-indicator{opacity:0; transition:opacity .2s}
.htmx-request .htmx-indicator{opacity:1}
.htmx-request.htmx-indicator{opacity:1}

/* print — the TDS report is printed straight from the browser, so the whole
   app chrome (sidebar, topbar, footer) must vanish and the grid must collapse. */
@media print{
  .sidebar,.topbar,.scrim,.app-foot,.skip-link,
  .topnav,.section-nav,.toolbar,.no-print,.btn,.btn-row{display:none!important}
  .app-shell{display:block!important}
  .app-main{display:block!important}
  body{background:#fff; font-size:11px}
  .wrap{max-width:100%; padding:0}
  .panel{box-shadow:none; border:1px solid #999; break-inside:avoid; margin-bottom:.4rem; overflow:visible}
  .panel-head{background:#eee}
  table.grid-table{font-size:10px}
  table.grid-table th,table.grid-table td{padding:.2rem .3rem}
  table.grid-table thead th{position:static}
  .tbl-scroll,.panel-body{overflow:visible!important}
  .report-sheet{font-size:11px}
  a{color:#000; text-decoration:none}
}