/* =====================================================================================
   Resume Builder – editor (form left, live A4 preview right)
   ===================================================================================== */

.cvd-editor-page .cvd-content { padding: 0; }
.cve { display: flex; flex-direction: column; height: calc(100vh - var(--cvd-top-h)); height: calc(100dvh - var(--cvd-top-h)); }

/* ------------------------------------------------------------------ toolbar */
.cve-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--cvd-border); }
.cve-title-wrap { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cve-title { width: 100%; max-width: 420px; padding: 3px 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--cvd-text); font-size: 16px; font-weight: 700; }
.cve-title:hover { border-color: var(--cvd-border); }
.cve-title:focus { outline: none; border-color: var(--cvd-brand); box-shadow: 0 0 0 3px rgba(108, 60, 240, .15); background: #fff; }
.cve-status { display: inline-flex; align-items: center; gap: 5px; color: var(--cvd-muted); font-size: 12px; font-weight: 600; }
.cve-status i { font-size: 10px; }
.cve-status-saved { color: #16a34a; }
.cve-status-saved i { font-size: 13px; }
.cve-status-unsaved { color: #d97706; }
.cve-status .spinner-border { width: 11px; height: 11px; border-width: 2px; }
.cve-actions { display: flex; align-items: center; gap: 8px; }
.cve-actions .cvd-btn-ghost { display: inline-flex; align-items: center; gap: 7px; height: 42px; }
.cve-save { height: 42px; white-space: nowrap; }
.cve-save:disabled { opacity: .7; transform: none; }

.cve-tpl-menu { width: 300px; padding: 10px; border: 0; border-radius: 16px; }
.cve-menu-label { padding: 4px 8px 6px; color: var(--cvd-muted); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cve-tpl-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 12px; background: none; text-align: left; }
.cve-tpl-option > i:first-child { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #f1f5f9; color: #334155; font-size: 17px; }
.cve-tpl-option span { flex: 1; min-width: 0; }
.cve-tpl-option b { display: block; font-size: 14px; }
.cve-tpl-option small { color: var(--cvd-muted); font-size: 12px; }
.cve-tpl-option:hover { background: #f8fafc; }
.cve-tpl-option.active { border-color: #dccfff; background: var(--cvd-brand-soft); }
.cve-tpl-option.active > i:first-child { background: var(--cvd-brand); color: #fff; }
.cve-tpl-check { color: var(--cvd-brand); opacity: 0; }
.cve-tpl-option.active .cve-tpl-check { opacity: 1; }
.cve-swatches { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px 6px; }
.cve-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #e2e8f0; cursor: pointer; transition: transform .12s ease; }
.cve-swatch:hover { transform: scale(1.1); }
.cve-swatch.active { box-shadow: 0 0 0 2px var(--cvd-text); }
.cve-swatch-custom { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #ec4899, #ef4444); color: #fff; font-size: 12px; }
.cve-swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.cve-mobile-tabs { display: none; }

/* ------------------------------------------------------------------ body: form + preview */
.cve-body { display: grid; grid-template-columns: minmax(380px, 520px) minmax(0, 1fr); flex: 1; min-height: 0; }
.cve-form { overflow-y: auto; padding: 18px 18px 60px; background: var(--cvd-bg); border-right: 1px solid var(--cvd-border); }

.cve-sec { margin-bottom: 12px; background: #fff; border: 1px solid var(--cvd-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .03); }
.cve-sec-head { display: flex; align-items: center; gap: 11px; width: 100%; padding: 14px 16px; border: 0; background: none; color: var(--cvd-text); font-size: 15px; font-weight: 700; text-align: left; }
.cve-sec-head > i:first-child { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--cvd-brand-soft); color: var(--cvd-brand); font-size: 15px; }
.cve-sec-head span { flex: 1; }
.cve-badge { padding: 1px 8px; border-radius: 100px; background: #f1f5f9; color: #475569; font-size: 12px; font-style: normal; font-weight: 700; }
.cve-badge[hidden] { display: none; }
.cve-chev { color: #94a3b8; transition: transform .2s ease; }
.cve-sec.open > .cve-sec-head .cve-chev { transform: rotate(180deg); }
.cve-sec-body { display: none; padding: 0 16px 16px; }
.cve-sec.open > .cve-sec-body { display: block; }

.cve-form .form-label { margin-bottom: 4px; color: #475569; font-size: 12.5px; font-weight: 600; }
.cve-form .form-control, .cve-form .form-select { border-color: #dfe4ee; border-radius: 9px; font-size: 14px; padding: 8px 11px; }
.cve-form .form-control:focus, .cve-form .form-select:focus { border-color: var(--cvd-brand); box-shadow: 0 0 0 3px rgba(108, 60, 240, .13); }
.cve-form textarea.form-control { resize: vertical; line-height: 1.5; }
.cve-count { margin-top: 4px; color: #94a3b8; font-size: 12px; text-align: right; }

.cve-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 12px; border: 1px dashed #dccfff; border-radius: 12px; background: #fbf9ff; }
.cve-photo-img { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; width: 72px; height: 72px; border-radius: 50%; background: #e2e8f0; color: #94a3b8; font-size: 30px; }
.cve-photo-img img { width: 100%; height: 100%; object-fit: cover; }
.cve-photo-note { margin-bottom: 14px; padding: 9px 12px; border-radius: 10px; background: #f8fafc; color: var(--cvd-muted); font-size: 13px; }

.cve-list { display: flex; flex-direction: column; gap: 10px; }
.cve-empty { padding: 14px; border-radius: 10px; background: #f8fafc; color: var(--cvd-muted); font-size: 13px; text-align: center; }
.cve-item { border: 1px solid #e5e9f2; border-radius: 12px; background: #fff; }
.cve-item.open { border-color: #dccfff; box-shadow: 0 6px 18px rgba(108, 60, 240, .08); }
.cve-item-head { display: flex; align-items: center; }
.cve-item-toggle { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 11px 6px 11px 10px; border: 0; background: none; text-align: left; }
.cve-item-toggle > i:first-child { color: #cbd5e1; }
.cve-item-toggle span { flex: 1; min-width: 0; }
.cve-item-toggle b { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cve-item-toggle b em { color: #94a3b8; font-weight: 600; }
.cve-item-toggle small { display: block; overflow: hidden; color: var(--cvd-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.cve-item.open .cve-item-toggle .cve-chev { transform: rotate(180deg); }
.cve-item-body { display: none; padding: 4px 12px 14px; border-top: 1px solid #f1f5f9; }
.cve-item.open .cve-item-body { display: block; }
.cve-item-tools { display: flex; flex-shrink: 0; gap: 2px; padding-right: 6px; }
.cve-item-tools button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: #64748b; font-size: 14px; }
.cve-item-tools button:hover:not(:disabled) { background: #f1f5f9; color: var(--cvd-text); }
.cve-item-tools button:disabled { opacity: .3; }
.cve-item-tools .cve-del:hover:not(:disabled) { background: #fef2f2; color: #dc2626; }
.cve-item-compact { display: flex; align-items: flex-end; gap: 6px; padding: 10px 6px 10px 12px; }
.cve-item-compact .cve-item-tools { padding-bottom: 4px; }

.cve-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px; padding: 10px; border: 1.5px dashed #dccfff; border-radius: 11px; background: #fbf9ff; color: var(--cvd-brand); font-size: 14px; font-weight: 700; }
.cve-add:hover:not(:disabled) { border-color: var(--cvd-brand); background: var(--cvd-brand-soft); }
.cve-add:disabled { opacity: .45; }
.cve-tip { display: flex; gap: 8px; margin: 14px 4px 0; color: var(--cvd-muted); font-size: 13px; }
.cve-tip i { color: #f59e0b; }

/* ------------------------------------------------------------------ preview */
.cve-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: radial-gradient(circle at 30% 0%, #f4f0ff, transparent 55%), #e5e9f0; }
.cve-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px; color: #475569; font-size: 13px; font-weight: 700; }
.cve-preview-state { display: inline-flex; align-items: center; gap: 6px; color: var(--cvd-muted); font-weight: 600; }
.cve-preview-state .spinner-border { width: 12px; height: 12px; border-width: 2px; }
.cve-preview-state .bi-check2 { color: #16a34a; }
.cve-stage { flex: 1; min-height: 0; overflow: auto; padding: 6px 16px 30px; }
.cve-paper { position: relative; margin: 0 auto; overflow: hidden; background: #fff; border-radius: 4px; box-shadow: 0 20px 50px rgba(15, 23, 42, .18); }
.cve-paper iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; }
.cve-paper iframe.cve-frame-next { visibility: hidden; }
.cve-marks { position: absolute; inset: 0; pointer-events: none; }
.cve-mark { position: absolute; left: 0; right: 0; border-top: 2px dashed rgba(108, 60, 240, .55); }
.cve-mark span { position: absolute; right: 8px; top: -11px; padding: 1px 8px; border-radius: 100px; background: #6c3cf0; color: #fff; font-size: 11px; font-weight: 700; }
.cve-preview-foot { padding: 8px 20px 12px; color: var(--cvd-muted); font-size: 12px; text-align: center; }

/* ------------------------------------------------------------------ crop modal */
.cve-crop { border: 0; border-radius: 20px; }
.cve-crop-area { max-height: 60vh; overflow: hidden; border-radius: 12px; background: #0f172a; }
.cve-crop-area img { display: block; max-width: 100%; }
.cve-crop .cropper-view-box, .cve-crop .cropper-face { border-radius: 50%; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1199.98px) {
    .cve-body { grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
    .cve { height: auto; min-height: calc(100vh - var(--cvd-top-h)); }
    .cve-toolbar { position: sticky; top: var(--cvd-top-h); z-index: 20; flex-wrap: wrap; padding: 10px 12px; }
    .cve-title-wrap { order: 1; flex-basis: calc(100% - 56px); }
    .cve-back { order: 0; }
    .cve-actions { order: 2; width: 100%; }
    .cve-actions .dropdown { flex: 0 0 auto; }
    .cve-actions #cveDownload { flex: 1; justify-content: center; }
    .cve-actions .cve-save { flex: 1.4; justify-content: center; }
    .cve-mobile-tabs { display: flex; gap: 6px; padding: 8px 12px; background: var(--cvd-bg); border-bottom: 1px solid var(--cvd-border); }
    .cve-mobile-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border: 1px solid var(--cvd-border); border-radius: 10px; background: #fff; color: var(--cvd-muted); font-weight: 700; font-size: 14px; }
    .cve-mobile-tabs button.active { border-color: var(--cvd-brand); background: var(--cvd-brand); color: #fff; }
    .cve-body { display: block; }
    .cve-form { overflow: visible; padding: 14px 12px 40px; border-right: 0; }
    .cve-preview { min-height: 70vh; }
    .cve-stage { overflow: visible; padding: 6px 10px 24px; }
    .cve-body[data-view="form"] .cve-preview { display: none; }
    .cve-body[data-view="preview"] .cve-form { display: none; }
}

/* many designs: scrollable list in the design menu */
.cve-tpl-list { position: relative; max-height: min(46vh, 380px); overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.cve-more { margin-top: 16px; padding: 10px 12px; border: 1px solid var(--cvd-border); border-radius: 12px; background: #fafbfc; }
.cve-more summary { color: var(--cvd-brand); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.cve-more summary::-webkit-details-marker { display: none; }
.cve-more summary small { color: var(--cvd-muted); font-weight: 500; }
.cve-hint { margin: 0 0 10px; color: var(--cvd-muted); font-size: 13px; }

/* instant "applying design" overlay on the preview (template switch, first load) */
.cve-preview { position: relative; }
.cve-loading { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; padding-top: 140px; background: rgba(247, 246, 251, .55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease; pointer-events: none; }
.cve-loading[hidden] { display: none !important; }
.cve-loading.show { opacity: 1; visibility: visible; }
.cve-loading-box { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 14px; background: #fff; color: var(--cvd-text); font-size: 14.5px; box-shadow: 0 16px 40px rgba(47, 28, 106, .18); }
.cve-loading-box .spinner-border { width: 22px; height: 22px; border-width: 3px; color: var(--cvd-brand); }
.cve-paper iframe { transition: opacity .2s ease; }
@media (max-width: 991.98px) { .cve-loading { padding-top: 90px; } }

/* photo file field: visually hidden but still "real" (iOS Safari does not open a display:none file input reliably) */
.cve-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0; }
.cve-file-btn { cursor: pointer; }
.cve-photo { position: relative; }

/* PDF button: red PDF icon so it is clear on every screen size ("PDF" label on phones) */
.cve-pdf-btn { gap: 7px; }
.cve-pdf-btn i { color: #dc2626; font-size: 18px; }
.cve-pdf-btn:hover { border-color: #fca5a5 !important; background: #fef2f2 !important; }
@media (max-width: 767.98px) {
    .cve-pdf-btn { border-color: #fecaca !important; background: #fef2f2 !important; color: #b91c1c !important; font-weight: 700; }
    .cve-pdf-btn i { font-size: 19px; }
}

/* resume name: text + pencil, becomes a text field on click */
.cve-name { display: flex; align-items: center; min-width: 0; max-width: 460px; }
.cve-name-view { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; margin-left: -8px; padding: 3px 8px; border: 1px dashed transparent; border-radius: 8px; background: none; color: var(--cvd-text); font-size: 16px; font-weight: 700; text-align: left; cursor: text; }
.cve-name-view:hover, .cve-name-view:focus-visible { border-color: #cbb8ff; background: var(--cvd-brand-soft); outline: none; }
.cve-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cve-name-pen { flex-shrink: 0; color: var(--cvd-brand); font-size: 15px; }
.cve-name-view[hidden], .cve-name-edit[hidden] { display: none !important; }
.cve-name-edit { display: flex; align-items: center; gap: 6px; width: 100%; }
.cve-name-edit .cve-title { width: 100%; max-width: none; margin: 0; padding: 6px 10px; border: 1.5px solid var(--cvd-brand); border-radius: 9px; background: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 0 0 3px rgba(108, 60, 240, .14); }
.cve-name-ok { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--cvd-brand); color: #fff; font-size: 17px; }
@media (max-width: 991.98px) { .cve-name { max-width: none; } }

/* ================================================================== rich text editor (Quill) */
.cve-rte { position: relative; border: 1px solid #dee2e6; border-radius: 10px; background: #fff; }
.cve-rte:focus-within { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(108, 60, 240, .12); }
.cve-rte .ql-toolbar.ql-snow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; padding: 4px 6px; border: 0; border-bottom: 1px solid #eef0f4; border-radius: 10px 10px 0 0; background: #f8fafc; font-family: inherit; }
.cve-rte .ql-toolbar.ql-snow .ql-formats { display: inline-flex; align-items: center; margin-right: 6px; }
.cve-rte .ql-toolbar.ql-snow button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 7px; border-radius: 7px; color: #475569; }
.cve-rte .ql-toolbar.ql-snow button:hover { background: #ede9fe; }
.cve-rte .ql-toolbar.ql-snow button.ql-active { background: #ede9fe; }
.cve-rte .ql-toolbar.ql-snow button[data-rte] { font-size: 15px; }
.cve-rte .ql-toolbar.ql-snow .cve-rte-end { margin-left: auto; margin-right: 0; }
.cve-rte .ql-toolbar.ql-snow .cve-rte-full-btn { width: auto; gap: 5px; padding: 0 9px; font-size: 13px; font-weight: 600; color: #6c3cf0; }
.cve-rte .ql-container.ql-snow { border: 0; font-family: inherit; font-size: 14.5px; }
.cve-rte .ql-editor { min-height: 110px; max-height: 320px; overflow-y: auto; padding: 10px 12px; line-height: 1.55; color: #1e293b; }
.cve-rte .ql-editor p, .cve-rte .ql-editor li { margin-bottom: 2px; }
.cve-rte .ql-editor ul, .cve-rte .ql-editor ol { padding-left: 4px; }
.cve-rte .ql-editor.ql-blank::before { left: 12px; right: 12px; color: #94a3b8; font-style: normal; }
.cve-rte .ql-snow .ql-tooltip { z-index: 5; max-width: calc(100% - 12px); border-radius: 10px; box-shadow: 0 10px 26px rgba(15, 23, 42, .16); }
.cve-rte .ql-snow .ql-tooltip input[type=text] { width: 190px; max-width: 100%; height: 32px; font-size: 16px; }
.cve-rte-title { display: none; }
.cve-rte-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 10px 6px; color: #94a3b8; font-size: 11.5px; }
.cve-rte-done { display: none; align-items: center; gap: 6px; padding: 9px 18px; border: 0; border-radius: 10px; background: #6c3cf0; color: #fff; font-size: 15px; font-weight: 700; }

/* "Expand": the editor fills the whole screen – comfortable writing on a phone */
.cve-rte.is-full { position: fixed; inset: 0; z-index: 1075; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; }
.cve-rte.is-full .cve-rte-title { display: block; padding: 14px 16px 6px; padding-top: calc(14px + env(safe-area-inset-top)); font-size: 15px; font-weight: 700; color: #0f172a; }
.cve-rte.is-full .ql-toolbar.ql-snow { border-radius: 0; }
.cve-rte.is-full .ql-container.ql-snow { flex: 1; min-height: 0; }
.cve-rte.is-full .ql-editor { height: 100%; max-height: none; padding: 16px; font-size: 16px; }
.cve-rte.is-full .ql-toolbar.ql-snow .cve-rte-full-btn { display: none; }
.cve-rte.is-full .cve-rte-foot { justify-content: space-between; padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #eef0f4; font-size: 13px; }
.cve-rte.is-full .cve-rte-done { display: inline-flex; }
body.cve-rte-open { overflow: hidden; }

textarea.cve-autogrow { min-height: 64px; resize: vertical; overflow: hidden; }

/* phones: list items with move / delete buttons (skills, languages …) → buttons in a small row above, fields full width */
@media (max-width: 575.98px) {
    .cve-item-compact { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 10px 12px; }
    .cve-item-compact .cve-item-tools { order: -1; align-self: flex-end; margin: 0 -4px -2px 0; padding: 0; }
    .cve-rte .ql-editor { min-height: 140px; }
}

/* touch screens: every field ≥ 16px so iPhone never zooms when a field (or the colour picker) is tapped */
@media (max-width: 991.98px), (hover: none) and (pointer: coarse) {
    .cvd-editor-page input, .cvd-editor-page select, .cvd-editor-page textarea, .cvd-editor-page .ql-editor, .cvd-editor-page .ql-clipboard, .modal input, .modal select, .modal textarea { font-size: 16px !important; }
}

/* click in the preview → the matching field is highlighted (cv-editor.js → goToField) */
.cve-preview-tip { margin-left: auto; margin-right: 10px; color: #6c3cf0; font-size: 12px; font-weight: 600; }
@media (max-width: 575.98px) { .cve-preview-tip { display: none; } }
@keyframes cve-flash { 0% { box-shadow: 0 0 0 0 rgba(108, 60, 240, .55); } 30% { box-shadow: 0 0 0 5px rgba(108, 60, 240, .35); } 100% { box-shadow: 0 0 0 0 rgba(108, 60, 240, 0); } }
.cve-flash { border-radius: 8px; animation: cve-flash 1.4s ease-out 1; }