/* PDF Combine (D-01): toolbars, working sheet (thumbnail grid / list), preview + markup
 * overlay and progress panel on top of ../shared/aa.css. Class names match app.js. */

.icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.desk-title .actions { flex-wrap: wrap; }

/* ── Main column: title, bars, status, working sheet ────────────────── */
.pc-main { display: flex; flex-direction: column; }

/* Each bar is a row of groups. A group never splits across lines until the column is
 * too narrow for it on its own; widths below are container widths of .pc-bars, so they
 * track the Docs aside as well as the viewport. */
.pc-bars { container: pc-bars / inline-size; border-bottom: var(--rule); }
.toolbar {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  min-height: 44px;
  padding: 6px var(--s5);
  background: var(--band);
  border-bottom: var(--rule-minor);
}
.toolbar:last-child { border-bottom: 0; }
.bar-key { padding-top: 9px; color: var(--ink2); }
.bar-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s4); min-width: 0; }
.bar-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); min-width: 0; }
.bar-group > .form-inline:not(:first-child),
.bar-group > .chk:not(:first-child) { margin-left: var(--s1); }
.bar-end { margin-left: auto; }
.toolbar-spacer { flex: 1; min-width: 12px; }

/* Issue: issue line + set options on row 1, transmittal cover on row 2; one row when wide. */
.issue-bar .bar-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "line set" "cover cover";
  align-items: center;
}
.issue-line { grid-area: line; }
.issue-cover { grid-area: cover; flex-wrap: nowrap; }
.issue-set { grid-area: set; justify-content: flex-end; }
.form-inline.grow { flex: 1 1 0; min-width: 0; }
.form-inline.grow .input { flex: 1 1 auto; width: auto; min-width: 120px; }
.form-inline.w-to { flex-grow: 2; max-width: 360px; }
.form-inline.w-remarks { flex-grow: 3; }

@container pc-bars (min-width: 1720px) {
  .issue-bar .bar-body { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "line cover set"; }
  .issue-cover, .issue-set { padding-left: var(--s4); border-left: var(--rule-minor); }
  .issue-cover { min-height: 30px; }
  .form-inline.w-remarks { max-width: 640px; }
}
@container pc-bars (max-width: 1039px) {
  .issue-bar .bar-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "line" "cover" "set"; }
  .issue-set { justify-content: flex-start; margin-left: 0; }
}
@container pc-bars (max-width: 759px) {
  .toolbar { grid-template-columns: 1fr; }
  .bar-key { padding: 2px 0 4px; }
  .bar-end { margin-left: 0; }
  .issue-cover { flex-wrap: wrap; }
  .bar-group > .form-inline,
  .form-inline.grow { flex: 1 1 220px; max-width: none; }
  .bar-group > .form-inline.fixed { flex: 0 0 auto; }
  .bar-group > .form-inline:not(.fixed) .input,
  .bar-group > .form-inline:not(.fixed) .select { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; }
}

.form-inline { display: flex; align-items: center; gap: 6px; }
.form-inline label,
.chk {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
}
.chk { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; white-space: nowrap; cursor: pointer; user-select: none; }
.form-inline label { white-space: nowrap; }
.chk input { accent-color: var(--navy); }

.input,
.select {
  min-height: 30px;
  padding: 0 var(--s2);
  border: var(--rule-minor);
  background: var(--field);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
}
.input { width: 200px; }
.input::placeholder { color: var(--ink3); opacity: 0.7; font-weight: 400; }
.input:focus, .select:focus { outline: 2px solid var(--focus); outline-offset: -2px; border-color: transparent; }
.select { max-width: 220px; cursor: pointer; }
.w-output { width: 180px; }
.w-job { width: 112px; }
.w-date { width: 148px; }
.w-author { width: 140px; }

/* Compact buttons used across bars, cards and overlays */
.btn-secondary,
.btn-ghost,
.btn-icon,
.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--t14);
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
}
.btn-secondary { min-height: 30px; padding: 0 var(--s3); border: var(--rule); background: var(--field); }
.btn-secondary:hover { background: var(--margin); }
.btn-ghost { min-height: 30px; padding: 0 var(--s2); border: 1px solid transparent; background: transparent; }
.btn-ghost:hover { border-color: var(--minor); background: var(--field); }
.btn-secondary:disabled,
.btn-ghost:disabled { color: var(--ink3); opacity: 0.55; cursor: default; pointer-events: none; }
.btn-secondary:disabled { border-color: var(--minor); background: var(--margin); }

.btn-icon {
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--navy);
  background: var(--field);
}
.btn-icon:hover { background: var(--margin); }
.btn-icon.danger:hover { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }

.view-toggle { display: flex; border: var(--rule-minor); background: var(--field); }
.view-btn { min-height: 28px; padding: 0 10px; border: 0; background: transparent; font-size: 13px; }
.view-btn + .view-btn { border-left: var(--rule-minor); }
.view-btn:hover { background: var(--margin); }
.view-btn.is-active { background: var(--navy); color: var(--field); }

.list-move { display: flex; align-items: center; gap: 2px; }

.pc-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s4);
  padding: var(--s2) var(--s5);
  border-bottom: var(--rule-minor);
}
.count-label { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; color: var(--navy); white-space: nowrap; }
.header-hint { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }

/* ── Working sheet ──────────────────────────────────────────────────── */
.canvas {
  position: relative;
  flex: 1;
  min-height: 420px;
  margin: var(--s5);
  border: var(--rule);
  background-color: var(--field);
  background-image: linear-gradient(rgba(22, 35, 63, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 35, 63, 0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  outline: none;
}
.canvas.is-file-drop { box-shadow: inset 3px 0 0 var(--redline); background-color: var(--band); }
.canvas.is-file-drop .empty-panel { border-style: solid; }

.empty-state { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: var(--s6) var(--s4); }
.canvas > .empty-state { position: absolute; inset: 0; }
.empty-panel {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  width: min(520px, 100%);
  padding: var(--s6) var(--s5);
  border: 1.5px dashed var(--navy);
  background: var(--field);
  text-align: center;
}
.empty-icon { width: 36px; height: 36px; fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty-title { font-family: var(--f-title); font-size: 22px; font-weight: 700; text-transform: uppercase; line-height: 1; }
.empty-sub { max-width: 44ch; font-size: var(--t14); color: var(--ink2); }

/* Thumbnail grid */
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, 168px); align-content: start; gap: var(--s4); padding: var(--s4); }

.thumb-card {
  position: relative;
  width: 168px;
  overflow: hidden;
  border: 1px solid var(--minor);
  background: var(--field);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.thumb-card:hover { border-color: var(--navy); }
.thumb-card.is-selected { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.thumb-card.is-selected::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 3px; background: var(--redline); }
.thumb-card.is-dragging { opacity: 0.35; }
.thumb-card.is-error { border-color: var(--danger); }

.thumb-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  overflow: hidden;
  background: var(--margin);
}
.thumb-preview img,
.thumb-preview canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  pointer-events: none;
  -webkit-user-drag: none;
}
.thumb-preview.is-rotated-90 img, .thumb-preview.is-rotated-90 canvas,
.thumb-preview.is-rotated-270 img, .thumb-preview.is-rotated-270 canvas {
  transform-origin: center;
  max-width: 72%;
  max-height: 72%;
}
.thumb-preview.is-rotated-90 img, .thumb-preview.is-rotated-90 canvas { transform: rotate(90deg); }
.thumb-preview.is-rotated-180 img, .thumb-preview.is-rotated-180 canvas { transform: rotate(180deg); }
.thumb-preview.is-rotated-270 img, .thumb-preview.is-rotated-270 canvas { transform: rotate(270deg); }
.thumb-card.is-blank .thumb-preview {
  background: repeating-linear-gradient(-45deg, var(--field), var(--field) 8px, var(--band) 8px, var(--band) 16px);
}
.thumb-placeholder { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }

.thumb-meta { padding: 6px var(--s2) var(--s2); border-top: var(--rule-minor); }
.thumb-name { overflow: hidden; font-family: var(--f-mono); font-size: 12px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.thumb-sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }

.thumb-actions { position: absolute; top: 6px; right: 6px; z-index: 2; display: none; gap: 4px; }
.thumb-card:hover .thumb-actions,
.thumb-card.is-selected .thumb-actions { display: flex; }

.drop-indicator { position: fixed; z-index: 250; width: 3px; background: var(--redline); pointer-events: none; }
.thumb-card-ghost { position: fixed; z-index: 300; margin: 0; opacity: 0.92; pointer-events: none; box-shadow: 4px 4px 0 rgba(22, 35, 63, 0.18); transform: rotate(1.5deg); }
body.is-reordering,
body.is-reordering * { cursor: grabbing !important; user-select: none; }

/* Badges read like house chips */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid var(--minor);
  background: var(--field);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink2);
}
.badge-ok { border-color: var(--success); color: var(--success); }
.badge-error { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }

/* List view */
.list-wrap { padding: var(--s4); overflow-x: auto; }
.data-table { background: var(--field); border: var(--rule); }
.data-table thead th { background: var(--field); }
.data-table td { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.data-table td.label-cell { font-family: var(--f-ui); font-size: var(--t15); font-weight: 600; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover td { background: var(--band); }
.data-table tr.is-selected td { background: var(--margin); }
.data-table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--redline); }
.data-table .numeric { text-align: right; }
.data-table th.is-sortable { cursor: pointer; }
.data-table th.is-sortable:hover { color: var(--navy); }
.data-table th.is-active { color: var(--navy); }
.data-table th.is-active::after { content: attr(data-dir); margin-left: 6px; font-size: 9px; }
.col-num { width: 48px; }
.col-pages { width: 90px; }
.col-size { width: 110px; }
.col-status { width: 140px; }
.col-actions { width: 72px; }
.data-table td.row-actions { text-align: right; white-space: nowrap; }
.row-actions .btn-icon { vertical-align: middle; }
.row-actions .btn-icon + .btn-icon { margin-left: 4px; }

/* ── Overlays: progress + preview ───────────────────────────────────── */
.progress-overlay,
.preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
  background: rgba(22, 35, 63, 0.55);
}
.preview-overlay { z-index: 220; padding: var(--s4); }
.progress-panel,
.preview-panel { border: var(--rule); background: var(--field); box-shadow: 6px 6px 0 rgba(22, 35, 63, 0.25); }

.progress-panel { width: min(420px, 100%); padding: var(--s4) var(--s5) var(--s5); }
.progress-kicker { margin-bottom: var(--s2); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.progress-status { margin-bottom: var(--s3); overflow: hidden; font-family: var(--f-mono); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.progress-bar { height: 12px; border: 1px solid var(--navy); background: var(--field); }
.progress-fill { width: 0; height: 100%; background: var(--navy); transition: width 0.15s ease; }

.preview-panel { container: preview / inline-size; display: flex; flex-direction: column; width: min(1680px, calc(100vw - 32px)); height: calc(100vh - 32px); }
.preview-header {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto;
  grid-template-areas: "title tools close";
  align-items: center;
  gap: var(--s2) var(--s3);
  min-height: var(--row-head);
  padding: 6px var(--s4);
  border-bottom: var(--rule);
  background: var(--band);
}
.preview-title { grid-area: title; min-width: 0; overflow: hidden; font-family: var(--f-mono); font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.preview-tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s2) var(--s3); min-width: 0; }
.preview-close { grid-area: close; padding-left: var(--s3); border-left: var(--rule-minor); }
.preview-group { display: inline-flex; align-items: center; gap: 2px; }
.mark-tools { display: inline-flex; flex-wrap: wrap; border: var(--rule-minor); background: var(--field); }
.mark-tools .view-btn + .view-btn { border-left: var(--rule-minor); }
.zoom-step { display: inline-flex; border: var(--rule-minor); background: var(--field); }
.zoom-step > * { min-height: 28px; border: 0; }
.zoom-step > * + * { border-left: var(--rule-minor); }
.zoom-step > .btn-ghost { justify-content: center; min-width: 30px; }
.zoom-step > .btn-ghost:hover { background: var(--margin); }
.preview-zoom-label { display: inline-flex; align-items: center; justify-content: center; min-width: 5em; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }

@container preview (max-width: 1100px) {
  .preview-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title close" "tools tools"; }
  .preview-tools { justify-content: flex-start; }
}

.preview-body { flex: 1; min-height: 0; padding: var(--s4); overflow: auto; background: var(--margin); cursor: grab; }
.preview-body.is-panning { cursor: grabbing; user-select: none; }
.preview-body.is-marking { cursor: crosshair; }
.preview-body canvas { display: block; max-width: none; height: auto; margin: 0; background: #fff; }
.preview-stage { position: relative; display: block; margin: 0 auto; border: 1px solid var(--navy); background: #fff; line-height: 0; }

/* Markup colours are what gets written into the PDF, not house chrome. */
.markup-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.markup-svg .mark-existing { fill: rgba(227, 28, 28, 0.08); stroke: #c41e1e; stroke-width: 1.25; stroke-dasharray: 4 3; cursor: pointer; }
.markup-svg .mark-draft { cursor: pointer; }
.markup-svg .mark-note { fill: #f0c14a; stroke: #8a6a22; stroke-width: 1; }
.markup-svg .mark-highlight { fill: rgba(255, 214, 10, 0.38); stroke: none; }
.markup-svg .mark-box,
.markup-svg .mark-cloud { fill: none; stroke: #e31c1c; stroke-width: 1.6; }
.markup-svg .mark-freetext { fill: none; stroke: #e31c1c; stroke-width: 1; stroke-dasharray: 2 2; }
.markup-svg .mark-label { fill: #e31c1c; font-family: Helvetica, Arial, sans-serif; font-size: 12px; pointer-events: none; }
.markup-svg .mark-note-label { fill: #1a1a1a; font-family: Helvetica, Arial, sans-serif; font-size: 10px; pointer-events: none; }
.markup-svg .mark-selected { stroke: #ff4d4d; stroke-width: 2.2; }
.markup-svg .mark-rubber { fill: rgba(227, 28, 28, 0.1); stroke: #e31c1c; stroke-dasharray: 5 4; stroke-width: 1.25; pointer-events: none; }

.markup-dock { flex-shrink: 0; padding: var(--s3) var(--s4); border-top: var(--rule); background: var(--band); }
.markup-dock-label { margin-bottom: 6px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.markup-text { width: 100%; min-height: 64px; padding: var(--s2) var(--s3); border: var(--rule-minor); background: var(--field); font: 400 var(--t15)/1.45 var(--f-ui); color: var(--navy); resize: vertical; }
.markup-text:focus { outline: 2px solid var(--focus); outline-offset: -2px; border-color: transparent; }
.markup-dock-actions { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }

/* ── Narrow screens ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .toolbar, .pc-status { padding-left: var(--s4); padding-right: var(--s4); }
  .toolbar-spacer { display: none; }
  .canvas { margin: var(--s4); min-height: 320px; }
  .thumb-grid { justify-content: center; }
}
@media (max-width: 600px) {
  .footer-strip > .muted { display: none; }
}
@media (max-width: 520px) {
  .guide-link { display: none !important; }
}