/*
 * ═══════════════════════════════════════════════════════════
 *  Dog Gens — Design System v1.0
 *  Temas: Dark Elite (padrão) | Vibrant Paws
 * ═══════════════════════════════════════════════════════════
 */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

/* ══════════════════════════════════════════════════════════════
   TEMA DARK ELITE (padrão)
══════════════════════════════════════════════════════════════ */
:root,
html[data-theme="dark"] {
    /* Backgrounds */
    --bg-page:          #0d1b2a;
    --bg-surface:       #1a2a3a;
    --bg-surface-2:     #223344;
    --bg-glass:         rgba(26,42,58,.75);
    --bg-glass-border:  rgba(255,255,255,.08);

    /* Accent */
    --accent:           #00c896;
    --accent-hover:     #00e6ac;
    --accent-glow:      rgba(0,200,150,.25);
    /* Badge / ícone com accent: fundo sólido escuro (evita mistura translúcida ~#145251 e falha WCAG com --accent) */
    --accent-badge-bg:  #0f352c;
    --accent-badge-fg:  var(--accent);

    /* PRO */
    --pro-color:        #3b82f6;
    --pro-glow:         rgba(59,130,246,.3);
    --pro-bg:           rgba(59,130,246,.1);

    /* PRO Max — Ouro */
    --gold:             #ffd700;
    --gold-2:           #ffb300;
    --gold-3:           #ffe066;
    --gold-glow:        rgba(255,215,0,.35);
    --gold-bg:          rgba(255,215,0,.07);

    /* Texto (secundário/muted calibrados para ≥4.5:1 em --bg-surface / --bg-surface-2) */
    --text-primary:     #e8f0fe;
    --text-secondary:   #96a8b4;
    --text-muted:       #8a9bb0;

    /* Bordas e sombras */
    --border:           rgba(255,255,255,.08);
    --border-strong:    rgba(255,255,255,.15);
    --shadow-sm:        0 2px 12px rgba(0,0,0,.35);
    --shadow-md:        0 6px 28px rgba(0,0,0,.45);
    --shadow-lg:        0 16px 48px rgba(0,0,0,.55);
    --shadow-accent:    0 6px 24px var(--accent-glow);
    --shadow-gold:      0 6px 28px var(--gold-glow);

    /* Radius */
    --radius-sm:  10px;
    --radius-md:  16px;
    --radius-lg:  20px;
    --radius-xl:  28px;

    /* Navbar */
    --navbar-bg:        rgba(13,27,42,.88);
    --navbar-blur:      blur(20px);
    --navbar-border:    rgba(255,255,255,.07);

    /* Transição global */
    --transition:       .22s cubic-bezier(.4,0,.2,1);

    /* Controles nativos (date/time, scrollbars) alinhados ao escuro */
    color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════
   TEMA VIBRANT PAWS
══════════════════════════════════════════════════════════════ */
html[data-theme="vibrant"] {
    --bg-page:          #f0f4ff;
    --bg-surface:       #ffffff;
    --bg-surface-2:     #f8f9ff;
    --bg-glass:         rgba(255,255,255,.82);
    --bg-glass-border:  rgba(124,58,237,.12);

    --accent:           #7c3aed;
    --accent-hover:     #6d28d9;
    --accent-glow:      rgba(124,58,237,.2);
    --accent-badge-bg:  #ede9fe;
    --accent-badge-fg:  #5b21b6;

    --pro-color:        #2563eb;
    --pro-glow:         rgba(37,99,235,.2);
    --pro-bg:           rgba(37,99,235,.08);

    --gold:             #f59e0b;
    --gold-2:           #d97706;
    --gold-3:           #fcd34d;
    --gold-glow:        rgba(245,158,11,.3);
    --gold-bg:          rgba(245,158,11,.08);

    --text-primary:     #1e293b;
    --text-secondary:   #475569;
    --text-muted:       #94a3b8;

    --border:           rgba(0,0,0,.08);
    --border-strong:    rgba(0,0,0,.15);
    --shadow-sm:        0 2px 12px rgba(0,0,0,.08);
    --shadow-md:        0 6px 28px rgba(0,0,0,.12);
    --shadow-lg:        0 16px 48px rgba(0,0,0,.16);
    --shadow-accent:    0 6px 24px var(--accent-glow);
    --shadow-gold:      0 6px 28px var(--gold-glow);

    --navbar-bg:        rgba(255,255,255,.9);
    --navbar-blur:      blur(16px);
    --navbar-border:    rgba(0,0,0,.07);

    color-scheme: light;
}

/* ══════════════════════════════════════════════════════════════
   BASE GLOBAL
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    transition: background-color var(--transition), color var(--transition);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════════════════════════
   HERO DE PÁGINA — degradê (Anúncios, Filhotes, …)
══════════════════════════════════════════════════════════════ */
.page-hero-gradient {
    background: linear-gradient(135deg, var(--bg-page) 0%, var(--bg-surface) 60%, var(--bg-surface-2) 100%);
    padding: 2.5rem 0 2rem;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}
.page-hero-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 60%, var(--accent-glow) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 40%, var(--gold-glow) 0%, transparent 60%);
    pointer-events: none;
}
.page-hero-gradient > .container.position-relative,
.page-hero-gradient > .container {
    position: relative;
    z-index: 1;
}
.page-hero-gradient .hero-kicker {
    font-size: 0.75rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
}
.page-hero-gradient .hero-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    margin-bottom: 0.3rem;
    color: var(--text-primary);
}
.page-hero-gradient .hero-sub {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 0;
    color: var(--text-secondary);
}

/* Scrollbar personalizada (webkit) */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--bg-surface-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Seleção de texto */
::selection { background: var(--accent); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════ */
.navbar {
    background: var(--navbar-bg) !important;
    backdrop-filter: var(--navbar-blur);
    -webkit-backdrop-filter: var(--navbar-blur);
    border-bottom: 1px solid var(--navbar-border);
    transition: background var(--transition);
}
.navbar-brand, .nav-link {
    color: var(--text-primary) !important;
    transition: color var(--transition);
}
.nav-link:hover { color: var(--accent) !important; }
.navbar-toggler { border-color: var(--border) !important; }
.navbar-toggler-icon { filter: invert(1) brightness(.7); }
html[data-theme="vibrant"] .navbar-toggler-icon { filter: none; }

/* Dropdown */
.dropdown-menu {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: .4rem !important;
}
.dropdown-item {
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    transition: background var(--transition), color var(--transition);
    font-size: .875rem;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--accent-glow) !important;
    color: var(--accent) !important;
}
.dropdown-divider { border-color: var(--border) !important; }

/* Menu hamburger (mobile): fundo opaco + itens alinhados à direita (junto ao toggler) */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        margin-top: 0.65rem;
        padding: 0.85rem 1rem 1rem;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        max-height: min(70vh, calc(100vh - 5.5rem));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Garantir leitura: não herdar apenas o blur semitransparente da navbar */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .navbar .navbar-collapse .navbar-nav {
        width: 100%;
        align-items: flex-end !important;
        text-align: right;
    }
    .navbar .navbar-collapse .navbar-nav.me-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .navbar .navbar-collapse .nav-link {
        width: 100%;
        text-align: right;
    }
    .navbar .navbar-collapse .nav-item {
        width: 100%;
    }
    /* Submenus em largura total; itens com ícone+texto seguem leitura natural à esquerda dentro do painel */
    .navbar .navbar-collapse .dropdown-menu {
        width: 100%;
        min-width: 100%;
    }
    .navbar .navbar-collapse .dropdown-toggle::after {
        margin-left: 0.35em;
        vertical-align: 0.15em;
    }
}

/* Logado no mobile (≤768px): topo só marca + idioma + usuário — não usar painel full-width do hamburger */
@media (max-width: 768px) {
    body.dg-auth .navbar #navbarNav.collapse {
        flex-basis: auto !important;
        width: auto !important;
        margin-top: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-height: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   CARDS GLOBAIS
══════════════════════════════════════════════════════════════ */
.card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary) !important;
    transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.card-header, .card-footer {
    background: var(--bg-surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.card-body { color: var(--text-primary) !important; }
.card-title { color: var(--text-primary) !important; }
.card-text  { color: var(--text-secondary) !important; }

/* ── Card PRO ──────────────────────────────────────────────── */
.card-plano-pro {
    border: 1.5px solid var(--pro-color) !important;
    box-shadow: 0 0 0 3px var(--pro-bg), var(--shadow-sm) !important;
    position: relative;
}
.card-plano-pro::before {
    content: '✅ PRO';
    position: absolute;
    top: -1px; right: 14px;
    background: var(--pro-color);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    padding: .2rem .65rem;
    border-radius: 0 0 8px 8px;
    letter-spacing: .05em;
    z-index: 2;
}

/* ── Card PRO Max — Ouro (planos) ──────────────────────────── */
.card-plano-pro-max {
    border: none !important;
    position: relative;
    box-shadow: var(--shadow-gold) !important;
    background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
                linear-gradient(135deg, var(--gold), var(--gold-2), var(--gold-3), var(--gold-2), var(--gold)) border-box !important;
    border: 2px solid transparent !important;
    animation: goldShimmerBorder 3s linear infinite;
    background-size: 200% 200%;
}
@keyframes goldShimmerBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.card-plano-pro-max::before {
    content: '👑 Elite';
    position: absolute;
    top: -1px; right: 14px;
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
    color: #1a1a1a;
    font-size: .62rem;
    font-weight: 900;
    padding: .2rem .65rem;
    border-radius: 0 0 8px 8px;
    letter-spacing: .05em;
    z-index: 2;
    box-shadow: 0 2px 8px var(--gold-glow);
}
.card-plano-pro-max:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px var(--gold-glow) !important;
}
.card-plano-pro-max .card-title {
    background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Bordas nos cards de cães/filhotes por plano/título ────── */
.card-dog-pro-max {
    position: relative;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    background:
        linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
        linear-gradient(135deg, var(--gold-2), var(--gold-3), var(--gold)) border-box;
    box-shadow: 0 0 0 1px rgba(255,215,0,0.25), 0 6px 20px rgba(0,0,0,0.45);
}

/* Rei — borda em diamante (sem animação de luz) */
.card-dog-rei {
    position: relative;
    border-radius: var(--radius-md);
    border: 2px solid transparent !important;
    background:
        linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
        linear-gradient(135deg, #3be4ff, #e6f4ff, #ffffff, #fdf2ff, #3be4ff) border-box !important;
    box-shadow:
        0 0 0 2px rgba(184,242,255,0.9),
        0 0 26px rgba(184,242,255,0.7),
        0 0 46px rgba(255,255,255,0.45);
}

/* ── Shimmer no nome do cão PRO Max (texto) ─────────────────── */
.nome-pro-max {
    background: linear-gradient(90deg, var(--gold-2) 0%, var(--gold-3) 40%, var(--gold) 50%, var(--gold-3) 60%, var(--gold-2) 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 3.5s linear infinite;
}
@keyframes shimmerText {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ══════════════════════════════════════════════════════════════
   BOTÕES
══════════════════════════════════════════════════════════════ */
.btn {
    border-radius: var(--radius-sm) !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: all var(--transition);
}
/* Efeito shimmer no hover */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform .4s ease;
}
.btn:hover::after { transform: translateX(100%); }

.btn-primary {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #007bff)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 16px var(--accent-glow);
}
.btn-primary:hover {
    box-shadow: 0 6px 22px var(--accent-glow);
    transform: translateY(-1px);
}
.btn-outline-primary {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
.btn-outline-primary:hover {
    background: var(--accent) !important;
    color: #fff !important;
}
.btn-outline-secondary {
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
}
.btn-outline-secondary:hover {
    background: var(--bg-surface-2) !important;
    color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   FORMULÁRIOS
══════════════════════════════════════════════════════════════ */
.form-control, .form-select {
    background: var(--bg-surface-2) !important;
    border: 1.5px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder { color: var(--text-muted) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    background: var(--bg-surface) !important;
}
.form-label { color: var(--text-secondary); font-weight: 600; font-size: .875rem; }

/*
 * Date / time: ícone do calendário e do relógio no tema escuro.
 * filter/invert falha em alguns Chromium; SVG em background substitui o pictograma (WebKit/Blink).
 */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1 !important;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    margin-inline-start: 0.35rem;
    background: transparent center / contain no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8f0fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1 !important;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    margin-inline-start: 0.35rem;
    background: transparent center / contain no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8f0fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════
   TEXTOS E TIPOGRAFIA
══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary) !important; font-weight: 800; }
/* Cabeçalhos de card com bg-primary (accent): o verde #00c896 não contrasta com --text-primary (#e8f0fe) */
html[data-theme="dark"] .card-header.bg-primary,
html[data-theme="dark"] .card-header.bg-primary h1,
html[data-theme="dark"] .card-header.bg-primary h2,
html[data-theme="dark"] .card-header.bg-primary h3,
html[data-theme="dark"] .card-header.bg-primary h4,
html[data-theme="dark"] .card-header.bg-primary h5,
html[data-theme="dark"] .card-header.bg-primary h6,
html[data-theme="dark"] .card-header.bg-primary .card-title {
    color: #102318 !important;
}
html[data-theme="vibrant"] .card-header.bg-primary,
html[data-theme="vibrant"] .card-header.bg-primary h1,
html[data-theme="vibrant"] .card-header.bg-primary h2,
html[data-theme="vibrant"] .card-header.bg-primary h3,
html[data-theme="vibrant"] .card-header.bg-primary h4,
html[data-theme="vibrant"] .card-header.bg-primary h5,
html[data-theme="vibrant"] .card-header.bg-primary h6,
html[data-theme="vibrant"] .card-header.bg-primary .card-title {
    color: #ffffff !important;
}
p, span, li, td, th     { color: var(--text-primary); }
.text-muted             { color: var(--text-muted) !important; }
.text-secondary         { color: var(--text-secondary) !important; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }
.lead { color: var(--text-secondary) !important; }
small { color: var(--text-secondary); }

/* ══════════════════════════════════════════════════════════════
   ALERTS / BADGES / PILLS
══════════════════════════════════════════════════════════════ */
.alert {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}
.alert-success { border-color: #198754 !important; background: rgba(25,135,84,.1) !important; }
.alert-warning { border-color: #ffc107 !important; background: rgba(255,193,7,.1) !important; }
.alert-danger  { border-color: #dc3545 !important; background: rgba(220,53,69,.1) !important; }
.alert-info    { border-color: var(--accent) !important; background: var(--accent-glow) !important; }

/*
 * Aviso “confirme seu e-mail”: .alert usa color !important e empatava o texto do botão com o do aviso.
 * Botão com contraste explícito (WCAG) em dark e vibrant.
 */
.alert-verify-email .btn-resend-verification-email {
    color: #102318 !important;
    background: linear-gradient(180deg, #ffe066 0%, #ffc107 100%) !important;
    border: 2px solid #b8860b !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.alert-verify-email .btn-resend-verification-email:hover {
    color: #102318 !important;
    background: linear-gradient(180deg, #fff3a0 0%, #ffd54a 100%) !important;
    border-color: #9a7209 !important;
    filter: brightness(1.02);
}
html[data-theme="vibrant"] .alert-verify-email .btn-resend-verification-email {
    color: #0f172a !important;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 85%, #0d9488)) !important;
    border: 2px solid color-mix(in srgb, var(--accent) 70%, #065f46) !important;
    box-shadow: 0 2px 8px var(--accent-glow);
}
html[data-theme="vibrant"] .alert-verify-email .btn-resend-verification-email:hover {
    color: #fff !important;
    filter: brightness(1.05);
}

.badge { border-radius: 20px !important; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   TABELAS
══════════════════════════════════════════════════════════════ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--bg-surface-2);
    --bs-table-hover-bg: var(--bg-surface-2);
    color: var(--text-primary) !important;
}
.table th { color: var(--text-secondary) !important; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.table-responsive { border-radius: var(--radius-md); overflow: hidden; }

/* Painel legal / relatórios auditoria — evita table-light (texto claro em fundo claro) no tema escuro */
.table.table-legal-audit {
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.055);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.095);
    --bs-table-border-color: var(--border);
    color: var(--text-primary) !important;
}
.table.table-legal-audit thead th {
    background: var(--bg-surface-2) !important;
    color: var(--text-primary) !important;
    font-size: .75rem !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--border-strong) !important;
    vertical-align: middle;
}
.table.table-legal-audit tbody td {
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    vertical-align: middle;
}
.table.table-legal-audit tbody td small {
    color: var(--text-secondary) !important;
    opacity: 1;
}
.table.table-legal-audit code {
    color: #a5d8ff !important;
    background: rgba(165, 216, 255, 0.14) !important;
    padding: 0.2em 0.45em;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
}
html[data-theme="vibrant"] .table.table-legal-audit code {
    color: #0c4a6e !important;
    background: rgba(14, 165, 233, 0.12) !important;
}
html[data-theme="vibrant"] .table.table-legal-audit thead th {
    background: var(--bg-surface-2) !important;
    color: var(--text-primary) !important;
}
html[data-theme="vibrant"] .table.table-legal-audit tbody td small {
    color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   MODAIS
══════════════════════════════════════════════════════════════ */
.modal-content {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text-primary) !important;
}
.modal-header, .modal-footer {
    border-color: var(--border) !important;
    background: var(--bg-surface-2) !important;
}
.modal-title { color: var(--text-primary) !important; }
.btn-close {
    filter: invert(1) brightness(.8) !important;
}
html[data-theme="vibrant"] .btn-close { filter: none !important; }

/* Backdrop do modal */
.modal-backdrop { background: rgba(0,0,0,.7) !important; }

/* ══════════════════════════════════════════════════════════════
   MOBILE NAVBARS
══════════════════════════════════════════════════════════════ */
.mobile-top-nav, .mobile-bottom-nav {
    background: var(--navbar-bg) !important;
    backdrop-filter: var(--navbar-blur);
    -webkit-backdrop-filter: var(--navbar-blur);
    border-bottom: 1px solid var(--navbar-border);
    transition: background var(--transition);
}
.mobile-bottom-nav { border-top: 1px solid var(--navbar-border) !important; border-bottom: none !important; }
.mobile-top-nav .nav-item,
.mobile-bottom-nav .nav-item { color: var(--text-secondary) !important; }
.mobile-top-nav .nav-item.active,
.mobile-bottom-nav .nav-item.active { color: var(--accent) !important; }

/* ══════════════════════════════════════════════════════════════
   MISCELÂNEA
══════════════════════════════════════════════════════════════ */
.list-group-item {
    background: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--text-muted) !important; }
.breadcrumb-item.active { color: var(--text-secondary) !important; }

hr { border-color: var(--border) !important; }
.bg-light { background: var(--bg-surface-2) !important; }
.bg-white  { background: var(--bg-surface) !important; }
.text-dark { color: var(--text-primary) !important; }
.border    { border-color: var(--border) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow-md) !important; }

/* Page wrapper */
.page-wrapper { background: var(--bg-page); }

/* Footer */
footer.bg-light {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 3rem !important;
}
footer.bg-light p {
    color: #c8d6e4 !important;
}
footer.bg-light a {
    color: #d9e6f2 !important;
}

/* ══════════════════════════════════════════════════════════════
   ANIMAÇÕES DE ENTRADA (cards, seções)
══════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pulseGold {
    0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); }
    50%       { box-shadow: 0 0 0 8px rgba(255,215,0,0); }
}

.animate-fade-up    { animation: fadeInUp .4s ease both; }
.animate-fade       { animation: fadeIn .4s ease both; }
.animate-delay-1    { animation-delay: .08s; }
.animate-delay-2    { animation-delay: .16s; }
.animate-delay-3    { animation-delay: .24s; }
.animate-delay-4    { animation-delay: .32s; }
.animate-delay-5    { animation-delay: .40s; }

/* Stagger automático em listas de cards */
.cards-grid > *:nth-child(1)  { animation: fadeInUp .4s .05s ease both; }
.cards-grid > *:nth-child(2)  { animation: fadeInUp .4s .10s ease both; }
.cards-grid > *:nth-child(3)  { animation: fadeInUp .4s .15s ease both; }
.cards-grid > *:nth-child(4)  { animation: fadeInUp .4s .20s ease both; }
.cards-grid > *:nth-child(5)  { animation: fadeInUp .4s .25s ease both; }
.cards-grid > *:nth-child(6)  { animation: fadeInUp .4s .30s ease both; }
.cards-grid > *:nth-child(n+7){ animation: fadeInUp .4s .35s ease both; }

/* ══════════════════════════════════════════════════════════════
   BANNER DE UPGRADE
══════════════════════════════════════════════════════════════ */
#bannerUpgrade {
    background: linear-gradient(90deg, var(--bg-surface-2), var(--bg-surface)) !important;
    border-bottom: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════
   SWEETALERT2 — override de tema
══════════════════════════════════════════════════════════════ */
.swal2-popup {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.swal2-title  { color: var(--text-primary) !important; }
.swal2-html-container { color: var(--text-secondary) !important; }
.swal2-confirm { border-radius: var(--radius-sm) !important; font-weight: 700 !important; }
.swal2-cancel  { border-radius: var(--radius-sm) !important; font-weight: 600 !important; }
.swal2-icon.swal2-question { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ══════════════════════════════════════════════════════════════
   SELECT2 — override de tema
══════════════════════════════════════════════════════════════ */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: var(--bg-surface) !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--accent-glow) !important;
    border-color: var(--accent) !important;
    color: var(--text-primary) !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--text-secondary) !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--accent) !important;
}
.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
}
.select2-container--bootstrap-5 .select2-search__field {
    background-color: var(--bg-surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.select2-container--bootstrap-5 .select2-search__field::placeholder {
    color: var(--text-muted) !important;
}
.select2-container--bootstrap-5 .select2-results__option {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--accent-glow) !important;
    color: var(--accent) !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--bg-surface-2) !important;
    color: var(--accent) !important;
}
.select2-container--bootstrap-5 .select2-selection__placeholder {
    color: var(--text-muted) !important;
}
.select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   BOTÃO DE TOGGLE DE TEMA
══════════════════════════════════════════════════════════════ */
.btn-theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    font-size: 1rem;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.btn-theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
    transform: scale(1.08);
}
.theme-icon-dark    { display: block; }
.theme-icon-vibrant { display: none; }
html[data-theme="vibrant"] .theme-icon-dark    { display: none; }
html[data-theme="vibrant"] .theme-icon-vibrant { display: block; }

/* ══════════════════════════════════════════════════════════════
   VIBRANT: partículas e extras
══════════════════════════════════════════════════════════════ */
html[data-theme="vibrant"] body {
    background: linear-gradient(160deg, #f0f4ff 0%, #faf0ff 50%, #fff0f8 100%);
    background-attachment: fixed;
}
html[data-theme="vibrant"] .card {
    box-shadow: 0 4px 20px rgba(124,58,237,.08) !important;
}
html[data-theme="vibrant"] .card:hover {
    box-shadow: 0 8px 32px rgba(124,58,237,.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   CARDS — mídia (padrão /cachorros/ + proporção via dg_card_media.js)
══════════════════════════════════════════════════════════════ */
.dg-card-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--bg-surface-2);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}
.dg-card-media--rounded-top {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.dg-card-media .dg-card-media__link {
    position: absolute;
    inset: 0;
    display: block;
}
.dg-card-media .dg-card-media__img,
.dg-card-media > a > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.dg-card-media picture {
    position: absolute;
    inset: 0;
    display: block;
}
.dg-card-media picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.dg-card-media--click-zoom {
    cursor: pointer;
}
.dg-card-media--click-zoom:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.dg-card-media--placeholder .dg-card-media__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 3rem;
    background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface-2));
}