/* ============================================================
   ValueIndex — Responsive Layout
   Breakpoints:
     Large desktop : 1440px+
     Desktop       : 1025px – 1439px
     Tablet        : 768px  – 1024px
     Mobile        : up to  767px
   ============================================================ */

/* ---------- CSS custom property overrides per breakpoint ---------- */

/* Large desktop (1440px+): default values already set per-page */

/* Desktop / laptop (1025–1439px) */
@media (max-width: 1439px) {
  html {
    --side-margin: 40px;
    --side-padding: 80px;
    --section-margin: 100px;
  }
}

/* Tablet (768–1024px) */
@media (max-width: 1024px) {
  html {
    --side-margin: 24px;
    --side-padding: 32px;
    --section-margin: 70px;
  }

  /* Public header nav: shrink gaps */
  #header #header_row {
    margin: 16px var(--side-margin) 0 var(--side-margin);
  }
  nav ul li {
    margin-right: 18px;
  }

  /* App-header back/logo/user row */
  #header #header_row > div:nth-child(1),
  #header #header_row > div:nth-child(3) {
    flex: 0 0 auto;
  }

  /* Dashboard & stock-list: main padding */
  #main {
    padding-left: var(--side-padding) !important;
    padding-right: var(--side-padding) !important;
  }

  /* Search box wider on tablet */
  #search-box input { width: 70%; }
  #search-box svg   { left: calc(85% - 44px); }

  /* Stock cards: 3 columns on tablet */
  #stocks {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Stock-info: stack chart + fundamentals */
  #chart-and-fundamentals {
    flex-direction: column;
  }
  #chart { flex: none; }
  #fundamentals { flex: none; }

  /* AI score + analyst ratings: stack */
  #ai-score-and-analyst-ratings {
    flex-direction: column;
  }

  /* Insiders table: allow horizontal scroll */
  #insiders .table {
    overflow-x: auto;
    min-width: 600px;
  }
  #insiders { overflow-x: auto; }

  /* Latest rating + short interest: stack */
  #latest-rating-and-short-interest {
    flex-direction: column;
  }

  /* Pricing plans */
  #plans {
    flex-direction: column;
    margin: 100px var(--side-margin) 40px var(--side-margin);
  }

  /* Key features: simpler layout */
  #key-features {
    margin: var(--section-margin) var(--side-margin);
  }

  /* About / emerging stocks two-col sections */
  #about-us > div:nth-child(2),
  #emerging-value-stocks > div:nth-child(2),
  #ai-insights > div:nth-child(2) {
    flex-direction: column;
    gap: 24px;
  }
  #about-us > div:nth-child(2) > div,
  #emerging-value-stocks > div:nth-child(2) > div,
  #ai-insights > div:nth-child(2) > div {
    flex-basis: 100%;
  }

  /* Profile / notifications / preferences form */
  #form form { width: 70%; }

  /* Footer grid */
  #footer > div:nth-child(2) {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
  #footer > div:nth-child(2) > div:nth-child(1) {
    grid-column: 1 / -1;
  }

  /* Headings scale */
  .cap1, .cap2 { font-size: 40px; }
  #title h1 { font-size: 38px; }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  html {
    --side-margin: 16px;
    --side-padding: 16px;
    --section-margin: 48px;
  }

  /* ---- Public header (index, pricing, profile pages) ---- */
  #header #header_row {
    margin: 12px var(--side-margin) 0 var(--side-margin);
    border-radius: 16px;
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  /* Hide main nav links on mobile; keep logo + account button */
  #header #header_row > div:nth-child(2) { display: none; }
  #header #header_row > div:nth-child(1) { margin-left: 0; }
  nav ul { padding: 0; }
  nav ul li { margin-right: 12px; }
  .create-account-button { padding: 8px 12px; font-size: 14px; }

  /* ---- App inner header (dashboard, stock pages) ---- */
  #header #header_row > div:nth-child(1),
  #header #header_row > div:nth-child(3) {
    flex: 0 0 auto;
  }
  #header #header_row span#back {
    width: 44px;
    height: 44px;
  }

  /* ---- Main content padding ---- */
  #main {
    padding-left: var(--side-padding) !important;
    padding-right: var(--side-padding) !important;
  }

  /* ---- Hero headings ---- */
  .cap1, .cap2 { font-size: 30px; letter-spacing: -1px; }
  #title h1 { font-size: 28px; letter-spacing: -1px; }
  #title h2 { font-size: 15px; }

  /* ---- Search box ---- */
  #search-box input {
    width: 100%;
    height: 56px;
    font-size: 14px;
    padding: 12px 16px 12px 20px;
  }
  #search-box input::placeholder { font-size: 14px; }
  #search-box svg { left: calc(100% - 44px); }

  /* ---- Controls row: stack filters + sort ---- */
  #controls #controls_row {
    flex-wrap: wrap;
    gap: 8px;
  }
  #controls #controls_row > div:nth-child(3) {
    flex: 1 1 100%;
    text-align: left;
  }
  #filters-controls .row {
    flex-direction: column;
    margin: 24px 16px;
    gap: 16px;
  }

  /* ---- Stock cards: 2 columns on mobile ---- */
  #stocks {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ---- Stock info page ---- */
  #stock-name { flex-direction: column; gap: 8px; }
  #stock-name > div:last-child { text-align: left; }
  #stock-name > div:first-child > div:nth-child(1) { font-size: 28px; }

  #stock-price-and-watchlist { flex-direction: column; gap: 8px; align-items: flex-start; }
  #stock-price > div:first-child { font-size: 30px; }

  #chart-and-fundamentals { flex-direction: column; }
  #chart > div:first-child { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  #chart #gchart { height: 280px; }

  #ai-score-and-analyst-ratings { flex-direction: column; }
  #ai-score .row { flex-direction: column; }

  #latest-rating-and-short-interest { flex-direction: column; }

  #insiders .table {
    overflow-x: auto;
    min-width: 520px;
  }
  #insiders { overflow-x: auto; padding: 10px; }

  /* ---- Dashboard title ---- */
  #title { margin-top: 32px; }

  /* ---- Homepage sections ---- */
  #about-us,
  #ai-powered-scoring-system,
  #emerging-value-stocks,
  #faq {
    margin-left: var(--side-margin);
    margin-right: var(--side-margin);
  }
  #about-us > div:nth-child(2),
  #emerging-value-stocks > div:nth-child(2),
  #ai-insights > div:nth-child(2) {
    flex-direction: column;
    gap: 20px;
  }
  #about-us > div:nth-child(2) > div,
  #emerging-value-stocks > div:nth-child(2) > div,
  #ai-insights > div:nth-child(2) > div {
    flex-basis: 100%;
  }
  #ai-powered-scoring-system > div:nth-child(3) {
    flex-direction: column;
    gap: 16px;
  }
  #ai-insights {
    padding-top: 200px;
    padding-left: var(--side-margin);
    padding-right: var(--side-margin);
  }

  /* ---- See what others overlook CTA ---- */
  #see-what-others-overlook > div:nth-child(3) {
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--side-margin);
  }
  #see-what-others-overlook input { width: 100%; }

  /* ---- Pricing ---- */
  #plans {
    flex-direction: column;
    margin: 60px var(--side-margin) 32px var(--side-margin);
  }
  #key-features {
    grid-template-columns: 2fr 1fr 1fr;
    margin: var(--section-margin) var(--side-margin);
    font-size: 13px;
  }
  #key-features > div:nth-child(-n+3) { font-size: 16px; }
  #get-started > div:first-child { width: 90%; font-size: 30px; }
  #get-started > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  #get-started > div:last-child > a:last-child { margin-left: 0; }

  /* ---- Profile / notifications / preferences sections tab bar ---- */
  #sections .row {
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    overflow-x: auto;
  }
  #sections .row > div { white-space: nowrap; padding: 0 4px 12px; }

  /* ---- Profile form ---- */
  #form form {
    width: 100%;
    grid-template-columns: 1fr;
    padding: 0 var(--side-margin);
    box-sizing: border-box;
  }
  #form .field.wide { grid-column: 1; }

  /* ---- Notifications / preferences form ---- */
  #form form { width: 100%; padding: 0 var(--side-margin); box-sizing: border-box; }

  /* ---- Pagination ---- */
  #pages #pages_row { flex-direction: column; gap: 16px; align-items: center; }
  #pages_right { justify-content: center; }

  /* ---- Login / Register boxes ---- */
  #login-box, #signup-box {
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 24px 20px;
    box-sizing: border-box;
  }
  body:has(#login-box),
  body:has(#signup-box) {
    overflow-y: auto;
    padding: 24px 0;
    align-items: flex-start;
  }
  #login-options { gap: 6px; }

  /* ---- Footer ---- */
  #footer > div { margin-left: var(--side-margin); margin-right: var(--side-margin); }
  #footer > div:nth-child(2) {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  #footer > div:nth-child(2) > div:nth-child(1) {
    grid-column: 1 / -1;
  }
  #footer > div:nth-child(2) > div:nth-child(1) > ul {
    flex-wrap: wrap;
    gap: 12px;
  }
  #footer > div:nth-child(2) > div:nth-child(1) > ul > li {
    padding-right: 0;
  }

  /* ---- User dropdown ---- */
  #user_name { display: none; }

  /* ---- Watch list dialog ---- */
  dialog form { padding: 20px 24px; }
}

/* ============================================================
   Homepage mobile fixes
   ============================================================ */

@media (max-width: 767px) {

  /* Fix page width */
  body {
    grid-template-rows: none !important;
  }

  /* Fix header */
  #header #header_row {
    margin: 12px 8px 0 8px !important;
    box-sizing: border-box !important;
    width: calc(100vw - 16px) !important;
  }
  #header #header_row > div:nth-child(2) {
    display: none !important;
  }
  #header #header_row > div:nth-child(3) nav ul {
    gap: 4px;
  }
  #header #header_row > div:nth-child(3) nav ul li {
    margin-right: 6px !important;
  }
  .create-account-button {
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* Fix all main sections width */
  #about-us,
  #ai-powered-scoring-system,
  #emerging-value-stocks,
  #ai-insights,
  #faq,
  #see-what-others-overlook,
  #footer {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  #about-us {
    margin: 48px 16px 0 16px !important;
  }
  #about-us > div:nth-child(2) {
    flex-direction: column !important;
    gap: 20px;
  }
  #about-us > div:nth-child(2) > div {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  #ai-powered-scoring-system {
    margin: 48px 16px 0 16px !important;
  }
  #ai-powered-scoring-system > div:nth-child(3) {
    flex-direction: column !important;
    gap: 16px;
  }
  #emerging-value-stocks {
    margin: 48px 16px 48px 16px !important;
  }
  #emerging-value-stocks #stocks {
    display: none !important;
  }
  #emerging-value-stocks > div:nth-child(2) {
    flex-direction: column !important;
    gap: 20px;
  }
  #emerging-value-stocks > div:nth-child(2) > div {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  #ai-insights {
    padding: 48px 16px !important;
    height: auto !important;
  }
  #ai-insights > div:nth-child(2) {
    flex-direction: column !important;
    gap: 20px;
  }
  #ai-insights > div:nth-child(2) > div {
    flex-basis: 100% !important;
  }
  #faq {
    margin: 48px 16px 0 16px !important;
  }
  #faq > div:nth-child(3) > p {
    padding: 0 16px 20px 16px !important;
    font-size: 14px;
  }
  #see-what-others-overlook {
    height: auto !important;
    padding: 48px 16px !important;
    box-sizing: border-box !important;
  }
  #see-what-others-overlook > div:nth-child(3) {
    flex-direction: column !important;
    align-items: stretch;
    padding: 0;
  }
  #see-what-others-overlook input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* About Us and Emerging Value Stocks badge and heading centering */
  #about-us > div:nth-child(1),
  #emerging-value-stocks > div:nth-child(1) {
    text-align: center;
  }
  #about-us > div:nth-child(2) > div:nth-child(1),
  #emerging-value-stocks > div:nth-child(2) > div:nth-child(1) {
    text-align: center;
  }

  /* See what others overlook - email input alignment */
  #see-what-others-overlook > div:nth-child(3) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px !important;
  }
  #see-what-others-overlook > div:nth-child(3) > div {
    width: 100%;
  }
  #see-what-others-overlook > div:nth-child(3) > div input {
    width: 100%;
    box-sizing: border-box;
  }

  /* Create account button - orange */
  .create-account-button {
    background-color: #ffc919 !important;
    border-color: #ffc919 !important;
  }

  /* Footer social icons centered */
  #footer > div:nth-child(2) > div:nth-child(1) > ul {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
  }

  /* Footer layout */
  #footer > div {
    margin-left: 16px !important;
    margin-right: 16px !important;
    box-sizing: border-box !important;
  }
  #footer > div:nth-child(2) {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }
  #footer > div:nth-child(2) > div:nth-child(1) {
    grid-column: 1 / -1;
    margin-bottom: 0 !important;
  }
  #footer > div:nth-child(2) > div:nth-child(2) {
    display: none;
  }

  /* Fix main section overflow */
  #main {
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 40px 16px !important;
  }
  #main br {
    display: none;
  }

  /* Hide decorative SVG elements that cause overflow */
  #grad1 {
    max-width: 100vw;
    overflow: hidden;
  }
  #logo .mustache,
  #logo .mustache svg {
    display: none;
  }

  /* Hero section */
  #main {
    padding: 40px 16px !important;
  }
  #main .cap1 {
    font-size: 28px !important;
  }
  #main > div:nth-child(2) {
    font-size: 14px;
    padding: 0 8px;
  }
  #main > div:nth-child(2) br {
    display: none;
  }

  /* Laptop image - constrain to viewport */
  #logo {
    padding: 20px 0;
    max-width: 100vw;
    overflow: hidden;
  }
  #laptop {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  /* Header */
  #header #header_row {
    margin: 12px 16px 0 16px;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: 'header1 header3' !important;
    box-sizing: border-box !important;
    width: calc(100vw - 32px) !important;
  }
  #header #header_row > div:nth-child(2) {
    display: none;
  }

  /* About us */
  #about-us {
    margin: 48px 16px 0 16px;
  }
  #about-us > div:nth-child(2) {
    flex-direction: column;
    gap: 20px;
  }
  #about-us > div:nth-child(2) > div {
    flex-basis: 100%;
  }
  #about-us p {
    font-size: 15px;
  }

  /* AI scoring system */
  #ai-powered-scoring-system {
    margin: 48px 16px 0 16px;
  }
  #ai-powered-scoring-system > div:nth-child(3) {
    flex-direction: column;
    gap: 16px;
  }

  /* Emerging value stocks */
  #emerging-value-stocks {
    margin: 48px 16px 48px 16px;
  }
  #emerging-value-stocks > div:nth-child(2) {
    flex-direction: column;
    gap: 20px;
  }
  #emerging-value-stocks > div:nth-child(2) > div {
    flex-basis: 100%;
  }
  #emerging-value-stocks div > p {
    font-size: 15px;
  }
  #emerging-value-stocks #stocks {
    grid-template-columns: repeat(2, 1fr);
    mask-image: none;
  }

  /* AI insights */
  #ai-insights {
    padding: 48px 16px !important;
    height: auto !important;
  }
  #ai-insights > div:nth-child(2) {
    flex-direction: column;
    gap: 20px;
  }
  #ai-insights > div:nth-child(2) > div {
    flex-basis: 100%;
  }
  #ai-insights p {
    font-size: 15px;
  }

  /* FAQ */
  #faq {
    margin: 48px 16px 0 16px;
  }
  #faq > div:nth-child(3) > div > div > h2 {
    font-size: 18px;
  }
  #faq > div:nth-child(3) > p {
    padding: 0 16px 20px 16px;
    font-size: 14px;
  }

  /* See what others overlook */
  #see-what-others-overlook {
    height: auto !important;
    padding: 48px 16px;
    background-size: cover;
  }
  #see-what-others-overlook > div:nth-child(3) {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }
  #see-what-others-overlook input {
    width: 100%;
    max-width: 100%;
  }

  /* Footer */
  #footer > div:nth-child(2) {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  #footer > div:nth-child(2) > div:nth-child(1) {
    grid-column: 1 / -1;
  }
  #footer > div:nth-child(2) > div:nth-child(1) > ul {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* General font sizes */
  .cap1, .cap2 {
    font-size: 28px !important;
    letter-spacing: -1px;
  }
  .red-badge, .white-badge {
    font-size: 13px;
    padding: 8px 14px;
  }
}

@media (max-width: 767px) {
  /* Dashboard stock cards - scale to fit 2 columns */
  #stocks {
    gap: 8px !important;
  }
  .stock {
    padding: 12px !important;
    border-radius: 20px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .stock_name {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .stock_ticker {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 6px 0 !important;
  }
  .stock_stats {
    margin: 10px 0 !important;
    font-size: 11px !important;
  }
  .stock_chart {
    margin: 10px 0 !important;
  }
  .stock_price {
    font-size: 11px !important;
  }
  .stock_price_change {
    font-size: 10px !important;
    padding: 2px 4px !important;
  }
  .stock_price_change svg {
    width: 8px !important;
    height: 8px !important;
  }
  .stock_ai_score {
    font-size: 11px !important;
    padding: 3px 8px !important;
    margin-top: 4px !important;
  }
  .stock_footer {
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
  }
  .stock_open_profile {
    text-align: left !important;
    width: 100% !important;
  }
  .stock_open_profile > a > div {
    font-size: 10px !important;
    padding: 5px 8px !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
  .stock_open_profile svg {
    width: 12px !important;
    height: 8px !important;
  }
}

@media (max-width: 767px) {
  /* Dashboard header row */
  #header_row {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Dashboard controls - center on mobile */
  #controls #controls_row {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  #controls #controls_row > div:nth-child(3) {
    flex: unset !important;
    text-align: center !important;
  }

  /* Dashboard filter dropdown */
  .select-trigger {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Search box magnifying glass */
  #search-box svg {
    left: auto !important;
    right: 12px !important;
  }
}

@media (max-width: 767px) {
  .custom-select.dashboard {
    height: 62px !important;
  }
}