/* ============================================================================
   cp-mobile.css - mobile/tablet layer for the Control Panel.

   Separate file by design: styles.css is hand-maintained and must not be touched
   by tooling. Loaded AFTER styles.css so it wins on specificity ties. Everything
   is inside a media query, so desktop renders byte-identically to before.

   Companion: cp-mobile.js injects the top bar, the drawer controls, and wraps
   every <table> in a scroll container.

   Layering (matters):
     topbar   250  - fixed chrome
     backdrop 290  - dims content when the drawer is open
     rail     300  - drawer sits ABOVE the topbar, so opening it covers the
                     hamburger instead of the hamburger covering the logo
   ========================================================================== */

@media (max-width: 900px) {

  /* ---------- Fixed top bar ----------
     A floating button over the content obstructed things while scrolling. Real
     chrome with matching padding on .main means content flows beneath it and is
     never hidden. */
  .cp-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    z-index: 250;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
  }
  .cp-topbar .cp-nav-toggle {
    width: 40px; height: 40px;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 8px);
    color: var(--text);
    font-size: 17px; line-height: 1;
    cursor: pointer;
  }
  .cp-topbar .cp-nav-toggle:active { transform: translateY(1px); }
  /* Login page shows the brand logo where the (useless there) nav toggle would be. */
  .cp-topbar .cp-topbar-logo { height: 32px; width: auto; flex: 0 0 auto; display: block; }
  .cp-topbar .theme-toggle {
    margin-left: auto;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 12px;
    gap: 7px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm, 8px);
  }
  .cp-topbar .cp-topbar-title {
    font-family: var(--mono);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---------- Rail becomes an off-canvas drawer ---------- */
  .shell { display: block; }
  .rail {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: min(84vw, 300px);
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 300;                       /* above .cp-topbar - covers the toggle */
    box-shadow: 0 0 40px rgba(0,0,0,.5);
    overscroll-behavior: contain;
  }
  body.cp-nav-open .rail { transform: translateX(0); }

  .cp-nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(4,6,10,.6);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 290;
  }
  body.cp-nav-open .cp-nav-backdrop { opacity: 1; pointer-events: auto; }
  body.cp-nav-open { overflow: hidden; }

  /* ---------- Main column ---------- */
  .main {
    padding: 66px 14px 48px;            /* 52px bar + breathing room */
    width: 100%;
  }

  /* ---------- Tables ----------
     cp-mobile.js wraps every table in .cp-tscroll. The WRAPPER scrolls and the
     TABLE is what is over-wide - putting overflow and min-width on the same
     element (as an earlier version did) can never scroll, because the element's
     own min-width stops it shrinking to its container. */
  .cp-tscroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .cp-tscroll > table { min-width: 620px; margin: 0; }

  /* Cards must not clip the wrapper. */
  .card { overflow: visible; padding: 16px 14px; border-radius: 10px; }

  table { font-size: 12.5px; }
  th, td { padding: 10px 12px; }
  td .row-actions { justify-content: flex-start; }

  /* ---------- Tab strips scroll ----------
     .segment is flex/nowrap with a 22px gap; on a phone the later tabs simply
     run off the edge with no way to reach them. Make the strip itself scroll. */
  .segment {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 18px;
    scrollbar-width: none;
  }
  .segment::-webkit-scrollbar { display: none; }
  .segment > * { flex: 0 0 auto; white-space: nowrap; }

  /* ---------- Inline-styled flex rows may wrap ----------
     These pages use `style="display:flex"` rows extensively, which default to
     nowrap and push trailing buttons off-screen (cp-support's Refresh sat 24px
     past the edge). Wrapping is nearly always better than overflow on a phone.
     .segment is excluded - it scrolls instead, see above. */
  .main div[style*="flex"]:not(.segment) { flex-wrap: wrap; }

  /* ---------- Page header stacks ---------- */
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1 1 auto; justify-content: center; }
  .page-head h1 { font-size: 19px; }

  .card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .card-head > div:last-child { width: 100%; }

  /* ---------- Page-scoped row components ----------
     These classes live in per-page <style> blocks, not styles.css, which is why
     earlier selectors never reached them. They are all the same shape - icon +
     text + status pill + action buttons on one line - and all run off a phone
     screen, cutting off the trailing button (Remove, Edit, Adjust wallet).

     Three things are needed together: let the row wrap, let the text column
     shrink (a flex item defaults to min-width:auto and will refuse to go below
     its content width, forcing overflow), and give the action cluster its own
     full-width line so buttons are never half off-screen. */
  .account-head, .key-row, .pkg-card, .preset-item,
  .user-hero, .admin-hero, .session-row, .channel-card, .publish-block {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Text columns must be shrinkable, or they dictate the row width. */
  .account-head > div, .key-row > div, .pkg-card > div, .preset-item > div,
  .user-hero .meta, .admin-hero .meta, .session-row > div, .channel-card > div {
    min-width: 0;
  }

  /* Long identifiers break only when they genuinely cannot fit. `anywhere`
     was too greedy - it split "California" into "Carlifo rnia" and chopped
     emails mid-token once the column had been squeezed narrow. */
  .user-hero .meta, .admin-hero .meta, .account-head, .key-row, .preset-item {
    overflow-wrap: break-word;
  }

  /* Give the text column a real flex-basis. With `flex:1` (basis 0) it collapses
     to almost nothing and the buttons stay glued to the same line, which is what
     squeezed the account name. A basis forces the buttons to wrap instead. */
  .account-head > div:not(.account-logo),
  .pkg-card > .pkg-body,
  .preset-item > div:not(.acts),
  .user-hero .meta {
    /* !important is required: the markup carries an inline style="flex:1"
       (basis 0%), which no stylesheet selector can outrank. That inline basis
       is what let the column collapse to ~60px and shred the account name. */
    flex: 1 1 190px !important;
    min-width: 0;
  }

  /* Key rows: pills stay inline, each detail gets its own full-width line so
     the text is left-aligned instead of stranded mid-row. */
  .key-row { align-items: center; }
  .key-row > .pill { flex: 0 0 auto; }
  .key-row > div:not(.actions) { flex: 1 1 100%; min-width: 0; }

  /* Action clusters drop onto their own row rather than being clipped. */
  .preset-item .acts, .key-row .actions, .user-hero .actions,
  .account-head > .btn, .pkg-card > .btn {
    flex-wrap: wrap;
  }
  .preset-item .acts, .key-row .actions, .user-hero .actions {
    width: 100%;
    justify-content: flex-start;
    margin-top: 4px;
  }

  /* ---------- Two-column grids collapse ----------
     1fr 1fr at 414px leaves ~190px per column, which is too narrow for cards
     containing lists or long emails (the revenue page was the worst). Stat
     grids of short numbers stay two-up - see the 520px block below. */
  .main div[style*="1fr 1fr"]:not(.token-grid):not(.stat-row) {
    grid-template-columns: 1fr !important;
  }

  /* ---------- Forms ---------- */
  .field-group { grid-template-columns: 1fr !important; gap: 10px !important; }
  input, select, textarea { font-size: 16px; }   /* 16px stops iOS zoom on focus */

  /* ---------- Buttons: real touch targets ---------- */
  .btn { min-height: 40px; padding-inline: 14px; }
  .btn-sm { min-height: 34px; }

  /* ---------- Modals become bottom sheets ---------- */
  .overlay { padding: 0; align-items: flex-end; z-index: 400; }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 14px 14px 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }

  /* ---------- Modal footer ----------
     styles.css sets .modal-foot .btn{min-width:130px}; three of those plus gaps
     exceed a phone width, so they were being squashed and clipped. Stack them. */
  .modal-foot { flex-wrap: wrap; gap: 8px; }
  .modal-foot .btn { min-width: 0; flex: 1 1 100%; }

  /* ---------- Misc density ---------- */
  .stat-row { grid-template-columns: 1fr 1fr; }
  .chart-legend { flex-wrap: wrap; }
  .toast-wrap { left: 12px; right: 12px; bottom: 12px; }
}

/* Phones proper */
@media (max-width: 520px) {
  .main div[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  .token-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-row { grid-template-columns: 1fr; }
  .page-head .actions { flex-direction: column; }
  .page-head .actions .btn { width: 100%; }
}

/* Chrome only exists on small screens. */
@media (min-width: 901px) {
  .cp-topbar, .cp-nav-backdrop { display: none !important; }
  .cp-tscroll { overflow: visible; }        /* desktop keeps native layout */
}

@media (prefers-reduced-motion: reduce) {
  .rail, .cp-nav-backdrop { transition: none !important; }
}