/* Kvikr SQLite – endast layout- och funktionsstöd. Utseendet kommer från Kvikr UI. */

:root {
  --container: 1500px;
  --ks-sidebar-min: 280px;
}

.ks-skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
}

.ks-skip:focus {
  left: 10px;
  top: 10px;
}

/* Remove grid display from these containers to avoid interfering with Kvikr UI's layout and table scroll.  */
/* .ks-main, .ks-panel-area, .ks-query-list, .ks-row-details were previously set to display: grid; this caused issues with result table scroll and tab spacing. */

.ks-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap2);
}

/* Define the grid columns for our custom ks-layout. We no longer rely on the Kvikr UI k-layout-sidebar class. */
.ks-layout {
  display: grid;
  grid-template-columns: minmax(var(--ks-sidebar-min), 360px) minmax(0, 1fr);
  gap: var(--gap2);
}

.ks-layout.is-sidebar-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.ks-layout.is-sidebar-hidden .ks-sidebar {
  display: none;
}

.ks-sidebar {
  position: sticky;
  top: var(--gap);
  max-height: calc(100vh - var(--gap2));
  overflow: auto;
}

.ks-show-sidebar {
  justify-self: start;
}

.k-btn.ks-sidebar-toggle {
  width: var(--ctrl-h);
  min-width: var(--ctrl-h);
  height: var(--ctrl-h);
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.k-btn.ks-sidebar-toggle .k-icon {
  display: block;
  margin: 0;
}

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

.ks-file-button {
  cursor: pointer;
}

.k-sidemenu .is-active {
  border-color: var(--accent-border);
  background: var(--panel2);
}

#tablesList {
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ks-result-box {
  min-height: 3rem;
}

.ks-result-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap);
  color: var(--muted);
  margin-bottom: var(--gap);
}

.ks-result-scroll {
  max-height: min(65vh, 52rem);
  /* Enable both vertical and horizontal scroll for large result tables */
  overflow-x: auto;
  overflow-y: auto;
}

.ks-result-scroll .k-table {
  min-width: max-content;
}

.ks-result-scroll .k-table th,
.ks-result-scroll .k-table td {
  max-width: 28rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks-result-scroll .k-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.ks-result-scroll .k-table th:first-child,
.ks-result-scroll .k-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel2);
  text-align: right;
  color: var(--muted);
}

.ks-result-scroll .k-table thead th:first-child {
  z-index: 3;
}

.ks-cell-button {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-null {
  color: var(--muted);
  font-style: italic;
}

.ks-blob {
  font-weight: var(--fw-strong);
}

.ks-sql-editor {
  min-height: 14rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--fs-code);
  line-height: 1.5;
}

.ks-message:not(:empty) {
  margin-top: var(--gap);
}

.ks-schema-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--gap);
}

.ks-schema-grid .k-btn {
  height: auto;
  min-height: var(--ctrl-h);
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
  padding-top: 10px;
  padding-bottom: 10px;
}

.ks-schema-grid small {
  color: var(--muted);
}

.ks-query-actions {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}

.ks-row-field pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ks-dialog {
  width: min(56rem, calc(100vw - 2rem));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  padding: var(--gap2);
}

.ks-dialog::backdrop {
  background: var(--overlay-bg);
}

@media (max-width: 980px) {
  .ks-start,
  .k-panel-body.k-split {
    align-items: stretch;
    flex-direction: column;
  }

  /* In mobile view, the custom ks-layout should collapse to a single column */
  .ks-layout {
    grid-template-columns: 1fr;
  }

  .ks-sidebar {
    position: static;
    max-height: none;
  }
}

/* Kvikr UI-kompletterande layoutkorrigeringar */
.ks-sidebar .k-sidemenu a {
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}

.ks-sidebar .k-sidemenu a .hint {
  margin-left: auto;
}

.ks-panel-area > .k-tabs {
  margin-bottom: 0 !important;
  /* Remove the default bottom border so the tabs visually connect to the panel */
  border-bottom: 0 !important;
}

.ks-panel-area > .k-tabpanels > .k-tabpanel > .k-panel {
  border-top-left-radius: 0;
  margin-top: -1px;
}

/* Make the top bar blend with the page background */
/* Use the page background for the top bar and remove its border entirely */
.k-topbar {
  background: var(--bg) !important;
  border-bottom: none !important;
}
/* Ensure the top bar container and header do not introduce a white panel */
.k-topbar .k-container,
.k-topbar .k-header,
.k-topbar .k-header-main {
  background: transparent !important;
}

/* Override Kvikr UI tab colours: active tab should use normal text colour; inactive tabs use link colour. */
/* Ensure high specificity and !important to override default .k-tab styles. */
.k-tab[aria-selected="true"] {
  color: var(--text) !important;
}
.k-tab:not([aria-selected="true"]) {
  color: var(--link) !important;
}
.k-tab:not([aria-selected="true"]):hover {
  color: var(--text) !important;
}

/* Increase vertical space between the status panel and the layout below */
/* Increase vertical space between the status panel and the layout below */
.ks-workspace .ks-layout {
  margin-top: var(--gap3);
}

.ks-show-sidebar[hidden] {
  display: none !important;
}

/* Hide the show sidebar button unless the layout has the sidebar hidden */
.ks-layout:not(.is-sidebar-hidden) .ks-show-sidebar {
  display: none !important;
}
.ks-layout.is-sidebar-hidden .ks-show-sidebar {
  display: inline-flex;
}

.ks-column-insert {
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  justify-content: flex-start;
  color: var(--link);
  white-space: normal;
  text-align: left;
}

.ks-column-insert:hover {
  background: transparent;
  text-decoration: underline;
}

/* Sidebar toggle buttons */
#toggleSidebarButton.ks-sidebar-toggle,
#showSidebarButton.ks-sidebar-toggle {
  border-radius: 999px !important;
  align-items: center;
  justify-content: center;
}

#toggleSidebarButton.ks-sidebar-toggle .k-icon,
#showSidebarButton.ks-sidebar-toggle .k-icon {
  display: block;
  margin: 0;
}

.ks-layout.is-sidebar-hidden #showSidebarButton.ks-show-sidebar {
  display: flex !important;
  margin: 0 0 var(--gap3) 0 !important;
}

#showSidebarButton[hidden] {
  display: none !important;
}