/**
 * TechDoc QA AI Platform – shared responsive layout.
 * New pages: include after viewport meta:
 *   <link rel="stylesheet" href="techdoc-responsive.css" />
 * Use body.techdoc-fluid; wrap sidebar + main in .techdoc-layout-split (or header + flex row);
 * sidebar column: .techdoc-sidebar-rail (+ existing Tailwind); main: .techdoc-main-rail.
 * If a fixed 64px top bar sits above the split, add .has-top-app-bar on .techdoc-layout-split.
 */

:root {
  --techdoc-app-bar-height: 4rem;
  --techdoc-sidebar-width: 240px;
}

html {
  -webkit-text-size-adjust: 100%;
}

body.techdoc-fluid {
  margin: 0;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* All platform tables: vertically center cell content. */
body.techdoc-fluid table th,
body.techdoc-fluid table td {
  vertical-align: middle;
}

.techdoc-app-title-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.techdoc-build-label {
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.95);
  white-space: nowrap;
}

.techdoc-layout-split {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

@media (min-width: 768px) {
  .techdoc-layout-split {
    flex-direction: row;
    align-items: stretch;
  }

  /* Lock page chrome: only the main column scrolls; sidebar stays in place. */
  body.techdoc-fluid {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  body.techdoc-fluid > header {
    flex-shrink: 0;
  }

  body.techdoc-fluid > header + div,
  body.techdoc-fluid > .techdoc-layout-split {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .techdoc-sidebar-rail {
    width: var(--techdoc-sidebar-width);
    flex: 0 0 var(--techdoc-sidebar-width);
    align-self: stretch;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    top: auto;
    z-index: 10;
  }

  .techdoc-sidebar-rail ~ .techdoc-main-rail,
  .techdoc-sidebar-rail ~ .techdoc-scroll-host,
  body.techdoc-fluid > .techdoc-sidebar-rail ~ .techdoc-main-rail {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Scroll wrapper beside sidebar (e.g. Evaluation page). */
  .techdoc-sidebar-rail ~ .techdoc-scroll-host:not(.techdoc-main-rail) {
    overflow: auto;
  }

  /* Single-column main: both axes scroll in the visible viewport (not document bottom). */
  body.techdoc-fluid > header + div .techdoc-sidebar-rail ~ .techdoc-main-rail:not(.techdoc-scroll-host),
  .techdoc-layout-split .techdoc-sidebar-rail ~ .techdoc-main-rail:not(.techdoc-scroll-host),
  body.techdoc-fluid > .techdoc-layout-split .techdoc-main-rail:not(.techdoc-scroll-host) {
    overflow: auto;
  }

  /* Beat Tailwind overflow-y-auto / overflow-hidden on the main column. */
  .techdoc-main-rail.overflow-y-auto,
  .techdoc-main-rail.overflow-x-hidden {
    overflow: auto;
  }

  /* Inner body scroll under a sticky page header: allow horizontal too. */
  .techdoc-main-rail > .overflow-y-auto,
  .techdoc-main-rail > main.overflow-y-auto {
    overflow: auto;
  }

  /* Deprecated inner-pane split; keep overflow hidden only when explicitly marked. */
  .techdoc-sidebar-rail ~ .techdoc-main-rail.techdoc-main-inner-scroll,
  .techdoc-layout-split .techdoc-main-rail.techdoc-main-inner-scroll {
    overflow: hidden;
    min-height: 0;
  }

  /* Inner pane split (legacy): only when main is explicitly marked techdoc-scroll-host. */
  .techdoc-sidebar-rail ~ .techdoc-main-rail.techdoc-scroll-host:not(.techdoc-main-inner-scroll) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .techdoc-sidebar-rail ~ .techdoc-main-rail.techdoc-scroll-host > .techdoc-main-pane-fill {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  body.techdoc-fluid > .techdoc-sidebar-rail ~ .techdoc-main-rail.techdoc-scroll-host {
    overflow: hidden;
  }

  /* Sidebar is a direct child of body (no top header wrapper). */
  body.techdoc-fluid:has(> .techdoc-sidebar-rail) {
    flex-direction: row;
    align-items: stretch;
  }

  /* Avoid nested double scroll when main is inside .techdoc-scroll-host wrapper. */
  .techdoc-scroll-host > .techdoc-main-rail.techdoc-pane-scroll {
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 767px) {
  .techdoc-sidebar-rail {
    width: 100%;
    flex-shrink: 0;
  }
}

.techdoc-main-rail {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/**
 * Main column that fills the viewport under the top bar + split row.
 * Prevents a single tall page scroll so wide tables get overflow-x at the
 * bottom of the visible pane instead of only at the document bottom.
 */
.techdoc-scroll-host {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/**
 * Primary scroll + horizontal overflow region (table / dense lists).
 */
.techdoc-pane-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/**
 * Docs Management source-files table body.
 * Prebuilt Tailwind does not include arbitrary h-[40rem]; without an explicit
 * height, this flex child (min-height:0 + overflow:auto) can collapse to 0px
 * when the main column is height-constrained — leaving only the "Source Files"
 * toolbar and the pagination footer visible.
 */
.techdoc-source-files-scroll {
  flex: 0 0 auto;
  width: 100%;
  height: 40rem;
  min-height: 40rem;
  max-height: 40rem;
  min-width: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/** Scrollable main body under a shrink-0 page header (Readiness, rubric settings, etc.). */
.techdoc-main-body-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/**
 * Wide tables often sit in nested .overflow-x-auto wrappers that grow with
 * content height — the H-scrollbar then sits at the table bottom. Cap uncapped
 * wrappers to the visible shell so left/right scrolling stays on-screen.
 * Skip panes that already set max-height / fixed height (mt-runs, eval, etc.).
 */
.techdoc-main-rail .overflow-x-auto:not(.mt-runs-scroll):not(.eval-history-scroll):not(.at-history-scroll):not(.techdoc-pane-scroll) {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.techdoc-main-rail .overflow-x-auto:not([class*="max-h"]):not([class*="h-["]):not(.mt-runs-scroll):not(.eval-history-scroll):not(.at-history-scroll):not(.techdoc-pane-scroll) {
  max-height: calc(100dvh - var(--techdoc-app-bar-height) - 4rem);
}

/* All projects: card layout — keep action buttons inside the card on narrow columns */
#project-cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

#project-cards [data-project-id] {
  min-width: 0;
  overflow: hidden;
}

#project-cards [data-project-id][data-techdoc-current='true'] {
  box-shadow: 0 0 0 2px rgba(173, 198, 255, 0.65);
}

/* Evaluation page — scroll + zoom-friendly panes (wide history table, dense controls). */
.eval-page-pane {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Override split layout default (overflow-x: hidden) for Evaluation main column. */
@media (min-width: 768px) {
  .techdoc-sidebar-rail ~ .techdoc-main-rail.eval-page-pane,
  body.techdoc-fluid > header + div .techdoc-sidebar-rail ~ .techdoc-main-rail.eval-page-pane,
  .techdoc-layout-split .techdoc-sidebar-rail ~ .techdoc-main-rail.eval-page-pane {
    overflow: auto;
  }
}

.eval-history-scroll {
  width: 100%;
  max-width: 100%;
  max-height: min(28rem, 45dvh);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* QA Testing — test run history: full page scroll; tall table scrollport with in-box horizontal scroll. */
.mt-runs-scroll {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: min(36rem, 58dvh);
  min-height: 14rem;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mt-runs-scroll .mt-runs-table {
  width: max-content;
  min-width: 100%;
}

.mt-runs-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #272a31;
  box-shadow: 0 1px 0 rgba(66, 71, 84, 0.55);
}

.eval-history-scroll .eval-history-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #272a31;
  box-shadow: 0 1px 0 rgba(66, 71, 84, 0.55);
}

.eval-history-table {
  width: max-content;
  min-width: 100%;
}

@media (max-width: 1400px) {
  .eval-history-table .eval-col-qa-time {
    display: none;
  }
}

@media (max-width: 1200px) {
  .eval-history-table .eval-col-documents {
    display: none;
  }
}

@media (max-width: 1024px) {
  .eval-history-table .eval-col-qa-status {
    display: none;
  }
}

.eval-run-summary-scroll {
  max-height: min(28rem, 50dvh);
  overflow: auto;
  overscroll-behavior: contain;
}

.eval-qa-markdown-scroll {
  max-height: min(36rem, 60dvh);
  overflow: auto;
  overscroll-behavior: contain;
}

#eval-judge-progress-wrap {
  flex: 1 1 12rem;
  max-width: min(32rem, 100%);
}

#eval-judge-status {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Run auto-test page — same scroll/zoom behavior as Evaluation. */
.at-page-pane {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .techdoc-sidebar-rail ~ .techdoc-main-rail.at-page-pane,
  body.techdoc-fluid > header + div .techdoc-sidebar-rail ~ .techdoc-main-rail.at-page-pane,
  .techdoc-layout-split .techdoc-sidebar-rail ~ .techdoc-main-rail.at-page-pane {
    overflow: auto;
  }
}

.at-history-scroll {
  width: 100%;
  max-width: 100%;
  max-height: min(32rem, 50dvh);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.at-history-scroll .at-history-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #272a31;
  box-shadow: 0 1px 0 rgba(66, 71, 84, 0.55);
  white-space: nowrap;
}

.at-history-table {
  width: max-content;
  min-width: 100%;
}

.at-history-table tbody td {
  vertical-align: middle;
}

@media (max-width: 1400px) {
  .at-history-table .at-col-readiness {
    display: none;
  }
}

@media (max-width: 1200px) {
  .at-history-table .at-col-qb {
    display: none;
  }
}

@media (max-width: 1100px) {
  .at-history-table .at-col-duration {
    display: none;
  }
}

@media (max-width: 1024px) {
  .at-history-table .at-col-llm-mode {
    display: none;
  }
}

/* Shared project picker — remote search, lazy load, virtual list */
.techdoc-project-picker {
  position: relative;
  width: 100%;
  max-width: 28rem;
}

.techdoc-project-picker-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-radius: 0.125rem;
  border: 1px solid #424754;
  background: #32353c;
  color: #e1e2ec;
  font-size: 14px;
  line-height: 1.25rem;
  cursor: pointer;
}

.techdoc-project-picker-trigger:hover {
  border-color: #8c909f;
}

.techdoc-project-picker-trigger:focus {
  outline: none;
  border-color: #adc6ff;
  box-shadow: 0 0 0 1px #adc6ff;
}

.techdoc-project-picker-panel {
  position: absolute;
  z-index: 70;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  border-radius: 0.5rem;
  border: 1px solid #424754;
  background: #272a31;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.techdoc-project-picker-panel.hidden {
  display: none;
}

.techdoc-project-picker-search {
  display: block;
  width: calc(100% - 1rem);
  margin: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.125rem;
  border: 1px solid #424754;
  background: #191b23;
  color: #e1e2ec;
  font-size: 13px;
}

.techdoc-project-picker-search:focus {
  outline: none;
  border-color: #adc6ff;
}

.techdoc-project-picker-viewport {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.techdoc-project-picker-spacer {
  position: relative;
  width: 100%;
}

.techdoc-project-picker-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.techdoc-project-picker-option {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  color: #e1e2ec;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.techdoc-project-picker-option:hover:not(:disabled) {
  background: rgba(173, 198, 255, 0.12);
}

.techdoc-project-picker-option.is-selected {
  background: rgba(77, 142, 255, 0.2);
  color: #adc6ff;
}

.techdoc-project-picker-option.is-loading {
  color: #8c909f;
  cursor: default;
}

.techdoc-project-picker-empty {
  padding: 0.75rem;
  color: #8c909f;
  font-size: 13px;
}

.techdoc-project-picker-panel.is-drop-up {
  top: auto;
  bottom: calc(100% + 4px);
}

.techdoc-project-picker-footer {
  padding: 0.375rem 0.75rem 0.5rem;
  border-top: 1px solid rgba(66, 71, 84, 0.55);
  color: #8c909f;
  font-size: 11px;
}

.techdoc-project-picker-footer {
  padding: 0.375rem 0.75rem 0.5rem;
  border-top: 1px solid rgba(66, 71, 84, 0.55);
  color: #8c909f;
  font-size: 11px;
}