:root {
    color-scheme: light;
    --ink: #17202a;
    --muted: #647180;
    --line: #d9e0e7;
    --line-strong: #c8d1db;
    --paper: #f4f6f8;
    --surface: #ffffff;
    --surface-soft: #f8fafb;
    --accent: #126257;
    --accent-soft: #e5f2ef;
    --accent-ink: #ffffff;
    --warning-soft: #fbf0da;
    --danger: #b23943;
    --danger-soft: #fae8ea;
}

* { box-sizing: border-box; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
    line-height: 1.42;
    margin: 0;
    overflow-x: hidden;
}

a { color: var(--accent); }
h1, h2, p { margin-top: 0; }
h1 { font-size: 28px; line-height: 1.15; margin-bottom: 5px; }
h2 { font-size: 17px; line-height: 1.25; margin-bottom: 14px; }
main { margin: 0 auto; max-width: 1360px; padding: 24px 28px 40px; }

.topbar {
    align-items: center;
    background: color-mix(in srgb, var(--surface) 94%, var(--paper));
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 22px;
    min-height: 62px;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    color: var(--ink);
    flex: 0 0 auto;
    font-size: 21px;
    font-weight: 700;
    text-decoration: none;
}

.main-nav {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.main-nav a {
    border-radius: 6px;
    color: var(--muted);
    min-height: 36px;
    padding: 8px 10px;
    text-decoration: none;
    white-space: nowrap;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
    background: var(--surface-soft);
    color: var(--ink);
}

.account-form { flex: 0 0 auto; }

.language-form {
    flex: 0 0 auto;
}

.language-form-public {
    margin-left: auto;
}

.language-switch {
    align-items: center;
    background: color-mix(in srgb, var(--surface-soft) 80%, var(--surface));
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 85%, transparent);
    display: inline-flex;
    gap: 2px;
    padding: 3px;
}

.language-option {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    min-height: 28px;
    min-width: 38px;
    padding: 7px 10px;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.language-option:hover,
.language-option:focus-visible {
    color: var(--ink);
    outline: none;
}

.language-option:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 82%, transparent);
}

.language-option[aria-pressed="true"] {
    background: var(--surface);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ink) 10%, transparent);
    color: var(--accent-strong);
}

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

.nav-toggle-button {
    display: none;
}

.nav-toggle {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

button,
.button {
    align-items: center;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--accent-ink);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    justify-content: center;
    min-height: 40px;
    padding: 8px 13px;
    text-decoration: none;
    white-space: nowrap;
}

button:hover,
.button:hover { filter: brightness(.97); }

button.secondary,
.button.secondary,
.mini-button,
.row-actions button {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink);
}

button.quiet {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
    font-weight: 500;
    padding-inline: 0;
}

button.danger {
    background: var(--danger);
    border-color: var(--danger);
}

.mini-button,
.row-actions button {
    font-weight: 500;
    min-height: 30px;
    padding: 4px 8px;
}

.heading {
    align-items: end;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: 0 0 18px;
    padding: 2px 0 16px;
}

.heading p,
.day h2 span,
small { color: var(--muted); }
.heading p { margin-bottom: 0; }

.day-heading {
    align-items: center;
}

.day-metrics {
    display: grid;
    flex: 1 1 auto;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(98px, 1fr));
    max-width: 560px;
    min-width: 0;
}

.day-metrics p {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 3px;
    margin: 0;
    min-height: 58px;
    padding: 8px 10px;
}

.day-metrics .metric-status {
    border-color: color-mix(in srgb, currentColor 18%, var(--line));
}

.day-metrics span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.day-metrics b {
    align-self: center;
    font-size: 15px;
}

.day-metrics .metric-status span {
    color: currentColor;
    opacity: .72;
}

.day-metrics .metric-status b {
    color: currentColor;
    font-weight: 800;
}

.filters {
    align-items: end;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 11px;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    margin-bottom: 14px;
    padding: 13px;
}

.filters label,
.entry-form label,
.stack label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.filters div,
.entry-form div:not(.form-tabs),
.stack div { display: grid; gap: 5px; }

input,
select,
textarea {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: var(--ink);
    font: inherit;
    min-height: 40px;
    padding: 8px 10px;
    width: 100%;
}

input[type="checkbox"] {
    appearance: none;
    background: var(--line-strong);
    border: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 70%, #000000);
    cursor: pointer;
    display: inline-grid;
    flex: 0 0 auto;
    height: 26px;
    margin: 2px 0 0;
    min-height: 26px;
    padding: 0;
    place-items: center start;
    position: relative;
    transition: background .16s ease, box-shadow .16s ease;
    width: 46px;
}

input[type="checkbox"]::before {
    background: var(--surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px color-mix(in srgb, #000000 22%, transparent);
    content: "";
    height: 20px;
    margin-left: 3px;
    transition: transform .16s ease;
    width: 20px;
}

input[type="checkbox"]:checked {
    background: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 86%, transparent), inset 0 0 0 1px var(--accent);
    outline: 0;
}

input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .55;
}

input[type="color"] {
    cursor: pointer;
    height: 42px;
    min-height: 42px;
    padding: 5px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 4px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 86%, transparent);
    outline: 0;
}

textarea {
    line-height: 1.35;
    min-height: 70px;
    resize: vertical;
}

.panel,
.auth {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 19px;
}

.form-panel {
    max-width: 900px;
    padding: 24px;
}

.member-edit-form {
    gap: 14px;
}

.form-tabs {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    width: 100%;
}

.member-edit-form .form-tabs .tab-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    width: auto;
}

.tab-switch {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

#tab-profile:checked ~ .form-tabs label[for="tab-profile"],
#tab-projects:checked ~ .form-tabs label[for="tab-projects"],
#tab-management:checked ~ .form-tabs label[for="tab-management"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

#tab-profile:checked ~ .projects-panel,
#tab-profile:checked ~ .management-panel,
#tab-projects:checked ~ .profile-panel,
#tab-projects:checked ~ .management-panel,
#tab-management:checked ~ .profile-panel,
#tab-management:checked ~ .projects-panel {
    display: none;
}

.tab-panel {
    display: grid;
    gap: 12px;
}

.allocation-toolbar {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr);
}

.allocation-toolbar p {
    color: var(--muted);
    margin: 0;
}

.allocation-frame {
    border: 1px solid var(--line);
    border-radius: 8px;
    max-height: 430px;
    overflow: auto;
}

.allocation-table {
    min-width: 720px;
}

.allocation-table th {
    background: var(--surface-soft);
    position: sticky;
    top: 0;
    z-index: 1;
}

.allocation-table th:nth-child(1),
.allocation-table td:nth-child(1) { width: 110px; }
.allocation-table th:nth-child(3),
.allocation-table td:nth-child(3) { width: 160px; }
.allocation-table th:nth-child(4),
.allocation-table td:nth-child(4) { width: 130px; }

.allocation-table input {
    min-height: 34px;
    padding: 6px 8px;
}

.narrow,
.auth { max-width: 460px; }
.auth { margin-top: 8vh; }

.entry-form,
.stack { display: grid; gap: 12px; }

.entry-form output {
    background: var(--accent-soft);
    border-radius: 6px;
    color: var(--accent);
    font-weight: 700;
    min-height: 40px;
    padding: 10px 12px;
}

.day {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.day h2 {
    align-items: baseline;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
}

.table-wrap {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    position: relative;
}

.table-wrap::after {
    content: none;
    display: none;
}
table {
    border-collapse: collapse;
    min-width: 920px;
    table-layout: fixed;
    width: 100%;
}

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

th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

tbody tr:hover { background: var(--surface-soft); }
tr:last-child td { border-bottom: 0; }
td small { display: block; white-space: nowrap; }
.comment-cell {
    overflow-wrap: anywhere;
}

.journal-table {
    min-width: 1040px;
    table-layout: fixed;
}

.person-cell {
    overflow-wrap: anywhere;
}

.person-cell small {
    color: var(--muted);
}

.journal-table th:nth-child(1),
.journal-table td:nth-child(1) { width: 190px; }
.journal-table th:nth-child(2),
.journal-table td:nth-child(2) { width: 112px; }
.journal-table th:nth-child(3),
.journal-table td:nth-child(3) { width: 86px; }
.journal-table th:nth-child(4),
.journal-table td:nth-child(4) { width: 112px; }
.journal-table th:nth-child(5),
.journal-table td:nth-child(5) { width: 116px; }
.journal-table th:nth-child(7),
.journal-table td:nth-child(7) { width: 54px; }

.interval-table th:nth-child(1),
.interval-table td:nth-child(1) { width: 124px; }
.interval-table th:nth-child(2),
.interval-table td:nth-child(2) { width: 92px; }
.interval-table th:nth-child(3),
.interval-table td:nth-child(3) { width: 124px; }
.interval-table th:nth-child(4),
.interval-table td:nth-child(4) { width: 120px; }
.interval-table th:nth-child(6),
.interval-table td:nth-child(6) { width: 188px; }

.day-nav,
.inline-actions,
.row-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.day-nav { flex: 0 0 auto; }

.day-nav form {
    margin: 0;
}

.day-nav a {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: var(--ink);
    min-height: 38px;
    padding: 8px 11px;
    text-decoration: none;
}

.day-nav button {
    min-height: 38px;
}

.row-actions {
    flex-wrap: wrap;
    min-width: 148px;
}

.row-actions a {
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.row-actions form { margin: 0; }

.actions-head { text-align: right; }

.actions-cell {
    text-align: right;
    vertical-align: middle;
}

.icon-actions {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    white-space: nowrap;
}

.icon-actions form { margin: 0; }

.icon-button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    display: inline-flex;
    flex: 0 0 auto;
    height: 30px;
    justify-content: center;
    min-height: 30px;
    padding: 0;
    text-decoration: none;
    width: 30px;
}

button.icon-button {
    background: transparent;
    border-color: transparent;
}

.icon-button:hover {
    background: var(--surface-soft);
    border-color: var(--line);
    color: var(--ink);
    filter: none;
}

.icon-button svg {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    width: 17px;
}

.icon-button svg path[d*="M8 5"] {
    fill: currentColor;
    stroke: currentColor;
}

.danger-icon:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

.workbench {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(460px, 2fr) minmax(240px, 1fr);
    margin-bottom: 12px;
}

.timer-panel {
    align-items: start;
    background: var(--surface);
    display: grid;
    gap: 10px;
}

.timer-panel h2 { margin-bottom: 0; }
.timer-panel > form,
.timer-panel > p { margin-bottom: 0; }

.timer-panel .compact-entry {
    grid-template-columns: 1fr;
}

.day-workbench {
    align-items: stretch;
    grid-template-columns: minmax(250px, 1fr) minmax(620px, 3fr);
}

.day-workbench .timer-panel {
    grid-column: auto;
}

.day-workbench .quick-entry {
    min-width: 0;
}

.day-workbench .quick-entry .compact-entry {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.day-workbench .attention-summary {
    grid-column: 1 / -1;
}

.day-workbench .attention-summary {
    display: none;
}

.day-tabs {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}

.day-tab-switch {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.day-tab-list {
    align-items: center;
    background: rgba(255, 253, 248, .72);
    border: 1px solid rgba(29, 36, 31, .08);
    border-radius: 999px;
    box-shadow: var(--shadow-small);
    display: inline-grid;
    gap: 5px;
    grid-template-columns: repeat(4, minmax(104px, 1fr));
    justify-self: start;
    padding: 5px;
}

.day-tab-list label {
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    font-weight: 800;
    min-height: 40px;
    padding: 10px 18px;
    text-align: center;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.day-tab-list label:hover {
    color: var(--ink);
    transform: translateY(-1px);
}

.day-tabs > .day-tab-panel {
    display: none !important;
}

#day-tab-log:checked ~ .day-tab-list label[for="day-tab-log"],
#day-tab-week:checked ~ .day-tab-list label[for="day-tab-week"],
#day-tab-summary:checked ~ .day-tab-list label[for="day-tab-summary"],
#day-tab-more:checked ~ .day-tab-list label[for="day-tab-more"] {
    background: var(--ink);
    color: var(--accent-ink);
}

.day-tabs > #day-tab-log:checked ~ .day-workbench.day-panel-log,
.day-tabs > #day-tab-summary:checked ~ .day-chart-grid.day-panel-summary {
    display: grid !important;
}

.day-tabs > #day-tab-summary:checked ~ article.day-panel-summary,
.day-tabs > #day-tab-more:checked ~ details.day-panel-more,
.day-tabs > #day-tab-more:checked ~ section.day-panel-more,
.day-tabs > #day-tab-log:checked ~ .timeline-panel.day-panel-log,
.day-tabs > #day-tab-log:checked ~ .day.day-panel-log,
.day-tabs > #day-tab-week:checked ~ section.day-panel-week {
    display: block !important;
}

@media (max-width: 720px) {
    .day-tab-list {
        border-radius: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-self: stretch;
        width: 100%;
    }

    .day-tab-list label {
        min-width: 0;
        padding-inline: 10px;
    }

    .today-list-head {
        align-items: stretch;
        display: grid;
    }

    .today-entry-card {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .today-entry-card .icon-actions {
        justify-content: flex-start;
    }
}

.timer-running {
    align-items: center;
    background: var(--accent-soft);
    border-radius: 6px;
    color: var(--accent);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 44px;
    padding: 10px 12px;
}

.timer-running b { font-size: 18px; }
.quick-entry h2,
.day-summary h2 { margin-bottom: 12px; }

.today-list-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 16px;
}

.day .today-list-head h2 {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
}

.today-list-head .button {
    min-height: 34px;
    padding-block: 6px;
}

.today-entry-list {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.today-entry-card {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 5px solid var(--project-color, var(--accent));
    border-radius: 8px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(108px, auto) minmax(0, 1fr) auto;
    padding: 12px 14px 12px 12px;
}

.today-entry-time,
.today-entry-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.today-entry-time b,
.today-entry-main b {
    color: var(--ink);
}

.today-entry-time span,
.today-entry-main span,
.today-entry-main small {
    color: var(--muted);
}

.today-entry-main p {
    align-items: baseline;
    display: flex;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.today-entry-main p b,
.today-entry-main p span,
.today-entry-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-approval-card {
    background: #fff;
    padding: 0;
}

.week-approval-card .week-approval-main {
    align-items: center;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 18px 16px 14px;
}

.day.week-approval-card .week-approval-main h2 {
    background: transparent;
    border: 0;
    display: block;
    justify-content: flex-start;
    margin: 0 0 3px;
    padding: 0;
}

.week-approval-card .week-approval-main p,
.week-approval-note,
.week-approval-comment {
    color: var(--muted);
    margin: 0;
}

.week-approval-card .week-approval-form {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 16px 16px;
}

.week-approval-card .week-approval-form > input[type="hidden"] {
    display: none;
}

.week-approval-card .week-approval-form div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.week-approval-card .week-approval-form label {
    color: var(--text);
    font-size: 14px;
}

.week-approval-card .week-approval-form textarea {
    min-height: 48px;
}

.week-approval-note,
.week-approval-comment {
    border-top: 1px solid var(--line);
    padding: 12px 16px;
}

.week-strip-heading {
    align-items: center;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 12px 16px;
}

.week-strip-heading h2 {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
}

.week-approval-compact {
    align-items: center;
    display: flex;
    gap: 10px;
}

.week-approval-compact button {
    min-height: 34px;
    padding-block: 6px;
}

.modal-dialog {
    background: transparent;
    border: 0;
    color: var(--ink);
    margin: auto;
    max-width: min(720px, calc(100vw - 32px));
    padding: 0;
    width: 100%;
}

.modal-dialog::backdrop {
    background: color-mix(in srgb, #0f172a 46%, transparent);
}

.modal-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 70px color-mix(in srgb, #0f172a 24%, transparent);
    max-height: calc(100vh - 48px);
    overflow: auto;
}

.modal-header {
    align-items: start;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 18px 20px;
}

.modal-header h2,
.modal-header p {
    margin: 0;
}

.modal-header h2 {
    font-size: 20px;
}

.modal-header p {
    color: var(--muted);
    margin-top: 4px;
}

.modal-dialog .week-approval-form {
    border-top: 0;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    padding: 18px 20px 20px;
}

.modal-dialog .week-approval-form > input[type="hidden"] {
    display: none;
}

.modal-dialog .week-approval-form div {
    display: grid;
    gap: 6px;
}

.modal-dialog .week-approval-form textarea {
    min-height: 112px;
}

.modal-actions {
    align-items: center;
    display: flex !important;
    gap: 10px;
    justify-content: flex-end;
    padding: 0;
}

.modal-dialog .week-approval-note,
.modal-dialog .week-approval-comment {
    margin: 0;
}

.locked-state {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    margin: 0;
    padding: 12px 14px;
}

.compact-entry {
    gap: 9px;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
}

.compact-entry div:has(textarea),
.compact-entry .inline-actions,
.compact-entry div:has(.errorlist) { grid-column: 1 / -1; }

.inline-actions output { flex: 1; }

.day-summary {
    background: var(--surface-soft);
}

.day-summary p,
.team-list p,
.report-grid article p {
    border-top: 1px solid var(--line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin: 0;
    padding: 9px 0;
}

.report-grid article p span,
.team-list p span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.report-grid article p b,
.team-list p b {
    flex: 0 0 auto;
}

.day-summary p:first-of-type,
.report-grid article p:first-of-type { border-top: 0; }

.recent-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    padding: 12px;
}

.week-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(7, minmax(104px, 1fr));
    padding: 12px;
}

.week-day {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    display: grid;
    gap: 2px;
    min-height: 86px;
    padding: 10px;
    text-decoration: none;
}

.week-day small,
.week-day span {
    color: inherit;
    opacity: .78;
}

.week-day.status-ok,
.week-day.status-live,
.week-day.status-warning,
.week-day.status-missing,
.week-day.status-off,
.week-day.status-upcoming {
    border-color: color-mix(in srgb, currentColor 18%, var(--line));
}

.preset-actions {
    justify-content: flex-start;
}

.bulk-entry-form {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.bulk-entry-form > button {
    justify-self: start;
}

.bulk-table {
    min-width: 1040px;
}

.bulk-table th:nth-child(1),
.bulk-table td:nth-child(1),
.bulk-table th:nth-child(2),
.bulk-table td:nth-child(2) {
    width: 110px;
}

.bulk-table th:nth-child(3),
.bulk-table td:nth-child(3),
.bulk-table th:nth-child(4),
.bulk-table td:nth-child(4) {
    width: 180px;
}

.bulk-table th:nth-child(5),
.bulk-table td:nth-child(5) {
    width: 170px;
}

.bulk-table td {
    padding: 7px;
}

.bulk-table input,
.bulk-table select {
    min-height: 36px;
}

.recent-task {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    gap: 7px;
    padding: 12px;
}

.recent-task p { margin: 0; }
.recent-task p:nth-child(2) { color: var(--muted); }
.recent-task .button,
.recent-task button {
    font-weight: 500;
    min-height: 34px;
    padding-block: 6px;
}
.recent-empty { margin: 0; padding: 0 2px; }

.collapsed-day summary {
    align-items: baseline;
    background: var(--surface-soft);
    border-bottom: 1px solid transparent;
    cursor: pointer;
    display: flex;
    font-size: 17px;
    font-weight: 700;
    gap: 10px;
    line-height: 1.25;
    list-style: none;
    padding: 12px 16px;
}

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

.collapsed-day summary::before {
    color: var(--muted);
    content: ">";
    font-size: 20px;
    line-height: 1;
    transform: translateY(1px);
}

.collapsed-day[open] summary {
    border-bottom-color: var(--line);
}

.collapsed-day[open] summary::before {
    transform: rotate(90deg) translateX(1px);
}

.people-workbench {
    align-items: start;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
}

.people-table {
    min-width: 1280px;
}

.people-table th:nth-child(1),
.people-table td:nth-child(1) { width: 140px; }
.people-table th:nth-child(2),
.people-table td:nth-child(2) { width: 170px; }
.people-table th:nth-child(3),
.people-table td:nth-child(3) { width: 135px; }
.people-table th:nth-child(4),
.people-table td:nth-child(4) { width: 145px; }
.people-table th:nth-child(5),
.people-table td:nth-child(5) { width: 180px; }
.people-table th:nth-child(7),
.people-table td:nth-child(7) { width: 150px; }
.people-table th:nth-child(8),
.people-table td:nth-child(8) { width: 54px; }

.people-table .actions-head,
.people-table .actions-cell {
    background: #fff;
    box-shadow: -1px 0 0 #eef2f7;
    position: sticky;
    right: 0;
    z-index: 3;
}

.people-table .actions-head {
    background: #fbfcfe;
    z-index: 4;
}

.people-table tbody tr:hover .actions-cell {
    background: #f8fafc;
}

.people-management {
    overflow-wrap: anywhere;
}

.people-management span {
    display: block;
    font-weight: 850;
}

.people-management small {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 750;
}

.people-table th:nth-child(6),
.people-table td:nth-child(6) { width: 170px; }

.people-projects {
    overflow-wrap: anywhere;
}

.people-projects small {
    white-space: normal;
}

.people-projects small span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.people-status small {
    white-space: nowrap;
}

.management-section {
    padding: 0;
}

.management-section summary {
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    padding: 16px 18px;
}

.management-section form,
.management-section .team-list {
    margin: 0 18px 18px;
}

.project-checkbox-frame {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0;
    max-height: 320px;
    overflow: auto;
}

.project-checkbox-frame label {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
    padding: 9px 10px;
}

.project-checkbox-frame label:hover {
    background: var(--surface-soft);
}

.project-checkbox-frame label:last-child {
    border-bottom: 0;
}

.project-checkbox-frame input[type="checkbox"] {
    height: 22px;
    margin: 0;
    min-height: 22px;
    width: 40px;
}

.project-checkbox-frame input[type="checkbox"]::before {
    height: 16px;
    margin-left: 3px;
    width: 16px;
}

.project-checkbox-frame input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

.project-checkbox-frame span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-workbench {
    align-items: start;
    grid-template-columns: minmax(320px, .8fr) minmax(640px, 1.4fr);
}

.project-workbench .project-list {
    margin-bottom: 0;
}

.project-table {
    min-width: 720px;
}

.project-table th:last-child,
.project-table td:last-child {
    width: 54px;
}

.project-name {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.project-name i {
    background: var(--project-color);
    border: 1px solid color-mix(in srgb, var(--project-color) 72%, #000000);
    border-radius: 3px;
    display: inline-block;
    height: 13px;
    width: 13px;
}

.team-list {
    border-top: 1px solid var(--line);
    margin-top: 16px;
    padding-top: 7px;
}

.status-pill {
    background: var(--warning-soft);
    border-radius: 999px;
    color: var(--ink);
    display: inline-block;
    font-size: 13px;
    padding: 5px 9px;
    white-space: nowrap;
}

.status-warning {
    background: var(--warning-soft);
    color: var(--ink);
}

.status-ok {
    background: var(--accent-soft);
    color: var(--accent);
}

.calendar-table {
    min-width: 1540px;
    table-layout: auto;
    width: max-content;
}

.calendar-table th,
.calendar-table td {
    padding: 7px 5px;
    text-align: center;
    vertical-align: middle;
}

.calendar-table th:first-child,
.calendar-table td:first-child {
    left: 0;
    min-width: 180px;
    padding-inline: 13px;
    position: sticky;
    text-align: left;
    width: 180px;
    z-index: 2;
}

.calendar-table th:nth-child(2),
.calendar-table td:nth-child(2) {
    left: 180px;
    min-width: 112px;
    position: sticky;
    text-align: left;
    width: 112px;
    z-index: 2;
}

.calendar-table th:first-child,
.calendar-table th:nth-child(2) {
    background: var(--surface-soft);
    z-index: 4;
}

.calendar-table td:first-child,
.calendar-table td:nth-child(2) {
    background: var(--surface);
}

.calendar-table tbody tr:hover td:first-child,
.calendar-table tbody tr:hover td:nth-child(2) {
    background: var(--surface-soft);
}

.calendar-table th:not(:first-child):not(:nth-child(2)),
.calendar-table td.calendar-cell {
    min-width: 38px;
    width: 38px;
}

.calendar-table th small {
    text-transform: none;
}

.calendar-table .weekend {
    background: var(--surface-soft);
}

.calendar-cell {
    width: 36px;
}

.calendar-mark {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    min-width: 28px;
    padding-inline: 3px;
}

.calendar-mark.status-missing {
    color: var(--danger);
}

.calendar-mark.status-off {
    color: transparent;
    position: relative;
}

.calendar-mark.status-off::after {
    color: var(--muted);
    content: "-";
    position: absolute;
}

.calendar-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 12px;
}

.calendar-legend span {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 13px;
    gap: 6px;
}

.calendar-legend i {
    border: 1px solid var(--line);
    border-radius: 4px;
    display: inline-block;
    height: 13px;
    width: 13px;
}

.status-live {
    background: #e6eef8;
    color: #25578f;
}

.status-off {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    color: var(--muted);
}

.status-upcoming {
    background: #eef2f5;
    border: 1px solid var(--line);
    color: var(--muted);
}

.status-missing {
    background: var(--danger-soft);
    color: var(--danger);
}

.message,
.empty {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    margin-bottom: 14px;
    padding: 11px 13px;
}

.actions {
    align-items: center;
    display: flex;
    gap: 12px;
}

.section-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-head h2 {
    margin-bottom: 0;
}

.admin-filterbar {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, auto);
}

.admin-filterbar input,
.admin-filterbar select {
    min-height: 36px;
    min-width: 0;
}

.admin-filterbar input {
    width: 220px;
}

.summary-strip {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    margin-bottom: 12px;
}

.summary-strip article {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px 16px;
}

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

.summary-strip span {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.summary-strip b {
    color: var(--ink);
    font-size: 22px;
}

.attention-board {
    margin-bottom: 12px;
}

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

.attention-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 12px 14px;
}

.attention-card.status-missing { border-left-color: var(--danger); }
.attention-card.status-warning { border-left-color: #b9851b; }
.attention-card.status-live { border-left-color: #25578f; }
.attention-card.status-draft { border-left-color: var(--line-strong); }
.attention-card.status-rejected { border-left-color: var(--danger); }

.attention-card p {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: 0;
    min-width: 0;
}

.attention-card span,
.attention-card small,
.attention-card b {
    color: var(--muted);
    min-width: 0;
    overflow-wrap: anywhere;
}

.chart-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    margin-bottom: 12px;
}

.team-chart-grid,
.day-chart-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.chart-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    min-width: 0;
    padding: 16px;
}

.chart-panel h2 {
    margin-bottom: 12px;
}

.metric-bar,
.fte-card {
    display: grid;
    gap: 7px;
    margin-bottom: 12px;
}

.fte-card {
    border-left: 3px solid transparent;
    padding-left: 10px;
}

.fte-card-ok { border-left-color: var(--accent); }
.fte-card-under { border-left-color: #b9851b; }
.fte-card-over { border-left-color: var(--danger); }

.metric-bar:last-child,
.fte-card:last-child {
    margin-bottom: 0;
}

.metric-bar p,
.fte-card p {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: 0;
}

.metric-bar p span,
.fte-card p span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-bar p b,
.fte-card p b {
    color: var(--muted);
    flex: 0 0 auto;
    font-size: 13px;
}

.meter,
.dual-bars span {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    display: block;
    height: 12px;
    overflow: hidden;
    position: relative;
}

.meter i,
.dual-bars i {
    background: var(--accent);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.dual-bars {
    display: grid;
    gap: 5px;
}

.bar-plan {
    background: #d9e0e7;
}

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

.fte-metrics {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fte-metrics span {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    display: grid;
    gap: 2px;
    padding: 7px 8px;
}

.fte-metrics b {
    color: var(--ink);
}

.status-bar.status-warning .meter i { background: #b9851b; }
.status-bar.status-missing .meter i { background: var(--danger); }
.status-bar.status-live .meter i { background: #25578f; }
.status-bar.status-off .meter i,
.status-bar.status-upcoming .meter i { background: var(--muted); }

.timeline-panel {
    margin-bottom: 12px;
}

.timeline-scale {
    height: 24px;
    position: relative;
}

.timeline-scale span {
    color: var(--muted);
    font-size: 12px;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.timeline-scale .tick-start {
    transform: translateX(0);
}

.timeline-scale .tick-end {
    transform: translateX(-100%);
}

.timeline-track {
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent calc(100% / 12 - 1px),
            var(--line) calc(100% / 12),
            transparent calc(100% / 12 + 1px)
        ),
        var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 132px;
    overflow: hidden;
    position: relative;
}

.timeline-entry {
    background: var(--project-color, var(--accent));
    border-radius: 6px;
    color: var(--accent-ink);
    display: grid;
    gap: 1px;
    min-height: 44px;
    overflow: hidden;
    padding: 6px 8px;
    position: absolute;
    text-decoration: none;
    top: 14px;
}

.timeline-entry:nth-child(2n) { top: 66px; }

.timeline-entry b,
.timeline-entry span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-entry span {
    font-size: 12px;
    opacity: .86;
}

.timeline-entry.is-locked {
    cursor: default;
}

.report-grid {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    overflow: hidden;
}

.report-grid article {
    border-bottom: 1px solid var(--line);
    padding: 17px 18px;
}

.report-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
.report-grid article:nth-last-child(-n + 2) { border-bottom: 0; }
.report-grid b { text-align: right; }

.errorlist {
    color: var(--danger);
    margin: 0;
    padding-left: 18px;
}

@media (max-width: 900px) {
    main,
    .topbar { padding-inline: 14px; }

    .topbar {
        align-items: center;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding-block: 11px;
        position: sticky;
    }

    .brand { min-width: 0; }

    .nav-toggle-button {
        align-items: center;
        border: 1px solid var(--line-strong);
        border-radius: 7px;
        display: inline-grid;
        gap: 4px;
        height: 38px;
        justify-content: center;
        justify-self: end;
        width: 42px;
    }

    .nav-toggle-button span {
        background: var(--ink);
        border-radius: 999px;
        display: block;
        height: 2px;
        width: 18px;
    }

    .main-nav {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        display: none;
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        overflow: hidden;
        padding: 6px;
        width: 100%;
    }

    .nav-toggle:checked ~ .main-nav {
        display: grid;
    }

    .nav-toggle:checked ~ .notification-nav-link {
        display: inline-flex;
        grid-column: 1 / -1;
    }

    .main-nav a {
        min-height: 40px;
        width: 100%;
    }

    .notification-nav-link {
        display: none;
        height: 40px;
        justify-content: flex-start;
        min-width: 0;
        padding: 10px 14px !important;
        width: 100%;
    }

    .notification-nav-link::after {
        content: attr(title);
    }

    .notification-nav-link span {
        margin-left: auto;
        position: static;
    }

    .nav-more {
        width: 100%;
    }

    .nav-more summary {
        min-height: 40px;
        width: 100%;
    }

    .nav-more-menu {
        border: 0;
        box-shadow: none;
        margin: 2px 0 4px;
        padding: 0 0 0 10px;
        position: static;
        width: 100%;
    }

    .account-form {
        display: none;
        grid-column: 1 / -1;
    }

    .language-form {
        display: none;
        grid-column: 1 / -1;
        margin-left: 0;
    }

    .language-form-public {
        display: block;
        grid-column: auto;
        margin-left: auto;
    }

    .nav-toggle:checked ~ .account-form {
        display: block;
    }

    .nav-toggle:checked ~ .language-form {
        display: block;
    }

    .account-form button {
        justify-content: flex-start;
        width: 100%;
    }

    .language-switch {
        display: flex;
        width: 100%;
    }

    .language-option {
        flex: 1 1 0;
    }

    .heading {
        align-items: stretch;
        display: grid;
        gap: 12px;
    }

    .section-head {
        align-items: stretch;
        display: grid;
    }

    .admin-filterbar {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-filterbar input {
        width: 100%;
    }

    .day-metrics {
        max-width: none;
        grid-template-columns: repeat(2, minmax(118px, 1fr));
    }

    .filters,
    .workbench,
    .people-workbench,
    .project-workbench,
    .chart-grid,
    .team-chart-grid,
    .day-chart-grid,
    .summary-strip,
    .attention-grid,
    .compact-entry,
    .week-grid,
    .recent-grid,
    .timer-panel { grid-template-columns: 1fr; }

    .timer-panel h2 { grid-column: auto; }
    .day-nav,
    .row-actions { flex-wrap: wrap; }

    .report-grid { grid-template-columns: 1fr; }
    .report-grid article,
    .report-grid article:nth-child(odd) {
        border-bottom: 1px solid var(--line);
        border-right: 0;
    }
    .report-grid article:last-child { border-bottom: 0; }

    .calendar-table {
        min-width: 1320px;
    }

    .calendar-table th:first-child,
    .calendar-table td:first-child {
        min-width: 142px;
        width: 142px;
    }

    .calendar-table th:nth-child(2),
    .calendar-table td:nth-child(2) {
        left: 142px;
        min-width: 92px;
        width: 92px;
    }

    .day {
        overflow: visible;
    }

    .table-wrap {
        overflow-x: visible;
    }

    .table-wrap::after {
        display: none;
    }

    .journal-table,
    .people-table,
    .project-table,
    .interval-table,
    .bulk-table,
    .team-dashboard-table {
        min-width: 0;
    }

    .journal-table thead,
    .people-table thead,
    .project-table thead,
    .interval-table thead,
    .bulk-table thead,
    .team-dashboard-table thead,
    .day table:not(.calendar-table):not(.allocation-table):not(.bulk-table) thead {
        display: none;
    }

    .journal-table,
    .people-table,
    .project-table,
    .interval-table,
    .bulk-table,
    .team-dashboard-table,
    .day table:not(.calendar-table):not(.allocation-table):not(.bulk-table) {
        border-collapse: separate;
        border-spacing: 0 10px;
        table-layout: auto;
    }

    .journal-table tbody,
    .people-table tbody,
    .project-table tbody,
    .interval-table tbody,
    .bulk-table tbody,
    .team-dashboard-table tbody,
    .day table:not(.calendar-table):not(.allocation-table):not(.bulk-table) tbody,
    .journal-table tr,
    .people-table tr,
    .project-table tr,
    .interval-table tr,
    .bulk-table tr,
    .team-dashboard-table tr,
    .day table:not(.calendar-table):not(.allocation-table):not(.bulk-table) tr,
    .journal-table td,
    .people-table td,
    .project-table td,
    .interval-table td,
    .bulk-table td,
    .team-dashboard-table td,
    .day table:not(.calendar-table):not(.allocation-table):not(.bulk-table) td {
        display: block;
        width: 100% !important;
    }

    .journal-table tr,
    .people-table tr,
    .project-table tr,
    .interval-table tr,
    .bulk-table tr,
    .team-dashboard-table tr,
    .day table:not(.calendar-table):not(.allocation-table):not(.bulk-table) tr {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
    }

    .journal-table td,
    .people-table td,
    .project-table td,
    .interval-table td,
    .bulk-table td,
    .team-dashboard-table td,
    .day table:not(.calendar-table):not(.allocation-table):not(.bulk-table) td {
        align-items: start;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        min-width: 0;
        padding: 9px 12px;
    }

    .journal-table td::before,
    .people-table td::before,
    .project-table td::before,
    .interval-table td::before,
    .bulk-table td::before,
    .team-dashboard-table td::before,
    .day table:not(.calendar-table):not(.allocation-table):not(.bulk-table) td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .journal-table td:last-child,
    .people-table td:last-child,
    .project-table td:last-child,
    .interval-table td:last-child,
    .bulk-table td:last-child,
    .team-dashboard-table td:last-child,
    .day table:not(.calendar-table):not(.allocation-table):not(.bulk-table) td:last-child {
        border-bottom: 0;
    }

    .actions-cell .icon-actions,
    .icon-actions {
        justify-content: flex-start;
    }

    .calendar-board .table-wrap,
    .allocation-frame {
        overflow-x: auto;
    }
}

@media (max-width: 560px) {
    h1 { font-size: 24px; }
    main { padding: 18px 12px 32px; }

    .day-metrics {
        grid-template-columns: 1fr;
    }

    .panel,
    .auth {
        padding: 14px;
    }

    .day-nav a,
    button:not(.tab-button),
    .button {
        width: 100%;
    }

    .day-nav,
    .inline-actions,
    .actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .filters {
        padding: 10px;
    }

    .admin-filterbar {
        grid-template-columns: 1fr;
    }

    .report-grid article p,
    .day-summary p,
    .team-list p {
        align-items: flex-start;
        display: grid;
        gap: 3px;
    }

    .report-grid b {
        text-align: left;
    }

    .calendar-legend {
        align-items: stretch;
        display: grid;
        gap: 8px;
    }

    .calendar-table th:first-child,
    .calendar-table td:first-child {
        min-width: 118px;
        width: 118px;
    }

    .calendar-table th:nth-child(2),
    .calendar-table td:nth-child(2) {
        left: 118px;
        min-width: 78px;
        width: 78px;
    }
}

/* UX refresh: stronger visual hierarchy without changing server-side flows. */
:root {
    --paper: #eef3ef;
    --surface: #fffdf8;
    --surface-soft: #f6f2e8;
    --ink: #1d241f;
    --muted: #66736b;
    --line: #ded8ca;
    --line-strong: #c9c0ad;
    --accent: #126257;
    --accent-2: #c16c35;
    --accent-soft: #dfefe8;
    --accent-ink: #fffaf0;
    --warning-soft: #fff1ce;
    --danger: #aa3c3d;
    --danger-soft: #fae1dd;
    --shadow-soft: 0 18px 45px rgba(29, 36, 31, .08);
    --shadow-small: 0 8px 22px rgba(29, 36, 31, .07);
}

body {
    background:
        radial-gradient(circle at 14% -6%, rgba(193, 108, 53, .18), transparent 30rem),
        radial-gradient(circle at 86% 4%, rgba(18, 98, 87, .17), transparent 32rem),
        linear-gradient(180deg, #f7f3ea 0, var(--paper) 420px, #edf2ee 100%);
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

body::before {
    background-image:
        linear-gradient(rgba(29, 36, 31, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29, 36, 31, .025) 1px, transparent 1px);
    background-size: 34px 34px;
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

.topbar {
    backdrop-filter: blur(18px);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border-bottom-color: rgba(29, 36, 31, .08);
    box-shadow: 0 10px 30px rgba(29, 36, 31, .05);
}

.brand {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    letter-spacing: -.02em;
}

.brand::before {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 9px;
    box-shadow: 0 8px 18px rgba(18, 98, 87, .22);
    content: "";
    height: 24px;
    width: 24px;
}

.main-nav {
    background: rgba(255, 253, 248, .62);
    border: 1px solid rgba(29, 36, 31, .06);
    border-radius: 999px;
    flex: 0 1 auto;
    padding: 4px;
}

.main-nav a {
    border-radius: 999px;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
    background: var(--ink);
    color: var(--accent-ink);
    transform: translateY(-1px);
}

button,
.button,
.day-nav a {
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(18, 98, 87, .12);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

button:hover,
.button:hover,
.day-nav a:hover {
    box-shadow: 0 10px 24px rgba(18, 98, 87, .16);
    transform: translateY(-1px);
}

button.secondary,
.button.secondary,
.mini-button,
.row-actions button,
.day-nav a {
    box-shadow: none;
}

.heading {
    background:
        linear-gradient(135deg, rgba(255, 253, 248, .92), rgba(255, 253, 248, .70)),
        radial-gradient(circle at 100% 0, rgba(193, 108, 53, .20), transparent 18rem);
    border: 1px solid rgba(29, 36, 31, .08);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 18px;
    padding: 22px;
}

.heading h1 {
    font-size: clamp(28px, 4vw, 46px);
    letter-spacing: -.055em;
}

.heading p {
    color: var(--muted);
    font-size: 15px;
}

.day-metrics {
    max-width: 620px;
}

.day-metrics p,
.summary-strip article,
.chart-panel,
.panel,
.day,
.report-grid,
.auth {
    border-color: rgba(29, 36, 31, .08);
    box-shadow: var(--shadow-small);
}

.day-metrics p {
    background: rgba(255, 253, 248, .82);
    border-radius: 18px;
    min-height: 74px;
    padding: 12px 14px;
}

.day-metrics b,
.summary-strip b {
    letter-spacing: -.035em;
}

.day-metrics .metric-status {
    background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--ink) 82%, var(--accent)));
    color: var(--accent-ink);
}

.status-ok,
.status-live,
.status-warning,
.status-missing,
.status-off,
.status-upcoming {
    border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.workbench,
.chart-grid,
.summary-strip,
.report-grid,
.recent-grid,
.week-grid,
.attention-grid {
    gap: 14px;
}

.panel,
.chart-panel,
.day,
.summary-strip article,
.report-grid {
    border-radius: 20px;
}

.day {
    background: rgba(255, 253, 248, .88);
}

.day h2,
.collapsed-day summary {
    background: linear-gradient(90deg, rgba(246, 242, 232, .98), rgba(246, 242, 232, .62));
    padding: 15px 18px;
}

.entry-form output {
    border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--accent-soft));
    border-radius: 999px;
    text-align: center;
}

input,
select,
textarea {
    border-radius: 12px;
}

input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 82%, transparent);
}

.timer-panel {
    background:
        linear-gradient(155deg, rgba(18, 98, 87, .11), transparent 48%),
        var(--surface);
}

.timer-running {
    background: linear-gradient(135deg, var(--accent), #1f7d6f);
    border-radius: 18px;
    color: var(--accent-ink);
}

.timer-running b {
    font-size: 24px;
    letter-spacing: -.04em;
}

.attention-summary {
    background:
        linear-gradient(135deg, rgba(193, 108, 53, .11), transparent 44%),
        rgba(255, 253, 248, .92);
}

.timeline-panel {
    overflow: hidden;
    padding: 18px;
}

.timeline-track {
    background:
        repeating-linear-gradient(90deg, transparent, transparent calc(100% / 12 - 1px), rgba(29, 36, 31, .08) calc(100% / 12), transparent calc(100% / 12 + 1px)),
        linear-gradient(180deg, rgba(255, 253, 248, .95), rgba(246, 242, 232, .95));
    border-radius: 18px;
    min-height: 150px;
}

.timeline-entry {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--project-color, var(--accent)) 92%, #ffffff), color-mix(in srgb, var(--project-color, var(--accent)) 78%, #000000));
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 14px;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--project-color, var(--accent)) 24%, transparent);
    min-height: 52px;
    padding: 9px 11px;
    transition: transform .16s ease, box-shadow .16s ease;
}

.timeline-entry:hover {
    box-shadow: 0 18px 34px color-mix(in srgb, var(--project-color, var(--accent)) 30%, transparent);
    transform: translateY(-2px);
}

.metric-bar p,
.fte-card p,
.attention-card p,
.day-summary p,
.report-grid article p {
    gap: 14px;
}

.meter,
.dual-bars span {
    background: rgba(29, 36, 31, .06);
    border: 0;
    height: 14px;
}

.meter i,
.dual-bars i {
    background: linear-gradient(90deg, var(--accent), #3f9b87);
}

.fte-card {
    background: rgba(246, 242, 232, .58);
    border-radius: 14px;
    padding: 12px;
}

.fte-metrics span,
.recent-task,
.week-day,
.attention-card {
    border-color: rgba(29, 36, 31, .08);
    border-radius: 16px;
}

.week-day,
.recent-task,
.attention-card {
    box-shadow: 0 10px 24px rgba(29, 36, 31, .045);
    transition: transform .16s ease, box-shadow .16s ease;
}

.week-day:hover,
.recent-task:hover,
.attention-card:hover {
    box-shadow: var(--shadow-small);
    transform: translateY(-2px);
}

.week-day b {
    font-size: 20px;
    letter-spacing: -.04em;
}

.status-pill,
.calendar-mark {
    border-radius: 999px;
}

.icon-button {
    border-radius: 999px;
}

.message,
.empty {
    border-radius: 16px;
    box-shadow: var(--shadow-small);
}

.table-wrap::after {
    content: none;
    display: none;
}

tbody tr {
    transition: background .12s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .heading,
    .workbench,
    .timeline-panel,
    .chart-grid,
    .day,
    .summary-strip,
    .report-grid {
        animation: rise-in .42s ease both;
    }

    .workbench { animation-delay: .04s; }
    .timeline-panel { animation-delay: .08s; }
    .chart-grid { animation-delay: .12s; }
    .day { animation-delay: .16s; }

    @keyframes rise-in {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

@media (max-width: 900px) {
    .main-nav {
        border-radius: 18px;
        flex: 1 1 auto;
    }

    .main-nav a:hover,
    .main-nav a[aria-current="page"] {
        transform: none;
    }

    .heading {
        border-radius: 20px;
        padding: 18px;
    }

    .day-workbench .quick-entry .compact-entry {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    body {
        background:
            radial-gradient(circle at 0 0, rgba(193, 108, 53, .14), transparent 20rem),
            var(--paper);
    }

    .topbar {
        border-radius: 0 0 18px 18px;
    }

    .heading,
    .panel,
    .chart-panel,
    .day,
    .summary-strip article,
    .report-grid {
        border-radius: 16px;
    }

    .day-metrics p {
        min-height: 64px;
    }
}

/* UX refresh fixes: keep empty timeline text and account action aligned. */
.timeline-track > p {
    align-items: center;
    color: var(--muted);
    display: flex;
    inset: 0;
    justify-content: center;
    margin: 0;
    padding: 24px;
    position: absolute;
    text-align: center;
}

.account-form button.quiet {
    background: transparent;
    border-color: transparent;
    border-radius: 8px;
    box-shadow: none;
    color: var(--muted);
    min-height: 34px;
    padding: 5px 0;
    transform: none;
}

.account-form button.quiet:hover {
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    filter: none;
    transform: none;
}

@media (max-width: 900px) {
    .account-form button.quiet {
        padding: 8px 10px;
    }
}

/* Keep the whole utility cluster pinned to the right edge on desktop. */
.topbar {
    justify-content: flex-start;
}

.account-form {
    margin-left: 0;
}

.account-form button.quiet {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .account-form {
        margin-left: 0;
    }
}

/* Reports: split dense analytics into lightweight tabbed sections. */
.report-tabs {
    display: grid;
    gap: 14px;
}

.report-tab-switch {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.report-tab-list {
    align-items: center;
    background: rgba(255, 253, 248, .72);
    border: 1px solid rgba(29, 36, 31, .08);
    border-radius: 999px;
    box-shadow: var(--shadow-small);
    display: inline-grid;
    gap: 5px;
    grid-template-columns: repeat(6, minmax(96px, 1fr));
    justify-self: start;
    padding: 5px;
}

.report-tab-list label {
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    font-weight: 800;
    min-height: 40px;
    padding: 10px 18px;
    text-align: center;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.report-tab-list label:hover {
    color: var(--ink);
    transform: translateY(-1px);
}

#reports-tab-overview:checked ~ .report-tab-list label[for="reports-tab-overview"],
#reports-tab-fte:checked ~ .report-tab-list label[for="reports-tab-fte"],
#reports-tab-budget:checked ~ .report-tab-list label[for="reports-tab-budget"],
#reports-tab-utilization:checked ~ .report-tab-list label[for="reports-tab-utilization"],
#reports-tab-demand:checked ~ .report-tab-list label[for="reports-tab-demand"],
#reports-tab-matrix:checked ~ .report-tab-list label[for="reports-tab-matrix"],
#reports-tab-breakdowns:checked ~ .report-tab-list label[for="reports-tab-breakdowns"] {
    background: var(--ink);
    color: var(--accent-ink);
}

.report-tab-panels {
    min-width: 0;
}

.report-tab-panel {
    display: none;
}

#reports-tab-overview:checked ~ .report-tab-panels .report-panel-overview,
#reports-tab-fte:checked ~ .report-tab-panels .report-panel-fte,
#reports-tab-budget:checked ~ .report-tab-panels .report-panel-budget,
#reports-tab-utilization:checked ~ .report-tab-panels .report-panel-utilization,
#reports-tab-demand:checked ~ .report-tab-panels .report-panel-demand,
#reports-tab-matrix:checked ~ .report-tab-panels .report-panel-matrix,
#reports-tab-breakdowns:checked ~ .report-tab-panels .report-panel-breakdowns {
    display: block;
}

.report-overview-grid,
.report-budget-layout,
.report-utilization-layout,
.report-demand-layout,
.report-fte-layout {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.report-summary-strip {
    margin-bottom: 14px;
}

.calendar-tabs {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.calendar-tab-switch {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.calendar-tab-list {
    align-items: center;
    background: rgba(255, 253, 248, .72);
    border: 1px solid rgba(29, 36, 31, .08);
    border-radius: 999px;
    box-shadow: var(--shadow-small);
    display: inline-grid;
    gap: 5px;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    justify-self: start;
    padding: 5px;
}

.calendar-tab-list label {
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    font-weight: 800;
    min-height: 40px;
    padding: 10px 18px;
    text-align: center;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.calendar-tab-list label:hover {
    color: var(--ink);
    transform: translateY(-1px);
}

.calendar-tab-panel {
    display: none;
    min-width: 0;
}

.calendar-tab-panels {
    min-width: 0;
}

.calendar-panel-overview .calendar-board {
    min-width: 0;
}

.calendar-panel-overview .calendar-board .table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
}

#calendar-tab-overview:checked ~ .calendar-tab-list label[for="calendar-tab-overview"],
#calendar-tab-requests:checked ~ .calendar-tab-list label[for="calendar-tab-requests"] {
    background: var(--ink);
    color: var(--accent-ink);
}

#calendar-tab-overview:checked ~ .calendar-tab-panels .calendar-panel-overview,
#calendar-tab-requests:checked ~ .calendar-tab-panels .calendar-panel-requests {
    display: block;
}

#calendar-tab-requests:checked ~ .calendar-tab-panels .calendar-panel-requests {
    display: grid;
    gap: 14px;
}

.report-fte-layout {
    display: grid;
    gap: 14px;
    margin-bottom: 12px;
}

.report-list-panel p {
    border-top: 1px solid var(--line);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin: 0;
    padding: 10px 0;
}

.report-list-panel p:first-of-type {
    border-top: 0;
}

.report-list-panel span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.report-list-panel b {
    color: var(--muted);
    flex: 0 0 auto;
    font-size: 13px;
    text-align: right;
}

.report-breakdown-grid {
    margin-bottom: 0;
}

.report-matrix-panel {
    overflow: hidden;
}

.matrix-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.matrix-mode-switch .button {
    min-height: 36px;
    padding: 8px 12px;
}

.matrix-mode-switch .button.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--accent-ink);
}

.report-matrix-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.report-matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
    table-layout: fixed;
    width: 100%;
}

.report-matrix-table th,
.report-matrix-table td {
    border-bottom: 1px solid var(--line);
    min-width: 116px;
    padding: 11px 12px;
    text-align: right;
    white-space: nowrap;
}

.report-matrix-table thead th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.report-matrix-table th:first-child {
    background: var(--panel);
    left: 0;
    min-width: 180px;
    position: sticky;
    text-align: left;
    z-index: 1;
}

.report-matrix-table tbody th span,
.report-matrix-table tbody th small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-matrix-table tbody th small {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.matrix-cell {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.matrix-cell-filled,
.matrix-total {
    color: var(--ink);
}

.matrix-cell-over {
    color: var(--danger);
}

.matrix-cell-under {
    color: var(--warning);
}

.matrix-total {
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

.report-matrix-table tfoot th,
.report-matrix-table tfoot td {
    border-bottom: 0;
    border-top: 2px solid var(--line);
}

@media (prefers-reduced-motion: no-preference) {
    .report-tab-panel {
        animation: rise-in .28s ease both;
    }
}

@media (max-width: 900px) {
    .report-tab-list,
    .report-overview-grid,
    .report-fte-layout {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .report-list-panel p {
        align-items: flex-start;
        display: grid;
        gap: 4px;
    }

    .report-list-panel b {
        text-align: left;
    }
}

/* Foundation UI pass: modern SaaS tokens and safe component overrides. */
:root {
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-soft: #f9fafb;
    --text: #172033;
    --muted: #687083;
    --border: #e5e7eb;
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-soft: #eef2ff;
    --success: #16a34a;
    --success-soft: #ecfdf3;
    --warning: #f59e0b;
    --warning-soft: #fffbeb;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --info: #0ea5e9;
    --info-soft: #f0f9ff;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.10);

    --paper: var(--bg);
    --ink: var(--text);
    --line: var(--border);
    --line-strong: #d1d5db;
    --accent: var(--primary);
    --accent-2: #2563eb;
    --accent-soft: var(--primary-soft);
    --accent-ink: #ffffff;
    --shadow-soft: var(--shadow-md);
    --shadow-small: var(--shadow-sm);
}

body {
    background:
        radial-gradient(circle at 8% -10%, rgba(79, 70, 229, .13), transparent 28rem),
        radial-gradient(circle at 92% 0, rgba(14, 165, 233, .13), transparent 30rem),
        linear-gradient(180deg, #ffffff 0, var(--bg) 360px, #f1f5f9 100%);
    color: var(--text);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

body::before {
    background-image:
        linear-gradient(rgba(15, 23, 42, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .025) 1px, transparent 1px);
}

main {
    max-width: 1280px;
    padding: 24px 24px 44px;
}

a {
    color: var(--primary);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

.topbar {
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, .82);
    border-bottom: 1px solid rgba(226, 232, 240, .9);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
    gap: 12px;
    min-height: 68px;
}

.brand::before {
    background: linear-gradient(135deg, var(--primary), var(--info));
    box-shadow: 0 10px 20px rgba(79, 70, 229, .22);
}

.main-nav {
    background: rgba(248, 250, 252, .86);
    border: 1px solid rgba(226, 232, 240, .95);
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.workspace-nav {
    align-items: center;
    background: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
}

.workspace-nav a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
    height: 38px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    text-decoration: none;
    white-space: nowrap;
    width: 38px;
}

.workspace-nav svg {
    fill: none;
    height: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 19px;
}

.workspace-nav a:hover,
.workspace-nav a[aria-current="page"] {
    background: #fff;
    border-color: rgba(226, 232, 240, .95);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
    color: var(--text);
}

.main-nav a {
    color: var(--muted);
    flex: 0 0 auto;
    font-weight: 700;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
    background: var(--primary);
    color: #fff;
}

.notification-nav-link,
.topbar-icon-link {
    align-items: center;
    border-radius: 999px !important;
    color: var(--muted);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    min-width: 38px;
    padding: 0 !important;
    position: relative;
    width: 38px;
}

.topbar > .notification-nav-link,
.topbar > .topbar-icon-link {
    margin-left: 0;
}

.notification-nav-link:hover,
.notification-nav-link[aria-current="page"],
.topbar-icon-link:hover,
.topbar-icon-link[aria-current="page"] {
    background: var(--primary);
    color: #fff;
}

.notification-nav-link svg,
.topbar-icon-link svg {
    fill: none;
    height: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 19px;
}

.topbar-icon-link span {
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.notification-nav-link span {
    align-items: center;
    background: var(--danger);
    border: 2px solid var(--panel);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    min-height: 17px;
    min-width: 17px;
    padding: 2px 4px;
    position: absolute;
    right: -3px;
    top: -3px;
}

.nav-more {
    position: relative;
}

.nav-more summary {
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    gap: 6px;
    list-style: none;
    padding: 10px 14px;
}

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

.nav-more summary::after {
    content: "";
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-top: 7px;
}

.nav-more summary:hover,
.nav-more summary[aria-current="page"],
.nav-more[open] summary {
    background: var(--primary);
    color: #fff;
}

.nav-more-menu {
    backdrop-filter: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    display: grid;
    gap: 4px;
    min-width: 170px;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
}

.nav-more:not([open]) .nav-more-menu {
    display: none;
}

.nav-more-menu a {
    border-radius: 8px;
    justify-content: flex-start;
    padding: 10px 12px;
    width: 100%;
}

@media (max-width: 900px) {
    .topbar > .notification-nav-link {
        display: none;
        margin-left: 0;
    }

    .workspace-nav {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        display: none;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 6px;
        width: 100%;
    }

    .workspace-nav a {
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .nav-toggle:checked ~ .workspace-nav {
        display: grid;
    }

    .nav-toggle:checked ~ .notification-nav-link {
        display: inline-flex;
        grid-column: 1 / -1;
    }

    .account-profile-link {
        display: none;
        grid-column: 1 / -1;
        justify-content: flex-start;
        width: 100%;
    }

    .nav-toggle:checked ~ .account-profile-link {
        display: inline-flex;
    }
}

.account-button {
    align-items: center;
    border: 1px solid transparent !important;
    display: inline-flex;
    gap: 8px;
}

.account-button.topbar-icon-link {
    border: 0 !important;
    cursor: pointer;
    padding: 0 !important;
}

.account-profile-link {
    align-items: center;
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    min-height: 38px;
    padding: 4px 8px 4px 4px;
    text-decoration: none;
}

.account-profile-link:hover,
.account-profile-link[aria-current="page"] {
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}

.account-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--primary-soft) 74%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    border-radius: 999px;
    color: var(--primary);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    overflow: hidden;
    width: 32px;
}

.account-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.account-avatar svg {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 18px;
}

.account-name {
    color: var(--text);
    font-weight: 800;
}

.account-exit {
    color: var(--muted);
    font-weight: 650;
}

button,
.button {
    background: var(--primary);
    border-color: var(--primary);
    border-radius: 999px;
    box-shadow: 0 10px 20px rgba(79, 70, 229, .16);
    color: #fff;
}

button:hover,
.button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    filter: none;
}

button.secondary,
.button.secondary,
.mini-button,
.row-actions button,
.day-nav a,
button.quiet {
    background: #fff;
    border-color: var(--border);
    box-shadow: none;
    color: var(--text);
}

button.danger {
    background: var(--danger);
    border-color: var(--danger);
    box-shadow: 0 10px 20px rgba(220, 38, 38, .14);
}

button:focus-visible,
.button:focus-visible,
.main-nav a:focus-visible,
.workspace-nav a:focus-visible,
.day-nav a:focus-visible,
.icon-button:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-soft) 86%, transparent);
    outline: 2px solid transparent;
}

input,
select,
textarea {
    background: #fff;
    border-color: #d1d5db;
    border-radius: var(--radius-md);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.heading,
.panel,
.chart-panel,
.day,
.report-grid,
.summary-strip article,
.auth,
.filters {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(226, 232, 240, .98);
    box-shadow: var(--shadow-sm);
}

.heading {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82)),
        radial-gradient(circle at 100% 0, rgba(79, 70, 229, .12), transparent 18rem);
}

.heading h1 {
    color: var(--text);
}

.heading p,
small,
.form-hint {
    color: var(--muted);
}

.day h2,
.collapsed-day summary {
    background: linear-gradient(90deg, #fff, var(--surface-soft));
    border-bottom-color: var(--border);
}

.day-metrics p {
    background: #fff;
    border-color: var(--border);
    border-radius: var(--radius-lg);
}

.day-metrics .metric-status {
    background: linear-gradient(135deg, var(--primary), #2563eb);
    color: #fff;
}

.timer-panel {
    background:
        linear-gradient(145deg, rgba(79, 70, 229, .10), transparent 45%),
        #fff;
}

.timer-running {
    background: linear-gradient(135deg, var(--info), var(--primary));
    border-radius: var(--radius-lg);
    color: #fff;
}

.attention-summary {
    background:
        linear-gradient(135deg, rgba(245, 158, 11, .11), transparent 46%),
        #fff;
}

.attention-card,
.recent-task,
.week-day,
.fte-card {
    background: #fff;
    border-color: var(--border);
}

.status-ok,
.status-success,
.week-day.status-ok,
.attention-card.status-ok {
    color: var(--success);
}

.status-warning,
.week-day.status-warning,
.attention-card.status-warning {
    color: var(--warning);
}

.status-missing,
.status-danger,
.week-day.status-missing,
.attention-card.status-missing {
    color: var(--danger);
}

.status-live,
.week-day.status-live,
.attention-card.status-live {
    color: var(--info);
}

.status-off,
.status-upcoming,
.week-day.status-off,
.week-day.status-upcoming {
    color: var(--muted);
}

.status-pill,
.badge {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    padding: 5px 10px;
}

.status-pill.status-ok,
.badge-success {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 24%, var(--border));
    color: var(--success);
}

.status-pill.status-warning,
.badge-warning {
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
    color: #9a5b00;
}

.status-pill.status-missing,
.badge-danger {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
    color: var(--danger);
}

.status-pill.status-live,
.badge-info,
.badge-live {
    background: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 24%, var(--border));
    color: #0369a1;
}

.metric-bar .meter,
.meter,
.dual-bars span {
    background: #eef2f7;
}

.meter i,
.dual-bars i {
    background: linear-gradient(90deg, var(--primary), var(--info));
}

tbody tr:hover {
    background: #f8fafc;
}

th {
    color: var(--muted);
    letter-spacing: .04em;
}

.empty-state {
    align-items: center;
    background:
        radial-gradient(circle at 100% 0, rgba(79, 70, 229, .08), transparent 16rem),
        #fff;
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius-lg);
    color: var(--muted);
    display: grid;
    gap: 8px;
    justify-items: center;
    margin: 14px;
    min-height: 150px;
    padding: 24px;
    text-align: center;
}

.empty-state-title {
    color: var(--text);
    font-size: 18px;
    font-weight: 850;
    margin: 0;
}

.empty-state-text {
    margin: 0;
    max-width: 520px;
}

.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 6px;
}

.compact-empty {
    margin: 0;
    min-height: 110px;
}

.timeline-track .empty-state {
    inset: 14px;
    margin: 0;
    min-height: 0;
    position: absolute;
}

.login-shell {
    align-items: center;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .72fr);
    min-height: calc(100vh - 124px);
}

.login-hero,
.login-card {
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 32px;
    box-shadow: var(--shadow-md);
}

.login-hero {
    background:
        radial-gradient(circle at 100% 0, rgba(14, 165, 233, .20), transparent 18rem),
        linear-gradient(135deg, #312e81, #2563eb);
    color: #fff;
    display: grid;
    gap: 18px;
    min-height: 520px;
    padding: clamp(28px, 5vw, 54px);
}

.login-hero h1 {
    font-size: clamp(36px, 6vw, 68px);
    letter-spacing: -.07em;
    max-width: 760px;
}

.hero-copy {
    color: rgba(255, 255, 255, .82);
    font-size: 19px;
    max-width: 620px;
}

.eyebrow {
    color: inherit;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
    margin: 0;
    text-transform: uppercase;
}

.hero-points {
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-points span {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    padding: 10px 14px;
}

.login-card {
    margin: 0;
    max-width: none;
    padding: 30px;
}

.login-card .eyebrow {
    color: var(--primary);
}

.login-card h1 {
    font-size: 30px;
    letter-spacing: -.04em;
}

@media (max-width: 900px) {
    main {
        padding: 18px 14px 36px;
    }

    .login-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .login-hero {
        min-height: 360px;
    }
}

@media (max-width: 560px) {
    .topbar {
        min-height: 62px;
    }

    .account-button {
        justify-content: flex-start;
    }

    .empty-state-actions {
        width: 100%;
    }

    .empty-state-actions .button {
        width: 100%;
    }

    .login-hero,
    .login-card {
        border-radius: 22px;
    }
}

/* UI polish after review: flatter page, calmer timeline and compact import form. */
body {
    background: var(--bg);
}

body::before {
    display: none;
}

.heading,
.panel,
.chart-panel,
.day,
.report-grid,
.summary-strip article,
.auth,
.filters {
    background: #fff;
}

.timeline-track {
    background:
        repeating-linear-gradient(90deg, transparent, transparent calc(100% / 12 - 1px), #eef2f7 calc(100% / 12), transparent calc(100% / 12 + 1px)),
        #fff;
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, .03);
}

.timeline-track .empty-state,
.timeline-empty {
    background: transparent;
    border: 0;
    box-shadow: none;
    inset: 0;
    margin: 0;
    min-height: 0;
    padding: 28px;
}

.timeline-track .empty-state-title {
    font-size: 17px;
}

.timeline-track .empty-state-text {
    font-size: 14px;
}

.import-day form {
    gap: 14px;
    padding: 18px;
}

.import-day input[type="file"] {
    background: var(--surface-soft);
    border-style: dashed;
    cursor: pointer;
    padding: 10px;
}

.import-day button[type="submit"] {
    justify-self: start;
    min-width: 180px;
    width: auto;
}

.import-day .form-hint {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin: 0;
    padding: 10px 12px;
}

@media (max-width: 560px) {
    .import-day button[type="submit"] {
        width: 100%;
    }
}

/* Core screens pass: journal and team dashboard readability. */
.filters {
    align-items: end;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: 18px;
    padding: 18px;
}

.filters button[type="submit"] {
    min-width: 132px;
}

.day {
    overflow: hidden;
}

.day h2 {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
}

.day h2 span {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    padding: 5px 10px;
}

.table-wrap {
    background: #fff;
}

.journal-table,
.team-dashboard-table {
    border-collapse: separate;
    border-spacing: 0;
}

.journal-table th,
.journal-table td,
.team-dashboard-table th,
.team-dashboard-table td {
    border-bottom: 1px solid #eef2f7;
    padding: 15px 16px;
    vertical-align: middle;
}

.journal-table thead th,
.team-dashboard-table thead th {
    background: #fbfcfe;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.journal-table tbody tr,
.team-dashboard-table tbody tr {
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.journal-table tbody tr:hover,
.team-dashboard-table tbody tr:hover {
    background: #f8fafc;
    box-shadow: inset 3px 0 0 var(--primary);
}

.person-cell,
.team-dashboard-table td:first-child {
    color: var(--text);
    font-weight: 800;
}

.journal-table td:nth-child(3),
.journal-table td:nth-child(4) {
    color: var(--text);
    font-weight: 700;
}

.comment-cell {
    color: var(--muted);
    max-width: 360px;
}

.team-dashboard-table .status-pill {
    margin-bottom: 5px;
}

.day-nav {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    padding: 4px;
}

.day-nav a {
    border: 0;
    border-radius: 999px;
    min-height: 36px;
    padding-inline: 13px;
}

.team-collapsible {
    overflow: hidden;
    padding: 0;
}

.team-collapsible summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    list-style: none;
    min-height: 54px;
    padding: 16px 18px;
}

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

.team-collapsible summary span {
    color: var(--text);
    font-size: 16px;
    font-weight: 850;
    min-width: 0;
}

.team-collapsible summary b {
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    display: flex;
    flex: 0 0 auto;
    font-size: 13px;
    justify-content: center;
    min-height: 28px;
    min-width: 28px;
    padding: 0 9px;
}

.team-collapsible summary::after {
    border-bottom: 2px solid var(--muted);
    border-right: 2px solid var(--muted);
    content: "";
    height: 8px;
    margin-left: auto;
    transform: rotate(45deg);
    transition: transform .16s ease;
    width: 8px;
}

.team-collapsible[open] summary::after {
    transform: rotate(225deg);
}

.attention-board,
.manager-inbox {
    background: #fff;
    border-color: rgba(226, 232, 240, .95);
}

.attention-list,
.manager-inbox-list {
    border-top: 1px solid #eef2f7;
    display: grid;
}

.attention-row {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #eef2f7;
    border-left: 4px solid var(--line-strong);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
    min-height: 68px;
    padding: 12px 16px;
}

.attention-row.status-missing,
.attention-row.status-rejected {
    border-left-color: var(--danger);
}

.attention-row.status-warning {
    border-left-color: #b9851b;
}

.attention-row.status-live {
    border-left-color: #25578f;
}

.attention-row-person,
.attention-row-meta {
    min-width: 0;
}

.attention-row-person {
    display: grid;
    gap: 4px;
}

.attention-row-person b,
.attention-row-person span,
.attention-row-meta b,
.attention-row-meta small {
    overflow-wrap: normal;
    word-break: normal;
}

.attention-row-person b {
    color: var(--text);
    font-size: 15px;
}

.attention-row-person span,
.attention-row-meta small {
    color: var(--muted);
    font-size: 13px;
}

.attention-row-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.attention-row-meta b {
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
}

.manager-inbox-toolbar {
    align-items: center;
    border-top: 1px solid #eef2f7;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 0 18px 14px;
}

.manager-inbox-toolbar p {
    color: var(--muted);
    margin: 0;
    min-width: 0;
}

.manager-inbox-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    padding: 0 18px 14px;
}

.manager-inbox-metric {
    align-items: center;
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: var(--radius-md);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 46px;
    padding: 10px 12px;
}

.manager-inbox-metric span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    min-width: 0;
}

.manager-inbox-metric b {
    color: var(--text);
    font-size: 18px;
}

.manager-inbox-item {
    align-items: center;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    border-left: 4px solid var(--line-strong);
    border-radius: 0;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    min-height: 62px;
    padding: 11px 16px;
}

.manager-inbox-item.status-danger {
    border-left-color: var(--danger);
}

.manager-inbox-item.status-warning {
    border-left-color: #b9851b;
}

.manager-inbox-item > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.manager-inbox-item p {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.manager-inbox-item p:last-child {
    color: var(--muted);
    font-size: 13px;
}

.manager-inbox-item b {
    color: var(--text);
}

.manager-inbox-item span {
    color: var(--muted);
}

.team-chart-grid .chart-panel {
    display: grid;
    gap: 12px;
    min-height: 0;
}

.team-chart-grid .metric-bar {
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: var(--radius-md);
    margin-bottom: 0;
    padding: 12px;
}

.team-chart-grid .metric-bar p b {
    color: var(--text);
    font-weight: 850;
}

.team-chart-grid .meter {
    height: 10px;
}

.team-workload h2 {
    color: var(--text);
    font-size: 16px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.25;
}

@media (max-width: 760px) {
    .filters {
        padding: 14px;
    }

    .filters button[type="submit"],
    .day-nav,
    .day-nav a {
        width: 100%;
    }

    .day-nav {
        border-radius: var(--radius-lg);
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .attention-row,
    .manager-inbox-toolbar,
    .manager-inbox-item {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .attention-row-meta {
        justify-content: flex-start;
    }

    .manager-inbox-toolbar .button,
    .manager-inbox-item .button {
        width: 100%;
    }

    .week-approval-main,
    .week-approval-form {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .week-approval-form button {
        width: 100%;
    }

    .journal-table th,
    .journal-table td,
    .team-dashboard-table th,
    .team-dashboard-table td {
        padding: 12px 14px;
    }
}

/* Calendar pass: status heatmap and personal/team month matrix. */
.calendar-board {
    border-color: rgba(226, 232, 240, .95);
    min-width: 0;
    overflow: hidden;
}

.calendar-board .table-wrap {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    padding: 0 0 10px;
    width: 100%;
}

.calendar-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1180px;
    width: max-content;
}

.calendar-table th,
.calendar-table td {
    border-bottom: 1px solid #eef2f7;
}

.calendar-table thead th {
    background: #fbfcfe;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    padding: 10px 6px;
    text-transform: uppercase;
}

.calendar-table th:first-child,
.calendar-table td:first-child,
.calendar-table th:nth-child(2),
.calendar-table td:nth-child(2) {
    box-shadow: 1px 0 0 #eef2f7;
}

.calendar-table th:first-child,
.calendar-table th:nth-child(2) {
    background: #f8fafc;
}

.calendar-table td:first-child,
.calendar-table td:nth-child(2) {
    background: #fff;
}

.calendar-table th:first-child,
.calendar-table td:first-child {
    color: var(--text);
    font-weight: 850;
    min-width: 160px;
    width: 160px;
}

.calendar-table th:nth-child(2),
.calendar-table td:nth-child(2) {
    color: var(--text);
    font-weight: 800;
    left: 160px;
    min-width: 96px;
    width: 96px;
}

.calendar-table th small,
.calendar-table td small {
    color: var(--muted);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 2px;
    text-transform: none;
}

.calendar-table tbody tr {
    transition: background .16s ease;
}

.calendar-table tbody tr:hover td {
    background: #f8fafc;
}

.calendar-table tbody tr:hover td:first-child,
.calendar-table tbody tr:hover td:nth-child(2) {
    background: #f1f5f9;
}

.calendar-table th:not(:first-child):not(:nth-child(2)),
.calendar-table td.calendar-cell {
    min-width: 30px;
    padding: 6px 4px;
    width: 30px;
}

.calendar-table .weekend {
    background: #f8fafc;
}

.calendar-table td.calendar-cell.weekend {
    background: #fbfcfe;
}

.calendar-table tbody tr:hover td.calendar-cell.weekend {
    background: #f1f5f9;
}

.calendar-mark {
    border: 1px solid transparent;
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    min-width: 30px;
    padding-inline: 4px;
    text-decoration: none;
    transition: transform .14s ease, box-shadow .14s ease;
}

.calendar-cell:hover .calendar-mark,
.calendar-mark:focus-visible {
    box-shadow: 0 10px 18px rgba(15, 23, 42, .12);
    outline: none;
    transform: translateY(-1px) scale(1.04);
}

.calendar-mark.status-ok {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 24%, var(--border));
    color: #15803d;
}

.calendar-mark.status-warning {
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
    color: #92400e;
}

.calendar-mark.status-missing {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
    color: var(--danger);
}

.calendar-mark.status-live {
    background: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 24%, var(--border));
    color: #0369a1;
    position: relative;
}

.calendar-mark.status-live::before {
    background: var(--info);
    border-radius: 999px;
    content: "";
    height: 5px;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 5px;
}

.calendar-mark.status-off,
.calendar-mark.status-upcoming {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}

.calendar-mark.status-off {
    color: transparent;
}

.calendar-mark.status-off::after {
    color: #64748b;
    content: "-";
    font-size: 15px;
    font-weight: 900;
}

.calendar-mark.has-absence {
    color: #475569;
    min-width: 30px;
    padding-inline: 4px;
}

.calendar-mark.has-absence::after {
    content: none;
}

.calendar-absence-label {
    display: block;
    max-width: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-request-summary {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
}

.calendar-request-panel .entry-form.form-grid {
    align-items: end;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
}

.calendar-request-panel .entry-form .form-field {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 7px;
    min-width: 0;
    padding: 0;
}

.calendar-request-panel .entry-form .form-field > label {
    line-height: 1.2;
}

.calendar-request-panel .entry-form .form-field textarea {
    min-height: 84px;
}

.calendar-request-panel .entry-form .form-actions {
    align-self: end;
    display: flex;
    grid-column: 2;
    justify-content: flex-end;
    margin-top: 0;
}

.calendar-request-panel .entry-form .form-actions button {
    min-width: 180px;
}

.calendar-legend {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
}

.calendar-legend span {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-weight: 750;
    padding: 7px 10px;
}

.calendar-legend i {
    border: 0;
    border-radius: 999px;
    height: 11px;
    width: 11px;
}

/* User profile screen. */
.profile-heading {
    align-items: center;
}

.profile-preview {
    align-items: center;
    display: inline-flex;
    gap: 12px;
    min-width: 0;
}

.profile-preview > div {
    display: grid;
    gap: 3px;
    justify-items: end;
}

.profile-preview b,
.profile-preview span {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-preview span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.account-avatar-large {
    height: 52px;
    width: 52px;
}

.account-avatar-large svg {
    height: 26px;
    width: 26px;
}

.profile-grid {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr);
}

.profile-panel {
    margin: 0;
}

.profile-form {
    display: grid;
    gap: 20px;
    padding: 18px;
}

.profile-photo-card {
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    display: grid;
    gap: 18px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px;
}

.profile-photo-preview {
    height: 74px;
    width: 74px;
}

.profile-photo-preview svg {
    height: 32px;
    width: 32px;
}

.profile-photo-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.profile-photo-copy b {
    font-size: 17px;
}

.profile-photo-copy span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}

.profile-photo-copy .errorlist {
    margin: 0;
}

.profile-upload-control {
    align-items: center;
    border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--border));
    border-radius: 999px;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    padding: 8px;
}

.profile-upload-native {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.profile-upload-button {
    align-items: center;
    background: var(--primary);
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 800;
    justify-content: center;
    min-height: 34px;
    padding: 7px 16px;
}

.profile-upload-button:hover {
    background: var(--primary-hover);
}

.profile-clear-control {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    gap: 8px;
    font-size: 13px;
    font-weight: 750;
}

.profile-clear-control input[type="checkbox"] {
    appearance: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 5px;
    box-shadow: none;
    display: inline-grid;
    height: 18px;
    margin: 0;
    min-height: 18px;
    padding: 0;
    place-items: center;
    width: 18px;
}

.profile-clear-control input[type="checkbox"]::before {
    background: var(--primary);
    border-radius: 3px;
    box-shadow: none;
    content: "";
    display: none;
    height: 10px;
    margin: 0;
    transform: none;
    width: 10px;
}

.profile-clear-control input[type="checkbox"]:checked::before {
    display: block;
}

.profile-password-fields {
    gap: 16px;
}

.profile-form .form-grid {
    gap: 16px;
}

.profile-form .form-field {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 7px;
    padding: 0;
}

.profile-form .form-field > label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.profile-form .form-actions {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    margin: 2px -18px -18px;
    padding: 16px 18px;
}

.profile-form .form-actions button {
    min-width: 190px;
}

.profile-management-panel {
    grid-column: 1 / -1;
}

.profile-panel-lead {
    color: var(--muted);
    margin: 0;
    padding: 0 18px;
}

.profile-management-list {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 18px;
}

.profile-management-list article {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 16px;
}

.profile-management-list span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.profile-management-list b {
    color: var(--text);
    display: block;
    font-size: 15px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.profile-management-list small {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

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

.help-heading {
    align-items: flex-start;
    margin-top: 4px;
    padding: 28px 30px;
}

.help-heading h1 {
    margin: 0 0 8px;
}

.help-heading p {
    max-width: 760px;
}

.help-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0;
    padding: 18px;
}

.help-section header {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0 0 14px;
}

.help-section header span {
    align-self: start;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    justify-self: start;
    padding: 5px 10px;
}

.help-section h2 {
    background: transparent;
    border: 0;
    display: block;
    margin: 0;
    padding: 0;
}

.help-section p {
    color: var(--muted);
    margin: 0;
    max-width: 68ch;
}

.help-section ul {
    display: grid;
    gap: 10px;
    margin: 0 0 0 18px;
    padding: 0;
}

.help-section li {
    color: var(--text);
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .profile-management-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .help-layout,
    .profile-management-list {
        grid-template-columns: 1fr;
    }

    .profile-heading {
        align-items: flex-start;
    }

    .profile-preview {
        justify-content: flex-start;
        width: 100%;
    }

    .profile-preview > div {
        justify-items: start;
    }

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

    .profile-form .form-actions {
        align-items: stretch;
        display: grid;
    }

    .profile-form .form-actions button {
        width: 100%;
    }

    .calendar-table {
        min-width: 1080px;
    }

    .calendar-table th:first-child,
    .calendar-table td:first-child {
        min-width: 136px;
        width: 136px;
    }

    .calendar-table th:nth-child(2),
    .calendar-table td:nth-child(2) {
        left: 136px;
        min-width: 88px;
        width: 88px;
    }

    .calendar-legend {
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
}

@media (max-width: 560px) {
    .calendar-board .table-wrap {
        margin-inline: -14px;
        padding-inline: 14px;
    }

    .calendar-table th:first-child,
    .calendar-table td:first-child {
        min-width: 118px;
        width: 118px;
    }

    .calendar-table th:nth-child(2),
    .calendar-table td:nth-child(2) {
        left: 118px;
        min-width: 76px;
        width: 76px;
    }
}

/* Projects page polish: keep directory filters aligned with the card header. */
.project-list {
    overflow: hidden;
}

.project-list .section-head {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(180px, 1fr) minmax(320px, auto);
    margin: 0;
    padding: 18px;
}

.project-list .section-head h2 {
    margin: 0;
}

.project-list .admin-filterbar {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, auto);
    justify-self: end;
    max-width: 520px;
    width: 100%;
}

.project-list .admin-filterbar input,
.project-list .admin-filterbar select {
    background: #fff;
    border-color: #cbd5e1;
    border-radius: 12px;
    box-shadow: none;
    min-height: 42px;
    width: 100%;
}

.project-list .table-wrap {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.project-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 720px;
}

.project-table thead th {
    background: #fbfcfe;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    padding: 13px 14px;
    text-transform: uppercase;
}

.project-table td {
    border-bottom: 1px solid #eef2f7;
    padding: 14px;
    vertical-align: middle;
}

.project-table tbody tr:hover {
    background: #f8fafc;
    box-shadow: inset 3px 0 0 var(--primary);
}

.project-table .project-name {
    color: var(--text);
    font-weight: 850;
}

.project-table .status-pill {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .project-list .section-head {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .project-list .admin-filterbar {
        justify-self: stretch;
        max-width: none;
    }
}

@media (max-width: 560px) {
    .project-list .section-head {
        padding: 14px;
    }

    .project-list .admin-filterbar {
        grid-template-columns: 1fr;
    }

    .project-table {
        min-width: 0;
    }
}

/* Directory header normalization: projects and people share this filter header. */
.day > .section-head {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(180px, 1fr) minmax(360px, auto);
    margin: 0;
    padding: 18px;
}

.day > .section-head h2 {
    background: transparent;
    border: 0;
    display: block;
    margin: 0;
    padding: 0;
}

.day > .section-head h2::after {
    display: none;
}

.day > .section-head .admin-filterbar {
    align-items: center;
    display: grid;
    gap: 8px;
    justify-self: end;
    width: 100%;
}

.day > .section-head [data-project-filters] {
    grid-template-columns: minmax(220px, 1fr) minmax(150px, auto);
    max-width: 520px;
}

.day > .section-head [data-people-filters] {
    grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.4fr) repeat(3, minmax(130px, 1fr));
    max-width: 880px;
}

.day > .section-head .management-scope-filter {
    margin: 0;
}

.day > .section-head .admin-filterbar input,
.day > .section-head .admin-filterbar select {
    min-height: 42px;
    width: 100%;
}

.people-table {
    border-collapse: separate;
    border-spacing: 0;
}

.people-table thead th {
    background: #fbfcfe;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    padding: 13px 14px;
    text-transform: uppercase;
}

.people-table td {
    border-bottom: 1px solid #eef2f7;
    padding: 14px;
    vertical-align: middle;
}

.people-table tbody tr:hover {
    background: #f8fafc;
    box-shadow: inset 3px 0 0 var(--primary);
}

.people-table td:first-child,
.people-table td:nth-child(2) {
    color: var(--text);
    font-weight: 800;
}

@media (max-width: 1120px) {
    .day > .section-head {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .day > .section-head .admin-filterbar {
        justify-self: stretch;
        max-width: none;
    }
}

@media (max-width: 760px) {
    .day > .section-head [data-people-filters] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .day > .section-head {
        padding: 14px;
    }

    .day > .section-head [data-project-filters],
    .day > .section-head [data-people-filters] {
        grid-template-columns: 1fr;
    }
}

/* Reports management pass: clearer tabs, KPI cards and FTE cards. */
.heading .actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.report-tabs {
    gap: 18px;
}

.report-tab-list {
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 6px;
}

.report-tab-list label {
    color: var(--muted);
    min-height: 42px;
}

#reports-tab-overview:checked ~ .report-tab-list label[for="reports-tab-overview"],
#reports-tab-fte:checked ~ .report-tab-list label[for="reports-tab-fte"],
#reports-tab-budget:checked ~ .report-tab-list label[for="reports-tab-budget"],
#reports-tab-utilization:checked ~ .report-tab-list label[for="reports-tab-utilization"],
#reports-tab-demand:checked ~ .report-tab-list label[for="reports-tab-demand"],
#reports-tab-matrix:checked ~ .report-tab-list label[for="reports-tab-matrix"],
#reports-tab-breakdowns:checked ~ .report-tab-list label[for="reports-tab-breakdowns"] {
    background: var(--primary);
    color: #fff;
}

.report-tab-panel {
    min-width: 0;
}

.report-summary-strip {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 16px;
}

.report-summary-strip article {
    background:
        radial-gradient(circle at 100% 0, rgba(79, 70, 229, .08), transparent 8rem),
        #fff;
    border-color: rgba(226, 232, 240, .95);
    border-radius: var(--radius-lg);
    min-height: 118px;
    padding: 18px;
}

.report-summary-strip span {
    color: #64748b;
    letter-spacing: .08em;
}

.report-summary-strip b {
    color: var(--text);
    font-size: clamp(24px, 3vw, 34px);
}

.report-overview-grid,
.report-fte-layout {
    gap: 16px;
}

.report-overview-grid .chart-panel,
.report-fte-layout .chart-panel {
    border-color: rgba(226, 232, 240, .95);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.report-overview-grid .chart-panel h2,
.report-fte-layout .chart-panel h2,
.report-grid h2 {
    color: var(--text);
    font-size: 18px;
    letter-spacing: -.02em;
}

.report-overview-grid .metric-bar {
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    padding: 12px;
}

.report-overview-grid .metric-bar:last-child {
    margin-bottom: 0;
}

.report-fte-layout {
    align-items: start;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
}

.fte-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-left: 4px solid var(--success);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
    padding: 14px;
}

.fte-card-under {
    border-left-color: var(--warning);
}

.fte-card-over {
    border-left-color: var(--danger);
}

.fte-card p:first-child b {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    padding: 4px 9px;
}

.fte-metrics {
    gap: 8px;
}

.fte-metrics span {
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: var(--radius-md);
    padding: 10px;
}

.dual-bars span {
    height: 10px;
}

.report-list-panel p {
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    padding: 11px 12px;
}

.report-list-panel p:first-of-type {
    border-top: 1px solid #eef2f7;
}

.report-list-panel p:last-child {
    margin-bottom: 0;
}

.report-grid {
    background: transparent;
    border: 0;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    overflow: visible;
}

.report-grid article {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px;
}

.report-grid article:nth-child(odd),
.report-grid article:nth-last-child(-n + 2) {
    border: 1px solid rgba(226, 232, 240, .95);
}

.report-grid article p {
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    padding: 11px 12px;
}

.report-grid article p:first-of-type {
    border-top: 1px solid #eef2f7;
}

.report-grid article p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .heading .actions {
        justify-content: flex-start;
    }

    .report-fte-layout,
    .report-grid {
        grid-template-columns: 1fr;
    }

    .report-tab-list {
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 560px) {
    .heading .actions,
    .heading .actions .button {
        width: 100%;
    }

    .report-tab-list {
        grid-template-columns: 1fr;
    }

    .fte-metrics {
        grid-template-columns: 1fr;
    }
}

/* Admin edit forms pass: clearer member/project editing surfaces. */
.form-panel {
    background:
        radial-gradient(circle at 100% 0, rgba(79, 70, 229, .06), transparent 12rem),
        #fff;
    border-color: rgba(226, 232, 240, .95);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    max-width: 1040px;
    overflow: hidden;
    padding: 0;
}

.form-panel > h1,
.form-panel > p {
    padding-inline: clamp(18px, 3vw, 28px);
}

.form-panel > h1 {
    border-bottom: 1px solid var(--border);
    font-size: clamp(26px, 4vw, 38px);
    letter-spacing: -.05em;
    margin: 0;
    padding-block: 24px 10px;
}

.form-panel > p {
    color: var(--muted);
    margin: 0;
    padding-bottom: 18px;
}

.form-panel > form {
    padding: clamp(18px, 3vw, 28px);
}

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

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

.form-field {
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: var(--radius-md);
    display: grid;
    gap: 6px;
    padding: 12px;
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-field > label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.form-field input,
.form-field select,
.form-field textarea {
    background: #fff;
}

.form-field-error {
    border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
}

.form-help,
.form-field small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.form-help ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.form-help-details {
    padding-top: 2px;
}

.form-help-details summary {
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    width: fit-content;
}

.form-help-details[open] summary {
    margin-bottom: 6px;
}

.form-readonly {
    background: color-mix(in srgb, var(--primary-soft) 28%, #fff) !important;
    color: var(--muted);
    font-weight: 750;
}

.form-actions {
    display: flex;
    gap: 10px;
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.form-actions button,
.form-actions .button {
    min-width: 180px;
    padding-inline: 22px;
    width: auto;
}

.member-edit-form {
    gap: 18px;
}

.member-edit-form .form-tabs {
    background: var(--surface-soft);
    border-color: var(--border);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, .03);
    display: flex !important;
    justify-self: start;
    max-width: min(100%, 620px);
    padding: 5px;
    width: fit-content;
}

.member-edit-form .form-tabs .tab-button {
    border-radius: 999px;
    flex: 1 0 150px;
    font-weight: 850;
    min-height: 40px;
    white-space: nowrap;
}

#tab-profile:checked ~ .form-tabs label[for="tab-profile"],
#tab-projects:checked ~ .form-tabs label[for="tab-projects"],
#tab-management:checked ~ .form-tabs label[for="tab-management"] {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(79, 70, 229, .22);
}

.member-edit-form .tab-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(16px, 2.5vw, 22px);
}

.member-edit-form .profile-panel .form-field:has(input[type="checkbox"]) {
    align-items: center;
    display: flex;
    gap: 12px;
}

.allocation-toolbar {
    align-items: stretch;
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: var(--radius-lg);
    grid-template-columns: minmax(260px, .9fr) minmax(280px, 1.1fr);
    padding: 14px;
}

.allocation-toolbar label {
    display: grid;
    gap: 7px;
}

.allocation-toolbar p {
    align-self: center;
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
    border-radius: var(--radius-md);
    color: #3730a3;
    font-weight: 700;
    padding: 11px 12px;
}

.allocation-frame {
    border-color: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, .03);
    max-height: 520px;
}

.allocation-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
}

.allocation-table th {
    background: #fbfcfe;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.allocation-table td {
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}

.allocation-table tbody tr:hover {
    background: #f8fafc;
    box-shadow: inset 3px 0 0 var(--primary);
}

.allocation-table td:nth-child(2) {
    color: var(--text);
    font-weight: 800;
}

.allocation-table td:nth-child(2) small {
    color: var(--success);
    font-weight: 850;
}

.allocation-table input {
    border-radius: 10px;
    min-height: 38px;
}

.allocation-table th:first-child,
.allocation-table td:first-child {
    text-align: center;
    width: 74px;
}

.allocation-table th:nth-child(2),
.allocation-table td:nth-child(2) {
    width: 88px;
}

.allocation-table th:nth-child(5),
.allocation-table td:nth-child(5) {
    width: 130px;
}

.allocation-table td:nth-child(3) {
    color: var(--text);
    font-weight: 800;
}

.allocation-table .allocation-status {
    color: var(--success);
    display: block;
    font-size: 11px;
    font-weight: 850;
    margin-top: 2px;
}

.allocation-table .allocation-status.access-only {
    color: var(--muted);
}

.allocation-table .allocation-status.former-access {
    color: #b45309;
}

.allocation-table td:nth-child(2) {
    color: var(--muted);
    font-weight: 900;
}

.allocation-table input[type="checkbox"] {
    appearance: auto;
    accent-color: var(--primary);
    background: initial;
    border: initial;
    border-radius: 4px;
    box-shadow: none;
    height: 18px;
    margin: 0 auto;
    min-height: 0;
    padding: 0;
    width: 18px;
}

.allocation-table input[type="checkbox"]::before {
    content: none;
}

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

.form-panel .project-form > div {
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: var(--radius-md);
    padding: 12px;
}

.form-panel .project-form > div:has(input[type="checkbox"]) {
    align-items: center;
    display: flex;
    gap: 12px;
}

.form-panel .project-form input[type="color"] {
    cursor: pointer;
    min-height: 46px;
    padding: 5px;
}

.form-panel .project-form .actions {
    background: transparent;
    border: 0;
    display: flex;
    grid-column: 1 / -1;
    padding: 0;
}

@media (max-width: 760px) {
    .member-edit-form .profile-panel,
    .form-grid,
    .allocation-toolbar,
    .form-panel .project-form {
        grid-template-columns: 1fr;
    }

    .member-edit-form .form-tabs {
        max-width: none;
        width: 100%;
    }

    .people-table .actions-head,
    .people-table .actions-cell {
        box-shadow: none;
        position: static;
    }

    .calendar-request-panel .entry-form.form-grid {
        grid-template-columns: 1fr;
    }

    .calendar-request-panel .entry-form .form-actions {
        grid-column: 1;
    }
}

@media (max-width: 560px) {
    .form-panel {
        border-radius: var(--radius-lg);
    }

    .member-edit-form .form-tabs {
        border-radius: var(--radius-lg);
        flex-direction: column;
    }

    .form-panel .project-form .actions,
    .form-panel .project-form .actions .button,
    .form-panel .project-form .actions button,
    .form-actions,
    .form-actions button,
    .form-actions .button {
        width: 100%;
    }
}

/* My day quick entry polish: prevent project/activity selects from stretching. */
.quick-entry .compact-entry {
    align-items: start;
}

.quick-entry .compact-entry > div {
    align-self: start;
}

.quick-entry .compact-entry select,
.quick-entry .compact-entry input:not([type="hidden"]) {
    min-height: 42px;
}

.quick-entry .compact-entry select {
    height: 42px;
}

.quick-entry .compact-entry textarea {
    min-height: 70px;
}

.quick-entry .compact-entry .inline-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
}

.quick-entry .compact-entry .inline-actions output {
    min-height: 44px;
}

@media (min-width: 900px) {
    .quick-entry .compact-entry div:has(#id_project) {
        grid-row: auto;
    }
}

/* System audit */
.audit-summary-strip {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.audit-detail-summary {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.audit-filters {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.audit-filters label {
    min-width: 0;
}

.audit-table {
    min-width: 1160px;
}

table.my-projects-table {
    min-width: 1040px;
    table-layout: fixed;
    width: 100%;
}

table.my-projects-table th,
table.my-projects-table td {
    vertical-align: top;
}

table.my-projects-table th:nth-child(1),
table.my-projects-table td:nth-child(1) {
    width: 150px;
}

table.my-projects-table th:nth-child(2),
table.my-projects-table td:nth-child(2) {
    width: 115px;
}

table.my-projects-table th:nth-child(3),
table.my-projects-table td:nth-child(3) {
    width: 88px;
}

table.my-projects-table th:nth-child(4),
table.my-projects-table td:nth-child(4),
table.my-projects-table th:nth-child(6),
table.my-projects-table td:nth-child(6) {
    width: 86px;
}

table.my-projects-table th:nth-child(5),
table.my-projects-table td:nth-child(5) {
    width: 200px;
}

table.my-projects-table th:nth-child(7),
table.my-projects-table td:nth-child(7) {
    width: 168px;
}

table.my-projects-table th:nth-child(8),
table.my-projects-table td:nth-child(8) {
    width: 108px;
}

table.my-projects-table th:nth-child(9),
table.my-projects-table td:nth-child(9) {
    width: 86px;
}

.my-projects-teams,
.my-projects-conflicts {
    overflow-wrap: anywhere;
}

.my-projects-fact .meter {
    max-width: 185px;
}

.my-projects-conflicts small {
    display: block;
    line-height: 1.35;
    margin-top: 5px;
}

.my-projects-actions {
    text-align: right;
}

.my-projects-actions .button {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-bottom: 6px;
    min-height: 34px;
    padding-left: 10px;
    padding-right: 10px;
    width: 76px;
}

.my-projects-actions .button:last-child {
    margin-bottom: 0;
}

.audit-table th:nth-child(1),
.audit-table td:nth-child(1) {
    width: 150px;
}

.audit-table th:nth-child(2),
.audit-table td:nth-child(2) {
    width: 115px;
}

.audit-table th:nth-child(3),
.audit-table td:nth-child(3) {
    width: 190px;
}

.audit-table th:nth-child(4),
.audit-table td:nth-child(4) {
    width: 190px;
}

.audit-table th:nth-child(5),
.audit-table td:nth-child(5) {
    width: 210px;
}

.audit-table code {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 8px;
}

.audit-table small,
.muted {
    color: var(--muted);
}

.audit-metadata {
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.audit-detail-table {
    min-width: 760px;
}

.audit-detail-table th:nth-child(1),
.audit-detail-table td:nth-child(1) {
    width: 210px;
}

.audit-changed-row {
    background: rgba(245, 158, 11, 0.08);
}

.audit-json {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 16px 16px;
    max-height: 520px;
    overflow: auto;
    padding: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.pagination {
    align-items: center;
    color: var(--muted);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 14px 16px 16px;
}

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

.notification-item {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid var(--info);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 16px;
}

.notification-item.is-read {
    opacity: .72;
}

.notification-warning {
    border-left-color: var(--warning);
}

.notification-success {
    border-left-color: var(--success);
}

.notification-danger {
    border-left-color: var(--danger);
}

.notification-item header {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.notification-item time,
.notification-item small,
.notification-item p {
    color: var(--muted);
}

.notification-item h2 {
    font-size: 18px;
    margin: 0 0 6px;
}

.notification-item p {
    margin: 0 0 6px;
}

.notification-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

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

    .pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .notification-item {
        grid-template-columns: 1fr;
    }

    .notification-actions,
    .notification-actions .button,
    .notification-actions button {
        justify-content: stretch;
        width: 100%;
    }
}

/* Final overrides for controls that intentionally differ from the global button/toggle styles. */
.language-switch .language-option {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--muted);
    min-height: 28px;
    padding: 7px 10px;
    transform: none;
}

.language-switch .language-option:hover,
.language-switch .language-option:focus-visible {
    background: color-mix(in srgb, var(--surface) 78%, var(--accent-soft));
    border: 0;
    box-shadow: none;
    color: var(--ink);
    filter: none;
    transform: none;
}

.language-switch .language-option[aria-pressed="true"],
.language-switch .language-option[aria-pressed="true"]:hover {
    background: var(--surface);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ink) 10%, transparent);
    color: var(--accent-strong);
}

.approval-panel {
    margin-bottom: 18px;
}

.approval-head {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 18px;
}

.approval-head h2 {
    background: transparent;
    border: 0;
    color: var(--text);
    display: block;
    font-size: 18px;
    letter-spacing: 0;
    margin: 0 0 4px;
    padding: 0;
}

.approval-head p {
    color: var(--muted);
    margin: 0;
}

.approval-submit-form {
    align-items: stretch;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 16px 18px 18px;
}

.approval-submit-form > input[type="hidden"] {
    display: none;
}

.approval-comment-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.approval-actions {
    align-items: end;
    display: flex;
}

.approval-actions button {
    min-width: 176px;
}

.approval-submit-form textarea,
.approval-row textarea {
    min-height: 56px;
}

.approval-comment {
    border-top: 1px solid var(--line);
    color: var(--muted);
    margin: 0 18px 18px;
    padding-top: 12px;
}

.approval-list {
    display: grid;
    gap: 12px;
    padding: 16px 18px 18px;
}

.approval-row {
    align-items: center;
    background: #fbfcfe;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1fr) auto minmax(360px, 1.15fr);
    padding: 12px;
}

.approval-row-person {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.approval-row-person b,
.approval-row-person span,
.approval-row-person small {
    overflow-wrap: anywhere;
}

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

.approval-review-form {
    align-items: start;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.approval-status-filter select {
    min-width: 180px;
}

.approval-row-meta {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.approval-row-meta small {
    overflow-wrap: anywhere;
}

.approval-workspace-row {
    grid-template-columns: minmax(180px, .85fr) minmax(180px, .9fr) minmax(360px, 1.2fr);
}

.approval-empty {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 28px;
    text-align: center;
}

.approval-empty h2 {
    font-size: 18px;
    margin: 0 0 8px;
}

.approval-empty p {
    color: var(--muted);
    margin: 0;
}

.reports-approval-link .approval-head {
    border-bottom: 0;
}

.approval-detail-heading .eyebrow a {
    color: inherit;
    text-decoration: none;
}

.approval-detail-summary {
    margin-bottom: 18px;
}

.approval-detail-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
}

.approval-issue-list,
.approval-project-list,
.approval-day-list,
.approval-entry-list {
    display: grid;
    gap: 10px;
    padding: 16px 18px 18px;
}

.approval-issue,
.approval-project-list p,
.approval-entry-list p {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) minmax(180px, auto);
    margin: 0;
    padding: 10px 12px;
}

.approval-issue small,
.approval-project-list span,
.approval-entry-list small {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.approval-issue.status-warning,
.approval-day-card.status-warning,
.approval-day-card.status-missing {
    border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
}

.approval-issue.status-live {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}

.approval-ok {
    color: var(--muted);
    margin: 0;
    padding: 16px 18px 18px;
}

.approval-day-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.approval-day-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.approval-day-card header {
    align-items: start;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.approval-day-card h3,
.approval-day-card p {
    margin: 0;
}

.approval-day-card header p {
    color: var(--muted);
}

.approval-entry-list {
    padding: 0;
}

.approval-entry-list p {
    grid-template-columns: auto minmax(0, 1fr);
}

.approval-entry-list small {
    grid-column: 2;
}

.approval-timeline {
    display: grid;
    gap: 10px;
    padding: 16px 18px 18px;
}

.week-approval-timeline {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.approval-timeline-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
}

.approval-timeline-item div {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.approval-timeline-item p,
.approval-timeline-item small {
    margin: 0;
}

.approval-timeline-item span,
.approval-timeline-item small {
    color: var(--muted);
}

.approval-timeline-item.status-approved {
    border-color: color-mix(in srgb, var(--success) 28%, var(--border));
}

.approval-timeline-item.status-rejected {
    border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
}

.approval-detail-form {
    grid-template-columns: minmax(0, 1fr) auto;
}

.approval-row .row-actions {
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.status-submitted {
    background: color-mix(in srgb, var(--accent-soft) 70%, #ffffff);
    color: var(--accent-strong);
}

.status-approved {
    background: var(--success-soft);
    color: var(--success);
}

.status-rejected {
    background: var(--danger-soft);
    color: var(--danger);
}

.status-draft {
    background: var(--surface-soft);
    color: var(--muted);
}

@media (max-width: 760px) {
    .approval-submit-form,
    .approval-row,
    .approval-review-form,
    .approval-head,
    .approval-workspace-row,
    .approval-detail-grid,
    .approval-issue,
    .approval-project-list p,
    .approval-entry-list p,
    .approval-day-card header,
    .approval-detail-form {
        grid-template-columns: 1fr;
    }

    .approval-entry-list small {
        grid-column: auto;
    }

    .approval-actions,
    .approval-row .row-actions {
        justify-content: stretch;
    }

    .approval-actions button,
    .approval-row .row-actions button {
        width: 100%;
    }
}

/* My day: keep the week approval action visually secondary in the week frame. */
.week-strip .week-strip-heading {
    align-items: stretch;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    min-height: 70px;
    padding: 0 16px 0 0;
}

.week-strip .week-strip-heading h2 {
    align-items: center;
    align-self: stretch;
    background: #fff;
    border: 0;
    border-right: 1px solid var(--border);
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    margin: 0;
    min-width: 144px;
    padding: 0 20px;
}

.week-strip .week-strip-heading h2 span {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    padding: 5px 10px;
}

.week-strip .week-approval-compact {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: flex-end;
}

.week-strip .week-approval-compact .status-pill {
    min-height: 34px;
}

.week-strip .week-approval-compact button {
    background: #fff;
    border-color: var(--border);
    box-shadow: none;
    color: var(--text);
    min-height: 38px;
    padding: 7px 16px;
}

.week-strip .week-approval-compact button:hover {
    box-shadow: var(--shadow-sm);
}

@media (max-width: 760px) {
    .week-strip .week-strip-heading {
        align-items: stretch;
        display: grid;
        gap: 0;
        grid-template-columns: 1fr;
        padding: 0;
    }

    .week-strip .week-strip-heading h2 {
        border-right: 0;
        justify-content: flex-start;
        min-height: 58px;
    }

    .week-strip .week-approval-compact {
        border-top: 1px solid var(--border);
        justify-content: stretch;
        padding: 12px 16px;
    }

    .week-strip .week-approval-compact button {
        width: 100%;
    }
}

/* Final alignment pass for week and report controls. */
.week-strip .week-strip-heading {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: auto;
    padding: 15px 18px;
}

.week-strip .week-strip-heading h2 {
    align-items: center;
    align-self: auto;
    background: transparent;
    border: 0;
    display: inline-flex;
    flex: 0 1 auto;
    gap: 10px;
    justify-content: flex-start;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.week-strip .week-approval-compact button {
    min-height: 38px;
}

.report-tab-list {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    justify-self: stretch;
    width: 100%;
}

.report-tab-list label {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: 0;
    padding-inline: 10px;
    white-space: nowrap;
}

.reports-approval-dialog .approval-submit-form {
    border-top: 0;
    grid-template-columns: 1fr;
    padding: 18px 20px 20px;
}

.reports-approval-dialog .approval-comment-field {
    display: grid;
    gap: 6px;
}

.reports-approval-dialog .approval-submit-form textarea {
    min-height: 112px;
}

.reports-approval-dialog .approval-actions {
    justify-content: flex-end;
}

.reports-approval-dialog .approval-comment {
    margin: 0;
}

@media (max-width: 900px) {
    .report-tab-list {
        overflow-x: auto;
        grid-template-columns: repeat(7, minmax(112px, 1fr));
    }
}

@media (max-width: 760px) {
    .week-strip .week-strip-heading {
        align-items: stretch;
        display: grid;
        gap: 12px;
        padding: 15px 18px;
    }

    .week-strip .week-approval-compact {
        border-top: 0;
        padding: 0;
    }
}