/* ==========================================================================
   Comprehensive Responsive & Layout Reset CSS for All Screens (Mobile, Tablet, Desktop)
   ========================================================================== */

/* 1. Global Box-Sizing & Viewport Overflow Containment */
html, :root {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* 2. Media & Asset Responsiveness */
img, svg, video, canvas, audio, iframe, embed, object {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* 3. Text & Typography Fluid Scaling */
h1 {
    font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
    line-height: 1.15;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h2 {
    font-size: clamp(1.5rem, 3vw + 0.75rem, 2.5rem);
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h3 {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
    line-height: 1.25;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

p, span, li, a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 4. Table Responsiveness */
.table-responsive, [class*="overflow-x-auto"] {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

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

/* 5. Form Elements Responsiveness */
input, select, textarea, button {
    max-width: 100%;
    font-family: inherit;
    font-size: inherit;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
}

@media (min-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 0.875rem !important; /* Back to 14px on desktop where appropriate */
    }
}

/* 6. Layout Grid & Flex Wrap Guard */
.container,
.max-w-7xl,
.max-w-8xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl {
    width: 100%;
    box-sizing: border-box;
}

/* 7. Mobile Safe Areas (iPhone Notch / Bottom Home Bar) */
.safe-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.mobile-content-bottom {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

@media (min-width: 1024px) {
    .mobile-content-bottom {
        padding-bottom: 2rem !important;
    }
}

/* 8. Fixed Bottom Buttons On Mobile */
.mobile-fixed-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

.dark .mobile-fixed-buttons {
    background: rgba(15, 23, 42, 0.95);
    border-top-color: rgba(51, 65, 85, 0.8);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1024px) {
    .mobile-fixed-buttons {
        display: none !important;
    }
}

/* 9. Off-Canvas Sidebar Styles for Mobile Dashboard */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 45;
}

.offcanvas-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 82%;
    max-width: 320px;
    z-index: 50;
    background-color: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .offcanvas-sidebar {
    background-color: #0f172a;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.offcanvas-sidebar.is-open {
    transform: translateX(0);
}

/* 10. Floating Tab Bar on Mobile */
.floating-tab-bar {
    position: fixed;
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    left: 1rem;
    right: 1rem;
    z-index: 40;
    margin: 0 auto;
    max-width: 500px;
}

@media (min-width: 1024px) {
    .floating-tab-bar {
        display: none !important;
    }
}

/* 11. Modal Window Responsiveness */
.modal-container {
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 95%;
    max-width: 550px;
}

/* 12. Ensure all interactive elements are strictly clickable */
button, 
a, 
input, 
select, 
textarea, 
[role="button"], 
label,
.btn,
.mobile-fixed-buttons,
.mobile-fixed-buttons a {
    pointer-events: auto !important;
}

button, 
a, 
[role="button"], 
label,
.mobile-fixed-buttons a {
    cursor: pointer !important;
}

/* Ensure inner icons and text don't trap or prevent click event propagation to parent buttons/links */
button > *,
a > *,
.mobile-fixed-buttons a > * {
    pointer-events: none;
}

/* Ensure form controls inside labels remain clickable */
label input,
label select,
label textarea {
    pointer-events: auto !important;
}

/* Preloaders must NEVER block clicks under any circumstances */
.page-loading,
.page-loading.active,
.page-loading * {
    pointer-events: none !important;
}

/* Ensure purely decorative elements ignore pointer events */
.decorative-blur,
.pointer-events-none,
.backdrop-pattern {
    pointer-events: none !important;
}