/* ============================================================================
   IriCrafting — Ergänzungen zum KRT Design System.
   Nur Layout: Kopfzeile, Seitengerüst, Formularzeilen, ein paar Tabellen-
   Feinheiten. Farben, Typografie, Abstände und Komponenten kommen aus
   colors_and_type.css + krt-components.css — hier werden keine neuen Farben
   erfunden, ausschließlich Tokens benutzt.
   ============================================================================ */

:root {
    /* Der fixe Footer verdeckt sonst das Seitenende. Ab 768px stapelt das
       Design System seine beiden Zeilen untereinander (krt-components.css),
       dann braucht er gut das Dreifache an Platz. */
    --krt-footer-height: 56px;
    --app-max: 1200px;
}

@media (max-width: 768px) {
    :root { --krt-footer-height: 150px; }
}

/* ------------------------------------------------------------- Grundgerüst */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 4000;
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-bg-black);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}
.skip-link:focus { left: 0; }

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

.app-header {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg-dark-gray);
    border-bottom: var(--border-heading);
}
body.admin-mode .app-header { border-bottom-color: var(--color-accent-dark); }

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch-target);
    color: var(--color-white);
    text-decoration: none;
}
/* Die Wortmarke sitzt im Logo — unter ~36px ist sie nicht mehr lesbar. */
.app-brand-mark { width: 38px; height: 38px; object-fit: contain; }
.app-brand-text {
    font-family: var(--font-headline);
    font-weight: var(--fw-thin);
    text-transform: uppercase;
    letter-spacing: var(--tracking-overline);
    font-size: 0.95rem;
}
.app-brand-text strong {
    font-weight: var(--fw-black);
    color: var(--color-primary);
    margin-left: 0.4em;
}

.app-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}
.app-nav > a:not(.btn) {
    color: var(--color-gray-1);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-2) 0;
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
}
.app-nav > a:not(.btn):hover { color: var(--color-primary); }
.app-nav-form { display: inline-flex; margin: 0; }

.app-main {
    max-width: var(--app-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
    padding-bottom: calc(var(--krt-footer-height) + var(--space-8));
}

/* ------------------------------------------------------------- Seitenkopf */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.page-head h1 { margin-bottom: var(--space-2); }
.page-lede { color: var(--color-gray-1); margin: 0; max-width: var(--measure); }
.page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.hint {
    color: var(--color-gray-2-text);
    font-size: var(--fs-sm);
    margin: 0 0 var(--space-3);
    max-width: var(--measure);
}
/* Hinweis direkt unter einem Eingabefeld — kleiner und enger angebunden als
   der Abschnittshinweis. */
.field-hint {
    font-size: var(--fs-xs);
    margin: var(--space-2) 0 0;
}

/* --------------------------------------------------------------- KPI-Reihe */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-6);
}
.kpi-row .kpi-sub { font-size: var(--fs-2xs); color: var(--color-gray-2-text); font-weight: 300; }

.progress-line {
    position: relative;
    height: 26px;
    background-color: var(--color-surface-input);
    border: var(--border-hairline);
    margin-bottom: var(--space-6);
    overflow: hidden;
}
.progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background-color: rgba(35, 158, 51, 0.35);
    border-right: 1px solid var(--color-success);
}
.progress-label {
    position: relative;
    display: block;
    line-height: 26px;
    padding: 0 var(--space-3);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-white);
}

/* ---------------------------------------------------------------- Tabellen */

th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nowrap, th.nowrap { white-space: nowrap; }
td.row-actions { text-align: right; white-space: nowrap; }
td.members { line-height: 2; }
td.members .chip { margin-right: 4px; }

.row-sub {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: 300;
    color: var(--color-gray-2-text);
    text-transform: none;
    letter-spacing: 0;
}

.item-table th[scope="row"] { font-weight: var(--fw-bold); color: var(--color-white); }
.item-table .chip { margin-top: 4px; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --------------------------------------------------------------- Formulare */

.wish-form { display: flex; flex-direction: column; gap: var(--space-4); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 var(--space-4);
}
/* Eingaben füllen ihre Spalte — sonst steht ein schmales Handle-Feld neben
   einem breiten Schiff-Dropdown. */
.form-grid input,
.form-grid select,
.wish-form textarea {
    width: 100%;
    box-sizing: border-box;
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.card-count {
    font-family: var(--font-body);
    font-weight: var(--fw-thin);
    font-size: var(--fs-2xs);
    color: var(--color-gray-2-text);
    text-transform: none;
    letter-spacing: 0;
    margin-left: var(--space-2);
}

.wish-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.wish-row {
    display: grid;
    grid-template-columns: minmax(220px, 3fr) 90px minmax(140px, 2fr) auto;
    gap: var(--space-2);
    align-items: start;
}
.wish-row-item { position: relative; min-width: 0; }
.wish-row input { width: 100%; box-sizing: border-box; }
.wish-row .btn { align-self: stretch; }

@media (max-width: 760px) {
    .wish-row {
        grid-template-columns: 1fr 90px;
        grid-template-areas: "item qty" "note note" "act act";
        padding-bottom: var(--space-3);
        border-bottom: var(--border-hairline);
    }
    .wish-row-item { grid-area: item; }
    .wish-row-qty  { grid-area: qty; }
    .wish-row-note { grid-area: note; }
    .wish-row .btn { grid-area: act; justify-self: end; }
}

.admin-form { max-width: 420px; }

.lock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
}
.lock-grid .card { display: flex; flex-direction: column; }
.lock-grid .card form { margin-top: auto; }
.lock-grid .hint { margin-bottom: var(--space-4); }

/* -------------------------------------------- Combobox (JS-Aufwertung) ---- */
/* Basis ist ein <input list="…"> — ohne JavaScript übernimmt die native
   Datalist. Mit JavaScript wird daraus die .krt-combobox des Design Systems. */

.picker-wrap { position: relative; }

/* Filterleiste über dem Suchfeld. Wird von app.js nur dort eingehängt, wo die
   Gruppe überhaupt mehr als einen Wert hergibt. */
.picker-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.picker-filters .chip-select { max-width: 100%; }

.picker-hint {
    display: block;
    font-size: var(--fs-2xs);
    color: var(--color-gray-2-text);
    margin-top: 2px;
    min-height: 1em;
}
.picker-hint.is-unresolved { color: var(--color-danger-text); }

/* ------------------------------------------------------------ Fehlerseite */

.error-page { text-align: center; padding: var(--space-8) var(--space-4); }
.error-page .error-code {
    display: block;
    font-family: var(--font-headline);
    font-weight: var(--fw-black);
    font-size: 4rem;
    line-height: 1;
    color: var(--color-gray-3);
}
.error-page h1 { margin-top: var(--space-4); }
.error-page p { margin: 0 auto var(--space-6); }

/* ------------------------------------------------------------- Übergabe --- */

.handover {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}
.handover-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-1);
    margin: 0;
    font-weight: var(--fw-bold);
}
.handover-qty { width: 5.5rem; }

/* --------------------------------------------------------------- Druck ---- */

.no-print { }
@media print {
    .app-header, .krt-footer, .krt-fankit-band, .no-print { display: none !important; }
    .app-main { padding: 0; max-width: none; }
}