/**
 * Device-Adaptive Styles for DGP Web Views
 * 
 * PHILOSOPHY: Enhance Materio's responsive design, don't fight it.
 * 
 * Uses CSS classes added by JavaScript on page load:
 *   - .touch-device / .pointer-device (input type detection)
 *   - .portrait / .landscape (orientation)
 *   - .device-mobile / .device-tablet / .device-desktop (server User-Agent)
 * 
 * Touch targets: Minimum 44px (Apple HIG recommendation)
 * 
 * NOTE: Materio handles responsive layout (breakpoints, menu toggle, etc.)
 * These styles only ADD touch/device-specific enhancements.
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================================================= */

:root {
    /* Touch-friendly sizes */
    --touch-target-min: 44px;
    --touch-padding: 0.75rem;
    
    /* Spacing adjustments */
    --card-gap-mobile: 0.75rem;
    --card-gap-desktop: 1.5rem;
}


/* =============================================================================
   PREVENT HORIZONTAL PAGE SCROLL
   Main fix is portrait-scoped: narrow viewport (~375px) causes elements to overflow
   right; landscape (~812px) fits all content so no restriction is normally needed.
   Scoped to portrait because applying overflow-x: hidden globally interacts with
   iOS Safari's visual-viewport panning and caused a landscape regression.

   Safari/PWA additions:
   - overscroll-behavior-x: none (global): prevents iOS rubber-band elastic overscroll
     horizontally on Safari and in PWA standalone. Does NOT block internal scroll
     containers (dashboard cards, scorecards) — overscroll-behavior only affects
     what happens when you reach the *end* of a scroll container.
     Supported: iOS Safari 16+ (Sept 2022). No-op on unsupported browsers.
   - display-mode: standalone: in PWA mode there is no dynamic address bar so the
     viewport is stable — apply overflow-x: hidden in both orientations.

   Child elements with overflow-x: auto still scroll internally in all cases.
   ============================================================================= */
html, body {
    overscroll-behavior-x: none;
}

@media (orientation: portrait) {
    html, body {
        overflow-x: hidden;
    }
}

@media (display-mode: standalone) {
    html, body {
        overflow-x: hidden;
    }
}


/* =============================================================================
   TOUCH DEVICE OPTIMIZATIONS
   These apply based on actual touch capability, not screen size.
   ============================================================================= */

/* Larger touch targets for buttons */
.touch-device .btn {
    min-height: var(--touch-target-min);
    padding-top: var(--touch-padding);
    padding-bottom: var(--touch-padding);
}

/* Larger dropdown items for touch */
.touch-device .dropdown-item {
    padding: var(--touch-padding) 1rem;
    min-height: var(--touch-target-min);
}

/* Larger form controls for touch */
.touch-device .form-control,
.touch-device .form-select {
    min-height: var(--touch-target-min);
    padding: var(--touch-padding);
}

/* Badge/Tag touch targets — only for interactive (clickable) badges */
.touch-device a.badge,
.touch-device button.badge {
    padding: 0.5em 0.75em;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}


/* =============================================================================
   POINTER DEVICE ENHANCEMENTS (Desktop with mouse)
   ============================================================================= */

/* Hover reveal pattern - hidden by default, shown on hover */
.pointer-device .hover-reveal {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pointer-device .card:hover .hover-reveal,
.pointer-device tr:hover .hover-reveal {
    opacity: 1;
}

/* Touch devices: hover-reveal always visible */
.touch-device .hover-reveal {
    opacity: 1;
}


/* =============================================================================
   RESPONSIVE BUTTON GROUP
   Stacks vertically in portrait, horizontal in landscape.
   Use class="btn-group-responsive" on a container div.
   ============================================================================= */

.btn-group-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portrait .btn-group-responsive {
    flex-direction: column;
}

.portrait .btn-group-responsive .btn {
    width: 100%;
}

.landscape .btn-group-responsive {
    flex-direction: row;
}


/* =============================================================================
   CARD FLATTENING FOR SMALL SCREENS
   Use: Add class "card-flatten-sm" to remove card chrome on mobile (< 576px)
        Add class "card-flatten-md" to remove card chrome on tablet & below (< 768px)
   ============================================================================= */

/* Flatten cards on small screens (phones) */
@media (max-width: 575.98px) {
    .card-flatten-sm,
    .card-flatten-sm > .card-body {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    .card-flatten-sm > .card-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Optional: Reduce vertical padding too */
    .card-flatten-sm.card-flatten-compact > .card-body {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* Flatten cards on medium screens and below (tablets + phones) */
@media (max-width: 767.98px) {
    .card-flatten-md,
    .card-flatten-md > .card-body {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    .card-flatten-md > .card-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .card-flatten-md.card-flatten-compact > .card-body {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}


/* =============================================================================
   TABS FLATTENING FOR SMALL SCREENS
   Use: Add class "tabs-flatten-sm" to nav-align-top to remove chrome on mobile
        Add class "tabs-flatten-md" for tablets and below
   ============================================================================= */

/* Flatten tabs on small screens (phones) */
@media (max-width: 575.98px) {
    .tabs-flatten-sm {
        border-radius: 0 !important;
    }
    
    .tabs-flatten-sm > .tab-content {
        background: transparent !important;
        border-radius: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .tabs-flatten-sm .nav-tabs {
        background: transparent !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        /* Keep bottom border for visual separation */
    }
}

/* Flatten tabs on medium screens and below (tablets + phones) */
@media (max-width: 767.98px) {
    .tabs-flatten-md {
        border-radius: 0 !important;
    }
    
    .tabs-flatten-md > .tab-content {
        background: transparent !important;
        border-radius: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .tabs-flatten-md .nav-tabs {
        background: transparent !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
}


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

/* Hide on touch devices (e.g., hover hints) */
.touch-device .hide-touch {
    display: none !important;
}

/* Hide on pointer devices (e.g., touch instructions) */
.pointer-device .hide-pointer {
    display: none !important;
}

/* Hide on mobile only */
.device-mobile .hide-mobile {
    display: none !important;
}

/* Show only on mobile */
.show-mobile-only {
    display: none !important;
}
.device-mobile .show-mobile-only {
    display: inline-block !important;
}

/* Show only on touch */
.show-touch-only {
    display: none !important;
}
.touch-device .show-touch-only {
    display: inline-block !important;
}


/* =============================================================================
   MOBILE CONTAINER PADDING REDUCTION
   Reduces Bootstrap's container gutter on small screens for better space usage.
   ============================================================================= */

@media (max-width: 575.98px) {
    /* Reduce container horizontal padding on small mobile screens */
    /* Direct padding override needed - CSS variable alone doesn't reliably cascade */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}