/* =====================================================================================
   Bereich „Bewertung" – gemeinsame Bausteine.

   Eigene Datei statt eines weiteren Abschnitts in app.css: Der Bereich ist groß, und
   seine Teile (Vorlagen, Erprobungen, Fahrten, Rücknahme, Analyse) haben je eine eigene
   Datei daneben (assess-*.css). Alles hier nutzt die Farbtoken aus app.css und folgt
   damit jedem Theme.
   ===================================================================================== */

/* ---------- Reiterzeile ---------- */
.as-tabrow {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.as-tabrow > .as-tabs { margin-bottom: -1px; }
.as-tabs button.active { border-bottom-color: var(--bg); }
.as-tabrow-actions { padding-bottom: 7px; gap: 6px; flex-wrap: wrap; }
/* „In Entwicklung“ – auf jeder Seite des Bereichs, siehe AssessTabs. */
.as-dev-badge {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px;
    border: 1px dashed color-mix(in srgb, var(--warn) 70%, transparent);
    background: color-mix(in srgb, var(--warn) 9%, transparent); color: var(--warn);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; white-space: nowrap;
}

/* ---------- Ampelfarben ---------- */
.as-c-green  { --as-c: var(--ok); }
.as-c-yellow { --as-c: var(--warn); }
.as-c-red    { --as-c: var(--fault); }
.as-c-neutral { --as-c: var(--text-dim); }

/* Eine Antwort: Kürzel in der Farbe ihrer Stufe, mit getönter Fläche. */
.as-answer {
    display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 1px 8px;
    border-radius: 4px; border: 1px solid color-mix(in srgb, var(--as-c) 55%, transparent);
    background: color-mix(in srgb, var(--as-c) 14%, transparent); color: var(--text);
    font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
}
.as-answer.as-c-neutral { border-color: var(--line-strong); background: var(--panel-inset); color: var(--text-dim); }

/* Farbpunkt vor Text – für Legenden und Listen, in denen ein Chip zu laut wäre. */
.as-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--as-c); flex: none; }

/* ---------- Status-Chips ---------- */
.chip.as-chip { height: 22px; padding: 0 9px; font-size: 10.5px; text-transform: lowercase; }
.chip.as-s-open     { color: var(--fault); border-color: color-mix(in srgb, var(--fault) 60%, transparent); }
.chip.as-s-work     { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.chip.as-s-known    { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.chip.as-s-external { color: var(--info); border-color: color-mix(in srgb, var(--info) 60%, transparent); }
.chip.as-s-closed   { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.chip.as-s-planned  { color: var(--text-dim); }
.chip.as-s-active   { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.chip.as-s-archived { color: var(--text-faint); border-style: dashed; }

/* ---------- Fahrzeug ---------- */
.as-veh { display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.as-veh-id { font-weight: 600; }
.as-veh .sels-note { overflow: hidden; text-overflow: ellipsis; }
.as-veh-gone { color: var(--text-dim); font-style: italic; }

/* ---------- Seitenrahmen ---------- */
.as-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.as-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.as-grid-side { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 1100px) {
    .as-grid-2, .as-grid-side { grid-template-columns: minmax(0, 1fr); }
}

/* Kennzahlen oben auf einer Seite. */
.as-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.as-kpi {
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.as-kpi-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }
.as-kpi-value { font-family: var(--font-ui); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.as-kpi-sub { font-size: 11px; color: var(--text-faint); }
button.as-kpi { cursor: pointer; text-align: left; color: inherit; font: inherit; }
button.as-kpi:hover { border-color: var(--accent); }

/* Filterleiste über Listen. */
.as-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.as-filters .field { min-width: 150px; }
.as-filters .field.grow { flex: 1 1 220px; }

/* Tabellenzeile als Verweis. */
table.data tr.as-link { cursor: pointer; }
table.data td.as-tight { width: 1%; white-space: nowrap; }
table.data td .as-sub { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* Fortschrittsbalken (beantwortet / gesamt). */
.as-progress { display: inline-flex; align-items: center; gap: 8px; min-width: 110px; }
.as-progress-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--panel-inset); border: 1px solid var(--line); overflow: hidden; }
.as-progress-bar > span { display: block; height: 100%; background: var(--accent); }
.as-progress-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); }

/* Leerer Zustand innerhalb eines Panels – kleiner als .empty-state. */
.as-empty { padding: 22px 12px; text-align: center; color: var(--text-dim); font-size: 13px; display: grid; gap: 8px; justify-items: center; }

/* Hinweis- und Warnzeile. */
.as-note { padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-inset); font-size: 12.5px; color: var(--text-dim); }
.as-note.warn { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--text); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.as-note.bad { border-color: color-mix(in srgb, var(--fault) 55%, transparent); color: var(--text); background: color-mix(in srgb, var(--fault) 8%, transparent); }
.as-note ul { margin: 6px 0 0; padding-left: 18px; }

/* Chips in einer Reihe, die umbrechen dürfen (Stände, Teilnehmer). */
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.as-chips .chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 4px; font: inherit; }

/* ---------- Bereit zum Bewerten (AssessCampaign) ----------
   Steht nur, solange in der Erprobung noch niemand bewerten kann. Drei Schritte in einer
   Zeile je Schritt, jeder mit seinem Knopf – erledigte treten zurück. */
.as-ready {
    padding: 10px 12px; border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
    background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.as-ready-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12.5px; margin-bottom: 6px; }
.as-ready-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.as-ready-steps li { display: flex; align-items: center; gap: 9px; min-height: 28px; font-size: 12.5px; }
.as-ready-mark {
    width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
    border: 1px solid var(--warn); color: var(--warn);
}
.as-ready-steps li.done { color: var(--text-dim); }
.as-ready-steps li.done .as-ready-mark { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.as-ready-text { flex: 1 1 auto; min-width: 0; }
.as-ready-steps .btn-sm { flex: none; }

/* Warum auf „Fahrten“ nichts beginnt (AssessRatings). */
.as-why-none ul { margin-top: 4px; }
.as-why-none li + li { margin-top: 2px; }

/* =====================================================================================
   Kompakt – für den ganzen Bereich, Dialoge eingeschlossen.

   Der Bereich ist ein Arbeitswerkzeug mit Listen und Formularen, die man oft und schnell
   durchgeht: dreißig Fahrten, zwanzig Themen, ein Fragebogen mit vierzig Fragen. Die
   Maße des übrigen Portals (38 px hohe Felder, 16 px Innenabstand, 10 px Zeilenabstand in
   Tabellen) sind für Seiten mit wenigen großen Bausteinen gemacht; hier verteilten sie
   eine Liste auf drei Bildschirmhöhen. Die Werte unten halbieren grob die Luft, nicht
   die Schrift.

   Gebunden an .content:has(.as-page) und nicht an .as-page: Die Dialoge des Bereichs
   stehen im Markup oft neben dem Seitenrahmen und nicht in ihm – so gelten die Regeln
   für sie mit, und nur auf den Seiten der Bewertung.
   ===================================================================================== */
.as-page { gap: 10px; }
.content:has(.as-page) .as-grid-2,
.content:has(.as-page) .as-grid-side { gap: 10px; }
.content:has(.as-page) .as-grid-side > .col { gap: 10px !important; }

/* Panels */
.content:has(.as-page) .panel-head { padding: 8px 12px; gap: 10px; }
.content:has(.as-page) .panel-title { gap: 1px; }
.content:has(.as-page) .panel-title h3 { font-size: 13px; }
.content:has(.as-page) .panel-body { padding: 10px 12px; }

/* Tabellen: Zeilen in der Höhe einer Textzeile plus Luft, Knöpfe darin flacher. */
.content:has(.as-page) table.data { font-size: 12.5px; }
.content:has(.as-page) table.data th { padding: 6px 10px; font-size: 10px; }
.content:has(.as-page) table.data td { padding: 5px 10px; }
.content:has(.as-page) table.data td .btn-sm { height: 24px; padding: 0 8px; font-size: 11.5px; }
.content:has(.as-page) table.data td .btn-icon.btn-sm { width: 24px; padding: 0; }
.content:has(.as-page) table.data td .chip { height: 20px; }
.content:has(.as-page) table.data td .as-sub { margin-top: 0; }
/* Knopfgruppen in Zellen stehen nebeneinander – siehe .as-tpl-rowbtns. */
.content:has(.as-page) table.data td .row { flex-wrap: nowrap; gap: 2px; }

/* Felder und Knöpfe */
.content:has(.as-page) .field { gap: 3px; }
.content:has(.as-page) .field > label { font-size: 11.5px; }
.content:has(.as-page) .input:not(textarea),
.content:has(.as-page) .select { height: 32px; font-size: 12.5px; }
.content:has(.as-page) .input:not(textarea) { padding: 0 10px; }
.content:has(.as-page) textarea.input { padding: 7px 10px; font-size: 12.5px; }
.content:has(.as-page) .select { padding-left: 10px; }
.content:has(.as-page) .sels-btn { height: 32px; font-size: 12.5px; }
.content:has(.as-page) .btn:not(.btn-sm):not(.as-kpi) { height: 32px; padding: 0 13px; font-size: 12.5px; }
.content:has(.as-page) .btn-sm { height: 26px; padding: 0 9px; font-size: 11.5px; }
.content:has(.as-page) .btn-icon.btn-sm { width: 26px; padding: 0; }

/* Kennzahlen, Hinweise, Leerzustände */
.content:has(.as-page) .as-kpis { gap: 8px; }
.content:has(.as-page) .as-kpi { padding: 8px 12px; gap: 2px; }
.content:has(.as-page) .as-kpi-value { font-size: 19px; }
.content:has(.as-page) .as-empty { padding: 14px 10px; font-size: 12.5px; gap: 6px; }
.content:has(.as-page) .as-note { padding: 7px 10px; font-size: 12px; }
.content:has(.as-page) .as-filters { gap: 8px; }

/* Formulare in Panels: die Felder enger untereinander. Die Spalten tragen ihren Abstand
   teils im Markup (style="gap:14px") – deshalb mit !important. */
.content:has(.as-page) .panel-body > .col,
.content:has(.as-page) .as-cmp-fields { gap: 9px !important; }
.content:has(.as-page) .field-hint { line-height: 1.35; }

/* Dialoge */
.content:has(.as-page) .modal-head { padding: 10px 14px; }
.content:has(.as-page) .modal-body { padding: 12px 14px; }
.content:has(.as-page) .modal-foot { padding: 9px 14px; gap: 6px; }
.content:has(.as-page) .modal-body .col { gap: 10px !important; }

@media (max-width: 640px) {
    .as-tabrow { overflow-x: auto; flex-wrap: nowrap; }
    .as-filters .field { min-width: 0; flex: 1 1 100%; }
}