/* ════════════════════════════════════════════════════════════════
   PROGRESS BAR POPUP — "Calcul de présence" — V2 premium compact
   Fichier : wwwroot/css/educated-progress-bar.css
   ════════════════════════════════════════════════════════════════ */

/* ── Bloc titre — icône + titre + sous-titre + timer ────────────── */
.labelprogress {
    margin-bottom: 18px !important;
}

/* Neutraliser l'espace vide généré par le form-layout XAF */
dxbl-form-layout.dxbl-fl:has(.labelprogress) {
    padding: 0 !important;
}

    dxbl-form-layout.dxbl-fl:has(.labelprogress) .dxbl-row {
        margin: 0 !important;
        gap: 0 !important;
    }

    dxbl-form-layout.dxbl-fl:has(.labelprogress) dxbl-form-layout-item {
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    dxbl-form-layout.dxbl-fl:has(.labelprogress) .dxbl-fl-ctrl {
        padding: 0 !important;
    }

/* Neutraliser le fond gris natif des groupes/formulaires XAF */
.dxbl-fl:has(.labelprogress),
.dxbl-fl-group:has(.labelprogress),
dxbl-form-layout-group:has(.labelprogress),
.dxbl-fl-ctrl:has(.labelprogress),
.dxbl-fl-ctrl-nc:has(.labelprogress) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.detail-view-content:has(.labelprogress) {
    padding: 20px 22px !important;
    /* Etait "#fff" en dur : un cadre blanc restait blanc en theme sombre,
       d'ou le lisere clair autour de la carte. Transparent laisse le fond
       de la boite de dialogue passer, donc le popup suit le theme. */
    background: transparent !important;
}

.pcalc-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.pcalc-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--brand-soft, rgba(2,165,183,.10)) !important;
    color: var(--brand, #02A5B7) !important;
}

.pcalc-texts {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.pcalc-title {
    font-family: var(--font-body, "Geist", system-ui, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--ink-0, #0F172A) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.005em !important;
}

.pcalc-subtitle {
    font-family: var(--font-body, "Geist", system-ui, sans-serif) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: var(--ink-3, #94A3B8) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ── Badge timer — plus discret, style "chip" minimal ────────────── */
.pcalc-timer {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #F8FAFC !important;
    border: 1px solid #EEF1F5 !important;
    color: var(--ink-2, #64748B) !important;
    flex-shrink: 0 !important;
}

    .pcalc-timer svg {
        opacity: .55 !important;
        width: 11px !important;
        height: 11px !important;
    }

.pcalc-timer-value {
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}

.pcalc-timer.pcalc-timer-done {
    background: var(--tint-emerald-bg, #D0F4E2) !important;
    border-color: transparent !important;
    color: var(--tint-emerald-fg, #059669) !important;
}

/* ── Barre de progression ────────────────────────────────────────── */
dxbl-progress-bar.dxbl-progress-bar-horizontal {
    display: block !important;
    width: 100% !important;
}

.dxbl-progress-bar-container.dxbl-progress-bar-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
}

.dxbl-progress-bar-track-container {
    position: relative !important;
    width: 100% !important;
    height: 7px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: #EEF1F5 !important;
}

.dxbl-progress-bar-track {
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.dxbl-progress-bar-indicator {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: var(--gradient-brand, linear-gradient(90deg, #28C3D7 0%, #02A5B7 100%)) !important;
    transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

    .dxbl-progress-bar-indicator::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%) !important;
        background-size: 200% 100% !important;
        animation: progress-shimmer 1.8s linear infinite !important;
    }

/* ── Mode indetermine ─────────────────────────────────────────────
   DevExpress n'expose pas de maximum et les rapports de progression
   emis depuis le Task.Run n'atteignent pas le rendu : la barre reste
   figee a 0 %. Quand la valeur ne bouge plus, le JS pose la classe
   .pcalc-indeterminate et le segment balaie la piste en continu.
   Des que la valeur repart, la classe tombe et la barre redevient
   chiffree sans autre changement.                                  */
.pcalc-indeterminate .dxbl-progress-bar-indicator {
    width: 38% !important;
    transition: none !important;
    animation: pcalc-indeterminate 1.35s cubic-bezier(.45, 0, .35, 1) infinite !important;
    background: linear-gradient(90deg, transparent 0%, var(--brand-light, #28C3D7) 30%, var(--brand, #02A5B7) 70%, transparent 100%) !important;
}

    /* Le reflet fixe ferait doublon avec le balayage. */
    .pcalc-indeterminate .dxbl-progress-bar-indicator::after {
        display: none !important;
    }

/* Le pourcentage fige n'a plus de sens : on masque le texte DevExpress
   et le JS ecrit "en cours" a la place dans .pcalc-wait. */
.pcalc-indeterminate .dxbl-progress-bar-label-container p {
    display: none !important;
}

.pcalc-wait {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--brand, #02A5B7) !important;
    letter-spacing: .01em !important;
}

@keyframes pcalc-indeterminate {
    0% {
        left: -40%;
    }

    100% {
        left: 102%;
    }
}

@keyframes progress-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.dxbl-progress-bar-label.dxbl-progress-bar-label-after {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 0 !important;
}

.dxbl-progress-bar-label-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: var(--brand-soft, rgba(2,165,183,.08)) !important;
}

    .dxbl-progress-bar-label-container svg {
        width: 11px !important;
        height: 11px !important;
        color: var(--brand, #02A5B7) !important;
        opacity: .75 !important;
    }

    .dxbl-progress-bar-label-container p {
        margin: 0 !important;
        font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--brand, #02A5B7) !important;
        font-variant-numeric: tabular-nums !important;
    }


/* ════════════════════════════════════════════════════════════════

/* ════════════════════════════════════════════════════════════════
   POPUP PARENT — largeur compacte + titre injecté
   Vraie structure DOM (confirmée) :
     dxbl-modal-dialog.xafPopup                     (conteneur, width
       forcée inline via dialog-css-style min 1200px — notre
       !important passe outre)
       └── .dxbl-modal-content
             ├── dxbl-popup-header.dxbl-modal-header
             │     └── .dxbl-modal-header-default
             │           └── .view-caption-root > .xaf-caption-container
             │                 └── span.xaf-view-caption-lg  ← VIDE côté
             │                     serveur (pas de CSS caché, aucun texte)
             ├── .dxbl-modal-body > .main > .main-content > .detail-view-content
             └── .dxbl-modal-footer (boutons OK/Annuler)
   ════════════════════════════════════════════════════════════════ */

.dxbl-modal-dialog:has(.labelprogress) {
    width: 480px !important;
    max-width: 92vw !important;
}

    .dxbl-modal-dialog:has(.labelprogress) .dxbl-modal-body {
        padding: 0 !important;
    }

    /* ── Titre injecté — la span existe mais est vide côté serveur ──── */
    .dxbl-modal-dialog:has(.labelprogress) .xaf-view-caption-lg {
        display: inline-block !important;
    }

/* ════════════════════════════════════════════════════════════════
   AJOUTS ACURGYM — compteur, etat termine, source serveur masquee
   ════════════════════════════════════════════════════════════════ */

/* Le <span> pousse par le serveur reste dans le DOM (source de verite)
   mais n'est plus affiche : l'en-tete en est la mise en forme. */
.labelprogress .pcalc-src {
    display: none !important;
}

/* Compteur "3 / 12" a gauche, pourcentage DevExpress a droite */
.dxbl-progress-bar-label.dxbl-progress-bar-label-after {
    justify-content: space-between !important;
    align-items: center !important;
}

.pcalc-count {
    font-family: var(--font-body, "Geist", system-ui, sans-serif) !important;
    font-size: 11.5px !important;
    color: var(--ink-3, #94A3B8) !important;
    font-variant-numeric: tabular-nums !important;
}

    .pcalc-count b {
        font-weight: 600 !important;
        color: var(--ink-2, #64748B) !important;
    }

/* ── Etat termine ───────────────────────────────────────────────── */
.pcalc-header.pcalc-done .pcalc-icon {
    background: var(--tint-emerald-bg, #D0F4E2) !important;
    color: var(--tint-emerald-fg, #059669) !important;
}

.detail-view-content:has(.pcalc-header.pcalc-done) .dxbl-progress-bar-indicator {
    background: linear-gradient(90deg, #34D399 0%, #10B981 100%) !important;
}

    /* plus de reflet anime une fois le traitement fini */
    .detail-view-content:has(.pcalc-header.pcalc-done) .dxbl-progress-bar-indicator::after {
        display: none !important;
    }

.detail-view-content:has(.pcalc-header.pcalc-done) .dxbl-progress-bar-label-container {
    background: var(--tint-emerald-bg, #D0F4E2) !important;
}

    .detail-view-content:has(.pcalc-header.pcalc-done) .dxbl-progress-bar-label-container p,
    .detail-view-content:has(.pcalc-header.pcalc-done) .dxbl-progress-bar-label-container svg {
        color: var(--tint-emerald-fg, #059669) !important;
    }

/* ── Theme sombre ───────────────────────────────────────────────── */
:root[data-theme="dark"] .dxbl-progress-bar-track-container {
    background: rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] .pcalc-timer {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] .pcalc-title {
    color: var(--ink-0, #F3F6FA) !important;
}

:root[data-theme="dark"] .dxbl-modal-dialog:has(.labelprogress) .xaf-view-caption-lg {
    color: var(--ink-0, #F3F6FA) !important;
}

/* Titre du popup : ecrit par progress-bar.js, plus de texte fige en CSS */
.dxbl-modal-dialog:has(.labelprogress) .xaf-view-caption-lg {
    font-family: var(--font-body, "Geist", system-ui, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ink-0, #0F172A) !important;
}