/* =========================================================================
   ServiceHub — Redesign 02: App-Shell (Sidebar · Topbar · Navigation · Suche)
   ──────────────────────────────────────────────────────────────────────────
   REIN OPTISCH. Additive Schicht (lädt zuletzt → gewinnt die Kaskade).
   Styled die ECHTEN Shell-Selektoren der internen App
   (.sidebar/#sidebarEl, .brand*, .sidebar-search*, .nav-group*, .nav-item*,
    .role-badge, .topbar*, .global-search-wrap/.search-input, .breadcrumb)
   nach dem Vorlagen-Paket (ServiceHub.html / sh/app.css: .sidebar/.brand/.nav).

   KEINE Funktions-/Markup-/Logik-Änderung: Navigation, Routing, Aktiv-Erkennung,
   Rollenfilter und Klappverhalten bleiben unberührt. Es wird NICHTS versteckt,
   das eine Funktion trägt — nur Farbe/Schrift/Radius/Schatten/Abstand/Rahmen.

   Tokens (warme Palette des neuen Systems) sind hier auf die Shell-Container
   gescoped, damit globale Basis-Tokens NICHT neu definiert werden. Light + Dark
   ([data-theme="dark"]) exakt nach Token-Vertrag.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ---------- Tokens (Light) — auf die Shell-Roots gescoped ---------- */
.sidebar,
.main-area,
.topbar,
#breadcrumb.breadcrumb {
  --sh-accent: #E73D25;
  --sh-accent-700: #C5331E;
  --sh-accent-soft: #FCEDE7;
  --sh-accent-line: rgba(231, 61, 37, .22);
  --sh-honey: #D99A2B;
  --sh-ok: #16A34A;
  --sh-warn: #C7791A;
  --sh-info: #2F6BD6;
  --sh-violet: #7C5BD6;

  --sh-bg: #FAF6F2;
  --sh-surface: #FFFFFF;
  --sh-surf-2: #F6F1EB;
  --sh-surf-3: #EFE8E0;
  --sh-field: #F6F1EB;

  --sh-ink: #231C17;
  --sh-text: #463D35;
  --sh-text-2: #6B6157;
  --sh-muted: #9A8F84;
  --sh-border: #EEE5DC;
  --sh-border-2: #E3D9CE;

  --sh-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sh-font-body: 'Figtree', system-ui, sans-serif;
  --sh-font-mono: 'Space Mono', ui-monospace, monospace;

  --sh-shadow-soft: 0 6px 20px rgba(120, 80, 50, .07);
  --sh-shadow-accent: 0 5px 14px rgba(231, 61, 37, .28);
  --sh-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .main-area,
[data-theme="dark"] .topbar,
[data-theme="dark"] #breadcrumb.breadcrumb {
  --sh-accent: #F2543B;
  --sh-accent-700: #E0432B;
  --sh-accent-soft: rgba(242, 84, 59, .16);
  --sh-accent-line: rgba(242, 84, 59, .30);
  --sh-honey: #E6AE4A;
  --sh-ok: #3BC07A;
  --sh-warn: #E5A33C;
  --sh-info: #5C8FE8;
  --sh-violet: #9D82E6;

  --sh-bg: #15120F;
  --sh-surface: #1E1A16;
  --sh-surf-2: #241F1A;
  --sh-surf-3: #2C2620;
  --sh-field: #241F1A;

  --sh-ink: #F6F1EC;
  --sh-text: #E2D8CE;
  --sh-text-2: #B3A99E;
  --sh-muted: #8C8175;
  --sh-border: #2E2822;
  --sh-border-2: #3A332B;

  --sh-shadow-soft: 0 6px 20px rgba(0, 0, 0, .35);
  --sh-shadow-accent: 0 5px 14px rgba(0, 0, 0, .5);
}

/* =========================================================================
   SIDEBAR
   ========================================================================= */
#sidebarEl.sidebar {
  background: var(--sh-surface);
  color: var(--sh-text);
  border-right: 1px solid var(--sh-border);
  font-family: var(--sh-font-body);
  /* funktional unverändert: bleibt scrollbar + sticky (aus internal.css) */
}

/* ---------- Brand-Block ---------- */
#sidebarEl .brand {
  border-bottom: 1px solid var(--sh-border);
  gap: 11px;
}

/* Logo-Feld: quadratisch, roter Verlauf, weicher Schatten */
#sidebarEl .brand .brand-logo-wrap,
#sidebarEl .brand .brand-mark {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 11px;
  background: linear-gradient(145deg, #F4533C, var(--sh-accent-700));
  box-shadow: var(--sh-shadow-accent);
  color: #fff;
  font-family: var(--sh-font-head);
  font-weight: 700;
  overflow: hidden;
}
#sidebarEl .brand .brand-logo-wrap img {
  border-radius: 9px;
}

/* Firmenname + Unterzeile */
#sidebarEl .brand .brand-title {
  font-family: var(--sh-font-head);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--sh-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sidebarEl .brand .brand-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: var(--sh-muted);
  opacity: 1;
  white-space: nowrap;
}

/* ---------- Such-Pille "Menü durchsuchen …" ---------- */
#sidebarEl .sidebar-search-wrap {
  position: sticky;
  background: var(--sh-surface);
}
#sidebarEl .sidebar-search-input {
  background: var(--sh-field);
  border: 1px solid var(--sh-border-2);
  border-radius: 11px;
  color: var(--sh-text);
  /* Platz rechts für das ⌘K-Kürzel (nur optisch, kein Markup) */
  padding: 9px 46px 9px 11px;
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
#sidebarEl .sidebar-search-input::placeholder {
  color: var(--sh-muted);
}
#sidebarEl .sidebar-search-input:hover {
  border-color: var(--sh-accent);
}
#sidebarEl .sidebar-search-input:focus {
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 3px var(--sh-accent-soft);
}
/* ⌘K-Hinweis als Pseudo am Wrapper — non-interaktiv, überlagert nichts Klickbares */
#sidebarEl .sidebar-search-wrap::after {
  content: "⌘K";
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  /* der Wrapper hat unten 10px Innen-Padding → optisch mittig zum Feld nachjustieren */
  margin-top: -5px;
  pointer-events: none;
  font-family: var(--sh-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--sh-muted);
  background: var(--sh-surf-2);
  border: 1px solid var(--sh-border-2);
  border-radius: 6px;
  padding: 2px 6px;
  line-height: 1.1;
}

/* ---------- Gruppen-Captions ---------- */
#sidebarEl .nav-group {
  border-bottom-color: var(--sh-border);
}
#sidebarEl .nav-group--favorites {
  border-bottom-color: var(--sh-border);
}
#sidebarEl .nav-group-header {
  color: var(--sh-muted);
}
#sidebarEl .nav-group-header:hover {
  background: var(--sh-surf-2);
}
#sidebarEl .nav-group-header--static:hover {
  background: transparent;
}
#sidebarEl .nav-group--active .nav-group-header {
  background: var(--sh-surf-2);
  color: var(--sh-text);
}
#sidebarEl .nav-group-label {
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--sh-muted);
}
#sidebarEl .nav-group-chevron {
  color: var(--sh-muted);
}

/* ---------- Nav-Items ---------- */
#sidebarEl .nav-item {
  font-family: var(--sh-font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sh-text);
  border-radius: 11px;
  /* funktional unverändert: linker 3px-Streifen bleibt (transparent), wir färben ihn nur */
  border-left-color: transparent;
  gap: 12px;
  transition: background var(--sh-tr), color var(--sh-tr);
}
#sidebarEl .nav-item .nav-item-icon,
#sidebarEl .nav-item .nav-item-icon svg {
  color: var(--sh-muted);
  width: 18px;
  height: 18px;
}
#sidebarEl .nav-item:hover {
  background: var(--sh-surf-2);
  color: var(--sh-text);
}
#sidebarEl a.nav-item:hover {
  color: var(--sh-text);
}

/* Aktiv: weiches Accent-Feld + Accent-Text/Icon + 3px Balken links */
#sidebarEl .nav-item.active {
  position: relative;
  background: var(--sh-accent-soft);
  color: var(--sh-accent);
  font-weight: 700;
  /* den bestehenden border-left-Streifen unsichtbar halten, Balken kommt via ::before */
  border-left-color: transparent;
}
#sidebarEl .nav-item.active .nav-item-icon,
#sidebarEl .nav-item.active .nav-item-icon svg {
  color: var(--sh-accent);
}
#sidebarEl .nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sh-accent);
}

/* Favoriten-Stern: Akzent statt Default */
#sidebarEl .nav-item-fav {
  color: var(--sh-muted);
}
#sidebarEl .nav-item-fav--active {
  color: var(--sh-accent);
}

/* ---------- Footer-Status (.role-badge mit grünem Punkt) ---------- */
#sidebarEl .sidebar-footer {
  border-top: 1px solid var(--sh-border);
}
#sidebarEl .role-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--sh-border);
  color: var(--sh-text-2);
  opacity: 1;
  font-size: 12px;
}
#sidebarEl .role-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sh-ok);
  flex: none;
}
/* leeres Badge: keinen Punkt zeigen */
#sidebarEl .role-badge:empty {
  display: none;
}

/* =========================================================================
   TOPBAR
   ========================================================================= */
#topbar.topbar {
  background: var(--sh-surface);
  color: var(--sh-text);
  border-bottom: 1px solid var(--sh-border);
  font-family: var(--sh-font-body);
}
#topbar .topbar-brand .topbar-company-name {
  font-family: var(--sh-font-head);
  font-weight: 700;
  color: var(--sh-ink);
}

/* Globale Suche als helle Pille */
#topbar .global-search-wrap .search-input,
#topbar .search-input {
  background: var(--sh-field);
  border: 1px solid var(--sh-border-2);
  border-radius: 999px;
  color: var(--sh-ink);
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
#topbar .search-input::placeholder {
  color: var(--sh-muted);
}
#topbar .search-input:hover {
  border-color: var(--sh-accent);
}
#topbar .search-input:focus {
  outline: none;
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 3px var(--sh-accent-soft);
}

/* Topbar-Texte (User-Box) in warmer Palette */
#topbar .user-main {
  color: var(--sh-ink);
  font-weight: 600;
}
#topbar .user-sub {
  color: var(--sh-muted);
  opacity: 1;
}

/* Ghost-Buttons in der Topbar: warme Rahmen statt der dunklen Default-Overrides */
#topbar .btn-ghost {
  color: var(--sh-text-2);
  border-color: var(--sh-border-2);
}
#topbar .btn-ghost:hover {
  background: var(--sh-surf-2);
  color: var(--sh-accent);
  border-color: var(--sh-accent);
}

/* =========================================================================
   BREADCRUMB (liegt außerhalb der .topbar, unter .main-area)
   ========================================================================= */
#breadcrumb.breadcrumb {
  font-family: var(--sh-font-body);
  color: var(--sh-muted);
}
#breadcrumb.breadcrumb a,
#breadcrumb.breadcrumb .breadcrumb-link {
  color: var(--sh-text-2);
}
#breadcrumb.breadcrumb a:hover,
#breadcrumb.breadcrumb .breadcrumb-link:hover {
  color: var(--sh-accent);
}
#breadcrumb.breadcrumb .breadcrumb-current {
  color: var(--sh-ink);
  font-weight: 600;
}