/* 
    ==========================================================================
    MOBILE-APP-CORE.CSS
    100% Mobile-First / App-Like UI Foundation
    ========================================================================== 
*/

:root {
    --touch-target: 44px;
    --touch-target-large: 54px;
    --app-padding: 1.25rem;
    --app-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);

    /* Responsive Typography Scale (Mobile-First) */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --fs-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --fs-xl: clamp(1.5rem, 1.35rem + 0.75vw, 2.25rem);
    --fs-xxl: clamp(2rem, 1.75rem + 1vw, 3.5rem);
}

/* 1. Reset Global Overflow Behavior */
html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* 2. Global Mobile-First Layout Patterns */
.container,
.container-fluid {
    padding-left: var(--app-padding) !important;
    padding-right: var(--app-padding) !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Auto-Stacking Row System */
.row {
    margin-left: calc(var(--app-padding) * -1) !important;
    margin-right: calc(var(--app-padding) * -1) !important;
    display: flex;
    flex-wrap: wrap;
}

/* Force 100% width on columns by default (Stacked) */
.col,
[class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: var(--app-padding) !important;
    padding-right: var(--app-padding) !important;
    margin-bottom: 1.5rem;
}

/* Desktop Overrides for Grid (Mobile-First) */
@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .col-lg-4 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }

    .col-lg-5 {
        flex: 0 0 41.666% !important;
        max-width: 41.666% !important;
    }

    .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .col-lg-7 {
        flex: 0 0 58.333% !important;
        max-width: 58.333% !important;
    }

    .col-lg-8 {
        flex: 0 0 66.666% !important;
        max-width: 66.666% !important;
    }
}

/* 3. Touch Optimization */
button,
.btn,
.nav-link,
input,
select,
textarea,
a {
    min-height: var(--touch-target) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

input,
select,
textarea {
    font-size: 16px !important;
    /* Prevents iOS auto-zoom */
}

/* 4. Responsive Images & Media */
img,
video {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* 5. App-Style Cards */
.card,
.p-glass,
.tile {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: var(--app-shadow) !important;
}

/* 6. Table to Card Conversion Helpers */
.mobile-card-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

    .table-responsive {
        border: none !important;
    }

    table:not(.no-stack) {
        display: block;
        width: 100%;
    }

    table:not(.no-stack) thead {
        display: none;
    }

    table:not(.no-stack) tbody,
    table:not(.no-stack) tr,
    table:not(.no-stack) td {
        display: block;
        width: 100%;
    }

    table:not(.no-stack) tr {
        background: var(--obsidian-800);
        margin-bottom: 1rem;
        border-radius: 1rem;
        padding: 1rem;
        border: 1px solid var(--p-glass-border);
    }

    table:not(.no-stack) td {
        text-align: right;
        padding-left: 50% !important;
        position: relative;
        border: none !important;
        min-height: 2.5rem;
    }

    table:not(.no-stack) td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        text-align: left;
        font-weight: 700;
        color: var(--gold-vibrant);
    }
}

/* Obsidian-Gold Mobile Menu Styling */
.mobile-menu {
    background: var(--obsidian-900);
    z-index: 999999;
    width: 300px;
    right: -300px;
    height: 100vh;
    position: fixed;
    top: 0;
    transition: all 0.5s ease;
    border-left: 1px solid var(--primary-gold);
}

.mobile-menu-visible .mobile-menu {
    right: 0;
}

.mobile-menu .menu-box {
    background: var(--obsidian-900) !important;
    border-radius: 0;
    height: 100%;
}

.mobile-menu .menu-box .navigation li a {
    color: #fff !important;
    font-weight: 600;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.05);
}

.mobile-menu .close-btn {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    font-size: 2rem;
    color: var(--primary-gold);
    z-index: 10;
    cursor: pointer;
}

.mobile-menu .menu-backdrop {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.mobile-menu .navigation li.dropdown .dropdown-btn {
    color: var(--primary-gold) !important;
    border-color: rgba(255, 215, 0, 0.2) !important;
}