/* Fujitsu TMSP — responsive layer (phones and small tablets)
   ============================================================================

   The site was built desktop-only. This file adapts it to a phone WITHOUT
   touching the desktop rendering: every visual rule below lives inside
   `@media (max-width: 820px)` (with a tighter 480px tier for small phones), so
   above 820px the browser parses this file and applies nothing from it. The
   desktop is safe by construction, not by inspection — keep it that way, and
   never add a rule here outside a media query except the two burger rules at
   the top, which hide markup that exists only for this layer.

   Load order: linked LAST in <head>, after each page's inline <style>, so an
   equal-specificity tie goes to this file. Where a value has to beat an inline
   `style="…"` attribute (the header row, the fixed-width admin inputs) the
   declaration is `!important` — an author !important outranks an inline
   non-important declaration. Those are marked one by one below; do not sprinkle
   more.

   Colours come from the tokens defined at the top of tmsp.css. A literal only
   looks right in one theme, which is the same rule the rest of
   the codebase follows.

   Markup hooks this file depends on (both additive, invisible on desktop):
     - src/partials/topnav.php  — #tmsp-nav-toggle, .tmsp-nav-burger, .tmsp-nav-panel
     - the page headers         — .tmsp-pagehead / -id / -tools

   Measured baseline before this file existed, at a 390px viewport: every page
   scrolled sideways (scrollWidth 724–805px), the user/theme controls sat off
   screen, and the topnav's 12 buttons filled the first screenful.
   ========================================================================== */

/* The only rules outside a media query. The burger control is in the markup at
   every width; on desktop it must not exist visually. */
#tmsp-nav-toggle { display: none; }
.tmsp-nav-burger { display: none; }


@media (max-width: 820px) {

  /* ── Shell ───────────────────────────────────────────────────────────────
     28px of padding on a 390px screen is 14% of it. The card's decorative HUD
     corners are 60px squares — at this size they overlap the content they
     frame, so they go. */
  .tmsp-wrap {
    width: 100%;
    padding: 12px;
  }
  .tmsp-card {
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 16px;
    /* A card is often a grid item, and a grid item's automatic minimum size is
       its min-content — which a wide table inside propagates all the way up,
       stretching the column past the viewport even though the table itself
       sits in an overflow-x:auto wrapper. That rule only zeroes out for the
       scroll container itself, never for the block chain above it. */
    min-width: 0;
  }
  .dash-row > *,
  .tmsp-card > * { min-width: 0; }
  .tmsp-card::before,
  .tmsp-card::after { display: none; }

  /* .tmsp-sweep is `inset:-120px` — 240px wider than its card — and its
     keyframes then translate it another 30% to the right. body{overflow-x:
     hidden} does not save us: that value propagates to the viewport, so the
     overflow is not clipped at the card, it just becomes unreachable content
     off the right edge. Pulled back to the card's box, with a narrower travel
     so the animation still reads and never leaves it. */
  .tmsp-sweep {
    inset: 0;
    animation-name: tmsp-sweep-contained;
  }
  @keyframes tmsp-sweep-contained {
    0%, 100% { transform: translateX(-40%); }
    50%      { transform: translateX(0); }
  }

  /* ── Page header ─────────────────────────────────────────────────────────
     The row is a non-wrapping flex from an inline style, so the identity block
     and the ADMINS/USER/Tema block sat side by side and the second one fell
     off the screen. !important is what beats the inline declaration. */
  .tmsp-pagehead {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .tmsp-pagehead-id { gap: 10px !important; }
  /* flex-shrink:0 is set inline: without overriding it the cluster keeps its
     max-content width (742px on the Market Big Data card) and wrapping inside
     it never gets a chance to happen. */
  .tmsp-pagehead-tools {
    flex-wrap: wrap !important;
    flex-shrink: 1 !important;
    min-width: 0;
  }

  .tmsp-title {
    font-size: 19px;
    letter-spacing: .06em;
    overflow-wrap: anywhere;   /* "INTELLIGENCE" was clipped mid-word */
  }
  .tmsp-top { flex-wrap: wrap; }

  /* The theme picker keeps its hover/focus dropdown (a tap focuses the button,
     which :focus-within catches) but must open inwards, not off the edge. */
  .tmsp-pagehead-tools .tmsp-dropdown-menu {
    right: 0;
    left: auto;
    min-width: 0;
    max-width: min(86vw, 280px);
  }

  /* ── Navigation ──────────────────────────────────────────────────────────
     52 nav_items rows, 12 of them top level, previously rendered as a wall of
     buttons ahead of the content. Now collapsed behind ☰ and driven by a
     checkbox — no JS, and nothing about tmsp_nav_render_node() changes. */
  .tmsp-nav-burger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--red-35);
    border-radius: 12px;
    background: var(--red-08);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
  }
  #tmsp-nav-toggle:checked ~ .tmsp-nav-burger {
    border-color: var(--red-55);
    background: var(--red-14);
  }
  #tmsp-nav-toggle:not(:checked) ~ .tmsp-nav-panel { display: none; }

  .tmsp-nav-panel {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
  }
  .tmsp-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .tmsp-nav-left,
  .tmsp-nav-right {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  .tmsp-nav-right { margin-top: 6px; }
  .tmsp-nav .tmsp-btn,
  .tmsp-nav form,
  .tmsp-nav form .tmsp-btn {
    display: block;
    width: 100%;
    min-height: 42px;
    line-height: 30px;
    text-align: left;
  }

  /* Inside the panel a dropdown is not a dropdown: :hover is unreliable on
     touch, so every menu renders open, indented under its heading. Scoped to
     the panel so the theme picker in the header keeps behaving like a menu. */
  .tmsp-nav-panel .tmsp-dropdown { width: 100%; }
  .tmsp-nav-panel .tmsp-dropdown-menu,
  .tmsp-nav-panel .tmsp-dropdown-submenu-flyout {
    position: static !important;   /* beats the inline right/left overrides */
    display: block;
    min-width: 0 !important;       /* beats $tmspNavMenuStyle's 280px */
    width: auto;
    max-width: none;
    margin: 4px 0 8px 14px;
    border: none;
    border-left: 2px solid var(--red-25);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }
  .tmsp-nav-panel .tmsp-dropdown-menu::before { display: none; }
  .tmsp-nav-panel .tmsp-dropdown-menu a,
  .tmsp-nav-panel .tmsp-dropdown-menu button,
  .tmsp-nav-panel .tmsp-dropdown-submenu-flyout a {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .tmsp-nav-panel .tmsp-dropdown-submenu-label { min-height: 38px; }

  /* ── Tables ──────────────────────────────────────────────────────────────
     A table scrolls inside its own box instead of dragging the page sideways
     (admin's user list is 844px, the Market Database's is 5773px). Several
     pages already wrap their tables in an overflow-x:auto div — that keeps
     working, this only covers the ones that do not. */
  .tmsp-table,
  .tmsp-modal-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .tmsp-table th,
  .tmsp-table td { padding: 8px 10px; }

  /* The P&L charts come from two generators in src/crypto.php: one writes a
     viewBox and scales, the other writes width/height attributes, and for that
     one `width:100%` (crypto_dashboard_global.php:195) crops the drawing at
     the card edge instead of shrinking it. Give the card the scroll and the
     chart its own geometry back. */
  .chart-card { overflow-x: auto; }
  .chart-card svg:not([viewBox]) {
    width: auto !important;
    max-width: none;
  }

  /* ── Forms and touch targets ─────────────────────────────────────────────
     16px is the threshold below which iOS Safari zooms into a focused field.
     !important is for the inline width:180px/200px/220px fields in admin.php. */
  .tmsp-input,
  .tmsp-textarea,
  select.tmsp-input {
    width: 100% !important;
    max-width: 100%;
    font-size: 16px;
  }
  .tmsp-btn,
  .tmsp-btn-sm { min-height: 38px; }
  .tmsp-inline-select { max-width: 100%; }

  /* Two-column form grids written as inline styles (admin.php, the calendar's
     time fields). They have no class to hook, and one column is the only thing
     that fits. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ── Modals ──────────────────────────────────────────────────────────────*/
  .tmsp-modal { padding: 2vh 8px; }
  .tmsp-modal-box {
    max-width: 100% !important;
    width: 100%;
  }

  /* ── admin.php ───────────────────────────────────────────────────────────
     The permission rows are a 300px/220px/110px grid set inline. */
  .tmsp-perm-row {
    grid-template-columns: 1fr !important;
    row-gap: 6px;
  }

}


@media (max-width: 480px) {

  /* The status ticker: tighter type so more of the line is on screen. */
  .tmsp-footer { font-size: 11px; }
  .tmsp-ticker-label { font-size: 9.5px; }

  .tmsp-wrap { padding: 10px 8px; }
  .tmsp-card { padding: 12px; }
  .tmsp-title { font-size: 16px; }

  /* Auto-fit grids whose 210–280px minimums still overflow a 360px phone. */
  .filter-grid,
  .detail-grid { grid-template-columns: 1fr !important; }
}