body.bg-surface { background: #f4f7fb; color: #151521; }
.app-shell { min-height: 100vh; }
.admin-shell { display: grid; grid-template-columns: 280px 1fr; }
.admin-sidebar { background: linear-gradient(180deg, #151521 0%, #243349 100%); color: #fff; padding: 24px; min-height: 100vh; position: sticky; top: 0; }
.brand-box { display:flex; align-items:center; gap:14px; }
.brand-icon { width:54px; height:54px; border-radius:18px; background: linear-gradient(135deg,#4f7cff,#61e3c1); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:1px; }
.brand-title { font-size: 20px; font-weight: 700; }
.brand-subtitle { font-size: 13px; color: rgba(255,255,255,.75); }
.side-link { display:flex; align-items:center; gap:12px; color:#dbe7ff; text-decoration:none; padding:14px 16px; border-radius:18px; }
.side-link.active, .side-link:hover { background: rgba(255,255,255,.12); color:#fff; }
.app-main { min-width:0; }
.app-content.admin-content { padding: 28px; }
.app-content.employee-content { padding-top: 82px; padding-bottom: 24px; }
.soft-card { background:#fff; border-radius:28px; padding:24px; box-shadow: 0 18px 40px rgba(20,30,55,.08); }
.soft-card-head { border-bottom:1px solid #eef2f8; padding-bottom:12px; }
.auth-wrapper { max-width: 420px; margin: 0 auto; }
.clock-auth-card { background:#fff; border-radius:32px; padding:28px; box-shadow:0 18px 40px rgba(20,30,55,.12); }
.pin-display-wrap { background:#f6f9ff; border-radius:24px; padding:20px; }
.pin-display { font-size:2.1rem; text-align:center; letter-spacing:.5rem; font-weight:700; color:#243349; }
.pin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pin-btn { border:0; border-radius:22px; min-height:64px; background:#f6f9ff; font-size:1.3rem; font-weight:700; color:#243349; }
.pin-btn:hover { background:#eaf1ff; }
.pin-btn-muted { background:#edf1f6; }
.clock-page .soft-card { min-height: 100%; }
.soft-field { min-height:48px; border-radius:18px; background:#f6f9ff; padding:12px 16px; color:#637081; }
.signature-shell { background:#fff; border:1px solid #e9eef5; border-radius:24px; padding:10px; height:220px; }
#signaturePad { width:100%; height:100%; }
.radio-chip { cursor:pointer; }
.radio-chip input { display:none; }
.radio-chip span { display:inline-block; padding:10px 18px; border-radius:999px; background:#f6f9ff; font-weight:600; }
.radio-chip input:checked + span { background:#151521; color:#fff; }
.badge-soft { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; background:#edf9f2; color:#13804e; font-size:12px; font-weight:700; }
.badge-soft.warning { background:#fff4d9; color:#a56b00; }
.log-item { border-bottom:1px solid #eef2f8; padding:14px 0; }
.log-item:last-child { border-bottom:0; padding-bottom:0; }
.empty-note { padding:20px; border-radius:20px; background:#f6f9ff; color:#6c7a90; }
.dashboard-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border-radius:28px; padding:24px; box-shadow:0 18px 40px rgba(20,30,55,.08); }
.admin-page-wrap .table { width:100%; }
.select2-container--bootstrap4 .select2-selection { border-radius:16px !important; min-height:46px; border-color:#d7e0ee; }
@media (max-width: 991px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { min-height:auto; position:static; }
}
.header,
.header.header-fixed,
.header.header-fix {
    display: none !important;
}

.app-content {
    padding-top: 20px !important;
}