body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f3f4f6}.app-container{display:flex;height:100vh;font-family:sans-serif}.sidebar{width:256px;background-color:#1f2937;color:#fff;display:flex;flex-direction:column}.sidebar-header{height:80px;display:flex;align-items:center;justify-content:center;background-color:#111827;font-size:1.5rem;font-weight:700}.sidebar-header h1{margin:0}.sidebar-nav{flex:1;padding:1rem}.nav-link{display:flex;align-items:center;padding:.75rem 1rem;color:#d1d5db;text-decoration:none;border-radius:.5rem;margin-bottom:.5rem}.nav-link:hover{background-color:#374151}.nav-link svg{width:24px;height:24px;margin-right:1rem}.main-content{flex:1;display:flex;flex-direction:column}.main-header{height:80px;background-color:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 2rem}.main-header h2{font-size:1.5rem;font-weight:600;color:#374151;margin:0}.user-actions{display:flex;align-items:center;gap:1rem}.user-actions p{color:#4b5563;margin:0}.page-content{flex:1;padding:2rem;overflow-y:auto}.content-card{background-color:#fff;padding:2rem;border-radius:.5rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.content-card h3{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0}.content-card p{margin-top:.5rem;color:#4b5563}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.page-header h3{margin:0}.add-employee-btn{background-color:#1f2937;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:.5rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:background-color .2s}.add-employee-btn:hover{background-color:#374151}.employee-table-container{overflow-x:auto}.employee-table{width:100%;border-collapse:collapse;text-align:left}.employee-table thead{background-color:#f9fafb}.employee-table th,.employee-table td{padding:1rem;border-bottom:1px solid #e5e7eb;color:#374151}.employee-table th{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#6b7280}.action-btn{border:none;background-color:transparent;cursor:pointer;font-weight:600;margin-right:1rem;padding:.25rem}.edit-btn{color:#2563eb}.edit-btn:hover{text-decoration:underline}.delete-btn{color:#dc2626}.delete-btn:hover{text-decoration:underline}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;overflow-y:auto;padding:2rem 0}.modal-content{background-color:#fff;padding:2rem;border-radius:.5rem;width:100%;max-width:500px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.modal-header{display:fixed;justify-content:space-between;align-items:center;border-bottom:1px solid #e5e7eb;padding-bottom:1rem;margin-bottom:1.5rem}.modal-header h3{margin:0}.close-btn{background:none;border:none;font-size:2rem;line-height:1;color:#9ca3af;cursor:pointer}.form-group{margin-bottom:1.25rem;display:flex;flex-direction:column}.form-group label{margin-bottom:.5rem;font-weight:600;color:#374151;font-size:.9rem}.form-group input{padding:.75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem}.form-group input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.form-actions{display:flex;justify-content:flex-end;margin-top:1rem}.cancel-btn,.submit-btn{padding:.75rem 1.5rem;border-radius:.5rem;font-size:.9rem;font-weight:600;cursor:pointer;border:1px solid transparent}.cancel-btn{background-color:#e5e7eb;color:#374151;margin-right:1rem}.cancel-btn:hover{background-color:#d1d5db}.submit-btn{background-color:#1f2937;color:#fff}.submit-btn:hover{background-color:#374151}.payroll-actions{display:flex;align-items:center}.month-selector{padding:.65rem 1rem;border:1px solid #d1d5db;border-radius:.5rem;margin-right:1rem;font-size:.9rem;background-color:#fff}.view-btn{color:#1f2937}.view-btn:hover{text-decoration:underline}.payslip-modal{max-width:800px}.payslip-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:2px solid #1f2937}.payslip-header h3{font-size:1.8rem;font-weight:700;color:#1f2937}.payslip-actions{display:flex;align-items:center}.print-btn{color:#1f2937;font-weight:600;margin-right:1rem}.payslip-body{padding:1.5rem 0}.payslip-company-details{display:flex;align-items:center;margin-bottom:1.5rem}.payslip-logo{height:50px;margin-right:1.5rem}.company-details h4{font-size:1.2rem;font-weight:700;margin:0 0 .25rem}.company-details p,.employee-details p{margin:.25rem 0;color:#4b5563}.payslip-table-container{margin-top:2rem}.payslip-table{width:100%;border-collapse:collapse}.payslip-table th,.payslip-table td{padding:.75rem;border:1px solid #e5e7eb}.payslip-table thead th{background-color:#f9fafb;font-weight:600;text-align:left}.payslip-table tfoot th,.payslip-table tfoot td{font-weight:700}.net-pay-row{background-color:#1f2937;color:#fff;font-size:1.2rem}.net-pay-row td{font-weight:700}.report-generator{border:1px solid #e5e7eb;border-radius:.5rem;padding:2rem;margin-top:2rem}.report-generator h4{font-size:1.1rem;font-weight:600;margin:0 0 .5rem}.report-generator p{color:#6b7280;margin-bottom:1.5rem}.report-controls{display:flex;align-items:flex-end;gap:1.5rem}.report-controls .form-group{margin-bottom:0}.p9-form-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #111827;padding-bottom:1rem}.kra-logo img{height:50px}.p9-title-section{text-align:center}.p9-title-section h3{font-size:1.2rem;font-weight:700;margin:0}.p9-modal{max-width:95%;max-height:90vh;display:flex;flex-direction:column}.p9-body{flex-grow:1;overflow-y:auto}.p9-employee-details{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem;margin:1.5rem 0;font-size:.9rem}.p9-table{width:100%;border-collapse:collapse;font-size:.8rem}.p9-table th,.p9-table td{border:1px solid #ccc;padding:.5rem;text-align:center}.p9-table thead th{background-color:#f2f2f2;font-weight:700;vertical-align:middle}.p9-table tbody td,.p9-table tfoot th{text-align:right}.p9-table tbody td:first-child,.p9-table tfoot th:first-child{text-align:left;font-weight:700}.p9-table tfoot{font-weight:700;background-color:#e9e9e9}.company-profile-form{display:flex;flex-wrap:wrap;gap:2rem}.form-section{flex:1;min-width:300px}.logo-section{flex-basis:300px;flex-grow:0}.logo-preview{width:100%;height:150px;border:2px dashed #d1d5db;border-radius:.5rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;background-color:#f9fafb;color:#6b7280}.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}.company-profile-form .form-actions{width:100%;margin-top:1rem}.logout-btn{background-color:#fee2e2;color:#991b1b;border:none;padding:.5rem 1rem;border-radius:.5rem;font-size:.9rem;font-weight:600;cursor:pointer}.logout-btn:hover{background-color:#fecaca}.auth-container{display:grid;place-items:center;min-height:100vh;width:100vw;background-color:#f3f4f6;padding:1rem;box-sizing:border-box}.auth-box{background-color:#fff;padding:2.5rem;border-radius:.75rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;width:100%;max-width:400px;text-align:center}.auth-title{font-size:1.8rem;font-weight:700;color:#1f2937;margin:0 0 .5rem}.auth-subtitle{color:#6b7280;margin-bottom:2rem}.auth-box .form-group{text-align:left}.auth-btn{width:100%;margin-top:1rem}.auth-switch{margin-top:1.5rem;font-size:.9rem;color:#4b5563}.switch-btn{background:none;border:none;color:#2563eb;font-weight:600;cursor:pointer}.switch-btn:hover{text-decoration:underline}.subscription-content p{margin-bottom:2rem;font-size:1.1rem;color:#4b5563}.plans-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.plan-card{border:1px solid #e5e7eb;border-radius:.75rem;padding:2rem;display:flex;flex-direction:column}.plan-card.active-plan{border-color:#1f2937;border-width:2px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.plan-card h4{font-size:1.5rem;font-weight:600;color:#1f2937;margin:0 0 .5rem}.plan-price{font-size:1.25rem;font-weight:500;color:#4b5563;margin-bottom:1.5rem}.plan-employees{font-size:.9rem;color:#6b7280;margin-bottom:1.5rem;border-top:1px solid #e5e7eb;padding-top:1.5rem}.plan-features{list-style-type:"✓ ";padding-left:1.5rem;color:#4b5563;flex-grow:1}.plan-features li{margin-bottom:.75rem}.plan-btn{width:100%;margin-top:2rem}.plan-btn:disabled{background-color:#9ca3af;cursor:not-allowed}.auth-logo{font-size:2rem;font-weight:700;color:#1f2937;margin-bottom:1.5rem}.forgot-password{text-align:right;margin-bottom:1rem}.forgot-password a{font-size:.9rem;color:#2563eb;text-decoration:none}.forgot-password a:hover{text-decoration:underline}.large-modal{max-width:800px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.status-toggle-btn{border:none;border-radius:9999px;padding:.25rem .75rem;font-size:.8rem;font-weight:600;cursor:pointer}.status-active{background-color:#d1fae5;color:#065f46}.status-inactive{background-color:#fee2e2;color:#991b1b}.action-cell{display:flex;align-items:center}.employee-details-view h4{font-size:1.5rem;margin:0}.employee-details-view .employee-role{color:#6b7280;margin-bottom:2rem}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.detail-item{background-color:#f9fafb;padding:.75rem;border-radius:.375rem}.detail-item span:first-child{font-weight:600;color:#374151;display:block;margin-bottom:.25rem;font-size:.8rem}.details-subtitle{font-size:1.1rem;font-weight:600;margin:2rem 0 1rem;border-bottom:1px solid #e5e7eb;padding-bottom:.5rem}.payroll-worksheet th,.payroll-worksheet td{vertical-align:middle}.payroll-input{width:100%;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:.9rem;max-width:120px}.payroll-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:start}.welcome-card{grid-column:1 / -1;text-align:center}.dashboard-logo{height:60px;margin-bottom:1rem}.how-to-list{list-style:none;padding:0;margin-top:1.5rem}.how-to-list li{display:flex;align-items:start;gap:1rem}.how-to-list li:not(:last-child){margin-bottom:1.5rem}.how-to-list svg{width:24px;height:24px;color:#1f2937;flex-shrink:0;margin-top:4px}.how-to-list strong{display:block;color:#1f2937}.how-to-list p{margin:0;font-size:.9rem}.contact-form{margin-top:1.5rem}.contact-form textarea{padding:.75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem;width:100%;box-sizing:border-box;font-family:inherit;resize:vertical}.contact-form button{width:100%;margin-top:1rem}@media (max-width: 900px){.dashboard-grid{grid-template-columns:1fr}}.nav-link.disabled{color:#6b7280;cursor:not-allowed;background-color:transparent}.nav-link.disabled:hover{background-color:transparent}.add-employee-btn:disabled{background-color:#9ca3af;cursor:not-allowed}.upgrade-notice{text-align:center;padding:3rem 2rem}.upgrade-notice h3{font-size:1.5rem;margin-bottom:1rem}.upgrade-notice p{color:#4b5563;margin-bottom:2rem;font-size:1.1rem}@media print{body *{visibility:hidden}.modal-overlay{overflow:visible;background-color:#fff}.modal-content,.modal-content *{visibility:visible}.modal-content{position:absolute;left:0;top:0;width:100%;max-width:100%;box-shadow:none;border-radius:0;padding:.08rem;max-height:none}.payslip-actions,.close-btn,.print-btn{display:none}.p9-table{font-size:7.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact;table-layout:fixed;width:100%}.p9-table th,.p9-table td{padding:.12rem;word-wrap:break-word}.p9-table tbody td:first-child{width:6%}.p9-form-header{padding-bottom:.5rem}.p9-employee-details{margin:.5rem 0;font-size:8pt}.p9-title-section h3{font-size:10pt}}.manage-users-section{margin-top:3rem;padding-top:2rem;border-top:1px solid #e5e7eb}.manage-users-section h4{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}.manage-users-section p{color:#6b7280;margin-bottom:1.5rem}.users-list{margin-bottom:1.5rem}.user-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;border:1px solid #e5e7eb;border-radius:.5rem}.user-item:not(:last-child){margin-bottom:1rem}.user-item span:first-child{font-weight:500}.user-role-owner{font-size:.9rem;font-weight:500;color:#6b7280}.remove-user-btn{background:none;border:none;color:#dc2626;font-weight:600;cursor:pointer}.modal-subtitle{color:#4b5563;margin-top:1rem;margin-bottom:1.5rem;text-align:left}.download-buttons{display:flex;gap:2rem;margin-top:1.5rem}.printable-area{display:none}@media print{body *{visibility:hidden}.printable-area,.printable-area *{visibility:visible}.printable-area{position:absolute;left:0;top:0;width:100%}.report-header{display:flex;align-items:center;margin-bottom:1.5rem;padding:1rem}.report-logo{height:50px;margin-right:1.5rem}.report-header-text h2{margin:0;font-size:1.5rem}.report-header-text p{margin:0;font-size:1rem;color:#4b5563}.report-table{width:100%;border-collapse:collapse;font-size:8pt}.report-table th,.report-table td{border:1px solid #ccc;padding:.5rem;text-align:right}.report-table th{background-color:#f2f2f2;font-weight:700}.report-table th:first-child,.report-table td:first-child{text-align:left}.report-table tfoot{font-weight:700;background-color:#e9e9e9}}.quick-calc-form{margin-top:1.5rem}.quick-calc-results{margin-top:2rem;border-top:1px solid #e5e7eb;padding-top:1.5rem}.quick-calc-results h5{font-size:1.1rem;font-weight:600;margin:0 0 1rem}.result-item{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #f3f4f6}.result-item span:first-child{color:#4b5563}.result-item span:last-child{font-weight:500}.result-item.total{font-weight:600;padding-top:1rem;border-top:1px solid #e5e7eb;margin-top:.5rem}.result-item.net-pay{font-weight:700;font-size:1.1rem;color:#1f2937}.page-header-actions{display:flex;gap:1rem}.import-btn{background-color:#e5e7eb;color:#374151;border:1px solid #d1d5db}.import-btn:hover{background-color:#d1d5db}.import-sample-section{background-color:#f9fafb;border-radius:.5rem;padding:1rem;margin-bottom:2rem;border:1px solid #e5e7eb}.import-sample-section p{margin:0;color:#4b5563}.link-btn{background:none;border:none;color:#2563eb;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}.error-message{color:#dc2626;background-color:#fee2e2;padding:.75rem;border-radius:.375rem;margin-bottom:1rem;font-size:.9rem}.success-message{color:#065f46;background-color:#d1fae5;padding:.75rem;border-radius:.375rem;margin-bottom:1rem;font-size:.9rem}.p9-notes-section{display:flex;justify-content:space-between;margin-top:1rem;gap:2rem}.p9-important,.p9-attachments{font-size:.5rem;flex:1}.p9-important ol,.p9-attachments ol{padding-left:1rem;margin:.5rem 0}.p9-important ul{padding-left:1rem;margin:.25rem 0}
/* Fix invalid modal-header declaration and make header layout correct */
.modal-header {
  display: flex;               /* was "fixed" — that is invalid */
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* Make overlay allow the modal to scroll when content is tall.
   Use top padding and align-items:flex-start so tall modals will scroll instead of being clipped. */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-start;   /* allow modal to start at top and scroll */
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;          /* keeps overlay scrollable if modal taller than viewport */
  padding: 2rem 1rem;        /* smaller side padding so modal can expand on small screens */
  box-sizing: border-box;
}

/* Allow larger modals with max height and internal scroll */
.modal-content {
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 1100px;        /* increase to accommodate wide tables */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  max-height: calc(100vh - 3.5rem); /* keep modal inside viewport */
  overflow: auto;           /* enable scrolling inside modal */
  box-sizing: border-box;
}

/* If you want a slightly smaller 'large-modal' variant */
.large-modal .modal-content {
  max-width: 900px;
}

/* Make the table container scroll vertically & horizontally inside modal */
.employee-table-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 60vh; /* allows vertical scroll if many rows */
}

/* Make table respect widths, allow wrapping, and avoid forcing the layout bigger than modal */
.employee-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;       /* ensure column widths don't force oversized layout */
  word-wrap: break-word;
}

/* Allow cells to break long content */
.employee-table th,
.employee-table td {
  white-space: normal;       /* wrap long content */
  word-break: break-word;
}

/* Optional: allow certain columns to be narrower/wider via classes */
.employee-table td.small-col { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.employee-table td.wide-col  { min-width: 180px; }

/* Keep existing visual style but ensure table header remains visible when scrolling inside container */
.employee-table thead th {
  position: sticky;
  top: 0;
  background: #f9fafb;
  z-index: 2;
}