/* ==========================================================================
   U-FIT Design System — Fonte única de verdade para cores e componentes
   Bootstrap 4.5 · dark_theme.css · custom_styles.css todos referenciam
   os tokens --ufit-* definidos aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS DE COR — modo claro (padrão)
   Para mudar qualquer cor do sistema, edite APENAS este bloco.
   -------------------------------------------------------------------------- */
:root {
    /* Superfícies */
    --ufit-bg:           #f8f9fa;   /* fundo da página */
    --ufit-surface:      #ffffff;   /* cards, modais, dropdowns */
    --ufit-surface-alt:  #e9ecef;   /* thead-light, linhas striped, badges neutros */

    /* Texto */
    --ufit-text:         #212529;
    --ufit-text-muted:   #6c757d;
    --ufit-text-subtle:  #adb5bd;

    /* Bordas */
    --ufit-border:       #dee2e6;

    /* Links */
    --ufit-link:         #007bff;

    /* Cabeçalho de tabela escuro (thead-dark) — igual nos dois modos */
    --ufit-thead-bg:     #343a40;
    --ufit-thead-border: #454d55;
    --ufit-thead-text:   #ffffff;

    /* Marca / acento forte (paginação ativa, destaque de UI) */
    --ufit-brand:        #000000;
    --ufit-brand-hover:  #343a40;

    /* Inputs em dark mode (precisa ser exposto aqui para o dark_theme.css usar) */
    --ufit-input-bg:     #ffffff;
    --ufit-input-text:   #495057;
}

/* --------------------------------------------------------------------------
   TOKENS DE COR — modo escuro
   Somente os tokens que mudam. O restante herda do :root acima.
   -------------------------------------------------------------------------- */
body.dark-mode {
    --ufit-bg:          #121212;
    --ufit-surface:     #1e1e1e;
    --ufit-surface-alt: #2a2a2a;

    --ufit-text:        #e0e0e0;
    --ufit-text-muted:  #aaaaaa;
    --ufit-text-subtle: #888888;

    --ufit-border:      #444444;

    --ufit-link:        #64b5f6;

    /* thead permanece escuro nos dois modos — sem alteração */

    --ufit-input-bg:    #2a2a2a;
    --ufit-input-text:  #e0e0e0;
}


/* ==========================================================================
   COMPONENTES — usam apenas var(--ufit-*), adaptam-se ao modo automaticamente
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CABEÇALHO DE PÁGINA (page-header)
   -------------------------------------------------------------------------- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.page-header h2 {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.page-header h2 .fas,
.page-header h2 .far,
.page-header h2 .fab {
    margin-right: 0.4rem;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .page-header h2 { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   2. BARRA DE BUSCA (search-bar)
   -------------------------------------------------------------------------- */
.search-bar {
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   3. TABELAS (ufit-table)
   -------------------------------------------------------------------------- */
.ufit-table thead {
    background-color: var(--ufit-thead-bg);
    color: var(--ufit-thead-text);
}

.ufit-table thead th {
    border-color: var(--ufit-thead-border);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ufit-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.ufit-table td.actions,
.ufit-table th.actions {
    white-space: nowrap;
    width: 1%;
}

/* --------------------------------------------------------------------------
   4. WRAPPER DE LISTAGEM (list-wrapper)
   -------------------------------------------------------------------------- */
.list-wrapper {
    background-color: var(--ufit-surface);
    border: 1px solid var(--ufit-border);
    border-radius: 0.25rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.list-wrapper .table {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. CARD DE FILTRO (filter-card)
   -------------------------------------------------------------------------- */
.filter-card {
    background-color: var(--ufit-surface);
    border: 1px solid var(--ufit-border);
    border-radius: 0.25rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.filter-card .filter-title {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    color: var(--ufit-text-muted);
}

/* --------------------------------------------------------------------------
   6. ESTADO VAZIO (empty-state-row)
   -------------------------------------------------------------------------- */
.empty-state-row td {
    text-align: center;
    padding: 2rem 1rem !important;
    color: var(--ufit-text-muted);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   7. RESPONSIVIDADE
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .hide-xs { display: none !important; }
}

@media (max-width: 768px) {
    .hide-sm { display: none !important; }
}