/* ==========================================================================
   Identidade MeLeva para o painel administrativo.

   Este arquivo é carregado POR ÚLTIMO, depois de todos os outros. É de
   propósito: o tema do fornecedor espalha verde e azul por dezenas de milhares
   de linhas em `style.css`, e caçar cada ocorrência lá dentro seria refazer o
   tema inteiro a cada atualização do pacote. Aqui as cores da marca são
   declaradas uma vez e vencem por ordem de carga.

   Paleta:
     amarelo  #FFCC00  — a cor da marca, usada para ação e destaque
     preto    #0C111C  — fundo do menu e da barra superior
     grafite  #1B2130  — cartões e superfícies elevadas no escuro

   O amarelo é forte demais para texto sobre branco: sempre PRETO sobre
   amarelo, nunca o contrário.
   ========================================================================== */

:root {
  --meleva-amarelo: #FFCC00;
  --meleva-amarelo-escuro: #E6B800;
  --meleva-preto: #0C111C;
  --meleva-grafite: #1B2130;
  --meleva-borda: rgba(0, 0, 0, 0.06);
  --meleva-sombra: 0 2px 10px rgba(12, 17, 28, 0.06);
  --meleva-sombra-forte: 0 6px 24px rgba(12, 17, 28, 0.10);
  --meleva-raio: 14px;
}

/* --------------------------------------------------------------- o verde
   O tema do fornecedor traz verde em botões, ícones, tabelas, cartões de
   plano, chat e barras de rolagem. A marca MeLeva é amarelo e preto — não tem
   verde nenhum —, então todo verde vira amarelo, sem exceção. */

/* NENHUM VERDE, em lugar nenhum — a marca não tem verde.
   Levantados um a um no `style.css`: #009400 #26B246 #81B241 #28a745 #02a843
   #86c541 #80b140 #a3cd4f #b9fd82 #00c292. */

.green,
.text-success,
.text-green,
.pricing-card-content ul li span,
.pricing-card-content ul li span.mdi-check,
.check-sign .fa.fa-check-double,
.table tr td > span.action-btn a i.mdi-content-copy,
table.dataTable > tbody > tr.child ul.dtr-details > li .dtr-data .action-btn a i.mdi-content-copy {
  color: var(--meleva-amarelo-escuro) !important;
}

.switch-box .switch input:checked + .slider,
.bg-success,
.badge-success,
.btn-success,
.btn-success.disabled,
.btn-success.disabled:hover,
.progress-bar.bg-success {
  background-color: var(--meleva-amarelo) !important;
  border-color: var(--meleva-amarelo) !important;
  color: #0C111C !important;
}

.badge-success,
.btn-success {
  /* Preto sobre amarelo: o branco herdado do verde sumiria. */
  color: #0C111C !important;
}

.switch-box .switch input:checked + .slider {
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25);
}

/* --------------------------------------------------------- interruptores
   Os liga/desliga do tema ficavam com a trilha VERDE quando ligados —
   `rgba(139, 195, 74, .5)`, que escapa de qualquer busca por hexadecimal, e
   por isso sobrou na primeira passada.

   Redesenhados no padrão atual: trilha amarela cheia quando ligado, cinza
   quando desligado, e a bolinha SEMPRE branca. Antes a bolinha é que era
   amarela sobre trilha verde — dois tons brigando e nenhum deles da marca. */

/* ATENÇÃO À ESTRUTURA — foi aqui que o interruptor da Frota simulada se
   perdeu. O tema estiliza `.switch label input`, ou seja, exige um `<label>`
   DENTRO de um elemento com a classe `.switch`. A página da frota usa
   `<label class="switch">`, com a classe no próprio label: o seletor não casa
   e o interruptor simplesmente não era desenhado — aparecia como nada.

   As regras abaixo cobrem as DUAS montagens, e definem também a base (forma,
   tamanho, bolinha), para não depender do `material.css`. */

.switch label .lever,
label.switch .lever {
  display: inline-block;
  position: relative;
  width: 46px;
  height: 26px;
  background-color: #cfd4dc;
  border-radius: 20px;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.18s ease;
  margin: 0;
}

.switch label .lever:after,
label.switch .lever:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}

/* O input é a caixinha nativa: só o gatilho, nunca visível. */
.switch label input[type="checkbox"],
label.switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Ligado: trilha amarela cheia, bolinha branca à direita. Antes o tema fazia
   o contrário — trilha verde com bolinha amarela. */
.switch label input[type="checkbox"]:checked + .lever,
label.switch input[type="checkbox"]:checked + .lever {
  background-color: var(--meleva-amarelo) !important;
  opacity: 1 !important;
}

.switch label input[type="checkbox"]:checked + .lever:after,
label.switch input[type="checkbox"]:checked + .lever:after {
  background-color: #ffffff !important;
  transform: translateX(20px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

/* O halo ao segurar o interruptor também vinha verde. */
.switch label input[type="checkbox"]:checked:not(:disabled) ~ .lever:active:after,
label.switch input[type="checkbox"]:checked:not(:disabled) ~ .lever:active:after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 12px rgba(255, 204, 0, 0.18) !important;
}

.switch label input[type="checkbox"][disabled] + .lever,
label.switch input[type="checkbox"][disabled] + .lever {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Balão da outra pessoa no chat: vinha verde-claro estilo WhatsApp. */
.chat .chat-history .other-message {
  background: #F3F4F6 !important;
  color: #0C111C !important;
}

/* Barras de rolagem internas do tema. */
.table-responsive::-webkit-scrollbar-thumb {
  background-color: var(--meleva-amarelo) !important;
}

/* A barra de rolagem do menu vinha verde-oliva. */
* {
  scrollbar-color: var(--meleva-amarelo) transparent !important;
}
::-webkit-scrollbar-thumb {
  background-color: var(--meleva-amarelo) !important;
  border-radius: 8px;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* ---------------------------------------------------------------- a logo
   A logo do MeLeva tem o contorno do pino, a moto, o carro e a palavra
   "LEVA!" em PRETO. Sobre o menu escuro esse preto simplesmente some e sobra
   meia logo — foi o que aconteceu.

   O arquivo agora é a variante inteira em amarelo. Aqui só se garante que ela
   respire e não seja esticada. */

.navbar-header .navbar-brand .dark-logo {
  max-height: 52px;
  width: auto !important;
  object-fit: contain;
}

.navbar-header .navbar-brand .light-logo {
  max-height: 34px;
  width: auto !important;
  object-fit: contain;
}

/* Recolhido, o cabeçalho da marca tem exatamente 60 × 60 px e o tema centraliza
   por `text-align`. O `display:flex` que uso abaixo ignora `text-align`, então
   aqui a centralização é refeita à mão e o respiro lateral encolhe — com 10 px
   de cada lado sobravam 40 px para uma logo de 34, e ela encostava nas beiradas. */
.mini-sidebar .navbar-header .navbar-brand {
  justify-content: center;
  padding: 6px 4px;
}

.mini-sidebar .navbar-header .navbar-brand .light-logo {
  max-height: 40px;
  max-width: 44px;
}

.navbar-header .navbar-brand {
  display: flex;
  align-items: center;
  padding: 6px 10px;
}

/* --------------------------------------------------------------- o menu */

.left-sidebar,
.sidebar-nav {
  background: var(--meleva-preto) !important;
}

.sidebar-nav > ul > li > a {
  border-radius: 10px;
  margin: 2px 10px;
  padding: 11px 14px;
  transition: background 0.15s ease, color 0.15s ease;
}

/* O item ativo ganha o amarelo cheio, com o texto preto por cima. Antes era
   só uma borda fininha à direita, que passava despercebida. */
.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li > a.active {
  background: var(--meleva-amarelo) !important;
  color: #0C111C !important;
  border-color: transparent !important;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(255, 204, 0, 0.25);
}

.sidebar-nav > ul > li.active > a i,
.sidebar-nav > ul > li > a.active i {
  color: #0C111C !important;
}

.sidebar-nav ul li a:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-right: 0 !important;
  color: var(--meleva-amarelo) !important;
}

.sidebar-nav .nav-small-cap {
  letter-spacing: 0.08em;
  font-size: 10.5px;
  opacity: 0.55;
  margin-top: 14px;
}

/* -------------------------------------------------- menu recolhido (mini)
   As folgas acima foram desenhadas para o menu ABERTO, com 240 px. Recolhido
   ele tem 60 px, e ali uma margem de 10 px de cada lado come um terço da
   largura: os ícones saem do eixo e o menu fica torto.

   Aqui as customizações são desfeitas e o tema volta a mandar no espaçamento,
   que é o que ele já fazia direito. Só a cor e o canto arredondado
   permanecem — esses não dependem de largura. */

.mini-sidebar .sidebar-nav > ul > li > a {
  margin: 2px 6px !important;
  border-radius: 10px !important;
  /* O padding fica por conta do tema: é ele que centraliza o ícone nos 60 px
     e empurra o rótulo para fora da área visível. */
  padding: 7px 25px 7px 60px;
}

/* Recolhido, o item ativo não tem onde escrever o rótulo — a marcação precisa
   caber no próprio ícone. */
.mini-sidebar .sidebar-nav > ul > li.active > a,
.mini-sidebar .sidebar-nav > ul > li > a.active {
  box-shadow: none;
}

/* Os títulos de seção ("GESTÃO DE CONTAS") não cabem em 60 px e viravam um
   amontoado de letras cortadas. */
.mini-sidebar .sidebar-nav .nav-small-cap {
  opacity: 0;
  height: 8px;
  overflow: hidden;
  margin-top: 6px;
}

/* O submenu que abre ao passar o mouse é posicionado pelo tema em `left:60px`.
   Sem isto ele herdava o canto arredondado e a margem do item e nascia
   deslocado do ícone que o abriu. */
.mini-sidebar .sidebar-nav #sidebarnav > li > ul {
  margin: 0 !important;
  border-radius: 0 10px 10px 0;
  box-shadow: var(--meleva-sombra-forte);
}

.mini-sidebar .sidebar-nav #sidebarnav > li > ul > li > a {
  margin: 0 !important;
  border-radius: 0 !important;
}

/* -------------------------------------------------------- barra superior */

.topbar,
.topbar .navbar-header,
.topbar .top-navbar {
  background: var(--meleva-preto) !important;
}

/* ------------------------------------------------------------- cartões
   O tema desenha cartões de canto reto e sombra dura. Canto arredondado e
   sombra suave é o que separa um painel de 2015 de um de hoje. */

.card,
.white-box,
.modal-content,
.dataTables_wrapper {
  border-radius: var(--meleva-raio) !important;
  border: 1px solid var(--meleva-borda) !important;
  box-shadow: var(--meleva-sombra) !important;
}

.card:hover {
  box-shadow: var(--meleva-sombra-forte) !important;
  transition: box-shadow 0.2s ease;
}

.card .card-body {
  padding: 22px;
}

/* ------------------------------------------------------------- botões */

.btn {
  border-radius: 10px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-themecolor,
.btn-themecolor.disabled,
.btn-primary,
.btn-success {
  background: var(--meleva-amarelo) !important;
  border-color: var(--meleva-amarelo) !important;
  /* Preto sobre amarelo: branco sobre amarelo não tem contraste suficiente
     para ser lido. */
  color: #0C111C !important;
}

.btn-themecolor:hover,
.btn-primary:hover,
.btn-success:hover {
  filter: brightness(0.94);
  box-shadow: 0 4px 14px rgba(255, 204, 0, 0.35);
}

.btn-outline-primary,
.btn-outline-success {
  color: #0C111C !important;
  border-color: var(--meleva-amarelo) !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
  background: var(--meleva-amarelo) !important;
  color: #0C111C !important;
}

/* ------------------------------------------------------------- formulários */

.form-control,
.custom-select,
.select2-container--default .select2-selection--single {
  border-radius: 10px !important;
  border: 1px solid #e3e6ec !important;
  padding: 10px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--meleva-amarelo) !important;
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.18) !important;
}

/* Campo de busca do menu, sobre o fundo escuro. */
.left-sidebar input[type="text"],
.left-sidebar input[type="search"] {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
  border-radius: 30px !important;
}

.left-sidebar input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* --------------------------------------------------------------- tabelas */

.table thead th {
  border-top: 0 !important;
  border-bottom: 1px solid var(--meleva-borda) !important;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: #6b7280;
  font-weight: 700;
}

.table tbody tr {
  transition: background 0.12s ease;
}

.table tbody tr:hover {
  background: rgba(255, 204, 0, 0.06) !important;
}

.table td,
.table th {
  vertical-align: middle !important;
}

/* ------------------------------------------------------- links e destaques */

a {
  transition: color 0.12s ease;
}

.text-themecolor {
  color: var(--meleva-preto) !important;
}

.label-themecolor,
.bg-theme {
  background-color: var(--meleva-amarelo) !important;
  color: #0C111C !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--meleva-amarelo) !important;
  border-color: var(--meleva-amarelo) !important;
  color: #0C111C !important;
}

.pagination .page-link {
  border-radius: 8px !important;
  margin: 0 2px;
  border: 1px solid var(--meleva-borda);
}

.profile-tab li a.nav-link.active,
.customtab li a.nav-link.active {
  border-bottom: 2px solid var(--meleva-amarelo) !important;
  color: var(--meleva-preto) !important;
  font-weight: 600;
}

/* ------------------------------------------------------------- tipografia */

body,
.card,
.table {
  font-family: "Urbanist", "Nunito", "Poppins", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5,
.card-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--meleva-preto);
}