:root { --bg:#fafafa; --ink:#222; --muted:#666; --border:#e5e7eb; --accent:#1f6feb; }
* { box-sizing: border-box; }
html, body {
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';
}
header { padding: 16px 20px; border-bottom:1px solid var(--border); }
h1 { margin:0 0 6px; font-size: 1.4rem; }
.sub { color:var(--muted); margin:0; }

.header-main { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.llm-status-pill {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.8rem;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  cursor:pointer;
}

.llm-status-dot {
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--muted); /* unknown / checking */
}

.llm-status-dot.ok { background:#16a34a; }    /* green */
.llm-status-dot.error { background:#dc2626; } /* red */

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.header-select {
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  min-width: 120px;
}

.header-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.header-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

main.grid { display:grid; grid-template-columns: minmax(420px, 45vw) 1fr; gap:16px; padding:16px; }
section.panel { background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; }
section.wide { min-height: 70vh; }
#nl-input { width:100%; resize:vertical; }
.row { display:flex; align-items:center; gap:8px; margin-top:8px; }
button { padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--accent); color:#fff; cursor:pointer; }
button:disabled { opacity:.6; cursor:not-allowed; }
.status { margin-top:10px; color:var(--muted); min-height: 1em; }
#yasgui { height: calc(80vh); }
.explanation { background:#f6f8fa; color:var(--ink); padding:10px; border-radius:8px; min-height:3em; white-space:pre-wrap; }
pre { background:#0b1020; color:#d3e2ff; padding:10px; border-radius:8px; overflow:auto; }
details { margin-top:12px; }
@media (max-width: 900px) {
  main.grid { grid-template-columns: 1fr; }
  #yasgui { height: 60vh; }
}

/* Allow all panels to be resizable */
.panel {
  resize: both; /* Enable resizing both horizontally and vertically */
  overflow: auto; /* Allow scrolling if content exceeds panel size */
  min-width: 300px; /* Minimum width for the panel */
  width: 400px; /* Set an initial width */
  height: auto; /* Height adjusts automatically */
  max-width: 100%; /* Prevent the panel from overflowing */
}


/* Full-width top stack for NL + explanation */
.top-stack { display:flex; flex-direction:column; gap:16px; padding:16px; }
main.grid { padding-top:0; }
.panel textarea { width:100%; box-sizing:border-box; }

/* NEW: top buttons row */
.top-buttons { margin-bottom: 8px; }
.top-buttons button { background: #334155; border-color: #334155; }
.top-buttons button:hover { filter: brightness(1.05); }

/* NEW: modal styles for ontology viewer */
.modal.hidden { display:none; }
.modal { position:fixed; inset:0; z-index:1000; }
.modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.35); }
.modal-card {
  position:relative; margin:4vh auto; width:min(1200px, 96vw); height: 92vh;
  background:#fff; border-radius:12px; border:1px solid var(--border); display:flex; flex-direction:column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.modal-header { display:flex; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border); gap:8px; }
.modal-header h3 { margin:0; font-size:1.1rem; }
.modal-close {
  margin-left:auto; background:transparent; color:#111; border:1px solid var(--border);
  width:32px; height:32px; border-radius:8px; font-size:18px; line-height:28px; cursor:pointer;
}
.modal-toolbar { padding:8px 12px; border-bottom:1px solid var(--border); gap:12px; }
#ontology-cy { flex:1; min-height: 60vh; }
.modal-footer { padding:8px 12px; border-top:1px solid var(--border); }
.muted { color: var(--muted); font-size: 12px; }

/* SPARQL code box */
#sparql-preview.code-textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  resize: both;
  overflow: auto;
  white-space: pre;
  min-height: 220px;
  font-size: 0.8rem;
}

/* Ensure the parent container uses flexbox and does not shrink the panels */
main.grid {
  display: flex; /* Use flexbox for layout */
  gap: 16px; /* Space between the panels */
  padding: 16px;
  flex-wrap: nowrap; /* Prevent wrapping, so the panels stay in one row */
}

/* Keep the panel size fixed */
section.panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  width: auto; /* Fixed width for the panel */
  min-width: 500px;
  height: auto; /* Let the height adjust automatically based on content */
  max-width: 100%; /* Prevents the panel from overflowing horizontally */
  resize: none; /* Disable resizing for this panel */
  overflow: hidden; /* Prevent overflow outside the panel */
  flex-shrink: 0; /* Prevent the panel from shrinking when other content grows */
}

/* Allow the content inside the panels to scroll without resizing the outer panel */
#sparql-preview {
  width: 100%; /* Ensure content takes full available width */
  overflow: auto; /* Enable scrolling if content exceeds container size */
}

/* Ensure the SPARQL textarea remains fixed and doesn’t shrink */
#sparql-preview {
  min-height: 220px; /* Ensure the SPARQL textarea doesn't shrink */
  resize: none; /* Prevent resizing */
  overflow: auto; /* Allow scrolling if needed */
}

/* Ensure the results table has a fixed maximum height and scrolling */
#results-table {
  max-height: 70vh; /* Restrict height to prevent it from growing too large */
  overflow-x: auto; /* Horizontal scrolling for wide tables */
  overflow-y: auto; /* Vertical scrolling if there are too many rows */
  white-space: nowrap; /* Prevent text wrapping inside table cells */
  border-collapse: collapse; /* Ensure borders are collapsed together */
  border: 1px solid var(--border); /* Apply border to the whole table */
  font-size: 0.8rem;
}

#results-table th, #results-table td {
  border: 1px solid var(--border); /* Apply border to each table cell */
  padding: 8px; /* Add padding for spacing */
  text-align: left; /* Align text to the left */
}

/* Optional: add alternate row coloring for better readability */
#results-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

#results-table tr:hover {
  background-color: #f1f1f1; /* Highlight rows on hover */
}

#results-table tr:focus-within {
  background-color: #e0e0e0; /* Slightly darker for focus */
}