/* ===================== TOKENS — light glassmorphism ===================== */
:root{
  --navy-950:#061c34;
  --navy-900:#0a2c52;
  --navy-800:#0e3765;
  --navy-700:#124a82;
  --navy-600:#1c5ea6;
  --navy-500:#2f7fc9;
  --cyan:#3b93e0;
  --cyan-light:#bfe0fa;
  --cyan-dark:#2e86d6;
  --bg:#eef3fa;
  --surface:rgba(255,255,255,.86);
  --surface-2:rgba(15,42,94,.055);
  --surface-solid:rgba(255,255,255,.96);
  --border:rgba(15,42,94,.12);
  --border-2:rgba(15,42,94,.20);
  --text:#000000;
  --green:#16a34a;
  --green-dark:#0d7a37;
  --red:#dc2626;
  --red-dark:#a91d1d;
  --amber:#c67c00;
  --amber-dark:#8f5900;
  --gold:#c8951f;
  --silver-rank:#7c8aa0;
  --bronze:#a35f2c;
  --brand-navy:#0e3765;
  --brand-navy-dark:#0a2c52;
  --brand-navy-light:#14497f;
  --brand-gradient:linear-gradient(120deg, #06213d 0%, var(--brand-navy) 50%, #2f7fc9 100%);
  --radius:16px;
  --radius-sm:10px;
  --shadow: 0 10px 28px rgba(15,42,94,.10);
  --shadow-lg:0 26px 60px rgba(15,42,94,.20);
  --shadow-btn: 0 10px 22px rgba(21,57,124,.28);
  --blur-card: blur(9px) saturate(140%);
  --blur-strong: blur(16px) saturate(150%);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Segoe UI', Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
/* Brand background glow — same method as the aibrandcrafts.com site: three soft
   navy radial glows over a white base, slowly drifting (their "animated-mesh-bg"). */
body::before, body::after{
  content:''; position:fixed; z-index:0; border-radius:50%; pointer-events:none;
}
body::before{
  width:900px; height:900px; top:-25%; left:-15%;
  background:radial-gradient(circle, rgba(14,55,101,.12), transparent 62%);
  filter:blur(70px);
  animation:brandDrift1 22s ease-in-out infinite;
}
body::after{
  width:820px; height:820px; top:-30%; right:-12%;
  background:radial-gradient(circle, rgba(14,55,101,.10), transparent 62%);
  filter:blur(70px);
  animation:brandDrift2 26s ease-in-out infinite;
}
.content::before{
  content:''; position:fixed; z-index:0; pointer-events:none; border-radius:50%;
  width:760px; height:760px; bottom:-30%; left:45%; transform:translate(-50%,0);
  background:radial-gradient(circle, rgba(14,55,101,.08), transparent 62%);
  filter:blur(70px);
  animation:brandDrift3 30s ease-in-out infinite;
}
@keyframes brandDrift1{0%,100%{transform:translate(0,0);} 50%{transform:translate(30px,20px);}}
@keyframes brandDrift2{0%,100%{transform:translate(0,0);} 50%{transform:translate(-25px,25px);}}
@keyframes brandDrift3{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(calc(-50% + 20px),-20px);}}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--cyan-light); color:#04101f;}
.num{font-weight:600; font-variant-numeric:tabular-nums;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(15,42,94,.22); border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:rgba(15,42,94,.34);}

/* ===================== LAYOUT ===================== */
.app{display:flex; flex-direction:column; min-height:100vh; position:relative; z-index:1;}

/* STATIC TOP NAVIGATION — replaces the sidebar entirely */
.topnav{
  height:96px; display:flex; align-items:center; gap:28px; padding:0 32px;
  background:var(--brand-gradient);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 12px 30px rgba(5,14,34,.28);
  position:sticky; top:0; z-index:100; overflow:visible;
}
.topnav-brand{display:flex; align-items:center; gap:16px; flex-shrink:0; position:relative; z-index:1;}
.topnav-brand-icon-wrap{position:relative; width:80px; height:80px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.topnav-brand-icon-wrap::before{content:''; position:absolute; inset:6px; background:rgba(0,0,0,.6); filter:blur(8px); border-radius:50%; z-index:0;}
.topnav-brand-icon{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 10px rgba(0,0,0,.8));}
.topnav-brand-word{height:52px; width:auto; object-fit:contain; object-position:left center; flex-shrink:0;}

.topnav-items{
  /* Deliberately overflow:visible, not auto/scroll — the icon-only breakpoints below keep
     every role's nav (up to CEO's 8 items) fitting within the available width at every tested
     size, and a hover tooltip (.topnav-item-label in icon-only mode) needs to paint outside
     this row's own box, which any non-visible overflow here would clip. */
  flex:1; display:flex; align-items:center; justify-content:safe center; gap:2px;
  overflow:visible; position:relative; z-index:1;
}
.topnav-item{
  display:flex; align-items:center; gap:8px; flex-shrink:0; position:relative;
  padding:11px 13px; border-radius:12px;
  border:none; background:transparent; color:#fff; opacity:.62;
  font-size:13px; font-weight:600; white-space:nowrap;
  transition:background .15s, opacity .15s, box-shadow .15s;
}
.topnav-item svg{width:18px; height:18px; flex-shrink:0;}
.topnav-item:hover{background:rgba(255,255,255,.08); opacity:.9;}
.topnav-item.active{background:linear-gradient(135deg,var(--cyan-dark),var(--navy-600)); color:#fff; opacity:1; box-shadow:0 8px 18px rgba(5,14,34,.4);}

.topnav-right{display:flex; align-items:center; gap:14px; flex-shrink:0; position:relative; z-index:1;}
.nav-install-btn{
  display:none; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  color:#fff; padding:9px 15px; border-radius:11px; font-size:12.5px; font-weight:600; transition:background .15s, transform .15s; flex-shrink:0;
}
.nav-install-btn:hover{background:rgba(255,255,255,.2); transform:translateY(-2px);}
.nav-install-btn svg{width:15px; height:15px;}
@media(max-width:700px){ .nav-install-btn span{display:none;} }

.user-menu{position:relative; flex-shrink:0;}
.user-menu-trigger{display:flex; align-items:center; background:transparent; border:none; padding:0; cursor:pointer;}
.user-avatar-chip{
  width:42px; height:42px; border-radius:50%; flex-shrink:0; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--cyan-dark),var(--navy-700)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(5,14,34,.45), 0 0 0 2px rgba(255,255,255,.22);
  transition:box-shadow .15s, transform .15s;
}
.user-avatar-chip svg{width:22px; height:22px; position:relative; z-index:1;}
.user-avatar-chip img{width:100%; height:100%; object-fit:cover; position:relative; z-index:1;}
.user-avatar-chip::after{content:''; position:absolute; inset:0; border-radius:50%; background:linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%); pointer-events:none;}
.user-menu-trigger:hover .user-avatar-chip{transform:translateY(-2px); box-shadow:0 10px 20px rgba(5,14,34,.5), 0 0 0 2px rgba(255,255,255,.32);}
.user-menu-panel{
  position:fixed; min-width:206px;
  background:#fff; border-radius:16px; padding:8px;
  box-shadow:0 20px 44px rgba(15,42,94,.24), 0 2px 10px rgba(15,42,94,.12);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97);
  transition:opacity .16s, transform .16s, visibility .16s; z-index:500;
}
.user-menu-panel.open{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
.user-menu-item{display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:11px; font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer; transition:background .12s;}
.user-menu-item:hover{background:rgba(15,42,94,.06);}
.user-menu-item svg{width:16px; height:16px; flex-shrink:0; color:var(--cyan-dark);}
.user-menu-item.danger{color:#c0293f;}
.user-menu-item.danger svg{color:#c0293f;}
.user-menu-divider{height:1px; background:var(--border); margin:6px 4px;}

/* Below this, a full role's nav (up to 8 items for CEO — Dashboard/Staff/Attendance/
   Performance/Leaderboard/Cash Book/Requests/User IDs) stops reliably fitting with labels
   shown, which used to force .topnav-items into its horizontal scrollbar with the last item
   (Requests) visibly half-cut at the edge. Switching to icon-only here (same treatment as the
   mobile breakpoint below) keeps every item visible with no scroll/cut feeling. */
@media(max-width:1500px){
  .topnav-items{gap:7px;}
  .topnav-item{padding:10px 11px; gap:0;}
  /* Icon-only mode loses the inline label, so the icon alone has to carry meaning — turn the
     same label span into a hover tooltip (name-on-hover, one at a time) instead of dropping it
     silently. Positioned off-flow (absolute) so it doesn't affect the button's own sizing. */
  .topnav-item-label{
    position:absolute; left:50%; top:100%; transform:translateX(-50%) translateY(4px);
    white-space:nowrap; background:rgba(6,20,40,.95); color:#fff; font-size:11.5px; font-weight:700;
    padding:5px 10px; border-radius:7px; box-shadow:0 8px 18px rgba(5,14,34,.4);
    opacity:0; visibility:hidden; pointer-events:none; margin-top:4px;
    transition:opacity .15s ease, transform .15s ease, visibility .15s ease; z-index:200;
  }
  .topnav-item:hover .topnav-item-label{opacity:1; visibility:visible; transform:translateX(-50%) translateY(8px);}
}

@media(max-width:760px){
  .topnav{height:72px; padding:0 10px; gap:6px;}
  .topnav-brand{gap:8px;}
  .topnav-brand-icon-wrap{width:36px; height:36px;}
  /* Wordmark image dropped entirely below this width — a role with several nav items (CEO's
     8, HR's 7) needs that space for the icon row itself; the small brand icon alone already
     carries the identity everywhere else icon-only nav is used on this app. */
  .topnav-brand-word{display:none;}
  .topnav-items{gap:3px;}
  .topnav-item{padding:9px 8px; gap:0;}
  .topnav-item svg{width:18px; height:18px;}
  .nav-install-btn{padding:9px; width:34px; height:34px; justify-content:center;}
  .user-avatar-chip{width:34px; height:34px;}
  .user-avatar-chip svg{width:18px; height:18px;}
}

/* PAGE HEADER — slim contextual strip under the nav (page title + date) */
.pageheader{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  padding:20px 32px 4px;
}
.pageheader-center{grid-column:2; justify-self:center; display:flex; align-items:center; gap:12px;}
.pageheader-right{grid-column:3; justify-self:end; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; row-gap:8px;}
@media(max-width:900px){ .pageheader{grid-template-columns:1fr auto; } .pageheader-right{grid-column:2; grid-row:1;} .pageheader-center{grid-column:1 / -1; grid-row:2; justify-self:stretch; overflow-x:auto; flex-wrap:wrap;} }
.page-title{font-size:22px; font-weight:600; color:var(--text);}
.page-sub{font-size:12.5px; font-weight:600; color:var(--text); margin-top:2px;}
.date-pill{
  display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border);
  padding:9px 16px; border-radius:30px; font-size:13px; font-weight:600; color:var(--text); flex-shrink:0;
}
.date-pill svg{width:15px; height:15px; color:var(--cyan-dark);}
.header-datetime{
  display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border);
  padding:9px 16px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; color:var(--text); flex-shrink:0;
}
.header-datetime svg{width:15px; height:15px; color:var(--cyan-dark); flex-shrink:0;}
.header-datetime-sep{width:1px; height:14px; background:var(--border-2); flex-shrink:0;}
.icon-btn{
  width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; color:var(--text); position:relative;
}
.icon-btn svg{width:18px; height:18px;}

.content{padding:20px 32px 70px; flex:1; position:relative;}
@media(max-width:640px){ .content{padding:16px 16px 60px;} .pageheader{padding:16px 16px 4px;} }

/* User IDs page's 4-up KPI row (own inline grid, not the .g4 class) — CEO's read-only view of
   this page is expected to be used mostly on a phone, so it needs its own mobile fallback the
   same way every other 4-up stat row on this app already gets via .g4. */
@media(max-width:640px){ .uid-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} }
.view{display:none; animation:fadeUp .35s ease;}
.view.active{display:block;}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
@keyframes cardIn{from{opacity:0; transform:translateY(20px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}

/* ===================== COMPONENTS ===================== */
.grid{display:grid; gap:20px;}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:2fr 1fr;}
.row1-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:20px; align-items:stretch;}
.row1-grid .card{display:flex; flex-direction:column; justify-content:center;}
.row23-grid{grid-template-columns:1.2fr 1fr 1fr;}
@media(max-width:1200px){.g4{grid-template-columns:repeat(2,1fr);} .g2{grid-template-columns:1fr;} .g3{grid-template-columns:1fr;} .row1-grid{grid-template-columns:1fr;} .row23-grid{grid-template-columns:1fr;}}

.card{background:linear-gradient(160deg, rgba(255,255,255,.97), rgba(21,57,124,.09)); backdrop-filter:var(--blur-card); -webkit-backdrop-filter:var(--blur-card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; transition:transform .22s cubic-bezier(.22,.8,.28,1), box-shadow .22s ease; display:flex; flex-direction:column; min-width:0;}
.card:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(15,42,94,.14);}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:18px;}
.card-head h3{font-size:19px; font-weight:600; color:#000;}
.card-head .hint{font-size:15px; font-weight:600; color:#000;}
.card-head-right{display:flex; align-items:center; gap:8px;}
.chart-expand-btn{width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; color:#000; flex-shrink:0;}
.chart-expand-btn svg{width:14px; height:14px;}
.chart-expand-btn:hover{background:rgba(15,42,94,.1);}
.chart-grow{flex:1; min-height:160px; display:flex;}
.chart-grow svg{width:100%; height:100%; display:block;}

/* Stat cards - vivid solid colors, black text (crisp readability over the gradient) */
.stat{
  border-radius:16px; padding:22px; color:#000; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:4px; min-height:168px; min-width:0;
  box-shadow:0 10px 22px rgba(15,42,94,.16); border:1px solid rgba(255,255,255,.08);
  transition:transform .22s cubic-bezier(.22,.8,.28,1), box-shadow .22s ease;
}
.stat:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(15,42,94,.24);}
.stat.tone-pink{background:linear-gradient(135deg,#f18b81,#e8685c);}
.stat.tone-yellow{background:linear-gradient(135deg,#22d3b8,#0fae96);}
.stat.tone-mint{background:linear-gradient(135deg,#ffb95a,#f6982a);}
.stat.tone-purple{background:linear-gradient(135deg,#5aa3f0,#3d84e0);}

.stat .val{font-size:29px; font-weight:600; color:#000;}
.stat .lbl{font-size:16px; font-weight:600; color:#000; margin-top:2px;}
.stat .delta{font-size:15px; font-weight:600; color:#000; margin-top:6px;}

.kpi-target-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; position:relative; z-index:1; font-size:15px; font-weight:600; color:#000; margin-top:8px;}
.kpi-target-row .pct{color:#000; opacity:1; font-weight:600; font-size:16px;}
.kpi-progress{height:9px; border-radius:5px; background:rgba(0,0,0,.18); overflow:hidden; position:relative; z-index:1;}
.kpi-progress > span{
  display:block; height:100%; border-radius:5px; width:0%;
  background:linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.95));
  transition:width 1s cubic-bezier(.22,.8,.28,1);
}

/* Recovered-amount KPI has no real target to compare against (unlike Processed/Connected/Closed,
   which are real ratios) — so instead of a fake target/progress bar, it shows a real trend vs the
   previous equivalent period. Own row style (not kpi-target-row) since the value/color here is
   dynamic per-direction rather than a fixed black label+pct pair. */
.kpi-trend-row{display:flex; align-items:center; gap:6px; position:relative; z-index:1; font-size:15px; font-weight:700; margin-top:8px;}
.kpi-trend-row .kpi-trend-icon{width:16px; height:16px; flex-shrink:0;}
.kpi-trend-row .kpi-trend-sub{font-weight:600; color:#000; margin-left:2px;}
.kpi-trend-row.up{color:var(--green-dark);}
.kpi-trend-row.down{color:var(--red-dark);}
.kpi-trend-row.flat{color:#000;}
.kpi-trend-row.up .kpi-trend-icon{transform:none;}
.kpi-trend-row.down .kpi-trend-icon{transform:rotate(180deg);}
.kpi-trend-row.flat .kpi-trend-icon{display:none;}

.stacked-bar{height:10px; border-radius:6px; overflow:hidden; display:flex; margin-top:16px; background:var(--surface-2);}
.stacked-bar > span{height:100%;}

/* Glossy gradient icon badges — used on stat cards and card headers instead of bare/flat icons */
.icon-badge{width:44px; height:44px; border-radius:13px; position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 8px 16px rgba(15,42,94,.22);}
.icon-badge::before{content:''; position:absolute; inset:0; border-radius:13px;}
.icon-badge::after{content:''; position:absolute; inset:0; border-radius:13px; background:linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,0) 55%); pointer-events:none;}
.icon-badge svg{width:22px; height:22px; position:relative; z-index:1; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));}
.icon-badge.sm{width:34px; height:34px; border-radius:10px;}
.icon-badge.sm svg{width:17px; height:17px;}
.icon-badge.navy::before{background:linear-gradient(135deg,var(--navy-500),var(--navy-900));}
.icon-badge.cyan::before{background:linear-gradient(135deg,var(--cyan-light),var(--cyan-dark));}
.icon-badge.green::before{background:linear-gradient(135deg,#4ade80,#0d7a37);}
.icon-badge.amber::before{background:linear-gradient(135deg,#fcd34d,#c67c00);}
.icon-badge.gold::before{background:linear-gradient(135deg,#f5cf7a,#b8811a);}
.icon-badge.red::before{background:linear-gradient(135deg,#f87171,#a91d1d);}
.stat .icon-badge{position:relative; z-index:1; margin-bottom:0;}

/* Compact inline metric strip — an alternative to a row of 4 stat cards */
.metric-strip{display:flex; flex-wrap:wrap; gap:0; margin-top:16px; padding-top:16px; border-top:1px solid var(--border);}
.metric-item{flex:1; min-width:150px; padding:0 20px; border-left:1px solid var(--border);}
.metric-item:first-child{border-left:none; padding-left:0;}
.metric-item .mi-lbl{font-size:11.5px; font-weight:600; letter-spacing:.3px; color:var(--text); text-transform:uppercase; display:flex; align-items:center; gap:6px;}
.metric-item .mi-dot{width:8px; height:8px; border-radius:3px; flex-shrink:0;}
.metric-item .mi-val{font-size:24px; font-weight:600; color:var(--text); margin-top:6px;}
.metric-item .mi-sub{font-size:11.5px; font-weight:600; color:var(--text); margin-top:4px;}
@media(max-width:760px){ .metric-item{border-left:none; border-top:1px solid var(--border); padding:14px 0 0;} }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:11px 18px; border-radius:11px; border:none; font-weight:600; font-size:13.5px;
  white-space:nowrap; flex-shrink:0;
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.btn svg{width:16px; height:16px;}
.btn:active{transform:translateY(1px) scale(.98);}
.btn-primary{background:linear-gradient(135deg,var(--cyan-dark),var(--navy-600)); color:#fff; box-shadow:var(--shadow-btn);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:var(--surface-2); color:var(--text); border:1px solid var(--border);}
.btn-ghost:hover{background:rgba(15,42,94,.06);}
.btn-danger{background:linear-gradient(135deg,#e14b4b,#a41f1f); color:#fff;}
.btn-success{background:linear-gradient(135deg,var(--green),var(--green-dark)); color:#fff;}
/* Mark Attendance popup — plain .modal (var(--surface-solid), near-opaque white) read as flat next
   to this app's cards, which all carry a subtle navy-tinted gradient. Give this one modal that same
   .card gradient so it matches the polish of every other surface instead of looking like a bare box. */
.ma-modal{background:linear-gradient(160deg, rgba(255,255,255,.97), rgba(21,57,124,.09));}
.ma-time{font-weight:600;}
.btn-sm{padding:8px 13px; font-size:12.5px; border-radius:9px;}
.btn:disabled{opacity:.5; pointer-events:none;}

/* Segmented control */
.segmented{display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:4px; gap:2px;}
.segmented button{
  border:none; background:transparent; padding:9px 16px; border-radius:9px; font-size:12.5px; font-weight:600;
  color:var(--text);
}
.segmented button.active{background:linear-gradient(135deg,var(--cyan-dark),var(--navy-600)); color:#fff; box-shadow:0 6px 14px rgba(21,57,124,.28);}

@media(max-width:640px){
  .card-head{flex-wrap:wrap; row-gap:10px;}
  .card-head-right{width:100%;}
  .segmented{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .segmented button{flex-shrink:0;}
}

/* Table */
.table-wrap{overflow-x:auto; border-radius:12px; border:1px solid var(--border);}
table{width:100%; border-collapse:collapse; min-width:680px;}
thead th{
  background:var(--surface-2); text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; color:var(--text); padding:13px 16px; border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody td{padding:13px 16px; font-size:13.5px; border-bottom:1px solid var(--border); color:var(--text); white-space:nowrap;}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background .12s;}
tbody tr:hover{background:rgba(15,42,94,.035);}
.row-name{display:flex; align-items:center; gap:10px;}
.avatar{width:34px; height:34px; border-radius:11px; background:linear-gradient(135deg,var(--cyan-dark),var(--navy-700)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12.5px; flex-shrink:0; position:relative; box-shadow:0 6px 14px rgba(15,42,94,.28), 0 1px 2px rgba(15,42,94,.15);}
.avatar::after{content:''; position:absolute; inset:0; border-radius:11px; background:linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%); pointer-events:none;}
.avatar.sm{width:28px; height:28px; font-size:11px; border-radius:9px;}

/* Tag / status — lofted pill: elevated off the card, pure black label, color carried only by the dot + a faint tint */
.tag{display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:100px; font-size:11.5px; font-weight:700; padding:6px 13px; border-radius:999px; color:#000; box-shadow:0 4px 10px rgba(15,42,94,.14), 0 1px 2px rgba(15,42,94,.08), inset 0 1px 0 rgba(255,255,255,.7);}
.tag::before{content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.tag.ok{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(34,197,94,.16));}
.tag.ok::before{background:var(--green-dark);}
.tag.bad{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(239,68,68,.16));}
.tag.bad::before{background:var(--red-dark);}
.tag.warn{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(251,191,36,.18));}
.tag.warn::before{background:var(--amber-dark);}
.tag.neu{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(13,148,136,.16));}
.tag.neu::before{background:var(--cyan-dark);}

.icon-action{width:32px; height:32px; border-radius:11px; border:none; background:var(--surface-solid); display:inline-flex; align-items:center; justify-content:center; color:#000; margin-right:4px; box-shadow:0 4px 10px rgba(15,42,94,.14), 0 1px 2px rgba(15,42,94,.08); transition:transform .15s, box-shadow .15s;}
.icon-action svg{width:15px; height:15px;}
.icon-action:hover{transform:translateY(-1px); box-shadow:0 7px 16px rgba(15,42,94,.20), 0 2px 4px rgba(15,42,94,.10);}
.icon-action.danger{color:var(--red-dark);}
.icon-action.danger:hover{background:rgba(239,68,68,.14);}
.icon-action.ok{color:var(--green-dark);}
.icon-action.ok:hover{background:rgba(34,197,94,.14);}

/* Custom dropdown */
.dd{position:relative;}
.dd-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px; border-radius:10px; border:1.5px solid var(--border-2); background:var(--surface);
  font-size:13.5px; font-weight:600; color:var(--text);
}
.dd-trigger svg{width:15px; height:15px; color:var(--text); transition:transform .15s;}
.dd.open .dd-trigger{border-color:var(--cyan-dark);}
.dd.open .dd-trigger svg{transform:rotate(180deg);}
.dd-panel{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface-solid);
  backdrop-filter:var(--blur-strong); -webkit-backdrop-filter:var(--blur-strong); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; z-index:80; max-height:230px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transition:all .15s;
}
.dd.open .dd-panel{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
.dd-opt{padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:600; display:flex; align-items:center; justify-content:space-between;}
.dd-opt:hover{background:var(--surface-2);}
.dd-opt.sel{color:var(--cyan-dark);}
.dd-opt svg{width:14px; height:14px;}

/* Custom calendar */
.cal-wrap{position:relative;}
.cal-pop{
  position:absolute; top:calc(100% + 8px); left:0; width:296px; background:var(--surface-solid);
  backdrop-filter:var(--blur-strong); -webkit-backdrop-filter:var(--blur-strong); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:14px; z-index:90;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .15s;
}
.cal-wrap.open .cal-pop{opacity:1; visibility:visible; transform:translateY(0);}
/* This trigger sits at the far right of the Available Agents card header — opening the popup to the right (the default) pushed it off-screen, so it opens leftward from the trigger's right edge instead */
#entryCalWrap .cal-pop{left:auto; right:0;}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.cal-head .lbl{font-size:14px; font-weight:600; color:var(--text); background:transparent; border:none; padding:6px 8px; border-radius:8px;}
.cal-head .lbl:hover{background:var(--surface-2);}
.cal-nav{width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); display:flex; align-items:center; justify-content:center;}
.cal-nav svg{width:13px; height:13px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px;}
.cal-dow{font-size:10.5px; font-weight:600; color:var(--text); text-align:center; padding:4px 0;}
.cal-day{aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; border-radius:8px; color:var(--text);}
.cal-day[data-d]{cursor:pointer;}
.cal-day:hover{background:var(--surface-2);}
.cal-day.muted{color:rgba(15,42,94,.28);}
.cal-day.today{border:1.5px solid var(--cyan-dark);}
.cal-day.sel{background:linear-gradient(135deg,var(--cyan-dark),var(--navy-600)); color:#fff;}
.cal-month-grid, .cal-year-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.cal-cell{padding:14px 0; text-align:center; border-radius:9px; font-size:13px; font-weight:600; color:var(--text);}
.cal-cell:hover{background:var(--surface-2);}
.cal-cell.sel{background:linear-gradient(135deg,var(--cyan-dark),var(--navy-600)); color:#fff;}

/* Form fields */
.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; font-weight:600; color:var(--text); margin-bottom:7px; letter-spacing:.2px;}
.field input[type=text], .field input[type=tel], .field input[type=number], .field input[type=time], .field input[type=date]{
  width:100%; padding:11px 14px; border-radius:10px; border:1.5px solid var(--border-2); background:var(--surface);
  font-size:13.5px; font-weight:600; color:var(--text);
}
.field input:focus{outline:none; border-color:var(--cyan-dark); box-shadow:0 0 0 3px rgba(41,182,246,.15);}
.holiday-add-row{display:flex; align-items:flex-start; gap:12px; margin-bottom:18px;}
@media(max-width:640px){ .holiday-add-row{flex-wrap:wrap;} }
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media(max-width:760px){ .field-row-3{grid-template-columns:1fr;} }

/* Modal */
.overlay{position:fixed; inset:0; background:rgba(6,13,28,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; visibility:hidden; transition:opacity .18s;}
.overlay.show{opacity:1; visibility:visible;}
/* askConfirm() can be triggered from inside any other already-open modal (e.g. Withdraw from
   inside the Leave Review modal) — it must always paint above whatever opened it, not just
   whichever overlay happens to sit later in the HTML source. */
#confirmOverlay{z-index:300;}
.modal{background:var(--surface-solid); backdrop-filter:var(--blur-strong); -webkit-backdrop-filter:var(--blur-strong); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lg); width:520px; max-width:92vw; max-height:88vh; display:flex; flex-direction:column; transform:translateY(14px) scale(.97); transition:transform .2s;}
.overlay.show .modal{transform:translateY(0) scale(1);}
.modal.wide{width:820px;}
.modal.chart-modal{width:1100px; max-width:95vw; max-height:92vh;}
.modal.chart-modal .modal-head{padding:14px 24px;}
.modal.chart-modal .modal-body{padding:14px 24px 18px;}
.modal.chart-modal #chartModalArea{height:min(380px, 46vh); margin-top:14px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border);}
.modal-head h3{font-size:16.5px; font-weight:600; color:var(--text);}
.modal-close{width:32px; height:32px; border-radius:9px; border:none; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--text);}
.modal-close svg{width:15px; height:15px;}
.modal-body{padding:22px 24px; overflow-y:auto;}
/* The New/Apply Leave modal's From/To calendar pops out via position:absolute — modal-body's own
   overflow-y:auto was clipping it into the scroll box instead of letting it float above the Reason
   field, which made the modal scroll and look like it had dead space underneath. This modal's content
   is always short enough to fit without its own scroll, so let the popover escape freely instead. */
#leaveModalOverlay .modal-body{overflow:visible;}
/* Same reasoning as #leaveModalOverlay above — this modal's own From/To calendar popover
   would get clipped by modal-body's default overflow:auto scroll box otherwise. */
#reassignTlModalOverlay .modal-body{overflow:visible;}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--border);}

.confirm-icon{width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(239,68,68,.1)); color:var(--red-dark);}
.confirm-icon.neutral{background:linear-gradient(135deg,rgba(41,182,246,.22),rgba(41,182,246,.1)); color:var(--cyan-dark);}
.confirm-icon svg{width:26px; height:26px;}
.confirm-text{text-align:center; font-size:14px; font-weight:600; color:var(--text); line-height:1.55;}
.confirm-text b{color:var(--text);}

/* Toast */
.toast-stack{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:400; display:flex; flex-direction:column; gap:10px; align-items:center;}
.toast{
  display:flex; align-items:center; gap:12px; background:var(--navy-950); color:#fff; padding:15px 22px; border-radius:14px;
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); min-width:280px;
  animation:toastIn .22s ease;
}
.toast.out{animation:toastOut .18s ease forwards;}
@keyframes toastIn{from{opacity:0; transform:scale(.85);} to{opacity:1; transform:scale(1);}}
@keyframes toastOut{to{opacity:0; transform:scale(.85);}}
.toast .ic{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.toast .ic svg{width:15px; height:15px;}
.toast.ok .ic{background:rgba(22,163,74,.25); color:#5be389;}
.toast.err .ic{background:rgba(220,38,38,.25); color:#ff8a8a;}
.toast.info .ic{background:rgba(41,182,246,.25); color:var(--cyan-light);}

/* Chart hover tooltip — shared by the trend/compare/grouped-bar charts */
.chart-tooltip{
  position:fixed; z-index:600; background:var(--navy-950); color:#fff; padding:9px 13px; border-radius:10px;
  font-size:12.5px; font-weight:600; box-shadow:var(--shadow-lg); pointer-events:none; opacity:0;
  transform:translate(-50%, calc(-100% - 10px)); transition:opacity .12s ease; white-space:nowrap; line-height:1.6;
}
.chart-tooltip.show{opacity:1;}
.chart-tooltip .tt-date{opacity:.6; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; font-weight:700;}
.chart-tooltip .tt-row{display:flex; align-items:center; gap:7px;}
.chart-tooltip .tt-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}

/* Loader */
/* z-index:1100 — must beat .login-screen's z-index:1000 (public/css/app.css above), since on
   the login page both are position:fixed siblings of <body> and the loader has to sit visibly
   on top of it, not underneath. This was the actual bug behind the magnifying-glass loader
   never appearing on login: the class was toggling correctly the whole time, it was just
   rendering invisibly beneath the login screen. */
.loader-overlay{position:fixed; inset:0; background:rgba(6,13,28,.55); backdrop-filter:blur(2px); z-index:1100; display:none; align-items:center; justify-content:center;}
.loader-overlay.show{display:flex;}
.brand-loader{position:relative; width:84px; height:84px; display:flex; align-items:center; justify-content:center;}
.brand-loader::before{
  content:''; position:absolute; inset:-10px; border-radius:50%;
  background:radial-gradient(circle, rgba(41,182,246,.35), transparent 68%);
  filter:blur(10px);
}
.brand-loader .loader-circle{
  position:relative; z-index:1; width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,#0e3765,#2f7fc9);
  box-shadow:0 8px 22px rgba(5,14,34,.5);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.brand-loader .loader-glass{
  position:relative; z-index:2; width:38px; height:38px;
  stroke:#d7dee8; stroke-width:1.8; fill:none;
  animation:brandLoaderDiag 2.6s linear infinite;
}
@keyframes brandLoaderDiag{
  0%    {transform:translate(-10px,-8px);}
  16.6% {transform:translate(9px,-7px);}
  33.3% {transform:translate(7px,6px);}
  50%   {transform:translate(-2px,10px);}
  66.6% {transform:translate(-10px,3px);}
  83.3% {transform:translate(-3px,-9px);}
  100%  {transform:translate(-10px,-8px);}
}

/* Leaderboard */
.podium{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px;}
.podium-card{
  border-radius:16px; padding:20px 22px; position:relative; color:#000; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-height:168px;
  box-shadow:0 10px 22px rgba(15,42,94,.16); border:1px solid rgba(255,255,255,.08);
  transition:transform .22s cubic-bezier(.22,.8,.28,1), box-shadow .22s ease;
}
.podium-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(15,42,94,.24);}
.podium-card.rank1{background:linear-gradient(135deg,#f7d365,#c08a1f); order:2;}
.podium-card.rank2{background:linear-gradient(135deg,#c7d0da,#8b96a5); order:1;}
.podium-card.rank3{background:linear-gradient(135deg,#e3a877,#a3602f); order:3;}

.podium-top{display:flex; align-items:center; gap:14px;}
.podium-rank-circle{width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:30px; color:rgba(0,0,0,.72); flex-shrink:0; border:2px solid rgba(255,255,255,.5);}
.podium-id{flex:1; min-width:0;}
.podium-name{font-size:20px; font-weight:700; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.podium-role{font-size:12px; font-weight:600; color:rgba(0,0,0,.65); margin-top:2px;}

.podium-score-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.podium-score{font-size:25px; font-weight:600; color:#000;}
.podium-score span{font-size:12px; font-weight:600; color:rgba(0,0,0,.65);}

.podium-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.podium-stat{background:rgba(255,255,255,.32); border-radius:10px; padding:8px 4px; text-align:center;}
.podium-stat b{display:block; font-size:13px; font-weight:600; color:#000;}
.podium-stat small{display:block; font-size:9px; font-weight:600; color:rgba(0,0,0,.65); text-transform:uppercase; letter-spacing:.3px; margin-top:1px;}

.stars{display:flex; gap:2px;}
.stars svg{width:13px; height:13px;}
.rank-pill{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12.5px; color:#fff;}
.rank-pill.gold{background:linear-gradient(135deg,#f1c04a,#b8811a);}
.rank-pill.silver{background:linear-gradient(135deg,#c3ccd8,#8d99ab);}
.rank-pill.bronze{background:linear-gradient(135deg,#d69766,#9a5c31);}
.rank-pill.plain{background:var(--surface-2); color:var(--text); border:1px solid var(--border);}

.score-bar-wrap{width:100px; height:7px; background:var(--surface-2); border-radius:6px; overflow:hidden;}
.score-bar{height:100%; border-radius:6px; background:linear-gradient(90deg,var(--cyan-dark),var(--navy-600)); transition:width .8s cubic-bezier(.22,.8,.28,1);}

/* Dashboard "Top Agents" ranked list — medal (top 3) or plain circle rank, name/score header, assigned-vs-recovered context line, score-fill bar */
.perf-row{display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:6px; border-radius:11px; background:var(--surface-2);}
.perf-row:last-child{margin-bottom:0;}
.perf-rank-wrap{width:32px; flex-shrink:0; display:flex; justify-content:center;}
.perf-rank-wrap svg{width:31px; height:auto;}
.perf-rank{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; background:var(--surface-2); color:var(--text); border:1.5px solid var(--border);}
.perf-body{flex:1; min-width:0;}
.perf-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.perf-name{font-weight:600; font-size:13.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.perf-score-wrap{text-align:right; flex-shrink:0; display:flex; align-items:baseline; gap:4px;}
.perf-score-lbl{font-size:9px; font-weight:600; color:var(--text); text-transform:uppercase; letter-spacing:.05em;}
.perf-score{font-weight:600; font-size:16px; color:var(--text); line-height:1;}
.perf-score-unit{font-size:11px; font-weight:600; color:var(--text);}
.perf-sub{font-size:11.5px; font-weight:600; color:var(--text); margin:4px 0 3px; line-height:1.3;}
.perf-extra{color:var(--text);}
.perf-bar-track{height:10px; border-radius:6px; background:rgba(255,255,255,.65); overflow:hidden;}
.perf-bar-fill{height:100%; border-radius:6px; background:linear-gradient(90deg,var(--cyan-dark),var(--navy-600)); transition:width .9s cubic-bezier(.22,.8,.28,1);}
.perf-score-note{margin-top:auto; padding-top:14px; border-top:1px solid var(--border); font-size:11px; font-weight:600; color:var(--text); line-height:1.4;}
.perf-score-note b{color:var(--cyan-dark);}
.perf-score-note-sub{font-size:10.5px; font-weight:600; color:var(--text); margin-top:2px;}

/* Agent-vs-agent compare — one unified card, head-to-head bars per metric row (Agent A's bar
   grows leftward from the centre label toward the edge via the .cmp-track-rtl direction:rtl
   trick, Agent B's grows rightward normally) instead of two separate side-by-side stat cards. */
.cmp-card{padding:24px 22px;}
.cmp-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--border);}
.cmp-head-side{display:flex; align-items:center; gap:10px; min-width:0;}
.cmp-head-side.right{flex-direction:row-reverse; text-align:right;}
.cmp-head-name{font-size:15px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cmp-vs{font-size:11.5px; font-weight:800; color:var(--text); opacity:.45; letter-spacing:.08em; flex-shrink:0;}
.cmp-row{display:grid; grid-template-columns:1fr 130px 1fr; align-items:center; gap:14px; margin-bottom:15px;}
.cmp-row:last-child{margin-bottom:0;}
.cmp-label{text-align:center; font-size:11px; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.03em;}
.cmp-side{display:flex; align-items:center; gap:10px;}
.cmp-side.right{flex-direction:row-reverse;}
.cmp-side .perf-bar-track{flex:1;}
.cmp-track-rtl{direction:rtl;}
.cmp-val{font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; min-width:64px;}
.cmp-side:not(.right) .cmp-val{text-align:right;}
.cmp-side.right .cmp-val{text-align:left;}
@media(max-width:680px){
  .cmp-row{grid-template-columns:1fr;}
  .cmp-label{order:-1;}
  .cmp-side.right{flex-direction:row;}
  .cmp-side.right .cmp-val{text-align:right;}
}


/* Progress mini */
.mini-metric{margin-bottom:12px;}
.mini-metric .mm-top{display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:var(--text); margin-bottom:5px;}
.mini-metric .mm-bar{height:8px; border-radius:6px; background:var(--surface-2); overflow:hidden;}
.mini-metric .mm-fill{height:100%; border-radius:6px;}

/* Attendance grid */
.att-list{display:flex; flex-direction:column; gap:10px;}
.att-row{display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface);}
.att-row .name{flex:1; font-weight:600; font-size:13.5px;}
.att-toggle{display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:13px; padding:4px;}
.att-btn{padding:7px 13px; border-radius:10px; border:none; background:transparent; font-size:11.5px; font-weight:700; color:#000; transition:transform .15s, box-shadow .15s;}
.att-btn.sel{box-shadow:0 4px 10px rgba(15,42,94,.20), 0 1px 2px rgba(15,42,94,.12);}
.att-btn.p.sel{background:linear-gradient(135deg,#1a9e56,#0c5c33); color:#fff;}
.att-btn.a.sel{background:linear-gradient(135deg,#e14b4b,#a41f1f); color:#fff;}
.att-btn.l.sel{background:linear-gradient(135deg,#e08e1f,#9c5f04); color:#fff;}
.att-btn.h.sel{background:linear-gradient(135deg,var(--cyan-dark),var(--navy-600)); color:#fff;}

@media(max-width:520px){
  .att-row{flex-wrap:wrap; row-gap:10px;}
  .att-row .name{flex:1 1 100%;}
  .att-toggle{width:100%;}
  .att-btn{flex:1; padding:8px 4px; text-align:center;}
}

/* Small at-a-glance stat chips (Attendance page) — deliberately compact, numbers-only */
.mini-stat-row{display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.mini-stat{flex:1; min-width:118px; background:linear-gradient(160deg, rgba(255,255,255,.95), rgba(21,57,124,.07)); border:1px solid var(--border); border-left:3px solid var(--cyan-dark); border-radius:13px; padding:11px 16px; box-shadow:0 4px 10px rgba(15,42,94,.10), 0 1px 2px rgba(15,42,94,.06);}
.mini-stat .ms-val{font-size:21px; font-weight:600; color:#000; line-height:1.2;}
.mini-stat .ms-val.zero{font-size:12.5px; line-height:1.35;}
.mini-stat .ms-lbl{font-size:10px; font-weight:700; color:#000; text-transform:uppercase; letter-spacing:.03em; display:flex; align-items:center; gap:6px; margin-top:3px;}
.mini-stat .ms-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
/* Compact variant — Daily Collection Report's running totals, label-on-top like the fields below them */
.mini-stat-row.compact{gap:8px; margin-bottom:14px;}
.mini-stat-row.compact .mini-stat{padding:8px 12px; min-width:0;}
.mini-stat-row.compact .ms-lbl{font-size:9px; margin-top:0; margin-bottom:3px;}
.mini-stat-row.compact .ms-val{font-size:15px;}

/* ===================== LEAVE RECORDS — workflow board (deliberately not a stat-grid
   or a flat table, to stay visually distinct from Mark Attendance / Monthly Summary,
   the other two Attendance & Leave sub-tabs) ===================== */
.lv-kpi-row{display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
.lv-kpi{flex:1; min-width:200px; display:flex; align-items:center; gap:13px; padding:16px 18px; border-radius:15px; background:linear-gradient(160deg, rgba(255,255,255,.97), rgba(21,57,124,.08)); border:1px solid var(--border); box-shadow:var(--shadow); transition:transform .2s;}
.lv-kpi:hover{transform:translateY(-3px);}
.lv-kpi-icon{width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; box-shadow:0 8px 16px rgba(15,42,94,.22);}
.lv-kpi-icon svg{width:20px; height:20px;}
.lv-kpi.pending .lv-kpi-icon{background:linear-gradient(135deg,#f6b73c,#c9790a);}
.lv-kpi.recommended .lv-kpi-icon{background:linear-gradient(135deg,#29b6f6,#0d6f9c);}
.lv-kpi.approved .lv-kpi-icon{background:linear-gradient(135deg,#34d399,#0c9463);}
.lv-kpi.rejected .lv-kpi-icon{background:linear-gradient(135deg,#f87171,#b91c1c);}
.lv-kpi-val{font-size:23px; font-weight:700; color:var(--text); line-height:1;}
.lv-kpi-lbl{font-size:11px; font-weight:700; color:var(--text); margin-top:4px; text-transform:uppercase; letter-spacing:.02em;}

.lc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.lc-name{font-size:14px; font-weight:700; color:var(--text); line-height:1.3;}
.lc-role{font-size:11px; font-weight:600; color:var(--text); margin-top:1px;}
.lc-dates{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:var(--surface-2); border-radius:11px; border:1px solid var(--border);}
.lc-date-range{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--text);}
.lc-date-range svg{width:14px; height:14px; color:var(--navy-700); flex-shrink:0;}
.lc-arrow{color:var(--cyan-dark); font-weight:700;}
.lc-reason{font-size:12.5px; font-weight:600; color:var(--text); line-height:1.5;}
.lc-reason b{font-weight:700; margin-right:4px;}
.lc-stepper{display:flex; align-items:center; gap:0;}
.lc-step-dot{width:26px; height:26px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border:2px solid var(--border-2); background:#fff; color:var(--navy-700);}
.lc-step-dot svg{width:12px; height:12px;}
.lc-step-dot.done-ok{background:linear-gradient(135deg,#34d399,#0c9463); border-color:transparent; color:#fff;}
.lc-step-dot.done-bad{background:linear-gradient(135deg,#f87171,#c62828); border-color:transparent; color:#fff;}
.lc-step-dot.active{border-color:var(--cyan-dark); color:var(--cyan-dark);}
.lc-step-line{flex:1 1 auto; height:3px; background:var(--border-2); border-radius:2px; margin:0 4px;}
.lc-step-line.on{background:linear-gradient(90deg,#34d399,#0c9463);}
.lc-step-line.bad{background:linear-gradient(90deg,#f87171,#c62828);}
.lc-stepper-labels{display:flex; justify-content:space-between; margin-top:5px;}
.lc-stepper-labels span{flex:1; font-size:9.5px; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.03em; text-align:center;}
.lc-stepper-labels span:first-child{text-align:left;}
.lc-stepper-labels span:last-child{text-align:right;}
.lc-remarks{background:var(--surface-2); border-radius:10px; padding:9px 12px; font-size:11.5px; font-weight:600; color:var(--text); display:flex; flex-direction:column; gap:5px;}
.lc-remarks b{color:var(--navy-800);}
.lc-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--border); margin-top:auto;}
.lc-foot-tags{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

/* Review modal — read-only summary block + role-specific action row, built by JS per request */
.lrv-block{margin-bottom:16px;}
.lrv-label{font-size:10.5px; font-weight:700; color:var(--navy-800); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;}
.lrv-actions{display:flex; gap:10px; flex-wrap:wrap; width:100%;}
.lrv-actions .btn{flex:1 1 auto;}

/* Collection Records — Edit Request review: before/after diff grid, only the fields that actually changed */
.der-diff-grid{border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.der-diff-row{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:10px; padding:9px 14px; font-size:12.5px; font-weight:600; color:var(--text);}
.der-diff-row + .der-diff-row{border-top:1px solid var(--border);}
.der-diff-head{background:var(--surface-2); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--navy-800);}
.der-diff-old{color:var(--red-dark); text-decoration:line-through; opacity:.75;}
.der-diff-new{color:var(--green-dark); font-weight:700;}
.der-delete-banner{display:flex; align-items:center; gap:10px; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(239,68,68,.12)); border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:12.5px; font-weight:700; color:var(--red-dark);}
.der-info-banner{display:flex; align-items:center; gap:10px; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(251,191,36,.14)); border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:12.5px; font-weight:700; color:var(--amber-dark);}
.der-info-banner svg{width:18px; height:18px; flex-shrink:0;}

/* Pending Requests hub — one unified card language for every approve/recommend queue in the app
   (Leave, Daily Entry Edit, Salary Change), each type told apart only by an accent colour + chip,
   never by a different card shape — this is the whole point of the hub, one place to scan. */
.req-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:16px;}
.req-card{position:relative; background:linear-gradient(160deg, rgba(255,255,255,.97), rgba(21,57,124,.06)); border:1px solid var(--border); border-radius:16px; padding:18px 18px 16px 22px; box-shadow:0 6px 16px rgba(15,42,94,.10); display:flex; flex-direction:column; gap:12px; transition:transform .2s, box-shadow .2s; overflow:hidden;}
.req-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:5px;}
.req-card.type-leave::before{background:linear-gradient(180deg,#5aa3f0,#3d84e0);}
.req-card.type-entry::before{background:linear-gradient(180deg,#22d3b8,#0fae96);}
.req-card.type-salary::before{background:linear-gradient(180deg,#f6c453,#c8951f);}
.req-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.req-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.req-type-chip{display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:6px 11px; border-radius:999px; color:#fff; flex-shrink:0; box-shadow:0 4px 10px rgba(15,42,94,.14);}
.req-type-chip svg{width:12px; height:12px;}
.req-type-chip.type-leave{background:linear-gradient(135deg,#5aa3f0,#3d84e0);}
.req-type-chip.type-entry{background:linear-gradient(135deg,#22d3b8,#0fae96);}
.req-type-chip.type-salary{background:linear-gradient(135deg,#f6c453,#c8951f);}
.req-summary{background:var(--surface-2); border-radius:11px; padding:10px 12px; font-size:12.5px; font-weight:700; color:#000;}
.req-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px solid var(--border); margin-top:auto;}
.req-stage{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--amber-dark); display:flex; align-items:center; gap:6px;}
.req-stage svg{width:13px; height:13px; flex-shrink:0;}

/* Requests nav item — small count badge for whatever needs THIS user's action right now */
.topnav-item{position:relative;}
.topnav-badge{position:absolute; top:3px; right:8px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:linear-gradient(135deg,#f87171,#c62828); color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(198,40,40,.45); line-height:1;}

/* Compensation step, existing staff — value is locked, changes only via a Salary Change Request */
.sf-readonly-value{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface-2); border:1.5px solid var(--border); border-radius:11px; padding:12px 14px;}
.sf-readonly-value .rv-val{font-size:14.5px; font-weight:700; color:#000;}
.sf-readonly-value .rv-lock{width:15px; height:15px; color:var(--navy-700); flex-shrink:0;}

/* Tabs (sub-nav) */
.subtabs{display:flex; gap:8px; margin-bottom:20px; border-bottom:1px solid var(--border);}
.subtab{padding:11px 4px; margin-right:22px; font-size:13.5px; font-weight:600; color:var(--text); border:none; background:transparent; border-bottom:2.5px solid transparent; position:relative; top:1px;}
.subtab.active{color:var(--text); border-color:var(--cyan-dark);}

/* Staff Profiles */
.staff-profiles-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:1200px){.staff-profiles-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.staff-profiles-grid{grid-template-columns:1fr;}}
.staff-profile-card{
  background:var(--surface-solid); border:1px solid var(--border); border-radius:16px; padding:20px;
  display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.22,.8,.28,1), box-shadow .22s ease;
}
.staff-profile-card:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(15,42,94,.14);}
.spc-head{display:flex; align-items:center; gap:12px;}
.spc-id{flex:1; min-width:0;}
.spc-name{font-size:16.5px; font-weight:700; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.spc-role{font-size:12px; font-weight:600; color:var(--text); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.spc-info{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.spc-info-item{background:var(--surface-2); border-radius:10px; padding:9px 11px; min-width:0;}
.spc-info-item .k{font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text);}
.spc-info-item .v{font-size:13px; font-weight:600; color:#000; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.spc-view-btn{width:100%; justify-content:center;}
.spc-actions{display:flex; gap:8px;}
.spc-actions .btn{flex:1; justify-content:center; padding:9px 8px; font-size:12px;}

/* Chart svg */
.chart-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px;}
.leg-item{display:flex; align-items:center; gap:7px; font-size:15px; font-weight:600; color:#000;}
.leg-dot{width:9px; height:9px; border-radius:3px; flex-shrink:0;}

/* Rounded outline percentage badges — used on the Top Agents ranked list */
.score-pill{display:inline-flex; align-items:center; justify-content:center; padding:5px 13px; border-radius:20px; font-size:15px; font-weight:600; border:1px solid; flex-shrink:0;}
.score-pill.navy{background:#e6f7f4; color:#137565; border-color:#bfe9e0;}
.score-pill.cyan{background:#e1faf5; color:#0d9488; border-color:#a7f0e2;}
.score-pill.green{background:#e7fbf0; color:#0d7a37; border-color:#bdf0d3;}
.score-pill.amber{background:#fff6e0; color:#9c5f04; border-color:#f6e0a3;}

/* Legend + totals row under grouped-bar cards (Target vs Reality / Processed vs Connected) */
.tr-summary{display:flex; gap:24px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; row-gap:10px;}
.tr-item{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#000;}
.tr-item b{font-size:19px; font-weight:600; display:block; margin-top:1px;}

.empty{text-align:center; padding:40px 20px; color:var(--text); font-weight:600; font-size:13.5px;}

.search-box{display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1.5px solid var(--border); border-radius:11px; padding:10px 14px; min-width:230px;}
.search-box svg{width:15px; height:15px; color:var(--text);}
.search-box input{border:none; background:transparent; outline:none; font-size:13px; font-weight:600; width:100%;}

/* ===== Daily Input — full page again (a modal/overlay has no backdrop blobs behind it, so cards lose the app's glass-gradient look and read as flat white; the page area does have them) ===== */
.pageheader-center{display:flex; align-items:center; gap:12px;}
/* Cancel/Save moved up into the shared pageheader, right next to the date/clock pill — shown only on this view (see setView) so this page itself needs no header row of its own */
.entry-actions-inline{display:flex; align-items:center; gap:10px;}
/* Correction Request's actions relocate here (bottom of the card, centered) instead of the
   shared page-header row that Daily Input's own Cancel/Save Data pair still uses. */
.entry-actions-bottom{display:flex; justify-content:center; margin-top:20px;}
.field-inline{display:flex; align-items:center; gap:10px;}
.field-inline-label{font-size:13px; font-weight:700; color:#000; white-space:nowrap;}
/* Label, every agent button, and the date picker all live as flex items of ONE wrapping row (pipe dividers between the three sections) — with the real 9-agent roster they all fit on one line; if the roster ever grows past what a row holds, the overflow agents simply wrap to a second line rather than clipping or forcing a scrollbar */
.agent-toggle-frame{padding:12px 16px; margin-bottom:14px; position:relative; z-index:5;}
.agent-toggle-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.toggle-divider{color:var(--border-2); font-weight:400; font-size:16px; flex-shrink:0;}
.agent-toggle-btn{flex:0 0 auto; white-space:nowrap; padding:6px 14px; border-radius:999px; border:1px solid var(--border); background:linear-gradient(160deg, rgba(255,255,255,.95), rgba(21,57,124,.06)); font-size:12.5px; font-weight:600; color:#000; cursor:pointer; box-shadow:0 4px 10px rgba(15,42,94,.12), 0 1px 2px rgba(15,42,94,.07); transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;}
.agent-toggle-btn:hover{transform:translateY(-1px);}
.agent-toggle-btn.active{background:linear-gradient(135deg,var(--cyan-dark),var(--navy-600)); color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(21,57,124,.28);}
.agent-toggle-empty{font-size:13px; font-weight:700; color:#000;}

.excel-field label{display:block; font-size:10px; font-weight:700; color:#000; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px;}
.excel-field input{width:100%; padding:10px 11px; border-radius:9px; border:1.5px solid var(--border-2); font-weight:600; font-size:15px; text-align:center; font-variant-numeric:tabular-nums; background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(21,57,124,.10)); color:#000;}
.excel-field input:focus{outline:none; border-color:var(--cyan-dark); box-shadow:0 0 0 3px rgba(41,182,246,.15);}
.excel-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:2px; align-items:end;}
.excel-grid .btn{height:41px;}
@media(max-width:760px){.excel-grid{grid-template-columns:repeat(2,1fr);}}

/* Correction Request form (full-page, desktop) — all 7 fields fit on one row, so the frame
   doesn't wrap to a taller 4+3 grid the way the narrower Entry Details modal still does. */
@media(min-width:761px){#dailyInputEditMode .excel-grid{grid-template-columns:repeat(7,1fr);}}

/* Daily Collection Report — two genuinely separate frames (cards), fields on the left, running entries list on the right */
.entry-split{display:grid; grid-template-columns:310px 1fr; gap:20px; align-items:start; margin-top:2px;}
.entry-form-frame, .entry-list-frame{margin-bottom:0;}
.entry-form-frame .card-head{margin-bottom:10px;}
.entry-form-col{display:flex; flex-direction:column; gap:5px;}
.entry-form-col .btn{width:100%; margin-top:8px;}
.entry-list-frame{min-width:0;}

/* Excel-style compact row: shaded label cell beside a narrow number cell, not stacked — a 7-digit figure never needs a full-width input */
.entry-form-col .excel-field{display:flex; align-items:stretch; min-height:34px; border:1.5px solid var(--border-2); border-radius:8px; overflow:hidden;}
.entry-form-col .excel-field label{display:flex; align-items:center; flex:1; min-width:0; margin:0; padding:0 11px; font-size:12px; font-weight:700; text-transform:none; letter-spacing:0; color:#000; background:linear-gradient(160deg, rgba(21,57,124,.12), rgba(21,57,124,.05)); border-right:1.5px solid var(--border-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.entry-form-col .excel-field input{flex:0 0 100px; width:100px; padding:0 10px; border:none; border-radius:0; background:#fff;}
.entry-form-col .excel-field input:focus{outline:none; box-shadow:inset 0 0 0 2px rgba(41,182,246,.4); background:rgba(41,182,246,.07);}

@media(max-width:900px){.entry-split{grid-template-columns:1fr;}}
@media(max-width:420px){.entry-form-col .excel-field label{font-size:11px;} .entry-form-col .excel-field input{flex-basis:84px; width:84px;}}

.stage-list{margin-top:0; overflow-x:auto;}
.stage-row{display:flex; align-items:center; gap:14px; padding:11px 8px; border-bottom:1px solid var(--border); min-width:max-content;}
.stage-header-row{border-top:1px solid var(--border); background:rgba(21,57,124,.06);}
.stage-sr{width:42px; font-weight:600; font-size:12px; color:#000; flex-shrink:0; text-align:center;}
.stage-name{flex:0 0 108px; font-weight:600; font-size:12.5px; display:flex; align-items:center; min-width:0; overflow:hidden;}
.stage-name span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Widths sized to what each header/value actually needs — "Recovered/Additional Amount" are the longest labels in this app (see the Enter Figures column list), the rest are short, so equal-fr columns were clipping the two long ones */
.stage-vals{flex:1; display:grid; grid-template-columns:minmax(91px,1fr) minmax(91px,1fr) minmax(91px,1fr) minmax(40px,.6fr) minmax(118px,1.5fr) minmax(118px,1.5fr) minmax(91px,1fr); gap:8px; min-width:634px;}
.stage-vals div{font-size:12px; font-weight:600; text-align:center; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.stage-vals-head div{text-align:center;}
.stage-actions{display:flex; gap:8px; flex-shrink:0; width:104px; justify-content:flex-end; padding-left:16px; border-left:1px solid var(--border);}
/* Excel-style grand-total row at the bottom of the list, in place of the separate summary cards that used to sit above the two frames */
.stage-total-row{border-top:2.5px solid #000; border-bottom:none; background:rgba(21,57,124,.06);}
.stage-total-row .stage-name{font-weight:700; font-size:13px;}
.stage-total-row .stage-vals div{font-weight:700; font-size:12.5px;}
.stage-empty{text-align:center; padding:30px 10px; font-size:12.5px; font-weight:600; color:#000;}

/* Same Excel-style grand-total strip as .stage-total-row above, adapted for a real <table>
   row — border-collapse means the border/background have to sit on each <td>, not the <tr>. */
.tr-grand-total td{border-top:2.5px solid #000; background:rgba(21,57,124,.06); font-weight:700;}

/* ===== Database page (renamed from Daily Input) ===== */
.db-toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
table.db-table tbody tr:nth-child(even){background:rgba(15,42,94,.032);}
table.db-table td.num, table.db-table th.num{text-align:right;}
.pagination{display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:16px; flex-wrap:wrap;}
.pagination .pg-label{font-size:12px; font-weight:600; color:#000;}

@media(max-width:980px){
  .podium{grid-template-columns:1fr;}
  .podium-card{order:0 !important; transform:none !important;}
  .field-row{grid-template-columns:1fr;}
}

/* ===================== LOGIN ===================== */
.login-screen{
  position:fixed; inset:0; z-index:1000; display:flex;
  background:var(--bg); transition:opacity .28s ease;
}
.login-brand{
  flex:1 1 56%; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  background:var(--brand-gradient);
  padding:60px;
}
.login-brand::before, .login-brand::after{
  content:''; position:absolute; border-radius:50%; pointer-events:none;
}
.login-brand::before{
  width:560px; height:560px; top:-180px; left:-160px;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); filter:blur(90px);
}
.login-brand::after{
  width:520px; height:520px; bottom:-180px; right:-140px;
  background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); filter:blur(90px);
}
.login-brand-logo{position:relative; z-index:1; width:min(300px, 68%); height:auto;}
.login-product{position:relative; z-index:1; display:flex; align-items:center; gap:10px;}
.login-product-version{font-size:11px; font-weight:600; color:rgba(255,255,255,.85); background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26); padding:3px 11px; border-radius:20px; letter-spacing:.3px; white-space:nowrap;}
.login-brand-tag{position:relative; z-index:1; font-size:15px; font-weight:600; color:rgba(255,255,255,.72); text-align:center; max-width:360px; line-height:1.5;}
.login-brand-foot{position:relative; z-index:1; font-size:12px; font-weight:600; color:rgba(255,255,255,.55); text-align:center; margin-top:12px;}
.login-brand-foot b{color:rgba(255,255,255,.85);}

.login-panel{
  flex:1 1 44%; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);
  position:relative; overflow:hidden;
}
.login-panel::before, .login-panel::after{
  content:''; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
}
.login-panel::before{
  width:600px; height:600px; top:-25%; right:-25%;
  background:radial-gradient(circle, rgba(14,55,101,.12), transparent 62%);
  filter:blur(70px); animation:brandDrift1 22s ease-in-out infinite;
}
.login-panel::after{
  width:520px; height:520px; bottom:-25%; left:-20%;
  background:radial-gradient(circle, rgba(14,55,101,.10), transparent 62%);
  filter:blur(70px); animation:brandDrift2 26s ease-in-out infinite;
}
.login-form-wrap{width:100%; max-width:340px; position:relative; z-index:1;}
.login-heading{margin-bottom:28px;}
.login-heading h1{font-size:23px; font-weight:600; color:#000;}
.login-heading p{font-size:13px; font-weight:600; color:var(--text); margin-top:6px;}
.login-form{display:flex; flex-direction:column; gap:16px;}
.login-field label{display:block; font-size:12px; font-weight:600; color:#000; margin-bottom:7px;}
.login-input-wrap{
  display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1.5px solid var(--border);
  border-radius:12px; padding:0 14px; height:48px; transition:border-color .15s, background .15s;
}
.login-input-wrap:focus-within{border-color:var(--brand-navy); background:#fff;}
.login-input-wrap svg{width:17px; height:17px; color:var(--brand-navy); flex-shrink:0; opacity:.75;}
.login-input-wrap input{flex:1; border:none; background:transparent; font-size:14px; font-weight:600; color:#000; height:100%; outline:none;}
.login-input-wrap input::placeholder{color:var(--text); opacity:.35; font-weight:600;}
.login-eye{border:none; background:transparent; display:flex; align-items:center; justify-content:center; color:var(--text); opacity:.5; padding:4px; flex-shrink:0;}
.login-eye svg{width:17px; height:17px;}
.login-eye:hover{opacity:.9;}
.login-error{
  font-size:12.5px; font-weight:600; color:var(--red-dark); background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.25); border-radius:10px; padding:9px 12px; display:flex; align-items:center; gap:8px;
}
.login-error svg{width:15px; height:15px; flex-shrink:0;}
.login-submit{width:100%; height:48px; font-size:14.5px; margin-top:4px;}

.install-pill{
  position:absolute; top:26px; right:26px; z-index:2; display:none; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff;
  padding:10px 16px; border-radius:30px; font-size:12.5px; font-weight:600; backdrop-filter:blur(10px);
  transition:background .15s, transform .15s;
}
.install-pill:hover{background:rgba(255,255,255,.2); transform:translateY(-2px);}
.install-pill svg{width:15px; height:15px;}

@media(max-width:860px){
  .login-screen{flex-direction:column; overflow-y:auto;}
  .login-brand{flex:0 0 auto; padding:40px 24px; gap:14px;}
  .login-brand-logo{width:190px;}
  .login-brand-tag{display:none;}
  .login-panel{flex:1 1 auto; padding:36px 24px;}
}
@media(max-width:480px){
  .install-pill{top:16px; right:16px; padding:8px 13px; font-size:11.5px;}
}

/* ===================== EMP CODE CHIP ===================== */
.emp-code-chip{display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--navy-800); background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(41,182,246,.14)); border:1px solid var(--border-2); border-radius:8px; padding:5px 10px; box-shadow:0 3px 8px rgba(15,42,94,.10);}

/* ===================== GENERIC LOFTED TOGGLE CHIPS ===================== */
.toggle-row{display:flex; flex-wrap:wrap; gap:8px;}
.toggle-chip{
  padding:9px 16px; border-radius:11px; border:1.5px solid var(--border-2); background:var(--surface);
  font-family:inherit; font-size:13px; font-weight:600; color:#000; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.toggle-chip:hover{border-color:var(--cyan-dark);}
.toggle-chip.sel{
  background:linear-gradient(135deg,var(--cyan-dark),var(--navy-600)); color:#fff; border-color:transparent;
  box-shadow:0 6px 14px rgba(21,57,124,.28); transform:translateY(-1px);
}
.toggle-chip:disabled{opacity:.45; pointer-events:none;}

/* ===================== STAFF FORM — ADD/EDIT (full page, ported verbatim from the
   approved staff-form-demo.html spec, night of 2026-09-09/10 — left-stepper + completion
   ring, dropdowns for every fixed-choice field, letterhead print sheet) ===================== */
.sf-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:1300px){.sf-grid3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.sf-grid3{grid-template-columns:1fr;}}

.sf-wrap{max-width:1160px; margin:0 auto;}
.sf-row{display:flex; flex-wrap:wrap; gap:18px; align-items:stretch;}
.sf-aside{flex:1 1 250px; min-width:230px; display:flex; flex-direction:column;}
.sf-main{flex:999 1 480px; min-width:0; padding:0; display:flex; flex-direction:column;}

.sf-aside-title-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.sf-aside-title{font-size:17px; font-weight:700; letter-spacing:-.01em; color:#000; white-space:nowrap;}
.sf-aside-sub{font-size:11.5px; font-weight:600; color:#000; white-space:nowrap;}
.sf-pct-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px;}
.sf-pct-lbl{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#000;}
.sf-pct-val{font-size:15px; font-weight:700; color:#000;}
.sf-bar{height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
.sf-bar > span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--cyan-dark),var(--navy-600)); transition:width .3s ease;}
.sf-divider{height:1px; background:var(--border); margin:14px 0;}

.sf-steps{display:flex; flex-direction:column; gap:3px;}
.sf-step{display:flex; align-items:center; gap:11px; width:100%; padding:9px; border:0; border-radius:11px; background:transparent; cursor:pointer; text-align:left;}
.sf-step:hover{background:var(--surface-2);}
.sf-step.active{background:var(--surface-2);}
.sf-step-dot{flex:0 0 auto; width:24px; height:24px; border-radius:99px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; background:var(--surface-2); color:#000;}
.sf-step.active .sf-step-dot, .sf-step.done .sf-step-dot{background:linear-gradient(135deg,var(--cyan-dark),var(--navy-600)); color:#fff;}
.sf-step-label{font-size:13px; font-weight:600; color:#000;}

.sf-main-head{padding:16px 26px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:18px;}
.sf-main-head-col{display:flex; align-items:center; flex-shrink:0;}
.sf-main-head-hint{flex:1 1 auto; min-width:0;}
.sf-main-head-sep{width:1px; height:26px; background:var(--border); flex-shrink:0;}
.sf-step-counter{font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--cyan-dark); white-space:nowrap;}
.sf-step-title{margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em; color:#000; white-space:nowrap;}
.sf-step-hint{font-size:13px; font-weight:600; color:#000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sf-body{padding:22px 26px 26px; flex:1;}
.sf-foot{padding:14px 26px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:auto;}
.sf-req-note{font-size:11.5px; font-weight:600; color:#000;}

.sf-field{margin-bottom:0;}
.sf-field label{display:flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#000; margin-bottom:7px;}
.sf-field .req{color:var(--red-dark); margin-left:3px;}
.sf-field input, .sf-field textarea{
  width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--border-2); background:var(--surface);
  font-size:13.5px; font-weight:600; color:#000; font-family:inherit; outline:none;
}
.sf-field textarea{resize:vertical; font-weight:500;}
.sf-field input:focus, .sf-field textarea:focus{border-color:var(--cyan-dark); box-shadow:0 0 0 3px rgba(41,182,246,.15);}
.sf-field .err{margin-top:6px; font-size:11.5px; font-weight:600; color:var(--red-dark);}

.sf-agent-block{border:1.5px dashed var(--border-2); border-radius:14px; padding:18px; background:var(--surface-2); margin-top:20px;}
.sf-agent-block .sf-tag{font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--cyan-dark); margin-bottom:14px; text-transform:uppercase;}
.sf-lead-results{position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0; background:var(--surface-solid);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); max-height:220px; overflow:auto; padding:6px;}
.sf-lead-opt{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:9px; background:transparent; cursor:pointer; text-align:left;}
.sf-lead-opt:hover{background:var(--surface-2);}
.sf-lead-pill{display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:7px 8px 7px 12px; border-radius:9px; border:1px solid var(--border-2); background:var(--surface);}
.sf-lead-pill button{width:20px; height:20px; border-radius:7px; border:0; background:var(--surface-2); color:#000; font-weight:700; cursor:pointer;}

.sf-photo-box{width:130px; height:130px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border:1.5px dashed var(--border-2); background:var(--surface-2); overflow:hidden; background-size:cover; background-position:center;}
.sf-photo-box.has-photo{border-style:solid;}
.sf-photo-box span{font-size:11px; font-weight:600; color:#000;}

/* Summary / review screen — the on-screen review card uses the same page width as the rest
   of the wizard (.sf-wrap's own max-width), NOT the printed sheet's A4 width — the four group
   cards (Basic/Contact/Employment/Compensation) need the extra room to sit at a consistent
   width. The actual print output (buildProfileSheetHTML) is untouched and stays A4. */
.sf-summary-row{display:flex;}
.sf-summary-card{width:100%; min-width:0;}
.sf-sum-head{display:flex; gap:20px; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--border); margin-bottom:18px;}
.sf-sum-avatar{width:80px; height:80px; border-radius:14px; flex-shrink:0; background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; color:var(--navy-700); overflow:hidden; background-size:cover; background-position:center;}
.sf-sum-info{flex:1; min-width:0;}
.sf-sum-name-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.sf-sum-name{font-size:22px; font-weight:700; letter-spacing:-.01em; color:#000; flex-shrink:0;}
.sf-sum-role{margin-top:5px; font-size:13.5px; font-weight:600; color:#000;}
.sf-sum-tenure{margin-top:4px; font-size:12.5px; font-weight:600; color:#000;}
.sf-sum-tags{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px;}
.sf-groups{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;}
.sf-group{border:1px solid var(--border); border-radius:14px; padding:0 18px 16px; background:var(--surface); overflow:hidden;}
.sf-group h4{margin:0 -18px 12px; padding:8px 18px; background:var(--brand-gradient); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff;}

/* Ex-staff profile — swapped to a red header/avatar accent (instead of the usual brand-blue)
   so an ex-employee's profile is visually unmistakable from an active one at a glance. */
.sf-summary-card.is-exstaff .sf-group h4{background:linear-gradient(120deg, #5c0f0f 0%, var(--red-dark) 55%, #e05353 100%);}
.sf-summary-card.is-exstaff .sf-sum-avatar{background:rgba(220,38,38,.12); color:var(--red-dark);}
.sf-summary-card.is-exstaff .sf-sum-head{border-bottom-color:rgba(220,38,38,.35);}
.sf-dl-row{display:flex; justify-content:space-between; gap:14px; padding-bottom:7px; margin-bottom:8px; border-bottom:1px dotted var(--border);}
.sf-dl-row .dt{font-size:12px; font-weight:600; color:#000; flex:0 0 auto;}
.sf-dl-row .dd{font-size:13px; font-weight:700; color:#000; text-align:right; overflow-wrap:anywhere;}

@media(max-width:980px){ .field-row{grid-template-columns:1fr;} }

/* Flexible drop direction — a dropdown too close to the bottom of the viewport opens upward
   instead. Calendars always drop down and rely on a capped/scrollable height instead, since
   flipping one up risks covering the field row above it. */
.dd.open.drop-up .dd-panel{ top:auto; bottom:calc(100% + 6px); }
.sf-lead-results.drop-up{ top:auto; bottom:calc(100% + 6px); }
.cal-pop{ max-height:300px; overflow-y:auto; }
.dd-trigger, .dd-opt, .cal-nav, .cal-cell, .cal-head .lbl, .sf-lead-opt, .sf-step{ cursor:pointer; }

/* ===================== PRINT PROFILE SHEET (letterhead) — approved 2026-09-09/10 shape:
   light sky-blue banner (a dark gradient banner burns too much ink when printed), grand-total
   style dotted rows, footer pinned to the literal bottom of the page. ===================== */
.print-only{display:none;}
.pp-sheet{width:190mm; min-height:269mm; box-sizing:border-box; margin:0 auto; font-family:inherit; color:#000; position:relative; padding-bottom:34px;}
.pp-sheet, .pp-sheet *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.pp-header{display:flex; align-items:center; gap:16px; background:#dceefa; padding:18px 22px; border-radius:14px; margin-bottom:18px; height:102px; box-sizing:border-box; overflow:hidden;}
.pp-photo{width:66px; height:66px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.15); color:#fff; flex-shrink:0;}
.pp-header-info{flex:1; min-width:0;}
.pp-header-info .pp-name{font-size:19px; font-weight:700; color:#000;}
.pp-header-info .pp-sub{font-size:13px; font-weight:600; color:#000; margin-top:4px;}
.pp-header-info .pp-empid{font-size:11px; font-weight:600; color:#000; margin-top:4px;}
.pp-section{margin-bottom:16px;}
.pp-section-title{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#000; background:#dceefa; padding:6px 10px; border-radius:6px; margin-bottom:8px;}
.pp-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 20px;}
.pp-row{display:flex; justify-content:space-between; gap:10px; border-bottom:1px dotted #adb8cf; padding-bottom:4px; font-size:11.5px; font-weight:400;}
.pp-row .pp-label{color:#000; font-weight:400;}
.pp-row .pp-value{font-weight:600; color:#000;}
.pp-footer{position:absolute; left:0; right:0; bottom:0; padding-top:10px; border-top:1px solid #8a8f99; text-align:center; font-size:9.5px; font-weight:600; color:#000;}
/* Printing only the profile sheet via display:none on its siblings, not visibility:hidden on
   every descendant — the visibility-cascade approach renders with faint/ghosted text in
   Chrome's print-to-PDF (a known engine quirk with deeply nested visibility overrides). */
body.printing > *:not(#printProfileSheet){ display:none !important; }
body.printing #printProfileSheet{ display:block !important; }
/* The two decorative background glow blobs are pseudo-elements — child selectors above don't
   reach them, so they'd otherwise keep rendering (blurred, position:fixed) behind the sheet. */
body.printing::before, body.printing::after{ display:none !important; content:none !important; }
@media print{
  @page{ size:A4; margin:14mm; }
}