:root{
  /* Teleza brand palette v2: deepened navy, true jewel purple (was a mislabeled
     olive green), richer emerald/amber/ruby status colors, warm ivory page bg
     instead of cool gray -- ivory + navy + gold reads premium/royal together. */
  --navy:#0d2b33; --navy2:#1a4a54; --navy-deep:#071720; --blue:#0f6a7d; --purple:#5b3fa0; --purple-dark:#3c2a6b;
  --gold:#d4af37; --gold-light:#f0d878; --gold-dark:#9c7a1f;
  --green:#189968; --orange:#c9862a; --red:#c23a30; --gray:#6b6255;
  --bg:#f6f4ee; --card:#ffffff; --border:#e6e0d0; --text:#1c2536;
  /* neon accent pulled from the new logo mark, used for login/brand highlights */
  --neon-blue:#29d3f5; --neon-blue-light:#8fedff; --neon-green:#b9e51b; --neon-green-dark:#7fae00;
  /* Heading/subheading/muted text reuse the brand navy/navy2/gray in light
     mode (unchanged look), but are split into their own tokens so dark mode
     can relight them independently without touching navy's use as a
     background/accent color elsewhere. */
  --heading:var(--navy); --subheading:var(--navy2); --muted:var(--gray);
}
body.dark-mode{
  /* Dark theme: same brand hues, relit surfaces. Backgrounds/gradients that
     already use navy/navy-deep (sidebar, login panel, headers, buttons) need
     no change -- they were designed dark already. This just flips the page
     and card surfaces plus the text tokens that were tuned for a light bg. */
  --bg:#0f1720; --card:#16212c; --border:#2a3846; --text:#e7edf2;
  --heading:#f3f6ea; --subheading:#c9d8d5; --muted:#9db0ac;
}
body.dark-mode .card-pro-trend.flat,
body.dark-mode .hero-kpi-trend.flat,
body.dark-mode .team-card-avatar-more,
body.dark-mode .dash-list-item .badge-tag.muted,
body.dark-mode .tier-chip{ background:#22303c; }
body.dark-mode .banner{ background:#2e2812; border-color:#5a4a17; color:#f0d878; }
body.dark-mode .notif-banner{ background:var(--card); }
body.dark-mode .sidebar-logo-chip{ background:#1c2a35; }
body.dark-mode .lb-row.top{ background:linear-gradient(90deg,#2a2410,#332a10); }
body.dark-mode .tbl tr:hover td{ background:#1d2b36; }
body.dark-mode .msg-text{ background:#22303c; }
body.dark-mode .dash-widget-form{ background:#1c2a35; }
body.dark-mode .policies-popover-viewall:hover,
body.dark-mode .notif-bell-clear:hover{ background:#22303c; }
body.dark-mode .qc-remark{ background:#17232f; border-color:#2c4a70; }
body.dark-mode .att-heat-cell.off{ background:#22303c; color:#6b7c86; }
body.dark-mode .att-heat-cell.future{ background:#182229; color:#3c4954; }
body.dark-mode .att-heat-dot.off{ background:#22303c; border-color:#324352; }
body.dark-mode .report-bar-track,
body.dark-mode .card-pro-bar,
body.dark-mode .target-bar{ background:#22303c; }
body.dark-mode .info-modal-close:hover{ background:rgba(255,255,255,.08); }
body.dark-mode .lead-col-count{ background:var(--card); }
/* .btn.ghost is the big one: used for every Quick Action button, the "clear
   all" links, etc. Its background was a hardcoded light gray (#eef1f7) that
   didn't flip with the theme, while its text already switched to the
   near-white --heading token -- near-white text on a light-gray background
   is the washed-out/illegible look reported after the first dark mode pass.
   Every other hardcoded-light-background selector paired with a --heading/
   --subheading/--muted text color was already covered above; this was the
   one that got missed because it's a compound class name. */
body.dark-mode .btn.ghost{ background:#22303c; }
body.dark-mode .cropper-canvas{ background:#22303c; }
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
button{font-family:inherit;cursor:pointer;}
input,select{font-family:inherit;}

/* login — grounded and professional rather than generic-SaaS-template, but
   with real visual craft: a soft static gold glow (not spinning), a quiet
   line-art "network" motif bleeding off the corner, and a staggered
   fade-up entrance. No looping animations once the page has settled. */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(circle at 18% 12%, rgba(212,175,55,.12), transparent 48%), var(--navy-deep);}

.login-shell{position:relative;width:100%;max-width:920px;min-height:540px;display:flex;background:var(--card);
  border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(5,20,24,.4);
  animation:loginShellIn .5s cubic-bezier(.2,.8,.3,1) both;}
@keyframes loginShellIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

.login-brand-panel{flex:1.05;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(165deg,var(--navy-deep) 0%,var(--navy) 60%,var(--navy2) 100%);
  padding:44px 40px;display:flex;flex-direction:column;justify-content:space-between;}
.login-brand-dotgrid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 34px);}
.login-brand-glow{position:absolute;top:-90px;left:50%;transform:translateX(-50%);width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.34),transparent 70%);filter:blur(4px);pointer-events:none;}
.login-brand-glow-bottom{position:absolute;bottom:-100px;right:-80px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(15,106,125,.55),transparent 72%);filter:blur(4px);pointer-events:none;}
.login-brand-top,.login-brand-mid,.login-brand-foot{position:relative;z-index:1;}
.login-brand-top{text-align:center;}
.login-brand-logo-full{max-width:210px;height:auto;display:block;margin:0 auto;animation:loginFadeUp .5s ease both;}
.login-brand-divider{width:46px;height:2px;margin:16px auto 0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));animation:loginFadeUp .5s ease .04s both;}
.login-brand-locale{font-size:11px;color:#a9c7c3;letter-spacing:.06em;margin-top:12px;animation:loginFadeUp .5s ease .08s both;}
@keyframes loginFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
/* login v4: a real pull-quote from the floor instead of decorative line art --
   more human than a geometric graphic, and gives the panel actual content to
   read rather than pure ornament. Swap the name/quote for your own leader's
   whenever you like -- it's plain markup, not generated. */
.login-brand-quote-mark{font-family:Georgia,'Times New Roman',serif;font-size:56px;line-height:.5;height:34px;
  color:var(--gold-light);opacity:.85;animation:loginFadeUp .5s ease both;}
.login-brand-quote{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:19px;line-height:1.5;
  color:#f2f9f7;margin:6px 0 16px;max-width:340px;animation:loginFadeUp .5s ease .08s both;}
.login-brand-attribution{display:flex;align-items:center;gap:10px;animation:loginFadeUp .5s ease .16s both;}
.login-brand-avatar{width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--navy-deep);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;}
.login-brand-attrib-name{font-size:12.5px;color:#eaf5f3;font-weight:700;margin:0;}
.login-brand-attrib-role{font-size:11px;color:#9fc4bd;margin:0;}
.login-brand-foot{font-size:11px;color:#89a8a4;border-top:1px solid rgba(212,175,55,.2);padding-top:14px;margin-top:24px;line-height:1.6;}

.login-card{flex:1;padding:52px 46px;display:flex;flex-direction:column;justify-content:center;position:relative;min-width:300px;}
.login-card-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy),var(--gold));}
.login-card-title{font-size:23px;font-weight:800;color:var(--heading);margin:0 0 4px;letter-spacing:-.01em;}
.login-card .muted{margin-bottom:24px;}
.login-card .btn.primary{background:var(--navy);box-shadow:0 3px 10px rgba(15,51,59,.25);transition:background .15s,box-shadow .15s,transform .1s;}
.login-card .btn.primary:hover{background:var(--navy2);box-shadow:0 5px 16px rgba(15,51,59,.32);transform:translateY(-1px);}
.login-card .btn.primary:active{transform:translateY(0);}
.login-card .field input{transition:border-color .15s,box-shadow .15s;}
.login-card .field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,121,141,.12);}
.login-footer-note{margin-top:22px;text-align:center;font-size:11px;color:var(--muted);}

@media (max-width:760px){
  .login-shell{flex-direction:column;max-width:420px;min-height:0;border-radius:14px;}
  .login-brand-panel{padding:28px 26px;}
  .login-brand-mid,.login-brand-foot{display:none;}
  .login-brand-logo-full{max-width:150px;}
  .login-card{padding:30px 26px;}
}

.brand{font-size:24px;font-weight:800;color:var(--heading);}
.brand span{color:var(--blue);}
.brand.small{font-size:18px;padding:18px 20px;}
.brand-logo{max-width:100%;height:auto;display:block;margin:0 auto;}
.brand-logo.login{max-width:220px;margin-bottom:8px;}
.sidebar-logo-chip{background:#fff;border-radius:10px;padding:8px 10px;margin:0 0 12px;box-shadow:0 2px 8px rgba(0,0,0,.18);}
.brand-logo.sidebar{max-width:100%;}
.brand-tagline{text-align:center;font-size:11px;color:var(--muted);letter-spacing:.06em;margin-bottom:14px;text-transform:uppercase;}
.brand-tagline.sidebar{color:var(--gold-light);text-align:left;margin:0 0 14px;letter-spacing:.05em;}
.muted{color:var(--muted);}
.muted.small{font-size:12px;}
.field{margin:12px 0;}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:600;}
.field input,.field select{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:14px;}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold-dark);box-shadow:0 0 0 3px rgba(212,175,55,.18);}
.field.inline{display:inline-block;margin-right:16px;}
.error{color:var(--red);font-size:13px;min-height:16px;}
.btn{border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;transition:filter .15s,box-shadow .15s;}
.btn.primary{background:linear-gradient(135deg,var(--blue),var(--navy2));color:#fff;box-shadow:0 2px 8px rgba(18,121,141,.35);}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 4px 14px rgba(212,175,55,.35);}
.btn.secondary{background:linear-gradient(135deg,var(--purple),var(--purple-dark));color:#fff;}
.btn.ghost{background:#eef1f7;color:var(--heading);}
.btn.danger{background:var(--red);color:#fff;}
.btn.tiny{padding:5px 10px;font-size:12px;}
.btn.full{width:100%;margin-top:6px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.divider{text-align:center;color:var(--muted);font-size:12px;margin:18px 0 8px;text-transform:uppercase;letter-spacing:.05em;}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}

/* shell */
.shell{display:flex;min-height:100vh;}
.sidebar{width:230px;background:linear-gradient(180deg,var(--navy-deep),var(--navy) 55%,var(--navy2));
  color:#fff;display:flex;flex-direction:column;padding:18px 14px;flex-shrink:0;border-right:1px solid rgba(212,175,55,.25);}
.sidebar .brand.small{color:#fff;padding:0 6px 16px;}
.who{display:flex;align-items:center;gap:10px;padding:10px 6px;margin-bottom:10px;border-bottom:1px solid rgba(212,175,55,.2);padding-bottom:16px;}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--gold);}
.avatar.avatar-initials{background:linear-gradient(135deg,var(--blue),var(--navy2));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;}
.who-name{font-size:13px;font-weight:600;}
.who-role{font-size:11px;color:var(--gold-light);}
nav{flex:1;overflow-y:auto;}
.nav-item{padding:10px 10px;border-radius:8px;font-size:13px;margin-bottom:2px;color:#c7cfe2;display:flex;align-items:center;gap:8px;
  border-left:3px solid transparent;transition:background .15s,border-color .15s;position:relative;text-decoration:none;cursor:pointer;}
.nav-item:hover{background:rgba(212,175,55,.10);}
.nav-item.active{background:linear-gradient(90deg,rgba(212,175,55,.22),rgba(18,121,141,.35));color:#fff;border-left-color:var(--gold);}
.nav-item[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);
  margin-left:12px;background:var(--navy-deep);color:#faf6ec;padding:8px 12px;border-radius:8px;font-size:11.5px;font-weight:500;
  white-space:normal;width:180px;line-height:1.4;box-shadow:0 8px 20px rgba(0,0,0,.35);border:1px solid rgba(212,175,55,.5);
  z-index:80;pointer-events:none;animation:navTooltipIn .15s ease both;}
@keyframes navTooltipIn{from{opacity:0;transform:translateY(-50%) translateX(-4px);}to{opacity:1;transform:translateY(-50%) translateX(0);}}

/* generic premium hover tooltip — used on dashboard KPI cards, quick actions,
   and badges so the whole app has the same "hover to learn more" feel a
   premium SaaS product (Salesforce/HubSpot-style) has, not just the sidebar. */
.tip{position:relative;}
.tip[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 11px);left:50%;
  transform:translateX(-50%);background:var(--navy-deep);color:#faf6ec;padding:9px 13px;border-radius:9px;
  font-size:11.5px;font-weight:500;white-space:normal;width:210px;line-height:1.45;text-align:center;
  box-shadow:0 10px 26px rgba(0,0,0,.35);border:1px solid rgba(212,175,55,.5);
  z-index:90;pointer-events:none;animation:tipFadeUp .15s ease both;}
.tip[data-tip]:hover::before{content:'';position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--navy-deep);z-index:90;pointer-events:none;}
@keyframes tipFadeUp{from{opacity:0;transform:translateX(-50%) translateY(4px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.content{flex:1;overflow-y:auto;}
.topbar{padding:14px 24px 0;}
.banner{background:#fff8e6;border:1px solid #f0dca0;color:#7a5c00;padding:8px 14px;border-radius:8px;font-size:12.5px;}
.view{padding:24px 28px 60px;}

h2{margin:0 0 14px;font-size:20px;color:var(--heading);position:relative;padding-bottom:8px;}
h2::after{content:'';display:block;width:42px;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:3px;margin-top:8px;}
h3{margin:20px 0 10px;font-size:15px;color:var(--subheading);font-weight:700;}
h4{margin:18px 0 8px;font-size:13.5px;color:var(--subheading);font-weight:700;}

/* cards */
.cards{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px;}
.card{background:var(--card);border:1px solid var(--border);border-top:2px solid var(--gold);border-radius:12px;
  padding:18px 20px;min-width:160px;flex:1;box-shadow:0 2px 10px rgba(15,51,59,.06);transition:box-shadow .2s,transform .2s;
  display:flex;align-items:center;gap:14px;animation:cardPop .5s cubic-bezier(.2,.7,.3,1.1) both;}
.cards .card:nth-child(1){animation-delay:.02s;} .cards .card:nth-child(2){animation-delay:.07s;}
.cards .card:nth-child(3){animation-delay:.12s;} .cards .card:nth-child(4){animation-delay:.17s;}
.cards .card:nth-child(5){animation-delay:.22s;} .cards .card:nth-child(6){animation-delay:.27s;}
@keyframes cardPop{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.card:hover{box-shadow:0 10px 26px rgba(15,51,59,.16);transform:translateY(-4px);}
.card.accent-green{border-top-color:var(--green);} .card.accent-orange{border-top-color:var(--orange);}
.card.accent-blue{border-top-color:var(--blue);} .card.accent-purple{border-top-color:var(--purple);}
.card.accent-red{border-top-color:var(--red);} .card.accent-gray{border-top-color:var(--gray);}
.card-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy2));box-shadow:0 4px 10px rgba(15,51,59,.2);}
.card.accent-green .card-icon{background:linear-gradient(135deg,var(--green),#0d7a52);}
.card.accent-orange .card-icon{background:linear-gradient(135deg,var(--orange),#b56a12);}
.card.accent-blue .card-icon{background:linear-gradient(135deg,var(--blue),var(--navy2));}
.card.accent-purple .card-icon{background:linear-gradient(135deg,var(--purple),var(--purple-dark));}
.card.accent-red .card-icon{background:linear-gradient(135deg,var(--red),#a5251f);}
.card-body{flex:1;min-width:0;}
.card-label{font-size:11.5px;color:var(--muted);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.card-val{font-size:22px;font-weight:700;color:var(--heading);}

.section-title{font-weight:700;margin:6px 0;font-size:13px;color:var(--subheading);}

/* KPI cards with target + trend (dashboard overview) */
.cards-pro{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:20px;}
.card-pro{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;
  box-shadow:0 2px 10px rgba(15,51,59,.06);animation:cardPop .5s cubic-bezier(.2,.7,.3,1.1) both;}
.card-pro-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.card-pro-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy2));}
.card-pro-trend{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;}
.card-pro-trend.up{background:#e5f5ec;color:var(--green);}
.card-pro-trend.down{background:#fdecea;color:var(--red);}
.card-pro-trend.flat{background:#eef1f7;color:var(--muted);}
.card-pro-val{font-size:23px;font-weight:800;color:var(--heading);margin-bottom:2px;}
.card-pro-lbl{font-size:11.5px;color:var(--muted);margin-bottom:9px;font-weight:600;}
.card-pro-bar{height:5px;background:#eef1f7;border-radius:3px;overflow:hidden;}
.card-pro-bar-fill{height:100%;border-radius:3px;transition:width .6s ease;}
.card-pro-target{font-size:10.5px;color:#9aa3b0;margin-top:6px;}

/* leads / pipeline board -- a lightweight button-driven kanban (no drag lib),
   one column per active stage plus a rolled-up Closed column. */
.lead-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;}
.lead-col{background:var(--bg);border-radius:12px;padding:10px;min-height:80px;}
.lead-col-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;
  color:var(--subheading);padding:4px 4px 10px;text-transform:uppercase;letter-spacing:.03em;}
.lead-col-count{background:var(--card);border-radius:10px;padding:2px 8px;font-size:11px;color:var(--muted);}
.lead-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;
  box-shadow:0 1px 4px rgba(15,51,59,.05);}
.lead-card-name{font-weight:700;font-size:13px;color:var(--heading);}
.lead-card-meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.lead-card-follow{font-size:11px;color:var(--blue);margin-top:6px;}
.lead-card-follow.overdue{color:var(--red);font-weight:700;}
.lead-card-notes{font-size:11.5px;color:var(--muted);margin-top:6px;font-style:italic;line-height:1.4;}
.lead-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
@media (max-width:900px){ .lead-board{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .lead-board{grid-template-columns:1fr;} }

/* hero KPI — one bigger, bolder card ahead of the regular grid, so the single
   most important number on a dashboard reads first (visual hierarchy). */
.hero-kpi-card{background:var(--card);border:1px solid var(--border);border-top:4px solid var(--blue);border-radius:12px;
  padding:20px 22px;margin-bottom:20px;box-shadow:0 2px 10px rgba(15,51,59,.06);animation:cardPop .5s cubic-bezier(.2,.7,.3,1.1) both;}
.hero-kpi-lbl{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:8px;}
.hero-kpi-row{display:flex;align-items:baseline;gap:12px;}
.hero-kpi-val{font-size:40px;font-weight:800;color:var(--heading);line-height:1;}
.hero-kpi-trend{font-size:12px;font-weight:700;padding:3px 9px;border-radius:10px;}
.hero-kpi-trend.up{background:#e5f5ec;color:var(--green);}
.hero-kpi-trend.down{background:#fdecea;color:var(--red);}
.hero-kpi-trend.flat{background:#eef1f7;color:var(--muted);}
.hero-kpi-target{font-size:11.5px;color:#9aa3b0;margin-top:8px;}

/* online presence dot — used in Employees roster, Org Chart, and anywhere
   else showing who's currently active in the CRM */
.presence-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 2px var(--card);}
.presence-dot.online{background:#1fa971;animation:presencePulse 2s infinite;}
.presence-dot.offline{background:#c5cbd3;}
@keyframes presencePulse{0%{box-shadow:0 0 0 2px var(--card),0 0 0 2px rgba(31,169,113,.5);}70%{box-shadow:0 0 0 2px var(--card),0 0 0 6px rgba(31,169,113,0);}100%{box-shadow:0 0 0 2px var(--card),0 0 0 2px rgba(31,169,113,0);}}
.org-presence-dot{position:absolute;bottom:-1px;right:-1px;}

/* attendance calendar-heatmap */
.att-heatmap{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:20px;
  box-shadow:0 2px 10px rgba(15,51,59,.06);max-width:420px;}
.att-heatmap-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px;}
.att-heatmap-dow span{font-size:10.5px;color:var(--muted);text-align:center;font-weight:700;}
.att-heatmap-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.att-heat-cell{aspect-ratio:1;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;}
.att-heat-cell.empty{background:transparent;}
.att-heat-cell.present{background:#1d9e75;color:#fff;}
.att-heat-cell.late{background:#efb63f;color:#4a3300;}
.att-heat-cell.halfday{background:#8b5fbf;color:#fff;}
.att-heat-cell.absent{background:#e07a5f;color:#fff;}
.att-heat-cell.leave{background:#3b7dd8;color:#fff;}
.att-heat-cell.ncns{background:#b42318;color:#fff;}
.att-heat-cell.off{background:#eef1f7;color:#9aa3b0;}
.att-heat-cell.future{background:#f7f8fa;color:#c5cbd3;}
.att-heat-cell.clickable{cursor:pointer;transition:transform .1s ease;}
.att-heat-cell.clickable:hover{transform:scale(1.12);box-shadow:0 2px 6px rgba(0,0,0,.25);}
.att-heatmap-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--muted);}
.att-heat-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;}
.att-heat-dot.present{background:#1d9e75;}
.att-heat-dot.late{background:#efb63f;}
.att-heat-dot.halfday{background:#8b5fbf;}
.att-heat-dot.absent{background:#e07a5f;}
.att-heat-dot.leave{background:#3b7dd8;}
.att-heat-dot.ncns{background:#b42318;}
.att-heat-dot.off{background:#eef1f7;border:1px solid #d5dbe3;}
.team-card-head.clickable{cursor:pointer;border-radius:8px;padding:4px;margin:-4px;transition:background .12s ease;}
.team-card-head.clickable:hover{background:rgba(0,0,0,.04);}

/* payroll — collapsed rows with expandable breakdown (progressive disclosure) */
.payroll-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.payroll-row-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(15,51,59,.06);}
.payroll-row-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;cursor:pointer;list-style:none;flex-wrap:wrap;}
.payroll-row-summary::-webkit-details-marker{display:none;}
.payroll-row-name{font-size:13.5px;font-weight:700;color:var(--heading);}
.payroll-row-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.payroll-row-pay{font-size:15px;font-weight:800;color:var(--heading);}
.payroll-row-chevron{font-size:12px;color:var(--muted);transition:transform .2s;font-style:normal;}
.payroll-row-card[open] .payroll-row-chevron{transform:rotate(180deg);}
.payroll-row-detail-grid{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:12px 18px 16px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--border);}
.payroll-row-detail-grid span:nth-child(even){text-align:right;color:var(--heading);font-weight:600;}
.payroll-edit-card{background:var(--card);border:2px solid var(--blue);border-radius:12px;padding:16px 18px;}
.payroll-edit-name{font-size:14px;font-weight:700;color:var(--heading);margin-bottom:10px;}
.payroll-edit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.payroll-edit-field label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:3px;}
.payroll-bonus-log{border-top:1px solid var(--border);padding-bottom:12px;background:rgba(0,0,0,.015);}
.bonus-log-list{display:flex;flex-direction:column;margin:0 18px 8px;}
.bonus-log-row{display:grid;grid-template-columns:90px 90px 1fr auto;align-items:center;gap:8px;padding:5px 0;font-size:12px;border-bottom:1px dashed var(--border);}
.bonus-log-row:last-child{border-bottom:none;}
.bonus-log-add{display:flex;gap:8px;flex-wrap:wrap;margin:0 18px;align-items:center;}
.bonus-log-add input[type="date"],.bonus-log-add input[type="number"]{width:120px;}
.bonus-log-add input[type="text"]{flex:1;min-width:160px;}

/* leaderboard metric toggle (Total sales / Most improved) */
.lb-metric-toggle{display:flex;gap:6px;margin-bottom:14px;}
.lb-metric-pill{background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:12px;font-weight:600;
  padding:6px 14px;border-radius:16px;cursor:pointer;}
.lb-metric-pill.active{background:var(--navy);color:#fff;border-color:var(--navy);}

/* generic filter chip row — used by Knowledge Base categories and Audit Log */
.filter-chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.filter-chip{background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:11.5px;font-weight:600;
  padding:5px 12px;border-radius:14px;cursor:pointer;}
.filter-chip.active{background:var(--gold);color:var(--heading);border-color:var(--gold);}

/* teams — card per team with stacked avatars */
.team-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:20px;}
.team-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;
  box-shadow:0 2px 10px rgba(15,51,59,.06);}
.team-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.team-card-name{font-size:14px;font-weight:700;color:var(--heading);}
.team-card-actions{display:flex;gap:4px;}
.team-card-count{font-size:12px;color:var(--muted);margin:4px 0 10px;}
.team-card-avatars{display:flex;align-items:center;}
.team-card-avatar,.team-card-avatar-initials{width:28px;height:28px;border-radius:50%;object-fit:cover;
  border:2px solid var(--card);margin-left:-8px;flex-shrink:0;}
.team-card-avatar:first-child{margin-left:0;}
.team-card-avatar-initials{background:linear-gradient(135deg,var(--blue),var(--navy2));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
.team-card-avatar-more{background:#eef1f7;color:var(--muted);display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;}

/* generic status summary strip — used above Loan Requests */
.status-strip{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 16px;
  margin-bottom:16px;font-size:13px;color:var(--heading);}

/* mobile polish for this round's new components — grids already reflow via
   auto-fill, this just tightens sizing so nothing feels oversized/cramped on
   a phone screen. */
@media (max-width:640px){
  .hero-kpi-card{padding:16px 18px;}
  .hero-kpi-val{font-size:30px;}
  .hero-kpi-row{flex-wrap:wrap;gap:8px;}
  .att-heatmap{padding:12px 14px;max-width:100%;}
  .att-heat-cell{font-size:9.5px;}
  .payroll-row-summary{padding:12px 14px;gap:8px;}
  .payroll-row-right{gap:6px;}
  .payroll-row-detail-grid{grid-template-columns:1fr auto;font-size:12px;padding:10px 14px 14px;}
  .team-cards-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .team-card{padding:12px 14px;}
  .lb-metric-pill{font-size:11px;padding:5px 11px;}
  .filter-chip{font-size:11px;padding:4px 10px;}
}
@media (max-width:420px){
  .team-cards-grid{grid-template-columns:1fr;}
}

/* dashboard trend chart + list widgets */
.dash-chart-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:20px;
  box-shadow:0 2px 10px rgba(15,51,59,.06);}
.dash-chart-title{font-size:13px;font-weight:700;color:var(--heading);margin-bottom:10px;}
.dash-lists-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.dash-list-card{flex:1;min-width:260px;background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;box-shadow:0 2px 10px rgba(15,51,59,.06);}
.dash-list-title{font-size:13px;font-weight:700;color:var(--heading);margin-bottom:10px;}
.dash-list-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--text);gap:10px;}
.dash-list-item:last-child{border-bottom:none;}
.dash-list-item .badge-tag{font-weight:700;font-size:11.5px;padding:2px 8px;border-radius:10px;flex-shrink:0;}
.dash-list-item .badge-tag.due{background:#fdecea;color:var(--red);}
.dash-list-item .badge-tag.pending{background:#fdf3e0;color:var(--orange);}
.dash-list-item .badge-tag.ok{background:#e5f5ec;color:var(--green);}
.dash-list-item .badge-tag.gold{background:#fbf1d6;color:var(--gold-dark);}
.dash-list-item .badge-tag.info{background:#e6f6fb;color:var(--blue);}
.dash-list-item .badge-tag.muted{background:#eef1f7;color:var(--muted);}
.dash-list-empty{font-size:12.5px;color:var(--muted);padding:6px 0;}

/* dashboard header */
.dash-header{background:linear-gradient(120deg,var(--navy-deep),var(--navy) 60%,var(--navy2));border-radius:14px;
  padding:24px 28px;margin-bottom:24px;color:#fff;position:relative;box-shadow:0 8px 22px rgba(8,28,34,.22);
  border-top:2px solid var(--gold);}
.dash-greeting{font-size:21px;font-weight:700;font-family:inherit;margin-bottom:4px;position:relative;z-index:1;letter-spacing:-.01em;}
.dash-greeting .wave{margin-right:6px;}
.dash-sub{font-size:12.5px;color:rgba(255,255,255,.62);position:relative;z-index:1;}
.dash-header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;position:relative;z-index:1;}

/* company policies quick-access popover — lives in the light top bar now,
   styled to match the notification bell exactly (same open/close mechanism,
   same panel look). Click the button to open, click it again / click the
   backdrop / click an item to close — no hover-to-open. Hover-to-open used
   to also trigger on every periodic background re-render (the 30s presence
   heartbeat rebuilds the page), which made an open popover visibly flicker;
   click-only state lives in JS (state.showPoliciesPopover) so it survives
   re-renders cleanly with no flicker. */
.policies-popover-wrap{position:relative;flex-shrink:0;}
.dash-policies-btn{position:relative;background:var(--card);border:1px solid var(--border);border-radius:20px;
  height:38px;padding:0 15px;font-size:12.5px;font-weight:700;color:var(--heading);white-space:nowrap;
  display:flex;align-items:center;gap:6px;cursor:pointer;transition:box-shadow .15s,border-color .15s;}
.dash-policies-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.1);border-color:var(--gold);}
/* Right-anchored (not centered) on purpose: this button sits at the far
   right of the top bar, so a centered dropdown needs equal room on both
   sides and gets clipped on narrow/scaled screens (the left half has
   nowhere to go). Anchoring the dropdown's right edge to the button's right
   edge means it only ever grows leftward into the page's own content area,
   so it always renders in full no matter how little room is to the right. */
.policies-popover{position:absolute;top:calc(100% + 10px);right:0;left:auto;width:240px;max-width:min(240px,calc(100vw - 24px));
  max-height:min(380px,70vh);overflow-y:auto;
  background:var(--card);color:var(--text);
  border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.16);border:1px solid var(--border);padding:10px;z-index:60;
  display:none;}
.policies-popover::-webkit-scrollbar{width:6px;}
.policies-popover::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.policies-popover::-webkit-scrollbar-thumb:hover{background:var(--gold);}
.policies-popover-wrap.pinned .policies-popover{display:block;animation:popoverDropIn .16s ease both;}
.policies-popover-title{font-weight:700;font-size:13px;color:var(--heading);padding:6px 8px 8px;}
.policies-popover-item{font-size:12.5px;color:var(--subheading);padding:9px 8px;border-radius:8px;cursor:pointer;line-height:1.4;}
.policies-popover-item:hover{background:var(--bg);}
.policies-popover-viewall{margin-top:6px;padding:8px;border:none;border-radius:8px;background:var(--bg);
  font-size:11.5px;font-weight:700;color:var(--heading);cursor:pointer;text-align:center;}
.policies-popover-viewall:hover{background:#e9edf3;}

/* notifications banner (new announcement / new to-do) */
.notif-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:10px;padding:10px 16px;margin:14px 0 0;font-size:13px;color:var(--subheading);
  box-shadow:0 4px 14px rgba(15,51,59,.06);animation:notifSlideIn .4s ease both;}
@keyframes notifSlideIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.notif-banner-dismiss{background:none;border:none;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;}

/* dashboard widgets: announcements + to-dos */
.dash-widgets-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px;}
.dash-widget{flex:1;min-width:280px;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:18px 20px;box-shadow:0 4px 14px rgba(15,51,59,.06);}
.dash-widget-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px;
  color:var(--heading);margin-bottom:12px;}
.dash-widget-form{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;padding:12px;background:#f8f9fb;
  border-radius:8px;border:1px dashed var(--border);}
.dash-widget-form input,.dash-widget-form textarea,.dash-widget-form select{padding:7px 9px;border:1px solid var(--border);
  border-radius:6px;font-size:13px;font-family:inherit;}
.dash-widget-item{padding:9px 0;border-top:1px solid var(--border);}
.dash-widget-item:first-of-type{border-top:none;}
.dash-widget-item-title{font-weight:700;font-size:13.5px;color:var(--heading);}
.dash-widget-item-body{font-size:12.5px;color:var(--subheading);margin:2px 0 4px;}
.dash-widget-item-meta{font-size:11px;color:var(--muted);}
.dash-widget-item-meta a{color:var(--red);cursor:pointer;}
.todo-item{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;}
.todo-item label{display:flex;align-items:center;gap:8px;cursor:pointer;}
.todo-item.done label span{text-decoration:line-through;color:var(--muted);}
.dash-role-chip{display:inline-block;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  padding:3px 12px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-left:10px;color:rgba(255,255,255,.85);}

/* Digital Card — a real, rectangular, double-sided employee badge, presented
   on a soft spotlight stage instead of floating on plain page background. */
.digi-card-stage{perspective:1200px;margin:0 0 6px;display:flex;justify-content:center;
  background:radial-gradient(ellipse at center, rgba(18,121,141,.10) 0%, rgba(15,51,59,.03) 55%, transparent 75%);
  border-radius:24px;padding:36px 20px;position:relative;}
.digi-card-stage::before{content:'';position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  width:220px;height:22px;background:radial-gradient(ellipse at center, rgba(15,51,59,.16), transparent 70%);}
.digi-card{position:relative;width:300px;max-width:100%;height:500px;border-radius:28px;overflow:hidden;
  background:var(--card);box-shadow:0 20px 46px rgba(15,51,59,.28), 0 4px 14px rgba(15,51,59,.12);
  border:1px solid rgba(212,175,55,.5);cursor:pointer;
  animation:digiCardIn .6s cubic-bezier(.16,.84,.44,1) both;transition:transform .4s ease, box-shadow .4s ease;}
/* Only apply the 3D tilt-on-hover effect on devices with a real mouse.
   On touch screens, :hover sticks after a tap and was fighting with the
   flip transform on .digi-card-inner, making the flip look distorted
   ("upside down") instead of a clean horizontal flip. */
@media (hover:hover) and (pointer:fine){
  .digi-card:hover{transform:translateY(-8px) rotateX(3deg) rotateY(-4deg);
    box-shadow:0 30px 60px rgba(15,51,59,.4), 0 6px 18px rgba(212,175,55,.28);}
}
.digi-card::after{content:'';position:absolute;top:0;left:-60%;width:35%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);
  animation:digiShine 4.5s ease-in-out infinite;z-index:6;pointer-events:none;}
@keyframes digiShine{0%{left:-60%;}35%{left:130%;}100%{left:130%;}}
@keyframes digiCardIn{from{opacity:0;transform:translateY(24px) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}}
.digi-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,.2,.2,1);}
.digi-card.flipped .digi-card-inner{transform:rotateY(180deg);}
.digi-card-face{position:absolute;inset:0;display:flex;flex-direction:column;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--card);}
.digi-card-back{transform:rotateY(180deg);}
.digi-card-photo-wrap{position:relative;width:100%;height:190px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--blue),var(--navy2));}
.digi-card-photo{width:100%;height:100%;object-fit:cover;display:block;}
.digi-card-initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:56px;letter-spacing:.02em;}
.digi-card-panel{position:relative;background:var(--card);border-radius:30px 30px 0 0;margin-top:-30px;
  padding:20px 22px 16px;text-align:center;z-index:2;}
.digi-card-logo-row{margin-bottom:6px;}
.digi-card-logo-mark{height:26px;display:inline-block;}
.digi-card-name{font-size:19px;font-weight:800;color:var(--heading);margin-top:4px;line-height:1.2;}
.digi-card-role-pill{display:inline-block;margin:8px 0 14px;background:linear-gradient(120deg,var(--navy-deep),var(--navy2));
  color:var(--gold-light);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:5px 16px;border-radius:20px;border:1px solid rgba(212,175,55,.5);}
.digi-card-info{text-align:left;display:grid;gap:7px;font-size:12.5px;color:var(--subheading);
  border-top:1px dashed rgba(212,175,55,.6);padding-top:12px;}
.digi-card-info-label{display:inline-block;width:56px;font-weight:700;color:var(--muted);
  text-transform:uppercase;font-size:10.5px;letter-spacing:.03em;}
.digi-card-barcode{margin-top:14px;opacity:.85;}
.digi-card-back-band{display:flex;align-items:center;gap:10px;flex-shrink:0;
  background:linear-gradient(120deg,var(--navy-deep),var(--navy) 60%,var(--blue));padding:16px 22px;
  border-bottom:3px solid var(--gold);}
.digi-card-back-band .digi-card-logo-mark{height:22px;filter:brightness(0) invert(1);}
.digi-card-back-brand{color:#fff;font-weight:800;font-size:13px;letter-spacing:.04em;}
.digi-card-back-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:18px 24px;}
.digi-card-back-block{text-align:left;}
.digi-card-back-label{font-size:10.5px;font-weight:700;color:var(--gold-dark);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:3px;}
.digi-card-back-value{font-size:13px;color:var(--subheading);line-height:1.4;}
.digi-card-back-terms{flex-shrink:0;font-size:10.5px;color:var(--muted);font-style:italic;text-align:center;
  padding:0 22px 14px;line-height:1.4;}
.digi-card-footer{flex-shrink:0;background:linear-gradient(120deg,var(--navy-deep),var(--navy) 55%,var(--gold-dark));
  color:#faf6ec;font-size:11px;font-weight:700;letter-spacing:.03em;padding:9px 10px;text-align:center;}
.digi-card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}

/* table */
.tbl{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(15,51,59,.06);margin-bottom:20px;}
.tbl th{text-align:left;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#f0ead0;padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
.tbl td{padding:10px 12px;font-size:13.5px;border-top:1px solid var(--border);}
.tbl tr:hover td{background:#faf7ee;}

/* badges */
.badge{padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700;color:#fff;}
.badge.green{background:var(--green);} .badge.orange{background:var(--orange);} .badge.red{background:var(--red);} .badge.blue{background:var(--blue);} .badge.gray{background:var(--gray);} .badge.purple{background:var(--purple);}

/* forms — intentionally width-capped so a text input/textarea doesn't stretch
   edge-to-edge on a wide monitor (that looks worse, not better, for a form). */
.form-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:20px;max-width:640px;box-shadow:0 2px 10px rgba(15,51,59,.05);}
.actions-row{display:flex;gap:10px;margin-bottom:20px;}

/* read-only content cards (Knowledge Base articles, Coaching Notes, Company
   Policies, etc.) — these used to reuse .form-box, which caps at ~520-640px,
   leaving a huge dead void on any wide screen. .info-grid instead reflows the
   cards into as many columns as fit, so the page actually uses the width it
   has instead of a single narrow strip down the left. */
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:20px;align-items:start;}
.info-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;
  box-shadow:0 2px 10px rgba(15,51,59,.06);transition:transform .15s,box-shadow .15s;
  animation:cardPop .45s cubic-bezier(.2,.7,.3,1.1) both;border-top:2px solid var(--gold);}
.info-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,51,59,.14);}

/* leaderboard */
.leaderboard{display:flex;flex-direction:column;gap:8px;max-width:900px;margin-bottom:20px;}
.lb-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 16px;
  box-shadow:0 2px 8px rgba(15,51,59,.05);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden;
  animation:cardPop .45s cubic-bezier(.2,.7,.3,1.1) both;}
.lb-row-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(18,121,141,.09),rgba(18,121,141,.02));z-index:0;transition:width .6s ease;}
.lb-rank,.lb-avatar,.lb-avatar-initials,.lb-name,.lb-amt{position:relative;z-index:1;}
.lb-row.top .lb-row-fill{background:linear-gradient(90deg,rgba(212,175,55,.22),rgba(212,175,55,.03));}
.lb-row:hover{transform:translateX(4px);box-shadow:0 6px 18px rgba(15,51,59,.12);}
.lb-row.top{border:1px solid var(--gold);background:linear-gradient(90deg,#fffdf3,#fff6de);box-shadow:0 4px 14px rgba(212,175,55,.25);}
.lb-row.top:hover{box-shadow:0 8px 22px rgba(212,175,55,.35);}
.lb-rank{width:32px;font-size:18px;font-weight:700;text-align:center;flex-shrink:0;}
.lb-avatar,.lb-avatar-initials{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid #fff;box-shadow:0 0 0 1px var(--border);}
.lb-avatar-initials{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#f0ead0;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.lb-name{flex:1;font-weight:600;font-size:14px;}
.lb-amt{font-weight:700;color:var(--blue);}

/* chat */
.chat-wrap{display:flex;gap:16px;height:min(640px,72vh);}
.chat-channels{width:190px;flex-shrink:0;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px;overflow-y:auto;}
.chan{padding:8px 10px;border-radius:8px;font-size:13px;color:var(--subheading);margin-bottom:2px;}
.chan.active{background:linear-gradient(135deg,var(--blue),var(--navy2));color:#fff;}

.chat-1on1-huddle{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:6px;}
.chat-huddle-label{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--subheading);opacity:.65;}
.chat-huddle-select{width:100%;padding:7px 8px;border-radius:8px;border:1px solid var(--border);font-size:12.5px;background:var(--card);color:var(--subheading);}
.chat-huddle-btn{width:100%;justify-content:center;}
.chat-group-huddle-btn{width:100%;justify-content:center;margin-top:2px;}

.huddle-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:18px;background:var(--navy-deep);color:#faf6ec;padding:12px 18px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.35);animation:huddleBarIn .35s ease both;max-width:92vw;}
@keyframes huddleBarIn{from{opacity:0;transform:translateX(-50%) translateY(16px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.huddle-bar-info{display:flex;align-items:center;gap:9px;font-size:13px;flex-wrap:wrap;}
.huddle-bar-info b{color:#fff;}
.huddle-bar-info .muted.small{color:#c9c2ad;font-size:11.5px;}
.huddle-bar-actions{display:flex;gap:8px;flex-shrink:0;}
.huddle-live-dot{width:9px;height:9px;border-radius:50%;background:#ff5c5c;flex-shrink:0;animation:huddleLivePulse 1.4s infinite;}
@keyframes huddleLivePulse{0%{box-shadow:0 0 0 0 rgba(255,92,92,.55);}70%{box-shadow:0 0 0 8px rgba(255,92,92,0);}100%{box-shadow:0 0 0 0 rgba(255,92,92,0);}}

.incoming-call-banner{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:400;display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#1c8a4c,#136b3a);color:#fff;padding:14px 20px;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 0 3px rgba(255,255,255,.08);animation:incomingCallIn .3s ease both,incomingCallPulse 1.2s ease-in-out infinite;max-width:94vw;}
@keyframes incomingCallIn{from{opacity:0;transform:translateX(-50%) translateY(-18px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes incomingCallPulse{0%,100%{box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 0 3px rgba(255,255,255,.08);}50%{box-shadow:0 16px 44px rgba(0,0,0,.45),0 0 0 7px rgba(255,255,255,.16);}}
.incoming-call-info{display:flex;align-items:center;gap:11px;font-size:13.5px;flex-wrap:wrap;}
.incoming-call-info .incoming-call-ring-dot{width:11px;height:11px;border-radius:50%;background:#fff;flex-shrink:0;animation:huddleLivePulse 1s infinite;}
.incoming-call-info b{color:#fff;font-size:14.5px;}
.incoming-call-info .muted.small{color:#dff5e6;font-size:11.5px;}
.incoming-call-actions{display:flex;gap:8px;flex-shrink:0;}
.incoming-call-actions .btn.primary{background:#fff;color:#136b3a;border-color:#fff;}
.incoming-call-actions .btn.primary:hover{background:#eafff1;}
.incoming-call-actions .btn.ghost{border-color:rgba(255,255,255,.55);color:#fff;}
.incoming-call-actions .btn.ghost:hover{background:rgba(255,255,255,.12);}

.chat-huddle-banner{display:flex;align-items:center;gap:12px;justify-content:space-between;background:linear-gradient(135deg,#1c8a4c,#136b3a);color:#fff;padding:10px 14px;border-radius:10px;margin:0 0 12px;font-size:13px;flex-wrap:wrap;}
.chat-huddle-banner .chat-huddle-banner-info{display:flex;align-items:center;gap:9px;}
.chat-huddle-banner .chat-huddle-banner-info b{color:#fff;}
.chat-huddle-banner-actions{display:flex;gap:8px;flex-shrink:0;}
.chat-huddle-banner-actions .btn.primary{background:#fff;color:#136b3a;border-color:#fff;}
.chat-huddle-banner-actions .btn.primary:hover{background:#eafff1;}
.chat-huddle-banner-actions .btn.icon{background:transparent;border:none;color:#dff5e6;cursor:pointer;font-size:14px;padding:4px 6px;}
.chat-huddle-banner-actions .btn.icon:hover{color:#fff;}

.mention{color:var(--blue,#2563eb);background:rgba(37,99,235,.1);padding:0 3px;border-radius:4px;}
.mention-all{color:#b8860b;background:rgba(184,134,11,.12);padding:0 3px;border-radius:4px;}

/* Silent background data syncs (presence heartbeat, live-sync ticks) rebuild
   #app's whole DOM tree same as any other render, but with every card/row's
   entrance animation free to replay every time, that reads as a visible
   flash/flicker. body.bg-refresh is toggled on for one paint cycle around
   those specific renders (see backgroundRender() in script.js) so the swap
   lands looking like a quiet, instant update instead. */
body.bg-refresh #app, body.bg-refresh #app *{animation:none !important;transition:none !important;}

/* 2026-09-17: backgroundRender() (script.js) now wraps the DOM swap in
   document.startViewTransition() where the browser supports it, so the
   swap only becomes visible once the new tree is fully painted instead of
   showing the in-between frame(s) of a raw synchronous innerHTML rebuild
   -- that in-between paint, not any CSS animation, was the remaining
   source of the visible "pulse" on a busy background refresh. The API's
   own default behavior is a cross-fade between old/new snapshots, which
   would itself look like a flash/blink, so it's turned off here to make
   the swap a plain instant replace. */
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root){ animation: none !important; mix-blend-mode: normal !important; }

/* ---------------- mobile app shell ---------------- */
.mobile-shell{display:flex;flex-direction:column;min-height:100vh;}
.mobile-topbar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(180deg,var(--navy-deep),var(--navy) 90%);color:#faf6ec;flex-shrink:0;}
.mobile-topbar .brand-logo.mobile{height:30px;width:auto;}
.mobile-topbar-text{flex:1;min-width:0;}
.mobile-topbar-name{font-weight:700;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mobile-topbar-role{font-size:11.5px;color:#c9c2ad;}
.mobile-content{flex:1;overflow-y:auto;padding:14px 14px 90px;-webkit-overflow-scrolling:touch;}
.mobile-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(0,0,0,.12);padding-bottom:env(safe-area-inset-bottom,0);}
.mobile-tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:9px 4px 8px;background:none;border:none;cursor:pointer;color:var(--muted-fg,#8a8578);font-size:10.5px;}
.mobile-tab-btn span{font-size:19px;line-height:1;}
.mobile-tab-btn.active{color:var(--gold,#c9a13b);}
.mobile-more-profile{display:flex;align-items:center;gap:12px;margin:6px 0 18px;}
.mobile-more-list{display:flex;flex-direction:column;gap:10px;}
.mobile-more-list .btn.full{justify-content:flex-start;text-align:left;}
@media (max-width:768px){
  body.dark-mode .mobile-topbar{background:linear-gradient(180deg,var(--navy-deep),var(--navy2) 90%);}
}
.chat-main{flex:1;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;}
.msg{margin-bottom:12px;font-size:13.5px;}
.msg-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;}
.msg-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--gold);}
.msg-avatar.msg-avatar-initials{background:linear-gradient(135deg,var(--blue),var(--navy2));display:flex;
  align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;}
.msg-body{flex:1;min-width:0;}
.msg-head{font-size:12px;margin-bottom:3px;}
.msg-text{font-size:13.5px;background:#f3f5f9;padding:8px 12px;border-radius:2px 12px 12px 12px;display:inline-block;
  max-width:100%;word-break:break-word;color:var(--text);}
.chat-input-wrap{border-top:1px solid var(--border);}
.chat-input{display:flex;align-items:flex-end;}
.chat-input input,.chat-input textarea{flex:1;border:none;padding:12px;font-size:14px;font-family:inherit;background:transparent;color:var(--text);}
.chat-input textarea{resize:none;max-height:140px;overflow-y:auto;line-height:1.35;}
.chat-input textarea:focus{outline:none;}
.chat-input button{border-radius:0;}
/* Attach/emoji buttons sit inline with the composer, WhatsApp-style -- plain
   icon buttons, no background, so they don't compete visually with the
   actual Send button. */
.chat-tool-btn{background:none;border:none;font-size:18px;padding:8px 6px;cursor:pointer;flex-shrink:0;line-height:1;}
.chat-tool-btn:hover{opacity:.7;}
.chat-tool-btn:disabled{opacity:.35;cursor:not-allowed;}
/* Pending-attachment preview strip shown above the composer between picking
   a photo/GIF (or pasting one) and actually hitting Send -- same idea as
   WhatsApp's own pre-send image preview. */
.chat-attach-preview{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--border);background:var(--bg);}
.chat-attach-preview img{width:40px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--border);}
/* An image/GIF actually sent in a conversation -- rendered as its own
   bubble-like block above (or instead of) the text bubble, capped so a
   full-resolution photo doesn't blow out the message list's width. */
.msg-attachment{margin-bottom:4px;}
.msg-img{max-width:260px;max-height:260px;border-radius:10px;cursor:pointer;display:block;border:1px solid var(--border);object-fit:cover;}
.msg-img:hover{opacity:.92;}
/* Curated emoji grid -- plain DOM popup like .chat-mention-popup below, not
   routed through render(), so picking several in a row never disturbs the
   composer's cursor position or whatever's already typed. */
.chat-emoji-popup{position:fixed;z-index:80;background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-width:260px;}
.chat-emoji-item{background:none;border:none;font-size:19px;padding:5px;cursor:pointer;border-radius:6px;line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;}
.chat-emoji-item:hover{background:var(--bg);}
.chat-dm-list{display:flex;flex-direction:column;gap:1px;}
.dm-entry{display:flex;align-items:center;gap:8px;cursor:pointer;}
.dm-entry .msg-avatar.tiny{width:22px;height:22px;border-width:1px;flex-shrink:0;}
.chat-dm-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);font-size:14px;}
.chat-search-box{display:flex;align-items:center;gap:4px;margin-bottom:10px;}
.chat-search-box input{flex:1;border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:12.5px;background:var(--card);color:var(--text);}
.chat-search-result{padding:7px 8px;border-radius:8px;cursor:pointer;margin-bottom:2px;}
.chat-search-result:hover{background:rgba(0,0,0,.04);}
.chat-search-snippet{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.dark-mode .chat-search-result:hover{background:rgba(255,255,255,.06);}

/* Sidebar "Secure Chat" nav badge -- total unread across every channel/DM/
   group this person is in, same red-pill styling as the notification bell's
   count so it reads as "you have something waiting" at a glance. */
.nav-item{position:relative;}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:9px;
  min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0;}
/* Per-conversation unread badge inside the chat sidebar list (channels,
   groups, DMs) -- same red pill, right-aligned next to the entry's name. */
.chan-badge{background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:9px;
  min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0;margin-left:auto;}
/* WhatsApp-style read receipt next to your own sent messages -- a plain grey
   checkmark once it's saved, turning blue+doubled once the other side (or,
   for a group, at least one other member) has actually opened that
   conversation and their chat_reads.last_read_at has caught up to this
   message's timestamp. */
.msg-receipt{margin-left:8px;font-size:11px;color:var(--muted);white-space:nowrap;}
.msg-receipt.seen{color:var(--blue);font-weight:600;}
/* Edit/delete icon buttons on a message row -- Admin/Manager/HR moderation
   only (see canModerateChat in script.js). Hidden until the row is hovered
   so the message list doesn't look cluttered with controls most people
   can't use anyway. */
.msg-mod-actions{margin-left:8px;opacity:0;transition:opacity .12s;white-space:nowrap;}
.msg-row:hover .msg-mod-actions{opacity:1;}
.msg-mod-actions .btn.icon.tiny{padding:2px 5px;font-size:12px;}
.msg-text.msg-deleted{background:transparent;border:1px dashed var(--border);color:var(--muted);font-style:italic;}
/* Reaction trigger (the small "add a reaction" smiley) -- same hide-until-hover
   treatment as .msg-mod-actions above, available to everyone (not just
   moderators). Reaction pills themselves (the emoji+count chips once at
   least one person has reacted) are always visible, not just on hover. */
.msg-react-trigger{margin-left:6px;opacity:0;transition:opacity .12s;}
.msg-row:hover .msg-react-trigger{opacity:1;}
.msg-react-trigger .btn.icon.tiny{padding:2px 5px;font-size:12px;}
.msg-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.msg-reaction-pill{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--border);border-radius:12px;padding:1px 7px;font-size:12px;background:var(--card-bg,#fff);cursor:pointer;line-height:1.6;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;}
.msg-reaction-pill:hover{border-color:var(--accent,#6b46c1);}
.msg-reaction-pill.mine{background:rgba(107,70,193,.12);border-color:var(--accent,#6b46c1);}
.chat-reaction-popup{position:fixed;z-index:400;background:var(--card-bg,#fff);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.18);padding:6px;display:flex;gap:2px;}
.chat-reaction-popup .chat-emoji-item{background:none;border:none;font-size:19px;padding:4px 6px;cursor:pointer;border-radius:6px;}
.chat-reaction-popup .chat-emoji-item:hover{background:var(--hover-bg,rgba(0,0,0,.06));}
/* Pin button on each chat sidebar entry -- dim/outline by default (present
   but not distracting), filled gold once pinned so a pinned conversation's
   spot at the top of the list also reads as "pinned" at a glance, not just
   its position. */
.chan-pin-btn{background:none;border:none;cursor:pointer;font-size:12px;padding:2px 4px;opacity:.35;flex-shrink:0;filter:grayscale(1);}
.chan-pin-btn:hover{opacity:.8;}
.chan-pin-btn.pinned{opacity:1;filter:none;}
/* New-message toast stack -- stays visible anywhere in the app (not just on
   the Chat page) for messages in a conversation you're not already looking
   straight at, the same job the ding sound does but visually, so a message
   landing while you're on Payroll or Attendance still actually reaches you
   instead of silently sitting there until you happen to open Chat. */
.chat-toast-stack{position:fixed;right:18px;bottom:18px;z-index:500;display:flex;flex-direction:column;gap:10px;max-width:min(320px,92vw);}
.chat-toast{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;
  box-shadow:0 12px 32px rgba(0,0,0,.22);cursor:pointer;animation:chatToastIn .25s ease both;}
.chat-toast:hover{border-color:var(--gold);}
@keyframes chatToastIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.chat-toast-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:700;color:var(--heading);margin-bottom:4px;}
.chat-toast-close{border:none;background:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:2px;}
.chat-toast-close:hover{color:var(--text);}
.chat-toast-body{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* sales targets */
.target-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;max-width:560px;margin-bottom:20px;box-shadow:0 2px 10px rgba(15,51,59,.05);}
.target-count{font-weight:700;font-size:16px;margin-bottom:8px;}
.target-bar{height:10px;background:#eef1f7;border-radius:6px;overflow:hidden;margin-bottom:8px;}
.target-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--gold));}
.tier-list{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;}
.tier-chip{font-size:11.5px;padding:4px 9px;border-radius:20px;background:#eef1f7;color:var(--subheading);border:1px solid var(--border);}
.tier-chip.done{background:linear-gradient(135deg,var(--green),#178a5c);color:#fff;border-color:var(--green);}

/* exams */
.q-block{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:12px;max-width:560px;}
.q-text{font-weight:600;margin-bottom:8px;font-size:14px;}
.opt{display:block;font-size:13.5px;margin-bottom:6px;}
.qc-remark{background:#eef4ff;border:1px solid #cddcfb;border-radius:8px;padding:10px 14px;margin-top:10px;font-size:13px;max-width:560px;}

/* tables scroll horizontally on narrow screens instead of squashing */
.view{overflow-x:auto;}
.tbl{min-width:600px;}

/* mobile: usable on a phone browser, e.g. checking in from the floor */
@media (max-width: 860px){
  .shell{flex-direction:column;min-height:auto;}
  .sidebar{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px;gap:4px;}
  .sidebar .brand.small{width:100%;text-align:center;padding:4px 0 8px;}
  .who{display:none;}
  nav{display:flex;flex-wrap:wrap;flex:none;width:100%;gap:4px;}
  .nav-item{flex:1 1 auto;text-align:center;font-size:11.5px;padding:8px 6px;}
  .sidebar > .btn{width:100%;margin-top:8px;}
  .content{width:100%;}
  .view{padding:14px;}
  .cards{flex-direction:column;}
  .card{min-width:0;}
  .chat-wrap{flex-direction:column;height:auto;}
  .chat-channels{width:100%;max-height:220px;overflow-y:auto;}
  .chat-main{height:64vh;}
  .chat-msgs{max-height:300px;}
  .login-shell,.login-shell-glow{width:88vw;}
  .quick-grid{grid-template-columns:1fr;}
}

/* page hero — rich gradient header for secondary pages, matching the dashboard's
   own header treatment so the whole app carries the same premium weight instead
   of that polish stopping at the dashboard. */
.page-hero{display:flex;align-items:center;gap:16px;
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 55%,var(--blue) 140%);
  border-radius:14px;padding:18px 22px;margin-bottom:20px;box-shadow:0 10px 26px rgba(15,51,59,.18);
  position:relative;overflow:hidden;border-top:2px solid var(--gold);}
.page-hero::after{content:'';position:absolute;top:-45%;right:-8%;width:240px;height:240px;
  background:radial-gradient(circle,rgba(212,175,55,.2),transparent 70%);pointer-events:none;}
.page-hero-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;
  font-size:21px;flex-shrink:0;position:relative;z-index:1;}
.page-hero-title{font-size:18px;font-weight:800;color:#fff;position:relative;z-index:1;letter-spacing:-.01em;}
.page-hero-sub{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:4px;position:relative;z-index:1;max-width:560px;line-height:1.4;}
@media (max-width:640px){
  .page-hero{padding:14px 16px;gap:12px;}
  .page-hero-icon{width:36px;height:36px;font-size:17px;}
  .page-hero-title{font-size:15.5px;}
}

/* persistent top bar + unified notification bell — sticky so the Policies/Bell
   buttons (and whatever dropdown is open under them) never scroll away or get
   cut off mid-scroll, and padded to match .view's own margins so it lines up
   with the page content below instead of sitting flush against the edge. */
.content-topbar{position:sticky;top:0;z-index:40;background:var(--card);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:24px 28px 14px;margin-bottom:20px;border-bottom:1px solid var(--border);}
.content-topbar-title{font-size:15px;font-weight:700;color:var(--heading);display:flex;align-items:center;gap:8px;}
.content-topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.notif-bell-wrap{position:relative;}
.notif-bell-btn{position:relative;background:var(--card);border:1px solid var(--border);border-radius:50%;width:38px;height:38px;font-size:16px;display:flex;align-items:center;justify-content:center;transition:box-shadow .15s;}
.notif-bell-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.1);}
.notif-bell-count{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:9px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 0 0 2px var(--card);}
/* Right-anchored for the same reason as .policies-popover above — this is
   the rightmost icon in the whole top bar, so it needs the most protection
   against being clipped by a centered anchor. */
.notif-bell-popover{display:none;position:absolute;right:0;left:auto;top:46px;width:260px;max-width:min(260px,calc(100vw - 24px));max-height:380px;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.16);z-index:60;padding:8px;}
/* click-to-toggle only (see the Policies popover comment above for why) */
.notif-bell-wrap.pinned .notif-bell-popover{display:block;animation:popoverDropIn .16s ease both;}
.notif-bell-title{font-weight:700;font-size:13px;padding:6px 8px 8px;color:var(--heading);}
.notif-bell-item{padding:9px 8px;border-radius:8px;font-size:12.5px;cursor:pointer;line-height:1.4;}
.notif-bell-item:hover{background:var(--bg);}
.notif-bell-empty{padding:16px 8px;color:var(--muted);font-size:12.5px;text-align:center;}
.notif-bell-clear{width:100%;margin-top:6px;padding:8px;border:none;border-radius:8px;background:var(--bg);font-weight:700;font-size:11.5px;cursor:pointer;color:var(--heading);}
.notif-bell-clear:hover{background:#e9edf3;}
@media (max-width:640px){
  .content-topbar{padding:14px 14px 10px;margin-bottom:12px;}
  .content-topbar-title{font-size:13.5px;}
  .notif-bell-popover{width:80vw;max-width:80vw;}
}

/* Full-page scrim behind the Policies/Notifications dropdowns. Without this,
   the white dropdown sits directly on top of the page's own teal/gold page-hero
   band (which starts immediately below the top bar), so the header's color
   peeked out on either side of the narrower dropdown — looked like a clash
   instead of a clean floating panel.
   The backdrop is a plain sibling <div>, always present but display:none by
   default; :has() switches it on purely based on whether either popover is
   click-pinned open (state.showPoliciesPopover / state.showNotifBell).
   Clicking the backdrop dismisses whichever one is open. */
.popover-backdrop{display:none;position:fixed;inset:0;background:rgba(13,42,50,.32);z-index:55;cursor:default;}
.content-topbar:has(.policies-popover-wrap.pinned) .popover-backdrop,
.content-topbar:has(.notif-bell-wrap.pinned) .popover-backdrop{display:block;animation:scrimFadeIn .15s ease both;}
@keyframes scrimFadeIn{from{opacity:0;}to{opacity:1;}}

/* chat @mention autocomplete popup -- created/positioned by plain DOM JS
   (not the app's render() cycle) so typing doesn't lose input focus/cursor
   position, same reasoning as the topbar popovers' JS positioning above. */
.chat-mention-popup{position:fixed;z-index:80;background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);max-height:220px;overflow-y:auto;min-width:180px;padding:4px;}
.chat-mention-popup-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--text);}
.chat-mention-popup-item .cmp-avatar{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1c2536;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.chat-mention-popup-item.active,.chat-mention-popup-item:hover{background:var(--bg);}
.chat-mention-popup-empty{padding:8px 10px;font-size:12.5px;color:var(--muted);}

/* badges & streaks */
.badges-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.badge-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:20px;font-size:12px;font-weight:700;}
.badge-pill.gold{background:linear-gradient(135deg,#fbf1d6,#f0d878);color:var(--gold-dark);border:1px solid var(--gold);}
.badge-pill.pending{background:#fdf3e0;color:var(--orange);}
.badge-pill.ok{background:#e5f5ec;color:var(--green);}
.badge-pill.info{background:#e6f6fb;color:var(--blue);}

/* photo cropper — Instagram/Facebook-style drag-to-reposition + zoom-slider modal */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.cropper-overlay{position:fixed;inset:0;background:rgba(8,28,34,.62);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;animation:fadeIn .15s ease both;}
.cropper-box{background:var(--card);border-radius:16px;padding:22px;width:340px;max-width:100%;box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center;}
.cropper-title{font-size:16px;font-weight:800;color:var(--heading);margin-bottom:4px;}
.cropper-canvas{width:280px;height:280px;max-width:100%;border-radius:50%;cursor:grab;touch-action:none;
  box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--gold),0 10px 26px rgba(0,0,0,.22);background:#eef1f7;}
.cropper-canvas:active{cursor:grabbing;}
.cropper-slider{width:100%;margin:16px 0 4px;accent-color:var(--blue);}
.cropper-actions{display:flex;gap:10px;justify-content:center;margin-top:14px;}

/* QR check-in */
.qr-checkin-section{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:14px 0;}
.qr-checkin-box{margin-top:14px;text-align:center;max-width:280px;}
.qr-checkin-img{width:220px;height:220px;border-radius:10px;box-shadow:0 4px 16px rgba(15,51,59,.14);background:#fff;padding:8px;}
.qr-scan-box{margin-top:14px;max-width:340px;}
.qr-scan-video{width:100%;border-radius:10px;background:#000;aspect-ratio:1;object-fit:cover;}
.qr-scan-result{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:13.5px;font-weight:600;max-width:400px;}
.qr-scan-result.ok{background:rgba(31,169,113,.12);color:#127a4f;}
.qr-scan-result.err{background:rgba(224,71,63,.12);color:#a8352d;}

/* attendance reports & trends */
.report-bar-legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.legend-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;}
.legend-dot.present{background:#1d9e75;}
.legend-dot.late{background:#efb63f;}
.legend-dot.halfday{background:#8b5fbf;}
.legend-dot.leave{background:#3b7dd8;}
.legend-dot.ncns{background:#b42318;}
.report-bar-row{display:grid;grid-template-columns:130px 1fr 150px;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--border);}
.report-bar-row:last-child{border-bottom:none;}
.report-bar-name{font-size:12.5px;font-weight:600;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.report-bar-track{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#eef1f7;}
.report-bar-seg{height:100%;}
.report-bar-seg.present{background:#1d9e75;}
.report-bar-seg.late{background:#efb63f;}
.report-bar-seg.halfday{background:#8b5fbf;}
.report-bar-seg.leave{background:#3b7dd8;}
.report-bar-seg.ncns{background:#b42318;}
.report-bar-nums{white-space:nowrap;}

/* daily/weekly/custom attendance snapshot */
.att-snap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px;}
.att-snap-col{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.att-snap-col-head{padding:9px 12px;font-size:12.5px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:space-between;}
.att-snap-present .att-snap-col-head{background:#1d9e75;}
.att-snap-late .att-snap-col-head{background:#efb63f;color:#4a3a05;}
.att-snap-halfday .att-snap-col-head{background:#8b5fbf;}
.att-snap-leave .att-snap-col-head{background:#3b7dd8;}
.att-snap-ncns .att-snap-col-head{background:#b42318;}
.att-snap-count{background:rgba(255,255,255,.28);border-radius:10px;padding:1px 8px;font-size:11.5px;}
.att-snap-col-body{padding:8px 10px;max-height:280px;overflow-y:auto;}
.att-snap-name{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:13px;border-bottom:1px solid var(--border);}
.att-snap-name:last-child{border-bottom:none;}
.att-snap-name.clickable{cursor:pointer;border-radius:6px;}
.att-snap-name.clickable:hover{background:rgba(0,0,0,.04);}
.clickable-row{cursor:pointer;}
.att-snap-days{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.att-snap-day-body{padding:4px 18px 16px;border-top:1px solid var(--border);}
.att-snap-day-body .att-snap-grid{margin-top:12px;}
.asdn{font-size:11px;font-weight:700;padding:3px 9px;border-radius:12px;white-space:nowrap;}
.asdn.present{background:rgba(29,158,117,.14);color:#1d9e75;}
.asdn.late{background:rgba(239,182,63,.18);color:#8a6a10;}
.asdn.halfday{background:rgba(139,95,191,.16);color:#8b5fbf;}
.asdn.leave{background:rgba(59,125,216,.14);color:#3b7dd8;}
.asdn.ncns{background:rgba(180,35,24,.14);color:#b42318;}
body.dark-mode .asdn.late{color:#efb63f;}
body.dark-mode .asdn.halfday{color:#c298f0;}
@media (max-width:860px){
  .att-snap-grid{grid-template-columns:1fr 1fr;}
  .payroll-row-right .asdn{font-size:10px;padding:2px 7px;}
}

.scorecard-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:16px;}
.scorecard-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.scorecard-metric{margin:12px 0;}
.scorecard-metric-label{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:600;color:var(--heading);margin-bottom:5px;}
.scorecard-strip{height:10px;border-radius:6px;background:#eef1f7;overflow:hidden;}
.scorecard-strip-fill{height:100%;border-radius:6px;transition:width .2s ease;}
.scorecard-strip-fill.positive{background:var(--green);}
.scorecard-strip-fill.negative{background:var(--red);}
.scorecard-strip-fill.neutral{background:var(--gray);}
body.dark-mode .scorecard-strip{background:#0f1720;}

/* candidate screening shell — the entire screen a temporary candidate login sees */
.candidate-shell{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;background:var(--bg);}
.candidate-shell-card{background:var(--card);border-radius:16px;box-shadow:0 12px 40px rgba(15,51,59,.12);max-width:640px;width:100%;overflow:hidden;}
.candidate-shell-header{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border);}
.candidate-shell-header .brand-logo{width:36px;height:36px;}
.candidate-shell-title{font-size:16px;font-weight:800;color:var(--heading);}
.candidate-shell-body{padding:22px;}

/* generic info modal — attendance day drill-down, employee attendance profile,
   org chart node detail, training recording player */
.info-modal-overlay{position:fixed;inset:0;background:rgba(8,28,34,.62);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;animation:fadeIn .15s ease both;}
.info-modal-box{background:var(--card);border-radius:16px;padding:22px;width:440px;max-width:100%;max-height:82vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.35);}
.info-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;}
.info-modal-title{font-size:17px;font-weight:800;color:var(--heading);}
.info-modal-close{background:none;border:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:6px;}
.info-modal-close:hover{background:rgba(0,0,0,.06);color:var(--heading);}
.info-modal-body{font-size:14px;color:var(--heading);}
.info-modal-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0;}
.info-modal-stat{background:var(--bg);border-radius:10px;padding:10px 12px;text-align:center;}
.info-modal-stat b{display:block;font-size:20px;color:var(--heading);}
.info-modal-stat span{font-size:11.5px;color:var(--muted);}
@media (max-width:640px){
  .info-modal-box{width:100%;padding:16px;}
  .info-modal-stats{grid-template-columns:1fr 1fr;}
}
.info-modal-box.wide{width:820px;}

/* auto-drafted contract + e-signature */
.contract-doc{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;font-size:13px;line-height:1.55;color:var(--text);}
.contract-letterhead{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--gold);padding-bottom:12px;margin-bottom:14px;}
.contract-letterhead img{width:44px;height:44px;object-fit:contain;}
.contract-co-name{font-weight:800;font-size:15px;color:var(--heading);letter-spacing:.02em;}
.contract-co-tag{font-size:10.5px;color:var(--gold-dark);}
.contract-title{text-align:center;font-size:17px;color:var(--navy-deep);margin:6px 0 14px;letter-spacing:.03em;}
.contract-info-table{width:100%;border-collapse:collapse;margin:10px 0 14px;font-size:12.5px;}
.contract-info-table th{background:var(--navy);color:#fff;text-align:left;padding:6px 10px;font-size:11px;letter-spacing:.03em;}
.contract-info-table td{border:1px solid var(--border);padding:6px 10px;background:var(--bg);}
.contract-info-table td:first-child{font-weight:700;color:var(--navy2);width:42%;}
.contract-section{margin:14px 0;}
.contract-section h4{font-size:12.5px;color:var(--heading);margin:0 0 6px;letter-spacing:.02em;}
.contract-section p{margin:0 0 8px;}
.contract-section ul{margin:0 0 8px;padding-left:18px;}
.contract-section li{margin-bottom:3px;}
.contract-blank{color:var(--gold-dark);font-weight:700;}
.contract-sig-area{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;border-top:1px solid var(--border);padding-top:16px;}
.contract-sig-label{font-weight:700;font-size:12.5px;color:var(--heading);margin-bottom:6px;}
.contract-sig-canvas{width:100%;max-width:360px;height:120px;border:1px dashed var(--border);border-radius:8px;background:#fff;touch-action:none;cursor:crosshair;}
.contract-sig-done img.contract-sig-img{max-width:220px;max-height:90px;border:1px solid var(--border);border-radius:6px;background:#fff;padding:4px;}
@media (max-width:640px){
  .contract-sig-area{grid-template-columns:1fr;}
}

/* sales sheet — monthly, Excel-style grid. Agent column is pinned via
   position:sticky so scrolling through a 28-31 day month never loses track
   of whose row you're editing. */
.sales-sheet-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;}
.sales-sheet-tbl{border-collapse:collapse;font-size:12px;white-space:nowrap;width:100%;}
.sales-sheet-tbl th{background:var(--navy);color:#fff;padding:7px 4px;text-align:center;font-weight:700;min-width:30px;}
.sales-sheet-tbl td{padding:0;text-align:center;border-bottom:1px solid var(--border);min-width:30px;}
.sales-sheet-tbl tbody tr:hover td{background:rgba(212,175,55,.07);}
.ss-sticky-col{position:sticky;left:0;z-index:2;background:var(--card);text-align:left !important;padding:7px 12px !important;font-weight:700;color:var(--heading);border-right:1px solid var(--border);min-width:150px;}
.sales-sheet-tbl thead .ss-sticky-col{background:var(--navy);color:#fff;z-index:3;}
.sales-sheet-tbl tfoot .ss-sticky-col{background:var(--bg);}
.ss-total-col{font-weight:800;color:var(--gold-dark);background:var(--bg);padding:7px 10px !important;border-left:1px solid var(--border);}
.sales-sheet-tbl thead .ss-total-col{background:var(--navy2);color:#fff;}
.ss-weekend{background:var(--bg);}
.ss-input{width:32px;height:30px;padding:0;text-align:center;border:none;background:transparent;font-size:12px;color:var(--text);}
.ss-input:focus{outline:2px solid var(--gold);outline-offset:-2px;border-radius:3px;}
.sales-sheet-tbl tfoot td{font-weight:800;color:var(--heading);border-top:2px solid var(--border);background:var(--bg);padding:7px 4px;}

/* org chart — role-tiered accent colors so the hierarchy reads at a glance,
   plus hover depth so it feels like a live management tool, not a static list.
   Root-level teams flow left-to-right and wrap, instead of one long single
   column, so the chart actually uses the page's width on a wide screen
   instead of leaving most of it blank. */
.org-leadership{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px dashed var(--border);}
.org-dept-header{font-weight:800;font-size:13px;color:var(--heading);margin-bottom:12px;letter-spacing:.02em;}
.orgchart-wrap{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:20px;overflow-x:auto;padding:6px 0 18px;}
.org-team-block{background:rgba(18,121,141,.03);border:1px solid var(--border);border-radius:14px;padding:16px;flex:0 0 auto;}
.org-node{display:flex;flex-direction:column;}
.org-card{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--border);
  border-left:3px solid var(--border);border-radius:10px;padding:10px 16px;box-shadow:0 2px 6px rgba(15,51,59,.06);
  width:fit-content;min-width:230px;transition:transform .15s ease, box-shadow .15s ease;cursor:pointer;}
.org-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,51,59,.12);}
.org-card.tier-admin{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(212,175,55,.10),var(--card) 55%);}
.org-card.tier-hr{border-left-color:var(--navy2);}
.org-card.tier-manager{border-left-color:var(--blue);}
.org-card.tier-qc{border-left-color:var(--purple);}
.org-card.tier-accounts{border-left-color:var(--orange);}
.org-card.tier-agent{border-left-color:var(--border);}
.org-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 2px var(--card),0 0 0 3px rgba(212,175,55,.35);}
.org-avatar.org-avatar-initials{background:linear-gradient(135deg,var(--blue),var(--navy2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12.5px;}
.org-info{display:flex;flex-direction:column;gap:2px;}
.org-name{font-weight:700;font-size:13.5px;color:var(--heading);}
.org-role{font-size:11.5px;color:var(--muted);}
.org-team-count{margin-left:14px;flex-shrink:0;font-size:10.5px;font-weight:700;color:var(--subheading);
  background:var(--bg);padding:3px 9px;border-radius:10px;white-space:nowrap;}
.org-children{display:flex;flex-direction:column;gap:10px;margin:10px 0 0 26px;padding-left:22px;
  border-left:2px solid rgba(18,121,141,.18);}
.org-children .org-node{position:relative;}
.org-children .org-node::before{content:'';position:absolute;top:22px;left:-22px;width:18px;height:2px;background:rgba(18,121,141,.28);}
@media (max-width:640px){
  .org-card{min-width:0;}
  .org-children{margin-left:14px;padding-left:14px;}
  .org-children .org-node::before{left:-14px;width:12px;}
}

/* ==========================================================================
   2026-09-23 cleanup round -- Payroll, Performance (Transfers/Calls),
   Secure Chat and Documents & Contracts visual refresh. Everything below is
   additive: new class names only, plus a handful of overrides for chat.
   ========================================================================== */

/* ---- shared: segmented tabs, toolbar, month navigator, pills ---- */
.seg-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:16px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(15,51,59,.05);}
.seg-tabs .seg{border:none;background:transparent;color:var(--subheading);font-weight:700;font-size:13px;padding:8px 14px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s;}
.seg-tabs .seg:hover{background:rgba(15,106,125,.08);}
.seg-tabs .seg.active{background:linear-gradient(135deg,var(--blue),var(--navy2));color:#fff;box-shadow:0 3px 10px rgba(15,106,125,.3);}
.seg-count{font-size:11px;font-weight:800;padding:1px 7px;border-radius:10px;background:rgba(0,0,0,.08);}
.seg.active .seg-count{background:rgba(255,255,255,.22);}
.seg-count.warn{background:#fde7c7;color:#8a5a12;}
.pay-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.pay-toolbar .seg-tabs{margin-bottom:0;}
.pay-toolbar-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;}
.pay-search{flex:1;min-width:180px;max-width:320px;border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:13px;background:var(--card);color:var(--text);}
.pay-search:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,106,125,.15);}
.month-nav{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:5px 6px;box-shadow:0 2px 8px rgba(15,51,59,.05);margin-bottom:14px;}
.pay-toolbar .month-nav{margin-bottom:0;}
.month-nav .btn.tiny{padding:4px 11px;font-size:15px;line-height:1;}
.month-nav .btn:disabled{opacity:.35;cursor:not-allowed;}
.month-nav-label{font-weight:800;color:var(--heading);font-size:14px;min-width:150px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;}
.month-nav-chip{font-size:10px;font-weight:700;background:var(--gold);color:var(--navy-deep);padding:2px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:.03em;}
.month-nav-pick{border:none;background:transparent;color:var(--muted);font-size:12px;width:34px;cursor:pointer;}
.pay-pill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;background:#eef1f5;color:var(--gray);}
.pay-pill.ok{background:#dcf5ea;color:#11734c;}
.pay-pill.warn{background:#fdf0d8;color:#9a6412;}
.pay-pill.bad{background:#fbe1de;color:#a22b22;}
.pay-pill.info{background:#dcecf8;color:#1d5c8f;}
.pay-pill.muted{background:#eef1f5;color:var(--muted);}
.pay-note{background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.4);color:var(--heading);border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:14px;}

/* ---- performance: monthly ranking ---- */
.rank-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.rank-row{display:grid;grid-template-columns:34px 38px minmax(160px,1fr) 90px 150px;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 14px;box-shadow:0 2px 8px rgba(15,51,59,.04);}
.rank-row.is-zero{opacity:.55;}
.rank-pos{font-size:18px;font-weight:800;color:var(--muted);text-align:center;}
.rank-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);}
.rank-avatar.rank-avatar-initials{background:linear-gradient(135deg,var(--blue),var(--navy2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;}
.rank-name{font-weight:700;color:var(--heading);font-size:13.5px;margin-bottom:5px;}
.rank-bar{height:7px;border-radius:6px;background:#eef1f5;overflow:hidden;}
.rank-bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--purple),var(--blue));}
.rank-num{text-align:right;}
.rank-num b{display:block;font-size:22px;font-weight:800;color:var(--heading);line-height:1;}
.rank-num span{font-size:11px;color:var(--muted);}
.rank-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;color:var(--subheading);}
.rank-trend{font-weight:800;font-size:11.5px;padding:1px 7px;border-radius:8px;}
.rank-trend.up{background:#dcf5ea;color:#11734c;}
.rank-trend.down{background:#fbe1de;color:#a22b22;}
.rank-trend.flat{background:#eef1f5;color:var(--muted);}
.log-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);border:1px dashed var(--blue);border-radius:12px;padding:10px 12px;margin:6px 0 4px;}
.log-strip-title{font-weight:800;font-size:13px;color:var(--heading);margin-right:4px;}
.log-strip select,.log-strip input{border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;background:var(--card);color:var(--text);}
.log-strip input[type="text"]{flex:1;min-width:150px;}
.daily-log{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin:6px 0 18px;}
.daily-log summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--subheading);}
.daily-log[open] summary{margin-bottom:10px;}
.daily-log .tbl{margin-bottom:4px;box-shadow:none;}

/* ---- payroll ---- */
.pay-list{display:flex;flex-direction:column;gap:10px;margin:6px 0 20px;}
.pay-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(15,51,59,.05);transition:box-shadow .15s,border-color .15s;}
.pay-card:hover{border-color:rgba(15,106,125,.45);}
.pay-card[open]{border-color:var(--blue);box-shadow:0 8px 26px rgba(15,51,59,.12);}
.pay-card-sum{display:grid;grid-template-columns:42px minmax(170px,1fr) auto 130px 18px;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;list-style:none;}
.pay-card-sum::-webkit-details-marker{display:none;}
.pay-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);}
.pay-avatar.pay-avatar-initials{background:linear-gradient(135deg,var(--blue),var(--navy2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
.pay-name{font-weight:800;color:var(--heading);font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pay-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.pay-status{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.pay-net{text-align:right;}
.pay-net span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;}
.pay-net b{font-size:17px;font-weight:800;color:var(--heading);}
.pay-chev{font-style:normal;color:var(--muted);transition:transform .2s;}
.pay-card[open] .pay-chev{transform:rotate(180deg);}
.pay-card-body{border-top:1px solid var(--border);padding:14px 16px 16px;background:linear-gradient(180deg,rgba(15,106,125,.03),transparent 60px);}
.pay-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.pay-edit{border:1px solid var(--blue);background:rgba(15,106,125,.05);border-radius:12px;padding:14px;margin-bottom:14px;}
.pay-edit-title{font-weight:800;color:var(--heading);margin-bottom:10px;}
.pay-edit .payroll-edit-grid input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;padding:8px;font-size:13px;background:var(--card);color:var(--text);}
.pay-edit-plans{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 4px;font-size:12px;color:var(--muted);}
.pay-edit-plans select{margin-left:6px;border:1px solid var(--border);border-radius:8px;padding:6px 8px;background:var(--card);color:var(--text);}
.pay-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:12px;flex-wrap:wrap;}
.pay-tab{border:none;background:none;padding:8px 12px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px;}
.pay-tab:hover{color:var(--heading);}
.pay-tab.active{color:var(--blue);border-bottom-color:var(--blue);}
.pay-tabs.big{margin-bottom:16px;}
.pay-tabs.big .pay-tab{font-size:14px;padding:10px 16px;}
.pay-tab-dot{background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:9px;padding:1px 6px;}
.pay-tab-count{background:rgba(0,0,0,.08);font-size:10px;font-weight:800;border-radius:9px;padding:1px 6px;}
.pay-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.pay-chip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;background:#eef1f5;color:var(--subheading);}
.pay-chip.good{background:#dcf5ea;color:#11734c;}
.pay-chip.warn{background:#fdf0d8;color:#9a6412;}
.pay-chip.bad{background:#fbe1de;color:#a22b22;}
.pb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pb-col{border:1px solid var(--border);border-radius:12px;padding:10px 14px;background:var(--card);}
.pb-col.earn{border-top:3px solid var(--green);}
.pb-col.ded{border-top:3px solid var(--red);}
.pb-head{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--muted);margin-bottom:6px;}
.pb-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--border);color:var(--text);}
.pb-line b{font-weight:700;color:var(--heading);white-space:nowrap;}
.pb-line.is-zero{opacity:.45;}
.pb-total{display:flex;justify-content:space-between;font-size:13px;font-weight:800;padding-top:8px;color:var(--heading);}
.pb-col.earn .pb-total b{color:var(--green);}
.pb-col.ded .pb-total b{color:var(--red);}
.pb-net{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;}
.pb-net span{font-weight:700;font-size:13px;opacity:.85;text-transform:uppercase;letter-spacing:.05em;}
.pb-net b{font-size:22px;font-weight:800;color:var(--gold-light);}
.pay-hero-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 24px;border-radius:16px;margin-bottom:14px;color:#fff;
  background:radial-gradient(circle at 90% 10%,rgba(212,175,55,.35),transparent 45%),linear-gradient(135deg,var(--navy-deep),var(--navy2));box-shadow:0 10px 30px rgba(7,23,32,.25);}
.phc-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.8;font-weight:700;}
.phc-amount{font-size:34px;font-weight:800;color:var(--gold-light);margin:4px 0;letter-spacing:-.01em;}
.phc-sub{font-size:12.5px;opacity:.8;}
.phc-pills{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.pay-alert{background:linear-gradient(135deg,rgba(201,134,42,.12),rgba(201,134,42,.04));border:1px solid rgba(201,134,42,.45);border-radius:12px;padding:12px 14px;margin-bottom:14px;}
.pay-alert.slips{background:linear-gradient(135deg,rgba(91,63,160,.12),rgba(91,63,160,.03));border-color:rgba(91,63,160,.4);}
.pay-alert-title{font-weight:800;color:var(--heading);font-size:13.5px;margin-bottom:8px;}
.pay-alert-chips{display:flex;gap:6px;flex-wrap:wrap;}
.pay-alert-chip{border:1px solid rgba(201,134,42,.5);background:var(--card);color:var(--heading);border-radius:20px;padding:5px 12px;font-size:12.5px;cursor:pointer;}
.pay-alert-chip:hover{background:rgba(201,134,42,.12);}
.slip-approvals{display:flex;flex-direction:column;gap:6px;}
.slip-approval{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:13px;}
.slip-amt{font-weight:800;color:var(--heading);}
.loan-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:12px;}
.loan-summary>div{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.loan-summary span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
.loan-summary b{font-size:16px;color:var(--heading);}
.loan-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.loan-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:10px;padding:10px 12px;}
.loan-item-side{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.pay-plans{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin-bottom:20px;}
.pay-plans summary{cursor:pointer;font-weight:800;color:var(--heading);}
.pay-plans[open] summary{margin-bottom:8px;}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.plan-card{border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg);}
.plan-card.new{border-style:dashed;}
.plan-card-head{display:flex;align-items:center;gap:8px;}
.plan-card-head .btn{margin-left:auto;}
.plan-card input,.plan-card select{border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:12.5px;background:var(--card);color:var(--text);}
.plan-add{display:flex;gap:6px;}
.plan-add input{width:90px;}
.tier-x{margin-left:4px;color:var(--red);text-decoration:none;font-weight:700;}
.target-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:16px;}
.target-grid .target-box{margin:0;}

/* ---- secure chat refresh ---- */
.chat-wrap{gap:0;height:min(680px,74vh);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(15,51,59,.08);background:var(--card);}
.chat-channels{width:270px;border:none;border-right:1px solid var(--border);border-radius:0;padding:12px;background:linear-gradient(180deg,rgba(15,106,125,.05),transparent 240px),var(--card);}
.chat-section-label{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:14px 4px 6px;}
.chat-section-label .btn.tiny{padding:3px 8px;font-size:11px;text-transform:none;letter-spacing:0;}
.chan{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;cursor:pointer;margin-bottom:2px;transition:background .12s;}
.chan:hover{background:rgba(15,106,125,.08);}
.chan.active{background:linear-gradient(135deg,var(--blue),var(--navy2));color:#fff;box-shadow:0 4px 12px rgba(15,106,125,.3);}
.chan.active .chan-preview{color:rgba(255,255,255,.75);}
.chan-icon{width:26px;height:26px;border-radius:8px;background:rgba(15,106,125,.12);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.chan.active .chan-icon{background:rgba(255,255,255,.2);color:#fff;}
.chan-group-icon{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--purple),var(--purple-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.chan-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.chan-meta{display:flex;flex-direction:column;min-width:0;flex:1;}
.chan-preview{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chan-av{position:relative;flex-shrink:0;display:inline-flex;}
.chan-av .msg-avatar.tiny{width:32px;height:32px;}
.chan-online{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#1fa971;border:2px solid var(--card);}
.dm-entry{display:flex;align-items:center;}
.chat-main{border:none;border-radius:0;background:var(--card);}
.chat-dm-header{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--card);min-height:58px;box-sizing:border-box;}
.chat-head-av .msg-avatar{width:38px;height:38px;}
.chat-head-icon{width:38px;height:38px;border-radius:12px;background:rgba(15,106,125,.12);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0;}
.chat-head-icon.group{background:linear-gradient(135deg,var(--purple),var(--purple-dark));color:#fff;font-size:15px;}
.chat-head-title{display:flex;flex-direction:column;min-width:0;}
.chat-head-title b{font-size:15px;color:var(--heading);}
.chat-head-title span{font-size:12px;color:var(--muted);}
.chat-head-online{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1fa971;margin-right:2px;}
.chat-e2e{color:var(--green);font-weight:700;}
.chat-msgs{padding:16px 18px;background:
  radial-gradient(circle at 1px 1px, rgba(15,106,125,.07) 1px, transparent 0) 0 0/18px 18px,
  linear-gradient(180deg,rgba(15,106,125,.035),rgba(91,63,160,.03));}
.chat-day-sep{display:flex;justify-content:center;margin:14px 0 10px;}
.chat-day-sep span{font-size:11px;font-weight:700;color:var(--subheading);background:var(--card);border:1px solid var(--border);padding:3px 12px;border-radius:20px;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.msg-row{margin-bottom:10px;}
.msg-row.cont{margin-top:-6px;}
.msg-row.cont .msg-avatar{visibility:hidden;height:0;}
.msg-row.cont .msg-head b,.msg-row.cont .msg-time{display:none;}
.msg-body{flex:0 1 auto;max-width:72%;}
.msg-time{font-size:10.5px;color:var(--muted);margin-left:4px;}
.msg-text{background:var(--card);border:1px solid var(--border);box-shadow:0 1px 3px rgba(15,51,59,.06);border-radius:4px 14px 14px 14px;padding:8px 12px;line-height:1.45;}
.msg-row.mine{flex-direction:row-reverse;}
.msg-row.mine .msg-body{display:flex;flex-direction:column;align-items:flex-end;}
.msg-row.mine .msg-head{display:flex;flex-direction:row-reverse;align-items:center;gap:4px;}
.msg-row.mine .msg-head b{display:none;}
.msg-row.mine .msg-text{background:linear-gradient(135deg,var(--blue),var(--navy2));color:#fff;border:none;border-radius:14px 4px 14px 14px;box-shadow:0 3px 10px rgba(15,106,125,.28);}
.msg-row.mine .msg-text .mention{color:var(--gold-light);}
.msg-row.mine .msg-text.msg-deleted{background:transparent;color:var(--muted);border:1px dashed var(--border);box-shadow:none;}
.msg-row.mine .msg-reactions{justify-content:flex-end;}
.msg-img{border-radius:12px;box-shadow:0 3px 12px rgba(0,0,0,.12);}
.chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:50px 20px;color:var(--muted);font-size:13px;}
.chat-empty-icon{font-size:36px;opacity:.6;}
.chat-input-wrap{border-top:1px solid var(--border);background:var(--card);padding:10px 12px;}
.chat-input{background:var(--bg);border:1px solid var(--border);border-radius:24px;padding:4px 4px 4px 8px;align-items:center;transition:border-color .15s,box-shadow .15s;}
.chat-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,106,125,.14);}
.chat-input textarea{padding:9px 6px;}
.chat-input #chatSendBtn{border-radius:20px;padding:9px 18px;}

/* ---- documents & contracts ---- */
.docs-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.docs-panel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:0 2px 10px rgba(15,51,59,.05);display:flex;flex-direction:column;gap:10px;}
.docs-panel-title{font-weight:800;font-size:15px;color:var(--heading);}
.docs-sub{font-size:12.5px;color:var(--muted);}
.contract-status-card{border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:10px;padding:12px 14px;background:rgba(15,106,125,.04);}
.doc-checklist{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0;}
.doc-check{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;}
.doc-check.ok{background:#dcf5ea;color:#11734c;}
.doc-check.missing{background:#fbe1de;color:#a22b22;}
.doc-upload{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px;border:1px dashed var(--border);border-radius:10px;}
.doc-upload select,.doc-upload input[type="file"]{border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:12.5px;background:var(--card);color:var(--text);}
.doc-upload input[type="file"]{flex:1;min-width:160px;}
.doc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.doc-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--card);border-radius:10px;padding:7px 10px;cursor:pointer;text-align:left;max-width:280px;transition:border-color .12s,box-shadow .12s;}
.doc-chip:hover{border-color:var(--blue);box-shadow:0 3px 10px rgba(15,106,125,.15);}
.doc-chip-icon{font-size:18px;}
.doc-chip-text{display:flex;flex-direction:column;min-width:0;}
.doc-chip-text b{font-size:12px;color:var(--heading);}
.doc-chip-text span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc-chip-dl{color:var(--blue);font-weight:800;margin-left:auto;}
.docs-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.doc-card{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:0 2px 10px rgba(15,51,59,.04);}
.doc-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.doc-card-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}

/* ---- dark mode for the above ---- */
body.dark-mode .pay-pill,body.dark-mode .pay-chip,body.dark-mode .rank-bar,body.dark-mode .pay-pill.muted,body.dark-mode .rank-trend.flat{background:#22303c;}
body.dark-mode .pay-pill.ok,body.dark-mode .pay-chip.good,body.dark-mode .doc-check.ok,body.dark-mode .rank-trend.up{background:#123b2c;color:#5fe0a8;}
body.dark-mode .pay-pill.warn,body.dark-mode .pay-chip.warn,body.dark-mode .seg-count.warn{background:#3b2e12;color:#f2c16b;}
body.dark-mode .pay-pill.bad,body.dark-mode .pay-chip.bad,body.dark-mode .doc-check.missing,body.dark-mode .rank-trend.down{background:#3e1c19;color:#f19a90;}
body.dark-mode .pay-pill.info{background:#16304a;color:#8cc3ee;}
body.dark-mode .seg-count,body.dark-mode .pay-tab-count{background:rgba(255,255,255,.1);}
body.dark-mode .msg-text{background:#1c2a36;border-color:#2a3846;}
body.dark-mode .chat-input{background:#111b24;}
body.dark-mode .chat-msgs{background:radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0) 0 0/18px 18px, #121c25;}
body.dark-mode .plan-card{background:#121c25;}

/* ---- responsive ---- */
@media (max-width: 900px){
  .pay-card-sum{grid-template-columns:40px 1fr auto 16px;}
  .pay-status{grid-column:2 / 4;justify-content:flex-start;order:5;}
  .pb-grid,.docs-two-col{grid-template-columns:1fr;}
  .rank-row{grid-template-columns:28px 34px 1fr 70px;}
  .rank-meta{display:none;}
  .chat-channels{width:200px;}
  .msg-body{max-width:88%;}
  .doc-card{flex-wrap:wrap;}
  .doc-card-actions{flex-direction:row;flex-wrap:wrap;align-items:center;}
}

/* chat polish (2026-09-23): hover-only row actions, dark-safe reaction pills, avatar sizing */
.chan .chan-pin-btn:not(.pinned),.chan .chan-del{display:none;}
.chan:hover .chan-pin-btn,.chan:hover .chan-del{display:inline-flex;}
.chan .chan-del{background:transparent;color:inherit;opacity:.55;padding:2px 5px;}
.chan .chan-del:hover{opacity:1;color:var(--red);}
.chan-av .msg-avatar{width:32px;height:32px;font-size:11px;border-width:2px;}
.msg-reaction-pill{background:var(--card);color:var(--text);}
body.dark-mode .msg-reaction-pill{background:#1c2a36;border-color:#2a3846;}
body.dark-mode .msg-reaction-pill.mine{background:rgba(107,70,193,.28);}
.month-nav-pick{width:26px;padding:0;color:transparent;}
.month-nav-pick::-webkit-datetime-edit{display:none;}
body.dark-mode .month-nav-pick::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.6);cursor:pointer;}

/* ---------- 2026-09-30: exits, resignations, attestation reject, training test ---------- */
.pay-pill.left{background:#fbe7d9;color:#9a4a12;}
.pay-pill.employee{background:#e3f3ec;color:#11734c;}
.pay-left-line{font-size:12px;color:#9a4a12;margin-top:3px;font-weight:600;}
.pay-card.is-left{border-left:4px solid #d9803a;}
.pay-left-section{margin-top:22px;padding-top:14px;border-top:2px dashed var(--border);}
.pay-left-head{font-weight:800;color:var(--heading);font-size:15px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;}
.pay-alert.left{background:linear-gradient(135deg,rgba(217,128,58,.14),rgba(217,128,58,.04));border-color:rgba(217,128,58,.5);}
.pay-alert.withheld{background:linear-gradient(135deg,rgba(180,35,24,.12),rgba(180,35,24,.03));border-color:rgba(180,35,24,.45);}
.pb-net.withheld b{color:#b42318;}
.pay-note.small-note{font-size:12.5px;padding:8px 12px;margin:8px 0 12px;}
.exit-head{display:flex;gap:12px;align-items:center;margin-bottom:14px;}
.exit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;}
.exit-grid .field{margin-bottom:6px;}
.exit-grid select,.exit-grid input{width:100%;}
.exit-preview{margin-top:12px;border:1px solid rgba(17,115,76,.35);background:linear-gradient(135deg,rgba(17,115,76,.10),rgba(17,115,76,.02));border-radius:12px;padding:12px 14px;}
.exit-preview > div:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700;color:var(--heading);}
.exit-preview > div:first-child b{font-size:20px;color:#11734c;}
.exit-preview.withheld{border-color:rgba(180,35,24,.4);background:linear-gradient(135deg,rgba(180,35,24,.10),rgba(180,35,24,.02));}
.exit-preview.withheld > div:first-child b{color:#b42318;}
.resign-status{background:var(--bg,#f6f7fb);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:12px;}
.resign-reason{font-style:italic;color:var(--heading);margin:6px 0;white-space:pre-wrap;word-break:break-word;}
.resign-card.is-pending{border-color:rgba(201,134,42,.6);box-shadow:0 0 0 3px rgba(201,134,42,.12);}
.resign-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0;padding:12px 16px;border:1px dashed var(--border);border-radius:12px;background:var(--card);}
.resign-strip.has-open{border-style:solid;border-color:rgba(217,128,58,.55);background:linear-gradient(135deg,rgba(217,128,58,.10),rgba(217,128,58,.02));}
.resign-strip-text{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.attest-actions{display:flex;gap:6px;flex-wrap:wrap;}
.att-heat-cell.na{background:transparent;color:#c5cbd3;border:1px dashed #dde2ea;}
.exam-progress{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;font-weight:700;color:var(--heading);}
.exam-progress .target-bar{flex:1;min-width:160px;margin:0;}
body.dark-mode .pay-pill.left{background:#3a2412;color:#f4b27a;}
body.dark-mode .pay-pill.employee{background:#123b2c;color:#5fe0a8;}
body.dark-mode .pay-left-line{color:#f4b27a;}
body.dark-mode .resign-status{background:#121c25;}
body.dark-mode .att-heat-cell.na{border-color:#2a3846;color:#3c4954;}
body.dark-mode .exit-preview > div:first-child b{color:#5fe0a8;}
body.dark-mode .exit-preview.withheld > div:first-child b,body.dark-mode .pb-net.withheld b{color:#f19a90;}
@media (max-width:640px){ .resign-strip{flex-direction:column;align-items:flex-start;} .exit-grid{grid-template-columns:1fr;} }

/* 2026-09-30: the Policies/Notifications dropdowns were borrowing the sidebar
   tooltip animation (navTooltipIn), whose end state is translateY(-50%) --
   that lifted every dropdown up by half its own height, so the top half sat
   hidden behind the top bar. They now use their own drop-down animation that
   ends exactly where the JS positioned them (just below the button). */
@keyframes popoverDropIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
/* company holidays (2026-09-30) */
.holiday-box summary{list-style:none;}
.holiday-box summary::-webkit-details-marker{display:none;}
.holiday-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.holiday-chip{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:20px;border:1px solid rgba(212,175,55,.45);background:rgba(212,175,55,.10);font-size:12.5px;color:var(--heading);}
.holiday-chip.past{opacity:.6;}
.holiday-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;}
.holiday-add input[type=text]{flex:1;min-width:200px;}
/* Employee Card: room for the CNIC line (2026-09-30) -- slightly shorter
   photo band and tighter info rows so all 5 lines + QR + footer still fit
   inside the fixed 500px card. */
.digi-card-photo-wrap{height:166px;}
.digi-card-info{gap:5px;padding-top:10px;}
.digi-card-role-pill{margin:6px 0 10px;}
.digi-card-barcode{margin-top:10px;}

/* ================= QC Evaluations (2026-10-01) ================= */
.qc-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:18px;align-items:start;margin-top:6px;}
@media(max-width:980px){.qc-grid{grid-template-columns:1fr;}}
.qc-pill{display:inline-flex;align-items:center;font-size:12px;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.qc-pill.ok{background:#dcf5ea;color:#11734c;}
.qc-pill.bad{background:#fbe1de;color:#a22b22;}
.qc-pill.muted{background:#eef1f5;color:var(--muted);}
.qc-board{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.qc-board-row{display:grid;grid-template-columns:24px 42px minmax(140px,1.3fr) minmax(80px,1fr) 58px minmax(110px,auto) 96px;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px 12px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.qc-board-row:hover{border-color:var(--blue);box-shadow:0 3px 12px rgba(15,51,59,.08);}
.qc-rank{font-weight:800;color:var(--muted);text-align:center;}
.qc-who{display:flex;flex-direction:column;min-width:0;}
.qc-who b{color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qc-avg{font-size:15px;color:var(--heading);text-align:right;}
.qc-spark svg{margin-top:0 !important;}
.qc-fatal-dot{color:var(--red);font-weight:700;}
@media(max-width:760px){.qc-board-row{grid-template-columns:24px 42px 1fr 58px;}.qc-board-row .qc-bar,.qc-board-row .qc-spark,.qc-board-row>.muted{display:none;}}
.qc-bar{height:9px;background:#eef1f7;border-radius:6px;overflow:hidden;}
.qc-bar-fill{height:100%;border-radius:6px;background:var(--blue);}
.qc-bar-fill.ok{background:linear-gradient(90deg,#1e9e6a,#2fc488);}
.qc-bar-fill.bad{background:linear-gradient(90deg,#d9534f,#e98b5d);}
.qc-crit{display:flex;flex-direction:column;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;}
.qc-crit-row{display:grid;grid-template-columns:minmax(120px,1.3fr) minmax(80px,1fr) 52px;align-items:center;gap:10px;font-size:13px;}
.qc-crit-row b{text-align:right;color:var(--heading);}
.qc-list{display:flex;flex-direction:column;gap:8px;}
.qc-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:12px;padding:10px 14px;cursor:pointer;transition:box-shadow .15s,transform .15s;}
.qc-card:hover{box-shadow:0 4px 14px rgba(15,51,59,.1);transform:translateY(-1px);}
.qc-card.fatal{border-left-color:var(--red);}
.qc-card-main{flex:1;min-width:0;}
.qc-remark-line{font-size:12.5px;color:var(--subheading);margin-top:4px;font-style:italic;}
.qc-score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 16px;margin-bottom:10px;}
.qc-score-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg,#f6f8fb);border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:13px;font-weight:600;color:var(--heading);}
.qc-score-row input{width:64px;text-align:center;}
.qc-fatal-toggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--red);margin:6px 0 10px;cursor:pointer;}
.qc-total{border-radius:12px;padding:12px 14px;margin:6px 0 14px;font-size:15px;background:#eef1f5;color:var(--heading);}
.qc-total.ok{background:#dcf5ea;color:#11734c;}
.qc-total.bad{background:#fbe1de;color:#a22b22;}
.qc-note{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:10px 0;font-size:13px;}
.qc-note b{display:block;margin-bottom:4px;color:var(--heading);}
.qc-note.ok{border-left:4px solid #1e9e6a;}
.qc-note.bad{border-left:4px solid #d9534f;}
.qc-ack{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border);}
.qc-import-preview{max-height:320px;overflow:auto;margin-bottom:10px;}
body.dark-mode .qc-bar{background:#22303c;}
body.dark-mode .qc-pill.ok,body.dark-mode .qc-total.ok{background:#123b2c;color:#5fe0a8;}
body.dark-mode .qc-pill.bad,body.dark-mode .qc-total.bad{background:#3e1c19;color:#f19a90;}
body.dark-mode .qc-pill.muted,body.dark-mode .qc-total{background:#22303c;}
body.dark-mode .qc-score-row{background:#1a2530;}

/* ================= Social Media (2026-10-01) ================= */
.sm-chip{display:inline-flex;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:12px;background:#eef1f5;color:var(--subheading);}
.sm-facebook{background:#e3ecfb;color:#1b4fa0;}
.sm-instagram{background:#fbe3ef;color:#a3245f;}
.sm-tiktok{background:#e6f7f7;color:#11706f;}
.sm-linkedin{background:#dfeef8;color:#0a5b8f;}
.sm-youtube{background:#fde3e1;color:#b3261e;}
.sm-whatsapp{background:#dcf5e6;color:#137a45;}
.sm-xtwitter{background:#e9ebee;color:#23272e;}
.sm-nums{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--subheading);margin-top:6px;}
.sm-nums b{color:var(--heading);}
.sm-plat-pick{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px;}
.sm-plat-pick label{display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
.sm-legend{display:flex;gap:6px;flex-wrap:wrap;}
.sm-st{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;}
.st-planned{background:#eef1f5;color:#4a5566;}
.st-designed{background:#fdf0d8;color:#9a6412;}
.st-scheduled{background:#dcecf8;color:#1d5c8f;}
.st-posted{background:#dcf5ea;color:#11734c;}
.sm-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:10px;}
.sm-cal-head{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:center;padding:4px 0;}
.sm-cal-cell{min-height:96px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:border-color .15s;}
.sm-cal-cell:hover{border-color:var(--blue);}
.sm-cal-cell.empty{background:transparent;border:none;cursor:default;}
.sm-cal-cell.today{box-shadow:inset 0 0 0 2px var(--blue);}
.sm-cal-day{font-size:12px;font-weight:800;color:var(--heading);}
.sm-post{font-size:11px;font-weight:600;padding:3px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid currentColor;}
.sm-post.st-posted{opacity:.75;}
@media(max-width:760px){.sm-cal-cell{min-height:64px;}.sm-post{font-size:0;padding:0;height:6px;border-left:none;background:currentColor;}}
.sm-task-progress{display:flex;align-items:center;gap:12px;margin:4px 0 12px;font-size:13px;}
.sm-task-progress .target-bar{flex:1;margin-bottom:0;max-width:420px;}
.sm-task-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.sm-task-add input[type=text]{flex:1;min-width:220px;}
.sm-tasks{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.sm-task{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.sm-task input[type=checkbox]{width:18px;height:18px;cursor:pointer;}
.sm-task-main{flex:1;min-width:0;font-size:13.5px;color:var(--heading);}
.sm-task.done .sm-task-main>div:first-child{text-decoration:line-through;color:var(--muted);}
.sm-task.overdue{border-left:4px solid var(--red);}
.sm-overdue{color:var(--red);}
body.dark-mode .sm-chip,body.dark-mode .st-planned{background:#22303c;color:#b8c4d0;}
.info-modal-body .exit-grid textarea,.info-modal-body .field textarea{width:100%;box-sizing:border-box;}