/* Responsividade compartilhada dos formulários EcoFluxERP */
:root{
  --responsive-page-gutter:clamp(10px,2vw,24px);
  --responsive-control-height:42px;
}

html,body{
  max-width:100%;
  overflow-x:hidden;
}

body,
main,
section,
article,
form,
fieldset,
.row,
[class*="-grid"],
[class*="-body"],
[class*="-content"]{
  min-width:0;
}

img,svg,video,canvas{
  max-width:100%;
  height:auto;
}

form,
.form-card,
.erp-card,
.subform,
.panel,
.card,
.modal-content,
.swal2-popup{
  max-width:100%;
}

.form-control,
.form-select,
.form-range,
.input-group,
textarea,
select,
input{
  max-width:100%;
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"]{
  min-width:0;
}

textarea{
  resize:vertical;
}

.input-group{
  width:100%;
  flex-wrap:nowrap;
}

.input-group>.form-control,
.input-group>.form-select{
  min-width:0;
  width:1%;
}

.input-group>.btn,
.input-group>.input-group-text{
  flex:0 0 auto;
}

.row>*{
  min-width:0;
}

.table-responsive,
.detail-table,
.mov-detail-table-wrap{
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}

.form-actions,
.footer-actions,
.form-actions-op,
.vehicle-form-popup .swal2-actions,
.swal2-actions{
  max-width:100%;
}

.swal2-container{
  padding:10px!important;
}

.swal2-popup{
  max-width:calc(100vw - 20px);
  max-height:calc(100dvh - 20px);
  overflow:hidden;
}

.swal2-html-container{
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.vehicle-form-popup,
.mov-detail-popup,
.patio-detail-popup{
  max-height:calc(100dvh - 20px)!important;
}

.vehicle-form-popup .swal2-html-container,
.mov-detail-popup .swal2-html-container,
.patio-detail-popup .swal2-html-container{
  max-height:calc(100dvh - 112px);
  overflow-y:auto!important;
  overscroll-behavior:contain;
}

/* Grades próprias passam a usar a largura disponível sem estourar a tela. */
.permission-grid,
.detail-grid,
.data-grid,
.kpi-grid,
.op-kpis,
.vehicle-form-grid,
.mov-detail-grid,
.mov-detail-summary,
.patio-detail-summary{
  max-width:100%;
}

@media(max-width:1199.98px){
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl{
    max-width:100%;
  }

  .form-card,
  .erp-card,
  .panel{
    width:100%;
  }
}

@media(max-width:991.98px){
  .form-head,
  .content-head,
  .section-heading,
  .panel-head{
    flex-wrap:wrap;
  }

  .form-actions,
  .footer-actions{
    flex-wrap:wrap;
    align-items:stretch;
  }

  .form-actions>div,
  .footer-actions>div{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .permission-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .detail-grid,
  .data-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:767.98px){
  :root{
    --responsive-page-gutter:12px;
    --responsive-control-height:46px;
  }

  body{
    width:100%;
  }

  main,
  .client-app,
  .product-app,
  .op-app,
  .app,
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl{
    padding-left:var(--responsive-page-gutter)!important;
    padding-right:var(--responsive-page-gutter)!important;
  }

  form .row{
    --bs-gutter-x:1rem;
    --bs-gutter-y:.9rem;
  }

  .form-control,
  .form-select{
    min-height:var(--responsive-control-height)!important;
  }

  textarea.form-control{
    min-height:96px!important;
  }

  .form-card,
  .erp-card,
  .panel,
  .subform{
    border-radius:12px;
  }

  .form-actions,
  .footer-actions,
  .form-actions-op{
    position:relative!important;
    bottom:auto!important;
    width:100%;
    padding:12px!important;
  }

  .form-actions>span,
  .footer-actions>span{
    width:100%;
  }

  .form-actions>div,
  .footer-actions>div{
    width:100%;
  }

  .form-actions .btn,
  .footer-actions .btn,
  .form-actions-op .btn{
    min-height:44px;
  }

  .btn-toolbar,
  .btn-group,
  .d-flex.gap-2,
  .d-flex.gap-3{
    flex-wrap:wrap;
  }

  .swal2-container{
    padding:6px!important;
  }

  .swal2-popup{
    max-width:calc(100vw - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
    border-radius:14px!important;
  }

  .vehicle-form-popup,
  .mov-detail-popup,
  .patio-detail-popup{
    width:calc(100vw - 12px)!important;
  }

  .vehicle-form-popup .swal2-html-container,
  .mov-detail-popup .swal2-html-container,
  .patio-detail-popup .swal2-html-container{
    max-height:calc(100dvh - 104px);
  }

  .vehicle-form-header,
  .mov-corp-header{
    align-items:flex-start!important;
    flex-wrap:wrap;
  }

  .vehicle-form-popup .swal2-actions,
  .mov-detail-popup .swal2-actions,
  .patio-detail-popup .swal2-actions{
    position:sticky;
    z-index:3;
    bottom:0;
    width:100%;
    background:#fff;
  }

  .table-responsive table{
    margin-bottom:0;
  }
}

@media(max-width:575.98px){
  /* No celular todos os campos de linhas Bootstrap ficam empilhados. */
  form .row>[class*="col-"]:not(.col-auto),
  .form-responsive .row>[class*="col-"]:not(.col-auto){
    width:100%!important;
    max-width:100%!important;
    flex:0 0 100%!important;
  }

  .form-control,
  .form-select,
  textarea,
  input{
    font-size:16px!important;
  }

  input[type="checkbox"],
  input[type="radio"]{
    font-size:initial!important;
  }

  .input-group>.btn,
  .input-group>.input-group-text{
    min-height:var(--responsive-control-height);
  }

  .permission-grid,
  .detail-grid,
  .data-grid,
  .kpi-grid,
  .op-kpis,
  .mov-detail-grid,
  .mov-detail-summary,
  .patio-detail-summary{
    grid-template-columns:1fr!important;
  }

  .section-heading,
  .form-head,
  .content-head,
  .panel-head{
    align-items:flex-start!important;
  }

  .form-actions>div,
  .footer-actions>div,
  .vehicle-form-popup .swal2-actions,
  .mov-detail-popup .swal2-actions,
  .patio-detail-popup .swal2-actions{
    display:grid!important;
    grid-template-columns:1fr;
  }

  .form-actions .btn,
  .footer-actions .btn,
  .form-actions-op .btn,
  .swal2-actions .swal2-styled,
  .vehicle-form-confirm,
  .vehicle-form-cancel{
    width:100%!important;
    margin:0!important;
  }

  .vehicle-form-header,
  .mov-corp-header{
    padding-left:14px!important;
    padding-right:48px!important;
  }

  .vehicle-form-body,
  .mov-detail-body{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .nav-tabs,
  .op-tabs{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

@media(max-width:359.98px){
  .client-top,
  .product-top,
  .form-topbar,
  .op-top{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .form-card,
  .erp-card,
  .panel,
  .subform{
    border-radius:9px;
  }
}