/**
 * Glassmorphism e blobs animados para o shell do app (carregado em base.html).
 * Páginas que estendem base herdam .glass-panel e o fundo sem login-page no dark.
 */

html.dark body:not(.login-page) {
    background-color: #0f172a !important;
}

.bg-shape {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    animation: float 20s infinite alternate ease-in-out;
    pointer-events: none;
}

/* Variáveis definidas em .app-glass-backdrop; temas em base.html / classes abaixo */
.app-glass-backdrop {
    --blob-shape-1: color-mix(in srgb, var(--tenant-login-accent, #6366f1) 20%, transparent);
    --blob-shape-2: rgba(139, 92, 246, 0.15);
    --blob-shape-3: rgba(16, 185, 129, 0.1);
}

/* cor_nav: três tons harmônicos a partir da cor do tenant */
.app-glass-backdrop.glass-blobs-tenant-nav {
    --blob-shape-1: color-mix(in srgb, var(--tenant-nav-color) 22%, transparent);
    --blob-shape-2: color-mix(in srgb, var(--tenant-nav-color) 14%, #a855f7 38%, transparent);
    --blob-shape-3: color-mix(in srgb, var(--tenant-nav-color) 12%, #14b8a6 42%, transparent);
}

/* Sem cor_nav: paletas por área (alinhadas aos ícones / fallback Tailwind) */
.app-glass-backdrop.glass-blobs-page-blue {
    --blob-shape-1: color-mix(in srgb, #3b82f6 22%, transparent);
    --blob-shape-2: color-mix(in srgb, #60a5fa 16%, transparent);
    --blob-shape-3: color-mix(in srgb, #2563eb 12%, #6366f1 28%, transparent);
}

.app-glass-backdrop.glass-blobs-page-amber {
    --blob-shape-1: color-mix(in srgb, #eab308 20%, transparent);
    --blob-shape-2: color-mix(in srgb, #facc15 14%, transparent);
    --blob-shape-3: color-mix(in srgb, #ca8a04 12%, #f59e0b 30%, transparent);
}

.app-glass-backdrop.glass-blobs-page-orange {
    --blob-shape-1: color-mix(in srgb, #f97316 20%, transparent);
    --blob-shape-2: color-mix(in srgb, #fb923c 15%, transparent);
    --blob-shape-3: color-mix(in srgb, #ea580c 12%, #fbbf24 25%, transparent);
}

.app-glass-backdrop.glass-blobs-page-red {
    --blob-shape-1: color-mix(in srgb, #ef4444 20%, transparent);
    --blob-shape-2: color-mix(in srgb, #f87171 14%, transparent);
    --blob-shape-3: color-mix(in srgb, #dc2626 12%, #f43f5e 22%, transparent);
}

.app-glass-backdrop.glass-blobs-page-cyan {
    --blob-shape-1: color-mix(in srgb, #06b6d4 20%, transparent);
    --blob-shape-2: color-mix(in srgb, #22d3ee 14%, transparent);
    --blob-shape-3: color-mix(in srgb, #0891b2 12%, #38bdf8 28%, transparent);
}

.app-glass-backdrop.glass-blobs-page-green {
    --blob-shape-1: color-mix(in srgb, #22c55e 20%, transparent);
    --blob-shape-2: color-mix(in srgb, #4ade80 14%, transparent);
    --blob-shape-3: color-mix(in srgb, #16a34a 12%, #10b981 30%, transparent);
}

.app-glass-backdrop.glass-blobs-page-indigo {
    --blob-shape-1: color-mix(in srgb, #6366f1 22%, transparent);
    --blob-shape-2: color-mix(in srgb, #818cf8 15%, transparent);
    --blob-shape-3: color-mix(in srgb, #4f46e5 12%, #a855f7 26%, transparent);
}

.shape-1 {
    width: 600px;
    height: 600px;
    background: var(--blob-shape-1);
    top: -200px;
    left: -200px;
}

.shape-2 {
    width: 500px;
    height: 500px;
    background: var(--blob-shape-2);
    bottom: -100px;
    right: -100px;
    animation-delay: -5s;
}

.shape-3 {
    width: 400px;
    height: 400px;
    background: var(--blob-shape-3);
    top: 40%;
    left: 30%;
    animation-delay: -10s;
}

@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -50px) rotate(10deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/*
 * Shell logado: :where() zera a especificidade destas regras para que classes Tailwind
 * (border, dark:border-*, border-l-*, etc.) não sejam sobrescritas pelo vidro padrão.
 * Sem utilitário de borda no HTML, o fallback abaixo ainda define a moldura do painel.
 */
:where(#content-wrapper.app-shell-glass .glass-panel) {
    background: rgba(255, 255, 255);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(.dark #content-wrapper.app-shell-glass .glass-panel) {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

:where(#content-wrapper.app-shell-glass .glass-panel:hover) {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.1);
}

:where(.dark #content-wrapper.app-shell-glass .glass-panel:hover) {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Listas / painéis grandes: sem translate no hover */
:where(#content-wrapper.app-shell-glass .glass-panel.glass-panel--no-hover-lift:hover) {
    transform: none;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

:where(.dark #content-wrapper.app-shell-glass .glass-panel.glass-panel--no-hover-lift:hover) {
    transform: none;
    background: rgba(30, 41, 59, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* ====================================================
 * Glass Inputs — controles de formulário com visual
 * consistente: fundo translúcido, borda suave e anel
 * de foco na cor do tenant.
 *
 * Uso: adicione a classe .glass-input a qualquer
 * <input>, <select> ou <textarea>.
 * Para campos de busca com ícone à esquerda, adicione
 * também .glass-input--search (padding-left 2.5 rem).
 * ==================================================== */

.glass-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #111827;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(209, 213, 219, 0.85);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.glass-input::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.glass-input:focus {
    border-color: var(--tenant-btn-primary, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-btn-primary, #6366f1) 20%, transparent);
    background: rgba(255, 255, 255, 0.75);
}

.glass-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.glass-input[readonly] {
    background: rgba(243, 244, 246, 0.5);
    cursor: default;
}

/* Variante para busca com ícone à esquerda */
.glass-input--search {
    padding-left: 2.5rem;
}

/* ── Dark mode ── */
html.dark .glass-input {
    color: #e5e7eb;
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    color-scheme: dark;
}

html.dark .glass-input::placeholder {
    color: #6b7280;
    opacity: 1;
}

html.dark .glass-input:focus {
    border-color: color-mix(in srgb, var(--tenant-btn-primary, #818cf8) 80%, white 10%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-btn-primary, #818cf8) 25%, transparent);
    background: rgba(15, 23, 42, 0.6);
}

html.dark .glass-input[readonly] {
    background: rgba(30, 41, 59, 0.3);
}

/* ======================================================
 * TomSelect — glass-input aplicado ao .ts-control
 * ====================================================== */

/* Controle */
.ts-control.glass-input {
    background-color: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #111827 !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    /* background-color em vez de background: evita animar background-position
       (o que causava o chevron "voar" do canto superior-esquerdo ao desfocar) */
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease !important;
}

.ts-wrapper.focus .ts-control.glass-input,
.ts-wrapper.input-active .ts-control.glass-input {
    border-color: var(--tenant-btn-primary, #6366f1) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-btn-primary, #6366f1) 20%, transparent) !important;
    background-color: rgba(255, 255, 255, 0.75) !important;
}

html.dark .ts-control.glass-input,
.dark .ts-control.glass-input {
    color: #e5e7eb !important;
    background-color: rgb(18, 25, 44) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .ts-wrapper.focus .ts-control.glass-input,
html.dark .ts-wrapper.input-active .ts-control.glass-input,
.dark .ts-wrapper.focus .ts-control.glass-input,
.dark .ts-wrapper.input-active .ts-control.glass-input {
    border-color: color-mix(in srgb, var(--tenant-btn-primary, #818cf8) 80%, white 10%) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-btn-primary, #818cf8) 25%, transparent) !important;
    background-color: rgba(15, 23, 42, 0.6) !important;
}

/* Placeholder não cortado (single) */
.ts-wrapper.single .ts-control.glass-input input {
    width: 100% !important;
    min-width: 4rem !important;
    opacity: 1 !important;
}

/* Placeholder não cortado (multi) */
.ts-wrapper:not(.single) .ts-control.glass-input input {
    min-width: 8rem !important;
    opacity: 1 !important;
}

/* Item selecionado — fundo transparente para não sobrepor o glass */
.ts-control.glass-input .item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
}

html.dark .ts-control.glass-input .item,
.dark .ts-control.glass-input .item {
    background: transparent !important;
    border: none !important;
    color: #e5e7eb !important;
}

/* Dropdown glass — appended ao body via dropdownParent */
.ts-dropdown {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12) !important;
    z-index: 9999 !important;
    overflow: hidden !important;
}

.ts-dropdown .option {
    color: #111827 !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: color-mix(in srgb, var(--tenant-btn-primary, #6366f1) 12%, transparent) !important;
    color: var(--tenant-btn-primary, #4f46e5) !important;
}

html.dark .ts-dropdown,
.dark .ts-dropdown {
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

html.dark .ts-dropdown .option,
.dark .ts-dropdown .option {
    color: #e5e7eb !important;
}

html.dark .ts-dropdown .option:hover,
html.dark .ts-dropdown .option.active,
.dark .ts-dropdown .option:hover,
.dark .ts-dropdown .option.active {
    background-color: color-mix(in srgb, var(--tenant-btn-primary, #818cf8) 18%, transparent) !important;
    color: color-mix(in srgb, var(--tenant-btn-primary, #818cf8) 90%, white) !important;
}