:root{
  --primary:#6f3cc3;
  --primary-dark:#4b238c;
  --bg:#f5f7fb;
  --nav:#101828;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --line:#e5e7eb;
  --text:#111827;
  --muted:#667085;
  --success:#16835f;
  --warning:#f59e0b;
  --danger:#dc2626;
  --shadow:0 16px 40px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif}
button,input,select{font:inherit}
.login-screen{min-height:100vh;background:linear-gradient(135deg,#0f172a,#4b238c);display:grid;place-items:center}
.login-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;width:min(980px,92vw)}
.login-brand{color:white;padding:42px}.login-brand h1{font-size:52px;margin:22px 0 8px}.login-brand p{font-size:18px;color:#e9d5ff}
.login-panel{background:white;padding:34px;border-radius:28px;box-shadow:var(--shadow)}.login-panel h2{margin:0}.login-panel p{color:var(--muted)}
.login-panel label{font-weight:700;font-size:13px}.login-panel input{width:100%;margin:8px 0 18px;padding:13px;border:1px solid var(--line);border-radius:12px}
.app-icon{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#8b5cf6,#d4a84f);display:grid;place-items:center;color:white;font-weight:900}
.app-shell{display:grid;grid-template-columns:288px minmax(0,1fr);min-height:100vh}
.side-nav{background:var(--nav);color:white;padding:20px;position:sticky;top:0;height:100vh;overflow:auto}
.brand-block{display:flex;gap:12px;align-items:center;margin-bottom:26px}.brand-block strong{display:block;font-size:20px}.brand-block span{display:block;color:#cbd5e1;font-size:12px;margin-top:3px}
.nav-group{margin-bottom:20px}.nav-group p{text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:#94a3b8;margin:0 0 8px}
.nav{display:flex;align-items:center;gap:10px;width:100%;background:transparent;color:#d0d5dd;border:0;border-radius:12px;padding:10px 12px;text-align:left;font-weight:700;cursor:pointer}
.nav:hover,.nav.active{background:#ffffff14;color:white}.nav span{width:22px;text-align:center}.logout{display:block;color:#e2e8f0;text-decoration:none;margin-top:18px;font-weight:700}
.workspace{padding:28px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.breadcrumb{color:var(--muted);font-size:13px;font-weight:700}.breadcrumb span{color:var(--primary)}
.topbar h1{font-size:32px;margin:6px 0 0;letter-spacing:-.03em}.filters{display:flex;gap:10px;flex-wrap:wrap}
select,input{border:1px solid var(--line);background:white;border-radius:12px;padding:11px 12px;min-height:42px;color:var(--text)}
.btn{border:0;border-radius:12px;padding:11px 15px;font-weight:800;cursor:pointer}.btn.primary{background:var(--primary);color:white}.btn.ghost{background:#eef2ff;color:var(--primary-dark)}
.icon-btn{border:0;background:#ffffff18;color:white;border-radius:10px;padding:9px 12px}
.upload-strip{display:grid;grid-template-columns:minmax(240px,1fr) auto auto auto;gap:12px;align-items:center;background:white;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:15px;margin-bottom:18px}
.upload-strip span{display:block;color:var(--muted);font-size:13px;margin-top:3px}.upload-strip #status{grid-column:1/-1;color:var(--muted);margin:0}
.metrics-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}
.metric{background:white;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow);min-width:0}
.metric span{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.metric strong{display:block;color:var(--primary);font-size:22px;margin:8px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric small{color:var(--muted)}
.panel{background:white;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px;margin-bottom:18px;min-width:0}.panel.inner{box-shadow:none;background:var(--surface-soft)}
.panel h3{margin:0 0 14px;color:#1f2937}.panel-head,.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px}.dashboard-grid.compact{grid-template-columns:repeat(2,1fr)}
.chart-panel{height:390px}.chart-panel.wide{height:420px}.chart-panel canvas{max-height:320px!important}
.hidden{display:none!important}.muted{color:var(--muted)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;max-height:450px}.table-wrap.large{max-height:650px}
table{border-collapse:collapse;width:100%;background:white;font-size:13px}th,td{border-bottom:1px solid var(--line);padding:10px;text-align:left;white-space:nowrap}th{position:sticky;top:0;background:#f8fafc;color:#344054;z-index:1}.num{text-align:right}
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.form-grid.compact-form{grid-template-columns:1fr auto}
.cat-select{min-width:210px;padding:8px;min-height:36px}.check-label{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:10px}.check-label input{min-height:auto}
.insight-item{padding:14px;border:1px solid var(--line);background:#f8fafc;border-radius:14px;margin-bottom:10px}.insight-item b{color:var(--primary)}
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.report-card{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:14px}.report-card strong{display:block;color:var(--primary);font-size:22px}
.low-stock{color:var(--danger);font-weight:800}.ok-stock{color:var(--success);font-weight:800}
.severity-info{border-left:5px solid #2563eb}.severity-success{border-left:5px solid var(--success)}.severity-warning{border-left:5px solid var(--warning)}.severity-danger{border-left:5px solid var(--danger)}
.alert,.alert.danger{padding:10px;border-radius:12px;background:#fee2e2;color:#991b1b;margin:10px 0}
.mobile-top{display:none}
@media(max-width:1180px){.metrics-grid{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr}.upload-strip{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr 1fr}.chart-panel{height:auto}.chart-panel canvas{max-height:360px!important}}
@media(max-width:840px){.mobile-top{display:flex;position:sticky;top:0;z-index:20;background:var(--nav);color:white;align-items:center;gap:12px;padding:12px 15px}.app-shell{grid-template-columns:1fr}.side-nav{position:fixed;left:-292px;top:0;width:288px;height:100vh;z-index:30;transition:.25s}.side-nav.open{left:0}.workspace{padding:16px}.topbar{display:block}.filters{margin-top:12px}.metrics-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.login-shell{grid-template-columns:1fr}.login-brand{display:none}.metrics-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.filters select{width:100%}.panel{padding:14px}.topbar h1{font-size:26px}}
@media print{.side-nav,.mobile-top,.topbar,.upload-strip,.metrics-grid{display:none!important}.app-shell{display:block}.workspace{padding:0}.view{display:none!important}#view-report{display:block!important}.panel{box-shadow:none;border:0}}

.filter-panel{background:white;border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow);align-items:end}
.filter-block{display:grid;gap:5px}
.filter-block label{font-size:11px;font-weight:900;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.filter-block input,.filter-block select{min-width:140px}
.spa-filter-block select{font-weight:900;border:2px solid var(--primary);background:#fbf7ff}
.spa-chips{display:flex;gap:10px;flex-wrap:wrap;margin:-6px 0 18px}
.spa-chip{background:white;border:1px solid var(--line);border-left:7px solid var(--chip-color,var(--primary));color:#344054;border-radius:999px;padding:10px 14px;font-weight:900;box-shadow:0 6px 18px rgba(16,24,40,.06)}
.spa-chip.active{background:var(--primary);color:white;border-color:var(--primary);border-left-color:var(--primary)}
.report-section-title{font-size:20px;margin:24px 0 12px;color:#111827;border-bottom:1px solid var(--line);padding-bottom:8px}
.report-list{display:grid;gap:8px}.report-list-item{display:flex;justify-content:space-between;gap:12px;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.subcategory-box{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}.subcategory-head{background:#f8fafc;padding:12px;font-weight:900;display:flex;justify-content:space-between}.subcategory-body{padding:10px}
@media(max-width:840px){.filter-panel{display:grid;grid-template-columns:1fr 1fr}.spa-filter-block{grid-column:1/-1}.spa-chips{overflow:auto;flex-wrap:nowrap;padding-bottom:4px}.spa-chip{white-space:nowrap}}
@media(max-width:560px){.filter-panel{grid-template-columns:1fr}.filter-block input,.filter-block select{width:100%}}

.decision-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:#f8fafc;margin-bottom:10px}
.decision-card strong{font-size:18px;color:var(--primary)}
.decision-card.danger{border-left:6px solid var(--danger)}
.decision-card.warning{border-left:6px solid var(--warning)}
.decision-card.success{border-left:6px solid var(--success)}
.decision-card.info{border-left:6px solid #2563eb}
.efficiency-row{display:grid;grid-template-columns:160px 1fr 70px;gap:10px;align-items:center;margin-bottom:10px}
.efficiency-bar{height:12px;background:#e5e7eb;border-radius:999px;overflow:hidden}.efficiency-fill{height:100%;background:var(--primary);border-radius:999px}
.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.heat-day{min-height:74px;border:1px solid var(--line);border-radius:14px;padding:8px;background:#f8fafc}.heat-day strong{display:block}.heat-0{background:#f8fafc}.heat-1{background:#ede9fe}.heat-2{background:#ddd6fe}.heat-3{background:#c4b5fd}.heat-4{background:#a78bfa;color:white}.heat-5{background:#7c3aed;color:white}
.breakdown-group{border:1px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden}.breakdown-head{display:flex;justify-content:space-between;background:#f8fafc;padding:12px;font-weight:900}.breakdown-body{padding:10px}.breakdown-item{display:grid;grid-template-columns:1fr auto;gap:10px;padding:8px;border-bottom:1px solid #eef2f7}.breakdown-item:last-child{border-bottom:0}

.featured-nav{background:#ffffff18!important;color:#fff!important;border:1px solid #ffffff24}
.report-hero{background:linear-gradient(135deg,#ffffff,#f7f2ff)}
.report-pro-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.report-metric{background:white;border:1px solid var(--line);border-radius:16px;padding:16px}
.report-metric span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;font-weight:900}
.report-metric strong{display:block;color:var(--primary);font-size:24px;margin-top:6px}
.category-accordion{display:grid;gap:12px}
.category-card{border:1px solid var(--line);border-radius:18px;background:white;overflow:hidden}
.category-card-head{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:14px;cursor:pointer;background:#f8fafc}
.category-card-head:hover{background:#f1f5f9}
.category-card-title strong{display:block;font-size:16px;color:#111827}
.category-card-title small{color:var(--muted)}
.category-badge{border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}
.category-badge.success{background:#dcfce7;color:#166534}
.category-badge.warning{background:#fef3c7;color:#92400e}
.category-badge.danger{background:#fee2e2;color:#991b1b}
.category-card-body{display:none;padding:0 14px 14px}
.category-card.open .category-card-body{display:block}
.movement-row{display:grid;grid-template-columns:110px 1fr 130px 130px;gap:10px;border-top:1px solid var(--line);padding:10px 0;align-items:center}
.movement-row .desc{font-weight:700}
.movement-row small{color:var(--muted)}
.report-progress{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:8px}
.report-progress div{height:100%;background:var(--primary)}
@media(max-width:900px){.report-pro-metrics{grid-template-columns:repeat(2,1fr)}.movement-row{grid-template-columns:1fr}.category-card-head{grid-template-columns:1fr}}
@media(max-width:560px){.report-pro-metrics{grid-template-columns:1fr}}

.weekly-toolbar{display:grid;grid-template-columns:220px minmax(220px,1fr) auto;gap:12px;align-items:end;margin:16px 0}
.weekly-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.weekly-grid{display:grid;gap:10px}
.weekly-card{display:grid;grid-template-columns:1.2fr .8fr 130px 130px 1fr;gap:12px;align-items:center;background:white;border:1px solid var(--line);border-radius:16px;padding:12px}
.weekly-card.low{border-left:7px solid var(--warning)}
.weekly-card.critical{border-left:7px solid var(--danger)}
.weekly-card.ok{border-left:7px solid var(--success)}
.weekly-card strong{display:block}
.weekly-card small{color:var(--muted)}
.weekly-qty{font-size:18px;font-weight:900;text-align:center}
.weekly-card input,.weekly-card select{width:100%}
@media(max-width:980px){.weekly-card{grid-template-columns:1fr 1fr}.weekly-toolbar,.weekly-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.weekly-card,.weekly-toolbar,.weekly-kpis{grid-template-columns:1fr}}

.login-panel input[name="username"]{margin-bottom:14px}

.clean-login input[type="text"],
.clean-login input[type="password"]{width:100%;margin:8px 0 16px;padding:13px;border:1px solid var(--line);border-radius:12px}
.remember-row{display:flex!important;align-items:center;gap:9px;margin:2px 0 18px!important;font-weight:700;color:var(--muted)}
.remember-row input{width:auto!important;margin:0!important;min-height:auto!important}
.login-help{font-size:13px;color:var(--muted);line-height:1.4;margin-top:16px!important}

.timeclock-hero{background:linear-gradient(135deg,#fff,#f0fdf4)}.timeclock-card{display:flex;justify-content:space-between;align-items:center;gap:18px;background:white;border:1px solid var(--line);border-radius:20px;padding:20px;margin-top:16px}.timeclock-card strong{display:block;font-size:24px;color:var(--primary)}.timeclock-card span{color:var(--muted)}.timeclock-actions{display:flex;gap:10px;flex-wrap:wrap}.danger-btn{background:#dc2626!important;color:#fff!important}.payroll-filters{display:grid;grid-template-columns:180px 180px 180px auto;gap:12px;align-items:end;margin:16px 0}.payroll-status-pill{border-radius:999px;padding:6px 10px;font-weight:900;font-size:12px}.pill-ok{background:#dcfce7;color:#166534}.pill-warn{background:#fef3c7;color:#92400e}@media(max-width:760px){.timeclock-card{display:grid}.payroll-filters{grid-template-columns:1fr}.timeclock-actions .btn{width:100%}}
.status-pill{display:inline-block;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900}
.status-pill.pending{background:#fef3c7;color:#92400e}.status-pill.approved{background:#dcfce7;color:#166534}.status-pill.rejected{background:#fee2e2;color:#991b1b}.status-pill.adjusted{background:#e0e7ff;color:#3730a3}
.gps-inside{color:#166534;font-weight:900}.gps-outside{color:#991b1b;font-weight:900}.gps-unknown{color:#667085;font-weight:900}

.birthday-dashboard-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.birthday-panel{min-height:360px}
.birthday-count{background:#ecfdf3;color:#027a48;border-radius:999px;padding:7px 11px;font-weight:900}
.birthday-widget{max-height:270px;overflow:auto;padding-right:6px}
.birthday-month{margin:14px 0 6px;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.birthday-row{display:flex;align-items:center;gap:10px;padding:9px;border-radius:14px;cursor:pointer}
.birthday-row:hover{background:#f8fafc}
.birthday-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#bbf7d0;color:#047857;font-weight:900;border:2px solid #86efac}
.birthday-avatar.today{box-shadow:0 0 0 3px #4ade80}
.birthday-info strong{display:block}
.birthday-info small{color:var(--muted)}
.birthday-date{margin-left:auto;text-align:right;color:var(--muted);font-size:12px}
.birthday-detail{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;color:var(--muted)}
.birthday-detail strong{color:var(--text)}
@media(max-width:900px){.birthday-dashboard-grid{grid-template-columns:1fr}}

#employeeEditorPanel{border-left:6px solid var(--primary)}

.muted-form-note{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--muted);font-weight:700}

.employee-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.employee-actions input{min-width:260px}
.employee-simple-form{grid-template-columns:repeat(3,minmax(0,1fr))}
.muted-form-note{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--muted);font-weight:700}
@media(max-width:900px){.employee-simple-form{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.employee-simple-form{grid-template-columns:1fr}.employee-actions input{min-width:0;width:100%}}

#deviceLinkBox a{word-break:break-all;color:var(--primary);font-weight:800}

.payroll-preview-panel{margin-top:18px;border-left:6px solid var(--primary)}

#payrollProTable .btn{padding:6px 10px;font-size:12px;text-decoration:none;display:inline-block}

.pro-menu .menu-section-title{
    color:#9ca3af;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:900;
    margin:18px 12px 7px;
}
.module-shortcuts{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
}
.shortcut-card{
    border:1px solid var(--line);
    background:#fff;
    border-radius:16px;
    padding:16px;
    text-align:left;
    cursor:pointer;
    transition:.18s ease;
}
.shortcut-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(16,24,40,.08);
}
.shortcut-card b{display:block;color:var(--primary);margin-bottom:6px}
.shortcut-card span{display:block;color:var(--muted);font-size:13px}
@media(max-width:1100px){.module-shortcuts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.module-shortcuts{grid-template-columns:1fr}}

.payroll-fix-status{
    padding:12px 14px;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid var(--line);
    margin:12px 0;
    font-weight:800;
}
.payroll-fix-status.success{background:#dcfce7;color:#166534;border-color:#86efac}
.payroll-fix-status.warning{background:#fef3c7;color:#92400e;border-color:#fcd34d}
.payroll-fix-status.error{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.payroll-fix-metrics{margin:12px 0}
.payroll-detail-row td{background:#fbfbfd;color:#667085;font-size:13px}
.payroll-day-line{padding:4px 0}
#payrollProTable .btn{padding:6px 10px;font-size:12px;text-decoration:none;display:inline-block}

.payroll-receipt-section{
    margin-top:22px;
    border-top:1px solid var(--line);
    padding-top:18px;
}
.receipt-card-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.receipt-card{
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    padding:16px;
    display:grid;
    gap:10px;
}
.receipt-card strong{display:block;font-size:17px;color:var(--text)}
.receipt-card span{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.receipt-total{
    font-size:24px;
    font-weight:900;
    color:var(--primary);
}
.receipt-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.receipt-actions .btn{
    text-decoration:none;
    display:inline-block;
}
.receipt-preview{
    margin-top:18px;
}
.receipt-preview-paper{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
}
.receipt-preview-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    border-bottom:1px solid var(--line);
    padding-bottom:14px;
}
.receipt-preview-head h2{margin:0}
.receipt-preview-head span{color:var(--muted)}
.receipt-preview-head strong{font-size:28px;color:var(--primary)}
.receipt-mini-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:14px 0;
}
.receipt-mini-grid div{
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px;
    background:#f8fafc;
}
.receipt-mini-grid span{display:block;color:var(--muted);font-size:12px}
.receipt-mini-grid b{display:block;margin-top:4px}
.receipt-days-table{
    width:100%;
    border-collapse:collapse;
}
.receipt-days-table th,.receipt-days-table td{
    border-bottom:1px solid var(--line);
    padding:9px;
    text-align:left;
}
.receipt-preview-actions{margin-top:14px}
@media(max-width:860px){
    .receipt-card-grid{grid-template-columns:1fr}
    .receipt-mini-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
    .receipt-mini-grid{grid-template-columns:1fr}
    .receipt-preview-head{flex-direction:column}
}

.module-frame{
    width:100%;
    min-height:calc(100vh - 120px);
    border:0;
    border-radius:18px;
    background:#f6f7fb;
}
.nomina-frame{
    min-height:1100px;
}

.nomina-frame{min-height:1250px}

.module-frame{width:100%;min-height:calc(100vh - 120px);border:0;border-radius:18px;background:#f6f7fb}
.payroll-clean-frame{min-height:1280px}

/* v18.1 clean module frame */
.module-frame{width:100%;min-height:calc(100vh - 120px);border:0;border-radius:18px;background:#f6f7fb}
.payroll-clean-frame{min-height:1280px}

/* v18.2 official module frames */
.module-frame{width:100%;min-height:calc(100vh - 120px);border:0;border-radius:18px;background:#f6f7fb}
.payroll-clean-frame{min-height:1280px}