/* =========================================================
   IMPERIAL - TEMA LARANJA + PRETO V1
   ========================================================= */

:root{

  --imp-orange:#f28a17;
  --imp-orange-dark:#d96f06;
  --imp-orange-soft:#fff1df;

  --imp-black:#151515;
  --imp-dark:#22262a;
  --imp-charcoal:#303438;

  --imp-text:#202427;
  --imp-muted:#626b70;

  --imp-white:#ffffff;
  --imp-bg:#f4f5f6;

  --imp-border:#cfd4d7;
  --imp-border-dark:#b6bdc1;

  --imp-green:#137449;
  --imp-green-bg:#e5f6ed;

  --imp-red:#b32626;
  --imp-red-bg:#fde9e9;

  --imp-yellow:#a96500;
  --imp-yellow-bg:#fff2d8;

}


/* =========================================================
   BASE
   ========================================================= */

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

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


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


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

  font-weight:
    850 !important;
}


h1{
  position:relative;
}


h1::after{
  content:"";

  display:block;

  width:52px;
  height:4px;

  margin-top:8px;

  border-radius:10px;

  background:
    var(--imp-orange);
}


/* =========================================================
   TEXTOS E NÚMEROS
   ========================================================= */

body,
input,
select,
textarea,
button{
  font-feature-settings:
    "tnum" 1;
}


strong,
.valor,
.numero,
.money,
.value,
.kpi strong,
.metric strong,
.total strong{
  color:
    var(--imp-black) !important;

  font-weight:
    850 !important;

  font-variant-numeric:
    tabular-nums;
}


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


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

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

  color:
    #111 !important;

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

  font-weight:
    850 !important;

  box-shadow:
    0 3px 10px
    rgba(242,138,23,.22);
}


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

  color:
    #fff !important;
}


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

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

  border:
    1.5px solid
    #aeb5b9 !important;

  font-weight:
    800 !important;
}


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

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


/* =========================================================
   CAMPOS DE LANÇAMENTO
   ========================================================= */

label{
  color:
    #303438 !important;

  font-weight:
    800 !important;
}


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

  color:
    #181818 !important;

  border:
    1.5px solid
    #b8bec2 !important;

  font-weight:
    650 !important;

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


input:hover,
select:hover,
textarea:hover{
  border-color:
    #898f93 !important;
}


input:focus,
select:focus,
textarea:focus{
  border-color:
    var(--imp-orange) !important;

  box-shadow:
    0 0 0 3px
    rgba(242,138,23,.18) !important;

  outline:
    none !important;
}


input[type="number"],
input[type="date"]{
  font-weight:
    800 !important;
}


input::placeholder,
textarea::placeholder{
  color:
    #8a9296 !important;
}


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

.painel,
.card,
.panel,
.box,
.kpi,
.metric,
.summary-card,
.resumo-card{

  background:
    #fff !important;

  border:
    1px solid
    #d9dddf !important;

  border-top:
    3px solid
    var(--imp-orange) !important;

  box-shadow:
    0 4px 14px
    rgba(0,0,0,.07) !important;
}


/* =========================================================
   KPIs
   ========================================================= */

.kpi .valor,
.kpi .value,
.metric .valor,
.metric .value{

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

  font-size:
    1.28em !important;

  font-weight:
    900 !important;
}


.kpi span,
.metric span{
  color:
    #626a6e !important;

  font-weight:
    700 !important;
}


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

table{
  background:
    #fff !important;

  color:
    #202427 !important;
}


thead th{

  background:
    var(--imp-dark) !important;

  color:
    #fff !important;

  border-bottom:
    3px solid
    var(--imp-orange) !important;

  font-weight:
    850 !important;

  letter-spacing:
    .025em;

  padding:
    12px 10px !important;
}


tbody td{

  color:
    #222629 !important;

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

  font-weight:
    650 !important;

  padding:
    11px 10px !important;

  font-variant-numeric:
    tabular-nums;
}


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


tbody tr:hover{
  background:
    var(--imp-orange-soft) !important;
}


tbody td strong{
  color:
    #111 !important;

  font-weight:
    900 !important;
}


/* =========================================================
   ABAS
   ========================================================= */

.tabs,
.tab-bar,
.abas{
  border-bottom:
    1px solid
    #cfd4d7;
}


.tabs button,
.tab-btn,
.aba{

  color:
    #5d6468 !important;

  font-weight:
    750 !important;
}


.tabs button.active,
.tab-btn.active,
.aba.ativa{

  color:
    #111 !important;

  font-weight:
    900 !important;

  border-bottom:
    3px solid
    var(--imp-orange) !important;
}


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

.relatorio,
.report,
.relatorio-geral,
.report-content,
.modal-relatorio{

  color:
    #202427 !important;
}


.relatorio h2,
.relatorio h3,
.report h2,
.report h3{

  color:
    #111 !important;

  border-left:
    5px solid
    var(--imp-orange);

  padding-left:
    10px;
}


.kv,
.info-row,
.detail-row{

  color:
    #454d51 !important;
}


.kv strong,
.info-row strong,
.detail-row strong{

  color:
    #111 !important;

  font-weight:
    900 !important;
}


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

.total{

  border-radius:
    10px !important;

  font-weight:
    850 !important;

  box-shadow:
    0 3px 10px
    rgba(0,0,0,.06);
}


.total.navy{

  background:
    #202326 !important;

  color:
    #fff !important;

  border:
    2px solid
    #101010 !important;
}


.total.navy strong{
  color:
    var(--imp-orange) !important;
}


.total.green,
.total.positive,
.positivo,
.valor-positivo{

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

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

  border:
    1px solid
    #b9dfc9 !important;
}


.total.red,
.total.negative,
.negativo,
.valor-negativo{

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

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

  border:
    1px solid
    #efbaba !important;
}


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

.modal-conteudo,
.modal-box,
.imp-despesca-box,
.imperial-confirm-box{

  background:
    #fff !important;

  border:
    1px solid
    #cfd4d7 !important;

  border-top:
    5px solid
    var(--imp-orange) !important;

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.27) !important;
}


.modal-conteudo h2,
.modal-conteudo h3,
.modal-box h2,
.modal-box h3,
.imp-despesca-head h2,
.imperial-confirm-title{

  color:
    #111 !important;

  font-weight:
    900 !important;
}


/* =========================================================
   CONFIRMAÇÕES
   ========================================================= */

.imperial-confirm-icon{

  background:
    var(--imp-orange-soft) !important;

  border:
    1px solid
    #f4c27b;
}


.imperial-confirm-ok{

  background:
    var(--imp-orange) !important;

  color:
    #111 !important;

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

  font-weight:
    900 !important;
}


.imperial-confirm-ok:hover{

  background:
    var(--imp-orange-dark) !important;

  color:
    #fff !important;
}


.imperial-confirm-detail strong{

  color:
    #111 !important;

  font-weight:
    900 !important;
}


/* =========================================================
   DESPESCA
   ========================================================= */

.imp-despesca-calculo div{

  background:
    #fff4e6 !important;

  border:
    1px solid
    #f3cc98 !important;
}


.imp-despesca-calculo strong{

  color:
    #111 !important;

  font-weight:
    900 !important;
}


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

.status-cultivo{

  color:
    #145e3d !important;

  background:
    #e1f4e8 !important;

  border:
    1px solid
    #b6dec5 !important;
}


.status-preparacao{

  color:
    #8f5200 !important;

  background:
    #fff0dc !important;

  border:
    1px solid
    #f1c281 !important;
}


.status-inativo{

  color:
    #a12828 !important;

  background:
    #fbe7e7 !important;

  border:
    1px solid
    #edbbbb !important;
}


/* =========================================================
   FINANCEIRO
   ========================================================= */

.status.EM_ABERTO,
.status.PENDENTE{

  background:
    #fff0dc !important;

  color:
    #8d5000 !important;

  border:
    1px solid
    #edc181 !important;
}


.status.PAGO,
.status.RECEBIDO{

  background:
    #e1f4e8 !important;

  color:
    #145e3d !important;
}


.status.VENCIDO{

  background:
    #fde5e5 !important;

  color:
    #a12828 !important;
}


/* =========================================================
   LINHAS DE DESTAQUE
   ========================================================= */

.destaque,
.highlight{

  border-left:
    4px solid
    var(--imp-orange) !important;

  background:
    #fff8ef !important;
}


/* =========================================================
   SCROLL
   ========================================================= */

::-webkit-scrollbar{
  width:10px;
  height:10px;
}


::-webkit-scrollbar-track{
  background:#eceeef;
}


::-webkit-scrollbar-thumb{

  background:
    #9ca2a5;

  border-radius:
    10px;
}


::-webkit-scrollbar-thumb:hover{
  background:
    var(--imp-orange);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:720px){

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

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

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

}