/**
 * pdf-tools.css
 * The PDF tools workspace (Phase 7): full-window layout, file list, tool list,
 * page grid, page preview stage (signing and redaction) and results.
 * Dark by default like the other studio dialogs; light-mode rules at the end.
 *
 * Dependencies: css/study.css (.ts-study-dialog, progress bar, buttons).
 */

@font-face {
  font-family: 'TS Signature Caveat';
  src: url('../assets/fonts/Caveat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ============================================
   LAYOUT
   ============================================ */

.ts-study-dialog.ts-pdf-dialog .ts-study-dialog-box {
  width: min(1240px, 100%);
  height: calc(100vh - 2rem);
}

.ts-study-dialog.ts-pdf-dialog .ts-study-dialog-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  padding: 0;
}

.ts-pdf-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.ts-pdf-layout.is-dropping {
  outline: 3px dashed var(--ts-accent);
  outline-offset: -6px;
}

.ts-pdf-side {
  overflow: auto;
  padding: 0.9rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ts-pdf-side-title {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.ts-pdf-main {
  overflow: auto;
  padding: 1rem 1.2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
}

/* ============================================
   FILES AND TOOLS
   ============================================ */

.ts-pdf-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ts-pdf-file {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.ts-pdf-file.is-current {
  border-color: var(--ts-accent);
  background: rgb(var(--ts-accent-rgb) / 0.1);
}

.ts-pdf-file-pick {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.ts-pdf-file-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-pdf-file-meta {
  font-size: 0.8rem;
  opacity: 0.75;
}

.ts-pdf-file-tools {
  display: flex;
  gap: 0.15rem;
}

.ts-pdf-file-error {
  flex-basis: 100%;
  margin: 0 0.25rem 0.2rem;
  font-size: 0.8rem;
  color: #fca5a5;
}

.ts-pdf-password {
  flex-basis: 100%;
  display: flex;
  gap: 0.35rem;
  padding: 0 0.25rem 0.25rem;
}

.ts-pdf-password input {
  flex: 1;
  min-width: 0;
}

.ts-pdf-icon {
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  cursor: pointer;
}

.ts-pdf-icon:hover,
.ts-pdf-icon:focus-visible {
  background: rgb(var(--ts-accent-rgb) / 0.2);
}

.ts-pdf-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ts-pdf-nav-item {
  text-align: left;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.ts-pdf-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ts-pdf-nav-item[aria-pressed="true"] {
  border-color: rgb(var(--ts-accent-rgb) / 0.6);
  background: rgb(var(--ts-accent-rgb) / 0.15);
  font-weight: 600;
}

.ts-pdf-drop {
  border: 2px dashed rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 2.5rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  cursor: pointer;
}

.ts-pdf-drop:hover,
.ts-pdf-drop:focus-visible {
  border-color: var(--ts-accent);
}

/* ============================================
   STATUS, TOOL AREA, RESULTS
   ============================================ */

.ts-pdf-statusbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ts-pdf-status {
  margin: 0;
  flex: 1;
  min-width: 12rem;
}

.ts-pdf-status[data-type="error"] {
  color: #fca5a5;
}

.ts-pdf-progress {
  flex: 1;
  min-width: 10rem;
}

.ts-pdf-progress.is-indeterminate .ts-study-progress-bar {
  animation: ts-pdf-pulse 1.2s ease-in-out infinite;
}

@keyframes ts-pdf-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-pdf-progress.is-indeterminate .ts-study-progress-bar { animation: none; }
}

.ts-pdf-tool-title {
  margin: 0;
  font-size: 1.2rem;
}

.ts-pdf-tool-area {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ts-pdf-blocked {
  padding: 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.ts-pdf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.ts-pdf-toolbar-label {
  font-size: 0.9rem;
  opacity: 0.85;
}

.ts-pdf-range {
  width: 11rem;
}

.ts-pdf-number {
  width: 4.5rem;
}

.ts-pdf-actions {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ts-pdf-result {
  border: 1px solid rgb(var(--ts-accent-rgb) / 0.5);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  background: rgb(var(--ts-accent-rgb) / 0.08);
}

.ts-pdf-result-title {
  margin: 0 0 0.4rem;
  font-weight: 600;
}

.ts-pdf-result-list {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 14rem;
  overflow: auto;
}

.ts-pdf-result-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.ts-pdf-honest {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-left: 4px solid #eab308;
  background: rgba(234, 179, 8, 0.1);
  border-radius: 6px;
}

/* ============================================
   PAGE GRID
   ============================================ */

.ts-pdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
}

.ts-pdf-tile {
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.45rem;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.ts-pdf-tile:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}

.ts-pdf-tile[aria-selected="true"] {
  border-color: var(--ts-accent);
  background: rgb(var(--ts-accent-rgb) / 0.14);
}

.ts-pdf-tile.is-dragging {
  opacity: 0.45;
}

.ts-pdf-tile.drop-before {
  box-shadow: inset 5px 0 0 var(--ts-accent);
}

.ts-pdf-tile.drop-after {
  box-shadow: inset -5px 0 0 var(--ts-accent);
}

.ts-pdf-thumb {
  width: 130px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-pdf-thumb img {
  max-width: 120px;
  max-height: 140px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}

.ts-pdf-thumb img:not([src]) {
  width: 90px;
  height: 120px;
}

.ts-pdf-thumb-missing {
  font-size: 0.8rem;
  opacity: 0.7;
}

.ts-pdf-tile-caption {
  font-size: 0.85rem;
  font-weight: 600;
}

.ts-pdf-tile-was {
  font-weight: 400;
  opacity: 0.7;
}

.ts-pdf-tile-actions {
  display: flex;
  gap: 0.2rem;
}

/* ============================================
   PAGE PREVIEW STAGE (sign, redact)
   ============================================ */

.ts-pdf-stage-wrap {
  overflow: auto;
  max-width: 100%;
}

.ts-pdf-stage {
  position: relative;
  display: inline-block;
  line-height: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  touch-action: none;
  user-select: none;
}

.ts-pdf-stage canvas {
  display: block;
  max-width: none;
}

.ts-pdf-stage-layer {
  position: absolute;
  inset: 0;
}

.ts-pdf-sign-mode {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.ts-pdf-sig-current {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.5rem;
}

.ts-pdf-sig-image {
  max-height: 70px;
  max-width: 260px;
  background: #fff;
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
}

.ts-pdf-merge-list {
  margin: 0;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ts-pdf-merge-list .is-skipped {
  opacity: 0.6;
  font-style: italic;
}

.ts-pdf-stage.is-drawing {
  cursor: crosshair;
}

.ts-pdf-box {
  position: absolute;
  box-sizing: border-box;
}

.ts-pdf-box.is-redaction {
  background: rgba(0, 0, 0, 0.85);
  outline: 2px solid #ef4444;
}

.ts-pdf-box.is-signature {
  outline: 2px dashed var(--ts-accent);
  cursor: move;
}

.ts-pdf-box.is-signature img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.ts-pdf-box-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ts-accent);
  border: 2px solid #fff;
  cursor: nwse-resize;
}

.ts-pdf-box-remove {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 24px;
  height: 24px;
  line-height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.ts-pdf-pad {
  display: block;
  width: 100%;
  max-width: 520px;
  height: 180px;
  background: #fff;
  border-radius: 10px;
  touch-action: none;
  cursor: crosshair;
}

.ts-pdf-typed-preview {
  font-family: 'TS Signature Caveat', cursive;
  font-size: 2.6rem;
  color: #1e3a8a;
  background: #fff;
  border-radius: 10px;
  padding: 0.3rem 1rem;
  min-height: 3.5rem;
  line-height: 1.3;
}

.ts-pdf-fields {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: center;
}

.ts-pdf-fields input[type="text"],
.ts-pdf-fields textarea,
.ts-pdf-fields select {
  width: 100%;
  box-sizing: border-box;
}

/* ============================================
   LIGHT MODE
   ============================================ */

body.light-mode .ts-pdf-side {
  border-right-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .ts-pdf-file,
body.light-mode .ts-pdf-tile {
  border-color: rgba(0, 0, 0, 0.12);
}

body.light-mode .ts-pdf-file.is-current,
body.light-mode .ts-pdf-tile[aria-selected="true"] {
  border-color: var(--ts-accent-dim);
  background: rgb(var(--ts-accent-dim-rgb) / 0.1);
}

body.light-mode .ts-pdf-icon {
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.03);
}

body.light-mode .ts-pdf-drop {
  border-color: rgba(0, 0, 0, 0.25);
}

body.light-mode .ts-pdf-status[data-type="error"],
body.light-mode .ts-pdf-file-error {
  color: #b91c1c;
}

body.light-mode .ts-pdf-blocked {
  background: rgba(0, 0, 0, 0.04);
}

body.light-mode .ts-pdf-actions {
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* ============================================
   NARROW SCREENS — a phone, or a narrow window
   ============================================ */

/* One column below 700px. The two-column layout gives the tool list a fixed
   260px, and on a 411px phone that left the working area 116px wide: the
   drop box came out 61px across and 570px tall, one word to a line, and the
   tool's own panel ran off the right-hand edge. Reported 2026-09-24 with a
   screenshot from the Android app; the same stylesheet runs in all three
   apps, so a narrow desktop window or a phone browser had it too.

   Stacked: the list of PDFs and the tools on top, the working area below,
   and the dialog scrolls as one page instead of two thin columns. The tools
   become one row of pills that scrolls sideways — fifteen full-width rows
   would push the working area two screens down, which is the problem this
   exists to fix in the first place. */
@media (max-width: 700px) {
  .ts-study-dialog.ts-pdf-dialog .ts-study-dialog-body {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ts-pdf-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .ts-pdf-side {
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 0.75rem 0.6rem;
  }

  .ts-pdf-main {
    overflow: visible;
    padding: 0.9rem 0.75rem 1.5rem;
  }

  .ts-pdf-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.4rem;
    margin: 0 -0.75rem;
    padding: 0.1rem 0.75rem 0.4rem;
    scroll-snap-type: x proximity;
    /* Snap to the padding, not the edge, so the first pill lines up with
       Add PDFs above it instead of sitting against the dialog's border. */
    scroll-padding-inline: 0.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ts-pdf-nav::-webkit-scrollbar { display: none; }

  .ts-pdf-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    /* 44px: the app's own accessibility checker asks this of touch targets. */
    min-height: 44px;
    scroll-snap-align: start;
  }

  .ts-pdf-drop {
    padding: 1.5rem 1rem;
  }

  /* Form fields: label above its box rather than beside it. */
  .ts-pdf-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
  .ts-pdf-fields > label,
  .ts-pdf-fields > span {
    margin-top: 0.4rem;
  }

  body.light-mode .ts-pdf-side {
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }
  body.light-mode .ts-pdf-nav-item {
    border-color: rgba(0, 0, 0, 0.14);
  }
}