/* =====================================================================
   Truck VM – fragile Overrides (Phase 2, Stand 19.10.2026)
   ---------------------------------------------------------------------
   Diese Regeln greifen auf die DOM-Struktur von twenty-front zu, nicht
   auf Tokens. Sie können mit jedem Twenty-Update brechen. Jede Regel
   nennt Element, Haken und Grund. Haken nach Stabilität:
     stabil     data-testid, semantische Klassen (navigation-drawer-item),
                ARIA (aria-current), data-Attribute (data-active)
     mittel     CSS-Modul-Klassen mit festem Präfix (_tab_…)
     fragil     Emotion-Hashes (s1abc…) – hier bewusst NICHT verwendet
   Prüfliste nach Updates: docs/FEASIBILITY.md Abschnitt 9.
   ===================================================================== */

/* ---- 1. Logo oben links ------------------------------------------------
   Element: Workspace-Auswahl (Avatar „A“ + Name „Apple“ + Pfeil).
   Haken: [data-testid="workspace-dropdown"] (stabil).
   Twenty kennt nur ein quadratisches Logo; der Entwurf zeigt die breite
   Wortmarke mit Stern. Die Kinder bleiben im DOM (Klick öffnet weiter das
   Menü), werden aber unsichtbar; die Wortmarke liegt als Hintergrundbild
   auf dem Container. Bilddatei: theme/assets/truckvm-logo.png, Platzhalter
   aus Michels PDF – Nutzung des Mercedes-Sterns ist mit Michel zu klären. */
/* Kopfbereich der Seitenleiste (fest 48 px hoch, Logo links, Suche/Einklappen
   rechts). Haken: :has() auf den Vorfahren der Workspace-Auswahl (stabil, solange
   die Verschachtelung Dropdown → Wrapper → Wrapper → Kopfzeile bleibt).
   Der Kopf darf umbrechen: Wortmarke in voller Breite oben, die zwei Icons
   darunter rechts; „Startseite“ rutscht entsprechend nach unten.            */
div:has(> div > div > [data-testid="workspace-dropdown"]) {
  flex-wrap: wrap !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 8px 2px 12px !important;
  box-sizing: border-box;
  row-gap: 2px;
}
div:has(> div > [data-testid="workspace-dropdown"]) {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
div:has(> div > [data-testid="workspace-dropdown"]) + div {
  margin-left: auto !important;
}
[data-testid="workspace-dropdown"] {
  width: 190px;
  height: 58px;
  margin: 0;
  background: var(--tvm-logo-url) left center / contain no-repeat;
}
[data-testid="workspace-dropdown"] > * {
  visibility: hidden;
}

/* ---- 2. Einträge der Seitenleiste --------------------------------------
   Element: Link eines Seitenleisten-Eintrags.
   Haken: a.navigation-drawer-item (semantische Klasse, stabil),
          aria-current="page" für den aktiven Eintrag (stabil).           */

/* 2a. Icons einfarbig grau statt in der Farbe der Ansicht (Entwurf S. 2).
   Twenty setzt die Farbe als stroke="var(--t-color-…)" direkt am SVG.   */
.navigation-drawer-item svg {
  stroke: var(--tvm-text-secondary) !important;
}
.navigation-drawer-item[aria-current="page"] svg {
  stroke: var(--tvm-black) !important;
}

/* 2b. Grauen Objektzusatz („· Unternehmen“) ausblenden. Twenty rendert
   Name und Zusatz als zwei Geschwister-Spans; nur der zweite verschwindet. */
.navigation-drawer-item span:nth-of-type(2):last-child {
  display: none;
}

/* 2c. Aktiver Eintrag als umrandete weiße Box mit fetter Schrift (Entwurf
   S. 2–5) statt grauer Fläche. */
.navigation-drawer-item[aria-current="page"] {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px var(--tvm-silver-light);
  color: var(--tvm-black) !important;
  font-weight: 600;
}

/* ---- 3. Reiter der Datensatzseite --------------------------------------
   Element: Reiter-Knopf („Zeitleiste“, „Aufgaben“ …).
   Haken: data-active="true" (stabil) in Kombination mit der CSS-Modul-
   Klasse _tab_<hash> (mittel: Präfix bleibt, Hash kann wechseln).
   Entwurf: aktiver Reiter mit Terrakotta-Unterstrich, inaktive grau.     */
[class*="_tab_"][data-active="true"] {
  box-shadow: inset 0 -2px 0 var(--tvm-lead);
  border-radius: 0;
  color: var(--tvm-black) !important;
}
[class*="_tab_"]:not([data-active="true"]) {
  color: var(--tvm-text-secondary) !important;
}

/* ---- 4. Knöpfe des Befehlsmenüs in der Kopfzeile -----------------------
   Element: umrandete Knöpfe („Neue Version“, „Zur Freigabe“, …).
   Haken: data-variant="outline" (stabil, twenty-ui-Button).
   Entwurf: weiße Knöpfe mit Silberrahmen, dunkler Text, keine Icons in
   Grau-Blau. Icons werden nicht ausgeblendet (Wiedererkennung).           */
button[data-variant="outline"][data-color="neutral"] {
  border-color: var(--tvm-silver-light) !important;
  color: var(--tvm-black) !important;
}

/* ---- 5. Buchstaben-Avatare (Datensätze ohne Bild) ----------------------
   Element: Avatar-Kreis/Quadrat mit Anfangsbuchstabe in Listen, Chips,
   Zeitleiste. Haken: span[data-size][data-shape] (twenty-ui-Avatar, stabil).
   Twenty berechnet die Farbe aus dem Namen und schreibt sie als Inline-
   Variable (--tw-avatar-background) aus den festen THEME_LIGHT-Konstanten,
   nicht aus den Tokens – deshalb greift hier nur eine harte Regel.
   Entwurf: keine bunten Initialen, nur Grau (Avatar „BK“ auf S. 4 ist
   schwarz mit weißer Schrift – siehe Datensatzkopf unten).             */
span[data-size][data-shape] {
  background: var(--tvm-surface) !important;
  color: var(--tvm-black) !important;
}

/* ---- 6. Logo-Container ohne Rahmen/Hover-Fläche -------------------------
   Die Workspace-Auswahl zeichnet bei Hover eine graue Fläche mit Rahmen;
   hinter der Wortmarke wirkt das wie ein Kasten.                         */
[data-testid="workspace-dropdown"],
[data-testid="workspace-dropdown"]:hover {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ---- 7. Dashboards mit genau einem Widget (z. B. „Mein Tag“) -----------
   Element: Widget-Karte des Dashboards (Rahmen, Titelzeile „Mein Tag“) und
   der innere Rahmen um die Front-Komponente.
   Haken: .react-grid-layout / .react-grid-item (Bibliothek react-grid-layout,
   stabil), .widget und .widget-card-header (semantische Klassen, stabil).
   Entwurf: die Startseite ist eine Seite, keine Karte in einer Karte.
   Gilt nur, wenn das Raster genau ein Widget enthält – Dashboards mit
   mehreren Kacheln behalten ihre Karten.                                  */
.react-grid-layout:has(> .react-grid-item:only-child) .widget {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.react-grid-layout:has(> .react-grid-item:only-child) .widget .widget-card-header {
  display: none !important;
}
.react-grid-layout:has(> .react-grid-item:only-child) .widget > div:last-child > div {
  border: 0 !important;
}

/* ---- 8. Aktives Eingabefeld deutlicher (Christian 19.10.2026) ----------
   Element: Text- und Mehrzeilenfelder der twenty-ui-Bausteine, die unsere
   Front-Komponenten nutzen (Neuer Interessent, Freigabe, Absage …).
   Haken: gehashte Modulklassen _input_… / _textarea_… (fragil, ändern sich
   mit jedem twenty-ui-Build; Teilstring-Selektor überlebt den Hash).
   Standard: 1 px Rahmen in --t-color-blue (bei uns Terrakotta). Hier
   zusätzlich 2 px innerer Ring → 3 px, ohne Layout-Verschiebung.
   Das eigene Auswahlfeld (src/front-components/utils/select.tsx) setzt
   denselben Ring selbst.                                                  */
input[class*="_input_"]:focus,
textarea[class*="_textarea_"]:focus {
  box-shadow: inset 0 0 0 2px var(--t-color-blue) !important;
}