:root { --brand: #1f3a5f; --brand-2: #2f5d8a; --sidebar-w: 230px; }
body { background: #f4f6f9; font-size: .95rem; }
.app-navbar { background: var(--brand); }
.app-sidebar { width: var(--sidebar-w); background: #fff; border-right: 1px solid #e3e7ee; min-height: calc(100vh - 56px); }
@media (min-width: 992px) { .app-sidebar { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; flex-shrink: 0; } }
.app-sidebar .nav-link { color: #344054; padding: .55rem 1rem; border-left: 3px solid transparent; }
.app-sidebar .nav-link i { width: 1.4rem; display: inline-block; color: #667085; }
.app-sidebar .nav-link:hover { background: #f2f5f9; }
.app-sidebar .nav-link.active { background: #eaf1fb; border-left-color: var(--brand-2); color: var(--brand); font-weight: 600; }
.app-sidebar .nav-link.active i { color: var(--brand-2); }
.app-main { min-width: 0; }
.card { border: 1px solid #e3e7ee; border-radius: .6rem; }
.btn-primary { background: var(--brand-2); border-color: var(--brand-2); }
.btn-primary:hover { background: var(--brand); border-color: var(--brand); }
.login-wrap { min-height: 90vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 400px; }
.table th { font-weight: 600; font-size: .82rem; color: #475467; white-space: nowrap; }
.filters .form-control, .filters .form-select { min-width: 140px; }

/* Punch screen */
.punch-btn { width: 220px; height: 220px; border-radius: 50%; font-size: 1.6rem; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.punch-clock { font-size: 2.6rem; font-weight: 700; letter-spacing: .02em; }

/* Monthly attendance grid */
.att-grid td, .att-grid th { padding: .2rem .25rem; text-align: center; font-size: .75rem; min-width: 30px; }
.att-grid td.name, .att-grid th.name { text-align: left; min-width: 160px; position: sticky; left: 0; background: #fff; z-index: 1; }
.c-p { --bs-table-bg: #d1fadf; background: #d1fadf; } .c-hd { --bs-table-bg: #fef0c7; background: #fef0c7; } .c-mp { --bs-table-bg: #fedf89; background: #fedf89; }
.c-l { --bs-table-bg: #d1e9ff; background: #d1e9ff; } .c-lop { --bs-table-bg: #fecdca; background: #fecdca; } .c-wo { --bs-table-bg: #eaecf0; background: #eaecf0; }
.c-h { --bs-table-bg: #e9d7fe; background: #e9d7fe; } .c-a { --bs-table-bg: #fda29b; background: #fda29b; } .c-na { --bs-table-bg: #f9fafb; background: #f9fafb; color: #98a2b3; }
@media print { .c-p, .c-hd, .c-mp, .c-l, .c-lop, .c-wo, .c-h, .c-a { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.legend span { display: inline-block; padding: 0 .4rem; border-radius: .25rem; margin-right: .3rem; font-size: .75rem; }

/* Payslip / print */
.payslip { max-width: 820px; margin: 0 auto; background: #fff; padding: 28px; border: 1px solid #ddd; }
.payslip table { width: 100%; }
.payslip td, .payslip th { padding: 4px 8px; border: 1px solid #ccc; font-size: .85rem; }
@media print {
  body { background: #fff; }
  .app-main { padding: 0 !important; }
  .payslip { border: none; padding: 0; }
  .att-grid td.name, .att-grid th.name { position: static; }
  a { text-decoration: none; color: inherit; }
  @page { size: A4; margin: 12mm; }
  .print-landscape { }
}