/* ═══════════════════════════════════════════════════════════════════════════
   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), Facture
   (invoice-invoice).
   ═══════════════════════════════════════════════════════════════════════════ */

@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; }

  /* ─── Facture  (/invoice/<hash> · body.invoice-invoice) ───────────────────
     Deux rendus selon enable_default_invoice_page : « facture d'origine » en
     .card (en-tête PDF/Imprimer en d-flex sans wrap) et rendu par défaut
     .invoice-wrapper (colonnes 9/3 déjà empilées ≤991px par cloudx_responsive).
     Les 4 tableaux sont dans .table-responsive (Tabler : overflow-x:auto) →
     défilement interne, jamais du body. On resserre les paddings (cloudx :
     45/30px sur .invoice-inner-left, 20px sur .invoice-actions ; .card-body
     porte un !important dans design-bridge), tableau à 13px, n° de facture
     35px → 26px, logos de passerelles en wrap (d-flex sans wrap → débordement)
     et boutons d'action (payer, PDF, imprimer, télécharger) pleine largeur. */
  .invoice-invoice .card-body { padding: 16px !important; }
  .invoice-invoice .invoice-inner-left,
  .invoice-invoice .invoice-actions { padding: 16px; }
  .invoice-invoice .invoice-inner-right { margin-top: 24px; }
  .invoice-invoice .invoice-pay-to-section,
  .invoice-invoice .invoice-item-section { margin-top: 24px; }
  .invoice-invoice span.invoice-number { font-size: 26px; }
  .invoice-invoice .table-responsive { -webkit-overflow-scrolling: touch; }
  .invoice-invoice .table-responsive .table { font-size: 13px; }
  .invoice-invoice .table-responsive .table th,
  .invoice-invoice .table-responsive .table td { padding: 8px 10px; }
  .invoice-invoice .well { overflow-wrap: anywhere; }
  .invoice-invoice .card-header > .d-flex.justify-content-between {
    flex-direction: column;
    gap: 12px;
  }
  .invoice-invoice .card-header .d-flex.gap-2 {
    flex-direction: column;
    align-items: stretch !important;
  }
  .invoice-invoice .alnotra_head_card form > .d-flex { flex-wrap: wrap; }
  .invoice-invoice .card-header .btn,
  .invoice-invoice .alnotra_head_card .btn-success,
  .invoice-invoice .invoice_download_links a.btn {
    display: block;
    width: 100%;
    text-align: center;
  }
  .invoice-invoice .invoice_download_links {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
}