/* ═══════════════════════════════════════════════
   Castquill — components.css
   Pieces shared by the dashboards and the public
   Studio page: pills, compact buttons, the modal
   shell and portfolio cards. They started life in
   dashboard.css, then the Studio roster began
   opening the same profile dialog, so they moved
   here rather than being duplicated.
   ═══════════════════════════════════════════════ */

/* ── STATUS PILLS ── */
.pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 980px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pill-grey   { background: #eee; color: #666; }
.pill-blue   { background: #e7f0ff; color: #2563eb; }
.pill-violet { background: var(--violet-soft); color: var(--violet); }
.pill-amber  { background: #fff4e0; color: #b45309; }
.pill-green  { background: var(--green-soft); color: #007a55; }
.pill-red    { background: #fff1f1; color: var(--error); }

/* ── BUTTONS (compact, for dashboard) ── */
.btn-sm { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 9px; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: opacity .15s, border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.btn-sm-violet { background: var(--violet); color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,.25); }
.btn-sm-violet:hover { background: var(--violet-mid); transform: translateY(-1px); box-shadow: 0 5px 16px rgba(124,58,237,.32); }
.btn-sm-grad { background: var(--brand-gradient); color: #fff; box-shadow: 0 2px 8px rgba(236,72,153,.25); }
.btn-sm-grad:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 5px 16px rgba(236,72,153,.32); }
.btn-sm-green { background: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(0,179,126,.25); }
.btn-sm-green:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0,179,126,.32); }
.btn-sm-outline { border: 1.5px solid var(--border); color: var(--ink); background: #fff; }
.btn-sm-outline:hover { border-color: var(--violet); color: var(--violet); }
.btn-sm-ghost { background: none; color: var(--muted); }
.btn-sm-ghost:hover { color: var(--ink); }
/* In-flight actions lock their buttons — kill the hover lift so a disabled
   button never looks clickable while the request is still out. */
.btn-sm:disabled { opacity: .55; cursor: default; pointer-events: none; }
.btn-sm:disabled:hover { transform: none; box-shadow: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(14,14,16,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal { background: #fff; border-radius: 20px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 28px; transform: translateY(12px); transition: transform .22s; box-shadow: 0 24px 80px rgba(14,14,16,.3); }
.modal-overlay.open .modal { transform: translateY(0); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.modal-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.modal-head p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.modal-close { background: none; border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.modal-close:hover { background: var(--surface); color: var(--ink); }

/* ── PORTFOLIO CARDS ──
   A creator profile dialog shows their work as a grid of small cards,
   whether it is opened from the admin contacts list or the Studio rail.
   dashboard-creator.php styles the same cards taller and four-across for the
   creator editing their own portfolio; that override lives in its own <style>
   block, which comes after this file and wins. */
.pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 520px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; }
.pf-thumb { height: 96px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-body { padding: 11px 12px; }
.pf-title { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 9px; }
.pf-links { display: flex; gap: 7px; flex-wrap: wrap; }