/* Responsive Utility Classes for ThreadMaster */

/* ================================
   Breakpoint System
   ================================ */
/* 
   xs: 0-479px (mobile portrait)
   sm: 480-639px (mobile landscape)
   md: 640-767px (small tablet)
   lg: 768-1023px (tablet)
   xl: 1024-1279px (desktop)
   2xl: 1280px+ (large desktop)
*/

/* ================================
   Display Utilities
   ================================ */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* Responsive Display */
@media (max-width: 479px) {
    .d-xs-none { display: none !important; }
    .d-xs-block { display: block !important; }
    .d-xs-flex { display: flex !important; }
}

@media (min-width: 480px) and (max-width: 639px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}

@media (min-width: 640px) and (max-width: 767px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

@media (min-width: 768px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}

@media (min-width: 1024px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
}

/* ================================
   Spacing Utilities
   ================================ */
/* Fluid Padding */
.p-fluid-sm { padding: clamp(8px, 2vw, 12px) !important; }
.p-fluid-md { padding: clamp(16px, 3vw, 24px) !important; }
.p-fluid-lg { padding: clamp(24px, 4vw, 32px) !important; }
.p-fluid-xl { padding: clamp(32px, 5vw, 48px) !important; }

.px-fluid-sm { padding-left: clamp(8px, 2vw, 12px) !important; padding-right: clamp(8px, 2vw, 12px) !important; }
.px-fluid-md { padding-left: clamp(16px, 3vw, 24px) !important; padding-right: clamp(16px, 3vw, 24px) !important; }
.px-fluid-lg { padding-left: clamp(24px, 4vw, 32px) !important; padding-right: clamp(24px, 4vw, 32px) !important; }

.py-fluid-sm { padding-top: clamp(8px, 2vw, 12px) !important; padding-bottom: clamp(8px, 2vw, 12px) !important; }
.py-fluid-md { padding-top: clamp(16px, 3vw, 24px) !important; padding-bottom: clamp(16px, 3vw, 24px) !important; }
.py-fluid-lg { padding-top: clamp(24px, 4vw, 32px) !important; padding-bottom: clamp(24px, 4vw, 32px) !important; }

/* Fluid Margins */
.m-fluid-sm { margin: clamp(8px, 2vw, 12px) !important; }
.m-fluid-md { margin: clamp(16px, 3vw, 24px) !important; }
.m-fluid-lg { margin: clamp(24px, 4vw, 32px) !important; }

.mx-fluid-sm { margin-left: clamp(8px, 2vw, 12px) !important; margin-right: clamp(8px, 2vw, 12px) !important; }
.mx-fluid-md { margin-left: clamp(16px, 3vw, 24px) !important; margin-right: clamp(16px, 3vw, 24px) !important; }
.mx-fluid-lg { margin-left: clamp(24px, 4vw, 32px) !important; margin-right: clamp(24px, 4vw, 32px) !important; }

.my-fluid-sm { margin-top: clamp(8px, 2vw, 12px) !important; margin-bottom: clamp(8px, 2vw, 12px) !important; }
.my-fluid-md { margin-top: clamp(16px, 3vw, 24px) !important; margin-bottom: clamp(16px, 3vw, 24px) !important; }
.my-fluid-lg { margin-top: clamp(24px, 4vw, 32px) !important; margin-bottom: clamp(24px, 4vw, 32px) !important; }

/* ================================
   Typography Utilities
   ================================ */
/* Fluid Font Sizes */
.text-fluid-xs { font-size: clamp(0.75rem, 1.5vw, 0.875rem) !important; }
.text-fluid-sm { font-size: clamp(0.875rem, 2vw, 1rem) !important; }
.text-fluid-md { font-size: clamp(1rem, 2.5vw, 1.125rem) !important; }
.text-fluid-lg { font-size: clamp(1.125rem, 3vw, 1.25rem) !important; }
.text-fluid-xl { font-size: clamp(1.25rem, 3.5vw, 1.5rem) !important; }
.text-fluid-2xl { font-size: clamp(1.5rem, 4vw, 2rem) !important; }
.text-fluid-3xl { font-size: clamp(2rem, 5vw, 3rem) !important; }

/* Text Alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

@media (max-width: 767px) {
    .text-mobile-center { text-align: center !important; }
    .text-mobile-left { text-align: left !important; }
}

/* ================================
   Touch-Friendly Utilities
   ================================ */
.touch-target {
    min-height: 44px !important;
    min-width: 44px !important;
}

.touch-padding {
    padding: clamp(12px, 2vw, 16px) !important;
}

.touch-spacing > * + * {
    margin-top: clamp(12px, 3vw, 16px) !important;
}

/* ================================
   Grid Utilities
   ================================ */
.grid-responsive {
    display: grid;
    gap: clamp(16px, 3vw, 24px);
}

.grid-cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

@media (max-width: 639px) {
    .grid-mobile-1 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {
    .grid-tablet-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ================================
   Flexbox Utilities
   ================================ */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-center { justify-content: center !important; align-items: center !important; }
.flex-between { justify-content: space-between !important; }
.flex-around { justify-content: space-around !important; }
.flex-evenly { justify-content: space-evenly !important; }
.flex-start { justify-content: flex-start !important; }
.flex-end { justify-content: flex-end !important; }

.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }

@media (max-width: 767px) {
    .flex-mobile-col { flex-direction: column !important; }
    .flex-mobile-wrap { flex-wrap: wrap !important; }
}

/* ================================
   Width Utilities
   ================================ */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.w-fluid { width: clamp(280px, 90vw, 100%) !important; }

@media (max-width: 767px) {
    .w-mobile-100 { width: 100% !important; }
}

/* ================================
   Container Utilities
   ================================ */
.container-fluid {
    width: 100%;
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
}

.container-responsive {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
}

/* ================================
   Border Radius Utilities
   ================================ */
.rounded-fluid-sm { border-radius: clamp(4px, 1vw, 8px) !important; }
.rounded-fluid-md { border-radius: clamp(8px, 2vw, 12px) !important; }
.rounded-fluid-lg { border-radius: clamp(12px, 3vw, 16px) !important; }
.rounded-fluid-xl { border-radius: clamp(16px, 4vw, 24px) !important; }

/* ================================
   Button Utilities
   ================================ */
.btn-fluid {
    padding: clamp(10px, 2vw, 12px) clamp(18px, 3vw, 24px);
    min-height: 44px;
    font-size: clamp(0.875rem, 2vw, 1rem);
}

@media (max-width: 479px) {
    .btn-mobile-full {
        width: 100% !important;
    }
}

/* ================================
   Visibility Utilities
   ================================ */
.show-mobile { display: none !important; }
.hide-mobile { display: initial !important; }

@media (max-width: 767px) {
    .show-mobile { display: initial !important; }
    .hide-mobile { display: none !important; }
}

.show-desktop { display: initial !important; }
.hide-desktop { display: none !important; }

@media (min-width: 768px) {
    .show-desktop { display: initial !important; }
    .hide-desktop { display: none !important; }
}

/* ================================
   Overflow Utilities
   ================================ */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* ================================
   Card Utilities
   ================================ */
.card-fluid {
    padding: clamp(20px, 4vw, 32px);
    border-radius: clamp(12px, 3vw, 20px);
}

@media (max-width: 639px) {
    .card-mobile-compact {
        padding: clamp(16px, 3vw, 20px) !important;
    }
}

/* ================================
   Gap Utilities
   ================================ */
.gap-fluid-sm { gap: clamp(8px, 2vw, 12px) !important; }
.gap-fluid-md { gap: clamp(12px, 3vw, 16px) !important; }
.gap-fluid-lg { gap: clamp(16px, 4vw, 24px) !important; }
.gap-fluid-xl { gap: clamp(24px, 5vw, 32px) !important; }

/* ================================
   Z-Index Utilities
   ================================ */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-100 { z-index: 100 !important; }
.z-1000 { z-index: 1000 !important; }

/* ================================
   Aspect Ratio Utilities
   ================================ */
.aspect-square { aspect-ratio: 1 / 1 !important; }
.aspect-video { aspect-ratio: 16 / 9 !important; }
.aspect-portrait { aspect-ratio: 3 / 4 !important; }

/* ================================
   Print Utilities
   ================================ */
@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
}