/* ══════════════════════════════════════════════════════════════════
   DogfireQ UI – styles.css
   Pflicht-Einstiegspunkt für Vaadin 24 / Vite.
   Enthält das vollständige DogfireQ3 Dark-Theme.
   ══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   1. LUMO VARIABLEN – Dark Mode Override
   ───────────────────────────────────────────── */

html {
  --lumo-base-color:             #0a0b10;
  --lumo-body-text-color:        #e8e8f0;
  --lumo-primary-color:          #ff7a00;
  --lumo-primary-text-color:     #ff7a00;
  --lumo-primary-color-10pct:    rgba(255, 122, 0, 0.10);
  --lumo-primary-color-50pct:    rgba(255, 122, 0, 0.50);
  --lumo-error-color:            #ef4444;
  --lumo-error-color-10pct:      rgba(239, 68, 68, 0.10);
  --lumo-error-text-color:       #f87171;
  --lumo-success-color:          #22c55e;
  --lumo-success-color-10pct:    rgba(34, 197, 94, 0.10);
  --lumo-success-text-color:     #4ade80;
  --lumo-warning-color:          #fbbf24;
  --lumo-warning-text-color:     #fde68a;

  --lumo-shade:          #e8e8f0;
  --lumo-shade-5pct:     rgba(232, 232, 240, 0.05);
  --lumo-shade-10pct:    rgba(232, 232, 240, 0.10);
  --lumo-shade-20pct:    rgba(232, 232, 240, 0.20);
  --lumo-shade-30pct:    rgba(232, 232, 240, 0.30);
  --lumo-shade-40pct:    rgba(232, 232, 240, 0.40);
  --lumo-shade-50pct:    rgba(232, 232, 240, 0.50);
  --lumo-shade-60pct:    rgba(232, 232, 240, 0.60);
  --lumo-shade-70pct:    rgba(232, 232, 240, 0.70);
  --lumo-shade-80pct:    rgba(232, 232, 240, 0.80);
  --lumo-shade-90pct:    rgba(232, 232, 240, 0.90);

  --lumo-contrast:       #e8e8f0;
  --lumo-contrast-5pct:  rgba(232, 232, 240, 0.05);
  --lumo-contrast-10pct: rgba(232, 232, 240, 0.10);
  --lumo-contrast-20pct: rgba(232, 232, 240, 0.12);
  --lumo-contrast-30pct: rgba(232, 232, 240, 0.18);
  --lumo-contrast-40pct: rgba(232, 232, 240, 0.26);
  --lumo-contrast-50pct: rgba(232, 232, 240, 0.38);
  --lumo-contrast-60pct: rgba(232, 232, 240, 0.52);
  --lumo-contrast-70pct: rgba(232, 232, 240, 0.69);
  --lumo-contrast-80pct: rgba(232, 232, 240, 0.83);
  --lumo-contrast-90pct: rgba(232, 232, 240, 0.94);

  --lumo-secondary-text-color: #6a6a7c;
  --lumo-tertiary-text-color:  #3c3c4e;
  --lumo-disabled-text-color:  #3c3c4e;
  --lumo-link-color:           #ff7a00;
  --lumo-header-text-color:    #e8e8f0;

  --lumo-tint:           #e8e8f0;
  --lumo-tint-5pct:      rgba(232, 232, 240, 0.05);
  --lumo-tint-10pct:     rgba(232, 232, 240, 0.10);
  --lumo-tint-20pct:     rgba(232, 232, 240, 0.08);
  --lumo-tint-30pct:     rgba(232, 232, 240, 0.12);
  --lumo-tint-40pct:     rgba(232, 232, 240, 0.18);
  --lumo-tint-50pct:     rgba(232, 232, 240, 0.26);
  --lumo-tint-60pct:     rgba(232, 232, 240, 0.38);
  --lumo-tint-70pct:     rgba(232, 232, 240, 0.52);
  --lumo-tint-80pct:     rgba(232, 232, 240, 0.69);
  --lumo-tint-90pct:     rgba(232, 232, 240, 0.83);

  --lumo-border-radius-s:  6px;
  --lumo-border-radius-m:  10px;
  --lumo-border-radius-l:  14px;

  --lumo-box-shadow-s: 0 2px 12px rgba(0, 0, 0, 0.5);
  --lumo-box-shadow-m: 0 6px 24px rgba(0, 0, 0, 0.55);
  --lumo-box-shadow-l: 0 14px 40px rgba(0, 0, 0, 0.6);

  /* DogfireQ Design Tokens */
  --df-bg:            #0a0b10;
  --df-surface:       #11121a;
  --df-surface-alt:   #171824;
  --df-surface-card:  #1a1b26;
  --df-accent:        #ff7a00;
  --df-accent-soft:   rgba(255, 122, 0, 0.12);
  --df-accent-border: rgba(255, 122, 0, 0.35);
  --df-accent-glow:   rgba(255, 122, 0, 0.25);
  --df-moderator:     #00aaff;
  --df-text:          #e8e8f0;
  --df-text-dim:      #6a6a7c;
  --df-text-dimmer:   #3c3c4e;
  --df-green:         #22c55e;
  --df-green-soft:    rgba(34, 197, 94, 0.12);
  --df-yellow:        #fbbf24;
  --df-red:           #ef4444;
  --df-red-soft:      rgba(239, 68, 68, 0.10);
  --df-radius:        10px;
  --df-radius-lg:     14px;
}


/* ─────────────────────────────────────────────
   2. BODY / HINTERGRUND
   ───────────────────────────────────────────── */

body, html {
  background: var(--df-bg) !important;
  color: var(--df-text) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}


/* ─────────────────────────────────────────────
   3. APP-LAYOUT
   ───────────────────────────────────────────── */

vaadin-app-layout {
  background: var(--df-bg) !important;
}

vaadin-app-layout::part(navbar) {
  background: var(--df-surface) !important;
  border-bottom: 1px solid var(--df-accent-border) !important;
  box-shadow: none !important;
  padding: 0 1rem;
  height: 56px;
  min-height: 56px;
}

vaadin-app-layout::part(drawer) {
  background: var(--df-surface) !important;
  border-right: 1px solid var(--df-accent-border) !important;
  box-shadow: none !important;
  width: 216px;
}

vaadin-app-layout::part(content) {
  background: var(--df-bg) !important;
}

vaadin-drawer-toggle { color: var(--df-text-dim) !important; }
vaadin-drawer-toggle:hover { color: var(--df-accent) !important; }


/* ─────────────────────────────────────────────
   4. NAVBAR & DRAWER-INHALTE
   ───────────────────────────────────────────── */

vaadin-app-layout [slot="navbar"] h2 {
  color: var(--df-accent) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-shadow: 0 0 16px var(--df-accent-glow);
  margin: 0 !important;
}

vaadin-app-layout [slot="navbar"] vaadin-button {
  color: var(--df-text-dim) !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--df-radius) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.2s;
}

vaadin-app-layout [slot="navbar"] vaadin-button:hover {
  color: var(--df-red) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  background: var(--df-red-soft) !important;
}

vaadin-app-layout [slot="drawer"] a {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: var(--df-radius);
  margin: 1px 6px;
  color: var(--df-text-dim) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: all 0.2s;
}

vaadin-app-layout [slot="drawer"] a:hover {
  background: var(--df-accent-soft) !important;
  color: var(--df-text) !important;
}

vaadin-app-layout [slot="drawer"] a[aria-current="true"],
vaadin-app-layout [slot="drawer"] a.highlight {
  background: var(--df-accent-soft) !important;
  color: var(--df-accent) !important;
  border-left: 2px solid var(--df-accent);
  padding-left: 12px;
}

vaadin-app-layout [slot="drawer"] span {
  font-size: 11px !important;
  color: var(--df-text-dimmer) !important;
  padding: 8px 14px;
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: auto;
}

vaadin-app-layout [slot="drawer"] vaadin-scroller {
  padding: 10px 0 !important;
}


/* ─────────────────────────────────────────────
   5. INPUT-FELDER
   ───────────────────────────────────────────── */

vaadin-text-field,
vaadin-email-field,
vaadin-password-field,
vaadin-text-area,
vaadin-combo-box {
  --vaadin-input-field-background:        rgba(255, 255, 255, 0.05);
  --vaadin-input-field-border-color:      rgba(255, 255, 255, 0.10);
  --vaadin-input-field-border-radius:     var(--df-radius);
  --vaadin-input-field-font-size:         14px;
  --vaadin-input-field-color:             var(--df-text);
  --vaadin-input-field-placeholder-color: var(--df-text-dimmer);
  color: var(--df-text);
}

vaadin-text-field::part(input-field),
vaadin-email-field::part(input-field),
vaadin-password-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-combo-box::part(input-field) {
  color: var(--df-text) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

vaadin-text-field:hover::part(input-field),
vaadin-email-field:hover::part(input-field),
vaadin-password-field:hover::part(input-field),
vaadin-text-area:hover::part(input-field),
vaadin-combo-box:hover::part(input-field) {
  border-color: rgba(255, 122, 0, 0.30) !important;
}

vaadin-text-field[focused]::part(input-field),
vaadin-email-field[focused]::part(input-field),
vaadin-password-field[focused]::part(input-field),
vaadin-text-area[focused]::part(input-field),
vaadin-combo-box[focused]::part(input-field) {
  border-color: var(--df-accent-border) !important;
  box-shadow: 0 0 0 3px var(--df-accent-soft) !important;
}

vaadin-text-field::part(label),
vaadin-email-field::part(label),
vaadin-password-field::part(label),
vaadin-text-area::part(label),
vaadin-combo-box::part(label) {
  color: var(--df-text-dimmer) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}


/* ─────────────────────────────────────────────
   6. BUTTONS
   ───────────────────────────────────────────── */

vaadin-button[theme~="primary"] {
  background: linear-gradient(135deg, var(--df-accent), #ff9a33) !important;
  color: #000000 !important;
  border: none !important;
  border-radius: var(--df-radius) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  box-shadow: 0 3px 14px var(--df-accent-glow) !important;
  transition: all 0.25s !important;
}

vaadin-button[theme~="primary"]:hover {
  box-shadow: 0 5px 22px rgba(255, 122, 0, 0.45) !important;
  transform: translateY(-1px);
}

vaadin-button:not([theme~="primary"]):not([theme~="error"]):not([theme~="icon"]) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--df-text-dim) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--df-radius) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: all 0.2s !important;
}

vaadin-button:not([theme~="primary"]):not([theme~="error"]):not([theme~="icon"]):hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--df-text) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

vaadin-button[theme~="error"] {
  background: var(--df-red-soft) !important;
  color: var(--df-red) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: var(--df-radius) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  transition: all 0.2s !important;
}

vaadin-button[theme~="error"]:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
}

vaadin-button[disabled] { opacity: 0.35 !important; }


/* ─────────────────────────────────────────────
   7. GRID
   ───────────────────────────────────────────── */

vaadin-grid {
  background: var(--df-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--df-radius-lg) !important;
  overflow: hidden;
  --vaadin-grid-cell-background:           var(--df-surface);
  --vaadin-grid-header-cell-background:    var(--df-surface-alt);
  --vaadin-grid-row-hover-cell-background: rgba(255, 122, 0, 0.04);
  --vaadin-grid-cell-border-color:         rgba(255, 255, 255, 0.04);
  color: var(--df-text);
}

vaadin-grid::part(header-cell) {
  background: var(--df-surface-alt) !important;
  color: var(--df-text-dim) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 0 14px !important;
}

vaadin-grid::part(cell) {
  color: var(--df-text) !important;
  font-size: 13px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  padding: 0 14px !important;
}

vaadin-grid::part(selected-row) vaadin-grid::part(cell) {
  background: var(--df-accent-soft) !important;
}

vaadin-grid-sort-column::part(header-cell) { color: var(--df-accent) !important; }
vaadin-grid::part(scrollbar) { background: var(--df-surface) !important; }


/* ─────────────────────────────────────────────
   8. NOTIFICATION
   ───────────────────────────────────────────── */

vaadin-notification-container { z-index: 9999; }

vaadin-notification-card {
  background: var(--df-surface-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--df-radius-lg) !important;
  color: var(--df-text) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  max-width: 360px !important;
  width: fit-content !important;
}

vaadin-notification-card[theme~="error"] {
  border-left: 3px solid var(--df-red) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

vaadin-notification-card[theme~="success"] {
  border-left: 3px solid var(--df-green) !important;
  background: rgba(34, 197, 94, 0.08) !important;
}


/* ─────────────────────────────────────────────
   9. DIALOG
   ───────────────────────────────────────────── */

vaadin-dialog-overlay::part(overlay) {
  background: var(--df-surface-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--df-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65) !important;
  color: var(--df-text) !important;
}

vaadin-dialog-overlay::part(header) {
  background: var(--df-surface-alt) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--df-text) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

vaadin-dialog-overlay::part(backdrop) {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* ─────────────────────────────────────────────
   10. COMBO-BOX DROPDOWN
   ───────────────────────────────────────────── */

vaadin-combo-box-overlay::part(overlay) {
  background: var(--df-surface-card) !important;
  border: 1px solid var(--df-accent-border) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55) !important;
}

vaadin-combo-box-item { color: var(--df-text) !important; font-size: 13px !important; }
vaadin-combo-box-item:hover { background: var(--df-accent-soft) !important; }
vaadin-combo-box-item[selected] {
  background: var(--df-accent-soft) !important;
  color: var(--df-accent) !important;
  font-weight: 700 !important;
}


/* ─────────────────────────────────────────────
   11. LOGIN FORM
   ───────────────────────────────────────────── */

vaadin-login-form {
  --lumo-base-color: var(--df-surface);
  background: var(--df-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
  padding: 24px !important;
}

vaadin-login-form::part(vaadin-login-native-button) {
  background: linear-gradient(135deg, var(--df-accent), #ff9a33) !important;
  color: #000 !important;
  font-weight: 800 !important;
  border-radius: var(--df-radius) !important;
  box-shadow: 0 4px 16px var(--df-accent-glow) !important;
}


/* ─────────────────────────────────────────────
   12. SPLIT LAYOUT
   ───────────────────────────────────────────── */

vaadin-split-layout { background: var(--df-bg) !important; }

vaadin-split-layout::part(splitter) {
  background: rgba(255, 122, 0, 0.25) !important;
  width: 4px !important;
  transition: background 0.2s;
}

vaadin-split-layout::part(splitter):hover,
vaadin-split-layout::part(splitter-handle) {
  background: var(--df-accent) !important;
}


/* ─────────────────────────────────────────────
   13. CHECKBOX
   ───────────────────────────────────────────── */

vaadin-checkbox { color: var(--df-text) !important; font-size: 13px !important; }

vaadin-checkbox::part(checkbox) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 5px !important;
}

vaadin-checkbox[checked]::part(checkbox) {
  background: var(--df-accent) !important;
  border-color: var(--df-accent) !important;
}

vaadin-checkbox[checked]::part(checkmark) { color: #000 !important; }


/* ─────────────────────────────────────────────
   14. LOGIN VIEW
   ───────────────────────────────────────────── */

.login-view {
  background: var(--df-bg) !important;
  background-image:
    radial-gradient(ellipse at 35% 30%, rgba(255, 122, 0, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 65% 70%, rgba(0, 170, 255, 0.03) 0%, transparent 55%) !important;
}

.login-view h1 {
  font-size: 36px !important;
  font-weight: 900 !important;
  color: var(--df-accent) !important;
  letter-spacing: 0.12em !important;
  text-shadow: 0 0 24px var(--df-accent-glow) !important;
  margin-bottom: 4px !important;
}

.login-view div { color: var(--df-text-dim) !important; font-size: 12px !important; letter-spacing: 0.06em !important; }
.login-view a { color: var(--df-accent) !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; opacity: 0.85; transition: opacity 0.2s; }
.login-view a:hover { opacity: 1; }


/* ─────────────────────────────────────────────
   15. TYPOGRAPHIE
   ───────────────────────────────────────────── */

vaadin-app-layout::part(content) h1 {
  font-size: 24px !important; font-weight: 800 !important;
  color: var(--df-text) !important; letter-spacing: 0.03em !important; margin-bottom: 0 !important;
}

vaadin-app-layout::part(content) h2 {
  color: var(--df-text) !important; font-size: 22px !important;
  font-weight: 800 !important; letter-spacing: 0.03em !important; margin-bottom: 4px !important;
}

vaadin-app-layout::part(content) p {
  color: var(--df-text-dim) !important; font-size: 14px !important; line-height: 1.6 !important;
}

vaadin-split-layout h3 {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em !important;
  text-transform: uppercase !important; color: var(--df-text-dim) !important;
  padding-bottom: 8px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  margin-bottom: 4px !important;
}


/* ─────────────────────────────────────────────
   16. SCROLLBAR
   ───────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--df-surface); }
::-webkit-scrollbar-thumb { background: rgba(255, 122, 0, 0.22); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 122, 0, 0.42); }


/* ─────────────────────────────────────────────
   17. UTILITY-KLASSEN  (addClassName in Views)
   ───────────────────────────────────────────── */

.df-card {
  background: var(--df-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--df-radius-lg) !important;
  padding: 16px !important;
}

.df-toolbar {
  background: var(--df-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--df-radius-lg) !important;
  padding: 12px 14px !important;
  align-items: flex-end !important;
}

.df-section-title {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: var(--df-text-dim) !important; padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.df-remote-id {
  font-family: 'Consolas', 'Courier New', monospace !important;
  font-size: 11px !important; color: var(--df-text-dim) !important; letter-spacing: 0.05em !important;
}

.df-key-prefix {
  font-family: 'Consolas', 'Courier New', monospace !important;
  font-size: 12px !important; color: var(--df-accent) !important;
  background: var(--df-accent-soft) !important; border: 1px solid var(--df-accent-border) !important;
  padding: 2px 8px !important; border-radius: 6px !important;
}

/* Sichtbarkeits-Badges */
.df-badge {
  display: inline-flex; align-items: center;
  font-size: 9px !important; font-weight: 700 !important;
  letter-spacing: 0.10em !important; text-transform: uppercase !important;
  padding: 3px 8px !important; border-radius: 6px !important;
}

.df-badge--public  { background: var(--df-green-soft) !important; color: var(--df-green) !important; border: 1px solid rgba(34, 197, 94, 0.25) !important; }
.df-badge--private { background: rgba(255, 255, 255, 0.04) !important; color: var(--df-text-dim) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; }
.df-badge--unlisted { background: rgba(0, 170, 255, 0.10) !important; color: #00aaff !important; border: 1px solid rgba(0, 170, 255, 0.25) !important; }

/* Status-Chips */
.df-chip--yes     { display: inline-flex; font-size: 10px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 999px !important; background: var(--df-green-soft) !important; color: var(--df-green) !important; border: 1px solid rgba(34, 197, 94, 0.20) !important; }
.df-chip--no      { display: inline-flex; font-size: 10px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.04) !important; color: var(--df-text-dimmer) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; }
.df-chip--revoked { display: inline-flex; font-size: 10px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 999px !important; background: var(--df-red-soft) !important; color: var(--df-red) !important; border: 1px solid rgba(239, 68, 68, 0.20) !important; }

/* Pool Editor Panels */
.df-editor-panel {
  background: var(--df-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--df-radius-lg) !important;
  overflow: auto;
}

.df-editor-panel h3.df-section-title,
.df-editor-panel .df-section-title {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important; color: var(--df-text-dim) !important;
  padding-bottom: 8px !important; margin-bottom: 2px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; width: 100%;
}

/* ─────────────────────────────────────────────
   18. QUESTION EDITOR
   ───────────────────────────────────────────── */

/* Antwort-Option-Zeilen */
.qe-option-row {
  background: var(--df-surface-alt) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--df-radius) !important;
  padding: 6px 10px !important;
  transition: border-color 0.2s;
}

.qe-option-row:hover {
  border-color: rgba(255, 122, 0, 0.20) !important;
}

/* Korrekt-markierte Option */
.qe-option-row.correct {
  border-color: rgba(34, 197, 94, 0.30) !important;
  background: rgba(34, 197, 94, 0.05) !important;
}

/* Sektion im Editor */
.qe-section {
  background: var(--df-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--df-radius-lg) !important;
  padding: 12px 14px !important;
}

/* True/False Buttons */
.qe-tf-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: var(--df-radius-lg);
  border: 2px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--df-text-dimmer);
  background: var(--df-surface-alt);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  user-select: none;
}

.qe-tf-btn:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Accepted-Answer-Zeilen */
.qe-accepted-row {
  background: var(--df-surface-alt) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--df-radius) !important;
  padding: 4px 10px !important;
}

/* Typ-Badge neben Selektor */
.qe-type-hint {
  font-size: 11px !important;
  color: var(--df-text-dimmer) !important;
  font-style: italic;
}

/* IntegerField im Editor */
vaadin-integer-field {
  --vaadin-input-field-background:    rgba(255, 255, 255, 0.05);
  --vaadin-input-field-border-color:  rgba(255, 255, 255, 0.10);
  --vaadin-input-field-border-radius: var(--df-radius);
  --vaadin-input-field-color:         var(--df-text);
  color: var(--df-text);
}

vaadin-integer-field::part(input-field) {
  color: var(--df-text) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

vaadin-integer-field::part(label) {
  color: var(--df-text-dimmer) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* RadioButtonGroup im Editor */
vaadin-radio-group {
  color: var(--df-text) !important;
}

vaadin-radio-button::part(label) {
  color: var(--df-text-dim) !important;
  font-size: 13px !important;
}

/* MultiSelectComboBox */
vaadin-multi-select-combo-box {
  --vaadin-input-field-background:    rgba(255, 255, 255, 0.05);
  --vaadin-input-field-border-color:  rgba(255, 255, 255, 0.10);
  --vaadin-input-field-border-radius: var(--df-radius);
  --vaadin-input-field-color:         var(--df-text);
}

vaadin-multi-select-combo-box::part(input-field) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

vaadin-multi-select-combo-box::part(label) {
  color: var(--df-text-dimmer) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}