/**
 * ERPAthos Responsive Variables
 * Centralized breakpoints, spacing, and typography for consistent responsive design
 * 
 * Usage:
 * - Import this file before other stylesheets
 * - Use CSS custom properties (variables) in components
 * - Breakpoints available as both variables and media queries
 */

:root {
    /* ========================================
     * BREAKPOINTS
     * Standard screen size breakpoints for responsive design
     * ======================================== */
    --breakpoint-mobile-sm: 360px;  /* Small phones */
    --breakpoint-mobile: 640px;     /* Mobile devices */
    --breakpoint-tablet: 768px;     /* Tablets */
    --breakpoint-desktop: 1024px;   /* Desktop */
    --breakpoint-desktop-lg: 1280px; /* Large desktop */

    /* ========================================
     * SPACING SCALE (Base-8px system)
     * Consistent spacing values following 8px grid
     * ======================================== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* ========================================
     * CONTAINER PADDING
     * Responsive padding that adapts to screen size
     * ======================================== */
    --container-padding-mobile: 1rem;    /* 16px on mobile */
    --container-padding-tablet: 1.5rem;  /* 24px on tablet */
    --container-padding-desktop: 2rem;   /* 32px on desktop */

    /* ========================================
     * FLUID TYPOGRAPHY
     * Font sizes that scale smoothly between breakpoints
     * Using clamp(min, preferred, max) for fluid scaling
     * ======================================== */
    
    /* Base font size */
    --font-size-base: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
    
    /* Body text sizes */
    --font-size-xs: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);    /* 10-12px */
    --font-size-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);     /* 12-14px */
    --font-size-md: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);       /* 14-16px */
    --font-size-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);       /* 16-18px */
    
    /* Heading sizes */
    --font-size-h1: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);         /* 28-40px */
    --font-size-h2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);          /* 24-32px */
    --font-size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);      /* 20-28px */
    --font-size-h4: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);        /* 18-24px */
    --font-size-h5: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);        /* 16-20px */
    --font-size-h6: clamp(0.875rem, 0.85rem + 0.3vw, 1.125rem);   /* 14-18px */

    /* ========================================
     * LINE HEIGHTS
     * Optimal line heights for readability
     * ======================================== */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ========================================
     * MAX WIDTHS
     * Prevent content from becoming too wide
     * ======================================== */
    --max-width-sm: 640px;
    --max-width-md: 768px;
    --max-width-lg: 1024px;
    --max-width-xl: 1280px;
    --max-width-2xl: 1536px;
    --max-width-full: 100%;

    /* ========================================
     * Z-INDEX SCALE
     * Consistent layering for components
     * ======================================== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-modal-sticky: 1055;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
}

/* ========================================
 * GLOBAL OVERFLOW PREVENTION
 * Prevent horizontal scrolling on all screen sizes
 * ======================================== */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Note: Bootstrap 5 already sets box-sizing: border-box globally.
 * We rely on Bootstrap's implementation rather than duplicating it here.
 */

/* ========================================
 * RESPONSIVE TYPOGRAPHY
 * Opt-in utility classes to avoid overriding
 * Bootstrap's global typography settings.
 * Use these classes when you want fluid responsive typography.
 * ======================================== */
.responsive-h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-tight);
}

.responsive-h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-tight);
}

.responsive-h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-tight);
}

.responsive-h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-normal);
}

.responsive-h5 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-normal);
}

.responsive-h6 {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-normal);
}

.responsive-body,
.responsive-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

.responsive-small {
    font-size: var(--font-size-sm);
}

/* ========================================
 * UTILITY CLASSES
 * Commonly used responsive utilities
 * ======================================== */

/* Namespaced spacing utilities to avoid conflicts with Bootstrap */
.spacing-xs { margin: var(--spacing-xs); }
.spacing-sm { margin: var(--spacing-sm); }
.spacing-md { margin: var(--spacing-md); }
.spacing-lg { margin: var(--spacing-lg); }
.spacing-xl { margin: var(--spacing-xl); }

.erp-p-xs { padding: var(--spacing-xs); }
.erp-p-sm { padding: var(--spacing-sm); }
.erp-p-md { padding: var(--spacing-md); }
.erp-p-lg { padding: var(--spacing-lg); }
.erp-p-xl { padding: var(--spacing-xl); }

.erp-m-xs { margin: var(--spacing-xs); }
.erp-m-sm { margin: var(--spacing-sm); }
.erp-m-md { margin: var(--spacing-md); }
.erp-m-lg { margin: var(--spacing-lg); }
.erp-m-xl { margin: var(--spacing-xl); }

/* Responsive visibility helpers */
.mobile-only {
    display: block;
}

.tablet-up {
    display: none;
}

.desktop-up {
    display: none;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    
    .tablet-up {
        display: block;
    }
}

@media (min-width: 1024px) {
    .desktop-up {
        display: block;
    }
}

/* Prevent overflow in flex containers */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.flex-item {
    flex: 1 1 auto;
    min-width: 0; /* Allow flex items to shrink below content size */
}

/* Responsive images and media - opt-in class to avoid unintended effects */
.responsive-media {
    max-width: 100%;
    height: auto;
}

/* Apply to specific media elements only when needed */
img.responsive-media,
video.responsive-media,
iframe.responsive-media {
    max-width: 100%;
    height: auto;
}

/* Note: Bootstrap's .table-responsive already handles table overflow.
 * Use Bootstrap's implementation instead of overriding it here.
 */

/* Responsive form elements - opt-in to avoid breaking fixed-width buttons */
.responsive-input {
    max-width: 100%;
}

/* ========================================
 * BREAKPOINT HELPERS
 * Helper comments for media queries
 * ======================================== */

/* 
Usage examples:

Mobile-first approach (recommended):
@media (min-width: 640px) { ... }  // Mobile and up
@media (min-width: 768px) { ... }  // Tablet and up
@media (min-width: 1024px) { ... } // Desktop and up
@media (min-width: 1280px) { ... } // Large desktop and up

Desktop-first approach:
@media (max-width: 639px) { ... }  // Mobile only
@media (max-width: 767px) { ... }  // Mobile and small tablet
@media (max-width: 1023px) { ... } // Up to tablet
@media (max-width: 1279px) { ... } // Up to desktop

Range queries:
@media (min-width: 640px) and (max-width: 1023px) { ... }  // Tablet range
*/