/* ============================================================================
   TAILWIND + MUDBLAZOR BRIDGE
   ============================================================================
   This file helps Tailwind classes work seamlessly with MudBlazor components.
   
   Created: November 26, 2025
   Status: Active during incremental migration
   Docs: TAILWIND-INCREMENTAL-MIGRATION-PLAN.md
   
   Purpose:
   - Provides Tailwind utilities that reference Theme.cs CSS variables
   - Creates bridge patterns for common UI components
   - Ensures dark mode compatibility
   ============================================================================ */

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */
.dark {
    color-scheme: dark;
}

/* ============================================================================
   SPACING UTILITIES (Matching MudBlazor Scale)
   ============================================================================
   These classes match MudBlazor's pa-2, pa-4, etc. for consistency
   during migration period.
   ============================================================================ */

/* Padding utilities */
.tw-pa-2 { padding: 8px !important; }
.tw-pa-3 { padding: 12px !important; }
.tw-pa-4 { padding: 16px !important; }
.tw-pa-6 { padding: 24px !important; }
.tw-pa-8 { padding: 32px !important; }

/* Margin utilities */
.tw-ma-2 { margin: 8px !important; }
.tw-ma-4 { margin: 16px !important; }
.tw-mb-2 { margin-bottom: 8px !important; }
.tw-mb-4 { margin-bottom: 16px !important; }
.tw-mb-6 { margin-bottom: 24px !important; }
.tw-mt-2 { margin-top: 8px !important; }
.tw-mt-4 { margin-top: 16px !important; }

/* ============================================================================
   BORDER RADIUS UTILITIES (Matching CSS Variables)
   ============================================================================
   These map to existing --radius-* variables from app.css
   ============================================================================ */
.tw-rounded-sm { border-radius: var(--radius-4) !important; }   /* 4px */
.tw-rounded-md { border-radius: var(--radius-8) !important; }   /* 8px */
.tw-rounded-lg { border-radius: var(--radius-12) !important; }  /* 12px */
.tw-rounded-xl { border-radius: var(--radius-24) !important; }  /* 24px */

/* ============================================================================
   COLOR UTILITIES (Theme.cs Variables)
   ============================================================================
   All colors reference CSS variables auto-generated by Theme.cs
   This ensures light/dark mode compatibility
   ============================================================================ */

/* Background colors */
.tw-bg-surface { background: var(--mud-palette-surface) !important; }
.tw-bg-background { background: var(--mud-palette-background) !important; }
.tw-bg-primary { background: var(--mud-palette-primary) !important; }
.tw-bg-secondary { background: var(--mud-palette-secondary) !important; }

/* Text colors */
.tw-text-primary { color: var(--mud-palette-text-primary) !important; }
.tw-text-secondary { color: var(--mud-palette-text-secondary) !important; }

/* Border colors */
.tw-border-divider { border-color: var(--mud-palette-divider) !important; }
.tw-border-primary { border-color: var(--mud-palette-primary) !important; }

/* ============================================================================
   COMPOSITE PATTERNS (Common UI Components)
   ============================================================================
   These combine multiple Tailwind utilities into reusable patterns
   that match existing component designs.
   ============================================================================ */

/* Card pattern (replaces 5 different card implementations) */
.tw-card {
    padding: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-12);
}

.tw-card-sm {
    padding: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-8);
}

.tw-card-lg {
    padding: 24px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-12);
}

/* Panel pattern (with header) */
.tw-panel {
    padding: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-12);
}

.tw-panel-header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 16px;
    font-weight: 600;
}

/* Section pattern (collapsible sections) */
.tw-section {
    margin-bottom: 16px;
}

.tw-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--mud-palette-text-primary);
}

/* ============================================================================
   GLASS MORPHISM (From existing utilities.css)
   ============================================================================
   Preserving existing glass effect patterns
   ============================================================================ */
.tw-glass-light {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tw-glass-dark {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================
   Mobile-first responsive patterns
   ============================================================================ */
@media (max-width: 960px) {
    .tw-card,
    .tw-panel {
        padding: 12px;
    }
}

@media (max-width: 600px) {
    .tw-card,
    .tw-panel {
        padding: 8px;
    }
}

/* ============================================================================
   MIGRATION HELPERS
   ============================================================================
   These classes help during the transition period.
   Remove after full migration complete.
   ============================================================================ */

/* Prefix variants for explicit Tailwind usage during migration */
[class*="tw-"] {
    /* All tw- prefixed classes are explicitly Tailwind */
}

/* ============================================================================
   NOTES FOR DEVELOPERS
   ============================================================================
   
   DURING MIGRATION:
   - Use tw- prefix when mixing with old CSS (e.g., tw-pa-4)
   - Use native Tailwind when migrating a complete module (e.g., p-4)
   
   AFTER MIGRATION:
   - Remove tw- prefix classes (replaced by native Tailwind)
   - Keep composite patterns (.tw-card, .tw-panel)
   - Remove this entire file if all patterns moved to Tailwind @layer
   
   ============================================================================ */