/* Layout colorido do painel PHP — carrega depois de panel.css */

body.magic-ui {
  --primary: #f59e0b;
  --primary-hover: #d97706;
  background: #070b16;
  color: #f8fafc;
}

.magic-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.magic-aurora {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse 50% 40% at 10% 0%, rgba(59, 130, 246, 0.45), transparent 60%),
    radial-gradient(ellipse 40% 35% at 90% 10%, rgba(244, 114, 182, 0.35), transparent 55%),
    radial-gradient(ellipse 45% 40% at 70% 100%, rgba(20, 184, 166, 0.28), transparent 60%),
    radial-gradient(ellipse 30% 25% at 20% 80%, rgba(245, 158, 11, 0.22), transparent 60%);
  animation: magic-drift 28s ease-in-out infinite alternate;
}

.magic-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 75%);
}

@keyframes magic-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}

body.magic-ui .app-shell,
body.magic-ui .login-shell {
  position: relative;
  z-index: 1;
}

body.magic-ui .sidebar {
  background: rgba(8, 12, 24, 0.82);
  border-right: 1px solid rgba(148, 163, 184, 0.14);
  backdrop-filter: blur(16px);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.28);
}

body.magic-ui .side-brand-text {
  background: linear-gradient(90deg, #60a5fa, #fbbf24, #fb7185);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

body.magic-ui .nav-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #93c5fd;
}

body.magic-ui .nav-group-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--dot, #38bdf8);
  box-shadow: 0 0 10px var(--dot, #38bdf8);
}

body.magic-ui .nav-group:nth-child(1) .nav-group-label { --dot: #38bdf8; color: #7dd3fc; }
body.magic-ui .nav-group:nth-child(2) .nav-group-label { --dot: #a78bfa; color: #ddd6fe; }
body.magic-ui .nav-group:nth-child(3) .nav-group-label { --dot: #fbbf24; color: #fde68a; }
body.magic-ui .nav-group:nth-child(4) .nav-group-label { --dot: #2dd4bf; color: #99f6e4; }

body.magic-ui .side-link {
  border-radius: 12px;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

body.magic-ui .side-link:hover {
  background: rgba(59, 130, 246, 0.14);
  transform: translateX(3px);
}

body.magic-ui .side-link.is-active {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.22), rgba(59, 130, 246, 0.12));
  box-shadow: inset 3px 0 0 #fbbf24, 0 8px 24px rgba(0, 0, 0, 0.2);
}

body.magic-ui .side-link.is-active .side-ico { color: #fbbf24; }

body.magic-ui .main-col { background: transparent; }

body.magic-ui .topbar {
  background: rgba(8, 12, 24, 0.55);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  backdrop-filter: blur(14px);
}

body.magic-ui .wrap {
  animation: magic-page-in 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes magic-page-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

body.magic-ui .dash-greeting h1,
body.magic-ui .page-title {
  background: linear-gradient(90deg, #f8fafc, #93c5fd 40%, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.magic-ui .stats-grid { gap: 14px; }

body.magic-ui .stat-card,
body.magic-ui .card,
body.magic-ui .login-box {
  position: relative;
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

body.magic-ui .stat-card {
  overflow: hidden;
}

body.magic-ui .stat-card::before,
body.magic-ui .card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent-bar, linear-gradient(#60a5fa, #22d3ee));
  pointer-events: none;
  z-index: 0;
}

body.magic-ui .stats-grid .stat-card:nth-child(1) { --accent-bar: linear-gradient(#f59e0b, #fb7185); }
body.magic-ui .stats-grid .stat-card:nth-child(2) { --accent-bar: linear-gradient(#22c55e, #2dd4bf); }
body.magic-ui .stats-grid .stat-card:nth-child(3) { --accent-bar: linear-gradient(#60a5fa, #a78bfa); }
body.magic-ui .stats-grid .stat-card:nth-child(4) { --accent-bar: linear-gradient(#f472b6, #fbbf24); }

body.magic-ui .stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 191, 36, 0.4) !important;
}

body.magic-ui .card:hover {
  border-color: rgba(251, 191, 36, 0.4) !important;
}

body.magic-ui .stat-card-icon {
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

body.magic-ui .stats-grid .stat-card:nth-child(1) .stat-card-icon { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
body.magic-ui .stats-grid .stat-card:nth-child(2) .stat-card-icon { background: rgba(34, 197, 94, 0.2); color: #86efac; }
body.magic-ui .stats-grid .stat-card:nth-child(3) .stat-card-icon { background: rgba(96, 165, 250, 0.2); color: #bfdbfe; }
body.magic-ui .stats-grid .stat-card:nth-child(4) .stat-card-icon { background: rgba(244, 114, 182, 0.2); color: #fbcfe8; }

body.magic-ui .stat-card-value {
  font-size: 1.7rem;
  font-weight: 800;
}

body.magic-ui .magic-glow {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: radial-gradient(160px circle at var(--mx, -200px) var(--my, -200px), rgba(192, 132, 252, 0.35), transparent 70%);
}

body.magic-ui .card > :not(.magic-glow),
body.magic-ui .row-actions,
body.magic-ui .profile-menu {
  position: relative;
  z-index: 1;
}

body.magic-ui .table-wrap {
  overflow: visible;
}

body.magic-ui .dropdown-panel {
  z-index: 80;
}

body.magic-ui .dropdown-panel.is-fixed {
  z-index: 400;
}

body.magic-ui .dropdown-panel button,
body.magic-ui .dropdown-panel .menu-item {
  background: transparent;
  box-shadow: none;
  border-radius: 8px;
  color: #f8fafc;
}

body.magic-ui .stat-card:hover .magic-glow,
body.magic-ui .card:hover .magic-glow { opacity: 1; }

body.magic-ui .dash-columns { gap: 16px; }

body.magic-ui .quick-actions { gap: 10px; }

body.magic-ui .quick-action {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.55);
  box-shadow: inset 3px 0 0 var(--qa, #38bdf8);
}

body.magic-ui .quick-action:nth-child(4n + 1) { --qa: #38bdf8; }
body.magic-ui .quick-action:nth-child(4n + 2) { --qa: #fbbf24; }
body.magic-ui .quick-action:nth-child(4n + 3) { --qa: #2dd4bf; }
body.magic-ui .quick-action:nth-child(4n + 4) { --qa: #c084fc; }

body.magic-ui .quick-action:hover {
  transform: translateY(-3px);
  background: rgba(30, 41, 59, 0.8);
}

body.magic-ui .quick-action .qa-ico { color: var(--qa, #93c5fd); }

body.magic-ui button,
body.magic-ui .btn {
  background: linear-gradient(120deg, #f59e0b, #f97316 45%, #8b5cf6);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.28);
}

body.magic-ui .btn-ghost,
body.magic-ui .icon-btn {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: none;
  color: #e2e8f0;
}

body.magic-ui input,
body.magic-ui select,
body.magic-ui textarea {
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  color: #f8fafc;
}

body.magic-ui input:focus,
body.magic-ui select:focus,
body.magic-ui textarea:focus {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

body.magic-ui table {
  border-collapse: separate;
  border-spacing: 0;
}

body.magic-ui th {
  color: #fde68a;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.magic-ui tbody tr { transition: background 0.15s ease; }
body.magic-ui tbody tr:hover { background: rgba(59, 130, 246, 0.1); }

body.magic-ui .login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

body.magic-ui .login-box {
  width: min(420px, 100%);
  padding: 28px;
  border-radius: 22px !important;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.25), 0 24px 60px rgba(0, 0, 0, 0.4);
}

body.magic-ui .settings-nav a.is-active,
body.magic-ui .settings-nav a[class*="is-active"] {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.25), rgba(59, 130, 246, 0.15));
  color: #fff;
}

@media (max-width: 900px) {
  body.magic-ui .dash-columns,
  body.magic-ui .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body.magic-ui .stats-grid,
  body.magic-ui .dash-columns { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .magic-aurora,
  body.magic-ui .wrap { animation: none !important; }
}