:root{
  --nativo-dark:#063c2d;
  --nativo-dark-2:#07513a;
  --nativo-green:#087a4f;
  --nativo-green-2:#11a565;
  --nativo-light:#e9f7ef;
  --nativo-light-2:#f5faf7;
  --nativo-orange:#f39a24;
  --nativo-text:#10231c;
  --nativo-muted:#65756e;
  --nativo-border:#dce8e2;
  --nativo-white:#ffffff;
  --nativo-shadow:
    0 8px 25px rgba(6,60,45,.07);
}

*{
  box-sizing:border-box;
}

html{
  background:#f4f8f6;
}

body{
  margin:0;
  background:
    linear-gradient(
      135deg,
      #f7fbf9 0%,
      #f1f7f4 100%
    );
  color:var(--nativo-text);
  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;
}


/* =====================================
   MENU LATERAL
===================================== */

.nativo-sidebar{
  background:
    linear-gradient(
      180deg,
      #063c2d 0%,
      #064b36 55%,
      #053829 100%
    ) !important;

  color:#fff !important;
  box-shadow:
    8px 0 28px rgba(5,56,41,.08);
}

.nativo-sidebar a,
.nativo-sidebar button{
  transition:
    background .2s ease,
    transform .2s ease,
    border-color .2s ease !important;
}

.nativo-sidebar a:hover,
.nativo-sidebar button:hover{
  background:
    rgba(255,255,255,.09) !important;
  transform:translateX(3px);
}

.nativo-sidebar .active,
.nativo-sidebar [aria-current="page"]{
  background:
    linear-gradient(
      90deg,
      rgba(28,181,111,.27),
      rgba(28,181,111,.12)
    ) !important;

  border:
    1px solid rgba(122,235,177,.40) !important;

  box-shadow:
    inset 3px 0 0 var(--nativo-orange);
}


/* =====================================
   PROVERBIO
===================================== */

#nativoProverbio{
  margin:
    18px 14px 16px;

  padding:
    16px 15px;

  border-top:
    1px solid rgba(255,255,255,.18);

  border-bottom:
    1px solid rgba(255,255,255,.10);

  color:
    rgba(255,255,255,.88);

  font-size:
    13px;

  line-height:
    1.55;
}

#nativoProverbio .nativo-biblia{
  display:flex;
  align-items:center;
  gap:9px;

  margin-bottom:
    7px;

  color:
    #fff;

  font-weight:
    800;

  font-size:
    14px;
}

#nativoProverbio .nativo-biblia-icon{
  color:
    var(--nativo-orange);

  font-size:
    20px;
}

#nativoProverbio .nativo-verso{
  opacity:.90;
}


/* =====================================
   AREA PRINCIPAL
===================================== */

main,
.main,
.content,
.content-area,
.dashboard{
  background:transparent !important;
}

h1{
  color:#071d16;
  letter-spacing:-.6px;
  font-weight:800;
}

h2,
h3{
  color:#10231c;
}


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

.panel,
.card,
.dashboard-card,
.nativo-metric-card{
  background:
    rgba(255,255,255,.96) !important;

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

  border-radius:
    17px !important;

  box-shadow:
    var(--nativo-shadow) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.panel:hover,
.card:hover,
.nativo-metric-card:hover{
  box-shadow:
    0 12px 32px rgba(6,60,45,.10) !important;
}

.nativo-metric-card{
  position:relative;
  overflow:hidden;
}

.nativo-metric-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:
    linear-gradient(
      180deg,
      var(--nativo-green-2),
      var(--nativo-green)
    );
}

.nativo-metric-card:nth-of-type(4)::before{
  background:
    var(--nativo-orange);
}


/* =====================================
   CABECALHO DOS PAINEIS
===================================== */

.panel-head{
  border-bottom:
    1px solid #edf2ef;

  padding-bottom:
    14px !important;

  margin-bottom:
    15px !important;
}


/* =====================================
   API ONLINE
===================================== */

.nativo-api-online{
  display:inline-flex !important;

  align-items:center;

  gap:8px;

  background:
    #e7f8ee !important;

  color:
    #087747 !important;

  border:
    1px solid #bce9ce !important;

  border-radius:
    999px !important;

  padding:
    9px 15px !important;

  font-weight:
    800 !important;

  box-shadow:
    0 4px 12px rgba(8,122,79,.08);
}

.nativo-api-online::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#0cad65;
  box-shadow:
    0 0 0 5px rgba(12,173,101,.12);
}


/* =====================================
   BOTOES
===================================== */

.btn{
  border-radius:
    10px !important;

  min-height:
    42px;

  padding:
    9px 17px !important;

  border:
    1px solid transparent !important;

  font-weight:
    700 !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

.btn:not(.close){
  background:
    linear-gradient(
      135deg,
      #098151,
      #0aa864
    ) !important;

  color:#fff !important;

  box-shadow:
    0 5px 13px rgba(9,129,81,.16);
}

.btn:not(.close):hover{
  transform:
    translateY(-1px);

  box-shadow:
    0 8px 18px rgba(9,129,81,.22);
}

.btn.close{
  background:
    #fff !important;

  color:
    #4b5e56 !important;

  border:
    1px solid #d7e3dd !important;
}


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

input,
select,
textarea{
  border:
    1px solid #d4e2db !important;

  border-radius:
    10px !important;

  background:
    #fff !important;

  padding:
    11px 12px !important;

  color:
    var(--nativo-text);

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

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

  border-color:
    var(--nativo-green-2) !important;

  box-shadow:
    0 0 0 3px rgba(17,165,101,.11) !important;
}

label{
  color:
    #35483f;

  font-weight:
    700;
}


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

table{
  border-collapse:
    separate !important;

  border-spacing:
    0 !important;

  overflow:hidden;
}

thead th{
  background:
    #f1f7f4 !important;

  color:
    #42564d !important;

  font-size:
    12px;

  letter-spacing:
    .25px;

  text-transform:
    uppercase;

  padding:
    12px !important;
}

tbody td{
  padding:
    13px 12px !important;

  border-bottom:
    1px solid #edf2ef !important;
}

tbody tr{
  transition:
    background .15s ease;
}

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


/* =====================================
   ESTOQUE
===================================== */

.nativo-warning{
  border-left:
    4px solid var(--nativo-orange);

  background:
    #fff8e9 !important;

  color:
    #73551f !important;
}

.nativo-badge{
  border:
    1px solid transparent;
}

.nativo-ok{
  background:
    #e5f8ed !important;

  color:
    #087747 !important;
}

.nativo-low{
  background:
    #fff2cf !important;

  color:
    #805d00 !important;
}

.nativo-zero{
  background:
    #ffe4e4 !important;

  color:
    #9f2929 !important;
}


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

.modal-box{
  border-radius:
    18px !important;

  border:
    1px solid #dfe9e4 !important;

  box-shadow:
    0 24px 70px rgba(4,48,35,.20) !important;
}


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

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

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

::-webkit-scrollbar-thumb{
  background:#a8c5b7;
  border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
  background:#789f8c;
}


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

@media(max-width:900px){

  .panel,
  .card,
  .nativo-metric-card{
    border-radius:
      13px !important;
  }

  #nativoProverbio{
    font-size:
      12px;
  }
}