/* GoldTicket Studio dashboard light-mode safety guard.
   The real source of truth for the visible theme is html[data-theme].
   The quick theme toggle can intentionally differ from the stored account
   preference, so this file must NOT depend on React choosing its light branch.
   When the page is visibly light, every dashboard surface is forced to a true
   white surface even if an old dark Tailwind utility is still present. */

html[data-theme="light"] body .app-shell main .page-enter .studio-dashboard :is(
  .studio-dashboard-hero,
  .studio-kpi-card,
  .studio-analytics-card,
  .studio-events-card
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e4e4e2 !important;
  color: #18181b !important;
  box-shadow: 0 1px 2px rgba(24,24,27,.025), 0 8px 24px rgba(24,24,27,.045) !important;
}

html[data-theme="light"] body .app-shell main .page-enter .studio-dashboard .studio-dashboard-hero {
  background: linear-gradient(135deg, #ffffff 0%, #fdfcf8 100%) !important;
  background-color: #ffffff !important;
  border-color: #dfd9c8 !important;
}

html[data-theme="light"] body .app-shell main .page-enter .studio-dashboard :is(
  .studio-kpi-card,
  .studio-analytics-card,
  .studio-events-card
):hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #d5cfbf !important;
  box-shadow: 0 2px 4px rgba(24,24,27,.035), 0 12px 28px rgba(24,24,27,.065) !important;
}

html[data-theme="light"] body .app-shell main .page-enter .studio-dashboard div[class*="border-dashed"] {
  background: #fafaf9 !important;
  background-image: none !important;
  border-color: #deddd9 !important;
  color: #71717a !important;
}

html[data-theme="light"] body .app-shell main .page-enter .studio-dashboard .studio-event-row {
  background: #fafaf9 !important;
  border-color: #e5e4df !important;
}

html[data-theme="light"] body .app-shell main .page-enter .studio-dashboard .studio-event-row:hover {
  background: #fffaf0 !important;
  border-color: #d7c279 !important;
}

@media (max-width: 767px) {
  html[data-theme="light"] body .app-shell main .page-enter .studio-dashboard :is(
    .studio-dashboard-hero,
    .studio-kpi-card,
    .studio-analytics-card,
    .studio-events-card
  ) {
    border-radius: 18px !important;
  }
}