/* GERÜSTWERK Zugriffszustände und dynamische Navigation.
   Farben kommen aus den Branding-Variablen (--gw-color-*, --gw-status-*) mit
   Rückfall auf die Bestandswerte. Dunkles Graphit, dezente Hervorhebung,
   ein Akzent. Signalrot bleibt echten kritischen Hinweisen vorbehalten. */

/* ── Zugriff verweigert ───────────────────────────────────────────────── */
.gw-access {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6, 12, 18, .82);
  backdrop-filter: blur(3px);
}
.gw-access[hidden] { display: none; }
.gw-access__box {
  max-width: 520px; width: 100%;
  padding: 26px 26px 20px;
  background: var(--gw-color-surface, #0e1f2a);
  border: 1px solid #223846; border-radius: 12px;
  color: var(--gw-color-text, #eef5fb);
  font: 15px/1.55 Inter, Arial, sans-serif;
}
.gw-access__title { margin: 0 0 10px; font: 600 20px/1.3 'Space Grotesk', Inter, sans-serif; }
.gw-access__text { margin: 0 0 12px; color: var(--gw-color-text-muted, #9fb6c6); }
.gw-access__hint { margin: 0 0 18px; color: var(--gw-color-text-muted, #9fb6c6); font-size: 13.5px; }
.gw-access__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gw-access__btn {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--gw-color-primary, #f0a51f); border-radius: 8px;
  background: var(--gw-color-primary, #f0a51f); color: #10232f;
  font: 600 14px Inter, Arial, sans-serif; cursor: pointer;
}
.gw-access__btn--ghost { background: transparent; color: var(--gw-color-primary, #f0a51f); }
.gw-access__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gw-access__code {
  margin: 16px 0 0; color: #6f8494;
  font: 400 11.5px 'JetBrains Mono', monospace; letter-spacing: .04em;
}

/* ── Lizenzbanner ─────────────────────────────────────────────────────── */
.gw-license-banner {
  position: sticky; top: 0; z-index: 8;
  padding: 8px 14px; text-align: center;
  font: 600 12.5px Inter, Arial, sans-serif;
  border-bottom: 1px solid transparent;
}
.gw-license-banner--info {
  background: rgba(59, 130, 196, .14); color: #7fb3e0; border-color: rgba(59, 130, 196, .38);
}
.gw-license-banner--warning {
  background: rgba(217, 154, 43, .14); color: var(--gw-status-scaffold-due-soon, #d99a2b);
  border-color: rgba(217, 154, 43, .38);
}
.gw-license-banner--error {
  background: rgba(209, 69, 59, .14); color: var(--gw-status-scaffold-blocked, #d1453b);
  border-color: rgba(209, 69, 59, .38);
}

/* Im Lesemodus gesperrte Bedienelemente: sichtbar, aber erkennbar stillgelegt.
   Ausblenden wäre irreführend — der Nutzer hielte die Funktion für entfernt. */
.gw-blocked { opacity: .45; cursor: not-allowed; }
.gw-blocked:hover { opacity: .45; }

.gw-module-hint {
  display: block; margin: 12px 0; padding: 12px 14px;
  border-left: 3px solid var(--gw-color-primary, #f0a51f);
  background: rgba(240, 165, 31, .08);
  color: var(--gw-color-text, #eef5fb); font: 13.5px/1.5 Inter, Arial, sans-serif;
}
.gw-module-hint strong { display: block; margin-bottom: 4px; }
.gw-module-hint span { color: var(--gw-color-text-muted, #9fb6c6); }

/* ── Dynamische Sidebar ───────────────────────────────────────────────── */
.gw-sb {
  display: flex; flex-direction: column; gap: 4px;
  width: 240px; min-width: 240px; padding: 12px 8px;
  background: #0d1620; border-right: 1px solid #1c2b36;
  color: var(--gw-color-text, #eef5fb);
  font: 14px Inter, Arial, sans-serif;
  overflow-y: auto;
}
.gw-sb.is-collapsed { width: 64px; min-width: 64px; }
@media (max-width: 1440px) { .gw-sb { width: 220px; min-width: 220px; } }

.gw-sb__group { margin-bottom: 10px; }
.gw-sb__group--admin { margin-top: auto; border-top: 1px solid #1c2b36; padding-top: 10px; }
.gw-sb__group-lab {
  display: block; padding: 6px 10px 4px;
  color: #6f8494; font: 600 10px 'JetBrains Mono', monospace;
  letter-spacing: .14em; text-transform: uppercase;
}
.gw-sb.is-collapsed .gw-sb__group-lab { display: none; }
.gw-sb__list { list-style: none; margin: 0; padding: 0; }
.gw-sb__li { position: relative; }

.gw-sb__item, .gw-sb__toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 42px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.gw-sb__item:hover, .gw-sb__toggle:hover { background: rgba(255, 255, 255, .05); }
.gw-sb__item:focus-visible, .gw-sb__toggle:focus-visible {
  outline: 2px solid var(--gw-color-primary, #f0a51f); outline-offset: -2px;
}
/* Aktiver Bereich: nicht nur Farbe, sondern auch eine Kante — Status darf nie
   allein über Farbe erkennbar sein. */
.gw-sb__item.is-active {
  background: rgba(240, 165, 31, .12);
  box-shadow: inset 3px 0 0 var(--gw-color-primary, #f0a51f);
  font-weight: 600;
}
.gw-sb__icon { flex: 0 0 20px; width: 20px; height: 20px; opacity: .85; }
.gw-sb__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-sb.is-collapsed .gw-sb__label { display: none; }

/* Tooltip nur als Ergänzung — der Name steht auch im title-Attribut. */
.gw-sb__tip { display: none; }
.gw-sb.is-collapsed .gw-sb__li:hover .gw-sb__tip,
.gw-sb.is-collapsed .gw-sb__li:focus-within .gw-sb__tip {
  display: block; position: absolute; left: calc(100% + 8px); top: 0; z-index: 30;
  min-width: 200px; max-width: 280px; padding: 10px 12px;
  background: #10232f; border: 1px solid #223846; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.gw-sb__tip b { display: block; margin-bottom: 3px; }
.gw-sb__tip small { color: var(--gw-color-text-muted, #9fb6c6); line-height: 1.4; }

.gw-sb__ws { padding: 6px 10px 10px; }
.gw-sb.is-collapsed .gw-sb__ws { display: none; }
.gw-sb__ws-lab {
  display: block; margin-bottom: 4px; color: #6f8494;
  font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase;
}
.gw-sb__ws-sel {
  width: 100%; min-height: 36px; padding: 0 8px;
  background: #0e1f2a; border: 1px solid #223846; border-radius: 6px;
  color: inherit; font: inherit;
}
.gw-sb__spacer { flex: 1 1 auto; }
.gw-sb__hints { padding: 8px 10px; }
.gw-sb__hint {
  display: block; margin-bottom: 4px; color: #6f8494; font-size: 12px;
}

/* ── Mobile Navigation ────────────────────────────────────────────────── */
.gw-mnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; gap: 2px;
  padding-bottom: env(safe-area-inset-bottom);
  background: #0d1620; border-top: 1px solid #1c2b36;
}
.gw-mnav__tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 56px; padding: 6px 2px;
  border: 0; background: transparent; color: var(--gw-color-text-muted, #9fb6c6);
  font: 600 11px Inter, Arial, sans-serif; cursor: pointer;
}
.gw-mnav__tab.is-active {
  color: var(--gw-color-primary, #f0a51f);
  box-shadow: inset 0 3px 0 var(--gw-color-primary, #f0a51f);
}
.gw-mnav__tab:focus-visible { outline: 2px solid var(--gw-color-primary, #f0a51f); outline-offset: -2px; }
.gw-mnav__icon { width: 22px; height: 22px; }

.gw-mnav__sheet {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end;
  background: rgba(6, 12, 18, .7);
}
.gw-mnav__sheet[hidden] { display: none; }
.gw-mnav__sheet-inner {
  width: 100%; max-height: 70vh; overflow: auto;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  background: var(--gw-color-surface, #0e1f2a); border-top: 1px solid #223846;
  border-radius: 14px 14px 0 0;
}
.gw-mnav__more {
  display: block; width: 100%; min-height: 56px; margin-bottom: 8px; padding: 10px 12px;
  border: 1px solid #223846; border-radius: 10px; background: rgba(255, 255, 255, .04);
  color: var(--gw-color-text, #eef5fb); text-align: left; font: inherit; cursor: pointer;
}
.gw-mnav__more small { display: block; color: var(--gw-color-text-muted, #9fb6c6); }
.gw-mnav__close {
  width: 100%; min-height: 48px; border: 0; border-radius: 10px;
  background: var(--gw-color-primary, #f0a51f); color: #10232f;
  font: 600 15px Inter, Arial, sans-serif; cursor: pointer;
}