/**
 * FICHE-PAIE.FR - CSS partagé : Aperçu bulletin format A4
 *
 * Extrait de generate.css — bloc "APERÇU BULLETIN - FORMAT A4"
 * Chargé par toutes les pages affichant un aperçu bulletin :
 *   - wizard (/creer-ma-fiche-de-paie via main.php → generate.css)
 *   - reprise (/reprendre.php)
 *
 * Créé le 23/02/2026 - fix format A4 page reprise panier abandonné
 *
 * @copyright 2025-2026 Purple Telecom EURL
 */

/* =====================================================
   APERÇU BULLETIN - FORMAT A4
   ===================================================== */

.preview-container {
    width: 100%;
    overflow: hidden; /* Pas de scroll horizontal - le scaling gère tout */
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8px;
    padding: var(--space-sm, 8px);
    box-sizing: border-box;
}

/* Wrapper A4 pour centrer et scaler le bulletin */
.preview-container .bulletin-a4-wrapper,
.preview-container .preview-wrapper {
    width: 794px; /* Largeur A4 à 96dpi */
    min-width: 794px;
    margin: 0 auto;
    transform-origin: top center;
    transition: transform 0.2s ease;
}

/* Le bulletin lui-même */
.preview-container > div[style*="max-width:900px"],
.preview-container > div[style*="font-family:Arial"],
.preview-container .bp {
    width: 794px !important;
    max-width: 794px !important;
    min-width: 794px !important;
    margin: 0 auto;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-radius: 4px;
    transform-origin: top center;
    transition: transform 0.2s ease;
}

/* ========================================
   SCALING RESPONSIVE - APERÇU PDF
   Utilise CSS custom property pour le scale dynamique
   ======================================== */

/* Tablette (768px - 991px) : scale ~70% */
@media (max-width: 991px) {
    .preview-container {
        padding: var(--space-sm, 8px);
        --preview-scale: 0.70;
    }

    .preview-container > div[style*="max-width:900px"],
    .preview-container > div[style*="font-family:Arial"],
    .preview-container .bp,
    .preview-container .preview-wrapper {
        transform: scale(var(--preview-scale, 0.70));
        transform-origin: top center;
    }

    /* Ajuster la hauteur du conteneur pour éviter l'espace vide */
    .preview-container {
        /* Hauteur A4 (1123px) * scale */
        height: calc(1123px * var(--preview-scale, 0.70));
        max-height: calc(1123px * var(--preview-scale, 0.70));
    }
}

/* Mobile (576px - 767px) : scale ~55% */
@media (max-width: 767px) {
    .preview-container {
        --preview-scale: 0.55;
        padding: var(--space-xs, 4px);
        border-radius: 4px;
    }

    .preview-container > div[style*="max-width:900px"],
    .preview-container > div[style*="font-family:Arial"],
    .preview-container .bp,
    .preview-container .preview-wrapper {
        transform: scale(var(--preview-scale, 0.55));
    }

    .preview-container {
        height: calc(1123px * var(--preview-scale, 0.55));
        max-height: calc(1123px * var(--preview-scale, 0.55));
    }
}

/* Petit mobile (< 576px) : scale ~47% */
@media (max-width: 575px) {
    .preview-container {
        --preview-scale: 0.47;
        padding: var(--space-xs, 4px);
    }

    .preview-container > div[style*="max-width:900px"],
    .preview-container > div[style*="font-family:Arial"],
    .preview-container .bp,
    .preview-container .preview-wrapper {
        transform: scale(var(--preview-scale, 0.47));
    }

    .preview-container {
        height: calc(1123px * var(--preview-scale, 0.47));
        max-height: calc(1123px * var(--preview-scale, 0.47));
    }
}

/* Desktop (>= 992px) : taille réelle, pas de scale */
@media (min-width: 992px) {
    .preview-container {
        --preview-scale: 1;
        padding: 20px;
        height: auto;
        max-height: none;
        overflow-x: auto; /* Scroll si nécessaire sur desktop */
    }

    .preview-container > div[style*="max-width:900px"],
    .preview-container > div[style*="font-family:Arial"],
    .preview-container .bp,
    .preview-container .preview-wrapper {
        transform: none;
    }
}

/* ========================================
   FILIGRANE APERÇU GRATUIT - PATTERN RÉPÉTITIF ANTI-COPIE
   Ajouté le 23/02/2026 - Remplace l'ancien filigrane unique
   Pseudo-élément ancré dans le conteneur → scroll AVEC le bulletin
   ======================================== */

/* Conteneurs de l'aperçu : position relative pour ancrer le filigrane */
.apercu-bulletin,
.preview-container {
    position: relative;
}

/* Pattern répétitif "APERÇU GRATUIT" via SVG inline en background-repeat */
/* Couvre 100% de la surface du bulletin — impossible à retirer par screenshot */
.apercu-bulletin .bp::before,
.preview-container .bulletin::before,
.preview-container .bulletin-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* SVG : texte "APERÇU GRATUIT" en diagonale -30deg, répété en grille */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMTIwIj48dGV4dCB4PSIxMDAiIHk9IjYwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0cmFuc2Zvcm09InJvdGF0ZSgtMzAsIDEwMCwgNjApIiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJyZ2JhKDE1MCwxNTAsMTUwLDAuMTUpIiBsZXR0ZXItc3BhY2luZz0iMiI+QVBFUsOHVSBHUkFUVUlUPC90ZXh0Pjwvc3ZnPg==");
    background-repeat: repeat;
    background-size: 200px 120px;
    pointer-events: none; /* Ne bloque pas les interactions */
    z-index: 100;
}

/* ========================================
   INDICATION "PINCEZ POUR ZOOMER"
   Affiché uniquement sur mobile/tablette
   ======================================== */
.preview-zoom-hint {
    text-align: center;
    font-size: var(--font-size-xs, 12px);
    color: #6b7280;
    padding: var(--space-xs, 4px) var(--space-sm, 8px);
    background: #f9fafb;
    border-radius: 4px;
    margin-top: var(--space-sm, 8px);
    display: none; /* Masqué par défaut */
}

/* Afficher sur mobile et tablette */
@media (max-width: 991px) {
    .preview-zoom-hint {
        display: block;
    }
}

/* Masquer sur desktop */
@media (min-width: 992px) {
    .preview-zoom-hint {
        display: none;
    }
}