/* ═══════════════════════════════════════════
   HRM DEMO — LEAVE MANAGEMENT
   Dark theme, accent #818cf8
   ═══════════════════════════════════════════ */

/* ─── KPI ROW (4 cols) ─── */
#kpiRow.hrm-stats{grid-template-columns:repeat(4,1fr);margin-bottom:20px}

/* ─── TABS ─── */
.leave-tabs{
  display:flex;gap:4px;margin-bottom:20px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:5px;
}
.leave-tab{
  display:flex;align-items:center;gap:8px;
  padding:10px 22px;border:none;border-radius:8px;
  background:transparent;color:rgba(255,255,255,.5);
  font-size:.82rem;font-weight:600;cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.leave-tab i{font-size:.82rem;opacity:.5}
.leave-tab:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.8)}
.leave-tab:hover i{opacity:.7}
.leave-tab.active{
  background:#818cf8;color:#fff;
  box-shadow:0 2px 8px rgba(129,140,248,.3);
}
.leave-tab.active i{opacity:1}
.leave-tab-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  font-size:10px;font-weight:700;background:#ef4444;color:#fff;line-height:1;
}
.leave-tab.active .leave-tab-badge{background:rgba(255,255,255,.25)}

/* ─── TAB PANELS ─── */
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ─── FILTER BAR ─── */
.leave-filter-bar{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:14px 20px;margin-bottom:16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.leave-filter-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.leave-chip-select{
  padding:6px 28px 6px 12px;
  border:1px solid rgba(255,255,255,.1);border-radius:8px;
  font-size:.75rem;font-weight:600;color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.03);outline:none;cursor:pointer;
  transition:all .2s;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.leave-chip-select option{background:#1a1a2e;color:rgba(255,255,255,.9)}
.leave-chip-select:focus{border-color:#818cf8;box-shadow:0 0 0 2px rgba(129,140,248,.15)}
.leave-chip-select.active{border-color:#818cf8;background:rgba(129,140,248,.08);color:#818cf8}

.leave-filter-search{
  position:relative;display:flex;align-items:center;width:240px;flex-shrink:0;
}
.leave-filter-search>i{
  position:absolute;left:12px;font-size:.78rem;
  color:rgba(255,255,255,.3);pointer-events:none;transition:color .2s;
}
.leave-filter-search input{
  width:100%;padding:7px 30px 7px 34px;
  border:1px solid rgba(255,255,255,.1);border-radius:8px;
  font-size:.82rem;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.03);outline:none;transition:all .2s;
}
.leave-filter-search input:focus{
  border-color:#818cf8;background:rgba(255,255,255,.05);
  box-shadow:0 0 0 3px rgba(129,140,248,.1);
}
.leave-filter-search:focus-within>i{color:#818cf8}
.leave-filter-search input::placeholder{color:rgba(255,255,255,.25)}

.leave-filter-clear{
  position:absolute;right:10px;width:24px;height:24px;
  border:none;border-radius:6px;background:transparent;
  color:rgba(255,255,255,.3);cursor:pointer;
  display:none;align-items:center;justify-content:center;font-size:11px;
  transition:all .15s;
}
.leave-filter-clear.show{display:flex}
.leave-filter-clear:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}

.leave-filter-count{
  font-size:.82rem;color:rgba(255,255,255,.5);white-space:nowrap;flex-shrink:0;
}
.leave-filter-count strong{color:#818cf8;font-weight:700}

/* ─── TABLE OVERRIDES ─── */
.e-table .col-num{text-align:center;font-variant-numeric:tabular-nums}
.e-table .col-bar{width:160px}
.e-table .col-actions{width:200px;text-align:center;white-space:nowrap}
.e-table .empty-row td{
  text-align:center;padding:60px 20px;color:rgba(255,255,255,.3);
}

/* ─── USAGE BAR ─── */
.lv-usage-bar{
  width:100%;height:8px;background:rgba(255,255,255,.08);
  border-radius:4px;overflow:hidden;
}
.lv-usage-fill{height:100%;border-radius:4px;transition:width .5s ease}
.lv-usage-fill.low{background:#34d399}
.lv-usage-fill.mid{background:#fbbf24}
.lv-usage-fill.high{background:#f87171}
.lv-usage-pct{font-size:.68rem;color:rgba(255,255,255,.4);margin-top:2px;font-variant-numeric:tabular-nums}

/* ─── ACTION BUTTONS (usage tab) ─── */
.lv-act{
  display:inline-flex;align-items:center;gap:4px;
  min-width:60px;justify-content:center;
  padding:4px 8px;border-radius:6px;
  font-size:.68rem;font-weight:600;cursor:pointer;
  border:1px solid;background:transparent;transition:all .15s;
}
.lv-act.approve{border-color:#34d399;color:#34d399}
.lv-act.approve:hover{background:rgba(52,211,153,.1)}
.lv-act.reject{border-color:#f87171;color:#f87171}
.lv-act.reject:hover{background:rgba(248,113,113,.1)}
.lv-act.cancel{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.4)}
.lv-act.cancel:hover{background:rgba(255,255,255,.05)}

/* ─── MATRIX LEGEND ─── */
.lv-matrix-legend{
  display:flex;align-items:center;gap:16px;
  margin-bottom:12px;padding:0 4px;font-size:.75rem;color:rgba(255,255,255,.5);
}
.lv-legend-item{display:flex;align-items:center;gap:6px;font-weight:600}
.lv-legend-dot{width:12px;height:12px;border-radius:3px}
.lv-legend-dot.annual{background:rgba(129,140,248,.15);border:1px solid rgba(129,140,248,.3)}
.lv-legend-dot.half{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3)}
.lv-legend-hint{
  margin-left:auto;font-size:.68rem;color:rgba(255,255,255,.3);font-weight:500;
}
.lv-legend-hint i{margin-right:3px;opacity:.6}

/* ─── MATRIX TABLE ─── */
.lv-matrix-wrap{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;overflow-x:auto;overflow-y:visible;position:relative;
}
.lv-matrix{
  width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:.75rem;
}

/* header */
.lv-matrix thead{position:sticky;top:0;z-index:10}
.lv-matrix-head-top th{
  background:rgba(15,15,30,.95);color:rgba(255,255,255,.7);
  padding:10px 6px;font-weight:600;font-size:.68rem;
  text-align:center;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.08);
}
.lv-matrix-head-sub th{
  background:rgba(20,20,40,.95);color:rgba(255,255,255,.4);
  padding:5px 4px;font-weight:600;font-size:.62rem;
  text-align:center;border-bottom:2px solid #818cf8;
}
.lv-sub-col{width:38px;min-width:38px}
.lv-sub-annual{color:#818cf8}
.lv-sub-half{color:#fbbf24}
.lv-month-header{border-left:1px solid rgba(255,255,255,.08)}

/* sticky cols */
.sticky-col{position:sticky;z-index:5;background:inherit}
.lv-matrix-head-top .sticky-col,
.lv-matrix-head-sub .sticky-col{z-index:11}

.col-s0{left:0;width:36px;min-width:36px}
.col-s1{left:36px;width:72px;min-width:72px}
.col-s2{left:108px;width:64px;min-width:64px}
.col-s3{left:172px;width:80px;min-width:80px}
.col-s4{left:252px;width:44px;min-width:44px}
.col-s5{left:296px;width:44px;min-width:44px}
.col-s6{left:340px;width:44px;min-width:44px;border-right:2px solid #818cf8 !important}

/* body rows */
.lv-matrix tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s}
.lv-matrix tbody tr:hover{background:rgba(129,140,248,.04)}
.lv-matrix tbody tr:hover .sticky-col{background:rgba(129,140,248,.04)}
.lv-matrix tbody td{
  padding:8px 6px;vertical-align:middle;text-align:center;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.7);
}
.lv-matrix tbody .sticky-col{background:rgba(15,15,30,.95);text-align:left}
.lv-matrix tbody .col-s0{text-align:center;color:rgba(255,255,255,.3);font-size:.68rem}

/* numbers */
.col-num{text-align:center !important;font-variant-numeric:tabular-nums}
.cell-entitle{font-weight:700;color:rgba(255,255,255,.9)}
.cell-used{font-weight:700;color:#818cf8}
.cell-remain{font-weight:800}
.cell-remain.positive{color:#34d399}
.cell-remain.negative{color:#f87171}
.cell-remain.low{color:#fbbf24}

/* annual cell */
.cell-annual{
  background:rgba(129,140,248,.03);color:rgba(255,255,255,.7);
  font-weight:600;font-variant-numeric:tabular-nums;
  border-left:1px solid rgba(255,255,255,.04);
}
.cell-annual.has-value{background:rgba(129,140,248,.1);color:#a5b4fc}

/* half-day cell */
.cell-half{
  background:rgba(251,191,36,.03);color:rgba(255,255,255,.7);
  font-weight:600;font-variant-numeric:tabular-nums;
  cursor:pointer;transition:all .15s;position:relative;
}
.cell-half:hover{background:rgba(251,191,36,.08)}
.cell-half.has-value{background:rgba(251,191,36,.1);color:#fbbf24}

/* empty state */
.lv-matrix-empty{text-align:center;padding:60px 20px;color:rgba(255,255,255,.3)}
.lv-matrix-empty td{background:rgba(255,255,255,.02)!important}
.lv-matrix-empty i{font-size:32px;display:block;margin-bottom:10px;opacity:.15}

/* ─── MODAL ─── */
.lv-modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.6);z-index:2000;
  justify-content:center;align-items:center;padding:20px;
}
.lv-modal-overlay.show{display:flex}
.lv-modal{
  background:#1a1a2e;border:1px solid rgba(255,255,255,.08);
  border-radius:16px;width:100%;max-width:640px;max-height:90vh;
  overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:lvModalIn .2s ease;
}
@keyframes lvModalIn{
  from{opacity:0;transform:translateY(-20px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.lv-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.06);
}
.lv-modal-head h3{
  font-size:1.05rem;font-weight:700;color:rgba(255,255,255,.9);
  display:flex;align-items:center;gap:8px;
}
.lv-modal-head h3 i{opacity:.6}
.lv-modal-close{
  background:none;border:none;font-size:24px;
  color:rgba(255,255,255,.3);cursor:pointer;padding:0 4px;
  line-height:1;border-radius:6px;transition:all .15s;
}
.lv-modal-close:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.7)}
.lv-modal-body{padding:20px 24px}
.lv-modal-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:16px 24px 20px;border-top:1px solid rgba(255,255,255,.06);
}

/* form */
.lv-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lv-form-group{display:flex;flex-direction:column;gap:4px}
.lv-form-group.lv-full{grid-column:1 / -1}
.lv-form-label{font-size:.75rem;font-weight:600;color:rgba(255,255,255,.5)}
.lv-form-label.required::after{content:' *';color:#f87171}
.lv-form-input,.lv-form-select{
  width:100%;padding:8px 12px;
  border:1px solid rgba(255,255,255,.1);border-radius:8px;
  font-size:.82rem;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.03);outline:none;transition:all .2s;
}
.lv-form-input:focus,.lv-form-select:focus{
  border-color:#818cf8;box-shadow:0 0 0 3px rgba(129,140,248,.12);
  background:rgba(255,255,255,.05);
}
.lv-form-select option{background:#1a1a2e;color:rgba(255,255,255,.9)}

/* ─── RESPONSIVE ─── */
@media(max-width:1200px){#kpiRow.hrm-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){
  #kpiRow.hrm-stats{grid-template-columns:1fr}
  .leave-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .leave-tab{padding:8px 16px;font-size:.75rem}
  .leave-filter-bar{flex-direction:column;padding:12px}
  .leave-filter-chips{width:100%}
  .leave-chip-select{flex:1}
  .leave-filter-search{width:100%}
  .lv-form-grid{grid-template-columns:1fr}
  .lv-matrix-legend{flex-direction:column;align-items:flex-start;gap:6px}
  .lv-legend-hint{margin-left:0}
}