/* assets/css/app-mobile.css */

/* === CORE APP BEHAVIOR === */
:root {
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --sar: env(safe-area-inset-right);
}

html {
    /* Prevent rubber-banding on iOS while keeping scroll */
    overscroll-behavior-y: none;
    /* Prevent horizontal scroll globally */
    overflow-x: hidden;
    /* Native App feel */
    -webkit-tap-highlight-color: transparent;
    /* Disable text inflation algorithm */
    -webkit-text-size-adjust: 100%;
    /* Full height */
    height: 100%;
}

body {
    /* Use safe areas for padding */
    padding-top: var(--sat);
    padding-bottom: var(--sab);
    padding-left: var(--sal);
    padding-right: var(--sar);

    /* Smooth scrolling */
    -webkit-overflow-scrolling: touch;

    /* Prevent select on UI chrome but allow on content */
    user-select: none;
    -webkit-user-select: none;

    /* Full height */
    min-height: 100%;
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

/* Allow text selection in specific readable areas */
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
article,
.selectable {
    user-select: text;
    -webkit-user-select: text;
}

/* === TOUCH OPTIMIZATION === */

/* Buttons and interactive elements */
button,
a,
input,
select,
textarea,
.clickable {
    touch-action: manipulation;
    /* Improves tap delay */
}

/* Prevent zooming on inputs */
@media screen and (max-width: 768px) {

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

    /* Simulating Active States for Touch */
    button:active,
    a:active {
        opacity: 0.7;
        transform: scale(0.98);
        transition: transform 0.1s, opacity 0.1s;
    }
}

/* === SCROLLBARS === */

/* Hide scrollbars for a cleaner 'App' look on mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    * {
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }
}

/* === LAYOUT UTILITIES === */

/* Full screen containers */
.app-container {
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Fixed Bottom Nav spacer */
.nav-spacer {
    height: calc(60px + var(--sab));
    width: 100%;
}

/* Safe Area Padding Utilities */
.pt-safe {
    padding-top: var(--sat) !important;
}

.pb-safe {
    padding-bottom: var(--sab) !important;
}

.pl-safe {
    padding-left: var(--sal) !important;
}

.pr-safe {
    padding-right: var(--sar) !important;
}

/* Sticky Header Adjustment */
header.fixed {
    padding-top: var(--sat);
    /* Ensure status bar doesn't overlap content */
}

/* Prevent image dragging (Ghost property) */
img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
    /* Usually images in apps aren't interactive unless specified */
}

/* If image is inside a button/link, allow events */
a img,
button img {
    pointer-events: inherit;
}