/* ============================================================
   layout-system.css — Sistema de layout (conceitos Bootstrap)
   Carregado POR ÚLTIMO: é a fonte de verdade do responsive.
   Regras aqui substituem duplicados removidos do style.css.
   Breakpoints canónicos (alinhados com os dominantes do projeto):
     --bp-md: 900px (tablet/desktop split)
     --bp-sm: 640px (mobile)
   Objetivo: sem guerra de !important; mobile-first; min-width:0.
   ============================================================ */
:root {
  /* escala de spacing (à Bootstrap) */
  --ls-1: 4px; --ls-2: 8px; --ls-3: 12px; --ls-4: 16px; --ls-5: 24px; --ls-6: 32px;
}

/* Guard global: nada transborda o viewport na horizontal */
*, *::before, *::after { box-sizing: border-box; }

/* ---- A1 / R1: suggestions-bar nunca excede o viewport ---- */
@media (max-width: 640px) {
  #suggestions-bar { max-width: 100%; }
  #suggestions-bar .suggestion { min-width: 0; }
  #suggestions-bar .suggestion .text,
  #suggestions-bar .suggestion .text strong,
  #suggestions-bar .suggestion .text span { min-width: 0; overflow-wrap: anywhere; }
}

/* ============================================================
   A2/A3 — Endurecimento das grelhas de cards (conceitos Bootstrap)
   Causa de overflow: grid/flex items com min-width:auto nao encolhem
   abaixo do min-content. Regra Bootstrap: min-width:0 nos filhos.
   ============================================================ */

/* min-width:0 em TODOS os itens de grids/flex conhecidos + guard de texto */
.overview-grid > *, .queue-counts > *, .live-kpis > *, .usage-grid > *,
.live-agents > *, .live-agent > *, .fleet-strip > *, .pnl-row > *,
.ct-summary > *, .ct-breakdowns > *, .session-row > *, .ct-row > * { min-width: 0; }

/* numeros grandes nunca empurram a coluna */
.overview-kpi .val, .live-kpi .val, .queue-counts .c .n,
.usage-kpi .val { min-width: 0; overflow-wrap: anywhere; }

/* #138: o .val herdava white-space:nowrap e truncava ("0 pend....",
   "~$3.2k ...") nos cards estreitos do telemovel. Forcar quebra. */
.overview-kpi .val { white-space: normal !important; text-overflow: clip !important; }

/* ---- Breakpoints canonicos: <=900 (md) e <=640 (sm), mobile-first ---- */
@media (max-width: 900px) {
  /* grelhas de 4 colunas: 2 no tablet */
  .usage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* mobile: KPIs e contagens nunca abaixo de ~chip legivel */
  .queue-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .live-kpis    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleet-strip, .pnl-headline { grid-template-columns: 1fr; }
}
/* Mobile: 2 colunas compactas (grid de app, nao stack gigante 1-col).
   O #138 antigo forcava 1-col porque o valor a 28px espremia; agora o valor
   encolhe no mobile (regra abaixo) e o meta faz clamp -> 2-col le-se bem. */
@media (max-width: 440px) {
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ============================================================
   A5 — Normalizar oscilacoes provadas por medicao (computed-style)
   ============================================================ */
/* .overview-kpi .val era nao-monotono: 28px(desktop) -> 26px(tablet) ->
   28px(mobile). O dip a 26px no tablet e artefacto de cascade. Pinar 28px. */
.overview-kpi .val { font-size: 26px !important; }
/* Mobile 2-col: o numero encolhe para caber ~158px sem espremer o texto
   longo ("0 pend. · 0 erro", "~$1.1k eq."). */
@media (max-width: 640px) {
  .overview-kpi .val { font-size: 19px !important; line-height: 1.2 !important; }
  .overview-kpi .lbl { font-size: 10px !important; }
  .overview-kpi .meta { font-size: 11px !important; }
  .overview-kpi { min-height: 0 !important; padding: 10px 12px !important; }
}

/* ============================================================
   A6 — Avisos (#suggestions-bar) scrollam com o conteudo
   Movido para dentro do <main> (apos overview-card). Vence a regra PWA
   style.css:13588 (max-height:15vh!important + order:3) que o pinava.
   ============================================================ */
#suggestions-bar {
  grid-column: 1 / -1;          /* abrange todas as colunas do grid */
  min-width: 0;
  max-height: none !important;  /* mata o clamp 15vh!important (style.css:13588) */
  overflow: visible !important; /* sem scroll interno (evita scroll aninhado) */
  margin-left: 0; margin-right: 0;
  order: 0 !important;          /* posicao DOM natural (mata order:3 da regra PWA) */
}

/* ============================================================
   A7 — Saude: strings .host longas truncam (ellipsis) no mobile
   A pagina NAO quebra (docScrollW=390); a hier-tree scrolla por design.
   Isto so evita .host cortado a meio nas listas de daemons/workers.
   ============================================================ */
@media (max-width: 760px) {
  .daemon .host, .worker .host {
    display: inline-block; max-width: 58vw; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: bottom;
  }
}

/* === SANEAMENTO Z-INDEX + OVERLAYS (2026-06-21) === */
/* Carregado por ultimo -> vence a cascata. Escala de z-index coerente e
   garantia de que overlays escondidos NAO intercetam toques (bug de cliques). */
:root{
  --z-base:0; --z-header:100; --z-bottomnav:200; --z-swipe-ghost:250;
  --z-fab:300; --z-sidebar-bd:400; --z-sidebar:410; --z-dock:500;
  --z-mwin-full:600; --z-sheet:700; --z-modal:800; --z-popover:850;
  --z-toast:900; --z-banner:950; --z-splash:1000; --z-notch:1001;
}
header{ z-index:var(--z-header)!important; }
#bottomnav{ z-index:var(--z-bottomnav)!important; }
.swipe-ghost{ z-index:var(--z-swipe-ghost)!important; }
#compose-fab{ z-index:var(--z-fab)!important; }
#sidebar-backdrop{ z-index:var(--z-sidebar-bd)!important; }
#sidebar{ z-index:var(--z-sidebar)!important; }
.chat-dock, #mwin-dock{ z-index:var(--z-dock)!important; }
.mwin.maximized{ z-index:var(--z-mwin-full)!important; }
.android-install-sheet, .notif-onboard-sheet{ z-index:var(--z-sheet)!important; }
.modal-overlay, .admin-modal, .ios-install-banner{ z-index:var(--z-modal)!important; }
.sched-popover{ z-index:var(--z-popover)!important; }
.push-permission-toast, .https-nudge, .task-completion-toast, .task-completion,
#wakelock-badge, #ptr-ind{ z-index:var(--z-toast)!important; }
.network-bar, #conn-banner, .sw-update-bar{ z-index:var(--z-banner)!important; }
#pwa-splash, .pwa-splash, #app-loading-overlay{ z-index:var(--z-splash)!important; }

/* --- Overlays escondidos nunca apanham toques (causa do bug) --- */
[hidden]{ pointer-events:none !important; }
.android-install-sheet[hidden]{ pointer-events:none !important; visibility:hidden; }
.modal-overlay[hidden], .ios-install-banner[hidden], .notif-onboard-sheet[hidden]{ display:none !important; }
/* splash escondida = mesmo escondida e sem bloquear */
#pwa-splash.hidden, .pwa-splash.hidden{ display:none !important; pointer-events:none !important; }

/* ============================================================
   A8 — Escala tipográfica do telemóvel (legibilidade)
   Sintoma: "no telemóvel está tudo muito reduzido, não dá pra ler".
   Causa: design px-based feito p/ desktop; texto corrente a 10-13px.
   mobile-fixes.css já subia ALGUNS componentes mas (a) deixava centenas
   de elementos a 10-12px e (b) fixava labels/headings a 11-12px — ainda
   pequeno num telemóvel. Carregado POR ÚLTIMO, este bloco sobe o PISO
   tipográfico para tamanhos legíveis (HIG: corpo ~14-16px) e PRESERVA a
   hierarquia: números/valores grandes (.val/.value/.n) ficam intactos.
   ============================================================ */
@media (max-width: 900px) {
  /* Base de leitura */
  body { font-size: 16px; line-height: 1.55; }

  /* Cabeçalhos de secção/card: nunca abaixo de 16px (eram 11-14px) */
  .card h2, .card h3, .section-head h2, .section-head h3,
  h2, h3 { font-size: 16px !important; line-height: 1.3; }

  /* Texto corrente e secundário: piso 14px (era 11-13px) */
  p, li, td, th, dd, dt, summary, blockquote, figcaption,
  .sub, .meta, .desc, .text, .role-text, .conn, .arch-legend,
  .bot-toggle-sub, .session-row .id, .session-row .meta,
  .agent-meta, .mgr-log-row, .ct-row, .fleet-meta, .hier-row .meta,
  .tq-host, .tq-time, .tq-model, .tq-duration, .tq-attach-badge,
  .ev .when, .qi .when, .daemon .host, .worker .host,
  .mac-tile .alias, .mac-tile .meta, .stamp,
  .sb-brand-txt span { font-size: 14px !important; }

  /* Rótulos / chips / tags / badges: piso 13px (eram 10-12px) */
  .lbl, .label, .overview-kpi .lbl, .kpi .label, .queue-counts .c .l,
  .live-kpi .lbl, .live-kpi .sub, .usage-kpi .lbl, .sb-group-label,
  .bot-toggle-status, .bot-extra-tag, .ag-chip-meta, .ag-chip-act,
  .tab-count, .ev .sev, .fleet-next-tag, .ptr-label,
  .bot-card .label, .bot-card .pid, .bot-card .conn,
  .hier-row .pid { font-size: 13px !important; }

  /* Campos e labels de formulário (agentes/regras) */
  label, .ag-field, .rules-field { font-size: 14px !important; }

  /* Monospace (código, logs, CLAUDE.md) legível */
  code, pre, kbd, samp { font-size: 13px !important; }

  /* Botões: texto legível (exclui nav inferior e handle de arrasto) */
  .btn, button:not(.bn-item):not(.card-drag-handle):not(.sb-item) {
    font-size: 15px !important;
  }

  /* Texto solto sem classe dentro de cards (tags, notas): piso suave */
  .card span:not([class]), .card strong:not([class]) { font-size: 14px; }
}