/**
 * BIGISUB ULTRA-MODERN UI FRAMEWORK - 2027 Edition
 * Advanced design system with aggressive CSS resets
 * Inspired by: Apple, Stripe, Vercel, Linear, Arc Browser
 *
 * Features:
 * - Bento box layouts
 * - Advanced frosted glass (backdrop-filter)
 * - Neumorphism & soft shadows
 * - Grain textures & mesh gradients
 * - Floating elements with depth
 * - Advanced micro-interactions
 * - Modern typography system
 * - CSS Grid/Flexbox mastery
 */

/* ============================================
   AGGRESSIVE RESET & BASE OVERRIDES
   ============================================ */

* {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body#bigisub-modern,
.bigisub-modern-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #0F172A !important;
  background: #F8FAFC !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  overflow-x: hidden !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Smooth transitions for ALL theme-sensitive elements */
body,
body#bigisub-modern,
.bigisub-modern-wrapper,
.bigisub-dashboard,
.bigisub-dashboard-content,
.balance-hero,
.bento-card,
.service-card,
.form-main-content,
.info-sidebar,
.info-card,
.transaction-card,
.search-card,
.modern-nav-grid,
.alert-ultra,
.badge-modern,
.form-control,
.modern-form-input,
.modern-form-select,
.modern-form-textarea,
.calculator-card,
.balance-code-item,
.transaction-value,
.referral-card,
.stats-card {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* ============================================
   2027 DESIGN TOKENS
   ============================================ */

:root {
  /* Brand Evolution */
  --brand-primary: #37517e;
  --brand-primary-rgb: 55, 81, 126;
  --brand-accent: #FFD700;
  --brand-accent-rgb: 255, 215, 0;

  /* Modern Palette */
  --neutral-50: #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;

  /* Semantic Colors */
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;

  /* Advanced Gradients */
  --gradient-primary: linear-gradient(135deg,
    rgba(var(--brand-primary-rgb), 1) 0%,
    rgba(var(--brand-primary-rgb), 0.8) 100%);

  --gradient-mesh:
    radial-gradient(at 0% 0%, rgba(var(--brand-primary-rgb), 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(var(--brand-accent-rgb), 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(var(--brand-primary-rgb), 0.1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(var(--brand-accent-rgb), 0.08) 0px, transparent 50%);

  --gradient-glass: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 100%);

  /* Advanced Shadows - Layered */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Neumorphic Shadows */
  --shadow-neu-light: -8px -8px 16px rgba(255, 255, 255, 0.8),
                       8px 8px 16px rgba(0, 0, 0, 0.1);
  --shadow-neu-dark: inset -4px -4px 8px rgba(255, 255, 255, 0.5),
                     inset 4px 4px 8px rgba(0, 0, 0, 0.1);

  /* Spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Border Radius */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-modal-backdrop: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-tooltip: 1600;
}

/* ============================================
   MODERN LAYOUT SYSTEM
   ============================================ */

.bigisub-dashboard {
  min-height: 100vh !important;
  background: var(--neutral-50) !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Background Mesh Gradient */
.bigisub-dashboard::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: var(--gradient-mesh) !important;
  opacity: 1 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.bigisub-dashboard-content {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: var(--space-4) var(--space-3) !important;
}

/* ============================================
   MODERN BALANCE HERO CARD
   ============================================ */

.balance-hero {
  background: linear-gradient(135deg,
    rgba(var(--brand-primary-rgb), 1) 0%,
    rgba(var(--brand-primary-rgb), 0.85) 100%) !important;
  border-radius: var(--radius-2xl) !important;
  padding: var(--space-6) var(--space-4) !important;
  margin: 0 0 var(--space-4) 0 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 20px 40px -12px rgba(var(--brand-primary-rgb), 0.3),
    0 0 60px -15px rgba(var(--brand-accent-rgb), 0.2),
    var(--shadow-xl) !important;
  animation: float 6s ease-in-out infinite !important;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) !important; }
  50% { transform: translateY(-10px) !important; }
}

/* Floating Orbs Background */
.balance-hero::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  right: -20% !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  animation: orbit 20s linear infinite !important;
}

.balance-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40% !important;
  left: -15% !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  animation: orbit 25s linear infinite reverse !important;
}

@keyframes orbit {
  0% { transform: rotate(0deg) translateX(20px) rotate(0deg) !important; }
  100% { transform: rotate(360deg) translateX(20px) rotate(-360deg) !important; }
}

.balance-hero-content {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  color: white !important;
}

.balance-greeting {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 0 var(--space-2) 0 !important;
  opacity: 0.95 !important;
  letter-spacing: -0.01em !important;
}

.balance-amount-wrapper {
  margin: var(--space-3) 0 !important;
}

.balance-label {
  font-size: 0.875rem !important;
  opacity: 0.85 !important;
  margin: 0 0 var(--space-1) 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
}

.balance-amount {
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, white 0%, rgba(255, 215, 0, 1) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: shimmer 3s ease-in-out infinite !important;
}

@keyframes shimmer {
  0%, 100% { opacity: 1 !important; }
  50% { opacity: 0.85 !important; }
}

.balance-badges {
  display: flex !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  margin: var(--space-3) 0 !important;
  flex-wrap: wrap !important;
}

.badge-modern {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: var(--radius-full) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: white !important;
  transition: all 0.3s var(--ease-out) !important;
}

.badge-modern:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

.balance-actions {
  display: flex !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  margin: var(--space-4) 0 0 0 !important;
  flex-wrap: wrap !important;
}

/* ============================================
   ULTRA-MODERN BUTTONS
   ============================================ */

.btn-ultra {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1rem 2rem !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s var(--ease-out) !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.btn-ultra::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.6s, height 0.6s !important;
}

.btn-ultra:active::before {
  width: 300px !important;
  height: 300px !important;
}

.btn-ultra-primary {
  background: linear-gradient(135deg, #D4A017 0%, #C9A020 100%) !important;
  color: white !important;
  box-shadow:
    0 4px 12px rgba(212, 160, 23, 0.4),
    0 0 20px rgba(212, 160, 23, 0.2) !important;
}

.btn-ultra-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 8px 20px rgba(212, 160, 23, 0.5),
    0 0 30px rgba(212, 160, 23, 0.3) !important;
}

.btn-ultra-glass {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: white !important;
}

.btn-ultra-glass:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   BENTO BOX SERVICE GRID
   ============================================ */

.bento-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 1rem !important;
  margin: var(--space-4) 0 !important;
  padding: 0 !important;
}

.bento-card {
  background: white !important;
  border-radius: var(--radius-xl) !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  text-decoration: none !important;
  color: var(--neutral-800) !important;
  transition: all 0.4s var(--ease-out) !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--neutral-200) !important;
  min-height: 140px !important;
  box-shadow: var(--shadow-sm) !important;
}

.bento-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg,
    rgba(var(--brand-primary-rgb), 0.05) 0%,
    rgba(var(--brand-accent-rgb), 0.05) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.4s var(--ease-out) !important;
}

.bento-card:hover::before {
  opacity: 1 !important;
}

.bento-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow:
    var(--shadow-xl),
    0 0 40px rgba(var(--brand-primary-rgb), 0.1) !important;
  border-color: rgba(var(--brand-primary-rgb), 0.3) !important;
}

.bento-card-icon {
  font-size: 2.5rem !important;
  color: var(--brand-primary) !important;
  transition: all 0.4s var(--ease-bounce) !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
}

.bento-card:hover .bento-card-icon {
  transform: scale(1.2) rotate(-5deg) !important;
  filter: drop-shadow(0 4px 12px rgba(var(--brand-primary-rgb), 0.3)) !important;
}

.bento-card-label {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  transition: color 0.3s var(--ease-out) !important;
}

.bento-card:hover .bento-card-label {
  color: var(--brand-primary) !important;
}

/* Active State */
.bento-card.active {
  background: linear-gradient(135deg,
    rgba(var(--brand-primary-rgb), 0.1) 0%,
    rgba(var(--brand-accent-rgb), 0.05) 100%) !important;
  border-color: var(--brand-primary) !important;
  box-shadow:
    0 0 0 3px rgba(var(--brand-primary-rgb), 0.1),
    var(--shadow-md) !important;
}

/* ============================================
   MODERN ALERT SYSTEM
   ============================================ */

.alert-ultra {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  padding: 1rem 1.5rem !important;
  border-radius: var(--radius-lg) !important;
  border-left: 4px solid !important;
  margin: 0 0 1rem 0 !important;
  background: white !important;
  box-shadow: var(--shadow-md) !important;
  animation: slideInDown 0.4s var(--ease-out) !important;
}

@keyframes slideInDown {
  from {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

.alert-ultra-success {
  border-left-color: var(--success) !important;
  background: linear-gradient(90deg,
    rgba(16, 185, 129, 0.05) 0%,
    rgba(16, 185, 129, 0.02) 100%) !important;
}

.alert-ultra-warning {
  border-left-color: var(--warning) !important;
  background: linear-gradient(90deg,
    rgba(245, 158, 11, 0.05) 0%,
    rgba(245, 158, 11, 0.02) 100%) !important;
}

.alert-ultra-error {
  border-left-color: var(--error) !important;
  background: linear-gradient(90deg,
    rgba(239, 68, 68, 0.05) 0%,
    rgba(239, 68, 68, 0.02) 100%) !important;
}

.alert-ultra-info {
  border-left-color: var(--info) !important;
  background: linear-gradient(90deg,
    rgba(59, 130, 246, 0.05) 0%,
    rgba(59, 130, 246, 0.02) 100%) !important;
}

/* ============================================
   STAGGERED ANIMATION SYSTEM
   ============================================ */

.bento-card {
  animation: fadeInUp 0.6s var(--ease-out) both !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0 !important;
    transform: translateY(30px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

.bento-card:nth-child(1) { animation-delay: 0.05s !important; }
.bento-card:nth-child(2) { animation-delay: 0.1s !important; }
.bento-card:nth-child(3) { animation-delay: 0.15s !important; }
.bento-card:nth-child(4) { animation-delay: 0.2s !important; }
.bento-card:nth-child(5) { animation-delay: 0.25s !important; }
.bento-card:nth-child(6) { animation-delay: 0.3s !important; }
.bento-card:nth-child(7) { animation-delay: 0.35s !important; }
.bento-card:nth-child(8) { animation-delay: 0.4s !important; }
.bento-card:nth-child(9) { animation-delay: 0.45s !important; }
.bento-card:nth-child(10) { animation-delay: 0.5s !important; }
.bento-card:nth-child(11) { animation-delay: 0.55s !important; }
.bento-card:nth-child(12) { animation-delay: 0.6s !important; }
.bento-card:nth-child(n+13) { animation-delay: 0.65s !important; }

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .bigisub-dashboard-content {
    padding: var(--space-3) var(--space-2) !important;
  }

  .balance-hero {
    padding: var(--space-4) var(--space-3) !important;
  }

  .balance-amount {
    font-size: 2.5rem !important;
  }

  .bento-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
  }

  .bento-card {
    padding: 1rem !important;
    min-height: 120px !important;
  }

  .bento-card-icon {
    font-size: 2rem !important;
  }

  .bento-card-label {
    font-size: 0.8125rem !important;
  }
}

@media (max-width: 480px) {
  .balance-amount {
    font-size: 2rem !important;
  }

  .bento-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .balance-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .btn-ultra {
    width: 100% !important;
  }
}

/* ============================================
   SERVICE NAVIGATION CARDS
   ============================================ */

.modern-nav-container {
  padding: 0 !important;
  margin: 0 0 var(--space-6) 0 !important;
}

.modern-nav-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 0.875rem !important;
  background: var(--surface-bg) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-5) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--neutral-200) !important;
}

.service-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  padding: 1.25rem 1rem !important;
  background: white !important;
  border-radius: var(--radius-lg) !important;
  border: 1.5px solid var(--neutral-200) !important;
  text-decoration: none !important;
  transition: all 0.3s var(--ease-out) !important;
  min-height: 110px !important;
  overflow: hidden !important;
}

.service-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg,
    rgba(var(--brand-primary-rgb), 0.05) 0%,
    rgba(var(--brand-accent-rgb), 0.03) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s var(--ease-out) !important;
  z-index: 0 !important;
}

.service-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 24px -8px rgba(var(--brand-primary-rgb), 0.25) !important;
  border-color: rgba(var(--brand-primary-rgb), 0.3) !important;
}

.service-card:hover::before {
  opacity: 1 !important;
}

.service-card:active {
  transform: translateY(-2px) scale(1.01) !important;
}

.service-card-icon {
  font-size: 2rem !important;
  color: var(--brand-primary) !important;
  margin: 0 !important;
  transition: all 0.3s var(--ease-out) !important;
  position: relative !important;
  z-index: 1 !important;
}

.service-card:hover .service-card-icon {
  transform: scale(1.1) !important;
  color: rgba(var(--brand-primary-rgb), 1) !important;
}

.service-card-label {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--neutral-700) !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  position: relative !important;
  z-index: 1 !important;
  transition: color 0.3s var(--ease-out) !important;
}

.service-card:hover .service-card-label {
  color: var(--neutral-900) !important;
}

/* Active state */
.service-card.active {
  background: linear-gradient(135deg,
    rgba(var(--brand-primary-rgb), 0.95) 0%,
    rgba(var(--brand-primary-rgb), 0.85) 100%) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 8px 16px -4px rgba(var(--brand-primary-rgb), 0.4) !important;
}

.service-card.active .service-card-icon,
.service-card.active .service-card-label {
  color: white !important;
}

/* Staggered animation for service cards */
.service-card {
  animation: fadeInUp 0.5s var(--ease-out) both !important;
}

.service-card:nth-child(1) { animation-delay: 0.05s !important; }
.service-card:nth-child(2) { animation-delay: 0.1s !important; }
.service-card:nth-child(3) { animation-delay: 0.15s !important; }
.service-card:nth-child(4) { animation-delay: 0.2s !important; }
.service-card:nth-child(5) { animation-delay: 0.25s !important; }
.service-card:nth-child(6) { animation-delay: 0.3s !important; }
.service-card:nth-child(7) { animation-delay: 0.35s !important; }
.service-card:nth-child(8) { animation-delay: 0.4s !important; }
.service-card:nth-child(9) { animation-delay: 0.45s !important; }
.service-card:nth-child(10) { animation-delay: 0.5s !important; }
.service-card:nth-child(n+11) { animation-delay: 0.55s !important; }

/* ============================================
   CRISPY FORMS OVERRIDES
   ============================================ */

/* Form group spacing */
.form-group,
#div_id_network,
#div_id_plantype,
#div_id_plan,
#div_id_phone_number,
#div_id_bulk_nums,
#div_id_disco,
#div_id_meter_type,
#div_id_meter_number,
#div_id_amount,
#div_id_pay_amount,
#div_id_cable_name,
#div_id_cable_plan,
#div_id_smartcard_number,
#div_id_exam,
#div_id_quantity {
  margin: 0 0 var(--space-5) 0 !important;
}

/* Labels */
.form-group label,
.control-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--neutral-700) !important;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.5 !important;
}

/* Input fields */
.form-control,
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
  width: 100% !important;
  padding: 0.875rem 1rem !important;
  border: 1.5px solid var(--neutral-300) !important;
  border-radius: var(--radius-md) !important;
  font-size: 1rem !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
  transition: all 0.3s var(--ease-out) !important;
  background: white !important;
  color: var(--neutral-900) !important;
  line-height: 1.5 !important;
  box-shadow: var(--shadow-xs) !important;
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1), var(--shadow-sm) !important;
  background: white !important;
}

/* Select dropdowns */
.form-group select.form-control {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  padding-right: 2.5rem !important;
}

/* Textarea */
.form-group textarea.form-control {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Readonly inputs */
.form-control:read-only,
.form-group input:read-only {
  background: var(--neutral-50) !important;
  color: var(--neutral-700) !important;
  cursor: not-allowed !important;
}

/* Helper text */
.form-text,
.help-block,
small.form-text {
  display: block !important;
  font-size: 0.8125rem !important;
  color: var(--neutral-500) !important;
  margin: 0.5rem 0 0 0 !important;
  line-height: 1.4 !important;
}

/* Error states */
.form-group.has-error .form-control,
.form-group .is-invalid {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.invalid-feedback,
.error-message {
  display: block !important;
  color: var(--error) !important;
  font-size: 0.8125rem !important;
  margin: 0.5rem 0 0 0 !important;
}

/* Responsive form adjustments */
@media (max-width: 768px) {
  .modern-nav-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
    padding: var(--space-4) !important;
  }

  .service-card {
    padding: 1rem 0.75rem !important;
    min-height: 100px !important;
  }

  .service-card-icon {
    font-size: 1.75rem !important;
  }

  .service-card-label {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .modern-nav-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .service-card {
    min-height: 90px !important;
  }
}

/* ============================================
   DARK MODE STYLES
   ============================================ */

/* Dark mode root variables */
body.dark-mode,
html.dark-mode,
.dark-mode body,
.dark-mode body#bigisub-modern,
.dark-mode .bigisub-modern-wrapper,
.dark-mode .bigisub-dashboard {
  --neutral-50: #1E293B !important;
  --neutral-100: #1E293B !important;
  --neutral-200: #334155 !important;
  --neutral-300: #475569 !important;
  --neutral-400: #64748B !important;
  --neutral-500: #94A3B8 !important;
  --neutral-600: #CBD5E1 !important;
  --neutral-700: #E2E8F0 !important;
  --neutral-800: #F1F5F9 !important;
  --neutral-900: #F8FAFC !important;

  --surface-bg: #1E293B !important;
  --surface-elevated: #334155 !important;
  --surface-glass: rgba(51, 65, 85, 0.8) !important;

  --gradient-mesh:
    radial-gradient(at 0% 0%, rgba(var(--brand-primary-rgb), 0.2) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(var(--brand-accent-rgb), 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(var(--brand-primary-rgb), 0.15) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(var(--brand-accent-rgb), 0.1) 0px, transparent 50%) !important;

  background: #0F172A !important;
  color: #F1F5F9 !important;
}

/* Force dark background on html element */
html.dark-mode {
  background: #0F172A !important;
}

/* Force dark background on body element */
body.dark-mode,
.dark-mode body,
.dark-mode body#bigisub-modern {
  background: #0F172A !important;
  color: #F1F5F9 !important;
}

/* Dark Mode Text Colors */
.dark-mode .balance-greeting,
.dark-mode .balance-label,
.dark-mode .bento-card-label,
.dark-mode .service-card-label,
.dark-mode .service-page-subtitle,
.dark-mode .transaction-label,
.dark-mode .modern-form-label,
.dark-mode .form-section-title,
.dark-mode .service-page-title,
.dark-mode .form-group label,
.dark-mode .control-label,
.dark-mode .calculator-card h4,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p {
  color: var(--neutral-800) !important;
}

/* Dark Mode Card Backgrounds */
.dark-mode .balance-hero,
.dark-mode .bento-card,
.dark-mode .service-card,
.dark-mode .form-main-content,
.dark-mode .info-sidebar,
.dark-mode .info-card,
.dark-mode .transaction-card,
.dark-mode .search-card,
.dark-mode .modern-nav-grid,
.dark-mode .alert-ultra {
  background: var(--surface-bg) !important;
  border-color: var(--neutral-300) !important;
}

/* Dark Mode Inputs */
.dark-mode .form-control,
.dark-mode .modern-form-input,
.dark-mode .modern-form-select,
.dark-mode .modern-form-textarea {
  background: var(--surface-elevated) !important;
  color: var(--neutral-900) !important;
  border-color: var(--neutral-400) !important;
}

.dark-mode .form-control:focus,
.dark-mode .modern-form-input:focus,
.dark-mode .modern-form-select:focus,
.dark-mode .modern-form-textarea:focus {
  background: var(--surface-elevated) !important;
  color: var(--neutral-900) !important;
  border-color: var(--brand-primary) !important;
}

/* Dark Mode Bento Cards */
.dark-mode .bento-card:hover {
  background: var(--surface-elevated) !important;
  border-color: var(--brand-primary) !important;
}

/* Dark Mode Service Cards */
.dark-mode .service-card {
  background: var(--surface-elevated) !important;
  border-color: var(--neutral-300) !important;
}

.dark-mode .service-card:hover {
  background: var(--neutral-300) !important;
}

/* Dark Mode Balance Hero */
.dark-mode .balance-hero {
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.9) 0%, rgba(var(--brand-primary-rgb), 0.7) 100%) !important;
}

.dark-mode .balance-amount {
  color: white !important;
}

/* Dark Mode Badges */
.dark-mode .badge-modern {
  background: var(--surface-elevated) !important;
  color: var(--neutral-900) !important;
}

/* Dark Mode Transaction Values */
.dark-mode .transaction-value,
.dark-mode .balance-code-item {
  color: var(--neutral-900) !important;
  background: var(--surface-elevated) !important;
}

/* Dark Mode Info Card */
.dark-mode .info-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%) !important;
}

.dark-mode .info-card .info-content {
  color: var(--neutral-700) !important;
}

/* Dark Mode Readonly Inputs */
.dark-mode .form-control:read-only,
.dark-mode .modern-form-input:read-only {
  background: var(--neutral-300) !important;
  color: var(--neutral-800) !important;
}

/* Dark Mode Borders */
.dark-mode .balance-hero,
.dark-mode .form-main-content,
.dark-mode .info-sidebar,
.dark-mode .transaction-card {
  border-color: var(--neutral-400) !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center { text-align: center !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }