/* ════════════════════════════════════════════════════════════════
   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: 22px 24px !important;
    background: #fff !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;
    }

@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;
    }

        .dxbl-modal-dialog:has(.labelprogress) .xaf-view-caption-lg::before {
            content: "Traitement & Calcul" !important;
            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;
        }