/* =====================================================================
   neocasa.ch – SideNav für Admin und Anbieter-Portal (30.09.2026)
   Komponente: assets/js/sidenav.js. Seiten mit Menü: Wrapper .nc-app
   (Sidebar-Spalte + Inhalt). Die alten Klassen .portal-shell/.portal-nav
   werden nicht mehr verwendet.
   ===================================================================== */
:root { --sn-w: 280px; --sn-w-min: 72px; --sn-top: var(--header-h, 72px); }

.nc-app-section { padding: 0; }
.nc-app { display: grid; grid-template-columns: var(--sn-w) minmax(0, 1fr); align-items: start; align-content: start; min-height: calc(100vh - var(--sn-top)); }
.nc-app.sn-collapsed { grid-template-columns: var(--sn-w-min) minmax(0, 1fr); }
.nc-app-main { min-width: 0; width: 100%; max-width: 1440px; padding: clamp(18px, 2.4vw, 36px) clamp(16px, 3vw, 44px) 48px; box-sizing: border-box; }
.nc-app-views { min-width: 0; }

/* ---------- Sidebar ---------- */
.sn { position: sticky; top: var(--sn-top); height: calc(100vh - var(--sn-top)); height: calc(100dvh - var(--sn-top));
  display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line, #e3e9e5); box-sizing: border-box;
  width: var(--sn-w); z-index: 30; transition: width .2s ease; }
.sn.is-collapsed { width: var(--sn-w-min); }
.sn-head { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--line, #e3e9e5); }
.sn-title { font-weight: 800; font-size: 1rem; }
.sn-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 12px 10px;
  scrollbar-width: thin; scrollbar-color: #c9d4ce transparent; }
.sn-scroll::-webkit-scrollbar { width: 6px; }
.sn-scroll::-webkit-scrollbar-thumb { background: #c9d4ce; border-radius: 6px; }
.sn-list, .sn-sub { list-style: none; margin: 0; padding: 0; }
.sn-list > li { margin: 0 0 2px; }
.sn-foot { flex: 0 0 auto; border-top: 1px solid var(--line, #e3e9e5); padding: 8px 10px 10px; display: grid; gap: 2px; background: #fff; }

.sn-item, .sn-ghead { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; box-sizing: border-box;
  padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink-soft, #4a5a52); text-align: left; text-decoration: none;
  font: 600 .92rem/1.25 var(--font, inherit); cursor: pointer; transition: background .15s, color .15s; }
.sn-item:hover, .sn-ghead:hover { background: rgba(14, 138, 82, .06); color: var(--ink, #14211b); }
.sn-item:focus-visible, .sn-ghead:focus-visible, .sn-open:focus-visible, .sn-close:focus-visible { outline: 2px solid var(--brand, #0e8a52); outline-offset: 2px; }
.sn-item .nc-icon, .sn-ghead .nc-icon { flex: 0 0 20px; }
.sn-label { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.sn-ghead { font-weight: 700; color: var(--ink, #14211b); }
.sn-chev { flex: 0 0 16px !important; width: 16px; height: 16px; opacity: .6; transition: transform .2s ease; }
.sn-group.is-open > .sn-ghead .sn-chev { transform: rotate(90deg); }

/* Aktiver Eintrag: leichter Verlauf, Primärfarbe, schmaler Balken links */
.sn-item.active { background: linear-gradient(90deg, rgba(14, 138, 82, .13), rgba(14, 138, 82, .03)); color: var(--brand-dark, #0a5c38); font-weight: 700; }
.sn-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand, #0e8a52); }
.sn-group.has-active > .sn-ghead { color: var(--brand-dark, #0a5c38); }

/* Gruppen: weiche Animation über grid-template-rows */
.sn-gbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.sn-group.is-open > .sn-gbody { grid-template-rows: 1fr; }
.sn-gin { overflow: hidden; min-height: 0; }
.sn-sub { margin: 2px 0 6px 21px; padding-left: 10px; border-left: 1px solid var(--line, #e3e9e5); }
.sn-sub-item { min-height: 40px; padding: 8px 10px; font-size: .9rem; }

/* Zähler */
.sn-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--brand, #0e8a52);
  color: #fff; font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center; }
.sn-badge[hidden] { display: none !important; }
.sn-group.is-open > .sn-ghead .sn-gbadge { display: none; }

/* ---------- Eingeklappt: schmale Icon-Leiste ---------- */
.sn.is-collapsed .sn-scroll { padding: 12px 8px; }
.sn.is-collapsed .sn-label, .sn.is-collapsed .sn-chev, .sn.is-collapsed .sn-ghead { display: none; }
.sn.is-collapsed .sn-gbody { grid-template-rows: 1fr; }
.sn.is-collapsed .sn-sub { margin: 0; padding: 0; border-left: 0; }
.sn.is-collapsed .sn-group { border-top: 1px solid var(--line, #e3e9e5); margin-top: 6px; padding-top: 6px; }
.sn.is-collapsed .sn-item { justify-content: center; padding: 10px 0; min-height: 44px; }
.sn.is-collapsed .sn-item .sn-badge { position: absolute; top: 7px; right: 13px; min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; border: 2px solid #fff; }
.sn.is-collapsed .sn-item.active::before { top: 10px; bottom: 10px; }
.sn.is-collapsed .sn-foot { padding: 8px; }
.sn-tip { position: fixed; z-index: 3000; transform: translateY(-50%); background: #14211b; color: #fff; font-size: .82rem; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.sn-tip[hidden] { display: none; }

/* ---------- Titel-Icons (ersetzen Emojis) ---------- */
.nc-ticon { display: inline-flex; vertical-align: -3px; color: var(--brand, #0e8a52); }
.nc-ticon .nc-icon { width: 1.05em; height: 1.05em; }
.nc-ticon-box { background: rgba(14, 138, 82, .1); border-radius: 10px; padding: 6px; vertical-align: middle; }
.nc-ticon-box .nc-icon { width: 22px; height: 22px; }

/* ---------- Mobil (<= 900 px): Leiste + Drawer ---------- */
.sn-bar { display: none; }
.sn-overlay { display: none; }
@media (max-width: 900px) {
  .nc-app, .nc-app.sn-collapsed { grid-template-columns: minmax(0, 1fr); }
  .sn-bar { display: flex; align-items: center; gap: 12px; position: sticky; top: var(--sn-top); z-index: 40; background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line, #e3e9e5); padding: 6px 16px; min-height: 58px; box-sizing: border-box; }
  .sn-open { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line, #e3e9e5);
    background: #fff; color: var(--ink, #14211b); font: 700 .95rem var(--font, inherit); cursor: pointer; }
  .sn-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--brand-dark, #0a5c38); }
  .sn, .sn.is-collapsed { position: fixed; top: 0; left: 0; bottom: 0; height: 100%; width: min(86vw, 320px); z-index: 2100;
    transform: translateX(-104%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.2); visibility: hidden; }
  .sn.is-open { transform: none; visibility: visible; }
  .sn-head { display: flex; }
  .sn-close { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 0; background: rgba(14,138,82,.07); color: var(--ink, #14211b); cursor: pointer; }
  .sn .sn-collapse { display: none; }
  /* Im Drawer immer die volle Ansicht, auch wenn am Rechner eingeklappt */
  .sn.is-collapsed .sn-label, .sn.is-collapsed .sn-chev { display: block; }
  .sn.is-collapsed .sn-ghead { display: flex; }
  .sn.is-collapsed .sn-gbody { grid-template-rows: 0fr; }
  .sn.is-collapsed .sn-group.is-open > .sn-gbody { grid-template-rows: 1fr; }
  .sn.is-collapsed .sn-sub { margin: 2px 0 6px 21px; padding-left: 10px; border-left: 1px solid var(--line, #e3e9e5); }
  .sn.is-collapsed .sn-group { border-top: 0; margin-top: 0; padding-top: 0; }
  .sn.is-collapsed .sn-item { justify-content: flex-start; padding: 9px 12px; }
  .sn.is-collapsed .sn-item .sn-badge { position: static; width: auto; min-width: 20px; height: 20px; padding: 0 6px; font-size: .72rem; border: 0; }
  .sn-item, .sn-ghead { min-height: 46px; }
  .sn-overlay { display: block; position: fixed; inset: 0; z-index: 2090; background: rgba(9, 20, 16, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .sn-overlay[hidden] { display: none; }
  .nc-app-main { padding: 16px 16px 40px; }
  html.sn-lock, html.sn-lock body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .sn, .sn-gbody, .sn-chev, .sn-item, .sn-ghead { transition: none !important; }
}

/* Sprachumschalter (assets/js/i18n.js, fix unten links) nicht über den Menüfuss legen:
   am Rechner rechts neben die Seitenleiste, solange eine sichtbare Seitenleiste da ist. */
@media (min-width: 901px) {
  body:has(.nc-app-section:not([style*="display:none"]):not([style*="display: none"])) #ncLangSwitch { left: calc(var(--sn-w) + 12px) !important; }
  body:has(.nc-app-section:not([style*="display:none"]):not([style*="display: none"]) .nc-app.sn-collapsed) #ncLangSwitch { left: calc(var(--sn-w-min) + 12px) !important; }
}