/* AUFTRAG-APP-SHELL-CC.md Paket B (Doc 19 Kap. 3): Kassen-Stil (pos-theme.css
   Token-Kit, "Elevation" Doc 12 Kap. 10.5) auf die Navigation/Chrome der
   App-Shell ausgeweitet - bewusst NUR Sidebar + obere Leiste, NICHT
   .content/.footer (dort liegt @Body, die noch unumgebauten Formular-Seiten -
   "kein Umbau der Formular-Seiten, nur Shell"). .sidebar und .top-row tragen
   je eigenstaendig die Klasse .pos-shell (statt eines gemeinsamen Wrappers um
   Sidebar+Main) - haelt die bestehende app{display:flex}-Zeilenaufteilung aus
   site.css unangetastet.

   AUFTRAG-CI-ROLLOUT-CC.md Paket C (Doc 20 Kap. 4): die Backoffice-Chrome
   bekommt eine FESTE Farbe (Aubergine-Nav, Sand-Inhaltsflaeche) statt der
   Hell/Dunkel-Kassenpalette - Zielkonflikt mit der obigen "Hell/Dunkel wie die
   Kasse selbst"-Anforderung von APP-SHELL-CC, siehe BERICHT-CI-ROLLOUT.md.
   Gruender-Feedback 23.07.2026: der Hell/Dunkel-Toggle in der App-Shell-
   Kopfzeile wirkte sich seitdem auf nichts mehr sichtbar aus - entfernt
   (MainLayout.razor). Die eigentliche Kasse (PosVisitDetail/PosKitchen) hat
   ihren eigenen, weiterhin vollstaendig funktionsfaehigen Toggle (eigener
   Storage-Key, eigenes .pos-shell-Scoping) - unangetastet. */

.sidebar.pos-shell {
    background: var(--tim-aubergine);
    border-right: 1px solid var(--tim-aubergine-tief);
    font-family: var(--tim-font);
}

.sidebar.pos-shell .top-row {
    background: transparent;
}

.sidebar.pos-shell .navbar-toggler {
    background-color: var(--tim-aubergine-tief);
    border: 1px solid var(--tim-aubergine-tief);
    border-radius: var(--tim-radius);
}

.nav-group {
    margin-top: 10px;
}

.nav-group-label {
    padding: 8px 24px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(247, 241, 234, 0.45);
}

/* Aktive Route: Tomate-Pill statt reiner Flaechen-Hervorhebung (Doc 20 Kap. 4:
   Tomate als Akzent fuer aktive Zustaende), Hover Aubergine-tief. */
.sidebar.pos-shell .nav-item a {
    color: rgba(247, 241, 234, 0.75);
    border-radius: var(--tim-radius);
    border-left: 3px solid transparent;
}

.sidebar.pos-shell .nav-item a.active {
    background-color: var(--tim-aubergine-tief);
    color: var(--tim-sand);
    border-left: 3px solid var(--tim-tomate);
}

.sidebar.pos-shell .nav-item a:hover {
    background-color: var(--tim-aubergine-tief);
    color: var(--tim-sand);
}

.top-row.pos-shell {
    background: var(--tim-aubergine);
    border-bottom: 1px solid var(--tim-aubergine-tief);
}

/* Bugfix 23.07.2026: ci-bridge.css setzt Links global auf Aubergine-Text (fuer
   helle Flaechen gedacht) - in der jetzt selbst Aubergine-farbenen Kopfzeile
   (LoginLinks: Register/Login bei abgemeldetem Zustand) war das dunkler Text
   auf dunklem Grund, also unsichtbar. Hoehere Spezifitaet (zwei Klassen +
   Element) gewinnt unabhaengig von der Einbindungsreihenfolge. */
.top-row.pos-shell a,
.top-row.pos-shell .btn-link,
.sidebar.pos-shell > .top-row a,
.sidebar.pos-shell > .top-row .btn-link {
    color: rgba(247, 241, 234, 0.85);
}

.top-row.pos-shell a:hover,
.top-row.pos-shell .btn-link:hover,
.sidebar.pos-shell > .top-row a:hover,
.sidebar.pos-shell > .top-row .btn-link:hover {
    color: var(--tim-sand);
}

/* AUFTRAG-SCHLUESSEL-SCOPING-CC.md Paket D Punkt 13: die obige Sand-Regel
   (fuer Links AUF der Aubergine-Kopfzeile gedacht) wirkte auch in die
   weissen Bootstrap-.dropdown-menu hinein (Schluessel- und Zahnrad-Menue)
   - Sand-auf-Weiss war praktisch unsichtbar. Gegenregel mit hoeherer
   Spezifitaet, CI-Token (Aubergine) statt Ad-hoc-Hex. */
.top-row.pos-shell .dropdown-menu a,
.top-row.pos-shell .dropdown-menu .dropdown-item-text,
.sidebar.pos-shell > .top-row .dropdown-menu a,
.sidebar.pos-shell > .top-row .dropdown-menu .dropdown-item-text {
    color: var(--tim-aubergine);
}

.top-row.pos-shell .dropdown-menu a:hover,
.sidebar.pos-shell > .top-row .dropdown-menu a:hover {
    color: var(--tim-aubergine-tief);
}

.top-row.pos-shell .dropdown-menu .dropdown-item-text.text-muted {
    color: rgba(59, 44, 53, 0.55) !important;
}

/* Inhaltsflaeche: Sand als Grundton (Doc 20 Kap. 4) - einzelne Formular-/
   Listing-Seiten legen ihre Karten/Formulare (weiss) selbst darauf, siehe
   Paket D/E. */
.content {
    background: var(--tim-sand);
    min-height: calc(100vh - 3.5rem);
}

/* AUFTRAG-ERLOESEINHEIT-CC.md Paket E.4: die Build-Kennung unten links.
   Sie muss lesbar sein, aber nichts wegnehmen - deshalb gedaempft, klein und
   monospace (ein Hash liest sich nur als Hash). `margin-top: auto` schiebt sie
   ans untere Ende der Navigation, ohne dass die Liste darueber etwas von ihrer
   Hoehe abgibt. */
.sidebar.pos-shell {
    display: flex;
    flex-direction: column;
}

/* AUFTRAG-MENUE-SCROLLEN-CC.md: Ursache war site.css - `.sidebar` haengt ab
   768px auf `height: 100vh` fest (sticky), aber der Eintrags-Container darin
   war ein normaler Block ohne eigene Hoehen-/Overflow-Regel. Wuchs die Liste
   ueber die verbleibende Hoehe hinaus, lief sie unten aus der fixen Box - ohne
   Scrollleiste und ohne dass die Seite selbst haette scrollen muessen, also
   schlicht unerreichbar. `.nav-scroll` bekommt jetzt den Rest der Sidebar-
   Hoehe (flex:1, min-height:0 gegen die Flex-Falle "Inhalt darf nicht
   schrumpfen") und scrollt nur bei Bedarf selbst - der Kopf (TimBrand,
   .top-row) bleibt als Geschwister-Flex-Item ausserhalb davon stehen. Auf
   schmalen Bildschirmen (Sidebar ohne Hoehen-Fessel, `.collapse` regelt dort
   display:none/block) greift die Regel einfach nicht - kein Sonderfall noetig. */
.nav-scroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar.pos-shell .build-stamp {
    margin-top: auto;
    padding: 0.5rem 1.25rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}