/* portal-cards.css — parte din creator-portal.css (liniile 700-1089).
   Blocul design-fidelity: primitiva .cp-ava, tonurile status pill, rândurile de
   review admin, cardurile de brief, grilele de tabel admin, fluxul vertical unificat,
   media din galerie + overlay-ul de aprobare pe clip, câmpurile de formular partajate.
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
/* ============================================================================
   DESIGN-FIDELITY FIX (fix/design-fidelity)
   The live .astro pages render real avatars as <img src={avatar_url}> and use
   a set of BEM-style class names (cp-status--new, cp-cr-id, cp-review-row,
   cp-brief-card, cb-*, cp-brief-tr, cp-empty-*, cp-field/label/input …) that
   the prototype JS never produced, so neither stylesheet defined them. This
   block restores the prototype's visual system for that real markup.
   Source of truth: docs/design-reference/creator-portal-spatial.html.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   P1 · ROOT FIX — constrain every PROFILE-PHOTO <img> (.cp-av / .cp-pub-av).
   An <img> placed inside an avatar box has no intrinsic-size cap of its own, so
   it renders at full resolution and shreds the dashboard + admin table layout.
   (Initials/logo avatars now use the .cp-ava primitive, whose `> img` rule and
   img.cp-ava block handle their photo children — see the primitive above.)
   --------------------------------------------------------------------------- */
img.cp-av,
.cp-side-card img.cp-av,
img.cp-pub-av,
.cp-pub-head img.cp-pub-av {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The bare <img class="cp-av"> in the sidecard / profile editor needs its own
   box size (the existing sizing rules target `image-slot.cp-av`, not <img>). */
.cp-side-card img.cp-av { width: 38px; height: 38px; flex: none; border-radius: 50%; }
.cp-av-up img.cp-av    { width: 84px; height: 84px; flex: none; border-radius: 50%; }
img.cp-pub-av          { width: 96px; height: 96px; flex: none; border-radius: 22px; }

/* ---------------------------------------------------------------------------
   STATUS PILL TONES — single source. Live markup (.astro statusClass maps +
   src/scripts/portal/drawer/header.js renderStatus) emits double-dash modifiers
   (cp-status--new / --active / --done / --rej). The base .cp-status chrome is
   defined above; these set the palette per state.
   --------------------------------------------------------------------------- */
.cp-status--new    { color: var(--signal);  background: var(--signal-bg); }
.cp-status--active { color: var(--ink);      background: var(--paper-2); }
.cp-status--done   { color: var(--muted);    background: var(--paper-2); }
.cp-status--rej    { color: var(--danger);   background: var(--danger-bg); }

/* ---------------------------------------------------------------------------
   PRIMITIVE · .cp-ava — mono-initial AVATAR chip (PR4 consolidation).
   Single source for every initials/logo avatar that is NOT the profile-photo
   image-slot (.cp-av). Base chrome = ink fill, paper text, mono, centered.
   Size + shape via modifiers; each maps EXACTLY to the value its prior
   per-selector rule had, so rendering is byte-identical in both themes.
     --xs  28px  (alloc list)        --sm  32px  (admin table)
     --md  38px  (admin side-card)   --lg  48px  (drawer header)
     --rounded 10px squircle (admin review row)  --soft 8px (brief logo)
     --hero 96px/22px (public profile header)
   An <img> child fills + covers the box (used by cr-av / review-row / logos).
   --------------------------------------------------------------------------- */
.cp-ava {
  flex: none; display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-family: var(--ff-mono); font-weight: 600;
  border-radius: 50%;
  object-fit: cover; /* ignored on text chips; covers when .cp-ava IS an <img> */
}
.cp-ava > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* When .cp-ava IS the <img> itself (e.g. admin review row avatar), it fills its
   own modifier box and covers — block display, no grid placement artifacts. */
img.cp-ava { display: block; }
.cp-ava--xs   { width: 28px; height: 28px; font-size: 10px; overflow: hidden; }
.cp-ava--sm   { width: 32px; height: 32px; font-size: 11px; overflow: hidden; }
.cp-ava--md   { width: 38px; height: 38px; font-size: 13px; }
.cp-ava--lg   { width: 48px; height: 48px; font-size: 16px; }
.cp-ava--rounded { width: 40px; height: 40px; border-radius: 10px; font-size: 13px; overflow: hidden; }
.cp-ava--soft { width: 32px; height: 32px; border-radius: 8px; font-size: 11px; overflow: hidden; }
.cp-ava--hero { width: 96px; height: 96px; border-radius: 22px; font-size: 30px; }

/* ---------------------------------------------------------------------------
   P2 · ADMIN — /admin/creatori table cell (cp-cr-id + .cp-ava + pt/ps + rating)
   Mirrors the prototype's .cp-cr-who / .av treatment.
   --------------------------------------------------------------------------- */
.cp-cr-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cp-cr-id .pt { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-cr-id .ps { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.cp-rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.cp-rating-star { color: var(--pending); font-size: 13px; }

/* ---------------------------------------------------------------------------
   P2 · ADMIN — /admin approvals review rows (#cpAdminList .cp-review-row)
   Prototype shipped .cp-admin-row (who/av/nm/sub/thumbs/acts); live renders
   .cp-review-row with rv-av-host / rv-info / rv-nm / rv-sub / rv-thumbs /
   rv-date / rv-acts (Vezi · Aprobă · Respinge). Same row treatment.
   --------------------------------------------------------------------------- */
.cp-review-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  transition: background .14s;
}
.cp-review-row:last-child { border-bottom: none; }
.cp-review-row:hover { background: var(--paper-2); }
.cp-review-row .rv-av-host {
  flex: none; width: 40px; height: 40px; border-radius: 10px; overflow: hidden;
  display: block;
}
/* The avatar chip itself (img or initials span) is the .cp-ava--rounded
   primitive (40px / 10px squircle / mono) — see the primitive block above. */
.cp-review-row .rv-info { min-width: 0; }
.cp-review-row .rv-nm { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-review-row .rv-sub { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.cp-review-row .rv-date { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
/* portfolio thumbnail strip — quick visual cue before opening the drawer */
.cp-review-row .rv-thumbs { display: flex; gap: 5px; }
.cp-review-row .rv-thumb {
  width: 30px; height: 38px; border-radius: 5px; flex: none;
  object-fit: cover; display: block;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
/* Vezi / Aprobă / Respinge */
.cp-review-row .rv-acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
/* Uniform width so the action buttons line up in a column across rows — the
   middle label varies (Ascunde / Reactivează / Aprobă), which otherwise shifts
   the whole group left/right row-to-row. */
.cp-review-row .rv-acts .cp-btn { min-width: 104px; justify-content: center; white-space: nowrap; }
@media (max-width: 760px) {
  /* Variant 1 — stacked card: avatar + name/meta on top, buttons full-width below.
     Fixes the old squeezed 3-column grid that wrapped the meta line word-by-word. */
  .cp-review-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "av info" "acts acts";
    gap: 10px 12px; align-items: center; padding: 14px 16px;
  }
  .cp-review-row .rv-av-host { grid-area: av; }
  .cp-review-row .rv-info { grid-area: info; }
  /* one clean line, ellipsis — never break word-by-word */
  .cp-review-row .rv-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cp-review-row .hide-sm { display: none; } /* thumbnails + date hidden on mobile */
  .cp-review-row .rv-acts { grid-area: acts; display: flex; gap: 8px; }
  .cp-review-row .rv-acts .cp-btn { flex: 1; min-width: 0; } /* full-width, equal */
}

/* ---------------------------------------------------------------------------
   P2/P3 · BRIEF CARD — live home + /app/brief-uri render .cp-brief-card with
   cb-logo / cb-body / cb-brand / cb-meta / cb-due / cb-right / cb-budget.
   Prototype used .cp-brief (blogo/bn/bmeta/bbudget). Restyle the real markup.
   --------------------------------------------------------------------------- */
.cp-brief-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px;
  border: 1px solid var(--line-2); border-radius: 13px; padding: 18px;
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s; cursor: pointer;
}
.cp-brief-card + .cp-brief-card { margin-top: 12px; }
.cp-brief-card:hover { border-color: var(--ink-2); box-shadow: 0 14px 34px -26px oklch(0.205 0.012 70 / .5); }
.cp-brief-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.cp-brief-card--done { opacity: .85; }
.cp-brief-card .cb-logo {
  flex: none; width: 42px; height: 42px; border-radius: 10px; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--ff-mono); font-weight: 600; font-size: 14px; color: var(--ink);
}
.cp-brief-card .cb-logo img { width: 100%; height: 100%; object-fit: cover; }
.cp-brief-card .cb-body { min-width: 0; }
.cp-brief-card .cb-brand { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.cp-brief-card .cb-meta { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); letter-spacing: .03em; margin-top: 3px; }
.cp-brief-card .cb-due { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.cp-brief-card .cb-due strong { color: var(--pending); font-weight: 700; }
.cp-brief-card .cb-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cp-brief-card .cb-budget { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
@media (max-width: 560px) {
  .cp-brief-card { grid-template-columns: auto 1fr; }
  .cp-brief-card .cb-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
}

/* ---------------------------------------------------------------------------
   P2 · ADMIN — extra table-row grids the live pages introduced.
   .cp-brief-tr → /admin/brief-uri ; .cp-cr-tr / .cp-apay-tr already declared
   above (lines 285-286) but need a row that also holds an action column.
   --------------------------------------------------------------------------- */
.cp-brief-tr { grid-template-columns: 1.4fr 0.9fr 1.2fr 0.8fr 0.6fr 0.7fr auto; }
.cp-brief-tr .pt { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.cp-brief-tr .ps { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
@media (max-width: 760px) {
  .cp-brief-tr { grid-template-columns: 1.4fr 0.8fr auto; }
  .cp-cr-tr   { grid-template-columns: 1.6fr 0.7fr 0.9fr; }
  .cp-apay-tr { grid-template-columns: 1.6fr 0.8fr auto; }
  .cp-cr-tr .hide-sm, .cp-apay-tr .hide-sm { display: none; }
}
/* table cells render real text; keep the mono header treatment but normal body */
.cp-tr:not(.head) .pv { font-family: var(--ff-mono); font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------------------
   P3 · UNIFIED FLOW — every portal/admin page now opens with identical top
   offset and identical vertical rhythm between top-level blocks. The old reset
   only zeroed margin-TOP (wrong axis) while each top block set its own bottom
   margin (.cp-verif 24px, .cp-stats 26px, .cp-tabs 20px, .cp-card-form 0), so
   profil/setari (padded card) drifted vs home/brief-uri/plati (bare blocks) —
   the "3 sus / 2 jos" offset. Owl-selector flow gives one consistent gap. */
.cp-content > *     { margin-top: 0; margin-bottom: 0; }
.cp-content > * + * { margin-top: var(--cp-flow); }

/* ---------------------------------------------------------------------------
   P4 · GALLERY MEDIA — portrait video/img shown WHOLE in the 3:4 frame.
   The public page (/c) tags media .cp-gallery-media; the profile editor gallery
   does not, so also catch raw <video>/<img> direct children. object-fit:contain
   guarantees nothing is ever cropped (9:16 Reels included); fullscreen keeps
   contain too. Frame ratio + dark bg are set on .cp-gallery-item above.
   --------------------------------------------------------------------------- */
.cp-gallery-item > img,
.cp-gallery-item > video,
.cp-gallery-media {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.cp-gallery-media:fullscreen,
.cp-gallery-media:-webkit-full-screen,
.cp-gallery-item > video:fullscreen,
.cp-gallery-item > video:-webkit-full-screen {
  object-fit: contain;
  width: 100%; height: 100%;
  background: #000;
}
/* delete affordance on portfolio tiles */
.cp-gallery-item { position: relative; }
.cp-gallery-del {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 7px;
  background: oklch(0.15 0.01 70 / .6); color: #fff; border: none;
  display: grid; place-items: center; font-size: 13px; cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.cp-gallery-item:hover .cp-gallery-del,
.cp-gallery-del:focus-visible { opacity: 1; }

/* ---- per-clip approval overlay (admin review drawer, PENDING creators only) ----
   Built by src/scripts/admin/drawer/gallery.js. The tile underneath is a lightbox
   trigger, so these sit on top with their own pointer-events and the script
   stops the click from bubbling. Always visible (not hover-revealed like the
   delete affordance): the admin must SEE what is about to be published. */
.rv-pub-pick {
  position: absolute; left: 6px; bottom: 6px; right: 6px;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px; border-radius: 8px;
  background: oklch(0.15 0.01 70 / .72);
  backdrop-filter: blur(3px);
  color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; user-select: none;
}
/* --signal is the same token .cp-btn-ok (Aprobă) uses — the tick reads as the
   approve action, not as a generic browser checkbox. */
.rv-pub-pick input { accent-color: var(--signal); cursor: pointer; margin: 0; }
.rv-pub-pick:hover { background: oklch(0.15 0.01 70 / .86); }
.rv-pub-pick:focus-within { outline: 2px solid #fff; outline-offset: 1px; }

/* Bottom stack: state badge + optional action, one per line.
   Not two absolute corners (they overlapped) and not a single row: the drawer
   gallery is 3 columns, so a tile is ~110px wide and "Publicat" next to
   "Ascunde" squeezed the badge down to an ellipsis. There is plenty of height
   in a 3:4 tile, so they stack. */
.rv-pub-bar {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}

/* Piece state: stated, not actionable. */
.rv-pub-badge {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 8px; border-radius: 8px;
  background: oklch(0.15 0.01 70 / .62);
  color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  pointer-events: none;
}

/* "Ascunde" — pull an already-approved clip back to moderation. */
.rv-pub-hide {
  flex: 0 0 auto; max-width: 100%;
  padding: 4px 9px; border-radius: 8px; border: 1px solid oklch(1 0 0 / .38);
  background: oklch(0.15 0.01 70 / .72);
  backdrop-filter: blur(3px);
  color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  cursor: pointer;
}
.rv-pub-hide:hover:not(:disabled) { background: var(--danger); border-color: transparent; }
.rv-pub-hide:disabled { opacity: .6; cursor: default; }
.rv-pub-hide:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Failure of a tile action, e.g. the clip was re-decided in another tab. */
.rv-pub-err {
  position: absolute; left: 6px; right: 6px; top: 6px;
  padding: 4px 6px; border-radius: 7px;
  background: oklch(0.15 0.01 70 / .82);
  color: #fff; font-size: 10.5px; line-height: 1.3;
}

/* "Se publică N din M" under the gallery. */
.rv-pub-count {
  margin-top: 10px; font-size: 12.5px; color: var(--ink-2);
  font-family: var(--ff-mono, inherit); letter-spacing: .02em;
}

/* NOTE: the shared media-lightbox styling lives in the fenced block at the END
   of this file (search "MEDIA LIGHTBOX") — single source of truth so the public,
   creator and admin galleries all render the same overlay. */

/* ---------------------------------------------------------------------------
   SHARED — empty-state block + upload row + brief-modal fields the live pages
   reference but the prototype never defined (cp-empty / cp-field / cp-input …).
   --------------------------------------------------------------------------- */
.cp-empty {
  border: 1px dashed var(--line-2); border-radius: 14px;
  padding: 40px 24px; text-align: center; background: var(--surface);
}
.cp-empty-ic { font-size: 30px; color: var(--muted); margin-bottom: 10px; }
.cp-empty-t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.cp-empty-s { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; max-width: 42ch; margin-inline: auto; }

.cp-upload-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.cp-upload-hint { font-size: 12.5px; color: var(--muted); }
.cp-form-msg { margin-top: 12px; font-size: 13px; color: var(--signal); }
.cp-form-msg.cp-msg-err { color: var(--danger); }
/* "Conturi sociale" repeater — each channel on ONE horizontal line:
   platformă | handle | followers | ✕ . Proportions follow the prototype's
   .cp-plat-row (150px 1fr 110px) plus an auto column for the delete button.
   min-width:0 on every cell lets the 1fr handle column absorb slack instead of
   the intrinsic input min-width forcing an overflow/wrap; .ct-input width:100%
   then fills its own track without breaking the grid. */
.cp-platform-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 120px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.cp-platform-row > * { min-width: 0; }
.cp-platform-row .ct-input { width: 100%; }
.cp-platform-row .cp-plat-del { flex: none; padding: 10px 12px; }
@media (max-width: 560px) {
  .cp-platform-row { grid-template-columns: 1fr 1fr; }
  /* delete button spans the row's full width on the second line */
  .cp-platform-row .cp-plat-del { grid-column: 1 / -1; }
}
.ct-input-sm { max-width: 100%; }

/* brief modal (admin/brief-uri) uses cp-field/cp-label/cp-input naming */
.cp-field { display: flex; flex-direction: column; gap: 6px; }
.cp-label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cp-input {
  width: 100%; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 11px 14px; font-family: var(--ff-sans); font-size: 14.5px;
  color: var(--ink); background: var(--surface);
}
.cp-input:focus { outline: none; border-color: var(--ink); }
textarea.cp-input { resize: vertical; line-height: 1.5; }
/* Native <select> options render in an OS popup that ignores most inherited
   styling — without an explicit option color/background they fell back to the
   select's near-white text on a white popup (invisible in the brief modal).
   Pin readable dark-on-light; the spatial theme overrides to its dark popup. */
select.cp-input { appearance: none; -webkit-appearance: none; cursor: pointer; }
select.cp-input option { color: #111; background: #fff; }

/* Brief allocation list (admin brief drawer → "Alocă creatori"). */
.cp-alloc-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.4; }
.cp-alloc-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.cp-alloc-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.cp-alloc-item:hover { background: var(--surface-2, rgba(0,0,0,.03)); }
.cp-alloc-item.is-allocated { opacity: .7; cursor: default; }
.cp-alloc-cb { width: 16px; height: 16px; flex: none; accent-color: var(--ink); }
/* alloc avatar = .cp-ava--xs (28px circle) — see the .cp-ava primitive block. */
.cp-alloc-info { display: flex; flex-direction: column; min-width: 0; }
.cp-alloc-nm { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cp-alloc-ni { font-size: 11.5px; color: var(--muted); }
.cp-alloc-msg { font-size: 12.5px; margin-top: 8px; }

/* Brief logo upload (admin brief drawer) + logo thumbnail (admin brief list). */
.cp-logo-upload { display: flex; align-items: center; gap: 14px; }
.cp-logo-preview { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; }
.cp-logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.cp-logo-ph { font-family: var(--ff-mono); font-size: 18px; color: var(--muted); }
.cp-logo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-logo-pick { position: relative; cursor: pointer; }
.cp-logo-status { font-size: 12px; color: var(--muted); }
.cp-brief-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* brief logo = .cp-ava--soft (32px / 8px squircle) — see the .cp-ava primitive. */

.cp-nav-admin { color: var(--signal) !important; }
.cp-nav-admin .ic { color: var(--signal) !important; }
.cp-pay-note a { color: var(--ink); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }