/* ============================================================
   CREATOR PORTAL — page-specific styles
   External-facing. Uses Favored design system tokens.
   ============================================================ */

/* Portal header — minimal and static on purpose: hamburger + logo, nothing
   else. No auth state, no per-creator text — those vary wildly in length
   and caused the bar to visibly shift/flash while session/data loaded.
   That content now lives at the top of the drawer instead, which is built
   to tolerate variable-length content without the layout looking unstable. */
.portal-header{
  display:flex; align-items:center; gap:var(--s-2);
  padding:var(--s-3) var(--page-pad-x) var(--s-3) var(--s-3);
  background:var(--bg-inverse);
  position:sticky; top:0; z-index:var(--z-sticky);
}
.portal-header__brand{ display:flex; align-items:center; }

/* Hamburger trigger — lives on the ink header, opens the nav drawer */
.menu-trigger{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex-shrink:0;
  border-radius:var(--r-md);
  color:var(--fg-inverse);
  transition:background var(--dur-sm) var(--ease-standard);
}
.menu-trigger:hover{ background:rgba(255,255,255,.1); }
.menu-trigger svg{ width:20px; height:20px; }

/* Drawer — the app's primary nav. Full-bleed ink to match the masthead;
   this and the masthead are the only two dark surfaces in the product. */
.drawer-overlay{
  position:fixed; inset:0;
  background:rgba(20,16,15,.5);
  z-index:var(--z-modal);
  animation:drawerFade var(--dur-sm) var(--ease-out);
}
@keyframes drawerFade{ from{ opacity:0; } to{ opacity:1; } }

.drawer{
  position:fixed; top:0; left:0; bottom:0;
  width:300px; max-width:82vw;
  background:var(--bg-inverse);
  color:var(--fg-inverse);
  z-index:calc(var(--z-modal) + 1);
  display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition:transform var(--dur-md) var(--ease-standard);
  box-shadow:var(--sh-3);
  visibility:hidden;
}
.drawer--open{ transform:translateX(0); visibility:visible; }

.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-5);
  border-bottom:1px solid var(--line-inverse);
  flex-shrink:0;
}
.drawer__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-md);
  color:var(--fg-inverse-muted);
  transition:background var(--dur-sm), color var(--dur-sm);
}
.drawer__close:hover{ background:rgba(255,255,255,.1); color:var(--fg-inverse); }
.drawer__close svg{ width:18px; height:18px; }

/* Creator identity + earnings — lives here, not in the header, since a
   vertical panel absorbs a long name or a wide dollar figure gracefully;
   a thin sticky bar does not. */
.drawer__identity{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-5);
  border-bottom:1px solid var(--line-inverse);
  flex-shrink:0;
}
.drawer__avatar{
  width:44px; height:44px; border-radius:var(--r-full);
  object-fit:cover; flex-shrink:0;
}
.drawer__avatar--placeholder{
  width:44px; height:44px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--fg-inverse); color:var(--ink);
  font-family:var(--font-display); font-weight:var(--wt-bold); font-size:var(--t-md);
  flex-shrink:0;
}
.drawer__who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.drawer__name{
  font-weight:var(--wt-semi); font-size:var(--t-md); color:var(--fg-inverse);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.drawer__handle{ font-size:var(--t-xs); color:var(--fg-inverse-subtle); }

.drawer__stat{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line-inverse);
  flex-shrink:0;
}
.drawer__stat-label{
  font-size:var(--t-sm);
  color:var(--fg-inverse-subtle);
}
.drawer__stat-value{
  font-family:var(--font-display); font-weight:var(--wt-bold); font-size:var(--t-lg);
  color:var(--fg-inverse);
  font-variant-numeric:tabular-nums;
}

.drawer__nav{
  flex:1; overflow-y:auto;
  padding:var(--s-3);
  display:flex; flex-direction:column; gap:2px;
}
.drawer__item{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3);
  width:100%;
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  font-family:var(--font-sans);
  font-size:var(--t-md);
  font-weight:var(--wt-med);
  color:var(--fg-inverse-muted);
  text-align:left;
  transition:background var(--dur-sm), color var(--dur-sm);
}
.drawer__item:hover{ background:rgba(255,255,255,.07); color:var(--fg-inverse); }
.drawer__item--active{ background:var(--accent); color:#fff; font-weight:var(--wt-semi); }
.drawer__count{
  font-family:var(--font-mono); font-size:var(--t-xs);
  color:inherit; opacity:.65;
}
.drawer__foot{
  padding:var(--s-3);
  border-top:1px solid var(--line-inverse);
  flex-shrink:0;
}
.drawer__item--exit{ justify-content:flex-start; }
.drawer__item--exit svg{ width:18px; height:18px; flex-shrink:0; }

/* Auth prompt card */
.auth-prompt{
  background:var(--bg-raised);
  border:2px dashed var(--line-2);
  border-radius:var(--r-xl);
  padding:var(--s-7) var(--s-6);
  text-align:center;
  margin:var(--s-6) 0;
}
.auth-prompt__title{
  font-size:var(--t-lg); font-weight:var(--wt-semi);
  color:var(--ink); margin-bottom:var(--s-2);
}
.auth-prompt__desc{
  font-size:var(--t-sm); color:var(--ink-3);
  max-width:40ch; margin:0 auto var(--s-5);
}

/* Admin badge */
.admin-badge{
  display:inline-flex; align-items:center; gap:var(--s-1);
  padding:var(--s-1) var(--s-3);
  background:var(--accent-soft);
  color:var(--accent-soft-fg);
  border-radius:var(--r-pill);
  font-size:var(--t-xs);
  font-weight:var(--wt-semi);
}

/* Contract card */
.contract-card{
  background:var(--bg-raised);
  border:var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.contract-card__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4) var(--s-5);
  border-bottom:var(--border);
}
.contract-card__body{
  padding:var(--s-4) var(--s-5);
}
.contract-card__row{
  display:flex; gap:var(--s-5); flex-wrap:wrap;
  font-size:var(--t-sm);
}
.contract-card__label{ color:var(--ink-4); min-width:90px; }
.contract-card__value{ color:var(--ink); font-weight:var(--wt-med); }

/* Deadline timeline */
.deadline{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-2) 0;
  font-size:var(--t-sm);
}
.deadline__dot{
  width:8px; height:8px; border-radius:var(--r-full);
  flex-shrink:0;
}
.deadline--overdue .deadline__dot{ background:var(--danger); }
.deadline--today .deadline__dot{ background:var(--warning); animation:pulse 1.5s infinite; }
.deadline--imminent .deadline__dot{ background:var(--warning); }
.deadline--upcoming .deadline__dot{ background:var(--info); }
.deadline--future .deadline__dot{ background:var(--ink-5); }
.deadline--done .deadline__dot{ background:var(--success); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Shipment row */
.shipment-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-3) var(--s-5);
  border-bottom:var(--border);
  font-size:var(--t-sm);
}
.shipment-row:last-child{ border-bottom:0; }

/* Locked overlay */
.locked{
  position:relative;
}
.locked__overlay{
  position:absolute; inset:0;
  background:rgba(250,250,249,0.85);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-lg);
  z-index:1;
}
.locked__overlay button{
  background:var(--accent); color:var(--accent-fg);
  border:none; padding:var(--s-3) var(--s-5);
  border-radius:var(--r-md); font-weight:var(--wt-semi);
  font-size:var(--t-sm); cursor:pointer;
}

/* Portal tables */
.portal-table{
  width:100%; border-collapse:collapse; font-size:var(--t-sm);
}
.portal-table th{
  padding:6px 10px;
  font-weight:600; font-size:12px;
  color:var(--ink-3);
  text-align:left;
  background:var(--bg-subtle); white-space:nowrap;
  user-select:none; cursor:pointer;
  border-bottom:var(--border);
}
.portal-table th:hover{ color:var(--ink-2); }
.portal-table td{
  padding:6px 10px;
  white-space:nowrap; border-bottom:var(--border);
  vertical-align:middle;
  overflow:hidden; text-overflow:ellipsis;
}
.portal-table tbody tr{ transition:background var(--dur-xs); }
.portal-table tbody tr:hover{ background:var(--bg-subtle); }
.portal-table--clickable tbody tr:not(.expand-row){ cursor:pointer; }

/* Expand-row chevron — rotates 90° when its parent row is expanded */
.expand-chev{
  display:inline-block;
  font-size:11px;
  color:var(--ink-4);
  transition:transform var(--dur-sm) var(--ease-out), color var(--dur-sm);
  line-height:1;
}
.expand-chev--open{ transform:rotate(90deg); color:var(--accent); }

/* Animated expansion row — table cells don't reliably play with grid-template-rows
   transitions, so we use max-height + opacity. The wrapper has a generous
   max-height of 1500px when open which covers nearly any reasonable detail panel.
   Closed state: max-height:0 + opacity:0 + zero padding via the inner div. */
.expand-row{ background:var(--bg); }
.expand-row > td{
  padding:0 !important;
  border-bottom:0 !important;
}
.expand-row__inner{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height var(--dur-md) var(--ease-out), opacity var(--dur-sm) var(--ease-out);
}
.expand-row--open > td{ border-bottom:var(--border) !important; }
.expand-row--open .expand-row__inner{
  max-height:2400px;
  opacity:1;
}

/* Expansion detail panel — used in both contracts and shipments rows. */
.expand-detail{
  display:flex; flex-direction:column;
  gap:var(--s-4);
}
.expand-detail__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--s-3); flex-wrap:wrap;
}
.expand-detail__heading{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.expand-detail__earnings{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);
  background:var(--accent-soft);
  border-radius:var(--r-md);
}
.expand-detail__tracking{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);
  background:var(--bg-subtle);
  border-radius:var(--r-md);
}
.expand-detail__grid{ display:grid; gap:var(--s-4); }
.expand-detail__grid--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.expand-detail__grid--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.expand-detail__col{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.expand-detail__section{
  padding-top:var(--s-3);
  border-top:var(--border);
  display:flex; flex-direction:column; gap:var(--s-2);
}
.expand-detail__eyebrow{
  font-size:11px; font-weight:600;
  color:var(--ink-4);
}
.expand-detail__footer{
  display:flex; gap:var(--s-3); flex-wrap:wrap;
  padding-top:var(--s-3);
  border-top:var(--border);
  font-size:var(--t-xs); color:var(--ink-4);
}
.expand-detail__footer > span:not(:last-child)::after{
  content:'·'; margin-left:var(--s-3); color:var(--ink-5);
}

/* Identity list — simple ruled rows (emails, phones, addresses, reps).
   No box/background/radius: a plain hairline frames the group, thin
   hairlines split the rows. */
/* ============================================================
   PROFILE — card-based. One plain, elegant card per category;
   rows inside just need spacing + a hairline, no boxes-in-boxes.
   ============================================================ */
.profile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:var(--s-5);
}
.profile-card__title-row{ display:flex; align-items:center; gap:var(--s-1); }
.profile-card__icon{
  width:24px; height:32px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:flex-start;
  background:#FFFFFF; color:var(--accent);
  border:none;
  flex-shrink:0;
}
.profile-card__icon svg{ width:16px; height:16px; }

.profile-fields{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:var(--s-5);
}
.profile-field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.profile-field__label{ font-size:var(--t-xs); color:var(--ink-4); }
.profile-field__value{ font-size:var(--t-sm); font-weight:var(--wt-med); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:520px){
  .profile-fields{ grid-template-columns:1fr 1fr; }
  .profile-field--full{ grid-column:1 / -1; }
}

.identity-list{ display:flex; flex-direction:column; }
.identity-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4);
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--line);
}
.identity-row:last-child{ border-bottom:0; }
.identity-row__main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.identity-row__value{ font-weight:var(--wt-med); font-size:var(--t-sm); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.identity-row__meta{ font-size:var(--t-xs); color:var(--ink-4); }
.identity-row__actions{ display:flex; align-items:center; gap:var(--s-2); flex-shrink:0; }
.identity-row__delete{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:var(--r-sm);
  color:var(--ink-4);
  transition:background var(--dur-sm), color var(--dur-sm);
}
.identity-row__delete:hover{ background:var(--danger-soft); color:var(--danger); }
.identity-row__delete svg{ width:14px; height:14px; }

/* Responsive */
@media (max-width: 700px) {
  .contract-card__row{ flex-direction:column; gap:var(--s-2); }
  .portal-table{ font-size:var(--t-xs); }
  .portal-table th, .portal-table td{ padding:var(--s-1) var(--s-2); }
}
@media (max-width: 640px) {
  .expand-detail__grid--3,
  .expand-detail__grid--2{ grid-template-columns:1fr; }
}