/* =====================================================
   ENTERPRISE HRMS — PROFESSIONAL BLUE & WHITE GLASS UI
   Tip: tweak the variables below to re-theme quickly.
   ===================================================== */
:root{
  /* Brand blues */
  --blue-950:#071a45; --blue-900:#0b2559; --blue-800:#1e3a8a; --blue-700:#1d4ed8;
  --blue-600:#2563eb; --blue-500:#3b82f6; --blue-400:#60a5fa; --blue-300:#93c5fd;
  --blue-200:#bfdbfe; --blue-100:#dbeafe; --blue-50:#eff6ff;

  /* Text */
  --ink:#0f2147; --ink-soft:#334d7a; --ink-muted:#5b6f94;

  /* Glass */
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.82);
  --glass-border:rgba(255,255,255,.88);
  --line:rgba(37,99,235,.14);
  --blur:blur(18px) saturate(160%);

  /* Elevation */
  --shadow-sm:0 2px 8px rgba(15,40,100,.08);
  --shadow:0 10px 30px rgba(15,40,100,.10);
  --shadow-lg:0 24px 60px rgba(10,30,90,.28);

  /* Layout */
  --sidebar-w:272px; --sidebar-w-min:80px;
  --radius:18px; --radius-sm:12px;
  --ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}

/* ---------- Page backdrop (soft light blue so glass has depth) ---------- */
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  font-size:14px; line-height:1.5; color:var(--ink);
  min-height:100vh; overflow-x:hidden;
  background:linear-gradient(160deg,#f5f9ff 0%,#dfeaff 55%,#c9dcff 100%) fixed;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px circle at 6% 0%,   rgba(59,130,246,.34),  transparent 60%),
    radial-gradient(620px circle at 96% 8%,  rgba(96,165,250,.34),  transparent 60%),
    radial-gradient(720px circle at 88% 100%,rgba(37,99,235,.24),   transparent 60%),
    radial-gradient(520px circle at 0% 100%, rgba(147,197,253,.45), transparent 60%);
}
h1,h2,h3,h4,h5,h6{color:var(--ink); letter-spacing:-.01em}
.text-muted{color:var(--ink-muted)!important}
.text-ink{color:var(--ink)!important}
.min-w-0{min-width:0}
::selection{background:rgba(59,130,246,.28)}

/* Slim scrollbars */
*{scrollbar-width:thin; scrollbar-color:rgba(37,99,235,.35) transparent}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-thumb{background:rgba(37,99,235,.30); border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(37,99,235,.50)}

/* ---------- Auth screens ---------- */
.auth-wrapper{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100dvh; padding:24px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0b2559 0%,#1d4ed8 55%,#60a5fa 100%);
}
.auth-wrapper::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(520px circle at 12% 18%, rgba(255,255,255,.26), transparent 60%),
    radial-gradient(640px circle at 88% 12%, rgba(147,197,253,.45), transparent 60%),
    radial-gradient(560px circle at 75% 92%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(480px circle at 15% 90%, rgba(29,78,216,.55),  transparent 60%);
}
.auth-wrapper > *{position:relative; z-index:1}
.card.auth-card, .card.auth-card.bg-white{
  width:100%; max-width:440px; padding:2.2rem!important;
  background-color:rgba(255,255,255,.72)!important;
  border:1px solid var(--glass-border)!important; border-radius:24px!important;
  backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 30px 80px rgba(7,26,69,.40), inset 0 1px 0 #fff!important;
}
.auth-card .rounded-circle{
  background:linear-gradient(135deg,#60a5fa,#1d4ed8)!important;
  box-shadow:0 12px 28px rgba(29,78,216,.40), inset 0 1px 0 rgba(255,255,255,.45);
}

/* ---------- Layout ---------- */
.app-layout{display:flex; min-height:100vh; min-height:100dvh}
.main-workspace{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.content-area{padding:clamp(1rem,2.4vw,1.75rem); flex-grow:1}
.portal-section{animation:fadeUp .3s var(--ease)}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------- Sidebar (deep-blue frosted glass) ---------- */
.sidebar{
  width:var(--sidebar-w); flex:0 0 auto; align-self:flex-start;
  position:sticky; top:0; height:100vh; height:100dvh;
  display:flex; flex-direction:column; z-index:1045; overflow:hidden;
  background:linear-gradient(180deg,rgba(7,26,69,.94),rgba(18,52,138,.90));
  border-right:1px solid rgba(255,255,255,.14);
  box-shadow:8px 0 32px rgba(10,30,90,.18);
  backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
  color:#fff; transition:width .28s var(--ease), transform .28s var(--ease);
}
.sidebar-brand{
  min-height:72px; padding:1rem 1.35rem; display:flex; align-items:center; gap:12px;
  font-size:1.02rem; font-weight:700; letter-spacing:.2px; color:#fff; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sidebar-brand i{
  width:38px; height:38px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:#fff; border-radius:11px;
  background:linear-gradient(135deg,#60a5fa,#2563eb);
  box-shadow:0 6px 16px rgba(37,99,235,.50), inset 0 1px 0 rgba(255,255,255,.4);
}
.sidebar-nav{padding:1rem .75rem; flex:1 1 auto; overflow-y:auto; overflow-x:hidden}
.sidebar-nav::-webkit-scrollbar{width:4px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.sidebar-nav .text-uppercase{
  padding:.7rem 1rem .4rem; font-size:.66rem; letter-spacing:1.3px; font-weight:700;
  color:rgba(191,219,254,.70); white-space:nowrap;
}
.side-link{
  position:relative; display:flex; align-items:center; gap:12px; width:100%;
  min-height:44px; padding:.65rem .95rem; margin-bottom:4px;
  color:#d6e4ff; background:transparent; border:1px solid transparent; border-radius:12px;
  font-size:.88rem; font-weight:500; text-align:left; white-space:nowrap; overflow:hidden;
  transition:background .18s var(--ease), color .18s, border-color .18s, transform .18s var(--ease);
}
.side-link i{min-width:22px; font-size:1.1rem; flex-shrink:0; text-align:center}
.side-link:hover{color:#fff; background:rgba(255,255,255,.10); transform:translateX(2px)}
.side-link.active{
  color:#fff; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.28);
  box-shadow:0 6px 18px rgba(0,10,50,.25), inset 0 1px 0 rgba(255,255,255,.30);
}
.side-link.active::before{
  content:""; position:absolute; left:0; top:22%; bottom:22%; width:3px;
  background:#fff; border-radius:0 3px 3px 0;
}
.side-link .badge{margin-left:auto}
.sidebar-footer{
  padding:.9rem 1.15rem; background:rgba(4,16,48,.35);
  border-top:1px solid rgba(255,255,255,.12);
}
.sidebar-footer .btn-outline-light{border-color:rgba(255,255,255,.35); border-radius:10px; background:transparent; box-shadow:none}
.sidebar-footer .btn-outline-light:hover{background:rgba(255,255,255,.18); color:#fff}
.sidebar .text-secondary{color:#a9c0ee!important}

/* ---------- COLLAPSED sidebar (desktop) — driven by <html class="nav-collapsed"> ---------- */
@media (min-width:992px){
  html.nav-collapsed .sidebar{width:var(--sidebar-w-min)}
  html.nav-collapsed .sidebar-brand{justify-content:center; padding-inline:.5rem}
  html.nav-collapsed .sidebar-brand span,
  html.nav-collapsed .sidebar-nav .text-uppercase,
  html.nav-collapsed .side-link > span:not(.badge),
  html.nav-collapsed .sidebar-footer .text-truncate{display:none!important}
  html.nav-collapsed .sidebar-nav{padding-inline:.6rem}
  html.nav-collapsed .side-link{justify-content:center; padding:.75rem .4rem}
  html.nav-collapsed .side-link:hover{transform:none}
  html.nav-collapsed .side-link .badge{
    position:absolute; top:4px; right:6px; margin:0; font-size:.6rem; padding:.2em .42em;
  }
  html.nav-collapsed .sidebar-footer{padding:.75rem}
  html.nav-collapsed .sidebar-footer > .d-flex{justify-content:center!important}
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:1020; min-height:68px;
  padding:.75rem clamp(1rem,2.5vw,1.75rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:rgba(255,255,255,.66); border-bottom:1px solid var(--glass-border);
  box-shadow:0 4px 24px rgba(15,40,100,.08);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.topbar h5{font-weight:700; font-size:1.05rem; color:var(--blue-950)}
#sidebarToggle{
  width:40px; height:40px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  color:var(--blue-700); font-size:1.25rem; cursor:pointer;
  background:var(--glass-strong); border:1px solid var(--line); border-radius:11px;
  box-shadow:var(--shadow-sm); transition:transform .15s, background .15s, color .15s;
}
#sidebarToggle:hover{background:var(--blue-600); color:#fff; transform:scale(1.05)}
.topbar .badge{padding:.5em .75em; border-radius:9px; font-weight:600}

/* ---------- Glass cards ---------- */
.card{
  --bs-card-bg:transparent;
  background:var(--glass);
  border:1px solid var(--glass-border)!important; border-radius:var(--radius)!important;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.section-header{
  display:flex; align-items:center; gap:8px; margin-bottom:14px; padding-bottom:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
  color:var(--blue-700); border-bottom:1px solid var(--line);
}
.section-header i{font-size:.95rem}
.stat-box{
  padding:14px 16px; border-radius:14px; height:100%;
  background:var(--glass-strong); border:1px solid var(--glass-border);
  box-shadow:var(--shadow-sm), inset 0 1px 0 #fff;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stat-box:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.border-start.border-4{border-left-width:4px!important}

/* ---------- Buttons ---------- */
.btn{border-radius:10px; font-weight:600; transition:all .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(135deg,#3b82f6,#1d4ed8); border-color:#1d4ed8;
  box-shadow:0 6px 16px rgba(29,78,216,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover,.btn-primary:focus{
  background:linear-gradient(135deg,#2563eb,#1e40af); border-color:#1e40af;
  transform:translateY(-1px); box-shadow:0 10px 24px rgba(29,78,216,.42);
}
.btn-success{
  background:linear-gradient(135deg,#10b981,#059669); border-color:#059669;
  box-shadow:0 6px 16px rgba(5,150,105,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-success:hover{background:linear-gradient(135deg,#059669,#047857); border-color:#047857; transform:translateY(-1px)}
.btn-warning{
  background:linear-gradient(135deg,#fbbf24,#f59e0b); border-color:#f59e0b; color:#3b2400;
  box-shadow:0 6px 16px rgba(245,158,11,.28);
}
.btn-warning:hover{background:linear-gradient(135deg,#f59e0b,#d97706); border-color:#d97706; color:#2b1a00; transform:translateY(-1px)}
.btn-secondary{background:#64748b; border-color:#64748b}

.btn-outline-primary,.btn-outline-secondary,.btn-outline-warning,.btn-outline-danger,.btn-outline-success{
  background:rgba(255,255,255,.72); backdrop-filter:blur(8px);
}
.btn-outline-primary{border-color:rgba(37,99,235,.38); color:var(--blue-700)}
.btn-outline-primary:hover{background:var(--blue-600); border-color:var(--blue-600); color:#fff}
.btn-outline-secondary{border-color:rgba(51,77,122,.30); color:var(--ink-soft)}
.btn-outline-secondary:hover{background:var(--ink-soft); border-color:var(--ink-soft); color:#fff}
.btn-outline-warning{border-color:rgba(245,158,11,.55)}
.btn-outline-warning:hover{background:#fbbf24; border-color:#f59e0b; color:#3b2400!important}
.btn-outline-danger:hover{color:#fff}
.btn-link{color:var(--blue-700)}

/* ---------- Forms ---------- */
.form-control,.form-select,.input-group-text{
  min-height:40px; border:1px solid rgba(37,99,235,.20); border-radius:10px;
  background-color:rgba(255,255,255,.85); color:var(--ink);
}
.form-control-sm,.form-select-sm,
.input-group-sm > .form-control,.input-group-sm > .input-group-text{
  min-height:34px; border-radius:9px; font-size:.84rem;
}
.input-group > .form-control:not(:last-child),
.input-group > .input-group-text:not(:last-child){border-top-right-radius:0; border-bottom-right-radius:0}
.input-group > .form-control:not(:first-child),
.input-group > .input-group-text:not(:first-child){border-top-left-radius:0; border-bottom-left-radius:0}
.form-control::placeholder{color:#8aa0c6}
.form-control:focus,.form-select:focus{
  background-color:#fff; border-color:var(--blue-500);
  box-shadow:0 0 0 .22rem rgba(59,130,246,.20);
}
.form-control[readonly]{background-color:rgba(226,236,255,.75); color:var(--ink-soft)}
.input-group-text{background:rgba(219,234,254,.85); color:var(--blue-700)}
.form-label{color:var(--ink-soft); font-weight:600; margin-bottom:.3rem}
.form-check-input:checked{background-color:var(--blue-600); border-color:var(--blue-600)}
.form-check-input:focus{box-shadow:0 0 0 .22rem rgba(59,130,246,.20); border-color:var(--blue-500)}

/* ---------- Tables ---------- */
.table-responsive{
  background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:14px;
}
.table{
  --bs-table-bg:transparent; --bs-table-color:var(--ink);
  --bs-table-border-color:rgba(37,99,235,.10); --bs-table-hover-bg:rgba(37,99,235,.05);
  margin-bottom:0;
}
.table thead th{
  background:rgba(37,99,235,.09)!important; color:var(--blue-900);
  font-size:.7rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  white-space:nowrap; padding-block:.7rem; border-bottom:1px solid rgba(37,99,235,.22);
}
.table > :not(caption) > * > *{padding:.6rem .75rem}
.table td,.table th{vertical-align:middle}
.badge{border-radius:7px; font-weight:600; letter-spacing:.1px}

/* ---------- Special elements ---------- */
.day-input{text-align:center; font-weight:600; min-width:56px}
.day-input:disabled{
  background:#fee2e2!important; color:#991b1b; border-color:#fca5a5;
  -webkit-text-fill-color:#991b1b; opacity:1;
}
.leave-row-bg{background:rgba(251,191,36,.22)!important}
.audit-code{
  font-family:Consolas,Monaco,monospace; font-size:.74rem; padding:2px 7px; border-radius:6px;
  background:rgba(255,255,255,.80); border:1px solid var(--line); color:var(--blue-900); word-break:break-all;
}
.list-group-item{
  background:rgba(255,255,255,.66); border:1px solid var(--glass-border);
  border-radius:12px!important; margin-bottom:7px; cursor:pointer; color:var(--ink);
  transition:all .18s var(--ease);
}
.list-group-item:hover{background:#fff; transform:translateX(3px); box-shadow:var(--shadow-sm)}
.list-group-item.active{
  background:linear-gradient(135deg,#3b82f6,#1d4ed8); border-color:#1d4ed8; color:#fff;
  box-shadow:0 8px 20px rgba(29,78,216,.35);
}
.list-group-item.active .text-muted{color:rgba(255,255,255,.80)!important}
.list-group-item.active .badge{background:rgba(255,255,255,.25)!important}

.alert{border-radius:12px; border-width:1px; backdrop-filter:blur(10px); box-shadow:var(--shadow-sm)}
#managerEmptyState{border:2px dashed rgba(37,99,235,.28)!important; background:rgba(255,255,255,.45)}

/* ---------- Modals ---------- */
.modal-backdrop.show{opacity:1; background:rgba(7,26,69,.45); backdrop-filter:blur(5px)}
.modal-content{
  background:rgba(255,255,255,.88); border:1px solid var(--glass-border)!important; border-radius:20px!important;
  backdrop-filter:blur(26px) saturate(170%); -webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:var(--shadow-lg)!important; overflow:hidden;
}
.modal-header{background:rgba(239,246,255,.80); border-bottom:1px solid var(--line); padding:.9rem 1.25rem}
.modal-footer{background:rgba(239,246,255,.65); border-top:1px solid var(--line)}
.modal-body{padding:1.25rem}
.btn-close:focus{box-shadow:0 0 0 .22rem rgba(59,130,246,.25)}

/* ---------- Mobile drawer — driven by <html class="nav-open"> ---------- */
#sidebarBackdrop{display:none}
@media (max-width:991.98px){
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; width:min(290px,86vw);
    transform:translateX(-105%);
    background:linear-gradient(180deg,rgba(7,26,69,.97),rgba(18,52,138,.95));
  }
  html.nav-open .sidebar{transform:translateX(0)}
  #sidebarBackdrop{
    display:block; position:fixed; inset:0; z-index:1040;
    background:rgba(7,26,69,.50); backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
  }
  html.nav-open #sidebarBackdrop{opacity:1; visibility:visible}
  .topbar{min-height:62px}
  .topbar .badge{display:none}
  #topbarTitle{font-size:.98rem}
}
@media (max-width:575.98px){
  .auth-wrapper{padding:14px}
  .card.auth-card{padding:1.5rem!important; border-radius:20px!important}
  .content-area{padding:.75rem}
  .card{border-radius:14px!important}
  .table{font-size:.78rem}
}

/* ---------- Accessibility ---------- */
:focus-visible{outline:2px solid var(--blue-500); outline-offset:2px}
.sidebar :focus-visible,.auth-wrapper :focus-visible{outline-color:#fff}
.form-control:focus-visible,.form-select:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

/* Fallback for browsers without backdrop-filter: use more opaque surfaces */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{background:rgba(255,255,255,.92)}
  .modal-content{background:#fff}
  .topbar{background:rgba(255,255,255,.95)}
}

/* ---------- Payslip Modal Table Fit ---------- */
.payslip-sheet {
  width: 100%;
  box-sizing: border-box;
}
.payslip-table th,
.payslip-table td {
  white-space: normal !important;
  word-break: break-word;
}

/* ---------- Print (Full A4 Payslip without Modal Clipping) ---------- */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }
  html, body {
    background: #fff !important;
    height: auto !important;
    overflow: visible !important;
  }
  body::before,
  #loginScreen,
  #forcePasswordScreen,
  #appShell,
  .modal-backdrop,
  .modal-header,
  .modal-footer {
    display: none !important;
  }
  #payslipModal {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    overflow: visible !important;
    height: auto !important;
  }
  #payslipModal .modal-dialog,
  #payslipModal .modal-content,
  #payslipModal .modal-body {
    position: static !important;
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    overflow: visible !important;
    transform: none !important;
  }
  #payslipPrintArea,
  #payslipPrintArea * {
    visibility: visible !important;
  }
  .payslip-sheet {
    border: 1px solid #cbd5e1 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .table-responsive {
    overflow: visible !important;
    border: 0 !important;
  }
}