/* Application shell: project actions in the sidebar, the user menu dropdown,
   the "new diagram" chooser and breadcrumbs. Colors come from tokens.css. */
.project-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

html:root .project-picker-head label {
  margin: 0;
}

.project-picker-actions {
  display: flex;
  gap: 4px;
}

html:root .project-picker-actions button {
  display: inline-grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--scs-radius-s);
  background: transparent;
  color: var(--scs-nav-ink-2);
  box-shadow: none;
}

html:root .project-picker-actions button:hover:not(:disabled) {
  border-color: var(--scs-nav-line);
  background: var(--scs-nav-2);
  color: var(--scs-nav-ink);
}

html:root .project-picker-actions button:disabled {
  opacity: 0.45;
}

.project-picker-actions svg {
  width: 16px;
  height: 16px;
}

/* User menu */
html:root #user-menu-panel {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: 240px;
  max-width: 320px;
  padding: 6px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
  color: var(--scs-ink);
  box-shadow: var(--scs-shadow-pop);
}

#user-menu-panel:popover-open {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.menu-popover-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--scs-line-2);
}

.menu-popover-head strong {
  font-size: var(--scs-text-m);
}

.menu-popover-head span,
.menu-popover-head small {
  font-size: var(--scs-text-s);
  color: var(--scs-ink-3);
}

html:root #user-menu-panel button {
  justify-content: flex-start;
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--scs-radius-s);
  background: transparent;
  color: var(--scs-ink);
  font-size: var(--scs-text-m);
  font-weight: 400;
  text-align: left;
  box-shadow: none;
}

html:root #user-menu-panel button:hover:not(:disabled),
html:root #user-menu-panel button:focus-visible {
  background: var(--scs-surface-3);
}

html:root #user-menu-panel button[hidden] {
  display: none;
}

html:root #user-menu-panel button:disabled {
  color: var(--scs-ink-disabled);
}

#user-menu-panel hr {
  width: 100%;
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--scs-line-2);
}

/* Breadcrumbs replace the upper-case eyebrow */
html:root .content-heading .eyebrow.is-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--scs-text-s);
  font-weight: 400;
  color: var(--scs-ink-3);
}

html:root .eyebrow.is-crumbs button:not(.id-chip) {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--scs-ink-2);
  font: inherit;
  box-shadow: none;
}

html:root .eyebrow.is-crumbs button:not(.id-chip):hover {
  color: var(--scs-accent);
  text-decoration: underline;
}

.eyebrow.is-crumbs .crumb-sep {
  color: var(--scs-ink-disabled);
}

/* Visible IDs: monospace, quiet, and a click copies them */
html:root .id-chip {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-s);
  background: var(--scs-surface-2);
  color: var(--scs-ink-2);
  font-family: var(--scs-font-mono);
  font-size: var(--scs-text-xs);
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: none;
  cursor: copy;
}

html:root .id-chip:hover {
  border-color: var(--scs-accent-line);
  background: var(--scs-accent-soft);
  color: var(--scs-ink);
}

html:root .grid td .id-chip {
  margin: 0 8px;
}

.interface-card .id-chip {
  margin-left: 6px;
  vertical-align: 1px;
}

.diagram-card-id {
  font-family: var(--scs-font-mono);
  font-size: var(--scs-text-xs);
  color: var(--scs-ink-3);
}

/* On a diagram card the ID sits quietly under the title, so the kind label keeps one line. */
.diagram-card-main > .diagram-card-id {
  margin-top: -6px;
}

.search-result-group header .diagram-card-id {
  margin-left: 8px;
}

/* 4.4.6: the sidebar keeps one look. Dashboard is an ordinary menu entry (active like the
   others), the toolbar buttons are quiet icon buttons like the project actions, and menu
   names break only at word joints (Funktions-|strukturen), never into syllables. */
html:root #sidebar .project-home {
  min-height: 40px;
  margin: 8px 0 4px;
  padding: 8px;
  gap: 10px;
  border: 1px solid var(--scs-nav-3);
  border-radius: var(--scs-radius-m);
  background: var(--scs-nav-2);
  color: var(--scs-nav-ink);
  font-size: var(--scs-text-m);
  font-weight: 600;
}

html:root #sidebar .project-home:hover {
  background: var(--scs-nav-3);
  border-color: var(--scs-nav-3);
}

html:root #sidebar .project-home.active {
  background: var(--scs-nav-3);
  border-color: var(--scs-nav-ink-3);
  box-shadow: inset 3px 0 0 var(--scs-accent-line);
}

html:root #sidebar .project-home svg {
  width: 21px;
  height: 21px;
}

html:root #sidebar .sidebar-toolbar {
  gap: 6px;
  min-height: 28px;
  margin-bottom: 10px;
}

html:root #sidebar .sidebar-toolbar > span {
  font-size: var(--scs-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scs-nav-ink-3);
}

html:root #sidebar .sidebar-toolbar button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--scs-radius-s);
  background: transparent;
  color: var(--scs-nav-ink-2);
  font-size: 15px;
  box-shadow: none;
}

html:root #sidebar .sidebar-toolbar button:hover:not(:disabled) {
  border-color: var(--scs-nav-line);
  background: var(--scs-nav-2);
  color: var(--scs-nav-ink);
}

html:root #sidebar .sidebar-toolbar button .navigation-icon {
  width: 18px;
  height: 18px;
}

html:root #sidebar :is(.section-link > .section-label, .project-tool-link > span:nth-child(2), .project-home > span) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 6.8 main menu: the group "Notizen & Skizzen" uses the diagram rows because sketches and mind maps
   bring their own ＋. */
html:root #sidebar .notes-section #notes-links {
  padding: 5px 6px;
  border-top: 1px solid var(--scs-nav-3);
}

/* 7.1 project head: Dashboard, Änderungen and Freigaben sit as quiet symbols left of the
   settings gear, separated by a thin rule. Active page = the symbol gets the active row look. */
.project-quick-links {
  display: flex;
  gap: 4px;
}

.project-picker-divider {
  align-self: center;
  width: 1px;
  height: 16px;
  margin: 0 3px;
  background: var(--scs-nav-line);
}

.project-picker-actions .navigation-icon {
  width: 16px;
  height: 16px;
}

html:root #sidebar .project-picker-actions .project-quick-link.active {
  border-color: var(--scs-nav-ink-3);
  background: var(--scs-nav-3);
  color: var(--scs-nav-ink);
  box-shadow: inset 0 -2px 0 var(--scs-accent-line);
}

/* 7.1 menu groups carry a colour, taken from the diagram colours where the meaning matches:
   Diagramme teal (Wirkkette), Spezifikation violet (Anforderung), Architektur blue (System,
   Interface), Produkt & Varianten green (Use-Case), Analyse coral (Zustand), Notizen & Skizzen
   ochre (Skizze, Ablauf), Stammdaten neutral slate. The sidebar is dark in both themes, so the
   on-dark shades serve light and dark mode. The colour marks the group bar, the active row and
   the symbols; names stay in the neutral menu ink for readability. */
#sidebar [data-menu-group] {
  --menu-group: var(--scs-menu-diagrams);
}
#sidebar [data-menu-group='specification'] {
  --menu-group: var(--scs-menu-specification);
}
#sidebar [data-menu-group='architecture'] {
  --menu-group: var(--scs-menu-architecture);
}
#sidebar [data-menu-group='product'] {
  --menu-group: var(--scs-menu-product);
}
#sidebar [data-menu-group='analysis'] {
  --menu-group: var(--scs-menu-analysis);
}
#sidebar [data-menu-group='notes'] {
  --menu-group: var(--scs-menu-notes);
}
#sidebar [data-menu-group='master-data'] {
  --menu-group: var(--scs-menu-master-data);
}

html:root #sidebar .catalog-section[data-menu-group] > .catalog-toggle {
  border-left-color: var(--menu-group);
  background: linear-gradient(90deg, color-mix(in srgb, var(--menu-group) 14%, var(--scs-nav-3)), var(--scs-nav-3) 70%);
}

html:root #sidebar .catalog-section[data-menu-group] > .catalog-toggle:focus-visible {
  outline-color: var(--menu-group);
}

html:root #sidebar .catalog-section[data-menu-group] .catalog-nav button.active,
html:root #sidebar .catalog-section[data-menu-group] .nav-heading:has(.section-link.active) {
  box-shadow: inset 3px 0 var(--menu-group);
}

html:root
  #sidebar
  .catalog-section[data-menu-group]:not([data-menu-group='diagrams'])
  .catalog-nav
  button
  > span:first-child,
html:root #sidebar .catalog-section[data-menu-group] #project-notes-view [data-nav-icon] {
  color: var(--menu-group);
}

/* Collapsed rail: the same group colours on the symbols. */
#sidebar-rail :is([data-rail-kind='requirements'], [data-rail-kind='documents']) > .navigation-icon {
  color: var(--scs-menu-specification);
}
#sidebar-rail
  :is(
    [data-rail-kind='systems'],
    [data-rail-kind='roles'],
    [data-rail-kind='functions'],
    [data-rail-kind='function-chains'],
    [data-rail-kind='locations'],
    [data-rail-kind='interface-register'],
    [data-rail-kind='interfaces']
  )
  > .navigation-icon {
  color: var(--scs-menu-architecture);
}
#sidebar-rail
  :is(
    [data-rail-kind='variants'],
    [data-rail-kind='product-scope'],
    [data-rail-kind='derived-projects'],
    [data-rail-kind='origin-product']
  )
  > .navigation-icon {
  color: var(--scs-menu-product);
}
#sidebar-rail :is([data-rail-kind='matrix'], [data-rail-kind='impact'], [data-rail-kind='checks']) > .navigation-icon {
  color: var(--scs-menu-analysis);
}
#sidebar-rail [data-rail-kind='project-notes'] > .navigation-icon {
  color: var(--scs-menu-notes);
}
#sidebar-rail
  :is(
    [data-rail-kind='domains'],
    [data-rail-kind='terminology'],
    [data-rail-kind='icons'],
    [data-rail-kind='templates']
  )
  > .navigation-icon {
  color: var(--scs-menu-master-data);
}

/* Short windows: the rail gets a scrollbar; the check counters then wrap instead of pushing
   the rail sideways. */
html:root #sidebar-rail #rail-checks {
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: 2px;
}

html:root #sidebar-rail .menu-check-counts {
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

/* 7.1 every menu group header shows its symbol in the group colour. */
html:root #sidebar .catalog-section[data-menu-group] > .catalog-toggle {
  justify-content: flex-start;
  gap: 8px;
}

html:root #sidebar .catalog-section[data-menu-group] > .catalog-toggle > span:not(.catalog-chevron) {
  flex: 1 1 auto;
  min-width: 0;
}

html:root #sidebar .menu-group-icon {
  display: inline-grid;
  flex: 0 0 18px;
  color: var(--menu-group);
}

html:root #sidebar .menu-group-icon .navigation-icon {
  width: 18px;
  height: 18px;
}

html:root #sidebar .catalog-section[data-menu-group] > .catalog-toggle > .catalog-chevron {
  margin-left: 2px;
}