/* css/dias-uteis.css */

/* --- VARIÁVEIS LOCAIS --- */
:root {
    --du-bg-business: #e6f4ea; /* Verde Claro */
    --du-text-business: #137333;
    
    --du-bg-holiday: #fce8e6; /* Rouge clair */
    --du-text-holiday: #c5221f;
    
    --du-bg-weekend: #f1f3f4; /* Cinza Claro */
    --du-text-weekend: #5f6368;
    
    --du-bg-pf: #fff8e1; /* Jaune clair */
    --du-text-pf: #e65100; /* Laranja Escuro para legibilidade */

    --du-border: #e0e0e0;
    --du-card-bg: #ffffff;
    --du-highlight: #0071e3;
    --du-ink: #373530;
    
    --du-print-bg: #ffffff;
}

/* Dark Mode Overrides */
body.dark-mode {
    --du-bg-business: #2a6f43;
    --du-text-business: #f3fff7;
    
    --du-bg-holiday: #410e0b;
    --du-text-holiday: #f28b82;
    
    --du-bg-weekend: #3a424a;
    --du-text-weekend: #eef2f6;
    
    --du-bg-pf: #3e2723;
    --du-text-pf: #ffb74d;

    --du-border: #3c4043;
    --du-card-bg: #1e1e1e;
    --du-highlight: #8ab4f8;
    --du-ink: #d0d4d9;
    
    --du-print-bg: #1e1e1e;
}

body.dark-mode .du-glass-summary-card {
    background: linear-gradient(145deg, rgba(28, 30, 36, 0.82) 0%, rgba(22, 28, 42, 0.9) 100%);
    border-color: rgba(117, 169, 255, 0.22);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.dark-mode .du-glass-summary-title {
    border-bottom-color: rgba(117, 169, 255, 0.18);
}

body.dark-mode .du-glass-summary-row {
    background: rgba(20, 26, 38, 0.55);
    border-color: rgba(117, 169, 255, 0.24);
}

body.dark-mode .du-glass-summary-label {
    color: #aebbd2;
}

body.dark-mode .du-summary-important-dates {
    border-top-color: rgba(117, 169, 255, 0.22);
}

body.dark-mode .du-summary-important-dates h4 {
    color: #c0d0e6;
}

body.dark-mode .du-summary-subtle-note {
    border-top-color: rgba(117, 169, 255, 0.2);
    color: #9fb2cc;
}

body.dark-mode .du-summary-microcard {
    background: rgba(20, 26, 38, 0.58);
    border-color: rgba(117, 169, 255, 0.22);
}

body.dark-mode .du-summary-microcard-label {
    color: #aebbd2;
}

{
    --du-shell-max-width: 1000px;
    --du-year-shell-min-pad: 0px;
}

/* --- LAYOUT GERAL --- */
.du-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    font-family: var(--font-family-base);
}

.du-mes-layout {
    /* Largeur 100% du parent (cm-tool-shell__inner = 1040px effectifs après
       padding 20px L+R). L'ancien cap 1000px créait un inset 20px qui
       décalait le calendrier et le résumé par rapport à la toolbar du haut.
       Maintenant les bords latéraux du layout calendrier+résumé alignent
       exactement ceux de la toolbar. */
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.du-mes-details-column {
    flex: 0 0 330px;
    min-width: 300px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    order: 2;
}

.du-mes-details-column .dynamic-facts-box {
    margin: 0;
    flex: 1 1 0;
}

.du-mes-calendar-column {
    flex: 1;
    min-width: 0;
    display: flex;
    order: 1;
}

.du-mes-calendar-column .du-container.du-tool-ui-mes {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.du-glass-summary-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(241, 246, 255, 0.9) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 113, 227, 0.15);
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 4px 18px rgba(0, 113, 227, 0.09), 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.du-glass-summary-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 2px solid rgba(0, 113, 227, 0.1);
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.du-glass-summary-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1.05fr);
    align-items: start;
    gap: 10px;
    /* Densité accrue (cohérent avec .cmsumm-row) : 6px/10px + margin 4px
       pour ramener la hauteur de row de ~50px à ~40px. */
    padding: 6px 10px;
    margin-bottom: 4px;
    border: 1px solid rgba(0, 113, 227, 0.11);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
}

.du-glass-summary-label {
    font-size: 0.73rem;
    line-height: 1.28;
    color: #5f6b7f;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.du-glass-summary-value {
    font-size: 0.86rem;
    line-height: 1.32;
    font-weight: 700;
    text-align: right;
    justify-self: end;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-family: "Segoe UI Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Hint / parenthèse compacte sous la valeur (ex. "(7h × 17j)", "(10° / 19°)") */
.du-glass-summary-hint {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0;
    text-transform: none;
}
body.dark-mode .du-glass-summary-hint { color: #9ca3af; }

/* Row linkée (Jours fériés / Dernier jour ouvré) — chevron à droite */
.du-glass-summary-row--link {
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}
.du-glass-summary-row--link:hover,
.du-glass-summary-row--link:focus-visible {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 113, 227, 0.32);
    transform: translateY(-1px);
    text-decoration: none;
    outline: none;
}
.du-glass-summary-row--link .du-glass-summary-value {
    color: var(--primary-color, #0071e3);
}
.du-glass-summary-chev {
    display: inline-block;
    margin-left: 4px;
    color: rgba(0, 113, 227, 0.5);
    font-weight: 700;
    transition: transform 0.15s ease, color 0.15s ease;
}
.du-glass-summary-row--link:hover .du-glass-summary-chev,
.du-glass-summary-row--link:focus-visible .du-glass-summary-chev {
    transform: translateX(3px);
    color: var(--primary-color, #0071e3);
}
body.dark-mode .du-glass-summary-row--link:hover,
body.dark-mode .du-glass-summary-row--link:focus-visible {
    background: rgba(100, 177, 255, 0.08);
    border-color: rgba(100, 177, 255, 0.32);
}
body.dark-mode .du-glass-summary-row--link .du-glass-summary-value { color: #64b5ff; }
body.dark-mode .du-glass-summary-chev { color: rgba(100, 177, 255, 0.5); }
body.dark-mode .du-glass-summary-row--link:hover .du-glass-summary-chev { color: #64b5ff; }

/* Row toggle inline (Alsace-Moselle) — clic n'importe où sur la row active
   le switch. Le label est cliquable, l'input est masqué visuellement mais
   reste accessible (focus). État on = piste verte, off = piste grise. */
.du-glass-summary-row--toggle {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.du-glass-summary-row--toggle:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 113, 227, 0.28);
}
body.dark-mode .du-glass-summary-row--toggle:hover {
    background: rgba(100, 177, 255, 0.08);
    border-color: rgba(100, 177, 255, 0.32);
}
.du-glass-summary-value--switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.du-glass-summary-state {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    text-transform: none;
    letter-spacing: 0;
}
.du-glass-summary-row--toggle .du-inline-switch__input:checked ~ .du-inline-switch__track ~ * {}
.du-glass-summary-row--toggle:has(.du-inline-switch__input:checked) .du-glass-summary-state {
    color: #047857;
}
body.dark-mode .du-glass-summary-state { color: #cbd5e1; }
body.dark-mode .du-glass-summary-row--toggle:has(.du-inline-switch__input:checked) .du-glass-summary-state {
    color: #6ee7b7;
}

/* Switch inline (style iOS) */
.du-inline-switch {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}
.du-inline-switch__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.du-inline-switch__track {
    position: absolute;
    inset: 0;
    background: rgba(100, 116, 139, 0.32);
    border-radius: 100px;
    transition: background 0.2s ease;
}
.du-inline-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}
.du-inline-switch__input:checked ~ .du-inline-switch__track {
    background: #10b981;
}
.du-inline-switch__input:checked ~ .du-inline-switch__track .du-inline-switch__thumb {
    transform: translateX(16px);
}
.du-inline-switch__input:focus-visible ~ .du-inline-switch__track {
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.28);
}
body.dark-mode .du-inline-switch__track {
    background: rgba(148, 163, 184, 0.32);
}
body.dark-mode .du-inline-switch__input:checked ~ .du-inline-switch__track {
    background: #34d399;
}

/* Bloc d'export sous le calendrier (cm-tool-actions) — 3 boutons CTA
   contextuels avec sub-label, intégrés dans le wrapper de l'outil. */
.cm-tool-actions {
    margin-top: 18px;
    padding: 14px 14px 12px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
}
.cm-tool-actions__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.cm-tool-actions__head i { color: #0071e3; }
.cm-tool-actions__buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
/* Override des styles legacy .btn-action / .btn-print / .btn-custom-pdf /
   .btn-share (calendrier.css) qui forcent background coloré + color #fff
   !important. On garde le fond blanc et le texte sombre pour cohérence
   avec le pattern micro-card. !important pour battre les rules legacy. */
.cm-tool-actions__buttons .btn-action {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease !important;
    text-align: left;
    box-shadow: none !important;
}
.cm-tool-actions__buttons .btn-action:hover,
.cm-tool-actions__buttons .btn-action:focus-visible {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-color: rgba(0, 113, 227, 0.4) !important;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.12) !important;
    transform: translateY(-1px) !important;
    outline: none;
    color: #0f172a !important;
}
.cm-tool-actions__buttons .btn-action .icon {
    flex-shrink: 0;
    color: #0071e3;
    display: inline-flex;
    align-items: center;
    font-size: 1em !important;
}
.cm-tool-actions__buttons .btn-action.btn-print .icon { color: #0071e3; }
.cm-tool-actions__buttons .btn-action.btn-custom-pdf .icon { color: #dc2626; }
.cm-tool-actions__buttons .btn-action.btn-share .icon { color: #0071e3; }
.cm-tool-actions__label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.cm-tool-actions__label strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}
.cm-tool-actions__label small {
    font-size: 0.72rem;
    font-weight: 500;
    color: #64748b;
    margin-top: 2px;
}

body.dark-mode .cm-tool-actions {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .cm-tool-actions__head { color: #aeaeb2; }
body.dark-mode .cm-tool-actions__head i { color: #64b5ff; }
/* Dark mode : override legacy .btn-action.btn-print qui force un bleu sombre.
   Selectividade body.dark-mode + 2 classes + !important pour battre. */
body.dark-mode .cm-tool-actions__buttons .btn-action,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-print,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-custom-pdf,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-share {
    background: #1c1c1e !important;
    background-color: #1c1c1e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f5f7 !important;
}
body.dark-mode .cm-tool-actions__buttons .btn-action:hover,
body.dark-mode .cm-tool-actions__buttons .btn-action:focus-visible,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-print:hover,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-custom-pdf:hover,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-share:hover {
    background: #2c2c2e !important;
    background-color: #2c2c2e !important;
    border-color: rgba(100, 177, 255, 0.4) !important;
    box-shadow: 0 4px 12px rgba(100, 177, 255, 0.18) !important;
    color: #f5f5f7 !important;
}
body.dark-mode .cm-tool-actions__buttons .btn-action .icon { color: #64b5ff; }
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-custom-pdf .icon { color: #ff6b6b; }
body.dark-mode .cm-tool-actions__label strong { color: #f5f5f7; }
body.dark-mode .cm-tool-actions__label small { color: #aeaeb2; }

@media (max-width: 720px) {
    .cm-tool-actions__buttons {
        grid-template-columns: 1fr;
    }
}

.du-summary-important-dates {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 113, 227, 0.2);
}

.du-summary-important-dates h4 {
    margin: 0 0 8px;
    font-size: 0.82rem;
    line-height: 1.3;
    font-weight: 700;
    color: #3a4f6f;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.du-summary-important-dates ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.du-summary-important-dates li {
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--text-color);
}

.du-important-date {
    font-weight: 700;
    margin-right: 4px;
}

.du-important-name {
    font-weight: 500;
}

.du-summary-subtle-note {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 113, 227, 0.18);
    font-size: 0.76rem;
    line-height: 1.45;
    color: #607187;
}

.du-summary-microcards {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.du-summary-microcards-below {
    margin: 0 20px 0;
}

.du-mes-calendar-column .du-container.du-tool-ui-mes.mb-30 {
    margin-bottom: 8px !important;
}

.du-summary-microcard {
    border: 1px solid rgba(0, 113, 227, 0.11);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.52);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.du-summary-microcard-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #66758a;
}

.du-summary-microcard-value {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--text-color);
}

.du-tool-shell-mes {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    background: var(--du-card-bg);
    border: 1px solid var(--du-border);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
    padding: 24px 22px 18px;
}

.du-tool-shell-mes .du-container.du-tool-ui-mes {
    max-width: none;
    padding: 0;
    margin: 0;
}

.du-tool-shell-mes .du-calendar-area {
    margin-top: 10px;
    margin-bottom: 18px;
}

.du-month-hero-card {
    background: linear-gradient(140deg, #edf4ff 0%, #f6fbff 55%, #ffffff 100%);
    border: 1px solid rgba(18, 89, 170, 0.24);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(18, 57, 108, 0.1);
    padding: 30px 24px;
    margin-bottom: 30px;
    text-align: center;
}

.du-month-hero-text {
    margin: 0 0 8px;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.45;
    color: #355c88;
    font-weight: 600;
}

.du-month-hero-count {
    margin: 0;
    font-size: clamp(2.2rem, 7.2vw, 4.6rem);
    font-weight: 800;
    color: #0d47a1;
    line-height: 1.04;
}

@media (min-width: 1024px) {
    .container {
        max-width: 1000px !important;
    }
    .header-container {
        max-width: none !important;
        padding-left: clamp(16px, 2vw, 24px) !important;
        padding-right: clamp(16px, 2vw, 24px) !important;
    }
}

/* --- HERO SECTION --- */
.du-hero {
    text-align: center;
    margin-bottom: 20px;
    background-color: var(--du-card-bg);
    border: 1px solid var(--du-border);
    border-radius: 16px;
    padding: 25px 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.du-h1 {
    font-size: 1.8rem;
    color: var(--text-color);
    margin: 0 0 15px 0;
}

.du-answer-box {
    background-color: var(--light-bg);
    border-radius: 12px;
    padding: 15px 20px;
    display: inline-block;
    max-width: var(--layout-shell-max-width, 1000px);
    width: 100%;
    box-sizing: border-box;
}

.du-question {
    font-size: 1.1rem;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.du-answer {
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 500;
}

.du-highlight {
    color: var(--du-highlight);
    font-weight: 800;
}

/* Badge Geral */
.du-badge-warn {
    background-color: var(--warning-color);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.75rem;
}

/* --- BARRA DE CONTROLES --- */
.du-controls-bar {
    display: flex;
    flex-direction: column; /* Pilha vertical */
    gap: 15px;
    margin-bottom: 30px;
    background-color: var(--light-bg);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--du-border);
    align-items: center; /* Centraliza tudo */
}

/* Ligne 1: Navigation (Prev/Next/Up) */
.du-nav-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

/* Ajustes locais: preserva o estilo base de /calendario */
.du-nav-btn-fix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
}
.du-nav-btn-fix i {
    font-size: 1em;
}
/* CONTROLE D'AFFICHAGE DES LIBELLES RESPONSIVES */
/* Standard desktop: montre le long, cache le court */
/* On utilise des selecteurs composes pour garantir la specificite */
.du-nav-btn-fix .du-nav-desktop {
    display: inline-block !important;
}
.du-nav-btn-fix .du-nav-mobile {
    display: none !important;
}

/* Share do modo mes aparece apenas em mobile */
.du-mes-share-mobile {
    display: none;
}

.du-nav-advanced {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 90;
}

.du-nav-advanced.is-open {
    z-index: 1050;
}

.du-nav-advanced .du-nav-advanced-trigger-text {
    width: auto;
    min-width: 0;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    color: #1f4f8f;
    gap: 6px;
}

.du-nav-advanced .du-nav-advanced-trigger-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.du-nav-advanced-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(320px, 92vw);
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: var(--du-card-bg);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    padding: 14px;
    z-index: 1050;
}

.du-nav-advanced-backdrop,
.du-nav-advanced-modal-head,
.du-nav-advanced-modal-footer {
    display: none;
}

.du-nav-advanced-modal-body {
    display: block;
}

.du-nav-advanced-panel[hidden] {
    display: none !important;
}

.du-nav-advanced-panel .du-panel-intro {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--secondary-color);
}

.du-nav-advanced-panel .du-location-line {
    margin: 0 0 10px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #4b6283;
}

.du-nav-advanced-panel .du-city-picker-open {
    width: 100%;
    border: 1px solid #9fb5d6;
    background: #eef4ff;
    color: #1e3a66;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    margin: 0 0 12px;
}

.du-nav-advanced-panel .du-city-picker-open:hover {
    background: #e2edff;
    border-color: #84a2cf;
}

.du-nav-advanced-panel .du-city-picker-open + .du-options-content-panel {
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    margin-top: 4px;
    padding-top: 12px;
}

.du-nav-advanced-panel .du-options-content-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.du-nav-advanced-panel .du-option-toggle {
    margin: 0;
}

.du-nav-advanced-panel .du-option-toggle .du-toggle-text {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.du-nav-advanced-panel .du-option-toggle.is-disabled {
    cursor: help;
    opacity: 1;
}

.du-nav-advanced-panel .du-option-toggle.is-disabled .du-toggle-text {
    color: #4b6283;
    font-weight: 600;
}

@media (min-width: 601px) {
    .nav-controls.nav-controls-wrapper.du-nav-controls-main {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible;
        min-width: 0;
    }

    .nav-controls.nav-controls-wrapper.du-nav-controls-main > * {
        min-width: 0;
    }

    .nav-controls.nav-controls-wrapper.du-nav-controls-main .nav-utility-icons {
        position: static;
        transform: none;
        margin-left: auto;
        padding-left: 12px;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        background: transparent;
        flex-shrink: 0;
    }

    body.dark-mode .nav-controls.nav-controls-wrapper.du-nav-controls-main .nav-utility-icons {
        border-left-color: rgba(255, 255, 255, 0.16);
    }
}

body.dark-mode .du-nav-advanced .du-nav-advanced-trigger-text {
    border-color: rgba(135, 169, 214, 0.45);
    background: linear-gradient(180deg, rgba(35, 48, 64, 0.95) 0%, rgba(31, 43, 58, 0.95) 100%);
    color: #d8e9ff;
}

body.dark-mode .du-nav-advanced-panel {
    border-color: rgba(132, 165, 210, 0.3);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
}

body.dark-mode .du-nav-advanced-panel .du-location-line {
    color: #b9c5d8;
}

body.dark-mode .du-nav-advanced-panel .du-city-picker-open {
    background: rgba(41, 63, 94, 0.45);
    border-color: rgba(148, 163, 184, 0.45);
    color: #dbe8ff;
}

body.dark-mode .du-nav-advanced-panel .du-city-picker-open:hover {
    background: rgba(59, 86, 126, 0.5);
}

body.dark-mode .du-nav-advanced-panel .du-city-picker-open + .du-options-content-panel {
    border-top-color: rgba(148, 163, 184, 0.28);
}

body.dark-mode .du-nav-advanced-panel .du-option-toggle.is-disabled .du-toggle-text {
    color: #b7c8de;
}

body.dark-mode .du-option-toggle.is-disabled .du-toggle-slider,
body.dark-mode .du-option-toggle.is-disabled input:checked + .du-toggle-slider {
    background-color: #5f728a;
    border-color: #8aa0bc;
}

.du-user-dates-slot {
    margin: 14px 0 16px;
}

.du-user-dates-slot .custom-exclusion-list {
    margin-top: 10px;
}

.du-container.du-tool-ui-mes {
    width: min(100%, 1000px);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 0 10px;
}


/* --- TOGGLE SWITCH (Estilo) --- */
.du-toggle-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
}

/* Novo Wrapper para o Toggle Compacto (Posicionado abaixo do calendario) */
.du-toggle-compact-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 15px; /* Espace entre le card et le toggle */
    margin-bottom: 20px;
    width: 100%;
}

.du-options-collapsible {
    display: flex;
    justify-content: flex-start;
    margin-top: 15px;
    margin-bottom: 20px;
    width: 100%;
}

.du-mode-mes + .du-options-collapsible {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: stretch;
}

.du-mode-mes + .du-options-collapsible .du-options-details {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.du-options-details {
    width: auto;
    min-width: min(520px, 100%);
    background: var(--du-card-bg);
    border: 1px solid var(--du-border);
    border-radius: 10px;
    padding: 10px 14px;
}
.du-options-details summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--secondary-color);
    font-weight: 600;
    user-select: none;
}
.du-options-details summary::-webkit-details-marker {
    display: none;
}
.du-options-plus {
    color: var(--primary-color);
    font-weight: 700;
}
.du-options-details[open] > summary {
    margin-bottom: 10px;
}
.du-options-content {
    display: grid;
    gap: 10px;
}

body.dark-mode .du-options-details {
    background: #26292d;
    border-color: #454b52;
}

body.dark-mode .du-options-details summary {
    color: #d7dce2;
}

body.dark-mode .du-options-plus {
    color: #8ab4f8;
}

body.dark-mode .du-toggle-label {
    color: #d7dce2;
}

body.dark-mode .du-tool-shell-mes {
    background: #1f2328;
    border-color: #40464f;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

body.dark-mode .du-month-hero-card {
    background: linear-gradient(145deg, rgba(18, 34, 53, 0.95) 0%, rgba(25, 43, 66, 0.95) 100%);
    border-color: rgba(122, 170, 233, 0.45);
}

body.dark-mode .du-month-hero-text {
    color: #a9ccfa;
}

body.dark-mode .du-month-hero-count {
    color: #7be495;
}

body.dark-mode .du-mode-mes .du-month-card {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* Dark mode : header reste transparent, hairline plus claire, titre clair,
   badge vert sombre (cohérent avec le pattern BR). */
body.dark-mode .du-month-header {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}
body.dark-mode a.du-month-card:hover .du-month-header,
body.dark-mode a.du-month-card:focus-visible .du-month-header {
    background: transparent;
}
body.dark-mode .du-month-title {
    color: #f5f5f7;
}
body.dark-mode .du-month-title__name,
body.dark-mode .du-month-title__year {
    color: inherit;
    background: transparent;
    box-shadow: none;
}
body.dark-mode .du-month-count {
    background: rgba(123, 228, 149, 0.16);
    color: #7be495;
    box-shadow: none;
}

.btn-custom-pdf.is-loading {
    animation: duPdfPulse 1s ease-in-out infinite;
}

.btn-custom-pdf.is-loading .icon {
    display: inline-block;
    animation: duPdfSpin 1.1s linear infinite;
}

.nav-icon-btn.pdf-icon.is-loading {
    animation: duPdfPulse 1s ease-in-out infinite;
}

.nav-icon-btn.pdf-icon.is-loading svg {
    animation: duPdfSpin 1.1s linear infinite;
    transform-origin: center;
}

@keyframes duPdfPulse {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
    100% { filter: brightness(1); }
}

@keyframes duPdfSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.du-toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-color);
    user-select: none;
}

.du-toggle-label input { display: none; }

.du-toggle-slider {
    position: relative;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    height: 24px;
    flex: 0 0 46px;
    flex-shrink: 0;
    background-color: #ccc;
    border-radius: 34px;
    transition: .4s;
}

.du-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}

input:checked + .du-toggle-slider { background-color: var(--primary-color); }
input:checked + .du-toggle-slider:before { transform: translateX(22px); }

.du-option-toggle.is-disabled input:checked + .du-toggle-slider {
    background-color: #b7c7db;
    border: 1px solid #98abc6;
}

.du-option-toggle.is-disabled .du-toggle-slider {
    background-color: #c8d5e3;
    border: 1px solid #a2b4cc;
}

.du-option-toggle.is-disabled .du-toggle-slider:before {
    background-color: #eef3f8;
}

.du-option-toggle.is-disabled input {
    pointer-events: none;
}


/* --- AIRE DU CALENDRIER --- */
.du-calendar-area {
    display: grid;
    gap: 20px;
    margin-bottom: 40px;
    width: 100%; /* Garantit largeur totale */
}

/* Mode Annee: Grille de 3 colonnes FIXE (desktop) */
.du-mode-ano {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    padding-left: var(--du-year-dyn-pad-left, var(--du-year-shell-min-pad, 8px));
    padding-right: var(--du-year-dyn-pad-right, var(--du-year-shell-min-pad, 8px));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 14px;
}

.du-mode-ano .du-month-card {
    height: 100%;
}

/* Modo Mês: Centralizado */
.du-mode-mes {
    display: block;
    width: 100%;
}

.du-mode-mes .du-month-card {
    max-width: none;
    width: 100%;
    padding: 14px;
    background: #ffffff;
    border-color: var(--du-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* DESKTOP: Hauteur fixe plus grande pour les jours en mode mois */
.du-mode-mes .du-day {
    height: auto;
    min-height: 64px;
    aspect-ratio: 1;
    font-size: 1.1rem;
    padding: 5px 2px 20px;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.du-mode-mes .du-day-number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    font-weight: 700;
}

.du-mode-mes .du-day-status {
    display: block;
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 4px;
    margin: 0;
    font-size: 0.66rem;
    line-height: 1.05;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.du-mode-mes .du-month-header {
    margin-bottom: 16px;
}

.du-mode-mes .du-days-header {
    margin-bottom: 8px;
}

.du-mode-mes .du-days-header,
.du-mode-mes .du-days-grid {
    gap: 6px;
}

/* Card do Mês */
.du-month-card {
    background-color: var(--du-card-bg);
    border: 1px solid var(--du-border);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    text-decoration: none; /* Caso seja link */
    color: inherit;
    position: relative;
    box-sizing: border-box; /* Empeche le padding de deborder */
    overflow: visible; /* Evita clipping de feriados em meses com lista maior */
    -webkit-tap-highlight-color: transparent;
}

/* Hover Effect para Links (Ano) */
.du-mode-ano a.du-month-card:hover,
.du-mode-ano a.du-month-card:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.14);
    cursor: pointer;
}

a.du-month-card:focus-visible {
    outline: 2px solid rgba(120, 130, 145, 0.35);
    outline-offset: 2px;
}

/* Header du mois (mode ano) — port direct du pattern contadordeprazo BR :
   surface blanche, titre "MOIS / ANNÉE" en MAJUSCULES dark text, hairline
   border-bottom, badge vert clair "X jours ouvrés" à droite. Abandon de la
   faixa verte solide qui polluait visuellement le grid de 12 cartes. */
.du-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 12px;
    padding: 0 0 8px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--du-border, rgba(0, 0, 0, 0.08));
    border-radius: 0;
    box-shadow: none;
    text-transform: none;
    gap: 10px;
}
.du-mode-mes .du-month-header {
    margin-bottom: 16px;
}

.du-month-title {
    font-weight: 700;
    font-size: 1rem;
    color: #1d1d1f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.1;
    min-width: 0;
}
/* Réordonne via flex : on veut "JANVIER / 2026" alors que la markup est
   <__year><__name>. order:1 met le nom en premier ; le séparateur "/" est
   injecté via ::after sur le name. */
.du-month-title__name {
    order: 1;
    font-weight: 700;
    text-transform: uppercase;
    color: inherit;
    letter-spacing: inherit;
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
.du-month-title__name::after {
    content: " /";
    color: inherit;
    opacity: 0.65;
    margin-left: 2px;
}
.du-month-title__year {
    order: 2;
    font-weight: 700;
    color: inherit;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    font-variant-numeric: tabular-nums;
}

a.du-month-card:hover .du-month-title {
    text-decoration: none;
}
a.du-month-card:hover .du-month-header,
a.du-month-card:focus-visible .du-month-header {
    background: transparent;
}

/* Badge "X jours ouvrés" : pill vert clair (cohérent avec le code couleur
   des cellules ouvrées), texte vert foncé, comme le BR. */
.du-month-count {
    font-size: 0.78rem;
    background-color: var(--du-bg-business, #e8f5ea);
    color: var(--du-text-business, #2f7a3c);
    padding: 3px 10px;
    border-radius: 100px;
    font-weight: 600;
    box-shadow: none;
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
}

/* GRID: Header e Body Alinhados - CORREÇÃO DE ALINHAMENTO */
.du-days-header, .du-days-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* Evita estouro lateral */
    gap: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-items: stretch;
}

/* Ajuste fino para evitar vazamento lateral */
.du-days-grid {
    /* justify-content: center;  -> Já herdado acima */
}

.du-days-header {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--du-ink);
    margin-bottom: 10px;
    padding-bottom: 8px;
    align-items: center;
    justify-items: center;
    position: relative;
}
/* Faixa verte sous la ligne des en-têtes jours — aligne visuellement
   avec le header vert du card (même logique que la vue calendrier). */
.du-days-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #6fc87c;
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.7;
}

/* Garante alinhamento por coluna sem afetar os spans internos */
.du-days-header .du-dow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 0;
    text-align: center;
}

.du-dow-narrow {
    display: block;
    line-height: 1;
}

.du-dow-short {
    display: none;
    line-height: 1;
}

.du-day {
    position: relative;
    aspect-ratio: 1; /* Mantém quadrado */
    width: auto;
    min-width: 0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    cursor: default;
    border: 1px solid rgba(102, 124, 154, 0.18);
    box-sizing: border-box;
}

/* Mode année — 12 mini-calendriers : numéro du jour centré verticalement +
   micro-label du statut en position absolue en bas de la cellule. Identique
   à la logique du mode mois pour garder le numéro toujours centré. */
.du-mode-ano .du-day {
    padding: 0;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.du-mode-ano .du-day .du-day-number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
    font-weight: 700;
    line-height: 1;
    font-size: 0.95rem;
}
/* Mode ano : masque les libellés "JOUR OUVRÉ / SAMEDI / DIMANCHE" sous chaque
   cellule. Sur 12 cartes × 30 jours = ~360 labels redondants qui polluent le
   scan. La couleur de la cellule (vert ouvré / gris week-end / rouge férié)
   suffit. Pattern miroir de contadordeprazo BR.
   Le span reste dans le DOM pour l'accessibilité (lecteurs d'écran via le
   title de la cellule, qui est déjà rempli avec le même libellé). */
.du-mode-ano .du-day-status {
    display: none;
}
/* Pas de style distinct pour .du-day--important sur la cellule : l'état
   visuel reste celui du jour (ouvré vert / samedi-dimanche gris / férié rouge).
   La date commémorative est rendue uniquement dans la liste sous le calendrier
   via la classe .du-list-item--important. */

.du-day-status {
    display: none;
}

/* Couleurs des jours */
.du-day-business {
    background-color: var(--du-bg-business);
    color: var(--du-text-business);
    font-weight: 600;
}

.du-day-holiday {
    background-color: var(--du-bg-holiday);
    color: var(--du-text-holiday);
    font-weight: 700;
}

.du-day-weekend {
    background-color: var(--du-bg-weekend);
    color: var(--du-text-weekend);
}

/* Date importante / commémorative (Saint-Valentin, Chandeleur, Fête des Mères,
   Halloween, Épiphanie...) — elle décore un jour ouvré ou un week-end sans
   le transformer en férié. Visible dans les DEUX modes (année + mois) :
   - un petit point ambre au coin supérieur-gauche de la cellule (indicateur
     discret, présent partout pour repérer ces dates d'un coup d'œil) ;
   - en mode mois, le label sous le numéro prend la couleur ambre et affiche
     le nom de la date (ex. « Saint-Valentin »). */
/* Les dates commémoratives (Épiphanie, Chandeleur, Saint-Valentin, etc.)
   n'ont AUCUN style visuel sur la cellule : un jour ouvré reste vert avec
   « Jour ouvré », un samedi reste gris avec « Samedi », etc. Les dates
   commémoratives n'apparaissent QUE dans la liste sous le calendrier
   (avec la classe .du-list-item--important en ambre).
   La classe .du-day--important reste posée sur la cellule à titre sémantique
   (tooltip), mais ne reçoit pas de fond/dot/border distinct. */

body.dark-mode .du-day {
    border-color: rgba(153, 177, 205, 0.28);
}

body.dark-mode .du-day-weekend {
    font-weight: 600;
}

body.dark-mode .btn-action.btn-print {
    background-color: #0d6efd !important;
    border: 1px solid #0d6efd;
    color: #fff !important;
}

body.dark-mode .btn-action.btn-print:hover {
    background-color: #0b5ed7 !important;
    border-color: #0b5ed7;
}

body.dark-mode .nav-icon-btn.print-icon svg {
    fill: #d7dce2 !important;
}

.du-day-empty {
    min-width: 0;
}

/* Badges PF dans le calendrier - CACHE EN MODE VISUEL */
.du-badge-pf {
    display: none !important; /* RETIRE LE 'PF' DU VISUEL DU CALENDRIER */
}

/* Liste des jours feries sous le mois */
.du-month-holidays-list {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed var(--du-border);
    font-size: 0.8rem;
}

.du-month-holidays-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.du-month-holidays-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.du-list-day {
    font-weight: 700;
    color: var(--du-text-holiday);
    min-width: 20px; /* Alinhamento tabular */
}

.du-list-name {
    color: var(--text-color);
}
.du-list-name.is-pf {
    color: var(--du-text-pf);
}
.du-list-name small {
    font-size: 0.7em;
    opacity: 0.8;
    margin-left: 4px;
    text-transform: uppercase;
}

/* Palette uniforme du site pour les listes sous le calendrier :
   férié → rouge (default via .du-text-holiday), date commémorative → gris. */
.du-month-holidays-list li.du-list-item--important .du-list-day,
.du-month-holidays-list li.du-list-item--important .du-list-name {
    color: #555;
}
body.dark-mode .du-month-holidays-list li.du-list-item--important .du-list-day,
body.dark-mode .du-month-holidays-list li.du-list-item--important .du-list-name {
    color: #9ca3af;
}

/* --- LEGENDAS (Estilo Tela) --- */
.du-legend-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    padding: 10px;
    background-color: var(--light-bg);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-color);
}

.du-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.du-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.du-dot-business { background-color: var(--du-bg-business); border: 1px solid #cce5d0; }
.du-dot-weekend { background-color: var(--du-bg-weekend); border: 1px solid #ddd; }
.du-dot-holiday { background-color: var(--du-bg-holiday); border: 1px solid #fad2cf; }
.du-dot-pf { background-color: var(--du-bg-pf); border: 1px solid #ffe0b2; }


/* --- CONTAINER D'OUTILS UNIFIE --- */
.du-tools-container {
    background-color: var(--light-bg);
    border: 1px solid var(--du-border);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

/* Regroupement des boutons */
.du-actions-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Reutilise le style de grand bouton */
.du-action-btn-large {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--du-card-bg);
    border: 1px solid var(--du-border);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.du-action-btn-large:hover {
    background-color: var(--light-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Legende/Explication dans la boite d'outils */
.du-explainer-text {
    font-size: 0.9rem;
    color: var(--secondary-color);
    background: rgba(255,255,255,0.5);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px dashed var(--du-border);
}

/* Bouton 5e jour ouvrable (mode mois) - style generique ancien */
.btn-quinto-dia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #28a745;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.1s;
    border: 1px solid #218838;
}
.btn-quinto-dia:hover {
    background-color: #218838;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.btn-quinto-dia .icon { font-size: 1.1em; }


/* --- LIGNE DU FOOTER DE CARD (Jours feries + bouton action) --- */
.du-card-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centraliza verticalmente */
    gap: 20px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--du-border);
    flex-wrap: wrap; /* Garantit retour a la ligne si necessaire */
}

/* Container de la liste de jours feries dans la row */
.du-footer-holidays {
    flex: 1; /* Occupe l'espace disponible */
    min-width: 200px;
}

/* Reset de margens da lista quando dentro do footer-row para evitar borda dupla */
.du-card-footer-row .du-month-holidays-list {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Conteneur du bouton d'action */
.du-footer-actions {
    flex-shrink: 0; /* Empeche le bouton de retrecir */
}

/* Bouton d'action bleu et accrocheur - CORRIGE POUR NE PAS DEBORDER ET CASSER LA LIGNE */
.btn-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--du-highlight); /* Azul forte do tema */
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    /* FIX DE OVERFLOW */
    white-space: normal; /* Permet retour a la ligne si le texte est tres long */
    text-align: center;
    max-width: 100%; /* Empeche de depasser le parent */
    line-height: 1.3;
    box-sizing: border-box; /* FIX: Evita que padding + width 100% estoure */
    word-break: break-word; /* FIX: Quebra palavras longas se necessário */
}

.btn-card-action:hover {
    background-color: #005bb5; /* Azul mais escuro no hover */
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}

.btn-card-action i {
    font-size: 0.9em;
}

body.dark-mode .du-mode-mes .btn-card-action {
    background-color: #2ea44f !important;
    color: #fff !important;
    border-color: #2ea44f;
}

body.dark-mode .du-mode-mes .btn-card-action:hover {
    background-color: #278f45 !important;
    color: #fff !important;
}


/* --- SECTION DE DETAILS (RESUME MENSUEL) --- */
.du-month-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.du-details-card {
    background-color: var(--du-card-bg);
    border: 1px solid var(--du-border);
    border-radius: 12px;
    padding: 20px;
}

.du-details-card h3 {
    margin-top: 0;
    color: var(--primary-color);
    font-size: 1.2rem;
    border-bottom: 1px solid var(--du-border);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Lista de Stats com Estilo de Tabela */
.du-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.du-stats-list li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--du-border);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.du-stats-list li:last-child {
    border-bottom: none;
}

/* Separateur de section dans la liste */
.du-stats-divider {
    margin-top: 15px;
    padding-bottom: 5px !important;
    border-bottom: 2px solid var(--du-border) !important;
    font-size: 0.9rem;
    color: var(--secondary-color) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Item de Evento na Lista */
.du-stats-event {
    justify-content: flex-start !important;
    gap: 15px;
}

.du-event-date {
    background-color: var(--light-bg);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
    color: var(--primary-color);
}

.du-event-name {
    flex-grow: 1;
}

.du-event-type {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #eee;
    color: #666;
}

/* Card Actions (Quinto Dia Útil) */
.du-card-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.du-btn-feature {
    display: inline-block;
    margin-top: 15px;
    background-color: var(--primary-color);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

.du-btn-feature:hover {
    background-color: var(--hover-color);
    text-decoration: none;
    color: #fff;
}


/* --- FAQ ET CONTENU --- */
.du-content {
    background-color: var(--du-card-bg);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--du-border);
    margin-bottom: 40px;
}

.du-content h2 {
    color: var(--primary-color);
    margin-top: 0;
}

.du-faq-grid {
    display: grid;
    gap: 15px;
}

.du-faq-item {
    border: 1px solid var(--du-border);
    border-radius: 8px;
    overflow: hidden;
}

.du-faq-item summary {
    background-color: var(--light-bg);
    padding: 15px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-color);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.du-faq-item summary::-webkit-details-marker { display: none; }
.du-faq-item summary::after { content: '+'; font-size: 1.2rem; font-weight: bold; }
.du-faq-item[open] summary::after { content: '-'; }

.du-faq-item div {
    padding: 15px;
    border-top: 1px solid var(--du-border);
    background-color: var(--du-card-bg);
    color: var(--secondary-color);
    line-height: 1.6;
}

.du-editorial-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 16px 0 18px;
    border: 1px solid var(--du-border);
    border-radius: 10px;
    background: var(--du-card-bg);
}

.du-editorial-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.du-editorial-table th,
.du-editorial-table td {
    border: 1px solid var(--du-border);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.du-editorial-table thead th {
    background: #f6f8fb;
    color: #1f2f46;
    font-weight: 700;
}

.du-editorial-table tbody th {
    font-weight: 600;
    color: var(--text-color);
    background: #fbfcfe;
}

.du-editorial-table tbody tr:nth-child(even) td {
    background: #fcfdff;
}

body.dark-mode .du-editorial-table-wrap {
    border-color: #3f4652;
    background: #1d222b;
}

body.dark-mode .du-editorial-table th,
body.dark-mode .du-editorial-table td {
    border-color: #3f4652;
}

body.dark-mode .du-editorial-table thead th {
    background: #262d39;
    color: #dbe2ee;
}

body.dark-mode .du-editorial-table tbody th {
    background: #232a34;
    color: #d7dce2;
}

body.dark-mode .du-editorial-table tbody tr:nth-child(even) td {
    background: #202733;
}


/* --- STYLES VISUELS POUR ELEMENTS CACHES HORS PRINT --- */
.du-print-header,
.du-print-pf-container {
    display: none; /* Apparait uniquement a l'impression */
}


/* --- RESPONSIVIDADE --- */
@media (max-width: 1024px) {
    .du-mes-layout {
        flex-direction: column;
        gap: 14px;
    }

    .du-mes-calendar-column {
        order: 1;
    }

    .du-mes-details-column {
        order: 2;
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* Bump 26.8.0.16 : mobile mois mode — cache colonne details (resume/stats lateral)
   et la colonne Semaine ISO du tableau. User a reporte que la "colonne tableau" cassait
   le layout en mobile. En <=768px, seulement calendrier visible en colonne unique. */
@media (max-width: 768px) {
    body.tool-jours-ouvres .du-mes-details-column,
    body.tool-jours-ouvrables .du-mes-details-column {
        display: none !important;
    }
    /* Calendrier mode mois : cache colonne semaine ISO de la grille horizontale. */
    body.tool-jours-ouvres .du-days-header > :first-child,
    body.tool-jours-ouvrables .du-days-header > :first-child,
    body.tool-jours-ouvres .du-week-row > :first-child,
    body.tool-jours-ouvrables .du-week-row > :first-child,
    body.tool-jours-ouvres .du-cal-week,
    body.tool-jours-ouvrables .du-cal-week {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* CONTROLE D'AFFICHAGE DES LIBELLES (MOBILE) - SURCHARGE FORCEE */
    .du-nav-btn-fix .du-nav-desktop {
        display: none !important;
    }
    .du-nav-btn-fix .du-nav-mobile {
        display: inline-block !important;
    }

    /* Grille du calendrier (annee) -> 1 colonne en mobile */
    .du-mode-ano {
        grid-template-columns: 1fr;
    }
    
    /* Reduction du padding dans le card du mois en mobile */
    .du-mode-mes .du-month-card {
        padding: 10px; /* Encore plus compact */
        max-width: 100%; /* Empeche le debordement */
        box-sizing: border-box;
    }
    
    .du-mode-mes .du-day {
        /* Bump 26.8.0.21 : item 2 du feedback — avant (26.8.0.19) avait aspect-ratio:1
           qui laissait cells carres parfaits mais trop petits (~42px en mobile 360).
           Avant cela (26.8.0.18) avait min-height:64 qui rendait cells etires.
           Maintenant: min-height:52px (bonne hauteur lisible) + sans aspect-ratio (laisse cells
           legerement plus hauts que larges, format naturel de calendrier traditionnel).
           Reference: equivalence visuelle avec mode annee que user a approuve. */
        height: auto !important;
        aspect-ratio: auto !important;
        min-height: 52px !important;
        max-height: none !important;
        font-size: 1rem;
        padding: 0;
        justify-content: center;
        align-items: center;
    }

    .du-mode-mes .du-day .du-day-number {
        font-size: 1.05rem !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -52%) !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    /* Bump 26.8.0.21 item 2 : month-card padding reduzido em mobile pra
       maximizar espaco dos cells no modo mes (era 10px, agora 8px). */
    .du-mode-mes .du-month-card {
        padding: 8px !important;
    }

    .du-mode-mes .du-day .du-day-status {
        display: none !important;
    }
    
    /* Empeche la grille de deborder de l'ecran */
    .du-days-header, .du-days-grid {
        gap: 2px; /* Gap menor em mobile */
    }

    .du-card-footer-row {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .du-footer-holidays {
        min-width: 100%;
    }
    
    .du-footer-actions {
        width: 100%;
    }
    
    .btn-card-action {
        width: 100%; /* Bouton full width en mobile */
        max-width: 100%;
        display: flex;
    }
    
    .du-month-details {
        grid-template-columns: 1fr;
    }
    
    .du-stats-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .du-stats-list li span:last-child {
        align-self: flex-end;
    }
}

@media (min-width: 640px) {
    .du-dow-narrow {
        display: none;
    }

    .du-dow-short {
        display: inline-block;
    }
}

/* --- IMPRESSION (Mode Clair et Propre) --- */
@media print {
    /* Masquer elements de navigation et UI inutiles */
    .site-header, 
    .site-footer, 
    .du-controls-bar,
    .du-toggle-row,
    .du-toggle-compact-wrapper,
    .du-options-collapsible,
    .nav-controls,
    .tool-actions, 
    .action-buttons-container,
    .related-tools-section,
    .tool-aux-wrapper, /* Cache resume detaille et dates importantes supplementaires */
    .article-wrapper,
    .howto-wrapper,
    .faq-section,
    .serp-wrapper,
    .no-print {
        display: none !important;
    }
    
    /* Afficher le header d'impression */
    .du-print-header {
        display: block !important;
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 10px;
        border-bottom: 2px solid #000;
    }
    
    .du-print-header h1 {
        font-size: 24pt;
        margin: 0;
        color: #000;
        text-transform: uppercase;
    }
    
    .du-print-header p {
        font-size: 12pt;
        margin-top: 5px;
        color: #555;
    }

    /* Mostrar legenda de PF se necessário */
    .du-print-pf-container {
        display: block !important;
        margin-top: 10px;
        font-size: 10pt;
        font-style: italic;
        color: #666;
        text-align: center;
    }

    /* Ajustes Gerais de Layout */
    body {
        background-color: #fff !important;
        color: #000 !important;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 11pt;
    }

    .du-container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Calendrier */
    .du-calendar-area {
        gap: 15px;
        page-break-inside: avoid;
    }
    
    /* GRILLE D'IMPRESSION - TOUJOURS 3 COLONNES EN MODE ANNEE */
    .du-mode-ano {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Cards */
    .du-month-card, 
    a.du-month-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        text-decoration: none !important;
        color: #000 !important;
        break-inside: avoid;
    }
    
    .du-month-header {
        border-bottom: 1px solid #000 !important;
    }
    
    .du-month-title {
        color: #000 !important;
        font-size: 12pt !important;
    }
    
    .du-month-count {
        background: #eee !important;
        color: #000 !important;
        border: 1px solid #ccc;
    }
    
    /* Couleurs a haut contraste pour impression N&B */
    .du-day-business {
        background-color: #fff !important; /* Branco */
        color: #000 !important;
    }
    
    .du-day-weekend {
        background-color: #f0f0f0 !important; /* Cinza claro */
        color: #666 !important;
    }
    
    .du-day-holiday {
        background-color: #ddd !important; /* Cinza médio */
        color: #000 !important;
        font-weight: 800 !important;
        border: 1px solid #999;
    }
    
    /* Footer du card avec jours feries */
    .du-card-footer-row {
        border-top: 1px dotted #999 !important;
        margin-top: 8px;
        padding-top: 8px;
        display: block !important; /* Block pour occuper la largeur */
    }
    
    .du-footer-holidays {
        display: block !important;
    }
    
    .du-month-holidays-list ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .du-month-holidays-list li {
        font-size: 9pt !important;
    }
    
    /* URLs e Links */
    a { text-decoration: none !important; color: #000 !important; }
    a::after { content: "" !important; } /* Retire l'affichage des URLs */
}

/* Mobile hotfixes: espaco lateral consistente em Dias Uteis */
@media (max-width: 768px) {
    body.du-nav-advanced-open {
        overflow: hidden;
    }

    .glass-header-wrapper,
    .ads-area {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .tool-page-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .container,
    .du-container,
    .du-mes-layout,
    .du-tool-shell-mes,
    .nav-controls-wrapper,
    .dynamic-facts-box {
        width: auto;
        max-width: calc(100% - 24px);
        margin-left: 12px !important;
        margin-right: 12px !important;
        box-sizing: border-box;
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .du-container:not(.du-tool-ui-mes) {
        padding: 12px;
    }

    .du-container.du-tool-ui-mes {
        padding: 0;
    }

    .du-tool-shell-mes {
        padding: 14px 12px 10px;
    }

    .du-shell-hero {
        margin-bottom: 12px !important;
    }

    .du-nav-mobile-shell {
        margin-top: 10px !important;
        margin-bottom: 16px !important;
        padding: 10px 12px !important;
        border: 1px solid var(--du-border);
        border-radius: 12px;
        background: var(--du-card-bg);
        box-shadow: 0 6px 14px rgba(17, 24, 39, 0.08);
    }

    .du-nav-mobile-shell .nav-controls-wrapper {
        width: 100%;
        margin: 0 !important;
    }

    body.dark-mode .du-nav-mobile-shell {
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    }

    .du-container.du-tool-ui-mes {
        padding: 0 !important;
        border: none !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        margin-top: 0 !important;
        margin-bottom: 18px !important;
    }

    .du-container.du-tool-ui-mes #calendarArea {
        margin-bottom: 0;
    }

    .du-mes-layout {
        padding-left: 0;
        padding-right: 0;
    }

    .du-mes-details-column .du-glass-summary-card {
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .du-summary-microcards-below {
        margin: 0 0 4px;
    }

    .du-glass-summary-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .du-glass-summary-value {
        text-align: left;
        justify-self: start;
    }

    .du-toggle-label {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        column-gap: 10px;
        align-items: flex-start;
    }

    .du-toggle-slider {
        margin-top: 1px;
    }

    .du-toggle-text {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .du-month-hero-card {
        margin: 0 0 16px !important;
        padding: 20px 14px;
    }

    .du-month-hero-text {
        font-size: 0.98rem;
    }

    .du-month-hero-count {
        font-size: clamp(1.9rem, 9vw, 2.8rem);
    }

    .du-mode-mes .du-month-card {
        padding: 12px;
    }

    .tool-aux-wrapper {
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .tool-aux-wrapper .dynamic-facts-box {
        margin: 0 0 12px;
    }

    .nav-controls.nav-controls-wrapper.du-nav-controls-main {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center !important;
        justify-content: stretch !important;
        column-gap: 8px;
        row-gap: 8px;
        margin-bottom: 10px !important;
    }

    /* Bump 26.8.0.19 : item 3a — bouton annee "vers l'avant" cropping en ouvres
       mode annee. Cause: <div class="sr-only"> dans le grid container occupe
       1 grid cell, decalant le next button en row 2 col 1 avec largeur
       insuffisante (cell 1/3 ~110px contre label "2027" + chevron). Fix:
       retire sr-only du layout (position:absolute hors du flow). */
    .nav-controls.nav-controls-wrapper.du-nav-controls-main > .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .nav-controls.nav-controls-wrapper.du-nav-controls-main > .du-nav-btn-fix,
    .nav-controls.nav-controls-wrapper.du-nav-controls-main > .year-selector-container {
        order: initial;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 36px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .du-nav-btn-fix {
        padding: 0 6px !important;
        gap: 4px;
        font-size: 0.86rem;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
    }

    .du-nav-btn-fix i {
        font-size: 0.8rem;
    }

    .year-selector-container {
        min-width: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .year-selector-container select {
        width: 100%;
    }

    .current-year-display {
        font-size: 0.95rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .du-container.tool-ui {
        margin-top: 10px;
    }

    #calendarArea {
        margin-bottom: 18px;
    }

    .action-buttons-container {
        margin-top: 18px !important;
    }

    .nav-icon-btn.print-icon,
    .nav-icon-btn.pdf-icon {
        display: none;
    }

    .nav-utility-icons {
        order: initial;
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center !important;
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        gap: 6px;
        flex: 0 0 100%;
    }

    .du-nav-btn-fix .du-nav-mobile {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .du-nav-advanced .du-nav-advanced-trigger-label {
        display: none;
    }

    .du-nav-advanced .du-nav-advanced-trigger-text {
        width: 34px;
        min-width: 34px;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: none;
        color: var(--secondary-color);
    }

    .du-nav-advanced-backdrop {
        position: fixed;
        inset: 0;
        border: 0;
        margin: 0;
        padding: 0;
        background: rgba(15, 23, 42, 0.58);
        z-index: 10034;
        cursor: pointer;
    }

    .du-nav-advanced-backdrop[hidden] {
        display: none !important;
    }

    .du-nav-advanced-panel {
        /* Bump 26.8.0.21 : Tarefa B — top:70 era insuficiente. Stack header:
           micro-header 30px (top:0) + site-header-fixed 60px = 90px total.
           Agora top:100px = 90 + 10 breathing. Refn: includes/header.php:830. */
        position: fixed;
        left: 12px;
        right: 12px;
        top: calc(100px + env(safe-area-inset-top, 0px));
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 120px - env(safe-area-inset-bottom, 0px));
        border-radius: 16px;
        padding: 0;
        display: grid;
        grid-template-rows: auto 1fr;
        z-index: 10035;
        overflow: hidden;
    }

    .du-nav-advanced-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    }

    .du-nav-advanced-modal-title {
        margin: 0;
        font-size: 1rem;
        line-height: 1.2;
        font-weight: 800;
        color: var(--text-color);
    }

    .du-nav-advanced-close-top {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid rgba(15, 23, 42, 0.16);
        background: #fff;
        color: #334155;
        cursor: pointer;
        font-size: 1.15rem;
        line-height: 1;
    }

    .du-nav-advanced-modal-body {
        min-height: 0;
        overflow: auto;
        display: flex;
        flex-direction: column;
        padding: 14px 14px 0;
    }

    .du-nav-advanced-modal-footer {
        display: block;
        position: sticky;
        bottom: 0;
        margin: 14px -14px 0;
        border-top: 1px solid rgba(15, 23, 42, 0.12);
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--du-card-bg);
    }

    .du-nav-advanced-close-bottom {
        width: 100%;
        min-height: 44px;
        border-radius: 12px;
    }

    body.dark-mode .du-nav-advanced-modal-head,
    body.dark-mode .du-nav-advanced-modal-footer {
        border-color: rgba(148, 163, 184, 0.28);
    }

    body.dark-mode .du-nav-advanced-modal-footer {
        background: #0f172a;
    }

    body.dark-mode .du-nav-advanced-close-top {
        background: #0f172a;
        border-color: #334155;
        color: #e2e8f0;
    }

    .du-mes-share-mobile {
        display: flex !important;
        position: static;
        transform: none;
    }
}

/* ==========================================================================
   HOTFIX v2026-04-19: Barre de navigation & panneau Personnaliser
   --------------------------------------------------------------------------
   Root cause: calendrier.css loaded AFTER jours-ouvres.css applique
   `.nav-utility-icons { position: absolute; transform: translateY(-50%); right: 0; top: 50% }`.
   Conséquences :
   1) Sur mobile, les icônes sortent du flux grid et se superposent au calendrier.
   2) Le `transform` crée un nouveau containing block pour `.du-nav-advanced-panel`
      qui est en `position: fixed` → le panneau s'ancre au conteneur transformé
      (au milieu/droite de la barre), donc apparaît "sous le calendrier" au lieu
      d'être un dropdown flottant ou un modal plein écran.
   Fix : on neutralise `position`, `transform`, `top`, `right` sur `.nav-utility-icons`
   dans ce tool, pour que `.du-nav-advanced-panel` (fixed) s'ancre au viewport
   et que les icônes restent dans le flux normal (flex desktop / grid mobile).
   Scope élevée via body.tool-jours-ouvres pour battre calendrier.css.
   ========================================================================== */
body.tool-jours-ouvres .nav-controls.nav-controls-wrapper.du-nav-controls-main .nav-utility-icons {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
}

/* Toolbar (mode mes) : pills à gauche, utility icons à droite, sur la même
   ligne. Wrap si pas de place. Pattern identique à .cal-toolbar__row dans
   calendrier/mois.php (consistance visuelle entre outils). */
@media (min-width: 769px) {
    body.tool-jours-ouvres .nav-controls.nav-controls-wrapper.du-nav-controls-main {
        position: relative !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    body.tool-jours-ouvres .nav-controls.nav-controls-wrapper.du-nav-controls-main > .nav-utility-icons {
        position: static !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        margin-left: auto !important;
        display: flex;
        align-items: center;
        gap: 6px;
    }
}

/* Le conteneur parent du panneau DOIT rester position: relative pour ancrer
   le dropdown absolu (desktop) et ne pas créer de stacking context hostile. */
body.tool-jours-ouvres .du-nav-advanced {
    position: relative !important;
    transform: none !important;
}

/* Empêcher tout ancêtre flex-item de clipper le dropdown absolu. */
body.tool-jours-ouvres .nav-controls.nav-controls-wrapper.du-nav-controls-main,
body.tool-jours-ouvres .nav-controls.nav-controls-wrapper.du-nav-controls-main .nav-utility-icons {
    overflow: visible !important;
}

/* Desktop : le panneau dropdown s'ancre à `.du-nav-advanced`, z-index > chrome. */
@media (min-width: 769px) {
    body.tool-jours-ouvres .du-nav-advanced-panel {
        z-index: 10050;
    }
}

/* Mobile : le panneau est en position: fixed plein écran. On force l'ancrage
   au viewport (et non à un ancêtre transformé), et on garantit le z-index
   au-dessus de tous les éléments (calendrier, header fixe, etc.). */
@media (max-width: 768px) {
    body.tool-jours-ouvres .du-nav-advanced-panel {
        /* Bump 26.8.0.21 : Tarefa B — top 70 → 100 (header stack 30+60+10). */
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: calc(100px + env(safe-area-inset-top, 0px)) !important;
        z-index: 10050 !important;
    }
    body.tool-jours-ouvres .du-nav-advanced-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10049 !important;
    }

    /* Sécurité : sur mobile, la grille de nav ne doit JAMAIS être recouverte
       par les icônes utilitaires en absolute. On réaffirme la disposition en
       ligne complète (grid-column: 1/-1) héritée de la règle précédente. */
    body.tool-jours-ouvres .nav-controls.nav-controls-wrapper.du-nav-controls-main .nav-utility-icons {
        grid-column: 1 / -1 !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-left: 0 !important;
    }
}

/* =====================================================================
   Bump 26.8.0.19 : audit + fix dark mode missing variants (item 2b/3c).
   User reportou "varios elementos sem modo dark" no jours-ouvres mes/ano.
   Cobre: .du-month-card, .du-month-title, .cm-tool-actions (duplicada
   neste arquivo sem dark), .du-day*, du-list-item.
   ===================================================================== */
body.dark-mode .du-mode-mes .du-month-card,
body.dark-mode .du-mode-ano .du-month-card,
body.dark-mode .du-month-card {
    background: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f5f5f7 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32) !important;
}
body.dark-mode .du-month-title,
body.dark-mode .du-month-title__year,
body.dark-mode .du-month-title__name {
    color: #f5f5f7 !important;
}
body.dark-mode .du-month-count {
    color: #cbd5e1 !important;
}
body.dark-mode .du-month-header {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode .du-days-header,
body.dark-mode .du-days-header .du-dow {
    color: #cbd5e1 !important;
}
body.dark-mode .du-days-header::after {
    background: #34d399 !important;
    opacity: 0.6;
}
body.dark-mode .du-list-day {
    color: #cbd5e1 !important;
}
body.dark-mode .du-list-name {
    color: #f5f5f7 !important;
}
body.dark-mode .du-list-item--holiday .du-list-name {
    color: #ff9a94 !important;
}
body.dark-mode .du-list-item--important .du-list-name {
    color: #fbbf24 !important;
}
body.dark-mode .du-month-holidays-list ul {
    background: transparent !important;
}
body.dark-mode .du-glass-summary-card,
body.dark-mode .glass-summary-card {
    background: linear-gradient(180deg, rgba(28, 28, 30, 0.85) 0%, rgba(20, 20, 22, 0.92) 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f5f5f7 !important;
}
body.dark-mode .du-glass-summary-title,
body.dark-mode .glass-summary-title {
    color: #f5f5f7 !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
body.dark-mode .du-glass-summary-label,
body.dark-mode .glass-summary-label {
    color: #aeaeb2 !important;
}
body.dark-mode .du-glass-summary-value,
body.dark-mode .glass-summary-value {
    color: #f5f5f7 !important;
}
/* Override pra duplicate .cm-tool-actions deste arquivo (linha 349 sem dark) */
body.dark-mode .cm-tool-actions {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .cm-tool-actions__head { color: #aeaeb2 !important; }
body.dark-mode .cm-tool-actions__buttons .btn-action {
    background: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f5f5f7 !important;
}
body.dark-mode .cm-tool-actions__buttons .btn-action:hover,
body.dark-mode .cm-tool-actions__buttons .btn-action:focus-visible {
    background: #2c2c2e !important;
    border-color: rgba(100, 177, 255, 0.4) !important;
    color: #f5f5f7 !important;
}
body.dark-mode .cm-tool-actions__label strong { color: #f5f5f7 !important; }
body.dark-mode .cm-tool-actions__label small { color: #aeaeb2 !important; }

/* =====================================================================
   Bump 26.8.0.21 : completar audit dark-mode (Tarefa A) — jours-ouvres
   complete ce qui manquait en 26.8.0.19. User a reporte encore elements
   sans dark dans calendrier mois/annee.
   Cause racine: .du-day border (rgba(102,124,154,0.18)), .du-explainer-text,
   .du-summary-microcards bg (rgba(255,255,255,0.5)) sans variants dark.
   Reference: pattern jours-ouvres.css:2823 (du-month-card dark).
   Validation: toggle dark mode en /jours-ouvres-{m}-{y} → cells de la grille
   avec border visible + microcards avec fond lisible.
   ===================================================================== */
/* (1) du-day cell border light rgba(102,124,154,0.18) — reste faible en dark.
   Renforce avec border clair pour dark. */
body.dark-mode .du-day {
    border-color: rgba(255, 255, 255, 0.10);
}
/* (2) du-summary-microcards light bg rgba(255,255,255,0.5) — translucide
   sur fond blanc. Sur dark devient blanchatre et casse le contraste. */
body.dark-mode .du-summary-microcard {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .du-summary-microcard-value {
    color: #f5f5f7;
}
/* (3) du-glass-summary-row light bg rgba(255,255,255,0.5) — same issue. */
body.dark-mode .du-glass-summary-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .du-glass-summary-value {
    color: #f5f5f7;
}
body.dark-mode .du-glass-summary-label {
    color: #aeaeb2;
}
/* (4) du-summary-important-dates h4 light #3a4f6f — peu de contraste en dark. */
body.dark-mode .du-summary-important-dates h4 {
    color: #cbd5e1;
}
body.dark-mode .du-summary-important-dates li {
    color: #f5f5f7;
}
body.dark-mode .du-summary-subtle-note {
    color: #aeaeb2;
}
body.dark-mode .du-important-date {
    color: #64b5ff;
}
/* (5) du-explainer-text bg rgba(255,255,255,0.5) — same issue, bien que
   ce soit zone moins visible. */
body.dark-mode .du-explainer-text {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #aeaeb2;
}
/* (6) du-glass-summary-title light color = primary (bleu) — en dark devient
   bleu fonce peu lisible sur fond card sombre. Force bleu clair. */
body.dark-mode .du-glass-summary-title {
    color: #64b5ff;
}
body.dark-mode .du-glass-summary-title i {
    color: #64b5ff;
}