/* ============================================================================
   VDM – Metall: globale Erscheinungsbild-Ebene (Pendant zu vdm-darkteal.css)
   ----------------------------------------------------------------------------
   Spiegelt die darkteal-Optik fuer das Schema "Metall"
   (html[data-vdm-style="metal"] bzw. .vdm-style-metal am Shell):
   warmes Schwarz + Kupfer/Orange statt Nachtblau + Mint.
   Nur Farbe/Typo/Radius; semantische Farben (rot/gruen/amber/blau) bleiben.
   Wird in App.razor NACH vdm-metal? -> nach vdm-darkteal.css eingebunden.
   ============================================================================ */

html[data-vdm-style="metal"] {
    --vdm-radius-card: 12px;
    --vdm-radius-sm: 8px;
    --vdm-focus-ring: rgba(231, 138, 83, .30);
}

/* Typografie */
html[data-vdm-style="metal"] h1,
html[data-vdm-style="metal"] .page-title,
html[data-vdm-style="metal"] .entity-page-title,
html[data-vdm-style="metal"] .support-header h1 {
    letter-spacing: -.01em;
}
html[data-vdm-style="metal"] a:not(.btn):not(.dxbl-btn):not(.nav-link):not(.vdm-launcher-tile):not(.vdm-brand):not([class*="tab"]) {
    color: #ffa463;
}
html[data-vdm-style="metal"] a:not(.btn):not(.dxbl-btn):not(.nav-link):not(.vdm-launcher-tile):not(.vdm-brand):not([class*="tab"]):hover {
    color: #ffb987;
}

/* Tabellenkoepfe (DevExpress + eigene Tabellen) */
html[data-vdm-style="metal"] .dxbl-grid .dxbl-grid-header-row > th,
html[data-vdm-style="metal"] .dxbl-grid .dxbl-grid-header-row > td {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #b0a89f !important;
}
html[data-vdm-style="metal"] .entity-portionen-grid th,
html[data-vdm-style="metal"] .rezepte-table th {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #b0a89f;
}
html[data-vdm-style="metal"] .rezepte-table tbody tr:hover,
html[data-vdm-style="metal"] .entity-portionen-grid tbody tr:hover {
    background: #1c1a1e;
}

/* Aktive/fokussierte Grid-Zeile: Kupfer-Balken links */
html[data-vdm-style="metal"] .dxbl-grid .dxbl-grid-data-row.dxbl-grid-focused-row > td:first-child,
html[data-vdm-style="metal"] .dxbl-grid .dxbl-grid-data-row.dxbl-grid-selected-row > td:first-child {
    box-shadow: inset 3px 0 0 #e78a53;
}

/* Radien */
html[data-vdm-style="metal"] .dxbl-btn,
html[data-vdm-style="metal"] .btn {
    border-radius: 8px;
}
html[data-vdm-style="metal"] input:not([type="checkbox"]):not([type="radio"]),
html[data-vdm-style="metal"] select,
html[data-vdm-style="metal"] textarea {
    border-radius: 8px;
}
html[data-vdm-style="metal"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-vdm-style="metal"] select:focus,
html[data-vdm-style="metal"] textarea:focus {
    outline: none;
    border-color: #e78a53;
    box-shadow: 0 0 0 3px var(--vdm-focus-ring);
}
html[data-vdm-style="metal"] .dxbl-text-edit.dxbl-focused,
html[data-vdm-style="metal"] .dxbl-edit.dxbl-focused {
    box-shadow: 0 0 0 3px var(--vdm-focus-ring);
}
html[data-vdm-style="metal"] .card,
html[data-vdm-style="metal"] .entity-toolbar-card,
html[data-vdm-style="metal"] .entity-grid-card,
html[data-vdm-style="metal"] .entity-detail-card,
html[data-vdm-style="metal"] .artikel-toolbar-card,
html[data-vdm-style="metal"] .artikel-grid-card,
html[data-vdm-style="metal"] .artikel-info-card,
html[data-vdm-style="metal"] .rezepte-list-card,
html[data-vdm-style="metal"] .rezepte-chart-card {
    border-radius: 12px;
}

/* Launcher-Gruppen-Untertitel */
html[data-vdm-style="metal"] .vdm-launcher-group > div > small {
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9b968f;
}

/* Sekundaer-Buttons global (auch in DevExpress-Popups): warmer Sekundaer-Ton */
html[data-vdm-style="metal"] .dxbl-btn.dxbl-btn-secondary {
    background: #242227 !important;
    border-color: #38353b !important;
    color: #d8d3cd !important;
}
html[data-vdm-style="metal"] .dxbl-btn.dxbl-btn-secondary:hover:not(:disabled):not(.dxbl-disabled) {
    background: #2d2a30 !important;
    border-color: #454049 !important;
    color: #ece9e6 !important;
}

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

/* ============================================================================
   Chat-Widget – Metal (global, valide Selektoren). Akzent #e78a53.
   ========================================================================== */
html[data-vdm-style="metal"] .chat-panel { background:#262019; color:#ececec; border-color:rgba(255,255,255,.08); }
html[data-vdm-style="metal"] .chat-panel-head,
html[data-vdm-style="metal"] .chat-fab,
html[data-vdm-style="metal"] .chat-msg.is-own,
html[data-vdm-style="metal"] .chat-send-btn { background:#e78a53; color:#fff; }
html[data-vdm-style="metal"] .chat-fab:hover,
html[data-vdm-style="metal"] .chat-send-btn:hover { background:#d2743d; }
html[data-vdm-style="metal"] .chat-msg.is-other { background:#3a2f25; color:#ececec; }
html[data-vdm-style="metal"] .chat-input,
html[data-vdm-style="metal"] .chat-search { background:#1c1712; color:#ececec; border-color:rgba(255,255,255,.15); }
html[data-vdm-style="metal"] .chat-avatar { background:#5a4636; color:#ffe9d8; }
html[data-vdm-style="metal"] .chat-ghost-btn { color:#f0a271; border-color:rgba(231,138,83,.5); }
html[data-vdm-style="metal"] .chat-konv:hover,
html[data-vdm-style="metal"] .chat-person:hover,
html[data-vdm-style="metal"] .chat-person.is-selected,
html[data-vdm-style="metal"] .chat-mention-item:hover,
html[data-vdm-style="metal"] .chat-quick-item:hover,
html[data-vdm-style="metal"] .chat-msg-menu-item:hover,
html[data-vdm-style="metal"] .chat-ghost-btn:hover { background:rgba(231,138,83,.16); }
html[data-vdm-style="metal"] .chat-mention-pop,
html[data-vdm-style="metal"] .chat-msg-menu,
html[data-vdm-style="metal"] .chat-quick-menu,
html[data-vdm-style="metal"] .chat-forward { background:#2b2319; color:#ececec; border-color:rgba(255,255,255,.12); }
html[data-vdm-style="metal"] .chat-presence-dot--corner { border-color:#262019; }

/* Teilen-Dialog (interne Memos) – Metal */
html[data-vdm-style="metal"] .chat-teilen-dialog { background:#2b2319; color:#ececec; }
html[data-vdm-style="metal"] .chat-teilen-note,
html[data-vdm-style="metal"] .chat-teilen-suche { background:#1c1712; color:#ececec; border-color:rgba(255,255,255,.15); }
html[data-vdm-style="metal"] .chat-teilen-btn { color:#f0a271; border-color:rgba(231,138,83,.5); }
html[data-vdm-style="metal"] .chat-teilen-av { background:#5a4636; color:#ffe9d8; }

html[data-vdm-style="metal"] .chat-msg.is-other .chat-mention-tag { background: rgba(231,138,83,.22); color:#f0a271; }

html[data-vdm-style="metal"] .ki-aus-dialog { background:#2b2319; color:#ececec; }
html[data-vdm-style="metal"] .ki-aus-frage { background:#1c1712; color:#ececec; border-color:rgba(255,255,255,.15); }
html[data-vdm-style="metal"] .ki-aus-btn.is-primary { background:#e78a53; border-color:#e78a53; }
html[data-vdm-style="metal"] .ki-aus-trigger { color:#f0a271; border-color:rgba(231,138,83,.5); }