/**
 * mobile-fixes.css - RESPONSIVE MOBILE FIXES
 *
 * Add this to your main CSS file or include it as a separate stylesheet
 * Include AFTER your main styles to ensure overrides work correctly
 *
 * <link rel="stylesheet" href="/static/css/mobile-fixes.css">
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE MOBILE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure proper viewport scaling */
@viewport {
  width: device-width;
  zoom: 1.0;
}

/* Prevent text size adjustment on mobile browsers */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Improve tap target sizes (iOS/Android accessibility) */
button:not(.nav-hamburger),
a:not(.nav-link):not(.logo-link),
input[type="button"],
input[type="submit"],
.btn:not(.nav-hamburger),
.clickable {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation; /* Faster click response */
}

/* Nav links and hamburger need their own touch target without size constraints */
.nav-link,
.logo-link,
.nav-hamburger {
  touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET & MOBILE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet (iPad, Android tablets) */
@media (max-width: 1024px) {
  /* Reduce padding on container elements */
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Make navigation more compact */
  nav {
    padding: 12px 20px;
  }

  /* Adjust font sizes */
  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 20px;
  }
}

/* Large phones and small tablets */
@media (max-width: 768px) {
  /* ── Chart Container ────────────────────────────────────────────────── */

  /* Chart container: fixed pixel height so liveChart.js can read clientHeight */
  .chart-container {
    height: 300px !important;
    padding: 0 !important;
    margin-bottom: 16px;
    overflow: hidden;
  }

  /* The inner chart div must fill its container fully */
  #liveChart,
  #historicalChart {
    width: 100% !important;
    height: 100% !important;
  }

  /* ── Chart Info Bar ─────────────────────────────────────────────────── */

  #liveInfoBar,
  .info-bar {
    flex-wrap: wrap;
    font-size: 11px;
    gap: 8px;
    padding: 8px 12px;
  }

  #liveInfoBar span {
    margin: 0 4px;
  }

  /* Stack price chips vertically on very small screens */
  #liveInfoBar > span:not(:first-child):not(:nth-child(2)) {
    flex: 1 1 auto;
  }

  /* ── Chart Controls ─────────────────────────────────────────────────── */

  .chart-controls,
  .timeframe-selector,
  .symbol-selector {
    flex-direction: column;
    gap: 8px;
  }

  .chart-controls button,
  .timeframe-selector button {
    width: 100%;
    margin: 2px 0;
  }

  /* Navigation handled by styles.css navbar system */

  /* ── Tables ─────────────────────────────────────────────────────────── */

  table {
    font-size: 13px;
  }

  th,
  td {
    padding: 8px 4px;
  }

  /* Hide less important columns on mobile */
  .hide-mobile {
    display: none !important;
  }

  /* Make tables horizontally scrollable */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Forms ──────────────────────────────────────────────────────────── */

  input,
  select,
  textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 12px;
  }

  .form-group {
    margin-bottom: 16px;
  }

  label {
    margin-bottom: 6px;
    font-size: 14px;
  }

  /* ── Buttons ────────────────────────────────────────────────────────── */

  /* Note: .btn inside .nav-actions and .nav-hamburger are excluded */
  .btn:not(.nav-hamburger):not(.nav-actions .btn) {
    padding: 12px 20px;
    font-size: 15px;
  }

  .btn-group {
    flex-direction: column;
  }

  .btn-group button {
    margin: 4px 0;
  }

  /* ── Modal/Dialog ───────────────────────────────────────────────────── */

  .modal,
  .dialog {
    width: 95vw;
    max-width: 95vw;
    margin: 10px auto;
  }

  .modal-content {
    padding: 16px;
  }

  /* ── Pattern Cards ──────────────────────────────────────────────────── */

  .pattern-card,
  .signal-card {
    padding: 12px;
    margin: 8px 0;
  }

  .pattern-card img {
    max-width: 100%;
    height: auto;
  }

  /* ── Dashboard Widgets ──────────────────────────────────────────────── */

  .dashboard-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 12px;
  }

  .widget {
    padding: 16px;
  }

  /* ── Header/Title ───────────────────────────────────────────────────── */

  #liveChartTitle,
  .page-title {
    font-size: 18px;
    padding: 8px 0;
  }
}

/* Small phones (iPhone SE, Galaxy S8, etc.) */
@media (max-width: 480px) {

  /* ── Further reduce chart height ────────────────────────────────────── */

  .chart-container {
    height: 260px !important;
  }

  /* ── Ultra-compact info bar ─────────────────────────────────────────── */

  #liveInfoBar {
    font-size: 10px;
    padding: 6px 8px;
  }

  #liveInfoBar span {
    margin: 0 2px;
  }

  /* ── Smaller text throughout ────────────────────────────────────────── */

  body {
    font-size: 14px;
  }

  h1 {
    font-size: 22px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 16px;
  }

  /* ── Compact controls ───────────────────────────────────────────────── */

  .chart-controls button {
    padding: 10px;
    font-size: 13px;
  }

  /* ── Reduce padding everywhere ──────────────────────────────────────── */

  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  section,
  article {
    padding: 12px;
    margin-bottom: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDSCAPE ORIENTATION FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
  /* When phone is in landscape, reduce vertical padding */

  #liveChart {
    height: 200px !important;
  }

  header,
  nav {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .modal {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH-SPECIFIC IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Improve scrolling performance */
.scrollable {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* Remove default tap highlight (use custom instead) */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Custom tap highlight for interactive elements */
button:active,
a:active,
.clickable:active {
  opacity: 0.7;
  transform: scale(0.98);
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Prevent long-press menu on images and links */
img,
a {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection in content areas */
p,
span,
div.content {
  -webkit-user-select: text;
  user-select: text;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Focus indicators for keyboard navigation (still important on some Android tablets) */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}

/* Ensure sufficient color contrast on mobile screens (often viewed in bright sunlight) */
@media (max-width: 768px) {
  .text-muted,
  .secondary-text {
    color: #a1a1aa !important; /* Slightly darker for better visibility */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Use hardware acceleration for smoother animations */
.animated,
.transition {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT OPTIMIZATIONS (Bonus: Good for "Save as PDF" feature)
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  /* Hide unnecessary elements when printing */
  nav,
  .chart-controls,
  button,
  .no-print {
    display: none !important;
  }

  /* Ensure charts print well */
  #liveChart,
  canvas {
    max-width: 100%;
    height: auto !important;
  }

  /* Prevent page breaks in important sections */
  .pattern-card,
  .signal-card {
    page-break-inside: avoid;
  }
}