/* Styles mobiles reutilisables du compagnon /m/. Charges pour tout /m/*.
   Prefixe .isis-m-* pour ne jamais entrer en collision avec le shell desktop. */

/* Liste de cartes empilees : la forme mobile d'une grille transactionnelle. */
.isis-m-cards {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.isis-m-card {
    background: var(--isis-surface);
    border: 1px solid var(--isis-border);
    border-radius: var(--isis-radius-lg);
    box-shadow: var(--isis-elevation-1);
    padding: 0.75rem 0.85rem;
}
.isis-m-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.isis-m-card__title {
    font-weight: 600;
    color: var(--isis-text);
    flex: 1 1 auto;
}
.isis-m-card__meta {
    color: var(--isis-text-muted);
    font-size: 0.85rem;
    margin-top: 0.35rem;
}
.isis-m-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
/* Carte-accordeon : l'en-tete est un bouton pleine largeur qui deplie le detail. */
.isis-m-card__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;              /* WCAG 2.5.5 : cible tactile >= 44px */
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.isis-m-card__spacer {
    flex: 1 1 auto;
}
/* Le point de statut duplique le badge textuel sur une carte mobile : sur une grille
   desktop dense il aide au scan, ici il ne fait que grignoter la largeur d'une ligne
   deja a 4 elements. Masque (l'info reste dans le badge « APPROUVEE »). */
.isis-m-card__toggle .isis-grid__status-dot {
    display: none;
}
.isis-m-card__toggle:focus-visible {
    outline: none;
    box-shadow: var(--isis-elevation-focus);
    border-radius: var(--isis-radius);
}
.isis-m-card__detail {
    margin-top: 0.6rem;
    border-top: 1px solid var(--isis-border);
    padding-top: 0.6rem;
}

/* Carte cliquable (lien-hub) : pas de soulignement, retour tactile discret. */
a.isis-m-hub {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.isis-m-hub:active {
    background: var(--isis-surface-alt);
}
a.isis-m-hub:focus-visible {
    outline: none;
    box-shadow: var(--isis-elevation-1), var(--isis-elevation-focus);
}

/* Section de page mobile (titre + contenu). */
.isis-m-section {
    margin-bottom: 1rem;
}
.isis-m-section__title {
    font-size: 0.8rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--isis-text-muted);
    margin: 0 0 0.5rem;
}
/* Titre de page mobile (h1) : lisible comme un titre, pas comme un sur-titre de section. */
.isis-m-title {
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--isis-text);
    margin: 0 0 0.6rem;
}
/* FocusOnNavigate (Routes.razor) pose tabindex=-1 + focus() sur le premier h1 apres
   navigation, pour annoncer le titre au lecteur d'ecran. Ce focus est PROGRAMMATIQUE :
   il ne doit pas afficher d'anneau visuel (l'utilisateur n'a pas focuse au clavier). */
.isis-m-section__title:focus,
.isis-m-section__title:focus-visible,
.isis-m-title:focus,
.isis-m-title:focus-visible {
    outline: none;
}

/* Etat vide / message plein largeur. */
.isis-m-note {
    padding: 1rem;
    text-align: center;
    color: var(--isis-text-muted);
    font-size: 0.9rem;
}
/* Echec (role=alert) : ne se confond plus avec un etat vide. */
.isis-m-note--error {
    color: var(--isis-danger);
}
.isis-m-note__text {
    margin: 0 0 0.6rem;
}

/* Paragraphe d'introduction sous le titre de section. */
.isis-m-lead {
    font-size: var(--isis-fs-sm);
    color: var(--isis-text-muted);
    margin: -0.2rem 0 0.6rem;
}
/* Precision attenuee dans le corps d'une vue. */
.isis-m-hint {
    font-size: var(--isis-fs-sm);
    color: var(--isis-text-muted);
    margin: 0 0 0.6rem;
}

/* Navigation precedent / suivant (mois, jour) : libelle centre entre deux boutons. */
.isis-m-stepper {
    align-items: center;
    margin-bottom: 0.5rem;
}
.isis-m-stepper__label {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 600;
}

/* Liste de lignes separees par un filet (segments horaires, appareils). */
.isis-m-segments {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.isis-m-segments > li {
    border-top: 1px solid var(--isis-border);
    padding-top: 0.4rem;
}

/* Kilometrage d'un vehicule, aligne a droite de la carte. */
.isis-m-km {
    text-align: right;
    white-space: nowrap;
}
.isis-m-km__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.isis-m-km__unit {
    color: var(--isis-text-muted);
    font-size: var(--isis-fs-sm);
}

/* Salutation de l'accueil. */
.isis-m-greeting {
    margin-bottom: 0.9rem;
}
.isis-m-greeting__hello {
    font-size: 0.85rem;
    color: var(--isis-text-muted);
}
.isis-m-greeting__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--isis-text);
    line-height: 1.15;
}

/* Banniere d'information (collaborateur non rattache). */
.isis-m-banner {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;              /* un bouton d'action (ex. "Installer") passe a la ligne plutot que deborder a 390px */
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.9rem;
    background: color-mix(in srgb, var(--isis-info) 8%, var(--isis-surface));
    border: 1px solid color-mix(in srgb, var(--isis-info) 30%, transparent);
    border-radius: var(--isis-radius);
    color: var(--isis-text);
    font-size: 0.85rem;
}
.isis-m-banner .rzi {
    color: var(--isis-info);
    flex: 0 0 auto;
    margin-top: 1px;
}

/* KPI compact en ligne (soldes d'absence par ex.). */
.isis-m-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  /* 3 colonnes tiennent a 390px */
    gap: 0.5rem;
}
.isis-m-kpi {
    background: var(--isis-surface-alt);
    border-radius: var(--isis-radius);
    padding: 0.6rem 0.7rem;
}
.isis-m-kpi__label {
    font-size: 0.72rem;
    color: var(--isis-text-muted);
}
.isis-m-kpi__value {
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--isis-text);
}
.isis-m-kpi__hint {
    font-size: 0.72rem;
    color: var(--isis-text-muted);
}

/* Actions secondaires d'une carte (ex. « Relevé km », « Révoquer », « Ouvrir »). Le geste
   PRINCIPAL de la page est le FAB ; celles-ci vivent par carte, sous le contenu. */
.isis-m-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
/* Rangee centree : bouton « Reessayer » d'un etat d'erreur, pagination. */
.isis-m-card__actions--center {
    justify-content: center;
}
.isis-m-card__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;             /* cible tactile WCAG 2.5.5 */
    padding: 0 0.7rem;
    border-radius: var(--isis-radius);
    border: 1px solid var(--isis-border);
    background: var(--isis-surface-alt);
    color: var(--isis-text);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.isis-m-card__action-btn .rzi {
    font-size: 16px;
}
.isis-m-card__action-btn:focus-visible {
    outline: none;
    box-shadow: var(--isis-elevation-focus);
}
/* aria-disabled est traite comme :disabled : un bouton laisse atteignable pour que sa raison
   s'annonce doit quand meme se LIRE comme indisponible. Cf. isis-theme.css, meme couple. */
.isis-m-card__action-btn:disabled,
.isis-m-card__action-btn[aria-disabled="true"] {
    opacity: 0.55;
    color: var(--isis-text-muted);
    cursor: not-allowed;
}
.isis-m-card__action-btn--primary {
    background: var(--isis-accent);
    border-color: var(--isis-accent);
    color: white;
}
.isis-m-card__action-btn--danger {
    color: var(--isis-danger);
    border-color: color-mix(in srgb, var(--isis-danger) 40%, var(--isis-border));
}
/* Variante carree, icone seule (ex. annuler une reservation, revoquer une delegation). */
.isis-m-card__action-btn--icon {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
}

/* Lien de retour (ex. "‹ Mes projets"). Distinct de .isis-m-card__action-btn : revenir n'est
   pas une action metier, il ne doit pas ressembler a "Soumettre"/"Supprimer" juste en dessous. */
.isis-m-backlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.2rem;
    background: none;
    border: none;
    color: var(--isis-accent);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.isis-m-backlink:focus-visible {
    outline: none;
    box-shadow: var(--isis-elevation-focus);
    border-radius: var(--isis-radius);
}

/* Bouton d'action flottant : le geste principal d'une vue, au pouce. */
.isis-m-fab {
    position: fixed;
    right: 1rem;
    bottom: calc(64px + env(safe-area-inset-bottom) + 0.75rem);  /* au-dessus de la bottom-nav */
    z-index: 30;
    width: 52px;
    height: 52px;
    border-radius: var(--isis-radius-pill);
    border: none;
    cursor: pointer;
    background: var(--isis-accent);
    color: white;
    box-shadow: var(--isis-elevation-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.isis-m-fab .rzi {
    font-size: 26px;
}
.isis-m-fab:focus-visible,
/* FAB de dépôt : un <label> qui enveloppe un input fichier transparent — le focus tombe
   sur l'input, l'anneau se pose sur le FAB. */
.isis-m-fab:has(:focus-visible) {
    box-shadow: var(--isis-elevation-2), var(--isis-elevation-focus);
}
.isis-m-fab:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.isis-m-card__hint {
    align-self: center;
    /* Seul avertissement de sortie du compagnon : il se lit, il ne se devine pas.
       --isis-fs-xs (0.68rem) le rendait plus petit que tout le reste du compagnon. */
    font-size: var(--isis-fs-sm);
    color: var(--isis-text-muted);
}