:root {
    --navy: #17365d;
    --blue: #2f6fa5;
    --blue-soft: #eaf3fb;
    --gold: #d6b656;
    --green: #2f855a;
    --red: #c53030;
    --ink: #243447;
    --muted: #687386;
    --line: #dce3ea;
    --background: #f4f7fa;
    --white: #ffffff;
    font-family: "Segoe UI", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at top right, #e7f1fb, transparent 30rem),
        var(--background);
    min-height: 100vh;
}

.topbar {
    min-height: 78px;
    padding: 16px clamp(20px, 5vw, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 4px 20px rgba(23, 54, 93, 0.18);
}

.brand {
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.subtitle,
.version {
    opacity: 0.82;
    font-size: 0.84rem;
}

.page-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 34px auto 70px;
}

footer {
    text-align: center;
    color: var(--muted);
    font-size: 0.78rem;
    padding: 24px;
}

h1, h2 {
    margin-top: 0;
}

h1 {
    color: var(--navy);
    margin-bottom: 10px;
}

.eyebrow {
    display: inline-block;
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-bottom: 9px;
}

.muted {
    color: var(--muted);
}

.auth-card,
.panel,
.attendance-card,
.stat-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 14px 38px rgba(23, 54, 93, 0.08);
}

.auth-card {
    width: min(480px, 100%);
    margin: 70px auto;
    padding: 34px;
}

.auth-card.wide {
    width: min(590px, 100%);
}

form {
    margin-top: 22px;
}

label {
    display: block;
    margin: 14px 0 7px;
    font-weight: 700;
    font-size: 0.9rem;
}

input {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #cbd5df;
    border-radius: 10px;
    font: inherit;
    background: #fff;
}

input:focus {
    outline: 3px solid rgba(47, 111, 165, 0.16);
    border-color: var(--blue);
}

button,
.button {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 11px 17px;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.primary {
    background: var(--blue);
    color: white;
}

.secondary {
    background: var(--blue-soft);
    color: var(--navy);
    border: 1px solid #bdd4e8;
}

.small {
    padding: 7px 11px;
    font-size: 0.82rem;
}

.auth-card button.primary {
    width: 100%;
    margin-top: 18px;
}

.link-row {
    text-align: center;
    margin: 22px 0 0;
}

a {
    color: var(--blue);
}

.toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.toolbar form {
    margin: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}

.stat-card {
    padding: 22px;
}

.stat-card span {
    display: block;
    color: var(--muted);
    font-size: 0.84rem;
}

.stat-card strong {
    display: block;
    color: var(--navy);
    font-size: 2rem;
    margin-top: 7px;
}

.panel {
    padding: 26px;
    margin-bottom: 20px;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.coming-soon {
    border-left: 5px solid var(--gold);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 20px;
}

.full-width {
    grid-column: 1 / -1;
}

.note-box {
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 10px;
    background: var(--blue-soft);
    color: var(--navy);
    font-size: 0.9rem;
}

.flash {
    padding: 13px 16px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-weight: 650;
}

.flash.info {
    background: var(--blue-soft);
    color: var(--navy);
}

.flash.success {
    background: #e7f6ed;
    color: var(--green);
}

.flash.error {
    background: #fdecec;
    color: var(--red);
}

.table-panel {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 13px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

th {
    color: var(--navy);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #f8fafc;
}

td small {
    display: block;
    color: var(--muted);
    margin-top: 4px;
}

td form {
    margin: 0;
}

.badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 750;
}

.badge.good {
    color: var(--green);
    background: #e7f6ed;
}

.badge.warning {
    color: #8a6500;
    background: #fff4cc;
}

.badge.danger {
    color: var(--red);
    background: #fdecec;
}

.empty-state {
    text-align: center;
    padding: 38px 16px;
}

.attendance-card {
    padding: 34px;
    text-align: center;
}

.punch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 30px auto 0;
    max-width: 600px;
}

.punch {
    min-height: 86px;
    font-size: 1.15rem;
    background: var(--green);
    color: white;
}

.punch.outline {
    color: var(--blue);
    background: white;
    border: 2px solid var(--blue);
}

@media (max-width: 760px) {
    .stats-grid,
    .form-grid,
    .punch-grid {
        grid-template-columns: 1fr;
    }

    .toolbar {
        flex-direction: column;
    }

    .topbar {
        padding-inline: 20px;
    }

    .auth-card {
        margin-top: 30px;
        padding: 25px;
    }
}

.official-time,
.today-record {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 24px auto;
    max-width: 720px;
}

.official-time > div,
.today-record > div {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    background: #f8fafc;
}

.official-time span,
.today-record span {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    margin-bottom: 7px;
}

.official-time strong,
.today-record strong {
    color: var(--navy);
    font-size: 1.05rem;
}

.punch-grid form {
    margin: 0;
}

.punch-grid .punch {
    width: 100%;
}

.completion-note {
    margin: 24px auto 0;
    max-width: 720px;
    padding: 13px 16px;
    border-radius: 10px;
    color: var(--green);
    background: #e7f6ed;
    font-weight: 650;
}

@media (max-width: 760px) {
    .official-time,
    .today-record {
        grid-template-columns: 1fr;
    }
}

select,
textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #cbd5df;
    border-radius: 10px;
    font: inherit;
    background: #fff;
}

textarea {
    resize: vertical;
}

select:focus,
textarea:focus {
    outline: 3px solid rgba(47, 111, 165, 0.16);
    border-color: var(--blue);
}

.six-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.four-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.menu-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.menu-card p {
    flex: 1;
}

.filter-grid {
    display: grid;
    grid-template-columns: 220px minmax(260px, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin: 0;
}

.filter-action button {
    min-width: 120px;
}

.month-lock-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.inline-reason-form {
    margin: 0;
    display: flex;
    gap: 10px;
    min-width: min(520px, 100%);
}

.inline-reason-form input {
    flex: 1;
}

.record-status-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.record-status-line span:first-child {
    color: var(--muted);
}

.status-complete,
.status-currently-working {
    color: var(--green);
    background: #e7f6ed;
}

.status-missing-time-out,
.status-invalid-record {
    color: #8a6500;
    background: #fff4cc;
}

.status-no-record,
.status-account-disabled {
    color: var(--red);
    background: #fdecec;
}

@media (max-width: 900px) {
    .six-cards,
    .four-cards,
    .admin-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-grid {
        grid-template-columns: 1fr;
    }

    .month-lock-panel,
    .inline-reason-form {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .six-cards,
    .four-cards,
    .admin-menu-grid {
        grid-template-columns: 1fr;
    }
}

.metric-text {
    font-size: 1.28rem !important;
}

.rules-notice {
    border-left: 5px solid var(--blue);
}

.compact-list {
    margin: 12px 0 0;
    padding-left: 22px;
    line-height: 1.75;
}

.weekday-fieldset {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    margin-top: 18px;
}

.weekday-fieldset legend {
    padding: 0 8px;
    font-weight: 750;
    color: var(--navy);
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 7px 18px 7px 0;
    font-weight: 600;
}

.checkbox-label input {
    width: auto;
}

.calculation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 760px;
    margin: 24px auto;
}

.calculation-grid > div {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
}

.calculation-grid span {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.calculation-grid strong {
    color: var(--navy);
    font-size: 1.05rem;
}

.small-note {
    font-size: 0.82rem;
}

.calculation-form {
    margin-top: 14px;
}

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

select,
textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #cbd5df;
    border-radius: 10px;
    font: inherit;
    background: #fff;
}

select:focus,
textarea:focus {
    outline: 3px solid rgba(47, 111, 165, 0.16);
    border-color: var(--blue);
}

.two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.inline-filter,
.inline-action-form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 14px;
}

.inline-filter > div {
    min-width: 210px;
    flex: 1;
}

.inline-filter .filter-action {
    flex: 0 0 auto;
    min-width: auto;
}

.inline-action-form input {
    flex: 1;
    min-width: 260px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
}

.checkbox-label input {
    width: auto;
}

.lock-state {
    margin-top: 18px;
    padding: 11px 14px;
    border-radius: 10px;
}

.lock-state.locked {
    background: #e7f6ed;
    color: var(--green);
}

.lock-state.open {
    background: #fff4cc;
    color: #7b5c00;
}

.dtr-header-panel {
    border-left: 5px solid var(--blue);
}

.dtr-status-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dtr-status-row span {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    margin-bottom: 5px;
}

.dtr-status-row strong {
    color: var(--navy);
}

.dtr-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dense-table {
    min-width: 1180px;
}

.dense-table th,
.dense-table td {
    padding: 9px 8px;
    font-size: 0.82rem;
}

.badge.dtr-present,
.badge.dtr-late,
.badge.dtr-holiday_work,
.badge.dtr-rest_day_work,
.badge.dtr-worked_on_leave {
    color: var(--green);
    background: #e7f6ed;
}

.badge.dtr-absent,
.badge.dtr-incomplete {
    color: var(--red);
    background: #fdecec;
}

.badge.dtr-holiday,
.badge.dtr-leave {
    color: #7b5c00;
    background: #fff4cc;
}

.badge.dtr-rest_day,
.badge.dtr-scheduled {
    color: var(--muted);
    background: #eef2f6;
}

@media (max-width: 900px) {
    .two-column-grid,
    .dtr-status-row,
    .dtr-stats {
        grid-template-columns: 1fr;
    }
}


.policy-checks { display:flex; gap:22px; flex-wrap:wrap; padding:16px; background:var(--blue-soft); border-radius:12px; }
.policy-checks .checkbox-label { margin:0; }
.dense-table input, .dense-table select { min-width:110px; }
.dense-table textarea { min-width:220px; }

/* Step 09: projects.db synchronization and assignment portal */
.integration-status {
    border-left: 5px solid var(--blue);
}

.integration-status-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px;
    align-items: center;
}

.sync-security-box {
    padding: 18px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid var(--line);
}

.sync-security-box .badge {
    margin-left: 8px;
}

.integration-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin: 22px 0;
}

.integration-flow > div {
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 10px;
    background: #f8fafc;
    font-weight: 700;
    color: var(--navy);
}

.integration-flow > span {
    color: var(--blue);
    font-size: 1.4rem;
    font-weight: 800;
}

.integration-flow small {
    color: var(--muted);
    font-weight: 500;
}

.mapping-form-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.mapping-form-inline select {
    min-width: 240px;
}

.muted-row {
    opacity: 0.62;
}

.project-sync-panel {
    border-left: 5px solid var(--green);
}

.assignment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.assignment-card {
    margin: 0;
}

.assignment-card-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.assignment-description {
    min-height: 54px;
    line-height: 1.55;
}

.assignment-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 14px;
}

.assignment-meta.compact {
    margin-bottom: 8px;
}

.assignment-meta > div {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px;
}

.assignment-meta span {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    margin-bottom: 4px;
}

.assignment-meta strong {
    font-size: 0.86rem;
    color: var(--navy);
}

.progress-track {
    height: 9px;
    background: #e4eaf0;
    border-radius: 999px;
    overflow: hidden;
    margin: 12px 0 20px;
}

.progress-fill {
    height: 100%;
    background: var(--blue);
    border-radius: 999px;
}

.assignment-info,
.linked-assignment-panel {
    border-left: 5px solid var(--blue);
}

.assignment-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.compact-assignment-list {
    display: grid;
    gap: 12px;
}

.compact-assignment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 15px 17px;
    background: #f8fafc;
}

.compact-assignment p {
    margin: 5px 0;
}

.compact-assignment small {
    color: var(--muted);
}

.compact-empty {
    padding-block: 16px;
}

@media (max-width: 900px) {
    .integration-status-grid,
    .assignment-grid {
        grid-template-columns: 1fr;
    }

    .integration-flow {
        grid-template-columns: 1fr;
    }

    .integration-flow > span {
        transform: rotate(90deg);
        text-align: center;
    }

    .assignment-meta {
        grid-template-columns: 1fr 1fr;
    }

    .assignment-section-heading,
    .compact-assignment {
        flex-direction: column;
        align-items: stretch;
    }
}

.mapping-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.mapping-actions .mapping-form-inline {
    flex: 1 1 420px;
}

/* Step 11 compact Finance DTR */
.compact-payroll-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0}.payable-card{padding:24px;border-radius:18px;border:1px solid #dbe4ec;background:#fff;display:flex;flex-direction:column;gap:8px}.payable-card span{font-size:.78rem;font-weight:800;letter-spacing:.08em}.payable-card strong{font-size:2.6rem;line-height:1}.payable-card small{color:#64748b}.payable-card.payable{background:#eaf8ef;border-color:#b9e2c7}.payable-card.non-payable{background:#fff0f0;border-color:#efc2c2}.payable-card.scheduled{background:#eef5fb;border-color:#c8dcec}.compact-summary-panel{display:grid;grid-template-columns:1fr 1fr;gap:30px}.compact-summary-column h2{margin-top:0}.summary-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #e5e9ee}.summary-line.emphasis{font-size:1.08rem;border-bottom:0;background:#f4f7fa;padding:14px;border-radius:10px;margin-top:8px}.detail-callout{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;margin:18px 0;border:1px dashed #9db2c5;border-radius:14px;background:#f8fbfd}.detail-callout p{margin:5px 0 0;color:#64748b}.detail-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.detail-tabs a{padding:9px 14px;border-radius:999px;background:#edf3f8;color:#17365d;text-decoration:none;font-weight:700}.compact-finance-table .payable-number{font-size:1.2rem;font-weight:800;color:#176b3a}.compact-finance-table .non-payable-number{font-size:1.2rem;font-weight:800;color:#a12a2a}.needs-review-row{background:#fffaf0}@media(max-width:900px){.compact-payroll-grid,.compact-summary-panel{grid-template-columns:1fr}.detail-callout{align-items:flex-start;flex-direction:column}}
.clear-dtr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}.clear-dtr-card{padding:22px;border-radius:16px;border:1px solid #dbe4ec;background:#fff;display:flex;flex-direction:column;gap:8px}.clear-dtr-card span{font-size:.78rem;font-weight:850;letter-spacing:.045em}.clear-dtr-card strong{font-size:2.65rem;line-height:1}.clear-dtr-card small{color:#64748b}.clear-dtr-card em{font-style:normal;font-size:.8rem;font-weight:700;padding:7px 9px;border:1px solid currentColor;border-radius:7px;margin-top:4px}.clear-dtr-card.calendar{background:#eef5fb;border-color:#c8dcec;color:#174f91}.clear-dtr-card.worked{background:#edf9f1;border-color:#b9e2c7;color:#176b3a}.clear-dtr-card.leave{background:#fff1f1;border-color:#efc2c2;color:#a12a2a}.clear-dtr-card.comp{background:#fff8e9;border-color:#efd6a2;color:#a96000}.three-part-summary{display:grid;grid-template-columns:1fr 1.05fr .95fr;gap:16px}.summary-section h2{margin-bottom:3px}.summary-line small{display:block;color:#64748b;font-weight:400}.conversion-equation{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center;padding:18px;background:#f8fafc;border:1px solid #dbe4ec;border-radius:12px;margin:15px 0}.conversion-equation div{text-align:center}.conversion-equation span{display:block;font-size:.72rem;font-weight:800}.conversion-equation strong{display:block;font-size:1.8rem;margin-top:6px}.conversion-result{padding:12px;border-radius:10px;font-weight:700;margin-bottom:20px}.conversion-result.good{background:#eaf8ef;color:#176b3a}.conversion-result.warning{background:#fff7e6;color:#9a5a00}.conversion-result.neutral{background:#eef5fb;color:#174f91}.finance-number{padding:20px;border-radius:12px;text-align:center;margin:14px 0}.finance-number span{display:block;font-weight:850}.finance-number strong{display:block;font-size:2.7rem;margin:7px 0}.finance-number small{color:#64748b}.finance-number.payable{background:#eef5fb;border:1px solid #9bc0eb;color:#174f91}.finance-number.nonpayable{background:#fff1f1;border:1px solid #efb3b3;color:#a12a2a}.finance-note{padding:13px;background:#eef5fb;border-radius:10px;color:#174f91;margin:14px 0}.full-width{display:block;text-align:center}.glance-summary{margin-top:18px}.glance-equation{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:16px;background:#f8fafc;border-radius:12px}.finance-sentence{padding:14px 16px;background:#eaf8ef;border-radius:10px;color:#176b3a;margin:14px 0 0}@media(max-width:1100px){.clear-dtr-grid{grid-template-columns:repeat(2,1fr)}.three-part-summary{grid-template-columns:1fr}}@media(max-width:650px){.clear-dtr-grid{grid-template-columns:1fr}.conversion-equation{grid-template-columns:1fr}.conversion-equation>b{display:none}}


/* Phase 4: modern staff workspace and Finance access */
:root{--surface:#fff;--surface-soft:#f7f9fc;--sidebar:#0f1f38;--sidebar-muted:#9eb0c9;--shadow-soft:0 10px 30px rgba(15,31,56,.08);--radius-xl:22px}
.staff-layout{background:#f3f6fa}.app-frame{min-height:100vh}.side-nav{position:fixed;inset:0 auto 0 0;width:260px;background:linear-gradient(180deg,#102441,#0b192d);color:#fff;padding:22px 16px;overflow-y:auto;z-index:40}.side-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;padding:4px 8px 24px}.brand-mark,.auth-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#4f8fda,#76b1f0);font-weight:900;color:#fff;box-shadow:0 8px 20px rgba(79,143,218,.3)}.side-brand span:last-child{display:flex;flex-direction:column}.side-brand small{color:var(--sidebar-muted);font-size:.74rem;margin-top:3px}.side-nav nav{display:grid;gap:4px}.side-nav nav a{color:#dce7f5;text-decoration:none;padding:11px 13px;border-radius:10px;font-weight:650;font-size:.9rem;transition:.18s}.side-nav nav a:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateX(2px)}.nav-label{color:#6f86a4;font-size:.68rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase;padding:18px 13px 6px}.app-main{margin-left:260px;min-height:100vh}.modern-topbar{height:74px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid #e3e9f1;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:30}.topbar-title{display:flex;flex-direction:column}.topbar-title span,.user-menu span{font-size:.76rem;color:var(--muted)}.user-menu{display:flex;align-items:center;gap:18px}.user-menu>div{display:flex;flex-direction:column;text-align:right}.user-menu form{margin:0}.ghost-button{background:#edf3f9;color:var(--navy);padding:9px 13px}.nav-toggle{display:none;background:transparent;font-size:1.25rem;padding:8px}.staff-layout .page-shell{width:min(1380px,calc(100% - 48px));margin:28px auto 60px}.staff-layout footer{margin-left:0}.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px}.page-heading h1{font-size:clamp(1.75rem,3vw,2.35rem);letter-spacing:-.03em}.role-pill{display:inline-flex;align-items:center;white-space:nowrap;padding:7px 10px;border-radius:999px;font-size:.72rem;font-weight:850;letter-spacing:.03em}.role-pill.finance{background:#fff3d7;color:#8b5a00;border:1px solid #f0d18a}.role-pill.admin{background:#e8f2ff;color:#18558e;border:1px solid #b9d6f5}.modern-stats .stat-card{min-height:145px;padding:21px;border-radius:18px;box-shadow:var(--shadow-soft)}.modern-stats .stat-card strong{font-size:2.25rem}.modern-stats .stat-card small{color:var(--muted);margin-top:auto}.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}.quick-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;background:#fff;border:1px solid #e0e7f0;border-radius:18px;padding:22px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-soft);transition:.2s}.quick-card:hover{transform:translateY(-2px);border-color:#b8d2ef;box-shadow:0 16px 36px rgba(15,31,56,.12)}.quick-card.featured{background:linear-gradient(135deg,#153c6d,#246aa6);color:#fff;border:0}.quick-card h2{font-size:1.05rem;margin:0 0 5px;color:inherit}.quick-card p{margin:0;color:inherit;opacity:.72}.quick-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#edf4fb;color:#28669e;font-weight:900}.featured .quick-icon{background:rgba(255,255,255,.16);color:#fff}.section-panel{margin-top:18px;padding:25px}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.split-layout{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.5fr);gap:18px;align-items:start}.split-layout>.panel{padding:25px}.responsive-table{overflow-x:auto}select{width:100%;padding:12px 13px;border:1px solid #cbd5df;border-radius:10px;background:#fff;font:inherit}.inline-form{margin:0}.modern-auth{text-align:left;position:relative;overflow:hidden}.modern-auth:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:#eaf3fb;right:-80px;top:-90px}.modern-auth .auth-icon{margin-bottom:20px}.modern-auth .full-width{margin-top:20px}.flash.info{background:#eaf3fb;color:#174f91;border-color:#b8d2ef}
@media(max-width:1050px){.side-nav{transform:translateX(-100%);transition:.22s}.nav-open .side-nav{transform:translateX(0)}.app-main{margin-left:0}.nav-toggle{display:block}.modern-topbar{padding:0 18px}.quick-grid,.split-layout{grid-template-columns:1fr}.staff-layout .page-shell{width:min(100% - 28px,1380px)}}
@media(max-width:650px){.topbar-title span,.user-menu>div{display:none}.page-heading{flex-direction:column}.quick-grid{grid-template-columns:1fr}.modern-topbar{height:64px}.staff-layout .page-shell{margin-top:20px}.side-nav{width:285px}.modern-stats{grid-template-columns:1fr 1fr}.modern-stats .stat-card{min-height:120px}.action-row{align-items:stretch}.action-row .button{flex:1 1 auto;text-align:center}}


/* Phase 6: whole-day Finance display and modern freelancer workspace */
.member-layout{background:#f3f6fa}.member-layout .page-shell{width:min(1240px,calc(100% - 48px));margin:28px auto 60px}.member-layout footer{margin-left:0}.member-layout .attendance-card,.member-layout .panel{box-shadow:var(--shadow-soft);border-color:#e0e7f0}.member-page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}.member-page-heading h1{font-size:clamp(1.75rem,3vw,2.4rem);letter-spacing:-.03em;margin-bottom:8px}.member-identity-card{min-width:190px;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,#153c6d,#246aa6);color:#fff;box-shadow:0 12px 28px rgba(21,60,109,.18)}.member-identity-card span,.member-identity-card small{display:block;opacity:.75;font-size:.75rem}.member-identity-card strong{display:block;font-size:1.35rem;margin:4px 0}.member-layout .attendance-card{padding:30px;border-radius:22px}.member-layout .official-time,.member-layout .today-record,.member-layout .calculation-grid{gap:14px}.member-layout .official-time>div,.member-layout .today-record>div,.member-layout .calculation-grid>div{background:#f7f9fc;border:1px solid #e3e9f1;border-radius:14px;padding:16px}.member-layout .punch-grid button{min-height:58px;border-radius:14px}.member-layout .compact-assignment{background:#fff;box-shadow:0 5px 16px rgba(15,31,56,.05)}.compact-finance-table td.payable-number{font-variant-numeric:tabular-nums}.compact-finance-table td.payable-number,.compact-finance-table th{text-align:left}.compact-finance-table td.payable-number{font-size:1.2rem}.compact-finance-table td.payable-number::after{content:" day(s)";font-size:.68rem;font-weight:650;color:#64748b}.compact-finance-table td:nth-child(4),.compact-finance-table td:nth-child(5),.compact-finance-table td:nth-child(6){font-variant-numeric:tabular-nums}
@media(max-width:1050px){.member-layout .page-shell{width:min(100% - 28px,1240px)}}
@media(max-width:650px){.member-page-heading{flex-direction:column}.member-identity-card{width:100%}.member-layout .page-shell{margin-top:20px}.member-layout .official-time,.member-layout .today-record,.member-layout .calculation-grid{grid-template-columns:1fr}}

/* Phase 8: finance clarity and freelancer privacy */
.finance-page-header { align-items: flex-start; }
.finance-filter-panel { padding-top: 18px; padding-bottom: 18px; }
.finance-overview-cards { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
.finance-overview-cards .stat-card small { display:block; margin-top:8px; color:var(--muted, #667085); font-size:.78rem; line-height:1.35; }
.finance-overview-cards .good-card { border-color:#b7e4c7; background:linear-gradient(180deg,#fff,#f4fbf6); }
.finance-overview-cards .warning-card { border-color:#f4d58d; background:linear-gradient(180deg,#fff,#fffaf0); }
.finance-rule-strip { display:grid; grid-template-columns:1fr auto 1fr auto 1.15fr; gap:14px; align-items:center; margin:18px 0; padding:18px; border:1px solid #d8e2ee; border-radius:18px; background:#f8fbff; }
.finance-rule-strip > div { display:flex; gap:12px; align-items:center; min-width:0; }
.finance-rule-strip p { margin:0; display:flex; flex-direction:column; gap:3px; }
.finance-rule-strip small { color:#667085; line-height:1.35; }
.rule-number { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:#e8f1fb; color:#13558e; font-weight:800; }
.rule-operator { font-size:1.6rem; font-weight:800; color:#47708f; }
.finance-rule-strip .rule-result { padding:12px 14px; border-radius:14px; background:#eaf7ef; }
.finance-card-list { display:grid; gap:14px; }
.finance-member-card { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(430px,2.2fr) minmax(260px,1.1fr) auto; gap:20px; align-items:center; padding:18px; border:1px solid #dce5ef; border-radius:16px; background:#fff; }
.finance-member-card.needs-review-card { border-color:#efd797; background:#fffdf7; }
.finance-member-name { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.finance-member-name > strong { font-size:1rem; }
.finance-pay-equation { display:grid; grid-template-columns:1fr auto 1fr auto 1.15fr; gap:10px; align-items:center; }
.finance-metric { min-width:0; padding:12px; border:1px solid #e1e8f0; border-radius:12px; background:#f8fafc; }
.finance-metric span,.finance-supporting-info span { display:block; color:#667085; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.finance-metric strong { display:block; margin:3px 0; font-size:1.65rem; color:#102a43; }
.finance-metric small { color:#667085; }
.finance-metric.payable-result { border-color:#a9d5b6; background:#edf9f1; }
.finance-metric.payable-result strong { color:#176b3a; }
.finance-equation-symbol { font-size:1.4rem; font-weight:800; color:#68849a; }
.finance-supporting-info { display:grid; gap:8px; }
.finance-supporting-info > div { display:flex; justify-content:space-between; gap:12px; padding-bottom:7px; border-bottom:1px dashed #dbe3eb; }
.finance-supporting-info strong { white-space:nowrap; }
.finance-card-actions { display:flex; flex-direction:column; gap:8px; min-width:132px; }

@media (max-width: 1250px) {
  .finance-overview-cards { grid-template-columns:repeat(3,minmax(150px,1fr)); }
  .finance-member-card { grid-template-columns:1fr; }
  .finance-card-actions { flex-direction:row; }
}
@media (max-width: 760px) {
  .finance-overview-cards { grid-template-columns:repeat(2,minmax(130px,1fr)); }
  .finance-rule-strip { grid-template-columns:1fr; }
  .rule-operator { text-align:center; transform:rotate(90deg); }
  .finance-pay-equation { grid-template-columns:1fr; }
  .finance-equation-symbol { text-align:center; }
  .finance-card-actions { flex-direction:column; }
}

/* Phase 10: calendar-day payroll multiplier finance overview */
.payroll-factor-overview{grid-template-columns:repeat(6,minmax(145px,1fr))}.payroll-factor-overview .calendar-card{background:linear-gradient(180deg,#fff,#eef6ff);border-color:#b9d6f5}.payroll-factor-overview .credit-card{background:linear-gradient(180deg,#fff,#f3f0ff);border-color:#d7c8f5}.payroll-formula-banner{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(520px,1.4fr);gap:28px;align-items:center;margin:18px 0;padding:26px 28px;border-radius:20px;background:linear-gradient(135deg,#102f55,#1d5f97);color:#fff;box-shadow:0 16px 36px rgba(16,47,85,.18)}.payroll-formula-banner h2{margin:5px 0 8px;color:#fff}.payroll-formula-banner p{margin:0;color:rgba(255,255,255,.72);line-height:1.55}.payroll-formula-banner .eyebrow{color:#a9d4fa}.formula-visual{display:grid;grid-template-columns:1fr auto .75fr auto 1.15fr;gap:14px;align-items:center;padding:18px 20px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.08)}.formula-visual>div{display:flex;flex-direction:column;gap:4px;text-align:center}.formula-visual span{font-size:.76rem;opacity:.75}.formula-visual strong{font-size:1rem}.formula-divider{width:1px;height:46px;background:rgba(255,255,255,.28)}.formula-equals{font-size:1.6rem!important;font-weight:900;opacity:1!important}.formula-result{padding:12px;border-radius:12px;background:rgba(255,255,255,.14)}.formula-result strong{font-size:1.25rem}.finance-factor-table-wrap{margin-top:18px}.finance-factor-table{width:100%;border-collapse:separate;border-spacing:0;min-width:1180px}.finance-factor-table th{padding:13px 12px;background:#f3f7fb;color:#536477;font-size:.72rem;text-transform:uppercase;letter-spacing:.045em;border-top:1px solid #dce5ef;border-bottom:1px solid #dce5ef}.finance-factor-table th:first-child{border-left:1px solid #dce5ef;border-radius:12px 0 0 0}.finance-factor-table th:last-child{border-right:1px solid #dce5ef;border-radius:0 12px 0 0}.finance-factor-table td{padding:15px 12px;border-bottom:1px solid #e4eaf1;vertical-align:middle;background:#fff}.finance-factor-table tbody tr:hover td{background:#f9fbfd}.finance-factor-table .number-cell{text-align:center;font-variant-numeric:tabular-nums}.finance-factor-table .calendar-column{background:#f2f7fd!important;color:#174f91}.finance-factor-table .calendar-column strong{font-size:1.15rem}.finance-factor-table .credit-value{color:#6546a8;font-weight:800}.finance-factor-table .deduction-value{color:#a12a2a;font-weight:800}.formula-cell strong,.formula-cell small,.multiplier-cell strong,.multiplier-cell small{display:block}.formula-cell strong{font-variant-numeric:tabular-nums;color:#31475c}.formula-cell small{margin-top:4px;color:#667085}.multiplier-column{background:#eaf7ef!important;color:#176b3a!important}.multiplier-cell{min-width:150px;background:#f0faf4!important;text-align:center}.multiplier-cell strong{font-size:1.45rem;color:#176b3a;font-variant-numeric:tabular-nums}.multiplier-cell small{margin-top:4px;color:#5d7565;font-size:.7rem}.member-cell{min-width:160px}.actions-cell{display:flex;gap:7px;white-space:nowrap}.finance-factor-table .needs-review-row td{background:#fffdf7}.finance-factor-table .needs-review-row .multiplier-cell{background:#fff9e8!important}@media(max-width:1250px){.payroll-factor-overview{grid-template-columns:repeat(3,minmax(145px,1fr))}.payroll-formula-banner{grid-template-columns:1fr}.formula-visual{grid-template-columns:1fr auto 1fr auto 1.15fr}}@media(max-width:700px){.payroll-factor-overview{grid-template-columns:repeat(2,minmax(130px,1fr))}.payroll-formula-banner{padding:22px}.formula-visual{grid-template-columns:1fr}.formula-divider{width:100%;height:1px}.formula-equals{text-align:center}.actions-cell{flex-direction:column}}


/* Phase 10.1: mirror payroll multiplier on the clicked DTR summary page */
.payroll-summary-card{display:flex;flex-direction:column;gap:16px}.payroll-summary-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.payroll-summary-heading h2{margin:4px 0}.summary-payroll-multiplier{padding:22px;border-radius:16px;text-align:center;border:1px solid}.summary-payroll-multiplier span,.summary-payroll-multiplier small{display:block}.summary-payroll-multiplier span{font-size:.76rem;font-weight:900;letter-spacing:.08em}.summary-payroll-multiplier strong{display:block;margin:7px 0;font-size:3rem;line-height:1;font-variant-numeric:tabular-nums}.summary-payroll-multiplier small{font-weight:700}.summary-payroll-multiplier.full{background:#edf9f1;border-color:#b9e2c7;color:#176b3a}.summary-payroll-multiplier.reduced{background:#fff8e8;border-color:#ead39a;color:#8a5a00}.summary-payroll-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.summary-payroll-metric{padding:14px;border:1px solid #e0e7ef;border-radius:12px;background:#fff}.summary-payroll-metric span,.summary-payroll-metric small{display:block}.summary-payroll-metric span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#667085}.summary-payroll-metric strong{display:block;margin:5px 0;font-size:1.55rem;font-variant-numeric:tabular-nums}.summary-payroll-metric small{color:#7a8795}.summary-payroll-metric.calendar{background:#eef6ff;border-color:#b9d6f5;color:#174f91}.summary-payroll-metric.credit{background:#f5f1ff;border-color:#d7c8f5;color:#6546a8}.summary-payroll-metric.deduction{background:#fff2f2;border-color:#efc2c2;color:#a12a2a}.summary-payroll-formula{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px 16px;border-radius:12px;background:#f4f7fa}.summary-payroll-formula span{font-size:.75rem;font-weight:800;text-transform:uppercase;color:#667085}.summary-payroll-formula strong{font-size:1.05rem;text-align:center;font-variant-numeric:tabular-nums}.summary-payroll-formula b{font-size:1.2rem;color:#176b3a;font-variant-numeric:tabular-nums}@media(max-width:700px){.summary-payroll-grid{grid-template-columns:1fr}.summary-payroll-formula{grid-template-columns:1fr;text-align:center}.payroll-summary-heading{flex-direction:column}}

/* Phase 11 — professional dashboard and shared application shell */
:root{--nav-width:264px;--topbar-height:76px;--surface:#fff;--surface-2:#f8fafc;--shadow-sm:0 1px 2px rgba(15,23,42,.04);--shadow-md:0 14px 35px rgba(15,42,70,.08);--radius-lg:20px;--radius-md:14px}
.app-frame{min-height:100vh}.side-nav{position:fixed;inset:0 auto 0 0;width:var(--nav-width);padding:20px 14px;background:linear-gradient(180deg,#102f55 0%,#153e68 56%,#102f55 100%);color:#fff;overflow-y:auto;z-index:50;box-shadow:12px 0 35px rgba(10,32,57,.12)}
.side-brand{display:flex;align-items:center;gap:12px;padding:7px 10px 22px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:18px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#74b9f3,#fff);color:#12385d;font-weight:900;font-size:1.25rem;box-shadow:0 8px 20px rgba(0,0,0,.15)}.side-brand strong,.side-brand small{display:block}.side-brand strong{font-size:1rem}.side-brand small{margin-top:3px;color:rgba(255,255,255,.58);font-size:.72rem}
.side-nav nav{display:flex;flex-direction:column;gap:4px}.nav-label{padding:18px 13px 7px;color:rgba(255,255,255,.43);font-size:.65rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.side-nav nav a{display:flex;align-items:center;gap:11px;min-height:43px;padding:10px 12px;border-radius:11px;color:rgba(255,255,255,.72);text-decoration:none;font-size:.87rem;font-weight:650;transition:.18s ease}.side-nav nav a:hover{color:#fff;background:rgba(255,255,255,.08);transform:translateX(2px)}.side-nav nav a.active{color:#fff;background:linear-gradient(90deg,rgba(116,185,243,.28),rgba(116,185,243,.1));box-shadow:inset 3px 0 #7fc3fb}.nav-icon{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:rgba(255,255,255,.08);font-size:.78rem}
.app-main{margin-left:var(--nav-width);min-height:100vh}.modern-topbar{position:sticky;top:0;z-index:40;height:var(--topbar-height);display:flex;align-items:center;gap:16px;padding:0 30px;background:rgba(255,255,255,.92);border-bottom:1px solid #e5ebf1;backdrop-filter:blur(14px)}.nav-toggle{display:none;padding:8px 11px;background:#eef4f9;color:#17365d}.topbar-title strong,.topbar-title span{display:block}.topbar-title strong{font-size:.95rem;color:#153a60}.topbar-title span{font-size:.72rem;color:#7b8794;margin-top:2px}.topbar-spacer{flex:1}.topbar-shortcut{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:10px;color:#536477;text-decoration:none;background:#f4f7fa;border:1px solid #e3e9ef}.topbar-shortcut em{font-style:normal;font-size:.78rem;font-weight:750}.user-menu{display:flex;align-items:center;gap:15px;padding-left:16px;border-left:1px solid #e5e9ee}.user-menu>div{text-align:right}.user-menu strong,.user-menu span{display:block}.user-menu strong{font-size:.84rem;color:#1e3a56}.user-menu span{font-size:.69rem;color:#7a8795;margin-top:2px}.ghost-button{padding:8px 12px;background:#fff;color:#536477;border:1px solid #dce4eb}.staff-layout .page-shell,.member-layout .page-shell{width:min(1440px,calc(100% - 48px));margin:28px auto 60px}
.dashboard-hero{display:grid;grid-template-columns:1.45fr .55fr;gap:28px;align-items:center;padding:34px 38px;margin-bottom:20px;border-radius:24px;background:linear-gradient(125deg,#14395f 0%,#1c5c91 65%,#2c78ae 100%);color:#fff;box-shadow:0 18px 45px rgba(16,47,85,.18);overflow:hidden;position:relative}.dashboard-hero:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-120px;top:-180px;background:rgba(255,255,255,.08)}.dashboard-hero h1{font-size:clamp(1.8rem,3vw,2.6rem);margin:4px 0 9px;color:#fff}.dashboard-hero p{margin:0;max-width:760px;color:rgba(255,255,255,.72);line-height:1.55}.hero-eyebrow{color:#a9d8ff}.hero-actions{display:flex;gap:10px;margin-top:23px}.light-button{background:#fff;color:#16466f}.glass-button{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24)}.hero-status-card{position:relative;z-index:2;padding:23px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.09);backdrop-filter:blur(4px)}.hero-status-card span,.hero-status-card small{display:block}.hero-status-card span{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.65);font-weight:800}.hero-status-card strong{display:block;margin:8px 0 4px;font-size:2.2rem}.hero-status-card small{color:rgba(255,255,255,.68)}.hero-progress{height:7px;margin-top:17px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}.hero-progress i{display:block;height:100%;border-radius:inherit;background:#8ed2ff}
.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:20px}.kpi-card{display:flex;gap:13px;align-items:flex-start;padding:18px;border:1px solid #e1e8ef;border-radius:17px;background:#fff;text-decoration:none;box-shadow:var(--shadow-sm);transition:.18s ease}.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.kpi-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:12px;font-weight:900}.kpi-card small,.kpi-card p{display:block}.kpi-card small{color:#718096;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.kpi-card strong{display:block;margin:4px 0 2px;color:#163a5d;font-size:1.75rem}.kpi-card p{margin:0;color:#8a96a3;font-size:.69rem;line-height:1.35}.tone-blue .kpi-icon{background:#e8f2fc;color:#1767a4}.tone-green .kpi-icon{background:#e8f7ee;color:#237a4b}.tone-red .kpi-icon{background:#fff0f0;color:#b83c3c}.tone-amber .kpi-icon{background:#fff6df;color:#9a6500}.tone-purple .kpi-icon{background:#f2edff;color:#6848aa}.tone-slate .kpi-icon{background:#edf2f6;color:#4e6375}
.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(310px,.65fr);gap:20px;margin-bottom:20px}.dashboard-side-stack{display:grid;gap:20px;align-content:start}.dashboard-panel{padding:23px;border:1px solid #e0e7ee;border-radius:20px;background:#fff;box-shadow:var(--shadow-sm)}.panel-heading-modern{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.panel-heading-modern h2{margin:2px 0 4px;color:#173b5e;font-size:1.16rem}.panel-heading-modern p{margin:0;color:#7a8795;font-size:.8rem}.panel-heading-modern.compact{align-items:center}.text-link{font-size:.78rem;font-weight:800;text-decoration:none;white-space:nowrap}.count-bubble{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#fff0e0;color:#a65f00;font-weight:900}
.modern-table-wrap{overflow-x:auto}.modern-table th{background:transparent;color:#8a96a3;border-top:1px solid #edf1f5;font-size:.67rem}.modern-table td{padding:13px 10px}.person-cell{display:flex;align-items:center;gap:11px}.person-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#dceeff,#edf6ff);color:#1d5f97;font-weight:900}.person-cell strong,.person-cell small{display:block}.person-cell strong{font-size:.84rem;color:#263e55}.person-cell small{font-size:.68rem}.status-chip{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:.67rem;font-weight:800;background:#eef2f6;color:#5d6e7f}.status-chip.status-complete,.status-chip.status-currently-working{background:#e8f7ee;color:#237a4b}.status-chip.status-no-record,.status-chip.status-account-disabled{background:#fff0f0;color:#b83c3c}.status-chip.status-missing-time-out{background:#fff5db;color:#926200}.table-value{font-size:.76rem;color:#536477}.task-count{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#eef4fa;color:#275d87;font-size:.76rem;font-weight:900}.row-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;text-decoration:none;background:#f5f8fb;color:#41647f;font-weight:900}
.approval-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid #edf1f5;text-decoration:none;color:inherit}.approval-icon{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;font-size:.72rem;font-weight:900}.approval-icon.leave{background:#fff5dc;color:#946300}.approval-icon.overtime{background:#f0eaff;color:#6746a7}.approval-row strong,.approval-row small{display:block}.approval-row strong{font-size:.82rem;color:#294157}.approval-row small{margin-top:3px;color:#8a96a3;font-size:.68rem}.approval-row b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:9px;background:#f2f5f8;color:#34516a}.all-clear{display:flex;gap:11px;align-items:center;padding:14px;margin-top:10px;border-radius:13px;background:#edf9f1;color:#237a4b}.all-clear>span{font-size:1.2rem}.all-clear strong,.all-clear small{display:block}.all-clear small{margin-top:2px;color:#5c806b}.live-dot{width:10px;height:10px;border-radius:50%;background:#36a269;box-shadow:0 0 0 5px #e8f7ee}.sync-metric{padding:12px 0;border-top:1px solid #edf1f5}.sync-metric span,.sync-metric strong{display:block}.sync-metric span{color:#8a96a3;font-size:.7rem}.sync-metric strong{margin-top:4px;color:#294157;font-size:.8rem}.full-button{width:100%;margin-top:8px}.dashboard-empty{padding:28px;text-align:center;color:#8491a0;background:#f8fafc;border-radius:14px}
.dashboard-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.activity-list{display:grid}.activity-item{position:relative;display:grid;grid-template-columns:16px 1fr;gap:10px;padding:0 0 17px}.activity-item:not(:last-child):before{content:"";position:absolute;left:5px;top:14px;bottom:0;width:1px;background:#e3e9ef}.activity-dot{position:relative;z-index:1;width:11px;height:11px;margin-top:4px;border-radius:50%;background:#66a7db;border:3px solid #e9f4fd}.activity-item strong{font-size:.79rem;color:#294157}.activity-item p{margin:3px 0;color:#718096;font-size:.74rem;line-height:1.4}.activity-item small{font-size:.66rem;color:#9aa5b0}.quick-launch-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-launch-grid a{display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding:13px;border:1px solid #e4eaf0;border-radius:13px;text-decoration:none;background:#fbfcfd;transition:.16s}.quick-launch-grid a:hover{border-color:#bcd5e9;background:#f5faff}.quick-launch-grid span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e9f2fa;color:#286590;font-size:.7rem;font-weight:900}.quick-launch-grid strong{font-size:.78rem;color:#294157}.quick-launch-grid small{margin-top:2px;color:#8a96a3;font-size:.67rem}
@media(max-width:1250px){.dashboard-kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.side-nav{transform:translateX(-100%);transition:.2s}.nav-open .side-nav{transform:translateX(0)}.app-main{margin-left:0}.nav-toggle{display:inline-flex}.dashboard-main-grid,.dashboard-bottom-grid{grid-template-columns:1fr}.modern-topbar{padding:0 20px}}
@media(max-width:760px){.dashboard-hero{grid-template-columns:1fr;padding:26px}.dashboard-kpi-grid{grid-template-columns:repeat(2,1fr)}.topbar-shortcut,.user-menu>div{display:none}.staff-layout .page-shell,.member-layout .page-shell{width:min(100% - 24px,1440px);margin-top:18px}.quick-launch-grid{grid-template-columns:1fr}}
@media(max-width:480px){.dashboard-kpi-grid{grid-template-columns:1fr}.hero-actions{flex-direction:column}.modern-topbar{gap:8px}.user-menu{padding-left:8px}.dashboard-panel{padding:18px}}

/* Milestone 13 bilingual controls */
.language-switcher{display:inline-flex;align-items:center;gap:.3rem;margin:0 .65rem;white-space:nowrap}.language-switcher button{appearance:none;border:0;background:transparent;color:inherit;padding:.2rem .25rem;cursor:pointer;font:inherit;opacity:.62}.language-switcher button.active{font-weight:700;opacity:1;text-decoration:underline;text-underline-offset:3px}.public-tools{display:flex;align-items:center;gap:.7rem}html[lang="zh-Hant-TW"] body{font-family:Inter,"Noto Sans TC","Microsoft JhengHei",sans-serif}@media(max-width:760px){.language-switcher{margin:0 .25rem}.topbar-title span{display:none}}

/* Release 20.6: whole-day Finance clarity */
.finance-whole-day-table{min-width:1420px}.finance-whole-day-table .worked-value{color:#176b3a}.finance-whole-day-table .payable-equivalent{background:#f1f8ff!important;color:#174f91}.finance-whole-day-table .treatment-cell{min-width:190px}.finance-whole-day-table .treatment-cell strong,.finance-whole-day-table .treatment-cell small{display:block}.finance-whole-day-table .treatment-cell strong{color:#17365d}.finance-whole-day-table .treatment-cell small{margin-top:4px;color:#667085}.whole-day-formula{grid-template-columns:1fr auto 1fr auto 1.15fr}.summary-payroll-multiplier .treatment-title{font-size:2rem;line-height:1.15}.whole-day-summary-formula{grid-template-columns:auto 1fr auto}.member-monthly-summary{margin-top:20px}.member-monthly-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.member-summary-card{padding:20px;border:1px solid #dbe4ec;border-radius:15px;background:#fff}.member-summary-card span,.member-summary-card small{display:block}.member-summary-card span{font-size:.72rem;font-weight:850;letter-spacing:.05em}.member-summary-card strong{display:block;font-size:2.2rem;line-height:1;margin:9px 0}.member-summary-card small{color:#64748b}.member-summary-card.worked{background:#edf9f1;border-color:#b9e2c7;color:#176b3a}.member-summary-card.leave{background:#fff1f1;border-color:#efc2c2;color:#a12a2a}.member-summary-card.comp{background:#fff8e9;border-color:#efd6a2;color:#a96000}.member-summary-card.payable{background:#eef5fb;border-color:#c8dcec;color:#174f91}.member-credit-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:15px}.member-credit-strip>div{padding:14px 16px;border:1px solid #dbe4ec;border-radius:12px;background:#f8fafc}.member-credit-strip span,.member-credit-strip strong{display:block}.member-credit-strip span{font-size:.75rem;color:#667085}.member-credit-strip strong{margin-top:5px;color:#17365d}@media(max-width:950px){.member-monthly-grid{grid-template-columns:repeat(2,1fr)}.member-credit-strip{grid-template-columns:1fr}.whole-day-formula{grid-template-columns:1fr}.whole-day-summary-formula{grid-template-columns:1fr;text-align:center}}@media(max-width:620px){.member-monthly-grid{grid-template-columns:1fr}}

/* Release 20.8 · PostgreSQL project-member mapping */
.mapping-panel{border:1px solid #e4ecf4}.mapping-table{min-width:1180px}.mapping-table td{vertical-align:middle}.mapping-table .unmapped-row{background:linear-gradient(90deg,rgba(255,247,229,.62),rgba(255,255,255,0) 45%)}.mapping-form{display:flex;align-items:center;gap:8px;min-width:360px}.mapping-form select{min-width:220px;max-width:300px;padding:9px 34px 9px 11px;border:1px solid #d9e3ec;border-radius:10px;background:#fff;color:#294158;font:inherit;font-size:.76rem}.mapping-form select:focus{outline:2px solid rgba(52,132,201,.2);border-color:#65a3d7}.compact-button{padding:9px 12px;white-space:nowrap;font-size:.72rem}.mapping-detail{display:block;margin-top:5px;color:#758698;font-size:.67rem;line-height:1.35}.stats-grid:has(.stat-card:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}@media(max-width:1180px){.stats-grid:has(.stat-card:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.stats-grid:has(.stat-card:nth-child(5)){grid-template-columns:1fr}.mapping-form{align-items:stretch;flex-direction:column;min-width:250px}.mapping-form select{max-width:none;width:100%}}