@import url("base.css");
@import url("navigation.css");
@import url("records.css");
@import url("employee.css");
@import url("admin.css");
@import url("tips.css");

.payslip-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 14px;
    margin-bottom: 24px;
}

.payslip-filter label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 700;
}

.payslip-filter select,
.payslip-filter input {
    min-width: 180px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    font: inherit;
}

.payslip-details {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(140px, 1fr);
    max-width: 700px;
    margin: 0;
    align-self: start;
}

.payslip-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
}

.payslip-records h3 {
    margin: 0 0 12px;
}

.payslip-records table {
    border-collapse: collapse;
    width: 100%;
    font-size: .82rem;
}

.payslip-records th,
.payslip-records td {
    border-bottom: 1px solid var(--line);
    padding: 8px 5px;
    text-align: left;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .payslip-columns {
        grid-template-columns: 1fr;
    }
}

.payslip-details dt,
.payslip-details dd {
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

.payslip-details dt {
    background: var(--amber);
    font-weight: 700;
}

.payslip-details dd {
    margin: 0;
    text-align: right;
}

.payslip-rate-table {
    border-collapse: collapse;
    max-width: 700px;
    width: 100%;
}

.payslip-rate-table th,
.payslip-rate-table td {
    border-bottom: 1px solid var(--line);
    padding: 12px;
    text-align: right;
}

.payslip-rate-table th {
    text-align: left;
}

.payroll-month-label {
    color: var(--muted);
    font-weight: 700;
}

.payroll-zero-hours-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}

.payroll-summary-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.payroll-summary-heading .payroll-month-label {
    grid-column: 2;
    grid-row: 1;
}

.payroll-summary-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
}

.payroll-zero-hours-toggle input {
    width: auto;
}

@media (max-width: 850px) {
    .payroll-summary-heading {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 8px;
    }

    .payroll-summary-heading > div:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .payroll-summary-actions {
        grid-column: 3;
        grid-row: 1;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

.payroll-summary-table tbody tr.payroll-no-work > th,
.payroll-summary-table tbody tr.payroll-no-work > td,
.payroll-summary-table tbody tr.payroll-no-work input,
.payroll-summary-table tbody tr.payroll-no-work textarea {
    background: #e5e7eb;
}

.payroll-summary-table tbody tr.payroll-paid > th,
.payroll-summary-table tbody tr.payroll-paid > td,
.payroll-summary-table tbody tr.payroll-paid input,
.payroll-summary-table tbody tr.payroll-paid textarea {
    background: #d1fae5;
}

.payroll-paid-cell input {
    width: auto;
}

.payroll-summary-table td.payroll-paid-cell {
    background: #fff2c9;
}

.payroll-summary-table {
    border: 1px solid #2e594f;
    border-collapse: collapse;
    min-width: 900px;
    width: 100%;
    font-size: .85rem;
}

.payroll-summary-table th,
.payroll-summary-table td {
    border: 1px solid #2e594f;
    padding: 7px 9px;
    text-align: right;
    white-space: nowrap;
}

.payroll-summary-table thead th {
    background: #286b5e;
    color: #fff;
    text-align: center;
}

.payroll-summary-table th:last-child,
.payroll-summary-table td:last-child {
    min-width: 96px;
    width: 96px;
    white-space: nowrap;
}

.payroll-summary-table tbody th,
.payroll-summary-table tbody td:nth-child(3),
.payroll-summary-table tbody td:nth-child(4) {
    background: #fff2c9;
}

.payroll-summary-table tbody td:nth-child(2),
.payroll-summary-table tbody td:nth-child(5),
.payroll-summary-table tbody td:nth-child(9),
.payroll-summary-table tbody td:nth-child(10) {
    background: #fff2c9;
}

.payroll-summary-table tbody td:nth-child(10) {
    font-weight: 800;
}

.payroll-summary-table tbody tr.payroll-summary-total th,
.payroll-summary-table tbody tr.payroll-summary-total td {
    background: #dceafa;
    font-weight: 800;
}

.payroll-summary-table tbody th {
    text-align: left;
}

.payroll-summary-table tbody td {
    text-align: center;
}

.payroll-summary-table tbody td:nth-child(4) {
    width: 96px;
}

.payroll-summary-table td.payroll-editable {
    background: #fff2c9;
}

.payroll-summary-table input,
.payroll-summary-table textarea {
    box-sizing: border-box;
    background: #fff2c9;
    width: 100%;
}

.payroll-summary-table td:nth-child(6) input,
.payroll-summary-table td:nth-child(7) input,
.payroll-summary-table td:nth-child(8) input {
    max-width: none;
    min-width: 72px;
    width: 72px;
}

.payroll-summary-table td:nth-child(9) textarea,
.payroll-summary-table td:nth-child(11) textarea {
    display: block;
    min-height: 2.2em;
    min-width: 180px;
    resize: both;
}

.payroll-rate-button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

.payroll-rate-dialog {
    border: 0;
    border-radius: 12px;
    padding: 24px;
    min-width: min(560px, 90vw);
}

.payroll-rate-dialog table {
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
}

.payroll-lock-dialog {
    border: 0;
    border-radius: 12px;
    padding: 24px;
    max-width: min(460px, 90vw);
}

.payroll-lock-dialog::backdrop {
    background: rgb(15 23 42 / 45%);
}

.payroll-lock-dialog .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.payroll-rate-dialog th,
.payroll-rate-dialog td {
    border: 1px solid var(--line);
    padding: 8px;
    text-align: left;
}

.payslip-month-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
}

.payslip-month-form label {
    color: var(--muted);
    font-weight: 700;
}

.payslip-month-form select {
    padding: 7px 9px;
}