/**
 * Styles d'enveloppe transverses (voir layouts/base.php, layouts/resident.php).
 * S'appuie sur les variables Bootstrap (--bs-*) pour suivre le thème
 * clair/sombre sans feuille supplémentaire.
 */

/* --------------------------------------------------------------------
   Bandeaux flash (succès/erreur/info) : en superposition, jamais en flux
   normal, pour ne jamais décaler le reste de la page à leur apparition.
   -------------------------------------------------------------------- */
.flash-conteneur {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    z-index: 1090; /* niveau des toasts Bootstrap : au-dessus des modales (1055) */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none; /* la bande vide laisse passer les clics... */
}

.flash-conteneur .alert {
    pointer-events: auto; /* ...mais chaque bandeau reste cliquable (fermeture) */
    max-width: 480px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------
   Enveloppe de navigation rapide, partagée résident/CS (voir
   layouts/resident.php, CLAUDE.md §7.1/§7.2) : barre en haut plutôt qu'en
   bas pour ne jamais entrer en conflit avec un élément ancré en bas propre à
   l'écran (ex. le composeur de la messagerie) ; icône au-dessus du texte
   pour tenir sur une seule ligne même à 4 onglets sur un écran étroit.
   -------------------------------------------------------------------- */
.page-rapide {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* mobile : suit la barre d'adresse plutôt que de la déborder */
}

.nav-rapide {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    padding: 0.35rem;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.nav-rapide-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.2rem;
    border-radius: 0.6rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-rapide-item i {
    font-size: 1.2rem;
}

.nav-rapide-item.active {
    background-color: var(--bs-primary);
    color: #fff;
}

.page-rapide-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* --------------------------------------------------------------------
   Listes en cartes (incidents, événements) — 26/07/2026.

   Remplace les `list-group` denses d'origine, où titre, catégorie et statut
   se lisaient sur une seule ligne : sur téléphone (usage principal, §7.2) la
   ligne débordait et le statut passait à la ligne suivante, sans hiérarchie
   visuelle. Ici : un liseré coloré par état à gauche (repérable sans lire),
   un titre sur sa propre ligne, et les informations secondaires en dessous.

   Uniquement des variables --bs-* : le thème sombre (§7.2) suit sans règle
   dédiée.
   -------------------------------------------------------------------- */
.liste-cartes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.carte-ligne {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    /* Le liseré vit dans la bordure gauche : pas d'élément en plus à rendre,
       et l'épaisseur reste stable quel que soit le contenu. */
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--bs-secondary);
    border-radius: 0.6rem;
    background-color: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
}

/* Couleur du liseré par état. Attribut plutôt que classe : la valeur vient
   directement de l'enum côté PHP, sans table de correspondance en plus. */
.carte-ligne[data-etat="warning"]   { border-left-color: var(--bs-warning); }
.carte-ligne[data-etat="primary"]   { border-left-color: var(--bs-primary); }
.carte-ligne[data-etat="success"]   { border-left-color: var(--bs-success); }
.carte-ligne[data-etat="secondary"] { border-left-color: var(--bs-secondary); }
.carte-ligne[data-etat="danger"]    { border-left-color: var(--bs-danger); }

a.carte-ligne:hover,
a.carte-ligne:focus-visible {
    border-color: var(--bs-primary);
    border-left-color: var(--bs-primary);
    background-color: var(--bs-tertiary-bg);
}

.carte-corps {
    flex: 1 1 auto;
    min-width: 0; /* sans quoi un titre long empêche l'ellipse de s'appliquer */
}

/* Bootstrap 5.3 ne fournit pas d'utilitaire `min-width` : sans lui, un enfant
   flex refuse de rétrécir sous la largeur de son contenu et pousse les
   boutons d'action hors de la carte sur écran étroit. */
.min-w-0 {
    min-width: 0;
}

.carte-titre {
    font-weight: 600;
    line-height: 1.3;
}

/* Métadonnées : catégorie, date, artisan… Séparateurs insérés en CSS pour
   éviter des points isolés en début de ligne quand une donnée est absente. */
.carte-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Écart plus large qu'à la verticale : c'est lui qui sépare les
       métadonnées depuis le 27/07/2026, voir juste en dessous. */
    gap: 0.15rem 0.7rem;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

/* Plus de séparateur « · » entre les métadonnées (retiré le 27/07/2026, vu à la
   première relecture visuelle réelle — §9.6). Il vivait dans un `::before` de
   l'élément suivant : dès que la ligne passait à la ligne — le cas courant sur
   téléphone, où ce bloc porte trois éléments —, le point se retrouvait **en tête
   de ligne** (« · toutes les 6 semaines »), ce qui se lit comme une coquille.
   Aucune variante ne tient : en `::after` du précédent, le point pend en fin de
   ligne, et CSS n'a aucun moyen de savoir qu'un élément commence une ligne.
   L'écart horizontal suffit à séparer, et le premier élément est de toute façon
   un badge coloré. */

.carte-chevron {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
}

/* Pastille de date du calendrier : jour en gros, mois en dessous — le repère
   qu'on cherche en premier dans une liste d'événements. */
.carte-date {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3rem;
    padding: 0.3rem 0;
    border-radius: 0.5rem;
    background-color: var(--bs-tertiary-bg);
    line-height: 1.1;
}

.carte-date-jour {
    font-size: 1.25rem;
    font-weight: 700;
}

.carte-date-mois {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Événement du jour/lendemain : la pastille prend la couleur d'accent plutôt
   qu'un badge de plus à côté du titre. */
.carte-ligne[data-imminent="1"] .carte-date {
    background-color: var(--bs-primary);
    color: #fff;
}

.carte-ligne[data-imminent="1"] .carte-date-mois {
    color: rgba(255, 255, 255, 0.85);
}

/* En-tête de section (« En cours », « À venir »…) avec son compteur. */
.liste-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.liste-section:first-of-type {
    margin-top: 0;
}

.liste-section::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--bs-border-color);
}

/* État vide : même traitement que la messagerie (`.msg-vide`) pour que les
   écrans se ressemblent quand ils n'ont rien à montrer. */
.liste-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.6rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

/* Le sélecteur porte sur l'enfant direct, jamais sur les descendants
   (28/07/2026, signalé à la relecture visuelle) : plusieurs états vides
   proposent une action sous le texte (« Créer le premier », « Signaler un
   problème », « Fiches équipements »), et l'icône de ces boutons héritait
   sinon de la taille de l'icône d'illustration — un « + » de 1,75 rem dans un
   `btn-sm`, qui pousse le libellé hors de l'axe. La grande icône est
   toujours, elle, l'enfant direct du bloc. */
.liste-vide > i {
    font-size: 1.75rem;
    opacity: 0.6;
}

/* --------------------------------------------------------------------
   Rapport d'activité (26/07/2026, §8) — un même écran pour deux usages :
   consulté dans l'outil, puis imprimé (ou « enregistré en PDF ») pour être
   joint à une convocation d'AG ou projeté en séance.

   Le PDF est produit par le navigateur, pas par le serveur : c'est ce bloc
   `@media print` qui tient lieu de mise en page du document. D'où deux
   exigences qui n'ont pas d'équivalent ailleurs dans cette feuille — retirer
   tout ce qui relève de l'outil (navigation, formulaire de période, boutons,
   `.d-print-none` de Bootstrap s'en charge) et forcer un rendu noir sur blanc,
   le thème sombre (§7.2) donnant sinon des pages entièrement noires à
   l'impression.
   -------------------------------------------------------------------- */
.rapport-entete {
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--bs-border-color);
}

.rapport section {
    margin-bottom: 1.5rem;
}

.rapport-pied {
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Dans un `.table-responsive`, une `.table` fait quand même 100 % du conteneur :
   sur téléphone, les cellules se brisaient donc mot par mot (« Interphone / cage
   A / hors / service ») au lieu de laisser le tableau défiler. On lui rend une
   largeur naturelle minimale — c'est le conteneur qui défile, le tableau reste
   lisible. Sans effet à l'impression, où la page est plus large que ça. */
.rapport .table-responsive > .table {
    min-width: 34rem;
}

@media print {
    /* Le thème sombre s'applique par `data-bs-theme` sur <html> : on neutralise
       ici les variables de fond/texte plutôt que d'écrire des couleurs en dur
       dans chaque règle. */
    :root {
        --bs-body-bg: #fff;
        --bs-body-color: #000;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    nav,
    .navbar,
    .nav-rapide,
    .flash-conteneur {
        display: none !important;
    }

    main.container {
        max-width: none !important;
        padding: 0 !important;
    }

    .rapport .card {
        border: 1px solid #999 !important;
    }

    /* Un équipement et son tableau de maintenances ne doivent pas se retrouver
       de part et d'autre d'un saut de page : c'est la comparaison
       échéance/réalisé qui perdrait son sens. */
    .rapport section,
    .rapport table {
        break-inside: avoid;
    }

    .rapport h3,
    .rapport h4 {
        break-after: avoid;
    }

    /* La mention de bas de document (ce que le rapport n'est pas — §7.3) se
       coupait en deux par un saut de page : c'est la phrase qui cadre la portée
       du document, elle doit se lire d'un bloc. */
    .rapport-pied {
        break-inside: avoid;
    }

    /* Les tableaux sont dans un `.table-responsive` pour l'écran (§7.3, 27/07/2026)
       — un défilement horizontal sur téléphone. À l'impression, `overflow: auto`
       couperait ce qui dépasse au lieu de le laisser tenir sur la largeur du A4,
       où il tient. */
    .rapport .table-responsive {
        overflow: visible !important;
    }
}