/* =============================================================================
 * bb_ui — Design System do Black Box (shell de navegação).
 *
 * Estrutura:
 *   1) TOKENS        — variáveis de tema (fonte, cores, medidas). Re-skin aqui.
 *   2) BASE          — overrides do Bootstrap + tipografia (Open Sans).
 *   3) LAYOUT        — .bb-layout (sidebar + main), área de conteúdo.
 *   4) SIDEBAR       — desktop: 3 estados (full/rail/hidden) via [data-bb-sidebar].
 *   5) MOBILE        — sidebar vira drawer (Bootstrap offcanvas-lg) + app bar.
 *   6) TOPBAR        — barra interna do app (breadcrumb + ações), some se vazia.
 *   7) ÍCONES        — tamanho padrão (cor herda de currentColor).
 *
 * O ESQUELETO é compartilhado (manager + customer); o TEMA muda por app
 * redefinindo os tokens em :root no CSS do app.
 * ========================================================================== */

/* 1) TOKENS ---------------------------------------------------------------- */
:root {
    --bb-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* medidas do shell */
    --bb-sidebar-width: 194px;
    --bb-sidebar-rail: 68px;
    --bb-appbar-height: 56px;
    --bb-transition: 0.18s ease;

    /* paleta do shell (tema claro: sidebar clara, texto preto, conteúdo branco) */
    --bb-sidebar-bg: #f1f5f9;
    --bb-sidebar-fg: #334155;
    --bb-sidebar-fg-active: #000000;
    --bb-sidebar-active-bg: rgba(0, 0, 0, 0.06);
    --bb-accent: #2563eb;
    --bb-navy: #0a2540; /* azul-marinho: hover do menu/botões */
    --bb-content-bg: #ffffff;
    --bb-content-fg: #000000; /* texto "quase-preto" de destaque (ex.: "Olá", marca do login) */
    --bb-surface-bg: #ffffff; /* superfícies elevadas: cards de login, telas de erro */
    --bb-border: #e2e8f0;
}

/* 2) BASE ------------------------------------------------------------------ */
:root {
    /* faz o Bootstrap usar a nossa fonte sem precisar recompilar Sass */
    --bs-body-font-family: var(--bb-font);
}

body {
    font-family: var(--bb-font);
    background-color: var(--bb-content-bg);
}

/* superfície elevada (cards de login, telas de erro) — temável por app */
.bb-surface {
    background-color: var(--bb-surface-bg);
}

/* 3) LAYOUT ---------------------------------------------------------------- */
.bb-layout {
    display: flex;
    min-height: 100vh;
}

.bb-main {
    flex: 1 1 auto;
    min-width: 0; /* evita overflow de tabelas/conteúdo largo */
    display: flex;
    flex-direction: column;
}

.bb-content {
    flex: 1 1 auto;
    padding: 1.5rem;
    font-size: 0.85rem; /* área logada ~15-20% menor; login não usa .bb-content */
}

/* títulos da área logada reduzidos ~20% (Bootstrap usa rem, então sobrescrevemos) */
.bb-content h1,
.bb-content .h1 {
    font-size: 2rem;
}

.bb-content h2,
.bb-content .h2 {
    font-size: 1.6rem;
}

.bb-content h3,
.bb-content .h3 {
    font-size: 1.4rem;
}

.bb-content h4,
.bb-content .h4 {
    font-size: 1.2rem;
}

.bb-content h5,
.bb-content .h5 {
    font-size: 1.05rem;
}

/* 4) SIDEBAR --------------------------------------------------------------- */
.bb-sidebar {
    /* !important: no desktop o Bootstrap força background transparent !important
       nas .offcanvas-lg; sem isso a sidebar fica transparente (branco da página) */
    background-color: var(--bb-sidebar-bg) !important;
    color: var(--bb-sidebar-fg);
    width: var(--bb-sidebar-width);
    flex: 0 0 auto; /* largura TRAVADA: não encolhe/cresce com o conteúdo selecionado */
    border-right: 1px solid var(--bb-border); /* separa a sidebar clara do conteúdo branco */
    display: flex; /* header + nav(cresce) + footer(no fim) */
    flex-direction: column;
    --bs-offcanvas-width: var(--bb-sidebar-width); /* largura do drawer mobile */
    --bs-offcanvas-bg: var(--bb-sidebar-bg);
    --bs-offcanvas-color: var(--bb-sidebar-fg);
}

/* a navegação cresce e rola; o rodapé fica colado embaixo */
.bb-nav-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bb-sidebar-footer {
    padding: 0.4rem;
}


.bb-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: var(--bb-appbar-height);
    padding: 0 0.85rem;
    border-bottom: 1px solid var(--bb-border);
    white-space: nowrap;
    overflow: hidden;
}

.bb-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bb-sidebar-fg-active);
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
}

/* botão na BORDA direita da sidebar: cicla os 3 estados (só desktop) */
.bb-sidebar-edge-toggle {
    position: absolute;
    top: 14px;
    right: -13px;
    z-index: 1045;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--bb-border);
    background: #fff;
    color: var(--bb-sidebar-fg);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.bb-sidebar-edge-toggle:hover {
    background: var(--bb-navy);
    color: #fff;
    border-color: var(--bb-navy);
}

.bb-nav {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.bb-nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.95rem;
    margin: 0.1rem 0.4rem;
    border-radius: 8px;
    color: var(--bb-sidebar-fg);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--bb-transition), color var(--bb-transition);
}

.bb-nav-link:hover {
    background-color: var(--bb-navy);
    color: #fff; /* texto e ícone (currentColor) brancos no hover */
}

.bb-nav-link.active {
    background-color: #000; /* fundo preto */
    color: #fff; /* texto e ícone (currentColor) brancos */
    /* ladinhos azuis (mesmo azul do botão do Google) à esquerda E à direita */
    box-shadow: inset 3px 0 0 0 #0d6efd, inset -3px 0 0 0 #0d6efd;
}

.bb-nav-link .bb-icon {
    flex: 0 0 auto;
}

/* botão (mobile) que fecha o drawer */
.bb-sidebar-toggle {
    border: 0;
    background: transparent;
    color: var(--bb-sidebar-fg);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 6px;
    line-height: 0;
}

.bb-sidebar-toggle:hover {
    background-color: var(--bb-sidebar-active-bg);
    color: var(--bb-sidebar-fg-active);
}

/* botão flutuante para REABRIR quando a sidebar está oculta (desktop):
 * mesma aparência do botão da borda (.bb-sidebar-edge-toggle) — redondo, branco,
 * navy no hover. */
.bb-reopen {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1040;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--bb-border);
    background: #fff;
    color: var(--bb-sidebar-fg);
    cursor: pointer;
    line-height: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.bb-reopen:hover {
    background: var(--bb-navy);
    color: #fff;
    border-color: var(--bb-navy);
}

/* --- Estados (DESKTOP ≥ lg) --------------------------------------------- */
@media (min-width: 992px) {
    /* RAIL: só ícones */
    html[data-bb-sidebar="rail"] .bb-sidebar {
        width: var(--bb-sidebar-rail);
    }
    html[data-bb-sidebar="rail"] .bb-nav-label,
    html[data-bb-sidebar="rail"] .bb-brand-label {
        display: none;
    }
    html[data-bb-sidebar="rail"] .bb-nav-link {
        justify-content: center;
        gap: 0;
    }
    html[data-bb-sidebar="rail"] .bb-sidebar-header {
        justify-content: center;
    }

    /* HIDDEN: some a sidebar; aparece o botão de reabrir */
    html[data-bb-sidebar="hidden"] .bb-sidebar {
        width: 0;
        overflow: hidden;
        border: 0;
    }
    html[data-bb-sidebar="hidden"] .bb-reopen {
        display: inline-flex;
    }
    /* o botão de reabrir é fixo no topo-esq.; reserva um espaço em branco
       (quadrado, ~largura = altura) para ele não ficar sobre o texto/breadcrumb */
    html[data-bb-sidebar="hidden"] .bb-main {
        padding-left: 3rem;
    }

    /* transição suave de largura + âncora p/ o botão da borda (absolute) */
    .bb-sidebar {
        position: relative;
        transition: width var(--bb-transition);
    }
}

/* 5) MOBILE (< lg) --------------------------------------------------------- */
/* A sidebar usa .offcanvas-lg do Bootstrap: vira drawer abaixo de lg e fica
 * inline em lg+. Aqui só ajustamos a app bar e escondemos o que é de desktop. */
.bb-appbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--bb-appbar-height);
    padding: 0 0.85rem;
    background-color: #fff;
    border-bottom: 1px solid var(--bb-border);
}

.bb-appbar .bb-brand {
    color: #000;
}

/* o hambúrguer da app bar fica sobre fundo branco -> cor escura */
.bb-appbar-toggle {
    color: #1f2937;
}

/* 6) TOPBAR ---------------------------------------------------------------- */
/* Renderizada só quando a página preenche o bloco (some quando vazia). */
.bb-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 1.5rem;
    background-color: #fff;
    border-bottom: 1px solid var(--bb-border);
}

.bb-topbar .breadcrumb {
    margin: 0;
    font-size: 0.85rem; /* breadcrumb com fonte menor */
}

/* ícone + texto num wrapper inline-flex: centralizados verticalmente e com
   espaço entre eles (vale p/ o link e p/ a página atual) */
.bb-topbar .bb-crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* link do breadcrumb: azul mais escuro, sem sublinhado */
.bb-topbar .breadcrumb-item a.bb-crumb {
    color: #0a4bbd;
    text-decoration: none;
}

.bb-topbar .breadcrumb-item a.bb-crumb:hover,
.bb-topbar .breadcrumb-item a.bb-crumb:focus {
    color: #083a93;
}

/* ícone do breadcrumb (~13px: 12 +10%, arredondado) */
.bb-topbar .breadcrumb .bb-icon {
    width: 13px;
    height: 13px;
}

.bb-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* botão de ícone na topbar (mensagens, logout) — só o ícone, sem fundo/borda */
.bb-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bb-sidebar-fg);
    cursor: pointer;
    line-height: 0;
    transition: color var(--bb-transition);
}

.bb-topbar-btn:hover {
    color: var(--bb-navy);
}

/* Balão de mensagens: bolinha colorida (cor da última mensagem) sobre o sino. */
.bb-msg-bell {
    position: relative;
}

.bb-msg-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6c757d;
    box-shadow: 0 0 0 2px var(--bb-surface-bg); /* "recorta" do fundo da topbar */
}

.bb-msg-dot--success {
    background: #198754;
}
.bb-msg-dot--danger {
    background: #dc3545;
}
.bb-msg-dot--warning {
    background: #ffc107;
}
.bb-msg-dot--info {
    background: #0dcaf0;
}

/* Lightbox (modal) de mensagens — superfície pelos tokens (adapta claro/escuro). */
.bb-msg-modal {
    background: var(--bb-surface-bg);
    color: var(--bb-content-fg);
    border: 1px solid var(--bb-border);
}

.bb-msg-modal .modal-header,
.bb-msg-modal .modal-footer {
    border-color: var(--bb-border);
}

/* btn-close legível no tema escuro (o ícone padrão é escuro). */
html[data-bb-theme="dark"] .bb-msg-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.bb-msg-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--bb-border);
    border-left: 4px solid #6c757d;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.3;
}

.bb-msg-item--success {
    border-left-color: #198754;
}
.bb-msg-item--danger {
    border-left-color: #dc3545;
}
.bb-msg-item--warning {
    border-left-color: #ffc107;
}
.bb-msg-item--info {
    border-left-color: #0dcaf0;
}

.bb-msg-item-icon {
    flex: 0 0 auto;
    line-height: 1.3;
}

.bb-msg-item-text {
    flex: 1 1 auto;
}

/* 6b) TOASTS --------------------------------------------------------------- */
/* Mensagens do Django como cartões flutuantes no rodapé, centralizados. Entram
   com fade+slide e saem do mesmo jeito (classes bb-toast-show/-hide pelo JS).
   Cores/superfície vêm dos tokens → adapta a claro/escuro sozinho; a faixa
   colorida à esquerda diferencia o tipo. */
.bb-toast-host {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: max-content;
    max-width: min(92vw, 30rem);
    pointer-events: none; /* o host não bloqueia cliques; cada toast reativa */
}

.bb-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--bb-border);
    border-left: 4px solid var(--bb-navy);
    background: var(--bb-surface-bg);
    color: var(--bb-content-fg);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    font-size: 0.9rem;
    line-height: 1.3;
    /* Visível por padrão (entrada via CSS) — NÃO depende do JS para aparecer. O JS
       só auto-fecha e trata o "X". Falha do JS = toast fica visível, sem sumir. */
    animation: bb-toast-in 0.25s ease both;
}

@keyframes bb-toast-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* Saída (JS adiciona a classe): fade+slide para baixo, depois remove do DOM. */
.bb-toast.bb-toast-hide {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--bb-transition), transform var(--bb-transition);
    animation: none;
}

.bb-toast-icon {
    flex: 0 0 auto;
    line-height: 1;
}

.bb-toast-body {
    flex: 1 1 auto;
}

.bb-toast-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0.15rem;
    cursor: pointer;
}

.bb-toast-close:hover {
    opacity: 1;
}

/* Faixa colorida por tipo (success/danger/warning/info). */
.bb-toast--success {
    border-left-color: #198754;
}
.bb-toast--danger {
    border-left-color: #dc3545;
}
.bb-toast--warning {
    border-left-color: #ffc107;
}
.bb-toast--info {
    border-left-color: #0dcaf0;
}

@media (prefers-reduced-motion: reduce) {
    .bb-toast {
        animation: none;
    }
    .bb-toast.bb-toast-hide {
        transform: none;
    }
}

/* 7) ÍCONES ---------------------------------------------------------------- */
.bb-icon {
    width: 20px;
    height: 20px;
    vertical-align: -0.15em;
}

.bb-icon-lg {
    width: 28px;
    height: 28px;
}

.material-symbols-outlined {
    font-size: 20px;
    vertical-align: -0.25em;
}

/* tamanho grande do glifo Material (font-size, pois .bb-icon-lg mexe em w/h) */
.material-symbols-outlined.bb-icon-lg {
    font-size: 28px;
}

/* variante PREENCHIDA do Material Symbols (ex.: cubo preto da marca) */
.bb-icon-fill {
    font-variation-settings: "FILL" 1;
}

/* 8) BOTÕES ---------------------------------------------------------------- */
/* AÇÃO PADRÃO: verde escuro para botões de enviar/ação (btn-primary do Bootstrap).
 * Tudo que for "enviar" usa btn-primary e já sai verde. As exceções têm classe
 * própria: "Entrar com Google" fica azul (.bb-btn-google); logout fica vermelho
 * (btn-danger / btn-outline-danger). */
.btn-primary {
    --bs-btn-bg: #14532d;
    --bs-btn-border-color: #14532d;
    --bs-btn-hover-bg: #0f3f22;
    --bs-btn-hover-border-color: #0f3f22;
    --bs-btn-active-bg: #0f3f22;
    --bs-btn-active-border-color: #0f3f22;
    --bs-btn-disabled-bg: #14532d;
    --bs-btn-disabled-border-color: #14532d;
}

/* exceção: "Entrar com Google" permanece azul (mesmo azul do rótulo do app) */
.bb-btn-google {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a58ca;
}

/* botões de ação dos cards de Opções com largura uniforme */
.bb-btn-acao {
    min-width: 11rem;
}

/* 9) HOME — launcher de módulos (card por seção interna) ------------------- */
/* Cada caixa (alinhada à esquerda): linha 1 = ícone + título; abaixo o texto
 * explicativo. O card inteiro é um link. A COR de fundo/texto é por card (inline
 * no template — cada seção tem a sua); o default aqui é fundo branco / texto
 * preto. Sem borda: a sombra separa o card branco do fundo branco da página.
 * Compartilhado (manager + customer). */
/* fluxo: cards lado a lado em sequência, quebrando linha (quantos couberem) */
.bb-home-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.bb-home-card {
    display: flex;
    flex-direction: column;
    width: 240px; /* largura fixa: alinham em sequência e quebram linha */
    max-width: 100%; /* em telas estreitas, não estoura */
    padding: 1.25rem;
    background-color: #fff; /* default (sobrescrito inline por card) */
    color: #000; /* default (sobrescrito inline por card) */
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); /* destacada já em repouso */
    transition: transform var(--bb-transition), box-shadow var(--bb-transition);
}

.bb-home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28); /* ainda mais destacada no hover */
}

/* linha 1: ícone + título, fundo transparente, à esquerda */
.bb-home-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}

.bb-home-card-title {
    margin: 0;
    font-weight: 700;
}

/* texto explicativo: herda a cor do card, um pouco mais suave */
.bb-home-card-desc {
    margin: 0;
    font-size: 0.8rem;
    color: inherit;
    opacity: 0.85;
}

/* =============================================================================
 * 10) TEMA ESCURO — por app via data-bb-theme="dark" no <html> (setting BB_THEME).
 * Hoje só o MANAGER usa; o customer fica claro (estas regras nem casam nele).
 * Re-skin: ajuste os tokens no primeiro bloco; o resto cobre superfícies que eram
 * brancas fixas no shell (appbar/topbar/botões redondos) e componentes do Bootstrap.
 * ========================================================================== */
html[data-bb-theme="dark"] {
    /* tokens do shell */
    --bb-content-bg: #0d1117;
    --bb-content-fg: #f0f6fc;
    --bb-surface-bg: #161b22;
    --bb-sidebar-bg: #161b22;
    --bb-sidebar-fg: #c9d1d9;
    --bb-sidebar-fg-active: #ffffff;
    --bb-sidebar-active-bg: rgba(255, 255, 255, 0.08);
    --bb-border: #30363d;
    --bb-accent: #58a6ff;
    --bb-navy: #1f6feb; /* hover do menu/botões no escuro */

    /* texto base do Bootstrap claro sobre fundo escuro */
    --bs-body-color: #c9d1d9;
    --bs-body-bg: #0d1117;
    --bs-secondary-color: #8b949e;
    --bs-emphasis-color: #f0f6fc;

    /* superfícies do Bootstrap usadas nas páginas (cards, inputs) */
    --bs-card-bg: #161b22;
    --bs-card-border-color: #30363d;
    --bs-border-color: #30363d;
}

/* superfícies do shell que eram brancas fixas -> escuras */
html[data-bb-theme="dark"] .bb-appbar,
html[data-bb-theme="dark"] .bb-topbar {
    background-color: #161b22;
}

html[data-bb-theme="dark"] .bb-appbar .bb-brand,
html[data-bb-theme="dark"] .bb-appbar-toggle {
    color: var(--bb-content-fg);
}

/* botões redondos da sidebar (borda/reabrir) eram brancos */
html[data-bb-theme="dark"] .bb-sidebar-edge-toggle,
html[data-bb-theme="dark"] .bb-reopen {
    background: #161b22;
    color: var(--bb-sidebar-fg);
}

/* item ativo: fundo = cor do conteúdo (parece "conectado" à área), insets azuis */
html[data-bb-theme="dark"] .bb-nav-link.active {
    background-color: var(--bb-content-bg);
}

/* breadcrumb: azul mais claro para fundo escuro */
html[data-bb-theme="dark"] .bb-topbar .breadcrumb-item a.bb-crumb {
    color: #58a6ff;
}
html[data-bb-theme="dark"] .bb-topbar .breadcrumb-item a.bb-crumb:hover,
html[data-bb-theme="dark"] .bb-topbar .breadcrumb-item a.bb-crumb:focus {
    color: #79c0ff;
}

/* cards do Bootstrap (ex.: Opções) — vars --bs-card-* acima cuidam do fundo */
html[data-bb-theme="dark"] .card {
    color: var(--bs-body-color);
}

/* inputs escuros (Opções/perfil/troca de senha) */
html[data-bb-theme="dark"] .form-control,
html[data-bb-theme="dark"] .form-select {
    background-color: #0d1117;
    border-color: #30363d;
    color: var(--bs-body-color);
}
html[data-bb-theme="dark"] .form-control::placeholder {
    color: #6e7681;
}
html[data-bb-theme="dark"] .form-control:focus,
html[data-bb-theme="dark"] .form-select:focus {
    background-color: #0d1117;
    border-color: #1f6feb;
    color: var(--bs-body-color);
    box-shadow: 0 0 0 0.2rem rgba(31, 111, 235, 0.25);
}

/* botões outline (Cancelar) legíveis no escuro */
html[data-bb-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #c9d1d9;
    --bs-btn-border-color: #30363d;
    --bs-btn-hover-bg: #21262d;
    --bs-btn-hover-color: #f0f6fc;
    --bs-btn-hover-border-color: #8b949e;
}