/* ============================================
   AQUALIZER – overrides.css
   Modern Theme: Überschreibt hardcodierte
   Hellfarben aus style.css
   ============================================ */

/* ============================================
   BECKEN-KARTE: REMINDER / TASK-CHIPS
   ============================================ */
body .aq-tasks {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 5px;
  padding: 8px 12px;
  line-height: 1;
}

body .aq-task-chip {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text);
}

body .aq-task-chip--overdue {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  box-shadow: 0 0 7px rgba(239, 68, 68, 0.28);
}

body .aq-task-chip--soon {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fcd34d;
  box-shadow: 0 0 7px rgba(245, 158, 11, 0.28);
}

body .aq-task-done:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   BECKEN-KARTE: ACTION-PANELS
   ============================================ */
body .aq-panel summary {
  color: var(--color-text);
}

body .aq-panel summary:hover {
  background: var(--color-bg-elevated);
}

body .aq-panel[open] summary {
  background: rgba(45, 212, 191, 0.06);
  color: var(--color-accent);
}

body .aq-panel-icon { color: var(--color-text-muted); }
body .aq-panel[open] .aq-panel-icon { color: var(--color-accent); }
body .aq-panel-chevron { color: var(--color-text-muted); }
body .aq-panel[open] .aq-panel-chevron { color: var(--color-accent); }

/* Messwerte-Felder */
body .aq-field span { color: var(--color-text-muted); }
body .aq-field input,
body .aq-field select {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text);
}
body .aq-field input:focus,
body .aq-field select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.15);
}

/* Wasserwechsel-Buttons */
body .aq-wc-btn {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text);
}
body .aq-wc-btn:hover {
  background: rgba(45, 212, 191, 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
body .aq-wc-btn:active {
  background: rgba(45, 212, 191, 0.15);
}

/* Pflege-Buttons */
body .aq-pflege-btn {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text);
}
body .aq-pflege-btn:hover {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.4);
  color: var(--color-success);
}
body .aq-pflege-btn:active {
  background: rgba(34, 197, 94, 0.15);
}

/* Aquarium-Meta-Texte */
body .aq-meta { color: var(--color-text-muted); }
body .aq-row dt { color: var(--color-text-muted); }
body .aq-row dd { color: var(--color-text); }
/* Desktop override: style.css uses higher-specificity hardcoded light-mode colors */
body .aq-meta .aq-row dt { color: var(--color-text-muted); }
body .aq-meta .aq-row dd { color: var(--color-text); }

/* ============================================
   BODY & GRUNDFLÄCHE
   ============================================ */
body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* ============================================
   KARTEN & PANELS
   ============================================ */
body .card,
body .card-soft,
body .container .card,
body .aq-card,
body .ai-card,
body .qc-teaser-cta-inner,
body .legend-card {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* Task-Listen */
body .tasks-list .task,
body .tasks-card ul.task-list.cols-2 > li.task {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

body .tasks-list .task__title,
body .tasks-list .task__meta {
  color: var(--color-text-muted);
}

/* Aquarium-Karten */
body .aq-card {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

/* AI-Bereich */
body .ai-card {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

body .ai-sticky {
  background: linear-gradient(180deg, rgba(10, 22, 40, 0), var(--color-bg-card) 18px);
}

/* Accordion */
body .aq-accordion > summary,
body .aq-accordion > div {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

/* Admin-Tabellen */
body .admin-species .table tr {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

/* ============================================
   FORMULARE & EINGABEN
   ============================================ */
body input:not([type="submit"]):not([type="button"])
      :not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body select,
body textarea,
body .aq-accordion input,
body .aq-accordion select,
body .aq-accordion textarea {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}

body input::placeholder,
body textarea::placeholder {
  color: var(--color-text-muted);
}

body input:focus,
body select:focus,
body textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
  background: var(--color-bg-elevated);
}

/* ============================================
   AUTOCOMPLETE / SUGGEST
   ============================================ */
body .suggest-box,
body .autocomplete .suggest-box {
  background: var(--color-bg-elevated) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--color-text) !important;
}

body .suggest-item,
body .autocomplete .suggest-item {
  color: var(--color-text) !important;
  background: transparent !important;
}

body .suggest-item:hover,
body .autocomplete .suggest-item:hover {
  background: var(--color-bg-card) !important;
  border-color: var(--color-accent) !important;
}

body .suggest-best,
body .autocomplete .suggest-best {
  background: rgba(45, 212, 191, 0.08) !important;
  border-color: rgba(45, 212, 191, 0.3) !important;
}

body .suggest-sub,
body .autocomplete .suggest-sub {
  color: var(--color-text-muted) !important;
}

/* ============================================
   CARD-POPOVER / DROPDOWN
   ============================================ */
body .card-popover {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

body .card-popover .menu-item {
  color: var(--color-text);
}

body .card-popover .menu-item:hover {
  background: var(--color-bg-card);
}

body .card-popover .menu-item.danger {
  color: var(--color-danger);
}

body .card-popover .menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   TYPOGRAFIE & TEXTE
   ============================================ */
body h1, body h2, body h3, body h4, body h5, body h6 {
  color: var(--color-text);
}

body p, body label, body span, body td, body th, body li {
  color: var(--color-text);
}

body .muted,
body [class*="muted"],
body .text-muted {
  color: var(--color-text-muted);
}

/* ============================================
   ALERTS / FLASH-MELDUNGEN
   ============================================ */
body .alert-success {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--color-success);
}

body .alert-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--color-danger);
}

body .alert-info {
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.3);
  color: var(--color-accent);
}

body .alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--color-warning);
}

/* ============================================
   CHIPS & BADGES (Warn-Varianten)
   ============================================ */
body .chip-warn,
body .badge-warn,
body .ampel-yellow {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 0 7px rgba(245, 158, 11, .28);
}

body .ampel-green {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
  box-shadow: 0 0 7px rgba(34, 197, 94, .28);
}

body .ampel-red {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
  box-shadow: 0 0 7px rgba(239, 68, 68, .28);
}

/* ============================================
   TABELLEN
   ============================================ */
body table {
  color: var(--color-text);
}

body th {
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

body td {
  border-color: var(--color-border);
}

body tr:hover td {
  background: var(--color-bg-elevated);
}

/* ============================================
   AI-QUOTA-BOX
   ============================================ */
body .ai-quota-box a {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-accent);
}

/* ============================================
   LINKS
   ============================================ */
body a:not(.btn):not(.nav__link):not(.bottom-nav__link):not(.profile-avatar):not(.admin-badge) {
  color: var(--color-accent);
}

body a:not(.btn):not(.nav__link):not(.bottom-nav__link):not(.profile-avatar):not(.admin-badge):hover {
  color: var(--color-accent-hover);
}

/* ============================================
   MOBIL: MINIMALER SEITENRAND
   ============================================ */
@media (max-width: 600px) {
  .container {
    padding-inline: 0.5rem;
  }
}