/*
 * YouTube BB Rank | Layout global
 * Regras estruturais comuns e seguras. O layout específico de cada página
 * continua nas folhas assets/css/pages/.
 */

:root {
    --bb-content-max: 1500px;
    --bb-content-gutter: clamp(14px, 2.4vw, 32px);
    --bb-section-gap: 24px;
    --bb-card-gap: 16px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--bb-color-text, #f1f3f6);
    background-color: var(--bb-color-background, #0b0d11);
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

img,
video {
    height: auto;
}

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

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a {
    overflow-wrap: anywhere;
}

:where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--bb-color-info, #60a5fa);
    outline-offset: 3px;
}

.admin-page {
    width: 100%;
    min-width: 0;
}

.admin-page > :first-child {
    scroll-margin-top: 88px;
}

:where(.admin-page, .dashboard, .awards-page, .rankings-page, .channel-analysis-page, .videos-page) {
    min-width: 0;
}

:where(.admin-page, .dashboard, .awards-page, .rankings-page, .channel-analysis-page, .videos-page) :where(.card, .panel, .summary-card, .award-card) {
    min-width: 0;
}

:where(table) {
    max-width: 100%;
}

@media (max-width: 768px) {
    :root {
        --bb-section-gap: 18px;
        --bb-card-gap: 12px;
    }

    .admin-header-inner {
        gap: 12px;
        padding-inline: 14px;
    }

    .admin-page {
        overflow-wrap: break-word;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}