/* ============================= TOKENS ============================= */
:root{
  --brand:#0b5c4c; --brand-2:#0f7a63; --brand-deep:#063f34; --lime:#79c94f; --lime-2:#5aa73a;
  --bg:#f3f6f4; --surface:#ffffff; --surface-2:#fafcfb; --raised:#ffffff;
  --ink:#12241f; --ink-soft:#33453f; --muted:#66766f; --faint:#93a19b;
  --line:#e2eae5; --line-strong:#cddbd4;
  --red:#b8403a; --red-bg:#fdecea; --amber:#a8722a; --amber-bg:#fdf3e3; --blue:#3a6a9e; --blue-bg:#eaf2fb; --green-bg:#e8f6ee;
  --shadow-sm:0 1px 2px rgba(15,45,38,.06);
  --shadow-md:0 8px 24px rgba(11,60,49,.08);
  --shadow-lg:0 24px 60px rgba(9,45,38,.14);
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px;
  --font-display:'Fraunces',Georgia,serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace;
  --side-w:272px; --topbar-h:72px;
  --glass-bg:rgba(255,255,255,.6); --glass-border:rgba(255,255,255,.5);
}
[data-theme="dark"]{
  --brand:#22a184; --brand-2:#2bbd97; --brand-deep:#08201a; --lime:#8fe05c; --lime-2:#79c94f;
  --bg:#07130f; --surface:#0e211b; --surface-2:#122922; --raised:#132c25;
  --ink:#eaf3ef; --ink-soft:#cfe0d9; --muted:#8aa39a; --faint:#5e7770;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --red:#e37069; --red-bg:rgba(227,112,105,.12); --amber:#dba85a; --amber-bg:rgba(219,168,90,.12); --blue:#7aa8e0; --blue-bg:rgba(122,168,224,.12); --green-bg:rgba(121,201,79,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 30px 70px rgba(0,0,0,.55);
  --glass-bg:rgba(19,44,37,.55); --glass-border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--ink);transition:background .25s ease,color .25s ease}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--brand);color:#fff}
a{color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:20px}
::-webkit-scrollbar-track{background:transparent}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em;margin:0}
.mono{font-family:var(--font-mono)}
.hidden{display:none!important}

/* ============================= LOGIN ============================= */
.login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(circle at 20% 20%,#0c6a56,#052f27 55%,#031a15);}
.login-card{width:min(440px,100%);background:var(--surface);border-radius:26px;padding:34px;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.login-logo{background:var(--surface-2);border-radius:18px;padding:16px;text-align:center;margin-bottom:22px}
.login-logo img{height:56px;max-width:100%;object-fit:contain}
.login-card h2{font-size:24px;margin:0 0 6px}
.login-card p{color:var(--muted);margin:0 0 22px;font-size:14px}
.login-card label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:8px}
.login-card select{width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);margin-bottom:14px}
.login-mini{margin-top:14px;text-align:center;font-size:12px;color:var(--faint)}

/* ============================= APP BOOT LOADER ============================= */
#appBootLoader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#0c6a56,#052f27 58%,#031a15);color:#fff;transition:opacity .22s ease}
#appBootLoader.hidden{display:none!important}
.boot-card{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.boot-card img{width:92px;height:92px;object-fit:contain;background:#fff;border-radius:22px;padding:10px;box-shadow:0 10px 35px rgba(0,0,0,.28)}
.boot-spinner{width:38px;height:38px;border:4px solid rgba(255,255,255,.22);border-top-color:#fff;border-radius:50%;animation:bootSpin .8s linear infinite}
.boot-text{font-size:12px;letter-spacing:.04em;color:#cfeee2}
@keyframes bootSpin{to{transform:rotate(360deg)}}

/* ============================= SHELL ============================= */
.app{display:flex;min-height:100vh}
.side{width:var(--side-w);position:fixed;inset:0 auto 0 0;z-index:10;padding:20px 14px;display:flex;flex-direction:column;gap:3px;
  background:linear-gradient(165deg,#0a4a3d 0%,var(--brand-deep) 45%,#04140f 100%);color:#eafaf4;overflow-y:auto;overflow-x:hidden;
  box-shadow:1px 0 0 rgba(255,255,255,.04) inset,6px 0 24px -8px rgba(0,0,0,.35);
  transition:width .38s cubic-bezier(.4,0,.2,1),padding .38s cubic-bezier(.4,0,.2,1)}
[data-theme="dark"] .side{background:linear-gradient(165deg,#0a2a22 0%,#051510 45%,#020a08 100%)}
.side.collapsed{padding-left:10px;padding-right:10px}
.brand-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:11px;margin-bottom:16px;transition:padding .38s cubic-bezier(.4,0,.2,1)}
.side.collapsed .brand-row{padding:11px 8px}
.brand-row img{height:36px;width:36px;object-fit:contain;background:#fff;border-radius:10px;padding:3px;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:height .38s cubic-bezier(.4,0,.2,1),width .38s cubic-bezier(.4,0,.2,1)}
.brand-row .bt{font-family:var(--font-display);font-weight:600;font-size:14.5px;line-height:1.15;white-space:nowrap;overflow:hidden;max-width:160px;opacity:1;transition:opacity .18s ease,max-width .38s cubic-bezier(.4,0,.2,1)}
.brand-row .bs{font-size:10.5px;color:#9cc7bb;white-space:nowrap;overflow:hidden;max-width:160px;opacity:1;transition:opacity .18s ease,max-width .38s cubic-bezier(.4,0,.2,1)}
.side.collapsed .brand-row .bt,.side.collapsed .brand-row .bs{opacity:0;max-width:0;transition:opacity .08s ease,max-width .3s cubic-bezier(.4,0,.2,1)}
.side.collapsed .brand-row img{height:34px;width:34px}
.navsec{font-size:10px;letter-spacing:.06em;color:#6fa294;padding:16px 14px 7px;font-weight:700;white-space:nowrap;overflow:hidden;transition:opacity .2s ease,max-height .3s ease,padding .3s ease,margin .3s ease}
.side.collapsed .navsec{opacity:0;max-height:0;padding:0;margin:0;pointer-events:none}
.navbtn{border:0;background:transparent;color:#bcdcd1;text-align:left;padding:10px 14px;border-radius:11px;display:flex;gap:13px;align-items:center;font-size:13.5px;font-weight:500;position:relative;transition:padding .38s cubic-bezier(.4,0,.2,1),background .15s ease,color .15s ease}
.navbtn svg{width:20px;height:20px;flex:none;opacity:.75;transition:opacity .15s ease,transform .2s ease,width .38s cubic-bezier(.4,0,.2,1),height .38s cubic-bezier(.4,0,.2,1)}
.navbtn:hover{background:rgba(255,255,255,.06);color:#eafaf4}
.navbtn:hover svg{opacity:.95}
.navbtn.active{background:linear-gradient(90deg,rgba(121,201,79,.18),rgba(121,201,79,.04) 70%);color:#fff}
.navbtn.active svg{opacity:1;transform:scale(1.05)}
.navbtn.active:before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--lime);box-shadow:0 0 8px rgba(121,201,79,.5)}
.navbtn .navbadge{margin-left:auto;background:rgba(255,255,255,.12);border-radius:20px;padding:1px 7px;font-size:10.5px;font-weight:700}
.navbtn span,.navbtn .navbadge{opacity:1;max-width:200px;overflow:hidden;white-space:nowrap;transition:opacity .18s ease,max-width .38s cubic-bezier(.4,0,.2,1),margin .38s cubic-bezier(.4,0,.2,1)}
.side.collapsed .navbtn{padding:10px 0 10px 14px}
.side.collapsed .navbtn span,.side.collapsed .navbtn .navbadge{opacity:0;max-width:0;margin:0;transition:opacity .08s ease,max-width .3s cubic-bezier(.4,0,.2,1)}
.side-foot{margin-top:auto;padding:12px 10px;font-size:11px;color:#5f8a7e;border-top:1px solid rgba(255,255,255,.07);white-space:nowrap;overflow:hidden;transition:opacity .2s ease,max-height .3s ease,padding .3s ease}
.side.collapsed .side-foot{opacity:0;max-height:0;padding:0;pointer-events:none;border-top-color:transparent}
.side-toggle{position:fixed;top:26px;left:calc(var(--side-w) - 14px);z-index:11;width:28px;height:28px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:left .38s cubic-bezier(.4,0,.2,1),transform .2s ease,box-shadow .2s ease;color:var(--brand-2)}
.side-toggle:hover{transform:scale(1.1);box-shadow:0 4px 14px rgba(0,0,0,.22)}
.side-toggle svg{width:13px;height:13px;transition:transform .38s cubic-bezier(.4,0,.2,1)}
.side.collapsed~.side-toggle svg{transform:rotate(180deg)}

.main{margin-left:var(--side-w);width:calc(100% - var(--side-w));min-height:100vh;transition:margin-left .38s cubic-bezier(.4,0,.2,1),width .38s cubic-bezier(.4,0,.2,1)}
.topbar{height:var(--topbar-h);position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:14px;padding:0 26px;
  background:var(--glass-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.pagehead{flex:1;min-width:0}
.pagehead h1{font-size:21px;font-weight:600}
.pagehead p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.searchbtn{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 12px;color:var(--faint);font-size:12.5px;min-width:220px}
.searchbtn kbd{margin-left:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:10.5px;font-family:var(--font-mono)}
.iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;position:relative}
.iconbtn svg{width:18px;height:18px}
.dot-badge{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--surface)}
.userchip{display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:12.5px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.userchip .un{font-size:12.5px;font-weight:650;line-height:1.2}
.userchip .ur{font-size:10.5px;color:var(--muted)}

.view{padding:24px 26px 60px}

/* ============================= GRIDS / CARDS ============================= */
.grid{display:grid;gap:16px}
.g5{grid-template-columns:repeat(5,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1.4fr .6fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.card.raised{box-shadow:var(--shadow-md)}
.section{margin-top:22px}
.sectionhead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:12px}
.sectionhead h2{font-size:17px}
.sectionhead .sub{font-size:12px;color:var(--muted);margin-top:4px;max-width:56ch}
.kpi{display:flex;flex-direction:column;gap:10px}
.kpi .top{display:flex;justify-content:space-between;align-items:flex-start}
.kpi .label{font-size:12px;color:var(--muted);font-weight:600}
.kpi .num{font-family:var(--font-display);font-size:30px;font-weight:600;line-height:1}
.kpi .spark{width:70px;height:28px}.kpi.target-good{border-color:var(--brand-2);box-shadow:inset 4px 0 0 var(--brand-2),var(--shadow-sm)}.kpi.target-bad{border-color:var(--red);box-shadow:inset 4px 0 0 var(--red),var(--shadow-sm)}.kpi-target{font-size:10.5px;font-weight:650;color:var(--muted);margin-top:5px}
.trend{font-size:11.5px;font-weight:650;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px}
.trend.up{color:var(--brand-2);background:var(--green-bg)}
.trend.down{color:var(--red);background:var(--red-bg)}
.trend.flat{color:var(--muted);background:var(--surface-2)}

.badge{display:inline-flex;padding:4px 9px;border-radius:20px;font-size:11px;font-weight:650;background:var(--surface-2);color:var(--brand-2);border:1px solid var(--line)}
.badge.red{background:var(--red-bg);color:var(--red);border-color:transparent}
.badge.amber{background:var(--amber-bg);color:var(--amber);border-color:transparent}
.badge.blue{background:var(--blue-bg);color:var(--blue);border-color:transparent}
.badge.green{background:var(--green-bg);color:var(--brand-2);border-color:transparent}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{font-size:10.5px;text-transform:none;color:var(--muted);font-weight:650;position:sticky;top:0;background:var(--surface)}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
.tablewrap{overflow:auto;border-radius:var(--radius-md);border:1px solid var(--line)}
/* Grid items default to min-width:auto, so a wide table can force the whole grid column
   (and the page) to grow instead of scrolling inside .tablewrap. This keeps every card
   honest about its column width so tables scroll internally instead of bleeding out. */
.grid>*{min-width:0}
.tablewrap table{border:0}
.tablewrap th,.tablewrap td{border-radius:0}

.progress{height:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:99px}
.barrow .r{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px;color:var(--ink-soft)}
.barrow{margin:12px 0}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;background:var(--surface-2);padding:5px;border-radius:14px;width:fit-content;border:1px solid var(--line)}
.tab{border:0;background:transparent;border-radius:10px;padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--muted)}
.tab.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}

.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.filters input,.filters select{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--surface);min-width:150px}
.form input,.form select,.form textarea{border:1px solid var(--line);border-radius:11px;padding:11px;background:var(--surface);outline:none;width:100%}
.form input:focus,.form select:focus,.form textarea:focus,button:focus-visible,.navbtn:focus-visible,.tab:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.formgrid.three{grid-template-columns:repeat(3,1fr)}
.form label{display:block;font-size:12px;font-weight:650;margin-bottom:6px;color:var(--ink-soft)}
.form .full{grid-column:1/-1}

.btn{border:1px solid var(--line);background:var(--surface);padding:10px 15px;border-radius:11px;font-weight:650;font-size:13px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0}
.btn:hover{border-color:var(--line-strong)}
.btn svg{width:15px;height:15px}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}
.btn.lime{background:var(--lime);border-color:var(--lime);color:#0d2c1f}
.btn.ghost{background:transparent;border-color:transparent}
.btn.danger{color:var(--red)}
.btn.sm{padding:7px 10px;font-size:11.5px;border-radius:9px}
.iconlink{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--brand-2);font-weight:650}

.hero{background:linear-gradient(135deg,var(--brand-deep),var(--brand));color:#fff;border-radius:24px;padding:26px 28px;display:flex;justify-content:space-between;gap:24px;position:relative;overflow:hidden}
.hero:before{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%)}
.hero .eyebrow{font-size:12px;color:#bfe8da;margin-bottom:8px}
.hero .big{font-family:var(--font-display);font-size:38px;font-weight:600}
.hero .sub{color:#cfeee2;font-size:13px;margin-top:6px;max-width:46ch}
.hero-side{display:flex;flex-direction:column;gap:10px;z-index:1}
.pillrow{display:flex;gap:8px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,.14);color:#fff;font-size:11.5px;padding:6px 11px;border-radius:20px;font-weight:600}
.card .pill{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}

.activity{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.activity:last-child{border-bottom:0}
.actdot{width:9px;height:9px;border-radius:50%;background:var(--lime);margin-top:6px;flex:none}
.activity b{font-size:13px}
.activity small{display:block;color:var(--muted);margin-top:3px;font-size:11.5px}

.modal{position:fixed;inset:0;background:rgba(4,20,17,.5);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:40;padding:20px}
.modal.show{display:flex}
.modalbox-outer{background:var(--surface);border-radius:22px;width:min(920px,100%);max-height:90vh;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.modalbox{max-height:90vh;overflow:auto;padding:0 24px 24px;position:relative}
.modalhead{display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:5;margin:0 -24px 18px;padding:24px 24px 16px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.modalhead h2{font-size:19px}
.close{border:0;background:var(--surface-2);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none}
.empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}
.notice{padding:13px 15px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line);margin-bottom:10px;font-size:13px}

.toast{position:fixed;right:26px;bottom:26px;background:var(--ink);color:var(--bg);padding:13px 17px;border-radius:13px;display:none;z-index:60;font-size:13px;box-shadow:var(--shadow-lg);max-width:320px}
[data-theme="dark"] .toast{background:#eafaf4;color:#08201a}
.toast.show{display:flex;align-items:center;gap:8px}

.muted{color:var(--muted)}
.overdue{color:var(--red);font-weight:700}
.score{font-family:var(--font-display);font-size:26px;font-weight:600}
.chartbox{position:relative;height:230px;padding:4px 2px 0}.chartbox canvas{filter:drop-shadow(0 6px 14px rgba(7,70,55,.035))}.chartbox.sm{height:150px}.chart-card-premium{position:relative;overflow:hidden}.chart-card-premium:after{content:'';position:absolute;inset:auto -30px -70px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--green-bg),transparent 68%);pointer-events:none}.sla-heatmap .hm-cell{transition:transform .16s ease,box-shadow .16s ease}.sla-heatmap .hm-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);position:relative;z-index:2}.sla-heatmap .hm-good{background:linear-gradient(135deg,var(--green-bg),var(--surface));}.sla-heatmap .hm-bad{background:linear-gradient(135deg,var(--red-bg),var(--surface));}.sla-heatmap .hm-head{background:linear-gradient(180deg,var(--surface-2),var(--surface));}
.chartbox.sm{height:150px}
.review-box{background:var(--surface-2);border:1px solid var(--line);padding:15px;border-radius:14px}
.timeline{border-left:2px solid var(--line);padding-left:18px}
.timeline .event{position:relative;margin:0 0 16px}
.timeline .event:before{content:'';position:absolute;left:-24px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--lime)}
.smallbtn{padding:6px 10px;border:1px solid var(--line);background:var(--surface);border-radius:9px;font-size:11px;font-weight:650}
.metric-chip{display:inline-flex;gap:5px;align-items:center;padding:5px 9px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);font-size:11px;font-weight:600}
.qmini{background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:12px}
.qmini span{display:block;font-size:11px;color:var(--muted)}
.qmini b{font-size:19px;font-family:var(--font-display)}
.qgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}

/* ---------- Recognition & Rewards ---------- */
.recog-hero{position:relative;overflow:hidden}
.recog-hero:after{content:'';position:absolute;left:-40px;bottom:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,201,102,.28),transparent 70%);pointer-events:none}
.recog-give-btn{background:#fff;color:var(--brand-deep);font-weight:800;padding:13px 22px;border-radius:14px;border:0;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:transform .15s ease,box-shadow .15s ease;font-size:13.5px}
.recog-give-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.recog-give-btn svg{width:16px;height:16px}

.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:end;margin:2px 0 6px}
.podium-card{background:var(--surface-2);border:1px solid var(--line);border-radius:18px;padding:22px 12px 18px;text-align:center;position:relative;transition:transform .15s ease}
.podium-card.rank-1{background:linear-gradient(160deg,var(--amber-bg),var(--surface));border-color:#e7c887;order:2;transform:translateY(-10px);box-shadow:var(--shadow-md)}
.podium-card.rank-2{order:1}
.podium-card.rank-3{order:3}
.podium-medal{font-size:26px;line-height:1}
.podium-card.rank-1 .podium-medal{font-size:32px}
.podium-avatar{width:50px;height:50px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;margin:8px auto 0}
.podium-card.rank-1 .podium-avatar{width:62px;height:62px;font-size:18px;background:linear-gradient(135deg,#e0ac48,#a9781f)}
.podium-name{font-weight:700;font-size:13px;margin-top:8px}
.podium-pts{font-family:var(--font-display);font-size:21px;margin-top:2px;color:var(--brand-2)}
.podium-card.rank-1 .podium-pts{font-size:26px;color:#a9781f}
.podium-sub{font-size:10.5px;color:var(--muted);margin-top:1px}

.recog-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.recog-row:last-child{border-bottom:0}
.recog-row .rank{width:20px;font-weight:700;color:var(--muted);text-align:center;flex:none;font-size:12.5px}
.recog-avatar-sm{width:32px;height:32px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--brand-2);flex:none}
.recog-row .rname{flex:1;font-weight:650;font-size:13px}
.recog-row .rpts{font-weight:700;color:var(--ink);font-size:13.5px}
.recog-row .rcount{font-size:10.5px;color:var(--muted);margin-top:1px}

.feed-card{display:flex;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line)}
.feed-card:last-child{border-bottom:0}
.feed-badge{width:38px;height:38px;border-radius:50%;background:var(--amber-bg);display:grid;place-items:center;font-size:17px;flex:none}
.feed-card .fname{font-size:13px;font-weight:700}
.feed-card .fmeta{font-size:11px;color:var(--muted);margin-top:2px}
.feed-card .fmsg{font-size:12.5px;color:var(--ink-soft);margin-top:6px;font-style:italic;background:var(--surface-2);border-radius:10px;padding:8px 11px}
.balance-ring{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;position:relative;flex:none;background:conic-gradient(#ffd98c var(--pct,0%),rgba(255,255,255,.22) 0)}
.balance-ring:after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--brand)}
.balance-ring b{position:relative;z-index:1;font-size:15px;font-family:var(--font-display);color:#fff;text-align:center;line-height:1.15}
.risk{background:var(--red-bg)!important;color:var(--red)}
.good{background:var(--green-bg)!important;color:var(--brand-2)}
.sla-heatmap{display:grid;gap:6px;min-width:900px;align-items:stretch}.sla-heatmap .hm-head,.sla-heatmap .hm-label,.sla-heatmap .hm-cell{min-width:0;box-sizing:border-box}.sla-heatmap .hm-head,.sla-heatmap .hm-label{display:flex;align-items:center;justify-content:center}.sla-heatmap .hm-label{text-align:left;justify-content:flex-start}
.sla-heatmap .hm-head,.sla-heatmap .hm-label,.sla-heatmap .hm-cell{padding:10px 8px;border:1px solid var(--line);border-radius:9px;font-size:11px;text-align:center}
.sla-heatmap .hm-head{font-weight:700;background:var(--surface-2);color:var(--muted)}
.sla-heatmap .hm-label{text-align:left;font-weight:700;background:var(--surface-2)}
.sla-heatmap .hm-cell{font-weight:750;cursor:default}
.sla-heatmap .hm-good{background:var(--green-bg);color:var(--brand-2)}
.sla-heatmap .hm-bad{background:var(--red-bg);color:var(--red)}
.sla-heatmap .hm-empty{background:var(--surface-2);color:var(--muted)}
@media(max-width:900px){.sla-heatmap{min-width:850px}}
.warn{background:var(--amber-bg)!important;color:var(--amber)}
.cal-card{border:1px solid var(--line);border-radius:15px;padding:15px;background:var(--surface-2)}
.stepnum{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.action-open{background:var(--amber-bg);color:var(--amber)}
.action-closed{background:var(--green-bg);color:var(--brand-2)}
.action-overdue{background:var(--red-bg);color:var(--red)}
.check{width:17px;height:17px;accent-color:var(--brand)}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kcol{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:12px;min-height:120px}
.kcol h4{font-size:12.5px;margin:2px 6px 10px;display:flex;justify-content:space-between}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px;margin-bottom:8px;box-shadow:var(--shadow-sm);cursor:pointer}
.kcard b{font-size:12.5px;display:block;margin-bottom:6px}
.kcard small{color:var(--muted);font-size:10.5px}
.viewtoggle{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.viewtoggle button{border:0;background:transparent;border-radius:7px;padding:6px 10px;font-size:11.5px;font-weight:650;color:var(--muted)}
.viewtoggle button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.themebtn{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.themebtn button{border:0;background:transparent;padding:7px 9px;border-radius:9px;display:grid;place-items:center}
.themebtn button.active{background:var(--surface);box-shadow:var(--shadow-sm)}
.themebtn svg{width:15px;height:15px}

/* Command palette */
.cmdk-overlay{position:fixed;inset:0;background:rgba(4,20,17,.55);backdrop-filter:blur(3px);z-index:70;display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.cmdk-overlay.show{display:flex}
.cmdk{width:min(600px,92%);background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);border:1px solid var(--line);overflow:hidden}
.cmdk input{width:100%;border:0;border-bottom:1px solid var(--line);padding:18px 20px;font-size:15px;background:transparent;outline:none}
.cmdk-list{max-height:360px;overflow:auto;padding:8px}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;font-size:13.5px}
.cmdk-item svg{width:16px;height:16px;color:var(--muted)}
h2 svg,.modalhead h2 svg{width:19px;height:19px;vertical-align:-4px;margin-inline-end:2px;flex:none}
.cmdk-item.sel{background:var(--surface-2)}
.cmdk-item small{margin-left:auto;color:var(--faint);font-size:11px}

@media print{.side,.topbar,.modal,.toast{display:none!important}.main{margin-left:0;width:100%}}

@media(max-width:1100px){
  :root{--side-w:78px}
  .brand-row .bt,.brand-row .bs,.navsec,.navbtn span,.navbtn .navbadge{display:none}
  .navbtn{justify-content:center}
  .side-toggle{display:none}
  .g5,.g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g2,.kanban{grid-template-columns:1fr}
  .formgrid,.formgrid.three{grid-template-columns:1fr}
  .searchbtn{min-width:0;width:40px;padding:9px;justify-content:center}
  .searchbtn span,.searchbtn kbd{display:none}
  .qgrid{grid-template-columns:repeat(3,1fr)}
}

/* ============================= MOBILE (phones) ============================= */
.mobile-menu-btn{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);align-items:center;justify-content:center;flex:none}
.mobile-menu-btn svg{width:19px;height:19px}
.mobile-navbackdrop{display:none;position:fixed;inset:0;background:rgba(4,20,17,.5);z-index:45}
.mobile-navbackdrop.show{display:block}

@media(max-width:760px){
  /* Sidebar becomes a true off-canvas drawer instead of the permanent icon-rail,
     opened via the hamburger button and closed on backdrop tap or navigation. */
  .mobile-menu-btn{display:flex}
  .side{transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:50;width:min(272px,84vw);padding:20px 14px}
  .side.mobile-open{transform:translateX(0)}
  .side.collapsed{padding:20px 14px}
  .brand-row .bt,.brand-row .bs,.navsec,.navbtn span,.navbtn .navbadge,
  .side.collapsed .brand-row .bt,.side.collapsed .brand-row .bs,.side.collapsed .navsec,
  .side.collapsed .navbtn span,.side.collapsed .navbtn .navbadge{display:block;opacity:1;max-width:none;max-height:none;pointer-events:auto;margin:revert;padding:revert}
  .navbtn{justify-content:flex-start}
  .side.collapsed .navbtn{padding:10px 14px}
  .main{margin-left:0!important;width:100%!important}

  /* Topbar: compact everything so fixed-width controls never overflow a phone screen */
  .topbar{padding:0 12px;gap:8px;height:60px}
  .pagehead h1{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pagehead p{display:none}
  .searchbtn{display:none}
  .themebtn{display:none}
  #connStatus{display:none!important}
  .topbar .btn.primary span{display:none}
  .topbar .btn.primary{padding:0;width:38px;height:38px;justify-content:center;flex:none}
  .iconbtn{width:36px;height:36px;flex:none}
  .userchip{padding:0;gap:0;border:0;background:transparent}
  .userchip .un,.userchip .ur{display:none}

  .view{padding:16px 14px 44px}
  .g5,.g4,.g3,.g2,.kanban,.qgrid,.formgrid,.formgrid.three{grid-template-columns:1fr}
  /* Safety net for the handful of places that set grid-template-columns as an inline
     style directly (modal detail grids, settings forms) rather than via a CSS class. */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:1fr!important}

  .hero{flex-direction:column;padding:20px;border-radius:18px;gap:14px}
  .hero .big{font-size:27px}
  .hero-side{align-items:flex-start}

  .modal{padding:0}
  .modalbox-outer{width:100%;max-width:100%;height:100%;max-height:100dvh;border-radius:0}
  .modalbox{max-height:100dvh;padding:0 16px 16px}
  .modalhead{margin:0 -16px 14px;padding:16px 16px 12px}

  table{font-size:12px}
  th,td{padding:9px 8px}
  .kpi .num{font-size:24px}
  .card{padding:16px;border-radius:16px}
  .sectionhead{flex-direction:column;align-items:flex-start;gap:6px}
}

@media(max-width:420px){
  .side{width:86vw}
  .hero .big{font-size:22px}
  .qgrid{grid-template-columns:repeat(2,1fr)}
  .podium{grid-template-columns:1fr!important;max-width:none!important}
  .podium-card.rank-1{transform:none;order:0}
  .podium-card.rank-2{order:1}
  .podium-card.rank-3{order:2}
}