/* ============================================================================
   BBTC GLOBAL RESPONSIVE HARDENING CSS
   ============================================================================
   PURPOSE:
   - Enforce consistent layout behavior across:
     Desktop, Mobile, Tablet, iOS Safari, Android Chrome, Edge, Linux browsers
   - Prevent overflow bugs, image scaling issues, table breakage
   - Complement Tailwind, NOT override it destructively
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. CSS RESET / NORMALIZATION
--------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


/* ---------------------------------------------------------------------------
   2. IMAGE SAFETY (CRITICAL FOR MOBILE)
--------------------------------------------------------------------------- */
img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ---------------------------------------------------------------------------
   3. CONTAINER SAFETY
--------------------------------------------------------------------------- */
.container,
.max-w-full,
.max-w-screen-xl,
.max-w-screen-lg,
.max-w-screen-md {
    overflow-x: hidden;
}


/* ---------------------------------------------------------------------------
   4. TABLE RESPONSIVENESS (DASHBOARD / ADMIN / TASKS)
--------------------------------------------------------------------------- */
.table-wrap,
.overflow-x-auto {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
}


/* ---------------------------------------------------------------------------
   5. FIX FIXED HEADERS + MOBILE SAFARI JUMP
--------------------------------------------------------------------------- */
.header-spacer {
    height: 95px;
}

@media (max-width: 768px) {
    .header-spacer {
        height: 80px;
    }
}


/* ---------------------------------------------------------------------------
   6. DROPDOWNS / MENUS (PREVENT VIEWPORT OVERFLOW)
--------------------------------------------------------------------------- */
nav ul ul {
    max-width: 90vw;
}


/* ---------------------------------------------------------------------------
   7. TOUCH TARGETS (MOBILE UX)
--------------------------------------------------------------------------- */
a,
button,
input,
select,
textarea {
    touch-action: manipulation;
}


/* ---------------------------------------------------------------------------
   8. SAFER VIEWPORT HEIGHTS (iOS SAFARI 16–17)
--------------------------------------------------------------------------- */
.min-h-screen {
    min-height: 100vh;
}

@supports (-webkit-touch-callout: none) {
    .min-h-screen {
        min-height: -webkit-fill-available;
    }
}


/* ---------------------------------------------------------------------------
   9. REDUCE MOTION (ACCESSIBILITY + PERFORMANCE SAFE)
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    body {
        animation: none !important;
        transition: none !important;
    }

    .animate-spin,
    .animate-ping,
    .animate-pulse,
    .animate-bounce {
        animation: none !important;
    }
}


/* ---------------------------------------------------------------------------
   10. SAFETY NET FOR LONG TEXT (EMAILS, FILE NAMES, TASK NOTES)
--------------------------------------------------------------------------- */
.break-anywhere {
    word-break: break-word;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------------------------
   11. SAFE AREA SUPPORT (iOS NOTCH DEVICES)
--------------------------------------------------------------------------- */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}