/* CONTAINER */

.os-container{
max-width:1180px;
margin:auto;
padding:4px;
font-family:Arial, Helvetica, sans-serif;
}


/* CAIXAS */

.os-box{
border:1px solid #d7e3ff;
border-radius:6px;
background:#f8fbff;
padding:6px;
margin-bottom:6px;
}


/* TITULOS */

.os-title{
font-size:12px;
font-weight:700;
color:#1e3a8a;
margin-bottom:4px;
}

.os-header{
font-size:10px;
font-weight:600;
margin-bottom:2px;
color:#374151;
}


/* NOVO CABEÇALHO OS */

.os-title-row{
display:flex;
align-items:center;
margin-bottom:4px;
}

.os-numero{
margin-left:auto;
font-size:12px;
font-weight:700;
color:#1e3a8a;
}


/* INPUTS */

.os-input{
height:22px;
font-size:11px;
padding:2px 4px;
border:1px solid #d6defa;
border-radius:4px;
background:#fff;
}


/* TABELAS */

.os-table{
width:100%;
border-collapse:separate;
border-spacing:2px 1px;
table-layout:fixed;
}

.os-table td{
padding:1px;
}


/* TABELAS PEÇAS / SERVIÇOS */

#pecasTabela,
#servicosTabela{
margin-top:4px;
font-size:11px;
border-collapse:collapse;
width:100%;
}


/* CABEÇALHO AZUL */

#pecasTabela thead,
#servicosTabela thead{
background:#e8f0ff;
font-weight:600;
}


/* ZEBRA */

#pecasTabela tbody tr:nth-child(even),
#servicosTabela tbody tr:nth-child(even){
background:#f9fbff;
}


/* HEADERS */

#pecasTabela th,
#servicosTabela th{
font-size:11px;
padding:6px;
border-bottom:1px solid #dbe3ff;
text-align:left;
}


/* CELULAS */

#pecasTabela td,
#servicosTabela td{
vertical-align:middle;
padding:4px;
border-bottom:1px solid #eef2ff;
}


/* INPUTS DAS TABELAS */

#pecasTabela input,
#servicosTabela input,
#servicosTabela select{
height:22px;
font-size:11px;
padding:2px 4px;
background:#ffffff;
border:1px solid #d6defa;
border-radius:4px;
}


/* BOTÃO EXCLUIR */

.btn-outline-danger{
padding:2px 6px;
font-size:11px;
}


/* RESUMO */

.os-resumo{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:6px;
margin-top:6px;
}

.os-resumo div{
border:1px solid #e5e7eb;
border-radius:4px;
padding:6px;
background:#fafafa;
font-size:11px;
}


/* TOTAL */

.os-total{
background:#e8f0ff;
border:1px solid #9bb8ff;
font-weight:700;
font-size:14px;
padding:8px;
}


/* BOTÕES */

button{
border-radius:4px;
padding:6px 12px;
font-size:12px;
cursor:pointer;
}


/* AUTOCOMPLETE PEÇAS */

.autocomplete-items{
position:absolute;
border:1px solid #d7e3ff;
border-radius:6px;
background:white;
z-index:999;
max-height:200px;
overflow-y:auto;
box-shadow:0 2px 6px rgba(0,0,0,0.15);
font-size:12px;
}

.autocomplete-items div{
padding:6px 10px;
cursor:pointer;
border-bottom:1px solid #eef2ff;
}

.autocomplete-items div:hover{
background:#e8f0ff;
}

.autocomplete-active{
background:#1e3a8a !important;
color:white;
}


/* =========================
   IMPRESSÃO PROFISSIONAL DA OS
========================= */

@media print {

  @page{
    size:A4 portrait;
    margin:6mm;
  }

  body{
    background:#fff !important;
    margin:0 !important;
    padding:0 !important;
    color:#111 !important;
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:9.5px !important;
  }

  .oo-sidebar,
  #btnVoltarOS,
  #btnAddPeca,
  #btnAddServico,
  #btnSalvarOS,
  #btnEnviarWhats,
  #btnCancelarOS,
  #btnImprimirOS,
  .btn,
  .btn-outline-danger,
  #osNewMsg,
  #osErroMsg,
  .autocomplete-items{
    display:none !important;
  }

  .oo-main{
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    max-width:none !important;
  }

  .os-container{
    max-width:100% !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    font-family:Arial, Helvetica, sans-serif !important;
  }

  /* CABEÇALHO */

  .os-container::before{
    content:"OFICINA ORGANIZADA\A ORDEM DE SERVIÇO";
    white-space:pre-line;
    display:block;
    text-align:center;
    font-size:15px;
    font-weight:700;
    line-height:1.25;
    margin-bottom:6px;
    padding-bottom:5px;
    border-bottom:2px solid #222;
    color:#111;
  }

  /* CAIXAS */

  .os-box{
    border:1px solid #777 !important;
    background:#fff !important;
    border-radius:0 !important;
    box-shadow:none !important;
    margin-bottom:5px !important;
    padding:5px !important;
    break-inside:auto !important;
    page-break-inside:auto !important;
  }

  .os-title-row{
    margin-bottom:3px !important;
  }

  .os-title{
    color:#111 !important;
    font-size:10.5px !important;
    font-weight:700 !important;
    margin-bottom:3px !important;
    text-transform:uppercase;
  }

  .os-numero{
    color:#111 !important;
    font-size:11px !important;
    font-weight:700 !important;
  }

  .os-header{
    color:#444 !important;
    font-size:8.5px !important;
    font-weight:700 !important;
    margin-bottom:1px !important;
  }

  /* CAMPOS */

  .os-input,
  #pecasTabela input,
  #servicosTabela input,
  #servicosTabela select,
  textarea,
  input,
  select{
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    padding:0 !important;
    height:auto !important;
    min-height:0 !important;
    font-size:9.5px !important;
    color:#111 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }

  textarea{
    resize:none !important;
    overflow:visible !important;
    line-height:1.15 !important;
  }

  /* DADOS DA OS */

  .os-table{
    width:100% !important;
    border-collapse:collapse !important;
    table-layout:fixed !important;
  }

  .os-table td{
    border:1px solid #ccc !important;
    padding:3px 4px !important;
    vertical-align:top !important;
  }

  /* PEÇAS E SERVIÇOS */

  #pecasTabela,
  #servicosTabela{
    width:100% !important;
    border-collapse:collapse !important;
    table-layout:fixed !important;
    margin-top:2px !important;
  }

  #pecasTabela thead,
  #servicosTabela thead{
    background:#e9e9e9 !important;
  }

  #pecasTabela th,
  #servicosTabela th{
    border:1px solid #888 !important;
    padding:3px !important;
    font-size:8.5px !important;
    font-weight:700 !important;
    background:#e9e9e9 !important;
  }

  #pecasTabela td,
  #servicosTabela td{
    border:1px solid #aaa !important;
    padding:3px !important;
    font-size:9px !important;
    background:#fff !important;
    line-height:1.15 !important;
  }

  #pecasTabela tbody tr,
  #servicosTabela tbody tr{
    height:auto !important;
  }

  /* RESUMO */

  .os-resumo{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:3px !important;
    margin-top:3px !important;
  }

  .os-resumo div{
    border:1px solid #999 !important;
    background:#fff !important;
    border-radius:0 !important;
    padding:4px !important;
    color:#111 !important;
    font-size:9px !important;
  }

  .os-total{
    background:#e9e9e9 !important;
    border:1px solid #555 !important;
    font-weight:700 !important;
    font-size:10px !important;
  }

  /* GARANTIA + ASSINATURA */

  .os-container::after{
    content:"TERMO DE GARANTIA\A Garantia válida somente para os serviços e peças descritos nesta ordem de serviço. A garantia segue o prazo informado na OS e passa a contar a partir da finalização do serviço. Não cobre mau uso, desgaste natural, intervenção de terceiros ou modificações posteriores.\A\A ______________________________________________\A Assinatura do Cliente";
    white-space:pre-line;
    display:block;
    margin-top:6px;
    padding-top:5px;
    border-top:1px solid #777;
    font-size:8.5px;
    line-height:1.25;
    color:#111;
  }

/* =========================================================
   LISTA DE OS - INDICADORES
   SOMENTE ESTA TELA
========================================================= */

#osKpiGrid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:8px !important;
  margin:0 0 12px 0 !important;
  padding:0 !important;
}

#osKpiGrid > .os-kpi-card{
  width:100% !important;
  min-width:0 !important;
  min-height:58px !important;
  display:block !important;
  margin:0 !important;
  padding:9px 11px !important;
  box-sizing:border-box !important;
}

}