/*
 * segmnt dashboard — page layout CSS for the YAH-234 redesign.
 *
 * This is the proposed replacement for dashboard/public/styles.css. Load order:
 * theme.css → components.css → app.css. Components are never restyled here;
 * this file only lays pages out. Tokens only, same rules as components.css
 * (0, 1px/2px hairlines, percentages, unitless numbers, @media breakpoints).
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg);
}
h1, h2, h3, p, dl, dd { margin: 0; }
[dir="rtl"] body { line-height: var(--line-height-normal); }
code, .mono { font-family: var(--font-mono); }
/* IDs, prefixes, durations and sizes are Latin digits: Plex Mono. Dates stay in
   Plex Sans Arabic so ar locale digits keep a matching glyph set. */

/* ---------- Shell ---------- */

.app-main {
  display: grid;
  gap: var(--space-6);
  max-inline-size: var(--size-container-lg);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

.account {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text);
}
.account-name { font-weight: var(--font-weight-medium); }
.lang-select { inline-size: auto; min-block-size: var(--size-control-sm); font-size: var(--font-size-sm); }

/* ---------- Page header ---------- */

.page-head {
  display: grid;
  gap: var(--space-3);
}
.page-head-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  justify-content: space-between;
}
.page-title {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
}
.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  margin-block-start: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Projects grid ---------- */

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--size-container-sm) / 2)), 1fr));
  gap: var(--space-4);
}
.project-card .sg-card-title { font-size: var(--font-size-lg); }
.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
/* The accent swatch is customer data (branding.primaryColor), set inline as --branding-accent. */
.swatch {
  inline-size: var(--space-3);
  block-size: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--branding-accent, var(--color-primary));
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  flex: none;
}
.project-card .sg-card-foot { justify-content: flex-start; position: relative; z-index: 1; }

/* ---------- Toolbars ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.toolbar-group { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.toolbar .sg-field { display: flex; align-items: center; gap: var(--space-2); }
.toolbar select.sg-input { inline-size: auto; min-block-size: var(--size-control-sm); font-size: var(--font-size-sm); }
.live-note {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.live-note .sg-spinner { inline-size: var(--space-4); block-size: var(--space-4); }

/* ---------- Video table cells ---------- */

.video-cell { display: flex; gap: var(--space-3); align-items: center; min-inline-size: 0; }
/* No poster URL in the API yet: a neutral tile, not a fake thumbnail. */
.video-tile {
  display: grid;
  place-items: center;
  inline-size: var(--space-16);
  aspect-ratio: 16 / 9;
  flex: none;
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
}
.video-tile[data-status="ready"] { color: var(--color-primary); background: var(--color-primary-soft); }
.video-tile[data-status="failed"] { color: var(--color-danger); background: var(--color-danger-soft); }
.video-cell .sg-cell-secondary[data-tone="danger"] { color: var(--color-danger); }
.quality-list { display: flex; flex-wrap: nowrap; gap: var(--space-1); }
.quality-list .sg-badge::before { content: none; }

/* ---------- Upload ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.dropzone {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: var(--color-surface);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard);
}
.dropzone[data-dragover] { border-color: var(--color-primary); background: var(--color-primary-soft); }
.dropzone-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.dropzone-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.file-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.file-name { font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.file-row .video-cell { flex: 1 1 auto; }
.aside-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.aside-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.aside-list .sg-icon { color: var(--color-primary); }

/* ---------- Keys / secret ---------- */

.secret-well { display: grid; gap: var(--space-2); }

/* ---------- Domains ---------- */

.stack { display: grid; gap: var(--space-4); }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.inline-form .sg-field { flex: 1 1 calc(var(--size-container-sm) / 2); max-inline-size: var(--size-container-sm); }
.domain-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.dns-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: center;
  font-size: var(--font-size-sm);
}
.dns-grid dt { color: var(--color-text-muted); }
.dns-grid dd { display: flex; gap: var(--space-2); align-items: center; min-inline-size: 0; }
.dns-grid code { overflow-wrap: anywhere; font-size: var(--font-size-sm); color: var(--color-text); }
.steps { display: grid; gap: var(--space-2); margin: 0; padding-inline-start: var(--space-5); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ---------- Settings ---------- */

.settings-grid { display: grid; gap: var(--space-6); max-inline-size: var(--size-container-md); }
.branding-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.color-row { display: flex; gap: var(--space-3); align-items: center; }
.color-row input[type="color"] {
  inline-size: var(--size-control-md);
  block-size: var(--size-control-md);
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  flex: none;
}
.color-row input[type="color"]:disabled { opacity: 0.5; }
.player-preview {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: var(--color-on-primary);
  background: var(--color-text);
  border-radius: var(--radius-md);
}
.player-preview .play {
  display: grid;
  place-items: center;
  inline-size: var(--space-12);
  block-size: var(--space-12);
  border-radius: var(--radius-full);
  background: var(--branding-accent, var(--color-primary));
}
.player-preview .bar {
  position: absolute;
  inset-inline: var(--space-4);
  inset-block-end: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.player-preview .track { flex: 1; block-size: var(--space-1); border-radius: var(--radius-full); background: var(--color-text-muted); }
.player-preview .track i { display: block; inline-size: 35%; block-size: 100%; border-radius: inherit; background: var(--branding-accent, var(--color-primary)); }
.player-preview .mark {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}
.preview-caption { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-block-start: var(--space-2); }
.danger-zone { border-color: var(--color-danger); }
.danger-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.danger-row p { font-size: var(--font-size-sm); color: var(--color-text-muted); max-inline-size: var(--size-container-sm); }

/* ---------- Sign-in ---------- */

.signin-shell {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-6);
  min-block-size: 100dvh;
  padding: var(--space-6);
  background: var(--color-surface-sunken);
}
.signin-card { inline-size: min(100%, calc(var(--size-container-sm) * 0.7)); gap: var(--space-6); padding: var(--space-8); }
.signin-card .brand-mark { block-size: var(--space-8); }
.signin-head { display: grid; gap: var(--space-2); }
.signin-head h1 { font-size: var(--font-size-2xl); line-height: var(--line-height-tight); font-weight: var(--font-weight-semibold); }
.signin-head p { color: var(--color-text-muted); }
.signin-providers { display: grid; gap: var(--space-3); }
.signin-foot { font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; }
.signin-status {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.signin-status .sg-spinner { inline-size: var(--space-4); block-size: var(--space-4); }

/* ---------- Admin (A12 internal surface) ---------- */

.admin-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.admin-body,
.admin-list { display: grid; gap: var(--space-3); }
.admin-detail:not(:empty) { margin-block-start: var(--space-4); }
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--size-container-sm) / 4)), 1fr));
  gap: var(--space-4);
}
.admin-loading { display: flex; justify-content: center; padding: var(--space-12); }
.admin-frames { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.admin-frame {
  max-inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ---------- Responsive ---------- */

@media (width < 1024px) {
  .split,
  .branding-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (width < 768px) {
  .app-main { gap: var(--space-5); padding: var(--space-5) var(--space-4) var(--space-12); }
  .page-title { font-size: var(--font-size-xl); line-height: var(--line-height-snug); }
  .page-head-row { align-items: stretch; flex-direction: column; }
  .page-actions .sg-button { flex: 1 1 auto; }
  .account-name, .account .sg-badge { display: none; }
  .toolbar { align-items: stretch; }
  .video-tile { display: none; }
  .signin-card { padding: var(--space-6); }
  .dropzone { padding: var(--space-8) var(--space-4); }
  .dns-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .dns-grid dd { margin-block-end: var(--space-2); }
  .inline-form .sg-button { flex: 1 1 100%; }
}

/* ---------- Onboarding (YAH-495): sign-up, wizard, empty states, usage ---------- */

/* Sign-up page (#/signup) reuses the sign-in card; the plan list is the extra. */
.signup-card { inline-size: min(100%, calc(var(--size-container-sm) * 0.8)); }
.signup-note { font-weight: var(--font-weight-semibold); }
.sso-button { justify-content: flex-start; gap: var(--space-3); }
.provider-mark {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  flex: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
}
.signup-includes { gap: var(--space-3); }
.check-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.check-item { display: flex; gap: var(--space-2); align-items: flex-start; }
.check-item .sg-icon { flex: none; color: var(--color-success); }
.signup-compare { font-size: var(--font-size-sm); }

/* First-run wizard: a 280px rail (5rem * 3.5), then the step panel. */
.welcome {
  display: grid;
  grid-template-columns: calc(var(--space-20) * 3.5) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  max-inline-size: var(--size-container-md);
  margin-inline: auto;
}
.setup-panel { display: grid; gap: var(--space-4); padding: var(--space-6); }
.setup-title { font-size: var(--font-size-2xl); line-height: var(--line-height-tight); font-weight: var(--font-weight-semibold); }
/* The step heading takes programmatic focus for screen readers; a ring on a
   non-interactive heading is noise. */
.setup-title:focus { outline: none; }
.setup-body { color: var(--color-text-muted); }
.setup-subtitle { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.setup-steps { padding-inline-start: var(--space-5); }

.setup-rail { display: grid; gap: var(--space-3); position: sticky; top: var(--space-6); }
.setup-count { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.setup-bar { display: flex; gap: var(--space-1); }
.seg { flex: 1; block-size: var(--space-1); border-radius: var(--radius-full); background: var(--color-surface-sunken); }
.seg.done { background: var(--color-primary); }
.setup-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.setup-item { display: flex; gap: var(--space-2); align-items: center; font-size: var(--font-size-sm); }
.setup-mark {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-4);
  block-size: var(--space-4);
  flex: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
}
.setup-item.todo .setup-mark { border-style: dashed; }
.setup-item.current .setup-mark::after {
  content: "";
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-primary);
}
.setup-item.done .setup-mark { background: var(--color-primary); border-color: var(--color-primary); }
.setup-item.done .setup-mark::after { content: "✓"; color: var(--color-on-primary); font-size: var(--font-size-xs); line-height: 1; }

.setup-compact { display: none; margin-block-end: var(--space-3); }
.setup-compact summary { cursor: pointer; }
.setup-compact .setup-list { margin-block-start: var(--space-2); }

.setup-form { display: grid; gap: var(--space-3); }
.setup-upload { display: grid; gap: var(--space-3); }

/* Plan and usage rows (a <dl> of .usage-row). */
.usage-list { display: grid; gap: var(--space-2); margin: 0; }
.usage-row { display: flex; justify-content: space-between; gap: var(--space-3); padding-block-end: var(--space-1); border-block-end: 1px solid var(--color-border); }
.usage-row dt { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.usage-row dd { margin: 0; font-weight: var(--font-weight-semibold); }
.plan-card, .plan-usage, .setup-card { display: grid; gap: var(--space-3); }
.setup-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }

/* Embed + test playback. */
.preview-stage { overflow: hidden; background: var(--color-stage); border-radius: var(--radius-lg); }
.preview-frame { display: block; inline-size: 100%; aspect-ratio: 16 / 9; border: 0; }
.stage-skeleton { display: grid; gap: var(--space-2); place-content: center; aspect-ratio: 16 / 9; padding: var(--space-6); text-align: center; color: var(--color-on-stage); }
.embed-box { display: grid; gap: var(--space-3); }
.embed-code-row { overflow-x: auto; padding: var(--space-3); background: var(--color-stage-raised); border-radius: var(--radius-md); }
.embed-code { margin: 0; font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-on-stage); white-space: pre; }
.token-help { display: grid; gap: var(--space-2); font-size: var(--font-size-sm); }
.token-help summary { cursor: pointer; }

.setup-next, .videos-next { display: grid; gap: var(--space-3); margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
.next-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.next-item { display: flex; gap: var(--space-2); align-items: center; }
.next-item .sg-icon { color: var(--color-border-strong); }
.next-item.done .sg-icon { color: var(--color-success); }

@media (width < 768px) {
  .welcome { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .setup-rail { display: none; }
  .setup-compact { display: block; }
}