/**
 * Custom CSS Variables for Accessibility Module
 * =============================================
 * Diese Datei definiert anpassbare CSS-Variablen für das Accessibility-Modul.
 * Alle Farben können hier überschrieben werden, ohne den PHP-Code zu ändern.
 *
 * @package     Villaester.Module.AccessibilitySa11y
 * @version     2.0.0
 */

:root {
  /* ========================================
     GEMEINSAME BASIS-VARIABLEN
     ======================================== */

  /* Layout & Dimensionen */
  --a11y-z-index: 999999;
  --a11y-box-min-width: 320px;
  --a11y-box-max-width: 400px;
  --a11y-menu-max-height: 500px;
  --a11y-toggle-size: 60px;

  /* Border Radius */
  --a11y-border-radius: 0.375rem;
  --a11y-border-radius-circle: 50%;

  /* Transitions */
  --a11y-transition: all 0.3s ease-in-out;
  --a11y-transition-fast: all 0.2s ease-in-out;

  /* Box Shadow */
  --a11y-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

  /* Typografie */
  --a11y-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --a11y-font-size-base: 14px;
  --a11y-font-size-title: 1.1rem;
  --a11y-font-size-small: 0.9rem;
  --a11y-font-size-xsmall: 0.8rem;
  --a11y-font-size-tiny: 0.625rem;
  --a11y-line-height: 1.5;
  --a11y-line-height-tight: 1.2;

  /* Spacing */
  --a11y-spacing-xs: 0.25rem;
  --a11y-spacing-sm: 0.5rem;
  --a11y-spacing-md: 0.75rem;
  --a11y-spacing-lg: 1rem;
  --a11y-spacing-xl: 1.5rem;

  /* Icon Größen */
  --a11y-icon-size: 20px;
  --a11y-icon-size-medium: 24px;
  --a11y-icon-size-large: 44px;
  --a11y-level-dot-size: 8px;

  /* ========================================
     LIGHT MODE FARBEN
     ======================================== */

  /* Basis Farben */
  --a11y-light-card-text: #000000;
  --a11y-light-section-bg: #ffffff;
  --a11y-light-border: rgba(0, 0, 0, 0.125);

  /* Grautöne */
  --a11y-light-gray-light: #f8f9fa;
  --a11y-light-gray-medium: #e9ecef;
  --a11y-light-gray-dark: #6c757d;

  /* Status Farben */
  --a11y-light-level-inactive: #e9ecef;

  /* ========================================
     DARK MODE FARBEN
     ======================================== */

  /* Basis Farben */
  --a11y-dark-card-bg: #495057;
  --a11y-dark-card-text: #ffffff;
  --a11y-dark-card-border: #495057;
  --a11y-dark-card-hover: #6c757d;
  --a11y-dark-section-bg: #343a40;
  --a11y-dark-border: #495057;

  /* Grautöne */
  --a11y-dark-gray-light: #495057;
  --a11y-dark-gray-medium: #adb5bd;
  --a11y-dark-gray-dark: #f8f9fa;

  /* Status Farben */
  --a11y-dark-level-inactive: #343a40;
  --a11y-dark-level-active: #8b949e;

  /* ========================================
     ERROR/RESET BUTTON FARBEN
     ======================================== */

  /* Light Mode Error */
  --a11y-error-color: #dc3545;
  --a11y-error-color-dark: #c82333;
  --a11y-error-color-alpha: rgba(220, 53, 69, 0.5);

  /* Dark Mode Error */
  --a11y-dark-error-color: #e74c3c;
  --a11y-dark-error-color-dark: #d62c1a;
  --a11y-dark-error-color-alpha: rgba(231, 76, 60, 0.5);
}

/* ========================================
   TOGGLE STATUS LABEL STYLES
   ======================================== */

.toggle-status-label {
  display: inline-flex;
  align-items: center;
  gap: var(--a11y-spacing-xs);
  font-size: var(--a11y-font-size-xsmall);
  transition: var(--a11y-transition-fast);
}

.toggle-status-label .status-off,
.toggle-status-label .status-on {
  transition: opacity 0.2s ease-in-out;
}

/* Default state - show "AUS" */
.toggle-status-label .status-off {
  display: inline !important;
  opacity: 0.7;
}

.toggle-status-label .status-on {
  display: none !important;
}

/* Active State - show "EIN" */
.toggle-status-label.is-active .status-off {
  display: none !important;
}

.toggle-status-label.is-active .status-on {
  display: inline !important;
  opacity: 1;
  color: var(--a11y-light-level-active, currentColor);
  font-weight: 600;
}

/* Dark Mode Anpassungen */
[data-color-mode="dark"] .toggle-status-label .status-on {
  color: var(--a11y-dark-level-active, currentColor);
}

/* ========================================
   PROFILE & FUNCTION ITEM STYLES
   ======================================== */

/* Profile Items */
[data-profile] .toggle-status-label {
  margin-left: auto;
}

[data-profile].is-active .toggle-status-label {
  color: inherit;
}

/* Function Items */
[data-function] .toggle-status-label {
  min-width: 3rem;
  justify-content: flex-end;
}

/* Multi-Level Functions */
[data-function] .level-controls-horizontal ~ .toggle-status-label {
  display: none; /* Hide for multi-level controls */
}

/* ========================================
   SVG ICON STYLES
   ======================================== */

/* Default SVG icon color */
[data-profile] svg,
[data-function] svg {
  transition: var(--a11y-transition-fast);
}

/* Active Profile SVG Icons - White */
[data-profile].is-active svg {
  filter: brightness(0) invert(1);
}

[data-profile].is-active svg path,
[data-profile].is-active svg circle,
[data-profile].is-active svg rect,
[data-profile].is-active svg polygon,
[data-profile].is-active svg ellipse,
[data-profile].is-active svg line {
  fill: white;
  stroke: white;
}

/* Active Function SVG Icons */
[data-function].is-active svg {
  filter: brightness(0) invert(1);
}

[data-function].is-active svg path,
[data-function].is-active svg circle,
[data-function].is-active svg rect,
[data-function].is-active svg polygon,
[data-function].is-active svg ellipse,
[data-function].is-active svg line {
  fill: white;
  stroke: white;
}

/* For icons that use currentColor */
[data-profile].is-active .profile-icon svg,
[data-function].is-active .function-icon svg {
  color: white;
}

/* Alternative method using CSS filters for better compatibility */
.is-active .profile-icon svg,
.is-active .function-icon svg {
  filter: brightness(0) invert(1);
}

/* ========================================
   RESPONSIVE ANPASSUNGEN
   ======================================== */

@media (max-width: 480px) {
  :root {
    --a11y-box-max-width: 100%;
    --a11y-box-min-width: 280px;
    --a11y-font-size-base: 13px;
    --a11y-toggle-size: 50px;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .a11y-box,
  .a11y-toggle,
  #accessibility-menu {
    display: none !important;
  }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
  :root {
    --a11y-light-border: #000000;
    --a11y-dark-border: #ffffff;
    --a11y-box-shadow: 0 0 0 2px currentColor;
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --a11y-transition: none;
    --a11y-transition-fast: none;
  }
}

/* ========================================
   CUSTOM THEME OVERRIDES
   Hier können projektspezifische Anpassungen vorgenommen werden
   ======================================== */

.profile-title {
  font-size: .9rem;
  font-weight: 400;
  line-height: 100%;
  text-transform: none;
  letter-spacing: 1px;
}