:root {
  /* Cores principais do tema */
  --primary-color: #0f766e;      /* Teal 700 */
  --primary-hover: #115e59;      /* Teal 800 */
  --primary-light: #f0fdfa;      /* Teal 50 */
  --accent-color: #f59e0b;       /* Âmbar / Alertas */

  /* Fundos e Textos */
  --bg-body: #f3f4f6;            /* Fundo geral (gray-100) */
  --bg-card: #ffffff;            /* Fundo dos cards e tabelas */
  --text-main: #1f2937;          /* Texto principal (gray-800) */
  --text-muted: #9ca3af;         /* Texto secundário/placeholder (gray-400) */

  /* Menu lateral fixo */
  --sidebar-width: 17rem;        /* 272px */
  --sidebar-bg: #0b3b39;         /* Verde petróleo escuro */
  --sidebar-bg-soft: #0f4744;
  --sidebar-active: #14746a;     /* Item ativo */
  --sidebar-border: rgba(255,255,255,.08);
  --sidebar-text: #b9d6d1;       /* Texto secundário do menu */
}

@media (max-width:575px){
#badgeTipoViagem{text-align: center!important;}
}

/* ===================== MENU LATERAL FIXO (DESKTOP) ===================== */
#sideMenu {
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, #08302e 100%);
  border-right: 1px solid var(--sidebar-border);
  margin: 0 !important; /* impede que o "space-y-6" do body empurre o menu para baixo */
}
#sideMenuOverlay { margin: 0 !important; }
#sideMenu::-webkit-scrollbar { width: 6px; }
#sideMenu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 999px; }

.menu-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .9rem;
  border-radius: .75rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--sidebar-text);
  transition: background-color .15s ease, color .15s ease;
}
.menu-link:hover { background: rgba(255,255,255,.06); color: #ffffff; }
.menu-link.active {
  background: var(--sidebar-active);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.menu-link i { width: 18px; height: 18px; flex-shrink: 0; }

@media (min-width: 1024px) {
  body.with-sidebar {
    padding-left: calc(var(--sidebar-width) + 2rem) !important;
    padding-right: 2rem !important;
    max-width: none !important;   /* usa toda a largura da tela disponível, sem faixas cinzas nas laterais */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  body.with-sidebar #sideMenu {
    transform: translateX(0) !important;
    position: fixed;
  }
  body.with-sidebar #sideMenuOverlay { display: none !important; }
  body.with-sidebar .btn-menu-toggle { display: none !important; }
  body.with-sidebar .btn-menu-close { display: none !important; }
}

/* ===================== BANNER DA VIAGEM (PERSONALIZÁVEL) ===================== */
.trip-banner {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  min-height: 230px;
  background-color: #0b3b39;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.trip-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,40,38,.96) 0%, rgba(8,40,38,.88) 30%, rgba(8,40,38,.35) 65%, rgba(8,40,38,.15) 100%);
  z-index: 0;
}
.trip-banner > * { position: relative; z-index: 1; }

.btn-banner-editar {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(2px);
}
.btn-banner-editar:hover { background: rgba(0,0,0,.55); }