/**
 * Unified Responsive System 2025 - KoreaSewa
 * ==========================================
 * 
 * Single, comprehensive, future-proof responsive system.
 * Consolidates all responsive breakpoints and utilities.
 * 
 * Features:
 * - Mobile-first approach
 * - Standard breakpoints (Bootstrap 5 compatible)
 * - Touch-friendly targets (WCAG 2.1 AA)
 * - Container queries support
 * - Future-proof architecture
 * - No conflicts, no duplicates
 * 
 * Author: KoreaSewa Development Team
 * Version: 1.0.0
 * Last Updated: 2025-01-27
 */

/* ============================================
   CSS CUSTOM PROPERTIES (DRY)
   ============================================ */
:root {
    /* Standard Breakpoints (Bootstrap 5 Compatible) */
    --bp-xs: 0px;        /* Extra small */
    --bp-sm: 576px;     /* Small mobile */
    --bp-md: 768px;     /* Tablet */
    --bp-lg: 992px;     /* Desktop */
    --bp-xl: 1200px;    /* Large desktop */
    --bp-2xl: 1400px;   /* Extra large desktop */
    
    /* Fluid Typography (16px minimum prevents iOS zoom) */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16px minimum */
    --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
    
    /* Fluid Spacing */
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-md: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
    --space-lg: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --space-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
    
    /* Touch Targets (WCAG 2.1 AA Compliant) */
    --touch-min: 44px;      /* iOS standard minimum */
    --touch-comfort: 48px;  /* Comfortable size */
    --touch-large: 56px;     /* Large targets */
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   GLOBAL RESPONSIVE FIXES
   ============================================ */

/* Prevent horizontal scroll */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Ensure proper viewport handling for all dimensions */
@media (max-width: 799px) {
    html, body {
        width: 100%;
        max-width: 100vw;
    }
    
    .main-content {
        width: 100%;
        max-width: 100vw;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Handle medium dimensions (800px - 991px) */
@media (min-width: 800px) and (max-width: 991.98px) {
    .main-content {
        width: 100%;
        max-width: 100vw;
    }
}

/* Handle large dimensions (992px+) */
@media (min-width: 992px) {
    .main-content.with-sidebar {
        transition: margin-left var(--transition-base);
    }
    
    .main-content.with-sidebar:has(~ .koreasewa-sidebar:not(.closed):not(.compact)) {
        margin-left: var(--sidebar-width, 280px);
    }
}

/* Box-sizing for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Responsive media elements */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive tables */
table {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 767.98px) {
    .table-responsive,
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}

/* ============================================
   TOUCH-FRIENDLY TARGETS
   ============================================ */

/* Ensure all interactive elements meet touch target requirements */
button, 
a, 
input[type="button"], 
input[type="submit"], 
input[type="checkbox"], 
input[type="radio"],
.koreasewa-sidebar-toggle-btn,
.koreasewa-sidebar-close-btn,
.koreasewa-sidebar-close-btn-mobile,
.koreasewa-sidebar-compact-btn {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(var(--bs-primary-rgb, 0, 102, 255), 0.2);
}

/* Larger touch targets on mobile */
@media (max-width: 767.98px) {
    button, 
    a, 
    input[type="button"], 
    input[type="submit"],
    .koreasewa-sidebar-toggle-btn,
    .koreasewa-sidebar-close-btn,
    .koreasewa-sidebar-close-btn-mobile {
        min-height: var(--touch-comfort);
        min-width: var(--touch-comfort);
        padding: 0.5rem;
    }
}

/* ============================================
   HEADER RESPONSIVE IMPROVEMENTS - REMOVED
   ============================================ */
/* 
 * NOTE: All header responsive styles have been moved to header.css
 * to ensure single source of truth and prevent conflicts.
 * Header.css is the ONLY file that should contain header styles.
 * This section removed to prevent conflicts with header.css
 */
        min-width: 0;
        flex: 1;
    }
    
    .koreasewa-logo-title {
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .koreasewa-logo-tagline {
        display: block;
        font-size: 0.625rem;
        line-height: 1.2;
        color: var(--header-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.8;
    }
    
    .koreasewa-sidebar-toggle-btn {
        width: var(--touch-comfort) !important;
        height: var(--touch-comfort) !important;
    }
}

/* ============================================
   SIDEBAR RESPONSIVE IMPROVEMENTS
   ============================================ */

/* Mobile Sidebar */
@media (max-width: 575.98px) {
    .koreasewa-sidebar {
        width: 85vw;
        max-width: 320px;
        min-width: 280px;
        top: 0;
        height: 100vh;
        z-index: 1030;
        position: fixed;
    }
    
    .koreasewa-sidebar.show,
    .koreasewa-sidebar:not(.closed) {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .koreasewa-sidebar:not(.show):not(.open),
    .koreasewa-sidebar.closed {
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .koreasewa-sidebar-close-btn-mobile {
        display: flex !important;
        min-height: var(--touch-comfort);
        min-width: var(--touch-comfort);
        touch-action: manipulation;
    }
    
    .koreasewa-sidebar-close-btn {
        display: none !important;
    }
    
    .koreasewa-sidebar-compact-btn {
        display: none !important;
    }
    
    /* Ensure overlay is visible on mobile when sidebar is open */
    #koreasewa-sidebar-overlay.show {
        display: block !important;
        opacity: 0.5 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Prevent body scroll when sidebar is open on mobile */
    body.sidebar-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
}

/* Tablet Sidebar */
@media (min-width: 576px) and (max-width: 991.98px) {
    .koreasewa-sidebar {
        width: var(--sidebar-width-tablet, 72px);
        top: 0;
        height: 100vh;
        z-index: 1020;
    }
    
    .koreasewa-sidebar:not(.closed):not(.compact) {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .koreasewa-sidebar.closed {
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .koreasewa-sidebar.compact {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: var(--sidebar-width-tablet, 72px) !important;
    }
    
    .koreasewa-sidebar-close-btn-mobile {
        display: none !important;
    }
    
    .sidebar-nav-link span {
        display: none;
    }
    
    .sidebar-nav-link {
        justify-content: center;
        padding: 0.875rem 0.5rem;
    }
    
    /* Ensure overlay is hidden on tablet */
    #koreasewa-sidebar-overlay {
        display: none !important;
    }
}

/* Desktop Sidebar */
@media (min-width: 992px) {
    .koreasewa-sidebar-close-btn-mobile {
        display: none !important;
    }
}

/* ============================================
   TOGGLE BUTTONS - ALL SCREEN SIZES
   ============================================ */

/* Ensure toggle buttons work on all devices */
.koreasewa-sidebar-toggle-btn,
.koreasewa-sidebar-close-btn,
.koreasewa-sidebar-close-btn-mobile,
.koreasewa-sidebar-compact-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(var(--bs-primary-rgb, 0, 102, 255), 0.2);
}

/* Active state for all toggle buttons */
.koreasewa-sidebar-toggle-btn:active,
.koreasewa-sidebar-close-btn:active,
.koreasewa-sidebar-close-btn-mobile:active,
.koreasewa-sidebar-compact-btn:active {
    transform: scale(0.95);
}

/* Focus state for accessibility */
.koreasewa-sidebar-toggle-btn:focus,
.koreasewa-sidebar-close-btn:focus,
.koreasewa-sidebar-close-btn-mobile:focus,
.koreasewa-sidebar-compact-btn:focus {
    outline: 2px solid var(--bs-primary, #0066ff);
    outline-offset: 2px;
}

/* ============================================
   MOBILE APPS RESPONSIVE
   ============================================ */

.mobile-app-container {
    width: 100%;
    max-width: 100vw;
    padding: var(--space-md);
    overflow-x: hidden;
}

@media (max-width: 767.98px) {
    .mobile-app-container {
        padding: var(--space-sm);
    }
    
    .mobile-header h1 {
        font-size: var(--text-2xl);
    }
    
    .mobile-header p {
        font-size: var(--text-base);
    }
    
    .mobile-features {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .feature-card {
        padding: var(--space-lg);
    }
}

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

/* Hide on mobile */
@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile-only {
    display: none !important;
}

@media (max-width: 767.98px) {
    .show-mobile-only {
        display: block !important;
    }
}

/* Show only on desktop */
.show-desktop-only {
    display: block !important;
}

@media (max-width: 767.98px) {
    .show-desktop-only {
        display: none !important;
    }
}

/* ============================================
   CONTAINER QUERIES (Future-Proof)
   ============================================ */

@container (max-width: 768px) {
    .container-responsive {
        padding: var(--space-sm);
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .koreasewa-sidebar,
    .koreasewa-sidebar-toggle-btn,
    .koreasewa-sidebar-close-btn,
    .koreasewa-sidebar-close-btn-mobile {
        display: none !important;
    }
    
    .koreasewa-header {
        position: static !important;
    }
}