/* Responsive Utilities */

/* Container Queries */
@container (min-width: 320px) {
    .container-sm {
        max-width: 320px;
    }
}

@container (min-width: 640px) {
    .container-md {
        max-width: 640px;
    }
}

@container (min-width: 768px) {
    .container-lg {
        max-width: 768px;
    }
}

@container (min-width: 1024px) {
    .container-xl {
        max-width: 1024px;
    }
}

@container (min-width: 1280px) {
    .container-2xl {
        max-width: 1280px;
    }
}

/* Breakpoint Mixins */
/* Mobile First Approach */

/* Extra Small devices (phones, 320px and up) */
@media (min-width: 320px) {
    .xs\:block { display: block; }
    .xs\:inline-block { display: inline-block; }
    .xs\:inline { display: inline; }
    .xs\:flex { display: flex; }
    .xs\:inline-flex { display: inline-flex; }
    .xs\:grid { display: grid; }
    .xs\:hidden { display: none; }
}

/* Small devices (landscape phones, 640px and up) */
@media (min-width: 640px) {
    .sm\:block { display: block; }
    .sm\:inline-block { display: inline-block; }
    .sm\:inline { display: inline; }
    .sm\:flex { display: flex; }
    .sm\:inline-flex { display: inline-flex; }
    .sm\:grid { display: grid; }
    .sm\:hidden { display: none; }
    
    .sm\:text-xs { font-size: var(--font-size-xs); }
    .sm\:text-sm { font-size: var(--font-size-sm); }
    .sm\:text-base { font-size: var(--font-size-base); }
    .sm\:text-lg { font-size: var(--font-size-lg); }
    .sm\:text-xl { font-size: var(--font-size-xl); }
    .sm\:text-2xl { font-size: var(--font-size-2xl); }
    .sm\:text-3xl { font-size: var(--font-size-3xl); }
    .sm\:text-4xl { font-size: var(--font-size-4xl); }
    
    .sm\:p-1 { padding: var(--space-1); }
    .sm\:p-2 { padding: var(--space-2); }
    .sm\:p-3 { padding: var(--space-3); }
    .sm\:p-4 { padding: var(--space-4); }
    .sm\:p-5 { padding: var(--space-5); }
    .sm\:p-6 { padding: var(--space-6); }
    .sm\:p-8 { padding: var(--space-8); }
    
    .sm\:m-1 { margin: var(--space-1); }
    .sm\:m-2 { margin: var(--space-2); }
    .sm\:m-3 { margin: var(--space-3); }
    .sm\:m-4 { margin: var(--space-4); }
    .sm\:m-5 { margin: var(--space-5); }
    .sm\:m-6 { margin: var(--space-6); }
    .sm\:m-8 { margin: var(--space-8); }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:inline-block { display: inline-block; }
    .md\:inline { display: inline; }
    .md\:flex { display: flex; }
    .md\:inline-flex { display: inline-flex; }
    .md\:grid { display: grid; }
    .md\:hidden { display: none; }
    
    .md\:text-xs { font-size: var(--font-size-xs); }
    .md\:text-sm { font-size: var(--font-size-sm); }
    .md\:text-base { font-size: var(--font-size-base); }
    .md\:text-lg { font-size: var(--font-size-lg); }
    .md\:text-xl { font-size: var(--font-size-xl); }
    .md\:text-2xl { font-size: var(--font-size-2xl); }
    .md\:text-3xl { font-size: var(--font-size-3xl); }
    .md\:text-4xl { font-size: var(--font-size-4xl); }
    .md\:text-5xl { font-size: var(--font-size-5xl); }
    
    .md\:p-1 { padding: var(--space-1); }
    .md\:p-2 { padding: var(--space-2); }
    .md\:p-3 { padding: var(--space-3); }
    .md\:p-4 { padding: var(--space-4); }
    .md\:p-5 { padding: var(--space-5); }
    .md\:p-6 { padding: var(--space-6); }
    .md\:p-8 { padding: var(--space-8); }
    .md\:p-10 { padding: var(--space-10); }
    .md\:p-12 { padding: var(--space-12); }
    
    .md\:m-1 { margin: var(--space-1); }
    .md\:m-2 { margin: var(--space-2); }
    .md\:m-3 { margin: var(--space-3); }
    .md\:m-4 { margin: var(--space-4); }
    .md\:m-5 { margin: var(--space-5); }
    .md\:m-6 { margin: var(--space-6); }
    .md\:m-8 { margin: var(--space-8); }
    .md\:m-10 { margin: var(--space-10); }
    .md\:m-12 { margin: var(--space-12); }
    
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    
    .md\:flex-row { flex-direction: row; }
    .md\:flex-col { flex-direction: column; }
    .md\:justify-start { justify-content: flex-start; }
    .md\:justify-center { justify-content: center; }
    .md\:justify-end { justify-content: flex-end; }
    .md\:justify-between { justify-content: space-between; }
    .md\:items-start { align-items: flex-start; }
    .md\:items-center { align-items: center; }
    .md\:items-end { align-items: flex-end; }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .lg\:block { display: block; }
    .lg\:inline-block { display: inline-block; }
    .lg\:inline { display: inline; }
    .lg\:flex { display: flex; }
    .lg\:inline-flex { display: inline-flex; }
    .lg\:grid { display: grid; }
    .lg\:hidden { display: none; }
    
    .lg\:text-xs { font-size: var(--font-size-xs); }
    .lg\:text-sm { font-size: var(--font-size-sm); }
    .lg\:text-base { font-size: var(--font-size-base); }
    .lg\:text-lg { font-size: var(--font-size-lg); }
    .lg\:text-xl { font-size: var(--font-size-xl); }
    .lg\:text-2xl { font-size: var(--font-size-2xl); }
    .lg\:text-3xl { font-size: var(--font-size-3xl); }
    .lg\:text-4xl { font-size: var(--font-size-4xl); }
    .lg\:text-5xl { font-size: var(--font-size-5xl); }
    .lg\:text-6xl { font-size: var(--font-size-6xl); }
    
    .lg\:p-1 { padding: var(--space-1); }
    .lg\:p-2 { padding: var(--space-2); }
    .lg\:p-3 { padding: var(--space-3); }
    .lg\:p-4 { padding: var(--space-4); }
    .lg\:p-5 { padding: var(--space-5); }
    .lg\:p-6 { padding: var(--space-6); }
    .lg\:p-8 { padding: var(--space-8); }
    .lg\:p-10 { padding: var(--space-10); }
    .lg\:p-12 { padding: var(--space-12); }
    .lg\:p-16 { padding: var(--space-16); }
    .lg\:p-20 { padding: var(--space-20); }
    
    .lg\:m-1 { margin: var(--space-1); }
    .lg\:m-2 { margin: var(--space-2); }
    .lg\:m-3 { margin: var(--space-3); }
    .lg\:m-4 { margin: var(--space-4); }
    .lg\:m-5 { margin: var(--space-5); }
    .lg\:m-6 { margin: var(--space-6); }
    .lg\:m-8 { margin: var(--space-8); }
    .lg\:m-10 { margin: var(--space-10); }
    .lg\:m-12 { margin: var(--space-12); }
    .lg\:m-16 { margin: var(--space-16); }
    .lg\:m-20 { margin: var(--space-20); }
    
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    
    .lg\:flex-row { flex-direction: row; }
    .lg\:flex-col { flex-direction: column; }
    .lg\:justify-start { justify-content: flex-start; }
    .lg\:justify-center { justify-content: center; }
    .lg\:justify-end { justify-content: flex-end; }
    .lg\:justify-between { justify-content: space-between; }
    .lg\:items-start { align-items: flex-start; }
    .lg\:items-center { align-items: center; }
    .lg\:items-end { align-items: flex-end; }
}

/* Extra Large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
    .xl\:block { display: block; }
    .xl\:inline-block { display: inline-block; }
    .xl\:inline { display: inline; }
    .xl\:flex { display: flex; }
    .xl\:inline-flex { display: inline-flex; }
    .xl\:grid { display: grid; }
    .xl\:hidden { display: none; }
    
    .xl\:text-xs { font-size: var(--font-size-xs); }
    .xl\:text-sm { font-size: var(--font-size-sm); }
    .xl\:text-base { font-size: var(--font-size-base); }
    .xl\:text-lg { font-size: var(--font-size-lg); }
    .xl\:text-xl { font-size: var(--font-size-xl); }
    .xl\:text-2xl { font-size: var(--font-size-2xl); }
    .xl\:text-3xl { font-size: var(--font-size-3xl); }
    .xl\:text-4xl { font-size: var(--font-size-4xl); }
    .xl\:text-5xl { font-size: var(--font-size-5xl); }
    .xl\:text-6xl { font-size: var(--font-size-6xl); }
    
    .xl\:p-1 { padding: var(--space-1); }
    .xl\:p-2 { padding: var(--space-2); }
    .xl\:p-3 { padding: var(--space-3); }
    .xl\:p-4 { padding: var(--space-4); }
    .xl\:p-5 { padding: var(--space-5); }
    .xl\:p-6 { padding: var(--space-6); }
    .xl\:p-8 { padding: var(--space-8); }
    .xl\:p-10 { padding: var(--space-10); }
    .xl\:p-12 { padding: var(--space-12); }
    .xl\:p-16 { padding: var(--space-16); }
    .xl\:p-20 { padding: var(--space-20); }
    .xl\:p-24 { padding: var(--space-24); }
    .xl\:p-32 { padding: var(--space-32); }
    
    .xl\:m-1 { margin: var(--space-1); }
    .xl\:m-2 { margin: var(--space-2); }
    .xl\:m-3 { margin: var(--space-3); }
    .xl\:m-4 { margin: var(--space-4); }
    .xl\:m-5 { margin: var(--space-5); }
    .xl\:m-6 { margin: var(--space-6); }
    .xl\:m-8 { margin: var(--space-8); }
    .xl\:m-10 { margin: var(--space-10); }
    .xl\:m-12 { margin: var(--space-12); }
    .xl\:m-16 { margin: var(--space-16); }
    .xl\:m-20 { margin: var(--space-20); }
    .xl\:m-24 { margin: var(--space-24); }
    .xl\:m-32 { margin: var(--space-32); }
    
    .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    
    .xl\:flex-row { flex-direction: row; }
    .xl\:flex-col { flex-direction: column; }
    .xl\:justify-start { justify-content: flex-start; }
    .xl\:justify-center { justify-content: center; }
    .xl\:justify-end { justify-content: flex-end; }
    .xl\:justify-between { justify-content: space-between; }
    .xl\:items-start { align-items: flex-start; }
    .xl\:items-center { align-items: center; }
    .xl\:items-end { align-items: flex-end; }
}

/* 2XL devices (larger desktops, 1536px and up) */
@media (min-width: 1536px) {
    .2xl\:block { display: block; }
    .2xl\:inline-block { display: inline-block; }
    .2xl\:inline { display: inline; }
    .2xl\:flex { display: flex; }
    .2xl\:inline-flex { display: inline-flex; }
    .2xl\:grid { display: grid; }
    .2xl\:hidden { display: none; }
    
    .2xl\:text-xs { font-size: var(--font-size-xs); }
    .2xl\:text-sm { font-size: var(--font-size-sm); }
    .2xl\:text-base { font-size: var(--font-size-base); }
    .2xl\:text-lg { font-size: var(--font-size-lg); }
    .2xl\:text-xl { font-size: var(--font-size-xl); }
    .2xl\:text-2xl { font-size: var(--font-size-2xl); }
    .2xl\:text-3xl { font-size: var(--font-size-3xl); }
    .2xl\:text-4xl { font-size: var(--font-size-4xl); }
    .2xl\:text-5xl { font-size: var(--font-size-5xl); }
    .2xl\:text-6xl { font-size: var(--font-size-6xl); }
    
    .2xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .2xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .2xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .2xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .2xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .2xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .2xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Mobile Specific Utilities */
@media (max-width: 767px) {
    .mobile\:block { display: block; }
    .mobile\:hidden { display: none; }
    .mobile\:flex { display: flex; }
    .mobile\:flex-col { flex-direction: column; }
    .mobile\:text-center { text-align: center; }
    .mobile\:text-left { text-align: left; }
    .mobile\:text-right { text-align: right; }
    .mobile\:p-2 { padding: var(--space-2); }
    .mobile\:p-3 { padding: var(--space-3); }
    .mobile\:p-4 { padding: var(--space-4); }
    .mobile\:m-2 { margin: var(--space-2); }
    .mobile\:m-3 { margin: var(--space-3); }
    .mobile\:m-4 { margin: var(--space-4); }
    .mobile\:w-full { width: 100%; }
    .mobile\:h-auto { height: auto; }
}

/* Tablet Specific Utilities */
@media (min-width: 768px) and (max-width: 1023px) {
    .tablet\:block { display: block; }
    .tablet\:hidden { display: none; }
    .tablet\:flex { display: flex; }
    .tablet\:grid { display: grid; }
    .tablet\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tablet\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tablet\:flex-row { flex-direction: row; }
    .tablet\:flex-col { flex-direction: column; }
    .tablet\:justify-center { justify-content: center; }
    .tablet\:items-center { align-items: center; }
}

/* Desktop Specific Utilities */
@media (min-width: 1024px) {
    .desktop\:block { display: block; }
    .desktop\:hidden { display: none; }
    .desktop\:flex { display: flex; }
    .desktop\:grid { display: grid; }
    .desktop\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .desktop\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .desktop\:flex-row { flex-direction: row; }
    .desktop\:justify-between { justify-content: space-between; }
    .desktop\:items-start { align-items: flex-start; }
}

/* Print Utilities */
@media print {
    .print\:block { display: block; }
    .print\:hidden { display: none; }
    .print\:text-black { color: black; }
    .print\:bg-white { background-color: white; }
    .print\:shadow-none { box-shadow: none; }
    .print\:border { border: 1px solid black; }
}

/* High DPI / Retina Display */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .retina\:text-sm { font-size: var(--font-size-sm); }
    .retina\:text-base { font-size: var(--font-size-base); }
    .retina\:text-lg { font-size: var(--font-size-lg); }
}

/* Landscape Orientation */
@media (orientation: landscape) {
    .landscape\:flex-row { flex-direction: row; }
    .landscape\:hidden { display: none; }
    .landscape\:block { display: block; }
}

/* Portrait Orientation */
@media (orientation: portrait) {
    .portrait\:flex-col { flex-direction: column; }
    .portrait\:hidden { display: none; }
    .portrait\:block { display: block; }
}

/* Hover Support */
@media (hover: hover) {
    .hover\:block:hover { display: block; }
    .hover\:hidden:hover { display: none; }
    .hover\:flex:hover { display: flex; }
    .hover\:scale-105:hover { transform: scale(1.05); }
    .hover\:scale-110:hover { transform: scale(1.1); }
    .hover\:rotate-1:hover { transform: rotate(1deg); }
    .hover\:rotate-2:hover { transform: rotate(2deg); }
    .hover\:rotate-3:hover { transform: rotate(3deg); }
    .hover\:-rotate-1:hover { transform: rotate(-1deg); }
    .hover\:-rotate-2:hover { transform: rotate(-2deg); }
    .hover\:-rotate-3:hover { transform: rotate(-3deg); }
}

/* No Hover Support (Touch Devices) */
@media (hover: none) {
    .no-hover\:block { display: block; }
    .no-hover\:hidden { display: none; }
    .no-hover\:flex { display: flex; }
    .no-hover\:text-lg { font-size: var(--font-size-lg); }
    .no-hover\:p-4 { padding: var(--space-4); }
}

/* Focus Support */
@media (focus: focus) {
    .focus\:block:focus { display: block; }
    .focus\:hidden:focus { display: none; }
    .focus\:outline:focus { outline: 2px solid var(--primary-blue); }
    .focus\:ring:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .motion-reduce\:animate-none { animation: none; }
    .motion-reduce\:transition-none { transition: none; }
    .motion-reduce\:transform-none { transform: none; }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .dark\:block { display: block; }
    .dark\:hidden { display: none; }
    .dark\:text-white { color: white; }
    .dark\:bg-gray-800 { background-color: var(--gray-800); }
    .dark\:bg-gray-900 { background-color: var(--gray-900); }
    .dark\:border-gray-700 { border-color: var(--gray-700); }
}

/* Light Mode */
@media (prefers-color-scheme: light) {
    .light\:block { display: block; }
    .light\:hidden { display: none; }
    .light\:text-gray-900 { color: var(--gray-900); }
    .light\:bg-white { background-color: white; }
    .light\:bg-gray-50 { background-color: var(--gray-50); }
    .light\:border-gray-200 { border-color: var(--gray-200); }
}