/* ============================================================
   PREVIEW.CSS — Preview Panel, Overlay Controls
   ============================================================ */

/* ============================================================
   PRINT STYLES
   pdfExporter.js calls window.print() with a #__print-resume
   clone made of fixed-height clipped page divs. These rules
   ensure exact colour reproduction, correct page breaks, and
   hide all application chrome so only the resume prints.
   ============================================================ */

/* Base @page rule — zero margins so our content fills the full paper.
   pdfExporter.js also injects this with the correct page size at export time. */
@page { margin: 0; }

@media print {

  /* ── Colour-accurate rendering ─────────────────────────── */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust:         exact !important;
    color-adjust:               exact !important;
  }

  /* ── Hide everything except the generated print clone ───── */
  html, body {
    margin:     0 !important;
    padding:    0 !important;
    background: white !important;
    height:     auto !important;
    overflow:   visible !important;
  }

  body > *:not(#__print-resume) {
    display:    none !important;
    visibility: hidden !important;
  }

  #__print-resume {
    display:    block !important;
    visibility: visible !important;
    position:   static !important;
    left:       auto !important;
    top:        auto !important;
    margin:     0 !important;
    padding:    0 !important;
    z-index:    auto !important;
    background: white !important;
    box-sizing: border-box !important;
    /* pdfExporter.js injects `width: 100%` so pageEl fills full paper */
  }

  /* ── Page-break rules on the per-page divs ──────────────── */
  /* Each child div of #__print-resume is exactly one page tall  */
  #__print-resume > div {
    margin:               0 !important;
    padding:              0 !important;
    box-sizing:           border-box !important;
    overflow:             hidden !important;
    /* prevent the browser from re-breaking inside a page card */
    break-inside:         avoid !important;
    page-break-inside:    avoid !important;
  }

  /* Force a new printer page after every card except the last */
  #__print-resume > div:not(:last-child) {
    break-after:       page !important;
    page-break-after:  always !important;
  }

  /* ── Avoid orphaned section headings ────────────────────── */
  /* Applied as fallback when someone prints the live preview  */
  .section-title,
  .nova-section-title,
  .atlas-section-title,
  .zen-section-title,
  .trad-section-label,
  .tpl-cs-section-title,
  .tpl-cf-sec-name,
  .sidebar-section-title {
    break-after:      avoid !important;
    page-break-after: avoid !important;
  }

  /* ── Avoid splitting individual resume entries mid-block ─── */
  .entry-item,
  .nova-entry,
  .atlas-entry,
  .zen-entry,
  .trad-entry,
  .tpl-cs-entry,
  .tpl-cf-entry {
    break-inside:      avoid !important;
    page-break-inside: avoid !important;
  }

  /* ── Typography precision ───────────────────────────────── */
  .entry-description,
  .atlas-desc,
  .nova-desc,
  .zen-desc,
  .trad-desc,
  .tpl-cs-entry-desc,
  .tpl-cf-edesc {
    orphans: 3;
    widows:  3;
  }

  /* ── Images ─────────────────────────────────────────────── */
  img {
    max-width:         100% !important;
    break-inside:      avoid !important;
    page-break-inside: avoid !important;
  }
}

/* Preview container scales with zoom */
#preview-container {
  position: relative;
  display: inline-block;
}

/* ── Resume Page Wrapper (legacy, kept for safety) ───────── */
.resume-page {
  background: white;
  position: relative;
  overflow: hidden;
}

/* ── Preview Overlay Actions ────────────────────────────── */

/* ── Loading Placeholder ────────────────────────────────── */
.preview-loading {
  position: absolute;
  inset: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}

.preview-skeleton {
  height: 12px;
  background: linear-gradient(
    90deg,
    var(--border) 25%,
    var(--bg-sidebar) 50%,
    var(--border) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: shimmer 1.5s ease infinite;
}

/* ── PDF Export Progress ────────────────────────────────── */
#pdf-progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-progress-box {
  background: var(--bg-panel);
  border-radius: var(--radius-xl);
  padding: 32px 40px;
  text-align: center;
  box-shadow: var(--shadow-xl);
  min-width: 300px;
}

.pdf-progress-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.pdf-progress-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.pdf-progress-track {
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 12px;
}

.pdf-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-full);
  transition: width 300ms var(--ease-out);
}

.pdf-progress-percent {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
}

/* ── Image Cropper Modal ────────────────────────────────── */
.cropper-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 auto 16px;
}

.cropper-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

.cropper-circle-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cropper-circle-mask::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    transparent 49%,
    rgba(0,0,0,0.6) 50%
  );
}

.cropper-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}

.cropper-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--bg-panel);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.cropper-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.cropper-shape-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.shape-btn {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  font-size: 0.8125rem;
  cursor: pointer;
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-weight: 500;
  transition: all var(--transition-fast);
}
.shape-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* ── Zoom Slider in Cropper ─────────────────────────────── */
.zoom-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}

.zoom-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-full);
  outline: none;
}

.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--primary);
  border-radius: 50%;
  cursor: grab;
}

/* ── ATS Score Widget ───────────────────────────────────── */
.ats-score-widget {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--bg-panel);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 16px 20px;
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  z-index: var(--z-dropdown);
  animation: slideUp 200ms var(--ease-out);
}

.ats-score-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ats-score-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ats-gauge {
  width: 70px;
  height: 70px;
  position: relative;
  margin: 0 auto 12px;
}

.ats-gauge svg {
  transform: rotate(-90deg);
}

.ats-gauge-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}

.ats-tip-list {
  list-style: none;
  padding: 0;
}

.ats-tip-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.ats-tip-icon {
  font-size: 0.75rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.ats-tip-icon.ok { color: var(--success); }
.ats-tip-icon.warn { color: var(--warning); }
.ats-tip-icon.bad { color: var(--error); }