/*
 * app.css — component styling for the Phase-1 preview UI.
 *
 * HARD RULE: every color comes from a var(--color-*) token defined in tokens.css. No raw theme
 * hexes appear here, so the [data-theme="dark"] overrides reskin the whole UI automatically.
 * Accent (var(--color-accent)) is used ONLY on (1) the primary CTA and (2) the active page
 * indicator — never on prev/next/zoom/jump/theme-toggle/secondary buttons.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-surface);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- App shell (grid: toolbar row + main[stage 1fr | side-panel 0] + footer) ---------- */

.app-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

/* ---------- AGPL §13 footer (Phase 5) ---------- *
 * Token-only styling — :root + [data-theme=dark] overrides reskin it automatically.
 * Accent color is reserved for the primary CTA (Phase 1 rule), so the link uses
 * --color-text + underline, only reaching --color-accent on hover.
 */

.app-footer {
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-panel);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
}

.app-footer__text {
  margin: 0;
}

.app-footer__link {
  color: var(--color-text);
  text-decoration: underline;
}

.app-footer__link:hover {
  color: var(--color-accent);
}

.main {
  display: grid;
  /* Reserved side-panel column declared now (collapsed to 0); Phase 2/3 expand it. */
  grid-template-columns: 1fr 0;
  min-height: 0;
}

.side-panel {
  /* Hidden/collapsed in Phase 1, present in the grid for forward-compatibility. */
  width: 0;
  overflow: hidden;
  border-left: 1px solid var(--color-border);
  background: var(--color-panel);
}

/* ---------- Toolbar ---------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-border);
}

.toolbar__brand {
  display: flex;
  align-items: center;
}

.app-title {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text);
}

.toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.toolbar__spacer {
  flex: 1 1 auto;
}

/* Doc-dependent clusters are dimmed + non-interactive until a document loads. */
.toolbar__group[data-doc-control][aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Buttons ---------- */

.primary-btn {
  min-height: var(--control-hit);
  padding: 0 var(--space-lg);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: #ffffff; /* on-accent foreground (white reads on both blue and amber accents) */
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.primary-btn:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Neutral icon button (prev/next, zoom, theme toggle) — surface + border, NOT accent. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-hit);
  height: var(--control-hit);
  padding: 0;
  color: var(--color-text);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.icon-btn:hover:not(:disabled) {
  background: var(--color-neutral-hover);
}

.icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Neutral text button (fit-to-width, replace-file). */
.text-btn {
  min-height: var(--control-hit);
  padding: 0 var(--space-md);
  font-family: inherit;
  font-size: var(--font-size-label);
  color: var(--color-text);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.text-btn:hover:not(:disabled) {
  background: var(--color-neutral-hover);
}

.text-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Accent-outline button: bordered + text in the accent hue, neutral fill. Used by 恢復原圖
   after 套用變更 to make the restart path more discoverable without competing with the
   single primary CTA (下載 PDF). Tracks the accent (blue in light, amber in dark). */
.outline-btn {
  min-height: var(--control-hit);
  padding: 0 var(--space-md);
  font-family: inherit;
  font-size: var(--font-size-label);
  color: var(--color-accent);
  background: var(--color-panel);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.outline-btn:hover:not(:disabled) {
  background: var(--color-neutral-hover);
}

.outline-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Theme toggle stays neutral; icon visibility is driven by the root data-theme. */
.theme-toggle__icon {
  display: none;
}
:root:not([data-theme="dark"]) .theme-toggle__icon--sun {
  display: block;
}
:root[data-theme="dark"] .theme-toggle__icon--moon {
  display: block;
}

/* ---------- Page navigator ---------- */

.page-indicator {
  min-width: 4.5ch;
  text-align: center;
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}

.page-indicator__compact {
  font-variant-numeric: tabular-nums;
}

/* The CURRENT page number is the only extra accent (besides the primary CTA), in both themes. */
.page-indicator__compact .page-current {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

.jump {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.jump__label {
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}

.jump__input {
  width: 4.5rem;
  height: var(--control-hit);
  padding: 0 var(--space-sm);
  font-family: inherit;
  font-size: var(--font-size-label);
  color: var(--color-text);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

.jump__input:disabled {
  opacity: 0.45;
}

/* ---------- Zoom control ---------- */

.zoom__level {
  min-width: 4ch;
  text-align: center;
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Page stage (overlay-ready host) ---------- */

.page-stage {
  position: relative; /* positioning context for a future Phase-2 absolute overlay */
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  background: var(--color-surface);
}

/* State machine: app.js toggles [hidden] so exactly one .state is visible. */
.state {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.state[hidden] {
  display: none;
}

/* ---------- Dropzone / empty state ---------- */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: 32rem;
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
  background: var(--color-panel);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

/* Drag-over: accent-tinted border (accent hue as an affordance, not a fill). */
.dropzone.is-dragover {
  border-color: var(--color-accent);
  background: var(--color-panel);
}

.dropzone__heading {
  margin: 0;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-display);
  color: var(--color-text);
}

.dropzone__body {
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
}

.dropzone__secondary {
  margin: 0;
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}

.dropzone__hint {
  margin: 0;
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}

/* ---------- Loader (whole-doc) ---------- */

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.loader__text {
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
}

/* Neutral spinner; accent stroke permitted as MOTION (the moving arc), not a fill. */
.spinner {
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.4s;
  }
}

/* ---------- Loaded state: page frame + image ---------- */

.page-frame {
  position: relative; /* keeps the page loader overlay aligned to the true image box */
  display: inline-block;
  line-height: 0;
  background: var(--color-panel);
  box-shadow: var(--sheet-shadow);
}

.page-image {
  display: block;
  /* width/height are set imperatively by viewer.js to the CSS-scaled render box (D-02). */
  max-width: none;
}

.page-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-scrim);
}

.page-loader[hidden] {
  display: none;
}

.page-loader__text {
  font-size: var(--font-size-label);
  color: #ffffff;
}

/* ---------- Inline error block ---------- */

.error-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  max-width: 30rem;
  padding: var(--space-2xl);
  text-align: center;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.error-block__icon {
  color: var(--color-danger);
}

.error-block__heading {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.error-block__body {
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
}

.error-block__body:empty {
  display: none;
}

/* ============================================================================
 * Phase 2 — region overlay, side-panel region list, before/after toggle, action group.
 * HARD RULE (unchanged): every color is a var(--color-*) token. The region rectangle uses the
 * dedicated --color-region-* tokens (a cool tool-overlay hue), NEVER the reserved accent.
 * ========================================================================== */

/* ---------- Side-panel expansion (driven by app.js toggling .main--paneled) ---------- */

/* When a document is loaded the reserved column expands to --side-panel-width; otherwise it
   stays collapsed at 0 (the Phase-1 default rule above). */
.main--paneled {
  grid-template-columns: 1fr var(--side-panel-width);
}

.main--paneled .side-panel {
  width: var(--side-panel-width);
  overflow: hidden;
}

.side-panel__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ---------- Region panel header ---------- */

.region-panel__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.region-panel__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.region-panel__heading {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text);
}

.region-panel__heading-logo {
  height: 4.8em;
  width: auto;
  vertical-align: -1.9em;
  margin-right: -0.5em;
}

.region-panel__count {
  margin: 0;
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.region-panel__scope {
  margin: 0;
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Destructive text button (clear-all in the header) — danger-tinted, NOT an accent fill. */
.danger-text-btn {
  min-height: var(--control-hit);
  padding: 0 var(--space-sm);
  font-family: inherit;
  font-size: var(--font-size-label);
  color: var(--color-danger);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.danger-text-btn:hover:not(:disabled) {
  border-color: var(--color-danger);
}

.danger-text-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Region empty-state ---------- */

.region-empty {
  padding: var(--space-lg) var(--space-md);
}

.region-empty[hidden] {
  display: none;
}

.region-empty__heading {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.region-empty__body {
  margin: 0;
  font-size: var(--font-size-label);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}

/* ---------- Region list ---------- */

.region-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.region-list[hidden] {
  display: none;
}

.region-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  cursor: default;
  transition: background-color 0.12s ease;
}

.region-row:hover,
.region-row.is-active {
  background: var(--color-neutral-hover);
}

.region-row__label {
  font-size: var(--font-size-label);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Per-region delete icon button — neutral by default, danger on hover. */
/* ---------- Region inline notice / error (reuses .error-block tone) ---------- */

.region-notice {
  margin: var(--space-md);
  padding: var(--space-md);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.region-notice[hidden] {
  display: none;
}

.region-notice__body {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-label);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}

.region-notice__body:last-child {
  margin-bottom: 0;
}

/* ---------- Region overlay (child of #page-frame; pins to the true render box) ---------- */

.region-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--overlay-z);
  cursor: crosshair;
  /* No background: the page image shows through; rectangles are explicit children. */
}

.region-overlay[hidden] {
  display: none;
}

/* Committed region rectangle — slate border + translucent fill (NOT accent). */
.region-rect {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--color-region-border);
  background: var(--color-region-fill);
  cursor: default;
}

/* Drawing-in-progress (rubber-band) rectangle: dashed, lighter fill. */
.region-rect--drawing {
  border: 1px dashed var(--color-region-border);
  background: var(--color-region-fill-active);
}

/* Hovered/selected (its list row is hovered/focused) — stronger border + ordinal badge. */
.region-rect.is-active {
  border-color: var(--color-region-border-strong);
}

.region-rect__badge {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 1.4em;
  padding: 0 var(--space-xs);
  font-size: var(--font-size-label);
  line-height: 1.4;
  text-align: center;
  color: #ffffff;
  background: var(--color-region-border-strong);
  font-variant-numeric: tabular-nums;
}

/* ---------- Before/after segmented toggle ---------- */

.beforeafter {
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.seg-btn {
  min-height: var(--control-hit);
  padding: 0 var(--space-md);
  font-family: inherit;
  font-size: var(--font-size-label);
  color: var(--color-text);
  background: var(--color-panel);
  border: 0;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.seg-btn + .seg-btn {
  border-left: 1px solid var(--color-border);
}

.seg-btn:hover:not(.is-selected) {
  background: var(--color-neutral-hover);
}

/* Selected segment = neutral-hover fill (deliberately NOT the accent). */
.seg-btn.is-selected {
  background: var(--color-neutral-hover);
  font-weight: var(--font-weight-semibold);
}

.seg-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Action group (apply / download) ---------- */

.action-group {
  gap: var(--space-sm);
}

.action-status {
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}

.action-status:empty {
  display: none;
}

/* ---------- Modal (clear-all confirm) ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] {
  display: none;
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-scrim);
}

.modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 28rem;
  margin: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--sheet-shadow);
}

.modal__title {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text);
}

.modal__body {
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* Danger-filled confirm button (the destructive primary in the confirm dialog). */
.danger-btn {
  min-height: var(--control-hit);
  padding: 0 var(--space-lg);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  background: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter 0.12s ease;
}

.danger-btn:hover {
  filter: brightness(0.94);
}

/* ---------- Logo picker (Phase 3, D-05) — reuses existing tokens; one new accent element ---------- */

/* The picker section lives below the region list inside .side-panel__inner; a top divider
   separates it from the region area (mirrors .region-panel__header's border-bottom). */
.logo-picker {
  border-top: 1px solid var(--color-border);
}

/* Loading row: spinner + transient text (reuses the Phase-1 .spinner). */
.logo-loading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.logo-loading[hidden] {
  display: none;
}

.logo-loading__text {
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}

/* Grid auto-fills the 320px column (typically 3 columns at 72px). */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--logo-thumb-size), 1fr));
  gap: var(--logo-grid-gap);
  padding: var(--space-md);
}

.logo-grid[hidden] {
  display: none;
}

/* A focusable thumbnail cell: neutral --color-surface backing behind a transparent PNG
   (Pitfall 2 — keeps white/dark logos legible in both themes), neutral border + radius. */
.logo-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--control-hit);
  padding: var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* "自動" and "不置入商標" cells have no image. Switch the cell to a 1x1 CSS grid so the
   transparent placeholder (which reserves image-slot height for visual size parity) and
   the caption occupy the same grid cell, with the caption vertically + horizontally
   centered on top of the (invisible) placeholder. */
.logo-thumb--centered {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}

.logo-thumb--centered > .logo-thumb__placeholder,
.logo-thumb--centered > .logo-thumb__caption {
  grid-area: 1 / 1;
}

/* Hover is neutral (NOT accent — mirrors .region-row:hover). */
.logo-thumb:hover {
  background: var(--color-neutral-hover);
}

/* The ONE new accent element (UI-SPEC §Color reserved-for): the selected thumbnail. */
.logo-thumb.is-selected {
  border: 2px solid var(--color-accent);
}

/* Transparent image-slot placeholder for image-less cells (不置入商標, 自動). Same height as
   .logo-thumb__img so all four thumbs share an intrinsic image+caption stack and render at
   the same size regardless of which grid row they fall on. */
.logo-thumb__placeholder {
  display: block;
  width: 100%;
  height: var(--logo-thumb-size);
}

.logo-thumb__img {
  width: 100%;
  height: var(--logo-thumb-size);
  object-fit: contain; /* matches the D-02 contain the server applies in the PDF */
  /* Transparent-PNG legibility: logos are dark text on transparent backgrounds. Give the IMG
     a white backing in both themes so dark-text logos stay readable in dark mode (UI-SPEC
     Pitfall 2). In light mode this is near-seamless with --color-surface; in dark mode it
     reads as a "name card" tile against the dark panel. */
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 4px;
  box-sizing: border-box;
}

.logo-thumb__caption {
  font-size: var(--font-size-label);
  color: var(--color-text);
  text-align: center;
  word-break: break-word;
}

/* ---------- Responsiveness: single breakpoint so the toolbar wraps under ~720px ---------- */

@media (max-width: 720px) {
  .toolbar {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .toolbar__spacer {
    flex-basis: 100%;
  }

  /* Below the breakpoint the side-panel stacks under the stage instead of a fixed column. */
  .main--paneled {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .main--paneled .side-panel {
    width: auto;
    max-height: 40vh;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
}