/* ═══════════════════════════════════════════════════════════════════════
   VISTA MÒBIL INDEPENDENT — Sistema del panell Sistema (8770 / #metricas)
   -----------------------------------------------------------------------
   Aquest mòdul SOLS s'aplica en mòbil (https://cachyos-xeon.../#metricas,
   des d'un telèfon / pantalla estreta). Generated 09/09/2026.

   Com funciona:
   - El JS afegeix la classe `html.is-mobile` quan l'amplada ≤ 700px.
   - TOTES les regles van prefixades amb `html.is-mobile` → és FÍSICAMENT
     impossible que afectin l'escriptori. Editar aquí mai toca l'escritori.
   - El disseny d'escriptori viu a static/app.css (intacte).

   ────────────────────────── TUNING (bloc únic) ──────────────────────
   Ajusta aquests valors per canviar TOT el mòbil sense tocar res més.
   ───────────────────────────────────────────────────────────────────── */
html.is-mobile {
  --mb-row-h: 140px;          /* altura de cada fila del grid en mòbil (120px a escriptori) */
  --mb-gap: 12px;             /* separació entre widgets */
  --mb-pad: 16px;             /* padding de les targetes */
  --mb-title: .8rem;          /* grandària del títol de cada widget */
  --mb-row-fs: .86rem;        /* text de les files de dades (potència, volt, info) */
  --mb-tbig: 3.4rem;          /* número gran de temperatura */
  --mb-gauge-max: 190px;      /* mida màxima dels gauges circulars */
  --mb-core-min-h: 56px;      /* alçada mínima cel·la de nucli (graelles denses) */
  --mb-cu-min-h: 46px;        /* alçada mínima cel·la Compute Unit */
  --mb-zoom-cap: 0.7;         /* no encongir el contingut per sota d'aquest zoom */
}

/* ── Ample del grid: 1 columna a mòbil (reforç, no depèn de media query) ── */
html.is-mobile .dashboard-grid {
  grid-template-columns: 1fr !important;
  gap: var(--mb-gap);
  /* Les files implícites (quan un widget creix més enllà de la plantilla) han
     de tenir la mateixa alçada que les explícites. Abans queien a 120px (el
     grid-auto-rows d'escriptori) → widgets inferiors més baixos que els
     superiors amb el mateix rN. */
  grid-auto-rows: var(--mb-row-h);
}

/* Cèl·lules de la guia de redimensionat: sense min-height (l'escriptori en
   posa 80px i trenca l'escala de les files petites dels separadors). */
html.is-mobile .grid-overlay .ov-cell { min-height: 0; }

/* ── Targetes: més padding i aire ── */
html.is-mobile .m-card {
  padding: var(--mb-pad) 14px;
  container-type: size;          /* Manté les container queries (cqh/cqw) */
}

/* ── Títols de widget més llegibles ── */
html.is-mobile .c-title { font-size: var(--mb-title); margin-bottom: 6px; }
html.is-mobile .c-title svg { width: 18px; height: 18px; }

/* ── Separadors de secció ── */
html.is-mobile .sec { padding: 9px 12px; }
html.is-mobile .sec span { font-size: .76rem; }

/* ── Files de dades (potència CPU/DRAM/GPU, voltatges, sistema) ── */
html.is-mobile .row { font-size: var(--mb-row-fs); margin: 8px 0; }

/* ── Gauges circulars: no deixar que es vagin petits, cap màxim adaptat ── */
html.is-mobile .c-metric .gaugewrap .gauge {
  width: min(80cqh, 90cqw, var(--mb-gauge-max));
  height: min(80cqh, 90cqw, var(--mb-gauge-max));
}
html.is-mobile .c-metric .gcore .num { font-size: 22cqh; }
html.is-mobile .c-metric .spark { min-height: 2px; }

/* ── Temperatures: número més gran ── */
html.is-mobile .tbig { font-size: var(--mb-tbig); }
html.is-mobile .tbig small { font-size: 1.2rem; }
html.is-mobile .tsecondary { font-size: .78rem; }
html.is-mobile .tleg { font-size: .64rem; }

/* ── Graelles denses (CPU per nucli / freq per fil): cèl·lules més altes ── */
html.is-mobile [data-wid="cpu-cores"] .core,
html.is-mobile [data-wid="cpu-freq"] .core { min-height: var(--mb-core-min-h); padding: 6px 3px; }
html.is-mobile [data-wid="cpu-cores"] .core b,
html.is-mobile [data-wid="cpu-freq"] .core b { font-size: 1rem; }

/* ── Compute Units GPU ── */
/* En mòbil el widget és full-width però estreix: 14 columnes (la que fa servir
   l'escriptori per compactar) queden a ~17px per cel·la i amunteguen les 28 CU
   en 2 files llegibles. Aquí posem 7 columnes → 4 files de cel·les grans. */
html.is-mobile [data-wid="gpu-cu"] .cu-grid { grid-template-columns: repeat(7, 1fr); }
html.is-mobile [data-wid="gpu-cu"] .cu { min-height: var(--mb-cu-min-h); }
html.is-mobile [data-wid="gpu-cu"] .gpu-det .gd { padding: 9px 11px; }
html.is-mobile [data-wid="gpu-cu"] .gpu-det .gd .k { font-size: .6rem; }
html.is-mobile [data-wid="gpu-cu"] .gpu-det .gd .v { font-size: .92rem; }

/* ── Xarxa: no apelmagar les interfícies ── */
html.is-mobile [data-wid="sys-net"] .ifc { padding: 12px; }
html.is-mobile [data-wid="sys-net"] .ifc .nm { font-size: .74rem; }

/* ── Disc: anell i textos proporcionats ── */
html.is-mobile [data-wid="sys-disk"] .dsk { padding: 12px; gap: 12px; }
html.is-mobile [data-wid="sys-disk"] .dsk-nm { font-size: .76rem; }

/* ── Arduino: termòmetre i llegendes proporcionades ── */
html.is-mobile [data-wid="ard-room"] .ard-body svg { height: min(70cqh, 56cqw); }

/* ── Interacció (edició) mòbil: mostra els manejadors de redimensionar i arrossegar ──
   app.css els amaga ≤920px. Aquí els tornem a mostrar dins del grid EN MODE EDICIÓ
   (més especificitat que el display:none) i els fem prou grans per al dit. */
html.is-mobile .dashboard-grid.editing .drag-handle,
html.is-mobile .dashboard-grid.editing .resize-handle {
  display: flex !important;
  z-index: 20;
}
/* El grip de redimensionar: zona tàctil més gran (no només el quadrat del ::after) */
html.is-mobile .dashboard-grid.editing .m-card .resize-handle {
  width: 30px;
  height: 30px;
  bottom: 2px;
  right: 2px;
  align-items: flex-end;
  justify-content: flex-end;
  touch-action: none;
}
html.is-mobile .dashboard-grid.editing .m-card .resize-handle::after {
  width: 14px;
  height: 14px;
  border-right-width: 3px;
  border-bottom-width: 3px;
  bottom: 6px;
  right: 6px;
}
/* El grip d'arrossegar: botó tàctil a dalt a l'esquerra */
html.is-mobile .dashboard-grid.editing .m-card .drag-handle {
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  touch-action: none;
}