/* ============================================================
   PRODUTOS — ESCALA MÉDIA FINAL
============================================================ */

#page-produtos-pro{

  --prod-font:
    10.5px;

  --prod-label:
    9.5px;

  --prod-field-height:
    32px;

  --prod-button-height:
    32px;

  font-size:
    var(--prod-font) !important;

}


/* ============================================================
   TOOLBAR
============================================================ */

#page-produtos-pro
.prod-toolbar{

  gap:10px !important;

  margin-bottom:10px !important;

}


#page-produtos-pro
.prod-toolbar-left,

#page-produtos-pro
.prod-toolbar-right{

  gap:5px !important;

}


#page-produtos-pro
.clm-primary-action,

#page-produtos-pro
.prod-btn-secondary{

  min-height:
    var(--prod-button-height) !important;

  height:
    var(--prod-button-height) !important;

  padding:
    0 10px !important;

  border-radius:
    4px !important;

  font-size:
    10.5px !important;

  line-height:
    1 !important;

}


#page-produtos-pro
.prod-icon-btn{

  width:35px !important;
  min-width:35px !important;

  height:
    var(--prod-button-height) !important;

  min-height:
    var(--prod-button-height) !important;

  padding:0 !important;

}


#page-produtos-pro
.prod-search-btn{

  width:37px !important;
  min-width:37px !important;

  height:
    var(--prod-button-height) !important;

  min-height:
    var(--prod-button-height) !important;

  padding:0 !important;

}


#page-produtos-pro
.prod-busca{

  width:285px !important;

  height:
    var(--prod-field-height) !important;

  padding:0 9px !important;

  border-radius:4px !important;

  font-size:10.5px !important;

}


/* ============================================================
   FILTROS
============================================================ */

#page-produtos-pro
.prod-filtros{

  padding:13px 14px !important;

  margin-bottom:9px !important;

  border-radius:5px !important;

}


#page-produtos-pro
.prod-filter-grid{

  gap:
    12px
    16px !important;

}


#page-produtos-pro
.prod-filter-actions{

  gap:5px !important;

  margin-top:15px !important;

}


/* ============================================================
   CAMPOS
============================================================ */

#page-produtos-pro
.prod-field label{

  margin-bottom:4px !important;

  font-size:
    var(--prod-label) !important;

  line-height:1.2 !important;

}


#page-produtos-pro
.prod-field input,

#page-produtos-pro
.prod-field select{

  min-height:
    var(--prod-field-height) !important;

  height:
    var(--prod-field-height) !important;

  padding:
    5px 8px !important;

  border-radius:4px !important;

  font-size:10px !important;

}


#page-produtos-pro
.prod-field textarea{

  padding:7px 8px !important;

  border-radius:4px !important;

  font-size:10px !important;

}


#page-produtos-pro
.prod-grid-4,

#page-produtos-pro
.prod-grid-3,

#page-produtos-pro
.prod-grid-2{

  gap:
    11px
    14px !important;

}


/* ============================================================
   LISTAGEM
============================================================ */

#page-produtos-pro
.prod-table{

  font-size:10px !important;

}


#page-produtos-pro
.prod-table th,

#page-produtos-pro
.prod-table td{

  padding:
    9px
    10px !important;

}


#page-produtos-pro
.prod-actions{

  width:120px !important;

}


#page-produtos-pro
.prod-actions > button,

#page-produtos-pro
.prod-action-dropdown > button{

  width:28px !important;
  height:28px !important;

  margin:0 1px !important;

}


#page-produtos-pro
.prod-count{

  margin-top:7px !important;

  padding:6px 8px !important;

  font-size:9px !important;

}


/* ============================================================
   LAYOUT DO CADASTRO
============================================================ */

#page-produtos-pro
.prod-editor-layout{

  grid-template-columns:
    215px
    minmax(0,1fr) !important;

  gap:14px !important;

}


/* ============================================================
   MENU INTERNO: DADOS, DETALHES, VALORES...
============================================================ */

#page-produtos-pro
.prod-editor-tabs{

  gap:4px !important;

}


#page-produtos-pro
.prod-editor-tab{

  min-height:44px !important;

  padding:
    6px
    9px !important;

  gap:8px !important;

  border-radius:5px !important;

  box-shadow:none !important;

}


#page-produtos-pro
.prod-editor-tab strong{

  margin-bottom:1px !important;

  font-size:10.5px !important;

  line-height:1.15 !important;

}


#page-produtos-pro
.prod-editor-tab small{

  font-size:8px !important;

  line-height:1.2 !important;

}


#page-produtos-pro
.prod-tab-icon{

  width:19px !important;

  font-size:14px !important;

}


/* Somente a aba realmente utilizada permanece marcada */

#page-produtos-pro
.prod-editor-tab:not(.active){

  background:#fff !important;

  border-color:#d5dde5 !important;

  color:#344054 !important;

  box-shadow:none !important;

}


#page-produtos-pro
.prod-editor-tab:not(.active)
strong{

  color:#344054 !important;

}


#page-produtos-pro
.prod-editor-tab:not(.active)
small{

  color:#667085 !important;

}


#page-produtos-pro
.prod-editor-tab.active{

  background:#155a96 !important;

  border-color:#155a96 !important;

  color:#fff !important;

  box-shadow:
    0 1px 2px
    rgba(15,23,42,.09) !important;

}


#page-produtos-pro
.prod-editor-tab.active
strong{

  color:#fff !important;

}


#page-produtos-pro
.prod-editor-tab.active
small{

  color:
    rgba(255,255,255,.76) !important;

}


/* ============================================================
   CARDS
============================================================ */

#page-produtos-pro
.prod-card{

  margin-bottom:10px !important;

  border-radius:5px !important;

}


#page-produtos-pro
.prod-card-header{

  padding:
    9px
    13px !important;

}


#page-produtos-pro
.prod-card-header h3{

  margin-bottom:3px !important;

  font-size:13px !important;

  line-height:1.25 !important;

}


#page-produtos-pro
.prod-card-header small{

  font-size:8.5px !important;

  line-height:1.25 !important;

}


#page-produtos-pro
.prod-card-body{

  padding:
    12px
    13px !important;

}


/* ============================================================
   CAMPOS COM BOTÃO LATERAL
============================================================ */

#page-produtos-pro
.prod-input-action button{

  min-width:60px !important;

  height:
    var(--prod-field-height) !important;

  padding:0 8px !important;

  font-size:9.5px !important;

}


#page-produtos-pro
.prod-input-suffix span,

#page-produtos-pro
.prod-input-prefix span,

#page-produtos-pro
.prod-percent-input span{

  min-width:34px !important;

  padding:0 6px !important;

  font-size:9.5px !important;

}


/* ============================================================
   DETALHES
============================================================ */

#page-produtos-pro
.prod-rule-row{

  min-height:51px !important;

  gap:10px !important;

}


#page-produtos-pro
.prod-rule-icon{

  width:32px !important;
  height:32px !important;

  font-size:13px !important;

}


#page-produtos-pro
.prod-rule-text strong{

  margin-bottom:2px !important;

  font-size:10.5px !important;

}


#page-produtos-pro
.prod-rule-text small{

  font-size:8.5px !important;

}


#page-produtos-pro
.prod-percent-input{

  width:105px !important;

}


#page-produtos-pro
.prod-description{

  min-height:125px !important;

}


/* ============================================================
   VALORES
============================================================ */

#page-produtos-pro
.prod-values-layout{

  grid-template-columns:
    285px
    minmax(0,1fr) !important;

  gap:14px !important;

}


#page-produtos-pro
.prod-info-box{

  gap:3px !important;

  margin-bottom:11px !important;

  padding:
    9px
    12px !important;

  font-size:9px !important;

}


#page-produtos-pro
.prod-values-head,

#page-produtos-pro
.prod-values-row{

  min-width:690px !important;

  grid-template-columns:
    1fr
    1fr
    1fr
    1fr
    68px
    50px !important;

}


#page-produtos-pro
.prod-values-head span,

#page-produtos-pro
.prod-values-row > *{

  padding:8px !important;

  font-size:9px !important;

}


#page-produtos-pro
.prod-values-buttons{

  margin-top:10px !important;

}


#page-produtos-pro
.prod-green-btn,

#page-produtos-pro
.prod-purple-btn{

  min-height:32px !important;

  height:32px !important;

  padding:0 10px !important;

  border-radius:4px !important;

  font-size:10px !important;

}


/* ============================================================
   FOTOS
============================================================ */

#page-produtos-pro
.prod-photo-drop{

  min-height:195px !important;

  gap:7px !important;

}


#page-produtos-pro
.prod-camera{

  width:48px !important;
  height:48px !important;

  font-size:21px !important;

}


#page-produtos-pro
.prod-photo-drop strong{

  font-size:11px !important;

}


#page-produtos-pro
.prod-photo-drop span,

#page-produtos-pro
.prod-photo-drop small{

  font-size:8.5px !important;

}


/* ============================================================
   FORNECEDORES
============================================================ */

#page-produtos-pro
.prod-supplier-empty{

  min-height:180px !important;

  gap:7px !important;

}


#page-produtos-pro
.prod-supplier-icon{

  width:52px !important;
  height:52px !important;

  font-size:23px !important;

}


/* ============================================================
   RODAPÉ
============================================================ */

#page-produtos-pro
.prod-editor-footer{

  margin-top:11px !important;

}


/* ============================================================
   RESPONSIVO
============================================================ */

@media(max-width:1250px){

  #page-produtos-pro
  .prod-editor-layout{

    grid-template-columns:
      195px
      minmax(0,1fr) !important;

  }


  #page-produtos-pro
  .prod-values-layout{

    grid-template-columns:1fr !important;

  }

}


@media(max-width:850px){

  #page-produtos-pro
  .prod-editor-layout{

    display:block !important;

  }


  #page-produtos-pro
  .prod-editor-tabs{

    display:grid !important;

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

    margin-bottom:12px !important;

  }

}


/* ============================================================
   PRODUTOS — AJUSTE FINO DE PROPORÇÃO
   comissão + descrição
============================================================ */

/* ------------------------------------------------------------
   1) COMISSÃO DO VENDEDOR
   aumenta a caixa e evita corte do valor/percentual
------------------------------------------------------------ */

#page-produtos-pro
.prod-percent-input{
  width: 150px !important;
  min-width: 150px !important;

  display: grid !important;
  grid-template-columns: minmax(0,1fr) 38px !important;
  align-items: stretch !important;
}

#page-produtos-pro
.prod-percent-input input{
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  box-sizing: border-box !important;
  text-align: right !important;
}

#page-produtos-pro
.prod-percent-input span{
  width: 38px !important;
  min-width: 38px !important;
  height: 32px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   2) DESCRIÇÃO DO PRODUTO
   textarea ocupa a área correta, proporcional ao card
------------------------------------------------------------ */

#page-produtos-pro
.prod-description{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 185px !important;
  height: 185px !important;

  display: block !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}

#page-produtos-pro
textarea.prod-description,
#page-produtos-pro
.prod-card textarea,
#page-produtos-pro
textarea[name="descricao"],
#page-produtos-pro
textarea[id*="descricao"]{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 185px !important;
  height: 185px !important;

  display: block !important;
  box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   3) CARD DA DESCRIÇÃO
   evita sobrar espaço vazio e garante largura total
------------------------------------------------------------ */

#page-produtos-pro
.prod-card-body{
  overflow: visible !important;
}

#page-produtos-pro
.prod-grid-2 > .prod-card,
#page-produtos-pro
.prod-grid-2 > div{
  min-width: 0 !important;
}


/* ------------------------------------------------------------
   4) RESPONSIVO
------------------------------------------------------------ */

@media (max-width: 1100px){

  #page-produtos-pro
  .prod-percent-input{
    width: 100% !important;
    min-width: 0 !important;
  }

  #page-produtos-pro
  .prod-description,
  #page-produtos-pro
  textarea.prod-description,
  #page-produtos-pro
  .prod-card textarea,
  #page-produtos-pro
  textarea[name="descricao"],
  #page-produtos-pro
  textarea[id*="descricao"]{
    min-height: 165px !important;
    height: 165px !important;
  }

}