/*
 * 8XREGIO Farbschema & Sidebar-Layout
 * Aus dem offiziellen 8XREGIO-Bildmaterial abgeleitet (Logo, Direktkasse-Hero-Bild).
 * Diese Datei ist die zentrale Design-Quelle fuer alle 8XREGIO-Weboberflaechen
 * (Consultant-Portal, spaeter ggf. weitere Tools) - bei Aenderungen hier pflegen.
 */
:root{
  /* Neutrales Dunkel-Grau wie beim Region-Scouting-Tool (Franz, 20.07.2026) -
     vorher war hier ein Gruenstich (#0a170f etc.), der laut Franz im direkten
     Vergleich mit dem Scouting-Tool "komisch" wirkt. Werte unten sind bewusst
     identisch zu 8xregio-region-scouting/static/style.css (--bg/--card/--border),
     damit sich beide Tools optisch wie ein System anfuehlen. */
  --c-bg:#0f1115;
  --c-bg-soft:#171a21;
  --c-panel:#171a21;
  --c-panel-alt:#1b1f28;
  --c-panel-border:#262b35;
  --c-gold:#c9a227;
  --c-gold-light:#e9c379;
  --c-gold-dark:#8a6f1f;
  --c-green:#7c8794;
  --c-green-light:#9aa4b2;
  --c-green-muted:#6b7480;
  --c-text:#e8e6e1;
  --c-text-muted:#9a9ea8;
  --c-danger:#b3543f;
  --c-success:#3f8f5f;
  /* Rollenfarben (Franz, 25.07.2026: "Die farbliche Darstellung der Roadmap
     würde mir generell für unser Backoffice gefallen") - 1:1 aus der
     Roadmap-Grafik (docs/8xregio_backoffice_roadmap_v2.html) uebernommene
     Phasenfarben, hier auf die 6 Portal-Rollen gemappt: Consultant=Phase1
     (Blau/Fundament), Leader=Phase5 (Lila/Zusatzthemen - hebt sich bewusst
     ab), Hotelkunde=Phase3 (Magenta/Geschaeftsprozesse), Mitglied=Phase4
     (Gold/Technische Umsetzung), Admin=Phase2 (Gruen/Rollen-Bereiche, wie
     "erledigt"-Status), Unassigned=neutrales Grau. Werte hier sind die
     dunkleren Roadmap-Dark-Mode-Toene (Grundzustand des Portals ist dunkel);
     die helleren Roadmap-Light-Werte stehen unten im Hell-Modus-Block. */
  --role-consultant:#3987e5;
  --role-leader:#9085e9;
  --role-hotel_customer:#d55181;
  --role-magazine_member:#c98500;
  --role-admin:#0ca30c;
  --role-unassigned:#9a9ea8;
  /* Eine einheitliche, moderne Schriftfamilie fuer Ueberschriften UND Fliesstext
     (Franz, 20.07.2026: die alte Serifenschrift bei Ueberschriften wirkte zu sehr
     nach dem SSE-Magazin-Stil) - genau wie beim Scouting-Tool, das durchgehend
     nur eine sans-serif-Schrift verwendet. */
  --font-head: -apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body: -apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --sidebar-width: 250px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:radial-gradient(circle at 20% 0%,var(--c-bg-soft),var(--c-bg) 60%);
  color:var(--c-text);
  font-family:var(--font-body);
  line-height:1.5;
}
a{color:var(--c-gold-light);}
h1,h2,h3{font-family:var(--font-head);color:var(--c-gold);letter-spacing:.06em;margin:0 0 .3em 0;}
h1{text-transform:uppercase;font-size:1.3rem;}
h2{text-transform:uppercase;font-size:1.1rem;border-bottom:1px solid var(--c-panel-border);padding-bottom:.4em;}
h3{font-size:1rem;color:var(--c-gold-light);text-transform:none;letter-spacing:0;}

/* ---------- App shell mit linker Sidebar ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar-width);flex-shrink:0;
  background:linear-gradient(180deg,#171a21,#0f1115);
  border-right:1px solid var(--c-panel-border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.sidebar .brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px 16px 18px;border-bottom:1px solid var(--c-panel-border);text-align:center;}
.sidebar .brand img{width:88px;height:88px;object-fit:contain;}
.sidebar .brand span{font-family:var(--font-head);color:var(--c-gold);letter-spacing:.22em;text-transform:uppercase;font-size:.8rem;}
.sidebar nav{flex:1;overflow-y:auto;padding:10px 8px;}
.sidebar .nav-section{margin-bottom:14px;}
.sidebar .nav-section .section-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--c-text-muted);padding:6px 10px;}
.sidebar .nav-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:transparent;border:none;color:var(--c-text-muted);
  padding:9px 10px;border-radius:6px;cursor:pointer;font-size:.85rem;margin-bottom:2px;
}
.sidebar .nav-item .ic{width:18px;text-align:center;color:var(--c-green-light);}
.sidebar .nav-item:hover{background:rgba(201,162,39,0.08);color:var(--c-text);}
.sidebar .nav-item.active{background:var(--c-panel);color:var(--c-gold);border:1px solid var(--c-panel-border);}
.sidebar .personal-area{
  border-top:1px solid var(--c-panel-border);padding:12px;
}
.sidebar .personal-area .who{font-size:.8rem;color:var(--c-text);}
.sidebar .personal-area .role{font-size:.68rem;color:var(--c-green-light);text-transform:uppercase;letter-spacing:.06em;}
.sidebar .personal-area button{margin-top:8px;width:100%;}

.content{flex:1;padding:24px 28px 60px;max-width:1100px;}

/* ---------- Wiederverwendete Bausteine ---------- */
.card{background:var(--c-panel);border:1px solid var(--c-panel-border);border-radius:10px;padding:18px 20px;margin-bottom:18px;}
.grid{display:grid;gap:14px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.app-shell{flex-direction:column;}.sidebar{width:100%;height:auto;position:relative;}.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}}
label{display:block;font-size:.75rem;color:var(--c-green-light);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
input,select,textarea{width:100%;background:var(--c-bg-soft);border:1px solid var(--c-panel-border);color:var(--c-text);padding:8px 10px;border-radius:6px;font-family:var(--font-body);font-size:.9rem;}
textarea{resize:vertical;}
.field{margin-bottom:10px;}
button.btn{background:linear-gradient(180deg,var(--c-gold-light),var(--c-gold));color:#1a1400;border:none;border-radius:6px;padding:9px 16px;font-weight:600;cursor:pointer;font-size:.85rem;}
button.btn:hover{filter:brightness(1.08);}
button.btn.secondary{background:transparent;border:1px solid var(--c-gold-dark);color:var(--c-gold-light);}
button.btn.danger{background:linear-gradient(180deg,#c96a52,var(--c-danger));color:#241010;}
button.btn.small{padding:5px 10px;font-size:.75rem;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
table{width:100%;border-collapse:collapse;font-size:.85rem;}
th,td{border-bottom:1px solid var(--c-panel-border);padding:7px 8px;text-align:left;vertical-align:top;}
th{color:var(--c-gold-light);font-family:var(--font-head);letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;}
tr:hover td{background:rgba(201,162,39,0.06);}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;}
.badge.neu{background:#33413a;color:#cdd6cf;}
.badge.kontaktiert{background:#2e4a58;color:#bfe0ee;}
.badge.termin{background:#3c4a2e;color:#dbeec0;}
.badge.praesentation{background:#5a4a1f;color:#f3d98a;}
.badge.angebot{background:#5a3a1f;color:#f3c48a;}
.badge.platziert{background:#2d5a34;color:#c9f0cf;}
.badge.wiedervorlage{background:#5a4a1f;color:#f3d98a;}
.badge.kein_interesse{background:#5a2e2e;color:#f0c9c9;}
.badge.nicht_erreicht{background:#3a3a3a;color:#d8d8d8;}
/* Termin-Slots + Landingpage-Termine (Reflink-Infrastruktur, Franz 27.07.2026) */
.badge.frei{background:#2d5a34;color:#c9f0cf;}
.badge.gebucht{background:#2e4a58;color:#bfe0ee;}
.badge.storniert{background:#5a2e2e;color:#f0c9c9;}
.badge.angefragt{background:#33413a;color:#cdd6cf;}
.badge.durchgefuehrt{background:#2d5a34;color:#c9f0cf;}
.badge.abgesagt{background:#5a2e2e;color:#f0c9c9;}

/* ---------- Rollen-Badges (Franz, 25.07.2026 - Roadmap-Farbschema) ---------- */
.role-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;font-weight:600;white-space:nowrap;}
.role-badge.unassigned{background:rgba(154,158,168,.16);color:var(--role-unassigned);}
.role-badge.consultant{background:rgba(57,135,229,.16);color:var(--role-consultant);}
.role-badge.leader{background:rgba(144,133,233,.18);color:var(--role-leader);}
.role-badge.hotel_customer{background:rgba(213,81,129,.18);color:var(--role-hotel_customer);}
.role-badge.magazine_member{background:rgba(201,133,0,.2);color:var(--role-magazine_member);}
.role-badge.admin{background:rgba(12,163,12,.18);color:var(--role-admin);}

/* ---------- Klickbare KPI-Kacheln (Franz, 25.07.2026, Punkt 1) ---------- */
.stat.clickable{cursor:pointer;border-top:3px solid transparent;transition:transform .12s ease,box-shadow .12s ease;}
.stat.clickable:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3);}
.stat.role-hoteliers{border-top-color:var(--role-hotel_customer);}
.stat.role-consultants{border-top-color:var(--role-consultant);}
.stat.role-mitglieder{border-top-color:var(--role-magazine_member);}
.stat.role-autos{border-top-color:var(--role-leader);}
.stat.role-angebote{border-top-color:var(--role-admin);}

/* ---------- Netzwerk-Struktur-Baum (Franz, 25.07.2026, Punkt 3) ---------- */
.netz-tree{font-size:.85rem;}
.netz-node{border:1px solid var(--c-panel-border);border-left:4px solid var(--c-panel-border);border-radius:8px;padding:9px 12px;margin-bottom:7px;background:var(--c-panel-alt);}
.netz-toggle{display:inline-block;width:16px;cursor:pointer;color:var(--c-gold-light);font-family:monospace;font-weight:700;user-select:none;}
.netz-children{margin:6px 0 0 20px;padding-left:14px;border-left:1px dashed var(--c-panel-border);}
.template-box{background:var(--c-panel-alt);border:1px dashed var(--c-panel-border);border-radius:8px;padding:12px;white-space:pre-wrap;font-size:.85rem;margin-bottom:8px;}
.muted{color:var(--c-text-muted);font-size:.82rem;}
.flex-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.stat-row{display:flex;gap:14px;flex-wrap:wrap;}
.stat{flex:1;min-width:130px;background:var(--c-panel-alt);border:1px solid var(--c-panel-border);border-radius:8px;padding:12px;text-align:center;}
.stat .n{font-family:var(--font-head);color:var(--c-gold);font-size:1.6rem;}
.stat .l{font-size:.72rem;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.05em;}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:820px){.pillars{grid-template-columns:1fr 1fr;}}
.pillar{border:1px solid var(--c-panel-border);border-radius:8px;padding:12px;background:var(--c-panel-alt);}
.pillar .num{color:var(--c-gold);font-family:var(--font-head);font-size:1.3rem;}
.tagline{font-family:var(--font-head);color:var(--c-gold-light);letter-spacing:.05em;font-size:1rem;text-align:center;margin:6px 0 0;}

/* ---------- Login-Seite ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{width:100%;max-width:460px;background:var(--c-panel);border:1px solid var(--c-panel-border);border-radius:12px;padding:32px 30px;text-align:center;}
.login-card img{width:168px;height:168px;object-fit:contain;margin-bottom:8px;}
.login-error{color:#f0c9c9;font-size:.82rem;margin-top:10px;min-height:1.2em;}

/* ---------- Placeholder-Dashboards ---------- */
.placeholder-box{border:1px dashed var(--c-panel-border);border-radius:10px;padding:22px;text-align:center;color:var(--c-text-muted);}

/* =============================================================================
 * HELL-MODUS (Franz, 20.07.2026)
 * Folgt automatisch der Systemeinstellung des Browsers (prefers-color-scheme).
 * Der obige dunkle Grundton bleibt exakt wie bisher erhalten (Franz nutzt
 * selbst dunkel und findet die aktuellen Farben "perfekt") - hier wird nur
 * fuer Nutzer mit hellem Systemdesign ein zweites Farbschema definiert:
 * weisser/heller Hintergrund, Blau als "Menue/Struktur"-Farbe (Sidebar, Links,
 * Buttons) und das bestehende 8XREGIO-Gold als Marken-Akzent (Ueberschriften,
 * Badges) - angelehnt an das von Franz gezeigte Referenzbild (heller Hinter-
 * grund, dunkelblaue Headlines, goldene Akzente/Schrift).
 * ========================================================================== */
@media (prefers-color-scheme: light){
  :root{
    --c-bg:#eef2f7;
    --c-bg-soft:#ffffff;
    --c-panel:#ffffff;
    --c-panel-alt:#f4f7fb;
    --c-panel-border:#dbe2ec;
    --c-gold:#a9820f;
    --c-gold-light:#c9a227;
    --c-gold-dark:#8a6f1f;
    --c-green:#193b5e;
    --c-green-light:#2f5f96;
    --c-green-muted:#4a6d94;
    --c-text:#1b2733;
    --c-text-muted:#5c6b7c;
    --c-danger:#b3402e;
    --c-success:#1c7a4d;
    /* Roadmap-Light-Werte (siehe :root oben fuer die Herleitung) */
    --role-consultant:#2a78d6;
    --role-leader:#4a3aa7;
    --role-hotel_customer:#e87ba4;
    --role-magazine_member:#eda100;
    --role-admin:#0ca30c;
    --role-unassigned:#5c6b7c;
  }
  body{background:linear-gradient(180deg,#ffffff,#eef2f7 65%);}
  a{color:var(--c-green);}
  .sidebar{
    background:linear-gradient(180deg,#ffffff,#f5f8fc);
    box-shadow:2px 0 14px rgba(20,40,64,.05);
  }
  .sidebar .nav-item:hover{background:rgba(25,59,94,.07);color:var(--c-text);}
  .sidebar .nav-item.active{background:#eaf1fa;color:var(--c-green);border-color:var(--c-panel-border);}
  .card{box-shadow:0 1px 3px rgba(20,40,64,.06);}
  button.btn{background:linear-gradient(180deg,#2f5f96,#193b5e);color:#fff;}
  button.btn.secondary{background:transparent;border:1px solid var(--c-green-light);color:var(--c-green);}
  button.btn.danger{background:linear-gradient(180deg,#c96a52,var(--c-danger));color:#fff;}
  th{color:var(--c-green);}
  tr:hover td{background:rgba(25,59,94,.04);}
  .badge.neu{background:#e6eaef;color:#3a4552;}
  .badge.kontaktiert{background:#dbeeff;color:#1c5a86;}
  .badge.termin{background:#e6f4df;color:#2f6b25;}
  .badge.praesentation{background:#fdf1d2;color:#8a6a10;}
  .badge.angebot{background:#fbe6d2;color:#94551a;}
  .badge.platziert{background:#dcf3df;color:#1c7a3f;}
  .badge.wiedervorlage{background:#fdf1d2;color:#8a6a10;}
  .badge.kein_interesse{background:#fbdede;color:#963434;}
  .badge.nicht_erreicht{background:#e6e6e6;color:#555;}
  .template-box{background:var(--c-panel-alt);}
  .login-error{color:#963434;}
}