/* ═══════════════════════════════════════════════════════
   Gym Management – Global Responsive Stylesheet
   Applied on all pages via <link> in config.php output
   ═══════════════════════════════════════════════════════ */

/* 1. Ensure box-sizing everywhere */
*, *::before, *::after { box-sizing: border-box; }

/* 2. Tables – horizontal scroll on all viewports */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 3. Force all bare <table> inside .overflow-x-auto to not collapse */
.overflow-x-auto table {
    min-width: 600px;
}

/* 4. Modals – full-screen on mobile, centered sheet on desktop */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: flex-end;       /* bottom sheet on mobile */
    justify-content: center;
    padding: 0;
}
@media (min-width: 640px) {
    .modal-overlay {
        align-items: center;
        padding: 1.5rem;
    }
}

.modal-box {
    background: #1d2027;
    border: 1px solid rgba(66,71,84,0.8);
    border-radius: 1.5rem 1.5rem 0 0;  /* top-rounded on mobile */
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 1rem;
}
@media (min-width: 640px) {
    .modal-box {
        border-radius: 1.5rem;
        max-width: 700px;
        padding: 2rem 1.5rem;
    }
}

/* 5. Grid helpers for responsive card grids */
.grid-stat { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .grid-stat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-stat { grid-template-columns: repeat(4, 1fr); } }

/* 6. Keep notification / profile dropdowns from overflowing viewport */
#notifyDropdown, #profileDropdown {
    max-width: calc(100vw - 1rem);
}

/* 7. Prevent horizontal overflow on entire page */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* 8. Touch-friendly tap targets */
@media (max-width: 1023px) {
    nav a {
        min-height: 44px;
    }
    button, [role="button"] {
        min-height: 36px;
    }
}

/* 9. Smooth sidebar transition */
#mainSidebar {
    will-change: transform;
}

/* 10. Forms – full width inputs on small screens */
@media (max-width: 639px) {
    .form-grid-2 {
        grid-template-columns: 1fr !important;
    }
}