/**
 * 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: 32px !important;
    height: 32px !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: 0.875rem !important;
  }

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

  .ld-180iq .form-select {
    font-size: 0.875rem !important;
  }

  .ld-180iq .form-control {
    font-size: 0.875rem !important;
  }

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

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

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

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

  .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: 28px !important;
  }

  .ld-180iq .ld-match-result-section h3 {
    font-size: 16px !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;
  }
}