/* ============================================================================
   VDM – Dark (Teal): Erscheinungsbild-Angleichung an das BI.Data-"Dark"-Theme
   ----------------------------------------------------------------------------
   Diese Datei uebertraegt die optische Sprache (Typografie, Radien,
   Tabellen-/Input-/Button-Behandlung, Akzente) aus BI.Data (wwwroot/app.css,
   [data-theme="dark"]) auf VDM. Die Farb-PALETTE ist bereits identisch
   (in vdm-styles.css). Hier geht es um Schrift, Radien und Komponenten-Look.

   WICHTIG:
   - Gilt ausschliesslich fuer das Schema "Dark (Teal)"
     (html[data-vdm-style="darkteal"] bzw. .vdm-style-darkteal am Shell).
   - Hell / Dunkel / Metall bleiben voellig unberuehrt.
   - Nur CSS-Optik (Farbe/Typo/Radius/Abstand-Feinschliff), nichts Inhaltliches.
   - Wird in App.razor NACH vdm-styles.css eingebunden.
   ============================================================================ */

/* ---------- BI.Data-Design-Tokens fuer darkteal ---------- */
html[data-vdm-style="darkteal"] {
    /* BI.Data: --radius 12px / --radius-sm 8px */
    --vdm-radius-card: 12px;
    --vdm-radius-sm: 8px;
    /* Fokusring-Farbe (BI.Data: box-shadow 0 0 0 3px var(--primary-50)) */
    --vdm-focus-ring: rgba(43, 179, 163, .28);
}

/* ============================================================================
   Typografie – BI.Data-Anmutung
   ========================================================================== */
/* Ueberschriften etwas straffer wie im Vorbild (h1 letter-spacing -.01em) */
html[data-vdm-style="darkteal"] h1,
html[data-vdm-style="darkteal"] .page-title,
html[data-vdm-style="darkteal"] .entity-page-title,
html[data-vdm-style="darkteal"] .support-header h1 {
    letter-spacing: -.01em;
}

/* Inhalts-Links auf Teal (BI.Data: a { color: var(--primary-600) }),
   dark-lesbar aufgehellt. Buttons/Navigation ausgenommen. */
html[data-vdm-style="darkteal"] a:not(.btn):not(.dxbl-btn):not(.nav-link):not(.vdm-launcher-tile):not(.vdm-brand):not([class*="tab"]) {
    color: #37e0cf;
}
html[data-vdm-style="darkteal"] a:not(.btn):not(.dxbl-btn):not(.nav-link):not(.vdm-launcher-tile):not(.vdm-brand):not([class*="tab"]):hover {
    color: #5fe0d2;
}

/* ============================================================================
   Tabellenkoepfe – die zentrale Lesbarkeits-Signatur aus BI.Data
   (GROSSBUCHSTABEN, Laufweite, gedaempftes Blau-Grau, Surface-2-Grund)
   Gilt fuer DevExpress-Grids und die eigenen HTML-Tabellen.
   ========================================================================== */
html[data-vdm-style="darkteal"] .dxbl-grid .dxbl-grid-header-row > th,
html[data-vdm-style="darkteal"] .dxbl-grid .dxbl-grid-header-row > td {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9db0c6 !important;
}

html[data-vdm-style="darkteal"] .entity-portionen-grid th,
html[data-vdm-style="darkteal"] .rezepte-table th {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9db0c6;
}

/* Zeilen-Hover (BI.Data-Dark: #1e2733) – fuer eigene Tabellen zusaetzlich */
html[data-vdm-style="darkteal"] .rezepte-table tbody tr:hover,
html[data-vdm-style="darkteal"] .entity-portionen-grid tbody tr:hover {
    background: #1e2733;
}

/* Aktive/fokussierte Zeile: Teal-Balken links + leichte Teal-Flaeche
   (BI.Data: .zeile-aktiv { background: primary-50; box-shadow: inset 3px 0 0 primary }) */
html[data-vdm-style="darkteal"] .dxbl-grid .dxbl-grid-data-row.dxbl-grid-focused-row > td:first-child,
html[data-vdm-style="darkteal"] .dxbl-grid .dxbl-grid-data-row.dxbl-grid-selected-row > td:first-child {
    box-shadow: inset 3px 0 0 #2bb3a3;
}

/* ============================================================================
   Buttons – BI.Data-Radius (8px). Primaer bleibt Teal (bereits gemappt),
   Sekundaer/Danger laufen ueber die DevExpress-Teal-Rampe.
   ========================================================================== */
html[data-vdm-style="darkteal"] .dxbl-btn,
html[data-vdm-style="darkteal"] .btn {
    border-radius: 8px;
}

/* ============================================================================
   Eingabefelder – BI.Data: Radius 8px + Teal-Fokusring
   (Farben #202a37 / #33414f setzt bereits vdm-styles.css)
   ========================================================================== */
html[data-vdm-style="darkteal"] input:not([type="checkbox"]):not([type="radio"]),
html[data-vdm-style="darkteal"] select,
html[data-vdm-style="darkteal"] textarea {
    border-radius: 8px;
}
html[data-vdm-style="darkteal"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-vdm-style="darkteal"] select:focus,
html[data-vdm-style="darkteal"] textarea:focus {
    outline: none;
    border-color: #2bb3a3;
    box-shadow: 0 0 0 3px var(--vdm-focus-ring);
}

/* DevExpress-Editoren: dezenter Teal-Fokusrahmen passend zum Vorbild */
html[data-vdm-style="darkteal"] .dxbl-text-edit.dxbl-focused,
html[data-vdm-style="darkteal"] .dxbl-edit.dxbl-focused {
    box-shadow: 0 0 0 3px var(--vdm-focus-ring);
}

/* ============================================================================
   Karten / Panels – BI.Data-Radius (12px) fuer die gaengigen Card-Klassen
   ========================================================================== */
html[data-vdm-style="darkteal"] .card,
html[data-vdm-style="darkteal"] .entity-toolbar-card,
html[data-vdm-style="darkteal"] .entity-grid-card,
html[data-vdm-style="darkteal"] .entity-detail-card,
html[data-vdm-style="darkteal"] .artikel-toolbar-card,
html[data-vdm-style="darkteal"] .artikel-grid-card,
html[data-vdm-style="darkteal"] .artikel-info-card,
html[data-vdm-style="darkteal"] .rezepte-list-card,
html[data-vdm-style="darkteal"] .rezepte-chart-card {
    border-radius: 12px;
}

/* ============================================================================
   Menue / Flyouts – Gruppen-Untertitel im App-Launcher dezent gedaempft
   (wie BI.Data .nav-gruppe – nur das kleine <small>, nicht der Haupttitel)
   ========================================================================== */
html[data-vdm-style="darkteal"] .vdm-launcher-group > div > small {
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7f93ad;
}

/* ============================================================================
   Sekundaer-Buttons global (auch in DevExpress-Popups/Dialogen, die am <body>
   rendern): einheitlicher dunkler Sekundaer-Ton. Behebt u. a. die weissen
   "Abbrechen"-Buttons in Bearbeiten-Dialogen. Primaer (Teal) und Danger (rot)
   bleiben unberuehrt; hoeher spezifische Komponenten-Regeln (z. B. teal-gefuellte
   Drawer-Kopf-Buttons) gewinnen weiterhin.
   ========================================================================== */
html[data-vdm-style="darkteal"] .dxbl-btn.dxbl-btn-secondary {
    background: #263140 !important;
    border-color: #33414f !important;
    color: #cdd8e6 !important;
}
html[data-vdm-style="darkteal"] .dxbl-btn.dxbl-btn-secondary:hover:not(:disabled):not(.dxbl-disabled) {
    background: #2f3c4e !important;
    border-color: #3c4b5e !important;
    color: #e6edf5 !important;
}

/* Hinweis: Icon-Aufhellung erfolgt gezielt pro Komponente (SVG-<img>), da
   .tb-icon bereits ueber currentColor + Palette (--vdm-icon-muted) hell ist
   und ein pauschaler Override Icons auf Teal-Buttons vergrauen wuerde. */

/* ============================================================================

/* ============================================================================
   Chat-Widget – Dark Teal (global, valide Selektoren). Akzent #2bb3a3.
   ========================================================================== */
html[data-vdm-style="darkteal"] .chat-panel { background:#10302c; color:#e2e8f0; border-color:rgba(255,255,255,.08); }
html[data-vdm-style="darkteal"] .chat-panel-head,
html[data-vdm-style="darkteal"] .chat-fab,
html[data-vdm-style="darkteal"] .chat-msg.is-own,
html[data-vdm-style="darkteal"] .chat-send-btn { background:#2bb3a3; color:#fff; }
html[data-vdm-style="darkteal"] .chat-fab:hover,
html[data-vdm-style="darkteal"] .chat-send-btn:hover { background:#229488; }
html[data-vdm-style="darkteal"] .chat-msg.is-other { background:#1c3f39; color:#e2e8f0; }
html[data-vdm-style="darkteal"] .chat-input,
html[data-vdm-style="darkteal"] .chat-search { background:#0b2521; color:#e2e8f0; border-color:rgba(255,255,255,.15); }
html[data-vdm-style="darkteal"] .chat-avatar { background:#1c4d46; color:#d7fff8; }
html[data-vdm-style="darkteal"] .chat-ghost-btn { color:#37e0cf; border-color:rgba(43,179,163,.5); }
html[data-vdm-style="darkteal"] .chat-konv:hover,
html[data-vdm-style="darkteal"] .chat-person:hover,
html[data-vdm-style="darkteal"] .chat-person.is-selected,
html[data-vdm-style="darkteal"] .chat-mention-item:hover,
html[data-vdm-style="darkteal"] .chat-quick-item:hover,
html[data-vdm-style="darkteal"] .chat-msg-menu-item:hover,
html[data-vdm-style="darkteal"] .chat-ghost-btn:hover { background:rgba(43,179,163,.16); }
html[data-vdm-style="darkteal"] .chat-mention-pop,
html[data-vdm-style="darkteal"] .chat-msg-menu,
html[data-vdm-style="darkteal"] .chat-quick-menu,
html[data-vdm-style="darkteal"] .chat-forward { background:#123833; color:#e2e8f0; border-color:rgba(255,255,255,.12); }
html[data-vdm-style="darkteal"] .chat-presence-dot--corner { border-color:#10302c; }

/* Teilen-Dialog (interne Memos) – Dark Teal */
html[data-vdm-style="darkteal"] .chat-teilen-dialog { background:#123833; color:#e2e8f0; }
html[data-vdm-style="darkteal"] .chat-teilen-note,
html[data-vdm-style="darkteal"] .chat-teilen-suche { background:#0b2521; color:#e2e8f0; border-color:rgba(255,255,255,.15); }
html[data-vdm-style="darkteal"] .chat-teilen-btn { color:#37e0cf; border-color:rgba(43,179,163,.5); }
html[data-vdm-style="darkteal"] .chat-teilen-av { background:#1c4d46; color:#d7fff8; }

html[data-vdm-style="darkteal"] .chat-msg.is-other .chat-mention-tag { background: rgba(43,179,163,.22); color:#37e0cf; }

html[data-vdm-style="darkteal"] .ki-aus-dialog { background:#123833; color:#e2e8f0; }
html[data-vdm-style="darkteal"] .ki-aus-frage { background:#0b2521; color:#e2e8f0; border-color:rgba(255,255,255,.15); }
html[data-vdm-style="darkteal"] .ki-aus-btn.is-primary { background:#2bb3a3; border-color:#2bb3a3; }
html[data-vdm-style="darkteal"] .ki-aus-trigger { color:#37e0cf; border-color:rgba(43,179,163,.5); }