/* ==========================================================================
   Vaderme Dark Mode - Core & Theme Presets (Premium Edition)
   ========================================================================== */

/* Paletas e Tokens Padrão */
:root,
html.vdm-preset-graphite {
    --vdm-bg-dark: #09090b;
    --vdm-surface-dark: #121215;
    --vdm-surface-elevated: #1c1c21;
    --vdm-text-dark: #f8fafc;
    --vdm-muted-dark: #94a3b8;
    --vdm-accent-dark: #6366f1;
    --vdm-border-subtle: rgba(255, 255, 255, 0.08);
    --vdm-switch-bg: #18181b;
    --vdm-switch-text: #ffffff;
}

html.vdm-preset-obsidian {
    --vdm-bg-dark: #000000;
    --vdm-surface-dark: #0d0d0e;
    --vdm-surface-elevated: #161618;
    --vdm-text-dark: #f4f4f5;
    --vdm-muted-dark: #a1a1aa;
    --vdm-accent-dark: #ffffff;
    --vdm-border-subtle: rgba(255, 255, 255, 0.1);
    --vdm-switch-bg: #111113;
    --vdm-switch-text: #ffffff;
}

html.vdm-preset-midnight {
    --vdm-bg-dark: #0b0f19;
    --vdm-surface-dark: #111827;
    --vdm-surface-elevated: #1f2937;
    --vdm-text-dark: #f1f5f9;
    --vdm-muted-dark: #94a3b8;
    --vdm-accent-dark: #38bdf8;
    --vdm-border-subtle: rgba(148, 163, 184, 0.12);
    --vdm-switch-bg: #111827;
    --vdm-switch-text: #ffffff;
}

html.vdm-preset-mocha {
    --vdm-bg-dark: #12100e;
    --vdm-surface-dark: #1c1917;
    --vdm-surface-elevated: #292524;
    --vdm-text-dark: #fafaf9;
    --vdm-muted-dark: #a8a29e;
    --vdm-accent-dark: #f59e0b;
    --vdm-border-subtle: rgba(255, 255, 255, 0.08);
    --vdm-switch-bg: #292524;
    --vdm-switch-text: #ffffff;
}

html.vdm-preset-slate {
    --vdm-bg-dark: #0f172a;
    --vdm-surface-dark: #1e293b;
    --vdm-surface-elevated: #334155;
    --vdm-text-dark: #e2e8f0;
    --vdm-muted-dark: #94a3b8;
    --vdm-accent-dark: #cbd5e1;
    --vdm-border-subtle: rgba(148, 163, 184, 0.14);
    --vdm-switch-bg: #334155;
    --vdm-switch-text: #ffffff;
}

html.vdm-preset-ocean {
    --vdm-bg-dark: #082f49;
    --vdm-surface-dark: #0c4a6e;
    --vdm-surface-elevated: #075985;
    --vdm-text-dark: #e0f2fe;
    --vdm-muted-dark: #7dd3fc;
    --vdm-accent-dark: #38bdf8;
    --vdm-border-subtle: rgba(125, 211, 252, 0.15);
    --vdm-switch-bg: #0369a1;
    --vdm-switch-text: #ffffff;
}

html.vdm-preset-forest {
    --vdm-bg-dark: #052e16;
    --vdm-surface-dark: #14532d;
    --vdm-surface-elevated: #166534;
    --vdm-text-dark: #dcfce7;
    --vdm-muted-dark: #86efac;
    --vdm-accent-dark: #4ade80;
    --vdm-border-subtle: rgba(134, 239, 172, 0.15);
    --vdm-switch-bg: #15803d;
    --vdm-switch-text: #ffffff;
}

/* Transição Suave de Cores Global (Color Bleed) */
html.vdm-transitioning,
html.vdm-transitioning *,
html.vdm-transitioning *:before,
html.vdm-transitioning *:after {
    transition: background-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms ease,
                box-shadow 260ms ease !important;
    transition-delay: 0s !important;
}

/* Aplicação Global do Modo Escuro */
html.vdm-dark {
    color-scheme: dark;
    background-color: var(--vdm-bg-dark) !important;
}

html.vdm-dark body {
    background-color: var(--vdm-bg-dark) !important;
    color: var(--vdm-text-dark) !important;
}

/* Escurecimento Automático de Cartões, Painéis e Caixas */
html.vdm-dark .card,
html.vdm-dark .box,
html.vdm-dark .panel,
html.vdm-dark .modal-content,
html.vdm-dark .dropdown-menu,
html.vdm-dark .elementor-widget-container,
html.vdm-dark div[class*="card"]:not(.vdm-switch),
html.vdm-dark div[class*="box"]:not(.vdm-switch),
html.vdm-dark div[class*="panel"]:not(.vdm-switch),
html.vdm-dark div[class*="item"]:not(.vdm-switch),
html.vdm-dark div[class*="tab"]:not(.vdm-switch),
html.vdm-dark div[class*="nav"]:not(.vdm-switch),
html.vdm-dark div[class*="formula"]:not(.vdm-switch),
html.vdm-dark div[class*="bar"]:not(.vdm-switch),
html.vdm-dark div[class*="prompt"]:not(.vdm-switch),
html.vdm-dark [data-vdm-surface] {
    background-color: var(--vdm-surface-dark) !important;
    border-color: var(--vdm-border-subtle) !important;
    color: var(--vdm-text-dark) !important;
}

/* Classes Utilitárias de Fundo Branco do Tema */
html.vdm-dark .bg-white,
html.vdm-dark .white-bg,
html.vdm-dark [class*="bg-white"],
html.vdm-dark [class*="white-bg"],
html.vdm-dark .has-white-background-color {
    background-color: var(--vdm-surface-dark) !important;
    color: var(--vdm-text-dark) !important;
    border-color: var(--vdm-border-subtle) !important;
}

/* Tipografia de Alta Legibilidade no Modo Escuro */
html.vdm-dark p,
html.vdm-dark span:not(.vdm-switch *):not([class*="badge"]):not([class*="icon"]),
html.vdm-dark h1,
html.vdm-dark h2,
html.vdm-dark h3,
html.vdm-dark h4,
html.vdm-dark h5,
html.vdm-dark h6,
html.vdm-dark li,
html.vdm-dark blockquote,
html.vdm-dark td,
html.vdm-dark th,
html.vdm-dark label:not(.vdm-toggle-switch) {
    color: var(--vdm-text-dark) !important;
}

html.vdm-dark small,
html.vdm-dark .muted,
html.vdm-dark .text-muted,
html.vdm-dark [class*="muted"] {
    color: var(--vdm-muted-dark) !important;
}

html.vdm-dark a:not(.vdm-switch):not([class*="btn"]):not([class*="button"]) {
    color: var(--vdm-accent-dark) !important;
}

/* Botões Claras Secundários / Utilitários */
html.vdm-dark button:not(.vdm-switch):not([data-vdm-toggle]),
html.vdm-dark .button:not(.vdm-switch):not([class*="primary"]),
html.vdm-dark .btn:not(.vdm-switch):not([class*="primary"]),
html.vdm-dark input[type="button"],
html.vdm-dark input[type="reset"] {
    background-color: var(--vdm-surface-elevated) !important;
    color: var(--vdm-text-dark) !important;
    border: 1px solid var(--vdm-border-subtle) !important;
}

html.vdm-dark .vdm-processed {
    background-color: var(--vdm-element-bg, var(--vdm-surface-dark)) !important;
    color: var(--vdm-element-color, var(--vdm-text-dark)) !important;
    border-color: var(--vdm-element-border, var(--vdm-border-subtle)) !important;
}

html.vdm-dark .vdm-processed a {
    color: var(--vdm-element-link, var(--vdm-accent-dark)) !important;
}

/* Tratamento Inteligente de Imagens */
html.vdm-dark img.vdm-image,
html.vdm-dark video.vdm-image {
    filter: brightness(var(--vdm-image-brightness, .88)) contrast(var(--vdm-image-contrast, 1.02)) opacity(var(--vdm-image-opacity, 1)) sepia(var(--vdm-image-sepia, 0));
    transition: filter 0.25s ease;
}

html.vdm-dark img.vdm-image:hover {
    filter: brightness(1) contrast(1) opacity(1) sepia(0);
}

/* Overlay Suave em Imagens de Fundo */
html.vdm-dark .vdm-bg-overlay {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, var(--vdm-overlay-opacity, .25)) !important;
}

/* Formulários e Controles */
html.vdm-dark input,
html.vdm-dark textarea,
html.vdm-dark select {
    background-color: var(--vdm-surface-dark) !important;
    color: var(--vdm-text-dark) !important;
    border: 1px solid var(--vdm-border-subtle, rgba(255, 255, 255, 0.12)) !important;
    box-shadow: none !important;
}

html.vdm-dark input:focus,
html.vdm-dark textarea:focus,
html.vdm-dark select:focus {
    border-color: var(--vdm-accent-dark) !important;
    outline: 2px solid rgba(99, 102, 241, 0.3) !important;
}

/* ==========================================================================
   Switch Flutuante & Estilos Visuais
   ========================================================================== */

.vdm-floating {
    position: fixed;
    z-index: 2147483000;
    margin-top: var(--vdm-margin-top, 24px);
    margin-right: var(--vdm-margin-right, 24px);
    margin-bottom: var(--vdm-margin-bottom, 24px);
    margin-left: var(--vdm-margin-left, 24px);
}

.vdm-position-top-left     { top: 0; left: 0; }
.vdm-position-top-right    { top: 0; right: 0; }
.vdm-position-bottom-left  { bottom: 0; left: 0; }
.vdm-position-bottom-right { bottom: 0; right: 0; }

/* Ancoragem no Mobile (Não acompanhar a rolagem) */
@media (max-width: 768px) {
    .vdm-floating.vdm-mobile-anchored {
        position: absolute !important;
    }
    .vdm-floating.vdm-mobile-anchored.vdm-mobile-pos-top-right {
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
    }
    .vdm-floating.vdm-mobile-anchored.vdm-mobile-pos-top-left {
        top: 0 !important;
        left: 0 !important;
        bottom: auto !important;
        right: auto !important;
    }
    .vdm-floating.vdm-mobile-anchored.vdm-mobile-pos-bottom-right {
        bottom: 0 !important;
        right: 0 !important;
        top: auto !important;
        left: auto !important;
    }
    .vdm-floating.vdm-mobile-anchored.vdm-mobile-pos-bottom-left {
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;
        right: auto !important;
    }
}

/* Botão Base do Switch - Formato Estrito de Pílula */
button.vdm-switch,
.vdm-floating .vdm-switch,
.vdm-switch {
    --vdm-switch-size: 48px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 9999px !important;
    -webkit-border-radius: 9999px !important;
    -moz-border-radius: 9999px !important;
    background: var(--vdm-switch-bg) !important;
    color: var(--vdm-switch-text) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.22s ease,
                border-color 0.22s ease;
}

/* Quando exibe apenas o ícone: pílula circular perfeita */
button.vdm-switch.vdm-icon-only,
.vdm-switch.vdm-icon-only,
button.vdm-switch:not(:has(.vdm-switch-label)) {
    width: var(--vdm-switch-size, 48px) !important;
    height: var(--vdm-switch-size, 48px) !important;
    min-width: var(--vdm-switch-size, 48px) !important;
    min-height: var(--vdm-switch-size, 48px) !important;
    max-width: var(--vdm-switch-size, 48px) !important;
    max-height: var(--vdm-switch-size, 48px) !important;
    padding: 0 !important;
    border-radius: 9999px !important;
}

/* Quando exibe com texto (rótulo): pílula horizontal alongada */
button.vdm-switch.vdm-with-label,
.vdm-switch.vdm-with-label {
    min-width: var(--vdm-switch-size, 48px);
    min-height: var(--vdm-switch-size, 48px);
    padding: 10px 18px !important;
    border-radius: 9999px !important;
}

.vdm-switch:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.vdm-switch:active {
    transform: translateY(0) scale(0.98);
}

.vdm-switch:focus-visible {
    outline: 2px solid var(--vdm-accent-dark, #6366f1);
    outline-offset: 3px;
}

/* Ícones Animados Sol / Lua */
.vdm-switch-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    overflow: hidden;
    flex-shrink: 0;
}

.vdm-icon-sun,
.vdm-icon-moon {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease;
}

/* Estado Claro: Sol visível, Lua oculta */
.vdm-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #f59e0b;
}

.vdm-icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.4);
    color: #cbd5e1;
}

/* Estado Escuro: Lua visível, Sol oculto */
html.vdm-dark .vdm-icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.4);
}

html.vdm-dark .vdm-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #93c5fd;
}

.vdm-switch-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ==========================================================================
   15 Estilos Exclusivos do Switch (Todos com Formato Pílula)
   ========================================================================== */

.vdm-style-1, .vdm-style-2, .vdm-style-3, .vdm-style-4, .vdm-style-5,
.vdm-style-6, .vdm-style-7, .vdm-style-8, .vdm-style-9, .vdm-style-10,
.vdm-style-11, .vdm-style-12, .vdm-style-13, .vdm-style-14, .vdm-style-15 {
    border-radius: 9999px !important;
    -webkit-border-radius: 9999px !important;
}

/* Estilo 1: Premium Glassmorphism Pill */
.vdm-style-1 {
    background: rgba(24, 24, 27, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Estilo 2: Cyber Indigo (Linear Inspired) */
.vdm-style-2 {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Estilo 3: Mint Emerald Luxury */
.vdm-style-3 {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Estilo 4: Royal Amethyst */
.vdm-style-4 {
    background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Estilo 5: Velvet Rose Gold */
.vdm-style-5 {
    background: linear-gradient(135deg, #db2777, #f43f5e) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Estilo 6: Sunset Amber Soft Pill */
.vdm-style-6 {
    background: linear-gradient(135deg, #ea580c, #f59e0b) !important;
    color: #ffffff !important;
}

/* Estilo 7: Light & Crisp Minimal */
.vdm-style-7 {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
}
html.vdm-dark .vdm-style-7 {
    background: #18181b !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Estilo 8: Ultra-Clean Outline */
.vdm-style-8 {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #0f172a !important;
    border: 1.5px solid #0f172a !important;
    box-shadow: none !important;
}
html.vdm-dark .vdm-style-8 {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Estilo 9: Titanium Slate */
.vdm-style-9 {
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* Estilo 10: Cosmic Aurora */
.vdm-style-10 {
    background: linear-gradient(135deg, #1e40af, #7c3aed) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Estilo 11: Deep Jade Lagoon */
.vdm-style-11 {
    background: linear-gradient(135deg, #047857, #0f766e) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Estilo 12: Modern Soft Pill */
.vdm-style-12 {
    background: #121215 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Estilo 13: Compact Floating Dock */
.vdm-style-13 {
    background: rgba(15, 23, 42, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Estilo 14: Warm Amber Circle */
.vdm-style-14 {
    background: #f59e0b !important;
    color: #0f172a !important;
    border: none !important;
}
html.vdm-dark .vdm-style-14 {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

/* Estilo 15: Neon Glow Ring */
.vdm-style-15 {
    background: #09090b !important;
    border: 2px solid #6366f1 !important;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.35) !important;
}