/* ========================================
   MOBILE UTILITY CLASSES
   Quick reference for common mobile patterns
   ======================================== */

/* Display Utilities */
.mobile-show { display: none !important; }
.mobile-hide { display: block !important; }

@media (max-width: 768px) {
    .mobile-show { display: block !important; }
    .mobile-hide { display: none !important; }
    .mobile-show-flex { display: flex !important; }
    .mobile-show-inline { display: inline !important; }
    .mobile-show-inline-block { display: inline-block !important; }
}

/* Layout Utilities */
@media (max-width: 768px) {
    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }

    .mobile-auto-width {
        width: auto !important;
    }

    .mobile-flex-column {
        flex-direction: column !important;
    }

    .mobile-flex-row {
        flex-direction: row !important;
    }

    .mobile-no-wrap {
        flex-wrap: nowrap !important;
    }

    .mobile-wrap {
        flex-wrap: wrap !important;
    }
}

/* Spacing Utilities */
@media (max-width: 768px) {
    .mobile-p-0 { padding: 0 !important; }
    .mobile-p-1 { padding: 0.25rem !important; }
    .mobile-p-2 { padding: 0.5rem !important; }
    .mobile-p-3 { padding: 1rem !important; }
    
    .mobile-m-0 { margin: 0 !important; }
    .mobile-m-1 { margin: 0.25rem !important; }
    .mobile-m-2 { margin: 0.5rem !important; }
    .mobile-m-3 { margin: 1rem !important; }

    .mobile-mt-0 { margin-top: 0 !important; }
    .mobile-mt-1 { margin-top: 0.25rem !important; }
    .mobile-mt-2 { margin-top: 0.5rem !important; }
    .mobile-mt-3 { margin-top: 1rem !important; }

    .mobile-mb-0 { margin-bottom: 0 !important; }
    .mobile-mb-1 { margin-bottom: 0.25rem !important; }
    .mobile-mb-2 { margin-bottom: 0.5rem !important; }
    .mobile-mb-3 { margin-bottom: 1rem !important; }
}

/* Text Utilities */
@media (max-width: 768px) {
    .mobile-text-center { text-align: center !important; }
    .mobile-text-left { text-align: left !important; }
    .mobile-text-right { text-align: right !important; }

    .mobile-text-xs { font-size: 0.75rem !important; }
    .mobile-text-sm { font-size: 0.875rem !important; }
    .mobile-text-md { font-size: 1rem !important; }
    .mobile-text-lg { font-size: 1.125rem !important; }

    .mobile-font-weight-normal { font-weight: 400 !important; }
    .mobile-font-weight-bold { font-weight: 700 !important; }

    .mobile-text-truncate {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .mobile-text-wrap {
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

/* Position Utilities */
@media (max-width: 768px) {
    .mobile-position-static { position: static !important; }
    .mobile-position-relative { position: relative !important; }
    .mobile-position-absolute { position: absolute !important; }
    .mobile-position-fixed { position: fixed !important; }
    .mobile-position-sticky { position: sticky !important; }
}

/* Overflow Utilities */
@media (max-width: 768px) {
    .mobile-overflow-auto { overflow: auto !important; }
    .mobile-overflow-hidden { overflow: hidden !important; }
    .mobile-overflow-visible { overflow: visible !important; }
    .mobile-overflow-scroll { overflow: scroll !important; }

    .mobile-overflow-x-auto { overflow-x: auto !important; }
    .mobile-overflow-x-hidden { overflow-x: hidden !important; }

    .mobile-overflow-y-auto { overflow-y: auto !important; }
    .mobile-overflow-y-hidden { overflow-y: hidden !important; }
}

/* Touch-Friendly Utilities */
@media (max-width: 768px) {
    .mobile-touch-target {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-no-select {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }

    .mobile-tap-highlight-none {
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* Border Utilities */
@media (max-width: 768px) {
    .mobile-border-0 { border: 0 !important; }
    .mobile-border { border: 1px solid var(--border-color) !important; }
    .mobile-border-top { border-top: 1px solid var(--border-color) !important; }
    .mobile-border-bottom { border-bottom: 1px solid var(--border-color) !important; }
    .mobile-border-left { border-left: 1px solid var(--border-color) !important; }
    .mobile-border-right { border-right: 1px solid var(--border-color) !important; }

    .mobile-rounded-0 { border-radius: 0 !important; }
    .mobile-rounded { border-radius: 0.25rem !important; }
    .mobile-rounded-lg { border-radius: 0.5rem !important; }
    .mobile-rounded-circle { border-radius: 50% !important; }
}

/* Z-Index Utilities */
@media (max-width: 768px) {
    .mobile-z-0 { z-index: 0 !important; }
    .mobile-z-10 { z-index: 10 !important; }
    .mobile-z-20 { z-index: 20 !important; }
    .mobile-z-30 { z-index: 30 !important; }
    .mobile-z-40 { z-index: 40 !important; }
    .mobile-z-50 { z-index: 50 !important; }
    .mobile-z-100 { z-index: 100 !important; }
    .mobile-z-1000 { z-index: 1000 !important; }
}

/* Grid Utilities */
@media (max-width: 768px) {
    .mobile-grid-cols-1 {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 1rem;
    }

    .mobile-grid-cols-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }
}

/* Cursor Utilities */
@media (max-width: 768px) {
    .mobile-cursor-pointer { cursor: pointer !important; }
    .mobile-cursor-default { cursor: default !important; }
}

/* Shadow Utilities */
@media (max-width: 768px) {
    .mobile-shadow-none { box-shadow: none !important; }
    .mobile-shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
    .mobile-shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important; }
    .mobile-shadow-lg { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; }
}

/* ========================================
   TABLET-SPECIFIC (481px - 768px)
   ======================================== */

@media (min-width: 481px) and (max-width: 768px) {
    .tablet-show { display: block !important; }
    .tablet-hide { display: none !important; }
    
    .tablet-flex-row { flex-direction: row !important; }
    .tablet-flex-column { flex-direction: column !important; }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .landscape-hide { display: none !important; }
    .landscape-show { display: block !important; }
}

/* ========================================
   PORTRAIT ORIENTATION
   ======================================== */

@media (max-width: 768px) and (orientation: portrait) {
    .portrait-hide { display: none !important; }
    .portrait-show { display: block !important; }
}

/* ========================================
   TOUCH DEVICE SPECIFIC
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    .touch-hide { display: none !important; }
    .touch-show { display: block !important; }
    
    /* Larger tap targets on touch devices */
    .btn, button, a, input[type="button"], input[type="submit"] {
        min-height: 44px;
    }
}

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

@media print {
    .print-hide { display: none !important; }
    .print-show { display: block !important; }
}

/* ========================================
   CUSTOM COMPONENTS
   ======================================== */

/* Mobile-friendly card */
.mobile-card {
    background: var(--card-background-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .mobile-card {
        border-radius: 4px;
        padding: 0.75rem;
    }
}

/* Mobile-friendly button group */
.mobile-button-group {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .mobile-button-group {
        flex-direction: column;
        width: 100%;
    }

    .mobile-button-group > * {
        width: 100%;
    }
}

/* Mobile-friendly form group */
.mobile-form-group {
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .mobile-form-group {
        margin-bottom: 0.75rem;
    }

    .mobile-form-group label {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    .mobile-form-group input,
    .mobile-form-group select,
    .mobile-form-group textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Sticky header helper */
.mobile-sticky-header {
    position: sticky;
    top: 60px; /* Adjust based on your nav height */
    background: var(--card-background-color);
    z-index: 10;
    padding: 0.5rem 0;
}

/* Mobile-friendly tabs */
.mobile-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mobile-tabs::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-tabs {
        border-bottom: 1px solid var(--border-color);
    }

    .mobile-tabs .nav-link {
        white-space: nowrap;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* Floating action button (FAB) for mobile */
.mobile-fab {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-color-darker);
    color: white;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .mobile-fab {
        display: flex;
    }
}

/* Touch feedback */
.touching {
    opacity: 0.7;
    transform: scale(0.98);
    transition: all 0.1s ease;
}