/*
|--------------------------------------------------------------------------
| YOUTUBE BB RANK
| COMPONENTS CSS
|--------------------------------------------------------------------------
| Componentes reutilizados por páginas administrativas.
| As regras estão limitadas às páginas que já utilizavam estes estilos.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| SUMMARY CARDS - VIDEOS
|--------------------------------------------------------------------------
*/

.videos-page .summary-card {
    padding: 16px;
    background: #19191f;
    border: 1px solid #292932;
    border-radius: 9px;
}

.videos-page .summary-label {
    color: #777;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 7px;
}

.videos-page .summary-value {
    font-size: 22px;
    font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| SUMMARY CARDS - SYNC LOGS
|--------------------------------------------------------------------------
*/

.sync-logs-page .summary-card {
    padding: 15px 18px;
    background: #19191f;
    border: 1px solid #292932;
    border-radius: 9px;
}

.sync-logs-page .summary-label {
    color: #777;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sync-logs-page .summary-value {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| ADMIN PAGE CONTAINERS
|--------------------------------------------------------------------------
| Largura partilhada pelas páginas que já usavam este mesmo valor.
| Mantém os seletores limitados às páginas migradas.
|--------------------------------------------------------------------------
*/

.channel-analysis-page .container,
.channels-page .container,
.sync-logs-page .container,
.videos-page .container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

/*
|--------------------------------------------------------------------------
| FORM CONTROLS - CHANNELS
|--------------------------------------------------------------------------
| Mantém as dimensões e cores originais da página Canais.
*/

.channels-page input,
.channels-page select {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    background: #101014;
    color: #fff;
    border: 1px solid #34343d;
    border-radius: 7px;
    outline: none;
}

.channels-page input:focus,
.channels-page select:focus {
    border-color: #666674;
}

/*
|--------------------------------------------------------------------------
| FORM CONTROLS - SYNC LOGS
|--------------------------------------------------------------------------
| Mantém as dimensões originais da página Sync Logs.
*/

.sync-logs-page input,
.sync-logs-page select {
    min-height: 40px;
    padding: 9px 11px;
    background: #101014;
    color: #fff;
    border: 1px solid #34343d;
    border-radius: 7px;
    outline: none;
}

/*
|--------------------------------------------------------------------------
| TABLE WRAPPERS
|--------------------------------------------------------------------------
| Estrutura visual comum às páginas Canais e Vídeos.
*/

.channels-page .table-wrapper,
.videos-page .table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: #19191f;
    border: 1px solid #292932;
    border-radius: 10px;
}

/*
|--------------------------------------------------------------------------
| ALERT MESSAGES - CHANNELS
|--------------------------------------------------------------------------
| Estilos das mensagens de sucesso e erro, limitados à página Canais.
*/
.channels-page .message {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 8px;
    background: #183b22;
    border: 1px solid #285f37;
    color: #b8f5c7;
}

.channels-page .error {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 8px;
    background: #421b1b;
    border: 1px solid #713131;
    color: #ffbcbc;
}

/*
|--------------------------------------------------------------------------
| FILTER BUTTONS - SYNC LOGS
|--------------------------------------------------------------------------
| Regras limitadas à página de registos de sincronização.
*/
.sync-logs-page .btn-filter,
.sync-logs-page .btn-clear {
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 7px;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sync-logs-page .btn-filter {
    background: #e7e7e7;
    color: #111;
    border: 0;
    font-weight: 600;
}

.sync-logs-page .btn-clear {
    background: #292933;
    color: #fff;
    border: 1px solid #3b3b47;
}

/* ==========================================================
   COMPONENTES PARTILHADOS: CARTÕES
   Aplicar .bb-card a novos cartões. Os seletores existentes
   são normalizados também nas folhas public-pages/admin-pages.
   ========================================================== */
.bb-card {
    min-width: 0;
    background: var(--bb-card-bg, #111923);
    border: 1px solid var(--bb-card-border, #293443);
    border-radius: var(--bb-card-radius, 16px);
    box-shadow: var(--bb-card-shadow, 0 8px 24px rgba(0, 0, 0, .12));
}
.bb-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px var(--bb-card-padding, 18px);
    border-bottom: 1px solid var(--bb-card-divider, rgba(148, 163, 184, .14));
}
.bb-card__body { min-width: 0; padding: var(--bb-card-padding, 18px); }
.bb-card__label {
    color: var(--bb-text-muted, #9aa8ba);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .035em;
}
.bb-card__value {
    margin-top: 8px;
    color: #f5f7fa;
    font-size: clamp(24px, 2.3vw, 34px);
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}
.bb-card__note { margin-top: 6px; color: var(--bb-text-muted, #9aa8ba); font-size: 11px; line-height: 1.45; }