/**
 * idropweb-theme.css
 * Tema Oficial da Plataforma idropWeb SaaS (Login, Wizard de Empresa e Painel /admin)
 * - Modo Light (padrão) e Dark (suave, sem preto puro)
 * - Paleta fixa para qualquer empresa (não muda conforme o empresa_id)
 * Controle: atributo data-theme="light|dark" na tag <html> (assets/js/idropweb-theme.js)
 */

/* ===== TOKENS: MODO LIGHT (PADRÃO) ===== */
:root,
html[data-theme="light"] {
    color-scheme: light;

    /* Cores da Marca (iguais nos dois modos) */
    --purple: #583c7a;
    --purple-l: #7b5ba6;
    --pink: #ec268f;
    --blue: #69b9d0;

    /* Superfícies */
    --idw-bg: #f3f5f9;
    --idw-surface: #ffffff;
    --idw-surface-2: #f7f8fb;
    --idw-surface-3: #eef1f6;
    --idw-input: #ffffff;
    --idw-border: #e2e6ee;
    --idw-border-strong: #cfd5e1;

    /* Textos */
    --idw-text: #3b4252;
    --idw-text-strong: #1e2430;
    --idw-muted: #6b7385;
    --idw-placeholder: #9aa1b0;

    /* Sidebar (escura e suave nos dois modos) */
    --idw-sidebar: #1f2733;
    --idw-sidebar-2: #252e3b;
    --idw-sidebar-border: #2f3a49;
    --idw-sidebar-text: #aab3c2;

    /* Sombras e brilhos de fundo */
    --idw-shadow: 0 4px 18px rgba(30, 36, 48, 0.06);
    --idw-shadow-lg: 0 14px 40px rgba(30, 36, 48, 0.10);
    --idw-glow-a: rgba(123, 91, 166, 0.10);
    --idw-glow-b: rgba(236, 38, 143, 0.07);
    --idw-pink-soft: rgba(236, 38, 143, 0.10);
    --idw-purple-soft: rgba(123, 91, 166, 0.12);

    /* Aliases legados (compatibilidade com estilos anteriores) */
    --dark: var(--idw-bg);
    --card: var(--idw-surface);
    --border: var(--idw-border);
    --muted: var(--idw-muted);
}

/* ===== TOKENS: MODO DARK (SUAVE / GRAFITE) ===== */
html[data-theme="dark"] {
    color-scheme: dark;

    --idw-bg: #1d2027;
    --idw-surface: #252932;
    --idw-surface-2: #2b3039;
    --idw-surface-3: #323843;
    --idw-input: #2b3039;
    --idw-border: #353b47;
    --idw-border-strong: #424a58;

    --idw-text: #c9ced8;
    --idw-text-strong: #eef0f4;
    --idw-muted: #8d95a5;
    --idw-placeholder: #6c7483;

    --idw-sidebar: #1a1d23;
    --idw-sidebar-2: #22262e;
    --idw-sidebar-border: #2c313b;
    --idw-sidebar-text: #9aa2b1;

    --idw-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    --idw-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.32);
    --idw-glow-a: rgba(123, 91, 166, 0.12);
    --idw-glow-b: rgba(236, 38, 143, 0.06);
    --idw-pink-soft: rgba(236, 38, 143, 0.14);
    --idw-purple-soft: rgba(123, 91, 166, 0.18);
}

/* Transição suave ao trocar de tema */
html.idw-theme-anim,
html.idw-theme-anim *,
html.idw-theme-anim *::before,
html.idw-theme-anim *::after {
    transition: background-color .3s ease, border-color .3s ease, color .2s ease !important;
}

/* ===== UTILITÁRIOS DA MARCA ===== */
.text-pink { color: var(--pink) !important; }
.text-purple { color: var(--purple-l) !important; }
.text-blue { color: var(--blue) !important; }

.grad-text {
    background: linear-gradient(135deg, var(--purple-l) 0%, var(--pink) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grad-bg {
    background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%) !important;
}

.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 11px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .4px;
    transition: all .3s ease;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(236, 38, 143, .22);
}

.btn-brand:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(236, 38, 143, .35) !important;
    color: #fff !important;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    background: transparent;
    color: var(--idw-text-strong) !important;
    border: 2px solid var(--idw-border-strong);
    padding: 10px 26px;
    border-radius: 50px;
    font-weight: 600;
    font-size: .88rem;
    transition: all .3s ease;
    cursor: pointer;
}

.btn-ghost:hover:not(:disabled) {
    border-color: var(--pink);
    color: var(--pink) !important;
    transform: translateY(-2px);
}

.btn-ghost:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.tag {
    display: inline-block;
    color: var(--pink);
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

/* ===== BOTÃO DE TEMA (DARK / LIGHT) ===== */
.idw-theme-switch {
    position: relative;
    display: inline-block;
}

.idw-theme-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--idw-border);
    background: var(--idw-surface);
    color: var(--idw-text-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all .2s ease;
}

.idw-theme-btn:hover {
    color: var(--pink);
    border-color: var(--pink);
}

.idw-theme-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    background: var(--idw-surface);
    border: 1px solid var(--idw-border);
    border-radius: 12px;
    box-shadow: var(--idw-shadow-lg);
    padding: 6px;
    display: none;
    z-index: 2000;
}

.idw-theme-switch.open .idw-theme-menu {
    display: block;
}

.idw-theme-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--idw-text);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}

.idw-theme-menu button i {
    width: 18px;
    text-align: center;
    font-size: 15px;
}

.idw-theme-menu button:hover {
    background: var(--idw-surface-3);
    color: var(--idw-text-strong);
}

.idw-theme-menu button.active {
    background: var(--idw-pink-soft);
    color: var(--pink);
    font-weight: 600;
}

/* ===== SWEETALERT2 NOS DOIS MODOS ===== */
html[data-theme="dark"] .swal2-popup {
    background: var(--idw-surface) !important;
    color: var(--idw-text) !important;
    border: 1px solid var(--idw-border);
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container {
    color: var(--idw-text-strong) !important;
}

html[data-theme="dark"] .swal2-html-container code,
html[data-theme="dark"] .swal2-html-container .bg-light {
    background: var(--idw-surface-2) !important;
    color: var(--blue) !important;
    border-color: var(--idw-border) !important;
}