/* ==========================================================================
   MINDSIFT THEME ENGINE — ZENTRALE EINBINDUNG
   Jedes Theme ist eine eigenständige CSS-Datei unter src/themes/ mit 6 Gruppen:
     1. Akzentfarbe
     2. Oberflächen & Hintergründe
     3. Text & Kontraste
     4. Rahmen, Linien & Schatten
     5. Status- & Signalfarben
     6. Rundungen (Geometrie)
   ========================================================================== */

@import './themes/theme-dark.css';
@import './themes/theme-light.css';
@import './themes/theme-high-contrast.css';
@import './themes/theme-soft.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--bg-app);
  color: var(--text-main);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
  transition: background-color 140ms ease, color 140ms ease;
}

/* Scrollbar über Theme-Variablen */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-btn);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ==========================================================================
   SEMANTISCHE KOMPONENTEN-KLASSEN (100% Theme-gesteuert)
   ========================================================================== */

@layer components {
  /* Haupt-Karten, Sidebars und Container */
  .panel-surface {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
  }

  .panel-elevated {
    background-color: var(--bg-panel-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
  }

  .panel-header {
    border-bottom: 1px solid var(--border-color);
  }

  /* Automatische Übernahme von --radius-card auf gerahmten Panels & Boxen */
  .bg-panel.border,
  .bg-canvas.border {
    border-radius: var(--radius-card);
  }

  /* Quick-Capture-Blase im Header (immer vollständig abgerundet) */
  .capture-pill,
  .capture-pill.bg-panel.border {
    border-radius: 9999px !important;
  }

  /* Quick-Capture-Blase bei mehrzeiliger Eingabe (Shift+Enter) */
  .capture-bar-multiline,
  .capture-bar-multiline.bg-panel.border {
    border-radius: 18px !important;
  }

  /* Aufgaben-Checkboxen */
  .checkbox-square {
    border-radius: var(--radius-checkbox);
  }

  /* Standard-Aktionsbutton */
  .btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 1.75rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 120ms ease;
    cursor: pointer;
  }
  .btn-action:hover {
    background-color: var(--bg-panel-elevated);
    color: var(--text-main);
  }

  /* Primärer Akzent-Button */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 1.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background-color: var(--accent-primary);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-btn);
    color: var(--text-on-accent);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 120ms ease;
    cursor: pointer;
  }
  .btn-primary:hover {
    background-color: var(--accent-hover);
  }

  /* Kleiner Icon-Button */
  .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    color: var(--text-muted);
    transition: all 120ms ease;
    cursor: pointer;
  }
  .btn-icon:hover {
    background-color: var(--bg-panel-elevated);
    color: var(--text-main);
  }

  .btn-icon-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    color: var(--text-muted);
    transition: all 120ms ease;
    cursor: pointer;
  }
  .btn-icon-danger:hover {
    background-color: var(--bg-danger);
    color: var(--color-danger);
    border-color: var(--border-danger);
  }

  /* Sekundärer Button */
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 1.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background-color: var(--bg-panel-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 120ms ease;
    cursor: pointer;
  }
  .btn-secondary:hover {
    background-color: var(--bg-panel-hover);
    border-color: var(--border-strong);
  }

  /* Gefahren-/Löschen-Button */
  .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 1.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background-color: var(--bg-danger);
    border: 1px solid var(--border-danger);
    border-radius: var(--radius-btn);
    color: var(--color-danger);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 120ms ease;
    cursor: pointer;
  }
  .btn-danger:hover {
    filter: brightness(1.15);
  }

  /* Zentrales Texteingabefeld & Aliasse */
  .input-field,
  .input-base {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-input);
    color: var(--text-main);
    font-size: 0.75rem;
    transition: border-color 120ms ease;
  }
  .input-field:focus,
  .input-base:focus {
    outline: none;
    border-color: var(--accent-primary);
  }
  .input-field::placeholder,
  .input-base::placeholder {
    color: var(--text-faint);
  }

  /* Header Tabs */
  .tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all 120ms ease;
    cursor: pointer;
  }
  .tab-btn:hover {
    color: var(--text-main);
    background-color: var(--bg-panel-elevated);
  }
  .tab-btn-active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    background-color: var(--bg-panel-elevated);
  }

  /* Status Badges */
  .badge-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background-color: var(--accent-dim);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-btn);
    color: var(--accent-primary);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .badge-neutral {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 500;
  }

  .badge-ok {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    background-color: var(--bg-success);
    border: 1px solid var(--border-success);
    border-radius: var(--radius-btn);
    color: var(--color-success);
    font-size: 0.65rem;
    font-weight: 500;
  }

  .badge-err {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    background-color: var(--bg-danger);
    border: 1px solid var(--border-danger);
    border-radius: var(--radius-btn);
    color: var(--color-danger);
    font-size: 0.65rem;
    font-weight: 500;
  }

  /* Status Alert Boxen */
  .alert-ok {
    padding: 0.75rem;
    background-color: var(--bg-success);
    border: 1px solid var(--border-success);
    border-radius: var(--radius-card);
    color: var(--text-main);
    font-size: 0.75rem;
  }

  .alert-err {
    padding: 0.75rem;
    background-color: var(--bg-danger);
    border: 1px solid var(--border-danger);
    border-radius: var(--radius-card);
    color: var(--color-danger);
    font-size: 0.75rem;
  }

  /* Code- & Terminal-Blöcke */
  .code-block {
    background-color: var(--bg-code);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    color: var(--text-main);
  }

  /* Modal-Hintergrund-Overlay */
  .modal-overlay {
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--bg-overlay);
    backdrop-filter: blur(4px);
  }

  /* Verhindert, dass Elterncontainer mit space-y-* oder space-x-* feste Overlays nach unten verschieben */
  .fixed.inset-0,
  [class*="fixed inset-0"] {
    margin: 0 !important;
  }

  /* File Tree Item */
  .tree-node-active {
    background-color: var(--bg-panel-elevated);
    border-left: 2px solid var(--accent-primary);
    color: var(--text-main);
  }

  /* Prism Syntax Highlighting Tokens */
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: #71717a;
    font-style: italic;
  }

  .token.punctuation {
    color: #94a3b8;
  }

  .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol,
  .token.deleted {
    color: #f43f5e;
  }

  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted {
    color: #10b981;
  }

  .token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string {
    color: #38bdf8;
  }

  .token.atrule,
  .token.attr-value,
  .token.keyword {
    color: #818cf8;
    font-weight: 600;
  }

  .token.function,
  .token.class-name {
    color: #fbbf24;
  }

  .token.regex,
  .token.important,
  .token.variable {
    color: #f97316;
  }
}