/* ========================================
   RESPONSIVE MOBILE STYLES
   Optimized for mobile and small screens
   ======================================== */

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

/* Mobile-first approach */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  /* Network Alert Banner */
  .network-alert-banner {
    padding: 12px 16px;
  }

  .alert-container {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .alert-icon {
    display: none; /* Hide icon on mobile to save space */
  }

  .alert-title {
    font-size: 14px;
  }

  .alert-message {
    font-size: 13px;
  }

  .alert-close {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  /* Navbar */
  .navbar {
    padding: 12px 0;
  }

  .navbar-container {
    padding: 0 16px;
    gap: 12px;
  }

  .navbar-logo h2 {
    font-size: 20px;
  }

  .navbar-menu {
    display: none; /* Hide navigation links on mobile */
  }

  /* Mobile hamburger menu button */
  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
  }

  .mobile-menu-btn span {
    width: 24px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s;
  }

  /* Connect Wallet Button */
  #mainConnectBtn,
  .connect-wallet-btn {
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    gap: 6px !important;
  }

  #mainConnectBtn svg,
  .connect-wallet-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Wallet Profile Widget */
  .wallet-profile-button {
    padding: 6px 12px !important;
    gap: 8px !important;
  }

  .wallet-short-address {
    font-size: 12px !important;
  }

  .wallet-balance {
    font-size: 10px !important;
  }

  /* Page Container */
  .page-container {
    padding: 16px 12px;
  }

  /* Page Header */
  .page-header {
    margin-bottom: 24px;
  }

  .page-header h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  .page-header p {
    font-size: 14px;
  }

  /* Tabs */
  .tabs-container {
    border-radius: 12px 12px 0 0;
  }

  .tabs-header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }

  .tabs-header::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  .tab-button {
    padding: 16px 20px;
    font-size: 14px;
    white-space: nowrap;
    min-width: 120px;
  }

  .tabs-content {
    min-height: 400px;
  }

  /* Referral Dashboard */
  .referral-dashboard {
    padding: 20px 16px;
  }

  .referral-summary {
    padding: 24px 16px;
    border-radius: 12px;
    margin-bottom: 24px;
  }

  .user-card {
    padding: 20px;
    margin-bottom: 20px;
  }

  .user-avatar {
    width: 56px;
    height: 56px;
  }

  .user-avatar svg {
    width: 28px;
    height: 28px;
  }

  .user-info h3 {
    font-size: 16px;
  }

  #userAddress {
    font-size: 12px !important;
  }

  .user-stats {
    gap: 12px;
  }

  .stat-value {
    font-size: 20px;
  }

  .stat-label {
    font-size: 11px;
  }

  /* Referral Code Section */
  .referral-code-section {
    padding: 16px;
    margin-bottom: 20px;
  }

  .referral-code-section h4 {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .code-display {
    flex-direction: column;
    gap: 10px;
    padding: 14px;
  }

  .code-text {
    font-size: 18px;
    text-align: center;
    word-break: break-all;
  }

  .copy-button {
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Refresh Button */
  .refresh-button {
    padding: 10px 16px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
  }
}

/* ==================== MATRIX TREE RESPONSIVE ==================== */

@media (max-width: 768px) {
  /* Matrix Header */
  .matrix-header {
    padding: 20px 16px;
  }

  .matrix-title h2 {
    font-size: 22px;
  }

  .matrix-address {
    font-size: 12px;
    word-break: break-all;
  }

  /* Statistics Grid */
  .matrix-stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
  }

  .stat-card {
    padding: 16px;
    gap: 12px;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
  }

  .stat-icon svg {
    width: 20px;
    height: 20px;
  }

  .stat-content h3 {
    font-size: 20px;
  }

  .stat-content p {
    font-size: 13px;
  }

  /* Controls */
  .matrix-controls {
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .level-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .level-filter label {
    font-size: 14px;
  }

  .level-select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Legend */
  .matrix-legend {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }

  .legend-item {
    font-size: 13px;
  }

  /* Tree Scroll */
  .matrix-tree-scroll {
    padding: 16px;
    max-height: 600px;
  }

  /* Matrix Level */
  .matrix-level {
    margin-bottom: 24px;
  }

  .matrix-level[data-level="0"] {
    margin-bottom: 32px;
  }

  /* Level Header */
  .level-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .level-badge {
    padding: 5px 12px;
    font-size: 12px;
  }

  .level-stats {
    font-size: 12px;
    width: 100%;
  }

  .level-progress {
    max-width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }

  /* Level Nodes */
  .level-nodes {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
  }

  .matrix-level[data-level="0"] .level-nodes {
    grid-template-columns: 1fr;
  }

  /* Matrix Node */
  .matrix-node {
    padding: 14px;
    gap: 10px;
  }

  .node-avatar {
    width: 40px;
    height: 40px;
  }

  .node-avatar svg {
    width: 20px;
    height: 20px;
  }

  .node-address {
    font-size: 12px;
  }

  .node-label,
  .node-position {
    font-size: 10px;
  }

  /* Matrix Info */
  .matrix-info {
    padding: 20px 16px;
  }

  .matrix-info h4 {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .matrix-info li {
    font-size: 13px;
    padding: 6px 0;
  }

  /* Loading States */
  .matrix-loading,
  .matrix-error {
    padding: 40px 16px;
  }

  .spinner-large {
    width: 40px;
    height: 40px;
  }

  /* Empty Summary */
  .empty-summary {
    min-width: 100% !important;
  }
}

/* ==================== SMALL MOBILE (< 480px) ==================== */

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 20px;
  }

  .page-header p {
    font-size: 13px;
  }

  .tab-button {
    padding: 14px 16px;
    font-size: 13px;
    min-width: 100px;
  }

  .referral-summary {
    padding: 20px 12px;
  }

  .user-card {
    padding: 16px;
  }

  .user-avatar {
    width: 48px;
    height: 48px;
  }

  .user-avatar svg {
    width: 24px;
    height: 24px;
  }

  .stat-value {
    font-size: 18px;
  }

  .stat-label {
    font-size: 10px;
  }

  .code-text {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .matrix-title h2 {
    font-size: 20px;
  }

  .stat-card {
    padding: 14px;
  }

  .stat-icon {
    width: 36px;
    height: 36px;
  }

  .stat-content h3 {
    font-size: 18px;
  }

  .stat-content p {
    font-size: 12px;
  }

  .matrix-node {
    padding: 12px;
  }

  .node-avatar {
    width: 36px;
    height: 36px;
  }

  .node-address {
    font-size: 11px;
  }
}

/* ==================== NODE DETAILS MODAL RESPONSIVE ==================== */

@media (max-width: 768px) {
  .node-details-overlay {
    padding: 12px;
    align-items: flex-end; /* Slide up from bottom on mobile */
  }

  .node-details-container {
    border-radius: 16px 16px 0 0;
    max-width: 100%;
    animation: slideUpMobile 0.3s ease;
  }

  @keyframes slideUpMobile {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .node-details-header {
    padding: 20px 16px;
  }

  .node-details-header h3 {
    font-size: 18px;
  }

  .node-details-content {
    padding: 20px 16px;
  }

  .detail-row {
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
    align-items: flex-start;
  }

  .detail-label {
    font-size: 13px;
  }

  .detail-value {
    font-size: 13px;
    word-break: break-all;
  }

  .node-details-actions {
    padding: 20px 16px;
  }

  .btn-view-matrix {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* ==================== NOTIFICATION RESPONSIVE ==================== */

@media (max-width: 768px) {
  .notification {
    top: auto;
    bottom: 20px;
    right: 12px;
    left: 12px;
    padding: 14px 18px;
    font-size: 14px;
  }

  .notification svg {
    width: 18px;
    height: 18px;
  }
}

/* ==================== LOADING OVERLAY RESPONSIVE ==================== */

@media (max-width: 768px) {
  .loading-content {
    padding: 24px 20px;
    max-width: 90%;
  }

  .loading-content .loading-spinner {
    width: 36px;
    height: 36px;
  }

  .loading-content p {
    font-size: 14px;
  }
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */

/* Loading indicators */
.loading-more {
  text-align: center;
  padding: 30px 16px;
  color: #6b7280;
  font-size: 14px;
}

.spinner-small {
  width: 28px;
  height: 28px;
  border: 3px solid #f3f4f6;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 10px;
}

.spinner-large {
  width: 48px;
  height: 48px;
  border: 4px solid #f3f4f6;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Optimize scrolling performance */
.matrix-tree-scroll {
  max-height: 800px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .matrix-tree-scroll {
    max-height: 600px;
  }
}

/* Reduce repaints */
.matrix-node {
  contain: layout style paint;
  will-change: transform;
}

/* Empty summary for large levels */
.empty-summary {
  background: #f9fafb !important;
  border: 2px dashed #d1d5db !important;
  cursor: default !important;
}

.empty-summary:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Optimize level nodes container */
.level-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  contain: layout;
}

@media (max-width: 768px) {
  .level-nodes {
    gap: 10px;
  }
}

/* Make node rendering more efficient */
.matrix-node {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduce animation overhead for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .matrix-node,
  .spinner-small,
  .spinner-large,
  .tab-button,
  .copy-button,
  .refresh-button,
  .btn-view-matrix {
    animation: none !important;
    transition: none !important;
  }
}

/* Improve scrollbar styling */
.matrix-tree-scroll::-webkit-scrollbar {
  width: 8px;
}

.matrix-tree-scroll::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 4px;
}

.matrix-tree-scroll::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.matrix-tree-scroll::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

@media (max-width: 768px) {
  .matrix-tree-scroll::-webkit-scrollbar {
    width: 4px;
  }
}

/* ==================== LANDSCAPE MOBILE OPTIMIZATION ==================== */

@media (max-width: 768px) and (orientation: landscape) {
  .page-header {
    margin-bottom: 16px;
  }

  .page-header h1 {
    font-size: 22px;
  }

  .referral-summary {
    padding: 20px 16px;
  }

  .user-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .matrix-tree-scroll {
    max-height: 400px;
  }

  .tabs-content {
    min-height: 300px;
  }
}

/* ==================== TOUCH OPTIMIZATION ==================== */

/* Increase touch targets for better mobile UX */
@media (max-width: 768px) {
  .tab-button,
  .copy-button,
  .refresh-button,
  .alert-close,
  .close-details {
    min-height: 44px; /* Apple's recommended minimum touch target */
  }

  .matrix-node.filled {
    min-height: 60px; /* Ensure easy tapping */
  }

  /* Prevent text selection on buttons */
  button,
  .tab-button,
  .copy-button,
  .refresh-button,
  .matrix-node {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Allow text selection where needed */
  .code-text,
  .node-address,
  .detail-value {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* ==================== SAFE AREA INSETS (for notched devices) ==================== */

@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .navbar-container {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }

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

    .notification {
      left: max(12px, env(safe-area-inset-left));
      right: max(12px, env(safe-area-inset-right));
      bottom: max(20px, env(safe-area-inset-bottom));
    }
  }
}

/* ==================== ACCESSIBILITY IMPROVEMENTS ==================== */

/* Focus states for keyboard navigation */
@media (max-width: 768px) {
  .tab-button:focus,
  .copy-button:focus,
  .refresh-button:focus,
  .btn-view-matrix:focus {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
  }

  /* Skip to content link for screen readers */
  .skip-to-content {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 8px 16px;
    background: #6366f1;
    color: white;
    text-decoration: none;
    border-radius: 4px;
  }

  .skip-to-content:focus {
    left: 12px;
    top: 12px;
  }
}