/* BNCA Payroll - Application stylesheet
   Light theme. Palette:
     --primary  #145886  (blue)
     --secondary#55b848  (green)
     --dark     #0f3d5e
     --black    #111111
     --white    #ffffff
     --light    #f8f9fa
*/
:root{
  --primary:#145886;
  --secondary:#55b848;
  --dark:#0f3d5e;
  --black:#111111;
  --white:#ffffff;
  --light:#f8f9fa;
  --border:#e5e9ee;
  --muted:#6b7785;
  --shadow:0 6px 22px rgba(20,88,134,.08);
  --shadow-md:0 12px 32px rgba(20,88,134,.12);
  --radius:10px;
  --sidebar-w:248px;
  --topbar-h:60px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Segoe UI','Inter',system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  background:var(--light);color:var(--black);
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
}
input,textarea,select{user-select:text}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--dark)}
::selection{background:var(--primary);color:#fff}


/* ================== SIDEBAR ================== */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
  background:var(--dark);color:#dde7ef;display:flex;flex-direction:column;
  padding:18px 14px;z-index:40;transition:transform .2s ease;
}
.sidebar .brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:0 4px}
.sidebar .logo{width:40px;height:40px;border-radius:10px;background:var(--primary);
  display:grid;place-items:center;color:#fff;font-weight:700;letter-spacing:.5px;
  box-shadow:0 4px 14px rgba(0,0,0,.25)}
.sidebar .brand-name{font-weight:700;color:#fff;font-size:14px;line-height:1.2}
.sidebar .brand-sub{font-size:11px;color:#9bb3c6}

.sidebar nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;padding-right:2px}
.sidebar nav::-webkit-scrollbar{width:6px}
.sidebar nav::-webkit-scrollbar-thumb{background:#1d4f72;border-radius:3px}

.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:#cbd9e3;
  font-size:13.5px;position:relative;border-left:3px solid transparent;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(85,184,72,.18),transparent);
  color:#fff;border-left-color:var(--secondary)}
.nav-item .dot{margin-left:auto;background:var(--secondary);color:#fff;font-size:10px;
  padding:2px 6px;border-radius:10px;font-weight:700;min-width:20px;text-align:center}

.sidebar-foot{margin-top:14px;border-top:1px solid rgba(255,255,255,.07);padding-top:12px}
.user-pill{display:flex;align-items:center;gap:10px;padding:8px 4px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--secondary);color:#fff;
  display:grid;place-items:center;font-weight:700}
.uname{font-size:13px;font-weight:600;color:#fff}
.urole{font-size:11px;color:#9bb3c6}
.logout{display:block;text-align:center;margin-top:10px;padding:8px;border-radius:6px;
  background:rgba(255,255,255,.05);color:#fff;font-size:12.5px;border:1px solid rgba(255,255,255,.1)}
.logout:hover{background:#a8201a;color:#fff;border-color:#a8201a}

/* ================== TOPBAR ================== */
.topbar{
  position:fixed;left:var(--sidebar-w);right:0;top:0;height:var(--topbar-h);background:#fff;
  border-bottom:1px solid var(--border);display:flex;align-items:center;
  padding:0 22px;z-index:30;
}
.page-title{font-size:18px;font-weight:600;color:var(--dark)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.bell{position:relative;padding:8px;border-radius:8px;color:var(--primary);background:#eef4f9}
.bell:hover{background:#dde9f3}
.bell-badge{position:absolute;top:0;right:0;background:#a8201a;color:#fff;font-size:10px;
  border-radius:10px;padding:1px 6px;font-weight:700}
.hamburger{display:none;background:transparent;border:0;flex-direction:column;gap:4px;cursor:pointer;padding:6px}
.hamburger span{display:block;width:22px;height:2px;background:var(--primary);border-radius:2px}

/* ================== MAIN ================== */
.main{
  margin-left:var(--sidebar-w);padding:calc(var(--topbar-h) + 22px) 22px 32px;
  min-height:100vh;
}

/* ================== CARDS / SECTIONS ================== */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px}
.card + .card{margin-top:18px}
.card h2,.card h3{margin:0 0 12px;color:var(--dark)}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-title h2{margin:0}

/* ------ Stat tiles ------ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.stat{background:#fff;border-radius:var(--radius);padding:16px 18px;border:1px solid var(--border);
  box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;transition:transform .15s}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat .stat-icon{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;
  background:#eef4f9;color:var(--primary)}
.stat .stat-icon.green{background:#e9f7e3;color:var(--secondary)}
.stat .stat-icon.amber{background:#fef4dd;color:#b07700}
.stat .stat-icon.red{background:#fdecec;color:#a8201a}
.stat .stat-icon.dark{background:#dee6ec;color:var(--dark)}
.stat .stat-icon .i{width:24px;height:24px}
.stat .stat-val{font-size:22px;font-weight:700;color:var(--dark);line-height:1}
.stat .stat-lbl{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ------ Tables ------ */
.table-wrap{overflow:auto;border-radius:8px;border:1px solid var(--border);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{background:#f1f6fb;color:var(--dark);font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);position:sticky;top:0}
table.tbl td{padding:10px 12px;border-bottom:1px solid #f1f3f6}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:#fafcff}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ------ Buttons ------ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;font-size:13.5px;
  font-weight:600;border:0;cursor:pointer;transition:all .15s;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--dark);color:#fff}
.btn-success{background:var(--secondary);color:#fff}
.btn-success:hover{background:#46a13a;color:#fff}
.btn-danger{background:#c43232;color:#fff}
.btn-danger:hover{background:#a8201a;color:#fff}
.btn-warn{background:#e8a200;color:#fff}
.btn-warn:hover{background:#c08800;color:#fff}
.btn-ghost{background:#fff;color:var(--primary);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--light)}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:6px}
.btn-block{width:100%;justify-content:center}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* ------ Forms ------ */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.form-grid .full{grid-column:1/-1}
label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;color:#222}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:7px;
  font-size:14px;font-family:inherit;background:#fff;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(20,88,134,.12)}
textarea{min-height:74px;resize:vertical}
.req::after{content:" *";color:#a8201a}
.help{font-size:11.5px;color:var(--muted);margin-top:4px}

/* ------ Alerts ------ */
.alert{padding:11px 14px;border-radius:8px;margin-bottom:14px;font-size:14px;border:1px solid transparent}
.alert-error{background:#fdecec;color:#a8201a;border-color:#f5c6c5}
.alert-success{background:#eaf7e3;color:#1f5f1a;border-color:#bfe4ad}
.alert-info{background:#e8f1f8;color:var(--dark);border-color:#bcd5e6}
.alert-warn{background:#fef4dd;color:#b07700;border-color:#f1d997}

/* ------ Badges ------ */
.badge{display:inline-block;padding:3px 9px;border-radius:11px;font-size:11px;font-weight:600;letter-spacing:.3px}
.badge-green{background:#e9f7e3;color:#2c8a23}
.badge-blue{background:#e0eef9;color:var(--primary)}
.badge-amber{background:#fef4dd;color:#b07700}
.badge-red{background:#fdecec;color:#a8201a}
.badge-grey{background:#eef0f2;color:#4a5560}
.badge-dark{background:var(--dark);color:#fff}

/* ------ Toolbar / filters ------ */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:14px}
.toolbar .form-field{flex:1;min-width:160px}
.toolbar .actions{margin-left:auto;display:flex;gap:8px}
.search{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border:1px solid var(--border);border-radius:8px;min-width:240px}
.search input{border:0;padding:0;background:transparent;flex:1}
.search input:focus{box-shadow:none}

/* ------ Stepper (payroll wizard) ------ */
.stepper{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.stepper .step{flex:1;min-width:140px;padding:12px 14px;background:#fff;border-radius:8px;
  border:1px solid var(--border);font-size:13px;display:flex;align-items:center;gap:10px}
.stepper .step .num{width:26px;height:26px;border-radius:50%;background:#eef0f2;color:var(--muted);
  display:grid;place-items:center;font-weight:700;font-size:12px}
.stepper .step.now{border-color:var(--primary);background:#f1f7fb}
.stepper .step.now .num{background:var(--primary);color:#fff}
.stepper .step.done .num{background:var(--secondary);color:#fff}

/* ------ Modal ------ */
.modal-back{position:fixed;inset:0;background:rgba(15,61,94,.55);display:none;align-items:center;justify-content:center;z-index:80;padding:14px}
.modal-back.show{display:flex}
.modal{background:#fff;border-radius:12px;max-width:560px;width:100%;padding:22px;box-shadow:var(--shadow-md);max-height:92vh;overflow-y:auto}
.modal h3{margin:0 0 14px;color:var(--dark)}
.modal .modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* ------ Login ------ */
.login-page{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.login-page .left{background:linear-gradient(135deg,var(--primary),var(--dark));color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-page .left h1{font-size:34px;margin:0 0 12px}
.login-page .left p{font-size:15px;color:#cfe1ee;margin:0 0 24px;line-height:1.55}
.login-page .right{display:flex;align-items:center;justify-content:center;padding:32px;background:var(--light)}
.login-card{width:100%;max-width:420px;background:#fff;padding:34px 30px;border-radius:14px;box-shadow:var(--shadow-md);border:1px solid var(--border)}
.login-card h2{margin:0 0 4px;color:var(--dark)}
.login-card .sub{color:var(--muted);font-size:13px;margin:0 0 22px}
.login-card .btn-block{margin-top:8px}
.login-page .anim-bars{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.18}
.login-page .anim-bars span{position:absolute;bottom:-30px;width:8px;background:#fff;border-radius:6px;animation:bar 5s ease-in-out infinite}
@keyframes bar{
  0%,100%{height:60px;transform:translateY(0)}
  50%{height:200px;transform:translateY(-30px)}
}
.otp-inputs{display:flex;gap:8px;justify-content:space-between;margin:18px 0}
.otp-inputs input{width:48px;height:54px;text-align:center;font-size:22px;font-weight:700;color:var(--dark);border-radius:8px}

/* ------ DevTools blur overlay ------ */
#devtools-blur{position:fixed;inset:0;background:rgba(15,61,94,.92);z-index:9998;display:none;
  align-items:center;justify-content:center;color:#fff;font-size:18px;text-align:center;padding:20px;backdrop-filter:blur(8px)}
#devtools-blur.show{display:flex}
#devtools-blur .box{max-width:480px}
#devtools-blur .box h2{font-size:24px;margin:0 0 8px}

/* ------ Print friendly (PDF report view) ------ */
@media print{
  .sidebar,.topbar,.no-print{display:none !important}
  .main{margin:0;padding:0}
  body{background:#fff !important}
  .card{box-shadow:none;border:0;padding:0}
}

/* ------ Mobile ------ */
@media (max-width:880px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-md)}
  .topbar{left:0;padding:0 14px}
  .hamburger{display:flex}
  .main{margin-left:0;padding:calc(var(--topbar-h) + 14px) 14px 24px}
  .form-grid,.form-grid.cols-3{grid-template-columns:1fr}
  .login-page{grid-template-columns:1fr}
  .login-page .left{padding:30px;min-height:200px}
}

/* ================== ICONS (inline SVG via mask) ================== */
.i{display:inline-block;width:18px;height:18px;background:currentColor;
   -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
   -webkit-mask-position:center;mask-position:center;
   -webkit-mask-size:contain;mask-size:contain;vertical-align:-3px}
.icon-dashboard{-webkit-mask-image:url(../icons/dashboard.svg);mask-image:url(../icons/dashboard.svg)}
.icon-inbox    {-webkit-mask-image:url(../icons/inbox.svg);    mask-image:url(../icons/inbox.svg)}
.icon-download {-webkit-mask-image:url(../icons/download.svg); mask-image:url(../icons/download.svg)}
.icon-users    {-webkit-mask-image:url(../icons/users.svg);    mask-image:url(../icons/users.svg)}
.icon-bell     {-webkit-mask-image:url(../icons/bell.svg);     mask-image:url(../icons/bell.svg)}
.icon-settings {-webkit-mask-image:url(../icons/settings.svg); mask-image:url(../icons/settings.svg)}
.icon-cash     {-webkit-mask-image:url(../icons/cash.svg);     mask-image:url(../icons/cash.svg)}
.icon-handshake{-webkit-mask-image:url(../icons/handshake.svg);mask-image:url(../icons/handshake.svg)}
.icon-warning  {-webkit-mask-image:url(../icons/warning.svg);  mask-image:url(../icons/warning.svg)}
.icon-user     {-webkit-mask-image:url(../icons/user.svg);     mask-image:url(../icons/user.svg)}
.icon-check    {-webkit-mask-image:url(../icons/check.svg);    mask-image:url(../icons/check.svg)}
.icon-x        {-webkit-mask-image:url(../icons/x.svg);        mask-image:url(../icons/x.svg)}
.icon-edit     {-webkit-mask-image:url(../icons/edit.svg);     mask-image:url(../icons/edit.svg)}
.icon-plus     {-webkit-mask-image:url(../icons/plus.svg);     mask-image:url(../icons/plus.svg)}
.icon-lock     {-webkit-mask-image:url(../icons/lock.svg);     mask-image:url(../icons/lock.svg)}
.icon-unlock   {-webkit-mask-image:url(../icons/unlock.svg);   mask-image:url(../icons/unlock.svg)}
.icon-search   {-webkit-mask-image:url(../icons/search.svg);   mask-image:url(../icons/search.svg)}
.icon-mail     {-webkit-mask-image:url(../icons/mail.svg);     mask-image:url(../icons/mail.svg)}
.icon-file     {-webkit-mask-image:url(../icons/file.svg);     mask-image:url(../icons/file.svg)}
.icon-eye      {-webkit-mask-image:url(../icons/eye.svg);      mask-image:url(../icons/eye.svg)}
.icon-clock    {-webkit-mask-image:url(../icons/clock.svg);    mask-image:url(../icons/clock.svg)}