/* The Tool Bakery — PDF Text Filler (front-end) */
#ttb-pdf-text-filler {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #0f172a;
}

/* Toolbar */
.ttb-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; margin-bottom: 12px;
}
.ttb-btn, .ttb-file > span {
  appearance: none; border: 1px solid #e5e7eb; background: #f8fafc; color: #0f172a;
  padding: 8px 12px; border-radius: 10px; cursor: pointer; font-weight: 600; line-height: 1;
}
.ttb-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ttb-btn:hover { background: #000; }
.ttb-primary { background: #e0e7ff; border-color: #c7d2fe; }
.ttb-file { position: relative; }
.ttb-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ttb-inline { display: inline-flex; }
.ttb-sep { width: 1px; align-self: stretch; background: #e5e7eb; margin: 0 4px; }

/* Properties */
.ttb-props {
  border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; padding: 10px; margin-bottom: 12px;
}
.ttb-props-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ttb-props label { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.ttb-props input[type=number] { width: 80px; }
.ttb-hint { font-size: 12px; color: #475569; }

/* Viewer (fit theme container; no arbitrary max-width) */
.ttb-pdf-viewport {
  width: 100%;
  overflow: auto;
  margin: 0 auto;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
}

/* Page */
.ttb-pdf-page {
  position: relative;
  width: 100%;
  margin: 0 auto 16px;
  background: #fff;
  box-shadow: 0 0 0 1px #f1f5f9 inset;
  border-radius: 6px;
}
.ttb-pdf-page canvas {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 6px;
}

/* Overlay layer above canvas */
.ttb-overlay {
  position: absolute; inset: 0;
  pointer-events: none; /* JS toggles per action; items enable their own events */
}
.ttb-overlay.ttb-grid {
  background-image:
    linear-gradient(to right, rgba(99,102,241,.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99,102,241,.15) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* ===== Items ===== */

/* Positioned wrapper for one field (NOT contentEditable) */
.ttb-item {
  position: absolute; left: 0; top: 0;
  overflow: visible;        /* let the handle sit outside */
  pointer-events: auto;
  user-select: text;
}
.ttb-item[data-dragging="1"] { cursor: grabbing; }
.ttb-item[data-selected="1"] .ttb-text {
  border-color: #94a3b8;
  background: rgba(148,163,184,.08);
}

/* Actual editable text element (caret lives here only) */
.ttb-text {
  min-width: 60px;
  min-height: 20px;
  padding: 2px 4px;
  color: #000;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 4px;
  outline: none;
  /* MULTI-LINE ENABLED */
  white-space: pre-wrap;   /* preserve newlines, wrap long lines */
  word-break: break-word;
  line-height: 1.2;
  user-select: text;
  cursor: text;
  display: inline-block;
}
.ttb-text:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
}

/* Drag handle as a sibling, to the right of the text */
.ttb-handle {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #94a3b8;
  background: #f8fafc;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='7 8 12 3 17 8'/>\
<line x1='12' y1='3' x2='12' y2='21'/>\
<polyline points='17 16 12 21 7 16'/>\
<polyline points='8 7 3 12 8 17'/>\
<line x1='3' y1='12' x2='21' y2='12'/>\
<polyline points='16 7 21 12 16 17'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  display: block;
  cursor: move;             /* 4-way cursor */
  user-select: none;
  pointer-events: auto;     /* always clickable, even while editing */
  z-index: 2;
}
.ttb-handle:hover { background-color: #eef2ff; border-color: #6366f1; }

/* Accessibility focus */
#ttb-pdf-file:focus + span,
#ttb-load-json:focus + span,
.ttb-btn:focus { outline: 2px solid #6366f1; outline-offset: 2px; }

/* Page break divider shown between rendered pages */
.ttb-page-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
  margin: 18px 0;
  user-select: none;
}
.ttb-page-divider::before,
.ttb-page-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 1px dashed #cbd5e1;
}
.ttb-page-divider span {
  white-space: nowrap;
}

/* Loading state for Export button */
.ttb-btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .8;
}
.ttb-btn.is-loading .ttb-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 8px;
  vertical-align: -0.15em;
  border: 2px solid #6366f1;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ttb-spin .8s linear infinite;
}
@keyframes ttb-spin {
  to { transform: rotate(360deg); }
}

/* Sticky controls */
#ttb-pdf-text-filler {
  --ttb-toolbar-h: 56px;   /* JS will update this to exact height */
  --ttb-gap: 8px;
  position: relative;
}

.ttb-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-radius: 12px;
}

.ttb-props {
  position: sticky;
  top: calc(var(--ttb-toolbar-h) + var(--ttb-gap));
  z-index: 49;
  background: #fff;
  border-radius: 12px;
}

/* Optional: subtle shadow when stuck */
.ttb-toolbar.is-stuck,
.ttb-props.is-stuck {
  box-shadow: 0 6px 12px -6px rgba(15, 23, 42, .12);
}