/* =========================================================
   IMPRA — RESPONSIVO MOBILE / PWA
   Camada final: evita overflow horizontal, ajusta grids,
   formulários, tabelas, modais e navegação para celular.
   ========================================================= */
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;}
body{width:100%;max-width:100%;min-width:0;overflow-x:hidden;}
img,svg,video,canvas{max-width:100%;}
button,input,select,textarea{font:inherit;max-width:100%;}

/* Cabeçalho móvel do painel */
.mobile-header{
  min-height:56px!important;
  height:auto!important;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px!important;
  box-sizing:border-box!important;
  gap:10px!important;
  box-shadow:0 2px 14px rgba(0,0,0,.18)!important;
}
.mobile-header .impra-logo-img{
  width:116px!important;height:43px!important;
  object-fit:contain!important;object-position:left center!important;
}
.mobile-header button{
  width:42px!important;height:42px!important;min-width:42px!important;
  display:grid!important;place-items:center!important;
  border-radius:10px!important;background:rgba(255,255,255,.07)!important;
  color:#fff!important;
}
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.48);
  z-index:999;backdrop-filter:blur(2px);
}
.sidebar-overlay.show{display:block;}

@media(max-width:800px){
  body{padding-bottom:env(safe-area-inset-bottom);}
  .sidebar{width:min(82vw,300px)!important;max-width:300px!important;z-index:1100!important;}
  .main-content{margin-left:0!important;width:100%!important;max-width:100%!important;padding:10px!important;}
  .impra-topbar{
    position:relative!important;top:auto!important;
    width:100%!important;max-width:100%!important;
    min-height:58px!important;height:auto!important;
    padding:10px 12px!important;gap:10px!important;
    align-items:center!important;
  }
  .impra-topbar>div:first-child{min-width:0!important;flex:1 1 auto!important;}
  .impra-topbar-title{font-size:13px!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  .impra-topbar small{font-size:9px!important;display:block!important;line-height:1.3!important;}
  .top-actions{gap:5px!important;flex:0 0 auto!important;}
  .top-icon{width:34px!important;height:34px!important;}
  .top-user{padding-left:5px!important;border-left:0!important;}
  .top-avatar{width:30px!important;height:30px!important;}

  /* qualquer grade do painel vira coluna ou 2 colunas quando cabe */
  .dashboard-container,.dashboard-content,.content-grid,.stats-grid,.cards-grid,
  .settings-container,.settings-content,.form-row,.page-header,.filters,
  .actions,.action-grid,.kpi-grid{max-width:100%!important;min-width:0!important;}
  .settings-container{grid-template-columns:1fr!important;}
  .settings-sidebar{display:flex!important;overflow-x:auto!important;gap:6px!important;padding:8px!important;}
  .settings-nav{flex-direction:row!important;overflow-x:auto!important;min-width:max-content!important;}
  .settings-nav-item{white-space:nowrap!important;padding:9px 11px!important;font-size:11px!important;}

  .impra-grid-4,.impra-grid-3,.impra-grid-2{grid-template-columns:1fr!important;}
  .ref-dashboard{grid-template-columns:1fr!important;min-width:0!important;}
  .ref-kpis{grid-template-columns:1fr 1fr!important;min-width:0!important;}
  .ref-card,.ref-sales,.ref-orders,.ref-products,.ref-order-detail,.ref-reports,
  .ref-promos,.ref-finance,.ref-pdv,.ref-users,.ref-settings,.ref-integrations,
  .ref-pwa,.ref-structure,.ref-mobile-previews{grid-column:1!important;min-width:0!important;max-width:100%!important;}
  .ref-mobile-previews{grid-template-columns:repeat(2,1fr)!important;}
  .ref-table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch;}

  /* Formulários */
  .form-row{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .form-group,.field,.hw-field,.input-group{min-width:0!important;width:100%!important;}
  .form-control,.form-input,.filter-select,.swal2-input,
  input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],
  input[type=date],input[type=time],input[type=url],select,textarea{width:100%!important;max-width:100%!important;min-width:0!important;}
  textarea{min-height:90px;resize:vertical;}
  .btn,.impra-btn,.btn-action,.btn-save,.btn-primary,.btn-success,.btn-danger,
  .btn-outline,.btn-modal,.btn-print{max-width:100%!important;}
  .page-header{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:10px!important;}
  .page-header>*{min-width:0!important;}

  /* Tabelas sem estourar a tela */
  .table-box,.content-box,.impra-panel,.card,.card-box,.qg-card,.preview-card{max-width:100%!important;min-width:0!important;overflow:hidden!important;}
  .table-box>table,.content-box>table,.impra-panel>table{display:block!important;width:100%!important;overflow-x:auto!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch;}
  table{max-width:100%;}
  th,td{white-space:nowrap;}

  /* Modais */
  .modal-overlay,.modal-backdrop{padding:12px!important;align-items:center!important;}
  .modal-box,.modal-content,.modal-dialog,.partner-card{width:100%!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important;}

  /* Conteúdos com largura fixa */
  .page-container,.container{width:100%!important;max-width:100%!important;}
  .page-container{padding:12px!important;}
  .totals-box{width:100%!important;margin-left:0!important;text-align:left!important;}
  .qg-card{padding:12px!important;}

  /* PDV */
  body:has(.pdv-wrapper){overflow:auto!important;}
  .main-content:has(.pdv-wrapper){overflow:visible!important;}
  .pdv-wrapper{width:100%!important;max-width:100%!important;min-width:0!important;}
  .pdv-left,.pdv-right{min-width:0!important;width:100%!important;}

  /* Evita zoom e botões cortados */
  .action-buttons,.top-actions{flex-wrap:wrap!important;}
  .action-buttons>*{min-width:0!important;}
}

@media(max-width:480px){
  .main-content{padding:8px!important;}
  .mobile-header{padding-left:10px!important;padding-right:10px!important;}
  .mobile-header .impra-logo-img{width:108px!important;height:40px!important;}
  .impra-topbar{padding:9px!important;border-radius:10px!important;}
  .impra-topbar small{display:none!important;}
  .top-user{display:none!important;}
  .top-actions{margin-left:auto!important;}
  .ref-kpis{grid-template-columns:1fr 1fr!important;gap:7px!important;}
  .ref-kpi{padding:9px!important;min-height:66px!important;}
  .ref-kpi-value{font-size:14px!important;}
  .ref-kpi-label{font-size:7px!important;}
  .ref-kpi-note{font-size:7px!important;}
  .impra-btn{width:100%;min-height:40px;}
  .page-header .impra-btn,.page-header .btn{width:auto;flex:1 1 140px;}
  .ref-head{gap:8px!important;flex-wrap:wrap!important;}
  .ref-action{white-space:nowrap!important;}
}

/* telas muito estreitas */
@media(max-width:360px){
  .ref-kpis{grid-template-columns:1fr!important;}
  .mobile-header .impra-logo-img{width:100px!important;}
  .top-icon{width:32px!important;height:32px!important;}
}

/* =========================================================
   EXTRAS: produtos, PDV, imagens e dashboard
   ========================================================= */
img.prod-img,
.prod-img,
.product-card img,
.prod-img-container img {
  object-fit: cover !important;
  object-position: center !important;
  max-width: 100%;
}

.prod-img-container {
  overflow: hidden !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 800px) {
  .pdv-wrapper {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  .pdv-left {
    overflow: visible !important;
    max-height: none !important;
  }
  .pdv-right {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #e5e7eb !important;
  }
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 10px !important;
  }
  .prod-list .prod-header {
    flex-wrap: wrap !important;
  }
  .dash-wrap, .dash-grid, .dash-kpis, .dash-quick {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .prod-card {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

/* Dashboard PWA / mobile stability */
@media (max-width: 800px) {
  .dash-wrap, .page-container, .main-content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .dash-grid, .dash-kpis, .dash-quick, .cards-grid, .mes-grid {
    grid-template-columns: 1fr !important;
  }
  .dash-card, .mes-card, .cx-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  table.cx, .mes-card table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}