.compact-header { align-items: flex-end; }
.back-link { display: block; margin-bottom: 1.1rem; color: #246752; font-weight: 700; text-decoration: none; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .7rem 1.1rem; border: 1px solid #9ab0a7; border-radius: 10px; background: #fffdf8; color: #174f3e; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
.secondary-button:hover, .back-link:hover { color: #0d3f31; border-color: #477868; }
.page-alert { margin: 0 0 1.25rem; }

.filter-bar { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; padding: 1rem 1.15rem; border: 1px solid #d9ddd6; border-radius: 15px; background: #fffdf9; }
.filter-bar label, .employee-form label, .salary-entry label, .component-create label { display: grid; gap: .42rem; color: #3a5c52; font-size: .83rem; font-weight: 750; }
.filter-bar .search-field { flex: 1; }
input, select, textarea { width: 100%; min-height: 45px; padding: .68rem .78rem; border: 1px solid #cbd4ce; border-radius: 8px; outline: none; background: #fff; color: #142b24; font: inherit; font-weight: 500; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #26725a; box-shadow: 0 0 0 3px rgba(38,114,90,.11); }

.data-panel, .form-section { border: 1px solid #d8ddd6; border-radius: 16px; background: #fffdf9; box-shadow: 0 18px 50px rgba(20,46,37,.07); }
.data-panel { overflow: hidden; }
.table-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; border-bottom: 1px solid #e0e4de; color: #667b73; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th { padding: .82rem 1rem; background: #f3f2eb; color: #527066; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 1rem; border-top: 1px solid #e6e8e2; color: #263f37; vertical-align: middle; }
.data-table tbody tr:hover { background: #faf9f3; }
.data-table td small, .employee-name + small, .master-list small { display: block; margin-top: .25rem; color: #7c8d87; }
.employee-name { color: #154f3d; font-weight: 800; text-decoration: none; }
.row-actions { display: flex; gap: .75rem; white-space: nowrap; }
.row-actions a { color: #21634e; font-size: .85rem; font-weight: 750; }
.status-badge { display: inline-block; padding: .3rem .58rem; border-radius: 999px; background: #e4eee9; color: #175842; font-size: .74rem; font-weight: 800; text-transform: capitalize; }
.status-probation { background: #fff0c7; color: #755312; }
.status-suspended { background: #f9dfd8; color: #873d2a; }
.status-terminated { background: #e7e8e6; color: #626966; }

.employee-form { display: grid; gap: 1.4rem; }
.form-section { padding: 1.45rem; }
.section-title { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.25rem; }
.section-title > span { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 10px; background: #e3ece7; color: #14523f; font-weight: 900; }
.section-title h2 { margin: 0; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 500; color: #102d24; }
.section-title p { margin: .2rem 0 0; color: #71827c; font-size: .9rem; }
.field-grid { display: grid; gap: 1rem; }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.check-row { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #e1e5df; }
.check-row label, .mini-check { display: flex !important; align-items: center; gap: .5rem; color: #38574d; font-weight: 700; }
.check-row input, .mini-check input { width: 18px; min-height: 18px; accent-color: #175a45; }
.form-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: .75rem; padding: 1rem; border: 1px solid #d8ddd6; border-radius: 14px; background: rgba(247,245,238,.96); backdrop-filter: blur(8px); }
.field-error { color: #a33c2e; font-weight: 700; }

.salary-layout { display: grid; grid-template-columns: minmax(280px, .65fr) minmax(520px, 1.35fr); gap: 1.25rem; align-items: start; }
.salary-entry { display: grid; gap: 1rem; }
.salary-entry .section-title { margin-bottom: .2rem; }
.salary-history .money { white-space: nowrap; font-weight: 800; color: #174f3e; }

.master-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.master-card { min-width: 0; }
.inline-create { display: grid; grid-template-columns: .55fr 1.2fr auto; gap: .6rem; margin-bottom: 1rem; }
.master-list { max-height: 310px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.master-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem .15rem; border-top: 1px solid #e4e7e1; }
.master-list em { color: #3e715f; font-size: .78rem; font-style: normal; font-weight: 750; }
.component-section { margin-bottom: 2rem; }
.component-create { display: grid; grid-template-columns: .65fr 1.3fr .8fr .8fr auto auto auto auto; gap: .7rem; align-items: end; margin-bottom: 1.2rem; }
.attendance-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.attendance-tools .filter-bar { margin: 0; }
.unmatched-panel { margin-top: 1.25rem; }
.review-form { margin: 0; }
.device-layout { display: grid; grid-template-columns: minmax(290px,.65fr) minmax(520px,1.35fr); gap: 1.25rem; align-items: start; }
.device-form { display: grid; gap: 1rem; }
.api-key-box { display: grid; gap: .55rem; margin-bottom: 1.25rem; padding: 1.15rem 1.3rem; border: 1px solid #b8d2c6; border-radius: 14px; background: #e8f4ed; color: #174f3e; }
.api-key-box code { overflow-wrap: anywhere; font-size: 1rem; }
.api-help { margin-top: 1.25rem; }
.api-help pre { padding: 1rem; overflow-x: auto; border-radius: 10px; background: #102d24; color: #e8f3ed; line-height: 1.55; }
.api-help code { overflow-wrap: anywhere; }
.test-data-card { max-width: 760px; }
.test-data-card li { margin: .55rem 0; color: #476158; }
.test-data-card form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.test-data-card form label { display: grid; gap: .45rem; color: #38574d; }
.warning-note { margin-top: 1.1rem; padding: .85rem 1rem; border-left: 4px solid #cf8d2d; background: #fff4dc; color: #684b20; }
.status-exception { background: #fff0c7; color: #755312; }
.status-approved { background: #dceee4; color: #175842; }
.status-pending { background: #fff0c7; color: #755312; }
.status-rejected, .status-cancelled { background: #f9dfd8; color: #873d2a; }
.header-actions { display: flex; gap: .7rem; align-items: center; }
.filter-link { align-self: center; margin: 0 0 0 auto; }
.leave-form { max-width: 900px; }
.leave-review { display: grid; grid-template-columns: minmax(130px,1fr) auto auto; gap: .4rem; min-width: 310px; }
.leave-review input { min-height: 34px; padding: .4rem .55rem; }
.approve-button, .reject-button { padding: .45rem .6rem; border: 0; border-radius: 7px; color: #fff; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.approve-button { background: #246752; }
.reject-button { background: #9a4735; }
.balance-form { margin-bottom: 1.25rem; }
.balance-grid { display: grid; grid-template-columns: 1.4fr 1fr .55fr .55fr .55fr .6fr auto; gap: .65rem; align-items: end; }
.balance-grid label, .leave-type-form label { display: grid; gap: .4rem; color: #38574d; font-size: .8rem; font-weight: 750; }
.balances-table { margin-top: 1.25rem; }
.leave-type-form { display: grid; grid-template-columns: .6fr 1.2fr .7fr auto auto auto auto; gap: .75rem; align-items: end; }
.loan-form { max-width: 1000px; }
.loan-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.loan-summary article { padding: 1.15rem; border: 1px solid #d8ddd6; border-radius: 14px; background: #fffdf9; }
.loan-summary span { display: block; color: #6d8079; font-size: .78rem; font-weight: 750; }
.loan-summary strong { display: block; margin-top: .5rem; color: #164d3c; font-family: Georgia,serif; font-size: 1.3rem; }
.payment-form { display: flex; gap: .4rem; min-width: 180px; }
.payment-form input { min-height: 34px; padding: .38rem .5rem; }
.welfare-form { margin-bottom: 1.25rem; }
.welfare-grid { display: grid; grid-template-columns: 1.35fr .8fr .8fr .75fr .8fr 1.2fr auto; gap: .65rem; align-items: end; }
.welfare-grid label { display: grid; gap: .4rem; color: #38574d; font-size: .8rem; font-weight: 750; }
.welfare-contribution { background: #dceee4; color: #175842; }
.welfare-benefit { background: #e6e2f5; color: #57418b; }
.status-completed, .status-paid { background: #dceee4; color: #175842; }
.status-partial { background: #fff0c7; color: #755312; }
.status-overdue { background: #f9dfd8; color: #873d2a; }
.period-form { margin-bottom: 1.25rem; }
.period-grid { display: grid; grid-template-columns: .55fr .9fr .9fr auto; gap: .75rem; align-items: end; }
.period-grid label { display: grid; gap: .4rem; color: #38574d; font-size: .8rem; font-weight: 750; }
.payroll-actions { display: flex; justify-content: flex-end; gap: .75rem; margin: 0 0 1.25rem; }
.post-form { display: flex; gap: .5rem; }
.post-form input { min-width: 170px; }
.post-button { min-height: 46px; padding: .7rem 1.1rem; border: 0; border-radius: 10px; background: #9a4735; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.payroll-warning { margin: -.25rem 0 1.25rem; }
.status-calculated { background: #e6e2f5; color: #57418b; }
.status-posted { background: #dceee4; color: #175842; }
.payslip-toolbar { display: flex; justify-content: space-between; align-items: center; max-width: 900px; margin: 0 auto 1rem; }
.payslip-toolbar .back-link { margin: 0; }
.payslip { max-width: 900px; margin: 0 auto 2rem; padding: 2rem; border: 1px solid #d8ddd6; background: #fff; box-shadow: 0 18px 50px rgba(20,46,37,.09); color: #19352c; }
.payslip > header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.2rem; border-bottom: 2px solid #174f3e; }
.payslip > header > div { display: flex; align-items: center; gap: .75rem; }
.payslip > header > div:last-child { display: block; text-align: right; }
.payslip h1 { margin: .15rem 0 0; font-family: Georgia,serif; }
.payslip-person { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; padding: 1.3rem 0; }
.payslip-person div { display: grid; gap: .2rem; }
.payslip small, .payslip-person span { color: #71827c; }
.payslip-lines table { width: 100%; border-collapse: collapse; }
.payslip-lines th, .payslip-lines td { padding: .75rem; border-bottom: 1px solid #dfe4de; text-align: left; }
.payslip-lines th:last-child, .payslip-lines td:last-child { text-align: right; }
.payslip-lines td small { display: block; }
.payslip-totals { width: min(100%,420px); margin: 1.3rem 0 0 auto; }
.payslip-totals div { display: flex; justify-content: space-between; padding: .55rem 0; }
.payslip-totals .net { margin-top: .4rem; padding: .8rem; background: #174f3e; color: #fff; font-size: 1.1rem; }
.payslip footer { margin-top: 2rem; color: #71827c; font-size: .8rem; text-align: center; }
.bank-warning { margin-bottom: 1.25rem; }
.bank-layout { display: grid; grid-template-columns: minmax(290px,.65fr) minmax(520px,1.35fr); gap: 1.25rem; align-items: start; }
.bank-form { display: grid; gap: 1rem; }
.report-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
.report-card form { display: flex; align-items: end; gap: .75rem; }
.report-card form label { display: grid; flex: 1; gap: .4rem; color: #38574d; font-size: .8rem; font-weight: 750; }
.export-links { display: flex; flex-wrap: wrap; gap: .75rem; min-width: 310px; }
.export-links a { color: #21634e; font-weight: 750; }
.export-links .bank-export { color: #8b5421; }
.export-links span { color: #8a9691; }

@media (max-width: 1100px) {
    .field-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .salary-layout, .master-grid, .device-layout, .bank-layout { grid-template-columns: 1fr; }
    .component-create, .balance-grid, .leave-type-form, .welfare-grid, .period-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .loan-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
    .filter-bar, .check-row, .attendance-tools { align-items: stretch; flex-direction: column; }
    .field-grid.three, .field-grid.two, .inline-create, .component-create { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .row-actions { flex-direction: column; }
    .header-actions { align-items: stretch; flex-direction: column; }
    .leave-review { grid-template-columns: 1fr; min-width: 180px; }
    .loan-summary { grid-template-columns: 1fr; }
    .payment-form { flex-direction: column; }
    .payroll-actions, .payslip-toolbar { align-items: stretch; flex-direction: column; }
    .payslip-person { grid-template-columns: 1fr; }
    .payslip { padding: 1.1rem; }
    .report-grid { grid-template-columns: 1fr; }
    .report-card form { align-items: stretch; flex-direction: column; }
    .export-links { min-width: 180px; flex-direction: column; }
    .form-actions { position: static; }
}

@media print {
    .sidebar, .payslip-toolbar { display: none !important; }
    body.app-shell { display: block; background: #fff; }
    .main-content { margin: 0; padding: 0; }
    .payslip { max-width: none; margin: 0; border: 0; box-shadow: none; }
}