/* ═══════════════════════════════════════════════════════════════════════════
   NEBULA — FixFlow Design System v2.0
   Replaces: base.css + themes.css + deep-sea.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
img{max-width:100%;display:block}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}

/* ─── ROOT TOKENS ─── */
:root{
  --ease:cubic-bezier(0.22,1,0.36,1);
  --font:'Plus Jakarta Sans',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:6px;
  --rail-w:62px;
  --primary-expanded:190px;
  --primary-collapsed:62px;
  --panel-w:220px;
  --topbar-h:58px;
  --t:0.32s var(--ease);
  --chrome-w:calc(var(--primary-expanded) + var(--panel-w));
}

/* ═══ DARK MODE ═══ */
[data-theme="dark"]{
  --bg:#0C0A1A;
  --bg2:#100E22;
  --surface:rgba(24,20,50,0.62);
  --surface-solid:#16132E;
  --surface2:rgba(32,28,62,0.5);
  --surface3:rgba(42,36,78,0.38);
  --border:rgba(255,255,255,0.06);
  --border2:rgba(255,255,255,0.1);
  --text:#F7F7FB;
  --text2:#C4C1D7;
  --muted:#7E7A96;
  --muted2:#524E6A;
  --accent:#8B5CF6;
  --accent-bg:rgba(139,92,246,0.12);
  --accent2:#10B981;
  --accent2-bg:rgba(16,185,129,0.12);
  --blue:#60A5FA;--blue-bg:rgba(96,165,250,0.1);
  --green:#34D399;--green-bg:rgba(52,211,153,0.1);
  --amber:#FBBF24;--amber-bg:rgba(251,191,36,0.1);
  --red:#F87171;--red-bg:rgba(248,113,113,0.1);
  --violet:#A78BFA;--violet-bg:rgba(167,139,250,0.12);
  --teal:#2DD4BF;--teal-bg:rgba(45,212,191,0.1);
  --rail-bg:rgba(10,8,24,0.92);
  --panel-bg:rgba(14,11,30,0.82);
  --topbar-bg:rgba(12,10,26,0.65);
  --input-bg:rgba(255,255,255,0.04);
  --glass:blur(40px) saturate(150%);
  --orb1:rgba(139,92,246,0.06);
  --orb2:rgba(16,185,129,0.04);
  --orb3:rgba(96,165,250,0.04);
  --tint-received:linear-gradient(135deg,rgba(100,100,140,0.35),rgba(70,70,110,0.15));
  --tint-diagnosing:linear-gradient(135deg,rgba(251,191,36,0.25),rgba(180,120,20,0.08));
  --tint-waiting:linear-gradient(135deg,rgba(248,113,113,0.25),rgba(180,60,60,0.08));
  --tint-repair:linear-gradient(135deg,rgba(139,92,246,0.3),rgba(100,60,200,0.1));
  --tint-ready:linear-gradient(135deg,rgba(52,211,153,0.25),rgba(30,140,90,0.08));
  color-scheme:dark;
}

/* ═══ LIGHT MODE ═══ */
[data-theme="light"]{
  --bg:#EEEDF5;
  --bg2:#E5E3EF;
  --surface:rgba(255,255,255,0.58);
  --surface-solid:#FFFFFF;
  --surface2:rgba(255,255,255,0.42);
  --surface3:rgba(255,255,255,0.3);
  --border:rgba(0,0,0,0.06);
  --border2:rgba(0,0,0,0.1);
  --text:#16132E;
  --text2:#2D2952;
  --muted:#6E6A88;
  --muted2:#A09CB8;
  --accent:#7C3AED;
  --accent-bg:rgba(124,58,237,0.08);
  --accent2:#059669;
  --accent2-bg:rgba(5,150,105,0.08);
  --blue:#3B82F6;--blue-bg:rgba(59,130,246,0.08);
  --green:#059669;--green-bg:rgba(5,150,105,0.08);
  --amber:#D97706;--amber-bg:rgba(217,119,6,0.08);
  --red:#DC2626;--red-bg:rgba(220,38,38,0.08);
  --violet:#7C3AED;--violet-bg:rgba(124,58,237,0.08);
  --teal:#0D9488;--teal-bg:rgba(13,148,136,0.08);
  --rail-bg:rgba(255,255,255,0.78);
  --panel-bg:rgba(248,247,252,0.8);
  --topbar-bg:rgba(255,255,255,0.55);
  --input-bg:rgba(0,0,0,0.03);
  --glass:blur(40px) saturate(130%);
  --orb1:rgba(124,58,237,0.07);
  --orb2:rgba(5,150,105,0.05);
  --orb3:rgba(59,130,246,0.05);
  --tint-received:linear-gradient(135deg,rgba(120,120,160,0.15),rgba(100,100,140,0.05));
  --tint-diagnosing:linear-gradient(135deg,rgba(217,119,6,0.12),rgba(180,100,10,0.04));
  --tint-waiting:linear-gradient(135deg,rgba(220,38,38,0.12),rgba(180,30,30,0.04));
  --tint-repair:linear-gradient(135deg,rgba(124,58,237,0.15),rgba(100,40,200,0.05));
  --tint-ready:linear-gradient(135deg,rgba(5,150,105,0.12),rgba(10,120,70,0.04));
  color-scheme:light;
}

/* ═══ BASE TYPOGRAPHY ═══ */
body{
  font-family:var(--font);
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  overflow:hidden;
  height:100vh;
}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}
.d-mono{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted)}
.text-muted{color:var(--muted)}
.text-muted2{color:var(--muted2)}
.text-accent{color:var(--accent)}

/* ═══ ANIMATED BACKGROUND ORBS ═══ */
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-orbs::before,.bg-orbs::after,.orb3{
  content:'';position:absolute;border-radius:50%;
  filter:blur(130px);animation:orbFloat 30s ease-in-out infinite alternate;
}
.bg-orbs::before{width:550px;height:550px;background:var(--orb1);top:-8%;left:30%;animation-duration:28s}
.bg-orbs::after{width:480px;height:480px;background:var(--orb2);bottom:5%;right:15%;animation-duration:32s;animation-delay:-8s}
.orb3{width:400px;height:400px;background:var(--orb3);top:45%;left:55%;animation-duration:26s;animation-delay:-14s;position:fixed;pointer-events:none;z-index:0;border-radius:50%;filter:blur(130px)}
@keyframes orbFloat{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-20px) scale(1.05)}
  66%{transform:translate(-20px,30px) scale(0.95)}
  100%{transform:translate(15px,-15px) scale(1.02)}
}

/* ═══ LAYOUT: ICON RAIL (legacy — replaced by .primary sidebar) ═══ */
/* Old .rail CSS removed in v2.0.4 — see .primary section at bottom of file */

/* ═══ LAYOUT: DETAIL PANEL ═══ */
.panel{
  position:fixed;left:var(--primary-expanded);top:0;bottom:0;width:var(--panel-w);
  background:var(--panel-bg);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:99;
  overflow-y:auto;overflow-x:hidden;
  transition:left 0.35s var(--ease);
}
.panel::-webkit-scrollbar{width:4px}
.panel::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.panel-header{
  padding:20px 16px 8px;font-size:15px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.ph-count{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted);margin-left:auto}
.panel-section{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--muted2);
  padding:16px 16px 6px;flex-shrink:0;
}
.panel-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 16px;font-size:13px;font-weight:500;
  color:var(--text2);cursor:pointer;border-radius:0;
  transition:all 0.15s var(--ease);text-decoration:none;
}
.panel-item:hover{background:var(--surface3);color:var(--text)}
.panel-item.active{
  background:var(--accent-bg);color:var(--accent);font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent);
}
.pi-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.pi-count{
  margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;
  background:var(--surface2);padding:1px 7px;border-radius:var(--radius-xs);
  color:var(--muted);
}
.pi-arrow{margin-left:auto;color:var(--muted2);font-size:14px}
.panel-tree{padding-left:0}
.panel-tree .panel-item{padding-left:38px;font-size:12px}
.panel-divider{height:1px;background:var(--border);margin:8px 16px}

/* Panel notifications */
.panel-notif{
  margin:auto 10px 12px;padding:12px;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);
}
.panel-notif-title{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--muted2);display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.notif-badge{
  background:var(--accent);color:#fff;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:var(--radius-xs);letter-spacing:0;
}
.notif-card{
  display:flex;align-items:center;gap:9px;padding:8px 0;
  border-bottom:1px solid var(--border);
}
.notif-card:last-child{border-bottom:none}
.notif-avatar{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;
}
.notif-text{flex:1;min-width:0}
.notif-name{font-size:12px;font-weight:600;color:var(--text)}
.notif-preview{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* ═══ LAYOUT: TOPBAR ═══ */
.topbar{
  position:fixed;top:0;left:var(--chrome-w);right:0;height:var(--topbar-h);
  background:var(--topbar-bg);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;z-index:98;
  transition:left 0.35s var(--ease);
}
.breadcrumb{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--muted);transition:color 0.15s}
.breadcrumb a:hover{color:var(--text)}
.bc-sep{color:var(--muted2);margin:0 2px}
.bc-active{color:var(--text);font-weight:700}
.bc-count{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:4px}
.topbar-right{display:flex;align-items:center;gap:12px}
.tb-search{
  display:flex;align-items:center;gap:8px;
  background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 14px;width:220px;transition:border-color 0.18s;
}
.tb-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.tb-search svg{color:var(--muted);flex-shrink:0}
.tb-search input{
  background:transparent;border:none;outline:none;
  font-size:13px;color:var(--text);width:100%;
}
.tb-search input::placeholder{color:var(--muted2)}
.topbar-avatar{
  width:34px;height:34px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#8B5CF6,#6D28D9);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;cursor:pointer;
}

/* ═══ LAYOUT: CONTENT AREA ═══ */
.content{
  position:fixed;
  top:var(--topbar-h);left:var(--chrome-w);
  right:0;bottom:0;
  padding:24px;
  overflow-y:auto;overflow-x:hidden;
  transition:left 0.35s var(--ease);
}
.content::-webkit-scrollbar{width:5px}
.content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* Backward compat: .main and .page-content map to content area styling */
.main{max-width:100%}
.page-content{max-width:100%}
.has-filterbar{padding-top:0}

/* ═══ GLASS CARD ═══ */
.glass{
  background:var(--surface);
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:background 0.32s var(--ease),border-color 0.32s var(--ease);
}
.glass:hover{border-color:var(--border2)}

/* ═══ STAT CARDS ═══ */
.stats{display:grid;gap:14px;margin-bottom:20px}
.stats-4{grid-template-columns:repeat(4,1fr)}
.stats-3{grid-template-columns:repeat(3,1fr)}
.stats-2{grid-template-columns:repeat(2,1fr)}
.stat{padding:20px;position:relative}
.stat-icon{
  position:absolute;top:16px;right:16px;width:38px;height:38px;
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;
}
.stat-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:6px}
.stat-val{font-size:24px;font-weight:700;color:var(--text);line-height:1.1}
.stat-delta{font-size:11px;font-weight:500;margin-top:4px;font-family:var(--mono)}

/* Backward compat: summary cards */
.summary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.summary-card{
  background:var(--surface);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border:1px solid var(--border);border-radius:var(--radius);padding:20px;
}
.summary-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:6px}
.summary-val{font-size:24px;font-weight:700;color:var(--text);line-height:1.1}
.summary-delta{font-size:11px;font-weight:500;margin-top:4px;font-family:var(--mono)}
.s-blue .summary-val{color:var(--accent)}.s-amber .summary-val{color:var(--amber)}.s-green .summary-val{color:var(--green)}.s-violet .summary-val{color:var(--violet)}

/* ═══ SECTION HEADERS ═══ */
.sec-header,.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin:24px 0 12px;
}
.sec-title,.section-title{font-size:16px;font-weight:700;color:var(--text)}
.sec-link{font-size:12px;font-weight:500;color:var(--accent);cursor:pointer;transition:opacity 0.15s}
.sec-link:hover{opacity:0.8}
.section-sub{font-size:12px;color:var(--muted);margin-top:2px}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.page-title{font-size:24px;font-weight:700;letter-spacing:-0.02em;color:var(--text)}
.page-sub{font-size:13px;color:var(--muted);margin-top:2px}

/* ═══ PIPELINE FOLDER CARDS ═══ */
.folders-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:24px}
.folder-card{overflow:hidden;cursor:pointer;transition:transform 0.2s var(--ease),border-color 0.2s}
.folder-card:hover{transform:translateY(-3px);border-color:var(--border2)}
.folder-header{
  padding:20px 16px 16px;position:relative;overflow:hidden;
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
}
.folder-header>*{position:relative;z-index:1}
.fh-icon{
  width:36px;height:36px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:10px;
}
.fh-name{font-size:13px;font-weight:700;color:var(--text)}
.fh-count{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.folder-body{
  padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--border);
}
.folder-avatars{display:flex}
.fa-avatar{
  width:26px;height:26px;border-radius:7px;margin-left:-6px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:#fff;
  border:2px solid var(--bg);
}
.fa-avatar:first-child{margin-left:0}
.folder-more{font-family:var(--mono);font-size:10px;color:var(--muted)}

/* ═══ RECENT TICKET PREVIEW CARDS ═══ */
.recent-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.recent-card{overflow:hidden;cursor:pointer;transition:transform 0.2s var(--ease),border-color 0.2s}
.recent-card:hover{transform:translateY(-3px);border-color:var(--border2)}
.rc-preview{height:90px;padding:14px;position:relative}
.rc-status-dot{
  position:absolute;top:12px;right:12px;width:8px;height:8px;
  border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;
}
.rc-device{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;position:relative;z-index:1}
.rc-issue{
  font-size:11px;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  position:relative;z-index:1;
}
.rc-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-top:1px solid var(--border);
}
.rc-id{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent)}
.rc-time{font-family:var(--mono);font-size:10px;color:var(--muted)}

/* ═══ TABLE TABS ═══ */
.table-tabs,.tabs,.filter-tabs,.ftabs{display:flex;gap:2px;margin-bottom:14px}
.ttab,.tab,.ftab{
  font-size:12px;font-weight:500;color:var(--muted);
  padding:7px 14px;border-radius:var(--radius-sm);
  cursor:pointer;transition:all 0.15s var(--ease);
  display:flex;align-items:center;gap:6px;
  background:transparent;border:1px solid transparent;
  text-decoration:none;
}
.ttab:hover,.tab:hover,.ftab:hover{background:var(--surface3);color:var(--text2)}
.ttab.active,.tab.active,.ftab.active{
  background:var(--surface);border-color:var(--border);color:var(--text);font-weight:600;
}
.ttab-dot{width:5px;height:5px;border-radius:50%;background:var(--green)}
.tc,.ct{
  font-family:var(--mono);font-size:10px;font-weight:600;
  background:var(--surface2);padding:1px 6px;border-radius:var(--radius-xs);color:var(--muted);
}

/* ═══ DATA TABLES ═══ */
.table-wrap,.table-card{overflow:hidden}
.table-wrap table,.table-card table{width:100%}
.table-wrap thead th,.table-card thead th{
  background:var(--surface2);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);
  padding:10px 16px;text-align:left;white-space:nowrap;
}
.table-wrap tbody td,.table-card tbody td{
  padding:13px 16px;border-bottom:1px solid var(--border);
  font-size:13px;color:var(--text);vertical-align:middle;
}
.table-wrap tbody tr:last-child td,.table-card tbody tr:last-child td{border-bottom:none}
.table-wrap tbody tr:hover,.table-card tbody tr:hover{background:var(--surface3)}
.table-wrap tbody tr[onclick],.table-card tbody tr[onclick]{cursor:pointer}

/* ═══ BADGES ═══ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;padding:3px 9px;
  border-radius:var(--radius-xs);font-family:var(--mono);
  white-space:nowrap;
}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.b-blue{background:var(--blue-bg);color:var(--blue)}
.b-green{background:var(--green-bg);color:var(--green)}
.b-amber{background:var(--amber-bg);color:var(--amber)}
.b-red{background:var(--red-bg);color:var(--red)}
.b-violet{background:var(--violet-bg);color:var(--violet)}
.b-teal{background:var(--teal-bg);color:var(--teal)}
.b-muted{background:var(--surface2);color:var(--muted)}

/* ═══ BUTTONS ═══ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;cursor:pointer;
  transition:all 0.18s var(--ease);text-decoration:none;
  border:none;white-space:nowrap;
}
.btn-accent,.btn-primary{
  background:linear-gradient(135deg,#8B5CF6,#6D28D9);color:#fff;
  box-shadow:0 4px 14px rgba(139,92,246,0.3);
}
.btn-accent:hover,.btn-primary:hover{box-shadow:0 6px 20px rgba(139,92,246,0.4);transform:translateY(-1px)}
.btn-cta,.btn-green{
  background:var(--accent2);color:#fff;
  box-shadow:0 3px 12px rgba(16,185,129,0.3);
}
.btn-cta:hover,.btn-green:hover{box-shadow:0 5px 18px rgba(16,185,129,0.4);transform:translateY(-1px)}
.btn-ghost{
  background:var(--surface2);color:var(--text2);
  border:1px solid var(--border);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid transparent}
.btn-danger:hover{border-color:var(--red)}
.btn-loading{opacity:0.6;pointer-events:none}
.btn-loading::after{content:'…'}
.btn-sm{padding:5px 10px;font-size:11px}

/* ═══ FORM INPUTS ═══ */
.form-group{margin-bottom:16px}
.form-label{
  display:block;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.04em;
  color:var(--muted);margin-bottom:6px;
}
.form-input,.form-select,.form-textarea{
  width:100%;padding:10px 14px;
  background:var(--input-bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);
  font-size:13px;outline:none;transition:border-color 0.18s,box-shadow 0.18s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--muted2)}
.form-textarea{resize:vertical;min-height:80px}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237E7A96' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.form-section{padding:20px 22px}
.fs-title{
  font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;
}

/* Toggle switch */
.toggle{position:relative;width:40px;height:22px;display:inline-block}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;inset:0;cursor:pointer;border-radius:11px;
  background:var(--surface3);border:1px solid var(--border);
  transition:all 0.2s;
}
.toggle-slider::before{
  content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  left:2px;top:2px;background:#fff;transition:transform 0.2s;
}
.toggle input:checked+.toggle-slider{background:var(--accent);border-color:var(--accent)}
.toggle input:checked+.toggle-slider::before{transform:translateX(18px)}

/* ═══ STATUS STEPPER ═══ */
.stepper{display:flex;align-items:center;gap:0}
.step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto}
.step-dot{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--muted2);
  background:var(--surface2);border:2px solid var(--border);
  transition:all 0.3s;
}
.step.active .step-dot{
  background:linear-gradient(135deg,#8B5CF6,#6D28D9);color:#fff;border-color:#8B5CF6;
  box-shadow:0 4px 16px rgba(139,92,246,0.35);
}
.step.done .step-dot{background:var(--green);color:#fff;border-color:var(--green)}
.step-label{font-size:10px;font-weight:600;color:var(--muted);text-align:center;max-width:70px}
.step.active .step-label{color:var(--accent);font-weight:700}
.step.done .step-label{color:var(--green)}
.step-line{
  flex:1;height:2px;min-width:20px;
  background:var(--border);margin:0 4px;margin-bottom:20px;
}
.step-line.done{background:var(--green)}

/* ═══ ETA BANNER ═══ */
.eta{
  padding:14px 18px;border-radius:var(--radius-sm);
  border-left:3px solid var(--accent);background:var(--accent-bg);
}
.eta-waiting{border-left-color:var(--amber);background:var(--amber-bg)}
.eta-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px}
.eta-text{font-size:13px;font-weight:500;color:var(--text);line-height:1.5}

/* ═══ NOTES ═══ */
.note{padding:14px 16px;background:var(--surface2);border-radius:var(--radius-sm);margin-bottom:10px;border-left:3px solid var(--muted2)}
.note-internal{border-left-color:var(--amber)}
.note-customer{border-left-color:var(--accent)}
.note-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:6px}
.note-body{font-size:13px;line-height:1.6;color:var(--text)}

/* ═══ DETAIL GRID (Ticket Detail) ═══ */
.detail-grid{display:grid;grid-template-columns:1fr 300px;gap:18px}
.info-panel{display:flex;flex-direction:column;gap:14px}
.info-block{padding:18px}
.ib-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.info-row:last-child{border-bottom:none}
.ik{color:var(--muted);font-size:12px;font-weight:500}
.iv{color:var(--text);font-weight:500}
.d-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.d-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted2);margin-bottom:3px}
.d-val{font-size:13px;font-weight:500;color:var(--text)}

/* ═══ TECH AVATARS ═══ */
.tech-av{
  width:26px;height:26px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:#fff;flex-shrink:0;
}
.tech-chip{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500}
.tech-dot{
  width:24px;height:24px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
}

/* ═══ FLASH MESSAGES ═══ */
.flash{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  z-index:9999;min-width:320px;max-width:500px;
  padding:14px 20px;border-radius:var(--radius-sm);
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border:1px solid var(--border);
  animation:flashIn 0.35s var(--ease);
  font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:10px;
}
.flash-success{background:var(--green-bg);color:var(--green);border-color:rgba(52,211,153,0.2)}
.flash-error{background:var(--red-bg);color:var(--red);border-color:rgba(248,113,113,0.2)}
.flash-info{background:var(--accent-bg);color:var(--accent);border-color:rgba(139,92,246,0.2)}
.flash-close{margin-left:auto;cursor:pointer;opacity:0.6;font-size:16px}
.flash-close:hover{opacity:1}
@keyframes flashIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ═══ MODALS ═══ */
.modal-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
}
.modal{
  background:var(--surface-solid);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;
  max-width:520px;width:90%;max-height:85vh;overflow-y:auto;
  animation:modalIn 0.3s var(--ease);
}
.modal-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:16px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ═══ FILTERBAR (Legacy compat) ═══ */
.filterbar,.statusbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:18px;flex-wrap:wrap;
}
.filter-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fsort{
  font-size:11px;font-weight:600;color:var(--muted);
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-xs);padding:5px 10px;cursor:pointer;
}

/* ═══ TICKET ID ═══ */
.ticket-id{font-family:var(--mono);font-weight:600;font-size:12px;color:var(--accent)}

/* ═══ ACTIVITY INDICATORS ═══ */
.activity-ind{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.activity-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.activity-fresh .activity-dot{background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s ease-in-out infinite}
.activity-recent .activity-dot{background:var(--blue)}
.activity-stale .activity-dot{background:var(--amber)}
.activity-cold{font-weight:700;color:var(--red)}
.activity-cold .activity-dot{background:var(--red)}
.activity-done{color:var(--muted2)}
.activity-done .activity-dot{background:var(--muted2)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* ═══ CUSTOMER NAME / DEVICE LABEL ═══ */
.customer-name{font-weight:500;font-size:13px;color:var(--text)}
.device-label{font-size:11px;color:var(--muted);margin-top:1px}

/* ═══ PRICE AGE INDICATORS ═══ */
.price-age{font-family:var(--mono);font-size:11px;font-weight:600}
.pa-fresh{color:var(--green)}.pa-stale{color:var(--amber)}.pa-verify{color:var(--red)}
.source-name{font-size:12px;font-weight:500;color:var(--text)}
.source-lead{font-size:10px;color:var(--muted)}

/* ═══ PAGINATION ═══ */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.pag-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--radius-xs);
  font-size:12px;font-weight:600;color:var(--muted);
  background:var(--surface2);border:1px solid var(--border);text-decoration:none;
  transition:all 0.15s;
}
.pag-btn:hover{border-color:var(--accent);color:var(--accent)}
.pag-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ═══ ROW ACTIONS ═══ */
.row-actions{display:flex;gap:4px}
.row-btn{
  font-size:11px;font-weight:600;padding:4px 10px;
  border:1px solid var(--border);border-radius:var(--radius-xs);
  color:var(--text2);transition:all 0.15s;text-decoration:none;
}
.row-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ═══ EMPTY STATE ═══ */
.empty-state{
  text-align:center;padding:48px 24px;color:var(--muted);
}
.empty-state .es-icon{font-size:48px;margin-bottom:12px}
.empty-state .es-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px}
.empty-state .es-sub{font-size:13px;margin-bottom:16px}

/* ═══ REPAIR CARDS GRID (Dashboard — Legacy) ═══ */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:24px}
.repair-card{
  background:var(--surface);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:transform 0.2s var(--ease),border-color 0.2s;
}
.repair-card:hover{transform:translateY(-3px);border-color:var(--border2)}
.card-strip{height:3px}
.card-body{padding:16px}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.card-name{font-size:14px;font-weight:600;color:var(--text)}
.card-id-label{font-family:var(--mono);font-size:11px;color:var(--accent);margin-top:2px}
.urg-tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--radius-xs);text-transform:uppercase;letter-spacing:0.03em}
.urg-urgent{background:var(--red-bg);color:var(--red)}.urg-waiting{background:var(--amber-bg);color:var(--amber)}.urg-pickup{background:var(--green-bg);color:var(--green)}.urg-normal{background:var(--surface2);color:var(--muted)}
.card-device-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.device-icon{font-size:20px}
.card-device{font-size:12px;font-weight:600;color:var(--text)}
.card-issue{font-size:11px;color:var(--muted);margin-top:1px}
.card-status-row{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.status-dot{width:6px;height:6px;border-radius:50%}
.status-label{font-size:11px;font-weight:600}
.card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--border)}
.card-price{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text)}
.card-age{font-family:var(--mono);font-size:10px;color:var(--muted)}

/* ═══ PIPELINE (Dashboard — Legacy) ═══ */
.pipeline-wrap{
  background:var(--surface);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;margin-bottom:20px;
}
.pipeline-header{margin-bottom:16px}
.pipeline-title{font-size:16px;font-weight:700;color:var(--text)}
.pipeline-sub{font-size:12px;color:var(--muted);margin-top:2px}
.pipeline{display:flex;align-items:flex-start;gap:6px}
.pipe-stage{flex:1;padding:10px}
.pipe-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pipe-label{font-size:11px;font-weight:600;color:var(--text2)}
.pipe-count{font-family:var(--mono);font-size:16px;font-weight:700}
.pipe-track{height:6px;background:var(--surface3);border-radius:3px;overflow:hidden;margin-bottom:6px}
.pipe-fill{height:100%;border-radius:3px;transition:width 0.5s var(--ease)}
.pipe-fill-pulse{animation:fill-pulse 2s ease-in-out infinite}
@keyframes fill-pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.pipe-pressure{font-size:10px;font-weight:600;color:var(--muted2)}
.pipe-pressure.high{color:var(--amber)}.pipe-pressure.med{color:var(--red)}.pipe-pressure.ready{color:var(--green)}
.pipe-arrow{color:var(--muted2);font-size:14px;padding-top:26px}
.pipe-tickets{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.pipe-chip{font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--radius-xs);background:var(--surface2);color:var(--text2);text-decoration:none;transition:all 0.15s}
.pipe-chip:hover{background:var(--surface3)}
.pipe-chip.warn{background:var(--amber-bg);color:var(--amber)}
.pipe-chip.block{background:var(--red-bg);color:var(--red)}
.pipe-chip.ready{background:var(--green-bg);color:var(--green)}
.pipe-chip-more{font-family:var(--mono);font-size:10px;color:var(--muted);padding:2px 6px}

/* ═══ SETTINGS TABS (Legacy) ═══ */
.settings-layout{display:grid;grid-template-columns:180px 1fr;gap:20px}
.settings-nav{display:flex;flex-direction:column;gap:2px}
.settings-nav a{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  font-size:13px;font-weight:500;color:var(--text2);
  border-radius:var(--radius-sm);text-decoration:none;transition:all 0.15s;
}
.settings-nav a:hover{background:var(--surface3)}
.settings-nav a.active{background:var(--accent-bg);color:var(--accent);font-weight:600}
.settings-section{
  background:var(--surface);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border:1px solid var(--border);border-radius:var(--radius);padding:24px;
}
.settings-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px}
.settings-sub{font-size:13px;color:var(--muted);margin-bottom:20px}

/* ═══ INVOICE (Legacy) ═══ */
.invoice-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.invoice-title{font-size:24px;font-weight:800;color:var(--text)}
.invoice-meta{text-align:right}
.invoice-table{margin:20px 0}
.invoice-totals{margin-left:auto;max-width:280px}
.invoice-total-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px}
.invoice-grand{font-size:18px;font-weight:700;border-top:2px solid var(--border);padding-top:10px;margin-top:6px}

/* ═══ SERVICES WIZARD (Legacy) ═══ */
.wizard-step{padding:24px}

/* ═══ COMMS LIST (Legacy) ═══ */
.comms-list{display:flex;flex-direction:column;gap:8px}
.comms-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-radius:var(--radius-sm);background:var(--surface2);
  text-decoration:none;color:var(--text);transition:background 0.15s;
}
.comms-item:hover{background:var(--surface3)}

/* ═══ KEYBOARD SHORTCUTS OVERLAY ═══ */
#kbdOverlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}

/* ═══ PROGRESS BAR ═══ */
#nprogress{
  height:2px;background:var(--accent);
  position:fixed;top:0;left:0;z-index:9999;
  transition:width 0.3s;pointer-events:none;
  border-radius:0 2px 2px 0;box-shadow:0 0 8px var(--accent);
}

/* ═══ SCROLLBAR (Global) ═══ */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ═══ ANIMATION UTILITIES ═══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp 0.3s var(--ease)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1200px){
  .folders-row{grid-template-columns:repeat(3,1fr)}
  .recent-row{grid-template-columns:repeat(2,1fr)}
  .stats-4{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  :root{--panel-w:0px;--primary-expanded:0px;--primary-collapsed:0px}
  .primary,.panel{display:none}
  .topbar{left:0}
  .content{left:0;top:var(--topbar-h)}
  .folders-row{grid-template-columns:repeat(2,1fr)}
  .recent-row{grid-template-columns:1fr}
  .summary-row{grid-template-columns:repeat(2,1fr)}
  .stats-3{grid-template-columns:1fr}
  .pipeline{flex-direction:column}
  .pipe-arrow{display:none}
  .settings-layout{grid-template-columns:1fr}
}

/* ═══ BACKWARD COMPATIBILITY — Legacy variable aliases ═══ */
:root{
  --font-display:var(--font);
  --font-ui:var(--font);
  --font-mono:var(--mono);
  --radius-card:var(--radius);
  --ease-out:var(--ease);
}
[data-theme="dark"]{
  --modal-bg:var(--surface-solid);
  --modal-shadow:0 25px 60px rgba(0,0,0,0.5);
  --blur-overlay:rgba(0,0,0,0.4);
  --card-shadow:0 2px 8px rgba(0,0,0,0.2);
  --card-shadow-h:0 4px 16px rgba(0,0,0,0.3);
}
[data-theme="light"]{
  --modal-bg:var(--surface-solid);
  --modal-shadow:0 25px 60px rgba(0,0,0,0.15);
  --blur-overlay:rgba(0,0,0,0.25);
  --card-shadow:0 2px 8px rgba(0,0,0,0.06);
  --card-shadow-h:0 4px 16px rgba(0,0,0,0.1);
}

/* ═══ BACKWARD COMPATIBILITY — Legacy classes ═══ */

/* Customer grid/cards */
.customer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:20px}
.customer-card{
  background:var(--surface);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;display:flex;align-items:center;gap:14px;
  cursor:pointer;transition:transform 0.2s var(--ease),border-color 0.2s;
}
.customer-card:hover{transform:translateY(-2px);border-color:var(--border2)}
.customer-avatar{
  width:42px;height:42px;border-radius:var(--radius-sm);flex-shrink:0;
  background:linear-gradient(135deg,#8B5CF6,#6D28D9);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#fff;
}
.customer-info{flex:1;min-width:0}
.customer-meta{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customer-stats{display:flex;align-items:center;gap:10px;flex-shrink:0}
.customer-stat{text-align:center}
.customer-stat-val{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--text);display:block}
.customer-stat-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.03em}

/* Status badge (legacy) */
.status-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;padding:3px 9px;
  border-radius:var(--radius-xs);text-transform:capitalize;
}

/* Search input (legacy) */
.search-input{
  padding:7px 12px;background:var(--input-bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:12px;color:var(--text);outline:none;width:200px;
  transition:border-color 0.18s;
}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.search-input::placeholder{color:var(--muted2)}

/* Page pagination (legacy) */
.page-btn{
  display:inline-flex;align-items:center;padding:5px 12px;
  font-size:12px;font-weight:600;color:var(--muted);
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-xs);
  text-decoration:none;transition:all 0.15s;
}
.page-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-info{font-size:12px;color:var(--muted)}

/* Data table (legacy aliases) */
.data-table{width:100%}
.data-table thead th{
  background:var(--surface2);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);
  padding:10px 16px;text-align:left;white-space:nowrap;
}
.data-table tbody td{padding:13px 16px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover,.table-row-hover:hover{background:var(--surface3)}

/* Sub-filterbar (legacy) */
.sub-filterbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:8px;
  padding:10px 0;margin-bottom:10px;
}

/* Settings (legacy) */
.settings-content{flex:1}
.settings-section-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px}
.settings-nav-item{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  font-size:13px;font-weight:500;color:var(--text2);
  border-radius:var(--radius-sm);text-decoration:none;transition:all 0.15s;cursor:pointer;
}
.settings-nav-item:hover{background:var(--surface3)}
.settings-nav-item.active{background:var(--accent-bg);color:var(--accent);font-weight:600}
.settings-nav-icon{font-size:15px;width:20px;text-align:center}
.settings-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--border);
}

/* Sidebar info cards on detail pages (legacy) */
.sidebar-card{
  background:var(--surface);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px;
}
.sidebar-card-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:6px}

/* Ticket detail sections (legacy) */
.tk-section{
  background:var(--surface);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px;
}
.tk-section-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.tk-num{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent)}

/* Search results (legacy) */
.search-result{
  display:block;padding:12px 16px;border-bottom:1px solid var(--border);
  transition:background 0.15s;text-decoration:none;color:var(--text);
}
.search-result:hover{background:var(--surface3)}
.search-dropdown{
  position:absolute;top:100%;left:0;right:0;
  background:var(--surface-solid);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--modal-shadow);max-height:300px;overflow-y:auto;z-index:50;
}

/* Theme cards (settings — legacy, simplified for dark/light) */
.theme-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;cursor:pointer;transition:all 0.2s;text-align:center;
}
.theme-card:hover{border-color:var(--border2)}
.theme-card-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.theme-swatch{
  width:100%;height:40px;border-radius:var(--radius-xs);margin-bottom:8px;
  border:1px solid var(--border);
}

/* Button secondary (legacy alias) */
.btn-secondary{
  background:var(--surface2);color:var(--text2);
  border:1px solid var(--border);
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;cursor:pointer;transition:all 0.18s var(--ease);
}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}

/* Services wizard (legacy) */
.svc-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:all 0.2s;
}
.svc-card:hover{border-color:var(--border2)}
.svc-strip{height:3px}
.svc-body{padding:16px}
.svc-category{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted)}
.svc-inactive{opacity:0.5}
.svc-picker-row{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.wiz-input{
  width:100%;padding:10px 14px;background:var(--input-bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);font-size:13px;outline:none;
}
.wiz-input:focus{border-color:var(--accent)}
.wiz-device-card,.wiz-mode-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;cursor:pointer;transition:all 0.15s;flex:1;min-width:120px;
}
.wiz-device-card:hover,.wiz-mode-card:hover{border-color:var(--border2)}
.wiz-device-check,.wiz-mode-check{display:none}
.wiz-device-check:checked+.wiz-device-card,.wiz-mode-check:checked+.wiz-mode-card{border-color:var(--accent);background:var(--accent-bg)}
.wiz-review-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.wiz-row-cb{margin-right:8px}

/* Invoice detail (legacy) */
.invoice-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Spacer utility */
.spacer{flex:1}

/* ═══ SUPERADMIN OVERRIDES ═══ */
.sa-layout .rail-logo{background:linear-gradient(135deg,#DC2626,#8B5CF6)}
.sa-layout .rail-item.active{background:linear-gradient(135deg,#DC2626,#8B5CF6)}

/* ═══════════════════════════════════════════════════════════════════════════
   NEBULA v2.0.2 — EXPANDABLE PRIMARY SIDEBAR
   Overrides the old .rail system with an expand/collapse primary nav
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Primary sidebar shell ── */
.primary{
  position:fixed;left:0;top:0;bottom:0;
  width:var(--primary-expanded);
  background:var(--rail-bg);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  padding:14px 10px;z-index:101;
  transition:width 0.35s var(--ease);overflow:hidden;
}
.primary-logo{display:flex;align-items:center;gap:11px;padding:0 4px;margin-bottom:20px;white-space:nowrap;overflow:hidden;flex-shrink:0}
.primary-logo-mark{width:38px;height:38px;min-width:38px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#8B5CF6,#6D28D9);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;box-shadow:0 4px 16px rgba(139,92,246,0.3)}
.primary-logo-mark img{width:26px;height:26px;object-fit:contain}
.primary-logo-text{font-size:17px;font-weight:800;color:var(--text);letter-spacing:-0.02em;opacity:1;transition:opacity 0.2s var(--ease)}
.primary-nav{display:flex;flex-direction:column;gap:3px;overflow-y:auto;overflow-x:hidden;flex-shrink:0}
.primary-bottom{display:flex;flex-direction:column;gap:3px;padding-top:8px;flex-shrink:0}
.primary-divider{height:1px;background:var(--border);margin:6px 4px;flex-shrink:0}

/* ── Nav items ── */
.pnav-item{display:flex;align-items:center;gap:11px;height:44px;min-height:44px;padding:0 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background 0.18s var(--ease),box-shadow 0.25s var(--ease);white-space:nowrap;overflow:hidden;position:relative}
.pnav-icon{font-size:22px;min-width:24px;text-align:center;transition:transform 0.18s var(--ease);line-height:1}
.pnav-label{font-size:13px;font-weight:600;color:var(--muted);transition:opacity 0.2s var(--ease),color 0.15s;overflow:hidden}
.pnav-badge{width:8px;height:8px;border-radius:50%;background:var(--red);position:absolute;top:8px;right:8px;border:2px solid rgba(10,8,24,0.92)}
.pnav-item:hover{background:var(--surface3)}.pnav-item:hover .pnav-icon{transform:scale(1.08)}.pnav-item:hover .pnav-label{color:var(--text2)}
.pnav-item:active{transform:scale(0.97)}
.pnav-item.active{background:var(--accent);box-shadow:0 4px 18px rgba(139,92,246,0.4)}
.pnav-item.active .pnav-label{color:#fff;opacity:1}.pnav-item.active .pnav-icon{filter:brightness(10)}.pnav-item.active .pnav-badge{border-color:var(--accent)}

/* ── Collapse toggle ── */
.collapse-btn{display:flex;align-items:center;gap:11px;height:36px;padding:0 10px;border-radius:var(--radius-sm);cursor:pointer;color:var(--muted2);transition:all 0.18s var(--ease);white-space:nowrap;overflow:hidden;margin-top:4px}
.collapse-btn:hover{background:var(--surface3);color:var(--muted)}
.collapse-icon{font-size:18px;min-width:24px;text-align:center;transition:transform 0.35s var(--ease)}
.collapse-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;transition:opacity 0.2s var(--ease)}

/* ── Collapsed state ── */
.primary.collapsed{width:var(--primary-collapsed);padding:14px 9px}
.primary.collapsed .primary-logo-text{opacity:0;width:0}
.primary.collapsed .pnav-label{opacity:0;width:0}
.primary.collapsed .collapse-label{opacity:0;width:0}
.primary.collapsed .collapse-icon{transform:rotate(180deg)}
.primary.collapsed .pnav-item{justify-content:center;padding:0}
.primary.collapsed .collapse-btn{justify-content:center;padding:0}
.primary.collapsed .primary-logo{justify-content:center;gap:0}

/* ── Glass tooltips (collapsed only) ── */
.pnav-tooltip{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-4px) scale(0.95);background:rgba(20,16,44,0.9);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-sm);padding:8px 14px;white-space:nowrap;font-size:12px;font-weight:600;color:var(--text);opacity:0;pointer-events:none;transition:opacity 0.18s var(--ease),transform 0.18s var(--ease);box-shadow:0 8px 32px rgba(0,0,0,0.4);z-index:300}
.pnav-tooltip::before{content:'';position:absolute;left:-5px;top:50%;transform:translateY(-50%) rotate(45deg);width:10px;height:10px;background:rgba(20,16,44,0.9);border-left:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1)}
.pnav-tooltip.visible{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}
.primary:not(.collapsed) .pnav-tooltip{display:none !important}

/* ── Layout shifts for primary collapse ── */
.primary.collapsed ~ .panel{left:var(--primary-collapsed)}
.primary.collapsed ~ .panel ~ .topbar{left:calc(var(--primary-collapsed) + var(--panel-w))}
.primary.collapsed ~ .panel ~ .topbar ~ .content{left:calc(var(--primary-collapsed) + var(--panel-w))}

/* Hide old .rail when .primary is present */
.primary ~ .rail{display:none}


/* ═══ APPOINTMENT WIDGET ═══ */
.appt-widget{margin:2px 0;padding:0 2px;flex-shrink:0}
.appt-card{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);
  position:relative;overflow:hidden;cursor:pointer;transition:border-color 0.18s var(--ease);
  display:flex;flex-direction:column;min-height:110px;height:var(--appt-h,148px);
}
.appt-card:hover{border-color:var(--border2)}

/* Animated gradient stripe */
.appt-stripe{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--teal,#2DD4BF),var(--blue),var(--accent));background-size:300% 100%;animation:stripeFlow 8s linear infinite}
@keyframes stripeFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}

.appt-body{padding:12px;flex:1;display:flex;flex-direction:column;overflow:hidden}
.appt-header{display:flex;align-items:center;gap:6px;margin-bottom:8px;white-space:nowrap;flex-shrink:0}
.appt-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--accent)}
.appt-when{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--green);display:flex;align-items:center;gap:4px}
.appt-pulse{width:6px;height:6px;border-radius:50%;background:var(--green);animation:apptPulse 2s ease-in-out infinite}
@keyframes apptPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(52,211,153,0.4)}50%{opacity:0.7;box-shadow:0 0 0 4px rgba(52,211,153,0)}}

.appt-clock{font-family:var(--mono);font-weight:700;color:var(--text);letter-spacing:-0.02em;line-height:1;margin-bottom:2px;flex-shrink:0;font-size:clamp(16px,calc(var(--appt-h,148px) * 0.14),36px);transition:font-size 0.15s var(--ease)}
.appt-date{font-size:11px;color:var(--muted);margin-bottom:auto;white-space:nowrap;flex-shrink:0;padding-bottom:8px}
.appt-person{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--border);white-space:nowrap;overflow:hidden;flex-shrink:0}
.appt-avatar{width:28px;height:28px;min-width:28px;border-radius:7px;background:linear-gradient(135deg,#3B82F6,#10B981);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
.appt-person-info{overflow:hidden;flex:1;min-width:0}

/* Scrolling text */
.appt-scroll{display:block;overflow:hidden;white-space:nowrap;position:relative}
.appt-scroll-inner{display:inline-block;padding-right:30px}
.appt-scroll.overflow .appt-scroll-inner{animation:textScroll var(--scroll-duration,8s) linear infinite}
@keyframes textScroll{0%{transform:translateX(0)}100%{transform:translateX(calc(-50% - 15px))}}
.appt-name{font-size:12px;font-weight:600;color:var(--text)}
.appt-device{font-size:10px;color:var(--muted)}

/* Resize handle */
.appt-resize{height:10px;cursor:ns-resize;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:opacity 0.2s}
.appt-card:hover .appt-resize{opacity:1}
.appt-resize-dots{width:24px;height:3px;background:radial-gradient(circle,var(--muted2) 1px,transparent 1px);background-size:6px 3px}

/* Collapsed mini widget */
.appt-mini{display:none;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border);align-items:center;justify-content:center;cursor:pointer;position:relative;transition:border-color 0.18s;margin:0 auto}
.appt-mini:hover{border-color:var(--border2)}
.appt-mini-stripe{position:absolute;top:0;left:50%;transform:translateX(-50%);width:20px;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--accent),var(--teal,#2DD4BF),var(--blue),var(--accent));background-size:300% 100%;animation:stripeFlow 8s linear infinite}
.appt-mini-icon{font-size:18px;line-height:1}
.appt-mini-dot{position:absolute;bottom:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--green);border:2px solid rgba(10,8,24,0.92);animation:apptPulse 2s ease-in-out infinite}
.appt-mini-tip{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-4px) scale(0.95);background:rgba(20,16,44,0.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-sm);padding:12px 14px;width:180px;opacity:0;pointer-events:none;transition:opacity 0.2s var(--ease),transform 0.2s var(--ease);box-shadow:0 8px 32px rgba(0,0,0,0.4);z-index:300}
.appt-mini-tip::before{content:'';position:absolute;left:-5px;top:50%;transform:translateY(-50%) rotate(45deg);width:10px;height:10px;background:rgba(20,16,44,0.92);border-left:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1)}
.appt-mini:hover .appt-mini-tip{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}

/* Widget visibility in collapsed state */
.primary.collapsed .appt-card{display:none}
.primary.collapsed .appt-mini{display:flex}

/* ── Widget picker grid (settings page) ── */
.widget-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.widget-option{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;cursor:pointer;transition:all 0.2s var(--ease);position:relative}
.widget-option:hover{border-color:var(--border2)}
.widget-option.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.widget-option.disabled{opacity:0.35;pointer-events:none}
.widget-option .wo-icon{font-size:28px;margin-bottom:8px}
.widget-option .wo-label{font-size:12px;font-weight:600;color:var(--text)}
.widget-option .wo-desc{font-size:10px;color:var(--muted);margin-top:2px}
.widget-option .wo-soon{position:absolute;top:8px;right:8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted2);background:var(--surface2);padding:2px 6px;border-radius:var(--radius-xs)}