/* portal-shell.css — parte din creator-portal.css (liniile 399-574).
   Scheletul aplicației: .cp-shell, sidebar, topbar, .cp-content, capete de secțiune,
   banner verificare, stat cards, butoane, status pills, panouri, tab-uri, tabele,
   galerie portofoliu, card-form.
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
.cp-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: calc(100vh - 56px); max-width: var(--shell-maxw); margin-inline: auto; }
@media (max-width: 820px) { .cp-shell { grid-template-columns: 1fr; } }

.cp-side {
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 22px 16px;
  position: sticky; top: var(--chrome-inset); height: calc(100vh - var(--chrome-inset));
}
@media (max-width: 820px) { .cp-side { display: none; } }
.cp-side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.cp-side-brand .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--ff-mono); font-size: 12px; }
.cp-nav { display: flex; flex-direction: column; gap: 2px; }
.cp-nav-label { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding: 14px 10px 6px; }
.cp-nav a {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 9px;
  color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background .15s, color .15s; cursor: pointer;
}
.cp-nav a .ic { width: 18px; text-align: center; font-size: 15px; color: var(--muted); transition: color .15s; }
.cp-nav a:hover { background: var(--paper-2); color: var(--ink); }
.cp-nav a.active { background: var(--ink); color: var(--paper); }
.cp-nav a.active .ic { color: var(--paper); }
.cp-nav a .badge { margin-left: auto; font-family: var(--ff-mono); font-size: 10.5px; background: var(--signal); color: #fff; border-radius: 100px; padding: 1px 7px; }
.cp-nav a.active .badge { background: var(--paper); color: var(--ink); }

/* Account group: pushed to the bottom of the sidebar, divider on top, sitting
   right above the user card — not floating under the main nav with a void
   below. Only THIS element carries margin-top:auto; the card below gets a
   fixed gap (two autos would split the free space and float both mid-column). */
.cp-side-account { margin-top: auto; border-top: 1px solid var(--line); padding-top: 8px; }
.cp-side-account + .cp-side-card { margin-top: 12px; }

.cp-side-card {
  margin-top: auto; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px; display: flex; gap: 11px; align-items: center;
}
/* The text child must be allowed to SHRINK (flex min-width:auto default keeps
   it at content width, so a long value — the admin card shows the login EMAIL —
   escaped the card border). min-width:0 + ellipsis on the lines; full value
   stays reachable via title= on hover (set in both shells). */
.cp-side-card > div { min-width: 0; }
.cp-side-card .nm,
.cp-side-card .st { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-side-card .nm { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.cp-side-card .st { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .04em; color: var(--signal); display: flex; align-items: center; gap: 4px; }
.cp-side-card .st.pend { color: var(--pending); }

/* topbar */
.cp-main { display: flex; flex-direction: column; min-width: 0; }
.cp-top {
  display: flex; align-items: center; gap: 16px;
  padding: 18px clamp(20px, 4vw, 40px); border-bottom: 1px solid var(--line);
  background: var(--paper); position: sticky; top: var(--chrome-inset); z-index: 20;
}
.cp-top h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.cp-top .crumb { font-family: var(--ff-mono); font-size: 11px; color: var(--faint); letter-spacing: .04em; }
.cp-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cp-icon-btn { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; position: relative; transition: all .15s; }
.cp-icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.cp-icon-btn svg { width: 17px; height: 17px; }
.cp-icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); border: 2px solid var(--surface); }

/* Own stacking context BELOW the sticky topbar (z:20) within the shared .cp-main
   parent. Without this, glass cards (.cp-stat) spawn their own backdrop-filter
   stacking contexts and can paint over the bar while scrolling — the z-index:20
   on .cp-top cannot win across sibling stacking contexts otherwise. */
.cp-content { position: relative; z-index: 0; padding: var(--cp-content-pad-top) clamp(20px, 4vw, 40px); max-width: var(--cp-content-maxw); width: 100%; margin-inline: auto; }
.cp-shell.is-admin .cp-content { max-width: var(--cp-content-maxw-admin); }

/* section heads */
.cp-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 16px; }
.cp-sec-h h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.cp-sec-h .more { font-size: 13px; color: var(--muted); text-decoration: none; cursor: pointer; }
.cp-sec-h .more:hover { color: var(--ink); }

/* verification banner */
.cp-verif {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--line-2); border-radius: 14px; padding: 18px 20px; margin-bottom: 0;
  background: var(--surface);
}
.cp-verif.pend { background: var(--pending-bg); border-color: oklch(0.7 0.072 75 / .4); }
.cp-verif.ok { background: var(--signal-bg); border-color: oklch(0.6 0.07 158 / .4); }
.cp-verif .vic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; flex: none; }
.cp-verif.pend .vic { background: oklch(0.7 0.072 75 / .18); color: var(--pending); }
.cp-verif.ok .vic { background: oklch(0.6 0.07 158 / .15); color: var(--signal); }
.cp-verif .vt { font-size: 15px; font-weight: 700; }
.cp-verif .vs { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.cp-verif .va { margin-left: auto; }

/* stat cards */
.cp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 0; }
@media (max-width: 900px) { .cp-stats { grid-template-columns: repeat(2, 1fr); } }
.cp-stat { border: 1px solid var(--line); border-radius: 13px; padding: 16px 17px; background: var(--surface); }
.cp-stat .l { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cp-stat .v { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
.cp-stat .d { font-size: 12px; color: var(--ink-2); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.cp-stat .d .up { color: var(--signal); font-family: var(--ff-mono); }

/* two-col layout */
.cp-grid2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 920px) { .cp-grid2 { grid-template-columns: 1fr; } }

/* buttons */
.cp-btn { font-family: var(--ff-sans); font-size: 13.5px; font-weight: 600; border-radius: 9px; padding: 10px 16px; cursor: pointer; border: 1px solid transparent; transition: all .16s; display: inline-flex; align-items: center; gap: 7px; }
.cp-btn-pri { background: var(--ink); color: var(--paper); }
.cp-btn-pri:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px oklch(0.205 0.012 70 / .6); }
.cp-btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.cp-btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.cp-btn-sm { padding: 8px 13px; font-size: 12.5px; }

/* status pill — base chrome; tone via .cp-status--{new,active,done,rej} modifiers
   (defined in the design-fidelity block below). */
.cp-status { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .06em; padding: 4px 10px; border-radius: 100px; display: inline-flex; align-items: center; gap: 6px; }
.cp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* side panels (mini lists) */
.cp-panel { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); padding: 18px; }
.cp-panel + .cp-panel { margin-top: 18px; }
.cp-panel h3 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px; }
.cp-progress { height: 8px; border-radius: 100px; background: var(--paper-2); overflow: hidden; margin: 6px 0 12px; }
.cp-progress span { display: block; height: 100%; background: var(--signal); border-radius: 100px; }
.cp-check { display: flex; flex-direction: column; gap: 9px; }
.cp-check li { list-style: none; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.cp-check .box { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11px; flex: none; }
.cp-check li.ok .box { background: var(--signal); border-color: var(--signal); color: #fff; }
.cp-check li.ok { color: var(--ink); }

.cp-payrow { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cp-payrow:last-child { border-bottom: none; }
.cp-payrow .pt { font-size: 13.5px; font-weight: 600; }
.cp-payrow .ps { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.cp-payrow .pv { font-family: var(--ff-mono); font-size: 14px; font-weight: 600; }

/* filter tabs */
.cp-tabs { display: flex; gap: 4px; background: var(--paper-2); border: 1px solid var(--line); padding: 4px; border-radius: 100px; margin-bottom: 0; }
.cp-tabs button { font-family: var(--ff-sans); font-size: 13px; font-weight: 600; color: var(--ink-2); background: none; border: none; cursor: pointer; padding: 8px 16px; border-radius: 100px; transition: all .16s; }
.cp-tabs button:hover { color: var(--ink); }
.cp-tabs button.active { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px -4px oklch(0.205 0.012 70 / .3); }
.cp-tabs .ct { font-family: var(--ff-mono); font-size: 11px; opacity: .6; margin-left: 5px; }

/* tables */
.cp-table { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--surface); }
.cp-tr { display: grid; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cp-tr:last-child { border-bottom: none; }
.cp-tr.head { background: var(--paper-2); }
.cp-tr.head span { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cp-pay-tr { grid-template-columns: 1.6fr 1fr 1fr 110px; }
@media (max-width: 700px) { .cp-pay-tr { grid-template-columns: 1.6fr 1fr; } .cp-pay-tr .hide-sm { display: none; } }

/* portfolio gallery */
.cp-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 700px) { .cp-gallery { grid-template-columns: repeat(2, 1fr); } }
.cp-gallery image-slot { aspect-ratio: 4/5; border-radius: 11px; overflow: hidden; border: 1px solid var(--line); display: block; }
.cp-gallery .add-slot { aspect-ratio: 4/5; border-radius: 11px; border: 1.5px dashed var(--line-2); display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: all .16s; gap: 6px; text-align: center; }
.cp-gallery .add-slot:hover { border-color: var(--ink); color: var(--ink); }
.cp-gallery .add-slot .pl { font-size: 24px; }
.cp-gallery .add-slot .tx { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .06em; }
/* Portfolio tiles (/c/[slug] + /app/profil) — portfolios are dominated by
   vertical Reels (9:16). A portrait 3:4 frame + object-fit:contain shows the
   whole clip with no ugly crop (user priority: "să nu mai fie tăiate"), while
   the portrait frame keeps letterboxing minimal for vertical media. Dark
   surface fills any remaining bars. Fullscreen also uses contain (below).
   Single source of truth for both galleries — see also the P4 block lower. */
.cp-gallery-item {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 11px;
  background: oklch(0.18 0.01 70);
}
.cp-gallery-media { width: 100%; height: 100%; object-fit: contain; display: block; }

/* profile edit form rows */
.cp-card-form { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: clamp(20px, 3vw, 30px); }
.cp-card-form + .cp-card-form { margin-top: var(--cp-flow); }