/*
 * Variaveis de marca — azul extraido da foto real da frota da Sape (fundo-login.jpg).
 * Nunca usar hex fixo direto nos templates/CSS de tela: sempre var(--bs-primary) e as
 * demais variaveis do Bootstrap (--bs-border-color, --bs-tertiary-bg etc.), para o tema
 * escuro recalcular sozinho.
 */
:root {
    --bs-primary: #0b63ce; /* azul da marca Sape (extraido das cores reais da frota) */
    --bs-primary-rgb: 11, 99, 206;
    --bs-primary-2: #29b6f6; /* tom mais claro, usado em gradientes (logo, tela de login) */
}

html, body {
    height: 100%;
    margin: 0;
}

.painel-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar e topbar com altura fixa (70px) pra alinhar a logo com o cabeçalho — mesmo
   padrão do TMS W Ávila. */
.topbar {
    height: 70px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0 1.5rem;
    flex: 0 0 auto;
}

.sidebar {
    width: 240px;
    flex: 0 0 auto;
    border-right: 1px solid var(--bs-border-color);
    transition: width 0.15s ease;
    overflow-y: auto;
}

.sidebar.collapsed {
    width: 64px;
}

.sidebar .logo-area {
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

.main-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.content-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem;
}

.content-header {
    flex: 0 0 auto;
    padding: 1rem 1.5rem 0;
}

.content-footer {
    flex: 0 0 auto;
    padding: 0 1.5rem 1rem;
}

/* Formulários de cadastro — ver CLAUDE.md */
.form-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.form-wrap-sm {
    max-width: 500px;
    margin: 0 auto;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.form-actions .btn {
    min-width: 110px;
}

.linha-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.campo-w-xxs { width: 100px; }
.campo-w-num { width: 130px; }
.campo-w-sm  { width: 170px; }
.campo-w-md  { width: 240px; }
.campo-w-lg  { width: 340px; }
.campo-w-xl  { width: 460px; }
.campo-w-full { width: 100%; }

/* Grid fixo sem barra de rolagem — sticky header/footer */
.grid-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Barra de rolagem fina, padrão pra qualquer lista que precise de scroll de verdade */
.dashboard-scroll-fino {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
}

.btn-acao {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}