/* =========================================================
   Asure × Phoenix H10 — Design System
   USF L1 visceral · L2 behavioural · L3 reflective
   Motion: 150–320ms · respects prefers-reduced-motion
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* primitive */
  --violet-300:#A89BFF; --violet-400:#8A77FF; --violet-500:#7C5CFF; --violet-600:#6748E8;
  --cyan-400:#3DE0FF;   --cyan-500:#00D4FF;
  --emerald-400:#22E6A8;--emerald-500:#10C28B;
  --amber-400:#FFC34D;  --amber-500:#FFB020;
  --rose-400:#FF6B85;   --rose-500:#FF4D6D;
  --pink-500:#FF6FB1;

  --grad-primary: linear-gradient(135deg,#7C5CFF 0%,#00D4FF 100%);
  --grad-warm:    linear-gradient(135deg,#FF6FB1 0%,#FFB020 100%);
  --grad-cool:    linear-gradient(135deg,#22E6A8 0%,#00D4FF 100%);
  --grad-danger:  linear-gradient(135deg,#FF4D6D 0%,#FF6FB1 100%);

  /* radii */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* motion */
  --t-fast:160ms; --t-med:220ms; --t-slow:320ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* z */
  --z-drawer:60; --z-toast:80; --z-modal:90;

  /* type */
  --f-sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* dark (default) */
:root, [data-theme="dark"] {
  --bg:         #0A0D18;
  --bg-2:       #0F1424;
  --surface:    #141A2E;
  --surface-2:  #1A2138;
  --surface-3:  #232C48;
  --line:       rgba(255,255,255,.07);
  --line-2:     rgba(255,255,255,.12);
  --text:       #F1F4FA;
  --text-2:     #B7BFD6;
  --text-3:     #7C849F;
  --muted:      #5A6280;
  --glass:      rgba(255,255,255,.04);
  --glow:       rgba(124,92,255,.35);
  --shadow-card: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-hover: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 40px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(124,92,255,.18);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg:         #F4F6FC;
  --bg-2:       #ECEFF8;
  --surface:    #FFFFFF;
  --surface-2:  #F7F8FE;
  --surface-3:  #EFF2FB;
  --line:       rgba(10,14,31,.06);
  --line-2:     rgba(10,14,31,.10);
  --text:       #0A0E1F;
  --text-2:     #3E465F;
  --text-3:     #6B7390;
  --muted:      #8A92AB;
  --glass:      rgba(10,14,31,.02);
  --glow:       rgba(124,92,255,.20);
  --shadow-card: 0 1px 0 rgba(10,14,31,.02) inset, 0 6px 18px -10px rgba(10,14,31,.12);
  --shadow-hover: 0 1px 0 rgba(10,14,31,.03) inset, 0 16px 40px -16px rgba(10,14,31,.20), 0 0 0 1px rgba(124,92,255,.20);
  color-scheme: light;
}

/* ---------- BASE ---------- */
*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family:var(--f-sans);
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  font-feature-settings:'ss01','cv11','tnum';
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea { font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
.num { font-variant-numeric:tabular-nums; }
[hidden] { display:none !important; }

::selection { background:var(--violet-500); color:white; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }

/* ---------- BRAND ---------- */
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark {
  width:28px; height:28px; border-radius:8px;
  background:var(--grad-primary);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 18px -6px var(--glow);
  position:relative;
}
.brand-mark::after {
  content:""; position:absolute; inset:6px;
  background:
    linear-gradient(135deg,transparent 45%, rgba(255,255,255,.6) 50%, transparent 55%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 60%);
  border-radius:4px;
}
.brand-name { font-weight:800; letter-spacing:-.01em; font-size:15px; }
.brand-dot { color:var(--violet-400); margin:0 1px; }
.brand-lg .brand-mark { width:44px; height:44px; border-radius:12px; }
.brand-lg .brand-name { font-size:20px; }

/* ---------- LOGIN ---------- */
.login {
  min-height:100dvh; display:grid; place-items:center;
  padding:24px; position:relative; overflow:hidden;
}
.login-bg {
  position:absolute; inset:-20%;
  background:
    radial-gradient(40rem 30rem at 15% 20%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(36rem 28rem at 85% 80%, rgba(0,212,255,.22), transparent 60%),
    radial-gradient(30rem 20rem at 50% 50%, rgba(255,111,177,.10), transparent 60%);
  filter:blur(2px);
}
.login-card {
  position:relative; width:min(420px,100%);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:32px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5), 0 0 0 1px var(--line) inset;
  backdrop-filter:blur(20px);
  animation:rise var(--t-slow) var(--ease-out);
}
.login-title { font-size:24px; font-weight:800; letter-spacing:-.02em; margin:24px 0 6px; }
.login-sub { color:var(--text-2); margin:0 0 24px; }
.login-form { display:grid; gap:14px; }
.field { display:grid; gap:6px; }
.field-label { font-size:12px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; }
.field input, .field select, .field textarea {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:12px 14px; outline:none;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--violet-400);
  box-shadow:0 0 0 4px rgba(124,92,255,.18);
}
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:var(--r-md);
  font-weight:600; font-size:13.5px;
  background:var(--surface-2); border:1px solid var(--line);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:hover { background:var(--surface-3); border-color:var(--line-2); }
.btn:active { transform:translateY(1px); }
.btn-primary {
  color:white;
  background:var(--grad-primary);
  border-color:transparent;
  box-shadow:0 8px 20px -8px var(--glow), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 14px 28px -10px var(--glow); }
.btn-block { width:100%; padding:13px; font-size:14px; }
.btn-ghost { background:transparent; border-color:transparent; color:var(--text-2); }
.btn-ghost:hover { color:var(--text); background:var(--glass); }
.btn-sm { padding:6px 10px; font-size:12.5px; border-radius:var(--r-sm); }

.link-btn { background:none; border:0; color:var(--violet-400); padding:0; font-weight:600; cursor:pointer; }
.link-btn:hover { color:var(--violet-300); text-decoration:underline; }
.login-hint { color:var(--text-3); font-size:13px; margin-top:14px; }
.login-foot { color:var(--muted); font-size:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); text-align:center; }

@keyframes rise { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:none; } }

/* ---------- APP LAYOUT ---------- */
.app {
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100dvh;
  background:var(--bg);
}
.sidebar {
  position:sticky; top:0; height:100dvh; padding:18px 14px;
  background:var(--bg-2);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
  overflow:auto;
}
.sidebar .brand { padding:6px 8px 4px; }
.proj-switch {
  display:flex; align-items:center; gap:10px; padding:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  text-align:left; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.proj-switch:hover { border-color:var(--line-2); background:var(--surface-2); }
.proj-thumb {
  width:36px; height:36px; border-radius:8px; flex:none;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg,#3b2f7a,#0e3a55);
  border:1px solid var(--line-2);
}
.proj-meta { display:grid; flex:1; min-width:0; }
.proj-name { font-weight:700; }
.proj-sub { font-size:11.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.nav { display:grid; gap:2px; margin-top:6px; }
.nav-group { padding:14px 12px 6px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--r-sm); color:var(--text-2);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  position:relative;
}
.nav-item:hover { background:var(--glass); color:var(--text); }
.nav-item svg { flex:none; opacity:.8; transition:opacity var(--t-fast) var(--ease); }
.nav-item .nav-tag {
  margin-left:auto; font-size:10.5px; font-weight:700;
  padding:2px 6px; border-radius:var(--r-full);
  background:var(--surface-3); color:var(--text-2);
}
.nav-item .nav-tag.alert { background:rgba(255,77,109,.15); color:var(--rose-400); }
.nav-item.active {
  background:var(--surface-2); color:var(--text); font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.nav-item.active::before {
  content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:3px;
  background:var(--grad-primary); border-radius:0 4px 4px 0;
}
.nav-item.active svg { opacity:1; color:var(--violet-400); }

.sidebar-foot { margin-top:auto; padding:8px; }
.health-pill {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--line);
  font-size:11.5px; color:var(--text-2);
}
.dot { width:7px; height:7px; border-radius:50%; flex:none; box-shadow:0 0 0 3px rgba(34,230,168,.18); }
.dot-good { background:var(--emerald-400); }
.dot-warn { background:var(--amber-400); box-shadow:0 0 0 3px rgba(255,176,32,.18); }
.dot-bad  { background:var(--rose-400); box-shadow:0 0 0 3px rgba(255,77,109,.18); }
.dot-info { background:var(--cyan-500); box-shadow:0 0 0 3px rgba(0,212,255,.18); }

/* ---------- TOPBAR ---------- */
.main { min-width:0; }
.topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  padding:14px 24px;
  background:color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.crumbs { font-size:13.5px; color:var(--text-2); font-weight:600; display:flex; align-items:center; gap:8px; min-width:0; }
.crumbs .sep { color:var(--text-3); }
.crumbs .here { color:var(--text); }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.search {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; min-width:280px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--text-2);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search:focus-within { border-color:var(--violet-400); box-shadow:0 0 0 4px rgba(124,92,255,.15); }
.search input { background:none; border:0; outline:none; flex:1; color:var(--text); }
.search kbd {
  font-family:var(--f-mono); font-size:11px;
  padding:2px 6px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-3);
}
.icon-btn {
  width:38px; height:38px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--text-2); position:relative;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.icon-btn:hover { background:var(--surface-2); color:var(--text); }
.icon-btn:active { transform:scale(.96); }
.bell .badge {
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px;
  background:var(--grad-danger); color:white; font-size:10.5px; font-weight:800;
  border-radius:99px; padding:0 5px; display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--bg);
}
.i-sun, .i-moon { display:none; }
[data-theme="dark"] .i-sun { display:block; }
[data-theme="light"] .i-moon { display:block; }

.user-chip {
  display:flex; align-items:center; gap:10px;
  padding:5px 10px 5px 5px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-full);
  transition:border-color var(--t-fast) var(--ease);
}
.user-chip:hover { border-color:var(--line-2); }
.avatar {
  width:30px; height:30px; border-radius:50%; flex:none;
  background:var(--grad-primary); color:white;
  font-weight:700; font-size:11.5px; display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--surface);
}
.avatar.sm { width:24px; height:24px; font-size:10px; }
.avatar.xs { width:20px; height:20px; font-size:9px; box-shadow:0 0 0 2px var(--surface-2); }
.avatar.warm { background:var(--grad-warm); }
.avatar.cool { background:var(--grad-cool); }
.avatar.danger { background:var(--grad-danger); }
.user-meta { display:grid; line-height:1.15; }
.user-name { font-size:13px; font-weight:700; }
.user-role { font-size:11px; color:var(--text-3); }

/* ---------- VIEW ---------- */
.view { padding:24px; outline:none; }
.view-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:18px;
}
.view-title { font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0; }
.view-sub { color:var(--text-2); margin:4px 0 0; font-size:13.5px; }
.view-actions { display:flex; gap:8px; }

/* ---------- DASHBOARD (Pinterest masonry) ---------- */
.hero {
  position:relative; overflow:hidden;
  border-radius:var(--r-xl); padding:24px;
  background:
    radial-gradient(40rem 24rem at 90% -10%, rgba(0,212,255,.20), transparent 60%),
    radial-gradient(36rem 22rem at -10% 120%, rgba(124,92,255,.28), transparent 60%),
    linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.hero-row { display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:stretch; }
@media (max-width:980px){ .hero-row { grid-template-columns:1fr; } }
.hero-left { display:grid; gap:14px; }
.hero-eyebrow { display:flex; align-items:center; gap:10px; color:var(--text-2); font-size:12.5px; font-weight:600; }
.hero-eyebrow .dot { width:8px; height:8px; }
.hero-title { font-size:34px; font-weight:800; letter-spacing:-.025em; line-height:1.1; margin:0; }
.hero-title .grad { background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub { color:var(--text-2); margin:0; max-width:64ch; }
.hero-stats { display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; }
.hero-stat .k { font-size:24px; font-weight:800; letter-spacing:-.02em; }
.hero-stat .l { font-size:11.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.hero-actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

/* progress ring */
.ring-wrap {
  position:relative; display:grid; place-items:center;
  padding:22px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);
}
.ring { width:200px; height:200px; transform:rotate(-90deg); }
.ring .track { stroke:var(--surface-3); }
.ring .fill { stroke:url(#ringGrad); stroke-linecap:round; transition:stroke-dashoffset var(--t-slow) var(--ease-out); }
.ring-label {
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none;
}
.ring-label .pct { font-size:38px; font-weight:800; letter-spacing:-.02em; }
.ring-label .lab { font-size:11.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }

/* masonry */
.masonry {
  margin-top:20px;
  column-count:3; column-gap:16px;
}
@media (max-width:1180px){ .masonry { column-count:2; } }
@media (max-width:720px){ .masonry { column-count:1; } }
.tile {
  break-inside:avoid;
  margin:0 0 16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out);
}
.tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:var(--line-2); }
.tile-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:14px 16px 8px;
}
.tile-title { font-size:13.5px; font-weight:700; }
.tile-title small { color:var(--text-3); font-weight:500; margin-left:6px; }
.tile-body { padding:0 16px 16px; }
.tile-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-top:1px solid var(--line); color:var(--text-3); font-size:12px;
}
.tile-cta { color:var(--violet-400); font-weight:600; }
.tile-cta:hover { color:var(--violet-300); }

.kpi {
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
}
.kpi .big {
  font-size:36px; font-weight:800; letter-spacing:-.025em; line-height:1;
}
.kpi .delta {
  font-size:12px; font-weight:700;
  padding:3px 8px; border-radius:var(--r-full);
}
.delta-up { color:var(--emerald-400); background:rgba(34,230,168,.10); }
.delta-dn { color:var(--rose-400); background:rgba(255,77,109,.10); }
.kpi .lab { color:var(--text-3); font-size:12px; }

.mini-bars { display:flex; align-items:flex-end; gap:5px; height:48px; margin-top:10px; }
.mini-bars span {
  flex:1; min-width:6px; background:var(--surface-3); border-radius:3px;
  transition:background var(--t-med) var(--ease);
}
.mini-bars span.hi { background:linear-gradient(180deg,var(--violet-400),var(--violet-600)); }

.spark { width:100%; height:54px; display:block; }

/* status chips */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  background:var(--surface-3); color:var(--text-2); border:1px solid var(--line);
}
.chip .dot { width:6px; height:6px; box-shadow:none; }
.chip-good { color:var(--emerald-400); background:rgba(34,230,168,.08); border-color:rgba(34,230,168,.18); }
.chip-warn { color:var(--amber-400); background:rgba(255,176,32,.08); border-color:rgba(255,176,32,.18); }
.chip-bad  { color:var(--rose-400);  background:rgba(255,77,109,.08); border-color:rgba(255,77,109,.18); }
.chip-info { color:var(--cyan-500);  background:rgba(0,212,255,.08); border-color:rgba(0,212,255,.18); }
.chip-violet { color:var(--violet-400); background:rgba(124,92,255,.10); border-color:rgba(124,92,255,.20); }

/* lists */
.list { display:grid; gap:6px; }
.row {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-sm);
  transition:background var(--t-fast) var(--ease);
}
.row:hover { background:var(--glass); }
.row .title { font-size:13px; font-weight:600; }
.row .meta { font-size:11.5px; color:var(--text-3); }
.row .lead { width:34px; }

/* progress bar */
.bar { height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden; position:relative; }
.bar > i { display:block; height:100%; border-radius:99px; background:var(--grad-primary); transition:width var(--t-slow) var(--ease-out); }
.bar.good > i { background:var(--grad-cool); }
.bar.warn > i { background:var(--grad-warm); }
.bar.bad  > i { background:var(--grad-danger); }

/* people */
.stack { display:flex; }
.stack .avatar { margin-left:-8px; box-shadow:0 0 0 2px var(--surface); }
.stack .avatar:first-child { margin-left:0; }

/* gantt mini */
.gantt-mini { display:grid; gap:8px; }
.gantt-row { display:grid; grid-template-columns:120px 1fr 56px; align-items:center; gap:10px; font-size:12px; }
.gantt-row .label { color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gantt-row .track { position:relative; height:14px; background:var(--surface-3); border-radius:99px; overflow:hidden; }
.gantt-row .seg { position:absolute; top:0; bottom:0; border-radius:99px; }
.gantt-row .seg.plan { background:rgba(124,92,255,.25); }
.gantt-row .seg.act  { background:var(--grad-primary); }
.gantt-row .seg.late { background:var(--grad-danger); }
.gantt-row .pct { color:var(--text-3); text-align:right; font-variant-numeric:tabular-nums; }

/* tables */
.table {
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.table th, .table td { padding:12px 14px; text-align:left; font-size:13px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table th { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:700; background:var(--surface-2); }
.table tr:last-child td { border-bottom:0; }
.table tbody tr { transition:background var(--t-fast) var(--ease); }
.table tbody tr:hover { background:var(--glass); }
.table .id { font-family:var(--f-mono); color:var(--text-3); font-size:12px; }

/* segmented filter */
.seg-filter {
  display:inline-flex; padding:4px; gap:2px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-full);
}
.seg-filter button {
  padding:6px 12px; border-radius:var(--r-full); font-size:12.5px; font-weight:600; color:var(--text-2);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg-filter button.on { background:var(--surface-3); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); }
.seg-filter button:hover:not(.on) { color:var(--text); }

/* grid helpers */
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px){ .grid-3, .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; } }

.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:18px;
  box-shadow:var(--shadow-card);
}
.card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.card-title { font-size:13.5px; font-weight:700; }

/* drawing thumb */
.thumb {
  aspect-ratio:4/3; border-radius:var(--r-md);
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 24px),
    linear-gradient(135deg,#1a2138,#0f1424);
  border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.thumb::after {
  content:""; position:absolute; inset:18%;
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:4px;
  background:
    linear-gradient(135deg, transparent 49%, rgba(124,92,255,.4) 50%, transparent 51%) center/200% 200% no-repeat;
}
.thumb.arch::after  { border-color:rgba(124,92,255,.45); background-color:rgba(124,92,255,.06); }
.thumb.struc::after { border-color:rgba(255,176,32,.45); background-color:rgba(255,176,32,.06); }
.thumb.mep::after   { border-color:rgba(0,212,255,.45);  background-color:rgba(0,212,255,.06); }
.thumb.land::after  { border-color:rgba(34,230,168,.45); background-color:rgba(34,230,168,.06); }

/* photo tile */
.photo {
  aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; position:relative;
  background:linear-gradient(135deg,#0e1f33,#1a2138);
  border:1px solid var(--line);
}
.photo::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 50%),
    linear-gradient(180deg, transparent 45%, rgba(0,0,0,.4));
}
.photo .tag {
  position:absolute; left:10px; bottom:10px; color:white; font-weight:700; font-size:12px;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tabs button {
  padding:10px 14px; color:var(--text-2); font-weight:600; font-size:13px;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tabs button:hover { color:var(--text); }
.tabs button.on { color:var(--text); border-color:var(--violet-500); }

/* timeline */
.timeline { position:relative; padding-left:24px; }
.timeline::before { content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:var(--surface-3); border-radius:2px; }
.tl-item { position:relative; padding:10px 0 18px; }
.tl-item::before {
  content:""; position:absolute; left:-21px; top:14px; width:14px; height:14px; border-radius:50%;
  background:var(--surface); border:2px solid var(--violet-500);
  box-shadow:0 0 0 4px var(--surface-2);
}
.tl-item.done::before { background:var(--violet-500); }
.tl-item.bad::before { border-color:var(--rose-500); }
.tl-item .when { font-size:11.5px; color:var(--text-3); }
.tl-item .what { font-weight:600; }

/* notification drawer */
.drawer {
  position:fixed; top:0; right:0; height:100dvh; width:380px; max-width:90vw;
  background:var(--bg-2); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform var(--t-med) var(--ease-out);
  z-index:var(--z-drawer); display:flex; flex-direction:column;
}
.drawer.open { transform:none; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); }
.drawer-head h3 { margin:0; font-size:15px; font-weight:700; }
.drawer-body { flex:1; overflow:auto; padding:8px 10px; }
.drawer-foot { padding:10px 14px; border-top:1px solid var(--line); color:var(--text-3); font-size:12px; }
.notif {
  display:grid; grid-template-columns:36px 1fr; gap:10px;
  padding:10px; border-radius:var(--r-md);
  transition:background var(--t-fast) var(--ease);
}
.notif:hover { background:var(--glass); }
.notif .ico { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); }
.notif .what { font-size:13px; font-weight:600; }
.notif .when { font-size:11.5px; color:var(--text-3); margin-top:2px; }

.scrim {
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  backdrop-filter:blur(2px);
  z-index:calc(var(--z-drawer) - 1);
  opacity:0; transition:opacity var(--t-med) var(--ease);
}
.scrim.show { opacity:1; }

/* toast */
.toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--surface); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r-full);
  padding:10px 16px; font-size:13px; font-weight:600;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.5);
  z-index:var(--z-toast); opacity:0;
  transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-out);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* approvals priority card */
.approval-card {
  display:grid; grid-template-columns:auto 1fr auto; gap:14px;
  padding:14px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line); border-radius:var(--r-md);
  align-items:center;
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.approval-card:hover { border-color:var(--violet-400); transform:translateY(-1px); }
.approval-card .swatch {
  width:48px; height:48px; border-radius:12px; background:var(--grad-primary);
  display:grid; place-items:center; color:white; font-weight:800;
}
.approval-card .swatch.warm { background:var(--grad-warm); }
.approval-card .swatch.cool { background:var(--grad-cool); }

/* RFI risk dots */
.dots { display:flex; gap:3px; }
.dots i { width:8px; height:8px; border-radius:50%; background:var(--surface-3); }
.dots i.on { background:var(--rose-400); box-shadow:0 0 0 2px rgba(255,77,109,.15); }

/* week view */
.week { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.day { padding:10px 8px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--line); min-height:78px; display:flex; flex-direction:column; gap:4px; }
.day .d { font-size:11px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.day .n { font-size:18px; font-weight:800; }
.day.today { border-color:var(--violet-400); box-shadow:0 0 0 3px rgba(124,92,255,.15); }
.day .ev { font-size:10.5px; padding:1px 5px; border-radius:5px; background:rgba(124,92,255,.15); color:var(--violet-300); align-self:flex-start; }
.day .ev.warm { background:rgba(255,176,32,.15); color:var(--amber-400); }
.day .ev.cool { background:rgba(0,212,255,.15); color:var(--cyan-500); }

/* responsive sidebar */
@media (max-width:880px){
  .app { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; top:0; bottom:0; width:260px; transform:translateX(-100%); transition:transform var(--t-med) var(--ease-out); z-index:30; }
  .sidebar.open { transform:none; }
}

/* motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

/* focus */
:focus-visible {
  outline:2px solid var(--violet-400);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- ADDED: gold accent, swatches, project cards, templates ---------- */

.btn-gold {
  color:#1a1408;
  background:var(--grad-warm);
  border-color:transparent;
  box-shadow:0 8px 20px -8px rgba(255,176,32,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn-gold:hover { transform:translateY(-1px); box-shadow:0 14px 28px -10px rgba(255,176,32,.45); }

.swatch {
  width:48px; height:48px; border-radius:12px;
  display:grid; place-items:center;
  color:white; font-weight:800; font-size:13px;
}
.swatch-primary { background:var(--grad-primary); }
.swatch-warm    { background:var(--grad-warm); color:#1a1408; }
.swatch-cool    { background:var(--grad-cool); }
.swatch-danger  { background:var(--grad-danger); }
.swatch-gold    { background:var(--grad-warm); color:#1a1408; }

/* Portfolio project cards */
.project-card { padding:14px; transition:transform var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.project-card:hover { transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--shadow-hover); }
.project-card.is-current { border-color:var(--violet-400); box-shadow:0 0 0 1px var(--violet-400) inset, var(--shadow-card); }
.project-thumb {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, var(--violet-500) 0%, var(--cyan-500) 100%);
  border:1px solid var(--line-2);
  position:relative;
  overflow:hidden;
}
.project-thumb::after {
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.06) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 18px);
}

/* Template cover */
.template-card {
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out);
}
.template-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:var(--line-2); }
.template-cover {
  position:relative;
  overflow:hidden;
}
.template-cover::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px);
  pointer-events:none;
}
.template-cover.swatch-primary { background:var(--grad-primary); }
.template-cover.swatch-warm    { background:var(--grad-warm); }
.template-cover.swatch-cool    { background:var(--grad-cool); }
.template-cover.swatch-danger  { background:var(--grad-danger); }

/* responsive table fixes */
.table { table-layout:auto; }
.table td, .table th { white-space:nowrap; }
.table td .title { white-space:normal; }
.table td .meta { white-space:normal; }

/* gauge for ring in light mode */
[data-theme="light"] .ring .track { stroke:var(--surface-3); }

/* approval-card light readability */
[data-theme="light"] .approval-card .swatch { color:white; }
[data-theme="light"] .approval-card .swatch.warm { color:#1a1408; }

/* table approval cards in light */
[data-theme="light"] .table .id { color:var(--text-3); }

/* ============================================================
   IFRAME MODAL — for ADS A4 templates
   ============================================================ */
.modal {
  position:fixed; inset:0; z-index:var(--z-modal);
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  display:grid; place-items:center;
  padding:20px;
  animation:fadeIn var(--t-med) var(--ease-out);
}
.modal-card {
  width:min(1200px, 96vw);
  height:min(900px, 92vh);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  display:flex; flex-direction:column; overflow:hidden;
  animation:rise var(--t-med) var(--ease-out);
}
.modal-head {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
}
.modal-head h3 { margin:2px 0 0; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.modal-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--violet-400);
}
.modal-actions { display:flex; align-items:center; gap:8px; }
.modal iframe {
  flex:1; width:100%; border:0; background:#fff;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ============================================================
   INTERACTIVE GANTT
   ============================================================ */
.gantt-wrap {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:0; overflow:hidden;
  box-shadow:var(--shadow-card);
}
.gantt-toolbar {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
  flex-wrap:wrap;
}
.gantt-toolbar .tool-group { display:flex; align-items:center; gap:4px; }
.gantt-toolbar .tool-sep {
  width:1px; height:18px; background:var(--line);
}
.gantt-toolbar button {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:var(--r-sm);
  font-size:12px; font-weight:600; color:var(--text-2);
  background:transparent; border:1px solid transparent;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.gantt-toolbar button:hover { color:var(--text); background:var(--surface-3); }
.gantt-toolbar button.on { color:var(--text); background:var(--surface-3); border-color:var(--line-2); }
.gantt-toolbar .stretch { flex:1; }
.gantt-toolbar .legend {
  display:flex; align-items:center; gap:12px; font-size:11.5px; color:var(--text-3);
}
.gantt-toolbar .legend i { width:14px; height:8px; border-radius:3px; display:inline-block; margin-right:4px; vertical-align:middle; }

.gantt-scroll {
  overflow:auto; max-height:70vh;
  background:var(--surface);
}
.gantt-grid {
  display:grid;
  grid-template-columns:280px 1fr;
  min-width:fit-content;
}
.gantt-head {
  position:sticky; top:0; z-index:3;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.gantt-row-label {
  padding:10px 14px;
  background:var(--surface);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:sticky; left:0; z-index:2;
  display:flex; flex-direction:column; gap:2px;
  font-size:13px;
  min-height:44px;
}
.gantt-row-label.is-stage { font-weight:700; background:var(--surface-2); }
.gantt-row-label.is-child { padding-left:28px; }
.gantt-row-label .meta { font-size:11px; color:var(--text-3); }
.gantt-row-label .chev {
  display:inline-block; margin-right:4px; transition:transform var(--t-fast) var(--ease);
  color:var(--text-3); cursor:pointer; user-select:none;
}
.gantt-row-label.is-stage.is-open .chev { transform:rotate(90deg); }

.gantt-canvas {
  position:relative;
  border-bottom:1px solid var(--line);
  min-height:44px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--col-w) - 1px),
      var(--line) calc(var(--col-w) - 1px) var(--col-w)
    );
}
.gantt-canvas.is-stage { background-color:var(--surface-2); }
.gantt-bar {
  position:absolute; top:50%; transform:translateY(-50%);
  height:14px; border-radius:4px;
  cursor:grab;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.gantt-bar.baseline {
  background:rgba(124,92,255,.18);
  border:1px dashed rgba(124,92,255,.4);
  top:calc(50% - 11px);
}
.gantt-bar.actual {
  background:var(--grad-primary);
  box-shadow:0 2px 6px -2px var(--glow);
  top:calc(50% + 4px); height:14px;
}
.gantt-bar.actual.late { background:var(--grad-danger); box-shadow:0 2px 6px -2px rgba(255,77,109,.35); }
.gantt-bar.actual.done { background:var(--grad-cool); box-shadow:0 2px 6px -2px rgba(34,230,168,.35); }
.gantt-bar.actual.idle { background:var(--surface-3); border:1px dashed var(--line-2); }
.gantt-bar:hover { transform:translateY(-50%) translateY(0); box-shadow:0 8px 16px -6px rgba(0,0,0,.4); z-index:4; }
.gantt-bar .pct {
  position:absolute; right:-32px; top:50%; transform:translateY(-50%);
  font-size:10.5px; color:var(--text-3); font-variant-numeric:tabular-nums;
}
.gantt-stage-bar {
  position:absolute; top:6px; bottom:6px; border-radius:6px;
  background:linear-gradient(180deg, rgba(124,92,255,.10), rgba(124,92,255,.05));
  border:1px solid rgba(124,92,255,.18);
}
.gantt-today {
  position:absolute; top:0; bottom:0; width:2px;
  background:var(--rose-500); z-index:5;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,77,109,.2);
}
.gantt-today::after {
  content:"TODAY"; position:absolute; top:4px; left:6px;
  font-size:9px; font-weight:800; letter-spacing:.12em;
  color:white; background:var(--rose-500);
  padding:1px 5px; border-radius:3px;
}
.gantt-axis {
  display:flex;
  font-size:10.5px; color:var(--text-3); font-weight:600;
  background:var(--surface-2);
  min-height:32px;
}
.gantt-axis .month {
  border-right:1px solid var(--line);
  padding:8px 6px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.gantt-tooltip {
  position:fixed; z-index:var(--z-toast);
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:10px 12px;
  font-size:12px; box-shadow:0 16px 32px -8px rgba(0,0,0,.5);
  pointer-events:none; max-width:320px;
}
.gantt-tooltip .t-name { font-weight:700; margin-bottom:4px; }
.gantt-tooltip .t-dates { color:var(--text-2); font-variant-numeric:tabular-nums; }
.gantt-tooltip .t-meta { color:var(--text-3); margin-top:6px; font-size:11px; }
.gantt-tooltip .t-reason { color:var(--rose-400); margin-top:4px; font-size:11px; font-style:italic; }

/* ============================================================
   MASTER-DETAIL (Projects)
   ============================================================ */
.md-grid { display:grid; grid-template-columns:280px 1fr; gap:14px; }
@media (max-width:980px) { .md-grid { grid-template-columns:1fr; } }
.md-list { display:flex; flex-direction:column; gap:8px; }
.md-item {
  text-align:left; padding:12px 14px; border-radius:var(--r-md);
  background:var(--surface); border:1.5px solid var(--line);
  cursor:pointer; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.md-item:hover { border-color:var(--line-2); }
.md-item.is-active {
  background:rgba(124,92,255,.10);
  border-color:var(--violet-400);
  box-shadow:0 2px 12px rgba(124,92,255,.18);
}
.md-item .md-name { display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:6px; }
.md-item .md-name .t { font-size:13px; font-weight:600; color:var(--text-2); }
.md-item.is-active .md-name .t { color:var(--violet-400); font-weight:700; }
.md-item .md-name .pct { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.md-item .md-meta { font-size:11px; color:var(--text-3); margin-bottom:8px; }
.md-item .md-foot {
  display:flex; justify-content:space-between; gap:6px; margin-top:8px;
  font-size:10.5px; color:var(--text-3);
}

.md-detail {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-card);
}
.md-detail-head { padding:18px 22px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.md-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0 0; }
.md-stat {
  padding:10px 14px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
}
.md-stat .l { font-size:10px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.07em; margin-bottom:5px; }
.md-stat .v { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }

.stage-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.stage-row:last-child { border-bottom:0; }
.stage-row .ico { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; }
.stage-row .ico.ok    { background:rgba(34,230,168,.15); color:var(--emerald-400); }
.stage-row .ico.warn  { background:rgba(255,176,32,.15); color:var(--amber-400); }
.stage-row .ico.idle  { background:var(--surface-3); color:var(--text-3); }
.stage-row .t { font-size:13px; font-weight:500; color:var(--text-2); }
.stage-row .m { font-size:11px; color:var(--text-3); margin-top:2px; }

/* ============================================================
   MISC
   ============================================================ */
.field-tabs { display:flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); }
.field-tabs button {
  padding:6px 12px; border-radius:var(--r-sm); font-size:12px; font-weight:600; color:var(--text-2);
}
.field-tabs button.on { background:var(--surface); color:var(--text); border:1px solid var(--line-2); }

/* ============================================================
   GENERIC DETAIL + FORM MODAL (smaller variant)
   ============================================================ */
.modal-sm .modal-card { width:min(560px, 94vw); height:auto; max-height:88vh; }
.modal-card-sm { display:flex; flex-direction:column; }
.modal-body { padding:18px 20px; overflow:auto; flex:1; display:grid; gap:14px; }
.modal-body .row-kv { display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:flex-start; font-size:13px; }
.modal-body .row-kv .l { color:var(--text-3); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; padding-top:4px; }
.modal-body .row-kv .v { color:var(--text); font-weight:500; }
.modal-body .row-kv .v.num { font-variant-numeric:tabular-nums; }
.modal-body p { margin:0; color:var(--text-2); line-height:1.6; }
.modal-foot {
  padding:12px 20px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:8px; justify-content:flex-end;
  background:var(--surface-2);
}
.modal-foot .stretch { flex:1; }

/* Form fields in modal */
.form-field { display:grid; gap:6px; }
.form-field label { font-size:12px; font-weight:600; color:var(--text-2); }
.form-field .req { color:var(--rose-400); margin-left:2px; }
.form-field input, .form-field select, .form-field textarea {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:10px 12px; outline:none;
  font-family:inherit; font-size:13px; color:var(--text);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  width:100%;
}
.form-field textarea { resize:vertical; min-height:80px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color:var(--violet-400);
  box-shadow:0 0 0 3px rgba(124,92,255,.15);
}
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-help { font-size:11px; color:var(--text-3); }

/* ============================================================
   USER MENU
   ============================================================ */
.user-menu {
  position:fixed; top:60px; right:24px; z-index:var(--z-drawer);
  width:240px;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-md);
  box-shadow:0 20px 48px -16px rgba(0,0,0,.5);
  padding:6px;
  animation:rise var(--t-med) var(--ease-out);
}
.user-menu-head {
  display:flex; gap:10px; align-items:center;
  padding:10px 12px 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:6px;
}
.user-menu-item {
  width:100%; text-align:left;
  padding:9px 12px; border-radius:var(--r-sm);
  font-size:13px; color:var(--text-2);
  display:flex; align-items:center; gap:10px;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.user-menu-item:hover { background:var(--surface-2); color:var(--text); }
.user-menu-item span:first-child { width:16px; text-align:center; opacity:.7; }

/* ============================================================
   SEARCH OVERLAY (cmd-K style)
   ============================================================ */
.search-overlay {
  position:fixed; inset:0; z-index:var(--z-modal);
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  display:grid; place-items:start center;
  padding-top:14vh;
  animation:fadeIn var(--t-med) var(--ease-out);
}
.search-card {
  width:min(680px, 94vw); max-height:70vh;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  display:flex; flex-direction:column;
  animation:rise var(--t-med) var(--ease-out);
  overflow:hidden;
}
.search-head {
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  color:var(--text-2);
}
.search-head input {
  flex:1; background:none; border:0; outline:none; color:var(--text);
  font-size:15px; font-weight:500;
}
.search-head kbd {
  font-family:var(--f-mono); font-size:11px;
  padding:2px 6px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-3);
}
.search-results {
  flex:1; overflow:auto;
  padding:6px;
}
.search-group { padding:10px 14px 4px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.search-item {
  display:grid; grid-template-columns:32px 1fr auto; gap:12px;
  padding:10px 12px; border-radius:var(--r-sm);
  cursor:pointer; align-items:center;
  transition:background var(--t-fast) var(--ease);
}
.search-item:hover, .search-item.is-focused { background:var(--surface-2); }
.search-item .icon {
  width:32px; height:32px; border-radius:8px;
  display:grid; place-items:center;
  background:var(--surface-3); color:var(--text-2);
  font-weight:700; font-size:11px;
}
.search-item .meta { font-size:11.5px; color:var(--text-3); margin-top:2px; }
.search-empty { padding:32px; text-align:center; color:var(--text-3); }
.search-foot {
  padding:10px 18px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between;
  color:var(--text-3); font-size:11.5px;
  background:var(--surface-2);
}

/* ============================================================
   NOTIFICATION dismiss
   ============================================================ */
.notif { position:relative; }
.notif .dismiss {
  position:absolute; right:8px; top:8px;
  width:22px; height:22px; border-radius:50%;
  background:var(--surface-2); color:var(--text-3); font-size:11px;
  display:none; align-items:center; justify-content:center; cursor:pointer;
}
.notif:hover .dismiss { display:flex; }
.notif .dismiss:hover { background:var(--rose-500); color:white; }

/* ============================================================
   ROW BUTTONS (Approve / Deny / Open)
   ============================================================ */
.row-actions { display:flex; gap:6px; }
.row-actions .btn { padding:4px 10px; font-size:11.5px; border-radius:var(--r-sm); }
.btn-approve { background:rgba(34,230,168,.12); color:var(--emerald-400); border-color:rgba(34,230,168,.25); }
.btn-approve:hover { background:rgba(34,230,168,.20); border-color:rgba(34,230,168,.40); }
.btn-deny    { background:rgba(255,77,109,.12); color:var(--rose-400); border-color:rgba(255,77,109,.25); }
.btn-deny:hover    { background:rgba(255,77,109,.20); border-color:rgba(255,77,109,.40); }

/* Back button */
.back-btn { width:32px; height:32px; }
.crumbs span.click {
  cursor:pointer; color:var(--text-2);
  transition:color var(--t-fast) var(--ease);
}
.crumbs span.click:hover { color:var(--violet-400); text-decoration:underline; }

/* PDF-capture wrapper override — html2canvas reads computed colors but
   we hide chrome during capture via .is-capturing on body */
body.is-capturing .sidebar,
body.is-capturing .topbar,
body.is-capturing .drawer,
body.is-capturing .scrim,
body.is-capturing .modal,
body.is-capturing .user-menu,
body.is-capturing .search-overlay,
body.is-capturing .toast { display:none !important; }
body.is-capturing .app { grid-template-columns:1fr !important; }
body.is-capturing .view { padding:30px !important; }

/* ============================================================
   PRINT STYLES — preserve the actual page look (theme-true)
   ============================================================ */
@media print {
  @page { margin: 10mm; }
  html, body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  /* hide only true overlays / nav — keep the view chrome that's visible */
  .sidebar, .drawer, .scrim, .modal, .user-menu, .search-overlay, .toast,
  .topbar .topbar-actions, .topbar .back-btn,
  .view-actions { display:none !important; }
  .app { grid-template-columns:1fr !important; }
  .main { padding:0 !important; }
  .topbar { background:transparent !important; border:0 !important; padding:6px 16px !important; }
  .view { padding:14px 16px !important; }
  .gantt-scroll { overflow:visible !important; max-height:none !important; }
  .gantt-grid { page-break-inside:auto; }
  .card, .tile, .gantt-wrap, .md-detail, .md-item, .approval-card { page-break-inside:avoid; }
  a[href]:after { content:""; }
  body::after {
    content:"Asure × Phoenix H10 — printed " attr(data-print-date);
    position:fixed; bottom:4mm; left:10mm; right:10mm;
    font-size:9.5px; color:#7c849f; text-align:center;
  }
}