/*
 * Estrela VIP - camada mobile
 * Mantem a experiencia desktop intacta e aplica uma navegacao de aplicativo em telas pequenas.
 */
.mobile-bottom-nav,.mobile-more-sheet,.mobile-more-backdrop{display:none}

@media(max-width:780px){
  :root{--mobile-nav-height:70px}

  html,body{min-height:100%;background:#f7f7f5}
  body{padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}
  .app{min-height:100dvh}
  .main{min-width:0;min-height:100dvh}
  .content{
    padding:14px 12px calc(var(--mobile-nav-height) + 28px + env(safe-area-inset-bottom))!important;
    max-width:none
  }

  /* Cabecalho mais limpo no celular. O menu completo passa para a aba Mais. */
  #mobileMenuButton{display:none!important}
  .topbar{
    min-height:60px!important;
    padding:8px 12px!important;
    background:rgba(255,255,255,.97)!important;
    border-bottom:1px solid var(--line);
    box-shadow:0 3px 16px rgba(25,22,14,.05)
  }
  .topbar h2{display:block!important;font-size:16px!important}
  .topbar-actions{gap:6px!important}
  .topbar-actions .tutorial-top-button,
  .topbar-actions .profile-box{display:none!important}
  .notification-button{min-width:44px!important;width:44px!important;height:44px!important;padding:0!important;justify-content:center}
  .notification-count{
    position:absolute;right:-3px;top:-5px;min-width:18px;height:18px;padding:0 4px;font-size:9px
  }
  .notification-panel{position:fixed;left:10px;right:10px;top:66px;width:auto;max-height:70dvh}

  /* Cartoes e indicadores com densidade de app. */
  .card{border-radius:15px;box-shadow:0 5px 18px rgba(28,24,15,.06)}
  #dashboardMetrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important
  }
  #dashboardMetrics .card,#dashboardMetrics .metric{min-width:0}
  #dashboardMetrics .metric .value{font-size:22px}
  #dashboard .quick-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important
  }
  #dashboard .quick-action{min-width:0;padding:13px 10px}
  #dashboard .quick-action span{font-size:22px}
  #dashboard .quick-action strong{font-size:12px}

  /* OS: no mobile o Kanban vira uma sequencia vertical de grupos. */
  #os .toolbar{gap:8px}
  #os .toolbar-left,#os .toolbar-right{display:grid!important;grid-template-columns:1fr!important;gap:8px;width:100%}
  #os .toolbar-left>*,
  #os .toolbar-right>*{width:100%!important;max-width:none!important}
  #osViewButton{display:none!important}
  #os .kanban{display:block!important;overflow:visible!important}
  #os .kanban-col{min-height:0!important;margin-bottom:11px;padding:10px}
  #os .kanban-card{padding:12px;border-radius:13px}
  #osDailyAgendaCard{padding:13px}
  .os-agenda-item{padding:10px!important}
  .os-agenda-actions .btn{min-height:42px}

  /* PDV em fluxo vertical para operacao com uma mao. */
  .pdv-simple,.pdv-layout{grid-template-columns:1fr!important;gap:12px!important}
  .pdv-closing-card{position:static!important;top:auto!important}
  .quick-product-row{
    grid-template-columns:minmax(0,1fr) 86px!important;
    gap:8px!important
  }
  .quick-product-row>.btn{grid-column:1/-1;width:100%}
  .scanner-row{grid-template-columns:1fr!important}
  .scanner-row .btn{width:100%}
  .payment-row-main,.payment-card-fields{grid-template-columns:1fr!important}
  .receipt-actions{grid-template-columns:1fr!important}
  .sale-cart-table{min-width:560px}
  #cartItems{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Formularios e modais. */
  .form-grid{gap:10px!important}
  .input-action-row{grid-template-columns:1fr!important}
  .input-action-row .input{grid-column:auto!important}
  .input-action-row .btn{width:100%}
  .modal-panel{padding-left:12px!important;padding-right:12px!important}
  #modalQuickOS .qos-page{padding-left:12px!important;padding-right:12px!important;padding-bottom:calc(var(--mobile-nav-height) + 24px + env(safe-area-inset-bottom))!important}
  #modalQuickOS .qos-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  #modalQuickOS .qos-actions .btn{width:100%;min-height:46px}
  #modalQuickOS .qos-actions .btn:last-child{grid-column:1/-1}

  /* Tabelas continuam acessiveis sem apertar colunas. */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:680px}

  /* Barra inferior principal. */
  .mobile-bottom-nav{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed;
    left:0;right:0;bottom:0;
    height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    padding:6px 6px env(safe-area-inset-bottom);
    background:rgba(255,255,255,.98);
    border-top:1px solid #e6e1d5;
    box-shadow:0 -8px 24px rgba(32,27,17,.10);
    z-index:520
  }
  .mobile-nav-button{
    border:0;background:transparent;color:#746e61;border-radius:12px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-width:0;padding:4px 2px;font-size:10px;font-weight:800
  }
  .mobile-nav-button .mobile-nav-icon{font-size:20px;line-height:1}
  .mobile-nav-button.active{background:#fff7dc;color:#7c5d0d}
  .mobile-nav-button:active{transform:scale(.97)}

  /* Menu Mais em formato de bottom sheet. */
  .mobile-more-backdrop{
    position:fixed;inset:0;background:rgba(16,16,16,.42);z-index:530;border:0
  }
  .mobile-more-backdrop.open{display:block}
  .mobile-more-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:540;
    background:#fff;border-radius:22px 22px 0 0;
    padding:10px 14px calc(18px + env(safe-area-inset-bottom));
    max-height:78dvh;overflow:auto;
    box-shadow:0 -20px 60px rgba(0,0,0,.2)
  }
  .mobile-more-sheet.open{display:block}
  .mobile-more-handle{width:42px;height:4px;border-radius:999px;background:#d5d1c7;margin:2px auto 12px}
  .mobile-more-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  .mobile-more-head h3{margin:0;font-size:17px}
  .mobile-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mobile-more-item{
    border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px 10px;
    min-height:72px;text-align:left;display:flex;align-items:center;gap:10px;
    font-weight:800;color:#2f2b23
  }
  .mobile-more-item span:first-child{font-size:21px}
  .mobile-more-item small{display:block;color:var(--muted);font-size:9px;font-weight:650;margin-top:2px}
  .mobile-more-item.danger{color:#9c3030;background:#fff8f8;border-color:#efd0d0}
}

@media(max-width:420px){
  #dashboardMetrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #dashboard .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mobile-more-grid{grid-template-columns:1fr 1fr}
  .quick-product-row{grid-template-columns:1fr!important}
  .quick-product-row>div,.quick-product-row>.btn{grid-column:auto!important}
}


/* Ajustes finais da experiencia mobile para todas as areas. */
@media(max-width:780px){
  .mobile-sync-status{
    display:flex;align-items:center;gap:5px;margin-top:3px;color:#70695c;
    font-size:9px;font-weight:800;white-space:nowrap
  }
  .mobile-sync-dot{width:7px;height:7px;border-radius:50%;background:#a7a297;box-shadow:0 0 0 2px rgba(167,162,151,.15)}
  .mobile-sync-status[data-status="ok"] .mobile-sync-dot{background:#23865a;box-shadow:0 0 0 2px rgba(35,134,90,.15)}
  .mobile-sync-status[data-status="syncing"] .mobile-sync-dot{background:#c18b19;animation:mobileSyncPulse 1s infinite}
  .mobile-sync-status[data-status="error"] .mobile-sync-dot{background:#b33838}
  @keyframes mobileSyncPulse{50%{opacity:.35}}

  .mobile-more-item.install{background:#fff9e8;border-color:#e7cf81;color:#6f5209}

  /* Toolbars viram blocos verticais consistentes. */
  .toolbar{gap:8px!important}
  .toolbar-left,.toolbar-right{
    display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:8px!important
  }
  .toolbar-left>*,
  .toolbar-right>*{width:100%!important;max-width:none!important;min-width:0!important}

  /* CRM e equipe. */
  #crm .card,#vendedores .card,#tecnicos .card,#estoque .card,#garantias .card{padding:13px}
  #crm .table-wrap,#vendedores .table-wrap,#tecnicos .table-wrap,#estoque .table-wrap,#garantias .table-wrap{
    margin-left:-5px;margin-right:-5px;padding:0 5px
  }
  #crm table,#vendedores table,#tecnicos table,#estoque table,#garantias table{min-width:720px}
  #customersTable .btn,#productsTable .btn,#techniciansTable .btn,#sellersTable .btn{min-height:40px}

  /* Clube e portal: cards em uma coluna e botoes largos. */
  #clube .grid-3,#clube .grid-4,#portal .grid-3,#portal .grid-4{grid-template-columns:1fr!important}
  #clube .loyalty-hero{padding:14px!important;border-radius:15px!important}
  #clube .loyalty-hero>div:last-child{width:100%}
  #clube .loyalty-hero .btn{flex:1 1 140px}
  #portal .portal-tabs{overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch}
  #portal .portal-tab{flex:0 0 auto;white-space:nowrap}

  /* Caixa: operacao vertical e totais legiveis. */
  #caixa .grid-3,#caixa .grid-4{grid-template-columns:1fr!important}
  #caixa .card{padding:13px}
  #caixa .btn{min-height:44px}
  #cashClosingTotals>div,#pdvCashClosingDifference>div{grid-template-columns:1fr!important}
  #caixa table{min-width:680px}

  /* Relatorios e fiscal: filtros primeiro, resultados abaixo. */
  #relatorios .grid-3,#relatorios .grid-4,#fiscal .grid-3,#fiscal .grid-4{grid-template-columns:1fr!important}
  #relatorios .report-filter-grid{grid-template-columns:1fr!important}
  #relatorios .report-filter-grid>div{grid-column:auto!important}
  #relatorios .report-detail-tabs{display:grid;grid-template-columns:1fr 1fr}
  #relatorios .report-detail-tabs .btn{width:100%}
  #fiscal .fiscal-status-grid{grid-template-columns:1fr 1fr!important}
  #fiscal .scanner-row{grid-template-columns:1fr!important}
  #fiscal .scanner-row .btn{width:100%}

  /* Configuracoes: cada painel ocupa a largura da tela. */
  #config .grid-2,#config .grid-3,#config .grid-4,#config .form-grid{grid-template-columns:1fr!important}
  #config .card{padding:13px}
  #config .btn{min-height:44px}
  #config table{min-width:680px}

  /* Fotos e captura no celular. */
  .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .camera-panel{width:100%!important}
  .camera-stage{min-height:220px}
  .camera-stage video{max-height:58dvh}
  .camera-actions{display:grid!important;grid-template-columns:1fr!important}
  .camera-actions .btn{width:100%!important}

  /* Garantia e detalhes de OS. */
  .warranty-row{grid-template-columns:1fr!important;gap:8px!important}
  .warranty-row .btn{width:100%}
  .checklist-grid,.checklist-view{grid-template-columns:1fr!important}
  .checklist-test{grid-template-columns:1fr!important}
  .checklist-options{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
  .checklist-option{white-space:normal!important;min-width:0;padding:8px 4px}

  /* Campos numericos e horarios mais confortaveis. */
  input[type="date"],input[type="time"],input[type="number"],input[type="tel"],input[type="text"],input[type="password"],select,textarea{
    max-width:100%
  }

  /* Evita que modais abertos fiquem por baixo da barra inferior. */
  .modal.open{z-index:700!important}
  .modal-panel{padding-bottom:calc(24px + env(safe-area-inset-bottom))!important}
}

@media(max-width:420px){
  #fiscal .fiscal-status-grid{grid-template-columns:1fr!important}
  #relatorios .report-detail-tabs{grid-template-columns:1fr!important}
  .mobile-more-item{padding:11px 9px;min-height:68px}
}


/* Tabelas renderizadas como cartões no celular, preservando todos os botões e campos. */
@media(max-width:780px){
  .table-wrap>table.mobile-card-table{
    display:block!important;min-width:0!important;width:100%!important;border-collapse:separate!important
  }
  .table-wrap>table.mobile-card-table>thead{display:none!important}
  .table-wrap>table.mobile-card-table>tbody{display:grid!important;gap:10px!important;width:100%!important}
  .table-wrap>table.mobile-card-table>tbody>tr{
    display:block!important;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:6px 11px;box-shadow:0 4px 14px rgba(30,26,17,.045);width:100%!important
  }
  .table-wrap>table.mobile-card-table>tbody>tr:hover{background:#fff}
  .table-wrap>table.mobile-card-table>tbody>tr>td{
    display:grid!important;grid-template-columns:minmax(92px,36%) minmax(0,1fr);
    gap:10px;align-items:start;width:100%!important;padding:9px 0!important;
    border-bottom:1px solid #f0ede5!important;text-align:left!important;overflow-wrap:anywhere
  }
  .table-wrap>table.mobile-card-table>tbody>tr>td:last-child{border-bottom:0!important}
  .table-wrap>table.mobile-card-table>tbody>tr>td::before{
    content:attr(data-label);font-size:9px;line-height:1.35;text-transform:uppercase;
    letter-spacing:.05em;font-weight:900;color:#777064;padding-top:2px
  }
  .table-wrap>table.mobile-card-table>tbody>tr>td.mobile-table-full{
    display:block!important;padding:13px 2px!important;text-align:center!important
  }
  .table-wrap>table.mobile-card-table>tbody>tr>td.mobile-table-full::before{display:none}
  .table-wrap>table.mobile-card-table .btn{width:auto;max-width:100%;white-space:normal}
  .table-wrap>table.mobile-card-table td>div{min-width:0}
}


/* Safe areas e mensagens sobre a barra inferior. */
@media(max-width:780px){
  .topbar{
    padding-top:max(8px,env(safe-area-inset-top))!important;
    min-height:calc(60px + env(safe-area-inset-top))!important
  }
  .toast{
    left:12px!important;right:12px!important;
    bottom:calc(var(--mobile-nav-height) + 10px + env(safe-area-inset-bottom))!important;
    z-index:900!important;text-align:center
  }
  .stock-popup{top:calc(68px + env(safe-area-inset-top))!important}
  .notification-panel{top:calc(64px + env(safe-area-inset-top))!important}
}