/* Agoran RTC — panel themes (built 2026-11-09)
   User panel  : Coral Light  (user's pick, picture 4)
   Admin panel : Violet Light (user's pick, picture 2)
   The active panel is set on <html data-panel="user|admin"> by the route
   watcher injected in index.html (/admin* -> admin, everything else -> user).
   This file loads AFTER the app CSS, so these rules win. */

/* ============ shared shape language (both panels) ============ */
.rounded-lg { border-radius: 14px !important; }
.rounded-xl { border-radius: 18px !important; }
.rounded-2xl { border-radius: 22px !important; }
.shadow-sm { box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .05) !important; }
.shadow-md { box-shadow: 0 4px 10px rgba(15, 23, 42, .06), 0 10px 28px rgba(15, 23, 42, .08) !important; }
.shadow-lg { box-shadow: 0 8px 18px rgba(15, 23, 42, .07), 0 18px 44px rgba(15, 23, 42, .10) !important; }

/* ============ USER PANEL — Coral Light ============ */
html[data-panel="user"] {
  --brand-blue: #f4502a;
  --brand-electric: #ff7a3c;
  --brand-purple: #ff8a5c;
  --brand-navy: #2d1a12;
  --brand-dark: #241611;
  --brand-light: #fff9f2;
  --brand-border: #f3e2d3;
  --brand-text-muted: #97816f;
}
html[data-panel="user"] body {
  background: #fff9f2 !important;
  background-image: radial-gradient(1100px 480px at 85% -10%, rgba(255, 122, 60, .10), transparent 60%),
                    radial-gradient(900px 420px at -10% 0%, rgba(244, 80, 42, .07), transparent 55%) !important;
  color: #33231a !important;
}
html[data-panel="user"] .bg-blue-600 { background-color: #f4502a !important; }
html[data-panel="user"] .hover\:bg-blue-700:hover { background-color: #d93e1d !important; }
html[data-panel="user"] .bg-blue-700 { background-color: #d93e1d !important; }
html[data-panel="user"] .bg-blue-500 { background-color: #ff7a3c !important; }
html[data-panel="user"] .bg-blue-50 { background-color: #fff1e6 !important; }
html[data-panel="user"] .bg-blue-100 { background-color: #ffe3d1 !important; }
html[data-panel="user"] .text-blue-600 { color: #e8481f !important; }
html[data-panel="user"] .text-blue-700 { color: #c93a17 !important; }
html[data-panel="user"] .text-blue-500 { color: #f4632f !important; }
html[data-panel="user"] .border-blue-600 { border-color: #f4502a !important; }
html[data-panel="user"] .border-blue-200 { border-color: #ffd9c4 !important; }
html[data-panel="user"] .border-blue-100 { border-color: #ffe7d6 !important; }
html[data-panel="user"] .ring-blue-500, html[data-panel="user"] .ring-blue-600 { --tw-ring-color: rgba(244, 80, 42, .45) !important; }
html[data-panel="user"] .from-blue-600 { --tw-gradient-from: #f4502a var(--tw-gradient-via-position) !important; --tw-gradient-to: rgba(244, 80, 42, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html[data-panel="user"] .to-blue-600 { --tw-gradient-to: #f4502a var(--tw-gradient-to-position) !important; }
html[data-panel="user"] .from-sky-500 { --tw-gradient-from: #ff7a3c var(--tw-gradient-via-position) !important; --tw-gradient-to: rgba(255, 122, 60, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html[data-panel="user"] .to-sky-500, html[data-panel="user"] .to-cyan-500 { --tw-gradient-to: #ffb03a var(--tw-gradient-to-position) !important; }
html[data-panel="user"] [fill="#2563eb"] { fill: #f4502a !important; }
html[data-panel="user"] [fill="#0ea5e9"] { fill: #ff7a3c !important; }
html[data-panel="user"] [stroke="#2563eb"] { stroke: #f4502a !important; }
html[data-panel="user"] ::selection { background: #f4502a; color: #fff; }
html[data-panel="user"] aside {
  background: linear-gradient(180deg, #ffffff 0%, #fff4ea 100%) !important;
  border-right: 1px solid #f3e2d3 !important;
}

/* ============ ADMIN PANEL — Violet Light ============ */
html[data-panel="admin"] {
  --brand-blue: #7c3aed;
  --brand-electric: #8b5cf6;
  --brand-purple: #a78bfa;
  --brand-navy: #1e1033;
  --brand-dark: #170b29;
  --brand-light: #faf8ff;
  --brand-border: #e4dcf7;
  --brand-text-muted: #7a6f96;
}
html[data-panel="admin"] body {
  background: #faf8ff !important;
  background-image: radial-gradient(1100px 480px at 85% -10%, rgba(139, 92, 246, .12), transparent 60%),
                    radial-gradient(900px 420px at -10% 0%, rgba(124, 58, 237, .08), transparent 55%) !important;
  color: #241536 !important;
}
html[data-panel="admin"] .bg-blue-600 { background-color: #7c3aed !important; }
html[data-panel="admin"] .hover\:bg-blue-700:hover { background-color: #6d28d9 !important; }
html[data-panel="admin"] .bg-blue-700 { background-color: #6d28d9 !important; }
html[data-panel="admin"] .bg-blue-500 { background-color: #8b5cf6 !important; }
html[data-panel="admin"] .bg-blue-50 { background-color: #f1eafe !important; }
html[data-panel="admin"] .bg-blue-100 { background-color: #e4dcf7 !important; }
html[data-panel="admin"] .text-blue-600 { color: #7c3aed !important; }
html[data-panel="admin"] .text-blue-700 { color: #6d28d9 !important; }
html[data-panel="admin"] .text-blue-500 { color: #8b5cf6 !important; }
html[data-panel="admin"] .border-blue-600 { border-color: #7c3aed !important; }
html[data-panel="admin"] .border-blue-200 { border-color: #d6c8f5 !important; }
html[data-panel="admin"] .border-blue-100 { border-color: #e9e2fb !important; }
html[data-panel="admin"] .ring-blue-500, html[data-panel="admin"] .ring-blue-600 { --tw-ring-color: rgba(124, 58, 237, .45) !important; }
html[data-panel="admin"] .from-blue-600 { --tw-gradient-from: #7c3aed var(--tw-gradient-via-position) !important; --tw-gradient-to: rgba(124, 58, 237, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html[data-panel="admin"] .to-blue-600 { --tw-gradient-to: #7c3aed var(--tw-gradient-to-position) !important; }
html[data-panel="admin"] .from-sky-500 { --tw-gradient-from: #8b5cf6 var(--tw-gradient-via-position) !important; --tw-gradient-to: rgba(139, 92, 246, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html[data-panel="admin"] .to-sky-500, html[data-panel="admin"] .to-cyan-500 { --tw-gradient-to: #c084fc var(--tw-gradient-to-position) !important; }
html[data-panel="admin"] [fill="#2563eb"] { fill: #7c3aed !important; }
html[data-panel="admin"] [fill="#0ea5e9"] { fill: #8b5cf6 !important; }
html[data-panel="admin"] [stroke="#2563eb"] { stroke: #7c3aed !important; }
html[data-panel="admin"] ::selection { background: #7c3aed; color: #fff; }
html[data-panel="admin"] aside {
  background: linear-gradient(180deg, #4c1d95 0%, #6d28d9 55%, #7c3aed 100%) !important;
  border-right: none !important;
  color: #ede9fe !important;
}
html[data-panel="admin"] aside a, html[data-panel="admin"] aside span,
html[data-panel="admin"] aside p, html[data-panel="admin"] aside div {
  color: #ede9fe;
}
html[data-panel="admin"] aside .bg-blue-600, html[data-panel="admin"] aside .bg-blue-50,
html[data-panel="admin"] aside .bg-blue-100 {
  background-color: rgba(255, 255, 255, .16) !important;
}
html[data-panel="admin"] aside .text-blue-600, html[data-panel="admin"] aside .text-blue-500 {
  color: #fff !important;
}