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

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

/* Mobile First: Base styles for mobile devices */
@media (max-width: 767px) {
  
  /* ===== PREVENT HORIZONTAL OVERFLOW ===== */
  body, html {
    overflow-x: hidden !important;
  }
  
  main, main.container {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  [id^="view-"] {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  /* ===== 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;
  }
  
  /* ===== HOME VIEW MOBILE FIXES ===== */
  
  /* Welcome header - stack on mobile */
  #view-home > .flex.items-center.justify-between.mb-6 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
  }
  
  #view-home > .flex.items-center.justify-between.mb-6 h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  #view-home > .flex.items-center.justify-between.mb-6 #home-date {
    font-size: 0.75rem !important;
  }
  
  /* Stats cards - ensure 2x2 grid fits */
  #view-home .grid.grid-cols-2.md\:grid-cols-4 {
    gap: 0.5rem !important;
  }
  
  /* Home stat cards - compact for mobile */
  #view-home .home-stat-card {
    padding: 0.75rem !important;
    gap: 0.5rem !important;
  }
  
  #view-home .home-stat-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  
  #view-home .home-stat-icon i {
    font-size: 14px !important;
  }
  
  #view-home .home-stat-label {
    font-size: 9px !important;
  }
  
  #view-home .home-stat-value {
    font-size: 11px !important;
  }
  
  #view-home .home-stat-arrow {
    display: none !important;
  }
  
  /* Main content grid - single column on mobile */
  #view-home .grid.grid-cols-1.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  #view-home .lg\:col-span-2 {
    grid-column: span 1 !important;
  }
  
  /* Tools section card */
  #view-home .card.p-5 {
    padding: 0.75rem !important;
  }
  
  /* Tools header */
  #view-home .card.p-5 h3 {
    font-size: 0.875rem !important;
  }
  
  #view-home .card.p-5 h3 i {
    font-size: 1rem !important;
  }
  
  /* View All button */
  #view-home .card.p-5 .text-sm.text-teal-400 {
    font-size: 0.75rem !important;
  }
  
  /* Home tools grid - 2 columns on mobile */
  #home-tools-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  
  /* Home tool buttons - smaller for mobile */
  #home-tools-grid .home-tool-btn,
  #home-tools-grid button {
    padding: 0.5rem !important;
    min-height: 70px !important;
  }
  
  #home-tools-grid .tool-icon {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  #home-tools-grid .tool-name {
    font-size: 0.625rem !important;
    line-height: 1.2 !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 / ACTION ITEMS ===== */
  .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;
  }
  
  /* Action Items filter buttons container */
  #arena-tab-quests .flex.items-center.gap-2 {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  /* Action Items header */
  #arena-tab-quests .flex.items-center.gap-3 {
    gap: 0.5rem !important;
  }
  
  #arena-tab-quests .flex.items-center.gap-3 h3 {
    font-size: 1.25rem !important;
  }
  
  #arena-tab-quests .flex.items-center.gap-3 i {
    font-size: 1.25rem !important;
  }
  
  /* ===== 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));
  }
}

/* ========== MEETING MINUTES TOOL RESPONSIVE ========== */

/* Mobile: Stack sidebar above content */
@media (max-width: 767px) {
  #view-meeting-minutes .flex.gap-6 {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  #mm-sidebar {
    width: 100% !important;
    flex-shrink: unset !important;
  }
  
  #mm-sidebar .card {
    position: relative !important;
    top: auto !important;
  }
  
  /* Make sidebar navigation horizontal on mobile */
  #mm-sidebar .space-y-1 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  #mm-sidebar .space-y-1 button {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
  }
  
  /* Hide sidebar stats on mobile (they're duplicated in dashboard) */
  #mm-sidebar .space-y-2 {
    display: none !important;
  }
  
  #mm-sidebar .border-t.border-gray-700.my-4 {
    display: none !important;
  }
  
  /* Main content fills width */
  #mm-main-content {
    width: 100% !important;
    min-width: 100% !important;
  }
  
  /* Meeting Minutes Stats Cards */
  #mm-stats-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  #mm-stats-cards .card {
    padding: 0.75rem !important;
  }
  
  #mm-stats-cards .text-3xl {
    font-size: 1.5rem !important;
  }
  
  #mm-stats-cards .text-sm {
    font-size: 0.625rem !important;
  }
  
  /* Meeting list items */
  .mm-meeting-item {
    padding: 0.75rem !important;
  }
  
  .mm-meeting-item .flex.justify-between {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  /* Hide duplicate New Meeting button in dashboard (keep sidebar one) */
  #mm-tab-dashboard .flex.justify-between.items-center button {
    display: none !important;
  }
  
  /* Compact header in dashboard */
  #mm-tab-dashboard h2 {
    font-size: 1.25rem !important;
  }
}

/* Tablet: Narrower sidebar */
@media (min-width: 768px) and (max-width: 1023px) {
  #mm-sidebar {
    width: 200px !important;
  }
  
  #mm-sidebar .card {
    padding: 0.75rem !important;
  }
  
  #mm-sidebar .space-y-1 button {
    font-size: 0.75rem !important;
    padding: 0.5rem !important;
  }
  
  #mm-sidebar .space-y-1 button i {
    margin-right: 0.375rem !important;
  }
  
  #mm-stats-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ========== TOOLS WITH SIDEBAR PATTERN (Generic) ========== */

@media (max-width: 767px) {
  /* Any view with sidebar pattern */
  [id^="view-"] > .flex.gap-6,
  [id^="view-"] > .flex.gap-4 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  /* Fixed-width sidebars become full width */
  [id^="view-"] .w-64,
  [id^="view-"] .w-72,
  [id^="view-"] .w-80 {
    width: 100% !important;
  }
  
  /* Sticky sidebars become static */
  [id^="view-"] .sticky {
    position: relative !important;
    top: auto !important;
  }
}

/* ========== 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;
  }
}