/*
 * Minimal custom styles for Opteryx landing page.
 * This file is intentionally small because Tailwind CDN is used for utility
 * classes. Use this file for any site-specific styles or overrides.
 */

/*
 * Local font-face declarations.
 * Place WOFF2 (preferred) files under `static/fonts/` using the filenames
 * referenced below. See `static/fonts/README.md` for instructions.
 */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* A small example: ensure body uses the chosen local font with fallbacks */
@layer base {
  body {
    font-family: 'Space Grotesk', 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  }
}

/* Site color palette (user-provided colors, with paler variants) */
:root {
  --bg: #ffffff;
  --text: #3d4a4e; /* neutral dark */
  --muted-border: rgba(61, 74, 78, 0.08);
  --accent: #07797c; /* primary teal */
  --accent-2: #fe7701; /* secondary orange */
  --accent-3: #1f2e61; /* deep navy */
  --danger: #D50000; /* failure red */
  --success: #188038; /* success green */
  --gold: #c89427;
  --warning: #ffa503;
  --pale-accent: #F3FBFA; /* pale teal */
}

/* Accessibility: make focus outlines clear for keyboard users */
a:focus, button:focus, input:focus {
  outline: 3px solid rgba(7, 121, 124, 0.18);
  outline-offset: 2px;
}

/* Grid tweaks */
.container { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 1rem; }

/* Custom Table Styles */
.custom-table-header {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  color: var(--text);
  background-color: var(--pale-accent);
  padding: 0.4em 0.8em;
  font-weight: 500;
  border: 1px solid var(--muted-border);
  text-align: left;
}

.custom-table-cell {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  color: var(--text);
  background-color: var(--bg);
  padding: 0.4em 0.8em;
  font-weight: 200;
  border: 1px solid var(--muted-border);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.custom-row-counter {
  font-family: Menlo, monospace;
  font-size: 12pt;
  color: var(--text);
  background-color: var(--pale-accent);
  padding: 0.4em 0.8em;
  font-weight: 500;
  border: 1px solid var(--muted-border);
  text-align: right;
  width: 48px;
}

/* SQL Editor Style */
.sql-editor-box {
  font-family: 'JetBrains Mono', Menlo, Consolas, monospace !important;
  font-size: 14pt !important;
  line-height: 1.5em !important;
  padding: 0.3em !important;
  padding-left: 0.6em !important;
  min-height: 8em !important;
  max-height: 24em !important;
}

/* UI element styles using the new color variables */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--accent);
  border: 1px solid transparent;
}
.btn:hover { color: var(--accent); }

.btn-primary {
  background: var(--accent-3);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(7,121,124,0.08);
}
.btn-primary:hover { background: rgba(31,46,97,0.92); }
.btn-secondary {
  background: transparent;
  color: var(--accent-2);
  border: 1px solid rgba(7,121,124,0.08);
}

a { color: var(--accent-2); text-decoration: underline; }
a:hover { color: var(--accent); }

.site-nav { display:flex; gap:1rem; align-items:center; }
.site-nav a { color: var(--text); font-weight:500; padding:0.25rem 0.5rem; border-radius:6px; }
.site-nav a:hover { background: rgba(7,121,124,0.06); color: var(--accent); }
.site-nav a.active { background: linear-gradient(90deg, rgba(7,121,124,0.08), rgba(31,46,97,0.04)); color: var(--accent); }

.badge { display:inline-block; padding:0.15rem 0.45rem; border-radius:999px; background: rgba(7,121,124,0.08); color: var(--accent); font-size:0.85rem; }

input, textarea, select {
  border: 1px solid rgba(61,74,78,0.08);
  background: var(--bg);
  color: var(--text);
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
}
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px rgba(7,121,124,0.08); outline: none; }

/* Helpful utility classes */
.text-accent { color: var(--accent) !important; }
.text-accent-2 { color: var(--accent-2) !important; }
.hover-text-white:hover { color: #fff !important; }
.bg-muted { background: var(--pale-accent) !important; }

/* Utility mappings for markup that used explicit hex Tailwind classes */
.bg-accent { background: var(--accent) !important; color: #fff !important; }
.hover-accent-dark:hover { background: rgba(7,121,124,0.9) !important; }
.border-accent { border-color: var(--accent) !important; }
.border-accent-2 { border-color: var(--accent-2) !important; }
.hover-accent-2-dark:hover { background: rgba(254,119,1,0.92) !important; }
.text-primary { color: var(--text) !important; }
.focus-ring-accent:focus { box-shadow: 0 0 0 6px rgba(7,121,124,0.08); outline: none; }

/* Status badge styles (use pale variants of the palette) */
.status-badge { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; border-radius:999px; padding:0.25rem 0.6rem; font-size:0.75rem; font-weight:600; border:1px solid transparent; white-space: nowrap; min-width: 6.5rem; }
/* Ensure icons inside status badges are centered and don't add extra offset */
.status-badge .icon { display:inline-flex; align-items:center; justify-content:center; line-height:0; }

/* Info banner using the --warning color (#FFA503) */
#info-banner.info-warning { background: rgba(255,165,3,0.08); color: #FE7701; border-color: rgba(255,165,3,0.16); }
#info-banner.info-warning a { color: #FE7701; text-decoration: underline; }

/* Slightly more compact padding for error/info banners under the editor */
#error-banner, #info-banner { padding: 0.5rem 0.75rem; }
/* Use the --success color for success variants to keep the palette consistent */
.status-success { background: rgba(24,128,56,0.10); color: var(--success); border-color: rgba(24,128,56,0.16); }
.status-info { background: rgba(254,119,1,0.08); color: rgba(254,119,1,0.95); border-color: rgba(254,119,1,0.16); }
.status-warn { background: rgba(200,148,39,0.08); color: rgba(200,148,39,0.95); border-color: rgba(200,148,39,0.16); }
.status-error { background: rgba(213,0,0,0.08); color: var(--danger); border-color: rgba(213,0,0,0.16); }
.status-muted { background: var(--pale-accent); color: var(--text); border-color: rgba(61,74,78,0.06); }

/* Small status icons (no pale background or rounding) */
.status-dot-success, .status-dot-info, .status-dot-warn, .status-dot-error, .status-dot-muted {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  border: none;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
}
.status-dot-success { color: var(--success); }
.status-dot-info { color: var(--accent-2); }
.status-dot-warn { color: var(--gold); }
.status-dot-error { color: var(--danger); }
.status-dot-muted { color: var(--text); }

/* Ensure the icon wrapper fills the dot and SVG is centered */
.status-dot-success .icon,
.status-dot-info .icon,
.status-dot-warn .icon,
.status-dot-error .icon,
.status-dot-muted .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.status-dot-success .icon svg,
.status-dot-info .icon svg,
.status-dot-warn .icon svg,
.status-dot-error .icon svg,
.status-dot-muted .icon svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
}

/* Ensure SVGs inside the status dots are block-level to avoid baseline shift and alignment issues */
.status-dot-success .icon svg,
.status-dot-info .icon svg,
.status-dot-warn .icon svg,
.status-dot-error .icon svg,
.status-dot-muted .icon svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
}

/* Also target SVGs that are inlined directly inside the status dot (used in recent list) */
.status-dot-success > svg,
.status-dot-info > svg,
.status-dot-warn > svg,
.status-dot-error > svg,
.status-dot-muted > svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
}

/* Ensure inline icons used in recents and action buttons fill their container and have no extra spacing */
#recent-queries .icon svg,
#recent-queries button .icon svg,
#recent-queries button svg.icon,
#recent-queries svg.icon,
.tab-btn .icon svg,
.inline-block.icon svg,
#recent-queries button svg { 
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  fill: currentColor; /* ensure SVGs use currentColor */
  color: inherit; /* allow parent text color to control icon color */
}

/* Recent action buttons: explicit padding and larger icons (16×16) */
#recent-queries .recent-action-btn {
  padding: 4.25px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#recent-queries .recent-action-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* Utility classes to align tailwind 'green' usages with our --success color */
.text-success { color: var(--success) !important; }
.bg-success-100 { background: rgba(24,128,56,0.10) !important; }
.hover\:text-success:hover { color: var(--success) !important; }

/* Failure utilities: map commonly used red utility classes to the failure color so
   callers can use tailwind-like classes while following the project's color tokens */
.text-failure { color: var(--danger) !important; }
.hover\:text-failure:hover { color: var(--danger) !important; }
.text-red-500, .text-red-600, .text-red-700, .text-red-800 { color: var(--danger) !important; }
.bg-red-50 { background: rgba(213,0,0,0.04) !important; }
.border-red-200 { border-color: rgba(213,0,0,0.16) !important; }


/* Recent queries: remove borders from action buttons for a cleaner look */
#recent-queries button { border: none; background: transparent; color: #94a3b8; }
#recent-queries button:hover { background: rgba(61,74,78,0.02); color: #334155; }
/* Support utility classes for icon/button colors */
.text-slate-400 { color: #94a3b8 !important; }
.hover\:text-slate-700:hover { color: #334155 !important; }

/* SQL preview in recent list slightly larger than text-xs for readability */
#recent-queries .recent-sql { font-size: 0.85rem; line-height: 1.2; }


/* Tab button base and active underline (orange) */
.tab-btn { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; }
.tab-btn svg { width: 16px; height: 16px; vertical-align: middle; }
.tab-btn.tab-active { color: var(--accent-3); font-weight: 600; }
.tab-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0; /* sit on top of border */
  height: 3px;
  width: 32px; /* fixed width to avoid jump on activation */
  background: var(--accent-2);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 11;
  pointer-events: none;
} 

.tab-btn.tab-active::after { opacity: 1; }

/* Tabs toolbar: allow wrapping and responsive repositioning of right-side actions */
.tabs-toolbar {
  container-type: inline-size;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.tabs-left { display: flex; align-items: center; gap: 1.5rem; }

.tabs-right { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

/* When the toolbar's inline size becomes narrow, move the right actions onto a new row and align them to the right */
@container (max-width: 720px) {
  .tabs-right {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0.5rem;
  }
  .tabs-left { width: 100%; gap: 0.75rem; }
}

/* Fallback for browsers without container queries */
@media (max-width: 720px) {
  .tabs-right {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0.5rem;
  }
  .tabs-left { width: 100%; gap: 0.75rem; }
}

/* Homepage-specific styles: hero, tiles, resources, and CTA */
.hero {
  background: linear-gradient(135deg, rgba(7,121,124,0.06), rgba(31,46,97,0.03));
  border-radius: 14px;
}
.hero h1 { color: var(--accent-3); }
.hero .search-input { border-radius: 12px; padding: 0.75rem 0.9rem; border: 1px solid rgba(61,74,78,0.06); }
.hero .search-input:focus { box-shadow: none; outline: none; }

.feature-card { background: #fff; border: 1px solid var(--muted-border); border-radius: 12px; padding: 1.2rem; box-shadow: 0 8px 24px rgba(15,23,42,0.035); }
.feature-card .icon { width: 20px; height: 20px; }

.leader-card { background: white; border-radius: 12px; padding: 1rem; box-shadow: 0 8px 30px rgba(15,23,42,0.04); display:flex; gap:1rem; align-items:center; }
.leader-card .w-40 { min-width: 160px; }

.logos-grid { display:flex; gap:2rem; align-items:center; justify-content:center; flex-wrap:wrap; opacity:0.95; }

.resources-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:1rem; }
.resources-grid .card { background:white; border-radius: 10px; padding:1rem; border:1px solid var(--muted-border); box-shadow: 0 6px 18px rgba(15,23,42,0.02); }

.big-cta { background: linear-gradient(90deg, rgba(31,46,97,0.98), rgba(7,121,124,0.98)); color: #fff; border-radius: 10px; padding: 1.25rem; display:flex; align-items:center; justify-content:space-between; margin-top: 2rem; }

@media (max-width: 720px) {
  .resources-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.9rem; }
  .leader-card { flex-direction: column; align-items: flex-start; }
}

/* Execution plan viewport and details styling */
.execution-graph-host { height: 100%; display: flex; }
.execution-graph-viewport { overflow: auto !important; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-width: 0; height: 100%; }
.execution-graph-viewport > .mermaid { display: inline-block; flex: 0 0 auto; }
.execution-graph-details { box-sizing: border-box; }

/* Make scrollbars visible and slightly styled for modern browsers */
.execution-graph-viewport::-webkit-scrollbar { height: 12px; width: 12px; }
.execution-graph-viewport::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.12); border-radius: 8px; }
.execution-graph-viewport::-webkit-scrollbar-track { background: transparent; }

.execution-graph-details-content::-webkit-scrollbar { width: 12px; }
.execution-graph-details-content::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.12); border-radius: 8px; }
.execution-graph-details-content::-webkit-scrollbar-track { background: transparent; }

/* Ensure the details panel always shows when toggled (no animation) */
.execution-graph-details { display: none; }
.execution-graph-details.show { display: block; }

/* Execution graph host positioning */
.execution-graph-host { position: relative; }

/* Subtle dotted background on the mermaid element so it scrolls with the diagram.
   Dots are 10% lighter (using rgba with reduced alpha) and 20px grid spacing. */
.execution-graph-viewport > .mermaid {
  z-index: 2;
  background-image: radial-gradient(circle, rgba(209,213,219,0.8) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Ensure Mermaid-generated SVGs don't get constrained or scaled by CSS */
.execution-graph-viewport > .mermaid svg {
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  display: block;
}

.execution-graph-viewport { position: relative; z-index: 1; }

/* Selected plan node styling */
.plan-node-selected rect,
.plan-node-selected path,
.plan-node-selected ellipse,
.plan-node-selected polygon {
  stroke: var(--accent-2) !important;
  stroke-width: 2px !important;
  vector-effect: non-scaling-stroke;
}
.plan-node-selected text {
  font-weight: 700;
  fill: #0f172a !important;
}
.plan-node-selected {
  filter: drop-shadow(0 6px 12px rgba(15,23,42,0.06));
}

/* Monaco editor z-index fix: prevent it from overlapping controls when scrolling */
#monaco-editor-container {
  position: relative;
  z-index: 0;
  overflow: hidden !important;
}

#monaco-editor-container .monaco-editor {
  overflow: hidden !important;
}

#monaco-editor-container .overflow-guard {
  overflow: hidden !important;
}

/* Monaco suggest widget: ensure proper positioning and visibility */
#monaco-editor-container .suggest-widget {
  max-height: 300px !important;
}

#monaco-editor-container .suggest-widget.docs-below {
  bottom: auto !important;
}

/* Create View button: ensure visibility on right side */
#save-as-view-btn {
  white-space: nowrap;
}

/* SQL Reference panel and reference content: ensure proper styling */
#sql-reference-panel {
  position: relative;
  z-index: 50;
}

#reference-content {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Results table empty state: only show when no results */
#results-table .h-full {
  display: flex;
}