/* ==========================================================================
   YOUTUBE BB RANK · DESIGN SYSTEM 1.0
   Dark Premium base · Sports Performance rankings · Data Intelligence admin
   ========================================================================== */

:root {
    color-scheme: dark;
    --bb-color-background: #0b0d11;
    --bb-color-surface: #12151b;
    --bb-color-surface-hover: #1b2029;
    --bb-color-surface-active: #252b36;
    --bb-color-border: #292f3a;
    --bb-color-text: #f1f3f6;
    --bb-color-text-secondary: #b0b7c3;
    --bb-color-text-muted: #7e8795;
    --bb-color-primary: #ff2028;
    --bb-color-primary-hover: #e20f18;
    --bb-color-primary-soft: rgba(255, 32, 40, .12);
    --bb-color-primary-border: rgba(255, 32, 40, .36);
    --bb-color-success-soft: rgba(34, 197, 94, .12);
    --bb-color-warning-soft: rgba(245, 158, 11, .12);
    --bb-color-danger-soft: rgba(239, 68, 68, .12);
    --bb-color-info-soft: rgba(59, 130, 246, .12);
    --bb-shadow-card: 0 8px 26px rgba(0, 0, 0, .20);
    --bb-shadow-card-hover: 0 14px 34px rgba(0, 0, 0, .30);
    --bb-transition-fast: 120ms ease;
    --bb-transition-base: 180ms ease;
    --bb-transition-slow: 260ms ease;
}

html {
    background: var(--bb-color-background);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background:
        radial-gradient(ellipse at 50% -20%, rgba(255, 32, 40, .055), transparent 42%),
        var(--bb-color-background);
    color: var(--bb-color-text);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: var(--bb-line-height-base, 1.5);
}

::selection {
    background: rgba(255, 32, 40, .32);
    color: #fff;
}

a {
    transition: color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}

button, input, select, textarea {
    font: inherit;
}

button, input[type="button"], input[type="submit"], .btn, [class*="btn-"] {
    transition:
        background-color var(--bb-transition-base),
        border-color var(--bb-transition-base),
        color var(--bb-transition-base),
        box-shadow var(--bb-transition-base),
        transform var(--bb-transition-fast);
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible {
    outline: 2px solid rgba(91, 156, 255, .95);
    outline-offset: 2px;
}

/* Shared admin chrome */
.admin-header {
    background: rgba(14, 17, 23, .92);
    border-bottom-color: rgba(255, 255, 255, .075);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.admin-header-inner {
    min-height: 72px;
    gap: 24px;
}

.admin-logo {
    letter-spacing: -.045em;
}

.admin-logo-mark {
    box-shadow: 0 5px 18px rgba(255, 32, 40, .24);
}

.admin-nav > a,
.admin-dropdown-toggle {
    border-radius: 9px;
    font-size: 13px;
    transition: background var(--bb-transition-base), color var(--bb-transition-base), border-color var(--bb-transition-base);
}

.admin-nav > a:hover,
.admin-dropdown-toggle:hover {
    background: rgba(255, 255, 255, .055);
}

.admin-nav > a.active,
.admin-dropdown-toggle.active {
    color: #fff;
    background: var(--bb-color-primary-soft);
    border-color: var(--bb-color-primary-border);
    box-shadow: inset 0 0 0 1px rgba(255, 32, 40, .035);
}

.admin-dropdown-menu {
    background: #151922;
    border-color: #303744;
    border-radius: 12px;
    padding: 7px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .42);
}

.admin-dropdown-menu a {
    border-radius: 8px;
}

.admin-dropdown-menu a.active {
    background: var(--bb-color-primary-soft);
    color: #fff;
}

/* Common page titles and data surfaces */
.admin-page h1,
.admin-page h2,
.admin-page h3 {
    letter-spacing: -.025em;
}

.admin-page h1 {
    font-weight: 800;
}

.admin-page .summary-card,
.admin-page .stat,
.admin-page .box,
.admin-page .card,
.admin-page .panel,
.admin-page .table-wrapper,
.admin-page .chart-card,
.admin-page .performance-box,
.admin-page .mini-ranking,
.admin-page .country-section,
.admin-page .top-rotation-box {
    border-color: rgba(255, 255, 255, .085);
    box-shadow: var(--bb-shadow-card);
}

.admin-page .summary-card,
.admin-page .stat,
.admin-page .box,
.admin-page .card,
.admin-page .panel,
.admin-page .performance-box,
.admin-page .mini-ranking,
.admin-page .country-section,
.admin-page .top-rotation-box {
    background-color: #12161d;
    border-radius: 14px;
}

.admin-page .summary-card:hover,
.admin-page .stat:hover,
.admin-page .card:hover {
    border-color: rgba(255, 255, 255, .15);
    box-shadow: var(--bb-shadow-card-hover);
}

.admin-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.admin-page select,
.admin-page textarea {
    background-color: #0e1117;
    color: var(--bb-color-text);
    border: 1px solid #303744;
    border-radius: 9px;
}

.admin-page input:not([type="checkbox"]):not([type="radio"]):focus,
.admin-page select:focus,
.admin-page textarea:focus {
    border-color: rgba(255, 32, 40, .68);
    box-shadow: 0 0 0 3px rgba(255, 32, 40, .11);
    outline: none;
}

.admin-page table {
    border-collapse: separate;
    border-spacing: 0;
}

.admin-page th {
    color: #aeb7c5;
    background: #171b23;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.admin-page td {
    border-color: rgba(255, 255, 255, .065);
}

.admin-page tbody tr {
    transition: background-color var(--bb-transition-fast);
}

.admin-page tbody tr:hover {
    background-color: rgba(255, 255, 255, .025);
}

.admin-page .btn-primary,
.admin-page button.primary,
.admin-page input[type="submit"] {
    box-shadow: 0 5px 16px rgba(255, 32, 40, .14);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================
   BB RANK CARD SYSTEM
   Tokens partilhados pelas páginas públicas e administrativas.
   Os layouts podem variar; a identidade visual dos cartões não.
   ========================================================== */
:root {
    --bb-card-bg: #111923;
    --bb-card-bg-raised: #141d28;
    --bb-card-border: #293443;
    --bb-card-radius: 16px;
    --bb-card-radius-sm: 12px;
    --bb-card-padding: 18px;
    --bb-card-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    --bb-card-divider: rgba(148, 163, 184, .14);
    --bb-accent: #d8ff35;
    --bb-text-muted: #9aa8ba;
}