/* ============================================================
   CV BUILDER PRO — Feuille de style globale
   ============================================================ */

:root {
    --cv-color: #4f46e5;
    --cv-font-size: 11pt;
    --cv-spacing: 1;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* ============================================================
   COMPOSANTS UI (Tailwind layer custom)
   ============================================================ */

.tab-btn {
    @apply flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-600 rounded-lg hover:bg-slate-100 transition whitespace-nowrap;
}
.tab-btn.active {
    @apply bg-indigo-50 text-indigo-700;
}

.section-title {
    @apply text-base font-bold text-slate-900 mb-4 flex items-center gap-2;
}
.section-title i { @apply text-indigo-600; }

.subsection-title {
    @apply text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2;
}
.subsection-title i { @apply text-indigo-500; }

.lbl {
    @apply block text-xs font-medium text-slate-600 mb-1;
}

.inp {
    @apply w-full px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition;
}

textarea.inp {
    resize: vertical;
    min-height: 80px;
}

.btn-secondary {
    @apply inline-flex items-center gap-2 px-3 py-2 text-sm bg-slate-100 hover:bg-slate-200 rounded-lg transition;
}

.btn-add {
    @apply w-full mt-3 inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-indigo-600 bg-indigo-50 hover:bg-indigo-100 border-2 border-dashed border-indigo-200 rounded-lg transition;
}

.btn-danger {
    @apply inline-flex items-center justify-center w-8 h-8 text-red-500 hover:bg-red-50 rounded-lg transition;
}

.btn-move {
    @apply inline-flex items-center justify-center w-8 h-8 text-slate-400 hover:bg-slate-100 rounded-lg transition;
}

/* Bloc dynamique (expérience, formation, etc.) */
.dyn-block {
    @apply p-4 border border-slate-200 rounded-xl bg-slate-50 hover:bg-white hover:border-indigo-200 transition;
}
.dyn-block-header {
    @apply flex items-center justify-between mb-3;
}
.dyn-block-title {
    @apply text-sm font-semibold text-slate-700;
}
.dyn-block-actions {
    @apply flex items-center gap-1;
}

/* Color swatch */
.color-swatch {
    @apply w-9 h-9 rounded-lg border-2 border-white shadow-sm hover:scale-110 transition cursor-pointer;
    outline: 2px solid transparent;
}
.color-swatch.active {
    outline-color: #0f172a;
    outline-offset: 2px;
}

/* Modals */
.modal-overlay {
    @apply fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4;
}
.modal-content {
    @apply bg-white rounded-2xl shadow-2xl w-full max-h-[90vh] flex flex-col overflow-hidden;
}
.modal-header {
    @apply flex items-center justify-between px-6 py-4 border-b border-slate-200;
}
.modal-close {
    @apply w-9 h-9 grid place-items-center rounded-lg hover:bg-slate-100 transition text-slate-500;
}
.modal-body {
    @apply p-6 overflow-y-auto;
}

/* Vignette template dans la galerie */
.template-card {
    @apply cursor-pointer rounded-xl overflow-hidden border-2 border-slate-200 hover:border-indigo-400 transition group bg-white;
}
.template-card.active {
    @apply border-indigo-600 ring-2 ring-indigo-200;
}
.template-card-preview {
    aspect-ratio: 210 / 297;
    overflow: hidden;
    background: #fff;
    position: relative;
}
.template-card-preview .cv-document {
    transform: scale(0.28);
    transform-origin: top left;
    width: 794px;
    height: 1123px;
    pointer-events: none;
}
.template-card-footer {
    @apply px-3 py-2 flex items-center justify-between bg-white;
}
.template-card-name {
    @apply text-sm font-medium text-slate-800;
}
.template-card-badge {
    @apply text-[10px] px-1.5 py-0.5 rounded bg-slate-100 text-slate-600 uppercase tracking-wide;
}

/* ============================================================
   DOCUMENT CV — Format A4 strict
   ============================================================ */

.cv-document {
    /* A4 : 210 × 297 mm = 794 × 1123 px à 96dpi */
    width: 210mm;
    min-height: 297mm;
    max-height: 297mm;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    overflow: hidden;          /* Tronque si trop de contenu (page unique) */
    position: relative;
    color: #1f2937;
    font-size: var(--cv-font-size);
    line-height: 1.4;
}

@media screen {
    .cv-document {
        /* Mise à l'échelle responsive sur petits écrans */
    }
}

/* Toast */
#toast.show {
    display: block;
    animation: toastIn .3s ease-out;
}
@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Scrollbar épurée */
#form-panel::-webkit-scrollbar,
#preview-panel::-webkit-scrollbar { width: 8px; height: 8px; }
#form-panel::-webkit-scrollbar-thumb,
#preview-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
#form-panel::-webkit-scrollbar-thumb:hover,
#preview-panel::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Photo upload preview */
#photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Etat preview-fullscreen sur mobile */
body.mobile-preview-mode #form-panel { display: none; }
body.mobile-preview-mode #preview-panel { display: block; }