/* /assets/style.css */

:root {
  /* --- NOVO: Definição do Tema de Cores --- */
  --theme-primary: #df1e25;
  --theme-primary-dark: #b8191f; /* Um tom mais escuro para hovers */
  /* --- NOVO: Sobrescrevendo a cor primária do Bootstrap --- */
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: 223, 30, 37; /* Valor RGB da cor primária */
  --sidebar-width: 280px;
  --sidebar-bg: #212529;
  --main-bg: #f8f9fa;
}

body {
  background-color: var(--main-bg);
}

.wrapper {
  display: flex;

  width: 100%;

  min-height: 100vh;

  align-items: stretch;

  /* NOVO: Essencial para o menu deslizante não criar uma barra de rolagem horizontal */

  position: relative;

  overflow-x: hidden;
}

/* --- Sidebar --- */

.sidebar {
  width: var(--sidebar-width);

  min-width: var(--sidebar-width);

  background: var(--sidebar-bg);

  color: #fff;

  transition: transform 0.3s ease-in-out; /* NOVO: Animação de entrada/saída */
}

.sidebar .sidebar-header {
  padding: 20px;

  background: #1a1d20;

  text-align: center;
}

.sidebar ul li a {
  padding: 15px 20px;

  font-size: 1.1em;

  display: block;

  color: #adb5bd;

  text-decoration: none;

  transition: all 0.2s;
}

.sidebar ul li a:hover {
  color: #fff;

  background: #343a40;
}

.sidebar ul li.active > a {
  color: #fff;

  background: var(--theme-primary); /* NOVO: Usa a cor do tema */
}

/* --- Conteúdo Principal --- */

.main-content {
  flex-grow: 1;

  padding: 25px;

  transition: margin-left 0.3s ease-in-out; /* NOVO: Animação suave */
}

/* --- Lógica Responsiva com Menu Sandwich --- */

/* NOVO: Botão de toggle (sandwich) inicialmente escondido em telas grandes */

#sidebar-toggle {
  display: none;
}

/* NOVO: Overlay para escurecer o conteúdo quando o menu estiver aberto em telas pequenas */

.overlay {
  display: none;

  position: fixed;

  width: 100vw;

  height: 100vh;

  background: rgba(0, 0, 0, 0.5);

  z-index: 998; /* Abaixo da sidebar, acima do conteúdo */

  opacity: 0;

  transition: opacity 0.3s ease-in-out;
}

/* Media Query para telas menores (tablets e celulares) */

@media (max-width: 992px) {
  .sidebar {
    position: absolute; /* NOVO: Muda o posicionamento */
    top: 0;
    left: 0;
    height: 100%;
    z-index: 999;
    transform: translateX(-100%);
  }

  #sidebar-toggle {
    display: block; /* NOVO: Mostra o botão do menu sandwich */
  }

  .wrapper.sidebar-active .sidebar {
    transform: translateX(0); /* Traz a sidebar para a tela */
  }

  .wrapper.sidebar-active .overlay {
    display: block;
    opacity: 1;
  }
}

/* --- Demais Estilos --- */

.content-body {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: var(--main-bg);
}

.login-card {
  width: 100%;
  max-width: 400px;
}

/* /assets/style.css */

/* --- Sidebar --- */

/* ... (outras regras da sidebar) ... */

/* /assets/style.css */

/* --- NOVO: Bloco do cabeçalho da Sidebar com layout vertical --- */

.sidebar .sidebar-header {
  padding: 25px;

  background: #1a1d20;

  display: flex;

  /* MUITO IMPORTANTE: Muda a direção do alinhamento para vertical */

  flex-direction: column;

  align-items: center; /* Centraliza horizontalmente */

  justify-content: center; /* Centraliza verticalmente */

  text-decoration: none;

  color: #fff;

  transition: background 0.3s;
}

.sidebar .sidebar-header:hover {
  background: #2c3136;
}

/* Regra para a logo: maior e com espaço embaixo */

.sidebar .sidebar-header img {
  width: 220px; /* Aumentamos o tamanho da logo */

  height: auto;

  margin-right: 0; /* Removemos a margem da direita */

  margin-bottom: 15px; /* Adicionamos margem inferior para separar do texto */
}

/* Regra para o texto: sem margens extras */

.sidebar .sidebar-header h3 {
  margin-bottom: 0;

  font-size: 1.2rem;

  font-weight: 600;
}

/* /assets/style.css */

/* --- NOVO: Estilos para os Cartões da Dashboard --- */

.card-veiculos {
  background-color: #0d6efd;
} /* Azul Bootstrap */

.card-marcas {
  background-color: #198754;
} /* Verde Bootstrap */

.card-usuarios {
  background-color: #6c757d;
} /* Cinza Bootstrap */

.card .card-footer {
  background-color: rgba(0, 0, 0, 0.2);

  transition: background-color 0.3s;
}

.card .card-footer:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.stat-icon {
  font-size: 4rem; /* Tamanho grande para o ícone */

  opacity: 0.3; /* Deixa o ícone semi-transparente */
}

.img-thumbnail {
  object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */

  height: 60px; /* Define uma altura fixa para padronizar */

  /*width: 100px;      /* Define uma largura fixa */
}