/* ══════════════════════════════════════════════════════════════════
   feuerschutz.online – Editor Theme
   Lädt nach editor.css. Überschreibt via erhöhter CSS-Spezifität
   (html-Präfix, kein !important). editor.css wird nicht angefasst.
   ══════════════════════════════════════════════════════════════════ */

/* ── A1: CSS-Variablen ──────────────────────────────────────────── */

:root {
  --red:      #C8352A;
  --red-h:    #E04535;
  --bg:       #0C0B0A;
  --bg1:      #131210;
  --bg2:      #1C1A18;
  --bg3:      #252320;
  --border2:  rgba(255,255,255,0.07);
  --text:     #F0EDE8;
  --text-mid: #C8C4BE;
  --text-dim: #8A8680;
}

html[data-theme="light"] {
  --bg:       #E8E5E0;
  --bg1:      #F0EDE8;
  --bg2:      #F7F5F2;
  --bg3:      #FFFFFF;
  --border2:  rgba(0,0,0,0.09);
  --text:     #1C1A18;
  --text-mid: #3B3835;
  --text-dim: #6B6762;
}

/* ── A2: Fonts ──────────────────────────────────────────────────── */

html body,
html .tb-btn, html .tb-dropdown-item,
html .auth-label, html .auth-input,
html .auth-submit, html .auth-btn-secondary,
html .meta-label, html .meta-input        { font-family: 'Barlow', sans-serif; }

html #auth-modal-title, html .acc-header,
html .meta-modal-title, html h2, html h3  { font-family: 'Barlow Condensed', sans-serif;
                                            font-weight: 700; }

html .tb-plan-name, html code, html kbd   { font-family: 'DM Mono', monospace; }

/* ── A3: Scrollbars ─────────────────────────────────────────────── */

html ::-webkit-scrollbar              { width: 8px; height: 8px; }
html ::-webkit-scrollbar-track        { background: transparent; }
html ::-webkit-scrollbar-thumb        { background: var(--border2); border-radius: 4px; }
html ::-webkit-scrollbar-thumb:hover  { background: var(--text-dim); }

/* ── A4: Top-Bar ────────────────────────────────────────────────── */

html #top-bar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border2);
  color: var(--text);
}
html .tb-btn {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid transparent;
}
html .tb-btn:hover  { background: rgba(200,53,42,0.15); color: var(--text); }
html .tb-btn.active { background: rgba(200,53,42,0.20); color: var(--red);
                      border-color: rgba(200,53,42,0.3); }
html .tb-project-name { color: var(--text); font-size: 14px; letter-spacing: 0.02em; }
html .tb-plan-name    { color: var(--text-dim); }

html[data-theme="light"] .tb-btn       { background: rgba(0,0,0,0.06); }
html[data-theme="light"] .tb-btn:hover { background: rgba(200,53,42,0.10); }

/* ── A5: Dropdown-Menüs ─────────────────────────────────────────── */

html .tb-dropdown {
  background: var(--bg2);
  border: 1px solid var(--border2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
html .tb-dropdown-item       { color: var(--text-mid); }
html .tb-dropdown-item:hover { background: rgba(200,53,42,0.12); color: var(--text); }
html .tb-dropdown-separator  { border-color: var(--border2); }
html .tb-menu-item           { color: var(--text-mid); }
html .tb-menu-item:hover     { background: rgba(200,53,42,0.12); color: var(--text); }
html .tb-menu-sep            { border-color: var(--border2); }
html .tb-menu-danger         { color: var(--red); }

/* ── A6: Sidebar ────────────────────────────────────────────────── */

html #sidebar {
  background: var(--bg1);
  color: var(--text);
  border-right: 1px solid var(--border2);
}
html .acc-header {
  background: var(--bg2);
  color: var(--text-mid);
  border-bottom: 1px solid var(--border2);
}
html .acc-header:hover       { background: var(--bg3); color: var(--text); }
html .acc-body               { background: var(--bg1); }
html .prop-label             { color: var(--text-dim); }
html .prop-input,
html .prop-select {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border2);
}
html .prop-input:focus,
html .prop-select:focus      { border-color: var(--red); outline: none; }

/* Symbol-Tabs */
html .sym-tab               { color: var(--text-dim); background: var(--bg2); border-color: var(--border2); }
html .sym-tab.active        { background: rgba(200,53,42,0.15); color: var(--red);
                              border-color: var(--red); }
html .sym-tab[data-cat].active { outline-color: var(--red); }
html .symbol-item:hover     { border-color: var(--red); }

/* ── A7: Auth-Modal ─────────────────────────────────────────────── */

html #auth-modal         { background: rgba(0,0,0,0.72); backdrop-filter: blur(8px); }
html #auth-modal-box     { background: var(--bg2);
                           box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px var(--border2); }
html .auth-modal-header  { background: var(--bg2); border-bottom: 1px solid var(--border2); }
html #auth-modal-title   { color: var(--text); }
html #auth-close         { color: var(--text-dim); background: none; border: none; }
html #auth-close:hover   { color: var(--text); }

html .auth-tab           { color: var(--text-dim); border-bottom: 2px solid transparent; }
html .auth-tab.active    { color: var(--red); border-bottom-color: var(--red); }
html #auth-tabs-bar      { border-bottom: 1px solid var(--border2); background: var(--bg2); }

html .auth-panel,
html #logged-view,
html #guest-view         { background: var(--bg2); }

html .auth-label         { color: var(--text-dim); font-size: 11px;
                           letter-spacing: 0.05em; text-transform: uppercase; }
html .auth-input         { background: var(--bg3); color: var(--text);
                           border: 1px solid var(--border2); border-radius: 6px; }
html .auth-input:focus   { border-color: var(--red); outline: none; }
html .auth-input::placeholder { color: var(--text-dim); }

html .auth-panel input:focus,
html .auth-changepw-form input:focus { border-color: var(--red); }

html .auth-submit        { background: var(--red); color: #fff; border: none;
                           border-radius: 6px; font-weight: 600; letter-spacing: 0.03em; }
html .auth-submit:hover:not(:disabled) { background: var(--red-h); }
html .auth-submit:disabled { background: var(--bg3); color: var(--text-dim); }

html .auth-btn-secondary { background: var(--bg3); color: var(--text-mid);
                           border: 1px solid var(--border2); border-radius: 6px; }
html .auth-btn-secondary:hover { border-color: var(--red); color: var(--red); }

html .auth-btn-danger    { background: transparent; color: var(--red);
                           border: 1px solid rgba(200,53,42,0.3); border-radius: 6px; }
html .auth-btn-danger:hover { background: rgba(200,53,42,0.10); }

html .auth-logout-btn    { background: var(--red); }
html .auth-plan-badge    { background: rgba(200,53,42,0.12); color: var(--red);
                           border: 1px solid rgba(200,53,42,0.2); }

html .auth-error         { background: rgba(200,53,42,0.10); color: #ff9090;
                           border: 1px solid rgba(200,53,42,0.2); border-radius: 6px; }
html .auth-success       { background: rgba(46,125,82,0.10); color: #7ecf9f;
                           border: 1px solid rgba(46,125,82,0.2); border-radius: 6px; }

html .auth-legal a,
html .auth-consent-label a { color: var(--red); }
html .auth-consent-checkbox { accent-color: var(--red); }

/* ── A8: Floating Toolbar ───────────────────────────────────────── */

html #floating-toolbar {
  background: rgba(28,26,24,0.78);
  border: 1px solid var(--border2);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
html[data-theme="light"] #floating-toolbar {
  background: rgba(240,237,232,0.88);
  border: 1px solid rgba(0,0,0,0.12);
}
html .ftb-btn           { color: var(--text-mid); }
html .ftb-btn:hover     { background: rgba(200,53,42,0.15); color: var(--text); }
html .ftb-toggle.active { background: rgba(200,53,42,0.22); color: var(--red);
                          box-shadow: 0 0 0 1px rgba(200,53,42,0.4) inset; }

/* ── A9: Canvas-Interaktionsfarben (Blau → Rot) ─────────────────── */

html #rect-select {
  border-color: var(--red);
  background: rgba(200,53,42,0.08);
}

html .resize-handle { background: var(--red); }

html .path-element.selected,
html .symbol-element.selected,
html .endpoint-element.selected,
html .massstab-element.selected,
html .revisionsblock-element.selected,
html .legend-pin-element.selected,
html .standort-dot.selected,
html .standort-label.selected,
html .textbox-element.selected,
html .plan-textbox-element.selected { outline-color: var(--red); }

html .textbox-editing { outline-color: var(--red); }

html .plan-nav-select:focus { border-color: var(--red); }

html .control-group button       { background: var(--red); }
html .control-group button:hover { background: var(--red-h); }
html #toolbar button             { background: var(--red); }
html #toolbar button:hover       { background: var(--red-h); }

html .rot-btn       { color: var(--red); }
html .rot-btn:hover { background: rgba(200,53,42,0.15); }

html .ctx-tab:hover,
html .ctx-tab.ctx-tab-active { color: var(--red); border-color: var(--red); }

html .export-select-dropdown button { background: var(--red); }

html .layout-card.drag-over,
html .mp-card.drag-over {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(200,53,42,0.25);
}

html .layout-card[data-type="feuerwehr"].active    { border-color: var(--red); }
html .layout-card[data-type="feuerloescher"].active { border-color: var(--red); }

html .frame-dragging #canvas-container { outline-color: var(--red); }

html #plan-meta-section input:focus,
html .project-field-group:focus { border-color: var(--red); }

/* ── A10: Meta-Modal & sonstige Dialoge ─────────────────────────── */

html .meta-overlay    { background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); }
html .meta-modal      { background: var(--bg2); border: 1px solid var(--border2); color: var(--text); }
html .meta-modal-title { color: var(--text); }
html .meta-label      { color: var(--text-dim); }
html .meta-input,
html .meta-select,
html .meta-textarea   { background: var(--bg3); color: var(--text); border: 1px solid var(--border2); }

/* ── A11: Gast-Banner ───────────────────────────────────────────── */

html #guest-banner {
  background: var(--bg2);
  border-bottom: 1px solid rgba(200,53,42,0.2);
  color: var(--text-mid);
}
html #guest-banner strong { color: var(--red); }

/* ── A12: Theme-Toggle-Button ───────────────────────────────────── */

html #btn-theme-toggle {
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  margin-left: 4px;
}
html #btn-theme-toggle:hover               { background: rgba(200,53,42,0.15); color: var(--text); }
html[data-theme="light"] #btn-theme-toggle { background: rgba(0,0,0,0.06); }

/* ── A13: Misc UI-Fixes ─────────────────────────────────────────── */

/* ftb-grip im Light-Theme sichtbar */
html[data-theme="light"] #ftb-grip       { color: rgba(0,0,0,0.35); }
html[data-theme="light"] #ftb-grip:hover { color: rgba(0,0,0,0.65); }

/* Ghost-Buttons (DOM-Referenzen, keine UI-Funktion) dauerhaft ausblenden */
html #btn-gbu,
html #add-laufweg-sidebar,
html #add-linie-sidebar              { display: none !important; }

/* Symbol-Picker Panel */
html #sym-picker-panel {
  background: var(--bg2);
  border: 1px solid var(--border2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
html #sym-picker-panel #symbol-search {
  background: var(--bg1);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
}
html #sym-picker-panel #symbol-search:focus { border-color: var(--red); outline: none; }
html #sym-picker-panel h2               { color: var(--text); border-bottom: 1px solid var(--border2);
                                          padding-bottom: 6px; }

/* Sym-Picker Trigger-Button (active state) */
html #sym-picker-btn.sym-picker-active  { background: rgba(200,53,42,0.20); color: var(--red);
                                          border-color: rgba(200,53,42,0.3); }

/* ── A14: Properties Panel (Flächen + Symbole) ──────────────────── */

html #properties-panel {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
html #pp-header        { border-bottom-color: var(--border2); }
html #pp-title         { color: var(--text); }
html #pp-close         { color: var(--text-dim); }
html #pp-close:hover   { background: var(--bg3); color: var(--text); }

html .property-row label { color: var(--text-dim); font-weight: 500; }
html .property-row input,
html .property-row select,
html .property-row textarea {
  background: var(--bg1);
  color: var(--text);
  border-color: var(--border2);
}
html .property-row input:focus,
html .property-row select:focus,
html .property-row textarea:focus { border-color: var(--red); outline: none; }
html .property-row button         { background: var(--red); color: #fff; }
html .property-row button:hover   { background: var(--red-h); }

/* Rotation Widget */
html .rotation-widget            { background: var(--bg2); border-color: var(--border2); }
html .rot-btn                    { background: var(--bg3); color: var(--text-mid);
                                   border-right-color: var(--border2); }
html .rot-btn-reset              { background: var(--bg2); }
html .rot-btn-reset:hover        { background: rgba(200,53,42,0.15); color: var(--text); }
html .rot-display                { color: var(--text-dim); }

/* FL-Area Eigenschaften */
html .fl-area-props              { background: var(--bg2); border-color: var(--red); }
html .fl-area-props-lbl          { color: var(--text-dim); }
html .fl-area-props-val          { color: var(--text); }

/* Laufweg Toggle-Buttons */
html .lw-tb                      { background: var(--bg2); border-color: var(--border2);
                                   color: var(--text-mid); }
html .lw-tb.active               { background: var(--red); border-color: var(--red); color: #fff; }
html .lw-tb:hover:not(.active)   { background: var(--bg3); border-color: var(--border2); }

/* Linie-Werkzeug Snap-Highlight */
html .linie-snap-highlight       { outline-color: var(--red) !important; }

/* ── A15: Nav Compass ───────────────────────────────────────────── */

html #nav-compass {
  --nc-bg:       var(--bg2);
  --nc-bg-hover: var(--bg3);
  --nc-cross:    var(--bg1);
  --nc-accent:   var(--red);
  --nc-lbl-bg:   var(--bg);
  --nc-dim:      var(--text-mid);
}
html .quadrant                   { background-color: var(--bg2); }
html .quadrant:active            { background-color: rgba(200,53,42,0.25); }
html .nc-status-label            { border-color: var(--border2); }
html .nc-pos-zoom:hover          { color: var(--red); }
html #nc-rot-label.nc-nonzero   { color: var(--red); }

/* Kompass im Light-Theme: dunkel lassen für Kontrast zur weißen Canvas */
html[data-theme="light"] #nav-compass {
  --nc-bg:       #2a2827;
  --nc-bg-hover: #3b3835;
  --nc-cross:    #1c1a18;
  --nc-lbl-bg:   #1c1a18;
  --nc-dim:      #c8c4be;
}
html[data-theme="light"] .quadrant { background-color: #2a2827; }

/* ── A16: Masterplan List ───────────────────────────────────────── */

html .mp-card                    { background: var(--bg2); }
html .mp-card:hover              { border-color: var(--red); }
html .mp-card.active             { border-color: var(--red); background: rgba(200,53,42,0.08); }
html .mp-card:not(.active):hover .mp-card-header { background: var(--bg3); }
html .mp-card-thumb              { background: var(--bg1); }
html .mp-card-thumb-placeholder  { color: var(--text-dim); }
html .mp-card-upload-overlay     { background: rgba(200,53,42,0.85); }
html .mp-card-name               { color: var(--text); }
html .mp-card-meta               { color: var(--text-dim); }
html .mp-card-actions button             { border-color: var(--border2); color: var(--text-dim); }
html .mp-card-actions button:hover       { background: var(--bg3); color: var(--text); }
html .mp-card-actions button.del:hover   { background: var(--red); border-color: var(--red); color: #fff; }
html .mp-card--compact           { background: var(--bg2); border-color: var(--border2); }
html .mp-card--compact:hover     { border-color: var(--red); }
html .mp-card-compact-name       { color: var(--text); }
html .mp-layout-sub              { border-left-color: var(--border2); }
html .mp-layout-hist-btn         { color: var(--text-dim); }
html .mp-layout-hist-btn:hover   { color: var(--red); }
html .mp-layout-add-toggle       { background: var(--red); }
html .mp-layout-add-toggle:hover { background: var(--red-h); }
html .mp-layout-add-form         { background: var(--bg1); }
html .mp-layout-add-form select,
html .mp-layout-add-form input   { background: var(--bg2); color: var(--text);
                                   border-color: var(--border2); }
html .mp-layout-add-form button       { background: var(--red); }
html .mp-layout-add-form button:hover { background: var(--red-h); }

/* Plan-Meta Felder in der Sidebar */
html #plan-meta-section .pmr label { color: var(--text-dim); }
html #plan-meta-section .pmr input {
  background: var(--bg2);
  border-color: var(--border2);
  color: var(--text);
}

/* Frame-Handle (Drag-Bar im Layout-Modus) */
html #frame-handle               { background: var(--bg2); }