/* =========================================================
   IMPERIAL - ALTA LEGIBILIDADE GLOBAL V1
   ========================================================= */

:root{
  --imp-bg:#f3f7f9;
  --imp-surface:#ffffff;

  --imp-text:#16313d;
  --imp-text-strong:#062f46;
  --imp-muted:#536c78;

  --imp-primary:#075577;
  --imp-primary-dark:#063d58;

  --imp-border:#aec1ca;
  --imp-border-light:#dce6ea;

  --imp-table-head:#084b69;
  --imp-table-head-text:#ffffff;

  --imp-green:#12623f;
  --imp-green-bg:#e2f5e9;

  --imp-red:#a32929;
  --imp-red-bg:#fde8e8;

  --imp-yellow:#8c5a0a;
  --imp-yellow-bg:#fff1cf;

  --imp-blue-bg:#e8f3f8;

  --imp-shadow:
    0 5px 18px
    rgba(7,48,69,.10);
}


/* =========================================================
   TEXTO GERAL
   ========================================================= */

html,
body{
  color:var(--imp-text) !important;
}

body{
  background:var(--imp-bg) !important;

  font-size:15px !important;

  -webkit-font-smoothing:
    antialiased;
}


main{
  color:var(--imp-text) !important;
}


h1,
h2,
h3,
h4,
h5,
h6{
  color:var(--imp-text-strong) !important;

  font-weight:800 !important;

  letter-spacing:
    -.01em;
}


h1{
  font-size:
    clamp(26px,2.4vw,34px) !important;
}


h2{
  font-size:
    clamp(20px,2vw,27px) !important;
}


p,
div,
span,
small{
  text-rendering:
    optimizeLegibility;
}


small,
.muted,
.text-muted,
.subtitulo,
.descricao{
  color:var(--imp-muted) !important;
}


/* =========================================================
   FORMULÁRIOS / LANÇAMENTOS
   ========================================================= */

label{
  color:#284956 !important;

  font-size:13px !important;

  font-weight:800 !important;

  margin-bottom:5px !important;
}


input,
select,
textarea{
  background:#fff !important;

  color:#102b37 !important;

  border:
    1.5px solid
    #9fb6c1 !important;

  border-radius:8px !important;

  min-height:42px;

  font-size:15px !important;

  font-weight:650 !important;

  box-shadow:
    0 1px 2px
    rgba(0,0,0,.03);
}


textarea{
  min-height:90px;
}


input:hover,
select:hover,
textarea:hover{
  border-color:
    #6d96a8 !important;
}


input:focus,
select:focus,
textarea:focus{
  outline:none !important;

  border-color:
    #08709a !important;

  box-shadow:
    0 0 0 3px
    rgba(8,112,154,.15) !important;
}


input::placeholder,
textarea::placeholder{
  color:#758c97 !important;

  opacity:1 !important;

  font-weight:500 !important;
}


/*
 * Campos numéricos merecem destaque maior
 */
input[type="number"],
input[type="date"],
input[type="time"]{
  font-weight:750 !important;
}


/* =========================================================
   BOTÕES
   ========================================================= */

button,
.btn,
.op-btn{
  font-weight:800 !important;

  letter-spacing:.01em;
}


.btn:not(.btn-secundario),
.op-btn.primary,
button.primary{
  background:
    var(--imp-primary) !important;

  color:#fff !important;

  border-color:
    var(--imp-primary) !important;
}


.btn:not(.btn-secundario):hover,
.op-btn.primary:hover,
button.primary:hover{
  background:
    var(--imp-primary-dark) !important;
}


.btn-secundario,
.op-btn:not(.primary){
  background:#fff !important;

  color:#18485e !important;

  border:
    1.5px solid
    #a9bec8 !important;
}


.btn-secundario:hover,
.op-btn:not(.primary):hover{
  background:
    #edf5f8 !important;

  border-color:
    #739cac !important;
}


/* =========================================================
   PAINÉIS / CARDS
   ========================================================= */

.painel,
.card,
.panel,
.box,
.kpi,
.metric,
.summary-card,
.resumo-card{
  background:
    var(--imp-surface) !important;

  border:
    1px solid
    var(--imp-border-light) !important;

  box-shadow:
    var(--imp-shadow) !important;
}


/*
 * Números principais
 */
.kpi strong,
.kpi .valor,
.metric strong,
.metric .value,
.card .valor,
.card .value,
.total,
.total strong,
.valor-destaque,
.numero-destaque{
  color:
    var(--imp-text-strong) !important;

  font-weight:850 !important;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   TABELAS
   ========================================================= */

table{
  width:100%;

  color:
    var(--imp-text) !important;

  background:#fff !important;

  border-collapse:
    separate;

  border-spacing:0;
}


thead th{
  background:
    var(--imp-table-head) !important;

  color:
    var(--imp-table-head-text) !important;

  font-size:12px !important;

  font-weight:850 !important;

  letter-spacing:.025em;

  border-bottom:
    2px solid
    #06374e !important;

  padding:
    12px 10px !important;

  vertical-align:middle;
}


tbody td{
  color:#183843 !important;

  font-size:14px !important;

  font-weight:600 !important;

  padding:
    11px 10px !important;

  border-bottom:
    1px solid
    #d9e4e8 !important;

  vertical-align:middle;

  font-variant-numeric:
    tabular-nums;
}


tbody tr:nth-child(even){
  background:
    #f7fafb !important;
}


tbody tr:hover{
  background:
    #eaf4f7 !important;
}


/*
 * Primeira coluna e campos importantes
 */
tbody td strong{
  color:
    #073b54 !important;

  font-weight:850 !important;
}


/* =========================================================
   RELATÓRIOS
   ========================================================= */

.relatorio,
.report,
.relatorio-geral,
.report-content,
.modal-relatorio{
  color:
    #173641 !important;
}


.relatorio table td,
.report table td,
.modal-relatorio table td{
  font-weight:650 !important;
}


.relatorio table th,
.report table th,
.modal-relatorio table th{
  font-weight:850 !important;
}


.kv,
.info-row,
.detail-row{
  color:
    #294955 !important;
}


.kv strong,
.info-row strong,
.detail-row strong{
  color:
    #082f45 !important;

  font-weight:850 !important;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   TOTALIZADORES
   ========================================================= */

.totals,
.totalizadores,
.resumo-financeiro{
  font-variant-numeric:
    tabular-nums;
}


.total{
  font-size:17px !important;

  line-height:1.45 !important;
}


.total.green,
.total.positive,
.positivo,
.valor-positivo{
  background:
    var(--imp-green-bg) !important;

  color:
    var(--imp-green) !important;

  border:
    1px solid
    #b8dfc7 !important;
}


.total.red,
.total.negative,
.negativo,
.valor-negativo{
  background:
    var(--imp-red-bg) !important;

  color:
    var(--imp-red) !important;

  border:
    1px solid
    #f0bcbc !important;
}


.total.navy{
  background:
    #e6f0f5 !important;

  color:
    #073b58 !important;

  border:
    1px solid
    #bdd3df !important;
}


/* =========================================================
   STATUS
   ========================================================= */

.status,
.status-operacional{
  font-weight:850 !important;

  letter-spacing:.015em;
}


.status-cultivo,
.status.ATIVO,
.status.PAGO,
.status.RECEBIDO{
  color:
    var(--imp-green) !important;

  background:
    var(--imp-green-bg) !important;
}


.status-preparacao,
.status.PENDENTE,
.status.EM_ABERTO{
  color:
    var(--imp-yellow) !important;

  background:
    var(--imp-yellow-bg) !important;
}


.status-inativo,
.status.CANCELADO,
.status.VENCIDO{
  color:
    var(--imp-red) !important;

  background:
    var(--imp-red-bg) !important;
}


/* =========================================================
   MODAIS
   ========================================================= */

.modal,
.modal-overlay,
#modalInfo,
#modalGeral,
#modalRelatorios,
#modalComparar,
#modalAcoesAjuste,
#modalAcoesHistorico,
#modalAcoesEditar,
#modalAcoesEncerrar,
#impDespescaOverlay,
#imperialConfirmOverlay{
  color:
    var(--imp-text) !important;
}


.modal-conteudo,
.modal-box,
.despesca-box,
.imp-despesca-box,
.imperial-confirm-box{
  background:#fff !important;

  color:
    var(--imp-text) !important;
}


.modal-conteudo h2,
.modal-conteudo h3,
.modal-box h2,
.modal-box h3{
  color:
    var(--imp-text-strong) !important;

  font-weight:850 !important;
}


/* =========================================================
   ABAS / NAVEGAÇÃO INTERNA
   ========================================================= */

.tabs button,
.tab-btn,
.aba{
  color:#355662 !important;

  font-weight:750 !important;
}


.tabs button.active,
.tab-btn.active,
.aba.ativa{
  color:
    #063e5c !important;

  font-weight:850 !important;

  border-color:
    #08709a !important;
}


/* =========================================================
   FEEDBACK / MENSAGENS
   ========================================================= */

.feedback{
  font-weight:700 !important;

  color:
    #264b5b !important;
}


.alert,
.aviso{
  color:
    #714a0b !important;

  background:
    #fff2d7 !important;

  border-color:
    #e8c571 !important;
}


/* =========================================================
   LINKS
   ========================================================= */

a{
  text-underline-offset:
    2px;
}


/* =========================================================
   MELHORIA ESPECÍFICA PARA CÉLULAS MONETÁRIAS / NUMÉRICAS
   ========================================================= */

td[data-type="money"],
td[data-type="number"],
.money,
.valor,
.numero{
  font-weight:800 !important;

  color:
    #0e3445 !important;

  font-variant-numeric:
    tabular-nums;
}


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

@media(max-width:720px){

  body{
    font-size:14px !important;
  }

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

  tbody td{
    font-size:13px !important;
  }

  thead th{
    font-size:11px !important;
  }

}