/* Zeitwerk-eigenes CSS (grundwerk-ui-Adoption, seit Z3 auf grundwerk-ui
 * 0.1.1).
 *
 * Alles Geteilte kommt jetzt aus grundwerk.css (siehe templates/base.html/
 * base_public.html, {% block extra_css %} lädt diese Datei danach - ihre
 * Regeln liegen bewusst außerhalb jedes @layer, damit sie grundwerk-ui
 * gemäß dessen eigener Cascade-Layer-Regel ("ein Projekt schlägt jede
 * Layer-Regel ohne !important") immer überstimmen können, siehe
 * ~/code/grundwerk/ui/docs/css-architecture.md). Diese Datei enthält nur
 * noch echte Zeitwerk-Fachlichkeit ohne Entsprechung in grundwerk-ui
 * (Stempeluhr-Kachel, Monatskalender, Übersichtsraster,
 * Benachrichtigungsliste, unvollständige Stundenzettel-Zeile) - siehe
 * css-architecture.md's Inventar-Tabelle, Abschnitt "zeitwerk base.css,
 * time-tracking domain". Jede Regel hier benutzt ausschließlich
 * grundwerk-ui-Tokens (layers/tokens.css), keine hartkodierten Farben.
 *
 * Die Z2-Pilot-Lücken (.search-input, main form[method="get"],
 * .inline-form, .auth-shell/.login-card/.login-brand/.provider-list/
 * .breakglass, .badge-count) sind mit grundwerk-ui 0.1.1 alle geschlossen
 * (layers/components/{filter,toolbar,auth,badge}.css) und hier entfernt -
 * siehe docs/ui.md und CLAUDE.md für die Historie.
 *
 * War vorher static/ui/css/base.css (1747 Zeilen, komplett gelöscht) -
 * aktuelle Zeilenzahl siehe Aufgabenbericht.
 */

/* ------------------------------------------------------------------------
 * Zeitwerk-Fachlichkeit: Übersichtsraster (kein grundwerk-ui-Vorbild - die
 * Startseite zeigt mehrere volle .card-Abschnitte nebeneinander,
 * Stempeluhr/Zeitkonto/Team/HR/Betriebsrat/Benachrichtigungen). */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

@media (min-width: 40rem) {
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    }
}

.dashboard-grid > .card {
    margin-bottom: 0;
}

.open-items {
    margin: var(--space-sm) 0;
    padding-left: 1.25rem;
}

/* Benachrichtigungsliste (dashboard/notifications.html): kartenartige
 * Zeilen statt reiner Aufzählung. */
.notification-list {
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.notification-list > li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.notification-list > li.unread {
    border-left: 3px solid var(--color-primary);
}

.notification-list p {
    margin: 0.2rem 0 0;
    font-size: var(--font-size-sm);
}

/* Markiert eine unvollständige Zeile im Stundenzettel
 * (reports/timesheet.html) - Warnung, kein Fehler. */
tr.row-incomplete td {
    background: var(--color-warning-bg);
}

/* ------------------------------------------------------- Kalender/Monat */
.month-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.month-calendar-weekday {
    background: var(--color-surface-alt);
    color: var(--color-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.4rem 0.2rem;
}

.month-calendar-day {
    background: var(--color-surface);
    min-height: 5.5rem;
    padding: 0.35rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.month-calendar-day-empty {
    background: var(--color-surface-alt);
}

.month-calendar-daynum {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.month-calendar-day-today .month-calendar-daynum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.month-calendar-minutes {
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* ------------------------------------------------------- Stempeluhr-Kachel */
.clock-widget {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
}

.clock-widget-status {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.clock-widget-worked {
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.clock-widget-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.clock-widget-actions .button,
.clock-widget-actions .button-secondary {
    padding: 0.85rem 1.6rem;
    font-size: var(--font-size-base);
}

.clock-widget-pending {
    color: var(--color-warning-text);
    font-size: var(--font-size-xs);
}

/* Arbeitsmodus-Auswahl im Stempeluhr-Widget (dashboard/home.html) - eine
 * schlichte, per Tastatur bedienbare Radiogruppe (natives <fieldset>/
 * <input type="radio">, kein Custom-Widget - CSP erlaubt kein Inline-JS für
 * eine ARIA-Radiogroup-Nachbildung). */
.work-mode-chooser {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    margin: 0;
    padding: 0;
    border: none;
}

.work-mode-chooser legend {
    width: 100%;
    padding: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-muted);
}

.work-mode-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

@media (max-width: 48rem) {
    .month-calendar-day {
        min-height: 3.5rem;
    }
}

/* Prev/next month buttons stay a single group instead of one of them
 * wrapping onto its own line under the month label (mobile UI review). */
.calendar-nav-buttons {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: nowrap;
}

/* A long h1 (e.g. an admin's email address in "Mitarbeitende verknüpfen –
 * admin@…") breaks its own word instead of overflowing the page on a
 * narrow screen (mobile UI review) - grundwerk.css's own `.page-header
 * h1` (layers/components/page-header.css) has no opinion on this. */
.page-header h1 {
    overflow-wrap: anywhere;
}

/* CSS-only "more to scroll" cue on the sidebar nav (mobile UI review) -
 * two local gradients fade content near each edge, two scroll-attached
 * radial gradients only become visible once there's actually content
 * scrolled past that edge (the well-known "scroll shadow" technique, no
 * JS needed). */
.sidebar-nav {
    background:
        linear-gradient(var(--color-surface) 30%, transparent) top,
        linear-gradient(transparent, var(--color-surface) 70%) bottom,
        radial-gradient(farthest-side at top, var(--color-border-strong), transparent) top,
        radial-gradient(farthest-side at bottom, var(--color-border-strong), transparent) bottom;
    background-repeat: no-repeat;
    background-color: var(--color-surface);
    background-size: 100% 2.5rem, 100% 2.5rem, 100% 0.9rem, 100% 0.9rem;
    background-attachment: local, local, scroll, scroll;
}

/* A hand-written `<form class="filter-bar">`'s `<label>` and its
 * `<select>`/`<input>` are two separate flex children of `.filter-bar`
 * (grundwerk.css's own `.filter-bar { display: flex; flex-wrap: wrap;
 * }`, layers/components/filter.css) - on a narrow screen the wrap can
 * land between the two, so a label ends one line and its own control
 * starts the next ("zig-zag", mobile UI review). Wrapping each pair in
 * `.filter-field` (every hand-written filter form below `filter-bar`'s
 * own reset/submit block does this now) keeps label+control together as
 * one flex item that only ever wraps as a unit. */
.filter-field {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    /* A flex item's default `min-width` is `auto` (its content's
     * min-content size), which for a <select> is roughly its widest
     * <option>'s width - grundwerk.css's own `.filter-bar select {
     * max-width: 100% }` (layers/components/filter.css) has no effect
     * against that default, so a select with a long option label (e.g.
     * "§3 – Tägliche Höchstarbeitszeit überschritten", compliance's rule
     * filter) forced `.filter-field` - and with it `.filter-bar`, and the
     * whole page - to overflow horizontally on a phone instead of
     * wrapping/shrinking (mobile UI review: 390px viewport, up to 765px
     * scrollWidth on /verstoesse/). `min-width: 0` here and on the
     * select/input below opts both back into shrinking to the available
     * width, same fix as the analogous flex-overflow trap documented on
     * `.filter-bar-actions`' sibling rules in grundwerk.css itself. */
    min-width: 0;
    max-width: 100%;
}

.filter-field select,
.filter-field input {
    min-width: 0;
}

/* A concrete `*_table.html` partial's final, unlabelled `<th></th>`
 * column is its row actions (Bearbeiten/Löschen/Details, docs/ui.md's
 * "Component conventions") - on a phone, `.table-scroll`'s horizontal
 * scroll can bury it off-screen with no visual hint there's more to the
 * right (mobile UI review: "row actions reachable"). A `position:
 * sticky` last column was tried here first but doesn't work: the bare
 * `<table>` element itself has `overflow: hidden` (layers/base.css, for
 * its own rounded corners), which makes the *table* - not `.table-
 * scroll`, the div that actually scrolls - the nearest "scroll
 * container" a sticky descendant positions against, so `right: 0` sticks
 * to the table's own edge instead of the visible scrolled viewport and
 * has no visible effect. A horizontal scroll-shadow cue on `.table-
 * scroll` itself (same technique `.sidebar-nav` above uses, just
 * left/right instead of top/bottom) doesn't have that problem - it's the
 * scrolling element painting its own background, no descendant
 * positioning involved - and still tells a user there's more to scroll
 * to, actions included. */
.table-scroll {
    background:
        linear-gradient(to right, var(--color-surface) 30%, transparent) left,
        linear-gradient(to left, var(--color-surface) 30%, transparent) right,
        radial-gradient(farthest-side at left, var(--color-border-strong), transparent) left,
        radial-gradient(farthest-side at right, var(--color-border-strong), transparent) right;
    background-repeat: no-repeat;
    background-color: var(--color-surface);
    background-size: 2rem 100%, 2rem 100%, 0.9rem 100%, 0.9rem 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ---------------------------------------------- "Mein Zeitkonto"-Tabelle */
/* Stacked card layout below `--my-month-breakpoint` so "Datum"/"Saldo"
 * stay visible without horizontal scrolling on a phone (mobile UI review -
 * the plain table previously hid everything but the first couple of
 * columns off-screen). Each `<td>` gets its column header back via
 * `data-label` (set in dashboard/_my_month.html), CSS-only (`content:
 * attr()`), same approach `grundwerk.css` itself has no opinion on since
 * the concrete `*_table.html` partials keep a bare `<table>` (docs/ui.md's
 * "Component conventions"). */
@media (max-width: 40rem) {
    .my-month-table thead {
        display: none;
    }

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

    .my-month-table tr {
        margin-bottom: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }

    .my-month-table td {
        display: flex;
        justify-content: space-between;
        gap: var(--space-md);
        padding: 0.2rem 0;
        border: none;
        text-align: right;
    }

    .my-month-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-muted);
        text-align: left;
    }
}

/* A detail card's trailing action form (e.g. "Löschen" under the
   terminal/NFC-tag detail grid) needs breathing room from the grid
   above it - otherwise the button sits flush against the last row. */
.card > .detail-grid + form {
  margin-top: var(--space-md);
}

/* Numbered setup steps with inline fields (NFC tag programming guide). */
.setup-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-left: 1.5rem;
  list-style: decimal;
}

.setup-steps > li::marker {
  font-weight: 600;
}

.setup-steps > li > * + * {
  margin-top: var(--space-xs);
}