/* =============================================================
   lumia-mobile.css — Layer universal de responsividade
   Carregado por TODAS as paginas da plataforma MgTech
   Aplica reset mobile-first sem quebrar layouts desktop
   ============================================================= */

/* -------- 1. RESET base sempre ativo -------- */
html {
  -webkit-text-size-adjust: 100%; /* iOS nao zoomar font automatico */
  text-size-adjust: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img, video, canvas, svg, picture {
  max-width: 100%;
  height: auto;
}
table {
  max-width: 100%;
}
input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
}
/* Inputs no iOS ficam minusculos se font-size < 16px (zoom forcado) */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* -------- 2. Mobile breakpoint principal (<= 768px) -------- */
@media (max-width: 768px) {
  /* Body / shells gerais */
  body { -webkit-overflow-scrolling: touch; }

  /* Containers comuns: tirar padding horizontal exagerado */
  .shell, .container, .wrap, main, .main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Topbar / header padrao em todas as paginas */
  header.topbar, .topbar, header {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .brand h1 {
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
  }
  .brand small {
    font-size: 0.7rem !important;
  }
  .brand-mark {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  .user, .user-info {
    font-size: 0.78rem !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Botoes — touch target 44px minimo (Apple HIG) */
  .btn, button.btn, .lm-btn, button[type="submit"], button[type="button"] {
    min-height: 40px;
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
  }
  .btn.sm, button.sm, .lm-btn.sm {
    min-height: 32px;
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
  }

  /* Grids responsivos genericos */
  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4,
  .grid-2, .grid-3, .grid-4,
  .row2, .row3 {
    grid-template-columns: 1fr !important;
  }

  /* Tabs — scroll horizontal sem quebrar */
  .tabs, .tab-bar, [role="tablist"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  .tabs::-webkit-scrollbar { height: 4px; }
  .tabs::-webkit-scrollbar-thumb { background: rgba(14,165,233,.4); border-radius: 2px; }
  .tab, [role="tab"] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
    padding: 9px 12px !important;
  }

  /* Tabelas — scroll horizontal envelopado */
  .panel-body.tight,
  [data-table-wrap],
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table {
    font-size: 0.82rem !important;
  }
  table th, table td {
    padding: 8px 10px !important;
  }
  /* Quando a tabela em si nao tiver wrapper, aplica overflow-x via CSS */
  .panel > table,
  .card > table,
  .body > table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Cards / paineis */
  .card, .panel, .kpi {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  .panel-head {
    padding: 12px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .panel-head h2 { font-size: 0.95rem !important; }
  .panel-body { padding: 14px !important; }

  /* KPI numeros gigantes — diminui */
  .kpi .v, .kpi b, .stat b {
    font-size: 1.4rem !important;
  }

  /* Modal: full screen no mobile */
  .modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .modal-card, .modal-content, .modal-card-inner {
    max-width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-head {
    padding: 14px 16px !important;
    position: sticky;
    top: 0;
    background: white;
    z-index: 5;
    border-bottom: 1px solid #E2E8F0;
  }
  .modal-head h2 { font-size: 1rem !important; }
  .modal-body { padding: 16px !important; }
  .modal-foot {
    padding: 12px 16px !important;
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid #E2E8F0;
    flex-wrap: wrap-reverse !important;
  }
  .modal-foot .btn { flex: 1; min-width: 110px; }

  /* Forms */
  .field input, .field textarea, .field select,
  .lm-input, input.lm-input {
    padding: 11px 12px !important;
    font-size: 16px !important; /* iOS zoom prevention */
    border-radius: 9px !important;
  }

  /* Filters / chips */
  .filters {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .filter-chip {
    font-size: 0.74rem !important;
  }

  /* Alert banners */
  .alert-banner {
    padding: 12px 14px !important;
    font-size: 0.85rem !important;
  }

  /* Sidebar / navs laterais — convert pra topo no mobile */
  .sidebar, aside.sidebar, [data-sidebar] {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--lm-line, #E2E8F0);
  }

  /* Toolbars com chat / botoes flutuantes */
  .toolbar {
    bottom: 12px !important;
    right: 12px !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .toolbar button { padding: 10px 16px !important; font-size: 0.82rem !important; }

  /* Toast central */
  .toast {
    bottom: 16px !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    text-align: center;
    font-size: 0.84rem !important;
  }

  /* Lumia chat-specific */
  .lm-message, .message-bubble, .msg-bubble {
    max-width: 92% !important;
    font-size: 0.92rem !important;
  }
  .lm-input-bar, .composer, [data-composer] {
    padding: 8px 12px !important;
  }

  /* Fonts gigantes em landing pages */
  h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; }
  h3 { font-size: clamp(1rem, 4.4vw, 1.2rem) !important; }

  /* Iframes */
  iframe { max-width: 100% !important; }

  /* Codigo em blocos */
  pre, code {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    word-break: break-word;
    font-size: 0.8rem !important;
  }

  /* Esconde elementos dedicados a desktop */
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }

  /* Labels longos com text-overflow */
  .copy-link, .audit-row td {
    max-width: 60vw !important;
  }
}

/* -------- 3. Mobile pequeno (<= 480px) — densidade extra -------- */
@media (max-width: 480px) {
  body { font-size: 14px; }

  .shell, .container, .wrap, main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Tabs muito apertadas */
  .tab, [role="tab"] {
    padding: 8px 10px !important;
    font-size: 0.76rem !important;
  }

  /* Cards mais compactos */
  .card, .panel, .kpi {
    padding: 12px !important;
  }
  .kpi .v { font-size: 1.2rem !important; }
  .kpi .label { font-size: 0.66rem !important; }
  .kpi .sub { font-size: 0.7rem !important; }

  /* Stats tripartite vira grid 2x2 */
  .stats { flex-wrap: wrap !important; }
  .stats .stat { flex: 0 0 50% !important; }

  /* User pill no topo do mobile pequeno */
  .user .pill { font-size: 0.7rem !important; padding: 3px 8px !important; }
  .user span:not(.pill) {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* PgrDashboard / kpi grandes */
  .v.warn, .v.danger, .v.ok { font-size: 1.4rem !important; }
}

/* -------- 4. Print mode — preservar PDFs imprimíveis -------- */
@media print {
  .toolbar, .tabs, header.topbar, .topbar { display: none !important; }
  .modal { display: none !important; }
  body { background: white !important; }
}

/* -------- 5. Acessibilidade: focus visivel mantido -------- */
@media (max-width: 768px) {
  :focus-visible {
    outline: 2px solid #0EA5E9 !important;
    outline-offset: 2px;
  }
}

/* -------- 6. Forca quebra em strings longas pra nao explodir layout -------- */
@media (max-width: 768px) {
  td, th, p, li, span, div {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* mas nao em elementos com classe de codigo / monospace */
  td.copy-link, .copy-link, .audit-row td, code, pre {
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* -------- 7. Inline styles 2-coluna -> 1-coluna no mobile -------- */
@media (max-width: 768px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  /* Flex inline com gaps grandes vira coluna no mobile */
  [style*="display:flex"][style*="gap:24"],
  [style*="display: flex"][style*="gap: 24"] {
    flex-wrap: wrap !important;
  }
}

/* -------- 8. Textos mobile-only / desktop-only por padrao -------- */
.mobile-only { display: none; }
.desktop-only { display: inline; }
@media (max-width: 768px) {
  .mobile-only { display: inline; }
  .desktop-only { display: none !important; }
}

/* -------- 9. Safety net: user-card no rodape do sidebar mobile sempre clicavel -------- */
@media (max-width: 820px) {
  body.sb-open aside.sidebar .user-card,
  body.sb-open aside.sidebar #userCard {
    position: relative;
    z-index: 60;
    pointer-events: auto !important;
    margin-bottom: max(14px, env(safe-area-inset-bottom));
  }
}