/* ============================================================================
   LOREBENCH RESPONSIVE UTILITIES
   ============================================================================
   Global responsive styles, breakpoint definitions, touch enhancements,
   and mobile typography scaling.
   ============================================================================ */

/* ============================================================================
   BREAKPOINT DEFINITIONS
   ============================================================================ */

:root {
    /* Standardized breakpoints */
    --lb-breakpoint-sm: 480px;   /* Small mobile */
    --lb-breakpoint-md: 768px;   /* Tablet portrait / Large mobile */
    --lb-breakpoint-lg: 1024px;  /* Tablet landscape / Small desktop */
    --lb-breakpoint-xl: 1280px;  /* Desktop */

    /* Touch-friendly minimum tap target */
    --lb-tap-target-min: 44px;
}

/* ============================================================================
   MOBILE TYPOGRAPHY SCALING
   ============================================================================ */

@media (max-width: 768px) {
    :root {
        --lb-font-size-xs: 0.7rem;
        --lb-font-size-sm: 0.8rem;
        --lb-font-size-base: 0.9rem;
        --lb-font-size-lg: 1rem;
        --lb-font-size-xl: 1.15rem;
        --lb-font-size-2xl: 1.35rem;
        --lb-font-size-3xl: 1.6rem;
    }
}

@media (max-width: 480px) {
    :root {
        --lb-font-size-2xl: 1.25rem;
        --lb-font-size-3xl: 1.4rem;
    }
}

/* ============================================================================
   TOUCH ENHANCEMENTS
   ============================================================================ */

@media (max-width: 768px) {
    /* Touch-friendly tap targets */
    button,
    .btn,
    a.btn,
    [role="button"],
    .clickable {
        min-height: var(--lb-tap-target-min);
    }

    /* Remove webkit tap highlight for cleaner touch feedback */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent text selection on interactive elements */
    button,
    .btn,
    .tab,
    .nav-btn,
    .filter-chip,
    .pillar-card,
    .stat-card {
        user-select: none;
        -webkit-user-select: none;
    }

    /* Smooth scrolling for mobile */
    html {
        scroll-behavior: smooth;
    }

    /* Better touch scrolling in overflow areas */
    .scroll-container,
    .filter-chips,
    .section-nav,
    .tabs {
        -webkit-overflow-scrolling: touch;
    }
}

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

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

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

/* Hide on tablet and below */
@media (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* Show only on desktop */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* ============================================================================
   HORIZONTAL SCROLL CONTAINERS
   ============================================================================ */

.scroll-horizontal {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.scroll-horizontal::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.scroll-horizontal > * {
    flex-shrink: 0;
}

/* ============================================================================
   MOBILE MODAL STYLES
   ============================================================================ */

@media (max-width: 768px) {
    /* Full-screen modals on mobile */
    .stat-modal,
    .attribute-picker-modal,
    .relationship-picker-modal,
    .media-picker-modal,
    .media-upload-dialog,
    .report-modal,
    .hcc-modal,
    .aem-modal-wide,
    .rp-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Sticky modal headers on mobile */
    .stat-modal-header,
    .modal-header,
    .aem-header,
    .rp-header,
    .hcc-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--lb-bg-elevated, #1a1a1a);
    }

    /* Sticky modal footers on mobile */
    .stat-modal-footer,
    .modal-footer,
    .aem-footer,
    .rp-footer,
    .hcc-footer {
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: var(--lb-bg-elevated, #1a1a1a);
    }

    /* Modal body scrollable */
    .stat-modal-body,
    .modal-body,
    .aem-body,
    .rp-body,
    .hcc-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================================
   MOBILE GRID UTILITIES
   ============================================================================ */

/* Force single column on mobile */
@media (max-width: 480px) {
    .mobile-single-col {
        grid-template-columns: 1fr !important;
    }
}

/* Force two columns on tablet, single on mobile */
@media (max-width: 768px) {
    .tablet-two-col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .tablet-two-col {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   MOBILE SPACING UTILITIES
   ============================================================================ */

@media (max-width: 768px) {
    .mobile-p-sm {
        padding: var(--lb-spacing-sm) !important;
    }

    .mobile-p-md {
        padding: var(--lb-spacing-md) !important;
    }

    .mobile-px-sm {
        padding-left: var(--lb-spacing-sm) !important;
        padding-right: var(--lb-spacing-sm) !important;
    }

    .mobile-gap-sm {
        gap: var(--lb-spacing-sm) !important;
    }

    .mobile-gap-md {
        gap: var(--lb-spacing-md) !important;
    }
}

/* ============================================================================
   PREVENT HORIZONTAL OVERFLOW
   ============================================================================ */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Ensure images don't overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure tables scroll horizontally on mobile */
@media (max-width: 768px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }
}

/* ============================================================================
   SKELETON LOADING (PREVENT LAYOUT SHIFT)
   ============================================================================ */

.skeleton-loading {
    background: linear-gradient(90deg,
        var(--lb-bg-elevated-2, #2a2a2a) 25%,
        var(--lb-bg-elevated-3, #3a3a3a) 50%,
        var(--lb-bg-elevated-2, #2a2a2a) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--lb-radius-sm, 4px);
}

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

/* Explicit aspect ratios to prevent layout shift */
.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

/* ============================================================================
   MOBILE FORM ENHANCEMENTS
   ============================================================================ */

@media (max-width: 768px) {
    /* Full-width form elements */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select,
    .form-control,
    .form-input {
        width: 100%;
        font-size: 16px; /* Prevent iOS zoom on focus */
    }

    /* Larger touch targets for checkboxes/radios */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: 0.5rem;
    }

    /* Form labels above inputs */
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-label {
        margin-bottom: 0;
    }
}

/* ============================================================================
   MOBILE BUTTON GROUPS
   ============================================================================ */

@media (max-width: 480px) {
    /* Stack button groups vertically on small screens */
    .btn-group-mobile-stack {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-group-mobile-stack .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   SAFE AREA INSETS (for notched devices)
   ============================================================================ */

@supports (padding: env(safe-area-inset-bottom)) {
    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .safe-area-top {
        padding-top: env(safe-area-inset-top);
    }

    /* Mobile nav drawer should respect safe areas */
    .mobile-nav-drawer {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}