/* =========================================================
   IMPERIAL CARCINICULTURA
   DESIGN SYSTEM GLOBAL V2

   Dashboard possui acabamento próprio.
   Este arquivo padroniza TODAS as demais telas.
   ========================================================= */

:root{

  --is-bg:#f3f6f9;
  --is-white:#ffffff;

  --is-navy:#021a33;
  --is-navy-2:#052a50;
  --is-navy-3:#083b67;

  --is-orange:#ff7900;
  --is-orange-2:#ff952c;
  --is-orange-soft:#fff2e5;

  --is-text:#172b3d;
  --is-text-2:#4e6475;
  --is-muted:#7b8e9e;

  --is-border:#d9e3eb;
  --is-border-2:#c8d5df;

  --is-green:#169858;
  --is-red:#df424b;
  --is-yellow:#bd7900;

  --is-shadow:
    0 8px 24px rgba(7,29,50,.07);

}


/* =========================================================
   TIPOGRAFIA
   ========================================================= */

body.imperial-system-v2,
body.imperial-system-v2
button,
body.imperial-system-v2
input,
body.imperial-system-v2
select,
body.imperial-system-v2
textarea,
body.imperial-system-v2
table{

  font-family:
    'Poppins Imperial',
    'Poppins',
    'Segoe UI',
    Arial,
    sans-serif !important;
}


/*
 * Dashboard já possui acabamento específico.
 */
body.imperial-system-v2:not(.dashboard-mockup-final){

  background:
    var(--is-bg) !important;

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


/* =========================================================
   SIDEBAR
   ========================================================= */

body.imperial-system-v2
.dashboard-sidebar,

body.imperial-system-v2
.sidebar,

body.imperial-system-v2
.premium-sidebar,

body.imperial-system-v2
aside:has(.sidebar-nav){

  background:
    radial-gradient(
      circle at 5% 0%,
      rgba(0,180,255,.15),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      var(--is-navy-2) 0%,
      var(--is-navy) 100%
    ) !important;

  color:#fff !important;

  border-right:
    1px solid rgba(255,255,255,.05) !important;

  box-shadow:
    6px 0 25px rgba(4,22,40,.10) !important;
}


/* MARCA */

body.imperial-system-v2
.sidebar-brand{

  border-bottom:
    1px solid rgba(255,255,255,.08) !important;
}


body.imperial-system-v2
.sidebar-brand-icon{

  background:
    linear-gradient(
      145deg,
      #06d7e9,
      #0398e0
    ) !important;

  border-radius:
    15px !important;

  box-shadow:
    0 7px 18px rgba(0,190,240,.22) !important;
}


body.imperial-system-v2
.sidebar-brand-text strong{

  color:#fff !important;

  font-weight:
    700 !important;
}


body.imperial-system-v2
.sidebar-brand-text small{

  color:
    var(--is-orange) !important;

  font-weight:
    600 !important;
}


/* CATEGORIAS */

body.imperial-system-v2
.sidebar-section{

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

  font-size:
    10px !important;

  font-weight:
    700 !important;

  letter-spacing:
    .10em !important;

  text-transform:
    uppercase !important;
}


/* LINKS */

body.imperial-system-v2
.sidebar-nav a{

  min-height:
    42px !important;

  margin:
    4px 12px !important;

  padding:
    0 13px !important;

  display:flex !important;

  align-items:center !important;

  gap:
    10px !important;

  border:
    1px solid transparent !important;

  border-radius:
    11px !important;

  background:
    transparent !important;

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

  font-size:
    12.5px !important;

  font-weight:
    600 !important;

  text-decoration:
    none !important;

  box-shadow:
    none !important;

  transition:
    .17s ease !important;
}


body.imperial-system-v2
.sidebar-nav a:hover{

  background:
    rgba(255,255,255,.07) !important;

  color:#fff !important;
}


body.imperial-system-v2
.sidebar-nav a.active{

  background:
    linear-gradient(
      180deg,
      var(--is-orange-2),
      var(--is-orange)
    ) !important;

  color:#fff !important;

  border:
    1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 8px 21px rgba(255,115,0,.30) !important;
}


body.imperial-system-v2
.sidebar-nav-icon{

  width:
    22px !important;

  text-align:
    center !important;

  font-family:
    'Segoe UI Emoji',
    'Apple Color Emoji',
    sans-serif !important;
}


/* STATUS */

body.imperial-system-v2
.sidebar-system-card{

  background:
    rgba(255,255,255,.045) !important;

  border:
    1px solid rgba(255,255,255,.09) !important;

  border-radius:
    14px !important;
}


/* =========================================================
   TOPBAR
   ========================================================= */

body.imperial-system-v2:not(.dashboard-mockup-final)
.premium-topbar,

body.imperial-system-v2:not(.dashboard-mockup-final)
.topbar,

body.imperial-system-v2:not(.dashboard-mockup-final)
.app-topbar{

  min-height:
    64px !important;

  background:
    #fff !important;

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

  box-shadow:
    0 2px 10px rgba(6,30,52,.035) !important;
}


/* =========================================================
   ÁREA PRINCIPAL
   ========================================================= */

body.imperial-system-v2:not(.dashboard-mockup-final)
main{

  background:
    var(--is-bg) !important;

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

  padding:
    22px 24px 30px !important;
}


/* =========================================================
   TÍTULOS
   ========================================================= */

body.imperial-system-v2
h1{

  margin-top:0 !important;

  color:
    #152a3d !important;

  font-size:
    29px !important;

  font-weight:
    600 !important;

  letter-spacing:
    -.03em !important;
}


body.imperial-system-v2
h1::after{

  content:"";

  display:block;

  width:
    48px;

  height:
    3px;

  margin-top:
    8px;

  border-radius:
    99px;

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


body.imperial-system-v2
h2{

  color:
    #193148 !important;

  font-weight:
    600 !important;

  letter-spacing:
    -.02em !important;
}


body.imperial-system-v2
h3{

  color:
    #21394d !important;

  font-weight:
    600 !important;
}


/* =========================================================
   PAINÉIS OPERACIONAIS
   ========================================================= */

body.imperial-system-v2:not(.dashboard-mockup-final)
.painel,

body.imperial-system-v2:not(.dashboard-mockup-final)
.panel,

body.imperial-system-v2:not(.dashboard-mockup-final)
.card,

body.imperial-system-v2:not(.dashboard-mockup-final)
.box,

body.imperial-system-v2:not(.dashboard-mockup-final)
.content-card,

body.imperial-system-v2:not(.dashboard-mockup-final)
.section-card{

  background:
    #fff !important;

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

  border-radius:
    13px !important;

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


/*
 * Remove barras laranja antigas em painéis.
 */

body.imperial-system-v2:not(.dashboard-mockup-final)
.painel::before,

body.imperial-system-v2:not(.dashboard-mockup-final)
.panel::before,

body.imperial-system-v2:not(.dashboard-mockup-final)
.card::before{

  display:none !important;
}


/* =========================================================
   KPI / RESUMOS
   ========================================================= */

body.imperial-system-v2:not(.dashboard-mockup-final)
.kpi,

body.imperial-system-v2:not(.dashboard-mockup-final)
.metric,

body.imperial-system-v2:not(.dashboard-mockup-final)
.summary-card,

body.imperial-system-v2:not(.dashboard-mockup-final)
.resumo-card{

  background:
    radial-gradient(
      circle at 95% 20%,
      rgba(255,122,0,.08),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #0b1015,
      #17232e
    ) !important;

  color:#fff !important;

  border:
    1px solid rgba(255,255,255,.06) !important;

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

  border-radius:
    11px !important;

  box-shadow:
    0 8px 18px rgba(4,19,32,.15) !important;
}


body.imperial-system-v2:not(.dashboard-mockup-final)
.kpi *,

body.imperial-system-v2:not(.dashboard-mockup-final)
.metric *,

body.imperial-system-v2:not(.dashboard-mockup-final)
.summary-card *,

body.imperial-system-v2:not(.dashboard-mockup-final)
.resumo-card *{

  color:
    inherit !important;
}


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

body.imperial-system-v2
.tabs,

body.imperial-system-v2
.abas,

body.imperial-system-v2
.tab-bar{

  display:inline-flex;

  gap:
    3px !important;

  padding:
    4px !important;

  background:
    #eaf0f4 !important;

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

  border-radius:
    10px !important;
}


body.imperial-system-v2
.tabs button,

body.imperial-system-v2
.tab-btn,

body.imperial-system-v2
.aba{

  min-height:
    38px !important;

  padding:
    0 16px !important;

  border:
    0 !important;

  border-radius:
    7px !important;

  background:
    transparent !important;

  color:
    #506678 !important;

  font-size:
    12px !important;

  font-weight:
    600 !important;

  box-shadow:
    none !important;
}


body.imperial-system-v2
.tabs button.active,

body.imperial-system-v2
.tabs button.ativo,

body.imperial-system-v2
.tab-btn.active,

body.imperial-system-v2
.tab-btn.ativo,

body.imperial-system-v2
.aba.ativa{

  background:
    linear-gradient(
      180deg,
      #083756,
      #04243c
    ) !important;

  color:#fff !important;

  box-shadow:
    inset 0 -3px 0 var(--is-orange) !important;
}


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

body.imperial-system-v2
button,

body.imperial-system-v2
.btn{

  border-radius:
    8px !important;

  font-weight:
    600 !important;

  transition:
    .15s ease !important;
}


body.imperial-system-v2
button:hover,

body.imperial-system-v2
.btn:hover{

  transform:
    translateY(-1px);
}


body.imperial-system-v2
.btn-primary,

body.imperial-system-v2
button.primary,

body.imperial-system-v2
button[type="submit"]{

  background:
    linear-gradient(
      180deg,
      var(--is-orange-2),
      var(--is-orange)
    ) !important;

  color:#fff !important;

  border:
    1px solid #e96f00 !important;

  box-shadow:
    0 5px 12px rgba(255,115,0,.16) !important;
}


body.imperial-system-v2
.btn-secundario,

body.imperial-system-v2
.btn-secondary,

body.imperial-system-v2
button.secondary{

  background:#fff !important;

  color:
    #213d52 !important;

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

  box-shadow:
    none !important;
}


/* =========================================================
   FORMULÁRIOS
   ========================================================= */

body.imperial-system-v2
label{

  color:
    #526a7b !important;

  font-size:
    11px !important;

  font-weight:
    600 !important;
}


body.imperial-system-v2
input,

body.imperial-system-v2
select,

body.imperial-system-v2
textarea{

  min-height:
    40px !important;

  background:#fff !important;

  color:
    #1e374a !important;

  border:
    1px solid #ccd8e2 !important;

  border-radius:
    8px !important;

  font-size:
    12.5px !important;

  font-weight:
    400 !important;

  box-shadow:
    none !important;
}


body.imperial-system-v2
textarea{

  min-height:
    85px !important;
}


body.imperial-system-v2
input:focus,

body.imperial-system-v2
select:focus,

body.imperial-system-v2
textarea:focus{

  border-color:
    var(--is-orange) !important;

  box-shadow:
    0 0 0 3px rgba(255,122,0,.09) !important;

  outline:
    none !important;
}


body.imperial-system-v2
input::placeholder,

body.imperial-system-v2
textarea::placeholder{

  color:
    #91a1ae !important;
}


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

body.imperial-system-v2:not(.dashboard-mockup-final)
.table-wrap,

body.imperial-system-v2:not(.dashboard-mockup-final)
.table-container{

  overflow:
    auto !important;

  background:
    #fff !important;

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

  border-radius:
    10px !important;
}


body.imperial-system-v2:not(.dashboard-mockup-final)
table{

  width:
    100% !important;

  background:
    #fff !important;

  border-collapse:
    collapse !important;
}


/* MOCKUP: CABEÇALHO CLARO */

body.imperial-system-v2:not(.dashboard-mockup-final)
table thead,

body.imperial-system-v2:not(.dashboard-mockup-final)
table thead tr{

  background:
    #fff !important;
}


body.imperial-system-v2:not(.dashboard-mockup-final)
table thead th{

  padding:
    10px 8px !important;

  background:
    #fff !important;

  color:
    #566a7a !important;

  -webkit-text-fill-color:
    #566a7a !important;

  border:
    0 !important;

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

  font-size:
    10px !important;

  font-weight:
    600 !important;

  letter-spacing:
    0 !important;

  text-align:
    left !important;
}


body.imperial-system-v2:not(.dashboard-mockup-final)
table tbody td{

  padding:
    10px 8px !important;

  color:
    #263c4e !important;

  background:
    #fff !important;

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

  font-size:
    11.5px !important;

  font-weight:
    500 !important;
}


body.imperial-system-v2:not(.dashboard-mockup-final)
table tbody tr:nth-child(even) td{

  background:
    #eef3f6 !important;
}


body.imperial-system-v2:not(.dashboard-mockup-final)
table tbody tr:hover td{

  background:
    var(--is-orange-soft) !important;
}


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

body.imperial-system-v2
.valor-positivo,

body.imperial-system-v2
.positivo,

body.imperial-system-v2
.text-success{

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

  font-weight:
    600 !important;
}


body.imperial-system-v2
.valor-negativo,

body.imperial-system-v2
.negativo,

body.imperial-system-v2
.text-danger{

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

  font-weight:
    600 !important;
}


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

body.imperial-system-v2
.status,

body.imperial-system-v2
.status-operacional,

body.imperial-system-v2
.badge,

body.imperial-system-v2
.pill{

  display:inline-flex;

  align-items:center;

  padding:
    4px 8px !important;

  border-radius:
    999px !important;

  font-size:
    9px !important;

  font-weight:
    600 !important;
}


body.imperial-system-v2
.status-cultivo,

body.imperial-system-v2
.status.ATIVO,

body.imperial-system-v2
.status.PAGO,

body.imperial-system-v2
.status.RECEBIDO{

  background:
    #e5f7ed !important;

  color:
    #14804d !important;
}


body.imperial-system-v2
.status-preparacao,

body.imperial-system-v2
.status.PENDENTE,

body.imperial-system-v2
.status.EM_ABERTO{

  background:
    #fff1dd !important;

  color:
    #9b5a00 !important;
}


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

body.imperial-system-v2
.modal-conteudo,

body.imperial-system-v2
.modal-box,

body.imperial-system-v2
.dash-modal,

body.imperial-system-v2
.imp-despesca-box,

body.imperial-system-v2
.imperial-confirm-box{

  background:#fff !important;

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

  border-radius:
    14px !important;

  box-shadow:
    0 26px 70px rgba(6,27,46,.24) !important;
}


body.imperial-system-v2
.modal-conteudo h2,

body.imperial-system-v2
.modal-box h2,

body.imperial-system-v2
.dash-modal h2{

  color:
    #14324a !important;

  font-weight:
    600 !important;
}


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

body.imperial-system-v2
::-webkit-scrollbar{

  width:
    9px;

  height:
    9px;
}


body.imperial-system-v2
::-webkit-scrollbar-track{

  background:
    #e8edf1;
}


body.imperial-system-v2
::-webkit-scrollbar-thumb{

  background:
    #9eaab4;

  border-radius:
    99px;
}


body.imperial-system-v2
::-webkit-scrollbar-thumb:hover{

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


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

@media(max-width:800px){

  body.imperial-system-v2:not(.dashboard-mockup-final)
  main{

    padding:
      14px !important;
  }


  body.imperial-system-v2
  input,

  body.imperial-system-v2
  select,

  body.imperial-system-v2
  textarea{

    font-size:
      16px !important;
  }

}