/* ============================================
   INVESTHINK - Mobile Responsive Styles
   Comprehensive mobile optimization for all devices
   ============================================ */

/* ========== LANDING PAGE RESPONSIVE ========== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  #landing-content .hero-title {
    font-size: 48px;
    line-height: 1.2;
  }

  #landing-content .hero-subtitle {
    font-size: 18px;
  }

  #landing-content .feature-item {
    gap: 60px;
  }

  #landing-content .feature-title {
    font-size: 32px;
  }

  #landing-content .feature-description {
    font-size: 16px;
  }

  #landing-content .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  /* Hide desktop navigation */
  #landing-content .nav-menu {
    display: none !important;
  }

  #landing-content .nav-actions {
    display: none !important;
  }

  /* Hero Section */
  #landing-content .hero {
    padding: 100px 0 60px;
  }

  #landing-content .hero-title {
    font-size: 36px;
    line-height: 1.15;
    margin-bottom: 20px;
  }

  #landing-content .hero-subtitle {
    font-size: 16px;
    margin-bottom: 30px;
    padding: 0 10px;
  }

  #landing-content .hero::before {
    width: 500px;
    height: 500px;
  }

  /* Buttons */
  #landing-content .btn-primary,
  #landing-content .btn-secondary {
    padding: 10px 24px;
    font-size: 14px;
  }

  /* Chat Window */
  #landing-content .chat-window {
    margin: 0 10px;
  }

  #landing-content .chat-content {
    padding: 20px;
  }

  #landing-content .chat-message {
    max-width: 100%;
    font-size: 14px;
  }

  /* Partners */
  #landing-content .partners-track {
    gap: 40px;
  }

  #landing-content .partner-logo {
    font-size: 16px;
  }

  /* Features Section */
  #landing-content .features {
    padding: 60px 0;
  }

  #landing-content .section-header {
    margin-bottom: 50px;
  }

  #landing-content .section-title {
    font-size: 32px;
  }

  #landing-content .feature-item {
    grid-template-columns: 1fr !important;
    gap: 30px;
    margin-bottom: 60px;
    text-align: center;
  }

  #landing-content .feature-item:nth-child(even) {
    direction: ltr !important;
  }

  #landing-content .feature-item:nth-child(even) > * {
    direction: ltr !important;
  }

  #landing-content .feature-icon {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  #landing-content .feature-title {
    font-size: 28px;
  }

  #landing-content .feature-description {
    font-size: 15px;
  }

  #landing-content .feature-image {
    padding: 20px;
  }

  /* Crypto Table */
  #landing-content .crypto-table table {
    font-size: 13px;
  }

  #landing-content .crypto-table th,
  #landing-content .crypto-table td {
    padding: 10px 8px;
  }

  /* Testimonials */
  #landing-content .testimonial-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #landing-content .testimonial-card {
    padding: 20px;
  }

  /* Footer */
  #landing-content .footer {
    padding: 50px 0 30px;
  }

  #landing-content .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  #landing-content .footer-desc {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #landing-content .footer-links {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  #landing-content .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding-top: 20px;
  }

  #landing-content .social-links {
    justify-content: center;
  }
}

/* Extra Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  #landing-content .hero-title {
    font-size: 28px;
  }

  #landing-content .hero-subtitle {
    font-size: 14px;
  }

  #landing-content .section-title {
    font-size: 26px;
  }

  #landing-content .feature-title {
    font-size: 24px;
  }

  #landing-content .badge,
  #landing-content .section-badge {
    font-size: 11px;
    padding: 5px 12px;
  }
}

/* ========== AUTH MODAL RESPONSIVE ========== */
@media (max-width: 640px) {
  .auth-modal-overlay .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    margin: 10px !important;
    padding: 20px !important;
  }

  .auth-modal-overlay h2 {
    font-size: 20px !important;
  }

  .auth-modal-overlay input {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .auth-modal-overlay button {
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
}

/* ========== DASHBOARD RESPONSIVE ========== */

/* Ensure proper spacing for mobile header */
@media (max-width: 768px) {
  /* Mobile header should be visible and functional */
  .mobile-header {
    display: flex !important;
  }

  /* Adjust main content for mobile header */
  main {
    padding-top: 70px !important; /* Account for fixed header */
  }

  /* Reduce padding on mobile */
  .dashboard-content {
    padding: 12px !important;
  }

  /* Header text smaller on mobile */
  header h2 {
    font-size: 20px !important;
  }

  header p {
    font-size: 13px !important;
  }
}

/* Tablet breakpoint for dashboard */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Adjust grid columns for tablets */
  .grid-cols-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ========== SCREENER TABLE RESPONSIVE ========== */
@media (max-width: 768px) {
  /* Make table scrollable horizontally */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce table font size */
  table {
    font-size: 12px !important;
  }

  table th,
  table td {
    padding: 8px !important;
    white-space: nowrap;
  }

  /* Filter panel stacks vertically */
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Search and filter controls stack */
  .flex-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .min-w-\[200px\] {
    min-width: 100% !important;
  }
}

/* ========== AI CHAT RESPONSIVE ========== */
@media (max-width: 640px) {
  /* Quick action buttons wrap and fill width */
  .quick-actions {
    flex-direction: column;
  }

  .quick-actions button {
    width: 100%;
    justify-content: center;
  }

  /* Chat messages take full width */
  .chat-message {
    max-width: 100% !important;
  }

  /* Reduce chat input padding */
  .chat-input-container {
    padding: 12px !important;
  }

  textarea {
    font-size: 14px !important;
  }

  /* Avatar sizes smaller */
  .avatar {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ========== ANALYSIS VIEW RESPONSIVE ========== */
@media (max-width: 1024px) {
  /* Stack sidebar and content vertically */
  .analysis-layout {
    flex-direction: column !important;
  }

  .analysis-sidebar {
    width: 100% !important;
    margin-bottom: 20px;
  }

  /* Reduce chart height on mobile */
  .chart-container {
    height: 300px !important;
  }
}

@media (max-width: 640px) {
  /* Asset tags wrap and fill width */
  .asset-tags {
    flex-direction: column;
    align-items: stretch;
  }

  .asset-tag {
    width: 100%;
    justify-content: space-between;
  }

  /* Form controls stack */
  .form-row {
    flex-direction: column;
  }

  .form-control {
    width: 100% !important;
  }
}

/* ========== PORTFOLIO VIEW RESPONSIVE ========== */
@media (max-width: 768px) {
  /* Portfolio cards stack vertically */
  .portfolio-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stats cards 2 columns on mobile */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Chart legends stack */
  .chart-legend {
    flex-direction: column;
  }
}

/* ========== SETTINGS VIEW RESPONSIVE ========== */
@media (max-width: 768px) {
  /* Settings tabs scroll horizontally */
  .settings-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
  }

  .settings-tab {
    flex-shrink: 0;
    font-size: 13px !important;
    padding: 8px 16px !important;
  }

  /* Form groups stack */
  .form-group {
    margin-bottom: 16px;
  }

  .form-label {
    font-size: 13px !important;
  }

  .form-input {
    font-size: 14px !important;
  }
}

/* ========== BILLING VIEW RESPONSIVE ========== */
@media (max-width: 768px) {
  /* Pricing cards stack */
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .pricing-card {
    margin-bottom: 16px;
  }

  /* Invoice table scrollable */
  .invoice-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .invoice-table {
    min-width: 600px;
  }
}

/* ========== TOUCH TARGETS ========== */
/* Ensure all interactive elements are at least 44x44px for touch */
@media (max-width: 768px) {
  button,
  a.btn,
  .clickable {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
  }

  /* Icon buttons need proper touch target */
  .icon-btn,
  .icon-button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Tab buttons */
  .tab-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Select dropdowns */
  select {
    min-height: 44px;
    font-size: 14px;
  }

  /* Inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 10px 12px;
  }
}

/* ========== UTILITY CLASSES FOR RESPONSIVE ========== */
.mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }

  .mobile-hidden {
    display: none !important;
  }
}

.tablet-only {
  display: none !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tablet-only {
    display: block !important;
  }

  .tablet-hidden {
    display: none !important;
  }
}

/* ========== SMOOTH SCROLLING & PERFORMANCE ========== */
@media (max-width: 768px) {
  /* Enable smooth scrolling on mobile */
  * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
  }

  /* Optimize scrolling performance */
  .overflow-y-auto,
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }

  /* Reduce animations on mobile for performance */
  .reduce-motion {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== CONTAINER RESPONSIVE PADDING ========== */
@media (max-width: 640px) {
  .container,
  #landing-content .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .container,
  #landing-content .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ========== SAFE AREA INSETS (for notched devices) ========== */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .mobile-header,
    .navbar {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }

    main,
    .main-content {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
}

/* ========== LANDSCAPE ORIENTATION ========== */
@media (max-width: 768px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  .hero {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }

  .features {
    padding: 40px 0 !important;
  }

  .feature-item {
    margin-bottom: 40px !important;
  }

  /* Make sidebar narrower in landscape */
  aside {
    width: 200px !important;
  }
}

/* ========== PRINT STYLES ========== */
@media print {
  /* Hide unnecessary elements when printing */
  .navbar,
  .mobile-header,
  aside,
  .sidebar,
  button,
  .btn {
    display: none !important;
  }

  main {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ensure charts and tables print properly */
  .chart-container,
  table {
    page-break-inside: avoid;
  }
}