/* ==========================================================================
   WorkCollar Ledger — design tokens
   Theme: sky blue & white, raised "3D" ticket/card surfaces on a soft
   sky-blue backdrop. Gold = incentive, teal = performance, coral = leave/PIP
   stay as the data-accent palette across every table and chart.
   ========================================================================== */

:root{
  --sky:        #EAF5FF;
  --sky-2:      #DCEFFC;
  --sky-deep:   #2E8FE0;
  --sky-deep-2: #1E72BE;

  --ink:        #EAF5FF;   /* page background */
  --panel:      #FFFFFF;   /* card surface */
  --panel-2:    #F1F8FE;   /* subtle surface */
  --panel-3:    #E4F1FC;   /* deeper subtle surface */
  --line:       #CFE6F7;
  --line-soft:  #E3F0FA;
  --paper:      #14304A;   /* primary text */
  --slate:      #5C7994;   /* muted text */
  --slate-dim:  #93AEC4;

  --gold:       #E8A93B;
  --gold-dim:   #F6DFAF;
  --teal:       #1FA184;
  --teal-dim:   #BFEBE0;
  --coral:      #D6494E;
  --coral-dim:  #F6C9CB;
  --blue:       #2E8FE0;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-card:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(46,143,224,0.06) inset,
    0 14px 30px rgba(30,90,150,0.10),
    0 3px 8px rgba(30,90,150,0.08);
  --shadow-raised:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 10px 22px rgba(30,90,150,0.16),
    0 2px 5px rgba(30,90,150,0.12);
  --shadow-press: 0 2px 6px rgba(30,90,150,0.14) inset;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 640px at 8% -12%, rgba(46,143,224,0.16), transparent 55%),
    radial-gradient(1000px 560px at 105% 0%, rgba(31,161,132,0.10), transparent 50%),
    linear-gradient(180deg, var(--sky) 0%, #F5FAFF 60%, #FFFFFF 100%);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; }

::selection{ background: var(--sky-deep); color: #fff; }

.mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Perforated / ledger-edge divider */
.perf-edge{
  height: 10px;
  background-image: radial-gradient(circle at 10px 5px, var(--sky) 3.5px, transparent 3.6px);
  background-size: 20px 10px;
  background-repeat: repeat-x;
  background-color: var(--panel-2);
}

/* ---------------------------------------------------------------------- */
/* LOGIN PAGE                                                              */
/* ---------------------------------------------------------------------- */
.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 860px){
  .login-shell{ grid-template-columns: 1fr; }
  .login-aside{ display:none; }
}

.login-aside{
  position:relative;
  padding: 56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    radial-gradient(760px 420px at 90% -10%, rgba(255,255,255,0.5), transparent 60%),
    linear-gradient(160deg, var(--sky-deep) 0%, var(--sky-deep-2) 100%);
  color: #fff;
  overflow:hidden;
}
.login-aside::after{
  content:"";
  position:absolute; inset: auto -20% -30% -20%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.14), transparent 70%);
}
.brand-mark{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: 0.02em;
}
.login-aside .brand-mark{ color:#fff; }
.brand-mark .stamp{
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(155deg, #ffffff, #DCEFFC);
  display:flex; align-items:center; justify-content:center;
  color: var(--sky-deep-2); font-weight:700; font-family: var(--font-mono);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.6) inset;
}
.aside-quote{
  position:relative; z-index:1;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height:1.15;
  max-width: 520px;
  color: #fff;
}
.aside-quote em{ color: #FFE7B8; font-style:normal; }
.aside-foot{
  position:relative; z-index:1;
  display:flex; gap:28px; color: rgba(255,255,255,0.78); font-size:13px;
}
.aside-foot b{ color: #fff; font-family: var(--font-mono); display:block; font-size:20px; }

.login-main{
  display:flex; align-items:center; justify-content:center;
  padding: 40px 24px;
  background: #fff;
}
.login-card{
  width:100%; max-width: 380px;
}
.login-card h1{
  font-family: var(--font-display);
  font-size: 26px; margin: 0 0 6px;
  color: var(--paper);
}
.login-card p.sub{ color: var(--slate); margin:0 0 28px; font-size:14px; }

.role-toggle{
  display:flex; background: var(--panel-2); border:1px solid var(--line);
  border-radius: var(--radius); padding:4px; margin-bottom:20px;
  box-shadow: var(--shadow-press);
}
.role-toggle button{
  flex:1; padding:10px 12px; border:none; background:transparent; color:var(--slate);
  font-family: var(--font-body); font-weight:600; font-size:13px; border-radius:7px; cursor:pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.role-toggle button.active{ background: #fff; color: var(--paper); box-shadow: var(--shadow-raised); }
.role-toggle button.active[data-role="admin"]{ color: var(--sky-deep-2); }
.role-toggle button.active[data-role="viewer"]{ color: var(--teal); }
.role-toggle button.active[data-role="hr"]{ color: var(--teal); }
.role-toggle button.active[data-role="manager"]{ color: #8E6CD1; }
.role-toggle-3 button{ font-size:12.5px; }

.field{ margin-bottom: 16px; }
.field label{ display:block; font-size:12px; color: var(--slate); margin-bottom:6px; letter-spacing:.03em; text-transform:uppercase; }
.field input{
  width:100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border:1px solid var(--line); background: var(--panel-2); color: var(--paper);
  font-family: var(--font-mono); font-size:14px; outline:none;
  box-shadow: var(--shadow-press);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus{ border-color: var(--sky-deep); background:#fff; box-shadow: 0 0 0 3px rgba(46,143,224,0.18); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 18px; border-radius: var(--radius-sm); border:none; cursor:pointer;
  font-family: var(--font-body); font-weight:700; font-size:14px; letter-spacing:.01em;
  transition: transform .1s, filter .15s, box-shadow .1s;
  box-shadow: var(--shadow-raised);
}
.btn:active{ transform: translateY(1px); box-shadow: var(--shadow-press); }
.btn-primary{ background: linear-gradient(160deg, #4EA6F0, var(--sky-deep-2)); color:#fff; width:100%; }
.btn-primary:hover{ filter: brightness(1.06); }
.btn-ghost{ background: linear-gradient(160deg, #ffffff, var(--panel-2)); color: var(--paper); border:1px solid var(--line); }
.btn-ghost:hover{ border-color: var(--slate-dim); }
.btn-danger{ background: linear-gradient(160deg, #ffffff, #FCEBEC); color: var(--coral); border:1px solid var(--coral-dim); }
.btn-sm{ padding: 8px 12px; font-size:12px; }

.hint-row{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:12px; color: var(--slate-dim); }
.error-msg{
  display:none; background: #FDECEC; border:1px solid var(--coral-dim); color:#B4363B;
  padding:10px 12px; border-radius: var(--radius-sm); font-size:13px; margin-bottom:16px;
}
.demo-creds{ margin-top:22px; padding:14px; border:1px dashed var(--line); border-radius: var(--radius-sm); font-size:12px; color: var(--slate); background: var(--panel-2); }
.demo-creds b{ color: var(--paper); }
.demo-creds code{ color: var(--sky-deep-2); font-family: var(--font-mono); }

/* ---------------------------------------------------------------------- */
/* APP SHELL                                                               */
/* ---------------------------------------------------------------------- */
.app-shell{ min-height:100vh; display:flex; }

.sidebar{
  width: 232px; flex-shrink:0; background: #fff;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding: 22px 14px;
  position:sticky; top:0; height:100vh;
  box-shadow: 4px 0 18px rgba(30,90,150,0.05);
}
.sidebar .brand-mark{ padding: 0 8px 22px; font-size:17px; color: var(--paper); }
.sidebar .brand-mark .stamp{ background: linear-gradient(155deg, var(--sky-deep), var(--sky-deep-2)); color:#fff; }
.role-pill{
  margin: 0 8px 20px; padding:8px 10px; border-radius: var(--radius-sm);
  background: var(--panel-2); border:1px solid var(--line);
  font-size:12px; color:var(--slate); display:flex; align-items:center; justify-content:space-between;
  box-shadow: var(--shadow-press);
}
.role-pill b{ font-family: var(--font-mono); }
.role-pill.admin b{ color: var(--sky-deep-2); }
.role-pill.viewer b{ color: var(--teal); }
.role-pill.hr b{ color: var(--teal); }
.role-pill.manager b{ color: #8E6CD1; }

.nav-group{ display:flex; flex-direction:column; gap:4px; margin-bottom: 8px; }
.nav-eyebrow{ font-size:10px; text-transform:uppercase; letter-spacing:.12em; color: var(--slate-dim); padding: 14px 12px 6px; }
.navlink{
  display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--slate); text-decoration:none; font-size:13.5px; font-weight:600; cursor:pointer; border:1px solid transparent;
  transition: background .12s, color .12s, box-shadow .12s;
}
.navlink svg{ width:16px; height:16px; flex-shrink:0; opacity:.85; }
.navlink:hover{ background: var(--panel-2); color: var(--paper); }
.navlink.active{ background: linear-gradient(160deg, #ffffff, var(--panel-2)); color: var(--sky-deep-2); border-color: var(--line); box-shadow: var(--shadow-raised); }
.navlink.active .tick{ background: var(--sky-deep); }
.navlink .tick{ width:4px; height:4px; border-radius:50%; background: var(--slate-dim); margin-left:auto; }

.sidebar-foot{ margin-top:auto; padding-top: 14px; border-top:1px solid var(--line); }

.main{ flex:1; min-width:0; }
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 30px; background: rgba(255,255,255,0.86); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar h1{ font-family: var(--font-display); font-size:20px; margin:0; color: var(--paper); }
.topbar .meta{ color: var(--slate); font-size:12.5px; margin-top:2px; }
.topbar-actions{ display:flex; gap:10px; align-items:center; }

.content{ padding: 26px 30px 60px; max-width: 1360px; }
.panel-fade{ animation: fadeUp .35s ease; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

/* Fixed-height chart containers — required so Chart.js's responsive +
   maintainAspectRatio:false canvases render at a stable size instead of
   growing on every redraw (the "everything is huge" bug). */
.chart-box{ position:relative; width:100%; }
.chart-box canvas{ width:100% !important; height:100% !important; }

/* ---------------------------------------------------------------------- */
/* KPI TICKETS                                                             */
/* ---------------------------------------------------------------------- */
.kpi-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin-bottom: 22px; }
.ticket{
  position:relative; background: linear-gradient(165deg, #ffffff, var(--panel-2));
  border:1px solid var(--line);
  border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow-raised);
  overflow:hidden;
}
.ticket::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--accent, var(--sky-deep));
}
.ticket .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.09em; color: var(--slate); margin-bottom:8px; }
.ticket .val{ font-family: var(--font-mono); font-size: 26px; font-weight:600; color: var(--paper); }
.ticket .sub{ margin-top:6px; font-size:12px; color: var(--slate-dim); }
.ticket .val .unit{ font-size:14px; color: var(--slate); margin-left:4px; }
.ticket-notch{
  position:absolute; right:14px; top:14px; width:8px; height:8px; border-radius:50%;
  background: var(--sky); box-shadow: -14px 0 0 var(--sky);
}

/* ---------------------------------------------------------------------- */
/* CARDS / GRID                                                            */
/* ---------------------------------------------------------------------- */
.card{
  background: linear-gradient(180deg, #ffffff, #FCFEFF);
  border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-card); margin-bottom: 18px;
}
.card-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; gap:12px; }
.card-head h3{ font-family: var(--font-display); font-size:15.5px; margin:0 0 3px; color: var(--paper); }
.card-head p{ margin:0; font-size:12.5px; color: var(--slate); }
.grid-2{ display:grid; grid-template-columns: 1.2fr 1fr; gap:18px; }
.grid-2-even{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width: 980px){ .grid-2, .grid-2-even{ grid-template-columns: 1fr; } }

.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:600; background: var(--panel-2); border:1px solid var(--line); color: var(--slate); }
.chip .dot{ width:7px; height:7px; border-radius:50%; }
.chip-btn{ cursor:pointer; font-family:var(--font-body); }
.chip-btn:hover{ background:#fff; box-shadow:var(--shadow-raised); }

.legend{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* ---------------------------------------------------------------------- */
/* TABLE (raw data)                                                        */
/* ---------------------------------------------------------------------- */
.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-press); }
table.ledger{ width:100%; border-collapse: collapse; font-size:12.8px; min-width: 1100px; background:#fff; }
table.ledger thead th{
  position:sticky; top:0; background: var(--panel-3); color: var(--slate);
  text-align:left; padding:10px 12px; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--line); white-space:nowrap; cursor:pointer; user-select:none;
}
table.ledger thead th:hover{ color: var(--paper); }
table.ledger thead th.num{ text-align:right; }
table.ledger tbody td{ padding: 9px 12px; border-bottom:1px solid var(--line-soft); white-space:nowrap; color: var(--paper); }
table.ledger tbody td.num{ text-align:right; font-family: var(--font-mono); }
table.ledger tbody tr{ transition: background .1s; cursor:pointer; }
table.ledger tbody tr:hover{ background: var(--panel-2); }
table.ledger tbody td.name{ font-weight:600; }
table.ledger tbody td .proc{ color: var(--slate); font-size:11.5px; }
.pos{ color: var(--teal); } .risk{ color: var(--coral); } .warn{ color: #B8791F; }

.spark{ display:inline-block; vertical-align:middle; }

.table-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.search-box{
  flex:1; min-width:220px; display:flex; align-items:center; gap:8px;
  background: var(--panel-2); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; box-shadow: var(--shadow-press);
}
.search-box input{ background:transparent; border:none; outline:none; color:var(--paper); font-family: var(--font-body); font-size:13px; width:100%; }
.select-mini{ background: var(--panel-2); border:1px solid var(--line); color: var(--paper); border-radius: var(--radius-sm); padding:9px 10px; font-size:13px; box-shadow: var(--shadow-press); }
.count-badge{ color: var(--slate); font-size:12px; }

.filter-builder{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px; margin-bottom:10px; background: var(--panel-2); border:1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-press); }
.filter-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filter-chip{ display:inline-flex; align-items:center; gap:8px; padding:5px 6px 5px 12px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid; }
.filter-chip.mode-filter{ background:#EAF3FE; border-color:#BBDBF8; color:#1E5A8E; }
.filter-chip.mode-highlight{ background:#FFF7E6; border-color:#F3D48A; color:#8A6410; }
.filter-chip button{ border:none; background: rgba(0,0,0,0.08); color:inherit; width:18px; height:18px; border-radius:50%; cursor:pointer; font-size:11px; line-height:1; }
.filter-chip button:hover{ background: rgba(0,0,0,0.16); }

table.ledger tbody tr.row-highlight{ background: #FFF7E6; }
table.ledger tbody tr.row-highlight:hover{ background: #FEEFCB; }
table.ledger tbody tr.row-hidden{ display:none; }

/* ---------------------------------------------------------------------- */
/* MODAL (employee detail)                                                 */
/* ---------------------------------------------------------------------- */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(20,48,74,0.35); backdrop-filter: blur(3px);
  display:none; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background: #fff; border:1px solid var(--line); border-radius: 16px;
  width:100%; max-width: 640px; max-height: 86vh; overflow:auto;
  box-shadow: 0 30px 70px rgba(20,48,74,0.28), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.modal-head{ padding: 20px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start; background: linear-gradient(180deg, var(--panel-2), #fff); border-radius: 16px 16px 0 0; }
.modal-head h2{ font-family: var(--font-display); margin:0 0 4px; font-size:19px; color: var(--paper); }
.modal-head .sub{ color: var(--slate); font-size:12.5px; }
.modal-body{ padding: 20px 22px; }
.modal-close{ background:none; border:none; color: var(--slate); font-size:20px; cursor:pointer; line-height:1; }
.modal-close:hover{ color: var(--paper); }
.detail-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom:14px; }
.detail-grid .d{ background: linear-gradient(165deg, #ffffff, var(--panel-2)); border:1px solid var(--line); border-radius: var(--radius-sm); padding:10px 12px; box-shadow: var(--shadow-raised); }
.detail-grid .d .k{ font-size:10.5px; text-transform:uppercase; color:var(--slate-dim); letter-spacing:.06em; }
.detail-grid .d .v{ font-family: var(--font-mono); font-size:14px; margin-top:3px; color: var(--paper); }

/* Feedback breakdown chips (yellow = total, green = positive, red = negative) */
.feedback-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom:18px; }
.feedback-chip{ border-radius: var(--radius-sm); padding:10px 12px; text-align:center; box-shadow: var(--shadow-raised); border:1px solid transparent; }
.feedback-chip .k{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; opacity:.85; }
.feedback-chip .v{ font-family: var(--font-mono); font-size:20px; font-weight:700; margin-top:4px; }
.feedback-chip.yellow{ background: linear-gradient(165deg, #FFF7E6, #FEEFCB); border-color:#F3D48A; color:#8A6410; }
.feedback-chip.green{ background: linear-gradient(165deg, #EAFBF4, #D3F4E5); border-color:#9FE0C4; color:#0F7A54; }
.feedback-chip.red{ background: linear-gradient(165deg, #FEEEEE, #FBD8D9); border-color:#F0AEB1; color:#B4363B; }

.mini-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.mini-table th{ text-align:right; color:var(--slate); font-weight:600; font-size:10.5px; text-transform:uppercase; padding:6px 8px; border-bottom:1px solid var(--line); }
.mini-table th:first-child, .mini-table td:first-child{ text-align:left; }
.mini-table td{ text-align:right; padding:7px 8px; border-bottom:1px solid var(--line-soft); font-family: var(--font-mono); color: var(--paper); }

/* ---------------------------------------------------------------------- */
/* PUBLISH / ADMIN                                                         */
/* ---------------------------------------------------------------------- */
.upload-zone{
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 30px; text-align:center;
  background: var(--panel-2); cursor:pointer; transition: border-color .15s, background .15s;
}
.upload-zone:hover, .upload-zone.drag{ border-color: var(--sky-deep); background: #fff; }
.upload-zone input{ display:none; }
.step-badge{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background: var(--panel-3); border:1px solid var(--line); color: var(--slate); font-size:11px; font-family: var(--font-mono); margin-right:8px;
}
.field-inline{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width:700px){ .field-inline{ grid-template-columns:1fr; } }
.status-box{ margin-top:14px; padding:12px 14px; border-radius: var(--radius-sm); font-size:13px; display:none; }
.status-box.show{ display:block; }
.status-box.ok{ background: #EAFBF4; border:1px solid var(--teal-dim); color:#0F7A54; }
.status-box.err{ background: #FEEEEE; border:1px solid var(--coral-dim); color:#B4363B; }
.status-box.info{ background: #EAF3FE; border:1px solid #BBDBF8; color:#1E5A8E; }
.progress-dots{ display:inline-flex; gap:4px; margin-left:6px; }
.progress-dots span{ width:5px; height:5px; border-radius:50%; background: currentColor; animation: blink 1.2s infinite ease-in-out; }
.progress-dots span:nth-child(2){ animation-delay:.2s; } .progress-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{opacity:.25} 40%{opacity:1} }

.warn-banner{
  display:flex; gap:10px; align-items:flex-start; background: #FFF7E6; border:1px solid #F3D48A;
  color:#8A6410; padding:12px 14px; border-radius: var(--radius-sm); font-size:12.5px; margin-bottom:18px;
}

footer.foot-note{ text-align:center; color: var(--slate-dim); font-size:11.5px; padding: 30px 0 10px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--slate-dim); }

/* ---------------------------------------------------------------------- */
/* LEAVE PAGE                                                              */
/* ---------------------------------------------------------------------- */
.lv-legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--slate); margin-bottom:12px; }
.lv-sw{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-2px; border:1px solid rgba(0,0,0,.08); }
.lv-wrap{ max-height:640px; }
table.lv-table{ min-width:0; }
table.lv-table thead th{ position:sticky; top:0; z-index:2; }
table.lv-table th.lv-name, table.lv-table td.lv-name{ position:sticky; left:0; z-index:1; background:#fff; min-width:190px; box-shadow: 1px 0 0 var(--line); }
table.lv-table thead th.lv-name{ z-index:3; background: var(--panel-2); }
table.lv-table tbody tr{ cursor:default; }
.lv-day{ padding:6px 0 !important; min-width:26px; text-align:center; font-size:11px; }
.lv-day small{ display:block; font-size:9px; opacity:.6; font-weight:500; }
.lv-day.sun{ color: var(--coral); }
td.lv-c{ padding:0 !important; width:26px; min-width:26px; height:26px; text-align:center; font-size:10.5px; font-weight:700; color:#fff; border:1px solid #fff; }
td.lv-P{ background:#1FA184; } td.lv-H{ background:#E8A93B; } td.lv-A{ background:#D6494E; }
td.lv-L{ background:#9C2F5B; } td.lv-W{ background:#C4D6E6; } td.lv-O{ background:#6C93E0; }
td.lv-M{ background:#8E6CD1; } td.lv-X{ background:#F1F5F9; }
td.lv-hot{ color:var(--coral); font-weight:700; }

/* ---------------------------------------------------------------------- */
/* AGENT CARDS (3D boxes)                                                  */
/* ---------------------------------------------------------------------- */
.ag-thr{ font-size:12.5px; color:var(--slate); display:flex; align-items:center; gap:6px; margin-left:auto; }
.ag-thr input{ width:64px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px; font-size:13px; color:var(--paper); }
.ag-summary{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.ag-lowchip{ background:var(--coral-dim); border-color:#EFA3A6; color:#9E2B30; }
.ag-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:26px 22px; perspective:1400px; padding:6px 10px 24px; }
.ag-card{
  --edge:#B7D3EA; --edge-dark:#8FB6D6;
  position:relative; transform-style:preserve-3d; transition:transform .18s ease-out;
  border-radius:16px; will-change:transform;
  box-shadow:
    1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge), 4px 4px 0 var(--edge-dark),
    5px 5px 0 var(--edge-dark), 6px 6px 0 var(--edge-dark), 7px 7px 0 var(--edge-dark),
    14px 20px 28px rgba(30,90,150,.22);
}
.ag-face{
  position:relative; border-radius:16px; padding:16px 16px 14px;
  background:linear-gradient(160deg,#ffffff 0%, #EAF5FF 100%);
  border:1px solid #fff; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
.ag-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ag-av{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:14px; color:#fff; background:linear-gradient(140deg,var(--sky-deep),var(--sky-deep-2)); box-shadow:0 3px 6px rgba(30,90,150,.3); transform:translateZ(18px); }
.ag-id{ min-width:0; } .ag-id b{ display:block; font-size:14px; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ag-id small{ color:var(--slate); font-family:var(--font-mono); font-size:11px; }
.ag-flag{ margin-left:auto; background:var(--coral); color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:999px; transform:translateZ(22px); }
.ag-camp{ margin-bottom:12px; }
.ag-lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--slate); margin-top:6px; }
.ag-lbl b{ float:right; font-family:var(--font-mono); color:var(--paper); font-size:12px; letter-spacing:0; }
.ag-inc{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--paper); transform:translateZ(12px); }
.ag-bar{ position:relative; height:9px; border-radius:999px; background:var(--panel-3); margin:6px 0 10px; box-shadow:var(--shadow-press); }
.ag-bar i{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,#39C3A3,var(--teal)); }
.ag-bar em{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--paper); opacity:.45; }
.ag-foot{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--slate); }

/* red state: performance below threshold */
.ag-card.low{ --edge:#E9A5A8; --edge-dark:#C4565B; box-shadow:
    1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge), 4px 4px 0 var(--edge-dark),
    5px 5px 0 var(--edge-dark), 6px 6px 0 var(--edge-dark), 7px 7px 0 var(--edge-dark),
    14px 20px 28px rgba(190,50,60,.32); }
.ag-card.low .ag-face{ background:linear-gradient(160deg,#FFE9EA 0%, #F9C4C7 100%); border-color:#F4A9AD; }
.ag-card.low .ag-av{ background:linear-gradient(140deg,#E5595F,#B8343A); }
.ag-card.low .ag-inc, .ag-card.low .ag-id b{ color:#8E1F25; }
.ag-card.low .ag-lbl b{ color:#B8343A; }
.ag-card.low .ag-bar{ background:#F4B7BA; }
.ag-card.low .ag-bar i{ background:linear-gradient(90deg,#F08084,var(--coral)); }
.ag-card.low .ag-foot span:last-child{ color:#B8343A; font-weight:700; }
@media (prefers-reduced-motion: reduce){ .ag-card{ transition:none; } }

/* ---------------------------------------------------------------------- */
/* RISK ANALYSIS                                                           */
/* ---------------------------------------------------------------------- */
.rk-pill{ display:inline-block; color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.rk-score{ position:relative; width:110px; height:20px; background:var(--panel-3); border-radius:999px; overflow:hidden; box-shadow:var(--shadow-press); }
.rk-score i{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; }
.rk-score b{ position:relative; display:block; text-align:center; font-family:var(--font-mono); font-size:11px; line-height:20px; color:var(--paper); text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff; }
.rk-chip{ display:inline-block; margin:2px 4px 2px 0; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; border:1px solid transparent; white-space:nowrap; }
.rk-chip.g-Performance{ background:#FDECEC; color:#B4363B; border-color:#F3B9BC; }
.rk-chip.g-Leave{ background:#FFF3DC; color:#8A6410; border-color:#F3D48A; }
.rk-chip.g-Attendance{ background:#F6E6EE; color:#8C2A55; border-color:#E4B4CB; }
.rk-chip.g-Quality{ background:#EDE7FA; color:#5E3FA8; border-color:#CDBFEF; }
.rk-chip.g-PIP{ background:#FFE7D6; color:#A5501A; border-color:#F2BE98; }
.rk-chip.g-Incentive{ background:#E3F1FC; color:#1E72BE; border-color:#B3D6F1; }
.rk-chip.g-TL{ background:#E0F5EE; color:#0F7A54; border-color:#9FE0C4; }
.rk-chip.more{ background:var(--panel-2); color:var(--slate); border-color:var(--line); }
.rk-topflags{ display:flex; flex-wrap:wrap; gap:8px; }
.rk-topflag{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px 10px 3px 4px; cursor:pointer; box-shadow:var(--shadow-raised); }
.rk-topflag b{ font-family:var(--font-mono); font-size:12px; color:var(--paper); }
.rk-topflag.on{ border-color:var(--sky-deep); background:var(--sky); }
.rk-reportgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.rk-rep{ text-align:left; cursor:pointer; background:linear-gradient(165deg,#fff,var(--panel-2)); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow-raised); transition:transform .12s; display:flex; flex-direction:column; gap:3px; font-family:var(--font-body); }
.rk-rep:hover{ transform:translateY(-2px); }
.rk-rep b{ font-family:var(--font-mono); font-size:24px; color:var(--coral); }
.rk-rep span{ font-size:12.5px; font-weight:600; color:var(--paper); }
.rk-rep small{ font-size:11px; color:var(--slate); }
.rk-rep.on{ border-color:var(--sky-deep); box-shadow:0 0 0 2px var(--sky-deep), var(--shadow-raised); }
.rk-modal{ max-width:820px; }
.rk-h{ font-family:var(--font-display); font-size:13px; margin:16px 0 8px; color:var(--paper); }
.rk-flags{ list-style:none; padding:0; margin:0; font-size:13px; color:var(--paper); }
.rk-flags li{ padding:5px 0; border-bottom:1px solid var(--line-soft); }
.rk-tl{ border-left:4px solid var(--slate-dim); background:var(--panel-2); border-radius:8px; padding:8px 12px; margin-bottom:8px; font-size:13px; }
.rk-tl.risk{ border-color:var(--coral); } .rk-tl.pos{ border-color:var(--teal); } .rk-tl.warn{ border-color:var(--gold); }
.rk-tl p{ margin:4px 0; color:var(--paper); } .rk-tl small{ color:var(--slate); }
.rk-tl-form{ display:flex; gap:8px; margin-top:12px; } .rk-tl-form input{ flex:1; }
.rk-hint{ font-size:11.5px; color:var(--slate); margin-top:8px; }

/* ---------------------------------------------------------------------- */
/* NOTIFICATIONS + FEEDBACK REQUEST                                        */
/* ---------------------------------------------------------------------- */
.notify-bar{ display:flex; align-items:center; gap:12px; background:linear-gradient(90deg,#FFF3DC,#FFE9D6); border:1px solid #F3D48A; border-radius:var(--radius); padding:12px 16px; margin:0 0 18px; box-shadow:var(--shadow-raised); }
.notify-ico{ font-size:20px; }
.notify-txt{ flex:1; font-size:13px; color:var(--paper); }
.notify-txt b{ margin-right:4px; }
.notify-latest{ color:var(--slate); }
.notify-x{ background:none; border:none; font-size:15px; color:var(--slate); cursor:pointer; padding:4px 8px; }
.notify-x:hover{ color:var(--paper); }
.lv-tagrow{ display:flex; gap:16px; align-items:center; height:44px; }
.lv-check{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--paper); cursor:pointer; }
.lv-check input{ width:15px; height:15px; }