/* ==========================================================================
   Modernes Design (Larkon-Template, Kundenwunsch 27.09.2026: "Passe
   ServiceOS grafisch an ... Nutze alle Funktionen, die das neue Template
   für den User bietet.")

   Wird NUR im neuen Layout geladen (app/Views/layouts/app-modern.php),
   NACH assets/vendor/larkon/app.css (Bootstrap 5 + Larkon-Theme) und NACH
   assets/css/app-scoped.css (das bestehende ServiceOS-Design-System,
   automatisch auf ".legacy-content-skin" skaliert, damit seine Regeln nicht
   mit Bootstraps gleichnamigen Klassen wie .card/.btn/.badge kollidieren,
   siehe app-scoped.css-Kopfkommentar). Diese Datei hier ist die dritte
   Schicht: sie verfeinert genau diese bestehenden Komponenten (Radius,
   Schatten, Abstände) für einen spürbar moderneren Eindruck, OHNE eine
   einzige bestehende View-Datei anzufassen — jede der ca. 40 ServiceOS-
   Seiten und alle Kundenportal-Seiten profitieren automatisch, weil sie
   alle dieselben Klassennamen (.card, .btn, table.data, .badge, .field …)
   durchgängig verwenden.

   Das klassische Design (app/Views/layouts/app.php) bleibt unverändert
   bestehen und lädt diese Datei nicht — siehe Umschalt-Button in der
   Kopfzeile (App\Controllers\UiThemeController).
   ========================================================================== */

/* ---------- Grundauffrischung: wirkt auf JEDE Komponente, die --radius/
   --shadow verwendet (Karten, Buttons, Felder, Badges, Alerts, KPI-Kacheln,
   Termin-Kalender …) — eine einzige Stelle, große Wirkung. ---------- */
.legacy-content-skin {
    --radius: 12px;
    --shadow: 0 2px 12px rgba(20, 23, 20, 0.07), 0 1px 3px rgba(20, 23, 20, 0.05);
}

.legacy-content-skin .card {
    border-radius: 16px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.legacy-content-skin .card:hover { box-shadow: 0 6px 20px rgba(20, 23, 20, 0.1), 0 2px 5px rgba(20, 23, 20, 0.06); }

.legacy-content-skin .btn { border-radius: 10px; transition: background-color .15s ease, box-shadow .15s ease; }
.legacy-content-skin .btn-primary { box-shadow: 0 2px 6px rgba(26, 159, 76, 0.28); }
.legacy-content-skin .btn-primary:hover { box-shadow: 0 3px 10px rgba(15, 122, 57, 0.32); }

.legacy-content-skin input[type=text], .legacy-content-skin input[type=email],
.legacy-content-skin input[type=password], .legacy-content-skin input[type=search],
.legacy-content-skin input[type=number], .legacy-content-skin input[type=date],
.legacy-content-skin input[type=datetime-local], .legacy-content-skin select,
.legacy-content-skin textarea {
    border-radius: 10px;
}

.legacy-content-skin .badge { padding: 4px 11px; }

.legacy-content-skin .kpi { border-radius: 14px; transition: box-shadow .15s ease; }
.legacy-content-skin .kpi:hover { box-shadow: 0 4px 14px rgba(20, 23, 20, 0.08); }

.legacy-content-skin table.data th {
    font-size: 11px;
    letter-spacing: 0.04em;
}
.legacy-content-skin .table-wrap { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.legacy-content-skin .table-wrap table.data { margin: 0; }
.legacy-content-skin .table-wrap table.data th:first-child, .legacy-content-skin .table-wrap table.data td:first-child { padding-left: 16px; }

.legacy-content-skin .credit-banner,
.legacy-content-skin .timer-widget { border-radius: 16px; }

.legacy-content-skin .activity-entry { border-radius: 12px; transition: box-shadow .15s ease; }
.legacy-content-skin .activity-entry:hover { box-shadow: 0 3px 12px rgba(20, 23, 20, 0.06); }

/* ---------- Dunkelmodus für den Inhaltsbereich ----------
   Larkon schaltet auf data-bs-theme="dark" um (siehe Umschalter im
   Kopfbereich). Bootstrap/Larkon selbst passen sich darüber automatisch an;
   das bestehende ServiceOS-Design-System kennt dieses Attribut aber nicht,
   da es weiterhin seine eigenen, fest hinterlegten Farbwerte verwendet.
   Diese Neu-Deklaration derselben Variablennamen (per CSS Custom Properties
   ganz normal vererbt) genügt, damit z. B. jede .card, die intern
   background: var(--white) verwendet, im Dunkelmodus automatisch die
   dunkle Fläche bekommt — ohne eine einzige der bestehenden Regeln in
   app-scoped.css anzufassen. */
:root[data-bs-theme="dark"] .legacy-content-skin {
    --ink: #e7eaee;
    --ink-soft: #c2c8d0;
    --muted: #8b93a1;
    --paper: #151a21;
    --white: #1c222b;
    --line: #2a323d;
    --line-strong: #3a4451;
    --green-light: #103621;
    --danger-bg: #3a1f21;
    --warning-bg: #3a3220;
    --info-bg: #182533;
    --shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
:root[data-bs-theme="dark"] .legacy-content-skin .badge-gray { background: #2a323d; color: #c2c8d0; }
:root[data-bs-theme="dark"] .legacy-content-skin .badge-blue { background: #17324f; color: #7fb4ff; }
:root[data-bs-theme="dark"] .legacy-content-skin .grid-table .grid-head > span { background: var(--paper); }

/* ---------- Neue Kopfzeilen-Elemente (siehe layouts/app-modern.php) ---------- */
.ui-theme-switch-btn { display: inline-flex; align-items: center; gap: 6px; }
.ui-theme-switch-btn .ti { font-size: 18px; line-height: 1; }

/* ---------- Kundenwunsch 28.09.2026: "Wenn die Sidebar eingefahren ist,
   soll nur das Logo zu sehen sein - ohne Schriftzug." Larkon liefert diese
   Umschaltung fertig für die Sidebar-Modi "condensed" und "sm-hover" mit,
   nicht aber für unseren Standard-Modus "sm-hover-active" (schmal, bei
   Hover breit) — hier exakt dasselbe Muster ergänzt, das Larkon für
   "sm-hover" bereits verwendet (siehe vendor/larkon/app.css). Wirkt
   zusammen mit der neuen .logo-sm/.logo-lg-Aufteilung in
   layouts/app-modern.php bzw. portal/layouts/app-modern.php. ---------- */
html[data-menu-size="sm-hover-active"] .main-nav:not(:hover) .logo-box .logo-sm { display: inline-block; }
html[data-menu-size="sm-hover-active"] .main-nav:not(:hover) .logo-box .logo-lg { display: none; }

/* Fix 28.09.2026 (Kundenrückmeldung "doppeltes Logo vorhanden"): das
   Markup in layouts/app-modern.php bzw. portal/layouts/app-modern.php
   nutzte bisher Bootstraps ".d-flex"-Utility-Klasse direkt auf .logo-sm/
   .logo-lg, um Icon und Schriftzug nebeneinander auszurichten. Bootstraps
   Utility-Klassen sind aber "display:flex !important" — das überstimmt
   IMMER die obigen Umschalt-Regeln (display:none/inline-block), egal wie
   spezifisch diese sind, wodurch beide Logo-Varianten gleichzeitig
   sichtbar waren. Diese Regel hier ersetzt die entfernte .d-flex-Klasse
   ohne !important (Spezifität 0,2,0 wie Larkons eigene ".logo-box
   .logo-lg{height:...}"-Regel) — die deutlich spezifischeren
   Umschalt-Regeln oben (mit html[data-menu-size=...]-Attribut) können sie
   weiterhin korrekt überstimmen und auf "display:none" setzen. Für
   .logo-sm ist keine entsprechende Regel nötig: sie enthält nur ein
   einzelnes <img>, keine Ausrichtung von zwei Elementen nebeneinander. */
.logo-box .logo-lg { display: flex; align-items: center; gap: 8px; }

/* Fix 28.09.2026 (Kundenrückmeldung "Logo im Menü fehlt nach dem Update"):
   Larkons eigene Regel ".logo-box .logo-dark{display:block}" wird bei
   dunkler Sidebar (unser data-menu-color="dark") durch eine speziellere
   Regel wieder auf "display:none" gesetzt — Larkon geht dort von einer
   Hell/Dunkel-Logo-Umschaltung aus (".logo-dark" für helle Sidebar,
   ".logo-light" fürs Gegenstück auf dunkler Sidebar). Da wir nur ein
   einziges Logo für beide Fälle verwenden, hat der Anker jetzt einen
   neutralen, davon unabhängigen Klassennamen ("logo-anchor" statt
   "logo-dark") — diese Regel stellt dafür dieselbe Basis-Darstellung wie
   Larkons ".logo-box .logo-dark{display:block}" wieder her, aber ohne an
   das Hell/Dunkel-Umschalt-Paar gekoppelt zu sein. */
.logo-box .logo-anchor { display: block; }

/* Fix 28.09.2026 (Kundenrückmeldung "Das Logo links oben klebt zu sehr am
   Bildschirmrand und an der Navigation"): Larkons eigene ".logo-box"-Regel
   verlässt sich auf "line-height: var(--bs-topbar-height)" (100px), um ihren
   Inhalt vertikal zu zentrieren — das funktioniert aber nur bei reinem
   Inline-Inhalt. Unser Logo-Anker ist durch die vorherigen Fixes oben jetzt
   "display:block" (bzw. "display:flex" für .logo-lg), wodurch der
   Zeilenhöhen-Mechanismus nicht mehr greift und die Box auf die reine
   Inhaltshöhe des Icons zusammenschrumpft (kein Abstand nach oben/unten).
   Diese Regel gibt der Box stattdessen eine feste Höhe mit echter
   Flex-Zentrierung sowie mehr seitlichen Abstand, plus eine dezente Trennlinie
   zur Navigation darunter, damit das Logo weder am Bildschirmrand noch an
   der Navigation "klebt". Gleiche Selektor-Spezifität wie Larkons
   ".logo-box"-Basisregel — gewinnt allein durch die spätere Position in
   dieser Datei (siehe Ladereihenfolge in layouts/app-modern.php). */
.logo-box {
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* Fix 28.09.2026 (Kundenrückmeldung "Entferne auch den Teil unterhalb der
   Navigation, die Navigation soll bis zum untersten Bildschirmrand gehen"):
   Larkon reserviert in ".wrapper .main-nav .scrollbar" per
   "height: calc(100% - var(--bs-topbar-height))" bewusst 100px ungenutzten
   Platz am unteren Rand der Sidebar-Navigationsliste (offenbar für ein in
   unserem Projekt nicht verwendetes, dort andockendes Widget aus Larkons
   eigener Demo) — das erzeugt exakt die vom Kunden gemeldete leere Fläche
   unterhalb der Navigationspunkte. Eine Larkon-eigene Gegenregel existiert
   nur für den Sidebar-Modus "condensed" (nicht unseren Standard-Modus
   "sm-hover-active").

   Korrektur 28.09.2026 (nach Live-Test direkt im Browser): ein erster
   Versuch mit "height: 100%" war zu großzügig — die Navigationsliste
   (.scrollbar) folgt im Fluss direkt auf die Logo-Box (jetzt 70px hoch,
   siehe Regel oben) und bekäme mit "100%" zusätzlich zu diesen 70px noch
   einmal die VOLLE Höhe der Sidebar zugewiesen, wodurch sie unten über den
   sichtbaren Bereich hinausragt. Korrekt ist die um die tatsächliche
   Logo-Box-Höhe reduzierte verfügbare Höhe — exakt dasselbe Prinzip wie
   Larkons eigene Formel, nur mit dem inzwischen für unsere Logo-Box
   geltenden Wert (70px) statt der für Larkons ursprüngliches, hier nicht
   verwendetes Zeilenhöhen-Layout gedachten 100px. Per Live-Messung im
   Browser bestätigt: Navigationsliste endet damit bündig mit dem unteren
   Rand der Sidebar (kein Überstand, keine Lücke). */
.wrapper .main-nav .scrollbar { height: calc(100% - 70px); }

/* ---------- Kundenwunsch 28.09.2026: "Passe überall die grünen Balken und
   Buttons auf das neue Design an." Die Marke Computer-Freund.at ist grün
   (--green/--green-dark/--green-light, siehe assets/css/app.css) — das
   bleibt im neuen Design bewusst erhalten (kein Marken-/Funktionswechsel),
   bekommt hier aber exakt dieselbe "weiche", transluzente Farbbehandlung
   wie Larkons eigene Erfolgsfarbe (siehe .badge-soft-success/.btn-success/
   .alert-success in vendor/larkon/app.css), damit es zum Rest der neuen
   Oberfläche passt statt wie unverändert aus dem alten Design hineinkopiert
   zu wirken. Die reine Variablen-Neudeklaration wirkt automatisch auf jede
   Stelle, die --green/--green-dark/--green-light verwendet (Buttons,
   Badges, Erfolgsmeldungen, Sidebar-Status, Tabellen-Hover, Zeitleiste,
   Fahrtkosten-Balken …), weil app-scoped.css bereits durchgängig diese
   Variablen nutzt — keine einzige der vielen bestehenden Regeln dort musste
   dafür angefasst werden. ---------- */
.legacy-content-skin {
    --green: #22c55e;
    --green-dark: #16a34a;
    --green-light: rgba(34, 197, 94, .15);
}

.legacy-content-skin .btn-primary {
    box-shadow: 0 2px 6px rgba(34, 197, 94, .35);
}
.legacy-content-skin .btn-primary:hover { box-shadow: 0 3px 10px rgba(22, 163, 74, .4); }
.legacy-content-skin .btn-primary:focus,
.legacy-content-skin .btn-primary:focus-visible { box-shadow: 0 0 0 .2rem rgba(34, 197, 94, .35); }

/* Die übrigen Status-Badges bekommen dieselbe transluzente Behandlung wie
   .badge-green, statt weiterhin als Vollton-Fläche wie im alten Design. */
.legacy-content-skin .badge-green,
.legacy-content-skin .badge-blue,
.legacy-content-skin .badge-red,
.legacy-content-skin .badge-orange,
.legacy-content-skin .badge-gray {
    border-radius: 4px;
    font-weight: 600;
}
.legacy-content-skin .badge-blue { background: rgba(59, 130, 246, .15); color: #1d4ed8; }
.legacy-content-skin .badge-red { background: rgba(239, 95, 95, .15); color: #b91c1c; }
.legacy-content-skin .badge-orange { background: rgba(249, 185, 49, .22); color: #9a5b00; }
.legacy-content-skin .badge-gray { background: rgba(100, 116, 139, .15); color: #475569; }

.legacy-content-skin .alert-success { border: 1px solid rgba(34, 197, 94, .35); }
.legacy-content-skin .alert-error {
    background: rgba(239, 95, 95, .15);
    color: #b91c1c;
    border: 1px solid rgba(239, 95, 95, .35);
}
.legacy-content-skin .alert-warning {
    background: rgba(249, 185, 49, .22);
    color: #9a5b00;
    border: 1px solid rgba(249, 185, 49, .4);
}

/* Dunkelmodus: dieselben transluzenten Badge-/Alert-Farben funktionieren
   bereits unverändert auf dunklem Grund (ausreichender Kontrast), nur die
   Text-Akzentfarben werden minimal aufgehellt. */
:root[data-bs-theme="dark"] .legacy-content-skin .badge-blue { color: #93c5fd; }
:root[data-bs-theme="dark"] .legacy-content-skin .badge-red { color: #fca5a5; }
:root[data-bs-theme="dark"] .legacy-content-skin .badge-orange { color: #fcd34d; }
:root[data-bs-theme="dark"] .legacy-content-skin .badge-gray { color: #cbd5e1; }

/* Kundenwunsch 27.09.2026 ("auf allen Seiten auf die Buttons achten, dass
   diese am neuen Design angepasst sind"): Larkons eigene .btn-soft-primary
   (Dashboard "Alle Tickets"/"Alle Anfragen"/"Öffnen"/"Details"/"Dienstplan
   öffnen", sowie der Hell-/Dunkel-Umschalter im Header) nutzt fest verdrahtet
   Larkons Orange (--bs-primary: #ff6c2f) statt unserer grünen Marke — daher
   der von einem Screenshot des Kunden markierte Farbbruch. Überschreibt hier
   (nicht in der Vendor-Datei) dieselben Bootstrap-Button-Variablen mit
   unseren Grüntönen. */
.btn-soft-primary {
    --bs-btn-color: var(--green-dark);
    --bs-btn-bg: var(--green-light);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--green);
    --bs-btn-hover-border-color: var(--green);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--green);
    --bs-btn-active-border-color: var(--green);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--green);
    --bs-btn-disabled-border-color: var(--green);
}

/* Kundenwunsch 27.09.2026 ("Die Texte und Icons auf der Ticketseite sind
   verschoben"): die Kennzahlen-Kacheln (tickets/index.php + dashboard/
   index.php, natives Larkon-Markup, daher hier ohne .legacy-content-skin-
   Präfix — siehe app-modern.php) nutzen `.card-body.d-flex.align-items-
   center` mit dem Label+Wert-Block links und dem Icon-Avatar rechts. Bei
   unterschiedlich langen Labels umbricht der Text auf manchen Kacheln auf
   zwei Zeilen und auf anderen nicht — dadurch bekommt jede Kachel eine
   andere Blockhöhe, und `align-items-center` zentriert das Icon (und
   verschiebt damit auch den Wert darunter) auf jeder Kachel an einer
   anderen vertikalen Position, obwohl es optisch wie ein einheitliches
   Raster aussehen soll. Fix: Label immer einzeilig erzwingen (Kürzel im
   Markup + voller Text weiterhin per title-Attribut beim Hover), dadurch
   ist die Blockhöhe auf allen Kacheln einer Zeile identisch und Icon/Wert
   richten sich sauber aus. min-width: 0 ist nötig, damit text-overflow:
   ellipsis innerhalb eines Flex-Kindes überhaupt greifen kann (Flex-Kinder
   sind ohne das per Default nicht auf ihren Inhalt schrumpfbar). */
.stat-tile-text {
    min-width: 0;
}
.stat-tile-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}