/* ═══════════════════════════════════════════════════════════════
   ALMAS Rechnungstool — Theme v2 (2026-06-20)
   Additive Override-Schicht auf almas-design.css + rechnungstool.css.
   Ändert NUR Optik (Tokens + hartcodierte Dunkel-Sidebar-Farben).
   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).
   ═══════════════════════════════════════════════════════════════ */

: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; }            /* echtes Logo auf Weiß (nicht invertiert) */
.almas-sidebar-logo .app-name{ color:var(--text-tertiary); }
.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-tertiary); }
.almas-sidebar-user .name{ color:var(--text-primary); }
.almas-sidebar-user .logout{ color:var(--almas-red-hover); }

/* Nav-Badges (waren weiß-auf-dunkel) */
.nav-badge{ background:var(--bg-tertiary); color:var(--text-secondary); }
.nav-badge-danger{ background:var(--almas-red); color:#fff; }
.nav-badge-warning{ background:rgba(253,196,0,.18); color:#946B00; }

/* ─── 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); }

/* ─── 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; }

/* ─── 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); }

/* ─── QUICK-FILTER → „Schalter" (Pille mit Schatten) ─── */
.quick-filters{
  display:inline-flex; gap:3px; padding:5px;
  background:var(--bg-tertiary); border-radius:999px;
  box-shadow:inset 0 1px 2px rgba(16,17,22,.06);
}
.quick-filter{ border:none; background:transparent; border-radius:999px; color:var(--text-secondary); }
.quick-filter:hover{ border:none; background:transparent; color:var(--text-primary); }
.quick-filter.active{ background:#fff; color:var(--text-primary); border:none; box-shadow:var(--shadow-md); }

/* ─── UPLOAD-ZONE ─── */
.almas-upload-zone{ border:1.5px dashed #D3D4DA; border-radius:var(--radius-lg); }
.almas-upload-zone:hover,
.almas-upload-zone.drag-over{ border-color:var(--almas-red); background:linear-gradient(180deg,#fff,#FFF6F6); }

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

/* ─── BADGES: rund ─── */
.almas-badge,
.badge-pending,.badge-approved,.badge-success,
.badge-rejected,.badge-danger,.badge-overdue{ border-radius:999px; }

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

/* ─── KONTRAST (WCAG AA) — Rot-Text auf #D81020 statt #FF2325 ─── */
.text-red,
.almas-stat .stat-value.red,
.almas-badge-red,
.almas-detail-section h3,
.almas-table-excel thead th.col-header .col-sortable:hover,
.col-sort-arrow.active,
.col-filter-btn.active,
.trend-up,
.split-remove:hover{ color:var(--almas-red-hover); }

/* Sidebar-Kleintexte auf Weiß lesbarer */
.almas-sidebar-logo .app-name,
.almas-sidebar-user{ color:var(--text-secondary); }
.almas-version-badge{ color:var(--text-secondary)!important; }

/* Badge-Texte: dunkler für AA auf hellen Tints */
.almas-badge-success,.badge-approved,.badge-success{ color:#147A3D; }
.almas-badge-warning,.badge-pending{ color:#8A5A00; }
.almas-badge-danger,.badge-rejected,.badge-overdue{ color:#C20F1C; }
.almas-badge-info{ color:#0057B8; }
.nav-badge-warning{ color:#7A4D00; }

/* ─── MOBILE: echtes Handy-Layout (kein horizontales Seiten-Scrollen) ─── */
/* Ursache des „Desktop geschrumpft"-Effekts: .almas-main ist Flex-Item mit
   min-width:auto und schrumpft nicht unter die breite Datentabelle (min-width:600px)
   → ganze Seite wird zu breit. Fix: min-width:0, Tabellen scrollen nur noch intern. */
@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){
  /* etwas kompakter auf kleinen Phones */
  .almas-content{ padding:14px 14px 48px; }
  .almas-header{ padding-left:60px; }
  .almas-stat{ padding:16px; }
  .almas-stat .stat-value{ font-size:26px; }
  .quick-filters{ width:100%; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
}

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