/* Chronos design system. Tokens mirror the Voralyn brand (voralyn.tech). No external resources. */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("/fonts/plex-sans-latin-400.woff2") format("woff2");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("/fonts/plex-mono-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("/fonts/archivo-latin-400-800.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

/* Light is the default (Mockup-Stand Oktober 2026). Dark follows the system setting or data-theme="dark". */
:root {
    color-scheme: light;
    --ink: #04090b;
    --slate: #16262a;
    --slate-2: #22383d;
    --slate-3: #2c4a50;
    --haze: #8fa7ac;
    --haze-dim: #7b959b;
    --paper: #eaf2f2;
    --bistre: #d2a15c;
    --bistre-hi: #e0b273;
    --signal: #4fb3a8;
    --danger: #c9705f;

    --bg: var(--paper);
    --surface: #ffffff;
    --surface-raised: #f4f9f9;
    --border: #c9d9da;
    --text: var(--ink);
    --muted: #4d6469;
    --primary: #7a5418;
    --primary-text: #ffffff;
    --focus: #7a5418;

    --success-bg: rgba(30, 107, 99, 0.10);
    --success-text: #1e6b63;
    --error-bg: rgba(138, 47, 31, 0.10);
    --error-text: #8a2f1f;
    --warning-bg: rgba(122, 84, 24, 0.10);
    --warning-text: #6b4a00;

    --status-working: #1e6b63;
    --status-break: #7a5418;
    --status-out: #4d6469;

    --teal-soft: #d9ece9;
    --bistre-soft: #f4e9d8;
    --action-in: #1e6b63;
    --action-in-text: #ffffff;
    --action-pause: #7a5418;
    --action-pause-text: #ffffff;

    --radius: 2px;
    --gut: clamp(16px, 5vw, 32px);
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-display: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dark mode only when set explicitly with data-theme="dark". The system setting is not followed. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: var(--ink);
    --surface: var(--slate);
    --surface-raised: #1b2f34;
    --border: var(--slate-2);
    --text: var(--paper);
    --muted: var(--haze);
    --primary: var(--bistre);
    --primary-text: var(--ink);
    --focus: var(--bistre-hi);
    --success-text: var(--signal);
    --error-text: #e39683;
    --warning-text: var(--bistre-hi);
    --status-working: var(--signal);
    --status-break: var(--bistre);
    --status-out: var(--haze);
    --teal-soft: rgba(79, 179, 168, 0.18);
    --bistre-soft: rgba(210, 161, 92, 0.18);
    --action-in: var(--signal);
    --action-in-text: var(--ink);
    --action-pause: var(--bistre);
    --action-pause-text: var(--ink);
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Top bar ------------------------------------------------------------------ */


/* Navigation ----------------------------------------------------------------- */

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

.menu {
    display: flex;
    gap: 8px 22px;
    padding: 10px var(--gut);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.menu::-webkit-scrollbar {
    display: none;
}

.menu-group {
    display: flex;
    align-items: center;
    gap: 4px 14px;
    flex-shrink: 0;
    padding-right: 22px;
    border-right: 1px solid var(--border);
}

.menu-group:last-child {
    border-right: none;
    padding-right: 0;
}

.menu-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-right: 4px;
}

.menu-link {
    color: var(--text);
    text-decoration: none;
    font-size: 0.92rem;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: border-color 0.2s var(--ease);
}

.menu-link:hover,
.menu-link:focus-visible {
    border-bottom-color: var(--status-working);
    outline: none;
}

.request-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
}

.request-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 4px 12px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s var(--ease);
}

.request-card:hover,
.request-card:focus-visible {
    border-color: var(--primary);
    outline: none;
}

.request-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
}

.request-count {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    color: var(--primary);
}

.request-card .muted {
    grid-column: 1 / -1;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px var(--gut);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

.brand {
    color: inherit;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.brand::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    background: var(--primary);
    vertical-align: middle;
}

.nav {
    display: flex;
    align-items: center;
    gap: 6px 18px;
    flex-wrap: wrap;
}

.nav-link {
    color: var(--muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--text);
    border-bottom-color: var(--status-working);
    outline: none;
}

/* Layout ------------------------------------------------------------------- */

main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 28px var(--gut) 48px;
}

/* Narrow content: login forms and printable reports read better in a column. */
main.narrow {
    max-width: 440px;
}

main.document {
    max-width: 960px;
}

h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 2rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 4px 0 16px;
}

h2 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 12px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.muted {
    color: var(--muted);
    font-size: 0.9rem;
}

.inline {
    display: inline;
    margin: 0;
}

/* Select and button in one row, for example the profile assignment in the employee list. */
.inline-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.inline-row select {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.inline-row button {
    flex: none;
}

.inline-row input {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

/* Tables set smaller buttons; here the button keeps the field height next to the select. */
table.data .inline-row button {
    min-height: var(--control-h);
    font-size: 0.9375rem;
}

/* Employee list: the profile row stays on one line and the action buttons stay side by side and unbroken. */
table.data:has(.inline-row) th:last-child,
table.data:has(.inline-row) td:last-child {
    width: 1%;
}

table.data:has(.inline-row) .row-actions {
    flex-wrap: nowrap;
}

table.data:has(.inline-row) .row-actions button {
    white-space: nowrap;
}

/* Forms -------------------------------------------------------------------- */

label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

input,
select {
    font: inherit;
    font-family: var(--font-sans);
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    min-height: 48px;
    transition: border-color 0.2s var(--ease);
}

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

.checkbox {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
}

.checkbox input {
    min-height: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    accent-color: var(--primary);
}

/* Buttons ------------------------------------------------------------------ */

button {
    font: inherit;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.95rem;
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--radius);
    border: 1px solid var(--muted);
    background: var(--surface-raised);
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.1s var(--ease);
}

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

button:active {
    transform: translateY(1px);
}

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

button.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-text);
    font-weight: 600;
}

button.primary:hover {
    filter: brightness(1.08);
    border-color: var(--primary);
}

button.secondary {
    min-height: 40px;
    font-size: 0.9rem;
    background: var(--surface);
    border-color: var(--muted);
}

button.secondary:hover {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-color: var(--primary);
}

button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent);
}

/* Alerts and badges ---------------------------------------------------------- */

.alert {
    border-radius: var(--radius);
    border-left: 3px solid var(--danger);
    padding: 12px 16px;
    margin: 0 0 16px;
    background: var(--error-bg);
    color: var(--error-text);
    font-size: 0.95rem;
}

.alert.success {
    border-left-color: var(--signal);
    background: var(--success-bg);
    color: var(--success-text);
}

.alert.warning {
    border-left-color: var(--bistre);
    background: var(--warning-bg);
    color: var(--warning-text);
}

.alert.warning p {
    margin: 0 0 10px;
}

.alert.warning form {
    margin: 0;
}

.badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--primary);
    color: var(--primary);
    margin-left: 6px;
    vertical-align: middle;
}

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

/* Clock -------------------------------------------------------------------- */

.greeting {
    margin: 0 0 12px;
    color: var(--muted);
}

.status {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 20px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.status .label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.status strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
}

.status.working strong {
    color: var(--status-working);
}

.status.on_break strong {
    color: var(--status-break);
}

.status.out strong {
    color: var(--status-out);
}

.actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

button.action {
    min-height: 68px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Pause and Gehen are sent only after the button has been held for a second: the fill shows the progress, so a stray tap does nothing. */
button.action[data-hold] {
    position: relative;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

button.action[data-hold]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, currentColor 30%, transparent);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

button.action[data-hold].holding::before {
    animation: hold-fill 1s linear forwards;
}

@keyframes hold-fill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

button.action.clock_in {
    background: var(--action-in);
    border-color: var(--action-in);
    color: var(--action-in-text);
}

button.action.clock_out {
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
}

button.action.break_start,
button.action.break_end {
    background: var(--action-pause);
    border-color: var(--action-pause);
    color: var(--action-pause-text);
}

/* Light palette: darker accents so white labels keep sufficient contrast. */

.events {
    list-style: none;
    margin: 0;
    padding: 0;
}

.events li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.events li:last-child {
    border-bottom: none;
}

.events li.empty {
    color: var(--muted);
}

.events time {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.logout {
    margin: 0;
}

/* Admin lists -------------------------------------------------------------- */

.employees {
    list-style: none;
    margin: 0;
    padding: 0;
}

.employees li.employee {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.employees li.employee:last-child {
    border-bottom: none;
}

.employees li.inactive {
    opacity: 0.55;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.row-actions button {
    min-height: 40px;
    font-size: 0.85rem;
}

.logo-preview {
    max-height: 80px;
    max-width: 240px;
    object-fit: contain;
    align-self: flex-start;
}

.upload-status {
    margin: 0;
}

/* Report ------------------------------------------------------------------- */

.report-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0 14px;
    border-bottom: 1px solid var(--text);
}

.report-logo {
    max-height: 64px;
    max-width: 200px;
    object-fit: contain;
}

/* Company header (logo and address) is for paper only: the screen shows the report itself. */
.report-head {
    display: none;
}

.company {
    font-size: 0.88rem;
    text-align: right;
    color: var(--muted);
}

.company strong {
    color: var(--text);
}

.report-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 14px;
    font-size: 0.95rem;
}

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

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

table.report {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

table.report th,
table.report td {
    padding: 9px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

table.report th {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

table.report td {
    font-family: var(--font-mono);
}

table.report th.num,
table.report td.num {
    text-align: right;
}

table.report tfoot th {
    border-top: 1px solid var(--text);
    border-bottom: none;
    color: var(--text);
}

/* Signature lines are for paper only (printed by the print rules below). */
.signatures {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 56px;
}

.signatures div {
    border-top: 1px solid var(--text);
    padding-top: 6px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Print: always light, no chrome -------------------------------------------- */

@media print {
    :root,
    :root[data-theme="dark"] {
        color-scheme: light;
        --bg: #ffffff;
        --surface: #ffffff;
        --text: #000000;
        --muted: #333333;
        --border: #999999;
    }

    body {
        background: #ffffff;
        color: #000000;
        font-size: 11pt;
    }

    .no-print,
    .topbar,
    .alert {
        display: none !important;
    }

    main {
        max-width: none;
        padding: 0;
    }

    .card {
        border: none;
        padding: 0;
    }

    table.report tr {
        break-inside: avoid;
    }
}

/* Leave, accounts and calendar ------------------------------------------------ */

.balance {
    margin: 0;
    font-size: 1rem;
}

.balance strong {
    font-family: var(--font-display);
    font-size: 1.3rem;
}

.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.posting {
    border-top: 1px dashed var(--border);
    padding-top: 12px;
    margin-top: 6px;
}

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

.calendar-card {
    padding: 12px;
    overflow-x: auto;
}

table.month {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 420px;
}

table.month th {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 6px 4px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

table.month td {
    vertical-align: top;
    height: 84px;
    padding: 6px 4px;
    border: 1px solid var(--border);
}

table.month td.blank {
    background: transparent;
    border-color: transparent;
}

.day-num {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 4px;
}

.pill {
    display: block;
    font-size: 0.72rem;
    line-height: 1.3;
    padding: 2px 4px;
    margin-bottom: 3px;
    background: color-mix(in srgb, var(--signal) 18%, transparent);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-url {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    word-break: break-all;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
}

/* Footer ------------------------------------------------------------------- */

.footer {
    padding: 20px var(--gut) 28px;
    text-align: center;
    border-top: 1px solid var(--border);
}

.footer a {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.footer a:hover,
.footer a:focus-visible {
    color: var(--text);
    border-bottom-color: var(--primary);
    outline: none;
}

/* Wider screens ------------------------------------------------------------- */

@media (min-width: 720px) {
    main {
        max-width: 880px;
    }

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

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

@media (min-width: 1100px) {
    main {
        max-width: 1180px;
    }

    main.narrow {
        max-width: 440px;
    }

    main.document {
        max-width: 960px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Lists: toolbar, data tables and pager ------------------------------------ */

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

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 4px;
}

.toolbar-search {
    flex: 1 1 220px;
}

.toolbar-search input {
    width: 100%;
}

.toolbar-filter {
    flex: 0 1 180px;
}

.toolbar-filter select {
    width: 100%;
}

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

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

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

table.data th {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

table.data td {
    font-family: var(--font-sans);
}

table.data td time,
table.data .num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.data th.num,
table.data td.num {
    text-align: right;
}

table.data tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}

table.data .row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

table.data .row-actions input {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.85rem;
    width: 180px;
}

table.data button {
    min-height: 36px;
    font-size: 0.85rem;
    padding: 0 12px;
}

table.data .inline {
    display: inline;
}

table.data .cert-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

table.data .cert-cell input[type=file] {
    min-height: 36px;
    padding: 4px;
    font-size: 0.8rem;
    width: 200px;
}

table.overview .negative,
strong.negative {
    color: var(--error-text);
}

.empty-state {
    padding: 18px 0;
    margin: 0;
}

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.9rem;
}

/* Collapsible sections: one look everywhere. Header row, +/- toggle on the right, no browser arrow. */
details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

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

details > summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 1.4rem;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: var(--radius);
    flex-shrink: 0;
}

details[open] > summary::after {
    content: "\2212";
}

details > summary:hover h2 {
    color: var(--primary);
}

details > summary h2 {
    margin: 0;
}

details[open] > summary {
    margin-bottom: 12px;
}

.balance strong.negative {
    color: var(--error-text);
}

.tenant-link {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

.tenant-link:hover,
.tenant-link:focus-visible {
    border-bottom-color: var(--primary);
    outline: none;
}

/* Small screens: cell text wraps and inputs fill the width, so tables fit without their own scrollbar. */
@media (max-width: 560px) {
    table.data th,
    table.data td {
        padding: 8px 6px;
    }

    table.data th {
        white-space: normal;
    }

    table.data td {
        white-space: normal;
        word-break: break-word;
    }

    table.data td time,
    table.data .num {
        white-space: nowrap;
    }

    table.data .row-actions input,
    table.data .cert-cell input[type=file] {
        width: 100%;
    }

    .table-wrap {
        scrollbar-width: thin;
    }
}

.dns-block {
    margin-top: 12px;
}

.dns-block p {
    margin: 0 0 8px;
}

table.dns td {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    word-break: break-all;
    white-space: normal;
}

/* === Umbau: Bausteine und Rahmen (Auftrag docs/UMBAU-PROMPT.md) ================= */

/* Bausteine on existing tokens ---------------------------------------------- */

button.primary {
    min-height: 52px;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}

button.secondary {
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
    box-shadow: none;
}

button.secondary:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    border-color: var(--text);
}

.badge::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    background: currentColor;
    vertical-align: middle;
}

.card > h2 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin: 0 0 4px;
}

label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

input,
select {
    min-height: 44px;
}

/* Frame: sidebar (desktop) and bottom bar with "Mehr" (below 1100 px) ------------- */

.shell {
    display: block;
    flex: 1 0 auto;
}

.sidebar,
.bottombar {
    display: none;
}

.sidebar {
    font-family: var(--font-sans);
}

@media (max-width: 1099px) {
    /* Room for the bottom bar, only on pages that have it. */
    body.framed {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .bottombar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: flex;
        align-items: stretch;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .bottom-link,
    .bottom-more > summary {
        flex: 1 1 0;
        min-width: 0;
        min-height: 64px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px;
        font-family: var(--font-sans);
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--muted);
        text-decoration: none;
        cursor: pointer;
        list-style: none;
        border-top: 2px solid transparent;
    }

    .bottom-link svg,
    .bottom-more > summary svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .bottom-link.current,
    .bottom-more[open] > summary {
        color: var(--status-working);
        border-top-color: var(--status-working);
        font-weight: 600;
    }

    /* No position on .bottom-more: the sheet then spans the full width of the fixed bar. */
    .bottom-more {
        flex: 1 1 0;
        min-width: 0;
        display: block;
    }

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

    .bottom-more > summary::after {
        content: none;
    }

    .bottom-more[open] > .sheet {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        background: var(--surface);
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
        padding-bottom: 8px;
        max-height: 70vh;
        max-height: 70svh;
        overflow-y: auto;
    }

    .sheet > * {
        min-height: 52px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        text-decoration: none;
    }

    .sheet button {
        width: 100%;
        justify-content: flex-start;
        border: none;
        border-radius: 0;
        text-align: left;
    }

    .sheet .logout {
        margin: 0;
        width: 100%;
    }

    .sheet .logout button {
        width: 100%;
    }
}

@media (min-width: 1100px) {
    /* Room for the sidebar, only on pages that have it: sign-in and portal pages stay centred on the full width. */
    .framed .shell {
        display: block;
        padding-left: 240px;
    }

    .sidebar {
        display: block;
        position: fixed;
        top: 53px;
        bottom: 0;
        left: 0;
        width: 240px;
        overflow-y: auto;
        padding: 24px 20px;
        background: var(--surface);
        border-right: 1px solid var(--border);
    }

    .side-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-bottom: 22px;
    }

    .side-label {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 6px;
    }

    .side-link {
        display: block;
        padding: 8px 10px;
        color: var(--text);
        text-decoration: none;
        font-size: 0.95rem;
        border-left: 2px solid transparent;
    }

    .side-link:hover,
    .side-link:focus-visible {
        border-left-color: var(--status-working);
        background: color-mix(in srgb, var(--status-working) 8%, transparent);
        outline: none;
    }

    .shell > main {
        min-width: 0;
    }

    /* On desktop the top menu is not used for tenant pages. */
    .topbar .brand {
        font-size: 1.1rem;
    }
}

@media print {
    .sidebar,
    .bottombar {
        display: none !important;
    }

    .shell {
        display: block !important;
    }
}

/* === Umbau Schritt 3: Stempeluhr ============================================ */

.timer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 12px;
}

.live-timer {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* Clock card: status and running time, then today's strip (mockup variant C) */
.clock-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.clock-card .status {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.clock-card .status strong {
    font-size: 1.5rem;
}

.clock-card .timer {
    margin: 0;
    font-size: 2.6rem;
}

.clock-card .timer {
    color: var(--text);
}

.day-card {
    margin-bottom: 16px;
}

.day-card h2 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.day-strip {
    display: block;
    width: 100%;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.day-strip .seg.work {
    fill: var(--status-working);
}

.day-strip .seg.pause {
    fill: var(--status-break);
}

.day-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--muted);
}

.day-legend strong {
    color: var(--text);
    font-weight: 600;
}

.swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: -1px;
}

.month-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 12px;
}

.month-head h2 {
    font-size: 1.05rem;
}

.month-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.day-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.day-table th,
.day-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.day-table th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.day-table .num {
    text-align: right;
    font-family: var(--font-mono);
}

.day-table tfoot td {
    border-top: 1px solid var(--text);
    border-bottom: 0;
    font-weight: 700;
}

.day-table .missing {
    color: var(--warning-text);
    font-weight: 600;
}

.swatch.work {
    background: var(--status-working);
}

.swatch.pause {
    background: var(--status-break);
}

.status {
    padding: 22px 24px;
    gap: 14px;
}

.status strong {
    font-size: 1.9rem;
    letter-spacing: -0.01em;
}

.status .label {
    font-size: 0.72rem;
}

.clock-hint {
    margin: 4px 0 14px;
    font-size: 0.875rem;
}

.actions {
    gap: 14px;
}

button.action {
    min-height: 72px;
    font-size: 1.2rem;
}

/* Secondary actions on the clock screen: visible outline, not competing with the main action. */
button.action.secondary {
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
    font-size: 1rem;
    min-height: 56px;
}

/* === Umbau Schritt 4: Monatsbericht und Druck (A4) ========================== */

.report-head {
    border-bottom: 1px solid var(--text);
    padding-bottom: 14px;
}

table.report th {
    background: transparent;
}

table.report tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--text) 3%, transparent);
}

table.report tfoot th {
    font-family: var(--font-display);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.95rem;
    color: var(--text);
}

@media print {
    @page {
        size: A4;
        margin: 16mm 14mm 18mm 14mm;
    }

    html,
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    body {
        display: block;
        min-height: 0;
        padding-bottom: 0 !important;
        font-size: 10.5pt;
    }

    .shell {
        padding-left: 0 !important;
    }

    main,
    main.document {
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .report-head,
    .report-meta,
    h1 {
        color: #000000;
    }

    .report-head {
        display: flex;
    }

    .report-logo {
        max-height: 14mm;
    }

    table.report {
        font-size: 9.5pt;
    }

    table.report th,
    table.report td {
        padding: 3px 5px;
        border-bottom: 0.5pt solid #999999;
    }

    table.report tbody tr:nth-child(even) td {
        background: transparent;
    }

    table.report th {
        color: #333333;
    }

    .signatures {
        display: grid;
        margin-top: 14mm;
        gap: 14mm;
    }

    .signatures div {
        border-top: 0.6pt solid #000000;
        color: #000000;
        font-size: 8.5pt;
    }

    .footer {
        display: none !important;
    }
}


/* Monthly report: month chooser (year with arrows, twelve months with their status). Not printed. */
.report-chooser {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.report-year {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.report-year strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.report-year .button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.report-year a.button {
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border);
}

/* Hidden elements stay hidden even when a class sets display (passkey buttons, install hint). */
[hidden] {
    display: none !important;
}

.passkey-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

/* The remove form (password and button) takes its own line on a phone instead of running out of the card. */
@media (max-width: 719px) {
    .passkey-item .inline-row {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Width 0 and grow: the field takes the room the button leaves, not its own default width. */
    .passkey-item .inline-row input {
        flex: 1 1 0;
        width: 0;
    }
}

/* The passkey list is a plain list: no browser indent and no bullets. */
.passkeys ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Install hint for the phone. Shown by app.js only: never on desktop and never inside the installed app. */
.install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 25;
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.install-banner[hidden],
.install-banner [hidden] {
    display: none;
}

.install-text {
    margin: 0;
    font-size: 0.9rem;
}

.install-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.install-actions button {
    width: auto;
    min-height: 40px;
    padding: 0 14px;
}

@media (min-width: 1100px) {
    .install-banner {
        display: none !important;
    }
}

.report-year [aria-disabled="true"] {
    opacity: 0.35;
}

/* Navigation buttons that cannot be used (first or last page, first or last month): visible, not clickable. */
a.button[aria-disabled="true"] {
    opacity: 0.35;
    pointer-events: none;
}

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

@media (min-width: 720px) {
    .report-month-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.report-month,
.report-month.future {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-raised);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.report-month.future {
    border-style: dashed;
    color: var(--muted);
    opacity: 0.5;
}

.report-month:hover,
.report-month:focus-visible {
    border-color: var(--status-working);
    outline: none;
}

.report-month.current {
    border-color: var(--status-working);
    box-shadow: inset 0 0 0 1px var(--status-working);
}

/* Long names (September) on a narrow phone: cut with an ellipsis instead of running out of the tile. */
.report-month-name {
    overflow: hidden;
    font-size: 0.8rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.report-month-status {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
}

.report-month.open .report-month-status {
    color: var(--primary);
}

/* Phone: each day of the monthly report becomes a small card, so the report does not scroll sideways. */
@media screen and (max-width: 719px) {
    table.report thead {
        display: none;
    }

    table.report,
    table.report tbody,
    table.report tfoot,
    table.report tr,
    table.report th,
    table.report td {
        display: block;
        width: 100%;
    }

    table.report tbody tr,
    table.report tfoot tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 14px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }

    table.report th,
    table.report td,
    table.report tbody tr:nth-child(even) td {
        padding: 0;
        border: 0;
        background: none;
        text-align: left;
    }

    table.report td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--muted);
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* A field without a value is left out of the day card: a weekend is one line, not four empty labels. */
    table.report tbody td[data-label]:empty {
        display: none;
    }

    table.report tbody td:first-child {
        grid-column: 1 / -1;
        font-weight: 700;
    }

    table.report td.report-note,
    table.report th.report-difference,
    table.report tfoot th[colspan] {
        grid-column: 1 / -1;
    }

    /* The desktop table right-aligns amounts; on the phone each amount sits left under its label. */
    table.report th.num,
    table.report td.num {
        text-align: left;
    }
}

/* === PWA: Geraete mit Notch und Startbildschirm ================================ */

.topbar {
    padding-top: calc(14px + env(safe-area-inset-top));
}

@media (max-width: 1099px) {
    .bottombar {
        min-height: calc(64px + env(safe-area-inset-bottom));
    }
}

@media (display-mode: standalone) {
    .topbar .brand::before {
        content: none;
    }
}

/* Link styled as the primary button (single action pages). */
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 20px;
    font-family: var(--font-display);
    font-weight: 700;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-text);
    text-decoration: none;
}

/* One button system: <button> and link buttons share height, type and corners. The primary button is filled,
   the secondary one is an outline. Action buttons of the clock and the tables keep their own styles. */
button.primary,
button.secondary,
a.button,
a.button.secondary {
    min-height: var(--control-h);
    padding: 0 16px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--control-radius);
}

button.primary,
a.button {
    background: var(--action-in);
    border: 1px solid var(--action-in);
    color: var(--action-in-text);
}

button.secondary,
a.button.secondary {
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
    box-shadow: none;
}

button.secondary:hover,
a.button.secondary:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Open requests on the "Mehr" button of the mobile bar. Only admins see it, and it is empty at zero. */
.bottom-more > summary {
    position: relative;
}

.bottom-more > summary > .count-badge {
    position: absolute;
    top: 6px;
    left: calc(50% + 8px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.68rem;
}

/* === Umbau Schritt 5: Verwaltung (Listen, Seitenwechsel, Zeilenaktionen) ======= */

/* Pager: range text left, page numbers right; current page filled. */
.pager {
    flex-wrap: wrap;
    gap: 12px;
}

.pager-range {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.pager-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.page-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

a.page-link:hover,
a.page-link:focus-visible {
    border-color: var(--text);
    outline: none;
}

.page-link.current {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-text);
    font-weight: 700;
}

.page-link.disabled {
    color: var(--muted);
    border-style: dashed;
}

.page-gap {
    color: var(--muted);
    padding: 0 4px;
}

/* Row actions: framed in success (approve) or error (reject) colour, text stays readable. */
button.row-action {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.85rem;
    background: transparent;
    color: var(--text);
    font-weight: 600;
    border-width: 1px;
}

button.row-action.approve {
    border-color: var(--success-text);
    box-shadow: inset 3px 0 0 var(--success-text);
}

button.row-action.reject {
    border-color: var(--error-text);
    box-shadow: inset 3px 0 0 var(--error-text);
}

button.row-action:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* Admin tables: consistent header row and comfortable row height. */
table.data tbody tr {
    height: 52px;
}

table.data th {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* === Umbau Schritt 5 (Rest): aktiver Menuepunkt und Zaehler ==================== */

.side-link.current {
    font-weight: 700;
    color: var(--status-working);
    border-left-color: var(--status-working);
    background: color-mix(in srgb, var(--status-working) 10%, transparent);
}

.side-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.side-link .nav-icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
}

.side-link.current .nav-icon {
    color: currentColor;
}

.side-text {
    flex: 1 1 auto;
    min-width: 0;
}

.count-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--primary);
    color: var(--primary-text);
    border-radius: var(--radius);
}

.sheet-link.current {
    color: var(--status-working);
    font-weight: 700;
}

/* Menu icons: one shared style for the mobile bar, the mobile sheet and the desktop sidebar. */
.nav-icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sheet-link {
    gap: 14px;
    color: var(--text);
}

.sheet-link .nav-icon {
    color: var(--muted);
}

.sheet-link.current .nav-icon {
    color: currentColor;
}

.sheet-text {
    flex: 1 1 auto;
    min-width: 0;
}

.sheet-label {
    min-height: 0;
    padding: 14px 20px 6px;
    border-bottom: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sheet .logout button {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 20px;
    font-weight: 500;
}

/* === Mockup-Umsetzung: Kopfleiste, Seitenleiste, Stempelkarte, zweispaltige Admin-Ansicht === */

/* Dark top bar with brand and account, as in the mockups. Works in light and dark mode. */
.topbar {
    background: var(--ink);
    color: var(--paper);
    border-bottom: 0;
    backdrop-filter: none;
}

.topbar .brand {
    color: var(--paper);
}

.topbar button.secondary,
.topbar .logout button {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent);
    color: var(--paper);
}

/* Cards and status blocks get the softer radius of the mockups. */
.card,
.status {
    border-radius: 14px;
}

/* Desktop sidebar: white panel, teal active state. */
@media (min-width: 1100px) {
    .sidebar {
        background: var(--surface);
        padding: 22px 14px;
    }

    .side-link {
        border-left: 3px solid transparent;
        border-radius: 8px;
        padding: 10px 12px;
    }

    .side-link.current {
        border-left-color: var(--status-working);
        background: color-mix(in srgb, var(--status-working) 12%, transparent);
        color: var(--status-working);
    }
}

/* Clock: stacked on the phone, two columns on the desktop (mockup 1). */
.clock-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.clock-main,
.clock-side {
    min-width: 0;
}

.clock-card .timer {
    font-size: 2.6rem;
}

@media (min-width: 1100px) {
    .clock-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .clock-card {
        padding: 28px;
    }

    .clock-card .timer {
        font-size: 3.6rem;
    }
}

/* Admin: employee list on the left, the selected employee on the right (mockup 2). */
.admin-split {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-main {
    min-width: 0;
}

.emp-list h2 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.emp-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.emp-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
}

.emp-link:hover {
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

.emp-link.current {
    background: color-mix(in srgb, var(--status-working) 14%, transparent);
    color: var(--status-working);
    font-weight: 700;
}

@media (min-width: 1100px) {
    .admin-split {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }
}

/* Clock fixes from the first screenshot: label small, only the running time large, track in surface color. */
.clock-card .timer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--muted);
}

.clock-card .timer .label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.clock-card .live-timer {
    font-family: var(--font-mono);
    font-size: 3rem;
    color: var(--text);
}

.day-strip .track {
    fill: var(--surface-raised);
}

@media (min-width: 1100px) {
    .clock-card .live-timer {
        font-size: 4.2rem;
    }
}

/* Printable documents look like a sheet on screen, as in the print mockup. Print output is unchanged. */
@media screen {
    main.document {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 36px 44px;
        margin: 24px auto 40px;
        box-shadow: 0 10px 30px rgba(4, 9, 11, 0.08);
    }
}

/* On a phone the sheet frame would take the width the table needs: the document sits on the page like any other. */
@media screen and (max-width: 719px) {
    main.document {
        padding: 24px 16px 40px;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* === Formulare, Buttons, Upload und Status: einheitlich und ruhig ================= */

:root {
    --control-h: 40px;
    --control-radius: 12px;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent);
}

label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    margin-bottom: 6px;
}

input,
select,
textarea {
    width: 100%;
    min-height: var(--control-h);
    padding: 0 14px;
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

textarea {
    padding: 12px 14px;
}

select {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d6469' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    cursor: pointer;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: var(--focus-ring);
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-height: 0;
    accent-color: var(--primary);
}

/* Upload: a calm drop area instead of the browser default. */
/* iOS Safari sizes date fields by their native width. This keeps them inside their card. */
input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
}

input[type="file"] {
    min-height: 0;
    padding: 12px;
    border-style: dashed;
    background-color: var(--surface-raised);
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 0 14px;
    height: 36px;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}

/* Buttons: one height, one radius, clear primary and secondary. */
button {
    min-height: var(--control-h);
    padding: 0 20px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--control-radius);
    border: 1px solid transparent;
    transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

button.primary {
    background: var(--action-in);
    border-color: var(--action-in);
    color: var(--action-in-text);
}

button.primary:hover,
a.button:not(.secondary):hover {
    filter: brightness(1.06);
}

button.secondary {
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
    box-shadow: none;
}

button.secondary:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Forms in cards: even rhythm between fields. */
form.stack {
    gap: 16px;
}

/* Collapsible sections: a row with a chevron, no browser marker. */
details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    cursor: pointer;
    list-style: none;
}

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

details > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s var(--ease);
}

details[open] > summary::after {
    transform: rotate(-135deg);
}

/* Status: a colored pill with a dot, not a box. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 0;
    padding: 6px 14px 6px 12px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--status-color, var(--muted)) 14%, transparent);
    color: var(--status-color, var(--muted));
}

.status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.status.working {
    --status-color: var(--status-working);
}

.status.on_break {
    --status-color: var(--status-break);
}

.status.out {
    --status-color: var(--status-out);
}

.status .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.status strong {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    color: inherit;
}

/* The clock card has its own status rules; they follow the same pill style. */
.clock-card .status {
    margin: 0;
    padding: 6px 14px 6px 12px;
    background: color-mix(in srgb, var(--status-color, var(--muted)) 14%, transparent);
    border: 0;
    border-radius: 999px;
}

.clock-card .status strong {
    font-size: 0.95rem;
}

/* Chevron: only the two visible sides, no leftover box from older rules. */
details > summary::after {
    border-top: 0;
    border-left: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

details[open] > summary::after {
    content: "";
}

/* Inputs take the normal weight, not the bold label weight they inherit through "font: inherit". */
input,
select,
textarea {
    font-weight: 400;
}

/* Section titles inside collapsible cards match the other card headings. */
details > summary h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    margin: 0;
}

/* Certificate upload in the absence table: file field on its own line, button under it, no truncated file name. */
table.data .cert-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

table.data .cert-cell .download {
    margin: 0;
}

table.data .cert-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 320px;
}

table.data .cert-cell input[type="file"] {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 0.9rem;
}

table.data .cert-upload button {
    min-height: 40px;
    padding: 0 16px;
}

/* Badges as soft pills, like the status pills. */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 0;
    background: var(--teal-soft);
    color: var(--status-working);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.badge.muted {
    background: color-mix(in srgb, var(--muted) 14%, transparent);
    color: var(--muted);
}

/* Desktop width: content uses the screen, forms and printed documents keep a readable measure. */
@media (min-width: 1100px) {
    main {
        max-width: 1640px;
    }

    main.narrow {
        max-width: 520px;
    }

    main.document {
        max-width: 1040px;
    }
}

/* Two fields side by side on the desktop, one column on the phone. */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 720px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Admin stamp page: the employee list stays in view while the stamp list scrolls. */
@media (min-width: 1100px) {
    .admin-split aside {
        position: sticky;
        top: 24px;
    }
}

/* Content and footer under the top bar. The footer stays at the bottom of short pages. */
.page {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.page > .shell {
    flex: 1 0 auto;
}

/* Desktop: the top bar stays, only the area below it scrolls (content and footer), so the scrollbar starts below the bar
   and shows only when the page is longer than the window. Phones keep the normal page scroll: an inner scroll area there
   would stop the browser bar from hiding. Print is left alone (screen only). */
@media screen and (min-width: 1100px) {
    html,
    body {
        height: 100%;
    }

    body {
        min-height: 0;
        overflow: hidden;
    }

    .page {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
}


/* Cancel form in the stamp table: the note field takes the free width, the button stays beside it. */
table.data .cancel-form .row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 320px;
}

table.data .cancel-form .row-actions input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

table.data .cancel-form .row-actions button {
    flex: 0 0 auto;
}

/* Phone: data tables become stacked rows, each cell shows its column name. No sideways scrolling of the page. */
@media (max-width: 719px) {
    table.data thead,
    table.day-table thead {
        display: none;
    }

    table.data,
    table.data tbody,
    table.data tr,
    table.data td,
    table.day-table,
    table.day-table tbody,
    table.day-table tr,
    table.day-table td {
        display: block;
        width: 100%;
    }

    table.data tr,
    table.day-table tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
    }

    table.data td,
    table.day-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        padding: 4px 0;
        border: 0;
        text-align: right;
        white-space: normal;
        word-break: normal;
    }

    table.data td::before,
    table.day-table td::before {
        content: attr(data-label);
        font-family: var(--font-mono);
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
        flex: 0 0 auto;
    }

    table.data td:empty::before,
    table.day-table td:not([data-label])::before {
        content: none;
    }

    /* A form takes the full width, so it moves below the column name instead of running out of the card. */
    table.data td {
        flex-wrap: wrap;
    }

    table.data td > form,
    table.data td > .row-actions {
        width: 100%;
    }

    table.data td > form.inline-row select {
        flex: 1 1 auto;
    }

    table.data .cancel-form .row-actions {
        min-width: 0;
    }

    table.day-table tfoot tr {
        display: flex;
        justify-content: space-between;
        padding: 12px 0 0;
        border-top: 1px solid var(--text);
        border-bottom: 0;
    }

    table.day-table tfoot td {
        display: inline;
        border-top: 0;
    }

    table.day-table tfoot td::before {
        content: none;
    }
}

/* Phone rows grow with their content: the desktop row height (52 px) would make stacked cells overlap. */
@media (max-width: 719px) {
    table.data tbody tr,
    table.data tr,
    table.day-table tr {
        height: auto;
    }

    table.day-table tfoot td:first-child {
        white-space: nowrap;
    }
}

/* Cancel: a small link per stamp; the note field opens only when it is needed. */
.cancel-details > summary {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}

.cancel-details > summary::after {
    display: none;
}

.cancel-details[open] > summary {
    margin-bottom: 8px;
}

.cancel-details .cancel-form .row-actions {
    min-width: 0;
}

table.day-table tfoot td:last-child {
    margin-left: auto;
}

/* Day total on the phone: label takes the free width, the sum sits at the right edge. */
@media (max-width: 719px) {
    table.day-table tfoot td:first-child {
        flex: 1 1 auto;
    }
}

/* Messages: one calm style for success, warning and error, in the design tokens. The text stays beside the dot (no wrap):
   a long text directly in the alert would otherwise drop below the dot as one block. Alerts with a form wrap, so the
   button can move to its own line. */
.alert {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 6px 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--error-text) 28%, transparent);
    border-radius: 14px;
    background: var(--error-bg);
    color: var(--error-text);
    font-size: 0.95rem;
    line-height: 1.45;
}

.alert:has(> form) {
    flex-wrap: wrap;
}

.alert::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 0.45em;
    border-radius: 50%;
    background: currentColor;
}

.alert p {
    flex: 1 1 240px;
    margin: 0;
}

.alert.success {
    border-color: color-mix(in srgb, var(--success-text) 28%, transparent);
    background: var(--success-bg);
    color: var(--success-text);
}

.alert.warning {
    border-color: color-mix(in srgb, var(--warning-text) 30%, transparent);
    background: var(--warning-bg);
    color: var(--warning-text);
}

.alert.warning p {
    margin: 0;
}

.alert.warning form {
    flex: 0 0 auto;
    margin: 0;
}

/* Field message under an input: same colour as the alert, no browser bubble. */
.field-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--error-text);
}

.field-error::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--error-text);
}

/* Stamp correction: the button in the table and the dialog, in the design tokens. */
.correct-open {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--status-working);
    background: color-mix(in srgb, var(--status-working) 14%, transparent);
    border: 0;
    border-radius: 10px;
}

.correct-dialog {
    width: min(540px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 64px rgba(4, 9, 11, 0.28);
}

.correct-dialog::backdrop {
    background: rgba(4, 9, 11, 0.45);
}

.correct-dialog form {
    padding: 24px;
    gap: 16px;
}

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

.dialog-head h2 {
    margin: 0;
    font-size: 1.2rem;
}

.dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
}

.dialog-close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.dialog-hint {
    margin: 0;
    font-size: 0.9rem;
}

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

/* Phone: the dialog rises from the bottom edge. */
@media (max-width: 719px) {
    .correct-dialog {
        inset: auto 0 0 0;
        width: 100%;
        max-width: none;
        max-height: 92vh;
        margin: 0;
        border-radius: 18px 18px 0 0;
    }
}

/* Dialog title: the same heading face as the cards, not the mono section label. */
.dialog-head h2 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* Phone tables: the first cell is the card title (bold, left, no label), the others are label and value pairs. */
@media (max-width: 719px) {
    table.data td:first-child {
        justify-content: flex-start;
        font-weight: 600;
        text-align: left;
    }

    table.data td:first-child::before {
        content: none;
    }
}

/* Stempelübersicht: the page heading stays the same when an employee is opened; the name is the subheading. */
.employee-name {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.employee-name {
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
}

/* Team calendar: a tile per day that links to the day, a dot per absent person, the chosen day listed below. */
.eyebrow {
    margin: 0 0 4px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

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

.cal-head h1 {
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.cal-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cal-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}

.cal-arrow:hover {
    background: var(--surface-raised);
}

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

.cal-today {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--teal-soft);
    color: var(--status-working);
    font-weight: 600;
    text-decoration: none;
}

.cal-card {
    padding: 14px;
}

.cal-weekdays,
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.cal-weekdays {
    margin: 0 0 8px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.cal-grid {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cal-day a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    min-height: 58px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--surface-raised);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.cal-day a:hover {
    border-color: var(--border);
    background: var(--surface);
}

.cal-day.weekend a {
    color: var(--muted);
}

.cal-day.today a {
    box-shadow: inset 0 0 0 2px var(--status-working);
}

.cal-day.today .cal-num {
    color: var(--status-working);
    font-weight: 700;
}

.cal-day.selected a {
    border-color: var(--action-in);
    background: var(--action-in);
    color: var(--action-in-text);
}

.cal-day.selected .cal-num {
    color: var(--action-in-text);
}

.cal-day.selected .cal-dot {
    background: var(--action-in-text);
}

.cal-num {
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cal-dots {
    display: flex;
    gap: 4px;
    min-height: 8px;
}

.cal-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-break);
}

.cal-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 0.85rem;
}

.cal-panel {
    margin-top: 16px;
}

.cal-panel h2 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
}

.cal-people {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cal-people li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cal-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--teal-soft);
    color: var(--status-working);
    font-size: 0.8rem;
    font-weight: 700;
}

.cal-person {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Phone: the same grid, tighter tiles. */
@media (max-width: 719px) {
    .cal-day a {
        min-height: 50px;
        padding: 6px;
    }

    .cal-num {
        font-size: 0.92rem;
    }

    .cal-arrow {
        width: 38px;
        height: 38px;
    }

    .cal-today {
        height: 38px;
        padding: 0 10px;
    }
}

/* Phone: the employees become a row of chips under the page header, so the content starts near the top. */
@media (max-width: 719px) {
    .emp-list {
        padding: 12px;
    }

    .emp-list h2 {
        display: none;
    }

    .emp-list ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .emp-link {
        padding: 8px 14px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
    }

    .emp-link.current {
        border-color: var(--status-working);
    }
}

/* Page subline: the same text and spacing on the stamp overview's start and employee pages, so nothing jumps. */
.page-sub {
    margin: 0 0 16px;
}

/* Location in the top bar: group / page / employee, always visible while scrolling (the top bar is sticky). */
.crumbs {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    color: color-mix(in srgb, var(--paper) 70%, transparent);
    font-size: 0.9rem;
    white-space: nowrap;
}

.crumbs span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.crumbs [aria-current="page"] {
    color: var(--paper);
    font-weight: 600;
}

.crumbs .sep {
    font-style: normal;
    opacity: 0.5;
}

@media (max-width: 719px) {
    .crumbs {
        order: 3;
        flex: 0 0 100%;
        justify-content: flex-start;
        padding-top: 4px;
    }
}

.app-version {
    margin-left: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted);
}

/* Chips keep the same weight when one is selected, so the row does not reflow. */
.emp-link,
.emp-link.current {
    font-weight: 600;
}


/* Employee stamp overview: one row per day, the day's stamps open below it. */
.day-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.day-group {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.day-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    min-height: 56px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
}

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

.day-date {
    min-width: 96px;
    font-weight: 600;
}

.day-span {
    order: 1;
    flex: 1 1 180px;
    font-variant-numeric: tabular-nums;
}

.day-span .missing {
    color: var(--warning-text);
    font-weight: 600;
}

.day-break {
    order: 2;
    min-width: 96px;
    text-align: right;
    font-size: 0.9rem;
    color: var(--muted);
}

.day-hours {
    order: 3;
    min-width: 64px;
    text-align: right;
    font-weight: 700;
}

.day-stamps {
    margin: 0;
    padding: 0 14px 6px;
    list-style: none;
    border-top: 1px solid var(--border);
}

.stamp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.stamp:last-child {
    border-bottom: 0;
}

.stamp-time {
    min-width: 52px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.stamp-kind {
    min-width: 150px;
    font-weight: 600;
}

.stamp.cancelled .stamp-kind {
    color: var(--muted);
    font-weight: 500;
    text-decoration: line-through;
}

.stamp-meta {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 0.9rem;
}

/* Actions side by side: the correction button first, the cancel link right next to it. */
.stamp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-left: auto;
}

.stamp-actions .correct-open {
    flex: 0 0 auto;
}

.stamp-actions .cancel-details {
    flex: 0 1 auto;
}

.stamp-actions .cancel-details[open] {
    flex: 1 0 100%;
}

.day-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 14px 4px 0;
    padding-top: 12px;
    border-top: 1px solid var(--text);
    font-weight: 700;
}

.day-hint {
    margin: 0 0 14px;
    font-size: 0.9rem;
}

/* Phone: the day row wraps into two lines, the stamp actions sit in a row below the stamp. */
@media (max-width: 719px) {
    .day-row {
        padding: 10px 12px;
    }

    .day-date {
        min-width: 0;
        flex: 1 1 auto;
    }

    .day-hours {
        order: 1;
        min-width: 0;
    }

    .day-span {
        order: 2;
        flex: 1 1 60%;
    }

    .day-break {
        order: 3;
        min-width: 0;
        text-align: left;
    }

    .stamp-kind {
        min-width: 0;
        flex: 1 1 auto;
    }

    .stamp-actions {
        width: 100%;
        margin-left: 0;
    }
}

.day-row::after {
    order: 9;
}

@media (max-width: 719px) {
    .day-row::after {
        order: 2;
    }
}

/* Print page: the month choice and the buttons share one line, aligned at the bottom of the field. */
.print-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin: 0 0 14px;
}

.month-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin: 0 0 18px;
}

.month-field {
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
}

.month-field select {
    width: 100%;
}

.month-actions {
    display: flex;
    gap: 10px;
}

.month-actions button {
    height: var(--control-h);
}

/* Both buttons of the print toolbar take the field height, so they line up with the month field. */
.month-form .month-actions button {
    height: var(--control-h);
    min-height: var(--control-h);
    padding: 0 18px;
}

/* Document drop zones on the report page. */
.documents h3 { margin: 16px 0 6px; font-size: 0.95rem; }
.drop-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    border: 2px dashed var(--border);
    border-radius: var(--control-radius);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.drop-area.dragging,
.drop-area:hover { border-color: var(--status-working); background: color-mix(in srgb, var(--status-working) 8%, transparent); }
.drop-area input[type=file] { max-width: 100%; }
.badge.warn { background: color-mix(in srgb, #d97706 18%, transparent); color: inherit; }

/* Keys and codes shown for copying, in the portal. */
input.mono {
    font-family: var(--font-mono);
}

/* Pages without the sidebar (sign-in, portal): a centred column of readable width instead of the full desktop width. The
   portal menu lines up with that column. Phones: the menu label is left out (the page shows it as a badge), so the
   three links fit without a hidden sideways scroll. */
@media (min-width: 1100px) {
    body:not(.framed) main {
        max-width: 1180px;
    }

    body:not(.framed) main.narrow {
        max-width: 520px;
    }

    body:not(.framed) main.document {
        max-width: 1040px;
    }

    body:not(.framed) .menu {
        padding-inline: max(var(--gut), calc((100% - 1180px) / 2 + var(--gut)));
    }
}

@media (max-width: 719px) {
    .menu .menu-label {
        display: none;
    }
}