@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
:root{
  /* Locked brand palette — reuse these exactly, do not introduce new hues.
     Light/dark tints below are computed (color-mix) from these same hues. */
  --navy:#0F1B33;--navy-hover:#1B2C4D;
  --bg:#F5F6F8;--surface:#FFFFFF;--surface-alt:#F5F6F8;--border:#E5E7EB;
  --text-primary:#1F2937;--text-secondary:#6B7280;--text-muted:#9CA3AF;
  --accent:#E8935A;--accent-light:color-mix(in srgb,var(--accent) 15%,white);--accent-hover:color-mix(in srgb,var(--accent) 85%,black);
  --avatar-bg:#FAC775;--avatar-text:#412402;
  --danger:#EF4444;--danger-light:color-mix(in srgb,var(--danger) 12%,white);
  --warning:#854F0B;--warning-light:#FAC775;
  --info:#378ADD;--info-light:color-mix(in srgb,var(--info) 12%,white);
  --success:#22C55E;--success-light:#DCFCE7;--success-text:#15803D;
  --r:6px;--rl:10px;--sh:0 1px 3px rgba(0,0,0,.08);--shm:0 4px 12px rgba(0,0,0,.1);
  --mono:'DM Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text-primary);min-height:100vh;font-size:14px;line-height:1.5}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy)}
.auth-card{background:var(--surface);border-radius:var(--rl);padding:40px;width:400px;max-width:95vw;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:28px}
.auth-logo-img{width:400px;height:auto;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}
.auth-tagline{font-size:11px;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase}
.auth-title{font-size:22px;font-weight:600;margin-bottom:4px;letter-spacing:-.3px}
.auth-sub{color:var(--text-secondary);margin-bottom:24px;font-size:13px}
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.form-input{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r);font-family:inherit;font-size:13px;color:var(--text-primary);background:var(--surface);transition:border-color .15s;outline:none}
.form-input:focus{border-color:var(--accent)}
.form-input:disabled{background:var(--surface-alt);color:var(--text-muted);cursor:not-allowed}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A6080' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px;cursor:pointer}
textarea.form-input{resize:vertical;min-height:80px}
.form-error{font-size:11px;color:var(--danger);margin-top:4px;display:none}
.input-group{position:relative}
.input-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);cursor:pointer}
.input-group input[type=password]::-ms-reveal,.input-group input[type=password]::-ms-clear{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:var(--r);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all .15s;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}
.btn-full{width:100%}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1.5px solid var(--border)}.btn-ghost:hover{background:var(--surface-alt);color:var(--text-primary)}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#a93226}
.btn-success{background:var(--success);color:#fff}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px}
.app{display:flex;min-height:100vh}
.sidebar{width:230px;min-height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto}
.sidebar-logo{padding:18px 18px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-chip{background:var(--navy);border-radius:var(--r);padding:8px 12px;display:flex;align-items:center;justify-content:center;width:100%}
.logo-img{width:100%;max-width:150px;height:auto;display:block}
.sidebar-nav{flex:1;padding:10px 8px}
.nav-section-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;padding:10px 10px 5px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.nav-section-chevron{flex-shrink:0;transition:transform .15s}
.nav-section-chevron.open{transform:rotate(90deg)}
.nav-section-items{max-height:0;overflow:hidden;transition:max-height .22s cubic-bezier(.2,.8,.2,1)}
.nav-section-items.open{max-height:1000px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);cursor:pointer;color:var(--text-secondary);font-size:13px;transition:all .12s;margin:0 3px 1px;position:relative}
.nav-item:hover{background:var(--surface-alt);color:var(--text-primary)}
.nav-item.active{background:var(--accent-light);color:var(--accent);font-weight:500}
.nav-item svg{width:15px;height:15px;flex-shrink:0}
.nav-badge{position:absolute;right:10px;background:var(--warning);color:#fff;font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center}
.nav-tabs{display:flex;gap:20px;margin:2px 14px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.nav-tab{padding:0 0 10px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.42);cursor:pointer;position:relative;user-select:none}
.nav-tab.active{color:#fff}
.nav-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.sidebar-footer{padding:12px;border-top:1px solid var(--border);flex-shrink:0}
.user-pill{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);background:var(--surface-alt);margin-bottom:8px}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--avatar-text);flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:10px;color:var(--text-muted);text-transform:capitalize}
.sidebar{background:var(--navy);border-right-color:rgba(255,255,255,0.08)}
.sidebar-logo{border-bottom-color:rgba(255,255,255,0.08)}
.nav-section-label{color:rgba(255,255,255,0.35)}
.nav-item{color:rgba(255,255,255,0.62)}
.nav-item:hover{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.92)}
.nav-item.active{background:var(--navy-hover);color:#fff;font-weight:600}
.nav-item.active::before{content:'';position:absolute;left:-3px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--accent)}
.sidebar-footer{border-top-color:rgba(255,255,255,0.08)}
.user-pill{background:rgba(255,255,255,0.08)}
.user-name{color:#fff}
.user-role{color:rgba(255,255,255,0.45)}
.sidebar-footer .btn-ghost{color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.15)}
.sidebar-footer .btn-ghost:hover{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.3)}
.main{margin-left:230px;flex:1;min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:90;background:var(--bg);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-cluster{display:flex;align-items:center;gap:12px;flex-shrink:0}
.page-title{font-size:17px;font-weight:600;letter-spacing:-.3px}
.page-subtitle{font-size:12px;color:var(--text-secondary);margin-top:1px}
.topbar-right{display:flex;gap:8px;align-items:center}
.content{padding:24px 28px;flex:1}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}
.card-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-title{font-size:13px;font-weight:600}
.card-body{padding:18px}
.card-footer{padding:12px 18px;border-top:1px solid var(--border);background:var(--surface-alt);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-secondary)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stats-grid-3{grid-template-columns:repeat(3,1fr)}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:16px 18px}
.stat-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.stat-value{font-size:28px;font-weight:300;letter-spacing:-1px;font-family:var(--mono)}
.stat-sub{font-size:11px;color:var(--text-secondary);margin-top:4px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;padding:10px 14px;text-align:left;background:var(--surface-alt);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#F0F5FF}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;white-space:nowrap}
.badge-green{background:var(--success-light);color:var(--success-text)}
.badge-red{background:var(--danger-light);color:var(--danger)}
.badge-yellow{background:var(--warning-light);color:var(--warning)}
.badge-blue{background:var(--info-light);color:var(--info)}
.badge-gray{background:var(--surface-alt);color:var(--text-secondary);border:1px solid var(--border)}
.badge-purple{background:#F3E8FF;color:#7C3AED}
.modal-overlay{position:fixed;inset:0;background:rgba(26,25,22,.5);z-index:500;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);padding:20px}
.modal{background:var(--surface);border-radius:var(--rl);width:520px;max-width:100%;box-shadow:0 24px 60px rgba(0,0,0,.18);max-height:90vh;display:flex;flex-direction:column}
.modal-lg{width:680px}.modal-xl{width:860px}
.modal-header{padding:18px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-size:15px;font-weight:600}
.modal-close{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;border-radius:4px;display:flex}
.modal-close:hover{color:var(--text-primary);background:var(--surface-alt)}
.modal-body{padding:20px 22px;overflow-y:auto;flex:1}
.modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;flex-shrink:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.flex-row{display:flex;align-items:center;gap:10px}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.notice{padding:11px 14px;border-radius:var(--r);font-size:12px;margin-bottom:14px;display:flex;gap:8px;align-items:flex-start}
.notice svg{flex-shrink:0;margin-top:1px}
.notice-info{background:var(--info-light);color:var(--info);border:1px solid #BFDBFE}
.notice-warn{background:var(--warning-light);color:var(--warning);border:1px solid #FDE68A}
.notice-danger{background:var(--danger-light);color:var(--danger);border:1px solid #FECACA}
.notice-success{background:var(--success-light);color:var(--success-text);border:1px solid #BBF7D0}
.tab-group{display:flex;flex-wrap:wrap;gap:2px;background:var(--surface-alt);border-radius:var(--r);padding:3px;border:1px solid var(--border);margin-bottom:16px;width:fit-content;max-width:100%}
.tab-item{padding:6px 14px;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;color:var(--text-secondary);transition:all .12s}
.tab-item.active{background:var(--surface);color:var(--text-primary);box-shadow:var(--sh)}
.balance-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:3px}
.balance-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .4s}
.upload-zone{border:2px dashed var(--border);border-radius:var(--rl);padding:28px;text-align:center;cursor:pointer;transition:all .15s;background:var(--surface-alt)}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:var(--accent-light)}
.upload-zone input{display:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.toggle{width:36px;height:20px;border-radius:10px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.toggle-knob{width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:3px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.search-bar{position:relative;display:inline-flex;align-items:center}
.search-bar input{padding-left:32px;width:220px}
.search-bar svg{position:absolute;left:9px;color:var(--text-muted)}
.divider{border:none;border-top:1px solid var(--border);margin:16px 0}
.section-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.payslip-doc{font-size:13px;line-height:1.6}
.payslip-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--accent)}
.payslip-head>div:first-child{flex:0 0 60%;min-width:0;overflow-wrap:break-word}
.payslip-head>div:last-child{flex:0 0 40%}
.payslip-emp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;background:var(--surface-alt);padding:12px 14px;border-radius:var(--r);margin-bottom:16px}
.ps-item span:first-child{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;display:block}
.ps-item span:last-child{font-size:13px;font-weight:500}
.ps-table{width:100%;border-collapse:collapse;margin-bottom:8px}
.ps-table th{font-size:10px;text-transform:uppercase;letter-spacing:.4px;padding:7px 10px;border-bottom:1.5px solid var(--border);color:var(--text-muted)}
.ps-table td{padding:7px 10px;border-bottom:1px solid var(--border);font-size:13px}
.ps-net{text-align:right;font-size:17px;font-weight:700;color:var(--accent);padding-top:10px;border-top:2px solid var(--text-primary);margin-top:6px}
.avatar-lg{width:52px;height:52px;border-radius:50%;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--avatar-text);flex-shrink:0}
.avatar-md{width:36px;height:36px;border-radius:50%;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--avatar-text);flex-shrink:0}
.avatar-sm{width:28px;height:28px;border-radius:50%;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--avatar-text);flex-shrink:0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px}
.cal-day{aspect-ratio:1;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:10px}
.cal-present{background:var(--success-light);color:var(--success-text)}
.cal-absent{background:var(--danger-light);color:var(--danger)}
.cal-half{background:var(--warning-light);color:var(--warning)}
.cal-weekend{background:var(--surface-alt);color:var(--text-muted)}
.cal-empty{background:transparent}
.cal-today{box-shadow:inset 0 0 0 2px var(--accent);font-weight:700}
.cal-future{opacity:.45}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px}
.cal-head span{font-size:9px;text-align:center;color:var(--text-muted);font-weight:600;text-transform:uppercase}
.toast{position:fixed;bottom:20px;right:20px;z-index:999;background:var(--text-primary);color:#fff;padding:11px 16px;border-radius:var(--rl);font-size:13px;box-shadow:var(--shm);animation:slideUp .2s ease;max-width:340px;display:flex;align-items:center;gap:8px}
.toast-success{background:var(--success)}.toast-error{background:var(--danger)}.toast-warn{background:var(--warning)}
@keyframes slideUp{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
.notif-target-flash{animation:notifFlash 2s ease}
@keyframes notifFlash{0%,100%{background:transparent}20%,60%{background:var(--accent-light,rgba(99,102,241,.15))}}
.actions-row{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;background:var(--surface-alt);border:1px solid var(--border);border-radius:20px;font-size:12px;color:var(--text-secondary)}
.diff-old{text-decoration:line-through;color:var(--text-muted)}
.diff-new{color:var(--accent);font-weight:600}
.diff-row-changed{background:var(--warning-light)}
.text-mono{font-family:var(--mono)}
.text-muted{color:var(--text-muted)}
.text-secondary{color:var(--text-secondary)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.fw-600{font-weight:600}
.fs-12{font-size:12px}
.fs-11{font-size:11px}
.fs-13{font-size:13px}
.mt-4{margin-top:4px}
.mt-8{margin-top:8px}
.mb-4{margin-bottom:4px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.text-right{text-align:right}
.td-center{text-align:center}
@media print{.sidebar,.topbar,.topbar-right,.btn,.modal-overlay{display:none!important}.main{margin:0}.content{padding:0}}
@media(max-width:768px){.sidebar{display:none}.main{margin-left:0}.stats-grid{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{grid-template-columns:1fr}}
.mobile-menu-btn{display:none;align-items:center;justify-content:center;background:none;border:1.5px solid var(--border);border-radius:var(--r);padding:7px 9px;cursor:pointer;color:var(--text-secondary);flex-shrink:0}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99}
.checkin-widget{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* Fixed-width composite attendance pill — same width whether it's showing
   "Check-out + live duration" (checked in) or "Check-in + shift summary"
   (checked out), so switching states never shifts the header layout. */
.attendance-pill{display:flex;align-items:center;justify-content:center;gap:8px;width:176px;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:600;border:none;cursor:pointer;transition:filter .15s;flex-shrink:0;color:#fff}
.attendance-pill:hover:not(:disabled){filter:brightness(.95)}
.attendance-pill:disabled{cursor:default}
.attendance-pill .ap-label{white-space:nowrap}
.attendance-pill .ap-value{font-family:var(--mono);font-weight:600;white-space:nowrap}
.attendance-pill.checked-in{background:var(--danger)}
.attendance-pill.checked-out{background:var(--success)}
.topbar-divider{width:1px;height:24px;background:var(--border);flex-shrink:0}
.avatar-ring{border-radius:50%;padding:2px;border:2px solid var(--border);display:inline-flex;flex-shrink:0;cursor:pointer;transition:border-color .15s}
.avatar-ring.checked-in{border-color:var(--danger)}
.avatar-ring.checked-out{border-color:var(--success)}
.notif-bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:none;border:1.5px solid var(--border);border-radius:var(--r);color:var(--text-secondary);cursor:pointer}
.notif-bell-btn:hover{background:var(--surface-alt);color:var(--text-primary)}
.notif-badge-dot{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:9.5px;font-weight:700;line-height:1;padding:2px 5px;border-radius:10px;min-width:16px;text-align:center;border:2px solid var(--bg)}
.notif-list{max-height:60vh;overflow-y:auto}
.notif-item{padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.notif-item:hover{background:var(--surface-alt)}
.notif-item:last-child{border-bottom:none}
.notif-item-title{font-size:12.5px;color:var(--text-secondary)}
.notif-item.unread{background:var(--accent-light)}
.notif-item.unread .notif-item-title{font-weight:700;color:var(--text-primary)}
.notif-item.urgent{border-left:3px solid var(--danger)}
.notif-item-body{font-size:11.5px;color:var(--text-muted);margin-top:2px}
.notif-item-time{font-size:10.5px;color:var(--text-muted);margin-top:4px;font-family:var(--mono)}
.notif-item-removing{opacity:.55;pointer-events:none}
.notif-item-spinner{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted);margin-top:6px}
.notif-item-spinner .spinner{border-color:var(--border);border-top-color:var(--text-secondary)}
.notif-empty{padding:24px 16px;text-align:center;color:var(--text-muted);font-size:12px}
@media(max-width:768px){
  .mobile-menu-btn{display:inline-flex}
  .sidebar.mob-open{display:flex!important;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,.2)}
  .sidebar-overlay.mob-open{display:block}
  .topbar{padding:12px 16px;gap:8px}
  .content{padding:16px}
  .attendance-pill{width:auto}
  .attendance-pill .ap-label{display:none}
  .stats-grid,.stats-grid-3{grid-template-columns:repeat(2,1fr)}
  .dash-metrics{grid-template-columns:1fr}
  .payslip-emp-grid{grid-template-columns:1fr}
  .payslip-head{flex-wrap:wrap}
  .payslip-head>div:first-child,.payslip-head>div:last-child{flex:1 1 100%}
  /* Bigger tap targets on touch screens — desktop's tight xs/sm padding
     reads fine with a mouse but is hard to hit precisely with a finger. */
  .btn-xs{padding:7px 10px;font-size:12px}
  .btn-sm{padding:8px 13px;font-size:13px}
  .search-bar input{width:100%;max-width:220px}
}
@media(max-width:480px){
  .page-subtitle{display:none}
  /* Page action buttons (topActions) used to just disappear below 480px —
     wrap the whole right-side cluster onto its own row instead, so every
     action stays reachable on a phone rather than vanishing. */
  .topbar{flex-wrap:wrap;row-gap:10px}
  .topbar-cluster{width:100%;flex-wrap:wrap;justify-content:flex-start}
}

/* ── My Dashboard redesign ── */
/* Single merged identity/status banner — greeting on the left, avatar +
   name/role on the right, vertically centered together. No separate
   profile card underneath (see myDashboard()). */
.dash-banner{position:relative;overflow:hidden;border-radius:var(--rl);background:var(--navy);padding:22px 28px;margin-bottom:16px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dash-banner-eyebrow{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.dash-banner-greet{font-size:22px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px;color:#fff}
.dash-banner-date{font-size:12.5px;color:rgba(255,255,255,.62)}
.dash-banner-identity{display:flex;align-items:center;gap:12px;flex-shrink:0}
.dash-banner-identity .dbi-name{font-size:15px;font-weight:700;color:#fff}
.dash-banner-identity .dbi-meta{font-size:12px;color:rgba(255,255,255,.62);margin-top:2px}
/* Primary metrics: three equal-width neutral cards, no color-coded bars. */
.dash-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:16px}
.dash-metrics .stat-card{border-radius:12px}
.dash-metrics .stat-value{font-size:20px;font-weight:500}
/* Secondary info grid rows. */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.dash-card{border-radius:12px}
.dash-card .card-body{padding:16px}
@media(max-width:768px){.dash-grid{grid-template-columns:1fr}}
.pill{background:var(--surface-alt);border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:12px;color:var(--text-secondary);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pill b{color:var(--text-primary);font-family:var(--mono);font-weight:600}
.dot-status{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0}
.celebrate-banner{background:linear-gradient(90deg,var(--accent-light),#fff);border:1px solid var(--accent);border-radius:var(--rl);padding:12px 18px;margin-bottom:16px;display:flex;align-items:center;gap:12px;font-size:12.5px}
.row{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:flex-start}
.row:last-child{border-bottom:none}
.row-title{font-size:12.5px;font-weight:600;margin-bottom:2px}
.row-sub{font-size:11.5px;color:var(--text-muted);line-height:1.5}
.hol-date{font-family:var(--mono);font-size:11.5px;color:var(--text-secondary);font-weight:600;flex-shrink:0;text-align:right}
.empty{padding:24px 16px;text-align:center;color:var(--text-muted);font-size:12px}

/* ── Dark mode — toggled via toggleTheme() (store.js), applied as
   data-theme="dark" on <html> (see hr-management-system.html's inline
   pre-paint script). Same component classes throughout, just re-pointing
   the custom properties they already read from — no per-component dark
   variant needed. */
[data-theme="dark"]{
  --bg:#0F1420;--surface:#1A2133;--surface-alt:#242C42;--border:#323B52;
  --text-primary:#E8EAED;--text-secondary:#9BA3B5;--text-muted:#6B7386;
  --navy:#0A0F1C;--navy-hover:#1B2740;
  --accent-light:color-mix(in srgb,var(--accent) 22%,var(--surface));
  --danger-light:color-mix(in srgb,var(--danger) 20%,var(--surface));
  --info-light:color-mix(in srgb,var(--info) 20%,var(--surface));
  --success-light:color-mix(in srgb,var(--success) 20%,var(--surface));
  --warning:#FBBF24;--warning-light:color-mix(in srgb,var(--warning) 20%,var(--surface));
  --sh:0 1px 3px rgba(0,0,0,.4);--shm:0 4px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] tbody tr:hover td{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.65)}
[data-theme="dark"] .badge-purple{background:#3B2A5C;color:#C4A6FF}
[data-theme="dark"] code{background:#2A3348!important;color:var(--text-primary)}

/* ── Focus rings — :focus-visible only, so a mouse click doesn't show a
   ring a keyboard user actually needs (the :focus border-color on
   .form-input above stays as the click-and-keyboard indicator it always
   was; this adds the missing keyboard-specific ring everywhere else). */
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav-item:focus-visible,
.tab-item:focus-visible,.modal-close:focus-visible,.nav-section-label:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r);
}
.form-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ── A few genuinely-clickable elements that had no hover feedback at all
   (most buttons already get it via .btn-primary/.btn-ghost/.btn-danger's
   own :hover, applied regardless of which size class rides along). */
.avatar-ring:hover{border-color:var(--accent)}
/* Fixed light color, not var(--text-primary) — the sidebar itself is
   always the dark navy background (see .sidebar overrides above) regardless
   of the app-wide light/dark toggle, so a theme-dependent color here went
   dark-on-dark (invisible) in light mode instead of matching the sidebar's
   own always-light text. */
.nav-section-label:hover{color:rgba(255,255,255,.8)}

/* ── Back to top ── */
.back-to-top{position:fixed;bottom:24px;right:24px;width:40px;height:40px;border-radius:50%;
  background:var(--navy);color:#fff;border:none;cursor:pointer;box-shadow:var(--shm);
  display:flex;align-items:center;justify-content:center;z-index:400;transition:opacity .15s,transform .15s}
.back-to-top:hover{transform:translateY(-2px)}

/* ── Offline banner ── */
.offline-banner{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--warning);color:#fff;
  text-align:center;font-size:12.5px;font-weight:600;padding:8px 16px}

/* ── Skeleton loader — shown in mainContent (and the auth boot screen)
   while data is still in flight, instead of a blank flash. */
.skeleton{background:linear-gradient(90deg,var(--surface-alt) 25%,var(--border) 37%,var(--surface-alt) 63%);
  background-size:400% 100%;animation:skeletonShine 1.4s ease infinite;border-radius:var(--r)}
@keyframes skeletonShine{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skeleton-line{height:12px;margin-bottom:8px}
.skeleton-block{height:80px;margin-bottom:12px}

/* ── Spinner — inline, sits inside a button next to its label while an
   async action is in flight (see store.js's openModal()). White by default
   for the white-text-on-color buttons (btn-primary/btn-danger/btn-success);
   btn-ghost is dark text on a transparent background, so it gets the
   inverted (dark) spinner instead — same override as .save-status below. */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
.btn-ghost .spinner{border-color:var(--border);border-top-color:var(--text-secondary)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Autosave status pill (topbar) ── */
.save-status{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:5px;flex-shrink:0;transition:opacity .3s}
.save-status.saving{color:var(--text-secondary)}
.save-status.saved{color:var(--success)}
.save-status.failed{color:var(--danger)}
.save-status .spinner{border-color:var(--border);border-top-color:var(--text-secondary)}

/* ── Tooltips (filled/custom, not native title=) — put data-tip="..." on
   any icon-only element. CSS-only, no JS needed. */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%) translateY(2px);background:var(--text-primary);color:var(--surface);
  font-size:11px;font-weight:500;padding:5px 9px;border-radius:5px;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .12s,transform .12s;z-index:600}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Breadcrumb ── */
.breadcrumb{font-size:11px;color:var(--text-muted);margin-bottom:2px}
.breadcrumb .bc-sep{margin:0 4px}

/* ── Error / not-found screen ── */
.error-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 20px;color:var(--text-secondary)}
.error-screen .error-code{font-size:56px;font-weight:700;font-family:var(--mono);color:var(--border);line-height:1}
.error-screen h2{font-size:17px;color:var(--text-primary);margin:10px 0 6px}

/* ── Pagination ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;padding:14px;flex-wrap:wrap}
.page-btn{min-width:30px;height:30px;padding:0 8px;border-radius:var(--r);border:1.5px solid var(--border);
  background:var(--surface);color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .12s}
.page-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.page-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.page-btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Success / completion screen ── */
.success-screen{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 20px}
.success-check{width:64px;height:64px;border-radius:50%;background:var(--success-light);color:var(--success);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;animation:successPop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes successPop{0%{transform:scale(0)}80%{transform:scale(1.08)}100%{transform:scale(1)}}
.success-screen h3{font-size:16px;margin-bottom:4px}
.success-screen p{font-size:12.5px;color:var(--text-secondary)}
@media(max-width:768px){.dash-banner{flex-direction:column;align-items:flex-start;gap:14px}}