/**
 * LD-180IQ Plugin Responsive Styles
 * Mobile and tablet specific styles for the plugin
 */

/* ==========================================================================
   Tablet (768px and below)
   ========================================================================== */

@media (max-width: 768px) {
    /* Rankings Table */
    .ld-rankings-table th,
    .ld-rankings-table td {
        padding: 12px 6px;
        font-size: 13px;
    }

    .ld-rankings-table .ld-player-name {
        font-size: 14px;
    }

    .ld-rankings-table .rounded-circle {
        width: 32px !important;
        height: 32px !important;
    }

    .ld-rankings .d-flex.gap-3 {
        gap: 1rem !important;
        flex-direction: column;
    }

    .ld-rankings .form-select,
    .ld-rankings .form-control {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* General Layout */
    .ld-180iq .card-body {
        padding: 1rem;
    }

    .ld-180iq .card-header {
        padding: 1rem 1rem 0.75rem;
    }

    .ld-180iq .display-4 {
        font-size: 2rem;
    }

    /* Match Display */
    .ld-match-score .h2 {
        font-size: 1.5rem;
    }

    .ld-match-players .ld-player-info .fw-bold {
        font-size: 14px;
    }

    .ld-match-players .ld-player-avatar img,
    .ld-match-players .ld-player-avatar > div {
        width: 50px !important;
        height: 50px !important;
    }

    /* Table Responsive Helper */
    .ld-180iq .table-responsive::after {
        content: '← Scroll to see more →';
        position: absolute;
        bottom: -25px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.75rem;
        color: #64748b;
        white-space: nowrap;
        pointer-events: none;
    }

    .ld-180iq .card {
        position: relative;
    }

    /* Comparison Matrix */
    .ld-players-selector {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ld-vs-divider {
        order: 2;
    }

    .ld-player-slot {
        min-height: 160px; /* Match the selected player height on mobile */
    }

    .ld-player-slot[data-slot='player2'] {
        order: 3;
    }

    .ld-matrix-stat-bars {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ld-matrix-stat-bar {
        flex-direction: row !important;
    }

    .ld-modal {
        margin: 1rem;
        max-height: 90vh;
        max-width: 90vw;
    }

    .ld-modal-players-list {
        max-height: 300px;
    }

    .ld-trending-grid {
        grid-template-columns: 1fr;
    }

    .ld-comparison-skeleton .ld-skeleton-stat-bars {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ld-comparison-skeleton .ld-skeleton-stat-bar {
        flex-direction: row !important;
    }

    /* AJAX Search Loading States */
    .ld-ajax-search-loading {
        opacity: 0.7;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .ld-search-input.searching {
        background-color: var(--ld-bg-light);
    }

    /* Modal Content */
    .ld-modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .ld-selected-player {
        padding: 1rem;
        height: 160px; /* Slightly larger for mobile to accommodate content */
    }

    .ld-selected-avatar {
        width: 60px;
        height: 60px;
        margin-right: 1rem;
    }

    .ld-selected-name {
        font-size: 1.1rem;
    }

    .ld-selected-nickname {
        font-size: 0.8rem;
    }

    .ld-selected-country {
        font-size: 0.8rem;
    }

    .ld-empty-slot {
        padding: 1.5rem;
    }

    .ld-matrix-stat-bar {
        flex-direction: column;
        gap: 0.25rem;
        align-items: stretch;
    }

    .ld-comparison-stat-value {
        text-align: center;
    }
}

/* ==========================================================================
   Mobile (576px and below)
   ========================================================================== */

@media (max-width: 576px) {
    .ld-180iq .card-header {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ld-180iq .card-body {
        padding: 10px !important;
    }

    .ld-180iq p {
        font-size: 13px !important;
    }

    /* Player Index */
    .ld-180iq .ld-index-title h1 {
        font-size: 28px;
    }

    .ld-180iq .input-group {
        height: 35px !important;
    }

    .ld-players-sort,
    .ld-tournaments-sort,
    .ld-matches-sort {
        width: 50% !important;
    }

    .ld-players-sort form,
    .ld-tournaments-sort form,
    .ld-matches-sort form {
        height: 100% !important;
    }

    .ld-180iq .form-select {
        font-size: 13px !important;
        height: 100% !important;
    }

    .ld-180iq .form-control {
        font-size: 13px !important;
    }

    .ld-180iq .player-numbers,
    .ld-180iq .page-numbers {
        font-size: 13px !important;
    }

    .ld-180iq .btn.btn-pagination {
        font-size: 12px !important;
    }

    .ld-search-results-info p {
        font-size: 13px !important;
    }

    /* Player Single */
    .player-name-title .ld-player-display-name {
        font-size: 28px !important;
    }

    .ld-player-card-header {
        margin-bottom: 0;
    }

    .ld-180iq .card .card-header .card-title,
    .ld-180iq .card .card-header .ld-section-icon {
        font-size: 20px !important;
    }

    .ld-180iq h2 {
        font-size: 18px !important;
    }

    .ld-match-details .ld-match-tournament,
    .ld-match-meta .ld-match-date {
        font-size: 12px !important;
    }

    .back-btn {
        font-size: 12px !important;
    }

    .ld-180iq .ld-profile-content .ld-player-avatar {
        width: 100px;
        height: 100px;
    }

    /* Tournaments */

    .tournament-name-title .ld-tournament-display-name {
        font-size: 28px !important;
    }

    .round-matches .match-date {
        font-size: 12px !important;
    }

    .ld-match-card .ld-match-score {
        font-size: 16px;
    }

    .ld-180iq .badge {
        font-size: 10px;
    }

    .ld-matches-index .ld-player-info {
        font-size: 14px;
    }

    .match-name-title .ld-match-display-name {
        font-size: 24px !important;
    }

    .ld-180iq .ld-match-result-section h3 {
        font-size: 14px !important;
    }

    .ld-180iq .match-score {
        font-size: 24px !important;
    }

    .player-1-name > div > span.text-muted.small,
    .player-2-name > div > span.text-muted.small {
        font-size: 12px !important;
    }

    .col-score > div > div > div:nth-child(1) > div.text-muted.small.fw-normal,
    .col-score > div > div > div:nth-child(3) > div.text-muted.small.fw-normal {
        font-size: 12px !important;
    }

    /* Rankings Table */
    .ld-rankings-table {
        font-size: 12px;
    }

    .table-responsive .small {
        font-size: 14px !important;
    }

    .ld-rankings-table th {
        padding: 8px 4px;
        font-size: 10px;
    }

    .ld-rankings-table td {
        padding: 12px 4px;
    }

    /* General Table Styles */
    .ld-180iq .table td,
    .ld-180iq .table th {
        padding: 0.5rem 0.75rem;
    }

    .ld-180iq .fs-5 {
        font-size: 1rem !important;
    }

    /* Ensure minimum height for rows on mobile */
    .ld-180iq .ld-ranking-row {
        min-height: 60px;
    }

    /* Slightly reduce minimum table width on very small screens */
    .ld-180iq .table {
        min-width: 600px;
    }
}