/* =============================================== - Optimiert & Vereinfacht
   ===============================================
   
   Permanenter dunkler Modus - keine Toggle-Logik mehr nötig
   Radikale Vereinfachung von 1832 auf ~200 Zeilen
   
   =============================================== */

/* ===============================================
   CSS VARIABLEN - Zentrale Farbpalette
   =============================================== */

/* ===============================================
   GRUNDLEGENDE STYLES
   =============================================== */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* ===============================================
   SIDEBAR & CONTAINERS
   =============================================== */
.sidebar,
.preview-area,
.tab-content {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.app-container {
  background-color: var(--bg-primary);
}

/* ===============================================
   BUTTONS & INPUTS
   =============================================== */
button,
.button,
.btn,
input[type='button'],
input[type='submit'] {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-color);
}

button:hover,
.button:hover,
.btn:hover {
  background-color: var(--bg-hover);
}

input[type='text'],
input[type='number'],
input[type='email'],
textarea,
select {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-color);
}

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

/* ===============================================
   TABS
   =============================================== */
.tab-button {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

.tab-button.active,
.tab-button:hover {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

/* ===============================================
   DATENBANK-TABELLE
   =============================================== */
.database-table {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.database-table thead {
  background-color: #1a1a1a !important;
}

.database-table th {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

.database-table td {
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

/* Hover-Zeile: dezentes Aufhellen statt des früheren gelb-schwarzen
   "Absperrbands" (auf Steffens Wunsch überarbeitet, v0.02.05). Ruhiger,
   heller Ton, farblich abgestimmt auf die blaue Auswahl-/Kopf-Hervorhebung. */
.database-table tbody tr:hover:not(.empty-message) {
  background-image: none !important;
  background-color: rgba(120, 170, 255, 0.1) !important;
}

.database-table tbody tr:hover:not(.empty-message) td {
  background: transparent !important;
}

.database-table tbody tr.selected {
  background-color: rgba(69, 158, 255, 0.15);
}

/* ===============================================
   MODALS & OVERLAYS
   =============================================== */
.modal,
.modal-content,
.dialog {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg);
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

/* ===============================================
   SCROLLBARS
   =============================================== */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: #555555;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #666666;
}

/* ===============================================
   LINKS
   =============================================== */
a {
  color: var(--accent-blue);
}

a:hover {
  color: var(--accent-red);
}

/* ===============================================
   TOASTS & NOTIFICATIONS
   =============================================== */
.toast {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-color);
  box-shadow: var(--shadow-md);
}

.toast.success {
  border-left: 4px solid var(--accent-green);
}

.toast.error {
  border-left: 4px solid var(--accent-red);
}

.toast.warning {
  border-left: 4px solid var(--accent-yellow);
}

.toast.info {
  border-left: 4px solid var(--accent-blue);
}

/* ===============================================
   DROPZONE & FILE UPLOAD
   =============================================== */
.dropzone {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.dropzone:hover,
.dropzone.drag-over {
  background-color: var(--bg-hover);
  border-color: var(--accent-blue);
}

/* ===============================================
   PREVIEW AREA & A4
   =============================================== */
.a4-container {
  background-color: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}

/* ===============================================
   BADGES & LABELS
   =============================================== */
.badge,
.label {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

/* ===============================================
   ARTIKEL-KARTEN
   =============================================== */
.article-card {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.article-card:hover {
  background-color: var(--bg-hover);
}

/* ===============================================
   TOOLTIPS
   =============================================== */
.tooltip {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-color);
  box-shadow: var(--shadow-md);
}

/* ===============================================
   CODE & PRE
   =============================================== */
code,
pre {
  background-color: var(--bg-elevated);
  color: var(--accent-blue);
  border-color: var(--border-color);
}

/* ===============================================
   LOADING INDICATOR
   =============================================== */
.loading-indicator {
  background-color: rgba(26, 26, 26, 0.95);
  color: var(--text-primary);
}

/* ===============================================
   FERTIG! 
   Von 1832 Zeilen auf 280 Zeilen reduziert
   Keine Toggle-Logik, keine Komplexität
   Pure Performance 🚀
   =============================================== */