/* MFAH Colorful UI System
 * Shared visual language for desktop, mobile, login, and every operational module.
 */
:root{
  --mfah-primary:#059669;
  --mfah-primary-dark:#047857;
  --mfah-primary-deep:#064e3b;
  --mfah-primary-soft:#d1fae5;
  --mfah-primary-pale:#ecfdf5;
  --mfah-teal:#14b8a6;
  --mfah-teal-soft:#ccfbf1;
  --mfah-blue:#3b82f6;
  --mfah-blue-soft:#dbeafe;
  --mfah-amber:#f59e0b;
  --mfah-amber-soft:#fef3c7;
  --mfah-rose:#f43f5e;
  --mfah-rose-soft:#ffe4e6;
  --mfah-violet:#8b5cf6;
  --mfah-violet-soft:#ede9fe;
  --mfah-emerald:#10b981;
  --mfah-emerald-soft:#d1fae5;
  --mfah-page:#f1f5f9;
  --mfah-card:#fff;
  --mfah-text:#1e293b;
  --mfah-muted:#64748b;
  --mfah-faint:#94a3b8;
  --mfah-line:#e2e8f0;
  --mfah-radius:18px;
  --mfah-shadow:0 6px 22px rgba(15,23,42,.055);
  --mfah-space-1:4px;
  --mfah-space-2:8px;
  --mfah-space-3:12px;
  --mfah-space-4:16px;
  --mfah-space-5:24px;
  --mfah-focus:0 0 0 3px rgba(5,150,105,.18);
  --yudha:var(--mfah-primary);
  --yudha-2:var(--mfah-emerald);
  --yudha-3:#6ee7b7;
  --yudha-soft:var(--mfah-primary-soft);
  --bg:var(--mfah-page);
  --card:var(--mfah-card);
  --text:var(--mfah-text);
  --muted:var(--mfah-muted);
  --line:var(--mfah-line);
  --shadow:var(--mfah-shadow);
}

/* Reusable feedback and status language */
:where(a,button,input,select,textarea):focus-visible{outline:0!important;box-shadow:var(--mfah-focus)!important}
.status-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:5px 10px;border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:800;line-height:1}
.status-chip:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent)}
.status-chip.is-neutral{color:#64748b;background:#f1f5f9;border-color:#e2e8f0}
.status-chip.is-info{color:#2563eb;background:#eff6ff;border-color:#dbeafe}
.status-chip.is-pending{color:#b45309;background:#fffbeb;border-color:#fde68a}
.status-chip.is-success{color:#047857;background:#ecfdf5;border-color:#a7f3d0}
.status-chip.is-danger{color:#be123c;background:#fff1f2;border-color:#fecdd3}
.status-chip.is-violet{color:#6d28d9;background:#f5f3ff;border-color:#ddd6fe}

/* Notification center */
.notification-center{overflow:hidden!important;border:1px solid #dce8e2!important;border-radius:18px!important;box-shadow:0 24px 60px rgba(15,23,42,.18)!important}
.notification-center-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;background:linear-gradient(135deg,#fff,#f0fdf4);border-bottom:1px solid #e5eee9}
.notification-center-list{max-height:min(520px,70vh);overflow:auto;overscroll-behavior:contain}
.notification-item{border-bottom:1px solid #eef3f0}.notification-item:last-child{border-bottom:0}
.notification-item-button{display:flex;width:100%;gap:12px;padding:13px 16px;text-align:left;color:var(--mfah-text);background:#fff;border:0;transition:background .18s}
.notification-item-button:hover{background:#f8fdfb}.notification-item.is-unread .notification-item-button{background:linear-gradient(90deg,#effcf6,#fff)}
.notification-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:12px;font-size:17px}
.notification-icon.tone-blue{color:#2563eb;background:#dbeafe}.notification-icon.tone-rose{color:#e11d48;background:#ffe4e6}.notification-icon.tone-amber{color:#d97706;background:#fef3c7}.notification-icon.tone-emerald{color:#059669;background:#d1fae5}.notification-icon.tone-violet{color:#7c3aed;background:#ede9fe}
.notification-copy{display:block;min-width:0;flex:1}.notification-copy b{display:block;font-size:12px}.notification-copy>span:not(.d-flex){display:block;margin-top:3px;color:#64748b;font-size:11px;line-height:1.4}.notification-copy small{display:block;margin-top:5px;color:#94a3b8;font-size:10px}
.notification-unread-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#f43f5e;box-shadow:0 0 0 3px #ffe4e6}
.notification-empty{display:flex;min-height:210px;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:28px;color:#94a3b8;text-align:center}.notification-empty i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#059669;background:#d1fae5;font-size:22px}.notification-empty b{color:#334155}.notification-empty span{font-size:11px}

/* Compact data workspaces */
.data-table-shell{position:relative}.data-table-scroll{max-height:68vh;overflow:auto;overscroll-behavior:contain}
.table-compact th,.table-compact td{padding:11px 13px!important}.table-compact thead th{position:sticky;top:0;z-index:3;box-shadow:inset 0 -1px 0 var(--mfah-line)}
.table-compact .table-actions-sticky{position:sticky;right:0;z-index:2;background:#fff!important;box-shadow:-10px 0 18px -18px rgba(15,23,42,.65)}
.table-compact thead .table-actions-sticky{z-index:5;background:#f8fafc!important}.table-compact tbody tr:hover .table-actions-sticky{background:#f2fbf7!important}
[data-column-hidden="true"]{display:none!important}
.column-picker{min-width:220px;padding:10px}.column-picker label{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;color:#526174;font-size:12px;font-weight:650}.column-picker label:hover{background:#f0fdf4}
.filter-chip-list{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:-5px 0 16px}.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;font-size:11px;font-weight:700}.filter-chip i{opacity:.75}
.action-menu-btn{width:34px;height:34px;padding:0!important;display:inline-grid!important;place-items:center}
.table-action-menu{min-width:205px;padding:7px!important}.table-action-menu .dropdown-item,.table-action-menu form button{display:flex;width:100%;align-items:center;gap:9px;padding:9px 10px;border:0;color:#475569;background:transparent;text-align:left;font-size:12px;font-weight:650}.table-action-menu .dropdown-item i,.table-action-menu form button i{width:18px;color:#059669}.table-action-menu .is-danger,.table-action-menu .is-danger i{color:#dc2626!important}

/* Payroll workflow */
.payroll-workflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 20px;padding:17px 18px;background:#fff;border:1px solid var(--mfah-line);border-radius:16px;box-shadow:var(--mfah-shadow)}
.workflow-step{position:relative;display:flex;align-items:center;gap:11px;min-width:0;padding:3px 16px}.workflow-step:not(:last-child):after{content:"";position:absolute;left:calc(100% - 9px);top:50%;width:18px;height:2px;background:#dce5e1}
.workflow-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:12px;font-size:17px}.workflow-step b,.workflow-step small{display:block}.workflow-step b{color:#334155;font-size:12px}.workflow-step small{margin-top:2px;color:#94a3b8;font-size:10px}.workflow-count{margin-left:auto;color:#64748b;font-size:18px;font-weight:850}
.workflow-step.is-draft .workflow-icon{color:#64748b;background:#f1f5f9}.workflow-step.is-review .workflow-icon{color:#d97706;background:#fef3c7}.workflow-step.is-approved .workflow-icon{color:#2563eb;background:#dbeafe}.workflow-step.is-paid .workflow-icon{color:#059669;background:#d1fae5}

@media(max-width:767.98px){
  .payroll-workflow{grid-template-columns:1fr 1fr;padding:12px}.workflow-step{padding:8px}.workflow-step:after{display:none}.workflow-count{font-size:16px}
  .notification-center{position:fixed!important;top:70px!important;right:10px!important;left:10px!important;width:auto!important;max-width:none!important}
  .data-table-scroll{max-height:none}.table-compact .table-actions-sticky{position:static;box-shadow:none}
}

body.app-shell{
  color:var(--mfah-text);
  background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 55%,#e9eef5 100%) fixed!important;
  font-family:Inter,"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Application shell */
.app-sidebar{
  width:260px!important;
  padding:20px 14px!important;
  color:var(--mfah-text)!important;
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)!important;
  border-right:1px solid var(--mfah-line)!important;
  box-shadow:8px 0 28px rgba(15,23,42,.055)!important;
}
.app-main{margin-left:260px!important}
.sidebar-brand{
  min-height:64px;margin:0 0 18px;padding:7px 9px!important;
  color:var(--mfah-text)!important;background:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
}
.sidebar-logo-mark{
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;
  border-radius:12px;background:linear-gradient(145deg,var(--mfah-primary-deep),var(--mfah-primary));
  color:#fff;box-shadow:0 7px 16px rgba(5,150,105,.2);position:relative;overflow:hidden;
}
.sidebar-logo-mark:after{content:"";position:absolute;width:30px;height:30px;border:7px solid rgba(255,255,255,.1);border-radius:50%;right:-13px;top:-12px}
.sidebar-logo-mark span{position:relative;z-index:1;font-size:19px;line-height:1;font-weight:800;letter-spacing:-.08em}
.sidebar-title{color:#172033!important;font-size:20px;font-weight:800!important;letter-spacing:-.02em}
.sidebar-subtitle{color:#718096!important;font-size:8px;letter-spacing:.1em!important}
.sidebar-nav{gap:4px!important}
.sidebar-link,.sidebar-parent{
  min-height:44px;padding:11px 14px!important;border-radius:13px!important;
  color:#64748b!important;font-size:13px;font-weight:600!important;
  box-shadow:none!important;transition:background .2s,color .2s,transform .2s,box-shadow .2s!important;
}
.sidebar-link i,.sidebar-parent i,.sidebar-sublink i{color:#7b8a9e!important}
.sidebar-link:hover,.sidebar-parent:hover{
  color:var(--mfah-primary)!important;background:linear-gradient(90deg,var(--mfah-primary-soft),var(--mfah-primary-pale))!important;
  transform:translateX(3px)!important;
}
.sidebar-link.active,.sidebar-parent.active,.sidebar-group.open>.sidebar-parent{
  color:#fff!important;background:linear-gradient(90deg,var(--mfah-primary-dark),var(--mfah-emerald))!important;
  box-shadow:0 8px 20px rgba(5,150,105,.27)!important;
}
.sidebar-link.active i,.sidebar-parent.active i,.sidebar-group.open>.sidebar-parent i{color:#fff!important}
.sidebar-link.active:before,.sidebar-group.open>.sidebar-parent:before{display:none!important}
.sidebar-submenu{margin:5px 0 7px 23px!important;padding-left:9px!important;border-left:1px solid #cbd5e1!important}
.sidebar-sublink{min-height:37px;padding:8px 11px!important;color:#718096!important;border-radius:10px!important;font-weight:500!important}
.sidebar-sublink:hover,.sidebar-sublink.active{color:var(--mfah-primary-dark)!important;background:#ecfdf5!important}
.sidebar-sublink.active:before{background:var(--mfah-primary)!important}
.sidebar-footer{color:#718096!important;border-color:var(--mfah-line)!important}
.sidebar-footer-mark{color:var(--mfah-primary)!important;background:var(--mfah-primary-soft);border-color:#a7f3d0!important}
.sidebar-footer b{color:#334155}.sidebar-footer small{color:#94a3b8!important}

.app-topbar{
  min-height:68px;padding:10px 30px!important;color:#fff!important;
  background:linear-gradient(90deg,var(--mfah-primary-deep) 0%,var(--mfah-primary) 52%,var(--mfah-emerald) 100%)!important;
  border:0!important;box-shadow:0 5px 22px rgba(5,150,105,.28)!important;
}
.app-topbar-title{color:#fff!important;font-size:14px;font-weight:800!important}
.app-topbar .text-muted{color:rgba(255,255,255,.72)!important}
.app-menu-toggle,.app-icon-btn{
  color:var(--mfah-primary-deep)!important;background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(255,255,255,.72)!important;border-radius:12px!important;
  backdrop-filter:blur(8px);
  box-shadow:0 5px 14px rgba(6,78,59,.16)!important;
}
.app-menu-toggle i,.app-icon-btn i{color:var(--mfah-primary-deep)!important;opacity:1!important;visibility:visible!important}
.app-menu-toggle:hover,.app-icon-btn:hover,.app-menu-toggle:focus-visible,.app-icon-btn:focus-visible{color:var(--mfah-primary-dark)!important;background:#fff!important;border-color:#d1fae5!important}
.app-menu-toggle:hover i,.app-icon-btn:hover i,.app-menu-toggle:focus-visible i,.app-icon-btn:focus-visible i{color:var(--mfah-primary-dark)!important}
.app-user-trigger{color:#fff!important;border-left:1px solid rgba(255,255,255,.2)!important}
.app-user-trigger:hover,.app-user-trigger[aria-expanded=true]{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.2)!important}
.app-user-avatar{color:#fff!important;background:linear-gradient(135deg,#059669,#34d399)!important;border:2px solid rgba(255,255,255,.27)}
.app-user-name{color:#fff!important}.app-user-role,.app-user-chevron{color:rgba(255,255,255,.72)!important}
.app-content{padding:30px 32px 40px!important}
.app-content:before{display:none!important}

/* Shared page hierarchy */
.page-heading{align-items:flex-end!important;margin-bottom:26px!important}
.page-heading h1,.app-content>h2,.app-content>h3{
  color:var(--mfah-text)!important;font-weight:800!important;letter-spacing:-.025em!important;
}
.page-heading h1{font-size:28px!important;background:linear-gradient(90deg,#1e293b,var(--mfah-primary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.page-eyebrow{color:var(--mfah-emerald)!important;letter-spacing:.12em!important}
.page-heading p{color:var(--mfah-faint)!important}
.dashboard-date{padding:8px 14px;color:var(--mfah-muted)!important;background:#fff;border:1px solid var(--mfah-line);border-radius:10px}

/* Universal cards and panels */
.cardx,.enterprise-card,.card,.modal-content,.modal-section,.summary-card,.filter-card{
  color:var(--mfah-text);background:#fff!important;border:1px solid var(--mfah-line)!important;
  border-radius:var(--mfah-radius)!important;box-shadow:var(--mfah-shadow)!important;
}
.cardx,.enterprise-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.cardx:hover,.enterprise-card:hover{transform:translateY(-2px);border-color:#d4e4dc!important;box-shadow:0 14px 34px rgba(15,23,42,.075)!important}
.card-header,.card-footer{background:#fbfcfd!important;border-color:#edf2f7!important}
.modal-content{border-radius:20px!important;box-shadow:0 28px 80px rgba(15,23,42,.18)!important}
.modal-header{background:linear-gradient(135deg,#fff,#f6fbf8);border-radius:20px 20px 0 0}
.modal-title{font-weight:800!important}.modal-section,.summary-card{padding:18px!important}
.section-title{color:#334155;font-weight:800!important}

/* Colorful generic statistic cards */
.cardx.stat,.enterprise-card.stat{position:relative;overflow:hidden;min-height:112px;border-color:#dbeafe!important}
.cardx.stat:before,.enterprise-card.stat:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--mfah-blue),#60a5fa)}
.row>*:nth-child(6n+2)>.stat:before{background:linear-gradient(90deg,var(--mfah-teal),#2dd4bf)}
.row>*:nth-child(6n+3)>.stat:before{background:linear-gradient(90deg,var(--mfah-amber),#fbbf24)}
.row>*:nth-child(6n+4)>.stat:before{background:linear-gradient(90deg,var(--mfah-rose),#fb7185)}
.row>*:nth-child(6n+5)>.stat:before{background:linear-gradient(90deg,var(--mfah-violet),#a78bfa)}
.row>*:nth-child(6n+6)>.stat:before{background:linear-gradient(90deg,var(--mfah-emerald),#34d399)}
.stat .iconbox,.stat-icon,.iconbox{width:44px;height:44px;border-radius:13px!important;color:var(--mfah-primary);background:linear-gradient(135deg,var(--mfah-primary-soft),var(--mfah-primary-pale))}

/* Controls */
.btn{border-radius:11px!important;font-weight:700!important;transition:transform .18s,box-shadow .18s,background .18s!important}
.app-shell .app-content .btn{display:inline-flex;align-items:center;justify-content:center;gap:.42rem;text-align:center;vertical-align:middle;line-height:1.2}
.app-shell .app-content .btn>i{flex:0 0 auto;line-height:1}
.btn:hover{transform:translateY(-1px)}
.btn-primary,.btn-yudha{
  color:#fff!important;background:linear-gradient(135deg,var(--mfah-primary-dark),var(--mfah-emerald))!important;
  border-color:var(--mfah-primary)!important;box-shadow:0 6px 17px rgba(5,150,105,.24)!important;
}
.btn-primary:hover,.btn-yudha:hover{background:linear-gradient(135deg,#036b52,#059669)!important;box-shadow:0 9px 22px rgba(5,150,105,.31)!important}
.btn-outline-primary{color:var(--mfah-primary)!important;border-color:#6ee7b7!important}.btn-outline-primary:hover{color:#fff!important;background:var(--mfah-primary)!important}
.btn-light{background:#f8fafc!important;border-color:var(--mfah-line)!important}.btn-light:hover{color:var(--mfah-primary)!important;background:var(--mfah-primary-pale)!important}
.text-primary{color:var(--mfah-primary)!important}.bg-primary,.text-bg-primary{background:var(--mfah-primary)!important}
.bg-primary-subtle{background:var(--mfah-primary-soft)!important}.text-success{color:var(--mfah-primary)!important}
.form-label{color:#526174!important;font-weight:700!important}
.form-control,.form-select,.input-group-text{min-height:43px;border-color:#dce5ef!important;border-radius:11px!important;background-color:#fbfcfe!important}
.form-control:focus,.form-select:focus{background:#fff!important;border-color:#6ee7b7!important;box-shadow:0 0 0 3px rgba(5,150,105,.11)!important}
.form-check-input:checked{background-color:var(--mfah-primary);border-color:var(--mfah-primary)}

/* Tables and navigation */
.table-responsive{scrollbar-color:#cbd5e1 transparent}
.table{margin-bottom:0;color:#475569}
.table th,.table-enterprise th{padding:14px 18px!important;color:#7c8a9d!important;background:#f8fafc!important;border-color:var(--mfah-line)!important;font-size:10px!important;letter-spacing:.065em!important;text-transform:uppercase!important}
.table td,.table-enterprise td{padding:15px 18px!important;border-color:#eef2f7!important;vertical-align:middle!important}
.table tbody tr{transition:background .18s}.table tbody tr:hover{background:linear-gradient(90deg,#f8fafc,#f2fbf7)!important}
.badge{border-radius:999px!important;padding:.43rem .68rem!important}
.nav-pills{gap:7px}.nav-pills .nav-link{border-radius:12px!important;color:#64748b!important;font-weight:700!important}
.nav-pills .nav-link.active{color:#fff!important;background:linear-gradient(135deg,var(--mfah-primary-dark),var(--mfah-emerald))!important;box-shadow:0 6px 16px rgba(5,150,105,.2)}
.pagination{gap:5px}.page-link{border-radius:9px!important;color:#526174!important}.page-item.active .page-link{color:#fff!important;background:var(--mfah-primary)!important;border-color:var(--mfah-primary)!important}
.dropdown-menu{border-radius:14px!important}.dropdown-item{border-radius:8px}.dropdown-item:hover{color:var(--mfah-primary-dark);background:var(--mfah-primary-pale)!important}
.alert{border-radius:14px!important}.progress{border-radius:999px;background:#e8eef3}.progress-bar{background:linear-gradient(90deg,var(--mfah-primary),var(--mfah-teal))}

/* Reference dashboard */
.dashboard-kpi-grid{gap:18px!important;margin-bottom:28px!important}
.midnight-kpi{
  display:block!important;min-height:180px!important;padding:22px!important;background:#fff!important;
  border:1px solid var(--tone-soft,var(--mfah-blue-soft))!important;border-radius:20px!important;
  box-shadow:0 5px 20px rgba(15,23,42,.04)!important;transition:transform .3s,box-shadow .3s!important;
}
.midnight-kpi:hover{transform:translateY(-5px);box-shadow:0 18px 38px color-mix(in srgb,var(--tone) 15%,transparent)!important}
.midnight-kpi:before{height:4px!important;background:linear-gradient(90deg,var(--tone),var(--tone-2))!important}
.midnight-kpi-icon{width:44px!important;height:44px!important;margin-bottom:15px;border-radius:14px!important;background:linear-gradient(135deg,var(--tone-soft),#fff)!important;color:var(--tone)!important;font-size:21px!important}
.midnight-kpi-copy{display:block!important;min-height:0!important}.midnight-kpi-label{margin-bottom:7px;color:#475569!important;font-size:13px!important}
.midnight-kpi-value{margin:0 0 7px!important;color:var(--tone)!important;font-size:30px!important;background:linear-gradient(90deg,var(--tone-deep,var(--tone)),var(--tone));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.midnight-kpi-value.is-money{font-size:21px!important}.midnight-kpi-meta{margin:0!important;padding:0!important;border:0!important;color:#a1adbd!important;font-size:10px!important}
.midnight-kpi.tone-blue{--tone:#3b82f6;--tone-2:#60a5fa;--tone-soft:#dbeafe;--tone-deep:#1e40af}
.midnight-kpi.tone-teal{--tone:#14b8a6;--tone-2:#2dd4bf;--tone-soft:#ccfbf1;--tone-deep:#0f766e}
.midnight-kpi.tone-amber{--tone:#f59e0b;--tone-2:#fbbf24;--tone-soft:#fef3c7;--tone-deep:#b45309}
.midnight-kpi.tone-red,.midnight-kpi.tone-rose{--tone:#f43f5e;--tone-2:#fb7185;--tone-soft:#ffe4e6;--tone-deep:#be123c}
.midnight-kpi.tone-violet{--tone:#8b5cf6;--tone-2:#a78bfa;--tone-soft:#ede9fe;--tone-deep:#5b21b6}
.midnight-kpi.tone-emerald{--tone:#10b981;--tone-2:#34d399;--tone-soft:#d1fae5;--tone-deep:#047857}
.midnight-panel{border-radius:20px!important;box-shadow:var(--mfah-shadow)!important}
.midnight-panel:hover{box-shadow:0 10px 30px rgba(15,23,42,.07)!important}
.midnight-panel-header{padding:22px 26px!important}.midnight-panel-header h2{font-size:16px!important}.midnight-panel-header p{font-size:11px!important}
.panel-chip{color:var(--mfah-primary)!important;background:var(--mfah-primary-soft)!important;border:0!important;border-radius:10px!important}
.panel-count{color:#fff!important;background:linear-gradient(135deg,var(--mfah-primary-dark),var(--mfah-emerald))!important;border:0!important;border-radius:50%!important;box-shadow:0 4px 12px rgba(5,150,105,.25)}
.dashboard-chart-wrap{height:300px!important;padding:20px 26px 24px!important}
.pending-request-list{padding:8px 20px 18px!important}.pending-request{padding:13px 5px!important}.pending-request:hover{color:var(--mfah-primary)!important;background:#fbfefc}
.midnight-empty i{color:var(--mfah-primary)!important;background:var(--mfah-primary-soft);width:62px;height:62px;display:grid;place-items:center;border-radius:50%;margin-bottom:9px;box-shadow:0 8px 22px rgba(5,150,105,.14)}
.panel-link{padding:8px 13px;color:var(--mfah-primary)!important;background:var(--mfah-primary-soft);border-radius:10px!important}.panel-link:hover{background:#a7f3d0}
.employee-compact>span{background:linear-gradient(135deg,var(--mfah-primary),var(--mfah-teal))!important}
.activity-badge{color:#0f766e!important;background:linear-gradient(135deg,var(--mfah-teal-soft),var(--mfah-emerald-soft))!important;border-radius:999px!important;padding:5px 11px!important}

/* Mobile: same green identity as desktop, with colorful functional accents. */
body.mobile-body{
  --mobile-navy:var(--mfah-primary-deep);--mobile-navy-soft:var(--mfah-primary-dark);
  --mobile-blue:var(--mfah-primary);--mobile-blue-dark:var(--mfah-primary-dark);
  --mobile-teal:var(--mfah-teal);--mobile-bg:var(--mfah-page);--mobile-card:#fff;
  --mobile-text:var(--mfah-text);--mobile-muted:var(--mfah-muted);--mobile-line:#dce9e2;
  background:
    radial-gradient(circle at 86px 40px,rgba(110,231,183,.19),transparent 145px),
    linear-gradient(180deg,var(--mfah-primary-deep) 0%,var(--mfah-primary) 230px,var(--mfah-page) 230px)!important;
}
body.mobile-body:before{background:linear-gradient(135deg,transparent 50%,rgba(52,211,153,.13) 50%,transparent 78%)!important}
body.mobile-body .hero-card,body.mobile-body .employee-profile-hero{
  border-color:rgba(110,231,183,.42)!important;
  background:
    radial-gradient(circle at 112% -22%,rgba(20,184,166,.72),transparent 52%),
    linear-gradient(135deg,var(--mfah-primary-deep) 0%,var(--mfah-primary-dark) 56%,var(--mfah-primary) 100%)!important;
  box-shadow:0 16px 38px rgba(6,78,59,.2)!important;
}
body.mobile-body .mobile-card,body.mobile-body .profile-card,body.mobile-body .profile-accordion-item{border-color:#dce9e2!important;box-shadow:0 8px 24px rgba(15,31,58,.06)!important}
body.mobile-body .section-title,body.mobile-body .section-title span{color:var(--mfah-primary-dark)!important}
body.mobile-body .page-header h1{display:flex;align-items:center;gap:8px}body.mobile-body .page-header h1>i{color:#6ee7b7;font-size:17px}
body.mobile-body .mobile-home-brand>span{background:linear-gradient(135deg,var(--mfah-teal),var(--mfah-emerald));box-shadow:0 5px 14px rgba(16,185,129,.28)}
body.mobile-body .status-pill{color:#047857!important;background:var(--mfah-primary-soft)!important}

/* Color-coded shortcuts */
body.mobile-body .quick-card{overflow:hidden;border-color:#e2e8f0!important}
body.mobile-body .quick-card.primary,body.mobile-body .quick-card.mobile-action-attendance{border-color:var(--mfah-primary)!important;background:linear-gradient(135deg,var(--mfah-primary-dark),var(--mfah-emerald))!important}
.mobile-body .quick-card.mobile-action-history i{color:#0f766e!important;background:var(--mfah-teal-soft)!important}
.mobile-body .quick-card.mobile-action-payroll i{color:#2563eb!important;background:#dbeafe!important}
.mobile-body .quick-card.mobile-action-kasbon i{color:#b45309!important;background:var(--mfah-amber-soft)!important}
.mobile-body .quick-card.mobile-action-broadcast i{color:#7c3aed!important;background:var(--mfah-violet-soft)!important}
.mobile-body .quick-card.mobile-action-profile i{color:#e11d48!important;background:var(--mfah-rose-soft)!important}
.mobile-body .quick-card.mobile-action-history b{color:#0f766e}.mobile-body .quick-card.mobile-action-payroll b{color:#2563eb}
.mobile-body .quick-card.mobile-action-kasbon b{color:#b45309}.mobile-body .quick-card.mobile-action-broadcast b{color:#7c3aed}.mobile-body .quick-card.mobile-action-profile b{color:#e11d48}
.mobile-body .quick-badge{position:absolute;top:8px;right:8px;z-index:2;min-width:20px;height:20px;padding:0 6px;border:2px solid #fff;border-radius:999px;background:linear-gradient(135deg,#e11d48,#fb7185);color:#fff;font-size:10px;font-style:normal;font-weight:900;line-height:16px;text-align:center;box-shadow:0 4px 10px rgba(225,29,72,.25)}

/* Rich notification icons */
.mobile-body .notice-icon{color:var(--mfah-primary)!important;background:var(--mfah-primary-soft)!important;box-shadow:inset 0 0 0 1px rgba(5,150,105,.08)}
.mobile-body .notice-icon-broadcast{color:#7c3aed!important;background:var(--mfah-violet-soft)!important}
.mobile-body .notice-icon-payroll{color:#2563eb!important;background:#dbeafe!important}

/* Payroll privacy toggle */
body.mobile-body .money-visibility-toggle{
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  max-width:42px!important;max-height:42px!important;padding:0!important;display:grid!important;
  place-items:center!important;flex:0 0 42px!important;overflow:hidden!important;white-space:nowrap!important;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:50%!important;
  background:rgba(255,255,255,.13);color:#fff;cursor:pointer;
  font-size:0!important;line-height:1!important;appearance:none!important;-webkit-appearance:none!important;
  box-shadow:0 6px 16px rgba(6,78,59,.14);backdrop-filter:blur(8px);
  transition:transform .18s ease,background .18s ease;
}
body.mobile-body .money-visibility-toggle:active{transform:scale(.96)}
body.mobile-body .money-visibility-toggle i{display:block!important;margin:0!important;font-size:18px!important;line-height:1!important}
body.mobile-body .money-visibility-toggle[aria-pressed="true"]{background:rgba(255,255,255,.23)}
body.mobile-body .payslip-hero-controls{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 58px}
body.mobile-body [data-payroll-money]{font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* Bottom navigation: Broadcast replaces Home; badges represent unread items. */
body.mobile-body .mobile-bottom-nav{border-color:#d9e7df!important;box-shadow:0 14px 38px rgba(6,78,59,.17)!important}
.mobile-body .mobile-bottom-nav a i{width:32px;height:27px;display:grid!important;place-items:center;margin:0 auto 3px!important;border-radius:9px;font-size:17px!important}
.mobile-body .mobile-bottom-nav .nav-broadcast i{color:#7c3aed;background:var(--mfah-violet-soft)}
.mobile-body .mobile-bottom-nav .nav-attendance i{color:#047857;background:var(--mfah-primary-soft)}
.mobile-body .mobile-bottom-nav .nav-payroll i{color:#2563eb;background:#dbeafe}
.mobile-body .mobile-bottom-nav .nav-kasbon i{color:#b45309;background:var(--mfah-amber-soft)}
.mobile-body .mobile-bottom-nav .nav-profile i{color:#e11d48;background:var(--mfah-rose-soft)}
.mobile-body .mobile-bottom-nav a.active{color:var(--mfah-primary-dark)!important;background:var(--mfah-primary-soft)!important;font-weight:800}
.mobile-body .mobile-bottom-nav a.active i{color:#fff!important;background:linear-gradient(135deg,var(--mfah-primary-dark),var(--mfah-emerald))!important;box-shadow:0 4px 10px rgba(5,150,105,.2)}
.mobile-body .mobile-bottom-nav a em{top:0!important;right:12%!important;min-width:19px!important;height:19px!important;padding:0 5px!important;border:2px solid #fff;background:linear-gradient(135deg,#e11d48,#fb7185)!important;line-height:15px!important;box-shadow:0 3px 9px rgba(225,29,72,.25)}

.mobile-body .profile-avatar{background:linear-gradient(135deg,var(--mfah-primary-deep),var(--mfah-primary))!important}
.mobile-body .employee-profile-hero:before{background:linear-gradient(90deg,var(--mfah-primary),var(--mfah-teal))!important}
.mobile-body .profile-accordion-icon{color:var(--mfah-primary)!important;background:var(--mfah-primary-soft)!important}
.mobile-body .profile-save-btn{background:linear-gradient(135deg,var(--mfah-primary-dark),var(--mfah-emerald))!important}
.mobile-body .attendance-topbar,.mobile-body.attendance-screen .mobile-bottom-nav{background:linear-gradient(90deg,var(--mfah-primary-deep),var(--mfah-primary))!important}
.mobile-body .flow-action:nth-child(2) i{color:#2563eb!important;background:#dbeafe!important}.mobile-body .flow-action:nth-child(3) i{color:#b45309!important;background:var(--mfah-amber-soft)!important}.mobile-body .flow-action:nth-child(4) i{color:#7c3aed!important;background:var(--mfah-violet-soft)!important}

/* Login */
body:has(.login-shell){background:linear-gradient(135deg,#f8fafc,#e9f4ef)!important}
.login-shell{border-color:#d8e8e0!important;border-radius:22px!important;box-shadow:0 28px 80px rgba(6,78,59,.17)!important}
.brand-panel{background:linear-gradient(145deg,var(--mfah-primary-deep) 0%,#063d31 72%)!important}
.brand-panel:after{border-color:#34d399!important}.brand-copy h1 span,.benefit-icon{color:#6ee7b7!important}
.benefit-icon{border-color:rgba(110,231,183,.38)!important;background:rgba(16,185,129,.16)!important}
.form-kicker{color:var(--mfah-primary)!important}.input-row{border-radius:11px!important}.input-row:focus-within{border-color:var(--mfah-primary)!important;box-shadow:0 0 0 3px rgba(5,150,105,.12)!important}
.btn-login{border-radius:12px!important;background:linear-gradient(135deg,var(--mfah-primary-dark),var(--mfah-emerald))!important;box-shadow:0 12px 24px rgba(5,150,105,.23)!important}

@media(min-width:1500px){.dashboard-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media(min-width:1200px) and (max-width:1499.98px){.dashboard-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(min-width:992px){
  .sidebar-compact .app-sidebar{width:84px!important}.sidebar-compact .app-main{margin-left:84px!important}
  .sidebar-compact .sidebar-brand{padding:10px 0!important}
  .sidebar-compact .sidebar-logo-mark{width:42px;height:42px;flex-basis:42px}
  .sidebar-compact .sidebar-link:hover:after,.sidebar-compact .sidebar-parent:hover:after{background:var(--mfah-primary-deep)!important}
}
@media(max-width:991.98px){
  .app-sidebar{width:280px!important}.app-main{margin-left:0!important}.app-content{padding:22px 16px 32px!important}
  .app-topbar{padding:10px 15px!important}.page-heading{align-items:flex-start!important}.page-heading-actions{width:100%}
  .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:575.98px){
  .app-content{padding:17px 12px 28px!important}.page-heading h1{font-size:23px!important}
  .dashboard-kpi-grid{gap:10px!important}.midnight-kpi{min-height:165px!important;padding:15px!important}.midnight-kpi-value{font-size:24px!important}
  .midnight-kpi-value.is-money{font-size:16px!important}.midnight-panel-header{padding:16px!important}.dashboard-chart-wrap{height:270px!important;padding:12px!important}
  .table th,.table td{padding:12px 14px!important}.login-shell{border-radius:16px!important}
}

@media(max-width:1199.98px){.dashboard-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){.dashboard-quick-actions{grid-template-columns:1fr;gap:8px;margin-top:0}.app-command-trigger{width:38px;padding:0;justify-content:center}.dashboard-role-chip{order:-1}}
html[data-theme="dark"] .dashboard-quick-actions>a{background:#14201c;border-color:#293a33;color:#e5eee9}html[data-theme="dark"] .dashboard-role-chip{background:#20352d;border-color:#315546;color:#6ee7b7}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Workspace UX: command palette, contextual help and display preferences */
.app-command-trigger{display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 10px;border:1px solid rgba(255,255,255,.25)!important;border-radius:11px!important;background:rgba(255,255,255,.13)!important;color:#fff!important;font-size:12px;font-weight:700}.app-command-trigger kbd{padding:2px 6px;border:1px solid rgba(255,255,255,.22);border-radius:6px;background:rgba(0,0,0,.12);color:#d1fae5;font-size:9px}.app-command-trigger:hover{background:rgba(255,255,255,.22)!important}
.dashboard-role-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid #bbdfce;border-radius:10px;background:#ecfdf5;color:#047857;font-size:11px;font-weight:800}.dashboard-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:-8px 0 22px}.dashboard-quick-actions>a{display:flex;align-items:center;gap:11px;min-width:0;padding:13px 14px;border:1px solid #dce8e1;border-radius:14px;background:#fff;color:#1e293b;text-decoration:none;box-shadow:0 5px 16px rgba(15,45,35,.04);transition:.18s}.dashboard-quick-actions>a:hover{transform:translateY(-2px);border-color:#a7d8c0;box-shadow:0 10px 24px rgba(5,150,105,.1)}.dashboard-quick-actions>a>span{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:11px;background:#d1fae5;color:#047857}.dashboard-quick-actions>a>div{display:grid;min-width:0;flex:1}.dashboard-quick-actions b{font-size:12px}.dashboard-quick-actions small{overflow:hidden;color:#7b899b;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.dashboard-quick-actions>a>i{color:#94a3b8}
.ux-overlay[hidden]{display:none!important}.ux-overlay{position:fixed;inset:0;z-index:1090;display:grid;place-items:start center;padding:9vh 16px 24px;opacity:0;transition:opacity .18s ease}.ux-overlay.is-open{opacity:1}.ux-overlay-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(6,24,20,.54);backdrop-filter:blur(5px)}body.ux-overlay-open{overflow:hidden}
.swal2-container{z-index:2200!important}
.command-palette,.ux-panel{position:relative;z-index:1;width:min(660px,100%);overflow:hidden;border:1px solid #d9e7df;border-radius:20px;background:#fff;box-shadow:0 30px 80px rgba(4,47,37,.27);transform:translateY(-12px) scale(.985);transition:transform .18s ease}.ux-overlay.is-open .command-palette,.ux-overlay.is-open .ux-panel{transform:none}
.command-input-wrap{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid #e6eee9}.command-input-wrap>i{color:var(--mfah-primary);font-size:20px}.command-input-wrap input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#172033;font-size:16px;font-weight:600}.command-input-wrap kbd{padding:4px 8px;border:1px solid #d8e3dc;border-radius:7px;background:#f4f8f6;color:#64748b;font-size:10px}.command-palette-head{display:flex;justify-content:space-between;padding:12px 18px 7px;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.07em}.command-palette-head small{text-transform:none;letter-spacing:0}.command-results{max-height:410px;overflow:auto;padding:5px 9px 12px}.command-result{display:flex;align-items:center;gap:12px;padding:11px;border-radius:12px;color:#1e293b;text-decoration:none}.command-result:hover,.command-result.active{background:#ecfdf5;color:#047857}.command-result-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:11px;background:#e8f7f0;color:#059669}.command-result-copy{display:grid;min-width:0;flex:1}.command-result-copy b{font-size:13px}.command-result-copy small{overflow:hidden;color:#7b899b;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.command-result-enter{opacity:.4}.command-palette-empty{display:grid;place-items:center;gap:8px;padding:40px;color:#94a3b8}.command-palette-empty i{font-size:25px}
.ux-panel{width:min(470px,100%);padding:20px}.ux-panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #e5ece8}.ux-panel-head>div{display:grid;grid-template-columns:42px 1fr;column-gap:11px;align-items:center}.ux-panel-head .ux-panel-icon{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#d1fae5;color:#047857;font-size:18px}.ux-panel-icon.is-help{background:#dbeafe;color:#2563eb}.ux-panel-head b{font-size:15px}.ux-panel-head small{color:#849187;font-size:10px}.ux-panel-head>button{width:34px;height:34px;border:0;border-radius:10px;background:#f1f5f3;color:#526174}.ux-setting-group{margin-top:18px}.ux-setting-group>label{display:block;margin-bottom:8px;color:#475569;font-size:11px;font-weight:800}.ux-segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;padding:4px;border-radius:12px;background:#edf3ef}.ux-segmented button{min-height:38px;border:0;border-radius:9px;background:transparent;color:#64748b;font-size:11px;font-weight:700}.ux-segmented button.active{background:#fff;color:#047857;box-shadow:0 3px 10px rgba(15,45,35,.1)}.ux-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:13px;border:1px solid #e0e9e3;border-radius:12px}.ux-toggle-row span{display:grid}.ux-toggle-row b{font-size:12px}.ux-toggle-row small{color:#849187;font-size:9px}.ux-toggle-row input{position:absolute;opacity:0}.ux-toggle-row>i{position:relative;width:42px;height:24px;border-radius:99px;background:#cbd5e1;transition:.18s}.ux-toggle-row>i:after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.15);transition:.18s}.ux-toggle-row input:checked+i{background:#10b981}.ux-toggle-row input:checked+i:after{transform:translateX(18px)}.ux-help-lead{margin:17px 0;color:#475569;font-size:12px;line-height:1.65}.ux-help-list{display:grid;gap:8px}.ux-help-list>div{display:flex;gap:9px;padding:10px 11px;border-radius:11px;background:#f4f8f6;color:#526174;font-size:11px}.ux-help-list i{color:#10b981}
html[data-conceal-money="true"] .is-money,html[data-conceal-money="true"] .money-sensitive,html[data-conceal-money="true"] [data-payroll-money]{filter:blur(7px);user-select:none;pointer-events:none}
html[data-density="compact"] .app-content{padding-top:18px!important}html[data-density="compact"] .midnight-kpi{min-height:145px!important;padding:16px!important}html[data-density="compact"] .table>:not(caption)>*>*{padding-top:9px!important;padding-bottom:9px!important}html[data-density="compact"] .mobile-card{padding:14px!important;margin-bottom:10px!important}
html[data-theme="dark"] body.app-shell,html[data-theme="dark"] body.mobile-body{background:#0c1512!important;color:#e5eee9!important}html[data-theme="dark"] .app-sidebar,html[data-theme="dark"] .midnight-panel,html[data-theme="dark"] .midnight-kpi,html[data-theme="dark"] .table-wrap,html[data-theme="dark"] .mobile-card,html[data-theme="dark"] .profile-card,html[data-theme="dark"] .profile-accordion-item,html[data-theme="dark"] .ux-panel,html[data-theme="dark"] .command-palette{background:#14201c!important;border-color:#293a33!important;color:#e5eee9!important}html[data-theme="dark"] .page-heading h1,html[data-theme="dark"] .midnight-panel h2,html[data-theme="dark"] .midnight-kpi-value,html[data-theme="dark"] .section-title,html[data-theme="dark"] .command-input-wrap input,html[data-theme="dark"] .ux-panel b{color:#edf7f2!important}html[data-theme="dark"] .midnight-table,html[data-theme="dark"] .midnight-table td,html[data-theme="dark"] .midnight-table th{color:#dbe8e1!important;background:transparent!important;border-color:#2b3c35!important}html[data-theme="dark"] .command-input-wrap,html[data-theme="dark"] .ux-panel-head{border-color:#2b3c35}html[data-theme="dark"] .command-result{color:#dbe8e1}html[data-theme="dark"] .command-result:hover,html[data-theme="dark"] .command-result.active{background:#20352d}html[data-theme="dark"] .ux-segmented,html[data-theme="dark"] .ux-help-list>div{background:#1b2c26}html[data-theme="dark"] .ux-segmented button.active{background:#2a4038}html[data-theme="dark"] .mobile-bottom-nav{background:#14201c!important;border-color:#293a33!important}
@media(prefers-color-scheme:dark){html[data-theme="system"] body.app-shell,html[data-theme="system"] body.mobile-body{background:#0c1512!important;color:#e5eee9!important}html[data-theme="system"] .ux-panel,html[data-theme="system"] .command-palette{background:#14201c;color:#e5eee9;border-color:#293a33}html[data-theme="system"] .command-input-wrap input,html[data-theme="system"] .ux-panel b{color:#edf7f2}}

/* Reusable mobile bottom sheet. Camera capture modal is deliberately excluded. */
.mobile-utility-actions{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:42;display:flex;gap:7px}.mobile-utility-actions button{width:35px;height:35px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:11px;background:rgba(6,78,59,.72);color:#fff;box-shadow:0 5px 16px rgba(6,78,59,.18);backdrop-filter:blur(8px)}.mobile-body.attendance-screen .mobile-utility-actions{display:none}
@media(max-width:767.98px){.ux-overlay.is-mobile-sheet{place-items:end center;padding:0}.ux-overlay.is-mobile-sheet .ux-panel{width:100%;max-height:min(82vh,720px);overflow:auto;padding:12px 18px calc(20px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:24px 24px 0 0;transform:translateY(100%)}.ux-overlay.is-mobile-sheet.is-open .ux-panel{transform:none}.mobile-sheet-handle{display:block;width:42px;height:4px;margin:0 auto 12px;border-radius:99px;background:#cbd5e1}.mobile-body .modal:not(.attendance-capture-modal) .modal-dialog{align-items:flex-end;min-height:100%;margin:0}.mobile-body .modal:not(.attendance-capture-modal) .modal-content{max-height:86vh;border:0;border-radius:24px 24px 0 0}.mobile-body .modal:not(.attendance-capture-modal) .modal-body{overflow:auto}.mobile-body .modal:not(.attendance-capture-modal) .modal-header:before{content:'';position:absolute;top:7px;left:50%;width:42px;height:4px;transform:translateX(-50%);border-radius:99px;background:#cbd5e1}.mobile-body .modal:not(.attendance-capture-modal) .modal-header{position:relative;padding-top:20px}}

/* Quality pass: accessible focus, feedback, employee activity and payroll readiness */
.skip-link{position:fixed;top:8px;left:8px;z-index:3000;padding:9px 13px;border-radius:9px;background:#fff;color:#064e3b;font-weight:800;transform:translateY(-150%);transition:.15s}.skip-link:focus{transform:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(14,165,233,.55)!important;outline-offset:2px!important}.btn,.dropdown-item,.app-icon-btn{min-height:40px}.app-network-status{position:fixed;left:50%;bottom:24px;z-index:2500;max-width:calc(100vw - 28px);padding:10px 16px;transform:translateX(-50%);border-radius:12px;background:#991b1b;color:#fff;font-size:12px;font-weight:800;box-shadow:0 12px 28px rgba(127,29,29,.28)}form[aria-busy="true"]{pointer-events:none;opacity:.78}.submit-spinner{vertical-align:-2px}
.onboarding-panel{text-align:center}.onboarding-progress{display:flex;justify-content:center;gap:6px}.onboarding-progress i{width:22px;height:4px;border-radius:99px;background:#d8e3dc}.onboarding-progress i.active{background:#10b981}.onboarding-visual{width:70px;height:70px;display:grid;place-items:center;margin:22px auto 16px;border-radius:22px;background:linear-gradient(135deg,#d1fae5,#ccfbf1);color:#047857;font-size:31px}.onboarding-panel h2{margin:0 0 8px;font-size:20px}.onboarding-panel [data-onboarding-content] p{max-width:350px;margin:0 auto;color:#64748b;font-size:12px;line-height:1.65}.onboarding-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:22px}.onboarding-actions .btn{min-height:46px;border-radius:12px;font-size:12px;font-weight:800}
.payroll-readiness{margin:0 0 20px;padding:18px;border:1px solid #dce8e1;border-radius:17px;background:#fff;box-shadow:0 7px 22px rgba(15,45,35,.05)}.payroll-readiness.is-ready{border-color:#a7f3d0;background:linear-gradient(135deg,#fff,#f0fdf4)}.payroll-readiness.needs-attention{border-color:#fde68a;background:linear-gradient(135deg,#fff,#fffbeb)}.payroll-readiness-head{display:flex;align-items:center;gap:12px}.payroll-readiness-head>span{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:12px;background:#d1fae5;color:#047857;font-size:19px}.needs-attention .payroll-readiness-head>span{background:#fef3c7;color:#b45309}.payroll-readiness-head>div{min-width:0;flex:1}.payroll-readiness h2{margin:0;color:#1e293b;font-size:14px}.payroll-readiness-head p{margin:3px 0 0;color:#64748b;font-size:10px}.payroll-readiness-head>strong{padding:6px 11px;border-radius:99px;background:#d1fae5;color:#047857;font-size:10px}.needs-attention .payroll-readiness-head>strong{background:#fef3c7;color:#a16207}.payroll-readiness-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}.payroll-readiness-item{display:flex;align-items:flex-start;gap:8px;padding:11px;border:1px solid #e4ebe7;border-radius:11px;background:rgba(255,255,255,.72)}.payroll-readiness-item>i{color:#10b981}.payroll-readiness-item.has-issue>i{color:#f59e0b}.payroll-readiness-item>span{display:grid;min-width:0;flex:1}.payroll-readiness-item b{font-size:10px}.payroll-readiness-item small{margin-top:2px;color:#7b899b;font-size:8px;line-height:1.4}.payroll-readiness-item em{min-width:21px;height:21px;padding:0 5px;border-radius:99px;background:#fef3c7;color:#a16207;font-size:9px;font-style:normal;font-weight:900;line-height:21px;text-align:center}
.mobile-context-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 0 13px;padding:4px;border-radius:14px;background:rgba(255,255,255,.76);box-shadow:0 7px 18px rgba(15,45,35,.07)}.mobile-context-tabs a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;border-radius:10px;color:#64748b;text-decoration:none;font-size:10px;font-weight:800}.mobile-context-tabs a.active{background:#fff;color:#047857;box-shadow:0 3px 10px rgba(15,45,35,.09)}.employee-activity-item{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #edf2ef;color:#1e293b;text-decoration:none}.employee-activity-item:last-child{border-bottom:0}.employee-activity-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:12px}.employee-activity-icon.tone-green{background:#d1fae5;color:#047857}.employee-activity-icon.tone-blue{background:#dbeafe;color:#2563eb}.employee-activity-icon.tone-amber{background:#fef3c7;color:#b45309}.employee-activity-icon.tone-violet{background:#ede9fe;color:#7c3aed}.employee-activity-copy{display:grid;min-width:0;flex:1}.employee-activity-copy>small{color:#059669;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.employee-activity-copy>b{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.employee-activity-copy>span,.employee-activity-copy>time{color:#7b899b;font-size:9px;line-height:1.4}.employee-activity-item>i{color:#94a3b8}.employee-day-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:-4px 0 10px}.employee-day-summary>div{padding:10px 5px;border:1px solid rgba(255,255,255,.45);border-radius:12px;background:rgba(255,255,255,.9);text-align:center;box-shadow:0 5px 14px rgba(15,45,35,.06)}.employee-day-summary span{display:block;color:#7b899b;font-size:8px}.employee-day-summary b{color:#064e3b;font-size:12px}.employee-summary-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}.employee-summary-links a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:1px solid #dce8e1;border-radius:11px;background:#fff;color:#047857;text-decoration:none;font-size:10px;font-weight:800}
html[data-theme="dark"] .payroll-readiness,html[data-theme="dark"] .payroll-readiness-item,html[data-theme="dark"] .mobile-context-tabs,html[data-theme="dark"] .mobile-context-tabs a.active,html[data-theme="dark"] .employee-summary-links a,html[data-theme="dark"] .employee-day-summary>div{background:#14201c!important;border-color:#293a33!important}html[data-theme="dark"] .payroll-readiness h2,html[data-theme="dark"] .employee-activity-item{color:#edf7f2}html[data-theme="dark"] .employee-activity-item{border-color:#293a33}html[data-theme="dark"] .employee-day-summary b{color:#6ee7b7}
@media(max-width:1199.98px){.payroll-readiness-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){.payroll-readiness-grid{grid-template-columns:1fr}.payroll-readiness-head{align-items:flex-start}.payroll-readiness-head>strong{white-space:nowrap}.onboarding-actions{grid-template-columns:1fr 1.2fr}.btn,.dropdown-item{min-height:44px}}