/* ═══════════════════════════════════════════════════
   CF-Service WebApp Suite — shared.css
   Stand: 2026-06-05 (Topbar-Unified)
   ═══════════════════════════════════════════════════ */

/* ── Theme-Variablen (Dark = Default) ─────────────── */
:root {
  --bg:#111214; --bg2:#18191c; --bg3:#1e2023; --bg4:#25272b;
  --tx:#e8eaed; --tx2:#9aa0ab; --tx3:#636870;
  --bd:#2c2f35; --bd2:#383c44;
  --br:10px; --br2:14px;
  --accent:#4c8bf5;
  --topbar-h:56px;
}
:root[data-theme=light] {
  --bg:#f5f5f3; --bg2:#fff; --bg3:#f0efe8; --bg4:#e8e7e0;
  --tx:#1a1a1a; --tx2:#555; --tx3:#999;
  --bd:rgba(0,0,0,.1); --bd2:rgba(0,0,0,.18);
}

/* ── Reset & Body ─────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:14px;overscroll-behavior:none}

/* ══════════════════════════════════════════════════
   TOPBAR — Unified Design
   Layout: [⊞] [Logo] [App-Content flex:1] [🌙]
   ══════════════════════════════════════════════════ */
.topbar, .header {
  position: sticky; top: 0; z-index: 500;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; height: var(--topbar-h);
  background: var(--bg2); border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
  flex-wrap: nowrap;
}
/* Safe-area support */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar, .header {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
  }
}

/* ── App-Logo (Emoji + Name) ──────────────────────── */
.cf-app-logo {
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; letter-spacing: -.3px;
  color: var(--accent); flex-shrink: 0; white-space: nowrap;
  text-decoration: none; user-select: none;
}
.cf-app-logo .cf-logo-icon {
  font-size: 20px; line-height: 1; flex-shrink: 0;
}

/* ── App-Menu Button (links) ──────────────────────── */
.cf-app-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid var(--bd); border-radius: var(--br);
  background: var(--bg3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--tx2); font-size: 16px; transition: all .12s;
  padding: 0;
}
.cf-app-btn:hover { background: var(--bg4); color: var(--tx); }

/* ── Theme Button (rechts) ────────────────────────── */
.cf-theme-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid var(--bd); border-radius: var(--br);
  background: var(--bg3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--tx2); transition: all .12s;
  padding: 0; line-height: 1;
}
.cf-theme-btn:hover { background: var(--bg4); color: var(--tx); }

/* ── App-Dropdown-Menü ────────────────────────────── */
.cf-app-menu {
  position: fixed; top: calc(var(--topbar-h) + 4px); left: 8px;
  background: var(--bg2); border: 1px solid var(--bd2);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  z-index: 600; width: 210px; padding: 8px;
  display: none; flex-direction: column; gap: 2px;
}
.cf-app-menu.open { display: flex; }
@supports (padding-top: env(safe-area-inset-top)) {
  .cf-app-menu {
    top: calc(var(--topbar-h) + env(safe-area-inset-top) + 4px);
  }
}

/* ── App-Menü-Einträge ────────────────────────────── */
.cf-app-entry {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--tx2); text-decoration: none;
  font-size: 13px; font-weight: 500; transition: all .1s;
}
.cf-app-entry:hover { background: var(--bg3); color: var(--tx); }
.cf-app-entry.active { color: var(--accent); }
:root[data-theme=dark]  .cf-app-entry.active { background: rgba(255,255,255,.05); }
:root[data-theme=light] .cf-app-entry.active { background: rgba(0,0,0,.05); }

/* ── Trennlinie im Menü ───────────────────────────── */
.cf-menu-sep { height: 1px; background: var(--bd); margin: 4px 0; }

/* ── App-Switcher Wrapper ─────────────────────────── */
.app-switcher { position: relative; flex-shrink: 0; }

/* ── Tabbar (unterhalb Topbar) ────────────────────── */
.tabbar {
  display: flex; padding: 0 12px;
  background: var(--bg2); border-bottom: 1px solid var(--bd);
  gap: 4px; overflow-x: auto; flex-shrink: 0;
}
.tabbar::-webkit-scrollbar { display: none; }

/* ── Header-Right Gruppe ─────────────────────────── */
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }