@import "tailwindcss";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@theme {
  --color-primary: var(--theme-primary, #3b82f6);
  --color-secondary: #8b5cf6;
  --color-accent: #f43f5e;

  /* Usage of CSS variables for theme switching */
  --color-background: var(--background);
  --color-surface: var(--surface-color);
  --color-border: var(--border-color);

  --font-display: var(--theme-font, 'Inter', system-ui, sans-serif);
}

/* Hide Next.js 15 Dev Indicators (Static/Dynamic Icon & Route Loading Bar) */
nextjs-portal,
[data-nextjs-indicator],
[data-nextjs-portal],
.__next-static-indicator,
#nextjs-static-indicator,
[data-nextjs-router-progress],
[data-nextjs-page-transition],
.next-loading-indicator,
[data-nextjs-route-announcer],
#next-route-announcer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  position: fixed !important;
  z-index: -9999 !important;
}

/* Additional aggressive hiding for any portal elements */
[nextjs-portal=""],
[nextjs-portal="true"] {
  display: none !important;
  visibility: hidden !important;
}

:root {
  /* Default Light (Ceramic) - Prevents flash of dark theme on hydration */
  --background: #ffffff;
  --foreground: #0f172a;
  --border-color: rgba(0, 0, 0, 0.08);
  --surface-color: rgba(255, 255, 255, 0.8);
  --spotlight-opacity: 0.08;
  --nav-bg: rgba(255, 255, 255, 0.8);
  --bento-bg-1: rgba(0, 0, 0, 0.02);
  --bento-bg-2: rgba(0, 0, 0, 0.01);
  --bento-border-hover: rgba(0, 0, 0, 0.15);
  --text-primary: #0f172a;
  --text-secondary: #475569;

  /* Theme defaults */
  --theme-primary: #3b82f6;
  --theme-primary-rgb: 59,130,246;
  --theme-primary-hover: #2563eb;
  --theme-radius: 12px;
  --theme-font: 'Inter', system-ui, sans-serif;
}

[data-theme="dark"] {
  /* Obsidian Dark */
  --background: #020204;
  --foreground: #ffffff;
  --border-color: rgba(255, 255, 255, 0.08);
  --surface-color: rgba(10, 10, 15, 0.6);
  --spotlight-opacity: 0.15;
  --nav-bg: rgba(2, 2, 4, 0.8);
  --bento-bg-1: rgba(255, 255, 255, 0.03);
  --bento-bg-2: rgba(255, 255, 255, 0.01);
  --bento-border-hover: rgba(255, 255, 255, 0.15);
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
}

[data-theme="oled"] {
  /* OLED Pure Black - Battery saving for AMOLED displays */
  --background: #000000;
  --foreground: #ffffff;
  --border-color: rgba(255, 255, 255, 0.06);
  --surface-color: rgba(20, 20, 25, 0.4);
  --spotlight-opacity: 0.1;
  --nav-bg: rgba(0, 0, 0, 0.85);
  --bento-bg-1: rgba(255, 255, 255, 0.02);
  --bento-bg-2: rgba(255, 255, 255, 0);
  --bento-border-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
}

/* Landing/marketing pages — orange brand (dashboard keeps blue primary) */
.landing-brand {
  --theme-primary: #ea580c;
  --theme-primary-rgb: 234, 88, 12;
  --theme-primary-hover: #f97316;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-display);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Respect reduced motion preferences globally */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile perf guard for heavy visual effects */
@media (max-width: 640px) {
  .animate-blob,
  .aurora-bg {
    animation-duration: 40s !important;
    filter: blur(56px) !important;
    opacity: 0.2 !important;
  }
}

/* Background Patterns */
.bg-grid-pattern {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, var(--border-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

/* Landing hero — full-screen grid & mockup depth */
.hero-grid-bg {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.35) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.22;
}

[data-theme="dark"] .hero-grid-bg {
  opacity: 0.1;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.2) 1px, transparent 1px);
}

.hero-radial-fade {
  background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 0%, #FAFAF9 72%);
}

[data-theme="dark"] .hero-radial-fade {
  background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 0%, #0B1120 72%);
}

.hero-mockup-wrap {
  perspective: 1400px;
}

.hero-mockup-card {
  transform: rotateY(-3deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease;
}

@media (min-width: 1024px) {
  .hero-mockup-wrap:hover .hero-mockup-card {
    transform: rotateY(-1deg) rotateX(1deg) translateY(-4px);
    box-shadow:
      0 12px 40px rgba(15, 23, 42, 0.1),
      0 48px 80px -20px rgba(15, 23, 42, 0.22);
  }
}

@media (max-width: 1023px) {
  .hero-mockup-card {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mockup-card {
    transform: none !important;
    transition: none !important;
  }
}

/* Spotlights & Glows */
.spotlight {
  background: radial-gradient(circle at center, rgba(59, 130, 246, var(--spotlight-opacity)) 0%, transparent 70%);
}

/* Glass Utilities */
.glass-panel {
  background: var(--surface-color);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
}

.glass-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-color);
}

/* Text Gradients */
.text-gradient {
  background: linear-gradient(to right bottom, var(--text-primary) 30%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-primary {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Bento Grid Card */
.bento-card {
  background: linear-gradient(180deg, var(--bento-bg-1) 0%, var(--bento-bg-2) 100%);
  border: 1px solid var(--border-color);
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.bento-card:hover {
  border-color: var(--bento-border-hover);
  background: linear-gradient(180deg, var(--bento-bg-1) 0%, var(--bento-bg-1) 100%);
  /* Slight change */
  transform: translateY(-2px);
}

/* Animations */
@keyframes shimmery {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  background-size: 200% 100%;
  animation: shimmery 3s infinite linear;
}

@keyframes aurora {
  0% {
    background-position: 50% 50%, 50% 50%;
  }

  100% {
    background-position: 350% 50%, 350% 50%;
  }
}

.aurora-bg {
  background-image:
    repeating-linear-gradient(100deg, var(--color-primary) 10%, var(--color-secondary) 20%, transparent 30%, transparent 70%),
    repeating-linear-gradient(10deg, var(--color-accent) 10%, var(--color-primary) 30%, var(--color-secondary) 50%, transparent 60%);
  background-size: 200% 100%;
  filter: blur(80px);
  opacity: 0.3;
  animation: aurora 20s linear infinite;
}

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
}

.animate-blob-slow {
  animation: blob-float 20s infinite alternate ease-in-out;
  will-change: transform;
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-reveal {
  animation: fade-in-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}

/* Hide Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #333;
}

::-webkit-scrollbar-thumb:hover {
  background: #999;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ===== NEW PREMIUM ANIMATIONS ===== */

/* Animated Gradient Border */
.animated-gradient-border {
  position: relative;
  z-index: 0;
}

.animated-gradient-border::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
  background-size: 300% 100%;
  animation: gradient-rotate 4s linear infinite;
}

@keyframes gradient-rotate {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }
}

/* Glow Effect */
.glow-effect {
  transition: all 0.3s ease;
}

.glow-effect:hover {
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.4),
    0 0 60px rgba(139, 92, 246, 0.2);
}

/* Shimmer Text */
.shimmer-text {
  background: linear-gradient(90deg,
      var(--foreground) 0%,
      var(--foreground) 40%,
      rgba(139, 92, 246, 1) 50%,
      var(--foreground) 60%,
      var(--foreground) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-slide 3s ease-in-out infinite;
}

@keyframes shimmer-slide {

  0%,
  100% {
    background-position: 200% 50%;
  }

  50% {
    background-position: 0% 50%;
  }
}

/* Float Animation */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

/* Pulse Glow */
.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }

  50% {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
  }
}

/* 3D Tilt Container */
.tilt-container {
  perspective: 1000px;
}

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.tilt-card:hover {
  transform: rotateX(5deg) rotateY(-5deg) translateZ(10px);
}

/* Gradient Text Animation */
.gradient-text-animated {
  background: linear-gradient(270deg,
      #60a5fa,
      #a78bfa,
      #f472b6,
      #60a5fa);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Typing Cursor */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--color-primary);
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Card Shine Effect */
.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      transparent 20%,
      rgba(255, 255, 255, 0.03) 40%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0.03) 60%,
      transparent 80%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.card-shine:hover::after {
  transform: translateX(100%);
}

/* Magnetic Button */
.magnetic-btn {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Rainbow Border */
.rainbow-border {
  position: relative;
}

.rainbow-border::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
      #3b82f6,
      #8b5cf6,
      #ec4899,
      #f59e0b,
      #10b981,
      #3b82f6);
  animation: spin 4s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ===== CUSTOM UTILITIES ===== */
.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Blob animation delays */
.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* ===== THEME SYSTEM ===== */

/* Dynamic primary color utilities */
.bg-theme-primary { background-color: var(--theme-primary); }
.text-theme-primary { color: var(--theme-primary); }
.border-theme-primary { border-color: var(--theme-primary); }
.bg-theme-primary\/10 { background-color: rgba(var(--theme-primary-rgb), 0.1); }
.bg-theme-primary\/20 { background-color: rgba(var(--theme-primary-rgb), 0.2); }
.border-theme-primary\/20 { border-color: rgba(var(--theme-primary-rgb), 0.2); }
.shadow-theme-primary\/25 { box-shadow: 0 10px 15px -3px rgba(var(--theme-primary-rgb), 0.25); }
.shadow-theme-primary\/30 { box-shadow: 0 10px 15px -3px rgba(var(--theme-primary-rgb), 0.3); }
.ring-theme-primary\/20 { --tw-ring-color: rgba(var(--theme-primary-rgb), 0.2); }

/* Compact mode */
[data-compact="true"] .compact-padding { padding: 0.5rem !important; }
[data-compact="true"] .compact-text { font-size: 0.75rem !important; }
[data-compact="true"] .compact-gap { gap: 0.25rem !important; }

/* Disable animations */
[data-animations="false"] * {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
}

/* ===== MOBILE APP EXPERIENCE ===== */

/* Safe area padding for notch/home indicator devices */
.safe-area-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Mobile bottom nav styling */
.mobile-bottom-nav {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

/* ===== CORPORATE DASHBOARD THEME ===== */
.dashboard-pro {
  --dash-accent: #4f46e5;
  --dash-accent-hover: #4338ca;
  --dash-accent-soft: rgba(79, 70, 229, 0.08);
  --dash-accent-border: rgba(79, 70, 229, 0.18);
  --dash-surface-elevated: color-mix(in srgb, var(--surface-color) 96%, #fff);
  --dash-sidebar-bg: color-mix(in srgb, var(--background) 94%, #f8fafc);
  --dash-radius: 14px;
  --dash-radius-lg: 18px;
  --dash-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --dash-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
}

[data-theme="dark"] .dashboard-pro {
  --dash-sidebar-bg: color-mix(in srgb, var(--background) 88%, #0f172a);
  --dash-surface-elevated: color-mix(in srgb, var(--surface-color) 92%, #1e293b);
  --dash-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --dash-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.dashboard-pro .dash-card {
  background: var(--dash-surface-elevated);
  border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
  border-radius: var(--dash-radius-lg);
  box-shadow: var(--dash-shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard-pro .dash-card:hover {
  box-shadow: var(--dash-shadow-md);
  border-color: color-mix(in srgb, var(--dash-accent-border) 60%, var(--border-color));
}

.dashboard-pro .dash-nav-active {
  background: var(--dash-accent-soft) !important;
  color: var(--dash-accent) !important;
  border-color: var(--dash-accent-border) !important;
  box-shadow: none !important;
}

.dashboard-pro .dash-btn-primary {
  background: var(--dash-accent);
  color: #fff;
  border-radius: 12px;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease;
}

.dashboard-pro .dash-btn-primary:hover {
  background: var(--dash-accent-hover);
}

.dashboard-pro .dash-kpi-icon {
  background: var(--dash-accent-soft);
  border: 1px solid var(--dash-accent-border);
  color: var(--dash-accent);
}

/* Dashboard specific mobile app-shell */
/* Dashboard header — desktop glass bar */
.dashboard-header {
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 72%, transparent), color-mix(in srgb, var(--background) 88%, transparent));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}

.dashboard-header-inner {
  position: relative;
}

.dashboard-search-shell button {
  width: 100%;
  justify-content: flex-start;
  gap: 0.65rem;
  padding: 0.62rem 0.9rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
  background: color-mix(in srgb, var(--surface-color) 65%, transparent);
  color: var(--muted-foreground, #94a3b8);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-search-shell button:hover {
  border-color: color-mix(in srgb, #ea580c 35%, var(--border-color));
  background: color-mix(in srgb, var(--surface-color) 82%, transparent);
  color: var(--foreground);
  box-shadow: 0 4px 18px color-mix(in srgb, #ea580c 8%, transparent);
}

.dashboard-search-shell kbd {
  margin-left: auto;
  background: color-mix(in srgb, var(--background) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

@media (max-width: 1023px) {
  .dashboard-mobile-shell {
    background:
      radial-gradient(120% 80% at 8% -10%, rgba(79, 70, 229, 0.06), transparent 56%),
      radial-gradient(100% 60% at 100% 8%, rgba(99, 102, 241, 0.04), transparent 60%),
      var(--background);
  }

  .dashboard-pro.dashboard-mobile-shell {
    background: var(--background);
    max-width: 100vw;
    overflow-x: hidden;
  }

  .dashboard-mobile-header {
    margin: 0.5rem auto 0;
    width: calc(100% - 0.9rem);
    max-width: calc(100% - 0.9rem);
    box-sizing: border-box;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transition: margin 0.25s ease, border-radius 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  }

  .dashboard-mobile-header-compact {
    margin: 0.25rem auto 0;
    width: calc(100% - 0.6rem);
    max-width: calc(100% - 0.6rem);
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
    background: color-mix(in srgb, var(--surface-color) 94%, transparent);
  }

  .dashboard-mobile-title-chip {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    max-width: 130px;
  }

  .dashboard-mobile-content {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(calc(100% - 0.9rem), 460px);
  }

  .mobile-bottom-nav-inner {
    border-radius: 26px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-color) 92%, transparent);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

.haptic-tap {
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}

.haptic-tap:active {
  transform: scale(0.94);
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-mobile-header,
  .dashboard-mobile-header-compact,
  .dashboard-mobile-title-chip,
  .mobile-bottom-nav-inner,
  .haptic-tap {
    transition: none !important;
    animation: none !important;
  }

  .haptic-tap:active {
    transform: none;
    filter: none;
  }

  .mobile-scroll {
    scroll-behavior: auto;
  }
}

/* Smooth scrolling for mobile content */
.mobile-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

/* Touch optimizations */
@media (max-width: 768px) {
  /* Prevent text selection on interactive elements */
  button, a, [role="button"] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Larger touch targets for mobile */
  button, a, [role="button"], input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }

  /* Ensure inputs don't zoom on focus (iOS) */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* Prevent pull-to-refresh on overscroll */
  body {
    overscroll-behavior-y: contain;
  }

  /* Smoother scrolling */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* Hide desktop scrollbar on mobile */
  ::-webkit-scrollbar {
    width: 0px;
    display: none;
  }

  /* Mobile-friendly card interactions */
  .bento-card {
    -webkit-tap-highlight-color: transparent;
  }

  .bento-card:hover {
    transform: none;
  }

  .bento-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Full-width cards on mobile */
  .grid {
    gap: 12px !important;
  }

  /* Glass panel mobile optimization */
  .glass-panel {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Disable desktop hover effects on mobile */
  .tilt-card:hover {
    transform: none;
  }

  .float-animation {
    animation: none;
  }

  /* Mobile-first typography — scoped to dashboard/admin to avoid breaking auth pages */
  .dashboard-mobile-shell h1, [data-dashboard] h1 { font-size: 1.5rem !important; line-height: 1.3 !important; }
  .dashboard-mobile-shell h2, [data-dashboard] h2 { font-size: 1.25rem !important; line-height: 1.35 !important; }
  .dashboard-mobile-shell h3, [data-dashboard] h3 { font-size: 1.1rem !important; line-height: 1.4 !important; }
}

/* PWA standalone mode optimizations */
@media (display-mode: standalone) {
  /* Remove extra spacing since browser chrome is gone */
  .safe-area-top {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .dashboard-mobile-header {
    margin: 0.15rem 0.25rem 0;
    border-radius: 16px;
    min-height: 4.25rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .dashboard-mobile-title-chip {
    padding: 0.14rem 0.45rem;
  }

  .dashboard-mobile-header .w-9.h-9 {
    width: 2rem;
    height: 2rem;
  }

  /* Disable text selection globally in standalone mode for app-like feel */
  body {
    -webkit-user-select: none;
    user-select: none;
  }

  /* But allow selection on content areas */
  main p, main span, main div, main article,
  input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* Spotlight uses theme primary color */
.spotlight {
  background: radial-gradient(circle at center, rgba(var(--theme-primary-rgb), var(--spotlight-opacity)) 0%, transparent 70%);
}