/* portal-responsive.css — parte din creator-portal.css (liniile 1272-1387).
   Footer-ul contextual al drawer-ului de review + pasul responsive: sub 640px fiecare
   rând de tabel devine card stivuit. Se încarcă ULTIMUL din setul portal.
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
/* ===========================================================================
   CONTEXT-AWARE REVIEW DRAWER FOOTER  (admin/drawer/footer.js) — APPENDED
   ---------------------------------------------------------------------------
   The drawer footer is rebuilt per creator status. For active/paused/rejected
   it shows a state pill on the left and a single action button on the right;
   .rv-foot-state pushes that button to the right edge (mirrors the existing
   .cp-btn-ok margin-left:auto used for the pending layout).
   =========================================================================== */
.rv-foot-state {
  display: inline-flex; align-items: center;
  margin-right: auto; /* push the trailing action button to the right edge */
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .01em;
  color: var(--ink-2);
}
/* Rejected badge variant (header pill) — pending/active variants already exist. */
.cp-verbadge.rej { color: var(--danger); border-color: oklch(0.6 0.18 25 / .4); background: oklch(0.6 0.18 25 / .12); }
body.cp-spatial .cp-verbadge.rej { color: oklch(0.78 0.16 22); background: oklch(0.6 0.18 25 / .16); border-color: oklch(0.7 0.16 25 / .4); }
@media (max-width: 560px) {
  .rv-foot-state { margin-right: 0; width: 100%; }
}

/* ===========================================================================
   iOS — stop the page zooming when a field is tapped
   ---------------------------------------------------------------------------
   Safari on iPhone zooms the whole page in when a text-entry control with a
   font-size under 16px takes focus, and it does NOT zoom back out on blur. From
   the first tap onwards the layout is wider than the screen and the page slides
   left and right under the finger. It reads as a broken layout; it is platform
   behaviour, and no amount of hunting for an overflowing element finds it —
   measured on production, /register has ZERO horizontal overflow at 320px and
   at 390px, before and after every step is opened.

   What it actually had was 24 text controls under the threshold: .ct-input at
   15px, .cp-sel at 14.5px, the rate inputs at 14px. Raising them to exactly 16
   removes the trigger; measured again at 320px afterwards, still zero overflow,
   so nothing outgrows its row at the larger size.

   This file is the right home for the rule even though the controls are defined
   in three others (forms.css, portal-auth.css, portal-drawers.css): it loads
   after all of them, and every page in the app that renders a form loads it —
   all 17, checked. One rule, one place, whole app. The alternative, a
   `maximum-scale=1` viewport, "fixes" it by taking pinch-zoom away from people
   who need it, which is not a trade we make.

   Deliberately NOT covered: input[name="website"], the honeypot. It carries no
   class, is off-screen and unfocusable, and giving the bot trap the same
   treatment as a real field would be pointless.
   =========================================================================== */
@media (max-width: 820px) {
  .ct-input,
  .ct-input-sm,
  .cp-sel,
  .cp-rate .inp input,
  .cp-find input { font-size: 16px; }
}

/* ============================================================================
   RESPONSIVE / MOBILE PASS  (fix/responsive-mobile)
   ----------------------------------------------------------------------------
   The portal/admin .cp-tr tables are `display:grid` with per-table column
   templates and only ever REDUCED columns on phones — they never stacked, so
   at 320-400px rows overflowed (or got clipped by .cp-table overflow:hidden,
   cutting off the Status pill / action button). The .cp-brief-tr never even
   hid its .hide-sm cells (7 columns rammed into 3 tracks → overlap).

   Fix = below 640px every data row becomes a STACKED CARD: the header row is
   hidden, each cell drops onto its own line, and a mono label drawn from the
   cell's data-label attribute identifies the value. ALL columns (including the
   former .hide-sm ones) become visible and readable. Desktop (>640px) is
   untouched — these rules are mobile-scoped only.

   Markup hook: body cells carry data-label="Header" (added in admin/creatori,
   admin/plati, app/plati, app/brief-uri .astro). The identity cell (avatar +
   name) is marked .cp-cell-id and renders label-free, full width.
   ========================================================================== */
@media (max-width: 640px) {
  /* very narrow: stat tiles go single column (was 2-up from the 900px rule).
     Overrides the inline grid-template-columns:repeat(4,1fr) some pages set. */
  .cp-stats { grid-template-columns: 1fr !important; }

  /* ---- table → stacked cards ---- */
  .cp-table { overflow: visible; } /* let nothing get clipped while stacked */
  .cp-table .cp-tr.head { display: none; }

  .cp-table .cp-tr:not(.head) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 16px;
    /* neutralise the desktop grid templates these rows still carry */
    grid-template-columns: none;
  }

  /* every cell: a labelled row (label left, value right). */
  .cp-table .cp-tr:not(.head) > [role="cell"],
  .cp-table .cp-tr:not(.head) > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    width: 100%;
    text-align: left;
  }
  /* re-show the columns desktop hides on phones — labelled, they read fine. */
  .cp-table .cp-tr:not(.head) .hide-sm { display: flex; }

  /* the mono header label, taken from data-label. */
  .cp-table .cp-tr:not(.head) > [role="cell"][data-label]::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  /* don't print an empty label for unlabeled / action cells. */
  .cp-table .cp-tr:not(.head) > [role="cell"]:not([data-label])::before,
  .cp-table .cp-tr:not(.head) > [role="cell"][data-label=""]::before { content: none; }

  /* identity cell (avatar + name) = full-width banner, no label, no value
     pushed to the right. */
  .cp-table .cp-tr:not(.head) > .cp-cell-id {
    justify-content: flex-start;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2px;
  }
  .cp-table .cp-tr:not(.head) > .cp-cell-id::before { content: none; }
  .cp-cell-id .cp-cr-id,
  .cp-cell-id .cp-brief-brand { min-width: 0; }
  .cp-cell-id .cp-cr-id .pt,
  .cp-cell-id .cp-brief-brand .pt { white-space: normal; }

  /* the value side of each labelled cell stays right-aligned + truncating. */
  .cp-table .cp-tr:not(.head) > [role="cell"][data-label] > * { text-align: right; }

  /* action cell (Editează / Marchează button) — full-width tap target. */
  .cp-table .cp-tr:not(.head) > .cp-cell-act { justify-content: stretch; }
  .cp-table .cp-tr:not(.head) > .cp-cell-act .cp-btn { width: 100%; justify-content: center; }

  /* truncated objective cell: allow it to wrap now there's room. */
  .cp-table .cp-tr:not(.head) > .cp-cell-wrap { white-space: normal !important; max-width: none !important; overflow: visible !important; }

  /* ---- drawer account rows: stop long handles overflowing ---- */
  .rv-acc { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; }
  .rv-acc .h { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}