:root{--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--primary:#2563eb;--primary-hover:#1d4ed8;--primary-light:#eff6ff;--primary-border:#bfdbfe;--bg-app:#f8fafc;--bg-surface:#ffffff;--bg-subtle:#f1f5f9;--bg-hover:#f8fafc;--border-subtle:#f1f5f9;--border-default:#e2e8f0;--border-strong:#cbd5e1;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--text-inverse:#ffffff;--success:#10b981;--success-light:#ecfdf5;--success-text:#065f46;--success-border:#a7f3d0;--warning:#f59e0b;--warning-light:#fffbeb;--warning-text:#92400e;--warning-border:#fde68a;--danger:#ef4444;--danger-light:#fef2f2;--danger-text:#991b1b;--danger-border:#fecaca;--info:#0ea5e9;--info-light:#f0f9ff;--info-text:#0369a1;--info-border:#bae6fd;--purple:#8b5cf6;--purple-light:#f5f3ff;--purple-text:#6d28d9;--sidebar-bg:#0f172a;--sidebar-hover:#1e293b;--sidebar-active:#2563eb;--sidebar-text:#94a3b8;--sidebar-text-active:#ffffff;--sidebar-border:rgba(255,255,255,0.08);--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-full:9999px;--shadow-xs:0 1px 2px rgba(15,23,42,0.05);--shadow-sm:0 1px 3px rgba(15,23,42,0.06),0 1px 2px rgba(15,23,42,0.04);--shadow-md:0 4px 6px -1px rgba(15,23,42,0.07),0 2px 4px -2px rgba(15,23,42,0.05);--shadow-lg:0 10px 15px -3px rgba(15,23,42,0.08),0 4px 6px -4px rgba(15,23,42,0.04);--shadow-xl:0 20px 25px -5px rgba(15,23,42,0.1),0 8px 10px -6px rgba(15,23,42,0.05)}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body,html{min-height:100dvh;font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;scrollbar-gutter:stable;overflow-y:scroll}*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.app-container{display:flex;min-height:100dvh;position:relative}.sidebar-overlay{position:fixed;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:998;animation:fadeIn .2s ease-out;cursor:pointer}.app-sidebar{width:270px;background-color:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;height:100dvh;z-index:999;border-right:1px solid var(--sidebar-border);transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease}.sidebar-header{padding:1.15rem 1.25rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--sidebar-border)}.sidebar-close-btn{display:none;background:transparent;border:none;color:#94a3b8;padding:.35rem;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease}.sidebar-close-btn:hover{color:#ffffff;background:rgba(255,255,255,.12)}.brand-badge{gap:.75rem;text-decoration:none}.brand-badge,.brand-logo{display:flex;align-items:center}.brand-logo{width:36px;height:36px;background:linear-gradient(135deg,#2563eb,#4f46e5);border-radius:var(--radius-md);justify-content:center;color:#ffffff;box-shadow:0 2px 8px rgba(37,99,235,.35);flex-shrink:0}.brand-logo svg{width:20px;height:20px}.brand-title-wrap{display:flex;flex-direction:column}.brand-title{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:#ffffff}.brand-sub{font-size:.7rem;font-weight:500;color:#94a3b8;letter-spacing:.04em;text-transform:uppercase}.sidebar-nav{flex:1 1;padding:1.25rem .75rem;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}.sidebar-nav::-webkit-scrollbar{width:5px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:var(--radius-full)}.sidebar-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}.nav-heading{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#64748b;padding:.75rem .75rem .35rem}.nav-link{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:var(--radius-md);color:var(--sidebar-text);text-decoration:none;font-size:.875rem;font-weight:500;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}.nav-link:hover{background-color:var(--sidebar-hover);color:#f1f5f9}.nav-link.active{background-color:var(--sidebar-active);color:#ffffff;font-weight:600;box-shadow:0 2px 6px rgba(37,99,235,.3)}.nav-link svg{width:18px;height:18px;flex-shrink:0}.badge-pill-red,.nav-link .badge-counter{margin-left:auto;background-color:#ef4444;color:#ffffff;font-size:.72rem;font-weight:700;min-width:19px;height:19px;padding:0 5px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;line-height:1}.sidebar-footer{padding:1rem 1.15rem;border-top:1px solid var(--sidebar-border);display:flex;flex-direction:column;gap:.75rem;background:rgba(0,0,0,.25);flex-shrink:0}.sidebar-user-card{display:flex;align-items:center;gap:.75rem;width:100%;overflow:hidden}.user-avatar{width:38px;height:38px;border-radius:var(--radius-full);background:linear-gradient(135deg,#3b82f6,#8b5cf6);display:flex;align-items:center;justify-content:center;color:#ffffff;font-weight:700;font-size:.85rem;flex-shrink:0}.user-meta{flex:1 1;min-width:0;overflow:hidden}.user-meta-name{font-size:.85rem;font-weight:700;color:#ffffff}.user-meta-name,.user-meta-role{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-meta-role{font-size:.72rem;color:#94a3b8}.sidebar-signout-action-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1rem;background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.4);color:#fca5a5;border-radius:var(--radius-md);font-size:.88rem;font-weight:700;cursor:pointer;transition:all .15s ease}.sidebar-signout-action-btn:active,.sidebar-signout-action-btn:hover{background:#dc2626;border-color:#dc2626;color:#ffffff;box-shadow:0 4px 14px rgba(220,38,38,.4)}.btn-topbar-logout{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;background:#fef2f2;border:1px solid #fecaca;color:#dc2626;border-radius:var(--radius-md);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s ease;flex-shrink:0}.btn-topbar-logout:active,.btn-topbar-logout:hover{background:#fee2e2;border-color:#fca5a5;color:#b91c1c;box-shadow:0 2px 6px rgba(220,38,38,.2)}@media (max-width:520px){.topbar-logout-text{display:none}.btn-topbar-logout{padding:.5rem}}.app-main{flex:1 1;margin-left:260px;display:flex;flex-direction:column;min-width:0;min-height:100dvh}.app-topbar{background-color:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-default);padding:.85rem clamp(1rem,2.5vw,2rem);justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;z-index:50;gap:1rem}.app-topbar,.topbar-left{display:flex;align-items:center}.topbar-left{gap:.85rem;min-width:0}.menu-toggle-btn{display:none;background:none;border:none;padding:.45rem;cursor:pointer;color:var(--text-primary);border-radius:var(--radius-sm);flex-shrink:0;transition:background-color .15s ease}.menu-toggle-btn:hover{background:var(--bg-subtle)}.header-title-group{min-width:0}.header-title-group h1{font-size:clamp(1.05rem,2.2vw,1.25rem);font-weight:700;letter-spacing:-.02em;color:var(--text-primary)}.header-title-group h1,.header-title-group p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-title-group p{font-size:.78rem;color:var(--text-muted)}.topbar-right{gap:.75rem;flex-shrink:0}.search-field,.topbar-right{display:flex;align-items:center}.search-field{background:var(--bg-subtle);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:.45rem .85rem;gap:.6rem;width:260px;max-width:100%;transition:all .15s ease}.topbar-search{width:240px}.search-field:focus-within{background:#ffffff;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}.search-field input{border:none;background:transparent;outline:none;font-size:.85rem;color:var(--text-primary);width:100%}.search-field svg{color:var(--text-muted);width:16px;height:16px;flex-shrink:0}.topbar-date{font-size:.8rem;color:#64748b;font-weight:500;background:var(--bg-subtle);padding:.4rem .75rem;border-radius:var(--radius-md);border:1px solid var(--border-default)}.topbar-date,.topbar-punch-btn{white-space:nowrap}.page-content{padding:clamp(1rem,2.5vw,1.75rem) clamp(1rem,2.5vw,2rem) 3rem;flex:1 1;width:100%;max-width:100vw;animation:pageContentFade .15s ease-out}@keyframes pageContentFade{0%{opacity:.88}to{opacity:1}}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));grid-gap:clamp(.85rem,1.5vw,1.25rem);gap:clamp(.85rem,1.5vw,1.25rem);margin-bottom:1.75rem}.kpi-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:1.35rem 1.5rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;transition:box-shadow .15s ease,border-color .15s ease;position:relative;overflow:hidden}.kpi-card:hover{box-shadow:var(--shadow-md);border-color:#cbd5e1}.kpi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}.kpi-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.kpi-icon-wrap{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}.kpi-icon-wrap.blue{background:var(--primary-light);color:var(--primary)}.kpi-icon-wrap.green{background:var(--success-light);color:var(--success)}.kpi-icon-wrap.amber{background:var(--warning-light);color:var(--warning)}.kpi-icon-wrap.purple{background:var(--purple-light);color:var(--purple)}.kpi-value-wrap{display:flex;align-items:baseline;gap:.6rem}.kpi-value{font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--text-primary);line-height:1.2}.kpi-subtext{font-size:.78rem;font-weight:500;margin-top:.4rem;display:flex;align-items:center;gap:.35rem}.kpi-subtext.positive{color:var(--success)}.kpi-subtext.warning{color:var(--warning)}.kpi-subtext.neutral{color:var(--text-muted)}.kpi-progress{width:100%;height:6px;background:var(--bg-subtle);margin-top:.75rem;overflow:hidden}.kpi-progress,.kpi-progress-bar{border-radius:var(--radius-full)}.kpi-progress-bar{height:100%;transition:width .5s ease}.card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:1.75rem}.card-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-default);display:flex;align-items:center;justify-content:space-between;background:#ffffff}.card-header-left{display:flex;flex-direction:column}.card-title{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:var(--text-primary)}.card-subtitle{font-size:.78rem;color:var(--text-muted);margin-top:2px}.card-body{padding:1.5rem}.card-body.flush{padding:0}.grid-2{grid-template-columns:1.75fr 1fr;grid-gap:1.5rem;gap:1.5rem}.grid-2,.grid-3{display:grid;margin-bottom:1.75rem}.grid-3{grid-template-columns:repeat(3,1fr);grid-gap:1.25rem;gap:1.25rem}.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:0 0 var(--radius-lg) var(--radius-lg);scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.data-table{width:100%;border-collapse:collapse;font-size:.875rem;text-align:left}.data-table td,.data-table th{white-space:nowrap}.data-table thead th{background:#f8fafc;color:var(--text-muted);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.85rem 1.25rem;border-bottom:1px solid var(--border-default)}.data-table tbody td{padding:.95rem 1.25rem;border-bottom:1px solid var(--border-subtle);vertical-align:middle;color:var(--text-primary)}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background-color:#f8fafc}.emp-row-user{gap:.85rem}.avatar-circle,.emp-row-user{display:flex;align-items:center}.avatar-circle{width:36px;height:36px;border-radius:var(--radius-full);justify-content:center;color:#ffffff;font-weight:600;font-size:.82rem;flex-shrink:0;overflow:hidden}.avatar-circle img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.emp-name-text{font-weight:600;font-size:.875rem;color:var(--text-primary)}.emp-code-sub{font-size:.75rem;color:var(--text-muted)}.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .75rem;font-size:.75rem;font-weight:600;letter-spacing:.02em}.badge,.badge-dot{border-radius:var(--radius-full)}.badge-dot{width:6px;height:6px}.badge-present{background-color:var(--success-light);color:var(--success-text);border:1px solid var(--success-border)}.badge-present .badge-dot{background-color:var(--success)}.badge-late{background-color:var(--warning-light);color:var(--warning-text);border:1px solid var(--warning-border)}.badge-late .badge-dot{background-color:var(--warning)}.badge-leave{background-color:var(--danger-light);color:var(--danger-text);border:1px solid var(--danger-border)}.badge-leave .badge-dot{background-color:var(--danger)}.badge-od{background-color:var(--purple-light);color:var(--purple-text);border:1px solid #ddd6fe}.badge-od .badge-dot{background-color:var(--purple)}.badge-neutral{background-color:var(--bg-subtle);color:var(--text-secondary);border:1px solid var(--border-default)}.badge-neutral .badge-dot{background-color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem 1.1rem;border-radius:var(--radius-md);font-size:.85rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .15s ease;text-decoration:none;line-height:1.25}.btn-primary{background-color:var(--primary);color:#ffffff;box-shadow:0 1px 3px rgba(37,99,235,.25)}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{background-color:#ffffff;border-color:var(--border-default);color:var(--text-primary)}.btn-secondary:hover{background-color:var(--bg-subtle);border-color:var(--border-strong)}.btn-success{background-color:var(--success);color:#ffffff}.btn-success:hover{background-color:#059669}.btn-danger{background-color:var(--danger);color:#ffffff}.btn-danger:hover{background-color:#dc2626}.btn-sm{padding:.35rem .65rem;font-size:.78rem;border-radius:var(--radius-sm)}.chart-container{display:flex;align-items:flex-end;gap:1.25rem;height:200px;padding:1.5rem 0 .5rem;border-bottom:1px solid var(--border-default)}.chart-bar-group{flex:1 1;align-items:center;gap:.5rem}.chart-bar-group,.chart-bar-track{display:flex;flex-direction:column;height:100%;justify-content:flex-end}.chart-bar-track{max-width:42px;background:var(--bg-subtle);overflow:hidden}.chart-bar-fill,.chart-bar-track{width:100%;border-radius:var(--radius-md) var(--radius-md) 0 0;position:relative}.chart-bar-fill{background:linear-gradient(180deg,#3b82f6,#2563eb);transition:height .6s cubic-bezier(.16,1,.3,1)}.chart-bar-fill.warning{background:linear-gradient(180deg,#fbbf24,#d97706)}.chart-bar-label{font-size:.75rem;font-weight:600;color:var(--text-secondary)}.chart-bar-val{font-size:.7rem;font-weight:700;color:var(--text-primary)}.action-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:.85rem;gap:.85rem}.action-tile{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:1.1rem;display:flex;flex-direction:column;gap:.4rem;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;text-decoration:none;color:var(--text-primary)}.action-tile:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}.action-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center}.action-title{font-size:.88rem;font-weight:600}.action-desc{font-size:.75rem;color:var(--text-muted);line-height:1.35}.filter-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}.tab-filter-pills{display:flex;background:var(--bg-subtle);padding:3px;border-radius:var(--radius-md);border:1px solid var(--border-default);gap:2px;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch;white-space:nowrap}.tab-filter-pills::-webkit-scrollbar{display:none}.tab-filter-btn{background:transparent;border:none;padding:.45rem .95rem;font-size:.8rem;font-weight:600;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .15s ease;flex-shrink:0;white-space:nowrap}.tab-filter-btn.active{background:#ffffff;color:var(--text-primary);box-shadow:var(--shadow-xs)}.dept-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));grid-gap:1.5rem;gap:1.5rem;align-items:start}.slip-grid-2{display:grid;grid-template-columns:1fr 1fr;grid-gap:1.25rem;gap:1.25rem}.letter-paper{max-width:800px;margin:0 auto;background:#ffffff;padding:clamp(1.5rem,5vw,3.5rem) clamp(1.25rem,4vw,3rem);box-shadow:0 4px 20px rgba(0,0,0,.06);font-family:Georgia,Times New Roman,serif;line-height:1.7;color:#111827;border-radius:var(--radius-lg);border:1px solid var(--border-default)}.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem;animation:fadeIn .15s ease-out}.modal-dialog{background:#ffffff;border-radius:var(--radius-lg);border:1px solid var(--border-default);box-shadow:var(--shadow-xl);width:100%;max-width:min(94vw,560px);max-height:92dvh;display:flex;flex-direction:column;overflow:hidden;animation:scaleUp .15s cubic-bezier(.16,1,.3,1)}.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-default);display:flex;align-items:center;justify-content:space-between;gap:.75rem}.modal-title{font-size:1.15rem;font-weight:700;color:var(--text-primary)}.modal-close-btn{background:none;border:none;font-size:1.25rem;color:var(--text-muted);cursor:pointer;padding:.25rem .5rem;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all .15s ease}.modal-close-btn:hover{background:var(--bg-subtle);color:var(--text-primary)}.modal-body{padding:clamp(1.15rem,2.5vw,1.5rem);overflow-y:auto;flex:1 1;scrollbar-width:thin}.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-default);background:#f8fafc;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;flex-wrap:wrap}.form-group{margin-bottom:1.1rem}.form-label{display:block;font-size:.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:.35rem}.form-input,.form-select,.form-textarea{width:100%;padding:.6rem .85rem;border:1px solid var(--border-default);border-radius:var(--radius-md);font-size:.875rem;color:var(--text-primary);background:#ffffff;outline:none;transition:all .15s ease}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}.form-grid-2{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width:1024px){.app-sidebar{transform:translateX(-100%)!important;width:min(310px,86vw)!important;z-index:1000!important;transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease!important}.app-sidebar.mobile-open,.app-sidebar.open{transform:translateX(0)!important;box-shadow:0 25px 50px -12px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.12)!important}.sidebar-overlay{z-index:998!important}.app-main{margin-left:0!important}.menu-toggle-btn{display:flex!important;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0}.menu-toggle-btn:active,.menu-toggle-btn:hover{background:#e2e8f0}.sidebar-close-btn{display:flex!important;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-md);background:rgba(255,255,255,.1);color:#f1f5f9;border:1px solid rgba(255,255,255,.15);cursor:pointer;transition:all .15s ease}.sidebar-close-btn:active,.sidebar-close-btn:hover{background:rgba(255,255,255,.2);color:#ffffff}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:repeat(2,1fr)}.topbar-search{width:170px}}@media (max-width:900px){.topbar-date{display:none}}@media (max-width:768px){.topbar-search{display:none}.dept-grid-2{grid-template-columns:1fr}.data-table thead th{padding:.65rem .85rem;font-size:.68rem}.data-table tbody td{padding:.75rem .85rem;font-size:.82rem}.avatar-circle{width:32px;height:32px;font-size:.75rem}.emp-row-user{gap:.6rem}}@media (max-width:640px){.app-topbar{padding:.75rem 1rem}.header-title-group p{display:none}.page-content{padding:1rem .85rem}.kpi-grid{gap:.85rem}.grid-3,.kpi-grid,.slip-grid-2{grid-template-columns:1fr}.slip-grid-2{gap:.85rem}.action-grid,.form-grid-2{grid-template-columns:1fr}.form-grid-2{gap:.85rem}.card-header{flex-direction:column;align-items:flex-start;gap:.75rem;padding:1rem 1.15rem}.card-header>:not(.card-header-left){width:100%}.filter-toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.filter-toolbar>*{width:100%}.filter-toolbar .form-input,.filter-toolbar .form-select,.filter-toolbar .search-field{width:100%!important}.filter-toolbar .btn{width:100%;justify-content:center}.modal-dialog{margin:.5rem;max-height:94dvh}.modal-body,.modal-footer,.modal-header{padding:1rem 1.15rem}}@media (max-width:480px){.topbar-punch-text{display:none}.topbar-punch-btn{padding:.45rem .65rem}.modal-footer{flex-direction:column-reverse}.modal-footer .btn{width:100%}}.settings-nav-bar{display:flex;align-items:center;gap:.5rem;background:#ffffff;padding:.45rem .6rem;border-radius:var(--radius-lg);border:1px solid var(--border-default);box-shadow:var(--shadow-xs);margin-bottom:1.5rem;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.settings-nav-bar::-webkit-scrollbar{display:none}.settings-nav-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;font-size:.85rem;font-weight:600;border-radius:var(--radius-md);color:var(--text-secondary);background:transparent;border:1px solid transparent;cursor:pointer;transition:all .15s ease;white-space:nowrap}.settings-nav-btn:hover{background:var(--bg-subtle);color:var(--text-primary)}.settings-nav-btn.active{background:var(--primary);color:#ffffff;box-shadow:0 2px 8px rgba(37,99,235,.25)}.settings-grid-2{display:grid;grid-template-columns:1fr 1fr;grid-gap:1.5rem;gap:1.5rem;align-items:start}@media (max-width:1024px){.settings-grid-2{grid-template-columns:1fr}}.settings-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:1rem;gap:1rem;margin-bottom:1.5rem}.settings-stat-card{background:#ffffff;border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:1.15rem 1.35rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow-xs);transition:all .15s ease}.settings-stat-card:hover{box-shadow:var(--shadow-sm);border-color:#cbd5e1}.settings-stat-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}.settings-stat-val{font-size:1.25rem;font-weight:800;color:var(--text-primary);line-height:1.2}.settings-stat-label{font-size:.76rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}.chip-group{display:flex;flex-wrap:wrap;gap:.5rem}.chip-btn{padding:.45rem .85rem;border-radius:var(--radius-md);font-size:.82rem;font-weight:600;border:1px solid var(--border-default);background:#ffffff;color:var(--text-secondary);cursor:pointer;transition:all .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:.35rem}.chip-btn:hover{border-color:var(--primary-border);color:var(--primary);background:var(--primary-light)}.chip-btn.active{background:var(--primary);border-color:var(--primary);color:#ffffff;box-shadow:0 2px 6px rgba(37,99,235,.25)}.ui-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ui-switch input{position:absolute;opacity:0;width:0;height:0}.ui-switch-track{width:42px;height:24px;background-color:#cbd5e1;border-radius:9999px;transition:background-color .2s ease;position:relative}.ui-switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background-color:#ffffff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s cubic-bezier(.16,1,.3,1)}.ui-switch input:checked+.ui-switch-track{background-color:var(--primary)}.ui-switch input:checked+.ui-switch-track .ui-switch-thumb{transform:translateX(18px)}.compliance-box{padding:.9rem 1.15rem;border-radius:var(--radius-md);font-size:.82rem;line-height:1.6;display:flex;gap:.75rem;align-items:flex-start}.compliance-box.success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}.compliance-box.warning{background:#fffbeb;border:1px solid #fde68a;color:#92400e}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/ba9851c3c22cd980-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/21350d82a1f187e9-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/df0a9ae256c0569c-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/8e9860b6e62d6359-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c4,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Inter Fallback;src:local("Arial");ascent-override:90.44%;descent-override:22.52%;line-gap-override:0.00%;size-adjust:107.12%}.__className_d8ebd1{font-family:Inter,Inter Fallback;font-style:normal}.__variable_d8ebd1{--font-sans:"Inter","Inter Fallback"}