:root {
  color-scheme: light;
  --ink: #102436;
  --muted: #667889;
  --faint: #8d9ba8;
  --line: #dce5ea;
  --line-strong: #cbd8df;
  --canvas: #edf3f6;
  --panel: #ffffff;
  --nav: #0a1f33;
  --nav-soft: #122c43;
  --teal: #0b9f97;
  --teal-bright: #39d0c3;
  --teal-soft: #e4f8f5;
  --blue: #3177bf;
  --blue-soft: #e9f2fb;
  --amber: #d98a16;
  --amber-soft: #fff4df;
  --danger: #c44b56;
  --shadow: 0 14px 34px rgba(18, 48, 70, 0.1);
  --radius: 14px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
}

button,
input,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(57, 208, 195, 0.32);
  outline-offset: 2px;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 18px 18px;
  background:
    radial-gradient(circle at 18% 7%, rgba(57, 208, 195, 0.14), transparent 22%),
    linear-gradient(180deg, #0b2237 0%, #071827 100%);
  color: #e9f4f7;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 8px 26px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #082438;
  background: linear-gradient(145deg, #60e2d3, #1cb7ae);
  font-size: 1.35rem;
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(18, 205, 188, 0.2);
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.brand span {
  margin-top: 3px;
  color: #8ea7b8;
  font-size: 0.76rem;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-item {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #b7cad6;
  background: transparent;
  border: 0;
  border-radius: 10px;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 650;
  transition: 160ms ease;
}

.nav-item:hover {
  color: #f5fcfd;
  background: rgba(255, 255, 255, 0.06);
}

.nav-item.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(17, 157, 149, 0.34), rgba(17, 157, 149, 0.12));
  box-shadow: inset 3px 0 0 var(--teal-bright);
}

.nav-icon {
  color: var(--teal-bright);
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
}

.nav-count {
  min-width: 28px;
  padding: 3px 7px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: #9eb7c6;
  font-size: 0.7rem;
  text-align: center;
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 12px;
}

.pulse-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 0 5px rgba(57, 208, 195, 0.12);
}

.catalog-date {
  color: #6f8a9a;
  font-size: 0.7rem;
  padding: 0 4px;
}

.main-content {
  min-width: 0;
  min-height: 100vh;
  padding: 0 30px 36px;
}

.topbar {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.eyebrow,
.section-kicker {
  margin: 0 0 4px;
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

h2 {
  margin-bottom: 0;
  font-size: 1.02rem;
  line-height: 1.35;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-box {
  width: min(360px, 31vw);
  height: 44px;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.84);
  border-radius: 12px;
  box-shadow: 0 5px 18px rgba(18, 48, 70, 0.04);
}

.search-box > span:first-child {
  color: var(--teal);
  font-size: 1.2rem;
}

.search-box input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.88rem;
}

.search-box kbd {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: var(--faint);
  background: #f7fafb;
  font: 0.66rem/1.2 inherit;
}

.mode-badge,
.status-badge,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 999px;
  font-weight: 750;
}

.mode-badge {
  flex-shrink: 0;
  height: 40px;
  padding: 0 13px;
  border: 0;
  color: #166f69;
  background: var(--teal-soft);
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
}

.mode-badge:disabled { cursor: default; }
.mode-badge:not(:disabled):hover { box-shadow: inset 0 0 0 1px rgba(0, 142, 133, 0.28); }
.mode-badge.authenticated { color: white; background: var(--teal); }
.mode-badge.authenticated span:first-child { background: white; }

.mode-badge > span:first-child {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.loading-state,
.error-state {
  min-height: calc(100vh - 140px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.loading-state strong,
.error-state strong {
  color: var(--ink);
  font-size: 1rem;
}

.loading-state span,
.error-state span {
  font-size: 0.85rem;
}

.loading-orbit {
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border: 3px solid rgba(11, 159, 151, 0.14);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.view {
  min-height: calc(100vh - 132px);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.summary-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(18, 48, 70, 0.04);
}

.summary-card .summary-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border-radius: 9px;
  color: var(--teal);
  background: var(--teal-soft);
  font-weight: 900;
}

.summary-card strong,
.summary-card span {
  display: block;
}

.summary-card strong {
  font-size: 1.42rem;
  letter-spacing: -0.04em;
}

.summary-card span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.8fr);
  gap: 18px;
}

.panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 6px 22px rgba(18, 48, 70, 0.045);
}

.panel-wide {
  grid-row: span 2;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.panel-note {
  color: var(--faint);
  font-size: 0.72rem;
}

.horizontal-chart {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 180px) minmax(100px, 1fr) 34px;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
}

.bar-label {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: #edf3f5;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--teal-bright));
}

.bar-value {
  color: var(--ink);
  font-weight: 800;
  text-align: right;
}

.component-chart {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 18px;
}

.donut {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--teal) 0 37%, #3177bf 37% 65%, #76a8d6 65% 82%, #b9d7e4 82% 100%);
}

.donut::after {
  content: "";
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: white;
}

.legend-list {
  display: grid;
  gap: 8px;
}

.legend-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.72rem;
}

.legend-item i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.legend-item strong {
  color: var(--ink);
}

.migration-panel {
  background:
    linear-gradient(135deg, rgba(228, 248, 245, 0.74), rgba(255, 255, 255, 0.96)),
    white;
}

.migration-score {
  display: flex;
  align-items: center;
  gap: 18px;
}

.score-ring {
  width: 105px;
  height: 105px;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  border-radius: 50%;
  border: 8px solid rgba(11, 159, 151, 0.18);
  box-shadow: inset 0 0 0 2px var(--teal);
  text-align: center;
}

.score-ring strong,
.score-ring span {
  display: block;
}

.score-ring strong {
  color: var(--teal);
  font-size: 1.1rem;
}

.score-ring span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.65rem;
}

.score-copy p {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.score-copy ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  list-style: none;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
}

.score-copy li::before {
  content: "✓";
  margin-right: 7px;
  color: var(--teal);
}

.attention-panel {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
}

.attention-panel p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.attention-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--amber);
  background: var(--amber-soft);
  font-weight: 900;
}

.text-button {
  margin-left: auto;
  padding: 9px 13px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: var(--nav);
  font-size: 0.76rem;
  font-weight: 750;
}

.activity-panel {
  margin-top: 18px;
}

.panel-action {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--teal);
  background: white;
  font-size: 0.69rem;
  font-weight: 800;
}

.activity-list {
  border-top: 1px solid var(--line);
}

.activity-row {
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.activity-row:last-child {
  border-bottom: 0;
}

.activity-status {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #087870;
  background: var(--teal-soft);
  font-weight: 900;
}

.activity-row.failed .activity-status {
  color: var(--danger);
  background: #fdecef;
}

.activity-copy strong,
.activity-copy span {
  display: block;
}

.activity-copy strong {
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-copy span,
.activity-row time {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.65rem;
}

.activity-row time {
  white-space: nowrap;
}

.activity-empty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  font-size: 0.74rem;
  text-align: center;
}

.workspace-layout {
  height: calc(100vh - 128px);
  min-height: 620px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(320px, 36%) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.catalog-pane {
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr;
  border-right: 1px solid var(--line);
  background: #f9fbfc;
}

.presentation-catalog-pane {
  grid-template-rows: auto auto 1fr;
}

.presentation-filter-note {
  padding: 15px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: white;
  font-size: 0.74rem;
  line-height: 1.45;
}

.presentation-preview {
  background: #f3f7f9;
}

.presentation-safety-note {
  margin: 18px 18px 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px 14px;
  border: 1px solid #b9e5df;
  border-radius: 12px;
  color: #166a66;
  background: #eaf8f6;
}

.presentation-safety-note strong,
.presentation-safety-note span {
  display: block;
}

.presentation-safety-note span {
  margin-top: 3px;
  font-size: 0.72rem;
}

.presentation-public-link {
  margin-left: auto;
  padding: 8px 11px;
  border-radius: 8px;
  color: white;
  background: var(--nav);
  font-size: 0.7rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.presentation-sequence {
  padding: 18px;
  display: grid;
  gap: 10px;
}

.presentation-frame {
  padding: 14px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.presentation-frame.missing {
  opacity: 0.62;
}

.presentation-frame-order {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--teal);
  background: var(--teal-soft);
  font-size: 0.76rem;
  font-weight: 850;
}

.presentation-frame-copy strong,
.presentation-frame-copy span {
  display: block;
}

.presentation-frame-copy strong {
  font-size: 0.8rem;
}

.presentation-frame-copy span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.68rem;
}

.presentation-open-button,
.public-sequence-controls button {
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: white;
  font-size: 0.68rem;
  font-weight: 750;
}

.presentation-open-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.public-sequence-bar {
  position: sticky;
  top: 77px;
  z-index: 7;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #b9e5df;
  color: #166a66;
  background: #eaf8f6;
}

.public-sequence-bar strong,
.public-sequence-bar span {
  display: block;
}

.public-sequence-bar span {
  margin-top: 2px;
  font-size: 0.68rem;
}

.public-sequence-controls {
  display: flex;
  gap: 6px;
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.filter-row select {
  min-width: 0;
  height: 40px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: white;
  font-size: 0.76rem;
}

.metadata-catalog-search {
  grid-column: 1 / -1;
  height: 40px;
  padding: 0 10px;
  display: flex;
  gap: 7px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--teal-dark);
  background: white;
}

.metadata-catalog-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 0.74rem;
}

.dashboard-catalog-search {
  height: 40px;
  margin: 12px 12px 0;
  padding: 0 10px;
  display: flex;
  gap: 7px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--teal-dark);
  background: white;
}

.dashboard-catalog-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 0.72rem;
}

.dashboard-layout {
  height: calc(100vh - 132px);
  grid-template-columns: minmax(350px, 34%) minmax(0, 1fr);
}

.dashboard-layout .catalog-pane {
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

.dashboard-layout .dashboard-authoring-bar {
  grid-template-columns: auto auto 34px minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
}

.dashboard-layout .dashboard-authoring-bar .secondary {
  color: #235766;
  border: 1px solid #cbdde1;
  background: white;
}

.dashboard-sidebar-toggle {
  min-width: 34px;
  padding-inline: 0 !important;
  font-size: 1.05rem !important;
}

.dashboard-layout.catalog-collapsed {
  grid-template-columns: 48px minmax(0, 1fr);
}

.dashboard-layout.catalog-collapsed .catalog-pane {
  overflow: visible;
}

.dashboard-layout.catalog-collapsed .catalog-pane > :not(.dashboard-authoring-bar),
.dashboard-layout.catalog-collapsed .dashboard-authoring-bar > :not(.dashboard-sidebar-toggle) {
  display: none;
}

.dashboard-layout.catalog-collapsed .dashboard-authoring-bar {
  height: 100%;
  padding: 8px 6px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border: 0;
  background: #edf5f6;
}

.dashboard-layout.catalog-collapsed .dashboard-sidebar-toggle {
  position: sticky;
  top: 8px;
}

.dashboard-catalog-item {
  min-height: 82px;
  padding: 10px 11px;
  align-items: start;
  border: 1px solid transparent;
  border-bottom-color: #e5edef;
}

.dashboard-tree-toolbar {
  position: sticky;
  top: -6px;
  z-index: 4;
  min-height: 34px;
  padding: 5px 7px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  color: #6a8390;
  background: #f7fafb;
  font-size: 0.59rem;
  font-weight: 800;
}

.dashboard-tree-toolbar > div { display: flex; gap: 4px; }

.dashboard-tree-toolbar button {
  padding: 4px 7px;
  border: 1px solid #d7e4e7;
  border-radius: 6px;
  color: #315d6b;
  background: white;
  font-size: 0.56rem;
  font-weight: 800;
}

.dashboard-tree-node { min-width: 0; }

.dashboard-tree-folder {
  width: 100%;
  min-height: 35px;
  padding: 6px 8px 6px calc(8px + var(--dashboard-tree-depth) * 15px);
  display: grid;
  grid-template-columns: 14px 21px minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #e8eff1;
  color: #294f5e;
  background: transparent;
  text-align: left;
}

.dashboard-tree-folder:hover,
.dashboard-tree-folder.expanded { background: #edf7f6; }

.dashboard-tree-folder strong {
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-tree-chevron {
  color: #69838e;
  font-size: 1rem;
  line-height: 1;
  transform-origin: center;
  transition: transform 120ms ease;
}

.dashboard-tree-folder.expanded .dashboard-tree-chevron { transform: rotate(90deg); }

.dashboard-tree-folder-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: #a46a12;
  background: #fff2cc;
  font-size: 0.58rem;
}

.dashboard-tree-count {
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #607b86;
  background: #e3ecee;
  font-size: 0.53rem;
  font-weight: 850;
  text-align: center;
}

.dashboard-tree-children { min-width: 0; }

.dashboard-tree-dashboard {
  min-height: 66px;
  padding-left: calc(10px + var(--dashboard-tree-depth) * 15px);
  border-left: 1px solid #dce7e9;
  border-radius: 0 8px 8px 0;
}

.dashboard-tree-dashboard .dashboard-list-icon {
  width: 27px;
  height: 27px;
  border-radius: 7px;
}

.dashboard-tree-dashboard .dashboard-list-identity {
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 7px;
}

.dashboard-catalog-item:hover,
.dashboard-catalog-item.active {
  border-color: #d8e6e9;
}

.dashboard-list-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.dashboard-list-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #316270;
  background: #e5eff2;
  font-size: 0.68rem;
  font-weight: 900;
}

.dashboard-catalog-item.active .dashboard-list-icon {
  color: white;
  background: var(--teal);
}

.dashboard-list-copy {
  min-width: 0;
}

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

.dashboard-list-copy strong {
  overflow: hidden;
  color: #173b4d;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-list-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: #68818d;
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-list-facts {
  margin-top: 7px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.dashboard-list-facts span {
  padding-right: 6px;
  border-right: 1px solid #d9e5e8;
  color: #78909b;
  font-size: 0.56rem;
  font-weight: 700;
}

.dashboard-list-facts span:last-child {
  padding-right: 0;
  border-right: 0;
}

.dashboard-catalog-item .catalog-item-meta {
  max-width: 112px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dashboard-list-origin {
  padding: 4px 6px;
  border-radius: 999px;
  color: #59727e;
  background: #e9f0f2;
  font-size: 0.55rem;
  font-weight: 850;
}

.dashboard-list-origin.local {
  color: #08746d;
  background: #e0f5f2;
}

.dashboard-load-more {
  width: calc(100% - 12px);
  margin: 8px 6px 12px;
  padding: 10px;
  border: 1px solid #b9d3d8;
  border-radius: 9px;
  color: #176776;
  background: white;
  font-size: 0.66rem;
  font-weight: 850;
}

.dashboard-list-empty {
  min-height: 180px;
  padding: 24px;
  display: grid;
  place-content: center;
  gap: 5px;
  color: var(--muted);
  text-align: center;
}

.dashboard-list-empty strong {
  color: #294e60;
  font-size: 0.76rem;
}

.dashboard-list-empty span {
  font-size: 0.65rem;
}

.result-heading {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.69rem;
}

.result-heading span:first-child {
  color: var(--ink);
  font-weight: 800;
}

.catalog-list {
  overflow: auto;
  padding: 6px;
}

.catalog-item {
  width: 100%;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid #e9eff2;
  border-radius: 9px;
  color: inherit;
  background: transparent;
  text-align: left;
}

.catalog-item:hover,
.catalog-item.active {
  background: white;
  box-shadow: 0 5px 16px rgba(18, 48, 70, 0.07);
}

.catalog-item.active {
  box-shadow: inset 3px 0 0 var(--teal), 0 5px 16px rgba(18, 48, 70, 0.07);
}

.catalog-item strong,
.catalog-item small {
  display: block;
}

.catalog-item strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-item small {
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-item-meta {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.tag,
.status-badge {
  padding: 4px 7px;
  font-size: 0.63rem;
}

.tag {
  color: #416174;
  background: #edf3f6;
}

.tag.public,
.status-badge.active {
  color: #087870;
  background: var(--teal-soft);
}

.tag.offline {
  color: #9a650f;
  background: var(--amber-soft);
}

.tag.danger {
  color: #a3302a;
  background: #fbe9e7;
}

.preview-pane {
  min-width: 0;
  overflow: auto;
  background: #eef3f6;
}

.preview-pane:has(.dashboard-preview-header) {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.preview-pane:has(.dashboard-metadata-filter-bar) {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.empty-preview {
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--muted);
}

.empty-preview h2 {
  margin-bottom: 6px;
  color: var(--ink);
}

.empty-preview p {
  max-width: 330px;
  font-size: 0.8rem;
}

.empty-illustration {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--teal);
  background: white;
  box-shadow: var(--shadow);
  font-size: 1.7rem;
}

.preview-header {
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.preview-header h2 {
  margin-bottom: 3px;
  font-size: 1rem;
}

.preview-header p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.preview-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.metadata-preview-controls {
  display: grid;
  gap: 7px;
  justify-items: end;
}

.metadata-preview-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.metadata-preview-actions .dashboard-authoring-action {
  padding: 7px 10px;
  white-space: nowrap;
}

.dashboard-authoring-bar {
  padding: 12px;
  display: grid;
  gap: 5px;
  border-bottom: 1px solid var(--line);
  background: #f1fbfa;
}

.dashboard-authoring-bar button,
.dashboard-authoring-action {
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: var(--teal);
  font-size: 0.72rem;
  font-weight: 800;
}

.dashboard-authoring-bar span {
  color: var(--muted);
  font-size: 0.64rem;
}

.dashboard-authoring-action.secondary {
  color: var(--nav);
  border: 1px solid var(--line);
  background: white;
}

.dashboard-authoring-action.danger {
  color: #a43636;
  border: 1px solid #efcaca;
  background: #fff8f8;
}

.authoring-form {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.authoring-field {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
}

.authoring-field input,
.authoring-field select,
.authoring-field textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: white;
  font: inherit;
  font-weight: 500;
}

.authoring-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.authoring-feedback {
  color: var(--muted);
  font-size: 0.7rem;
}

.authoring-feedback.error { color: #b03d3d; }

.dashboard-publication-card {
  padding: 16px;
  display: grid;
  gap: 10px;
  border: 1px solid #bfe1dc;
  border-radius: 13px;
  background: linear-gradient(135deg, #f2fbfa, #fff);
}

.dashboard-publication-card h3,
.dashboard-publication-card p {
  margin: 0;
}

.dashboard-publication-card h3 { font-size: 0.88rem; }
.dashboard-publication-card p { color: var(--muted); font-size: 0.68rem; }

.dashboard-publication-kicker {
  color: var(--teal-dark);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.dashboard-publication-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #173f4c;
  font-size: 0.72rem;
  font-weight: 850;
}

.dashboard-publication-toggle input { width: 17px; height: 17px; accent-color: var(--teal); }

.dashboard-publication-options {
  padding: 11px 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px 16px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.75);
}

.dashboard-publication-options .authoring-field { grid-column: 1 / -1; }

.dashboard-publication-link-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
}

.dashboard-publication-link-label {
  grid-column: 1 / -1;
  color: #173f4c;
  font-size: 0.65rem;
}

.dashboard-publication-link-row input {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #315464;
  background: white;
  font-size: 0.68rem;
}

.dashboard-publish-imported {
  max-width: 720px;
  display: grid;
  gap: 12px;
}

.dashboard-publish-imported h2,
.dashboard-publish-imported p { margin: 0; }
.dashboard-publish-imported > p { color: var(--muted); line-height: 1.55; }

.dashboard-publication-note {
  padding: 11px 12px;
  border: 1px solid #cce7e3;
  border-radius: 9px;
  background: #f1faf9;
}

.dashboard-folder-manager {
  display: grid;
  gap: 14px;
}

.dashboard-folder-manager h2,
.dashboard-folder-manager h3,
.dashboard-folder-manager p { margin: 0; }
.dashboard-folder-manager > p { color: var(--muted); font-size: 0.7rem; line-height: 1.5; }

.dashboard-folder-create {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid #cce5e2;
  border-radius: 11px;
  background: #f2faf9;
}

.dashboard-folder-local-list { display: grid; gap: 7px; }

.dashboard-folder-local-row {
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1.3fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #dce7e9;
  border-radius: 10px;
  background: white;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.dashboard-folder-local-row:hover {
  border-color: #acd6d1;
  box-shadow: 0 5px 16px rgba(11, 67, 76, 0.06);
}

.dashboard-folder-local-row.highlighted {
  border-color: var(--teal);
  background: #effbf9;
  box-shadow: inset 3px 0 0 var(--teal);
}

.dashboard-folder-local-row input {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dashboard-folder-summary-grid {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-folder-summary-card {
  padding: 14px;
  display: grid;
  gap: 2px;
  border: 1px solid #d8e7e8;
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #f5fafb);
}

.dashboard-folder-summary-card strong { color: #0a6f69; font-size: 1.25rem; }
.dashboard-folder-summary-card span { color: var(--muted); font-size: 0.62rem; font-weight: 750; }

.dashboard-folder-create-card { margin: 0; }

.dashboard-folder-preservation-note {
  margin-top: 12px;
  padding: 12px 14px;
  display: grid;
  gap: 3px;
  border: 1px solid #cae4e1;
  border-radius: 10px;
  color: #315968;
  background: #f2faf9;
}

.dashboard-folder-preservation-note strong { color: #0b6e68; font-size: 0.68rem; }
.dashboard-folder-preservation-note span { font-size: 0.62rem; line-height: 1.45; }

.dashboard-folder-toolbar {
  margin-bottom: 12px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid #dce7e9;
  border-radius: 10px;
  background: #f8fbfc;
}

.dashboard-folder-result-count {
  min-height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  color: #32606e;
  background: #e7f1f3;
  font-size: 0.61rem;
  font-weight: 850;
}

.dashboard-folder-row-identity {
  min-width: 0;
  display: flex;
  gap: 9px;
  align-items: center;
}

.dashboard-folder-row-identity > div { min-width: 0; display: grid; gap: 2px; }
.dashboard-folder-row-identity strong,
.dashboard-folder-row-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-folder-row-identity strong { color: #163f4e; font-size: 0.68rem; }
.dashboard-folder-row-identity small { color: var(--muted); font-size: 0.56rem; }

.dashboard-folder-row-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #0b7771;
  background: #def3f0;
  font-size: 0.72rem;
}

.dashboard-folder-row-actions { display: flex; gap: 7px; justify-content: flex-end; }

.dashboard-folder-studio .dashboard-folder-nav button:first-of-type::before { content: "+"; }
.dashboard-folder-studio .dashboard-folder-nav button:nth-of-type(2)::before { content: "▰"; }

.dashboard-folder-empty {
  padding: 18px;
  border: 1px dashed #cbdcdf;
  border-radius: 9px;
  color: var(--muted);
  text-align: center;
}

.dashboard-settings-workbench {
  min-height: 310px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.dashboard-settings-nav {
  padding: 9px;
  display: grid;
  align-content: start;
  gap: 5px;
  border-right: 1px solid var(--line);
  background: #f4f8f9;
}

.dashboard-settings-nav button {
  padding: 10px 11px;
  border: 0;
  border-radius: 8px;
  color: #365d6c;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 850;
  text-align: left;
}

.dashboard-settings-nav button.active {
  color: #075e59;
  background: #dff4f1;
}

.dashboard-settings-body { min-width: 0; padding: 16px; }

.dashboard-settings-pane { display: none; gap: 12px; }
.dashboard-settings-pane.active { display: grid; }
.dashboard-settings-pane h3,
.dashboard-settings-pane p { margin: 0; }
.dashboard-settings-pane > p { color: var(--muted); font-size: 0.66rem; }
.dashboard-settings-pane textarea { resize: vertical; }

.dashboard-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
}

.dashboard-layout-settings-grid { grid-template-columns: 1.5fr 0.7fr 0.7fr 1fr; }

.dashboard-setting-check {
  min-height: 38px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: #345969;
  font-size: 0.68rem;
  font-weight: 800;
}

.dashboard-setting-check input { width: 16px; height: 16px; accent-color: var(--teal); }

.dashboard-background-preview {
  min-height: 110px;
  display: grid;
  place-items: center;
  border: 1px dashed #c8d8dc;
  border-radius: 10px;
  color: #718b95;
  font-size: 0.65rem;
}

.dashboard-background-picker {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, auto) auto;
  gap: 10px;
  align-items: end;
}

.dashboard-background-file-status {
  min-height: 38px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.64rem;
}

.dashboard-metadata-settings {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(420px, 1.3fr);
  gap: 12px;
}

.dashboard-metadata-browser { margin: 0; align-self: start; }

.dashboard-metadata-choice-list {
  max-height: 430px;
  margin-top: 10px;
  display: grid;
  gap: 5px;
  overflow: auto;
}

.dashboard-metadata-choice {
  padding: 8px 9px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #e1eaec;
  border-radius: 8px;
  background: white;
  color: #234c5b;
  font-size: 0.67rem;
}

.dashboard-metadata-choice input,
.dashboard-metadata-filter-visible input { accent-color: var(--teal); }
.dashboard-metadata-choice small { color: var(--muted); font-size: 0.56rem; }

.dashboard-selected-metadata-list { display: grid; align-content: start; gap: 10px; }

.dashboard-selected-metadata-card {
  padding: 12px;
  display: grid;
  gap: 9px;
  border: 1px solid #cfe3e1;
  border-radius: 11px;
  background: #fbfdfd;
}

.dashboard-selected-metadata-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.dashboard-selected-metadata-heading > div { display: grid; gap: 2px; }
.dashboard-selected-metadata-heading strong { color: #123d4d; font-size: 0.72rem; }
.dashboard-selected-metadata-heading small { color: var(--muted); font-size: 0.58rem; }
.dashboard-metadata-default-filters { display: grid; gap: 7px; }

.dashboard-metadata-config-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) minmax(105px, 0.8fr) minmax(100px, 1fr) minmax(100px, 1fr) auto 28px;
  gap: 6px;
  align-items: center;
}

.dashboard-metadata-config-row input,
.dashboard-metadata-config-row select {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 0.62rem;
}

.dashboard-metadata-config-extra {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  grid-column: 1 / -1;
}

.dashboard-metadata-config-extra textarea {
  border: 1px solid var(--line);
  border-radius: 7px;
  flex: 1 1 320px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.6rem;
  min-width: 0;
  padding: 6px 8px;
}

.dashboard-metadata-config-extra input[type="text"],
.dashboard-metadata-config-extra .dashboard-metadata-config-sql-field {
  flex: 0 1 180px;
}

.dashboard-metadata-filter-pin.locked {
  opacity: 0.92;
}

.dashboard-metadata-filter-pin.locked .dashboard-metadata-filter-pin-copy {
  cursor: default;
}

.dashboard-metadata-filter-pin-lock {
  align-self: center;
  font-size: 11px;
  padding: 0 6px 0 2px;
}

.metadata-parameter-verification-box summary {
  cursor: pointer;
  font-size: 0.62rem;
}

.metadata-parameter-verification {
  width: 100%;
}

.dashboard-metadata-filter-visible {
  display: flex;
  gap: 5px;
  align-items: center;
  color: #42616d;
  font-size: 0.58rem;
  white-space: nowrap;
}

.component-create-studio {
  display: grid;
  gap: 8px;
}

.component-create-studio h2,
.component-create-studio p { margin: 0; }
.component-create-studio > p { color: var(--muted); font-size: 0.7rem; }

.component-create-form {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.8fr);
  gap: 14px;
}

.component-create-library,
.component-create-configuration {
  min-width: 0;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f9fbfc;
}

.component-create-configuration h3 { margin: 0; font-size: 0.82rem; }

.component-type-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.component-type-card {
  min-height: 105px;
  padding: 11px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 3px 9px;
  border: 1px solid #dce7e9;
  border-radius: 10px;
  color: #264d5d;
  background: white;
  text-align: left;
}

.component-type-card:hover { border-color: #9fcfc9; box-shadow: 0 5px 14px rgba(10, 65, 75, 0.07); }
.component-type-card.active { border-color: var(--teal); background: #edfafa; box-shadow: inset 0 0 0 1px var(--teal); }

.component-type-icon {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--teal-dark);
  background: #dff5f2;
  font-size: 1rem;
  font-weight: 900;
}

.component-type-card strong { font-size: 0.72rem; }
.component-type-card small { color: var(--muted); font-size: 0.59rem; line-height: 1.35; }

.component-type-source {
  grid-column: 2;
  align-self: end;
  color: #6e8791;
  font-size: 0.53rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dialog-panel:has(.dashboard-studio),
.dialog-panel:has(.component-authoring-studio) {
  width: min(1460px, calc(100vw - 28px));
  height: min(940px, calc(100vh - 28px));
  max-height: calc(100vh - 28px);
  overflow: hidden;
  border: 1px solid rgba(127, 158, 173, 0.45);
  border-radius: 18px;
}

.dialog-panel:has(.dashboard-studio) #dialog-content,
.dialog-panel:has(.component-authoring-studio) #dialog-content {
  height: 100%;
  min-height: 0;
}

.dashboard-studio,
.component-authoring-studio {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.authoring-studio-icon {
  background: linear-gradient(145deg, #0db8ae, #08748a);
}

.dashboard-studio-form,
.component-studio-form {
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  flex: 1;
}

.dashboard-studio .dashboard-settings-workbench {
  height: 100%;
  min-height: 0;
  grid-template-columns: 218px minmax(0, 1fr);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.dashboard-studio .dashboard-settings-nav {
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  background: linear-gradient(180deg, #f5f9fa 0%, #edf5f6 100%);
}

.dashboard-studio .dashboard-settings-nav::before {
  padding: 0 9px 5px;
  color: #7b929e;
  content: "CONFIGURAÇÃO";
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.dashboard-studio .dashboard-settings-nav button {
  position: relative;
  min-height: 43px;
  padding: 8px 9px 8px 44px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: #385b6d;
  font-size: 0.7rem;
}

.dashboard-studio .dashboard-settings-nav button::before {
  position: absolute;
  left: 9px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #277182;
  background: #e3eff2;
  content: "◆";
  font-size: 0.63rem;
}

.dashboard-studio .dashboard-settings-nav button:nth-child(2)::before { content: "◩"; }
.dashboard-studio .dashboard-settings-nav button:nth-child(3)::before { content: "⌗"; }
.dashboard-studio .dashboard-settings-nav button:nth-child(4)::before { content: "↗"; }
.dashboard-studio .dashboard-settings-nav button:nth-child(5)::before { content: "▰"; }
.dashboard-studio .dashboard-settings-nav button:nth-child(6)::before { content: "▤"; }

.dashboard-studio .dashboard-settings-nav button:hover,
.dashboard-studio .dashboard-settings-nav button.active {
  color: #073e4c;
  background: white;
  box-shadow: 0 6px 18px rgba(9, 55, 70, 0.08);
}

.dashboard-studio .dashboard-settings-nav button.active::after {
  position: absolute;
  left: -12px;
  width: 3px;
  height: 25px;
  border-radius: 0 4px 4px 0;
  background: var(--teal);
  content: "";
}

.dashboard-studio .dashboard-settings-nav button.active::before {
  color: white;
  background: var(--teal);
}

.dashboard-studio .dashboard-settings-body {
  min-height: 0;
  padding: 22px 24px 28px;
  overflow: auto;
}

.dashboard-studio .dashboard-settings-pane.active { display: block; }
.dashboard-studio .dashboard-settings-pane > h3 { margin-bottom: 4px; color: #0b2f41; font-size: 1.02rem; }
.dashboard-studio .dashboard-settings-pane > p { margin-bottom: 17px; }

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

.dashboard-identity-grid .authoring-field:last-child:nth-child(3) { grid-column: 1 / -1; }
.dashboard-behavior-card textarea { min-height: 105px; }
.dashboard-studio-actions,
.component-studio-actions { margin: 0; }

.dashboard-studio .dashboard-publication-card,
.dashboard-studio .dashboard-tabs-editor {
  margin: 0;
  background: #fbfdfd;
}

.dashboard-tabs-editor .authoring-tab-list { margin-top: 14px; }
.dashboard-tabs-editor .authoring-tab-row { padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.dashboard-tabs-editor .authoring-tab-add {
  margin-top: 10px;
  grid-template-columns: 28px minmax(140px, 1fr) auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.component-studio-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.component-create-tabs {
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #f5f9fa 0%, #edf5f6 100%);
}

.component-create-panes {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: white;
}

.component-create-pane {
  height: 100%;
  padding: 22px 24px 28px;
  display: none;
  align-content: start;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: white;
}

.component-create-pane.active { display: grid; }
.component-create-pane > h3 { margin: 0; color: #0b2f41; font-size: 1.02rem; }
.component-create-pane > .component-editor-help { margin: -5px 0 6px; }

.component-authoring-studio .component-type-gallery {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.component-authoring-studio .component-type-card {
  min-height: 142px;
  padding: 14px;
  grid-template-columns: 40px minmax(0, 1fr);
  border-radius: 12px;
}

.component-authoring-studio .component-type-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.component-authoring-studio .component-type-card strong { font-size: 0.77rem; }
.component-authoring-studio .component-type-card small { font-size: 0.63rem; }

.component-selected-summary {
  padding: 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  border: 1px solid #bfe1dc;
  border-radius: 12px;
  background: linear-gradient(135deg, #effbf9, #fff);
}

.component-selected-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: linear-gradient(145deg, #0db8ae, #08748a);
  font-size: 1rem;
  font-weight: 900;
}

.component-selected-summary strong,
.component-selected-summary span { display: block; }
.component-selected-summary strong { margin-bottom: 3px; color: #173f51; font-size: 0.78rem; }
.component-selected-summary div span { color: var(--muted); font-size: 0.64rem; }

.component-create-configuration {
  max-width: 920px;
}

.component-create-configuration > .authoring-field,
.component-create-configuration > .authoring-metadata-row {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfdfd;
}

.component-create-form > .authoring-form-actions { grid-column: 1 / -1; }

.authoring-tabs-panel {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.authoring-tabs-panel h3 {
  margin-bottom: 10px;
  font-size: 0.86rem;
}

.authoring-tab-list {
  display: grid;
  gap: 8px;
}

.authoring-tab-row,
.authoring-tab-add {
  display: grid;
  grid-template-columns: 28px minmax(140px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

/* Linha da aba: número, nome, ↑, ↓, cor, Cor…/Sem cor, Acesso, Renomear, Excluir — tudo numa linha. */
.authoring-tab-row {
  grid-template-columns: 28px minmax(140px, 1fr) repeat(7, auto);
}

.authoring-tab-access {
  margin: -2px 0 6px 36px;
}

.authoring-tab-row.active {
  padding: 6px;
  border-radius: 10px;
  background: #effafa;
}

.authoring-tab-row input,
.authoring-tab-add input {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.authoring-tab-order {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--teal);
  background: #dff6f3;
  font-size: 0.66rem;
  font-weight: 800;
}

.authoring-tab-add {
  grid-template-columns: minmax(140px, 1fr) auto;
  margin-top: 12px;
  padding-left: 36px;
}

.tab-strip {
  padding: 10px 16px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: white;
}

.dashboard-tab-footer {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.dashboard-canvas-shell {
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.dashboard-canvas-shell.tabs-bottom { grid-template-rows: minmax(0, 1fr) auto; }
.dashboard-canvas-shell.tabs-top { grid-template-rows: auto minmax(0, 1fr); }
.dashboard-canvas-shell.tabs-left { grid-template-columns: auto minmax(0, 1fr); }
.dashboard-canvas-shell.tabs-right { grid-template-columns: minmax(0, 1fr) auto; }

.dashboard-canvas-shell.tabs-top .dashboard-tab-footer {
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

.dashboard-canvas-shell.tabs-left .dashboard-tab-footer,
.dashboard-canvas-shell.tabs-right .dashboard-tab-footer {
  width: 170px;
  padding: 10px 8px;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 0;
}

.dashboard-canvas-shell.tabs-left .dashboard-tab-footer { border-right: 1px solid var(--line); }
.dashboard-canvas-shell.tabs-right .dashboard-tab-footer { border-left: 1px solid var(--line); }

.dashboard-canvas-shell.tabs-left .tab-button,
.dashboard-canvas-shell.tabs-right .tab-button { width: 100%; text-align: left; }

.tab-button {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: white;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.tab-button.active {
  color: white;
  border-color: var(--nav);
  background: var(--nav);
}

.dashboard-stage-wrap {
  min-height: 0;
  padding: 8px;
  overflow: auto;
  overscroll-behavior: contain;
}

html:has(body.direct-dashboard),
body.direct-dashboard {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.direct-dashboard {
  background: #eef3f6;
}

body.direct-dashboard .app-shell {
  display: block;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

body.direct-dashboard .sidebar,
body.direct-dashboard .topbar,
body.direct-dashboard .catalog-pane {
  display: none;
}

body.direct-dashboard .main-content {
  min-width: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

body.direct-dashboard #view-dashboards,
body.direct-dashboard .workspace-layout {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.direct-dashboard .workspace-layout {
  grid-template-columns: 1fr;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.direct-dashboard .preview-pane {
  height: 100%;
  min-height: 0;
}

body.direct-dashboard .preview-header,
body.direct-dashboard .dashboard-stage-wrap {
  padding-inline: clamp(16px, 3vw, 42px);
}

body.direct-dashboard .dashboard-stage-wrap {
  padding: 6px;
}

.dashboard-simulation-panel {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(300px, auto);
  align-items: center;
  gap: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: #f7fbfb;
}

.dashboard-preview-header {
  position: relative;
  min-height: 62px;
  padding-block: 9px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  background: linear-gradient(100deg, rgba(255,255,255,.98), #f3fbfa);
}

.dashboard-preview-identity {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.dashboard-preview-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  color: #2d6370;
  background: #e4eff2;
  font-size: 0.75rem;
  font-weight: 900;
}

.dashboard-preview-icon.local {
  color: white;
  background: linear-gradient(145deg, #10b7ac, #077987);
  box-shadow: 0 6px 16px rgba(7, 122, 133, 0.2);
}

.dashboard-preview-eyebrow {
  display: block;
  margin-bottom: 1px;
  color: #148077;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.dashboard-header-origin {
  padding: 5px 7px;
  border-radius: 999px;
  color: #55727e;
  background: #e9f1f3;
  font-size: 0.55rem;
  font-weight: 850;
}

.dashboard-header-origin.local {
  color: #08726b;
  background: #dff5f1;
}

.dashboard-preview-header > .preview-meta {
  flex: 0 0 auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.dashboard-preview-header > :first-child {
  flex: 1 1 auto;
  min-width: 110px;
  overflow: hidden;
}

.dashboard-preview-header > :first-child h2,
.dashboard-preview-header > :first-child p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-preview-header > :first-child h2 {
  font-size: 0.9rem;
}

.dashboard-preview-header > :first-child p {
  font-size: 0.6rem;
}

.dashboard-preview-header > .dashboard-simulation-panel {
  flex: 0 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  border: 0;
  background: transparent;
}

.dashboard-preview-header > .dashboard-simulation-panel .dashboard-simulation-copy {
  display: none;
}

.dashboard-preview-header > .dashboard-simulation-panel .dashboard-simulation-controls {
  flex: 0 0 auto;
  flex-flow: row nowrap;
  gap: 6px;
}

.dashboard-preview-header > .dashboard-simulation-panel .dashboard-simulation-feedback {
  display: none;
}

.dashboard-preview-header > .dashboard-simulation-panel .dashboard-parameter-panel {
  display: none;
}

.dashboard-preview-header > .dashboard-simulation-panel.loading,
.dashboard-preview-header > .dashboard-simulation-panel.unavailable {
  max-width: 250px;
  padding: 6px 9px;
  justify-content: flex-start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.dashboard-preview-header > .dashboard-simulation-panel.public-safe {
  color: #166a66;
  background: transparent;
}

.dashboard-preview-header .dashboard-authoring-action,
.dashboard-preview-header .execute-button,
.dashboard-preview-header .presentation-public-link {
  min-height: 34px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.dashboard-header-icon-action {
  width: 34px;
  min-width: 34px;
  padding-inline: 0 !important;
  text-decoration: none;
}

.dashboard-quick-status {
  position: absolute;
  top: calc(100% + 7px);
  right: 12px;
  z-index: 20;
  width: min(560px, calc(100vw - 40px));
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: white;
  box-shadow: 0 10px 30px rgba(5, 32, 45, 0.18);
  font-size: 0.69rem;
  line-height: 1.4;
  pointer-events: none;
}

.dashboard-quick-status.warning {
  color: #8a5300;
  border-color: #eccb88;
  background: #fff9e9;
}

.dashboard-quick-status.success {
  color: #087870;
  border-color: #b9e5df;
  background: #effbf9;
}

.dashboard-data-options {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.dashboard-data-options-summary {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.dashboard-data-options-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.dashboard-data-options .dashboard-mode-select,
.dashboard-data-options .dashboard-connection-select {
  width: 100%;
  min-width: 0;
}

.dashboard-data-options .dashboard-periodic-control {
  justify-self: start;
}

.dashboard-data-options .dashboard-simulation-feedback {
  display: block;
  min-height: 1em;
}

.dashboard-simulation-panel.loading,
.dashboard-simulation-panel.unavailable {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.76rem;
}

.dashboard-simulation-panel.public-safe {
  grid-template-columns: 1fr;
  color: #166a66;
  background: #eaf8f6;
}

.dashboard-simulation-panel.public-safe.public-query-ready {
  grid-template-columns: minmax(210px, 1fr) auto;
}

.dashboard-simulation-panel.public-safe strong,
.dashboard-simulation-panel.public-safe span {
  display: block;
}

.dashboard-simulation-panel.public-safe span {
  margin-top: 3px;
  font-size: 0.7rem;
}

body.public-presentation {
  background: #eef3f6;
}

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

body.public-presentation .sidebar,
body.public-presentation .topbar,
body.public-presentation .catalog-pane {
  display: none;
}

body.public-presentation .main-content {
  min-width: 0;
  padding: 0;
}

body.public-presentation #view-dashboards,
body.public-presentation .workspace-layout {
  min-height: 100vh;
}

body.public-presentation .workspace-layout {
  height: 100vh;
  grid-template-columns: 1fr;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.public-presentation .preview-pane {
  height: 100vh;
}

body.public-presentation .preview-header {
  padding-inline: clamp(16px, 3vw, 42px);
}

body.public-presentation .dashboard-stage-wrap {
  padding: clamp(12px, 2vw, 28px);
}

body.public-presentation .public-unavailable {
  min-height: 100vh;
}

.dashboard-simulation-copy strong,
.dashboard-simulation-copy span {
  display: block;
}

.dashboard-simulation-copy strong {
  font-size: 0.78rem;
}

.dashboard-simulation-copy span,
.dashboard-simulation-feedback {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
}

.dashboard-simulation-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.dashboard-connection-select,
.dashboard-mode-select {
  width: min(310px, 42vw);
  min-width: 190px;
  height: 38px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  background: white;
  font-size: 0.72rem;
}

.dashboard-mode-select {
  width: min(220px, 30vw);
  min-width: 170px;
}

.dashboard-execute-button {
  white-space: nowrap;
}

.dashboard-periodic-control {
  min-height: 34px;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: white;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.25;
}

.dashboard-periodic-control input {
  margin: 0;
  accent-color: var(--teal);
}

.dashboard-periodic-control:has(input:checked) {
  color: #087870;
  border-color: #b9e5df;
  background: var(--teal-soft);
}

.dashboard-simulation-feedback {
  grid-column: 1 / -1;
  margin: 0;
}

.dashboard-simulation-feedback.success {
  color: #087870;
}

.dashboard-simulation-feedback.warning,
.widget-query-error {
  color: var(--danger);
}

.dashboard-parameter-panel {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
}

.dashboard-parameter-panel > summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 750;
}

.dashboard-parameter-panel .metadata-parameter-editor {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.dashboard-context-panel {
  border-color: #b9ddd9;
  background: #f4fbfa;
}

.dashboard-context-panel .metadata-parameter-field small {
  color: #34736f;
}

.stage-note {
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.69rem;
}

.dashboard-stage-toolbar {
  min-height: 38px;
  margin: 0 0 9px;
  padding: 7px 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
}

.dashboard-stage-copy {
  min-width: 0;
}

.dashboard-stage-copy strong,
.dashboard-stage-copy span {
  display: block;
}

.dashboard-stage-copy strong {
  color: #244a5a;
  font-size: 0.65rem;
}

.dashboard-stage-copy span {
  margin-top: 2px;
  overflow: hidden;
  color: #728893;
  font-size: 0.56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-stage-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.dashboard-stage-size {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #bfd2d7;
  border-radius: 7px;
  color: #31606f;
  background: white;
  font-size: 0.56rem;
  font-weight: 800;
}

.dashboard-stage-size:hover {
  color: #08736e;
  border-color: #80c4bf;
  background: #f2fbfa;
}

.dashboard-stage.actual-size {
  max-width: none;
}

.layout-save-status { color: var(--muted); white-space: nowrap; }
.layout-save-status.saving { color: #9b6b08; }
.layout-save-status.success { color: #087870; }
.layout-save-status.error { color: var(--danger); }

.dashboard-authoring-action.secondary.active {
  color: white;
  border-color: var(--teal);
  background: var(--teal);
}

.dashboard-stage {
  position: relative;
  width: 100%;
  min-width: 680px;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background:
    linear-gradient(rgba(36, 74, 96, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 74, 96, 0.035) 1px, transparent 1px),
    #f8fbfc;
  background-size: 24px 24px;
  box-shadow: inset 0 0 0 1px white;
}

.dashboard-stage.dashboard-stage-fluid {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
}

.dashboard-layout-floating-status {
  position: absolute;
  z-index: 60;
  top: 8px;
  left: 50%;
  padding: 5px 9px;
  border: 1px solid #9ad1cb;
  border-radius: 999px;
  color: #08736d;
  background: rgba(240, 252, 250, 0.94);
  box-shadow: 0 5px 14px rgba(12, 71, 78, 0.12);
  font-size: 0.57rem;
  transform: translateX(-50%);
  white-space: nowrap;
}

.dashboard-stage.layout-editing {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 2px rgba(11, 159, 151, 0.14);
}

.dashboard-stage.layout-editing .canvas-widget {
  outline: 1px dashed rgba(11, 159, 151, 0.65);
  outline-offset: -2px;
}

.widget-layout-handle,
.widget-resize-handle {
  position: absolute;
  z-index: 12;
  border: 0;
  color: white;
  background: rgba(7, 91, 105, 0.9);
  font-size: 0.58rem;
  font-weight: 800;
  touch-action: none;
  user-select: none;
}

.widget-layout-handle {
  top: 5px;
  left: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: move;
}

.widget-resize-handle {
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  border-radius: 10px 0 0 0;
  cursor: nwse-resize;
  font-size: 0.78rem;
}

.canvas-widget.layout-active {
  z-index: 50 !important;
  box-shadow: 0 12px 28px rgba(7, 91, 105, 0.26);
}

.canvas-widget.source-transparent {
  border-color: transparent;
}

.canvas-widget.source-transparent .widget-text,
.canvas-widget.source-transparent .canvas-widget-body {
  background: transparent;
}

.canvas-widget {
  position: absolute;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid #d7e2e8;
  border-radius: 8px;
  background: white;
  box-shadow: 0 7px 18px rgba(18, 48, 70, 0.09);
}

.canvas-widget.title-hidden {
  grid-template-rows: 1fr;
}

.canvas-widget.title-hidden .widget-body {
  padding: 0;
}

.widget-menu-button {
  position: absolute;
  z-index: 12;
  top: 5px;
  right: 5px;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid rgba(9, 74, 94, 0.22);
  border-radius: 8px;
  color: #075b69;
  background: rgba(255, 255, 255, 0.96);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transition: opacity 120ms ease, box-shadow 120ms ease;
}

.canvas-widget:hover .widget-menu-button,
.widget-menu-button:focus-visible,
.canvas-widget:focus-within .widget-menu-button {
  opacity: 1;
}

.widget-menu-button:hover {
  box-shadow: 0 4px 12px rgba(13, 76, 94, 0.18);
}

.widget-action-menu {
  position: absolute;
  z-index: 70;
  top: 36px;
  right: 5px;
  width: min(210px, calc(100% - 10px));
  max-height: calc(100% - 44px);
  padding: 5px;
  display: none;
  overflow: auto;
  border: 1px solid #c7d8de;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 12px 28px rgba(15, 53, 72, 0.22);
}

.widget-action-menu.open {
  display: grid;
  gap: 2px;
}

.widget-action-menu button {
  min-height: 29px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  color: #24495a;
  background: transparent;
  text-align: left;
  font-size: 0.62rem;
  font-weight: 750;
}

.widget-action-menu button:hover:not(:disabled) {
  color: #075b69;
  background: #e5f6f4;
}

.widget-action-menu button.danger {
  color: #a12c2c;
}

.widget-action-menu button:disabled {
  opacity: 0.45;
}

.canvas-widget.component-maximized {
  position: fixed !important;
  inset: 18px !important;
  z-index: 1000 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(4, 25, 37, 0.72), 0 22px 70px rgba(0, 0, 0, 0.35);
}

body.component-focus-active {
  overflow: hidden;
}

.component-data-explorer {
  width: min(1120px, calc(100vw - 70px));
}

.dialog-panel:has(.component-data-explorer) {
  width: min(1180px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
}

.component-data-explorer-actions {
  margin: 12px 0;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.component-data-explorer-actions button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #aacdd0;
  border-radius: 7px;
  color: #075b69;
  background: #f4fbfa;
  font-size: 0.66rem;
  font-weight: 850;
}

.component-data-explorer-actions button:hover {
  background: #e1f4f1;
}

.component-data-explorer .query-result-wrap {
  max-height: min(620px, calc(100vh - 250px));
}

.widget-edit-button {
  position: absolute;
  z-index: 8;
  top: 5px;
  right: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(9, 74, 94, 0.22);
  border-radius: 999px;
  color: #075b69;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.58rem;
  font-weight: 800;
  opacity: 0;
  transition: opacity 120ms ease;
}

.canvas-widget:hover .widget-edit-button,
.widget-edit-button:focus-visible {
  opacity: 1;
}

.widget-delete-button {
  right: 58px;
  color: #a43636;
  border-color: rgba(164, 54, 54, 0.25);
}

.canvas-widget.query-overridden::after {
  content: "SQL local";
  position: absolute;
  left: 5px;
  bottom: 5px;
  z-index: 7;
  padding: 2px 6px;
  border-radius: 999px;
  color: #075b69;
  background: #d8f4f0;
  font-size: 0.52rem;
  font-weight: 800;
}

.widget-export-button {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 7;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #9fcfca;
  border-radius: 999px;
  color: #075b69;
  background: rgba(240, 253, 251, 0.96);
  font-size: 0.56rem;
  font-weight: 800;
}

.selectable-table tbody tr {
  cursor: pointer;
}

.selectable-table tbody tr.selected td {
  background: #d9f1ee !important;
  box-shadow: inset 0 1px 0 #8bcfc7, inset 0 -1px 0 #8bcfc7;
}

.component-editor {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.component-editor > h2,
.component-editor > p {
  margin: 0;
}

.component-editor-note {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.component-editor-form {
  min-height: 0;
  margin: 0;
  display: grid;
  flex: 1;
}

.component-editor-workspace {
  grid-template-columns: 205px minmax(0, 1fr) 310px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: white;
}

.component-editor-tabs {
  min-height: 0;
  overflow: auto;
  padding: 17px 12px;
  display: grid;
  align-content: start;
  gap: 5px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #f5f9fa 0%, #edf5f6 100%);
}

.component-editor-tab {
  width: 100%;
  min-height: 36px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 0;
  border-radius: 8px;
  color: #466577;
  background: transparent;
  font-size: 0.7rem;
  font-weight: 750;
  text-align: left;
}

.component-editor-tab:hover,
.component-editor-tab.active {
  color: #064f60;
  background: #dff4f1;
}

.component-editor-tab.active {
  background: white;
  box-shadow: 0 6px 18px rgba(9, 55, 70, 0.08), inset 3px 0 0 var(--teal);
}

.component-editor-tab-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: white;
}

.component-editor-tab-panel {
  display: none;
  padding: 24px 26px 34px;
}

.component-editor-tab-panel.active {
  display: block;
}

.component-editor-tab-panel > h3 {
  margin: 0 0 18px;
  color: #173a4d;
  font-size: 1.02rem;
}

.component-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 12px;
}

.component-studio-header {
  min-height: 98px;
  padding: 18px 62px 16px 22px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(105deg, #ffffff 0%, #f5fbfb 65%, #e9f8f6 100%);
}

.component-studio-identity {
  min-width: 0;
  display: flex;
  gap: 14px;
  align-items: center;
}

.component-studio-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  color: white;
  background: linear-gradient(145deg, #0db8ae, #08748a);
  box-shadow: 0 9px 24px rgba(5, 132, 139, 0.23);
  font-size: 1rem;
  font-weight: 900;
}

.component-studio-header h2 {
  padding: 0;
  margin: 2px 0 3px;
  color: #092f42;
  font-size: 1.12rem;
}

.component-studio-header .section-kicker,
.component-studio-header .component-editor-note { margin: 0; }

.component-studio-status {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.component-tabs-title {
  margin: 0;
  padding: 0 9px 5px;
  color: #7b929e;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.component-tab-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #177988;
  background: #e5f2f3;
  font-size: 0.67rem;
  font-weight: 900;
}

.component-editor-preview {
  min-width: 0;
  min-height: 0;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  border-left: 1px solid var(--line);
  background: #f5f9fa;
}

.component-editor-preview-canvas {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px dashed #9fb3bd;
  border-radius: 10px;
  background: white;
  box-shadow: 0 10px 26px rgba(11, 50, 65, 0.06);
}

.component-editor-preview-title {
  padding: 8px 10px;
  color: white;
  background: #00363b;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.component-editor-preview-body {
  min-height: 180px;
  padding: 18px;
  display: grid;
  place-items: center;
  overflow-wrap: anywhere;
  font-weight: 750;
  text-align: center;
}

.component-editor-image-preview {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: contain;
}

.component-editor-preview-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.5;
}

.component-expression-input { min-height: 92px !important; }

.formula-editor-open {
  justify-self: start;
  min-height: 31px;
  padding: 6px 10px;
  border: 1px solid #8ecdc7;
  border-radius: 7px;
  color: #075e59;
  background: #eefaf8;
  font-size: 0.66rem;
  font-weight: 850;
}

.formula-editor-open:hover { background: #dff4f1; }

.formula-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  padding: clamp(12px, 3vw, 40px);
  display: grid;
  place-items: center;
  background: rgb(5 27 38 / 72%);
  backdrop-filter: blur(4px);
}

.formula-editor-panel {
  width: min(1180px, 96vw);
  height: min(780px, 92vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #c7dce1;
  border-radius: 16px;
  background: white;
  box-shadow: 0 28px 80px rgb(0 20 30 / 35%);
}

.formula-editor-header {
  padding: 18px 22px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(105deg, #fff, #eefaf8);
}

.formula-editor-header h2 { margin: 2px 0 4px; color: #0d3447; font-size: 1.1rem; }
.formula-editor-header .section-kicker { margin: 0; }
.formula-editor-subtitle { margin: 0; color: var(--muted); font-size: 0.7rem; }
.formula-editor-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #365c6c;
  background: white;
  font-size: 1.2rem;
}

.formula-editor-body { min-height: 0; display: grid; grid-template-columns: 390px minmax(0, 1fr); }
.formula-editor-catalog {
  min-height: 0;
  padding: 15px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  border-right: 1px solid var(--line);
  background: #f5f9fa;
}
.formula-editor-catalog > input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: white;
  font: inherit;
  font-size: 0.7rem;
}
.formula-editor-categories { display: flex; gap: 5px; flex-wrap: wrap; }
.formula-editor-category {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #496a78;
  background: white;
  font-size: 0.61rem;
  font-weight: 800;
}
.formula-editor-category.active { color: white; border-color: #087f80; background: #087f80; }
.formula-editor-items { min-height: 0; display: grid; align-content: start; gap: 6px; overflow: auto; }
.formula-editor-item {
  padding: 9px 10px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #193f50;
  background: white;
  text-align: left;
}
.formula-editor-item:hover { border-color: #7bc8c1; background: #effaf8; }
.formula-editor-item code { color: #075e59; font-size: 0.69rem; font-weight: 850; }
.formula-editor-item span { color: var(--muted); font-size: 0.59rem; }
.formula-editor-workspace { min-width: 0; min-height: 0; padding: 17px; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 9px; }
.formula-editor-input {
  width: 100%;
  min-height: 0;
  resize: none;
  padding: 15px;
  border: 1px solid #acc5cd;
  border-radius: 10px;
  color: #153747;
  background: #fbfdfd;
  font: 0.78rem/1.7 Consolas, "Courier New", monospace;
  tab-size: 2;
}
.formula-editor-input:focus { outline: 2px solid rgb(0 169 157 / 22%); border-color: #00a99d; }
.formula-editor-status { color: #237266; font-size: 0.64rem; font-weight: 750; }
.formula-editor-status.error { color: #b3261e; }
.formula-editor-hint { margin: 0; color: var(--muted); font-size: 0.62rem; }
.formula-editor-footer {
  padding: 13px 18px;
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  background: #f8fbfc;
}

.metadata-calculated-formula-wrap { display: grid; gap: 6px; }
.metadata-calculated-formula-wrap .formula-editor-open { justify-self: end; }

.component-editor-help,
.component-editor-summary,
.component-editor-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.component-editor-summary,
.component-editor-empty {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f7fafb;
}

.component-type-intro {
  color: #174b59;
  border-color: #b9dfdc;
  background: #effaf8;
  font-weight: 750;
}

.component-image-picker {
  padding: 13px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  border: 1px dashed #9fcac8;
  border-radius: 10px;
  background: #f5fbfa;
}

.component-image-picker-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: #123f52;
  font-size: 0.72rem;
}

.component-image-picker-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.component-image-file-status {
  grid-column: 1 / -1;
  color: #4f6d79;
  font-size: 0.66rem;
}

.component-image-file-status.error { color: #b42318; }
.component-image-remove { color: #a12a2a; }

.component-config-card {
  padding: 13px;
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbfc;
}

.component-config-card.wide {
  grid-column: 1 / -1;
  min-width: 0;
}

.component-config-card-heading {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.component-config-card-heading > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.component-config-step {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 7px;
  color: white;
  background: #087f80;
  font-size: 0.66rem;
  font-weight: 900;
}

.component-config-card h4 {
  margin: 0;
  color: #123f52;
  font-size: 0.75rem;
}

.component-config-card.compact {
  background: #fbfdfd;
}

.component-type-row-list {
  display: grid;
  gap: 6px;
}

.component-type-row-header {
  display: grid;
  gap: 6px;
  padding: 0 7px;
  color: #64808e;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.component-type-row-header.fields {
  grid-template-columns: minmax(145px, 1.3fr) minmax(115px, 1fr) 150px 90px;
}

.component-type-row-header.sort {
  grid-template-columns: minmax(150px, 1.5fr) 150px 130px 90px;
}

.component-type-row-header.filter {
  grid-template-columns: minmax(135px, 1.25fr) minmax(120px, 1fr) minmax(95px, 1fr) minmax(95px, 1fr) 90px;
}

.component-type-empty {
  padding: 12px;
  border: 1px dashed #c6d7dd;
  border-radius: 8px;
  color: #718995;
  background: white;
  font-size: 0.65rem;
  text-align: center;
}

.component-type-field-row,
.component-type-sort-row,
.component-type-filter-row {
  display: grid;
  gap: 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.component-type-field-row {
  grid-template-columns: minmax(145px, 1.3fr) minmax(115px, 1fr) 150px 90px;
}

.component-type-sort-row {
  grid-template-columns: minmax(150px, 1.5fr) 150px 130px 90px;
}

.component-type-filter-row {
  grid-template-columns: minmax(135px, 1.25fr) minmax(120px, 1fr) minmax(95px, 1fr) minmax(95px, 1fr) 90px;
}

.component-type-field-row input,
.component-type-field-row select,
.component-type-sort-row select,
.component-type-filter-row input,
.component-type-filter-row select {
  min-width: 0;
  width: 100%;
  min-height: 33px;
  padding: 6px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: #173a4d;
  background: white;
  font-size: 0.64rem;
}

.component-type-row-actions {
  display: flex;
  gap: 3px;
  justify-content: flex-end;
}

.component-type-row-actions button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #315c6e;
  background: #f4f8f9;
}

.component-type-add {
  justify-self: start;
  min-height: 31px;
  padding: 6px 10px;
  font-size: 0.62rem;
}

.component-column-list {
  display: grid;
  gap: 6px;
}

.component-column-row {
  display: grid;
  grid-template-columns: 22px minmax(105px, 0.8fr) minmax(150px, 1.4fr) 76px 110px 92px;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.component-column-row code {
  overflow: hidden;
  color: #456878;
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-column-row input[type="text"],
.component-column-row input[type="number"],
.component-column-row select {
  width: 100%;
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: #173a4d;
  background: white;
  font-size: 0.66rem;
}

.component-column-order {
  display: flex;
  gap: 3px;
}

.component-column-order button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #315c6e;
  background: #f4f8f9;
}

.component-column-remove {
  color: #a43636 !important;
  background: #fff7f7 !important;
}

.component-column-picker,
.authoring-metadata-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.component-column-picker {
  grid-column: 1 / -1;
}

.component-column-picker select {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: white;
}

.component-column-advanced {
  grid-column: 1 / -1;
  padding: 7px 9px;
  border-top: 1px solid var(--line);
  background: #f8fbfc;
}

.component-column-advanced > summary {
  cursor: pointer;
  color: #315c6e;
  font-size: 0.66rem;
  font-weight: 800;
}

.component-column-advanced-grid {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
}

.component-column-option {
  display: grid;
  gap: 4px;
  color: #466577;
  font-size: 0.62rem;
  font-weight: 750;
}

.component-column-option input,
.component-column-option select {
  width: 100%;
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: #173a4d;
  background: white;
  font-size: 0.66rem;
}

.component-column-option input[type="color"] {
  padding: 3px;
}

.authoring-metadata-row .authoring-field {
  min-width: 0;
}

.local-metadata-test-result {
  padding: 11px;
  border: 1px solid #b9e5df;
  border-radius: 9px;
  background: #effbf9;
}

.local-metadata-test-result strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
}

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

.local-metadata-fields code {
  padding: 4px 6px;
  border-radius: 5px;
  color: #075e59;
  background: white;
  font-size: 0.64rem;
}

.dialog-panel:has(.local-metadata-editor) {
  width: min(1460px, calc(100vw - 28px));
  height: min(940px, calc(100vh - 28px));
  max-height: calc(100vh - 28px);
  overflow: hidden;
  border: 1px solid rgba(127, 158, 173, 0.45);
  border-radius: 18px;
}

.dialog-panel:has(.local-metadata-editor) #dialog-content {
  height: 100%;
  min-height: 0;
}

/* Os editores em estúdio (metadado, tarefa, tema, usuário) ocupam o modal inteiro, como o do dashboard:
   a classe dialog-content-inner (24px de respiro dos modais simples) não pode valer aqui. */
.local-metadata-editor,
.dialog-content-inner.local-metadata-editor {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.local-metadata-editor-form {
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 1;
}

.local-metadata-editor-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: white;
}

.local-metadata-editor-tabs {
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #f5f9fa 0%, #edf5f6 100%);
}

.local-metadata-editor-tab {
  min-height: 43px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 0;
  border-radius: 8px;
  color: #385b6d;
  background: transparent;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 800;
}

.local-metadata-editor-tab:hover,
.local-metadata-editor-tab.active {
  color: #073e4c;
  background: white;
  box-shadow: 0 6px 18px rgba(9, 55, 70, 0.08);
}

.local-metadata-editor-tab.active::before {
  position: absolute;
  left: -12px;
  width: 3px;
  height: 25px;
  border-radius: 0 4px 4px 0;
  background: var(--teal);
  content: "";
}

.local-metadata-editor-panes {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.local-metadata-editor-pane {
  height: 100%;
  padding: 22px 24px 28px;
  display: none;
  overflow: auto;
}

.local-metadata-editor-pane.active {
  display: block;
}

.local-metadata-editor-pane h3 {
  margin: 0 0 17px;
  color: #0b2f41;
  font-size: 1.02rem;
}

.local-metadata-general-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.local-metadata-general-grid .authoring-field:last-child {
  grid-column: 1 / -1;
}

.metadata-studio-header {
  min-height: 98px;
  padding: 18px 62px 16px 22px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(105deg, #ffffff 0%, #f5fbfb 65%, #e9f8f6 100%);
}

.metadata-studio-identity {
  min-width: 0;
  display: flex;
  gap: 14px;
  align-items: center;
}

.metadata-studio-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  color: white;
  background: linear-gradient(145deg, #0db8ae, #08748a);
  box-shadow: 0 9px 24px rgba(5, 132, 139, 0.23);
  font-size: 1.05rem;
  font-weight: 900;
}

.metadata-studio-header h2 {
  padding: 0;
  margin: 2px 0 3px;
  color: #092f42;
  font-size: 1.12rem;
}

.metadata-studio-header .component-editor-note,
.metadata-studio-header .section-kicker {
  margin: 0;
}

.metadata-studio-status {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.metadata-studio-chip {
  padding: 5px 8px;
  border: 1px solid #d5e4e8;
  border-radius: 999px;
  color: #4b6978;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.61rem;
  font-weight: 850;
}

.metadata-studio-chip.primary {
  color: #07635f;
  border-color: #aee0db;
  background: #e6f8f5;
}

.metadata-tabs-title {
  padding: 0 9px 5px;
  color: #7b929e;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.local-metadata-editor-tab {
  position: relative;
}

.metadata-tab-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #277182;
  background: #e3eff2;
  font-size: 0.66rem;
  font-weight: 900;
}

.local-metadata-editor-tab.active .metadata-tab-icon {
  color: white;
  background: var(--teal);
}

.metadata-tab-badge:not(:empty) {
  min-width: 20px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #59727e;
  background: #e7eff2;
  text-align: center;
  font-size: 0.57rem;
}

.metadata-settings-card {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfd;
}

.metadata-settings-heading {
  margin-bottom: 3px;
  color: #173f51;
  font-size: 0.78rem;
  font-weight: 900;
}

.metadata-settings-card > .component-editor-help {
  margin-bottom: 13px;
}

.metadata-settings-card textarea {
  min-height: 82px;
  resize: vertical;
}

.metadata-technical-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.metadata-technical-summary > div {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.metadata-technical-summary span,
.metadata-technical-summary strong {
  display: block;
}

.metadata-technical-summary span {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.58rem;
}

.metadata-technical-summary strong {
  color: #173f51;
  font-size: 0.68rem;
}

.local-metadata-query-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.local-metadata-query-workspace {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 27%) minmax(0, 1fr);
  gap: 12px;
}

.local-metadata-query-main {
  min-width: 0;
}

.metadata-object-browser {
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f5f9fa;
}

.metadata-object-browser-title {
  color: #123f52;
  font-size: 0.76rem;
}

.metadata-object-browser input {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: white;
  font-size: 0.68rem;
}

.metadata-object-search-button {
  width: 100%;
  min-height: 34px;
  border: 1px solid #9acbc7;
  border-radius: 7px;
  color: #075b69;
  background: #e9f8f6;
  font-size: 0.65rem;
  font-weight: 850;
}

.metadata-object-search-button:hover:not(:disabled) {
  background: #d9f2ef;
}

.metadata-object-feedback {
  min-height: 30px;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.45;
}

.metadata-object-feedback.success {
  color: #087268;
}

.metadata-object-feedback.error {
  color: #b52d2d;
}

.metadata-object-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
}

.metadata-object-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.metadata-object-heading {
  padding: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.metadata-object-heading > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.metadata-object-heading strong,
.metadata-object-heading small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-object-heading strong {
  color: #173f50;
  font-size: 0.65rem;
}

.metadata-object-heading small {
  color: var(--muted);
  font-size: 0.56rem;
}

.metadata-object-actions {
  display: flex;
  gap: 4px;
}

.metadata-object-action {
  padding: 4px 6px;
  border: 1px solid #b8d4d7;
  border-radius: 6px;
  color: #08616d;
  background: #f4fbfa;
  font-size: 0.56rem;
  font-weight: 800;
}

.metadata-object-columns {
  max-height: 190px;
  padding: 6px;
  display: grid;
  gap: 4px;
  overflow: auto;
  border-top: 1px solid var(--line);
}

.metadata-object-column {
  padding: 5px 6px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border: 0;
  border-radius: 5px;
  color: #234b5c;
  background: #f7fafb;
  text-align: left;
}

.metadata-object-column:hover {
  color: #075b69;
  background: #e3f6f3;
}

.metadata-object-column code,
.metadata-object-column span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.56rem;
}

.local-metadata-query-toolbar .authoring-field {
  width: 170px;
}

.local-metadata-query-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}

.local-metadata-query-tabs button {
  padding: 8px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  font-size: 0.7rem;
  font-weight: 850;
}

.local-metadata-query-tabs button.active {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
}

.local-metadata-query-pane {
  min-height: 0;
  padding-top: 10px;
  display: none;
}

.local-metadata-query-pane.active {
  display: block;
}

.local-metadata-query-pane textarea {
  min-height: 330px;
  resize: vertical;
  font-family: Consolas, "Courier New", monospace;
}

/* Editor de SQL: o <pre> colorido fica atrás do textarea transparente, na mesma célula da grade. */
.msql-editor {
  position: relative;
  width: 100%;
}

.msql-editor > .msql-editor-highlight,
.msql-editor > .msql-editor-input {
  margin: 0;
  box-sizing: border-box;
  font: 13px/1.45 Consolas, "Courier New", monospace;
  letter-spacing: normal;
  tab-size: 4;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
}

/* O <pre> colorido cobre exatamente a caixa do textarea e acompanha a rolagem dele (scrollTop sincronizado). */
.msql-editor > .msql-editor-highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: #1f2f3a;
  background: #fbfdfe;
  border-color: var(--line);
}

.msql-editor > .msql-editor-highlight code {
  font: inherit;
  white-space: inherit;
}

.msql-editor > .msql-editor-input {
  position: relative;
  display: block;
  width: 100%;
  height: 420px;
  min-height: 220px;
  resize: vertical;
  overflow: auto;
  background: transparent;
  color: transparent;
  caret-color: #16303d;
  border-color: var(--line);
}

.msql-editor > .msql-editor-input:focus {
  outline: none;
  border-color: #1d7c73;
  box-shadow: 0 0 0 3px rgba(29, 124, 115, 0.15);
}

.msql-k { color: #1d5fbf; font-weight: 700; }
.msql-s { color: #a0522d; }
.msql-i { color: #2d6a4f; }
.msql-c { color: #7a8a94; font-style: italic; }
.msql-n { color: #7b3fa0; }
.msql-p { color: #c2410c; font-weight: 700; }
.msql-f { color: #0f766e; font-weight: 700; }

.msql-autocomplete {
  position: absolute;
  z-index: 5;
  min-width: 220px;
  max-width: 360px;
  max-height: 260px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(23, 50, 66, 0.18);
  padding: 4px;
}

.msql-autocomplete.hidden {
  display: none;
}

.msql-autocomplete-item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  font-size: 0.78rem;
  cursor: pointer;
}

.msql-autocomplete-item.active,
.msql-autocomplete-item:hover {
  background: #e6f4f2;
}

.msql-autocomplete-item small {
  color: #5b7383;
  white-space: nowrap;
}

.component-plan-sql {
  max-height: 55vh;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
  font: 12px/1.5 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
}

.component-calculated-rows {
  display: grid;
  gap: 8px;
}

.component-calculated-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(140px, 0.8fr) minmax(260px, 2fr) auto auto;
  gap: 6px;
  align-items: start;
}

.component-calculated-row textarea {
  font-family: Consolas, "Courier New", monospace;
}

.data-explorer {
  width: min(1400px, 96vw);
}

.explorer-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 14px;
  align-items: start;
}

.explorer-builder {
  display: grid;
  gap: 10px;
  max-height: 72vh;
  overflow: auto;
}

.explorer-area {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfc;
  font-size: 0.72rem;
}

.explorer-area-items {
  display: grid;
  gap: 4px;
}

.explorer-area-item {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  background: white;
  border: 1px solid var(--line);
}

.explorer-area-item span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: #234553;
}

.explorer-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.explorer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.explorer-result {
  max-height: 64vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.explorer-pivot {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.72rem;
}

.explorer-pivot th,
.explorer-pivot td {
  padding: 5px 8px;
  border-bottom: 1px solid #edf2f4;
  text-align: left;
  white-space: nowrap;
}

.explorer-pivot th {
  position: sticky;
  top: 0;
  background: #eef4f6;
  color: #234553;
}

.explorer-pivot td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.explorer-pivot .explorer-total-row td {
  background: #f6f9fa;
  font-weight: 800;
}

.explorer-chart {
  width: 100%;
  height: auto;
  display: block;
}

.scenario-menu-row {
  display: flex;
  align-items: center;
}

.scenario-menu-row button:first-child {
  flex: 1;
}

.authoring-tab-color {
  width: 34px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
}

.authoring-tab-move {
  min-width: 30px;
}

.dashboard-authoring-action.restricted {
  border-color: #d98a16;
  color: #8a5a10;
}

.authoring-tab-access {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: #fbfcfd;
}

.dashboard-share-wrap {
  position: relative;
  display: inline-flex;
}

.dashboard-share-wrap .dashboard-more-menu {
  width: 280px;
  max-height: 70vh;
  overflow: auto;
}

.dashboard-more-heading {
  display: block;
  padding: 8px 10px 2px;
  color: #6a8191;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-more-section {
  display: grid;
}

.dashboard-more-section > .component-editor-help {
  padding: 4px 10px;
}

.dashboard-share-menu {
  top: calc(100% + 4px);
  right: 0;
  left: auto;
}

.component-manager-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.component-manager-filters .link-button,
.permission-table .link-button {
  border: 0;
  background: none;
  color: #0d6e74;
  cursor: pointer;
  padding: 0;
  text-align: left;
  text-decoration: underline;
}

.task-recipient-sources {
  grid-column: 1 / -1;
  font-size: 0.72rem;
}

.task-recipient-sources summary {
  cursor: pointer;
  color: #34576a;
  font-weight: 700;
}

.task-recipient-sources-body {
  display: grid;
  gap: 6px;
  padding: 8px 0 4px 12px;
}

.recipient-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.recipient-chip {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #eef6f6;
  color: #234553;
  font-size: 0.68rem;
}

.recipient-chip.warning {
  background: #fff4df;
  border-color: #e7c78a;
}

.recipient-chip button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 800;
}

.contacts-table th:first-child {
  min-width: 200px;
}

.contact-member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.component-parameter-overrides {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfc;
}

.component-parameter-override-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) minmax(110px, 1fr) minmax(150px, 1fr) minmax(160px, 1.4fr);
  gap: 7px;
  align-items: center;
}

.component-parameter-override-row code {
  color: #075e59;
  font-size: 0.66rem;
  font-weight: 800;
}

.metadata-editor-materialized-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  color: #466577;
  font-size: 0.72rem;
}

.metadata-editor-object-host .panel {
  box-shadow: none;
}

.metadata-parameter-locked input:disabled,
.metadata-parameter-locked select:disabled {
  background: #f1f4f6;
  color: #4d6170;
  cursor: not-allowed;
}

.local-metadata-parameter-row .local-metadata-inline-check:has(.metadata-parameter-overridable) {
  grid-column: 1 / span 2;
}

.metadata-parameter-sql-default {
  grid-column: 3 / -1;
  font-size: 12px;
}

.metadata-parameter-sql-default summary {
  cursor: pointer;
  color: #34576a;
  font-weight: 700;
}

.metadata-parameter-sql-default textarea,
.metadata-parameter-sql-default input {
  width: 100%;
  margin-top: 6px;
  font-family: Consolas, "Courier New", monospace;
}

.dashboard-metadata-link-rows {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.dashboard-metadata-link-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 1fr) auto minmax(140px, 1fr) minmax(120px, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.dashboard-link-equals {
  font-weight: 800;
  color: #34576a;
}

.metadata-field-rule-attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.field-rule-row {
  grid-template-columns: 120px minmax(90px, 0.8fr) minmax(130px, 1fr) 130px 140px 130px minmax(100px, 0.8fr) auto auto;
  align-items: center;
}

.field-rule-flags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.metadata-validate-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.metadata-console-result {
  margin-top: 10px;
}

.metadata-field-catalog-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  align-items: stretch;
}

.metadata-field-moves {
  display: grid;
  gap: 2px;
}

.metadata-field-move {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  width: 24px;
  cursor: pointer;
  font-size: 0.7rem;
  color: #34576a;
}

.metadata-hierarchy-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.metadata-hierarchy-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.metadata-hierarchy-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6f4f2;
  font-size: 0.74rem;
}

.metadata-hierarchy-chip-remove {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #7a8a94;
}


.local-metadata-query-pane .query-result-wrap {
  max-height: 390px;
}

.local-metadata-result-summary {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.68rem;
}

.local-metadata-field-settings,
.local-metadata-parameter-settings {
  display: grid;
  gap: 7px;
}

.local-metadata-repeat-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.local-metadata-repeat-row {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f9fbfc;
}

.local-metadata-repeat-row input,
.local-metadata-repeat-row select,
.local-metadata-repeat-row textarea {
  min-width: 0;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--ink);
  background: white;
  font: inherit;
  font-size: 0.68rem;
}

.local-metadata-repeat-row textarea {
  resize: vertical;
  font-family: Consolas, "Courier New", monospace;
}

.local-metadata-calculated-row {
  grid-template-columns: minmax(120px, 0.8fr) minmax(120px, 0.8fr) 120px 140px minmax(100px, 0.7fr) minmax(240px, 2fr) auto;
}

.local-metadata-filter-row {
  grid-template-columns: minmax(135px, 1fr) minmax(135px, 0.9fr) minmax(180px, 1.4fr) minmax(140px, 1fr) minmax(100px, 0.6fr) auto;
}

.local-metadata-hierarchy-row {
  grid-template-columns: minmax(150px, 0.8fr) minmax(170px, 1fr) minmax(280px, 1.8fr) auto;
}

.local-metadata-remove {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #efc0c0;
  border-radius: 7px;
  color: #a32323;
  background: #fff6f6;
  font-size: 0.64rem;
  font-weight: 850;
}

.local-metadata-remove:hover {
  border-color: #d98d8d;
  background: #ffeaea;
}

.local-metadata-field-row {
  display: grid;
  grid-template-columns: 24px minmax(110px, 0.8fr) minmax(130px, 1fr) 130px minmax(160px, 1.4fr);
  gap: 7px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfc;
}

.local-metadata-field-row code,
.local-metadata-parameter-row code {
  color: #075e59;
  font-size: 0.66rem;
  font-weight: 800;
}

.local-metadata-field-row input,
.local-metadata-field-row select,
.local-metadata-parameter-row input,
.local-metadata-parameter-row select {
  min-width: 0;
  width: 100%;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: white;
  font-size: 0.67rem;
}

.local-metadata-field-row input[type="checkbox"],
.local-metadata-parameter-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
}

.local-metadata-parameter-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.6fr) minmax(120px, 1fr) 130px minmax(120px, 1fr) minmax(150px, 1fr) 100px 80px 110px;
  gap: 7px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfc;
}

.local-metadata-inline-check {
  display: flex;
  gap: 5px;
  align-items: center;
  color: #466577;
  font-size: 0.64rem;
  font-weight: 750;
}

.local-metadata-editor-actions {
  min-height: 70px;
  padding: 12px 18px;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  background: white;
  box-shadow: 0 -8px 26px rgba(9, 45, 60, 0.05);
}

.metadata-editor-action-copy {
  min-width: 0;
}

.metadata-editor-action-copy strong {
  display: block;
  margin-bottom: 3px;
  color: #294b5c;
  font-size: 0.66rem;
}

.metadata-editor-action-copy .component-editor-feedback {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.62rem;
}

.metadata-editor-action-buttons {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.metadata-editor-action-buttons button {
  min-height: 38px;
  padding: 8px 14px;
}

.local-metadata-editor .secondary-button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #b9ccd4;
  border-radius: 8px;
  color: #294e60;
  background: white;
  box-shadow: 0 1px 2px rgba(8, 45, 59, 0.04);
  font-size: 0.66rem;
  font-weight: 850;
}

.local-metadata-editor .secondary-button:hover:not(:disabled) {
  border-color: #73bdb8;
  color: #086a6d;
  background: #f2fbfa;
}

.metadata-field-workbench {
  height: calc(100% - 34px);
  min-height: 390px;
  display: grid;
  grid-template-columns: minmax(210px, 28%) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.metadata-field-catalog {
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-right: 1px solid var(--line);
  background: #f6f9fa;
}

.metadata-field-catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #234a5c;
  font-size: 0.7rem;
}

.metadata-field-catalog-header span {
  padding: 3px 6px;
  border-radius: 999px;
  color: #557481;
  background: #e4edef;
  font-size: 0.58rem;
  font-weight: 850;
}

.metadata-field-catalog > input {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: white;
  font-size: 0.66rem;
}

.metadata-field-catalog-list {
  min-height: 0;
  display: grid;
  gap: 5px;
  overflow: auto;
}

.metadata-field-catalog-item {
  width: 100%;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #315566;
  background: transparent;
  text-align: left;
}

.metadata-field-catalog-item:hover,
.metadata-field-catalog-item.active {
  border-color: #b9dfdc;
  background: white;
  box-shadow: 0 5px 14px rgba(7, 67, 76, 0.07);
}

.metadata-field-catalog-item code {
  overflow: hidden;
  color: #0a5d62;
  font-size: 0.66rem;
  font-weight: 900;
  text-overflow: ellipsis;
}

.metadata-field-catalog-item > span {
  grid-row: span 2;
  align-self: center;
  color: #82959d;
  font-size: 0.55rem;
}

.metadata-field-catalog-item small {
  color: #78909c;
  font-size: 0.55rem;
}

.metadata-field-catalog-item.muted {
  opacity: 0.58;
}

.metadata-field-inspector {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.metadata-field-inspector .local-metadata-field-row {
  display: none;
}

.metadata-field-inspector .local-metadata-field-row.active {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  align-content: start;
  border: 0;
  border-radius: 0;
  background: white;
}

.metadata-field-inspector-header {
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.metadata-field-inspector-header .section-kicker {
  margin: 0 0 4px;
}

.metadata-field-inspector-header code {
  color: #133f51;
  font-size: 0.82rem;
}

.metadata-field-property-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.metadata-field-property-grid .authoring-field,
.local-metadata-field-row > .authoring-field {
  min-width: 0;
}

.metadata-field-property-grid input,
.metadata-field-property-grid select,
.local-metadata-field-row > .authoring-field input {
  padding: 9px 10px;
}

.metadata-field-behavior {
  padding: 11px 12px;
  display: flex;
  gap: 24px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f7fafb;
}

.metadata-property-check {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #36596a;
  font-size: 0.66rem;
  font-weight: 800;
}

.metadata-property-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.metadata-section-toolbar {
  margin: 10px 0 12px;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: end;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7fafb;
}

.metadata-section-toolbar .authoring-field {
  width: min(330px, 100%);
}

.metadata-editor-empty-state {
  min-height: 330px;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--muted);
  text-align: center;
}

.metadata-editor-empty-state strong {
  margin: 9px 0 4px;
  color: #294f61;
  font-size: 0.76rem;
}

.metadata-editor-empty-state p {
  max-width: 360px;
  font-size: 0.66rem;
}

.metadata-editor-empty-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #087a82;
  background: #e1f4f2;
  font-size: 1rem;
}

@media (max-width: 780px) {
  .local-metadata-editor-workspace {
    grid-template-columns: 1fr;
  }

  .dashboard-studio .dashboard-settings-workbench,
  .component-studio-workspace {
    grid-template-columns: 1fr;
  }

  .local-metadata-query-workspace {
    grid-template-columns: 1fr;
  }

  .metadata-object-browser {
    max-height: 280px;
  }

  .local-metadata-editor-tabs {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .dashboard-studio .dashboard-settings-nav {
    padding: 10px;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .dashboard-studio .dashboard-settings-nav::before,
  .component-create-tabs .metadata-tabs-title { display: none; }

  .dashboard-studio .dashboard-settings-nav button { flex: 1; }
  .dashboard-studio .dashboard-settings-nav button.active::after { display: none; }
  .component-authoring-studio .component-type-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-identity-grid { grid-template-columns: 1fr; }
  .dashboard-identity-grid .authoring-field:last-child:nth-child(3) { grid-column: 1; }

  .local-metadata-field-row,
  .local-metadata-parameter-row,
  .local-metadata-repeat-row,
  .local-metadata-general-grid {
    grid-template-columns: 1fr;
  }

  .metadata-studio-status {
    display: none;
  }

  .metadata-studio-header {
    min-height: 96px;
    padding: 14px 54px 12px 16px;
  }

  .metadata-field-workbench,
  .metadata-field-property-grid,
  .metadata-technical-summary {
    grid-template-columns: 1fr;
  }

  .metadata-field-catalog {
    max-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .metadata-editor-action-copy {
    display: none;
  }

  .local-metadata-editor-actions {
    justify-content: flex-end;
  }
}

.component-editor-field {
  display: grid;
  gap: 6px;
  color: #34576a;
  font-size: 0.68rem;
  font-weight: 800;
}

.component-editor-field.wide,
.component-editor-check.wide,
.component-editor-feedback.wide,
.component-editor-actions.wide,
.component-editor-help.wide,
.component-editor-summary.wide,
.component-editor-empty.wide,
.component-column-list.wide,
.component-image-picker.wide,
.component-editor-metadata-tools.wide {
  grid-column: 1 / -1;
}

.component-editor-metadata-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.component-editor-metadata-tools .component-editor-help {
  margin: 0;
}

.component-editor-field input,
.component-editor-field select,
.component-editor-field textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: #173a4d;
  background: white;
  font: inherit;
  font-weight: 600;
}

.component-editor-section {
  margin: 6px 0 -2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: #173a4d;
  font-size: 0.78rem;
}

.component-editor-field input[type="color"] {
  padding: 4px;
}

.component-editor-field textarea {
  min-height: 220px;
  resize: vertical;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  line-height: 1.45;
}

.component-editor-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #34576a;
  font-size: 0.72rem;
  font-weight: 750;
}

.component-editor-feedback {
  min-height: 20px;
  color: #28706b;
  font-size: 0.72rem;
}

.component-editor-feedback.error {
  color: #b84141;
}

.component-editor-feedback.success {
  color: #087870;
}

.component-editor-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -8px 18px rgba(18, 48, 70, 0.06);
}

.component-editor-workspace > .component-editor-feedback {
  grid-column: 1 / -1;
  padding: 8px 18px 0;
  background: white;
}

.widget-heading {
  min-height: 30px;
  padding: 7px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #e9eef1;
  color: #26475a;
  background: #f8fafb;
  font-size: 0.62rem;
  font-weight: 800;
}

.widget-heading span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-type {
  color: #8aa0ac;
  font-size: 0.55rem;
  font-weight: 700;
}

.widget-body {
  min-height: 0;
  overflow: hidden;
  padding: 8px;
  color: #435e6e;
  font-size: 0.6rem;
}

.filter-widget .widget-body-filters {
  padding: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.widget-body-loaded {
  overflow: auto;
  padding: 0;
}

.canvas-widget.weknow-component {
  border-color: #e5e5e5;
  border-radius: 0;
  box-shadow: none;
}

.weknow-component .widget-heading {
  min-height: 27px;
  justify-content: center;
  padding: 5px 8px;
  color: #111;
  background: #fff;
  font-size: clamp(0.68rem, 0.75vw, 0.82rem);
  text-align: center;
}

.weknow-component .widget-heading > span:first-child {
  flex: 1;
}

.weknow-component .widget-type {
  display: none;
}

.weknow-component .widget-body {
  font-size: 0.72rem;
}

.canvas-widget.table-density-compact table th,
.canvas-widget.table-density-compact table td {
  padding: 3px 5px;
}

.canvas-widget.table-density-comfortable table th,
.canvas-widget.table-density-comfortable table td {
  padding: 10px 12px;
}

.canvas-widget.table-striped table tbody tr:nth-child(even) td {
  background: #f3f8fa;
}

.widget-result-wrap {
  min-width: max-content;
}

.pivot-result-wrap {
  min-width: 100%;
  color: #173a4d;
}

.pivot-toolbar {
  min-width: 100%;
  min-height: 34px;
  padding: 5px 7px;
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccdce1;
  background: #f7fbfc;
}

.pivot-hierarchy-summary {
  max-width: 58vw;
  overflow: hidden;
  color: #527180;
  font-size: 0.58rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pivot-toolbar-actions {
  display: flex;
  gap: 5px;
}

.pivot-toolbar-button {
  min-height: 23px;
  padding: 3px 7px;
  border: 1px solid #a9cbc9;
  border-radius: 5px;
  color: #08736d;
  background: white;
  font: inherit;
  font-size: 0.56rem;
  font-weight: 850;
  cursor: pointer;
}

.pivot-table th { top: 34px; }

.pivot-table .pivot-row-header,
.pivot-table .pivot-row-cell {
  min-width: 170px;
  position: sticky;
  left: 0;
}

.pivot-table .pivot-row-header {
  z-index: 3;
  color: white;
  background: #163a64;
}

.pivot-table .pivot-column-header,
.pivot-table .pivot-measure-header,
.pivot-table .pivot-total-header {
  color: white;
  background: #163a64;
  text-align: center;
}

.pivot-table .pivot-column-header.level-1,
.pivot-table .pivot-column-header.level-2,
.pivot-table .pivot-column-header.level-3,
.pivot-table .pivot-measure-header {
  background: #24547c;
}

.pivot-table .pivot-row-cell {
  z-index: 1;
  padding-left: calc(6px + var(--pivot-level, 0) * 16px);
  background: white;
}

.pivot-group-row > td {
  border-top: 1px solid #c7dade;
  background: #f0f7f7;
  font-weight: 800;
}

.pivot-group-row > .pivot-row-cell { background: #f0f7f7; }

.pivot-expand-toggle {
  width: 17px;
  height: 17px;
  margin-right: 5px;
  padding: 0;
  border: 1px solid #83aaa9;
  border-radius: 3px;
  color: #075f61;
  background: white;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.pivot-leaf-marker {
  width: 22px;
  display: inline-block;
}

.pivot-subtotal-label {
  margin-left: 7px;
  color: #6a8791;
  font-size: 0.5rem;
  font-weight: 700;
}

.pivot-value-cell { text-align: right !important; }

.pivot-total-cell {
  border-left: 2px solid #9fbcc3;
  background: #eef5f7;
  font-weight: 850;
}

.pivot-grand-total-row > td {
  border-top: 2px solid #72949f;
  color: #0e4051;
  background: #dfeef0;
  font-weight: 900;
}

.pivot-grand-total-row > .pivot-row-cell { background: #dfeef0; }

.pivot-limit-note {
  display: block;
  padding: 5px 7px;
  color: #6a818c;
  background: #f8fbfc;
  font-size: 0.56rem;
}

.widget-result-wrap.single-value-result {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.single-value-table,
.single-value-table tbody,
.single-value-table tr {
  width: 100%;
  height: 100%;
}

.single-value-table td {
  border: 0;
  vertical-align: middle;
  overflow: visible;
  text-overflow: clip;
}

.loaded-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

.loaded-table td {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loaded-table.wrap-lines td {
  max-width: 320px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.loaded-table.fit-width {
  width: 100%;
}

.conditional-weknow-icon-wrap {
  display: inline-flex;
  margin-right: 4px;
  vertical-align: -1px;
}

.conditional-weknow-icon {
  height: 12px;
  width: 12px;
}

.conditional-weknow-image {
  display: block;
  max-height: 20px;
  max-width: 24px;
  object-fit: contain;
}

.text-orientation-270 {
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

.text-orientation-90 {
  writing-mode: vertical-rl;
}

.sound-alert-active {
  animation: sound-alert-pulse 1.2s ease-in-out 3;
}

@keyframes sound-alert-pulse {
  50% { box-shadow: 0 0 0 4px rgba(214, 69, 65, 0.55); }
}

.sound-alert-unlock {
  background: #d64541;
  border: 0;
  border-radius: 6px;
  bottom: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  padding: 4px 8px;
  position: absolute;
  right: 6px;
  z-index: 5;
}

.loaded-chart {
  padding: 8px;
}

.loaded-chart i {
  opacity: 0.9;
}

.configured-chart {
  width: 100%;
  height: 100%;
  min-width: 260px;
  padding: 8px 10px 10px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: #29495d;
  box-sizing: border-box;
  min-height: 0;
}

.configured-chart-empty {
  place-items: center;
  grid-template-rows: minmax(0, 1fr);
  color: #6d8794;
  font-size: 0.72rem;
  font-weight: 700;
}

.configured-chart-columns svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}

.configured-chart-grid-line { stroke: #dfe6e9; stroke-width: 1; }
.configured-chart-axis-text { fill: #43545c; font: 11px "Segoe UI", sans-serif; }
.configured-chart-value { fill: #263b46; font: 700 11px "Segoe UI", sans-serif; }
.configured-chart-column { opacity: 0.95; }
.configured-chart-columns.stacked .configured-chart-column { opacity: 1; }
.configured-chart-stack-total {
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.configured-chart-summary {
  justify-content: center;
  margin: 0 0 4px;
  color: #213e4c;
}

.configured-chart-summary strong { font-size: 0.65rem; }
.configured-chart-horizontal {
  overflow: hidden;
  align-content: stretch;
}

.configured-chart-horizontal-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.configured-chart-horizontal-body.with-side-legend {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.configured-chart-scroll-x {
  overflow-x: auto;
}

.configured-chart-scroll-x svg {
  max-width: none;
}

.configured-chart-horizontal-body.configured-chart-scroll-y {
  overflow-y: auto;
}

.configured-chart-horizontal svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  overflow: visible;
}

.configured-chart-horizontal-bar { opacity: 1; }

.configured-chart-category-text {
  font-size: 10px;
  font-weight: 650;
}

.configured-chart-category-legend {
  max-width: 150px;
  max-height: min(120px, 45%);
  align-self: start;
  margin: 7px 0 0;
  padding: 7px 8px;
  display: grid;
  gap: 3px;
  overflow: auto;
  border: 1px solid #aeb6ba;
  background: rgb(255 255 255 / 94%);
  font-size: 0.58rem;
  font-weight: 700;
}

.configured-chart-category-legend span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configured-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-bottom: 8px;
  font-size: 0.66rem;
  font-weight: 700;
}

.configured-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.configured-chart-legend i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.configured-chart-plot {
  display: grid;
  gap: 6px;
}

.configured-chart-group {
  display: grid;
  grid-template-columns: minmax(72px, 32%) 1fr;
  align-items: center;
  gap: 8px;
}

.configured-chart-label {
  color: #567184;
  font-size: 0.64rem;
  line-height: 1.15;
  text-align: right;
  overflow-wrap: anywhere;
}

.configured-chart-bars {
  display: grid;
  gap: 3px;
}

.configured-chart-line {
  position: relative;
  min-width: 120px;
  height: 15px;
  overflow: hidden;
  border-radius: 4px;
  background: #edf3f5;
}

.configured-chart-line i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  opacity: 0.88;
}

.configured-chart-stacked-line {
  display: flex;
  align-items: stretch;
}

.configured-chart-stacked-line .configured-chart-stack-segment {
  flex: 0 0 auto;
  min-width: 1px;
  border-radius: 0;
}

.configured-chart-stacked-line .configured-chart-stack-segment:first-child { border-radius: 4px 0 0 4px; }
.configured-chart-stacked-line .configured-chart-stack-segment:last-of-type { border-radius: 0 4px 4px 0; }

.configured-chart-stacked-line .configured-chart-stack-label {
  color: #17394d;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}

.configured-chart-line span {
  position: absolute;
  inset: 0 4px;
  overflow: hidden;
  color: #17394d;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 15px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configured-trend {
  min-width: 280px;
  padding: 8px 10px 4px;
  color: #29495d;
}

.configured-trend svg {
  width: 100%;
  min-height: 150px;
  display: block;
  overflow: visible;
}

/* Dentro do componente: a linha ocupa a altura que o painel deu (sem rolagem quando a caixa é larga e baixa). */
.widget-body > .configured-trend {
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.widget-body > .configured-trend svg {
  height: 100%;
  min-height: 0;
}

.trend-axis {
  stroke: #c8d9df;
  stroke-width: 1;
}

.trend-area {
  opacity: 0.18;
}

.trend-label {
  fill: #607b8b;
  font-family: "Segoe UI", sans-serif;
  font-size: 11px;
}

.configured-circular {
  min-width: 270px;
  display: grid;
  grid-template-columns: minmax(110px, 40%) 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px;
}

.configured-circular-figure {
  width: min(100%, 160px);
  aspect-ratio: 1;
  justify-self: center;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(14, 62, 82, 0.12);
}

.configured-circular-figure.donut::after {
  width: 54%;
  aspect-ratio: 1;
  position: absolute;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.configured-circular-figure span {
  z-index: 1;
  max-width: 45%;
  overflow: hidden;
  color: #173f54;
  font-size: 0.7rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configured-circular-legend {
  display: grid;
  gap: 5px;
}

.configured-circular-legend div {
  display: grid;
  grid-template-columns: 8px minmax(60px, 1fr) auto;
  align-items: center;
  gap: 6px;
  font-size: 0.62rem;
}

.configured-circular-legend i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.configured-circular-legend span,
.configured-circular-legend strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .configured-circular {
    grid-template-columns: 1fr;
  }
}

.widget-metric {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
  color: var(--teal);
  font-size: clamp(1rem, 2.8vw, 2rem);
  font-weight: 850;
  text-overflow: ellipsis;
}

.indicator-result {
  min-width: 180px;
  min-height: 100%;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 14px;
}

.indicator-copy {
  display: grid;
  gap: 2px;
  color: var(--teal);
  font-size: clamp(0.85rem, 2.3vw, 1.7rem);
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
}

.indicator-track {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4eef1;
  box-shadow: inset 0 1px 2px rgba(5, 45, 66, 0.12);
}

.indicator-track i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  transition: width 180ms ease;
}

.configured-gauge {
  width: 100%;
  height: 100%;
  min-width: 180px;
  min-height: 150px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.configured-gauge svg {
  width: 100%;
  height: 100%;
  min-height: 150px;
  display: block;
}

.configured-gauge-track,
.configured-gauge-range {
  fill: none;
  stroke-linecap: butt;
}

.configured-gauge-track {
  stroke: #e5ecef;
  stroke-width: 25px;
}

.configured-gauge-range { stroke-width: 25px; }
.configured-gauge-tick { stroke: #4a5960; stroke-width: 1.5px; }
.configured-gauge-label { fill: #485860; font: 700 12px "Segoe UI", sans-serif; }
.configured-gauge-needle { stroke: #1d2529; stroke-width: 3px; stroke-linecap: round; }
.configured-gauge-hub { fill: #11191d; stroke: #fff; stroke-width: 2px; }
.configured-gauge-value {
  fill: #4a5960;
  font: 800 16px "Segoe UI", sans-serif;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
}

.configured-card-grid {
  min-width: 220px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 8px;
}

.configured-card {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px;
  border: 1px solid #d9e8ec;
  border-radius: 10px;
  background: linear-gradient(145deg, #ffffff, #f2f8f9);
  color: #173f54;
  box-shadow: 0 5px 14px rgba(13, 57, 78, 0.08);
}

/* Cartão dentro do componente: ocupa a altura que o painel deu, sem barra de rolagem quando a caixa é baixa. */
.widget-body > .configured-card-grid { height: 100%; }
.widget-body > .configured-card-grid > .configured-card { min-height: 0; }
.widget-body:has(> .configured-card-grid > .configured-card:only-child) { overflow: hidden; }

.configured-card strong {
  color: var(--teal);
  font-size: 1.3rem;
  text-align: center;
}

.configured-card-line,
.configured-card-label {
  display: block;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.configured-card-line:has(+ .configured-card-line),
.configured-card-label {
  color: #587485;
}

.widget-query-error {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 10px;
  background: #fff8f8;
  font-size: 0.62rem;
  line-height: 1.45;
  text-align: center;
}

.widget-text {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--ink);
  text-align: center;
  font-size: clamp(0.72rem, 1.3vw, 1rem);
  font-weight: 750;
}

.widget-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
}

.mini-table th,
.mini-table td {
  padding: 4px 5px;
  border-bottom: 1px solid #e9eff2;
  text-align: left;
}

.mini-table th {
  color: #335466;
  background: #f1f6f8;
}

.skeleton-cell {
  height: 5px;
  border-radius: 4px;
  background: #dce7eb;
}

.mini-chart {
  height: 100%;
  min-height: 70px;
  display: flex;
  align-items: flex-end;
  gap: 7%;
  padding: 10px 10px 5px;
  border-left: 1px solid #dce6ea;
  border-bottom: 1px solid #dce6ea;
}

.mini-chart i {
  flex: 1;
  min-width: 6px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--teal-bright), var(--teal));
  opacity: 0.72;
}

.mini-chart i:nth-child(1) { height: 38%; }
.mini-chart i:nth-child(2) { height: 72%; }
.mini-chart i:nth-child(3) { height: 51%; }
.mini-chart i:nth-child(4) { height: 86%; }
.mini-chart i:nth-child(5) { height: 64%; }

.waiting-label {
  margin-top: 5px;
  color: var(--faint);
  font-size: 0.52rem;
  text-align: center;
}

.mini-gauge {
  width: 74%;
  height: 14px;
  margin: 25px auto 8px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(90deg, #d4eeea 0 33%, #f8e7c4 33% 66%, #f2c9cd 66%);
}

.mini-gauge::after {
  content: "";
  display: block;
  width: 2px;
  height: 20px;
  margin-left: 4px;
  background: #597484;
}

.filter-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.filter-chip {
  padding: 5px 7px;
  border: 1px solid #dbe6ea;
  border-radius: 7px;
  color: #426174;
  background: #f5f8fa;
  white-space: nowrap;
}

.dashboard-filter-launcher {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 7px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  background: linear-gradient(110deg, #fbfefe, #f2f8f8);
}

.filter-widget {
  container-type: inline-size;
}

.dashboard-filter-funnel,
.dashboard-filter-open,
.dashboard-filter-more-chip {
  border: 1px solid #abd0cd;
  color: #08736d;
  background: white;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.dashboard-filter-funnel {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 0;
}

.dashboard-filter-funnel::before {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid currentColor;
  content: "";
}

.dashboard-filter-funnel::after {
  width: 3px;
  height: 7px;
  margin-top: -5px;
  background: currentColor;
  content: "";
}

.dashboard-filter-funnel:hover,
.dashboard-filter-open:hover,
.dashboard-filter-more-chip:hover {
  background: #e5f7f4;
}

.dashboard-filter-chips {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.dashboard-filter-chip {
  min-width: 112px;
  max-width: 180px;
  height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d7e3e7;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
}

.dashboard-filter-chip.active {
  border-color: #a8d1cd;
  box-shadow: inset 0 2px 0 var(--teal);
}

.dashboard-filter-chip-copy {
  min-width: 0;
  height: 100%;
  padding: 4px 7px;
  overflow: hidden;
  border: 0;
  color: #38596a;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.dashboard-filter-chip-copy span,
.dashboard-filter-chip-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-filter-chip-copy span {
  color: #68818d;
  font-size: 0.51rem;
  font-weight: 750;
}

.dashboard-filter-chip-copy strong {
  margin-top: 2px;
  color: #183d4f;
  font-size: 0.59rem;
}

.dashboard-filter-chip-clear {
  align-self: stretch;
  width: 23px;
  padding: 0;
  border: 0;
  border-left: 1px solid #e1eaed;
  color: #91a2aa;
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
}

.dashboard-filter-chip-clear:hover {
  color: #a43535;
  background: #fff3f3;
}

.dashboard-filter-open {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 0.57rem;
}

.dashboard-filter-more-chip {
  min-width: 34px;
  min-height: 30px;
  border-radius: 999px;
  font-size: 0.56rem;
}

body.dashboard-filter-drawer-open {
  overflow: hidden;
}

.dashboard-metadata-filter-bar {
  min-width: 0;
  min-height: 44px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  overflow: hidden;
  border-top: 1px solid #dce8eb;
  border-bottom: 1px solid #d5e2e6;
  background: #f7fafb;
}

.dashboard-metadata-filter-pins {
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.dashboard-metadata-filter-pin {
  min-width: 112px;
  max-width: 230px;
  min-height: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  overflow: hidden;
  border: 1px solid #c9d9de;
  border-radius: 6px;
  background: white;
}

.dashboard-metadata-filter-pin.active {
  border-color: #5dc1b9;
  box-shadow: inset 0 2px 0 var(--teal);
}

.dashboard-metadata-filter-pin-copy,
.dashboard-metadata-filter-pin-clear,
.dashboard-metadata-filter-add {
  border: 0;
  color: #24495a;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.dashboard-metadata-filter-pin-copy {
  min-width: 0;
  padding: 4px 7px;
  display: grid;
  gap: 1px;
  text-align: left;
}

.dashboard-metadata-filter-pin-copy span,
.dashboard-metadata-filter-pin-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-metadata-filter-pin-copy span {
  color: #6f858f;
  font-size: 0.52rem;
  font-weight: 800;
}

.dashboard-metadata-filter-pin-copy strong {
  color: #16394b;
  font-size: 0.64rem;
}

.dashboard-metadata-filter-pin-clear {
  color: #899ba3;
  font-size: 0.78rem;
}

.dashboard-metadata-filter-pin-clear:hover {
  color: #a43535;
  background: #fff2f2;
}

.dashboard-metadata-filter-add {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid #bdcfd5;
  border-radius: 6px;
  color: #14384b;
  background: white;
  font-size: 1.1rem;
  font-weight: 500;
}

.dashboard-metadata-filter-add:hover {
  color: white;
  border-color: var(--teal);
  background: var(--teal);
}

.dashboard-metadata-filter-add.loading {
  opacity: 0.65;
  cursor: wait;
}

.dashboard-filter-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  justify-content: flex-end;
  background: rgba(8, 28, 39, 0.46);
  backdrop-filter: blur(1px);
}

.dashboard-filter-drawer {
  width: min(510px, 100vw);
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #fff;
  box-shadow: -18px 0 48px rgba(4, 25, 37, 0.25);
  transform: translateX(24px);
  opacity: 0.94;
  transition: transform 150ms ease, opacity 150ms ease;
}

.dashboard-filter-drawer.open {
  transform: translateX(0);
  opacity: 1;
}

.metadata-filter-drawer {
  width: min(920px, 100vw);
}

.metadata-filter-drawer-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
  overflow: hidden;
}

.metadata-filter-browser,
.metadata-filter-configuration {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

.metadata-filter-browser {
  padding: 14px;
  border-right: 1px solid var(--line);
  background: #f6f9fa;
}

.metadata-filter-browser > input[type="search"] {
  width: 100%;
  height: 40px;
  padding: 8px 11px;
  border: 1px solid #cbdbe0;
  border-radius: 8px;
  color: #173b4d;
  background: white;
  font: inherit;
}

.metadata-filter-groups {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.metadata-filter-group {
  overflow: hidden;
  border: 1px solid #d8e4e7;
  border-radius: 8px;
  background: white;
}

.metadata-filter-group > summary {
  min-height: 40px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: #173c4e;
  cursor: pointer;
}

.metadata-filter-group > summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
}

.metadata-filter-group > summary small {
  color: #78909a;
  font-size: 0.58rem;
}

.metadata-filter-database-icon {
  color: var(--teal);
}

.metadata-filter-group-items {
  max-height: 310px;
  overflow: auto;
  border-top: 1px solid #e2eaec;
}

.metadata-filter-field-option {
  min-height: 34px;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #edf2f3;
  color: #284d5f;
  font-size: 0.65rem;
  cursor: pointer;
}

.metadata-filter-field-option:hover {
  background: #f0faf9;
}

.metadata-filter-field-option input {
  accent-color: var(--teal);
}

.metadata-filter-field-option small {
  color: #82959d;
  font-size: 0.54rem;
  text-transform: uppercase;
}

.metadata-filter-configuration {
  padding: 18px;
}

.metadata-filter-configuration > h3 {
  margin: 0 0 4px;
  color: #183d4f;
  font-size: 0.86rem;
}

.metadata-filter-configuration-copy {
  margin: 0 0 14px;
  color: #728993;
  font-size: 0.63rem;
}

.metadata-filter-empty {
  padding: 22px 14px;
  border: 1px dashed #c9dadd;
  border-radius: 8px;
  color: #718891;
  background: #fbfdfd;
  font-size: 0.67rem;
  text-align: center;
}

.metadata-filter-config-card {
  margin-bottom: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(165px, 0.75fr) minmax(220px, 1.25fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #d7e4e7;
  border-radius: 9px;
  background: #fbfdfd;
}

.metadata-filter-config-heading {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.metadata-filter-config-heading strong,
.metadata-filter-config-heading small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-filter-config-heading strong {
  color: #1c4355;
  font-size: 0.68rem;
}

.metadata-filter-config-heading small {
  margin-top: 2px;
  color: #7b9099;
  font-size: 0.55rem;
}

.metadata-filter-config-remove {
  padding: 4px 6px;
  border: 0;
  color: #a23d3d;
  background: transparent;
  font: inherit;
  font-size: 0.56rem;
  font-weight: 750;
  cursor: pointer;
}

.metadata-filter-config-card > select,
.metadata-filter-config-values input {
  width: 100%;
  height: 36px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #cbdade;
  border-radius: 7px;
  color: #173b4d;
  background: white;
  font: inherit;
  font-size: 0.65rem;
}

.metadata-filter-config-values {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.metadata-filter-config-values > input:only-child,
.metadata-filter-no-value {
  grid-column: 1 / -1;
}

.metadata-filter-no-value {
  color: #718791;
  font-size: 0.62rem;
}

@media (max-width: 780px) {
  .metadata-filter-drawer-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 42%) minmax(0, 1fr);
  }

  .metadata-filter-browser {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .metadata-filter-config-card {
    grid-template-columns: 1fr;
  }
}

.dashboard-filter-drawer-header {
  min-height: 82px;
  padding: 15px 18px 13px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(110deg, #fff, #f3fbfa);
}

.dashboard-filter-drawer-header h2 {
  margin: 0 0 3px;
  color: #173b4d;
  font-size: 1rem;
}

.dashboard-filter-drawer-header p {
  margin: 0;
  color: #6d8490;
  font-size: 0.63rem;
}

.dashboard-filter-drawer-close {
  width: 32px;
  height: 32px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid #d0dfe3;
  border-radius: 8px;
  color: #486573;
  background: white;
  font-size: 1rem;
  cursor: pointer;
}

.dashboard-filter-drawer-content {
  min-height: 0;
  padding: 3px 18px 18px;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.dashboard-filter-drawer .dashboard-filter-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.dashboard-filter-drawer .dashboard-filter-control {
  padding: 13px 0;
  gap: 7px;
  border-bottom: 1px solid #e5edef;
  color: #23495b;
  font-size: 0.72rem;
}

.dashboard-filter-drawer .dashboard-filter-control > span:first-child {
  font-weight: 850;
}

.dashboard-filter-drawer .dashboard-filter-control input,
.dashboard-filter-drawer .dashboard-filter-control select {
  height: 42px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid #9fb1b8;
  border-radius: 6px 6px 0 0;
  background: #f5f7f8;
  font-size: 0.72rem;
}

.dashboard-filter-drawer .dashboard-filter-control .dynamic-filter-picker input[type="search"] {
  height: 40px;
  padding-inline: 10px;
  font-size: 0.7rem;
}

.dashboard-filter-drawer .dashboard-filter-control .dynamic-filter-select.multiple {
  height: 116px;
}

.dashboard-filter-drawer .dashboard-filter-range {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
}

.dashboard-filter-drawer .dashboard-filter-hint {
  margin: 14px 0 0;
  font-size: 0.64rem;
}

.dashboard-filter-drawer-footer {
  min-height: 62px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -8px 22px rgba(16, 51, 68, 0.08);
}

.dashboard-filter-drawer-footer button {
  min-height: 40px;
}

@container (max-width: 420px) {
  .dashboard-filter-launcher {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .dashboard-filter-open {
    display: none;
  }

  .dashboard-filter-chip {
    min-width: 104px;
  }
}

@container (max-width: 260px) {
  .dashboard-filter-chip:not(:first-child),
  .dashboard-filter-more-chip {
    display: none;
  }
}

.dashboard-filter-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  align-content: start;
  gap: 7px;
  width: 100%;
  min-height: 100%;
  padding: 8px;
}

.dashboard-filter-toolbar {
  position: sticky;
  top: -8px;
  z-index: 3;
  grid-column: 1 / -1;
  min-height: 38px;
  margin: -8px -8px 1px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #dce7ea;
  background: rgba(248, 252, 252, 0.97);
  box-shadow: 0 4px 10px rgba(13, 57, 78, 0.05);
  backdrop-filter: blur(8px);
}

.dashboard-filter-toolbar strong,
.dashboard-filter-toolbar span {
  display: block;
}

.dashboard-filter-toolbar strong {
  color: #244b5c;
  font-size: 0.62rem;
}

.dashboard-filter-toolbar span {
  margin-top: 1px;
  color: #728993;
  font-size: 0.54rem;
  font-weight: 600;
}

.dashboard-filter-expand {
  min-height: 27px;
  padding: 4px 8px;
  flex: 0 0 auto;
  border: 1px solid #9acbc7;
  border-radius: 7px;
  color: #08746d;
  background: white;
  font: inherit;
  font-size: 0.57rem;
  font-weight: 850;
  cursor: pointer;
}

.dashboard-filter-expand:hover {
  background: #e9f8f6;
}

.dashboard-filter-control {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #36566a;
  font-size: 0.68rem;
  font-weight: 800;
}

.dashboard-filter-control input,
.dashboard-filter-control select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 4px 7px;
  border: 1px solid #ccdbe1;
  border-radius: 6px;
  color: #14364b;
  background: #fff;
  font: inherit;
  font-weight: 600;
}

.dashboard-filter-control input:focus,
.dashboard-filter-control select:focus {
  border-color: var(--teal);
  outline: 2px solid color-mix(in srgb, var(--teal) 18%, transparent);
}

.dashboard-filter-control select:disabled {
  color: #65808f;
  background: #f2f6f7;
  cursor: wait;
}

.dynamic-filter-picker {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.dashboard-filter-control .dynamic-filter-picker input[type="search"] {
  height: 26px;
  padding-inline: 7px;
  font-size: 0.62rem;
}

.dashboard-filter-control .dynamic-filter-select.multiple {
  height: 70px;
  padding: 3px;
}

.dynamic-filter-select.multiple option {
  padding: 3px 5px;
  border-radius: 4px;
}

.dynamic-filter-more {
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid #c9dce2;
  border-radius: 6px;
  color: #17677b;
  background: #f0fbfc;
  font: inherit;
  font-size: 0.6rem;
  font-weight: 800;
  cursor: pointer;
}

.dynamic-filter-more:disabled {
  cursor: wait;
  opacity: 0.65;
}

.dashboard-filter-status {
  min-height: 12px;
  color: var(--faint);
  font-size: 0.58rem;
  font-weight: 650;
  line-height: 1.2;
}

.dashboard-filter-status.loading {
  color: #39738a;
}

.dashboard-filter-status.error {
  color: var(--danger);
}

.dashboard-filter-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.dashboard-filter-range i {
  color: #75909f;
  font-style: normal;
  font-weight: 600;
}

.dashboard-filter-negate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5d7482;
  font-size: 0.58rem;
  font-weight: 650;
}

.dashboard-filter-control .dashboard-filter-negate input[type="checkbox"] {
  width: 14px;
  min-width: 14px;
  height: 14px;
  padding: 0;
  accent-color: var(--teal);
}

.dashboard-filter-hint {
  grid-column: 1 / -1;
  margin: 1px 0 0;
  color: var(--faint);
  font-size: 0.62rem;
  font-weight: 600;
}

.card-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.card-preview div {
  min-height: 34px;
  padding: 6px;
  border-radius: 6px;
  background: var(--teal-soft);
}

.map-preview {
  height: 100%;
  min-height: 70px;
  border-radius: 7px;
  background:
    radial-gradient(circle at 35% 38%, var(--teal) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 57%, var(--blue) 0 3px, transparent 4px),
    linear-gradient(35deg, transparent 42%, #d8e5ea 43% 45%, transparent 46%),
    linear-gradient(-30deg, transparent 52%, #d8e5ea 53% 55%, transparent 56%),
    #edf4f6;
}

.missing-widget {
  border-style: dashed;
  border-color: #d8aab0;
  background: #fff8f8;
}

.metadata-detail {
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: white;
}

.metadata-body {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.metadata-layout {
  height: calc(100vh - 220px);
  min-height: 540px;
  grid-template-columns: minmax(350px, 34%) minmax(0, 1fr);
}

.metadata-layout .catalog-pane {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.metadata-authoring-bar {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
}

.metadata-authoring-bar button {
  grid-row: 1 / span 2;
}

.metadata-catalog-item {
  min-height: 82px;
  padding: 10px 11px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  border: 1px solid transparent;
  border-bottom-color: #e5edef;
}

.metadata-catalog-item:hover,
.metadata-catalog-item.active {
  border-color: #d8e6e9;
}

.metadata-list-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.metadata-list-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #316270;
  background: #e5eff2;
  font-size: 0.68rem;
  font-weight: 900;
}

.metadata-catalog-item.active .metadata-list-icon {
  color: white;
  background: var(--teal);
}

.metadata-list-copy {
  min-width: 0;
}

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

.metadata-list-copy strong {
  overflow: hidden;
  color: #173b4d;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-list-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: #68818d;
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-list-facts {
  margin-top: 7px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.metadata-list-facts span {
  padding-right: 6px;
  border-right: 1px solid #d9e5e8;
  color: #78909b;
  font-size: 0.56rem;
  font-weight: 700;
}

.metadata-list-facts span:last-child {
  padding-right: 0;
  border-right: 0;
}

.metadata-catalog-item .catalog-item-meta {
  max-width: 110px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.metadata-list-origin {
  padding: 4px 6px;
  border-radius: 999px;
  color: #59727e;
  background: #e9f0f2;
  font-size: 0.55rem;
  font-weight: 850;
}

.metadata-list-origin.local {
  color: #08746d;
  background: #e0f5f2;
}

.metadata-load-more {
  width: calc(100% - 12px);
  margin: 8px 6px 12px;
  padding: 10px;
  border: 1px solid #b9d3d8;
  border-radius: 9px;
  color: #176776;
  background: white;
  font-size: 0.66rem;
  font-weight: 850;
}

.metadata-list-empty {
  min-height: 180px;
  padding: 24px;
  display: grid;
  place-content: center;
  gap: 5px;
  color: var(--muted);
  text-align: center;
}

.metadata-list-empty strong {
  color: #294e60;
  font-size: 0.76rem;
}

.metadata-list-empty span {
  font-size: 0.65rem;
}

.metadata-management-header {
  min-height: 90px;
  padding: 15px 18px;
  background: linear-gradient(100deg, rgba(255,255,255,.98), #f2fbfa);
}

.metadata-preview-identity {
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: center;
}

.metadata-preview-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #2b6170;
  background: #e4eff2;
  font-size: 0.82rem;
  font-weight: 900;
}

.metadata-preview-icon.local {
  color: white;
  background: linear-gradient(145deg, #10b7ac, #077987);
  box-shadow: 0 7px 18px rgba(7, 122, 133, 0.2);
}

.metadata-preview-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #158078;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.metadata-management-body {
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.metadata-detail-tabs {
  padding: 0 18px;
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  background: white;
}

.metadata-detail-tab {
  min-height: 44px;
  padding: 0 11px;
  display: flex;
  gap: 7px;
  align-items: center;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #68808b;
  background: transparent;
  font-size: 0.65rem;
}

.metadata-detail-tab > span {
  color: #4a7d88;
  font-size: 0.65rem;
}

.metadata-detail-tab.active {
  color: #075e64;
  border-bottom-color: var(--teal);
}

.metadata-detail-panes {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #f7fafb;
}

.metadata-detail-pane {
  height: 100%;
  padding: 17px 18px 24px;
  display: none;
  overflow: auto;
}

.metadata-detail-pane.active {
  display: block;
}

.metadata-pane-heading {
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.metadata-pane-heading > div {
  color: #173e50;
  font-size: 0.82rem;
  font-weight: 900;
}

.metadata-pane-heading > span {
  color: var(--muted);
  font-size: 0.61rem;
}

.metadata-overview-grid {
  margin: 12px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.metadata-overview-card {
  min-height: 112px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
}

.metadata-overview-card h3 {
  margin: 4px 0 6px;
  color: #21495a;
  font-size: 0.73rem;
}

.metadata-overview-card p {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #647d89;
  font-size: 0.64rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.metadata-card-label {
  color: #6f8994;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.metadata-feature-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.metadata-feature-list span {
  padding: 5px 7px;
  border-radius: 999px;
  color: #436471;
  background: #edf3f5;
  font-size: 0.58rem;
  font-weight: 800;
}

.metadata-feature-list .metadata-tag-functional {
  color: #08736d;
  background: #e3f6f3;
}

.metadata-field-table-wrap {
  max-height: calc(100% - 42px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
}

.metadata-field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.65rem;
}

.metadata-field-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
  color: #536f7c;
  background: #eef4f6;
  text-align: left;
  font-size: 0.57rem;
  letter-spacing: 0.03em;
}

.metadata-field-table td {
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  color: #405f6d;
  vertical-align: middle;
}

.metadata-field-table td code,
.metadata-field-table td small {
  display: block;
}

.metadata-field-table td code {
  color: #0a6267;
  font-size: 0.63rem;
  font-weight: 850;
}

.metadata-field-table td small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.55rem;
}

.metadata-field-state {
  margin-right: 4px;
  padding: 4px 6px;
  display: inline-block;
  border-radius: 999px;
  color: #6b7f88;
  background: #edf1f3;
  font-size: 0.54rem;
  font-weight: 800;
}

.metadata-field-state.active {
  color: #087269;
  background: #e1f5f1;
}

.metadata-field-state.sensitive {
  color: #9a650f;
  background: #fff2d7;
}

.metadata-pane-empty {
  min-height: 230px;
  display: grid;
  place-content: center;
  color: var(--muted);
  font-size: 0.7rem;
}

.metadata-filter-summary,
.metadata-sql-notice {
  margin-bottom: 12px;
  padding: 12px 13px;
  display: flex;
  gap: 6px 14px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #cfe2e6;
  border-radius: 10px;
  color: #4d6d79;
  background: #f1f8f9;
  font-size: 0.63rem;
}

.metadata-filter-summary strong,
.metadata-sql-notice strong {
  color: #1b4d5d;
}

.metadata-detail-pane[data-pane="sql"] .sql-panel {
  min-height: 320px;
}

.metadata-detail-pane[data-pane="sql"] .sql-panel pre {
  max-height: calc(100vh - 430px);
}

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

.detail-stat {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbfc;
}

.detail-stat span,
.detail-stat strong {
  display: block;
}

.metadata-rules-panel {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
  overflow: hidden;
}

.metadata-rules-heading {
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: #f7fafb;
  font-size: 0.69rem;
  font-weight: 800;
}

.metadata-rule-grid {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.metadata-rule-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.metadata-rule-card span,
.metadata-rule-card strong,
.metadata-rule-card small {
  display: block;
}

.metadata-rule-card span,
.metadata-rule-card small {
  color: var(--muted);
  font-size: 0.63rem;
}

.metadata-rule-card strong {
  margin: 3px 0;
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-rules-panel.empty-rules {
  padding: 11px 13px;
  color: var(--muted);
  font-size: 0.69rem;
}

.detail-stat span {
  color: var(--muted);
  font-size: 0.64rem;
}

.detail-stat strong {
  margin-top: 4px;
  overflow: hidden;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sql-panel {
  overflow: hidden;
  border: 1px solid #20394a;
  border-radius: 11px;
  background: #0c2030;
}

.execution-panel {
  min-height: 62px;
  padding: 12px 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f7fafb;
}

.execution-panel.ready {
  border-color: #a8ddd7;
  background: var(--teal-soft);
}

.execution-panel.pending,
.execution-panel.unavailable {
  border-style: dashed;
}

.execution-copy {
  min-width: 0;
  flex: 1;
}

.execution-copy > strong,
.execution-copy > span {
  display: block;
}

.metadata-parameter-editor {
  margin-top: 10px;
}

.metadata-parameter-editor.hidden,
.dashboard-parameter-panel.hidden {
  display: none;
}

.metadata-parameter-heading {
  margin-bottom: 8px;
  display: flex;
  gap: 6px 12px;
  align-items: baseline;
  justify-content: space-between;
}

.metadata-parameter-heading strong {
  font-size: 0.74rem;
}

.metadata-parameter-heading span {
  color: var(--muted);
  font-size: 0.66rem;
}

.metadata-parameter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 8px;
}

.metadata-parameter-field {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.local-metadata-virtual-row {
  display: grid;
  gap: 8px;
}

.local-metadata-virtual-head {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(150px, 0.8fr) minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.local-metadata-virtual-head [hidden] {
  display: none;
}

.metadata-virtual-metadata-name {
  display: block;
  color: var(--muted, #5b7383);
  font-size: 0.68rem;
}

.metadata-virtual-card {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.metadata-virtual-card pre {
  margin: 4px 0 0;
  max-height: 180px;
  overflow: auto;
  font-size: 0.72rem;
}

.parameter-lookup {
  display: grid;
  gap: 2px;
}

.parameter-lookup-detail {
  color: var(--muted, #5b7383);
  font-size: 0.68rem;
  min-height: 0.9em;
}

.parameter-required {
  color: #b23b3b;
}

.metadata-parameter-extras {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.metadata-parameter-extras[hidden] {
  display: none;
}

.metadata-parameter-field > span {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-parameter-field input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: white;
  font-size: 0.75rem;
}

.metadata-parameter-field small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.execution-copy > strong {
  font-size: 0.78rem;
}

.execution-copy > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
}

.execution-connection-select,
.execution-source-select {
  width: min(520px, 100%);
  height: 40px;
  margin-top: 8px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  background: white;
  font-size: 0.82rem;
}

.execution-source-select {
  width: min(300px, 100%);
}

.execution-connection-note {
  min-height: 1.25rem;
  font-size: 0.78rem !important;
  line-height: 1.35;
}

.execute-button {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: var(--teal);
  font-size: 0.72rem;
  font-weight: 750;
}

.execute-button:disabled {
  cursor: not-allowed;
  color: var(--muted);
  background: #dce5e8;
}

.execution-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 7px;
}

.execution-error {
  color: var(--danger);
}

.execution-panel:has(.metadata-inline-result) {
  flex-wrap: wrap;
}

.metadata-inline-result {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid #b9e5df;
}

.metadata-inline-result > strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
}

.metadata-inline-result .query-result-wrap {
  max-height: 360px;
  background: white;
}

.query-result-wrap {
  max-height: 65vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.query-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.query-result-table th,
.query-result-table td {
  max-width: 320px;
  padding: 8px 10px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.query-result-table th {
  position: sticky;
  top: 0;
  color: white;
  background: var(--nav);
}

.connection-filter-row {
  grid-template-columns: 1fr;
}

.connection-profile-actions {
  padding: 0 12px 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.connection-profile-actions button {
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: white;
  font-size: 0.72rem;
  font-weight: 750;
}

.connection-profile-actions button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.connection-profile-actions span {
  min-height: 1.1rem;
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.connection-profile-actions span.error {
  color: var(--danger);
}

.connection-profile-dialog {
  display: grid;
  gap: 14px;
}

.connection-profile-dialog .connection-actions {
  justify-content: flex-start;
}

.connection-detail {
  min-height: 100%;
  background: white;
}

.connection-body {
  height: calc(100% - 82px);
  padding: 18px;
  overflow: auto;
}

.vault-notice {
  margin-bottom: 16px;
  padding: 13px 15px;
  display: flex;
  gap: 8px;
  flex-direction: column;
  border: 1px solid #a8ddd7;
  border-radius: 11px;
  background: var(--teal-soft);
}

.vault-notice strong {
  font-size: 0.9rem;
}

.vault-notice span {
  color: #386f6b;
  font-size: 0.875rem;
}

.connection-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.connection-field {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 650;
}

.connection-field input,
.connection-field select {
  width: 100%;
  height: 43px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  background: white;
  font-size: 0.875rem;
  font-weight: 500;
}

.connection-feedback {
  min-height: 38px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.875rem;
}

.connection-feedback.success {
  color: #08766f;
}

.connection-feedback.error {
  color: var(--danger);
}

.connection-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.connection-actions button {
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 750;
}

.save-connection {
  border-color: var(--nav) !important;
  color: white;
  background: var(--nav);
}

.test-connection {
  color: var(--ink);
  background: white;
}

.connection-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.connection-technical {
  margin-top: 18px;
  padding-top: 14px;
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
}

.sql-heading {
  padding: 10px 13px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #d7e6ec;
  font-size: 0.7rem;
}

.sql-panel pre {
  max-height: 470px;
  margin: 0;
  padding: 16px;
  overflow: auto;
  color: #a9e4dc;
  font: 0.72rem/1.55 "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  tab-size: 2;
  white-space: pre-wrap;
}

.offline-inventory-panel {
  margin-bottom: 14px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: center;
  gap: 14px 18px;
  border: 1px solid #c9dfef;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f4faff, #ffffff);
}

.offline-inventory-panel h2 { margin-bottom: 3px; }
.offline-inventory-panel p:last-child { margin: 0; color: var(--muted); font-size: 0.73rem; }
.offline-inventory-panel p.error { color: var(--danger); }
.offline-inventory-panel > button {
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--blue);
  background: white;
  font-size: 0.72rem;
  font-weight: 750;
}
.offline-inventory-panel > button:disabled { opacity: 0.55; cursor: not-allowed; }
.offline-inventory-summary { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.offline-inventory-stat {
  min-width: 68px;
  padding: 7px 9px;
  display: grid;
  border-radius: 9px;
  background: #eaf4fb;
  text-align: center;
}
.offline-inventory-stat strong { font-size: 0.9rem; }
.offline-inventory-stat small { color: var(--muted); font-size: 0.6rem; }
.offline-inventory-issues {
  grid-column: 1 / -1;
  max-height: 220px;
  overflow: auto;
  border-top: 1px solid var(--line);
}
.offline-inventory-issue {
  padding: 8px 2px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.7rem;
}
.offline-inventory-issue strong,
.offline-inventory-issue small { display: block; }
.offline-inventory-issue small,
.offline-inventory-issue > span { color: var(--muted); }

.conditional-format-applied { transition: color 120ms ease, background-color 120ms ease; }
.conditional-format-icon {
  display: inline-flex;
  min-width: 1em;
  justify-content: center;
  font-size: 0.9em;
  line-height: 1;
}

.task-toolbar {
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-runtime-panel {
  margin-bottom: 14px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  border: 1px solid #bfe6e2;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f5fffd, #ffffff);
}

.task-runtime-panel.unavailable { border-color: var(--line); background: white; }
.task-runtime-panel h2 { margin-bottom: 3px; }
.task-runtime-panel p:last-child { margin: 0; color: var(--muted); font-size: 0.73rem; }
.task-runtime-panel > button {
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--teal);
  background: white;
  font-size: 0.72rem;
  font-weight: 750;
}
.task-runtime-panel > button:disabled { opacity: 0.55; cursor: wait; }

.task-runtime-summary { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.task-runtime-stat {
  min-width: 74px;
  padding: 8px 10px;
  display: grid;
  border-radius: 9px;
  background: #edf7f7;
  text-align: center;
}
.task-runtime-stat strong { font-size: 0.95rem; }
.task-runtime-stat small { color: var(--muted); font-size: 0.62rem; }
.task-runtime-stat.overdue { background: #fdecee; color: var(--danger); }
.task-runtime-stat.due { background: var(--amber-soft); color: #94620e; }
.task-runtime-stat.upcoming { background: var(--teal-soft); color: #08776f; }
.task-runtime-stat.unscheduled { background: #eef3f6; color: var(--muted); }
.task-runtime-stat.failed { background: #fdecee; color: var(--danger); }
.task-runtime-stat.matched { background: #fff2d9; color: #9a6200; }

.status-badge.runtime-overdue { background: #fdecee; color: var(--danger); }
.status-badge.runtime-due { background: var(--amber-soft); color: #94620e; }
.status-badge.runtime-upcoming { background: var(--teal-soft); color: #08776f; }
.status-badge.runtime-unscheduled,
.status-badge.runtime-inactive { background: #eef3f6; color: var(--muted); }
.status-badge.preview-matched { background: #fdecee; color: var(--danger); }
.task-runtime-failed { color: var(--danger) !important; }

.segmented-control {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
}

.segmented-control button {
  padding: 8px 13px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 0.76rem;
  font-weight: 700;
}

.segmented-control button.active {
  color: white;
  background: var(--nav);
}

.result-count {
  color: var(--muted);
  font-size: 0.75rem;
}

.task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.notification-panel {
  margin-top: 18px;
  overflow: hidden;
}

.notification-panel .panel-heading p:last-child {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.notification-table-wrap {
  overflow: auto;
  border-top: 1px solid var(--line);
}

.notification-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.73rem;
}

.notification-table th,
.notification-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.notification-table th {
  color: var(--muted);
  background: #f8fafb;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.notification-table tbody tr:last-child td { border-bottom: 0; }
.notification-description strong,
.notification-description small,
.notification-presentations strong,
.notification-presentations small { display: block; }
.notification-description small,
.notification-presentations small { margin-top: 3px; color: var(--faint); font-size: 0.64rem; }
.notification-empty { padding: 24px !important; color: var(--muted); text-align: center !important; }

.task-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 5px 18px rgba(18, 48, 70, 0.04);
}

.task-card-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.task-badges {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.status-badge.mapped {
  color: #27669a;
  background: #e8f2fb;
}

.status-badge.review {
  color: #966211;
  background: var(--amber-soft);
}

.task-readiness {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #bddfdc;
  border-radius: 10px;
  color: #166a66;
  background: #effaf8;
}

.task-readiness.review {
  border-color: #ead49d;
  color: #81560f;
  background: #fff8e9;
}

.task-readiness strong,
.task-readiness span {
  display: block;
}

.task-readiness span {
  margin-top: 4px;
  font-size: 0.73rem;
}

.task-card h2 {
  margin-bottom: 4px;
  font-size: 0.88rem;
}

.task-card-id {
  color: var(--faint);
  font-size: 0.66rem;
}

.status-badge.inactive {
  color: #6e7f8b;
  background: #edf2f4;
}

.task-flow {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.task-step {
  min-height: 62px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafb;
}

.task-step span,
.task-step strong {
  display: block;
}

.task-step span {
  color: var(--muted);
  font-size: 0.62rem;
}

.task-step strong {
  margin-top: 5px;
  font-size: 0.72rem;
}

.task-arrow {
  color: var(--teal);
  font-weight: 900;
}

.task-schedule {
  margin-top: 12px;
  padding: 9px 10px;
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  background: var(--blue-soft);
}

.task-schedule.missing {
  border-left-color: var(--line-strong);
  background: #f4f7f8;
}

.task-schedule span,
.task-schedule strong,
.task-schedule small {
  display: block;
}

.task-schedule span,
.task-schedule small {
  color: var(--muted);
  font-size: 0.62rem;
}

.task-schedule strong {
  margin-top: 3px;
  font-size: 0.7rem;
}

.task-schedule small {
  margin-top: 3px;
}

.task-dialog-schedule {
  margin-top: 8px !important;
  color: var(--blue) !important;
  font-weight: 750;
}

.task-action-safe {
  color: #08766f !important;
  font-weight: 700;
}

.task-action-review {
  color: var(--danger) !important;
  font-weight: 700;
}

.task-card button {
  margin-top: 14px;
  padding: 0;
  border: 0;
  color: var(--teal);
  background: transparent;
  font-size: 0.72rem;
  font-weight: 800;
}

.permission-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.permission-panel + .permission-panel {
  margin-top: 16px;
}

.permission-table-wrap {
  overflow-x: auto;
}

.permission-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}

.permission-table th,
.permission-table td {
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

.permission-table th {
  color: var(--muted);
  background: #f7fafb;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.permission-table th:first-child,
.permission-table td:first-child {
  text-align: left;
}

.permission-table td strong,
.permission-table td small {
  display: block;
}

.permission-table td small {
  margin-top: 2px;
  color: var(--faint);
  font-size: 0.63rem;
}

.permission-exception {
  color: var(--danger) !important;
  font-weight: 800;
}

.permission-group-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.permission-group-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbfc;
}

.permission-group-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.permission-group-copy {
  min-width: 0;
}

.permission-group-heading strong,
.permission-group-heading small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-group-heading strong {
  font-size: 0.78rem;
}

.permission-group-heading small {
  margin-top: 2px;
  color: var(--faint);
  font-size: 0.62rem;
}

.permission-group-details {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: var(--muted);
  font-size: 0.66rem;
}

.permission-coverage-button {
  margin-top: 11px;
  padding: 0;
  border: 0;
  color: var(--teal);
  background: transparent;
  font-size: 0.67rem;
  font-weight: 800;
}

.permission-simulator-warning {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #ead49d;
  border-radius: 10px;
  color: #81560f;
  background: #fff8e9;
}

.permission-simulator-warning strong,
.permission-simulator-warning span {
  display: block;
}

.permission-simulator-warning span {
  margin-top: 4px;
  font-size: 0.7rem;
  line-height: 1.45;
}

.permission-coverage-summary {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.permission-coverage-sections {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.permission-coverage-section {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbfc;
}

.permission-coverage-section h3 {
  margin: 0 0 8px;
  font-size: 0.78rem;
}

.permission-coverage-section ul {
  margin: 0;
  padding-left: 18px;
  columns: 2;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.5;
}

.permission-coverage-section li {
  break-inside: avoid;
}

.permission-coverage-section p,
.permission-coverage-section small {
  color: var(--muted);
  font-size: 0.67rem;
}

.permission-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  text-align: center;
}

.validation-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.validation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 18px;
}

.validation-panel {
  min-height: 360px;
}

.validation-coverage {
  display: grid;
  gap: 15px;
}

.validation-coverage-row {
  display: grid;
  gap: 7px;
}

.validation-coverage-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.72rem;
}

.validation-coverage-heading strong {
  color: var(--ink);
  font-size: 0.7rem;
}

.validation-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf3f5;
}

.validation-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--teal-bright));
}

.validation-progress i.review {
  background: linear-gradient(90deg, #d99b2b, #f0bd55);
}

.validation-progress i.warning {
  background: linear-gradient(90deg, var(--danger), #dc7d86);
}

.validation-connections {
  display: grid;
  gap: 9px;
}

.validation-connection {
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbfc;
}

.validation-connection.ready {
  border-color: #b9e5df;
  background: #f1fbf9;
}

.validation-connection.failed {
  border-color: #f0c3c8;
  background: #fff7f8;
}

.validation-connection strong,
.validation-connection span {
  display: block;
}

.validation-connection strong {
  font-size: 0.76rem;
}

.validation-connection div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.65rem;
}

.validation-issues-panel {
  margin-top: 18px;
}

.validation-export-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.validation-export-actions button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--teal);
  background: white;
  font-size: 0.68rem;
  font-weight: 800;
}

.validation-issues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.validation-review-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.55;
}

.validation-issue-marker.link-review {
  color: var(--teal);
  background: var(--teal-soft);
}

.validation-issue-marker.conditional-review {
  color: #93620d;
  background: #fff4d8;
}

.validation-review-more {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 11px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  background: #f9fbfc;
  font-size: 0.68rem;
  line-height: 1.5;
  text-align: center;
}

.validation-issue {
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbfc;
}

.validation-issue-marker {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #9a650f;
  background: var(--amber-soft);
  font-weight: 900;
}

.validation-issue-copy strong,
.validation-issue-copy span {
  display: block;
}

.validation-issue-copy strong {
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.validation-issue-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.4;
}

.validation-open-button {
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--teal);
  background: white;
  font-size: 0.64rem;
  font-weight: 800;
}

.validation-open-button:disabled {
  color: var(--muted);
  background: #f3f6f8;
  cursor: not-allowed;
  opacity: 0.75;
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 28px;
  display: grid;
  place-items: center;
  background: rgba(5, 19, 31, 0.58);
  backdrop-filter: blur(5px);
}

.dialog-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(780px, calc(100vh - 56px));
  overflow: auto;
  border-radius: 16px;
  background: white;
  box-shadow: 0 30px 90px rgba(3, 18, 29, 0.35);
}

.dialog-panel:has(.component-editor) {
  width: min(1460px, calc(100vw - 28px));
  height: min(940px, calc(100vh - 28px));
  max-height: calc(100vh - 28px);
  overflow: hidden;
  border: 1px solid rgba(127, 158, 173, 0.45);
  border-radius: 18px;
}

.dialog-panel:has(.component-editor) #dialog-content {
  height: 100%;
  min-height: 0;
}

.dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: white;
  font-size: 1.2rem;
}

.dialog-content-inner {
  padding: 24px;
}

.dialog-content-inner h2 {
  padding-right: 44px;
  margin-bottom: 5px;
  font-size: 1.15rem;
}

.dialog-content-inner > p {
  color: var(--muted);
  font-size: 0.78rem;
}

.detail-list {
  margin-top: 18px;
  display: grid;
  gap: 9px;
}

.detail-list-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbfc;
}

.detail-list-item strong,
.detail-list-item span {
  display: block;
}

.detail-list-item strong {
  font-size: 0.78rem;
}

.detail-list-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.task-open-metadata {
  margin-top: 9px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--teal);
  background: white;
  font-size: 0.68rem;
  font-weight: 750;
}

.task-open-metadata:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.task-preview-controls {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.task-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-preview-actions select {
  min-width: 240px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}

.task-preview-button {
  padding: 8px 11px;
  border: 1px solid var(--teal);
  border-radius: 9px;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-weight: 800;
  cursor: pointer;
}

.task-preview-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.task-preview-feedback {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.4;
}

.task-preview-feedback.success { color: #08776f; }
.task-preview-feedback.neutral { color: var(--blue); }
.task-preview-feedback.warning { color: #93620d; }
.task-preview-feedback.error { color: #b62f3a; }

.task-preview-history {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.task-preview-history.matched { color: var(--danger); font-weight: 700; }
.task-preview-history.not-matched,
.task-preview-history.unconditional { color: #08776f; }
.task-preview-history.indeterminate { color: #93620d; }

.authentication-dialog { max-width: 560px; }

.authentication-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
}

.authentication-form .connection-field { grid-column: auto; }

.authentication-feedback {
  grid-column: 1 / -1;
  min-height: 20px;
  color: var(--muted);
  font-size: 0.74rem;
}

.authentication-feedback.error { color: var(--danger); }

.authentication-submit {
  grid-column: 1 / -1;
  justify-self: end;
  padding: 10px 18px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: var(--nav);
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.2;
}

.authentication-submit.secondary { margin-top: 22px; color: var(--nav); background: #eef3f6; }

@media (max-width: 1180px) {
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-layout { grid-template-columns: minmax(300px, 42%) minmax(0, 1fr); }
  .validation-issues { grid-template-columns: 1fr; }
  .component-create-form { grid-template-columns: 1fr; }
  .component-create-form > .authoring-form-actions { grid-column: 1; }
  .dashboard-settings-grid,
  .dashboard-layout-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-folder-create { grid-template-columns: 1fr 1fr; }
  .dashboard-folder-create button { grid-column: 1 / -1; justify-self: end; }
  .dashboard-metadata-settings { grid-template-columns: 1fr; }
  .dashboard-metadata-choice-list { max-height: 250px; }
  .dashboard-metadata-config-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metadata-config-row .component-column-remove { justify-self: end; }
}

.thematic-map {
  position: relative;
  display: grid;
  min-height: 240px;
  padding: 0.5rem;
  overflow: hidden;
  border-radius: 10px;
}

.thematic-map-svg {
  width: 100%;
  min-height: 220px;
  max-height: 520px;
}

.thematic-map-shape {
  stroke: #607d8b;
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
  transition: opacity 120ms ease, stroke-width 120ms ease;
}

.thematic-map-shape:hover,
.thematic-map-shape.selected {
  opacity: 0.78;
  stroke: #09293d;
  stroke-width: 1.4;
}

.thematic-map-legend {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.2rem 0.4rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #cbd9df;
  border-radius: 8px;
  background: rgb(255 255 255 / 92%);
  font-size: 0.72rem;
}

.thematic-map-legend strong {
  grid-column: 1 / -1;
}

.thematic-map-legend i {
  width: 1rem;
  height: 0.7rem;
  border: 1px solid rgb(0 0 0 / 15%);
}

.presentation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.presentation-create-button {
  margin: 0 0 8px;
  width: 100%;
}

.presentation-editor-dialog .authoring-form {
  min-width: min(860px, 92vw);
}

.presentation-editor-head {
  color: var(--muted, #5f6f78);
  font-size: 12px;
  font-weight: 600;
}

.presentation-editor-frames {
  display: grid;
  gap: 6px;
  max-height: 46vh;
  overflow: auto;
}

.presentation-editor-frame {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(200px, 2fr) minmax(120px, 1fr) 80px auto auto;
}

.presentation-editor-frame select,
.presentation-editor-frame input[type="number"] {
  min-width: 0;
}

.presentation-editor-wait {
  align-items: center;
  display: flex;
  font-size: 12px;
  gap: 4px;
  white-space: nowrap;
}

.presentation-editor-tools {
  display: flex;
  gap: 2px;
}

.visual-query-dialog .authoring-form {
  min-width: min(1100px, 94vw);
}

.visual-query-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  max-height: 68vh;
  overflow: auto;
}

.visual-query-search {
  display: flex;
  gap: 6px;
}

.visual-query-search input {
  flex: 1;
  min-width: 0;
}

.visual-query-found {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  max-height: 58vh;
  overflow: auto;
}

.visual-query-found-item {
  background: #f6fafb;
  border: 1px solid #d9e8ec;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  padding: 6px 8px;
  text-align: left;
}

.visual-query-found-item small {
  color: var(--muted, #5f6f78);
}

.visual-query-right {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.visual-query-tables {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.visual-query-table {
  border: 1px solid #d9e8ec;
  border-radius: 8px;
  padding: 8px;
}

.visual-query-table-head {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
}

.visual-query-columns {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  max-height: 180px;
  overflow: auto;
}

.visual-query-column {
  align-items: center;
  display: flex;
  font-size: 12px;
  gap: 6px;
}

.visual-query-joins,
.visual-query-conditions {
  display: grid;
  gap: 6px;
}

.visual-query-row,
.visual-query-pick,
.visual-query-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.visual-query-preview {
  max-height: 220px;
  overflow: auto;
}

.login-otp-qr {
  background: #ffffff;
  border: 1px solid #d9e8ec;
  border-radius: 8px;
  display: block;
  height: 180px;
  margin: 8px auto;
  padding: 6px;
  width: 180px;
}

.login-otp-qr.hidden {
  display: none;
}

.help-button {
  font-weight: 700;
  justify-content: center;
  min-width: 34px;
}

.help-topic {
  border-top: 1px solid #e3edf0;
  padding: 8px 0;
}

.help-topic summary {
  cursor: pointer;
  font-weight: 600;
}

.help-topic-links {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.help-admin-items {
  display: grid;
  gap: 10px;
}

.help-admin-item {
  border: 1px solid #d9e8ec;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) 180px 28px;
  padding: 8px;
}

.help-admin-item textarea,
.help-admin-item input[type="url"] {
  grid-column: 1 / -1;
}

.role-permission-groups {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.role-permission-group {
  border: 1px solid #d9e8ec;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 8px 10px;
}

.role-permission-group legend {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0 4px;
}

.package-dashboard-list {
  border: 1px solid #d9e8ec;
  border-radius: 8px;
  display: grid;
  gap: 2px;
  margin: 8px 0;
  max-height: 320px;
  overflow: auto;
  padding: 8px;
}

.user-menu-grid {
  display: grid;
  gap: 2px 12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin: 6px 0;
}

.access-inherited-row td {
  color: #4f6b78;
  font-style: italic;
}

.explorer-level-toggle {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 11px;
  margin-right: 4px;
  padding: 0 2px;
}

.explorer-pivot td.explorer-drillable {
  cursor: zoom-in;
}

.explorer-area-item.hidden-value > span {
  opacity: 0.5;
  text-decoration: line-through;
}

.explorer-detail {
  border-top: 1px solid #d9e8ec;
  margin-top: 12px;
  max-height: 46vh;
  overflow: auto;
  padding-top: 8px;
}

.explorer-detail-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 6px;
}

.thematic-map-bubble {
  fill-opacity: 0.62;
  stroke: #ffffff;
  stroke-width: 1;
}

.thematic-map-label {
  fill: #1f2a30;
  font-size: 10px;
  font-weight: 600;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 3px;
}

.component-map-upload {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.component-map-upload small {
  color: var(--muted, #5f6f78);
}

.configured-card:has(> .configured-card-icon) {
  position: relative;
}

.configured-card-icon {
  font-size: 18px;
  line-height: 1;
  position: absolute;
  right: 8px;
  top: 6px;
}

.configured-card-icon.trend-up { color: #18794e; }
.configured-card-icon.trend-down { color: #c0392b; }
.configured-card-icon.trend-flat { color: #7a8a93; }

.thematic-map-source {
  position: absolute;
  left: 0.65rem;
  bottom: 0.35rem;
  padding: 0.12rem 0.3rem;
  border-radius: 4px;
  background: rgb(255 255 255 / 82%);
  color: #385464;
  font-size: 0.64rem;
}

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 76px minmax(0, 1fr); }
  .sidebar { padding: 18px 10px; }
  .brand { padding: 0 7px 24px; }
  .brand > div:last-child { display: none; }
  .brand > div:last-child,
  .nav-item:not(.active) .nav-count,
  .nav-item { font-size: 0; }
  .brand-mark { width: 40px; height: 40px; }
  .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .nav-icon { font-size: 1.2rem; }
  .nav-count { display: none; }
  .sidebar-feedback-button { justify-content: center; padding: 8px; }
  .sidebar-feedback-text,
  .catalog-date { display: none; }
  .main-content { padding: 0 16px 24px; }
  .topbar { align-items: flex-start; padding: 18px 0; }
  .topbar-actions { flex: 1; justify-content: flex-end; }
  .search-box { width: min(300px, 46vw); }
  .mode-badge { display: none; }
  .overview-grid { grid-template-columns: 1fr; }
  .panel-wide { grid-row: auto; }
  .workspace-layout { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .catalog-pane { height: 420px; border-right: 0; border-bottom: 1px solid var(--line); }
  .preview-pane { min-height: 620px; }
  .dashboard-simulation-panel { grid-template-columns: 1fr; }
  .dashboard-simulation-controls { justify-content: stretch; }
  .dashboard-connection-select,
  .dashboard-mode-select { width: 100%; flex: 1; }
  .connection-body { height: auto; }
  .task-grid { grid-template-columns: 1fr; }
  .offline-inventory-panel { grid-template-columns: 1fr; align-items: stretch; }
  .offline-inventory-summary { justify-content: flex-start; }
  .task-runtime-panel { grid-template-columns: 1fr; align-items: stretch; }
  .task-runtime-summary { justify-content: flex-start; }
  .permission-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-group-grid { grid-template-columns: 1fr; }
  .validation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .validation-layout { grid-template-columns: 1fr; }
  .presentation-safety-note { align-items: flex-start; flex-direction: column; }
  .presentation-public-link { margin-left: 0; }
}

@media (max-width: 590px) {
  .main-content { padding: 0 10px 20px; }
  .topbar { flex-direction: column; gap: 12px; }
  .topbar-actions,
  .search-box { width: 100%; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid { gap: 12px; }
  .component-chart { grid-template-columns: 88px 1fr; }
  .donut { width: 88px; height: 88px; }
  .donut::after { width: 52px; height: 52px; }
  .migration-score { align-items: flex-start; }
  .score-ring { width: 86px; height: 86px; }
  .attention-panel { align-items: flex-start; flex-wrap: wrap; }
  .activity-row { grid-template-columns: 28px minmax(0, 1fr); }
  .activity-row time { grid-column: 2; }
  .text-button { margin-left: 48px; }
  .filter-row { grid-template-columns: 1fr; }
  .detail-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metadata-rule-grid { grid-template-columns: 1fr; }
  .permission-coverage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-coverage-section ul { columns: 1; }
  .validation-issue { grid-template-columns: 26px minmax(0, 1fr); }
  .validation-open-button { grid-column: 2; justify-self: start; }
  .presentation-frame { grid-template-columns: 34px minmax(0, 1fr); }
  .presentation-open-button { grid-column: 2; justify-self: start; }
  .public-sequence-bar { align-items: flex-start; flex-direction: column; }
  .connection-form { grid-template-columns: 1fr; }
  .connection-actions { justify-content: stretch; }
  .connection-actions button { flex: 1; }
  .execution-panel { align-items: stretch; flex-direction: column; }
  .execution-actions { width: 100%; }
  .execute-button { width: 100%; }
  .dashboard-simulation-controls { align-items: stretch; flex-direction: column; }
  .dashboard-stage-wrap { padding: 10px; }
  .dashboard-stage { min-height: 0; }
  .dialog-backdrop { padding: 10px; }
  .component-editor-form { grid-template-columns: 1fr; }
  .component-editor-workspace { grid-template-columns: 118px minmax(0, 1fr); }
  .component-editor-tabs { max-height: none; }
  .component-editor-tab { padding: 7px; font-size: 0.62rem; }
  .component-editor-tab-content { max-height: none; }
  .component-editor-preview { display: none; }
  .component-studio-header { padding: 14px 52px 14px 14px; }
  .component-studio-status { display: none; }
  .component-editor-grid { grid-template-columns: 1fr; }
  .component-column-row { grid-template-columns: 22px minmax(80px, 1fr); }
  .component-column-row > input,
  .component-column-row > select,
  .component-column-row > .component-column-order { grid-column: 2; }
  .component-column-advanced { grid-column: 1 / -1; }
  .component-column-advanced-grid { grid-template-columns: 1fr; }
  .component-type-row-header { display: none; }
  .component-type-field-row,
  .component-type-sort-row,
  .component-type-filter-row { grid-template-columns: 1fr; }
  .component-type-row-actions { justify-content: flex-end; }
  .component-column-picker,
  .authoring-metadata-row { grid-template-columns: 1fr; align-items: stretch; }
  .dashboard-settings-workbench { grid-template-columns: 1fr; }
  .dashboard-settings-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .dashboard-settings-nav button { padding: 8px; text-align: center; }
  .dashboard-settings-grid,
  .dashboard-layout-settings-grid,
  .dashboard-folder-create,
  .dashboard-folder-local-row,
  .component-type-gallery { grid-template-columns: 1fr; }
  .dashboard-background-picker,
  .dashboard-metadata-config-row { grid-template-columns: 1fr; }
  .dashboard-folder-summary-grid,
  .dashboard-folder-toolbar { grid-template-columns: 1fr; }
  .dashboard-folder-row-actions { justify-content: stretch; }
  .dashboard-folder-row-actions button { flex: 1; }
  .dashboard-folder-create button,
  .component-create-form > .authoring-form-actions { grid-column: 1; }
  .formula-editor-panel { width: 100%; height: 96vh; }
  .formula-editor-body { grid-template-columns: 1fr; grid-template-rows: 44% minmax(0, 1fr); }
  .formula-editor-catalog { border-right: 0; border-bottom: 1px solid var(--line); }
}


/* Acessos: usuários, grupos, papéis e compartilhamento */
.access-table td {
  white-space: normal;
  text-align: left;
  vertical-align: top;
}

.access-table th {
  text-align: left;
}

.access-table td small {
  display: block;
  color: var(--faint);
}

.access-everyone-row td {
  background: #f7fafb;
}

.access-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 6px 6px 0;
}

.access-chip-remove {
  padding: 0 2px;
  border: 0;
  color: inherit;
  background: transparent;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.access-role-adder select,
.access-share-form select,
.access-share-field select {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font-size: 0.74rem;
}

.access-permission-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.6;
}

.access-share-field {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
}

.access-share-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Tela de login */
body.login-open {
  overflow: hidden;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr);
  background: var(--canvas);
}

.login-screen.hidden {
  display: none;
}

.login-hero {
  position: relative;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 18% 22%, rgba(57, 208, 195, 0.22), transparent 42%),
    radial-gradient(circle at 85% 88%, rgba(49, 119, 191, 0.28), transparent 46%),
    linear-gradient(160deg, #0d2740 0%, var(--nav) 55%, #061524 100%);
}

.login-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.login-network line {
  stroke: rgba(96, 226, 211, 0.16);
  stroke-width: 1;
}

.login-network circle.node {
  fill: rgba(96, 226, 211, 0.55);
}

.login-network circle.node.hub {
  fill: #60e2d3;
  filter: drop-shadow(0 0 6px rgba(96, 226, 211, 0.8));
}

.login-network circle.pulse {
  fill: #b9fff6;
  filter: drop-shadow(0 0 5px rgba(185, 255, 246, 0.95));
}

.login-hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  height: 100%;
  padding: clamp(28px, 5vw, 64px);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-brand strong,
.login-brand span {
  display: block;
}

.login-brand strong {
  font-size: 1.08rem;
}

.login-brand span {
  margin-top: 3px;
  color: #8ea7b8;
  font-size: 0.78rem;
}

.login-pitch h1 {
  max-width: 14ch;
  margin: 0 0 16px;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.login-pitch p {
  max-width: 46ch;
  margin: 0;
  color: #b7c9d6;
  font-size: 1rem;
  line-height: 1.6;
}

.login-pillars {
  display: grid;
  gap: 14px;
  max-width: 460px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.login-pillars li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
}

.login-pillars li > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--teal-bright);
  background: rgba(57, 208, 195, 0.12);
}

.login-pillars strong,
.login-pillars small {
  display: block;
}

.login-pillars strong {
  font-size: 0.86rem;
}

.login-pillars small {
  margin-top: 3px;
  color: #8ea7b8;
  font-size: 0.76rem;
  line-height: 1.45;
}

.login-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 24px;
  overflow-y: auto;
}

.login-card {
  width: min(400px, 100%);
  padding: 36px 34px 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
  animation: login-rise 0.45s ease-out both;
}

.login-kicker {
  margin: 0 0 6px;
  color: var(--teal);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-card h2 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}

.login-subtitle {
  margin: 8px 0 24px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-field {
  display: grid;
  gap: 7px;
}

.login-field > span:first-child {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.login-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: var(--ink);
  background: #fbfdfe;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-field input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(11, 159, 151, 0.14);
  background: white;
}

.login-password {
  position: relative;
  display: block;
}

.login-password input {
  padding-right: 84px;
}

.login-reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.login-reveal:hover,
.login-reveal:focus-visible {
  color: var(--ink);
  background: var(--canvas);
}

.login-hint {
  margin: -6px 0 0;
  color: var(--amber);
  font-size: 0.76rem;
  font-weight: 600;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.login-remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.login-feedback {
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.login-feedback.error {
  padding: 10px 12px;
  border-radius: 10px;
  color: #9b2f3a;
  background: #fdecee;
}

.login-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  color: #04201f;
  background: linear-gradient(145deg, #60e2d3, #1cb7ae);
  box-shadow: 0 12px 26px rgba(18, 180, 168, 0.28);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.login-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(18, 180, 168, 0.34);
}

.login-submit:focus-visible {
  outline: 3px solid rgba(11, 159, 151, 0.35);
  outline-offset: 2px;
}

.login-submit:disabled {
  cursor: progress;
  filter: saturate(0.6);
}

.login-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(4, 32, 31, 0.25);
  border-top-color: #04201f;
  border-radius: 50%;
  animation: login-spin 0.8s linear infinite;
}

.login-submit.busy .login-spinner {
  display: inline-block;
}

.login-otp {
  text-align: center;
  font-size: 1.5rem !important;
  font-weight: 800;
  letter-spacing: 0.4em;
  font-variant-numeric: tabular-nums;
}

.login-link {
  justify-self: center;
  padding: 4px;
  border: 0;
  color: var(--blue);
  background: none;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.login-link:hover {
  text-decoration: underline;
}

.login-footnote {
  margin: 0;
  color: var(--faint);
  font-size: 0.74rem;
  text-align: center;
}

@keyframes login-spin {
  to { transform: rotate(360deg); }
}

@keyframes login-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .login-screen {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }

  .login-hero-content {
    gap: 18px;
    padding: 24px 20px 28px;
  }

  .login-pitch h1 {
    max-width: none;
    font-size: 1.6rem;
  }

  .login-pitch p {
    font-size: 0.9rem;
  }

  .login-pillars {
    display: none;
  }

  .login-panel {
    justify-content: flex-start;
    padding: 24px 16px 32px;
  }

  .login-card {
    padding: 28px 22px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-card,
  .login-spinner {
    animation: none;
  }

  .login-submit {
    transition: none;
  }
}


/* Histórico de versões */
.dashboard-history-list {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}

.dashboard-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  background: white;
}

.dashboard-history-row.delete {
  border-left-color: var(--danger);
  background: #fdf6f7;
}

.dashboard-history-row.restore {
  border-left-color: var(--blue);
}

.dashboard-history-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dashboard-history-copy strong {
  font-size: 0.8rem;
}

.dashboard-history-copy span {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-history-copy small {
  color: var(--muted);
  font-size: 0.72rem;
}


/* Simulação de ações de alertas */
.task-preview-button.secondary {
  background: white;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.channel-chat-list:empty {
  display: none;
}

.channel-chat-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.channel-chat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font-size: 0.78rem;
}

.channel-chat-row code {
  font-weight: 700;
}

.channel-chat-row span {
  flex: 1;
  color: var(--muted);
}

.task-dispatch-history {
  display: grid;
  gap: 6px;
}

.task-dispatch-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font-size: 0.74rem;
}

.task-dispatch-text {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  color: var(--muted);
}

.task-dispatch-text strong {
  color: var(--ink);
}

.task-dispatch-text small {
  flex-basis: 100%;
  font-size: 0.68rem;
}

.task-dispatch-tools {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Incorporado em outro site (?embed=1): só o dashboard, com filtros e abas, sem os menus do Synapses. */
body.embed-mode .sidebar,
body.embed-mode .topbar,
body.embed-mode .catalog-pane,
body.embed-mode .dashboard-focus-bar {
  display: none !important;
}

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

body.embed-mode .main-content {
  min-width: 0;
  padding: 0;
}

.embed-snippet {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.embed-snippet textarea {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  width: 100%;
}

.logs-level {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.task-row-limit {
  align-items: center;
  display: flex;
  gap: 6px;
}

.task-row-limit input {
  width: 80px;
}

code.request-id {
  font-size: 11px;
}

/* Modo de renderização (Chromium do servidor gerando anexos): só o dashboard, sem menus nem barras. */
body.render-mode {
  background: white;
}

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

body.render-mode .sidebar,
body.render-mode .topbar,
body.render-mode .catalog-pane,
body.render-mode .dashboard-focus-bar,
body.render-mode .dashboard-simulation-toolbar,
body.render-mode .preview-toolbar,
body.render-mode .dashboard-filters-toggle,
body.render-mode #dashboard-filters-toggle,
body.render-mode .dashboard-simulation-controls,
body.render-mode .dashboard-authoring-action,
body.render-mode .dashboard-metadata-filter-add {
  display: none !important;
}

body.render-mode .main-content {
  min-width: 0;
  padding: 0;
}

body.render-mode #view-dashboards,
body.render-mode .workspace-layout {
  min-height: 100vh;
}

body.render-mode .workspace-layout {
  height: auto;
  grid-template-columns: 1fr;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.task-preview-button.danger {
  background: #fff1f0;
  color: #9b2c2c;
  border: 1px solid #e3a3a3;
}

.task-simulation-output:empty {
  display: none;
}

.task-simulation-output {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.task-simulation-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 0.8rem;
}

.task-simulation-heading span,
.task-simulation-empty {
  color: var(--muted);
  font-size: 0.76rem;
}

.task-simulation-record {
  display: grid;
  gap: 8px;
}

.task-simulation-record h4 {
  margin: 4px 0 0;
  font-size: 0.78rem;
}

.task-simulation-action {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  background: white;
}

.task-simulation-action.blocked {
  border-left-color: var(--amber);
  background: #fffaf0;
}

.task-simulation-action-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
}

.task-simulation-line {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.task-simulation-body {
  width: 100%;
  height: 240px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.task-simulation-message {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--canvas);
  font-size: 0.75rem;
  white-space: pre-wrap;
}

.task-simulation-line .tag {
  display: inline-block;
  width: auto;
  margin-right: 6px;
  vertical-align: middle;
}


/* Réplica Synapses */
.summary-grid.replica-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

@media (max-width: 760px) {
  .summary-grid.replica-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.access-table tr.muted-row td {
  opacity: 0.55;
}

.access-table .task-preview-button {
  margin: 2px 0 0 6px;
  padding: 5px 9px;
  font-size: 0.74rem;
}

.replica-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.replica-job {
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  background: var(--panel);
  font-size: 0.8rem;
}

.replica-job.running {
  border-left-color: var(--blue);
}

.replica-job.failed {
  border-left-color: var(--amber);
  background: #fffaf0;
}

.replica-job-problems {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.75rem;
}

/* Réplica: gestão do catálogo */
.replica-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--teal-soft);
  font-size: 0.78rem;
}

.replica-bulk-bar.empty {
  background: transparent;
  color: var(--muted);
}

.replica-bulk-bar .task-preview-button {
  margin: 0;
}

/* Coluna de seleção (cabeçalho vazio) da Réplica e de Acessos; as demais tabelas usam a largura natural. */
.access-table td.replica-select-cell,
.access-table th:first-child:empty {
  width: 28px;
}

.replica-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.replica-editor-grid .replica-editor-wide {
  grid-column: 1 / -1;
}

.replica-field input,
.replica-field textarea,
.replica-field select {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
}

.replica-field small {
  font-weight: 500;
}

.replica-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 760px) {
  .replica-editor-grid { grid-template-columns: 1fr; }
}

/* Configurações: abas verticais, no estilo do editor de dashboards */
.settings-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: 12px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f5f9fa 0%, #edf5f6 100%);
}

.settings-group {
  padding: 10px 9px 4px;
  color: #7b929e;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-group:first-child {
  padding-top: 0;
}

.settings-nav button {
  min-height: 40px;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  color: #385b6d;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.settings-nav button:hover {
  background: #e6f1f3;
}

.settings-nav button.active {
  color: #075e59;
  background: #dff4f1;
}

.settings-nav .settings-icon {
  width: 27px;
  height: 27px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #277182;
  background: #e3eff2;
  font-size: 0.7rem;
}

.settings-nav button.active .settings-icon {
  color: white;
  background: var(--teal);
}

.settings-nav .nav-count {
  margin-left: auto;
}

.settings-body {
  min-width: 0;
}

.settings-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.settings-filters select,
.settings-filters input {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font: inherit;
  font-size: 0.75rem;
}

.control-services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.control-service {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  background: var(--panel);
  font-size: 0.78rem;
}

.control-service .tag {
  justify-self: start;
}

.control-service small {
  color: var(--muted);
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

.control-service.off,
.control-service.warning {
  border-left-color: var(--amber);
}

.control-service.error {
  border-left-color: #c2413a;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 1100px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .settings-group { display: none; }
  .control-grid { grid-template-columns: 1fr; }
}

/* Tarefas e alertas: cartões em linguagem simples (Quando / Se / Então) e editor */
.task-toolbar {
  gap: 10px;
}

.task-toolbar .result-count {
  margin-left: 4px;
}

.task-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.task-section-switch {
  margin-bottom: 14px;
}

.task-section-switch button {
  padding: 8px 16px;
}

.task-section-count {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(8, 116, 138, 0.1);
  font-size: 0.66rem;
}

.task-layout-switch button {
  padding: 6px 10px;
  font-size: 0.7rem;
}

.task-more {
  position: relative;
}

.task-more summary {
  list-style: none;
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: white;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.task-more summary::-webkit-details-marker {
  display: none;
}

.task-more[open] summary {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.task-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 6;
  display: grid;
  gap: 6px;
  min-width: 280px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  box-shadow: 0 18px 44px rgba(3, 18, 29, 0.18);
}

.task-more-menu .task-bulk {
  width: 100%;
  text-align: left;
}

/* Lista de tarefas: uma linha por tarefa, regra resumida */
.task-grid.task-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.task-row.inactive {
  background: #fbfcfd;
}

.task-row.inactive .task-row-rule {
  opacity: 0.72;
}

.task-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.task-row-head h3 {
  margin: 0;
  font-size: 0.88rem;
}

.task-row-head .task-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.task-row .status-badge {
  padding: 2px 7px;
  font-size: 0.62rem;
}

.task-row-rule {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.task-row-rule b {
  margin: 0 4px 0 10px;
  color: var(--teal-dark);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.task-row-rule b:first-child {
  margin-left: 0;
}

.task-row-timing {
  display: grid;
  gap: 2px;
  min-width: 170px;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: right;
}

.task-row-timing small {
  font-size: 0.66rem;
}

@media (max-width: 900px) {
  .task-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-row-timing {
    text-align: left;
  }
}

.task-origin-filter {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: white;
  font-size: 0.72rem;
}

.task-grid:has(.task-rule-card) {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.task-rule-card {
  padding: 16px 17px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 5px 18px rgba(18, 48, 70, 0.04);
}

.task-rule-card.inactive {
  background: #fbfcfd;
}

.task-rule-card.inactive .task-rule {
  opacity: 0.72;
}

.task-rule-card-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.task-rule-card-title h2 {
  margin: 0 0 4px;
  font-size: 0.88rem;
}

.task-rule-doc {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.status-badge.origin-weknow {
  color: #4b6978;
  background: #edf2f4;
}

.status-badge.origin-edited {
  color: #94620e;
  background: var(--amber-soft);
}

.status-badge.origin-synapses {
  color: #27669a;
  background: var(--blue-soft);
}

.task-rule {
  display: grid;
  gap: 5px;
}

.task-rule-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 9px;
  border-radius: 8px;
  background: #f6f9fa;
}

.task-rule-row.when { background: var(--blue-soft); }
.task-rule-row.if { background: #f4f1fb; }
.task-rule-row.then { background: var(--teal-soft); }

.task-rule-label {
  color: #4b6978;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.task-rule-row.when .task-rule-label { color: var(--blue); }
.task-rule-row.if .task-rule-label { color: #6a4fb0; }
.task-rule-row.then .task-rule-label { color: #08776f; }

.task-rule-body {
  display: grid;
  gap: 3px;
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.4;
}

.task-rule-action {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.task-rule-muted {
  color: var(--muted);
  font-style: italic;
}

.task-rule-card-footer {
  margin-top: auto;
  padding-top: 9px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}

.task-rule-timing span,
.task-rule-timing small {
  display: block;
  color: var(--muted);
  font-size: 0.64rem;
}

.task-rule-timing small {
  margin-top: 2px;
}

.task-rule-open {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid #b9dcd8;
  border-radius: 8px;
  color: #086a6d;
  background: white;
  font-size: 0.7rem;
  font-weight: 800;
}

.task-rule-open:hover {
  background: #f2fbfa;
}

.task-empty {
  grid-column: 1 / -1;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  font-size: 0.75rem;
}

.task-editor .task-rule-row {
  grid-template-columns: 86px minmax(0, 1fr);
}

.task-editor-list {
  display: grid;
  gap: 12px;
}

.task-editor-card {
  display: grid;
  gap: 12px;
  margin-bottom: 0;
}

.task-editor-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.task-editor-sentence {
  margin: 0;
  color: #34576a;
  font-size: 0.7rem;
  line-height: 1.4;
}

.task-editor-tools {
  display: flex;
  gap: 6px;
}

.local-metadata-editor .secondary-button.task-editor-small {
  min-height: 30px;
  padding: 5px 10px;
  justify-self: start;
}

.local-metadata-editor .secondary-button.danger,
.local-metadata-editor .secondary-button.task-editor-danger {
  color: var(--danger);
  border-color: #e7c3c7;
}

.local-metadata-editor .secondary-button.task-editor-add {
  margin-top: 12px;
}

.task-editor-block {
  padding: 12px 13px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.task-editor-block h4,
.task-editor-subtitle {
  margin: 0;
  color: #173f51;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.task-editor-subtitle {
  margin-top: 4px;
}

.task-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  align-items: end;
}

.task-editor-subgrid {
  grid-column: 1 / -1;
}

.task-editor-stack {
  display: grid;
  gap: 9px;
}

.task-editor-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

.task-editor-inline input {
  max-width: 96px;
}

.task-editor-suffix {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.task-editor-add-row {
  margin-top: 12px;
}

.task-editor-add-row select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.7rem;
}

.task-weekday-picker {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.task-weekday {
  min-width: 42px;
  padding: 7px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #4b6978;
  background: white;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: capitalize;
}

.task-weekday[aria-pressed="true"] {
  border-color: var(--teal);
  color: white;
  background: var(--teal);
}

.task-editor-next {
  margin: 0;
  color: var(--blue);
  font-size: 0.66rem;
  font-weight: 700;
}

.task-editor-code {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.7rem;
}

/* Início: conteúdo padrão do Synapses */
.home-start {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: white;
}

.home-start p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.home-default-content {
  margin-top: 18px;
}

.home-default-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.home-default-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  background: white;
}

.home-default-card.installed {
  background: linear-gradient(180deg, #f3fbfa 0%, white 60%);
}

.home-default-card h3 {
  margin: 2px 0 0;
  font-size: 0.95rem;
}

/* Alertas prontos do Synapses */
.alert-catalog-panel {
  margin-top: 18px;
}

.alert-catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 14px;
}

.alert-catalog-filter {
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.alert-catalog-filter.active {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.alert-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}

.alert-catalog-card:not(.expanded) .alert-catalog-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.alert-catalog-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid #a9c2cc;
  border-radius: 14px;
  background: white;
}

.alert-catalog-card.severity-alta { border-left-color: #c94a4a; }
.alert-catalog-card.severity-media { border-left-color: #d98a16; }
.alert-catalog-card.severity-info { border-left-color: #2f8fb5; }
.alert-catalog-card.active { background: linear-gradient(180deg, #f3fbfa 0%, white 60%); }

.alert-catalog-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.alert-catalog-head h3 {
  margin: 2px 0 0;
  font-size: 0.95rem;
}

.alert-catalog-category {
  margin: 0;
  color: var(--teal-dark);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.alert-catalog-description,
.alert-catalog-rationale,
.alert-catalog-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.alert-catalog-rationale strong {
  color: var(--ink);
}

.alert-catalog-meta {
  font-size: 0.7rem;
}

.alert-catalog-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.alert-catalog-off {
  color: #9b2c2c;
  border-color: #e3a3a3;
}

.alert-catalog-sql {
  max-height: 260px;
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0f2733;
  color: #e6f1f5;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.68rem;
  line-height: 1.5;
  white-space: pre;
}

.alert-catalog-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--canvas);
}

.alert-catalog-targets {
  display: grid;
  gap: 8px;
}

.alert-catalog-form-row {
  display: grid;
  grid-template-columns: minmax(140px, 170px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.alert-catalog-reset {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}

.alert-catalog-output {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.alert-catalog-output:empty { display: none; }
.alert-catalog-output.success { color: var(--teal-dark); }
.alert-catalog-output.error { color: #9b2c2c; }

.status-badge.severity-alta { background: #fdecec; color: #9b2c2c; }
.status-badge.severity-media { background: #fff4df; color: #8a5a0b; }
.status-badge.severity-info { background: #e8f3f9; color: #1f6a8a; }

/* Condição do gatilho: campos do registro, validação e amostra da consulta */
.task-field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}

.task-field-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: white;
  font-size: 0.72rem;
  color: var(--ink);
  cursor: pointer;
}

.task-field-chip:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.task-field-chip code {
  padding: 0 5px;
  border-radius: 999px;
  background: var(--canvas);
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--teal-dark);
}

.task-editor-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}

.task-sql-feedback {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.task-sql-feedback:empty {
  display: none;
}

.task-sql-feedback.success {
  color: var(--teal-dark);
}

.task-sql-feedback.error {
  color: #9b2c2c;
}

.task-sql-sample:empty {
  display: none;
}

.task-sql-sample {
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.task-sql-sample-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
}

.task-sql-sample-table th,
.task-sql-sample-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.task-sql-sample-table th {
  position: sticky;
  top: 0;
  background: var(--canvas);
  font-weight: 800;
}

.task-sql-sample-table th code {
  margin-right: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: white;
  font-size: 0.64rem;
  color: var(--teal-dark);
}

.task-editor-advanced summary {
  color: #34576a;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.task-editor-advanced textarea {
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  resize: vertical;
}

.task-editor-recipient {
  padding: 10px 11px;
  display: grid;
  gap: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  background: #fbfdfd;
}

.task-editor-blocked {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
  color: #7a5310;
  background: var(--amber-soft);
  font-size: 0.68rem;
}

.task-editor-summary .task-rule-body {
  font-size: 0.74rem;
}

@media (max-width: 760px) {
  .task-toolbar {
    flex-wrap: wrap;
  }

  .task-grid:has(.task-rule-card) {
    grid-template-columns: 1fr;
  }
}

/* Configurações › Comunicação (SMTP, Telegram, WhatsApp, alertas) */
.channel-root {
  display: grid;
  gap: 16px;
}

.channel-panel {
  padding-bottom: 6px;
}

.channel-panel .panel-heading {
  align-items: flex-start;
}

.channel-intro {
  max-width: 760px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.channel-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.channel-form {
  padding: 4px 18px 0;
  display: grid;
  gap: 12px;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}

.channel-grid > .channel-check,
.channel-grid > .task-editor-blocked {
  grid-column: 1 / -1;
}

.channel-field-help {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 500;
}

.channel-check {
  align-self: center;
}

.channel-switch {
  font-size: 0.8rem;
  font-weight: 850;
}

.channel-checks {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 0;
}

.channel-footer {
  padding: 12px 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}

.channel-footer > .component-editor-feedback,
.channel-footer > .task-preview-feedback {
  flex: 1 1 240px;
  margin-right: auto;
  text-align: left;
}

.channel-footer .component-editor-feedback {
  margin: 0;
  min-height: 0;
}

.channel-test {
  padding: 14px 18px 12px;
  display: grid;
  gap: 8px;
}

.channel-test .component-editor-help {
  margin: 0;
}

.channel-test-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.channel-test-row .authoring-field {
  flex: 1 1 260px;
}

.channel-test-row button {
  min-height: 38px;
}

.channel-test-result {
  margin: 0;
  min-height: 18px;
  color: var(--muted);
  font-size: 0.72rem;
}

.channel-test-result.success {
  color: #087870;
  font-weight: 700;
}

.channel-test-result.error {
  color: var(--danger);
  font-weight: 700;
}

.channel-test-history small {
  color: var(--muted);
}

.channel-test .secondary-button {
  padding: 8px 12px;
  border: 1px solid #b9ccd4;
  border-radius: 8px;
  color: #294e60;
  background: white;
  font-size: 0.7rem;
  font-weight: 850;
}

.channel-test .secondary-button:hover:not(:disabled) {
  border-color: #73bdb8;
  color: #086a6d;
  background: #f2fbfa;
}

.channel-checks .channel-check {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}

/* Autenticação: passo de cadastro do 2FA no login, 2FA na sessão e Configurações › Autenticação */
.login-otp-enroll {
  margin: 0 0 14px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f6fafb;
  font-size: 0.74rem;
}

.login-otp-enroll ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 3px;
  color: var(--muted);
}

.login-otp-secret,
.own-totp-secret {
  padding: 9px 10px;
  border-radius: 8px;
  color: #0b2f41;
  background: white;
  border: 1px dashed var(--line-strong);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-align: center;
  word-break: break-all;
}

.own-totp {
  margin: 14px 0;
  display: grid;
  gap: 8px;
}

.own-totp:empty {
  display: none;
}

.own-totp h3 {
  margin: 0;
  font-size: 0.86rem;
}

.own-totp-link {
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 750;
}

.auth-providers {
  display: grid;
  gap: 6px;
  padding: 4px 0;
}

.auth-section-title {
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: #173f51;
  font-size: 0.8rem;
}

.auth-user-form-host:not(:empty) {
  margin-bottom: 12px;
}

.auth-user-form .channel-footer {
  border-bottom: 0;
  padding-bottom: 0;
}

.auth-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.channel-panel .secondary-button {
  padding: 6px 10px;
  border: 1px solid #b9ccd4;
  border-radius: 8px;
  color: #294e60;
  background: white;
  font-size: 0.68rem;
  font-weight: 850;
}

.channel-panel .secondary-button.danger {
  color: var(--danger);
  border-color: #e7c3c7;
}

.channel-check input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
}

.channel-check {
  font-size: 0.7rem;
  text-align: left;
}

/* Configurações › Temas */
.theme-swatches {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.theme-swatch {
  width: 10px;
  height: 14px;
  border-radius: 2px;
}

.theme-color-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.theme-color-row input[type="color"] {
  width: 38px;
  height: 34px;
  padding: 2px;
  flex: 0 0 auto;
}

.theme-color-row input[type="text"] {
  min-width: 0;
}

.theme-palette {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.theme-palette-chip {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.theme-palette-chip input[type="color"] {
  width: 34px;
  height: 30px;
  padding: 2px;
}

.theme-preview {
  margin-top: 6px;
  display: grid;
  gap: 6px;
}

.theme-preview-label {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-preview-widget {
  max-width: 420px;
  min-height: 190px;
  position: relative;
}

.theme-preview-bars {
  height: 90px;
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.theme-preview-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
}

.theme-advanced {
  width: 100%;
  min-height: 320px;
}

/* Interatividade dos painéis: seleção por clique, drill e detalhamento */
.wk-selectable {
  cursor: pointer;
}

tr.wk-selectable:hover td {
  background-color: rgba(11, 159, 151, 0.06);
}

.wk-has-selection .wk-selectable:not(.wk-selected) {
  opacity: 0.38;
}

.wk-has-selection tr.wk-selectable:not(.wk-selected) {
  opacity: 0.55;
}

tr.wk-selected td {
  background-color: rgba(11, 159, 151, 0.14);
  font-weight: 700;
}

rect.wk-selected,
circle.wk-selected {
  stroke: #0b2f41;
  stroke-width: 1.5px;
}

.configured-card.wk-selected {
  box-shadow: 0 0 0 2px var(--teal);
}

.dashboard-selection-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}

.dashboard-selection-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 6px 4px 10px;
  border: 1px solid #aee0db;
  border-radius: 999px;
  color: #0b2f41;
  background: var(--teal-soft);
  font-size: 0.68rem;
}

.dashboard-selection-chip.drill {
  border-color: #c5d5f0;
  background: var(--blue-soft);
}

.dashboard-selection-action,
.dashboard-selection-remove,
.dashboard-selection-clear {
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #086a6d;
  background: white;
  font-size: 0.66rem;
  font-weight: 800;
}

.dashboard-selection-remove {
  padding: 0 7px;
  color: var(--muted);
}

.dashboard-selection-clear {
  border-color: var(--line);
  color: var(--muted);
}

.component-detail-dialog {
  width: min(1200px, calc(100vw - 48px));
}

.component-detail-heading p {
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 0.72rem;
}

.component-detail-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.component-detail-toolbar input[type="search"] {
  flex: 1 1 220px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.component-detail-toolbar .secondary-button {
  padding: 6px 10px;
  border: 1px solid #b9ccd4;
  border-radius: 8px;
  color: #294e60;
  background: white;
  font-size: 0.68rem;
  font-weight: 800;
}

.component-detail-table {
  max-height: min(62vh, 620px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.component-detail-table table {
  width: 100%;
}

.component-detail-table th {
  position: sticky;
  top: 0;
  background: #f4f8f9;
}

.component-links-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.component-links-list {
  display: grid;
  gap: 6px;
}

.component-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.component-links-row select {
  flex: 1 1 200px;
}

.component-links-row input {
  flex: 1 1 130px;
}

.component-links-editor .secondary-button {
  padding: 5px 9px;
  border: 1px solid #b9ccd4;
  border-radius: 7px;
  color: #294e60;
  background: white;
  font-size: 0.66rem;
  font-weight: 800;
}

.component-links-row select,
.component-links-row input {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 0.7rem;
}

.component-links-arrow {
  color: var(--teal);
  font-weight: 900;
}

.component-links-actions {
  display: flex;
  gap: 8px;
}

/* Gráficos: visões, combinado e títulos de eixo */
.widget-views {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.widget-views select {
  max-width: 150px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #26475a;
  background: white;
  font-size: 0.62rem;
}

.configured-chart-axis-title {
  fill: #5d7584;
  font-size: 11px;
  font-weight: 700;
}

.configured-chart-axis-text.secondary {
  fill: #6a4fb0;
}

/* Planilhas: rodapé, contagem, número da linha, linhas alternadas, transposta */
.loaded-table tfoot td {
  border-top: 2px solid var(--line-strong);
  background: #f4f8f9;
  font-weight: 800;
}

.table-row-number {
  width: 1%;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.loaded-table.alternate-rows tbody tr:nth-child(even) td {
  background-color: #f6f9fa;
}

.transposed-table th {
  text-align: left;
  white-space: nowrap;
}

.table-record-count {
  padding: 4px 8px;
  color: var(--muted);
  font-size: 0.66rem;
  text-align: right;
}

/* Configurações › Variáveis de contexto e Privacidade */
.context-dynamic-columns { display: grid; gap: 8px; }
.context-dynamic-column { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.context-dynamic-column code { min-width: 120px; }
.context-dynamic-sample { max-height: 220px; overflow: auto; padding: 10px; border-radius: 8px; background: var(--teal-soft); font-size: 12px; }
.privacy-field-rows, .privacy-filter-rows, .privacy-sets { display: grid; gap: 8px; }
.privacy-field-row, .privacy-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.privacy-filter-row input { flex: 1 1 220px; }
.privacy-set-card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.privacy-set-header { display: flex; gap: 8px; align-items: center; }
.privacy-set-header input { flex: 1 1 auto; }
.privacy-field-row > select, .privacy-filter-row > select, .context-dynamic-column > select { flex: 0 1 220px; width: auto; min-width: 140px; }
.privacy-filter-row > input, .context-dynamic-column > input { width: auto; }
.privacy-set-card > select { max-width: 360px; }

/* Materializado */
.materialized-schedule { display: grid; gap: 8px; }
.dashboard-materialized-box { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.dashboard-materialized-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }

/* Acessos: alteração em massa e sessões */
.access-users-wrap { display: grid; gap: 10px; }
.access-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.access-bulk-bar select, .access-bulk-bar input[type="date"] { width: auto; }

/* ---- Assistente do hospital (IA) ------------------------------------------ */
.assistant-root {
  min-width: 0;
}

.assistant-layout {
  height: calc(100vh - 128px);
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(240px, 24%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.assistant-sidebar {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #f7fafc, var(--panel));
}

.assistant-new {
  width: 100%;
}

.assistant-conversations {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 6px;
}

.assistant-conversation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
}

.assistant-conversation-open {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 4px 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
}

.assistant-conversation-delete {
  margin: 6px 6px 0 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0;
}

.assistant-conversation:hover .assistant-conversation-delete,
.assistant-conversation.active .assistant-conversation-delete,
.assistant-conversation-delete:focus-visible {
  opacity: 1;
}

.assistant-conversation-delete:hover {
  background: #fff0f1;
  color: var(--danger);
}

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

.assistant-conversation-open strong {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.assistant-conversation-open span,
.assistant-empty {
  color: var(--muted);
  font-size: 0.66rem;
}

.assistant-conversation:hover {
  background: var(--blue-soft);
}

.assistant-conversation.active {
  border-color: var(--line-strong);
  background: var(--teal-soft);
}

.assistant-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.assistant-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--line);
}

.assistant-header h2 {
  margin: 2px 0 0;
  font-size: 1.05rem;
}

.assistant-messages {
  min-height: 0;
  overflow: auto;
  padding: 18px 22px;
  display: grid;
  align-content: start;
  gap: 14px;
  background: var(--canvas);
}

.assistant-intro {
  max-width: 720px;
  margin: 24px auto 8px;
  text-align: center;
}

.assistant-intro h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.assistant-intro p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.assistant-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.assistant-suggestion {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}

.assistant-suggestion:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.assistant-message {
  display: flex;
}

.assistant-message.user {
  justify-content: flex-end;
}

.assistant-bubble {
  max-width: min(820px, 92%);
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.assistant-message.user .assistant-bubble {
  background: var(--nav);
  border-color: var(--nav);
  color: #fff;
  white-space: pre-wrap;
}

.assistant-message.error .assistant-bubble {
  border-color: var(--danger);
  color: var(--danger);
  background: #fff5f6;
}

.assistant-message.pending .assistant-bubble {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.assistant-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--teal);
  animation: assistant-spin 0.9s linear infinite;
}

@keyframes assistant-spin {
  to { transform: rotate(360deg); }
}

.assistant-bubble p {
  margin: 0 0 8px;
}

.assistant-bubble p:last-child {
  margin-bottom: 0;
}

.assistant-bubble h4,
.assistant-bubble h5 {
  margin: 10px 0 6px;
  font-size: 0.84rem;
}

.assistant-bubble ul,
.assistant-bubble ol {
  margin: 0 0 8px;
  padding-left: 20px;
}

.assistant-bubble code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--canvas);
  font-size: 0.74rem;
}

.assistant-table {
  width: 100%;
  margin: 6px 0 10px;
  border-collapse: collapse;
  font-size: 0.74rem;
}

.assistant-table th,
.assistant-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.assistant-table th {
  color: var(--muted);
  font-weight: 600;
  background: var(--canvas);
}

.assistant-table td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.assistant-steps {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
  font-size: 0.7rem;
  color: var(--muted);
}

.assistant-steps summary {
  cursor: pointer;
  font-weight: 600;
}

.assistant-step-list {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.assistant-step-list li.failed strong {
  color: var(--danger);
}

.assistant-step-list small {
  display: block;
  color: var(--faint);
}

.assistant-sql {
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--nav);
  color: #dbe7f0;
  font-size: 0.68rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.assistant-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  padding: 14px 22px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.assistant-composer textarea {
  resize: vertical;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.45;
}

.assistant-composer textarea:focus {
  outline: 2px solid var(--teal-soft);
  border-color: var(--teal);
}

.assistant-composer .execute-button {
  align-self: end;
}

.assistant-hint {
  grid-column: 1 / -1;
  color: var(--faint);
  font-size: 0.64rem;
}

.assistant-usage {
  white-space: nowrap;
}

.assistant-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 0 18px 12px;
}

.assistant-stat {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
}

.assistant-stat strong {
  font-size: 1.05rem;
}

.assistant-stat span {
  color: var(--muted);
  font-size: 0.66rem;
}

.assistant-areas {
  justify-content: flex-start;
  padding: 0 18px 14px;
}

@media (max-width: 900px) {
  .assistant-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
    min-height: 70vh;
  }

  .assistant-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    grid-template-rows: auto auto;
  }

  .assistant-conversations {
    max-height: 160px;
  }
}

/* ---- Visualizador de consultas do assistente (painel lateral) ---------------- */
.sql-editor {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--nav);
}

.sql-gutter,
.sql-highlight,
.sql-input {
  margin: 0;
  padding: 12px 10px;
  font-family: "Cascadia Code", "Consolas", "SFMono-Regular", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
  overflow: hidden;
}

.sql-gutter {
  color: rgba(219, 231, 240, 0.45);
  text-align: right;
  background: rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
}

.sql-highlight {
  grid-column: 2;
  grid-row: 1;
  color: #dbe7f0;
  pointer-events: none;
}

.sql-input {
  grid-column: 2;
  grid-row: 1;
  resize: none;
  border: 0;
  outline: none;
  color: transparent;
  caret-color: #fff;
  background: transparent;
  overflow: auto;
}

.sql-input::selection {
  background: rgba(57, 208, 195, 0.35);
}

.sql-tok-keyword { color: #7fd6ff; font-weight: 600; }
.sql-tok-string { color: #ffd38a; }
.sql-tok-number { color: #b7f7c3; }
.sql-tok-comment { color: rgba(219, 231, 240, 0.5); font-style: italic; }

.assistant-viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.assistant-viewer-toolbar select {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  font: inherit;
  font-size: 0.74rem;
}

.assistant-viewer-spacer {
  flex: 1;
}

.assistant-viewer-status {
  margin: 0;
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.74rem;
}

.assistant-viewer-status.success { color: var(--teal); }
.assistant-viewer-status.error { color: var(--danger); }

.assistant-viewer-results {
  min-height: 0;
  overflow: hidden;
  display: grid;
}

.assistant-viewer-grid {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.assistant-viewer-table {
  margin: 0;
  min-width: 100%;
  white-space: nowrap;
}

.assistant-viewer-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.assistant-viewer-table th.numeric,
.assistant-viewer-table td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.assistant-sql[role="button"] {
  cursor: pointer;
}

.assistant-sql[role="button"]:hover {
  outline: 2px solid var(--teal-soft);
}

.assistant-layout.with-viewer {
  grid-template-columns: minmax(200px, 18%) minmax(360px, 1fr) 8px var(--assistant-viewer-width, 42%);
}

.assistant-layout.resizing {
  user-select: none;
  cursor: col-resize;
}

.assistant-viewer-divider {
  cursor: col-resize;
  background: var(--line);
  transition: background 0.15s;
}

.assistant-viewer-divider:hover,
.assistant-viewer-divider.dragging {
  background: var(--teal);
}

.assistant-viewer-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--panel);
}

.assistant-viewer-pane-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--line);
}

.assistant-viewer-pane-header h3 {
  margin: 2px 0 0;
  font-size: 0.92rem;
  line-height: 1.3;
}

.assistant-viewer-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.assistant-viewer-close:hover {
  background: var(--blue-soft);
}

.assistant-query-viewer {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(140px, 34%) auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px 18px 16px;
}

.assistant-viewer-intro {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.assistant-query-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.assistant-query-chips-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.assistant-query-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--blue);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.assistant-query-chip span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-query-chip small {
  color: var(--faint);
  font-weight: 500;
}

.assistant-query-chip:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.assistant-query-chip.failed {
  color: var(--danger);
}

.assistant-query-chip-icon {
  color: var(--teal);
}

@media (max-width: 1100px) {
  .assistant-layout.with-viewer {
    grid-template-columns: minmax(0, 1fr) 8px var(--assistant-viewer-width, 46%);
  }

  .assistant-layout.with-viewer .assistant-sidebar {
    display: none;
  }
}

/* ---- Botão secundário (estilo global; antes só existia dentro de alguns editores) ------ */
.secondary-button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.secondary-button:hover:not(:disabled) {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.secondary-button:disabled {
  cursor: not-allowed;
  color: var(--faint);
  background: var(--canvas);
}

/* ---- Lateral do assistente recolhível --------------------------------------------- */
.assistant-layout.sidebar-collapsed {
  grid-template-columns: 56px minmax(0, 1fr);
}

.assistant-layout.with-viewer.sidebar-collapsed {
  grid-template-columns: 56px minmax(360px, 1fr) 8px var(--assistant-viewer-width, 42%);
}

.assistant-sidebar-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.assistant-sidebar-toggle,
.assistant-rail-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.assistant-sidebar-toggle:hover,
.assistant-rail-button:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--ink);
}

.assistant-sidebar.collapsed {
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: start;
  padding: 16px 10px;
}

.assistant-rail-button {
  color: var(--teal);
  font-weight: 700;
}

.assistant-rail-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .assistant-layout.with-viewer.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr) 8px var(--assistant-viewer-width, 46%);
  }
}

/* ---- Painel proposto a partir da conversa ------------------------------------- */
.assistant-header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.assistant-generate {
  color: var(--teal);
  border-color: var(--teal-soft);
  background: var(--teal-soft);
}

.assistant-generate:hover:not(:disabled) {
  background: #d3f3ee;
}

.assistant-draft-loading {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 18px;
  color: var(--muted);
  font-size: 0.78rem;
}

.assistant-draft-loading .assistant-spinner {
  display: inline-block;
}

.assistant-dashboard-draft {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 12px 18px 18px;
}

.assistant-draft-form {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px 12px;
}

.assistant-draft-form .assistant-viewer-intro {
  grid-column: 1 / -1;
}

.assistant-draft-components {
  display: grid;
  gap: 6px;
}

.assistant-draft-component {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-size: 0.74rem;
  cursor: pointer;
}

.assistant-draft-component.failed {
  background: #fff7f8;
  border-color: #f0c9ce;
  cursor: default;
}

.assistant-draft-component input[type="checkbox"] {
  margin-top: 3px;
}

.assistant-draft-component-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.assistant-draft-component-text small {
  color: var(--muted);
  font-size: 0.66rem;
  overflow-wrap: anywhere;
}

.assistant-draft-error {
  color: var(--danger) !important;
}

.assistant-draft-sql summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 0.66rem;
  font-weight: 600;
}

.assistant-dashboard-stage-wrap {
  overflow: auto;
}

.assistant-dashboard-stage {
  min-width: 0;
  height: 1100px;
}

.assistant-stage-empty {
  padding: 20px;
}

.assistant-saved-dashboard {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-saved-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--teal-soft);
}

/* ---- Cabeçalho da conversa: título limitado, ferramentas em linha própria quando estreito ---- */
.assistant-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.assistant-header h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.assistant-layout.with-viewer .assistant-header {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
}

.assistant-layout.with-viewer .assistant-header-tools {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.assistant-header-tools .secondary-button {
  white-space: nowrap;
}

/* ---- Pastas e menu das conversas ---- */
.assistant-folder {
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

.assistant-folder summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.assistant-folder summary::-webkit-details-marker {
  display: none;
}

.assistant-folder-icon {
  display: inline-block;
  transition: transform 0.15s;
}

.assistant-folder[open] .assistant-folder-icon {
  transform: rotate(90deg);
}

.assistant-folder summary small {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--canvas);
  font-weight: 600;
}

.assistant-conversation {
  position: relative;
}

.assistant-menu {
  position: absolute;
  top: 34px;
  right: 6px;
  z-index: 20;
  min-width: 170px;
  display: grid;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.assistant-menu-item {
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.74rem;
  text-align: left;
  cursor: pointer;
}

.assistant-menu-item:hover {
  background: var(--blue-soft);
}

.assistant-menu-item.danger {
  color: var(--danger);
}

.assistant-menu-item.danger:hover {
  background: #fff0f1;
}

/* ---- Painel ao vivo na lateral ---- */
.assistant-dashboard-live,
.assistant-dashboard-live-body {
  min-height: 0;
  display: grid;
  gap: 10px;
  padding: 12px 18px 18px;
  overflow: auto;
}

.assistant-dashboard-live-body {
  padding: 0;
}

.assistant-draft-notes {
  padding: 8px 12px;
  border: 1px solid #f0c9ce;
  border-radius: 10px;
  background: #fff7f8;
  font-size: 0.72rem;
}

.assistant-draft-notes summary {
  cursor: pointer;
  color: var(--danger);
  font-weight: 600;
}

.assistant-draft-notes p {
  margin: 6px 0 0;
  color: var(--muted);
}

.assistant-dashboard-list {
  display: grid;
  gap: 8px;
  padding: 12px 18px;
}

.assistant-dashboard-choice {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.assistant-dashboard-choice:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.assistant-dashboard-choice strong {
  font-size: 0.8rem;
}

.assistant-dashboard-choice small {
  color: var(--muted);
  font-size: 0.66rem;
}

/* ---- Usuários ------------------------------------------------------------------- */
.users-root {
  min-width: 0;
}

.users-panel .panel-heading {
  align-items: flex-start;
}

.users-actions {
  flex: none;
}

.users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 12px;
}

.users-table-wrap {
  max-height: calc(100vh - 330px);
  overflow: auto;
}

.users-table td,
.users-table th {
  vertical-align: middle;
}

.users-who {
  display: table-cell;
}

.users-who strong,
.users-who small {
  display: block;
}

.users-who small {
  color: var(--muted);
  font-size: 0.66rem;
}

.users-roles {
  display: table-cell;
}

.users-roles .access-role-chip {
  display: inline-flex;
  margin: 2px 4px 2px 0;
}

.users-roles .access-role-chip.inherited {
  opacity: 0.65;
  border-style: dashed;
}

.users-edit {
  text-align: right;
}

.user-editor {
  max-width: 760px;
}

.user-editor-form {
  padding: 8px 0 0;
}

.user-roles {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.user-roles legend {
  padding: 0 6px;
  font-size: 0.74rem;
  font-weight: 700;
}

.user-role-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.user-role-option:hover {
  background: var(--blue-soft);
}

.user-role-option input {
  margin-top: 3px;
}

.user-role-option div {
  display: grid;
  gap: 2px;
}

.user-role-option strong {
  font-size: 0.78rem;
}

.user-role-option small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.user-permission-summary {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--teal-soft);
  font-size: 0.72rem;
}

.user-permission-summary ul {
  margin: 0;
  padding-left: 18px;
  columns: 2;
  column-gap: 18px;
}

.user-permission-summary li {
  break-inside: avoid;
  line-height: 1.45;
}

.user-permission-summary small {
  color: var(--muted);
}

.user-totp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  font-size: 0.72rem;
}

.user-totp span {
  color: var(--muted);
}

.user-totp .secondary-button.active {
  border-color: var(--danger);
  color: var(--danger);
}

/* ---- Início: pastas, dashboards e favoritos ------------------------------------ */
.home {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.home-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.home-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.8rem;
}

.home-crumb {
  padding: 4px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.home-crumb:last-child {
  color: var(--ink);
  cursor: default;
}

.home-crumb:hover:not(:last-child) {
  background: var(--blue-soft);
}

.home-crumb-sep {
  color: var(--faint);
}

.home-section h2 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.home-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 210px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 6px 22px rgba(18, 48, 70, 0.045);
  text-align: left;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.home-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: 0 12px 28px rgba(18, 48, 70, 0.1);
}

.home-card-kind {
  padding: 8px 12px 6px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.home-card-art {
  display: grid;
  place-items: center;
  margin: 0 12px;
  border-radius: 10px;
  min-height: 96px;
}

.home-card-art.folder {
  background: linear-gradient(135deg, var(--nav), var(--blue));
  color: #fff;
  font-size: 2.2rem;
}

.home-card-art.dashboard {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
  background: var(--canvas);
}

.home-tile {
  display: block;
  width: 100%;
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(180deg, #dbe6ec, #cfdde5);
}

.home-tile.tile-0 { background: linear-gradient(135deg, var(--teal), var(--teal-bright)); }
.home-tile.tile-3 { background: linear-gradient(135deg, var(--blue), #76a8d6); }

.home-card-foot {
  display: grid;
  gap: 2px;
  padding: 10px 44px 12px 12px;
}

.home-card-foot strong {
  font-size: 0.82rem;
  line-height: 1.3;
}

.home-card-foot small {
  color: var(--muted);
  font-size: 0.66rem;
}

.home-star {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  font-size: 1rem;
  cursor: pointer;
}

.home-star:hover {
  background: var(--amber-soft);
  color: var(--amber);
}

.home-star.active {
  color: var(--amber);
}

.home-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 26px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
}

.home-empty-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--faint);
  font-size: 1.3rem;
}

.home-empty strong {
  color: var(--ink);
}

.home-empty p {
  margin: 0;
}

.overview-admin {
  display: contents;
}

.overview-admin.hidden {
  display: none;
}

/* ---- Editor de usuário: grupos e o que vê ---- */
.user-visible {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--blue-soft);
  font-size: 0.72rem;
}

.user-visible p {
  margin: 0;
}

.user-visible ul {
  margin: 0;
  padding-left: 18px;
  max-height: 160px;
  overflow: auto;
}

.user-groups-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.user-group-option {
  padding: 6px 8px;
}

.user-group-option strong {
  font-size: 0.74rem;
}

/* ---- Início: aparência por usuário, lista e modo focado ---------------------------- */
.home[data-home-theme="synapses"] {
  --home-folder-bg: linear-gradient(135deg, var(--nav), var(--teal));
  --home-folder-fg: #ffffff;
  --home-card-bg: var(--panel);
  --home-card-fg: var(--ink);
  --home-card-muted: var(--muted);
  --home-tile-a: linear-gradient(135deg, var(--teal), var(--teal-bright));
  --home-tile-b: linear-gradient(135deg, var(--blue), #76a8d6);
  --home-tile: linear-gradient(180deg, #dbe6ec, #cfdde5);
  --home-art-bg: var(--canvas);
}

.home[data-home-theme="claro"] {
  --home-folder-bg: var(--teal-soft);
  --home-folder-fg: var(--teal);
  --home-card-bg: var(--panel);
  --home-card-fg: var(--ink);
  --home-card-muted: var(--muted);
  --home-tile-a: var(--teal-soft);
  --home-tile-b: var(--blue-soft);
  --home-tile: #eef3f6;
  --home-art-bg: #f7fafc;
}

.home[data-home-theme="oceano"] {
  --home-folder-bg: linear-gradient(135deg, #2b63c7, #3f82dc);
  --home-folder-fg: #ffffff;
  --home-card-bg: var(--panel);
  --home-card-fg: var(--ink);
  --home-card-muted: var(--muted);
  --home-tile-a: linear-gradient(135deg, #2b63c7, #5b9bea);
  --home-tile-b: linear-gradient(135deg, #8fb8ef, #c4daf7);
  --home-tile: linear-gradient(180deg, #e3ecf8, #d4e2f5);
  --home-art-bg: #eef3fb;
}

.home[data-home-theme="escuro"] {
  --home-folder-bg: linear-gradient(135deg, #122c43, #1f4466);
  --home-folder-fg: var(--teal-bright);
  --home-card-bg: var(--nav);
  --home-card-fg: #e6eef4;
  --home-card-muted: #9fb3c2;
  --home-tile-a: linear-gradient(135deg, var(--teal), var(--teal-bright));
  --home-tile-b: linear-gradient(135deg, #3177bf, #76a8d6);
  --home-tile: #1b3a56;
  --home-art-bg: #0f2538;
}

.home-card {
  background: var(--home-card-bg, var(--panel));
  color: var(--home-card-fg, var(--ink));
}

.home-card-kind,
.home-card-foot small {
  color: var(--home-card-muted, var(--muted));
}

.home-card-art.folder {
  background: var(--home-folder-bg);
  color: var(--home-folder-fg);
}

.home-card-art.dashboard {
  background: var(--home-art-bg, var(--canvas));
}

.home-tile {
  background: var(--home-tile);
}

.home-tile.tile-0 { background: var(--home-tile-a); }
.home-tile.tile-3 { background: var(--home-tile-b); }

.home[data-home-theme="escuro"] .home-star {
  color: #9fb3c2;
}

.home-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.home-layout-switch button {
  font-size: 0.72rem;
}

.home-theme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.home-theme select {
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 0.72rem;
}

.home-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.home-section-head h2 {
  margin: 0;
}

.home-list {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--home-card-bg, var(--panel));
  color: var(--home-card-fg, var(--ink));
}

.home-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-row:last-child {
  border-bottom: 0;
}

.home-row:hover {
  background: rgba(11, 159, 151, 0.08);
}

.home-row-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 1rem;
}

.home-row-icon.folder {
  background: var(--home-folder-bg);
  color: var(--home-folder-fg);
}

.home-row-icon.dashboard {
  background: var(--home-tile-a);
  color: #fff;
}

.home-row-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.home-row-text strong {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-row-text small {
  color: var(--home-card-muted, var(--muted));
  font-size: 0.66rem;
}

.home-row .home-star {
  position: static;
}

.dashboard-focus-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.dashboard-focus-actions {
  display: flex;
  gap: 8px;
}

.home-crumb.current {
  color: var(--ink);
  font-weight: 700;
  cursor: default;
}

#view-dashboards.focus-mode .workspace-layout {
  height: calc(100vh - 190px);
}

/* ---- Catálogo de dashboards mais enxuto ------------------------------------------ */
.dashboard-layout {
  grid-template-columns: minmax(270px, 26%) minmax(0, 1fr);
}

.dashboard-catalog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 0 14px;
}

.dashboard-catalog-row .dashboard-catalog-search {
  margin: 0;
}

.dashboard-filters-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.dashboard-filters-toggle:hover,
.dashboard-filters-toggle.active {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal);
}

#dashboard-filters.hidden {
  display: none;
}

.home-admin-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
}

/* ---- Usuários: colunas estáveis e editor no padrão do estúdio ---------------------- */
.users-table {
  table-layout: fixed;
  width: 100%;
}

.users-table th:nth-child(1), .users-table td:nth-child(1) { width: 26%; }
.users-table th:nth-child(2), .users-table td:nth-child(2) { width: 9%; }
.users-table th:nth-child(3), .users-table td:nth-child(3) { width: 10%; white-space: nowrap; }
.users-table th:nth-child(4), .users-table td:nth-child(4) { width: 30%; }
.users-table th:nth-child(5), .users-table td:nth-child(5) { width: 7%; white-space: nowrap; }
.users-table th:nth-child(6), .users-table td:nth-child(6) { width: 12%; white-space: nowrap; }
.users-table th:nth-child(7), .users-table td:nth-child(7) { width: 6%; }

.users-who strong,
.users-who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-studio .local-metadata-editor-pane {
  display: none;
  gap: 12px;
}

.user-studio .local-metadata-editor-pane.active {
  display: grid;
  align-content: start;
}

.user-studio-grid {
  padding: 0;
}

.user-roles-list {
  display: grid;
  gap: 8px;
}

.user-studio .user-groups-grid {
  max-height: none;
}

.user-studio .user-permission-summary,
.user-studio .user-visible,
.user-studio .user-totp {
  margin-top: 4px;
}

.users-table th,
.users-table td {
  text-align: left;
  white-space: normal;
  vertical-align: middle;
}

.users-table td small {
  display: block;
  color: var(--faint);
}

.users-table .users-edit {
  text-align: right;
}

.users-table-wrap {
  overflow-x: hidden;
}

#view-materialized .offline-inventory-panel {
  margin-top: 14px;
}

/* Assistente no celular: botão no rodapé da lista de conversas, diálogo do código e celulares ligados. */
.assistant-sidebar-footer {
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
}

.assistant-phone {
  width: 100%;
}

.assistant-phone-dialog h3 {
  margin: 18px 0 8px;
  font-size: 14px;
}

.assistant-phone-links {
  display: grid;
  gap: 8px;
}

.assistant-phone-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.assistant-phone-link span {
  grid-column: 1;
  font-size: 12px;
  color: var(--muted);
}

.assistant-phone-link button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.assistant-kb-actions,
.assistant-kb-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.assistant-kb-panel > .component-editor-feedback {
  margin: 0 18px 8px;
}

.assistant-kb-panel > .component-editor-feedback:empty {
  display: none;
}

.assistant-kb-panel > .assistant-kb-list,
.assistant-kb-panel > h3,
.assistant-kb-search,
.assistant-kb-results {
  margin-left: 18px;
  margin-right: 18px;
}

.assistant-kb-generate {
  margin: 0 18px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  justify-items: start;
}

.assistant-kb-generate[hidden] {
  display: none;
}

.assistant-kb-doc.disabled {
  opacity: 0.6;
}

.assistant-kb-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.assistant-kb-info span {
  font-size: 12px;
  color: var(--muted);
}

.assistant-phone-link.assistant-kb-doc .assistant-kb-buttons button {
  grid-column: auto;
  grid-row: auto;
}

.assistant-kb-search {
  display: flex;
  gap: 8px;
}

.assistant-kb-search input {
  flex: 1;
  min-width: 0;
}

.assistant-kb-results {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 16px;
}

.assistant-kb-result summary {
  cursor: pointer;
  font-size: 13px;
}

.assistant-kb-text {
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.authoring-field .assistant-kb-textarea,
.assistant-kb-textarea {
  width: 100%;
  min-height: 360px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
}

.assistant-kb-editor {
  padding-bottom: 16px;
}

.assistant-pairing {
  display: grid;
  gap: 10px;
}

.assistant-pairing-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.assistant-pairing-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 200px;
  text-align: center;
}

.assistant-pairing-qr {
  width: 176px;
  height: 176px;
  background: #fff;
  border-radius: 8px;
}

.assistant-pairing-qr.large {
  width: 240px;
  height: 240px;
}

.assistant-pairing-open {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.assistant-pairing-status {
  font-size: 13px;
  color: var(--muted);
}

.assistant-pairing-done {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #0a857e) 12%, transparent);
  font-weight: 600;
}

.assistant-qr-advanced {
  margin: 0 18px 12px;
}

.assistant-qr-advanced summary {
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 10px;
}

.assistant-qr-box {
  margin: 0 18px;
  display: grid;
  justify-items: start;
  gap: 8px;
}

.assistant-qr-panel > .channel-footer {
  padding: 0 18px 16px;
}

.assistant-phone-code-box {
  margin-top: 12px;
}

.assistant-phone-code {
  margin: 0 0 4px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 4px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.assistant-phone-steps {
  margin: 10px 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

/* Demonstração pública: acesso de visitante na tela de login. */
.login-demo {
  display: grid;
  gap: 4px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px dashed var(--teal);
  border-radius: 12px;
  background: var(--teal-soft);
  color: var(--ink);
  font-size: 0.9rem;
}

.login-demo span {
  font-family: Consolas, "Courier New", monospace;
}

.login-demo small {
  color: var(--muted);
}

.login-demo-fill {
  justify-self: start;
  margin-top: 6px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

/* ---- Diálogos do sistema (confirmar, avisar, perguntar) ---------------------------------- */
.ui-modal {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(10, 31, 51, 0.28);
}

.ui-modal::backdrop {
  background: rgba(10, 31, 51, 0.45);
  backdrop-filter: blur(2px);
}

.ui-modal-form {
  display: grid;
  gap: 12px;
  padding: 22px 22px 18px;
}

.ui-modal-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.ui-modal.error .ui-modal-title { color: var(--danger); }

.ui-modal-message {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ui-modal-input {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 0.86rem;
}

.ui-modal-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.ui-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.ui-modal-button {
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.ui-modal-button:hover { border-color: var(--teal); background: var(--teal-soft); }

.ui-modal-button.primary { border-color: var(--teal); color: white; background: var(--teal); }

.ui-modal-button.primary:hover { background: #088a83; }

.ui-modal-button.danger { border-color: var(--danger); color: white; background: var(--danger); }

.ui-modal-button.danger:hover { background: #a83c46; }

.ui-modal-button:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 2px; }

/* ---- Classes usadas pelos editores que estavam sem estilo -------------------------------- */
/* Janelas de autoria abertas como <dialog> (apresentações, modo visual, malhas de mapa). */
.authoring-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 22px 24px;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(10, 31, 51, 0.28);
  overflow: auto;
}

.authoring-dialog.presentation-editor-dialog { width: min(940px, calc(100vw - 32px)); }

.authoring-dialog.visual-query-dialog { width: min(1180px, calc(100vw - 32px)); }

.authoring-dialog.presentation-editor-dialog .authoring-form,
.authoring-dialog.visual-query-dialog .authoring-form { min-width: 0; }

.authoring-dialog::backdrop {
  background: rgba(10, 31, 51, 0.45);
  backdrop-filter: blur(2px);
}

.authoring-dialog h2 {
  margin: 0;
  font-size: 1.05rem;
}

.authoring-dialog .authoring-form { margin-top: 12px; }

.authoring-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.authoring-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.primary-button {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--teal);
  border-radius: 9px;
  color: white;
  background: var(--teal);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}

.primary-button:hover:not(:disabled) { background: #088a83; }

.primary-button:disabled {
  cursor: not-allowed;
  border-color: #dce5e8;
  color: var(--muted);
  background: #dce5e8;
}

.danger-outline-button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--danger);
  border-radius: 9px;
  color: var(--danger);
  background: var(--panel);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.danger-outline-button:hover:not(:disabled) { color: white; background: var(--danger); }

/* ---- Base para campos e botões sem estilo próprio ---------------------------------------- */
/* Especificidade zero (:where): qualquer regra existente vence; só os controles que não tinham regra nenhuma
   deixam o visual do navegador e passam a seguir o do sistema. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="image"]),
  select, textarea) {
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 0.8rem;
}

:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="image"]),
  select, textarea):focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--teal); }

:where(button:not([class])) {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
  cursor: pointer;
}

:where(button:not([class])):hover:not(:disabled) { border-color: var(--teal); background: var(--teal-soft); }

:where(button:not([class])):disabled { cursor: not-allowed; color: var(--faint); background: var(--canvas); }

/* ---- Configurações: seções em abas ------------------------------------------------------- */
.settings-section-tabs {
  display: flex;
  margin-bottom: 14px;
}

.settings-section-tabs .segmented-control {
  flex-wrap: wrap;
  gap: 2px;
}

.settings-section-hidden {
  display: none !important;
}

/* ---- Demonstração: cadastro, aviso do modo somente leitura, opinião, visitantes --------------- */
.login-signup .login-subtitle { margin-bottom: 14px; }

.login-signup-form { gap: 12px; }

.demo-visitor-banner {
  margin: 0 0 16px;
  padding: 11px 16px;
  border: 1px solid #bfe9e4;
  border-radius: 12px;
  background: var(--teal-soft);
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.5;
}

.demo-visitor-banner strong { color: #087d76; }

.sidebar-feedback-slot:empty { display: none; }

.sidebar-feedback-button {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(57, 208, 195, 0.35);
  border-radius: 12px;
  color: #e9f4f5;
  background: rgba(57, 208, 195, 0.1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sidebar-feedback-button:hover { border-color: var(--teal-bright); background: rgba(57, 208, 195, 0.18); }

.sidebar-feedback-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #04212a;
  background: var(--teal-bright);
  font-size: 0.85rem;
}

.sidebar-feedback-text strong,
.sidebar-feedback-text small { display: block; }

.sidebar-feedback-text strong { font-size: 0.78rem; }

.sidebar-feedback-text small { margin-top: 2px; color: #829dac; font-size: 0.7rem; }

.feedback-stars { display: flex; gap: 4px; }

.feedback-star {
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--line-strong);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.feedback-star.on, .feedback-star:hover { color: var(--amber); }

.feedback-text { resize: vertical; min-height: 120px; }

.demo-visitors-table {
  display: grid;
  margin: 0 18px 18px;
  overflow-x: auto;
  font-size: 0.76rem;
}

.demo-visitors-row {
  display: grid;
  grid-template-columns: 1.2fr 1.1fr 1.6fr 1fr 1.2fr 1fr 1fr 1fr 0.7fr;
  gap: 10px;
  min-width: 760px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}

.demo-visitors-row.head { color: var(--muted); font-weight: 750; }

.demo-visitors-row span { overflow-wrap: anywhere; }

.demo-feedback-list { display: grid; gap: 10px; margin: 0 18px 18px; }

.demo-feedback {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.8rem;
}

.demo-feedback span { color: var(--muted); font-size: 0.72rem; }

.demo-feedback p { margin: 4px 0 0; white-space: pre-wrap; }

.badge-protected {
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--canvas);
  font-size: 0.7rem;
  font-weight: 700;
}

/* ---- Início: pergunte à Sinapse --------------------------------------------------------- */
.home-ask {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 20px 22px;
  border: 1px solid #bfe9e4;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f2fbfa 0%, #ffffff 60%);
  box-shadow: var(--shadow);
}

.home-ask-head { display: flex; gap: 12px; align-items: center; }

.home-ask-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  color: #04212a;
  background: linear-gradient(140deg, var(--teal-bright), var(--teal));
  font-size: 1.05rem;
}

.home-ask-kicker {
  margin: 0;
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-ask h2 { margin: 2px 0 0; font-size: 1.15rem; }

.home-ask-form { display: flex; gap: 10px; align-items: stretch; }

.home-ask-input {
  flex: 1;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 0.86rem;
  resize: vertical;
}

.home-ask-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }

.home-ask-send { padding: 0 20px; font-size: 0.8rem; }

.home-ask-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }

.home-ask-chip {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.home-ask-chip:hover { border-color: var(--teal); background: var(--teal-soft); }

.home-ask-note { color: var(--muted); font-size: 0.72rem; }

@media (max-width: 720px) {
  .home-ask-form { flex-direction: column; }
  .home-ask-send { padding: 11px 20px; }
}

.brand-link { cursor: pointer; border-radius: 12px; }

.brand-link:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 4px; }


/* ---- Celular (até 720px): menu principal em gaveta, Sinapse no estilo dos chats de IA, Início em uma coluna ----
   Tudo o que muda a aparência fica dentro da media query; fora dela, só esconde os elementos que existem para o
   celular (o desktop continua igual). */
.mobile-nav-toggle,
.mobile-nav-backdrop,
.assistant-drawer-backdrop,
.assistant-send-icon,
.assistant-viewer-back,
.assistant-app-menu,
.assistant-icon-button.assistant-viewer-reopen {
  display: none;
}

@media (max-width: 720px) {
  /* Só no html: overflow no body o transformaria num contêiner de rolagem próprio */
  html {
    overflow-x: hidden;
  }

  /* Menu principal: gaveta à esquerda, aberta pelo ☰ do topo */
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(290px, 84vw);
    height: auto;
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
    z-index: 90;
  }

  body.mobile-nav-open .sidebar {
    transform: none;
    visibility: visible;
    transition: transform 0.22s ease;
    box-shadow: 18px 0 40px rgba(4, 18, 30, 0.35);
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 85;
    background: rgba(6, 20, 32, 0.45);
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  /* Dentro da gaveta o menu volta a ter os nomes (no tablet ele vira só ícones) */
  .brand { padding: 2px 8px 22px; }
  .brand > div:last-child { display: block; font-size: 1rem; }
  .brand-mark { width: 42px; height: 42px; }
  .nav-item {
    grid-template-columns: 26px 1fr auto;
    justify-items: stretch;
    min-height: 48px;
    padding: 0 12px;
    font-size: 0.92rem;
  }
  .nav-item .nav-count,
  .nav-item:not(.active) .nav-count { display: inline-block; font-size: 0.7rem; }
  .sidebar-feedback-button { justify-content: flex-start; padding: 12px; }
  .sidebar-feedback-text { display: block; }
  .catalog-date { display: inline; }

  /* Topo: ☰, título e conta numa linha; a busca embaixo */
  .main-content {
    min-height: 100vh;
    padding: 0 12px calc(20px + env(safe-area-inset-bottom));
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    min-height: 0;
    margin: 0 -12px 10px;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    border-bottom: 1px solid var(--line);
    background: rgba(237, 243, 246, 0.94);
    backdrop-filter: blur(10px);
  }

  .mobile-nav-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: var(--panel);
    font-size: 1.15rem;
    line-height: 1;
  }

  .topbar-title {
    flex: 1 1 0;
    min-width: 0;
  }

  .topbar-title .eyebrow {
    margin-bottom: 1px;
    overflow: hidden;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .topbar h1 {
    overflow: hidden;
    font-size: 1.22rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .topbar-actions {
    display: contents;
  }

  .topbar .mode-badge {
    display: inline-flex;
    order: 2;
    height: 38px;
  }

  .topbar .help-button {
    width: 38px;
    justify-content: center;
    padding: 0;
  }

  .topbar #auth-button {
    max-width: 128px;
    padding: 0 11px;
  }

  .auth-button-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .topbar .search-box {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    height: 42px;
  }

  .search-box input { font-size: 16px; }
  .search-box kbd { display: none; }

  .demo-visitor-banner {
    margin-bottom: 12px;
    padding: 9px 12px;
    font-size: 0.74rem;
    line-height: 1.45;
  }

  .loading-state,
  .error-state {
    min-height: calc(100vh - 220px);
  }

  /* ---- Sinapse: conversa em tela cheia ---- */
  body[data-view="assistant"] .topbar,
  body[data-view="assistant"] #demo-visitor-banner {
    display: none;
  }

  body[data-view="assistant"] .main-content {
    padding: 0;
  }

  .assistant-layout,
  .assistant-layout.with-viewer,
  .assistant-layout.sidebar-collapsed,
  .assistant-layout.with-viewer.sidebar-collapsed {
    position: fixed;
    top: var(--app-top, 0px);
    left: 0;
    right: 0;
    z-index: 30;
    height: var(--app-height, 100dvh);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .assistant-layout .assistant-sidebar,
  .assistant-layout.with-viewer .assistant-sidebar {
    position: fixed;
    top: var(--app-top, 0px);
    left: 0;
    z-index: 40;
    display: grid;
    width: min(320px, 86vw);
    height: var(--app-height, 100dvh);
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    background: var(--panel);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .assistant-layout.drawer-open .assistant-sidebar {
    transform: none;
    visibility: visible;
    transition: transform 0.22s ease;
    box-shadow: 18px 0 40px rgba(4, 18, 30, 0.3);
  }

  .assistant-layout.drawer-open .assistant-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(6, 20, 32, 0.4);
  }

  .assistant-sidebar-header .assistant-new { min-height: 44px; }
  .assistant-sidebar-toggle { width: 44px; height: 44px; font-size: 1.2rem; }

  .assistant-conversations {
    max-height: none;
  }

  .assistant-conversation-open { padding: 12px 4px 12px 12px; }
  .assistant-conversation-open strong { font-size: 0.86rem; }
  .assistant-conversation-open span { font-size: 0.72rem; }

  .assistant-conversation-delete {
    width: 40px;
    height: 40px;
    margin: 2px 2px 0 0;
    opacity: 1;
    font-size: 1rem;
  }

  .assistant-sidebar-footer {
    display: grid;
    gap: 8px;
  }

  .assistant-app-menu {
    display: block;
    min-height: 44px;
  }

  .assistant-sidebar-footer .secondary-button { min-height: 44px; }

  .assistant-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--panel);
  }

  .assistant-message { min-width: 0; }

  /* Cabeçalho enxuto: ☰ · título · ▦ · ＋ · ⋯ */
  .assistant-header.phone,
  .assistant-layout.with-viewer .assistant-header.phone {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: calc(6px + env(safe-area-inset-top)) 6px 6px;
  }

  .assistant-header.phone > div:not(.assistant-phone-more-wrap) {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 4px;
  }

  .assistant-header.phone .section-kicker { display: none; }

  .assistant-header.phone h2 {
    display: block;
    margin: 0;
    overflow: hidden;
    font-size: 0.98rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .assistant-header.phone .assistant-header-tools { display: none; }

  .assistant-icon-button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 11px;
    color: var(--ink);
    background: transparent;
    font: inherit;
    font-size: 1.2rem;
    line-height: 1;
  }

  .assistant-icon-button:active,
  .assistant-icon-button:hover { background: var(--canvas); }

  .assistant-layout.with-viewer.viewer-hidden .assistant-icon-button.assistant-viewer-reopen {
    display: grid;
    color: var(--teal);
  }

  .assistant-phone-more-wrap { position: relative; }

  .assistant-phone-more-wrap .assistant-menu {
    top: 46px;
    right: 0;
    min-width: 236px;
    max-width: calc(100vw - 24px);
    z-index: 32;
  }

  .assistant-menu-item {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.86rem;
  }

  /* Mensagens: resposta em texto corrido na largura toda, pergunta em balão à direita */
  .assistant-messages {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 14px 18px;
    gap: 18px;
    background: var(--panel);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .assistant-message.model .assistant-bubble {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .assistant-message.pending .assistant-bubble,
  .assistant-message.error .assistant-bubble {
    padding: 10px 14px;
    border-radius: 14px;
  }

  .assistant-message.pending .assistant-bubble { background: var(--canvas); }

  .assistant-message.error .assistant-bubble { max-width: 100%; border: 1px solid var(--danger); }

  .assistant-message.user .assistant-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 18px 18px 6px 18px;
  }

  .assistant-bubble {
    font-size: 0.94rem;
    line-height: 1.55;
  }

  .assistant-bubble h4,
  .assistant-bubble h5 { font-size: 0.98rem; }

  .assistant-bubble code { font-size: 0.84rem; }

  /* Tabelas, SQL e grades das respostas rolam dentro do próprio bloco, sem alargar a página */
  .assistant-bubble .assistant-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
  }

  .assistant-bubble .assistant-table th,
  .assistant-bubble .assistant-table td {
    white-space: nowrap;
  }

  .assistant-bubble .assistant-table td:not(.numeric) {
    min-width: 120px;
    max-width: 240px;
    white-space: normal;
  }

  .assistant-sql {
    max-height: 260px;
    overflow: auto;
    font-size: 0.76rem;
  }

  .assistant-steps { font-size: 0.78rem; }
  .assistant-steps summary { padding: 6px 0; }

  .assistant-query-chip {
    min-height: 36px;
    font-size: 0.76rem;
  }

  .assistant-intro {
    margin: 12px auto 4px;
  }

  .assistant-intro h3 { font-size: 1.2rem; }
  .assistant-intro p { font-size: 0.86rem; }

  .assistant-suggestions {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .assistant-suggestion {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 0.86rem;
  }

  /* Campo de pergunta fixo no rodapé, numa cápsula com o botão de enviar */
  .assistant-composer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    margin: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
  }

  .assistant-composer textarea {
    max-height: 160px;
    min-height: 46px;
    padding: 11px 14px;
    border-radius: 23px;
    background: var(--canvas);
    font-size: 16px;
    line-height: 1.4;
    resize: none;
  }

  .assistant-composer .execute-button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
  }

  .assistant-send-label { display: none; }
  .assistant-send-icon { display: inline; font-size: 1.25rem; font-weight: 800; line-height: 1; }

  .assistant-hint { display: none; }

  /* Visualizador de consulta e painel da conversa: tela própria sobre o chat */
  .assistant-viewer-divider { display: none; }

  .assistant-viewer-pane {
    position: fixed;
    top: var(--app-top, 0px);
    left: 0;
    right: 0;
    z-index: 45;
    height: var(--app-height, 100dvh);
    overflow: hidden;
  }

  .assistant-layout.viewer-hidden .assistant-viewer-pane { display: none; }

  .assistant-viewer-pane-header {
    align-items: center;
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
  }

  .assistant-viewer-pane-header > div {
    flex: 1 1 0;
    min-width: 0;
  }

  .assistant-viewer-pane-header .section-kicker { font-size: 0.6rem; }

  .assistant-viewer-pane-header h3 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .assistant-viewer-back {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--teal);
    background: var(--panel);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
  }

  .assistant-viewer-close { width: 40px; height: 40px; }

  .assistant-query-viewer {
    overflow-y: auto;
    grid-template-rows: auto minmax(180px, auto) auto auto auto;
    align-content: start;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
  }

  .assistant-viewer-toolbar { flex-wrap: wrap; }
  .assistant-viewer-spacer { display: none; }
  .assistant-viewer-grid { max-width: 100%; overflow: auto; }

  .assistant-dashboard-live,
  .assistant-dashboard-live-body {
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  /* ---- Início ---- */
  .home-header { gap: 8px; }

  .home-controls {
    gap: 8px;
    width: 100%;
  }

  .home-layout-switch button { min-height: 36px; }

  /* A pergunta à Sinapse vem antes da navegação por pastas e das preferências da tela */
  .home-ask {
    order: -1;
    gap: 12px;
    margin: 0;
    padding: 16px 14px;
  }

  .home-ask-mark { width: 34px; height: 34px; }
  .home-ask-kicker { font-size: 0.6rem; letter-spacing: 0.06em; }
  .home-ask h2 { font-size: 1.1rem; }

  .home-ask-form {
    flex-direction: column;
    gap: 8px;
  }

  .home-ask-input {
    min-height: 96px;
    font-size: 16px;
    resize: none;
  }

  .home-ask-send {
    min-height: 46px;
    padding: 11px 20px;
    font-size: 0.9rem;
  }

  /* Sugestões numa faixa que desliza para o lado, dentro do próprio quadro */
  .home-ask-suggestions {
    flex-wrap: nowrap;
    margin: 0 -14px;
    padding: 2px 14px 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .home-ask-suggestions::-webkit-scrollbar { display: none; }

  .home-ask-chip {
    flex: 0 0 min(230px, 70vw);
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    scroll-snap-align: start;
  }

  .home-grid,
  .home-default-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .home-card {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 0;
  }

  .home-card:hover { transform: none; }

  .home-card-kind {
    grid-column: 2;
    grid-row: 1;
    padding: 12px 12px 0;
  }

  .home-card-art {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 76px;
    margin: 10px 0 10px 10px;
  }

  .home-card-art.folder { font-size: 1.8rem; }

  .home-card-art.dashboard { gap: 4px; padding: 6px; }
  .home-tile { height: 26px; }

  .home-card-foot {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    padding: 2px 46px 12px 12px;
  }

  .home-card-foot strong { font-size: 0.9rem; }
  .home-star { width: 40px; height: 40px; right: 4px; bottom: 50%; transform: translateY(50%); }

  .home-row { min-height: 56px; }
  .home-row .home-star { width: 40px; height: 40px; transform: none; }

  .home-section-head { flex-wrap: wrap; }

  .home-default-card { padding: 14px; }
  .home-default-card .execute-button,
  .home-default-card .secondary-button { min-height: 42px; }
}

/* ---- Celular: dashboard aberto. O palco empilha os componentes (ordem de leitura do layout, altura proporcional,
   estreitos dois por linha) e a página rola inteira; no desktop o posicionamento em % continua o mesmo. ---- */
@media (max-width: 720px) {
  .workspace-layout.dashboard-layout,
  .dashboard-layout.catalog-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-layout .catalog-pane {
    height: min(420px, 62vh);
  }

  .dashboard-layout:not(.catalog-collapsed) .dashboard-authoring-bar > span:last-child {
    grid-column: 1 / -1;
  }

  .preview-pane {
    scroll-margin-top: 118px;
  }

  .dashboard-layout.catalog-collapsed .catalog-pane {
    height: auto;
    border-bottom: 0;
  }

  .dashboard-layout.catalog-collapsed .dashboard-authoring-bar {
    height: auto;
    padding: 6px 8px;
    justify-content: flex-start;
  }

  .preview-pane,
  .preview-pane:has(.dashboard-preview-header) {
    min-height: 0;
    overflow: visible;
    display: block;
  }

  .workspace-layout.dashboard-layout,
  #view-dashboards.focus-mode .workspace-layout {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .dashboard-preview-header {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .dashboard-preview-header > :first-child {
    flex: 1 1 100%;
  }

  .dashboard-preview-header > .dashboard-simulation-panel,
  .dashboard-preview-header > .preview-meta {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .dashboard-preview-header > .dashboard-simulation-panel.loading,
  .dashboard-preview-header > .dashboard-simulation-panel.unavailable {
    max-width: none;
  }

  .dashboard-stage-wrap {
    padding: 8px;
    overflow: visible;
  }

  .dashboard-stage.dashboard-stage-fluid:not(.layout-editing) {
    height: auto !important;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    overflow: visible;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .dashboard-stage.dashboard-stage-fluid:not(.layout-editing) > .canvas-widget:not(.component-maximized) {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto;
    width: 100% !important;
    height: clamp(96px, calc(var(--stack-height, 30) * 6.6px), 460px) !important;
  }

  .dashboard-stage.dashboard-stage-fluid:not(.layout-editing) > .canvas-widget[data-stack="half"]:not(.component-maximized) {
    width: calc(50% - 4px) !important;
    height: clamp(96px, calc(var(--stack-height, 30) * 6.6px), 300px) !important;
  }

  .dashboard-stage.dashboard-stage-fluid:not(.layout-editing) > .canvas-widget.filter-widget:not(.component-maximized) {
    height: auto !important;
    min-height: 96px;
  }

  .canvas-widget.component-maximized {
    inset: 8px !important;
  }

  .dashboard-tab-footer {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  /* Seletores segmentados longos (ex.: filtros de Usuários) deslizam dentro de si */
  .segmented-control {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .segmented-control button { flex: 0 0 auto; white-space: nowrap; }

  /* Tabelas administrativas (Usuários, Acessos…): largura mínima legível e rolagem dentro do quadro */
  .permission-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .permission-table-wrap > .permission-table {
    min-width: 640px;
  }

  /* Aberto pelo Início (modo focado), o catálogo volta pelo "Mostrar catálogo" da barra de cima */
  #view-dashboards.focus-mode .dashboard-layout.catalog-collapsed .catalog-pane {
    display: none;
  }

  .canvas-widget .configured-card-grid {
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  }

  .canvas-widget .widget-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Celular: Configurações como nos ajustes do telefone. A lista agrupada de seções é a primeira tela; a seção
   escolhida abre sozinha, com "‹ Configurações" para voltar, e as abas internas deslizam numa faixa. ---- */
.settings-back {
  display: none;
}

@media (max-width: 720px) {
  .settings-layout {
    display: block;
  }

  body[data-settings-pane="index"] .settings-body,
  body[data-settings-pane="section"] .settings-nav {
    display: none;
  }

  .settings-nav {
    position: static;
    display: block;
    padding: 4px 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .settings-nav .settings-group {
    display: block;
    padding: 18px 6px 8px;
    color: #6f8793;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }

  .settings-nav .settings-group:first-child { padding-top: 6px; }
  .settings-nav .settings-group-empty { display: none; }

  .settings-nav button {
    width: 100%;
    min-height: 54px;
    padding: 8px 14px;
    gap: 12px;
    border: 1px solid var(--line);
    border-top-width: 0;
    border-radius: 0;
    color: var(--ink);
    background: var(--panel);
    font-size: 0.9rem;
    font-weight: 650;
  }

  /* Cada grupo forma um cartão: a primeira linha depois do título abre, a última antes do próximo fecha */
  .settings-nav .settings-group + button,
  .settings-nav .settings-group + .hidden + button,
  .settings-nav .settings-group + .hidden + .hidden + button {
    border-top-width: 1px;
    border-radius: 14px 14px 0 0;
  }

  .settings-nav button:has(+ .settings-group),
  .settings-nav button:has(+ .hidden + .settings-group),
  .settings-nav button:last-child {
    border-radius: 0 0 14px 14px;
  }

  .settings-nav .settings-group + button:has(+ .settings-group),
  .settings-nav .settings-group + button:last-child {
    border-radius: 14px;
  }

  .settings-nav button::after {
    content: "›";
    margin-left: auto;
    padding-left: 6px;
    color: var(--faint);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
  }


  .settings-nav .nav-count {
    display: inline-block;
    margin-left: auto;
    color: var(--muted);
    background: var(--canvas);
  }

  .settings-nav button:has(.nav-count)::after { margin-left: 4px; }

  .settings-nav button:active,
  .settings-nav button:hover { background: #f1f7f8; }

  /* Na lista, nenhuma linha fica marcada como aberta */
  .settings-nav button.active {
    color: var(--ink);
    background: var(--panel);
  }

  .settings-nav button.active .settings-icon {
    color: #277182;
    background: #e3eff2;
  }

  .settings-nav .settings-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }

  .settings-back {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: 0 0 10px -4px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    color: var(--teal);
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
  }

  .settings-back:active { background: var(--teal-soft); }

  /* Abas internas de cada seção: faixa deslizante em vez de várias linhas de botões */
  .settings-section-tabs {
    margin: 0 -12px 12px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .settings-section-tabs::-webkit-scrollbar { display: none; }

  .settings-section-tabs .segmented-control {
    flex-wrap: nowrap;
    max-width: none;
    overflow: visible;
  }

  .settings-section-tabs .segmented-control button { min-height: 38px; }

  .settings-body .panel {
    padding: 14px;
  }

  .settings-filters > * { flex: 1 1 140px; }

  /* Cabeçalho de painel: título em cima, ações embaixo, sem empurrar a página para o lado */
  .panel-heading {
    flex-wrap: wrap;
    gap: 10px;
  }

  .panel-heading > :first-child {
    flex: 1 1 100%;
    min-width: 0;
  }

  .auth-row-actions {
    flex-wrap: wrap;
  }

  .component-manager-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Tabela solta dentro do painel (sem contêiner próprio) rola dentro de si */
  .panel > table.permission-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .panel > table.permission-table th,
  .panel > table.permission-table td {
    min-width: 110px;
  }

  .panel > table.permission-table th { white-space: nowrap; }
}