/* ------------------------------------------------------------------------------
 *  # Global Overrides for Bootstrap Primary Colors to match Carsoft Teal
 * ---------------------------------------------------------------------------- */

/* Primary Buttons */
.btn-primary {
    background-color: var(--occ-accent) !important;
    border-color: var(--occ-accent) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: color-mix(in srgb, var(--occ-accent) 85%, #000000) !important;
    border-color: color-mix(in srgb, var(--occ-accent) 85%, #000000) !important;
    color: #ffffff !important;
}

/* Nav Pills & Nav Tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--occ-accent) !important;
    color: #ffffff !important;
}

/* Active navigation items and arrows in header */
.nav-pills .nav-link.active .nav-item-active-indicator {
    color: #ffffff !important;
}

/* Nav Tabs Highlight & Overline Overrides — Teal (#1ca7a7) instead of Limitless Blue (#2196f3) */
.nav-tabs-highlight .nav-link:before,
.nav-tabs-highlight .nav-link.active:before,
.nav-tabs-overline .nav-link.active:before,
.nav-tabs-underline .nav-link.active:before {
    background-color: var(--occ-accent) !important;
}

/* Remove harsh black focus outlines from tab buttons */
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible,
.nav-tabs .nav-link:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Form Check Inputs Checked State */
.form-check-input:checked {
    background-color: var(--occ-accent) !important;
    border-color: var(--occ-accent) !important;
}

/* Primary background and text utilities */
.bg-primary {
    background-color: var(--occ-accent) !important;
}

.text-primary {
    color: var(--occ-accent) !important;
}

/* ------------------------------------------------------------------------------
 *  Botões de contorno e os semânticos sólidos
 *
 *  Medido em 2026-09-08, criando um botão de cada variante e lendo a cor computada:
 *  `.btn-primary` já saía teal (regra no topo deste arquivo), mas
 *  `.btn-outline-primary` saía AZUL (#0c83ff) — o mesmo "primary" com duas cores
 *  diferentes conforme fosse sólido ou vazado. O caso visível era o "Atribuir UH"
 *  da grade de reservas, que passa despercebido por nascer com display:none e só
 *  aparecer em reserva sem UH.
 *
 *  As variantes semânticas sólidas também vinham do Limitless e não dos tokens:
 *  success #059669 (e não --st-confirmada), warning #f58646 laranja (e não
 *  --st-grupo âmbar), danger fixo em #ef4444 — que é o --occ-danger do tema CLARO,
 *  aplicado também no escuro, onde o token vale #f87171.
 *
 *  Religar aqui, e não em cada tela, é o que faz valer para as 34 de uma vez.
 *  As cores de estado (--st-*) são as MESMAS do Rack e da Tabela de Ocupação:
 *  verde é confirmada, âmbar é grupo, vermelho é atraso — em qualquer tela.
 * ---------------------------------------------------------------------------- */

.btn-outline-primary {
    color: var(--occ-accent) !important;
    border-color: var(--occ-accent) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--occ-accent) !important;
    border-color: var(--occ-accent) !important;
    color: #ffffff !important;
}

.btn-outline-success {
    color: var(--st-confirmada) !important;
    border-color: var(--st-confirmada) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
    background-color: var(--st-confirmada) !important;
    border-color: var(--st-confirmada) !important;
    color: #ffffff !important;
}

.btn-outline-danger {
    color: var(--occ-danger-ink) !important;
    border-color: var(--occ-danger) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
    background-color: var(--occ-danger) !important;
    border-color: var(--occ-danger) !important;
    color: #ffffff !important;
}

/* Sólidos semânticos. O texto fica branco em todos: sobre estas superfícies
   saturadas é o que mantém o contraste nos dois temas. */
.btn-success {
    background-color: var(--st-confirmada) !important;
    border-color: var(--st-confirmada) !important;
    color: #ffffff !important;
}

.btn-warning {
    background-color: var(--st-grupo) !important;
    border-color: var(--st-grupo) !important;
    /* âmbar é claro demais para texto branco: 1,9:1. Tinta escura dá 8:1. */
    color: #3b2a06 !important;
}

.btn-danger {
    background-color: var(--occ-danger) !important;
    border-color: var(--occ-danger) !important;
    color: #ffffff !important;
}

/* Botão "voltar ao topo" — GLOBAL, vale para todas as páginas.
   app.js:301 cria o botão com a classe 'btn-secondary', que no Limitless é um
   azul-aço (#247297) fora da paleta Xenios. Mirar `.btn-to-top .btn` e não
   `.btn-secondary` porque a classe também é usada em modal-confirmacao.html.
   Neutro em repouso e accent no hover: é utilitário de navegação, não deve
   disputar atenção com a ação primária (Salvar) nem com a alça do rodapé. */
.btn-to-top .btn {
    background-color: var(--occ-surface) !important;
    border: 1px solid var(--occ-line-strong) !important;
    color: var(--occ-ink-soft) !important;
    box-shadow: var(--occ-shadow-sm) !important;
    transition: background-color var(--occ-dur) var(--occ-ease), border-color var(--occ-dur) var(--occ-ease), color var(--occ-dur) var(--occ-ease);
}

.btn-to-top .btn:hover {
    background-color: var(--occ-accent-soft) !important;
    border-color: var(--occ-accent) !important;
    color: var(--occ-accent) !important;
}

.btn-to-top .btn:focus-visible {
    outline: 2px solid var(--occ-accent);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* O foco do campo saiu daqui em 2026-09-09 para app/campo.css. Ele era global e
   !important, e esse !important era a unica razao de o form-validacao.css ter de
   repetir !important em cada linha para conseguir pintar de vermelho o campo
   reprovado no momento em que ele recebe foco. */



/* Estilos para o campo de input dentro do prompt premium */
.occ-prompt-input {
    margin-top: 10px;
    border-radius: 8px;
    border: 1px solid var(--occ-line-strong);
    background-color: var(--occ-surface) !important;
    color: var(--occ-ink) !important;
}

.occ-prompt-input:focus {
    border-color: var(--occ-accent) !important;
    box-shadow: 0 0 0 3px var(--occ-accent-soft) !important;
}
/* ==========================================================================
   Barra de Rolagem Horizontal FIXA no Topo da Tabela de Ocupação
   A barra é um div (.occ-top-scrollbar) inserido por JS dentro do <th> do cabeçalho
   de datas, que já é sticky — então a barra também fica sticky automaticamente.
   ========================================================================== */

/* A barra ocupa a largura total da célula de datas e tem altura apenas o suficiente
   para a scrollbar nativa do browser aparecer */
.occ-top-scrollbar {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    height: 8px;
    /* absolute (não relative): a barra flutua no topo do <th> sticky sem empurrar o
       cabeçalho 8px p/ baixo. Isso mantinha a área de datas mais alta que a coluna
       fixa da esquerda, quebrando a linha inferior do cabeçalho. Datas são centradas
       verticalmente, então a barra no topo não sobrepõe o texto. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    cursor: default;
    background: transparent;
    z-index: 4;
}

/* Div interno: mesma largura do conteúdo do grid para a barra poder ser arrastada */
.occ-top-scrollbar-inner {
    height: 1px;
    display: block;
}

/* Esconde a scrollbar VISUAL do corpo (mantém overflow-x funcional para scrollWidth e scrollLeft).
   A barra de cima (.occ-top-scrollbar) controla o scroll visual. */
.fc-scrollgrid-section-body .fc-scroller,
.fc-scrollgrid-section-liquid .fc-scroller {
    scrollbar-width: none;                    /* Firefox */
    -ms-overflow-style: none;                 /* IE/Edge antigos */
}
.fc-scrollgrid-section-body .fc-scroller::-webkit-scrollbar,
.fc-scrollgrid-section-liquid .fc-scroller::-webkit-scrollbar {
    display: none !important;                 /* Chrome/Safari/Edge */
}

/* Estilo premium e minimalista (6px) para o thumb da barra de rolagem no topo */
.occ-top-scrollbar::-webkit-scrollbar {
    height: 6px !important;
}

.occ-top-scrollbar::-webkit-scrollbar-track {
    background: transparent !important;
}

.occ-top-scrollbar::-webkit-scrollbar-thumb {
    background: var(--occ-line-strong) !important;
    border-radius: 8px !important;
}

.occ-top-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--occ-accent) !important;
}

/* ==========================================================================
   Rodapé fixo na base — aplica-se automaticamente a TODAS as telas.
   .content-inner (layout.css) é flex-column; a <section> de cada tela é
   sempre filho direto (layoutLogged(~{::section})), seguida do rodapé.
   Sem flex-grow aqui a <section> fica display:block e o rodapé sobe/rola
   junto com o conteúdo. Mirar por estrutura em vez de por classe = qualquer
   tela nova herda o comportamento automaticamente.
   ========================================================================== */
.content-inner > section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.content-inner > section > .content {
    flex: 1;
    min-height: 0;
}

/* Opt-out do flex-collapse acima — para telas de fluxo longo que devem crescer
   além da viewport com rolagem natural (ex.: Check-in, Lançamentos) em vez de
   ficar restritas à altura da viewport com scroll interno. Necessário porque o
   flex-collapse (display:flex + min-height:0) quebra elementos internos com
   position: sticky (ex.: card de resumo lateral).

   Sticky-footer robusto via `flex: 1 0 auto`: grow:1 estica a section para
   preencher a viewport quando o conteúdo é curto (rodapé colado na base, sem
   flutuar no meio); shrink:0 impede encolher abaixo do conteúdo, preservando a
   rolagem natural (o .content-inner rola) e os sticky internos (display:block). */
.content-inner > section.occ-page-natural-scroll {
    display: block;
    flex: 1 0 auto;
    min-height: 0;
}
.content-inner > section.occ-page-natural-scroll > .content {
    flex: initial;
    min-height: auto;
}

/* ==========================================================================
   # occConfirm - Modal de Confirmação Global Premium 2026
   ========================================================================== */

/* Efeito de desfoque no fundo ao abrir o modal */
.modal-backdrop.show {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0.4 !important;
    transition: backdrop-filter 0.3s ease;
}

.occ-confirm .modal-dialog {
    max-width: 420px;
}

.occ-confirm-box {
    background: var(--occ-surface);
    color: var(--occ-ink);
    border: 1px solid var(--occ-glass-bd);
    border-radius: var(--occ-radius);
    box-shadow: var(--occ-shadow-lg);
    overflow: hidden;
    padding: 20px 24px;
    backdrop-filter: var(--occ-glass-blur);
    -webkit-backdrop-filter: var(--occ-glass-blur);
}

.occ-confirm-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: var(--occ-ink);
}

.occ-confirm-head i {
    color: var(--occ-warn);
    font-size: 1.4rem;
}

.occ-confirm-body {
    color: var(--occ-ink-soft);
    font-size: 0.925rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.occ-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.occ-confirm-btn {
    padding: 8px 18px;
    border-radius: var(--occ-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--occ-line-strong);
    transition: all var(--occ-dur) var(--occ-ease);
}

.occ-confirm-btn--ghost {
    background: transparent;
    color: var(--occ-ink-soft);
}

.occ-confirm-btn--ghost:hover {
    background: var(--occ-surface-2);
    color: var(--occ-ink);
}

.occ-confirm-btn--go {
    background: var(--occ-accent);
    color: #fff;
    border-color: var(--occ-accent);
}

.occ-confirm-btn--go:hover {
    background-color: color-mix(in srgb, var(--occ-accent) 85%, #000000);
    border-color: color-mix(in srgb, var(--occ-accent) 85%, #000000);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--occ-accent-soft);
}
/* ── occPrompt — campos de entrada do modal premium (irmão do occConfirm) ── */
.occ-prompt-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    text-align: left;
}

.occ-prompt-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0;
}

.occ-prompt-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--occ-ink-soft);
}

/* ── SOBREESCRITA GLOBAL DE DATEPICKERS PARA MARCA CARSOFT TEAL (ZERO CORES AZUIS HARDCODED) ── */
.datepicker {
    font-family: inherit !important;
    border-radius: var(--occ-radius-sm) !important;
    border: 1px solid var(--occ-line) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    background-color: var(--occ-surface) !important;
}

.datepicker-cell.selected,
.datepicker-cell.selected:hover,
.datepicker-cell.selected:focus {
    background-color: var(--occ-accent) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}

.datepicker-cell.focused:not(.selected) {
    background-color: var(--occ-accent-soft) !important;
    color: var(--occ-accent) !important;
    border-radius: 8px !important;
}

.datepicker-cell.today:not(.selected) {
    border: 1px solid var(--occ-accent) !important;
    color: var(--occ-accent) !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}

.datepicker-cell:hover:not(.selected):not(.disabled) {
    background-color: var(--occ-accent-soft) !important;
    color: var(--occ-accent) !important;
    border-radius: 8px !important;
}

.datepicker-controls .btn:hover,
.datepicker-controls .btn:focus {
    background-color: var(--occ-accent-soft) !important;
    color: var(--occ-accent) !important;
}

/* ── SOBREESCRITA GLOBAL DE SELECT2 PARA PADRÃO XENIOS TEAL (ZERO CORES AZUIS HARDCODED) ── */
.select2-container--default .select2-selection--single {
    background-color: var(--occ-surface-2) !important;
    border: 1px solid var(--occ-line) !important;
    border-radius: var(--occ-radius-sm) !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--occ-ink) !important;
    padding-left: 0.85rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    right: 8px !important;
}

/* Desabilitado com a mesma cara do <select> nativo desabilitado (app/campo.css): as duas regras
   acima, com !important, faziam o combo travado parecer editável ao lado de um campo apagado. */
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--occ-field-off) !important;
    cursor: not-allowed;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--occ-ink-soft) !important;
}

.select2-dropdown {
    background-color: var(--occ-surface) !important;
    border: 1px solid var(--occ-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
    z-index: 99999 !important;
}

/* Tablet e celular: opção com altura de dedo (44px, o mínimo que as diretrizes de toque pedem).
   `pointer: coarse` e não largura de tela — notebook com janela estreita continua com mouse. */
@media (pointer: coarse) {
    .select2-container--default .select2-results__option {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ---------------------------------------------------------------------------
   Campo de busca do select2 (o que aparece no topo do dropdown)
   ---------------------------------------------------------------------------
   O tema desenha a lupa num `:after` do CONTAINER e abre espaco para ela com um
   `padding-left` calculado no INPUT. Um `padding` shorthand aqui zerava esse
   padding-left, e o texto digitado passava POR CIMA da lupa.

   As tres regras abaixo compartilham as medidas por variavel, de proposito: o
   recuo do texto e a posicao do icone precisam andar juntos, e separa-los foi
   exatamente o que quebrou. Mexeu numa, as outras acompanham.

   A aparencia espelha o campo Xenios (app/campo.css) — mesmo fundo, mesma borda,
   mesmo raio e o MESMO anel de foco. E a assinatura visual do site; um campo de
   busca com outro foco parece de outro sistema.
   --------------------------------------------------------------------------- */
.select2-search--dropdown {
    --xn-busca-respiro: 0.5rem;   /* entre a borda do dropdown e o campo */
    --xn-busca-pad-x: 0.75rem;    /* padding interno do campo */
    --xn-busca-icone: 1.15rem;    /* largura reservada para a lupa */

    position: relative !important;
    padding: var(--xn-busca-respiro) !important;
}

/* A lupa: discreta em repouso, acende junto com o anel de foco. */
.select2-search--dropdown:after {
    left: calc(var(--xn-busca-respiro) + var(--xn-busca-pad-x)) !important;
    color: var(--occ-ink-faint) !important;
    transition: color var(--occ-dur) var(--occ-ease) !important;
    pointer-events: none;
}

.select2-search--dropdown:has(.select2-search__field:focus):after {
    color: var(--occ-accent) !important;
}

.select2-search--dropdown .select2-search__field {
    background-color: var(--occ-surface-2) !important;
    border: 1px solid var(--occ-line) !important;
    border-radius: var(--occ-radius-sm) !important;
    color: var(--occ-ink) !important;
    /* o recuo da esquerda e o que mantem o texto fora da lupa */
    padding: 0.45rem var(--xn-busca-pad-x) !important;
    padding-left: calc(var(--xn-busca-pad-x) + var(--xn-busca-icone) + 0.4rem) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color var(--occ-dur) var(--occ-ease),
                box-shadow var(--occ-dur) var(--occ-ease),
                background-color var(--occ-dur) var(--occ-ease) !important;
}

.select2-search--dropdown .select2-search__field::placeholder {
    color: var(--occ-ink-faint) !important;
}

.select2-search--dropdown .select2-search__field:focus {
    background-color: var(--occ-surface) !important;
    border-color: var(--occ-accent) !important;
    box-shadow: 0 0 0 3px var(--occ-accent-soft) !important;
}

.select2-results__option {
    padding: 0.6rem 1rem !important;
    font-size: 0.875rem !important;
    color: var(--occ-ink) !important;
    transition: all 0.15s ease !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    background-color: var(--occ-accent-soft) !important;
    color: var(--occ-accent) !important;
    font-weight: 600 !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--occ-accent) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}