/* ============================================================
   TEMA "VIDRO" — vidro escuro fosco sobre um fundo ambiente
   ------------------------------------------------------------
   Baseado no GUIA-TEMA-VIDRO do Taskcore, adaptado ao Tailwind daqui.

   Como entra: o tema liga as classes `dark` + `glass` no <html>
   (applyTheme, em script.js). A classe `dark` já traz os textos e
   bordas claros de todas as telas; este arquivo só troca as
   SUPERFÍCIES (cartões, janelas, menu) por vidro translúcido.

   A cor do tema vem de --glass-tone (escolhida em Configurações;
   padrão âmbar). O JS também repinta a paleta da marca (brand-*)
   com ela, então botões, abas e foco dos campos seguem a cor.

   Carregado por último. O Tailwind injeta as classes em runtime,
   por isso as trocas de superfície usam !important (como o Noturno).
   ============================================================ */

html.glass {
    --glass-tone: #f4a259;
    --glass-dark: color-mix(in srgb, var(--glass-tone) 9%, #14110e);
    --glass-panel: color-mix(in srgb, var(--glass-dark) 58%, transparent);
    --glass-solid: color-mix(in srgb, var(--glass-dark) 94%, transparent);
    --glass-grad-a: color-mix(in srgb, var(--glass-tone) 78%, white);
    --glass-grad-b: color-mix(in srgb, var(--glass-tone) 90%, black);
    --glass-glow: color-mix(in srgb, var(--glass-tone) 34%, transparent);
    --glass-surface: color-mix(in srgb, var(--glass-dark) 52%, transparent);
    --glass-surface2: rgba(255, 255, 255, .07);
    --glass-edge: rgba(255, 255, 255, .13);
    --glass-blur: blur(26px) saturate(135%);
    --on-accent: #2b1608;
    color-scheme: dark;
}

/* ── Fundo: manchas de luz da cor escolhida, sem imagem ── */
html.glass.dark body.antialiased {
    background:
        radial-gradient(46vmax 34vmax at 80% 14%, color-mix(in srgb, var(--glass-tone) 34%, transparent), transparent 66%),
        radial-gradient(38vmax 30vmax at 16% 26%, color-mix(in srgb, color-mix(in srgb, var(--glass-tone) 85%, black) 26%, transparent), transparent 64%),
        radial-gradient(60vmax 26vmax at 52% 84%, color-mix(in srgb, color-mix(in srgb, var(--glass-tone) 55%, black) 46%, transparent), transparent 66%),
        radial-gradient(34vmax 30vmax at 96% 88%, color-mix(in srgb, color-mix(in srgb, var(--glass-tone) 60%, white) 16%, transparent), transparent 62%),
        radial-gradient(30vmax 40vmax at 2% 80%, color-mix(in srgb, color-mix(in srgb, var(--glass-tone) 25%, black) 70%, transparent), transparent 66%),
        linear-gradient(180deg, color-mix(in srgb, var(--glass-tone) 12%, #16110d) 0%, color-mix(in srgb, var(--glass-tone) 8%, #100c0a) 55%, color-mix(in srgb, var(--glass-tone) 5%, #0a0807) 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}
html.glass #login-screen { background: transparent !important; }

/* ── Superfícies: do mais firme ao mais leve ── */
/* cartões */
html.glass :is(.bg-white, .dark\:bg-surface-800, .dark\:bg-surface-800\/70) {
    background-color: var(--glass-surface) !important;
}
/* o que fica DENTRO dos cartões: campos, cabeçalhos de tabela, linhas */
html.glass :is(.bg-surface-50, .dark\:bg-surface-700) {
    background-color: var(--glass-surface2) !important;
}
html.glass :is(.dark\:bg-surface-700\/30, .dark\:bg-surface-700\/40, .dark\:bg-surface-700\/50, .dark\:bg-surface-700\/60,
               .dark\:bg-surface-800\/50, .dark\:bg-surface-800\/60) {
    background-color: rgba(255, 255, 255, .05) !important;
}
html.glass :is(.bg-surface-100, .bg-surface-200, .dark\:bg-surface-600) {
    background-color: rgba(255, 255, 255, .11) !important;
}
html.glass :is(.bg-surface-900, .dark\:bg-surface-900, .bg-surface-950, .dark\:bg-surface-950) {
    background-color: rgba(0, 0, 0, .28) !important;
}
html.glass .dark\:bg-surface-900\/30 { background-color: rgba(0, 0, 0, .18) !important; }
/* divisórias de 1px (h-px bg-surface-200 dark:bg-surface-700) */
html.glass .h-px { background-color: rgba(255, 255, 255, .13) !important; }
/* passar o mouse */
html.glass :is(.hover\:bg-surface-50, .hover\:bg-surface-100, .hover\:bg-surface-200, .dark\:hover\:bg-surface-600,
               .dark\:hover\:bg-surface-700, .dark\:hover\:bg-surface-800):hover {
    background-color: rgba(255, 255, 255, .12) !important;
}
/* bordas */
html.glass :is(.border-surface-200, .border-surface-300, .dark\:border-surface-600, .dark\:border-surface-700, .dark\:border-surface-800) {
    border-color: rgba(255, 255, 255, .13) !important;
}
html.glass :is(.border-surface-50, .border-surface-100) { border-color: rgba(255, 255, 255, .08) !important; }

/* Vidro de verdade (com desfoque) só nos cartões grandes: cada elemento com
   backdrop-filter é uma camada a mais para o navegador desenhar. */
html.glass :is(.kpi-card, [class*="rounded-2xl"]:is(.bg-white, .dark\:bg-surface-800)) {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: 24px !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}
html.glass .kpi-card:hover { box-shadow: 0 24px 60px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .14) !important; }
/* o primeiro cartão de números do Dashboard: degradê da cor do tema */
html.glass #dashboard-kpis > .kpi-card:first-child {
    background: linear-gradient(150deg, color-mix(in srgb, var(--glass-tone) 50%, transparent), color-mix(in srgb, color-mix(in srgb, var(--glass-tone) 80%, black) 26%, transparent)) !important;
}

/* Tudo o que abre POR CIMA do conteúdo precisa de mais corpo: com o fundo
   a 52%, o texto de trás aparece e ninguém lê. */
html.glass :is(.absolute, .fixed):is(.bg-white, .dark\:bg-surface-800, .dark\:bg-surface-900),
html.glass [id$="-modal"] > div {
    background-color: var(--glass-solid) !important;
    -webkit-backdrop-filter: blur(30px) saturate(135%);
    backdrop-filter: blur(30px) saturate(135%);
    border-color: var(--glass-edge) !important;
}
html.glass [id$="-modal"] > div { border-radius: 28px; }

/* Texto sobre o destaque: escuro quando a cor é clara (calculado em JS) */
html.glass :is(.bg-brand-500, .bg-brand-600, .bg-gradient-to-r.from-brand-600, .bg-gradient-to-r.from-brand-500, .bg-gradient-to-br.from-brand-500) {
    color: var(--on-accent) !important;
}
html.glass :is(.bg-brand-500, .bg-brand-600, .bg-gradient-to-r.from-brand-600, .bg-gradient-to-r.from-brand-500, .bg-gradient-to-br.from-brand-500) .text-white {
    color: inherit !important;
}

/* Campos */
html.glass :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) {
    color: #f8f3ed;
}
html.glass ::placeholder { color: rgba(248, 243, 237, .42); }
html.glass option { background-color: #1b1713; color: #f8f3ed; }
html.glass ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }

/* ── Menu lateral ── */
/* Celular: a gaveta ganha fundo firme */
html.glass #sidebar {
    background: var(--glass-solid) !important;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border-color: var(--glass-edge);
}
html.glass #main-area > header {
    background: color-mix(in srgb, var(--glass-dark) 62%, transparent) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);
    border-color: var(--glass-edge) !important;
}

/* Computador: barra flutuante em pílula, só ícones (a classe .collapsed é
   ligada por script.js; aqui só o desenho). Não vale na Dock nem na Esfera,
   que escondem a barra. */
@media (min-width: 768px) {
    html.glass body:not(.rb-menu-dock):not(.rb-menu-infinite) #sidebar {
        left: 16px; top: 16px; bottom: 16px;
        width: 68px !important;
        border: 1px solid var(--glass-edge);
        border-radius: 34px;
        background: var(--glass-panel) !important;
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        box-shadow: 0 24px 60px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .1);
        /* sem overflow:hidden: ele cortaria o balão dos submenus, que abre fora da pílula */
    }
    html.glass body:not(.rb-menu-dock):not(.rb-menu-infinite) #main-area { margin-left: 100px !important; }
    html.glass #sidebar #collapse-sidebar-btn { display: none; }
    html.glass #sidebar > div:first-child { justify-content: center; padding-left: 0; padding-right: 0; height: 64px; border-color: var(--glass-edge); }
    html.glass #sidebar > div:nth-child(2) { border-color: var(--glass-edge); }
    html.glass #sidebar > div:last-child { border-color: var(--glass-edge); padding: 10px 0 14px; }

    /* A lista rola quando a janela é baixa: barra fina, com a mesma reserva dos
       dois lados para os ícones continuarem no centro da pílula. */
    html.glass #sidebar.collapsed nav {
        scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; scrollbar-gutter: stable both-edges;
    }
    html.glass #sidebar.collapsed nav::-webkit-scrollbar { display: block; width: 4px; }
    html.glass #sidebar.collapsed nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 99px; }

    /* botões do menu: círculos de 40 px; o ativo vira um círculo branco */
    html.glass #sidebar.collapsed :is(.tab-button, [id^="submenu-toggle-"]) {
        width: 40px; height: 40px; margin: 1px auto; padding: 0 !important;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%; border-left-width: 0 !important;
    }
    html.glass #sidebar.collapsed .tab-button.tab-active {
        background: #fff !important; color: #1d1510;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    }
    html.glass #sidebar.collapsed .tab-button.tab-active .sidebar-text { color: #1d1510; }
    html.glass #sidebar.collapsed nav > div:not([id]) { padding-left: 14px; padding-right: 14px; }
    /* botões de baixo (Configurações, Log, Auditoria, Canais, Painel Admin, Usuários, Sair) */
    html.glass #sidebar.collapsed #settings-button,
    html.glass #sidebar.collapsed #log-button,
    html.glass #sidebar.collapsed #audit-button,
    html.glass #sidebar.collapsed #canais-button,
    html.glass #sidebar.collapsed #admin-button,
    html.glass #sidebar.collapsed #users-button,
    html.glass #sidebar.collapsed #logout-button {
        width: 36px; height: 36px; margin: 0 auto; padding: 0;
        border-radius: 50%;
    }
    html.glass #sidebar > div:last-child > * + * { margin-top: 2px !important; }
    html.glass #sidebar .sidebar-user-card { background: transparent !important; padding: 2px; }
    /* selo de aviso: no canto de cima do círculo */
    html.glass #sidebar.collapsed [id$="-badge"] { top: 0; right: 2px; }
}

/* Submenu (marketplaces com variações, Marketing Shopee) da barra só de
   ícones: abre ao lado, como um balão. O JS marca .flyout-open e põe o `top`.
   A barra tem transform/backdrop-filter, então o `fixed` é relativo a ELA
   (não à janela): left em % da largura da barra, top medido a partir dela. */
#sidebar.collapsed .submenu-children.flyout-open {
    display: block !important;
    position: fixed;
    left: calc(100% + 12px);
    min-width: 200px;
    padding: 6px;
    z-index: 60;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 18px;
    background: var(--glass-solid, #1b1713);
    -webkit-backdrop-filter: blur(30px) saturate(135%);
    backdrop-filter: blur(30px) saturate(135%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
#sidebar.collapsed .submenu-children.flyout-open .tab-button {
    width: 100%; height: auto; margin: 0; padding: 9px 12px !important;
    justify-content: flex-start; border-radius: 12px; border-left-width: 0 !important;
}
#sidebar.collapsed .submenu-children.flyout-open .sidebar-text {
    opacity: 1; max-width: none; pointer-events: auto;
}
#sidebar.collapsed .submenu-children.flyout-open .tab-button .tab-icon { margin-right: 10px; }

/* ── Seletor da cor do Vidro (Configurações) ── */
.glass-tone-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.glass-tone-swatches button.sw {
    width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 2px 8px rgba(0, 0, 0, .25);
}
.glass-tone-swatches button.sw.on { border-color: #f8f3ed; transform: scale(1.08); }
.glass-tone-custom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.glass-tone-custom input[type=color] { width: 46px; height: 40px; padding: 2px; border-radius: 10px; cursor: pointer; background: transparent; }
.glass-tone-custom input[type=text] { width: 112px; height: 40px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.glass-tone-custom button {
    height: 40px; padding: 0 14px; border-radius: 10px; font-weight: 700; cursor: pointer;
    border: 1px solid rgba(148, 163, 184, .4); background: transparent; color: inherit;
}
.glass-tone-custom button:hover { border-color: var(--glass-tone, #f4a259); color: var(--glass-tone, #f4a259); }

/* ── Menos efeito para quem prefere, e onde o navegador não suporta ── */
@media (prefers-reduced-transparency: reduce) {
    html.glass { --glass-surface: color-mix(in srgb, var(--glass-dark) 95%, transparent); --glass-surface2: rgba(255, 255, 255, .08); }
    html.glass * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.glass { --glass-surface: color-mix(in srgb, var(--glass-dark) 94%, transparent); --glass-surface2: rgba(255, 255, 255, .08); --glass-panel: var(--glass-solid); }
}