/**
 * Tema compartilhado — páginas match/kiosk
 * Modo claro (padrão) + escuro (html.match-theme-dark)
 * Toggle: match/js/common.js · preferência: localStorage match-theme
 */
:root {
    /* Marca — botões preenchidos, ícones em fundo escuro */
    --match-brand: #228b3a;
    --match-brand-dark: #1a7030;
    --match-brand-light: #2da44e;
    --match-brand-soft: #cce8d4;
    --match-brand-border: #9fd4ad;
    --match-brand-rgb: 34, 139, 58;

    /* Accent — títulos, links e texto verde sobre fundo claro (WCAG AA) */
    --match-accent: #157347;
    --match-accent-dark: #0f5132;
    --match-accent-soft: #d1e7dd;
    --match-accent-border: #a3cfbb;

    --match-primary: var(--match-accent);
    --match-primary-dark: var(--match-accent-dark);
    --match-primary-light: var(--match-brand-light);

    /* Navegação inferior — azul IM */
    --match-nav-active: #1565c0;
    --match-nav-inactive: #64748b;

    /* Links interativos */
    --match-link: #1d6fa5;
    --match-link-dark: #155a87;

    --match-stage-completed: var(--match-brand);
    --match-stage-completed-dark: var(--match-brand-dark);
    --match-stage-pending: #e6a817;
    --match-stage-pending-text: #1e293b;

    --match-info-blue: #0b5cab;
    --match-info-blue-dark: #084298;
    --match-teal: #1a9f7d;
    --match-teal-dark: #147a60;

    --match-bg: #eef2f6;
    --match-bg-gradient-end: #dde4ec;
    --match-card: #ffffff;
    --match-text: #0f172a;
    --match-text-muted: #475569;
    --match-border: #cbd5e1;
    --match-success: var(--match-brand);
    --match-warning: #e6a817;
    --match-error: #dc3545;
    --match-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
    --match-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1);
    --match-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.12);
    --match-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --match-text-xs: 0.6875rem;
    --match-text-sm: 0.8125rem;
    --match-text-base: 0.875rem;
    --match-text-md: 0.9375rem;
    --match-text-lg: 1.0625rem;
    --match-text-xl: 1.25rem;
    --match-text-2xl: 1.5rem;
    --match-text-display: 1.75rem;
    --match-table-size: 13px;
    --match-table-size-mobile: 12px;
    --match-badge-size: 0.72rem;
    --match-line-height-tight: 1.25;
    --match-line-height-normal: 1.5;

    /* aliases legado */
    --primary-color: var(--match-brand);
    --secondary-color: var(--match-brand-dark);
    --primary-light: var(--match-brand-light);
    --background-color: var(--match-bg);
    --card-background: var(--match-card);
    --text-primary: var(--match-text);
    --text-secondary: var(--match-text-muted);
    --border-color: var(--match-border);
    --success-color: var(--match-success);
    --warning-color: var(--match-warning);
    --error-color: var(--match-error);
    --shadow-sm: var(--match-shadow-sm);
    --shadow-md: var(--match-shadow-md);
    --shadow-lg: var(--match-shadow-lg);
}

/* --- Modo escuro --- */
html.match-theme-dark {
    color-scheme: dark;

    --match-brand: #34d399;
    --match-brand-dark: #10b981;
    --match-brand-light: #6ee7b0;
    --match-brand-soft: #064e3b;
    --match-brand-border: #047857;
    --match-brand-rgb: 52, 211, 153;

    /* Links/destaques — verde legível, não neon */
    --match-accent: #86efac;
    --match-accent-dark: #bbf7d0;
    --match-accent-soft: #064e3b;
    --match-accent-border: #047857;

    --match-link: #93c5fd;
    --match-link-dark: #bfdbfe;

    --match-stage-pending: #fbbf24;
    --match-stage-pending-text: #0f172a;

    --match-info-blue: #93c5fd;
    --match-info-blue-dark: #dbeafe;

    --match-bg: #0f172a;
    --match-bg-gradient-end: #1e293b;
    --match-card: #1e293b;
    --match-text: #f8fafc;
    --match-text-muted: #cbd5e1;
    --match-border: #475569;
    --match-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
    --match-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45);
    --match-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

    /* Tipografia um pouco maior no escuro (melhor legibilidade) */
    --match-text-xs: 0.75rem;
    --match-text-sm: 0.875rem;
    --match-text-base: 0.9375rem;
    --match-text-md: 1rem;
    --match-text-lg: 1.125rem;
    --match-text-xl: 1.3125rem;
    --match-text-2xl: 1.5625rem;
    --match-text-display: 1.875rem;
    --match-table-size: 14px;
    --match-table-size-mobile: 13px;
    --match-badge-size: 0.78rem;
    --match-line-height-normal: 1.55;
}

html {
    box-sizing: border-box;
}

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

body {
    font-family: var(--match-font);
    background: linear-gradient(135deg, var(--match-bg) 0%, var(--match-bg-gradient-end) 100%);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--match-text);
    line-height: var(--match-line-height-normal);
    -webkit-font-smoothing: antialiased;
}

body.match-page--plain {
    background: var(--match-bg);
}

body.match-page--kiosk {
    background: var(--match-card);
}

/* --- Botões Bootstrap --- */
body.match-page .btn-primary,
body.match-nav-body .btn-primary,
.match-page .btn-primary {
    background-color: var(--match-brand);
    border-color: var(--match-brand-dark);
    color: #fff;
}

body.match-page .btn-primary:hover,
body.match-page .btn-primary:focus,
body.match-nav-body .btn-primary:hover,
body.match-nav-body .btn-primary:focus,
.match-page .btn-primary:hover,
.match-page .btn-primary:focus {
    background-color: var(--match-brand-dark);
    border-color: var(--match-brand-dark);
    color: #fff;
}

body.match-page .btn-primary:active,
body.match-nav-body .btn-primary:active,
.match-page .btn-primary:active {
    background-color: var(--match-brand-dark);
    border-color: var(--match-brand-dark);
}

body.match-page .btn-outline-primary,
.match-page .btn-outline-primary {
    color: var(--match-accent);
    border-color: var(--match-accent);
}

body.match-page .btn-outline-primary:hover,
.match-page .btn-outline-primary:hover {
    background-color: var(--match-accent);
    border-color: var(--match-accent);
    color: #fff;
}

html.match-theme-dark body.match-page .btn-outline-primary:hover,
html.match-theme-dark .match-page .btn-outline-primary:hover {
    color: #0f172a;
}

/* --- Tabelas / formulários (Bootstrap) --- */
html.match-theme-dark .match-page .table,
html.match-theme-dark .match-page .table-light {
    --bs-table-bg: var(--match-card);
    --bs-table-color: var(--match-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-table-border-color: var(--match-border);
}

html.match-theme-dark .match-page .form-control,
html.match-theme-dark .match-page .form-select {
    background-color: var(--match-card);
    border-color: var(--match-border);
    color: var(--match-text);
}

html.match-theme-dark .match-page .form-control:focus,
html.match-theme-dark .match-page .form-select:focus {
    border-color: var(--match-brand);
    box-shadow: 0 0 0 0.2rem rgba(var(--match-brand-rgb), 0.25);
}

html.match-theme-dark .match-page .card,
html.match-theme-dark .match-page .navbar,
html.match-theme-dark .match-page .match-subnav {
    background-color: var(--match-card);
    border-color: var(--match-border);
}

html.match-theme-dark .match-page .alert-mobile,
html.match-theme-dark .match-page .alert-warning {
    background-color: #422006;
    color: #fde68a;
    border-color: #78350f;
}

html.match-theme-dark .match-page .text-muted {
    color: var(--match-text-muted) !important;
}

/* --- Tipografia modo escuro --- */
html.match-theme-dark body.match-page,
html.match-theme-dark .match-page {
    font-size: var(--match-text-md);
    letter-spacing: 0.01em;
}

html.match-theme-dark .match-page h4,
html.match-theme-dark .match-page .match-title,
html.match-theme-dark .match-page .page-title,
html.match-theme-dark .match-page .match-section__title,
html.match-theme-dark .match-page-header__title,
html.match-theme-dark .division-header h4 {
    color: var(--match-text);
    font-weight: 700;
}

html.match-theme-dark .match-page .table {
    font-size: var(--match-table-size);
    color: var(--match-text);
}

html.match-theme-dark .match-page .table thead th {
    color: #ecfdf5;
    font-weight: 700;
}

html.match-theme-dark .match-page .mobile-card,
html.match-theme-dark .match-page .shooter-stage-card__value,
html.match-theme-dark .match-page .athlete-verify-meta dd {
    color: var(--match-text);
}

html.match-theme-dark .match-page .mobile-card-badge,
html.match-theme-dark .match-page .badge {
    font-weight: 600;
}

html.match-theme-dark body.match-page .btn-primary,
html.match-theme-dark .match-page .btn-primary {
    color: #0f172a;
    font-weight: 700;
}

html.match-theme-dark .match-site-footer {
    font-size: var(--match-text-sm);
    color: var(--match-text-muted);
}

html.match-theme-dark .match-site-footer a {
    color: var(--match-accent);
    font-weight: 600;
}

/* --- Footer --- */
.match-site-footer,
.footer,
.footer-container .footer-content,
.footer-container .footer {
    margin: 1.5rem auto 1rem;
    padding: 1rem 1.25rem;
    max-width: 1200px;
    text-align: center;
    font-size: var(--match-text-sm);
    color: var(--match-text-muted);
    line-height: 1.6;
}

.match-site-footer a,
.footer a,
.footer-content a {
    color: var(--match-accent);
    text-decoration: none;
    font-weight: 500;
}

.match-site-footer a:hover,
.footer a:hover,
.footer-content a:hover {
    color: var(--match-accent-dark);
    text-decoration: underline;
}

.footer-container {
    margin-top: 1.5rem;
}

.footer-content {
    text-align: center;
}

/* --- Toggle de tema --- */
.match-theme-toggle {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--match-border);
    border-radius: 999px;
    background: var(--match-card);
    color: var(--match-accent);
    box-shadow: var(--match-shadow-md);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
}

.match-theme-toggle:hover {
    background: var(--match-accent-soft);
    color: var(--match-accent-dark);
    transform: translateY(-1px);
}

.match-theme-toggle:focus-visible {
    outline: 2px solid var(--match-accent);
    outline-offset: 2px;
}

.match-theme-toggle__icon {
    font-size: 1rem;
    line-height: 1;
}

body.match-nav-body .match-theme-toggle {
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 769px) {
    body.match-nav-body .match-theme-toggle {
        bottom: 0.75rem;
    }
}