/* admin-mobile-finances.css — voir admin-mobile.css pour la base commune (≤ 700 px)
   Zones : panneau Finances (#p-finances), Cahier de liaison (#p-suivi),
   écran de connexion et modales réinitialisation / refus.
   Seule règle hors media query : .fin-m-only (texte réservé au mobile) est masqué. */

.fin-m-only { display: none; }

@media (max-width: 700px) {

  .fin-m-only { display: inline; }

  /* ==================================================================
     FINANCES
     ================================================================== */

  /* Barre « Année scolaire » : libellé + liste sur une ligne, mention dessous */
  #fin-annee { flex: 1 1 140px; }
  #fin-etat:empty { display: none; }

  /* ── Synthèse : mois par mois, 4 colonnes sans défilement ─────────── */
  #p-finances table.fin-mois {
    display: table;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible;
    table-layout: auto;
    font-size: .78rem !important;
  }
  #p-finances table.fin-mois .fin-col-solde { display: none; }
  #p-finances table.fin-mois th {
    white-space: normal;
    font-size: .64rem !important;
    letter-spacing: 0 !important;
    vertical-align: bottom;
    padding: .35rem .2rem !important;
  }
  #p-finances table.fin-mois td { padding: .4rem .2rem !important; white-space: nowrap; }
  #p-finances table.fin-mois td:first-child, #p-finances table.fin-mois th:first-child { padding-left: 0 !important; }
  #p-finances table.fin-mois td:last-child, #p-finances table.fin-mois th:last-child { padding-right: 0 !important; }

  /* ── Synthèse : avances non remboursées en fiches compactes ─────────── */
  #p-finances table.fin-avances,
  #p-finances table.fin-avances > tbody { display: block; overflow: visible; font-size: .85rem !important; }
  #p-finances table.fin-avances tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "qui mont" "lib lib" "date act";
    align-items: center;
    gap: .15rem .6rem;
    padding: .6rem 0;
  }
  #p-finances table.fin-avances td { padding: 0 !important; white-space: normal; text-align: left !important; }
  #p-finances table.fin-avances .fin-av-qui { grid-area: qui; }
  #p-finances table.fin-avances .fin-av-mont { grid-area: mont; font-weight: 700; white-space: nowrap; text-align: right !important; }
  #p-finances table.fin-avances .fin-av-lib { grid-area: lib; font-size: .8rem; }
  #p-finances table.fin-avances .fin-av-date { grid-area: date; font-size: .76rem; color: #92400e; }
  #p-finances table.fin-avances .fin-av-act { grid-area: act; text-align: right !important; padding-top: .3rem !important; }
  #p-finances table.fin-avances .fin-av-act button { font-size: .8rem !important; padding: .4rem .8rem !important; }

  /* ── Pôles : formulaire de dépense ─────────────────────────────────── */
  #p-finances .fin-justif-aide { display: block; font-weight: 400; font-size: .7rem; color: #9ca3af; margin-top: .1rem; }
  #p-finances .fin-justif input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: .8rem !important;
    color: #6b7280;
    padding: .35rem;
    border: 1.5px dashed #d1d5db;
    border-radius: 8px;
    box-sizing: border-box;
  }
  #p-finances .fin-justif input[type="file"]::file-selector-button {
    min-height: 38px;
    margin-right: .6rem;
    padding: .4rem .8rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: #1a2e22;
  }
  #p-finances .fin-justif input[type="file"]::-webkit-file-upload-button {
    min-height: 38px;
    margin-right: .6rem;
    padding: .4rem .8rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: #1a2e22;
  }
  /* case « Remboursé » : alignée normalement une fois la grille sur 1 colonne */
  #p-finances label[for$="-rembourse"], #p-finances label:has(> input[id$="-rembourse"]) { padding-bottom: 0 !important; min-height: 40px; }
  #p-finances .fin-form-actions > .btn { flex: 1 1 auto; }
  #p-finances .fin-form-actions > span:empty { display: none; }

  /* ── Pôles : liste des dépenses en fiches compactes ─────────────────── */
  #p-finances table.fin-deps,
  #p-finances table.fin-deps > tbody { display: block; width: 100% !important; min-width: 0 !important; overflow: visible; font-size: .85rem !important; }
  #p-finances table.fin-deps > thead { display: none; }
  #p-finances table.fin-deps > tbody > tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "lib  lib  mont"
      "date cat  cat"
      "paye paye paye"
      "act  act  act";
    gap: .2rem .4rem;
    margin: 0 0 .6rem;
    padding: .65rem .8rem;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }
  #p-finances table.fin-deps > tbody > tr.fin-d-edit { background: #fffbeb; border-color: #fbbf24 !important; }
  #p-finances table.fin-deps td { padding: 0 !important; white-space: normal; text-align: left !important; overflow-wrap: anywhere; }
  #p-finances table.fin-deps .fin-d-lib { grid-area: lib; font-size: .88rem; }
  #p-finances table.fin-deps .fin-d-mont { grid-area: mont; white-space: nowrap; text-align: right !important; font-size: .95rem; }
  #p-finances table.fin-deps .fin-d-date { grid-area: date; font-size: .78rem; color: #6b7280; white-space: nowrap; }
  #p-finances table.fin-deps .fin-d-cat { grid-area: cat; font-size: .78rem; color: #6b7280; }
  #p-finances table.fin-deps .fin-d-cat::before { content: "· "; }
  #p-finances table.fin-deps .fin-d-paye { grid-area: paye; font-size: .8rem; }
  #p-finances table.fin-deps .fin-d-act {
    grid-area: act;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
    padding-top: .45rem !important;
    margin-top: .25rem;
    border-top: 1px solid #f3f4f6;
  }
  #p-finances table.fin-deps .fin-d-act > a, #p-finances table.fin-deps .fin-d-act > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 44px;
    margin: 0 !important;
    padding: .35rem .6rem !important;
    border-radius: 8px !important;
    font-size: .82rem !important;
    color: #374151;
  }
  #p-finances table.fin-deps .fin-d-justif { margin-right: auto !important; background: #eff6ff; color: #1e40af !important; font-weight: 600; }
  #p-finances table.fin-deps .fin-d-retirer { background: #f9fafb !important; border: 1px solid #e5e7eb !important; }

  /* ==================================================================
     CAHIER DE LIAISON
     ================================================================== */

  /* Champs statiques sans style propre : même habillage que le reste */
  #p-suivi input:not([type="checkbox"]):not([type="radio"]), #p-suivi select {
    padding: .5rem .65rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
  }
  #suivi-vue-filtre { width: 100%; }

  /* Boutons de la feuille d'appel : l'un sous l'autre, alignés */
  #p-suivi .card > a.btn { margin: 0 0 .45rem !important; display: flex !important; justify-content: center; align-items: center; }

  /* Vue d'ensemble : lien « Bilans PDF » en vraie cible tactile */
  #suivi-vue-groupes a[href^="suivi_bilan.php"] { display: inline-flex; align-items: center; min-height: 40px; }

  /* Élèves : le lien « Bilan » aligné sur les boutons */
  #suivi-vue-eleves td.m-actions a { display: inline-flex !important; align-items: center; }
  #suivi-vue-eleves td.m-actions button, #suivi-vue-eleves td.m-actions a { padding: .35rem .7rem !important; font-size: .8rem !important; }

  /* Vacances : liste — nom + ✕ sur une ligne, dates dessous */
  #suivi-vac-liste > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .1rem .6rem;
    padding: .5rem 0 !important;
  }
  #suivi-vac-liste > div > b { grid-column: 1; grid-row: 1; }
  #suivi-vac-liste > div > span { grid-column: 1; grid-row: 2; font-size: .78rem; }
  #suivi-vac-liste > div > button { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 44px; }
  /* Vacances : saisie — nom pleine largeur, les 2 dates côte à côte, bouton dessous */
  #suivi-vac-nom { flex: 1 1 100% !important; }
  #suivi-vac-debut, #suivi-vac-fin { flex: 1 1 calc(50% - .25rem) !important; min-width: 0 !important; width: 0; }
  #suivi-vac-nom ~ button { flex: 1 1 100%; justify-content: center; text-align: center; }

  /* Archivage : libellé au-dessus, champ pleine largeur */
  #p-suivi label:has(> #suivi-arch-annee), #p-suivi label:has(> #suivi-arch-garder) { display: block; width: 100%; }
  #suivi-arch-annee, #suivi-arch-garder { display: block; width: 100% !important; margin: .3rem 0 0 !important; }
  #suivi-arch-liste td.m-actions button, #suivi-arch-liste button { margin-left: 0 !important; min-height: 40px; }

  /* Registre : le statut de synchro passe dessous */
  #suivi-sync-status { display: block; margin: .5rem 0 0 !important; }

  /* ==================================================================
     CONNEXION ET MODALES
     ================================================================== */
  .lbox { padding: 2rem 1.25rem; }
  .lbox .reset-link, .rbox .btn-cancel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: .25rem;
    font-size: .85rem;
  }
  .rbox { padding: 1.5rem 1.1rem !important; }
  .rbox .row2r { gap: 0; margin-bottom: 0; }
  .rbox [data-action="sendResetCode"]:not(button) { display: inline-block; padding: .6rem .3rem; }
}