/* ===================================================================
   mobile.css — Ducati Lisboa Leads
   ESCRITO DE RAIZ. Carrega SO em ecras <=640px (<link media>).
   NAO toca no panel.css (desktop/tablet intactos).
   Cobre todas as areas: HUD+menu, Fluxo Vivo, Leads, CRM, Auditoria,
   detalhe da lead, Utilizadores, Login. iOS + Android, vertical + deitado.
   Tabelas viram CARTOES (sem scroll lateral). :has() distingue
   lista (tem <thead>) de detalhe (sem <thead>).
   =================================================================== */

@media (max-width:640px){

  /* ---------- base ---------- */
  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  *{-webkit-tap-highlight-color:rgba(204,0,0,.15)}

  /* safe-area (notch / barras iOS) */
  .hud{padding-left:max(14px,env(safe-area-inset-left));
       padding-right:max(14px,env(safe-area-inset-right))}
  main{padding-left:max(14px,env(safe-area-inset-left));
       padding-right:max(14px,env(safe-area-inset-right));
       padding-bottom:max(20px,env(safe-area-inset-bottom));
       margin:14px auto}

  /* fix iOS: campos <16px fazem zoom ao focar */
  input,select,textarea{font-size:16px}

  /* =====================================================
     1) TOPO (HUD) + MENU HAMBURGUER
     ===================================================== */
  .hud{flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px}
  .hud-l{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
  .hud-brand{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hud-sep,.hud-sub,.hud-scan{display:none}

  /* botao hamburguer */
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;padding:9px;background:transparent;
    border:1px solid var(--line);border-radius:9px;cursor:pointer;flex:0 0 auto}
  .nav-burger span{display:block;height:2px;width:100%;background:var(--ink);
    border-radius:2px;transition:transform .2s,opacity .2s}
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* gaveta do menu (recolhida; abre em coluna a largura toda) */
  .hud-n{display:none;width:100%;flex:1 1 100%;flex-direction:column;align-items:stretch;
    gap:0;margin-top:6px;padding:4px 0;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:13px;letter-spacing:1px;text-transform:uppercase}
  .hud-n.open{display:flex}
  .hud-n a{display:block;width:100%;padding:14px 4px;color:var(--ink);
    border-bottom:1px solid var(--line)}
  .hud-n a::after{display:none}
  .hud-n .hud-user{display:block;width:100%;padding:13px 4px;border-left:0;
    border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}
  .hud-n .tg{align-self:flex-start;margin:12px 0}
  .hud-n .hud-out{color:var(--red-2)!important;border-bottom:0}

  /* =====================================================
     2) TITULOS
     ===================================================== */
  h1{font-size:23px;margin:0 0 14px}
  h2{font-size:16px}

  /* =====================================================
     3) FLUXO VIVO
     ===================================================== */
  .live-head{flex-wrap:wrap}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px}
  .stat{padding:14px}
  .stat-n{font-size:22px}
  .stat-l{font-size:9px}
  .grid2{grid-template-columns:1fr;gap:16px}
  .feed{max-height:300px}
  .feed li{font-size:12.5px}

  /* =====================================================
     4) TABELAS -> CARTOES
     Lista (com <thead>): cada linha = 1 cartao.
     ===================================================== */
  .grid:has(thead){display:block;background:none;border:0;overflow:visible}
  .grid:has(thead) thead{position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* esconde o cabecalho (so leitores de ecra) */
  .grid:has(thead) tbody{display:block}
  .grid:has(thead) tbody tr{display:block;background:var(--card);
    border:1px solid var(--line);border-radius:12px;
    margin-bottom:10px;padding:12px 14px}
  .grid:has(thead) tbody td{display:block;border:0;padding:3px 0;
    font-size:13.5px;white-space:normal;word-break:break-word;color:var(--muted)}
  /* 1.a celula = titulo do cartao (#id / nome) */
  .grid:has(thead) tbody td:first-child{font-family:var(--mono);font-weight:600;
    font-size:15px;color:var(--ink);padding-bottom:8px;margin-bottom:6px;
    border-bottom:1px solid var(--line)}
  /* badge dentro do cartao */
  .grid:has(thead) tbody td .badge{font-size:11px}
  /* "ver" vira botao a largura toda */
  .grid:has(thead) tbody td .view{display:block;text-align:center;margin-top:8px;
    padding:11px;border:1px solid var(--line);border-radius:9px;
    color:var(--red-2);font-weight:600}
  /* estado vazio (colspan) */
  .grid:has(thead) tbody td.muted{text-align:center;color:var(--muted);
    border:0;padding:14px 0}

  /* Detalhe da lead (SEM <thead>): tabela = 1 cartao, cada linha LABEL/valor */
  .grid:not(:has(thead)){display:block;background:var(--card);
    border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .grid:not(:has(thead)) tbody{display:block}
  .grid:not(:has(thead)) tr{display:flex;flex-direction:column;gap:3px;
    padding:11px 14px;border-bottom:1px solid var(--line)}
  .grid:not(:has(thead)) tr:last-child{border-bottom:0}
  .grid:not(:has(thead)) th{text-align:left;font-family:var(--mono);font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400;padding:0;border:0}
  .grid:not(:has(thead)) td{padding:0;border:0;font-size:15px;
    color:var(--ink);white-space:normal;word-break:break-word}

  /* =====================================================
     5) CRM — separadores (Serios/Triagem/Lixo/Todos)
     ===================================================== */
  .meta-row{gap:8px;flex-wrap:wrap;margin:10px 0 16px}
  .meta-row .view{display:inline-block;padding:9px 14px;border:1px solid var(--line);
    border-radius:22px;background:var(--card);font-size:12px;color:var(--ink)}

  /* =====================================================
     6) DETALHE DA LEAD — meta + acoes
     ===================================================== */
  .back{display:inline-block;padding:6px 0;font-size:14px}
  .actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:16px}
  .actions select,.actions button{width:100%}
  .alert{font-size:13.5px}

  /* =====================================================
     7) UTILIZADORES
     ===================================================== */
  .add-user{flex-direction:column;align-items:stretch;gap:10px;padding:14px}
  .add-user input,.add-user select,.add-user button{width:100%}
  .urow{flex-direction:column;align-items:stretch;gap:8px}
  .urow input,.urow select,.urow button{width:100%}

  /* =====================================================
     8) LOGIN / SETUP (cockpit)
     ===================================================== */
  .cockpit{padding:18px;min-height:100svh}
  .cluster{width:100%;max-width:none;padding:24px 18px 18px}
  .cluster-title{font-size:27px}
  .gauge{width:180px;height:100px}
  .login-card{width:100%;max-width:none}
  .fld input{font-size:16px}
  .ign{width:100%}
  .tg-fixed{top:max(14px,env(safe-area-inset-top));right:14px}
}

/* ---------- ecras muito estreitos ---------- */
@media (max-width:380px){
  .hud-brand{font-size:15px}
  .stats{gap:8px}
  .stat-n{font-size:20px}
  .gauge{width:156px;height:88px}
}

/* ---------- telemovel DEITADO (landscape baixo) ---------- */
@media (max-width:900px) and (max-height:480px){
  .cockpit{min-height:auto;padding:24px}
  .gauge{display:none}                 /* poupa altura quando deitado */
  .stats{grid-template-columns:repeat(4,1fr)}   /* aproveita a largura */
}