/* ═══════════════════════════════════════════════════════════════════════════
   RetailInterest — responsive.css
   Single source of truth for all responsive layout overrides.
   Loaded LAST so it wins over global.css and components.css.
   NO colors, fonts, spacing, or non-layout properties here.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── All page layouts: scrollable by default ───────────────────────────────
   The old code locked height:100vh + overflow:hidden on every layout,
   then fought itself with !important patches. Clean baseline instead:
   layouts are flex columns that grow to content, scroll via .page-content.
*/
.signals-layout,
.options-layout,
.maxpain-layout,
.historical-layout,
.expiry-layout,
.status-layout,
.papertrade-layout,
.comparison-layout,
.nifty-layout {
  flex: 1;          /* fill .page-content height */
  min-height: 0;    /* allow shrink below content height in flex context */
  overflow: hidden; /* inner panels handle their own scroll */
}


/* ─── Chart container fix: prevent 0px width in grid/flex ──────────────────
   LightweightCharts reads offsetWidth. Without min-width:0, flex/grid
   children can collapse to 0 and charts render invisible.
*/
.options-panel,
.chart-panel,
.maxpain-main > *,
.comparison-charts > *,
.historical-charts > * {
  min-width: 0;
}


/* ─── 1440px+ Enhanced ──────────────────────────────────────────────────────*/
@media (min-width: 1440px) {
  .signals-top-row  { min-height: 168px; }
  .historical-charts { min-height: 260px; }
  .countdown-card__digits { font-size: 40px; }
  .portfolio-strip  { grid-template-columns: repeat(6, 1fr); }
}


/* ─── Desktop nav: static inline bar ───────────────────────────────────────*/
@media (min-width: 769px) {
  .topbar {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .topbar__nav {
    position: static;
    grid-column: 2;
    background: transparent;
    border: none;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    overflow: visible;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .topbar__nav::-webkit-scrollbar { display: none; }

  /* legacy .nav-tab desktop rules removed — markup now uses .nav-link / .nav-menu */

  /* page-content: proper flex fill on desktop */
  .page-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
}


/* ─── 1280px Laptop ─────────────────────────────────────────────────────────*/
@media (max-width: 1280px) {
  .nav-tab { padding: 0 9px; font-size: 10px; }
}


/* ─── 1024px Small Laptop ───────────────────────────────────────────────────*/
@media (max-width: 1024px) {
  .signals-top-row  { grid-template-columns: repeat(2, 1fr); }
  .signals-top-row .btc-price-card { grid-column: 1 / -1; }

  /* options: stack panels vertically */
  .options-panels   { grid-template-columns: 1fr; }

  .historical-charts { grid-template-columns: 1fr; }
  .historical-stats  { grid-template-columns: 1fr 1fr; }

  .portfolio-strip  { grid-template-columns: repeat(3, 1fr); }
  .perf-analytics   { grid-template-columns: repeat(3, 1fr); }

  /* settings: sidebar goes horizontal */
  .settings-layout  { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .settings-sidebar {
    flex-direction: row;
    overflow-x: auto;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .settings-nav-item {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    white-space: nowrap;
  }
  .settings-nav-item.active {
    border-left: none;
    border-bottom-color: var(--cyan);
  }
  .settings-content { padding: 16px; }

  .comparison-row { grid-template-columns: 120px 1fr 1fr; }

  .maxpain-main { grid-template-columns: 1fr; min-height: auto; }
}


/* ─── ≤900px Mobile (unified breakpoint with mobile_nav.html partial) ───────*/
@media (max-width: 900px) {
  /* Height-locked shell: body fills viewport, #app is a flex column.
     Topbar is in-flow (relative), so it can never scroll off.
     page-content scrolls its own content — levels, vyapar, etc. all work.
     Terminal overrides .page-content back to overflow:hidden in terminal.html
     so its inner chain-wrap handles scroll instead. */
  /* html overflow:hidden changes the fixed-position containing block on Android Chrome
     and blocks touch scroll events from reaching inner overflow:scroll containers.
     Use overscroll-behavior:none instead — prevents pull-to-refresh without blocking children. */
  html          { height: 100dvh; overscroll-behavior: none; }
  body          { height: 100%; margin: 0; overscroll-behavior: none; padding-bottom: 0 !important; }
  #app          { height: 100%; display: flex; flex-direction: column; }
  .topbar       { position: sticky !important; top: 0; flex-shrink: 0; z-index: 1001; }
  /* page-content: block scroll container; position:fixed pages (levels, vyapar) escape it */
  .page-content {
    flex: 1;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  /* App pages: clear the bottom tab bar */
  body.has-mobile-tabbar .page-content { padding-bottom: var(--tabbar-h, 58px); }
  /* Hide site footer on app pages — bottom tab bar replaces navigation. Footer would
     consume vertical space inside the constrained .page-content. */
  body.has-mobile-tabbar .site-footer { display: none !important; }

  /* Public pages: no app shell — let the whole document scroll normally so
     page content, the disclaimer strip, and the footer all flow in one page. */
  html:has(body:not(.has-mobile-tabbar)) { height: auto; overflow: visible; }
  body:not(.has-mobile-tabbar)          { height: auto; overflow: visible; }
  body:not(.has-mobile-tabbar) #app     { height: auto; overflow: visible; }
  body:not(.has-mobile-tabbar) .page-content {
    flex: none;
    overflow: visible;
  }
  /* Analytics bar: enough height for label + value stack; never shrink. */
  .ri-analytics { min-height: 54px; flex-shrink: 0 !important; }
  .ri-metric    { min-height: 54px; overflow: hidden; }

  /* Layout wrappers fill .page-content */
  .signals-layout,
  .options-layout,
  .maxpain-layout,
  .historical-layout,
  .expiry-layout,
  .status-layout,
  .papertrade-layout,
  .comparison-layout,
  .nifty-layout {
    flex: 1;
    min-height: 0;
    overflow: visible;
  }

  /* Topbar: exactly --topbar-h-mobile tall, padding only horizontal */
  .topbar {
    grid-template-columns: 1fr auto;
    padding: 0 12px !important;
  }
  .topbar__username { display: none; }
  .topbar__right  { gap: 6px; padding: 0 8px; }
  .live-badge span:last-child { display: none; }

  /* App pages: fixed single-row topbar, hamburger/top nav hidden — bottom tab bar replaces navigation */
  body.has-mobile-tabbar .topbar {
    height: var(--topbar-h-mobile, 48px) !important;
    min-height: var(--topbar-h-mobile, 48px) !important;
  }
  body.has-mobile-tabbar .nav-hamburger,
  body.has-mobile-tabbar .topbar__nav { display: none !important; }

  /* Public pages: top nav becomes a second, horizontally-scrollable topbar row */
  body:not(.has-mobile-tabbar) .topbar {
    height: auto !important;
    grid-template-rows: var(--topbar-h-mobile, 48px) auto;
  }
  body:not(.has-mobile-tabbar) .topbar__left  { grid-row: 1; grid-column: 1; }
  body:not(.has-mobile-tabbar) .topbar__right { grid-row: 1; grid-column: 2; }
  body:not(.has-mobile-tabbar) .topbar__nav {
    /* Override legacy global.css mobile rule that turns this into a fixed bottom bar */
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
    height: auto;
    background: transparent;
    backdrop-filter: none;
    border-top: none;
    justify-content: flex-start;
    grid-row: 2;
    grid-column: 1 / -1;
    overflow-x: auto;
    padding: 0 0 8px;
  }

  /* Page grids → single column */
  .signals-top-row    { grid-template-columns: 1fr 1fr; }
  .signals-top-row .btc-price-card { grid-column: 1 / -1; }
  .signals-bottom-row { grid-template-columns: 1fr; }

  .options-panels     { grid-template-columns: 1fr; }
  .options-panel__summary { grid-template-columns: repeat(2, 1fr); }
  .options-comparison-bar { grid-template-columns: 1fr; }

  .maxpain-main       { grid-template-columns: 1fr; min-height: auto; }

  .historical-stats   { grid-template-columns: 1fr; }
  .historical-charts  { grid-template-columns: 1fr; }

  .expiry-countdown   { grid-template-columns: 1fr; }

  .status-cards       { grid-template-columns: 1fr; }
  .exchange-status-card__grid { grid-template-columns: repeat(2, 1fr); }

  .portfolio-strip    { grid-template-columns: repeat(2, 1fr); }
  .papertrade-main    { grid-template-columns: 1fr; }
  .perf-analytics     { grid-template-columns: repeat(2, 1fr); }

  .comparison-charts  { grid-template-columns: 1fr; }
  .comparison-row     { grid-template-columns: 1fr; gap: 0; }
  .comparison-row__cell { border-left-width: 3px; }

  .settings-layout    { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .settings-row       { grid-template-columns: 1fr; gap: 8px; }
  .db-info-grid       { grid-template-columns: 1fr 1fr; }

  /* options-panel__table: remove hardcoded min-height on mobile */
  .options-panel__table { min-height: 0; }

  /* Tables */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 480px; }

  /* Toast above nav */
  .toast-container { bottom: 64px; right: 12px; left: 12px; }
  .toast { min-width: unset; max-width: 100%; }
}


/* ─── 480px Mobile ──────────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .portfolio-strip  { grid-template-columns: 1fr 1fr; }
  .perf-analytics   { grid-template-columns: 1fr 1fr; }
  .signals-top-row  { grid-template-columns: 1fr; }
  .signals-top-row .btc-price-card { grid-column: 1; }
  .db-info-grid     { grid-template-columns: 1fr; }
  .stat-card__grid  { grid-template-columns: 1fr 1fr; }
  .nav-tab          { min-width: 48px; }
}


/* ─── Site Footer ───────────────────────────────────────────────────────────*/
.site-footer {
  background: var(--deep);
  border-top: 1px solid var(--border2);
  padding: 28px 0 16px;
  margin-top: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan) 30%, var(--gold) 70%, transparent);
  opacity: 0.35;
}

.site-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: start;
  gap: 24px;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.site-footer__logo {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cyan);
}
.site-footer__tagline {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text3);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  align-items: center;
}
.site-footer__link {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text2);
  padding: 4px 12px;
  border-right: 1px solid var(--border);
  transition: color var(--trans-fast);
  text-decoration: none;
}
.site-footer__link:last-child { border-right: none; }
.site-footer__link:hover { color: var(--cyan); }

.site-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.site-footer__data {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text2);
}
.site-footer__accent      { color: var(--cyan); font-weight: 700; }
.site-footer__accent--gold { color: var(--gold); font-weight: 700; }
.site-footer__copy {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 0.5px;
}

/* Footer mobile */
@media (max-width: 768px) {
  .site-footer {
    padding-bottom: 72px; /* clear bottom nav bar */
  }
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .site-footer__meta { align-items: flex-start; }
  .site-footer__nav  { gap: 4px 0; }
  .site-footer__link { font-size: 9px; padding: 4px 8px; }
}

/* ── Algo Tick Log Panel ─────────────────────────────────────────────────── */
.algo-tick-log { padding: 0 20px 16px 20px; }
.tick-log-table { font-size: 12px; }

@media (max-width: 1024px) {
  .tick-log-table { font-size: 11px; }
}

@media (max-width: 768px) {
  .algo-tick-log { padding: 0 10px 12px 10px; }
  .tick-log-table { font-size: 11px; min-width: 420px !important; }
  .tick-log-table th, .tick-log-table td { padding: 5px 6px !important; }
}

@media (max-width: 480px) {
  .algo-tick-log { padding: 0 6px 10px 6px; }
  .tick-log-table { font-size: 10px; min-width: 360px !important; }
  .tick-log-table th, .tick-log-table td { padding: 4px 5px !important; }
}