/* 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;
}
/* 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 {
    outline: none;
}

/* Etat vide / message plein largeur. */
.isis-m-note {
    padding: 1rem;
    text-align: center;
    color: var(--isis-text-muted);
    font-size: 0.9rem;
}

/* 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;
}
.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);
}
.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 {
    box-shadow: var(--isis-elevation-2), var(--isis-elevation-focus);
}