/* ==========================================================================
   SmartPark Global Responsive Architecture (Universal Mobile & Tablet Engine)
   Provides universal mobile & desktop responsiveness across all modules & pages.
   ========================================================================== */

/* ── Global Viewport & Box Sizing Reset ── */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden !important;
}

/* ── Hamburger Button Styling (Universal) ── */
.sp-hamburger-btn,
.hamburger-btn {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1100;
    width: 44px;
    height: 44px;
    background: var(--sp-primary-blue, #005A9C);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 14px rgba(0, 90, 156, 0.35);
    transition: background 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.sp-hamburger-btn span,
.hamburger-btn span,
.hamburger-line {
    display: block;
    width: 22px;
    height: 2.5px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.sp-hamburger-btn.is-open span:nth-child(1),
.hamburger-btn.is-open span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.sp-hamburger-btn.is-open span:nth-child(2),
.hamburger-btn.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.sp-hamburger-btn.is-open span:nth-child(3),
.hamburger-btn.is-open span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* ── Universal Backdrop Overlay ── */
.sp-sidebar-backdrop,
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
}

.sp-sidebar-backdrop.is-visible,
.sp-sidebar-backdrop.show,
.sidebar-backdrop.is-visible,
.sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

/* ── Universal Table Responsive Wrapper ── */
.table-responsive,
.sp-activity-table-wrap,
.parking-logs-table-wrap,
.table-container,
.sp-table-scroll-container,
.ac-table-scroll {
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* ─────────────────────────────────────────────────────────────
   BREAKPOINT: Tablet (769px - 1024px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
    :root {
        --sp-sidebar-width: 72px !important;
        --sidebar-width-desktop: 72px !important;
    }

    .sp-sidebar,
    .sidebar {
        width: 72px !important;
        padding: 20px 8px !important;
        overflow: visible;
    }

    .sp-sidebar-header,
    .logo-container,
    .sidebar-header {
        justify-content: center;
        padding: 0;
    }

    .sp-brand-text,
    .logo-title,
    .logo-subtitle,
    .sp-profile-info,
    .profile-info,
    .sp-nav-section h5,
    .nav-section h5,
    .sp-nav-section a span,
    .nav-links a span,
    .sp-logout-btn span {
        display: none !important;
    }

    .sp-profile-card {
        justify-content: center;
        padding: 10px;
    }

    .sp-main-content,
    .main-content {
        margin-left: 72px !important;
        width: calc(100% - 72px) !important;
        padding: 24px 20px !important;
    }

    .sp-header,
    .header {
        padding: 16px 20px !important;
    }

    .sp-stat-grid,
    .sp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   BREAKPOINT: Mobile Devices (<= 768px)
   Universal Mobile Rules for ALL Pages & Modules
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html, body {
        height: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Display Hamburger Button */
    .sp-hamburger-btn,
    .hamburger-btn {
        display: flex !important;
    }

    /* Off-screen Sidebar */
    .sp-sidebar,
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: -290px !important;
        width: 270px !important;
        z-index: 1060 !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
        overflow-y: auto !important;
    }

    .sp-sidebar.is-open,
    .sp-sidebar.show,
    .sp-sidebar.open,
    .sidebar.is-open,
    .sidebar.show,
    .sidebar.open {
        left: 0 !important;
        margin-left: 0 !important;
    }

    /* Explicitly make sidebar text & branding visible on mobile when open */
    .sp-brand-text,
    .sp-profile-info,
    .sp-nav-section h5,
    .sp-nav-section a span,
    .sp-nav-bottom a span,
    .sp-logout-btn span,
    .logo-title,
    .logo-subtitle,
    .profile-info,
    .nav-links a span {
        display: inline !important;
    }
    .sp-brand-text,
    .sp-profile-info,
    .sp-nav-section h5 {
        display: block !important;
    }

    /* Full Width Main Content across all layout wrappers */
    .sp-main-content,
    .main-content,
    .parking-logs-wrapper,
    .profile-container,
    .admin-container,
    .sp-dashboard-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 70px 14px 24px !important;
        display: block !important;
        height: auto !important;
        min-height: 100vh !important;
        box-sizing: border-box !important;
    }

    /* Universal Header Adjustments */
    .sp-header,
    .header,
    .parking-logs-header,
    .profile-header,
    .ac-topbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .parking-logs-title {
        font-size: 1.2rem !important;
        flex-wrap: wrap;
    }

    .parking-logs-left {
        gap: 10px !important;
        flex-wrap: wrap;
    }

    .sp-header-right,
    .header-right,
    .ac-topbar-right {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .sp-header-left h1,
    .header-left h1 {
        font-size: 1.15rem !important;
    }

    /* Hide clock widgets on mobile header to save vertical space */
    .sp-header-widget,
    .ac-clock,
    #heroDate,
    #heroTime {
        display: none !important;
    }

    /* Grid Layouts: Single Column on Mobile for 100% readability */
    .sp-stat-grid,
    .sp-grid,
    .stat-cards,
    .cards-grid,
    div.sp-stat-grid,
    div[style*="grid-template-columns: repeat(4"],
    div[style*="grid-template-columns: repeat(3"],
    div[style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Account Management Module Specifics (admin_accounts.php & student_accounts.php) */
    .ac-body {
        padding: 16px 12px 32px !important;
        min-height: auto !important;
    }

    .ac-aligned-layout {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .ac-right-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .ac-table-panel {
        width: 100% !important;
        overflow: hidden !important;
    }

    .ac-table-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px 14px !important;
    }

    .ac-table-header > div:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .ac-search-wrap {
        width: 100% !important;
    }

    .ac-search-wrap input {
        width: 100% !important;
    }

    .ac-filter-btn {
        width: 100% !important;
        justify-content: center;
    }

    .ac-tbl {
        min-width: 540px;
    }

    .ac-pagination {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: center;
    }

    /* Filter forms & Toolbars */
    .filter-section,
    .filter-form,
    .filter-fields,
    .search-filter-bar {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .filter-field,
    .filter-buttons,
    .filter-buttons button,
    .filter-buttons a {
        width: 100% !important;
    }

    .filter-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Dashboard Activity Table Header Controls */
    .sp-table-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .sp-activity-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .activity-filter-pills {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    .act-filter-btn {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .sp-activity-search-wrap {
        width: 100% !important;
    }

    .sp-activity-search-wrap input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sp-table-scroll-container table {
        min-width: 560px !important;
    }

    /* Card Padding Normalization */
    .sp-card,
    .card,
    .stat-card,
    .ac-stat-card,
    .ac-create-panel {
        padding: 16px 14px !important;
    }

    /* Notification Dropdown Positioning */
    .notification-dropdown {
        position: fixed !important;
        top: 60px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 2000 !important;
    }

    /* Modals & Dialogs */
    .modal-dialog,
    .modal-content,
    .sp-modal {
        width: 95% !important;
        margin: 10px auto !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   BREAKPOINT: Extra Small Devices (<= 480px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .sp-card,
    .card,
    .stat-card,
    .ac-stat-card {
        padding: 14px 12px !important;
    }

    .sp-header-left h1,
    .header-left h1 {
        font-size: 1.05rem !important;
    }

    .btn,
    button,
    .btn-apply,
    .btn-reset,
    .btn-export,
    .ac-create-btn {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }
}