/* Header Component Styles */

/* Ensure body has padding-top to account for fixed header */
body {
    padding-top: var(--header-height);
}

.header-component {
    width: 100%;
    height: var(--header-height);
    background-color: var(--bg-dark-secondary);
    /* Dark background matching the screenshot */
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 4px var(--black-alpha-20);
    box-sizing: border-box;
    font-family: 'Jost', sans-serif;
    position: fixed;
    /* Fixed at the top */
    top: 0;
    left: 0;
    z-index: 1000;
    transition: height 0.2s ease;
}

/* Left Section: Logo & Navigation */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo {
    /* La boîte de mise en page (et le bouton cliquable) reste bornée à la
       hauteur de la barre : la zone de clic ne déborde jamais sous le bandeau. */
    height: var(--header-height);
    margin-right: 15px;
    /* Placeholder style if no image is present yet */
    display: flex;
    align-items: center;
    font-weight: bold;
    /* Contexte de positionnement pour le badge de version (ancré sous le logo). */
    position: relative;
}

.header-logo img {
    /* Taille de base : logo « neo fugu » (logo.png). */
    height: 40px;
    width: auto;
    /* L'image ne capture pas les clics : seul le bouton (borné à la barre) est
       cliquable. Le visuel agrandi des icônes peut donc déborder de la barre
       sans intercepter les clics destinés au contenu situé dessous. */
    pointer-events: none;
}

/* Icône carrée sélectionnée (autre que le logo.png d'origine) : visuel agrandi
   pour être bien visible. Classe posée par logo_selection.js selon le logo actif. */
.header-logo.header-logo-icon img {
    height: 70px;
}

.nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--white-alpha-30);
    border: 1px solid var(--white-alpha-30);
    /* Subtle border */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
    font-size: 1.1rem;
}

.nav-btn:hover {
    background-color: var(--white-alpha-10);
    border-color: var(--text-primary);
}

/* Center Section: Page Title */
.header-center {
    flex: 1;
    text-align: left;
    /* Align left as per screenshot, next to nav buttons? actually it looks left-aligned after nav */
    padding-left: 20px;
    font-size: 1.5rem;
    /* Large font for title */
    font-weight: 700;
    text-transform: uppercase;
    /* Interligne resserré : un titre long peut passer sur deux lignes tout en
       restant dans la hauteur fixe du header (--header-height). */
    line-height: 1.1;
    /* Borne à deux lignes avec ellipsis (…) : au-delà, le texte est tronqué
       proprement plutôt que coupé net au milieu d'un mot. line-clamp exige un
       conteneur -webkit-box ; les enfants (opérateur + titre) restent inline. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    position: relative;
    min-width: 0;
}

/* Titre : flux inline sans `nowrap`, il reste sur une ligne tant qu'il y a la
   place et passe à la ligne suivante seulement quand il déborde. Le bornage à
   deux lignes (et la coupe au-delà) est géré par `.header-center`. */
.header-title-text {
    display: inline;
    overflow-wrap: anywhere;
    vertical-align: bottom;
}

.header-center .header-operator {
    color: var(--text-primary);
    font-weight: 600;
    /* Nom insécable : c'est le titre qui bascule sur la seconde ligne, pas le
       prénom/nom qui se coupe n'importe où. */
    white-space: nowrap;
}

/* Par défaut (desktop / paysage) : nom complet affiché, initiales masquées. */
.header-operator-initials {
    display: none;
}

/* Mode inline (par défaut) : "Prénom Nom - Titre" sur une seule ligne.
   On utilise des nbsp (\00a0) pour empêcher CSS de collapser les espaces autour du tiret. */
.header-center:not(.header-center-stacked) .header-operator::after {
    content: "\00a0-\00a0";
}

/* Mode stacked (écrans OF) : opérateur au-dessus, titre en-dessous, même police */
.header-center-stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    gap: 2px;
}

/* Header minimisé : on repasse en ligne unique "Prénom Nom - Titre"
   pour gagner de la place verticale, même en mode stacked. */
.header-component.header-mini .header-center-stacked {
    flex-direction: row;
    gap: 0;
}

.header-component.header-mini .header-center-stacked .header-operator::after {
    content: "\00a0-\00a0";
}

/* Right Section: Info & Tools */
.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
    /* Spacing between info blocks */
}

.header-component {
    .info-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .info-row {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .info-label {
        font-weight: 600;
        text-transform: uppercase;
        opacity: 0.9;
        min-width: 100px;
    }

    .info-label i {
        width: 20px;
        text-align: center;
        margin-right: 5px;
    }

    .info-value {
        font-weight: 700;
        font-size: 1.1rem;
    }

    .live-chrono {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .time-exceeded {
        color: var(--error-red);
    }

    .live-chrono .separator {
        opacity: 0.6;
        font-weight: 400;
    }
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .header-center {
        /* Portrait / tablette : titre plus compact pour qu'un libellé long
           (« Création d'une transformation ») tienne dans les deux lignes
           bornées, ellipsis au-delà. */
        font-size: 0.95rem;
    }

    /* Portrait / petit écran : on remplace le nom complet par les initiales
       (« B A ») pour laisser plus de place au titre de l'écran. */
    .header-operator-full {
        display: none;
    }

    .header-operator-initials {
        display: inline;
    }

    .header-component .info-label {
        display: none;
        /* Hide labels on small screens, keep icons/values? or specific strategy */
    }

    .header-component .info-block {
        font-size: 0.8rem;
    }
}

/* Portrait (tablette tenue verticalement) : le header garde sa hauteur de 64px
   mais la largeur est réduite. On resserre encore la police et on autorise trois
   lignes de titre — 3 × 0.8rem à line-height 1.1 ≈ 42px, dans les 64px du header
   — pour afficher un libellé long sans ellipsis dans la plupart des cas.
   Ciblé sur `orientation: portrait` (et non `max-width` seul) car en paysage
   étroit les 64px ne suffiraient pas pour trois lignes. */
@media (max-width: 768px) and (orientation: portrait) {
    .header-center {
        font-size: 0.8rem;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

/* Numéro de version — badge discret ancré sous le logo (élément à position
   stable, indépendant de la longueur du titre / du nom de l'opérateur). Centré
   horizontalement sous le logo et collé en bas de la barre : il ne peut plus
   dériver vers le nom de l'opérateur (problème observé sur tablettes). */
.header-version {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(calc(-50% + 40px));
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--text-primary);
    opacity: 0.45;
    letter-spacing: 0.3px;
    pointer-events: none;
    user-select: none;
    font-family: 'Jost', sans-serif;
    line-height: 1;
    white-space: nowrap;
}

.header-component.header-mini .header-version {
    display: none;
}

/* Variante autonome (sans logo, ex. page de login) :
   on neutralise le positionnement absolu pour afficher le badge inline. */
.header-version-standalone {
    position: static;
    transform: none;
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Mini toggle button (full <-> mini) — languette centrée qui dépasse sous le header,
   à l'écart des nav-btn (logout/settings) pour rester cliquable sans risque
   de toucher accidentellement le bouton de déconnexion. */
.header-toggle-mini {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-dark-secondary);
    border: none;
    border-radius: 0 0 8px 8px;
    color: var(--text-primary);
    cursor: pointer;
    opacity: 0.85;
    font-size: 12px;
    z-index: 1002;
    transition: var(--transition);
    padding: 0;
    box-shadow: 0 2px 4px var(--black-alpha-20);
}

.header-toggle-mini:hover {
    opacity: 1;
    color: var(--primary);
}

.header-toggle-mini .icon-expand {
    display: none;
}

.header-component.header-mini .header-toggle-mini .icon-collapse {
    display: none;
}

.header-component.header-mini .header-toggle-mini .icon-expand {
    display: inline-block;
}

/* Mini mode — barre réduite (logo caché, icônes plus petites, titre compact).
   La classe `.header-mode-mini` est aussi posée sur <body> par header.js
   pour exposer la variable --header-height aux composants dépendants
   (.of-content-wrapper, padding-top du body, etc.). */
body.header-mode-mini {
    --header-height: 36px;
}

.header-component.header-mini {
    padding: 0 12px;
}

.header-component.header-mini .header-logo {
    display: none;
}

.header-component.header-mini .header-left,
.header-component.header-mini .header-right {
    gap: 8px;
}

.header-component.header-mini .nav-btn {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
}

.header-component.header-mini .header-center {
    font-size: 1rem;
    padding-left: 10px;
}

/* En mode mini (header réduit à 36px), le titre reste sur une seule ligne avec
   ellipsis : deux lignes ne rentreraient pas dans la hauteur réduite. */
.header-component.header-mini .header-title-text {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-component.header-mini .info-block {
    font-size: 0.75rem;
    line-height: 1;
}

.header-component.header-mini .info-row {
    gap: 4px;
}

.header-component.header-mini .info-label {
    display: none;
}

.header-component.header-mini .info-value {
    font-size: 0.85rem;
}

.header-component.header-mini #header-chrono-row {
    margin-top: 2px;
}