/* ==========================================================================
   BioPoint AI Core - Tableaux de bord (tableau.css)
   ==========================================================================
   Les trois metiers - manager, salarie, elu - ouvrent une page differente, mais
   se posent la meme question : QU'EST-CE QUI M'ATTEND ? La reponse tient en
   quatre couches, toujours dans cet ordre :

     1. une phrase qui repond a la question, en francais ;
     2. quelques chiffres cles, gros et lisibles de loin ;
     3. ce qui attend une decision, cliquable ;
     4. le contexte, discret.

   Un etat n'est JAMAIS porte par la seule couleur : chaque pastille porte un
   pictogramme et un mot. Un ecran de reserve, un daltonien ou une impression en
   noir et blanc doivent rester lisibles.
   ========================================================================== */

/* --- 1. La phrase d'accueil ------------------------------------------------ */
.tb-accueil {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .55rem;
    margin-bottom: 1.25rem;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--bp-text);
}
.tb-accueil .tb-doux { color: var(--bp-text-3); font-weight: 500; font-size: 1rem; }
.tb-accueil b { color: var(--bp-primary-soft); font-weight: 800; }
.tb-accueil b.tb-rouge { color: var(--bp-danger-soft); }
.tb-accueil b.tb-vert  { color: var(--bp-success-soft); }

/* --- 2. Les chiffres cles -------------------------------------------------- */
.tb-cles {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    margin-bottom: 1.1rem;
}
.tb-cle {
    position: relative;
    padding: 1rem 1.1rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-r-lg);
    background: var(--bp-surface);
    text-decoration: none;
    display: block;
    transition: border-color .15s ease, transform .15s ease;
}
a.tb-cle:hover { border-color: var(--bp-border-strong); transform: translateY(-2px); }
.tb-cle .tb-etiquette {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .705rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bp-text-3);
    margin-bottom: .45rem;
}
.tb-cle .tb-valeur {
    display: block;
    font-size: 1.92rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bp-text);
    /* Chiffres a chasse fixe : sans cela, un compteur qui s'anime fait danser
       toute la ligne a chaque seconde. */
    font-variant-numeric: tabular-nums;
}
.tb-cle .tb-valeur .tb-unite {
    font-size: .95rem;
    font-weight: 600;
    color: var(--bp-text-3);
    margin-left: .15rem;
}
.tb-cle .tb-note {
    display: block;
    margin-top: .3rem;
    font-size: .745rem;
    color: var(--bp-text-3);
}
/* Une bordure de gauche coloree accompagne TOUJOURS un pictogramme dans
   l'etiquette : la couleur seule ne dit rien. */
.tb-cle.tb-alerte { border-left: 3px solid var(--bp-danger); }
.tb-cle.tb-alerte .tb-valeur { color: var(--bp-danger-soft); }
.tb-cle.tb-attention { border-left: 3px solid var(--bp-warning); }
.tb-cle.tb-attention .tb-valeur { color: var(--bp-warning); }
.tb-cle.tb-bien { border-left: 3px solid var(--bp-success); }
.tb-cle.tb-bien .tb-valeur { color: var(--bp-success-soft); }
.tb-cle.tb-phare { border-left: 3px solid var(--bp-primary); }

/* --- 3. Les blocs --------------------------------------------------------- */
.tb-grille {
    display: grid;
    gap: .9rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
}
@media (max-width: 991px) { .tb-grille { grid-template-columns: minmax(0, 1fr); } }

.tb-bloc {
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-r-lg);
    background: var(--bp-surface);
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: .9rem;
}
.tb-bloc > h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .2rem;
    font-size: .93rem;
    font-weight: 800;
    color: var(--bp-text);
}
.tb-bloc > h2 .tb-suite {
    margin-left: auto;
    font-size: .755rem;
    font-weight: 600;
    color: var(--bp-text-3);
    text-decoration: none;
    white-space: nowrap;
}
.tb-bloc > h2 .tb-suite:hover { color: var(--bp-primary-soft); }
.tb-bloc > .tb-sous {
    margin: 0 0 .75rem;
    font-size: .755rem;
    color: var(--bp-text-3);
}

/* --- Les lignes cliquables ------------------------------------------------ */
/* Le texte d'une ligne garde toujours sa place : quand la ligne est trop etroite
   (telephone, colonne d'un tableau de bord), la pastille d'etat, la date et le
   bouton « lu » passent dessous, a droite, au lieu d'ecraser le titre a quelques
   pixels de large (un mot par ligne) ou de le couper par des points de suspension. */
.tb-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .7rem;
    padding: .6rem .7rem;
    border: 1px solid transparent;
    border-radius: var(--bp-r);
    background: var(--bp-surface-2);
    margin-bottom: .4rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease;
}
a.tb-ligne:hover { border-color: var(--bp-border-strong); }
.tb-ligne:last-child { margin-bottom: 0; }
.tb-ligne .tb-rond {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem;
    background: rgba(99, 102, 241, .14);
    color: var(--bp-primary-soft);
}
.tb-ligne .tb-rond.tb-r-rouge  { background: rgba(239, 68, 68, .14);  color: var(--bp-danger-soft); }
.tb-ligne .tb-rond.tb-r-orange { background: rgba(245, 158, 11, .14); color: var(--bp-warning); }
.tb-ligne .tb-rond.tb-r-vert   { background: rgba(16, 185, 129, .14); color: var(--bp-success-soft); }
.tb-ligne .tb-rond.tb-r-bleu   { background: rgba(56, 189, 248, .14); color: var(--bp-info); }
.tb-ligne .tb-corps { min-width: 0; flex: 1 1 10rem; }
.tb-ligne .tb-corps b {
    display: block;
    font-size: .845rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bp-text);
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
.tb-ligne .tb-corps small {
    display: block;
    font-size: .735rem;
    color: var(--bp-text-3);
    overflow-wrap: anywhere;
}
/* Ce qui suit le texte se range a droite, sur sa ligne ou sur la suivante. */
.tb-ligne > .tb-etat,
.tb-ligne > .tb-fin { margin-left: auto; }
/* La date et le bouton « lu » d'une alerte, ensemble. */
.tb-ligne .tb-fin-groupe { display: flex; align-items: center; gap: .3rem; }
/* « Marquer comme lu » : une cible de doigt (44 px), plus une coche de 15 px. */
.tb-lu {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tb-ligne .tb-fin {
    flex-shrink: 0;
    font-size: .8rem;
    font-weight: 700;
    color: var(--bp-text-2);
    font-variant-numeric: tabular-nums;
}

/* --- Pastilles d'etat : pictogramme + mot, jamais la couleur seule -------- */
.tb-etat {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .13rem .5rem;
    border-radius: var(--bp-r-pill);
    font-size: .695rem;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
.tb-etat.tb-e-rouge  { background: rgba(239, 68, 68, .15);  color: var(--bp-danger-soft); }
.tb-etat.tb-e-orange { background: rgba(245, 158, 11, .15); color: var(--bp-warning); }
.tb-etat.tb-e-vert   { background: rgba(16, 185, 129, .15); color: var(--bp-success-soft); }
.tb-etat.tb-e-bleu   { background: rgba(56, 189, 248, .15); color: var(--bp-info); }
.tb-etat.tb-e-gris   { background: rgba(148, 163, 184, .13); color: var(--bp-text-3); }

/* --- L'etat vide : il rassure, il ne s'excuse pas ------------------------- */
.tb-vide {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem .7rem;
    font-size: .8rem;
    color: var(--bp-text-3);
}
.tb-vide i { color: var(--bp-success); font-size: .95rem; }

/* --- 4. Le contexte discret ----------------------------------------------- */
.tb-pied {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    margin-top: .3rem;
    font-size: .745rem;
    color: var(--bp-text-3);
}
.tb-pied span { display: inline-flex; align-items: center; gap: .32rem; }
.tb-pied b { color: var(--bp-text-2); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Bandeau de tete : l'etat le plus important, en grand ------------------ */
.tb-bandeau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--bp-border);
    border-left: 4px solid var(--bp-border-strong);
    border-radius: var(--bp-r-lg);
    background: var(--bp-surface);
    margin-bottom: 1.1rem;
}
.tb-bandeau.tb-en-poste { border-left-color: var(--bp-success); }
.tb-bandeau.tb-hors-poste { border-left-color: var(--bp-text-3); }
.tb-bandeau .tb-pictogramme {
    width: 52px; height: 52px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.45rem;
    flex-shrink: 0;
    background: rgba(148, 163, 184, .12);
    color: var(--bp-text-3);
}
.tb-bandeau.tb-en-poste .tb-pictogramme {
    background: rgba(16, 185, 129, .14);
    color: var(--bp-success-soft);
}
.tb-bandeau .tb-dit { min-width: 0; }
.tb-bandeau .tb-dit strong {
    display: block;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--bp-text);
}
.tb-bandeau .tb-dit span { display: block; font-size: .8rem; color: var(--bp-text-3); }
.tb-bandeau .tb-horloge {
    margin-left: auto;
    font-family: var(--bp-font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bp-text);
    font-variant-numeric: tabular-nums;
}

/* --- Portes : la grille d'acces d'un espace a plusieurs modules ------------ */
.tb-portes {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.tb-porte {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .7rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-r);
    background: var(--bp-surface-2);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.tb-porte:hover { border-color: var(--bp-border-strong); transform: translateY(-2px); }
.tb-porte i { width: 18px; text-align: center; font-size: .85rem; color: var(--bp-text-3); }
.tb-porte b { font-size: .8rem; font-weight: 700; color: var(--bp-text-2); }
.tb-porte .tb-pastille {
    margin-left: auto;
    background: var(--bp-warning);
    color: #0f172a;
    font-weight: 800;
    border-radius: var(--bp-r-pill);
    font-size: .68rem;
    padding: .02rem .42rem;
}

@media (max-width: 575px) {
    .tb-accueil { font-size: 1.1rem; }
    .tb-cle .tb-valeur { font-size: 1.6rem; }
    .tb-bandeau .tb-horloge { font-size: 1.25rem; }
}