/* ==========================================================================
   MEDINEST / VetClinics - Universal Responsive Design System (responsive-fix.css)
   Seamless compatibility across Smartphones, Tablets, Laptops, and Desktops
   ========================================================================== */

/* Universal Viewport & Smooth Touch Scrolling */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}

/* Universal Table Horizontal Scrolling Safeguard */
.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px;
    margin-bottom: 1rem !important;
}

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}

.table-responsive > .table {
    margin-bottom: 0 !important;
    min-width: 600px;
}

/* Accessible Touch Targets */
.btn, .form-control, .form-select, .nav-link, .dropdown-item {
    touch-action: manipulation;
}

@media (max-width: 767.98px) {
    /* Prevent iOS auto-zoom on input focus */
    .form-control, .form-select {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   HEADER NAVBAR & COLLAPSE MENU RESPONSIVENESS (<1200px)
   Applies to index.php, about.php, clinic.php, dashboard.php, and users/ pages
   ========================================================================== */
@media (max-width: 1199.98px) {
    #header .navbar-toggler {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: rgba(255, 255, 255, 0.12) !important;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
        transition: background 0.2s ease;
    }

    #header .navbar-toggler:hover,
    #header .navbar-toggler:focus {
        background: rgba(255, 255, 255, 0.22) !important;
        outline: none;
        box-shadow: none;
    }

    #header .navbar-toggler i {
        font-size: 1.5rem !important;
        line-height: 1;
    }

    /* Glassmorphic Mobile Navigation Dropdown */
    #header .navbar-collapse {
        background: linear-gradient(135deg, rgba(12, 45, 87, 0.98) 0%, rgba(26, 86, 219, 0.98) 100%) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 20px;
        padding: 18px 16px;
        margin-top: 12px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 30px rgba(59, 130, 246, 0.2);
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #header .navmenu {
        width: 100% !important;
        margin: 0 !important;
    }

    #header .navmenu ul {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #header .navmenu ul li {
        width: 100% !important;
    }

    #header .navmenu ul li a {
        display: flex !important;
        align-items: center !important;
        padding: 12px 18px !important;
        border-radius: 12px !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        width: 100% !important;
        transition: all 0.2s ease;
    }

    #header .navmenu ul li a:hover,
    #header .navmenu ul li a.active {
        background: rgba(255, 255, 255, 0.16) !important;
        color: #ffffff !important;
        transform: translateX(4px);
    }

    #header .navmenu ul li a.active::after {
        display: none !important;
    }

    /* Mobile Header Action / Profile Dropdown */
    #header .profile-dropdown,
    #header .btn-getstarted {
        width: 100% !important;
        margin-top: 14px !important;
        margin-left: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    #header .profile-dropdown .dropdown-toggle,
    #header .btn-getstarted {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px 20px !important;
        border-radius: 12px !important;
    }

    #header .profile-dropdown .dropdown-menu {
        width: 100% !important;
        position: static !important;
        float: none !important;
        margin-top: 8px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    }
}

/* ==========================================================================
   HERO BANNERS & PAGE HEADERS RESPONSIVENESS
   ========================================================================== */
@media (max-width: 991.98px) {
    .hero-banner,
    .page-hero,
    .hero {
        padding-top: 100px !important;
        padding-bottom: 50px !important;
    }

    .display-5, .hero-title {
        font-size: clamp(1.6rem, 5vw, 2.3rem) !important;
    }

    .lead, .hero-subtitle {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 575.98px) {
    .hero-banner,
    .page-hero,
    .hero {
        padding-top: 85px !important;
        padding-bottom: 40px !important;
    }

    #header .sitename {
        font-size: 1.35rem !important;
    }

    .search-box-wrapper {
        padding: 6px !important;
        border-radius: 14px !important;
    }

    .search-box-wrapper .form-control {
        font-size: 0.9rem !important;
        padding: 8px !important;
    }

    .search-box-wrapper .btn {
        padding: 8px 16px !important;
        font-size: 0.88rem !important;
    }
}

/* ==========================================================================
   DDS LEAFLET MAP & SPOTLIGHT RADAR (dashboard.php)
   ========================================================================== */
@media (max-width: 991.98px) {
    #ddsClinicMap {
        min-height: 380px !important;
        height: 380px !important;
    }

    .nearest-spotlight-card {
        margin-top: 1rem;
    }
}

@media (max-width: 575.98px) {
    #ddsClinicMap {
        min-height: 300px !important;
        height: 300px !important;
        border-radius: 14px !important;
    }

    .map-card-wrapper {
        border-radius: 14px !important;
    }
}

/* ==========================================================================
   CLINIC CARDS & PET CARDS GRID
   ========================================================================== */
@media (max-width: 767.98px) {
    .clinic-card-image img {
        height: 180px !important;
    }

    .clinic-card-body {
        padding: 16px !important;
    }

    .clinic-name {
        font-size: 1.15rem !important;
    }

    .btn-select-clinic {
        padding: 11px 16px !important;
        font-size: 0.9rem !important;
    }

    /* Pet Cards in mypets.php */
    .pet-card {
        margin-bottom: 1rem;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   USER SIDEBAR & DRAWER SYSTEM (userSidebar.php / partials/header.php)
   ========================================================================== */
/* Mobile Toggle Button Base Style */
.mobile-toggle {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1a56db;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    z-index: 1045;
    transition: all 0.2s ease;
}

.mobile-toggle:hover {
    background: #1a56db;
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .mobile-toggle {
        display: flex !important;
    }

    /* Hardware Accelerated Smooth Slide Animation */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 86vw !important;
        transform: translate3d(-100%, 0, 0) !important;
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 1060 !important;
        box-shadow: none !important;
    }

    .sidebar.active {
        transform: translate3d(0, 0, 0) !important;
        box-shadow: 12px 0 40px rgba(0, 0, 0, 0.55) !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding-top: 72px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Smooth Fade Backdrop Overlay */
    .overlay,
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(12, 45, 87, 0.6) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 1055 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
        will-change: opacity;
    }

    .overlay.active,
    .sidebar-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* ==========================================================================
   MOBILE ANIMATION PERFORMANCE & GPU OPTIMIZATION (<768px)
   Prevents stutter, battery drain, dropped frames, and layout shifts on mobile
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Smooth GPU compositing on all interactive transitions */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Throttle / streamline heavy decorative infinite floating elements on mobile */
    .bubbles .bubble:nth-child(n+7),
    .paw-prints .paw-print:nth-child(n+5),
    .floating-shape:nth-child(n+4),
    .floating-paw:nth-child(n+4),
    .particle:nth-child(n+8) {
        display: none !important;
    }

    .bubble, .paw-print, .particle, .floating-shape, .floating-paw {
        will-change: transform;
        animation-fill-mode: both;
    }

    /* Prevent hover state sticking on mobile touch */
    .card:hover,
    .kpi-card:hover,
    .stat-card:hover,
    .account-card:hover {
        transform: none !important;
    }

    .card:active,
    .kpi-card:active,
    .stat-card:active {
        transform: scale(0.99) !important;
        transition: transform 0.1s ease !important;
    }
}

/* Respect user's accessibility reduced motion settings */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   MODAL RESPONSIVENESS (Universal)
   ========================================================================== */
@media (max-width: 767.98px) {
    .modal-dialog {
        max-width: 95% !important;
        margin: 0.75rem auto !important;
    }

    .modal-content {
        border-radius: 18px !important;
    }

    .modal-header {
        padding: 1rem 1.25rem !important;
    }

    .modal-body {
        padding: 1.25rem !important;
        max-height: calc(100vh - 130px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-footer {
        padding: 0.75rem 1.25rem !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .modal-footer > * {
        margin: 0 !important;
        width: 100% !important;
    }
}

/* Login Modal Responsive Overrides */
@media (max-width: 767.98px) {
    .modal-login-wrapper {
        flex-direction: column !important;
        min-height: auto !important;
    }

    .modal-left-section {
        min-height: 200px !important;
        padding: 24px 20px !important;
    }

    .modal-right-section {
        padding: 24px 20px !important;
    }
}

/* ==========================================================================
   USER PORTAL APPOINTMENTS, TABS & INTERACTIVE ELEMENTS
   ========================================================================== */
@media (max-width: 991.98px) {
    .filter-tabs,
    .appointment-filters,
    .nav-tabs,
    .nav-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
        gap: 6px !important;
    }

    .filter-tabs .nav-link,
    .appointment-filters .btn,
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 575.98px) {
    .appointment-card {
        padding: 16px !important;
    }

    .appointment-card .d-flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .appointment-actions,
    .pet-card-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 6px !important;
    }

    .appointment-actions .btn,
    .pet-card-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Page Titles and Action Row */
    .page-title-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .page-title-wrap .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}