/* BF_LETTER_PREMIUM_v1 — Anschreiben V1 Premium (ZIP + PDF/Vorschau-Erweiterung) */
/* =============================================
   Anschreiben V1 – Premium Cover Letter CSS
   Passend zum Lebenslauf V1 Designsystem
   ============================================= */

/* ---- Scope: .letter-premium-doc ---- */
.letter-premium-doc {
  /* Farben (identisch mit Lebenslauf V1) */
  --sidebar-color: #1b2838;
  --accent-color: #2c8c99;
  --text-color: #333333;
  --text-muted: #666666;
  --text-light: #888888;
  --text-white: #ffffff;
  --text-white-muted: rgba(255, 255, 255, 0.8);
  --text-white-faint: rgba(255, 255, 255, 0.5);
  --text-white-dim: rgba(255, 255, 255, 0.4);
  --sidebar-border: rgba(255, 255, 255, 0.3);

  /* Maße */
  --page-width: 210mm;
  --page-height: 297mm;
  --sidebar-width: 72mm;

  /* Schrift */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-subject: 15px;
  --font-size-name: 28px;

  /* Abstände */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;
}

/* ---- Reset (scoped) ---- */
.letter-premium-doc *,
.letter-premium-doc *::before,
.letter-premium-doc *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.letter-premium-doc {
  font-family: var(--font-family);
  color: var(--text-color);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* ---- Page ---- */
.letter-page {
  width: var(--page-width);
  min-height: var(--page-height);
  margin: var(--spacing-xl) auto;
  display: flex;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  overflow: visible;
}

/* =============================================
   Sidebar
   ============================================= */
.letter-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-color);
  color: var(--text-white);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
}

/* Name Block in Sidebar */
.letter-sidebar__name {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xs);
  font-size: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-white);
}

.letter-sidebar__title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-white-faint);
  margin-bottom: var(--spacing-xl);
}

/* Section Title (Sidebar) */
.letter-sidebar__section-title {
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-white);
  padding-bottom: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--sidebar-border);
}

/* Contact Block */
.letter-contact-block {
  margin-bottom: var(--spacing-xl);
}

.letter-contact-group {
  margin-bottom: var(--spacing-md);
}

.letter-contact-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-white-faint);
  margin-bottom: 2px;
}

.letter-contact-value {
  font-size: var(--font-size-sm);
  color: var(--text-white-muted);
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Attachments List */
.letter-attachments {
  list-style: none;
  font-size: var(--font-size-sm);
  color: var(--text-white-muted);
  margin-bottom: var(--spacing-lg);
}

.letter-attachments li {
  margin-bottom: var(--spacing-xs);
  padding-left: 14px;
  position: relative;
}

.letter-attachments li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--accent-color);
}

/* Sidebar Spacer */
.letter-sidebar__spacer {
  flex: 1;
}

/* Sidebar Footer */
.letter-sidebar__footer {
  font-size: var(--font-size-xs);
  color: var(--text-white-dim);
  text-align: center;
}

/* =============================================
   Main Content
   ============================================= */
.letter-main {
  flex: 1;
  padding: var(--spacing-xxl) var(--spacing-xxl) var(--spacing-xl) var(--spacing-xxl);
  display: flex;
  flex-direction: column;
}

/* Name Header (Main) */
.letter-main__name {
  font-size: var(--font-size-name);
  color: var(--accent-color);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.letter-main__jobtitle {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--spacing-xxl);
}

/* Recipient Block */
.letter-recipient {
  font-size: var(--font-size-sm);
  color: var(--text-color);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}

.letter-recipient p {
  margin: 0;
}

/* Date Line */
.letter-date {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-align: right;
  margin-bottom: var(--spacing-lg);
}

/* Reference / Subject Line */
.letter-subject {
  font-size: var(--font-size-subject);
  color: var(--accent-color);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent-color);
  margin-bottom: var(--spacing-lg);
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Reference Line (optional, smaller) */
.letter-reference {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Body Text */
.letter-body {
  font-size: var(--font-size-sm);
  color: var(--text-color);
  line-height: 1.8;
  flex: 1;
}

.letter-body p {
  margin-bottom: 16px;
}

.letter-body p:last-child {
  margin-bottom: 0;
}

/* Closing / Signature */
.letter-closing {
  margin-top: var(--spacing-xl);
  font-size: var(--font-size-sm);
  color: var(--text-color);
}

.letter-closing__formula {
  margin-bottom: 0;
}

.letter-closing__name {
  margin-top: var(--spacing-xxl);
}

/* =============================================
   Page Rules
   ============================================= */
@page {
  size: A4 portrait;
  margin: 0;
}

/* =============================================
   Print Styles
   ============================================= */
@media print {
  body {
    background: #fff !important;
  }

  .letter-page {
    margin: 0;
    box-shadow: none;
    page-break-after: always;
    min-height: var(--page-height);
  }

  .letter-page:last-child {
    page-break-after: auto;
  }

  /* Preserve background colors in print */
  .letter-sidebar {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* =============================================
   Continuation Page
   ============================================= */
.letter-page--continuation {
  break-before: page;
  page-break-before: always;
}

.letter-sidebar--continuation {
  justify-content: flex-end;
}

.letter-main--continuation {
  padding-top: 48px;
}

.letter-continuation-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-light);
  margin-bottom: var(--spacing-lg);
}

.letter-attachments-line {
  margin-top: var(--spacing-xl);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.letter-subject,
.letter-reference,
.letter-date,
.letter-contact-value,
.letter-attachments-line {
  overflow-wrap: anywhere;
}

.letter-recipient,
.letter-body,
.letter-closing,
.letter-contact-group,
.letter-attachments,
.letter-attachments-line {
  break-inside: avoid;
  page-break-inside: avoid;
}

@media print {
  .letter-page--continuation {
    break-before: page;
    page-break-before: always;
  }
}

/* =============================================
   BewerbungsFix: PDF-Bundle / Puppeteer
   ============================================= */
.letter-v1-bundle .letter-premium-doc,
body.cv-v1-pdf-root .letter-premium-doc {
  background: #fff;
}

.letter-v1-bundle .letter-page,
body.cv-v1-pdf-root .letter-page {
  margin: 0 auto 0 !important;
  box-shadow: none !important;
  min-height: var(--page-height);
}

/* =============================================
   Live-Vorschau (Design 1) — wie Premium-CV
   ============================================= */
.live-sheet.letter-v1-premium-active {
  aspect-ratio: 210 / 297;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.letter-premium-v1-mount {
  position: relative;
  z-index: 4;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  container-type: size;
  container-name: letter-premium-preview;
}

.letter-premium-v1-mount .letter-page--continuation {
  display: none !important;
}

.letter-premium-v1-mount .letter-premium-doc {
  background: #ffffff;
  width: max-content;
  margin: 0;
  transform-origin: center center;
  transform: scale(
    min(
      calc(100cqw / 210mm),
      calc(100cqh / 297mm)
    )
  );
}

.letter-premium-v1-mount .letter-page {
  margin: 0 !important;
  box-shadow: none;
}

@supports not (container-type: size) {
  .letter-premium-v1-mount .letter-premium-doc {
    transform: scale(0.4);
  }
}

.live-sheet.letter-v1-premium-active .live-sheet-lock {
  display: none;
}