/* ============================================================
   Dates — habillage doumé des inputs date/time natifs.
   (Le popup calendrier reste rendu par le navigateur : non stylable.)
   On thème le champ + l'icône, en clair et en sombre.
   ============================================================ */

input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--rule-strong, #d8d6de);
    border-radius: .5rem;
    background-color: var(--paper, #fff);
    color: var(--ink-1, #2b2b2b);
    font-family: var(--font-ui, 'Inter', sans-serif);
    padding: .55rem .8rem;
    transition: border-color .15s, box-shadow .15s;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus {
    border-color: var(--accent, #89202A);
    box-shadow: 0 0 0 3px rgba(137, 32, 42, .12);
    outline: none;
}

/* Icône calendrier (WebKit/Chrome/Edge) → calendrier bordeaux du thème. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2389202A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: .8;
}

/* ── Mode sombre ── */
body.dark-layout input[type="date"],
body.dark-layout input[type="datetime-local"],
body.dark-layout input[type="time"] {
    background-color: var(--paper, #283046);
    color: var(--ink-1, #d0d2d6);
    border-color: var(--rule-strong, #444b60);
}

body.dark-layout input[type="date"]:focus,
body.dark-layout input[type="datetime-local"]:focus,
body.dark-layout input[type="time"]:focus {
    border-color: #d06b62;
    box-shadow: 0 0 0 3px rgba(208, 107, 98, .18);
}

/* Icône calendrier en bordeaux clair sur fond sombre. */
body.dark-layout input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-layout input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d06b62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* Variante doumé pour le champ de modal (.dform-control) — cohérence visuelle. */
.dmodal input[type="date"].dform-control,
.dmodal input[type="datetime-local"].dform-control {
    width: 100%;
}