:root {
    --bg: #f3f6fa;
    --surface: #ffffff;
    --ink: #17212f;
    --muted: #5c6b82;
    --line: #d8e1ec;
    --brand: #166f7a;
    --brand-strong: #0c4f59;
    --accent: #b7791f;
    --good: #12805c;
    --warn: #b56208;
    --bad: #c0352b;
    --purple: #7c3aed;
    --blue: #1d70b8;
    --shadow: 0 12px 34px rgba(20, 36, 55, 0.08);
    --radius: 8px;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.attendance-intelligence-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: center;
    border: 0;
    color: #fff;
    background:
        radial-gradient(circle at 10% 15%, rgba(56, 189, 248, 0.28), transparent 28%),
        radial-gradient(circle at 88% 25%, rgba(20, 184, 166, 0.24), transparent 30%),
        linear-gradient(135deg, #0f172a 0%, #1e3a8a 52%, #0f766e 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.attendance-intelligence-hero h2 {
    margin: 0.15rem 0 0.35rem;
    color: #fff;
    font-size: clamp(1.45rem, 2.2vw, 2.15rem);
}

.attendance-intelligence-hero p {
    max-width: 880px;
    margin: 0;
    color: #dbeafe;
    line-height: 1.6;
}

.attendance-intelligence-hero .eyebrow {
    color: #7dd3fc;
}

.intelligence-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.intelligence-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.38rem 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #e0f2fe;
    background: rgba(255, 255, 255, 0.10);
}

.intelligence-filter-panel {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.intelligence-filter-form {
    align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.intelligence-filter-form label {
    min-width: 0;
}

.intelligence-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(155px, 1fr));
    gap: 0.85rem;
}

.intelligence-kpi-card {
    position: relative;
    min-height: 116px;
    background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%);
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.intelligence-kpi-card::after {
    content: "";
    position: absolute;
    right: -26px;
    top: -24px;
    width: 78px;
    height: 78px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.13);
}

.intelligence-kpi-card span {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.intelligence-kpi-card strong {
    display: block;
    margin-top: 0.42rem;
    color: #0f172a;
    font-size: 1.65rem;
    line-height: 1.1;
}

.intelligence-kpi-card small,
.intelligence-table small {
    display: block;
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.76rem;
}

.intelligence-kpi-card.accent-green { background: linear-gradient(145deg, #ffffff 0%, #dcfce7 100%); border-color: rgba(22, 163, 74, 0.18); }
.intelligence-kpi-card.accent-green::after { background: rgba(22, 163, 74, 0.15); }
.intelligence-kpi-card.accent-teal { background: linear-gradient(145deg, #ffffff 0%, #ccfbf1 100%); border-color: rgba(13, 148, 136, 0.18); }
.intelligence-kpi-card.accent-teal::after { background: rgba(13, 148, 136, 0.16); }
.intelligence-kpi-card.accent-purple { background: linear-gradient(145deg, #ffffff 0%, #ede9fe 100%); border-color: rgba(124, 58, 237, 0.18); }
.intelligence-kpi-card.accent-purple::after { background: rgba(124, 58, 237, 0.15); }
.intelligence-kpi-card.accent-orange { background: linear-gradient(145deg, #ffffff 0%, #fef3c7 100%); border-color: rgba(245, 158, 11, 0.24); }
.intelligence-kpi-card.accent-orange::after { background: rgba(245, 158, 11, 0.16); }
.intelligence-kpi-card.accent-red { background: linear-gradient(145deg, #ffffff 0%, #fee2e2 100%); border-color: rgba(220, 38, 38, 0.20); }
.intelligence-kpi-card.accent-red::after { background: rgba(220, 38, 38, 0.14); }
.intelligence-kpi-card.accent-grey { background: linear-gradient(145deg, #ffffff 0%, #e2e8f0 100%); border-color: rgba(71, 85, 105, 0.18); }
.intelligence-kpi-card.accent-grey::after { background: rgba(71, 85, 105, 0.14); }

.intelligence-table {
    min-width: 1480px;
    border-collapse: separate;
    border-spacing: 0;
}

.intelligence-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    background: #eef6ff;
    color: #0f172a;
}

.intelligence-table td,
.intelligence-table th {
    padding: 0.78rem 0.85rem;
    vertical-align: top;
}

.intelligence-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.intelligence-table tbody tr:hover {
    background: #eff6ff;
}

.table-link {
    color: #1d4ed8;
    text-decoration: none;
}

.table-link:hover {
    text-decoration: underline;
}

.metric-good {
    color: #166534;
    font-weight: 800;
}

.metric-watch {
    color: #b45309;
    font-weight: 800;
}

.metric-risk {
    color: #b91c1c;
    font-weight: 800;
}

.pattern-pill {
    display: inline-flex;
    max-width: 240px;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
}

.pattern-stable {
    background: #dcfce7;
    color: #166534;
}

.pattern-watch {
    background: #ffedd5;
    color: #9a3412;
}

.pattern-risk {
    background: #fee2e2;
    color: #991b1b;
}

.pattern-mixed {
    background: #ede9fe;
    color: #5b21b6;
}

.pattern-limited {
    background: #e2e8f0;
    color: #475569;
}

.empty-state {
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    padding: 1.5rem;
    color: #475569;
    text-align: center;
}

.empty-state strong {
    color: #0f172a;
}

.notification-admin-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0f766e 0%, #1d4ed8 100%);
}

.notification-admin-hero h2 {
    margin: 0.15rem 0 0.35rem;
    color: #fff;
}

.notification-admin-hero p,
.notification-admin-hero .eyebrow {
    color: #dbeafe;
}

.notification-preferences-form,
.notification-test-form {
    display: grid;
    gap: 0.9rem;
}

.notification-test-form select:disabled,
.notification-test-form option:disabled,
.notification-test-submit:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.notification-readiness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 0.55rem;
    margin: 1rem 0;
}

.notification-readiness-card {
    border: 1px solid #e2e8f0;
    border-left: 4px solid #f59e0b;
    border-radius: 14px;
    background: #fff7ed;
    padding: 0.7rem 0.8rem;
}

.notification-readiness-card.ok {
    border-left-color: #10b981;
    background: #ecfdf5;
}

.notification-readiness-card span,
.notification-readiness-card small {
    display: block;
    color: #64748b;
    font-size: 0.76rem;
}

.notification-readiness-card strong {
    display: block;
    margin: 0.15rem 0;
    color: #0f172a;
    font-size: 1rem;
}

.notification-readiness-card.warn strong {
    color: #92400e;
}

.notification-destination-note {
    margin: 0;
}

.preference-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.45rem 0.8rem;
}

.notification-self-panel {
    margin-top: 1rem;
    background: #f8fafc;
}

.notification-self-panel summary {
    cursor: pointer;
    font-weight: 800;
}

.notification-self-panel summary small {
    display: block;
    color: #64748b;
    font-weight: 600;
}

.notification-history-table {
    min-width: 980px;
}

.notification-history-table td,
.notification-history-table th {
    vertical-align: top;
}

@media (max-width: 1250px) {
    .intelligence-kpi-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 760px) {
    .attendance-intelligence-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .intelligence-kpi-grid {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    background:
        linear-gradient(180deg, #eef5f8 0, rgba(238, 245, 248, 0) 260px),
        var(--bg);
    color: var(--ink);
}

body.auth-page {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr;
    place-items: center;
    padding: clamp(18px, 4vw, 56px);
    background:
        radial-gradient(circle at 18% 24%, rgba(31, 132, 143, 0.19), transparent 28%),
        radial-gradient(circle at 86% 80%, rgba(236, 177, 53, 0.14), transparent 24%),
        linear-gradient(135deg, #eef7f8 0%, #f7fafc 50%, #edf4f7 100%);
}

.auth-shell {
    width: min(1040px, 100%);
    min-height: min(640px, calc(100vh - clamp(36px, 8vw, 112px)));
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    overflow: hidden;
    border: 1px solid rgba(194, 215, 221, 0.92);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 26px 74px rgba(20, 55, 67, 0.16);
}

.auth-welcome {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(30px, 5vw, 56px);
    overflow: hidden;
    color: #edf9fa;
    background:
        radial-gradient(circle at 84% 18%, rgba(115, 202, 208, 0.26), transparent 26%),
        radial-gradient(circle at 11% 94%, rgba(244, 183, 68, 0.18), transparent 28%),
        linear-gradient(145deg, #0d3440 0%, #125968 50%, #0f6973 100%);
}

.auth-welcome::before,
.auth-welcome::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(206, 238, 240, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.auth-welcome::before { width: 340px; height: 340px; right: -150px; bottom: -146px; }
.auth-welcome::after { width: 184px; height: 184px; left: -86px; top: 94px; }
.auth-welcome > * { position: relative; z-index: 1; }
.auth-welcome-brand { color: #fff; }
.auth-logo-lockup {
    display: grid;
    place-items: center;
    gap: 2px;
    flex: 0 0 72px;
}
.auth-brand-logo {
    width: auto;
    height: 62px;
    flex: 0 0 auto;
    object-fit: contain;
}
.auth-welcome-brand .auth-brand-logo {
    width: auto;
    height: 74px;
    flex-basis: auto;
    filter: drop-shadow(0 3px 7px rgba(2, 25, 32, .28));
}
.auth-welcome-brand .auth-logo-lockup { flex-basis: 84px; }
.auth-logo-caption { display: block; color: #526879; font-size: .54rem; font-weight: 700; line-height: 1.15; text-align: center; white-space: nowrap; }
.auth-welcome-brand strong { color: #fff; }
.auth-welcome-brand small { color: rgba(255, 255, 255, .85); }
.auth-welcome-brand .auth-logo-caption { color: rgba(255, 255, 255, .92); }
.auth-card .auth-brand strong { color: #0f6672; }
.auth-card .auth-brand small { color: #6b8792; }
.auth-welcome-copy { max-width: 470px; margin: auto 0 24px; }
.auth-kicker { margin: 0 0 8px; color: #3a7b8a; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.auth-welcome .auth-kicker { color: #a7e1e4; }
.auth-welcome h1 { max-width: 470px; margin: 0 0 15px; color: #fff; font-size: clamp(2rem, 3vw, 2.65rem); line-height: 1.1; letter-spacing: -.03em; }
.auth-welcome-copy > p:last-child { max-width: 445px; margin: 0; color: #d8eef0; font-size: 1rem; line-height: 1.65; }
.auth-welcome-points { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-welcome-points span { padding: 7px 10px; border: 1px solid rgba(214, 241, 242, 0.24); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #e4f6f7; font-size: .78rem; font-weight: 700; }
.auth-welcome-footer { margin: 22px 0 0; color: #b9dce0; font-size: .77rem; line-height: 1.45; }

.auth-card {
    width: min(430px, 100%);
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(20, 36, 55, 0.16);
}

.auth-shell .auth-card {
    align-self: center;
    justify-self: center;
    padding: clamp(28px, 4vw, 42px);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.auth-brand {
    margin-bottom: 18px;
    color: var(--ink);
}

.auth-shell .auth-brand { margin-bottom: 28px; }

.auth-brand small {
    color: var(--muted);
}

.auth-card h1 {
    margin: 0 0 7px;
    color: #103747;
    font-size: clamp(1.85rem, 3vw, 2.25rem);
    letter-spacing: -.025em;
}

.auth-card > p {
    margin: 0 0 18px;
    color: var(--muted);
}

.auth-shell .auth-card .auth-intro {
    margin: 0 0 22px;
    color: var(--muted);
    line-height: 1.5;
}

.auth-card .auth-account-identity {
    display: grid;
    gap: 3px;
    margin: 0 0 14px;
    padding: 10px 12px;
    color: var(--ink);
    background: #eef7f8;
    border: 1px solid #c5e0e3;
    border-radius: 8px;
}

.auth-account-identity span {
    font-size: 12px;
    color: var(--muted);
}

.auth-account-identity strong {
    overflow-wrap: anywhere;
}

.auth-form {
    display: grid;
    gap: 14px;
}

.auth-shell .auth-form { gap: 16px; }

.auth-shell .auth-form label {
    display: grid;
    gap: 7px;
    color: #365a67;
    font-size: .82rem;
    font-weight: 800;
}

.auth-shell .auth-form input {
    min-height: 46px;
    padding-inline: 13px;
    border-color: #cbdde3;
    background: #fbfdfe;
}

.auth-shell .auth-form input:focus { background: #fff; }

.auth-shell .auth-form .primary {
    min-height: 47px;
    margin-top: 4px;
    border-radius: 8px;
    background: linear-gradient(135deg, #146f7c, #0e5967);
    box-shadow: 0 9px 18px rgba(14, 89, 103, 0.18);
}

.auth-shell .auth-form .primary:hover { background: linear-gradient(135deg, #0e5967, #094a57); }

.auth-security-note {
    margin: 19px 0 0;
    padding-top: 15px;
    border-top: 1px solid #dce8eb;
    color: #6a828a;
    font-size: .78rem;
    line-height: 1.5;
}

.auth-form button {
    min-height: 42px;
}

@media (max-width: 760px) {
    body.auth-page { padding: 16px; }
    .auth-shell { min-height: 0; grid-template-columns: 1fr; border-radius: 14px; }
    .auth-welcome { min-height: 226px; padding: 26px 26px 24px; }
    .auth-welcome-brand .auth-logo-lockup { flex-basis: 66px; }
    .auth-welcome-brand .auth-brand-logo { height: 56px; }
    .auth-welcome-copy { margin: 26px 0 0; }
    .auth-welcome h1 { max-width: 520px; font-size: clamp(1.65rem, 7vw, 2.2rem); }
    .auth-welcome-copy > p:last-child, .auth-welcome-points, .auth-welcome-footer { display: none; }
    .auth-shell .auth-card { width: 100%; padding: 28px 26px 30px; }
    .auth-shell .auth-card .auth-brand { display: none; }
}

@media (max-width: 420px) {
    body.auth-page { padding: 0; background: #f4f8f9; }
    .auth-shell { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
    .auth-welcome { min-height: 202px; padding: 24px 22px; }
    .auth-shell .auth-card { padding: 27px 22px 30px; }
    .auth-shell .auth-form { gap: 14px; }
}

.sidebar {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #0d2b36 0%, #102532 100%);
    color: #eef7f8;
    min-height: 100vh;
    padding: 24px 18px;
    box-shadow: 8px 0 28px rgba(9, 31, 42, 0.16);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f5b84b;
    color: #16222a;
    font-weight: 800;
}

.brand strong,
.brand small {
    display: block;
}

.brand small {
    color: #a9c0c7;
    margin-top: 3px;
}

.nav {
    display: grid;
    gap: 6px;
}

.nav-group {
    display: grid;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid rgba(205, 220, 224, 0.12);
}

.nav-group:first-child {
    padding-top: 0;
    border-top: 0;
}

.nav-group-title {
    margin: 0;
    padding: 2px 10px;
    color: #88a8b1;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav a {
    color: #cddce0;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 650;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.nav a:hover,
.nav a.active {
    background: #1b3a47;
    color: #ffffff;
}

.nav a:hover {
    transform: translateX(2px);
}

.user-menu {
    margin-top: 22px;
    padding: 14px;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(205, 220, 224, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.user-menu strong,
.user-menu small {
    display: block;
}

.user-menu small {
    color: #a9c0c7;
}

.user-menu a {
    margin-top: 6px;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.main {
    min-width: 0;
    padding: 28px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 4px;
}

.dashboard-topbar {
    align-items: start;
    gap: 14px;
    margin-bottom: 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(216, 225, 236, 0.82);
}

.dashboard-topbar h1 {
    font-size: 28px;
}

.dashboard-statusbar {
    max-width: min(860px, 100%);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.dashboard-statusbar > span:not(.badge):not(.sr-only) {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.dashboard-statusbar strong {
    color: var(--ink);
    font-size: 12px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-statusbar .badge {
    min-height: 30px;
}

.dashboard-statusbar button {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
}

.dashboard-sync-warning {
    margin-bottom: 10px;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.eyebrow {
    color: var(--muted);
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

h1,
h2 {
    margin: 0;
    letter-spacing: 0;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 18px;
}

.search-box input,
input,
select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 10px 12px;
    color: var(--ink);
    font: inherit;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.search-box input:focus,
input:focus,
select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(22, 111, 122, 0.14);
    outline: 0;
}

.search-box {
    width: min(320px, 100%);
}

.notice {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #e9f7ef;
    color: #075234;
    border: 1px solid #bde5cb;
    font-weight: 650;
}

.notice.muted {
    background: #f7fafc;
    border-color: var(--line);
    color: var(--muted);
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.metrics.inset {
    padding: 18px;
    margin-bottom: 0;
}

.metrics article,
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.metrics article {
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.metrics article::before,
.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--brand);
}

.metrics span,
.metrics small {
    color: var(--muted);
}

.metrics strong {
    display: block;
    font-size: 28px;
    margin: 8px 0;
    color: #071528;
}

.row {
    display: grid;
    gap: 14px;
}

.col {
    min-width: 0;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.table {
    margin: 0;
}

.live-status {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: stretch;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-color: #c9dbe2;
    background: linear-gradient(135deg, #ffffff 0%, #f5fbfc 100%);
}

.system-overview {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(360px, 0.9fr);
    gap: 18px;
    align-items: center;
    padding: 18px;
    margin-bottom: 18px;
    border-color: #c8dbe3;
    background: linear-gradient(135deg, #ffffff 0%, #eff8fb 100%);
}

.system-overview span,
.system-overview small {
    color: var(--muted);
}

.system-overview > div:first-child > span {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.system-overview strong {
    display: block;
    font-size: 24px;
}

.system-overview small {
    display: block;
    margin-top: 7px;
}

.overview-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.overview-stats div {
    padding: 12px;
    border: 1px solid rgba(22, 111, 122, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
}

.overview-stats strong,
.overview-stats span {
    display: block;
}

.overview-stats strong {
    font-size: 20px;
}

.overview-stats span {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 750;
}

.live-status strong,
.live-status small {
    display: block;
}

.live-status strong {
    margin-top: 6px;
    font-size: 20px;
}

.live-status small,
.live-status-meta {
    color: var(--muted);
}

.live-status-meta {
    display: grid;
    gap: 7px;
    text-align: right;
    font-weight: 700;
}

.sync-health-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    min-width: min(620px, 100%);
    text-align: left;
}

.sync-health-grid span {
    padding: 7px 9px;
    border: 1px solid #edf1f5;
    border-radius: 8px;
    background: #fbfdff;
    font-size: 12px;
}

.sync-health-grid strong {
    display: block;
    margin-top: 2px;
    color: var(--ink);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.sync-time-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.sync-time-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid #edf1f5;
    border-radius: 8px;
    background: #fbfdff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.sync-time-row strong {
    margin: 0;
    font-size: 12px;
    color: var(--ink);
}

.sync-warning {
    margin-top: 6px;
    color: var(--bad) !important;
    font-weight: 800;
    max-width: 900px;
    text-wrap: balance;
}

.kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 14px;
    margin: 4px 0 14px;
    padding: 12px;
    border: 1px solid #dce3ec;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.dashboard-kpi-groups {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 10px;
    margin: 4px 0 14px;
    min-width: 0;
}

.dashboard-kpi-group {
    min-width: 0;
    padding: 10px;
    border: 1px solid #dce7ed;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dashboard-kpi-group--only-secondary {
    grid-column: 1 / -1;
}

.dashboard-kpi-group-head {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 30px;
    margin: 0 1px 8px;
    padding: 0 1px 7px;
    border-bottom: 1px solid #e4edf1;
}

.dashboard-kpi-group-head h2 {
    margin: 0;
    color: #173f4d;
    font-size: 0.94rem;
    line-height: 1.25;
}

.dashboard-kpi-group-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
}

.dashboard-kpi-group-work-management .dashboard-kpi-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-kpi-group-temporary-staff .dashboard-kpi-group-grid,
.dashboard-kpi-group-visitor-management .dashboard-kpi-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-kpi-group-visitor-management .dashboard-kpi-group-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dashboard-kpi-group .kpi-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "title"
        "value";
    align-content: start;
    gap: 4px;
    min-height: 78px;
    padding: 10px 9px 9px 12px;
    border-color: #e0e9ee;
    border-radius: 8px;
    box-shadow: none;
}

.dashboard-kpi-group-grid > .kpi-card {
    min-width: 0;
}

.dashboard-kpi-group .kpi-card:hover {
    box-shadow: 0 5px 12px rgba(20, 36, 55, 0.1);
}

.dashboard-kpi-group .kpi-card .kpi-icon,
.dashboard-kpi-group .kpi-card small,
.dashboard-kpi-group .kpi-card em {
    display: none;
}

.dashboard-kpi-group .kpi-title {
    display: block;
    overflow: visible;
    color: #48566a;
    font-size: 0.7rem;
    line-height: 1.18;
    letter-spacing: 0.015em;
    white-space: normal;
}

.dashboard-kpi-group .kpi-card strong {
    margin: 0;
    font-size: clamp(1.42rem, 1.8vw, 1.7rem);
    line-height: 1.05;
}

@media (max-width: 1279px) {
    .dashboard-kpi-groups {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-group-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-kpi-group--only-secondary {
        grid-column: auto;
    }

    .dashboard-kpi-group-work-management .dashboard-kpi-group-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-kpi-group-temporary-staff .dashboard-kpi-group-grid,
    .dashboard-kpi-group-visitor-management .dashboard-kpi-group-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .dashboard-kpi-group-grid,
    .dashboard-kpi-group-temporary-staff .dashboard-kpi-group-grid,
    .dashboard-kpi-group-visitor-management .dashboard-kpi-group-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-kpi-groups {
        gap: 10px;
        margin-bottom: 12px;
    }

    .dashboard-kpi-group {
        padding: 11px;
        border-radius: 12px;
    }

    .dashboard-kpi-group-head {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    .dashboard-kpi-group .kpi-card {
        min-height: 76px;
    }
}

@media (max-width: 400px) {
    .dashboard-kpi-group-grid,
    .dashboard-kpi-group-work-management .dashboard-kpi-group-grid,
    .dashboard-kpi-group-temporary-staff .dashboard-kpi-group-grid,
    .dashboard-kpi-group-visitor-management .dashboard-kpi-group-grid {
        grid-template-columns: 1fr;
    }
}

.kpi-card {
    --card-accent: var(--brand);
    --card-accent-soft: rgba(22, 111, 122, 0.12);
    --card-accent-tint: rgba(22, 111, 122, 0.07);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    grid-template-areas:
        "title icon"
        "value icon"
        "note note";
    gap: 5px 14px;
    min-height: 116px;
    padding: 18px 16px 16px;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    background:
        linear-gradient(180deg, var(--card-accent-tint) 0, transparent 58px),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(20, 36, 55, 0.06);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.kpi-card,
.kpi-card:visited,
.kpi-card:hover,
.kpi-card:focus {
    color: var(--ink);
    text-decoration: none;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(20, 36, 55, 0.12);
    border-color: var(--card-accent);
}

.kpi-card:focus-visible {
    outline: 3px solid var(--card-accent-soft);
    outline-offset: 2px;
}

.kpi-icon {
    grid-area: icon;
    position: relative;
    width: 52px;
    height: 52px;
    display: inline-grid;
    place-items: center;
    justify-self: end;
    border-radius: 10px;
    border: 2px solid var(--card-accent);
    background: #fff;
    color: var(--card-accent);
    text-decoration: none;
    box-shadow: 0 8px 18px var(--card-accent-soft);
}

.kpi-icon::before,
.kpi-icon::after {
    content: "";
    display: block;
    background: currentColor;
}

.kpi-icon-people::before {
    width: 20px;
    height: 12px;
    border-radius: 12px 12px 6px 6px;
    box-shadow: -7px -7px 0 -3px currentColor, 7px -7px 0 -3px currentColor;
}

.kpi-icon-check::before {
    width: 18px;
    height: 9px;
    border: solid currentColor;
    border-width: 0 0 3px 3px;
    transform: rotate(-45deg) translate(1px, -2px);
    background: transparent;
}

.kpi-icon-away::before {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid currentColor;
}

.kpi-icon-away::after {
    position: absolute;
    width: 14px;
    height: 3px;
    border-radius: 999px;
}

.kpi-icon-clock::before {
    width: 20px;
    height: 20px;
    border: 3px solid currentColor;
    border-radius: 50%;
    background: transparent;
}

.kpi-icon-clock::after {
    position: absolute;
    width: 9px;
    height: 3px;
    border-radius: 999px;
    transform: translate(3px, 1px) rotate(90deg);
    box-shadow: -5px 4px 0 0 currentColor;
}

.kpi-icon-entry::before,
.kpi-icon-exit::before {
    width: 20px;
    height: 14px;
    border: 3px solid currentColor;
    border-radius: 5px;
    background: transparent;
}

.kpi-icon-entry::after,
.kpi-icon-exit::after {
    position: absolute;
    width: 13px;
    height: 3px;
    border-radius: 999px;
}

.kpi-icon-exit::after {
    transform: rotate(180deg);
}

.kpi-icon-pulse::before {
    width: 24px;
    height: 16px;
    background: transparent;
    border-bottom: 3px solid currentColor;
    border-left: 3px solid transparent;
    box-shadow: inset 6px -5px 0 -3px currentColor, inset 13px 6px 0 -3px currentColor;
}

.kpi-icon-sync::before {
    width: 22px;
    height: 22px;
    border: 3px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    background: transparent;
}

.kpi-title,
.kpi-card small {
    color: var(--muted);
    text-decoration: none;
}

.kpi-title {
    grid-area: title;
    display: flex;
    align-items: center;
    min-height: 0;
    font-size: 11px;
    letter-spacing: 0.02em;
    font-weight: 900;
    text-transform: uppercase;
    color: #48566a;
}

.kpi-card strong {
    grid-area: value;
    display: block;
    margin: 8px 0 0;
    font-size: clamp(30px, 3vw, 38px);
    line-height: 1.05;
    color: #111827;
    text-decoration: none;
}

.kpi-card small {
    grid-area: note;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.35;
}

.kpi-card em {
    position: absolute;
    inset: auto 14px 12px auto;
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--card-accent);
    color: #fff;
    font-size: 0;
    font-style: normal;
    text-decoration: none;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.kpi-card em::after {
    content: ">";
    margin-left: 0;
    font-size: 14px;
    font-weight: 900;
}

.kpi-card:hover em {
    opacity: 1;
    transform: translateX(0);
}

.kpi-card .kpi-icon,
.kpi-card em {
    pointer-events: none;
}

.kpi-card.is-static {
    cursor: default;
}

@media (hover: none) {
    .kpi-card:not(.is-static):active {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgba(20, 36, 55, 0.10);
        border-color: var(--card-accent);
    }
}

.border-success .kpi-icon {
    background: rgba(18, 128, 92, 0.12);
    color: var(--good);
}

.border-warning .kpi-icon {
    background: rgba(181, 98, 8, 0.13);
    color: var(--warn);
}

.border-danger .kpi-icon {
    background: rgba(192, 53, 43, 0.12);
    color: var(--bad);
}

.border-success {
    --card-accent: var(--good);
    --card-accent-soft: rgba(18, 128, 92, 0.12);
    --card-accent-tint: rgba(18, 128, 92, 0.07);
}

.border-success::before {
    background: var(--good);
}

.border-warning {
    --card-accent: var(--warn);
    --card-accent-soft: rgba(181, 98, 8, 0.13);
    --card-accent-tint: rgba(181, 98, 8, 0.08);
}

.border-warning::before {
    background: var(--warn);
}

.border-danger {
    --card-accent: var(--bad);
    --card-accent-soft: rgba(192, 53, 43, 0.12);
    --card-accent-tint: rgba(192, 53, 43, 0.07);
}

.border-danger::before {
    background: var(--bad);
}

.border-primary {
    --card-accent: var(--brand);
    --card-accent-soft: rgba(22, 111, 122, 0.12);
    --card-accent-tint: rgba(22, 111, 122, 0.07);
}

.border-primary::before {
    background: var(--brand);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.command-charts {
    display: grid;
    grid-template-columns: minmax(190px, 0.75fr) minmax(230px, 0.9fr) minmax(300px, 1.2fr);
    gap: 10px;
    align-items: stretch;
    margin-bottom: 12px;
}

.command-charts .panel {
    min-height: 0;
}

.command-charts .panel-head {
    min-height: 42px;
    padding: 9px 12px;
}

.command-charts .donut-wrap {
    min-height: 104px;
    padding: 10px;
}

.command-charts .donut-chart {
    width: 88px;
}

.command-charts .split-meter {
    min-height: 104px;
    margin: 10px 12px;
}

.command-charts .mini-rate-list {
    max-height: 148px;
    overflow: auto;
}

.compact-chart {
    min-height: 150px;
    max-height: 180px;
}

.command-filter-panel {
    margin: 10px 0 12px;
}

.command-filter-panel details {
    display: grid;
}

.command-filter-panel summary {
    min-height: 42px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font-weight: 850;
}

.command-filter-panel summary::-webkit-details-marker {
    display: none;
}

.command-filter-panel summary::after {
    content: "+";
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--brand);
}

.command-filter-panel details[open] summary::after {
    content: "-";
}

.command-filter-panel summary small {
    color: var(--muted);
    font-weight: 750;
}

.dashboard-filter-form {
    position: static;
    box-shadow: none;
    border-top: 1px solid var(--line);
}

.compact-filter-form {
    position: static;
    grid-template-columns: minmax(160px, 240px) auto;
    align-items: end;
    box-shadow: none;
}

.exception-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #dce3ec;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.exception-card {
    --exception-accent: var(--brand);
    min-height: 92px;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "count label"
        "count note";
    align-items: center;
    align-content: start;
    gap: 5px 12px;
    padding: 16px 14px;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.98)),
        linear-gradient(90deg, var(--exception-accent), var(--exception-accent));
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 7px 18px rgba(20, 36, 55, 0.06);
    overflow: hidden;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.exception-card,
.exception-card:visited,
.exception-card:hover,
.exception-card:focus {
    color: var(--ink);
    text-decoration: none;
}

.exception-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--exception-accent);
}

.exception-card::after {
    content: ">";
    position: absolute;
    right: 13px;
    bottom: 10px;
    color: var(--exception-accent);
    font-size: 14px;
    font-weight: 900;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.exception-card:hover {
    border-color: var(--exception-accent);
    box-shadow: 0 14px 28px rgba(20, 36, 55, 0.11);
    transform: translateY(-2px);
}

.exception-card:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.exception-card.active {
    border-color: var(--exception-accent);
    box-shadow: 0 0 0 3px rgba(22, 111, 122, 0.12), 0 12px 30px rgba(20, 36, 55, 0.12);
}

.exception-card:nth-child(2) {
    --exception-accent: var(--warn);
}

.exception-card:nth-child(3) {
    --exception-accent: var(--brand-strong);
}

.exception-card:nth-child(4) {
    --exception-accent: var(--purple);
}

.exception-card:nth-child(5) {
    --exception-accent: var(--bad);
}

.exception-card:nth-child(6) {
    --exception-accent: var(--blue);
}

.exception-label,
.exception-card small {
    color: var(--muted);
    text-decoration: none;
}

.exception-label {
    grid-area: label;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #303d50;
}

.exception-card strong {
    grid-area: count;
    width: 54px;
    height: 54px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(22, 111, 122, 0.1);
    color: var(--exception-accent);
    font-size: 22px;
    line-height: 1.1;
    text-align: center;
}

.exception-card:nth-child(2) strong {
    background: rgba(181, 98, 8, 0.12);
}

.exception-card:nth-child(4) strong {
    background: rgba(124, 58, 237, 0.1);
}

.exception-card:nth-child(5) strong {
    background: rgba(192, 53, 43, 0.1);
}

.exception-card:nth-child(6) strong {
    background: rgba(29, 112, 184, 0.1);
}

.exception-card small {
    grid-area: note;
    font-size: 12px;
    line-height: 1.35;
}

.exception-card em {
    display: none;
}

.exception-card em::after {
    content: "";
    margin-left: 0;
}

#exceptions-overview {
    margin-top: 8px;
    border-color: #cfdae6;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 248, 252, 0.94)),
        #ffffff;
}

#exceptions-overview .exception-card {
    min-height: 104px;
    padding: 17px 15px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 253, 0.99)),
        linear-gradient(90deg, var(--exception-accent), var(--exception-accent));
}

#exceptions-overview .exception-card.active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(240, 247, 249, 0.99)),
        linear-gradient(90deg, var(--exception-accent), var(--exception-accent));
}

#exceptions-overview .exception-card.active::after {
    opacity: 1;
    transform: translateX(0);
}

.donut-wrap {
    min-height: 122px;
    display: grid;
    place-items: center;
    padding: 18px;
}

.donut-chart {
    --value: 0;
    width: 104px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #fff 0 56%, transparent 57%),
        conic-gradient(var(--good) calc(var(--value) * 1%), #fee4df 0);
    box-shadow: inset 0 0 0 1px rgba(20, 36, 55, 0.08);
}

.donut-chart strong,
.donut-chart span {
    grid-area: 1 / 1;
}

.donut-chart strong {
    margin-top: -10px;
    font-size: 21px;
}

.donut-chart span {
    margin-top: 42px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.split-meter {
    min-height: 122px;
    padding: 12px;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.meter-segment {
    min-width: 10%;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    font-weight: 850;
    text-align: center;
}

.meter-segment.late {
    background: var(--warn);
}

.meter-segment.present {
    background: var(--good);
}

.mini-rate-list {
    padding: 10px 12px 12px;
    display: grid;
    gap: 8px;
}

.mini-rate-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
}

.mini-rate-list .progress {
    grid-column: 1 / -1;
}

.mini-rate-list span,
.mini-rate-list small {
    display: block;
}

.mini-rate-list small {
    color: var(--muted);
    margin-top: 2px;
}

.command-charts .donut-chart {
    width: 88px;
}

.command-charts .split-meter {
    min-height: 104px;
}

.command-charts .mini-rate-list {
    max-height: 148px;
    overflow: auto;
}

.wide-panel {
    grid-column: 1 / -1;
}

.progress {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eef3;
}

.progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--good));
}

.alert-list,
.rank-list {
    padding: 14px 18px 18px;
    display: grid;
    gap: 10px;
}

.alert-list div,
.rank-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f5;
}

.alert-list div:last-child,
.rank-list div:last-child {
    border-bottom: 0;
}

.alert-list strong {
    font-size: 24px;
}

.rank-list span,
.rank-list small {
    display: block;
}

.rank-list small {
    color: var(--muted);
    margin-top: 3px;
}

.bar-chart {
    min-height: 138px;
    padding: 10px 12px 12px;
    display: flex;
    align-items: end;
    gap: 8px;
    border-top: 1px solid #edf1f5;
}

.bar-column {
    flex: 1 1 0;
    min-width: 24px;
    height: 102px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 8px;
    text-align: center;
}

.bar {
    align-self: end;
    min-height: 8px;
    border-radius: 6px 6px 0 0;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: start center;
    padding-top: 6px;
    font-size: 11px;
    font-weight: 800;
}

.bar.alt {
    background: var(--accent);
}

.bar-column small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.split {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
    gap: 18px;
}

.report-grid {
    margin: 18px 0;
    align-items: start;
}

.panel {
    overflow: hidden;
}

.panel-head {
    min-height: 50px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.panel-head span {
    color: var(--muted);
    font-size: 13px;
}

.attendance-summary-panel {
    position: relative;
}

.attendance-summary-details {
    display: block;
}

.attendance-summary-summary {
    min-height: 62px;
    padding: 13px 128px 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(22, 111, 122, 0.1), transparent 42%),
        linear-gradient(180deg, #ffffff, #fbfdff);
    cursor: pointer;
    list-style: none;
}

.attendance-summary-summary::-webkit-details-marker {
    display: none;
}

.summary-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.summary-title strong,
.summary-title small {
    display: block;
}

.summary-title strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.15;
}

.summary-title small,
.summary-meta {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.summary-toggle-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 8px 18px rgba(22, 111, 122, 0.18);
}

.summary-toggle-icon::before {
    content: "";
    width: 9px;
    height: 9px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -2px);
    transition: transform 0.16s ease;
}

.attendance-summary-details:not([open]) .summary-toggle-icon::before {
    transform: rotate(-45deg) translate(-1px, 1px);
}

.attendance-export-button {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

.attendance-summary-content {
    padding: 12px;
    background: #f8fbfd;
    border-bottom: 1px solid var(--line);
}

.department-list {
    padding: 8px 18px 18px;
}

.department-list div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid #edf1f5;
}

.department-list div:last-child {
    border-bottom: 0;
}

.department-detail-panel {
    margin-bottom: 14px;
}

.department-detail-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
    gap: 12px;
    padding: 12px;
    background: #f8fbfd;
    border-bottom: 1px solid var(--line);
}

.department-dashboard {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.department-hero {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(520px, 1.2fr);
    gap: 14px;
    align-items: end;
    padding: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #eef7f8 100%);
    border: 1px solid #cfe0e4;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.department-hero h2 {
    margin: 2px 0 4px;
    font-size: 28px;
}

.department-hero span,
.department-filter-bar label {
    color: var(--muted);
}

.department-filter-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr)) auto auto auto;
    gap: 10px;
    align-items: end;
}

.department-filter-bar label {
    display: grid;
    gap: 5px;
    font-size: 12px;
    font-weight: 800;
}

.department-filter-bar input {
    height: 38px;
}

.department-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.department-kpis article,
.department-highlight {
    position: relative;
    overflow: hidden;
    padding: 15px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.department-kpis article::before,
.department-highlight::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--brand);
}

.department-kpis article:nth-child(4)::before,
.department-kpis article:nth-child(8)::before,
.department-highlight.success::before {
    background: var(--good);
}

.department-kpis article:nth-child(5)::before,
.department-kpis article:nth-child(7)::before,
.department-highlight.warning::before {
    background: var(--accent);
}

.department-kpis article:nth-child(6)::before,
.department-highlight.danger::before {
    background: var(--danger);
}

.department-kpis span,
.department-kpis small,
.department-highlight span,
.department-highlight small {
    display: block;
    color: var(--muted);
}

.department-kpis strong,
.department-highlight strong {
    display: block;
    margin: 7px 0;
    font-size: 25px;
    color: #071528;
}

.department-overview-grid {
    display: grid;
    grid-template-columns: minmax(420px, 1.35fr) minmax(320px, 0.65fr);
    gap: 14px;
}

.department-rate-bars {
    display: grid;
    gap: 10px;
    padding: 14px 16px 16px;
}

.department-rate-bars a {
    display: grid;
    grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 1fr) 56px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
    border: 1px solid #edf1f5;
    border-radius: 10px;
    background: #fbfdff;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.department-rate-bars a:hover,
.department-highlight:hover,
.department-title-link:hover {
    transform: translateY(-1px);
    border-color: #bcd3d8;
    box-shadow: 0 12px 24px rgba(15, 38, 64, 0.08);
}

.department-rate-bars span,
.department-rate-bars strong {
    font-weight: 850;
}

.department-highlights {
    display: grid;
    gap: 10px;
}

.department-highlight {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.department-title-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    color: #0f3f49;
    font-weight: 900;
    text-decoration: none;
    border: 1px solid #d7e6ea;
    border-radius: 9px;
    background: #f4fbfc;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.department-rate-cell {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 42px;
    gap: 9px;
    align-items: center;
    min-width: 160px;
}

.button.compact {
    min-height: 34px;
    padding: 8px 10px;
    white-space: nowrap;
}

.button.compact.success {
    background: #16a34a;
    color: #fff;
    border-color: #15803d;
}

.panel-subsection {
    padding: 14px;
}

.access-workspace {
    display: grid;
    gap: 16px;
}

.access-section {
    scroll-margin-top: 16px;
}

.access-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(248, 252, 253, 0.96);
    box-shadow: 0 10px 28px rgba(20, 36, 55, 0.06);
}

.access-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #d9e7ed;
    border-radius: 999px;
    background: #fff;
    color: #173a45;
    text-decoration: none;
    font-weight: 850;
    white-space: nowrap;
}

.access-tabs a:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.workflow-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 10px;
    padding: 14px;
}

.workflow-strip span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid #dbe7ee;
    border-radius: 10px;
    background: #f8fbfd;
    color: #173a45;
    font-weight: 900;
    text-align: center;
}

.access-overview-grid {
    padding: 14px 14px 0;
}

.access-upload-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    gap: 14px;
    padding: 14px;
}

.upload-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #dbe7ee;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    box-shadow: 0 10px 26px rgba(20, 36, 55, 0.06);
}

.upload-card h3 {
    margin: 0 0 4px;
    font-size: 17px;
}

.upload-card p,
.upload-card small {
    margin: 0;
    color: var(--muted);
}

.preview-report,
.coverage-grid {
    display: grid;
    gap: 10px;
}

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

.preview-report strong {
    grid-column: 1 / -1;
}

.preview-report span {
    padding: 9px 10px;
    border: 1px solid #e1eaf1;
    border-radius: 8px;
    background: #fff;
    font-weight: 800;
    color: #26384d;
}

.inline-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.coverage-section {
    border-top: 1px solid var(--line);
}

.coverage-grid {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    margin: 10px 0 14px;
}

.coverage-card {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 100px;
    padding: 14px 14px 12px;
    overflow: hidden;
    border: 1px solid #dbe7ee;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(20, 36, 55, 0.055);
}

.coverage-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brand), #f0a935);
}

.coverage-card span,
.coverage-card small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.coverage-card strong {
    color: var(--ink);
    font-size: 25px;
    line-height: 1;
}

.coverage-details {
    margin-top: 10px;
    overflow-x: auto;
    border: 1px solid #dde8ef;
    border-radius: 10px;
    background: #fff;
}

.coverage-details summary {
    cursor: pointer;
    padding: 12px 14px;
    color: #173a45;
    font-weight: 900;
    border-bottom: 1px solid #eef3f6;
}

.coverage-details:not([open]) summary {
    border-bottom: 0;
}

.access-filter-form {
    position: static;
    margin: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
}

.matching-card-list {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.matching-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(220px, 0.95fr) minmax(300px, 1.25fr) minmax(190px, 0.75fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid #dbe7ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(20, 36, 55, 0.055);
}

.matching-card.test-row {
    background: #fffaf0;
    border-color: #f7d998;
}

.match-person,
.match-suggestion,
.match-controls,
.match-status-actions {
    display: grid;
    gap: 8px;
}

.match-person strong,
.match-suggestion strong {
    color: var(--ink);
    font-size: 15px;
}

.match-person span,
.match-suggestion span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.match-person small,
.match-suggestion small,
.match-controls small,
.match-status-actions small {
    color: var(--muted);
}

.match-controls select,
.match-controls input,
.match-controls textarea {
    width: 100%;
}

.employee-combobox {
    position: relative;
    display: grid;
}

.employee-combobox input[type="search"] {
    padding-right: 34px;
}

.employee-combobox select {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    display: none;
    min-height: 0;
    max-height: 220px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    background: #122333;
    border-color: #1f4158;
    box-shadow: 0 18px 34px rgba(20, 36, 55, 0.28);
}

.employee-combobox select option {
    padding: 7px 9px;
    color: #fff;
    background: #122333;
}

.employee-combobox[data-open="true"] select {
    display: block;
}

.employee-combobox[data-empty="true"] select {
    border-color: #7a3942;
    background: #2b1820;
}

.access-accordion {
    overflow: hidden;
}

.access-section,
.matching-card,
.coverage-table-card,
.access-table tr {
    scroll-margin-top: 18px;
}

.access-accordion-summary,
.coverage-table-card summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    list-style: none;
}

.access-accordion-summary {
    padding: 15px 18px;
    color: #173a45;
    font-weight: 900;
}

.access-accordion-summary::-webkit-details-marker,
.coverage-table-card summary::-webkit-details-marker {
    display: none;
}

.access-accordion-summary::after,
.coverage-table-card summary::after {
    content: "v";
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid #d9e7ed;
    border-radius: 999px;
    color: var(--brand);
    background: #fff;
    font-weight: 950;
}

.access-accordion[open] > .access-accordion-summary::after,
.coverage-table-card[open] > summary::after {
    content: "^";
}

.access-accordion-summary span {
    font-size: 18px;
}

.access-accordion-summary small,
.coverage-table-card summary small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.access-target-highlight {
    animation: accessTargetPulse 2.4s ease;
}

@keyframes accessTargetPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 111, 122, 0.4);
        outline: 2px solid rgba(22, 111, 122, 0.38);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(22, 111, 122, 0);
        outline-color: rgba(22, 111, 122, 0.16);
    }
    100% {
        box-shadow: none;
        outline-color: transparent;
    }
}

.coverage-table-grid {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.coverage-table-card {
    overflow-x: auto;
    border: 1px solid #dbe7ee;
    border-radius: 10px;
    background: #fff;
}

.coverage-table-card summary {
    margin: 0;
    padding: 13px 14px;
    border-bottom: 1px solid #eef3f6;
    color: #173a45;
    font-size: 16px;
    font-weight: 900;
}

.empty-state.compact {
    padding: 14px;
    min-height: 0;
}

.access-table input,
.access-table select,
.access-table textarea {
    width: 100%;
    min-width: 180px;
}

.access-table textarea {
    resize: vertical;
}

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

.access-personal-email-intro {
    display: grid;
    gap: 0.6rem;
    padding: 0 14px 14px;
}

.access-personal-email-intro p {
    margin: 0;
    color: var(--muted);
}

.personal-email-table {
    min-width: 1180px;
}

.personal-email-table input[type="email"] {
    min-width: 220px;
}

.personal-email-table .checkline {
    margin: 0.1rem 0;
    font-size: 0.82rem;
}

.personal-email-row-form {
    margin: 0;
}

.text-danger {
    color: #b91c1c !important;
}

.access-actions {
    display: grid;
    gap: 7px;
    min-width: 150px;
}

.access-actions button,
.access-actions select {
    min-height: 32px;
    padding: 7px 10px;
}

.action-menu-label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.department-table tbody tr:hover {
    background: #f6fbfc;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

th,
td {
    text-align: left;
    padding: 11px 13px;
    border-bottom: 1px solid #edf1f5;
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 1;
}

tbody tr {
    transition: background 0.12s ease;
}

tbody tr:hover {
    background: #fbfdff;
}

.compact-sheet th,
.compact-sheet td {
    padding: 6px 9px;
    font-size: 12px;
}

.compact-sheet select,
.compact-sheet button {
    min-height: 28px;
    padding: 4px 7px;
    font-size: 11px;
}

.linked-metrics a {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.linked-metrics a:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
}

.linked-metrics a span,
.linked-metrics a small {
    color: var(--muted);
}

.linked-metrics a strong {
    font-size: 24px;
}

.rate-good .progress-bar {
    background: #198754;
}

.rate-good > strong,
.rate-good small {
    color: #137044;
}

.rate-fair .progress-bar {
    background: #f59e0b;
}

.rate-fair > strong,
.rate-fair small {
    color: #b46900;
}

.rate-poor .progress-bar {
    background: #dc3545;
}

.rate-poor > strong,
.rate-poor small {
    color: #b42333;
}

.worked-hours {
    display: inline-flex;
    min-width: 68px;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-weight: 850;
    white-space: nowrap;
}

.worked-hours-good {
    background: #dcf7e8;
    color: #137044;
}

.worked-hours-partial {
    background: #fff1cf;
    color: #a45d00;
}

.worked-hours-poor {
    background: #fde3e6;
    color: #b42333;
}

tr.day-saturday > td {
    background: #fff8dc;
}

tr.day-sunday > td {
    background: #fde8e8;
}

tr.day-holiday > td {
    background: #f2eafe;
}

tr.day-special-workday > td {
    background: #e5f4ff;
}

tr.day-saturday:hover > td,
tr.day-sunday:hover > td,
tr.day-holiday:hover > td,
tr.day-special-workday:hover > td {
    filter: brightness(0.98);
}

.badge.holiday,
.badge.public-holiday,
.badge.holiday-worked {
    background: #eadbff;
    color: #6836a6;
}

.badge.weekend,
.badge.weekend-worked {
    background: #fff0bd;
    color: #8a5900;
}

.holiday-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(310px, 0.75fr);
    gap: 16px;
    margin: 16px 0;
}

.holiday-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(92px, 1fr));
    gap: 1px;
    padding: 12px;
    background: var(--line);
    overflow-x: auto;
}

.holiday-weekday {
    min-width: 92px;
    padding: 9px;
    background: #f4f7fa;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
}

.holiday-day {
    min-width: 92px;
    min-height: 106px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #fff;
}

.holiday-day.empty {
    background: #f6f8fa;
}

.holiday-day.day-saturday {
    background: #fff8dc;
}

.holiday-day.day-sunday {
    background: #fde8e8;
}

.holiday-day.day-holiday {
    background: #f2eafe;
}

.holiday-day.day-special-workday {
    background: #e5f4ff;
}

.holiday-day.today {
    box-shadow: inset 0 0 0 2px var(--brand);
}

.holiday-day > strong {
    font-size: 17px;
}

.holiday-day > small {
    color: var(--muted);
}

.holiday-chip {
    padding: 4px 6px;
    border-radius: 5px;
    background: #7442ad;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
}

.holiday-chip.provisional {
    background: #c87800;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px 14px;
}

.calendar-legend span {
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}

.legend-saturday {
    background: #fff8dc;
    color: #8a5900;
}

.legend-sunday {
    background: #fde8e8;
    color: #a52632;
}

.legend-holiday {
    background: #f2eafe;
    color: #6836a6;
}

.legend-workday {
    background: #e5f4ff;
    color: #17658f;
}

.holiday-form {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.holiday-form .wide,
.holiday-form button {
    grid-column: 1 / -1;
}

.holiday-form textarea {
    resize: vertical;
}

.muted-row {
    opacity: 0.56;
}

.attendance-calendar-panel {
    margin: 10px 0;
}

.attendance-calendar-panel > summary {
    padding: 9px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 850;
}

.attendance-calendar-panel > summary small {
    color: var(--muted);
    font-size: 12px;
}

.attendance-calendar-filter {
    padding: 0 12px 10px;
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 8px;
}

.attendance-calendar-filter label {
    display: grid;
    gap: 3px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 800;
}

.attendance-calendar-filter select {
    width: 150px;
}

.attendance-calendar-filter input[type="number"] {
    width: 88px;
}

.attendance-calendar-filter select,
.attendance-calendar-filter input,
.attendance-calendar-filter button {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 12px;
}

.attendance-calendar-filter button {
    align-self: end;
}

.employee-attendance-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(76px, 1fr));
    gap: 1px;
    padding: 0 12px 12px;
    background: var(--line);
    overflow-x: auto;
}

.employee-calendar-day {
    min-width: 76px;
    min-height: 78px;
    padding: 7px;
    display: grid;
    align-content: start;
    gap: 3px;
    background: #fff;
}

.employee-calendar-day.empty {
    background: #f6f8fa;
}

.employee-calendar-day > span {
    color: var(--muted);
    font-size: 11px;
}

.employee-calendar-day > strong {
    font-size: 18px;
}

.employee-calendar-day > small {
    font-size: 9px;
    line-height: 1.2;
}

.employee-calendar-day.status-present,
.employee-calendar-day.status-early-out {
    background: #e5f7ed;
    color: #137044;
}

.employee-calendar-day.status-late,
.employee-calendar-day.status-incomplete {
    background: #fff1cf;
    color: #a45d00;
}

.employee-calendar-day.status-absent {
    background: #fde3e6;
    color: #b42333;
}

.employee-calendar-day.day-saturday {
    background: #fff8dc;
}

.employee-calendar-day.day-sunday {
    background: #fde8e8;
}

.employee-calendar-day.day-holiday {
    background: #f2eafe;
    color: #6836a6;
}

.attendance-legend span {
    background: #f4f7fa;
    color: var(--ink);
}

.self-service-metrics {
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.self-service-metrics a {
    min-height: 82px;
    padding: 9px 10px;
    gap: 2px;
    border-radius: 12px;
    border-left: 5px solid #2563eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.self-service-metrics a span {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.01em;
}

.self-service-metrics a strong {
    font-size: 20px;
    line-height: 1.1;
}

.self-service-metrics a small {
    font-size: 10px;
    line-height: 1.2;
}

.self-service-metrics .self-metric-expected {
    border-left-color: #2563eb;
    background: #eff6ff;
}

.self-service-metrics .self-metric-present {
    border-left-color: #16a34a;
    background: #ecfdf5;
}

.self-service-metrics .self-metric-absent {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.self-service-metrics .self-metric-late {
    border-left-color: #f97316;
    background: #fff7ed;
}

.self-service-metrics .self-metric-open {
    border-left-color: #7c3aed;
    background: #f5f3ff;
}

.self-service-metrics .self-metric-worked {
    border-left-color: #0891b2;
    background: #ecfeff;
}

.self-service-metrics .self-metric-weekend {
    border-left-color: #b45309;
    background: #fffbeb;
}

.self-service-metrics .self-metric-holiday {
    border-left-color: #9333ea;
    background: #faf5ff;
}

.self-service-metrics a:hover {
    transform: translateY(-1px);
    filter: saturate(1.02);
}

.attendance-history-panel {
    margin-top: 12px;
}

.attendance-history-panel .compact-head {
    padding: 4px 0 10px;
    border-bottom: 0;
}

.attendance-history-panel .compact-head h2 {
    font-size: 16px;
    margin: 0 0 2px;
}

.attendance-history-panel .compact-head span {
    font-size: 12px;
    color: var(--muted);
}

.self-service-history-table {
    margin-top: 0;
}

.attendance-month-row td {
    background: #eef6ff;
    color: #075985;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.analytics-collapse {
    margin-bottom: 16px;
}

.analytics-collapse > summary {
    padding: 15px 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    color: var(--ink);
    font-weight: 850;
    list-style: none;
}

.analytics-collapse > summary::-webkit-details-marker {
    display: none;
}

.analytics-collapse > summary::after {
    content: "Expand";
    color: var(--brand);
    font-size: 12px;
}

.analytics-collapse[open] > summary::after {
    content: "Collapse";
}

.analytics-collapse > summary small {
    color: var(--muted);
    font-weight: 650;
}

.analytics-collapse .command-charts,
.analytics-collapse .dashboard-grid {
    padding: 0 12px 12px;
}

.report-selector {
    display: flex;
    gap: 7px;
    padding: 12px 14px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.report-selector a {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.report-selector a.active,
.report-selector a:hover {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.single-report-grid {
    grid-template-columns: minmax(0, 1fr);
}

.table-pagination {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 1px solid var(--line);
    background: #f8fafc;
}

.table-pagination a,
.table-pagination span {
    min-width: 34px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--muted);
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.table-pagination a:hover,
.table-pagination a.active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.table-pagination span {
    min-width: auto;
    border-color: transparent;
    background: transparent;
}

tr.new-punch {
    animation: newPunch 4s ease-out;
}

@keyframes newPunch {
    0% {
        background: #dff7ea;
        box-shadow: inset 4px 0 0 var(--good);
    }
    100% {
        background: transparent;
        box-shadow: inset 4px 0 0 transparent;
    }
}

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

#dashboard-attendance-table table {
    min-width: 1040px;
}

#dashboard-attendance-table {
    margin-bottom: 10px;
    max-height: 430px;
    overflow: auto;
}

#dashboard-attendance-table td {
    padding-top: 8px;
    padding-bottom: 8px;
}

#dashboard-attendance-table td:first-child strong {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef7f8;
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 800;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: #eef2f6;
    color: #344054;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge.active,
.badge.approved,
.badge.present,
.badge.paid {
    background: #dff7ea;
    color: var(--good);
    border-color: #b8e8cd;
}

.badge.pending,
.badge.warning,
.badge.late,
.badge.draft,
.badge.on-leave,
.badge.leave,
.badge.weekend,
.badge.holiday,
.badge.duplicate-punches {
    background: #fff3d8;
    color: var(--warn);
    border-color: #ffd993;
}

.badge.incomplete,
.badge.missed-clock-out,
.badge.open-punch {
    background: #f1e8ff;
    color: var(--purple);
    border-color: #dac5ff;
}

.badge.muted {
    background: #f1f5f9;
    color: #475569;
    border-color: #dbe3ee;
}

.badge.early-out,
.badge.early_out {
    background: #e0f2fe;
    color: var(--blue);
    border-color: #b9e0fb;
}

.badge.overtime {
    background: #e0f2fe;
    color: var(--blue);
    border-color: #b9e0fb;
}

.badge.rejected,
.badge.absent,
.badge.inactive,
.badge.left,
.badge.deceased {
    background: #fee4df;
    color: var(--bad);
    border-color: #ffc4ba;
}

.badge.volunteer,
.badge.suspended,
.badge.on-leave {
    background: #f5e8ff;
    color: var(--purple);
    border-color: #e2c5ff;
}

button {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 8px;
    min-height: 40px;
    padding: 9px 13px;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

button:hover {
    border-color: var(--brand);
}

button.primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

button.primary:hover {
    background: var(--brand-strong);
}

.button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    font-weight: 750;
}

.button:hover,
a.button:hover {
    border-color: var(--brand);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.panel-actions,
.inline-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.panel-actions span {
    color: var(--muted);
    font-weight: 800;
}

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

.inline-form button {
    min-height: 36px;
    padding: 7px 11px;
}

.report-intro {
    padding: 15px 18px;
    display: grid;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    background: #fbfdff;
}

.report-intro span {
    color: var(--muted);
}

.export-strip {
    padding: 14px 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.panel:has(table),
.report-section:has(table) {
    overflow-x: auto;
}

.filter-form {
    position: sticky;
    top: 0;
    z-index: 8;
    padding: 12px 14px 14px;
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(20, 36, 55, 0.08);
}

.checkline {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    align-self: end;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fafbfc;
    color: var(--ink);
}

.checkline input {
    width: auto;
    min-height: auto;
}

.filter-actions {
    display: flex;
    align-items: end;
    gap: 10px;
}

.attendance-filter-form {
    position: static;
    padding: 0 0 12px;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 10px;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.attendance-filter-form label {
    padding: 10px;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(20, 36, 55, 0.04);
}

.attendance-filter-form label:focus-within {
    border-color: rgba(22, 111, 122, 0.45);
    box-shadow: 0 0 0 3px rgba(22, 111, 122, 0.1);
}

.attendance-filter-form input,
.attendance-filter-form select {
    min-height: 36px;
    padding: 6px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.attendance-filter-form .checkline {
    min-height: 54px;
    align-self: stretch;
    padding: 10px 12px;
    border-color: #dbe4ee;
    background: #fff;
}

.attendance-filter-form .checkline:has(input:checked) {
    border-color: var(--brand);
    background: rgba(22, 111, 122, 0.08);
    color: var(--brand-strong);
}

.attendance-filter-form .filter-actions {
    align-items: stretch;
}

.attendance-filter-form .filter-actions .primary,
.attendance-filter-form .filter-actions .button {
    min-height: 54px;
}

.attendance-metrics {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    padding: 0;
    border-bottom: 0;
    background: transparent;
}

.attendance-metrics article {
    min-height: 96px;
    padding: 13px 14px;
    border-color: #dfe7f0;
    background:
        linear-gradient(180deg, rgba(22, 111, 122, 0.06), transparent 54px),
        #ffffff;
    box-shadow: 0 8px 20px rgba(20, 36, 55, 0.06);
}

.attendance-metrics article::before {
    width: 5px;
}

.attendance-metrics article:nth-child(2)::before,
.attendance-metrics article:nth-child(8)::before {
    background: var(--good);
}

.attendance-metrics article:nth-child(3)::before,
.attendance-metrics article:nth-child(6)::before {
    background: var(--bad);
}

.attendance-metrics article:nth-child(4)::before,
.attendance-metrics article:nth-child(5)::before {
    background: var(--warn);
}

.attendance-metrics strong {
    margin: 6px 0;
    font-size: 26px;
}

.report-section {
    margin-bottom: 18px;
    scroll-margin-top: 110px;
}

.report-totals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fbfdff;
    border-bottom: 1px solid var(--line);
}

.profile-hero {
    padding: 18px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.profile-hero h2 {
    margin-top: 10px;
    font-size: 26px;
}

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

.profile-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.detail-grid {
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.detail-grid div {
    padding: 13px;
    border: 1px solid #edf1f5;
    border-radius: 8px;
    background: #fafbfc;
}

.detail-grid span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.detail-grid strong {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.profile-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
    margin-bottom: 0;
}

.tabs-strip {
    padding: 14px 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tabs-strip a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 750;
    background: #fff;
}

.tabs-strip a:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.empty-state {
    margin: 18px;
    padding: 24px 18px;
    border: 1px dashed #c9d5e2;
    border-radius: 8px;
    background: #f8fafc;
    color: var(--muted);
    text-align: center;
    font-weight: 750;
}

dialog {
    width: min(760px, calc(100vw - 28px));
    border: 0;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 24px 80px rgba(15, 37, 48, 0.32);
}

dialog::backdrop {
    background: rgba(15, 28, 36, 0.58);
}

.modal-form {
    padding: 22px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.wide {
    grid-column: 1 / -1;
}

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

@media (max-width: 1220px) {
    .live-status {
        display: grid;
    }

    .sync-health-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
    }

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

    .command-charts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .command-charts .panel:last-child {
        grid-column: 1 / -1;
    }

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

    .filter-form {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .department-hero,
    .department-overview-grid,
    .holiday-layout {
        grid-template-columns: 1fr;
    }

    .department-filter-bar {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

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

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

    .matching-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 920px) {
    body {
        grid-template-columns: 1fr;
    }

    .sidebar {
        min-height: auto;
        padding: 16px;
    }

    .brand {
        margin-bottom: 14px;
    }

    .nav {
        display: flex;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .nav a {
        white-space: nowrap;
    }

    .main {
        padding: 18px;
    }

    .topbar,
    .split {
        grid-template-columns: 1fr;
        display: grid;
    }

    .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi-grid,
    .department-kpis,
    .dashboard-grid,
    .command-charts,
    .exception-grid,
    .department-detail-grid,
    .system-overview,
    .profile-grid,
    .filter-form,
    .report-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .access-upload-grid {
        grid-template-columns: 1fr;
    }

    .coverage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .matching-card {
        grid-template-columns: 1fr;
    }

    .workflow-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .department-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .department-rate-bars a {
        grid-template-columns: minmax(120px, 0.8fr) minmax(140px, 1fr) 54px;
    }

    .sidebar {
        position: static;
    }

    .filter-form {
        top: 0;
    }

    .wide-panel {
        grid-column: 1 / -1;
    }

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

@media (max-width: 640px) {
    .attendance-summary-summary {
        padding-right: 16px;
        align-items: start;
        display: grid;
    }

    .attendance-export-button {
        position: static;
        margin: 10px 12px 0;
    }

    .metrics,
    .form-grid,
    .kpi-grid,
    .department-kpis,
    .department-filter-bar,
    .dashboard-grid,
    .command-charts,
    .exception-grid,
    .department-overview-grid,
    .system-overview,
    .profile-grid,
    .detail-grid,
    .profile-metrics,
    .filter-form,
    .report-totals {
        grid-template-columns: 1fr;
    }

    .holiday-form {
        grid-template-columns: 1fr;
    }

    .coverage-grid,
    .preview-report,
    .workflow-strip {
        grid-template-columns: 1fr;
    }

    .department-rate-bars a {
        grid-template-columns: 1fr;
    }

    .profile-hero {
        display: grid;
    }

    .overview-stats {
        grid-template-columns: 1fr;
    }

    .live-status {
        display: grid;
    }

    .live-status-meta {
        text-align: left;
    }

    .sync-health-grid {
        grid-template-columns: 1fr;
    }

    .wide-panel {
        grid-column: auto;
    }

    .panel {
        overflow-x: auto;
    }

    th,
    td {
        padding: 12px;
    }
}

@media print {
    .sidebar,
    .topbar,
    .notice,
    .filter-form,
    .button-row,
    dialog {
        display: none !important;
    }

    body {
        display: block;
        background: #fff;
    }

    .main {
        padding: 0;
    }

    .panel,
    .card {
        border-color: #c9c9c9;
        break-inside: avoid;
        box-shadow: none;
    }

    table {
        min-width: 0;
        font-size: 11px;
    }

    th {
        position: static;
        background: #f2f2f2 !important;
        color: #222;
    }

    .badge {
        border: 1px solid #999;
        background: #fff !important;
        color: #111 !important;
    }

    .metrics,
    .report-totals {
        grid-template-columns: repeat(4, 1fr);
    }

    .visitor-badge-page { border:0; box-shadow:none; }
    .visitor-badge-print { margin:0 auto; border:2px solid #111; box-shadow:none; }
}

/* =========================================================
   Excel-like compact HR tables
   Added for Employee Register and HR data tables
   ========================================================= */

.hr-excel-table,
.table-excel,
.employee-register-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px;
    line-height: 1.25;
    background: #ffffff;
}

.hr-excel-table th,
.hr-excel-table td,
.table-excel th,
.table-excel td,
.employee-register-table th,
.employee-register-table td {
    border: 1px solid #cbd5e1;
    padding: 5px 7px;
    vertical-align: middle;
    white-space: nowrap;
}

.hr-excel-table thead th,
.table-excel thead th,
.employee-register-table thead th {
    background: #1f4e79;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 11px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.hr-excel-table tbody tr:nth-child(even),
.table-excel tbody tr:nth-child(even),
.employee-register-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.hr-excel-table tbody tr:hover,
.table-excel tbody tr:hover,
.employee-register-table tbody tr:hover {
    background: #eaf3ff;
}

.hr-excel-table td:first-child,
.table-excel td:first-child,
.employee-register-table td:first-child {
    font-weight: 700;
    text-align: center;
    background: #f1f5f9;
}

.hr-excel-table th:first-child,
.table-excel th:first-child,
.employee-register-table th:first-child {
    text-align: center;
}

.hr-table-wrap,
.table-responsive,
.excel-table-wrap {
    width: 100%;
    overflow-x: auto;
}

/* Smaller badges inside compact tables */
.hr-excel-table .badge,
.table-excel .badge,
.employee-register-table .badge,
.hr-excel-table .status-badge,
.table-excel .status-badge,
.employee-register-table .status-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
}

/* Compact table helper */
.compact-table th,
.compact-table td {
    padding: 4px 6px;
    font-size: 12px;
}

/* Prevent compact tables from becoming too tall */
.compact-table tbody tr {
    min-height: 26px;
}

/* Make long compact tables feel like spreadsheets */
.employee-register-table {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.employee-register-table caption {
    caption-side: top;
    font-weight: 700;
    margin-bottom: 8px;
}

/* Employee Register lifecycle workspaces.  Contained scrolling keeps narrow
   displays usable without making the document wider than the viewport. */
.employee-lifecycle-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 4px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid #d7e4e8;
    border-radius: 10px;
    background: #f5f9fa;
}

.employee-lifecycle-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #335d67;
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.employee-lifecycle-tab:hover { background: #e8f2f4; color: #124d5c; }
.employee-lifecycle-tab.active { border-color: #1e7b85; background: #e0f3f3; color: #0d5663; box-shadow: 0 1px 2px rgba(15, 70, 80, .12); }
.employee-lifecycle-tab span { min-width: 1.55em; padding: 1px 5px; border-radius: 999px; background: #d7e6e9; color: #284b54; font-size: .75rem; line-height: 1.25; text-align: center; }
.employee-lifecycle-tab.active span { background: #1e7b85; color: #fff; }

@media (max-width: 620px) {
    .employee-lifecycle-tabs { margin-inline: -2px; }
    .employee-lifecycle-tab { padding-inline: 10px; }
}

.staff-review-tabs {
    margin-inline: 0;
    margin-bottom: 14px;
}

.account-linkage-list {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 980px;
    min-width: 0;
    margin-inline: auto;
}

.account-review-wizard {
    min-width: 0;
    max-width: 100%;
    scroll-margin-top: 84px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--warn);
    border-radius: 12px;
    background: #fff;
    overflow: clip;
    font-size: 14px;
}

.account-review-wizard.is-reviewed { border-left-color: var(--good); }
.account-review-wizard[open] { box-shadow: 0 7px 24px rgba(16, 59, 68, .09); }
.account-review-wizard-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    min-height: 64px;
    padding: 12px 15px;
    list-style: none;
    cursor: pointer;
    background: #fbfdfe;
}
.account-review-wizard-summary::-webkit-details-marker { display: none; }
.account-review-wizard-summary > span:first-child { display: grid; gap: 2px; min-width: 0; }
.account-review-wizard-summary strong { overflow-wrap: anywhere; color: var(--ink); font-size: 16px; }
.account-review-wizard-summary small { color: var(--muted); font-size: 14px; }
.account-review-wizard-summary .button { flex: 0 0 auto; min-height: 40px; pointer-events: none; }
.account-review-wizard[open] > .account-review-wizard-summary { border-bottom: 1px solid var(--line); background: #f3f9fa; }
.account-review-wizard-body { min-width: 0; padding: 16px; }
.account-review-employee-context { display: grid; gap: 8px; margin-bottom: 14px; }
.account-review-employee-context > p { margin: 0; font-size: 14px; font-weight: 750; line-height: 1.45; }
.account-review-employee-context > div { display: flex; flex-wrap: wrap; gap: 5px 16px; color: var(--muted); }
.account-review-employee-context strong { color: var(--ink); }
.account-review-wizard .notice { margin: 0 0 12px; }
.account-review-wizard-form { min-width: 0; padding: 0; }
.account-wizard-step { width: 100%; max-width: 820px; min-width: 0; margin-inline: auto; }
.account-wizard-step[hidden],
.other-account-review[hidden],
.account-action-detail[hidden] { display: none !important; }
.wizard-step-label { margin: 0 0 3px; color: #16717a; font-size: 14px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.account-wizard-step h4 { margin: 0 0 6px; overflow-wrap: anywhere; font-size: 16px; line-height: 1.4; }
.account-wizard-step > .muted { margin: 0 0 14px; }

.retain-account-list,
.other-account-action-list { display: grid; gap: 10px; min-width: 0; margin-top: 14px; }
.retain-account-card,
.other-account-action-list > label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    width: 100%;
    min-height: 74px;
    padding: 13px 14px;
    border: 1px solid #cfdee2;
    border-radius: 10px;
    background: #f9fcfd;
    cursor: pointer;
    overflow: hidden;
}
.retain-account-card:has(input:checked),
.other-account-action-list > label:has(input:checked) { border-color: #1f7d86; background: #eaf7f7; box-shadow: 0 0 0 2px rgba(31, 125, 134, .12); }
.retain-account-card > input,
.other-account-action-list > label > input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; }
.retain-account-card > span,
.other-account-action-list > label > span { display: grid; gap: 3px; min-width: 0; }
.retain-account-card strong,
.other-account-action-list strong { overflow-wrap: anywhere; color: var(--ink); font-size: 14px; line-height: 1.35; }
.retain-account-card span span,
.retain-account-card small,
.other-account-action-list small { overflow-wrap: anywhere; color: var(--muted); font-size: 14px; line-height: 1.4; }
.account-review-wizard label,
.account-review-wizard input,
.account-review-wizard textarea,
.account-review-wizard select,
.account-review-wizard button { font-size: 14px; }
.account-review-wizard small { font-size: 14px; }
.other-account-review { min-width: 0; }
.other-account-review + .other-account-review { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.account-action-detail { min-width: 0; margin-top: 12px; padding: 13px; border: 1px solid #d6e3e6; border-radius: 9px; background: #f7fbfc; }
.account-action-detail label { display: grid; gap: 5px; width: 100%; max-width: 680px; min-width: 0; }
.account-action-detail input[type="search"],
.account-action-detail textarea { width: 100%; max-width: 100%; min-width: 0; }
.account-action-detail > small { display: block; margin-top: 5px; }
.account-action-detail .notice { margin: 10px 0 0; }
.account-action-detail.privileged-account-change { border-color: #e7c37c; background: #fff9ed; }
.account-action-detail .checkbox-field { display: flex; max-width: none; }
.wizard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e1eaed; }
.wizard-actions button,
.wizard-actions .button { min-height: 42px; }

.account-linkage-summary { padding: 0; border: 0; background: transparent; }
.account-linkage-summary > p:not(.wizard-step-label) { margin: 0 0 14px; }
.account-review-plain-summary {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.account-review-plain-summary section { min-width: 0; padding: 12px 13px; border: 1px solid #d9e5e7; border-radius: 9px; background: #f9fcfc; }
.account-review-plain-summary h5 { margin: 0 0 5px; color: #416168; font-size: 14px; letter-spacing: .035em; text-transform: uppercase; }
.account-review-plain-summary p { margin: 0; overflow-wrap: anywhere; }
.account-review-plain-summary p + p { margin-top: 6px; }
.account-review-plain-summary ul { margin: 4px 0 0; padding-left: 20px; }
.account-wizard-step[data-account-wizard-step="3"] > label { display: grid; gap: 6px; margin-top: 14px; }
.account-wizard-step[data-account-wizard-step="3"] textarea { width: 100%; max-width: 100%; min-width: 0; resize: vertical; }
.account-wizard-final-form { display: grid; gap: 12px; margin-top: 14px; }
.account-wizard-final-form label { display: grid; gap: 5px; }
.account-wizard-final-form textarea { width: 100%; max-width: 100%; min-width: 0; resize: vertical; }
.account-linkage-register-badge { display: inline-flex; width: fit-content; max-width: 100%; margin-bottom: 6px; overflow-wrap: anywhere; text-decoration: none; }
.account-linkage-register-badge:hover { text-decoration: underline; }

@media (max-width: 620px) {
    .staff-review-tabs { flex-wrap: nowrap; }
    .account-linkage-list { gap: 10px; }
    .account-review-wizard { font-size: 14px; }
    .account-review-wizard-summary { align-items: stretch; flex-direction: column; padding: 12px; }
    .account-review-wizard-summary .button { width: 100%; text-align: center; }
    .account-review-wizard-body { padding: 12px; }
    .account-review-employee-context > div { display: grid; gap: 3px; }
    .retain-account-card,
    .other-account-action-list > label { padding: 12px; }
    .wizard-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .wizard-actions button,
    .wizard-actions .button { width: 100%; text-align: center; }
}


/* =========================================================
   Employee Register Manage column inline controls
   Keeps status dropdown and Update button on one line
   ========================================================= */

.employee-register-table td:last-child form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
}

.employee-register-table td:last-child select {
    flex: 1 1 auto;
    min-width: 120px;
    height: 30px;
    padding: 3px 8px;
    font-size: 12px;
}

.employee-register-table td:last-child button,
.employee-register-table td:last-child input[type="submit"] {
    flex: 0 0 auto;
    height: 30px;
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap;
    margin: 0;
}

.employee-register-table td:last-child {
    min-width: 260px;
}
/* Remove underline from Employee Register ID and Name links */
.employee-register-table td:nth-child(2) a,
.employee-register-table td:nth-child(3) a {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.employee-register-table td:nth-child(2) a:hover,
.employee-register-table td:nth-child(3) a:hover {
    text-decoration: none;
    color: #0f4c81;
}

/* Leave Management */
.leave-panel .panel-head {
    align-items: flex-start;
}

.leave-form-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.leave-form .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.leave-form .wide {
    grid-column: 1 / -1;
}

.subtle-head {
    margin-bottom: 12px;
}

.subtle-head h3 {
    margin: 0;
}

.leave-balance-section {
    margin-bottom: 18px;
}

.leave-balance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.leave-fy-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 0 0 10px;
}

.leave-fy-strip article {
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
}

.leave-fy-strip span {
    display: block;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.leave-fy-strip strong {
    color: #1e3a8a;
    display: block;
    font-size: 13px;
    margin-top: 3px;
}

.leave-balance-card {
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 12px;
    background: #f8fbff;
}

.leave-balance-card.active {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.leave-balance-card strong {
    display: block;
    margin-bottom: 8px;
}

.leave-balance-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.leave-balance-mini span {
    padding: 6px 8px;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
    font-size: 12px;
}

.leave-balance-mini b {
    display: block;
    color: #0f172a;
    font-size: 15px;
}

.leave-carry-panel .leave-carry-form {
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
    margin: 12px 0;
    padding: 14px;
}

.leave-carry-panel .leave-carry-form .form-grid {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.leave-carry-panel .leave-carry-form .wide {
    grid-column: span 2;
}

.badge.fy {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #0369a1;
}

.leave-form textarea,
.approval-form input {
    width: 100%;
}

.leave-table th,
.leave-table td {
    font-size: 12px;
    padding: 6px 8px;
}

.leave-detail-grid article {
    min-height: 84px;
}

.leave-notes {
    margin: 16px 0;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.leave-notes p {
    margin: 6px 0;
}

.leave-day-calendar {
    margin: 16px 0;
}

.leave-day-calendar small,
.leave-table small {
    display: block;
    color: #64748b;
    font-weight: 500;
}

.leave-approvals {
    display: grid;
    gap: 12px;
}

.approval-card {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.3fr);
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
}

.approval-card small,
.approval-card p {
    display: block;
    margin-top: 6px;
    color: #64748b;
}

.approval-form {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 8px;
    align-items: center;
}

.badge.in-review,
.badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.badge.approved,
.badge.annual-leave,
.badge.sick-leave,
.badge.maternity-leave,
.badge.paternity-leave,
.badge.bereavement-leave,
.badge.other-leave {
    background: #dcfce7;
    color: #166534;
}

.badge.returned {
    background: #e0f2fe;
    color: #075985;
}

.badge.rejected,
.badge.cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.leave-print-form .print-sheet {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid #cbd5e1;
    background: #fff;
}

.leave-print-form .center {
    text-align: center;
}

.leave-print-form table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
}

.leave-print-form th,
.leave-print-form td {
    border: 1px solid #334155;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

.leave-print-form th {
    background: #f1f5f9;
    width: 18%;
}

@media (max-width: 900px) {
    .approval-card,
    .approval-form {
        grid-template-columns: 1fr;
    }
}

/* Final HR polish pass */
.leave-apply-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.8fr);
    gap: 16px;
    align-items: start;
}

.leave-apply-panel > .panel-head,
.leave-apply-panel > .notice {
    grid-column: 1 / -1;
}

.leave-apply-panel .leave-form {
    grid-column: 1;
    order: 1;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
}

.leave-apply-panel .leave-balance-section {
    grid-column: 2;
    order: 2;
    margin: 0;
}

.leave-apply-panel .leave-form .form-grid {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    gap: 10px 12px;
}

.leave-apply-panel label {
    gap: 5px;
    font-size: 12px;
}

.leave-apply-panel input,
.leave-apply-panel select,
.leave-apply-panel textarea {
    min-height: 34px;
}

.leave-apply-panel [data-leave-requested-days],
.leave-apply-panel [data-leave-remaining-days] {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 850;
}

.leave-apply-panel .leave-balance-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

.leave-apply-panel .leave-balance-card {
    padding: 9px 10px;
    border-left: 5px solid #94a3b8;
}

.leave-apply-panel .leave-balance-card[data-leave-type-id="annual"] {
    border-left-color: #2563eb;
    background: #eff6ff;
}

.leave-apply-panel .leave-balance-card[data-leave-type-id="sick"] {
    border-left-color: #e11d48;
    background: #fff1f2;
}

.leave-apply-panel .leave-balance-card[data-leave-type-id="maternity"] {
    border-left-color: #7c3aed;
    background: #f5f3ff;
}

.leave-apply-panel .leave-balance-card[data-leave-type-id="paternity"] {
    border-left-color: #0f766e;
    background: #ecfdf5;
}

.leave-apply-panel .leave-balance-card[data-leave-type-id="bereavement"] {
    border-left-color: #d97706;
    background: #fffbeb;
}

.leave-apply-panel .leave-balance-card[data-leave-type-id="other"] {
    border-left-color: #64748b;
    background: #f8fafc;
}

.leave-apply-panel .leave-balance-card strong {
    margin-bottom: 6px;
    font-size: 13px;
}

.leave-apply-panel .leave-balance-mini {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.leave-apply-panel .leave-balance-mini span {
    padding: 5px 6px;
    font-size: 10px;
}

.leave-apply-panel .leave-balance-mini b {
    font-size: 13px;
}

.holiday-hero {
    padding: 14px;
}

.holiday-hero .metrics,
.holiday-hero .report-totals {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.holiday-hero .metrics article,
.holiday-hero .metrics a,
.holiday-hero .report-totals article {
    min-height: auto;
    padding: 10px 12px;
}

.holiday-hero .metrics strong {
    font-size: 20px;
}

.holiday-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: 12px;
    margin: 12px 0;
}

.holiday-layout .panel,
.holiday-hero.panel {
    border-radius: 14px;
}

.holiday-calendar {
    grid-template-columns: repeat(7, minmax(58px, 1fr));
    padding: 8px;
}

.holiday-weekday {
    min-width: 58px;
    padding: 6px 4px;
    font-size: 10px;
}

.holiday-day {
    min-width: 58px;
    min-height: 62px;
    padding: 5px;
    gap: 2px;
}

.holiday-day > strong {
    font-size: 14px;
}

.holiday-day > small {
    font-size: 9px;
}

.holiday-chip {
    padding: 2px 4px;
    font-size: 8px;
    border-radius: 4px;
}

.holiday-form {
    padding: 10px;
    gap: 8px;
}

.holiday-form label {
    font-size: 11px;
}

.calendar-legend {
    padding: 8px 10px 10px;
    gap: 6px;
}

.calendar-legend span {
    padding: 4px 7px;
    font-size: 10px;
}

.report-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 7px;
    padding: 10px;
    overflow: visible;
}

.report-selector a {
    position: relative;
    padding: 8px 9px 8px 12px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.report-selector a::before {
    content: "";
    position: absolute;
    inset: 8px auto 8px 5px;
    width: 3px;
    border-radius: 99px;
    background: #2563eb;
}

.report-selector a.report-accent-orange::before {
    background: #f97316;
}

.report-selector a.report-accent-red::before {
    background: #dc2626;
}

.report-selector a.report-accent-green::before {
    background: #16a34a;
}

.report-selector a.report-accent-purple::before {
    background: #7c3aed;
}

.report-selector a.active,
.report-selector a:hover {
    background: #0f172a;
    border-color: #0f172a;
}

.report-section table,
.report-section .searchable {
    font-size: 12px;
}

.report-section th,
.report-section td {
    padding: 6px 8px;
}

.report-section .panel-head {
    padding-block: 12px;
}

.official-duty-panel {
    border-top: 4px solid #0f9aa6;
}

.official-duty-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(270px, 0.55fr);
    gap: 16px;
    align-items: start;
}

.official-duty-apply-panel {
    padding: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 110px);
}

.official-duty-apply-panel > .panel-head {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.official-duty-apply-panel > .panel-head h2 {
    margin-bottom: 3px;
}

.official-duty-apply-panel > .panel-head span {
    max-width: 720px;
}

.official-duty-form {
    margin: 0;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 118, 110, 0.08);
}

.official-duty-form .form-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 10px 12px;
    margin-top: 0;
}

.official-duty-form label {
    gap: 5px;
    color: #334155;
    font-size: 12px;
}

.official-duty-form input,
.official-duty-form select,
.official-duty-form textarea {
    min-height: 36px;
    border-color: #d6e3ef;
    background: #fbfdff;
}

.official-duty-form input:focus,
.official-duty-form select:focus,
.official-duty-form textarea:focus {
    border-color: #0f9aa6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.13);
    outline: none;
}

.official-duty-form textarea {
    min-height: 82px;
    resize: vertical;
}

.official-duty-form [data-duty-requested-days] {
    border-color: #99f6e4;
    background: #ecfdf5;
    color: #0f766e;
    font-weight: 850;
}

.official-duty-form .checkline {
    align-content: center;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid #d6e3ef;
    border-radius: 10px;
    background: #f8fafc;
}

.official-duty-form .notice.muted {
    margin-top: 12px;
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.official-duty-form .modal-actions {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.official-duty-form .modal-actions .primary {
    min-height: 38px;
    padding-inline: 18px;
    border-color: #0f9aa6;
    background: linear-gradient(135deg, #0f9aa6, #0f766e);
}

.official-duty-form .modal-actions .primary:hover {
    background: linear-gradient(135deg, #0f766e, #115e59);
}

.official-duty-info {
    display: grid;
    gap: 9px;
}

.official-duty-info article {
    border: 1px solid #ccfbf1;
    border-left: 4px solid #0f9aa6;
    border-radius: 12px;
    background: linear-gradient(180deg, #ecfeff, #f0fdfa);
    padding: 11px 12px;
}

.official-duty-info span,
.official-duty-info small {
    display: block;
    color: #64748b;
    font-size: 11px;
}

.official-duty-info strong {
    display: block;
    margin: 4px 0;
    color: #0f172a;
    font-size: 14px;
}

.official-duty-apply-panel .panel-actions .button {
    min-height: 34px;
    padding: 7px 11px;
}

.timesheet-panel {
    border-top: 4px solid #2563eb;
}

/* Timesheet facts are short; do not inherit the taller Leave Details cards. */
.timesheet-panel > .leave-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    margin: 10px 0 12px;
}

.timesheet-panel > .leave-detail-grid article {
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.timesheet-panel > .leave-detail-grid article > span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.timesheet-panel > .leave-detail-grid article > strong {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

/* Rectification facts also reuse the Leave Details grid, but need a denser view. */
.rectification-panel > .leave-detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
    margin: 10px 0 12px;
}

.rectification-panel > .leave-detail-grid article {
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.rectification-panel > .leave-detail-grid article > span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.rectification-panel > .leave-detail-grid article > strong {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

/* Compact the notification administration screens without changing mail controls. */
.notification-admin-hero {
    margin-bottom: 12px;
    padding: 14px 16px;
}

.notification-admin-hero p {
    max-width: 860px;
    margin-bottom: 0;
}

.notification-admin-hero + .split {
    gap: 12px;
    margin-bottom: 12px;
}

.notification-admin-hero + .split .detail-grid {
    padding: 12px;
    gap: 8px;
}

.notification-admin-hero + .split .detail-grid div {
    padding: 9px 10px;
}

.notification-admin-hero + .split .notification-readiness-grid {
    margin: 0 12px 12px;
    gap: 8px;
}

.notification-admin-hero + .split .notice,
.notification-admin-hero + .split .notification-test-form,
.notification-admin-hero + .split + .panel .notification-test-form {
    margin-inline: 12px;
}

.notification-admin-hero + .split .notification-test-form,
.notification-admin-hero + .split + .panel .notification-test-form {
    margin-block: 12px;
}

.notification-history-table td {
    overflow-wrap: anywhere;
}

/* Keep the wide sync audit within its own panel rather than widening the page. */
#sync-audit-report {
    margin-top: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

#sync-audit-report > table {
    min-width: 760px;
}

#sync-audit-report td:last-child {
    min-width: 220px;
    max-width: 380px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.timesheet-period-form {
    align-items: end;
    gap: 8px;
    margin-bottom: 12px;
}

.timesheet-period-form label {
    min-width: 120px;
}

.timesheet-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    margin: 10px 0 12px;
}

.timesheet-summary-grid article {
    min-height: auto;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.timesheet-summary-grid span,
.timesheet-status-strip small,
.timesheet-register-table small {
    display: block;
    color: #64748b;
    font-size: 10px;
}

.timesheet-summary-grid strong {
    display: block;
    margin-top: 3px;
    color: #0f172a;
    font-size: 18px;
}

.timesheet-status-strip,
.timesheet-submit-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #eff6ff;
}

.timesheet-status-strip {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.timesheet-status-strip .locked-note {
    color: #92400e;
}

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

.timesheet-table th,
.timesheet-table td,
.timesheet-register-table th,
.timesheet-register-table td {
    padding: 6px 7px;
    font-size: 12px;
    vertical-align: top;
}

.timesheet-table textarea,
.timesheet-table input {
    width: 100%;
    min-width: 130px;
    min-height: 34px;
    padding: 6px 7px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 11px;
}

.timesheet-table textarea {
    min-height: 50px;
    resize: vertical;
}

.timesheet-table textarea[readonly],
.timesheet-table input[readonly] {
    background: #f8fafc;
    color: #64748b;
}

.timesheet-actions {
    margin-top: 12px;
}

.timesheet-submit-card {
    border-color: #fed7aa;
    background: #fff7ed;
}

.timesheet-submit-card strong,
.timesheet-submit-card small {
    display: block;
}

.timesheet-decision-form {
    border: 1px dashed #bfdbfe;
    border-radius: 12px;
    background: #f8fafc;
    padding: 10px;
}

.badge.timesheet-draft {
    background: #e2e8f0;
    color: #334155;
}

.badge.timesheet-submitted {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge.timesheet-returned {
    background: #fef3c7;
    color: #92400e;
}

.badge.timesheet-approved {
    background: #dcfce7;
    color: #166534;
}

.badge.timesheet-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.official-duty-table td small {
    display: block;
    color: #64748b;
    font-size: 10px;
}

.official-duty-decision-form {
    border: 1px dashed #bfdbfe;
    border-radius: 12px;
    background: #f8fafc;
    padding: 10px;
}

.badge.official-duty-away,
.badge.official-duty-approved,
.badge.official-duty-supervisor-approved,
.badge.official-duty-pending,
.badge.official-duty-rejected,
.badge.official-duty-cancelled {
    border: 1px solid transparent;
}

.badge.official-duty-away {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge.official-duty-approved {
    background: #dcfce7;
    color: #166534;
}

.badge.official-duty-supervisor-approved {
    background: #fef3c7;
    color: #92400e;
}

.badge.official-duty-pending {
    background: #e0f2fe;
    color: #0369a1;
}

.badge.official-duty-rejected,
.badge.official-duty-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

@media (max-width: 980px) {
    .leave-apply-panel {
        grid-template-columns: 1fr;
    }

    .leave-apply-panel .leave-form,
    .leave-apply-panel .leave-balance-section {
        grid-column: 1;
        grid-row: auto;
    }

    .leave-carry-panel .leave-carry-form .form-grid {
        grid-template-columns: 1fr;
    }

    .leave-carry-panel .leave-carry-form .wide {
        grid-column: auto;
    }

    .holiday-layout,
    .holiday-hero .metrics,
    .holiday-hero .report-totals,
    .official-duty-layout {
        grid-template-columns: 1fr;
    }

    .official-duty-apply-panel {
        padding: 12px;
    }

    .timesheet-period-form,
    .timesheet-submit-card {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .official-duty-form .form-grid {
        grid-template-columns: 1fr;
    }

    .official-duty-form .modal-actions {
        justify-content: stretch;
    }

    .official-duty-form .modal-actions .primary {
        width: 100%;
    }
}

@media print {
    .sidebar,
    .topbar,
    .notice,
    .no-print,
    .search-box {
        display: none !important;
    }

    .main {
        margin: 0;
        padding: 0;
    }

    .leave-print-form {
        box-shadow: none;
        border: 0;
    }
}

/* Requests Centre + Out of Station / Travel */
.requests-centre {
    border-left: 5px solid #2563eb;
}

.request-action-grid,
.travel-apply-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.request-action-card {
    display: block;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.request-action-card span,
.request-action-card small {
    display: block;
    color: #64748b;
}

.request-action-card strong {
    display: block;
    margin: 5px 0;
    color: #0f172a;
}

.request-action-card.accent-blue {
    border-left: 5px solid #2563eb;
    background: #eff6ff;
}

.request-action-card.accent-teal {
    border-left: 5px solid #0f766e;
    background: #ecfdf5;
}

.request-action-card.accent-purple {
    border-left: 5px solid #7c3aed;
    background: #f5f3ff;
}

.request-counts {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.travel-panel {
    border-top: 4px solid #0f766e;
}

.travel-apply-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    align-items: start;
}

.travel-form {
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.travel-info article {
    border-left: 5px solid #0f766e;
}

.travel-documents-panel {
    margin-top: 14px;
    background: #f8fafc;
}

.badge.travel-draft {
    background: #f1f5f9;
    color: #475569;
}

.badge.travel-submitted,
.badge.travel-supervisor-review,
.badge.travel-line-director-review,
.badge.travel-commissioner-review,
.badge.travel-recommended {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge.travel-approved {
    background: #dcfce7;
    color: #166534;
}

.badge.travel-rejected,
.badge.travel-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.badge.travel-returned {
    background: #fef3c7;
    color: #92400e;
}

.danger-inline {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff1f2;
}

.rectification-panel {
    border-top: 4px solid #0f766e;
}

/* Attendance Rectification Detail: one bounded, responsive workspace. */
.rectification-detail-body .main {
    min-width: 0;
    padding: 24px 28px 32px;
    overflow-x: clip;
}

.rectification-detail-page-header,
.rectification-detail-sync,
.rectification-detail-workspace {
    width: 100%;
    max-width: 1420px;
    min-width: 0;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

.rectification-detail-page-header {
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 2px 0 13px;
    border-bottom: 1px solid #d7e4e8;
}

.rectification-detail-page-header h1 {
    margin: 1px 0 7px;
    color: #102e3a;
    font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.rectification-header-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;
    color: #60757e;
    font-size: .88rem;
}

.rectification-header-meta > strong {
    color: #173f4b;
    font-size: .98rem;
}

.rectification-header-meta > span:not(.badge) {
    padding-left: 12px;
    border-left: 1px solid #cedce1;
}

.rectification-detail-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.rectification-detail-sync {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 16px;
}

.rectification-detail-workspace {
    display: grid;
    gap: 18px;
}

.rectification-detail-workspace > .panel,
.rectification-cancellation-section {
    min-width: 0;
    margin: 0;
    padding: 18px;
    border-radius: 12px;
    box-sizing: border-box;
}

.rectification-detail-card {
    border-top: 3px solid #178296;
}

.rectification-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e9ec;
}

.rectification-section-heading h2 {
    margin: 1px 0 0;
    color: #173f4b;
    font-size: 1.08rem;
}

.rectification-section-heading > div > span,
.rectification-evidence-heading > span {
    display: block;
    margin-top: 4px;
    color: #657b83;
    font-size: .84rem;
    line-height: 1.4;
}

.rectification-context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.rectification-context-grid article {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    min-height: 78px;
    padding: 12px 13px;
    border: 1px solid #dbe6ea;
    border-radius: 9px;
    background: #f8fbfc;
}

.rectification-context-grid article > span,
.rectification-explanation-grid article > span,
.rectification-route-step > div > span {
    color: #607780;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.rectification-context-grid article > strong,
.rectification-route-step > div > strong {
    min-width: 0;
    color: #173f4b;
    font-size: .94rem;
    overflow-wrap: anywhere;
}

.rectification-context-card .notice {
    margin: 11px 0 0;
}

.rectification-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.rectification-comparison-group {
    min-width: 0;
    padding: 14px;
    border: 1px solid #d9e5e9;
    border-radius: 10px;
    background: #fbfdfe;
}

.rectification-comparison-group.recorded { border-top: 4px solid #64748b; background: #f8fafc; }
.rectification-comparison-group.requested { border-top: 4px solid #d48228; background: #fffbf4; }
.rectification-comparison-group.effective { border-top: 4px solid #23845f; background: #f5fbf8; }

.rectification-comparison-group > header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}

.rectification-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    background: #48636d;
    font-size: .72rem;
    font-weight: 900;
}

.requested .rectification-group-icon { background: #b96516; }
.effective .rectification-group-icon { background: #24785a; }
.rectification-comparison-group h3 { margin: 0; color: #173f4b; font-size: .98rem; }
.rectification-comparison-group header small { color: #687e86; font-size: .76rem; }
.rectification-comparison-group dl { display: grid; gap: 0; margin: 0; }
.rectification-comparison-group dl > div { display: grid; gap: 3px; min-width: 0; padding: 8px 0; border-top: 1px solid rgba(207, 220, 225, .78); }
.rectification-comparison-group dl > div:first-child { border-top: 0; }
.rectification-comparison-group dt { color: #647981; font-size: .75rem; font-weight: 800; }
.rectification-comparison-group dd { min-width: 0; margin: 0; color: #173f4b; font-size: .9rem; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere; }
.rectification-comparison-group dd small { display: block; margin-top: 2px; color: #71858c; font-weight: 600; }
.rectification-evidence-reference dd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; word-break: break-all; }
.rectification-immutable-note { margin: 10px 0 0; padding: 8px 9px; border-radius: 7px; color: #4c626b; background: #e9eff2; font-size: .78rem; line-height: 1.4; }

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

.rectification-explanation-grid article {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #dbe6ea;
    border-radius: 9px;
    background: #f9fcfd;
}

.rectification-explanation-grid p {
    margin: 6px 0 0;
    color: #294f5a;
    font-size: .9rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.rectification-edit-form,
.rectification-document-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 11px;
}

.rectification-edit-form label,
.rectification-document-form label,
.rectification-decision-option form > label,
.rectification-cancellation-content form > label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: #365e69;
    font-size: .84rem;
    font-weight: 800;
}

.rectification-edit-form input,
.rectification-edit-form textarea,
.rectification-document-form input,
.rectification-document-form select,
.rectification-decision-option input,
.rectification-decision-option select,
.rectification-decision-option textarea,
.rectification-cancellation-content textarea {
    width: 100%;
    min-width: 0;
    min-height: 42px;
}

.rectification-edit-form .wide { grid-column: 1 / -1; }
.rectification-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }

.rectification-route-list { display: grid; gap: 9px; }
.rectification-route-step { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(190px, 1.3fr) minmax(115px, .7fr) minmax(125px, .75fr) minmax(155px, .9fr); gap: 10px; align-items: center; min-width: 0; padding: 12px 13px; border: 1px solid #d8e5e9; border-radius: 9px; background: #f9fcfd; }
.rectification-route-step.current { border-left: 4px solid #168296; background: #f2fafb; }
.rectification-route-step > div { display: grid; gap: 4px; min-width: 0; }
.rectification-route-recovery { grid-column: 1 / -1; }

.rectification-approval-timeline { display: grid; gap: 0; }
.rectification-approval-timeline article { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; min-width: 0; padding-bottom: 13px; }
.rectification-approval-timeline article:not(:last-child)::before { content: ""; position: absolute; top: 15px; bottom: -1px; left: 6px; width: 2px; background: #cfdee3; }
.rectification-timeline-marker { position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 4px; border: 3px solid #d7eef2; border-radius: 50%; background: #168296; }
.rectification-timeline-content { min-width: 0; padding: 11px 13px; border: 1px solid #dbe6ea; border-radius: 9px; background: #fbfdfe; }
.rectification-timeline-content > div { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; }
.rectification-timeline-content small { display: block; margin-top: 4px; color: #657b83; }
.rectification-timeline-content p { margin: 8px 0 0; color: #345661; line-height: 1.45; }

.rectification-decision-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.rectification-decision-option { min-width: 0; border: 1px solid #d9e5e9; border-radius: 9px; background: #f9fcfd; overflow: hidden; }
.rectification-decision-option > summary,
.rectification-cancellation-section > summary { padding: 12px 14px; cursor: pointer; font-size: .9rem; font-weight: 850; list-style-position: inside; }
.rectification-decision-option.approve > summary { color: #166044; background: #edf9f3; }
.rectification-decision-option.reject > summary { color: #8d352f; background: #fff4f3; }
.rectification-decision-option form { display: grid; gap: 10px; padding: 13px; border-top: 1px solid #dbe6ea; }
.rectification-decision-option form p { margin: 0; color: #5c747c; font-size: .84rem; line-height: 1.45; }
.rectification-decision-option form > button { justify-self: end; }
.rectification-confirm-check { display: flex !important; align-items: flex-start; gap: 8px !important; padding: 9px 10px; border: 1px solid #dce6e9; border-radius: 7px; background: #fff; }
.rectification-confirm-check input { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; accent-color: #16798d; }
.rectification-confirm-check span { min-width: 0; line-height: 1.35; }

.rectification-evidence-heading { align-items: center; }
.rectification-document-form { grid-template-columns: minmax(170px, .55fr) minmax(260px, 1fr) auto; margin-bottom: 12px; }
.rectification-document-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #dbe6ea; border-radius: 9px; }
.rectification-document-table { width: 100%; min-width: 680px; margin: 0; }
.rectification-document-table .empty-state { width: auto; min-height: 0; padding: 17px; }

.rectification-cancellation-section { padding: 0 !important; border: 1px solid #e7c4c1; background: #fff; }
.rectification-cancellation-section:not([open]) { border-color: #dfd7d5; background: #fbfaf9; }
.rectification-cancellation-section:not([open]) > summary { color: #7a514d; }
.rectification-cancellation-section[open] { border-left: 4px solid #b84339; background: #fff8f7; }
.rectification-cancellation-section[open] > summary { color: #8d3029; border-bottom: 1px solid #eccbc7; }
.rectification-cancellation-content { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr); gap: 16px; padding: 14px 16px 16px; }
.rectification-cancellation-content h2 { margin: 0 0 5px; color: #8d3029; font-size: 1rem; }
.rectification-cancellation-content p { margin: 0; color: #6f504c; font-size: .85rem; line-height: 1.45; }
.rectification-cancellation-content form { display: grid; gap: 10px; min-width: 0; }
.rectification-cancellation-content form > button { justify-self: end; }

@media (max-width: 1100px) {
    .rectification-detail-body .main { padding-right: 20px; padding-left: 20px; }
    .rectification-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rectification-comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rectification-comparison-group.effective { grid-column: 1 / -1; }
    .rectification-route-step { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .rectification-detail-body .main { padding-right: 15px; padding-left: 15px; }
    .rectification-detail-page-header { align-items: stretch; flex-direction: column; }
    .rectification-detail-header-actions { justify-content: flex-start; }
    .rectification-header-meta > span:not(.badge) { padding-left: 0; border-left: 0; }
    .rectification-detail-workspace { gap: 15px; }
    .rectification-detail-workspace > .panel { padding: 15px; }
    .rectification-section-heading { align-items: flex-start; flex-direction: column; }
    .rectification-context-grid,
    .rectification-comparison-grid,
    .rectification-explanation-grid,
    .rectification-edit-form,
    .rectification-decision-options,
    .rectification-cancellation-content { grid-template-columns: 1fr; }
    .rectification-comparison-group.effective,
    .rectification-edit-form .wide { grid-column: auto; }
    .rectification-route-step { grid-template-columns: 1fr; }
    .rectification-document-form { grid-template-columns: 1fr; align-items: stretch; }
    .rectification-form-actions,
    .rectification-decision-option form > button,
    .rectification-cancellation-content form > button { justify-self: stretch; justify-content: stretch; }
    .rectification-form-actions > *,
    .rectification-decision-option form > button,
    .rectification-cancellation-content form > button { width: 100%; }
}

@media (max-width: 920px) {
    .rectification-detail-body .hr-sidebar:not(.is-drawer-open) { box-shadow: none; }
}

.rectification-counts article {
    min-height: 74px;
}

.rectification-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    max-width: 920px;
}

.rectification-inline-form label {
    margin: 0;
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    color: var(--muted);
    font-size: 0.78rem;
}

.rectification-inline-form select,
.rectification-inline-form input:not([type="hidden"]) {
    min-height: 2.05rem;
}

.rectification-inline-form select {
    min-width: 12rem;
}

.rectification-inline-form input[type="datetime-local"] {
    width: 11.5rem;
}

.rectification-inline-form input[name="reason"] {
    width: 10rem;
}

.rectification-inline-form input[name="employee_explanation"] {
    min-width: 15rem;
    flex: 1 1 15rem;
}

.rectification-recorded-punch {
    flex: 1 1 100%;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
}

.rectification-candidate-row > td {
    border-top: 8px solid #f8fafc;
    border-bottom: 1px solid #cbd5e1;
    padding-block: 12px;
    background: #fffbeb;
}

.rectification-candidate-row:nth-child(even) > td {
    background: #f8fafc;
}

.rectification-candidate-row > td:first-child {
    border-left: 1px solid #cbd5e1;
    border-radius: 10px 0 0 10px;
}

.rectification-candidate-row > td:last-child {
    border-right: 1px solid #cbd5e1;
    border-radius: 0 10px 10px 0;
}

.muted-text {
    color: var(--muted);
    font-size: 0.78rem;
}

.rectification-table td small {
    display: block;
    color: var(--muted);
}

.badge.draft {
    background: #eef2ff;
    color: #3730a3;
}

.badge.returned {
    background: #fff7ed;
    color: #9a3412;
}

.request-action-card.accent-orange {
    border-left: 5px solid #f97316;
    background: #fff7ed;
}

.people-access-table td small,
.people-access-table td strong {
    display: block;
}

.people-manage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
    gap: 14px;
    align-items: start;
}

.people-manage-card {
    padding: 14px;
}

.people-manage-card .compact-head {
    padding: 0 0 10px;
    margin-bottom: 10px;
}

.people-manage-card .compact-head h3 {
    margin: 0;
    font-size: 1rem;
}

.people-manage-card:nth-child(n+3) {
    grid-column: 1 / -1;
}

.stacked-form {
    display: grid;
    gap: 10px;
}

.governance-employee-card {
    border-top: 4px solid #0f766e;
    background: linear-gradient(180deg, #f8fffe, #ffffff);
}

.governance-mini-grid,
.governance-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.governance-mini-grid .stacked-form,
.governance-admin-grid .stacked-form {
    padding: 12px;
    border: 1px solid #d7e6ea;
    border-radius: 12px;
    background: #fff;
}

.governance-mini-grid h4,
.governance-admin-grid h3 {
    margin: 0 0 2px;
    color: #0f4c5c;
}

.governance-current-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.governance-admin-section {
    border-top: 4px solid #0f766e;
}

.governance-table-stack {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.governance-table-stack .compact-head {
    padding: 0 0 8px;
}

.governance-table-stack td small {
    display: block;
    color: var(--muted);
    margin-top: 2px;
}

.governance-table-stack .inline-form input[type="date"] {
    min-width: 8.7rem;
}

.approval-route-panel {
    border-left: 4px solid var(--teal, #147b8b);
    background: linear-gradient(90deg, rgba(20, 123, 139, .08), transparent 55%);
}

.approval-route-panel .approval-card {
    border-color: rgba(20, 123, 139, .2);
}

.approval-route-panel .route-current {
    box-shadow: inset 3px 0 0 var(--teal, #147b8b);
}

.approval-route-panel .route-source {
    color: var(--muted);
    text-transform: capitalize;
}

.approval-route-panel .route-history,
.route-recovery-note {
    color: var(--muted);
}

.route-recovery {
    margin-top: .65rem;
}

.route-recovery summary {
    color: var(--teal, #147b8b);
    cursor: pointer;
    font-weight: 700;
}

.route-recovery-form {
    margin-top: .7rem;
    align-items: end;
}

.route-recovery-admin {
    margin-bottom: 1rem;
}

/* Phase 3A: assigned and routine work */
.work-panel,
.work-detail-panel {
    border-top: 4px solid #1d7b8c;
}

.work-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.work-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid #d7e6ea;
    border-radius: 10px;
    color: #174b59;
    background: #fff;
    text-decoration: none;
}

.work-kpi strong { font-size: 1.35rem; color: #103f4d; }
.work-kpi.work-overdue { border-left: 4px solid #d64545; background: #fff4f4; }
.work-kpi.work-submitted { border-left: 4px solid #7c3aed; background: #f7f3ff; }
.work-kpi.work-completed { border-left: 4px solid #15965a; background: #f0fbf5; }
.work-kpi.work-in_progress { border-left: 4px solid #1677b8; background: #f1f8fd; }
.work-kpi.work-due_today { border-left: 4px solid #e5821c; background: #fff8ef; }
.work-kpi.work-due_week { border-left: 4px solid #25899b; background: #f0fafb; }
.work-kpi.work-due_tomorrow { border-left: 4px solid #b7791f; background: #fffbeb; }
.work-kpi.work-awaiting_review { border-left: 4px solid #7c3aed; background: #f7f3ff; }
.work-kpi.work-returned { border-left: 4px solid #b45309; background: #fff7ed; }

.work-create-card {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #cfe4e8;
    border-radius: 10px;
    background: linear-gradient(100deg, #f2fbfc, #fff 60%);
}

.work-create-card summary { color: #146476; cursor: pointer; font-weight: 800; }
.work-create-card[open] summary { margin-bottom: 12px; }

.work-attention-panel {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #d7e6ea;
    border-left: 4px solid #1d7b8c;
    border-radius: 10px;
    background: linear-gradient(105deg, #f4fbfc, #fff 62%);
}

.work-attention-panel .panel-head { margin: 0 0 8px; padding: 0; border: 0; }
.work-attention-panel h3 { margin: 0; color: #174b59; font-size: 1rem; }
.work-attention-count { color: #176679; font-size: .8rem; font-weight: 800; }
.work-attention-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; }
.work-attention-row { display: grid; grid-template-columns: auto minmax(150px, 1fr) minmax(180px, 1.2fr); align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #e4edef; color: #174b59; text-decoration: none; }
.work-attention-row:hover { color: #0d6475; background: rgba(230, 247, 249, .55); }
.work-attention-row small { color: var(--muted); text-align: right; }
.compact-form-grid,
.work-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 14px;
    align-items: start;
}
.work-form label { display: grid; gap: 5px; color: #325766; font-weight: 700; }
.work-form label small { color: var(--muted); font-weight: 500; }
.work-form input,
.work-form select,
.work-form textarea { width: 100%; box-sizing: border-box; }
.work-form textarea { resize: vertical; }
.work-form .wide { grid-column: 1 / -1; }
.weekend-work-request { display: grid; gap: 7px; padding: 10px 12px; border: 1px solid #c9e2e8; border-radius: 8px; background: #f5fbfc; color: #28525e; }
.weekend-work-request > strong { color: #0e6475; }
.weekend-work-request > span,
.weekend-work-request small { color: #58737b; font-weight: 500; }
.substitution-toggle { width: auto !important; margin-right: 6px; }
.weekend-work-request > label { display: block; color: #244f5c; font-weight: 700; }
.substitution-fields { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; align-items: end; gap: 10px; padding: 8px 10px; border-left: 3px solid #2a91a3; background: rgba(255,255,255,.82); }
.substitution-toggle:not(:checked) + label + .substitution-fields { display: none; }
.work-filter-form { margin-bottom: 14px; }
.work-table td small { display: block; margin-top: 3px; color: var(--muted); }
.work-row-overdue { background: #fff7f7; }
.work-brief,
.work-history,
.work-update-form,
.work-review-form {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #dce8eb;
    border-radius: 10px;
    background: #fff;
}
.work-brief { border-left: 4px solid #2a91a3; background: #f8fcfd; }
.work-brief h3,
.work-history h3,
.work-form h3 { margin: 0 0 8px; color: #164c5b; }
.work-brief p { margin: 5px 0 12px; color: #385963; }
.work-history { display: grid; gap: 8px; }
.work-history article { padding: 10px 12px; border-left: 3px solid #75aeb8; background: #f8fbfc; }
.work-history article small { display: block; margin-top: 3px; color: var(--muted); }
.work-history article p { margin: 7px 0 0; }
.badge.work-routine { color: #075f73; background: #dff7fa; }
.badge.work-assigned { color: #235899; background: #e8f1ff; }
.badge.work-low { color: #42606c; background: #edf3f4; }
.badge.work-normal { color: #176679; background: #e4f5f8; }
.badge.work-high { color: #a75912; background: #fff0da; }
.badge.work-urgent,
.badge.work-overdue { color: #ad2727; background: #ffe5e5; }
.badge.work-in_progress { color: #1e62a1; background: #e5f1ff; }
.badge.work-submitted { color: #6f38b4; background: #eee6ff; }
.badge.work-awaiting_review { color: #6f38b4; background: #eee6ff; }
.badge.work-returned,
.badge.work-due_today,
.badge.work-due_tomorrow { color: #9a5a11; background: #fff0d8; }
.badge.work-completed { color: #167444; background: #e0f7e9; }
.badge.work-cancelled { color: #69757a; background: #edf0f1; }
.timesheet-table select { min-width: 155px; }
.timesheet-table td small { display: block; max-width: 190px; color: var(--muted); font-size: .72rem; }

/* Phase 4A temporary staff engagements: compact operational register. */
.temporary-staff-panel { margin-bottom: 16px; }
.temporary-kpis { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; margin: 0 0 13px; }
.temporary-kpi { min-height: 68px; padding: 10px 12px; border: 1px solid #d9e6ea; border-left: 4px solid #26799a; border-radius: 9px; color: #194957; text-decoration: none; background: #f7fbfc; }
.temporary-kpi span { display: block; font-size: .75rem; font-weight: 800; }
.temporary-kpi strong { display: block; margin-top: 5px; font-size: 1.35rem; color: #113d4b; }
.temporary-kpi.present { border-left-color: #15965a; background: #f1fbf5; }
.temporary-kpi.late { border-left-color: #d7811e; background: #fff9ee; }
.temporary-kpi.absent { border-left-color: #c94949; background: #fff5f5; }
.temporary-kpi.primary { border-left-color: #26799a; background: #f1f8fc; }
.temporary-filter-form { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(115px, 1fr)) auto; gap: 9px; align-items: end; margin: 0 0 13px; }
.temporary-filter-form label { display: grid; gap: 4px; color: #355966; font-size: .78rem; font-weight: 800; }
.temporary-create { margin: 0 0 14px; padding: 11px 13px; border: 1px solid #cfe1e7; border-radius: 9px; background: linear-gradient(105deg, #f3fbfc, #fff 62%); }
.temporary-create summary, .temporary-actions summary { cursor: pointer; color: #146476; font-weight: 800; }
.temporary-create[open] summary, .temporary-actions details[open] summary { margin-bottom: 10px; }
.temporary-employee-combobox select { max-height: 240px; }
.visitor-management-panel,
.visitor-register-panel,
.visitor-detail-panel,
.visitor-desk-admin { margin-bottom: 16px; }
.visitor-kpis { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 12px; margin: 14px 0; }
.visitor-kpi { display: grid; gap: 3px; min-height: 88px; padding: 14px; border: 1px solid var(--line, #d9e3ef); border-left: 4px solid #337ab7; border-radius: 10px; color: inherit; text-decoration: none; background: #f8fbff; }
.visitor-kpi strong { font-size: 1.45rem; color: #102a43; }
.visitor-kpi small { color: #627d98; }
.visitor-kpi.upcoming { border-left-color: #168aad; background: #f0fbff; }
.visitor-kpi.warning { border-left-color: #c0392b; background: #fff5f3; }
.visitor-follow-up-row { background: #fff3f1; }
.visitor-missed-row { background: #fff7ed; }
.nav-warning-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; padding: .08rem .34rem; border-radius: 999px; background: #fff1c2; color: #7a4b00; font-size: .72rem; font-weight: 800; line-height: 1.2; }
.visitor-planning-form { margin: 10px 0 12px; }
.visitor-operations-nav { display:flex; flex-wrap:wrap; gap:8px; margin: 4px 0 14px; }
.visitor-operations-nav a { padding:6px 10px; border:1px solid #c9dbe6; border-radius:999px; background:#f7fbfd; color:#155e75; font-size:.78rem; font-weight:700; text-decoration:none; }
.visitor-operations-panel { border-top:4px solid #168aad; }
.visitor-desk-kpis { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.visitor-pass-form { margin:10px 0 14px; }
.visitor-report-lists { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.visitor-report-lists article { border:1px solid #d9e3ef; border-radius:8px; padding:10px; background:#fbfdff; }
.visitor-report-lists h3 { margin:0 0 8px; font-size:.92rem; }
.visitor-report-lists p { display:flex; justify-content:space-between; gap:8px; margin:6px 0; font-size:.82rem; }
.visitor-badge-page { max-width:760px; margin:0 auto; }
.visitor-badge-print { width:100%; max-width:520px; margin:20px auto; padding:28px; border:3px solid #0f4c5c; border-radius:12px; background:#fff; color:#102a43; }
.visitor-badge-title { margin:0; color:#0f4c5c; font-size:1.45rem; font-weight:900; letter-spacing:.16em; }
.visitor-badge-valid { margin:4px 0 20px; color:#9a3412; font-size:.78rem; font-weight:800; }
.visitor-badge-print h2 { margin:0 0 18px; font-size:1.75rem; }
.visitor-badge-print dl { display:grid; grid-template-columns:150px 1fr; gap:8px 14px; margin:0; }
.visitor-badge-print dt { color:#486581; font-weight:800; }
.visitor-badge-print dd { margin:0; font-weight:700; }
.visitor-kpi.present { border-left-color: #2f9e62; background: #f1fbf5; }
.visitor-kpi.absent { border-left-color: #d94841; background: #fff5f5; }
.visitor-kpi.muted { border-left-color: #718096; background: #f7fafc; }
.visitor-create { margin-top: 14px; border: 1px solid #dbe7f3; border-radius: 10px; background: #fbfdff; }
.visitor-create summary { padding: 12px 14px; cursor: pointer; font-weight: 700; color: #1d4e72; }
.visitor-form { margin: 0 14px 14px; }
.visitor-form .employee-combobox select { max-height: 210px; }
.visitor-combobox select { max-height: 180px; }
.visitor-overdue-row { background: #fff2f1; }
.visitor-filter-form { margin: 12px 0; }
.visitor-desk-form { margin-top: 12px; }
@media (max-width: 900px) {
    .visitor-kpis { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}
@media (max-width: 560px) {
    .visitor-kpis { grid-template-columns: 1fr; }
    .visitor-report-lists { grid-template-columns:1fr; }
    .visitor-badge-print dl { grid-template-columns:1fr; gap:2px; }
    .visitor-badge-print dd { margin:0 0 10px; }
}
.temporary-employee-empty { display: block; margin-top: 5px; color: #a04b35; font-size: .76rem; font-weight: 700; }
.temporary-detail { display: grid; gap: 13px; }
.temporary-actions { display: grid; gap: 10px; }
.temporary-actions details { padding: 11px 13px; border: 1px solid #d7e6ea; border-radius: 9px; background: #f9fcfd; }
.temporary-history { padding: 12px 14px; border: 1px solid #dce8eb; border-radius: 9px; background: #fff; }
.temporary-history h3 { margin: 0 0 8px; color: #174b59; font-size: .98rem; }
.temporary-history article { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #e8eff1; color: #365762; }
.temporary-history article:first-of-type { border-top: 0; }
.temporary-history article small { grid-column: 1 / -1; color: var(--muted); }
.badge.expiring-soon { color: #9a5a11; background: #fff0d8; }
.badge.expired { color: #a62e2e; background: #ffe7e7; }
.badge.upcoming { color: #246aa0; background: #e7f2fd; }
.badge.ended, .badge.cancelled, .badge.draft { color: #5e6c72; background: #edf1f2; }
.temporary-profile-card .button { margin-top: 10px; }

/* Phase 6A: compact read-only management intelligence. */
.management-intelligence-intro { margin-bottom: 16px; }
.management-intelligence-intro .panel-head { align-items: flex-start; gap: 18px; padding: 15px 16px 13px; }
.management-intelligence-intro .panel-head > :first-child { min-width: 0; max-width: 820px; }
.management-intelligence-intro .panel-head span { display: block; max-width: 780px; line-height: 1.45; }
.management-intelligence-intro .panel-actions { justify-content: flex-end; flex: 0 0 auto; }
.management-intelligence-intro h2, .section-heading h2 { margin: 2px 0 4px; color: #173f4d; }
.management-filter-form { display: grid; grid-template-columns: minmax(130px, .9fr) minmax(135px, .8fr) minmax(135px, .8fr) minmax(190px, 1.2fr) auto; gap: 10px; align-items: end; margin: 0; padding: 12px 16px 14px; background: #fbfdfe; }
.management-filter-form label { display: grid; gap: 5px; font-size: .78rem; font-weight: 700; color: #526d76; }
.management-filter-form input, .management-filter-form select { min-height: 37px; margin: 0; }
.management-filter-form .filter-actions { display: flex; gap: 7px; align-items: center; }
.management-section { margin: 16px 0; }
.section-heading { display: flex; justify-content: space-between; gap: 15px; align-items: baseline; margin: 0 2px 8px; }
.section-heading h2 { font-size: 1.05rem; }
.section-heading span { color: #64808a; font-size: .8rem; text-align: right; }
.management-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.management-kpi { display: grid; align-content: start; gap: 5px; min-height: 96px; padding: 12px 14px; border: 1px solid #dce8ec; border-left: 4px solid #2a7387; border-radius: 10px; background: #fff; color: #173f4d; text-decoration: none; box-shadow: 0 2px 7px rgba(22, 62, 74, .045); }
.management-kpi:hover { border-color: #8eb4bf; box-shadow: 0 4px 13px rgba(22, 62, 74, .11); transform: translateY(-1px); }
.management-kpi span { color: #55717b; font-size: .76rem; font-weight: 700; }
.management-kpi strong { color: #102f3a; font-size: 1.42rem; line-height: 1.1; }
.management-kpi small { color: #66808a; line-height: 1.3; }
.management-kpi.accent-blue { border-left-color: #3374d9; background: #f6f9ff; }
.management-kpi.accent-green { border-left-color: #22995a; background: #f4fcf7; }
.management-kpi.accent-red { border-left-color: #cf4652; background: #fff7f7; }
.management-kpi.accent-orange { border-left-color: #d9811e; background: #fffaf3; }
.management-kpi.accent-purple { border-left-color: #7753ba; background: #faf8ff; }
.management-kpi.accent-teal { border-left-color: #168b92; background: #f4fcfc; }
.management-kpi.accent-amber { border-left-color: #b8781c; background: #fffaf0; }
.management-kpi.accent-slate { border-left-color: #5a7180; background: #f7fafb; }
.management-two-column { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr); gap: 14px; }
.management-two-column > .panel,
.management-operations-grid > .panel { min-width: 0; }
.management-attention-list { display: grid; padding: 0 14px 8px; }
.management-attention { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 2px; border-top: 1px solid #e5edef; color: #234956; text-decoration: none; }
.management-attention:first-child { border-top: 0; }
.management-attention:hover strong { color: #0f7282; }
.management-attention em { min-width: 24px; color: #173f4d; font-size: 1.08rem; font-style: normal; font-weight: 800; text-align: right; }
.management-attention small { grid-column: 2 / -1; color: #6a838c; }
.management-away-list { display: grid; gap: 8px; padding: 12px 14px 14px; }
.management-away-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 11px 12px; border: 1px solid #e0e9ed; border-radius: 8px; background: #fbfdfe; color: #26515e; text-decoration: none; }
.management-away-list a:hover { border-color: #9bbcc4; }
.management-away-list strong { font-size: 1.24rem; color: #173f4d; }
.management-away-list small { grid-column: 1 / -1; color: #6c858d; }
.management-trend-table td:nth-child(2) { min-width: 160px; white-space: nowrap; }
.management-rate-bar { display: inline-block; width: 84px; height: 7px; margin-right: 7px; overflow: hidden; border-radius: 999px; background: #e4edf0; vertical-align: middle; }
.management-rate-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ee9b36, #2c9b67); }
.management-operations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.management-stat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 15px; margin: 0; padding: 4px 14px 8px; }
.management-stat-list div { display: flex; justify-content: space-between; gap: 9px; padding: 9px 0; border-top: 1px solid #e7eef0; }
.management-stat-list div:nth-child(-n+2) { border-top: 0; }
.management-stat-list dt { color: #55727b; font-size: .82rem; }
.management-stat-list dd { margin: 0; color: #173f4d; font-weight: 800; }
.workforce-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.workforce-grid .management-kpi { min-height: 78px; }

@media (max-width: 900px) {
    .request-action-grid,
    .travel-apply-layout,
    .people-manage-grid {
        grid-template-columns: 1fr;
    }

    .people-manage-card:nth-child(n+3) {
        grid-column: auto;
    }

    .governance-mini-grid,
    .governance-admin-grid,
    .work-kpi-grid {
        grid-template-columns: 1fr;
    }

    .work-attention-row { grid-template-columns: auto 1fr; }
    .work-attention-row small { grid-column: 2; text-align: left; }

    .compact-form-grid,
    .work-form { grid-template-columns: 1fr; }

    .temporary-kpis,
    .temporary-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .temporary-filter-form .filter-actions { grid-column: 1 / -1; }
    .temporary-history article { grid-template-columns: 1fr; gap: 3px; }

    .management-filter-form,
    .management-two-column,
    .management-operations-grid { grid-template-columns: 1fr; }
    .management-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workforce-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
    .management-kpi-grid, .workforce-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .management-stat-list { grid-template-columns: 1fr; }
    .management-stat-list div:nth-child(-n+2) { border-top: 1px solid #e7eef0; }
    .management-stat-list div:first-child { border-top: 0; }
    .section-heading, .management-intelligence-intro .panel-head { align-items: flex-start; flex-direction: column; }
    .section-heading span { text-align: left; }
    .management-intelligence-intro .panel-head { gap: 10px; padding: 13px 14px 11px; }
    .management-intelligence-intro .panel-actions { justify-content: flex-start; }
    .management-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 11px 14px 13px; }
    .management-filter-form label:nth-of-type(4), .management-filter-form .filter-actions { grid-column: 1 / -1; }
    .management-kpi { min-height: 90px; padding: 11px 12px; }
    .management-kpi strong { font-size: 1.28rem; }
    .management-kpi small { font-size: .73rem; }
    .management-away-list, .management-attention-list, .management-stat-list { padding-inline: 12px; }
}

@media (max-width: 420px) {
    .management-kpi-grid, .workforce-grid { grid-template-columns: 1fr; }
    .management-filter-form { grid-template-columns: 1fr; }
    .management-filter-form label:nth-of-type(4), .management-filter-form .filter-actions { grid-column: auto; }
}

/* HR Improvement & UX Pack: shared containment and compact workflow views. */
html, body { max-width: 100%; overflow-x: hidden; }
.main, .panel, .panel-head, .panel-actions, .form-grid, .filter-form, .table-scroll { min-width: 0; }
.panel { max-width: 100%; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.table-scroll > table { min-width: max-content; }
.panel-head { flex-wrap: wrap; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-form { align-items: end; }
.filter-form label, .form-grid label { min-width: 0; }
.filter-form input, .filter-form select, .form-grid input, .form-grid select, .form-grid textarea { max-width: 100%; box-sizing: border-box; }

.timesheet-activity-sheet,
.timesheet-item-review-panel,
.timesheet-item-report,
.routine-management-panel,
.staff-review-panel { margin: 14px 0; padding: 13px; border: 1px solid #d9e6ea; border-radius: 10px; background: #fff; }
.timesheet-activity-sheet { border-left: 4px solid #168b92; background: #fbfeff; }
.timesheet-empty-state { margin: 14px 0; padding: 16px; border: 1px dashed #9fc9d1; border-radius: 10px; background: #f6fbfc; }
.timesheet-empty-state h3 { margin: 0 0 5px; color: #145a68; }
.timesheet-empty-state p { margin: 5px 0; }
.timesheet-start-form { margin-top: 12px; }
.timesheet-readonly-note { margin: 10px 0; }
.timesheet-item-counts { display: flex; flex-wrap: wrap; gap: 7px; }
.timesheet-item-counts span { padding: 4px 8px; border-radius: 999px; background: #eef6f8; color: #315965; font-size: .75rem; }
.timesheet-item-counts b { color: #123f4d; }
.timesheet-add-activity,
.legacy-timesheet-entries,
.routine-editor { margin: 10px 0; padding: 10px 12px; border: 1px solid #d8e7ea; border-radius: 8px; background: #fff; }
.timesheet-add-activity summary,
.legacy-timesheet-entries summary,
.routine-editor summary { cursor: pointer; color: #126575; font-weight: 800; }
.timesheet-add-activity[open] summary,
.legacy-timesheet-entries[open] summary,
.routine-editor[open] summary { margin-bottom: 10px; }
.timesheet-add-activity > summary.button,
.routine-editor > summary.button { display: inline-flex; width: fit-content; list-style: none; }
.timesheet-add-activity > summary::-webkit-details-marker,
.routine-editor > summary::-webkit-details-marker,
.routine-employee-manager > summary::-webkit-details-marker { display: none; }
.routine-employee-manager { margin-top: 8px; }
.routine-employee-manager > summary.button { display: inline-flex; list-style: none; }
.routine-employee-form { display: grid; gap: 9px; min-width: 360px; margin-top: 9px; }
.routine-employee-form p { margin: 0; }
.routine-employee-columns { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 10px; }
.routine-employee-columns fieldset { min-width: 0; margin: 0; padding: 8px; border: 1px solid #d8e7ea; border-radius: 7px; }
.routine-employee-columns label { display: block; margin: 5px 0; overflow-wrap: anywhere; }
.routine-employee-columns small { color: var(--muted); }
.timesheet-activity-print-section { margin-top: 14px; }
.timesheet-unconfirmed-row { background: #fffdf1; }
.timesheet-activity-table td small,
.timesheet-register-table td small,
.compact-sheet td small { display: block; margin-top: 3px; color: var(--muted); }
.compact-approval { display: grid; grid-template-columns: minmax(105px, .6fr) minmax(140px, 1fr) auto; gap: 6px; align-items: center; }
.weekday-checks { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 2px; }
.weekday-checks label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.actionable-alert { display: block; margin-top: 12px; color: #7a4d00; text-decoration: none; }
.actionable-alert:hover { border-color: #dca328; background: #fff8dc; }
.staff-review-panel .badge { margin: 2px 3px 2px 0; }

@media (max-width: 900px) {
    .compact-approval { grid-template-columns: 1fr; }
    .timesheet-item-counts { width: 100%; }
    .routine-employee-columns { grid-template-columns: 1fr; }
    .timesheet-panel > .leave-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rectification-panel > .leave-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .panel { margin-inline: 0; border-radius: 8px; }
    .panel-head { gap: 9px; }
    .panel-actions .button, .panel-actions button { min-height: 34px; }
    .timesheet-activity-sheet,
    .timesheet-item-review-panel,
    .timesheet-item-report,
    .routine-management-panel,
    .staff-review-panel { padding: 10px; }
    .timesheet-panel > .leave-detail-grid { grid-template-columns: 1fr; }
    .rectification-panel > .leave-detail-grid { grid-template-columns: 1fr; }
    .rectification-candidate-row > td { padding-block: 10px; }
    .rectification-inline-form { align-items: stretch; }
    .rectification-inline-form > * { max-width: 100%; }
    .notification-admin-hero { align-items: flex-start; flex-direction: column; padding: 12px; }
    .notification-admin-hero + .split .detail-grid { padding: 10px; }
    .notification-admin-hero + .split .notification-readiness-grid,
    .notification-admin-hero + .split .notice,
    .notification-admin-hero + .split .notification-test-form,
    .notification-admin-hero + .split + .panel .notification-test-form { margin-inline: 10px; }
    .notification-history-table { min-width: 760px; }
}

@media print {
    .timesheet-panel .panel-actions,
    .timesheet-panel .leave-approvals,
    .timesheet-panel > .table-scroll,
    .timesheet-panel .timesheet-summary-grid { display: none !important; }
    .timesheet-panel .timesheet-activity-print-section { display: block !important; }
    .timesheet-unconfirmed-row { background: #fff !important; }
}

/* Sidebar navigation: compact, independently scrollable and responsive. */
.hr-sidebar {
    height: 100vh;
    min-height: 0;
    padding: 18px 14px 14px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    overflow: hidden;
}

.hr-sidebar .brand {
    margin: 0;
    min-width: 0;
}

.hr-sidebar-brand-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px 13px;
    border-bottom: 1px solid rgba(205, 220, 224, 0.15);
}

.hr-sidebar-brand-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18));
}

.hr-sidebar .brand {
    align-items: center;
    gap: 9px;
    margin: 0;
}

.hr-sidebar .brand strong {
    overflow-wrap: anywhere;
}

.hr-sidebar .brand small {
    margin-top: 2px;
    line-height: 1.25;
}

.hr-sidebar .brand strong,
.hr-sidebar .brand small {
    overflow-wrap: anywhere;
}

.hr-sidebar-nav {
    display: block;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 2px 4px;
    scrollbar-gutter: stable;
}

.hr-sidebar-section {
    display: block;
    padding: 3px 0;
    border-top: 0;
}

.hr-sidebar-section + .hr-sidebar-section {
    margin-top: 4px;
}

.hr-sidebar-section-toggle {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    color: #91b0b8;
    background: transparent;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.hr-sidebar-section-toggle:hover,
.hr-sidebar-section-toggle:focus-visible {
    color: #dceff2;
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.hr-sidebar-section.is-active-section .hr-sidebar-section-toggle,
.hr-sidebar-section:not(.is-collapsed) .hr-sidebar-section-toggle {
    color: #dceff2;
    border-color: rgba(120, 178, 190, 0.24);
    background: rgba(84, 145, 159, 0.12);
}

.hr-sidebar-section-toggle:focus-visible,
.hr-sidebar-link:focus-visible,
.hr-sidebar-mobile-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(245, 184, 75, 0.42);
}

.hr-sidebar-section-label {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hr-sidebar-section-label > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hr-sidebar-section-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.hr-sidebar-section-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.hr-sidebar-section-chevron {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-right: 3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.16s ease;
}

@media (min-width: 921px) {
    .hr-sidebar-section-toggle {
        min-height: 38px;
        padding: 9px 10px;
        font-size: 0.76rem;
        letter-spacing: 0.065em;
    }

    .hr-sidebar-section-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .hr-sidebar-section-chevron {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
    }
}

.hr-sidebar-section:not(.is-collapsed) .hr-sidebar-section-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.hr-sidebar-section-body {
    display: grid;
    gap: 2px;
    margin: 3px 2px 4px;
    padding: 3px 0 4px 7px;
    border-left: 1px solid rgba(143, 184, 193, 0.22);
    max-height: 900px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.18s ease, opacity 0.12s ease;
}

.hr-sidebar-section.is-collapsed .hr-sidebar-section-body {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-left-color: transparent;
    opacity: 0;
    pointer-events: none;
}

.hr-sidebar .hr-sidebar-link {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 8px 10px 8px 13px;
    border-radius: 6px;
    color: #cddce0;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: color 0.16s ease, background 0.16s ease;
}

.hr-sidebar .hr-sidebar-link:hover {
    transform: none;
    color: #fff;
    background: rgba(104, 163, 177, 0.16);
}

.hr-sidebar .hr-sidebar-link.active {
    position: relative;
    color: #fff;
    background: #1b4654;
    box-shadow: inset 3px 0 0 #f5b84b;
    font-weight: 800;
}

.hr-sidebar-footer {
    margin-top: 0;
    padding: 10px 12px;
    gap: 2px;
    border-radius: 7px;
    border-color: rgba(150, 190, 199, 0.28);
    background: rgba(255, 255, 255, 0.08);
}

.hr-sidebar-footer a {
    margin-top: 3px;
    font-size: 0.88rem;
}

.hr-sidebar-backdrop,
.hr-sidebar-mobile-toggle,
.hr-sidebar-drawer-close,
.hr-mobile-appbar,
.dashboard-table-swipe-hint {
    display: none;
}

/* Users & Access workspaces: scoped density and responsive table handling. */
.users-access-workspace {
    min-width: 0;
    gap: 12px;
}

.users-access-workspace > .panel-head {
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 2px 2px 0;
}

.users-access-workspace > .panel-head h2 {
    margin: 0;
}

.users-access-workspace > .panel-head > div:first-child > span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .86rem;
}

.users-access-workspace .panel-actions {
    align-items: center;
}

.users-access-sync {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid #dbe7ec;
    border-radius: 8px;
    color: #56707a;
    background: #f8fbfc;
    font-size: .78rem;
    font-weight: 750;
    white-space: nowrap;
}

.users-access-tabs {
    position: static;
    padding: 7px;
    box-shadow: none;
}

.users-access-tabs a.active,
.users-access-tabs a.active:hover {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
}

/* Organisation & Responsibility: render one focused governance workspace at a time. */
.organisation-subtabs {
    margin: 0 14px 12px;
    padding: 5px;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.organisation-subtabs a {
    min-height: 31px;
    padding: 6px 10px;
    font-size: .79rem;
    white-space: nowrap;
}

.organisation-subtabs a span {
    display: inline-grid;
    min-width: 18px;
    min-height: 18px;
    margin-left: 3px;
    padding: 0 4px;
    place-items: center;
    border-radius: 99px;
    background: #fff1c8;
    color: #935b00;
    font-size: .68rem;
    font-weight: 850;
}

.organisation-section {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}

.organisation-section > .panel-head {
    padding: 2px 0 0;
}

.organisation-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border: 1px solid #dce8ec;
    border-radius: 9px;
    background: #fbfdfe;
    box-shadow: none;
}

.organisation-filter-row label {
    display: grid;
    flex: 1 1 150px;
    gap: 4px;
    margin: 0;
    color: #557079;
    font-size: .76rem;
    font-weight: 800;
}

.organisation-filter-row input,
.organisation-filter-row select {
    min-width: 0;
    min-height: 36px;
}

.organisation-filter-row > .button,
.organisation-filter-row > button {
    min-height: 36px;
    padding: 7px 12px;
    white-space: nowrap;
}

.governance-composer {
    position: relative;
    margin-left: auto;
}

.governance-composer > summary {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    cursor: pointer;
    list-style: none;
}

.governance-composer > summary::-webkit-details-marker { display: none; }

.governance-composer[open] > summary { margin-bottom: 9px; }

.governance-compact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 10px;
    width: min(720px, 72vw);
    padding: 12px;
    border: 1px solid #cfe2e8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 62, 77, .14);
}

.governance-compact-form label {
    display: grid;
    min-width: 0;
    gap: 4px;
    margin: 0;
    color: #557079;
    font-size: .77rem;
    font-weight: 800;
}

.governance-compact-form input,
.governance-compact-form select,
.governance-compact-form textarea {
    min-width: 0;
    min-height: 36px;
}

.governance-compact-form textarea { min-height: 58px; resize: vertical; }
.governance-compact-form .governance-wide,
.governance-form-actions { grid-column: 1 / -1; }
.governance-form-actions { display: flex; justify-content: flex-end; padding-top: 2px; }
.governance-form-actions .primary { width: auto; min-height: 36px; padding: 7px 13px; }

.organisation-empty-state {
    margin: 0;
    padding: 11px 12px;
}

.governance-note {
    display: -webkit-box;
    max-width: min(42vw, 460px);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

.users-access-workspace .access-section {
    min-width: 0;
    margin: 0;
}

.users-access-workspace .access-section > .panel-head {
    gap: 10px;
    padding: 12px 14px;
}

.users-access-summary-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 0 14px 12px;
}

.users-access-summary-strip article {
    display: grid;
    gap: 2px;
    min-width: 0;
    min-height: 66px;
    padding: 10px 11px;
    border: 1px solid #dce8ed;
    border-radius: 9px;
    background: #fbfdfe;
}

.users-access-summary-strip article span {
    overflow-wrap: anywhere;
    color: #5a747e;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
}

.users-access-summary-strip article strong {
    color: #163844;
    font-size: 1.16rem;
    line-height: 1.1;
}

.users-access-workspace .access-filter-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.35fr) repeat(4, minmax(130px, 1fr)) auto auto;
    gap: 9px;
    align-items: end;
    padding: 11px 14px;
}

.users-access-workspace .access-filter-form label,
.users-access-workspace .access-filter-form input,
.users-access-workspace .access-filter-form select {
    min-width: 0;
}

.users-access-workspace .access-filter-form input,
.users-access-workspace .access-filter-form select,
.users-access-workspace .users-access-page-size select {
    min-height: 38px;
}

.users-access-workspace .access-filter-form > .button,
.users-access-workspace .access-filter-form > button {
    min-height: 38px;
    white-space: nowrap;
}

.users-access-table-scroll {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.users-access-table-scroll > .access-table {
    width: 100%;
    margin: 0;
}

.users-access-workspace .access-table th,
.users-access-workspace .access-table td {
    padding: 8px 9px;
    font-size: .79rem;
    line-height: 1.28;
    vertical-align: middle;
}

.users-access-workspace .people-access-table {
    min-width: 1050px;
}

.users-access-workspace .personal-email-table {
    min-width: 960px;
}

.users-access-workspace .personal-email-table input[type="email"] {
    min-width: 0;
}

.users-access-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 14px 12px;
    color: #58727b;
    font-size: .82rem;
}

.users-access-pagination > span {
    font-weight: 750;
}

.users-access-page-size {
    margin: 0;
}

.users-access-page-size label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5a747e;
    font-size: .78rem;
    font-weight: 800;
}

.users-access-page-size select {
    width: auto;
    padding: 6px 26px 6px 8px;
}

.users-access-notification-editor {
    margin: 0 14px 14px;
    padding: 13px;
}

.users-access-editor-form {
    display: grid;
    gap: 12px;
}

.users-access-selected-employee {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 10px;
    padding: 10px 14px;
    border: 1px solid #d9e7ec;
    border-radius: 9px;
    color: #557079;
    background: #f8fbfc;
}

.users-access-selected-employee strong {
    color: #173b47;
    font-size: 1rem;
}

.people-manage-disclosure {
    padding: 0;
    overflow: hidden;
}

.people-manage-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    color: #173b47;
    font-weight: 850;
    list-style: none;
}

.people-manage-disclosure > summary::-webkit-details-marker { display: none; }
.people-manage-disclosure > summary small { color: #67808a; font-size: .76rem; font-weight: 700; text-align: right; }
.people-manage-disclosure > form,
.people-manage-disclosure > .detail-grid,
.people-manage-disclosure > .governance-mini-grid,
.people-manage-disclosure > .governance-current-list { margin-left: 14px; margin-right: 14px; }
.people-manage-disclosure > form { margin-bottom: 14px; }
.people-manage-disclosure > .detail-grid { margin-bottom: 10px; }
.people-manage-disclosure > .governance-mini-grid,
.people-manage-disclosure > .governance-current-list { margin-bottom: 14px; }

.users-access-editor-form .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.users-access-check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px;
    border: 1px solid #e0eaee;
    border-radius: 8px;
    background: #fbfdfe;
}

.users-access-check-grid .checkline {
    margin: 0;
    font-size: .82rem;
}

.users-access-audit-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
    gap: 8px;
    align-items: end;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.users-access-audit-filter input { min-width: 0; min-height: 38px; }

@media (max-width: 760px) {
    .users-access-audit-filter { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
    .users-access-summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .users-access-workspace .access-filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .users-access-workspace > .panel-head,
    .users-access-workspace .access-section > .panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .users-access-workspace .panel-actions { width: 100%; flex-wrap: wrap; }
    .users-access-sync { white-space: normal; }
    .users-access-tabs { margin: 0 -2px; border-radius: 8px; }
    .users-access-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 10px 10px; }
    .users-access-workspace .access-filter-form { grid-template-columns: 1fr; padding: 10px; }
    .users-access-workspace .access-filter-form > .button,
    .users-access-workspace .access-filter-form > button { width: 100%; }
    .users-access-pagination { align-items: flex-start; flex-direction: column; padding: 10px; }
    .users-access-pagination .inline-actions { flex-wrap: wrap; }
    .users-access-editor-form .form-grid { grid-template-columns: 1fr; }
    .users-access-notification-editor { margin: 0 10px 10px; }
    .organisation-subtabs { margin: 0 10px 10px; }
    .organisation-section { padding: 0 10px 10px; }
    .organisation-section > .panel-head { align-items: flex-start; flex-direction: column; }
    .governance-composer { width: 100%; margin-left: 0; }
    .governance-composer > summary { justify-content: center; width: 100%; }
    .governance-compact-form { width: 100%; grid-template-columns: 1fr; }
    .organisation-filter-row { display: grid; grid-template-columns: 1fr; }
    .organisation-filter-row > .button,
    .organisation-filter-row > button { width: 100%; }
    .governance-note { max-width: 230px; }
}

@media (max-width: 920px) {
    .hr-sidebar {
        position: fixed !important;
        z-index: 80;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(88vw, 340px);
        max-width: 340px;
        height: 100dvh;
        min-height: 100dvh;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 8px 0 28px rgba(9, 31, 42, 0.28);
    }

    .hr-sidebar.is-drawer-open {
        transform: translateX(0);
    }

    .hr-sidebar-backdrop {
        position: fixed;
        z-index: 70;
        inset: 0;
        background: rgba(9, 26, 35, 0.46);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .hr-sidebar-backdrop:not([hidden]) {
        display: block;
    }

    .hr-sidebar-backdrop[hidden] {
        display: none !important;
        pointer-events: none;
    }

    .hr-sidebar-backdrop.is-visible {
        opacity: 1;
    }

    .hr-sidebar-nav {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .hr-sidebar-section,
    .hr-sidebar-section-body,
    .hr-sidebar .hr-sidebar-link,
    .hr-sidebar-footer {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .hr-sidebar-section,
    .hr-sidebar-section-body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .hr-sidebar-footer {
        flex: 0 0 auto;
        overflow-wrap: anywhere;
    }

    .main {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    .hr-mobile-appbar {
        position: sticky;
        z-index: 40;
        top: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 52px;
        margin: -18px -18px 14px;
        padding: max(8px, env(safe-area-inset-top)) 18px 8px;
        border-bottom: 1px solid #d8e1ec;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 4px 12px rgba(20, 36, 55, 0.07);
    }

    .hr-mobile-appbar strong {
        min-width: 0;
        color: #173f4d;
        font-size: 0.94rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hr-mobile-appbar .hr-sidebar-mobile-toggle {
        flex: 0 0 auto;
        margin: 0;
    }

    .dashboard-command-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    .dashboard-command-table-scroll > table {
        min-width: 960px;
    }

    .dashboard-table-swipe-hint {
        display: block;
        margin: 0;
        padding: 0 12px 7px;
        color: #5c6b82;
        font-size: 0.76rem;
        font-weight: 700;
    }

    body.hr-sidebar-drawer-open {
        overflow: hidden;
    }

    .hr-sidebar-mobile-toggle {
        width: 38px;
        height: 36px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        margin: 0 0 8px;
        padding: 0 9px;
        border: 1px solid #bed1dc;
        border-radius: 7px;
        background: #fff;
        cursor: pointer;
    }

    .hr-sidebar-mobile-toggle span {
        display: block;
        height: 2px;
        width: 100%;
        border-radius: 999px;
        background: #17495a;
    }

    .hr-sidebar-drawer-close {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: inline-grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(205, 220, 224, 0.24);
        border-radius: 7px;
        color: #eef7f8;
        background: rgba(255, 255, 255, 0.08);
        font: inherit;
        font-size: 1.55rem;
        line-height: 1;
        cursor: pointer;
    }

    .hr-sidebar-drawer-close:hover,
    .hr-sidebar-drawer-close:focus-visible {
        background: rgba(255, 255, 255, 0.16);
        outline: none;
    }
}

@media (max-width: 480px) {
    .main {
        padding: 14px;
    }

    .hr-mobile-appbar {
        min-height: 50px;
        margin: -14px -14px 12px;
        padding-right: 14px;
        padding-left: 14px;
    }
}

@media print {
    .hr-sidebar-backdrop,
    .hr-sidebar-mobile-toggle,
    .hr-sidebar-drawer-close { display: none !important; }
}

/* Attendance page: compact controls and KPI density. */
.topbar.attendance-page-header { margin-bottom: 12px; }
.attendance-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; min-width: 0; }
.attendance-sync-compact { color: var(--muted); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.attendance-summary-summary { min-height: 54px; padding: 10px 128px 10px 14px; }
.attendance-summary-summary .summary-title { gap: 9px; }
.attendance-summary-summary .summary-title strong { font-size: 16px; }
.attendance-summary-summary .summary-toggle-icon { width: 30px; height: 30px; }
.attendance-summary-content { padding: 10px; }

.filter-form.attendance-filter-form { padding: 0 0 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.attendance-filter-form label { gap: 3px; padding: 7px 9px; }
.attendance-filter-form input,
.attendance-filter-form select { min-height: 38px; padding: 3px 0 0; }
.attendance-filter-form .checkline { min-height: 40px; padding: 7px 9px; }
.attendance-filter-form .checkline input { width: auto; min-height: auto; padding: 0; }
.attendance-filter-secondary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 7px; min-width: 0; }
.attendance-filter-form .filter-actions { align-items: stretch; gap: 7px; }
.attendance-filter-form .filter-actions .primary,
.attendance-filter-form .filter-actions .button { min-height: 40px; }

.metrics.attendance-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 0; }
.attendance-metrics article { min-width: 0; min-height: 72px; padding: 9px 10px; box-shadow: 0 3px 9px rgba(20, 36, 55, .045); }
.attendance-metrics strong { margin: 3px 0; font-size: 23px; line-height: 1.08; }
.attendance-metrics article > span,
.attendance-metrics article > small { font-size: .72rem; line-height: 1.2; }

@media (max-width: 1279px) {
    .metrics.attendance-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
    .filter-form.attendance-filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .attendance-filter-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .attendance-filter-secondary .filter-actions { grid-column: span 2; }
    .metrics.attendance-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .topbar.attendance-page-header { align-items: flex-start; }
    .attendance-header-actions { justify-content: flex-start; width: 100%; }
    .attendance-header-actions .search-box { flex: 1 1 230px; }
    .attendance-summary-summary { padding-right: 14px; }
    .filter-form.attendance-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-filter-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-filter-secondary .filter-actions { grid-column: 1 / -1; }
    .metrics.attendance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 389px) {
    .filter-form.attendance-filter-form,
    .attendance-filter-secondary,
    .metrics.attendance-metrics { grid-template-columns: 1fr; }
}

/* Analytics: compact, executive-readable dashboard with bounded tables. */
.topbar.analytics-page-header { margin-bottom: 12px; }
.analytics-sync-compact { color: var(--muted); font-size: .78rem; font-weight: 750; white-space: nowrap; }
.analytics-snapshot-wrap { margin: 0 0 10px; }
.analytics-snapshot-heading { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.analytics-snapshot-heading h2 { margin: 0; font-size: .91rem; }
.analytics-snapshot-heading span { color: var(--muted); font-size: .73rem; }
.analytics-snapshot { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.analytics-snapshot-metric { --analytics-accent: var(--brand); min-width: 0; min-height: 74px; padding: 9px 10px; display: grid; align-content: center; gap: 2px; border: 1px solid var(--line); border-left: 4px solid var(--analytics-accent); border-radius: 9px; background: #fff; box-shadow: 0 3px 9px rgba(20, 36, 55, .045); color: var(--ink); text-decoration: none; }
.analytics-snapshot-metric:not(.is-static):hover { border-color: var(--analytics-accent); box-shadow: 0 7px 16px rgba(20, 36, 55, .10); transform: translateY(-1px); }
.analytics-snapshot-metric:focus-visible { outline: 3px solid rgba(22, 111, 122, .25); outline-offset: 2px; }
.analytics-snapshot-metric > span { color: var(--muted); font-size: .68rem; font-weight: 850; letter-spacing: .035em; line-height: 1.15; text-transform: uppercase; }
.analytics-snapshot-metric strong { font-size: 1.35rem; line-height: 1.05; }
.analytics-snapshot-metric small { color: var(--muted); font-size: .7rem; line-height: 1.2; }
.analytics-snapshot-metric.tone-present { --analytics-accent: #238553; background: #f0fbf5; }
.analytics-snapshot-metric.tone-absent { --analytics-accent: #c43d35; background: #fff6f5; }
.analytics-snapshot-metric.tone-late { --analytics-accent: #bb7015; background: #fff9ef; }
.analytics-snapshot-metric.tone-on-time { --analytics-accent: #157b84; background: #f0fbfb; }
.analytics-snapshot-metric.tone-early { --analytics-accent: #a55f17; background: #fff8f0; }
.analytics-snapshot-metric.tone-open { --analytics-accent: #7046c9; background: #f8f5ff; }
.analytics-snapshot-metric.tone-raw { --analytics-accent: #2e68bf; background: #f3f7ff; }

.analytics-section { margin: 0 0 10px; overflow: hidden; }
.analytics-section > summary { min-height: 60px; padding: 10px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto 26px; align-items: center; gap: 12px; list-style: none; cursor: pointer; color: var(--ink); }
.analytics-section > summary::-webkit-details-marker { display: none; }
.analytics-section > summary > span:first-child { min-width: 0; display: grid; gap: 2px; }
.analytics-section > summary strong { display: block; font-size: .98rem; }
.analytics-section > summary small { color: var(--muted); font-size: .74rem; font-weight: 650; line-height: 1.25; }
.analytics-section-meta { color: var(--muted); font-size: .74rem; font-weight: 750; text-align: right; white-space: nowrap; }
.analytics-section-chevron { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; background: #eef5f5; color: var(--brand); font-size: 1.2rem; line-height: 1; transition: transform .18s ease; }
.analytics-section[open] > summary { border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #f7fbfb, #fff); }
.analytics-section[open] .analytics-section-chevron { transform: rotate(180deg); }
.analytics-section > summary:focus-visible { outline: 3px solid rgba(22, 111, 122, .25); outline-offset: -3px; }

.analytics-overview-grid { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(230px, .88fr) minmax(330px, 1.3fr); gap: 10px; padding: 10px; align-items: start; }
.analytics-overview-card { min-width: 0; min-height: 0; }
.analytics-overview-card .panel-head,
.analytics-live-feed .panel-head,
.analytics-preview-card .panel-head,
.analytics-chart-card .panel-head { min-height: 42px; padding: 8px 10px; gap: 8px; }
.analytics-overview-card .panel-head h2,
.analytics-live-feed .panel-head h2,
.analytics-preview-card .panel-head h2,
.analytics-chart-card .panel-head h2 { font-size: .92rem; }
.analytics-overview-card .panel-head span,
.analytics-live-feed .panel-head span,
.analytics-preview-card .panel-head span,
.analytics-chart-card .panel-head span { color: var(--muted); font-size: .7rem; }
.analytics-overview-card .donut-wrap { min-height: 118px; padding: 9px; }
.analytics-overview-card .donut-chart { width: 90px; }
.analytics-overview-card .split-meter { min-height: 112px; margin: 9px 10px; }
.analytics-department-list { max-height: 138px; overflow: auto; margin: 8px 10px 10px; }
.analytics-department-list > div { padding: 6px 0; }

.analytics-alerts-content { padding: 10px; }
.analytics-alert-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.analytics-alert-summary article { min-width: 0; min-height: 59px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.analytics-alert-summary span { display: block; overflow: hidden; color: var(--muted); font-size: .68rem; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.analytics-alert-summary strong { display: block; margin-top: 4px; font-size: 1.15rem; }
.analytics-live-feed { min-width: 0; margin-bottom: 10px; }
.analytics-live-feed .table-scroll { max-height: 296px; }
.analytics-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.analytics-preview-grid > :last-child { grid-column: 1 / -1; }
.analytics-preview-card { min-width: 0; }
.analytics-preview-card .table-scroll { max-height: 292px; }
.analytics-preview-card table { min-width: 420px; }
.analytics-preview-card td small,
.analytics-live-feed td small { display: block; color: var(--muted); font-size: .69rem; margin-top: 2px; }

.analytics-trends-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; align-items: start; }
.analytics-chart-card { min-width: 0; min-height: 0; }
.analytics-chart-card .bar-chart { min-height: 180px; margin: 8px 10px 10px; }
.analytics-chart-card .rank-list { max-height: 198px; overflow: auto; margin: 6px 10px 10px; }
.analytics-rank-list > div { padding: 9px 0; }
.analytics-section .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1279px) {
    .analytics-snapshot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .analytics-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analytics-department-card { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
    .analytics-snapshot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .topbar.analytics-page-header { align-items: flex-start; }
    .analytics-sync-compact { padding-top: 2px; }
    .analytics-section > summary { grid-template-columns: minmax(0, 1fr) 26px; min-height: 66px; padding: 10px 12px; }
    .analytics-section-meta { grid-column: 1; grid-row: 2; text-align: left; white-space: normal; }
    .analytics-section-chevron { grid-column: 2; grid-row: 1 / span 2; }
    .analytics-overview-grid,
    .analytics-trends-grid,
    .analytics-preview-grid { grid-template-columns: minmax(0, 1fr); padding: 9px; }
    .analytics-preview-grid > :last-child { grid-column: auto; }
    .analytics-alerts-content { padding: 9px; }
    .analytics-snapshot-heading { align-items: flex-start; flex-direction: column; gap: 1px; }
    .analytics-alert-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .analytics-live-feed .panel-head,
    .analytics-preview-card .panel-head,
    .analytics-chart-card .panel-head { align-items: flex-start; flex-wrap: wrap; }
    .analytics-live-feed .panel-head .button,
    .analytics-preview-card .panel-head .button,
    .analytics-chart-card .panel-head .button { margin-left: 0; }
}

@media (max-width: 480px) {
    .analytics-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .analytics-snapshot-metric { min-height: 70px; padding: 8px 9px; }
    .analytics-snapshot-metric strong { font-size: 1.24rem; }
    .analytics-alert-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
    .analytics-snapshot { grid-template-columns: 1fr; }
}

/* Attendance Intelligence: compact two-rate presentation and grouped tables. */
.topbar.attendance-intelligence-page-header { margin-bottom: 12px; }
.attendance-intelligence-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; min-width: 0; }
.attendance-intelligence-sync-compact { color: var(--muted); font-size: .78rem; font-weight: 750; white-space: nowrap; }
.intelligence-controls-panel { margin-bottom: 10px; background: linear-gradient(135deg, #fff, #f8fafc); }
.intelligence-methodology-head { min-height: 0; padding: 10px 12px 6px; align-items: flex-start; gap: 10px; }
.intelligence-methodology-head h2 { margin: 0 0 2px; font-size: .95rem; }
.intelligence-methodology-head span { display: block; max-width: 880px; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.intelligence-methodology-head .panel-actions { gap: 7px; flex: 0 0 auto; }
.filter-form.intelligence-filter-form { padding: 0 12px 10px; grid-template-columns: minmax(140px, .75fr) minmax(140px, .75fr) minmax(170px, 1fr) minmax(210px, 1.25fr) minmax(145px, .8fr) auto; gap: 9px; align-items: end; }
.intelligence-filter-form label { gap: 3px; padding: 7px 9px; }
.intelligence-filter-form input,
.intelligence-filter-form select { min-height: 37px; padding: 3px 0 0; }
.intelligence-filter-form .filter-actions { min-height: 37px; gap: 7px; align-items: stretch; white-space: nowrap; }
.intelligence-filter-form .filter-actions .button,
.intelligence-filter-form .filter-actions .primary { min-height: 37px; }

.intelligence-kpi-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.intelligence-kpi-card { min-width: 0; min-height: 76px; padding: 9px 10px; border-radius: 9px; box-shadow: 0 3px 9px rgba(15, 23, 42, .05); }
.intelligence-kpi-card::after { right: -19px; top: -19px; width: 60px; height: 60px; }
.intelligence-kpi-card span { font-size: .67rem; line-height: 1.14; }
.intelligence-kpi-card strong { margin-top: 3px; font-size: 1.28rem; line-height: 1.05; }
.intelligence-kpi-card small { margin-top: 2px; font-size: .68rem; line-height: 1.18; }

.intelligence-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.intelligence-table-top-scroll { display: none; max-width: 100%; height: 14px; margin: 0 0 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; }
.intelligence-table-top-scroll.is-scrollable { display: block; }
.intelligence-table-top-scroll-track { height: 1px; }
.intelligence-table-scroll.can-drag .intelligence-table td:not(:first-child) { cursor: grab; }
.intelligence-table-scroll.is-dragging .intelligence-table td:not(:first-child) { cursor: grabbing; user-select: none; }
.intelligence-table { width: max-content; min-width: 1510px; table-layout: auto; font-size: .79rem; line-height: 1.25; }
.intelligence-employee-table { min-width: 1635px; }
.intelligence-table th { position: sticky; top: 0; z-index: 1; white-space: normal; line-height: 1.15; }
.intelligence-table td,
.intelligence-table th { padding: .48rem .5rem; overflow-wrap: normal; vertical-align: top; }
.intelligence-table small { margin-top: 2px; font-size: .69rem; line-height: 1.22; white-space: normal; }
.intelligence-table th:first-child,
.intelligence-table td:first-child { position: sticky; left: 0; z-index: 2; min-width: 158px; max-width: 218px; background: #fff; box-shadow: 1px 0 0 #dce8ec; }
.intelligence-table thead th:first-child { z-index: 3; background: #eef6ff; }
.intelligence-table tbody tr:nth-child(even) td:first-child { background: #f8fafc; }
.intelligence-table tbody tr:hover td:first-child { background: #eff6ff; }
.intelligence-department-table th:nth-child(2), .intelligence-department-table td:nth-child(2) { width: 78px; min-width: 78px; text-align: center; }
.intelligence-table th:nth-child(n+3):nth-child(-n+9),
.intelligence-table td:nth-child(n+3):nth-child(-n+9),
.intelligence-table th:nth-child(n+13):nth-child(-n+14),
.intelligence-table td:nth-child(n+13):nth-child(-n+14) { min-width: 76px; text-align: center; }
.intelligence-table th:nth-child(10), .intelligence-table td:nth-child(10),
.intelligence-table th:nth-child(11), .intelligence-table td:nth-child(11),
.intelligence-table th:nth-child(12), .intelligence-table td:nth-child(12) { min-width: 92px; }
.intelligence-table th:last-child, .intelligence-table td:last-child { min-width: 138px; }
.intelligence-staff-column { width: 78px; text-align: center; }
.intelligence-table .pattern-pill { max-width: 100%; white-space: normal; }
.intelligence-table-swipe-hint { display: none; }

@media (max-width: 1365px) {
    .intelligence-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .filter-form.intelligence-filter-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .intelligence-filter-form .filter-actions { grid-column: span 2; }
}

@media (max-width: 1023px) {
    .intelligence-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .intelligence-table-swipe-hint { display: block; margin: 0 12px 7px; color: var(--muted); font-size: .72rem; }
    .filter-form.intelligence-filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .intelligence-filter-form .filter-actions { grid-column: auto; }
}

@media (max-width: 767px) {
    .attendance-intelligence-header-actions { justify-content: flex-start; width: 100%; }
    .attendance-intelligence-header-actions .search-box { flex: 1 1 220px; }
    .intelligence-methodology-head { flex-direction: column; }
    .intelligence-methodology-head .panel-actions { width: 100%; justify-content: flex-start; }
    .filter-form.intelligence-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 10px 10px; }
    .intelligence-filter-form .filter-actions { grid-column: 1 / -1; }
    .intelligence-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .intelligence-kpi-card { min-height: 72px; padding: 8px 9px; }
    .intelligence-table { font-size: .77rem; }
    .intelligence-table-top-scroll { display: none !important; }
}

@media (max-width: 390px) {
    .filter-form.intelligence-filter-form { grid-template-columns: 1fr; }
    .intelligence-filter-form .filter-actions { grid-column: auto; }
    .intelligence-kpi-grid { grid-template-columns: 1fr; }
}

/* Routine profiles, monthly evidence and shared team work */
.timesheet-panel,.routine-management-panel,.routine-profile-panel,.team-workspace { max-width: 1480px; margin-inline: auto; font-size: 14px; }
.timesheet-panel label,.routine-management-panel label,.routine-profile-panel label,.team-workspace label,
.timesheet-panel button,.routine-management-panel button,.routine-profile-panel button,.team-workspace button,
.timesheet-panel .button,.routine-management-panel .button,.routine-profile-panel .button,.team-workspace .button,
.timesheet-panel td,.timesheet-panel th,.routine-management-panel td,.routine-management-panel th,
.routine-profile-panel td,.routine-profile-panel th,.team-workspace td,.team-workspace th { font-size: .875rem; }
.timesheet-summary-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; }
.timesheet-summary-grid article { min-width: 0; padding: 10px 12px; }
.timesheet-status-strip { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:10px 0; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:#f8fbfc; }
.timesheet-status-strip .locked-note { color:var(--muted); }
.timesheet-activity-sheet { min-width:0; }
.timesheet-item-counts { display:flex; flex-wrap:wrap; gap:6px; }
.timesheet-item-counts span { padding:5px 8px; border-radius:999px; background:#edf6f7; color:#31535b; font-size:.78rem; }
.timesheet-add-activity,.routine-editor,.timesheet-future-schedule { margin:10px 0; }
.timesheet-future-schedule { border:1px solid var(--line); border-radius:10px; padding:9px 11px; background:#fbfcfd; }
.routine-profile-activity-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:260px; overflow:auto; }
.routine-profile-activity-options label { display:flex; gap:8px; align-items:flex-start; min-width:0; padding:8px; border:1px solid var(--line); border-radius:8px; }
.routine-profile-activity-options small { display:block; color:var(--muted); }
.team-assignment-form .employee-checks { max-height:300px; overflow:auto; }
.timesheet-activity-table { min-width:900px; }
.routine-management-panel .compact-sheet,.routine-profile-panel .compact-sheet { min-width:760px; }
@media (max-width: 1100px) { .timesheet-summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width: 767px) {
  .timesheet-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .routine-profile-activity-options { grid-template-columns:1fr; }
  .timesheet-panel .panel-head,.routine-management-panel .panel-head,.routine-profile-panel .panel-head { align-items:flex-start; flex-direction:column; }
  .timesheet-panel .panel-actions { width:100%; justify-content:flex-start; }
}
@media (max-width: 390px) { .timesheet-summary-grid { grid-template-columns:1fr 1fr; } }

/* Automatic Timesheets and focused Work Management workspaces. */
.automatic-timesheet-workspace,.work-panel { min-width:0; max-width:1480px; margin-inline:auto; }
.automatic-timesheet-filter { grid-template-columns:repeat(4,minmax(170px,1fr)) auto; }
.automatic-timesheet-summary,.automatic-timesheet-batch-result { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:10px 0; }
.automatic-timesheet-summary article,.automatic-timesheet-batch-result article { min-width:0; padding:10px 12px; border:1px solid var(--line); border-left:4px solid #2b7b86; border-radius:9px; background:#fff; }
.automatic-timesheet-summary span,.automatic-timesheet-batch-result span { display:block; color:var(--muted); font-size:.75rem; font-weight:750; }
.automatic-timesheet-summary strong,.automatic-timesheet-batch-result strong { display:block; margin-top:3px; font-size:1.3rem; }
.automatic-timesheet-summary .missing { border-left-color:#bf7122; }.automatic-timesheet-summary .existing { border-left-color:#2f8d60; }.automatic-timesheet-summary .ineligible { border-left-color:#7c8792; }
.automatic-timesheet-batch-result { grid-template-columns:repeat(5,minmax(0,1fr)); padding:10px; border:1px solid #b9d8d8; border-radius:10px; background:#f0f9f9; }
.automatic-timesheet-preview-table { min-width:820px; }
.automatic-timesheet-confirm { margin-top:12px; padding:10px 12px; border:1px solid #eed3a8; border-radius:10px; background:#fffaf0; }
.automatic-timesheet-confirm > summary { cursor:pointer; width:max-content; }
.work-workspace-tabs { display:flex; gap:7px; max-width:100%; margin:0 0 12px; padding:5px; overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:#f5f8f9; }
.work-workspace-tabs a { flex:0 0 auto; min-height:38px; padding:9px 13px; border-radius:7px; color:#31515b; font-weight:800; text-decoration:none; }
.work-workspace-tabs a:hover,.work-workspace-tabs a:focus-visible { background:#e8f2f3; }.work-workspace-tabs a.active { background:#197a80; color:#fff; }
.team-participant-picker { position:relative; min-width:0; }
.team-participant-results { position:absolute; z-index:8; top:44px; left:0; right:0; max-height:250px; overflow:auto; border:1px solid #aacbd0; border-radius:9px; background:#fff; box-shadow:0 12px 28px rgba(15,43,52,.16); }
.team-participant-results button { display:block; width:100%; min-height:48px; padding:8px 10px; border:0; border-bottom:1px solid #edf2f4; border-radius:0; background:#fff; color:var(--ink); text-align:left; }
.team-participant-results button:hover,.team-participant-results button:focus { background:#eef8f8; }
.team-participant-results strong,.team-participant-results small { display:block; }
.team-participant-results small { color:var(--muted); font-size:.76rem; }
.team-participant-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.team-participant-chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:5px 6px 5px 9px; border:1px solid #a9cfd2; border-radius:999px; background:#eaf7f7; color:#174e56; }
.team-participant-chip > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-participant-chip button { width:24px; min-height:24px; padding:0; border:0; border-radius:50%; background:#cfe8e9; color:#174e56; }
@media (max-width:1024px) { .automatic-timesheet-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }.automatic-timesheet-filter .filter-actions { grid-column:1/-1; }.automatic-timesheet-summary,.automatic-timesheet-batch-result { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:767px) { .automatic-timesheet-filter { grid-template-columns:minmax(0,1fr); }.automatic-timesheet-filter .filter-actions { grid-column:auto; }.automatic-timesheet-summary,.automatic-timesheet-batch-result { grid-template-columns:repeat(2,minmax(0,1fr)); }.work-workspace-tabs { scroll-snap-type:x proximity; }.work-workspace-tabs a { scroll-snap-align:start; } }
@media (max-width:390px) { .automatic-timesheet-summary,.automatic-timesheet-batch-result { grid-template-columns:minmax(0,1fr); } }

/* Department Routines: profile-first workspace with bounded responsive UI. */
.routine-workspace { display:grid; gap:12px; max-width:1480px; margin-inline:auto; min-width:0; font-size:14px; }
.routine-workspace > * { min-width:0; margin:0; }
.routine-workspace-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:16px 18px; border-top:3px solid #197a80; }
.routine-workspace-header h2,.routine-workspace h3,.routine-workspace h4 { margin:0; }
.routine-workspace-header p { max-width:760px; margin:4px 0 0; color:var(--muted); line-height:1.45; }
.routine-workspace-actions,.routine-row-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.routine-row-actions form { margin:0; }
.routine-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.routine-summary-card { min-width:0; padding:11px 13px; border:1px solid var(--line); border-left:4px solid #397e88; border-radius:10px; background:#fff; box-shadow:0 3px 10px rgba(15,43,52,.05); }
.routine-summary-card span { display:block; color:var(--muted); font-size:.77rem; font-weight:750; }
.routine-summary-card strong { display:block; margin-top:3px; font-size:1.35rem; line-height:1; }
.routine-summary-card.department { border-left-color:#3968b5; }.routine-summary-card.covered { border-left-color:#2f8d60; }.routine-summary-card.uncovered { border-left-color:#c17b22; }
.routine-profile-selector,.routine-profile-list,.routine-profile-coverage,.routine-profile-editor { overflow:hidden; }
.routine-select-form { display:flex; align-items:end; gap:9px; padding:0 14px 14px; }
.routine-select-form label { flex:1 1 360px; max-width:700px; }
.routine-profile-form { display:grid; gap:10px; padding:0 14px 14px; }
.routine-form-section { min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fbfdfe; }
.routine-form-section-head { display:flex; gap:9px; align-items:flex-start; margin-bottom:10px; }
.routine-form-section-head > span { flex:0 0 26px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#dff2f2; color:#17666d; font-weight:850; }
.routine-form-section-head p { margin:2px 0 0; color:var(--muted); font-size:.77rem; }
.routine-form-grid,.routine-activity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.routine-form-grid .wide,.routine-activity-grid .wide { grid-column:1/-1; }
.routine-workspace label { min-width:0; font-size:.875rem; }
.routine-workspace input,.routine-workspace select,.routine-workspace textarea,.routine-workspace button,.routine-workspace .button { font-size:.875rem; }
.routine-workspace textarea { resize:vertical; }
.routine-activity-list { display:grid; gap:9px; margin-bottom:9px; }
.routine-activity-row { min-width:0; padding:11px; border:1px solid #cfe0e3; border-radius:9px; background:#fff; }
.routine-activity-row-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:9px; }
.routine-activity-row-head > div { display:flex; flex-wrap:wrap; gap:5px; }
.routine-removal-confirm { margin-top:9px; padding:9px; border-radius:8px; background:#fff8e8; }
.routine-scope-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:10px; }
.routine-scope-options > label { display:flex; align-items:flex-start; gap:9px; padding:11px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.routine-profile-form input[type="checkbox"],.routine-profile-form input[type="radio"] { flex:0 0 auto; width:18px; height:18px; min-height:0; margin:2px 0 0; padding:0; accent-color:#197a80; }
.routine-scope-options > label > span,.routine-employee-picker > label > span { flex:1 1 auto; min-width:0; }
.routine-scope-options small,.routine-employee-picker small { display:block; margin-top:2px; color:var(--muted); }
.routine-employee-search { display:block; max-width:520px; margin:0 0 8px; }
.routine-employee-picker { max-height:300px; overflow:auto; border:1px solid var(--line); border-radius:9px; background:#fff; }
.routine-employee-picker[hidden] { display:none; }
.routine-picker-head { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; gap:10px; padding:9px 11px; border-bottom:1px solid var(--line); background:#eef7f7; }
.routine-employee-picker > label { display:flex; align-items:flex-start; gap:9px; padding:8px 11px; border-bottom:1px solid #edf2f4; }
.routine-employee-picker > label:last-child { border-bottom:0; }
.routine-employee-picker > label[hidden] { display:none; }
.routine-review-section .modal-actions { justify-content:flex-end; margin-top:10px; }
.routine-profile-table { min-width:1120px; }
.routine-profile-table details ul { margin:6px 0 0; padding-left:18px; min-width:170px; }
.routine-filter-form { grid-template-columns:repeat(3,minmax(170px,1fr)) auto; }
.routine-legacy-panel { padding:12px 14px; }
.routine-legacy-panel > summary { cursor:pointer; font-weight:800; }

@media (max-width: 1024px) {
  .routine-workspace-header { flex-direction:column; }
  .routine-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .routine-filter-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .routine-filter-form .filter-actions { grid-column:1/-1; }
}
@media (max-width: 767px) {
  .routine-workspace { font-size:14px; }
  .routine-workspace-header { padding:13px; }
  .routine-workspace-actions { width:100%; }
  .routine-workspace-actions .button { flex:1 1 150px; text-align:center; }
  .routine-select-form { align-items:stretch; flex-direction:column; }
  .routine-select-form label { width:100%; max-width:none; }
  .routine-form-grid,.routine-activity-grid,.routine-scope-options,.routine-filter-form { grid-template-columns:minmax(0,1fr); }
  .routine-filter-form .filter-actions { grid-column:auto; }
  .routine-activity-row-head { align-items:flex-start; flex-direction:column; }
  .routine-review-section .modal-actions { width:100%; }
}
@media (max-width: 390px) {
  .routine-summary-grid { grid-template-columns:minmax(0,1fr); }
  .routine-workspace-header,.routine-form-section,.routine-activity-row { padding:10px; }
}
.notification-settings-nav{display:flex;gap:.55rem;flex-wrap:wrap;margin:0 0 1rem;padding:.55rem;border:1px solid var(--line,#d7e0ea);border-radius:12px;background:#fff;position:sticky;top:.5rem;z-index:5}.notification-settings-nav a{padding:.55rem .75rem;border-radius:8px;color:#24546a;font-weight:700;text-decoration:none}.notification-settings-nav a:hover,.notification-settings-nav a:focus-visible{background:#e9f5f7}.notification-rules-table{min-width:980px}.notification-rules-table td{vertical-align:top}.notification-rules-table td strong,.notification-rules-table td small{display:block}.notification-rules-table select{min-width:170px}.notification-template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem}.notification-template-grid article{display:grid;gap:.35rem;padding:.8rem;border:1px solid var(--line,#d7e0ea);border-radius:10px;background:#f8fbfd}.notification-template-grid .badge{justify-self:start}.notification-preview-summary{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:.65rem;margin-bottom:.8rem}.notification-preview-summary article{padding:.7rem .8rem;border-left:4px solid #247c87;border-radius:9px;background:#eef8fa}.notification-preview-summary span,.notification-preview-summary strong{display:block}.notification-preview-summary strong{font-size:1.25rem}.notification-queue-confirm,.notification-policy-form{margin-top:1rem}.notification-policy-form{display:grid;gap:.65rem;padding:.85rem;border:1px solid #e4c77a;border-radius:10px;background:#fffaf0}.notification-policy-form .button{justify-self:start}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:920px){.notification-settings-nav{top:4rem;overflow-x:auto;flex-wrap:nowrap}.notification-settings-nav a{white-space:nowrap}.notification-preview-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.notification-preview-summary{grid-template-columns:1fr 1fr}.notification-template-grid{grid-template-columns:1fr}}
.notification-settings-nav a.active{background:#0f7882;color:#fff;box-shadow:0 3px 10px rgba(15,120,130,.18)}
.notification-rule-groups,.notification-template-list{display:grid;gap:.75rem}
.notification-rule-group,.notification-template-editor{border:1px solid var(--line,#d7e0ea);border-radius:11px;background:#fff;overflow:hidden}
.notification-rule-group>summary,.notification-template-editor>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;cursor:pointer;background:#f5fafb}
.notification-rule-group>summary span,.notification-template-editor>summary small{color:#587184}
.notification-rule-group[open]>summary,.notification-template-editor[open]>summary{border-bottom:1px solid var(--line,#d7e0ea)}
.notification-rules-table{min-width:860px}
.notification-rules-table th,.notification-rules-table td{padding:.6rem .7rem}
.notification-rule-controls{display:grid;grid-template-columns:minmax(170px,1fr) auto;align-items:center;gap:.35rem .65rem}
.notification-rule-controls small{grid-column:1/-1}
.notification-rules-table .checkbox-field.compact{display:flex;align-items:center;gap:.35rem;margin:0;white-space:nowrap}
.notification-rules-table .checkbox-field.compact input[type="checkbox"]{appearance:auto!important;width:17px!important;height:17px!important;min-width:17px!important;margin:0!important;padding:0!important}
.notification-template-editor-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:1rem;padding:1rem}
.notification-template-form{display:grid;gap:.8rem}
.notification-template-form label{display:grid;gap:.35rem;font-weight:700}
.notification-template-form textarea{min-height:230px;resize:vertical;font-family:inherit;line-height:1.5}
.notification-placeholder-list{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.notification-placeholder-list code{padding:.25rem .4rem;border-radius:6px;background:#edf5f7;color:#155b65}
.notification-template-actions{display:flex;gap:.5rem}.notification-reset-form{margin-top:.75rem}
.notification-rendered-example{padding:1rem;border:1px solid var(--line,#d7e0ea);border-radius:9px;background:#f8fbfd;align-self:start}
.notification-rendered-example h3{margin-top:0}.notification-rendered-example pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.5;margin-bottom:0}
.notification-exact-test{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:1rem;margin-top:1rem;padding:1rem;border:1px solid #95cbd0;border-radius:11px;background:#f0fafb}
.notification-exact-test h3{margin-top:0}.notification-template-test-form{display:grid;gap:.7rem}.notification-template-test-form label{display:grid;gap:.35rem;font-weight:700}
@media(max-width:900px){.notification-template-editor-body,.notification-exact-test{grid-template-columns:1fr}.notification-rule-controls{grid-template-columns:1fr}.notification-rule-controls small{grid-column:auto}}
@media(max-width:520px){.notification-settings-nav{position:static}.notification-template-editor>summary{align-items:flex-start;flex-direction:column}.notification-preview-summary{grid-template-columns:1fr 1fr}}
.auth-help-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    margin-top: 1rem;
}
.auth-help-links a { color: var(--brand); font-weight: 700; text-decoration: none; }
.auth-help-links a:hover { text-decoration: underline; }
.auth-code-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}
.auth-code-divider::before,.auth-code-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-recovery-form + .auth-code-divider { margin-top: 1.35rem; }
.auth-recovery-note { margin-top: 0.9rem; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }