:root{
  --brand:#0f4c81;
  --brand-dark:#0a3a63;
  --brand-light:#eaf1f8;
  --accent:#1f8a70;
}
body{ background:#f4f6f9; color:#222; }

.app-topbar{ background:var(--brand-dark); padding:.55rem 1rem; }
.app-topbar .navbar-brand{ color:#fff; font-size:1.05rem; }
.app-topbar .navbar-brand img{ border-radius:4px; background:#fff; padding:2px; }

.app-shell{ display:flex; min-height:calc(100vh - 56px); }

.app-sidebar{
  width:240px; flex-shrink:0; background:#fff; border-right:1px solid #e3e7ee;
  padding-bottom:2rem;
}
.app-sidebar .nav-link{
  color:#33475b; padding:.55rem .9rem; border-radius:6px; font-size:.92rem; margin-bottom:2px;
}
.app-sidebar .nav-link i{ width:20px; display:inline-block; text-align:center; margin-right:6px; color:#6b7d92; }
.app-sidebar .nav-link:hover{ background:var(--brand-light); color:var(--brand-dark); }
.app-sidebar .nav-link.active{ background:var(--brand); color:#fff; }
.app-sidebar .nav-link.active i{ color:#fff; }
.app-sidebar .nav-section{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:#93a3b5; margin:14px 10px 4px; font-weight:600; }

.app-content{ flex:1; padding:1.5rem; max-width:100%; }

.app-footer{ background:#fff; border-top:1px solid #e3e7ee; }

.card{ border:1px solid #e3e7ee; box-shadow:0 1px 2px rgba(20,30,50,.04); }
.card-header{ background:#fff; border-bottom:1px solid #e3e7ee; font-weight:600; }

.stat-card{ border-radius:10px; padding:1.1rem 1.3rem; color:#fff; }
.stat-card .stat-value{ font-size:1.7rem; font-weight:700; }
.stat-card .stat-label{ font-size:.82rem; opacity:.9; }
.stat-card.bg-1{ background:linear-gradient(135deg,#0f4c81,#1c6ea4); }
.stat-card.bg-2{ background:linear-gradient(135deg,#1f8a70,#28ac8e); }
.stat-card.bg-3{ background:linear-gradient(135deg,#c0392b,#e06255); }
.stat-card.bg-4{ background:linear-gradient(135deg,#7d5ba6,#9b7bc4); }

.table thead th{ background:#f7f9fc; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:#5b6b7f; border-bottom-width:1px; }
.table td, .table th{ vertical-align:middle; }

.att-grid td, .att-grid th{ text-align:center; padding:.3rem; font-size:.78rem; }
.att-cell{ width:30px; height:28px; border-radius:4px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:.72rem; user-select:none; }
.att-P{ background:#d7f3e3; color:#1f8a70; }
.att-A{ background:#fbdcd8; color:#c0392b; }
.att-L{ background:#fff3cd; color:#8a6d00; }
.att-H{ background:#e3ecfa; color:#0f4c81; }
.att-LT{ background:#ece3fa; color:#6f42c1; }
.att-HOL{ background:#e9ecef; color:#495057; }
.att-past{ box-shadow: inset 0 0 0 1px #c9a227; }
.att-past::after{ content:''; }

.timeline{ list-style:none; padding-left:0; margin:0; }
.timeline li{ position:relative; padding:0 0 1.4rem 2rem; border-left:2px solid #e3e7ee; margin-left:8px; }
.timeline li:last-child{ border-color:transparent; padding-bottom:0; }
.timeline li::before{ content:''; position:absolute; left:-9px; top:2px; width:16px; height:16px; border-radius:50%; background:var(--brand); border:3px solid #fff; box-shadow:0 0 0 1px #e3e7ee; }

.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0a3a63,#1c6ea4); }
.login-card{ background:#fff; border-radius:12px; padding:2.2rem; width:100%; max-width:380px; box-shadow:0 20px 50px rgba(0,0,0,.25); }

/* ---- Payslip print styles ---- */
.payslip{ background:#fff; max-width:820px; margin:0 auto; border:1px solid #ccc; }
.payslip-head{ display:flex; align-items:center; gap:14px; padding:18px 24px; border-bottom:3px solid var(--brand); }
.payslip-head img{ height:56px; }
.payslip-head h2{ margin:0; font-size:1.25rem; color:var(--brand-dark); }
.payslip-head p{ margin:0; font-size:.8rem; color:#555; }
.payslip-title{ text-align:center; background:var(--brand-light); padding:8px; font-weight:700; letter-spacing:.04em; color:var(--brand-dark); }
.payslip table.info-table td{ padding:4px 8px; font-size:.85rem; }
.payslip table.money-table th, .payslip table.money-table td{ padding:6px 10px; font-size:.85rem; }
.payslip .net-box{ background:var(--brand); color:#fff; padding:10px 16px; border-radius:6px; font-weight:700; }
.payslip .sign-box{ border-top:1px dashed #999; margin-top:36px; padding-top:6px; font-size:.78rem; text-align:center; }

/* ---- Cash Payment Voucher ---- */
.voucher-doc{ max-width:900px; }
.voucher-table-wrap{ overflow-x:auto; }
.voucher-payees-label{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align:center;
  font-weight:700;
  letter-spacing:.08em;
  background:#f7f9fc;
  vertical-align:middle;
  white-space:nowrap;
}

@media print{
  @page{ margin: 12mm; }
  .no-print, .app-topbar, .app-sidebar, .app-footer, .toast-container,
  .alert{ display:none !important; }
  body{ background:#fff; }
  .app-shell{ display:block; min-height:0; }
  .app-content{ padding:0; margin:0; max-width:100%; }
  .payslip, .voucher-doc{ border:none; box-shadow:none !important; max-width:100%; margin:0; }
  .card{ border:none; box-shadow:none; }
  a[href]::after{ content:''; } /* don't print URLs after links */
  .table{ font-size:.82rem; }
}