.navbar-vertical .navbar-brand-img, .navbar-vertical .navbar-brand > img {
    max-height: 100% !important;
}

.sidenav-header {
    height: 10.875rem;
}

/* Breadcrumb antigo do template — só exibido quando recebe a classe --visible */
nav ol.breadcrumb {
    display: none;
}
nav ol.breadcrumb.breadcrumb--visible {
    display: flex;
}

.navbar-vertical.navbar-expand-xs {
    max-width: 15.625rem !important;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
}

@media (min-width: 1200px) {
    .sidenav.fixed-start + .main-content {
      margin-left: 18.125rem !important;
    }
}

/* .text-xs.text-secondary, */
/* .container-fluid span.text-sm, */
/* .card-header p.text-sm, */
/* .card-body p.text-sm.ms-2, */
#BuiltByDevelopers,
#WorkWithTheRockets
{
    display: none !important;
}


.navbar-vertical .navbar-nav > .nav-item .nav-link.active .icon {
    background-image: linear-gradient(310deg,#2152ff,#21d4fd);
}

.example-hide {
    display: none !important;
}

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    /* Sem caixa de rodapé neste template: o menu ocupa o espaço restante
       abaixo do header e rola sozinho, sem número mágico de altura. */
    height: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.oblique {
  right: -40vw;
  width: 62vw;
}



/* Estilo da pesquisa */
#search-autocomplete-results {
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    /* transform: translateY(-1em); */
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    max-height: 200px;
    min-width: 100%;
    overflow-y: auto;
    display: none;
    z-index: 9998;
    top: 100%;
    border: 0px;
    margin: 0;
    overflow-y: auto;
    display: block;
}

#search-autocomplete-results.show {
    /* transform: translateY(0); */
    opacity: 1;
    visibility: visible;
    border: 1px solid #ccc;
}

#search-autocomplete-results li:hover {
    background-color: #f0f0f0;
}
#search-indicator {
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    /* transform: translateY(-1em); */
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 9997;
    top: 100%;
    border: 0px;
    margin: 0;
    overflow-y: hidden;
    display: block;
}

#search-indicator.show {
    /* transform: translateY(0); */
    opacity: 1;
    visibility: visible;
    border: 1px solid #ccc;
}

#search-autocomplete-results a:focus {
    background-color: #f0f0f0; /* Cinza claro */
    outline: none; /* Remove o contorno padrão do navegador */
}

/* Adiciona um pequeno efeito de transição para suavizar a mudança de cor */
#search-autocomplete-results a {
    transition: background-color 0.3s ease;
}



.input-group .form-control:focus {
    border-left: 1px solid #289db9 !important;
    border-right: 1px solid #289db9 !important;
}


/* menu */
.dropdown .dropdown-menu.show:before {
    top: -16px !important;
}

.alert.alert-danger {
    color: white;
}

/* Aviso amarelo legível (o alert-warning do tema é um gradiente laranja→vermelho de baixo contraste) */
.alert.alert-aviso {
    background-image: none;
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
}
.alert.alert-aviso strong {
    color: #664d03;
}

.tooltip {
    text-align: left !important;
}

/* conquistas */
.eu-tenho {
    filter: none;
}
.nao-tenho {
    filter: grayscale(100%);
    background-color: #dce0e6;
}



.category-section {
    margin-bottom: 20px;
}
.form-check {
    margin-left: 20px;
    display: flex;
    align-items: center;
}
.conquista-imagem {
    /* width: 40px;
    height: 40px; */
    margin-right: 10px;
    /*  border-radius: 50%;  */
    object-fit: cover;
}

.form-check .conquista-imagem {
    width: 40px;
    height: 40px;
}


/* Estilos do modal */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Fundo escuro */
  }

  /* Conteúdo do modal */
  .modal-content {
    background-color: white;
    margin: 15% auto; /* Alinha no centro da tela */
    padding: 20px;
    border: 1px solid #888;
    /* width: 50%; Largura do modal */
    text-align: center;
  }

  /* Botão de fechar o modal */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    cursor: pointer;
  }

  .placeholder {
    color: #fff !important;
    cursor: default !important;
  }

  .select2-container .select2-search--inline .select2-search__field {
    height: 1.5em !important;
  }

  .select2-search__field::placeholder {
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.8;
  }

  .select2-selection__rendered {
    margin-bottom: 4px !important;
  }

.modal-backdrop {
    z-index: 1050 !important;
}

/* =========================================================
 * TEMA DESBRAVADORES DIGITAIS — tokens e utilitários
 * Aditivo. Seletores escopados para não vazar para views
 * fora do escopo (cursos / aulas / seções / layouts globais).
 * =========================================================
 */
:root {
    --dd-space-1: 0.25rem;
    --dd-space-2: 0.5rem;
    --dd-space-3: 1rem;
    --dd-space-4: 1.5rem;
    --dd-space-5: 2rem;

    --dd-shadow-card: 0 2px 8px rgba(20, 20, 50, 0.06);
    --dd-shadow-card-hover: 0 4px 16px rgba(20, 20, 50, 0.10);

    --dd-radius-card: 0.75rem;
    --dd-radius-input: 0.5rem;

    --dd-title-weight: 600;
    --dd-section-label-color: #8898aa;
    --dd-section-label-size: 0.7rem;

    --dd-hover-bg: rgba(0, 0, 0, 0.03);
}

/* Page header (componente <x-page-header>) */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dd-space-3);
    margin-bottom: var(--dd-space-5);
}
.page-header .page-header__text {
    min-width: 0;
    flex: 1 1 auto;
}
.page-header .page-header__title {
    font-weight: var(--dd-title-weight);
    margin: 0;
}
.page-header .page-header__subtitle {
    color: #67748e;
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}
.page-header .page-header__actions {
    display: inline-flex;
    align-items: stretch;
    margin-left: auto;
}
/* Forms (delete/duplicate) viram itens "transparentes" do grupo.
   !important vence inline style="display:inline-block" que aparece em vários forms do projeto. */
.page-header .page-header__actions > form {
    display: inline-flex !important;
    align-items: stretch;
    margin: 0;
}
/* Botão dentro de form acompanha a altura/largura do form (que está esticado pelo flex pai) */
.page-header .page-header__actions > form > .btn {
    width: 100%;
}
/* Todos os botões internos: zera radius e remove margem entre eles */
.page-header .page-header__actions .btn {
    border-radius: 0;
    margin: 0;
}
/* Borda esquerda arredondada só no primeiro botão visível */
.page-header .page-header__actions > .btn:first-child,
.page-header .page-header__actions > form:first-child .btn {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
/* Borda direita arredondada só no último botão visível */
.page-header .page-header__actions > .btn:last-child,
.page-header .page-header__actions > form:last-child .btn {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
@media (max-width: 575.98px) {
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header .page-header__actions {
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* Barra de filtros padronizada (listagens) */
.filter-bar {
    background: #fff;
    border-radius: var(--dd-radius-card);
    box-shadow: var(--dd-shadow-card);
    padding: var(--dd-space-3);
    margin-bottom: var(--dd-space-4);
}
.filter-bar .filter-bar__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--dd-space-2);
    margin-top: var(--dd-space-2);
}

/* Card de seção de formulário */
.form-card {
    background: #fff;
    border-radius: var(--dd-radius-card);
    box-shadow: var(--dd-shadow-card);
    padding: var(--dd-space-4);
    margin-bottom: var(--dd-space-4);
}
.form-section-title {
    font-weight: var(--dd-title-weight);
    font-size: 1rem;
    margin: 0 0 var(--dd-space-3);
    padding-bottom: var(--dd-space-2);
    border-bottom: 1px solid #e9ecef;
}

/* Linha de lista (aulas / seções) */
.list-item-row {
    display: flex;
    align-items: center;
    gap: var(--dd-space-3);
    padding: var(--dd-space-3);
    background: #fff;
    border-radius: var(--dd-radius-card);
    box-shadow: var(--dd-shadow-card);
    margin-bottom: var(--dd-space-2);
    transition: box-shadow .15s ease;
}
.list-item-row:hover { box-shadow: var(--dd-shadow-card-hover); }
.list-item-row .list-item-row__body { flex: 1; min-width: 0; }
.list-item-row .list-item-row__actions {
    display: flex;
    gap: var(--dd-space-2);
    flex-shrink: 0;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--dd-space-5) var(--dd-space-3);
    color: #67748e;
}
.empty-state .empty-state__icon {
    font-size: 2.5rem;
    opacity: 0.4;
    margin-bottom: var(--dd-space-2);
}
.empty-state .empty-state__text {
    margin-bottom: var(--dd-space-3);
}

/* Sidebar — label de seção (ex: PRINCIPAL / ADMIN) */
.sidenav .nav-item.section-label {
    pointer-events: none;
    color: var(--dd-section-label-color);
    font-size: var(--dd-section-label-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1.25rem 1.5rem 0.25rem;
}

/* Sidebar — hover mais legível em itens não-ativos */
.sidenav .nav-item .nav-link:not(.active):hover {
    background-color: var(--dd-hover-bg);
}

/* Sidebar — link de Sair discreto no final */
.sidenav .nav-link.nav-link--logout {
    color: #67748e;
}
.sidenav .nav-link.nav-link--logout:hover {
    color: #344767;
    background-color: var(--dd-hover-bg);
}

/* Navbar — breadcrumb com aparência real (substitui display:none condicional) */
.navbar-main .breadcrumb.breadcrumb--visible {
    display: flex;
}

/* ============================================================
   Select2 — campo de Tags com pills coloridos
   Aplica em qualquer Select2 que tenha a classe `.select2--tag-colored`
   (adicionada por window.initTagSelect2 em layouts/app.blade.php).
   ============================================================ */

/* Container com mesmo visual dos demais form-control-sm */
.select2--tag-colored .select2-selection {
    border-radius: 0.5rem !important;
    border-color: #d2d6da !important;
    min-height: calc(1.5em + 0.5rem + 2px) !important;
    padding: 0 0.25rem !important;
    font-size: 0.875rem !important;
}
.select2--tag-colored .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.4 !important;
}
.select2--tag-colored.select2-container--focus .select2-selection,
.select2--tag-colored.select2-container--open .select2-selection {
    border-color: #35d1f5 !important;
    box-shadow: 0 0 0 0.15rem rgba(33,150,243,0.15) !important;
}

/* O chip externo recebe a cor via colorizeTagChoices(); o <span> interno
   (formatTagSelection) tem a mesma cor para servir de fallback antes do JS rodar.
   Mantemos o chip colorido para que o botão × fique sobre o mesmo fundo da tag. */
.select2--tag-colored .select2-selection__choice {
    color: #fff !important;
    border: none !important;
    border-radius: 3px !important;
    padding: 0 4px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    margin-right: 4px !important;
}
.select2--tag-colored .select2-selection__choice__display {
    color: #fff !important;
    order: 1;
}
.select2--tag-colored .select2-selection__choice__remove {
    position: static !important;
    float: none !important;
    order: 2;
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    font-weight: 700;
    text-shadow: 0 0 2px rgba(0,0,0,0.6);
    margin: 0 0 0 6px !important;
    padding: 0 2px !important;
    line-height: 1;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.select2--tag-colored .select2-selection__choice__remove > span,
.select2--tag-colored .select2-selection__choice__remove::before {
    color: #fff !important;
    line-height: 1 !important;
}
.select2--tag-colored .select2-selection__choice__remove:hover {
    color: #fff !important;
    background: rgba(0,0,0,0.2) !important;
    border-radius: 3px;
}

/* Card de curso com cor de fundo customizada: força h6, parágrafos e textos
   pequenos a herdarem a cor de texto contrastante calculada, preservando
   badges que mantêm suas próprias classes (bg-white/text-dark etc.). */
.curso-card-colorido h1,
.curso-card-colorido h2,
.curso-card-colorido h3,
.curso-card-colorido h4,
.curso-card-colorido h5,
.curso-card-colorido h6,
.curso-card-colorido p,
.curso-card-colorido .text-muted,
.curso-card-colorido .curso-meta {
    color: inherit !important;
}

/* Itens em rascunho (seções e lições não publicadas): fundo amarelado discreto,
   borda lateral âmbar e leve translucidez para distinguir do conteúdo publicado
   sem prejudicar legibilidade. Funciona em cards, list-items e linhas de tabela. */
.secao-rascunho,
.licao-rascunho {
    opacity: 0.9;
}

.card.secao-rascunho,
.list-group-item.licao-rascunho {
    background-color: #fffbea !important;
    border-left: 4px solid #f4b400 !important;
}

.card.secao-rascunho .card-header {
    opacity: 0.85;
}

tr.secao-rascunho > td,
tr.licao-rascunho > td {
    background-color: #fffbea !important;
}

tr.secao-rascunho > td:first-child,
tr.licao-rascunho > td:first-child {
    border-left: 4px solid #f4b400;
}

.badge-rascunho {
    background-color: #f4b400 !important;
    color: #1f2937 !important;
    font-weight: 600;
}

/* Listagens index: scroll apenas na horizontal */
.table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Sidebar — compacta o espaçamento entre itens para evitar scroll no menu.
   Neutraliza o pb-2 dos <li> e reduz o padding vertical dos links/labels. */
.navbar-vertical .navbar-nav .nav-item {
    padding-bottom: 0 !important;
}
.navbar-vertical .navbar-nav .nav-item .nav-link {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
.sidenav .nav-item.section-label {
    padding-top: 0.6rem;
    padding-bottom: 0.15rem;
}
.navbar-vertical .navbar-nav .nav-item.mt-3 {
    margin-top: 0.5rem !important;
}