/* ============================================================================
   Cubo Escolar — Tema visual v2 (refatoração puramente visual)
   ----------------------------------------------------------------------------
   Este arquivo é carregado DEPOIS de:
     1) cubo-escolar.css (Bootstrap 4 + SB Admin 2)
     2) base/style.html (injeção dinâmica de cor do patrocinador em runtime)
   ...para ter precedência na cascata sem depender de !important em excesso.

   IMPORTANTE:
   - NÃO redefinir as variáveis dinâmicas do patrocinador:
       --primary, --componentColor, --darkerMainColor, --lightenMainColor
     (elas são injetadas por base/style.html e recolorem .btn-primary,
      .bg-gradient-primary, .topbar-header, etc.). Aqui apenas as CONSUMIMOS.
   - Tokens abaixo são NEUTROS/ESTRUTURAIS (não dependem do patrocinador).

   ETAPA ATUAL: somente tokens. Nenhuma regra de componente foi aplicada ainda.
   As regras de componentes serão adicionadas nas próximas etapas, uma a uma.
   ============================================================================ */

:root {
  /* ---- Cores: texto e superfícies ---- */
  --ce-text:            #0F172A;   /* texto principal        */
  --ce-text-muted:      #64748B;   /* texto secundário/muted */
  --ce-text-caption:    #64748B;   /* captions               */
  --ce-text-empty:      #94A3B8;   /* empty states           */
  --ce-label:           #334155;   /* labels de formulário   */
  --ce-heading-3:       #334155;   /* h3                     */

  --ce-bg:              #F8FAFC;   /* fundo global           */
  --ce-surface:         #FFFFFF;   /* cartões/painéis        */
  --ce-border:          #E2E8F0;   /* borda sutil            */

  /* ---- Cabeçalho de tabela ---- */
  --ce-table-head-bg:   #1E293B;
  --ce-table-head-text: #FFFFFF;
  --ce-table-row-hover: #F1F5F9;   /* hover azul/cinza claro */
  --ce-table-zebra:     #F8FAFC;   /* zebra sutil            */

  /* ---- Feedback: sucesso ---- */
  --ce-success:         #059669;
  --ce-success-hover:   #047857;
  --ce-success-soft-bg: #ECFDF5;
  --ce-success-soft-tx: #065F46;

  /* ---- Feedback: erro/perigo ---- */
  --ce-danger:          #EF4444;
  --ce-danger-text:     #DC2626;
  --ce-danger-soft-bg:  #FEF2F2;
  --ce-danger-soft-bd:  #FEE2E2;
  --ce-danger-soft-tx:  #991B1B;

  /* ---- Feedback: aviso ---- */
  --ce-warning:         #CA8A04;
  --ce-warning-alt:     #F59E0B;
  --ce-warning-soft-bg: #FEFCE8;
  --ce-warning-soft-tx: #854D0E;

  /* ---- Info (APENAS fallback quando --primary/--componentColor
           não estiver disponível no contexto) ---- */
  --ce-info-fallback:   #2563EB;

  /* ---- Desabilitado ---- */
  --ce-disabled:        #CBD5E1;
  --ce-disabled-opacity: 0.55;

  /* ---- Tipografia ---- */
  --ce-font-base: 'Inter', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ce-fs-h1: 30px;
  --ce-fs-h2: 24px;
  --ce-fs-h3: 20px;
  --ce-fs-body: 14px;
  --ce-fs-body-lg: 16px;
  --ce-fs-label: 14px;
  --ce-fs-caption: 12px;
  --ce-fw-regular: 400;
  --ce-fw-medium: 500;
  --ce-fw-semibold: 600;
  --ce-line-height: 1.5;

  /* ---- Forma / raio ---- */
  --ce-radius: 12px;        /* botões, cards, inputs         */
  --ce-radius-sm: 10px;     /* inputs menores                */
  --ce-radius-lg: 16px;     /* modais, cards de destaque     */
  --ce-radius-pill: 9999px; /* badges pílula                 */

  /* ---- Sombras ---- */
  --ce-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ce-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --ce-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);

  /* ---- Movimento ---- */
  --ce-transition: 200ms ease;

  /* ---- Foco ---- */
  --ce-focus-ring: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

/* ============================================================================
   COMPONENTE 1 — BASE GLOBAL (body, tipografia, fundo)
   ============================================================================ */

body {
  font-family: var(--ce-font-base);
  font-size: var(--ce-fs-body);
  line-height: var(--ce-line-height);
  color: var(--ce-text);
  background-color: var(--ce-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container principal de conteúdo do layout SB Admin 2 */
#content-wrapper {
  background-color: var(--ce-bg);
}

h1, .h1 { font-size: var(--ce-fs-h1); font-weight: var(--ce-fw-semibold); color: var(--ce-text); }
h2, .h2 { font-size: var(--ce-fs-h2); font-weight: var(--ce-fw-semibold); color: var(--ce-text); }
h3, .h3 { font-size: var(--ce-fs-h3); font-weight: var(--ce-fw-semibold); color: var(--ce-heading-3); }

/* Texto secundário/mudo padronizado */
.text-muted { color: var(--ce-text-muted) !important; }

/* ============================================================================
   COMPONENTE 2 — TOPBAR (refeito para bater com a referência v1.5)
   Header BRANCO sólido: sobrescreve o linear-gradient do patrocinador injetado
   por base/style.html em .topbar-header. Compacto, borda inferior fina e sutil.
   ============================================================================ */

/* Fundo branco sólido. .topbar.topbar-header (0,2,0) vence .topbar-header (0,1,0)
   de base/style.html e carrega depois -> não precisa de !important no background. */
.topbar.topbar-header {
  background-image: none;
  background-color: #FFFFFF;
  min-height: 60px;
  padding: 0.5rem 1.25rem;
  box-shadow: none !important;                /* remove a sombra pesada da classe .shadow */
  border-bottom: 1px solid var(--ce-border);  /* faixa fina/sutil, não colorida */
}

.topbar .topbar-divider {
  border-right: 1px solid var(--ce-border);
  height: 2rem;
}

/* Toggle do menu — quadrado pequeno, cinza claro, cantos arredondados */
.topbar #sidebarToggleTop {
  height: 40px;
  width: 40px;
  border-radius: 10px !important;   /* vence .rounded-circle (50% !important) */
  color: var(--ce-text-muted);
}

.topbar #sidebarToggleTop:hover {
  background-color: var(--ce-bg);
}

/* Select de Unidade (#select_filial): aparência de link discreto, sem borda
   (a borda:none já vem do <style> do head; aqui só afinamos o visual). */
#select_filial {
  background-color: transparent;
  font-weight: var(--ce-fw-semibold);
  padding-left: 0;
}

/* Ano e mantenedor: caixa com borda leve e altura compacta */
#troca_ano_letivo,
#troca_mantenedor {
  height: 38px;
  padding: 0.25rem 0.6rem;
  font-size: var(--ce-fs-body);
}

/* Nome do usuário + avatar */
.topbar .nav-item.dropdown #userDropdown {
  color: var(--ce-text);
  font-weight: var(--ce-fw-regular);
}

.topbar .img-profile {
  height: 32px;
  width: 32px;
}

/* Header agora é branco -> ícones/links escuros legíveis (antes eram claros
   para o header colorido). Sobrescreve o #d1d3e2 de cubo-escolar.css. */
.topbar.navbar-light .navbar-nav .nav-item .nav-link {
  color: var(--ce-text);
}

.topbar .nav-item .nav-link .custom-icon {
  color: var(--ce-text-muted);
}

.topbar .nav-item .nav-link:hover .custom-icon {
  color: var(--ce-text);
}

/* Dropdown do usuário (#userDropdown) */
.dropdown-menu[aria-labelledby="userDropdown"] {
  border-radius: var(--ce-radius);
  box-shadow: var(--ce-shadow-xl);
  border: 1px solid var(--ce-border);
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item {
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: var(--ce-fs-body);
  transition: background-color var(--ce-transition), color var(--ce-transition);
}

.dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item:hover {
  background-color: var(--ce-bg);
}

/* Item "Sair" (último do menu) em vermelho */
.dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item:last-child,
.dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item:last-child i {
  color: var(--ce-danger-text);
}

.dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item:last-child:hover {
  background-color: var(--ce-danger-soft-bg);
  color: var(--ce-danger-soft-tx);
}

.dropdown-menu[aria-labelledby="userDropdown"] .dropdown-divider {
  border-top-color: var(--ce-border);
}

/* ============================================================================
   COMPONENTE 3 — SIDEBAR (#accoradionSidebar) (refeito p/ bater com a referência)
   Fundo SÓLIDO na cor do patrocinador (remove o gradiente de base/style.html).
   Largura ~270px, itens compactos alinhados à esquerda, texto branco,
   chevron p/ BAIXO quando fechado, hover translúcido visível sobre o sólido.
   ============================================================================ */

/* Fundo sólido — remove o linear-gradient de .bg-gradient-primary (só na sidebar).
   #accoradionSidebar.bg-gradient-primary (1,1,0) vence .bg-gradient-primary (0,1,0). */
#accoradionSidebar.bg-gradient-primary,
.sidebar.sidebar-dark.bg-gradient-primary {
  background-image: none;
  background-color: var(--primary, #4B5563);
}

/* Largura da sidebar (sincronizada com --cubo-sidebar-w do COMPONENTE 13). */
.sidebar {
  width: var(--cubo-sidebar-w, 300px);
}

/* Itens ocupam a largura toda, alinhados à esquerda (não centralizados como no SB Admin) */
.sidebar .nav-item .nav-link {
  width: auto;
  text-align: left;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  transition: background-color var(--ce-transition), color var(--ce-transition);
}

.sidebar .nav-item .nav-link span {
  font-size: 0.9rem;
  display: inline;
}

.sidebar .nav-item .nav-link i {
  font-size: 1.05rem;
}

/* Hover visível sobre o fundo sólido (base/style.html usava a própria cor sólida,
   que ficaria invisível). Mesma especificidade + carrega depois -> vence. */
.sidebar-dark .nav-item .nav-link:hover,
.sidebar .nav-item .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 10px;
}

/* Grupos do menu (btn-menu) — texto branco semibold, compacto, SEM bloco de fundo */
#menu_id .btn-menu {
  border-radius: 10px;
  padding: 0.5rem 1rem;
  font-weight: var(--ce-fw-semibold);
  font-size: 0.9rem;
  transition: background-color var(--ce-transition), color var(--ce-transition);
}

#menu_id .btn-menu:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Chevron para BAIXO quando fechado; gira p/ cima ao abrir o grupo */
#menu_id .btn-menu .bi-caret-down-fill {
  transition: transform var(--ce-transition);
}

#menu_id .btn-menu:not(.collapsed) .bi-caret-down-fill {
  transform: rotate(180deg);
}

/* Espaçamento vertical compacto; separador entre grupos bem sutil (translúcido) */
#menu_id .menu-item {
  margin-bottom: 0.15rem;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

#menu_id .collapse .nav-item,
#menu_id .collapsing .nav-item {
  margin-bottom: 0;
}

/* Estado "ativo" visual (classe .act dormente) — realce translúcido, não a cor sólida */
.sidebar .nav-item .nav-link.act,
#menu_id .btn-menu.act {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: var(--ce-fw-semibold);
  border-radius: 10px;
}

.sidebar .nav-item .nav-link.act i,
#menu_id .btn-menu.act i {
  color: #fff;
}

/* Campo de busca do menu (menu.html) */
.menu-search-hint {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.7rem;
}

#menu_search_input {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

#menu_search_input:focus {
  background-color: #FFFFFF;
}

/* Rodapé da sidebar — logo CUBO pequena, à esquerda, discreta */
#bycubo .text-center {
  text-align: left !important;   /* vence .text-center (!important do Bootstrap) */
}

#bycubo img {
  width: 130px !important;       /* vence o width=200 inline do <img> */
  height: auto;
  opacity: 0.85;
}

/* ============================================================================
   COMPONENTE 4 — BOTÕES
   Preserva a recoloração dinâmica de .btn-primary/.btn-outline-primary/.btn-link
   (base/style.html). Ajusta forma/padding/sombra e define danger/success fixos.
   ============================================================================ */

.btn {
  border-radius: var(--ce-radius);
  padding: 0.45rem 1rem;
  font-weight: var(--ce-fw-medium);
  transition: background-color var(--ce-transition), border-color var(--ce-transition),
              color var(--ce-transition), box-shadow var(--ce-transition);
}

.btn-sm {
  border-radius: var(--ce-radius-sm);
  padding: 0.3rem 0.65rem;
}

.btn-lg {
  border-radius: 14px;
}

/* Leve elevação no hover (exceto botões-link, que são planos) */
.btn:not(.btn-link):hover {
  box-shadow: var(--ce-shadow);
}

/* Botão de perigo — cores fixas do design system */
.btn-danger {
  background-color: var(--ce-danger);
  border-color: var(--ce-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
  background-color: var(--ce-danger-text);
  border-color: var(--ce-danger-text);
}

/* Botão de sucesso — cores fixas do design system */
.btn-success {
  background-color: var(--ce-success);
  border-color: var(--ce-success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
  background-color: var(--ce-success-hover);
  border-color: var(--ce-success-hover);
}

/* Ações de tabela (reg_ponto_geral) — padrão "ghost" */
.btn-option,
.btn-option-h,
.btn-option-e {
  background-color: transparent;
  border: none;
  border-radius: var(--ce-radius-sm);
  padding: 0.35rem 0.5rem;
  color: var(--ce-text-muted);
  transition: background-color var(--ce-transition), color var(--ce-transition);
}

.btn-option:hover,
.btn-option-h:hover,
.btn-option-e:hover {
  background-color: rgba(37, 99, 235, 0.08);
  color: var(--primary, var(--ce-info-fallback));
}

/* ============================================================================
   COMPONENTE 5 — TABELAS (.table.table-hover dentro de .table-responsive)
   Sobrescreve o th/hover de base/style.html pela ordem de carregamento.
   ============================================================================ */

.table-responsive {
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius);
  background: var(--ce-surface);
}

.table {
  color: var(--ce-text);
  margin-bottom: 0;
}

/* Cabeçalho escuro com texto branco */
.table thead th,
.table-bordered thead th {
  background-color: var(--ce-table-head-bg);
  color: var(--ce-table-head-text);
  border-color: var(--ce-table-head-bg);
  font-weight: var(--ce-fw-semibold);
  font-size: var(--ce-fs-body);
  padding: 0.85rem 1rem;
  vertical-align: middle;
}

/* Células com respiro padronizado */
.table tbody td,
.table tbody th {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-color: var(--ce-border);
}

/* Zebra sutil */
.table-hover tbody tr:nth-of-type(even) {
  background-color: var(--ce-table-zebra);
}

/* Hover azul/cinza claro (sobrescreve o hover cinza de base/style.html) */
.table-hover tbody tr:hover {
  background-color: var(--ce-table-row-hover);
  color: var(--ce-text);
}

/* ============================================================================
   COMPONENTE 6 — PAGINAÇÃO (components/pagination.html)
   Mantém a cor dinâmica de .page-link / .page-item.active (base/style.html).
   Ajusta apenas forma, espaçamento e estados de hover/disabled.
   ============================================================================ */

.pagination {
  gap: 0.25rem;
}

/* Radius em todos, inclusive first/last (que o Bootstrap arredonda só nas pontas) */
.pagination .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  border-radius: var(--ce-radius-sm);
  border: 1px solid var(--ce-border);
  margin-left: 0;
  min-width: 38px;
  text-align: center;
  transition: background-color var(--ce-transition), border-color var(--ce-transition),
              color var(--ce-transition);
}

.pagination .page-link:hover {
  background-color: var(--ce-bg);
  border-color: var(--ce-border);
}

/* Itens desabilitados (prev/next/ellipsis usam <li class="disabled">) */
.pagination .disabled .page-link,
.pagination .page-item.disabled .page-link {
  color: var(--ce-disabled);
  background-color: transparent;
  border-color: var(--ce-border);
  cursor: not-allowed;
}

/* ============================================================================
   COMPONENTE 7 — FORMULÁRIOS (crispy + manuais)
   Não altera o HTML gerado pelo Crispy (é no Python), só o CSS.
   Preserva o foco de select de base/style.html por ordem/especificidade.
   ============================================================================ */

.form-control,
.form-select,
.custom-select,
.textinput,
.textInput,
textarea.form-control {
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius-sm);
  color: var(--ce-text);
  transition: border-color var(--ce-transition), box-shadow var(--ce-transition);
}

.form-control-sm,
.form-select-sm,
.custom-select-sm {
  border-radius: var(--ce-radius-sm);
}

/* Foco: anel azul + borda na cor do patrocinador */
.form-control:focus,
.form-select:focus,
select.form-select:focus,
.custom-select:focus,
.textinput:focus,
.textInput:focus,
textarea.form-control:focus {
  border-color: var(--primary, var(--ce-info-fallback));
  box-shadow: var(--ce-focus-ring);
  outline: none;
}

.form-control::placeholder {
  color: var(--ce-text-muted);
}

/* Labels */
.form-group label,
.col-form-label,
label.form-label {
  font-size: var(--ce-fs-label);
  font-weight: var(--ce-fw-medium);
  color: var(--ce-label);
}

/* Estados desabilitado / somente-leitura */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.custom-select:disabled {
  background-color: #F1F5F9;
  color: var(--ce-text-muted);
}

/* Estados de erro (validação) */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--ce-danger);
}

.invalid-feedback,
.text-danger {
  color: var(--ce-danger-text) !important;
}

/* Select2 — alinhar borda/radius ao restante dos campos */
.select2-container--bootstrap .select2-selection,
.select2-container--default .select2-selection {
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius-sm);
}

/* ============================================================================
   COMPONENTE 8 — MODAIS
   Overlay padrão do Bootstrap 4 mantido. Só forma/sombra/estrutura interna.
   Não altera data-toggle/data-dismiss nem o fluxo de caller-id de #confirmDeleteModal.
   ============================================================================ */

.modal-content {
  border: none;
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-xl);
}

.modal-header {
  border-bottom: 1px solid var(--ce-border);
  padding: 1.1rem 1.5rem;
}

.modal-header .modal-title {
  font-size: var(--ce-fs-h3);
  font-weight: var(--ce-fw-semibold);
  color: var(--ce-text);
}

.modal-body {
  padding: 1.5rem;
  color: var(--ce-text);
}

.modal-footer {
  border-top: 1px solid var(--ce-border);
  padding: 1rem 1.5rem;
  gap: 0.5rem;
}

/* Evita que os botões do footer herdem a margem negativa padrão do BS4
   agora que usamos gap */
.modal-footer > * {
  margin: 0;
}

/* ============================================================================
   COMPONENTE 9 — TOASTS (toastr)
   Apenas CSS das classes do toastr. Não toca na config JS nem nas chamadas.
   ============================================================================ */

#toast-container > div {
  border-radius: var(--ce-radius);
  box-shadow: var(--ce-shadow-xl);
  opacity: 1;
}

.toast-success {
  background-color: var(--ce-success);
}

.toast-error {
  background-color: var(--ce-danger);
}

.toast-warning {
  background-color: var(--ce-warning-alt);
}

.toast-info {
  background-color: var(--primary, var(--ce-info-fallback));
}

.toast-title {
  font-weight: var(--ce-fw-semibold);
}

.toast-close-button {
  color: #fff;
  opacity: 0.9;
  text-shadow: none;
}

/* ============================================================================
   COMPONENTE 10 — BADGES
   Padrão pílula. Status de ponto viram pílulas suaves (fundo claro + texto
   escuro da mesma cor). Usa especificidade maior p/ vencer o <style> de tela.
   ============================================================================ */

.badge {
  border-radius: var(--ce-radius-pill);
  font-weight: var(--ce-fw-medium);
  padding: 0.35em 0.7em;
}

/* Contador de notificações — mantém vermelho sólido (legibilidade sobre a
   topbar), só ajusta para pílula. */
.badge-counter {
  border-radius: var(--ce-radius-pill);
}

/* Status de ponto (span.status-* vence o .status-* do <style> da tela) */
span.status-na-hora,
span.status-atrasado {
  display: inline-block;
  padding: 0.25em 0.7em;
  border-radius: var(--ce-radius-pill);
  font-weight: var(--ce-fw-semibold);
  font-size: 0.8rem;
  line-height: 1.4;
}

span.status-na-hora {
  background-color: var(--ce-success-soft-bg);
  color: var(--ce-success-soft-tx);
}

span.status-atrasado {
  background-color: var(--ce-danger-soft-bg);
  color: var(--ce-danger-soft-tx);
}

/* ============================================================================
   COMPONENTE 11 — LOADING
   Mantém o cubo 3D (identidade visual). Só ajusta cores/radius do overlay e
   do loadAlert. Especificidade acima do <style> do partial (sem !important).
   ============================================================================ */

/* Overlay do cubo — fundo padronizado + leve desfoque */
body #loading-overlay {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
}

/* Cubo 3D mantido; só suaviza o raio das faces (cor continua --primary) */
#loading-cube .cube-face {
  border-radius: 6px;
}

/* Caixa do loadAlert() — radius/sombra/borda novos (bg alert-primary mantido) */
body #id_loadAlert {
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-xl);
  border: 1px solid var(--ce-border);
}

#id_loadAlert .spinner-border {
  color: var(--primary, var(--ce-info-fallback));
}

/* ============================================================================
   COMPONENTE 12 — EMPTY STATES
   Cor cinza padronizada, sem ilustração. Classe utilitária opcional +
   mensagem de vazio do DataTables (alvo global real, ex.: #DocumentosDataTable).
   ============================================================================ */

/* Classe utilitária opcional para telas adotarem em "Nenhum registro..." */
.empty-state {
  color: var(--ce-text-empty);
  font-size: var(--ce-fs-body-lg);
  text-align: center;
  padding: 2rem 1rem;
}

/* Mensagem de vazio gerada pelo DataTables */
td.dataTables_empty,
.dataTables_empty {
  color: var(--ce-text-empty);
  font-size: var(--ce-fs-body-lg);
  text-align: center;
  padding: 2rem 1rem;
}

/* ============================================================================
   COMPONENTE 13 — LAYOUT: header de largura TOTAL + sidebar ABAIXO do header
   ----------------------------------------------------------------------------
   Referência v1.5: a faixa branca (header) ocupa 100% da largura, por cima de
   tudo; a sidebar (roxa) começa ABAIXO do header, à esquerda.

   Como o header (.topbar.topbar-header) fica fixo (position:fixed; width:100%),
   ele passa a ocupar a largura total do viewport INDEPENDENTE de estar aninhado
   dentro de #content — não é preciso recortar o bloco do <nav> no HTML.
   O logo foi movido para dentro do header (.header-brand) via HTML.

   A altura real do header é sincronizada em runtime por cubo-escolar.js, que
   escreve --cubo-header-h. O valor abaixo é apenas o fallback inicial.
   ============================================================================ */

:root {
  --cubo-header-h: 92px;
  --cubo-sidebar-w: 300px;   /* largura da sidebar (evita cortar opções longas) */
}

/* Header: faixa branca fixa, largura total, por cima da sidebar */
.topbar.topbar-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1045;                 /* acima da sidebar; abaixo dos modais (1050+) */
  margin-bottom: 0 !important;   /* neutraliza o mb-4 herdado do HTML */
  /* Linha separadora na cor do menu lateral (primária), no lugar da borda cinza */
  border-bottom: 2px solid var(--primary, #4B5563);
}

/* Empurra todo o corpo (conteúdo) para baixo do header fixo */
#wrapper {
  padding-top: var(--cubo-header-h);
}

/* Sidebar inicia abaixo do header e ocupa o restante da altura da tela.
   A largura é aumentada (via --cubo-sidebar-w) para não cortar as opções,
   e a margem do conteúdo acompanha para não sobrepor. */
@media (min-width: 768px) {
  .sidebar {
    top: var(--cubo-header-h);
    height: calc(100vh - var(--cubo-header-h));
    min-height: 0;
    width: var(--cubo-sidebar-w) !important;   /* vence o 16rem !important do SB Admin */
  }

  #wrapper #content-wrapper {
    margin-left: var(--cubo-sidebar-w);
  }

  /* Área das opções e rodapé acompanham a largura da sidebar
     (antes ficavam travados em 16rem, gerando faixa azul vazia). */
  .menu-cubo {
    width: 100%;
    max-width: var(--cubo-sidebar-w);
    white-space: normal; /* libera o nowrap que travava o conteúdo em 16rem */
  }

  #bycubo {
    width: var(--cubo-sidebar-w);
  }

  .sidebar .nav-item .nav-link {
    width: 100%;
    max-width: none;
  }

  .sidebar .nav-item .nav-link span {
    white-space: normal;
    word-break: break-word;
  }
}

/* Canto superior DIREITO da sidebar arredondado (encaixe sob o header) */
#accoradionSidebar {
  border-top-right-radius: 16px;
}

/* Sidebar colapsada: SOME por completo (não vira miniatura de ícones).
   Sobrescreve o comportamento do SB Admin 2 que, no desktop (>=768px),
   deixava a sidebar em 6.5rem. */
@media (min-width: 768px) {
  .sidebar.toggled {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Sem a sidebar, o conteúdo ocupa toda a largura disponível */
  body.sidebar-toggled #content-wrapper {
    margin-left: 0 !important;
  }
}

/* Transição suave ao recolher/expandir (a sidebar desliza para a esquerda e o
   conteúdo acompanha, em vez de sumir instantaneamente). */
.sidebar {
  transition: width 0.25s ease;
}

#wrapper #content-wrapper {
  transition: margin-left 0.25s ease;
}

/* Logo da escola dentro do header (movido da sidebar) — fixo, não colapsa */
.topbar-header .header-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: calc(var(--cubo-header-h) - 24px);
  max-width: 170px;
}

.topbar-header .header-brand img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* Toggle da sidebar: visível também no desktop (o d-md-none foi removido no HTML).
   O tamanho/raio já vêm de "COMPONENTE 2 — TOPBAR" (.topbar #sidebarToggleTop). */
.topbar-header #sidebarToggleTop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}