/* ═══════════════════════════════════════════════════════════════════════════
   client-mobile.css — Finitions responsive mobile de l'espace client Alnotra
   ---------------------------------------------------------------------------
   Chargé après design-bridge.css dans layout_default.html.twig, donc prioritaire
   sur les CSS legacy à spécificité égale.

   TOUTES les règles sont doublement scopées :
     1. par la body-class de la page ({% block body_class %}) → aucune fuite
        d'une page à l'autre ;
     2. dans @media (max-width: 768px) → aucun impact sur le rendu desktop.

   Le tableau de bord (clientareahome) a ses propres règles mobiles dans
   dashboard.css et n'est pas concerné ici.

   Pages couvertes : Mes factures (invoice-index), Portefeuille (client-balance),
   Votre profil (client-profile), Tickets (support-tickets), Mes services
   (order-list), Catalogue (order-index → mod_hosting_index).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── Mes factures  (/invoice · body.invoice-index) ───────────────────────
     Le tableau est déjà contenu par .al-table-responsive{overflow-x:auto}.
     On masque deux colonnes secondaires (Date d'émission, Date de paiement) et
     on retire le plancher de largeur (design-bridge min-width:560/640px) qui
     forçait un scroll horizontal interne. Colonnes : 1=N° 2=Date 3=Payée 4=Total
     5=Statut → on garde N° / Total / Statut. */
  .invoice-index #tableInvoicesList th:nth-child(2),
  .invoice-index #tableInvoicesList td:nth-child(2),
  .invoice-index #tableInvoicesList th:nth-child(3),
  .invoice-index #tableInvoicesList td:nth-child(3) { display: none; }
  .invoice-index #tableInvoicesList { min-width: 0 !important; }
  .invoice-index .al-card-header-subtitle { display: none; }

  /* ─── Portefeuille  (/client/balance · body.client-balance) ───────────────
     Seul vrai débordement de l'espace client : l'en-tête (titre + formulaire
     « Alimenter ») en d-flex sans wrap poussait le bouton hors de l'écran.
     On empile en colonne, formulaire pleine largeur, champ montant fluide.
     On masque la colonne Date (secondaire) et le sous-titre. */
  .client-balance .card-header > .d-flex {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }
  .client-balance .card-header form.form-inline {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }
  .client-balance .card-header form.form-inline .form-control.w-50 {
    width: auto !important;      /* neutralise le 50 % figé */
    flex: 1 1 auto;
  }
  .client-balance .card-header .small.text-muted { display: none; }
  .client-balance .table thead th:nth-child(2),
  .client-balance .table tbody td:nth-child(2) { display: none; }
  .client-balance .table td:first-child { white-space: normal; word-break: break-word; }

  /* ─── Votre profil  (/client/profile · body.client-profile) ───────────────
     Grille Bootstrap déjà responsive (pas de débordement). Décluttering :
     on masque le bloc avatar Gravatar (décoratif) et on resserre le padding. */
  .client-profile #details-tab-pane .row.mb-4.justify-content-center { display: none; }
  .client-profile .card-body { padding: 16px; }

  /* ─── Tickets  (/support · body.support-tickets) ──────────────────────────
     Table 6 colonnes (1=Id 2=Sujet 3=Support 4=Statut 5=Soumis 6=Actions) →
     on masque Id / Support / Soumis (garde Sujet / Statut / Actions), on
     resserre le padding, on masque l'encart « Base de connaissances » et les
     sous-titres redondants. */
  .support-tickets #tableTicketsList th:nth-child(1),
  .support-tickets #tableTicketsList td:nth-child(1),
  .support-tickets #tableTicketsList th:nth-child(3),
  .support-tickets #tableTicketsList td:nth-child(3),
  .support-tickets #tableTicketsList th:nth-child(5),
  .support-tickets #tableTicketsList td:nth-child(5) { display: none; }
  .support-tickets .al-table th,
  .support-tickets .al-table td { padding: 10px 8px; }
  .support-tickets .al-filter-sidebar > .al-card:last-child { display: none; }
  .support-tickets .al-card-header-subtitle,
  .support-tickets .al-page-subtitle { display: none; }

  /* ─── Mes services  (/order/service · body.order-list) ────────────────────
     Table contenue par overflow-x:auto. Champ de recherche fluide (était figé
     à 250px), colonnes secondaires masquées (N° commande, Prochaine échéance),
     padding resserré. Colonnes : 1=N° 2=Produit 3=Prix 4=Échéance 5=Statut
     6=Actions → on garde Produit / Prix / Statut / Actions. */
  .order-list #serviceSearch { width: 100% !important; }
  .order-list #tableOrderList th:nth-child(1),
  .order-list #tableOrderList td:nth-child(1),
  .order-list #tableOrderList th:nth-child(4),
  .order-list #tableOrderList td:nth-child(4) { display: none; }
  .order-list #tableOrderList th,
  .order-list #tableOrderList td { padding: 8px 10px; }

  /* ─── Catalogue  (/order → /alnotra/hosting · body.order-index) ───────────
     Grille produits en une colonne (robuste sous 300px). Le descriptif produit
     (.plan-include) rend du HTML admin en |raw : on le contient (mots longs,
     images, tableaux) — c'est le risque n°1 de débordement réel. On masque les
     frais d'installation (détail secondaire) et on resserre le padding carte. */
  .order-index .products-grid { grid-template-columns: 1fr; gap: 12px; }
  .order-index .product { padding: 16px; }
  .order-index .p-setup-fee { display: none; }
  .order-index .plan-include { overflow-wrap: anywhere; word-break: break-word; }
  .order-index .plan-include img { max-width: 100%; height: auto; }
  .order-index .plan-include table { display: block; max-width: 100%; overflow-x: auto; }
}