/* Dashboard Rubis - couche d'affichage TELEPHONE.
   Senedoo - 2026-08-15 - lisibilite du dashboard Rubis sur telephone.

   Tout ce fichier vit SOUS 820 px de large : au-dessus, pas une regle ne
   s'applique - l'affichage bureau est rigoureusement inchange (verifie a
   1200 px : grilles, tuiles et polices identiques avec et sans ce fichier).

   Il corrige ce que "rubis_dashboard.html" ne prevoyait pas : le gabarit
   n'avait que DEUX media queries pour 350 Ko de mise en page. Mesures faites
   dans un ecran de 387 px, avant / apres :
     - largeur de page ................ 595 px (defilement lateral) / 387 px ;
     - panneaux hors ecran ............ 6 / 0 ;
     - boutons sous 32 px ............. 45 / 1 ;
     - grilles a 2 colonnes ........... 11 / 0 (les tuiles chiffrees en gardent 2) ;
     - marge laterale perdue .......... 52 px / 20 px.
   Aucune regle ne masque de donnee : ce que le bureau affiche, le telephone
   l'affiche aussi. */

/* Seuil aligne sur la bascule responsive deja presente dans base.html
   (@media max-width:820px) : les deux couches basculent ensemble, et une
   tablette en portrait (768-820 px) recoit l'affichage telephone au lieu
   d'un bureau trop a l'etroit. Mesure le 15/08/2026 a 768 et 820 px :
   panneaux hors ecran 17 -> 7 et 15 -> 7. */
@media (max-width: 820px) {

  /* --- 1. Cadre : marges utiles, plus de defilement lateral ---------------
     "!important" necessaire : le gabarit pose "padding:0 26px" dans un <style>
     du corps de page, donc APRES cette feuille dans l'ordre du document. */
  .rb-wrap { padding-left: 10px !important; padding-right: 10px !important; }
  .rb-wrap .rb-inner { max-width: 100%; }
  .rb-wrap .rb-panel, .rb-wrap .rbq-p, .rb-wrap .rb-card { min-width: 0; max-width: 100%; }
  .rb-wrap canvas, .rb-wrap img, .rb-wrap svg, .rb-wrap table { max-width: 100%; }

  /* --- 2. Les grilles a plusieurs colonnes repassent sur une colonne ------
     "minmax(0,1fr)" et non "1fr" : sous "1fr" une piste ne peut pas descendre
     sous la largeur minimale de son contenu - c'est ce qui faisait deborder
     les cartes du tableau d'alertes de 25 px. */
  .rb-wrap .rb-grid,
  .rb-wrap .rb-grid2,
  .rb-wrap .rv-row.c2,
  .rb-wrap .rv-row.c2b,
  .rb-wrap .ale-grid,
  .rb-wrap .rb-albd-grid,
  .rb-wrap .rb-palgrid,
  .rb-wrap .rb-prodcard .pc,
  .rb-wrap .rb-cover .cvgrid { grid-template-columns: minmax(0, 1fr) !important; }

  /* Les tuiles chiffrees gardent 2 colonnes : lisible, et cela evite une
     colonne de douze cartes a faire defiler. */
  .rb-wrap .rb-cards,
  .rb-wrap .alm-kpis,
  .rb-wrap .rv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .rb-wrap .rb-ambgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rb-wrap .rb-gallery { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important; }
  .rb-wrap .rb-gallery.dense { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; }
  /* Regle d'alerte : bascule a gauche, libelle et badge dessous - au lieu de
     trois colonnes qui reduisaient le libelle a un mot par ligne. */
  .rb-wrap .rb-albd-row { grid-template-columns: 34px minmax(0, 1fr) !important; gap: 8px; row-gap: 6px; align-items: start; }
  .rb-wrap .rb-albd-row > .alright { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .rb-wrap .rb-albd-row > .lb { min-width: 0; }
  .rb-wrap .rb-albd-card, .rb-wrap .rb-albd-row, .rb-wrap .rb-arow { min-width: 0; max-width: 100%; }
  .rb-wrap .rb-albd-card * { overflow-wrap: anywhere; }
  /* Les boutons d'action d'une regle n'apparaissent qu'au survol : sans souris,
     ils etaient inatteignables. On les montre en permanence sur telephone.
     (Chez un simple User ils restent masques par la garde serveur.) */
  .rb-wrap .alx { opacity: 1 !important; }

  /* --- 3. Cartes KPI : le texte entier, plus de troncature ---------------- */
  .rb-wrap .rb-card { padding: 9px 10px; }
  .rb-wrap .rb-card .lbl { white-space: normal; font-size: 10.5px; line-height: 1.25; }
  .rb-wrap .rb-card .val { font-size: 19px; line-height: 1.2; }
  .rb-wrap .rb-card .meta,
  .rb-wrap .rb-card .rate,
  .rb-wrap .rb-card .eur {
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 11px; line-height: 1.3;
  }
  /* La barre KPI data est posee en hauteur nulle par un style en ligne :
     sur telephone elle recouvrait la premiere rangee de cartes. */
  .rb-wrap .rb-cards-bar {
    position: static !important; height: auto !important; top: auto !important;
    margin: 0 0 6px !important;
  }

  /* --- 4. En-tetes de panneau : titre, sous-titres et boutons empiles -----
     Le <h3> est lui-meme une boite flex "nowrap" : ses sous-titres se
     retrouvaient en colonnes de 70 px, un mot par ligne. */
  .rb-wrap .rb-panel .ph { flex-wrap: wrap; gap: 6px; align-items: center; }
  .rb-wrap .rb-panel .ph h3 { flex: 1 1 100%; font-size: 14px; line-height: 1.3; flex-wrap: wrap; gap: 4px 8px; }
  .rb-wrap .rb-panel .ph h3 > .rb-sub { flex: 1 1 100%; font-size: 11px; line-height: 1.35; }
  .rb-wrap .rb-panel .ph .rb-sub { flex: 1 1 100%; font-size: 11px; line-height: 1.35; }
  .rb-wrap .rb-panel h3 { font-size: 14px; }
  .rb-wrap .rb-top h2 { font-size: 16px; }
  .rb-wrap #rb-daysub, .rb-wrap #rb-galsub { font-size: 13px; }
  .rb-wrap .seg, .rb-wrap .rb-whdr { flex-wrap: wrap; max-width: 100%; }

  /* --- 5. Onglets : une bande qui glisse au doigt, au lieu de 4 lignes ---- */
  .rb-wrap #rb-tabs {
    flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 3px;
  }
  .rb-wrap #rb-tabs::-webkit-scrollbar { display: none; }
  .rb-wrap #rb-tabs button { flex: 0 0 auto; white-space: nowrap; }

  /* --- 6. Cibles tactiles : 34 px au minimum ------------------------------ */
  .rb-wrap .rb-btn,
  .rb-wrap .seg button,
  .rb-wrap #rb-tabs button,
  .rb-wrap .rb-stsel-btn,
  .rb-wrap .rb-collapse,
  .rb-wrap .rb-mv,
  .rb-wrap .rb-wsel,
  .rb-wrap .rb-fl select,
  .rb-wrap .rb-bar select,
  .rb-wrap .rb-dates input[type=date] { min-height: 34px; }
  .rb-wrap .rb-collapse, .rb-wrap .rb-mv { min-width: 34px; }
  /* Tableau des regles d'alerte (admins) : 29 regles x 3 boutons de 20 px.
     28-30 px au lieu de 34 pour ne pas etirer la liste sur trois ecrans. */
  .rb-wrap .alx { min-height: 30px; min-width: 30px; }
  .rb-wrap .rb-atg, .rb-wrap .rb-athr, .rb-wrap .abmore { min-height: 28px; }

  /* --- 7. Lisibilite : plus rien sous 10,5 px ----------------------------- */
  .rb-wrap .meta { font-size: 11.5px; }
  .rb-wrap .lbl, .rb-wrap .rate, .rb-wrap .grp-sec { font-size: 11px; }
  /* Libelle des compteurs a rouleaux : 8 px dans le gabarit, sous le plancher.
     Deux regles a battre, d'ou les trois selecteurs : `.rb-counter .lab` (0,2,0)
     et `.rb-gallery.dense .rb-counter .lab` (0,4,0). Mesure : pas de debordement
     horizontal (le libelle passe deja a la ligne), +6 px de hauteur par tuile de
     108 px, +18 px en mode dense (92 px). */
  .rb-wrap .rb-counter .lab,
  .rb-wrap .rb-gallery .rb-counter .lab,
  .rb-wrap .rb-gallery.dense .rb-counter .lab { font-size: 10.5px; letter-spacing: .5px; }
  .rb-wrap .rbq-badge { font-size: 10px; }
  .rb-wrap .rb-srcsub, .rb-wrap .rb-sub { font-size: 10.5px; }
  .rb-wrap .rb-fl label { font-size: 10px; }

  /* --- 8. Barre de filtres : deux champs par ligne, dates sur leur ligne -- */
  .rb-wrap .rb-bar { padding: 7px 9px; gap: 8px 10px; }
  .rb-wrap .rb-fl { min-width: 0; flex: 1 1 45%; }
  .rb-wrap .rb-fl select, .rb-wrap .rb-stsel-btn { width: 100%; }
  .rb-wrap .rb-fl:has(.rb-dates) { flex: 1 1 100%; }
  .rb-wrap .rb-dates { width: 100%; }
  .rb-wrap .rb-dates input[type=date] { flex: 1 1 auto; min-width: 118px; }

  /* --- 9. Liste deroulante des stations : toujours dans l'ecran ----------- */
  .rb-wrap .rb-stsel-pop { min-width: 0 !important; width: min(92vw, 340px); max-height: 58vh; }
}