/* ============================================================================
   tracty — Campaign Talent & Budget Tracker — project-specific styles
   ----------------------------------------------------------------------------
   Loaded AFTER kk.css. Consumes tokens only: never redefines one, never
   restates a literal a token already covers (agents/rules/frontend.md §2).

   Everything here is first-use-in-this-project. Nothing is a candidate for
   promotion into kk.css yet — that is a second project plus an ADR
   (agents/rules/frontend.md §5).

   NON-NEGOTIABLE, upheld throughout: no accent colour, no error red, no
   success green; border-radius 0; no box-shadow; inputs use outline, not
   border; input font-size stays 1rem. The FR-8 / FR-17 / FR-18 colour coding
   of the workbook is delivered here with ink washes, hairlines and chips
   (SPEC-0001 §8.3).

   THE ONE EXCEPTION: group colour ([REQ-0002], [ADR-0004], [SPEC-0002] §8).
   ADR-0004 records a deliberate, scoped exception to agents/rules/frontend.md
   §3 — a per-group colour fills the group's headline row on the Budgetübersicht
   (both blocks) and on the Talente page, and nowhere else. The colour itself is
   per-record data and is applied via element.style in JS (ADR-0004 §3.3), never
   from a token; the rules below are only geometry (the swatch grid, the
   .group-head bar) and stay tokens-only. Every other colourless rule still
   stands — this is one exception, not a licence.
   ========================================================================= */

/* ── Header corner: the signed-in user (display only, security.md §6) ── */
.site-user {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--kk-font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--kk-text-muted);
}

.site-user__link {
    color: var(--kk-text-muted);
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--kk-hairline);
    transition: color 0.15s, border-color 0.15s;
}

@media (hover: hover) and (pointer: fine) {
    .site-user__link:hover { color: var(--kk-ink); border-bottom-color: var(--kk-ink); }
}

@media (max-width: 900px) {
    .site-user { display: none; }
}

/* ── Project sub-nav — the row directly under the header ──
   First use in this project (frontend.md §5 step 1). The header carries the
   estate-wide "Projekte" link; the three views of the selected project read
   one level below it in their own row. Links reuse kk.css's .site-nav__link,
   so the active underline and hover behaviour are the header's, unchanged. */
.site-subnav {
    border-bottom: 1px solid var(--kk-ink-10);
}

.site-subnav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 2.5rem;
    min-height: 48px;
    padding: 0.55rem 30px 0.35rem;
}

@media (max-width: 736px) {
    .site-subnav__inner { gap: 0.5rem 1.25rem; padding: 0.55rem 15px 0.35rem; }
}

/* ── Page width ──
   The budget and talent tables carry too many columns for the 760px reading
   measure — they side-scrolled. From tablet width up the page takes 85% of the
   viewport so the tables fit outright. Narrow viewports keep the kk.css
   defaults, where 760px is already wider than the screen. */
@media (min-width: 900px) {
    .page {
        max-width: 85%;
    }
}

/* ── The re-inked spinner ──
   kk.css's .spinner is paper-on-ink, built to sit inside .btn-filled. On the
   paper page background it needs ink strokes instead — same geometry, tokens
   only. */
.spinner.spinner-ink {
    border-color: var(--kk-hairline);
    border-top-color: var(--kk-ink);
}

/* ── The four data-view states (frontend.md §6, SPEC-0001 §8.1) ── */
.state-view {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 2.75rem 0;
    font-family: var(--kk-font-ui);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--kk-text-muted);
}

.state-view-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
}

.state-message {
    max-width: 62ch;
    line-height: 1.65em;
    color: var(--kk-text-strong);
}

/* ── Sub-headline type — the project name under a page title, the modal's
   entity name. Gets the textmarker 'underline' preset in JS. ── */
.page-title.page-subtitle {
    font-family: var(--kk-font-display-alt);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.15em;
    margin-bottom: 0.2rem;
}

/* ── Page-level layout helpers ── */
.page-lead {
    margin-bottom: 2.25rem;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

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

.stack-gap > * + * {
    margin-top: 0.9rem;
}

/* ── Chips: status (FR-8) and row markers (FR-20, FR-22). SPEC-0001 §8.3 ──
   Booked  → filled (ink on paper-text)
   pending → outline (1px hairline, ink text)
   Abgesagt→ muted (muted text, faint outline)
   marker  → solid ink outline, to read apart from a status chip */
.chip {
    display: inline-block;
    font-family: var(--kk-font-ui);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.1;
    padding: 0.28rem 0.5rem;
    outline: 1px solid var(--kk-hairline);
    color: var(--kk-ink);
    white-space: nowrap;
}

.chip-filled {
    background: var(--kk-ink);
    color: var(--kk-paper);
    outline-color: var(--kk-ink);
}

.chip-muted {
    color: var(--kk-text-muted);
    outline-color: var(--kk-hairline-faint);
}

.chip-marker {
    outline-color: var(--kk-ink);
    font-weight: 600;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

/* ── Overview tables: reuse .ov-table / .ov-table-wrap, add numeric alignment,
   group rows, total rows, and the two wash treatments of SPEC-0001 §8.3 ── */
.ov-table td.num,
.ov-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ov-table .row-label td:first-child {
    color: var(--kk-text-strong);
}

.ov-table tr.row-group th {
    text-transform: none;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--kk-ink);
    background: var(--kk-wash);
    border-bottom-color: var(--kk-hairline);
    padding-top: 0.9rem;
}

.ov-table tr.row-total td {
    font-weight: 600;
    border-top: 1px solid var(--kk-hairline);
    border-bottom-color: var(--kk-hairline);
}

.ov-table tr.row-grand-total td {
    font-weight: 600;
    border-top: 2px solid var(--kk-ink);
}

/* A negative Delta (FR-17) and Option lt. Vertrag over Plan (FR-18): the same
   wash kk.css already uses for an invalid field. The number keeps its leading
   minus sign, so the signal is not carried by the wash alone. */
.ov-table td.is-flagged {
    background: var(--kk-wash-strong);
}

.ov-table tbody tr.static-row {
    cursor: default;
}

.ov-table tbody tr.static-row:hover {
    background: transparent;
}

.ov-table caption {
    text-align: left;
    font-family: var(--kk-font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kk-ink-40);
    padding-bottom: 0.6rem;
}

/* ── Read-only computed value inside a form (KSK, FR-9) — visibly not an
   input (read-only-distinction), still on the 52px touch grid ── */
.kk-figure {
    display: flex;
    align-items: center;
    min-height: var(--kk-touch-input);
    padding: 0.85rem 1rem;
    font-family: var(--kk-font-ui);
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--kk-text-strong);
    background: var(--kk-wash);
    outline: 1px solid var(--kk-hairline-faint);
}

/* ── Group blocks on talente.html ── */
.group-block {
    margin-bottom: 2.75rem;
    padding-bottom: 2.75rem;
    border-bottom: 1px solid var(--kk-ink-07);
}

.group-block:last-of-type {
    border-bottom: none;
}

.group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    /* Padded into a bar so the group colour (set inline in JS when the group
       has one — SPEC-0002 §8, FR-7) reads as a filled headline row rather than
       colour crammed against the text. Applied unconditionally so a group with
       no colour (FR-10) sits on the same rhythm; the negative side margins pull
       the bar out to the block edges while the text stays aligned with the
       plan meta and table below. */
    padding: 0.5rem 0.8rem;
    margin: 0 -0.8rem 0.35rem;
}
/* FR-5 — a dark free colour flips the bar's text to white via an inline style
   set in JS. The "Gruppe bearbeiten/löschen" buttons keep their own kk.css
   colours (ink on paper), legible on every palette tint and on a dark free
   colour alike, so nothing more is needed here. */

.group-plan-meta {
    margin-bottom: 1.1rem;
}

/* ── Sonstige-Ausgaben inline editor on projekt.html ── */
.costline-editor .ov-table td {
    vertical-align: middle;
}

.costline-editor input[type="text"] {
    min-height: var(--kk-touch-small);
    padding: 0.5rem 0.7rem;
}

.costline-input-money {
    max-width: 11rem;
}

.costline-editor .ov-table td.num input {
    text-align: right;
}

/* ── Group colour picker (SPEC-0002 §8.2, [ADR-0004] §3.1 carve-out) ──
   The only control in tracty that shows colour. Each swatch's fill is
   per-record data set via element.style in JS (ADR-0004 §3.3) — never a token.
   Everything below is geometry only: the swatches reuse kk.css's
   .choice-group / .choice-option / .is-selected wholesale, so the selected
   state is the same 1px→ink outline the rest of the system uses, which reads
   on top of any fill without relying on the fill itself (color-not-only). */
.colour-swatches {
    gap: 0.5rem;
}

.colour-swatches .choice-option {
    min-width: 0;
    padding: 0.7rem 0.9rem;
    gap: 0.55rem;
}

/* A hair more weight on the selected swatch so the pick is unmistakable when
   it sits on a filled chip. Outline does not affect layout, so nothing shifts. */
.colour-swatches .choice-option.is-selected {
    outline-width: 2px;
}

/* The free-colour hex field, revealed once "Andere Farbe" is picked. Sits on
   its own row under the swatch group; kk.css already styles the text input. */
.colour-other-row {
    flex-basis: 100%;
    margin-top: 0.4rem;
}

/* Standard screen-reader-only clip. First use in this project; no token or
   literal is involved — it is layout, not style. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Detail form inside the modal ── */
.detail-form .form-grid {
    margin-bottom: 1.5rem;
}

.detail-form .submit-area {
    flex-wrap: wrap;
}

.detail-form .danger-slot {
    margin-right: auto;
}

/* ── 403 ── */
.deny-page .notice-block {
    margin-top: 2rem;
}

/* ── iPad landscape: overview tables can use the wider column ── */
@media (orientation: landscape) and (min-width: 1000px) {
    .toolbar {
        margin-bottom: 2rem;
    }
}

/* ── Phones ── */
@media (max-width: 620px) {
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-actions .btn {
        width: 100%;
    }

    .group-head {
        flex-direction: column;
        align-items: flex-start;
    }
}