.fpi-app{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:0;--navy:#071b5f;--blue:#2563eb;--green:#16a34a;--red:#b91c1c;--line:#dbe5f2;--muted:#64748b;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#0f172a;background:#f6f9ff;min-height:100vh;padding:24px 14px;box-sizing:border-box}.fpi-app *{box-sizing:border-box}.fpi-shell{width:100%;max-width:none;margin:0 auto}.fpi-brand{font-size:22px;font-weight:900;color:var(--navy);margin:4px 0 22px}.fpi-brand span{color:var(--blue)}.fpi-screen{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 18px 50px rgba(15,23,42,.08)}.fpi-screen[hidden]{display:none!important}.fpi-screen h1{margin:0 0 8px;color:var(--navy);font-size:clamp(28px,4vw,42px);line-height:1.1}.fpi-screen h2{margin:0 0 12px;color:var(--navy);font-size:19px}.fpi-lead{margin:0 0 24px;color:#52627a;font-size:16px;line-height:1.55;font-weight:600}.fpi-hero-icon,.fpi-success-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#eef4ff;font-size:28px;margin-bottom:16px}.fpi-success-icon{background:#dcfce7;color:#166534;font-weight:900}.fpi-panel{border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:16px;background:#fff}.fpi-auth-panel{max-width:560px}.fpi-panel label{display:block;color:#243b64;font-size:13px;font-weight:900;margin-top:13px}.fpi-panel input,.fpi-panel select{width:100%;min-height:50px;border:2px solid #cbd5e1;border-radius:12px;padding:0 13px;margin-top:7px;background:#fff;font-size:15px;color:#0f172a;outline:none}.fpi-panel input:focus,.fpi-panel select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}.fpi-help{color:var(--muted);font-size:13px;line-height:1.5;font-weight:600}.fpi-actions{display:grid;gap:12px;margin-top:20px}.fpi-actions.two{grid-template-columns:repeat(2,minmax(0,1fr))}.fpi-actions.three{grid-template-columns:repeat(3,minmax(0,1fr))}.fpi-btn{min-height:50px;border:0;border-radius:13px;padding:12px 16px;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-weight:900;font-size:14px;cursor:pointer}.fpi-btn-primary{background:#16a34a;color:#fff}.fpi-btn-blue{background:var(--blue);color:#fff}.fpi-btn-light{background:#eef2f7;color:#243b64;border:1px solid #d6dfeb}.fpi-link-btn{border:0;background:transparent;color:var(--blue);font-weight:900;cursor:pointer}.fpi-global-message{margin:0 0 16px;padding:13px 15px;border-radius:12px;font-weight:800}.fpi-global-message.error{background:#fee2e2;color:#991b1b}.fpi-global-message.warning{background:#fef3c7;color:#92400e}.fpi-global-message.info{background:#dbeafe;color:#1e40af}.fpi-account-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;padding:12px 14px;border-radius:14px;background:#f1f5ff}.fpi-account-bar strong{color:var(--navy)}.fpi-account-bar span{color:var(--muted);font-size:13px}.fpi-steps-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.fpi-steps-strip span{padding:10px;border-radius:10px;background:#f1f5f9;color:#64748b;text-align:center;font-weight:800;font-size:12px}.fpi-steps-strip .is-active{background:#dbeafe;color:#1d4ed8}.fpi-download-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.fpi-download-row p{margin:4px 0;color:var(--muted)}.fpi-dropzone{border:2px dashed #b9c8dc!important;border-radius:16px!important;padding:22px!important;text-align:center;background:#f8fbff;cursor:pointer}.fpi-dropzone input{position:absolute;opacity:0;width:1px;height:1px}.fpi-drop-icon{display:block;font-size:30px}.fpi-dropzone strong,.fpi-dropzone small{display:block;margin-top:5px}.fpi-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}.fpi-summary-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));max-width:600px}.fpi-summary-card{border:1px solid var(--line);border-radius:16px;padding:16px;background:#f8fbff}.fpi-summary-card strong{display:block;font-size:23px;color:var(--navy)}.fpi-summary-card span{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:800}.fpi-table-panel{overflow:hidden}.fpi-table-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.fpi-table-wrap{overflow:auto}.fpi-table-wrap table{width:100%;border-collapse:collapse;min-width:760px}.fpi-table-wrap th,.fpi-table-wrap td{padding:11px 10px;border-bottom:1px solid #e7edf5;text-align:left;font-size:13px}.fpi-table-wrap th{color:#415571;background:#f8fafc}.fpi-status.valid,.fpi-status.imported{color:#15803d;font-weight:900}.fpi-status.invalid,.fpi-status.failed{color:#b91c1c;font-weight:900}.fpi-status.duplicate{color:#a16207;font-weight:900}.fpi-progress{height:16px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:20px 0}.fpi-progress span{display:block;width:0;height:100%;background:#16a34a;transition:width .2s ease}.fpi-progress-note{text-align:center;color:#52627a}.fpi-setup-note{background:#f8fbff}@media(max-width:720px){.fpi-app{padding:10px}.fpi-screen{padding:20px;border-radius:18px}.fpi-actions.two,.fpi-actions.three,.fpi-summary-grid,.fpi-summary-grid.compact{grid-template-columns:1fr}.fpi-download-row,.fpi-account-bar{align-items:stretch;flex-direction:column}.fpi-steps-strip{grid-template-columns:repeat(2,1fr)}}

/* V1.1.1 Advanced desktop payroll grid */
.fpi-grid-panel{padding:18px;overflow:hidden}.fpi-grid-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px}.fpi-grid-toolbar h2{margin-bottom:5px}.fpi-profile-inline{display:block;min-width:310px;color:#243b64;font-size:13px;font-weight:900}.fpi-profile-inline select{display:block;width:100%;min-height:48px;margin-top:7px;border:2px solid #cbd5e1;border-radius:12px;padding:0 12px;background:#fff;font-size:14px}.fpi-grid-notice{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#eef6ff;border:1px solid #cfe0fa;color:#38516f;font-size:13px;font-weight:700}.fpi-entry-grid-wrap{width:100%;overflow:auto;border:1px solid #dbe5f2;border-radius:14px;background:#fff}.fpi-entry-grid{border-collapse:separate;border-spacing:0;min-width:2850px;width:max-content}.fpi-entry-grid th{position:sticky;top:0;z-index:2;background:#f1f6ff;color:#173565;font-size:11px;font-weight:900;white-space:nowrap;padding:10px 8px;border-right:1px solid #dbe5f2;border-bottom:1px solid #cbd8e8;text-align:left}.fpi-entry-grid td{padding:5px 6px;border-right:1px solid #edf2f7;border-bottom:1px solid #edf2f7;background:#fff}.fpi-entry-grid tbody tr:nth-child(even) td{background:#fbfdff}.fpi-entry-grid input{width:150px;min-height:40px;border:1px solid #cbd5e1;border-radius:8px;padding:0 8px;font-size:12px;color:#0f172a;background:#fff}.fpi-entry-grid input:focus{border-color:#2563eb;outline:0;box-shadow:0 0 0 2px rgba(37,99,235,.12)}.fpi-entry-grid td[data-field="first_names"] input,.fpi-entry-grid td[data-field="surname"] input{width:155px}.fpi-entry-grid td[data-field="id_number"] input{width:145px}.fpi-entry-grid td[data-field="email"] input{width:190px}.fpi-entry-grid td[data-field="address"] input{width:220px}.fpi-entry-grid td[data-field="job"] input{width:145px}.fpi-entry-grid td[data-field="month"] input{width:120px}.fpi-entry-grid td[data-field="notes"] input{width:220px}.fpi-entry-grid td[data-field="medical_people"] input{width:90px}.fpi-row-no{position:sticky;left:0;z-index:1;width:42px;text-align:center;font-weight:900;color:#173565;background:#f8fbff!important}.fpi-row-delete{border:0;background:#fee2e2;color:#991b1b;border-radius:8px;width:34px;height:34px;font-size:18px;font-weight:900;cursor:pointer}.fpi-grid-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px}.fpi-grid-count{color:#52627a;font-weight:900;font-size:13px}.fpi-process-payroll{font-size:15px;letter-spacing:.2px}.fpi-process-payroll:disabled{opacity:.7;cursor:wait}@media(max-width:900px){.fpi-grid-toolbar{align-items:stretch;flex-direction:column}.fpi-profile-inline{min-width:0}.fpi-grid-panel{padding:12px}.fpi-entry-grid-wrap{overflow-x:auto}.fpi-grid-footer{align-items:stretch;flex-direction:column}}

/* V1.1.4: Payroll Import is intentionally a full-width desktop workspace. */
#fpiScreenUpload{width:100%;max-width:none}#fpiScreenUpload .fpi-grid-panel{width:100%;max-width:none}.fpi-grid-toolbar{margin-bottom:10px}.fpi-grid-notice{margin:0}.fpi-profile-inline{display:none!important}


/* V1.1.5: remove grid instruction chrome and restore reliable two-way grid scrolling. */
#fpiScreenUpload .fpi-grid-toolbar{display:none!important;height:0!important;margin:0!important;padding:0!important}
#fpiScreenUpload .fpi-grid-panel{overflow:visible!important}
#fpiScreenUpload .fpi-entry-grid-wrap{display:block!important;width:max-content!important;max-width:none!important;overflow:visible!important;direction:ltr!important;-webkit-overflow-scrolling:auto!important;overscroll-behavior-x:auto!important;scrollbar-width:auto!important}
#fpiScreenUpload .fpi-entry-grid{display:table!important;width:max-content!important;min-width:2850px!important;margin-left:0!important;margin-right:0!important;direction:ltr!important}
#fpiScreenUpload .fpi-entry-grid th,#fpiScreenUpload .fpi-entry-grid td{direction:ltr!important}

/* V1.1.6: single horizontal scrollbar — hand horizontal overflow to the page. */
html:has(#fpiScreenUpload) body{overflow-x:auto!important;}
#fpiScreenUpload .fpi-entry-grid-wrap{overflow:visible!important;}
#fpiScreenUpload .fpi-entry-grid{display:table!important;width:max-content!important;min-width:2850px!important;}

/* V1.1.7: derived payroll columns — PAYE, UIF and NET PAY are calculated live. */
.fpi-entry-grid td.fpi-calculated-cell{background:#f7fbff!important;min-width:125px;}
.fpi-entry-grid td.fpi-calculated-cell input{width:120px!important;background:#f1f6ff!important;border-color:#c7d8f2!important;color:#071b5f!important;font-weight:900;text-align:right;}
.fpi-entry-grid th:nth-last-child(4),.fpi-entry-grid th:nth-last-child(3),.fpi-entry-grid th:nth-last-child(2){text-align:right;}
.fpi-entry-grid td[data-calculated="paye"] input,.fpi-entry-grid td[data-calculated="uif"] input,.fpi-entry-grid td[data-calculated="net"] input{font-variant-numeric:tabular-nums;}

/* V1.2.0: premium desktop onboarding cards — same Fixonet design language, not spreadsheet styling. */
#fpiScreenLogin .fpi-setup-panel{max-width:none;padding:24px;background:#fff}
.fpi-setup-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:14px 18px}
.fpi-setup-grid label{margin:0;color:#243b64;font-size:13px;font-weight:900}
.fpi-setup-grid .fpi-setup-wide{grid-column:1/-1}
.fpi-setup-grid input{margin-top:7px}
.fpi-inline-notice{margin-top:14px;padding:12px 14px;border-radius:12px;background:#eef6ff;border:1px solid #cfe0fa;color:#38516f;font-weight:800;font-size:13px}
@media(max-width:900px){.fpi-setup-grid{grid-template-columns:1fr}.fpi-setup-grid .fpi-setup-wide{grid-column:auto}}


/* V1.2.1: narrow desktop setup screen — single-column company setup; preserve payroll workspace width. */
@media(min-width:901px){
  #fpiScreenLogin{
    width:100%;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }
  #fpiScreenLogin .fpi-setup-panel{
    max-width:none;
  }
  #fpiScreenLogin .fpi-setup-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  #fpiScreenLogin .fpi-setup-grid .fpi-setup-wide{
    grid-column:auto;
  }
}

/* V1.2.2: clean setup chrome; narrow single-column onboarding only. */
#fpiScreenLogin .fpi-setup-panel{max-width:none;}
#fpiScreenLogin .fpi-setup-grid{grid-template-columns:1fr!important;}
#fpiScreenLogin .fpi-setup-grid .fpi-setup-wide{grid-column:auto!important;}
#fpiScreenLogin .fpi-setup-grid label[hidden]{display:none!important;}
#fpiScreenLogin .fpi-hero-icon,#fpiScreenLogin>.fpi-lead{display:none!important;}
@media(min-width:901px){#fpiScreenLogin{max-width:760px!important;margin-left:auto!important;margin-right:auto!important;}}


/* V1.2.3: narrower onboarding card and email-first setup order. */
@media(min-width:901px){
  #fpiScreenLogin{max-width:608px!important;margin-left:auto!important;margin-right:auto!important;}
}
#fpiScreenLogin .fpi-setup-grid{grid-template-columns:1fr!important;}
#fpiScreenLogin .fpi-setup-grid label[hidden]{display:none!important;}


/* V1.2.4: final bulk payslip creator UX — row-level Add Rows and horizontally fixed actions. */
#fpiScreenUpload .fpi-grid-footer{display:flex;justify-content:flex-start;align-items:center;padding-top:12px;}
#fpiScreenUpload .fpi-grid-sticky-actions{position:sticky;left:0;width:100vw;box-sizing:border-box;display:flex!important;justify-content:center!important;align-items:center;gap:14px;padding:14px 20px;margin:12px 0 0;background:rgba(255,255,255,.96);border-top:1px solid #dbe5f2;box-shadow:0 -6px 18px rgba(15,23,42,.08);z-index:20;}
#fpiScreenUpload .fpi-grid-sticky-actions .fpi-btn{width:280px;max-width:42vw;}
#fpiScreenUpload .fpi-add-row td{padding:8px 10px!important;background:#f8fbff!important;border-bottom:1px solid #dbe5f2;}
#fpiScreenUpload .fpi-add-rows-inline{display:block;width:100%;min-height:40px;border:1px dashed #b8c9df;border-radius:9px;background:#f8fbff;color:#173565;font-size:12px;font-weight:900;cursor:pointer;}
#fpiScreenUpload .fpi-add-rows-inline:hover{background:#eef6ff;border-color:#2563eb;}
@media(max-width:900px){#fpiScreenUpload .fpi-grid-sticky-actions{gap:10px;padding:12px 10px;}#fpiScreenUpload .fpi-grid-sticky-actions .fpi-btn{width:220px;max-width:44vw;}}


/* V1.2.5: clean payroll workspace frame and floating actions — preserve all grid functionality. */
#fpiScreenUpload .fpi-account-bar{display:none!important;margin:0!important;padding:0!important;height:0!important;overflow:hidden!important;}
#fpiScreenUpload{width:max-content!important;min-width:100%!important;max-width:none!important;}
#fpiScreenUpload .fpi-grid-panel{width:max-content!important;min-width:100%!important;max-width:none!important;overflow:visible!important;}
#fpiScreenUpload .fpi-entry-grid-wrap{width:max-content!important;min-width:100%!important;max-width:none!important;overflow:visible!important;}
#fpiScreenUpload .fpi-entry-grid{width:max-content!important;min-width:2850px!important;}
#fpiScreenUpload .fpi-grid-sticky-actions{position:static!important;left:auto!important;width:100%!important;max-width:none!important;box-sizing:border-box!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:14px!important;padding:14px 20px!important;margin:12px 0 0!important;background:#fff!important;border-top:1px solid #dbe5f2!important;box-shadow:none!important;z-index:auto!important;}
#fpiScreenUpload .fpi-grid-sticky-actions .fpi-btn{width:280px!important;max-width:none!important;flex:0 0 280px!important;}
@media(max-width:900px){#fpiScreenUpload .fpi-grid-sticky-actions{gap:10px!important;padding:12px 10px!important;}#fpiScreenUpload .fpi-grid-sticky-actions .fpi-btn{width:220px!important;max-width:220px!important;flex:0 0 220px!important;}}

/* V1.2.6: process gate — capture first, email-confirm before Retrieval posting. */
#fpiScreenEmailConfirm .fpi-email-confirm-panel{max-width:620px;margin:0 auto;text-align:center;}
#fpiScreenEmailConfirm .fpi-email-confirm-panel strong{display:block;color:#173565;font-size:16px;word-break:break-word;}


/* V1.2.9 surgical: keep payroll CTAs accessible while the employee grid scrolls vertically/horizontally. */
#fpiScreenUpload{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;}
#fpiScreenUpload .fpi-grid-panel{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;overflow:visible!important;}
#fpiScreenUpload .fpi-entry-grid-wrap{width:100%!important;min-width:0!important;max-width:100%!important;max-height:calc(100vh - 300px)!important;overflow:auto!important;overscroll-behavior:contain;}
#fpiScreenUpload .fpi-entry-grid{min-width:2850px!important;width:max-content!important;}
#fpiScreenUpload .fpi-grid-sticky-actions{position:sticky!important;bottom:0!important;left:0!important;width:100%!important;box-sizing:border-box!important;margin:12px 0 0!important;background:rgba(255,255,255,.97)!important;border-top:1px solid #dbe5f2!important;box-shadow:0 -6px 18px rgba(15,23,42,.08)!important;z-index:30!important;}
@media(max-width:900px){#fpiScreenUpload .fpi-entry-grid-wrap{max-height:calc(100vh - 240px)!important;}#fpiScreenUpload .fpi-grid-sticky-actions{bottom:0!important;}}