/* ──────────────────────────────────────────────────────────────────────────
   OpenDrawing — Upload package: pages selector (step 2) + per-page
   processing view (step 3).
   Fonts + variables → tokens.css (load that first).
   ────────────────────────────────────────────────────────────────────────── */

@layer components {

/* ── Wider dialog for pages step ─────────────────────────────────────────── */
.wizard-dialog.pages-step {
  width: min(1020px, calc(100vw - 32px));
  max-width: none;
  max-height: min(720px, calc(100vh - 48px));
}

/* Pages step body: no body-level scroll — each column scrolls on its own */
.wizard-dialog.pages-step .wizard-body {
  display: flex; flex-direction: column;
  overflow: hidden;
}

.wizard-dialog.pages-step .step-content {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGES STEP (step 2)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 3-column layout: file list · page grid · preview ───────────────────── */
.pages-3col {
  display: grid;
  grid-template-columns: 186px 1fr 200px;
  gap: 12px;
  flex: 1; min-height: 0;
}

/* Single-file upload: no left sidebar needed */
.pages-3col.single-file {
  grid-template-columns: 1fr 200px;
}

/* ════════════════════════════════════════════════
   LEFT PANEL — file list
   ════════════════════════════════════════════════ */
.pages-file-sidebar {
  display: flex; flex-direction: column;
  overflow-y: auto; min-height: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 10px 8px; gap: 2px;
  background: var(--bg-surface);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.pages-file-sidebar::-webkit-scrollbar       { width: 4px; }
.pages-file-sidebar::-webkit-scrollbar-track { background: transparent; }
.pages-file-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* "Files (N)" header */
.pfs-header {
  font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted);
  padding: 0 6px 7px; flex-shrink: 0;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}

/* Each file row */
.pages-file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer;
  background: none; text-align: left; width: 100%;
  transition: background .12s, border-color .12s;

  &:hover:not(.active) { background: var(--bg-hover); }

  &.active {
    background: var(--accent-dim);
    border-color: var(--accent);
  }
}

/* Coloured status dot */
.pfi-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--border); transition: background .12s;

  .pages-file-item.has-sel:not(.active) & { background: rgba(34,197,94,.75); }
  .pages-file-item.active &               { background: var(--accent); }
}

.pfi-body {
  flex: 1; min-width: 0;
}

.pfi-name {
  display: block; font-size: 11.5px; font-weight: var(--fw-semibold);
  color: var(--text-muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; line-height: 1.3;

  .pages-file-item.has-sel:not(.active) & { color: var(--text-secondary); }
  .pages-file-item.active &               { color: var(--accent); }
}

.pfi-meta {
  display: block; font-size: 10px; color: var(--text-muted);
  line-height: 1.4; margin-top: 1px;
}

/* Selection-count badge (right side of row) */
.pfi-badge {
  font-size: 10px; font-weight: var(--fw-semibold); flex-shrink: 0;
  min-width: 18px; text-align: center;
  padding: 1px 5px; border-radius: 9px;
  background: rgba(34,197,94,.1); color: #16a34a;
  transition: background .12s, color .12s;

  &.zero { background: transparent; color: var(--text-muted); }

  .pages-file-item.active & {
    background: rgba(59,91,219,.12); color: var(--accent);
  }
}

/* ════════════════════════════════════════════════
   MIDDLE PANEL — page grid
   ════════════════════════════════════════════════ */
.pages-main {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
}

/* ── Header (type tabs + actions) ────────────────────────────────────────── */
.pages-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px; flex-shrink: 0;
}

.pages-tabs {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg-hover); border-radius: var(--radius);
  padding: 3px;
}

.pages-tab {
  padding: 5px 13px; border-radius: calc(var(--radius) - 2px);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted);
  background: none; border: none; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
  outline: none; /* suppress browser ring on mouse click */

  &.active {
    background: var(--bg-surface); color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
  }
  &:hover:not(.active) { color: var(--text-secondary); }
  /* Keyboard-only focus ring — visible when tabbing, invisible on mouse click */
  &:focus-visible { outline: 2px solid rgba(59,91,219,.55); outline-offset: 1px; }
}

.pages-tab-count {
  color: var(--text-muted); font-weight: var(--fw-regular);
}

.pages-actions {
  display: flex; align-items: center; gap: 8px;
}

.pages-sel-label {
  font-size: var(--fs-xs); color: var(--text-muted); margin-right: 4px;
}

.pages-act-btn {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent);
  background: none; border: 1px solid rgba(59,91,219,.25);
  border-radius: var(--radius); padding: 3px 10px; cursor: pointer;
  transition: background .1s, border-color .1s;

  &:hover { background: rgba(59,91,219,.06); border-color: var(--accent); }
}

/* ── Legend ──────────────────────────────────────────────────────────────── */
.pages-legend {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 10px; line-height: 1.4;
}

.pages-legend-badge {
  font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: .3px;
  text-transform: uppercase; color: #c2620a;
  background: rgba(251,146,60,.13); border-radius: 10px;
  padding: 1px 6px; flex-shrink: 0;
}

/* ── Scrollable thumbnail grid ───────────────────────────────────────────── */
.pages-grid-wrap {
  flex: 1; overflow-y: auto; min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

.pages-grid-wrap::-webkit-scrollbar       { width: 3px; }
.pages-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.pages-grid-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  /* 4px on sides leaves room for the 3px focus-ring shadow;
     24px at bottom gives breathing space before the footer */
  gap: 8px; padding: 4px 4px 24px;
}

/* ── Page thumbnail card ─────────────────────────────────────────────────── */
.page-thumb {
  border-radius: var(--radius-lg); border: 1.5px solid var(--border);
  background: var(--bg-surface); cursor: pointer; overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
  position: relative; user-select: none;

  &:hover { border-color: rgba(255,255,255,.15); }

  /* Selected for processing — filled checkbox is the signal; subtle tint only, no border change */
  &.selected {
    background: rgba(59,91,219,.05);
  }

  /* Currently previewed — neutral white ring signals "this is in the preview
     panel" without implying selection. Blue is reserved for selected pages. */
  &.focus {
    border-color: rgba(255,255,255,.4);
    box-shadow: 0 0 0 3px rgba(255,255,255,.07);
  }

  /* Both selected + previewed — blue confirms selection, ring strengthens it */
  &.selected.focus {
    border-color: var(--accent);
    background: rgba(59,91,219,.08);
    box-shadow: 0 0 0 3px rgba(59,91,219,.2);
  }
}

.page-thumb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 5px 2px;
}

.page-thumb-check {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s; color: transparent;

  .page-thumb:hover & { border-color: rgba(59,91,219,.55); }
  &.on { background: var(--accent); border-color: var(--accent); color: #fff; }
}

.page-conf {
  font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: .2px;
  padding: 1px 5px; border-radius: 10px;

  &.high { background: rgba(34,197,94,.12);  color: #16a34a; }
  &.med  { background: rgba(234,179,8,.12);  color: #a16207; }
  &.low  { background: rgba(239,68,68,.12);  color: #dc2626; }
}

.page-thumb-img {
  margin: 0 6px; height: 78px; overflow: hidden;
  background: var(--bg-hover); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;

  &.text     { background: rgba(148,163,184,.08); }
  &.has-real { background: #fff; padding: 0; }
}

.page-real-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}

.page-thumb-badge {
  font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: .3px;
  text-transform: uppercase; color: #c2620a;
  background: rgba(251,146,60,.13); border-radius: 10px;
  padding: 1px 6px; margin: 3px 6px 0; display: inline-block;
}

.page-thumb-name {
  font-size: 10px; color: var(--text-muted);
  text-align: center; padding: 3px 4px 7px;
}

/* ════════════════════════════════════════════════
   RIGHT PANEL — preview
   ════════════════════════════════════════════════ */
.pages-preview {
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; min-height: 0;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.pages-preview::-webkit-scrollbar       { width: 4px; }
.pages-preview::-webkit-scrollbar-track { background: transparent; }
.pages-preview::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.pp-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  flex-shrink: 0;
}

.pp-nav-btn {
  width: 26px; height: 26px; border-radius: var(--radius);
  background: var(--bg-surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
  transition: all .1s;

  &:hover { background: var(--bg-hover); color: var(--text-primary); border-color: rgba(59,91,219,.3); }
  &:disabled { opacity: .35; cursor: default; }
}

.pp-nav-label {
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--text-secondary); text-align: center; flex: 1;
}

.pp-img {
  flex-shrink: 0; height: 190px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center;

  &.text { background: rgba(148,163,184,.06); }
}

.pp-img.has-real {
  background: #fff;
  align-items: stretch;
}
.pp-img.has-real .page-real-img {
  object-fit: contain;
  object-position: center;
  height: auto; max-height: 100%;
}

.pp-info { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }

.pp-info-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: var(--text-muted);

  & strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
}

.pp-prob-row { gap: 6px; align-items: center; }

.pp-prob-bar-wrap {
  flex: 1; height: 4px; border-radius: 3px;
  background: var(--bg-hover); overflow: hidden;
}

.pp-prob-bar {
  height: 100%; border-radius: 3px;
  background: var(--accent);
  transition: width .25s ease;
}

.pp-prob-bar--text { background: var(--text-muted); }

.pp-toggle {
  width: 100%; padding: 7px 0; border-radius: var(--radius); flex-shrink: 0;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-align: center; cursor: pointer; transition: all .12s;
  border: 1.5px solid rgba(59,91,219,.3);
  background: rgba(59,91,219,.06); color: var(--accent);

  &:hover { background: rgba(59,91,219,.12); border-color: var(--accent); }

  &.selected {
    background: var(--accent); color: #fff; border-color: var(--accent);
    &:hover { background: var(--accent-hover); }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROCESSING STEP (step 3)
   ══════════════════════════════════════════════════════════════════════════ */

.ps-stats { display: flex; gap: 10px; margin-bottom: 16px; }

.ps-stat {
  flex: 1; text-align: center;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px 8px;
}

.ps-stat-val {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  font-family: var(--mono); color: var(--text-muted);
  line-height: 1.15; margin-bottom: 3px;

  &.done   { color: var(--success); }
  &.active { color: var(--accent);  }
}

.ps-stat-label {
  font-size: 9px; font-weight: var(--fw-semibold);
  color: var(--text-muted); letter-spacing: .6px; text-transform: uppercase;
}

.ps-progress { margin-bottom: 16px; }

.ps-progress-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 7px;
}

.ps-pct { font-family: var(--mono); font-weight: var(--fw-semibold); color: var(--accent); }

.ps-track { height: 6px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; }

.ps-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-hover), var(--accent), #7b96ff);
  transition: width .3s ease;
}

.ps-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 300px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.ps-list::-webkit-scrollbar       { width: 5px; }
.ps-list::-webkit-scrollbar-track { background: transparent; }
.ps-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.ps-page-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-lg);
  background: var(--bg-surface); border: 1px solid var(--border);
  transition: border-color .15s, background .15s;

  &.active { border-color: rgba(59,91,219,.25); background: rgba(59,91,219,.02); }
  &.done   { border-color: rgba(34,197,94,.2);  background: rgba(34,197,94,.02); }
}

.ps-page-thumb {
  width: 28px; height: 28px; border-radius: var(--radius);
  background: var(--bg-hover); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--text-muted); transition: all .15s;

  &.active { background: rgba(59,91,219,.1); border-color: rgba(59,91,219,.25); color: var(--accent);  }
  &.done   { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.25); color: var(--success); }
}

.ps-page-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px;
}

.ps-page-name {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary);
}

.ps-page-bar { height: 3px; border-radius: 2px; background: var(--bg-hover); overflow: hidden; }

.ps-page-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #7b96ff);
  transition: width .2s ease;
}

.ps-page-status {
  font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .2px;
  flex-shrink: 0; min-width: 38px; text-align: right;

  &.done   { color: var(--success); }
  &.active { color: var(--accent);  }
  &.prep   { color: var(--text-muted); }
  &.queue  { color: var(--border);     }
}

.ps-spinner {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(59,91,219,.2); border-top-color: var(--accent);
  animation: od-spin .6s linear infinite;
}

.ps-check {
  display: flex; align-items: center; justify-content: center;
  color: var(--success); line-height: 1;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .wizard-dialog.pages-step { width: calc(100vw - 32px); }
  /* Hide file sidebar on narrow screens — use dialog for now */
  .pages-3col                { grid-template-columns: 1fr 224px; }
  .pages-file-sidebar        { display: none; }
}

@media (max-width: 680px) {
  .pages-3col    { grid-template-columns: 1fr; }
  .pages-preview { display: none; }
}

@media (max-width: 600px) {
  .pages-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .ps-stats   { flex-wrap: wrap; }
  .ps-stat    { min-width: calc(50% - 5px); }
}

} /* @layer components */