/**
 * ColdStorage Responsive Utilities
 * Additional utility classes for responsive design
 * Version: 1.0
 */

/* ===== RESPONSIVE VISIBILITY UTILITIES ===== */

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

/* Show only on mobile */
.d-mobile-only { display: none !important; }
@media (max-width: 767px) {
    .d-mobile-only { display: block !important; }
    .d-mobile-only.d-flex { display: flex !important; }
    .d-mobile-only.d-inline { display: inline !important; }
    .d-mobile-only.d-inline-block { display: inline-block !important; }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .d-tablet-none { display: none !important; }
}

/* Show only on tablet */
.d-tablet-only { display: none !important; }
@media (min-width: 768px) and (max-width: 991px) {
    .d-tablet-only { display: block !important; }
    .d-tablet-only.d-flex { display: flex !important; }
}

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

/* Show only on desktop */
.d-desktop-only { display: none !important; }
@media (min-width: 992px) {
    .d-desktop-only { display: block !important; }
    .d-desktop-only.d-flex { display: flex !important; }
}

/* ===== RESPONSIVE TEXT UTILITIES ===== */

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

/* Tablet text alignment */
@media (min-width: 768px) and (max-width: 991px) {
    .text-tablet-center { text-align: center !important; }
    .text-tablet-left { text-align: left !important; }
    .text-tablet-right { text-align: right !important; }
}

/* Responsive font sizes */
.fs-responsive-sm { font-size: clamp(0.875rem, 2vw, 1rem); }
.fs-responsive-md { font-size: clamp(1rem, 2.5vw, 1.25rem); }
.fs-responsive-lg { font-size: clamp(1.25rem, 3vw, 1.5rem); }
.fs-responsive-xl { font-size: clamp(1.5rem, 4vw, 2rem); }
.fs-responsive-xxl { font-size: clamp(2rem, 5vw, 3rem); }

/* ===== RESPONSIVE SPACING UTILITIES ===== */

/* Mobile spacing */
@media (max-width: 767px) {
    .p-mobile-0 { padding: 0 !important; }
    .p-mobile-1 { padding: 0.25rem !important; }
    .p-mobile-2 { padding: 0.5rem !important; }
    .p-mobile-3 { padding: 1rem !important; }
    .p-mobile-4 { padding: 1.5rem !important; }
    .p-mobile-5 { padding: 3rem !important; }
    
    .m-mobile-0 { margin: 0 !important; }
    .m-mobile-1 { margin: 0.25rem !important; }
    .m-mobile-2 { margin: 0.5rem !important; }
    .m-mobile-3 { margin: 1rem !important; }
    .m-mobile-4 { margin: 1.5rem !important; }
    .m-mobile-5 { margin: 3rem !important; }
    
    .px-mobile-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .px-mobile-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-mobile-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-mobile-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    
    .mx-mobile-auto { margin-left: auto !important; margin-right: auto !important; }
    .my-mobile-auto { margin-top: auto !important; margin-bottom: auto !important; }
}

/* ===== RESPONSIVE FLEXBOX UTILITIES ===== */

/* Mobile flex utilities */
@media (max-width: 767px) {
    .flex-mobile-column { flex-direction: column !important; }
    .flex-mobile-row { flex-direction: row !important; }
    .justify-content-mobile-center { justify-content: center !important; }
    .justify-content-mobile-start { justify-content: flex-start !important; }
    .justify-content-mobile-end { justify-content: flex-end !important; }
    .align-items-mobile-center { align-items: center !important; }
    .align-items-mobile-start { align-items: flex-start !important; }
    .align-items-mobile-end { align-items: flex-end !important; }
}

/* ===== RESPONSIVE BUTTON UTILITIES ===== */

/* Mobile button styles */
@media (max-width: 767px) {
    .btn-mobile-block {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .btn-mobile-sm {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    .btn-group-mobile-vertical {
        flex-direction: column !important;
    }
    
    .btn-group-mobile-vertical .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        border-radius: 0.375rem !important;
    }
}

/* ===== RESPONSIVE GRID UTILITIES ===== */

/* Mobile grid adjustments */
@media (max-width: 575px) {
    .col-mobile-12 { flex: 0 0 100% !important; max-width: 100% !important; }
    .col-mobile-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .col-mobile-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .col-mobile-3 { flex: 0 0 25% !important; max-width: 25% !important; }
}

/* ===== RESPONSIVE CARD UTILITIES ===== */

/* Mobile card styles */
@media (max-width: 767px) {
    .card-mobile-full {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        border-radius: 0 !important;
    }
    
    .card-mobile-compact .card-body {
        padding: 1rem !important;
    }
    
    .card-mobile-compact .card-title {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ===== RESPONSIVE NAVBAR UTILITIES ===== */

/* Mobile navbar enhancements */
@media (max-width: 991px) {
    .navbar-mobile-transparent {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    .navbar-nav-mobile-center {
        text-align: center !important;
    }
    
    .navbar-nav-mobile-center .nav-link {
        justify-content: center !important;
    }
}

/* ===== RESPONSIVE FORM UTILITIES ===== */

/* Mobile form styles */
@media (max-width: 767px) {
    .form-mobile-stack .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-mobile-stack input,
    .form-mobile-stack textarea,
    .form-mobile-stack select {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .input-group-mobile-stack {
        flex-direction: column !important;
    }
    
    .input-group-mobile-stack .form-control {
        border-radius: 0.375rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .input-group-mobile-stack .btn {
        border-radius: 0.375rem !important;
    }
}

/* ===== RESPONSIVE IMAGE UTILITIES ===== */

/* Responsive images */
.img-responsive-mobile {
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 767px) {
    .img-mobile-full {
        width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
    }
    
    .img-mobile-center {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===== RESPONSIVE TABLE UTILITIES ===== */

/* Mobile table styles */
@media (max-width: 767px) {
    .table-mobile-responsive {
        font-size: 0.875rem !important;
    }
    
    .table-mobile-stack thead {
        display: none !important;
    }
    
    .table-mobile-stack tbody,
    .table-mobile-stack tr,
    .table-mobile-stack td {
        display: block !important;
        width: 100% !important;
    }
    
    .table-mobile-stack tr {
        border: 1px solid #dee2e6 !important;
        margin-bottom: 1rem !important;
        padding: 0.5rem !important;
        border-radius: 0.375rem !important;
    }
    
    .table-mobile-stack td {
        border: none !important;
        padding: 0.25rem 0 !important;
    }
    
    .table-mobile-stack td:before {
        content: attr(data-label) ": " !important;
        font-weight: bold !important;
    }
}

/* ===== RESPONSIVE MODAL UTILITIES ===== */

/* Mobile modal adjustments */
@media (max-width: 767px) {
    .modal-mobile-fullscreen .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
    }
    
    .modal-mobile-fullscreen .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }
    
    .modal-mobile-bottom .modal-dialog {
        margin: auto 0 0 0 !important;
    }
    
    .modal-mobile-bottom .modal-content {
        border-radius: 1rem 1rem 0 0 !important;
    }
}

/* ===== RESPONSIVE ANIMATION UTILITIES ===== */

/* Disable animations on mobile for better performance */
@media (max-width: 767px) {
    .no-mobile-animation,
    .no-mobile-animation * {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
    }
    
    .no-mobile-transition,
    .no-mobile-transition * {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* ===== TOUCH DEVICE UTILITIES ===== */

/* Touch-specific styles */
.touch-device .hover-touch:hover {
    transform: scale(0.98);
    opacity: 0.8;
}

.no-touch-device .hover-desktop:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Touch-friendly button sizing */
.touch-device .btn-touch {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.75rem 1rem !important;
}

/* ===== ACCESSIBILITY RESPONSIVE UTILITIES ===== */

/* High contrast mode */
@media (prefers-contrast: high) {
    .high-contrast-border {
        border: 2px solid currentColor !important;
    }
    
    .high-contrast-bg {
        background-color: ButtonFace !important;
        color: ButtonText !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .respect-motion-preference {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== PRINT RESPONSIVE UTILITIES ===== */

@media print {
    .print-hidden { display: none !important; }
    .print-visible { display: block !important; }
    .print-break-before { page-break-before: always !important; }
    .print-break-after { page-break-after: always !important; }
    .print-no-break { page-break-inside: avoid !important; }
}

/* ===== LOADING AND PERFORMANCE UTILITIES ===== */

/* Skeleton loading animations for mobile */
@media (max-width: 767px) {
    .skeleton-mobile {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Lazy loading utilities */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy-load.loaded {
    opacity: 1;
}