:root{--navy:#0d2b52;--blue:#2389d7;--sky:#eef8ff;--line:#e6edf5;--text:#17253f;--muted:#6b7890;--danger:#df3f4c;--success:#23a36b}
*{box-sizing:border-box}
body{margin:0;background:#f6fbff;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:15px}
a{text-decoration:none}
.app-shell{min-height:100vh;display:flex}
.sidebar{width:280px;background:linear-gradient(180deg,#092648,#123d73);color:#fff;position:fixed;inset:0 auto 0 0;z-index:1040;padding:22px 16px;box-shadow:12px 0 32px rgba(12,39,72,.16)}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px;padding:8px}
.brand-logo{width:44px;height:44px;border-radius:12px;background:#29a7f2;display:grid;place-items:center;font-size:24px}
.brand strong{display:block;font-size:17px}.brand span{font-size:12px;opacity:.78}
.nav-menu{display:grid;gap:6px}.nav-menu a{color:#dcecff;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:10px;font-weight:600}
.nav-menu a:hover,.nav-menu a.active{background:rgba(255,255,255,.14);color:#fff}.nav-menu .logout{margin-top:16px;color:#ffd9df}
.app-main{margin-left:280px;min-width:0;flex:1}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:0 28px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:24px;line-height:1.2;margin:0;font-weight:800}.topbar-kicker{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}.topbar-user{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy)}.topbar-user i{font-size:28px;color:var(--blue)}
.content-wrap{padding:28px;max-width:1600px}.btn-icon{width:42px;height:42px;display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:#fff}
.card-soft{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 30px rgba(28,79,128,.07)}
.stat-card{padding:20px;display:flex;align-items:center;justify-content:space-between}.stat-card .icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--sky);color:var(--blue);font-size:24px}.stat-card small{color:var(--muted);font-weight:700}.stat-card h2{margin:6px 0 0;font-size:30px;font-weight:800}
.section-title{font-weight:800;margin:0}.table{vertical-align:middle}.table thead th{font-size:12px;text-transform:uppercase;color:#52627a;background:#f1f7fd;border-bottom:1px solid var(--line);white-space:nowrap}.table td{white-space:nowrap}.table-wrap{overflow-x:auto;border-radius:12px}
.badge-in{background:#e8f8f0;color:#137a4b}.badge-out{background:#fff0ee;color:#bd3341}.badge{font-weight:800}
.form-label{font-weight:700;color:#233a5d}.form-control,.form-select{border-radius:10px;border-color:#d7e3ef}.form-control:focus,.form-select:focus{border-color:#73bdf0;box-shadow:0 0 0 .2rem rgba(35,137,215,.14)}
.filter-grid{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:12px}.action-bar{display:flex;gap:8px;flex-wrap:wrap}.page-link{border-radius:8px;margin:0 2px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail-item{padding:12px;border:1px solid var(--line);border-radius:10px;background:#fbfdff}.detail-item span{display:block;color:var(--muted);font-size:12px;font-weight:700}.detail-item strong{display:block;margin-top:3px}
.print-header{display:none}
@media (max-width:1199px){.filter-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}}
@media (max-width:991px){.sidebar{transform:translateX(-102%);transition:.2s ease}.sidebar.show{transform:none}.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(5,20,38,.46);z-index:1039}.sidebar-backdrop.show{display:block}.app-main{margin-left:0}.content-wrap{padding:18px}.topbar{padding:0 16px}.topbar-user span{display:none}}
@media (max-width:575px){.topbar h1{font-size:18px}.filter-grid,.detail-grid{grid-template-columns:1fr}.stat-card h2{font-size:25px}.content-wrap{padding:14px}.card-soft{border-radius:10px}}
@media print{body{background:#fff;font-size:11px}.sidebar,.topbar,.no-print,.toast-container,.modal{display:none!important}.app-main{margin:0}.content-wrap{padding:0;max-width:none}.card-soft{box-shadow:none;border:0}.print-header{display:block;text-align:center;margin-bottom:12px}.table thead th{background:#fff!important;color:#000}.table td,.table th{border:1px solid #000!important;padding:4px!important;white-space:normal}.signature{page-break-inside:avoid;margin-top:36px;width:280px;margin-left:auto;text-align:center}}