/*
 * AHS Toolchain – Gemeinsames Design System
 * Phase 1 — Version 1.0 — Juni 2026
 *
 * Einbinden: <link href="../_shared/ahs-common.css" rel="stylesheet">
 * Alle Klassen sind unter dem Präfix .ahs- namespaced.
 * Bestehende Tool-eigene CSS-Regeln werden NICHT überschrieben.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS-VARIABLEN (Design-Tokens)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Markenfarben AHS */
  --ahs-red:            #CC0000;
  --ahs-red-dark:       #A30000;

  /* Oberflächen – Dunkles Theme (Standard für CHARLY, CHRISTA, AHS-Hub) */
  --ahs-bg:             #0D0D0D;
  --ahs-surface:        #161616;
  --ahs-card:           #1e1e1e;
  --ahs-border:         #282828;
  --ahs-border-2:       #222222;
  --ahs-selected-bg:    #1a0000;

  /* Text */
  --ahs-text:           #ffffff;
  --ahs-text-muted:     #888888;
  --ahs-text-muted-2:   #444444;

  /* Statusfarben */
  --ahs-green:          #22c55e;
  --ahs-green-dark:     #1e7e34;
  --ahs-orange:         #f59e0b;
  --ahs-blue:           #2563EB;
  --ahs-purple:         #9060c0;

  /* Schriften — Barlow muss im Tool selbst per Google Fonts geladen werden */
  --ahs-font-display:   'Barlow Condensed', 'Segoe UI', system-ui, sans-serif;
  --ahs-font-body:      'Barlow', 'Segoe UI', system-ui, sans-serif;

  /* Geometrie */
  --ahs-radius:         6px;
  --ahs-radius-sm:      4px;
  --ahs-radius-lg:      10px;
  --ahs-shadow:         0 2px 8px rgba(0,0,0,0.5);
  --ahs-shadow-lg:      0 4px 20px rgba(0,0,0,0.65);
  --ahs-transition:     all 0.15s ease;
}

/* Light-Mode (z.B. für BALU) — aktiv wenn das Tool kein data-theme="dark" setzt */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ahs-bg:             #f5f7fa;
    --ahs-surface:        #ffffff;
    --ahs-card:           #ffffff;
    --ahs-border:         #e2e8f0;
    --ahs-border-2:       #d1d5db;
    --ahs-selected-bg:    #fee2e2;
    --ahs-text:           #1f2937;
    --ahs-text-muted:     #6b7280;
    --ahs-text-muted-2:   #9ca3af;
    --ahs-shadow:         0 1px 4px rgba(0,0,0,0.1);
    --ahs-shadow-lg:      0 4px 16px rgba(0,0,0,0.15);
  }
}

/* Drucken: alle Overlays ausblenden */
@media print {
  .ahs-modal-overlay { display: none !important; }
  #ahs-toast-container { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS — .ahs-btn
   Modifier-Klassen bleiben kompatibel mit alten .btn-* Namen (leichte Migration)
   ═══════════════════════════════════════════════════════════════════════════ */
.ahs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--ahs-radius);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--ahs-font-display);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--ahs-transition);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.ahs-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Primär (Rot) */
.ahs-btn.btn-primary  { background: var(--ahs-red); color: #fff; }
.ahs-btn.btn-primary:hover  { background: var(--ahs-red-dark); }

/* Outline (transparenter Rahmen) */
.ahs-btn.btn-outline  { background: transparent; color: var(--ahs-red); border: 1.5px solid var(--ahs-red); }
.ahs-btn.btn-outline:hover  { background: var(--ahs-selected-bg); }

/* Sekundär (dunkel) */
.ahs-btn.btn-secondary { background: #2a2a2a; color: var(--ahs-text); border: 1px solid var(--ahs-border); }
.ahs-btn.btn-secondary:hover { border-color: var(--ahs-text-muted-2); }

/* Erfolg */
.ahs-btn.btn-success  { background: #28a745; color: #fff; }
.ahs-btn.btn-success:hover  { background: var(--ahs-green-dark); }

/* Warnung */
.ahs-btn.btn-warning  { background: #f0a500; color: #fff; }
.ahs-btn.btn-warning:hover  { background: #c88600; }

/* Gefährlich */
.ahs-btn.btn-danger   { background: #dc3545; color: #fff; }
.ahs-btn.btn-danger:hover   { background: #b02a37; }

/* Klein */
.ahs-btn.btn-sm { padding: 5px 10px; font-size: 0.78rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   CARDS — .ahs-card
   ═══════════════════════════════════════════════════════════════════════════ */
.ahs-card {
  background: var(--ahs-card);
  border: 1px solid var(--ahs-border);
  border-radius: var(--ahs-radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--ahs-shadow);
}
.ahs-card h2 {
  font-family: var(--ahs-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ahs-red);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ahs-border);
}
.ahs-card h3 {
  font-size: 13px;
  color: #cccccc;
  margin-bottom: 12px;
}
/* Variante: Tabelle direkt als Card (kein Innen-Padding) */
.ahs-card.card-table {
  padding: 14px 0;
  overflow-x: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TABELLEN — .ahs-table
   Ersetzt .data-table in CHARLY, table in CHRISTA/BALU
   ═══════════════════════════════════════════════════════════════════════════ */
.ahs-table {
  width: 100%;
  border-collapse: collapse;
}
.ahs-table th {
  background: var(--ahs-surface);
  padding: 10px 12px;
  text-align: left;
  font-family: var(--ahs-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ahs-text-muted);
  border-bottom: 1px solid var(--ahs-border);
  user-select: none;
  white-space: nowrap;
}
.ahs-table th.sortable { cursor: pointer; }
.ahs-table th.sortable:hover { color: var(--ahs-text); }
.ahs-table th.sorted-asc::after  { content: ' ↑'; color: var(--ahs-red); }
.ahs-table th.sorted-desc::after { content: ' ↓'; color: var(--ahs-red); }

.ahs-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--ahs-border-2);
  vertical-align: middle;
  color: var(--ahs-text);
}
.ahs-table tr:hover td { background: rgba(255,255,255,0.025); }
.ahs-table tr:last-child td { border-bottom: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   BADGES — .ahs-badge
   Modifier-Klassen (.badge-blue etc.) bleiben kompatibel
   ═══════════════════════════════════════════════════════════════════════════ */
.ahs-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* Farb-Modifier (kompatibel mit CHARLY) */
.ahs-badge.badge-blue   { background: #0d1a2a; color: #60a0e0; }
.ahs-badge.badge-green  { background: #0f2a0f; color: #5a9a5a; }
.ahs-badge.badge-orange { background: #2a1800; color: #cc8800; }
.ahs-badge.badge-red    { background: #2a0808; color: #cc4444; }
.ahs-badge.badge-gray   { background: #1a1a1a; color: var(--ahs-text-muted); }
.ahs-badge.badge-purple { background: #1a0a2a; color: var(--ahs-purple); }
.ahs-badge.badge-teal   { background: #0f2a2a; color: #40c0a0; }

/* CHARLY-Auftrags-Status (identisch mit alten .status-* Regeln) */
.ahs-badge.status-offen    { background: #0d1a2a; color: #60a0e0; }
.ahs-badge.status-progress { background: #2a1800; color: #cc8800; }
.ahs-badge.status-done     { background: #0f2a0f; color: #5a9a5a; }
.ahs-badge.status-invoiced { background: #1a0a2a; color: var(--ahs-purple); }
.ahs-badge.status-paid     { background: #0f2a1a; color: #40c080; }


/* ═══════════════════════════════════════════════════════════════════════════
   MODALS — .ahs-modal-overlay + .ahs-modal
   ═══════════════════════════════════════════════════════════════════════════ */
.ahs-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* .show (CHARLY) und .open (CHRISTA) sind beide gültig */
.ahs-modal-overlay.show,
.ahs-modal-overlay.open { display: flex; }

.ahs-modal {
  background: var(--ahs-card);
  border: 1px solid var(--ahs-border);
  border-radius: var(--ahs-radius-lg);
  padding: 24px;
  width: 600px;
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--ahs-shadow-lg);
}
.ahs-modal h2 {
  font-family: var(--ahs-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ahs-red);
  margin-bottom: 20px;
}
.ahs-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ahs-border);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TOASTS — #ahs-toast-container + .ahs-toast
   Container wird von AHSToast() automatisch erstellt
   ═══════════════════════════════════════════════════════════════════════════ */
#ahs-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
  pointer-events: none;
}
.ahs-toast {
  padding: 12px 18px;
  border-radius: var(--ahs-radius);
  font-size: 0.85rem;
  font-weight: 500;
  max-width: 380px;
  border-left: 3px solid transparent;
  animation: ahs-slide-in 0.2s ease;
  transition: opacity 0.3s ease;
  pointer-events: auto;
}
.ahs-toast--ok   { background: #0f1f0f; color: var(--ahs-green); border-left-color: var(--ahs-green); }
.ahs-toast--err  { background: #200f0f; color: #ff4444;          border-left-color: var(--ahs-red); }
.ahs-toast--info { background: var(--ahs-card); color: var(--ahs-text); border: 1px solid var(--ahs-border); border-left: 3px solid var(--ahs-text-muted); }

@keyframes ahs-slide-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   INPUTS — .ahs-input
   ═══════════════════════════════════════════════════════════════════════════ */
.ahs-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--ahs-surface);
  border: 1.5px solid var(--ahs-border);
  border-radius: var(--ahs-radius);
  color: var(--ahs-text);
  font-size: 14px;
  font-family: var(--ahs-font-body);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.ahs-input:focus {
  border-color: var(--ahs-red);
  box-shadow: 0 0 0 3px rgba(204,0,0,0.15);
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION (Tab-Bar) — .ahs-nav + .ahs-nav-btn
   ═══════════════════════════════════════════════════════════════════════════ */
.ahs-nav {
  display: flex;
  background: var(--ahs-surface);
  border-bottom: 1px solid var(--ahs-border);
  overflow-x: auto;
}
.ahs-nav-btn {
  background: none;
  border: none;
  color: var(--ahs-text-muted);
  font-family: var(--ahs-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ahs-nav-btn:hover { color: var(--ahs-text); }
.ahs-nav-btn.active {
  color: var(--ahs-text);
  border-bottom-color: var(--ahs-red);
}


/* ═══════════════════════════════════════════════════════════════════════════
   KENNZAHLKARTEN (KPI-Dashboard) — .ahs-kennzahl-row + .ahs-kennzahl
   Ersetzt .stat-row + .stat-box in CHARLY/CHRISTA
   ═══════════════════════════════════════════════════════════════════════════ */
.ahs-kennzahl-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ahs-kennzahl {
  background: var(--ahs-surface);
  border: 1px solid var(--ahs-border);
  border-radius: var(--ahs-radius);
  padding: 12px 16px;
  border-left: 4px solid var(--ahs-red);
}
.ahs-kennzahl .value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ahs-text);
  line-height: 1.2;
}
.ahs-kennzahl .label {
  font-size: 11px;
  color: var(--ahs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}
/* Aliase für CHRISTA + AHS-Hub (.val / .lbl / .sub statt .value / .label) */
.ahs-kennzahl .val  { font-size: 2rem; font-weight: 700; color: var(--ahs-red); line-height: 1.2; }
.ahs-kennzahl .lbl  { font-size: 0.75rem; color: var(--ahs-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.ahs-kennzahl .sub  { font-size: 0.72rem; color: var(--ahs-text-muted); margin-top: 5px; }

/* Von AHSKennzahl() gerenderte Struktur */
.ahs-kennzahl .ahs-kennzahl__icon  { font-size: 18px; margin-bottom: 6px; }
.ahs-kennzahl .ahs-kennzahl__value { font-size: 20px; font-weight: 700; line-height: 1.2; }
.ahs-kennzahl .ahs-kennzahl__label { font-size: 11px; color: var(--ahs-text-muted); text-transform: uppercase; margin-top: 2px; }
.ahs-kennzahl .ahs-kennzahl__trend { font-size: 11px; color: var(--ahs-text-muted); margin-top: 4px; }


/* ═══════════════════════════════════════════════════════════════════════════
   AUTOCOMPLETE — .ahs-autocomplete-dropdown
   Wird von AHSAutocomplete() dynamisch erstellt
   ═══════════════════════════════════════════════════════════════════════════ */
.ahs-autocomplete-dropdown {
  position: absolute;
  z-index: 500;
  background: var(--ahs-card);
  border: 1px solid var(--ahs-border);
  border-top: none;
  border-radius: 0 0 var(--ahs-radius) var(--ahs-radius);
  max-height: 240px;
  overflow-y: auto;
  box-shadow: var(--ahs-shadow-lg);
  width: 100%;
  left: 0;
}
.ahs-autocomplete-item {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--ahs-border-2);
  transition: background 0.1s;
  line-height: 1.4;
}
.ahs-autocomplete-item:hover,
.ahs-autocomplete-item.focused {
  background: var(--ahs-selected-bg);
  color: var(--ahs-red);
}
.ahs-autocomplete-item:last-child { border-bottom: none; }
.ahs-autocomplete-item .item-sub {
  font-size: 11px;
  color: var(--ahs-text-muted);
  margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARE — .ahs-form-group
   ═══════════════════════════════════════════════════════════════════════════ */
.ahs-form-group { margin-bottom: 14px; }
.ahs-form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ahs-text-muted);
  margin-bottom: 5px;
}
.ahs-form-group input,
.ahs-form-group select,
.ahs-form-group textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--ahs-surface);
  border: 1.5px solid var(--ahs-border);
  border-radius: var(--ahs-radius);
  color: var(--ahs-text);
  font-size: 14px;
  font-family: var(--ahs-font-body);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.ahs-form-group input:focus,
.ahs-form-group select:focus,
.ahs-form-group textarea:focus {
  border-color: var(--ahs-red);
  box-shadow: 0 0 0 3px rgba(204,0,0,0.15);
}
.ahs-form-group textarea { resize: vertical; min-height: 70px; }


/* ═══════════════════════════════════════════════════════════════════════════
   HILFSELEMENTE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Leer-Zustand */
.ahs-empty-state {
  text-align: center;
  color: var(--ahs-text-muted);
  padding: 40px 20px;
  font-size: 14px;
}

/* Trennlinie */
.ahs-sep {
  height: 1px;
  background: var(--ahs-border);
  margin: 20px 0;
}

/* Statusanzeige-Punkt */
.ahs-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ahs-border);
}
.ahs-dot--ok     { background: var(--ahs-green); box-shadow: 0 0 4px var(--ahs-green); }
.ahs-dot--err    { background: var(--ahs-red); }
.ahs-dot--warn   { background: var(--ahs-orange); }


/* ═══════════════════════════════════════════════════════════════════════════
   ZOOM — .ahs-zoom-scope
   Jedes Tool markiert seinen Hauptinhalts-Container mit dieser Klasse.
   Header/Login/Navigation bewusst nicht mit einbeziehen.
   Siehe ahs-zoom.js für die JS-Gegenseite (AHSZoomCycle, Pre-Paint-Bootstrap).
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-zoom="2"] .ahs-zoom-scope { zoom: 1.15; }
html[data-zoom="3"] .ahs-zoom-scope { zoom: 1.30; }
html[data-zoom="4"] .ahs-zoom-scope { zoom: 1.50; }


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — ≤ 767px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .ahs-modal { padding: 16px; }
  .ahs-modal-footer { flex-wrap: wrap; }
  .ahs-modal-footer .ahs-btn {
    flex: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}