/* ============================================================
   DS Mobile EVO-063 SL 1.2 — LAYOUT
   ------------------------------------------------------------
   Patterns layout activés uniquement en mobile (≤ 767 px). Le
   chargement est conditionnel via `<link media>` dans base.html.twig
   — pas de @media wrapping ici (les classes .m-* sont sémantiquement
   mobile-only par convention).

   NOTE : la topbar et le drawer mobiles ne sont PAS définis ici —
   ils sont gérés par les overrides desktop classes en SL 1.1
   (`.topbar`, `.app-sidebar` + media queries dans app.css).

   Patterns livrés :
   - .m-content        : zone scrollable avec padding-bottom safe-area
   - .m-section-title  : libellé uppercase muted de section
   - .m-page-title     : H1 d'écran (18 px bold)
   - .m-month-switch   : sticky sous-topbar (mois courant + nav < >)
   - .m-bottom-bar     : sticky bottom action bar (équiv EVO-010 mobile)
   - .m-sheet          : bottom sheet slide-up modale mobile
   ============================================================ */

/* ============================================================
   Content scrollable — réserve l'espace bottom-bar + safe-area.
   ============================================================ */
.m-content {
    padding: var(--m-sp-3);
    /* P0-B audit : intégrer safe-area-inset-bottom dans le padding réservé
       à la bottom-bar pour que le dernier item ne passe pas sous le bouton
       home iOS / barre navigation Android. */
    padding-bottom: calc(var(--m-h-bottombar) + var(--m-sp-6) + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   Titres dans le contenu
   ============================================================ */
.m-section-title {
    font-size: var(--m-fs-sm);
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: var(--m-fw-semibold);
    margin: var(--m-sp-1) var(--m-sp-1) var(--m-sp-1);
}

.m-page-title {
    font-size: var(--m-fs-xl);
    font-weight: var(--m-fw-bold);
    color: var(--m-text);
    margin: var(--m-sp-1) 0 var(--m-sp-3);
    line-height: var(--m-lh-tight);
}

/* ============================================================
   Month switcher — sticky sous la topbar (cra-edit, dashboard…).
   ============================================================ */
.m-month-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--m-surface);
    padding: var(--m-sp-2) var(--m-sp-3);
    border-bottom: 1px solid var(--m-border);
    position: sticky;
    /* P0-B : suit la topbar qui inclut le safe-area-inset-top */
    top: calc(var(--m-h-topbar) + env(safe-area-inset-top, 0px));
    z-index: var(--m-z-monthswitch);
    min-height: var(--m-h-monthswitch);
}
.m-month-switch-label {
    font-weight: var(--m-fw-bold);
    font-size: var(--m-fs-lg);
    color: var(--m-text);
    line-height: var(--m-lh-tight);
}
.m-month-switch-sub {
    font-size: var(--m-fs-xs);
    color: var(--m-text-muted);
    line-height: 1.1;
    margin-top: 1px;
}
.m-month-switch-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-md);
    background: var(--m-surface);
    color: var(--m-text);
    font-size: var(--m-fs-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Bottom action bar — sticky bottom (équivalent EVO-010 mobile).
   ============================================================ */
.m-bottom-bar {
    position: sticky;
    bottom: 0;
    background: var(--m-surface);
    border-top: 1px solid var(--m-border);
    /* P0-B : padding-bottom safe-area pour iPhone à barre home et Android
       avec gesture nav. P2-2 : pseudo-element ::before en gradient pour
       faire un scrim de séparation au scroll. */
    padding: var(--m-sp-2) var(--m-sp-3) calc(var(--m-sp-2) + env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: var(--m-sp-2);
    align-items: center;
    z-index: var(--m-z-bottombar);
    box-shadow: var(--m-shadow-bar);
    min-height: var(--m-h-bottombar);
}
.m-bottom-bar::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 16px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.m-bottom-bar-kpi {
    flex: 1;
    min-width: 0;
}
.m-bottom-bar-kpi .label {
    font-size: var(--m-fs-xs);
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
}
.m-bottom-bar-kpi .value {
    font-size: var(--m-fs-lg);
    font-weight: var(--m-fw-bold);
    color: var(--m-text);
    line-height: var(--m-lh-tight);
}

/* ============================================================
   Bottom sheet — slide-up modale mobile (saisie rapide,
   confirmation, action context-menu). Backdrop semi-opaque
   au-dessus du contenu, sheet ancré bas.
   ============================================================ */
.m-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: var(--m-z-sheet);
    display: flex;
    align-items: flex-end;
}
.m-sheet {
    width: 100%;
    background: var(--m-surface);
    border-top-left-radius: var(--m-r-xl);
    border-top-right-radius: var(--m-r-xl);
    padding: var(--m-sp-4) var(--m-sp-4) calc(var(--m-sp-6) + env(safe-area-inset-bottom, 0px));
    max-height: 80%;
    overflow-y: auto;
    box-shadow: var(--m-shadow-sheet);
}
.m-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--m-border-strong);
    border-radius: 2px;
    margin: 0 auto var(--m-sp-3);
}
.m-sheet-title {
    font-size: var(--m-fs-lg);
    font-weight: var(--m-fw-bold);
    margin-bottom: var(--m-sp-1);
}
.m-sheet-desc {
    font-size: var(--m-fs-sm);
    color: var(--m-text-muted);
    margin-bottom: var(--m-sp-3);
}