/* ═══════════════════════════════════════════════
   HOCHRUNTER OS — Shell (Sidebar + Topbar)
   Ergänzt und verfeinert app.css Shell-Styles.
   Kein dunkler Sidebar — Weiß/Hellgrau Palette.
   ═══════════════════════════════════════════════ */

/* ── Sidebar: Brand-Bereich ─────────────────── */
.sidebar-brand { overflow: hidden; white-space: nowrap; }

.sidebar-logo {
  background: var(--accent);
  border-radius: var(--r-md);
  flex-shrink: 0;
}

/* Brand-Name sichtbar wenn Sidebar expanded */
.sidebar:hover .sidebar-brand > div:last-child,
.sidebar.mob-open .sidebar-brand > div:last-child {
  opacity: 1;
  transform: none;
}

/* ── Sidebar: Navigation ─────────────────────── */
.nav-item {
  border-radius: 9px;
  transition: background var(--tr-fast), color var(--tr-fast);
}

.nav-item.active {
  background: var(--brand-dim);
  color: var(--brand);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--brand-border);
}
.nav-item.active .nav-icon { color: var(--brand); }

.nav-item:not(.active):hover {
  background: #fff;
  color: var(--z-900);
  box-shadow: var(--sh-xs);
}
.nav-item:not(.active):hover .nav-icon { color: var(--z-700); }

/* ── Sidebar: Group Labels ───────────────────── */
.nav-group-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--z-400);
}

/* ── Sidebar: Footer / Avatar ────────────────── */
.sidebar-avatar {
  background: var(--accent);
  border-radius: var(--r-md);
  width: 34px;
  height: 34px;
}

/* ── Sidebar: Reduced motion support ─────────── */
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none !important; }
  .sidebar-brand > div:last-child { transition: none !important; }
  .nav-group-items { transition: none !important; }
}

/* ── Topbar ──────────────────────────────────── */
/* 02-shell.css ist die EINZIGE Quelle fuer das Topbar-LAYOUT (Grid,
   Spaltenaufteilung, Innenabstand, Sticky-Positionierung). Andere Dateien
   (app.css, 05-premium-light-os.css, 06-art-director.css,
   99-legacy-bridge.css) duerfen nur noch Farb-/Schatten-Kosmetik beitragen
   - siehe die entsprechenden Kommentare dort. */
.topbar {
  display: grid !important;
  grid-template-columns: minmax(150px, auto) minmax(260px, 1fr) auto !important;
  align-items: center !important;
  column-gap: 22px !important;
  min-height: 70px;
  height: auto;
  padding-inline: var(--shell-gutter);
  position: sticky;
  top: 0;
  z-index: 1200;
  border-bottom: 1px solid var(--product-line, rgba(11,13,12,.09));
  background: rgba(249,251,249,.84);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  box-shadow: none;
}
.topbar-left {
  grid-column: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 260px;
}
.topbar-center {
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  justify-self: stretch;
  z-index: 2;
}
.topbar-right {
  grid-column: 3;
  min-width: 0;
  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;
  justify-self: end;
  z-index: 3;
}
.topbar-actions {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 6px;
  max-width: 100%;
}
.topbar-actions .btn {
  flex-shrink: 0;
}

.topbar-page {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  color: var(--z-900);
  line-height: 1.1;
}
.topbar-page__eyebrow {
  color: #7a8580;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.topbar-page__title {
  max-width: 230px;
  overflow: hidden;
  color: #111714;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Scroll shadow — triggered by JS .topbar--scrolled */
.topbar--scrolled {
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 2px 20px rgba(0,0,0,.08);
}

/* ── Topbar: Suche nutzt .hos-search (03-components.css) ── */
.topbar-center {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.topbar-center .hos-search {
  width: min(100%, 560px);
  max-width: 560px;
  margin-inline: auto;
}
.topbar-center .hos-search {
  min-height: 42px;
  padding-inline: 13px 8px;
  border: 1px solid rgba(17, 24, 20, .07);
  background: rgba(241,245,242,.76);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
  backdrop-filter: blur(14px) saturate(1.06);
  box-shadow: inset 0 1px 1px rgba(17, 24, 20, .025);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.topbar-center .hos-search:focus-within {
  border-color: rgba(28, 94, 70, .24);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(38, 112, 83, .08), 0 8px 24px rgba(17, 24, 20, .055);
}
.topbar-center .hos-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 600px);
  z-index: 1300;
  border: 1px solid rgba(17,24,20,.09);
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 60px rgba(17,24,20,.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
  backdrop-filter: blur(24px) saturate(1.08);
}
.topbar-center .hos-search-results[hidden] { display: none !important; }
.topbar-center .hos-search-results.is-visible { display: block; }

.topbar-tool,
.topbar-create,
.topbar-mobile-search {
  position: relative;
  display: inline-flex;
  min-width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: 650 12px/1 'Geist', sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.topbar-tool {
  background: transparent;
  color: #4f5a55;
}
.topbar-tool:hover {
  border-color: rgba(17, 24, 20, .075);
  background: #f4f6f5;
  color: #121915;
}
.topbar-tool:active,
.topbar-create:active,
.topbar-mobile-search:active { transform: translateY(1px); }
.topbar-tool:focus-visible,
.topbar-create:focus-visible,
.topbar-mobile-search:focus-visible,
.topbar-user-chip:focus-visible,
.topbar-account-menu > a:focus-visible {
  outline: 2px solid rgba(36, 95, 73, .38);
  outline-offset: 2px;
}
.topbar-tool svg,
.topbar-create svg,
.topbar-mobile-search svg { width: 16px; height: 16px; stroke-width: 1.9; }
.topbar-create {
  padding-inline: 12px;
  border-color: #245f49;
  background: #245f49;
  color: #fff;
  box-shadow: 0 5px 14px rgba(28, 83, 61, .16);
}
.topbar-create:hover {
  border-color: #1b503c;
  background: #1b503c;
  color: #fff;
  box-shadow: 0 7px 18px rgba(28, 83, 61, .2);
}
.topbar-mobile-search { display: none; background: transparent; color: #4f5a55; }

.topbar-account { position: relative; }
.topbar-user-chip { cursor: pointer !important; }
.topbar-user-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 1px; }
.topbar-user-role { color: #7a8580; font-size: 9.5px; font-weight: 580; line-height: 1.1; }
.topbar-user-chevron { width: 13px !important; height: 13px !important; color: #8a948f; transition: transform .16s ease; }
.topbar-account.is-open .topbar-user-chevron { transform: rotate(180deg); }
.topbar-account-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: 220px;
  padding: 6px;
  border: 1px solid rgba(17, 24, 20, .09);
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 48px rgba(17, 24, 20, .14), 0 2px 8px rgba(17, 24, 20, .05);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  backdrop-filter: blur(22px) saturate(1.08);
  z-index: 1300;
}
.topbar-account-menu[hidden] { display: none !important; }
.topbar-account-menu__identity { display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 9px; border-bottom: 1px solid rgba(17, 24, 20, .07); margin-bottom: 5px; }
.topbar-account-menu__identity strong { color: #111714; font-size: 12.5px; line-height: 1.25; }
.topbar-account-menu__identity span { color: #7a8580; font-size: 10.5px; }
.topbar-account-menu > a { display: flex; min-height: 36px; align-items: center; gap: 9px; padding: 0 9px; border-radius: 6px; color: #46514c; font-size: 12px; font-weight: 620; text-decoration: none; }
.topbar-account-menu > a:hover { background: #f3f5f4; color: #111714; }
.topbar-account-menu > a:focus-visible { background: #f3f5f4; color: #111714; }
.topbar-account-menu > a svg { width: 15px; height: 15px; color: #74807a; }
.topbar-account-menu > .topbar-account-menu__logout { margin-top: 5px; border-top: 1px solid rgba(17, 24, 20, .07); border-radius: 0 0 6px 6px; color: #9d3d3d; }
.topbar-account-menu > .topbar-account-menu__logout:hover { background: #fff3f2; color: #8d2f2f; }

@media (max-width: 1180px) {
  .topbar-center .hos-search,
  .topbar-center .hos-search-results { width: min(100%, 420px); }
  .topbar-tool__label { display: none; }
  .topbar-tool { padding-inline: 0; }
  .topbar-user-role { display: none; }
}

/* ── Mobile Topbar ───────────────────────────── */
@media (max-width: 850px) {
  .topbar {
    padding-inline: 14px;
    grid-template-columns: 1fr auto !important;
    column-gap: 10px !important;
    min-height: 58px;
  }
  .topbar-center { display: none !important; }
  .topbar-right { grid-column: 2; }
  .topbar-page__eyebrow { display: none; }
  .topbar-page__title { max-width: min(42vw, 210px); font-size: 13.5px; }
  .topbar-mobile-search { display: inline-flex; order: -1; padding-inline: 0; }
  .topbar-sep--account { display: none !important; }
  .topbar.is-search-open { grid-template-rows: 58px auto; }
  .topbar.is-search-open .topbar-center {
    display: flex !important;
    grid-column: 1 / -1;
    grid-row: 2;
    padding-bottom: 10px;
  }
  .topbar.is-search-open .topbar-center .hos-search { width: 100%; max-width: none; }
  .topbar.is-search-open .topbar-center .hos-search-results {
    top: calc(100% - 4px);
    width: 100%;
    max-height: calc(100vh - 128px);
  }
}

@media (max-width: 590px) {
  .topbar-tool { display: none; }
  .topbar-sep:not(.topbar-sep--account) { display: none !important; }
}

@media (max-width: 430px) {
  .topbar-create { width: 38px; padding-inline: 0; }
  .topbar-create span { display: none; }
  .topbar-page__title { max-width: 34vw; }
}
/* Stable, readable application navigation. Shell layout owner. */
body.app-shell .sidebar { width:224px!important;background:#f5f7f3!important;border-right:1px solid #e0e7df!important;box-shadow:none!important;transition:transform .2s ease!important;z-index:1300!important; }
body.app-shell .sidebar::before { display:none!important; }
body.app-shell .sidebar .sidebar-brand { min-height:76px;justify-content:flex-start!important;padding:18px 18px!important;gap:10px; }
body.app-shell .sidebar .sidebar-brand>div:last-child { display:block!important;opacity:1!important;transform:none!important; }
body.app-shell .sidebar .sidebar-brand b { font-size:14px!important;font-weight:650!important;color:#17392b!important; }
body.app-shell .sidebar .sidebar-brand small { font-size:9px!important;font-weight:400!important;color:#728274!important; }
body.app-shell .sidebar .sidebar-logo { background:#176d53!important;width:30px;height:30px;border-radius:9px!important; }
body.app-shell .sidebar .sidebar-nav { padding:6px 10px 24px!important;scrollbar-width:thin; }
body.app-shell .sidebar .nav-group { margin:0 0 10px!important; }
body.app-shell .sidebar .nav-group-label { display:flex!important;align-items:center;justify-content:space-between;width:100%;height:auto!important;min-height:40px;padding:10px 10px!important;margin:0!important;border:0;background:transparent!important;color:#718373!important;font-family:inherit;font-weight:600;font-size:10px;line-height:1.3;letter-spacing:.04em;opacity:1!important;cursor:pointer;pointer-events:auto!important; }
body.app-shell .sidebar .nav-group-label::before,body.app-shell .sidebar .nav-group-label::after { display:none!important; }
body.app-shell .sidebar .nav-group-label svg { width:13px;height:13px;transition:transform .15s; }
body.app-shell .sidebar .nav-group:not(.open) .nav-group-label svg { transform:rotate(-90deg); }
body.app-shell .sidebar .nav-group-items { max-height:none!important;overflow:visible!important;transition:none!important; }
body.app-shell .sidebar .nav-group-items[hidden] { display:none!important; }
body.app-shell .sidebar .nav-item { display:flex!important;position:relative;justify-content:flex-start!important;gap:10px!important;min-height:42px;height:auto!important;margin:2px 0!important;padding:10px 12px!important;border:0!important;border-radius:9px!important;color:#53685a!important;background:transparent!important;box-shadow:none!important; }
body.app-shell .sidebar .nav-label { display:block!important;width:auto!important;overflow:visible!important;opacity:1!important;pointer-events:auto!important;font-size:12px!important;font-weight:500!important;white-space:normal; }
body.app-shell .sidebar .nav-item:hover { background:#e9eee5!important;color:#204f37!important; }
body.app-shell .sidebar .nav-item.active { background:#e0ecde!important;color:#175736!important; }
body.app-shell .sidebar .nav-item.active .nav-label { font-weight:650!important; }
body.app-shell .sidebar .nav-item.active::before { left:0!important;top:12px!important;bottom:12px!important;background:#297450!important; }
body.app-shell .sidebar .nav-icon { width:18px!important;height:18px!important;flex-basis:18px!important;background:transparent!important;border-radius:0!important;color:inherit!important; }
body.app-shell .sidebar .nav-icon svg { width:18px;height:18px; }
body.app-shell .sidebar .nav-cb-badge { position:static!important;min-width:22px!important;width:auto!important;height:19px!important;margin-left:auto!important;padding:0 5px!important;border-radius:5px!important;font-size:10px!important;background:#fff!important;color:#3f7153!important;box-shadow:none!important; }
body.app-shell .sidebar a:focus-visible,body.app-shell .sidebar button:focus-visible { outline:2px solid #267850;outline-offset:-2px; }
body.app-shell .main:not(.login-main) { margin-left:224px!important;min-width:0; }
body.app-shell .topbar { grid-template-columns:minmax(120px,190px) minmax(160px,1fr) auto!important;column-gap:18px!important;min-height:72px;background:#ffffffed!important;border-bottom:1px solid #e5eae3!important;box-shadow:none!important; }
body.app-shell .topbar-page__eyebrow { display:none; }
body.app-shell .topbar-page__title { font-size:15px;font-weight:600; }
body.app-shell .topbar-center .hos-search { max-width:520px;width:100%;border-radius:11px;background:#f2f5f0;border-color:#e6ebe2; }
body.app-shell .topbar-account .topbar-user-chip { display:flex!important;min-height:44px; }
body.app-shell .topbar-user-role { display:none; }
body.app-shell .topbar-user-avatar { background:#e8eee3;color:#305f41; }
body.app-shell .topbar-user-name { max-width:115px;font-size:12px; }
body.app-shell .topbar-callbacks { display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;border-radius:9px;color:#536b5b;text-decoration:none;font-size:12px;white-space:nowrap; }
body.app-shell .topbar-callbacks:hover { background:#f1f5ed; }
.topbar-callbacks svg { width:17px;height:17px; }
.topbar-callbacks b { display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:6px;background:#fff0df;color:#9d601d;font-size:10px; }
body.app-shell .topbar-new { position:relative; }
body.app-shell .topbar-new .topbar-create { display:inline-flex;align-items:center;gap:6px;min-height:42px;width:auto;padding:0 14px;border:0;border-radius:10px;background:#176d53;color:#fff;font-size:12px;font-weight:600;cursor:pointer; }
body.app-shell .topbar-new .topbar-create span { display:inline; }
.topbar-new-menu { position:absolute;right:0;top:calc(100% + 10px);width:224px;padding:8px;background:#fff;border:1px solid #e2e8df;border-radius:14px;box-shadow:0 14px 45px #20362620;z-index:20; }
.topbar-new-menu[hidden] { display:none; }
.topbar-new-menu>strong { display:block;padding:8px 10px;font-size:10px;color:#7b887d;font-weight:500; }
.topbar-new-menu>a,.topbar-new-menu>button { display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px;border:0;border-radius:8px;background:transparent;color:#294333;text-decoration:none;font-family:inherit;font-weight:500;font-size:13px;line-height:1.4;text-align:left;cursor:pointer; }
.topbar-new-menu>a:hover,.topbar-new-menu>button:hover { background:#f0f5eb; }
.topbar-new-menu svg { width:17px;height:17px;color:#718c77; }
.topbar-new-menu :focus-visible { outline:2px solid #267850;outline-offset:-2px; }
.shell-sidebar-close { display:none; }
@media(min-width:851px) and (max-width:1150px) { body.app-shell .sidebar { width:208px!important; }body.app-shell .main:not(.login-main) { margin-left:208px!important; }body.app-shell .topbar { grid-template-columns:minmax(100px,130px) minmax(130px,1fr) auto!important;column-gap:10px!important;padding-inline:18px; }body.app-shell .topbar-callbacks>span,body.app-shell .topbar-user-copy { display:none; } }
@media(max-width:850px) {
 body.app-shell .main:not(.login-main) { margin-left:0!important; }
 body.app-shell .sidebar { width:260px!important;transform:translateX(-100%)!important; }
 body.app-shell .sidebar.mob-open { width:min(280px,calc(100vw - 24px))!important;transform:translateX(0)!important; }
 body.app-shell .sidebar .sidebar-brand { padding-right:40px!important; }
 body.app-shell .shell-sidebar-close { display:grid;place-items:center;position:absolute;right:4px;top:17px;width:38px;height:42px;border:0;border-radius:8px;background:transparent;color:#496250; }
 body.app-shell .topbar { grid-template-columns:minmax(0,1fr) auto!important;min-height:62px;column-gap:8px!important;padding-inline:14px; }
 body.app-shell .topbar-right { grid-column:2; }
 body.app-shell .topbar-callbacks { padding:0 5px;gap:4px; }
 body.app-shell .topbar-callbacks>span,body.app-shell .topbar-user-copy,body.app-shell .topbar-user-chevron { display:none; }
 body.app-shell .topbar-user-chip { padding:0!important; }
 body.app-shell .topbar-user-avatar { width:30px;height:30px;font-size:11px; }
 body.app-shell .topbar-new .topbar-create { padding:0 10px; }
 body.app-shell .topbar-page__title { font-size:13px;max-width:29vw; }
 body.app-shell .topbar-mobile-search { width:32px;min-width:32px;min-height:44px; }
 body.app-shell .topbar.is-search-open .topbar-center { grid-column:1/-1;width:100%; }
 body.app-shell .mob-backdrop { z-index:1250; }
}
@media(max-width:380px) { body.app-shell .topbar-callbacks:has(b) svg { display:none; }body.app-shell .topbar-new .topbar-create { padding:0 8px; }body.app-shell .topbar-actions { gap:4px!important; } }

/* Compact desktop rail, explicit expansion, stable content area. */
.shell-sidebar-toggle { display:none; }
@media(min-width:851px) {
 body.app-shell .shell-sidebar-toggle { display:flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;margin:0 14px 12px;width:44px;height:38px;border:1px solid #dce6db;border-radius:10px;background:#fff;color:#496b54;cursor:pointer; }
 body.app-shell .shell-sidebar-toggle svg { width:18px;height:18px;flex-shrink:0; }
 body.app-shell .shell-sidebar-toggle span { display:none;font-size:11px; }
 body.app-shell .shell-sidebar-toggle:hover { background:#e9f0e5;border-color:#b9cfb9; }
 body.app-shell:not(.shell-nav-expanded) #hos-sidebar.sidebar { width:72px!important; }
 body.app-shell:not(.shell-nav-expanded) .main:not(.login-main) { margin-left:72px!important; }
 body.app-shell:not(.shell-nav-expanded) #hos-sidebar.sidebar .sidebar-brand { padding:20px 21px!important;min-height:76px; }
 body.app-shell:not(.shell-nav-expanded) #hos-sidebar.sidebar .sidebar-brand>div:last-child { display:none!important; }
 body.app-shell:not(.shell-nav-expanded) #hos-sidebar.sidebar .sidebar-nav { padding:0 10px 20px!important; }
 body.app-shell:not(.shell-nav-expanded) #hos-sidebar.sidebar .nav-group { margin:0 0 12px!important;padding:0 0 10px;border-bottom:1px solid #e0e8dc; }
 body.app-shell:not(.shell-nav-expanded) #hos-sidebar.sidebar .nav-group:last-child { border-bottom:0; }
 body.app-shell:not(.shell-nav-expanded) #hos-sidebar.sidebar .nav-group-label { display:none!important; }
 body.app-shell:not(.shell-nav-expanded) #hos-sidebar.sidebar .nav-item { justify-content:center!important;width:44px;min-height:44px;padding:12px!important;margin:3px auto!important;border-radius:12px!important; }
 body.app-shell:not(.shell-nav-expanded) #hos-sidebar.sidebar .nav-label { display:none!important; }
 body.app-shell:not(.shell-nav-expanded) #hos-sidebar.sidebar .nav-item.active { background:#dcebd8!important;color:#195b36!important;box-shadow:inset 0 0 0 1px #cadfc4!important; }
 body.app-shell:not(.shell-nav-expanded) #hos-sidebar.sidebar .nav-cb-badge { position:absolute!important;top:2px!important;right:1px!important;width:7px!important;min-width:7px!important;height:7px!important;padding:0!important;font-size:0!important;border-radius:50%!important;background:#df8f36!important;box-shadow:0 0 0 2px #f5f7f3!important; }
 body.app-shell.shell-nav-expanded .shell-sidebar-toggle { width:calc(100% - 28px); }
 body.app-shell.shell-nav-expanded .shell-sidebar-toggle span { display:inline; }
 body.app-shell.shell-nav-expanded .shell-sidebar-toggle svg { transform:rotate(180deg); }
}