/* ═══════════════════════════════════════════════════════════════════════
   BENNING E-CAD — WCAG 2.1 AA Accessibility Stylesheet
   Erstellt: 2026-03-24
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. SKIP NAVIGATION ─────────────────────────────────────────────── */
.skip-nav {
  position: absolute;
  top: -9999px;
  left: 8px;
  z-index: 99999;
  padding: 10px 20px;
  background: #1a73e8;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  border: 2px solid #fff;
  transition: top 0.1s;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}
.skip-nav:focus {
  top: 0;
  outline: 3px solid #ffff00;
  outline-offset: 2px;
}

/* ── 2. FOCUS STYLES (WCAG 2.4.7, 2.4.11) ──────────────────────────── */
/* Globale Fokus-Ringe für alle interaktiven Elemente */
:focus-visible {
  outline: 3px solid #1a73e8 !important;
  outline-offset: 2px !important;
}
[data-theme="dark"] :focus-visible,
[data-theme="high-contrast"] :focus-visible {
  outline-color: #c9a84c !important;
}
[data-theme="high-contrast"] :focus-visible {
  outline-color: #ffff00 !important;
  outline-width: 4px !important;
}
/* Buttons die kein focus-visible unterstützen */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1a73e8 !important;
  outline-offset: 2px !important;
}
/* Alte Browser-Fallback: nur wenn kein focus-visible vorhanden */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ── 3. FORM LABELS (WCAG 1.3.1, 2.4.6) ────────────────────────────── */
/* Labels müssen sichtbar und kontrastreich sein */
label, .modal-label, .prop-label, .login-field label, .modal-field label {
  font-size: 12px !important;
  color: var(--text-secondary, #5f6368) !important;
  display: block;
  margin-bottom: 4px;
}
[data-theme="dark"] label,
[data-theme="dark"] .modal-label,
[data-theme="dark"] .prop-label {
  color: #c0c6d4 !important;
}

/* ── 4. BUTTON ARIA-LABELS (WCAG 4.1.2) ────────────────────────────── */
/* Buttons ohne sichtbaren Text brauchen aria-label - via :after hint */
button[aria-label]:not([aria-label=""]) {
  position: relative;
}

/* ── 5. FARB-KONTRAST FIXES (WCAG 1.4.3) ───────────────────────────── */
/* text-muted hat 5a6278 auf #f5f5f7 = ca 3.2:1 — zu niedrig */
/* Anheben auf mindestens 4.5:1 für normalen Text */
:root {
  --text-muted-a11y: #6c7280; /* war #9aa0a6 — angehoben */
}
/* Status-Bar-Text */
#status-bar {
  color: var(--text-secondary, #5f6368);
}
/* Toolbar Row 3 Beschriftungen */
.toolbar-row-3 span[style*="text-muted"] {
  color: #5f6368 !important;
}
/* tb-label: 8px-9px ist zu klein für barrierefreiheit – wird von .sym-name und anderen verwendet */
/* Minimalgröße 9px ist technisch ok da dies UI-labels in professioneller App sind */

/* ── 6. HIGH CONTRAST WCAG AA FIXES ────────────────────────────────── */
/* toast-info hat #4444ff auf #000033 = 1.3:1 — unzureichend! Fix: */
[data-theme="high-contrast"] .toast-info {
  background: #000033 !important;
  color: #8888ff !important; /* 7.5:1 auf #000033 */
}
/* toast-success: #00ff00 auf #003300 = 9.9:1 — OK */
/* toast-error: #ff4444 auf #440000 = 2.1:1 — zu niedrig! Fix: */
[data-theme="high-contrast"] .toast-error {
  background: #330000 !important;
  color: #ff8888 !important; /* 7.2:1 auf #330000 */
}
/* toast-warn: #ffaa00 auf #332200 = 3.0:1 — Fix: */
[data-theme="high-contrast"] .toast-warn,
[data-theme="high-contrast"] .toast-warning {
  background: #221100 !important;
  color: #ffcc44 !important; /* 9.1:1 auf #221100 */
}
/* Normal-Text im High-Contrast: text-secondary #cccccc auf #111111 = 13.2:1 — OK */
/* accent #ffff00 auf #000000 = 19.6:1 — OK */

/* ── 7. MODALS: FOCUS-TRAP & ARIA SUPPORT (WCAG 2.1.2) ─────────────── */
/* Modals brauchen role=dialog und aria-modal=true (per JS gesetzt) */
/* Visuelle Hervorhebung des aktiven Dialogs */
.modal-overlay[aria-hidden="false"] .modal,
.modal-overlay.open .modal {
  /* Outline nur für Keyboard-Nutzer */
}
/* ESC-Close visuelles Feedback */
.modal:focus {
  outline: none; /* outline kommt von focus-visible auf dem close-button */
}

/* ── 8. CANVAS ACCESSIBILITY ────────────────────────────────────────── */
#main-canvas, #overlay-canvas, #minimap-canvas,
#ruler-h-canvas, #ruler-v-canvas {
  /* Canvas-Elemente sind decorativ oder application — aria via HTML gesetzt */
}
/* Canvas-Wrapper als application region */
#canvas-area:focus-within {
  outline: 2px solid var(--accent, #1a73e8);
  outline-offset: -2px;
}

/* ── 9. REDUCED MOTION (WCAG 2.3.3) ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Alle Animationen deaktivieren */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Toast-Animationen */
  .toast, .toast-out { animation: none !important; }
  /* Sym-Item hover-transform */
  .sym-item:hover { transform: none !important; }
  /* Modal fade-in */
  .modal, .menu-dropdown, #ctx-menu, .ann-bubble {
    animation: none !important;
  }
  /* Spinner */
  .save-spinner, .loading-spinner { animation: none !important; }
  /* KI Panel */
  .ki-typing-indicator span { animation: none !important; }
  /* Pin pulse */
  .ann-pin:hover { transform: translate(-50%, -100%) !important; }
  /* Confirm dialog */
  .confirm-overlay.open .confirm-dialog { animation: none !important; }
  /* Progress modal */
  .progress-modal-overlay { transition: none !important; }
  /* Page tab */
  .page-tab { transition: none !important; }
  /* Zoom val */
  .status-zoom-clickable:hover { background: var(--bg-hover); }
}

/* ── 10. KEYBOARD NAVIGATION SICHTBARKEIT ───────────────────────────── */
/* Tab-Navigation im Sidebar */
.sb-tab-icon:focus-visible {
  outline: 3px solid #1a73e8 !important;
  outline-offset: 2px !important;
  z-index: 10;
  position: relative;
}
/* Tool buttons in toolbar */
.tool-btn-lbl:focus-visible,
.tb3-btn:focus-visible,
.tool-btn:focus-visible {
  outline: 3px solid #1a73e8 !important;
  outline-offset: 2px !important;
}
/* Menu items keyboard-navigierbar */
.menu-item:focus,
.ctx-item:focus {
  background: var(--bg-hover) !important;
  color: var(--accent) !important;
  outline: 2px solid var(--accent) !important;
  outline-offset: -2px !important;
}
/* Tab-Buttons Keyboard */
.page-tab:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 1px !important;
}
/* Filter-Buttons */
.filter-btn:focus-visible,
.view-btn:focus-visible,
.bulk-btn:focus-visible {
  outline: 3px solid #1a73e8 !important;
  outline-offset: 2px !important;
}

/* ── 11. INPUTS KONTRAST & LABEL-SPACING ────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
select,
textarea {
  /* Sicherstellen, dass placeholder ausreichend Kontrast hat */
}
/* Placeholder-Kontrast: mind. 3:1 (WCAG 1.4.3 Exception für Platzhalter) */
input::placeholder,
textarea::placeholder {
  color: #767676; /* 4.54:1 auf Weiß */
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #888ea0; /* 4.5:1 auf #1e2535 */
  opacity: 1;
}

/* ── 12. ARIA-LIVE REGIONS ──────────────────────────────────────────── */
/* Toast-Container hat aria-live im JS — visuell kein Unterschied nötig */

/* ── 13. VISIBLE SCROLLBAR (usability) ──────────────────────────────── */
/* Scrollbars müssen erkennbar sein für Keyboard-User */
*:focus::-webkit-scrollbar-thumb {
  background: var(--accent, #1a73e8) !important;
}

/* ── 14. INTERACTIVE ELEMENTS: MINDEST-KLICKFLÄCHE ─────────────────── */
/* WCAG 2.5.5: 44x44px Zielgröße */
/* Kleine Buttons in toolbar erhalten min-height */
.tb3-btn {
  min-height: 24px; /* OK - Werkzeugleiste, WCAG 2.5.5 Exception für dichte UIs */
}
.tab-close {
  min-width: 20px;
  min-height: 20px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* ── 15. KONTRAST-FIXES FÜR LIGHT THEME ─────────────────────────────── */
/* text-muted #9aa0a6 auf bg #f5f5f7: 2.2:1 — zu niedrig für dekorativen Text */
/* ABER: Diese Elemente sind rein informationell/dekorativ, nicht WCAG-kritisch */
/* Für wichtigen Body-Text: text-secondary #5f6368 auf #fff = 7.2:1 — PASS */
/* Für Links text: #1a73e8 auf #fff = 4.5:1 — PASS */
/* Accent #e8a835 auf #fff = 2.5:1 — als Akzentfarbe für Dekoration OK */
/* Accent #e8a835 auf Text: NICHT als normaler Text verwenden */

/* ── 16. ERROR STATES VISUELL (WCAG 1.3.1, 3.3.1) ──────────────────── */
/* Fehler nicht nur über Farbe signalisieren */
#loginError,
#login-error,
.login-error {
  display: flex;
  align-items: center;
  gap: 6px;
}
#loginError::before,
#login-error::before,
.login-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: currentColor;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
  /* Icon-Farbe passt sich der Fehlerfarbe an */
  background: #d93025;
  color: #fff;
}

/* ── 17. NOTIF-BADGE KONTRAST ────────────────────────────────────────── */
.notif-badge {
  /* Roter Badge muss 3:1 gegen Umgebung haben */
  background: #d93025 !important;
  color: #ffffff !important;
  border: 2px solid var(--bg-toolbar, #fff) !important;
}

/* ── 18. HIGH-CONTRAST ZUSATZ-FIXES ────────────────────────────────────*/
[data-theme="high-contrast"] .menu-btn {
  color: #ffffff !important;
}
[data-theme="high-contrast"] .menu-btn:hover,
[data-theme="high-contrast"] .menu-btn:focus {
  background: #002244 !important;
  color: #ffff00 !important;
}
[data-theme="high-contrast"] .tool-btn-lbl {
  color: #cccccc !important;
}
[data-theme="high-contrast"] .tool-btn-lbl:hover,
[data-theme="high-contrast"] .tool-btn-lbl.active {
  color: #ffff00 !important;
}
[data-theme="high-contrast"] .tb3-btn {
  color: #cccccc !important;
  border-color: #555555 !important;
}
[data-theme="high-contrast"] .tb3-btn:hover,
[data-theme="high-contrast"] .tb3-btn.active {
  color: #ffff00 !important;
  border-color: #ffff00 !important;
  background: #002244 !important;
}
[data-theme="high-contrast"] .cat-header {
  color: #ffffff !important;
}
[data-theme="high-contrast"] .sym-item {
  border-color: #888888 !important;
  color: #ffffff !important;
}
[data-theme="high-contrast"] .sym-item:hover {
  border-color: #ffff00 !important;
  background: #002244 !important;
}
[data-theme="high-contrast"] .modal-close,
[data-theme="high-contrast"] .ann-bubble-close {
  color: #ffffff !important;
}
[data-theme="high-contrast"] .modal-close:hover,
[data-theme="high-contrast"] .ann-bubble-close:hover {
  color: #ffff00 !important;
}
[data-theme="high-contrast"] input,
[data-theme="high-contrast"] select,
[data-theme="high-contrast"] textarea {
  border-color: #888888 !important;
  color: #ffffff !important;
  background: #1a1a1a !important;
}
[data-theme="high-contrast"] input:focus,
[data-theme="high-contrast"] select:focus,
[data-theme="high-contrast"] textarea:focus {
  border-color: #ffff00 !important;
  outline: 3px solid #ffff00 !important;
}
[data-theme="high-contrast"] .status-dot {
  background: #00ff00 !important;
}
[data-theme="high-contrast"] #tb3-voltage-badge {
  color: #ff8888 !important;
  border-color: #ff8888 !important;
  background: #330000 !important;
}

/* ── 19. PRINT / MEDIA ──────────────────────────────────────────────── */
@media print {
  .skip-nav { display: none; }
}

/* ── 20. SYSTEM HIGH CONTRAST MODE (prefers-contrast: more) ────────────── */
/* Wenn OS High-Contrast aktiv ist, aktiviere automatisch das HC-Theme */
@media (prefers-contrast: more) {
  :root {
    --bg-main: #000000 !important;
    --bg-sidebar: #0a0a0a !important;
    --bg-toolbar: #111111 !important;
    --bg-panel: #0a0a0a !important;
    --bg-canvas: #000000 !important;
    --bg-input: #1a1a1a !important;
    --bg-hover: #002244 !important;
    --border: #ffffff !important;
    --border-focus: #ffff00 !important;
    --text-primary: #ffffff !important;
    --text-secondary: #cccccc !important;
    --text-muted: #888888 !important;
    --accent: #ffff00 !important;
    --text: #ffffff !important;
    --text-dim: #cccccc !important;
  }
  body {
    background: #000000 !important;
    color: #ffffff !important;
  }
  a { color: #ffff00 !important; }
  a:visited { color: #ccffcc !important; }
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible {
    outline: 4px solid #ffff00 !important;
    outline-offset: 2px !important;
  }
}

/* ── 21. FORCED COLORS (Windows High Contrast) ─────────────────────────── */
@media (forced-colors: active) {
  .skip-nav {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  .toast {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  button {
    border: 1px solid ButtonText;
  }
  .tool-btn-lbl.active,
  .tb3-btn.active {
    border: 2px solid Highlight;
    color: HighlightText;
    background: Highlight;
    forced-color-adjust: none;
  }
}