/*
 * Barre d'en-tête de page : hauteur fixe 56px, titre sur une ligne (ellipsis),
 * contrôles de droite compacts. Les en-têtes admin très chargés (scores, métadonnées) peuvent s'étendre.
 */
.page-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--r-md, 14px);
    padding: 8px 16px;
    min-height: 56px;
    margin-bottom: 0px;
    overflow: hidden;
}

/* Pas de marge sous la barre quand elle précède le bloc principal (CRM, Dashboard, fragments Practice, etc.) */
.content-wrapper > .page-header-bar,
.container-wrapper > .page-header-bar,
#container > .page-header-bar,
.container > .page-header-bar {
    margin-bottom: 0px;
}

/* Practice / History : titre à gauche, onglets centrés dans la barre (grille 1fr auto 1fr) */
#container > .page-header-bar--segmented-only {
    position: sticky;
    top: 0;
    z-index: 999;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    overflow: visible;
    isolation: isolate;
    height: auto;
    min-height: 56px;
    max-height: none;
}

.page-header-bar__title--segmented-lead {
    justify-self: start;
    min-width: 0;
    text-align: left;
}

.page-header-bar__segmented-spacer {
    min-width: 0;
    pointer-events: none;
}

.page-header-bar--segmented-only .practice-selector--in-bar,
        .practice-tabs-host .practice-selector--in-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    margin: 0;
    padding: 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    background: transparent;
}

/* practice-tabs-host : même segmented hors barre page (ex. modal Calendrier « Add ») */

/* Onglets Cases / Exercises — colonnes auto (s'adapte au nombre d'onglets ;
   le rail à 3 colonnes figées datait de l'onglet Buddy Interviews, retiré) */
.page-header-bar--segmented-only .practice-segmented,
        .practice-tabs-host .practice-segmented {
    flex-shrink: 1;
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 1px;
    padding: 2px;
    width: 100%;
    max-width: min(100%, 440px);
    min-height: 38px;
    box-sizing: border-box;
    border-radius: 10px;
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.page-header-bar--segmented-only .practice-seg,
        .practice-tabs-host .practice-seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    min-height: 0;
    height: 100%;
    min-width: 0;
    border: none;
    border-radius: 8px;
    margin: 0;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.page-header-bar--segmented-only .practice-seg .material-icons,
        .practice-tabs-host .practice-seg .material-icons {
    font-size: 16px !important;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.92;
}

.page-header-bar--segmented-only .practice-seg:hover:not(.active),
        .practice-tabs-host .practice-seg:hover:not(.active) {
    color: var(--accent);
    background: var(--accent-soft);
}

.page-header-bar--segmented-only .practice-seg.active,
        .practice-tabs-host .practice-seg.active {
    background: var(--card-bg, #ffffff);
    color: var(--accent);
    box-shadow: var(--sh-1);
}

@media (max-width: 768px) {
    #container > .page-header-bar--segmented-only {
        padding-top: 8px;
        padding-bottom: 8px;
        column-gap: 8px;
    }

    .page-header-bar--segmented-only .practice-segmented,
        .practice-tabs-host .practice-segmented {
        max-width: 100%;
    }

    .page-header-bar--segmented-only .practice-seg,
        .practice-tabs-host .practice-seg {
        padding: 6px 4px;
        font-size: 11px;
        gap: 3px;
    }

    .page-header-bar--segmented-only .practice-seg .material-icons,
        .practice-tabs-host .practice-seg .material-icons {
        font-size: 15px !important;
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 520px) {
    .page-header-bar--segmented-only .practice-seg,
        .practice-tabs-host .practice-seg {
        flex-direction: column;
        gap: 2px;
        padding: 6px 4px;
        font-size: 11px;
        line-height: 1.1;
    }
}

.page-header-bar__lead {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px 12px;
    min-width: 0;
    flex: 1;
}

/* Titre principal (h1 ou #chatTitle avec .page-header-bar__title) */
.page-header-bar__title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary, #1e293b);
    line-height: 1.2;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-header-bar__title .material-icons {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: var(--accent);
}

.page-header-bar__trail {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    flex: 0 1 auto;
    max-width: min(560px, 55%);
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.page-header-bar__trail .page-actions,
.page-header-bar__trail .title-actions,
.page-header-bar__trail form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* Boutons / liens dans la trail — compacts pour tenir en 56px */
.page-header-bar__trail .btn,
.page-header-bar__trail a.btn,
.page-header-bar__trail button.btn,
.page-header-bar__trail .btn-primary,
.page-header-bar__trail .btn-secondary,
.page-header-bar__trail .btn-danger,
.page-header-bar__trail .btn-outline,
.page-header-bar__trail button.btn-primary,
.page-header-bar__trail a.btn-primary,
.page-header-bar__trail .conversation-button,
.page-header-bar__trail .transcript-button,
.page-header-bar__trail a.conversation-button,
.page-header-bar__trail .request-button,
.page-header-bar__trail .edit-button,
.page-header-bar__trail .save-button,
.page-header-bar__trail .cancel-button,
.page-header-bar__trail .evaluation-button,
.page-header-bar__trail .random-btn,
.page-header-bar__trail .random-drill-btn,
.page-header-bar__trail .btn-new-user,
.page-header-bar__trail .back-link {
    padding: 5px 10px !important;
    min-height: 0;
    max-height: 34px;
    box-sizing: border-box;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

.page-header-bar__trail .btn .material-icons,
.page-header-bar__trail a .material-icons,
.page-header-bar__trail button .material-icons {
    font-size: 16px !important;
    width: 16px;
    height: 16px;
}

.page-header-bar__trail .cost-info-badge {
    padding: 4px 10px !important;
    font-size: 12px !important;
    gap: 6px !important;
    border-radius: 8px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.page-header-bar__trail .cost-info-badge .material-icons {
    font-size: 16px !important;
}

/* Trail réduite à une seule icône (ex. Admin Expert) */
.page-header-bar__trail > .material-icons {
    font-size: 22px !important;
    line-height: 1;
}

/* Titres chat : classes historiques — typo portée par .page-header-bar__title */
.page-header-bar .chat-title.page-header-bar__title,
.page-header-bar .chat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* En-têtes très denses (évaluation, transcript, feedback admin : métadonnées / scores) */
.page-header-bar.evaluation-page-head,
.page-header-bar.feedback-admin-head,
.page-header-bar.transcript-page-head,
.page-header-bar.case-practice-head {
    height: auto;
    min-height: 56px;
    max-height: none;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow: visible;
}

.page-header-bar.case-practice-head .page-header-bar__lead {
    align-self: center;
}

.page-header-bar.evaluation-page-head .page-header-bar__trail,
.page-header-bar.feedback-admin-head .page-header-bar__trail,
.page-header-bar.transcript-page-head .page-header-bar__trail {
    max-width: none;
    overflow-x: auto;
    overflow-y: visible;
    align-items: flex-start;
    flex-wrap: wrap;
}

.page-header-bar.case-practice-head .page-header-bar__trail {
    max-width: none;
    overflow-x: auto;
    overflow-y: visible;
    align-items: center;
    align-self: center;
    flex-wrap: wrap;
}

/* Feedback utilisateur : une ligne titre + pastilles / boutons — centré verticalement dans la barre */
.page-header-bar.feedback-page-head {
    height: auto;
    min-height: 56px;
    max-height: none;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow: visible;
}

.page-header-bar.feedback-page-head .page-header-bar__trail {
    max-width: none;
    overflow-x: auto;
    overflow-y: visible;
    align-items: center;
    align-self: center;
    flex-wrap: wrap;
}

.page-header-bar.feedback-page-head .page-header-bar__lead {
    align-self: center;
}

/* Scores dans la trail (page évaluation) — plus compacts */
.page-header-bar__trail .global-score,
.page-header-bar__trail .alignment-score,
.page-header-bar__trail .total-score {
    padding: 5px 12px !important;
    font-size: 10px !important;
    min-width: 96px !important;
    line-height: 1.15;
}

.page-header-bar__trail .global-score .score-number,
.page-header-bar__trail .alignment-score .score-number,
.page-header-bar__trail .total-score .score-number {
    font-size: 15px !important;
    margin-bottom: 0 !important;
}

/* ── Barre de titre masquee sous 900px, quand le titre vit deja dans
   #mobile-topbar (Header.html) ────────────────────────────────────────────
   Le seuil (900px) suit celui de la barre mobile dans Header.html, pas les
   640/768px de ce fichier plus bas (qui reglent la densite de la barre,
   pas sa presence).

   Conditionnee par `body.has-mobile-topbar-title`, posee par
   mobile-nav.js UNIQUEMENT apres qu'il ait reellement trouve un titre et
   l'ait recopie dans la barre mobile (echec ferme : voir le commentaire en
   tete de ce bloc dans mobile-nav.js). Si le script echoue ou ne trouve
   rien -- page sans .page-header-bar, structure inattendue -- la classe
   n'est jamais posee et cette regle ne s'applique a rien : la barre
   d'origine reste affichee exactement comme aujourd'hui.

   Fix regression (2026-09) : cette regle et la copie faite par mobile-nav.js
   testaient chacune leur PROPRE condition pour decider "titre seul ou pas"
   (ici un `:has()` sur le trail, la-bas rien du tout) -- les deux ont derive
   l'une de l'autre, ce qui a coute un bandeau d'erreur invisible
   (Interview_transcript.html, dont la barre porte du contenu reel mais pas
   de trail) et des titres dupliques (Dashboard.html, AI_Assistant.html,
   dont la barre garde ses actions). Desormais UNE seule condition, portee
   par la classe `.page-header-bar--title-only` : posee par
   fragments/page_header_bar.html quand `page_header_trail` est absent/vide
   (meme test que celui qui omet le `<div class="page-header-bar__trail">`),
   et a la main sur les rares barres ecrites hors du fragment qui ne
   portent, elles aussi, rien d'autre qu'un titre (Community.html). Une
   barre hand-written qui NE porte PAS la classe (Interview_transcript.html)
   n'est donc plus jamais masquee, quelle que soit la forme de son trail --
   fail-closed par construction, sans que le gabarit ait besoin de connaitre
   cette regle. mobile-nav.js lit exactement la meme classe avant de
   recopier quoi que ce soit (voir ce fichier) : les deux conditions ne
   peuvent plus diverger, elles SONT la meme.

   display:none est volontairement EXCLU ici : ce depot impose un seul <h1>
   par page dans l'arbre d'accessibilite (CLAUDE.md), et le <h1> reel vit
   dans cette barre. Le traitement ci-dessous est visually-hidden, repris a
   l'identique de `.visually-hidden` (User_Base.html) : la barre disparait
   visuellement et cesse de reserver sa hauteur (position:absolute la sort
   du flux), mais son contenu reste lisible par un lecteur d'ecran. La copie
   dans #mobile-topbar est elle marquee aria-hidden="true" (Header.html) :
   le titre n'est donc annonce qu'une seule fois, par ce <h1>-ci. */
@media (max-width: 900px) {
    body.has-mobile-topbar-title .page-header-bar--title-only {
        position: absolute !important;
        width: 1px;
        height: 1px;
        min-height: 0;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (max-width: 640px) {
    .page-header-bar {
        padding: 0 12px;
        gap: 6px;
    }

    .page-header-bar__trail {
        max-width: min(240px, 48%);
    }

    .page-header-bar.evaluation-page-head .page-header-bar__trail,
    .page-header-bar.feedback-admin-head .page-header-bar__trail,
    .page-header-bar.transcript-page-head .page-header-bar__trail,
    .page-header-bar.case-practice-head .page-header-bar__trail,
    .page-header-bar.feedback-page-head .page-header-bar__trail {
        max-width: 100%;
    }
}