/**
 * ============================================================================
 * FILE SPEC (Especificação do Arquivo)
 * ============================================================================
 * @Objetivo       Centralizar a estilização global, a estruturação de layout e o sistema de design (Design System) da aplicação, garantindo suporte nativo a múltiplos temas e modos de exibição (claro/escuro).
 * @Dependencias   Nenhuma dependência externa. Consumido diretamente pelo `app.php` e aplicado aos elementos criados dinamicamente pelos arquivos `.js`.
 * @Saidas         Regras de renderização visual, breakpoints de responsividade via media queries e keyframes de animação nativa (toasts, modais e spinners).
 * @RegrasCriticas Sistema de Temas Estrito: As cores dos componentes devem utilizar exclusivamente variáveis CSS (`var(--nome-da-cor)`). É proibido o uso de cores fixas (hex/rgb) nas classes, exceto nas definições do `:root` ou escopos de tema (`.dark-mode`, `.theme-soft`).
 * Hierarquia de Empilhamento (Z-Index): A ordem de sobreposição deve ser rigidamente respeitada para evitar bugs visuais: Popovers (50) < Backdrops (90) < Drawers/Painéis Laterais (100) < Modais Centralizados (110) < Toasts/Notificações (999999).
 * Preservação de Transições: Alterações de estado (hover, active, toggle de classes) devem se apoiar na regra de transição global `transition: background-color 0.3s, color 0.3s, border-color 0.3s;` definida no seletor universal `*`.
 * ============================================================================
 */
/* === TEMA 1: TECH (ROXO) - MODO CLARO (PADRÃO) === */
:root {
    --background: oklch(0.9851 0 0);
    --foreground: oklch(0 0 0);
    --card: oklch(1 0 267.5100);
    --card-foreground: oklch(0.2103 0 267.5100);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0 0 0);
    --primary: oklch(0.5144 0.1605 267.4400);
    --primary-foreground: oklch(0.9700 0.0140 254.6040);
    --secondary: oklch(0.9400 0 0);
    --secondary-foreground: oklch(0.2500 0 0);
    --muted: oklch(0.9700 0 0);
    --muted-foreground: oklch(0.4400 0 0);
    --accent: oklch(0.9214 0.0248 257.6500);
    --accent-foreground: oklch(0.2571 0.1161 272.2400);
    --destructive: oklch(0.5800 0.2200 27);
    --destructive-foreground: oklch(0.9700 0.0140 254.6040);
    --border: oklch(0.9200 0 0);
    --toast-bg: oklch(0.25 0 0);
    --toast-success: oklch(0.55 0.12 180);
    --toast-error: oklch(0.55 0.22 27);
    --toast-warning: oklch(0.72 0.15 70);
    --toast-foreground: oklch(0.9851 0 0);
    --font-sans: Geist, sans-serif;
    --radius: 0.5rem;
    --shadow-sm: 0.25px 1px 3px 0px hsl(236.5829 64.2250% 21.4383% / 0.15), 0.25px 1px 2px -1px hsl(236.5829 64.2250% 21.4383% / 0.15);
}

/* === TEMA 1: TECH (ROXO) - MODO ESCURO === */
body.dark-mode {
    --background: oklch(0 0 0);
    --foreground: oklch(1 0 0);
    --card: oklch(0.2103 0 267.5100);
    --card-foreground: oklch(0.9461 0 0);
    --popover: oklch(0.2103 0 267.5100);
    --popover-foreground: oklch(1 0 0);
    --primary: oklch(0.5144 0.1605 267.4400);
    --primary-foreground: oklch(0.9700 0.0140 254.6040);
    --secondary: oklch(0.2500 0 0);
    --secondary-foreground: oklch(0.9400 0 0);
    --muted: oklch(0.2300 0 0);
    --muted-foreground: oklch(0.7200 0 0);
    --accent: oklch(0.3200 0 0);
    --accent-foreground: oklch(0.9214 0.0248 257.6500);
    --destructive: oklch(0.48 0.18 27);
    --border: oklch(0.2600 0 0);
}

/* === TEMA 2: SOFT (TEAL) - MODO CLARO === */
body.theme-soft {
    --background: oklch(0.9605 0.0046 258.3248);
    --foreground: oklch(0.2153 0.0187 235.1251);
    --card: oklch(1.0000 0 0);
    --card-foreground: oklch(0.2153 0.0187 235.1251);
    --primary: oklch(0.4335 0.0754 182.2315);
    --primary-foreground: oklch(1.0000 0 0);
    --secondary: oklch(0.9644 0.0208 166.1014);
    --secondary-foreground: oklch(0.4335 0.0754 182.2315);
    --muted: oklch(0.9605 0.0046 258.3248);
    --muted-foreground: oklch(0.5589 0.0255 233.7233);
    --accent: oklch(0.7610 0.2015 149.7403);
    --accent-foreground: oklch(1.0000 0 0);
    --border: oklch(0.9436 0.0051 228.8204);
    --radius: 1rem;
}

/* === TEMA 2: SOFT (TEAL) - MODO ESCURO === */
body.theme-soft.dark-mode {
    --background: oklch(0.1854 0.0182 238.2143);
    --foreground: oklch(0.9436 0.0051 228.8204);
    --card: oklch(0.2848 0.0230 235.6578);
    --card-foreground: oklch(0.9436 0.0051 228.8204);
    --primary: oklch(0.6509 0.1283 170.4258);
    --primary-foreground: oklch(0.2153 0.0187 235.1251);
    --secondary: oklch(0.2933 0.0423 172.8195);
    --secondary-foreground: oklch(0.6509 0.1283 170.4258);
    --muted: oklch(0.2456 0.0195 239.1061);
    --muted-foreground: oklch(0.6637 0.0236 235.1968);
    --accent: oklch(0.7610 0.2015 149.7403);
    --accent-foreground: oklch(0.2153 0.0187 235.1251);
    --border: oklch(0.3351 0.0253 234.8586);
}

/* === ESTRUTURA BASE === */
* { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); transition: background-color 0.3s, color 0.3s, border-color 0.3s; scroll-behavior: smooth; }
body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); line-height: 1.5; padding: 1rem 1.5rem; font-size: 1rem; }
.container { max-width: 1440px; margin: 0 auto; width: 100%; }

/* Header, Logo e Slogan */
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.header-left { display: flex; flex-direction: column; gap: 0.25rem; }
.logo { font-size: 1.75rem; font-weight: bold; color: var(--primary); }
.logo span { color: var(--foreground); }
.slogan-container { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.slogan { font-size: 0.875rem; color: var(--muted-foreground); }
.btn-text { background: transparent; border: none; color: var(--primary); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: color 0.2s; padding: 0; }
.btn-text:hover { color: var(--foreground); text-decoration: underline; }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Botões */
.btn-primary { background-color: var(--primary); color: var(--primary-foreground); border: none; padding: 0.5rem 1.5rem; border-radius: var(--radius); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 40px; }
.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline { background-color: transparent; color: var(--foreground); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: var(--radius); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 38px; font-size: 0.875rem; }
.btn-outline:hover { background-color: var(--muted); }
.btn-destructive { background-color: var(--destructive); color: var(--destructive-foreground); border: none; padding: 0.5rem 1rem; border-radius: var(--radius); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 38px; font-size: 0.875rem; }
.btn-destructive:hover { opacity: 0.9; }
.icon-btn { background: transparent; border: none; color: var(--muted-foreground); cursor: pointer; padding: 0.5rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background-color: var(--accent); color: var(--accent-foreground); }

/* Botões de Ação na Tabela */
.action-cell { display: flex; gap: 0.25rem; justify-content: flex-end; }
.btn-action { background: transparent; border: none; cursor: pointer; padding: 0.35rem; color: var(--muted-foreground); border-radius: 4px; display: inline-flex; transition: all 0.2s; }
.btn-action.edit:hover { color: var(--primary); background-color: var(--accent); }
.btn-action.delete:hover { color: var(--destructive); background-color: rgba(255, 0, 0, 0.1); }

/* Formulários e Overlays (Gavetas/Modais/Popovers) */
.form-input { width: 100%; padding: 0.5rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--border); background-color: var(--background); color: var(--foreground); font-size: 0.875rem; outline: none; }
.form-input:focus { border-color: var(--primary); }
.config-select { cursor: pointer; }

.popover-wrapper { position: relative; }
.popover-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 280px; background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); z-index: 50; transform-origin: top right; transform: scaleY(0); opacity: 0; visibility: hidden; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s, visibility 0.2s; }
.popover-panel.open { transform: scaleY(1); opacity: 1; visibility: visible; }
.popover-header { padding: 1rem; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--foreground); }
.popover-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.config-item { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); text-align: left; }
.toggle-group { display: flex; background-color: var(--muted); border-radius: var(--radius); padding: 0.25rem; }
.toggle-btn { flex: 1; background: transparent; border: none; padding: 0.35rem 0.5rem; border-radius: calc(var(--radius) - 2px); cursor: pointer; color: var(--muted-foreground); font-size: 0.875rem; }
.toggle-btn.active, .toggle-btn:hover { background-color: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }

.backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); z-index: 90; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.backdrop.open { opacity: 1; visibility: visible; }

.drawer-panel { position: fixed; top: 0; right: -450px; width: 100%; max-width: 450px; height: 100vh; background-color: var(--card); box-shadow: -4px 0 25px rgba(0, 0, 0, 0.2); z-index: 100; display: flex; flex-direction: column; transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.drawer-panel.open { right: 0; }
.drawer-header { padding: 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.drawer-header h3 { font-size: 1.125rem; color: var(--foreground); }
.drawer-body { padding: 1.5rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.drawer-footer { padding: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 1rem; background-color: var(--muted); }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-label { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }

.modal-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 110; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0.3s; }
.modal-wrapper.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-panel { background-color: var(--card); border-radius: var(--radius); border: 1px solid var(--border); width: 100%; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2); transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; margin: 1rem; }
.modal-wrapper.open .modal-panel { transform: scale(1); }
.modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 1.125rem; color: var(--foreground); }
.modal-body { padding: 1.5rem; color: var(--muted-foreground); }
.modal-footer { padding: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 1rem; background-color: var(--muted); border-radius: 0 0 var(--radius) var(--radius); }
.sortable-item {
    display: flex; 
    align-items: center; 
    gap: 8px; 
    cursor: grab; 
    padding: 6px 4px; 
    border: 1px solid transparent; 
    border-radius: 4px; 
    background: var(--background);
}

.upload-area { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; background-color: var(--background); }
.upload-area:hover { border-color: var(--primary); background-color: var(--muted); }
.upload-area svg { color: var(--muted-foreground); width: 40px; height: 40px; }
.upload-text { color: var(--foreground); font-weight: 500; font-size: 1rem;}
.upload-subtext { color: var(--muted-foreground); font-size: 0.875rem; }
.download-link-container { text-align: center; margin-top: 1.25rem; }
.download-link { color: var(--primary); font-size: 0.875rem; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem;}
.download-link:hover { text-decoration: underline; }

/* Cards Superiores */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 1rem; }
.card { background-color: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); }
.card:hover { border-color: var(--primary); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.card-icon { display: inline-flex; padding: 0.75rem; border-radius: var(--radius); margin-bottom: 1rem; }
.card:first-child .card-icon { background-color: var(--muted); color: var(--primary); }
.card:last-child .card-icon { background-color: var(--secondary); color: var(--secondary-foreground); }
.card:hover .card-icon { background-color: var(--primary); color: var(--primary-foreground); }
.card h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.card p { color: var(--muted-foreground); font-size: 0.875rem; }

/* === ABAS E TABELA PRINCIPAL === */
.table-section { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 3rem; }
.toolbar { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 1.5rem; border-bottom: 1px solid var(--border); background-color: var(--muted); flex-wrap: wrap; gap: 1rem; }
.tabs-nav { display: flex; gap: 1.5rem; }
.tab-btn { background: transparent; border: none; padding: 1.25rem 0; color: var(--muted-foreground); font-weight: 500; font-size: 1rem; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.tab-btn:hover { color: var(--foreground); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.toolbar-actions { display: flex; gap: 1rem; padding-bottom: 0.75rem; align-items: center; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box svg { position: absolute; left: 0.75rem; color: var(--muted-foreground); width: 16px; height: 16px; pointer-events: none; }
.search-box input { padding-left: 2.25rem; width: 250px; }
.tab-content { display: none; }
.tab-content.active { display: block; }

table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { background-color: var(--card); color: var(--muted-foreground); font-size: 0.75rem; text-transform: uppercase; white-space: nowrap; }
.text-right { text-align: right; }
.number-input { width: 70px; text-align: right; padding: 0.3rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--background); color: var(--foreground); outline: none; }
.number-input:focus { border-color: var(--primary); }
.empty-state { text-align: center; padding: 3rem; color: var(--muted-foreground); font-size: 0.875rem; white-space: pre-line; }
.td-checkbox { cursor: pointer; text-align: center; transition: background-color 0.2s; }
.td-checkbox:hover { background-color: var(--muted); }

.inline-alert { background-color: var(--destructive); color: var(--destructive-foreground); padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; font-weight: 500; }
.inline-alert .icon-btn { color: inherit; padding: 0.25rem; margin-left: 1rem;}
.inline-alert .icon-btn:hover { background-color: rgba(255, 255, 255, 0.2); }

/* === SEÇÃO SOBRE (LANDING PAGE) === */
.about-section { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 4rem 3rem; background-color: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); margin-bottom: 2rem; }
.about-content h2 { font-size: 1.875rem; color: var(--foreground); margin-bottom: 1.25rem; line-height: 1.2; }
.about-content p { color: var(--muted-foreground); line-height: 1.7; margin-bottom: 1rem; }
.about-image { display: flex; justify-content: center; align-items: center; width: 100%; }
.gif-placeholder { width: 100%; aspect-ratio: 16/9; background-color: var(--background); border: 2px dashed var(--border); border-radius: var(--radius); display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--muted-foreground); gap: 1rem; padding: 2rem; text-align: center; }

/* === NOVA SEÇÃO DOWNLOAD INTEGRADOR === */
.download-section { padding: 4rem 3rem; text-align: center; background-color: var(--card); margin-bottom: 2rem; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.download-section h2 { font-size: 1.875rem; color: var(--foreground); margin-bottom: 1.25rem; }
.download-section p { color: var(--muted-foreground); max-width: 700px; margin: 0 auto 2rem auto; line-height: 1.6; }

/* === SEÇÃO PREÇO === */
.pricing-section { padding: 4rem 3rem; text-align: center; margin-bottom: 2rem; }
.pricing-section h2 { font-size: 1.875rem; color: var(--foreground); margin-bottom: 1rem; }
.pricing-card { max-width: 400px; margin: 2rem auto 0; background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow-sm); }
.pricing-price { font-size: 3rem; font-weight: bold; color: var(--foreground); margin: 1.5rem 0; }
.pricing-price span { font-size: 1rem; color: var(--muted-foreground); font-weight: normal; }
.pricing-features { text-align: left; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.feature-item { display: flex; align-items: center; gap: 0.75rem; color: var(--muted-foreground); font-size: 0.875rem; }
.feature-item svg { color: var(--primary); width: 20px; height: 20px; flex-shrink: 0; }

/* Rodapé */
.footer { text-align: center; padding: 2rem 0; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 0.875rem; margin-top: 2rem; }

/* === RESPONSIVIDADE PARA SMARTPHONES === */
@media (max-width: 768px) {
    body { padding: 0.5rem; }
    .container { padding: 0; }
    .header { flex-direction: column; align-items: flex-start; margin-bottom: 1.5rem; }
    .header-actions { width: 100%; justify-content: space-between; margin-top: 1rem; }
    .grid-cards { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
    .toolbar { padding: 1rem 0.5rem; flex-direction: column; align-items: stretch; gap: 1rem; }
    .tabs-nav { width: 100%; overflow-x: auto; gap: 1rem; padding-bottom: 0.5rem; }
    .tab-btn { white-space: nowrap; padding: 0.75rem 0; }
    .toolbar-actions { flex-direction: column; width: 100%; align-items: stretch; }
    .search-box input { width: 100%; }
    .btn-outline, .btn-primary, .btn-destructive { width: 100%; justify-content: center; }
    th, td { padding: 0.75rem 1rem; }
    .about-section { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.5rem; }
    .download-section { padding: 3rem 1.5rem; }
    .pricing-section { padding: 3rem 1.5rem; }
    .pricing-card { padding: 2rem 1.5rem; }
}
.toast-msg {
    min-width: 250px;
    max-width: 350px;
    background-color: var(--toast-bg);
    color: var(--toast-foreground);
    padding: 14px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(20px);
    animation: toastSlideIn 0.3s forwards;
}
.toast-msg.success { background-color: var(--toast-success); }
.toast-msg.error { background-color: var(--toast-error); }
.toast-msg.warning { background-color: var(--toast-warning); color: var(--foreground); }

.toast-msg span { flex-grow: 1; }
.toast-msg button {
    background: transparent; border: none; color: inherit; cursor: pointer;
    font-size: 1.2rem; margin-left: 15px; opacity: 0.7; transition: opacity 0.2s;
}
.toast-msg button:hover { opacity: 1; }
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999; /* Garante que fique na frente de todos os modais */
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@keyframes toastSlideIn {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes toastFadeOut {
    to { opacity: 0; transform: translateY(-10px); }
}