/**
 * mobile.css - Comprehensive Mobile Styles for iGaming Monitor
 *
 * Architecture: Mobile-first with progressive enhancement
 * Target devices: 320px (iPhone SE) to 768px+ (tablets)
 * High-DPI support: Samsung S25 Ultra (1440x3120, ~500 PPI)
 *
 * Best Practices Applied:
 * - rem/em units for scalability
 * - CSS custom properties for breakpoints
 * - Minimum touch target: 44px (Apple HIG)
 * - Minimum font-size: 16px (prevents iOS zoom)
 * - clamp() for fluid typography
 * - Container queries where applicable
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  /* Breakpoints - for reference, use with @media */
  --bp-xs: 320px;
  --bp-sm: 375px;
  --bp-md: 414px;
  --bp-lg: 768px;
  --bp-xl: 1024px;

  /* Colors */
  --color-bg-primary: #0a0a0f;
  --color-bg-secondary: #111827;
  --color-bg-tertiary: #1f2937;
  --color-border: #1f2937;
  --color-border-light: #374151;

  --color-text-primary: #ffffff;
  --color-text-secondary: #e5e7eb;
  --color-text-tertiary: #9ca3af;
  --color-text-muted: #6b7280;

  --color-accent: #10b981;
  --color-accent-hover: #059669;
  --color-accent-light: rgba(16, 185, 129, 0.1);

  /* Typography - Fluid scaling */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;

  /* Minimum 16px to prevent iOS auto-zoom on focus */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);   /* 12-14px */
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);      /* 14-16px */
  --text-base: 1rem;                                       /* 16px - minimum */
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);      /* 18-20px */
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);     /* 20-24px */
  --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);         /* 24-32px */

  /* Spacing - based on 4px grid */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */

  /* Touch Targets */
  --touch-min: 44px;    /* Apple HIG minimum */
  --touch-safe: 48px;   /* Material Design comfortable */

  /* Border Radius */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */

  /* Z-index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 500;
  --z-toast: 600;

  /* Safe areas for notched devices */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ==========================================================================
   Base Mobile Reset
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Prevent text selection flash */
  -webkit-tap-highlight-color: transparent;
}

html {
  /* Prevent font size adjustment after orientation changes */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Smooth scrolling */
  scroll-behavior: smooth;

  /* Better font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);

  /* Prevent horizontal overflow */
  overflow-x: hidden;
  width: 100%;

  /* Pull-to-refresh prevention */
  overscroll-behavior-y: contain;
}

/* ==========================================================================
   Mobile Navigation Fixes - CRITICAL: Must override shared-nav.js inline styles
   ========================================================================== */

/* ALWAYS show bottom nav on mobile - override shared-nav.js display:none */
@media screen and (max-width: 768px) {
  /* Force bottom nav to be visible and fixed */
  .bottom-nav,
  #bottom-nav,
  nav .bottom-nav,
  #shared-nav .bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    justify-content: space-around !important;
    align-items: center !important;
    background: #0a0a0f !important;
    border-top: 1px solid #1f2937 !important;
    z-index: 9999 !important;
    padding: 8px 0 !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 64px !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3) !important;
  }

  /* Body MUST have padding for fixed nav */
  body,
  html body {
    padding-top: 60px !important;
    padding-bottom: 80px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Top navigation fixed */
  #shared-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9998 !important;
    background: #0a0a0f !important;
    border-bottom: 1px solid #1f2937 !important;
    min-height: 56px !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  .nav-container {
    padding: 0 12px !important;
    height: 56px !important;
  }

  /* Logo - prevent truncation */
  .nav-logo {
    font-size: 16px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .logo-text,
  .logo-accent {
    font-size: inherit !important;
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    gap: var(--space-1);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.625rem;
    font-weight: 500;
    min-height: var(--touch-min);
    transition: color 0.2s;
  }

  .bottom-nav-item.active {
    color: var(--color-accent);
  }

  .bottom-nav-item svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Hamburger menu enhancements */
  .nav-hamburger {
    display: flex !important;
    width: var(--touch-min);
    height: var(--touch-min);
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    z-index: calc(var(--z-fixed) + 1);
  }

  .nav-hamburger span {
    display: block;
    width: 1.25rem;
    height: 2px;
    background: var(--color-text-primary);
    transition: transform 0.3s, opacity 0.3s;
  }

  /* Mobile menu slide panel */
  .nav-links {
    position: fixed !important;
    top: 56px;
    left: 0;
    bottom: calc(64px + var(--safe-bottom));
    width: 280px;
    max-width: 85vw;
    background: var(--color-bg-primary);
    border-right: 1px solid var(--color-border);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: var(--z-fixed);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column !important;
    padding: 0 !important;
  }

  .nav-links.mobile-open {
    transform: translateX(0);
  }

  .nav-menu-items {
    flex-direction: column !important;
    padding: var(--space-4) 0;
  }

  .nav-link,
  .nav-dropdown-trigger {
    width: 100% !important;
    padding: var(--space-4) var(--space-5) !important;
    font-size: var(--text-base) !important;
    min-height: var(--touch-min);
    border-radius: 0 !important;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none;
    background: rgba(31, 41, 55, 0.5);
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .nav-dropdown-wrapper.open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-item {
    padding: var(--space-3) var(--space-5) var(--space-3) var(--space-8) !important;
    font-size: var(--text-base) !important;
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
  }

  .nav-actions {
    flex-direction: column !important;
    width: 100%;
    padding: var(--space-5) !important;
    margin-top: auto;
    border-top: 1px solid var(--color-border);
    gap: var(--space-3) !important;
    background: rgba(0, 0, 0, 0.3);
  }

  .lang-switch {
    width: 100%;
    justify-content: center;
  }

  .lang-btn {
    flex: 1;
    min-height: var(--touch-min);
    font-size: var(--text-base);
  }

  .user-menu {
    width: 100%;
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ==========================================================================
   Stats Cards - Mobile Fix (Critical for classification.html)
   ========================================================================== */

/* Override Tailwind grid-cols-6 on mobile */
@media (max-width: 768px) {
  /* Target Tailwind grid-cols-6 class */
  .grid-cols-6,
  [class*="grid-cols-6"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3) !important;
  }

  /* Single column on very small screens */
  @media (max-width: 375px) {
    .grid-cols-6,
    [class*="grid-cols-6"] {
      grid-template-columns: 1fr !important;
    }
  }
}

/* General stats grid for all pages */
.stats-grid,
.stats-cards {
  display: grid !important;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .stats-grid,
  .stats-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 375px) {
  .stats-grid,
  .stats-cards {
    grid-template-columns: 1fr !important;
  }
}

/* Stat card styling */
.stat-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-width: 0; /* Prevent overflow */
  overflow: hidden;
}

@media (max-width: 768px) {
  .stat-card {
    padding: var(--space-3);
  }

  .stat-label {
    font-size: var(--text-xs) !important;
    margin-bottom: var(--space-1);
  }

  .stat-value {
    font-size: var(--text-xl) !important;
    line-height: 1.2;
    word-break: break-all; /* Prevent numbers from overflowing */
  }

  .stat-sub {
    font-size: var(--text-xs) !important;
    margin-top: var(--space-1);
  }
}

@media (max-width: 375px) {
  .stat-card {
    padding: var(--space-2) var(--space-3);
  }

  .stat-value {
    font-size: var(--text-lg) !important;
  }
}

/* ==========================================================================
   Tab Navigation - Mobile Fix
   ========================================================================== */

/* Nav tabs that get truncated */
@media (max-width: 768px) {
  .nav-tab,
  [class*="nav-tab"],
  .tabs button,
  .tab {
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--text-sm) !important;
    min-height: var(--touch-min);
    white-space: nowrap;
  }

  /* Horizontal scroll for tabs */
  .flex.gap-4.mb-6.border-b,
  .tabs,
  [class*="tabs"] {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4) !important;
  }

  .flex.gap-4.mb-6.border-b::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
   Forms & Inputs - Touch-safe
   ========================================================================== */

input,
select,
textarea,
button,
.btn {
  font-family: var(--font-family);
  font-size: var(--text-base); /* 16px minimum - prevents iOS zoom */
  line-height: 1.5;
}

@media (max-width: 768px) {
  input,
  select,
  textarea {
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    width: 100%;

    /* iOS form styling reset */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
  }

  select {
    /* Add dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239CA3AF' d='M2 4l4 4 4-4H2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
  }

  button,
  .btn {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);

    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;

    transition: background-color 0.2s, transform 0.1s;
  }

  button:active,
  .btn:active {
    transform: scale(0.98);
  }

  /* Full-width buttons on mobile */
  .filters button,
  .control-panel button,
  .country-selector button {
    width: 100%;
  }
}

/* ==========================================================================
   Filters Section - Stack on Mobile
   ========================================================================== */

@media (max-width: 768px) {
  .filters,
  .country-selector,
  .control-panel {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
    padding: var(--space-3) !important;
  }

  .filter-group {
    width: 100%;
  }

  .filter-group label {
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
    display: block;
  }

  .filter-group select,
  .filter-group input {
    width: 100%;
    min-width: unset !important;
  }
}

/* ==========================================================================
   Tables - Horizontal Scroll with Sticky Column
   ========================================================================== */

@media (max-width: 768px) {
  /* Table container */
  .table-wrapper,
  .table-scroll,
  [style*="overflow-x: auto"],
  div:has(> table) {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-3));
    padding: 0 var(--space-3);
  }

  /* Scroll shadow indicator */
  .table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2rem;
    background: linear-gradient(to left, var(--color-bg-secondary), transparent);
    pointer-events: none;
    z-index: 5;
  }

  .table-wrapper.scrolled-end::after {
    opacity: 0;
  }

  /* Scroll hint */
  .scroll-hint {
    display: block !important;
    text-align: center;
    padding: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: rgba(31, 41, 55, 0.5);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
  }

  /* Table styling */
  table {
    min-width: 600px;
    font-size: var(--text-sm);
  }

  th, td {
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
  }

  th {
    font-size: var(--text-xs);
    background: var(--color-bg-tertiary);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  /* Sticky first column */
  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    z-index: 11;
    background: var(--color-bg-secondary);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  }

  th:first-child {
    z-index: 12;
    background: var(--color-bg-tertiary);
  }

  tr:hover td:first-child {
    background: rgba(31, 41, 55, 0.9);
  }
}

/* ==========================================================================
   Cards - Compact Mobile Styling
   ========================================================================== */

@media (max-width: 768px) {
  .card,
  .parsing-card {
    padding: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
    border-radius: var(--radius-md);
  }

  .card-title {
    font-size: var(--text-base) !important;
    margin-bottom: var(--space-3) !important;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

/* ==========================================================================
   Typography - Mobile Adjustments
   ========================================================================== */

@media (max-width: 768px) {
  h1 {
    font-size: var(--text-xl) !important;
    margin-bottom: var(--space-2);
    line-height: 1.3;
  }

  h2 {
    font-size: var(--text-lg) !important;
  }

  h3 {
    font-size: var(--text-base) !important;
  }

  .subtitle {
    font-size: var(--text-sm) !important;
    margin-bottom: var(--space-4) !important;
  }

  /* Page header */
  .page-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--space-2);
  }
}

/* ==========================================================================
   Grids - Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
  /* Two column grids */
  .grid-2,
  .two-cols,
  .parsing-grid,
  [class*="grid-template-columns: 1fr 1fr"],
  [class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }

  /* Main grid layouts */
  .main-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }

  /* Queue stats in parsing.html */
  .queue-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-2) !important;
  }

  .queue-stat {
    padding: var(--space-3) !important;
  }

  .queue-stat .value {
    font-size: var(--text-lg) !important;
  }

  .queue-stat .label {
    font-size: var(--text-xs) !important;
  }
}

@media (max-width: 375px) {
  .queue-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Modals - Mobile Full-screen
   ========================================================================== */

@media (max-width: 768px) {
  .modal-overlay,
  [class*="modal"] {
    padding: var(--space-3);
  }

  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 2 * var(--space-3));
    margin: 0 !important;
    border-radius: var(--radius-lg) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-title {
    font-size: var(--text-lg) !important;
  }

  .modal-actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .modal-actions button {
    width: 100%;
  }
}

/* ==========================================================================
   Charts - Mobile Sizing
   ========================================================================== */

@media (max-width: 768px) {
  .chart-container,
  [class*="chart"] canvas {
    height: 200px !important;
    min-height: 180px;
  }
}

@media (max-width: 375px) {
  .chart-container,
  [class*="chart"] canvas {
    height: 160px !important;
  }
}

/* ==========================================================================
   Landscape Mode Optimizations
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
  body {
    padding-bottom: 56px !important; /* Smaller bottom nav in landscape */
  }

  .bottom-nav {
    min-height: 48px;
  }

  .bottom-nav-item {
    min-height: 40px;
  }

  .bottom-nav-item span {
    display: none; /* Hide labels in landscape */
  }

  .stat-card {
    padding: var(--space-2) !important;
  }

  .stat-value {
    font-size: var(--text-lg) !important;
  }
}

/* ==========================================================================
   Empty States
   ========================================================================== */

@media (max-width: 768px) {
  .empty-state,
  .empty-state-enhanced {
    padding: var(--space-6) var(--space-4) !important;
  }

  .empty-state-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-3);
  }

  .empty-state-title {
    font-size: var(--text-base) !important;
  }

  .empty-state-description {
    font-size: var(--text-sm) !important;
  }
}

/* ==========================================================================
   Badges & Tags
   ========================================================================== */

@media (max-width: 768px) {
  .badge,
  .status-badge,
  .license-badge,
  [class*="badge"] {
    font-size: var(--text-xs) !important;
    padding: 0.125rem 0.5rem !important;
    white-space: nowrap;
  }

  .position-badge {
    min-width: 2rem;
    font-size: var(--text-xs) !important;
  }
}

/* ==========================================================================
   Logs Container
   ========================================================================== */

@media (max-width: 768px) {
  .logs-container,
  .prompt-container {
    font-size: 0.6875rem !important; /* 11px */
    padding: var(--space-3) !important;
    max-height: 300px;
  }

  .log-line {
    padding: 0.125rem 0;
    word-break: break-word;
  }
}

/* ==========================================================================
   Classification Page Specific Fixes
   ========================================================================== */

/* Fix for Tailwind classes on classification.html */
@media (max-width: 768px) {
  /* Stats grid with 6 columns -> 2 columns */
  .grid.grid-cols-6 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-2) !important;
  }

  .grid.grid-cols-6 .stat-card {
    padding: var(--space-2) var(--space-3) !important;
  }

  .grid.grid-cols-6 .stat-card .text-2xl {
    font-size: var(--text-lg) !important;
    word-break: break-all;
  }

  .grid.grid-cols-6 .stat-card .text-xs {
    font-size: 0.625rem !important;
  }

  /* Distribution charts */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Container padding */
  .container.mx-auto.px-4 {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }

  /* Header flex adjustments */
  .flex.items-center.justify-between {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--space-2);
  }

  /* Actions row */
  .flex.gap-4.mb-6:has(input, button) {
    flex-direction: column;
    gap: var(--space-2) !important;
  }

  .flex.gap-4.mb-6 input,
  .flex.gap-4.mb-6 button {
    width: 100%;
  }
}

@media (max-width: 375px) {
  .grid.grid-cols-6 {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
  :root {
    --color-border: #4b5563;
    --color-border-light: #6b7280;
  }

  .card,
  .stat-card,
  button,
  input,
  select {
    border-width: 2px;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  body {
    padding: 0 !important;
    background: white;
    color: black;
  }

  #shared-nav,
  .bottom-nav,
  .nav-hamburger,
  .scroll-hint {
    display: none !important;
  }

  .card,
  .stat-card {
    break-inside: avoid;
    border: 1px solid #ccc;
  }
}