/* ============================================================
   QUALIFICATION PATH — VARIABLES
   ============================================================ */

.qualification-path-page-wrapper {
    --qpath-ffbad-blue: #101F69;
    --qpath-ffbad-red: #D52B1E;
    --qpath-france-blue: #000091;
    --qpath-green: #16803C;
    --qpath-orange: #D97706;
    --qpath-bg: #F7F8FC;
    --qpath-text: #101F69;
    --qpath-muted: rgba(16, 31, 105, 0.72);
}


/* ============================================================
   QUALIFICATION PATH — PAGE WRAPPER
   ============================================================ */

.qualification-path-page-wrapper {
    width: 100%;
    min-height: 100vh;
    background: var(--qpath-bg, #F7F8FC);
}

.qualification-path-main-content {
    margin-left: calc(5rem + 1rem) !important;
    margin-right: 1rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.qualification-path-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}


/* ============================================================
   QUALIFICATION PATH — LAYOUT ROWS / SLOTS
   ============================================================ */

.qualification-path-flex-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    width: 100% !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

.qualification-path-card-slot {
    flex: 1 1 500px !important;
    min-width: 350px !important;
    display: flex !important;
    box-sizing: border-box !important;
}

.qualification-path-card-slot-full {
    flex: 1 1 100% !important;
    min-width: 350px !important;
    display: flex !important;
    box-sizing: border-box !important;
}

.qualification-path-card-slot > *,
.qualification-path-card-slot-full > * {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
}


/* ============================================================
   QUALIFICATION PATH — FILTERS
   ============================================================ */

.qualification-path-filters-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem 1rem !important;
    width: 100% !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

.qualification-path-filter-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;

    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;

    box-sizing: border-box !important;
}

.qualification-path-filter-label {
    font-size: 12px !important;
    line-height: 14px !important;
    font-weight: 600 !important;
    color: var(--ffbad-blue-light) !important;
    margin-bottom: 0 !important;
}

.qualification-path-dropdown {
    width: 100% !important;
}

.qualification-path-advanced-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    background-color: var(--qpath-ffbad-blue, #101F69) !important;
    border-color: var(--qpath-ffbad-blue, #101F69) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    padding: 0.25rem 0.8rem !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

.qualification-path-advanced-toggle:hover,
.qualification-path-advanced-toggle:focus {
    background-color: #0B164D !important;
    border-color: #0B164D !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.qualification-path-toggle-icon {
    font-size: 1rem !important;
}

.qualification-path-advanced-filters {
    width: 100%;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(16, 31, 105, 0.14) !important;
}


/* ============================================================
   QUALIFICATION PATH — CARD TOP RIGHT
   ============================================================ */

.qualification-path-card-top-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.28rem !important;

    min-width: 0 !important;
    box-sizing: border-box !important;
}

.qualification-path-card-context {
    color: var(--qpath-ffbad-blue, #101F69) !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}


/* ============================================================
   QUALIFICATION PATH — FLOW / ARROWS
   ============================================================ */

.qualification-path-flow-wrapper {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    padding: 0.35rem 0.25rem !important;
}

.qualification-path-flow-step {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.55rem 0.9rem !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(16, 31, 105, 0.12) !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 18px rgba(16, 31, 105, 0.06) !important;
}

.qualification-path-flow-icon {
    width: 1.45rem !important;
    height: 1.45rem !important;
    min-width: 1.45rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: var(--qpath-ffbad-red, #D52B1E) !important;
    color: #FFFFFF !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
}

.qualification-path-flow-text {
    color: var(--qpath-ffbad-blue, #101F69) !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.qualification-path-flow-arrow {
    color: var(--qpath-ffbad-blue, #101F69) !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}


/* ============================================================
   QUALIFICATION PATH — RADIO DISPLAY
   ============================================================ */

.qualification-path-display-radio {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    margin-bottom: 0 !important;
}

.qualification-path-display-radio label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin-right: 0.45rem !important;
    white-space: nowrap !important;
}


/* ============================================================
   QUALIFICATION PATH — METHODOLOGY
   ============================================================ */

.qualification-path-methodology-content {
    width: 100%;
}

.qualification-path-methodology-note {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    padding: 0.9rem 1rem !important;
    background: rgba(16, 31, 105, 0.045) !important;
    border: 1px solid rgba(16, 31, 105, 0.12) !important;
    border-left: 4px solid var(--qpath-ffbad-blue, #101F69) !important;
    border-radius: 0.8rem !important;
}

.qualification-path-methodology-note-title {
    color: var(--qpath-ffbad-blue, #101F69) !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
}

.qualification-path-methodology-note-text {
    color: #333333 !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}


/* ============================================================
   QUALIFICATION PATH — EMPTY / WARNING STATES
   ============================================================ */

.qualification-path-table-wrapper {
    width: 100%;
    overflow-x: auto !important;
}

.qualification-path-empty-state {
    width: 100%;
    min-height: 140px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: var(--qpath-ffbad-blue, #101F69) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    background: rgba(16, 31, 105, 0.035) !important;
    border: 1px dashed rgba(16, 31, 105, 0.22) !important;
    border-radius: 0.8rem !important;
}

.qualification-path-warning-box {
    margin-bottom: 0.85rem !important;
    padding: 0.75rem 0.9rem !important;
    background: rgba(213, 43, 30, 0.06) !important;
    border: 1px solid rgba(213, 43, 30, 0.18) !important;
    border-left: 4px solid var(--qpath-ffbad-red, #D52B1E) !important;
    border-radius: 0.8rem !important;
}

.qualification-path-warning-title {
    color: var(--qpath-ffbad-red, #D52B1E) !important;
    font-weight: 900 !important;
    font-size: 0.88rem !important;
    margin-bottom: 0.25rem !important;
}

.qualification-path-warning-list {
    margin: 0 !important;
    padding-left: 1.1rem !important;
    color: #333333 !important;
    font-size: 0.84rem !important;
}


/* ============================================================
   QUALIFICATION PATH — AG GRID BASE
   ============================================================ */

.qualification-path-ag-grid-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
}

.qualification-path-ag-grid {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    --ag-border-color: rgba(16, 31, 105, 0.07);
    --ag-row-border-color: rgba(16, 31, 105, 0.055);
    --ag-header-column-separator-display: none;
    --ag-row-hover-color: rgba(16, 31, 105, 0.045);
    --ag-selected-row-background-color: rgba(16, 31, 105, 0.05);
    --ag-font-family: Open Sans, verdana, arial, sans-serif;
}

.qualification-path-ag-grid .ag-root-wrapper {
    border-radius: 10px !important;
    border: 1px solid rgba(16, 31, 105, 0.12) !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    box-shadow: 0 6px 18px rgba(16, 31, 105, 0.045) !important;
}

.qualification-path-ag-grid .ag-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(16, 31, 105, 0.16) !important;
}

.qualification-path-ag-grid .ag-header-cell {
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-right: none !important;
}

.qualification-path-ag-grid .ag-header-cell-label {
    color: var(--qpath-ffbad-blue, #101F69) !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.qualification-path-ag-grid .ag-header-cell-text {
    color: var(--qpath-ffbad-blue, #101F69) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.qualification-path-ag-grid .ag-sort-indicator-container,
.qualification-path-ag-grid .ag-header-icon,
.qualification-path-ag-grid .ag-icon {
    flex: 0 0 auto !important;
}

.qualification-path-ag-grid .ag-row {
    border-color: rgba(16, 31, 105, 0.055) !important;
}

.qualification-path-ag-grid .ag-row-odd {
    background-color: rgba(16, 31, 105, 0.012) !important;
}

.qualification-path-ag-grid .ag-row-hover {
    background-color: rgba(16, 31, 105, 0.045) !important;
}

.qualification-path-ag-grid .ag-cell {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
    color: var(--qpath-ffbad-blue, #101F69) !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom-color: rgba(16, 31, 105, 0.055) !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
}

.qualification-path-ag-grid .ag-cell-wrapper,
.qualification-path-ag-grid .ag-cell-value {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.qualification-path-ag-grid .ag-cell-value {
    display: flex !important;
    align-items: center !important;
}


/* ============================================================
   QUALIFICATION PATH — HEADER ALIGNMENT
   ============================================================ */

.qualification-path-ag-grid .ag-header-cell.qpath-header-center .ag-header-cell-label {
    justify-content: center !important;
    text-align: center !important;
}

.qualification-path-ag-grid .ag-header-cell.qpath-header-left .ag-header-cell-label {
    justify-content: flex-start !important;
    text-align: left !important;
}

.qualification-path-ag-grid .ag-header-cell.qpath-header-center .ag-header-cell-text {
    text-align: center !important;
}

.qualification-path-ag-grid .ag-header-cell.qpath-header-left .ag-header-cell-text {
    text-align: left !important;
}


/* ============================================================
   QUALIFICATION PATH — ROW STATES
   ============================================================ */

/* Fond France :
   - utilisé dans les rankings
   - utilisé aussi dans la projection
   - pas de bordure gauche ici */
.qualification-path-ag-grid .ag-row.qpath-row-french .ag-cell {
    background-color: rgba(0, 0, 145, 0.040) !important;
}

/* Bordure France :
   - utilisée uniquement si qpath-row-french-border est appliquée côté Python
   - donc rankings oui, projection non */
.qualification-path-ag-grid .ag-row.qpath-row-french-border {
    box-shadow: inset 4px 0 0 var(--qpath-france-blue, #000091) !important;
}

/* Qualifiés :
   - barre verte à gauche conservée
   - fond vert très léger
   - pas de dégradé */
.qualification-path-ag-grid .ag-row.qpath-row-qualified {
    box-shadow: inset 4px 0 0 var(--qpath-green, #16803C) !important;
}

.qualification-path-ag-grid .ag-row.qpath-row-qualified .ag-cell {
    background-color: rgba(22, 128, 60, 0.045) !important;
}

/* France + qualifié :
   - barre verte prioritaire
   - fond mixé mais uniforme
   - aucun dégradé cellule par cellule */
.qualification-path-ag-grid .ag-row.qpath-row-french.qpath-row-qualified {
    box-shadow: inset 4px 0 0 var(--qpath-green, #16803C) !important;
}

.qualification-path-ag-grid .ag-row.qpath-row-french.qpath-row-qualified .ag-cell {
    background-color: rgba(12, 80, 110, 0.055) !important;
}

/* Alertes :
   - pas de dégradé
   - fond jaune uniforme très léger */
.qualification-path-ag-grid .ag-row.qpath-row-alert .ag-cell {
    background-color: rgba(255, 193, 7, 0.060) !important;
}

/* Alerte + France :
   - fond uniforme légèrement bleu/jaune
   - pas de dégradé */
.qualification-path-ag-grid .ag-row.qpath-row-french.qpath-row-alert .ag-cell {
    background-color: rgba(95, 95, 125, 0.060) !important;
}

/* Alerte + qualifié :
   - barre verte conservée
   - fond uniforme légèrement vert/jaune */
.qualification-path-ag-grid .ag-row.qpath-row-qualified.qpath-row-alert {
    box-shadow: inset 4px 0 0 var(--qpath-green, #16803C) !important;
}

.qualification-path-ag-grid .ag-row.qpath-row-qualified.qpath-row-alert .ag-cell {
    background-color: rgba(120, 160, 45, 0.060) !important;
}

/* France + qualifié + alerte :
   - barre verte prioritaire
   - fond uniforme, aucune couche gradient */
.qualification-path-ag-grid .ag-row.qpath-row-french.qpath-row-qualified.qpath-row-alert {
    box-shadow: inset 4px 0 0 var(--qpath-green, #16803C) !important;
}

.qualification-path-ag-grid .ag-row.qpath-row-french.qpath-row-qualified.qpath-row-alert .ag-cell {
    background-color: rgba(100, 125, 80, 0.065) !important;
}

/* ============================================================
   QUALIFICATION PATH — CELL CONTENT TEXT / NAME / PAIR
   ============================================================ */

.qpath-text-inner,
.qpath-name-inner {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.qpath-name-inner {
    flex: 1 1 auto !important;
    font-weight: 850 !important;
    color: var(--qpath-ffbad-blue, #101F69) !important;
}

.qpath-pair-inner {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
}

.qpath-pair-player {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--qpath-ffbad-blue, #101F69) !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
}

.qpath-pair-player-2 {
    color: var(--qpath-muted, rgba(16, 31, 105, 0.72)) !important;
    font-weight: 750 !important;
}

.qpath-number-cell {
    justify-content: center !important;
    text-align: center !important;
    font-weight: 850 !important;
}

.qpath-number-cell .qpath-text-inner {
    text-align: center !important;
}


/* ============================================================
   QUALIFICATION PATH — RANK
   ============================================================ */

.qpath-rank-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: var(--qpath-ffbad-blue, #101F69) !important;
    font-weight: 950 !important;
}

.qpath-rank-warning {
    color: var(--qpath-orange, #D97706) !important;
}

.qpath-inline-warning {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--qpath-orange, #D97706) !important;
    font-size: 11px !important;
}


/* ============================================================
   QUALIFICATION PATH — BADGES BASE
   ============================================================ */

.qpath-badge {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 22px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.qpath-badge-icon {
    flex: 0 0 auto !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

.qpath-badge-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}


/* ============================================================
   QUALIFICATION PATH — BADGE COLORS
   ============================================================ */

.qpath-badge-green {
    color: var(--qpath-green, #16803C) !important;
    background-color: rgba(22, 128, 60, 0.13) !important;
    border: 1px solid rgba(22, 128, 60, 0.24) !important;
}

.qpath-badge-green-soft {
    color: var(--qpath-green, #16803C) !important;
    background-color: rgba(22, 128, 60, 0.09) !important;
    border: 1px solid rgba(22, 128, 60, 0.18) !important;
}

.qpath-badge-red {
    color: var(--qpath-ffbad-red, #D52B1E) !important;
    background-color: rgba(213, 43, 30, 0.12) !important;
    border: 1px solid rgba(213, 43, 30, 0.24) !important;
}

.qpath-badge-red-soft {
    color: var(--qpath-ffbad-red, #D52B1E) !important;
    background-color: rgba(213, 43, 30, 0.08) !important;
    border: 1px solid rgba(213, 43, 30, 0.18) !important;
}

.qpath-badge-blue {
    color: var(--qpath-ffbad-blue, #101F69) !important;
    background-color: rgba(16, 31, 105, 0.12) !important;
    border: 1px solid rgba(16, 31, 105, 0.22) !important;
}

.qpath-badge-blue-soft {
    color: var(--qpath-ffbad-blue, #101F69) !important;
    background-color: rgba(16, 31, 105, 0.07) !important;
    border: 1px solid rgba(16, 31, 105, 0.13) !important;
}

.qpath-badge-orange {
    color: var(--qpath-orange, #D97706) !important;
    background-color: rgba(255, 193, 7, 0.15) !important;
    border: 1px solid rgba(217, 119, 6, 0.24) !important;
}

.qpath-badge-neutral {
    color: rgba(16, 31, 105, 0.78) !important;
    background-color: rgba(16, 31, 105, 0.045) !important;
    border: 1px solid rgba(16, 31, 105, 0.10) !important;
}

.qpath-badge-npc {
    color: var(--qpath-ffbad-blue, #101F69) !important;
    background-color: rgba(16, 31, 105, 0.06) !important;
    border: 1px solid rgba(16, 31, 105, 0.12) !important;
}

.qpath-badge-france {
    color: #FFFFFF !important;
    background-color: var(--qpath-france-blue, #000091) !important;
    border: 1px solid var(--qpath-france-blue, #000091) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 145, 0.18) !important;
}

.qpath-badge-strong {
    font-weight: 950 !important;
}


/* ============================================================
   QUALIFICATION PATH — CUSTOM CONTENT SAFETY
   ============================================================ */

.qualification-path-ag-grid .ag-cell-value > span,
.qualification-path-ag-grid .ag-cell-value > div {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* ============================================================
   QUALIFICATION PATH — PAGINATION
   ============================================================ */

.qualification-path-ag-grid .ag-paging-panel {
    border-top: 1px solid rgba(16, 31, 105, 0.10) !important;
    color: var(--qpath-ffbad-blue, #101F69) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

.qualification-path-ag-grid .ag-paging-row-summary-panel,
.qualification-path-ag-grid .ag-paging-page-summary-panel {
    color: var(--qpath-ffbad-blue, #101F69) !important;
}

.qualification-path-ag-grid .ag-paging-button {
    color: var(--qpath-ffbad-blue, #101F69) !important;
}



/* ============================================================
   QUALIFICATION PATH — AG GRID CUSTOM TOOLTIP
   ============================================================ */

.qualification-path-ag-grid .ag-tooltip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: 9999 !important;
}

.qpath-ag-tooltip {
    min-width: 180px !important;
    max-width: 280px !important;
    padding: 0.48rem 0.58rem !important;
    border-radius: 7px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 0.24rem !important;

    background-color: #FFFFFF !important;
    border: 1px solid rgba(16, 31, 105, 0.14) !important;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.10),
        0 8px 18px rgba(0, 0, 0, 0.08) !important;

    box-sizing: border-box !important;
}

.qpath-ag-tooltip-wide {
    min-width: 280px !important;
    max-width: 390px !important;
}

.qpath-tooltip-title {
    font-size: 10px !important;
    line-height: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: var(--qpath-muted, rgba(16, 31, 105, 0.72)) !important;
    margin-bottom: 0.12rem !important;
}

.qpath-tooltip-line {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.12rem !important;
    width: 100% !important;
    min-width: 0 !important;
}

.qpath-tooltip-line-label {
    width: 100% !important;
    max-width: none !important;

    font-size: 10px !important;
    line-height: 12px !important;
    font-weight: 900 !important;
    color: #555555 !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.qpath-tooltip-line-main {
    width: 100% !important;
    min-width: 0 !important;

    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 900 !important;
    color: var(--qpath-ffbad-blue, #101F69) !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.qpath-tooltip-line-full {
    white-space: normal !important;
}

.qpath-tooltip-line-main.qpath-tooltip-line-full {
    display: block !important;
}