/* ============================================
   ZENITHPAY MOBILE RESPONSIVE STYLES
   Optimized for all mobile devices
   ============================================ */

/* Base Mobile Optimizations */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    position: relative;
}

/* ============================================
   MOBILE SIDEBAR
   ============================================ */

/* Sidebar Backdrop Overlay */
#sidebarBackdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

#sidebarBackdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Sidebar Animations */
@media (max-width: 1023px) {
    #adminSidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #adminSidebar.active {
        transform: translateX(0);
    }

    /* Prevent body scroll when sidebar is open */
    body.sidebar-open {
        overflow: hidden;
    }
}

/* ============================================
   RESPONSIVE TOUCH TARGETS
   Minimum 44x44px for touch interfaces
   ============================================ */

@media (max-width: 768px) {
    /* Button minimum size */
    button,
    .btn,
    a.btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Navigation links */
    .admin-link {
        min-height: 48px;
        padding: 12px 16px !important;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 16px;
    }

    /* Checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
    }
}

/* ============================================
   RESPONSIVE TABLES
   ============================================ */

@media (max-width: 1024px) {
    /* Horizontal scrolling table container */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }

    .table-responsive table {
        min-width: 800px;
    }

    /* DataTables specific */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        margin-bottom: 1rem;
    }

    /* Stack table controls vertically */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: left;
        margin-bottom: 10px;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: left;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    /* Mobile table styles */
    .table-mobile-card {
        display: block;
    }

    .table-mobile-card thead {
        display: none;
    }

    .table-mobile-card tbody,
    .table-mobile-card tr,
    .table-mobile-card td {
        display: block;
        width: 100%;
    }

    .table-mobile-card tr {
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 1rem;
        background: white;
    }

    .table-mobile-card td {
        position: relative;
        padding-left: 50%;
        text-align: right;
        border: none;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .table-mobile-card td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 1rem;
        font-weight: 600;
        text-align: left;
        color: #4b5563;
    }
}

/* ============================================
   RESPONSIVE GRID LAYOUTS
   ============================================ */

@media (max-width: 640px) {
    /* Stack grid columns on mobile */
    .responsive-grid {
        grid-template-columns: 1fr !important;
    }

    /* Reduce spacing on mobile */
    .responsive-spacing {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

@media (max-width: 768px) {
    /* Scale down headings */
    h1, .text-4xl {
        font-size: 1.875rem !important; /* 30px */
        line-height: 2.25rem !important;
    }

    h2, .text-3xl {
        font-size: 1.5rem !important; /* 24px */
        line-height: 2rem !important;
    }

    h3, .text-2xl {
        font-size: 1.25rem !important; /* 20px */
        line-height: 1.75rem !important;
    }

    h4, .text-xl {
        font-size: 1.125rem !important; /* 18px */
        line-height: 1.5rem !important;
    }

    /* Adjust button text */
    button, .btn {
        font-size: 0.875rem !important;
    }

    /* Improve readability */
    p, .text-base {
        font-size: 1rem;
        line-height: 1.625rem;
    }
}

/* ============================================
   MODAL RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    /* Full-screen modals on mobile */
    .modal-content,
    [role="dialog"] {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100vh;
    }

    .modal-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        border-bottom: 1px solid #e5e7eb;
    }

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

    .modal-footer {
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 10;
        border-top: 1px solid #e5e7eb;
    }
}

/* ============================================
   RESPONSIVE FORMS
   ============================================ */

@media (max-width: 768px) {
    /* Stack form elements */
    .form-row {
        flex-direction: column !important;
    }

    .form-col {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem;
    }

    /* Full-width buttons */
    .form-actions button {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Larger select dropdowns */
    select {
        background-size: 20px;
        padding-right: 2.5rem;
    }
}

/* ============================================
   RESPONSIVE CARDS
   ============================================ */

@media (max-width: 768px) {
    .stat-card {
        padding: 1rem !important;
    }

    .stat-card .text-3xl,
    .stat-card .text-4xl {
        font-size: 1.5rem !important;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .card-header > * {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ============================================
   RESPONSIVE NAVIGATION
   ============================================ */

@media (max-width: 768px) {
    /* Mobile header adjustments */
    header .hidden {
        display: none !important;
    }

    /* Hamburger menu */
    .mobile-menu-btn {
        display: block !important;
    }

    /* Mobile navigation */
    nav ul {
        flex-direction: column;
    }

    nav li {
        width: 100%;
        text-align: left;
    }

    /* Dropdown menus */
    .dropdown-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid #e5e7eb !important;
    }
}

/* ============================================
   RESPONSIVE CHARTS
   ============================================ */

@media (max-width: 768px) {
    .chart-container {
        height: 250px !important;
        padding: 1rem 0;
    }

    canvas {
        max-height: 250px !important;
    }
}

/* ============================================
   RESPONSIVE IMAGES & MEDIA
   ============================================ */

img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .hero-image,
    .feature-image {
        width: 100%;
        height: auto;
    }

    /* Video embeds */
    iframe,
    video {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
}

/* ============================================
   RESPONSIVE SPACING & LAYOUT
   ============================================ */

@media (max-width: 768px) {
    /* Reduce padding on mobile */
    .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-8 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .p-8 {
        padding: 1rem !important;
    }

    /* Adjust margins */
    .my-8 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .mb-8 {
        margin-bottom: 1.5rem !important;
    }

    /* Container adjustments */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ============================================
   DASHBOARD MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Dashboard welcome banner */
    .welcome-banner {
        padding: 1.5rem !important;
    }

    .welcome-banner h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Quick stats grid */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Action buttons */
    .action-buttons {
        flex-direction: column;
    }

    .action-buttons > * {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ============================================
   HIDE/SHOW UTILITIES
   ============================================ */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .md\:hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }

    .flex-mobile {
        display: flex !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Hardware acceleration for animations */
#adminSidebar,
#sidebarBackdrop,
.modal-content {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Smooth scrolling */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
    }

    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
@media (max-width: 768px) {
    button:focus,
    a:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    /* Skip to main content */
    .skip-to-main {
        position: absolute;
        top: -40px;
        left: 0;
        background: #3b82f6;
        color: white;
        padding: 8px;
        z-index: 100;
    }

    .skip-to-main:focus {
        top: 0;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    #adminSidebar,
    header,
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    .print-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    /* Optimize for landscape phone mode */
    .welcome-banner {
        padding: 1rem !important;
    }

    .stat-card {
        padding: 0.75rem !important;
    }

    /* Reduce vertical spacing in landscape */
    .py-6 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}

/* ============================================
   SAFE AREAS (iOS notch support)
   ============================================ */

@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    header,
    #adminSidebar {
        padding-top: max(0px, env(safe-area-inset-top));
    }

    .sticky-bottom,
    .modal-footer {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* ============================================
   LOADER & SKELETON SCREENS
   ============================================ */

@media (max-width: 768px) {
    .skeleton-loader {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s ease-in-out infinite;
    }

    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
}

/* ============================================
   TOAST/NOTIFICATION POSITIONING
   ============================================ */

@media (max-width: 768px) {
    .toast-container,
    .notification-container {
        left: 1rem !important;
        right: 1rem !important;
        bottom: 1rem !important;
        width: calc(100% - 2rem) !important;
    }

    .toast,
    .notification {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   CUSTOM SCROLLBAR FOR MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Thinner scrollbars on mobile */
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }
}

/* ============================================
   BOTTOM NAVIGATION (Optional for mobile)
   ============================================ */

@media (max-width: 768px) {
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e5e7eb;
        padding: 0.5rem 0;
        z-index: 50;
        display: flex;
        justify-content: space-around;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        color: #6b7280;
        font-size: 0.75rem;
        text-decoration: none;
        transition: color 0.2s;
    }

    .mobile-bottom-nav a.active {
        color: #3b82f6;
    }

    .mobile-bottom-nav a i {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    /* Add bottom padding to main content when using bottom nav */
    body.has-bottom-nav main {
        padding-bottom: 5rem;
    }
}