/* ===========================================================================
   Print Sheets — compose a printable reference page from existing tables.

   Two visual layers in this file:
   (a) The composer/page chrome — dark-themed, matches the rest of the tables app
       (uses the shared --bg/--text/--border/--accent tokens).
   (b) The paper render (`.ps-sheet`) — a LIGHT, high-contrast, ink-frugal sheet
       used by BOTH the on-screen preview and the print output, so what you
       preview is what prints. The laminate-at-the-table workflow this feature
       targets means: white background, black text, hairline rules, no shadows.

   `@media print` at the bottom isolates the off-screen `.ps-print-root` as the
   sole printed content.
   =========================================================================== */

/* ---- List mode: saved-sheet cards ---------------------------------------- */

.ps-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.ps-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}

.ps-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ps-card-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.05rem;
}

.ps-card-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.ps-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ---- Editor: two-pane (form | live preview) ------------------------------ */

.ps-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .ps-editor { grid-template-columns: 1fr; }
}

.ps-editor-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ps-editor-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.ps-editor-row .form-field { flex: 1 1 160px; }

.ps-picker select { width: 100%; }

/* Picker search + system filter row, mirroring the browse page's filter bar. */
.ps-picker-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ps-picker-filters .tables-search {
  flex: 2 1 0;
  min-width: 0;
}

.ps-picker-filters .tables-select {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.ps-picker-add { width: 100%; }

/* Placed-table rows — name + per-table layout selects + reorder controls. */
.ps-placed-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ps-placed-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
}

.ps-placed-main {
  flex: 1 1 160px;
  min-width: 0;
  color: var(--text-primary);
  font-weight: 600;
}

.ps-placed-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-placed-missing {
  color: var(--warning);
  font-weight: 400;
  font-size: 0.85rem;
}

.ps-placed-opts {
  display: flex;
  gap: 0.4rem;
}

.ps-placed-opts select {
  font-size: 0.8rem;
  padding: 0.2rem 0.3rem;
}

.ps-placed-move {
  display: flex;
  gap: 0.3rem;
}

.ps-empty-tables {
  padding: 1rem;
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--border-primary);
  border-radius: 6px;
}

/* ---- Preview pane -------------------------------------------------------- */

.ps-editor-preview {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ps-preview-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.ps-preview-label {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Honest-preview disclaimer: the in-app render approximates page breaks; the
   browser's own print dialog is authoritative. */
.ps-preview-note {
  color: var(--warning);
  font-size: 0.78rem;
  line-height: 1.3;
  flex: 1 1 12rem;
}

/* The preview frame is sized by an inline aspect-ratio (the one dynamic value,
   page-size-dependent). It scrolls if the sheet content overflows the page. */
.ps-preview {
  width: 100%;
  max-height: 75vh;
  overflow: auto;
  background: #d9d9d9;            /* paper-tray grey around the white page */
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 0.75rem;
}

/* ===========================================================================
   The paper render — LIGHT. Used by the preview AND the print output.
   `.ps-sheet` forces a white page with black text regardless of the dark app
   theme, then a scoped reset normalizes the nested table-rows markup (which is
   token-driven dark by default) to paper colors. The !important here is
   deliberate and narrowly scoped to `.ps-sheet` descendants — it exists to peel
   the dark theme off reused components for a printable page, and nowhere else.
   =========================================================================== */

.ps-sheet {
  background: #fff;
  color: #111;
  padding: 0.4in;
  font-family: "Source Serif 4", Georgia, serif;
  /* Sheet-level column flow — the "DM screen insert" layout. Tables flow into
     N newspaper columns; each table block avoids splitting across columns. */
  column-gap: 0.3in;
  /* Base type size. All sheet type is relative (em) to this, so dropping the
     base for denser layouts scales the whole sheet down proportionally. */
  font-size: 16px;
}

.ps-sheet-cols-1 { column-count: 1; }
.ps-sheet-cols-2 { column-count: 2; }
/* Three columns are narrow — shrink the base so rows don't wrap. */
.ps-sheet-cols-3 { column-count: 3; font-size: 11px; }

.ps-sheet-title {
  column-span: all;
  font-weight: 700;
  font-size: 1.3em;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1.5px solid #111;
}

.ps-sheet-empty {
  color: #888;
  font-style: italic;
}

.ps-table {
  break-inside: avoid;           /* never split a table across columns/pages */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 0.25in;
}

.ps-table-name {
  font-weight: 700;
  font-size: 0.95em;
  margin-bottom: 0.15rem;
}

.ps-missing {
  color: #b00;
  font-size: 0.85rem;
  border: 1px dashed #b00;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.ps-missing code {
  font-family: "JetBrains Mono", monospace;
}

/* Scoped paper reset for the reused row-display markup (`.rt-display-table`,
   `.admin-table`, etc.). Strips dark backgrounds and recolors to print ink. */
.ps-sheet table,
.ps-sheet thead,
.ps-sheet tbody,
.ps-sheet tr,
.ps-sheet th,
.ps-sheet td,
.ps-sheet div,
.ps-sheet span,
.ps-sheet p,
.ps-sheet ul,
.ps-sheet ol,
.ps-sheet li {
  background: transparent !important;
  color: #111 !important;
  border-color: #bbb !important;
  box-shadow: none !important;
}

.ps-sheet table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
}

.ps-sheet th,
.ps-sheet td {
  text-align: left;
  padding: 0.12rem 0.3rem;
  border-bottom: 0.5pt solid #ccc !important;   /* hairline rules */
  vertical-align: top;
}

/* Headers are subtle column labels, not heavy bars — small, light, uppercase,
   so they don't dominate the now-compact rows. */
.ps-sheet th {
  border-bottom: 0.75pt solid #777 !important;
  font-weight: 600;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #555 !important;
}

/* Random-table print render: narrow roll-range column, results take the rest. */
.ps-rt-range {
  width: 1%;
  white-space: nowrap;
  padding-right: 0.5rem !important;
}

/* Per-table font scale + density (these DO work on the row <table>). Sizes are
   em-relative to the sheet base, so the 3-column base drop scales them too. */
.ps-font-compact table { font-size: 0.72em; }
.ps-font-normal table  { font-size: 0.85em; }
.ps-font-large table   { font-size: 1em; }

.ps-density-tight th,
.ps-density-tight td { padding: 0.04rem 0.3rem; }
.ps-density-normal th,
.ps-density-normal td { padding: 0.16rem 0.3rem; }

/* ---- Off-screen print root ----------------------------------------------- */
/* Present in the DOM only while a print is in flight; parked off-canvas on
   screen, promoted to the sole visible content under @media print. */
.ps-print-root {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 8.5in;
}

/* ===========================================================================
   Print — isolate the sheet, flip to paper, suppress app chrome.
   =========================================================================== */

@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    background: #fff !important;
  }

  /* Suppress the app shell entirely. Using display:none (NOT visibility:hidden)
     is the key: a merely-invisible app still occupies its full layout height, so
     the browser paginates that empty height into 1-2 trailing blank pages after
     the sheet. display:none collapses it to zero height. `.tables-app` is the
     per-route page wrapper; the two floating layers + SW banner are the only
     other on-screen content besides the print root. */
  .tables-app,
  .floating-card-layer,
  .tables-feedback,
  .feed-bell-wrap,
  .sw-update-banner { display: none !important; }

  /* The print root flows naturally from the top — static, not absolute, so the
     document height equals the sheet height (one page for a one-page sheet). */
  .ps-print-root {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  .ps-sheet {
    background: #fff !important;
    color: #000 !important;
    padding: 0;
  }

  a { color: #000 !important; text-decoration: none !important; }
}