@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
  /* Primary Button - Gold/Yellow prominent on dark backgrounds */
  .btn-primary {
    @apply py-3 px-6 bg-brand-gold text-gray-900 rounded-lg font-bold
           shadow-lg hover:bg-brand-gold-light transition-colors duration-200
           border-2 border-brand-gold-dark cursor-pointer;
  }

  .btn-primary:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  /* Button Spinner - Absolute overlay inside relative button */
  .btn-spinner {
    @apply absolute inset-0 flex items-center justify-center;
  }

  .btn-spinner::after {
    content: '';
    @apply w-5 h-5 border-2 border-gray-900/30 border-t-gray-900 rounded-full animate-spin;
  }

  /* Secondary Button - Brand Blue */
  .btn-secondary {
    @apply py-3 px-6 bg-brand-blue text-white rounded-lg font-semibold
           shadow-lg hover:bg-brand-blue-light hover:shadow-xl
           transform hover:-translate-y-0.5 transition-all duration-200
           border-2 border-brand-blue cursor-pointer;
  }

  /* Outline Button - Light/transparent for dark backgrounds */
  .btn-outline {
    @apply py-3 px-6 bg-transparent text-white rounded-lg font-semibold
           border-2 border-white/60 hover:bg-white/10 hover:border-white
           transition-all duration-200 cursor-pointer;
  }

  /* Outline Button - Blue version for light backgrounds */
  .btn-outline-blue {
    @apply py-3 px-6 bg-transparent text-brand-blue rounded-lg font-semibold
           border-2 border-brand-blue hover:bg-brand-blue hover:text-white
           transition-all duration-200 cursor-pointer;
  }

  /* Lottery Club Panel - Updated with Brand Colors */
  .lc-panel {
    @apply shadow-lg bg-white rounded-xl p-6 border-2 border-brand-blue-light
           hover:shadow-2xl transition-shadow duration-200;
  }

  /* Lottery Club Label */
  .lc-label {
    @apply text-sm text-brand-blue font-medium mb-2 uppercase tracking-wide;
  }

  /* Lottery Club Heading */
  .lc-heading {
    @apply text-4xl font-extrabold text-gray-900 leading-tight;
  }

  /* Lottery Club Subheading */
  .lc-subheading {
    @apply mt-3 text-lg text-gray-600 leading-relaxed;
  }

  /* Gradient Text Effect */
  .text-gradient-brand {
    @apply bg-gradient-to-r from-brand-blue to-brand-blue-light bg-clip-text text-transparent;
  }

  /* Decorative Burst Effect (like logo) */
  .burst-decoration {
    position: relative;
  }

  .burst-decoration::before,
  .burst-decoration::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 40px;
    background: linear-gradient(to bottom, #F8C025, transparent);
    opacity: 0.3;
  }

  .burst-decoration::before {
    left: -20px;
    top: 50%;
    transform: translateY(-50%) rotate(-30deg);
  }

  .burst-decoration::after {
    right: -20px;
    top: 50%;
    transform: translateY(-50%) rotate(30deg);
  }

  /* ========================================
     Form Components - Glass style for dark backgrounds
     ======================================== */

  /* Form Container - Glass panel */
  .form-panel {
    @apply backdrop-blur-md bg-white/5 rounded-2xl p-8 border border-white/10;
  }

  /* Form Input - Glass style */
  .form-input {
    @apply w-full px-4 py-3 rounded-lg
           bg-white/10 backdrop-blur-sm
           border border-white/20
           text-white placeholder-white/40
           focus:outline-none focus:border-brand-gold focus:ring-1 focus:ring-brand-gold/50
           transition-colors duration-200;
  }

  /* Form Input - Disabled state */
  .form-input:disabled {
    @apply opacity-60 cursor-not-allowed;
  }

  /* Form Input - Error state */
  .form-input-error {
    @apply border-red-400 ring-1 ring-red-400/50;
  }

  /* Form Label */
  .form-label {
    @apply block text-sm font-medium text-white/80 mb-2;
  }

  /* Form Group - Spacing wrapper */
  .form-group {
    @apply space-y-1;
  }

  /* Form Checkbox */
  .form-checkbox {
    @apply h-4 w-4 rounded border-white/30 bg-white/10
           text-brand-gold focus:ring-brand-gold/50 focus:ring-offset-0;
  }

  /* Form Link - Gold accent */
  .form-link {
    @apply text-brand-gold hover:text-brand-gold-light transition-colors;
  }

  /* Form Error - Inline text */
  .form-error {
    @apply text-red-400 text-sm mt-1;
  }

  /* Form Error Box - Container for error lists */
  .form-error-box {
    @apply bg-red-500/20 border border-red-400/50 rounded-lg p-4 text-red-200;
  }

  /* Form Notice Box - Container for success/info messages */
  .form-notice-box {
    @apply bg-green-500/20 border border-green-400/50 rounded-lg p-4 text-green-200;
  }

  /* Page Heading - White for dark backgrounds */
  .page-heading {
    @apply text-3xl md:text-4xl font-bold text-white;
  }

  /* Page Subheading - Muted white */
  .page-subheading {
    @apply text-white/60 mt-2;
  }

  /* Form Divider - Subtle separator */
  .form-divider {
    @apply border-t border-white/10 my-6;
  }

  /* ========================================
     Dashboard Components - Glass style for dark backgrounds
     ======================================== */

  /* Dashboard Card - Glass panel for stats */
  .dash-card {
    @apply backdrop-blur-md bg-white/5 rounded-2xl p-6 border border-white/10;
  }

  /* Dashboard Card Label */
  .dash-card-label {
    @apply text-sm text-white/60 font-medium uppercase tracking-wide;
  }

  /* Dashboard Card Value */
  .dash-card-value {
    @apply text-3xl font-bold text-white;
  }

  /* Dashboard Card Value - Gold accent */
  .dash-card-value-gold {
    @apply text-3xl font-bold text-brand-gold;
  }

  /* Dashboard Card Value - Blue accent */
  .dash-card-value-blue {
    @apply text-3xl font-bold text-brand-blue-light;
  }

  /* Promo Card - Gold/Yellow solid style (darker gold for better contrast) */
  .promo-card {
    @apply rounded-2xl p-6 border-2 border-brand-gold-light
           bg-brand-gold-dark text-gray-900;
  }

  /* Info Card - Blue glass style for informational messages */
  .info-card {
    @apply backdrop-blur-md bg-brand-blue/10 rounded-2xl p-6
           border border-brand-blue/30;
  }

  .info-card-header {
    @apply flex items-center gap-3 mb-2;
  }

  .info-card-icon {
    @apply w-6 h-6 text-brand-blue-light flex-shrink-0;
  }

  .info-card-title {
    @apply font-semibold text-white;
  }

  .info-card-body {
    @apply text-white/70 text-sm leading-relaxed;
  }

  /* ========================================
     Table Components - Glass style for dark backgrounds
     ======================================== */

  /* Table Container */
  .table-container {
    @apply backdrop-blur-md bg-white/5 rounded-2xl border border-white/10 overflow-hidden;
  }

  /* Table */
  .table-dark {
    @apply min-w-full divide-y divide-white/10;
  }

  /* Table Header */
  .table-dark thead {
    @apply bg-white/5;
  }

  .table-dark th {
    @apply py-3.5 px-4 text-left text-sm font-semibold text-white/80;
  }

  /* Table Body */
  .table-dark tbody {
    @apply divide-y divide-white/5;
  }

  .table-dark td {
    @apply whitespace-nowrap py-4 px-4 text-sm text-white/70;
  }

  .table-dark tbody tr {
    @apply hover:bg-white/5 transition-colors duration-150;
  }

  /* Table Cell - Accent colors */
  .table-cell-gold {
    @apply text-brand-gold font-medium;
  }

  .table-cell-blue {
    @apply text-brand-blue-light font-medium;
  }

  /* ========================================
     Status Badges - For dark backgrounds
     ======================================== */

  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium;
  }

  .badge-success {
    @apply bg-green-500/20 text-green-300 ring-1 ring-inset ring-green-500/30;
  }

  .badge-warning {
    @apply bg-yellow-500/20 text-yellow-300 ring-1 ring-inset ring-yellow-500/30;
  }

  .badge-neutral {
    @apply bg-white/10 text-white/60 ring-1 ring-inset ring-white/20;
  }

  /* ========================================
     Navigation - Dark theme
     ======================================== */

  /* Dark Navbar */
  .navbar-dark {
    @apply bg-white/5 backdrop-blur-md border-b border-white/10;
  }

  .navbar-dark-link {
    @apply text-white/70 hover:text-white font-medium transition-colors;
  }

  .navbar-dark-link-danger {
    @apply text-white/70 hover:text-red-400 font-medium transition-colors;
  }

  /* ========================================
     Additional Badge Variants
     ======================================== */

  .badge-danger {
    @apply bg-red-500/20 text-red-300 ring-1 ring-inset ring-red-500/30;
  }

  .badge-info {
    @apply bg-blue-500/20 text-blue-300 ring-1 ring-inset ring-blue-500/30;
  }

  /* ========================================
     Button Variants
     ======================================== */

  .btn-danger {
    @apply py-2.5 px-5 bg-red-600 text-white rounded-lg font-semibold
           shadow-md hover:bg-red-700 hover:shadow-lg
           focus:outline-none focus:ring-2 focus:ring-red-500/50
           transition-all duration-200 cursor-pointer;
  }

  .btn-success {
    @apply py-2.5 px-5 bg-green-600 text-white rounded-lg font-semibold
           shadow-md hover:bg-green-700 hover:shadow-lg
           focus:outline-none focus:ring-2 focus:ring-green-500/50
           transition-all duration-200 cursor-pointer;
  }

  /* Icon Buttons for glass panels */
  .btn-icon {
    @apply p-2 rounded-lg text-white/60 hover:text-brand-blue-light hover:bg-white/10
           transition-colors duration-200;
  }

  .btn-icon-danger {
    @apply p-2 rounded-lg text-white/60 hover:text-red-400 hover:bg-red-500/10
           transition-colors duration-200;
  }

  /* ========================================
     Alert Banners - Subscription status alerts
     ======================================== */

  /* Alert Banner - Warning style for subscription expiring soon */
  .alert-banner-warning {
    @apply backdrop-blur-md bg-yellow-500/20 rounded-2xl p-4
           border border-yellow-400/40 flex items-center justify-between;
  }

  /* Alert Banner - Danger style for expired subscription */
  .alert-banner-danger {
    @apply backdrop-blur-md bg-red-500/20 rounded-2xl p-4
           border border-red-400/40 flex items-center justify-between;
  }

  .alert-banner-icon {
    @apply w-8 h-8 flex-shrink-0;
  }

  .alert-banner-content {
    @apply flex-1 ml-4;
  }

  .alert-banner-title {
    @apply font-semibold text-white;
  }

  .alert-banner-message {
    @apply text-sm text-white/70 mt-1;
  }

  .alert-banner-action {
    @apply ml-4;
  }
}