/* =========================================================
   DSL-N Control Plane - UI base
   Layout estable + variables de tema desde /theme/current.css
   ========================================================= */

html,
body {
  min-height: 100%;
}

body {
  background: var(--cp-bg) !important;
  color: var(--cp-text) !important;
}

a {
  color: var(--cp-accent);
}

a:hover {
  color: var(--cp-accent);
  filter: brightness(.92);
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.cp-navbar-title,
.cp-page-title,
.cp-section-title,
.cp-panel-title,
.cp-card-title {
  color: var(--cp-heading) !important;
}

.text-muted,
.text-secondary,
.cp-page-subtitle,
.form-text {
  color: var(--cp-text-muted) !important;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--cp-accent) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
}

/* Layout */
.cp-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.cp-main {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--cp-bg) !important;
  color: var(--cp-text) !important;
}

.cp-topbar {
  border-bottom: 1px solid var(--cp-border) !important;
  background: var(--cp-topbar-bg) !important;
  color: var(--cp-topbar-text) !important;
}

.cp-topbar *,
.navbar *,
header * {
  color: inherit;
}

/* Sidebar */
.cp-sidebar {
  width: var(--cp-sidebar-width);
  min-width: var(--cp-sidebar-width);
  max-width: var(--cp-sidebar-width);
  background: var(--cp-sidebar-bg) !important;
  color: var(--cp-sidebar-text) !important;
  border-right: 1px solid var(--cp-sidebar-border, rgba(255,255,255,.08));
  transition: width .22s ease, min-width .22s ease, max-width .22s ease, transform .22s ease;
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 20;
}

.cp-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem .85rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.cp-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.15rem;
}

.cp-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 42px;
  text-decoration: none;
  flex: 1 1 auto;
  color: var(--cp-sidebar-active-text) !important;
}

.cp-sidebar-brand-logo {
  max-height: 42px;
  max-width: 150px;
  object-fit: contain;
}

.cp-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: .18rem;
}

.cp-sidebar-section-label {
  margin-top: 1rem;
  margin-bottom: .35rem;
  padding: 0 .35rem;
  font-size: .76rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--cp-sidebar-muted) !important;
}

.cp-sidebar-rule {
  height: 1px;
  margin: .85rem .35rem .55rem;
  background: var(--cp-sidebar-divider, rgba(255,255,255,.11));
}

.cp-nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .85rem;
  width: 100%;
  padding: .78rem .7rem;
  background: transparent !important;
  color: var(--cp-sidebar-text) !important;
  text-decoration: none;
  border-radius: .85rem;
  border: 1px solid transparent;
  appearance: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.cp-nav-link:hover {
  background: var(--cp-sidebar-hover-bg) !important;
  color: var(--cp-sidebar-active-text) !important;
}

.cp-nav-link.active {
  background: var(--cp-sidebar-active-bg) !important;
  color: var(--cp-sidebar-active-text) !important;
}

.cp-nav-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cp-accent) 72%, white 28%);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--cp-accent) 44%, transparent);
}

.cp-nav-icon {
  width: var(--cp-nav-icon-box, 1.5rem);
  min-width: var(--cp-nav-icon-box, 1.5rem);
  text-align: center;
  font-size: var(--cp-nav-icon-size, 1rem);
  line-height: 1;
}

.cp-nav-text {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
}

/* A collapsed label is an overlay, never a second label in the link flow. */
.cp-nav-item-tooltip {
  display: none !important;
}

.cp-nav-caret {
  font-size: .8rem;
  opacity: .85;
}

.cp-subnav {
  margin-left: .6rem;
  padding-left: .8rem;
  border-left: 1px solid var(--cp-sidebar-divider, rgba(255,255,255,.12));
  margin-top: .25rem;
}

.cp-subnav .cp-nav-link {
  padding-top: .55rem;
  padding-bottom: .55rem;
}

.cp-sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
}

.cp-sidebar-card {
  border-radius: 1.15rem;
  background: var(--cp-sidebar-card-bg, rgba(255,255,255,.04)) !important;
  border: 1px solid var(--cp-sidebar-card-border, rgba(255,255,255,.10)) !important;
  color: var(--cp-sidebar-card-text, var(--cp-sidebar-text)) !important;
}

.cp-sidebar-card *,
.cp-sidebar-card .fw-bold,
.cp-sidebar-card .cp-code {
  color: var(--cp-sidebar-card-text, var(--cp-sidebar-text)) !important;
}

.cp-sidebar-card .text-muted,
.cp-sidebar-card .text-secondary,
.cp-sidebar-card small,
.cp-sidebar-card .small {
  color: var(--cp-sidebar-card-muted, var(--cp-sidebar-muted)) !important;
}

.cp-sidebar .text-muted,
.cp-sidebar .text-secondary {
  color: var(--cp-sidebar-muted) !important;
}

.cp-subnav-popover {
  display: none;
}

.cp-privacy-header {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.cp-privacy-header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cp-privacy-title {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.2;
}

.cp-privacy-description {
  margin: .35rem 0 0;
  color: var(--cp-text-muted) !important;
  max-width: 72ch;
}

.cp-privacy-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.cp-privacy-actions .cp-privacy-icon-action {
  display: inline-flex;
  flex: 0 0 2rem;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
}

.cp-jurisdiction-option {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  align-items: start;
  gap: .65rem;
  padding: .75rem;
  cursor: pointer;
}

.cp-jurisdiction-option .form-check-input {
  float: none;
  margin: .1rem 0 0;
}

.cp-privacy-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--cp-border);
  padding-bottom: .4rem;
}

.cp-privacy-tab {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: .4rem .8rem;
  border-radius: .45rem .45rem 0 0;
  color: var(--cp-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.cp-privacy-tab:hover {
  color: var(--cp-heading);
  background: color-mix(in srgb, var(--cp-border) 35%, transparent);
}

.cp-privacy-tab.active {
  color: var(--cp-heading);
  border-bottom-color: var(--cp-accent);
  font-weight: 600;
}

.cp-privacy-related-title {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cp-text-muted);
  margin-bottom: .8rem;
}

.cp-privacy-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}

.cp-privacy-related-link {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .85rem .95rem;
  border: 1px solid var(--cp-border);
  border-radius: .45rem;
  text-decoration: none;
  color: inherit;
}

.cp-privacy-related-link:hover {
  border-color: color-mix(in srgb, var(--cp-accent) 45%, var(--cp-border));
  background: color-mix(in srgb, var(--cp-accent) 4%, transparent);
}

.cp-privacy-related-label {
  font-weight: 600;
  color: var(--cp-heading);
}

.cp-privacy-related-description {
  color: var(--cp-text-muted);
  font-size: .9rem;
}

@media (max-width: 768px) {
  .cp-privacy-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: .2rem;
  }

  .cp-privacy-tab {
    white-space: nowrap;
  }
}

/* Collapsed sidebar */
html.cp-sidebar-collapsed .cp-sidebar {
  width: var(--cp-sidebar-width-collapsed);
  min-width: var(--cp-sidebar-width-collapsed);
  max-width: var(--cp-sidebar-width-collapsed);
}

html.cp-sidebar-collapsed .cp-sidebar-inner {
  padding-left: 6px;
  padding-right: 6px;
}

html.cp-sidebar-collapsed .cp-sidebar-brand {
  display: none;
}

html.cp-sidebar-collapsed .cp-sidebar-header {
  justify-content: center;
}

html.cp-sidebar-collapsed .cp-sidebar-section-label,
html.cp-sidebar-collapsed .cp-sidebar-rule,
html.cp-sidebar-collapsed .cp-sidebar .cp-nav-item-label,
html.cp-sidebar-collapsed .cp-sidebar .cp-nav-item-indicator,
html.cp-sidebar-collapsed .cp-sidebar .cp-nav-text,
html.cp-sidebar-collapsed .cp-sidebar .cp-nav-caret,
html.cp-sidebar-collapsed .cp-sidebar-footer,
html.cp-sidebar-collapsed .cp-subnav,
html.cp-sidebar-collapsed .cp-sidebar .collapse {
  display: none !important;
}

html.cp-sidebar-collapsed .cp-nav-link {
  justify-content: center;
  width: 100%;
  min-height: 42px;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

html.cp-sidebar-collapsed .cp-sidebar .cp-nav-icon {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  height: 22px;
  margin: 0;
  transform: none;
}

html.cp-sidebar-collapsed .cp-nav-group {
  position: relative;
  width: 100%;
}

html.cp-sidebar-collapsed .cp-sidebar-nav {
  width: 100%;
}

html:not(.cp-sidebar-collapsed) .cp-nav-item-label {
  display: block;
}

html.cp-sidebar-collapsed .cp-nav-item-tooltip.is-tooltip-open {
  display: block !important;
  position: fixed;
  left: calc(var(--cp-sidebar-width-collapsed) + 8px);
  top: var(--cp-sidebar-tooltip-top, 0);
  z-index: 1080;
  max-width: min(16rem, calc(100vw - var(--cp-sidebar-width-collapsed) - 24px));
  padding: .35rem .55rem;
  color: var(--cp-sidebar-popover-text, var(--cp-sidebar-text, #fff));
  background: var(--cp-sidebar-popover-bg, var(--cp-sidebar-bg, #0e1f33));
  border: 1px solid var(--cp-sidebar-popover-border, rgba(255, 255, 255, .18));
  border-radius: var(--cpd-radius-sm, 3px);
  box-shadow: var(--cp-sidebar-popover-shadow, 0 8px 24px rgba(14, 31, 51, .14));
  font-size: .8125rem;
  font-weight: 650;
  line-height: 1.25;
  pointer-events: none;
  white-space: nowrap;
}

html.cp-sidebar-collapsed .cp-nav-group.is-popover-open .cp-subnav-popover {
  display: block;
  position: fixed;
  left: calc(var(--cp-sidebar-width-collapsed) + 8px);
  top: var(--cp-sidebar-popover-top, 96px);
  width: 290px;
  max-height: min(72vh, calc(100vh - var(--cp-sidebar-popover-top, 96px) - 16px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cp-sidebar-popover-bg, var(--cp-sidebar-bg)) !important;
  color: var(--cp-sidebar-popover-text, var(--cp-sidebar-text)) !important;
  border: 1px solid var(--cp-sidebar-popover-border, var(--cp-sidebar-card-border, rgba(255,255,255,.12)));
  border-radius: var(--cpd-radius-lg, 6px);
  padding: .5rem;
  box-shadow: var(--cp-sidebar-popover-shadow, 0 16px 36px rgba(0,0,0,.28));
  z-index: 1075;
}

/* Collapsed sidebar popovers intentionally do not render a pointer/caret.
   Large submenus are repositioned dynamically; a pointer can imply an
   incorrect source item and confuse navigation. */

html.cp-sidebar-collapsed .cp-nav-group.is-popover-open .cp-subnav-popover .cp-nav-text {
  display: inline !important;
}

html.cp-sidebar-collapsed .cp-nav-group.is-popover-open .cp-subnav-popover .cp-nav-link {
  justify-content: flex-start;
  padding-left: .75rem;
  padding-right: .75rem;
  color: var(--cp-sidebar-popover-text, var(--cp-sidebar-text)) !important;
}

html.cp-sidebar-collapsed .cp-nav-group.is-popover-open .cp-subnav-popover .cp-nav-link:hover,
html.cp-sidebar-collapsed .cp-nav-group.is-popover-open .cp-subnav-popover .cp-nav-link.active {
  color: var(--cp-sidebar-active-text) !important;
  background: var(--cp-sidebar-active-bg) !important;
}

.cp-sidebar-popover-header {
  display: grid;
  gap: 2px;
  margin: 0 0 .5rem;
  padding: .5rem .75rem .75rem;
  border-bottom: 1px solid var(--cp-sidebar-popover-border, rgba(255, 255, 255, .18));
}

.cp-sidebar-popover-header strong {
  color: var(--cp-sidebar-popover-text, var(--cp-sidebar-text, #fff));
  font-size: .9375rem;
}

.cp-sidebar-popover-header span,
.cp-sidebar-popover-section {
  color: var(--cp-sidebar-muted, rgba(255, 255, 255, .72));
  font-size: .75rem;
}

.cp-sidebar-popover-section {
  padding: .75rem .75rem .25rem;
  font-weight: 700;
  letter-spacing: .035em;
}

/* Cards, panels and containers */
.card,
.cp-card,
.cp-section-card,
.cp-panel,
.modal-content,
.dropdown-menu,
.list-group-item {
  background: var(--cp-surface) !important;
  color: var(--cp-text) !important;
  border-color: var(--cp-border) !important;
}

.card-header,
.card-footer {
  background: var(--cp-surface-2) !important;
  color: var(--cp-heading) !important;
  border-color: var(--cp-border) !important;
}

.cp-section-card {
  border-radius: 16px;
}

.cp-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.cp-auth-card {
  width: 100%;
  max-width: 460px;
  border-radius: 18px;
  box-shadow: var(--cp-shadow);
}

.cp-page-subtitle {
  max-width: 900px;
}

.cp-kpi-card {
  border-radius: 18px;
  border-color: var(--cp-border) !important;
}

.cp-kpi-card .h1,
.cp-kpi-card .h2 {
  margin-bottom: 0;
  color: var(--cp-heading) !important;
}

.cp-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-accent-soft, rgba(37,99,235,.12));
  color: var(--cp-accent);
}

.cp-table-actions {
  white-space: nowrap;
}

.cp-code,
code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--cp-surface-2) !important;
  color: var(--cp-text) !important;
  border-color: var(--cp-border) !important;
}

/* Tables */
.table {
  color: var(--cp-text) !important;
  border-color: var(--cp-border) !important;
}

.table th {
  background: var(--cp-surface-2) !important;
  color: var(--cp-heading) !important;
  border-color: var(--cp-border) !important;
}

.table td {
  background: var(--cp-surface) !important;
  color: var(--cp-text) !important;
  border-color: var(--cp-border) !important;
}

.table-hover tbody tr:hover td {
  background: var(--cp-surface-2) !important;
}

/* Forms */
.form-control,
.form-select,
.input-group-text,
textarea,
select,
input {
  background: var(--cp-surface) !important;
  color: var(--cp-text) !important;
  border-color: var(--cp-border) !important;
}

.form-control::placeholder {
  color: var(--cp-text-muted) !important;
}

.form-label,
.col-form-label {
  color: var(--cp-heading) !important;
}

/* Buttons */
.btn-primary,
.brand-mark {
  background: var(--cp-accent) !important;
  border-color: var(--cp-accent) !important;
  color: #fff !important;
}

.btn-outline-primary {
  color: var(--cp-accent) !important;
  border-color: var(--cp-accent) !important;
}

.btn-outline-primary:hover {
  background: var(--cp-accent) !important;
  color: #fff !important;
}

.btn-light,
.btn-outline-secondary,
.btn-secondary {
  background: var(--cp-surface-2) !important;
  color: var(--cp-text) !important;
  border-color: var(--cp-border) !important;
}

.bg-white,
.bg-light {
  background: var(--cp-surface) !important;
  color: var(--cp-text) !important;
}

.text-dark {
  color: var(--cp-text) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--cp-border) !important;
}

/* Role badges */
.cp-badge-role-owner {
  background: var(--cp-role-owner-bg, rgba(37,99,235,.16));
  color: var(--cp-role-owner-text, #93c5fd);
}

.cp-badge-role-admin {
  background: rgba(124,58,237,.16);
  color: #c4b5fd;
}

.cp-badge-role-editor {
  background: rgba(217,119,6,.16);
  color: #fbbf24;
}

.cp-badge-role-viewer {
  background: rgba(148,163,184,.16);
  color: var(--cp-text);
}

.cp-badge-role-auditor {
  background: rgba(124,58,237,.16);
  color: #c4b5fd;
  border: 1px solid rgba(124,58,237,.25);
}

.cp-badge-role-supervisor {
  background: rgba(14,165,233,.16);
  color: #7dd3fc;
  border: 1px solid rgba(14,165,233,.25);
}

.cp-badge-role-operator {
  background: rgba(22,163,74,.16);
  color: #86efac;
  border: 1px solid rgba(22,163,74,.25);
}

/* Grids */
.cp-grid-cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 992px) {
  .cp-grid-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Visual components */
.cp-hero-card {
  border-radius: 22px;
  background: linear-gradient(135deg, var(--cp-hero-accent-bg, rgba(37,99,235,.10)), var(--cp-surface));
  border: 1px solid var(--cp-border);
}

.cp-lifecycle-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.cp-lifecycle-step {
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  padding: .45rem .75rem;
  font-size: .85rem;
  color: var(--cp-text-muted);
  background: var(--cp-surface);
}

.cp-lifecycle-step.active {
  color: #fff;
  background: var(--cp-accent);
  border-color: var(--cp-accent);
}

.cp-lifecycle-step.done {
  color: var(--cp-accent);
  border-color: var(--cp-accent);
}

.cp-lifecycle-arrow {
  color: var(--cp-text-muted);
}

.cp-timeline {
  position: relative;
  padding-left: 1.25rem;
}

.cp-timeline::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .25rem;
  bottom: .25rem;
  width: 2px;
  background: var(--cp-border);
}

.cp-timeline-item {
  position: relative;
  padding-bottom: 1rem;
}

.cp-timeline-item::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: .2rem;
  width: .65rem;
  height: .65rem;
  border-radius: 999px;
  background: var(--cp-accent);
  box-shadow: 0 0 0 4px var(--cp-accent-soft, rgba(37,99,235,.15));
}

.cp-public-verify {
  max-width: 960px;
  margin: 2rem auto;
  padding: 1rem;
}

.cp-public-card {
  border-radius: 24px;
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow);
}

.cp-theme-btn.active {
  background: var(--cp-accent) !important;
  color: #fff !important;
  border-color: var(--cp-accent) !important;
}

.cp-mobile-only {
  display: none !important;
}

.cp-desktop-only {
  display: initial !important;
}

.cp-mobile-sidebar-backdrop {
  display: none;
}

/* =========================================================
   Icon fallback layer
   ---------------------------------------------------------
   The project must not depend on bundled font files for the
   sidebar and core UI. These rules override Font Awesome's
   private-unicode glyphs when webfonts are unavailable.
   ========================================================= */
.fa-solid,
.fas,
.fa-regular,
.far {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  min-width: 1.15em;
  height: 1.15em;
  text-rendering: auto;
}

.fa-solid::before,
.fas::before,
.fa-regular::before,
.far::before {
  content: "•";
  font-family: inherit !important;
}

.fa-solid.fa-bars::before { content: var(--cp-icon-bars, "☰"); }
.fa-solid.fa-language::before { content: var(--cp-icon-language, "A"); font-size: .82em; }
.fa-solid.fa-gauge-high::before { content: var(--cp-icon-dashboard, "◉"); }
.fa-solid.fa-building-circle-check::before { content: var(--cp-icon-tenant-current, "▦"); }
.fa-solid.fa-list-check::before { content: var(--cp-icon-operation, "☷"); }
.fa-solid.fa-chevron-down::before { content: var(--cp-icon-chevron, "⌄"); }
.fa-solid.fa-inbox::before { content: var(--cp-icon-inbox, "▣"); }
.fa-solid.fa-folder-tree::before { content: var(--cp-icon-cases, "▤"); }
.fa-solid.fa-certificate::before { content: var(--cp-icon-evidence, "◆"); }
.fa-solid.fa-scale-balanced::before { content: var(--cp-icon-normative, "⚖"); }
.fa-solid.fa-code-branch::before { content: var(--cp-icon-kernel, "◇"); }
.fa-solid.fa-route::before { content: var(--cp-icon-flow, "↝"); }
.fa-solid.fa-user-shield::before { content: var(--cp-icon-access, "▰"); }
.fa-solid.fa-sliders::before { content: var(--cp-icon-tenant, "≡"); }
.fa-solid.fa-building::before { content: var(--cp-icon-building, "▦"); }
.fa-solid.fa-palette::before { content: var(--cp-icon-theme, "◌"); }
.fa-solid.fa-users::before { content: var(--cp-icon-users, "⋯"); }
.fa-solid.fa-people-group::before { content: var(--cp-icon-groups, "⋮"); }
.fa-solid.fa-envelope-open-text::before { content: var(--cp-icon-invitation, "✉"); }
.fa-solid.fa-shield-halved::before { content: var(--cp-icon-security, "◇"); }
.fa-solid.fa-clipboard-list::before { content: var(--cp-icon-audit, "☷"); }
.fa-solid.fa-envelope::before { content: var(--cp-icon-mail, "✉"); }
.fa-solid.fa-envelope-circle-check::before { content: var(--cp-icon-mail-global, "✉"); }
.fa-solid.fa-file-lines::before { content: var(--cp-icon-template, "▧"); }
.fa-solid.fa-file-pdf::before { content: var(--cp-icon-pdf, "PDF"); font-size: .55em; letter-spacing: .02em; }
.fa-solid.fa-toolbox::before { content: var(--cp-icon-tools, "▣"); }
.fa-solid.fa-file-import::before { content: var(--cp-icon-import, "⇥"); }
.fa-solid.fa-diagram-project::before { content: var(--cp-icon-flow-import, "⌘"); }
.fa-solid.fa-file-export::before { content: var(--cp-icon-export, "⇤"); }
.fa-solid.fa-key::before { content: var(--cp-icon-key, "⚿"); }
.fa-solid.fa-screwdriver-wrench::before { content: var(--cp-icon-system, "⚙"); }
.fa-solid.fa-file-contract::before { content: var(--cp-icon-contract, "▨"); }
.fa-solid.fa-user-gear::before { content: var(--cp-icon-user-gear, "◍"); }
.fa-solid.fa-id-card-clip::before { content: var(--cp-icon-membership, "▭"); }
.fa-solid.fa-layer-group::before { content: var(--cp-icon-layers, "▥"); }
.fa-solid.fa-folder-plus::before { content: var(--cp-icon-plus, "+"); }
.fa-solid.fa-arrow-right::before { content: var(--cp-icon-arrow, "→"); }
.fa-solid.fa-check::before { content: var(--cp-icon-check, "✓"); }
.fa-solid.fa-circle-check::before { content: var(--cp-icon-check-circle, "✓"); }
.fa-solid.fa-play::before { content: var(--cp-icon-play, "▶"); }
.fa-solid.fa-lock::before { content: var(--cp-icon-lock, "⌾"); }
.fa-solid.fa-folder-open::before { content: var(--cp-icon-folder-open, "▤"); }
.fa-solid.fa-vial-circle-check::before { content: var(--cp-icon-sandbox, "✓"); }

.cp-nav-icon .fa-solid,
.cp-nav-icon .fas,
.cp-nav-icon .fa-regular,
.cp-nav-icon .far {
  width: var(--cp-nav-icon-box, 1.5rem);
  min-width: var(--cp-nav-icon-box, 1.5rem);
  height: var(--cp-nav-icon-box, 1.5rem);
  font-size: var(--cp-nav-icon-size, 1rem);
  line-height: var(--cp-nav-icon-box, 1.5rem);
  color: inherit;
}

.cp-nav-caret .fa-solid,
.cp-nav-caret .fas {
  width: var(--cp-nav-caret-box, 1rem);
  min-width: var(--cp-nav-caret-box, 1rem);
  height: var(--cp-nav-caret-box, 1rem);
  font-size: var(--cp-nav-caret-size, .8rem);
}
.fa-solid.fa-broom::before { content: var(--cp-icon-cleanup, "⌫"); }

/* =========================================================
   SVG icon system - navigation/editor
   ========================================================= */
.cp-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: currentColor;
}

.cp-svg-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.cp-nav-icon.cp-svg-icon {
  width: var(--cp-nav-icon-box, calc(1.5rem * var(--cp-icon-scale, 1)));
  min-width: var(--cp-nav-icon-box, calc(1.5rem * var(--cp-icon-scale, 1)));
  height: var(--cp-nav-icon-box, calc(1.5rem * var(--cp-icon-scale, 1)));
}

.cp-caret-icon.cp-svg-icon {
  width: var(--cp-nav-caret-box, calc(1rem * var(--cp-icon-scale, 1)));
  min-width: var(--cp-nav-caret-box, calc(1rem * var(--cp-icon-scale, 1)));
  height: var(--cp-nav-caret-box, calc(1rem * var(--cp-icon-scale, 1)));
}

.cp-button-icon.cp-svg-icon,
.cp-inline-icon.cp-svg-icon {
  width: calc(1.1rem * var(--cp-icon-scale, 1));
  min-width: calc(1.1rem * var(--cp-icon-scale, 1));
  height: calc(1.1rem * var(--cp-icon-scale, 1));
}

.editor-subnav-icon.cp-svg-icon {
  width: calc(1.25rem * var(--cp-icon-scale, 1));
  min-width: calc(1.25rem * var(--cp-icon-scale, 1));
  height: calc(1.25rem * var(--cp-icon-scale, 1));
  margin-right: .75rem;
  color: currentColor;
}

.editor-subnav-link {
  display: flex !important;
  align-items: center;
  gap: .25rem;
}

.editor-subnav-link.active .editor-subnav-icon,
.editor-subnav-link:hover .editor-subnav-icon,
.cp-nav-link.active .cp-svg-icon,
.cp-nav-link:hover .cp-svg-icon {
  color: currentColor;
}

/* =========================================================
   Forms designer icon fallback and scalable button icons
   ========================================================= */
.btn .cp-button-icon,
.forms-actions .cp-button-icon,
.forms-section-title .cp-button-icon {
  width: calc(1.05rem * var(--cp-icon-scale, 1));
  min-width: calc(1.05rem * var(--cp-icon-scale, 1));
  height: calc(1.05rem * var(--cp-icon-scale, 1));
  margin-right: .35rem;
  vertical-align: -0.18em;
}

.btn-sm .cp-button-icon,
.forms-actions .btn-sm .cp-button-icon,
.forms-section-title .btn-sm .cp-button-icon {
  width: calc(.95rem * var(--cp-icon-scale, 1));
  min-width: calc(.95rem * var(--cp-icon-scale, 1));
  height: calc(.95rem * var(--cp-icon-scale, 1));
  margin-right: 0;
}

.forms-section-title .btn-link .cp-button-icon {
  color: var(--cp-accent);
}

.forms-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
}

/* FontAwesome-free fallback for forms/templates still using <i class="fa-solid ..."> */
.fa-solid.fa-eye::before { content: var(--cp-icon-preview, "◉"); }
.fa-solid.fa-rotate-left::before { content: var(--cp-icon-discard, "↶"); }
.fa-solid.fa-floppy-disk::before { content: var(--cp-icon-save, "▣"); }
.fa-solid.fa-cloud-arrow-up::before { content: var(--cp-icon-publish, "⇧"); }
.fa-solid.fa-trash::before { content: var(--cp-icon-trash, "⌫"); }
.fa-solid.fa-pen::before { content: var(--cp-icon-edit, "✎"); }
.fa-solid.fa-xmark::before { content: var(--cp-icon-close, "×"); }
.fa-solid.fa-plus::before { content: var(--cp-icon-plus, "+"); }
.fa-solid.fa-shield-halved::before { content: var(--cp-icon-access, "▰"); }

.btn .fa-solid,
.forms-actions .fa-solid,
.forms-section-title .fa-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(1.05rem * var(--cp-icon-scale, 1));
  min-width: calc(1.05rem * var(--cp-icon-scale, 1));
  height: calc(1.05rem * var(--cp-icon-scale, 1));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 700;
  font-size: calc(1rem * var(--cp-icon-scale, 1));
  line-height: 1;
}

/* =========================================================
   Topbar context controls
   Contexto actual movido desde sidebar al topbar.
   ========================================================= */
.cp-topbar-inner {
  min-height: 56px;
}

.cp-topbar-actions {
  min-width: 0;
  flex-wrap: nowrap;
}

.cp-theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: rgba(var(--cp-surface-rgb), .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.cp-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--cp-text-muted);
  background: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.cp-theme-btn:hover {
  color: var(--cp-text);
  background: color-mix(in srgb, var(--cp-surface-2) 84%, transparent);
}

.cp-theme-btn:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}

.cp-theme-btn.active {
  color: var(--cp-primary-contrast, #ffffff);
  background: var(--cp-primary, var(--cp-accent));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--cp-primary, var(--cp-accent)) 26%, transparent);
}

.cp-theme-switcher--menu {
  width: fit-content;
}

.cp-tenant-switch {
  min-width: 220px;
  max-width: 320px;
}

.cp-current-tenant-badge {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--cp-surface-2) !important;
  color: var(--cp-text) !important;
  border: 1px solid var(--cp-border);
}

.cp-user-dropdown-label {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-user-menu {
  min-width: 260px;
}

@media (max-width: 991.98px) {
  .cp-topbar-actions {
    gap: .35rem !important;
  }
  .cp-topbar-actions .cp-theme-switcher,
  .cp-locale-dropdown,
  .cp-user-dropdown-label {
    display: none !important;
  }
  .cp-tenant-switch {
    min-width: 140px;
    max-width: 44vw;
  }
}

@media (max-width: 575.98px) {
  .cp-current-tenant-badge,
  .cp-tenant-switch-form {
    display: none !important;
  }
}

/* Boolean fields: checked/unchecked state must be visually explicit */
.form-check-input {
  width: 1.35rem !important;
  height: 1.35rem !important;
  min-width: 1.35rem !important;
  border: 2px solid var(--cp-border) !important;
  background-color: var(--cp-surface) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--cp-accent) !important;
  border-color: var(--cp-accent) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}

.form-check-input:checked[type="checkbox"] {
  background-image: none !important;
  position: relative;
}

.form-check-input:checked[type="checkbox"]::after {
  content: "✓";
  display: block;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1rem;
  text-align: center;
}

.form-check-input:focus {
  border-color: var(--cp-accent) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.22) !important;
}

.form-check-label {
  cursor: pointer;
}

/* =========================================================
   Andes Enterprise Graphite - UI refresh v1
   Shell, cards, tables, forms and editor workspace alignment
   ========================================================= */

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background:
    radial-gradient(circle at top left, rgba(39, 166, 209, .10), transparent 28rem),
    radial-gradient(circle at 85% 12%, rgba(14, 90, 122, .14), transparent 24rem),
    var(--cp-bg) !important;
}

.cp-main {
  min-height: 100vh;
}

.cp-topbar {
  min-height: 72px;
  position: sticky;
  top: 0;
  z-index: 15;
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

.cp-topbar-inner {
  min-height: 72px;
}

.cp-product-lockup {
  display: grid;
  gap: .1rem;
}

.cp-product-name {
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--cp-heading) !important;
  line-height: 1.15;
}

.cp-product-subtitle {
  max-width: 42rem;
  color: var(--cp-text-muted) !important;
  font-size: .82rem;
  line-height: 1.1;
}

.cp-current-tenant-badge,
.cp-tenant-switch {
  border-color: var(--cp-border) !important;
  background: rgba(var(--cp-surface-rgb), .72) !important;
  color: var(--cp-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.cp-current-tenant-badge {
  padding: .55rem .72rem;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  font-weight: 700;
}

.cp-locale-dropdown .btn,
.cp-user-dropdown .btn,
.cp-mobile-only.btn {
  border-color: var(--cp-border) !important;
  background: rgba(var(--cp-surface-rgb), .58) !important;
  color: var(--cp-text) !important;
}

.cp-locale-dropdown .btn:hover,
.cp-user-dropdown .btn:hover {
  border-color: rgba(39,166,209,.44) !important;
  background: rgba(39,166,209,.12) !important;
}

.cp-sidebar {
  box-shadow: 20px 0 48px rgba(0,0,0,.16);
  background:
    linear-gradient(180deg, var(--cp-sidebar-bg-2), var(--cp-sidebar-bg)) !important;
}

.cp-sidebar-inner {
  padding: 1.05rem .9rem;
}

.brand-mark {
  min-width: 86px;
  height: 40px;
  border-radius: 1rem;
  background: transparent !important;
  border: 1px solid rgba(39, 166, 209, .34);
  box-shadow: inset 0 0 24px rgba(39, 166, 209, .10);
  color: #f8fafc !important;
}

.cp-sidebar-brand-logo {
  max-height: 44px;
}

.cp-nav-link {
  position: relative;
  min-height: 42px;
  border: 1px solid transparent;
  font-weight: 650;
  letter-spacing: -.01em;
}

.cp-nav-link:hover {
  border-color: rgba(39, 166, 209, .14);
  transform: translateX(1px);
}

.cp-nav-link.active {
  background: var(--cp-sidebar-active-bg) !important;
  box-shadow: 0 12px 28px rgba(14,90,122,.22), inset 0 1px 0 rgba(255,255,255,.14);
}

.cp-sidebar-section-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.cp-subnav {
  margin-top: .4rem;
  margin-bottom: .4rem;
}

.cp-subnav .cp-nav-link {
  min-height: 36px;
  font-weight: 560;
  font-size: .9rem;
}

.cp-sidebar-footer .cp-sidebar-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.page-body {
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

.card,
.cp-card,
.editor-subsidebar-card,
.dropdown-menu,
.modal-content {
  border: 1px solid var(--cp-border) !important;
  border-radius: var(--cp-radius-lg) !important;
  background: rgba(var(--cp-surface-rgb), .88) !important;
  color: var(--cp-text) !important;
  box-shadow: var(--cp-shadow-soft);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  border-color: var(--cp-border) !important;
  background: transparent !important;
}

.table,
.table-vcenter {
  --tblr-table-bg: transparent;
  color: var(--cp-text) !important;
}

.table thead th {
  color: var(--cp-text-muted) !important;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom-color: var(--cp-border-strong) !important;
}

.table tbody td {
  border-top-color: var(--cp-border) !important;
}

.form-control,
.form-select,
.input-group-text,
textarea,
select {
  border-color: var(--cp-border) !important;
  background-color: rgba(var(--cp-surface-rgb), .72) !important;
  color: var(--cp-text) !important;
  border-radius: .85rem !important;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(39,166,209,.62) !important;
  box-shadow: 0 0 0 .18rem rgba(39,166,209,.12) !important;
}

.btn {
  border-radius: .82rem !important;
  font-weight: 650;
}

.btn-primary {
  border-color: rgba(39,166,209,.82) !important;
  background: linear-gradient(135deg, #0e5a7a, #27a6d1) !important;
  box-shadow: 0 12px 24px rgba(14,90,122,.22);
}

.badge,
.status,
.type-pill {
  border-radius: 999px !important;
}

.list-group,
.list-group-item {
  background: transparent !important;
  color: var(--cp-text) !important;
  border-color: var(--cp-border) !important;
}

.editor-workspace {
  margin-top: 1rem;
}

.editor-subsidebar-card {
  overflow: hidden;
}

.editor-subnav-link,
.editor-subsidebar .list-group-item {
  border-radius: .85rem !important;
  margin: .18rem .35rem;
  border: 1px solid transparent !important;
}

.editor-subnav-link.active,
.editor-subsidebar .list-group-item.active {
  background: rgba(39,166,209,.15) !important;
  border-color: rgba(39,166,209,.34) !important;
  color: var(--cp-heading) !important;
}

.editor-main-content > .card,
.editor-main-content .card {
  box-shadow: var(--cp-shadow-soft);
}

.preview-code-block,
.code-snippet,
.report-code,
.report-pretty-json {
  border-color: var(--cp-border) !important;
  border-radius: 1rem !important;
}

.cp-status-dot,
.status-dot {
  box-shadow: 0 0 0 4px rgba(56,182,106,.10);
}

@media (max-width: 991.98px) {
  .cp-topbar-actions .cp-theme-switcher,
  .cp-topbar-actions .cp-locale-dropdown {
    display: none !important;
  }

  .cp-product-subtitle {
    max-width: 15rem;
  }
}

/* =========================================================
   Theme personality runtime layer
   These rules consume CSS variables generated from theme.json style_tokens.
   They let themes change density, radius, shadows, cards, tables and login
   atmosphere without changing functional templates.
   ========================================================= */

body,
.card,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.table,
.cp-sidebar,
.cp-topbar {
  transition-duration: var(--cp-theme-transition, 160ms);
}

.card,
.cp-section-card,
.cp-kpi-card,
.cp-auth-card,
.cp-editor-card,
.cp-modal-card {
  border-radius: var(--cp-radius-card, 1rem) !important;
  box-shadow: var(--cp-shadow-soft, 0 8px 24px rgba(15,23,42,.09));
}

.btn,
.badge,
.form-control,
.form-select,
.dropdown-menu,
.modal-content,
.alert {
  border-radius: var(--cp-radius-sm, .75rem) !important;
}

.container-xl,
.cp-main .page-body,
.cp-page-body {
  --cp-local-section-padding: var(--cp-section-padding, .75rem);
}

.table > :not(caption) > * > * {
  padding: var(--cp-table-cell-padding, .65rem .8rem);
}

.card-body,
.cp-panel-body {
  padding: var(--cp-card-padding, .9rem);
}

:root[style*="--cp-theme-card-style: glass"],
body[data-card-style="glass"] {
  --cp-card-border-alpha: .16;
}

.card,
.cp-kpi-card,
.cp-section-card {
  background: var(--cp-surface) !important;
  border-color: var(--cp-border) !important;
}

/* Visual profiles controlled by generated CSS custom properties. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .72;
  background:
    radial-gradient(circle at top left, rgba(var(--cp-accent-rgb, 37,99,235), .14), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(var(--cp-accent-rgb, 37,99,235), .08), transparent 36rem);
}

.cp-topbar {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.badge,
.cp-status-badge,
.cp-kernel-state-badge {
  box-shadow: none;
}

/* Login / cloud entry point */
.cp-auth-shell {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(var(--cp-accent-rgb, 39,166,209), .22), transparent 32rem),
    radial-gradient(circle at 82% 20%, rgba(14,90,122,.22), transparent 34rem),
    linear-gradient(135deg, var(--cp-bg), var(--cp-surface-2));
}

.cp-auth-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, #000 0, transparent 72%);
  opacity: .48;
}

.cp-auth-shell::after {
  content: "";
  position: absolute;
  width: 60rem;
  height: 60rem;
  right: -22rem;
  bottom: -28rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--cp-accent-rgb, 39,166,209), .16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 120px rgba(var(--cp-accent-rgb, 39,166,209), .18);
  opacity: .9;
}

.cp-auth-card {
  position: relative;
  z-index: 1;
  background: rgba(var(--cp-surface-rgb, 255,255,255), .86) !important;
  border: 1px solid rgba(var(--cp-accent-rgb, 37,99,235), .16) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--cp-shadow, 0 24px 72px rgba(0,0,0,.22));
}

.cp-auth-cloud-panel {
  position: relative;
  z-index: 1;
  max-width: 520px;
  color: var(--cp-heading);
}

.cp-auth-cloud-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--cp-accent-soft, rgba(37,99,235,.12));
  color: var(--cp-accent-strong, var(--cp-accent));
  border: 1px solid rgba(var(--cp-accent-rgb, 37,99,235), .18);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cp-auth-cloud-title {
  margin: 1rem 0 .75rem;
  font-size: clamp(2rem, 4vw, 3.65rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--cp-heading);
}

.cp-auth-cloud-copy {
  max-width: 34rem;
  color: var(--cp-text-muted);
  font-size: 1.05rem;
}

.cp-auth-cloud-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.4rem;
}

.cp-auth-cloud-chip {
  padding: .75rem;
  border-radius: var(--cp-radius-card, 1rem);
  background: rgba(var(--cp-surface-rgb, 255,255,255), .62);
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cp-auth-cloud-chip strong {
  display: block;
  color: var(--cp-heading);
  font-size: .86rem;
}

.cp-auth-cloud-chip span {
  display: block;
  color: var(--cp-text-muted);
  font-size: .75rem;
  margin-top: .2rem;
}

.cp-auth-wrap {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 460px);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 991.98px) {
  .cp-auth-wrap {
    grid-template-columns: 1fr;
  }
  .cp-auth-cloud-panel {
    text-align: center;
    margin-inline: auto;
  }
  .cp-auth-cloud-copy {
    margin-inline: auto;
  }
  .cp-auth-cloud-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Sidebar width safety guard
   ---------------------------------------------------------
   Theme personality may alter density, shadows and visual tone,
   but it must not force the expanded sidebar into a collapsed
   width. The collapsed state is controlled only by the
   cp-sidebar-collapsed class. This prevents labels from spilling
   over the main workspace when a theme declares sidebar=compact.
   ========================================================= */
html:not(.cp-sidebar-collapsed) .cp-sidebar {
  width: max(var(--cp-sidebar-width, 292px), 280px);
  min-width: max(var(--cp-sidebar-width, 292px), 280px);
  max-width: max(var(--cp-sidebar-width, 292px), 340px);
}

html:not(.cp-sidebar-collapsed) .cp-nav-text,
html:not(.cp-sidebar-collapsed) .cp-nav-caret,
html:not(.cp-sidebar-collapsed) .cp-sidebar-section-label,
html:not(.cp-sidebar-collapsed) .cp-sidebar-rule,
html:not(.cp-sidebar-collapsed) .cp-subnav {
  display: revert;
}

html:not(.cp-sidebar-collapsed) .cp-nav-link {
  overflow: hidden;
}

html:not(.cp-sidebar-collapsed) .cp-nav-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kernel lifecycle panel */
.cp-lifecycle-stepper-fluid {
  width: 100%;
}

.cp-lifecycle-stepper-fluid .cp-lifecycle-step {
  flex: 1 1 8.5rem;
  min-width: 7.5rem;
  text-align: center;
}

.cp-kernel-state-actions form {
  margin: 0;
}

/*
 * Tabler's scrollable modal layout expects header, body and footer to be
 * direct children of .modal-content. Our modal forms intentionally wrap the
 * body and footer so the submit action remains a real form. Make that wrapper
 * the flex item that may shrink, then scroll only the modal body.
 */
.modal-dialog-scrollable > .modal-content > .cp-scrollable-modal-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.modal-dialog-scrollable > .modal-content > .cp-scrollable-modal-form > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}