/* TipzPop Studio theme — creator dashboard + SuperAdmin.
 *
 * Applied by adding `tz-studio` to the app root. It re-skins the legacy utility classes used inside the
 * older tabs (so they match the new look without rewriting thousands of lines) and adds light motion.
 *
 * Motion rules: transform + opacity only, one-shot entrances, no infinite loops, no backdrop-filter.
 */

.tz-studio {
  --st-canvas: #08070f;
  --st-surface: #110f1d;
  --st-elev: #181427;
  --st-line: rgba(255, 255, 255, 0.08);
  --st-grad: linear-gradient(115deg, #7c5cff 0%, #ff4fd8 100%);
  background: var(--st-canvas);
  scrollbar-width: thin;
  scrollbar-color: #2b2543 transparent;
}
.tz-studio ::selection { background: rgba(124, 92, 255, 0.45); color: #fff; }

/* ---------- palette remap for legacy classes ---------- */
.tz-studio [class*="bg-[#09090b]"], .tz-studio [class*="bg-[#0A0A0B]"], .tz-studio [class*="bg-[#07060d]"], .tz-studio [class*="bg-[#08080a]"] { background-color: var(--st-canvas); }
.tz-studio [class*="bg-[#111114]"], .tz-studio [class*="bg-[#121215]"], .tz-studio [class*="bg-[#0f0c1d]"], .tz-studio [class*="bg-[#0c0d14]"],
.tz-studio [class*="bg-slate-900"] { background-color: var(--st-surface); }
.tz-studio [class*="bg-[#1A1A1E]"], .tz-studio [class*="bg-[#16122e]"], .tz-studio [class*="bg-slate-950"] { background-color: var(--st-elev); }
.tz-studio [class*="border-white/[0.08]"] { border-color: var(--st-line); }

.tz-studio input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
.tz-studio textarea, .tz-studio select {
  background-color: var(--st-elev);
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.tz-studio input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):focus,
.tz-studio textarea:focus, .tz-studio select:focus {
  outline: none; border-color: #9d86ff; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.22);
}
.tz-studio input[type="range"] { accent-color: #ff4fd8; }
.tz-studio input[type="checkbox"], .tz-studio input[type="radio"] { accent-color: #7c5cff; }

.tz-studio button, .tz-studio a { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.15s ease; }
.tz-studio button:not(:disabled):active { transform: scale(0.97); }
.tz-studio table tbody tr { transition: background-color 0.15s ease; }
.tz-studio table tbody tr:hover { background-color: rgba(255, 255, 255, 0.025); }

/* ---------- navigation ---------- */
.tz-nav-on { background: linear-gradient(135deg, rgba(124, 92, 255, 0.32), rgba(255, 79, 216, 0.18)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.tz-nav-bar { background: var(--st-grad); }
.tz-navbtn { transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.tz-navbtn:hover { transform: translateX(2px); }

/* ---------- surfaces ---------- */
.tz-kpi { position: relative; overflow: hidden; transition: border-color 0.25s ease, transform 0.25s ease; }
.tz-kpi::after { content: ''; position: absolute; right: -42px; bottom: -64px; width: 170px; height: 170px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.2), transparent); }
.tz-kpi:hover { border-color: rgba(157, 134, 255, 0.4); transform: translateY(-2px); }
.tz-panel { transition: border-color 0.25s ease; }
.tz-panel:hover { border-color: rgba(255, 255, 255, 0.14); }

/* ---------- chart ---------- */
.tz-bar { background: linear-gradient(180deg, #ff4fd8, #7c5cff); transform-origin: bottom; animation: stGrow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
.tz-bar-0 { background: rgba(255, 255, 255, 0.07); }
.tz-fill { transform-origin: left; animation: stFill 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ---------- motion ---------- */
@keyframes stRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes stGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes stFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stToast { from { opacity: 0; transform: translate(-50%, -14px) scale(0.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes stFade { from { opacity: 0; } to { opacity: 1; } }

/* a tab/page mounts => its blocks rise in one after another */
.tz-studio .tz-main > * { animation: stFade 0.25s ease both; }
.tz-studio .tz-main > * > * { animation: stRise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tz-studio .tz-main > * > *:nth-child(1) { animation-delay: 0.02s; }
.tz-studio .tz-main > * > *:nth-child(2) { animation-delay: 0.07s; }
.tz-studio .tz-main > * > *:nth-child(3) { animation-delay: 0.12s; }
.tz-studio .tz-main > * > *:nth-child(4) { animation-delay: 0.17s; }
.tz-studio .tz-main > * > *:nth-child(5) { animation-delay: 0.22s; }
.tz-studio .tz-main > * > *:nth-child(6) { animation-delay: 0.27s; }
.tz-studio .tz-main > * > *:nth-child(n+7) { animation-delay: 0.32s; }
.tz-stagger > * { animation: stRise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tz-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.tz-stagger > *:nth-child(2) { animation-delay: 0.11s; }
.tz-stagger > *:nth-child(3) { animation-delay: 0.17s; }
.tz-stagger > *:nth-child(4) { animation-delay: 0.23s; }
.tz-toast-in { animation: stToast 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.tz-pop-in { animation: stRise 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .tz-studio .tz-main > *, .tz-studio .tz-main > * > *, .tz-stagger > *, .tz-bar, .tz-fill, .tz-toast-in, .tz-pop-in { animation: none !important; }
  .tz-navbtn:hover, .tz-kpi:hover { transform: none; }
}