/* ========================================
   UNIVERSAL MOBILE TYPOGRAPHY - BullQuotient
   ======================================== */

/* Apply to ALL pages - Dashboard, StockData, Account Details, etc. */

/* Base Mobile Font Scaling */
@media screen and (max-width: 768px) {
  
  /* ===== HEADINGS MOBILE SCALING ===== */
  h1 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
  h2 { font-size: clamp(1.25rem, 4vw, 1.75rem) !important; }
  h3 { font-size: clamp(1.125rem, 3.5vw, 1.5rem) !important; }
  h4 { font-size: clamp(1rem, 3vw, 1.25rem) !important; }
  h5 { font-size: clamp(0.875rem, 2.5vw, 1.125rem) !important; }
  h6 { font-size: clamp(0.75rem, 2vw, 1rem) !important; }
  
  /* ===== TEXT SIZES MOBILE SCALING ===== */
  .text-xs { font-size: 0.65rem !important; }      /* 10.4px */
  .text-sm { font-size: 0.75rem !important; }      /* 12px */
  .text-base { font-size: 0.875rem !important; }   /* 14px */
  .text-lg { font-size: 1rem !important; }         /* 16px */
  .text-xl { font-size: 1.125rem !important; }     /* 18px */
  .text-2xl { font-size: 1.25rem !important; }     /* 20px */
  .text-3xl { font-size: 1.5rem !important; }      /* 24px */
  .text-4xl { font-size: 1.75rem !important; }     /* 28px */
  .text-5xl { font-size: 2rem !important; }        /* 32px */
  .text-6xl { font-size: 2.25rem !important; }     /* 36px */
  
  /* ===== DASHBOARD SPECIFIC MOBILE FONTS ===== */
  
  /* Market Indices Cards */
  .market-indices h3 { font-size: 0.75rem !important; }
  .market-indices .text-lg { font-size: 1rem !important; }
  .market-indices .text-sm { font-size: 0.7rem !important; }
  .market-indices .text-xs { font-size: 0.65rem !important; }
  
  /* Market Cap Section */
  .market-cap h2 { font-size: 1.5rem !important; }
  .market-cap h3 { font-size: 1.125rem !important; }
  .market-cap p { font-size: 0.75rem !important; }
  .market-cap button { font-size: 0.8rem !important; }
  
  /* Sectors Section */
  .sectors-section h2 { font-size: 1.5rem !important; }
  .sectors-section h3 { font-size: 1rem !important; }
  .sectors-section p { font-size: 0.75rem !important; }
  
  /* ===== STOCK DATA PAGE MOBILE FONTS ===== */
  
  /* Stock Cards */
  .stock-card h1 { font-size: 1.25rem !important; }
  .stock-card h2 { font-size: 1.125rem !important; }
  .stock-card h3 { font-size: 1rem !important; }
  .stock-card p { font-size: 0.8rem !important; }
  .stock-card .text-2xl { font-size: 1.125rem !important; }
  
  /* Price Cards */
  .price-card .text-2xl { 
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }
  .price-card h3 { font-size: 0.875rem !important; }
  .price-card .text-sm { font-size: 0.7rem !important; }
  
  /* Fundamentals Section */
  .fundamentals-grid .stock-card h3 { font-size: 0.875rem !important; }
  .fundamentals-grid .stock-card .text-2xl { font-size: 1rem !important; }
  .fundamentals-grid .stock-card .text-sm { font-size: 0.7rem !important; }
  
  /* ===== ACCOUNT DETAILS MOBILE FONTS ===== */
  
  /* Profile Section */
  .profile-section h1 { font-size: 1.5rem !important; }
  .profile-section p { font-size: 0.8rem !important; }
  .profile-section .text-lg { font-size: 0.9rem !important; }
  
  /* Stats Cards */
  .stats-card h3 { font-size: 1rem !important; }
  .stats-card span { font-size: 0.8rem !important; }
  .stats-card .text-sm { font-size: 0.7rem !important; }
  
  /* Activity Timeline */
  .activity-timeline p { font-size: 0.8rem !important; }
  .activity-timeline .text-sm { font-size: 0.7rem !important; }
  
  /* ===== GLOBAL COMPONENT MOBILE FONTS ===== */
  
  /* Buttons */
  button { font-size: 0.8rem !important; }
  .btn-sm { font-size: 0.7rem !important; }
  .btn-lg { font-size: 0.9rem !important; }
  
  /* Badges and Pills — exclude the profile avatar circle */
  .badge,
  .pill,
  .rounded-full:not(#mobile-user-initials):not(#mobile-user-initials *) { font-size: 0.65rem !important; }
  
  /* Modal Content */
  .modal h2 { font-size: 1.25rem !important; }
  .modal p { font-size: 0.8rem !important; }
  .modal .text-sm { font-size: 0.7rem !important; }
  
  /* Footer */
  footer h3 { font-size: 0.75rem !important; }
  footer h4 { font-size: 0.7rem !important; }
  footer p,
  footer span,
  footer a { font-size: 0.65rem !important; }
  
  /* Header/Navigation */
  header .text-xl { font-size: 1rem !important; }
  header .text-lg { font-size: 0.9rem !important; }
  header .text-base { font-size: 0.8rem !important; }
  header .text-sm { font-size: 0.7rem !important; }
  
  /* Form Elements */
  input,
  select,
  textarea { font-size: 0.875rem !important; }
  label { font-size: 0.8rem !important; }
  
  /* Table Content */
  table th { font-size: 0.75rem !important; }
  table td { font-size: 0.7rem !important; }
  
  /* Loading States */
  .loading-text { font-size: 0.75rem !important; }
  
  /* Error Messages */
  .error-text { font-size: 0.7rem !important; }
  
  /* Success Messages */
  .success-text { font-size: 0.7rem !important; }
}

/* ===== EXTRA SMALL MOBILE (375px and below) ===== */
@media screen and (max-width: 375px) {
  
  /* Even smaller fonts for very small screens */
  h1 { font-size: clamp(1.25rem, 4.5vw, 1.75rem) !important; }
  h2 { font-size: clamp(1.125rem, 3.5vw, 1.5rem) !important; }
  h3 { font-size: clamp(1rem, 3vw, 1.25rem) !important; }
  
  .text-base { font-size: 0.8rem !important; }
  .text-lg { font-size: 0.9rem !important; }
  .text-xl { font-size: 1rem !important; }
  .text-2xl { font-size: 1.125rem !important; }
  
  /* Component specific tiny adjustments */
  .market-indices h3 { font-size: 0.7rem !important; }
  .price-card .text-2xl { font-size: 0.9rem !important; }
  button { font-size: 0.75rem !important; }
}

/* ===== VERY SMALL MOBILE (320px and below) ===== */
@media screen and (max-width: 320px) {
  
  /* Minimum readable sizes */
  h1 { font-size: 1.25rem !important; }
  h2 { font-size: 1.125rem !important; }
  h3 { font-size: 1rem !important; }
  
  .text-base { font-size: 0.75rem !important; }
  .text-lg { font-size: 0.85rem !important; }
  .text-xl { font-size: 0.95rem !important; }
  
  /* Ultra-compact for smallest screens */
  .market-indices h3 { font-size: 0.65rem !important; }
  .price-card .text-2xl { font-size: 0.85rem !important; }
  button { font-size: 0.7rem !important; }
  footer p { font-size: 0.6rem !important; }
}

/* ===== PRESERVE FUNCTIONALITY ===== */
/* Ensure interactive elements remain usable */
@media screen and (max-width: 768px) {
  
  /* Maintain minimum tap targets */
button:not([class*="bq-gsi"]):not(#bq-auth-close),
  a:not([class*="bq-gsi"]),
  input,
  select {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Protect GSI container and its children from size forcing */
  .bq-gsi-signin-btn,
  .bq-gsi-signin-btn *,
  .bq-gsi-signin-btn iframe {
    min-height: unset !important;
    min-width: unset !important;
    height: auto !important;
    width: auto !important;
  }
  /* Prevent text from becoming unreadable */
  * {
    min-font-size: 0.6rem !important;
  }
  
  /* Maintain line heights for readability — exclude profile avatar */
  p,
  span,
  div:not(#mobile-user-initials) {
    line-height: 1.4 !important;
  }

  /* Profile avatar circle — must keep overflow:hidden and exact sizing */
  #mobile-user-initials {
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 14px !important;
  }
  #mobile-user-initials img {
    line-height: normal !important;
    min-height: unset !important;
    min-width: unset !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  #mobile-user-initials span {
    line-height: 1 !important;
  }
  
  /* Preserve important visual hierarchy */
  .gradient-text,
  .brand-title,
  .section-title {
    font-weight: 700 !important;
  }
}