/* ========================================
   MOBILE & TABLET RESPONSIVE STYLES
   ======================================== */

/* ========== BASE RESPONSIVE UTILITIES ========== */

/* Mobile First: Base styles for mobile devices */
@media (max-width: 767px) {
  
  /* ===== HEADER ===== */
  header {
    padding: 0.75rem !important;
  }
  
  header .container {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  header h1 {
    font-size: 1.25rem !important;
    width: 100%;
    text-align: center;
  }
  
  /* User selector and controls in one row */
  header .flex.items-center.gap-4 {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem !important;
  }
  
  #user-select {
    width: 100%;
    font-size: 0.875rem;
  }
  
  /* Alert bell */
  header .relative button {
    padding: 0.5rem;
  }
  
  header .relative button i {
    font-size: 1.25rem !important;
  }
  
  /* XP Bar - Stack vertically on mobile */
  header .flex.items-center.gap-4 {
    width: 100%;
  }
  
  #level-badge {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
  }
  
  header .w-48 {
    width: 100% !important;
    max-width: 200px;
  }
  
  .xp-bar-container {
    height: 0.75rem !important;
  }
  
  #xp-text {
    font-size: 0.625rem !important;
  }
  
  /* ===== NAVIGATION TABS ===== */
  nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  nav .container {
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
    padding: 0.5rem !important;
    min-width: max-content;
  }
  
  nav button {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    white-space: nowrap;
    min-width: auto;
  }
  
  /* ===== MAIN CONTENT ===== */
  main.container {
    padding: 0.75rem !important;
  }
  
  /* Headings */
  h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  h3 {
    font-size: 1.125rem !important;
  }
  
  h4 {
    font-size: 1rem !important;
  }
  
  /* ===== GRID LAYOUTS ===== */
  
  /* Force single column on mobile */
  .grid.grid-cols-1.md\:grid-cols-2,
  .grid.grid-cols-1.md\:grid-cols-3,
  .grid.grid-cols-1.lg\:grid-cols-2,
  .grid.grid-cols-1.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  .grid.gap-4,
  .grid.gap-6 {
    gap: 0.75rem !important;
  }
  
  /* ===== CARDS ===== */
  .card,
  .metric-card,
  .quest-card,
  .tool-card,
  .best-module {
    padding: 1rem !important;
  }
  
  .card.p-6,
  .card.p-8 {
    padding: 1rem !important;
  }
  
  /* User selection cards */
  .user-card {
    padding: 1.25rem !important;
  }
  
  .user-card h3 {
    font-size: 1rem !important;
  }
  
  .user-card .text-5xl {
    font-size: 2.5rem !important;
  }
  
  /* ===== WEEKLY FOCUS PANEL ===== */
  #view-home .flex.justify-between.items-center {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
  
  #view-home .flex.items-center.gap-2 {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  #weekly-focus-date-label {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  .weekly-focus-item {
    padding: 0.75rem !important;
  }
  
  .weekly-focus-item .flex.items-start.gap-3 {
    gap: 0.5rem !important;
  }
  
  .weekly-focus-item .text-lg {
    font-size: 0.875rem !important;
  }
  
  .weekly-focus-item .text-sm {
    font-size: 0.75rem !important;
  }
  
  /* ===== ALERTS ===== */
  .alert-item {
    padding: 0.75rem !important;
  }
  
  .alert-item .flex.items-start {
    flex-direction: column;
    gap: 0.5rem !important;
  }
  
  .alert-item .text-lg {
    font-size: 0.875rem !important;
  }
  
  /* ===== QUESTS ===== */
  .quest-card .flex.justify-between {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .quest-card .text-2xl {
    font-size: 1.25rem !important;
  }
  
  /* Quest participants */
  .quest-card .flex.gap-2 {
    flex-wrap: wrap;
  }
  
  /* ===== LEADERBOARD ===== */
  .leaderboard-item {
    padding: 0.75rem !important;
  }
  
  .leaderboard-item .flex.items-center {
    gap: 0.5rem !important;
  }
  
  .leaderboard-item .text-3xl {
    font-size: 1.5rem !important;
  }
  
  .leaderboard-item .text-xl {
    font-size: 1rem !important;
  }
  
  /* ===== MAP VIEW ===== */
  #d3-map-container {
    height: 400px !important;
    overflow: hidden;
  }
  
  #d3-map-svg {
    width: 100%;
    height: 100%;
  }
  
  /* Map legend - Stack vertically */
  .map-legend-item {
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
  }
  
  /* ===== BEST SYSTEM ===== */
  .best-module {
    padding: 1rem !important;
  }
  
  .best-module h3 {
    font-size: 1rem !important;
  }
  
  /* ===== BUTTONS ===== */
  button {
    font-size: 0.875rem !important;
  }
  
  .btn-primary,
  .btn-success,
  .btn-danger {
    padding: 0.5rem 1rem !important;
  }
  
  /* Icon buttons */
  button i {
    font-size: 1rem !important;
  }
  
  /* ===== MODALS ===== */
  .modal {
    padding: 0.75rem !important;
  }
  
  .modal-content {
    max-width: 100% !important;
    margin: 1rem !important;
    padding: 1rem !important;
  }
  
  .modal-header h3 {
    font-size: 1.125rem !important;
  }
  
  .modal-body {
    padding: 1rem !important;
  }
  
  /* ===== FORMS ===== */
  input,
  select,
  textarea {
    font-size: 1rem !important; /* Prevents iOS zoom on focus */
    padding: 0.625rem !important;
  }
  
  label {
    font-size: 0.875rem !important;
  }
  
  /* ===== TABLES ===== */
  table {
    font-size: 0.75rem !important;
  }
  
  table th,
  table td {
    padding: 0.5rem 0.25rem !important;
  }
  
  /* ===== ANALYST TAB ===== */
  .analyst-tab-btn,
  .cp-view-btn {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
  }
  
  /* Market Intelligence sections */
  .mi-section {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .mi-section h4 {
    font-size: 0.875rem !important;
  }
  
  .mi-section p {
    font-size: 0.875rem !important;
  }
  
  /* ===== GAME MASTER PANEL ===== */
  .gm-panel {
    padding: 1rem !important;
  }
  
  /* ===== TOOLTIPS ===== */
  .tooltip {
    font-size: 0.625rem !important;
    padding: 0.375rem 0.625rem !important;
  }
  
  /* ===== SPACING UTILITIES ===== */
  .space-y-4 > * + * {
    margin-top: 0.75rem !important;
  }
  
  .space-y-6 > * + * {
    margin-top: 1rem !important;
  }
  
  .mb-6 {
    margin-bottom: 1rem !important;
  }
  
  .mb-8 {
    margin-bottom: 1.5rem !important;
  }
  
  /* ===== OVERFLOW & SCROLLING ===== */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Hide horizontal scrollbar but keep functionality */
  .overflow-x-auto::-webkit-scrollbar {
    height: 4px;
  }
}

/* ========== TABLET STYLES (768px - 1023px) ========== */

@media (min-width: 768px) and (max-width: 1023px) {
  
  /* ===== HEADER ===== */
  header .container {
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  header h1 {
    font-size: 1.5rem !important;
  }
  
  #user-select {
    min-width: 200px;
  }
  
  header .w-48 {
    width: 12rem !important;
  }
  
  /* ===== NAVIGATION ===== */
  nav button {
    font-size: 0.875rem !important;
    padding: 0.625rem 1rem !important;
  }
  
  /* ===== GRID LAYOUTS ===== */
  
  /* Two columns on tablet for 3-column grids */
  .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Keep 2 columns for 2-column grids */
  .grid.grid-cols-1.md\:grid-cols-2,
  .grid.grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .grid.gap-4 {
    gap: 1rem !important;
  }
  
  .grid.gap-6 {
    gap: 1.5rem !important;
  }
  
  /* ===== CARDS ===== */
  .card,
  .metric-card,
  .quest-card {
    padding: 1.25rem !important;
  }
  
  /* ===== MAP VIEW ===== */
  #d3-map-container {
    height: 500px !important;
  }
  
  /* ===== MODAL ===== */
  .modal-content {
    max-width: 85% !important;
    margin: 2rem auto !important;
  }
}

/* ========== LANDSCAPE MOBILE (PHONES IN LANDSCAPE) ========== */

@media (max-width: 767px) and (orientation: landscape) {
  
  /* Reduce header height in landscape */
  header {
    padding: 0.5rem !important;
  }
  
  header .container {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  header h1 {
    font-size: 1rem !important;
    width: auto;
  }
  
  /* Compact XP bar */
  header .w-48 {
    width: 8rem !important;
  }
  
  .xp-bar-container {
    height: 0.625rem !important;
  }
  
  /* Compact navigation */
  nav .container {
    padding: 0.375rem !important;
  }
  
  nav button {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.6875rem !important;
  }
  
  /* Reduce main content padding */
  main.container {
    padding: 0.5rem !important;
  }
  
  /* Two columns for cards in landscape */
  .grid.grid-cols-1.md\:grid-cols-2,
  .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ========== TOUCH IMPROVEMENTS ========== */

/* Larger touch targets for mobile */
@media (max-width: 1023px) {
  
  /* Minimum touch target size: 44x44px (Apple HIG) */
  button,
  a,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Comfortable spacing for touch */
  button:not(:last-child) {
    margin-right: 0.25rem;
  }
  
  /* Prevent text selection on buttons */
  button {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Smooth scrolling */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* ========== SAFE AREAS (iPhone X+, etc.) ========== */

@supports (padding: max(0px)) {
  header,
  nav,
  main {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  
  header {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  
  main {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

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

@media print {
  /* Hide navigation and interactive elements */
  header,
  nav,
  button,
  .modal {
    display: none !important;
  }
  
  /* Optimize for print */
  body {
    background: white !important;
    color: black !important;
  }
  
  .card {
    border: 1px solid #000 !important;
    page-break-inside: avoid;
  }
}