/* =========================================================================
   AUTO COMPATIBLE CSS FOR ALL RESOLUTION SCREENS
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. GLOBAL RESET & FLUID FOUNDATION
   ------------------------------------------------------------------------- */
html,
body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* Flexible Media */
img,
picture,
video,
canvas,
svg,
iframe,
object,
embed {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Text Wrapping & Fluidity */
p,
h1,
h2,
h3,
h4,
h5,
h6,
div,
span,
a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Flexible Form Controls */
input,
select,
textarea,
button {
    max-width: 100%;
    font-family: inherit;
}

/* Flex Container Safety (Prevents blowing out) */
.min-w-0 {
    min-width: 0 !important;
}

/* -------------------------------------------------------------------------
   2. AUTO FLUID TYPOGRAPHY & SCALING (Using Clamp)
   ------------------------------------------------------------------------- */
/* Automatically scales font sizes based on screen width */
:root {
    --text-xs: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem);
    --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-base: clamp(0.875rem, 0.8rem + 0.38vw, 1rem);
    --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-xl: clamp(1.125rem, 1rem + 0.63vw, 1.25rem);
    --text-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-3xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
}

/* -------------------------------------------------------------------------
   3. AUTO RESPONSIVE GRID & FLEX UTILITIES
   ------------------------------------------------------------------------- */
/* Auto-fitting Grid: Adjusts column count based on available space */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

/* Responsive Container */
.auto-container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 5vw, 2rem);
    padding-right: clamp(1rem, 5vw, 2rem);
}

/* -------------------------------------------------------------------------
   4. STANDARD SCREEN RESOLUTION BREAKPOINTS (Media Queries)
   ------------------------------------------------------------------------- */

/* Mobile Devices (Portrait & Landscape) - Up to 575px */
@media (max-width: 575.98px) {
    .hide-on-mobile {
        display: none !important;
    }

    .w-100-mobile {
        width: 100% !important;
    }
}

/* Small Tablets and Large Smartphones - 576px to 767px */
@media (min-width: 576px) and (max-width: 767.98px) {

    /* Styles for landscape phones & small tablets */
    .auto-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .w-sm-100 {
        width: 100% !important;
    }

    /* Force tables to be scrollable if not already */
    table:not(.mobile-card-table) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Tablets (Portrait & Landscape) - 768px to 991px */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Styles for typical tablets like iPad */
    .auto-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .w-md-100 {
        width: 100% !important;
    }

    .w-md-auto {
        width: auto !important;
    }

    /* Ensure flex layouts don't break */
    .flex-md-wrap {
        flex-wrap: wrap !important;
    }
}

/* Laptops and Small Desktops - 992px to 1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Styles for laptops */
    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-100 {
        width: 100% !important;
    }

    /* Improve flex layouts on medium screens */
    .flex-lg-row {
        flex-direction: row !important;
    }
}

/* Large Desktops and High-Res Screens - 1200px to 1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    /* Styles for standard desktops */
    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-75 {
        width: 75% !important;
    }
}

/* -------------------------------------------------------------------------
   5. SPECIAL RESOLUTION FIXES
   ------------------------------------------------------------------------- */
/* Fix for High DPI (Retina) Displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* High-res specific adjustments */
    img {
        /* Optimize image rendering on retina displays */
        image-rendering: -webkit-optimize-contrast;
    }

    /* Ensure fine borders are crisp */
    .border-crisp {
        border-width: 0.5px !important;
    }
}

/* Fix for Orientation (Mobile Landscape) */
@media (orientation: landscape) and (max-height: 500px) {

    /* Prevent elements from being cut off vertically */
    .modal-dialog {
        margin: 0.5rem auto;
    }

    .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    /* Unstick header to save vertical space */
    .top-header,
    .sticky-top {
        position: relative !important;
        top: 0 !important;
        z-index: 1;
    }

    body {
        height: auto;
        min-height: 100vh;
    }
}