/* SCS button standard (4.4.7). Six ranks, two sizes, one shape.
   Rank says how important an action is:
     primary   .primary          the one action a page, dialog or card is for, at the far right
     standard  (default)         every other action, icon and text
     quiet     .quiet, .icon-button  recurring actions in rows, preview and top bar, icon only
     danger    .danger           removes or deletes; filled only in a confirmation
     menu      .menu-button, [aria-haspopup]  opens a menu at the button, one chevron for all
     toggle    .segmented > button  switches a view, never changes data
   Size: 32 px in page heads, toolbars, menus and dialogs; 26 px in tables and dense bars.
   Loaded last, so it decides over the older per-page rules in the places it names. */

html:root {
  --scs-button-h: 32px;
  --scs-button-h-compact: 26px;
  --scs-button-pad: 12px;
  --scs-button-pad-compact: 8px;
  --scs-button-gap: 6px;
}

/* Standard size in every place that holds page, toolbar and dialog actions. */
html:root
  :is(
    #heading-actions,
    #table-actions,
    .table-tools,
    .dialog-footer,
    .settings-control,
    .settings-main-head,
    .top-actions
  )
  button:where(:not([role='tab'], [role='menuitem'], [role='switch'], .grid-sort, .menu-item, .catalog-chip)):not(
    .studio-menu *,
    .dashboard-tabs *
  ),
html:root #heading-actions > details > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--scs-button-gap);
  height: var(--scs-button-h);
  min-height: var(--scs-button-h);
  padding: 0 var(--scs-button-pad);
  border-radius: var(--scs-radius-s);
  font-size: var(--scs-text-m);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* The diagram editor heading shares its row with the title, and the table toolbar sits in a
   narrow pane: same ranks, compact size. */
html:root #app[data-view='chain'] :is(#table-actions, .table-tools) button:not(.studio-menu *),
html:root #app[data-view='chain'] #heading-actions > button,
html:root #app[data-view='chain'] #heading-actions > details > summary,
html:root :is(.preview-actions, .compact-preview-controls, .row-order-controls) button,
html:root :is(.grid-row-action, .grid-related-action, .button-compact) {
  height: var(--scs-button-h-compact);
  min-height: var(--scs-button-h-compact);
  padding: 0 var(--scs-button-pad-compact);
  border-radius: var(--scs-radius-s);
  font-size: var(--scs-text-s);
  font-weight: 500;
  line-height: 1;
}

/* Icon-only buttons are square in both sizes and always carry a tooltip. */
html:root :is(#heading-actions, #table-actions, .table-tools, .top-actions, .settings-control) button.icon-button,
html:root :is(#table-actions, .table-tools) #reset-sort {
  width: auto;
  aspect-ratio: 1;
  padding: 0;
}

html:root :is(.preview-actions, .compact-preview-controls) button:is(.icon-button, [aria-label]):not(:has(span)) {
  min-width: var(--scs-button-h-compact);
}

/* Quiet: no frame until the pointer or the keyboard reaches it. */
html:root button.quiet:not(:disabled) {
  border-color: transparent;
  background: transparent;
  color: var(--scs-ink-2);
}

html:root button.quiet:hover:not(:disabled) {
  border-color: var(--scs-line);
  background: var(--scs-surface-3);
  color: var(--scs-ink);
}

/* Danger is never filled in everyday places; the confirmation dialog fills it. */
html:root .dialog-footer button.danger:not(:disabled) {
  background: var(--scs-danger);
  border-color: var(--scs-danger);
  color: var(--scs-danger-ink);
}

html:root .dialog-footer button.danger:hover:not(:disabled) {
  filter: brightness(0.92);
}

/* Menu buttons: one chevron for all instead of ▾, ⌄ and ▸ side by side. */
html:root button.menu-button::after,
html:root #heading-actions > details > summary::after {
  content: '';
  width: 10px;
  height: 10px;
  margin-left: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity: 0.75;
  transition: transform 0.12s ease;
}

html:root button.menu-button:is(.is-open, [aria-expanded='true'])::after {
  transform: rotate(180deg);
}

/* Toggle groups: the active part is light petrol, so it never competes with the primary action. */
html:root .segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--scs-line-strong);
  border-radius: var(--scs-radius-s);
  background: var(--scs-surface-2);
}

html:root .segmented > button {
  height: calc(var(--scs-button-h) - 6px);
  min-height: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--scs-ink-2);
  font-size: var(--scs-text-m);
  font-weight: 500;
}

html:root .segmented > button:is(.active, [aria-pressed='true']) {
  background: var(--scs-accent-soft);
  color: var(--scs-accent);
}

/* Focus: a 2 px ring for every rank. */
html:root button:focus-visible {
  outline: 2px solid var(--scs-focus);
  outline-offset: 1px;
}

html:root button.danger:focus-visible {
  outline-color: var(--scs-danger);
}

/* Spacing: 6 px between buttons, groups keep their own gaps. */
html:root #heading-actions {
  gap: var(--scs-button-gap);
}

/* ---- Menus at their button ---------------------------------------------------------- */

html:root #dialog.is-menu {
  position: fixed;
  inset: auto;
  width: max-content;
  min-width: 260px;
  max-width: min(400px, calc(100vw - 16px));
  margin: auto;
  padding: 0;
  overflow: auto;
  border-radius: var(--scs-radius-m);
}

html:root #dialog.is-menu.is-anchored {
  margin: 0;
}

html:root #dialog.is-menu.is-anchored::backdrop {
  background: transparent;
}

html:root #dialog.is-menu .dialog-heading {
  padding: 10px 12px 6px;
  border-bottom: 0;
}

html:root #dialog.is-menu .dialog-heading h2 {
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
  font-weight: 600;
}

html:root #dialog.is-menu .dialog-heading button,
html:root #dialog.is-menu .dialog-footer {
  display: none;
}

html:root #dialog.is-menu #dialog-body {
  padding: 0 6px 6px;
}

html:root #dialog.is-menu .dialog-options,
html:root #dialog.is-menu .files-options {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

html:root #dialog.is-menu .files-options h3,
html:root #dialog.is-menu .menu-group,
html:root .studio-menu .menu-group {
  margin: 8px 6px 2px;
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs);
  font-weight: 600;
  letter-spacing: 0;
}

html:root #dialog.is-menu .files-options section + section {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--scs-line-2);
}

html:root #dialog.is-menu .dialog-options button,
html:root .studio-menu button,
html:root .studio-menu .menu-check {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 32px;
  height: auto;
  margin: 0;
  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: 500;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  box-shadow: none;
}

html:root #dialog.is-menu .files-options .dialog-options button {
  min-height: 32px;
}

html:root #dialog.is-menu .dialog-options button small,
html:root .studio-menu button small {
  display: block;
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
  font-weight: 400;
}

html:root #dialog.is-menu .dialog-options button:is(:hover, :focus-visible):not(:disabled),
html:root .studio-menu :is(button, .menu-check):is(:hover, :focus-within):not(:disabled) {
  background: var(--scs-surface-3);
  outline: none;
}

html:root #dialog.is-menu .dialog-options button:disabled,
html:root .studio-menu button:disabled {
  background: transparent;
  color: var(--scs-ink-disabled);
}

html:root #dialog.is-menu .dialog-options button.danger,
html:root .studio-menu button.danger {
  margin-top: 4px;
  color: var(--scs-danger);
}

html:root #dialog.is-menu .dialog-options button.danger::before,
html:root .studio-menu button.danger::before {
  content: '';
  position: relative;
  top: -6px;
  align-self: stretch;
  margin: 0 -10px;
  border-top: 1px solid var(--scs-line-2);
}

html:root #dialog.is-menu .dialog-options button.danger:hover:not(:disabled),
html:root .studio-menu button.danger:hover:not(:disabled) {
  background: var(--scs-danger-soft);
}

html:root #dialog.is-menu .dialog-options [aria-pressed='true'] {
  background: var(--scs-accent-soft);
  box-shadow: inset 3px 0 var(--scs-accent);
}

/* Popover menus owned by page code (Katalog, Spalten). */
html:root .studio-menu {
  position: fixed;
  inset: auto;
  min-width: 240px;
  max-width: min(360px, calc(100vw - 16px));
  margin: 0;
  padding: 6px;
  overflow: auto;
  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);
}

html:root .studio-menu:popover-open {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

html:root .studio-menu hr {
  width: 100%;
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--scs-line-2);
}

html:root .studio-menu .menu-check {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
}

html:root .studio-menu .menu-check input {
  margin: 0;
}

html:root .studio-menu .menu-check.is-locked {
  color: var(--scs-ink-3);
  cursor: default;
}

html:root .studio-menu .menu-note {
  margin: 2px 10px 4px;
  color: var(--scs-ink-3);
  font-size: var(--scs-text-s);
}

/* ---- Catalog head (4.4.7) ------------------------------------------------------------- */

/* Selection actions appear once rows are selected. */
html:root
  #app.catalog-mode
  #table-actions
  > :is(#duplicate-rows, #delete-rows, #create-function-view, #delete-functions):disabled {
  display: none;
}

html:root .page-menu,
html:root .table-columns-wrap,
html:root .saved-views-wrap {
  display: inline-flex;
}

/* Saved views (4.10.0): the button names the open view; each view has a remove button. */
html:root #saved-views.is-active {
  border-color: var(--scs-accent);
  color: var(--scs-accent);
}

html:root .saved-view-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

html:root .studio-menu .saved-view-row > .saved-view {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html:root .studio-menu .saved-view.is-active {
  font-weight: 600;
  color: var(--scs-accent);
}

html:root .studio-menu .saved-view-row > .saved-view-remove {
  flex: none;
  width: auto;
  padding: 4px 6px;
}

html:root .table-columns-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--scs-accent-soft);
  color: var(--scs-accent);
  font-size: var(--scs-text-xs);
  font-weight: 600;
}

html:root .table-columns-control {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 12px;
  justify-content: stretch;
  width: 100%;
}

html:root .table-columns-control .menu-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font-size: var(--scs-text-m);
}

html:root .table-columns-control .menu-check.is-locked {
  color: var(--scs-ink-3);
}

html:root .settings-row.table-columns-row {
  align-items: start;
}

/* Column order (4.6.1): visibility and two arrows per column. */
html:root .table-column-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

html:root .table-column-row > .menu-check {
  flex: 1;
  min-width: 0;
}

html:root .table-column-move {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
}

html:root :is(.studio-menu, .table-columns-control) .table-column-move button {
  display: grid;
  place-items: center;
  width: 24px;
  min-width: 0;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--scs-radius-s);
  font-size: 13px;
  line-height: 1;
}

html:root :is(.studio-menu, .table-columns-control) .table-column-move button:disabled {
  visibility: hidden;
}

/* 5.4: filled rows per column ("12/40"), the basis of "Nach Nutzung ordnen". */
html:root .table-column-use {
  flex: 0 0 auto;
  min-width: 38px;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--scs-ink-3);
}

/* In the settings the order reads top to bottom, column by column. */
html:root .table-columns-control:has(.table-column-row) {
  display: block;
  columns: 230px 3;
  column-gap: 16px;
}

html:root .table-columns-control .table-column-row {
  break-inside: avoid;
  min-height: 28px;
}

/* Places that set their own display keep a gap between icon and text. */
html:root button.has-icon:not(.icon-only) > .scs-icon:first-child {
  margin-inline-end: 2px;
}

html:root .preview-actions button.has-icon,
html:root .compact-preview-controls button.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* 6.0: Pro feature in Basic — visible, marked, explained on click (licensing.js). */
html:root button.pro-locked {
  opacity: 0.78;
}
html:root button.pro-locked::after {
  content: 'PRO';
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: 3px;
  padding: 1px 5px;
  background: var(--scs-nav);
  color: var(--scs-nav-ink);
  vertical-align: middle;
}
html:root button.pro-locked.primary {
  background: var(--scs-surface);
  color: var(--scs-ink);
  border-color: var(--scs-line-strong);
}

/* 6.0: a disabled delete button looks disabled too; before, the danger colours
   of themes.css won and "Aus dem Modell löschen" stayed red without a selection. */
html:root button.danger:disabled,
html:root #app button.danger:disabled {
  color: var(--scs-ink-disabled);
  background: var(--scs-surface-2);
  border-color: var(--scs-line);
}