/**
 * ============================================
 * DND Frontend Responsive CSS
 * ============================================
 * 
 * This file contains ALL responsive styles for frontend pages.
 * Organized by page/component name with clear section markers.
 * 
 * Breakpoints:
 * - Extra Small (Mobile): max-width: 576px
 * - Small (Mobile Landscape): max-width: 768px
 * - Medium (Tablet): max-width: 991.98px
 * - Large (Desktop): min-width: 992px
 * 
 * Last Updated: 2026-02-07
 */

/* ============================================
   GLOBAL / SHARED RESPONSIVE STYLES
   ============================================ */

/* Common responsive utilities */
@media (max-width: 768px) {
    .container,
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
    }
    
    /* Image responsiveness - exclude app store badges so their height is controlled */
    img:not(.app-badge-img) {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ============================================
   FRONT HEADER / NAVBAR
   Page: element/front-header.blade.php
   ============================================ */

@media (max-width: 991.98px) {
    /* Fix responsive menu z-index issue */
    .container-fluid.position-relative {
        z-index: 1050 !important;
    }
    
    .navbar {
        position: relative !important;
        z-index: 1050 !important;
        padding: 0.5rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .navbar-brand {
        padding: 0.5rem 0 !important;
        flex: 0 0 auto !important;
        margin-right: 1rem !important;
    }
    
    .navbar-brand img {
        max-height: 50px !important;
    }
    
    /* Navbar toggler positioning */
    .navbar-toggler {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        order: 3 !important;
    }
    
    /* Hide welcome message inside navbar-collapse on mobile (should only show on desktop) */
    /* Must be very specific to override any other rules */
    .navbar-collapse .alert-success1.d-lg-flex,
    .navbar-collapse.show .alert-success1.d-lg-flex,
    .navbar-collapse.collapsing .alert-success1.d-lg-flex {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* Hide the scrolling welcome message div on mobile as well */
    .navbar-collapse .d-flex.align-items-center[role="alert"]:not(.notification-wrapper) {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Welcome message in navbar bar - centered between logo and menu icon (MOBILE ONLY) */
    /* Target only the mobile version outside navbar-collapse */
    .navbar > .alert-success1.d-lg-none {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        max-width: calc(100% - 180px) !important;
        margin: 0 !important;
        padding: 0.4rem 0.6rem !important;
        z-index: 10001 !important;
        display: flex !important;
        align-items: center !important;
        font-size: 0.75rem !important;
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
        border: 1px solid #c3e6cb !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        height: auto !important;
        min-height: auto !important;
        flex-wrap: nowrap !important;
    }
    
    .navbar > .alert-success1.d-lg-none i {
        font-size: 0.9rem !important;
        margin-right: 0.4rem !important;
        flex-shrink: 0 !important;
        margin-top: 0 !important;
    }
    
    .navbar > .alert-success1.d-lg-none .flex-grow-1 {
        padding: 0 0.3rem !important;
        min-width: 0 !important;
    }
    
    .navbar > .alert-success1.d-lg-none .flex-grow-1 strong {
        font-size: 0.75rem !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
    }
    
    .navbar > .alert-success1.d-lg-none .flex-grow-1 small {
        display: none !important; /* Hide small text on mobile navbar */
    }
    
    .navbar > .alert-success1.d-lg-none .btn-close {
        padding: 0.2rem !important;
        font-size: 0.65rem !important;
        margin-left: 0.2rem !important;
        margin-top: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Welcome message in collapsed menu (DESKTOP VIEW) - ensure it shows */
    @media (min-width: 992px) {
        .navbar-collapse .alert-success1.d-lg-flex {
            display: flex !important;
            position: static !important;
            width: auto !important;
            max-width: 400px !important;
            margin-bottom: 1rem !important;
            padding: 0.75rem !important;
            transform: none !important;
            height: auto !important;
            min-height: 54px !important;
        }
        
        .navbar-collapse .alert-success1.d-lg-flex .flex-grow-1 strong,
        .navbar-collapse .alert-success1.d-lg-flex .flex-grow-1 small {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            word-wrap: break-word !important;
        }
    }
    
    /* Navbar collapse - main container */
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #fff !important;
        z-index: 9999 !important;
        margin-top: 0 !important;
        padding: 1rem !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
        display: none !important;
    }
    
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        display: block !important;
    }
    
    /* Reset all flex containers inside navbar-collapse */
    .navbar-collapse > .d-flex.align-items-center[role="alert"],
    .navbar-collapse > .navbar-nav {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
        clear: both !important;
        display: block !important;
    }
    
    /* Welcome message with d-lg-flex should be hidden on mobile - override any other rules */
    .navbar-collapse > .alert-success1.d-lg-flex {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        width: 0 !important;
        max-width: 0 !important;
    }
    
    .navbar-collapse .alert-success1[style*="max-width"] {
        max-width: 100% !important;
    }
    
    .navbar-collapse .alert-success1 i {
        flex-shrink: 0 !important;
        margin-right: 0.75rem !important;
        margin-top: 2px !important;
        align-self: flex-start !important;
        font-size: 1.2rem !important;
        display: inline-block !important;
    }
    
    .navbar-collapse .alert-success1 .flex-grow-1 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 0 0.5rem !important;
    }
    
    .navbar-collapse .alert-success1 .flex-grow-1 strong,
    .navbar-collapse .alert-success1 .flex-grow-1 small {
        display: block !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
        width: 100% !important;
    }
    
    .navbar-collapse .alert-success1 .btn-close {
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        margin-left: 0.5rem !important;
        margin-top: 0 !important;
        padding: 0.5rem !important;
    }
    
    /* Fix scrolling message alert */
    .navbar-collapse .d-flex.align-items-center[role="alert"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
        padding: 0.75rem !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        flex-direction: row !important;
        overflow: hidden !important;
    }
    
    .navbar-collapse .d-flex.align-items-center[role="alert"] i {
        flex-shrink: 0 !important;
        margin-right: 0.75rem !important;
        margin-top: 2px !important;
        align-self: flex-start !important;
        font-size: 1.2rem !important;
        display: inline-block !important;
    }
    
    .navbar-collapse .d-flex.align-items-center[role="alert"] .flex-grow-1 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 0 0.5rem !important;
    }
    
    .navbar-collapse .d-flex.align-items-center[role="alert"] .btn-close {
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        margin-left: 0.5rem !important;
        margin-top: 0 !important;
        padding: 0.5rem !important;
    }
    
    /* Ensure navbar items are visible */
    .navbar-collapse .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }
    
    .navbar-collapse .navbar-nav .nav-item {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .navbar-collapse .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        width: 100% !important;
        text-align: left !important;
        display: block !important;
    }
    
    /* Create a flex container wrapper for notification and user dropdown row */
    .navbar-collapse {
        font-size: 0 !important; /* Remove whitespace between inline elements */
    }
    
    .navbar-collapse > * {
        font-size: 1rem !important; /* Restore font size for content */
    }
    
    /* Welcome message should have smaller font in navbar bar */
    .navbar-collapse .alert-success1 {
        font-size: 0.75rem !important;
    }
    
    /* Create a single row for notification bell and user dropdown */
    .navbar-collapse .notification-wrapper {
        display: inline-block !important;
        width: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        margin-left: 0 !important;
        margin-right: 0.5rem !important;
        margin-bottom: 1rem !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
    }
    
    .navbar-collapse .notification-wrapper .dropdown {
        width: 100% !important;
    }
    
    .navbar-collapse .notification-wrapper .notification-bell {
        width: 32% !important;
        justify-content: center !important;
        min-width: 44px !important;
    }
    
    /* Notification dropdown responsive */
    .navbar-collapse .notification-dropdown {
        width: 100% !important;
        margin-left: 0 !important;
        max-width: 100% !important;
        position: static !important;
    }
    
    /* User dropdown wrapper - make it appear next to notification in same row */
    .navbar-collapse .d-flex.align-items-center:not([role="alert"]):not(.notification-wrapper) {
        display: inline-block !important;
        width: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
    }
    
    .navbar-collapse .d-flex.align-items-center:not([role="alert"]):not(.notification-wrapper) .dropdown {
        width: 100% !important;
    }
    
    /* User dropdown responsive */
    .navbar-collapse .dropdown-toggle {
        width: 100% !important;
        justify-content: space-between !important;
        min-width: 44px !important;
    }
    
    /* Increase width of dropdown toggle buttons in responsive menu */
    .navbar-collapse .btn.btn-outline-primary.btn-sm.dropdown-toggle.d-flex.align-items-center {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* Clear float after the row if needed */
    .navbar-collapse .navbar-nav {
        clear: both !important;
    }
    
    /* Ensure dropdowns in collapsed menu are visible */
    .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        box-shadow: none !important;
        border: 1px solid #e9ecef !important;
        transform: none !important;
    }
    
    /* Remove ms-auto from navbar-nav in collapsed state */
    .navbar-collapse .navbar-nav.ms-auto {
        margin-left: 0 !important;
    }
}

/* ============================================
   BUTTON RESPONSIVE - Dropdown Toggle Width
   ============================================ */

/* Increase width of dropdown toggle buttons (Desktop) */
.btn.btn-outline-primary.btn-sm.dropdown-toggle.d-flex.align-items-center {
    min-width: 180px !important;
    width: auto !important;
}

/* Desktop view - ensure proper width */
@media (min-width: 992px) {
    .btn.btn-outline-primary.btn-sm.dropdown-toggle.d-flex.align-items-center {
        min-width: 200px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 576px) {
    .navbar {
        height: auto !important;
        min-height: 60px !important;
        padding: 0.5rem !important;
    }
    
    .navbar-toggler {
        padding: 0.25rem 0.5rem !important;
        font-size: 1rem !important;
    }
    
    .navbar-collapse {
        padding: 0.75rem !important;
    }
    
    /* Smaller padding for alerts on very small screens */
    .navbar-collapse .alert-success1,
    .navbar-collapse .d-flex.align-items-center[role="alert"] {
        padding: 0.5rem !important;
        font-size: 0.9rem !important;
    }
    
    .navbar-collapse .alert-success1 i,
    .navbar-collapse .d-flex.align-items-center[role="alert"] i {
        font-size: 1rem !important;
        margin-right: 0.5rem !important;
    }
    
    .navbar-collapse .navbar-nav .nav-link {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    .navbar-collapse .dropdown-toggle {
        font-size: 0.9rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Increase width of dropdown toggle buttons on very small screens */
    .navbar-collapse .btn.btn-outline-primary.btn-sm.dropdown-toggle.d-flex.align-items-center {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    .navbar-collapse .notification-bell {
        font-size: 0.9rem !important;
        padding: 0.5rem !important;
    }
    
    /* Ensure notification and user dropdown stay in single row on mobile */
    .navbar-collapse .notification-wrapper {
        width: calc(50% - 0.25rem) !important;
        max-width: calc(50% - 0.25rem) !important;
        margin-right: 0.5rem !important;
    }
    
    .navbar-collapse .d-flex.align-items-center:not([role="alert"]):not(.notification-wrapper) {
        width: calc(50% - 0.25rem) !important;
        max-width: calc(50% - 0.25rem) !important;
        margin-left: 0 !important;
    }
}

/* ============================================
   BREADCRUMB HEADER SECTION
   Common to all pages
   ============================================ */

@media (max-width: 768px) {
    .bg-breadcrumb {
        padding: 2rem 0 !important;
    }
    
    .bg-breadcrumb .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .bg-breadcrumb h1 {
        font-size: 2rem !important;
    }
    
    .bg-breadcrumb .display-4 {
        font-size: 2rem !important;
    }
    
    .bg-breadcrumb i {
        font-size: 2rem !important;
    }
    
    .bg-breadcrumb .breadcrumb {
        font-size: 0.875rem !important;
        flex-wrap: wrap !important;
    }
    
    .bg-breadcrumb .breadcrumb-item {
        margin-bottom: 0.25rem !important;
    }
}

@media (max-width: 576px) {
    .bg-breadcrumb {
        padding: 1.5rem 0 !important;
    }
    
    .bg-breadcrumb h1 {
        font-size: 1.5rem !important;
    }
    
    .bg-breadcrumb .display-4 {
        font-size: 1.5rem !important;
    }
    
    .bg-breadcrumb i {
        font-size: 1.5rem !important;
    }
    
    .bg-breadcrumb .d-flex.align-items-center {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
}

/* ============================================
   HOME PAGE
   Page: frontend/user/home.blade.php
   ============================================ */

@media (min-width: 992px) {
    .header-carousel {
        margin-top: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Hero Section - keep content visible and centered */
    .hero-section {
        min-height: auto !important;
        padding: 1.5rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0.5rem !important;
    }
    .hero-title {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }
    .hero-subtitle {
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
    }
    .hero-content .btn {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
        margin: 0.25rem !important;
    }
    
    /* Hero app download badges - no button/link conflict, fixed size */
    .hero-app-badges {
        gap: 0.75rem !important;
        padding: 0.5rem 0 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        display: flex !important;
    }
    .hero-app-badges .app-badge-link {
        flex-shrink: 0 !important;
        display: block !important;
        line-height: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
    }
    .hero-app-badges .app-badge-img {
        height: 38px !important;
        max-height: 38px !important;
        width: auto !important;
        max-width: none !important;
        display: block !important;
        object-fit: contain !important;
    }
    
    /* Header carousel - single height, no gray bar, banner image fits */
    .header-carousel {
        overflow: hidden !important;
        background: transparent !important;
    }
    .header-carousel .owl-stage-outer,
    .header-carousel .owl-stage,
    .header-carousel .owl-item {
        background: transparent !important;
    }
    .header-carousel .owl-item {
        height: 60vh !important;
    }
    .header-carousel .header-carousel-item {
        height: 60vh !important;
        min-height: 60vh !important;
        overflow: hidden !important;
    }
    .header-carousel .header-carousel-item img,
    .header-carousel .header-carousel-item .hero-banner-img {
        height: 60vh !important;
        /* min-height: 60vh !important; */
        /* max-height: 60vh !important; */
        object-fit: cover !important;
        object-position: center !important;
    }
    .header-carousel .header-carousel-item .carousel-caption {
        padding: 2rem 1rem !important;
    }
    
    /* Section Titles */
    .section-title-small {
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
    }
    
    .section-title-large {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Section Spacing */
    .section-spacing {
        padding: 50px 0 !important;
    }
    
    .content-section {
        padding: 40px 0 !important;
    }
    
    /* Container Padding */
    .content-section .container,
    .section-spacing .container,
    .counter-section .container,
    .events-section .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Image Wrapper - About Us, D&D Community, Our Founder - fit in box on responsive */
    .content-section .image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: 280px !important;
        margin: 0 auto 2rem !important;
    }
    .content-section .image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    .image-wrapper {
        margin-bottom: 2rem !important;
    }
    
    /* Text Content */
    .text-content {
        padding: 0 !important;
    }
    
    .text-content p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Counter Section */
    .counter-section {
        padding: 40px 0 !important;
    }
    
    .counter-item {
        padding: 15px !important;
        margin-bottom: 1rem !important;
    }
    
    .counter-item h3 {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }
    
    .counter-value {
        font-size: 2rem !important;
    }
    
    /* Event Cards */
    .event-image-wrapper {
        height: 200px !important;
    }
    
    .event-card-title {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }
    
    .event-card-description {
        font-size: 0.9rem !important;
        margin-bottom: 10px !important;
    }
    
    .event-card-body {
        padding: 15px !important;
    }
    
    .event-info-overlay {
        flex-direction: column !important;
        gap: 5px !important;
        align-items: flex-start !important;
        padding: 10px !important;
        font-size: 0.75rem !important;
    }
    
    .event-date-badge {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }
    
    /* Carousel - keep in sync with hero carousel rules above */
    
    /* Upcoming Events Section */
    .events-section .row {
        margin: 0 -10px !important;
    }
    
    .events-section .col-md-6,
    .events-section .col-lg-4 {
        padding: 0 10px !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 576px) {
    .hero-section {
        min-height: auto !important;
        padding: 1rem 0.75rem !important;
    }
    .hero-content {
        padding: 0 0.25rem !important;
    }
    .hero-title {
        font-size: 1.75rem !important;
    }
    .hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Hero app badges - stack vertically, no conflict */
    .hero-app-badges {
        flex-direction: column !important;
        gap: 0.5rem !important;
        padding: 0.25rem 0 !important;
        display: flex !important;
    }
    .hero-app-badges .app-badge-link {
        max-width: 160px !important;
        display: block !important;
        line-height: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
    }
    .hero-app-badges .app-badge-img {
        height: 34px !important;
        max-height: 34px !important;
        width: auto !important;
        max-width: none !important;
        display: block !important;
        object-fit: contain !important;
    }
    
    .section-title-large {
        font-size: 1.5rem !important;
    }
    
    .content-section,
    .section-spacing {
        padding: 30px 0 !important;
    }
    
    /* Content section images - fit in box on small screens */
    .content-section .image-wrapper {
        height: 240px !important;
    }
    
    .event-image-wrapper {
        height: 180px !important;
    }
    
    .event-card-title {
        font-size: 1rem !important;
    }
    
    .event-card-description {
        font-size: 0.85rem !important;
    }
    
    /* Header carousel - no gray bar, match height */
    .header-carousel .owl-item {
        height: 50vh !important;
    }
    .header-carousel .header-carousel-item {
        height: 50vh !important;
        min-height: 50vh !important;
    }
    .header-carousel .header-carousel-item img,
    .header-carousel .header-carousel-item .hero-banner-img,
    .header-carousel-item img {
        height: 50vh !important;
        /* min-height: 50vh !important; */
        /* max-height: 50vh !important; */
    }
    .header-carousel .header-carousel-item .carousel-caption {
        padding: 1rem 0.75rem !important;
    }
}

/* ============================================
   MY EVENTS PAGE
   Page: frontend/events/my-events.blade.php
   ============================================ */

@media (max-width: 768px) {
    .event-image-wrapper {
        height: 200px !important;
    }
    
    .event-card-title {
        font-size: 1.1rem !important;
    }
    
    .event-card-description {
        font-size: 0.9rem !important;
    }
    
    .event-card-body {
        padding: 15px !important;
    }
    
    .event-card-footer {
        padding: 10px 15px !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .event-card-footer .btn {
        flex: 1 1 auto !important;
        min-width: 80px !important;
    }
    
    /* Tabs navigation */
    .my-events-section .nav-tabs {
        flex-direction: column !important;
        border-bottom: none !important;
    }
    
    .my-events-section .nav-tabs .nav-item {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .my-events-section .nav-tabs .nav-link {
        border-radius: 0.375rem !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Create Event button */
    .my-events-section .col-xl-2 {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .my-events-section .col-xl-2 .btn {
        width: 100% !important;
    }
    
    /* Attendance table */
    .my-events-section .table-responsive {
        font-size: 0.875rem !important;
    }
    
    .my-events-section .table th,
    .my-events-section .table td {
        padding: 0.5rem !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 576px) {
    .event-card-footer {
        gap: 4px !important;
    }
    
    .event-card-footer .btn {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .event-card-footer .btn i {
        font-size: 0.8rem !important;
    }
    
    .event-card-footer .btn span {
        display: none !important;
    }
    
    /* Attendance table on very small screens */
    .my-events-section .table th,
    .my-events-section .table td {
        font-size: 0.75rem !important;
        padding: 0.4rem !important;
    }
    
    .my-events-section .table .btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================
   CREATE EVENT PAGE
   Page: frontend/events/create-events.blade.php
   ============================================ */

@media (max-width: 991.98px) {
    .create-event-form .row {
        margin: 0 !important;
    }
    
    .create-event-form .col-xl-2,
    .create-event-form .col-xl-3,
    .create-event-form .col-xl-4,
    .create-event-form .col-xl-6 {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 768px) {
    .create-event-form .card {
        margin-bottom: 1rem !important;
    }
    
    .create-event-form .card-header {
        padding: 0.75rem 1rem !important;
    }
    
    .create-event-form .card-body {
        padding: 1rem !important;
    }
    
    .create-event-form .form-floating {
        margin-bottom: 1rem !important;
    }
    
    .create-event-form .row.g-4 {
        margin: 0 !important;
    }
    
    .create-event-form .row.g-4 > * {
        padding: 0 10px !important;
        margin-bottom: 1rem !important;
    }
    
    /* Map button */
    .showMapButton {
        width: 100% !important;
        margin-top: 0.5rem !important;
    }
    
    .mapDiv {
        margin-top: 1rem !important;
    }
    
    #map {
        height: 250px !important;
    }
    
    /* Slot items */
    .create-event-form .slot-item {
        flex-direction: column !important;
        margin-bottom: 1rem !important;
    }
    
    .create-event-form .slot-item .col-lg-3,
    .create-event-form .slot-item .col-lg-2 {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Checkbox cards */
    .checkbox-card {
        margin-bottom: 0.75rem !important;
        padding: 1rem !important;
    }
    
    /* Recurring days checkboxes */
    .create-event-form .col-md-3,
    .create-event-form .col-sm-4,
    .create-event-form .col-6 {
        margin-bottom: 0.5rem !important;
    }
    
    /* Diamond Very Early Bird fields */
    .create-event-form #diamond_very_early_bird_fields .col-md-4 {
        margin-bottom: 1rem !important;
    }
    
    /* Banner Upload Section - Specific targeting */
    .create-event-form input.bannersImages,
    .create-event-form input[type="file"].bannersImages {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Banner upload form-floating wrapper */
    .create-event-form .form-floating {
        width: 100% !important;
    }
    
    /* Banner View Button - Make full width on mobile */
    .create-event-form .btn-outline-primary[data-bs-target="#bannerModal"],
    .create-event-form button[data-bs-target="#bannerModal"] {
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Ensure banner columns stack properly (already handled by grid system, but ensure button is full width) */
    .create-event-form .col-xl-1 button.btn-outline-primary {
        width: 100% !important;
    }
    
    /* CKEditor Container */
    .create-event-form #description {
        width: 100% !important;
        min-height: 200px !important;
    }
    
    /* Description column - make full width */
    .create-event-form .col-xl-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    /* CKEditor Wrapper - Responsive */
    .ck-editor {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ck.ck-editor {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ck-editor__editable {
        min-height: 200px !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
    }
    
    .ck.ck-toolbar {
        flex-wrap: wrap !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    
    .ck.ck-toolbar .ck-toolbar__separator {
        display: none !important;
    }
    
    /* Form floating label for description */
    .create-event-form .form-floating {
        width: 100% !important;
    }
    
    /* Submit button section */
    .create-event-form .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .create-event-form .d-flex.justify-content-between .btn {
        width: 100% !important;
    }
    
    /* Back button */
    .create-event-form .btn-outline-secondary {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 576px) {
    .create-event-form .card-header h2,
    .create-event-form .card-header h5 {
        font-size: 1.1rem !important;
    }
    
    .create-event-form .display-8 {
        font-size: 1.2rem !important;
    }
    
    #map {
        height: 200px !important;
    }
    
    /* Checkbox cards on very small screens */
    .checkbox-card {
        padding: 0.75rem !important;
    }
    
    .checkbox-card label {
        font-size: 0.875rem !important;
    }
    
    /* Recurring days - stack on very small screens */
    .create-event-form .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Banner Upload on very small screens */
    .create-event-form .bannersImages {
        font-size: 0.85rem !important;
        padding: 0.6rem !important;
    }
    
    /* CKEditor on very small screens */
    .create-event-form #description {
        min-height: 150px !important;
    }
    
    .ck-editor__editable {
        min-height: 150px !important;
        font-size: 0.9rem !important;
    }
    
    .ck.ck-toolbar {
        padding: 0.25rem !important;
    }
    
    .ck.ck-button {
        padding: 0.25rem !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    .ck.ck-button__label {
        font-size: 0.75rem !important;
    }
    
    /* Hide some CKEditor toolbar buttons on very small screens */
    .ck.ck-toolbar .ck-toolbar__separator {
        display: none !important;
    }
}

/* ============================================
   EVENT PREVIEW PAGE
   Page: frontend/events/event-preview.blade.php
   ============================================ */

@media (max-width: 768px) {
    .event-preview-popup .container1 {
        margin: 15px !important;
        padding: 1rem !important;
    }
    
    .event-preview-popup .hero-section1 {
        height: 200px !important;
    }
    
    .event-preview-popup .hero-img {
        max-height: 200px !important;
    }
    
    .event-preview-popup .content {
        padding: 1.5rem !important;
    }
    
    .event-preview-popup .buy-section {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .event-preview-popup .container1 {
        margin: 10px !important;
        border-radius: 15px !important;
    }
    
    .event-preview-popup .hero-section1 {
        height: 150px !important;
    }
    
    .event-preview-popup .hero-img {
        max-height: 150px !important;
    }
    
    .event-preview-popup .content {
        padding: 20px !important;
    }
    
    .event-preview-popup .buy-section {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }
}

/* ============================================
   PROFILE PAGE
   Page: frontend/user/my-profile.blade.php
   ============================================ */

@media (max-width: 991.98px) {
    .profile-form-section .col-xl-5,
    .profile-form-section .col-xl-6,
    .profile-form-section .col-xl-12 {
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 768px) {
    .profile-form-section {
        padding: 1rem !important;
    }
    
    .profile-form-section .card {
        margin-bottom: 1rem !important;
    }
    
    .profile-form-section .card-header {
        padding: 0.75rem 1rem !important;
    }
    
    .profile-form-section .card-header h5 {
        font-size: 1.1rem !important;
    }
    
    .profile-form-section .card-body {
        padding: 1rem !important;
    }
    
    .profile-form-section .form-floating {
        margin-bottom: 1rem !important;
    }
    
    .profile-form-section .row.g-3,
    .profile-form-section .row.g-4,
    .profile-form-section .row.g-5 {
        margin: 0 !important;
    }
    
    .profile-form-section .row.g-3 > *,
    .profile-form-section .row.g-4 > *,
    .profile-form-section .row.g-5 > * {
        padding: 0 10px !important;
        margin-bottom: 1rem !important;
    }
    
    /* Map section */
    .mapDivOrg {
        margin-top: 1rem !important;
    }
    
    #org_map {
        height: 250px !important;
    }
    
    /* Owner details */
    .ownerInput .row {
        margin: 0 !important;
    }
    
    .ownerInput .col-lg-3,
    .ownerInput .col-lg-4 {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Submit button section */
    .profile-form-section .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
    
    .profile-form-section .d-flex.justify-content-between .btn {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .profile-form-section .card-header .d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    .profile-form-section .alert-info {
        padding: 0.75rem !important;
    }
    
    .profile-form-section .alert-info .d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .profile-form-section .alert-info i {
        margin-bottom: 0.5rem !important;
    }
    
    #org_map {
        height: 200px !important;
    }
}

/* ============================================
   MY ORGANIZATION PAGE
   Page: frontend/user/my-orgnization.blade.php
   ============================================ */

@media (max-width: 768px) {
    .organization-form-section {
        padding: 1rem !important;
    }
    
    .organization-form-section .card {
        margin-bottom: 1rem !important;
    }
    
    .organization-form-section .card-body {
        padding: 1rem !important;
    }
    
    .organization-form-section .form-floating {
        margin-bottom: 1rem !important;
    }
    
    .organization-form-section .row {
        margin: 0 !important;
    }
    
    .organization-form-section .row > * {
        padding: 0 10px !important;
        margin-bottom: 1rem !important;
    }
    
    /* Bank details cards */
    .organization-form-section .card.h-100 {
        height: auto !important;
        margin-bottom: 1rem !important;
    }
    
    /* Process flow badges */
    .organization-form-section .d-flex.flex-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .organization-form-section .d-flex.flex-wrap .badge {
        margin-bottom: 0.5rem !important;
    }
    
    .organization-form-section .d-flex.flex-wrap i.fa-arrow-right {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .organization-form-section .alert-info {
        padding: 1rem !important;
    }
    
    .organization-form-section .alert-info .d-flex {
        flex-direction: column !important;
    }
    
    .organization-form-section .alert-info i {
        margin-bottom: 0.5rem !important;
        font-size: 1.5rem !important;
    }
}

/* ============================================
   FEEDBACK & SUGGESTIONS PAGE
   Page: frontend/feedback/index.blade.php
   ============================================ */

@media (max-width: 768px) {
    .feedback-form-section {
        padding: 1rem !important;
    }
    
    .feedback-form-section .card {
        margin-bottom: 1rem !important;
    }
    
    .feedback-form-section .card-body {
        padding: 1rem !important;
    }
    
    .feedback-form-section .form-floating {
        margin-bottom: 1rem !important;
    }
    
    .feedback-table {
        font-size: 0.875rem !important;
    }
    
    .feedback-table th,
    .feedback-table td {
        padding: 0.5rem !important;
    }
    
    .feedback-table th:first-child,
    .feedback-table td:first-child {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .feedback-table {
        font-size: 0.75rem !important;
    }
    
    .feedback-table th,
    .feedback-table td {
        padding: 0.4rem !important;
    }
    
    .feedback-table .badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* ============================================
   REPORTS / STATEMENTS PAGE
   Page: frontend/report/index.blade.php
   ============================================ */

@media (max-width: 768px) {
    .report-card {
        margin-bottom: 1rem !important;
    }
    
    .report-card .event-item {
        margin-bottom: 1rem !important;
    }
    
    .report-card .table {
        font-size: 0.875rem !important;
    }
    
    .report-card .table td,
    .report-card .table th {
        padding: 0.5rem !important;
    }
    
    /* Date filter form */
    .report-card .row .col-md-4 {
        margin-bottom: 0.75rem !important;
    }
    
    .report-card .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* View Feedbacks button */
    .view-feedbacks-btn {
        width: 100% !important;
        margin-top: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .report-card .table {
        font-size: 0.75rem !important;
    }
    
    .report-card .table td,
    .report-card .table th {
        padding: 0.4rem 0.25rem !important;
    }
    
    .report-card .event-item .position-absolute {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }
}

/* ============================================
   LUCKY DRAW PAGE
   Page: frontend/lucky-draw/index.blade.php
   ============================================ */

@media (max-width: 768px) {
    .lucky-draw-table {
        font-size: 0.875rem !important;
    }
    
    .lucky-draw-table th,
    .lucky-draw-table td {
        padding: 0.5rem !important;
    }
    
    .lucky-draw-card {
        margin-bottom: 1rem !important;
    }
    
    .lucky-draw-card .card-header {
        padding: 0.75rem 1rem !important;
    }
    
    .lucky-draw-card .card-header h5 {
        font-size: 1.1rem !important;
    }
    
    .lucky-draw-card .card-body {
        padding: 1rem !important;
    }
    
    /* Active lucky draw table */
    .lucky-draw-card .table th {
        width: auto !important;
        white-space: normal !important;
    }
    
    .lucky-draw-card .d-flex.gap-2 {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .lucky-draw-card .d-flex.gap-2 .btn {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .lucky-draw-table {
        font-size: 0.75rem !important;
    }
    
    .lucky-draw-table th,
    .lucky-draw-table td {
        padding: 0.4rem !important;
        display: block !important;
        width: 100% !important;
    }
    
    .lucky-draw-table th {
        border-bottom: none !important;
        font-weight: 600 !important;
        background-color: #f8f9fa !important;
    }
    
    .lucky-draw-table td {
        border-top: none !important;
        padding-left: 1rem !important;
    }
    
    .lucky-draw-table tr {
        border-bottom: 2px solid #dee2e6 !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
}

/* ============================================
   PROMO CODES PAGE
   Page: frontend/promo-codes/index.blade.php
   ============================================ */

@media (max-width: 991.98px) {
    .promo-code-header .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    .promo-code-header .text-end {
        text-align: left !important;
        width: 100% !important;
    }
    
    .promo-code-header .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

@media (max-width: 768px) {
    .promo-code-table {
        font-size: 0.875rem !important;
    }
    
    .promo-code-table th,
    .promo-code-table td {
        padding: 0.5rem !important;
    }
    
    .promo-code-card {
        margin-bottom: 1rem !important;
    }
    
    /* Navigation tabs */
    .promo-code-header .nav-tabs {
        flex-direction: column !important;
        border-bottom: none !important;
    }
    
    .promo-code-header .nav-tabs .nav-item {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .promo-code-header .nav-tabs .nav-link {
        border-radius: 0.375rem !important;
        text-align: center !important;
    }
    
    .promo-code-header .col-md-8,
    .promo-code-header .col-md-4 {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 576px) {
    .promo-code-table {
        font-size: 0.75rem !important;
    }
    
    .promo-code-table th,
    .promo-code-table td {
        padding: 0.4rem !important;
    }
    
    .promo-code-header .badge {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.6rem !important;
    }
}

/* ============================================
   PRODUCTS PAGE
   Page: frontend/products/index.blade.php
   ============================================ */

@media (max-width: 768px) {
    .products-section .col-md-6,
    .products-section .col-lg-4,
    .products-section .col-xl-3 {
        margin-bottom: 1.5rem !important;
    }
    
    .products-section .event-item {
        margin-bottom: 0 !important;
    }
    
    .products-section .event-item img {
        height: 200px !important;
    }
    
    .products-section .btn {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.8rem !important;
    }
    
    /* Create product button */
    .products-section .col-xl-2 {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .products-section .col-xl-2 .btn {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .products-section .event-item img {
        height: 180px !important;
    }
    
    .products-section .event-item .border {
        padding: 1rem !important;
    }
    
    .products-section .event-item .h4 {
        font-size: 1rem !important;
    }
    
    .products-section .event-item p {
        font-size: 0.85rem !important;
    }
    
    .products-section .float-end {
        float: none !important;
        display: flex !important;
        gap: 0.5rem !important;
        margin-top: 0.5rem !important;
    }
}

/* ============================================
   CREATE PRODUCT PAGE
   Page: frontend/products/create.blade.php
   ============================================ */

@media (max-width: 768px) {
    .create-product-form .card {
        margin-bottom: 1rem !important;
    }
    
    .create-product-form .form-floating {
        margin-bottom: 1rem !important;
    }
    
    .create-product-form .row {
        margin: 0 !important;
    }
    
    .create-product-form .row > * {
        padding: 0 10px !important;
        margin-bottom: 1rem !important;
    }
}

/* ============================================
   BARS & CLUBS PAGE
   Page: frontend/bars-clubs/index.blade.php
   ============================================ */

@media (max-width: 768px) {
    .bars-clubs-section .col-md-6,
    .bars-clubs-section .col-lg-4,
    .bars-clubs-section .col-xl-3 {
        margin-bottom: 1.5rem !important;
    }
    
    .bars-clubs-section .event-item {
        margin-bottom: 0 !important;
    }
    
    .bars-clubs-section .event-item img {
        height: 200px !important;
    }
    
    /* Tabs */
    .bars-clubs-section .nav-tabs {
        flex-direction: column !important;
        border-bottom: none !important;
    }
    
    .bars-clubs-section .nav-tabs .nav-item {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .bars-clubs-section .nav-tabs .nav-link {
        border-radius: 0.375rem !important;
        text-align: center !important;
    }
    
    /* Create button */
    .bars-clubs-section .col-xl-2 {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .bars-clubs-section .col-xl-2 .btn {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .bars-clubs-section .event-item img {
        height: 180px !important;
    }
    
    .bars-clubs-section .event-item .border {
        padding: 1rem !important;
    }
}

/* ============================================
   CREATE BARS & CLUBS PAGE
   Page: frontend/bars-clubs/create.blade.php
   ============================================ */

@media (max-width: 768px) {
    .bars-clubs-form .card {
        margin-bottom: 1rem !important;
    }
    
    .bars-clubs-form .form-floating {
        margin-bottom: 1rem !important;
    }
    
    .bars-clubs-form .row {
        margin: 0 !important;
    }
    
    .bars-clubs-form .row > * {
        padding: 0 10px !important;
        margin-bottom: 1rem !important;
    }
}

/* ============================================
   CONTACT US PAGE
   Page: frontend/user/contact-us.blade.php
   ============================================ */

@media (max-width: 768px) {
    .contact-form-section {
        padding: 1rem !important;
    }
    
    .contact-form-section .card {
        margin-bottom: 1rem !important;
    }
    
    .contact-form-section .card-body {
        padding: 1rem !important;
    }
    
    .contact-form-section .form-floating {
        margin-bottom: 1rem !important;
    }
    
    .contact-form-section .row {
        margin: 0 !important;
    }
    
    .contact-form-section .row > * {
        padding: 0 10px !important;
        margin-bottom: 1rem !important;
    }
}

/* ============================================
   LOGIN / REGISTRATION PAGES
   Pages: frontend/user/login.blade.php, registartion.blade.php
   ============================================ */

@media (max-width: 768px) {
    .login-form-section,
    .registration-form-section {
        padding: 1rem !important;
    }
    
    .login-form-section .card,
    .registration-form-section .card {
        margin-bottom: 1rem !important;
    }
    
    .login-form-section .card-body,
    .registration-form-section .card-body {
        padding: 1.5rem !important;
    }
    
    .login-form-section .form-floating,
    .registration-form-section .form-floating {
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 576px) {
    .login-form-section .card-body,
    .registration-form-section .card-body {
        padding: 1rem !important;
    }
    
    .login-form-section .btn,
    .registration-form-section .btn {
        width: 100% !important;
    }
}

/* ============================================
   PRIVACY POLICY / TERMS & CONDITIONS
   Pages: frontend/privacy/privacy-policy.blade.php, terms-conditions.blade.php
   ============================================ */

@media (max-width: 768px) {
    .privacy-content,
    .terms-content {
        padding: 1rem !important;
    }
    
    .privacy-content .container,
    .terms-content .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .privacy-content h1,
    .terms-content h1 {
        font-size: 2rem !important;
    }
    
    .privacy-content h2,
    .terms-content h2 {
        font-size: 1.5rem !important;
    }
    
    .privacy-content h3,
    .terms-content h3 {
        font-size: 1.25rem !important;
    }
}

/* ============================================
   EVENT DETAIL PAGE
   Page: frontend/events/event-detail.blade.php
   ============================================ */

@media (max-width: 768px) {
    .event-detail-section {
        padding: 1rem !important;
    }
    
    .event-detail-section .card {
        margin-bottom: 1rem !important;
    }
    
    .event-detail-section .card-body {
        padding: 1rem !important;
    }
    
    .event-detail-section img {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 1rem !important;
    }
}

/* ============================================
   EVENT FEEDBACKS PAGE
   Page: frontend/events/event-feedbacks.blade.php
   ============================================ */

@media (max-width: 768px) {
    .event-feedbacks-section .table {
        font-size: 0.875rem !important;
    }
    
    .event-feedbacks-section .table th,
    .event-feedbacks-section .table td {
        padding: 0.5rem !important;
    }
}

/* ============================================
   ATTENDANCE DETAIL PAGE
   Page: frontend/events/attendance-detail.blade.php
   ============================================ */

@media (max-width: 768px) {
    .attendance-detail-section {
        padding: 1rem !important;
    }
    
    .attendance-detail-section .card {
        margin-bottom: 1rem !important;
    }
    
    .attendance-detail-section .table {
        font-size: 0.875rem !important;
    }
    
    .attendance-detail-section .table th,
    .attendance-detail-section .table td {
        padding: 0.5rem !important;
    }
    
    .attendance-detail-section .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .attendance-detail-section .table {
        font-size: 0.75rem !important;
    }
    
    .attendance-detail-section .table th,
    .attendance-detail-section .table td {
        padding: 0.4rem !important;
    }
}

/* ============================================
   EVENT SLOTS PAGES
   Pages: frontend/events/slots/single.blade.php, multi-day.blade.php, seasional.blade.php
   ============================================ */

@media (max-width: 768px) {
    .event-slots-section {
        padding: 1rem !important;
    }
    
    .event-slots-section .card {
        margin-bottom: 1rem !important;
    }
    
    .event-slots-section .card-body {
        padding: 1rem !important;
    }
    
    .event-slots-section .form-floating {
        margin-bottom: 1rem !important;
    }
    
    .event-slots-section .row {
        margin: 0 !important;
    }
    
    .event-slots-section .row > * {
        padding: 0 10px !important;
        margin-bottom: 1rem !important;
    }
    
    .event-slots-section .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ============================================
   DOCUMENTATION PAGES
   Pages: frontend/documentation/list.blade.php, view.blade.php
   ============================================ */

@media (max-width: 768px) {
    .documentation-section .card {
        margin-bottom: 1rem !important;
    }
    
    .documentation-section .list-group-item {
        padding: 0.75rem 1rem !important;
    }
    
    .documentation-section .card-body {
        padding: 1rem !important;
    }
    
    .documentation-section .table {
        font-size: 0.875rem !important;
    }
}

/* ============================================
   USER TABS COMPONENT / TABS GROUP
   Page: frontend/user/tabs.blade.php
   ============================================ */

/* Professional Tabs Group - Additional responsive styles */
@media (max-width: 991.98px) {
    .tabsGroup {
        padding: 0.75rem !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    }
    
    .tabsGroup .nav-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scrollbar-color: #017B7A #f1f1f1 !important;
        padding-bottom: 0.5rem !important;
    }
    
    .tabsGroup .nav-tabs::-webkit-scrollbar {
        height: 6px !important;
    }
    
    .tabsGroup .nav-tabs::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
        border-radius: 10px !important;
    }
    
    .tabsGroup .nav-tabs::-webkit-scrollbar-thumb {
        background: #017B7A !important;
        border-radius: 10px !important;
    }
    
    .tabsGroup .nav-link {
        white-space: nowrap !important;
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9rem !important;
        margin-right: 0.5rem !important;
    }
    
    .user-tabs-section {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .user-tabs-section .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    .user-tabs-section .nav-tabs .nav-link {
        white-space: nowrap !important;
        padding: 0.75rem 1rem !important;
    }
}

@media (max-width: 768px) {
    .tabsGroup {
        padding: 0.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .tabsGroup .nav-link {
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
        border-radius: 6px 6px 0 0 !important;
    }
    
    .tabsGroup .nav-link i {
        font-size: 0.9rem !important;
    }
    
    .user-tabs-section .nav-tabs .nav-link {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .user-tabs-section .nav-tabs .nav-link i {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 576px) {
    .tabsGroup .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    .tabsGroup .nav-link i {
        font-size: 0.85rem !important;
        margin-right: 0.25rem !important;
    }
}

/* ============================================
   GENERAL TABLE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table-responsive table {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    .table-responsive th,
    .table-responsive td {
        white-space: nowrap !important;
        font-size: 0.875rem !important;
        padding: 0.5rem !important;
    }
    
    /* Stack table on very small screens */
    .table-responsive-stack {
        display: block !important;
    }
    
    .table-responsive-stack thead {
        display: none !important;
    }
    
    .table-responsive-stack tbody,
    .table-responsive-stack tr,
    .table-responsive-stack td {
        display: block !important;
        width: 100% !important;
    }
    
    .table-responsive-stack td {
        text-align: left !important;
        padding-left: 50% !important;
        position: relative !important;
    }
    
    .table-responsive-stack td::before {
        content: attr(data-label) ": ";
        position: absolute !important;
        left: 0 !important;
        width: 45% !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
        font-weight: 600 !important;
    }
}

@media (max-width: 576px) {
    .table-responsive th,
    .table-responsive td {
        font-size: 0.75rem !important;
        padding: 0.4rem !important;
    }
}

/* ============================================
   MODAL RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .modal-dialog {
        margin: 1rem !important;
        max-width: calc(100% - 2rem) !important;
    }
    
    .modal-content {
        border-radius: 0.5rem !important;
    }
    
    .modal-header {
        padding: 1rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .modal-header .btn-close {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
    }
    
    .modal-body {
        padding: 1rem !important;
    }
    
    .modal-footer {
        padding: 1rem !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .modal-footer .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
    
    .modal-content {
        border-radius: 0.5rem !important;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 0.75rem !important;
    }
    
    .modal-title {
        font-size: 1.1rem !important;
    }
}

/* ============================================
   FORM RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .form-floating > label {
        font-size: 0.875rem !important;
    }
    
    .form-control {
        font-size: 1rem !important;
        padding: 0.75rem !important;
    }
    
    .form-select {
        font-size: 1rem !important;
        padding: 0.75rem !important;
    }
    
    .form-control:focus,
    .form-select:focus {
        padding: 0.75rem !important;
    }
    
    /* Form check */
    .form-check {
        margin-bottom: 0.5rem !important;
    }
    
    .form-check-label {
        font-size: 0.9rem !important;
    }
    
    .form-check-input {
        width: 1.1rem !important;
        height: 1.1rem !important;
        margin-top: 0.2rem !important;
    }
    
    .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .btn-sm {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Form groups */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    /* Input groups */
    .input-group {
        flex-direction: column !important;
    }
    
    .input-group .form-control,
    .input-group .btn {
        width: 100% !important;
        border-radius: 0.375rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .input-group .btn:last-child {
        margin-bottom: 0 !important;
    }
    
    /* File inputs */
    .form-control[type="file"] {
        padding: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .btn:last-child {
        margin-bottom: 0 !important;
    }
}

/* ============================================
   CARD RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem !important;
    }
    
    .card-header {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
    
    .card-header h1,
    .card-header h2,
    .card-header h3,
    .card-header h4,
    .card-header h5,
    .card-header h6 {
        font-size: 1.1rem !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .card-footer {
        padding: 0.75rem 1rem !important;
    }
    
    .card-title {
        font-size: 1.1rem !important;
    }
    
    .card-text {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 576px) {
    .card-header {
        padding: 0.5rem 0.75rem !important;
    }
    
    .card-body {
        padding: 0.75rem !important;
    }
    
    .card-footer {
        padding: 0.5rem 0.75rem !important;
    }
}

/* ============================================
   BADGE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .badge {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.6rem !important;
    }
    
    .badge-lg {
        font-size: 0.9rem !important;
        padding: 0.5rem 0.75rem !important;
    }
}

/* ============================================
   PAGINATION RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .pagination .page-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    .pagination .page-item {
        margin: 0.25rem !important;
    }
}

@media (max-width: 576px) {
    .pagination .page-link {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
    
    .pagination .page-item:not(.active):not(.disabled) {
        display: none !important;
    }
    
    .pagination .page-item.active,
    .pagination .page-item.disabled,
    .pagination .page-item:first-child,
    .pagination .page-item:last-child {
        display: block !important;
    }
}

/* ============================================
   ALERT RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .alert {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .alert .d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .alert i {
        margin-bottom: 0.5rem !important;
    }
    
    .alert-heading {
        font-size: 1rem !important;
    }
}

/* ============================================
   CAROUSEL / SLIDER RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .owl-carousel .owl-item {
        padding: 0 10px !important;
    }
    
    .owl-carousel .owl-nav {
        display: none !important;
    }
    
    .owl-carousel .owl-dots {
        margin-top: 1rem !important;
    }
}

/* ============================================
   GRID SYSTEM RESPONSIVE
   ============================================ */

@media (max-width: 991.98px) {
    /* Force full width on tablet and below for xl columns */
    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    /* Force full width on mobile for common column classes */
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Maintain grid for specific layouts only when needed */
    .row.g-4 > .col-md-6,
    .row.g-4 > .col-lg-4,
    .row.g-4 > .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 576px) {
    .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    
    .row > * {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ============================================
   FLEXBOX UTILITIES RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    .d-flex.align-items-center {
        flex-wrap: wrap !important;
    }
    
    .d-flex.align-items-end {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .text-end {
        text-align: left !important;
        width: 100% !important;
    }
    
    .text-xl-end {
        text-align: left !important;
    }
    
    .text-md-end {
        text-align: left !important;
    }
    
    /* Flex wrap for better mobile layout */
    .d-flex.flex-wrap {
        gap: 0.5rem !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

@media (max-width: 768px) {
    .d-mobile-none {
        display: none !important;
    }
    
    .d-mobile-block {
        display: block !important;
    }
    
    .d-mobile-flex {
        display: flex !important;
    }
    
    .d-mobile-inline {
        display: inline !important;
    }
    
    .d-mobile-inline-block {
        display: inline-block !important;
    }
    
    .text-mobile-center {
        text-align: center !important;
    }
    
    .text-mobile-left {
        text-align: left !important;
    }
    
    .mb-mobile-0 {
        margin-bottom: 0 !important;
    }
    
    .mb-mobile-1 {
        margin-bottom: 0.25rem !important;
    }
    
    .mb-mobile-2 {
        margin-bottom: 0.5rem !important;
    }
    
    .mb-mobile-3 {
        margin-bottom: 1rem !important;
    }
    
    .mb-mobile-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-mobile-0 {
        margin-top: 0 !important;
    }
    
    .mt-mobile-1 {
        margin-top: 0.25rem !important;
    }
    
    .mt-mobile-2 {
        margin-top: 0.5rem !important;
    }
    
    .mt-mobile-3 {
        margin-top: 1rem !important;
    }
    
    .px-mobile-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .px-mobile-1 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    .px-mobile-2 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .px-mobile-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .py-mobile-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .py-mobile-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    
    .py-mobile-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .py-mobile-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .w-mobile-100 {
        width: 100% !important;
    }
    
    .h-mobile-auto {
        height: auto !important;
    }
}

/* ============================================
   FOOTER RESPONSIVE
   Page: element/front-footer.blade.php
   ============================================ */

@media (max-width: 768px) {
    .footer-section {
        padding: 2rem 0 !important;
    }
    
    .footer-section .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .footer-section .row {
        margin: 0 !important;
    }
    
    .footer-section .col-md-6,
    .footer-section .col-lg-3,
    .footer-section .col-lg-4 {
        margin-bottom: 2rem !important;
        padding: 0 15px !important;
    }
    
    .footer-section h5 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .footer-section ul {
        padding-left: 0 !important;
    }
    
    .footer-section li {
        margin-bottom: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .footer-section {
        padding: 1.5rem 0 !important;
        text-align: center !important;
    }
    
    .footer-section .col-md-6,
    .footer-section .col-lg-3,
    .footer-section .col-lg-4 {
        margin-bottom: 1.5rem !important;
    }
}

/* ============================================
   SWEETALERT RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    .swal2-popup {
        width: 90% !important;
        padding: 1rem !important;
    }
    
    .swal2-title {
        font-size: 1.25rem !important;
    }
    
    .swal2-content {
        font-size: 0.9rem !important;
    }
    
    .swal2-actions {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .swal2-actions button {
        width: 100% !important;
        margin: 0.25rem 0 !important;
    }
}

/* ============================================
   SELECT2 RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .select2-container {
        width: 100% !important;
    }
    
    .select2-container--default .select2-selection--single {
        height: auto !important;
        min-height: 48px !important;
        padding: 0.5rem !important;
    }
    
    .select2-container--default .select2-selection--multiple {
        min-height: 48px !important;
        padding: 0.5rem !important;
    }
    
    .select2-dropdown {
        font-size: 0.9rem !important;
    }
}

/* ============================================
   CKEDITOR RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .ck-editor {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ck.ck-editor {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ck-editor__editable {
        min-height: 200px !important;
        font-size: 0.9rem !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
    }
    
    .ck.ck-toolbar {
        flex-wrap: wrap !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        padding: 0.5rem !important;
    }
    
    .ck.ck-toolbar .ck-toolbar__separator {
        display: none !important;
    }
    
    .ck.ck-button {
        padding: 0.3rem !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    .ck.ck-button__label {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 576px) {
    .ck-editor__editable {
        min-height: 150px !important;
        font-size: 0.85rem !important;
    }
    
    .ck.ck-toolbar {
        padding: 0.25rem !important;
    }
    
    .ck.ck-button {
        padding: 0.25rem !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    .ck.ck-button__label {
        font-size: 0.75rem !important;
    }
    
    /* Hide less essential toolbar buttons on very small screens */
    .ck.ck-toolbar .ck-toolbar__separator {
        display: none !important;
    }
}

/* ============================================
   DATE PICKER RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    .ui-datepicker {
        width: 90% !important;
        font-size: 0.875rem !important;
    }
    
    .ui-datepicker-header {
        padding: 0.5rem !important;
    }
    
    .ui-datepicker-calendar td {
        padding: 0.25rem !important;
    }
    
    .ui-datepicker-calendar a {
        padding: 0.5rem !important;
    }
}

/* ============================================
   PRINT STYLES (Optional)
   ============================================ */

@media print {
    .navbar,
    .footer-section,
    .btn,
    .pagination,
    .no-print {
        display: none !important;
    }
    
    .container,
    .container-fluid {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .card {
        border: 1px solid #000 !important;
        page-break-inside: avoid !important;
    }
    
    .table {
        font-size: 0.75rem !important;
    }
}