/* ===================================================================================================
   helix-pm — golden-ratio PM shell (P1B). Persistent left sidebar + four view tabs in the topbar.
   FROZEN from P3 on: P3 lanes fill the views, never restyle the shell. Layout uses a fixed grid so
   the sidebar (context rails + Themenbereich filter) and the main stage sit in a ~1 : 1.618 ratio.
   =================================================================================================== */

/* topbar view tabs — the four navigable screens */
.pm-tabs { display: flex; align-items: center; gap: .25rem; margin-left: .5rem; overflow-x: auto; }
.pm-tab {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .5rem .8rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--muted); cursor: pointer; font-size: .9rem; font-weight: 550;
}
.pm-tab:hover { background: var(--surface-2); color: var(--text); }
.pm-tab.active { background: var(--primary-soft); color: var(--text); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.pm-tab .ic { width: 1.05rem; height: 1.05rem; flex: none; }
.pm-tab b { font-weight: 560; }

/* the golden-ratio frame: a persistent sidebar column + fluid main. --pm-rail is the sidebar width;
   the main stage takes the rest, yielding roughly the 1 : phi proportion on a typical desktop width. */
:root { --pm-rail: 17rem; }
body.pm-shell .pm-sidebar {
  position: fixed; top: 3.5rem; left: 0; bottom: 0; width: var(--pm-rail); z-index: 20;
  background: var(--bg-elev); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
body.pm-shell .pm-main {
  margin-top: 3.5rem; margin-left: var(--pm-rail);
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 5vw, 3.2rem);
  max-width: 62rem; /* keeps the reading column comfortable inside the golden-ratio stage */
  transition: margin-right .22s ease;
}
/* Meridian reserves its gutter from the main stage, not the sidebar */
body.pm-shell.meridian-open .pm-main { margin-right: var(--mer-w); }
body.pm-shell.meridian-open .topbar { right: var(--mer-w); }

/* sidebar: context rails (Kunden/Projekte/Termine) */
.pm-rails { display: flex; gap: .25rem; padding: .6rem .6rem .4rem; border-bottom: 1px solid var(--border); }
.pm-rail {
  flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .55rem .3rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--muted); cursor: pointer; font-size: .72rem;
}
.pm-rail:hover { background: var(--surface); color: var(--text); }
.pm-rail.active { background: var(--primary-soft); color: var(--text); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.pm-rail .ic { width: 1.15rem; height: 1.15rem; }
.pm-rail b { font-weight: 560; }

.pm-rail-body { flex: 1; overflow-y: auto; padding: .75rem .8rem; }
.pm-listhead { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-bottom: .6rem; }
.pm-list-empty { color: var(--muted); font-size: .82rem; line-height: 1.55; padding: .8rem; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }

/* sidebar: Themenbereich filter (the clean topic list) */
.pm-filter { border-top: 1px solid var(--border); padding: .75rem .8rem .9rem; }
.pm-filter-head { display: flex; align-items: center; gap: .4rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: .55rem; }
.pm-filter-head .ic { width: .95rem; height: .95rem; }
.pm-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.pm-chip {
  font-size: .74rem; padding: .3rem .6rem; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--muted);
}
.pm-chip:hover { border-color: var(--primary); color: var(--text); }
.pm-chip.active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; }

/* main stage: view header + placeholder (P1B). P3 replaces the placeholder with the real view. */
.pm-view-head { margin-bottom: 1.4rem; }
.pm-view-head h1 { font-size: 1.6rem; letter-spacing: -.01em; }
.pm-view-head p { color: var(--muted); margin-top: .4rem; max-width: 44rem; line-height: 1.55; }
.pm-placeholder {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .6rem; padding: 3rem 1.5rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.pm-ph-badge { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); margin-bottom: .3rem; }
.pm-ph-badge .ic { width: 1.5rem; height: 1.5rem; }
.pm-placeholder h2 { font-size: 1.15rem; }
.pm-placeholder p { color: var(--muted); max-width: 34rem; line-height: 1.55; font-size: .9rem; }
.pm-ph-meta { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: .6rem; }
.pm-ph-meta span { font-size: .74rem; color: var(--faint); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .6rem; }

/* responsive: on narrow screens the sidebar collapses to a compact top strip and the main goes full */
@media (max-width: 860px) {
  :root { --pm-rail: 0rem; }
  body.pm-shell .pm-sidebar { position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--border); flex-direction: column; margin-top: 3.5rem; }
  body.pm-shell .pm-main { margin-left: 0; margin-top: 0; }
  body.pm-shell.meridian-open .pm-main { margin-right: 0; }
  body.pm-shell.meridian-open .topbar { right: 0; }
  .pm-tab b { display: none; } /* icons only on small screens to keep the tab row compact */
}
@media (max-width: 480px) {
  .userbtn .who { display: none; }
  .menu { right: .5rem; left: .5rem; width: auto; }
}