/* =========================================================================
   Gestão Rodoviária — estilo base
   Recria o visual do template Sneat (nav vertical + cards claros) usando
   apenas Bootstrap 5 + CSS próprio. Cor primária: vermelho Seara #ed1c24.
   ========================================================================= */

:root {
  --rodo-primaria: #ed1c24;
  --rodo-primaria-escura: #c4161d;
  --rodo-primaria-suave: rgba(237, 28, 36, 0.08);
  --rodo-texto: #32475c;
  --rodo-texto-suave: #6f7f92;
  --rodo-borda: #e6e9ed;
  --rodo-fundo: #f5f5f9;
  --rodo-sidebar-largura: 16rem;
  --rodo-topbar-altura: 3.75rem;

  --bs-primary: #ed1c24;
  --bs-primary-rgb: 237, 28, 36;
}

body {
  margin: 0;
  background: var(--rodo-fundo);
  color: var(--rodo-texto);
  font-size: 0.9375rem;
}

/* ---- Botões / links na cor da marca -------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--rodo-primaria);
  --bs-btn-border-color: var(--rodo-primaria);
  --bs-btn-hover-bg: var(--rodo-primaria-escura);
  --bs-btn-hover-border-color: var(--rodo-primaria-escura);
  --bs-btn-active-bg: var(--rodo-primaria-escura);
  --bs-btn-active-border-color: var(--rodo-primaria-escura);
  --bs-btn-disabled-bg: var(--rodo-primaria);
  --bs-btn-disabled-border-color: var(--rodo-primaria);
}

.btn-outline-primary {
  --bs-btn-color: var(--rodo-primaria);
  --bs-btn-border-color: var(--rodo-primaria);
  --bs-btn-hover-bg: var(--rodo-primaria);
  --bs-btn-hover-border-color: var(--rodo-primaria);
  --bs-btn-active-bg: var(--rodo-primaria);
  --bs-btn-active-border-color: var(--rodo-primaria);
}

.text-primary { color: var(--rodo-primaria) !important; }

.form-control:focus,
.form-select:focus {
  border-color: var(--rodo-primaria);
  box-shadow: 0 0 0 0.2rem var(--rodo-primaria-suave);
}

/* ---- Sidebar -------------------------------------------------------- */
.rodo-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  width: var(--rodo-sidebar-largura);
  background: #fff;
  border-inline-end: 1px solid var(--rodo-borda);
  transition: transform 0.2s ease;
}

.rodo-sidebar__marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--rodo-topbar-altura);
  padding: 0.75rem 1.25rem;
  border-block-end: 1px solid var(--rodo-borda);
}

.rodo-sidebar__nav {
  flex: 1;
  padding: 0.75rem 0.75rem 1.5rem;
  overflow-y: auto;
}

.rodo-sidebar__secao {
  margin-block: 1.25rem 0.375rem;
  padding-inline: 0.75rem;
  color: var(--rodo-texto-suave);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rodo-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-block-end: 0.125rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--rodo-texto);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rodo-sidebar__link:hover {
  background: rgba(50, 71, 92, 0.06);
  color: var(--rodo-texto);
}

.rodo-sidebar__link.ativo {
  background: var(--rodo-primaria);
  color: #fff;
  box-shadow: 0 2px 6px rgba(237, 28, 36, 0.3);
}

.rodo-sidebar__link i { font-size: 1.05rem; }

.rodo-sidebar__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  display: none;
  background: rgba(0, 0, 0, 0.4);
}

.rodo-sidebar__backdrop.visivel { display: block; }

/* ---- Topbar --------------------------------------------------------- */
.rodo-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--rodo-topbar-altura);
  margin: 0.75rem 0.75rem 0;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 2px 6px rgba(50, 71, 92, 0.08);
}

.rodo-topbar__titulo {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.rodo-topbar__toggle {
  padding: 0.25rem 0.5rem;
  color: var(--rodo-texto);
  font-size: 1.35rem;
  text-decoration: none;
}

.rodo-topbar__usuario {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  box-shadow: none;
}

.rodo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---- Conteúdo ------------------------------------------------------- */
.rodo-conteudo {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-inline-start: var(--rodo-sidebar-largura);
}

.rodo-conteudo > main {
  flex: 1;
  padding: 1rem 0.75rem;
}

.rodo-rodape {
  padding: 0.75rem 1.5rem;
  color: var(--rodo-texto-suave);
  font-size: 0.8125rem;
  text-align: center;
}

.card {
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(50, 71, 92, 0.08);
}

/* ---- Barra de ferramentas das grids --------------------------------- */
.rodo-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-block-end: 1px solid var(--rodo-borda);
}

.rodo-toolbar__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.rodo-toolbar .form-control,
.rodo-toolbar .form-select { min-width: 9rem; }

.rodo-separador {
  align-self: stretch;
  width: 1px;
  background: var(--rodo-borda);
}

/* Chips "Faturado / Não Faturado" (equivalente ao VChipGroup) */
.rodo-chip {
  padding: 0.25rem 0.75rem;
  border: 1px solid currentcolor;
  border-radius: 1rem;
  background: transparent;
  font-size: 0.8125rem;
  line-height: 1.4;
  cursor: pointer;
}

.rodo-chip[aria-pressed="true"] { background: currentcolor; }
.rodo-chip[aria-pressed="true"] span { color: #fff; }

/* ---- Tabulator ------------------------------------------------------ */
.tabulator {
  border: 0;
  font-size: 11px;
}

.tabulator .tabulator-header .tabulator-col {
  background: #fafafa;
  font-size: 11px;
  font-weight: 600;
}

.tabulator-row.tabulator-selectable:hover { background: var(--rodo-primaria-suave); }

.rodo-tag {
  display: inline-block;
  max-width: 100%;
  padding: 0.1rem 0.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Modal de edição ------------------------------------------------ */
.rodo-secao-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block: 1rem 0.5rem;
  padding-block-end: 0.375rem;
  border-block-end: 1px solid var(--rodo-borda);
  font-weight: 600;
}

.rodo-campo label {
  margin-block-end: 0.125rem;
  color: var(--rodo-texto-suave);
  font-size: 0.75rem;
}

.rodo-campo .form-control { font-size: 0.8125rem; }

.rodo-anexo-grupo {
  min-width: 12rem;
  padding: 0.5rem;
  border: 1px solid var(--rodo-borda);
  border-radius: 0.375rem;
}

.rodo-anexo-grupo__titulo {
  margin-block-end: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

/* ---- Login ---------------------------------------------------------- */
.rodo-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  background: var(--rodo-fundo);
}

.rodo-login__card {
  width: 100%;
  max-width: 26rem;
  padding: 2rem;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 4px 18px rgba(50, 71, 92, 0.12);
}

/* ---- Overlay de carregamento ---------------------------------------- */
.rodo-loading {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
}

.rodo-loading.visivel { display: flex; }

/* ---- Responsivo ----------------------------------------------------- */
@media (max-width: 991.98px) {
  .rodo-sidebar { transform: translateX(-100%); }
  .rodo-sidebar.aberta { transform: translateX(0); }
  .rodo-conteudo { margin-inline-start: 0; }
}