/* ════════════════════════════════════════════════════════════
   StudioCut.Video — Design System
   Brand Palette: GenLayer Identity System
   Philosophy: Editorial Precision · Warm · Sharp · Purposeful
   ════════════════════════════════════════════════════════════ */

/* ── BRAND TOKENS ─────────────────────────────────────────── */
:root {
  --navy:   #2C5273;
  --amber:  #F29F05;
  --rust:   #D93D04;
  --silver: #D9D9D9;
  --ink:    #0D0D0D;

  /* Sharp corners only. No pill shapes. */
  --r0: 0px;
  --r1: 2px;
  --r2: 3px;

  --t: 130ms ease;
  --t2: 220ms ease;

  /* Phase colors (production pipeline) */
  --phase1-color: #5B9BD5;
  --phase1-bg: rgba(44,82,115,0.18);
  --phase2-color: #F29F05;
  --phase2-bg: rgba(242,159,5,0.14);
  --phase3-color: #E06D48;
  --phase3-bg: rgba(217,61,4,0.14);
  --phase4-color: #22C55E;
  --phase4-bg: rgba(34,197,94,0.14);
  --phase5-color: #D93D04;
  --phase5-bg: rgba(194,24,61,0.15);
}

/* ── DARK THEME (default) ────────────────────────────────── */
[data-theme="dark"],
:root {
  --bg:          #0F0E0D;
  --bg-lift:     #181614;
  --bg-surface:  #1E1C19;
  --bg-hover:    #26231F;
  --bg-input:    #1E1C19;

  --fg:          #EDE9E3;
  --fg-2:        #9E998F;
  --fg-3:        #5A5550;

  --line:        rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.13);

  --sh-card:     0 1px 2px rgba(0,0,0,0.6);
  --sh-raise:    0 4px 20px rgba(0,0,0,0.65);
  --sh-feature:  4px 4px 0 rgba(242,159,5,0.18);

  /* Sidebar */
  --nav-bg:         #1A1714;
  --nav-border:     rgba(255,255,255,0.06);
  --nav-active-bar: #F29F05;
  --nav-active-fg:  #F29F05;
  --nav-fg:         rgba(255,255,255,0.72);
  --nav-hover:      rgba(255,255,255,0.08);

  --success: #22C55E;
  --info:    #5B9BD5;

  /* Legacy aliases — maps old variable names to new design tokens */
  --bg-primary:     var(--bg);
  --bg-secondary:   var(--bg-lift);
  --bg-card:        var(--bg-surface);
  --bg-card-hover:  var(--bg-hover);
  --bg-overlay:     rgba(0, 0, 0, 0.6);

  --text-primary:   var(--fg);
  --text-secondary: var(--fg-2);
  --text-muted:     var(--fg-3);
  --text-inverse:   #0D0D0D;

  --border-color:   var(--line);
  --border-hover:   var(--line-strong);
  --border-focus:   var(--amber);

  --accent-primary:   var(--navy);
  --accent-secondary: var(--amber);
  --accent-gradient:  linear-gradient(135deg, var(--navy) 0%, #3a6b91 100%);

  --color-success:   var(--success);
  --color-warning:   var(--amber);
  --color-danger:    var(--rust);
  --color-info:      var(--info);
  --color-draft:     var(--fg-3);
  --color-published: var(--success);

  --shadow-sm:   var(--sh-card);
  --shadow-md:   var(--sh-card);
  --shadow-lg:   var(--sh-raise);
  --shadow-glow: 0 0 20px rgba(242,159,5,0.12);

  --transition-fast:   var(--t);
  --transition-normal: var(--t2);

  --header-height: 52px;
  --radius:    var(--r2);
  --radius-lg: var(--r2);
  --radius-xl: var(--r2);
}

/* ── LIGHT THEME ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg:          #F2EFE9;
  --bg-lift:     #FAF8F4;
  --bg-surface:  #FFFFFF;
  --bg-hover:    #F2EFE9;
  --bg-input:    #EAE6DF;

  --fg:          #0D0D0D;
  --fg-2:        #4A4540;
  --fg-3:        #8C877F;

  --line:        rgba(0,0,0,0.08);
  --line-strong: rgba(0,0,0,0.15);

  --sh-card:     0 1px 3px rgba(0,0,0,0.07);
  --sh-raise:    0 4px 20px rgba(0,0,0,0.1);
  --sh-feature:  4px 4px 0 rgba(44,82,115,0.12);

  /* Light mode: navy sidebar — strong brand anchor */
  --nav-bg:         #2C5273;
  --nav-border:     rgba(0,0,0,0.12);
  --nav-active-bar: #F29F05;
  --nav-active-fg:  #F29F05;
  --nav-fg:         #FFFAFA;
  --nav-hover:      rgba(255,255,255,0.12);

  --success: #16A34A;
  --info:    #2563EB;

  /* Legacy aliases — light overrides */
  --bg-primary:     var(--bg);
  --bg-secondary:   var(--bg-lift);
  --bg-card:        var(--bg-surface);
  --bg-card-hover:  var(--bg-hover);
  --bg-overlay:     rgba(0, 0, 0, 0.4);

  --text-primary:   var(--fg);
  --text-secondary: var(--fg-2);
  --text-muted:     var(--fg-3);
  --text-inverse:   #f8fafc;

  --border-color:   var(--line);
  --border-hover:   var(--line-strong);

  --color-success:   var(--success);
  --color-warning:   var(--amber);
  --color-danger:    var(--rust);
  --color-info:      var(--info);
  --color-published: var(--success);

  --shadow-sm:   var(--sh-card);
  --shadow-md:   var(--sh-card);
  --shadow-lg:   var(--sh-raise);
  --shadow-glow: 0 0 20px rgba(44,82,115,0.1);

  --phase1-bg: rgba(44,82,115,0.12);
  --phase2-bg: rgba(242,159,5,0.10);
  --phase3-bg: rgba(217,61,4,0.10);
  --phase4-bg: rgba(34,197,94,0.10);
  --phase5-bg: rgba(194,24,61,0.10);
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[x-cloak] { display: none !important; }

/* ── APP SHELL ────────────────────────────────────────────── */
.vp-app {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.vp-app a { text-decoration: none; color: inherit; }
.vp-app button { font-family: inherit; cursor: pointer; }
.vp-app svg { display: block; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.vp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r2);
  transition: all var(--t);
  white-space: nowrap;
  letter-spacing: 0.1px;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--fg-2);
}

.vp-btn--primary {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}
.vp-btn--primary:hover { background: #d98e04; border-color: #d98e04; }

.vp-btn--navy {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.vp-btn--navy:hover { background: #244460; border-color: #244460; }

.vp-btn--ghost {
  background: transparent;
  color: var(--fg-2);
  border-color: var(--line);
}
.vp-btn--ghost:hover {
  border-color: var(--line-strong);
  background: var(--bg-hover);
  color: var(--fg);
}

.vp-btn--success {
  background: var(--success);
  border-color: transparent;
  color: #fff;
}

.vp-btn--danger {
  background: var(--rust);
  border-color: transparent;
  color: #fff;
}

.vp-btn--icon {
  padding: 8px;
  width: 32px;
  height: 32px;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  color: var(--fg-2);
}
.vp-btn--icon:hover {
  border-color: var(--line-strong);
  background: var(--bg-surface);
  color: var(--fg);
}

.vp-btn--sm { padding: 5px 12px; font-size: 12px; }
.vp-btn--lg { padding: 10px 20px; font-size: 14px; }
.vp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════ */
.vp-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: var(--r1);
  white-space: nowrap;
}

.vp-badge--draft     { background: rgba(100,100,100,0.1);  color: var(--fg-3); }
.vp-badge--phase1    { background: var(--phase1-bg); color: var(--phase1-color); }
.vp-badge--phase2    { background: var(--phase2-bg); color: var(--phase2-color); }
.vp-badge--phase3    { background: var(--phase3-bg); color: var(--phase3-color); }
.vp-badge--phase4    { background: var(--phase4-bg); color: var(--phase4-color); }
.vp-badge--phase5    { background: var(--phase5-bg); color: var(--phase5-color); }
.vp-badge--published { background: rgba(34,197,94,0.14); color: var(--success); }
.vp-badge--failed    { background: rgba(217,61,4,0.18);  color: var(--rust); }
.vp-badge--stopped   { background: rgba(234,179,8,0.14);  color: var(--amber); }
.vp-badge--cancelled { background: rgba(100,100,100,0.1); color: var(--fg-3); }
.vp-badge--success   { background: rgba(34,197,94,0.14); color: var(--success); }
.vp-badge--processing { background: rgba(44,82,115,0.18); color: var(--info); }
.vp-badge--review    { background: rgba(242,159,5,0.14); color: var(--amber); }
.vp-badge--queued    { background: rgba(242,159,5,0.10); color: var(--amber); border: 1px dashed rgba(242,159,5,0.45); }

/* ════════════════════════════════════════════════════════════
   PROGRESS BAR
   ════════════════════════════════════════════════════════════ */
.vp-progress {
  height: 3px;
  background: var(--line);
  border-radius: 0;
  overflow: hidden;
}
.vp-progress__bar {
  height: 100%;
  border-radius: 0;
  transition: width 0.4s ease;
  background: var(--navy);
}
.vp-progress--lg { height: 5px; }
.vp-progress--amber .vp-progress__bar { background: var(--amber); }
.vp-progress--green .vp-progress__bar { background: var(--success); }

/* ════════════════════════════════════════════════════════════
   CARDS & PANELS
   ════════════════════════════════════════════════════════════ */
.vp-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--sh-card);
  transition: border-color var(--t), box-shadow var(--t);
  padding: 10px;
}
.vp-card:hover {
  border-color: var(--line-strong);
}
.vp-card--clickable { cursor: pointer; }
.vp-card--clickable:hover { box-shadow: var(--sh-raise); }
.vp-card--success { border-color: var(--success, #22C55E); background: rgba(34,197,94,0.04); }
.vp-card--success:hover { border-color: var(--success, #22C55E); }

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-card);
}
.panel__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--fg);
  flex: 1;
}
.panel__count {
  font-weight: 400;
  color: var(--fg-3);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

/* ════════════════════════════════════════════════════════════
   DATA TABLE
   ════════════════════════════════════════════════════════════ */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  padding: 9px 16px;
  text-align: left;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg-lift);
  white-space: nowrap;
}
.tbl tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background var(--t);
}
.tbl tbody tr:last-child { border-bottom: none; }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl td { padding: 11px 16px; color: var(--fg); vertical-align: middle; }
.tbl td.muted { color: var(--fg-2); }
.tbl td.num { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ════════════════════════════════════════════════════════════ */
.vp-input,
.vp-select,
.vp-textarea {
  width: 100%;
  padding: 9px 14px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  transition: border-color var(--t), box-shadow var(--t);
}
.vp-input:focus,
.vp-select:focus,
.vp-textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(242,159,5,0.1);
}
.vp-input::placeholder,
.vp-textarea::placeholder { color: var(--fg-3); }
.vp-input-error { color: var(--rust, #D93D04); font-size: 12px; }

/* Inline per-field validation messaging.
   .vp-input--error: red border on the offending text input.
   .vp-error--inline: small red message that appears under the input. */
.vp-input--error,
.vp-input--error:focus {
  border-color: var(--rust, #D93D04);
  box-shadow: 0 0 0 3px rgba(217,61,4,0.12);
}
.vp-error--inline {
  display: block;
  margin-top: 4px;
  color: var(--rust, #D93D04);
  font-size: 11px;
  line-height: 1.3;
}

.vp-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239E998F' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.vp-textarea { resize: vertical; min-height: 100px; }
.vp-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.vp-label--required::after { content: ' *'; color: var(--rust); }
.vp-form-group { margin-bottom: 16px; }
.vp-form-error { font-size: 12px; color: var(--rust); margin-top: 4px; }

/* ════════════════════════════════════════════════════════════
   PHASE TIMELINE
   ════════════════════════════════════════════════════════════ */
.vp-timeline {
  display: flex;
  align-items: center;
  padding: 24px 0;
  gap: 0;
}
.vp-timeline__step {
  display: flex;
  align-items: center;
  flex: 1;
}
.vp-timeline__step:last-child { flex: 0; }
.vp-timeline__circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--bg-surface);
  border: 2px solid var(--line);
  color: var(--fg-3);
  position: relative;
  z-index: 1;
  transition: all var(--t2);
}
.vp-timeline__line {
  flex: 1;
  height: 2px;
  background: var(--line);
  transition: background var(--t2);
}
.vp-timeline__step--completed .vp-timeline__circle {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.vp-timeline__step--completed .vp-timeline__line {
  background: var(--success);
}
.vp-timeline__step--active .vp-timeline__circle {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
  box-shadow: 0 0 0 4px rgba(242,159,5,0.2);
  animation: pc-pulse 2s infinite;
}
.vp-timeline__step--failed .vp-timeline__circle {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
}
.vp-timeline__label {
  font-size: 10px;
  color: var(--fg-3);
  text-align: center;
  margin-top: 6px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

@keyframes pc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(242,159,5,0.4); }
  70% { box-shadow: 0 0 0 10px rgba(242,159,5,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,159,5,0); }
}

/* ════════════════════════════════════════════════════════════
   TABS
   ════════════════════════════════════════════════════════════ */
.vp-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
}
.vp-tabs__tab {
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--t);
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vp-tabs__tab:hover { color: var(--fg); }
.vp-tabs__tab--active {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

/* ════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ════════════════════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast-notification {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r2);
  background: var(--bg-surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-raise);
  color: var(--fg);
  font-size: 13px;
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: all 300ms ease;
  max-width: 400px;
}
.toast-notification.show { transform: translateX(0); opacity: 1; }
.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--rust); }
.toast-warning { border-left: 3px solid var(--amber); }
.toast-info    { border-left: 3px solid var(--navy); }
.toast-success i { color: var(--success); }
.toast-error i   { color: var(--rust); }
.toast-warning i { color: var(--amber); }
.toast-info i    { color: var(--info); }
.toast-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
}
.toast-action {
  background: none;
  border: none;
  color: var(--amber);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  padding: 2px 8px;
}

/* ════════════════════════════════════════════════════════════
   LOADING SKELETON
   ════════════════════════════════════════════════════════════ */
.vp-skeleton {
  background: linear-gradient(90deg,
      var(--bg-surface) 25%,
      var(--bg-hover) 50%,
      var(--bg-surface) 75%);
  background-size: 200% 100%;
  animation: pc-shimmer 1.5s infinite;
  border-radius: var(--r2);
}
@keyframes pc-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════
   MODAL / OVERLAY
   ════════════════════════════════════════════════════════════ */
.vp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vp-modal {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-raise);
  border-radius: var(--r2);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}
.vp-modal__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vp-modal__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.vp-modal__body { padding: 20px; }
.vp-modal__foot,
.vp-modal__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.vp-modal__close {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r1, 6px);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--fg-3);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
  flex-shrink: 0;
}
.vp-modal__close:hover {
  background: var(--bg-lift);
  color: var(--fg);
  border-color: var(--line-strong);
}

/* ════════════════════════════════════════════════════════════
   SECTION HEADERS
   ════════════════════════════════════════════════════════════ */
.sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.sec-head h2 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--fg-3);
}
.sec-head__line { flex: 1; height: 1px; background: var(--line); }

/* ════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════ */
.vp-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--fg-3);
}
.vp-empty-state__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-2);
  margin-bottom: 8px;
}
.vp-empty-state__text {
  font-size: 13px;
  margin-bottom: 24px;
}

/* ════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ════════════════════════════════════════════════════════════ */
.divider { height: 1px; background: var(--line); margin: 4px 0; }
.text-amber  { color: var(--amber); }
.text-navy   { color: var(--navy); }
.text-rust   { color: var(--rust); }
.text-success { color: var(--success); }
.text-muted  { color: var(--fg-3); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .vp-app { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════
   ICON SYSTEM (base classes — see icons.css for icon defs)
   ════════════════════════════════════════════════════════════ */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon--xs  { width: 14px; height: 14px; }
.icon--sm  { width: 16px; height: 16px; }
.icon--md  { width: 20px; height: 20px; }
.icon--lg  { width: 24px; height: 24px; }
.icon--xl  { width: 32px; height: 32px; }
.icon--2xl { width: 48px; height: 48px; }

.icon--success { color: var(--success); }
.icon--warning { color: var(--amber); }
.icon--danger  { color: var(--rust); }
.icon--accent  { color: var(--navy); }
.icon--info    { color: var(--info); }
.icon--muted   { color: var(--fg-3); }

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.icon--spin { animation: icon-spin 0.8s linear infinite; }

@keyframes icon-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}
.icon--pulse { animation: icon-pulse 1.8s ease-in-out infinite; }