/* Global styles */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    /* Define um fundo cinza muito claro.  Após a aplicação do tema premium
       solicitou‑se um fundo um pouco mais escuro do que o azul clarinho anterior.
       Utilizamos #e4e7ec, que fica perceptivelmente mais sóbrio sem perder a leveza da página. */
    background-color: #e4e7ec;
}

/* Centraliza o conteúdo nas tabelas de histórico e administração.  Isso aplica
   alinhamento horizontal centralizado para cabeçalhos e células de dados
   nas tabelas que utilizam a classe history-table, garantindo consistência
   visual na página de administração de usuários. */
.history-table th,
.history-table td {
    text-align: center;
}

/* Centraliza o conteúdo de formulários dentro das células de tabela.  As
   tabelas da página de administração utilizam formulários em várias
   colunas (por exemplo, alteração de plano, dias restantes e análises
   restantes).  Sem este estilo, os controles ficam alinhados à
   esquerda.  Aplicando flexbox com centralização, garantimos que
   inputs e botões fiquem centralizados dentro da célula. */
.history-table td form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

/* Alinha o texto das células da tabela de administração ao centro.
   Alguns elementos como spans ou divs internos podem estender a largura
   total da célula e causar alinhamento à esquerda.  Utilizamos
   margin: 0 auto para centralizar elementos em bloco e ajustar
   a distribuição de espaço. */
.history-table td > * {
    margin-left: auto;
    margin-right: auto;
}

.history-table th {
    text-align: center !important;
}

/* Exibe mensagens de erro de datas (e outras) centralizadas abaixo de inputs. */
.date-error {
    display: block;
    text-align: center;
    width: 100%;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Header navigation */
nav {
    /*
     * Keep the top navigation bar visible when the user scrolls the page.
     * Using sticky instead of fixed allows the bar to behave like a normal
     * element until it hits the top of the viewport, at which point it
     * sticks there. This achieves a persistent header without the side
     * effects of a permanently fixed element.
     */
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Altera a cor da barra de navegação para um azul mais escuro.
       Isso proporciona contraste adicional e diferencia a versão premium da plataforma. */
    background-color: #003366;
    color: #fff;
    /* Reduce padding so the blue bar is narrower above/below the logo */
    /* We want the bar as compact as possible while still fitting the logo (65px). */
    /* Reduce top/bottom padding to 2px and drop the min-height to match the logo height. */
    padding: 2px 0;
    /* Set the minimum height equal to the logo height (55px) for a slimmer bar */
    min-height: 55px;
    display: flex;
    align-items: center;
}

nav .logo {
    /* Position the logo normally within the flex container so it stays on the left.
       Align it with the main content area instead of flush to the viewport edge.
       On wide screens the left margin is half of the unused width, matching the
       right margin applied to the navigation list.  On smaller screens this
       calculation collapses to zero so the logo remains near the edge. */
    position: static;
    margin-left: calc((100% - 1000px) / 2);
    margin-right: 0;
    top: auto;
    left: auto;
    transform: none;
}

/* Ensure the logo image scales appropriately and fits the narrower bar */
nav .logo img {
    /* Reduce the logo height to make it less prominent on the header */
    height: 55px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Align the navigation items with the right edge of the main content area */
    margin-left: auto;
    margin-right: calc((100% - 1000px) / 2);
    display: flex;
    gap: 15px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: #fff;
    font-weight: 500;
}

nav ul li a.active {
    border-bottom: 2px solid #fff;
}

/* Popup */
/*
 * Estilos base para popups.  Unificamos o visual de todos os popups (temporários ou
 * de confirmação) para seguirem o mesmo padrão: fundo branco, texto escuro e
 * botões com borda azul e fundo branco.  A posição fixa centraliza o popup
 * na tela e a sombra oferece destaque.  O container serve como base para
 * mensagens breves ou confirmações.
 */
/*
 * Estilização base para todos os pop-ups da plataforma.  Os pop-ups são
 * centralizados na tela com fundo branco e texto azul, seguindo o
 * padrão visual solicitado.  O contêiner usa `position:fixed` para
 * permanecer no centro independentemente do scroll, com sombra e
 * cantos arredondados.  Para mensagens de erro utilize a classe
 * adicional `.error-popup` para substituir as cores.
 */
.popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    /* Include the WebKit-prefixed transform before the standard one to improve
       compatibility with older Safari versions. */
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fff;
    /* Texto padrão em azul para pop-ups informativos.  O tom #0066cc
       segue as cores já utilizadas em botões e links no site. */
    color: #0066cc;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.popup-content p {
    margin: 0;
    font-weight: bold;
}

/*
 * Aplica estilização consistente aos botões dentro de popups.  Os botões são
 * exibidos com fundo branco, texto azul e borda azul.  Na interação hover,
 * o fundo muda para um tom suave de azul claro.  Aplica margens para
 * espaçamento uniforme.
 */
.popup-container button,
.popup-container .btn {
    background-color: #fff;
    color: #0066cc;
    border: 1px solid #0066cc;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin: 4px;
    text-decoration: none;
    display: inline-block;
}
.popup-container button:hover,
.popup-container .btn:hover {
    background-color: #e6f0ff;
}

/*
 * Unifica o estilo dos botões em popups dentro de .popup-overlay.  Usamos o mesmo
 * padrão de fundo branco, texto azul e borda azul para botões de confirmação
 * em sobreposições (popup-overlay).  Isso garante consistência visual entre
 * popups modais e temporários, sem depender de classes específicas como
 * btn-primary ou btn-secondary.  Em hover, aplicamos um leve azul.
 */
.popup-overlay button,
.popup-overlay .btn {
    background-color: #fff;
    color: #0066cc;
    border: 1px solid #0066cc;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin: 4px;
    text-decoration: none;
    display: inline-block;
}
.popup-overlay button:hover,
.popup-overlay .btn:hover {
    background-color: #e6f0ff;
}


/* Container */
.container {
    max-width: 1000px;
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Forms */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

form label {
    font-weight: bold;
}

form input[type="text"],
form input[type="password"],
form input[type="number"],
form input[type="email"],
form input[type="date"],
form textarea,
form select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* Center text values by default across the platform */
    text-align: center;
    /*
     * Force all input elements within forms to occupy the full available
     * width. Without an explicit width, browsers size inputs based on
     * attributes like the maximum value, resulting in some numeric fields
     * (e.g., FC Média/Máxima) rendering much narrower than others. A
     * uniform width eliminates these inconsistencies and keeps all fields
     * aligned.
     */
    width: 100%;
    /*
     * Mobile fix: when inputs are width:100% and also have padding/border,
     * some browsers render them slightly wider than the container, which
     * visually “gruda” o campo na borda direita.
     * box-sizing garante que padding/borda entrem no cálculo da largura.
     */
    box-sizing: border-box;
}

/* Override the text alignment for forms or containers marked as exclude-center.  These pages (Dados Pessoais, Saúde, Bicicleta, Plano de Treinamento) should keep left-aligned inputs. */
.exclude-center input[type="text"],
.exclude-center input[type="password"],
.exclude-center input[type="number"],
.exclude-center input[type="email"],
.exclude-center input[type="date"],
.exclude-center input[type="time"],
.exclude-center textarea,
.exclude-center select {
    text-align: left;
    /* Garante que bordas e padding estejam incluídos no cálculo da largura,
       evitando que os campos ultrapassem a largura do contêiner.  Sem
       box-sizing:border-box, a largura 100% definida nos inputs faria
       com que a soma da largura do conteúdo, padding e borda estourasse
       o limite do contêiner, resultando em overflow horizontal como
       observado na página de dados pessoais. */
    box-sizing: border-box;
}

/*
 * Utility class to center form labels and ensure a consistent alignment across
 * both desktop and mobile views. When a form element has the class
 * "centered-form", all labels inside it will stretch across the full width
 * available and their text will be centered. This helps align names of
 * fields, comments and associated values uniformly on the Dados da Bicicleta
 * and Editar Dados Pessoais pages.
 */
.centered-form label {
    display: block;
    width: 100%;
    text-align: center;
}

/*
 * Oculta os botões de incremento/decremento padrão dos campos numéricos.  Os
 * navegadores exibem pequenas setinhas em inputs type="number" que não são
 * desejadas para os formulários de treino. Esses seletores são removidos
 * para uma experiência de digitação mais consistente.
 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

form button,
button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #0066cc;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s;
}

form button:hover,
button:hover {
    background-color: #0052a3;
}

/*
 * Reusable button styles
 *
 * We apply a base "btn" class that gives an anchor or button the appearance
 * of a clickable button. Additional colour classes (btn-primary, btn-danger,
 * btn-success) override the background colour for different semantic
 * actions. Hover states are also defined per colour. This makes it easy
 * to style links as buttons consistently across the application.
 */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    background-color: #0066cc; /* default blue */
    color: #fff;
    font-size: 0.9em;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

/*
 * Disabled buttons
 *
 * Some admin screens render a <span> styled as a button to show a
 * non-clickable status (ex.: "Expirado"). These elements must not show
 * the hand cursor and must ignore hover/click interactions.
 */
.btn.disabled,
.btn:disabled,
.btn[disabled] {
    opacity: 0.75;
    cursor: default;
    pointer-events: none;
}

.btn.disabled:hover,
.btn:disabled:hover,
.btn[disabled]:hover {
    /* Keep the same background when disabled (no hover effect) */
    filter: none;
}

.btn:hover {
    background-color: #0052a3;
}

/* Primary action button (default blue) */
.btn-primary {
    background-color: #0066cc;
}

.btn-primary:hover {
    background-color: #0052a3;
}

/*
 * Classe utilitária para padronizar a largura dos botões de filtro de
 * zonas (relatórios). Define uma largura mínima para acomodar o texto
 * mais longo e centraliza o conteúdo. É aplicada nos botões de filtros
 * de zonas e no botão de geração de gráfico na página de relatórios.
 */
.uniform-width-btn {
    /*
     * Define a largura mínima para acomodar o texto mais longo dos botões de
     * filtros e ações na página de relatórios.  Também impede que os
     * botões se estiquem para preencher toda a largura disponível em
     * containers flexíveis (por exemplo, formulários com flex-direction: column).
     */
    min-width: 180px;
    text-align: center;
    /* Não permita que o botão se expanda para preencher toda a largura */
    width: auto;
    /* Alinha o botão ao centro no eixo cruzado quando utilizado em um
       contêiner flexível com flex-direction: column. */
    align-self: center;
}

/*
 * Botões grandes para ações destacadas na página de relatórios. Aplica um
 * tamanho de fonte maior e preenchimento extra para os botões "Analisar Evolução"
 * e "Gerar Gráfico", tornando-os mais visíveis ao usuário. A classe pode
 * ser combinada com outras (btn, btn-primary) para preservar a cor.  Para
 * adaptar o tamanho em dispositivos menores, consideramos proporções
 * proporcionais.
 */
/* Large buttons: slightly larger font and padding for emphasis */
.btn-lg {
    font-size: 1.25em;
    padding: 14px 28px;
}

/* Provide extra emphasis for the primary action buttons on the reports page */
#analyze-evolution-button,
#generate-chart-button {
    font-weight: bold;
}

/* Centralize labels inside advanced filters for reports page */
/* Centralize labels inside advanced filters for reports page */
/* Use class selector rather than id since the filters container has class="advanced-filters" */
.advanced-filters label {
    text-align: center;
    display: block;
    /* Reduz o tamanho da fonte e remove o negrito dos rótulos dos filtros avançados
       na página de Relatórios. */
    font-weight: normal;
    font-size: 12px;
}

/* Rodapé comum para todas as páginas */
/*
 * Rodapé comum para todas as páginas.
 * A barra azul na parte inferior deve possuir a mesma altura da barra de navegação.
 * Para isso definimos uma altura mínima de 65px (mesma altura do logo/nav) e
 * utilizamos flexbox para centralizar verticalmente o conteúdo.  O texto é
 * exibido em branco sobre fundo azul e está centralizado horizontalmente.
 */
/*
 * Estilização do rodapé: removemos a tarja azul para deixar apenas as frases.
 * O rodapé agora possui fundo transparente, texto escuro e alinhamento
 * centralizado.  O espaçamento vertical é reduzido para uma aparência mais
 * compacta, preservando a separação dos textos.  Links no rodapé usam a cor
 * padrão de links da aplicação.
 */
.site-footer {
    margin-top: 40px;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.9em;
    color: #333;
    background-color: transparent;
    min-height: 0;
}

.site-footer a {
    color: #0066cc;
    text-decoration: underline;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* Danger action button (red) */
.btn-danger {
    background-color: #cc0000;
}

.btn-danger:hover {
    background-color: #a30000;
}

/* Success action button (green) */
.btn-success {
    background-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
}

/* Secondary action button (gray) */
.btn-secondary {
    background-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Warning/status button (orange) - used for non-clickable "Expirado" status */
.btn-warning {
    background-color: #ff9800;
    color: #fff;
}

.btn-warning:hover {
    background-color: #e68a00;
    color: #fff;
}

/* Warning action button (orange) */
.btn-warning {
    background-color: #ff9800;
    color: #fff;
}

.btn-warning:hover {
    background-color: #e68a00;
}

/* Orange action button (used for canceling subscription) */
.btn-orange {
    background-color: #ff9800;
    color: #fff;
}

.btn-orange:hover {
    background-color: #e68a00;
}

/*
 * Data table styling for FIT import results.  Center-align both header and
 * data cells to improve readability and consistent alignment.  Without this
 * rule, headers may default to right alignment and values to left alignment.
 */
.data-table th,
.data-table td {
    text-align: center;
}

/*
 * Center-align the header and data cells of the bikes list table.  The
 * bikes page uses a table with class "bike-table" to display nickname,
 * model, wheel size and actions.  Without explicit alignment the
 * default left alignment makes the columns appear misaligned.  This
 * rule aligns all header (th) and data (td) cells within a bike-table
 * to the center, ensuring consistent spacing across columns.
 */
.bike-table th,
.bike-table td {
    text-align: center;
}

/* Alternância de tonalidade e separação das linhas na lista de bicicletas
 * Replicamos o layout da página de histórico (lista de treinos), aplicando
 * um fundo claro nas linhas pares e uma linha de separação inferior em
 * todas as linhas para realçar a divisão entre os registros.
 */
.bike-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
}

.bike-table tbody tr:nth-child(even) {
    background-color: #f9fbff;
}

/*
 * Fit import table: fix the column widths so that the two columns occupy
 * equal space and the content of each cell is centered within that space.
 */
.data-table {
    width: auto;
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;
}

/* Equalize button sizes in the user administration table */
.history-table .btn {
    padding: 6px 12px;
    font-size: 0.8em;
}

/* Error pop-up style: red-themed on white background for simple alerts */
.error-popup {
    background-color: #f8d7da;
    color: #721c24;
}

/*
 * Destaque para o termo "Gratuito" em páginas de contratação.  A tag
 * recebe um contorno vermelho claro e um leve preenchimento para
 * assemelhar-se a um botão sem ocupar toda a largura.  Use em
 * elementos inline (por exemplo, <span class="free-highlight">) para
 * destacar textos dentro de parágrafos.
 */
.free-highlight {
    display: inline-block;
    padding: 2px 8px;
    /* Borda vermelha suave para chamar a atenção sem lembrar um erro */
    border: 2px solid #f5b5b5;
    border-radius: 4px;
    /* Fundo levemente rosado para realçar a tarja sem preencher totalmente */
    background-color: #fdf2f2;
    color: #c0392b;
    font-weight: bold;
}

/* Reduz a largura do botão "Apagar Filtros" no relatório.  Ao aplicar
 * display:inline-block e largura automática, o botão não ocupa a
 * largura completa do contêiner de filtros avançados.  Também
 * centralizamos o botão no contêiner para alinhar com outros controles. */
.clear-filters-container {
    display: flex;
    justify-content: center;
    /* Faça o contêiner ocupar todas as colunas disponíveis do grid.  Ao
       configurar grid-column para abranger da primeira à última
       coluna, o botão "Apagar Filtros" fica centralizado no
       contexto de toda a área de filtros avançados, em vez de
       alinhar-se apenas dentro de uma célula específica. */
    grid-column: 1 / -1;
}
.clear-filters-container button {
    /* Use largura intrínseca (max-content) para que o botão ocupe apenas
       o espaço do texto interno.  Isso impede que o botão se expanda
       para preencher toda a célula do grid. */
    width: max-content;
    display: inline-block;
}

/* Container for grouping multiple action buttons together */
.training-actions {
    /*
     * Mantém os botões em linha, com espaçamento entre eles. Para a versão
     * mobile e desktop desejada, adicionamos uma margem superior para
     * separar os botões do bloco de informações do treino.
     */
    display: flex;
    gap: 8px;
    margin-top: 5px;
}

/*
 * Tornamos os botões do histórico um pouco menores para obter um visual mais clean.
 * Esta regra reduz o padding e o tamanho da fonte dos botões dentro de
 * .training-actions, sem afetar botões em outras partes do site.
 */
.training-actions .btn {
    padding: 6px 12px;
    font-size: 0.8em;
}

/* Table/list */
.training-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.training-list li {
    /*
     * Ajuste de estilo para os itens da lista de treinos. Em vez de alinhar
     * as informações e os botões lado a lado, empilhamos as informações
     * (título, data, distância, origem) e os botões em linhas separadas.
     */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
}

/* Popup overlay and content styles */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Default popup content styles; override for popup-container vs popup-overlay */
.popup-content {
    /* We'll set generic styles here; actual background is determined by context below */
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* When popup-content is inside a popup-container (e.g., loading or error popups),
   inherit the container's background and color rather than using white. */
.popup-container .popup-content {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
    padding: 0;
}

/* When popup-content is inside a popup-overlay (e.g., full-screen overlay popups),
   keep the white background and default text color for readability. */
.popup-overlay .popup-content {
    background-color: #fff;
    /* Usa o mesmo tom de azul dos pop-ups padrões para o texto das
       sobreposições modais.  Isso mantém a consistência visual entre
       diferentes tipos de pop‑ups. */
    color: #0066cc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

.popup-content button {
    margin-top: 15px;
}

.training-list li:nth-child(even) {
    background-color: #f9fbff;
}

/*
 * Alternância de tonalidade nas listas de análises de evolução (usuário e admin).
 * As páginas de listagem de análises utilizam contêineres com as classes
 * .analysis-list ou .analysis-history-list.  Cada análise é um bloco <div>
 * consecutivo.  Aplicamos um fundo mais claro nas divs de índice par
 * (segunda, quarta, etc.) para melhorar a legibilidade.
 */
.analysis-list > div:nth-child(even),
.analysis-history-list > div:nth-child(even) {
    background-color: #f9fbff;
}

/*
 * Alternância de tonalidade nas linhas dos cadastros e relatórios.
 * A maior parte das tabelas da área administrativa (planos, cupons,
 * relatório financeiro, etc.) utilizam a classe history-table e
 * ficam dentro de uma section-content. Para estas tabelas, aplicamos
 * um fundo mais claro nas linhas pares usando nth-child.  O
 * seletor #users-section é excluído explicitamente desta regra porque
 * a tabela de usuários contém linhas ocultas que interferem na
 * contagem de nth-child; a alternância neste caso é controlada via
 * JavaScript.
 */
/* Aplica listras de fundo nas tabelas dentro de seções administrativas */
/*
 * Regra geral: qualquer tabela com a classe history-table terá listras
 * alternadas em suas linhas para melhorar a legibilidade.  A cor de
 * fundo mais clara (#f9fbff) é aplicada às linhas pares.  Esta regra
 * se aplica a todas as tabelas de histórico e administração.  A
 * exclusão da tabela de usuários é tratada abaixo.
 */
.history-table tbody tr:nth-child(even) {
    background-color: #f9fbff;
}

/*
 * Remove a alternância para a tabela de usuários.  Por conter linhas
 * ocultas (novos planos), o nth-child pode causar listras fora de
 * ordem.  Utilizamos JavaScript para aplicar listras corretas.
 */
/* Remove a alternância padrão para a tabela de usuários; a coloração é aplicada via JS */
#users-section .history-table tbody tr:nth-child(even) {
    background-color: transparent;
}

/*
 * Linhas listradas calculadas via script na tabela de usuários. A classe
 * .striped é aplicada dinamicamente através de JavaScript para garantir
 * que somente as linhas visíveis sejam consideradas na alternância.  A
 * cor segue a mesma do restante das tabelas listradas (#f9fbff).
 */
#users-section .history-table tbody tr.striped {
    background-color: #f9fbff;
}

/*
 * Centraliza os itens da lista de treinos selecionados na página de
 * relatórios. Ao usar a classe reports-training-list no <ul>,
 * aplicamos alinhamento central tanto ao item de lista quanto ao
 * conteúdo interno para que os treinos fiquem centralizados.
 */
.reports-training-list li {
    align-items: center;
}

.reports-training-list li > div {
    text-align: center;
    width: 100%;
}

.search-bar {
    margin-bottom: 15px;
}

/* Search form styling: align input and button horizontally */
.search-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

/*
 * Ajustes para o formulário de busca da página de Histórico: alinhar
 * rótulos e campos verticalmente (como na página de Relatórios) para
 * aproximar as legendas dos inputs. Essas classes serão aplicadas no
 * markup da página de histórico.
 */
.search-form .date-fields {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.search-form .date-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Login page */
.login-background {
    background-image: url('/images/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Use altura mínima em vez de altura fixa para permitir que formulários
       altos sejam exibidos completamente em telas menores.  O valor 100vh
       serve apenas como tamanho mínimo e a página pode crescer conforme
       necessário sem cortar o conteúdo. */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    /* Alinha o conteúdo ao início no eixo vertical para que, em telas
       pequenas, seja possível rolar até o final do formulário em vez de
       cortar o topo.  Um pequeno padding superior adiciona respiro. */
    align-items: flex-start;
    padding-top: 20px;
}

.login-container {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 350px;
    /* Limita a altura máxima do contêiner de login/cadastro para que
       ele nunca ultrapasse 85% da altura da tela, permitindo uma
       pequena rolagem interna quando o conteúdo for maior.  Reduzimos
       levemente a altura máxima em relação à versão anterior para
       garantir que a parte inferior do cartão fique visível frente à
       imagem de fundo, permitindo um espaço de respiro acima e abaixo. */
    max-height: 85vh;
    overflow-y: auto;
}

.login-container h2 {
    margin-top: 0;
    text-align: center;
    margin-bottom: 20px;
}

/*
 * O formulário de cadastro utiliza a classe centered-form para alinhar os rótulos ao centro.
 * Essa regra centraliza o texto das labels e garante que ocupem toda a largura do contêiner,
 * evitando que o nome do campo seja cortado em telas menores.
 */
.centered-form label {
    text-align: center;
    display: block;
    width: 100%;
    /* Adiciona margem superior apenas ao primeiro rótulo do formulário para evitar
       que o texto fique colado no título em telas muito estreitas */
    margin-top: 8px;
}

/*
 * Garante que os campos do tipo date no formulário de cadastro também
 * tenham o texto centralizado.  Sem essa regra, alguns navegadores
 * alinham o texto de data à esquerda, destoando dos demais campos.
 */
.centered-form input[type="date"] {
    /*
     * O campo de data no formulário de cadastro deve alinhar o valor no
     * centro, mas não precisa ocupar toda a largura do contêiner. A
     * largura forçada a 100% tornava o input muito grande em relação
     * aos demais campos do formulário. Ao removermos a largura
     * explícita, deixamos que o navegador ajuste de forma natural,
     * mantendo apenas a centralização do texto.  */
    text-align: center;
}

/* Responsive */
@media (max-width: 600px) {
    nav {
        flex-direction: column;
        align-items: center;
    }
    /* Center the logo and reset its positioning on mobile */
    nav .logo {
        position: static;
        transform: none;
        margin-bottom: 10px;
        /* Remove the calculated margin on mobile so it's centered */
        margin-left: 0;
    }
    nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        /* Reset margins so the list is centered */
        margin-left: 0;
        margin-right: 0;
        margin-top: 10px;
        gap: 10px;
    }
    .container {
        margin: 15px;
        padding: 15px;
    }
}
/* Centered menu for main menu buttons */
.centered-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.centered-menu li {
    /* Make each item take full width and center its content */
    width: 100%;
    display: flex;
    /* Override the default column layout from .training-list li */
    flex-direction: row;
    /* Center content both horizontally and vertically */
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Centered actions: used to center groups of buttons or forms horizontally */
.centered-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Ajusta margens internas das seções de importação para reduzir o espaço
   entre o título (h3) e o parágrafo subsequente nas páginas de importação */
.centered-actions h3 {
    /* Reduz o espaçamento inferior do título */
    margin-bottom: 8px;
}
.centered-actions p {
    /* Remove a margem superior para aproximar o texto do título */
    margin-top: 0;
}
/* Ensure forms and links inside a centered-actions container don't stretch full width */
.centered-actions form,
.centered-actions a {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Row layout for import selection buttons: places file upload + extract button and manual import button side by side */
.button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

/* Mobile-only menu link shown on small screens */
.mobile-menu-link {
    display: none;
    margin-bottom: 10px;
    text-align: center;
}
@media (max-width: 600px) {
    .mobile-menu-link {
        display: inline-block;
    }

    /* Ajustes responsivos para o formulário de relatórios
       Para telas pequenas, os filtros de relatório devem ser empilhados verticalmente
       e alinhados à esquerda. Cada campo ocupará 100% da largura disponível. */
    .reports-form {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .reports-form > div {
        width: 100%;
    }
}
/* Spinner for loading popup */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #0066cc;
    animation: spin 1s ease infinite;
    margin: 10px auto;
}

/* Ensure the "Extrair Dados" button in the import page matches the manual button size */
#image-upload-form .btn {
    width: auto;
    display: inline-block;
}

/* Override default button behaviour inside image upload form to prevent full-width stretching */
#image-upload-form button {
    width: auto;
    display: inline-block;
}

/* Specific class to ensure the "Extrair Dados" button stays the same size as other buttons */
.extract-button {
    width: auto !important;
    display: inline-block !important;
    /* Prevent flex containers from stretching this button and center it within its container */
    flex: 0 0 auto !important;
    align-self: center !important;
}

/* ------------------------------------------------------------------ */
/* Relatórios: melhorias de layout para filtros e gráficos
 *
 * O formulário de relatórios contém campos de data e filtros avançados.
 * Para organizar melhor os filtros e reduzir a sensação de poluição visual,
 * aplicamos um layout flexível nos itens do formulário e usamos CSS Grid
 * para a área de filtros avançados. Cada par rótulo/campo fica em uma
 * coluna mínima de 200px (150px em telas pequenas), distribuindo os
 * elementos horizontalmente quando houver espaço disponível.  O botão
 * para mostrar/ocultar filtros avançados continua a controlar a
 * propriedade display via JavaScript; quando visível, a área usa
 * display:grid ao invés de flex.  O estilo adicional para o formulário
 * foi adicionado aqui para que possa ser reaproveitado em todas as telas.
 */
/* Formulário de relatórios: organizado verticalmente e centralizado na página.
 * Ajustamos a direção para coluna e centralizamos o conteúdo, limitando a
 * largura máxima para que os campos fiquem próximos uns dos outros,
 * semelhante à exibição utilizada na página de histórico. */
/* Ajuste de layout para formulário de relatórios.
 * Empilha os elementos verticalmente, centraliza o conjunto e controla
 * melhor o espaçamento entre eles.  A largura máxima garante que os
 * campos não se espalhem demais na tela. */
.reports-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
    /* Adiciona um padding horizontal para equilibrar a margem esquerda e direita
       do formulário dentro do contêiner principal.  Isso impede que os campos
       encostem na borda em layouts maiores. */
    padding: 0 12px;
}

/* Cada contêiner interno do formulário ocupará pelo menos 200px e poderá
   crescer para preencher a linha. Isso permite que vários campos
   (como datas e botões) apareçam lado a lado em telas grandes. */
/* Cada grupo de campo dentro do formulário ocupa 100% da largura do contêiner,
 * permitindo que o layout se adapte melhor ao empilhamento vertical. */
.reports-form > div {
    width: 100%;
}

/* Contêiner dos filtros avançados: será oculto por padrão via style
   inline, mas quando visível passa a utilizar grid para distribuir os
   pares rótulo/campo em múltiplas colunas. A definição de display:grid
   precisa estar no CSS para funcionar corretamente ao trocar display via JS. */
/* Filtros avançados (relatórios)
 * Ajustamos a largura das colunas para 150px em vez de 200px para que, mesmo
 * com a largura máxima definida no formulário (400px), pelo menos duas
 * colunas sejam exibidas lado a lado.  Isso evita que todos os campos
 * fiquem empilhados verticalmente e mantém o botão "Apagar Filtros"
 * estreito, com tamanho proporcional ao seu conteúdo.  O grid continua
 * responsivo e se adapta para mais colunas em telas maiores. */
.advanced-filters {
    /* O contêiner de filtros avançados deve ocupar apenas o espaço necessário
       para os campos (fit-content) e ser centralizado automaticamente dentro
       do formulário.  Isso impede que as colunas encostem na borda direita
       quando há poucas colunas e distribui o espaço livre igualmente nas
       laterais.  Definimos max-width como 100% para que o grid não estoure
       o limite do formulário em telas pequenas. */
    /* Ajustamos a largura para ocupar quase todo o espaço disponível no formulário, deixando
       uma margem fixa de 8px em cada lado.  Isso reduz a margem esquerda exagerada
       observada em dispositivos móveis e mantém um espaçamento consistente nas
       bordas esquerda e direita.  O margin:auto foi removido para evitar
       centralização excessiva, e a largura será calculada subtraindo a
       margem total do contêiner pai. */
    /* O contêiner ocupa apenas o espaço necessário (fit-content) e é
       centralizado automaticamente dentro do formulário.  Isso garante que
       as duas colunas fiquem centradas no contêiner e que as margens
       esquerda e direita sejam iguais.  Definimos um limite máximo de
       100% para impedir que o grid ultrapasse a largura do formulário. */
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    /* Reduzimos um pouco a largura mínima das colunas para que os campos
       não fiquem colados uns aos outros e às bordas.  Também aumentamos o espaçamento
       (gap) e adicionamos padding interno na área para afastar os inputs das extremidades. */
    /* Ajuste das colunas para garantir espaçamento equilibrado em ambos os lados. Aumentamos
       a largura mínima para 150px para melhorar o alinhamento dos campos e evitar que
       o conteúdo fique excessivamente comprimido em telas maiores. */
    /* Utiliza duas colunas de largura igual (min 150px cada) para garantir que
       os campos ocupem o espaço disponível de forma equilibrada e permitam
       ajustar-se ao conteúdo. O valor minmax define uma largura mínima de
       150px e permite que cada coluna cresça uniformemente. */
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 14px;
    /* Centraliza as colunas de filtros avançados dentro do contêiner para que
       o espaço livre seja distribuído igualmente à esquerda e à direita.  Sem
       esta propriedade, o grid alinha os itens ao início, fazendo parecer
       que os campos estão mais próximos da borda direita em telas estreitas. */
    /* Centraliza as colunas de filtros avançados dentro do contêiner */
    justify-content: center;
    /* Padding simétrico para afastar os campos das bordas do contêiner */
    padding: 0 10px;
}

/* Os elementos internos da área de filtros avançados ficam empilhados
   verticalmente: rótulo em cima, campo embaixo. Isso evita que rótulo
   e input fiquem lado a lado quando a grade distribuir os contêineres. */
.advanced-filters div {
    display: flex;
    flex-direction: column;
    /* Centraliza rótulo e campo dentro de cada célula para que o texto
       fique alinhado com o campo logo abaixo.  Isso proporciona um
       visual mais harmônico, com cada coluna centralizada. */
    align-items: center;
    /* Mantém um leve padding horizontal para que os campos não fiquem
       colados entre si nem nas bordas da célula.  O valor reduzido de 4px
       contribui para diminuir a largura total necessária e facilita a
       disposição em duas colunas. */
    padding: 0 4px;
}

/* Layout adaptado para telas menores: o formulário empilha todos os itens
   verticalmente e reduz a largura mínima das colunas de filtros avançados. */
@media (max-width: 600px) {
    .advanced-filters {
        /* Reduz a largura mínima das colunas em telas pequenas para evitar que
           os campos se encostem.  Mantemos o grid responsivo. */
        /* Em telas menores, utilizamos duas colunas iguais com largura mínima
           menor para garantir que ambas caibam lado a lado.  Cada coluna
           terá ao menos 120px e crescerá conforme o espaço disponível. */
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        /* O contêiner ocupa quase toda a largura, deixando uma margem fixa
           de 8px em cada lado para evitar encostar nas bordas. */
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }
}

/* Grid para checkboxes de métricas do gráfico: distribui as opções em
   várias colunas para melhor visualização e leitura. */
#chart-form > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

/* ------------------------------------------------------------------ */
/* Ajustes específicos para o campo de seleção de bicicleta na página de relatórios
 * A seleção de bicicleta deve ter largura semelhante aos campos de data e
 * seu rótulo deve ficar centralizado acima do select.  Sem estas
 * configurações, o select ocupa a largura total do contêiner, ficando
 * desproporcional em relação aos campos "Data Inicial" e "Data Final".
 */

/* Organiza o grupo da bicicleta em coluna e centraliza os elementos */
.reports-form .bike-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Centraliza o rótulo "Bicicleta" dentro do grupo */
.reports-form .bike-group label {
    text-align: center;
    width: 100%;
    display: block;
}

/* Limita a largura do select de bicicleta e a torna proporcional aos campos de data */
.reports-form .bike-group select {
    width: 100%;
    max-width: 200px;
}

/* Ajuste visual para campos de data na página de relatórios
 * Garante que o rótulo fique acima do campo de entrada e que ambos
 * sejam alinhados à esquerda (sem ocupar toda a largura disponível).
 */
.reports-form .date-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Contêiner que agrupa os campos de data (Data inicial e Data final) na
 * página de relatórios.  Usamos coluna e centralização para aproximar
 * os campos verticalmente, tal como acontece na página de Histórico. */
.reports-form .date-fields {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Centraliza as seções de seleção de todos os treinos, botão de filtros e
 * botão de envio no formulário de relatórios.  Isso alinha
 * checkbox, texto explicativo e botões ao centro, seguindo o layout da
 * página de Histórico. */
.reports-form .select-all-container,
.reports-form .toggle-filters-container,
.reports-form .submit-container {
    text-align: center;
    width: 100%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.button-group {
    display: flex;
    gap: 10px;
    align-items: center;
    /* Center the button group horizontally within its container */
    justify-content: center;
}

/*
 * Style for anchor elements that behave as buttons (e.g. "Voltar" links).  We adjust
 * the padding and font-size to match the .btn class so that "Voltar" and "Salvar"
 * buttons have the same dimensions.  Previously these values were larger (10px
 * padding and 1em font size), causing the anchor buttons to appear oversized.
 */
/*
 * Ajuste de estilo para os links que funcionam como botões (por exemplo, "Voltar").
 * Aqui definimos padding e outras propriedades iguais às aplicadas aos botões
 * normais via .btn e ao estilo aplicado em .button-group. Assim, âncoras e
 * botões têm exatamente as mesmas dimensões e aparência.
 */
.button-link {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #0066cc;
    color: #fff;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
    text-align: center;
}

.button-link:hover {
    background-color: #0052a3;
    text-decoration: none;
}

/* Ensure buttons in button-group have consistent sizing */
.button-group button,
.button-group .button-link {
    /* Match padding on both elements */
    padding: 10px 20px;
    /* Ensure both elements behave similarly in the flex container */
    display: inline-block;
    text-align: center;
}


/* Generic table styling used in history and admin pages */
.history-table {
    width: 100%;
    border-collapse: collapse;
}

.history-table th,
.history-table td {
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

.history-table th {
    background-color: #f0f4ff;
    font-weight: 600;
}

/* Simple responsive behaviour for narrow screens: allow horizontal scroll on tables */
.table-responsive {
    overflow-x: auto;
}

/*
 * Tabela de histórico de pagamentos: garante largura mínima e centraliza
 * conteúdo.  Em dispositivos mobile, a largura mínima provoca a
 * ativação da barra de rolagem horizontal fornecida por .table-responsive,
 * evitando sobreposição de colunas.  Em telas maiores ela ocupa toda a
 * largura disponível do contêiner.
 */
.payment-history-table {
    width: 100%;
    min-width: 700px;
    table-layout: auto;
}
.payment-history-table th,
.payment-history-table td {
    text-align: center;
    padding: 8px;
}

/*
 * Estilização para os textos de análise (tanto individuais quanto de evolução).
 * Limita a largura máxima a 42 caracteres (aprox. 42ch) para evitar que
 * palavras longas ultrapassem o contêiner.  A propriedade
 * `white-space: pre-wrap` preserva quebras de linha existentes, enquanto
 * `overflow-wrap: break-word` e `hyphens: auto` permitem quebrar
 * palavras longas com hífen quando necessário.  Ajustamos também o
 * alinhamento para justificado e centralizamos o bloco na página.
 */
.analysis-pre {
    white-space: pre-wrap;
    font-family: inherit;
    /*
     * Permite que o texto da análise ocupe toda a largura do contêiner na versão
     * desktop.  Anteriormente, a largura era limitada a 42 caracteres (42ch),
     * resultando em uma coluna estreita que simulava a visualização mobile.
     * A remoção dessa restrição, combinada com width: 100%, garante que o
     * conteúdo seja exibido de ponta a ponta dentro do contêiner.  A
     * justificação é mantida para distribuir uniformemente o texto.
     */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: justify;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/*
 * Ajuste de fonte para descrições de filtros nas análises de evolução.
 * A sequência de treinos filtrados pode ser extensa (por exemplo,
 * "31/08/2025 - 76,19 km; 01/11/2025 - 65,00 km; …"), e em telas
 * pequenas a leitura fica difícil.  Reduzimos a fonte e a altura das
 * linhas para que duas entradas completas possam caber por linha sem
 * quebrar o layout.  Utilizamos unidades relativas (rem) para
 * preservar acessibilidade; em telas maiores a fonte permanece
 * confortável, enquanto em telas menores aplicamos um tamanho ainda
 * mais reduzido via @media query.
 */
.analysis-filter-description {
    /* Reduzimos a fonte e centralizamos o texto para que a lista de treinos
       filtrados seja exibida de forma compacta e alinhada ao centro.  O
       tamanho de 0.8rem é aplicado em todas as resoluções, garantindo
       consistência visual entre o modo normal e o modo mobile. */
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: center;
}


/* Generic grid layout for admin/edit forms */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.form-grid .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Centraliza rótulos e campos verticalmente para formulários de edição */
    align-items: center;
    text-align: center;
    /* Adiciona margem inferior para espaçar grupos de campos na edição de usuários
       da área de administração.  Sem essa margem, os campos ficam colados uns
       aos outros.  Aumentamos o espaçamento para 12px para aproximar o estilo
       dos demais formulários da plataforma, deixando os campos mais soltos. */
    margin-bottom: 12px;
}

.form-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Simple alert boxes */
.alert {
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 0.9em;
}

/* ----------------------------------------------------------------------
 * Layout centralizado para títulos e conteúdo em determinadas páginas
 *
 * Todos os títulos (h2 e h3) dentro de contêineres .container são
 * centralizados por padrão para melhorar a legibilidade.  Além disso,
 * fornecemos classes utilitárias para centralizar textos, formulários
 * e listas em páginas específicas (Menu, Incluir Treino e Histórico).
 */

/* Centraliza cabeçalhos de segundo e terceiro nível dentro de containers */
.container h2,
.container h3 {
    text-align: center;
}

/* Classe utilitária para centralizar todo o conteúdo textual em um container */
.centered-content {
    text-align: center;
}

/* Em um container centralizado, os formulários devem alinhar seus itens ao centro */
.centered-content form {
    align-items: center;
}

/* Lista de treinos centralizada: itens empilhados e alinhados ao centro */
.centered-training-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.centered-training-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
}

/* Centraliza os botões de ações dentro de itens de lista centralizada */
.centered-training-list .training-actions {
    justify-content: center;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    /* Centraliza o texto das mensagens de erro para melhor legibilidade */
    text-align: center;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    /* Centraliza o texto das mensagens de sucesso */
    text-align: center;
}

/* Alert style for free plan (blue tarja) */
.alert-free {
    background-color: #d1ecf1;
    color: #0c5460;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 0.9em;
    /* Centraliza o conteúdo na tarja do plano gratuito */
    text-align: center;
}

/* Dot indicating a user is online in the admin users table */
.online-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #28a745; /* green color */
    margin-right: 6px;
}

/* Centraliza os rótulos e opções do select de planos na página de upgrade.
   Utilizamos text-align:center para o optgroup e option para garantir
   que as categorias (optgroup) e as opções individuais fiquem
   centralizadas visualmente. Adicionamos font-weight:bold ao
   optgroup para destacar as categorias dos planos. */
#plan-select option,
#plan-select optgroup {
    text-align: center;
}
#plan-select optgroup {
    font-weight: bold;
}

/* Contêiner do gráfico em Relatórios */
#chart-container {
    width: 100%;
}

/*
 * Em dispositivos móveis com largura até 600px, mantemos o contêiner do gráfico
 * ocupando toda a largura disponível da tela, sem rolagem horizontal. O canvas
 * também ocupa 100% dessa largura e, com a opção maintainAspectRatio em Chart.js,
 * a altura será ajustada automaticamente para manter a proporção 16:9. Esse
 * comportamento elimina a necessidade de barras de rolagem e exibe o gráfico
 * por completo dentro do viewport.
 */
@media (max-width: 600px) {
    #chart-container {
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #chart-container canvas {
        width: 100% !important;
    }
}

/*
 * Reduz o tamanho da fonte nos elementos <select> e suas opções em telas
 * pequenas.  Em dispositivos móveis, os textos dos planos e demais
 * seletores ficavam muito grandes, principalmente dentro de listas de
 * opções.  Ajustamos a fonte para 0.65rem quando a largura da tela é
 * inferior ou igual a 576px.  Isso afeta todos os selects e suas
 * options, incluindo os planos de assinatura exibidos em pop‑ups
 * nativos dos sistemas operacionais.
 */
@media (max-width: 576px) {
    select,
    select.form-control,
    select option,
    select optgroup {
        /* Reduz ainda mais o tamanho da fonte em telas pequenas */
        font-size: 0.65rem;
        /* Centraliza o texto dentro dos selects e suas opções */
        text-align: center;
        text-align-last: center;
    }
    /* Títulos dos grupos (optgroup) em negrito */
    select optgroup {
        font-weight: bold;
    }
    /* Cada opção individual com peso de fonte normal */
    select option {
        font-weight: normal;
    }
}

/*
 * Ajustes específicos para o seletor de planos de assinatura (id="plan-select").
 * Reduzimos ainda mais o tamanho da fonte e centralizamos o texto de todos os itens.
 * Os títulos das categorias (optgroup) permanecem em negrito para destacá-los.
 * Essas regras aplicam-se independentemente da largura da tela para garantir
 * consistência na página de assinatura premium. Em dispositivos móveis,
 * tamanhos menores facilitam a leitura na lista nativa do sistema.
 */
#plan-select,
#plan-select option,
#plan-select optgroup {
    font-size: 0.6rem;
    text-align: center;
    text-align-last: center;
}
#plan-select optgroup {
    font-weight: bold;
}
#plan-select option {
    font-weight: normal;
}

/*
 * Corrige a exibição de treinos selecionados na página de relatórios.
 * Os rótulos de seleção são aplicados via <label>, que herda font-weight:bold
 * por padrão das regras de formulário.  Aqui removemos o negrito dos textos
 * dentro desses rótulos de treinos, deixando apenas o título em negrito.
 * A primeira <span> imediatamente após o input (título do treino) recebe
 * negrito, enquanto as demais <span> (distância e data) mantêm a fonte
 * normal.  Seletores adjacentes identificam as spans subsequentes.
 */
label > input.training-checkbox + span {
    font-weight: bold;
}
label > input.training-checkbox + span + span,
label > input.training-checkbox + span + span + span {
    font-weight: normal;
}

/*
 * Ajuste adicional para os seletores de planos de assinatura em dispositivos móveis.
 * Embora existam regras gerais para inputs/selects em telas pequenas, alguns
 * navegadores móveis ignoram tamanhos de fonte definidos em <option> quando
 * apresentam um seletor nativo. Definimos explicitamente um tamanho de fonte
 * menor para o seletor de planos (#plan-select) e o seletor de cupons (#coupon-plan)
 * e seus itens quando a largura de tela for de até 768px, para melhorar
 * a consistência visual com a versão desktop.
 */
@media (max-width: 768px) {
    #plan-select,
    #plan-select option,
    #plan-select optgroup,
    #coupon-plan,
    #coupon-plan option,
    #coupon-plan optgroup {
        /* Para melhorar a legibilidade em dispositivos móveis, reduzimos o tamanho da
           fonte ainda mais e centralizamos o texto.  Utilizamos !important para
           garantir que essas regras prevaleçam sobre estilos padrão aplicados
           pelo navegador ou temas nativos. */
        font-size: 0.55rem !important;
        line-height: 1.1 !important;
        text-align: center !important;
        text-align-last: center !important;
    }
}

/*
 * Custom horizontal divider used to separate sections on the reports page.
 * The default <hr> element rendered within forms appeared as a small dot in
 * certain browsers when styled inline. Defining this reusable class ensures
 * a full‑width thin grey line that matches other section breaks.
 */
/*
 * Divisor de seções utilizado na página de relatórios.
 * Este estilo procura replicar a aparência do elemento <hr> padrão
 * utilizado em outras partes da página (por exemplo, entre as seções
 * "Treinos Selecionados", "Resumo" e "Analisar Evolução").  Anteriormente,
 * a definição dessa classe removia a margem inferior, o que gerava uma
 * separação visual diferente.  Agora definimos margens superior e
 * inferior iguais, garantindo consistência visual.  A borda superior
 * continua sendo uma linha cinza fina.
 */
.section-divider {
    border: none;
    border-top: 1px solid #ccc;
    width: 100%;
    margin: 20px 0;
}

/*
 * Ajustes responsivos para os controles de paginação.  Em dispositivos
 * móveis, a largura disponível para os botões é limitada e textos longos
 * (como "Primeira Página" ou "Última Página") podem fazer com que os
 * elementos de navegação se quebrem em várias linhas ou ultrapassem o
 * contêiner.  Para garantir que todos os controles de paginação
 * permaneçam alinhados na mesma linha em telas estreitas, reduzimos o
 * espaçamento entre eles, diminuímos o preenchimento e o tamanho da
 * fonte dos botões e do texto informativo.  Como utilizamos unidades
 * relativas (em), os valores permanecem acessíveis e se ajustam às
 * preferências do usuário.
 */
@media (max-width: 600px) {
    /* Reduz o espaçamento horizontal entre os itens da paginação */
    .pagination {
        /*
         * Utilizamos !important para sobrepor o valor de gap definido inline
         * na marcação HTML (por exemplo, style="gap:10px").  Sem o
         * modificador !important, o estilo em linha teria precedência e
         * impediria que o espaçamento fosse reduzido em telas pequenas.
         */
        gap: 5px !important;
    }
    /* Diminui o tamanho dos botões de paginação para caberem em uma
       única linha em telas estreitas. */
    .pagination .btn {
        padding: 4px 8px;
        font-size: 0.75em;
    }
    /* Ajusta o tamanho da fonte do texto informativo "Página X de Y" */
    .pagination span {
        font-size: 0.75em;
    }
}


/* ===== Reports: Select/Deselect All (mobile-friendly) ===== */
.select-deselect-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
    align-items: center;
}
.select-deselect-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
    /* Add the WebKit-prefixed user-select property before the unprefixed version
       to ensure support on Safari.  Listing the prefix first avoids
       compatibility warnings in browser DevTools. */
    -webkit-user-select: none;
    user-select: none;
}
.select-deselect-item input{
    margin: 0;
}
.select-deselect-text{
    font-weight: normal;
    line-height: 1.05;
}
.select-deselect-text .line1,
.select-deselect-text .line2{
    display: block;
}