/* ============================================================
   Tema FAP para Bootstrap 5.3 + PONTE de marcação Bootstrap 3
   ------------------------------------------------------------
   Estratégia da migração (BACKLOG itens 18–19): páginas ganham
   `$BOOTSTRAP5 = true` antes do cabecalho e passam a carregar o
   BS5. A marcação BS3 existente continua funcionando por causa
   desta ponte (painéis, btn-xs, col-xs-*, pull-right, caret,
   navbar legada) + do shim data-toggle→data-bs-* em
   aquatica-ui5.js. Novas telas usam classes BS5 nativas.
   Paleta: resultado online da FAP (ver ui/tema-fap.css).
   ============================================================ */

:root {
    --fap-azul:        #006EC3;
    --fap-azul-escuro: #0060C7;
    --fap-ciano:       #00BCD4;
    --fap-marinho:     #212331;
    --fap-marinho-2:   #393D50;
    --fap-grafite:     #3C3950;
    --fap-cinza:       #99A9B5;
    --fap-fundo:       #F4F6F7;
    --fap-borda:       #E3E8EC;
    --fap-vermelho:    #DD3333;

    /* tokens nativos do BS 5.3 */
    --bs-primary:      #006EC3;
    --bs-primary-rgb:  0, 110, 195;
    --bs-link-color:   #006EC3;
    --bs-link-color-rgb: 0, 110, 195;
    --bs-link-hover-color: #00BCD4;
    --bs-link-hover-color-rgb: 0, 188, 212;
    --bs-body-bg:      #F4F6F7;
    --bs-body-color:   #3C3950;
    --bs-border-color: #E3E8EC;
    --bs-body-font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --bs-body-font-size: .85rem;

    /* A marcacao legada usa col-* SEM .row; no BS5 o padding das colunas vem
       de --bs-gutter-x, que so a .row define - sem isto TUDO ficava colado. */
    --bs-gutter-x: 1.5rem;
}

/* ------------------------------------------------ respiro ---- */
#wrap { padding: 22px 24px 80px !important; }
h2 { margin: 4px 0 18px; }
h3 { margin: 4px 0 14px; }
.alert { padding: 12px 16px; margin-bottom: 16px; }
.btn { padding: 6px 14px; }
.btn + .btn, .btn + form, form + .btn { margin-left: 6px; }
.table > :not(caption) > * > * { padding: .5rem .65rem; }
.form-control, .form-select { min-height: 34px; padding: 6px 10px; }

h1, h2, h3, h4 { color: var(--fap-marinho); font-weight: 700; }
h2 small, h3 small { color: var(--fap-cinza); font-weight: 400; font-size: .65em; }
a { text-decoration: none; }

.btn-primary {
    --bs-btn-bg: var(--fap-azul);
    --bs-btn-border-color: var(--fap-azul-escuro);
    --bs-btn-hover-bg: var(--fap-azul-escuro);
    --bs-btn-hover-border-color: var(--fap-azul-escuro);
    --bs-btn-active-bg: var(--fap-azul-escuro);
}
.btn { font-weight: 600; }
.form-control:focus, .form-select:focus {
    border-color: var(--fap-azul);
    box-shadow: 0 0 0 2px rgba(0, 110, 195, .15);
}
.card { border-color: var(--fap-borda); box-shadow: 0 1px 3px rgba(33, 35, 49, .06); }
.card-header { background: #fff; color: var(--fap-marinho); font-weight: 600; }
.table > thead > tr > th {
    color: var(--fap-marinho);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .03em;
}
.modal-header { background: var(--fap-marinho); color: #fff; }
.modal-header .btn-close { filter: invert(1); }

/* ------------------------------------------------------------
   PONTE: navbar BS3 (menu.php inalterado) com visual FAP
   ------------------------------------------------------------ */
.navbar-default, .navbar-inverse {
    background: var(--fap-marinho);
    border: none;
    border-bottom: 3px solid var(--fap-azul);
    border-radius: 0;
    margin-bottom: 14px;
    padding: 0;
    position: relative;
    z-index: 1040; /* acima do seletor sticky (1030) */
}
.navbar .dropdown-menu { z-index: 1050; }
.navbar .container { display: flex; align-items: center; flex-wrap: nowrap; }
.navbar-header { display: flex; align-items: center; }
.navbar-header img { max-height: 40px; margin: 6px 10px 6px 0; }
.navbar-header .logo-aquatica { max-height: 34px; margin: 8px 14px 8px 0; }
.navbar-header .logo-fap { max-height: 40px; margin: 6px 10px 6px 0; }
/* botao do modo claro/escuro, no fim do menu */
#aq-tema-toggle {
    margin-left: auto;
    background: transparent;
    border: 1px solid #494C64;
    color: var(--fap-cinza);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: .8rem;
    cursor: pointer;
    align-self: center;
}
#aq-tema-toggle:hover { color: #fff; border-color: var(--fap-cinza); }
/* marcacao BS3 nao tem .navbar-expand-*: forca o estado "expandido" do BS5.
   Sem flex-basis:auto o BS5 (basis 100%) jogava o menu para uma segunda
   linha; sem position:absolute o dropdown aberto INFLAVA a barra escura. */
.navbar-collapse { display: flex !important; flex-grow: 1; flex-basis: auto; }
.navbar-nav .dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 0; }
.navbar .dropdown-toggle::after { display: none; } /* caret do BS5: fica so a do BS3 */
.navbar-nav { display: flex; flex-direction: row; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.navbar-nav > li { position: relative; }
.navbar-nav > li > a {
    display: block;
    padding: 14px 12px;
    color: var(--fap-cinza);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .02em;
}
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus { color: #fff; }
.navbar-nav > li.dropdown.show > a, .navbar-nav > li > a.show { color: #fff; background: var(--fap-azul); }
.navbar .dropdown-menu {
    background: var(--fap-marinho-2);
    border: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 20px rgba(33, 35, 49, .35);
    padding: 6px 0;
    font-size: .78rem;
}
.navbar .dropdown-menu > li > a {
    display: block;
    padding: 7px 20px;
    color: #C7D2DA;
    white-space: nowrap;
}
.navbar .dropdown-menu > li > a:hover { color: #fff; background: var(--fap-marinho); }
.navbar .dropdown-menu .divider { height: 1px; margin: 6px 0; background: #494C64; }

/* submenu BS3 (.dropdown-submenu) sob o dropdown do BS5: abre por hover */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -6px;
    border-radius: 6px;
}
.dropdown-submenu:hover > .dropdown-menu { display: block; }
.dropdown-submenu > a::after {
    content: '';
    display: inline-block;
    margin-left: 6px;
    border: 4px solid transparent;
    border-left-color: currentColor;
    vertical-align: middle;
}

/* ------------------------------------------------------------
   PONTE: utilitários e componentes BS3 usados nas telas
   ------------------------------------------------------------ */
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.text-right { text-align: right !important; }
.caret {
    display: inline-block;
    border: 4px solid transparent;
    border-top-color: currentColor;
    vertical-align: middle;
    margin-right: 4px;
}
.btn-xs { padding: 2px 8px; font-size: .72rem; border-radius: 4px; }
.btn-default { color: var(--fap-grafite); background: #fff; border: 1px solid var(--fap-borda); }
.btn-default:hover { color: var(--fap-marinho); background: var(--fap-fundo); border-color: var(--fap-cinza); }
.input-sm { padding: 3px 6px; font-size: .76rem; height: auto; }
.table-condensed > :not(caption) > * > * { padding: .25rem .4rem; }
.label {
    display: inline-block;
    padding: .2em .6em;
    font-size: 75%;
    font-weight: 700;
    color: #fff;
    border-radius: .25em;
}
.label-primary { background: var(--fap-azul); }

/* painel BS3 com cara de card BS5 */
.panel {
    background: #fff;
    border: 1px solid var(--fap-borda);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(33, 35, 49, .06);
    margin-bottom: 14px;
}
.panel-heading {
    padding: 10px 14px;
    background: #fff;
    color: var(--fap-marinho);
    font-weight: 600;
    border-bottom: 2px solid #EBEDF2;
    border-radius: 8px 8px 0 0;
}
.panel-body { padding: 12px 14px; }
.panel-primary { border-color: var(--fap-azul); }
.panel-primary > .panel-heading { background: var(--fap-azul); color: #fff; }

/* grade BS3: col-xs-* não existe no BS5 — alias para as larguras */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    position: relative;
    float: left;
    min-height: 1px;
    padding-right: 12px;
    padding-left: 12px;
}
.col-xs-1 { width: 8.3333%; }  .col-xs-2 { width: 16.6667%; }
.col-xs-3 { width: 25%; }      .col-xs-4 { width: 33.3333%; }
.col-xs-5 { width: 41.6667%; } .col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.3333%; } .col-xs-8 { width: 66.6667%; }
.col-xs-9 { width: 75%; }      .col-xs-10 { width: 83.3333%; }
.col-xs-11 { width: 91.6667%; } .col-xs-12 { width: 100%; }
/* col-md-* do BS3 era float; o BS5 usa flex apenas dentro de .row —
   fora de .row (padrão nas telas legadas) mantém o float */
:not(.row) > .col-md-1, :not(.row) > .col-md-2, :not(.row) > .col-md-3,
:not(.row) > .col-md-4, :not(.row) > .col-md-5, :not(.row) > .col-md-6,
:not(.row) > .col-md-7, :not(.row) > .col-md-8, :not(.row) > .col-md-9,
:not(.row) > .col-md-10, :not(.row) > .col-md-11, :not(.row) > .col-md-12 { float: left; }
.clearfix::after { content: ''; display: table; clear: both; }

/* seleção do evento (cabecalho.php) */
#selecao_do_evento {
    background: #fff;
    border: 1px solid var(--fap-borda);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(33, 35, 49, .06);
    padding: 18px 20px 10px;
    margin-bottom: 18px;
}
#selecao_do_evento [class*="col-"] { padding: 0 16px 10px 0; }
#wrap .select2-container { margin-bottom: 10px; }

/* o que GRUDA no topo ao rolar é o seletor de PROVA/SÉRIE (o card do
   campeonato, alto por causa dos cards de dados, rola junto com a página) */
#selecao_da_prova {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--fap-fundo);
    padding-top: 10px;
    padding-bottom: 6px;
    box-shadow: 0 6px 10px -8px rgba(33, 35, 49, .25);
}
#footer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 24px !important;
    background: #fff;
    border-top: 1px solid var(--fap-borda);
    box-shadow: 0 -1px 6px rgba(33, 35, 49, .06);
    z-index: 1020;
    font-size: .78rem;
    display: flex;
    flex-direction: row-reverse; /* créditos à direita, ações à esquerda deles */
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
#footer-acoes { display: flex; gap: 8px; align-items: center; }
#footer-acoes:empty { display: none; }
#footer .logo-swimitup { height: 20px; width: auto; display: block; }

#wrap { padding-bottom: 64px !important; }

/* cards de dados do evento (cabecalho) */
#evento_cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
#evento_cards .ev-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 92px;
    padding: 8px 14px;
    background: var(--fap-fundo);
    border: 1px solid var(--fap-borda);
    border-radius: 8px;
}
#evento_cards .ev-rotulo {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fap-cinza);
    white-space: nowrap;
}
#evento_cards .ev-valor {
    font-size: .98rem;
    font-weight: 700;
    color: var(--fap-marinho);
    line-height: 1.15;
    white-space: nowrap;
}
#evento_cards .ev-card-progresso { min-width: 170px; }
#evento_cards .ev-card-link { text-decoration: none; }
#evento_cards .ev-card-link .ev-valor { color: var(--fap-azul); }
#evento_cards .ev-card-link:hover { border-color: var(--fap-azul); }
.ev-barra {
    display: inline-block;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: #E9B4B4;
    overflow: hidden;
    margin-top: 4px;
}
.ev-barra-verde { display: block; height: 100%; background: #2E9E5B; border-radius: 3px; }

/* densidade: tela principal com muita informacao por linha */
#wrap table input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]) {
    padding: 3px 6px;
    height: 28px;
    font-size: .78rem;
    border: 1px solid var(--fap-borda);
    border-radius: 4px;
}
#wrap table select { font-size: .78rem; }
/* multiselect de recordes superados compacto */
.select2-container-multi .select2-choices {
    border: 1px solid var(--fap-borda);
    border-radius: 5px;
    background: #fff;
    min-height: 28px;
}
.select2-container-multi .select2-choices .select2-search-choice {
    background: #E9F2FA;
    border: 1px solid #CBE0F2;
    color: #0F4C81;
    border-radius: 4px;
    box-shadow: none;
    padding: 2px 6px 2px 18px;
}

/* select2 v3 legado */
.select2-container .select2-choice {
    border-color: var(--fap-borda);
    border-radius: 6px;
    background: #fff;
    color: var(--fap-grafite);
    height: 36px;
    line-height: 34px;
    padding: 0 12px;
}
.select2-container .select2-choice .select2-arrow { background: transparent; border-left: none; width: 26px; }
.select2-container .select2-choice > .select2-chosen { margin-right: 30px; }
.select2-drop { border-color: var(--fap-azul); }
.select2-results .select2-highlighted { background: var(--fap-azul); }

/* modal de página legada (substitui os window.open) */
#aqModal .modal-dialog { max-width: min(960px, 94vw); }
#aqModal .modal-content { border: none; border-radius: 10px; overflow: hidden; }
#aqModal .modal-header { padding: 12px 18px; }
#aqModal iframe { width: 100%; height: 76vh; border: 0; display: block; background: #fff; }

/* ============================================================
   MODO ESCURO (data-bs-theme="dark" no <html>, ver aquatica-ui5.js)
   A navbar ja e escura nos dois modos; aqui os tokens e as
   superficies claras trocam de lado.
   ============================================================ */
[data-bs-theme="dark"] {
    --fap-fundo:  #15171F;
    --fap-borda:  #2B2F40;
    --fap-cinza:  #8A97A5;
    --bs-body-bg: #15171F;
    --bs-body-color: #C7D2DA;
    --bs-border-color: #2B2F40;
}
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4 { color: #E8EDF2; }
[data-bs-theme="dark"] .panel,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] #selecao_do_evento,
[data-bs-theme="dark"] #footer { background: #1E2130; border-color: #2B2F40; }
[data-bs-theme="dark"] .panel-heading,
[data-bs-theme="dark"] .card-header { background: #1E2130; color: #E8EDF2; border-color: #2B2F40; }
[data-bs-theme="dark"] #selecao_da_prova { background: #15171F; }
[data-bs-theme="dark"] .table > thead > tr > th { color: #E8EDF2; border-color: #2B2F40; }
[data-bs-theme="dark"] .table > tbody > tr > td { border-color: #262A3A; }
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
[data-bs-theme="dark"] tr.resultados { background: #1A1D29 !important; }
[data-bs-theme="dark"] #wrap table input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] #wrap table select {
    background: #12141C;
    border-color: #2B2F40;
    color: #C7D2DA;
}
[data-bs-theme="dark"] #evento_cards .ev-card { background: #1A1D29; border-color: #2B2F40; }
[data-bs-theme="dark"] #evento_cards .ev-valor { color: #E8EDF2; }
[data-bs-theme="dark"] .select2-container .select2-choice,
[data-bs-theme="dark"] .select2-container-multi .select2-choices { background: #12141C; border-color: #2B2F40; color: #C7D2DA; }
[data-bs-theme="dark"] .select2-drop { background: #1E2130; color: #C7D2DA; border-color: #2B2F40; }
[data-bs-theme="dark"] .select2-results { background: #1E2130; }
[data-bs-theme="dark"] td, [data-bs-theme="dark"] tr { color: #C7D2DA; }
[data-bs-theme="dark"] .alert-warning { background: #3A3220; border-color: #57491f; color: #E8CF8C; }
[data-bs-theme="dark"] .alert-success { background: #1E3327; border-color: #2C4A38; color: #9FD9B4; }
[data-bs-theme="dark"] .alert-danger  { background: #3A2224; border-color: #5A3235; color: #E8A9A9; }
[data-bs-theme="dark"] .alert-info    { background: #1D2B3A; border-color: #2B4257; color: #A9CBE8; }
[data-bs-theme="dark"] .btn-default { background: #1E2130; border-color: #2B2F40; color: #C7D2DA; }
[data-bs-theme="dark"] .btn-default:hover { background: #262A3A; color: #fff; }

/* rodapé no modo escuro usa a variante clara da logomarca */
[data-bs-theme="dark"] #footer .logo-swimitup { content: url('../assets/images/swimitup-branco.png'); }

/* form compacto do evento (config_evento.php) */
#config-evento .form-label { margin-bottom: 2px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--fap-cinza); }
#config-evento .ce-grupo .btn { padding: 4px 10px; font-size: .76rem; }
#config-evento .form-control, #config-evento .form-select,
#config-evento .select2-container .select2-choice { font-weight: 700; color: var(--fap-marinho); }
[data-bs-theme="dark"] #config-evento .form-control,
[data-bs-theme="dark"] #config-evento .form-select,
[data-bs-theme="dark"] #config-evento .select2-container .select2-choice { color: #E8EDF2; }
#config-evento { margin-bottom: 18px; }