/* Generator: type list on the left, result sheet on the right
   (title → Count/Seed → settings → filters → page bar → virtualized rows → footer). */

.workspace { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }

/* Type list */
.types { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); }
.types-search { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--rule); }
.types-search input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--well); }
.types-list { max-height: calc(100vh - 170px); overflow-y: auto; padding: 6px 0 10px; }
.group-label { font: 600 0.72rem var(--font-head); letter-spacing: 0.06em; color: var(--sub); padding: 12px 14px 4px; }
.type { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
  padding: 7px 14px; background: none; border: 0; border-left: 3px solid transparent; cursor: pointer; font-size: 0.95rem;
  transition: background var(--fast), border-color var(--fast); }
.type:hover { background: var(--well); }
.type[aria-selected="true"] { background: var(--navy-tint); border-left-color: var(--navy); font-weight: 600; }
.collapse-types { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--panel); color: var(--sub); cursor: pointer; transition: color var(--fast), border-color var(--fast); }
.collapse-types:hover { color: var(--navy); border-color: var(--navy); }
.collapse-types svg { transition: transform var(--fast); }

/* Folded type list: a thin rail with only the button to open it again. */
.workspace.collapsed { grid-template-columns: 58px minmax(0, 1fr); }
.collapsed .types-search { border-bottom: 0; }
.collapsed .types-search input, .collapsed .types-list { display: none; }
.collapsed .collapse-types svg { transform: rotate(180deg); }
.no-match { color: var(--sub); font-size: 0.9rem; padding: 10px 14px; margin: 0; }

/* Sheet */
.sheet { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; min-width: 0; }
.sheet-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--rule); }
.sheet-head h1 { font: 600 1.45rem/1.3 var(--font-head); margin: 0; }
.sheet-head p { margin: 2px 0 0; color: var(--sub); font-size: 0.95rem; }
.sheet-foot { padding: 10px 20px; border-top: 1px solid var(--rule); font-size: 0.85rem; color: var(--sub); }

/* Count / Seed / Unique / Generate */
.run { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.run-field { display: flex; flex-direction: column; gap: 6px; }
.run-field > label { display: inline-flex; align-items: center; font: 600 0.78rem var(--font-head); letter-spacing: 0.04em; color: var(--sub); }
.run-field input[type="number"] { width: 170px; height: 40px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--panel);
  font-family: var(--font-mono); font-size: 1rem; transition: border-color var(--fast), box-shadow var(--fast); }
.run-field input[type="number"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint); }
.run-check { align-self: flex-start; padding-top: 30px; }
.run .btn.main { height: 40px; padding: 0 22px; margin-top: 26px; }
.presets { display: flex; gap: 4px; }
.presets button { height: 24px; padding: 0 7px; border: 1px solid var(--rule); border-radius: 4px; background: var(--well); color: var(--sub); cursor: pointer;
  font: 500 0.74rem var(--font-mono); transition: color var(--fast), border-color var(--fast); }
.presets button:hover { color: var(--navy); border-color: var(--navy); }
.shortfall { align-self: center; margin-top: 26px; color: var(--red); font-size: 0.85rem; }
.shortfall:empty { display: none; }

/* Settings panel */
.config { display: flex; flex-wrap: wrap; gap: 18px 28px; padding: 16px 20px 18px; border-bottom: 1px solid var(--rule); }
.cfg { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cfg legend { padding: 0; margin-bottom: 6px; font: 600 0.78rem var(--font-head); letter-spacing: 0.04em; color: var(--sub); }
.cfg legend .info { margin-left: 6px; }
.cfg-hint { color: var(--sub); font-size: 0.78rem; }
.cfg select, .cfg-number input { height: 34px; padding: 0 8px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--panel); font-size: 0.9rem; }
.cfg-number input { width: 84px; font-family: var(--font-mono); }

/* Filters: search (text or regex), valid/invalid, invalid reason, exports */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--rule); background: var(--well); }
.search { position: relative; display: flex; align-items: center; flex: 0 1 300px; min-width: 200px; color: var(--sub); }
.search svg { position: absolute; left: 10px; pointer-events: none; }
.search input { width: 100%; height: 34px; padding: 0 44px 0 32px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--panel); color: var(--ink);
  transition: border-color var(--fast), box-shadow var(--fast); }
.search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint); }
.search input.bad { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.regex-toggle { position: absolute; right: 4px; height: 26px; min-width: 34px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; background: none;
  color: var(--sub); cursor: pointer; font: 600 0.82rem var(--font-mono); transition: background var(--fast), color var(--fast); }
.regex-toggle:hover { border-color: var(--rule); }
.regex-toggle[aria-pressed="true"] { background: var(--navy); color: var(--navy-ink); }
.reason { height: 34px; max-width: 240px; padding: 0 8px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--panel); font-size: 0.88rem; }
.filters .seg label { padding: 5px 10px; font-size: 0.85rem; }
.btn.clear { display: inline-flex; align-items: center; gap: 6px; border-style: dashed; color: var(--sub); }
.btn.clear:hover { color: var(--red); border-color: var(--red); background: var(--red-tint); }
.filters .filter-error { flex-basis: 100%; }

/* Page size + pager */
.pagebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 20px; border-bottom: 1px solid var(--rule); }
.pagebar .seg label { padding: 4px 10px; font: 0.82rem var(--font-mono); }
.pager { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.pager .btn { height: 30px; width: 30px; }

/* Virtualized rows: a fixed-height scroller; only the rows in view are in the DOM. */
/* --num-chars is set from the row count; a mono digit at 0.78rem is about 0.47rem wide, plus 12px padding each side. */
.result-scroll { --num-w: max(44px, calc(var(--num-chars, 3) * 0.47rem + 26px)); max-height: min(68vh, 760px); overflow: auto; overscroll-behavior: contain; position: relative;
  overflow-anchor: none; /* the virtual list keeps rows in place itself (virtual-list.js) */ }
.result-scroll thead th { position: sticky; top: 0; z-index: 1; }
.spacer td, li.spacer { padding: 0 !important; border: 0 !important; background: none !important; list-style: none; }

.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: var(--num-w) minmax(0, 1fr) auto auto; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); cursor: pointer;
  transition: background var(--fast); }
.row .num { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; border-right: 1px solid var(--rule); background: var(--well);
  font: 0.78rem var(--font-mono); color: var(--sub); font-variant-numeric: tabular-nums; }
.row .val { padding: 10px 14px; font: 0.98rem/1.5 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .val.text { font-family: var(--font-body); font-size: 1rem; }
.row .st { margin-right: 10px; }
.row .hint { font-size: 0.8rem; color: var(--sub); padding-right: 14px; opacity: 0; transition: opacity var(--fast); }
.row:hover { background: var(--well); }
.row:hover .hint, .row:focus-visible .hint { opacity: 1; }
.row.copied { background: var(--green-tint); }
.row.copied .hint { opacity: 1; color: var(--green); }
/* Table: column widths come from the longest values (see column-widths.js); wide tables scroll sideways
   with the # column pinned on the left. */
.result-scroll table { table-layout: fixed; min-width: 100%; }
.result-scroll td { overflow: hidden; text-overflow: ellipsis; }
.result-scroll th:first-child, .result-scroll td:first-child { position: sticky; left: 0; z-index: 1; padding-right: 12px; }
.result-scroll thead th:first-child { z-index: 2; }
/* Movable, resizable data columns (column-drag.js). Narrowed columns wrap instead of cutting values off. */
.result-scroll th.col-head { cursor: grab; user-select: none; touch-action: none; overflow: hidden; text-overflow: ellipsis; }
.result-scroll th.col-head:hover { color: var(--ink); }
.result-scroll th.dragging { opacity: 0.45; cursor: grabbing; }
.result-scroll th.drop-before { box-shadow: inset 3px 0 0 var(--navy); }
.result-scroll th.drop-after { box-shadow: inset -3px 0 0 var(--navy); }
.col-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 9px; cursor: col-resize; }
.col-resize::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 2px; border-radius: 1px; background: var(--rule-strong);
  opacity: 0; transition: opacity var(--fast); }
.col-head:hover .col-resize::after, thead.resizing .col-resize::after { opacity: 1; }
thead.resizing, thead.resizing * { cursor: col-resize !important; }
.result-scroll table.wrap td, .result-scroll table.wrap th.col-head { white-space: normal; overflow-wrap: anywhere; }
.result-scroll td[data-c] { cursor: pointer; transition: background var(--fast); }
.result-scroll td[data-c]:hover { background: var(--well); }
.result-scroll td.copied { background: var(--green-tint); }

/* Cards: types with several fields, when the table would be wider than the sheet. Fields start at
   their column's width (--w, from column-widths.js) and wrap, so values show in full without sideways scrolling. */
.record { display: grid; grid-template-columns: var(--num-w) minmax(0, 1fr) auto; align-items: start; border-bottom: 1px solid var(--rule); }
.record .num { align-self: stretch; display: flex; justify-content: flex-end; padding: 12px 12px 0 0; border-right: 1px solid var(--rule); background: var(--well);
  font: 0.78rem var(--font-mono); color: var(--sub); font-variant-numeric: tabular-nums; }
.record .rec-fields { display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 6px 8px; }
.rec-field { display: flex; flex-direction: column; gap: 1px; flex: 1 1 var(--w, 160px); max-width: 100%; min-width: min(var(--w, 160px), 100%); padding: 4px 6px; border-radius: 4px;
  transition: background var(--fast); }
.rec-field[data-c] { cursor: pointer; }
.rec-field[data-c]:hover { background: var(--well); }
.rec-field.copied { background: var(--green-tint); }
.rec-k { font: 600 0.7rem var(--font-head); letter-spacing: 0.04em; color: var(--sub); }
.rec-v { font-size: 0.92rem; line-height: 1.45; overflow-wrap: anywhere; }
.rec-v.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-field .st { align-self: flex-start; }

/* Copy-row button: end of each card, and the last table column (COPY_COL_PX in results.js). */
.copy-row { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--rule);
  border-radius: 6px; background: var(--panel); color: var(--sub); cursor: pointer; transition: color var(--fast), border-color var(--fast), background var(--fast); }
.copy-row:hover { color: var(--navy); border-color: var(--navy); }
.copy-row.copied { color: var(--green); border-color: var(--green); background: var(--green-tint); }
.record .copy-row { margin: 10px 10px 0 0; }
.result-scroll td.copy-cell { padding: 0; text-align: center; vertical-align: middle; }
.result-scroll td.copy-cell .copy-row { width: 28px; height: 28px; }

/* Full screen: the sheet covers the page; only the data, filters and exports stay. */
.focus-btn { display: inline-flex; align-items: center; gap: 6px; }
.focus-btn .i-shrink, .sheet.focus .focus-btn .i-expand { display: none; }
.sheet.focus .focus-btn .i-shrink { display: inline; }
.sheet.focus { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; border: 0; border-radius: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.sheet.focus .sheet-head { padding: 10px 20px; }
.sheet.focus .sheet-head h1 { font-size: 1.1rem; }
.sheet.focus .sheet-head p, .sheet.focus .run, .sheet.focus .config { display: none; }
.sheet.focus .result-scroll { flex: 1; min-height: 0; max-height: none; }
body.has-focus-sheet { overflow: hidden; }

@media (max-width: 820px) {
  .workspace { grid-template-columns: 1fr; }
  .types { position: static; }
  .workspace.collapsed { grid-template-columns: 1fr; }
  .collapsed .collapse-types { width: 100%; justify-content: flex-start; gap: 8px; padding: 0 12px; }
  .collapsed .collapse-types::after { content: "แสดงประเภทข้อมูล"; font-size: 0.9rem; }
  .collapse-types svg { transform: rotate(90deg); }
  .collapsed .collapse-types svg { transform: rotate(-90deg); }
  .types-list { max-height: 240px; }
  .filters .spacer { flex-basis: 100%; height: 0; }
}
@media (max-width: 520px) {
  .run-field { flex: 1 1 140px; }
  .run-field input[type="number"] { width: 100%; }
  .run-check { padding-top: 0; flex: 0 0 auto; }
  .run .btn.main { flex: 1 1 100%; margin-top: 0; }
  .search { flex: 1 1 100%; }
  .row { grid-template-columns: var(--num-w) minmax(0, 1fr); }
  .row .st { grid-column: 2; justify-self: start; margin: 0 0 8px 14px; }
  .row .hint { display: none; }
  .result-scroll { max-height: 70vh; }
}