/* ═══════════════════════════════════════════════════════════════
   ALMAS Testphasen-Portal — Theme v2 (2026-07-06)
   Additive Override-Schicht auf almas-design.css + testphasen.css.
   Ändert NUR Optik (Tokens + Komponenten-Feinschliff).
   HTML-Struktur, JS-Logik, SSO und Backend bleiben unverändert.
   Neues Design: hell, premium, weiche Schatten, helle Sidebar,
   Rot #FF2325 (Flächen) / #D81020 (Text/Buttons, AA-sicher).
   Muss als LETZTES Stylesheet geladen werden.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --almas-red:#FF2325;
  --almas-red-hover:#D81020;
  --almas-red-light:rgba(255,35,37,.08);
  --almas-red-border:rgba(255,35,37,.22);

  --bg-primary:#F6F6F8;
  --bg-secondary:#FFFFFF;
  --bg-tertiary:#F1F1F4;
  --bg-sidebar:#FFFFFF;
  --bg-sidebar-hover:#F4F4F7;
  --bg-sidebar-active:rgba(255,35,37,.10);

  --text-primary:#15161A;
  --text-secondary:#5C5F66;
  --text-tertiary:#8A8D94;
  --text-link:#D81020;

  --border-primary:#E2E3E8;
  --border-secondary:#ECECEF;
  --border-focus:#FF2325;

  --shadow-sm:0 1px 2px rgba(16,17,22,.04),0 2px 6px rgba(16,17,22,.05);
  --shadow-md:0 6px 16px rgba(16,17,22,.06),0 12px 30px rgba(16,17,22,.08);
  --shadow-lg:0 12px 30px rgba(16,17,22,.10),0 26px 60px rgba(16,17,22,.12);
  --shadow-xl:0 18px 40px rgba(16,17,22,.14),0 40px 90px rgba(16,17,22,.16);

  --radius-sm:10px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:26px;
}

body{ background:var(--bg-primary); }

/* ─── SIDEBAR: dunkel → hell/premium ─── */
.almas-sidebar{ background:var(--bg-sidebar); border-right:1px solid var(--border-secondary); }
.almas-sidebar-logo{ border-bottom:1px solid var(--border-secondary); }
.almas-sidebar-logo img{ filter:none; }
.almas-sidebar-logo .app-name{ color:var(--text-secondary); }
.almas-sidebar nav a,
.almas-sidebar nav button{
  color:var(--text-secondary);
  font-weight:600;
  border-radius:12px;
  position:relative;
}
.almas-sidebar nav a:hover,
.almas-sidebar nav button:hover{ background:var(--bg-sidebar-hover); color:var(--text-primary); }
.almas-sidebar nav a.active{ background:var(--bg-sidebar-active); color:var(--almas-red-hover); font-weight:700; }
.almas-sidebar nav a.active::before{
  content:""; position:absolute; left:2px; top:8px; bottom:8px;
  width:3px; border-radius:3px; background:var(--almas-red);
}
.almas-sidebar-footer{ border-top:1px solid var(--border-secondary); }
.almas-sidebar-user{ color:var(--text-secondary); }
.almas-sidebar-user .name{ color:var(--text-primary); }
.almas-sidebar-user .logout{ color:var(--almas-red-hover); }
#appVersion{ color:var(--text-tertiary)!important; }

/* ─── HEADER: Glas ─── */
.almas-header{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--border-secondary);
}
.almas-header h1{ letter-spacing:-.02em; }

/* ─── BUTTONS ─── */
.almas-btn{ border-radius:10px; font-weight:600; }
.almas-btn-primary{ background:var(--almas-red-hover); box-shadow:0 8px 20px rgba(255,35,37,.26); }
.almas-btn-primary:hover{ background:var(--almas-red); transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,35,37,.34); }
.almas-btn-secondary{ box-shadow:var(--shadow-sm); }
.almas-btn-success{ box-shadow:0 8px 20px rgba(20,122,61,.22); }
.almas-btn-success:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(20,122,61,.30); }

/* ─── KARTEN / STATS: weiche Schatten + Hover-Lift ─── */
.almas-card,
.almas-stat,
.almas-table-container{ border-color:var(--border-secondary); box-shadow:var(--shadow-sm); }
.almas-card{ border-radius:var(--radius-lg); }
.almas-stat{ border-radius:var(--radius-lg); transition:transform .25s var(--transition-base), box-shadow .25s; }
.almas-stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.almas-stat .stat-value{ letter-spacing:-.03em; }

/* ─── CONFIG-SEKTIONEN: Karten mit v2-Rundung/Schatten ─── */
.config-section{ border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border-color:var(--border-secondary); }
.config-section h3{ color:var(--almas-red-hover); }         /* AA: #D81020 statt #FF2325 */
.config-range{ accent-color:var(--almas-red-hover); }

/* ─── KONTAKT-KARTEN (Interne Teilnehmer) ─── */
.contact-card{ border-radius:var(--radius-md); border-color:var(--border-secondary); box-shadow:var(--shadow-sm); }
.contact-card .contact-input{ border-radius:var(--radius-sm); }
.channel-label{ color:var(--text-secondary); }

/* ─── TABELLEN: ruhiger Header ─── */
.almas-table th{ background:var(--bg-secondary); border-bottom:1px solid var(--border-secondary); }
.almas-table td{ border-bottom:1px solid var(--border-secondary); }
.almas-table tbody tr:hover{ background:var(--bg-primary); }

/* ─── MODAL ─── */
.almas-modal{ border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); }

/* ─── BADGES: rund + AA-Textfarben ─── */
.almas-badge,
.badge-admin,.badge-vertriebler,
.almas-badge-success,.almas-badge-warning,.almas-badge-danger,.almas-badge-info{ border-radius:999px; }
.almas-badge-success,.badge-frei{ color:#147A3D; }
.almas-badge-warning,.badge-admin{ color:#8A5A00; }
.almas-badge-danger{ color:#C20F1C; }
.almas-badge-info,.badge-vertriebler{ color:#0057B8; }

/* ─── CHAT-WIDGET: rot + weiche Schatten ─── */
.chat-bubble{ background:var(--almas-red-hover); box-shadow:0 10px 26px rgba(255,35,37,.30); }
.chat-bubble:hover{ background:var(--almas-red); transform:translateY(-2px); }
.chat-window{ border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); border:1px solid var(--border-secondary); }
.chat-header{ background:var(--almas-red-hover); }
.chat-msg.bot{ background:var(--bg-tertiary); color:var(--text-primary); }
.chat-input-area button{ background:var(--almas-red-hover); }
.chat-input-area button:hover{ background:var(--almas-red); }

/* ─── FOKUS sichtbar (A11y) ─── */
a:focus-visible,button:focus-visible,
.almas-input:focus-visible,.almas-select:focus-visible,.almas-textarea:focus-visible,
.contact-input:focus-visible,.toggle input:focus-visible + .slider{
  outline:2px solid var(--almas-red-hover); outline-offset:2px;
}

/* ─── KONTRAST (WCAG AA) — Rot-Text auf #D81020 ─── */
.text-red,
.almas-stat .stat-value.red,
.almas-badge-red{ color:var(--almas-red-hover); }

/* ─── RESPONSIVE: kein horizontales Seiten-Scrollen ─── */
@media (max-width:980px){
  .almas-main{ min-width:0; }
  .almas-content{ min-width:0; max-width:100%; }
  .almas-table-container{ max-width:100%; }
  html, body{ overflow-x:hidden; }
}
@media (max-width:560px){
  .almas-content{ padding:14px 14px 48px; }
  .almas-header{ padding-left:60px; }
  .config-section{ padding:16px; }
}

/* ─── LOGIN-SCREEN (vor SSO-Redirect) ─── */
.almas-login-box{ border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); }

@media (prefers-reduced-motion: reduce){
  .almas-stat,.almas-btn-primary,.almas-btn-success,.chat-bubble{ transition:none!important; }
  .almas-stat:hover,.almas-btn-primary:hover,.almas-btn-success:hover,.chat-bubble:hover{ transform:none!important; }
}