/* ═══════════════════════════════════════════════════════════════════════
   ALMAS Auth — Theme v2 (23.09.2026)

   Additive Schicht ueber almas-design.css + auth.css. Aendert NUR Optik:
   HTML-Struktur, Logik, SSO und Backend bleiben unberuehrt. Deshalb wird
   diese Datei als LETZTE geladen — sie gewinnt durch die Reihenfolge, nicht
   durch Spezifitaet.

   Uebernommen aus der verbindlichen Vorlage rechnungstool-theme.css:
   hell und ruhig, helle Seitenleiste statt dunkler, Rot #FF2325 fuer
   Flaechen, #D81020 fuer Text und Knoepfe (kontraststark), weiche
   mehrschichtige Schatten, grosszuegige Radien, Helvetica Neue.
   ═══════════════════════════════════════════════════════════════════════ */

: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;

  --font-family:'Helvetica Neue',Helvetica,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

body{ background:var(--bg-primary); color:var(--text-primary); font-family:var(--font-family); }

/* ─── SEITENLEISTE: dunkel → hell/premium ─── */
.almas-sidebar{ background:var(--bg-sidebar); border-right:1px solid var(--border-secondary); box-shadow:var(--shadow-sm); }
.almas-sidebar-logo{ border-bottom:1px solid var(--border-secondary); }
.almas-sidebar-logo img{ filter:none; }          /* echtes Logo auf Weiss, 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,
.almas-sidebar-footer .logout{ color:var(--almas-red-hover); font-weight:600; }

/* ─── KOPFLEISTE: 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; color:var(--text-primary); }

/* ─── ANMELDUNG ─── */
.almas-login{ background:var(--bg-primary); padding:24px; }
.almas-login-box{
  background:#fff; border:1px solid var(--border-primary); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); padding:38px 34px;
}
.almas-login-box h1,.almas-login-box h2{ letter-spacing:-.02em; color:var(--text-primary); }
.almas-login-logo img{ filter:none; }

/* ─── EINGABEFELDER ─── */
.almas-input,.almas-select,.almas-textarea{
  background:#fff; color:var(--text-primary);
  border:1px solid var(--border-primary); border-radius:12px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.almas-input:focus,.almas-select:focus,.almas-textarea:focus{
  border-color:var(--almas-red); box-shadow:0 0 0 3px rgba(255,35,37,.14); outline:none;
}
.almas-form-group label{ color:var(--text-secondary); font-weight:600; }

/* ─── KNOEPFE ─── */
.almas-btn{ border-radius:12px; font-weight:600; transition:transform .12s ease, box-shadow .15s ease, background .15s ease; }
.almas-btn-primary{ background:var(--almas-red-hover); color:#fff; box-shadow:0 8px 20px rgba(216,16,32,.24); }
.almas-btn-primary:hover{ background:#BE0D1B; transform:translateY(-1px); box-shadow:0 12px 26px rgba(216,16,32,.32); }
.almas-btn-secondary{ background:var(--bg-tertiary); color:var(--text-primary); border:1px solid var(--border-primary); box-shadow:var(--shadow-sm); }
.almas-btn-secondary:hover{ background:#E8E8EE; }

/* ─── KARTEN, KENNZAHLEN, TABELLEN ─── */
.almas-card,.almas-stat,.almas-table-container{
  background:#fff; border:1px solid var(--border-primary); box-shadow:var(--shadow-sm);
}
.almas-card,.almas-table-container{ border-radius:var(--radius-lg); }
.almas-stat{ border-radius:var(--radius-lg); transition:transform .25s ease, box-shadow .25s ease; position:relative; overflow:hidden; }
.almas-stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.almas-stat .stat-value{ letter-spacing:-.03em; color:var(--text-primary); }
/* Farbe nicht nur Rot: jede Kennzahl bekommt einen leisen eigenen Akzent. */
.almas-stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#0057B8; }
.almas-stat:nth-child(2)::before{ background:var(--almas-red); }
.almas-stat:nth-child(3)::before{ background:#147A3D; }
.almas-stat:nth-child(4)::before{ background:#0E8C82; }

.almas-table th{ background:#FAFAFB; color:var(--text-secondary); border-bottom:1px solid var(--border-primary); }
.almas-table td{ border-bottom:1px solid var(--border-secondary); }
.almas-table tbody tr:hover{ background:#FAFAFB; }

/* ─── DIALOGE UND PLAKETTEN ─── */
.almas-modal{ background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); }
.almas-modal-overlay,.almas-menu-overlay{ background:rgba(21,22,26,.45); backdrop-filter:blur(3px); }
.almas-badge,.badge{ border-radius:999px; }
.almas-badge-success{ background:rgba(20,122,61,.12); color:#147A3D; }
.almas-badge-warning{ background:rgba(178,106,0,.12); color:#8A5A00; }
.almas-badge-danger{ background:rgba(194,15,28,.12); color:#C20F1C; }

.version-badge,.almas-version-badge{
  background:var(--bg-tertiary)!important; color:var(--text-secondary)!important;
  border-radius:999px;
}

.almas-menu-toggle{ background:#fff; border:1px solid var(--border-primary); color:var(--text-primary); box-shadow:var(--shadow-sm); border-radius:12px; }

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

/* ─── HINWEIS NACH DEM ABMELDEN ─── */
#abmeldeHinweis:not(.hidden){
  display:block; margin-top:16px; padding:10px 14px; border-radius:12px;
  background:rgba(20,122,61,.10); color:#147A3D; border:1px solid rgba(20,122,61,.30);
  font-size:13px; line-height:1.45;
}

/* ─── HANDY ─── */
@media (max-width:768px){
  .almas-login-box{ padding:30px 22px; border-radius:22px; }
  .almas-sidebar nav a{ min-height:44px; }
}
@supports (padding: max(0px)){
  @media (max-width:768px){
    .almas-menu-toggle{ top:max(16px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); }
    .almas-sidebar-footer{ padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  }
}
@media (prefers-reduced-motion: reduce){
  .almas-btn,.almas-stat{ transition:none; }
  .almas-btn-primary:hover,.almas-stat:hover{ transform:none; }
}

/* ─── VERWEISE IN DER MARKENFARBE ─── */
.almas-content a:not(.almas-btn),
.app-card a,
.almas-card a:not(.almas-btn){ color:var(--almas-red-hover); }
.almas-content a:not(.almas-btn):hover,
.app-card a:hover{ color:#BE0D1B; }
/* Die Kachel selbst hebt sich beim Zeigen leicht an. */
.app-card{ border-radius:var(--radius-lg); border:1px solid var(--border-primary);
  box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.app-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
@media (prefers-reduced-motion: reduce){ .app-card{ transition:none; } .app-card:hover{ transform:none; } }

/* ─── PASSWORT WÜRFELN ─── */
.pw-zeile{ display:flex; gap:8px; align-items:stretch; min-width:0; }
.pw-zeile .almas-input{ flex:1; min-width:0; }
.pw-knopf{ flex:0 0 auto; padding:0 16px; white-space:nowrap; font-size:13px; }
.pw-hinweis{
  margin-top:8px; padding:8px 12px; border-radius:10px; font-size:12.5px; line-height:1.5;
  background:rgba(20,122,61,.10); color:#147A3D; border:1px solid rgba(20,122,61,.28);
}
.pw-hinweis.hidden{ display:none; }
@media (max-width:520px){
  .pw-zeile{ flex-wrap:wrap; }
  .pw-knopf{ width:100%; min-height:44px; }
}