/* ════════════════════════════════════════════════════════════════
   context-bar.css — 44 px Cross-Module-Leiste

   Sitzt oben in cards.html / index.html / board-editor.html /
   tische.html / produkte.html / dashboard.html. Inhalt von
   js/context-bar.js gerendert in #ctx-bar-mount.

   NICHT in m.html / board.html (Public) — gast-facing.
   NICHT in hub.html — Hub hat eigene erweiterte Topbar.

   Spec: 2026-04-24 Sektion 6.
   ════════════════════════════════════════════════════════════════ */

#ctx-bar-mount { display: contents; }

.ctx-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--t-context-bar-height);
  padding: 10px var(--t-space-6);
  /* Neutral dark, leicht über Modul-BG (#141210 / --ui-surface #1B1917)
     damit die Bar visuell "elevated" wirkt. Kein Bordeaux-Tint, kein
     warmer Braun-Stich (Spec § 9: Bordeaux/Gold ist Hub+Modalen
     vorbehalten; die Bar adoptiert den ui.css-Surface-Look). */
  background: rgba(30, 30, 30, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--t-line);
  font-family: var(--t-font-body);
  position: sticky;
  top: 0;
  z-index: 200;
}

.ctx-bar-left { display: flex; align-items: center; gap: var(--t-space-2); min-width: 0; }
.ctx-bar-right { display: flex; align-items: center; gap: var(--t-space-3); flex-shrink: 0; }

/* Home anchor */
.ctx-home {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--t-text-2);
  text-decoration: none;
  font-family: var(--t-font-display);
  font-weight: var(--t-w-medium);
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 8px;            /* match editor .btn-Look */
  letter-spacing: var(--t-ls-snug);
  cursor: pointer;
  transition: var(--t-trans-fast);
}
.ctx-home:hover { color: var(--t-text); background: rgba(244, 235, 220, 0.04); }
.ctx-home svg { width: 12px; height: 12px; color: var(--t-wine); opacity: 0.8; }

.ctx-sep {
  color: var(--t-text-ghost);
  font-size: 13px;
  margin: 0 2px;
  user-select: none;
}

/* Restaurant crumb */
.ctx-crumb-resto {
  /* Reset browser <button> defaults so the crumb blends with the editorial
     bar styling (other crumbs are <span>/<a> and look borderless). */
  background: transparent;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 8px;            /* match editor .btn (--sui-radius) */

  position: relative;
  padding: 4px 10px;
  font-family: var(--t-font-display);
  font-weight: var(--t-w-medium);
  font-size: 14px;
  color: var(--t-wine);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: var(--t-ls-snug);
  transition: var(--t-trans-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.ctx-crumb-resto:hover { background: rgba(122, 31, 46, 0.10); }
.ctx-crumb-resto:focus { outline: none; }
.ctx-crumb-resto:focus-visible { outline: 1px solid var(--t-wine); outline-offset: 2px; }
.ctx-crumb-resto-arrow { width: 10px; height: 10px; opacity: 0.6; flex-shrink: 0; color: var(--t-wine); }

/* Module / document crumbs */
.ctx-crumb-static {
  padding: 4px 10px;
  font-family: var(--t-font-body);
  font-weight: var(--t-w-medium);
  font-size: 13px;
  color: var(--t-text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

/* Resto dropdown — lives in document-root (sibling of <nav>) to escape
   the bar's sticky stacking context. Positioned via JS using
   getBoundingClientRect() of the trigger; position:fixed because we use
   viewport coords. */
.ctx-resto-menu {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 240px;
  background: rgba(20, 18, 16, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--t-line-strong);
  border-radius: 8px;            /* match editor surface-radius */
  padding: 6px;
  /* Above editor's app-header (z-index: 100 in css/ui.css) but below
     modal overlays (z-index: 1000+). 1001 = on top of regular UI. */
  z-index: 1001;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: var(--t-trans-base);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  max-height: 280px;
  overflow-y: auto;
}
.ctx-resto-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ctx-resto-opt {
  padding: 9px 12px;
  border-radius: 6px;
  font-family: var(--t-font-display);
  font-weight: var(--t-w-regular);
  font-size: 14px;
  color: var(--t-text-3);
  cursor: pointer;
  transition: var(--t-trans-fast);
}
.ctx-resto-opt:hover { background: rgba(244, 235, 220, 0.07); color: var(--t-text); }
.ctx-resto-opt.active { color: var(--t-wine); }
.ctx-resto-opt-add {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid var(--t-line);
  color: var(--t-text-mute);
  font-family: var(--t-font-body);
  font-size: 12px;
  letter-spacing: var(--t-ls-wide);
}
.ctx-resto-opt-add:hover { color: var(--t-wine); }

/* Plan chip */
.ctx-plan {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 8px;
  background: var(--t-plan-bg);
  border: 1px solid var(--t-plan-border);
  border-radius: 100px;          /* pill — match editor .plan-badge (--sui-radius-pill) */
  cursor: pointer;
  transition: var(--t-trans-fast);
  appearance: none;
  -webkit-appearance: none;
}
.ctx-plan:hover { filter: brightness(1.2); }
.ctx-plan-dot {
  width: 6px; height: 6px;
  background: var(--t-plan-dot);
}
.ctx-plan-text {
  font-family: var(--t-font-display);
  font-weight: var(--t-w-medium);
  font-size: 12px;
  color: var(--t-text);
  letter-spacing: var(--t-ls-snug);
}
.ctx-plan-usage {
  font-family: var(--t-font-body);
  font-size: 10px;
  color: var(--t-text-3);
}

/* Hamburger-Menü-Trigger — ghost-Style aligned mit ui.css .btn-ghost-Look
   (transparent + cream-Border + cream-Icon). Gold bleibt für Plan-Chip-Pro
   reserviert. */
.ctx-user {
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid rgba(244, 235, 220, 0.10);
  border-radius: 8px;            /* match editor .btn (--sui-radius) */
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--t-text-2);
  cursor: pointer;
  transition: var(--t-trans-fast);
  appearance: none;
  -webkit-appearance: none;
}
.ctx-user:hover { background: rgba(244, 235, 220, 0.06); color: var(--t-text); border-color: rgba(244, 235, 220, 0.18); }
.ctx-user:focus { outline: none; }
.ctx-user:focus-visible { outline: 1px solid var(--t-wine); outline-offset: 2px; }

/* User dropdown */
.ctx-user-menu {
  position: absolute;
  top: calc(var(--t-context-bar-height) + 6px);
  right: var(--t-space-6);
  min-width: 200px;
  background: rgba(20, 18, 16, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--t-line-strong);
  border-radius: 8px;            /* match editor surface-radius */
  padding: 6px;
  /* Above editor's app-header (z-index: 100 in css/ui.css) but below
     modal overlays (z-index: 1000+). 1001 = on top of regular UI. */
  z-index: 1001;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: var(--t-trans-base);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.ctx-user-menu.open {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.ctx-user-menu-item {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-family: var(--t-font-body);
  font-size: 12px;
  color: var(--t-text-3);
  text-decoration: none;
  cursor: pointer;
  transition: var(--t-trans-fast);
}
.ctx-user-menu-item:hover { background: rgba(244, 235, 220, 0.07); color: var(--t-text); }
.ctx-user-menu-divider { border-top: 1px solid var(--t-line); margin: 4px 0; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .ctx-bar { padding: 10px var(--t-space-3); }
  .ctx-plan-usage { display: none; }
  .ctx-crumb-resto, .ctx-crumb-static { max-width: 140px; }
}