/* Mobile Responsive Styles */

/* General mobile fixes */
@media (max-width: 768px) {
    /* Navbar */
    .navbar {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .navbar h1 {
        font-size: 1.25rem;
        text-align: center;
    }

    .navbar-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .navbar-actions .user-info {
        width: 100%;
        text-align: center;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        margin-bottom: 0.25rem;
    }

    .navbar-actions .btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    .navbar-actions form {
        display: inline;
    }

    /* Theme toggle - hide text on mobile */
    .theme-toggle .theme-toggle-text {
        display: none;
    }

    .theme-toggle {
        padding: 0.4rem 0.6rem;
    }

    /* Container */
    .container {
        padding: 1rem;
    }

    /* Search section */
    .search-section {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .search-wrapper {
        flex-direction: column;
        gap: 0.75rem;
    }

    .search-wrapper input {
        min-width: 100%;
    }

    .search-wrapper form {
        flex-direction: column;
        width: 100%;
    }

    .search-btn {
        width: 100%;
    }

    .advanced-search-link {
        text-align: center;
        display: block;
        margin-top: 0.5rem;
    }

    /* Sort options */
    .sort-options {
        flex-direction: column;
        gap: 0.75rem;
    }

    .sort-links {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .sort-links a {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    /* Gallery */
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }

    .gallery-item-image {
        height: 180px;
    }

    .gallery-item-name {
        font-size: 0.9rem;
        padding: 0.75rem 0.5rem 0.5rem;
    }

    .gallery-item-info {
        padding: 0.75rem;
    }

    .gallery-item-visits {
        font-size: 0.8rem;
    }

    .gallery-item-link {
        font-size: 0.85rem;
    }

    /* Pagination */
    .pagination-wrapper {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .pagination-info {
        text-align: center;
        width: 100%;
    }

    .pagination-controls {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .pagination-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }

    .per-page-selector {
        justify-content: center;
    }

    /* Cards */
    .card, .admin-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    /* Forms */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

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

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.65rem;
        font-size: 0.95rem;
    }

    .form-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-actions .btn {
        width: 100%;
        text-align: center;
    }

    /* Buttons */
    .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .btn-sm {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Tables */
    .data-table {
        font-size: 0.85rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.5rem;
    }

    .data-table .actions-cell {
        white-space: nowrap;
    }

    /* Make tables scrollable on mobile */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modals */
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 1rem;
        padding: 1.25rem;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-content h3 {
        font-size: 1.1rem;
    }

    /* Alerts */
    .alert {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    /* Tabs */
    .tabs {
        flex-wrap: wrap;
    }

    .tab-btn {
        flex: 1;
        min-width: 45%;
        text-align: center;
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    /* Submission items */
    .submission-item {
        padding: 0.75rem;
    }

    .submission-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .submission-badges {
        flex-wrap: wrap;
    }

    .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    /* Empty states */
    .empty-state {
        padding: 2rem 1rem;
    }

    .empty-state h2,
    .empty-state h3 {
        font-size: 1.1rem;
    }

    /* Player view specific */
    .player-header {
        flex-direction: column;
        gap: 1rem;
    }

    .player-photo {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }

    .player-info {
        text-align: center;
    }

    .player-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .photo-gallery {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 0.5rem;
    }

    .visit-card {
        padding: 1rem;
    }

    .visit-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .visit-details {
        grid-template-columns: 1fr;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .navbar h1 {
        font-size: 1.1rem;
    }

    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .gallery-item-image {
        height: 150px;
    }

    .gallery-item-name {
        font-size: 0.8rem;
    }

    .btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    .container {
        padding: 0.75rem;
    }

    .sort-links a {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Hide less important nav items on very small screens */
    .navbar-actions .user-role {
        display: none;
    }
}

/* Landscape phone */
@media (max-width: 768px) and (orientation: landscape) {
    .navbar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .navbar-actions {
        flex: 1;
        justify-content: flex-end;
    }

    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* ============================================
   ADMIN PANEL MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {
    /* Admin Header */
    .admin-header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        text-align: center;
    }

    .admin-header h1 {
        font-size: 1.25rem;
    }

    .admin-header-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .admin-header-actions span {
        width: 100%;
        text-align: center;
        font-size: 0.85rem;
    }

    .admin-header-actions a,
    .admin-header-actions button {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    /* Admin Navigation */
    .admin-nav {
        padding: 0 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .admin-nav a {
        padding: 0.75rem 0.75rem;
        font-size: 0.8rem;
        min-width: max-content;
    }

    .nav-badge {
        font-size: 0.65rem;
        padding: 0.1rem 0.4rem;
    }

    /* Admin Content */
    .admin-content {
        padding: 1rem;
    }

    /* Page Header */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .page-header h2 {
        text-align: center;
        font-size: 1.25rem;
    }

    .page-header .btn {
        width: 100%;
        text-align: center;
    }

    /* Filter Form */
    .filter-form {
        flex-direction: column;
        gap: 0.75rem;
    }

    .filter-form .form-group {
        width: 100%;
    }

    .filter-search {
        min-width: 100%;
    }

    .filter-select {
        min-width: 100%;
    }

    .filter-buttons {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .filter-buttons .btn {
        width: 100%;
        text-align: center;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-card h3 {
        font-size: 0.75rem;
    }

    .stat-card .stat-value {
        font-size: 1.5rem;
    }

    /* Table Responsive */
    .table-responsive {
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .table-responsive .data-table {
        min-width: 700px;
    }

    .data-table th,
    .data-table td {
        padding: 0.5rem 0.4rem;
        font-size: 0.8rem;
    }

    .data-table .actions-cell {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .data-table .actions-cell .btn {
        width: 100%;
        text-align: center;
        margin-right: 0;
    }

    /* Role and Status badges */
    .role-badge,
    .status-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    /* Quick Actions in Dashboard */
    .admin-card > div[style*="flex-direction: column"] {
        gap: 0.5rem !important;
    }

    .admin-card > div[style*="flex-direction: column"] .btn {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }

    /* Two column layout on admin dashboard */
    div[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }

    /* User edit form */
    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* Pagination in admin */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination a,
    .pagination span {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    /* Extra small admin styles */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .admin-nav a {
        padding: 0.6rem 0.5rem;
        font-size: 0.75rem;
    }

    .admin-header h1 {
        font-size: 1.1rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.4rem 0.3rem;
        font-size: 0.75rem;
    }

    .btn-sm {
        padding: 0.25rem 0.4rem;
        font-size: 0.7rem;
    }
}