/* yt_studio control panel — single hand-written stylesheet (Phase 11, UI-SPEC).
 *
 * Tokens (spacing/color/font) are authored ONCE here as CSS custom properties so
 * 11-03 references them everywhere. Light theme only. 60/30/10 color discipline:
 * surface (60%) + card (30%) + accent (10%, reserved list in UI-SPEC). The accent
 * (#2563EB) is used ONLY for: Onayla button, active nav tab, active filter,
 * primary dialog actions, body hyperlinks — nothing else.
 */

:root {
  /* Spacing scale — 8-point, all multiples of 4 (UI-SPEC Spacing). */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Color tokens (UI-SPEC Color). */
  --c-surface: #F7F7F8;     /* dominant 60% — app background */
  --c-card: #FFFFFF;        /* secondary 30% — cards, nav, dialogs */
  --c-accent: #2563EB;      /* accent 10% — reserved list only */
  --c-danger: #DC2626;      /* destructive — un-approve, errors, failed tint */
  --c-border: #E4E4E7;      /* 1px card/cell borders */
  --c-text: #18181B;        /* primary text */
  --c-text-muted: #71717A;  /* secondary / meta text */

  /* Pre-audit make-public warning surface (D-11). */
  --c-warn-bg: #FEF9C3;
  --c-warn-text: #854D0E;
  --c-warn-border: #FACC15;

  /* System font stack — no web-font download; Segoe UI renders TR diacritics. */
  --font-stack: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Minimum interactive target height (the one allowed non-8pt exception). */
  --control-min-h: 44px;
}

/* --- Base elements -------------------------------------------------------- */

* { box-sizing: border-box; }

html { font-family: var(--font-stack); }

body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 16px;          /* Body role floor */
  font-weight: 400;
  line-height: 1.5;
}

/* Typography roles (Display / Heading / Body / Label). */
.t-display { font-size: 28px; font-weight: 600; line-height: 1.2; }
.t-heading { font-size: 20px; font-weight: 600; line-height: 1.2; }
.t-body    { font-size: 16px; font-weight: 400; line-height: 1.5; }
.t-label   { font-size: 14px; font-weight: 600; line-height: 1.4; }

a { color: var(--c-accent); }

/* Global keyboard-nav affordance — 2px accent outline (Accessibility floor). */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* --- Top nav (D-02) ------------------------------------------------------- */

.nav {
  display: flex;
  gap: var(--space-md);
  align-items: stretch;
  background: var(--c-card);
  border-bottom: 1px solid var(--c-border);
  padding: 0 var(--space-xl);
}

.nav__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-h);
  padding: 0 var(--space-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent; /* reserves space for the active indicator */
}

.nav__tab:hover { color: var(--c-text); }
.nav__tab:active { color: var(--c-text); }

/* Active tab: the accent indicator (UI-SPEC reserved accent use). */
.nav--active {
  color: var(--c-text);
  border-bottom-color: var(--c-accent);
}

/* --- Page content region -------------------------------------------------- */

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
}

/* --- Interactive control base + states ------------------------------------ */

button,
.btn {
  min-height: var(--control-min-h);
  padding: 0 var(--space-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-card);
  color: var(--c-text);
  cursor: pointer;
}

button:hover,
.btn:hover { border-color: var(--c-text-muted); }

button:active,
.btn:active { transform: translateY(1px); }

button:disabled,
.btn:disabled,
.btn--loading {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Accent primary action (Onayla, dialog confirms) — reserved accent use. */
.btn--accent {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #FFFFFF;
}
.btn--accent:hover { filter: brightness(1.05); }

/* Destructive outline (Onayı geri al, D-12) — outline, not filled. */
.btn--danger {
  background: var(--c-card);
  border-color: var(--c-danger);
  color: var(--c-danger);
}

/* ==========================================================================
 * Component stubs for 11-03 to fill — class selectors declared so the page
 * templates have stable hooks. The tokens + base + nav above are complete; the
 * blocks below are intentionally minimal scaffolding.
 * ====================================================================== */

/* Filter button row (D-07). */
.filters { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.filters__btn { /* base button styles apply; active filter adds .filters__btn--active */ }
.filters__btn--active { background: var(--c-accent); border-color: var(--c-accent); color: #FFFFFF; }

/* Card grid (D-05/D-06). */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}
.card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden; }
.card__thumb { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; }
.card__body { padding: var(--space-md); }
.card__title {
  font-size: 20px; font-weight: 600; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__meta { color: var(--c-text-muted); font-size: 14px; font-weight: 600; margin-top: var(--space-sm); }

/* Status badge (D-07) — colors come from inline style off status_labels.badge(). */
.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}

/* Pre-audit make-public strip (D-11) — the warning surface. */
.make-public {
  background: var(--c-warn-bg);
  color: var(--c-warn-text);
  border-left: 4px solid var(--c-warn-border);
  padding: var(--space-md) var(--space-lg);
  border-radius: 6px;
  margin-bottom: var(--space-lg);
}
.make-public a { color: var(--c-accent); }

/* Confirmation dialog (D-09/D-12). */
dialog {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-card);
  padding: var(--space-xl);
  max-width: 420px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.4); }

/* Forms (D-17 settings). */
.field { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select {
  min-height: var(--control-min-h);
  padding: 0 var(--space-sm);
  font-family: inherit;
  font-size: 16px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.field__error { color: var(--c-danger); font-size: 14px; font-weight: 600; }

/* Inline notice / toast (post-approve feedback D-10, settings-saved D-17). */
.notice { padding: var(--space-md) var(--space-lg); border-radius: 6px; background: var(--c-card); border: 1px solid var(--c-border); margin-bottom: var(--space-lg); }
.notice--ok { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
.notice--warn { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }

/* ==========================================================================
 * 11-03 page component styles (completed from the 11-02 stubs above).
 * ====================================================================== */

/* Dashboard summary strip (D-04). */
.summary {
  display: flex;
  gap: var(--space-xl);
  align-items: baseline;
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 8px;
}
.summary__item { display: flex; align-items: baseline; gap: var(--space-sm); }
.summary__num { font-size: 28px; font-weight: 600; line-height: 1.2; }
.summary__label { color: var(--c-text-muted); font-size: 14px; font-weight: 600; }
.summary__when { color: var(--c-text); }

/* Empty / placeholder states. */
.empty { text-align: center; padding: var(--space-3xl) var(--space-md); color: var(--c-text-muted); }
.empty .t-heading { color: var(--c-text); margin-bottom: var(--space-sm); }

/* Card thumbnail wrap so the badge can overlay top-right (D-06). */
.card__thumb-wrap { position: relative; }
.card__badge { position: absolute; top: var(--space-sm); right: var(--space-sm); }
.card { text-decoration: none; color: inherit; display: block; }
.card:hover { border-color: var(--c-text-muted); }

/* Detail page. */
.back-link { display: inline-block; margin-bottom: var(--space-md); font-size: 14px; font-weight: 600; }
.detail__head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.player { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; display: block; }
.meta-section { margin-top: var(--space-2xl); }
.meta-section .t-label { color: var(--c-text-muted); margin: var(--space-md) 0 var(--space-xs); }
.tag { display: inline-block; padding: var(--space-xs) var(--space-sm); margin: 0 var(--space-xs) var(--space-xs) 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px; font-size: 14px; }
.slot-line { color: var(--c-text-muted); margin-top: var(--space-md); }

/* Action area + dialog action rows. */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-2xl); }
.dialog__actions { display: flex; gap: var(--space-md); justify-content: flex-end; margin-top: var(--space-lg); }

/* Error box (missing video / read failure). */
.error-box { padding: var(--space-xl); background: var(--c-card); border: 1px solid var(--c-border); border-radius: 8px; }
.error-box .t-heading { color: var(--c-danger); margin-bottom: var(--space-sm); }

/* Calendar (D-13/D-14). */
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-2xl); }
.cal-cell { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.cal-cell__thumb { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; }
.cal-cell__when { display: block; padding: var(--space-sm); color: var(--c-text-muted); }
.upcoming { list-style: none; padding: 0; margin: var(--space-md) 0 0; }
.upcoming__row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--c-border); }
.upcoming__thumb { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.upcoming__when { font-weight: 600; text-decoration: none; }
.upcoming__reschedule { margin-left: auto; }

/* Settings form (D-17). */
.settings-form { max-width: 480px; }

/* ==========================================================================
 * Phase-12 revision area (REVISE-01/03/04). Appended below the Phase-11 detail
 * block; references ONLY the existing :root tokens (no new color/hex/px except
 * the textarea min-height, for which no token exists). Reuses .btn / .btn--accent
 * / .btn--danger / .field / .make-public / dialog surfaces verbatim.
 * ====================================================================== */

/* Separate the revision controls from the approve/unapprove actions above. */
.revision-area { margin-top: var(--space-lg); width: 100%; }

/* Visually-hidden label: keeps the textarea's accessible name without a
   second on-screen prompt that would duplicate the <h2> verbatim (a11y floor).
   Standard screen-reader-only utility — no new color/token. */
.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;
}

/* D-02 hard-fail degrade copy — reuses the .notice--warn surface; tighten its
   spacing into the revise-box rhythm. */
.revision-error { margin: 0 0 var(--space-md); }

/* Revise note panel — card surface, comfortable padding (UI-SPEC Spacing). */
.revision-box {
  padding: var(--space-md);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  margin-bottom: var(--space-md);
}
.revision-box .t-heading { margin: 0 0 var(--space-sm); }
.revision-box .t-body { margin: 0 0 var(--space-md); color: var(--c-text-muted); }

/* Multi-line note: reuse the .field input styling; only add the 3-row height. */
.revision-note { min-height: 88px; width: 100%; resize: vertical; padding: var(--space-sm); }

/* Counter / cost — the existing Label role; muted, layout only (no new color). */
.revision-count { color: var(--c-text-muted); margin: 0 0 var(--space-md); }
.revision-count__warn,
.revision-cost--warn {
  color: var(--c-warn-text);
  background: var(--c-warn-bg);
  border-radius: 4px;
  padding: var(--space-xs) var(--space-sm);
}
.revision-cost { color: var(--c-text-muted); margin: var(--space-sm) 0 0; }
.revision-meta { color: var(--c-text-muted); margin: 0 0 var(--space-sm); }

/* The at-cap warn strip reuses .make-public; keep its body tight. */
.revision-cap .t-body { margin: var(--space-sm) 0 0; }
.revision-cap__keep { display: inline; margin: 0 var(--space-sm) 0 0; }

/* ==========================================================================
 * Phase-13 topic-pool (Fikirler) — layout glue ONLY. References the existing
 * :root tokens; introduces NO new color/px value. The pool cards reuse .card /
 * .card__body / .badge / .actions / .btn* / dialog / .make-public / .empty
 * verbatim; these classes only arrange the text-first (no-thumbnail) card and
 * the reorder buttons.
 * ====================================================================== */

/* The find-ideas CTA + its warn-surface banners stack above the grid. */
.pool-find { margin: var(--space-lg) 0 var(--space-md); }

/* A text-first card: stack the premise/title/source/actions with comfortable
   gaps. The badge sits inline at the top of the body (no thumbnail overlay). */
.pool-card .card__body { display: flex; flex-direction: column; gap: var(--space-sm); }

/* The English premise sentence — the card's lead line. */
.pool-card__premise { margin: var(--space-xs) 0 0; }

/* Muted label lines (suggested title, inspiration source). */
.pool-card__source { color: var(--c-text-muted); margin: 0; }

/* Reorder ↑/↓ wrapper — push to the end of the action row, tight gap. */
.pool-card__reorder { display: inline-flex; gap: var(--space-sm); margin-left: auto; }
.pool-card__reorder form { display: inline; }

/* The per-card action row inside a flex card body keeps the existing .actions
   look but without the large detail-page top margin. */
.pool-card .actions { margin-top: var(--space-sm); align-items: center; }
.pool-card .actions form { display: inline; }

/* ==========================================================================
 * Phase-14 global warning strip (ROBUST-02/04, D-07). Mirrors `.make-public`
 * (the established yellow warn surface + 4px left-border idiom) using ONLY the
 * existing :root tokens — no new hex/px (the shared 4px border matches
 * .make-public). Severity is encoded in the LEFT-BORDER color: red --c-danger =
 * blocking/critical, yellow --c-warn-border = caution/warning. Multiple alerts
 * stack vertically with the --space-sm gap (margin-bottom). Rendered between
 * </nav> and <main> so it appears on every page.
 * ====================================================================== */
.panel-alert {
  background: var(--c-warn-bg);
  color: var(--c-warn-text);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
}
.panel-alert--critical { border-left: 4px solid var(--c-danger); }
.panel-alert--warning { border-left: 4px solid var(--c-warn-border); }
.panel-alert a { color: var(--c-accent); }

/* ==========================================================================
 * Phase-21 login (AUTH-01/05) + auth-aware nav logout control (AUTH-03).
 * Layout glue ONLY — references the existing :root tokens, introduces NO new
 * color/hex. The login card reuses the .card surface idiom (--c-card / --c-border)
 * and the .field / .btn / .btn--accent / .notice--warn classes verbatim; these
 * rules only center the card and right-align the nav logout control.
 * ====================================================================== */

/* Center the single login card in the content region (pre-auth chrome: base.html
   renders no nav/banner when logged out, so the card stands alone). */
.login {
  display: flex;
  justify-content: center;
  padding: var(--space-2xl) var(--space-md);
}
.login__card {
  width: 100%;
  max-width: 380px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: var(--space-xl);
}
.login__title { margin: 0 0 var(--space-lg); }
.login__error { margin-bottom: var(--space-lg); }
.login__submit { width: 100%; margin-top: var(--space-sm); }

/* The nav logout control sits at the far right of the nav row; the small form
   wrapper carries no styling of its own (the .btn base + muted language apply). */
.nav__logout { margin-left: auto; display: inline-flex; align-items: center; }
.nav__logout .btn { color: var(--c-text-muted); }
.nav__logout .btn:hover { color: var(--c-text); }

/* ==========================================================================
 * Phase 24 — Performans (PERF-02/03/04). Layout glue ONLY. References the
 * existing :root tokens (--space-* / --c-*); introduces NO new color, NO new
 * font, NO new spacing value. The tab reuses .summary / .card-grid / .card /
 * .filters* / .btn / .empty / .error-box / .notice* verbatim; these classes only
 * arrange the control row, the per-video metric grid, the two time-window groups,
 * the sparkline, and the muted last-synced line. The sparkline's 160x40 intrinsic
 * size is graphics geometry (exempt from the 8-pt rule, like .card__thumb).
 * ====================================================================== */

/* Control row: the Şimdi yenile button + the last-synced line on one row. */
.perf-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  flex-wrap: wrap;
}
.perf-row form { display: inline; }

/* The muted last-synced timestamp line. */
.perf-synced { color: var(--c-text-muted); }

/* One labelled time-window group (Tüm zamanlar / Son 28 gün) inside a card. */
.perf-window { margin-top: var(--space-md); }
.perf-window__label { color: var(--c-text-muted); display: block; margin-bottom: var(--space-xs); }

/* The 4 metrics of a window, wrapping comfortably. */
.perf-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* A single metric cell: muted label above its value. */
.perf-metric { display: flex; flex-direction: column; gap: var(--space-xs); }
.perf-metric__label { color: var(--c-text-muted); }
.perf-metric__val { color: var(--c-text); }

/* The retention sparkline container — small, glanceable, block-level. The
   intrinsic 160x40 is graphics geometry (exempt, like .card__thumb). */
.sparkline {
  display: block;
  width: 160px;
  height: 40px;
  margin-top: var(--space-md);
}


/* ===========================================================================
   Phase 25 — İlham Kanalları (Watchlist) tab. LAYOUT GLUE ONLY: spacing/flow
   using existing --space-* tokens; NO new color, NO new font (matches the
   Phase 13/24 per-phase append convention). Reuses .card/.field/.make-public/
   .empty/.actions/.btn*/.pool-card* verbatim.
   =========================================================================== */

/* Add-channel form + its quota helper strip, spaced above the channel list. */
.watch-add { margin-bottom: var(--space-lg); }

/* Per-watched-channel group: a .card with breathing room between channels. */
.watch-channel { margin-bottom: var(--space-lg); }

/* Channel head row: name left, last-polled meta, Çıkar pushed right (mirrors
   .pool-card__reorder margin-left:auto). */
.watch-channel__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.watch-channel__head .pool-card__reorder { margin-left: auto; }

/* A single surfaced over-performer: competitor link + idea line + action,
   stacked with the pool-card rhythm; a top border separates stacked ones. */
.watch-suggestion {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid var(--c-border);
}

/* Tightens the inline off-niche .make-public warning + Yine de ekle into the
   suggestion action area (spacing only; mirrors .revision-cap reuse). */
.watch-suggestion__warn { margin-top: var(--space-sm); }

/* The bare .actions class carries margin-top:var(--space-2xl) (48px) for page-
   level button rows; inside a stacked suggestion that floats the promote button
   far below its idea text. Tighten it to the suggestion rhythm (UI-REVIEW WR fix). */
.watch-suggestion .actions { margin-top: var(--space-sm); }

/* ===========================================================================
   PHASE 26 — Seslendirme (voice settings) pane + Dinle preview (settings.html).
   Layout glue ONLY: zero new tokens/colors/fonts. Wires the UI-SPEC-pinned
   section rhythm (--space-lg between blocks, --space-md interior) onto the two
   new wrapper classes; mirrors the Phase 24/25 append convention. Reuses
   .field/.btn*/.make-public/.t-heading/.t-label verbatim (UI-REVIEW WR fix).
   =========================================================================== */

/* The voice pane sits below the cadence/timezone/email fields; give it the
   inter-block breathing room the UI-SPEC pins (--space-lg) and separate its
   heading from the first field (--space-md). */
.seslendirme { margin-top: var(--space-lg); }
.seslendirme > h2 { margin-bottom: var(--space-md); }

/* The Dinle preview is a separate form/route below the Kaydet button; give it
   the same rhythm plus a top border to set it apart (mirrors .watch-suggestion). */
.seslendirme-preview {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-border);
}

/* Premium toggle reads as a row (checkbox beside its label), not a stacked
   full-width control like the text inputs. Inline-row modifier on .field using
   the existing scale; the help text wraps to its own line below. */
.field--check { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.field--check input[type="checkbox"] { min-height: 0; width: auto; padding: 0; }
.field--check .t-body { flex-basis: 100%; }