/* ============================================================================
   mobile-fixes.css  —  Mobile (≤640px / 390px target) table + text sizing.
   Loaded AFTER theme-aura.css / sma-terminal.css so these rules win.
   Goal: wide DATA tables scroll inside their OWN container (never the page),
   with a STICKY first column so row labels stay visible; long text wraps;
   headings/numbers scale down. No external hosts (CSP-safe), no data changes.
   ============================================================================ */

/* --- Reusable scroll wrapper (add class="sma-table-scroll" to a div around a table) --- */
.sma-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}
.sma-table-scroll::-webkit-scrollbar { height: 5px; }
.sma-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 3px;
}
/* Give the table a comfortable min-width so columns don't squish; it scrolls
   inside the wrapper instead of clipping. Only bumps tables that don't already
   declare their own min-width. */
.sma-table-scroll > table:not([style*="min-width"]):not([class*="min-w-"]) {
  min-width: 520px;
}

/* ============================================================================
   Small-screen behaviour
   ============================================================================ */
@media (max-width: 640px) {

  /* theme-aura.css turns EVERY <table> into display:block at ≤640px, which
     breaks position:sticky on cells. For tables we deliberately wrap in a
     scroll container, restore normal table layout so sticky columns work and
     the scroll happens on the WRAPPER, not the raw table. */
  .sma-table-scroll table,
  .tk-scroll table,
  .table-scroll table,
  .table-scroll-wrap table,
  .scroll-x table,
  .overflow-x-auto table {
    display: table !important;
    width: 100%;
    overflow: visible;
  }

  /* Make the common existing wrappers scroll their table on phones. */
  .tk-scroll,
  .table-scroll,
  .table-scroll-wrap,
  .scroll-x,
  .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
  }

  /* Sticky first column: keep the row label / symbol / rank visible while the
     rest of the row scrolls. Applies to tables inside any known scroll wrapper. */
  .sma-table-scroll table th:first-child,
  .sma-table-scroll table td:first-child,
  .tk-scroll table th:first-child,
  .tk-scroll table td:first-child,
  .table-scroll table th:first-child,
  .table-scroll table td:first-child,
  .table-scroll-wrap table th:first-child,
  .table-scroll-wrap table td:first-child,
  .scroll-x table th:first-child,
  .scroll-x table td:first-child,
  .overflow-x-auto table th:first-child,
  .overflow-x-auto table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-secondary, var(--tk-panel, #0c0f14));
    /* subtle divider so the frozen column reads as separate from scrolled cells */
    box-shadow: 1px 0 0 var(--tk-line, rgba(148,163,184,0.14));
  }
  /* Header first-cell must sit above scrolled body cells */
  .sma-table-scroll table thead th:first-child,
  .tk-scroll table thead th:first-child,
  .table-scroll table thead th:first-child,
  .table-scroll-wrap table thead th:first-child,
  .scroll-x table thead th:first-child,
  .overflow-x-auto table thead th:first-child {
    z-index: 3;
  }
  /* Light / editorial themes: match the frozen-cell bg to the page. */
  [data-theme="light"] .sma-table-scroll table th:first-child,
  [data-theme="light"] .sma-table-scroll table td:first-child,
  [data-theme="light"] .tk-scroll table th:first-child,
  [data-theme="light"] .tk-scroll table td:first-child,
  [data-theme="light"] .table-scroll table th:first-child,
  [data-theme="light"] .table-scroll table td:first-child,
  [data-theme="light"] .table-scroll-wrap table th:first-child,
  [data-theme="light"] .table-scroll-wrap table td:first-child,
  [data-theme="light"] .scroll-x table th:first-child,
  [data-theme="light"] .scroll-x table td:first-child,
  [data-theme="light"] .overflow-x-auto table th:first-child,
  [data-theme="light"] .overflow-x-auto table td:first-child,
  [data-theme="editorial"] .sma-table-scroll table th:first-child,
  [data-theme="editorial"] .sma-table-scroll table td:first-child,
  [data-theme="editorial"] .tk-scroll table th:first-child,
  [data-theme="editorial"] .tk-scroll table td:first-child,
  [data-theme="editorial"] .table-scroll table th:first-child,
  [data-theme="editorial"] .table-scroll table td:first-child {
    background: var(--bg-secondary, #f4f5f8);
  }

  /* Long unbroken strings (0x addresses, tx hashes) wrap inside cells. */
  td, th { overflow-wrap: anywhere; word-break: break-word; }

  /* Numeric/data cells shouldn't wrap mid-number — they scroll instead. */
  .tk-table td, .tk-table th,
  .data-table td, .data-table th,
  .matrix td, .matrix th { white-space: nowrap; }
  /* …but the sticky label column may wrap so it stays narrow. */
  .sma-table-scroll table td:first-child,
  .tk-scroll table td:first-child,
  .table-scroll table td:first-child,
  .table-scroll-wrap table td:first-child,
  .scroll-x table td:first-child,
  .overflow-x-auto table td:first-child {
    white-space: normal;
    max-width: 42vw;
  }

  /* ---- Heading / number scaling on phones ---- */
  h1 { font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.15; }
  h2 { font-size: clamp(1.25rem, 5.5vw, 1.6rem); line-height: 1.2; }
  .tk-head-title, .page-title { font-size: clamp(1.4rem, 6.5vw, 2rem); }
  /* Oversized hero stat numbers shrink so they don't force page width. */
  .stat-big, .big-number, .metric-value, .tk-stat-num {
    font-size: clamp(1.25rem, 6vw, 2rem);
    overflow-wrap: anywhere;
  }
}

/* Extra-narrow phones (≤390px): tighten table cell padding so more fits. */
@media (max-width: 400px) {
  .sma-table-scroll table th,
  .sma-table-scroll table td,
  .tk-scroll table th,
  .tk-scroll table td,
  .tk-table th, .tk-table td,
  .data-table th, .data-table td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.8125rem;
  }
}