/*
Skin unique du calendrier interne (air-datepicker)
==================================================

Partagé par index.html, les pages cartes (ext/tracking.html,
ext/announcements.html) et l'éditeur de layouts : l'appli ne garde que DEUX
datepickers — le dialogue jQuery UI « aller à la date » de la navbar (voulu
tel quel) et ce calendrier, aux couleurs du thème avec la sélection en rouge,
qui couvre aussi les champs date+heure (timepicker intégré).

À charger APRÈS air-datepicker.css (la cascade tranche à spécificité égale)
et theme.css (variables --wp-*, requises sans fallback comme dans pages.css).

La feuille du vendeur est entièrement en px pilotés par variables --adp-*
(pas de rem : la racine à 10px de theme.css est donc sans effet) : le gros du
skin est un simple jeu de variables ; s'y ajoutent le liseré du jour courant,
la gouttière des numéros de semaine (injectée par l'adaptateur de main.js,
.wp-weeks) et l'état « en édition » du champ (classe posée par l'adaptateur).
*/

.air-datepicker {
    /* échelle et empilement */
    --adp-font-family: var(--wp-font-family);
    --adp-font-size: var(--wp-font-size);
    --adp-width: 252px;
    --adp-day-cell-height: 36px;
    /* au-dessus des modales (1050) et popovers (1060), comme le jQuery UI
       de la navbar (waplanner.css) */
    --adp-z-index: 9999;

    /* surfaces et bordures */
    --adp-background-color: #fff;
    --adp-border-color: var(--wp-border-light);
    --adp-border-color-inner: var(--wp-border-light);
    --adp-border-radius: var(--wp-radius);
    --adp-cell-border-radius: var(--wp-radius-sm);
    --adp-btn-border-radius: var(--wp-radius-sm);

    /* textes */
    --adp-color: var(--wp-text);
    --adp-color-secondary: var(--wp-text-muted);
    --adp-day-name-color: var(--wp-text-muted); /* orange chez le vendeur */
    --adp-day-name-color-hover: var(--wp-text);
    --adp-nav-arrow-color: var(--wp-text-muted);

    /* LE rouge du calendrier (sélection, jour courant, focus) */
    --adp-accent-color: var(--wp-datepicker-accent);
    --adp-color-current-date: var(--wp-datepicker-accent);
    --adp-cell-background-color-selected: var(--wp-datepicker-accent);
    --adp-cell-background-color-selected-hover: #b91c1c;
    --adp-background-color-selected-other-month: #ef4444;
    --adp-background-color-selected-other-month-focused: #dc2626;

    /* survols et boutons */
    --adp-cell-background-color-hover: var(--wp-hover-bg);
    --adp-background-color-hover: var(--wp-hover-bg);
    --adp-btn-color: var(--wp-text);
    --adp-btn-color-hover: var(--wp-text);
    --adp-btn-background-color-hover: var(--wp-hover-bg);
    --adp-btn-background-color-active: var(--wp-border-light);

    box-shadow: var(--wp-shadow-md);
}

/* Boutons du pied (« Aujourd'hui », « Effacer ») */
.air-datepicker-button {
    font-size: var(--wp-font-size-sm);
}

/* Jour courant : liseré rouge en plus du texte accentué du vendeur */
.air-datepicker-cell.-current-:not(.-selected-) {
    box-shadow: inset 0 0 0 1px var(--wp-datepicker-accent);
    font-weight: 600;
}
.air-datepicker-cell.-selected- {
    font-weight: 600;
}

/* Gouttière des numéros de semaine (injectée par l'adaptateur, main.js) */
.air-datepicker.wp-weeks .air-datepicker-body--day-names,
.air-datepicker.wp-weeks .air-datepicker-body--cells.-days- {
    grid-template-columns: 26px repeat(7, var(--adp-day-cell-width));
}
.wp-week-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wp-font-size-sm);
    color: var(--wp-text-muted);
}

/* Champ en cours d'édition (classe posée par l'adaptateur pendant que le
   calendrier est ouvert) */
.wp-datepicker-editing {
    border-color: var(--wp-datepicker-accent);
}
.wp-datepicker-editing:active,
.wp-datepicker-editing:focus {
    box-shadow: 0 0 0.25em 0.25em rgba(220, 38, 38, 0.15);
}

/* Icône calendrier dans le champ date/datetime/multidate : signale qu'un
   calendrier s'ouvre, l'input étant un champ texte nu. Décorative — un clic
   n'importe où dans le champ ouvre le calendrier, la saisie au clavier reste
   possible (relue au blur). Pas dans les chips de la barre des listes, trop
   compactes. */
input.wp-date-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.2'%3e%3crect x='2.2' y='3.3' width='11.6' height='10.5' rx='1.6'/%3e%3cline x1='2.2' y1='6.4' x2='13.8' y2='6.4'/%3e%3cline x1='5.2' y1='1.7' x2='5.2' y2='4'/%3e%3cline x1='10.8' y1='1.7' x2='10.8' y2='4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 15px 15px;
    padding-right: 28px;
}
.wp-chip input.wp-date-input {
    background-image: none;
    padding-right: 6px;
}

/* Calendrier posé DANS un dialogue (WP.box, option container) : ancre du
   positionnement absolu du composant, sans quoi il se cale sur la modale
   transformée */
.bootbox-form {
    position: relative;
}