/* Bereich „Bewertung" – Übersicht (AssessOverview.razor).
   Gemeinsames steht in assessment.css. */

/* ---------- Die Leiste oben ----------
   Bewusst kein Panel: keine Eckmarken, kein Rahmen ringsum, sondern ein Band mit Akzent
   links und einem leichten Verlauf. Es fasst zusammen, was darunter steht, und soll sich
   davon abheben, statt wie ein weiterer Baustein auszusehen. */
.as-ov-stats {
    display: flex; align-items: stretch; flex-wrap: wrap; min-width: 0;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
    background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent) 4%, transparent) 70%);
}
.as-ov-stat {
    display: flex; align-items: baseline; gap: 7px; padding: 7px 16px;
    border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
    border-right: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    transition: background .12s;
}
button.as-ov-stat:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.as-ov-stat-n { font-family: var(--font-ui); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.as-ov-stat-l { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
/* Der Eindruck rechts: Ring und zwei Zeilen Text, ohne Trennstrich danach. */
.as-ov-stat-score { margin-left: auto; align-items: center; cursor: default; border-right: 0; }
.as-ov-stat-score .as-ov-stat-l { display: flex; flex-direction: column; line-height: 1.25; }
.as-ov-stat-score .as-ov-stat-l b { color: var(--text); font-weight: 600; }

/* ---------- Der Ring ---------- */
.as-ov-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.as-ov-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.as-ov-ring circle { fill: none; stroke-width: 3.4; }
.as-ov-ring .track { stroke: var(--panel-inset); }
.as-ov-ring .value {
    stroke: var(--as-c); stroke-linecap: round; transition: stroke-dasharray .4s ease;
    /* Beim Erscheinen läuft der Ring von null auf seinen Wert. */
    animation: as-ov-ring-in .9s cubic-bezier(.3, .9, .3, 1) backwards;
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--as-c) 55%, transparent));
}
@keyframes as-ov-ring-in { from { stroke-dasharray: 0 100; } }
@media (prefers-reduced-motion: reduce) { .as-ov-ring .value { animation: none; } }
.as-ov-ring-text { position: relative; font-family: var(--font-mono); font-weight: 700; color: var(--text); }

/* ---------- Raster ---------- */
.as-ov-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: start; }
@media (max-width: 1100px) { .as-ov-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Die Akte ----------
   Reiter wie bei einem Aktenordner, die geöffnete Akte schließt bündig an ihren Reiter
   an. Die Reiterleiste ist eine Zeile und rollt seitlich – bei vielen Erprobungen bleibt
   sie so hoch wie bei zweien. */
.as-ov-files { min-width: 0; outline: none; }
.as-ov-files:focus-visible .as-ov-file { box-shadow: 0 0 0 2px var(--accent-soft); }
.as-ov-tabs-row { display: flex; align-items: flex-end; gap: 4px; min-width: 0; }
.as-ov-tabs {
    display: flex; align-items: flex-end; gap: 3px; flex: 1 1 auto; min-width: 0;
    overflow-x: auto; scrollbar-width: none; padding-top: 3px;
}
.as-ov-tabs::-webkit-scrollbar { display: none; }
.as-ov-tab {
    display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 220px;
    height: 30px; padding: 0 12px; margin-bottom: -1px; cursor: pointer;
    border: 1px solid var(--line); border-bottom-color: transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--panel-inset); color: var(--text-dim);
    font-family: var(--font-ui); font-size: 12px; transition: color .12s, background .12s;
}
.as-ov-tab:hover { color: var(--text); background: var(--panel-raised); }
.as-ov-tab.active {
    height: 34px; background: var(--panel); color: var(--text); font-weight: 600;
    border-color: var(--line-strong); border-bottom-color: var(--panel);
    box-shadow: inset 0 2px 0 var(--accent);
}
.as-ov-tab.planned .as-ov-tab-name { font-style: italic; }
.as-ov-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-ov-nav {
    flex: none; width: 26px; height: 30px; margin-bottom: 2px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--panel-raised); color: var(--text-dim);
    font-size: 15px; line-height: 1; cursor: pointer;
}
.as-ov-nav:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.as-ov-nav:disabled { opacity: .35; cursor: default; }
.as-ov-pos { flex: none; align-self: center; padding: 0 2px 0 6px; font-size: 10.5px; color: var(--text-faint); }

.as-ov-file {
    display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
    border: 1px solid var(--line-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
    background: var(--panel);
    animation: as-ov-in .18s ease-out;
}
@keyframes as-ov-in { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .as-ov-file { animation: none; } }

.as-ov-file-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.as-ov-file-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.as-ov-file-title a { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-ov-file-title a:hover { color: var(--accent); }
.as-ov-file-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; }

.as-ov-file-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
@media (max-width: 640px) { .as-ov-file-body { grid-template-columns: minmax(0, 1fr); } }

.as-ov-impression { display: flex; align-items: center; gap: 14px; min-width: 0; }
.as-ov-imp-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; }
.as-ov-imp-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }
/* Verteilung auf die Ampel – ein Balken, Anteil je Farbe. */
.as-ov-dist { display: flex; width: 180px; max-width: 100%; height: 6px; border-radius: 3px; overflow: hidden; background: var(--panel-inset); }
.as-ov-dist > span { background: var(--as-c); }
.as-ov-last { display: flex; gap: 4px; }
.as-ov-last .as-dot { width: 8px; height: 8px; }

.as-ov-facts { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 16px; font-size: 12px; color: var(--text-dim); }
.as-ov-facts a { color: var(--text-dim); }
.as-ov-facts a:hover { color: var(--accent); }
.as-ov-facts b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Fahrzeuge zum Sofortbewerten: zwei Spalten, je Zeile Punkt, Name, Knopf. */
.as-ov-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 10px; }
.as-ov-car {
    display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 4px 3px 8px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-raised);
}
.as-ov-car .as-veh { flex: 1 1 auto; font-size: 12.5px; }
.as-ov-car .btn-sm { flex: none; }
.as-ov-why { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.as-ov-file-links { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; }

/* ---------- Fahrten | Rücknahmethemen ---------- */
.as-ov-lists { min-width: 0; }
.as-ov-listtabs .tab-n { margin-left: 4px; }
.as-ov-lists table.data th:first-child, .as-ov-lists table.data td:first-child { padding-left: 12px; }
/* Die Liste ist schmal: Datum und Name umbrechen nicht, sondern werden gekürzt; das
   Fahrzeug darf zweizeilig werden, es ist das längste Feld. */
.as-ov-lists table.data td.as-ov-when { white-space: nowrap; }
.as-ov-lists table.data td.as-ov-when .as-sub { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.as-ov-lists table.data td.as-ov-driver { white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.as-ov-lists .as-progress { min-width: 0; }
.as-ov-lists .as-progress-bar { width: 44px; flex: none; }
/* Das Fahrzeug nur mit seiner Kennung: Die VIN dahinter steht auf der Fahrt selbst, hier
   schob sie die Tabelle über den Rand des Panels. */
.as-ov-lists table.data td.as-ov-veh { max-width: 170px; }
.as-ov-lists table.data td.as-ov-veh .sels-note { display: none; }