/*
 * App-eigene Design-Ebene. Wird nach assets/css/styles.css geladen.
 * styles.css ist ein generiertes Metronic-Bundle und wird nicht editiert.
 *
 * Farb- und Radius-Tokens sind auf die carelogic-Styleguide-Palette
 * (Blazor-Teil, carelogic-tokens.css) umgestellt. Statt eines zweiten,
 * parallelen --cl-*-Token-Systems werden die Styleguide-Werte direkt in
 * die bestehenden semantischen Tailwind/Metronic-Tokens eingespeist, damit
 * alle Komponenten, die schon heute --primary/--background/--foreground/
 * kt-badge-* etc. nutzen, die neue Marke ohne Codeaenderung erben.
 */

:root {
    /* ===== carelogic: Marke, Selektion/Fokus ===== */
    --primary: #0D6599;             /* Primaer-Blau: Buttons, aktive Navigation, Links */
    --ring: #1599E4;                /* Selektions-/Fokusfarbe (Accent) */
    --ring-soft: #E1F1FC;            /* Selektion/Info soft-Hintergrund (Pills, Badges) */

    /* ===== carelogic: weitere Statusfarben (Bearbeitung/Erfolg/Werkstatt) =====
       Einzige Quelle fuer diese drei Statusfarben - kt-badge-Klassen, kt-icon-tile-Modifier
       und der ord-*-Namensraum referenzieren dieselben Variablen statt eigener Literale. */
    --warning: #E08A1E;
    --warning-soft: #FBEBD3;
    --success: #12996B;
    --success-soft: #DEF3EA;
    --purple: #7C5CF0;
    --purple-soft: #EBE6FD;

    /* ===== carelogic: Flaechen ===== */
    --background: #FFFFFF;
    --card: #FFFFFF;
    --popover: #FFFFFF;
    --canvas: #F9F9F9;               /* Seitenhintergrund, gegen den Karten stehen. --background bleibt weiss,
                                         damit Header, Sidebar und Popover weiterhin als Flaeche darueber wirken. */
    --muted: #F1F3F5;                /* Feld-Fuellung */
    --secondary: #EAEDF0;            /* Control-Hintergrund */

    /* ===== carelogic: Text ===== */
    --foreground: #1A2227;
    --card-foreground: #1A2227;
    --popover-foreground: #1A2227;
    --muted-foreground: #5A646C;
    --secondary-foreground: #1A2227;

    /* ===== carelogic: aktive Navigation (Brand-Soft) ===== */
    --accent: #E4F0F8;

    /* ===== carelogic: Status Rot (destructive) ===== */
    --destructive: #E1443F;
    --destructive-soft: #FBE4E3;

    /* ===== carelogic: Konturen ===== */
    --border: #E4E7EB;
    --surface-border: #E4E7EB;
    --input: #D5DAE0;

    /* ===== carelogic: Radius (Control ~11px, Karten separat groesser s.u.) ===== */
    --radius: 0.6875rem;
    --radius-card: 1.25rem;          /* 20px - wie die Login-Karte, bewusst groesser als Control-Radius */

    /* Deutlich groesserer, markenblau getoenter Schatten statt der fast unsichtbaren
       1-3px Kante von vorher - das ist der Look der Login-Karte (0 25px 60px rgba(0,40,100,.15)),
       nur etwas gedaempft, weil hier viele Karten gleichzeitig auf einer Seite stehen. */
    --surface-shadow: 0 2px 8px rgba(13,101,153,.05), 0 16px 32px -10px rgba(13,101,153,.18);
    --surface-shadow-hover: 0 4px 12px rgba(13,101,153,.07), 0 24px 48px -12px rgba(13,101,153,.24);

    /* ===== carelogic: DevExpress Fluent-Theme (DxGrid/DxFormLayout/DxTextBox/DxButton) =====
       --dxbl-accent-color ist der von DevExpress dokumentierte Einstiegspunkt: core.min.css
       leitet daraus per oklch() die komplette Primaerfarb-Skala (--dxbl-accent-color-10..170)
       ab, auf die u.a. Grid-Selektion, DxButton Primary und der Fokusrahmen von DxTextBox
       verweisen - eine Variable faerbt also alle DevExpress-Grids/-Formulare um. Die
       Radius-/Padding-Variablen sind bewusst komponentenspezifisch (nicht die geteilten
       --DS-border-radius-*-Tokens), damit nur Grid/Buttons/Textfelder runder werden und
       keine unbeteiligten DX-Komponenten mitbetroffen sind.
       WICHTIG: DevExpress deklariert genau diese Variablen mit Default-Wert erneut direkt
       auf der eigenen Komponentenklasse (z.B. .dxbl-grid{--dxbl-grid-border-radius:...}).
       Eine Deklaration direkt auf dem Element schlaegt eine geerbte :root-Deklaration IMMER,
       unabhaengig von Ladereihenfolge - deshalb griffen die Werte unten bisher nicht sichtbar.
       !important hebt das gezielt auf, ohne dass App.razor angefasst werden muss. */
    --dxbl-accent-color: #0D6599 !important;
    --dxbl-grid-border-radius: 0.6875rem !important;
    --dxbl-btn-border-radius: 0.6875rem !important;
    --dxbl-text-edit-border-radius-m: 0.6875rem !important;
    --dxbl-popups-border-radius: 1rem !important;

    /* Grid-Zellen wirkten sehr eng (0.4375rem/0.375rem) - auf Styleguide-Tabellendichte
       (11-14px) angehoben, damit es nicht mehr wie ein dichtes 90er-Enterprise-Grid wirkt. */
    --dxbl-grid-text-cell-padding-x: 0.875rem !important;
    --dxbl-grid-text-cell-padding-y: 0.6875rem !important;
    --dxbl-grid-editor-cell-padding-x: 0.875rem !important;
    --dxbl-grid-editor-cell-padding-y: 0.6875rem !important;

    /* Echter Bug, kein Styling: DevExpress verdrahtet den Fokusrahmen von DxTextBox/
       DxComboBox/DxSpinEdit auf die interne "Validierung erfolgreich"-Farbe (Gruen),
       nicht auf die Akzentfarbe - ein fokussiertes Feld wuerde sonst gruen statt blau
       aufleuchten. Ausserdem Schriftfamilie auf Inter (Rest der App) und grosszuegigere
       Feld-Innenabstaende (vorher ~4-5px, sehr eng) angehoben. */
    --dxbl-text-edit-focus-border-color: var(--ring) !important;
    --DS-font-family-sans-serif: Inter, -apple-system, BlinkMacSystemFont, "segoe ui", roboto, sans-serif !important;
    --dxbl-text-edit-padding-x: 0.875rem !important;
    --dxbl-text-edit-padding-y-m: 0.6875rem !important;
}

.dark {
    --primary: #1599E4;
    --ring: #3BAAEA;
    --ring-soft: #0F2E42;

    --warning: #F0A23E;
    --warning-soft: #3E3220;
    --success: #2BB585;
    --success-soft: #173A31;
    --purple: #9B82F5;
    --purple-soft: #2C2942;

    --background: #323B3E;
    --card: #323B3E;
    --popover: #323B3E;
    --canvas: #293133;
    --muted: #2F393B;
    --secondary: #374143;

    --foreground: #EBEEEF;
    --card-foreground: #EBEEEF;
    --popover-foreground: #EBEEEF;
    --muted-foreground: #A7B0B3;
    --secondary-foreground: #EBEEEF;

    --accent: #123246;

    --destructive: #F0605B;
    --destructive-soft: #3E2726;

    --border: #3C4749;
    --surface-border: #3C4749;
    --input: #4A5658;

    --surface-shadow: 0 2px 8px rgb(0 0 0 / 0.35), 0 16px 32px -8px rgb(0 0 0 / 0.5);
    --surface-shadow-hover: 0 4px 12px rgb(0 0 0 / 0.4), 0 24px 48px -10px rgb(0 0 0 / 0.6);
}

/* ===== carelogic: Status-Badges (Erfolg/Bearbeitung/Info) =====
   Nur diese Klassen werden umgefaerbt, nicht die zugrundeliegenden
   Tailwind-Farbprimitive - andere bg-green-500-Nutzungen bleiben unberuehrt. */
.kt-badge-success {
    background-color: #12996B;
    color: #FFFFFF;
}
.kt-badge-outline.kt-badge-success {
    border-color: color-mix(in srgb, #12996B 30%, transparent);
    background-color: #DEF3EA;
    color: #12996B;
}
.dark .kt-badge-success {
    background-color: #2BB585;
}
.dark .kt-badge-outline.kt-badge-success {
    border-color: color-mix(in srgb, #2BB585 35%, transparent);
    background-color: #173A31;
    color: #2BB585;
}

.kt-badge-warning {
    background-color: #E08A1E;
    color: #FFFFFF;
}
.kt-badge-outline.kt-badge-warning {
    border-color: color-mix(in srgb, #E08A1E 30%, transparent);
    background-color: #FBEBD3;
    color: #E08A1E;
}
.dark .kt-badge-warning {
    background-color: #F0A23E;
}
.dark .kt-badge-outline.kt-badge-warning {
    border-color: color-mix(in srgb, #F0A23E 35%, transparent);
    background-color: #3E3220;
    color: #F0A23E;
}

/* ===== carelogic: Vorschlag/Primär (Markenblau) =====
   .kt-badge-primary selbst nutzt bereits var(--primary) (siehe styles.css), aber die
   .kt-badge-outline-Variante faellt dort auf Tailwinds generisches --color-blue-100/-800
   zurueck statt auf unsere Marke - fuer Stati wie OrderStatusType.DeliveryScheduled
   ("Lieferung geplant") hier auf --primary/--accent umgebogen. */
.kt-badge-outline.kt-badge-primary {
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    background-color: var(--accent);
    color: var(--primary);
}

/* ===== carelogic: Akzeptiert/Info (Selektions-Blau) =====
   Fuer Stati wie OrderStatusType.CostEstimateApproved ("KV genehmigt" = angenommen) -
   Styleguide-Gruppe "Akzeptiert", nutzt dieselbe Selektionsfarbe wie --ring/--ring-soft. */
.kt-badge-info {
    background-color: var(--ring);
    color: #FFFFFF;
}
.kt-badge-outline.kt-badge-info {
    border-color: color-mix(in srgb, var(--ring) 30%, transparent);
    background-color: var(--ring-soft);
    color: var(--ring);
}

/* ===== carelogic: Werkstatt/Lila =====
   Im Styleguide nicht Teil des Tailwind-Standardsatzes - neue Modifier-Klasse
   fuer Faelle wie OrderType.Repair (siehe OrderItem.razor). */
.kt-badge-purple {
    background-color: #7C5CF0;
    color: #FFFFFF;
}
.kt-badge-outline.kt-badge-purple {
    border-color: color-mix(in srgb, #7C5CF0 30%, transparent);
    background-color: #EBE6FD;
    color: #7C5CF0;
}
.dark .kt-badge-purple {
    background-color: #9B82F5;
}
.dark .kt-badge-outline.kt-badge-purple {
    border-color: color-mix(in srgb, #9B82F5 35%, transparent);
    background-color: #2C2942;
    color: #9B82F5;
}

/* ===== carelogic: Checkout-Stepper - abgeschlossener Schritt komplett gruen =====
   Vorher nur ein kleines gruenes Haekchen-Icon auf sonst neutralem Pill-Hintergrund. */
.kt-step-completed {
    background-color: #DEF3EA;
    border-color: color-mix(in srgb, #12996B 25%, transparent);
    color: #12996B;
}
.kt-step-completed .kt-step-icon {
    color: #12996B;
}
.dark .kt-step-completed {
    background-color: #173A31;
    border-color: color-mix(in srgb, #2BB585 30%, transparent);
    color: #2BB585;
}
.dark .kt-step-completed .kt-step-icon {
    color: #2BB585;
}

/* ===== carelogic: Auswahl-Zeilen (Versand/Zahlart) als eine zusammenhaengende Liste =====
   Statt einzelner Boxen mit Luecken (wie die Positionstabelle: eine Karte, Zeilen nur
   durch duenne Linien getrennt) - dafuer gibt es keine passende, bereits kompilierte
   Tailwind-Utility-Kombination, daher eine eigene, kleine Klasse. */
.kt-option-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.kt-option-row:hover {
    background-color: var(--muted);
}
.kt-option-row.selected {
    background-color: color-mix(in srgb, var(--primary) 8%, transparent);
}
.kt-option-row + .kt-option-row {
    border-top: 1px solid var(--border);
}

/* ===== carelogic: Status-Akzentstreifen an Karten =====
   "border-left-primary-600" etc. (StatusInfoViewModel.BorderClass, LtsItem.razor,
   MedicalAidItem.razor) sind Bootstrap-artige Klassennamen, die es in diesem
   Tailwind-Build nie gab - daher lief der Streifen immer grau/unsichtbar statt in
   der Statusfarbe. Dezenter 4px-Streifen (nicht "riesig"), gleiche Farben wie die
   kt-badge-*-Varianten, damit Streifen und Status-Pill immer zusammenpassen. */
.kt-card-accent-primary { border-inline-start: 4px solid var(--primary) !important; }
.kt-card-accent-warning { border-inline-start: 4px solid #E08A1E !important; }
.dark .kt-card-accent-warning { border-inline-start-color: #F0A23E !important; }
.kt-card-accent-success { border-inline-start: 4px solid #12996B !important; }
.dark .kt-card-accent-success { border-inline-start-color: #2BB585 !important; }
.kt-card-accent-destructive { border-inline-start: 4px solid var(--destructive) !important; }
.kt-card-accent-info { border-inline-start: 4px solid #1599E4 !important; }
.dark .kt-card-accent-info { border-inline-start-color: #3BAAEA !important; }
.kt-card-accent-mono { border-inline-start: 4px solid var(--muted-foreground) !important; }

/* ===== carelogic: Auftrags-Deep-Link vom Dashboard =====
   OrderList.razor navigiert per URL-Fragment (#order-<Nummer>) zum einzelnen Auftrag
   (Admin-Dashboard "Handlungsbedarf" -> Auftrag oeffnen). Blazor scrollt automatisch
   zum Element mit passender ID; dieser Rahmen macht zusaetzlich sichtbar, welche
   Karte gemeint ist.
   .kt-order-target sitzt seit OrderItem.razor (TargetId) direkt auf .ord-row/.ord-tile
   selbst, kein umschliessendes Wrapper-Div mehr - Hilfsmittel/Versorgungen haben nie
   einen solchen Wrapper gehabt, und der Wrapper hatte hier zuvor den Grid-Stretch fuer
   die Kachelhoehe kaputt gemacht (.kt-order-target war das eigentliche Grid-Item statt
   .ord-tile). Daher direkte Selektoren ohne ">"-Kindbeziehung. */
.kt-order-target:target > .kt-card {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    border-radius: var(--radius-card);
}
/* Aufträge-Zeilenliste (.ord-row) und Kacheln (.ord-tile, siehe weiter unten) sind
   keine .kt-card mehr - Deep-Link-Rahmen hier zusaetzlich fuer diese Struktur. */
.ord-row.kt-order-target:target {
    outline: 3px solid var(--primary);
    outline-offset: -3px;
    border-radius: 12px;
    position: relative;
    z-index: 1;
}
.ord-tile.kt-order-target:target {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    border-radius: 16px;
}
@media (prefers-reduced-motion: no-preference) {
    .kt-order-target:target > .kt-card,
    .ord-row.kt-order-target:target,
    .ord-tile.kt-order-target:target {
        animation: kt-order-target-fade 2.4s ease-out;
    }
}
@keyframes kt-order-target-fade {
    0% { outline-color: var(--primary); }
    70% { outline-color: var(--primary); }
    100% { outline-color: transparent; }
}

/* ===== carelogic: Fokus-Anker fuer kt-modal-Dialoge =====
   .kt-modal bekommt beim Oeffnen per ElementReference.FocusAsync() den Fokus (siehe
   ModalComponentBase) - nur damit Escape zuverlaessig ankommt und Screenreader/Tastatur
   ueberhaupt merken, dass ein Dialog auf ist. .kt-modal deckt aber per position:fixed;
   inset:0 den GESAMTEN Viewport ab - ein normaler Fokusring wuerde daher wie ein Rahmen
   um den ganzen Bildschirm aussehen. tabindex="-1" heisst ohnehin "nur programmatisch
   fokussierbar, kein echtes interaktives Element", daher hier bewusst kein Ring. */
.kt-modal:focus {
    outline: none;
}

/* ===== carelogic: kt-modal wie Karte =====
   Eigenes Popup-Formular (z.B. OrganisationList.razor) statt DxPopup - gleicher
   grosser Radius wie kt-card/DxPopup, damit alle drei Dialog-Systeme einheitlich wirken. */
.kt-modal-content {
    border-radius: var(--radius-card);
    box-shadow: var(--surface-shadow-hover);
}

/* ===== carelogic: Tabellen-Header =====
   Styleguide-Vorgabe fuer Tabellenkoepfe: klein, fett, Versalien, gesperrt,
   Ink-3 statt normaler Fliesstext-Farbe (bisher: normalgewichtiger --secondary-foreground). */
.kt-table thead th {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* DxGrid-Pendant: gleicher Ink-3-Ton fuer den Spaltenkopf-Text. Nur die Textfarbe,
   keine Versalien/Sperrung - DevExpress' interne Grid-Kopf-Struktur ist nicht als
   CSS-Variable steuerbar und soll hier nicht per erratenem Selektor riskiert werden. */
:root {
    --dxbl-grid-header-color: var(--muted-foreground) !important;
}

/* ===== carelogic: DxGrid als schwebende Karte =====
   DxGrid zeichnet Rahmen/Radius schon selbst (--dxbl-grid-border-*), daher hier
   bewusst KEIN zweiter Rahmen - nur der gleiche weiche Schatten wie kt-card, damit
   die Tabelle nicht mehr nackt auf dem Canvas liegt, sondern wie der Rest der App
   als abgesetzte Flaeche wirkt. */
.dx-grid-card {
    border-radius: var(--radius-card);
    box-shadow: var(--surface-shadow);
}

/* ID + Klasse schlaegt die bg-background-Utility ohne !important */
#content.bg-background {
    background-color: var(--canvas);
}

/* ===== carelogic: Primaer-Buttons exakt nach Styleguide =====
   Styleguide-Original: .btn.primary{background:var(--brand);box-shadow:0 2px 8px rgba(13,101,153,.3)}
   - flache Vollfarbe, kein Verlauf. Der Verlauf war eine eigene Zutat von uns (an login-submit
   angelehnt), aber nicht Teil des eigentlichen Styleguides - daher wieder entfernt. */
.kt-btn:not(.kt-btn-outline):not(.kt-btn-ghost):not(.kt-btn-dashed):not(.kt-btn-mono):not(.kt-btn-destructive):not(.kt-btn-secondary):not(.kt-btn-light) {
    background: var(--primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
    border: 0;
}
.kt-btn:not(.kt-btn-outline):not(.kt-btn-ghost):not(.kt-btn-dashed):not(.kt-btn-mono):not(.kt-btn-destructive):not(.kt-btn-secondary):not(.kt-btn-light):hover {
    background: color-mix(in srgb, var(--primary) 88%, black);
}

/* Karten heben sich jetzt vor allem durch den Schatten ab (wie die Login-Karte) -
   der Rahmen ist nur noch eine sehr duenne Kante, kein zweites, hartes Umrandungs-
   Element mehr. Groesserer Radius (20px) statt der vorherigen calc(--radius + 4px). */
.kt-card {
    border-color: color-mix(in srgb, var(--surface-border) 60%, transparent);
    border-radius: var(--radius-card);
    box-shadow: var(--surface-shadow);
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

/* Nur Karten in Listen sind anfassbar - Formularkarten sollen nicht wackeln.
   Bewusst KEIN transform mehr hier (war vorher translateY(-1px) beim Hover):
   ein aktives transform auf einem Vorfahren erzeugt einen neuen Containing
   Block fuer position:fixed-Kinder - dadurch wurden unsere kt-modal-Dialoge
   (z.B. PositionListFlyout) beim Hover in die Karte "eingesperrt" statt am
   Viewport zentriert zu werden. Der Schatten allein reicht als Hover-Effekt. */
.kt-card-interactive:hover {
    border-color: var(--input);
    box-shadow: var(--surface-shadow-hover);
}

/* Sidebar und Header bleiben weiss, bekommen aber eine sichtbare Kante
   gegen den getoenten Canvas. */
.kt-sidebar,
.kt-header {
    border-color: var(--surface-border);
}

/*
 * Aktiver Menuepunkt.
 * Blazors NavLink setzt .active auf das <a class="kt-menu-link">, Metronic
 * erwartet .active aber auf dem Eltern-.kt-menu-item. Die kt-menu-item-active:*
 * Utilities greifen dadurch nie. Wir stylen den aktiven Link direkt.
 */
.kt-menu-link.active {
    background-color: var(--accent);
    border-radius: var(--radius);
    position: relative;
}

.kt-menu-link.active .kt-menu-title {
    color: var(--primary);
    font-weight: 600;
}

.kt-menu-link.active .kt-menu-icon,
.kt-menu-link.active .kt-menu-icon i {
    color: var(--primary);
}

/* Aktiver Marker an der Innenkante der Sidebar */
.kt-menu-link.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 9999px;
    background-color: var(--primary);
}

/* ===== carelogic: Dashboard-Bausteine (Home.razor, "Normal"-Rolle) =====
   Farbiges Icon-Quadrat (Styleguide: ".isq") und Kalenderblock (Styleguide: ".cal2"),
   bisher nicht als eigene Klassen im Projekt vorhanden. */
.kt-icon-tile {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 19px;
}
.kt-icon-tile.brand {
    background: var(--accent);
    color: var(--primary);
}
.kt-icon-tile.warning {
    background: #FBEBD3;
    color: #E08A1E;
}
.dark .kt-icon-tile.warning {
    background: #3E3220;
    color: #F0A23E;
}
.kt-icon-tile.destructive {
    background: #FBE4E3;
    color: #E1443F;
}
.dark .kt-icon-tile.destructive {
    background: #3E2726;
    color: #F0605B;
}
.kt-icon-tile.success {
    background: #DEF3EA;
    color: #12996B;
}
.dark .kt-icon-tile.success {
    background: #173A31;
    color: #2BB585;
}
.kt-icon-tile.mono {
    background: var(--muted);
    color: var(--muted-foreground);
}
/* Kleinere Variante fuer KPI-Kacheln (z.B. CustomerList.razor) statt wiederholtem
   Inline-Style width/height/font-size auf jeder einzelnen Kachel. */
.kt-icon-tile.sm {
    width: 28px;
    height: 28px;
    font-size: 15px;
}

/* ===== carelogic: Admin-Dashboard (CustomerHome.razor) =====
   Aufgabenzeilen mit Handlungsbedarf: Zaehler-Pille + aufklappbare Liste
   betroffener Auftraege, gleiche Kartenreihen-Optik wie kt-option-row. */
.kt-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.kt-cal-block {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--card);
    border: 1px solid var(--border);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    flex-shrink: 0;
}
.kt-cal-block small {
    font-size: 9px;
    font-weight: 700;
    color: var(--destructive);
    letter-spacing: .04em;
}
.kt-cal-block b {
    font-size: 16px;
}

.kt-section-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted-foreground);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ===== carelogic: Kundenliste Organisationssicht (CustomerList.razor) =====
   Avatar-Kachel mit Initialen in der Zeilenansicht, gleiche Eckenrundung wie
   .kt-icon-tile, Marken-Gradient statt Flaechenfarbe (unterscheidet Personen
   optisch von den einfarbigen Kachel-Icons). */
.kt-avatar-tile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--ring), var(--primary));
}

/* ===== carelogic: Aufträge-Redesign (Zeilenliste/Kacheln) =====
   1:1-Uebernahme aus dem freigegebenen ui-auftraege.html-Entwurf (uidesigner-Skill).
   Eigener "ord-"-Namensraum, damit nichts mit kt- bzw. Tailwind-Klassen kollidiert, die
   an anderer Stelle im Projekt schon etwas anderes bedeuten. Alle sechs Status-Akzentfarben
   sind reine Aliase auf die bestehenden --primary/--ring/--warning/--success/--purple/
   --destructive-Tokens (kein zweites, paralleles Farbsystem) - Light/Dark ergibt sich
   automatisch aus deren .dark-Ueberschreibung, hier ist daher kein eigener .dark-Block
   noetig. Deckt genau die 6 Status-Zuordnungen aus dem Styleguide ab: Primär (Vorschlag/
   Lieferung), Blau (Akzeptiert), Orange (In Bearbeitung), Rot (Warte auf Daten), Gruen
   (Verarbeitet), Lila (Werkstatt). */
:root {
    --ord-primary: var(--primary);  --ord-primary-soft: var(--accent);
    --ord-blue: var(--ring);        --ord-blue-soft: var(--ring-soft);
    --ord-amber: var(--warning);    --ord-amber-soft: var(--warning-soft);
    --ord-red: var(--destructive);  --ord-red-soft: var(--destructive-soft);
    --ord-green: var(--success);    --ord-green-soft: var(--success-soft);
    --ord-purple: var(--purple);    --ord-purple-soft: var(--purple-soft);
    --ord-gray: var(--muted-foreground);
    --ord-gray-soft: var(--muted);
}

.ord-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--surface-shadow);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ord-field { position: relative; max-width: 260px; width: 100%; }
.ord-field i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: var(--muted-foreground); pointer-events: none;
}
.ord-field input {
    width: 100%; padding: 9px 12px 9px 32px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--muted);
    font-size: 13px; font-family: inherit; outline: none; color: var(--foreground);
}
.ord-field input:focus {
    background: var(--card); border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--accent);
}

.ord-chip {
    border: 1px solid var(--border); background: var(--card); border-radius: 999px;
    padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--muted-foreground);
    cursor: pointer; display: inline-flex; gap: 7px; align-items: center; white-space: nowrap;
}
.ord-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ord-chip .n { background: var(--secondary); border-radius: 999px; padding: 1px 7px; font-size: 11px; }
.ord-chip.on .n { background: rgba(255,255,255,.22); color: #fff; }

.ord-seg { display: inline-flex; background: var(--secondary); border-radius: 10px; padding: 3px; flex: none; }
.ord-seg button {
    border: 0; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--muted-foreground);
    padding: 7px 13px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.ord-seg button.on { background: var(--card); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

.ord-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--surface-shadow); overflow: hidden; }

.ord-list .ord-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--border); }
.ord-list .ord-row .ord-stico { margin-top: 2px; }
.ord-list .ord-row .ord-oactions { margin-top: 1px; }
.ord-list > .ord-row:first-child { border-top: 0; }
.ord-list .ord-row:hover { background: var(--muted); }

.ord-stico { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 20px; }
.ord-stico.primary { background: var(--ord-primary-soft); color: var(--ord-primary); }
.ord-stico.blue { background: var(--ord-blue-soft); color: var(--ord-blue); }
.ord-stico.amber { background: var(--ord-amber-soft); color: var(--ord-amber); }
.ord-stico.red { background: var(--ord-red-soft); color: var(--ord-red); }
.ord-stico.green { background: var(--ord-green-soft); color: var(--ord-green); }
.ord-stico.gray { background: var(--ord-gray-soft); color: var(--ord-gray); }

.ord-obody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ord-otitle { display: flex; align-items: center; gap: 10px; }
.ord-osubj {
    flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--foreground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ord-badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
    padding: 4px 10px; border-radius: 999px; flex: none; white-space: nowrap;
}
.ord-badge.primary { background: var(--ord-primary-soft); color: var(--ord-primary); }
.ord-badge.blue { background: var(--ord-blue-soft); color: var(--ord-blue); }
.ord-badge.amber { background: var(--ord-amber-soft); color: var(--ord-amber); }
.ord-badge.red { background: var(--ord-red-soft); color: var(--ord-red); }
.ord-badge.green { background: var(--ord-green-soft); color: var(--ord-green); }
.ord-badge.gray { background: var(--ord-gray-soft); color: var(--ord-gray); }

/* Typ bleibt Fliesstext (Reparatur als einzige Ausnahme in Akzentfarbe) - Dauerversorgung
   ist inzwischen eine eigene, bewusst neutrale/graue Badge (.ord-badge.gray) statt Text:
   als letztes Element in der Zeile brach das lange Wort sonst haeufig alleine in die
   naechste Zeile um. Grau statt einer Statusfarbe, damit sie nicht mit dem farbigen
   Status-Badge oben im Header um Aufmerksamkeit konkurriert. */
.ord-rmeta { font-size: 12.5px; color: var(--muted-foreground); display: flex; flex-wrap: wrap; align-items: center; }
.ord-rmeta span:not(:last-child)::after { content: "·"; margin: 0 7px; color: var(--border); }
/* Icon + Text je Meta-Wert (Kalender fuer Daten, Barcode fuer Nummern, Kategorie fuer
   Typ/Produktgruppe) - inline-flex statt manuellem Abstand, damit Icon und Text sauber
   auf einer Zeile bleiben, egal ob im Text davor/danach ein &nbsp; steht oder nicht. */
.ord-rmeta span { display: inline-flex; align-items: center; gap: 4px; }
.ord-rmeta i { font-size: 13px; }
.ord-rmeta .repair { color: var(--ord-purple); font-weight: 600; }
.ord-rmeta .soon { color: var(--ord-amber); font-weight: 600; }

.ord-oattn .ord-badge { background: var(--ord-amber-soft); color: var(--ord-amber); }

.ord-oactions { display: flex; align-items: center; gap: 6px; flex: none; }
.ord-btn {
    border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; height: 34px;
    font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--card); color: var(--foreground);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.ord-btn:hover { background: var(--muted); }
.ord-btn.icon { width: 34px; padding: 0; justify-content: center; flex: none; }
/* Nachbestellung (Versorgungen) ist die Hauptaktion pro Karte/Zeile und bekommt bewusst
   Markenfarbe statt Outline, damit sie sich von der sekundaeren "Positionen"-Aktion
   abhebt (Design-Prinzip: eine Aktion ist die betonte, Aktionen tragen Verben). */
.ord-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.ord-btn.primary:hover { background: color-mix(in srgb, var(--primary) 88%, black); }
.ord-chevicon { display: inline-flex; transition: transform .15s; }
.ord-chevicon.open { transform: rotate(180deg); }

.ord-history { padding: 12px 14px; background: var(--muted); border-radius: 12px; display: flex; flex-direction: column; }
.ord-hitem { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.ord-hitem .d { color: var(--muted-foreground); width: 110px; flex: none; }
.ord-hitem:not(:last-child) { border-bottom: 1px dashed var(--border); }

/* .ord-grid/.ord-tile werden bewusst auch von der Hilfsmittel-Kachelansicht
   (MedicalAidItem.razor) mitgenutzt, nicht nur von den Auftrags-Kacheln - beide
   Seiten sollen "gleich groß" und im gleichen Stil wirken. align-items:stretch ist
   CSS-Grid-Standard, hier trotzdem explizit, damit das nicht durch eine spaetere
   Regel versehentlich ueberschrieben wird: alle Kacheln einer Zeile bekommen so
   automatisch die Hoehe der jeweils groessten Kachel.
   Bewusst auto-fill statt auto-fit: bei auto-fit kollabieren leere Spalten, wenn
   weniger Kacheln als Spalten vorhanden sind - die verbleibenden Kacheln ziehen sich
   dann auseinander und wirken je nach Anzahl unterschiedlich groß (z.B. 2 offene
   Auftraege vs. 6 Hilfsmittel). auto-fill haelt die Spaltenanzahl konstant reserviert,
   auch wenn Spalten leer bleiben - Kachelbreite bleibt so unabhaengig von der
   Elementanzahl gleich, die Spaltenzahl passt sich beim Resizen trotzdem weiter an. */
.ord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding: 18px; align-items: stretch; }

/* Kachel-Feinschliff: farbiger Statusstreifen links, weicher Schatten mit Hover-Anheben,
   Titel/Badge übereinander statt nebeneinander (verhindert Kollision bei langen Titeln) -
   1:1 aus dem freigegebenen "schöner machen"-Entwurf, .ord-tile.<farbe> nutzt dieselben
   --ord-*-Farbvariablen wie .ord-stico/.ord-badge, damit Streifen und Icon immer zusammenpassen.
   Bewusst KEIN transform beim Hover (siehe .kt-card-interactive:hover weiter oben): ein
   aktives transform erzeugt einen neuen Containing Block fuer position:fixed-Kinder und
   sperrt dadurch offene kt-modal-Dialoge (z.B. PositionListFlyout) in die Kachel ein,
   statt sie am Viewport zu zentrieren. Der Schatten allein reicht als Hover-Effekt. */
.ord-tile {
    border: 1px solid var(--border); border-inline-start: 4px solid var(--border);
    border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
    background: var(--card); box-shadow: var(--surface-shadow);
    transition: box-shadow .15s;
}
.ord-tile:hover { box-shadow: 0 4px 16px rgba(15,25,35,.1), 0 20px 40px -14px rgba(13,101,153,.18); }
.ord-tile.primary { border-inline-start-color: var(--ord-primary); }
.ord-tile.blue { border-inline-start-color: var(--ord-blue); }
.ord-tile.amber { border-inline-start-color: var(--ord-amber); }
.ord-tile.red { border-inline-start-color: var(--ord-red); }
.ord-tile.green { border-inline-start-color: var(--ord-green); }
.ord-tile.gray { border-inline-start-color: var(--ord-gray); }
.ord-tile .top { display: flex; align-items: center; gap: 12px; }
.ord-tile .subj {
    font-size: 14.5px; font-weight: 700; color: var(--foreground);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ord-tile .ord-obody { gap: 5px; }
.ord-tile .ord-rmeta { font-size: 12.5px; overflow-wrap: anywhere; hyphens: auto; }
.ord-tile .ord-ometa { font-size: 12px; }
.ord-tile .foot { display: flex; gap: 7px; margin-top: auto; border-top: 1px solid var(--border); padding-top: 12px; flex-wrap: wrap; }

/* Aufklappbare "N aktive Aufträge"-Zeile - aktuell fuer Hilfsmittel-Kacheln, aber
   generisch benannt (nicht "hm-"), falls andere Kacheln spaeter denselben
   Kompakt-Verlauf brauchen. Farben/Icon-Kachel darin nutzen die vorhandenen
   .ord-stico/.ord-badge-Klassen in kleinerer Groesse statt eigener Duplikate. */
.ord-acctoggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px solid var(--border); border-radius: 11px; padding: 9px 12px;
    cursor: pointer; background: var(--muted);
}
.ord-acctoggle.none { cursor: default; color: var(--muted-foreground); font-size: 12.5px; justify-content: flex-start; }
.ord-acctoggle .lbl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--foreground); }
.ord-acctoggle .lbl i { color: var(--ord-amber); font-size: 14px; }
.ord-accbody { display: none; flex-direction: column; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.ord-accbody.open { display: flex; }
.ord-accbody .row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--border); }
.ord-accbody .row:first-child { border-top: 0; }
.ord-accbody .row:hover { background: var(--muted); }
.ord-accbody .subj { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kachel-Skeleton fuer den Ladezustand (Hilfsmittel-Kacheln) - gleiches
   Schimmer-Schema wie .ord-sk-row, nur als Kartenrahmen statt Zeile. */
.ord-sk-card { border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--card); }

.ord-tag {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
    padding: 3px 9px; border-radius: 7px; flex: none; white-space: nowrap;
    background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground);
}
.ord-tag.purple { background: var(--ord-purple-soft); color: var(--ord-purple); border-color: transparent; }
.ord-tag.brand { background: var(--accent); color: var(--primary); border-color: transparent; }
.ord-ometa { font-size: 12.5px; color: var(--muted-foreground); display: flex; gap: 6px; flex-wrap: wrap; }
.ord-ometa span:not(:last-child)::after { content: "·"; margin-left: 6px; color: var(--border); }

.ord-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 54px 20px; gap: 4px;
}
.ord-empty .eic {
    width: 56px; height: 56px; border-radius: 16px; background: var(--muted); color: var(--muted-foreground);
    display: grid; place-items: center; margin-bottom: 13px; font-size: 24px;
}
.ord-empty .eic.found { background: var(--accent); color: var(--primary); }
.ord-empty b { font-size: 14.5px; color: var(--foreground); }
.ord-empty span { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.5; max-width: 340px; margin-top: 2px; }
.ord-empty .ord-btn { margin-top: 14px; }

/* Ladezustand: Skeleton-Zeilen statt Text, gleiches Schema wie im Entwurf. */
.ord-sk {
    background: linear-gradient(90deg, var(--muted) 25%, var(--secondary) 37%, var(--muted) 63%);
    background-size: 400% 100%; animation: ord-shimmer 1.4s infinite; border-radius: 7px;
}
@keyframes ord-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.ord-sk-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--border); }
.ord-sk-row:first-child { border-top: 0; }
.ord-sk-ico { width: 42px; height: 42px; border-radius: 12px; flex: none; }