/* ============================================================
   Ezzetilo MASTER: camada visual do painel administrativo
   Sempre dark ("centro de comando"), mesma paleta do Ezzetilo:
   verde #1D9E75 (primário) + navy #0B1F3A + roxo IA #534AB7.
   Todas as animações vivem aqui (CSS puro, com reduced-motion).
   ============================================================ */

/* Tokens do Master. As cores ESTRUTURAIS (fundo, texto, borda, superfície)
   viram variáveis pra o painel ter tema claro; as SEMÂNTICAS (verde de sucesso,
   vermelho de erro, roxo da IA, âmbar de alerta) ficam iguais nos dois temas:
   elas comunicam estado, não profundidade. Mesmo mecanismo do painel do
   cliente: atributo data-theme no <html> (ver app/master_data.js). */
:root, :root[data-theme="dark"] {
  --mx-bg: #0A1118;
  --mx-sidebar: #07142A;
  --mx-sidebar-2: #0B1F3A;
  --mx-accent: #534AB7;
  --mx-accent-2: #7C6FF0;
  --mx-green: #1D9E75;
  --mx-green-2: #1DD882;

  /* estruturais */
  --mx-card: #101B26;      /* fundo do cartão */
  --mx-surface: #202C33;   /* input, superfície elevada */
  --mx-surface-2: #16222E; /* skeleton, faixa alternada */
  --mx-border: #1A2733;    /* divisória padrão */
  --mx-border-2: #223040;  /* borda de controle */
  --mx-border-3: #2A3B4D;  /* borda de input */
  --mx-text: #E9EDEF;      /* texto principal */
  --mx-text-2: #C5CDD3;    /* texto secundário */
  --mx-text-3: #8696A0;    /* texto de apoio (o mais usado do painel) */
  --mx-text-4: #667781;    /* legenda fraca */
  --mx-text-5: #51677C;    /* quase invisível */
  --mx-text-6: #3D4F60;    /* separador em texto */
  --mx-shadow: 0 12px 28px rgba(0,0,0,.42);
  --mx-side-text: #E9EDEF;
  --mx-side-text-2: #8696A0;
}

:root[data-theme="light"] {
  --mx-bg: #F2F5F8;
  --mx-sidebar: #0B1F3A;   /* a barra lateral segue escura nos dois temas:
                              é a identidade do "centro de comando" */
  --mx-sidebar-2: #07142A;

  --mx-card: #FFFFFF;
  --mx-surface: #F0F3F6;
  --mx-surface-2: #E7ECF1;
  --mx-border: #DCE3EA;
  --mx-border-2: #CFD8E1;
  --mx-border-3: #C3CFDA;
  --mx-text: #16222E;
  --mx-text-2: #33475B;
  --mx-text-3: #5E7285;
  --mx-text-4: #74869A;
  --mx-text-5: #8FA0B2;
  --mx-text-6: #A9B7C4;
  --mx-shadow: 0 10px 24px rgba(16,34,52,.10);
  /* barra lateral segue escura no tema claro: texto continua claro */
  --mx-side-text: #E9EDEF;
  --mx-side-text-2: #8696A0;
}

body.mx-body { background: var(--mx-bg); color: var(--mx-text); }

/* ── Entradas (stagger via --i definido inline) ─────────────── */
@keyframes mxRise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mx-rise { opacity: 0; animation: mxRise .5s cubic-bezier(.22,.9,.32,1) forwards; animation-delay: calc(var(--i, 0) * 70ms); }

@keyframes mxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.mx-fade { animation: mxFadeIn .3s ease both; }

/* ── Fundo "aurora" do login e do dashboard ─────────────────── */
@keyframes mxAurora {
  0%   { transform: translate(-8%, -6%) rotate(0deg) scale(1); }
  33%  { transform: translate(6%, 4%) rotate(40deg) scale(1.15); }
  66%  { transform: translate(-4%, 7%) rotate(80deg) scale(.95); }
  100% { transform: translate(-8%, -6%) rotate(0deg) scale(1); }
}
.mx-aurora { position: absolute; inset: -30%; pointer-events: none; filter: blur(70px); opacity: .5;
  background:
    radial-gradient(38% 30% at 22% 28%, rgba(29,158,117,.55), transparent 60%),
    radial-gradient(30% 26% at 76% 22%, rgba(83,74,183,.5), transparent 60%),
    radial-gradient(34% 30% at 60% 78%, rgba(29,216,130,.28), transparent 60%);
  animation: mxAurora 22s ease-in-out infinite; }

/* ── Pulso ao vivo ──────────────────────────────────────────── */
@keyframes mxPulse {
  0% { box-shadow: 0 0 0 0 rgba(29,216,130,.55); }
  70% { box-shadow: 0 0 0 9px rgba(29,216,130,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,216,130,0); }
}
.mx-live { width: 8px; height: 8px; border-radius: 999px; background: var(--mx-green-2); animation: mxPulse 1.8s ease-out infinite; }
.mx-live.red { background: #E24B4A; animation-name: mxPulseRed; }
@keyframes mxPulseRed {
  0% { box-shadow: 0 0 0 0 rgba(226,75,74,.55); }
  70% { box-shadow: 0 0 0 9px rgba(226,75,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,75,74,0); }
}

/* ── Skeleton shimmer ───────────────────────────────────────── */
@keyframes mxShimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.mx-skel { border-radius: 8px; background: linear-gradient(90deg, var(--mx-surface-2) 25%, var(--mx-surface) 40%, var(--mx-surface-2) 55%);
  background-size: 800px 100%; animation: mxShimmer 1.3s linear infinite; }

/* ── Cartões: borda viva + elevação no hover ────────────────── */
.mx-card { background: var(--mx-card); border: 1px solid var(--mx-border-2); border-radius: 14px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; position: relative; }
.mx-card:hover { transform: translateY(-2px); border-color: rgba(29,158,117,.55); box-shadow: var(--mx-shadow); }

/* KPI com fio de gradiente no topo */
.mx-kpi { overflow: hidden; }
.mx-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--mx-green), var(--mx-accent-2), var(--mx-green));
  background-size: 200% 100%; animation: mxFlow 6s linear infinite; }
@keyframes mxFlow { from { background-position: 0% 0; } to { background-position: 200% 0; } }

/* ── Barras de gráfico crescem ao montar ────────────────────── */
@keyframes mxBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mx-bar { transform-origin: bottom; animation: mxBarGrow .7s cubic-bezier(.22,.9,.32,1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }

/* ── Badge MASTER ───────────────────────────────────────────── */
.mx-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #fff;
  background: linear-gradient(120deg, var(--mx-accent), var(--mx-accent-2), var(--mx-accent));
  background-size: 200% 100%; animation: mxFlow 5s linear infinite; }

/* ── Sidebar do master ──────────────────────────────────────── */
.mx-side { background: linear-gradient(180deg, var(--mx-sidebar-2) 0%, var(--mx-sidebar) 100%); }
.mx-side .mx-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  color: #8CA3B8; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, transform .12s ease; }
/* --mx-side-text, não --mx-text: a barra é escura nos dois temas. */
.mx-side .mx-item:hover { background: rgba(255,255,255,.05); color: var(--mx-side-text); transform: translateX(2px); }
.mx-side .mx-item.active { background: rgba(29,158,117,.16); color: var(--mx-green-2); border-color: rgba(29,158,117,.25); }
.mx-side .mx-item.active svg { filter: drop-shadow(0 0 6px rgba(29,216,130,.6)); }

/* ── Tabelas ────────────────────────────────────────────────── */
.mx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mx-table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mx-text-3); padding: 10px 14px; border-bottom: 1px solid var(--mx-border-2); white-space: nowrap; }
.mx-table td { padding: 11px 14px; border-bottom: 1px solid var(--mx-border); color: var(--mx-text); }
.mx-table tbody tr { transition: background .13s ease; }
.mx-table tbody tr:hover { background: rgba(29,158,117,.06); }

/* ── Botão de ação com brilho ───────────────────────────────── */
.mx-btn-glow { position: relative; overflow: hidden; }
.mx-btn-glow::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg); transition: left .45s ease; }
.mx-btn-glow:hover::after { left: 120%; }

/* ── Número que "acende" ao atualizar ───────────────────────── */
@keyframes mxTick { 0% { color: var(--mx-green-2); text-shadow: 0 0 14px rgba(29,216,130,.5); } 100% { color: inherit; text-shadow: none; } }
.mx-tick { animation: mxTick .9s ease; }

/* ── Scrollbar discreta ─────────────────────────────────────── */
.mx-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.mx-scroll::-webkit-scrollbar-thumb { background: var(--mx-border-2); border-radius: 999px; }
.mx-scroll::-webkit-scrollbar-thumb:hover { background: #2E4055; }

/* ── Progresso fino (margem, uso) ───────────────────────────── */
.mx-meter { height: 6px; border-radius: 999px; background: var(--mx-border); overflow: hidden; }
.mx-meter > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mx-green), var(--mx-green-2));
  transform-origin: left; animation: mxMeter .8s cubic-bezier(.22,.9,.32,1) backwards; }
@keyframes mxMeter { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .mx-rise, .mx-fade, .mx-bar, .mx-meter > div { animation-duration: .01ms !important; animation-delay: 0ms !important; }
  .mx-aurora, .mx-kpi::before, .mx-badge, .mx-live { animation: none !important; }
  .mx-card:hover { transform: none; }
}