/** TimeHub — Template 0001 — calendar.css
 * Fusion de calendar-form.css (ancien fichier unique).
 * @version 3.0.0
 */

/**
 * TimeHub Calendar - Styles V2.5 (Force Rewrite)
 */

/* Apparence propre au template — layout géré par timehub-ui.css section 15 */
[data-template="0001"].timehub-wrapper {
    font-family: 'Segoe UI', sans-serif;
    background: #f0f2f5;
}

/* --- NAVIGATION BAR (LINKS) --- */
.timehub-format-nav {
    display: flex;
    background: #fff;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.format-link {
    flex: 1;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f9f9f9;
    transition: background 0.2s;
}

.format-link:last-child {
    border-right: none;
}

.format-link:hover {
    background: #f0f0f0;
    color: #000;
}

.format-link.active {
    background: #e6f0fa;
    /* Bleu clair actif */
    color: #000;
    font-weight: bold;
    border-bottom: 3px solid #3498db;
}

.format-link .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #3498db;
}

/* --- COLONNE GAUCHE (PARAMÈTRES) --- */
[data-template="0001"] .timehub-col-params {
    background: #eef2f7;
    padding: 33px 10px 10px 10px;
    border-radius: 4px;
}

[data-template="0001"] .param-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

[data-template="0001"] .param-row label {
    flex: 0 0 60%;
    font-size: 14px;
    color: #333;
    margin: 0;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

[data-template="0001"] .field-wrapper {
    flex: 1;
    /* Prend tout l'espace restant */
    width: auto;
    text-align: right;
}

.gcw-select,
input[type="number"],
input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    background: #fff;
    color: #000;
}

input[type="color"] {
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

/* --- GRILLE POSITION (PETIT) --- */
.pos-grid {
    display: grid;
    width: 60px;
    aspect-ratio: 1 / 1;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    border: 1px solid #999;
    background: #fff;
    margin: 0 auto;
}

.pos-cell {
    border: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.pos-cell:hover {
    background-color: #f0f0f0;
}

.pos-cell.active {
    background-color: #205081;
}

/* Bleu du thème */
.pos-cell.active::after {
    content: '•';
    color: white;
    font-size: 20px;
    line-height: 0;
    padding-bottom: 2px;
}

/* Renommé de .hidden → .pos-disabled pour éviter le conflit avec WordPress (.hidden { display:none !important }) */
.pos-cell.pos-disabled {
    visibility: visible;
    background-color: #e0e0e0;
    pointer-events: none;
    cursor: default;
}

/* Grise la case non sélectionnable */
.pos-grid.disabled {
    opacity: 0.3;
    pointer-events: none;
    background-color: #eee;
}

/* Contrôle Année — layout et boutons gérés par timehub-ui.css */
[data-template="0001"] .year-wrapper input {
    border-radius: 0;
    border-left  : none;
    border-right : none;
}

/* Advanced Toggle */
.advanced-container {
    margin-top: 20px;
}

.advanced-btn {
    width: 100%;
    text-align: left;
    background: #fff;
    color: #333;               /* Fixe le texte en foncé — évite l'héritage du thème (boutons blancs) */
    border: 1px solid #ccc;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
}

.advanced-content {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

/* --- TOOLTIP CUSTOM (INFOBULLE) --- */
.timehub-tooltip-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    cursor: help;
    color: #888;
}

.timehub-tooltip-container .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.timehub-tooltip-text {
    visibility: hidden;
    width: 350px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 100;
    bottom: 135%;
    /* Position au-dessus */
    left: 50%;
    margin-left: -175px;
    /* Centrage : moitié de 350px */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.timehub-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.timehub-tooltip-container:hover .timehub-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* --- COLONNE DROITE (APERÇU) --- */
.preview-header h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
}


/* --- TEXTE JF DANS L'APERÇU --- */
[data-template="0001"] .holiday-name {
    display: block;
    font-size: 9cqh; /* ajustable */
    color: #205081;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    word-break: break-word;
    margin-top: 55cqh;
    padding: 0 1cqh;
}

/* --- LOADER PDF --- */
#timehub-pdf-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #205081;
}

.lds-grid,
.lds-grid div {
    box-sizing: border-box;
}
.lds-grid {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 48px;
}
.lds-grid div {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) { top: 4px;  left: 4px;  animation-delay: 0s;    }
.lds-grid div:nth-child(2) { top: 4px;  left: 19px; animation-delay: -0.4s; }
.lds-grid div:nth-child(3) { top: 4px;  left: 34px; animation-delay: -0.8s; }
.lds-grid div:nth-child(4) { top: 19px; left: 4px;  animation-delay: -0.4s; }
.lds-grid div:nth-child(5) { top: 19px; left: 19px; animation-delay: -0.8s; }
.lds-grid div:nth-child(6) { top: 19px; left: 34px; animation-delay: -1.2s; }
.lds-grid div:nth-child(7) { top: 34px; left: 4px;  animation-delay: -0.8s; }
.lds-grid div:nth-child(8) { top: 34px; left: 19px; animation-delay: -1.2s; }
.lds-grid div:nth-child(9) { top: 34px; left: 34px; animation-delay: -1.6s; }
@keyframes lds-grid {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.5; }
}

/* --- TOAST NOTIFICATION --- */
.timehub-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: #205081;
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}
.timehub-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.timehub-toast.error {
    background: #c0392b;
}

/* Div de rendu hors-écran pour html2canvas */
#timehub-pdf-render {
    position: absolute;
    left: -9999px;
    top: 0;
    overflow: hidden;
    container-type: size;
}

/* --- ZONE APERÇU (CONTENEUR) --- */
#timehub-preview-content {
    background-color: #f0f0f1;
    /* Fond gris pour faire ressortir la feuille */
    padding: 30px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* --- APERÇU A4 --- */
[data-template="0001"] .preview-a4-wrapper {
    background-color: #ffffff;
    /* Feuille blanche */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15);
    /* Ombre portée bas-droite */
    margin: 0 auto;
    border: 1px solid #A6A6A6;
    /* Application des marges PMCO (PUM, PRM, PBM, PLM) via padding */
    /* PUM=3.37%, PRM=9.52%, PBM=6.73%, PLM=9.52% */
    padding: 3.37% 9.52% 6.73% 9.52%;
    box-sizing: border-box;
    position: relative;
    container-type: size;
}

/* --- MODE PORTRAIT (PM) --- */
[data-template="0001"] .preview-a4-wrapper[data-mode="portrait"] {
    aspect-ratio: 210/297;
}

/* --- MODE PAYSAGE (LM) --- */
[data-template="0001"] .preview-a4-wrapper[data-mode="landscape"] {
    aspect-ratio: 297/210;
}

/* Marges Paysage : Top 0.45cm (2.15%), Bot 0.9cm (4.29%), Left/Right 1.7cm (5.72%) */
[data-template="0001"] .preview-a4-wrapper[data-mode="landscape"] {
    padding: 2.15% 5.72% 4.29% 5.72%;
}

.us-surface {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* border: 1px dashed #eee; Debug visuel retiré */
}

/* PUSD_MC_H (Anciennement PUSD_H) : Portrait Useful Surface Drawer Header */
/* Hauteur : 6.73% de A4PH. Sur une USPH de 89.9%, cela fait ~7.49% */
/* PAYSAGE : Header 1200 twips (2.12cm) sur Surface (19.2cm) = 11.02% */
.pusd-mc-h {
    height: 7.49%;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
}

.cal-title {
    font-size: 65cqh;
    font-weight: bold;
    text-transform: capitalize;
    line-height: 1;
}

/* Ajustement Hauteur Header Paysage */
.preview-a4-wrapper[data-mode="landscape"] .pusd-mc-h {
    height: 11.02%;
}

/* PUSD_MC : Contient PUSD_MC_Grid */
.pusd-mc {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* PUSD_MC_Grid (Anciennement cal-grid) */
.pusd-mc-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* PUSD_MC_thead (3.37% A4PH) vs PUSD_MC_rowzone (79.79% A4PH) */
    /* Ratio Header/Total = 3.37 / 83.16 = 4.05% */
    grid-template-rows: 4.05% repeat(6, 1fr);
    height: 100%;
    /* Technique Bord Partagé : Conteneur = Haut + Gauche */
    border-top: 0.15cqh solid #000;
    border-left: 0.15cqh solid #000;
}

/* Ajustement Grille Paysage */
/* Header Grid (Days) = Même hauteur que Titre (11.02% de la surface) */
/* La grille occupe 100% - 11.02% = 88.98% de la surface. */
/* Ratio Header/Grille = 11.02 / 88.98 = 12.38% */
/* height: 95% → libère 5% en bas pour la marge logo (anti-débordement DOCX) */
.preview-a4-wrapper[data-mode="landscape"] .pusd-mc-grid {
    grid-template-rows: 12.38% repeat(6, 1fr);
    height: 95%;
}

/* PUSD_MC_thead (Anciennement cal-day-header) */
.pusd-mc-thead {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    min-width: 0;
    overflow: hidden;
    container-type: size;
    border-right: 0.15cqh solid #000;
    border-bottom: 0.15cqh solid #000;
}

/* Span interne pour l'ellipsis centré */
.pusd-mc-thead span {
    font-size: 38cqh;
    /* Réduit de 15% environ (avant: 45cqh) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

/* PMCO_Cell (Anciennement cal-cell) */
/* Utilisation de Flexbox pour centrer verticalement le contenu (Moyen/Grand/Férié) comme dans Word */
.pmco-cell {
    border-right: 0.15cqh solid #000;
    border-bottom: 0.15cqh solid #000;
    position: relative;
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    container-type: size;
}

.day-number {
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    position: absolute;
    z-index: 10;
}

/* Tailles */
.day-number.size-small {
    font-size: 15cqh;
}

.day-number.size-medium {
    font-size: 21cqh;
}

.day-number.size-large {
    font-size: 36cqh;
    line-height: 1;
}

/* --- COMPENSATION VISUELLE POUR PMCN / PMCNMC --- */
/* Les cellules étant plus petites à cause du footer, on augmente le ratio cqh (~ x1.47) 
   pour que la taille visuelle des chiffres reste identique à celle du mode PMCO */
[data-case="pmcn"] .day-number.size-small,
[data-case="pmcnmc"] .day-number.size-small {
    font-size: 22cqh;
}

[data-case="pmcn"] .day-number.size-medium,
[data-case="pmcnmc"] .day-number.size-medium {
    font-size: 31cqh;
}

[data-case="pmcn"] .day-number.size-large,
[data-case="pmcnmc"] .day-number.size-large {
    font-size: 53cqh;
}

/* --- COMPENSATION VISUELLE POUR MODE PAYSAGE (LM) --- */
/* La hauteur de page étant plus petite (210mm), les cellules sont moins hautes.
   On augmente le ratio cqh (~ x1.44) pour retrouver la taille visuelle du Portrait */
[data-mode="landscape"] .day-number.size-small {
    font-size: 35cqh;
}

[data-mode="landscape"] .day-number.size-medium {
    font-size: 50cqh;
}

[data-mode="landscape"] .day-number.size-large {
    font-size: 70cqh;
}



.day-number.is-holiday {
    color: #FF0000;
}


/* Exception : Le centre absolu redevient relatif pour s'empiler proprement avec le jour férié */
.day-number.pos-mid-center {
    position: relative;
    width: 100%;
    text-align: center;
    top: auto;
    left: auto;
    transform: none;
}

/* Positions pour la taille Petit (Small) */
.day-number.pos-top-left {
    top: 2px;
    left: 4px;
}

.day-number.pos-top-center {
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
}

.day-number.pos-top-right {
    top: 2px;
    right: 4px;
}

.day-number.pos-mid-left {
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
}

.day-number.pos-mid-right {
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
}

.day-number.pos-bot-left {
    bottom: 2px;
    left: 4px;
}

.day-number.pos-bot-center {
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
}

.day-number.pos-bot-right {
    bottom: 2px;
    right: 4px;
}

/* --- TIROIR FOOTER (ACCESSOIRES) --- */
.pusd-f {
    display: flex;
    width: 100%;
    container-type: size;
}

/* --- LOGIQUE PAYSAGE AVEC ACCESSOIRES (LMCN / LMCNMC) --- */
/* Bascule en Grid Layout pour gérer la colonne latérale */
[data-mode="landscape"][data-case="lmcn"] .us-surface,
[data-mode="landscape"][data-case="lmcnmc"] .us-surface {
    display: grid;
    /* Colonnes : Cal (75%) - Gap (6%) - Side (19%) */
    grid-template-columns: 75% 6% 19%;
    /* Lignes : Header (11.02%) - Grid (Reste) */
    grid-template-rows: 11.02% 1fr;
    grid-template-areas:
        "header gap side"
        "mc gap side";
}

/* Affectation des zones en Paysage */
[data-mode="landscape"][data-case^="lmcn"] .pusd-mc-h {
    grid-area: header;
    height: 100%;
}

[data-mode="landscape"][data-case^="lmcn"] .pusd-mc {
    grid-area: mc;
}

[data-mode="landscape"][data-case^="lmcn"] .pusd-f {
    grid-area: side;
    height: 100%;
    flex-direction: column;
    /* Empilement vertical dans la colonne de droite */
    border-left: none;
    /* Pas de bordure, géré par le gap */
}

/* Masquer le footer en LMCO (Paysage sans accessoires) */
[data-case="lmco"] .pusd-f {
    display: none;
}

/* Ajustement Grille Interne pour LMCN/LMCNMC */
/* Le header est défini par la grid parent, donc la grille interne commence direct */
/* MAIS .pusd-mc contient .pusd-mc-grid. */
/* La hauteur de .pusd-mc est maintenant définie par la row 2 (1fr). */
/* Le ratio interne de la grille doit changer car elle n'a plus à compenser le header externe */
/* Header Days (11.02% surface) vs Grid Body (88.98% surface) -> Ratio 12.38% conservé car proportionnel */
/* Donc pas de changement nécessaire sur grid-template-rows pour la grille interne */


/* Les 4 Sous-Tiroirs (Zones) */
.footer-zone-1,
.footer-zone-2,
.footer-zone-3,
.footer-zone-4 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Cas PMCN (Portrait Main Calendar Notes) */
/* Le calendrier (pusd-mc) se rétracte pour laisser 26.25% (7cm) au footer */
[data-case="pmcn"] .pusd-f {
    height: 26.25%;
}

/* PMCN : 100% / 0% / 0% / 0% */
[data-case="pmcn"] .footer-zone-1 {
    width: 100%;
}

[data-case="pmcn"] .footer-zone-2 {
    width: 0;
}

[data-case="pmcn"] .footer-zone-3 {
    width: 0;
}

[data-case="pmcn"] .footer-zone-4 {
    width: 0;
}

/* Ajustement de la grille interne pour PMCN (Ratio Header/Cells modifié : 5.66%) */
[data-case="pmcn"] .pusd-mc-grid {
    grid-template-rows: 5.66% repeat(6, 1fr);
}

.notes-section {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
}

.notes-label {
    font-weight: 400;
    font-size: 10cqh;
    margin: 5cqh 0cqh;
}

.footer-notes {
    width: 100%;
    border-top: 2px solid #000;
}

.note-line {
    border-bottom: 1px dashed #999;
    height: 1px;
    width: 100%;
    margin-bottom: 12cqh;
}

@media (max-width: 900px) {
    .timehub-main-container {
        grid-template-columns: 1fr;
    }

    /* Empilement vertical sur mobile */
    .preview-sticky-wrapper {
        position: static;
    }
}

/* --- Suppression des flèches (spinners) natives --- */

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* --- MINI CALENDRIER (Accessoire) --- */

.mini-cal-section {
    display: flex;
    flex-direction: column;
    padding-top: 19cqh;
    /* x4.2 pour compenser le changement de repère */
    height: 100%;
}

.mini-cal-title {
    text-align: right;
    font-size: 7cqh;
    /* ~3.5mm */
    font-weight: 400;
    margin-bottom: 2px;
    text-transform: capitalize;
    text-align: left;
}

.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    /* 1 Header + 6 Semaines */
    border-top: 0.25cqh solid #000;
    border-left: 0.25cqh solid #000;
    background: #fff;
    width: 100%;
    aspect-ratio: 1 / 0.85;
    /* Ratio approximatif pour ressembler au Word */
}

.mini-cal-cell {
    border-right: 0.25cqh solid #000;
    border-bottom: 0.25cqh solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5cqh;
    /* ~2.5mm */
    line-height: 1;
    padding: 0;
}

.mini-cal-cell.head {
    color: #fff;
    font-weight: 400;
    font-size: 5cqh;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

/* Cas PMCNMC (Portrait Main Calendar Notes + Mini Cal) */
[data-case="pmcnmc"] .pusd-f {
    height: 26.25%;
}

/* PMCNMC : 72.25% / 2.5% / 25% / 0.25% */
[data-case="pmcnmc"] .footer-zone-1 {
    width: 72.25%;
}

[data-case="pmcnmc"] .footer-zone-2 {
    width: 2.5%;
}

[data-case="pmcnmc"] .footer-zone-3 {
    width: 25%;
}

[data-case="pmcnmc"] .footer-zone-4 {
    width: 0.25%;
}

/* Ajustement de la grille interne pour PMCNMC (Ratio Header/Cells modifié car Footer = 26.25%) */
/* Footer grand -> Grille réduite (56.20%) -> Ratio Header/Total = 3.37 / (3.37 + 56.20) = 5.66% */
[data-case="pmcnmc"] .pusd-mc-grid {
    grid-template-rows: 5.66% repeat(6, 1fr);
}

/* --- CAS LMCN (Paysage Notes Seules) --- */
/* Colonne latérale : Notes prennent tout */
[data-case="lmcn"] .footer-zone-1 {
    height: 100%;
    width: 100%;
}

[data-case="lmcn"] .footer-zone-2,
[data-case="lmcn"] .footer-zone-3,
[data-case="lmcn"] .footer-zone-4 {
    display: none;
}

/* --- CAS LMCNMC (Paysage Notes + Mini Cal) --- */
/* Transposition Verticale : Notes en haut, Mini en bas */
[data-case="lmcnmc"] .footer-zone-1 {
    height: 70%;
    width: 100%;
}

/* Notes (11 lignes) */
[data-case="lmcnmc"] .footer-zone-2 {
    height: 1%;
    width: 100%;
}

/* Gap vertical */
[data-case="lmcnmc"] .footer-zone-3 {
    height: 26%;
    width: 100%;
}

/* Mini Cal (Carré approx) */
[data-case="lmcnmc"] .footer-zone-4 {
    display: none;
}

/* Ajustement Mini Cal en Paysage — remonté ~10mm via marge négative */
[data-case="lmcnmc"] .mini-cal-section {
    padding-top: 0;
    margin-top: -5cqh;
}

/* --- COMPENSATION ÉCHELLE PAYSAGE (SIDE DRAWER) --- */
/* Le conteneur .pusd-f est beaucoup plus haut en Paysage (~19cm) qu'en Portrait (7cm). */
/* On réduit les valeurs cqh (~ x0.36) pour maintenir la taille physique. */
[data-mode="landscape"] .notes-label {
    font-size: 4cqh;
    margin: 10cqh 0 3cqh 0;
}

[data-mode="landscape"] .note-line {
    margin-bottom: 3.9cqh;
}

[data-mode="landscape"] .mini-cal-title {
    font-size: 2.5cqh;
}

[data-mode="landscape"] .mini-cal-cell,
[data-mode="landscape"] .mini-cal-cell.head {
    font-size: 1.8cqh;
}

/* Message d'information / Feedback */
#timehub-message {
    margin-top: 10px;
    font-size: 13px;
    min-height: 18px;
    text-align: center;
}

/* Message d'alerte restriction position (Jours Fériés) */
#pos-restriction-msg {
    background-color: #fa2525;
    text-shadow: #000 1px 1px 0px;
    padding: 10px;
    color: #ffffff;
    font-size: 10px;
    border-radius: 5px;
    margin-top: 5px;
    line-height: 1.2;
    font-weight: bold;
}

/* Weekend Selector (Jours cliquables) */
.weekend-selector {
    display: flex;
    gap: 2px;
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
}

.we-day {
    flex: 1;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
    background: #fff;
    color: #333;
    user-select: none;
}

.we-day:hover {
    background: #f0f0f0;
}

.we-day.active {
    background: #205081;
    color: #fff;
    border-color: #205081;
}

/* --- LOGO MARQUE (Brand Logo) --- */
/* Position absolue dans la marge basse du wrapper A4              */
/* Portrait  : right = 9.52% → aligné avec bord DROIT calendrier  */
/* Paysage   : left  = 5.72% → aligné avec bord GAUCHE calendrier */
/* width = 22.4% de la feuille A4 (28% - 20%)                     */
.brand-logo-zone {
    position: absolute;
    bottom: 2%;
    right: 9.52%;
    width: 22.4%;
    line-height: 0;
    pointer-events: none;
    margin-right: 3.4cqh;
}

/* Paysage : alignement à droite (identique portrait) */
.brand-logo-zone--landscape {
    right: 9.52%;
    left: auto;
    bottom: 1.8%;
    width: 26.9%; /* +20% vs portrait (22.4% × 1.2) */
}

/* Paysage aperçu uniquement — logo réduit de 30% (26.9% × 0.7) */
[data-template="0001"] [data-mode="landscape"] .brand-logo-zone--landscape {
    width: 18.83%;
}

.brand-logo-zone svg {
    width: 100%;
    height: auto;
    display: block;
}

/* --- BOUTON PLEIN ÉCRAN --- */
/* Position / taille / opacity uniquement — apparence dans timehub-ui.css */
[data-template="0001"] .btn-fullscreen-toggle {
    position  : absolute;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
    width     : 30cqh;
    height    : 30cqh;
    opacity   : 0.4;
}

[data-template="0001"] .btn-fullscreen-toggle:hover {
    opacity   : 0.8;
    transform : translate(-50%, -50%) scale(1.08);
}

/* --- CLONE A4 DANS OVERLAY — T0001 --- */
#timehub-fullscreen-overlay[data-template="0001"] .timehub-fullscreen-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Clic passe à travers vers l'overlay (sauf sur fils) */
}

/* Clone A4 dans l'overlay — propriétés manquantes hors contexte [data-template] */
#timehub-fullscreen-overlay[data-template="0001"] .timehub-fullscreen-content .preview-a4-wrapper {
    pointer-events: auto;
    background-color: #ffffff;
    border: 1px solid #A6A6A6;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    container-type: size;
    box-sizing: border-box;
    position: relative;
    padding: 3.37% 9.52% 6.73% 9.52%; /* marges portrait */
}

#timehub-fullscreen-overlay[data-template="0001"] .timehub-fullscreen-content .preview-a4-wrapper[data-mode="landscape"] {
    padding: 2.15% 5.72% 4.29% 5.72%; /* marges paysage */
}

#timehub-fullscreen-overlay[data-template="0001"] .timehub-fullscreen-content .preview-a4-wrapper[data-mode="portrait"] {
    aspect-ratio: 210/297;
}

#timehub-fullscreen-overlay[data-template="0001"] .timehub-fullscreen-content .preview-a4-wrapper[data-mode="landscape"] {
    aspect-ratio: 297/210;
}

/* --- FORMAT LETTRE — ratios portrait 8.5×11 / paysage 11×8.5 --- */
[data-template="0001"] .preview-a4-wrapper[data-mode="portrait"].is-format-letter {
    aspect-ratio: 17/22; /* 8.5/11 */
}

[data-template="0001"] .preview-a4-wrapper[data-mode="landscape"].is-format-letter {
    aspect-ratio: 22/17; /* 11/8.5 */
}

/* Format Lettre dans l'overlay */
#timehub-fullscreen-overlay[data-template="0001"] .timehub-fullscreen-content .preview-a4-wrapper[data-mode="portrait"].is-format-letter {
    aspect-ratio: 17/22;
}

#timehub-fullscreen-overlay[data-template="0001"] .timehub-fullscreen-content .preview-a4-wrapper[data-mode="landscape"].is-format-letter {
    aspect-ratio: 22/17;
}

/* --- FORMAT A3 — même ratio 1:√2 que A4 (297×420mm) --- */
[data-template="0001"] .preview-a4-wrapper[data-mode="portrait"].is-format-a3 {
    aspect-ratio: 297/420;
}

[data-template="0001"] .preview-a4-wrapper[data-mode="landscape"].is-format-a3 {
    aspect-ratio: 420/297;
}

/* Format A3 dans l'overlay */
#timehub-fullscreen-overlay[data-template="0001"] .timehub-fullscreen-content .preview-a4-wrapper[data-mode="portrait"].is-format-a3 {
    aspect-ratio: 297/420;
}

#timehub-fullscreen-overlay[data-template="0001"] .timehub-fullscreen-content .preview-a4-wrapper[data-mode="landscape"].is-format-a3 {
    aspect-ratio: 420/297;
}

/* --- FORMAT TABLOID (279×432mm) --- */
[data-template="0001"] .preview-a4-wrapper[data-mode="portrait"].is-format-tabloid {
    aspect-ratio: 279/432;
}

[data-template="0001"] .preview-a4-wrapper[data-mode="landscape"].is-format-tabloid {
    aspect-ratio: 432/279;
}

/* Format Tabloid dans l'overlay */
#timehub-fullscreen-overlay[data-template="0001"] .timehub-fullscreen-content .preview-a4-wrapper[data-mode="portrait"].is-format-tabloid {
    aspect-ratio: 279/432;
}

#timehub-fullscreen-overlay[data-template="0001"] .timehub-fullscreen-content .preview-a4-wrapper[data-mode="landscape"].is-format-tabloid {
    aspect-ratio: 432/279;
}

/* .btn-fullscreen-toggle masqué dans le clone — géré par timehub-ui.css */

/* ──────────────────────────────────────────────────────────────────────────
   OVERLAY — Avertissement polices DOCX
   ────────────────────────────────────────────────────────────────────────── */
[data-template="0001"] .timehub-docx-font-overlay {
    position   : fixed;
    inset      : 0;
    background : rgba(0, 0, 0, 0.55);
    z-index    : 9999;
    display    : flex;
    align-items: center;
    justify-content: center;
}

[data-template="0001"] .docx-font-overlay-box {
    background   : #fff;
    border-radius: 10px;
    padding      : 32px 36px;
    max-width    : 520px;
    width        : 90%;
    box-shadow   : 0 12px 48px rgba(0, 0, 0, 0.28);
    font-size    : 15px;
    line-height  : 1.65;
}

[data-template="0001"] .docx-font-overlay-box p {
    margin: 0 0 16px;
    color : #333;
}

[data-template="0001"] .docx-font-overlay-box a {
    color          : #205081;
    text-decoration: underline;
}

[data-template="0001"] .docx-font-overlay-box a:hover {
    color: #184068;
}

[data-template="0001"] #docx-continue-btn {
    display        : block;
    width          : 100%;
    margin-top     : 8px;
    padding        : 14px 20px;
    background     : #205081;
    color          : #fff;
    border         : none;
    border-radius  : 6px;
    font-size      : 15px;
    font-weight    : 600;
    cursor         : pointer;
    transition     : background 0.2s;
    letter-spacing : 0.3px;
}

[data-template="0001"] #docx-continue-btn:hover {
    background: #184068;
}

/* ──────────────────────────────────────────────────────────────────────────
   FONT PICKER — sélecteur de police avec aperçu Google Fonts
   ────────────────────────────────────────────────────────────────────────── */
[data-template="0001"] .th-font-picker {
    position : relative;
    width    : 100%;
}

/* Bouton déclencheur */
[data-template="0001"] .th-font-trigger {
    width          : 100%;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 6px 10px;
    background     : #fff;
    border         : 1px solid #ccc;
    border-radius  : 4px;
    cursor         : pointer;
    color          : #333;
    text-align     : left;
    transition     : border-color 0.15s;
    font-size      : 14px;
    line-height    : 1.4;
    min-height     : 34px;
}

[data-template="0001"] .th-font-trigger:hover,
[data-template="0001"] .th-font-picker.is-open .th-font-trigger {
    border-color: #205081;
    outline     : none;
}

[data-template="0001"] .th-font-trigger-label {
    flex        : 1;
    overflow    : hidden;
    white-space : nowrap;
    text-overflow: ellipsis;
    font-size   : 15px;
}

[data-template="0001"] .th-font-trigger-arrow {
    margin-left: 8px;
    font-size  : 10px;
    color      : #888;
    transition : transform 0.2s;
    flex-shrink: 0;
}

[data-template="0001"] .th-font-picker.is-open .th-font-trigger-arrow {
    transform: rotate(180deg);
}

/* Panneau déroulant */
[data-template="0001"] .th-font-dropdown {
    display      : none;
    position     : absolute;
    top          : calc(100% + 4px);
    left         : 0;
    right        : 0;
    background   : #fff;
    border       : 1px solid #d0d0d0;
    border-radius: 6px;
    box-shadow   : 0 6px 24px rgba(0, 0, 0, 0.14);
    max-height   : 280px;
    overflow-y   : auto;
    z-index      : 1100;
    padding      : 4px 0;
}

[data-template="0001"] .th-font-picker.is-open .th-font-dropdown {
    display: block;
}

/* Chaque option */
[data-template="0001"] .th-font-option {
    padding    : 9px 14px;
    font-size  : 16px;
    cursor     : pointer;
    color      : #222;
    transition : background 0.1s;
    white-space: nowrap;
    line-height: 1.3;
    text-align : left;
}

[data-template="0001"] .th-font-option:hover {
    background: #f0f4f9;
}

[data-template="0001"] .th-font-option.is-active {
    background: #e8eef6;
    color     : #205081;
}