/* ============================================================
   UTILITIES.CSS - Reusable Utility Classes
   ============================================================
   Created: 2025-10-18
   Purpose: Provide reusable utility classes to reduce inline
            styles and duplication across components.
   
   USAGE:
   - Apply utility classes via Class="" attribute
   - Combine multiple utilities: Class="card-flat radius-lg shadow-sm"
   - Use !important to override component defaults
   
   ARCHITECTURE:
   - Layer 1: Theme.cs (colors via CSS variables)
   - Layer 2: CSS Variables (visual effects - shadows, gradients)
   - Layer 3a: utilities.css (THIS FILE - reusable patterns)
   - Layer 3b: app.css (component-specific overrides)
   
   NOTE: Utility sections removed in Session 6 (all dead code, 0 usages).
   Remaining content: Overview Section Patterns (module detail pages)
============================================================ */



/* ============================================================
   13. OVERVIEW SECTION PATTERNS (Module Detail Pages)
   ============================================================
   Reusable patterns for module overview/detail pages.
   Extracted from Properties OverviewPanelsBlocks.
   Used across: Properties, Accounts, Portfolios, Vehicles, etc.
============================================================ */

/* Overview Section Container - Flat white card with subtle border */
.overview-section {
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--radius-12) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
    min-height: auto !important;
    max-height: none !important;
}

@media (prefers-color-scheme: dark) {
    .overview-section {
        background: var(--mud-palette-surface) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }
}

/* Info Grid Layouts */
.info-grid-2col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
}

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

.info-grid-4col {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
}

/* Responsive grid breakdowns */
@media (max-width: 1200px) {
    .info-grid-4col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 960px) {

    .info-grid-2col,
    .info-grid-3col,
    .info-grid-4col {
        grid-template-columns: 1fr !important;
    }
}

/* Individual Info Field */
.info-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

/* Field Label - small, gray, uppercase */
.info-label {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--mud-palette-text-secondary) !important;
    text-transform: none !important;
    letter-spacing: 0.025em !important;
}

@media (prefers-color-scheme: dark) {
    .info-label {
        color: var(--mud-palette-text-secondary) !important;
    }
}

/* Field Value - readable size, dark text */
.info-value {
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    color: var(--mud-palette-text-primary) !important;
    min-height: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
}

@media (prefers-color-scheme: dark) {
    .info-value {
        color: var(--mud-palette-text-primary) !important;
    }
}

/* Empty Value Styling */
.empty-value {
    color: var(--mud-palette-text-secondary) !important;
    font-style: normal !important;
}

@media (prefers-color-scheme: dark) {
    .empty-value {
        color: var(--mud-palette-text-disabled) !important;
    }
}

/* Field Spanning */
.info-field-span-2 {
    grid-column: span 2 !important;
}

.info-field-span-3 {
    grid-column: span 3 !important;
}

.info-field-full {
    grid-column: 1 / -1 !important;
}

/* Core Info Container - Side-by-side layout (fields + image) */
.core-info-container {
    display: flex !important;
    gap: 1.5rem !important;
    align-items: flex-start !important;
}

@media (max-width: 960px) {
    .core-info-container {
        flex-direction: column !important;
    }
}

/* ============================================================
   END OF UTILITIES.CSS
============================================================ */
/* ============================================================
   DARK MODE CLASS-BASED OVERRIDES (body.theme-dark)
   Added: 2025-10-18
   Purpose: Override light mode styles when user toggles dark mode manually
   Note: These duplicate the @media (prefers-color-scheme: dark) rules
         to support BOTH OS-level AND manual app theme toggle
============================================================ */

/* Overview Section Container */
body.theme-dark .overview-section {
    background: var(--mud-palette-surface) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important;
}