/**
 * VITALE1913 - Mobile-specific styles
 * This file contains mobile-specific enhancements to ensure optimal display on mobile devices
 */

/* Responsive utility classes */
.d-md-none {
    display: flex !important;
}

@media (min-width: 768px) {
    .d-md-none {
        display: none !important;
    }
}

/* Navbar buttons for mobile */
.navbar-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .navbar-buttons {
        gap: 5px;
    }
    
    .btn-login, .nav-link-logout {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }
    
    .navbar-floating-pill {
        padding: 6px 12px !important;
    }
}

/* Mobile-friendly tabs */
.mobile-friendly-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.mobile-friendly-tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.mobile-friendly-tabs .nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
}

.mobile-friendly-tabs .nav-link span {
    margin-left: 5px;
}

/* Homepage Mobile Styles */
@media (max-width: 768px) {
    /* Homepage Hero Section */
    .homepage-hero {
        min-height: 60vh;
        padding: 2rem 1rem;
    }
    
    .homepage-title {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem;
    }
    
    .homepage-subtitle {
        font-size: 1rem !important;
        margin-bottom: 2rem;
        letter-spacing: 2px;
    }
    
    .btn-nfc-auth {
        width: 100%;
        max-width: 280px;
        text-align: center;
        margin: 0 auto;
        display: block;
    }
    
    /* Feature Sections */
    .simplified-value-prop {
        padding: 2rem 1rem;
    }
    
    .simplified-value-prop h2 {
        font-size: 1.8rem !important;
    }
    
    .feature-box {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .feature-title {
        font-size: 1.3rem !important;
    }
    
    .section {
        padding: 2rem 1rem;
    }
    
    .section h2 {
        font-size: 1.8rem !important;
    }
    
    /* Center alignment for mobile */
    .text-center-mobile {
        text-align: center !important;
    }
    
    /* Navigation adjustments */
    .navbar-floating-pill {
        padding: 0.5rem 1rem;
        border-radius: 30px;
    }
    
    .navbar-logo img.custom-logo {
        height: 30px;
    }
    
    .btn-login {
        padding: 0.3rem 1rem !important;
        font-size: 0.8rem !important;
    }
}

/* Small Mobile Screens */
@media (max-width: 576px) {
    .mobile-friendly-tabs .nav-link span {
        display: none;
    }
    
    .mobile-friendly-tabs .nav-link {
        padding: 0.5rem;
    }
    
    /* Homepage adjustments */
    .homepage-title {
        font-size: 2rem !important;
    }
    
    .homepage-subtitle {
        font-size: 0.9rem !important;
        letter-spacing: 1px;
    }
    
    /* Feature section adjustments */
    .feature-box {
        padding: 1.2rem;
    }
    
    .feature-icon svg {
        width: 48px;
        height: 48px;
    }
    
    /* Further reduce navigation size */
    .navbar-sticky-wrapper {
        top: 0.5rem;
    }
    
    .navbar-logo img.custom-logo {
        height: 25px;
    }

    .dashboard-container {
        padding-left: 0;
        padding-right: 0;
    }
    .diamond-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
    .diamond-card {
        width: 100% !important;
        max-width: 350px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 1.5rem !important;
        box-sizing: border-box !important;
    }
}

/* Mobile-friendly UI elements */
@media (max-width: 768px) {
    /* Touch-friendly styles */
    .touch-active {
        opacity: 0.7;
    }

    .touch-hover {
        transform: scale(1.02);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }

    /* Improved touch targets for better mobile UX */
    button, 
    .btn, 
    a.nav-link, 
    .card-header {
        min-height: 44px;
        min-width: 44px;
    }
}

    /* Logo display */
    .navbar-logo {
        z-index: 1010;
    }

/* Admin Panel Mobile Optimizations */
@media (max-width: 768px) {
    /* Admin dashboard stats cards */
    .stat-card {
        margin-bottom: 1.5rem;
    }
    
    /* Admin navigation fixes */
    .admin-nav {
        margin-bottom: 1rem;
        padding: 0.5rem 0;
    }
    
    .admin-nav-list {
        padding-bottom: 5px;
    }
    
    .admin-nav-item {
        margin-right: 1rem;
    }
    
    /* Admin data tables */
    .admin-table {
        font-size: 0.9rem;
    }
    
    .admin-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1.5rem;
    }
    
    /* Prevent horizontal scrolling in admin panels */
    .admin-container {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Form layouts for mobile */
    .admin-form .form-group {
        margin-bottom: 1.2rem;
    }
    
    /* Card layouts */
    .admin-card {
        margin-bottom: 1.5rem;
    }
    
    .admin-header {
        padding: 1rem 0;
        margin-bottom: 1rem;
    }
    
    .admin-title {
        font-size: 1.5rem;
    }
}

/* Improved mobile styles for diamond details */
@media (max-width: 576px) {
    /* Hide scrollbars but allow scrolling */
    .diamond-details-tabs .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    
    .diamond-details-tabs .nav-tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge */
    }
    
    .diamond-details-tabs .nav-item {
        flex: 0 0 auto;
    }
    
    .diamond-details-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .diamond-details-tabs .nav-link svg {
        width: 14px;
        height: 14px;
    }
    
    .diamond-details-tabs .tab-content {
        padding: 1rem;
    }
    
    /* Fix diamond cards for mobile */
    .diamond-card {
        margin-bottom: 1.5rem;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .diamond-image-container,
    .diamond-placeholder {
        height: 180px;
    }
    
    .diamond-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 15px;
    }
    
    /* Dashboard specific mobile styles */
    .dashboard-container {
        padding: 1rem;
    }
    
    .dashboard-title {
        font-size: 1.8rem !important;
        text-align: center;
    }
    
    .search-filter-bar {
        padding: 0.8rem;
        background-color: #f8f9fa;
        border-radius: 8px;
    }
    
    .search-filter-bar form {
        flex-direction: column;
    }
    
    .search-input-container,
    .filter-select-container {
        width: 100%;
    }
    
    .filter-select-container {
        margin: 0.5rem 0;
    }
    
    .search-button-container {
        width: 100%;
    }
    
    .search-filter-bar .form-control,
    .search-filter-bar .form-select {
        width: 100%;
        margin-bottom: 0.5rem;
        height: 44px;
    }
    
    /* Optimize for small mobile */
    @media (max-width: 576px) {
        .search-filter-bar {
            padding: 0.6rem;
        }
        
        .search-filter-bar .form-control {
            font-size: 14px !important;
        }
        
        .search-filter-bar .btn {
            height: 44px;
        }
    }
    
    /* Restore horizontal layout on larger screens */
    @media (min-width: 768px) {
        .search-input-container {
            flex: 1;
            margin-right: 0.5rem;
        }
        
        .filter-select-container {
            width: auto;
            margin: 0 0.5rem;
        }
        
        .search-button-container {
            width: auto;
        }
    }
    
    /* Center buttons in cards */
    .diamond-actions {
        display: flex;
        justify-content: center;
    }
    
    .btn-action {
        width: 100%;
        max-width: 200px;
        justify-content: center;
    }
    
    /* Full-width buttons for mobile */
    .mobile-full-width {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        text-align: center;
    }
    
    /* Adjust text sizes for better readability */
    .quality-level {
        font-size: 0.7rem;
    }
    
    .detail-label {
        font-size: 0.85rem;
    }
    
    .detail-value {
        font-size: 1rem;
    }
    
    /* Fix small UI elements on mobile */
    .view-toggle-btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .view-toggle-btn svg {
        width: 14px;
        height: 14px;
    }
    
    /* Diamond zoom improvements for mobile */
    .diamond-zoom-content {
        width: 95%;
    }
    
    .zoom-close-btn {
        top: -30px;
        width: 30px;
        height: 30px;
    }
    
    /* Mobile pagination styles */
    .mobile-pagination {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .mobile-pagination .page-numbers-container {
        display: flex;
        overflow-x: auto;
        justify-content: center;
        max-width: 60%;
        margin: 0 0.25rem;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    
    .mobile-pagination .page-numbers-container::-webkit-scrollbar {
        display: none;  /* Chrome, Safari, Opera */
    }
    
    .mobile-pagination .page-link {
        padding: 0.5rem 0.75rem;
        min-width: 42px;
        text-align: center;
    }
    
    .mobile-pagination .prev-page .page-link,
    .mobile-pagination .next-page .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-pagination .page-text {
        display: none;
    }
    
    @media (min-width: 576px) {
        .mobile-pagination .page-text {
            display: inline;
            margin: 0 0.25rem;
        }
        
        .mobile-pagination .page-link {
            min-width: auto;
        }
    }
    
    /* Add bottom padding to avoid content hidden behind fixed elements */
    main {
        padding-bottom: 2rem;
    }

    /* Fix tables on mobile */
    .table-responsive {
        border: none;
    }

    .admin-table th {
        white-space: nowrap;
    }

    /* Improve form layout on mobile */
    .form-row {
        display: block;
    }

    .form-col {
        width: 100%;
        padding: 0;
        margin-bottom: 1rem;
    }

    /* Mobile-friendly forms */
    input, select, textarea {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }

    .form-group label {
        font-size: 0.9rem;
    }

    /* Search and filter controls on mobile */
    .diamond-filter-form .form-group {
        margin-bottom: 0.75rem;
    }

    .diamond-filter-form .btn {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* Enhanced mobile form feedback */
    .invalid-feedback {
        font-size: 0.85rem;
        padding: 0.25rem 0;
    }

    /* Fix diamond quality visualization on mobile */
    .diamond-quality-chart {
        padding: 1rem;
    }

    .diamond-diagram {
        padding: 1rem;
    }

    .diamond-diagram-container {
        transform: scale(0.9);
    }
}

/* Ensure good display on very small mobile screens */
@media (max-width: 375px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .diamond-card {
        max-width: 98vw !important;
        margin-bottom: 1rem !important;
    }
    
    .diamond-image-container {
        height: 160px;
    }
    
    .admin-nav-item {
        font-size: 0.9rem;
    }

    .diamond-grid {
        gap: 10px;
    }

    /* Ensure diamond cards display well on small screens */
    .diamond-title {
        font-size: 1rem;
    }

    .spec-label, .spec-value {
        font-size: 0.8rem;
    }

    /* Ensure modals are usable on small screens */
    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        padding: 0.75rem;
    }
}