/* Load after Tabler, tokens.css and components.css. Keep Tabler shape defaults. */
:root {
  --tblr-primary: var(--cx-brand);
  --tblr-primary-rgb: 0, 95, 199;
  --tblr-primary-darken: var(--cx-brand-hover);
  --tblr-primary-lt: var(--cx-brand-soft);
  --tblr-link-color: var(--cx-code);
  --tblr-link-hover-color: var(--cx-brand-hover);
  --tblr-secondary: var(--cx-muted);
  --tblr-success: var(--cx-success);
  --tblr-green: var(--cx-success);
  --tblr-body-color: var(--cx-ink);
  --tblr-body-bg: var(--cx-canvas);
  --tblr-border-color: var(--cx-rule);
  --tblr-font-sans-serif: var(--cx-font);
  --tblr-font-monospace: var(--cx-font-mono);
  --tblr-body-font-family: var(--cx-font);
}

body.page { font-family: var(--cx-font); }
.l8-app-header.cx-masthead {
  display: flex;
  min-height: var(--cx-header);
  height: auto;
  padding: 0;
  gap: 0;
  background: var(--cx-paper);
  color: var(--cx-ink);
  border-bottom: var(--cx-line) solid var(--cx-rule);
}
.l8-app-header > .container-fluid { min-height: var(--cx-header); gap: var(--cx-space-3); padding-inline: var(--cx-space-6); }
.l8-brand { display: flex; align-items: center; gap: var(--cx-space-4); min-width: 0; padding-block: var(--cx-space-2); color: var(--cx-ink); white-space: normal; }
.l8-brand:hover { color: var(--cx-brand); text-decoration: none; }
.l8-brand .cx-header-logo { width: 104px; flex: 0 0 104px; margin: 0; }
.l8-product-name { font-size: var(--cx-text-lead); line-height: 1.35; font-weight: var(--cx-weight-label); overflow-wrap: anywhere; }
.l8-app-header .cx-header-tools { margin-left: auto; gap: var(--cx-space-2); flex-shrink: 0; }
.l8-app-header .cx-header-tools .cx-nav-action { border-bottom: 0; color: var(--cx-ink); border-radius: var(--tblr-border-radius); }
.l8-app-header .cx-header-tools .cx-nav-action:hover { background: var(--cx-brand-soft); }
.l8-app-header .cx-avatar { color: var(--cx-brand); background: var(--cx-brand-soft); border-color: var(--cx-rule); border-radius: var(--tblr-border-radius); }
.l8-user-menu { position: relative; }
.l8-user-menu > summary { display: flex; align-items: center; gap: var(--cx-space-2); min-height: var(--cx-control-height); cursor: pointer; list-style: none; border-radius: var(--tblr-border-radius); padding: var(--cx-space-2); }
.l8-user-menu > summary::-webkit-details-marker { display: none; }
.l8-user-menu .dropdown-menu { position: absolute; inset: 100% 0 auto auto; min-width: 180px; max-width: calc(100vw - var(--cx-space-8)); margin-top: var(--cx-space-1); z-index: var(--cx-z-drawer); }
.l8-user-menu[open] .dropdown-menu { display: block; }
.l8-user-menu .dropdown-item { min-height: var(--cx-control-height); display: flex; align-items: center; white-space: normal; }

.l8-app-body { display: flex; align-items: stretch; flex: 1; min-width: 0; }
.l8-sidebar {
  position: sticky;
  top: var(--cx-header);
  align-self: flex-start;
  width: var(--cx-sidebar);
  flex: 0 0 var(--cx-sidebar);
  height: calc(100dvh - var(--cx-header));
  overflow-y: auto;
  background: var(--cx-brand-night);
  color: var(--cx-on-brand);
  padding: var(--cx-space-4) var(--cx-space-3);
}
.l8-navigation-toggle { min-width: 0; }
.l8-sidebar .l8-primary-navigation.cx-global-nav { display: block; height: auto; gap: 0; }
.l8-navigation-group { margin-bottom: var(--cx-space-4); }
.l8-sidebar .navbar-heading { color: var(--cx-on-brand); opacity: 1; font-size: var(--cx-text-table); font-weight: var(--cx-weight-label); padding: var(--cx-space-2) var(--cx-space-3); margin: 0; }
.l8-sidebar .nav-item { display: block; }
.l8-sidebar .l8-primary-navigation .nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--cx-control-height);
  padding: var(--cx-space-2) var(--cx-space-3);
  gap: var(--cx-space-3);
  color: var(--cx-on-brand);
  border: 0;
  border-radius: var(--tblr-border-radius);
  white-space: normal;
  overflow-wrap: anywhere;
}
.l8-sidebar .nav-link-icon { color: inherit; opacity: 1; flex: 0 0 20px; }
.l8-sidebar .nav-link-title { min-width: 0; }
.l8-sidebar .l8-primary-navigation .nav-link:hover,
.l8-sidebar .l8-primary-navigation .nav-link[aria-current="page"] { color: var(--cx-on-brand); background: var(--cx-brand); }
.l8-sidebar .l8-primary-navigation .nav-link[aria-current="page"] { box-shadow: inset var(--cx-line-accent) 0 var(--cx-brand-middle); }
.l8-navigation-summary { min-height: var(--cx-control-height); cursor: pointer; align-items: center; padding: var(--cx-space-2) var(--cx-space-3); font-weight: var(--cx-weight-label); }
.l8-page-wrapper.page-wrapper { flex: 1; min-width: 0; margin: 0; }
.l8-page-wrapper > .cx-page { width: 100%; margin: 0 auto; padding-bottom: var(--cx-space-6); }
.l8-page-wrapper .cx-environment { position: static; }
.l8-page-wrapper .cx-footer { margin-bottom: 0; }

/* The CX adapter preserves existing macros while matching native Tabler cards. */
.cx-panel, .cx-inspector, .cx-decision-list, .cx-two-column > section, .cx-upload-zone {
  border: var(--cx-line) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  background: var(--cx-paper);
  box-shadow: var(--tblr-shadow-card);
}
.cx-panel-header, .cx-inspector-header { padding: var(--cx-space-4) var(--cx-space-5); min-height: 56px; }
.cx-panel-body { padding: var(--cx-space-5); }
.cx-metric-row, .cx-kpis { gap: var(--cx-space-4); background: transparent; border: 0; }
.cx-metric-row > *, .cx-kpi { min-width: 0; padding: var(--cx-space-4) var(--cx-space-5); border: var(--cx-line) solid var(--cx-rule); border-radius: var(--tblr-border-radius-lg); background: var(--cx-paper); box-shadow: var(--tblr-shadow-card); }
.cx-kpi:last-child { border: var(--cx-line) solid var(--cx-rule); }
.cx-kpi-value { font-weight: var(--cx-weight-label); }
.cx-table-wrap { border-radius: var(--tblr-border-radius-lg); background: var(--cx-paper); max-width: 100%; overflow: auto; }
.cx-table { font-size: var(--cx-text-body); }
.cx-table th { font-size: var(--cx-text-table); font-weight: var(--cx-weight-label); background: var(--cx-canvas); }
.cx-table th, .cx-table td { padding: var(--cx-space-3) var(--cx-space-4); }
.table { --tblr-table-color: var(--cx-ink); }
.badge, .cx-badge { border-radius: var(--tblr-border-radius); font-weight: var(--cx-weight-label); }
.cx-badge { border: 0; white-space: normal; overflow-wrap: anywhere; }
/* Tabler utility colors are important; badge-only overrides keep known AA pairs. */
.cx-badge--generated, .badge.bg-green-lt { color: var(--cx-success) !important; background-color: var(--cx-success-soft) !important; }
.cx-badge--assembled, .badge.bg-blue-lt { color: var(--cx-code) !important; background-color: var(--cx-code-soft) !important; }
.cx-badge--placeholder, .badge.bg-yellow-lt { color: var(--cx-warning) !important; background-color: var(--cx-warning-soft) !important; }
.cx-badge--unconnected, .badge.bg-secondary-lt { color: var(--cx-neutral) !important; background-color: var(--cx-neutral-soft) !important; }
.cx-empty { justify-content: center; flex-direction: column; text-align: center; padding: var(--cx-space-10) var(--cx-space-6); border-radius: var(--tblr-border-radius-lg); }
.cx-empty img { width: 90px; }
.cx-callout, .cx-banner { border-radius: var(--tblr-border-radius); }

.btn, .cx-btn { min-height: var(--cx-control-height); border-radius: var(--tblr-border-radius); }
.btn-primary, .cx-btn--primary { color: var(--cx-on-brand); background: var(--cx-brand); border-color: var(--cx-brand); }
.btn-primary:hover, .cx-btn--primary:hover { color: var(--cx-on-brand); background: var(--cx-brand-hover); border-color: var(--cx-brand-hover); }
.btn:disabled, .btn[aria-disabled="true"], .cx-btn:disabled, .cx-btn[aria-disabled="true"] { color: var(--cx-muted); background: var(--cx-neutral-soft); border-color: var(--cx-rule); }
.form-control, .form-select, .cx-input, .cx-field input, .cx-field select, .cx-field textarea {
  min-height: var(--cx-control-height);
  color: var(--cx-ink);
  background-color: var(--cx-paper);
  border-color: var(--cx-control);
  border-radius: var(--tblr-border-radius);
}
.form-control::placeholder, .cx-input::placeholder { color: var(--cx-muted); opacity: 1; }
.form-label { font-weight: var(--cx-weight-label); }
.form-check-input { accent-color: var(--cx-brand); }
.form-control[aria-invalid="true"], .form-select[aria-invalid="true"], .cx-input[aria-invalid="true"] { border-color: var(--cx-danger); }
.invalid-feedback, .form-text.text-danger { color: var(--cx-danger); }
:focus-visible { outline: var(--cx-focus-width) solid var(--cx-focus); outline-offset: var(--cx-focus-offset); }
.l8-sidebar :focus-visible, .cx-brand-band :focus-visible { outline-color: var(--cx-on-brand); }
.l8-app-header.cx-masthead :focus-visible { outline-color: var(--cx-focus); }
:is(.btn, .form-control, .form-select, .cx-btn, .cx-input):focus-visible { outline: var(--cx-focus-width) solid var(--cx-focus); outline-offset: var(--cx-focus-offset); }

@media (min-width: 992px) {
  .l8-navigation-summary { display: none; }
  .l8-navigation-toggle::details-content { content-visibility: visible; display: block; }
  .l8-navigation-toggle:not([open]) > .l8-primary-navigation { display: block; }
}
@media (min-width: 1400px) {
  .l8-sidebar { width: 240px; flex-basis: 240px; }
}
@media (max-width: 991px) {
  .l8-app-body { display: block; }
  .l8-sidebar { position: static; width: 100%; height: auto; padding: var(--cx-space-1) var(--cx-space-3); overflow: visible; }
  .l8-navigation-summary { display: flex; gap: var(--cx-space-2); }
  .l8-navigation-toggle[open] > .l8-primary-navigation { display: block; padding-top: var(--cx-space-2); }
  .l8-sidebar .l8-primary-navigation { max-height: 60dvh; overflow-y: auto; padding: var(--cx-space-1); }
  .l8-page-wrapper .cx-workbench { min-height: 0; }
  .l8-page-wrapper .cx-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .l8-app-header.cx-masthead { display: flex; position: sticky; }
  .l8-app-header > .container-fluid { padding-inline: var(--cx-space-4); flex-wrap: nowrap; gap: var(--cx-space-2); }
  .l8-brand { gap: var(--cx-space-2); flex: 1; }
  .l8-brand .cx-header-logo { width: 80px; flex-basis: 80px; }
  .l8-product-name { font-size: var(--cx-text-body); }
  .l8-app-header .cx-header-tools { gap: var(--cx-space-1); }
  .l8-app-header .cx-search, .l8-app-header .cx-environment-label { display: none; }
  .l8-user-menu > summary { padding-inline: var(--cx-space-1); }
  .l8-page-wrapper .cx-page { padding: var(--cx-space-4); }
  .l8-page-wrapper .cx-page-header, .l8-page-wrapper .cx-page-heading { flex-wrap: wrap; gap: var(--cx-space-3); }
  .l8-page-wrapper .cx-project-head { display: flex; flex-direction: column; align-items: stretch; padding: var(--cx-space-4); }
  .l8-page-wrapper .cx-workbench { display: block; }
  .l8-page-wrapper .cx-workbench > .cx-sidebar { display: flex; width: 100%; height: auto; overflow-x: auto; padding: var(--cx-space-2); gap: var(--cx-space-2); }
  .l8-page-wrapper .cx-workbench > .cx-sidebar .cx-stage { flex: 0 0 auto; }
  .l8-page-wrapper .cx-work-content { padding: var(--cx-space-4); }
  .l8-page-wrapper .cx-actionbar { display: flex; padding-inline: var(--cx-space-4); flex-wrap: wrap; }
  .cx-kpis, .cx-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cx-space-3); }
  .cx-kpi:nth-child(2) { border-right: var(--cx-line) solid var(--cx-rule); }
  .cx-kpi { padding: var(--cx-space-3); }
  .cx-kpi-value { font-size: var(--cx-text-title); }
  .cx-panel-body { padding: var(--cx-space-4); }
  .cx-panel-header, .cx-toolbar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}