@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600;6..12,700;6..12,800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Base theme: black glass */
:root{
   --bg:#080b14;
   --bg2:#0e1220;
   --s1:rgba(20,26,45,.65);--s2:rgba(28,36,60,.55);--s3:rgba(40,50,80,.45);--s4:rgba(56,68,105,.35);
   --b1:rgba(255,255,255,.07);--b2:rgba(255,255,255,.11);--b3:rgba(255,255,255,.18);
   --glass:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
   --glass-soft:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
   --glass-edge:rgba(255,255,255,.11);
   --glass-line:rgba(255,255,255,.06);
   --glass-shine:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(255,255,255,.02);
   --shadow-lg:0 24px 60px rgba(0,0,0,.4);
   --shadow-md:0 12px 28px rgba(0,0,0,.25);
   --blur:28px;
   --k:#a78bfa;--k2:#7c5fe6;--h:#38bdf8;--h2:#0ea5e9;
   --gold:#ffd07a;--red:#ff6d5e;--orange:#ffb15a;--purple:#bf97ff;--cyan:#67e8f9;
   --t1:#ffffff;
   --t2:rgba(255,255,255,.80);
   --t3:rgba(255,255,255,.44);
   --t4:rgba(255,255,255,.14);
   --font:'Nunito Sans',sans-serif;--mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
*{min-width:0;}                 /* let flex/grid children shrink instead of overflowing */
html,body{overflow-x:hidden;}   /* never allow a sideways page scroll that breaks layout */
body{background:
   radial-gradient(ellipse 80% 60% at 15% 0%,rgba(124,95,230,.18),transparent 60%),
   radial-gradient(ellipse 60% 50% at 90% 5%,rgba(56,189,248,.14),transparent 60%),
   radial-gradient(ellipse 50% 40% at 50% 100%,rgba(167,139,250,.08),transparent 60%),
   linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
   color:var(--t1);font-family:var(--font);font-size:13px;line-height:1.5;min-height:100vh;transition:background .35s,color .35s;}

/* AUTH */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 100% 60% at 50% -10%,color-mix(in srgb,var(--k) 14%,transparent),transparent 60%),
  radial-gradient(ellipse 60% 40% at 80% 80%,color-mix(in srgb,var(--h) 8%,transparent),transparent 60%);}
.auth-card{background:var(--glass),var(--s1);border:1px solid var(--glass-edge);border-radius:20px;padding:44px;width:440px;max-width:95vw;box-shadow:var(--glass-shine),var(--shadow-lg);backdrop-filter:blur(var(--blur)) saturate(128%);-webkit-backdrop-filter:blur(var(--blur)) saturate(128%);}
.brand{text-align:center;margin-bottom:32px;}
.brand h1{font-size:34px;font-weight:800;letter-spacing:-1.5px;}
.brand h1 .k{color:var(--k);}
.brand h1 .h{color:var(--h);}
.brand p{color:var(--t3);font-size:13px;margin-top:6px;}
.auth-tabs{display:flex;background:var(--s2);border-radius:10px;padding:3px;margin-bottom:24px;gap:2px;}
.at{flex:1;padding:9px;text-align:center;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--t3);transition:all .2s;border:none;background:none;font-family:var(--font);}
.at.on{background:var(--s3);color:var(--t1);}
.fg{margin-bottom:14px;}
.fg label{display:block;font-size:11px;font-weight:700;color:var(--t2);margin-bottom:5px;letter-spacing:.5px;text-transform:uppercase;}
.fg input,.fg select,.fg textarea{width:100%;background:var(--s2);border:1.5px solid var(--b1);border-radius:10px;padding:11px 14px;color:var(--t1);font-family:var(--font);font-size:14px;outline:none;transition:border-color .15s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--k);}
.fg select option{background:var(--s2);}
.fg textarea{resize:vertical;min-height:80px;}
.fg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fg-full{grid-column:1/-1;}
.btn{padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:var(--font);transition:all .15s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;letter-spacing:.1px;}
.btn-p{background:linear-gradient(135deg,#3b4862 0%,#253147 100%);color:#f8fbff;border:1px solid rgba(138,218,216,.16);width:100%;justify-content:center;padding:13px;font-size:14px;box-shadow:0 10px 24px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08);}
.btn-p:hover{background:linear-gradient(135deg,#4a5a79 0%,#2e3e59 100%);border-color:rgba(138,218,216,.3);transform:translateY(-1px);}
.btn-g{background:linear-gradient(180deg,rgba(67,67,78,.78),rgba(39,39,46,.9));color:rgba(255,255,255,.92);border:1.5px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--glass-shine),0 8px 22px rgba(0,0,0,.18);}
.btn-g:hover{background:linear-gradient(180deg,rgba(78,78,90,.86),rgba(48,48,56,.96));border-color:rgba(255,208,122,.22);color:#fff;transform:translateY(-1px);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(6,6,7,.9),0 0 0 4px rgba(138,218,216,.3);}
.btn-success{background:var(--h);color:#fff;}
.btn-success:hover{background:var(--h2);}
.btn-warn{background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.2);}
.btn-danger{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.2);}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px;}
.btn-xs{padding:4px 9px;font-size:11px;border-radius:6px;}
.err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#fca5a5;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;}
.ok{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);color:#6ee7b7;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;}

/* APP */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden;}
.sidebar{width:240px;background:var(--glass),var(--s1);border-right:1px solid var(--glass-edge);display:flex;flex-direction:column;flex-shrink:0;backdrop-filter:blur(var(--blur)) saturate(126%);-webkit-backdrop-filter:blur(var(--blur)) saturate(126%);box-shadow:var(--glass-shine),inset -1px 0 0 rgba(255,255,255,.02);}
.sb-top{display:none;}
.sb-user{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 14px 16px;border-bottom:1px solid var(--b1);background:linear-gradient(180deg,color-mix(in srgb,var(--k) 10%,transparent),transparent);}
.uav{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#fff;flex-shrink:0;border:2px solid color-mix(in srgb,var(--k) 60%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--k) 30%,transparent);}
.un{font-size:16px;font-weight:700;line-height:1.2;color:var(--t1);text-align:center;}
.ur{font-size:10px;color:var(--t3);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;text-align:center;}
.nav{flex:1;overflow-y:auto;padding:6px;}
.ns{font-size:11px;font-weight:800;color:#c7d2df;letter-spacing:1.4px;text-transform:uppercase;padding:15px 10px 5px;}
.ni{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--t2);transition:all .12s;margin-bottom:1px;}
.ni:hover{background:var(--s2);color:var(--t1);}
.ni.on{background:var(--s3);color:var(--t1);box-shadow:inset 3px 0 0 var(--k);}
.ni .ico{font-size:14px;width:18px;text-align:center;}
.sb-bot{padding:10px;border-top:1px solid var(--b1);}
.side-comfort{margin-bottom:8px;padding:8px 8px 10px;background:var(--s2);border:1px solid var(--b1);border-radius:10px;}
.side-comfort-title{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:7px;}
.side-comfort-row{display:flex;gap:6px;}
.side-comfort-btn{flex:1;border:1px solid var(--b2);background:var(--s3);color:var(--t2);padding:6px 8px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;font-family:var(--font);}
.side-comfort-btn:hover{border-color:var(--k);color:var(--t1);}
.side-comfort-btn.on{background:linear-gradient(135deg,var(--k),#7aa4ff);border-color:transparent;color:#fff;box-shadow:0 6px 14px rgba(122,164,255,.24);}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{background:var(--glass),var(--s1);border-bottom:1px solid var(--glass-edge);padding:0 20px;height:52px;display:flex;align-items:center;gap:12px;flex-shrink:0;backdrop-filter:blur(var(--blur)) saturate(126%);-webkit-backdrop-filter:blur(var(--blur)) saturate(126%);box-shadow:var(--glass-shine);position:relative;}
.tb-title{font-size:15px;font-weight:700;letter-spacing:-.3px;color:var(--t1);position:absolute;left:0;right:0;text-align:center;pointer-events:none;z-index:0;}
.co-tag{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.5px;}
.co-tag.k{background:rgba(100,140,248,.12);color:#a5bffc;border:1px solid rgba(100,140,248,.2);}
.co-tag.h{background:rgba(45,212,160,.12);color:#6ee7b7;border:1px solid rgba(45,212,160,.2);}
.tb-right{display:flex;gap:7px;align-items:center;position:relative;z-index:1;}
.content{flex:1;overflow-y:auto;padding:14px 16px;}

/* DASHBOARD HERO */
.hero{background:linear-gradient(135deg,var(--s2) 0%,var(--s3) 100%);border:1px solid var(--b1);border-radius:16px;padding:28px 32px;margin-bottom:20px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,color-mix(in srgb,var(--k) 18%,transparent),transparent 70%);}
.hero::after{content:'';position:absolute;bottom:-60px;right:100px;width:150px;height:150px;background:radial-gradient(circle,color-mix(in srgb,var(--h) 12%,transparent),transparent 70%);}
.hero-greeting{font-size:13px;color:var(--t2);margin-bottom:6px;font-family:var(--mono);}
.hero-name{font-size:30px;font-weight:800;letter-spacing:-1px;margin-bottom:4px;color:var(--t1);}
.hero-name span{color:var(--k);}
.hero-sub{font-size:13px;color:var(--t2);}
.hero-stats{display:flex;gap:24px;margin-top:20px;}
.hs{background:rgba(255,255,255,.04);border:1px solid var(--b1);border-radius:10px;padding:12px 18px;min-width:120px;}

/* ═══════════════════════════════════════════
   DASHBOARD v2 — warm, spacious, accomplishment-first
   ═══════════════════════════════════════════ */

/* Hero welcome */
.db-hero{background:var(--glass),linear-gradient(145deg,var(--s1) 0%,var(--s2) 100%);border:1px solid var(--glass-edge);border-radius:20px;padding:44px 36px 34px;margin-bottom:14px;position:relative;overflow:hidden;backdrop-filter:blur(calc(var(--blur) + 2px)) saturate(130%);-webkit-backdrop-filter:blur(calc(var(--blur) + 2px)) saturate(130%);box-shadow:var(--glass-shine),var(--shadow-md);text-align:center;}
.db-hero::before{content:'';position:absolute;top:-80px;right:-80px;width:320px;height:320px;background:radial-gradient(circle,color-mix(in srgb,var(--k) 10%,transparent),transparent 70%);pointer-events:none;}
.db-hero::after{content:'';position:absolute;bottom:-80px;left:-40px;width:240px;height:240px;background:radial-gradient(circle,color-mix(in srgb,var(--h) 7%,transparent),transparent 70%);pointer-events:none;}
.db-time{font-size:48px;font-weight:200;font-family:var(--mono);color:var(--t1);letter-spacing:2px;margin-bottom:2px;line-height:1;}
.db-date{font-size:14px;font-family:var(--mono);color:var(--t3);margin-bottom:24px;letter-spacing:.6px;}
.db-greet{font-size:15px;font-family:var(--mono);color:var(--t3);margin-bottom:6px;letter-spacing:.8px;text-transform:uppercase;}
.db-name{font-size:52px;font-weight:800;letter-spacing:-1.5px;line-height:1.1;margin-bottom:8px;}
.db-name span{color:var(--k);}
.db-sub{font-size:15px;color:var(--t2);margin-bottom:28px;}
.db-font-tag{display:inline-block;font-size:10px;color:var(--t3);background:var(--s3);border:1px solid var(--b2);border-radius:20px;padding:3px 12px;margin-top:12px;font-family:var(--mono);letter-spacing:.5px;}
.db-kpis{display:flex;gap:0;border:1px solid var(--b1);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 var(--glass-line);}
.db-kpi{flex:1;padding:18px 22px;border-right:1px solid var(--b1);position:relative;}
.db-kpi:last-child{border-right:none;}
.db-kpi-v{font-family:var(--mono);font-size:22px;font-weight:800;margin-bottom:5px;}
.db-kpi-l{font-size:10px;font-weight:600;color:var(--t3);letter-spacing:.8px;text-transform:uppercase;}

/* Center time-period selector (hidden behind the arrow) */
.db-period{position:relative;display:flex;justify-content:center;margin-bottom:18px;}
.db-period-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:20px;border:1px solid var(--b1);background:var(--s2);color:var(--t2);font-size:12px;font-weight:700;font-family:var(--mono);letter-spacing:.4px;cursor:pointer;transition:border-color .15s,color .15s;}
.db-period-btn:hover{border-color:var(--k);color:var(--t1);}
.db-period-arr{font-size:11px;color:var(--t3);}
.db-period-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:30;width:min(560px,90vw);background:var(--glass),var(--s1);border:1px solid var(--glass-edge);border-radius:14px;padding:14px 16px;backdrop-filter:blur(18px) saturate(128%);-webkit-backdrop-filter:blur(18px) saturate(128%);box-shadow:var(--glass-shine),var(--shadow-md);text-align:left;}
.db-period-range{display:flex;gap:8px;justify-content:center;margin-top:10px;}
.hs-l{font-size:10px;color:var(--t2);letter-spacing:1.2px;text-transform:uppercase;font-family:var(--mono);margin-bottom:4px;}
.hs-v{font-size:20px;font-weight:800;font-family:var(--mono);color:var(--t1);}

/* STATS GRID (legacy — kept for dashboard) */
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
.sc{background:var(--s1);border:1px solid var(--b1);border-radius:12px;padding:18px 20px;}
.sc-l{font-size:10px;font-weight:700;color:var(--t2);letter-spacing:1.2px;text-transform:uppercase;font-family:var(--mono);margin-bottom:6px;}
.sc-v{font-size:24px;font-weight:800;font-family:var(--mono);color:var(--t1);}
.sc-s{font-size:11px;color:var(--t3);margin-top:3px;}
.c-b{color:#93c5fd;}.c-g{color:#6ee7b7;}.c-a{color:#fcd34d;}.c-r{color:#fca5a5;}.c-p{color:#c4b5fd;}.c-c{color:#67e8f9;}

/* ═══════════════════════════════════════════
   RICH PILLS + HOVER DONUT CHARTS
   ═══════════════════════════════════════════ */

/* --- Stats bar container --- */
.stats-bar{display:flex;align-items:stretch;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px 14px;background:var(--glass-soft),var(--s1);border:1px solid var(--glass-edge);border-radius:10px 10px 0 0;backdrop-filter:blur(18px) saturate(126%);-webkit-backdrop-filter:blur(18px) saturate(126%);box-shadow:var(--glass-shine);position:relative;z-index:15;}
.stats-bar .stat-sep{width:1px;align-self:stretch;background:var(--b2);flex-shrink:0;margin:0 4px;}
/* Stat pills — stacked card: big value on top, small uppercase label below */
.stat-pill{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:84px;padding:8px 15px;border-radius:12px;background:var(--s2);border:1px solid var(--b1);flex-shrink:0;transition:border-color .15s,box-shadow .15s,transform .1s;}
.stat-pill[onclick]{cursor:pointer;}
.stat-pill[onclick]:hover{border-color:var(--b3);transform:translateY(-1px);}
.stat-pill.sp-on{border-color:var(--k);box-shadow:inset 0 0 0 1px var(--k);background:var(--s3);}
.stat-pill .sp-v{font-size:19px;font-weight:800;line-height:1;font-family:var(--mono);white-space:nowrap;}
.stat-pill .sp-l{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--t3);font-weight:700;white-space:nowrap;}
/* ═══ RICH TEXT EDITOR ═══ */
.rte{border:1.5px solid var(--b1);border-radius:9px;overflow:hidden;background:var(--s2);transition:border-color .15s;}
.rte:focus-within{border-color:var(--k);}
.rte-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:6px 8px;border-bottom:1px solid var(--b1);background:var(--s3);}
.rte-btn{background:var(--s2);border:1px solid var(--b1);border-radius:6px;color:var(--t2);font-size:12px;min-width:28px;padding:3px 9px;cursor:pointer;line-height:1.3;font-family:var(--font);transition:border-color .12s,color .12s,background .12s;}
.rte-btn:hover{border-color:var(--k);color:var(--t1);background:var(--s4,var(--s3));}
.rte-btn:active{transform:translateY(1px);}
.rte-sep{width:1px;height:18px;background:var(--b2);margin:0 3px;flex-shrink:0;}
.rte-area{max-height:340px;overflow-y:auto;padding:12px 14px;color:var(--t1);font-size:13px;line-height:1.6;outline:none;}
.rte-area:empty:before{content:attr(data-ph);color:var(--t3);font-style:italic;}
/* shared formatted-content typography (editor + read-only display) */
.rte-area p,.rte-content p{margin:0 0 9px;}
.rte-area p:last-child,.rte-content p:last-child{margin-bottom:0;}
.rte-area ul,.rte-content ul,.rte-area ol,.rte-content ol{margin:7px 0 11px;padding-left:24px;}
.rte-area li,.rte-content li{margin:3px 0;line-height:1.55;}
.rte-area b,.rte-area strong,.rte-content b,.rte-content strong{font-weight:700;color:#fff;}
.rte-area h3,.rte-content h3,.rte-area h4,.rte-content h4{margin:10px 0 6px;font-size:14px;font-weight:700;color:#fff;}
.rte-area a,.rte-content a{color:var(--k);text-decoration:underline;}
/* read-only rendered notes */
.rte-content{font-size:13px;line-height:1.6;color:var(--t1);white-space:normal;}
.rte-content:empty{display:none;}

/* --- Rich pill --- */
.rpill{position:relative;display:flex;flex-direction:column;gap:3px;padding:8px 14px;border-radius:9px;background:var(--glass-soft),var(--s2);border:1px solid var(--b1);min-width:120px;cursor:pointer;transition:all .15s;user-select:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 var(--glass-line);}
.rpill:hover{background:var(--s3);border-color:var(--b3);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:25;}
.rpill:active{transform:scale(.98);}
.rpill.sp-on{border-color:var(--k);box-shadow:0 0 0 1px var(--k),0 4px 12px rgba(59,130,246,.15);}
.rpill.sp-warn{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.25);}
.rpill.sp-warn:hover{background:rgba(245,158,11,.1);}
.rpill-top{display:flex;align-items:baseline;gap:6px;}
.rpill-icon{font-size:13px;}
.rpill-val{font-family:var(--mono);font-size:17px;font-weight:800;line-height:1;}
.rpill-lbl{font-size:11px;color:var(--t2);font-weight:500;}
.rpill-bar{height:3px;border-radius:3px;background:var(--s4);overflow:hidden;margin-top:1px;}
.rpill-bar-fill{height:100%;border-radius:3px;transition:width .4s ease;}
.rpill-sub{font-size:10px;color:var(--t2);font-family:var(--mono);white-space:nowrap;}

/* --- Donut popover on hover --- */
.rpill-pop{position:absolute;bottom:calc(100% + 8px);top:auto;left:50%;transform:translateX(calc(-50% + var(--rpill-pop-shift,0px))) scale(.92);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2200;
   background:var(--glass),var(--s1);border:1px solid var(--glass-edge);border-radius:12px;padding:14px 16px;min-width:180px;
   box-shadow:var(--glass-shine),0 12px 32px rgba(0,0,0,.24);backdrop-filter:blur(20px) saturate(128%);-webkit-backdrop-filter:blur(20px) saturate(128%);}
.rpill-pop::after{content:'';position:absolute;top:100%;left:calc(50% + var(--rpill-pop-arrow-shift,0px));transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--b2);}
.rpill-pop.rpill-pop-below{top:calc(100% + 8px);bottom:auto;}
.rpill-pop.rpill-pop-below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--b2);}
.rpill:hover .rpill-pop{opacity:1;transform:translateX(calc(-50% + var(--rpill-pop-shift,0px))) scale(1);pointer-events:auto;}
.rpill-donut{width:72px;height:72px;border-radius:50%;margin:0 auto 8px;position:relative;}
.rpill-donut-hole{position:absolute;inset:14px;border-radius:50%;background:var(--s1);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:800;color:var(--t1);}
.rpill-pop-rows{display:flex;flex-direction:column;gap:3px;}
.rpill-pop-row{display:flex;align-items:center;gap:6px;font-size:11px;}
.rpill-pop-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.rpill-pop-rlbl{color:var(--t2);}
.rpill-pop-rval{margin-left:auto;font-family:var(--mono);font-weight:700;color:var(--t1);}

/* ═══════════════════════════════════════════
   FILTER TOGGLE BUTTON + STRIP (all doc tabs)
   ═══════════════════════════════════════════ */
.filter-toggle-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:20px;background:linear-gradient(135deg,var(--s2),var(--s3));border:1px solid var(--b2);color:var(--t3);font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;transition:all .2s;font-family:var(--font);}
.filter-toggle-btn .ft-icon{font-size:11px;transition:transform .2s;}
.filter-toggle-btn:hover{color:var(--t1);border-color:var(--b3);box-shadow:0 2px 8px rgba(0,0,0,.25);}
.filter-toggle-btn.active{color:var(--k);border-color:var(--k);background:rgba(59,130,246,.08);box-shadow:0 0 0 1px rgba(59,130,246,.2),0 2px 10px rgba(59,130,246,.1);}
.filter-toggle-btn.active .ft-icon{transform:rotate(180deg);}
.filter-strip{overflow:hidden;max-height:0;transition:max-height .25s ease,opacity .2s ease,padding .25s ease;opacity:0;padding:0 14px;background:var(--glass-soft),var(--s1);border-top:0 solid var(--glass-edge);display:flex;gap:8px;flex-wrap:wrap;align-items:center;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 var(--glass-line);}
.filter-strip.open{max-height:60px;opacity:1;padding:8px 14px;border-top-width:1px;}
.filter-strip select,.filter-strip input{background:var(--s2);border:1px solid var(--b1);border-radius:7px;padding:5px 10px;color:var(--t1);font-family:var(--font);font-size:11px;outline:none;height:28px;}
.filter-strip select:focus,.filter-strip input:focus{border-color:var(--k);}
.filter-strip .sb-wrap{position:relative;}
.filter-strip .sb-wrap input{padding-left:26px;width:160px;}
.filter-strip .sb-wrap .si{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--t3);}
.pg-toolbar,.stats-bar{overflow:visible;}

/* --- Pill-shaped filters kept for non-redesigned tabs --- */
.stats-bar select{background:var(--s2);border:1px solid var(--b1);border-radius:7px;padding:4px 10px;color:var(--t1);font-family:var(--font);font-size:11px;outline:none;cursor:pointer;transition:border-color .15s;height:28px;}
.stats-bar select:hover{border-color:var(--b2);background:var(--s3);}
.stats-bar select:focus{border-color:var(--k);}
.stats-bar .sb-wrap{position:relative;}
.stats-bar .sb-wrap input{background:var(--s2);border:1px solid var(--b1);border-radius:7px;padding:4px 10px 4px 28px;color:var(--t1);font-family:var(--font);font-size:11px;outline:none;width:160px;height:28px;transition:border-color .15s;}
.stats-bar .sb-wrap input:focus{border-color:var(--k);width:200px;}
.stats-bar .sb-wrap .si{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:11px;}
.stats-bar input[type=date]{background:var(--s2);border:1px solid var(--b1);border-radius:7px;padding:4px 8px;color:var(--t1);font-family:var(--font);font-size:11px;outline:none;height:28px;color-scheme:dark;}
input.date-range-f{background:var(--s2);border:1px solid var(--b1);border-radius:7px;padding:4px 8px;color:var(--t1);font-family:var(--font);font-size:11px;outline:none;height:28px;color-scheme:dark;}
input.date-range-f:focus{border-color:var(--k);}
.stats-bar .stat-right{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;cursor:default;}

/* TOOLBAR wrapper */
.pg-toolbar{margin-bottom:0;position:relative;z-index:12;}

/* FLEX LIST PAGE */
.pg-list{display:flex;flex-direction:column;height:calc(100vh - 92px);}
.pg-list .tc{flex:1;display:flex;flex-direction:column;min-height:0;border-radius:0 0 10px 10px;border-top:1px solid var(--b1);}
.pg-list .tw{flex:1;max-height:none;overflow-y:auto;}

/* CHARTS */
.charts-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-bottom:18px;}
.chart-card{background:var(--glass-soft),var(--s1);border:1px solid var(--glass-edge);border-radius:12px;padding:18px;backdrop-filter:blur(18px) saturate(128%);-webkit-backdrop-filter:blur(18px) saturate(128%);box-shadow:var(--glass-shine),var(--shadow-md);}
.chart-title{font-size:13px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.chart-wrap{position:relative;height:200px;}
.dash-chart-ctrls{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;}
.dash-chart-sel{background:var(--s2);border:1px solid var(--b1);border-radius:7px;padding:4px 8px;color:var(--t1);font-family:var(--font);font-size:11px;font-weight:500;outline:none;height:28px;cursor:pointer;max-width:160px;}
.dash-chart-sel:focus{border-color:var(--k);}

/* TABLES */
.tc{background:var(--glass-soft),var(--s1);border:1px solid var(--glass-edge);border-radius:12px;overflow:hidden;backdrop-filter:blur(18px) saturate(128%);-webkit-backdrop-filter:blur(18px) saturate(128%);box-shadow:var(--glass-shine),var(--shadow-md);position:relative;z-index:1;}
.th{padding:12px 18px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px;flex-wrap:wrap;gap:8px;}
.tt{font-size:13px;font-weight:700;}
.ta{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.tw{overflow-x:auto;max-height:52vh;overflow-y:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{padding:9px 12px;text-align:center;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--t2);letter-spacing:1.2px;text-transform:uppercase;background:var(--s2);border-bottom:1px solid var(--b2);white-space:nowrap;position:sticky;top:0;z-index:2;}
td{padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;font-size:13px;text-align:center;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,255,255,.015);}
.ra{display:flex;gap:4px;opacity:0;transition:opacity .12s;}
tr:hover .ra{opacity:1;}
.pager{display:flex;align-items:center;gap:6px;padding:12px 16px;flex-wrap:wrap;border-top:1px solid var(--b1);}
.pager-info{font-size:11px;color:var(--t3);margin-right:8px;font-family:var(--mono);}
.pager button:disabled{opacity:.35;cursor:default;}

/* ── FULL-HEIGHT PAGE LAYOUT ─────────────────────────────────────────
   Wrap a "filter bar + table card" page in <div class="page-fill"> so the
   table card stretches to fill all remaining height (no empty bottom gap).
   The filter bar and pager keep their natural size; only the scroll area grows. */
.page-fill{display:flex;flex-direction:column;height:100%;min-height:0;gap:8px;}
.page-fill>.fb{flex-shrink:0;margin-bottom:0;}
.page-fill>.tc{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.page-fill>.tc>.tw{flex:1 1 auto;min-height:0;max-height:none;}
.page-fill>.tc>.pager,
.page-fill>.tc>[id$="-pager"],
.page-fill>.tc>[id$="-pager"] .pager{flex-shrink:0;}

/* BADGES */
.badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;font-family:var(--mono);display:inline-block;letter-spacing:.3px;}
.bg-g{background:rgba(45,212,160,.1);color:#6ee7b7;border:1px solid rgba(45,212,160,.18);}
.bg-r{background:rgba(248,113,113,.1);color:#fca5a5;border:1px solid rgba(248,113,113,.18);}
.bg-a{background:rgba(251,191,36,.1);color:#fcd34d;border:1px solid rgba(251,191,36,.18);}
.bg-b{background:rgba(100,140,248,.1);color:#a5bffc;border:1px solid rgba(100,140,248,.18);}
.bg-p{background:rgba(167,139,250,.1);color:#c4b5fd;border:1px solid rgba(167,139,250,.18);}
.bg-c{background:rgba(34,211,238,.1);color:#67e8f9;border:1px solid rgba(34,211,238,.18);}
.bg-gr{background:rgba(152,152,174,.06);color:var(--t2);border:1px solid rgba(152,152,174,.12);}

/* MODAL */
.mb{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);animation:fi .15s;}
@keyframes fi{from{opacity:0}to{opacity:1}}
.modal{background:var(--s1);border:1.5px solid var(--b2);border-radius:16px;padding:26px;width:580px;max-width:96vw;max-height:92vh;overflow-y:auto;animation:su .2s;}
@keyframes su{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.modal-lg{width:780px;}
.modal-xl{width:960px;}
.mt{font-size:16px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:9px;}
.ma{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid var(--b1);}

/* BLOCKING PROGRESS OVERLAY */
.busy-lock{overflow:hidden;}
.busy-ov{position:fixed;inset:0;background:rgba(2,6,12,.88);z-index:2000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
.busy-card{width:min(560px,92vw);background:var(--s1);border:1.5px solid var(--b2);border-radius:14px;padding:18px 20px;box-shadow:0 24px 70px rgba(0,0,0,.55);}
.busy-title{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--t1);}
.busy-desc{font-size:12px;color:var(--t2);min-height:18px;margin-bottom:10px;}
.busy-info{font-size:11px;color:#93c5fd;min-height:16px;margin:-2px 0 10px 0;font-family:var(--mono);}
.busy-track{height:10px;background:var(--s3);border:1px solid var(--b1);border-radius:999px;overflow:hidden;}
.busy-fill{height:100%;width:0;background:linear-gradient(90deg,var(--k),var(--h));transition:width .2s ease;}
.busy-meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;color:var(--t2);margin-top:8px;}
.busy-stats{margin-top:6px;font-size:11px;color:var(--t2);font-family:var(--mono);background:var(--s2);border:1px solid var(--b1);border-radius:8px;padding:6px 8px;}

/* FILTERS BAR */
.fb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px;}
.fb select,.fb input{background:var(--s2);border:1.5px solid var(--b1);border-radius:8px;padding:6px 11px;color:var(--t1);font-family:var(--font);font-size:12px;outline:none;}
.fb select:focus,.fb input:focus{border-color:var(--k);}
.fb input[type=text]{width:200px;}

/* SEARCH */
.sb-wrap{position:relative;}
.sb-wrap input{background:var(--s2);border:1.5px solid var(--b1);border-radius:9px;padding:8px 12px 8px 34px;color:var(--t1);font-family:var(--font);font-size:12px;outline:none;width:220px;}
.sb-wrap input:focus{border-color:var(--k);}
.sb-wrap .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:12px;}

/* DB EDITOR — Supabase-style table editor */
.dbe-shell{display:flex;flex-direction:column;gap:12px;}
.dbe-tabs{display:flex;flex-wrap:wrap;gap:6px;}
.dbe-bar{background:var(--s2);}
.dbe-count{font-size:11px;color:var(--t3);font-family:var(--mono);}
.dbe-psize{height:28px;border-radius:7px;background:var(--s2);border:1px solid var(--b1);color:var(--t1);font-size:11px;padding:0 6px;cursor:pointer;}
table.dbe-grid{font-size:12px;}
table.dbe-grid th,table.dbe-grid td{text-align:left;}
table.dbe-grid th.dbe-h{cursor:pointer;user-select:none;vertical-align:bottom;}
table.dbe-grid th.dbe-h:hover{background:var(--s3);}
.dbe-h-in{display:flex;flex-direction:column;gap:2px;}
.dbe-h-name{font-size:11px;color:var(--t1);text-transform:none;letter-spacing:0;font-family:var(--font);font-weight:700;white-space:nowrap;}
.dbe-kind{font-size:9px;color:var(--k);letter-spacing:.5px;text-transform:uppercase;font-family:var(--mono);}
.dbe-corner{width:46px;text-align:center;color:var(--t3);}
tr.dbe-filter td{padding:5px 6px;background:var(--s1);border-bottom:1px solid var(--b2);}
.dbe-f{width:100%;min-width:80px;background:var(--s2);border:1px solid var(--b1);border-radius:6px;padding:4px 7px;color:var(--t1);font-size:11px;outline:none;font-family:var(--font);}
.dbe-f:focus{border-color:var(--k);}
.dbe-rownum{width:46px;text-align:center;color:var(--t3);font-family:var(--mono);font-size:10px;background:var(--s1);}
td.dbe-cell{cursor:cell;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 10px;}
td.dbe-cell.num{text-align:right;font-family:var(--mono);}
td.dbe-cell.ro{color:var(--t3);background:rgba(255,255,255,.015);cursor:not-allowed;}
td.dbe-cell.sel{background:rgba(167,139,250,.22)!important;box-shadow:inset 0 0 0 1px var(--k);}
td.dbe-cell.dirty{background:rgba(250,204,21,.16)!important;box-shadow:inset 0 0 0 1px rgba(250,204,21,.6);}
.dbe-null{color:var(--t3);font-style:italic;font-size:10px;font-family:var(--mono);}
.dbe-empty{text-align:center!important;color:var(--t3);padding:24px;font-size:12px;}
.dbe-fk{background:transparent;border:none;color:var(--h);cursor:pointer;font-size:12px;padding:0 2px;line-height:1;}
.dbe-fk:hover{color:var(--k);}
.dbe-edit{width:100%;background:var(--s3);border:1.5px solid var(--k);border-radius:5px;padding:4px 7px;color:var(--t1);font-size:12px;outline:none;font-family:var(--font);}
.dbe-newrow td{background:rgba(56,189,248,.06);}
.dbe-newbadge{color:var(--h);font-weight:800;font-size:9px;}
.dbe-ninput{width:100%;min-width:90px;background:var(--s2);border:1px solid var(--b2);border-radius:5px;padding:4px 7px;color:var(--t1);font-size:12px;outline:none;font-family:var(--font);}
.dbe-ninput:focus{border-color:var(--h);}
.dbe-act{width:46px;text-align:center;}
.dbe-savebar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:250;display:flex;align-items:center;gap:12px;background:var(--s1);border:1.5px solid var(--k);border-radius:12px;padding:10px 16px;box-shadow:0 12px 40px rgba(0,0,0,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.dbe-sb-txt{font-size:12px;font-weight:700;color:#fcd34d;font-family:var(--mono);}

/* LINE ITEMS */
.li-table{width:100%;border-collapse:collapse;margin:6px 0;}
.li-table th{background:var(--s3);padding:7px 9px;font-size:10px;color:var(--t2);text-align:left;font-weight:700;letter-spacing:1px;}
.li-table td{padding:4px 3px;border-bottom:1px solid var(--b1);}
.li-table input{background:var(--s2);border:1.5px solid var(--b1);border-radius:6px;padding:6px 8px;color:var(--t1);font-size:12px;width:100%;outline:none;font-family:var(--font);}
.li-table input:focus{border-color:var(--k);}
.li-table input[readonly]{background:var(--s3);color:var(--t3);}

/* INVOICE PRINT */
.inv-wrap{background:#fff;color:#111;border-radius:8px;padding:32px;font-family:Arial,sans-serif;font-size:12px;line-height:1.5;}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #111;}
.inv-logo{font-size:22px;font-weight:900;letter-spacing:-1px;}
.inv-logo span{color:#2563eb;}
.inv-logo .hh span{color:#059669;}
.inv-right{text-align:right;}
.inv-right h2{font-size:22px;font-weight:300;color:#555;margin-bottom:4px;}
.inv-right .ino{font-size:12px;font-weight:700;color:#111;}
.inv-right .bal{margin-top:6px;font-size:11px;color:#777;}
.inv-right .bal strong{font-size:17px;color:#111;display:block;}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px;font-size:12px;}
.inv-parties h4{font-size:9px;color:#999;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px;}
.inv-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.im{background:#f5f5f5;padding:9px 12px;border-radius:5px;}
.im .lbl{font-size:9px;color:#999;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px;}
.im .val{font-size:12px;font-weight:700;}
.inv-tbl{width:100%;border-collapse:collapse;margin-bottom:16px;}
.inv-tbl th{background:#111;color:#fff;padding:9px 11px;text-align:left;font-size:11px;}
.inv-tbl td{padding:9px 11px;border-bottom:1px solid #eee;font-size:12px;}
.inv-tots{margin-left:auto;width:260px;}
.itr{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #eee;font-size:12px;}
.itf{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;font-weight:700;border-top:2px solid #111;margin-top:3px;}
.inv-bank{margin-top:16px;padding:12px;background:#f5f5f5;border-radius:5px;font-size:11px;line-height:1.9;color:#555;}
.inv-footer{margin-top:14px;display:flex;justify-content:space-between;align-items:flex-end;font-size:11px;color:#888;}
.inv-sig{border-top:1px solid #ccc;padding-top:7px;min-width:160px;text-align:center;}
.inv-terms{font-size:10px;color:#888;margin-top:10px;padding-top:10px;border-top:1px solid #eee;}

/* DROPDOWN */
.dw{position:relative;}
.dl{position:absolute;top:calc(100%+3px);left:0;right:0;background:var(--s2);border:1.5px solid var(--b2);border-radius:9px;max-height:200px;overflow-y:auto;z-index:200;box-shadow:0 12px 40px rgba(0,0,0,.6);}
.di{padding:8px 13px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--b1);}
.di:last-child{border-bottom:none;}
.di:hover{background:var(--s3);}
.di small{display:block;font-size:10px;color:var(--t3);font-family:var(--mono);}

/* LEDGER */
.lc{background:var(--s1);border:1px solid var(--b1);border-radius:12px;padding:18px;margin-bottom:12px;}
.lc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;}
.lc-stat{background:var(--s2);border-radius:8px;padding:10px 12px;}
.lc-sl{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;font-family:var(--mono);margin-bottom:3px;}
.lc-sv{font-size:16px;font-weight:800;font-family:var(--mono);}

/* UNBILLED TRACKER */
.ubt{background:linear-gradient(135deg,rgba(245,158,11,.05),rgba(239,68,68,.03));border:1px solid rgba(245,158,11,.15);border-radius:12px;padding:14px 18px;margin-bottom:16px;}
.ubt-title{font-size:12px;font-weight:700;color:#fcd34d;margin-bottom:10px;display:flex;align-items:center;gap:7px;}
.ubt-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:rgba(0,0,0,.2);border-radius:7px;margin-bottom:5px;font-size:11px;}

/* TABS */
.tabs{display:flex;gap:1px;border-bottom:1px solid var(--b1);margin-bottom:16px;}
.tab{padding:8px 16px;font-size:12px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .12s;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--font);}
.tab:hover{color:var(--t1);}
.tab.on{color:var(--t1);border-bottom-color:var(--k);}

/* CUSTOMER CARD */

/* DOCUMENT HISTORY DROPDOWN */
.hist-dd{background:var(--s2);border:1px solid var(--b2);border-radius:8px;padding:10px 14px;margin:4px 12px 8px;max-width:480px;box-shadow:0 4px 16px rgba(0,0,0,.35);}
.hist-dd-row td{background:var(--s1) !important;}
.hist-sec{padding:5px 0;border-bottom:1px solid var(--b1);}
.hist-sec:last-child{border-bottom:none;}
.hist-lbl{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;}
.hist-cur{font-size:11px;color:var(--t2);padding:2px 0;}
.hist-cur .hist-date{color:var(--t3);margin-left:6px;font-size:10px;}
.hist-link{font-size:11px;color:var(--gold);cursor:pointer;padding:2px 0;transition:color .15s;}
.hist-link:hover{color:#fff;text-decoration:underline;}
.hist-link .hist-date{color:var(--t3);margin-left:6px;font-size:10px;}
.hist-warn{font-size:11px;color:var(--t2);padding:2px 0;}
.hist-notup{color:#ef4444;opacity:.65;font-size:10px;margin-left:4px;font-style:italic;}
.hist-none{font-size:11px;color:var(--t3);padding:2px 0;font-style:italic;}
.cust-card{background:var(--s1);border:1px solid var(--b1);border-radius:12px;padding:16px 18px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;transition:border-color .15s;}
.cust-card:hover{border-color:var(--b2);}
.cust-name{font-size:15px;font-weight:700;margin-bottom:3px;}
.cust-meta{font-size:11px;color:var(--t2);line-height:1.7;font-family:var(--mono);}

/* ALERT */
.alert{border-radius:10px;padding:12px 16px;margin-bottom:14px;display:flex;align-items:flex-start;gap:10px;font-size:12px;}
.alert-r{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.15);color:#fca5a5;}
.alert-a{background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.15);color:#fcd34d;}
.alert-g{background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.15);color:#6ee7b7;}
.alert-b{background:rgba(59,130,246,.07);border:1px solid rgba(59,130,246,.15);color:#93c5fd;}

/* PHOTO */
.photo-thumb{width:40px;height:40px;border-radius:7px;object-fit:cover;border:1px solid var(--b1);cursor:pointer;}
.photo-placeholder{width:40px;height:40px;border-radius:7px;background:var(--s3);border:1px solid var(--b1);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;}

/* TOAST */
.toast{position:fixed;bottom:20px;right:20px;background:var(--s2);border:1.5px solid var(--b2);border-radius:10px;padding:12px 16px;font-size:12px;z-index:999;box-shadow:0 12px 40px rgba(0,0,0,.6);max-width:320px;animation:si .3s;}
@keyframes si{from{transform:translateX(120%)}to{transform:translateX(0)}}
.toast.s{border-left:3px solid var(--h);}
.toast.e{border-left:3px solid var(--red);}
.toast.i{border-left:3px solid var(--k);}

/* DB TABLE BUTTONS */
.dbt{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.dbtb{padding:6px 13px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--b1);background:var(--s2);color:var(--t2);transition:all .12s;font-family:var(--font);}
.dbtb:hover{border-color:var(--b2);color:var(--t1);}
.dbtb.on{background:var(--s3);color:var(--t1);border-color:var(--k);}

::-webkit-scrollbar{width:4px;height:4px;}
input[type="date"]{color-scheme:dark;}
input[type="month"]{color-scheme:dark;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;}
.hidden{display:none!important;}
.loading{text-align:center;padding:48px;color:var(--t3);font-size:13px;}
.empty{text-align:center;padding:48px 20px;color:var(--t3);}
.empty .ei{font-size:32px;margin-bottom:8px;}
.empty h3{font-size:14px;color:var(--t2);margin-bottom:4px;}

/* ═══ DOCUMENT SEARCH ENGINE ═══ */
.ds-landing{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:40px 20px;transition:all .4s ease;}
.ds-landing.ds-compact{min-height:auto;padding:20px 20px 10px;justify-content:flex-start;}
.ds-landing.ds-compact .ds-logo{font-size:32px;margin-bottom:4px;}
.ds-landing.ds-compact .ds-title,.ds-landing.ds-compact .ds-sub,.ds-landing.ds-compact .ds-hints{display:none;}
.ds-landing.ds-compact .ds-welcome{padding:10px 14px;margin-bottom:8px;max-width:760px;}
.ds-landing.ds-compact .ds-welcome-hi{font-size:14px;}
.ds-landing.ds-compact .ds-welcome-sub{font-size:11px;}
.ds-welcome{width:100%;max-width:860px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--glass-edge);border-radius:14px;padding:16px 18px;margin-bottom:14px;box-shadow:var(--glass-shine);}
.ds-welcome-hi{font-size:18px;font-weight:700;color:var(--t1);letter-spacing:-.2px;}
.ds-welcome-sub{font-size:12px;color:var(--t2);margin-top:4px;}
.ds-logo{font-size:64px;margin-bottom:10px;filter:drop-shadow(0 4px 20px rgba(59,130,246,.3));}
.ds-title{font-size:26px;font-weight:800;color:var(--t1);margin-bottom:4px;letter-spacing:-.5px;}
.ds-sub{font-size:13px;color:var(--t3);margin-bottom:28px;}
.ds-bar{display:flex;gap:8px;width:100%;max-width:600px;margin-bottom:16px;}
.ds-input{flex:1;background:var(--s2);border:2px solid var(--b2);border-radius:14px;padding:14px 20px;font-size:15px;color:var(--t1);outline:none;transition:border-color .2s,box-shadow .2s;font-family:var(--mono);}
.ds-input:focus{border-color:var(--k);box-shadow:0 0 0 4px rgba(59,130,246,.12);}
.ds-input::placeholder{color:var(--t3);font-family:var(--body);}
.ds-btn{background:linear-gradient(135deg,var(--k),#2563eb);color:#fff;border:none;border-radius:14px;padding:14px 28px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s;}
.ds-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(59,130,246,.3);}
.ds-hints{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.ds-hint{font-size:11px;color:var(--t3);background:var(--s2);border:1px solid var(--b1);border-radius:20px;padding:4px 12px;cursor:pointer;transition:border-color .15s,color .15s;}
.ds-hint:hover{border-color:var(--k);color:var(--t1);}
.ds-results{padding:0 6px 20px;}
.ds-actions{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px;}
.ds-loading{text-align:center;padding:48px;color:var(--t3);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.ds-spinner{width:32px;height:32px;border:3px solid var(--b2);border-top-color:var(--k);border-radius:50%;animation:ds-spin .7s linear infinite;}
@keyframes ds-spin{to{transform:rotate(360deg)}}
.ds-empty{text-align:center;padding:60px 20px;color:var(--t3);}
.ds-empty h3{font-size:16px;color:var(--t2);margin-bottom:6px;}
.ds-empty p{font-size:12px;}
.ds-summary-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin-bottom:18px;padding:14px;background:var(--s1);border:1px solid var(--b1);border-radius:14px;}
.ds-stat{text-align:center;}
.ds-stat-n{display:block;font-size:16px;font-weight:800;color:var(--t1);font-family:var(--mono);}
.ds-stat-l{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;}
.ds-chain-card{background:var(--s1);border:1px solid var(--b1);border-radius:14px;padding:0;margin-bottom:16px;overflow:hidden;transition:border-color .15s;}
.ds-chain-card:hover{border-color:var(--b2);}
.ds-chain-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(135deg,rgba(59,130,246,.04),rgba(139,92,246,.04));border-bottom:1px solid var(--b1);flex-wrap:wrap;gap:8px;}
.ds-major-head{padding:8px 18px;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--t2);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);}
.ds-major-po{background:linear-gradient(90deg,rgba(59,130,246,.12),rgba(59,130,246,.02));}
.ds-major-dc{background:linear-gradient(90deg,rgba(16,185,129,.12),rgba(16,185,129,.02));}
.ds-major-inv{background:linear-gradient(90deg,rgba(245,158,11,.12),rgba(245,158,11,.02));}
.ds-chain-po{font-size:15px;font-weight:800;color:var(--t1);font-family:var(--mono);}
.ds-chain-cust{font-size:12px;color:var(--t2);margin-left:10px;}
.ds-match-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;border:1px solid var(--b2);background:var(--s2);color:var(--t3);font-size:9px;letter-spacing:.2px;vertical-align:middle;}
.ds-chain-progress{display:flex;align-items:center;gap:0;}
.ds-pip{font-size:16px;opacity:.3;transition:opacity .2s;}
.ds-pip-ok{opacity:1;}
.ds-pip-done{opacity:1;filter:drop-shadow(0 0 6px rgba(16,185,129,.5));}
.ds-pip-no{opacity:.2;}
.ds-pip-line{width:24px;height:2px;background:var(--b2);margin:0 2px;}
.ds-pip-line.ds-pip-ok{background:var(--green);}
.ds-sec{padding:14px 18px;border-bottom:1px solid var(--b1);}
.ds-sec:last-child{border-bottom:none;}
.ds-sec-miss{opacity:.4;padding:10px 18px;}
.ds-sec-head{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--t1);margin-bottom:10px;flex-wrap:wrap;}
.ds-sec-ico{font-size:16px;}
.ds-miss-tag{font-size:9px;background:rgba(239,68,68,.1);color:#fca5a5;padding:2px 8px;border-radius:20px;margin-left:8px;font-weight:600;letter-spacing:.3px;}
.ds-sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px 14px;margin-bottom:8px;}
.ds-kv{display:flex;gap:6px;align-items:baseline;font-size:12px;}
.ds-k{color:var(--t3);min-width:60px;flex-shrink:0;}
.ds-v{color:var(--t1);font-family:var(--mono);}
.ds-v.fw700{font-weight:700;}
.ds-items{margin-top:8px;border:1px solid var(--b1);border-radius:10px;overflow:hidden;}
.ds-items-title{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;padding:6px 12px;background:var(--s2);border-bottom:1px solid var(--b1);}
.ds-tbl{width:100%;border-collapse:collapse;font-size:11px;}
.ds-tbl th{text-align:left;padding:6px 12px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);background:var(--s3);font-weight:600;}
.ds-tbl td{padding:5px 12px;border-bottom:1px solid var(--b1);color:var(--t2);}
.ds-tbl tr:last-child td{border-bottom:none;}

.app-credit{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);font-size:10px;letter-spacing:.4px;color:var(--t3);opacity:.75;z-index:40;pointer-events:none;background:rgba(0,0,0,.18);padding:3px 10px;border-radius:20px;border:1px solid var(--b1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}

@media (max-width:900px){
   .ds-welcome{padding:12px 14px;}
   .ds-welcome-hi{font-size:15px;}
   .ds-welcome-sub{font-size:11px;}
   .ds-summary-bar{grid-template-columns:repeat(2,minmax(120px,1fr));}
   .ds-chain-head{padding:12px 14px;}
   .ds-major-head{padding:7px 14px;}
   .ds-sec{padding:12px 14px;}
   .ds-sec-grid{grid-template-columns:repeat(2,minmax(120px,1fr));}
   .ds-actions{justify-content:stretch;}
   .ds-actions .btn{flex:1;justify-content:center;}
}

@media (max-width:560px){
   .ds-title{font-size:22px;text-align:center;}
   .ds-sub{text-align:center;}
   .ds-bar{flex-direction:column;max-width:100%;}
   .ds-btn{width:100%;justify-content:center;display:flex;}
   .ds-summary-bar{grid-template-columns:1fr 1fr;gap:8px;}
   .ds-chain-po{font-size:13px;}
   .ds-chain-cust{display:block;margin-left:0;margin-top:2px;}
   .ds-match-chip{display:block;width:max-content;margin:6px 0 0;}
   .ds-sec-grid{grid-template-columns:1fr;}
   .app-credit{font-size:9px;bottom:6px;padding:2px 8px;}
}

/* Comfort switch */
.comfort-switch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.comfort-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;font-weight:700;}
.comfort-btn{border:1px solid var(--b2);background:var(--s2);color:var(--t2);padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700;cursor:pointer;}
.comfort-btn.on{background:linear-gradient(135deg,var(--k),#7aa4ff);color:#fff;border-color:transparent;}

/* Senior comfort mode (global) */
body.comfort-senior{font-size:15px;line-height:1.62;}
body.comfort-senior .tb-title{font-size:19px;font-weight:800;}
body.comfort-senior .ni{font-size:14px;padding:10px 11px;}
body.comfort-senior .btn{font-size:14px;padding:11px 16px;border-radius:11px;}
body.comfort-senior .btn-xs{font-size:12px;padding:6px 10px;}
body.comfort-senior .btn-sm{font-size:13px;padding:8px 12px;}
body.comfort-senior .fg label{font-size:12px;}
body.comfort-senior .fg input,
body.comfort-senior .fg select,
body.comfort-senior .fg textarea{font-size:15px;padding:12px 14px;}
body.comfort-senior .card h3,
body.comfort-senior .ds-title{font-size:30px;font-weight:800;}
body.comfort-senior .ds-welcome-hi{font-size:21px;font-weight:800;}
body.comfort-senior .ds-major-head{font-size:12px;font-weight:900;letter-spacing:1.4px;}
body.comfort-senior .ds-sec-head{font-size:15px;font-weight:800;}
body.comfort-senior .ds-k{font-size:12px;}
body.comfort-senior .ds-v{font-size:14px;font-weight:700;}
body.comfort-senior .ds-tbl th{font-size:11px;}
body.comfort-senior .ds-tbl td{font-size:13px;padding:8px 12px;}
body.comfort-senior .badge{font-size:10px!important;padding:3px 8px;}
body.comfort-senior .app-credit{font-size:11px;opacity:.9;}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — HAMBURGER + SIDEBAR OVERLAY
   ═══════════════════════════════════════════════════════ */

/* Hamburger / sidebar-collapse button — visible on every screen size.
   Desktop: collapses the sidebar.  Mobile (≤768): opens the slide-in drawer. */
.ham-btn{
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  color:var(--t1);font-size:22px;line-height:1;
  padding:6px 10px;border-radius:8px;
  transition:background .15s;flex-shrink:0;
  position:relative;z-index:1;
}
.ham-btn:hover{background:var(--s2);}

/* ── Desktop collapse: slide the sidebar to zero width, main reclaims space.
   Scoped to >768px so it never interferes with the mobile slide-in drawer. ── */
@media (min-width:769px){
  .sidebar{transition:width .22s cubic-bezier(.4,0,.2,1);}
  .app.sb-collapsed .sidebar{
    width:0;min-width:0;overflow:hidden;
    border-right:none;box-shadow:none;
  }
}

/* Dark overlay behind sidebar on mobile */
.sb-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  z-index:200;opacity:0;transition:opacity .25s;
}
.sb-overlay.visible{opacity:1;}

/* ── Tablet (small laptops ≤ 1024px) ───────────────── */
@media (max-width:1024px){
  .sidebar{width:200px;}
  .content{padding:10px 12px;}
  .stats-bar{gap:8px;flex-wrap:wrap;}
  .rpill{min-width:130px;}
  .fg-grid{grid-template-columns:1fr 1fr;}
  .db-hero{padding:22px 24px 18px;}
  .tb-right{gap:5px;flex-wrap:wrap;}
  .tb-right .btn{font-size:11px;padding:5px 10px;}
}

/* ── Mobile / small laptop (≤ 768px) ───────────────── */
@media (max-width:768px){
  /* Show hamburger, hide sidebar by default */
  .ham-btn{display:flex;align-items:center;justify-content:center;}
  .sb-overlay{display:block;}

  /* Sidebar slides in from left as overlay */
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    width:260px;z-index:210;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.open{transform:translateX(0);}

  /* Main takes full width */
  .main{width:100%;}

  /* Topbar */
  .topbar{padding:0 12px;gap:8px;}
  .tb-title{font-size:13px;position:absolute;left:0;right:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tb-right{gap:4px;flex-wrap:wrap;}
  .tb-right .btn{font-size:11px;padding:5px 8px;}
  .tb-right .btn-sm{font-size:10px;padding:4px 7px;}

  /* Content area */
  .content{padding:10px;}

  /* Tables — horizontal scroll, no fixed max-height */
  .tw{overflow-x:auto;max-height:none;}
  table{min-width:600px;}
  td,th{padding:10px 8px;font-size:12px;}

  /* Stats pills wrap */
  .stats-bar{gap:6px;flex-wrap:wrap;}
  .rpill{min-width:120px;flex:1;}
  .stat-sep{display:none;}

  /* Filter strip stacks */
  .filter-strip{flex-wrap:wrap;gap:6px;}
  .filter-strip select{flex:1;min-width:120px;}
  .filter-strip .sb-wrap{width:100%;}

  /* Forms */
  .fg-grid{grid-template-columns:1fr;}
  .fg-full{grid-column:1/-1;}
  .modal{width:95vw!important;max-width:95vw!important;padding:18px 14px!important;}
  .modal-xl{width:95vw!important;max-width:95vw!important;}

  /* Dashboard */
  .db-hero{padding:18px 16px;}
  .hero-stats{flex-wrap:wrap;gap:10px;}
  .hs{min-width:100px;}
  .pg-list{padding:0;}
  .pg-toolbar{padding:10px;}
}

/* ── Phone (≤ 480px) ────────────────────────────────── */
@media (max-width:480px){
  .sidebar{width:82vw;}

  /* Topbar */
  .topbar{height:48px;padding:0 8px;}
  .tb-title{font-size:12px;}
  .tb-right .btn{font-size:10px;padding:4px 7px;}

  /* Stats bar — 2 columns */
  .stats-bar{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .rpill{min-width:0;}
  .rpill-pop{display:none;}   /* hide hover popups on touch */

  /* Tables */
  td,th{padding:8px 6px;font-size:11px;}
  table{min-width:480px;}

  /* Pager */
  .pager{gap:4px;padding:8px 10px;}
  .pager button{padding:4px 7px;font-size:11px;}
  .pager-info{font-size:10px;}

  /* Buttons */
  .btn-sm{font-size:11px;padding:5px 9px;}
  .btn-xs{font-size:10px;padding:3px 7px;}

  /* Forms / grid */
  .fg-grid{grid-template-columns:1fr;}
  .modal{padding:14px 10px!important;}

  /* Toolbar actions stack */
  .tb-right{justify-content:flex-end;}
}

/* ── Ensure modals scroll on small screens ─────────── */
@media (max-width:768px){
  .mb{align-items:flex-start;padding-top:20px;}
  .modal,
  .modal-xl{max-height:90vh;overflow-y:auto;}
}