/* ── DESKTOP: oculta topbar, sidebar sempre visível ── */
@media (min-width:769px){
  #topbar{display:none}
  #menu-toggle{display:none}
}

/* ── MOBILE: max-width 768px ── */
@media (max-width:768px){
  #menu-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;font-size:20px;color:var(--text2);cursor:pointer;padding:4px 6px;border-radius:var(--r)}

  /* Sidebar vira drawer no mobile */
  #sidebar{
    position:fixed;top:52px;left:-220px;bottom:0;width:220px !important;
    z-index:300;box-shadow:4px 0 20px rgba(28,33,50,.12);
    transition:left .25s cubic-bezier(.4,0,.2,1);
  }
  #sidebar.open{left:0}
  #sidebar.collapsed{left:-220px}
  .sn-brand{height:48px}
  .ni{padding:10px 12px;font-size:13px}
  .ni-label{max-width:none !important;opacity:1 !important}
  .sn-user-info{max-width:none !important;opacity:1 !important}
  .sn-user-caret{opacity:1 !important;width:auto !important}
  #sidebar.collapsed .ni{justify-content:flex-start;padding:10px 12px}
  #sidebar.collapsed .ni-label{max-width:none !important;opacity:1 !important}

  /* Pages */
  .page{padding:14px 12px}
  .ph{flex-direction:column;gap:10px;align-items:flex-start}
  .ph-right{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .ph-left .pt{font-size:24px}

  /* Stats: 2 columns */
  .stats{grid-template-columns:repeat(2,1fr);gap:8px}

  /* Table filters */
  .tb-bar{flex-wrap:wrap;gap:8px}
  .si{min-width:0;width:100%}
  .sel{width:100%}

  /* Table horizontal scroll */
  .tc{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:640px}

  /* Forms: single column */
  .fgrid,.fgrid3{grid-template-columns:1fr}
  .cs2,.cs3{grid-column:span 1}

  /* Info grid: 2 columns */
  .ig{grid-template-columns:1fr 1fr}

  /* Split: single column */
  .split,.split-wide{grid-template-columns:1fr}

  /* Config: single column */
  .cfg-grid{grid-template-columns:1fr;height:auto;gap:12px}
  .cfg-menu{height:auto}
  .cfg-panel{max-height:60vh}

  /* Tracker cards */
  .tkcard{grid-template-columns:1fr 1fr;gap:8px}

  /* Modals */
  .mo{padding:8px}
  .md,.md.lg,.md.sm,.md.xl{width:calc(100vw - 16px)!important;max-height:96vh}
  .mh{padding:14px 16px}
  .mb{padding:14px 16px}
  .mf{padding:10px 16px;flex-wrap:wrap}
  .mf .btn{flex:1;justify-content:center}

  /* Login */
  .login-wrap{width:calc(100vw - 24px);max-width:420px}
  .login-card{padding:32px 24px}

  /* Toast */
  #toast{bottom:14px;right:14px;left:14px}
  .toast-item{max-width:100%}

  /* Measurement items */
  .item-grid6{grid-template-columns:repeat(2,1fr)}
}

/* ── SMALL SCREENS: max-width 480px ── */
@media (max-width:480px){
  .stats{grid-template-columns:1fr}
  .ig{grid-template-columns:1fr}
  .llogo .logo-primary,.llogo .logo-secondary{font-size:26px}
  .login-card{padding:28px 18px}
  .tkcard{grid-template-columns:1fr}
  .mf .btn{font-size:11px;padding:8px 10px}
  .item-grid6{grid-template-columns:1fr}
}

/* ── TABLET: 769px – 1024px ── */
@media (min-width:769px) and (max-width:1024px){
  .page{padding:18px 20px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .fgrid3{grid-template-columns:1fr 1fr}
  .split,.split-wide{grid-template-columns:1fr}
  .cfg-grid{grid-template-columns:180px 1fr}
  .tkcard{grid-template-columns:1fr 100px 160px 120px}
  .md.xl{width:calc(100vw - 40px)!important}
}

/* ════════════════════════════════════════════════════════════════
   USABILIDADE MOBILE — foco em facilidade de uso / baixo letramento
   (toque confortável, sem zoom indesejado, texto legível, área segura)
   ════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* 1) iOS não dá mais zoom ao focar um campo (exige fonte >= 16px) */
  input, select, textarea,
  .fi, .si, .sel, .fsel{ font-size:16px !important; }

  /* 2) Alvos de toque maiores e mais espaçados (recomendado ~44px) */
  .btn{ min-height:44px; padding:11px 16px; font-size:14px; }
  .btn-sm{ min-height:40px; padding:9px 14px; font-size:13px; }
  .btn-xs{ min-height:38px; padding:8px 12px; font-size:13px; }
  td .btn, td .btn-sm, td .btn-xs{ min-width:40px; margin:3px 2px; } /* ações de linha */
  .ni{ min-height:48px; }                                            /* itens do menu */

  /* 3) Campos de filtro ocupam a largura toda (some larguras fixas) */
  .tb-bar input, .tb-bar select, .tb-bar .si, .tb-bar .sel{ width:100% !important; min-width:0 !important; }
  .tb-bar > *{ flex:1 1 100% !important; }

  /* 4) Tabelas: linhas altas e rolagem horizontal suave ao toque */
  .tc{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table td, table th{ padding:12px 10px !important; }

  /* 5) Legibilidade: corpo e rótulos um pouco maiores */
  body{ font-size:15px; }
  .fl{ font-size:12px; }
}

/* 6) Áreas seguras de aparelhos com notch / barra de gestos */
@media (max-width:768px){
  #topbar{ padding-top:env(safe-area-inset-top, 0px); }
  #sidebar{ padding-bottom:env(safe-area-inset-bottom, 0px); }
  #toast{ bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
  .mf{ padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  .login-card{ padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px)); }
}

/* 7) Foco bem visível (acessibilidade/teclado) — :where() não aumenta especificidade */
:where(a, button, input, select, textarea, .fi):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* 8) OPT-IN: tabela vira "cartões" empilhados no celular (cada linha = um cartão,
   cada célula = rótulo + valor). Use class="table-cards" na <table> e
   data-label="Coluna" em cada <td>. Só afeta tabelas que optarem — as densas
   (cronograma, coloridão) continuam intactas. */
@media (max-width:768px){
  table.table-cards{ min-width:0 !important; }
  table.table-cards thead{ position:absolute; left:-9999px; }          /* esconde cabeçalho */
  table.table-cards tr{
    display:block; margin-bottom:10px; padding:4px 2px;
    border:1px solid var(--border); border-radius:var(--r); background:var(--surface);
  }
  table.table-cards td{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:10px 12px !important; border:none !important; text-align:right;
  }
  table.table-cards td::before{
    content:attr(data-label); font-weight:600; color:var(--text3);
    text-align:left; flex:0 0 auto;
  }
  table.table-cards td:empty{ display:none; }

  /* Célula "rica" (badges, barras, ações): vira bloco de largura total,
     com rótulo pequeno em cima — para conteúdo que não cabe em "rótulo: valor". */
  table.table-cards td.tc-block{ display:block; text-align:left; padding:10px 12px !important; }
  table.table-cards td.tc-block::before{
    content:attr(data-label); display:block; font-size:9px; text-transform:uppercase;
    letter-spacing:.04em; color:var(--text3); margin-bottom:5px; font-weight:600;
  }
  table.table-cards td.tc-block:not([data-label])::before{ display:none; }
  table.table-cards td.tc-block .btn{ flex:1 1 auto; } /* ações ocupam a largura */
}