/* =============================================================
   Cover Letter Styles
   ============================================================= */

/* ── Preview container ────────────────────────────────────────── */
#cover-letter-preview {
    background: #eef0f4;
    overflow-y: auto;
    overflow-x: auto;
    padding: 20px 12px 32px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.cl-preview-scale {
    width: fit-content;
    margin: 0 auto;
}

/* ── A4 page shell ────────────────────────────────────────────── */
.cl-a4-page {
    width: 210mm;
    min-height: 297mm;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,0.14);
    font-family: "Calibri", "Segoe UI", Arial, "Helvetica Neue", sans-serif;
    font-size: 11pt;
    line-height: 1.6;
    color: #1a1a1a;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── Gradient header band (background set inline from TEMPLATE_COLOR_DEFAULTS) */
.cl-header-band {
    position: relative;
    padding: 28px 26px 24px;
    overflow: hidden;
}

/* Decorative geometric accent (top-right corner circle) */
.cl-header-band::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    pointer-events: none;
}
.cl-header-band::after {
    content: '';
    position: absolute;
    bottom: -28px;
    right: 60px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}

/* Left accent bar */
.cl-header-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: rgba(255,255,255,0.35);
}

.cl-header-content {
    position: relative;
    z-index: 1;
}

.cl-name {
    font-size: 20pt;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.2;
}

.cl-job-title-yours {
    font-size: 10pt;
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    margin-bottom: 10px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 8.5pt;
}

.cl-contact-row {
    font-size: 9pt;
    color: rgba(255,255,255,0.82);
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.cl-dot {
    color: rgba(255,255,255,0.5);
    font-size: 8pt;
    margin: 0 2px;
}

/* ── Body ─────────────────────────────────────────────────────── */
.cl-body {
    padding: 20px 26px 18px;
}

/* ── Subject line (Gulf) ──────────────────────────────────────── */
.cl-subject {
    font-size: 10.5pt;
    margin-bottom: 18px;
    color: #1a1a1a;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #e5e7eb;
}

/* ── Date + addressee ─────────────────────────────────────────── */
.cl-date-block {
    margin-bottom: 16px;
}

.cl-date {
    font-size: 10.5pt;
    color: #444;
    margin-bottom: 10px;
}

.cl-addressee {
    font-size: 10.5pt;
    color: #333;
    line-height: 1.65;
    margin-bottom: 14px;
}

/* ── Body text ────────────────────────────────────────────────── */
.cl-salutation {
    font-size: 11pt;
    font-weight: 600;
    margin-bottom: 14px;
    margin-top: 0;
    color: #111;
}

.cl-para {
    font-size: 10.5pt;
    margin-bottom: 12px;
    text-align: justify;
    color: #1a1a1a;
    line-height: 1.65;
}

/* ── Closing ──────────────────────────────────────────────────── */
.cl-closing {
    margin-top: 22px;
    font-size: 10.5pt;
    line-height: 1.6;
    color: #1a1a1a;
}

.cl-closing > p {
    margin-bottom: 6px;
}

.cl-sig {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 2px solid var(--cl-primary, #0D9488);
    display: inline-block;
}

.cl-sig-name {
    font-weight: 700;
    font-size: 11pt;
    margin-bottom: 3px;
    color: var(--cl-primary, #0D9488);
}

.cl-sig-line {
    font-size: 9.5pt;
    color: #555;
    line-height: 1.5;
}

/* ── Red placeholder (unfilled fields) ───────────────────────── */
.cl-placeholder {
    color: #dc2626;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 3px;
    padding: 0 4px;
    font-weight: 600;
    font-style: italic;
    font-size: 0.88em;
    white-space: nowrap;
}

/* ── Form panel (left side) ───────────────────────────────────── */
.cl-form-panel {
    padding: 8px 8px 20px;
}

.cl-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.cl-type-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
}

.cl-type-select {
    flex: 1;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.8rem;
    background: #fff;
    color: var(--text, #111);
    cursor: pointer;
}

.cl-type-select:focus {
    outline: none;
    border-color: #0D9488;
    box-shadow: 0 0 0 2px rgba(13,148,136,0.12);
}

.cl-form-note {
    font-size: 0.68rem;
    color: var(--text-muted, #9ca3af);
    padding: 4px 8px 8px;
    line-height: 1.4;
}

/* ── Print: cover letter only ─────────────────────────────────── */
@media print {
    .cl-a4-page {
        box-shadow: none;
        width: 210mm !important;
    }

    .cl-header-band {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cl-placeholder {
        color: #dc2626 !important;
        background: #fee2e2 !important;
        border: 1px solid #fca5a5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cl-sig {
        border-top-color: var(--cl-primary, #0D9488) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cl-sig-name {
        color: var(--cl-primary, #0D9488) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    #cover-letter-preview {
        padding: 12px 0 24px;
    }

    .cl-header-band {
        padding: 20px 16px 18px;
    }

    .cl-body {
        padding: 14px 16px;
    }

    .cl-name {
        font-size: 15pt;
    }
}