/* ============================================================
   PrintDesk — Redesigned Design System v2
   Modern SaaS: Geist, cool neutrals, teal accent
   Drop into: web/static/style.css
   ============================================================ */

/* System font stack - no external dependencies, CSP-safe */

/* ── Palette ── */
:root {
  --navy-900:#0B1B33; --navy-800:#122845; --navy-700:#1B3460;
  --gold-600:#B8893B; --gold-500:#D4A24C; --gold-400:#E5BB6A;
  --paper:#F6F3EC; --paper-2:#ECE6D6; --ink:#0E1422;
}

/* ── Tokens ── */
:root {
  --bg:#F0F2F5; --card:#FFFFFF; --card-hover:#F6F7F9;
  --surface-2:#E8ECEF; --surface-3:#E0E5EA;
  --text:#0E1422; --text-2:#334155; --muted:#5F6B7A;
  --border:#E0E0E0; --border-2:#D0D0D0;
  --primary:#0B1B33; --primary-dim:#0B1B3318;
  --link:var(--primary); --link-hover:color-mix(in srgb,var(--primary) 80%,#000);
  --accent:#B8893B; --accent-dim:#B8893B14; --accent-mid:#B8893B38;
  --gold:#D4A24C; --gold-dim:#D4A24C15;
  --paper:#0E1422;
  --danger:#DC2626; --danger-dim:#DC262615;
  --warning:#D97706; --warning-dim:#D9770615;
  --success:#16A34A; --success-dim:#16A34A15;
  --info:#2563EB; --info-dim:#2563EB15;
  --input-bg:#FFFFFF; --input-border:#D8D0BE;
  --input-focus:#0B1F3A;
  --placeholder:#94a3b8;
  --accent-2:#B8860B; --accent-mid-2:#B8860B38;
  --accent-text:#ffffff;
  --sidebar-bg:#F8F9FA; --sidebar-text:#0E1422;
  --sidebar-muted:#5F6B7A;
  --sidebar-active:#0B1B33;
  --sidebar-active-bg:rgba(11,27,51,.08);
  --sidebar-hover-bg:#EFF2F5;
  --sidebar-border:#D5DAE1;
  --sidebar-pill-bg:var(--paper-2); --sidebar-pill-text:var(--navy-900); --sidebar-pill-border:#D8D0BE;
  --sidebar-w:228px; --sidebar-rail:60px;
  --font-sans:'Segoe UI','Trebuchet MS',system-ui,sans-serif;
  --font-mono:'SF Mono','Monaco','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;
  --radius:12px; --radius-lg:18px; --radius-xl:24px; --radius-2xl:28px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 2px 8px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.05);
  /* ── Liquid glass ── */
  --glass-bg:rgba(255,255,255,.5);
  --glass-bg-strong:rgba(255,255,255,.78);
  --glass-border:rgba(255,255,255,.55);
  --glass-inner-border:rgba(11,27,51,.08);
  --glass-highlight:linear-gradient(120deg,rgba(255,255,255,.5),rgba(255,255,255,0) 45%);
  --glass-shadow:0 8px 32px rgba(11,27,51,.10),inset 0 1px 0 rgba(255,255,255,.6);
  --blur-sm:8px; --blur-md:18px; --blur-lg:28px;
  --glass-saturate:180%;
  --card-glass:rgba(255,255,255,.55);
}

:root[data-theme="dark"] {
  --bg:#07101F; --card:#101B2D; --card-hover:#131f32;
  --surface-2:#0f1a2a; --surface-3:#151d2d; --bg-soft:#080D13;
  --text:#F6F3EC; --text-2:#d4c5b0; --muted:#A9B2C1;
  /* Neutral borders; gold is an accent, not the default frame color */
  --border:rgba(148,163,184,.18); --border-2:#223654;
  /* Primary buttons should be navy in dark mode (gold is reserved for accents) */
  --primary:#1B3460; --primary-dim:#1B346018;
  /* Links must remain readable in dark mode (e.g., KPI card actions) */
  --link:#93C5FD; --link-hover:#BFDBFE;
  --accent:#D4A24C; --accent-dim:#D4A24C14; --accent-mid:#D4A24C38;
  --gold:#D4A24C; --gold-dim:#D4A24C15;
  --danger:#F87171; --danger-dim:#F8717115;
  --warning:#F59E0B; --warning-dim:#F59E0B15;
  --success:#34D399; --success-dim:#34D39915;
  --info:#60A5FA; --info-dim:#60A5FA15;
  --input-bg:#0f1724; --input-border:#1f3a5a; --input-focus:#60a5fa;
  --placeholder:#7588a4;
  --accent-2:#D4AF37; --accent-mid-2:#D4AF3738;
  --accent-text:#0a0e1a;
  --sidebar-bg:#07101F; --sidebar-text:#E9EEF7;
  --sidebar-muted:#A9B2C1;
  /* Keep gold as a subtle active accent (border/pill), not as default text */
  --sidebar-active:#D4A24C;
  --sidebar-active-bg:rgba(212,162,76,.22);
  --sidebar-hover-bg:#0f1e34;
  --sidebar-border:#1a3152;
  --sidebar-pill-bg:var(--navy-800); --sidebar-pill-text:var(--paper); --sidebar-pill-border:rgba(229,187,106,.2);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow:0 4px 12px rgba(0,0,0,.4);
  /* ── Liquid glass (dark) ── */
  --glass-bg:rgba(16,27,45,.45);
  --glass-bg-strong:rgba(16,27,45,.75);
  --glass-border:rgba(148,163,184,.22);
  --glass-inner-border:rgba(148,163,184,.10);
  --glass-highlight:linear-gradient(120deg,rgba(255,255,255,.09),transparent 40%);
  --glass-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  --card-glass:rgba(16,27,45,.52);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:
  radial-gradient(1200px 600px at 115% -15%,color-mix(in srgb,var(--gold) 30%,transparent),transparent 60%),
  radial-gradient(1000px 720px at -20% 25%,color-mix(in srgb,var(--info) 22%,transparent),transparent 60%),
  radial-gradient(900px 600px at 45% 70%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 65%),
  radial-gradient(1100px 760px at 85% 115%,color-mix(in srgb,var(--success) 16%,transparent),transparent 60%),
  var(--bg);
  background-attachment:fixed;
  color:var(--text);font-family:'Segoe UI','Trebuchet MS',system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* ── Skip to content ── */
.skip-to-content{
  position:absolute;left:8px;top:-48px;z-index:10000;
  background:var(--primary,#4E79A7);color:#fff;
  padding:10px 16px;border-radius:8px;font-weight:700;font-size:13px;
  text-decoration:none;transition:top .15s ease;
}
.skip-to-content:focus{top:8px}

/* ── Liquid glass utilities ── */
.glass,.glass-strong{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--blur-md)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--blur-md)) saturate(var(--glass-saturate));
}
.glass-strong{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--blur-lg)) saturate(var(--glass-saturate));
}
.glass::before,.glass-strong::before{
  content:"";position:absolute;inset:0 0 auto 0;height:38%;
  background:var(--glass-highlight);
  border-radius:inherit;
  pointer-events:none;
}
/* No backdrop-filter support → solid surfaces */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass-strong,.card,.kpi-card,.due-card{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-transparency:reduce){
  .glass,.glass-strong,.card,.kpi-card,.due-card{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}
  .glass::before,.glass-strong::before,.card::before,.kpi-card::before,.due-card::before{display:none}
  :root{--card-glass:var(--card)}
}
a,a:visited{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.25;letter-spacing:-.01em}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem} h4{font-size:.9rem}
p{margin:0 0 .5rem}
.mono{font-family:var(--font-mono)}

/* ── App Shell ──
   Anonymous pre-auth pages only (login, public, password reset) — signed-in
   users always render inside the Liquid Glass shell (theme-appui.css). */
.app-shell{min-height:100vh;display:grid;grid-template-columns:1fr}
.app-main{min-width:0;background:var(--bg)}

/* ── Container ── */
.container{max-width:1160px;margin:1.5rem auto;padding:0 1.25rem 3rem;display:grid;gap:1rem;background:var(--bg)}

/* ── Cards (liquid glass) ── */
.card{position:relative;min-width:0;background:var(--card-glass);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:1.1rem;
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--blur-sm)) saturate(var(--glass-saturate));
  box-shadow:var(--glass-shadow);
  transition:box-shadow .25s,transform .25s,border-color .25s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:10%;max-height:26px;background:var(--glass-highlight);border-radius:inherit;opacity:.8;pointer-events:none}
.card:hover{box-shadow:0 14px 44px rgba(11,27,51,.16),inset 0 1px 0 var(--glass-border);transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 40%,var(--glass-border))}
:root[data-theme="dark"] .card:hover{box-shadow:0 14px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}

/* ── KPI ── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem}
.kpi-grid-5{grid-template-columns:repeat(5,1fr)}
.kpi-card{position:relative;border-radius:var(--radius-lg);border:1px solid var(--glass-border);padding:1rem;display:flex;flex-direction:column;gap:.4rem;background:var(--card-glass);min-height:120px;
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--blur-sm)) saturate(var(--glass-saturate));
  box-shadow:var(--glass-shadow);
  transition:border-color .25s,box-shadow .25s,transform .25s}
.kpi-card::before{content:"";position:absolute;inset:0 0 auto 0;height:28%;background:var(--glass-highlight);border-radius:inherit;opacity:.85;pointer-events:none}
.kpi-card:hover{transform:translateY(-2px)}
.kpi-card:hover{border-color:var(--border-2);box-shadow:var(--shadow)}
.kpi-label{margin:0;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi-value{margin:0;font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.kpi-link{font-size:.75rem;font-weight:600;color:var(--primary);margin-top:auto;text-decoration:none}
.kpi-link:hover{text-decoration:underline}
.kpi-indigo{border-top:2px solid oklch(58% 0.20 270)}
.kpi-cyan  {border-top:2px solid oklch(60% 0.16 210)}
.kpi-amber {border-top:2px solid var(--warning)}
.kpi-green {border-top:2px solid var(--success)}
.kpi-red   {border-top:2px solid var(--danger)}

/* ── Dashboard ── */
.dashboard-shell{padding:1.25rem}
.dashboard-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
.eyebrow{margin:0 0 .25rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.due-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.due-card{position:relative;border:1px solid var(--glass-border);border-top:2px solid color-mix(in srgb,var(--primary) 35%,var(--border));border-radius:var(--radius-lg);padding:1rem;background:var(--card-glass);display:flex;flex-direction:column;gap:.25rem;
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--blur-sm)) saturate(var(--glass-saturate));
  box-shadow:var(--glass-shadow);transition:box-shadow .25s,border-color .25s,transform .25s}
.due-card::before{content:"";position:absolute;inset:0 0 auto 0;height:28%;background:var(--glass-highlight);border-radius:inherit;opacity:.85;pointer-events:none}
.due-card:hover{transform:translateY(-2px)}
.due-card:hover{box-shadow:var(--shadow);border-color:var(--border-2)}
.due-card h3{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0}
.due-card p{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin:0}
.due-card a{font-size:.75rem;font-weight:600;margin-top:auto}
/* Legacy metric compat */
.metric h3{margin:0 0 .3rem;color:var(--muted);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.metric p{margin:0;font-size:1.65rem;font-weight:800;letter-spacing:-.02em}
.metric a{display:inline-block;margin-top:.35rem;font-size:.78rem;font-weight:600}
.metric-accent{border-left:2px solid var(--primary)}
.metric-accent2{border-left:2px solid var(--primary)}
.metric-warning{border-left:3px solid var(--warning)}
.metric-success{border-left:3px solid var(--success)}

/* ── Section heads ── */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.85rem;flex-wrap:wrap}
.section-title{margin:1rem 0 .6rem;font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* ── Buttons ── */
button{border:1px solid color-mix(in srgb,var(--primary) 55%,#000);border-radius:var(--radius);padding:.5rem .85rem;font:700 .82rem/1.4 var(--font-sans);background:var(--primary);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:background .12s,border-color .12s,box-shadow .12s;white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,42,.10)}
.btn-secondary,.link-btn{background:color-mix(in srgb,var(--card-glass) 80%,transparent);color:var(--text);border:1px solid var(--glass-border);border-radius:var(--radius);padding:.45rem .75rem;font:700 .82rem/1.4 var(--font-sans);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;box-shadow:inset 0 1px 0 var(--glass-border);transition:background .12s,border-color .12s,transform .12s,box-shadow .12s;white-space:nowrap}
.btn-danger{background:var(--danger);color:#fff;border:1px solid color-mix(in srgb,var(--danger) 60%,#000);box-shadow:0 1px 2px rgba(220,38,38,.18)}
.btn-gold,.btn-important{background:var(--gold);color:#0E1422;border:1px solid color-mix(in srgb,var(--gold) 55%,#000);box-shadow:0 1px 2px rgba(212,175,55,.18)}
.btn,.btn-primary{border:1px solid color-mix(in srgb,var(--primary) 55%,#000);border-radius:var(--radius);padding:.5rem .85rem;font:700 .82rem/1.4 var(--font-sans);background:var(--primary);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:background .12s,border-color .12s,box-shadow .12s,opacity .12s;white-space:nowrap}
.btn:disabled,.btn-primary:disabled{opacity:.6;cursor:not-allowed}
/* :hover only for real pointers (mouse/trackpad). On touch devices,
   tapping a button fires :hover with no matching "un-hover" event (no
   mouse ever leaves), so the hover fill sticks indefinitely - showing
   as an unrelated custom-styled button (e.g. any .uc2-btn/.appui-tab
   variant, which only sets its OWN background/text via a plain class)
   suddenly going dark, because a bare `button:hover` element+pseudo-
   class selector is MORE specific than a single custom class alone
   and wins regardless of source order. That's the actual mechanism
   behind the recurring "black button on tap" reports - not a
   compositing glitch, a stuck hover state that persists until the
   next tap lands anywhere else on the page. */
@media (hover: hover) {
  button:hover{background:color-mix(in srgb,var(--primary) 92%,#000);box-shadow:0 2px 8px rgba(15,23,42,.12)}
  .btn-secondary:hover,.link-btn:hover{background:var(--card);border-color:color-mix(in srgb,var(--accent) 45%,var(--glass-border));text-decoration:none;color:var(--text);box-shadow:0 3px 10px rgba(15,23,42,.12),inset 0 1px 0 var(--glass-border);transform:translateY(-1px)}
  .btn-danger:hover{background:color-mix(in srgb,var(--danger) 92%,#000)}
  .btn-gold:hover,.btn-important:hover{background:color-mix(in srgb,var(--gold) 92%,#000)}
  .btn:hover,.btn-primary:hover{background:color-mix(in srgb,var(--primary) 92%,#000)}
}

/* Ensure global a:visited styles do not override button text colors */
a.btn,a.btn:visited,a.btn-primary,a.btn-primary:visited{color:#fff}
a.btn-secondary,a.btn-secondary:visited{color:var(--text)}
a.link-btn,a.link-btn:visited{color:var(--text)}
a.btn-danger,a.btn-danger:visited{color:#fff}
a.btn-gold,a.btn-gold:visited,
a.btn-important,a.btn-important:visited{color:#0E1422}
.inline-form{margin:0}
.inline-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
@media (min-width:641px){.table td.inline-actions{margin-top:0;display:flex;align-items:center;gap:.5rem}.table td.inline-actions form{margin:0}}

/* Public website pages */
.public-wrap{max-width:1080px;margin:0 auto;display:grid;gap:1rem}
.public-hero{padding:2.5rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 82%,var(--surface-2)));box-shadow:var(--shadow)}
.public-kicker{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0}
.public-hero h1{font-size:2rem;margin:.15rem 0 .4rem}
.public-lead{font-size:1.02rem;color:var(--text-2);max-width:760px}
.public-sub{font-size:.9rem;color:var(--muted);max-width:820px}
.public-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.public-btn{display:inline-flex;align-items:center;justify-content:center;padding:.58rem .95rem;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:700;text-decoration:none}
.public-btn:hover{background:var(--surface-3);text-decoration:none}
.public-btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;border:none}
.public-btn-primary:hover{background:color-mix(in srgb,var(--primary) 80%,#000)}
.public-head h1{margin:0 0 .2rem}
.public-head p{margin:0;color:var(--muted)}
.public-grid,.public-wiki-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.public-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 86%,var(--surface-2)))}
.public-card h3{margin:0 0 .4rem}
.public-card p{margin:0;color:var(--text-2)}
.public-card a{display:inline-block;margin-top:.55rem;font-weight:700}
.public-list{margin:.25rem 0 0;padding-left:1rem;display:grid;gap:.35rem}
.public-doc{padding-bottom:1.2rem}
.public-doc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.public-back{font-weight:700;color:var(--text-2)}
@media (max-width:980px){
  .public-grid,.public-wiki-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .public-doc-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .public-hero{padding:1.35rem .95rem}
  .public-hero h1{font-size:1.55rem}
  .public-grid,.public-wiki-groups{grid-template-columns:1fr}
  .public-btn{width:100%}
}

/* ── Forms ── */
label{display:grid;gap:.3rem;font-size:.8rem;font-weight:600;color:var(--text-2)}
label.checkbox-inline{display:flex;align-items:center;gap:.5rem;min-height:40px;font-size:.82rem}
label.checkbox-inline input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent)}
input,select,textarea{border:1px solid var(--input-border);border-radius:var(--radius);padding:.5rem .65rem;font:400 .84rem/1.4 'Geist',sans-serif;background:var(--input-bg);color:var(--text);transition:border-color .12s,box-shadow .12s;width:100%}
input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
.form-grid{display:grid;gap:.75rem}
.form-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}
.form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.form-span{display:grid;gap:.6rem}
.checkbox-card{border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .75rem;background:var(--surface-2)}
.checkbox-card:hover{border-color:var(--border-2)}
.file-input{padding:.45rem .55rem}
.admin-form-hint{font-size:.78rem;line-height:1.4;color:var(--muted)}

/* ── Order Total Panel ── */
.order-total-panel strong{color:var(--text)}
.order-total-panel > div:last-child strong{font-weight:700}

/* ── Tables ── */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.84rem}
.table th{padding:.55rem .75rem;text-align:left;font-size:.69rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--border);white-space:nowrap;background:var(--card);position:sticky;top:0;z-index:1}
.table td{padding:.65rem .75rem;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
.table tbody tr:hover td{background:color-mix(in srgb,var(--surface-3) 65%,transparent)}
.table td a{color:var(--text);font-weight:600;text-decoration:none}
.table td a:hover{color:var(--primary);text-decoration:underline}
.table td.right,.table th.right{text-align:right}

/* ── Status Pills — soft tones ── */
.pill{display:inline-flex;align-items:center;padding:.18rem .5rem;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.02em;border:1px solid transparent;white-space:nowrap}
.pill.ok    {color:#2a7a56;background:#e8f5ee;border-color:#c2dfd0}
.pill.bad   {color:#8a3030;background:#faeaea;border-color:#e8c4c4}
.pill.warn  {color:#7a5a1a;background:#fdf4e3;border-color:#e8d9aa}
.pill-paid     {color:#2a7a56;background:#e8f5ee;border-color:#c2dfd0}
.pill-unpaid   {color:#8a3030;background:#faeaea;border-color:#e8c4c4}
.pill-partial  {color:#7a5a1a;background:#fdf4e3;border-color:#e8d9aa}
.pill-open     {color:#3a4a6a;background:#edf1fa;border-color:#c8d3e8}
.pill-progress {color:#2a5a7a;background:#e3f3fa;border-color:#b8d8ea}
.pill-ready    {color:#3a5a2a;background:#eaf4e3;border-color:#c0d8b8}
.pill-done     {color:#1e6645;background:#e3f5ec;border-color:#b0d8c4}
.pill-cancelled{color:#6a3a3a;background:#f5e8e8;border-color:#d8b8b8}
.pill-active   {color:#1e6645;background:#e3f5ec;border-color:#b0d8c4}
.pill-saved    {color:var(--muted);background:var(--surface-2);border-color:var(--border-2)}
:root[data-theme="dark"] .pill.ok,:root[data-theme="dark"] .pill-paid,:root[data-theme="dark"] .pill-done,:root[data-theme="dark"] .pill-active{color:#5ec99a;background:rgba(94,201,154,.1);border-color:rgba(94,201,154,.25)}
:root[data-theme="dark"] .pill.bad,:root[data-theme="dark"] .pill-unpaid,:root[data-theme="dark"] .pill-cancelled{color:#e07070;background:rgba(224,112,112,.1);border-color:rgba(224,112,112,.25)}
:root[data-theme="dark"] .pill.warn,:root[data-theme="dark"] .pill-partial{color:#d4a84a;background:rgba(212,168,74,.1);border-color:rgba(212,168,74,.25)}
:root[data-theme="dark"] .pill-open{color:#8aa0cc;background:rgba(138,160,204,.1);border-color:rgba(138,160,204,.25)}
:root[data-theme="dark"] .pill-progress{color:#6abce8;background:rgba(106,188,232,.1);border-color:rgba(106,188,232,.25)}
:root[data-theme="dark"] .pill-ready{color:#7acc88;background:rgba(122,204,136,.1);border-color:rgba(122,204,136,.25)}



/* Order Detail Tabs � system component */
.order-tabs{display:flex;gap:.25rem;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.25rem;margin:.5rem 0 .75rem;overflow-x:auto}
.order-tab{background:transparent;border:1px solid transparent;color:var(--text-2);padding:.52rem .85rem;border-radius:calc(var(--radius) + 2px);display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.86rem;cursor:pointer;white-space:nowrap;transition:background .12s ease,border-color .12s ease,color .12s ease}
.order-tab:hover{background:var(--card-hover);border-color:var(--border);color:var(--text)}
.order-tab.is-active{background:var(--card);border-color:color-mix(in srgb,var(--accent) 35%,var(--border));color:var(--text);box-shadow:0 1px 2px rgba(15,23,42,.06)}
.order-tab-icon{flex-shrink:0;display:inline-flex;align-items:center}
.order-tab-badge{background:var(--accent);color:var(--accent-text);font-size:.7rem;padding:1px 6px;border-radius:99px;font-weight:800}
.order-tab-panel{display:none}
.order-tab-panel.is-active{display:block}
.order-tab-panel > .card + .card{margin-top:.75rem}
/* ── Filters bar ── */
.filters-bar{margin-top:.75rem;padding:.75rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2)}
.filters-row{display:flex;gap:.65rem;align-items:flex-end;flex-wrap:wrap}
.filters-field{display:grid;gap:.3rem;min-width:170px}
.filters-actions{display:flex;gap:.4rem;align-items:center}
.filters-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.filters-summary{margin-top:.6rem;display:flex;gap:.5rem;align-items:baseline;font-size:.82rem;color:var(--muted)}
.filters-summary strong{color:var(--text)}
.chip{display:inline-flex;align-items:center;padding:.25rem .6rem;border-radius:99px;border:1px solid var(--border);background:var(--card);color:var(--text-2);font-size:.76rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background .1s,border-color .1s}
.chip:hover{background:var(--accent-dim);border-color:var(--accent-mid);color:var(--accent-text);text-decoration:none}

/* ── Detail/profile grids ── */
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem .75rem}
.detail-grid div,.profile-grid div{border:1px solid var(--border);border-radius:var(--radius);padding:.55rem .65rem;display:grid;gap:.15rem;background:var(--surface-2)}
.detail-grid div span,.profile-grid div span{font-size:.72rem;color:var(--muted);font-weight:500}
.detail-grid div strong,.profile-grid div strong{font-size:.84rem;font-weight:700}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem .75rem;margin:.75rem 0}

/* ── Text utils ── */
.muted{color:var(--muted)}
.error{color:var(--danger);font-weight:600}
.success{color:var(--success);font-weight:700}
.warning{color:var(--warning);font-weight:600}
.brand{font-weight:700;letter-spacing:.4px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem}

/* ── Finance ── */
.finance-hero{border-color:color-mix(in srgb,var(--accent) 18%,var(--border));background:color-mix(in srgb,var(--accent-dim) 35%,var(--card))}
.finance-highlight-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-top:1rem}
.finance-highlight{border:1px solid var(--border);border-radius:var(--radius-lg);padding:.85rem 1rem;background:var(--card);display:flex;flex-direction:column;gap:.2rem}
.finance-highlight span{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.finance-highlight strong{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.finance-trend-positive{border-left:3px solid var(--success)}
.finance-trend-negative{border-left:3px solid var(--danger)}
.finance-trend-neutral{border-left:3px solid var(--border-2)}
.finance-saas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.finance-panel h2{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.75rem}
.finance-kpis{display:grid;gap:.5rem}
.finance-kpi{border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .75rem;display:flex;flex-direction:column;gap:.15rem}
.finance-kpi span{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.finance-kpi strong{font-size:1.1rem;font-weight:700}
.finance-strip{border:1px solid var(--border);border-radius:var(--radius-lg);padding:.75rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;background:var(--surface-2);margin-bottom:1rem}
.finance-item{border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .7rem;background:var(--card);display:flex;flex-direction:column;gap:.15rem}
.finance-item span{font-size:.72rem;font-weight:600;color:var(--muted)}
.finance-item strong{font-size:1.1rem}
.finance-period-panel h2{margin-bottom:.75rem}
.finance-prompts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.65rem;margin:.5rem 0 1rem;align-items:stretch}
.finance-prompt{border:1px solid var(--border);border-radius:var(--radius-lg);padding:.85rem;background:var(--card);display:flex;flex-direction:column;gap:.4rem}
.finance-prompt-good{border-left:3px solid var(--success)}
.finance-prompt-warn{border-left:3px solid var(--warning)}
.finance-prompt-danger{border-left:3px solid var(--danger)}

/* ── Line items ── */
.line-items{display:grid;gap:.55rem}
.line-item-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:.55rem;align-items:end;padding:.75rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2)}
.line-item-row input{min-width:0}
.line-item-row .line-remove{min-width:90px;white-space:nowrap}
@media (max-width:1400px){.line-item-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}.line-item-row .line-remove{grid-column:1/-1;width:100%;justify-content:center}}

/* ── Edit layout ── */
.edit-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px);gap:1rem;align-items:start}
.order-edit-layout{grid-template-columns:minmax(0,1fr) minmax(320px,360px)}
.edit-sidebar{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto;overflow-x:hidden;border-color:color-mix(in srgb,var(--accent-2) 20%,var(--border));background:color-mix(in srgb,var(--surface-2) 40%,var(--card))}
.order-side-panel{display:grid;gap:.75rem}
.order-summary-grid{grid-template-columns:1fr}
.order-quick-actions{flex-direction:column;align-items:stretch;margin-top:0;gap:.45rem}
.order-quick-actions form{width:100%}
.order-quick-actions button{width:100%;justify-content:center}
.order-payment-form{display:grid!important;grid-template-columns:1fr!important;gap:.5rem;width:100%;min-width:0}
.order-payment-form input,.order-payment-form textarea,.order-payment-form select,.order-payment-form button{width:100%;min-width:0}
.order-payment-submit{width:100%;justify-content:center}
.order-media-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem;align-items:end;margin-bottom:.65rem}
.order-media-form label{min-width:0}
.order-media-form input[type="file"]{width:100%;min-width:0;max-width:100%}
.order-media-form button{min-width:150px}
.order-block{margin-top:.6rem;border-top:1px solid var(--border);padding-top:.75rem}

/* ── Media ── */
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}
.media-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:.65rem;display:grid;gap:.5rem;background:var(--card)}
.media-preview{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-height:120px;display:grid;place-items:center;background:var(--surface-2)}
.media-preview img,.media-preview video{width:100%;max-height:220px;object-fit:cover;display:block}
.media-fallback{font-weight:700;color:var(--muted);font-size:.82rem}
.media-meta{display:grid;gap:.15rem;word-break:break-word;font-size:.8rem}

/* ── Auth ── */
.auth-card{max-width:440px;margin:3.5rem auto 0}
.auth-links{margin-top:.85rem;display:flex;gap:.75rem;font-size:.82rem}
.auth-divider{margin:1.2rem 0;border:0;border-top:1px solid var(--border)}
.auth-subtitle{margin-bottom:.2rem}

/* ── Home ── */
.home-hero{border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;background:radial-gradient(1000px 280px at 10% -10%,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent),radial-gradient(600px 200px at 95% 110%,color-mix(in srgb,var(--accent) 12%,transparent),transparent),var(--card);box-shadow:var(--shadow-sm)}
.home-kicker{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.3rem}
.home-hero h1{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:.5rem}
.home-subtitle{margin:0;color:var(--muted);font-size:1rem;max-width:680px}
.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.25rem}
.home-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:.85rem;background:var(--surface-2)}
.home-card h3{margin-bottom:.35rem;font-size:.92rem}
.home-card p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.45}

/* ── Invoice / PDF ── */
.invoice-frame-wrap{margin-top:1rem;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.invoice-frame{width:100%;min-height:75vh;border:0}
.pdfjs-viewer{padding:.9rem}
.pdfjs-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.08)}
.pdfjs-toolbar-left,.pdfjs-toolbar-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pdfjs-canvas-wrap{display:grid;place-items:start center;padding:.9rem .25rem .25rem;overflow:auto}
.pdfjs-canvas{border-radius:var(--radius-lg);background:#0b1220;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.pdfjs-fallback{margin:.75rem 0 0}
.pdfjs-viewer.pdfjs-busy .pdfjs-canvas{opacity:.65}
.pdfjs-viewer.pdfjs-failed .pdfjs-canvas-wrap{display:none}

/* ── Demo tabs ── */
.mobile-edit-demo .demo-topbar{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;background:var(--card);padding-bottom:.6rem;margin-bottom:.6rem;border-bottom:1px solid var(--border)}
.mobile-edit-demo .demo-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;margin-bottom:.75rem}
.mobile-edit-demo .demo-tab{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:var(--radius);padding:.5rem .4rem;font-weight:700;font-size:.78rem;cursor:pointer;text-decoration:none;text-align:center;display:inline-flex;align-items:center;justify-content:center}
.mobile-edit-demo .demo-tab.is-active{background:var(--accent-dim);border-color:var(--accent-mid);color:var(--accent-text)}
.mobile-edit-demo .demo-panel{display:block}
.tabs-ready .mobile-edit-demo .demo-panel{display:none}
.tabs-ready .mobile-edit-demo .demo-panel.is-active{display:block}
@media (min-width:861px){.mobile-edit-demo .demo-tabs{display:none}.mobile-edit-demo .demo-panel{display:block}}

/* ── Finance Phase 3 components ── */
.finance-prompts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.6rem;margin:.5rem 0 1rem;align-items:stretch}
.finance-prompt{min-height:88px}
.finance-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin:.25rem 0 1rem}
.kpi-delta{display:inline-block;font-size:.78rem;font-weight:600;padding:1px 6px;border-radius:99px;width:fit-content}
.kpi-delta.up{background:var(--success-dim);color:var(--success)}
.kpi-delta.down{background:var(--danger-dim);color:var(--danger)}
.waterfall{display:grid;gap:.45rem;margin-top:.4rem}
.wf-row{display:grid;grid-template-columns:180px 1fr 130px;align-items:center;gap:.6rem}
.wf-label{font-size:.86rem;color:var(--text-2)}
.wf-bar{height:14px;border-radius:4px;min-width:2px}
.wf-pos{background:linear-gradient(90deg,var(--accent-mid),var(--accent))}
.wf-neg{background:linear-gradient(90deg,var(--danger-dim),var(--danger))}
.wf-amount{text-align:right;font-variant-numeric:tabular-nums}
.wf-divider{padding-top:.25rem;border-top:1px dashed var(--border)}
.finance-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem}
@media (max-width:900px){.finance-charts-grid{grid-template-columns:1fr}}
.chart-wrap{position:relative;height:240px}
.finance-headline{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1.4rem 1rem}
.finance-headline-value{font-size:2.6rem;font-weight:800;letter-spacing:-.02em}
.finance-headline-value.is-gain{color:var(--success)}
.finance-headline-value.is-loss{color:var(--danger)}
.finance-details{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);margin:.5rem 0;overflow:hidden}
.finance-details>summary{list-style:none;cursor:pointer;padding:.85rem 1rem;font-weight:600;display:flex;align-items:center;justify-content:space-between}
.finance-details>summary::-webkit-details-marker{display:none}
.finance-details>summary::after{content:"▾";color:var(--muted);transition:transform .15s ease}
.finance-details[open]>summary::after{transform:rotate(180deg)}
.finance-details>summary:hover{background:var(--card-hover)}
.finance-details .details-body{padding:0 1rem 1rem;border-top:1px solid var(--border);padding-top:.9rem}

/* ── Bulk toolbar ── */
.bulk-toolbar{display:none}
.bulk-toolbar.is-active{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:.45rem .65rem;margin-top:.75rem;font-size:.85rem}
.bulk-toolbar .bulk-count{font-weight:600;margin-right:.25rem}
.bulk-toolbar .bulk-spacer{flex:1}
.bulk-toolbar select{background:var(--input-bg);border:1px solid var(--input-border);color:var(--text);padding:.25rem .45rem;border-radius:var(--radius);font-size:.85rem;width:auto;min-width:130px}
.bulk-toolbar button{padding:.35rem .8rem;font-size:.85rem}
.bulk-toolbar .btn-link{background:none;border:none;color:var(--text-2);cursor:pointer;font-size:.85rem;padding:.25rem .4rem}
.bulk-toolbar .btn-link:hover{color:var(--text);text-decoration:underline}
.bulk-col{width:32px;text-align:center}
.bulk-col input[type="checkbox"]{width:16px;height:16px;cursor:pointer}
@media (max-width:640px){.bulk-toolbar.is-active{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"count clear" "status payment" "apply apply";gap:.4rem;padding:.5rem}.bulk-toolbar .bulk-count{grid-area:count;align-self:center}.bulk-toolbar .bulk-spacer{display:none}.bulk-toolbar [name='new_status']{grid-area:status;min-width:0;width:100%}.bulk-toolbar [name='new_payment_status']{grid-area:payment;min-width:0;width:100%}.bulk-toolbar #bulkApplyBtn{grid-area:apply;width:100%}.bulk-toolbar #bulkClearBtn{grid-area:clear;justify-self:end}}

/* ── Responsive ── */
@media (max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .container{margin-top:1rem}
}
@media (max-width:900px){
  .edit-layout,.order-edit-layout{grid-template-columns:1fr}
  .edit-sidebar{position:static;max-height:none;overflow:visible}
  .cards-3{grid-template-columns:repeat(2,1fr)}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-grid-5{grid-template-columns:repeat(2,1fr)}
  .finance-strip{grid-template-columns:repeat(2,1fr)}
  .finance-highlight-row{grid-template-columns:repeat(2,1fr)}
  .finance-prompts{grid-template-columns:1fr}
  .finance-saas-grid{grid-template-columns:1fr}
  .due-cards{grid-template-columns:repeat(3,1fr)}
  .home-grid{grid-template-columns:1fr}
  .dashboard-topbar{flex-direction:column;align-items:flex-start}
  .hero-actions{width:100%;gap:.4rem}
  .hero-actions .btn-secondary{flex:1 1 calc(50% - .4rem);justify-content:center}
  .section-head{flex-direction:column;align-items:stretch}
  .section-head .btn-secondary{width:100%;justify-content:center}
  .form-grid.compact{grid-template-columns:repeat(2,1fr)}
  .form-grid-2{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .profile-grid{grid-template-columns:repeat(2,1fr)}
  .order-media-form{grid-template-columns:1fr}
  .order-media-form button{width:100%;min-width:0;justify-content:center}
  .wf-row{grid-template-columns:110px 1fr 90px}
  .wf-label{font-size:.75rem}
}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}}
@media (max-width:640px){
  .container{margin:.75rem auto;padding:0 .75rem 2rem}
  .card{padding:.85rem}
  .kpi-card{min-height:auto}
  .cards-3,.cards-2,.cards-4,.kpi-grid,.kpi-grid-5,.finance-strip,
  .finance-highlight-row,.finance-kpis,.home-grid,.due-cards{grid-template-columns:1fr}
  .form-grid.compact,.profile-grid{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  label.checkbox-inline{min-height:auto}
  .line-item-row{grid-template-columns:1fr}
  .table.responsive thead{display:none}
  .table.responsive,.table.responsive tbody,.table.responsive tr,.table.responsive td{display:block;width:100%}
  .table.responsive tr{border:1px solid var(--border);border-radius:var(--radius-lg);padding:.6rem .7rem;margin-bottom:.65rem;background:var(--card)}
  .table.responsive td{border:0;padding:.4rem 0;display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;text-align:right}
  .table.responsive td::before{content:attr(data-label);flex:1 1 auto;text-align:left;color:var(--muted);font-weight:700;font-size:.78rem;letter-spacing:.02em}
  .table.responsive tbody tr:nth-child(even) td{background:transparent}
}
@media (max-width:860px){
  .mobile-edit-demo .line-item-row{grid-template-columns:1fr}
  .mobile-edit-demo .line-item-row .btn-danger{width:100%}
}

/* ── Mobile: hero action row touch-friendly layout ── */
@media (max-width:640px){
  .hero-actions{flex-direction:column !important;gap:0.5rem !important}
  .hero-actions form{width:100%}
  .hero-actions button{width:100%;padding:0.75rem 1rem;font-size:0.95rem;min-height:48px}
}

/* ── Accessibility: Reduce Motion ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* Dark mode: keep gold accent restrained */
:root[data-theme="dark"] .btn-gold,:root[data-theme="dark"] .btn-important{background:var(--surface-2);color:var(--text);border:1px solid color-mix(in srgb,var(--gold) 35%,var(--border));box-shadow:none}
:root[data-theme="dark"] .btn-gold:hover,:root[data-theme="dark"] .btn-important:hover{background:var(--surface-3);border-color:color-mix(in srgb,var(--gold) 45%,var(--border-2))}