/* EstateOS — 3-Schicht-Shell (#102 L0). Laedt NACH design-system.css/app-shell.css und
   ueberschreibt gezielt. Token-basiert (Akzent = --gold/--bronze, vom Theme/brand.js getrieben). */

:root{ --topswitch-h:76px }

/* ----- Shell-Wrapper: Dreierschalter (Topbar) ueber der App-Grid ----------------------------
   Die App-Grid (.app) nutzt zoom:var(--ui-scale) + kompensierte Hoehe. Der Topswitch liegt
   AUSSERHALB von .app (wie die FABs => nicht gezoomt). Wenn er sichtbar ist (body.has-topswitch),
   wird seine Hoehe von der .app-Hoehe abgezogen. */
.shell{height:100dvh;overflow:hidden}
body.imp-active .shell{height:calc(100dvh - 40px)}  /* Impersonation-Banner (40px) liegt ueber der Shell */
.topswitch{height:var(--topswitch-h);display:flex;align-items:center;justify-content:center;
  gap:10px;padding:0 16px;background:linear-gradient(180deg,var(--bg-2),var(--grad-sidebar));
  border-bottom:1px solid var(--border);position:relative;z-index:40}
.topswitch[hidden]{display:none}

/* ----- Logo + Unternehmensname oben links ------------------------------------------------- */
.topbar-brand{position:absolute;left:18px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:11px;max-width:30%}
.topbar-brand .crest{width:36px;height:36px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--gold-soft),var(--bronze));color:var(--on-gold);
  font-family:var(--font-display);font-weight:600;font-size:16px}
.topbar-brand img.crest{width:36px;height:36px;object-fit:contain;background:transparent}
.topbar-brandname{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){ .topbar-brandname{display:none} }

body.has-topswitch .app{height:calc((100dvh - var(--topswitch-h)) / var(--ui-scale,1))}
body.has-topswitch.imp-active .app{height:calc((100dvh - 40px - var(--topswitch-h)) / var(--ui-scale,1))}

/* ----- Dreierschalter (segmentierte Pille, zentriert) -------------------------------------- */
.topswitch-group{display:inline-flex;gap:5px;background:var(--surface);border:1px solid var(--border-2);
  border-radius:15px;padding:5px;box-shadow:var(--shadow)}
.topswitch-btn{display:inline-flex;align-items:center;gap:9px;padding:9px 20px;border-radius:10px;
  border:1px solid transparent;background:transparent;color:var(--mist);font-family:var(--font-ui);
  font-size:13.5px;font-weight:600;white-space:nowrap;transition:.15s}
.topswitch-btn:hover{color:var(--text);background:var(--surface-2)}
.topswitch-btn.active{color:var(--on-gold);background:linear-gradient(180deg,var(--gold-soft),var(--bronze));
  box-shadow:0 8px 20px -12px color-mix(in srgb,var(--gold) 80%,transparent)}
.topswitch-btn .ts-ic{display:grid;place-items:center;flex:0 0 auto}
.topswitch-btn .ts-ic svg{width:18px;height:18px;display:block}
@media(max-width:720px){ .topswitch-btn .ts-label{display:none} .topswitch-btn{padding:9px 16px} }

/* ----- Zahnrad (System-Bereich) oben rechts ---------------------------------------------- */
.topswitch-gear{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:42px;height:42px;
  display:grid;place-items:center;border-radius:12px;border:1px solid var(--border-2);background:var(--surface);
  color:var(--mist);cursor:pointer;transition:.15s}
.topswitch-gear:hover{color:var(--text);border-color:var(--gold);background:var(--surface-2)}
.topswitch-gear.active{color:var(--on-gold);border-color:transparent;
  background:linear-gradient(180deg,var(--gold-soft),var(--bronze));
  box-shadow:0 8px 20px -12px color-mix(in srgb,var(--gold) 80%,transparent)}
.topswitch-gear svg{width:21px;height:21px;display:block}

/* ----- Kontextabhaengige Seitenleiste (#navItems in #nav) ---------------------------------- */
/* #nav bleibt Flex-Spalte: nav-head (fix) | #navItems (scrollt) | nav-acct (fix unten). */
#navItems{display:flex;flex-direction:column;gap:1px;width:100%;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
#navItems::-webkit-scrollbar{display:none}
.nav-sec{display:flex;flex-direction:column;gap:1px;width:100%;padding:5px 0}
.nav-sec + .nav-sec{border-top:1px solid var(--border);margin-top:3px}
.nav-sec-head{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist-dim);
  font-weight:700;padding:6px 12px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A1 (Marc-Feedback): im Kernbereich keine doppelte Bereichs-Ueberschrift (steht schon im Dreierschalter). */
.nav-sec.nav-sec-kern>.nav-sec-head{display:none}

#navItems .nav-item{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;
  border-radius:10px;border:1px solid transparent;background:transparent;color:var(--mist);
  cursor:pointer;transition:.14s}
#navItems .nav-item:hover{background:var(--surface);color:var(--text)}
#navItems .nav-item.active{color:var(--text);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 18%,transparent),color-mix(in srgb,var(--gold) 3%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent)}
#navItems .nav-item .nav-ic{flex:0 0 auto;width:22px;display:grid;place-items:center;color:inherit}
#navItems .nav-item .nav-ic svg{width:20px;height:20px;display:block}
#navItems .nav-item .nav-label{flex:1 1 auto;text-align:left;font-size:13.5px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#navItems .nav-item.nav-soon{opacity:.5;cursor:not-allowed}
#navItems .nav-item.nav-soon:hover{background:transparent;color:var(--mist)}
.nav-soon-tag{flex:0 0 auto;font-size:8.5px;font-weight:700;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 14%,transparent);border-radius:999px;padding:1px 5px}

/* ----- Eingeklappte (schmale) Nav: nur Icons ---------------------------------------------- */
html.nav-collapsed .nav-sec-head{display:none}
html.nav-collapsed .nav-sec{align-items:center}
html.nav-collapsed #navItems .nav-item{justify-content:center;width:46px;height:46px;padding:0;gap:0;border-radius:12px}
html.nav-collapsed #navItems .nav-item .nav-label,
html.nav-collapsed .nav-soon-tag{display:none}

/* ----- A3b (Marc-Feedback): globale Omni-Suche dauerhaft in der Topbar --------------------- */
.topsearch{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border-2);border-radius:11px;padding:6px 11px;width:min(280px,24vw)}
.topsearch .ts-ic{display:grid;place-items:center;color:var(--mist);flex:0 0 auto}
.topsearch .ts-ic svg{width:15px;height:15px;display:block}
.topsearch .ts-in{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:none;color:var(--text);font-family:var(--font-ui);font-size:13px}
.topsearch .ts-in::placeholder{color:var(--mist-dim)}
.topsearch .ts-pop{position:absolute;top:calc(100% + 8px);right:0;width:min(380px,82vw);max-height:62vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border-2);border-radius:12px;box-shadow:0 24px 64px -24px rgba(0,0,0,.6);z-index:60;padding:6px}
.topsearch .ts-pop[hidden]{display:none}
.topsearch .ts-empty{padding:14px;color:var(--mist-dim);font-size:12.5px;text-align:center}
.topsearch .ts-group{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist-dim);font-weight:700;padding:8px 10px 4px}
.topsearch .ts-res{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;background:transparent;border:0;border-radius:8px;padding:7px 10px;cursor:pointer;color:var(--text)}
.topsearch .ts-res:hover{background:var(--surface-2)}
.topsearch .ts-res .n{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topsearch .ts-res .s{font-size:11.5px;color:var(--mist-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:820px){ .topsearch{display:none} }

/* ===== Marc-Feedback v2 — Chrome-Politur (A2/A8/A9/A12) ===== */
/* A2: Einklapp-Pfeil reitet die Sidebar-Innenkante (geht beim Aufklappen mit nach innen),
   statt an der Bildschirmkante zu kleben. */
.nav-head{justify-content:flex-end}
html.nav-collapsed .nav-head{justify-content:center}

/* A8: Immokarte = Vollflaeche ohne linke Seitenleiste. */
body.area-karte #nav{display:none}
body.area-karte .app{grid-template-columns:minmax(0,1fr)}

/* A12: globale Suche LINKS (ersetzt den Firmennamen); Logo + Suche auf Topbar-Hoehe. */
.topbar-brand{gap:12px;max-width:38%}
.topbar-brandname{display:none}
.topbar-brand .crest{width:44px;height:44px;border-radius:12px;font-size:17px}
.topbar-brand img.crest{width:44px;height:44px}
.topswitch .topsearch{height:44px;width:min(300px,26vw);border-radius:12px}
.topswitch .topsearch .ts-pop{left:0;right:auto}

/* A9: Zahnrad (Einstellungen) + Nutzer-Kontrollpanel oben rechts, gleiche Hoehe. */
.topbar-right{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px}
.topbar-right .topswitch-gear{position:static;top:auto;right:auto;transform:none;width:44px;height:44px}
.topbar-right .nav-acct{width:auto;max-width:230px;margin:0;height:44px;border-radius:12px;padding:0 12px}
html.nav-collapsed .topbar-right .nav-acct{justify-content:flex-start;padding:0 12px;gap:10px}
html.nav-collapsed .topbar-right .nav-acct-name,
html.nav-collapsed .topbar-right .nav-acct-chev{display:inline}
@media(max-width:980px){ .topbar-right .nav-acct-name{display:none} }

/* Marc-Feedback: Topbar als 3-Spalten-Grid (links Logo+Suche · Mitte Schalter · rechts Zahnrad+Konto).
   Verhindert, dass die linke Suche bei offenem Meridian (Shell wird schmaler) den zentralen
   Dreierschalter ueberlappt — die Suche schrumpft jetzt in ihrer eigenen Spalte statt viewport-breit zu bleiben. */
.topswitch{display:grid;grid-template-columns:1fr auto 1fr;gap:14px}
.topbar-brand{position:static;left:auto;top:auto;transform:none;justify-self:start;max-width:none;width:100%;min-width:0;overflow:hidden}
.topbar-right{position:static;left:auto;right:auto;top:auto;transform:none;justify-self:end}
.topswitch .topsearch{flex:1 1 auto;width:auto;min-width:0;max-width:300px}