/* portal-public.css — parte din creator-portal.css (liniile 575-699).
   Profil public (/c/[slug]) + butoane aprobă/respinge, empty row, paginare,
   bara de tab-uri mobilă și dimensiunile pozelor de profil.
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
/* ===================== PROFIL PUBLIC ===================== */
.cp-public { max-width: 980px; margin: 0 auto; padding: clamp(26px, 4vw, 50px) clamp(20px, 4vw, 40px) 80px; }
.cp-pub-back { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); text-decoration: none; display: inline-flex; gap: 7px; align-items: center; margin-bottom: 22px; }
.cp-pub-back:hover { color: var(--ink); }
.cp-pub-head { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .cp-pub-head { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.cp-pub-av { width: 96px; height: 96px; border-radius: 22px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--ff-mono); font-size: 30px; font-weight: 600; }
.cp-pub-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-pub-name h1 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.025em; min-width: 0; }
/* flex:none + nowrap so a long name can't shrink the pill into a green blob
   that overlaps the heading; flex-wrap on the parent drops it to the next line
   on narrow widths instead of squeezing it. */
.cp-verbadge { display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; font-family: var(--ff-mono); font-size: 11px; color: var(--signal); background: var(--signal-bg); border: 1px solid oklch(0.6 0.07 158 / .35); padding: 4px 10px; border-radius: 100px; line-height: 1.4; }
.cp-pub-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; color: var(--ink-2); font-size: 14px; }
.cp-pub-meta .mono { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); }
.cp-pub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin: 26px 0; }
.cp-pub-stat { border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px; background: var(--surface); }
.cp-pub-stat .pl { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.cp-pub-stat .nu { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 7px; }
.cp-pub-h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 34px 0 14px; }
/* Creator bio on the public profile. `pre-line` keeps the single newlines the
   creator typed inside a paragraph (blank lines already became separate <p>s);
   the max-width holds the measure at a readable ~70ch on wide screens. */
.cp-pub-about { max-width: 70ch; }
.cp-pub-about p { font-size: 15px; line-height: 1.7; color: var(--ink-2); white-space: pre-line; }
.cp-pub-about p + p { margin-top: 12px; }
.cp-rate-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cp-rate-pub { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface); }
.cp-rate-pub .rl { font-size: 13.5px; color: var(--ink-2); }
.cp-rate-pub .rv { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin-top: 6px; }
.cp-rate-pub .rv small { font-family: var(--ff-mono); font-size: 12px; font-weight: 500; color: var(--muted); }

/* admin detail drawer */
.cp-review { display: grid; grid-template-columns: 1fr; gap: 0; }

.cp-btn-ok { background: var(--signal); color: #fff; }
.cp-btn-ok:hover { filter: brightness(1.05); transform: translateY(-1px); }
.cp-btn-rej { background: transparent; color: var(--danger); border-color: oklch(0.58 0.072 25 / .4); }
.cp-btn-rej:hover { background: var(--danger-bg); }

.cp-empty-row { padding: 40px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- pagination (admin lists, 20/page) ---------- */
/* flex-wrap + centered so the three pieces stack gracefully on narrow phones
   instead of overflowing; the summary line sits between prev/next on one row
   at ≥360px. Disabled ends render as muted non-links (span[aria-disabled]). */
.cp-pgn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; }
.cp-pgn-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.cp-pgn-num { min-width: 34px; text-align: center; padding-left: 8px; padding-right: 8px; }
.cp-pgn-num.is-current { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); cursor: default; }
.cp-pgn-gap { color: var(--muted); padding: 0 2px; user-select: none; }
.cp-pgn-info { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.cp-pgn span[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Admin review drawer: warning ribbon on video tiles that have no poster —
   the reviewer must open the lightbox and confirm the clip actually plays. */
.cp-gallery-item .rv-no-preview {
  position: absolute; top: 6px; left: 6px; right: 6px; z-index: 2;
  padding: 3px 6px; border-radius: 8px;
  background: oklch(0.58 0.072 25 / .85); color: #fff;
  font-family: var(--ff-mono); font-size: 10px; line-height: 1.3; text-align: center;
  pointer-events: none;
}

/* responsive mobile note for app */
/* Base = hidden. The @media show rule MUST come after this block, else equal
   specificity + source order makes `display:none` win at mobile widths and the
   mobile nav never appears (sidebar is also hidden ≤820px → no nav at all). */
.cp-mob-tabs { display: none; gap: 4px; padding: 12px clamp(20px,4vw,40px) 0; flex-wrap: wrap; }
.cp-mob-tabs button, .cp-mob-tabs a { font-family: var(--ff-mono); font-size: 11px; padding: 8px 12px; border-radius: 100px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none; }
.cp-mob-tabs button.active, .cp-mob-tabs a.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 820px) {
  /* Variant C — fixed bottom tab bar (icon over short label). Replaces the
     wrap-to-two-rows pills. Sits above content; .cp-content gets bottom padding.
     grid-auto-flow:column (NOT a fixed repeat(N,1fr)): one column per tab,
     whatever the count. The old repeat(4,1fr) matched the shells' tab count on
     the day it shipped, then the admin grew a 5th tab (Clipuri, PR#24) and
     "Plăți" wrapped onto a second grid row on every phone. */
  .cp-mob-tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    flex-wrap: nowrap;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line-2);
  }
  .cp-mob-tabs a {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-family: var(--ff-sans); font-size: 10.5px; font-weight: 600; line-height: 1.1;
    padding: 4px 2px; border: 0; border-radius: 12px; background: transparent;
    color: var(--muted); text-align: center; white-space: nowrap;
  }
  .cp-mob-tabs a .mt-ic {
    width: 40px; height: 26px; display: grid; place-items: center; font-size: 16px;
    border-radius: 9px; background: transparent; transition: background .15s, color .15s;
  }
  .cp-mob-tabs a.active { color: var(--ink); }
  .cp-mob-tabs a.active .mt-ic { background: var(--signal-bg); color: var(--signal); }
  .cp-mob-tabs a .mt-badge {
    position: absolute; top: -1px; left: 50%; margin-left: 7px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 100px;
    background: var(--signal); color: #fff; font-size: 10px; font-weight: 700;
    display: grid; place-items: center; line-height: 1;
  }
  .cp-content { padding-bottom: 88px; } /* clear the fixed bar */
}
/* ≤359px (small phones): 6 admin tabs × ~50px columns clip "Aprobări" at the
   10.5px label size — step the type down instead of letting nowrap cut it. */
@media (max-width: 359px) {
  .cp-mob-tabs a { font-size: 9.5px; }
  .cp-mob-tabs a .mt-ic { font-size: 14px; height: 22px; }
  /* badge at 50%+7px overflows a ~50px column into the neighbour tab */
  .cp-mob-tabs a .mt-badge { margin-left: 1px; }
}

/* ---------- profile photo (image-slot avatars) ---------- */
.cp-av-up { display: flex; align-items: center; gap: 16px; }
.cp-av-up image-slot { width: 84px; height: 84px; flex: none; }
.cp-av-hint { font-size: 13px; color: var(--ink-2); line-height: 1.5; max-width: 34ch; }
.cp-av-hint b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
.cp-side-card image-slot.cp-av { width: 38px; height: 38px; flex: none; }
image-slot.cp-pub-av { width: 96px; height: 96px; flex: none; }
.rv-id image-slot.cp-av { width: 48px; height: 48px; flex: none; }