/* SQL Insight — beta UI styles for sqlformat2.htm
 * Class-scoped under .sql-insight to avoid colliding with legacy CSS.
 * Reserved global symbols in pp.js (do not shadow): AJAX, UTIL, SQLFMT, ProcessBar.
 */

.sql-insight {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  background: #FFFFFF;
  border: 1px solid #E8E6E1;
  border-radius: 6px;
  margin: 16px 0;
  padding: 0;
  color: #1A1A1A;
  font-size: 13px;
  line-height: 1.5;
  max-width: 100%;
  box-sizing: border-box;
}

.sql-insight[hidden] { display: none !important; }

.sql-insight-header {
  background: #F4F3F0;
  border-bottom: 1px solid #E8E6E1;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sql-insight-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0.2px;
}

.sql-insight-title .sql-insight-beta {
  display: inline-block;
  background: #0891B2;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sql-insight-status {
  font-size: 12px;
  color: #5C5A56;
}

.sql-insight-status[data-state="loading"] { color: #0891B2; }
.sql-insight-status[data-state="ready"] { color: #047857; }
.sql-insight-status[data-state="partial"] { color: #B45309; }
.sql-insight-status[data-state="unavailable"] { color: #B91C1C; }
.sql-insight-status[data-state="too-large"] { color: #B45309; }

.sql-insight-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #E8E6E1;
  background: #FAFAF8;
  flex-wrap: wrap;
}

.sql-insight-tab {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  color: #5C5A56;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.sql-insight-tab:hover { color: #1A1A1A; }
.sql-insight-tab[aria-selected="true"] {
  color: #0891B2;
  border-bottom-color: #0891B2;
  font-weight: 600;
}
.sql-insight-tab:focus-visible {
  outline: 2px solid #0891B2;
  outline-offset: -2px;
}

.sql-insight-tab .sql-insight-tab-count {
  display: inline-block;
  margin-left: 6px;
  background: #E8E6E1;
  color: #5C5A56;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
}
.sql-insight-tab[aria-selected="true"] .sql-insight-tab-count {
  background: #0891B2;
  color: #FFFFFF;
}

.sql-insight-body {
  padding: 14px 16px;
  min-height: 80px;
}

.sql-insight-panel { display: none; }
.sql-insight-panel.is-active { display: block; }

.sql-insight-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5C5A56;
  font-size: 13px;
  padding: 8px 0;
}
.sql-insight-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #E8E6E1;
  border-top-color: #0891B2;
  border-radius: 50%;
  animation: sql-insight-spin 0.8s linear infinite;
}
@keyframes sql-insight-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sql-insight-spinner { animation: none; border-top-color: #5C5A56; }
}

.sql-insight-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 16px;
}
.sql-insight-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
}
.sql-insight-summary-label {
  font-size: 11px;
  color: #9C9990;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sql-insight-summary-value {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A1A;
}
.sql-insight-summary-value.is-bool-true { color: #047857; }
.sql-insight-summary-value.is-bool-false { color: #9C9990; }

.sql-insight-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sql-insight-table th,
.sql-insight-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #F0EEE9;
}
.sql-insight-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9C9990;
  font-weight: 600;
  background: #FAFAF8;
}
.sql-insight-table td code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
  color: #1A1A1A;
}
.sql-insight-table tr:last-child td { border-bottom: 0; }

.sql-insight-op-read   { color: #047857; font-weight: 600; }
.sql-insight-op-write  { color: #B45309; font-weight: 600; }
.sql-insight-op-create { color: #0891B2; font-weight: 600; }
.sql-insight-op-drop   { color: #B91C1C; font-weight: 600; }
.sql-insight-op-other  { color: #5C5A56; }

.sql-insight-empty {
  color: #9C9990;
  font-style: italic;
  padding: 8px 0;
}

.sql-insight-warnings {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sql-insight-warning {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #78350F;
}
.sql-insight-warning:last-child { margin-bottom: 0; }
.sql-insight-warning-code {
  display: inline-block;
  background: #FCD34D;
  color: #78350F;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.sql-insight-warning--error {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #7F1D1D;
}
.sql-insight-warning--error .sql-insight-warning-code {
  background: #FCA5A5; color: #7F1D1D;
}

.sql-insight-cta {
  display: inline-block;
  margin-top: 10px;
  background: #0891B2;
  color: #FFFFFF !important;
  padding: 6px 14px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none !important;
  font-size: 13px;
  transition: background 0.15s ease;
}
.sql-insight-cta:hover { background: #0E7490; color: #FFFFFF !important; }
.sql-insight-cta:focus-visible {
  outline: 2px solid #0891B2;
  outline-offset: 2px;
}
.sql-insight-cta--secondary {
  background: transparent;
  color: #0891B2 !important;
  border: 1px solid #0891B2;
}
.sql-insight-cta--secondary:hover {
  background: #F0FDFA;
  color: #0E7490 !important;
}

.sql-insight-cta-row {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.sql-insight-lineage-edge {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
  color: #1A1A1A;
}
.sql-insight-lineage-arrow {
  color: #0891B2;
  margin: 0 6px;
  font-weight: 700;
}
.sql-insight-lineage-type {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  background: #E8E6E1;
  color: #5C5A56;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Open Sans', sans-serif;
}

@media (max-width: 768px) {
  .sql-insight-header { flex-direction: column; align-items: flex-start; }
  .sql-insight-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .sql-insight-tab { white-space: nowrap; }
  .sql-insight-summary-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

@media (max-width: 375px) {
  .sql-insight-body { padding: 10px 10px; }
  .sql-insight-summary-value { font-size: 14px; }
  .sql-insight-table th, .sql-insight-table td { padding: 4px 6px; font-size: 12px; }
}

/* When the user picks a SQLFlow-only dialect (BigQuery, Snowflake, etc.), the
 * legacy format options panel and outputfmt selector still exist in the DOM
 * but their values are not forwarded to the BFF /format endpoint — so dim
 * them so the user understands they don't apply, and surface an inline notice
 * pointing to the same defaults SQLFlow Cloud uses.
 *
 * The class is set on <body> by sql-insight.js when the dropdown changes. */
body.sql-insight-flow-mode #formatoptions,
body.sql-insight-flow-mode select[name="outputfmt"] {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.6);
}
body.sql-insight-flow-mode select[name="outputfmt"] {
  background-color: #F4F3F0;
}

.sql-insight-flow-notice {
  display: none;
  margin: 6px 0 0 0;
  padding: 8px 12px;
  background: #ECFEFF;
  border: 1px solid #A5F3FC;
  border-radius: 4px;
  color: #155E75;
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.4;
}
body.sql-insight-flow-mode .sql-insight-flow-notice { display: block; }