/*
 * Areki — zentrales Design-System
 * Gemeinsame Theme-Datei für alle Areki-Produkte (Auditron, Scheduler,
 * Mistral Gateway, Handbuch, ...).
 *
 * Designsprache: modernes AI-Produkt, an LibreChat angelehnt (primäre
 * Referenz), mit Hermes Agent / Linear / Cursor / Vercel als Qualitäts-
 * Referenzen. Ruhige, reduzierte Farbpalette (Slate/Anthrazit + eine
 * Akzentfarbe), grosszügige Abstände, Tiefe über sanfte Schatten statt
 * Rahmen, weiche Mikro-Interaktionen.
 *
 * Produktspezifisches Layout bleibt im jeweiligen lokalen Stylesheet —
 * dort ausschliesslich über die --areki-* Variablen und die .areki-*
 * Basis-Komponenten arbeiten, keine eigenen Farbwerte/Radien/Schatten
 * hardcoden.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Farben — neutrales Grau wie LibreChat (gray-850/800/700/100), statt
     blau-stichigem Slate. Einzige Akzentfarbe: Teal. */
  --areki-bg: #171717;          /* LibreChat gray-850 */
  --areki-surface: #212121;     /* LibreChat gray-800 */
  --areki-surface-2: #2f2f2f;   /* LibreChat gray-700 — Hover/aktive Flächen */
  --areki-border: #383838;      /* nur noch sparsam einsetzen — Tiefe primär über Schatten */
  --areki-accent: #5eadb5;
  --areki-accent-hover: #7ec8cf;
  --areki-text: #ececec;        /* LibreChat gray-100 */
  --areki-text-muted: #999696;  /* LibreChat gray-400 */

  /* Typografie — Inter durchgehend (Headlines = grösser/kräftiger, keine
     Display-Serif mehr), moderater Weight-Kontrast statt "fett" */
  --areki-heading-font: 'Inter', system-ui, sans-serif;
  --areki-body-font: 'Inter', system-ui, sans-serif;
  --areki-mono-font: 'JetBrains Mono', monospace;

  /* Radius-Skala — grosszügiger als zuvor, LibreChat-nah (Basis 0.5rem) */
  --areki-radius-sm: 6px;
  --areki-radius: 10px;
  --areki-radius-lg: 14px;
  --areki-radius-full: 999px;

  /* Schatten-Skala — Tiefe statt Rahmen (Linear/Vercel-artig, weich, kein harter Rand) */
  --areki-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
  --areki-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  --areki-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.38);
  --areki-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--areki-accent) 30%, transparent);

  /* Spacing-Skala — für grosszügigere, konsistente Abstände */
  --areki-space-1: 4px;
  --areki-space-2: 8px;
  --areki-space-3: 12px;
  --areki-space-4: 16px;
  --areki-space-5: 24px;
  --areki-space-6: 32px;
  --areki-space-8: 48px;

  /* Bewegung — weiche Mikro-Interaktionen, 150–200ms */
  --areki-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --areki-transition-fast: 150ms ease;

  --areki-eyebrow-tracking: 0.06em;
}

/* ---------- Reset & Basis ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--areki-bg);
}

body {
  margin: 0;
  background: var(--areki-bg);
  color: var(--areki-text);
  font-family: var(--areki-body-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--areki-accent);
  color: var(--areki-bg);
}

/* ---------- Typografie ---------- */

h1,
h2,
h3,
.areki-heading {
  font-family: var(--areki-heading-font);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--areki-text);
  margin: 0 0 0.4em;
}

h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 600;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--areki-accent);
  text-decoration: none;
  transition: color var(--areki-transition-fast);
}
a:hover {
  color: var(--areki-accent-hover);
}

code,
pre,
kbd,
.areki-mono {
  font-family: var(--areki-mono-font);
}

/* Uppercase, leicht gesperrte Labels/Captions — Sektions-Eyebrows, Nav-Tabs */
.areki-eyebrow,
.areki-label {
  display: inline-block;
  font-family: var(--areki-mono-font);
  text-transform: uppercase;
  letter-spacing: var(--areki-eyebrow-tracking);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--areki-accent);
}
.areki-label--muted {
  color: var(--areki-text-muted);
}

/* ---------- Seiten-Header ---------- */
/* Grosser Titel + kurze Beschreibung + optionale Stats/Status/Actions rechts.
   Ein Header pro Seite, konsistent über alle Produkte hinweg. */

.areki-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--areki-space-4);
  padding-bottom: var(--areki-space-5);
  margin-bottom: var(--areki-space-6);
  border-bottom: 1px solid var(--areki-border);
}
.areki-page-header-title {
  font-family: 'DM Serif Display', serif;
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--areki-text);
  margin: 0 0 0.3rem;
}
.areki-page-header-desc {
  font-size: 0.92rem;
  color: var(--areki-text-muted);
  max-width: 60ch;
}
.areki-page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--areki-space-2);
  flex-shrink: 0;
}

/* ---------- Karten ---------- */
/* Tiefe über Schatten statt Rahmen — grosszügiges Padding, kein hartes Grid aus Boxen */

.areki-card {
  background: var(--areki-surface);
  border-radius: var(--areki-radius-lg);
  box-shadow: var(--areki-shadow-sm);
  padding: var(--areki-space-5);
  transition: box-shadow var(--areki-transition), transform var(--areki-transition);
}
.areki-card--interactive {
  cursor: pointer;
}
.areki-card--interactive:hover {
  box-shadow: var(--areki-shadow);
  transform: translateY(-1px);
}

/* ---------- Buttons ---------- */
/* Solide Akzentfarbe (primary) oder ruhige Fläche (secondary/ghost) —
   weicher Hover mit leichtem Glow + minimaler Scale, keine harten Kanten. */

.areki-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: none;
  font-family: var(--areki-body-font);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.6em 1.1em;
  border-radius: var(--areki-radius);
  cursor: pointer;
  transition: background var(--areki-transition), color var(--areki-transition),
    box-shadow var(--areki-transition), transform var(--areki-transition-fast);
}
.areki-btn:active {
  transform: scale(0.98);
}

.areki-btn--primary {
  background: var(--areki-accent);
  color: var(--areki-bg);
}
.areki-btn--primary:hover {
  background: var(--areki-accent-hover);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--areki-accent) 20%, transparent);
  transform: scale(1.01);
}

.areki-btn--secondary {
  background: var(--areki-surface-2);
  color: var(--areki-text);
}
.areki-btn--secondary:hover {
  background: color-mix(in srgb, var(--areki-surface-2) 80%, white 6%);
  transform: scale(1.01);
}

.areki-btn--ghost {
  background: transparent;
  color: var(--areki-text-muted);
}
.areki-btn--ghost:hover {
  background: var(--areki-surface-2);
  color: var(--areki-text);
}

.areki-btn--sm {
  font-size: 0.82rem;
  padding: 0.45em 0.85em;
  border-radius: var(--areki-radius-sm);
}

/* Legacy-Alias (bestehende Verwendungen) — jetzt als sekundärer Button-Stil,
   flach mit Rand ist Vergangenheit, aber bestehende Markup-Referenzen bleiben gültig */
.areki-btn:not(.areki-btn--primary):not(.areki-btn--secondary):not(.areki-btn--ghost) {
  background: var(--areki-surface-2);
  color: var(--areki-text);
}

/* ---------- Inputs ---------- */
/* Ruhige Fläche statt Rahmen-Kontrast, sanfter Fokus-Ring statt hartem Blau/Teal-Rand */

.areki-input,
input[type='text'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='number'],
textarea,
select {
  background: var(--areki-surface-2);
  border: 1px solid transparent;
  border-radius: var(--areki-radius);
  color: var(--areki-text);
  font-family: var(--areki-body-font);
  font-size: 0.9rem;
  padding: 0.65em 0.9em;
  transition: box-shadow var(--areki-transition), border-color var(--areki-transition);
}
.areki-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--areki-accent);
  box-shadow: var(--areki-shadow-focus);
}
.areki-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--areki-text-muted);
}

/* ---------- Badges ---------- */

.areki-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.2em 0.7em;
  border-radius: var(--areki-radius-full);
  background: var(--areki-surface-2);
  color: var(--areki-text-muted);
}
.areki-badge--accent {
  background: color-mix(in srgb, var(--areki-accent) 15%, transparent);
  color: var(--areki-accent);
}

/* ---------- Code-Blöcke ---------- */

pre {
  background: var(--areki-surface);
  border-radius: var(--areki-radius);
  box-shadow: var(--areki-shadow-sm);
  padding: 1rem 1.2rem;
  overflow-x: auto;
}
code {
  background: var(--areki-surface-2);
  border-radius: var(--areki-radius-sm);
  padding: 0.15em 0.45em;
  font-size: 0.88em;
}
pre code {
  background: none;
  padding: 0;
}

/* ---------- Tabellen ---------- */
/* Mehr Luft, weniger Linien — nur eine dezente Trennlinie unter dem Header,
   sanfter Hover statt Zebra-Streifen oder dichten Rahmen */

table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  text-align: left;
  padding: var(--areki-space-3) var(--areki-space-4);
}
th {
  font-family: var(--areki-body-font);
  text-transform: uppercase;
  letter-spacing: var(--areki-eyebrow-tracking);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--areki-text-muted);
  border-bottom: 1px solid var(--areki-border);
}
tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--areki-border) 50%, transparent);
  transition: background var(--areki-transition-fast);
}
tbody tr:last-child {
  border-bottom: none;
}
tbody tr:hover {
  background: var(--areki-surface-2);
}

/* ---------- Sidebar-Navigation ---------- */
/* Grosse Klickflächen, sanfte Hover-Flächen, klarer aktiver Zustand mit
   Akzent-Leiste statt hartem Rahmen. */

.areki-nav-item {
  display: flex;
  align-items: center;
  gap: var(--areki-space-3);
  padding: 0.65em var(--areki-space-3);
  border-radius: var(--areki-radius);
  color: var(--areki-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background var(--areki-transition-fast), color var(--areki-transition-fast);
}
.areki-nav-item:hover {
  background: var(--areki-surface-2);
  color: var(--areki-text);
}
.areki-nav-item--active {
  background: color-mix(in srgb, var(--areki-accent) 12%, transparent);
  color: var(--areki-accent);
}

/* ---------- Modals / Dialoge ---------- */
/* Fade + Scale beim Öffnen, grosszügiges Padding, kein harter Rahmen */

.areki-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 14, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--areki-transition);
  z-index: 1000;
}
.areki-modal-backdrop--open {
  opacity: 1;
  pointer-events: all;
}
.areki-modal {
  background: var(--areki-surface);
  border-radius: var(--areki-radius-lg);
  box-shadow: var(--areki-shadow-lg);
  padding: var(--areki-space-6);
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform var(--areki-transition), opacity var(--areki-transition);
}
.areki-modal-backdrop--open .areki-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ---------- Tooltips ---------- */

.areki-tooltip {
  background: var(--areki-surface-2);
  color: var(--areki-text);
  font-size: 0.78rem;
  padding: 0.4em 0.7em;
  border-radius: var(--areki-radius-sm);
  box-shadow: var(--areki-shadow);
  pointer-events: none;
}

/* ---------- Pagination ---------- */

.areki-pagination {
  display: flex;
  align-items: center;
  gap: var(--areki-space-1);
}
.areki-pagination button {
  min-width: 32px;
  height: 32px;
  border-radius: var(--areki-radius-sm);
  background: transparent;
  color: var(--areki-text-muted);
  border: none;
  cursor: pointer;
  transition: background var(--areki-transition-fast), color var(--areki-transition-fast);
}
.areki-pagination button:hover {
  background: var(--areki-surface-2);
  color: var(--areki-text);
}
.areki-pagination button[aria-current='true'] {
  background: var(--areki-accent);
  color: var(--areki-bg);
}

/* ---------- Haarlinien-Trenner ---------- */

.areki-divider {
  border: none;
  border-top: 1px solid var(--areki-border);
  margin: var(--areki-space-6) 0;
}