/* Triune AV Planner — responsividade + PWA (safe-area)
   Estratégia: sidebar colapsa para ícones <980px; áreas seguras (notch/home
   indicator) respeitadas; tabelas e grids refluem. iPhone 12 mini (375px) ok.
   Carregado por último para sobrepor o shell. */

/* ===== Safe-area (notch, barra superior, home indicator, quinas) =====
   Estratégia "zona proibida": nada encosta nas bordas/quinas do aparelho.
   Usamos max(env, piso) pra garantir margem MÍNIMA mesmo quando o device
   reporta env()=0 (a maioria reporta 0 nas laterais em retrato, mas a tela
   tem cantos arredondados que cortariam o conteúdo). */
:root {
  --safe-top:    max(env(safe-area-inset-top, 0px), 0px);
  --safe-right:  max(env(safe-area-inset-right, 0px), 0px);
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  --safe-left:   max(env(safe-area-inset-left, 0px), 0px);
}
.side { padding-bottom: env(safe-area-inset-bottom, 0px); }
.topbar { padding-top: env(safe-area-inset-top, 0px); }
.main { padding-right: env(safe-area-inset-right, 0px); }

/* ===== Sidebar colapsada (ícones) em telas médias ===== */
@media (max-width: 980px) {
  .side { width: 68px; }
  .side .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .side .brand-text,
  .side .nav-item > span:not(.nav-bar),
  .side .nav-tag,
  .side .nav-label,
  .side .nav-sec,
  .side .user-info,
  .side .user-chev { display: none !important; }
  .side .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
  .side .user-card { justify-content: center; padding-left: 0; padding-right: 0; }
}

/* ===== Mobile cheio (≤768px): sidebar vira barra inferior fixa ===== */
@media (max-width: 768px) {
  .app { flex-direction: column; }
  .side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: auto; flex-direction: row; z-index: 50;
    border-right: none; border-top: 1px solid var(--line-2);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-2);
    justify-content: flex-start; gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .brand, .side-divider, .user-card { display: none; }
  .side .nav { display: flex; flex-direction: row; flex: 1; justify-content: flex-start; gap: 8px; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-item { flex-direction: column; gap: 3px; padding: 4px 8px; font-size: 9px; min-width: 65px; flex: none; }
  .nav-item > span:not(.nav-bar) { display: block; font-size: 9px; }
  .nav-item .nav-bar { display: none; }
  .nav-item.active { color: var(--red); background: none; }
  /* esconde itens secundários na barra inferior (ficam em "Mais" no futuro) */
  /* .nav-item[data-route="estoque"], .nav-item[data-route="config"], .nav-item[data-route="ajuda"] { display: none; } */

  /* Barra inferior fixa: respeita home indicator + margem lateral mínima */
  .side {
    padding-left: max(var(--safe-left), 8px);
    padding-right: max(var(--safe-right), 8px);
    padding-bottom: max(var(--safe-bottom), 8px);
  }

  /* Conteúdo nunca encosta nas bordas: piso de 18px nas laterais + safe-area.
     Bottom: altura da nav (64) + safe-bottom pra não ficar atrás da barra. */
  .main { padding-bottom: calc(56px + var(--safe-bottom)); }
  .topbar {
    height: auto;
    padding-top: calc(var(--safe-top) + 8px);
    padding-bottom: 8px;
    padding-left: max(var(--safe-left), 14px);
    padding-right: max(var(--safe-right), 14px);
  }
  .view {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: max(var(--safe-left), 14px);
    padding-right: max(var(--safe-right), 14px);
  }

  /* tabelas e grids reflui */
  .proj-table-wrap, .est-table, .pl-table { overflow-x: auto; }
  .proj-bar, .lib-bar, .est-bar, .proj-stats, .est-stats, .dash-stats { flex-wrap: wrap; }
  .dash-stats, .est-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-cols { grid-template-columns: 1fr; }
  .lib-grid { column-count: 1; }
  .form-grid { grid-template-columns: 1fr !important; }
  .field.span-2 { grid-column: auto !important; }

  /* planos: sub-abas rolam; canvas e sidebars internas empilham */
  .plan-tabs { overflow-x: auto; }
  .rk, .pp, .cfg { flex-direction: column; }
  .rk-lib, .pp-lib, .cfg-nav { width: 100%; border-right: none; border-bottom: 1px solid var(--line-2); }
  .cfg-nav { flex-direction: row; overflow-x: auto; }
  .pk { flex-direction: column; }
  .rk-canvas { flex-direction: column; align-items: center; }

  /* topbar actions não colam na borda */
  .top-actions { gap: 6px; }
  .btn { font-size: 12px; min-height: 32px; height: 32px; padding: 0 10px; }

  /* INPUTS — força 15px/16px no mobile para evitar zoom automático no iOS mas mantém compacto */
  input, select, textarea,
  .rk-lib-search input, .rk-usize input, .rk-depth select,
  .est-select select, .hlp-search input, .st-side-search input,
  .cv-pick-search input, .share-url {
    font-size: 15px !important;
  }
  /* Inputs compactos no mobile - altura confortável e elegante */
  input[type="text"], input[type="email"], input[type="number"], input[type="search"],
  input[type="tel"], input[type="url"], input[type="password"], select, textarea {
    min-height: 36px;
    padding: 6px 10px;
  }
  /* Botões elegantes no mobile */
  button, .btn { min-height: 32px; height: 32px; font-size: 12px; }
  .btn-sm { min-height: 26px; height: 26px; font-size: 11px; padding: 0 8px; }
}

/* evita conteúdo colado nas laterais em qualquer largura pequena */
@media (max-width: 400px) {
  /* Mantém safe-area mas com piso menor em telas bem pequenas para maximizar o conteúdo */
  .view { padding-left: max(var(--safe-left), 12px); padding-right: max(var(--safe-right), 12px); }
  .topbar { padding-left: max(var(--safe-left), 12px); padding-right: max(var(--safe-right), 12px); }
  .dash-stats, .est-stats, .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .js-paper { padding: 14px 12px; }

  /* iPhone 12 mini (360x780) e similares — espaçamento mais compacto */
  .crumb-title { font-size: 13.5px; }
  .plan-tab { padding: 6px 8px 8px !important; font-size: 12px; }
  #topActions .btn { padding: 0 8px; }
  .cv-bar { padding: 6px; gap: 4px; }
  .cv-bar-hint { display: none; }
  /* Modal full-width no mobile pequeno */
  .tui-modal { width: 95vw !important; max-width: none !important; }
}

/* ===== Mobile específico: picker, patch list, packlist ===== */
@media (max-width: 768px) {
  /* Picker de equipamento — footer empilhado no mobile */
  .cv-pick-footer { flex-direction: column; gap: 8px; align-items: stretch; }
  .cv-pick-hint { display: none; }
  .cv-pick-list { max-height: 60vh; }

  /* Patch list: tabela vira lista de cards no mobile (cada cabo = card) */
  .pl-table { font-size: 13px; }
  .pl-h { display: none; }
  .pl-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "num cable id"
      "from arrow to"
      "len len len";
    gap: 4px 10px !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--line-2);
  }
  .pl-row .pl-n { grid-area: num; }
  .pl-row .pl-cable { grid-area: cable; }
  .pl-row .pl-id { grid-area: id; text-align: right; }
  .pl-row .pl-ep:first-of-type { grid-area: from; }
  .pl-row .pl-arrow { grid-area: arrow; text-align: center; }
  .pl-row .pl-ep:last-of-type { grid-area: to; text-align: right; }
  .pl-row .pl-len { grid-area: len; font-size: 11px; color: var(--txt-3); }

  /* Resumo do patch list quebra em linhas */
  .pl-summary { flex-wrap: wrap; gap: 6px; }
  .pl-summary-lbl { width: 100%; }

  /* Packlist sempre coluna única no mobile (já tem .pk flex-direction: column) */
  .pk-col { width: 100%; }
  .pk-topbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .pk-topbar .btn { width: 100%; }
  .pk-cable-h { display: none !important; }
  .pk-cable {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }
  .pk-cable-t {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .pk-cable-x, .pk-cable-s {
    display: none !important;
  }
  .pk-cable-l {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-3) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-md) !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--ok) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .pk-cable-l::before {
    content: "Levar: " !important;
    font-size: 11px !important;
    font-weight: normal !important;
    color: var(--txt-3) !important;
    margin-right: 4px !important;
  }

  /* Modal de share — input ocupa largura toda */
  .share-item { flex-direction: column; align-items: stretch; }
  .share-actions { justify-content: flex-end; }
}

/* =============================================================
   MODO CONSULTA NO MOBILE (≤768px)
   Cassio usa celular pra CONSULTAR plano em campo, não pra editar.
   Escondemos controles de edição secundários pra dar mais espaço
   pro conteúdo. Botão "Compartilhar" + "Exportar PDF" continuam
   visíveis. Auto-save cuida sozinho de salvar.
   ============================================================= */
@media (max-width: 768px) {
  /* Tabs do plano grudam no topo ao rolar — não se perde navegação */
  .plan-tabs-wrap {
    position: sticky; top: 0; z-index: 30;
    background: var(--bg-2); border-bottom: 1px solid var(--line-2);
  }

  /* Menubar de EDIÇÃO (Arquivo/Editar/Exibir/Cabos/Adicionar) escondida
     em mobile — é tela de consulta. A menubar agora só tem os menus. */
  .plan-menubar { display: none; }
  /* Ações no topbar (#topActions): em mobile mantém Compartilhar (ícone)
     e o indicador Salvo; esconde o botão Salvar (auto-save cuida) e o
     label "Compartilhar" pra economizar espaço no topo de 375px */
  #topActions #mbSave { display: none; }
  #topActions .mb-btn-lbl { display: none; }
  #topActions .mb-saved { font-size: 0; gap: 0; }
  #topActions .mb-saved svg { width: 15px; height: 15px; }

  /* Pill de status (Planejamento, Confirmado...) tem que caber */
  .pill { font-size: 10px; padding: 2px 7px; flex-shrink: 0; }
  /* Dashboard: nome do evento permite wrap, descrição idem; divisor some */
  .dash-event-main b { white-space: normal; word-break: break-word; line-height: 1.25; }
  .dash-event-main i { word-break: break-word; }
  .dash-event-div { display: none; }
  .dash-event .pill { max-width: 96px; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; }
  /* Stats: mesma coisa */
  .stats-event-main b { white-space: normal; word-break: break-word; line-height: 1.25; }

  /* Tabela de Projetos em mobile vira cards compactos e elegantes */
  .proj-table { display: flex !important; flex-direction: column; gap: 8px; }
  .proj-row-head { display: none !important; }
  .proj-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "name   status"
      "client client"
      "date   stats" !important;
    gap: 6px 10px !important;
    padding: 12px 14px !important;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    position: relative;
    cursor: pointer;
  }
  .proj-row .proj-cell-main { grid-area: name; padding-right: 28px; }
  .proj-row > .proj-cell:nth-child(2) { grid-area: client; font-size: 12px; }
  .proj-row > .proj-cell:nth-child(3) { grid-area: date; font-size: 11px; color: var(--txt-3); }
  .proj-row > .proj-cell:nth-child(4) {
    grid-area: stats;
    display: inline-flex !important;
    font-size: 11px;
    font-weight: 600;
    color: var(--txt-2);
  }
  .proj-row > .proj-cell:nth-child(4)::after {
    content: " eq";
    font-weight: normal;
    color: var(--txt-4);
    margin-right: 8px;
  }
  .proj-row > .proj-cell:nth-child(5) {
    grid-area: stats;
    display: inline-flex !important;
    font-size: 11px;
    font-weight: 600;
    color: var(--txt-2);
    margin-left: 45px;
  }
  .proj-row > .proj-cell:nth-child(5)::after {
    content: " cabos";
    font-weight: normal;
    color: var(--txt-4);
  }
  .proj-row > .proj-cell:nth-child(6) { grid-area: status; align-self: start; justify-self: end; }
  .proj-row > .proj-cell:nth-child(7) {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  /* Patch list em mobile DEFAULT: grid (mais legível que table apertada).
     O usuário ainda pode trocar pra lista clicando no toggle. */
  /* (handled em JS: localStorage mobile-default) */

  /* Tabela do estoque vira cards empilhados em mobile */
  .est-table { display: flex !important; flex-direction: column; gap: 8px; }
  .est-h { display: none !important; }
  .est-row {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    grid-template-areas:
      "name   total  edit"
      "cat    disp   edit" !important;
    gap: 4px 10px !important;
    padding: 12px !important;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    align-items: center;
  }
  .est-row .est-name { grid-area: name; }
  .est-row .est-cat  { grid-area: cat; color: var(--txt-3); font-size: 11.5px; }
  .est-row .est-strong { grid-area: total; }
  .est-row .est-disp { grid-area: disp; font-size: 11.5px; }
  .est-row .est-edit { grid-area: edit; }
  /* Esconde colunas em uso/manut que poluem em mobile */
  .est-row > .mono.ta-right { display: none; }
  /* Header também esconde, mas col 0 + 1 sim — restaurar total via :nth-child específico */
  .est-row > .mono.ta-right.est-strong { display: inline; }

  /* Equipe: esconder botão "Adicionar a [grupo]" embaixo de cada grupo
     pra reduzir poluição. Botão grande no topo já basta */
  .eq-add-card { display: none; }

  /* Botões grandes no topo da aba viram menores em mobile (acompanha
     o botão "+ Novo" geral) */
  .eq-bar .btn-primary, .fr-bar .btn-primary { font-size: 13px; padding: 0 12px; }

  /* Studio em mobile: a planta sumiu pelo viewport pequeno. Avisar e
     sugerir desktop em vez de mostrar planta minúscula */
  .st-2col { flex-direction: column; }
  .st-side { width: 100% !important; height: auto; max-height: 200px; }
  .st-toolbar { flex-wrap: wrap; gap: 6px; }

  /* Resumo: tabela apertada precisa scroll horizontal */
  .rs-table { overflow-x: auto; }
  .rs-tbody { min-width: 600px; }
}

/* Detalhes finos de polimento mobile (#6 cobertura visual) */
@media (max-width: 768px) {
  /* Fornecedores: toolbar quebra em linha se necessário, botão Novo
     vai pra baixo dos export (CSV/PDF) ao invés de estourar a largura */
  .fr-bar { flex-wrap: wrap; gap: 8px; }
  .fr-bar .fr-add { flex: 1 1 100%; justify-content: center; order: 99; }

  /* Builder: breadcrumb não fica cortado — title quebra em 2 linhas e
     os botões Cancelar/Salvar ficam compactos */
  .bld-top { flex-wrap: wrap; gap: 10px; }
  .bld-crumb { flex: 1 1 100%; min-width: 0; }
  .bld-crumb-now { white-space: normal !important; word-break: break-word; }
  .bld-top-actions { width: 100%; justify-content: flex-end; }

  /* Equipe / Fornecedores cards: nada encostando na borda */
  .fr-card, .eq-card { word-break: break-word; }
}