/* IntelliDB Enterprise — UI Components (additions to design-system.css) */

/* Hard-override for the HTML `hidden` attribute. Several layout classes
   (.view-actions, .conn-tab-panel, etc.) set their own `display: flex/grid`
   which beats the UA stylesheet's `[hidden] { display: none }` on
   specificity, causing the element to stay visible after JS toggles
   `el.hidden = true`. This rule forces the intended behaviour everywhere. */
[hidden] { display: none !important; }

/* ═══════════ DASHBOARD — REFERENCE LAYOUT ═══════════ */
.dash-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.03em;
  margin: 0;
}

.dashboard-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.metric-poll-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metric-poll-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 15%, transparent);
}
.metric-poll-status.is-waiting .metric-poll-dot { background: var(--text-3); box-shadow: none; }
.metric-poll-status.is-degraded { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.metric-poll-status.is-degraded .metric-poll-dot { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 15%, transparent); }
.metric-poll-status.is-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.metric-poll-status.is-error .metric-poll-dot { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent); }
.detail-value-code { font-family: var(--font-mono); font-size: 10px; font-weight: 500; }

/* Hero: Health card left + 3 top cards right */
.dash-hero {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.dash-health-card { min-height: 300px; }
.dash-health-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.health-donut-wrap { flex-shrink: 0; }
.health-stats { width: 100%; }
.health-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.health-stat-row:last-child { border-bottom: none; }
.health-stat-label { color: var(--text-3); }
.health-stat-value { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.health-stat-bar { width: 100%; height: 3px; background: var(--border); border-radius: var(--r-full); overflow: hidden; margin-top: 2px; flex-basis: 100%; }
.health-stat-fill { height: 100%; border-radius: var(--r-full); transition: width .5s ease-out; }
.health-stat-fill.success { background: var(--success); }
.health-stat-fill.accent  { background: var(--accent); }
.health-stat-fill.warning { background: var(--warning); }
.health-stat-fill.danger  { background: var(--danger); }

/* Top 3 metric cards */
.dash-top-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.dash-top-card { padding: var(--sp-5) var(--sp-6); }
.dash-top-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.dash-top-card-header .card-title { font-size: 14px; }
.dash-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dash-status-dot.online  { background: var(--success); box-shadow: 0 0 8px var(--success); }
.dash-status-dot.warning { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.dash-status-dot.danger  { background: var(--danger);  box-shadow: 0 0 8px var(--danger); }
.dash-top-card-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dash-top-card-unit { font-size: 18px; font-weight: 500; color: var(--text-3); }
.dash-top-card-sub { font-size: 13px; color: var(--text-3); margin-top: var(--sp-2); }
.dash-top-card-detail { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; }
.detail-label { color: var(--text-3); }
.detail-value { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.detail-value.text-success { color: var(--success); }
.detail-value.text-warning { color: var(--warning); }
.detail-value.text-danger  { color: var(--danger); }

/* Chart time filter */
.chart-card-header { gap: var(--sp-3); flex-wrap: wrap; }
.chart-controls { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.chart-time-filter { display: flex; gap: 2px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; }
.time-filter-btn { padding: 4px 12px; border: none; background: none; border-radius: calc(var(--r-md) - 2px); font-size: 12px; font-weight: 500; color: var(--text-3); cursor: pointer; transition: all var(--t-fast); font-family: var(--font-ui); }
.time-filter-btn.active { background: var(--bg-elevated); color: var(--text-1); box-shadow: var(--shadow-sm); }
.time-filter-btn:not(.active):hover { color: var(--text-2); }
/* Connection/Cluster scope toggle — same shell as the time-filter pill so they
   read as a matched control set. The accent fill on the active state mirrors
   the chart legend so the scope is unambiguous at a glance. */
.chart-scope-toggle { display: flex; gap: 2px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; }
.scope-btn { padding: 4px 12px; border: none; background: none; border-radius: calc(var(--r-md) - 2px); font-size: 12px; font-weight: 500; color: var(--text-3); cursor: pointer; transition: all var(--t-fast); font-family: var(--font-ui); }
.scope-btn.active { background: var(--accent); color: var(--bg-base); box-shadow: var(--shadow-sm); }
.scope-btn:not(.active):not([disabled]):hover { color: var(--text-2); }
.scope-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.chart-buffer-note {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-3);
  background: rgba(211, 158, 87, 0.06);
  border: 1px solid rgba(211, 158, 87, 0.18);
  border-radius: var(--r-sm, 4px);
  line-height: 1.4;
}

/* Cluster Resources sub-section inside the Database Resources card. */
.resource-cluster-section { margin-top: var(--sp-4); }
.resource-section-divider {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.resource-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.resource-section-cluster-name {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.resource-value-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: capitalize;
}
.progress-bar-cluster-nodes { background: var(--accent); }
.progress-bar-cluster-lag.warn { background: var(--warning); }
.progress-bar-cluster-lag.danger { background: var(--danger); }

/* Bottom row */
.dash-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

/* KPI row (used in audit views) */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  text-align: center;
}
.kpi-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin-bottom: var(--sp-1);
}
.kpi-value {
  font-size: 24px; font-weight: 700;
  color: var(--text-1); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-value.danger  { color: var(--danger); }
.kpi-value.warning { color: var(--warning); }
.kpi-value.success { color: var(--success); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }

/* ═══════════ METRIC CARD PROGRESS BAR ═══════════ */
.metric-card-progress {
  height: 3px;
  background: var(--border);
  border-radius: var(--r-full);
  margin-top: var(--sp-2);
  overflow: hidden;
}
.metric-card-progress-bar {
  height: 100%;
  background: var(--success);
  border-radius: var(--r-full);
  transition: width 0.6s ease-out, background-color 0.3s;
}
.metric-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: var(--sp-1);
}

/* ═══════════ VIEW HEADER ═══════════ */
.view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.view-title   { font-size: 22px; font-weight: 700; color: var(--text-1); letter-spacing: -0.02em; margin: 0; }
.view-subtitle{ font-size: 13px; color: var(--text-3); margin: 2px 0 0; }
.view-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; }

/* ═══════════ SIDEBAR ADDITIONS ═══════════ */
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--sp-1) 0; min-height: 0; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(211, 158, 87, 0.2) 0%, rgba(211, 158, 87, 0.08) 100%);
  border-radius: 4px;
}
.sidebar-nav:hover::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(211, 158, 87, 0.4) 0%, rgba(211, 158, 87, 0.2) 100%);
}
.sidebar-nav::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(211, 158, 87, 0.55) 0%, rgba(211, 158, 87, 0.35) 100%);
}
.sidebar-footer-info { display: flex; align-items: center; gap: var(--sp-2); font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.sidebar-version { font-size: 10px; color: var(--text-4); font-family: var(--font-mono); letter-spacing: 0.02em; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--text-4); transition: background var(--t-base), box-shadow var(--t-base); }
.status-dot.online { background: var(--success); box-shadow: 0 0 6px rgba(52,211,153,0.5); }
.sidebar-toggle { margin-right: var(--sp-2); }

/* ═══════════ BENTO GRID ═══════════ */
.bento-grid { display: grid; gap: var(--sp-4); }
.bento-2col { grid-template-columns: repeat(2, 1fr); }
.bento-3col { grid-template-columns: repeat(3, 1fr); }
.card-span-2 { grid-column: span 2; }
.card-span-3 { grid-column: span 3; }

/* ═══════════ STATUS BANNER ═══════════ */
.status-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--success-bg); border: 1px solid var(--success-border);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4); font-size: 13px; color: var(--text-2);
}
.status-banner-icon { flex-shrink: 0; color: var(--success); display: flex; align-items: center; }
.status-banner-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.status-banner-title { font-weight: 600; color: var(--text-1); font-size: 13px; }
.status-banner-description { font-size: 12px; color: var(--text-3); }
.status-banner-time { margin-left: auto; color: var(--text-3); font-size: 12px; font-family: var(--font-mono); flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.5} }
.status-banner.warning { background: var(--warning-bg); border-color: var(--warning-border); }
.status-banner.warning .status-banner-icon { color: var(--warning); }
.status-banner.danger { background: var(--danger-bg); border-color: var(--danger-border); }
.status-banner.danger .status-banner-icon { color: var(--danger); }

/* ═══════════ RESOURCE ITEMS ═══════════ */
.resource-items { display: flex; flex-direction: column; gap: var(--sp-4); }
.resource-item { display: flex; flex-direction: column; gap: 4px; }
.resource-item-head { display: flex; justify-content: space-between; align-items: center; }
.resource-item .resource-label { font-size: 13px; color: var(--text-2); font-weight: 500; }
.resource-item .resource-value { font-size: 13px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.resource-bar { height: 6px; background: var(--border); border-radius: var(--r-full); overflow: hidden; }
.progress-bar { height: 100%; border-radius: var(--r-full); transition: width .5s ease-out; background: var(--accent); }
.progress-bar-success { background: var(--success); }
.progress-bar-warning { background: var(--warning); }
.progress-bar-danger  { background: var(--danger); }

/* ═══════════ AI INSIGHTS ═══════════ */
/* AI Insight Items */
.insight-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.insight-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--border); transition: border-color var(--t-fast);
  cursor: default;
}
.insight-item:hover { border-color: var(--border-mid); }
.insight-item-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.insight-item-icon.success { background: var(--success-bg); color: var(--success); }
.insight-item-icon.warning { background: var(--warning-bg); color: var(--warning); }
.insight-item-icon.danger  { background: var(--danger-bg);  color: var(--danger); }
.insight-item-icon.info    { background: var(--info-bg);    color: var(--info); }
.insight-item-body { flex: 1; min-width: 0; }
.insight-item-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.insight-item-desc  { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.insight-item-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
/* Legacy compat */
.insight-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.insight-icon.success { background: var(--success-bg); color: var(--success); }
.insight-icon.warning { background: var(--warning-bg); color: var(--warning); }
.insight-title { font-size: 14px; font-weight: 600; color: var(--text-1); margin: 0 0 var(--sp-1); }
.insight-description { font-size: 13px; color: var(--text-3); margin: 0 0 var(--sp-2); line-height: 1.5; }
.flex { display: flex; } .items-start { align-items: flex-start; } .gap-3 { gap: var(--sp-3); } .flex-1 { flex: 1; }

/* ═══════════ QUICK ACTIONS ═══════════ */
.quick-actions-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.quick-action-btn {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-2); font-size: 13px;
  font-weight: 500; cursor: pointer; transition: all var(--t-fast);
  text-align: left; font-family: var(--font-ui); width: 100%;
}
.quick-action-btn:hover { background: rgba(211,158,87,0.08); border-color: var(--border-accent); color: var(--accent); }
.quick-action-btn svg { opacity: .5; flex-shrink: 0; }
.quick-action-btn:hover svg { opacity: 1; }

/* ═══════════ EMPTY STATES ═══════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-8);
  color: var(--text-3);
  text-align: center;
}
.empty-state p { font-size: 14px; margin: 0; line-height: 1.6; max-width: 320px; }
.empty-state-sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-4);
  color: var(--text-4);
  text-align: center;
}
.empty-state-sm p { font-size: 13px; margin: 0; line-height: 1.5; }

/* ═══════════ DATA TABLE ═══════════ */
.data-table-wrapper { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead tr { position: sticky; top: 0; z-index: 1; }
.data-table th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg-surface);
}
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.data-table .table-empty { text-align: center; color: var(--text-4); padding: var(--sp-10); font-size: 13px; }
.card-body.p-0 { padding: 0; }

/* ═══════════ TAB GROUP — shadcn-inspired ═══════════ */
.tab-group {
  display: flex;
  gap: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  margin-bottom: var(--sp-5);
  width: fit-content;
  /* `fit-content` alone sizes to the content with NO upper bound, and
     `.main-content` is `overflow-x: hidden`. Measured at 390px on the
     9-tab Security & Audit strip: the group came out 1000px inside a 378px
     parent and six of nine tabs were CLIPPED AWAY -- not merely off-screen,
     unreachable, because nothing could scroll to them. Every tab group in
     the app has the same shape; only the widest one showed it.
     Cap to the parent and let the strip scroll inside itself instead. */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.tab-btn {
  /* Required by the cap above: once the group can no longer grow, flex
     would squash the buttons to fit rather than scroll. */
  flex-shrink: 0;
  padding: 7px 18px;
  border-radius: calc(var(--r-md) - 2px);
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  font-family: var(--font-ui);
  white-space: nowrap;
  position: relative;
}
.tab-btn.active {
  background: var(--bg-elevated);
  color: var(--text-1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.04);
  font-weight: 600;
}
.tab-btn:not(.active):hover { color: var(--text-2); background: rgba(255,255,255,0.02); }
.tab-btn:active { transform: scale(0.97); }

/* ═══════════ FORMS ═══════════ */
.filter-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end; }
.filter-row .form-group { flex: 1; min-width: 140px; }
.form-row { display: flex; gap: var(--sp-4); }
.form-row .form-group { flex: 1; }
.input-select {
  width: 100%; padding: 8px 32px 8px 12px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-1); font-size: 13px;
  font-family: var(--font-ui); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e8fa8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.input-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(211,158,87,0.08); }
.input-select.input-sm { padding: 6px 28px 6px 10px; font-size: 12px; }

/* Text inputs — unified with select styling */
.input, .input-text {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: 13px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.input:focus, .input-text:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(211,158,87,0.08);
}
.input::placeholder, .input-text::placeholder { color: var(--text-4); }
.input.input-sm, .input-text.input-sm { padding: 6px 10px; font-size: 12px; }
.kbd-hint { font-size: 10px; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,0.1); margin-left: var(--sp-2); font-family: var(--font-mono); opacity: .7; }

/* ═══════════ CARD EXTRAS ═══════════ */
.card-header-stats { display: flex; gap: var(--sp-2); align-items: center; }

/* ═══════════ CORTEX CHAT ═══════════ */
.cortex-layout { display: grid; grid-template-columns: 220px 1fr; flex: 1; min-height: 0; background: var(--bg-base); border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; }
.cortex-sidebar { background: var(--bg-surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.cortex-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.cortex-sidebar-title { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.cortex-conversations { flex: 1; overflow-y: auto; padding: var(--sp-2); }
.cortex-conv-item { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: 13px; color: var(--text-2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background var(--t-fast); }
.cortex-conv-item:hover { background: rgba(255,255,255,0.04); }
.cortex-conv-item.active { background: var(--sidebar-active); color: var(--accent); }
.cortex-main { display: flex; flex-direction: column; overflow: hidden; }
.cortex-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border); gap: var(--sp-3); flex-wrap: wrap; flex-shrink: 0; }
.cortex-title-block { display: flex; align-items: center; gap: var(--sp-3); flex: 0 1 auto; min-width: 0; }
.cortex-badge { display: flex; align-items: center; gap: var(--sp-1); font-size: 13px; font-weight: 600; color: var(--accent); }

/* Preview badge — sidebar (Cortex) + in-page header. Same warning hue
   as badge-warning so it visually pairs with the existing UX language
   for "still in development". */
.nav-badge.nav-badge-preview {
  background: rgba(245,158,11,0.13);
  color: #f59e0b;
  border-color: rgba(245,158,11,0.22);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 9px;
}
.cortex-preview-badge {
  margin-left: var(--sp-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgba(245,158,11,0.13);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.22);
  cursor: help;
}
.cortex-model-badge { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 8px; }
.cortex-header-actions { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }
.cortex-messages { flex: 1; overflow-y: auto; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.cortex-welcome { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: var(--sp-4); height: 100%; padding: 12vh var(--sp-8) var(--sp-8); }
.cortex-welcome-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--border-accent); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.cortex-welcome h2 { font-size: 20px; font-weight: 700; color: var(--text-1); margin: 0; }
.cortex-welcome p { font-size: 14px; color: var(--text-3); margin: 0; max-width: 400px; }
.cortex-suggestions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-2); }
.suggestion-chip { padding: 6px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--r-full); font-size: 12px; color: var(--text-2); cursor: pointer; transition: all var(--t-fast); font-family: var(--font-ui); }
.suggestion-chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(211,158,87,0.06); }
.cortex-message { display: flex; gap: var(--sp-3); max-width: 80%; }
.cortex-message.user { flex-direction: row-reverse; align-self: flex-end; }
.cortex-message-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.cortex-message.user .cortex-message-avatar { background: var(--brand-primary); color: var(--accent); }
.cortex-message.assistant .cortex-message-avatar { background: var(--accent-dim); color: var(--accent); }
.cortex-message-content { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); font-size: 13px; line-height: 1.6; color: var(--text-1); }
.cortex-message.user .cortex-message-content { background: rgba(21,50,68,0.5); border-color: var(--border-accent); }

/* Inline banner for Cortex unconfigured / disabled states. Replaces the
   transient red error toast with a clear, persistent in-panel notice and
   a one-click route to the AI provider settings. */
.cortex-banner { background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.35); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); color: var(--text-1); font-size: 13px; line-height: 1.5; }
.cortex-banner--warn .cortex-banner-title { color: var(--warning, #fbbf24); font-weight: 600; font-size: 13px; }
.cortex-banner-msg { color: var(--text-2); }
.cortex-banner-action { align-self: flex-start; margin-top: var(--sp-1); padding: 6px 14px; background: var(--accent-dim); border: 1px solid var(--border-accent); border-radius: var(--r-sm); color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--t-fast); font-family: var(--font-ui); }
.cortex-banner-action:hover { background: rgba(211,158,87,0.18); }
.cortex-banner-reasons { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); padding: var(--sp-1) var(--sp-2); background: rgba(0,0,0,0.15); border-radius: var(--r-sm); }
.cortex-banner-reasons b { color: var(--text-2); font-weight: 600; }

.cortex-input-area { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border); flex-shrink: 0; }
.cortex-input-wrapper { display: flex; gap: var(--sp-2); align-items: flex-end; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-2); transition: border-color var(--t-fast); }
.cortex-input-wrapper:focus-within { border-color: var(--accent); }
.cortex-input { flex: 1; background: none; border: none; outline: none; font-size: 14px; color: var(--text-1); font-family: var(--font-ui); resize: none; max-height: 200px; padding: 6px var(--sp-2); line-height: 1.5; }
.cortex-input::placeholder { color: var(--text-3); }
.cortex-send-btn { width: 36px; height: 36px; background: var(--accent); color: var(--bg-base); border: none; border-radius: var(--r-md); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--t-fast); }
.cortex-send-btn:hover { background: var(--accent-light); transform: scale(1.05); }
.cortex-send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.cortex-disclaimer { font-size: 11px; color: var(--text-4); display: flex; align-items: center; gap: 4px; }
.cortex-provider-btn { gap: 6px !important; font-size: 11px !important; color: var(--text-3) !important; border: 1px solid var(--border) !important; }
.cortex-provider-btn:hover { color: var(--accent) !important; border-color: rgba(211,158,87,0.3) !important; }
/* AI Metrics bar */
.cortex-metrics-bar { display: flex; align-items: center; gap: 12px; padding: 4px 16px; background: rgba(211,158,87,0.04); border-top: 1px solid rgba(211,158,87,0.1); font-size: 10px; flex-wrap: wrap; }
.cx-metric { display: flex; align-items: center; gap: 4px; }
.cx-metric-label { color: var(--text-4); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; font-size: 9px; }
.cx-metric-val { color: var(--accent); font-family: var(--font-mono); font-weight: 500; }
/* Per-message metrics */
.cx-msg-metrics { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-4); font-family: var(--font-mono); opacity: 0.7; }
.cortex-input-footer { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-1) var(--sp-2) 0; }

/* Model Switcher */
.cortex-model-switcher { display: flex; gap: 2px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; overflow-x: auto; min-width: 0; flex: 0 1 auto; scrollbar-width: thin; }
.cortex-model-switcher::-webkit-scrollbar { height: 4px; }
.cortex-model-switcher::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.cortex-model-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: none; background: none;
  border-radius: calc(var(--r-md) - 2px);
  font-size: 12px; font-weight: 500; color: var(--text-3);
  cursor: pointer; transition: all var(--t-fast);
  font-family: var(--font-ui); white-space: nowrap;
}
.cortex-model-btn.active { background: var(--bg-elevated); color: var(--text-1); box-shadow: var(--shadow-sm); }
.cortex-model-btn:not(.active):hover { color: var(--text-2); }
.cortex-model-tag { font-size: 9px; padding: 1px 5px; border-radius: var(--r-full); background: rgba(255,255,255,0.06); color: var(--text-4); font-family: var(--font-mono); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cortex-model-btn.active .cortex-model-tag { background: rgba(211,158,87,0.15); color: var(--accent); }

/* Mode hint */
.cortex-mode-hint {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(211,158,87,0.06); border: 1px solid rgba(211,158,87,0.15);
  border-radius: var(--r-md); font-size: 12px; color: var(--text-2);
  margin-top: var(--sp-2);
}
.cortex-mode-hint-icon { display: flex; align-items: center; color: var(--accent); }

/* Conversation list */
.cortex-conv-item { display: flex; flex-direction: column; gap: 1px; position: relative; }
.cortex-conv-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cortex-conv-meta { font-size: 10px; color: var(--text-4); }
.cortex-conv-category {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  margin-top: var(--sp-1);
}
.cortex-conv-category:first-child { margin-top: 0; }
.cortex-conv-delete {
  display: none;
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.cortex-conv-item:hover .cortex-conv-delete { display: flex; }
.cortex-conv-delete:hover { color: var(--accent); background: rgba(211,158,87,0.1); }

/* Conversation context menu */
.cx-context-menu {
  position: fixed; z-index: 9999;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 140px;
  animation: cxMenuIn 0.12s ease-out;
}
@keyframes cxMenuIn { from { opacity: 0; transform: scale(0.95) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.cx-ctx-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; border: none; background: none;
  border-radius: var(--r-sm); font-size: 12px; color: var(--text-2);
  cursor: pointer; font-family: var(--font-ui); text-align: left;
  transition: background var(--t-fast);
}
.cx-ctx-item:hover { background: rgba(255,255,255,0.06); color: var(--text-1); }
.cx-ctx-item svg { flex-shrink: 0; }
.cx-ctx-danger { color: var(--danger); }
.cx-ctx-danger:hover { background: rgba(248,113,113,0.1); color: var(--danger); }
.cx-ctx-divider { height: 1px; background: var(--border); margin: 3px 6px; }

/* Profile settings link card */
.profile-settings-link { transition: border-color var(--t-fast), background var(--t-fast); }
.profile-settings-link:hover { border-color: rgba(211,158,87,0.25); background: rgba(211,158,87,0.04); }

/* Code blocks in messages */
.cx-code-block {
  margin: var(--sp-3) 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-base);
}
.cx-code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px var(--sp-3);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.cx-code-lang { font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.cx-code-actions { display: flex; gap: 2px; }
.cx-code-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; border: none; background: none;
  border-radius: var(--r-sm); font-size: 11px; color: var(--text-3);
  cursor: pointer; transition: all var(--t-fast); font-family: var(--font-ui);
}
.cx-code-btn:hover { background: rgba(255,255,255,0.06); color: var(--accent); }
.cx-code-pre {
  padding: var(--sp-3) var(--sp-4);
  margin: 0; font-family: var(--font-mono);
  font-size: 12px; line-height: 1.7;
  color: var(--text-1); overflow-x: auto;
  white-space: pre;
}
.cx-inline-code {
  padding: 1px 5px; background: rgba(255,255,255,0.06);
  border-radius: 3px; font-family: var(--font-mono);
  font-size: 0.9em; color: var(--accent);
}

/* Run button highlight */
.cx-exec-btn { color: var(--accent) !important; font-weight: 600; }
.cx-exec-btn:hover { background: rgba(211,158,87,0.12) !important; }

/* Inline run results */
.cx-run-result { border-top: 1px solid var(--border); }
.cx-run-ok { padding: 6px var(--sp-3); font-size: 11px; color: var(--success); font-weight: 500; }
.cx-run-err { padding: 10px var(--sp-3) 12px; font-size: 12px; color: var(--danger); display: flex; flex-direction: column; gap: 10px; background: rgba(248,113,113,0.04); border-top: 1px solid rgba(248,113,113,0.18); min-width: 0; }
.cx-run-err-head { display: flex; align-items: center; gap: 6px; font-weight: 600; font-family: var(--font-ui); font-size: 12px; flex-shrink: 0; }
.cx-run-err-title { color: var(--danger); }
.cx-run-err-msg {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  background: rgba(0,0,0,0.25);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border-left: 2px solid var(--danger);
  max-height: 180px;
  overflow-y: auto;
  min-width: 0;
}
.cx-fix-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all var(--t-fast);
  box-shadow: 0 2px 6px rgba(211,158,87,0.25);
  white-space: nowrap;
  line-height: 1;
  margin-top: 2px;
}
.cx-fix-btn svg { flex-shrink: 0; }
.cx-fix-btn:hover { background: #e2ac67; border-color: #e2ac67; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(211,158,87,0.35); }
.cx-fix-btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(211,158,87,0.2); }
.cx-run-table-wrap { overflow-x: auto; max-height: 300px; overflow-y: auto; }
.cx-run-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: var(--font-mono); }
.cx-run-table th { position: sticky; top: 0; background: var(--bg-surface); padding: 4px 8px; text-align: left; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--border); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.cx-run-table td { padding: 3px 8px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text-2); max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-run-table tr:hover td { background: rgba(255,255,255,0.02); }

/* Markdown elements in Cortex messages */
.cx-h1 { font-size: 20px; font-weight: 700; color: var(--text-1); margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.cx-h2 { font-size: 17px; font-weight: 700; color: var(--text-1); margin: 14px 0 6px; }
.cx-h3 { font-size: 14px; font-weight: 700; color: var(--accent); margin: 12px 0 4px; }
.cx-h4 { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 10px 0 4px; }
.cx-p { margin: 2px 0; line-height: 1.6; }
.cx-list { margin: 4px 0 8px 16px; padding: 0; }
.cx-list li { margin: 2px 0; line-height: 1.5; color: var(--text-2); }
.cx-list li::marker { color: var(--accent); }
.cx-ol { list-style: decimal; }
.cx-hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* Destructive query warning */
.cx-destructive-warn {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3);
  background: var(--danger-bg); border-bottom: 1px solid var(--danger-border);
  font-size: 12px; font-weight: 500; color: var(--danger);
}

/* Typing indicator */
.cx-typing { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
.cx-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: cxTyping 1.4s infinite; }
.cx-typing span:nth-child(2) { animation-delay: .2s; }
.cx-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cxTyping { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }

/* Streaming cursor */
.cx-cursor { display: inline-block; width: 2px; height: 14px; background: var(--accent); margin-left: 2px; vertical-align: text-bottom; animation: cxBlink 0.6s infinite; }
@keyframes cxBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Thinking blocks */
.cx-think-done { padding: 8px 12px; margin-bottom: 8px; border-left: 3px solid var(--accent); background: var(--bg-base); border-radius: var(--r-sm); font-size: 12px; color: var(--text-3); opacity: 0.7; }
.cx-thinking-block { padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--bg-base); border-radius: var(--r-sm); font-size: 12px; color: var(--text-3); }
.cx-thinking-label { font-weight: 600; margin-bottom: 4px; color: var(--accent); }
.cx-thinking-content { white-space: pre-wrap; max-height: 200px; overflow-y: auto; }

/* Message timestamps */
.cx-msg-time { font-size: 10px; color: var(--text-4); opacity: 0; transition: opacity var(--t-fast); align-self: flex-end; margin-top: 2px; }
.cortex-message:hover .cx-msg-time { opacity: 1; }

/* Message action buttons (copy, regenerate) */
.cx-msg-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--t-fast); align-self: flex-start; margin-top: 4px; }
.cortex-message:hover .cx-msg-actions { opacity: 1; }
.cx-msg-action-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--border); background: var(--bg-surface); border-radius: var(--r-sm); color: var(--text-3); cursor: pointer; transition: all var(--t-fast); }
.cx-msg-action-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(211,158,87,0.08); }

/* Highlight.js overrides — transparent background to inherit code block styling */
.cx-code-pre code.hljs { background: transparent !important; padding: 0 !important; }
.hljs { background: transparent !important; }

/* ── Light-mode code-block readability ─────────────────────────────
   github-dark.min.css ships with token colors tuned for a dark surface
   (e.g. red-pink keywords, light-blue strings). Against the light-mode
   surface (--bg-base = #f0f4f8) those tokens collapse to barely-visible
   washes. Map the major hljs token classes onto a high-contrast palette
   borrowed from github-light when [data-theme="light"] is active, and
   pin .cx-code-pre + .cx-code-block to a slightly lighter, more
   readable surface than the page background. The :not()-prefixed
   :root selector below keeps dark-mode untouched. */
[data-theme="light"] .cx-code-block {
  background: #f6f8fa;
  border: 1px solid #d0d7de;
}
[data-theme="light"] .cx-code-block .cx-code-head {
  background: #eaeef2;
  border-bottom: 1px solid #d0d7de;
}
[data-theme="light"] .cx-code-pre {
  color: #24292f;
}
[data-theme="light"] .cx-code-pre .hljs,
[data-theme="light"] .cx-code-block code.hljs {
  color: #24292f !important;
}
/* github-light token palette — keywords / strings / comments / numbers / built-ins. */
[data-theme="light"] .cx-code-pre .hljs-keyword,
[data-theme="light"] .cx-code-pre .hljs-selector-tag,
[data-theme="light"] .cx-code-pre .hljs-literal,
[data-theme="light"] .cx-code-pre .hljs-section,
[data-theme="light"] .cx-code-pre .hljs-link    { color: #cf222e !important; }
[data-theme="light"] .cx-code-pre .hljs-string,
[data-theme="light"] .cx-code-pre .hljs-attr,
[data-theme="light"] .cx-code-pre .hljs-symbol,
[data-theme="light"] .cx-code-pre .hljs-bullet,
[data-theme="light"] .cx-code-pre .hljs-addition { color: #0a3069 !important; }
[data-theme="light"] .cx-code-pre .hljs-comment,
[data-theme="light"] .cx-code-pre .hljs-quote,
[data-theme="light"] .cx-code-pre .hljs-meta    { color: #6e7781 !important; font-style: italic; }
[data-theme="light"] .cx-code-pre .hljs-number,
[data-theme="light"] .cx-code-pre .hljs-built_in,
[data-theme="light"] .cx-code-pre .hljs-builtin-name,
[data-theme="light"] .cx-code-pre .hljs-type,
[data-theme="light"] .cx-code-pre .hljs-params  { color: #0550ae !important; }
[data-theme="light"] .cx-code-pre .hljs-title,
[data-theme="light"] .cx-code-pre .hljs-name,
[data-theme="light"] .cx-code-pre .hljs-class .hljs-title { color: #8250df !important; }
[data-theme="light"] .cx-code-pre .hljs-variable,
[data-theme="light"] .cx-code-pre .hljs-template-variable { color: #953800 !important; }
[data-theme="light"] .cx-code-pre .hljs-deletion { color: #82071e !important; background-color: #ffebe9 !important; }

/* Inline code in chat bubbles also reads as low-contrast in light mode
   because additions.css uses --accent on a translucent white wash. */
[data-theme="light"] .cx-inline-code {
  background: rgba(15, 23, 42, 0.06);
  color: #0550ae;
}

/* ═══════════ AUTO HEAL ═══════════ */
/* Explicit margin-top so the row visibly separates from the
   Maintenance Actions card above. Without it, .card { overflow: hidden }
   on the maintenance card was visually clipping into the stat row at
   higher zoom levels. */
.ah-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); margin-bottom: var(--sp-4); }
.ah-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); text-align: center; }
.ah-stat-card.fixable { border-color: rgba(211,158,87,0.3); background: rgba(211,158,87,0.04); }
.ah-stat-value { font-size: 22px; font-weight: 800; color: var(--text-1); font-variant-numeric: tabular-nums; }
.ah-stat-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; margin-top: 2px; }
.ah-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-4); }
.ah-issues-col { min-width: 0; }
.ah-right-col { min-width: 0; }
.ah-issue-list { display: flex; flex-direction: column; }
.ah-issue-item { padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.ah-issue-item:last-child { border-bottom: none; }
.ah-issue-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.ah-issue-info { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.ah-issue-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.ah-issue-btns { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.ah-issue-desc { font-size: 12px; color: var(--text-3); line-height: 1.5; margin-bottom: var(--sp-1); }
.ah-issue-obj { font-size: 11px; font-family: var(--font-mono); color: var(--text-4); margin-bottom: var(--sp-2); }
.ah-issue-sql-wrap { margin-top: var(--sp-2); }
/* Fix pipeline visualization */
.ah-pipeline { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-top: var(--sp-2); overflow-x: auto; }
.ah-pipe-step { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); min-width: 70px; text-align: center; }
.ah-pipe-step span { font-size: 12px; font-weight: 600; color: var(--text-1); }
.ah-pipe-step small { font-size: 10px; color: var(--text-3); }
.ah-pipe-step.pass { background: var(--success-bg); border: 1px solid var(--success-border); }
.ah-pipe-step.pass span { color: var(--success); }
.ah-pipe-step.fail { background: var(--danger-bg); border: 1px solid var(--danger-border); }
.ah-pipe-step.fail span { color: var(--danger); }
.ah-pipe-step.running { background: rgba(211,158,87,0.08); border: 1px solid rgba(211,158,87,0.2); }
.ah-pipe-step.pending { background: var(--bg-base); border: 1px solid var(--border); }
.ah-pipe-step.skip { background: var(--bg-base); border: 1px dashed var(--border); opacity: .6; }
.ah-pipe-arrow { color: var(--text-4); font-size: 14px; flex-shrink: 0; }
/* Maintenance buttons */
.ah-maint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ah-maint-btn { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-3); background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: all var(--t-fast); color: var(--text-2); font-family: var(--font-ui); }
.ah-maint-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ah-maint-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ah-maint-btn.ah-maint-danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.ah-maint-btn span { font-size: 12px; font-weight: 600; }
.ah-maint-btn small { font-size: 10px; color: var(--text-4); }
.ah-maint-target-row { align-items: center; }
.ah-maint-job { font-size: 12px; }

/* AI recs */
.ah-rec-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: 13px; color: var(--text-2); line-height: 1.5; border-bottom: 1px solid var(--border); }
.ah-rec-item:last-child { border-bottom: none; }
.ah-rec-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
@media (max-width: 1024px) { .ah-layout { grid-template-columns: 1fr; } .ah-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .ah-stats { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════ OMNI SCAN — REDESIGN ═══════════ */
@keyframes spin { to { transform: rotate(360deg); } }

/* Pre-scan state */
.scan-pre { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10vh var(--sp-8) var(--sp-8); gap: var(--sp-4); }
.scan-pre-icon { color: var(--text-4); }
.scan-pre h2 { font-size: 22px; font-weight: 700; color: var(--text-1); margin: 0; }
.scan-pre p { font-size: 14px; color: var(--text-3); max-width: 500px; margin: 0; line-height: 1.6; }
.scan-pre-categories { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.scan-cat-chip { padding: 4px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-full); font-size: 12px; color: var(--text-2); }

/* Progress state */
.scan-progress-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); margin-bottom: var(--sp-4); }
.scan-progress-header { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.scan-progress-title { font-size: 16px; font-weight: 600; color: var(--text-1); }
.scan-progress-step { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.scan-progress-bar-wrap { height: 6px; background: var(--border); border-radius: var(--r-full); overflow: hidden; margin-bottom: var(--sp-3); }
.scan-progress-bar { height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width .3s ease-out; }
.scan-progress-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); font-family: var(--font-mono); }

/* Results summary row */
.scan-summary-row { display: grid; grid-template-columns: auto 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.scan-gauge-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; align-items: center; }
.scan-gauge-meta { text-align: center; margin-top: var(--sp-1); }
.scan-gauge-label { font-size: 16px; font-weight: 700; display: block; }
.scan-gauge-duration { font-size: 11px; color: var(--text-4); font-family: var(--font-mono); }

.scan-severity-card, .scan-categories-card, .scan-actions-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4);
}
/* Actions toolbar — sits between summary row and issues list */
.scan-actions-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--sp-3); padding: 0;
}
.scan-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  border-radius: var(--r-full); color: var(--text-3); font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all var(--t-fast); font-family: var(--font-ui);
  white-space: nowrap; line-height: 1;
}
.scan-action-btn:hover { background: rgba(211,158,87,0.08); border-color: rgba(211,158,87,0.3); color: var(--accent); }
.scan-action-btn svg { flex-shrink: 0; opacity: 0.5; }
.scan-action-btn:hover svg { opacity: 1; }
.scan-action-fix { border-color: rgba(211,158,87,0.25); color: var(--accent); }
.scan-action-fix svg { opacity: 0.8; }
.scan-severity-title { font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-3); }
.scan-sev-row { display: flex; align-items: center; gap: var(--sp-3); padding: 5px 0; font-size: 13px; }
.scan-sev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.scan-sev-row.critical .scan-sev-dot { background: #f87171; box-shadow: 0 0 6px #f87171; }
.scan-sev-row.high .scan-sev-dot     { background: #fb923c; }
.scan-sev-row.medium .scan-sev-dot   { background: #fbbf24; }
.scan-sev-row.low .scan-sev-dot      { background: #60a5fa; }
.scan-sev-row.fixable .scan-sev-dot  { background: var(--accent); }
.scan-sev-name { flex: 1; color: var(--text-2); }
.scan-sev-count { font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
.scan-sev-divider { height: 1px; background: var(--border); margin: var(--sp-2) 0; }

/* Category bars */
.scan-cat-bar-row { display: flex; align-items: center; gap: var(--sp-3); padding: 4px 0; }
.scan-cat-bar-label { font-size: 12px; color: var(--text-3); width: 90px; text-transform: capitalize; flex-shrink: 0; }
.scan-cat-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: var(--r-full); overflow: hidden; }
.scan-cat-bar-fill { height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width .5s ease-out; }
.scan-cat-bar-count { font-size: 12px; font-weight: 700; color: var(--text-1); width: 24px; text-align: right; font-variant-numeric: tabular-nums; }

/* Issue filters */
.scan-issue-filters { display: flex; gap: 2px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; }
.scan-filter-btn { padding: 4px 12px; border: none; background: none; border-radius: calc(var(--r-md) - 2px); font-size: 12px; color: var(--text-3); cursor: pointer; transition: all var(--t-fast); font-family: var(--font-ui); }
.scan-filter-btn.active { background: var(--bg-elevated); color: var(--text-1); box-shadow: var(--shadow-sm); }

/* Issue list */
.scan-issues-list { display: flex; flex-direction: column; }
.scan-issue-item { display: flex; gap: var(--sp-4); padding: var(--sp-4); border-bottom: 1px solid var(--border); transition: background var(--t-fast); }
.scan-issue-item:last-child { border-bottom: none; }
.scan-issue-item:hover { background: rgba(255,255,255,0.015); }
.scan-issue-item.critical { border-left: 3px solid #f87171; }
.scan-issue-item.high { border-left: 3px solid #fb923c; }
.scan-issue-item.medium { border-left: 3px solid #fbbf24; }
.scan-issue-sev { flex-shrink: 0; padding-top: 2px; }
.scan-issue-body { flex: 1; min-width: 0; }
.scan-issue-header { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-1); }
.scan-issue-code { font-size: 11px; font-family: var(--font-mono); color: var(--text-4); background: var(--bg-surface); padding: 1px 6px; border-radius: var(--r-sm); }
.scan-issue-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
.scan-issue-desc { font-size: 13px; color: var(--text-3); line-height: 1.5; margin-bottom: var(--sp-2); }
.scan-issue-affected { font-size: 12px; color: var(--text-4); font-family: var(--font-mono); display: flex; align-items: center; gap: 4px; margin-bottom: var(--sp-1); }
.scan-issue-rec { font-size: 12px; color: var(--accent); display: flex; align-items: flex-start; gap: 4px; margin-bottom: var(--sp-2); line-height: 1.4; }
.scan-issue-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.scan-fix-sql { font-size: 12px; font-family: var(--font-mono); background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); margin-top: var(--sp-2); overflow-x: auto; color: var(--text-2); white-space: pre; }

@media (max-width: 1100px) { .scan-summary-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .scan-summary-row { grid-template-columns: 1fr; } .scan-actions-toolbar { flex-wrap: wrap; } }

/* ======= SQL EDITOR — FULL REDESIGN ======= */
.view-container.view-fullheight { display: none; padding: 0 !important; }
.view-container.view-fullheight.active { display: flex; flex-direction: column; position: relative; }
.sqled { display: grid; grid-template-columns: 200px 1fr 200px; flex: 1; overflow: hidden; background: var(--bg-base); }
.sqled-schema { background: var(--bg-surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.sqled-schema-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3); border-bottom: 1px solid var(--border); }
.sqled-schema-title { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.sqled-schema-search { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); color: var(--text-4); }
.sqled-search-input { flex: 1; background: none; border: none; outline: none; font-size: 12px; color: var(--text-2); font-family: var(--font-ui); }
.sqled-search-input::placeholder { color: var(--text-4); }
.schema-tree { flex: 1; overflow-y: auto; padding: var(--sp-1) var(--sp-2); font-size: 12px; }
.schema-tree::-webkit-scrollbar { width: 3px; }
.schema-tree::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.schema-loading { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); color: var(--text-3); font-size: 12px; }
.schema-table-item { display: flex; align-items: center; gap: var(--sp-2); padding: 4px var(--sp-2); border-radius: var(--r-sm); cursor: pointer; color: var(--text-2); transition: background var(--t-fast); font-size: 12px; }
.schema-table-item:hover { background: rgba(255,255,255,0.04); color: var(--text-1); }
.sqled-center { display: flex; flex-direction: column; overflow: hidden; }
.sqled-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); background: var(--bg-surface); gap: var(--sp-2); flex-wrap: wrap; }
/* flex-wrap on the two children too, not just the shared .sqled-toolbar
   parent -- wrap on the parent alone only moves a whole CHILD (toolbar-l
   or toolbar-r) to a new line; it does nothing when a single child's own
   content (six buttons + the connection picker) is wider than the
   viewport by itself, which is exactly the 375px case: toolbar-l's
   content measured 670px against a 300px available width and the excess
   was silently clipped, not reachable by any scroll. Task 9 added the
   Cancel and Validate buttons, which is what pushed this over the edge.
   No effect at desktop widths, where the row already fits on one line. */
.sqled-toolbar-l { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; row-gap: var(--sp-1); }
.sqled-toolbar-r { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; row-gap: var(--sp-1); }
.sqled-sep { width: 1px; height: 20px; background: var(--border); margin: 0 var(--sp-1); }
.sqled-status-group { display: flex; align-items: center; gap: 5px; }
.sqled-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.sqled-status-dot.is-running { background: var(--warning); }
.sqled-status-dot.is-error { background: var(--danger); }
.sqled-status-text { font-size: 12px; color: var(--text-3); font-family: var(--font-mono); }
.sqled-meta { font-size: 11px; color: var(--text-4); font-family: var(--font-mono); }
.sqled-editor-wrap { flex: 1 1 40%; min-height: 180px; border-bottom: 1px solid var(--border); overflow: hidden; }
.sqled-textarea { width: 100%; height: 100%; background: var(--bg-base); border: none; outline: none; resize: none; font-family: var(--font-mono); font-size: 13px; line-height: 1.8; color: var(--text-1); padding: var(--sp-4) var(--sp-5); box-sizing: border-box; tab-size: 2; }
.sqled-textarea::placeholder { color: var(--text-4); }
.sqled-results { flex: 1 1 40%; display: flex; flex-direction: column; overflow: hidden; min-height: 120px; }
.sqled-results-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.sqled-results-tabs { display: flex; gap: 1px; }
.sql-results-tab { display: flex; align-items: center; gap: 5px; padding: 5px 12px; border: none; background: none; font-size: 12px; color: var(--text-3); cursor: pointer; border-radius: var(--r-sm); font-family: var(--font-ui); transition: all var(--t-fast); }
.sql-results-tab.active { background: var(--bg-elevated); color: var(--text-1); }
.sql-results-tab:not(.active):hover { color: var(--text-2); }
.sqled-results-info { display: flex; gap: var(--sp-3); align-items: center; font-size: 12px; color: var(--text-3); }
.sqled-results-body { flex: 1; overflow: auto; }
.sqled-results-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); height: 100%; color: var(--text-4); text-align: center; padding: var(--sp-8); }
.sqled-results-empty p { font-size: 13px; margin: 0; color: var(--text-3); }
.sqled-results-hint { font-size: 11px; color: var(--text-4); font-family: var(--font-mono); }
.sqled-tools { background: var(--bg-surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.sqled-tools-head { padding: var(--sp-3); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-2); }
.sqled-tools-title { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.sqled-template-search { width: 100%; padding: 5px 8px; font-size: 11px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-2); font-family: var(--font-ui); outline: none; transition: border-color var(--t-fast); }
.sqled-template-search::placeholder { color: var(--text-4); }
.sqled-template-search:focus { border-color: var(--accent); }
.sqled-tools-body { flex: 1; overflow-y: auto; padding: var(--sp-3); }
.sqled-tool-section { margin-bottom: var(--sp-4); }
.sqled-tool-label { font-size: 10px; font-weight: 600; color: var(--text-4); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--sp-2); }
/* Categorized template groups */
.sqled-template-group { margin-bottom: var(--sp-2); }
.sqled-template-cat { display: flex; align-items: center; gap: 5px; width: 100%; padding: 4px 6px; background: none; border: none; font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; border-radius: var(--r-sm); font-family: var(--font-ui); transition: all var(--t-fast); }
.sqled-template-cat:hover { color: var(--accent); background: rgba(255,255,255,0.03); }
.sqled-template-chevron { transition: transform 200ms ease; flex-shrink: 0; color: var(--text-4); }
.sqled-template-group.collapsed .sqled-template-chevron { transform: rotate(-90deg); }
.sqled-template-group.collapsed .sqled-template-items { display: none; }
.sqled-template-items { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 4px; }
/* Template buttons */
.sqled-template-btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 6px 8px; background: none; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 12px; color: var(--text-2); text-align: left; cursor: pointer; font-family: var(--font-ui); transition: all var(--t-fast); }
.sqled-template-btn:hover { background: rgba(211,158,87,0.06); color: var(--accent); border-color: rgba(211,158,87,0.15); transform: translateX(2px); }
.sqled-template-icon { flex-shrink: 0; color: var(--text-4); transition: color var(--t-fast); }
.sqled-template-btn:hover .sqled-template-icon { color: var(--accent); }
.sqled-template-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqled-cortex-btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 6px var(--sp-2); margin-bottom: 3px; background: rgba(211,158,87,0.06); border: 1px solid rgba(211,158,87,0.15); border-radius: var(--r-sm); font-size: 12px; color: var(--accent); cursor: pointer; font-family: var(--font-ui); transition: all var(--t-fast); }
.sqled-cortex-btn:hover { background: rgba(211,158,87,0.12); border-color: rgba(211,158,87,0.3); }
.sqled-saved-list { display: flex; flex-direction: column; gap: 2px; }
.sqled-saved-empty { font-size: 12px; color: var(--text-4); padding: var(--sp-2) 0; }
.query-error-cortex { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding: 8px 14px; background: rgba(211,158,87,0.1); border: 1px solid rgba(211,158,87,0.25); border-radius: var(--r-md); color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--t-fast); font-family: var(--font-ui); width: fit-content; }
.query-error-cortex:hover { background: rgba(211,158,87,0.2); border-color: rgba(211,158,87,0.4); }
@media (max-width: 1100px) { .sqled { grid-template-columns: 180px 1fr; } .sqled-tools { display: none; } }
@media (max-width: 768px) { .sqled { grid-template-columns: 1fr; } .sqled-schema { display: none; } .sqled-tools { display: none; } }

/* ═══════════ SCHEMA EXPLORER — ENHANCED TREE ═══════════ */
.schema-tabs { display: flex; gap: 2px; flex: 1; }
.schema-tab { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: none; background: none; font-size: 11px; font-weight: 600; color: var(--text-3); cursor: pointer; border-radius: var(--r-sm); font-family: var(--font-ui); transition: all var(--t-fast); text-transform: uppercase; letter-spacing: 0.04em; }
.schema-tab:hover { color: var(--text-1); background: rgba(255,255,255,0.04); }
.schema-tab.active { color: var(--accent); background: rgba(211,158,87,0.1); }
.sqled-schema-head { gap: var(--sp-2); }
.schema-stats-banner { display: flex; align-items: center; gap: 0; padding: 4px 12px; font-size: 10px; color: var(--text-4); border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
.schema-stats-banner:empty { display: none; }
.schema-stats-sep { margin: 0 6px; opacity: 0.4; }
.schema-empty { padding: 24px 12px; text-align: center; color: var(--text-4); font-size: 12px; }
.schema-node { margin-bottom: 2px; }
.schema-folder { display: flex; align-items: center; gap: 5px; padding: 5px 8px; cursor: pointer; border-radius: var(--r-sm); color: var(--text-2); transition: background var(--t-fast); user-select: none; }
.schema-folder:hover { background: rgba(255,255,255,0.04); }
.schema-folder-name { font-size: 12px; font-weight: 600; flex: 1; }
.schema-count-badge { font-size: 9px; font-weight: 600; color: var(--text-4); background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 8px; font-family: var(--font-mono); }
.schema-chevron { transition: transform 200ms ease; flex-shrink: 0; color: var(--text-4); }
.schema-chevron.open { transform: rotate(90deg); }
.schema-children { display: none; padding-left: 6px; }
.schema-children.expanded { display: block; }
.schema-table-wrap { margin: 1px 0; }
.schema-table-row { display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 4px; cursor: pointer; border-radius: var(--r-sm); color: var(--text-2); transition: background var(--t-fast); font-size: 12px; user-select: none; }
.schema-table-row:hover { background: rgba(255,255,255,0.04); color: var(--text-1); }
.schema-table-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.schema-row-badge { font-size: 9px; color: var(--text-4); font-family: var(--font-mono); background: rgba(255,255,255,0.04); padding: 0 4px; border-radius: 4px; }
.schema-chevron-sm { color: var(--text-4); transition: transform 200ms ease; flex-shrink: 0; }
.schema-table-wrap.expanded .schema-chevron-sm { transform: rotate(90deg); }
.schema-col-list { display: none; padding: 2px 0 4px 18px; }
.schema-table-wrap.expanded .schema-col-list { display: block; }
.schema-col-item { display: flex; align-items: center; gap: 5px; padding: 2px 6px; cursor: pointer; border-radius: var(--r-sm); transition: background var(--t-fast); }
.schema-col-item:hover { background: rgba(211,158,87,0.08); }
.schema-col-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.schema-col-icon { flex-shrink: 0; }
.schema-col-name { font-size: 11px; color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schema-col-type { font-size: 9.5px; font-family: var(--font-mono); opacity: 0.7; white-space: nowrap; }
.schema-col-nullable { opacity: 0.5; margin-left: 1px; }
.schema-col-actions { display: flex; gap: 4px; padding: 4px 6px 2px; }
.schema-action-btn { padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: none; color: var(--text-3); font-size: 10px; cursor: pointer; font-family: var(--font-mono); transition: all var(--t-fast); }
.schema-action-btn:hover { background: rgba(211,158,87,0.1); border-color: rgba(211,158,87,0.3); color: var(--accent); }

/* A failed schema load is visually distinct from an empty one. Rendering
   the empty state on a failure tells the operator their database has no
   tables — a claim about their data made from a network error. */
.schema-tree-error {
  color: var(--danger);
}
.schema-tree-error-reason {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
  word-break: break-word;
}
.schema-stats-warn {
  color: var(--warning);
}

@media (prefers-reduced-motion: reduce) {
  .schema-chevron, .schema-chevron-sm { transition: none; }
}

/* ═══════════ CONNECTION CARDS ═══════════ */
.conn-card.connected { border-left: 3px solid var(--success); }
.conn-card.current   { border-color: var(--accent); background: rgba(211,158,87,0.03); }

/* Header row (clickable) */
.conn-card-icon.online { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-sm { font-size: 10px; padding: 1px 6px; }
.conn-expand-btn { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 4px; display: flex; align-items: center; transition: color var(--t-fast); }
.conn-expand-btn:hover { color: var(--text-1); }
.conn-expand-btn svg { transition: transform var(--t-base); }

/* Expandable details panel */
.conn-details.open {
  /* Large enough to fit metrics grid + feature-readiness panel (9 features + 5 extension cards). */
  max-height: 1600px;
  border-top-width: 1px;
  padding: var(--sp-5);
}

/* Metrics grid inside panel */

/* Footer row */

/* ─────────── Connection Feature Readiness ─────────── */
.conn-readiness {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.conn-readiness-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
}
.conn-readiness-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
}
.conn-readiness-loading,
.conn-readiness-error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-3);
  font-size: 12px;
}
.conn-readiness-error { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }
.conn-readiness-error span { flex: 1; }

.conn-readiness-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}
.conn-readiness-server {
  font-size: 11px;
  color: var(--text-4);
  font-family: var(--font-mono);
  margin-left: auto;
  padding-right: var(--sp-2);
}

.conn-readiness-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  margin: var(--sp-3) 0 var(--sp-2);
}

.conn-readiness-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.conn-readiness-feature {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.conn-readiness-feature-name { flex-shrink: 0; color: var(--text-2); font-weight: 500; min-width: 140px; }
.conn-readiness-feature-missing { color: var(--text-4); font-size: 11px; font-family: var(--font-mono); }
.conn-readiness-feature-note { color: var(--text-4); cursor: help; margin-left: auto; }

.conn-readiness-exts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-2);
}
.conn-readiness-ext {
  padding: var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.conn-readiness-ext-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
/* Heading is now the human-readable display name (e.g. "Vector Search
   (pgvector)"). The raw extname is shown as a small mono subtitle
   below so engineers can still match it to pg_extension. */
.conn-readiness-ext-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
}
.conn-readiness-ext-raw {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-4);
  background: none;
  padding: 0;
  margin-top: 2px;
}
.conn-readiness-ext-purpose { font-size: 11px; color: var(--text-3); line-height: 1.4; margin-top: 4px; }
.conn-readiness-ext-reason { font-size: 11px; color: var(--text-4); line-height: 1.4; font-style: italic; }

@media (max-width: 1200px) { .conn-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) {
  .conn-card-header-row { grid-template-columns: 1fr auto; row-gap: var(--sp-3); }
  .conn-card-stats { grid-column: 1 / -1; justify-content: flex-start; gap: var(--sp-5); flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .conn-card-header-row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .conn-card-stats { justify-content: flex-start; gap: var(--sp-4); }
  .conn-card-actions { justify-content: flex-end; flex-wrap: wrap; }
  .conn-metrics-grid { grid-template-columns: 1fr; }
  .conn-details-footer { flex-direction: column; align-items: flex-start; }
  .conn-details-actions { flex-wrap: wrap; }
}

/* ═══════════ SQL RESULTS TABLE ═══════════ */
.results-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); }
.results-table th { padding: var(--sp-2) var(--sp-3); text-align: left; font-size: 11px; font-weight: 600; color: var(--text-3); border-bottom: 1px solid var(--border); background: var(--bg-surface); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.results-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); color: var(--text-2); white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.results-table tr:hover td { background: rgba(255,255,255,0.015); }
.null-value { color: var(--text-4); font-style: italic; }
.empty-results { display: flex; flex-direction: column; align-items: center; padding: var(--sp-10); color: var(--text-3); text-align: center; gap: var(--sp-2); }
.empty-results-icon { width: 32px; height: 32px; }
.empty-results-title { font-size: 14px; font-weight: 600; }
.empty-results-description { font-size: 13px; }
.query-error { padding: var(--sp-4); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--r-md); color: var(--danger); margin: var(--sp-2); }

/* ═══════════ MISC ═══════════ */
.spinner-sm { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
.spinner    { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.code-editor {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-1);
  outline: none;
  resize: vertical;
  line-height: 1.7;
  box-sizing: border-box;
  min-height: 120px;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.code-editor:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(211,158,87,0.08), 0 2px 8px rgba(0,0,0,0.1);
}
.code-editor::placeholder { color: var(--text-4); }
.code-block { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); font-family: var(--font-mono); font-size: 12px; color: var(--text-2); overflow: auto; white-space: pre; margin: 0; max-height: 300px; }
.icon-btn { width: 28px; height: 28px; background: none; border: 1px solid var(--border); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-3); transition: all var(--t-fast); }
.icon-btn:hover { color: var(--text-1); border-color: var(--accent); }
.toggle-switch { display: flex; align-items: center; cursor: pointer; }
.toggle-switch input { display: none; }
.toggle-slider { width: 36px; height: 20px; background: var(--border); border-radius: var(--r-full); position: relative; transition: background var(--t-fast); }
.toggle-slider::after { content:''; width: 14px; height: 14px; background: var(--text-3); border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: transform var(--t-fast), background var(--t-fast); }
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::after { transform: translateX(16px); background: #fff; }

/* ═══════════ SETTINGS & PROFILE VIEWS ═══════════ */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 1024px) {
  .settings-grid { grid-template-columns: 1fr; }
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-info { flex: 1; min-width: 0; }
.settings-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-1); }
.settings-desc { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.settings-row-action { flex-shrink: 0; display: flex; align-items: center; }
.settings-value { font-size: 12px; color: var(--text-3); font-family: var(--font-mono); background: rgba(255,255,255,0.03); padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); }

.profile-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.profile-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-light));
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.profile-name-lg {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
}

.badge-success-subtle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: rgba(52,211,153,0.1);
  color: var(--success);
  border: 1px solid rgba(52,211,153,0.15);
}
.badge-success-subtle::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px rgba(52,211,153,0.4);
}

/* ═══════════ SHARED MODULE ANIMATIONS ═══════════ */
@keyframes moduleReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kpiPulseIn {
  0%   { opacity: 0; transform: scale(0.95); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .module-reveal, .kpi-animate, [class*="tuner-"] { animation: none !important; }
}

/* Staggered reveal for tab panel contents */
.module-reveal { animation: moduleReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.module-reveal:nth-child(2) { animation-delay: 60ms; }
.module-reveal:nth-child(3) { animation-delay: 120ms; }
.module-reveal:nth-child(4) { animation-delay: 180ms; }

/* ═══════════ SHARED KPI CARDS ═══════════ */
.tuner-kpi-row {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.tuner-kpi-row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px)  { .tuner-kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* Reports' KPI rows are 5-wide (health/performance) or 4-wide
   (security/capacity) — .tuner-kpi-row above is hardcoded to 4 columns so
   it can't be reused for the 5-card rows without squashing the 5th card
   onto an orphan second row. These share .tuner-kpi's own card styling
   (background/border/padding) but own their column-count + breakpoints. */
.reports-kpi-row {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.reports-kpi-row-5 { grid-template-columns: repeat(5, 1fr); }
.reports-kpi-row-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .reports-kpi-row-5, .reports-kpi-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .reports-kpi-row-5, .reports-kpi-row-4 { grid-template-columns: 1fr; }
}

.tuner-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-fast);
  animation: kpiPulseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.tuner-kpi:nth-child(2) { animation-delay: 60ms; }
.tuner-kpi:nth-child(3) { animation-delay: 120ms; }
.tuner-kpi:nth-child(4) { animation-delay: 180ms; }
.tuner-kpi:nth-child(5) { animation-delay: 240ms; }

.tuner-kpi:hover {
  border-color: var(--border-mid);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}
/* Subtle top-edge accent line */
.tuner-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(211,158,87,0.3) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--t-base);
}
.tuner-kpi:hover::before { opacity: 1; }

.tuner-kpi-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.tuner-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-1);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* The qualifier under a Reports KPI value — today the capacity projections'
   confidence band, which may never be rendered apart from the figure it
   qualifies. `color` is set inline per card because it carries meaning (green
   only for a `high` band; gray for anything untrustworthy) and cannot be a
   fixed rule here. `overflow-wrap` because .tuner-kpi is `overflow: hidden`
   and the row collapses to ONE column below 420px: without it a long band
   label is clipped rather than wrapped, which is a caveat silently deleted at
   the narrowest viewport. */
.reports-kpi-sub {
  font-size: 10px;
  margin-top: 3px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ═══════════ ENHANCED TIME RANGE + TAB CONTROLS ═══════════ */
.time-range-btns {
  display: flex;
  gap: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px;
}
.time-range-btn {
  padding: 5px 14px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  border-radius: calc(var(--r-sm) - 2px);
  font-family: var(--font-ui);
  transition: all var(--t-fast) var(--ease-out);
  position: relative;
}
.time-range-btn.active {
  background: var(--bg-elevated);
  color: var(--text-1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
}
.time-range-btn:not(.active):hover { color: var(--text-2); background: rgba(255,255,255,0.02); }

/* ═══════════ QUERY IQ ═══════════ */
/* Suggestion Cards — premium with depth */
.tuner-suggestion-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-left: 3px solid var(--text-4);
  transition: all var(--t-base) var(--ease-out);
  position: relative;
}
.tuner-suggestion-card:hover {
  border-color: var(--border-mid);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.tuner-suggestion-card.critical { border-left-color: var(--danger); }
.tuner-suggestion-card.high     { border-left-color: var(--warning); }
.tuner-suggestion-card.medium   { border-left-color: var(--accent); }
.tuner-suggestion-card.low      { border-left-color: var(--success); }

.tuner-suggestion-header { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }

.tuner-action-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.tuner-action-badge.index      { background: rgba(96,165,250,0.1);  color: var(--info);    border-color: rgba(96,165,250,0.2); }
.tuner-action-badge.rewrite    { background: rgba(251,191,36,0.1);  color: var(--warning); border-color: rgba(251,191,36,0.2); }
.tuner-action-badge.config     { background: rgba(52,211,153,0.1);  color: var(--success); border-color: rgba(52,211,153,0.2); }
.tuner-action-badge.maintenance{ background: rgba(211,158,87,0.1);  color: var(--accent);  border-color: rgba(211,158,87,0.2); }

.tuner-risk-pill {
  font-size: 10px; font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-full);
  margin-left: auto;
  border: 1px solid transparent;
}
.tuner-risk-pill.low    { background: rgba(52,211,153,0.08);  color: var(--success); border-color: rgba(52,211,153,0.15); }
.tuner-risk-pill.medium { background: rgba(251,191,36,0.08);  color: var(--warning); border-color: rgba(251,191,36,0.15); }
.tuner-risk-pill.high   { background: rgba(248,113,113,0.08); color: var(--danger);  border-color: rgba(248,113,113,0.15); }

.tuner-suggestion-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: var(--sp-3); }

.tuner-suggestion-sql {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.6;
}

.tuner-suggestion-footer { display: flex; align-items: center; justify-content: space-between; }
.tuner-improvement { font-size: 12px; color: var(--success); font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* Before/After Code Comparison */
.tuner-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 768px) { .tuner-before-after { grid-template-columns: 1fr; } }
.tuner-code-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base);
}
.tuner-code-panel:hover { border-color: var(--border-mid); }
.tuner-code-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-2);
}
.tuner-code-body {
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.7;
  max-height: 220px;
  overflow-y: auto;
}

/* Execution Plan Tree — refined with depth cues */
.plan-tree { padding: var(--sp-3) 0; }
.plan-node { margin-left: 24px; position: relative; }
.plan-node::before {
  content: '';
  position: absolute;
  left: -16px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--border-mid), var(--border));
}
.plan-node:last-child::before { bottom: 50%; }
.plan-node::after {
  content: '';
  position: absolute;
  left: -16px; top: 16px;
  width: 12px; height: 1px;
  background: var(--border-mid);
}
.plan-node-root { margin-left: 0; }
.plan-node-root::before, .plan-node-root::after { display: none; }

.plan-node-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  margin: 3px 0;
  border-radius: var(--r-sm);
  font-size: 12px;
  cursor: default;
  transition: all var(--t-fast) var(--ease-out);
  border: 1px solid transparent;
}
.plan-node-header:hover {
  background: rgba(255,255,255,0.03);
  border-color: var(--border);
}
.plan-node-type { font-weight: 600; color: var(--text-1); white-space: nowrap; }
.plan-node-cost { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.plan-node-rows { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }
.plan-node-bar {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(211,158,87,0.4));
  min-width: 3px;
  max-width: 120px;
  transition: width var(--t-base);
}
/* Node type color coding */
.plan-node-seq-scan .plan-node-header   { background: rgba(248,113,113,0.06); border-left: 2px solid var(--danger); }
.plan-node-index-scan .plan-node-header { background: rgba(52,211,153,0.06);  border-left: 2px solid var(--success); }
.plan-node-hash-join .plan-node-header  { background: rgba(96,165,250,0.06);  border-left: 2px solid var(--info); }
.plan-node-sort .plan-node-header       { background: rgba(251,191,36,0.06);  border-left: 2px solid var(--warning); }

.plan-kpi-row {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  background: var(--bg-surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.plan-kpi { font-size: 12px; color: var(--text-3); }
.plan-kpi strong { color: var(--text-1); font-family: var(--font-mono); font-size: 13px; }

.plan-toggle-row { display: flex; gap: 2px; }

/* ═══════════ SIDEBAR COLLAPSE ═══════════ */
.sidebar.collapsed {
  width: 56px;
  min-width: 56px;
}
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-item > span:not(.nav-icon),
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .sidebar-footer-info span:not(.status-dot),
.sidebar.collapsed .sidebar-version {
  display: none;
}
.sidebar.collapsed .sidebar-header { padding: var(--sp-3) 0; justify-content: center; }
.sidebar.collapsed .brand { justify-content: center; }
.sidebar.collapsed .nav-menu { padding: 0 var(--sp-2); }
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 10px;
  margin: 0 0 1px;
}
.sidebar.collapsed .nav-icon { opacity: 0.7; }
.sidebar.collapsed .nav-item.active .nav-icon { opacity: 1; }
.sidebar.collapsed .sidebar-footer {
  justify-content: center;
  padding: var(--sp-3) var(--sp-2);
}
.sidebar.collapsed .sidebar-footer-info { justify-content: center; max-width: none; }
.sidebar.collapsed .nav-section-title::after,
.sidebar.collapsed .nav-section-label::after { display: none; }
.sidebar.collapsed .nav-section { padding: var(--sp-1) 0 0; }
.sidebar.collapsed .sidebar-plan-footer { display: none; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1280px) {
  .vantage-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .dash-hero { grid-template-columns: 1fr; }
  .dash-top-cards { grid-template-columns: repeat(3, 1fr); }
  .dash-bottom-row { grid-template-columns: 1fr; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .bento-3col { grid-template-columns: repeat(2, 1fr); }
  .card-span-3 { grid-column: span 2; }
}
@media (max-width: 768px) {
  .dash-top-cards { grid-template-columns: 1fr; }
  .dash-kpis, .bento-2col, .bento-3col { grid-template-columns: 1fr; }
  .card-span-2, .card-span-3 { grid-column: span 1; }
  .cortex-layout { grid-template-columns: 1fr; }
  .cortex-sidebar { display: none; }
  .sql-editor-layout { grid-template-columns: 1fr; }
  .sql-sidebar { display: none; }
  .vantage-summary { grid-template-columns: 1fr; }
  .view-header { flex-direction: column; }
  .sidebar { position: fixed; left: -260px; z-index: 200; transition: left var(--t-base); }
  .sidebar.open { left: 0; }
}

/* Cortex header responsive: stack title + actions vertically when viewport is tight
   (covers high-zoom levels like 125-150% on standard desktops) */
@media (max-width: 1280px) {
  .cortex-header { padding: var(--sp-2) var(--sp-4); row-gap: var(--sp-2); }
  .cortex-title-block { flex: 0 0 100%; }
  .cortex-header-actions { flex: 0 0 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .cortex-model-tag { display: none; }
}

/* ═══════════ DRILL-DOWN MODAL ═══════════ */
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════ UNIFIED AUDIT OVERHAUL ═══════════ */

.audit-kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
@media (max-width: 1200px) { .audit-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .audit-kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* Live Feed */
.audit-livefeed-event { padding: var(--sp-3); border-bottom: 1px solid var(--border-subtle); animation: audit-fadein 0.3s ease-out; display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 13px; }
.audit-livefeed-event:hover { background: var(--bg-elevated); }
.audit-livefeed-event.critical { border-left: 3px solid var(--danger); }
.audit-livefeed-event.warning { border-left: 3px solid var(--warning); }
.audit-livefeed-event .lf-time { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); white-space: nowrap; min-width: 70px; }
.audit-livefeed-event .lf-user { font-weight: 600; color: var(--text-1); min-width: 80px; }
.audit-livefeed-event .lf-sql { color: var(--text-2); font-family: var(--font-mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; }
@keyframes audit-fadein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Anomaly Cards */
.audit-anomaly-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-3); transition: border-color 200ms, box-shadow 200ms; }
.audit-anomaly-card:hover { border-color: var(--border-mid); box-shadow: var(--shadow-md); }
.audit-anomaly-critical { border-left: 4px solid var(--danger); }
.audit-anomaly-high { border-left: 4px solid var(--warning); }
.audit-anomaly-medium { border-left: 4px solid var(--info); }
.audit-anomaly-low { border-left: 4px solid var(--success); }
.audit-anomaly-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.audit-anomaly-confidence { font-family: var(--font-mono); font-size: 12px; background: rgba(211,158,87,0.15); color: var(--accent); padding: 2px 8px; border-radius: var(--r-sm); }
.audit-anomaly-body { font-size: 13px; color: var(--text-2); margin-bottom: var(--sp-2); line-height: 1.5; }
.audit-anomaly-actions { display: flex; gap: var(--sp-2); }

/* Session Timeline */
.audit-session-timeline { position: relative; padding-left: 32px; }
.audit-session-timeline::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.audit-timeline-node { position: relative; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.audit-timeline-node::before { content: ''; position: absolute; left: -26px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-card); }
.audit-timeline-node.insert::before { background: var(--success); }
.audit-timeline-node.update::before { background: var(--warning); }
.audit-timeline-node.delete::before { background: var(--danger); }
.audit-timeline-node.ddl::before { background: var(--info); }
.audit-timeline-node .tn-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-1); }
.audit-timeline-node .tn-op { font-weight: 600; font-size: 13px; }
.audit-timeline-node .tn-time { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
.audit-timeline-node .tn-sql { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); background: var(--bg-surface); padding: var(--sp-2); border-radius: var(--r-sm); margin-top: var(--sp-1); overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.audit-timeline-node .tn-target { font-size: 12px; color: var(--text-3); }

/* Heatmap */
.audit-heatmap-grid { display: grid; gap: 2px; font-size: 10px; overflow-x: auto; }
.audit-heatmap-cell { display: flex; align-items: center; justify-content: center; border-radius: 2px; cursor: pointer; font-family: var(--font-mono); font-size: 9px; color: var(--text-1); transition: transform 150ms; min-height: 28px; min-width: 28px; }
.audit-heatmap-cell:hover { transform: scale(1.2); z-index: 1; box-shadow: var(--shadow-md); }
.audit-heatmap-label { font-size: 11px; font-weight: 500; color: var(--text-2); display: flex; align-items: center; padding-right: var(--sp-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-heatmap-header { font-size: 10px; color: var(--text-3); text-align: center; font-weight: 600; }
.audit-heatmap-legend { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: 11px; color: var(--text-3); }
.audit-heatmap-legend-cell { width: 16px; height: 16px; border-radius: 2px; }

/* Cross-Module Feed */
.audit-crossmodule-event { display: flex; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 150ms; align-items: flex-start; }
.audit-crossmodule-event:hover { background: var(--bg-elevated); }
.audit-source-icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.audit-source-icon.audit { background: rgba(96,165,250,0.15); color: var(--info); }
.audit-cm-body { flex: 1; min-width: 0; }
.audit-cm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.audit-cm-type { font-weight: 600; font-size: 13px; color: var(--text-1); }
.audit-cm-time { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
.audit-cm-detail { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-cm-user { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* Data Change Diff */
.audit-diff-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.audit-diff-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); font-family: var(--font-mono); font-size: 12px; max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
.audit-diff-panel.old { border-top: 3px solid var(--danger); }
.audit-diff-panel.new { border-top: 3px solid var(--success); }
.audit-diff-changed { background: rgba(211,158,87,0.15); padding: 1px 3px; border-radius: 2px; }
@media (max-width: 768px) { .audit-diff-container { grid-template-columns: 1fr; } }

/* Investigator */
.audit-investigator-sql { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-3); font-family: var(--font-mono); font-size: 12px; color: var(--text-2); margin: var(--sp-2) 0; overflow-x: auto; }
.audit-investigator-explanation { background: rgba(211,158,87,0.08); border: 1px solid rgba(211,158,87,0.2); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-3); font-size: 13px; color: var(--text-1); line-height: 1.5; }

/* Search Highlight */
.audit-search-highlight, mark { background: rgba(211,158,87,0.3); padding: 1px 2px; border-radius: 2px; color: inherit; }

/* Saved Filter Pills */
.audit-saved-filter { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 11px; cursor: pointer; transition: border-color 150ms; }
.audit-saved-filter:hover { border-color: var(--accent); }

/* User Profile Cards */
.audit-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-3); }
.audit-profile-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); transition: border-color 200ms, box-shadow 200ms; }
.audit-profile-card:hover { border-color: var(--border-mid); box-shadow: var(--shadow-md); }
.audit-profile-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.audit-profile-avatar { width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; text-transform: uppercase; flex-shrink: 0; }
.audit-profile-name { font-weight: 600; font-size: 14px; color: var(--text-1); }
.audit-profile-meta { font-size: 11px; color: var(--text-3); }
.audit-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.audit-profile-stat { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); padding: var(--sp-2); text-align: center; }
.audit-profile-stat .aps-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-4); font-weight: 600; }
.audit-profile-stat .aps-value { font-size: 16px; font-weight: 700; color: var(--text-1); }
.audit-profile-risk { display: flex; align-items: center; gap: var(--sp-2); font-size: 11px; }
.audit-profile-risk-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.audit-profile-risk-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }

/* Recent Session Row */
.audit-session-row { display: grid; grid-template-columns: 40px 1fr 100px 80px 80px 60px 60px 60px 80px; gap: var(--sp-2); align-items: center; padding: var(--sp-3); border-bottom: 1px solid var(--border-subtle); font-size: 12px; cursor: pointer; transition: background 150ms; }
.audit-session-row:hover { background: var(--bg-elevated); }
.audit-session-row .asr-avatar { width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; text-transform: uppercase; }
.audit-session-row .asr-info { min-width: 0; }
.audit-session-row .asr-user { font-weight: 600; color: var(--text-1); font-size: 13px; }
.audit-session-row .asr-session-id { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-session-row .asr-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.audit-session-row .asr-count { font-weight: 600; text-align: center; }
@media (max-width: 1024px) { .audit-session-row { grid-template-columns: 40px 1fr 100px 80px 80px; } .audit-session-row > :nth-child(n+6) { display: none; } }

/* ═══════════ RBAC & TEAM MANAGEMENT ═══════════ */

/* Locked Nav Items */
.nav-item-locked { opacity: 0.45; }
.nav-item-locked:hover { opacity: 0.65; }
.nav-lock-icon { margin-left: auto; color: var(--text-4); display: flex; align-items: center; }

/* Access Denied Card */
.access-denied-container { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: var(--sp-8); }
.access-denied-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-8); text-align: center; max-width: 440px; width: 100%; }
.access-denied-icon { margin-bottom: var(--sp-4); }
.access-denied-title { font-size: 1.25rem; font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-2); }
.access-denied-desc { font-size: 0.875rem; color: var(--text-3); line-height: 1.5; margin-bottom: var(--sp-4); }
.access-denied-justification { width: 100%; padding: var(--sp-3); background: var(--bg-input, var(--bg-surface)); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-1); font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 0.8125rem; resize: vertical; margin-bottom: var(--sp-4); }
.access-denied-justification:focus { border-color: var(--accent); outline: none; }
.access-denied-footer { margin-top: var(--sp-3); font-size: 0.75rem; min-height: 1.2em; }

/* Team View — auto-fit so the row collapses cleanly when fewer cards
   exist. align-items:start prevents the grid from stretching all
   collapsed cards to match the height of an expanded one (the
   primary cause of the "small stub next to a giant card" look). */
.team-user-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-3); align-items: start; }
.team-user-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  position: relative;
}
.team-user-card:hover { border-color: var(--border-mid); transform: translateY(-1px); box-shadow: 0 6px 18px -10px rgba(0,0,0,0.45); }
.team-user-card.expanded {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 28px -16px rgba(211,158,87,0.35);
  /* Span the whole row so an open card doesn't dwarf the others.
     Removing this means a single expansion stretches every sibling
     vertically (the "5 cards, one is huge, 4 look like stubs" bug). */
  grid-column: 1 / -1;
}
.team-user-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  position: relative;
}
.team-user-card .team-user-header::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-4);
  border-bottom: 1.5px solid var(--text-4);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 180ms ease, border-color 180ms ease;
  opacity: 0.7;
}
.team-user-card.expanded .team-user-header::after {
  transform: translateY(-25%) rotate(-135deg);
  border-color: var(--accent);
  opacity: 1;
}
.team-user-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8rem; color: white; flex-shrink: 0; letter-spacing: 0.02em; }
.team-user-info { flex: 1; min-width: 0; padding-right: var(--sp-3); }
.team-user-name { font-weight: 600; color: var(--text-1); font-size: 0.875rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.team-user-email { font-size: 0.7rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.team-permission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: var(--sp-2); }
.team-perm-item { display: flex; align-items: center; padding: 6px 10px; background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--r-sm); font-size: 0.72rem; color: var(--text-2); transition: border-color 120ms ease; }
.team-perm-item:hover { border-color: var(--border); }
.team-perm-item label { cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; }
.team-perm-item input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }

/* Role Badges */
.role-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); text-transform: uppercase; letter-spacing: 0.03em; }
.role-badge.basic { background: rgba(96,165,250,0.15); color: var(--info); }
.role-badge.power_user { background: rgba(211,158,87,0.15); color: var(--accent); }
.role-badge.administrator { background: rgba(248,113,113,0.15); color: var(--danger); }
.role-badge.custom { background: rgba(168,85,247,0.15); color: #a855f7; }

/* Team Tab Badge */
.team-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 600; margin-left: var(--sp-1); }

/* Request Access notification items with action buttons */
.notif-action-btn { margin-top: 4px; font-size: 11px; padding: 2px 8px; }

/* ═══════════ AI PROVIDER SETTINGS MODAL ═══════════ */
/* Widen the modal when it contains the AI settings form. Default
   .modal-content is 520px which clips the three-tab picker + preset
   chips and causes horizontal overflow. Scope via :has() so every
   other modal keeps its tighter default; `.modal-wide` is a manual
   fallback if :has() is unavailable. */
.modal-content:has(.ai-settings-body),
.modal-content.modal-wide { max-width: 640px; }
.ai-settings-body { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Top-level provider picker — tabbed pills with an accent bottom-rule on
   the active item. Feels like a sectioned toggle rather than three
   loose primary buttons. */
.ai-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
}
.ai-tab {
  all: unset;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent;
  color: var(--text-3);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  text-align: center;
}
.ai-tab:hover { background: rgba(211,158,87,0.06); color: var(--text-2); }
.ai-tab.active {
  background: linear-gradient(180deg, rgba(211,158,87,0.18), rgba(211,158,87,0.08));
  color: var(--text-1);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.ai-tab-label { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.ai-tab-sub { font-size: 12px; color: var(--text-4); font-weight: 400; }
.ai-tab.active .ai-tab-sub { color: var(--text-3); }

/* Panel container for each provider's form. Shared card look. */
.ai-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.ai-panel-hint { font-size: 13px; color: var(--text-3); margin: 0; line-height: 1.55; }

/* Field groups inside a panel — stacked label + input. Label sizes bumped
   up to 13px so they're comfortably readable at 100% zoom (the old 11px
   all-caps labels were borderline even at 125% zoom). */
.ai-field { display: flex; flex-direction: column; gap: 8px; }
.ai-field-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.ai-label {
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  text-transform: none;
  letter-spacing: 0;
}
.ai-label-sub { font-weight: 400; color: var(--text-4); margin-left: 6px; font-size: 12px; }
.ai-input { width: 100%; font-size: 14px; padding: 9px 12px; }
.ai-input-row { display: flex; gap: var(--sp-2); align-items: stretch; }
.ai-input-row .ai-input { flex: 1; }

/* Preset chip selector inside the Custom Server tab. */
.ai-preset-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-preset-chip {
  all: unset;
  cursor: pointer;
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 500;
  color: var(--text-2);
  background: var(--bg-base);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ai-preset-chip:hover {
  color: var(--text-1);
  border-color: var(--border-mid);
  background: rgba(211,158,87,0.06);
}
.ai-preset-chip.active {
  background: var(--accent);
  color: #0B1929;
  border-color: var(--accent);
  font-weight: 600;
}

/* Small "Refresh" link-style button next to the Model label. */
.ai-link-btn {
  all: unset;
  cursor: pointer;
  font-size: 11px; font-weight: 500;
  color: var(--text-3);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.ai-link-btn:hover { color: var(--accent); background: rgba(211,158,87,0.08); }

/* Inline helper text under a field */
.ai-status-text { font-size: 12px; color: var(--text-3); min-height: 16px; line-height: 1.5; }

/* Status pill (pull result, pull progress, etc.) */
.ai-status {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--border);
  background: var(--bg-base);
  color: var(--text-2);
}
.ai-status.info    { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.25); }
.ai-status.success { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.28); color: var(--text-1); }
.ai-status.error   { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.28); color: var(--text-1); }

/* Ollama downloaded-models list */
.ai-models-list { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-2); }
.ai-models-list-title {
  font-size: 12px; font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.ai-model-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.ai-model-name { font-size: 13px; font-family: var(--font-mono); color: var(--text-1); }
.ai-model-actions { display: flex; gap: 4px; align-items: center; }
.ai-model-active {
  font-size: 10px; font-weight: 600;
  padding: 2px 8px;
  background: var(--accent);
  color: #0B1929;
  border-radius: var(--r-full);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.ai-model-remove { color: var(--danger) !important; }
.ai-empty {
  font-size: 12px; color: var(--text-4);
  padding: var(--sp-3);
  text-align: center;
  background: var(--bg-base);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
}

/* Footer row — Test Connection + Save */
.ai-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.ai-test-result {
  padding: 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--bg-base);
}
.ai-test-result.testing { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.25); }

/* ═══════════ TOP-HEADER CONNECTION PILL ═══════════ */
/* Single-row pill: status dot · db name · host:port · PG version badge · user.
   Laid out with flex-wrap: nowrap so everything stays on ONE line; the
   pill grows as wide as the header allows (capped at 720px) instead of
   wrapping to a second row. */
.connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  background: linear-gradient(180deg, rgba(211,158,87,0.08), rgba(211,158,87,0.03));
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  transition: border-color var(--t-base), background var(--t-base);
  /* Same clamp design-system.css:638 declares, repeated because this rule
     loads later and a flat `max-width: 720px` here silently defeated it.
     That cap exists to stop the pill overlapping header-right (refresh /
     notifications / zoom / theme / profile) — measured at a 1600px
     viewport it was running 852px wide and covering the ENTERPRISE badge
     by 157px. Keep the two in step. */
  max-width: clamp(140px, calc(100vw - var(--sidebar-width) - 470px), 460px);
  overflow: hidden;
  white-space: nowrap;
}
.connection-pill.is-connected { border-color: rgba(52,211,153,0.35); }
.connection-pill:hover { border-color: var(--border-mid); }

.connection-pill-body {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.connection-pill-row {
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1.2;
  min-width: 0;
}
/* Both "rows" share the same parent now — merge their spacing. */
.connection-pill-meta { gap: 8px; }

.connection-pill-db {
  font-size: 13px; font-weight: 600;
  color: var(--text-1);
  max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The connection NAME identifies the query target, so it is the LAST
   thing to give up space: the qualifiers beside it shrink first, and the
   progressive-hide rules at the foot of this file drop them entirely at
   narrow widths. Without this the flex distribution took the cut evenly
   and rendered "ProdTest…" beside a fully-legible
   "prodtest_clean @ postgres:5555" — the wrong half survived.

   Selector matches design-system.css's `.connection-pill-body > span`
   specificity (0,2,1); a bare `.connection-pill-db` (0,1,0) loses to that
   rule's `flex: 0 1 auto` shorthand and the shrink never applied. */
.connection-pill-body > .connection-pill-db { flex-shrink: 0; }
.connection-pill-host {
  font-size: 12px; font-weight: 500;
  color: var(--text-3);
  font-family: var(--font-mono);
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden; text-overflow: ellipsis;
}
.connection-pill-sep { color: var(--text-4); font-size: 13px; }
.connection-pill-user {
  font-size: 11px; color: var(--text-4);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.connection-pill-user:not(:empty)::before { content: 'user: '; color: var(--text-4); font-family: var(--font-sans); }

/* PG version badge — accent tint so it reads as metadata not a count.
   Note: progressive segment-hiding @media rules at the bottom of this
   file override `display: inline-flex` to `display: none` at narrow
   viewports. They live here (not in design-system.css) so they
   load AFTER this declaration and win the specificity tie. */
.connection-pill-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: rgba(211,158,87,0.14);
  color: var(--accent);
  border: 1px solid rgba(211,158,87,0.3);
  text-transform: uppercase;
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Connection status dot — green when live, muted otherwise. */
.connection-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-4);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15) inset;
  flex: 0 0 8px;
}
.connection-status-dot.online {
  background: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,0.5), 0 0 0 2px rgba(0,0,0,0.15) inset;
}

/* Brand-icon variant that hosts the real IntelliDB logo PNG. Overrides
   the default .brand-icon size (38px) — the packaged logo is a detailed
   mark that looks cramped/muddy at that size. 52px + transparent tile
   + no drop-shadow gives the painted colours room to breathe, and
   image-rendering hints keep edges crisp when the browser scales the
   500×500 source down. */
.brand-icon.brand-icon-img {
  width: 52px;
  height: 52px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}
.brand-icon.brand-icon-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Gold-accent edition pill. Used in the sidebar footer and on the
   Settings → About card. Keeps the brand accent (#D39E57) visible
   without the aggressive fill of a primary button. */
.sb-edition-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: linear-gradient(180deg, rgba(211,158,87,0.18), rgba(211,158,87,0.06));
  border: 1px solid rgba(211,158,87,0.35);
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  white-space: nowrap;
  transition: border-color var(--t-base), background var(--t-base);
}
.sb-edition-pill:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(211,158,87,0.26), rgba(211,158,87,0.10));
}

/* Softer accent badge used on the About card next to the version. */
.badge-accent-soft {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(211,158,87,0.12);
  border: 1px solid rgba(211,158,87,0.3);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
}

/* ═══════════ CONNECTION-PILL DROPDOWN ═══════════ */
/* Wrap holds the pill + the absolutely-positioned picker so the picker
   anchors under the pill without being clipped by the top-header's
   overflow context. */
/* A flex container with `min-width: 0`, not an inline-block, and that is
   the whole reason the pill's `max-width` works at all.

   Measured at a 1280px viewport with the cap computing 460px: an inline-
   block wrap shrink-wraps to the pill's min-content width, and setting
   `max-width: 460px` inline on EITHER the pill or the wrap changed
   nothing — the pill stayed 575px and covered the ENTERPRISE badge.
   Switching the wrap to `display: flex; min-width: 0` drops it to 358px,
   which is the only intervention of the three that moved the number.
   Blocks do not clamp a child below its min-content; a flex item with an
   explicit `min-width: 0` does.

   `position: relative` stays — the picker dropdown is absolutely
   positioned against this element. */
.connection-pill-wrap {
  position: relative;
  display: flex;
  min-width: 0;
}

/* Promote the pill to a clickable element — native <button> resets
   + keep the existing pill look. */
.connection-pill {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 16px;
  background: linear-gradient(180deg, rgba(211,158,87,0.08), rgba(211,158,87,0.03));
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  transition: border-color var(--t-base), background var(--t-base);
  /* `all: unset` above wipes design-system.css's clamp, its
     `overflow: hidden` AND its `min-width: 0`, so all three are restated
     here — this is the rule that actually wins, and with a flat 720px cap
     the pill overlapped the header-right controls.

     `min-width: 0` is the load-bearing one and the reason the cap looked
     broken: a flex item defaults to `min-width: auto`, which resolves to
     min-content and OUTRANKS max-width. Measured with the cap computing
     460px, the pill still laid out at 575px — the nowrap min-content
     width of its own text — and covered the ENTERPRISE badge. Restoring
     the cap alone changes nothing without this line. */
  min-width: 0;
  max-width: clamp(140px, calc(100vw - var(--sidebar-width) - 470px), 460px);
  overflow: hidden;
  white-space: nowrap;
  color: inherit;
}
.connection-pill:hover { border-color: var(--border-mid); background: linear-gradient(180deg, rgba(211,158,87,0.14), rgba(211,158,87,0.05)); }
.connection-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Caret rotates 180° when the picker is open (combobox convention). */
.connection-pill-caret { color: var(--text-4); flex-shrink: 0; transition: transform var(--t-fast); }
.connection-pill[aria-expanded="true"] .connection-pill-caret {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Dropdown itself — anchored under the pill, wider than the pill so
   long connection names + host:port strings don't wrap. */
.connection-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 320px;
  max-width: 480px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.38), 0 4px 12px rgba(0,0,0,0.24);
  padding: 6px;
  z-index: 1000;
  animation: pickerIn 120ms var(--ease-out);
}
@keyframes pickerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.connection-picker-header {
  font-size: 10px; font-weight: 600;
  color: var(--text-4);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 8px 10px 6px;
}

.connection-picker-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 320px; overflow-y: auto;
}
.connection-picker-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--text-4);
  text-align: center;
}

.connection-picker-item {
  all: unset;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
  box-sizing: border-box;
}
.connection-picker-item:hover { background: rgba(211,158,87,0.08); }
.connection-picker-item.active {
  background: rgba(211,158,87,0.12);
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.connection-picker-item-body {
  display: flex; flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.connection-picker-item-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.connection-picker-item-sub {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.connection-picker-check {
  color: var(--accent);
  display: inline-flex; align-items: center;
  margin-left: 4px;
}

/* "Add new database" footer row — visually separated with a top
   border so it clearly isn't a connection you can switch to. */
.connection-picker-add {
  all: unset;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  transition: background var(--t-fast);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.connection-picker-add:hover { background: rgba(211,158,87,0.10); }

/* Error status dot variant for connections that failed to open. */
.connection-status-dot.error {
  background: #f87171;
  box-shadow: 0 0 8px rgba(248,113,113,0.5), 0 0 0 2px rgba(0,0,0,0.15) inset;
}

/* ════════ CONNECTION-PILL: progressive segment hiding ════════
   Lives at the end of this file (loaded after design-system.css and
   after the .connection-pill-badge base declaration above) so the
   `display: none` here wins the specificity tie at narrow viewports.
   Budget math (with sidebar at 252 + 470 reserved for header-right):
     <1500   pill room ~280  -> hide user
     <1280   pill room ~210  -> + hide sep
     <1150   pill room ~210  -> + hide host  (covers most 1024 windows)
     <1024   pill room ~150  -> + hide version badge
   Always keep status-dot + db name (load-bearing identity). */
@media (max-width: 1500px) { .connection-pill-user   { display: none !important; } }
@media (max-width: 1280px) { .connection-pill-sep    { display: none !important; } }
@media (max-width: 1150px) { .connection-pill-host   { display: none !important; } }
@media (max-width: 1024px) { .connection-pill-badge  { display: none !important; } }

/* ---------------------------------------------------------------------
 * Auto-Heal v0.3.1 two-phase confirm modal — propose -> dry-run -> confirm.
 * Surfaces schema_diff, preflight blockers, EXPLAIN, warnings, and the
 * approval reason input + accept_* checkboxes. Wired by
 * frontend/modules/autoheal-confirm.js.
 * --------------------------------------------------------------------- */
.ah-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ah-confirm-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  width: min(820px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  font-family: 'DM Sans', -apple-system, sans-serif;
}
.ah-confirm-modal.ah-non-txn {
  border-color: rgba(248, 113, 113, 0.35);
}
.ah-confirm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.ah-confirm-title {
  font-size: 15px; font-weight: 600; color: var(--text-1);
}
.ah-confirm-body {
  padding: 18px 22px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.ah-confirm-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px; border-top: 1px solid var(--border);
}
.ah-banner {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px; line-height: 1.45;
  color: var(--text-1);
}
.ah-banner-warn {
  background: rgba(248, 113, 113, 0.10);
  border: 1px solid rgba(248, 113, 113, 0.30);
}
.ah-banner-warn strong { color: var(--danger); }
.ah-warnings { display: flex; flex-direction: column; gap: 4px; }
.ah-warning {
  font-size: 12px; color: var(--warning);
  background: rgba(251, 191, 36, 0.08);
  border-left: 2px solid var(--warning);
  padding: 6px 10px;
  border-radius: 4px;
}
.ah-section { display: flex; flex-direction: column; gap: 6px; }
.ah-section-title {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ah-sql {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; margin: 0;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 12px; color: var(--text-1);
  max-height: 140px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
}
.ah-diff { display: flex; flex-direction: column; gap: 4px; }
.ah-diff-empty {
  font-size: 12px; color: var(--text-3); font-style: italic;
  padding: 8px 0;
}
.ah-diff-row {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--text-1);
  padding: 4px 6px; border-radius: 4px;
}
.ah-diff-row.ah-destructive { background: rgba(248, 113, 113, 0.08); }
.ah-diff-tag {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  margin-right: 6px; text-transform: uppercase;
}
.ah-add { background: rgba(52, 211, 153, 0.18); color: var(--success); }
.ah-drop { background: rgba(248, 113, 113, 0.18); color: var(--danger); }
.ah-preflight { padding: 8px; border-radius: 6px; background: rgba(110, 143, 168, 0.06); }
.ah-preflight.ah-destructive { background: rgba(248, 113, 113, 0.08); }
.ah-diff-section-title {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  margin-bottom: 6px;
}
.ah-blocker-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.ah-blocker-table th {
  text-align: left; color: var(--text-3); font-weight: 500;
  padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.ah-blocker-table td {
  padding: 4px 8px; color: var(--text-1);
  font-family: 'JetBrains Mono', monospace;
}
.ah-explain { font-size: 12px; }
.ah-explain summary {
  cursor: pointer; color: var(--text-3);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.ah-explain pre {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--text-2);
  max-height: 200px; overflow: auto;
}
.ah-reason-input {
  width: 100%;
  background: var(--bg-input); border: 1px solid var(--border-mid);
  border-radius: 6px; padding: 8px 10px;
  color: var(--text-1); font-family: inherit; font-size: 13px;
  resize: vertical; min-height: 56px;
}
.ah-reason-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(211, 158, 87, 0.12); }
.ah-reason-counter {
  font-size: 10px; color: var(--text-3); align-self: flex-end;
}
.ah-acks { display: flex; flex-direction: column; gap: 8px; }
.ah-ack {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--text-2); line-height: 1.4;
  cursor: pointer;
  padding: 6px 8px; border-radius: 4px;
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.18);
}
.ah-ack input { margin-top: 2px; flex-shrink: 0; cursor: pointer; }

/* AH-T7 — co-approval queue panel (sits above Fix History when non-empty). */
.ah-coapprove-panel {
  margin-bottom: var(--sp-4);
  border: 1px solid rgba(211, 158, 87, 0.38);
  background: linear-gradient(180deg, rgba(211, 158, 87, 0.08), rgba(10, 22, 32, 0.4));
  border-radius: 10px;
  overflow: hidden;
}
.ah-coapprove-header {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(211, 158, 87, 0.22);
  background: rgba(211, 158, 87, 0.07);
}
.ah-coapprove-header strong { color: #f0e0c8; font-size: 13px; }
.ah-coapprove-sub { color: #b39872; font-size: 11px; }
.ah-coapprove-list { display: flex; flex-direction: column; }
.ah-coapprove-item {
  padding: 12px 14px;
  border-top: 1px solid rgba(211, 158, 87, 0.12);
}
.ah-coapprove-item:first-child { border-top: 0; }
.ah-coapprove-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.ah-coapprove-title { color: var(--text-1); font-weight: 600; font-size: 13px; }
.ah-coapprove-target {
  color: var(--text-3); font-size: 11px; font-family: var(--font-mono);
  padding: 1px 6px; border: 1px solid var(--border-mid); border-radius: 4px;
}
.ah-coapprove-reason {
  font-size: 12px; color: var(--text-2); margin: 4px 0;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px;
}
.ah-coapprove-reason b { color: #b39872; font-weight: 600; }
.ah-coapprove-flags {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: #b39872; margin: 4px 0;
}
.ah-coapprove-flag {
  display: inline-block;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #f8a8a8; font-family: var(--font-mono); font-size: 10px;
}
.ah-coapprove-actions {
  display: flex; gap: 8px; align-items: center; margin-top: 8px;
}
.ah-coapprove-self-tag {
  font-size: 11px; color: #b39872; flex: 1;
}
.ah-coapprove-meta-block {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px;
  font-size: 12px; color: var(--text-2);
  display: flex; flex-direction: column; gap: 4px;
}
.ah-coapprove-meta-block .scan-issue-code { margin-right: 6px; }
.ah-coapprove-target-line { color: var(--text-3); font-size: 11px; }
.ah-coapprove-target-line code {
  color: var(--text-2); font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.03); padding: 1px 5px; border-radius: 3px;
}
.ah-coapprove-quote {
  background: var(--bg-input); border-left: 3px solid #D39E57;
  border-radius: 4px; padding: 8px 12px;
  font-size: 12px; color: var(--text-2); line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}

/* ---- HA-1 / HA-6: role + writability badges on connection cards ---- */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Color-coded by role. primary -> green (writable), sync_replica -> blue
   (hot-standby), async_replica -> muted gray (read-replica), unknown ->
   amber (topology probe couldn't classify this node yet). */
.role-primary       { background: #1e7d32; color: #fff; }
.role-sync_replica  { background: #1565c0; color: #fff; }
.role-async_replica { background: #455a64; color: #fff; }
.role-unknown       { background: #d97706; color: #fff; }


/* HA-6 writability indicator — sits next to the role pill on primary
   nodes. Uses the same dot-on-pill layout as .action-status-pill but
   slimmer (no spinner, just a glyph in the text). */
.writability-indicator.writability-fresh {
  background: var(--success-bg, rgba(34, 197, 94, 0.12));
  color: var(--success, #16a34a);
  border: 1px solid var(--success-border, rgba(34, 197, 94, 0.3));
}
.writability-indicator.writability-stale {
  background: var(--warning-bg, rgba(245, 158, 11, 0.12));
  color: var(--warning, #d97706);
  border: 1px solid var(--warning-border, rgba(245, 158, 11, 0.3));
}


/* ---- Task 9b: per-target licensing badges on connection cards ---- */
/* Container sits between .conn-ha-info and .conn-card-meta rows.    */
/* Base pill — thin border, small text, no uppercase (these are prose labels). */
/* VIP / multi-node — amber warning hue (matches writability-stale). */
/* Not a licensed IntelliDB engine — muted/ghost, non-alarming. */

/* ---- HA-1: cluster cards + topology panel (consumed by clusters.js) ---- */
/* All colours pull from design-system.css tokens so the HA surface
   matches the rest of the dark UI shell. Light-theme overrides
   (#fafafa / #fff / #555) were unreadable against the navy app
   background. */
.cluster-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-1);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cluster-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-mid);
}
.cluster-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.cluster-name { font-weight: 600; color: var(--text-1); }
.cluster-health-badge {
  padding: 2px 8px; border-radius: 10px;
  font-size: 0.75rem; font-weight: 600;
  text-transform: capitalize;
}
.health-healthy              { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.health-degraded_split_brain { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger-border); }
.health-topology_unknown     { background: rgba(255,255,255,0.05); color: var(--text-3); border: 1px solid var(--border); }
.health-topology_auth_failed { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.health-cluster_unreachable  { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.cluster-source { font-size: 0.85rem; color: var(--text-3); text-transform: capitalize; }
.cluster-empty { padding: 16px; color: var(--text-2); }
.cluster-empty .muted { color: var(--text-3); font-size: 0.85rem; }

.topo-meta {
  display: flex; gap: 16px; margin-bottom: 8px; font-size: 0.85rem;
  color: var(--text-2);
}
.topo-meta strong { color: var(--text-1); }
.topo-nodes { width: 100%; border-collapse: collapse; color: var(--text-2); }
.topo-nodes th, .topo-nodes td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.topo-nodes th { color: var(--text-3); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.topo-probing { padding: 16px; color: var(--text-2); }
.topo-probing .muted { color: var(--text-3); font-size: 0.85rem; }
.topo-error { color: var(--danger); padding: 16px; }

/* ---- HA-1: Dashboard cluster-health summary card ---- */
.cluster-summary-card {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-4);
}
.cluster-summary-row {
  display: flex; gap: 10px; align-items: center; margin-top: 4px;
}
.cluster-summary-num { font-size: 1.8rem; font-weight: 700; color: var(--text-1); }
.cluster-summary-label { color: var(--text-3); }
.cluster-summary-row .badge {
  padding: 2px 8px; border-radius: 10px; font-size: 0.75rem;
}
.cluster-summary-badges { flex-wrap: wrap; gap: 6px; }
.cluster-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cluster-summary-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cluster-summary-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.cluster-summary-stat-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cluster-summary-stat-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-3);
  margin-left: 2px;
}
.cluster-summary-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cluster-summary-item {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.cluster-summary-item-name {
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cluster-summary-item-meta {
  color: var(--text-3);
  font-size: 0.75rem;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Connections page sub-tabs (Connections / Clusters) ---- */
.conn-tabs {
  /* Slightly tighter top margin than the design-system default so the tab
     strip reads as a section divider rather than a top-level nav. */
  margin: calc(var(--sp-2) * -1) 0 var(--sp-4);
}
.conn-tab-panel { display: block; }

/* ---- Stacked (accordion) cluster cards — match the Connection list UX ---- */
.clusters-wrapper-stacked { padding: 0; border: none; background: transparent; }
.clusters-wrapper-stacked .clusters-header { padding: 0 0 var(--sp-3); margin: 0; }
.cluster-list-stacked { display: flex; flex-direction: column; gap: var(--sp-3); }
.cluster-card-expandable {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.cluster-card-expandable:hover { border-color: var(--border-mid); }
.cluster-card-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
}
.cluster-card-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-input);
  border-radius: var(--r-md);
  color: var(--accent);
  flex-shrink: 0;
}
.cluster-card-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.cluster-card-info .cluster-name {
  font-size: 14px; font-weight: 600; color: var(--text-1);
}
.cluster-card-meta {
  font-size: 12px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cluster-card-status { flex-shrink: 0; }
.cluster-expand-btn { flex-shrink: 0; }
.cluster-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.cluster-details.open {
  max-height: 1800px;
  border-top: 1px solid var(--border);
}
.cluster-details-inner {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cluster-topology-host h3 {
  margin: 0 0 var(--sp-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cluster-topology-loading {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--text-3); padding: var(--sp-3) 0;
}

/* ---- HA-1: clusters wrapper inside the connections view ---- */
.clusters-wrapper {
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}
.clusters-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.clusters-header-text { flex: 1; min-width: 0; }
.clusters-header h2 {
  margin: 0 0 4px 0;
  font-size: 1.05rem;
  color: var(--text-1);
  font-weight: 600;
}
.clusters-header .muted {
  color: var(--text-3);
  font-size: 0.85rem;
  margin: 0;
}
.clusters-header-actions { flex-shrink: 0; }
.clusters-body {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr);
  gap: 16px;
  align-items: start;
}
.cluster-detail-panel {
  min-height: 80px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-2);
}
.cluster-detail-panel.loading::before {
  content: "Loading…";
  color: var(--text-3);
}
.cluster-detail-panel h3 {
  margin: 0 0 10px 0;
  font-size: 0.95rem;
  color: var(--text-1);
  font-weight: 600;
}

/* ---- HA-1: Register-cluster modal — multi-select connection picker ---- */
.cluster-conn-picker {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  padding: 8px;
}
.cluster-conn-picker label {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 0.85rem;
  font-weight: 400;
  margin: 0;
}
.cluster-conn-picker label:hover { background: var(--bg-card-hover); }
.cluster-conn-picker input[type="checkbox"] { margin: 0; cursor: pointer; }
.cluster-conn-picker .picker-empty {
  padding: 12px; color: var(--text-3); font-size: 0.85rem; text-align: center;
}

/* ---- HA-5: Cluster Actions panel ---- */
.cluster-actions-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
/* The rule above separates this section from the topology that sat above it in
   the old accordion. In the fabric's operations dock it is the FIRST thing in
   the panel, so that separator became a second divider under the panel title
   plus 46px of empty band -- measured 57px between the title and the list. */
.cluster-details-inner > .cluster-actions-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.cluster-actions-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.cluster-actions-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-1);
}
.cluster-actions-body { font-size: 0.85rem; }
/* The table now mounts inside the HA fabric's operations dock, which is far
   narrower than the accordion card it was built for. A table does not shrink
   below its min-content -- it spills -- so it scrolls inside its own box and
   the card keeps its bounds whatever a row contains. */
/* One card per action. A table needed 748px of columns inside a 493px dock
   panel; the control column alone was 226px, so nothing short of a rewrite
   made both the status and its buttons visible at once. Stacking removes the
   horizontal axis from the problem entirely. */
.cluster-actions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cluster-action-item {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 6px);
  background: var(--bg-card);
}
.cluster-action-item[data-status="executing"] {
  background: rgba(6, 182, 212, 0.06);
  border-color: rgba(6, 182, 212, 0.35);
}
.cai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin-bottom: 4px;
  /* The pill does not wrap, so at the narrowest dock width (measured 158px of
     usable list against a 165px head) the two would not share a line and the
     card widened past its panel instead. Wrapping drops the pill below the
     name rather than pushing the card out. */
  flex-wrap: wrap;
}
.cai-kind {
  font-weight: 500;
  color: var(--text-1);
  font-size: 0.86rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.cai-meta {
  font-size: 0.76rem;
  color: var(--text-3);
  line-height: 1.5;
}
.cai-sep { opacity: 0.5; padding: 0 2px; }
.cai-error {
  margin-top: 6px;
  font-family: monospace;
  font-size: 0.74rem;
  color: var(--error, #ef4444);
  /* A driver message can be one very long token. Left to itself it widens the
     card past the dock -- the defect this whole panel was rebuilt for. */
  overflow-wrap: anywhere;
}
/* `error_message` also carries the cancellation note ("cancelled by user 2"),
   which is not a failure. Painting that red reports a clean operator decision
   as a fault. */
.cluster-action-item[data-status="cancelled"] .cai-error {
  color: var(--text-3);
  font-family: inherit;
}
.cai-gate {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-3, var(--text-muted));
}
.cai-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}
/* `.btn-xs` is referenced across the product but has never been DEFINED in
   any stylesheet, so these render at full `.btn` height -- an oversized
   Co-approve beside a text-sized Cancel. Sized here rather than by adding a
   global `.btn-xs`, which would resize ~105 call sites in 18 modules at once
   and is its own change. */
.cai-actions .btn {
  min-height: 26px;
  padding: 3px 10px;
  font-size: 12px;
  border-radius: var(--r-sm, 5px);
}

.action-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  /* One line. Wrapped, a status pill stops looking like a badge and starts
     looking like a paragraph in a coloured box. `_statusPillHtml` supplies
     real sentence-case labels now, so `capitalize` would re-break the ones
     that legitimately carry a lowercase second word. */
  white-space: nowrap;
  background: var(--text-3);
  color: var(--text-on-accent, #fff);
}
.action-status-pill.action-status-proposed {
  background: var(--text-3);
  color: var(--bg-1, #fff);
}
.action-status-pill.action-status-awaiting_co_approval {
  background: #f59e0b;
  color: #1f1300;
}
.action-status-pill.action-status-approved {
  background: var(--info, #3b82f6);
  color: #fff;
}
.action-status-pill.action-status-executing {
  background: #06b6d4;
  color: #001a1f;
}
.action-status-pill.action-status-completed {
  background: var(--success, #10b981);
  color: #002417;
}
.action-status-pill.action-status-failed {
  background: var(--error, #ef4444);
  color: #fff;
}
.action-status-pill.action-status-cancelled {
  background: #6b7280;
  color: #fff;
}

/* Spinner dot for executing rows. */
.action-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: action-pulse 1.1s ease-in-out infinite;
}
@keyframes action-pulse {
  0% { transform: scale(0.7); opacity: 0.4; }
  50% { transform: scale(1.1); opacity: 1.0; }
  100% { transform: scale(0.7); opacity: 0.4; }
}
.cluster-actions-loading,
.cluster-actions-unsupported {
  padding: 12px;
  text-align: center;
}

/* ---- Branded custom select (replaces native <select> dropdown panel) ---- */
.custom-select { position: relative; width: 100%; }
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md, 6px);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.custom-select-trigger:hover { border-color: var(--border-strong, rgba(255, 255, 255, 0.2)); }
.custom-select.is-open .custom-select-trigger,
.custom-select-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(211, 158, 87, 0.14);
}
.custom-select-label {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-arrow {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 150ms ease, color 120ms ease;
  display: inline-flex;
}
.custom-select.is-open .custom-select-arrow {
  transform: rotate(180deg);
  color: var(--accent);
}
.custom-select-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 2000;
  padding: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md, 6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
  max-height: 280px;
  overflow-y: auto;
  animation: customSelectIn 120ms ease-out;
}
@keyframes customSelectIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.custom-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-1);
  cursor: pointer;
  transition: background-color 80ms ease;
}
.custom-select-option::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
}
.custom-select-option.is-selected {
  color: var(--accent);
}
.custom-select-option.is-selected::before {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(211, 158, 87, 0.18);
}
.custom-select-option:not(.is-disabled):hover,
.custom-select-option.is-active:not(.is-disabled) {
  background: rgba(211, 158, 87, 0.08);
}
.custom-select-option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--text-3);
}
.custom-select-native { display: none !important; }

/* ═══════════ PLAN / LICENCE READOUT (sidebar footer, header pill, About) ═══════════
 *
 * THE SIDEBAR IS DARK IN BOTH THEMES. `--sidebar-bg` is #0d1e2d in dark and
 * #153244 in light; only the PAGE flips. So `--text-1..4`, which light mode
 * redefines to dark slate for a white page, are the wrong tokens for anything
 * that lives in here — and this cell used them. In light mode it painted
 * --text-2 (#334155) on #153244: a contrast ratio of 1.29:1, against the 4.5:1
 * minimum for normal text. The operator said they could barely see it. They
 * could barely see it because it was very nearly the colour of the ground.
 *
 * Everything below takes either a sidebar-scoped token (--sidebar-text,
 * --sidebar-text-active) or one of the theme-STABLE semantic tokens (--accent
 * #D39E57, --warning #fbbf24, --success #34d399 — none of which light mode
 * redefines). Measured in a real browser against #153244, the worse of the
 * two grounds:
 *   white          13.4:1     --accent  5.6:1
 *   --warning       8.0:1     --success 7.0:1
 *   rgba(255,255,255,0.58)  5.1:1
 *
 * The two chips that sit on a genuinely white card (.sb-mode-pill, and the
 * header pill) cannot use those tokens: --warning on white is 1.6:1. They get
 * explicit light-theme values at the bottom of this block, measured at 4.84:1
 * and 5.68:1.
 */
.sidebar-plan-footer {
    /* .sidebar-footer already draws the divider above this; a second
       border-top here drew a doubled rule, and it used --border, which in
       light mode is rgba(0,0,0,0.08) and is invisible on navy anyway. */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    line-height: 1.3;
}
.sidebar-plan-footer .plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

/* The tier chip. Uppercase + weight is what makes an 10.5px label legible at
   this size; the colour alone is not doing the work, so the readout still
   reads for someone who cannot separate gold from white. */
.plan-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-full);
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plan-chip--standard {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.24);
}
.plan-chip--enterprise {
    color: var(--accent);
    background: rgba(211, 158, 87, 0.14);
    border-color: rgba(211, 158, 87, 0.42);
}
/* Platinum is the top tier and is the one an operator should be able to spot
   without reading — brighter ground, stronger edge, a faint lift. */
.plan-chip--platinum {
    color: #f6dcb4;
    background: linear-gradient(180deg, rgba(211, 158, 87, 0.34), rgba(211, 158, 87, 0.14));
    border-color: rgba(211, 158, 87, 0.65);
    box-shadow: 0 0 0 1px rgba(211, 158, 87, 0.10), 0 2px 8px rgba(211, 158, 87, 0.16);
}
/* A tier we could not read is NOT Standard. It says so rather than defaulting
   to the lowest real tier, which would be a claim nothing measured. */
.plan-chip--unknown {
    color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    letter-spacing: 0.03em;
    text-transform: none;
    font-weight: 600;
}

.sidebar-plan-footer .plan-upgrade {
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(211, 158, 87, 0.35);
    padding-bottom: 1px;
}
.sidebar-plan-footer .plan-upgrade:hover,
.sidebar-plan-footer .plan-upgrade:focus-visible {
    color: #e8bb7d;
    border-bottom-color: currentColor;
}

/* The licence mode. Trial is the state this readout exists to make visible:
   before it, an install whose every engine reported licence type 'trial' said
   only "Plan: Platinum". The dot is redundant with the word on purpose —
   colour is never the only carrier. */
.plan-mode {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    min-width: 0;
}
.plan-mode > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plan-mode-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}
.plan-mode.is-trial { color: var(--warning); }
.plan-mode.is-trial .plan-mode-dot { box-shadow: 0 0 6px rgba(251, 191, 36, 0.55); }
.plan-mode.is-licensed { color: var(--success); }
.plan-mode.is-unknown { color: rgba(255, 255, 255, 0.58); }

/* Where the TIER came from, when that is not the engines. Shown only then,
   because on an engine-licensed install the tier and the licence are the same
   fact and a line restating it is noise. It reconciles a Platinum chip sitting
   above "Trial licence" — without it those two read as a defect. Quieter than
   the mode row on purpose: it is context, not a verdict. */
.plan-source {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.58);
    padding-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header pill. The tier is on every screen, so a trial has to be named here
   too — `renderHeaderTierBadge` writes "PLATINUM · TRIAL" into the text and
   this only recolours it. A pill that changed colour and nothing else would
   leave the two states indistinguishable in a screenshot or to a reader who
   does not separate gold from amber. */
.badge.badge-trial,
#header-tier-badge.badge-trial {
    color: var(--warning);
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.42);
}
[data-theme="light"] .badge.badge-trial,
[data-theme="light"] #header-tier-badge.badge-trial {
    /* --warning on a white header is 1.6:1. It needs its own value here. */
    color: #92600a;
    background: #fef3c7;
    border-color: #f5c451;
}

/* Settings → About: the mode chip beside the tier pill. This one sits on a
   CARD, which really is white in light mode, so it takes page tokens — and
   the semantic hues need light-mode values for exactly the reason the sidebar
   needed sidebar ones. */
.sb-mode-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 4px 11px;
    border-radius: var(--r-full);
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
.sb-mode-pill.is-trial {
    color: var(--warning);
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.40);
}
.sb-mode-pill.is-licensed {
    color: var(--success);
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.36);
}
.sb-mode-pill.is-unknown {
    color: var(--text-3);
    background: rgba(127, 127, 127, 0.10);
    border-color: var(--border-mid);
}
[data-theme="light"] .sb-mode-pill.is-trial {
    color: #92600a;            /* 4.96:1 on #fef3c7 */
    background: #fef3c7;
    border-color: #f5c451;
}
[data-theme="light"] .sb-mode-pill.is-licensed {
    color: #046c4e;            /* 5.8:1 on #d1fae5 */
    background: #d1fae5;
    border-color: #6ee7b7;
}

/* About-card twin of .plan-source. On a card, so it takes page tokens. */
.sb-source-note {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-3);
    vertical-align: middle;
}

/* Tier-locked sidebar tiles (v0.5) */
.nav-item.is-tier-locked {
    cursor: pointer;
}
.nav-item.is-tier-locked > span:first-of-type {
    opacity: 0.55;  /* icon */
}
.nav-item.is-tier-locked > span:nth-of-type(2) {
    opacity: 0.55;  /* label */
    color: var(--text-3);
}
.tier-badge {
    /* margin-left:4px so the tier badge nests adjacent to a preceding
       .nav-badge (Cortex Preview pill). Don't use margin-left:auto here —
       it competes with .nav-badge's auto-margin and splits the gap. */
    margin-left: 4px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.tier-badge.tier-enterprise,
.tier-badge.tier-platinum {
    background: var(--accent);
    color: var(--text-inverse);
}
.tier-badge.tier-soon {
    background: var(--text-3);
    color: var(--text-inverse);
}
.tier-lock {
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    color: var(--text-3);
    opacity: 0.8;
    flex-shrink: 0;
}
.tier-lock > svg {
    display: block;
    width: 12px;
    height: 12px;
}

/* Settings card locked-state — dim + desaturate the body (no blur) so
   the locked controls are clearly inactive but still legible, and
   overlay an interactive "Available in Enterprise" notice on top. */
.card.is-tier-locked-card {
    position: relative;
}
.card.is-tier-locked-card > .card-body {
    opacity: 0.32;
    filter: saturate(0.4);
    pointer-events: none;
    user-select: none;
}
.tier-locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    border-radius: inherit;
    text-align: center;
    z-index: 2;
    color: var(--text-2);
    /* Overlay itself stays fully interactive — the body's
       pointer-events:none does not cascade because the overlay is a
       sibling of the body, not a descendant. */
    pointer-events: auto;
    /* Subtle radial wash from the centre so the CTA cluster has a
       clean reading area without obscuring the dimmed controls. */
    background: radial-gradient(ellipse at center,
        rgba(11, 25, 41, 0.72) 0%,
        rgba(11, 25, 41, 0.35) 70%,
        rgba(11, 25, 41, 0.0) 100%);
}
.tier-locked-overlay > svg {
    color: var(--accent);
    flex-shrink: 0;
}
.tier-locked-overlay-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tier-locked-overlay-text > strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: 0.01em;
}
.tier-locked-overlay-text > span {
    font-size: 12px;
    color: var(--text-2);
}
.tier-locked-overlay-cta {
    margin-top: 6px;
    padding: 9px 18px;
    background: var(--accent);
    color: var(--text-inverse);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(211, 158, 87, 0.35);
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                filter var(--t-fast) var(--ease-out);
}
.tier-locked-overlay-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 4px 12px rgba(211, 158, 87, 0.45);
}
.tier-locked-overlay-cta:active {
    transform: translateY(0);
}

/* SQL Editor sidebar "Cortex AI" section locked state — dim the
   buttons so users see they're inactive without disabling clicks
   (clicks still fire the upsell modal via the handlers' tier gate). */
.sqled-tool-section.is-tier-locked-section .sqled-cortex-btn {
    opacity: 0.4;
    filter: saturate(0.5);
    cursor: pointer;
}
.sqled-tool-section.is-tier-locked-section .sqled-cortex-btn:hover {
    opacity: 0.55;
}

/* === krish-idbe module-port CSS (Iron Dome + Query IQ + Log IQ + shared) ===
   Appended 2026-05-25 to make the 3 ported view containers render correctly.
   See docs/roadmap.md "Post-v0.5.1 — landed (2026-05-25)" sections. */

/* ═══════════ IRON DOME (krish-idbe port), 2026-05-25 ═══════════ */
/* ═══════════ IRON DOME ═══════════ */
.irondome-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
@media (max-width: 1024px) { .irondome-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .irondome-kpi-row { grid-template-columns: repeat(2, 1fr); } }

.irondome-kpi {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); position: relative; overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base), transform var(--t-fast);
  animation: kpiPulseIn 0.5s var(--ease-out) forwards;
}
.irondome-kpi:nth-child(2) { animation-delay: 60ms; }
.irondome-kpi:nth-child(3) { animation-delay: 120ms; }
.irondome-kpi:nth-child(4) { animation-delay: 180ms; }
.irondome-kpi:nth-child(5) { animation-delay: 240ms; }
.irondome-kpi:hover { border-color: var(--border-mid); box-shadow: 0 4px 16px rgba(0,0,0,0.15); transform: translateY(-2px); }
.irondome-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent 0%,rgba(211,158,87,0.3) 50%,transparent 100%); opacity:0; transition:opacity var(--t-base); }
.irondome-kpi:hover::before { opacity:1; }
.irondome-kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }
.irondome-kpi-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.irondome-kpi-icon { width: 28px; height: 28px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; }
.irondome-kpi-icon.shield  { background: rgba(52,211,153,0.1); color: var(--success); }
.irondome-kpi-icon.danger  { background: rgba(248,113,113,0.1); color: var(--danger); }
.irondome-kpi-icon.warning { background: rgba(251,191,36,0.1); color: var(--warning); }
.irondome-kpi-icon.info    { background: rgba(96,165,250,0.1); color: var(--info); }
.irondome-kpi-icon.accent  { background: rgba(211,158,87,0.1); color: var(--accent); }
.irondome-kpi-value { font-size: 24px; font-weight: 700; color: var(--text-1); font-family: var(--font-mono); letter-spacing: -0.02em; line-height: 1.2; }
.irondome-kpi-sub { font-size: 11px; color: var(--text-4); margin-top: 2px; }

/* Firewall status toggle */
.irondome-status { display: flex; align-items: center; gap: var(--sp-2); }
.irondome-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.irondome-status-dot.active { background: var(--success); box-shadow: 0 0 8px rgba(52,211,153,0.5); }
.irondome-status-dot.inactive { background: var(--danger); }

/* Rule card */
/* Test Mode Banner */
.idome-test-banner { padding: 0 var(--sp-4); }
.idome-test-banner-inner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4); margin-bottom: var(--sp-3);
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--r-md); color: var(--warning); font-size: 13px;
  animation: testModePulse 2s ease-in-out infinite;
}
@keyframes testModePulse { 0%,100%{border-color:rgba(245,158,11,0.25)} 50%{border-color:rgba(245,158,11,0.5)} }
.idome-test-active { color: var(--warning) !important; border-color: var(--warning) !important; background: rgba(245,158,11,0.08) !important; }
/* Rule toggle layout */
.irondome-rule-toggle { flex-shrink: 0; }
.toggle-sm .toggle-slider { width: 32px; height: 18px; }
.toggle-sm .toggle-slider:before { width: 14px; height: 14px; left: 2px; bottom: 2px; }
.toggle-sm input:checked + .toggle-slider:before { transform: translateX(14px); }
.irondome-rule-disabled { opacity: 0.45; }
.irondome-rule-disabled .irondome-rule-name { text-decoration: line-through; }
.idome-rule-del { opacity: 0; color: var(--danger) !important; transition: opacity var(--t-fast); }
.irondome-rule:hover .idome-rule-del { opacity: 1; }

.irondome-rule {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.irondome-rule:last-child { border-bottom: none; }
.irondome-rule:hover { background: rgba(255,255,255,0.02); }
.irondome-rule-info { flex: 1; min-width: 0; }
.irondome-rule-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.irondome-rule-desc { font-size: 11px; color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irondome-rule-meta { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }

/* Severity badges for Iron Dome */
.severity-badge {
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full);
  letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent;
}
.severity-badge.critical { background: rgba(248,113,113,0.1); color: var(--danger); border-color: rgba(248,113,113,0.2); }
.severity-badge.high     { background: rgba(251,191,36,0.1);  color: var(--warning); border-color: rgba(251,191,36,0.2); }
.severity-badge.medium   { background: rgba(211,158,87,0.1);  color: var(--accent);  border-color: rgba(211,158,87,0.2); }
.severity-badge.low      { background: rgba(96,165,250,0.1);  color: var(--info);    border-color: rgba(96,165,250,0.2); }

/* Incident detail panel */
.incident-detail {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-5); margin-top: var(--sp-4);
  border-left: 3px solid var(--danger);
  animation: moduleReveal 0.3s var(--ease-out) forwards;
}
.incident-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
.incident-detail-item { }
.incident-detail-label { font-size: 10px; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.incident-detail-value { font-size: 13px; color: var(--text-1); margin-top: 2px; }

/* Query Tester */
.irondome-test-result {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-5); margin-top: var(--sp-4);
  animation: moduleReveal 0.3s var(--ease-out) forwards;
}
.irondome-test-result.safe { border-left: 3px solid var(--success); }
.irondome-test-result.threat { border-left: 3px solid var(--danger); }
.irondome-test-result h4 { font-size: 14px; font-weight: 600; margin-bottom: var(--sp-3); }
.irondome-test-result.safe h4 { color: var(--success); }
.irondome-test-result.threat h4 { color: var(--danger); }

/* User behavior profiles */
.irondome-profile {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4); margin-bottom: var(--sp-3);
  transition: all var(--t-base) var(--ease-out);
}
.irondome-profile:hover { border-color: var(--border-mid); box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.irondome-profile-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.irondome-profile-avatar { width: 32px; height: 32px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--brand-primary), var(--brand-light)); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.irondome-profile-name { font-size: 14px; font-weight: 600; color: var(--text-1); }
.irondome-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }


/* ═══════════ LOG VIEWER (krish-idbe port), 2026-05-25 ═══════════ */
/* ═══════════ LOG VIEWER ═══════════ */
.log-viewer {
  max-height: 520px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
}
.log-entry {
  display: flex;
  gap: var(--sp-3);
  padding: 6px var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.log-entry:hover { background: rgba(255,255,255,0.02); }
.log-entry-time { color: var(--text-4); flex-shrink: 0; width: 150px; font-size: 11px; }
.log-entry-level {
  flex-shrink: 0;
  width: 64px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 1px;
}
.log-entry-level.error, .log-entry-level.fatal, .log-entry-level.panic { color: var(--danger); }
.log-entry-level.warning { color: var(--warning); }
.log-entry-level.info    { color: var(--info); }
.log-entry-level.notice  { color: var(--accent); }
.log-entry-level.debug   { color: var(--text-4); }
.log-entry-msg { color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.log-stat-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.log-stat-row:last-child { border-bottom: none; }
.log-stat-label { font-size: 13px; color: var(--text-2); }


/* ═══════════ SHARED MODULE ANIMS + KPI + TIME RANGE (krish-idbe port — used by Iron Dome / Query IQ / Log IQ), 2026-05-25 ═══════════ */
/* ═══════════ SHARED MODULE ANIMATIONS ═══════════ */
@keyframes moduleReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kpiPulseIn {
  0%   { opacity: 0; transform: scale(0.95); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .module-reveal, .kpi-animate, [class*="tuner-"], [class*="logiq-"] { animation: none !important; }
}

/* Staggered reveal for tab panel contents */
.module-reveal { animation: moduleReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.module-reveal:nth-child(2) { animation-delay: 60ms; }
.module-reveal:nth-child(3) { animation-delay: 120ms; }
.module-reveal:nth-child(4) { animation-delay: 180ms; }

/* ═══════════ SHARED KPI CARDS (used by both modules) ═══════════ */
.tuner-kpi-row, .logiq-kpi-row {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.tuner-kpi-row { grid-template-columns: repeat(4, 1fr); }
.logiq-kpi-row { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) { .logiq-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .logiq-kpi-row, .tuner-kpi-row { grid-template-columns: repeat(2, 1fr); } }

.tuner-kpi, .logiq-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-fast);
  animation: kpiPulseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.tuner-kpi:nth-child(2), .logiq-kpi:nth-child(2) { animation-delay: 60ms; }
.tuner-kpi:nth-child(3), .logiq-kpi:nth-child(3) { animation-delay: 120ms; }
.tuner-kpi:nth-child(4), .logiq-kpi:nth-child(4) { animation-delay: 180ms; }
.tuner-kpi:nth-child(5), .logiq-kpi:nth-child(5) { animation-delay: 240ms; }

.tuner-kpi:hover, .logiq-kpi:hover {
  border-color: var(--border-mid);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}
/* Subtle top-edge accent line */
.tuner-kpi::before, .logiq-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(211,158,87,0.3) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--t-base);
}
.tuner-kpi:hover::before, .logiq-kpi:hover::before { opacity: 1; }

.tuner-kpi-label, .logiq-kpi-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.tuner-kpi-value, .logiq-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-1);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.logiq-kpi-value.danger { color: var(--danger); }
.logiq-kpi-value.warning { color: var(--warning); }

/* ═══════════ ENHANCED TIME RANGE + TAB CONTROLS ═══════════ */
.time-range-btns {
  display: flex;
  gap: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px;
}
.time-range-btn {
  padding: 5px 14px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  border-radius: calc(var(--r-sm) - 2px);
  font-family: var(--font-ui);
  transition: all var(--t-fast) var(--ease-out);
  position: relative;
}
.time-range-btn.active {
  background: var(--bg-elevated);
  color: var(--text-1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
}
.time-range-btn:not(.active):hover { color: var(--text-2); background: rgba(255,255,255,0.02); }


/* ═══════════ QUERY IQ (krish-idbe port), 2026-05-25 ═══════════ */
/* ═══════════ QUERY IQ ═══════════ */
/* Suggestion Cards — premium with depth */
.tuner-suggestion-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-left: 3px solid var(--text-4);
  transition: all var(--t-base) var(--ease-out);
  position: relative;
}
.tuner-suggestion-card:hover {
  border-color: var(--border-mid);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.tuner-suggestion-card.critical { border-left-color: var(--danger); }
.tuner-suggestion-card.high     { border-left-color: var(--warning); }
.tuner-suggestion-card.medium   { border-left-color: var(--accent); }
.tuner-suggestion-card.low      { border-left-color: var(--success); }

.tuner-suggestion-header { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }

.tuner-action-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.tuner-action-badge.index      { background: rgba(96,165,250,0.1);  color: var(--info);    border-color: rgba(96,165,250,0.2); }
.tuner-action-badge.rewrite    { background: rgba(251,191,36,0.1);  color: var(--warning); border-color: rgba(251,191,36,0.2); }
.tuner-action-badge.config     { background: rgba(52,211,153,0.1);  color: var(--success); border-color: rgba(52,211,153,0.2); }
.tuner-action-badge.maintenance{ background: rgba(211,158,87,0.1);  color: var(--accent);  border-color: rgba(211,158,87,0.2); }

.tuner-risk-pill {
  font-size: 10px; font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-full);
  margin-left: auto;
  border: 1px solid transparent;
}
.tuner-risk-pill.low    { background: rgba(52,211,153,0.08);  color: var(--success); border-color: rgba(52,211,153,0.15); }
.tuner-risk-pill.medium { background: rgba(251,191,36,0.08);  color: var(--warning); border-color: rgba(251,191,36,0.15); }
.tuner-risk-pill.high   { background: rgba(248,113,113,0.08); color: var(--danger);  border-color: rgba(248,113,113,0.15); }

.tuner-suggestion-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: var(--sp-3); }

.tuner-suggestion-sql {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.6;
}

.tuner-suggestion-footer { display: flex; align-items: center; justify-content: space-between; }
.tuner-improvement { font-size: 12px; color: var(--success); font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* Before/After Code Comparison */
.tuner-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 768px) { .tuner-before-after { grid-template-columns: 1fr; } }
.tuner-code-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base);
}
.tuner-code-panel:hover { border-color: var(--border-mid); }
.tuner-code-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-2);
}
.tuner-code-body {
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.7;
  max-height: 220px;
  overflow-y: auto;
}

/* Execution Plan Tree — refined with depth cues */
.plan-tree { padding: var(--sp-3) 0; }
.plan-node { margin-left: 24px; position: relative; }
.plan-node::before {
  content: '';
  position: absolute;
  left: -16px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--border-mid), var(--border));
}
.plan-node:last-child::before { bottom: 50%; }
.plan-node::after {
  content: '';
  position: absolute;
  left: -16px; top: 16px;
  width: 12px; height: 1px;
  background: var(--border-mid);
}
.plan-node-root { margin-left: 0; }
.plan-node-root::before, .plan-node-root::after { display: none; }

.plan-node-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  margin: 3px 0;
  border-radius: var(--r-sm);
  font-size: 12px;
  cursor: default;
  transition: all var(--t-fast) var(--ease-out);
  border: 1px solid transparent;
}
.plan-node-header:hover {
  background: rgba(255,255,255,0.03);
  border-color: var(--border);
}
.plan-node-type { font-weight: 600; color: var(--text-1); white-space: nowrap; }
.plan-node-cost { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.plan-node-rows { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }
.plan-node-bar {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(211,158,87,0.4));
  min-width: 3px;
  max-width: 120px;
  transition: width var(--t-base);
}
/* Node type color coding */
.plan-node-seq-scan .plan-node-header   { background: rgba(248,113,113,0.06); border-left: 2px solid var(--danger); }
.plan-node-index-scan .plan-node-header { background: rgba(52,211,153,0.06);  border-left: 2px solid var(--success); }
.plan-node-hash-join .plan-node-header  { background: rgba(96,165,250,0.06);  border-left: 2px solid var(--info); }
.plan-node-sort .plan-node-header       { background: rgba(251,191,36,0.06);  border-left: 2px solid var(--warning); }

.plan-kpi-row {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  background: var(--bg-surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.plan-kpi { font-size: 12px; color: var(--text-3); }
.plan-kpi strong { color: var(--text-1); font-family: var(--font-mono); font-size: 13px; }

.plan-toggle-row { display: flex; gap: 2px; }


/* ═══════════ LOG IQ (krish-idbe port), 2026-05-25 ═══════════ */
/* ═══════════ LOG IQ ═══════════ */
/* Chart Grid — polished with shadows */
.logiq-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 768px) { .logiq-chart-grid { grid-template-columns: 1fr; } }

.logiq-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-fast);
  animation: moduleReveal 0.5s var(--ease-out) forwards;
}
.logiq-chart-card:nth-child(2) { animation-delay: 80ms; }
.logiq-chart-card:nth-child(3) { animation-delay: 160ms; }
.logiq-chart-card:nth-child(4) { animation-delay: 240ms; }
.logiq-chart-card:hover {
  border-color: var(--border-mid);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.logiq-chart-title {
  font-size: 13px; font-weight: 600;
  color: var(--text-1);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.logiq-chart-sub {
  font-size: 11px; font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0.01em;
}
.logiq-chart-body { padding: var(--sp-3); }

/* Trends summary strip — the 4 numeric tiles above the chart grid */
.logiq-summary-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color var(--t-base);
}
.logiq-summary-tile:hover { border-color: var(--border-mid); }
.logiq-summary-label {
  font-size: 10px; font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.logiq-summary-value {
  font-size: 22px; font-weight: 700;
  color: var(--text-1);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.logiq-summary-value.danger { color: #f87171; }
.logiq-summary-value.warning { color: #fbbf24; }
@media (max-width: 768px) {
  #logiq-trend-summary { grid-template-columns: 1fr 1fr !important; }
}

/* Category Filter Chips */
.logiq-category-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.logiq-category-chip {
  padding: 5px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  background: none;
  font-family: var(--font-ui);
  transition: all var(--t-fast) var(--ease-out);
}
.logiq-category-chip.active {
  background: rgba(211,158,87,0.12);
  color: var(--accent);
  border-color: rgba(211,158,87,0.35);
  box-shadow: 0 0 12px rgba(211,158,87,0.08);
}
.logiq-category-chip:not(.active):hover {
  color: var(--text-2);
  border-color: var(--border-mid);
  background: rgba(255,255,255,0.02);
}

/* Pattern Cards — premium with expand animation */
.logiq-pattern-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  transition: all var(--t-base) var(--ease-out);
  position: relative;
}
.logiq-pattern-card:hover {
  border-color: var(--border-mid);
  background: var(--bg-card-hover);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
/* Patterns that actually fired in the live log — accent + order to top. */
.logiq-pattern-card.detected {
  border-left: 3px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 5%, var(--bg-card));
}
.logiq-pattern-card.expanded {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 0 0 1px rgba(211,158,87,0.1);
}
.logiq-pattern-header { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.logiq-pattern-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.logiq-pattern-cat {
  font-size: 10px; font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.04);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
}
.logiq-pattern-desc { font-size: 12px; color: var(--text-3); margin-top: var(--sp-2); line-height: 1.5; }
.logiq-pattern-meta { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); font-size: 11px; color: var(--text-4); }
.logiq-pattern-detail {
  display: none;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  animation: moduleReveal 0.3s var(--ease-out) forwards;
}
.logiq-pattern-card.expanded .logiq-pattern-detail { display: block; }
/* dim un-detected catalogue rows so detected ones pop in 'all' view */
.logiq-pattern-card.dim { opacity: 0.5; }
.logiq-pattern-card.dim:hover { opacity: 0.85; }
.logiq-pattern-rec { font-size: 12px; color: var(--success); line-height: 1.6; margin-top: var(--sp-2); }

/* Patterns view toggle — segmented switch between
   Detected / Auto-fixable / Full catalogue. */
.logiq-view-toggle {
  display: inline-flex; gap: 0;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 2px;
}
.logiq-view-btn {
  background: transparent; border: 0; color: var(--text-3);
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: calc(var(--r-sm) - 2px); cursor: pointer;
}
.logiq-view-btn:hover { color: var(--text-2); }
.logiq-view-btn.active { background: var(--accent); color: var(--text-inverse); }

/* AI Analysis error rendering — softer red border, panel layout */
.logiq-ai-error { border-left: 3px solid var(--danger); padding-left: var(--sp-3); margin-top: var(--sp-3); }
.logiq-ai-error h4 { font-size: 14px; font-weight: 600; margin-bottom: var(--sp-2); }
.logiq-pattern-regex {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-base);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  margin-top: var(--sp-3);
  word-break: break-all;
  line-height: 1.5;
}

/* Upload Area — polished drag-and-drop */
.logiq-upload-area {
  border: 2px dashed var(--border-mid);
  border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--t-base) var(--ease-out);
  position: relative;
}
.logiq-upload-area:hover {
  border-color: rgba(211,158,87,0.4);
  background: rgba(211,158,87,0.03);
}
.logiq-upload-area.dragover {
  border-color: var(--accent);
  background: rgba(211,158,87,0.06);
  box-shadow: 0 0 24px rgba(211,158,87,0.08);
  transform: scale(1.01);
}
.logiq-upload-area svg { margin-bottom: var(--sp-3); opacity: 0.4; }
.logiq-upload-text { font-size: 14px; font-weight: 500; color: var(--text-2); }
.logiq-upload-hint { font-size: 12px; color: var(--text-4); margin-top: var(--sp-2); }

/* File List Items */
.logiq-file-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.logiq-file-item:last-child { border-bottom: none; }
.logiq-file-item:hover { background: rgba(255,255,255,0.015); }
.logiq-file-name { font-size: 13px; font-weight: 500; color: var(--text-1); flex: 1; }
.logiq-file-size { font-size: 11px; color: var(--text-4); font-family: var(--font-mono); }
.logiq-file-status {
  font-size: 10px; font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
}
.logiq-file-status.uploaded  { background: rgba(96,165,250,0.1);  color: var(--info);    border-color: rgba(96,165,250,0.2); }
.logiq-file-status.analyzing { background: rgba(251,191,36,0.1);  color: var(--warning); border-color: rgba(251,191,36,0.2); }
.logiq-file-status.analyzed  { background: rgba(52,211,153,0.1);  color: var(--success); border-color: rgba(52,211,153,0.2); }
.logiq-file-status.error     { background: rgba(248,113,113,0.1); color: var(--danger);  border-color: rgba(248,113,113,0.2); }

/* AI Result Card */
.logiq-ai-result {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
  border-left: 3px solid var(--accent);
  animation: moduleReveal 0.4s var(--ease-out) forwards;
  position: relative;
}
.logiq-ai-result::before {
  content: '';
  position: absolute;
  top: -1px; right: -1px;
  width: 50px; height: 50px;
  background: radial-gradient(circle at top right, rgba(211,158,87,0.06), transparent 70%);
  pointer-events: none;
}
.logiq-ai-result h4 { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-3); }
.logiq-ai-result p { font-size: 13px; color: var(--text-2); line-height: 1.7; }

/* Expandable Log Entries */
.log-entry.expandable { cursor: pointer; transition: background var(--t-fast); }
.log-entry.expandable:hover { background: rgba(255,255,255,0.025) !important; }
.log-entry.expanded { background: rgba(211,158,87,0.03) !important; }
.log-entry-detail {
  display: none;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 150px + var(--sp-3));
  background: rgba(255,255,255,0.012);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  animation: moduleReveal 0.25s var(--ease-out) forwards;
}
.log-entry.expanded + .log-entry-detail { display: block; }
.log-entry-detail-row { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.log-entry-detail-label { color: var(--text-4); width: 80px; flex-shrink: 0; font-weight: 500; text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; padding-top: 2px; }
.log-entry-detail-value { color: var(--text-2); word-break: break-all; line-height: 1.5; }

.log-viewer { max-height: 560px; }
.log-pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) 0; }

/* ═══════════ ALERTS COMMAND CENTER ═══════════ */
.alerts-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.alerts-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); transition: border-color var(--t-fast); }
.alerts-kpi:hover { border-color: var(--border-mid); }
.alerts-kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.alerts-kpi-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.alerts-kpi-value { font-size: 28px; font-weight: 700; font-family: var(--font-mono); color: var(--text-1); }
.alerts-kpi.critical .alerts-kpi-value { color: var(--danger); }
.alerts-kpi.warning .alerts-kpi-value { color: var(--warning); }
.alerts-kpi.info .alerts-kpi-value { color: var(--info); }
.alerts-kpi.resolved .alerts-kpi-value { color: var(--success); }
.alerts-kpi.total .alerts-kpi-value { color: var(--accent); }
@media (max-width: 900px) { .alerts-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .alerts-kpi-row { grid-template-columns: repeat(2, 1fr); } }

.alerts-command-center { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-4); min-height: 450px; }
@media (max-width: 1024px) { .alerts-command-center { grid-template-columns: 1fr; } }
.alerts-timeline-panel { overflow-y: auto; max-height: 600px; display: flex; flex-direction: column; gap: var(--sp-2); }
.alerts-detail-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); position: sticky; top: 0; overflow-y: auto; max-height: 600px; }

.alerts-timeline-card { padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--border); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: all var(--t-fast) var(--ease-out); }
.alerts-timeline-card:hover { background: var(--bg-card-hover); border-color: var(--border-mid); }
.alerts-timeline-card.selected { border-left-color: var(--accent); background: rgba(211,158,87,0.04); }
.alerts-timeline-card.sev-CRITICAL { border-left-color: var(--danger); }
.alerts-timeline-card.sev-WARNING { border-left-color: var(--warning); }
.alerts-timeline-card.sev-INFO { border-left-color: var(--info); }
.alerts-timeline-card.sev-ERROR { border-left-color: #f97316; }
.alerts-timeline-card .atc-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-1); }
.alerts-timeline-card .atc-meta { font-size: 11px; color: var(--text-3); display: flex; gap: var(--sp-3); align-items: center; }
.alerts-timeline-card .atc-source { font-family: var(--font-mono); font-size: 10px; }

.alerts-severity-filters { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.alerts-sev-btn { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-full); padding: 4px 14px; font-size: 12px; font-weight: 500; color: var(--text-3); cursor: pointer; transition: all var(--t-fast); font-family: var(--font-ui); }
.alerts-sev-btn:hover { border-color: var(--border-mid); color: var(--text-1); }
.alerts-sev-btn.active { background: var(--accent-dim); border-color: var(--border-accent); color: var(--accent); font-weight: 600; }

.alerts-detail-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
.alerts-detail-item { display: flex; justify-content: space-between; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.alerts-detail-label { color: var(--text-3); }
.alerts-detail-value { color: var(--text-1); font-weight: 500; }

.alerts-healing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.alerts-healing-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); transition: border-color var(--t-fast); }
.alerts-healing-card:hover { border-color: var(--border-mid); }
.alerts-healing-card .ahc-name { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-1); }
.alerts-healing-card .ahc-desc { font-size: 12px; color: var(--text-3); margin-bottom: var(--sp-3); line-height: 1.5; }
.alerts-healing-card .ahc-meta { display: flex; justify-content: space-between; align-items: center; }
.alerts-healing-card .ahc-limit { font-size: 10px; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.05em; }

.alerts-history-filters { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; align-items: center; }

.alerts-rule-predefined { font-size: 9px; background: var(--accent-dim); color: var(--accent); padding: 2px 6px; border-radius: var(--r-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

/* ── Alerts — v2 fluid redesign ─────────────────────────────────────────── */

/* KPI cards: calm semantic left-rail + hover lift + count-up-friendly digits */
.alerts-kpi { position: relative; overflow: hidden;
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out); }
.alerts-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--text-4); opacity: 0.85; }
.alerts-kpi.critical::before { background: var(--danger); }
.alerts-kpi.warning::before  { background: var(--warning); }
.alerts-kpi.info::before     { background: var(--info); }
.alerts-kpi.resolved::before { background: var(--success); }
.alerts-kpi.total::before    { background: var(--accent); }
.alerts-kpi:hover { transform: translateY(-2px); border-color: var(--border-accent); box-shadow: var(--shadow-md); }
.alerts-kpi-value { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Timeline card: severity icon + content row, reveal stagger */
.alerts-timeline-card { display: flex; align-items: flex-start; gap: var(--sp-3); }
.alerts-timeline-card .atc-sevicon { flex-shrink: 0; width: 26px; height: 26px;
  border-radius: var(--r-md); display: grid; place-items: center; margin-top: 1px; }
.alerts-timeline-card .atc-sevicon svg { width: 15px; height: 15px; }
.alerts-timeline-card .atc-sevicon.sev-CRITICAL { background: var(--danger-bg); color: var(--danger); }
.alerts-timeline-card .atc-sevicon.sev-WARNING,
.alerts-timeline-card .atc-sevicon.sev-ERROR { background: var(--warning-bg); color: var(--warning); }
.alerts-timeline-card .atc-sevicon.sev-INFO { background: var(--info-bg); color: var(--info); }
.alerts-timeline-card .atc-main { flex: 1; min-width: 0; }
.alerts-timeline-card .atc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Channels: grid of branded channel cards */
.alerts-channels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-3); }
.alerts-channel-card { display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out); }
.alerts-channel-card:hover { transform: translateY(-2px); border-color: var(--border-mid); box-shadow: var(--shadow-sm); }
.alerts-channel-card .acc-icon { flex-shrink: 0; width: 38px; height: 38px;
  border-radius: var(--r-md); display: grid; place-items: center;
  font-weight: 700; font-size: 16px; color: #fff; background: var(--accent); }
.alerts-channel-card .acc-icon.ct-slack    { background: #4A154B; }
.alerts-channel-card .acc-icon.ct-discord  { background: #5865F2; }
.alerts-channel-card .acc-icon.ct-telegram { background: #229ED9; }
.alerts-channel-card .acc-icon.ct-jira     { background: #0052CC; }
.alerts-channel-card .acc-icon.ct-email    { background: var(--info); }
.alerts-channel-card .acc-icon.ct-webhook  { background: var(--text-3); color: var(--text-inverse); }
.alerts-channel-card .acc-icon.ct-in_app,
.alerts-channel-card .acc-icon.ct-pagerduty { background: var(--accent); color: var(--text-inverse); }
.alerts-channel-card .acc-main { flex: 1; min-width: 0; }
.alerts-channel-card .acc-name { font-size: 13px; font-weight: 600; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alerts-channel-card .acc-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sp-2); margin-top: 3px; }
.alerts-channel-card .acc-sub .badge { white-space: nowrap; }
.alerts-channel-card .acc-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; align-self: flex-start; }
.alerts-ch-type { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); }

/* Desaturated badges inside the alerts view (match Security & Audit) */
#view-alerts .severity-badge, #view-alerts .badge { border: 1px solid var(--border); }

/* ═══════════════ BACKUP & RESTORE ═══════════════ */
.bkp-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.bkp-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}
.bkp-kpi-label {
    font-size: 12px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.bkp-kpi-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-1);
}
.bkp-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    /* At 390px the five tabs are wider than the screen; the strip scrolls
       inside itself instead of widening the page. */
    max-width: 100%;
    overflow-x: auto;
}
.bkp-tabs .tab-btn { flex-shrink: 0; }
.bkp-tab-panel { padding: 8px 0; }
.bkp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.bkp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.bkp-table th {
    background: var(--bg-elevated);
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
}
.bkp-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-1);
}
.bkp-table tr:last-child td { border-bottom: none; }
.bkp-table .bkp-empty {
    text-align: center;
    color: var(--text-3);
    padding: 32px;
}
.bkp-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.bkp-status-completed { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
.bkp-status-running { background: rgba(211, 158, 87, 0.15); color: var(--accent); }
.bkp-status-failed { background: rgba(248, 81, 73, 0.15); color: #f85149; }
.bkp-status-expired { background: rgba(139, 148, 158, 0.15); color: var(--text-3); }
.bkp-status-proposed,
.bkp-status-awaiting_co_approval,
.bkp-status-approved { background: rgba(88, 166, 255, 0.15); color: #58a6ff; }
.bkp-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.bkp-modal-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 24px; min-width: 400px; max-width: 90vw;
}
.bkp-modal-card h3 { margin: 0 0 16px 0; color: var(--text-1); }
.bkp-modal-card label { display: block; color: var(--text-2); margin-bottom: 6px; font-size: 13px; }
.bkp-modal-card input[type="password"] {
    width: 100%; padding: 10px 12px; border-radius: 6px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--text-1); font-family: monospace;
}
.bkp-modal-warning {
    color: var(--text-2); font-size: 12px; margin: 12px 0;
    background: rgba(211, 158, 87, 0.08); border-left: 3px solid var(--accent);
    padding: 8px 12px; border-radius: 4px;
}
.bkp-modal-actions {
    display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px;
}
.bkp-empty-state {
    text-align: center; color: var(--text-3); padding: 48px 16px;
    background: var(--bg-card); border: 1px dashed var(--border);
    border-radius: 8px;
}
.bkp-restore-wizard {
    padding: 32px 16px; color: var(--text-2);
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px;
}

.bkp-modal-wide { min-width: 520px; max-width: 640px; }
.bkp-form-body { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.bkp-form-body label { display: block; color: var(--text-2); font-size: 13px; margin-top: 4px; }
.bkp-form-body input[type="text"],
.bkp-form-body input[type="password"],
.bkp-form-body input[type="number"],
.bkp-form-body select,
.bkp-form-body textarea {
    width: 100%; padding: 8px 10px; border-radius: 6px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--text-1); font-size: 13px;
}
.bkp-form-body input[type="checkbox"] { width: auto; margin-right: 6px; }
.bkp-hint { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.bkp-gfs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.bkp-gfs-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; }
.bkp-stg-cfg { padding: 8px 0; border-top: 1px dashed var(--border); margin-top: 8px; }

/* Log IQ — Phase 1b-1: scope toggle + staleness banner. */
.logiq-scope-toggle { display: inline-flex; gap: 2px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; }
.logiq-scope-btn { background: transparent; border: 0; color: var(--text-2); font-size: 12px; padding: 3px 12px; border-radius: calc(var(--r-sm) - 2px); cursor: pointer; }
.logiq-scope-btn.active { background: var(--accent); color: var(--text-inverse); }
.logiq-staleness-banner { background: color-mix(in srgb, var(--warning) 12%, var(--bg-card)); border: 1px solid var(--warning); color: var(--text-1); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-size: 12px; margin-bottom: var(--sp-3); }

/* Log IQ — v0.6.x pipeline frontend wiring:
   · SIEM deep-link styling on pattern cards + top-error tooltip
   · Server-paginated analysis history rows on the Analysis tab
   · Ingest-secret one-shot display card on the Sources tab
   · Compact data-table-sm variant for the per-node freshness table */
.logiq-siem-link { color: var(--accent); font-size: 11px; font-weight: 600; text-decoration: none; }
.logiq-siem-link:hover { text-decoration: underline; }

.logiq-history-row { display: grid; grid-template-columns: 160px 1fr 80px 90px 100px auto; gap: var(--sp-3); align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.logiq-history-row:last-child { border-bottom: none; }
.logiq-history-row:hover { background: rgba(255, 255, 255, 0.015); }

.logiq-secret-box { border: 1px solid var(--warning); background: color-mix(in srgb, var(--warning) 6%, var(--bg-card)); border-radius: var(--r-sm); padding: var(--sp-3); margin-top: var(--sp-3); }

/* data-table-sm — used by the per-node freshness table inside a card body. */
.data-table-sm { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table-sm th { text-align: left; padding: 8px 12px; color: var(--text-3); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.data-table-sm td { padding: 8px 12px; color: var(--text-2); border-bottom: 1px solid var(--border); }
.data-table-sm tbody tr:last-child td { border-bottom: none; }
.data-table-sm tbody tr:hover { background: rgba(255, 255, 255, 0.015); }

/* Metrics freshness + diagnostic truncation (2026-06 scale-hardening) */
#last-refresh-time.metrics-degraded { color: var(--warning, #d39e57); }
.diag-truncation-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-3, #8a8f98);
  font-style: italic;
}

/* ═══════════════ DATA MASKING ═══════════════ */
.dm-root { margin-top: 8px; }
.dm-loading, .dm-error { padding: 24px; text-align: center; color: var(--text-3); font-size: 13px; }
.dm-error { color: var(--danger); }
.dm-muted { color: var(--text-3); }

.dm-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* ── sidebar ── */
.dm-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: 8px;
}
.dm-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.dm-sidebar-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.dm-count {
  min-width: 20px; text-align: center; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--text-2);
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.dm-policy-list { display: flex; flex-direction: column; padding: 8px; gap: 6px; max-height: calc(100vh - 220px); overflow-y: auto; }
.dm-side-empty { padding: 20px 14px; text-align: center; color: var(--text-3); font-size: 12px; line-height: 1.6; }

.dm-policy-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.dm-policy-item:hover { background: var(--bg-elevated); }
.dm-policy-item.active { background: var(--bg-elevated); border-color: var(--accent); }
.dm-policy-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dm-policy-item-name { font-weight: 600; color: var(--text-1); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-policy-item-sub { font-size: 11px; color: var(--text-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-policy-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.dm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dm-dot.on { background: #4ea56a; box-shadow: 0 0 0 2px rgba(78,165,106,.18); }
.dm-dot.off { background: var(--text-3); opacity: .5; }

/* strategy chips */
.dm-chip {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  background: var(--bg-overlay, var(--bg-elevated)); border: 1px solid var(--border); color: var(--text-2);
}
.dm-chip.empty { font-weight: 500; color: var(--text-3); }
/* Light theme: `--bg-overlay` there is the 70 % slate modal scrim, so a
   plain chip painted slate-on-slate (1.4:1). Strategy chips below keep their
   own tint; this only replaces the base. */
[data-theme="light"] .dm-chip { background: var(--bg-elevated); }
.dm-chip.warn { color: var(--accent); border-color: var(--accent); background: transparent; }
.dm-chip.s-redact      { color: #c9504d; border-color: rgba(201,80,77,.4);  background: rgba(201,80,77,.10); }
.dm-chip.s-pii_redact  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dm-chip.s-hash        { color: #4f8fce; border-color: rgba(79,143,206,.4);  background: rgba(79,143,206,.10); }
.dm-chip.s-partial     { color: #4ea56a; border-color: rgba(78,165,106,.4);  background: rgba(78,165,106,.10); }
/* NULL was --text-3 on the base chip: 1.4:1 in the light theme. --text-2 on
   its own faint tint is >= 4.5:1 in both themes (measured by the browser-pass
   fix harness). */
.dm-chip.s-nullify     { color: var(--text-2); border-color: color-mix(in srgb, var(--text-2) 40%, transparent); background: color-mix(in srgb, var(--text-2) 10%, transparent); }
.dm-chip.s-fixed_token { color: #b5814e; border-color: rgba(181,129,78,.4);  background: rgba(181,129,78,.10); }
.dm-chip.s-oversized, .dm-chip.s-max_cell_bytes, .dm-chip.s-max_text_bytes, .dm-chip.s-max_rows { color: var(--accent); border-color: var(--accent); }

/* ── main pane ── */
.dm-main {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 420px;
  display: flex; flex-direction: column;
}
.dm-empty-main {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 48px 24px; text-align: center;
}
.dm-empty-icon { color: var(--text-3); opacity: .5; }
.dm-empty-title { font-size: 16px; font-weight: 600; color: var(--text-1); }
.dm-empty-sub { font-size: 13px; color: var(--text-3); max-width: 340px; }

/* The actions wrap BELOW the name once the name would get less than ~340px
   beside them (Task 93 D1: at 390px the switch and three buttons kept the
   whole row and left both inputs 11px wide; at 1280px a 42-character name
   was cut at 290px). */
.dm-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px;
  flex-wrap: wrap;
  padding: 16px; border-bottom: 1px solid var(--border);
}
.dm-detail-titles { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dm-title-input {
  font-size: 18px; font-weight: 700; color: var(--text-1);
  background: transparent; border: none; border-bottom: 1px solid transparent;
  padding: 2px 0; width: 100%;
}
.dm-title-input:focus { outline: none; border-bottom-color: var(--accent); }
.dm-desc-input {
  font-size: 13px; color: var(--text-2);
  background: transparent; border: none; padding: 0; width: 100%;
}
.dm-desc-input:focus { outline: none; }
.dm-detail-actions { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.btn.dm-danger, .dm-danger { color: var(--danger); }

/* toggle switch */
.dm-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.dm-switch input { display: none; }
.dm-switch-track {
  width: 34px; height: 18px; border-radius: 999px; background: var(--bg-elevated);
  border: 1px solid var(--border); position: relative; transition: background .15s;
}
.dm-switch-track::after {
  content: ''; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--text-3); transition: transform .15s, background .15s;
}
.dm-switch input:checked + .dm-switch-track { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
.dm-switch input:checked + .dm-switch-track::after { transform: translateX(16px); background: var(--accent); }
.dm-switch-label { font-size: 12px; color: var(--text-2); }

/* tabs */
.dm-tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.dm-tab {
  padding: 12px 14px; background: transparent; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px;
}
.dm-tab:hover { color: var(--text-1); }
.dm-tab.active { color: var(--text-1); border-bottom-color: var(--accent); }
.dm-tab-badge { font-size: 10px; padding: 0 6px; border-radius: 999px; background: var(--bg-elevated); color: var(--text-2); border: 1px solid var(--border); }
.dm-tab-body { padding: 16px; }

.dm-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dm-panel-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
.dm-panel-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.dm-panel-empty {
  padding: 28px 20px; text-align: center; color: var(--text-3); font-size: 13px; line-height: 1.7;
  background: var(--bg-elevated); border: 1px dashed var(--border); border-radius: 8px;
}
.dm-panel-empty .btn { margin-top: 10px; }

/* inputs */
.dm-in {
  width: 100%; padding: 6px 8px; font-size: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; color: var(--text-1);
}
.dm-in:focus { outline: none; border-color: var(--accent); }
.dm-in-num { width: 68px; text-align: center; }
.dm-in-sm { max-width: 180px; }
.dm-mono { font-family: var(--font-mono, monospace); }

/* rules table */
.dm-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.dm-rules-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 760px; }
.dm-rules-table th {
  text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-3); background: var(--bg-elevated); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dm-rules-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dm-rules-table tr:last-child td { border-bottom: none; }
.dm-rule-row.off { opacity: .5; }
.dm-params-cell { min-width: 150px; }
.dm-param-row { display: flex; gap: 4px; }
.dm-noparam { color: var(--text-3); font-style: italic; }
.dm-center { text-align: center; }
.dm-icon-btn {
  background: transparent; border: none; color: var(--text-3); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 5px;
}
.dm-icon-btn:hover { color: var(--danger); background: var(--bg-elevated); }
.dm-mini-switch { position: relative; display: inline-block; width: 30px; height: 16px; cursor: pointer; }
.dm-mini-switch input { display: none; }
.dm-mini-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); transition: background .15s; }
.dm-mini-switch span::after { content: ''; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); transition: transform .15s, background .15s; }
.dm-mini-switch input:checked + span { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
.dm-mini-switch input:checked + span::after { transform: translateX(14px); background: var(--accent); }

.dm-strategy-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.dm-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }

/* live preview */
.dm-live-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px;
  padding: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
}
.dm-field { display: flex; flex-direction: column; gap: 4px; min-width: 170px; flex: 1; }
.dm-field-narrow { min-width: 80px; flex: 0 0 90px; }
.dm-field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); }
.dm-live-controls .dm-in { background: var(--bg-card); }
.dm-live-controls .btn { flex-shrink: 0; }

.dm-report {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
  font-size: 12px; color: var(--text-2);
  padding: 8px 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
}
.dm-report-stat strong { color: var(--accent); font-size: 14px; }
.dm-report-sep { color: var(--text-3); }
.dm-reveal-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); cursor: pointer; }

.dm-result-wrap { max-height: 460px; overflow: auto; }
.dm-result-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dm-result-table th {
  position: sticky; top: 0; z-index: 1; text-align: left; padding: 8px 10px; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--bg-elevated); border-bottom: 1px solid var(--border);
}
.dm-result-table th.dm-col-affected { color: var(--accent); }
.dm-col-tag { font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); text-transform: uppercase; }
/* A value is shown on its own line(s) exactly as stored and never re-wrapped:
   `pre-wrap` + `word-break: break-word` let the table squeeze every column to
   one character at 390px (a UUID over nine lines, a date as "195 / 0-01-02"),
   and even without break-word a UUID still broke at each hyphen. The sample
   box (.dm-result-wrap) scrolls sideways instead. */
.dm-result-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text-1); font-family: var(--font-mono, monospace); white-space: pre; word-break: normal; overflow-wrap: normal; }
.dm-cell-masked { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dm-cell-masked .dm-val-orig { display: none; color: var(--text-3); }
.dm-result-wrap.dm-reveal .dm-cell-masked .dm-val-masked { display: none; }
.dm-result-wrap.dm-reveal .dm-cell-masked .dm-val-orig { display: inline; text-decoration: line-through; text-decoration-color: var(--danger); }

/* sandbox */
.dm-sandbox-actions { display: flex; align-items: center; gap: 8px; }
.dm-sandbox-io { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dm-textarea {
  width: 100%; min-height: 200px; resize: vertical; padding: 10px;
  font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-1);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
}
.dm-textarea:focus { outline: none; border-color: var(--accent); }
.dm-sandbox-out {
  margin: 0; min-height: 200px; padding: 10px; overflow: auto;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-1); font-size: 12px; white-space: pre-wrap; word-break: break-word;
}

/* apply-to-database */
.dm-apply-warn {
  padding: 10px 12px; margin-bottom: 12px; border-radius: 8px; font-size: 12px; color: var(--text-2);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
}
.dm-apply-warn strong { color: var(--text-1); }
.dm-preview { margin-top: 4px; }
.dm-preview-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.dm-preview-targets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; margin-bottom: 8px; }
.dm-preview-warns { margin: 0 0 12px; padding-left: 18px; font-size: 12px; color: var(--warning, #d39e57); }
.dm-preview-warns li { margin: 2px 0; }
.dm-preview-sample-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); margin-bottom: 6px; }
.dm-apply-go {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.dm-mode-radios { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 260px; }
.dm-radio { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-1); cursor: pointer; }
.dm-radio.disabled { opacity: .5; cursor: not-allowed; }
.dm-radio input { margin-top: 2px; accent-color: var(--accent); }
.dm-apply-confirm { display: flex; align-items: flex-end; gap: 10px; }
.dm-apply-confirm .dm-field { min-width: 200px; }
.dm-apply-confirm code { padding: 1px 5px; border-radius: 4px; background: var(--bg-elevated); color: var(--accent); font-family: var(--font-mono, monospace); }
.dm-danger-btn { background: var(--danger); border-color: var(--danger); }
.dm-danger-btn:hover:not(:disabled) { filter: brightness(1.08); }

/* run progress */
.dm-run { padding: 4px; }
.dm-run-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dm-run-status {
  display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-right: 10px;
}
.dm-run-status.run { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.dm-run-status.ok { background: color-mix(in srgb, var(--success, #3fb950) 18%, transparent); color: var(--success, #3fb950); }
.dm-run-status.err { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.dm-run-status.warn { background: color-mix(in srgb, #d39e57 20%, transparent); color: #d39e57; }
.dm-run-target { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.dm-run-target .dm-mono { font-family: var(--font-mono, monospace); }
.dm-run-id { font-size: 11px; color: var(--text-3); }
.dm-progress { height: 10px; border-radius: 6px; background: var(--bg-elevated); overflow: hidden; border: 1px solid var(--border); }
.dm-progress-bar { height: 100%; background: var(--accent); transition: width .5s ease; }
.dm-progress-bar.run { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), var(--accent)); }
.dm-progress-bar.ok { background: var(--success, #3fb950); }
.dm-progress-bar.err { background: var(--danger); }
.dm-progress-bar.warn { background: #d39e57; }
.dm-run-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-top: 8px; }
.dm-run-stats strong { color: var(--accent); }
.dm-run-actions { display: flex; gap: 8px; margin-top: 12px; }
.dm-run-done { margin-top: 10px; font-size: 12px; color: var(--success, #3fb950); }
.dm-run-done code { padding: 1px 5px; border-radius: 4px; background: var(--bg-elevated); font-family: var(--font-mono, monospace); }

@media (max-width: 1100px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track is at least its min-content,
     and the rules table's 760px minimum made the whole editor 794px wide at
     390px instead of scrolling inside .dm-table-wrap. */
  .dm-shell { grid-template-columns: minmax(0, 1fr); }
  .dm-sidebar { position: static; }
  .dm-policy-list { max-height: 260px; }
  .dm-sandbox-io { grid-template-columns: 1fr; }
  .dm-apply-go { flex-direction: column; align-items: stretch; }
  .dm-apply-confirm { flex-wrap: wrap; }
  .dm-tabs { overflow-x: auto; }
  .dm-tab { flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE REPORTS
   ═══════════════════════════════════════════════════════════ */
.report-types-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.report-type-option { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-fast); }
.report-type-option:hover { border-color: var(--accent); }
.report-type-option input[type="radio"] { accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.report-type-content { flex: 1; }
.report-type-name { font-size: 13px; font-weight: 600; color: var(--text-1); display: block; }
.report-type-desc { font-size: 12px; color: var(--text-3); margin-top: 1px; display: block; }

/* ── Remote-server connectivity doctor panel (server-onboarding.js) ───────── */
.conn-diagnosis { margin: 8px 0; }
.conn-diagnosis .diag-muted { color: var(--text-3); font-size: 13px; }
.diag-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.diag-ok { background: var(--success-bg); color: var(--success); }
.diag-fail { background: var(--danger-bg); color: var(--danger); }
.diag-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diag-msg { color: var(--text-2); margin: 6px 0; font-size: 13px; }
.diag-fix { margin: 6px 0; padding: 8px; background: var(--bg-elevated); border-radius: 6px; }
.diag-fix-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-1); font-size: 13px; }
.diag-file { font-weight: 400; color: var(--text-3); font-size: 12px; }
.diag-copy { margin-left: auto; }
.diag-snippet { margin: 6px 0 0; padding: 6px 8px; background: var(--bg-card); border-radius: 4px; overflow: auto; white-space: pre; font-family: var(--font-mono, monospace); font-size: 12px; }
.diag-next { color: var(--text-2); margin-top: 6px; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════
   ROLES & GRANTS MODULE
   ═══════════════════════════════════════════════════════════ */

/* Tab panel base */
.rg-tab-panel { padding: var(--sp-4) 0; }

/* Toolbar row above the roles table */
.rg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.rg-connected-as { font-size: 12px; color: var(--text-3); }
.rg-connected-as strong { color: var(--text-2); }

/* Roles table attribute cells */
.rg-attr-on    { color: var(--success); font-weight: 600; }
.rg-attr-super { color: var(--danger);  font-weight: 600; }
.rg-attr-off   { color: var(--text-3); }
.rg-self-row   { background: var(--bg-elevated); }
.rg-self-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.03em;
}

/* Attribute checkboxes grid */
.rg-attrs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.rg-attr-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast);
}
.rg-attr-check:hover { border-color: var(--accent); }
.rg-attr-check input[type="checkbox"] { accent-color: var(--accent); }
.rg-attr-danger { border-color: var(--danger-bg); color: var(--danger); }
.rg-attr-danger:hover { border-color: var(--danger); }

/* Role detail page */
.rg-readonly-banner { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.rg-readonly-banner svg { flex: 0 0 auto; margin-top: 1px; color: var(--warning); }
.rg-readonly-banner code { background: var(--bg-elevated); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; color: var(--text-1); }
.rg-detail { display: flex; flex-direction: column; gap: var(--sp-4); }
.rg-detail-header { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.rg-detail-title { font-size: 18px; font-weight: 700; color: var(--text-1); margin: 0; }
.rg-detail-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.rg-detail-row .form-label { width: 140px; flex-shrink: 0; margin: 0; }

/* Memberships */
.rg-membership-section { display: flex; flex-direction: column; gap: var(--sp-2); }
.rg-mem-sub-title { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-1); }
.rg-mem-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.rg-mem-name { flex: 1; font-size: 13px; color: var(--text-1); font-weight: 500; }
.rg-mem-revoke { margin-left: auto; }
.rg-mem-empty { font-size: 12px; color: var(--text-3); padding: var(--sp-2) 0; }

/* Danger card */
.rg-danger-card { border-color: var(--danger-bg); }
.rg-self-lockout-msg { font-size: 13px; color: var(--text-3); }

/* Privileges tab */
.rg-priv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.rg-priv-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.rg-priv-actions { display: flex; gap: var(--sp-2); }

/* Privilege checkboxes in modal */
.rg-priv-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-2);
}
.rg-priv-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast);
}
.rg-priv-check:hover { border-color: var(--accent); }
.rg-priv-check input[type="checkbox"] { accent-color: var(--accent); }

/* Pagination bar */
.rg-pager {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
}
.rg-pager-info { font-size: 12px; color: var(--text-3); margin-right: auto; }

/* Modal overlay */
.rg-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay, rgba(0,0,0,.55));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--sp-4);
}
.rg-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  width: min(540px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal, 0 8px 32px rgba(0,0,0,.35));
}
.rg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.rg-modal-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-1); }
.rg-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 18px; line-height: 1;
  padding: 2px 6px; border-radius: var(--r-sm);
  transition: color var(--t-fast);
}
.rg-modal-close:hover { color: var(--text-1); }
.rg-modal-content {
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
  flex: 1;
}
.rg-modal-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.rg-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
}

/* SQL preview block inside modal */
.rg-sql-preview {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-1);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
}

/* Loading / empty / error states */
.rg-loading { padding: var(--sp-6) var(--sp-4); text-align: center; font-size: 13px; color: var(--text-3); }
.rg-error   { padding: var(--sp-4); color: var(--danger); font-size: 13px; background: var(--danger-bg); border-radius: var(--r-md); }
.rg-placeholder { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-3); font-size: 13px; }
.rg-placeholder p { margin: 0; }

/* Roles table */
.rg-roles-table { width: 100%; font-size: 12px; }

@media (max-width: 900px) {
  .rg-priv-toolbar { flex-direction: column; align-items: flex-start; }
  .rg-toolbar { flex-direction: column; align-items: flex-start; }
  .rg-detail-row { flex-direction: column; align-items: flex-start; }
  .rg-detail-row .form-label { width: auto; }
}

/* ═══════════ HBA RULES ═══════════ */

/* Parse-error warning banner */
.hba-parse-error-banner {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--r-md);
  color: var(--warning);
  font-size: 13px;
  margin-bottom: var(--sp-4);
}
.hba-parse-error-banner strong { font-weight: 600; color: var(--text-1); }
.hba-parse-error-list {
  margin: var(--sp-1) 0 0 var(--sp-4);
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
.hba-parse-error-list li { margin-top: var(--sp-1); }

/* Rules table column sizing */
.hba-rules-table { font-size: 12px; }
.hba-ident-table { font-size: 12px; }
.hba-col-num  { width: 48px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.hba-col-list { max-width: 200px; }
.hba-col-addr { font-family: var(--font-mono); font-size: 11px; }
.hba-col-opts { font-family: var(--font-mono); font-size: 11px; max-width: 200px; }

/* Error rows */
.hba-row-error td { background: rgba(239, 68, 68, 0.06); }
.hba-row-error-detail td {
  font-size: 12px;
  color: var(--danger);
  padding: var(--sp-1) var(--sp-4) var(--sp-2);
  font-family: var(--font-mono);
  background: rgba(239, 68, 68, 0.04);
}

/* Small tag chips for database / user lists */
.hba-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  margin: 1px 2px 1px 0;
  white-space: nowrap;
}

/* Type badge (local / host / hostssl / etc.) */
.hba-type-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-elevated);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.hba-type-hostssl  { color: var(--success); border-color: var(--success-border); background: var(--success-bg); }
.hba-type-hostnossl { color: var(--warning); border-color: var(--warning-border); background: var(--warning-bg); }
.hba-type-local    { color: var(--info);    border-color: var(--info-border);    background: var(--info-bg);    }

/* Option pills */
.hba-opt {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
  margin: 1px 2px 1px 0;
  white-space: nowrap;
}

/* Netmask suffix */
.hba-netmask { color: var(--text-3); }

/* Mono code in ident table */
.hba-code { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }

/* Dim placeholder text in addr/options cells */
.hba-cell-empty { color: var(--text-4); }

/* File path in the header */
.hba-file-path {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 900px) {
  .hba-file-path { max-width: 160px; }
  .hba-col-list  { max-width: 120px; }
  .hba-col-opts  { max-width: 100px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HBA EDITOR (G3 Phase 3B) — Edit tab, diff, Review & Apply modal, History
   ═══════════════════════════════════════════════════════════════════════ */

/* Tier badge + lock on the Edit/History tab buttons */
.hbe-tab-ent {
  margin-left: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent); vertical-align: middle;
}
.hbe-tab-locked { opacity: 0.72; }

/* Editor */
.hbe-editor { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.hbe-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.hbe-editor-hint { font-size: 12px; color: var(--text-3); }
.hbe-textarea {
  width: 100%; min-height: 340px; resize: vertical;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5;
  color: var(--text-1); background: var(--bg-card);
  border: 1px solid var(--border-mid); border-radius: var(--r-lg);
  padding: var(--sp-3); tab-size: 4; white-space: pre; overflow: auto;
}
.hbe-textarea:focus { outline: none; border-color: var(--accent); }
/* The one-time enrollment token. A bare <textarea> takes the UA's white
   background, which is what it did until 2026-08-21 -- a glaring white box on a
   dark page, on the one screen that has to look deliberate. Shares the editor's
   palette; sized for three lines rather than .hbe-textarea's 340px. */
.hbe-token-val {
  width: 100%; resize: vertical;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  color: var(--text-1); background: var(--bg-card);
  border: 1px solid var(--border-mid); border-radius: var(--r-lg);
  padding: var(--sp-2); white-space: pre-wrap; word-break: break-all;
}
.hbe-token-val:focus { outline: none; border-color: var(--accent); }
.hbe-install-steps { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); color: var(--text-2); }
.hbe-install-steps li { margin-top: var(--sp-2); }
.hbe-install-steps .code-block { margin-top: var(--sp-1); }
.hbe-insecure-warning,
.hbe-patroni-banner {
  padding: var(--sp-3) var(--sp-4); color: var(--warning, var(--text-2));
  background: color-mix(in srgb, var(--warning, var(--text-3)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning, var(--text-3)) 32%, transparent);
  border-radius: var(--r-md); line-height: 1.5;
}
/* Shown when the apply poll cannot reach IDBE. Deliberately a SEPARATE element
   from the phase row: a failed read must never rewrite the phase, which is the
   last thing actually measured. */
.hbe-poll-notice {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  font-size: 12px; line-height: 1.5; color: var(--warning, var(--text-2));
  background: color-mix(in srgb, var(--warning, var(--text-3)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning, var(--text-3)) 30%, transparent);
  border-radius: var(--r-md, 6px);
}
.hbe-editor-footer { display: flex; justify-content: flex-end; }

/* Diff view */
.hbe-diff {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  max-height: 320px; overflow: auto; background: var(--bg-card);
}
.hbe-diff-line { display: flex; gap: var(--sp-2); padding: 1px var(--sp-3); white-space: pre-wrap; word-break: break-all; }
.hbe-diff-sign { width: 1ch; flex-shrink: 0; opacity: 0.6; }
.hbe-diff-ctx { color: var(--text-3); }
.hbe-diff-add { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--text-1); }
.hbe-diff-del { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--text-1); }
.hbe-diff-none { padding: var(--sp-4); color: var(--text-3); font-style: italic; }
.hbe-patroni-review { min-width: 0; margin-top: var(--sp-4); color: var(--text-2); }
.hbe-patroni-review p { margin: var(--sp-1) 0 var(--sp-2); }
.hbe-yaml {
  max-width: 100%; max-height: 260px; overflow: auto; margin: var(--sp-2) 0;
  padding: var(--sp-3) var(--sp-4); white-space: pre; font-family: var(--font-mono);
  font-size: 12px; line-height: 1.5; color: var(--text-1); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.hbe-guidance { min-width: 0; margin-top: var(--sp-3); color: var(--text-2); }
.hbe-guidance-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.hbe-guidance ol { margin: var(--sp-2) 0; padding-left: var(--sp-5); }
.hbe-guidance li, .hbe-guidance p { margin-top: var(--sp-2); }

/* Typed-confirm */
.hbe-confirm { display: flex; flex-direction: column; gap: var(--sp-2); }
.hbe-confirm-label { font-size: 12px; color: var(--text-2); }
.hbe-confirm-input {
  font-family: var(--font-mono); font-size: 13px; color: var(--text-1);
  background: var(--bg-card); border: 1px solid var(--border-mid);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); width: 180px;
}
.hbe-confirm-input:focus { outline: none; border-color: var(--accent); }
.hbe-mono { font-family: var(--font-mono); }
.hbe-apply-error {
  color: var(--danger); font-size: 12.5px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}

/* Apply progress */
.hbe-phase-row { display: flex; align-items: center; gap: var(--sp-2); }
.hbe-phase-label { color: var(--text-2); font-size: 13px; }
.hbe-progress-actions { margin-top: var(--sp-3); }
.hbe-spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--border-mid); border-top-color: var(--accent);
  display: inline-block; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hbe-result { margin-top: var(--sp-4); border-radius: var(--r-lg); padding: var(--sp-4); }
.hbe-result p { margin: 0 0 var(--sp-2); }
.hbe-result-actions { margin-top: var(--sp-3); display: flex; justify-content: flex-end; }
.hbe-result-ok   { background: color-mix(in srgb, var(--success) 12%, transparent); }
.hbe-result-warn { background: color-mix(in srgb, var(--warning) 14%, transparent); }
.hbe-result-err  { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.hbe-muted { color: var(--text-3); font-size: 12px; }
.hbe-member-wrap { min-width: 0; margin-top: var(--sp-3); overflow-x: auto; }
.hbe-member-table { min-width: 520px; }
.hbe-member-table td, .hbe-member-table th { vertical-align: top; }

@media (max-width: 768px) {
  #hba-apply-modal .modal-content, #hba-apply-modal .modal-body { min-width: 0; }
  .hbe-editor-toolbar, .hbe-guidance-head { align-items: flex-start; flex-direction: column; }
  .hbe-yaml { white-space: pre-wrap; overflow-wrap: anywhere; }
  .hbe-token { max-width: 100% !important; }
}

/* History */
.hbe-history-table td, .hbe-history-table th { vertical-align: middle; }
.hbe-row-actions { white-space: nowrap; }
.hbe-row-actions .btn { margin-left: var(--sp-2); }
.hbe-detail-row td { background: var(--bg-card); }
.hbe-detail { display: flex; flex-direction: column; gap: var(--sp-2); font-size: 12.5px; color: var(--text-2); padding: var(--sp-2) 0; }
.hbe-detail-errs { margin: 0; padding-left: var(--sp-5); color: var(--danger); }
.hbe-detail-err { color: var(--danger); }

/* CLI-hint (no-agent guidance) */
.hbe-cli-hint {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   DATABASES (G4) — lifecycle view + modals
   ═══════════════════════════════════════════════════════════════════════ */
.db-toolbar { display: flex; justify-content: flex-end; margin: var(--sp-3) 0; }
.db-row-actions { white-space: nowrap; }
.db-row-actions .btn { margin-left: var(--sp-2); }
.db-mono { font-family: var(--font-mono); font-size: 12px; }
.db-danger { color: var(--danger); }
.db-field { display: flex; flex-direction: column; gap: var(--sp-1); font-size: 12px; color: var(--text-2); }
.db-input {
  font-size: 13px; color: var(--text-1); background: var(--bg-card);
  border: 1px solid var(--border-mid); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.db-input:focus { outline: none; border-color: var(--accent); }
.db-check { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--text-2); }
.db-preview {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
  white-space: pre-wrap; word-break: break-all; max-height: 120px; overflow: auto;
}
.db-warn {
  color: var(--warning); font-size: 12.5px;
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.db-err {
  color: var(--danger); font-size: 12.5px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.db-danger-btn { background: var(--danger); border-color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   BACKUP & RESTORE — Overview + Restore tabs (v1.0.1)
   The Overview tab used to be a hardcoded "nothing here yet" message and the
   Restore tab a one-line placeholder; both now render real state, so they need
   real styles.
   ═══════════════════════════════════════════════════════════════════════════ */

.bkp-status-executing { background: rgba(211, 158, 87, 0.15); color: var(--accent); }
.bkp-status-cancelled { background: rgba(139, 148, 158, 0.15); color: var(--text-3); }

.bkp-muted { color: var(--text-3); font-size: 13px; }
.bkp-err { color: #f85149; font-size: 12px; }
.bkp-tag {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .4px;
    background: rgba(88, 166, 255, 0.15); color: #58a6ff; text-transform: uppercase;
}

.bkp-attention {
    background: rgba(211, 158, 87, 0.08);
    border: 1px solid rgba(211, 158, 87, 0.35);
    border-radius: 8px; padding: 14px 16px; margin-bottom: 16px;
}
.bkp-attention-title {
    font-size: 12px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.bkp-attention ul { margin: 0; padding-left: 18px; }
.bkp-attention li { color: var(--text-2); font-size: 13px; margin-bottom: 4px; }

.bkp-allgood {
    background: rgba(63, 185, 80, 0.08);
    border: 1px solid rgba(63, 185, 80, 0.3);
    border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;
    color: var(--text-2); font-size: 13px;
}

.bkp-overview-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}
.bkp-overview-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px; min-width: 0;
}
.bkp-overview-card h4 {
    margin: 0 0 12px 0; font-size: 13px; font-weight: 600; color: var(--text-2);
    text-transform: uppercase; letter-spacing: .5px;
}

.bkp-activity { list-style: none; margin: 0; padding: 0; }
.bkp-activity-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 0; border-bottom: 1px solid var(--border);
}
.bkp-activity-row:last-child { border-bottom: none; }
.bkp-activity-main { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkp-activity-meta { font-size: 12px; color: var(--text-3); white-space: nowrap; }

.bkp-check {
    display: flex !important; align-items: center; gap: 8px;
    margin: 10px 0; font-size: 13px; color: var(--text-2); cursor: pointer;
}
.bkp-check input { width: auto !important; margin: 0; }

.bkp-modal-note {
    margin-top: 10px; font-size: 12px; color: var(--text-3); line-height: 1.5;
}
.bkp-modal-card select {
    width: 100%; padding: 9px 12px; border-radius: 6px; margin-bottom: 12px;
    background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-1);
}

/* Wide tables must scroll inside their own box, never the page. */
#bkp-restores-table, #bkp-runs-table { width: 100%; }
#backup-tab-restore, #backup-tab-backups { overflow-x: auto; }

@media (max-width: 640px) {
    .bkp-overview-grid { grid-template-columns: 1fr; }
    .bkp-activity-row { gap: 6px; }
}

/* ==========================================================================
   Reading-column width caps
   ==========================================================================
   Reported as the Cortex and topology cards stretching "more than needed".
   Measured at a 1440px viewport: `.cortex-layout` was 1113px wide and the
   welcome copy and every suggestion chip ran the full width of it, so a
   one-line prompt became a 390px-wide button and the description wrapped at
   a line length nobody can comfortably read.

   Capped and centred rather than left-aligned: a column pinned left with
   300px of void to its right reads as a rendering fault, which is the same
   mistake the dashboard row-pairing pass made and had to undo. */
.cortex-welcome {
  max-width: 68ch;
  margin-inline: auto;
}
.cortex-welcome p { max-width: 60ch; margin-inline: auto; }

/* The suggestion chips wrapped to whatever width was available, so the same
   six chips re-flowed into a different arrangement at every window size.
   Capping the group keeps them in a stable two-up grid. */
.cortex-welcome .cortex-suggestions,
.cortex-suggestions {
  max-width: 62ch;
  margin-inline: auto;
}

/* A message column is the same reading problem: at 1113px a paragraph of
   prose is ~180 characters per line. 90ch leaves long SQL blocks room to
   breathe while keeping prose readable. */
.cortex-messages > * { max-width: 90ch; }
.cortex-messages > .cortex-welcome { max-width: 68ch; }

/* Security & Audit lives in styles/security-audit.css. Moved out when
   the module was redesigned: 580 lines of one view is a stylesheet, not a
   section, and every other redesigned module already has its own. */

/* v1.0.32 E4 — whole-server logical backups (backup-restore.js) */
.bkp-target-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 0; border-bottom: 1px solid var(--border);
}
.bkp-target-name { flex: 1 1 160px; min-width: 0; font-size: 13px; color: var(--text-1); }
.bkp-target-coverage { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.bkp-target-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bkp-db-checklist {
    max-height: 240px; overflow-y: auto; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elevated);
}
.bkp-db-row {
    display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 4px 0; font-size: 13px; color: var(--text-1); cursor: pointer;
}
.bkp-db-row input { width: auto !important; margin: 0; }
.bkp-db-size { margin-left: auto; font-size: 11px; color: var(--text-3); }
@media (max-width: 640px) {
    .bkp-modal-card, .bkp-modal-wide {
        min-width: 0; width: calc(100vw - 32px); max-width: calc(100vw - 32px); padding: 16px;
    }
}
.bkp-status-partial {
    background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning);
}
.bkp-db-missing { font-size: 11px; color: var(--text-3); margin-top: 2px; }
/* SI-7: a completed run the operator should still look at (the agent's warning). */
.bkp-run-warning { font-size: 12px; color: var(--text-2); margin-top: 4px; padding-left: 6px; border-left: 2px solid var(--warning); overflow-wrap: anywhere; }

/* v1.0.32 Task 83 — database nodes waiting for approval (backup-restore.js):
   the banner above the KPI row, the Overview card and the Approve dialog. */
.bkp-pending-banner {
    display: flex; gap: 12px; align-items: center; justify-content: space-between;
    padding: 10px 14px; margin: 0 0 16px; border-radius: 8px;
    border: 1px solid var(--warning-border, var(--warning, #b7791f));
    background: var(--warning-bg, rgba(183, 121, 31, .08));
    color: var(--text-1); font-size: 13px;
}
.bkp-pending-banner[hidden] { display: none; }
.bkp-nodes-card { margin-bottom: 16px; }
.bkp-node-table-wrap { overflow-x: auto; max-width: 100%; }
.bkp-node-table td { vertical-align: top; overflow-wrap: anywhere; }
.bkp-node-actions { white-space: nowrap; }
.bkp-node-actions .btn + .btn { margin-left: 6px; }
.bkp-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;
}
.bkp-pairing-code { font-family: var(--font-mono, monospace); letter-spacing: .08em; font-weight: 600; }
.bkp-pairing-code-large { display: block; font-size: 1.6rem; text-align: center; margin: 8px 0 12px; }
.bkp-node-identity {
    display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px;
    margin: 0 0 12px; font-size: 13px; overflow-wrap: anywhere;
}
.bkp-node-identity dt { color: var(--text-3); }
.bkp-node-identity dd { margin: 0; color: var(--text-1); min-width: 0; }
/* v1.0.32 Task 84 -- node status per remote-agent target and the
   Nodes & archiving dialog (backup-restore.js). */
.bkp-target-nodes { display: block; font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; margin-top: 2px; }
.bkp-refusals { margin: 8px 0; padding-left: 18px; color: var(--danger, #b42318); font-size: 13px; overflow-wrap: anywhere; }
.bkp-arch-step { margin: 12px 0; overflow-wrap: anywhere; }
#bkp-info-modal h4 { margin: 8px 0 6px; font-size: 13px; color: var(--text-2); }
.bkp-target-nodes-failed { color: var(--warning, #b7791f); }
#bkp-info-modal .bkp-hint { overflow-wrap: anywhere; }
.bkp-arch-wait { margin: 0; font-size: 13px; color: var(--text-2); font-style: italic; overflow-wrap: anywhere; }
/* The dialog is at most 640px wide, so its node table stacks as soon as the
   dialog goes full width instead of scrolling sideways inside it. */
@media (max-width: 640px) {
    #bkp-info-modal .bkp-node-table thead { display: none; }
    #bkp-info-modal .bkp-node-table tr,
    #bkp-info-modal .bkp-node-table td { display: block; width: 100%; box-sizing: border-box; }
    #bkp-info-modal .bkp-node-table td { padding: 6px 10px; border-bottom: none; }
    #bkp-info-modal .bkp-node-table tr { border-bottom: 1px solid var(--border); }
    #bkp-info-modal .bkp-node-actions { white-space: normal; }
    #bkp-info-modal .bkp-node-table td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em;
    }
}
@media (max-width: 480px) {
    .bkp-pending-banner { flex-direction: column; align-items: stretch; }
    .bkp-node-table thead { display: none; }
    .bkp-node-table tr, .bkp-node-table td { display: block; width: 100%; box-sizing: border-box; }
    .bkp-node-table td { padding: 8px 12px; border-bottom: none; }
    .bkp-node-table tr { border-bottom: 1px solid var(--border); }
    .bkp-node-actions { white-space: normal; }
    .bkp-node-identity { grid-template-columns: 1fr; }
    /* Stacked cells lose their column header, so each carries its own. */
    .bkp-node-table td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em;
    }
    .bkp-target-actions { flex-wrap: wrap; }
    /* Task 93 D5: the runs table was 939px inside a 358px scroller, with
       Restore ~580px off to the right. Each run is a card: one row per
       cell, its column name on the left. */
    #bkp-runs-table, #bkp-runs-table tbody { display: block; width: 100%; }
    #bkp-runs-table thead { display: none; }
    #bkp-runs-table tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--border); }
    #bkp-runs-table tr:last-child { border-bottom: none; }
    #bkp-runs-table td {
        display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px; align-items: baseline;
        width: 100%; box-sizing: border-box; padding: 4px 12px; border-bottom: none; overflow-wrap: anywhere;
    }
    #bkp-runs-table td[data-label]::before {
        content: attr(data-label);
        font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em;
    }
    #bkp-runs-table td.bkp-run-actions { display: block; padding-top: 8px; }
    #bkp-runs-table td.bkp-run-actions .btn { width: 100%; }
    #bkp-runs-table td.bkp-empty { display: block; }
    /* The five tabs wrap onto two rows rather than hiding Storage and
       Restore behind a sideways swipe with nothing to say they are there. */
    .bkp-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; }
}
/* v1.0.32 Section I final fix wave -- the remote-agent restore note: a clone
   on the leader's host, no destination, in place not offered. */
.bkp-restore-agent {
    margin-top: 8px; padding: 10px 12px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-elevated);
    font-size: 13px; color: var(--text-1); overflow-wrap: anywhere;
}
.bkp-restore-agent p { margin: 0 0 6px; }
.bkp-restore-agent p:last-child { margin-bottom: 0; }

/* ════════ Narrow-phone header (v1.0.32 Task 93 D4) ════════
   At 390px header-right alone (tier badge, refresh, notifications, zoom,
   theme, avatar) is ~330px of a 342px row, so the row overflowed: the avatar
   was clipped, the tier badge was painted over the sidebar toggle and the
   connection pill, and #main-content became 416px wide inside 390. Below
   560px the header takes two rows: the toggle and the connection pill on
   the first, the controls on the second, right-aligned. Nothing is hidden. */
@media (max-width: 560px) {
    .top-header {
        flex-wrap: wrap; height: auto; row-gap: 6px; column-gap: 8px;
        padding: 6px 12px;
    }
    .header-left { flex: 1 1 100%; gap: 8px; }
    .header-right { flex: 1 1 100%; min-width: 0; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
    body.compact-header .connection-pill { max-width: 100%; }
}
/* Belt and braces for the same defect: `overflow: hidden` still makes
   #main-content a scroll container, so anything that overflowed it could be
   scrolled sideways by focus or script (the browser pass saw every view
   shifted 16px with no way back). `clip` cuts the overflow without letting
   it scroll; the `hidden` above stays as the fallback for older engines. */
.main-content { overflow: hidden; overflow: clip; }