/* ══════════════════════════════════════════════════════════
   CV TEMPLATES CSS
   Contains all .cv-paper, .cv-classic, .cv-modern, etc. styles
   ══════════════════════════════════════════════════════════ */

/* ── CV PAPER BASE ── */
.cv-paper {
  width: 794px;
  height: 1123px;
  background: #fff; color: #222; font-family: 'DM Sans', sans-serif;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  flex-shrink: 0;
}
/* Inside measurement wrapper, cv-paper must be unconstrained */
.cv-measure-wrap .cv-paper,
.cv-measure-wrap .cv-paper.cv-classic,
.cv-measure-wrap .cv-paper.cv-modern,
.cv-measure-wrap .cv-paper.cv-minimal,
.cv-measure-wrap .cv-paper.cv-bold,
.cv-measure-wrap .cv-paper.cv-elegant,
.cv-measure-wrap .cv-paper.cv-creative {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.cv-page-scroller {
  position: absolute;
  top: 0; left: 0; right: 0;
  overflow: visible;
}
.cv-overflow-indicator {
  position: absolute; left: 0; right: 0; height: 3px; z-index: 20; pointer-events: none;
  background: repeating-linear-gradient(90deg,#f59e0b 0,#f59e0b 8px,transparent 8px,transparent 14px);
}
.cv-overflow-indicator::after {
  content: attr(data-label);
  position: absolute; top: -1px; right: 0;
  font-size: 9px; color: #92400e; background: #fef3c7;
  border: 1px solid #f59e0b; padding: 1px 6px; border-radius: 3px;
  font-family: 'DM Sans', sans-serif; white-space: nowrap;
}
.cv-page-gap {
  height: 20px; display: flex; align-items: center; justify-content: center;
  margin-top: 16px;
}
.cv-overflow-warning {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 30;
  background: linear-gradient(to bottom, rgba(239,68,68,0) 0%, rgba(239,68,68,0.08) 30%, rgba(239,68,68,0.18) 100%);
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 14px; gap: 6px;
}
.cv-overflow-warning-bar {
  width: 100%; height: 3px;
  background: repeating-linear-gradient(90deg, #ef4444 0, #ef4444 8px, transparent 8px, transparent 14px);
  position: absolute; bottom: 0; left: 0;
}
.cv-overflow-warning-badge {
  background: #ef4444; color: #fff;
  font-size: 11px; font-family: 'DM Sans', sans-serif; font-weight: 600;
  padding: 5px 14px; border-radius: 20px;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 8px rgba(239,68,68,0.35);
  pointer-events: none;
  letter-spacing: 0.01em;
}
.cv-page-gap-label {
  font-size: 10px; color: var(--muted); letter-spacing: .1em;
  padding: 2px 10px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface2);
}
.cv-extra-page-body:empty:before {
  content: attr(data-placeholder); color: #bbb; pointer-events: none; display: block;
}
.cv-extra-page-body:focus { outline: none; }

@media print {
  /* Hide entire app chrome */
  .app-header, .left-panel, .right-panel,
  .preview-toolbar, .cv-page-gap,
  .cv-overflow-indicator, .cv-overflow-warning,
  .cv-page-break-spacer { display: none !important; }

  /* Reset page background */
  body, .app-body, .preview-area,
  .preview-canvas-wrap, .preview-scale-wrap {
    background: white !important;
    margin: 0 !important; padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    width: auto !important; height: auto !important;
  }

  /* Each CV page = one printed A4 page */
  .cv-paper {
    page-break-after: always;
    break-after: page;
    box-shadow: none !important;
    margin: 0 !important;
    /* Keep exact A4 dimensions */
    width: 794px !important;
    height: 1123px !important;
    overflow: hidden !important;
  }

  /* Last page: no forced break */
  .cv-paper:last-of-type {
    page-break-after: avoid;
    break-after: avoid;
  }

  @page {
    size: A4 portrait;
    margin: 0;
  }
}

/* B&W mode — applied via class on #cv-pages-container */
#cv-pages-container.bw-mode .cv-paper {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
}
#cv-pages-container.bw-mode .cv-paper *:not(svg):not(polygon):not(path) {
  color: #000 !important;
  background-color: transparent !important;
  border-color: #999 !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Creative SVG polygon — handled by JS, leave fill alone via CSS */
#cv-pages-container.bw-mode .cv-paper svg,
#cv-pages-container.bw-mode .cv-paper svg * {
  background-color: transparent !important;
}
#cv-pages-container.bw-mode .cv-paper .cv-header,
#cv-pages-container.bw-mode .cv-paper .cv-sidebar,
#cv-pages-container.bw-mode .cv-paper .cv-header-accent {
  background: #222 !important;
  color: #fff !important;
}
/* Creative header: transparent bg — SVG polygon provides the shape */
#cv-pages-container.bw-mode .cv-paper .cv-creative .cv-header {
  background: transparent !important;
}
#cv-pages-container.bw-mode .cv-paper .cv-header *,
#cv-pages-container.bw-mode .cv-paper .cv-sidebar * {
  color: #fff !important;
  border-color: #555 !important;
}
#cv-pages-container.bw-mode .cv-paper .cv-sidebar .section-title,
#cv-pages-container.bw-mode .cv-paper .cv-sidebar .cv-entry-subtitle,
#cv-pages-container.bw-mode .cv-paper .cv-sidebar a {
  color: #eee !important;
}
#cv-pages-container.bw-mode .cv-paper .cv-main *,
#cv-pages-container.bw-mode .cv-paper .cv-body-full * {
  color: #111 !important;
  border-color: #bbb !important;
}
#cv-pages-container.bw-mode .cv-paper .section-title {
  color: #000 !important;
  border-color: #666 !important;
}
#cv-pages-container.bw-mode .cv-paper .cv-skill-bar-fill {
  background: #444 !important;
}
#cv-pages-container.bw-mode .cv-paper .cv-skill-pill {
  background: #eee !important;
  color: #000 !important;
}
/* Creative template: SVG polygon fill must be overridden separately */
#cv-pages-container.bw-mode .cv-paper #cv-creative-hdr-svg polygon,
#cv-pages-container.bw-mode .cv-paper #cv-creative-hdr-svg #cv-creative-hdr-poly {
  fill: #222 !important;
}

/* ══════════════════════════════════════════════════
   Template: Classic
   ══════════════════════════════════════════════════ */
.cv-classic .cv-header {
  background: linear-gradient(135deg, var(--cv-primary) 0%, var(--cv-primary-dark) 100%);
  padding: 36px var(--cv-padding); color: #fff;
  display: flex; align-items: center; gap: 24px;
}
.cv-classic .cv-name { font-family: 'Cormorant Garamond', serif; font-size: calc(var(--cv-fs) * 2.77); font-weight: 300; color: #fff; line-height: 1.1; }
.cv-classic .cv-title { font-size: calc(var(--cv-fs) * 1.08); opacity: .85; margin-top: 4px; font-weight: 300; letter-spacing: .05em; }
.cv-classic .cv-body { display: grid; grid-template-columns: 260px 1fr; }
.cv-classic .cv-sidebar { background: #f8f8f8; padding: 24px var(--cv-padding); border-right: 1px solid #eee; }
.cv-classic .cv-main { padding: 24px var(--cv-padding); }

/* ══════════════════════════════════════════════════
   Template: Modern
   ══════════════════════════════════════════════════ */
.cv-modern .cv-header {
  padding: 32px var(--cv-padding) 24px; border-bottom: 3px solid var(--cv-primary);
  display: flex; align-items: flex-start; justify-content: space-between;
}
.cv-modern .cv-name { font-family: 'DM Sans', sans-serif; font-size: calc(var(--cv-fs) * 2.46); font-weight: 600; color: #111; }
.cv-modern .cv-title { font-size: calc(var(--cv-fs) * 1.08); color: var(--cv-primary); margin-top: 4px; font-weight: 500; }
.cv-modern .cv-body { padding: 24px var(--cv-padding); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cv-modern .cv-body-full { padding: 24px var(--cv-padding); }

/* ══════════════════════════════════════════════════
   Template: Minimal
   ══════════════════════════════════════════════════ */
.cv-minimal .cv-header { padding: calc(var(--cv-padding) * 1.2) var(--cv-padding) 24px; }
.cv-minimal .cv-name { font-family: 'Cormorant Garamond', serif; font-size: calc(var(--cv-fs) * 3.38); font-weight: 300; color: #111; letter-spacing: -.02em; }
.cv-minimal .cv-title { font-size: var(--cv-fs); color: #888; margin-top: 6px; letter-spacing: .15em; text-transform: uppercase; }
.cv-minimal .cv-body { padding: 0 var(--cv-padding) var(--cv-padding); }
.cv-minimal .cv-divider { height: 1px; background: #eee; margin: 20px 0; }

/* ══════════════════════════════════════════════════
   Template: Bold
   ══════════════════════════════════════════════════ */
.cv-bold .cv-header {
  background: #111; padding: 0; display: flex;
}
.cv-bold .cv-header-accent { width: 8px; background: var(--cv-primary); flex-shrink: 0; }
.cv-bold .cv-header-content { padding: 32px var(--cv-padding); flex: 1; }
.cv-bold .cv-name { font-family: 'DM Sans', sans-serif; font-size: calc(var(--cv-fs) * 2.77); font-weight: 600; color: #fff; letter-spacing: -.01em; }
.cv-bold .cv-title { font-size: calc(var(--cv-fs) * 1.08); color: var(--cv-primary); margin-top: 4px; font-weight: 500; }
.cv-bold .cv-body { display: grid; grid-template-columns: 240px 1fr; }
.cv-bold .cv-sidebar { background: #1a1a1a; color: #ccc; padding: 24px var(--cv-padding); }
.cv-bold .cv-sidebar .section-title { color: var(--cv-primary) !important; }
.cv-bold .cv-main { padding: 24px var(--cv-padding); }

/* ══════════════════════════════════════════════════
   Template: Elegant
   ══════════════════════════════════════════════════ */
.cv-elegant .cv-header {
  text-align: center; padding: calc(var(--cv-padding) * 1.0) var(--cv-padding) 24px;
  border-bottom: 2px solid var(--cv-primary);
}
.cv-elegant .cv-name { font-family: 'Cormorant Garamond', serif; font-size: calc(var(--cv-fs) * 3.23); font-weight: 300; letter-spacing: .05em; }
.cv-elegant .cv-title { font-size: var(--cv-fs); color: #888; letter-spacing: .2em; text-transform: uppercase; margin-top: 6px; }
.cv-elegant .cv-body { display: grid; grid-template-columns: 1fr 240px; }
.cv-elegant .cv-main { padding: 24px var(--cv-padding); border-right: 1px solid #eee; }
.cv-elegant .cv-sidebar { padding: 24px var(--cv-padding); background: #fafafa; }

/* ══════════════════════════════════════════════════
   Template: Creative
   ══════════════════════════════════════════════════ */
.cv-creative .cv-header {
  background: transparent;
  padding: 0;
  position: relative;
  overflow: visible;
  color: #fff;
}
.cv-creative .cv-header-inner {
  position: relative;
  z-index: 2;
  padding: 32px var(--cv-padding) 24px;
}
.cv-creative .cv-name { font-family: 'Cormorant Garamond', serif; font-size: calc(var(--cv-fs) * 2.92); font-weight: 600; }
.cv-creative .cv-title { font-size: calc(var(--cv-fs) * 1.08); opacity: .85; margin-top: 4px; }
.cv-creative .cv-body { padding: 16px var(--cv-padding) var(--cv-padding); }

/* ══════════════════════════════════════════════════
   SHARED CV ELEMENTS (used across all templates)
   ══════════════════════════════════════════════════ */
.cv-contact-info { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 12px; }
.cv-contact-item { display: flex; align-items: center; gap: 5px; }

.cv-section { margin-bottom: 20px; }
.section-title {
  font-size: calc(var(--cv-fs) * 0.85); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cv-primary); margin-bottom: 10px; padding-bottom: 4px;
  border-bottom: 1.5px solid currentColor;
}
.cv-classic .section-title,
.cv-bold .cv-main .section-title { border-bottom-color: var(--cv-primary); }

.cv-entry { margin-bottom: 14px; }
.cv-entry-header { display: flex; justify-content: space-between; align-items: flex-start; }
.cv-entry-title { font-size: calc(var(--cv-fs) * 1.08); font-weight: 600; }
.cv-entry-date { font-size: 11px; color: #888; white-space: nowrap; margin-left: 8px; }
.cv-entry-subtitle { font-size: 13px; color: var(--cv-primary); margin-top: 1px; }
.cv-entry-desc { font-size: 12px; color: #555; margin-top: 4px; line-height: 1.5; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

.cv-skills-list { display: flex; flex-wrap: wrap; gap: 5px; }
.cv-skill-pill {
  background: var(--cv-primary-light); color: var(--cv-primary-dark);
  border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 500;
}
.cv-skill-bar-row { margin-bottom: 7px; }
.cv-skill-bar-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.cv-skill-bar-track { height: 4px; background: #eee; border-radius: 2px; overflow: hidden; }
.cv-skill-bar-fill { height: 100%; background: var(--cv-primary); border-radius: 2px; }

.cv-photo-wrap { flex-shrink: 0; }
.cv-photo {
  object-fit: cover; background: #ddd;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #aaa;
}

.cv-social-icons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cv-social-icon {
  width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: inherit;
  text-decoration: none;
}