:root {
  color-scheme: light;
  --bg: #eef1f4;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #e7edf2;
  --text: #17212b;
  --muted: #657484;
  --line: #cfd8e3;
  --primary: #0B63B6;
  --primary-dark: #084B8A;
  --danger: #b42318;
  --danger-bg: #fde7e3;
  --gold: #aa7600;
  --green: #2f7d4a;
  --blue: #0B63B6;
  --hover: var(--surface-2);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -- HasMany presenter fallback ------------------------------------------- */

.field-view__hasmany-status {
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: color-mix(in srgb, var(--kmp-color-primary-container, #d7eef0) 42%, transparent);
  color: var(--kmp-color-primary, var(--primary));
  font-size: 12px;
  font-weight: 600;
}

.field-view__hasmany-popup {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.28);
}

.field-view__hasmany-popup-panel {
  width: min(560px, 100%);
  max-height: min(720px, 90vh);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 70%, transparent);
  border-radius: var(--kmp-shape-medium, 12px);
  background: var(--kmp-color-surface, var(--surface));
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
}

.field-view__hasmany-popup-head {
  min-height: 44px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--kmp-color-outline-variant, var(--line));
}

.field-view__hasmany-popup-head strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-view__hasmany-popup-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: transparent;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  cursor: pointer;
}

.field-view__hasmany-popup-close:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.field-view__hasmany-popup-body {
  display: grid;
  grid-template-columns: minmax(88px, max-content) minmax(0, 1fr);
  gap: 4px 10px;
  padding: 12px;
}

.field-view__hasmany-popup-body dt {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 12px;
  font-weight: 700;
}

.field-view__hasmany-popup-body dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.field-view__hasmany {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-view__hasmany-toolbar {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.field-view__hasmany-count {
  min-width: 28px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--kmp-color-surface-container, var(--surface-2));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

.field-view__hasmany-modes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.field-view__hasmany-mode,
.field-view__hasmany-add,
.field-view__hasmany-remove {
  border: 1px solid var(--kmp-color-outline-variant, var(--line));
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
}

.field-view__hasmany-mode {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.field-view__hasmany-mode.is-active {
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 62%, transparent);
  background: color-mix(in srgb, var(--kmp-color-primary-container, #d7eef0) 62%, white);
  color: var(--kmp-color-primary, var(--primary));
  font-weight: 700;
}

.field-view__hasmany-toolbar-spacer {
  flex: 1 1 auto;
}

.field-view__hasmany-add {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
}

.field-view__hasmany-add.is-new {
  width: 28px;
  padding: 0;
  font-size: 16px;
}

.field-view__hasmany-list,
.field-view__hasmany-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-view__hasmany-row,
.field-view__hasmany-option,
.field-view__hasmany-card {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 62%, transparent);
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface, var(--surface));
}

.field-view__hasmany-row,
.field-view__hasmany-option {
  min-height: 38px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-view__hasmany-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.field-view__hasmany-text--clickable:hover,
.field-view__hasmany-card:hover,
.field-view__hasmany-table tr.is-clickable:hover {
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.field-view__hasmany-title,
.field-view__hasmany-option-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.field-view__hasmany-subtitle,
.field-view__hasmany-option-subtitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 12px;
}

.field-view__hasmany-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--kmp-color-error, var(--danger));
}

.field-view__hasmany-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}

.field-view__hasmany-card {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-view__hasmany-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.field-view__hasmany-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--kmp-color-outline-variant, var(--line));
  border-radius: var(--kmp-shape-small, 8px);
  overflow: hidden;
}

.field-view__hasmany-table th,
.field-view__hasmany-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--kmp-color-outline-variant, var(--line));
  text-align: left;
  font-size: 12px;
}

.field-view__hasmany-table th {
  background: var(--kmp-color-surface-container, var(--surface-2));
  font-weight: 750;
}

.field-view__hasmany-table tr:last-child td {
  border-bottom: 0;
}

.field-view__hasmany-table-actions {
  width: 38px;
  text-align: right;
}

.field-view__hasmany-selector {
  padding: 8px;
  border: 1px solid var(--kmp-color-outline-variant, var(--line));
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.field-view__hasmany-search {
  width: 100%;
  min-height: 32px;
  margin-bottom: 8px;
  padding: 0 9px;
  border: 1px solid var(--kmp-color-outline-variant, var(--line));
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
}

.field-view__hasmany-option-add {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--kmp-color-primary, var(--primary));
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-primary, var(--primary));
  font-weight: 700;
}

.field-view__hasmany-option-taken,
.field-view__hasmany-loading,
.field-view__hasmany-empty {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 12px;
}

.responsive-editor-view__field--hasmany-full {
  grid-column: 1 / -1;
}

.responsive-editor-view__section[data-section="relations"]:has(> .responsive-editor-view__field--hasmany-full)
  > .responsive-editor-view__section-title {
  display: none;
}

.field-view--hasmany-full {
  gap: 0;
}

.field-view--hasmany-full > .field-view__label {
  display: none;
}

.field-view__hasmany.is-full {
  min-height: 176px;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--kmp-color-surface, var(--surface));
}

.field-view__hasmany-toolbar.is-full {
  min-height: 48px;
  padding: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-bottom: 0;
}

.field-view__hasmany-heading {
  flex: 1 1 260px;
  min-width: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.field-view__hasmany-heading-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 18px;
  line-height: 28px;
  font-weight: 750;
}

.field-view__hasmany-toolbar.is-full .field-view__hasmany-count {
  min-width: 34px;
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 20px;
}

.field-view__hasmany-save-chip {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--kmp-shape-small, 8px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, var(--kmp-color-primary-container, #d7eef0) 42%, white);
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 13px;
  font-weight: 750;
}

.field-view__hasmany-save-chip.is-pending {
  background: color-mix(in srgb, var(--gold) 14%, white);
  color: var(--gold);
}

.field-view__hasmany-save-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--kmp-color-primary, var(--primary));
}

.field-view__hasmany-save-chip.is-pending .field-view__hasmany-save-dot {
  background: var(--gold);
}

.field-view__hasmany-toolbar.is-full .field-view__hasmany-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

.field-view__hasmany-actions,
.field-view__hasmany-icon-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.field-view__hasmany-icon-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 0;
  border-radius: var(--kmp-shape-small, 8px);
  background: transparent;
  color: var(--kmp-color-primary, var(--primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.field-view__hasmany-icon-button:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.field-view__hasmany-icon-button.is-active {
  background: var(--kmp-color-primary-container, #d7eef0);
  color: var(--kmp-color-primary, var(--primary));
}

.field-view__hasmany-icon-button svg {
  pointer-events: none;
}

.field-view__hasmany-empty.is-full {
  min-height: 124px;
  padding: 30px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
}

.field-view__hasmany-empty-icon {
  color: color-mix(in srgb, var(--kmp-color-on-surface-variant, var(--muted)) 48%, white);
  line-height: 1;
}

.field-view__hasmany.is-full .field-view__hasmany-selector {
  margin-top: 12px;
}

/* -- Group column / kanban view ------------------------------------------- */

.mc-group-column-view {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mc-group-column-view__top {
  flex: 0 0 auto;
}

.mc-group-column-view__navigator {
  min-height: 36px;
  padding: 4px 8px 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--kmp-color-outline-variant, var(--line));
}

.mc-group-column-view__density {
  min-height: 28px;
  border: 1px solid var(--kmp-color-outline-variant, var(--line));
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
}

.mc-group-column-view__toggle {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 12px;
}

.mc-group-column-view__hidden {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.mc-group-column-view__hidden-label {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 12px;
}

.mc-group-column-view__restore {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--kmp-color-outline-variant, var(--line));
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
}

.mc-group-column-view__board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 8px;
}

.mc-group-column-view__column {
  flex: 0 0 280px;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 68%, transparent);
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface-container-low, var(--surface-2));
  overflow: hidden;
}

.mc-group-column-view__column.is-unset {
  background: var(--kmp-color-surface-container, var(--surface-2));
}

.mc-group-column-view__board.is-compact .mc-group-column-view__column {
  flex-basis: 220px;
}

.mc-group-column-view__board.is-spacious .mc-group-column-view__column {
  flex-basis: 340px;
}

.mc-group-column-view__column.is-drop-target {
  border-color: var(--kmp-color-primary, var(--primary));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 24%, transparent);
}

.mc-group-column-view__column-header {
  min-height: 40px;
  padding: 5px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--kmp-color-outline-variant, var(--line));
  background: var(--kmp-color-surface, var(--surface));
}

.mc-group-column-view__column-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.mc-group-column-view__count {
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--kmp-color-surface-container, var(--surface-2));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

.mc-group-column-view__collapse,
.mc-group-column-view__hide,
.mc-group-column-view__more {
  border: 0;
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: transparent;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  cursor: pointer;
}

.mc-group-column-view__collapse,
.mc-group-column-view__hide {
  width: 28px;
  height: 28px;
}

.mc-group-column-view__collapse:hover,
.mc-group-column-view__hide:hover,
.mc-group-column-view__more:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface, var(--text));
}

.mc-group-column-view__items {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
  padding: 8px;
}

.mc-group-column-view__items.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  align-content: start;
}

.mc-group-column-view__card {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 64%, transparent);
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface, var(--surface));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  cursor: pointer;
}

.mc-group-column-view__card:hover {
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 38%, var(--kmp-color-outline, var(--line)));
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.mc-group-column-view__card-body {
  padding: 8px;
}

.mc-group-column-view__empty,
.mc-group-column-view__loading,
.mc-group-column-view__state {
  padding: 18px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  text-align: center;
}

.mc-group-column-view__state.is-error {
  color: var(--kmp-color-error, var(--danger));
}

.mc-group-column-view__more {
  min-height: 32px;
  background: var(--kmp-color-surface, var(--surface));
}

/* -- Work Desktop ---------------------------------------------------------- */

.kmp-workdesktop-panel-slot {
  display: none;
  flex: 0 0 auto;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
}

.kmp-shell-row.has-docked-workdesktop-panel .kmp-workdesktop-panel-slot {
  display: block;
}

.kmp-floating-workdesktop-slot {
  position: fixed;
  inset: 0;
  z-index: 78;
  display: none;
}

.kmp-floating-workdesktop-slot.is-visible {
  display: block;
}

.kmp-floating-workdesktop-scrim {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.22);
}

.kmp-floating-workdesktop-surface {
  height: 100%;
}

.workdesktop-panel {
  position: relative;
  height: 100%;
  min-width: 280px;
  max-width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.workdesktop-panel__resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  z-index: 3;
  width: 8px;
  cursor: col-resize;
}

.workdesktop-panel__resize:hover {
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 18%, transparent);
}

.workdesktop-panel.is-docked {
  box-shadow: none;
}

.workdesktop-panel__header {
  min-height: 48px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--kmp-color-outline-variant, var(--line));
}

.workdesktop-panel__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--kmp-typo-title-small-size, 14px);
  font-weight: 700;
}

.workdesktop-panel__count,
.workdesktop-card__badge {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--kmp-color-surface-container, var(--surface-2));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

.workdesktop-icon-button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: transparent;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  cursor: pointer;
}

.workdesktop-icon-button:hover,
.workdesktop-icon-button.is-active {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-primary, var(--primary));
}

.workdesktop-panel__sort,
.workdesktop-panel__search-input {
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 70%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
}

.workdesktop-panel__search {
  padding: 8px;
  border-bottom: 1px solid var(--kmp-color-outline-variant, var(--line));
}

.workdesktop-panel__search-input {
  width: 100%;
  padding: 0 9px;
}

.workdesktop-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

.workdesktop-panel__cards {
  display: grid;
  gap: 8px;
}

.workdesktop-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #fbc02d 42%, var(--kmp-color-outline, var(--line)));
  border-radius: var(--kmp-shape-medium, 10px);
  background: #fffbe9;
  color: #1f2937;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}

.workdesktop-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #fbc02d;
}

.workdesktop-card.is-drop-target,
.workdesktop-create-dropzone.is-drop-target {
  border-color: var(--kmp-color-primary, var(--primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 24%, transparent);
}

.workdesktop-card__header {
  min-height: 44px;
  padding: 6px 6px 6px 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.workdesktop-card__title {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  cursor: pointer;
}

.workdesktop-card__rename {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  border: 1px solid #fbc02d;
  border-radius: 6px;
  padding: 0 8px;
}

.workdesktop-card__note {
  margin: 0;
  padding: 0 12px 10px 16px;
  color: #4b5563;
  font-size: 12px;
}

.workdesktop-documents {
  margin: 0;
  padding: 6px 6px 8px 12px;
  list-style: none;
  border-top: 1px solid rgba(251, 192, 45, 0.36);
}

.workdesktop-documents__row {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.workdesktop-documents__open {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.workdesktop-documents__cell {
  display: block;
  min-width: 0;
}

.workdesktop-documents__unpin {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--kmp-color-error, var(--danger));
  cursor: pointer;
}

.workdesktop-documents__unpin:hover {
  background: rgba(220, 38, 38, 0.10);
}

.workdesktop-create-dropzone {
  min-height: 132px;
  margin-top: 8px;
  display: grid;
  place-items: center;
  border: 2px dashed #fbc02d;
  border-radius: var(--kmp-shape-medium, 12px);
  background: #fff9c4;
  color: #8d6e00;
  font-weight: 700;
}

.workdesktop-panel__empty,
.workdesktop-panel__state,
.workdesktop-panel__section-empty {
  padding: 18px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  text-align: center;
}

.workdesktop-panel__section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--kmp-color-outline-variant, var(--line));
}

.workdesktop-panel__section-title {
  margin: 0 0 4px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.workdesktop-aux-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.workdesktop-aux-list__row {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--kmp-shape-extra-small, 6px);
}

.workdesktop-aux-list__row:hover {
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.workdesktop-aux-list__open {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--kmp-color-on-surface, var(--text));
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.workdesktop-aux-list__meta {
  flex: 0 1 auto;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 11px;
}

.workdesktop-aux-list__restore {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: transparent;
  color: var(--kmp-color-primary, var(--primary));
  cursor: pointer;
}

.workdesktop-aux-list__restore:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.workdesktop-confirm {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.28);
}

.workdesktop-confirm__dialog {
  width: min(320px, 100%);
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 70%, transparent);
  border-radius: var(--kmp-shape-medium, 12px);
  background: var(--kmp-color-surface, var(--surface));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.20);
}

.workdesktop-confirm__title {
  margin: 0 0 6px;
  font-size: 16px;
}

.workdesktop-confirm__message {
  margin: 0 0 12px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 13px;
}

.workdesktop-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.workdesktop-confirm__cancel,
.workdesktop-confirm__delete {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 70%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
}

.workdesktop-confirm__delete {
  border-color: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 46%, transparent);
  color: var(--kmp-color-error, var(--danger));
}

.mcpinned-editor-fragment {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.mcpinned-editor-fragment__label {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 12px;
  font-weight: 700;
}

.mcpinned-editor-fragment__input,
.mcpinned-editor-fragment__textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 72%, transparent);
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  font: inherit;
}

.mcpinned-editor-fragment__input {
  height: 36px;
  padding: 0 10px;
}

.mcpinned-editor-fragment__textarea {
  min-height: 90px;
  resize: vertical;
  padding: 8px 10px;
}

.mcpinned-editor-fragment__subtitle {
  margin: 8px 0 0;
  font-size: 14px;
}

.mcpinned-editor-fragment__docs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.mcpinned-editor-fragment__doc {
  min-height: 30px;
  padding: 4px;
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface-container-low, var(--surface-2));
  display: flex;
  align-items: center;
  gap: 6px;
}

.mcpinned-editor-fragment__doc-open {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.mcpinned-editor-fragment__doc-cell {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcpinned-editor-fragment__doc-unpin {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--kmp-color-error, var(--danger));
  cursor: pointer;
}

.mcpinned-editor-fragment__doc-unpin:hover {
  background: rgba(220, 38, 38, 0.10);
}

.mcpinned-editor-fragment__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.mcpinned-editor-fragment__cancel,
.mcpinned-editor-fragment__delete,
.mcpinned-editor-fragment__save {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--kmp-shape-extra-small, 6px);
  cursor: pointer;
  font-weight: 700;
}

.mcpinned-editor-fragment__cancel {
  border: 1px solid var(--kmp-color-outline, var(--line));
  background: transparent;
  color: var(--kmp-color-on-surface, var(--text));
}

.mcpinned-editor-fragment__delete {
  border: 1px solid color-mix(in srgb, var(--kmp-color-error, var(--danger)) 42%, var(--kmp-color-outline, var(--line)));
  background: rgba(220, 38, 38, 0.08);
  color: var(--kmp-color-error, var(--danger));
}

.mcpinned-editor-fragment__save {
  border: 1px solid color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 42%, var(--kmp-color-outline, var(--line)));
  background: var(--kmp-color-primary-container, #d7eef0);
  color: var(--kmp-color-primary, var(--primary));
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  height: 100vh;
  min-height: 100vh;
}

.fragment-host,
.fragment-pane-row {
  min-height: 100vh;
}

.fragment-pane-row {
  display: flex;
  gap: 1px;
  background: var(--line);
}

.fragment-pane {
  min-width: 0;
  flex: 1 1 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.fragment-title-bar {
  min-height: 52px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.96);
}

.title-left,
.title-actions,
.home-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fragment-title {
  font-weight: 720;
  letter-spacing: 0;
}

.fragment-body {
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.mc-button,
.mc-icon-button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  min-height: 34px;
  border-radius: 8px;
  padding: 0 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mc-button:hover,
.mc-icon-button:hover,
.palette-item:hover {
  background: var(--surface-2);
}

.mc-button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.mc-button.primary:hover {
  background: var(--primary-dark);
}

.mc-button.subtle {
  color: var(--muted);
}

.mc-button.selected {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, white);
}

.mc-button.danger {
  border-color: #f2b8af;
  color: var(--danger);
  background: var(--danger-bg);
}

.mc-button.tiny {
  min-height: 24px;
  padding: 0 7px;
  font-size: 12px;
}

.mc-icon-button {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 6px;
}

.mc-icon-button > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mc-icon-button svg {
  display: block;
}

.danger-icon {
  color: var(--danger);
}

.root-on {
  color: var(--gold);
  border-color: #e3c15c;
  background: #fff7d7;
}

.home-fragment {
  height: 100%;
  padding: 18px;
  overflow: auto;
}

.home-toolbar {
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr);
  gap: 14px;
  align-items: start;
}

.port-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 16px;
}

.port-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.port-card p {
  line-height: 1.5;
}

.muted {
  color: var(--muted);
}

.facts {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px;
  margin: 12px 0 0;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-weight: 650;
}

pre {
  margin: 0;
  padding: 12px;
  overflow: auto;
  background: #111827;
  color: #e7edf2;
  border-radius: 8px;
  min-height: 320px;
  font-size: 13px;
  line-height: 1.45;
}

.algorithm-fragment,
.algorithm-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.algorithm-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 300px;
}

.algorithm-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 109, 119, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 109, 119, 0.06) 1px, transparent 1px),
    color-mix(in srgb, var(--surface-2) 65%, #ffffff);
  background-size: 20px 20px;
}

.empty-canvas {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
}

.empty-canvas strong {
  color: var(--text);
  font-size: 24px;
}

.edge-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.edge-actions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.edge-disconnect {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid #f0b7ad;
  border-radius: 999px;
  background: #fff6f3;
  color: var(--danger);
  font-weight: 800;
  line-height: 18px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 3px 9px rgba(18, 31, 45, 0.14);
  z-index: 3;
}

.edge-disconnect:hover {
  background: var(--danger-bg);
}

.edge-path {
  fill: none;
  stroke: color-mix(in srgb, var(--primary) 70%, transparent);
  stroke-width: 2;
}

.edge-path.preview {
  stroke: var(--primary);
  stroke-width: 2.5;
  stroke-dasharray: 8 6;
  opacity: 0.85;
}

.algorithm-node {
  position: absolute;
  width: 200px;
  min-height: 88px;
  padding: 8px 10px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.10);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.algorithm-node.combinator {
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
}

.algorithm-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  background: var(--green);
}

.algorithm-node.combinator::before {
  background: var(--blue);
}

.algorithm-node:active {
  cursor: grabbing;
}

.algorithm-node.selected {
  border-width: 2px;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 109, 119, 0.18), 0 4px 10px rgba(15, 23, 42, 0.10);
}

.algorithm-node.dragging {
  opacity: 0.95;
  z-index: 5;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.algorithm-node.root {
  border-color: #d3a529;
  border-width: 2px;
}

.algorithm-node.connecting {
  outline: 3px dashed rgba(0, 109, 119, 0.35);
  outline-offset: 3px;
}

.node-top {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  gap: 7px;
  align-items: start;
}

.node-title {
  min-width: 0;
}

.node-title strong,
.node-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-title strong {
  font-size: 14px;
}

.node-title small,
.node-meta {
  color: var(--muted);
  font-size: 12px;
}

.node-meta {
  margin-top: 5px;
  min-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connector-slot {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 109, 119, 0.30);
  display: grid;
  place-items: center;
  cursor: crosshair;
  padding: 0;
  z-index: 2;
}

.connector-slot:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.connector-dot {
  position: absolute;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.connector-arrow {
  position: absolute;
  bottom: 2px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  color: #ffffff;
}

.mc-button.disconnect {
  min-height: 25px;
  font-size: 12px;
  margin-top: 7px;
  width: 100%;
}

.mc-button.disconnect {
  border-color: #ffd6a6;
  color: #8a5200;
  background: #fff6e8;
}

.algorithm-side {
  min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.algorithm-palette,
.algorithm-inspector {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.side-header {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px;
}

.inspector-header {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.side-title {
  font-weight: 720;
}

.search-input,
.arg-editor input,
.arg-editor select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text);
}

.palette-list {
  overflow: auto;
  padding: 8px;
}

.palette-group {
  margin-bottom: 10px;
}

.palette-group-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  text-transform: uppercase;
  margin: 8px 2px 5px;
}

.palette-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 8px 4px;
}

/* Per-field group (Fields section) — collapsible <details>. */
.palette-field-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 6px;
  overflow: hidden;
}

.palette-field-group[open] {
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-2));
}

.palette-field-summary {
  list-style: none;
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
}

.palette-field-summary::-webkit-details-marker { display: none; }
.palette-field-summary::marker { content: ""; }

.palette-field-summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.palette-field-group[open] > .palette-field-summary::before {
  transform: rotate(90deg);
}

.palette-field-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-field-type {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.palette-field-count {
  font-size: 11px;
  color: var(--muted);
  min-width: 18px;
  text-align: right;
}

.palette-field-group > .palette-item {
  margin: 4px 6px;
  background: var(--surface);
}

.palette-field-group > .palette-item:last-of-type {
  margin-bottom: 8px;
}

.palette-item {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 5px;
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  cursor: grab;
}

.palette-item:active {
  cursor: grabbing;
}

.palette-accent {
  width: 4px;
  height: 28px;
  border-radius: 3px;
  background: var(--green);
}

.palette-item.combinator .palette-accent {
  background: var(--blue);
}

.palette-copy strong,
.palette-copy small {
  display: block;
}

.palette-copy small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arg-count,
.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--muted);
  font-size: 12px;
}

.inspector-section {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.inspector-section h3,
.inspector-section h4 {
  margin: 8px 0;
}

.arg-editor {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.arg-editor > span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 650;
}

.quick-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.small-info {
  color: var(--muted);
  font-size: 12px;
  display: grid;
  gap: 5px;
}

.popup-scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(15, 23, 42, 0.48);
  display: grid;
  place-items: center;
  padding: 28px;
}

.popup-card {
  width: min(1060px, 94vw);
  max-height: 88vh;
  min-height: 520px;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.popup-card.fill-height {
  height: 88vh;
}

.popup-body {
  height: 100%;
}

@media (max-width: 820px) {
  .fragment-pane-row,
  .home-grid,
  .algorithm-layout {
    display: block;
  }

  .fragment-pane-row {
    min-height: 100vh;
  }

  .algorithm-layout {
    overflow: auto;
  }

  .algorithm-canvas {
    height: 560px;
  }

  .algorithm-side {
    height: 520px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ── Step 01 shell foundation ───────────────────────────────────────── */

:root {
  --kmp-top-bar-height: 56px;
  --kmp-drawer-width: 280px;
  --kmp-shell-gap: 12px;
  --kmp-shell-padding: 14px;
  --kmp-radius: 10px;
}

.app-shell {
  height: 100vh;
  min-height: 100vh;
  display: block;
}

.kmp-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

.kmp-login-slot {
  display: none;
}

.kmp-app.is-login-gated {
  display: block;
}

.kmp-app.is-login-gated > .kmp-login-slot {
  display: block;
  min-height: 100vh;
}

.kmp-app.is-login-gated > .kmp-top-bar,
.kmp-app.is-login-gated > .kmp-shell-row,
.kmp-app.is-login-gated > .kmp-floating-drawer-slot,
.kmp-app.is-login-gated > .kmp-floating-workdesktop-slot,
.kmp-app.is-login-gated > .kmp-overlay-root-host {
  display: none;
}

.local-login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
}

.local-login-screen.has-background {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.38)),
    var(--login-background-image);
  background-size: cover;
  background-position: center;
}

.local-login-panel {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 40px;
  border: 2px solid rgba(15, 23, 42, 0.82);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18);
  color: var(--text);
}

.local-login-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 760;
  text-align: center;
  letter-spacing: 0;
}

.local-login-subtitle {
  margin: -2px 0 8px;
  color: var(--muted);
  line-height: 1.45;
  text-align: center;
}

.local-login-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

.local-login-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.local-login-button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.local-login-button:hover:not(:disabled) {
  background: var(--primary-dark);
}

.local-login-button:disabled,
.local-login-input:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.local-login-error {
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
  font-size: 13px;
}

/* Top bar — pinned, never scrolls. */
.kmp-top-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--kmp-top-bar-height);
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.kmp-top-bar-title {
  flex: 0 0 auto;
  min-width: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.15px;
  color: var(--kmp-color-on-surface, var(--text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  margin-left: 0;
}

.kmp-top-bar-title:hover,
.kmp-top-bar-title:focus-visible {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  outline: none;
}

.kmp-top-bar-actions-slot {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Top bar action buttons. */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.topbar-action-label {
  font-size: 12px;
  color: var(--muted);
}

.topbar-action-menu {
  display: inline-flex;
}

.topbar-action-menu > summary {
  list-style: none;
}

.topbar-action-menu > summary::-webkit-details-marker {
  display: none;
}

.topbar-action-menu[open] > summary {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, white);
}

.topbar-action-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 42px rgba(15, 23, 42, 0.18);
}

.topbar-action-menu__item {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  text-align: left;
  cursor: pointer;
}

.topbar-action-menu__item:hover,
.topbar-action-menu__item.is-selected {
  background: var(--hover);
}

.topbar-action-menu__item.is-selected {
  color: var(--primary);
}

.topbar-action-menu__icon,
.topbar-action-menu__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.topbar-action-menu__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-icon-button.is-active {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, white);
}

/* Shell row — drawer on the left when docked, content on the right. */
.kmp-shell-row {
  flex: 1 1 auto;
  height: calc(100vh - var(--kmp-top-bar-height));
  display: flex;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
  gap: var(--kmp-shell-gap);
  padding: var(--kmp-shell-padding);
}

.kmp-drawer-slot {
  flex: 0 0 auto;
  min-width: 0;
  display: contents;
}

.kmp-shell-row.has-docked-drawer .kmp-drawer-slot {
  display: block;
  flex: 0 0 var(--kmp-drawer-width);
}

.kmp-content-surface {
  flex: 1;
  height: 100%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--kmp-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kmp-empty-content {
  padding: 32px;
  color: var(--muted);
}

/* Floating drawer — overlays the shell with a scrim. */
.kmp-floating-drawer-slot {
  display: none;
}

.kmp-floating-drawer-slot.is-visible {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 60;
}

.kmp-floating-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
  display: flex;
  align-items: stretch;
}

.kmp-floating-drawer-surface {
  width: var(--kmp-drawer-width);
  max-width: 88vw;
  background: var(--surface);
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
}

.kmp-overlay-root-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
}

.kmp-overlay-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Drawer chrome ──────────────────────────────────────────────────── */

.menu-drawer-surface {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--kmp-radius);
  overflow: hidden;
}

.menu-drawer-surface.is-floating {
  border-radius: 0 var(--kmp-radius) var(--kmp-radius) 0;
}

.menu-drawer-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.menu-drawer-header .mc-icon-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
}

.menu-drawer-header .mc-icon-button:hover,
.menu-drawer-header .mc-icon-button.is-active {
  border: 0;
  background: transparent;
}

.menu-drawer-header .mc-icon-button.is-active {
  color: var(--primary);
}

.menu-drawer-header .mc-icon-button svg {
  display: block;
}

.menu-drawer-title {
  flex: 1;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.menu-drawer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px;
  background: #ffffff;
}

.menu-drawer-content {
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.compact-menu-section-header {
  display: flex;
  align-items: center;
  width: calc(100% - 12px);
  min-height: 28px;
  margin: 10px 6px 2px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  user-select: none;
}

.compact-menu-section-header.is-first {
  margin-top: 2px;
}

.compact-menu-section-chevron {
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
  color: var(--primary);
  transform: rotate(-90deg);
  transition: transform 160ms ease;
}

.compact-menu-section-header.is-open .compact-menu-section-chevron {
  transform: rotate(0deg);
}

.compact-menu-section-title,
.compact-menu-section-label {
  flex: 1;
  min-width: 0;
  padding-left: 8px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

.compact-menu-section-label {
  padding: 10px 12px 4px 18px;
}

.compact-menu-row,
.compact-menu-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  min-height: 28px;
  margin: 1px 8px 0;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.compact-menu-row:hover,
.compact-menu-group-header:hover {
  background: var(--surface-2);
}

.compact-menu-row.is-indent {
  width: calc(100% - 40px);
  margin-left: 32px;
}

.compact-menu-row.is-selected {
  background: color-mix(in srgb, var(--primary) 10%, white);
  color: var(--primary);
}

.compact-menu-row.is-technical {
  min-height: 24px;
  color: color-mix(in srgb, var(--muted) 80%, var(--surface));
  font-size: 12px;
}

.compact-menu-chevron-slot,
.compact-menu-chevron {
  width: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.compact-menu-chevron {
  transform: rotate(-90deg);
  transition: transform 160ms ease;
  color: var(--text);
}

.compact-menu-group-header.is-open .compact-menu-chevron {
  transform: rotate(0deg);
}

.compact-menu-icon {
  flex: 0 0 auto;
  width: 18px;
  min-width: 18px;
  height: 18px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
}

.compact-menu-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.compact-menu-group-header .compact-menu-icon,
.compact-menu-row:not(.is-technical) .compact-menu-icon {
  font-size: 18px;
}

.compact-menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-menu-group-header .compact-menu-label {
  font-size: 13px;
  font-weight: 600;
}

.compact-menu-row .compact-menu-label {
  font-size: 13px;
  font-weight: 400;
}

.compact-menu-row.is-selected .compact-menu-label {
  font-weight: 650;
}

.menu-group-children {
  position: relative;
  display: flex;
  flex-direction: column;
}

.menu-group-children::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  border-left: 1px solid var(--line);
}

.compact-menu-count-badge,
.menu-badge {
  flex-shrink: 0;
  font-size: 11px;
  background: var(--primary);
  color: white;
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 600;
}

.menu-test-pill {
  flex-shrink: 0;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(170, 118, 0, 0.16);
  color: var(--gold);
  border-radius: 3px;
  padding: 1px 5px;
  font-weight: 700;
}

/* ── Renderer (MCNavigationFragment) ─────────────────────────────────── */

.mc-navigation-fragment {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
  position: relative;
}

.mc-navigation-fragment .fragment-pane-row {
  flex: 1;
  display: block;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

.mc-navigation-fragment .fragment-pane {
  --kmp-nav-slide-ms: 260ms;
  position: absolute;
  inset-block: 0;
  left: 0;
  height: 100%;
  background: var(--kmp-pane-bg, var(--surface));
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  transform: translateX(0);
  transition:
    transform var(--kmp-nav-slide-ms) cubic-bezier(0.2, 0, 0, 1),
    width var(--kmp-nav-slide-ms) cubic-bezier(0.2, 0, 0, 1);
  will-change: transform, width;
}

.mc-navigation-fragment .fragment-pane.is-root {
  border-radius: var(--kmp-radius);
}

.mc-navigation-fragment .fragment-pane.is-master {
  border-radius: var(--kmp-radius) 0 0 var(--kmp-radius);
  border-right-width: 0;
}

.mc-navigation-fragment .fragment-pane.is-detail {
  border-radius: 0 var(--kmp-radius) var(--kmp-radius) 0;
  border-left-width: 0;
}

.mc-navigation-fragment .fragment-pane.is-outgoing {
  pointer-events: none;
}

.mc-navigation-fragment .fragment-title-bar {
  flex-shrink: 0;
  background: var(--kmp-pane-bg, rgba(255, 255, 255, 0.96));
}

.mc-navigation-fragment .fragment-title-bar.is-master {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-block: 7px;
}

.mc-navigation-fragment .fragment-title-bar.is-master .title-left,
.mc-navigation-fragment .fragment-title-bar.is-master .title-actions {
  width: 100%;
}

.mc-navigation-fragment .fragment-title-bar.is-master .title-actions {
  justify-content: flex-start;
}

.mc-navigation-fragment .fragment-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kmp-pane-bg, transparent);
}

.mc-navigation-fragment .fragment-content-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

.mc-navigation-fragment .fragment-view,
.mc-navigation-fragment .combined-editor-fragment,
.mc-navigation-fragment .combined-editor-fragment__body,
.mc-navigation-fragment .inline-editor-fragment,
.mc-navigation-fragment .hasmany-fragment,
.mc-navigation-fragment .hasmany-item-editor {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--kmp-pane-bg, var(--kmp-color-surface, var(--surface)));
}

.mc-navigation-fragment .fragment-view__content {
  background: transparent;
}

.mc-navigation-fragment .fragment-view__title-bar,
.mc-navigation-fragment .fragment-view__footer {
  background: color-mix(
    in srgb,
    var(--kmp-pane-bg, var(--kmp-color-surface-container, var(--surface-2))) 86%,
    var(--kmp-color-surface, var(--surface)) 14%
  );
}

.fragment-state-loading,
.fragment-state-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fragment-state-loading {
  background: var(--kmp-pane-bg, var(--surface));
}

.fragment-state-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--kmp-color-outline, var(--line));
  border-top-color: var(--kmp-color-primary, var(--primary));
  animation: fragment-view-spin 0.8s linear infinite;
}

.fragment-state-error {
  flex-direction: column;
  gap: 8px;
  padding: 32px;
  text-align: center;
  background: var(--kmp-pane-bg, var(--surface));
}

.fragment-state-error__message {
  margin: 0;
  font-size: var(--kmp-typo-body-large-size, 16px);
  color: var(--kmp-color-error, var(--danger));
}

.fragment-state-error__detail {
  margin: 0;
  font-size: var(--kmp-typo-body-small-size, 12px);
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.fragment-state-error__retry {
  margin-top: 8px;
  padding: 6px 16px;
  border: 1px solid var(--kmp-color-outline, var(--line));
  border-radius: var(--kmp-shape-small, 8px);
  background: transparent;
  cursor: pointer;
  color: var(--kmp-color-primary, var(--primary));
}

.mc-navigation-fragment .popup-card {
  background: var(--kmp-pane-bg, var(--surface));
}

.minimized-presentation-shelf {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  z-index: 30;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}

.minimized-presentation-shelf__item {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.minimized-presentation-shelf__item:hover {
  border-color: var(--line-strong, var(--line));
  background: color-mix(in srgb, var(--accent, var(--primary)) 7%, var(--surface));
}

.minimized-presentation-shelf__icon {
  flex: 0 0 auto;
  color: var(--accent, var(--primary));
  font-size: 15px;
  line-height: 1;
}

.minimized-presentation-shelf__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.minimized-presentation-shelf__label,
.minimized-presentation-shelf__detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.minimized-presentation-shelf__label {
  font-size: 13px;
  font-weight: 650;
}

.minimized-presentation-shelf__detail {
  color: var(--muted);
  font-size: 11px;
}

.minimized-presentation-shelf__progress {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
}

.minimized-presentation-shelf__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent, var(--primary));
}

.minimized-presentation-shelf__more {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  padding-inline: 4px;
}

/* Placeholder + dashboard fragment surfaces. */
.placeholder-fragment {
  padding: 24px;
  max-width: 720px;
}

.placeholder-fragment h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.placeholder-fragment .mc-button {
  margin-top: 16px;
}

.dashboard-fragment {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.dashboard-fragment__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
}

.dashboard-fragment__title {
  margin: 0;
  font-size: var(--kmp-typo-title-large-size, 22px);
  line-height: var(--kmp-typo-title-large-line-height, 28px);
  font-weight: 750;
  color: var(--kmp-color-on-surface, var(--text));
}

.dashboard-fragment__availability {
  flex: 0 0 auto;
}

.availability-monitor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 70%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
}

.availability-monitor__header {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.availability-monitor__title-block {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.availability-monitor__title {
  margin: 0;
  font-size: var(--kmp-typo-title-medium-size, 16px);
  line-height: 22px;
  font-weight: 750;
}

.availability-monitor__description {
  min-width: 0;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
  overflow-wrap: anywhere;
}

.availability-monitor__summary {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
}

.availability-monitor__refresh {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 auto;
}

.availability-monitor__sections {
  display: grid;
  gap: 12px;
}

.availability-monitor__section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.availability-monitor__section-header {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.availability-monitor__section-title-block {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.availability-monitor__section-title {
  margin: 0;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-title-small-size, 14px);
  line-height: 20px;
  font-weight: 750;
}

.availability-monitor__section-description,
.availability-monitor__section-summary {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
}

.availability-monitor__section-description {
  overflow-wrap: anywhere;
}

.availability-monitor__section-summary {
  flex: 0 0 auto;
  white-space: nowrap;
}

.availability-monitor__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.availability-monitor__service,
.availability-monitor__empty {
  min-width: 0;
  min-height: 86px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 74%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface-container-lowest, var(--surface));
}

.availability-monitor__service-top {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.availability-monitor__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--kmp-color-outline, var(--muted));
}

.availability-monitor__service.is-online .availability-monitor__dot {
  background: var(--success);
}

.availability-monitor__service.is-degraded .availability-monitor__dot {
  background: var(--warning, #b45309);
}

.availability-monitor__service.is-offline .availability-monitor__dot {
  background: var(--kmp-color-error, var(--danger));
}

.availability-monitor__service-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
}

.availability-monitor__service.is-online .availability-monitor__service-name {
  color: var(--success);
}

.availability-monitor__service.is-degraded .availability-monitor__service-name {
  color: var(--warning, #b45309);
}

.availability-monitor__open {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 34%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 6%, transparent);
  color: var(--kmp-color-primary, var(--primary));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.availability-monitor__open:hover {
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 52%, transparent);
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 12%, transparent);
}

.availability-monitor__sublist {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.availability-monitor__subitem {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 62%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--kmp-color-surface-container-lowest, var(--surface)) 86%, var(--kmp-color-surface-container, var(--bg)));
}

.availability-monitor__subitem-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.availability-monitor__subitem-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
}

.availability-monitor__subitem.is-online .availability-monitor__dot {
  background: var(--success);
}

.availability-monitor__subitem.is-online .availability-monitor__subitem-name {
  color: var(--success);
}

.availability-monitor__subitem.is-degraded .availability-monitor__dot {
  background: var(--warning, #b45309);
}

.availability-monitor__subitem.is-degraded .availability-monitor__subitem-name {
  color: var(--warning, #b45309);
}

.availability-monitor__subitem.is-offline .availability-monitor__dot {
  background: var(--kmp-color-error, var(--danger));
}

.availability-monitor__subitem.is-offline .availability-monitor__subitem-name {
  color: var(--kmp-color-error, var(--danger));
}

.availability-monitor__service.is-offline .availability-monitor__service-name,
.availability-monitor__error {
  color: var(--kmp-color-error, var(--danger));
}

.availability-monitor__url,
.availability-monitor__meta,
.availability-monitor__detail,
.availability-monitor__empty {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
}

.availability-monitor__url,
.availability-monitor__detail {
  overflow-wrap: anywhere;
}

.availability-monitor__meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.availability-monitor__error {
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-error, var(--danger)) 42%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 8%, transparent);
  font-size: var(--kmp-typo-body-small-size, 12px);
}

.dashboard-fragment__tenant-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dashboard-fragment__tenant-grid > .mc-combined-collection-view {
  flex: 1 1 auto;
}

.tenant-dashboard-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tenant-dashboard-grid__toolbar {
  flex: 0 0 auto;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tenant-dashboard-grid__meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tenant-dashboard-grid__count {
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-title-small-size, 14px);
  line-height: 20px;
  font-weight: 750;
}

.tenant-dashboard-grid__updated {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
}

.tenant-dashboard-grid__refresh {
  width: 34px;
  height: 34px;
  min-width: 34px;
}

.tenant-dashboard-grid__cards {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
  align-content: start;
  gap: 10px;
  padding: 1px 2px 4px 1px;
}

.tenant-dashboard-grid__state {
  flex: 1 1 auto;
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 70%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-medium-size, 14px);
}

.tenant-dashboard-grid__state.is-error {
  color: var(--kmp-color-error, var(--danger));
  border-color: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 36%, transparent);
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 6%, var(--kmp-color-surface, var(--surface)));
}

.tenant-dashboard-card {
  min-width: 0;
  min-height: 248px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 76%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
}

.tenant-dashboard-card__header {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.tenant-dashboard-card__status-dot,
.tenant-dashboard-card__activity-dot {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--kmp-color-outline, var(--muted));
}

.tenant-dashboard-card.is-active .tenant-dashboard-card__status-dot {
  background: var(--success);
}

.tenant-dashboard-card.is-initialized .tenant-dashboard-card__status-dot,
.tenant-dashboard-card.is-provisioning .tenant-dashboard-card__status-dot,
.tenant-dashboard-card.is-requested .tenant-dashboard-card__status-dot {
  background: var(--warning, #b45309);
}

.tenant-dashboard-card.is-failed .tenant-dashboard-card__status-dot,
.tenant-dashboard-card.is-suspended .tenant-dashboard-card__status-dot {
  background: var(--kmp-color-error, var(--danger));
}

.tenant-dashboard-card__title-block {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tenant-dashboard-card__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-title-medium-size, 16px);
  line-height: 22px;
  font-weight: 800;
}

.tenant-dashboard-card__domain {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
}

.tenant-dashboard-card__status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kmp-color-secondary-container, #e9eef4) 78%, transparent);
  color: var(--kmp-color-on-secondary-container, var(--text));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
  font-weight: 750;
  white-space: nowrap;
}

.tenant-dashboard-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tenant-dashboard-card__fact {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 58%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--kmp-color-surface-container-lowest, var(--surface)) 86%, var(--kmp-color-surface-container, var(--bg)));
}

.tenant-dashboard-card__fact-label {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 700;
}

.tenant-dashboard-card__fact-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
  font-weight: 650;
}

.tenant-dashboard-card__links {
  min-height: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tenant-dashboard-card__link {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 34%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 6%, transparent);
  color: var(--kmp-color-primary, var(--primary));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
  font-weight: 750;
  text-decoration: none;
}

.tenant-dashboard-card__link:hover {
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 52%, transparent);
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 12%, transparent);
}

.tenant-dashboard-card__no-links {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
}

.tenant-dashboard-card__activity {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.tenant-dashboard-card__activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-label-large-size, 13px);
  line-height: 18px;
  font-weight: 800;
}

.tenant-dashboard-card__activity-count {
  min-width: 24px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--kmp-color-surface-container-high, #eef2f7);
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
}

.tenant-dashboard-card__activity-list {
  display: grid;
  gap: 6px;
}

.tenant-dashboard-card__activity-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.tenant-dashboard-card__activity-dot {
  background: var(--kmp-color-primary, var(--primary));
}

.tenant-dashboard-card__activity-main {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.tenant-dashboard-card__activity-name,
.tenant-dashboard-card__activity-target {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-dashboard-card__activity-name {
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
  font-weight: 750;
}

.tenant-dashboard-card__activity-target,
.tenant-dashboard-card__activity-time,
.tenant-dashboard-card__activity-empty {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
}

.tenant-dashboard-card__activity-time {
  white-space: nowrap;
}

.tenant-dashboard-card__activity-empty {
  padding: 8px;
  border: 1px dashed color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 78%, transparent);
  border-radius: 7px;
}

/* Dashboard redesign: clearer operational hierarchy without changing data. */
.dashboard-fragment {
  height: 100%;
  min-height: 0;
  gap: 16px;
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 4%, transparent) 0%,
      transparent 160px);
}

.dashboard-fragment__header {
  min-height: 40px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-fragment__title {
  margin: 0;
  min-width: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 800;
}

.dashboard-fragment__actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.dashboard-fragment__nginx-refresh,
.dashboard-fragment__create-tenant {
  flex: 0 0 auto;
}

.dashboard-fragment__nginx-refresh {
  color: var(--kmp-color-primary, var(--primary));
}

.dashboard-fragment__tenant-grid {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.availability-monitor {
  gap: 14px;
  padding: 16px;
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 18%, var(--kmp-color-outline, var(--line)));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 7%, var(--kmp-color-surface, var(--surface))) 0%,
      color-mix(in srgb, var(--success) 5%, var(--kmp-color-surface, var(--surface))) 52%,
      var(--kmp-color-surface, var(--surface)) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.availability-monitor.is-error {
  border-color: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 34%, var(--kmp-color-outline, var(--line)));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--kmp-color-error, var(--danger)) 5%, var(--kmp-color-surface, var(--surface))) 0%,
      var(--kmp-color-surface, var(--surface)) 100%);
}

.availability-monitor.is-checking {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 5%, var(--kmp-color-surface, var(--surface))) 0%,
      var(--kmp-color-surface, var(--surface)) 100%);
}

.availability-monitor__header {
  align-items: flex-start;
}

.availability-monitor__title-block {
  gap: 4px;
}

.availability-monitor__title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 850;
}

.availability-monitor__summary {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--success) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: color-mix(in srgb, var(--success) 82%, var(--kmp-color-on-surface, var(--text)));
  font-weight: 750;
}

.availability-monitor__summary.is-online {
  border-color: color-mix(in srgb, var(--success) 22%, transparent);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: color-mix(in srgb, var(--success) 82%, var(--kmp-color-on-surface, var(--text)));
}

.availability-monitor__summary.is-degraded {
  border-color: color-mix(in srgb, var(--warning, #b45309) 28%, transparent);
  background: color-mix(in srgb, var(--warning, #b45309) 10%, transparent);
  color: color-mix(in srgb, var(--warning, #b45309) 84%, var(--kmp-color-on-surface, var(--text)));
}

.availability-monitor__summary.is-offline {
  border-color: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 30%, transparent);
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 9%, transparent);
  color: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 86%, var(--kmp-color-on-surface, var(--text)));
}

.availability-monitor__summary.is-checking,
.availability-monitor__summary.is-neutral {
  border-color: color-mix(in srgb, var(--kmp-color-outline, var(--line)) 64%, transparent);
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.availability-monitor__overview,
.tenant-dashboard-grid__overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.availability-monitor__metric,
.tenant-dashboard-grid__metric {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 58%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--kmp-color-surface, var(--surface)) 90%, white);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.availability-monitor__metric-icon,
.tenant-dashboard-grid__metric-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.availability-monitor__metric.is-online .availability-monitor__metric-icon,
.tenant-dashboard-grid__metric.is-active .tenant-dashboard-grid__metric-icon {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.availability-monitor__metric.is-attention .availability-monitor__metric-icon {
  background: color-mix(in srgb, var(--warning, #b45309) 12%, transparent);
  color: var(--warning, #b45309);
}

.tenant-dashboard-grid__metric.is-release .tenant-dashboard-grid__metric-icon {
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 12%, transparent);
  color: var(--kmp-color-primary, var(--primary));
}

.tenant-dashboard-grid__metric.is-activity .tenant-dashboard-grid__metric-icon {
  background: color-mix(in srgb, #7c3aed 11%, transparent);
  color: #6d28d9;
}

.availability-monitor__metric-body,
.tenant-dashboard-grid__metric-body {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.availability-monitor__metric-label,
.tenant-dashboard-grid__metric-label {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 750;
}

.availability-monitor__metric-value,
.tenant-dashboard-grid__metric-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 20px;
  line-height: 24px;
  font-weight: 850;
}

.availability-monitor__metric-detail,
.tenant-dashboard-grid__metric-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
}

.availability-monitor__sections {
  gap: 16px;
}

.availability-monitor__section {
  gap: 10px;
}

.availability-monitor__section-title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 850;
}

.availability-monitor__section-summary {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface, var(--text));
  font-weight: 750;
}

.availability-monitor__section-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.availability-monitor__section-toggle {
  width: 30px;
  height: 30px;
  min-width: 30px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.availability-monitor__section-toggle:hover {
  color: var(--kmp-color-primary, var(--primary));
}

.availability-monitor__grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  gap: 10px;
}

.availability-monitor__service,
.availability-monitor__empty {
  min-height: 0;
  gap: 8px;
  padding: 12px;
  border-left: 4px solid var(--kmp-color-outline, var(--muted));
  background: color-mix(in srgb, var(--kmp-color-surface, var(--surface)) 92%, white);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.availability-monitor__service.is-online {
  border-left-color: var(--success);
}

.availability-monitor__service.is-degraded {
  border-left-color: var(--warning, #b45309);
}

.availability-monitor__service.is-offline {
  border-left-color: var(--kmp-color-error, var(--danger));
}

.availability-monitor__service-top {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
}

.availability-monitor__service-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.availability-monitor__service.is-online .availability-monitor__service-icon {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.availability-monitor__service.is-degraded .availability-monitor__service-icon {
  background: color-mix(in srgb, var(--warning, #b45309) 10%, transparent);
  color: var(--warning, #b45309);
}

.availability-monitor__service.is-offline .availability-monitor__service-icon {
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 10%, transparent);
  color: var(--kmp-color-error, var(--danger));
}

.availability-monitor__service-title {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.availability-monitor__service-name {
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-title-small-size, 14px);
  line-height: 20px;
  font-weight: 850;
}

.availability-monitor__service.is-online .availability-monitor__service-name,
.availability-monitor__service.is-degraded .availability-monitor__service-name,
.availability-monitor__service.is-offline .availability-monitor__service-name {
  color: var(--kmp-color-on-surface, var(--text));
}

.availability-monitor__status-pill {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 800;
}

.availability-monitor__service.is-online .availability-monitor__status-pill {
  background: color-mix(in srgb, var(--success) 11%, transparent);
  color: var(--success);
}

.availability-monitor__service.is-degraded .availability-monitor__status-pill {
  background: color-mix(in srgb, var(--warning, #b45309) 11%, transparent);
  color: var(--warning, #b45309);
}

.availability-monitor__service.is-offline .availability-monitor__status-pill {
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 11%, transparent);
  color: var(--kmp-color-error, var(--danger));
}

.availability-monitor__url {
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.availability-monitor__meta {
  color: var(--kmp-color-on-surface, var(--text));
  font-weight: 700;
}

.availability-monitor__subitem {
  padding: 7px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.tenant-dashboard-grid {
  flex: 0 0 auto;
  min-height: auto;
  gap: 12px;
}

.tenant-dashboard-grid__toolbar {
  min-height: 30px;
  padding: 0 2px;
}

.tenant-dashboard-grid__count {
  font-size: 15px;
  line-height: 20px;
  font-weight: 850;
}

.tenant-dashboard-grid__overview {
  flex: 0 0 auto;
}

.tenant-dashboard-grid__cards {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  align-items: start;
  gap: 12px;
  padding: 1px 2px 8px 1px;
}

.tenant-dashboard-card {
  min-height: 0;
  grid-template-rows: auto auto auto auto;
  gap: 12px;
  padding: 14px;
  border-top: 4px solid var(--kmp-color-outline, var(--muted));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 3%, transparent) 0%,
      var(--kmp-color-surface, var(--surface)) 72px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.tenant-dashboard-card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}

.tenant-dashboard-card.is-open {
  cursor: default;
}

.tenant-dashboard-card.is-active {
  border-top-color: var(--success);
}

.tenant-dashboard-card.is-initialized,
.tenant-dashboard-card.is-provisioning,
.tenant-dashboard-card.is-requested {
  border-top-color: var(--warning, #b45309);
}

.tenant-dashboard-card.is-failed,
.tenant-dashboard-card.is-suspended {
  border-top-color: var(--kmp-color-error, var(--danger));
}

.tenant-dashboard-card__header {
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
}

.tenant-dashboard-card__status-cluster {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.tenant-dashboard-card__toggle {
  width: 30px;
  height: 30px;
  min-width: 30px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  background: color-mix(in srgb, var(--kmp-color-surface-container-high, var(--surface-3)) 72%, transparent);
}

.tenant-dashboard-card__toggle:hover {
  color: var(--kmp-color-primary, var(--primary));
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 10%, transparent);
}

.tenant-dashboard-card__status-dot {
  width: 10px;
  height: 10px;
  margin-top: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.tenant-dashboard-card.is-active .tenant-dashboard-card__status-dot {
  color: var(--success);
}

.tenant-dashboard-card.is-initialized .tenant-dashboard-card__status-dot,
.tenant-dashboard-card.is-provisioning .tenant-dashboard-card__status-dot,
.tenant-dashboard-card.is-requested .tenant-dashboard-card__status-dot {
  color: var(--warning, #b45309);
}

.tenant-dashboard-card.is-failed .tenant-dashboard-card__status-dot,
.tenant-dashboard-card.is-suspended .tenant-dashboard-card__status-dot {
  color: var(--kmp-color-error, var(--danger));
}

.tenant-dashboard-card__title {
  font-size: 17px;
  line-height: 22px;
  font-weight: 850;
}

.tenant-dashboard-card__domain {
  color: var(--kmp-color-primary, var(--primary));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
}

.tenant-dashboard-card__status {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.tenant-dashboard-card.is-active .tenant-dashboard-card__status {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.tenant-dashboard-card.is-initialized .tenant-dashboard-card__status,
.tenant-dashboard-card.is-provisioning .tenant-dashboard-card__status,
.tenant-dashboard-card.is-requested .tenant-dashboard-card__status {
  background: color-mix(in srgb, var(--warning, #b45309) 10%, transparent);
  color: var(--warning, #b45309);
}

.tenant-dashboard-card.is-failed .tenant-dashboard-card__status,
.tenant-dashboard-card.is-suspended .tenant-dashboard-card__status {
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 10%, transparent);
  color: var(--kmp-color-error, var(--danger));
}

.tenant-dashboard-card__facts {
  gap: 8px 12px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 64%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 64%, transparent);
}

.tenant-dashboard-card__fact {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tenant-dashboard-card__fact-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.tenant-dashboard-card__fact-body {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.tenant-dashboard-card__fact-label {
  font-weight: 800;
}

.tenant-dashboard-card__fact-value {
  font-size: 13px;
  line-height: 17px;
  font-weight: 750;
}

.tenant-dashboard-card__links {
  min-height: 34px;
}

.tenant-dashboard-card__link {
  min-height: 30px;
  border-radius: 8px;
}

button.tenant-dashboard-card__link {
  appearance: none;
  cursor: pointer;
  font: inherit;
}

.tenant-dashboard-card__release {
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 48%, transparent);
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 11%, transparent);
}

.tenant-dashboard-card__release:hover {
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 64%, transparent);
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 16%, transparent);
}

.tenant-dashboard-card__ssl {
  border-color: color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 76%, transparent);
  background: var(--kmp-color-surface-container-lowest, var(--surface));
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.tenant-dashboard-card__ssl:hover {
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 44%, transparent);
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 8%, transparent);
  color: var(--kmp-color-primary, var(--primary));
}

.tenant-dashboard-card__ssl.is-installed {
  border-color: color-mix(in srgb, var(--success) 42%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.tenant-dashboard-card__ssl.is-attention {
  border-color: color-mix(in srgb, var(--warning, #b45309) 42%, transparent);
  background: color-mix(in srgb, var(--warning, #b45309) 10%, transparent);
  color: var(--warning, #b45309);
}

.tenant-dashboard-card__ssl.is-failed {
  border-color: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 42%, transparent);
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 10%, transparent);
  color: var(--kmp-color-error, var(--danger));
}

.tenant-dashboard-card__latest-release {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 58%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--kmp-color-surface-container-lowest, var(--surface)) 88%, var(--kmp-color-surface-container, var(--bg)));
}

.tenant-dashboard-card__latest-release-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.tenant-dashboard-card__latest-release-body {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.tenant-dashboard-card__latest-release-label {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 800;
}

.tenant-dashboard-card__latest-release-value,
.tenant-dashboard-card__latest-release-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-dashboard-card__latest-release-value {
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
  font-weight: 800;
}

.tenant-dashboard-card__latest-release-meta {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
}

.tenant-dashboard-card__latest-release.is-succeeded .tenant-dashboard-card__latest-release-icon {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.tenant-dashboard-card__latest-release.is-running .tenant-dashboard-card__latest-release-icon,
.tenant-dashboard-card__latest-release.is-queued .tenant-dashboard-card__latest-release-icon {
  background: color-mix(in srgb, var(--warning, #b45309) 10%, transparent);
  color: var(--warning, #b45309);
}

.tenant-dashboard-card__latest-release.is-failed .tenant-dashboard-card__latest-release-icon,
.tenant-dashboard-card__latest-release.is-cancelled .tenant-dashboard-card__latest-release-icon {
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 10%, transparent);
  color: var(--kmp-color-error, var(--danger));
}

.tenant-dashboard-card__details {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 64%, transparent);
}

.tenant-dashboard-card__details .tenant-dashboard-card__facts {
  padding-top: 0;
  border-top: 0;
}

.tenant-dashboard-card__activity {
  gap: 8px;
}

.tenant-dashboard-card__activity-empty {
  padding: 9px 10px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
  border-style: solid;
}

.tenant-detail-fragment {
  height: 100%;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 4%, transparent) 0%,
      transparent 180px);
}

.tenant-detail-hero {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 62%, transparent);
  border-top: 4px solid var(--kmp-color-outline, var(--muted));
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.tenant-detail-hero.is-active {
  border-top-color: var(--success);
}

.tenant-detail-hero.is-initialized,
.tenant-detail-hero.is-provisioning,
.tenant-detail-hero.is-requested {
  border-top-color: var(--warning, #b45309);
}

.tenant-detail-hero.is-failed,
.tenant-detail-hero.is-suspended {
  border-top-color: var(--kmp-color-error, var(--danger));
}

.tenant-detail-hero__title-block {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.tenant-detail-hero__eyebrow {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}

.tenant-detail-hero__title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 24px;
  line-height: 30px;
  font-weight: 850;
}

.tenant-detail-hero__domain {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-primary, var(--primary));
  font: 700 13px/18px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.tenant-detail-hero__meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tenant-detail-pill {
  max-width: 260px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
  font-weight: 750;
}

.tenant-detail-pill > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-detail-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.tenant-detail-metric {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 58%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.tenant-detail-metric__icon {
  grid-row: 1 / 4;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 10%, transparent);
  color: var(--kmp-color-primary, var(--primary));
}

.tenant-detail-metric.is-activity .tenant-detail-metric__icon {
  background: color-mix(in srgb, #0f766e 10%, transparent);
  color: #0f766e;
}

.tenant-detail-metric.is-storage .tenant-detail-metric__icon,
.tenant-detail-metric.is-disk .tenant-detail-metric__icon {
  background: color-mix(in srgb, #475569 10%, transparent);
  color: #475569;
}

.tenant-detail-metric__label,
.tenant-detail-metric__detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 750;
}

.tenant-detail-metric__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 18px;
  line-height: 24px;
  font-weight: 850;
}

.tenant-detail-section {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 62%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.tenant-detail-section__header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tenant-detail-section__header.is-compact {
  padding-top: 2px;
}

.tenant-detail-section__title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 16px;
  line-height: 22px;
  font-weight: 850;
}

.tenant-detail-section__meta {
  flex: 0 0 auto;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
  font-weight: 750;
}

.tenant-detail-type-list {
  display: grid;
  gap: 7px;
}

.tenant-detail-type-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(120px, 1.6fr) minmax(52px, auto);
  align-items: center;
  gap: 10px;
}

.tenant-detail-type-row__label,
.tenant-detail-type-row__count {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
  font-weight: 750;
}

.tenant-detail-type-row__count {
  text-align: right;
}

.tenant-detail-type-row__bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.tenant-detail-type-row__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--kmp-color-primary, var(--primary)), #0f766e);
}

.tenant-detail-collection-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  align-items: start;
  gap: 12px;
}

.tenant-detail-collection {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 66%, transparent);
  border-left: 4px solid var(--kmp-color-outline, var(--muted));
  border-radius: 8px;
  background: color-mix(in srgb, var(--kmp-color-surface, var(--surface)) 92%, white);
}

.tenant-detail-collection.is-ready {
  border-left-color: var(--success);
}

.tenant-detail-collection.is-missing {
  border-left-color: var(--warning, #b45309);
}

.tenant-detail-collection__header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.tenant-detail-collection__title-block {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tenant-detail-collection__role {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}

.tenant-detail-collection__name {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 15px;
  line-height: 20px;
  font-weight: 850;
}

.tenant-detail-collection__status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 850;
}

.tenant-detail-collection.is-ready .tenant-detail-collection__status {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.tenant-detail-collection__error {
  padding: 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 7%, transparent);
  color: var(--kmp-color-error, var(--danger));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
}

.tenant-detail-collection__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tenant-detail-fact {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 7px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.tenant-detail-fact__label,
.tenant-detail-fact__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-detail-fact__label {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 750;
}

.tenant-detail-fact__value {
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
  font-weight: 800;
}

.tenant-detail-indexes {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.tenant-detail-index-table {
  min-width: 0;
  overflow-x: auto;
  display: grid;
  gap: 1px;
}

.tenant-detail-index-row {
  min-width: 520px;
  display: grid;
  grid-template-columns: minmax(130px, 1.2fr) minmax(220px, 2fr) 64px 88px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 54%, transparent);
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
}

.tenant-detail-index-row.is-header {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 850;
}

.tenant-detail-index-row__name,
.tenant-detail-index-row__key,
.tenant-detail-index-row__since,
.tenant-detail-index-row__flags {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-detail-index-row__key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.tenant-detail-index-row__flags {
  grid-column: 2 / 5;
  color: var(--kmp-color-primary, var(--primary));
  font-size: var(--kmp-typo-label-small-size, 11px);
}

.tenant-detail-activity-list {
  display: grid;
  gap: 8px;
}

.tenant-detail-activity-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 58%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--kmp-color-surface, var(--surface)) 94%, white);
}

.tenant-detail-activity-row__dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--kmp-color-primary, var(--primary));
}

.tenant-detail-activity-row__main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tenant-detail-activity-row__name,
.tenant-detail-activity-row__target {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-detail-activity-row__name {
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-medium-size, 14px);
  line-height: 18px;
  font-weight: 800;
}

.tenant-detail-activity-row__target,
.tenant-detail-activity-row__meta {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
}

.tenant-detail-activity-row__meta {
  min-width: 180px;
  display: grid;
  justify-items: end;
  gap: 2px;
  font-weight: 650;
}

.tenant-detail-activity-row__meta > span {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-detail-activity-row__details {
  grid-column: 2 / 4;
  max-height: 160px;
  overflow: auto;
  margin: 0;
  padding: 8px;
  border-radius: 7px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font: 500 11px/15px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

.tenant-detail-empty,
.tenant-detail-state {
  min-height: 88px;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 74%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-medium-size, 14px);
  line-height: 20px;
  text-align: center;
}

.tenant-detail-state.is-error {
  color: var(--kmp-color-error, var(--danger));
  border-color: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 38%, transparent);
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 6%, var(--kmp-color-surface, var(--surface)));
}

@media (max-width: 1100px) {
  .tenant-detail-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tenant-detail-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .tenant-detail-hero__meta {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .tenant-detail-fragment {
    padding: 12px;
  }

  .tenant-detail-metrics,
  .tenant-detail-collection-list {
    grid-template-columns: 1fr;
  }

  .tenant-detail-collection__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tenant-detail-type-row {
    grid-template-columns: minmax(0, 1fr) 68px;
  }

  .tenant-detail-type-row__bar {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .tenant-detail-activity-row {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .tenant-detail-activity-row__meta {
    grid-column: 2;
    min-width: 0;
    justify-items: start;
  }

  .tenant-detail-activity-row__details {
    grid-column: 2;
  }
}

.center-entity-card {
  min-width: 0;
}

.center-entity-card.has-logo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.center-entity-card__logo {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
  border: 1px solid var(--kmp-color-outline-variant, var(--border));
}

.center-entity-card__body {
  min-width: 0;
}

.center-entity-card__title,
.center-entity-card__subtitle,
.center-entity-card__status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tenant release action + popup. */
.tenant-release-action,
button.tenant-release-action.m3-icon-button {
  color: var(--kmp-color-primary, var(--primary));
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 7%, transparent);
}

.mc-popup-editor-list-view__row-tools .tenant-release-action,
.mc-grid-view__card-actions .tenant-release-action,
.mc-table-view__td--actions .tenant-release-action {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 0;
  border-radius: var(--kmp-shape-small, 8px);
}

.mc-popup-editor-list-view__row-tools .tenant-release-action:hover,
.mc-grid-view__card-actions .tenant-release-action:hover,
.mc-table-view__td--actions .tenant-release-action:hover,
button.tenant-release-action.m3-icon-button:hover {
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 10%, transparent);
  color: var(--kmp-color-primary, var(--primary));
}

.tenant-release-fragment {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}

.tenant-release-fragment__summary,
.tenant-release-fragment__panel {
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 72%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
  padding: 14px;
}

.tenant-release-fragment__eyebrow {
  margin-bottom: 6px;
  color: var(--kmp-color-primary, var(--primary));
  font-size: var(--kmp-typo-label-small-size, 11px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tenant-release-fragment__tenant {
  margin: 0 0 12px;
  font-size: var(--kmp-typo-title-large-size, 20px);
  line-height: var(--kmp-typo-title-large-line-height, 28px);
}

.tenant-release-fragment__meta-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.32fr) minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 54%, transparent);
}

.tenant-release-fragment__meta-label {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-weight: 650;
}

.tenant-release-fragment__meta-value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.tenant-release-fragment__steps {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
}

.tenant-release-fragment__step {
  min-width: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 68%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.tenant-release-fragment__step.is-active {
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 46%, transparent);
  color: var(--kmp-color-primary, var(--primary));
}

.tenant-release-fragment__step.is-done {
  color: var(--success);
}

.tenant-release-fragment__step.is-error {
  color: var(--kmp-color-error, var(--danger));
}

.tenant-release-fragment__step-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}

.tenant-release-fragment__step.is-pending .tenant-release-fragment__step-icon::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 999px;
  opacity: 0.55;
}

.tenant-release-fragment__step-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.tenant-release-fragment__panel {
  display: grid;
  gap: 12px;
}

.tenant-release-fragment__panel.is-success {
  border-color: color-mix(in srgb, var(--success) 42%, var(--kmp-color-outline, var(--line)));
}

.tenant-release-fragment__panel.is-error {
  border-color: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 42%, var(--kmp-color-outline, var(--line)));
}

.tenant-release-fragment__panel-title {
  margin: 0;
  font-size: var(--kmp-typo-title-medium-size, 16px);
}

.tenant-release-fragment__release {
  justify-self: start;
}

.tenant-release-fragment__release,
.tenant-release-fragment__actions .mc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tenant-release-fragment__status,
.tenant-release-fragment__hint {
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.tenant-release-fragment__hint {
  margin: 0;
}

.tenant-release-fragment__hint.is-error {
  color: var(--kmp-color-error, var(--danger));
}

.tenant-release-fragment__progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.tenant-release-fragment__progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--kmp-color-primary, var(--primary));
  transition: width 180ms ease;
}

.tenant-release-fragment__section-heading,
.tenant-release-fragment__menupoint-header,
.tenant-release-fragment__content-row-header,
.tenant-release-fragment__status-group-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tenant-release-fragment__preview-health {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  font-weight: 750;
}

.tenant-release-fragment__preview-health.is-ready {
  background: color-mix(in srgb, var(--success) 11%, transparent);
  color: var(--success);
}

.tenant-release-fragment__preview-health.is-warnings,
.tenant-release-fragment__preview-health.is-review {
  background: color-mix(in srgb, #b45309 12%, transparent);
  color: #92400e;
}

.tenant-release-fragment__summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tenant-release-fragment__summary-card {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 58%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.tenant-release-fragment__summary-label {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  font-weight: 750;
}

.tenant-release-fragment__summary-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 20px;
  line-height: 1.2;
}

.tenant-release-fragment__summary-text {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
}

.tenant-release-fragment__status-counts,
.tenant-release-fragment__chips {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tenant-release-fragment__status-pill,
.tenant-release-fragment__chip {
  max-width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.tenant-release-fragment__status-pill.is-static {
  color: var(--success);
}

.tenant-release-fragment__status-pill.is-static-snapshot {
  color: var(--kmp-color-primary, var(--primary));
}

.tenant-release-fragment__status-pill.is-mixed {
  color: #b45309;
}

.tenant-release-fragment__status-pill.is-dynamic {
  color: var(--kmp-color-error, var(--danger));
}

.tenant-release-fragment__status-pill.is-skipped {
  color: var(--kmp-color-outline, var(--muted));
}

.tenant-release-fragment__subsection {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.tenant-release-fragment__subheading {
  margin: 4px 0 0;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-title-small-size, 14px);
  line-height: 1.35;
}

.tenant-release-fragment__note-list,
.tenant-release-fragment__warning-list,
.tenant-release-fragment__hint-list {
  margin: 0;
  padding-left: 18px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.tenant-release-fragment__warning-list {
  color: #92400e;
}

.tenant-release-fragment__status-group {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding-top: 4px;
}

.tenant-release-fragment__status-group-title {
  justify-content: flex-start;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-weight: 700;
}

.tenant-release-fragment__menupoint-card,
.tenant-release-fragment__content-row {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 60%, transparent);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
}

.tenant-release-fragment__menupoint-card.is-static,
.tenant-release-fragment__content-row.is-static {
  border-left-color: var(--success);
}

.tenant-release-fragment__menupoint-card.is-static-snapshot,
.tenant-release-fragment__content-row.is-static-snapshot {
  border-left-color: var(--kmp-color-primary, var(--primary));
}

.tenant-release-fragment__menupoint-card.is-mixed,
.tenant-release-fragment__content-row.is-mixed {
  border-left-color: #b45309;
}

.tenant-release-fragment__menupoint-card.is-dynamic,
.tenant-release-fragment__content-row.is-dynamic {
  border-left-color: var(--kmp-color-error, var(--danger));
}

.tenant-release-fragment__menupoint-card.is-skipped,
.tenant-release-fragment__content-row.is-skipped {
  border-left-color: var(--kmp-color-outline, var(--muted));
}

.tenant-release-fragment__menupoint-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--kmp-typo-title-small-size, 14px);
}

.tenant-release-fragment__route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tenant-release-fragment__route-cell {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tenant-release-fragment__route-label,
.tenant-release-fragment__content-title {
  margin: 0;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  font-weight: 750;
}

.tenant-release-fragment__route-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 12px;
}

.tenant-release-fragment__reason {
  margin: 0;
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.tenant-release-fragment__content-preview,
.tenant-release-fragment__content-list,
.tenant-release-fragment__text-list {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.tenant-release-fragment__release-summary {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.tenant-release-fragment__release-files {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 58%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
}

.tenant-release-fragment__export-page-list {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.tenant-release-fragment__export-page {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(72px, 160px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 54%, transparent);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
}

.tenant-release-fragment__export-page.is-ok {
  border-left-color: var(--success);
}

.tenant-release-fragment__export-page.is-error {
  border-left-color: var(--kmp-color-error, var(--danger));
}

.tenant-release-fragment__export-page-url,
.tenant-release-fragment__export-page-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-release-fragment__export-page-meta {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
}

.tenant-release-fragment__details {
  max-width: 100%;
}

.tenant-release-fragment__details summary {
  cursor: pointer;
  color: var(--kmp-color-primary, var(--primary));
  font-weight: 700;
}

.tenant-release-fragment__details pre,
.tenant-release-fragment__error-detail {
  max-height: 220px;
  margin: 4px 0 0;
  overflow: auto;
  padding: 10px;
  border-radius: 8px;
  background: #111827;
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.45;
}

.tenant-release-fragment__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Nginx configuration refresh popup. */
.nginx-refresh-fragment {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}

.nginx-refresh-fragment__summary,
.nginx-refresh-fragment__panel {
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 72%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
  padding: 14px;
}

.nginx-refresh-fragment__eyebrow {
  margin-bottom: 6px;
  color: var(--kmp-color-primary, var(--primary));
  font-size: var(--kmp-typo-label-small-size, 11px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nginx-refresh-fragment__title,
.nginx-refresh-fragment__panel-title {
  margin: 0 0 8px;
  color: var(--kmp-color-on-surface, var(--text));
  font-weight: 800;
}

.nginx-refresh-fragment__title {
  font-size: var(--kmp-typo-title-large-size, 20px);
  line-height: var(--kmp-typo-title-large-line-height, 28px);
}

.nginx-refresh-fragment__panel-title {
  font-size: var(--kmp-typo-title-medium-size, 16px);
  line-height: 22px;
}

.nginx-refresh-fragment__text {
  margin: 0;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-medium-size, 14px);
  line-height: 20px;
}

.nginx-refresh-fragment__text.is-error {
  color: var(--kmp-color-error, var(--danger));
}

.nginx-refresh-fragment__panel {
  display: grid;
  gap: 12px;
}

.nginx-refresh-fragment__panel.is-succeeded,
.nginx-refresh-fragment__panel.is-success {
  border-color: color-mix(in srgb, var(--success) 36%, var(--kmp-color-outline, var(--line)));
}

.nginx-refresh-fragment__panel.is-skipped {
  border-color: color-mix(in srgb, var(--warning, #b45309) 36%, var(--kmp-color-outline, var(--line)));
}

.nginx-refresh-fragment__panel.is-failed {
  border-color: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 42%, var(--kmp-color-outline, var(--line)));
}

.nginx-refresh-fragment__status {
  color: var(--kmp-color-on-surface, var(--text));
  font-weight: 750;
}

.nginx-refresh-fragment__progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 10%, var(--kmp-color-surface-container, #eef2f7));
}

.nginx-refresh-fragment__progress-bar {
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--kmp-color-primary, var(--primary));
  animation: nginx-refresh-progress 1.1s ease-in-out infinite;
}

@keyframes nginx-refresh-progress {
  0% {
    transform: translateX(-115%);
  }

  100% {
    transform: translateX(260%);
  }
}

.nginx-refresh-fragment__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.nginx-refresh-fragment__card {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 64%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--kmp-color-surface-container-lowest, var(--surface)) 86%, var(--kmp-color-surface-container, var(--bg)));
}

.nginx-refresh-fragment__card-label,
.nginx-refresh-fragment__card-detail {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 15px;
}

.nginx-refresh-fragment__card-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-medium-size, 14px);
  line-height: 20px;
}

.nginx-refresh-fragment__subsection {
  display: grid;
  gap: 8px;
}

.nginx-refresh-fragment__subheading {
  margin: 0;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-title-small-size, 14px);
  line-height: 20px;
  font-weight: 800;
}

.nginx-refresh-fragment__tenant-list {
  display: grid;
  gap: 8px;
}

.nginx-refresh-fragment__tenant-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(140px, 0.35fr) minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 64%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface-container-lowest, var(--surface));
}

.nginx-refresh-fragment__tenant-title,
.nginx-refresh-fragment__tenant-domains,
.nginx-refresh-fragment__tenant-root {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nginx-refresh-fragment__tenant-title {
  color: var(--kmp-color-on-surface, var(--text));
}

.nginx-refresh-fragment__tenant-domains,
.nginx-refresh-fragment__tenant-root {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
}

.nginx-refresh-fragment__details {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 64%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface-container-lowest, var(--surface));
}

.nginx-refresh-fragment__details > summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--kmp-color-primary, var(--primary));
  font-weight: 750;
}

.nginx-refresh-fragment__details pre,
.nginx-refresh-fragment__error {
  margin: 0;
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  border-radius: 0 0 8px 8px;
  background: #0f172a;
  color: #e5edf7;
  font-size: 12px;
  line-height: 17px;
}

.nginx-refresh-fragment__error {
  border-radius: 8px;
}

.nginx-refresh-fragment__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

@media (max-width: 760px) {
  .dashboard-fragment__header,
  .dashboard-fragment__actions {
    align-items: stretch;
  }

  .dashboard-fragment__header {
    flex-direction: column;
  }

  .dashboard-fragment__actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .nginx-refresh-fragment__tenant-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* Tenant provisioning wizard. */
.tenant-provisioning-wizard {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}

.tenant-provisioning-wizard__hero,
.tenant-provisioning-wizard__panel {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 70%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
  padding: 14px;
}

.tenant-provisioning-wizard__hero {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 8%, var(--kmp-color-surface, var(--surface))) 0%,
      var(--kmp-color-surface, var(--surface)) 78%);
}

.tenant-provisioning-wizard__hero-icon,
.tenant-provisioning-wizard__step-icon,
.tenant-provisioning-wizard__plan-icon,
.tenant-provisioning-wizard__run-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.tenant-provisioning-wizard__hero-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 12%, transparent);
  color: var(--kmp-color-primary, var(--primary));
}

.tenant-provisioning-wizard__hero-text {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.tenant-provisioning-wizard__eyebrow {
  color: var(--kmp-color-primary, var(--primary));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}

.tenant-provisioning-wizard__title {
  margin: 0;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 22px;
  line-height: 28px;
  font-weight: 850;
}

.tenant-provisioning-wizard__lead,
.tenant-provisioning-wizard__hint {
  margin: 0;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-medium-size, 14px);
  line-height: 20px;
}

.tenant-provisioning-wizard__hint.is-error {
  color: var(--kmp-color-error, var(--danger));
}

.tenant-provisioning-wizard__steps {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
}

.tenant-provisioning-wizard__step {
  min-width: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 68%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-weight: 750;
}

.tenant-provisioning-wizard__step > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-provisioning-wizard__step-icon {
  width: 20px;
  height: 20px;
}

.tenant-provisioning-wizard__step.is-active {
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 42%, transparent);
  color: var(--kmp-color-primary, var(--primary));
}

.tenant-provisioning-wizard__step.is-done {
  color: var(--success);
}

.tenant-provisioning-wizard__step.is-error {
  color: var(--kmp-color-error, var(--danger));
}

.tenant-provisioning-wizard__panel {
  display: grid;
  gap: 14px;
}

.tenant-provisioning-wizard__panel.is-success {
  border-color: color-mix(in srgb, var(--success) 42%, var(--kmp-color-outline, var(--line)));
}

.tenant-provisioning-wizard__panel.is-error {
  border-color: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 42%, var(--kmp-color-outline, var(--line)));
}

.tenant-provisioning-wizard__panel-title {
  margin: 0;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-title-medium-size, 16px);
  line-height: 22px;
  font-weight: 850;
}

.tenant-provisioning-wizard__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tenant-provisioning-wizard__field {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  line-height: 16px;
  font-weight: 750;
}

.tenant-provisioning-wizard__field input {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 78%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  padding: 0 11px;
  font: inherit;
  font-weight: 650;
}

.tenant-provisioning-wizard__field.is-mono input,
.tenant-provisioning-wizard__plan-value,
.tenant-provisioning-wizard__plan-detail,
.tenant-provisioning-wizard__summary-item strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.tenant-provisioning-wizard__field input:focus {
  outline: 2px solid color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 28%, transparent);
  border-color: var(--kmp-color-primary, var(--primary));
}

.tenant-provisioning-wizard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tenant-provisioning-wizard__actions .mc-button {
  gap: 8px;
}

.tenant-provisioning-wizard__plan-grid,
.tenant-provisioning-wizard__summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tenant-provisioning-wizard__plan-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 60%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.tenant-provisioning-wizard__plan-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 9%, transparent);
  color: var(--kmp-color-primary, var(--primary));
}

.tenant-provisioning-wizard__plan-card-body,
.tenant-provisioning-wizard__checklist,
.tenant-provisioning-wizard__checklist-items,
.tenant-provisioning-wizard__run-steps {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.tenant-provisioning-wizard__plan-label,
.tenant-provisioning-wizard__summary-item span {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: 14px;
  font-weight: 800;
}

.tenant-provisioning-wizard__plan-value,
.tenant-provisioning-wizard__plan-detail,
.tenant-provisioning-wizard__summary-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tenant-provisioning-wizard__plan-value {
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 14px;
  line-height: 18px;
}

.tenant-provisioning-wizard__plan-detail {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 12px;
  line-height: 16px;
}

.tenant-provisioning-wizard__checklist {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 58%, transparent);
  border-radius: 8px;
}

.tenant-provisioning-wizard__checklist h4 {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.tenant-provisioning-wizard__checklist-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
}

.tenant-provisioning-wizard__checklist-row svg {
  color: var(--success);
}

.tenant-provisioning-wizard__progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.tenant-provisioning-wizard__progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--kmp-color-primary, var(--primary)), var(--success));
  transition: width 180ms ease;
}

.tenant-provisioning-wizard__run-step {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 58%, transparent);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--kmp-color-surface, var(--surface));
}

.tenant-provisioning-wizard__run-step.is-succeeded {
  border-left-color: var(--success);
}

.tenant-provisioning-wizard__run-step.is-running {
  border-left-color: var(--kmp-color-primary, var(--primary));
}

.tenant-provisioning-wizard__run-step.is-failed {
  border-left-color: var(--kmp-color-error, var(--danger));
}

.tenant-provisioning-wizard__run-step-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.tenant-provisioning-wizard__run-step.is-succeeded .tenant-provisioning-wizard__run-step-icon {
  color: var(--success);
}

.tenant-provisioning-wizard__run-step.is-running .tenant-provisioning-wizard__run-step-icon {
  color: var(--kmp-color-primary, var(--primary));
}

.tenant-provisioning-wizard__run-step.is-failed .tenant-provisioning-wizard__run-step-icon {
  color: var(--kmp-color-error, var(--danger));
}

.tenant-provisioning-wizard__run-step-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tenant-provisioning-wizard__run-step-body strong,
.tenant-provisioning-wizard__run-step-body span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tenant-provisioning-wizard__run-step-body strong {
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-medium-size, 14px);
  line-height: 18px;
}

.tenant-provisioning-wizard__run-step-body span {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 16px;
}

.tenant-provisioning-wizard__summary-item {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 58%, transparent);
  border-radius: 8px;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.tenant-provisioning-wizard__summary-item strong {
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 13px;
  line-height: 18px;
}

.tenant-provisioning-wizard__error-detail {
  max-height: 220px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  border-radius: 8px;
  background: #111827;
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.45;
}

.mc-button:disabled,
.mc-icon-button:disabled,
.m3-icon-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Narrow-screen behavior ──────────────────────────────────────────── */

@media (max-width: 720px) {
  .kmp-shell-row {
    padding: 8px;
    gap: 8px;
  }

  /* Force the docked drawer to float on narrow screens — there isn't
   * room for both side-by-side. The user can still pin, the floating
   * presentation just takes priority below this breakpoint. */
  .kmp-shell-row.has-docked-drawer .kmp-drawer-slot {
    display: none;
  }

  .kmp-floating-drawer-surface {
    width: min(86vw, var(--kmp-drawer-width));
  }

  .topbar-action-label {
    display: none;
  }

  .tenant-release-fragment {
    padding: 12px;
  }

  .tenant-release-fragment__summary-grid,
  .tenant-release-fragment__route-grid {
    grid-template-columns: 1fr;
  }

  .tenant-release-fragment__steps {
    grid-template-columns: 1fr;
  }

  .tenant-provisioning-wizard {
    padding: 12px;
  }

  .tenant-provisioning-wizard__hero,
  .tenant-provisioning-wizard__form,
  .tenant-provisioning-wizard__plan-grid,
  .tenant-provisioning-wizard__summary-grid,
  .tenant-provisioning-wizard__steps {
    grid-template-columns: 1fr;
  }

  .tenant-release-fragment__section-heading,
  .tenant-release-fragment__menupoint-header,
  .tenant-release-fragment__content-row-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── Step 02 message panel + SSE status ─────────────────────────────── */

/* Mirror values from kmp_core/src/commonMain/kotlin/fw/general/messaging/ui/MessagePanel.kt.
 * These should migrate into a shared AppPalette/AppShapes token file once
 * the broader theme installer lands; until then they live here directly. */
:root {
  --kmp-message-panel-width: 320px;
  --kmp-message-panel-radius: 12px;
  --kmp-message-card-radius: 8px;
  --kmp-message-accent-info: #1976D2;
  --kmp-message-accent-success: #388E3C;
  --kmp-message-accent-warning: #E65100;
  --kmp-message-accent-error: #C62828;
}

/* Docked slot — third column in the shell row, right of the content surface. */
.kmp-message-panel-slot {
  flex: 0 0 auto;
  display: contents;
}

.kmp-shell-row.has-docked-message-panel .kmp-message-panel-slot {
  display: block;
  flex: 0 0 var(--kmp-message-panel-width);
}

/* Floating overlay scrim + slot. */
.kmp-overlay-layer.kmp-message-panel-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: auto;
}

.kmp-message-panel-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

.kmp-message-panel-floating-slot {
  width: var(--kmp-message-panel-width);
  max-width: 88vw;
  height: 100%;
}

/* The MessagePanel surface itself. */
.kmp-message-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: var(--kmp-message-panel-width);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--kmp-message-panel-radius);
  overflow: hidden;
}

.kmp-message-panel.is-floating {
  border-radius: var(--kmp-message-panel-radius) 0 0 var(--kmp-message-panel-radius);
  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.18);
}

.kmp-message-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.kmp-message-panel-title {
  flex: 1;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.kmp-message-panel-unread {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: var(--primary);
  border-radius: 11px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kmp-message-panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px;
}

.kmp-message-panel-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Message list + cards. */
.kmp-message-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kmp-message-list-item {
  margin: 0;
  padding: 0;
}

.kmp-message-card {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  border-radius: var(--kmp-message-card-radius);
  background: var(--surface);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms ease;
}

.kmp-message-card.is-unread {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.kmp-message-card:hover {
  background: var(--surface-2);
}

.kmp-message-card-accent {
  flex: 0 0 4px;
  width: 4px;
  min-height: 40px;
  border-radius: 2px;
  background: var(--kmp-message-accent-info);
}

.kmp-message-card.is-info .kmp-message-card-accent {
  background: var(--kmp-message-accent-info);
}

.kmp-message-card.is-success .kmp-message-card-accent {
  background: var(--kmp-message-accent-success);
}

.kmp-message-card.is-warning .kmp-message-card-accent {
  background: var(--kmp-message-accent-warning);
}

.kmp-message-card.is-error .kmp-message-card-accent {
  background: var(--kmp-message-accent-error);
}

.kmp-message-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kmp-message-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kmp-message-card-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kmp-message-card.is-read .kmp-message-card-title {
  font-weight: 500;
  color: var(--muted);
}

.kmp-message-card-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kmp-message-accent-info);
}

.kmp-message-card.is-success .kmp-message-card-dot {
  background: var(--kmp-message-accent-success);
}

.kmp-message-card.is-warning .kmp-message-card-dot {
  background: var(--kmp-message-accent-warning);
}

.kmp-message-card.is-error .kmp-message-card-dot {
  background: var(--kmp-message-accent-error);
}

.kmp-message-card-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kmp-message-card-ts {
  font-size: 11px;
  color: var(--muted);
}

/* Topbar badge for the messages icon. */
.topbar-action.message-action {
  position: relative;
}

.kmp-topbar-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--kmp-message-accent-error);
  color: white;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border: 1px solid var(--surface);
}

/* SSE status view (debug surface, mounted via AppOverlayHosts). */
.kmp-sse-status-slot {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 90;
  pointer-events: auto;
  max-width: 360px;
}

.sse-status-view {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--kmp-message-card-radius);
  padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.16);
  font-size: 12px;
  color: var(--text);
}

.sse-status-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.sse-status-name {
  font-weight: 700;
}

.sse-status-state {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sse-status-view.state-idle .sse-status-state {
  color: var(--muted);
}

.sse-status-view.state-connecting .sse-status-state {
  color: var(--kmp-message-accent-warning);
}

.sse-status-view.state-connected .sse-status-state {
  color: var(--kmp-message-accent-success);
}

.sse-status-view.state-error .sse-status-state {
  color: var(--kmp-message-accent-error);
}

.sse-status-facts {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 4px 8px;
  margin: 0;
}

.sse-status-facts dt {
  color: var(--muted);
}

.sse-status-facts dd {
  margin: 0;
  word-break: break-all;
}

.sse-status-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

/* Narrow-screen behavior for the message panel. */
@media (max-width: 720px) {
  .kmp-shell-row.has-docked-message-panel .kmp-message-panel-slot {
    display: none;
  }

  .kmp-message-panel-floating-slot {
    width: min(92vw, var(--kmp-message-panel-width));
  }
}

/* ── Step 03 theme palette + density tokens ──────────────────────────── */

/* Semantic aliases so future code can use the names from the porting plan
 * without breaking existing rules that still reference --bg / --line. */
:root {
  --app-bg: var(--bg);
  --border: var(--line);
  --warning: var(--gold);
  --success: var(--green);

  /* Form-style density variables — App.js writes per-preset values from
   * FormFieldDefaults.preset() onto document.documentElement. The
   * fallbacks below match the DEFAULT preset so unstyled consumers
   * still pick up sensible numbers. */
  --kmp-form-control-height: 36px;
  --kmp-form-row-gap: 8px;
  --kmp-form-section-gap: 20px;
  --kmp-form-label-size: 12px;
  --kmp-form-value-size: 14px;
}

/* Dark-mode palette swap. The light values keep the existing prototype
 * tokens; the dark side swaps surfaces/text/border to a low-glare set
 * that still reads against the message-panel + settings chrome. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1419;
  --surface: #161c24;
  --surface-2: #1d242c;
  --surface-3: #232c36;
  --text: #e5edf6;
  --muted: #8a9bae;
  --line: #283442;
  --primary: #7DBBFF;
  --primary-dark: #4B9BEA;
  --danger: #ef6b58;
  --danger-bg: #3b1f1c;
  --gold: #d8a23f;
  --green: #5cb46c;
  --blue: #7DBBFF;
  --app-bg: var(--bg);
  --border: var(--line);
  --warning: var(--gold);
  --success: var(--green);
}

/* ── Settings menu surfaces ──────────────────────────────────────────── */

.settings-menu-fragment {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.settings-menu-content {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-content: start;
  align-items: start;
  gap: 28px 40px;
  padding: 20px 24px 32px;
  width: 100%;
  max-width: none;
  overflow: auto;
}

.settings-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kmp-form-row-gap);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.settings-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.settings-section-title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(128px, 1fr) minmax(0, auto);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--kmp-form-control-height);
}

.settings-row-label {
  font-size: var(--kmp-form-value-size);
  color: var(--text);
}

.settings-row-control {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.settings-row--wide-control {
  grid-template-columns: minmax(148px, 220px) minmax(0, 1fr);
}

.settings-row--wide-control .settings-row-control {
  justify-content: stretch;
}

.settings-text-setting {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 760px;
}

.settings-text-input {
  min-width: 0;
  flex: 1 1 auto;
  height: var(--kmp-form-control-height);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
}

.settings-small-button {
  height: var(--kmp-form-control-height);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  cursor: pointer;
}

.settings-small-button:hover {
  background: var(--surface-2);
}

/* Segmented control */
.segmented-control {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.segmented-control-option {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--kmp-form-label-size);
  font-weight: 600;
  padding: 0 12px;
  height: var(--kmp-form-control-height);
  cursor: pointer;
  border-right: 1px solid var(--border);
}

.segmented-control-option:last-child {
  border-right: 0;
}

.segmented-control-option:hover {
  background: var(--surface-2);
  color: var(--text);
}

.segmented-control-option.is-selected {
  background: var(--primary);
  color: white;
}

/* Toggle (iOS-style) */
.settings-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.settings-toggle input {
  appearance: none;
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.settings-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 120ms ease;
}

.settings-toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  transition: transform 120ms ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.settings-toggle input:checked + .settings-toggle-slider {
  background: var(--primary);
}

.settings-toggle input:checked + .settings-toggle-slider::before {
  transform: translateX(20px);
}

/* Checkbox row */
.settings-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.settings-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kmp-form-value-size);
  color: var(--text);
  cursor: pointer;
}

.settings-checkbox input {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}

@media (max-width: 720px) {
  .settings-menu-content {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 22px;
  }

  .settings-row,
  .settings-row--wide-control {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

  .settings-row-control,
  .settings-row--wide-control .settings-row-control {
    justify-content: flex-start;
    width: 100%;
  }

  .settings-text-setting {
    max-width: none;
  }
}

.settings-readonly-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  word-break: break-all;
}

/* ── FragmentView (impl__16) ──────────────────────────────────────── */
/* Class names are stable across the port. CSS values consume
   --kmp-* tokens when present (Step 63 token installer) and fall back
   to the prototype variables until the token files land. */

.fragment-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
}

.fragment-view__title-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--kmp-color-surface-container, var(--surface-2));
  border-bottom: 1px solid var(--kmp-color-outline, var(--line));
}

.fragment-view__title {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--kmp-typo-title-medium-size, 16px);
  line-height: var(--kmp-typo-title-medium-line-height, 22px);
  font-weight: var(--kmp-typo-title-medium-weight, 600);
  color: var(--kmp-color-on-surface, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fragment-view__subtitle {
  flex: 0 0 auto;
  font-size: var(--kmp-typo-body-small-size, 12px);
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.fragment-view__title-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fragment-view__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--kmp-shape-extra-small, 4px);
  background: transparent;
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
}

.fragment-view__action:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.fragment-view__action.is-primary {
  background: var(--kmp-color-primary, var(--primary));
  color: var(--kmp-color-on-primary, #fff);
}

.fragment-view__action.is-destructive {
  color: var(--kmp-color-error, var(--danger));
}

.fragment-view__content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.fragment-view__content:has(.mc-table-view) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Document Details JSON inspector — Kotlin parity:
   • engineering-paper background (cream + faint blue grid),
   • 16 dp padding around a monospaced textarea that fills 100%
     of the remaining content area. Save/Delete are not rendered
     here; the host's title bar renders them via titleBarActions().
*/
.fragment-view__content:has(.document-details-panel) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.document-details-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  padding: 16px;
  background-color: #F7F5EC;
  background-image:
    repeating-linear-gradient(to right,  rgba(21, 101, 192, 0.22) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(21, 101, 192, 0.22) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to right,  rgba(21, 101, 192, 0.10) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, rgba(21, 101, 192, 0.10) 0 1px, transparent 1px 8px);
  background-position: 0 0;
}

.document-details-panel__progress {
  flex: 0 0 auto;
  height: 4px;
  border-radius: 2px;
  background:
    linear-gradient(90deg,
      var(--kmp-color-primary, var(--primary)) 0%,
      var(--kmp-color-primary, var(--primary)) 40%,
      transparent 40%, transparent 100%)
    var(--kmp-color-surface-container, var(--surface-2));
  background-size: 250% 100%;
  animation: document-details-progress 1.1s linear infinite;
}

@keyframes document-details-progress {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.document-details-panel__error {
  flex: 0 0 auto;
  color: var(--kmp-color-error, var(--danger));
  font-size: 12px;
  line-height: 16px;
  padding: 6px 10px;
  border: 1px solid var(--kmp-color-error, var(--danger));
  border-radius: var(--kmp-shape-extra-small, 4px);
  background: rgba(176, 0, 32, 0.06);
}

.document-details-panel__textarea {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin: 0;
  resize: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 20px;
  color: var(--kmp-color-on-surface, var(--text));
  background: #ffffff;
  border: 1px solid var(--kmp-color-outline, var(--line));
  border-radius: var(--kmp-shape-extra-small, 4px);
  outline: none;
  white-space: pre;
  overflow: auto;
}

.document-details-panel__textarea:focus {
  border-color: var(--kmp-color-primary, var(--primary));
  box-shadow: 0 0 0 1px var(--kmp-color-primary, var(--primary));
}

.document-details-panel__textarea[disabled] {
  background: var(--kmp-color-surface-container, var(--surface-2));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  cursor: not-allowed;
}

.fragment-view__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fragment-view__spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--kmp-color-outline, var(--line));
  border-top-color: var(--kmp-color-primary, var(--primary));
  animation: fragment-view-spin 0.8s linear infinite;
}

@keyframes fragment-view-spin {
  to { transform: rotate(360deg); }
}

.fragment-view__error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  text-align: center;
}

.fragment-view__error-msg {
  margin: 0;
  font-size: var(--kmp-typo-body-large-size, 16px);
  color: var(--kmp-color-error, var(--danger));
}

.fragment-view__error-detail {
  margin: 0;
  font-size: var(--kmp-typo-body-small-size, 12px);
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.fragment-view__retry {
  margin-top: 8px;
  padding: 6px 16px;
  border: 1px solid var(--kmp-color-outline, var(--line));
  border-radius: var(--kmp-shape-small, 8px);
  background: transparent;
  cursor: pointer;
  color: var(--kmp-color-primary, var(--primary));
}

.fragment-view__footer {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-top: 1px solid var(--kmp-color-outline, var(--line));
  background: var(--kmp-color-surface-container, var(--surface-2));
}

.fragment-view__footer:empty {
  display: none;
}

/* ── OverlayTopBar (impl__16) ──────────────────────────────────────── */

.overlay-top-bar {
  display: block;
  width: 100%;
  padding: 12px 8px 8px 24px;
}

.overlay-top-bar__row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.overlay-top-bar__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--kmp-typo-title-large-size, 20px);
  line-height: var(--kmp-typo-title-large-line-height, 28px);
  font-weight: var(--kmp-typo-title-large-weight, 600);
  color: var(--kmp-color-on-surface, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overlay-top-bar__title-spacer {
  flex: 1 1 auto;
}

.overlay-top-bar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.overlay-top-bar__btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--kmp-shape-small, 8px);
  color: var(--kmp-color-on-surface-variant, var(--muted));
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.overlay-top-bar__btn:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.overlay-top-bar.is-ultra-narrow {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.overlay-top-bar.is-ultra-narrow .overlay-top-bar__actions {
  align-self: flex-end;
}

/* ── EditorBottomBar (impl__29) ────────────────────────────────────── */
/* Compact operational UI — token-aware, prototype fallbacks for now. */

.editor-bottom-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 64px;
  padding: 10px 24px;
  border-top: 1px solid var(--kmp-color-outline-variant, var(--line));
  background: var(--kmp-color-surface, var(--surface));
  flex: 0 0 auto;
}

.editor-bottom-bar__spacer {
  flex: 1 1 auto;
}

.editor-bottom-bar__cancel,
.editor-bottom-bar__save,
.editor-bottom-bar__extra,
.editor-bottom-bar .delete-button-with-confirmation__btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--kmp-shape-small, 8px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
  font-size: var(--kmp-typo-label-large-size, 14px);
  line-height: 20px;
  font-weight: 700;
}

.editor-bottom-bar__extra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.editor-bottom-bar__extra-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.editor-bottom-bar__extra-icon svg {
  display: block;
}

.editor-bottom-bar__extra.is-release {
  color: var(--kmp-color-primary, var(--primary));
}

.editor-bottom-bar__cancel:hover,
.editor-bottom-bar__extra:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.editor-bottom-bar__extra.is-release:hover {
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 10%, transparent);
}

.editor-bottom-bar__save.is-primary {
  min-width: 88px;
  background: var(--kmp-color-primary, var(--primary));
  color: var(--kmp-color-on-primary, #fff);
  border-color: transparent;
}

.editor-bottom-bar__save.is-primary:hover {
  background: var(--kmp-color-primary, var(--primary));
  filter: brightness(0.96);
}

.editor-bottom-bar__save.is-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.editor-bottom-bar__extra:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.editor-bottom-bar__extras {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.editor-bottom-bar__delete-host,
.editor-bottom-bar .delete-button-with-confirmation {
  display: inline-flex;
}

.editor-bottom-bar .delete-button-with-confirmation__btn.is-destructive {
  color: var(--kmp-color-error, var(--danger));
  border-color: transparent;
}

.editor-bottom-bar .delete-button-with-confirmation__btn.is-destructive:hover {
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 10%, transparent);
}

/* ── MCConfirmDialog ───────────────────────────────────────────────── */

.mc-confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-confirm-dialog__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
}

.mc-confirm-dialog__card {
  position: relative;
  z-index: 1;
  max-width: 420px;
  width: calc(100% - 32px);
  padding: 20px 24px;
  border-radius: var(--kmp-shape-medium, 12px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.mc-confirm-dialog__title {
  margin: 0 0 8px;
  font-size: var(--kmp-typo-title-medium-size, 16px);
  font-weight: var(--kmp-typo-title-medium-weight, 600);
}

.mc-confirm-dialog__message {
  margin: 0 0 20px;
  font-size: var(--kmp-typo-body-medium-size, 14px);
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.mc-confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mc-confirm-dialog__dismiss,
.mc-confirm-dialog__confirm {
  padding: 6px 14px;
  border-radius: var(--kmp-shape-small, 8px);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--kmp-color-primary, var(--primary));
  font-size: var(--kmp-typo-label-large-size, 14px);
}

.mc-confirm-dialog__confirm.is-destructive {
  color: var(--kmp-color-error, var(--danger));
}

.mc-confirm-dialog__dismiss:hover,
.mc-confirm-dialog__confirm:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

/* ── EditorErrorBanner ─────────────────────────────────────────────── */

.editor-error-banner {
  padding: 8px 16px;
  border-top: 1px solid var(--kmp-color-error, var(--danger));
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 8%, transparent);
  color: var(--kmp-color-error, var(--danger));
  font-size: var(--kmp-typo-body-small-size, 12px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.editor-error-banner__headline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.editor-error-banner__count {
  font-weight: 600;
}

.editor-error-banner__chip {
  padding: 2px 10px;
  border-radius: var(--kmp-shape-small, 8px);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.editor-error-banner__chip:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.editor-error-banner__form-errors {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.editor-error-banner__form-error {
  color: inherit;
}

/* -- Responsive editor ------------------------------------------------------
   Token-aware DOM equivalent of ResponsiveEditorView.kt's form surface.
   The fragment/popup owns the title bar; this layer owns the scrollable
   field body and stable bottom action bar geometry. */

.cssclass-editor-view,
.lookupvalue-editor-view,
.colorresource-editor-view,
.center-entity-editor-content,
.cssclass-editor-content,
.lookupvalue-editor-content,
.colorresource-editor-content {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.cssclass-editor-content,
.lookupvalue-editor-content,
.colorresource-editor-content,
.center-entity-editor-content {
  display: flex;
  flex-direction: column;
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
}

.mc-navigation-fragment .cssclass-editor-view,
.mc-navigation-fragment .lookupvalue-editor-view,
.mc-navigation-fragment .colorresource-editor-view,
.mc-navigation-fragment .cssclass-editor-content,
.mc-navigation-fragment .lookupvalue-editor-content,
.mc-navigation-fragment .colorresource-editor-content,
.mc-navigation-fragment .center-entity-editor-content {
  background: var(--kmp-pane-bg, var(--kmp-color-surface, var(--surface)));
}

.cssclass-editor-content__form,
.lookupvalue-editor-content__form,
.colorresource-editor-content__form,
.center-entity-editor-content__form {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.cssclass-editor-content__bottom,
.lookupvalue-editor-content__bottom,
.colorresource-editor-content__bottom,
.center-entity-editor-content__bottom {
  flex: 0 0 auto;
}

.mc-navigation-fragment .editor-bottom-bar {
  background: var(--kmp-color-surface, var(--surface));
}

.responsive-editor-view {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--kmp-form-section-gap, 20px);
}

.responsive-editor-view__section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 16px;
  align-items: start;
}

.responsive-editor-view__section-title {
  grid-column: 1 / -1;
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--kmp-color-outline, var(--line));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-title-small-size, 14px);
  line-height: var(--kmp-typo-title-small-line-height, 20px);
  font-weight: var(--kmp-typo-title-small-weight, 600);
  letter-spacing: 0;
}

.responsive-editor-view__field {
  min-width: 0;
}

.responsive-editor-view__field-debug {
  margin-top: 4px;
}

.field-view {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-view__label {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-form-label-size, 12px);
  line-height: 16px;
  font-weight: 650;
}

.field-view__body {
  min-width: 0;
}

.field-view__input,
.field-view__select,
.field-view__lookup-select,
.inline-field-editor__input {
  width: 100%;
  min-width: 0;
  min-height: var(--kmp-form-control-height, 36px);
  padding: 7px 10px;
  border: 1px solid var(--kmp-color-outline, var(--line));
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-form-value-size, 14px);
  line-height: 20px;
  outline: none;
}

.field-view__textarea,
.inline-field-editor textarea.inline-field-editor__input {
  min-height: 92px;
  resize: vertical;
}

.field-view__input:focus,
.field-view__select:focus,
.field-view__lookup-select:focus,
.inline-field-editor__input:focus {
  border-color: var(--kmp-color-primary, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 16%, transparent);
}

.field-view__input:disabled,
.field-view__select:disabled,
.field-view__lookup-select:disabled,
.field-view__checkbox:disabled,
.field-view__switch:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.field-view.has-error .field-view__input,
.field-view.has-error .field-view__select,
.field-view.has-error .field-view__lookup-select {
  border-color: var(--kmp-color-error, var(--danger));
}

.field-view__helper,
.field-view__error,
.field-view__notice,
.field-view__lookup-loading {
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: var(--kmp-typo-body-small-line-height, 16px);
}

.field-view__helper,
.field-view__notice,
.field-view__lookup-loading {
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.field-view__error {
  color: var(--kmp-color-error, var(--danger));
}

.field-view__inline {
  min-height: var(--kmp-form-control-height, 36px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
}

.field-view__checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--kmp-color-primary, var(--primary));
}

.field-view__inline-label {
  font-size: var(--kmp-form-value-size, 14px);
  line-height: 20px;
}

.field-view__switch-row {
  min-height: var(--kmp-form-control-height, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--kmp-color-on-surface, var(--text));
}

.field-view__switch-label {
  min-width: 0;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-form-label-size, 12px);
  line-height: 16px;
  font-weight: 650;
}

.field-view.has-error .field-view__switch-label {
  color: var(--kmp-color-error, var(--danger));
}

.field-view__switch-spacer {
  flex: 1 1 auto;
}

.field-view__switch-control,
.field-view__switch-readonly-value {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.field-view__switch {
  appearance: none;
  position: relative;
  width: 44px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: var(--kmp-color-outline, var(--line));
  cursor: pointer;
  transition: background 120ms ease;
}

.field-view__switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kmp-color-surface, var(--surface));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transition: transform 120ms ease;
}

.field-view__switch:checked {
  background: var(--kmp-color-primary, var(--primary));
}

.field-view__switch:checked::before {
  transform: translateX(20px);
}

.field-view__switch-readonly-value {
  gap: 6px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-form-value-size, 14px);
  line-height: 20px;
}

.field-view__switch-readonly-value.is-on {
  color: var(--kmp-color-on-surface, var(--text));
}

.field-view__switch-readonly-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-weight: 800;
  line-height: 1;
}

.field-view__switch-readonly-value.is-on .field-view__switch-readonly-icon {
  color: var(--kmp-color-primary, var(--primary));
}

.field-view__resource {
  display: grid;
  gap: 0;
}

.field-view__resource-preview {
  display: contents;
}

.field-view__resource-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--kmp-color-outline, var(--line));
  border-radius: 8px;
  background: var(--kmp-form-list-item-bg, var(--kmp-color-surface-container, var(--surface-2)));
}

.field-view__resource-image-button {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  cursor: zoom-in;
  overflow: hidden;
}

.field-view__resource-image {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 0;
}

.field-view__resource-info {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.field-view__resource-meta {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
}

.field-view__resource-type-chip,
.field-view__resource-type-icon,
.field-view__resource-drop-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--kmp-color-primary, var(--primary));
}

.field-view__resource-type-chip svg,
.field-view__resource-type-icon svg,
.field-view__resource-drop-icon svg,
.field-view__resource-open svg,
.field-view__resource-remove svg,
.field-view__resource-select svg,
.field-view__resource-audio-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field-view__resource-filename,
.field-view__resource-empty,
.field-view__resource-upload-text,
.field-view__resource-drop-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-form-value-size, 14px);
  line-height: 20px;
}

.field-view__resource-mime,
.field-view__resource-audio-time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
}

.field-view__resource-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  justify-content: flex-end;
}

.field-view__resource-select,
.field-view__resource-remove,
.field-view__resource-open,
.field-view__resource-audio-button {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--kmp-color-primary, var(--primary));
  cursor: pointer;
  font-size: var(--kmp-typo-label-large-size, 14px);
  font-weight: 600;
}

.field-view__resource-select {
  border: 1px solid var(--kmp-color-outline, var(--line));
  border-radius: var(--kmp-shape-small, 8px);
  padding: 0 12px;
  background: transparent;
}

.field-view__resource-remove {
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.field-view__resource-open:hover,
.field-view__resource-remove:hover,
.field-view__resource-audio-button:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.field-view__resource-select:disabled,
.field-view__resource-remove:disabled,
.field-view__resource-open:disabled,
.field-view__resource-audio-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.field-view__resource-drop {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--kmp-color-outline-variant, var(--line));
  border-radius: 8px;
  background: var(--kmp-form-list-item-bg, var(--kmp-color-surface-container, var(--surface-2)));
  cursor: pointer;
}

.field-view__resource-drop.is-drag-over {
  border-color: var(--kmp-color-primary, var(--primary));
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 8%, var(--kmp-color-surface-container, var(--surface-2)));
}

.field-view__resource-upload-card {
  min-height: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--kmp-color-outline, var(--line));
  border-radius: 8px;
  background: var(--kmp-form-list-item-bg, var(--kmp-color-surface-container, var(--surface-2)));
}

.field-view__resource-progress-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--kmp-color-outline-variant, var(--line));
  border-top-color: var(--kmp-color-primary, var(--primary));
  animation: kmp-resource-spin 900ms linear infinite;
}

.field-view__resource-progress-line {
  width: min(220px, 100%);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--kmp-color-outline-variant, var(--line));
}

.field-view__resource-progress-line-fill {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: var(--kmp-color-primary, var(--primary));
  animation: kmp-resource-progress 1200ms ease-in-out infinite alternate;
}

.field-view__resource-audio {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: start;
  gap: 4px;
  padding-bottom: 8px;
}

.field-view__resource-audio-seek {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  accent-color: var(--kmp-color-primary, var(--primary));
}

.field-view__resource-video {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

.image-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr);
  background: rgba(0, 0, 0, 0.85);
}

.image-viewer-overlay__toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.55);
}

.image-viewer-overlay__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.image-viewer-overlay__tools {
  display: flex;
  gap: 4px;
}

.image-viewer-overlay__button {
  min-width: 40px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}

.image-viewer-overlay__stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

.image-viewer-overlay__image {
  max-width: 96vw;
  max-height: calc(100vh - 80px);
  object-fit: contain;
  transform-origin: center;
  user-select: none;
}

@keyframes kmp-resource-spin {
  to { transform: rotate(360deg); }
}

@keyframes kmp-resource-progress {
  from { transform: translateX(-60%); }
  to { transform: translateX(180%); }
}

.field-view--unsupported {
  padding: 10px;
  border: 1px dashed var(--kmp-color-outline, var(--line));
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface-container, var(--surface-2));
}

.inline-field-editor {
  min-width: 0;
}

.inline-field-editor__readonly {
  min-height: 32px;
  display: flex;
  align-items: center;
  color: var(--kmp-color-on-surface, var(--text));
}

.inline-field-editor__error {
  margin-top: 4px;
  color: var(--kmp-color-error, var(--danger));
  font-size: var(--kmp-typo-body-small-size, 12px);
}

@media (max-width: 720px) {
  .responsive-editor-view {
    padding: 12px;
  }

  .responsive-editor-view__section {
    grid-template-columns: 1fr;
  }
}

/* -- Popup editor list rows -------------------------------------------------
   ES6 mirror of MCPopupEditorListView.kt's ElevatedCard row. The generic
   list shell owns list-style removal, card chrome, and trailing icon buttons;
   entity-specific ListItem composables only own their inner text/layout. */

.mc-popup-editor-list-view,
.mc-popup-editor-list-view__base,
.base-list-view {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.base-list-view__toolbar {
  flex: 0 0 auto;
  padding: 8px 12px 4px;
}

.responsive-toolbar-shell__title {
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-title-large-size, 20px);
  line-height: var(--kmp-typo-title-large-line-height, 28px);
  font-weight: var(--kmp-typo-title-large-weight, 600);
  letter-spacing: 0;
}

.base-list-view__body-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.base-list-view__body {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 8px 12px 16px;
}

.mc-popup-editor-list-view__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-popup-editor-list-view__row {
  --kmp-list-row-end-gap: 0px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - var(--kmp-list-row-end-gap));
  min-width: 0;
  min-height: 56px;
  margin: 0 var(--kmp-list-row-end-gap) 0 0;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 72%, transparent);
  border-radius: var(--kmp-shape-medium, 12px);
  background: var(--kmp-form-list-item-background, var(--kmp-color-surface, var(--surface)));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  color: var(--kmp-color-on-surface, var(--text));
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    border-radius 200ms ease,
    box-shadow 120ms ease,
    margin-right 200ms ease,
    padding-right 200ms ease,
    width 200ms ease;
}

.mc-popup-editor-list-view__row:hover {
  background: var(--kmp-color-surface-container, var(--surface-2));
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.mc-popup-editor-list-view__row.is-clickable {
  cursor: pointer;
}

.mc-popup-editor-list-view.has-row-selection .mc-popup-editor-list-view__row:not(.is-selected):not(.is-editing):not(.is-detail-selected) {
  --kmp-list-row-end-gap: 24px;
}

.mc-popup-editor-list-view__row.is-selected,
.mc-popup-editor-list-view__row.is-editing {
  --kmp-list-row-end-gap: 0px;
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 38%, var(--kmp-color-outline, var(--line)));
  background: var(--kmp-list-selection-color, var(--kmp-color-primary-container, #d7eef0));
  overflow: visible;
}

.mc-popup-editor-list-view__row-body {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 3;
}

.mc-popup-editor-list-view__row-checkbox {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--kmp-color-primary, var(--primary));
}

.mc-popup-editor-list-view__row-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
}

.mc-popup-editor-list-view__row-view,
.mc-popup-editor-list-view__row-edit,
.mc-popup-editor-list-view__row-delete,
.mc-popup-editor-list-view__add,
.mc-popup-editor-list-view__select-toggle,
.mc-popup-editor-list-view__select-all {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--kmp-shape-small, 8px);
  background: transparent;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  cursor: pointer;
  line-height: 1;
}

.mc-popup-editor-list-view__row-view:hover,
.mc-popup-editor-list-view__row-edit:hover,
.mc-popup-editor-list-view__add:hover,
.mc-popup-editor-list-view__select-toggle:hover,
.mc-popup-editor-list-view__select-all:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface, var(--text));
}

.mc-popup-editor-list-view__row-delete {
  color: var(--kmp-color-error, var(--danger));
}

.mc-popup-editor-list-view__row-delete:hover {
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 10%, transparent);
}

.mc-popup-editor-list-view__row-icon {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

.cssclass-list-view,
.lookupvalue-list-view,
.colorresource-list-view {
  height: 100%;
  min-height: 0;
}

.cssclass-list-item {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Always a positioning context, regardless of selection state.
     The right-anchored chevron overlay attaches HERE — making the
     root a stable `position: relative` ancestor means the overlay
     doesn't need to toggle the parent's positioning on every
     selection change. */
  position: relative;
}

.cssclass-list-item__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-large-size, 16px);
  line-height: var(--kmp-typo-body-large-line-height, 24px);
  font-weight: var(--kmp-typo-body-large-weight, 400);
  letter-spacing: var(--kmp-typo-body-large-letter-spacing, 0);
}

.cssclass-list-item__class-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-outline, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: var(--kmp-typo-body-small-line-height, 16px);
  font-weight: var(--kmp-typo-body-small-weight, 400);
  letter-spacing: var(--kmp-typo-body-small-letter-spacing, 0);
}

.cssclass-list-item__priority {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-outline, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  line-height: var(--kmp-typo-label-small-line-height, 16px);
  font-weight: var(--kmp-typo-label-small-weight, 500);
  letter-spacing: var(--kmp-typo-label-small-letter-spacing, 0);
}

/* -- Selected list item: left-pointing chevron overlay -----------------
   The selected row hosts a right-anchored `<div>` overlay that
   contains the canvas-backed chevron. Split of concerns:
     • CSS owns sizing, positioning, and theming tokens.
     • The Composable (`SelectedRowArrow`) only draws into the canvas.

   COLOUR TOKENS
     `--kmp-selected-row-bg`         left fill (matches row bg)
     `--kmp-selected-row-arrow-fill` right fill (editor proposed)

   GEOMETRY TOKENS
     `--kmp-selected-row-arrow-width`        overlay width (px)
     `--kmp-selected-row-arrow-apex-inset`   apex distance from the
                                              left edge of the canvas
                                              (px; default 0)

   Tokens are scoped on `.is-selected` rows so unaffected rows stay
   unstyled (no inherited variables leaking into siblings). */

:root {
  --kmp-selected-row-arrow-width: 28px;
  --kmp-selected-row-arrow-apex-inset: 0px;
}

/* The right-anchored chevron overlay attaches to the listitem root,
   which is permanently `position: relative` (see `.cssclass-list-item`
   above). The row card (`.mc-popup-editor-list-view__row`) is also
   `position: relative` and switches to `overflow: visible` when
   selected, so the overlay sits flush against the card edge without
   being clipped. */

/* Right-anchored overlay. `inset: 0 0 0 auto` = `top:0; right:0;
   bottom:0; left:auto` — the element stretches the full height of
   its positioned ancestor and pins to the right edge with an
   explicit width. The chevron is a BACKGROUND decoration, so
   `z-index: 0` keeps it behind row content; `pointer-events: none`
   passes clicks through to whatever sits above it. */
.cssclass-list-item__arrow {
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--kmp-selected-row-arrow-width, 28px);
  pointer-events: none;
  z-index: 0;
  display: block;
}

/* Lift text content above the background chevron when selected. The
   non-selected rows don't have an overlay, so this scoped rule
   doesn't waste a `position: relative` on every row. */
.cssclass-list-item.is-selected > *:not(.cssclass-list-item__arrow) {
  position: relative;
  z-index: 1;
}

/* The canvas inside the overlay fills it edge-to-edge so the
   drawing-buffer measurement (`getBoundingClientRect()`) matches the
   overlay's box exactly. */
.cssclass-list-item__arrow > .selected-row-arrow {
  display: block;
  width: 100%;
  height: 100%;
}

/* Colour-token bindings. Scoped to the selected variants so
   non-selected rows don't inherit them. */
.cssclass-list-item.is-selected,
.mc-popup-editor-list-view__row.is-selected,
.mc-popup-editor-list-view__row.is-editing {
  --kmp-selected-row-bg:
    var(--kmp-list-selection-color,
        var(--kmp-color-primary-container, #d7eef0));
  --kmp-selected-row-arrow-fill:
    color-mix(
      in srgb,
      var(--kmp-color-primary, var(--primary)) 22%,
      white
    );
}

.cssclass-empty,
.lookupvalue-empty,
.colorresource-empty {
  padding: 24px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  text-align: center;
}

/* -- Table view -------------------------------------------------------------
   ES6 mirror of MCTableView.kt: sticky header/filter rows, fixed action
   column width, persisted width fractions, and visible-column drag reorder. */

.mc-table-view,
.mc-table-view__base {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mc-table-view__base,
.mc-table-view .base-list-view {
  flex: 1 1 auto;
  min-height: 0;
}

.mc-table-view .base-list-view__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.mc-table-view__top {
  flex: 0 0 auto;
}

.list-toolbar-action {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
  font-size: var(--kmp-typo-label-large-size, 13px);
  line-height: var(--kmp-typo-label-large-line-height, 20px);
}

.m3-icon-button,
.list-toolbar-action.m3-icon-button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
  line-height: 1;
}

.m3-icon-button:hover,
.list-toolbar-action.m3-icon-button:hover {
  background: var(--kmp-color-surface-container, var(--surface-2));
  border-color: var(--kmp-color-outline, var(--line));
}

.list-toolbar-action:hover {
  background: var(--kmp-color-surface-container, var(--surface-2));
  border-color: var(--kmp-color-outline, var(--line));
}

.list-toolbar-action.is-filter,
.list-toolbar-action.is-advanced-filter {
  color: var(--kmp-color-primary, var(--primary));
}

.list-fragment-top__filter-bar {
  padding: 0 8px 8px;
}

.list-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.list-filter-bar__cell {
  position: relative;
  min-width: min(180px, 100%);
}

.list-filter-bar__input {
  width: 100%;
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  outline: none;
}

.list-filter-bar__input:focus {
  border-color: var(--kmp-color-primary, var(--primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 18%, transparent);
}

.list-filter-bar__clear {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: transparent;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  cursor: pointer;
}

.list-filter-bar__clear:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface, var(--text));
}

.list-fragment-top__filter-panel {
  padding: 0 8px 8px;
}

.filter-panel-dialog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 68%, transparent);
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.filter-panel-dialog__title {
  margin: 0;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-title-small-size, 14px);
  line-height: var(--kmp-typo-title-small-line-height, 20px);
  font-weight: var(--kmp-typo-title-small-weight, 600);
}

.filter-panel-dialog__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(118px, 0.6fr) minmax(140px, 1fr) minmax(120px, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.filter-panel-dialog__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  font-weight: var(--kmp-typo-label-medium-weight, 600);
}

.filter-panel-dialog__relation,
.filter-panel-dialog__value,
.filter-panel-dialog__value-b {
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
}

.filter-panel-dialog__row-clear,
.filter-panel-dialog__clear,
.filter-panel-dialog__save-as-criteria,
.filter-panel-dialog__cancel,
.filter-panel-dialog__apply {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
}

.filter-panel-dialog__row-clear,
.filter-panel-dialog__clear {
  color: var(--kmp-color-error, var(--danger));
}

.filter-panel-dialog__save-as-criteria,
.filter-panel-dialog__apply {
  color: var(--kmp-color-primary, var(--primary));
}

.filter-panel-dialog__row-clear:hover,
.filter-panel-dialog__clear:hover,
.filter-panel-dialog__save-as-criteria:hover,
.filter-panel-dialog__cancel:hover,
.filter-panel-dialog__apply:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.filter-panel-dialog__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-panel-dialog__spacer {
  flex: 1 1 auto;
}

.filter-panel-dialog__empty {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
}

.base-list-view__quick-search,
.base-list-view__filter {
  flex: 0 0 auto;
  padding: 0 20px 8px;
}

.base-list-type-fragment__quick-search,
.mc-popup-editor-list-view__after-chrome {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 8px;
}

.quick-search-bar {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 56px;
  box-sizing: border-box;
  margin: 8px 0 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 22%, transparent);
  border-radius: 28px;
  background: var(--kmp-color-surface, var(--m3-surface, #FFFFFF));
  color: var(--kmp-color-on-surface, var(--m3-on-surface, var(--text)));
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.quick-search-bar:hover {
  background: var(--kmp-color-surface, var(--m3-surface, #FFFFFF));
  border-color: color-mix(in srgb, var(--kmp-color-outline, var(--line)) 44%, transparent);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
}

.quick-search-bar:focus-within {
  background: var(--kmp-color-surface, var(--m3-surface, #FFFFFF));
  border-color: var(--kmp-color-primary, var(--m3-primary, var(--primary)));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--kmp-color-primary, var(--m3-primary, var(--primary))) 18%, transparent),
    0 4px 12px rgba(15, 23, 42, 0.10);
}

.quick-search-bar__leading-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kmp-color-on-surface-variant, var(--m3-on-surface-variant, var(--muted)));
  pointer-events: none;
}

.quick-search-bar__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 56px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 400 16px/24px Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  outline: none;
}

.quick-search-bar__input::placeholder {
  color: var(--kmp-color-on-surface-variant, var(--m3-on-surface-variant, var(--muted)));
  opacity: 1;
}

.quick-search-bar__input::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
}

.quick-search-bar__clear {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--kmp-color-on-surface-variant, var(--m3-on-surface-variant, var(--muted)));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, color 120ms ease;
}

.quick-search-bar__clear:hover {
  background: color-mix(in srgb, var(--kmp-color-on-surface, var(--text)) 8%, transparent);
  color: var(--kmp-color-on-surface, var(--m3-on-surface, var(--text)));
}

.quick-search-bar__clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--kmp-color-primary, var(--m3-primary, var(--primary)));
}

.filter-indicator-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 64%, transparent);
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.filter-indicator-bar__count {
  flex: 0 0 auto;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-medium-size, 12px);
  font-weight: var(--kmp-typo-label-medium-weight, 600);
}

.filter-indicator-bar__chips {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.filter-indicator-bar__chip {
  flex: 0 0 auto;
  max-width: 260px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 24%, var(--kmp-color-outline, var(--line)));
  border-radius: 999px;
  background: color-mix(in srgb, var(--kmp-color-primary-container, #d7eef0) 48%, var(--kmp-color-surface, var(--surface)));
  color: var(--kmp-color-on-surface, var(--text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--kmp-typo-label-medium-size, 12px);
}

button.filter-indicator-bar__chip {
  cursor: pointer;
}

button.filter-indicator-bar__chip:hover {
  border-color: var(--kmp-color-primary, var(--primary));
}

.filter-indicator-bar__chip.is-algorithm {
  border-color: color-mix(in srgb, var(--kmp-color-secondary, #6d5dd3) 32%, var(--kmp-color-outline, var(--line)));
}

.filter-indicator-bar__save,
.filter-indicator-bar__clear {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: transparent;
  color: var(--kmp-color-primary, var(--primary));
  cursor: pointer;
}

.filter-indicator-bar__clear {
  color: var(--kmp-color-error, var(--danger));
}

.filter-indicator-bar__save:hover,
.filter-indicator-bar__clear:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.base-list-view__loading-more {
  padding: 12px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  text-align: center;
  font-size: var(--kmp-typo-body-small-size, 12px);
}

.selection-bottom-bar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  padding: 8px 12px 12px;
  background: linear-gradient(to top, var(--kmp-color-surface, var(--surface)) 78%, transparent);
}

.selection-bottom-bar__row,
.selection-bottom-bar__error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 72%, transparent);
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface, var(--surface));
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}

.selection-bottom-bar__count {
  font-weight: 600;
}

.selection-bottom-bar__actions {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.selection-bottom-bar__select-all,
.selection-bottom-bar__all-matching,
.selection-bottom-bar__action,
.selection-bottom-bar__clear,
.selection-bottom-bar__error-dismiss {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
}

.selection-bottom-bar__select-all:hover,
.selection-bottom-bar__all-matching:hover,
.selection-bottom-bar__action:hover,
.selection-bottom-bar__clear:hover,
.selection-bottom-bar__error-dismiss:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.selection-bottom-bar__all-matching {
  color: var(--kmp-color-primary, var(--primary));
}

.selection-bottom-bar__clear,
.selection-bottom-bar__error-dismiss {
  color: var(--kmp-color-error, var(--danger));
}

.selection-bottom-bar__error {
  margin-top: 6px;
  color: var(--kmp-color-error, var(--danger));
}

@media (max-width: 760px) {
  .filter-panel-dialog__row {
    grid-template-columns: 1fr;
  }
}

.mc-table-view__scroller {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 68%, transparent);
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface, var(--surface));
}

.mc-table-view__table {
  display: block;
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-medium-size, 14px);
  line-height: var(--kmp-typo-body-medium-line-height, 20px);
  letter-spacing: 0;
}

.mc-table-view__colgroup {
  display: none;
}

.mc-table-view__thead,
.mc-table-view__filter-thead,
.mc-table-view__tbody {
  display: block;
}

.mc-table-view__head-row,
.mc-table-view__filter-row,
.mc-table-view__row {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.mc-table-view__th,
.mc-table-view__filter-cell,
.mc-table-view__td {
  box-sizing: border-box;
}

.mc-table-view__thead {
  position: sticky;
  top: 0;
  z-index: 8;
}

.mc-table-view__thead .mc-table-view__th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 48px;
  padding: 0 10px;
  border-bottom: 1px solid var(--kmp-color-outline-variant, var(--line));
  background: var(--kmp-color-surface-container, var(--surface-2));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-large-size, 13px);
  line-height: var(--kmp-typo-label-large-line-height, 20px);
  font-weight: var(--kmp-typo-label-large-weight, 600);
  text-align: left;
  vertical-align: middle;
}

.mc-table-view__th {
  position: relative;
}

.mc-table-view__thead .mc-table-view__th.is-sort-active {
  color: var(--kmp-color-on-surface, var(--text));
  background: color-mix(in srgb, var(--kmp-color-primary-container, #d7eef0) 48%, var(--kmp-color-surface-container, var(--surface-2)));
}

.mc-table-view__thead .mc-table-view__th.is-drag-over {
  box-shadow: inset 3px 0 0 var(--kmp-color-primary, var(--primary));
}

.mc-table-view__th-inner {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mc-table-view__drag-handle {
  width: 18px;
  min-width: 18px;
  display: inline-flex;
  justify-content: center;
  color: var(--kmp-color-outline, var(--muted));
  cursor: grab;
  font-size: 11px;
  line-height: 1;
  user-select: none;
}

.mc-table-view__drag-handle:active,
.mc-table-view__drag-handle.is-dragging {
  cursor: grabbing;
  color: var(--kmp-color-primary, var(--primary));
}

.mc-table-view__th-button {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-align: left;
  font: inherit;
}

button.mc-table-view__th-button {
  cursor: pointer;
}

button.mc-table-view__th-button:hover {
  color: var(--kmp-color-on-surface, var(--text));
}

.mc-table-view__th-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-table-view__th-arrow {
  flex: 0 0 auto;
  color: var(--kmp-color-primary, var(--primary));
  font-size: 13px;
}

.mc-table-view__resize-handle {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 7;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.mc-table-view__resize-handle::after {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 3px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

.mc-table-view__resize-handle:hover::after {
  background: var(--kmp-color-primary, var(--primary));
}

.is-resizing-table-column,
.is-resizing-table-column * {
  cursor: col-resize !important;
  user-select: none !important;
}

.mc-table-view__filter-thead {
  position: sticky;
  top: 48px;
  z-index: 7;
}

.mc-table-view__filter-thead .mc-table-view__filter-cell {
  position: sticky;
  top: 48px;
  z-index: 4;
  height: 36px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--kmp-color-outline-variant, var(--line));
  background: var(--kmp-color-surface-container-low, var(--surface));
}

.mc-table-view__filter-input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-small-size, 12px);
  outline: none;
}

.mc-table-view__filter-input:focus {
  border-color: var(--kmp-color-primary, var(--primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 18%, transparent);
}

.mc-table-view__td {
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 68%, transparent);
  background: var(--kmp-color-surface, var(--surface));
  vertical-align: middle;
}

.mc-table-view__row:hover .mc-table-view__td {
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.mc-table-view__row.is-selected .mc-table-view__td {
  background: color-mix(in srgb, var(--kmp-color-primary-container, #d7eef0) 58%, var(--kmp-color-surface, var(--surface)));
}

.mc-table-view__cell-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-table-view__th--select,
.mc-table-view__td--select,
.mc-table-view__filter-cell--select {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding-right: 8px;
  padding-left: 8px;
  text-align: center;
}

.mc-table-view__th--actions,
.mc-table-view__td--actions,
.mc-table-view__filter-cell--actions {
  width: 144px;
  min-width: 144px;
  max-width: 144px;
  text-align: right;
}

.mc-table-view__td--actions {
  white-space: nowrap;
}

.mc-table-view__row-save,
.mc-table-view__row-view,
.mc-table-view__row-edit,
.mc-table-view__row-delete,
.mc-table-view__row-undelete,
.mc-table-view__add,
.mc-table-view__select-toggle {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--kmp-shape-small, 8px);
  background: transparent;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  cursor: pointer;
  line-height: 1;
}

.mc-table-view__row-save:hover,
.mc-table-view__row-view:hover,
.mc-table-view__row-edit:hover,
.mc-table-view__row-undelete:hover,
.mc-table-view__add:hover,
.mc-table-view__select-toggle:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface, var(--text));
}

.mc-table-view__row-delete {
  color: var(--kmp-color-error, var(--danger));
}

.mc-table-view__row-delete:hover {
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 10%, transparent);
}

/* -- Shared list chrome additions ----------------------------------------- */

.list-toolbar-action-slot {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.list-toolbar-debug-label {
  align-self: center;
  max-width: 180px;
  padding: 3px 7px;
  border: 1px dashed color-mix(in srgb, var(--kmp-color-outline, var(--line)) 72%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragment-settings-toolbar-button,
.list-layout-button,
.grid-layout-button,
.algorithm-toolbar-contribution__datasets,
.sort-dropdown__chip,
.sort-dropdown__direction,
.list-row-action {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
}

.fragment-settings-toolbar-button:hover,
.list-layout-button:hover,
.grid-layout-button:hover,
.algorithm-toolbar-contribution__datasets:hover,
.sort-dropdown__chip:hover,
.sort-dropdown__direction:hover,
.list-row-action:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.fragment-settings-toolbar-button,
.sort-dropdown__direction,
.list-row-action {
  width: 32px;
  min-width: 32px;
  padding: 0;
}

.list-layout-button,
.grid-layout-button {
  min-width: 0;
  padding: 0 10px;
  color: var(--kmp-color-primary, var(--primary));
  font-weight: var(--kmp-typo-label-large-weight, 600);
}

.list-layout-button__icon,
.grid-layout-button__icon {
  color: currentColor;
}

/* Active state — primary tint when an algorithm filter is in effect. */
.algorithm-toolbar-contribution__datasets[data-active="true"] {
  border-color: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 60%, var(--kmp-color-outline, var(--line)));
}

.algorithm-toolbar-contribution__icon {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 10px;
  line-height: 1;
}

.algorithm-toolbar-contribution__datasets[data-active="true"] .algorithm-toolbar-contribution__icon {
  color: var(--kmp-color-primary, var(--primary));
}

.algorithm-toolbar-contribution__label-col {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.algorithm-toolbar-contribution__label {
  font-size: var(--kmp-typo-label-medium-size, 12px);
}

.algorithm-toolbar-contribution__label[data-active="true"] {
  font-weight: 600;
}

.algorithm-toolbar-contribution__active-summary {
  display: block;
  max-width: 280px;
  margin-top: 1px;
  font-size: var(--kmp-typo-label-small-size, 11px);
  color: var(--kmp-color-primary, var(--primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fragment-settings-toolbar-button__icon {
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
}

.fragment-settings-toolbar-button__track {
  position: absolute;
  left: 2px;
  right: 2px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.fragment-settings-toolbar-button__track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-50%);
}

.fragment-settings-toolbar-button__track.is-top {
  top: 4px;
}

.fragment-settings-toolbar-button__track.is-top::after {
  left: 2px;
}

.fragment-settings-toolbar-button__track.is-middle {
  top: 8px;
}

.fragment-settings-toolbar-button__track.is-middle::after {
  right: 2px;
}

.fragment-settings-toolbar-button__track.is-bottom {
  top: 12px;
}

.fragment-settings-toolbar-button__track.is-bottom::after {
  left: 7px;
}

/* Modeler-style toolbar icons: icon-only toolbar controls are borderless. */
.title-actions .mc-icon-button,
.home-toolbar .mc-icon-button,
.topbar-actions .mc-icon-button,
.topbar-actions .m3-icon-button,
.topbar-action-menu > summary.mc-icon-button,
.menu-drawer-header .mc-icon-button,
.responsive-toolbar-shell__actions .m3-icon-button,
.base-list-view__toolbar .m3-icon-button,
.base-list-view__toolbar .list-toolbar-action.m3-icon-button,
.field-view__hasmany-toolbar .m3-icon-button,
.availability-monitor__refresh,
.tenant-dashboard-grid__refresh,
.fragment-settings-toolbar-button,
.sort-dropdown__direction {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.title-actions .mc-icon-button:hover,
.home-toolbar .mc-icon-button:hover,
.topbar-actions .mc-icon-button:hover,
.topbar-actions .m3-icon-button:hover,
.topbar-action-menu > summary.mc-icon-button:hover,
.menu-drawer-header .mc-icon-button:hover,
.responsive-toolbar-shell__actions .m3-icon-button:hover,
.base-list-view__toolbar .m3-icon-button:hover,
.base-list-view__toolbar .list-toolbar-action.m3-icon-button:hover,
.field-view__hasmany-toolbar .m3-icon-button:hover,
.availability-monitor__refresh:hover,
.tenant-dashboard-grid__refresh:hover,
.fragment-settings-toolbar-button:hover,
.sort-dropdown__direction:hover {
  border: 0;
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 9%, transparent);
}

.topbar-actions .mc-icon-button.is-active,
.topbar-actions .m3-icon-button.is-active,
.topbar-action-menu[open] > summary.mc-icon-button,
.fragment-settings-toolbar-button[aria-pressed="true"] {
  border: 0;
  color: var(--kmp-color-primary, var(--primary));
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 12%, transparent);
}

.sort-dropdown,
.algorithm-toolbar-contribution {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sort-dropdown__menu,
.algorithm-toolbar-contribution__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 22;
  min-width: 180px;
  padding: 4px;
  border: 1px solid var(--kmp-color-outline, var(--line));
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface, var(--surface));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}

.sort-dropdown__item,
.algorithm-toolbar-contribution__item {
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: transparent;
  color: var(--kmp-color-on-surface, var(--text));
  text-align: left;
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sort-dropdown__item:hover,
.sort-dropdown__item.is-selected,
.algorithm-toolbar-contribution__item:hover {
  background: var(--kmp-color-surface-container, var(--surface-2));
}

.algorithm-toolbar-contribution__menu {
  min-width: 280px;
  max-width: 380px;
}

.algorithm-toolbar-contribution__item-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.algorithm-toolbar-contribution__item-icon {
  color: var(--kmp-color-primary, var(--primary));
  font-size: 14px;
  line-height: 18px;
}

.algorithm-toolbar-contribution__item-title {
  font-size: var(--kmp-typo-body-small-size, 13px);
}

.algorithm-toolbar-contribution__item-title[data-bold="true"] {
  font-weight: 700;
}

.algorithm-toolbar-contribution__compose .algorithm-toolbar-contribution__item-title {
  font-weight: 600;
}

.algorithm-toolbar-contribution__item-subtitle {
  font-size: var(--kmp-typo-label-small-size, 11px);
  color: var(--kmp-color-on-surface-variant, var(--muted));
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.algorithm-toolbar-contribution__item-humanized {
  font-size: var(--kmp-typo-label-small-size, 11px);
  color: var(--kmp-color-primary, var(--primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.algorithm-toolbar-contribution__divider {
  height: 1px;
  margin: 4px 0;
  background: var(--kmp-color-outline-variant, var(--line));
}

.algorithm-toolbar-contribution__active-unsaved {
  cursor: default;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
}

.algorithm-toolbar-contribution__active-unsaved:hover {
  background: transparent;
}

.algorithm-toolbar-contribution__active-unsaved-label {
  font-size: var(--kmp-typo-label-small-size, 11px);
  font-weight: 600;
  color: var(--kmp-color-primary, var(--primary));
}

.algorithm-toolbar-contribution__active-unsaved-summary {
  font-size: var(--kmp-typo-body-small-size, 12px);
  color: var(--kmp-color-on-surface-variant, var(--muted));
  max-width: 320px;
  white-space: normal;
  word-break: break-word;
}

.algorithm-toolbar-contribution__status {
  padding: 7px 8px;
  font-size: var(--kmp-typo-body-small-size, 12px);
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.algorithm-toolbar-contribution__status--error {
  color: var(--kmp-color-error, var(--danger));
}

.algorithm-toolbar-contribution__empty {
  padding: 7px 8px;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
}

.mc-popup-editor-list-view__row.is-detail-selected,
.mc-grid-view__card.is-detail-selected {
  --kmp-list-row-end-gap: 0px;
  border-color: color-mix(in srgb, var(--kmp-list-selection-color, var(--kmp-color-primary, var(--primary))) 64%, var(--kmp-color-outline, var(--line)));
  background: var(--kmp-list-selection-color, var(--kmp-color-primary-container, #d7eef0));
  overflow: visible;
}

.mc-popup-editor-list-view__row-arrow {
  position: absolute;
  top: 0;
  right: -28px;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 2;
}

.mc-popup-editor-list-view__row-arrow-fill {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  background: var(--kmp-list-selection-color, var(--kmp-color-primary-container, #d7eef0));
}

.mc-popup-editor-list-view__row-arrow-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 28px;
  height: 100%;
}

.mc-table-view__row.is-detail-selected .mc-table-view__td {
  background: color-mix(in srgb, var(--kmp-list-selection-color, var(--kmp-color-primary-container, #d7eef0)) 70%, var(--kmp-color-surface, var(--surface)));
}

.mc-popup-editor-list-view__row.is-deleted,
.mc-grid-view__card.is-deleted,
.mc-table-view__row.is-deleted .mc-table-view__td {
  opacity: 0.72;
}

.mc-popup-editor-list-view__row-undelete,
.mc-grid-view__card-undelete,
.mc-table-view__row-undelete {
  color: var(--kmp-color-primary, var(--primary));
}

.item-decorations {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.item-decorations__badge {
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 70%, transparent);
  background: var(--kmp-color-surface-container, var(--surface-2));
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.item-decorations__badge.is-deleted {
  border-color: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 34%, transparent);
  color: var(--kmp-color-error, var(--danger));
}

.item-decorations__badge.is-role-controlled {
  color: var(--kmp-color-primary, var(--primary));
}

.base-list-view__recents {
  position: sticky;
  top: 0;
  z-index: 6;
  margin-bottom: 8px;
}

.recents-list-section {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 60%, transparent);
  border-radius: var(--kmp-shape-small, 8px);
  background: color-mix(in srgb, var(--kmp-color-surface, var(--surface)) 92%, transparent);
  backdrop-filter: blur(8px);
}

.recents-list-section__sticky-header {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-label-small-size, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.recents-list-section__items {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.recents-list-section__item {
  flex: 0 0 auto;
  max-width: 220px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 68%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.recents-list-section__item:hover {
  background: var(--kmp-color-surface-container, var(--surface-2));
}

.recents-list-section__title,
.recents-list-section__subtitle,
.recents-list-section__action {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recents-list-section__subtitle,
.recents-list-section__action {
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 11px;
}

.base-list-view__letter-index {
  position: absolute;
  top: 8px;
  right: 2px;
  bottom: 8px;
  z-index: 7;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 24px;
  pointer-events: none;
}

.letter-index-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 0;
  pointer-events: auto;
}

.letter-index-bar__item {
  width: 22px;
  min-width: 22px;
  height: 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  padding: 0;
  cursor: pointer;
}

.letter-index-bar__item:hover,
.letter-index-bar__item.is-active {
  background: var(--kmp-color-primary-container, #d7eef0);
  color: var(--kmp-color-primary, var(--primary));
}

.base-list-view__scroll-top-fab {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--kmp-color-primary, var(--primary));
  color: white;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.24);
  cursor: pointer;
}

.mc-table-view__extended-filter {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px;
}

.mc-table-view__filter-operator {
  min-width: 0;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  font-size: 12px;
}

/* -- Grid and combined collection views ----------------------------------- */

.mc-grid-view,
.mc-grid-view__base,
.mc-combined-collection-view {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mc-grid-view__base,
.mc-grid-view .base-list-view {
  flex: 1 1 auto;
  min-height: 0;
}

.mc-grid-view__grid {
  align-items: stretch;
}

.mc-grid-view__card {
  min-width: 0;
  min-height: 120px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 72%, transparent);
  border-radius: var(--kmp-shape-medium, 12px);
  background: var(--kmp-color-surface, var(--surface));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.mc-grid-view__card:hover {
  background: var(--kmp-color-surface-container-low, var(--surface-2));
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.mc-grid-view__card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px;
}

.mc-grid-view__card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px 6px 6px;
  border-top: 1px solid color-mix(in srgb, var(--kmp-color-outline-variant, var(--line)) 62%, transparent);
}

.mc-grid-view__card-view,
.mc-grid-view__card-edit,
.mc-grid-view__card-delete,
.mc-grid-view__card-undelete,
.mc-grid-view__add,
.mc-grid-view__select-toggle,
.mc-table-view__row-undelete {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 0;
  border-radius: var(--kmp-shape-small, 8px);
  background: transparent;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  cursor: pointer;
}

.mc-grid-view__card-delete {
  color: var(--kmp-color-error, var(--danger));
}

.mc-grid-view__card-view:hover,
.mc-grid-view__card-edit:hover,
.mc-grid-view__card-undelete:hover,
.mc-grid-view__add:hover,
.mc-grid-view__select-toggle:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
  color: var(--kmp-color-on-surface, var(--text));
}

.mc-grid-view__card-delete:hover {
  background: color-mix(in srgb, var(--kmp-color-error, var(--danger)) 10%, transparent);
}

.mc-grid-view__card-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  accent-color: var(--kmp-color-primary, var(--primary));
}

.mc-combined-collection-view__mode-icon {
  border: 0;
  background: transparent;
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.mc-combined-collection-view__mode-icon.is-active {
  border: 0;
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 12%, transparent);
  color: var(--kmp-color-primary, var(--primary));
}

.mc-combined-collection-view__mode-icon:hover {
  border: 0;
  background: color-mix(in srgb, var(--kmp-color-primary, var(--primary)) 9%, transparent);
  color: var(--kmp-color-primary, var(--primary));
}

.mc-combined-collection-view__body {
  flex: 1 1 auto;
  min-height: 0;
}

/* -- Fragment settings ----------------------------------------------------- */

.fragment-settings-fragment {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.fragment-settings-fragment__title {
  margin: 0 0 4px;
  font-size: var(--kmp-typo-title-large-size, 20px);
  line-height: var(--kmp-typo-title-large-line-height, 28px);
}

.fragment-settings-fragment__section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 68%, transparent);
  border-radius: var(--kmp-shape-small, 8px);
  background: var(--kmp-color-surface, var(--surface));
}

.fragment-settings-fragment__heading {
  margin: 0;
  font-size: var(--kmp-typo-title-small-size, 14px);
  line-height: var(--kmp-typo-title-small-line-height, 20px);
}

.fragment-settings-fragment__help,
.fragment-settings-fragment__key {
  margin: 0;
  color: var(--kmp-color-on-surface-variant, var(--muted));
  font-size: var(--kmp-typo-body-small-size, 12px);
  line-height: 18px;
}

.fragment-settings-fragment__key {
  word-break: break-all;
}

.fragment-settings-fragment__chips,
.fragment-settings-fragment__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fragment-settings-fragment__chip,
.fragment-settings-fragment__swatch,
.fragment-settings-fragment__select,
.fragment-settings-fragment__input {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
}

.fragment-settings-fragment__chip {
  padding: 0 10px;
  cursor: pointer;
}

.fragment-settings-fragment__chip.is-selected {
  border-color: var(--kmp-color-primary, var(--primary));
  color: var(--kmp-color-primary, var(--primary));
  background: var(--kmp-color-primary-container, #d7eef0);
}

.fragment-settings-fragment__chip:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.fragment-settings-fragment__swatch {
  min-width: 34px;
  padding: 0 8px;
  cursor: pointer;
}

.fragment-settings-fragment__swatch.is-selected {
  outline: 2px solid var(--kmp-color-primary, var(--primary));
  outline-offset: 2px;
}

.fragment-settings-fragment__select,
.fragment-settings-fragment__input {
  width: 100%;
  padding: 0 10px;
}

.fragment-settings-fragment__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--kmp-color-on-surface, var(--text));
}

.fragment-settings-fragment__switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--kmp-color-on-surface, var(--text));
}

.fragment-settings-fragment__switch-label {
  min-width: 0;
}

.fragment-settings-fragment__switch-host .field-view,
.table-settings-panel__switch-host .field-view,
.table-settings-panel__column-switch-host .field-view {
  display: block;
}

.fragment-settings-fragment__switch-host .field-view__switch-row,
.table-settings-panel__switch-host .field-view__switch-row,
.table-settings-panel__column-switch-host .field-view__switch-row {
  min-height: 36px;
  justify-content: flex-start;
  gap: 12px;
}

.fragment-settings-fragment__switch-host .field-view__switch-control,
.table-settings-panel__switch-host .field-view__switch-control,
.table-settings-panel__column-switch-host .field-view__switch-control {
  order: -1;
  justify-content: flex-start;
}

.fragment-settings-fragment__switch-host .field-view__switch-label,
.table-settings-panel__switch-host .field-view__switch-label,
.table-settings-panel__column-switch-host .field-view__switch-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-medium-size, 14px);
  line-height: var(--kmp-typo-body-medium-line-height, 20px);
  font-weight: 400;
}

.fragment-settings-fragment__switch-host .field-view.is-disabled .field-view__switch-label,
.table-settings-panel__switch-host .field-view.is-disabled .field-view__switch-label,
.table-settings-panel__column-switch-host .field-view.is-disabled .field-view__switch-label {
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.fragment-settings-fragment__range-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.fragment-settings-fragment__range {
  width: 100%;
  accent-color: var(--kmp-color-primary, var(--primary));
}

.fragment-settings-fragment__range-value {
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-body-medium-size, 14px);
  white-space: nowrap;
}

.fragment-settings-fragment__range-value.is-disabled {
  color: var(--kmp-color-on-surface-variant, var(--muted));
}

.table-settings-panel {
  display: grid;
  gap: 12px;
}

.table-settings-panel__section {
  display: grid;
  gap: 8px;
}

.table-settings-panel__heading {
  margin: 0;
  color: var(--kmp-color-on-surface, var(--text));
  font-size: var(--kmp-typo-title-small-size, 14px);
  line-height: var(--kmp-typo-title-small-line-height, 20px);
}

.table-settings-panel__row,
.table-settings-panel__column {
  min-height: 32px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  color: var(--kmp-color-on-surface, var(--text));
}

.table-settings-panel__row {
  grid-template-columns: auto minmax(0, 1fr);
}

.table-settings-panel__switch-host {
  min-width: 0;
}

.table-settings-panel__column-switch-host {
  min-width: 0;
  grid-column: 1 / 3;
}

.table-settings-panel__row-label,
.table-settings-panel__column-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-settings-panel__priority {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
}

.table-settings-panel__columns {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.table-settings-panel__move-up,
.table-settings-panel__move-down {
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--kmp-color-outline, var(--line)) 76%, transparent);
  border-radius: var(--kmp-shape-extra-small, 6px);
  background: var(--kmp-color-surface, var(--surface));
  color: var(--kmp-color-on-surface, var(--text));
  cursor: pointer;
}

.table-settings-panel__move-up:hover,
.table-settings-panel__move-down:hover {
  background: var(--kmp-color-surface-container-high, var(--surface-3));
}

.table-settings-panel__move-up:disabled,
.table-settings-panel__move-down:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.empty-view {
  width: min(420px, 100%);
  margin: 28px auto;
  padding: 24px;
  border: 1px dashed color-mix(in srgb, var(--kmp-color-outline, var(--line)) 72%, transparent);
  border-radius: var(--kmp-shape-medium, 12px);
  color: var(--kmp-color-on-surface-variant, var(--muted));
  text-align: center;
  background: var(--kmp-color-surface-container-low, var(--surface-2));
}

.empty-view__label {
  margin: 0;
}

@media (max-width: 640px) {
  .base-list-view__toolbar {
    padding: 8px 8px 2px;
  }

  .base-list-view__body {
    padding: 6px 8px 12px;
  }

  .mc-popup-editor-list-view__row {
    gap: 6px;
    padding: 5px 6px 5px 8px;
  }

  .mc-popup-editor-list-view__row-view,
  .mc-popup-editor-list-view__row-edit,
  .mc-popup-editor-list-view__row-delete {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .mc-table-view__table {
    min-width: 620px;
  }

  .mc-table-view__thead .mc-table-view__th {
    padding-right: 8px;
    padding-left: 8px;
  }

  .mc-table-view__td {
    padding-right: 8px;
    padding-left: 8px;
  }
}