/* ============================================================================
   branding/theme.css — Erscheinungsbild „Elias Noro“
   Farben von eliasnoro.com: Tinte #0a0a0a, Gold #c9a84c / #e8c96d, Türkis #00c9b1,
   Creme #f5f0e8; Überschriften in Barlow Condensed.
   Wird NACH styles/main.css geladen und überschreibt nur Variablen und die
   Marken-Flächen (Anmeldung, Seitenleiste). Gehört zur Installation, nicht zum
   Code — scripts/mandant-sync.sh lässt branding/ unangetastet.
   ============================================================================ */

:root {
  /* Gold als Akzent: auf Weiß etwas dunkler als das Website-Gold, damit Text lesbar bleibt */
  --color-primary: #a6832b;
  --color-primary-dark: #8a6c20;
  --color-primary-darker: #775c19;      /* Hover-/Verlaufs-Endton (Module nutzen var(--color-primary-darker, …)) */
  --color-primary-light: #f7f0dc;
  --color-primary-rgb: 166, 131, 43;
  --color-secondary: #00a896;          /* Türkis der Website, abgedunkelt */

  --color-dark: #0a0a0a;
  --color-text: #1c1a16;
  --color-text-light: #6b655a;
  --color-text-secondary: #4a453c;
  --color-text-muted: #9a9385;
  --color-bg: #f7f5f0;
  --color-bg-card: #ffffff;
  --color-bg-subtle: #f7f5f0;
  --color-bg-hover: #efebe2;
  --color-border: #e5e0d5;
  --color-border-light: #f0ece3;
  --color-border-strong: #cfc8b9;

  /* Marken-Töne für dunkle Flächen (Seitenleiste, Anmeldung) */
  --brand-ink: #0a0a0a;
  --brand-ink-2: #141210;
  --brand-ink-3: #1f1c17;
  --brand-gold: #c9a84c;
  --brand-gold-lt: #e8c96d;
  --brand-off: #f5f0e8;
  --brand-font: 'Barlow Condensed', 'Inter', sans-serif;
}

body {
  background: linear-gradient(135deg, var(--color-bg) 0%, #efebe2 100%);
}

/* Primär-Knöpfe: Website-Gold mit dunkler Schrift */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-gold-lt) 0%, var(--brand-gold) 100%);
  color: #17130a;
}

/* ── Anmeldung ─────────────────────────────────────────────────────────────── */
.login-page {
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(201, 168, 76, 0.18), transparent 60%),
    radial-gradient(700px 500px at 90% 95%, rgba(0, 201, 177, 0.12), transparent 60%),
    var(--brand-ink);
}
.login-page::before { background: rgba(201, 168, 76, 0.06); }
.login-page::after  { background: rgba(0, 201, 177, 0.05); }

.login-card {
  background: rgba(20, 18, 16, 0.92);
  border: 1px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  color: var(--brand-off);
  text-align: center;
}
.login-card .login-logo {
  max-width: 230px;
  margin: 6px auto 14px;
}
.login-card h1 {
  font-family: var(--brand-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--brand-gold-lt) 0%, var(--brand-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.login-card .subtitle {
  font-family: var(--brand-font);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.85rem;
  color: var(--brand-gold);
}
.login-card .login-form { text-align: left; }
.login-card .form-group label { color: rgba(245, 240, 232, 0.75); }
.login-card .form-group input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(245, 240, 232, 0.16);
  color: var(--brand-off);
}
.login-card .form-group input::placeholder { color: rgba(245, 240, 232, 0.35); }
.login-card .form-group input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

/* ── Seitenleiste: dunkel mit Gold ─────────────────────────────────────────── */
.app-sidebar {
  background: var(--brand-ink);
  border-right-color: var(--brand-ink-3);
}
.sidebar-brand { border-bottom-color: var(--brand-ink-3); }
.brand-name {
  color: var(--brand-off);
  font-family: var(--brand-font);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.brand-logo-img { border: 1px solid rgba(201, 168, 76, 0.45); }
.sidebar-toggle { color: rgba(245, 240, 232, 0.55); }
.sidebar-toggle:hover { background: rgba(201, 168, 76, 0.14); color: var(--brand-gold-lt); }

.app-sidebar .tab-btn { color: rgba(245, 240, 232, 0.82); }
.app-sidebar .tab-btn:hover {
  background: rgba(201, 168, 76, 0.12);
  color: var(--brand-gold-lt);
}
.app-sidebar .tab-btn.active {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.24) 0%, rgba(201, 168, 76, 0.08) 100%);
  color: var(--brand-gold-lt);
  box-shadow: inset 3px 0 0 var(--brand-gold);
}
.sidebar-footer { border-top-color: var(--brand-ink-3); }
.sidebar-footer .reminder-bell,
.sidebar-footer .admin-toggle { color: rgba(245, 240, 232, 0.75); }
.sidebar-footer #logout-btn {
  background: transparent;
  border: 1px solid rgba(245, 240, 232, 0.22);
  color: rgba(245, 240, 232, 0.82);
  box-shadow: none;
}
.sidebar-footer #logout-btn:hover { border-color: var(--brand-gold); color: var(--brand-gold-lt); }

/* Kopfzeile: Bereichsname in der Markenschrift */
.topbar-title {
  font-family: var(--brand-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Dunkles Farbschema des Geräts: Tinte statt Marineblau ─────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #c9a84c;
    --color-primary-dark: #b3923a;
    --color-primary-darker: #9c7f30;
    --color-primary-light: #2b2412;
    --color-primary-rgb: 201, 168, 76;
    --color-text: #f5f0e8;
    --color-text-light: #c9c2b4;
    --color-text-secondary: #ddd6c8;
    --color-text-muted: #9a9385;
    --color-bg: #0d0d0d;
    --color-bg-card: #171512;
    --color-bg-subtle: #1e1b17;
    --color-bg-hover: #28241e;
    --color-border: #2c2821;
    --color-border-light: #24211b;
    --color-border-strong: #453f34;
  }
  body { background: linear-gradient(135deg, #0d0d0d 0%, #14110d 100%); }
}