/* ============ UGC Factory Design System v5 — theo design handoff ============ */

:root {
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --bg: oklch(0.995 0.002 250);
  --bg-elevated: #ffffff;
  --surface: oklch(0.985 0.003 250);
  --surface-hover: oklch(0.97 0.004 250);
  --surface-active: oklch(0.95 0.005 250);
  --surface-sunken: oklch(0.975 0.003 250);

  --border: oklch(0.92 0.005 250);
  --border-strong: oklch(0.86 0.006 250);
  --border-subtle: oklch(0.955 0.004 250);

  --text: oklch(0.18 0.01 250);
  --text-secondary: oklch(0.38 0.008 250);
  --text-muted: oklch(0.55 0.008 250);
  --text-faint: oklch(0.7 0.006 250);

  --accent-hue: 258;
  --accent: oklch(0.55 0.22 var(--accent-hue));
  --accent-hover: oklch(0.5 0.22 var(--accent-hue));
  --accent-fg: #ffffff;
  --accent-soft: oklch(0.96 0.03 var(--accent-hue));
  --accent-soft-fg: oklch(0.4 0.2 var(--accent-hue));
  --accent-border: oklch(0.88 0.06 var(--accent-hue));
  --focus-ring: oklch(0.7 0.18 var(--accent-hue) / 0.35);

  /* Status */
  --status-draft-fg: oklch(0.4 0.02 250);
  --status-draft-bg: oklch(0.94 0.006 250);
  --status-draft-dot: oklch(0.6 0.02 250);
  --status-review-fg: oklch(0.42 0.14 60);
  --status-review-bg: oklch(0.97 0.05 80);
  --status-review-dot: oklch(0.68 0.17 65);
  --status-approved-fg: oklch(0.42 0.12 155);
  --status-approved-bg: oklch(0.96 0.04 155);
  --status-approved-dot: oklch(0.6 0.16 155);
  --status-producing-fg: oklch(0.42 0.16 300);
  --status-producing-bg: oklch(0.96 0.04 300);
  --status-producing-dot: oklch(0.6 0.19 300);
  --status-published-fg: oklch(0.42 0.16 240);
  --status-published-bg: oklch(0.96 0.04 240);
  --status-published-dot: oklch(0.58 0.2 240);
  --status-error-fg: oklch(0.45 0.19 25);
  --status-error-bg: oklch(0.96 0.04 25);
  --status-error-dot: oklch(0.6 0.22 25);
  --status-insight-fg: oklch(0.42 0.14 200);
  --status-insight-bg: oklch(0.96 0.04 200);
  --status-insight-dot: oklch(0.6 0.16 200);

  --shadow-xs: 0 1px 0 oklch(0.9 0.005 250 / 0.5);
  --shadow-sm: 0 1px 2px oklch(0.5 0.02 250 / 0.05), 0 1px 3px oklch(0.5 0.02 250 / 0.04);
  --shadow-md: 0 4px 12px oklch(0.5 0.02 250 / 0.06), 0 1px 3px oklch(0.5 0.02 250 / 0.05);
  --shadow-lg: 0 12px 32px oklch(0.5 0.02 250 / 0.1), 0 4px 8px oklch(0.5 0.02 250 / 0.05);
  --shadow-inset: inset 0 1px 0 oklch(1 0 0 / 0.6);

  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms; --dur-med: 200ms;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
.muted { color: var(--text-muted); }

.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
textarea { resize: vertical; }
::selection { background: var(--accent); color: var(--accent-fg); }

/* ---------- Card ---------- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card-hover { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.card-hover:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 13px; font-weight: 500; line-height: 1;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--surface-hover); }
.btn:active { background: var(--surface-active); }

.btn-primary, .btn.primary {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
  box-shadow: var(--shadow-inset), 0 1px 2px oklch(0.3 0.15 var(--accent-hue) / 0.2);
}
.btn-primary:hover, .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-outline, .btn-soft, .btn.secondary {
  background: var(--bg-elevated); border-color: var(--border); box-shadow: var(--shadow-xs); color: var(--text);
}
.btn-outline:hover, .btn-soft:hover, .btn.secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn-danger-soft { color: var(--status-error-fg); background: var(--status-error-bg); }
.btn-danger-soft:hover { background: var(--status-error-bg); filter: brightness(0.96); }

.btn-success { background: var(--status-approved-dot); color: #fff; }
.btn-success:hover { filter: brightness(0.94); }
.btn-warn { background: var(--status-review-dot); color: #fff; }
.btn-warn:hover { filter: brightness(0.94); }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-xs { height: 24px; padding: 0 8px; font-size: 12px; border-radius: var(--radius-sm); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Inputs ---------- */
.input, .select, textarea.input {
  width: 100%;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder, textarea.input::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.label {
  display: block; font-size: 10px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 5px; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--font-mono);
}

/* ---------- Badge / chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500; line-height: 1;
  white-space: nowrap;
  background: var(--status-draft-bg); color: var(--status-draft-fg);
  border: none;
}
.chip-dot::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--status-draft-dot); flex-shrink: 0; }

.chip.st-draft { background: var(--status-draft-bg); color: var(--status-draft-fg); }
.chip.st-draft::before { background: var(--status-draft-dot); }
.chip.st-review { background: var(--status-review-bg); color: var(--status-review-fg); }
.chip.st-review::before { background: var(--status-review-dot); }
.chip.st-approved { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.chip.st-approved::before { background: var(--status-approved-dot); }
.chip.st-producing { background: var(--status-producing-bg); color: var(--status-producing-fg); }
.chip.st-producing::before { background: var(--status-producing-dot); }
.chip.st-published { background: var(--status-published-bg); color: var(--status-published-fg); }
.chip.st-published::before { background: var(--status-published-dot); }
.chip.st-error { background: var(--status-error-bg); color: var(--status-error-fg); }
.chip.st-error::before { background: var(--status-error-dot); }
.chip.st-insight { background: var(--status-insight-bg); color: var(--status-insight-fg); }
.chip.st-insight::before { background: var(--status-insight-dot); }
.chip.st-rendering { background: var(--status-producing-bg); color: var(--status-producing-fg); }
.chip.st-rendering::before { background: var(--status-producing-dot); animation: rec-pulse 1.4s ease-in-out infinite; }

.tag {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px;
  border-radius: 4px;
  background: var(--surface); color: var(--text-secondary);
  font-size: 11px; font-family: var(--font-mono); font-weight: 500;
  border: 1px solid var(--border-subtle);
}

@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---------- Page typography ---------- */
.page-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--text);
}
.page-kicker {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
}
.section-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 21px; letter-spacing: -0.015em; color: var(--text);
}
.section-sub { font-size: 12px; color: var(--text-muted); }

/* ---------- KPI / stat ---------- */
.stat {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 14px;
  box-shadow: none;
}
.stat .stat-value {
  font-family: var(--font-serif); font-size: 26px; line-height: 1;
  letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums;
}
.stat .stat-label {
  font-size: 10px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 500;
}

/* ---------- Sidebar (desktop) ---------- */
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--text); color: var(--bg-elevated);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 17px; flex-shrink: 0; position: relative;
}
.brand-mark::after {
  content: ""; position: absolute; top: -2px; right: -2px;
  width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.6 0.22 25);
  box-shadow: 0 0 0 2px var(--surface);
}

.side-group-label {
  padding: 8px 12px 5px;
  font-size: 10px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  font-family: var(--font-mono);
}

.side-item {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 10px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
  cursor: pointer; width: 100%; text-align: left;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.side-item:hover { background: var(--surface-hover); color: var(--text); }
.side-item.active {
  background: var(--bg-elevated); color: var(--text);
  box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--border);
}
.side-item i { width: 16px; text-align: center; font-size: 13px; color: var(--text-muted); }
.side-item.active i { color: var(--accent); }
.side-item .count {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted); background: var(--surface);
  padding: 2px 6px; border-radius: 4px;
}
.side-item.active .count { background: var(--accent-soft); color: var(--accent-soft-fg); }

/* Project switcher card */
.proj-card {
  width: 100%; text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.proj-card:hover { border-color: var(--border-strong); background: var(--surface-hover); }

/* ---------- Bottom nav (mobile) ---------- */
.bnav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 0 5px; flex: 1;
  font-size: 10px; font-weight: 500; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.bnav-item.active { color: var(--text); }
.bnav-item i { font-size: 18px; }
.bnav-item.active i { color: var(--accent); }

/* ---------- Kanban ---------- */
.kanban-col {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.kb-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.kb-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  background: var(--bg); padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--border-subtle);
}
.kb-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--dur-fast) var(--ease-out);
}
.kb-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

/* ---------- Details/panel ---------- */
details.panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
details.panel > summary {
  cursor: pointer; padding: 12px 14px; font-weight: 500; font-size: 13px; color: var(--text);
  list-style: none; display: flex; align-items: center; gap: 8px; user-select: none;
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after {
  content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: 10px; color: var(--text-faint); margin-left: auto; transition: transform var(--dur-med) var(--ease-out);
}
details.panel[open] > summary::after { transform: rotate(180deg); }
details.panel > .panel-body { padding: 0 14px 12px; }

/* ---------- Toast ---------- */
.toast-in { animation: toastIn .22s var(--ease-out) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Page fade ---------- */
#main-content { animation: pageIn .2s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Table ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; padding: 8px 12px;
  font-weight: 500; color: var(--text-muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--surface-hover); }

/* ---------- Segmented ---------- */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.segmented button {
  height: 26px; padding: 0 10px; border: none; background: transparent;
  border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-xs); }

/* ---------- 9:16 frame (motif xưởng phim) ---------- */
.frame-916 {
  aspect-ratio: 9/16;
  background: linear-gradient(140deg, oklch(0.28 0.02 250), oklch(0.18 0.015 250));
  border-radius: var(--radius-md);
  position: relative; overflow: hidden;
  border: 1px solid var(--border-strong);
}
.frame-916::before, .frame-916::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6%;
  background: repeating-linear-gradient(90deg, oklch(0.1 0 0) 0 6%, transparent 6% 12%);
  opacity: 0.6;
}
.frame-916::before { top: 0; }
.frame-916::after { bottom: 0; }
.frame-916 .timecode {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
  color: oklch(0.95 0 0); background: oklch(0 0 0 / 0.4);
  padding: 2px 6px; border-radius: 3px; z-index: 2;
}
.frame-916 .rec {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
  color: oklch(0.95 0 0); background: oklch(0.55 0.22 25);
  padding: 2px 6px; border-radius: 3px; z-index: 2;
  display: flex; align-items: center; gap: 4px;
}
.frame-916 .rec::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.98 0 0); animation: rec-pulse 1.4s ease-in-out infinite;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ---------- Mobile ---------- */
@media (max-width: 1023px) {
  #main-content { padding-bottom: 84px !important; }
}

.kanban-scroll { scrollbar-width: thin; }
@media (max-width: 767px) {
  .kanban-scroll { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .kanban-scroll > * { min-width: 78vw; scroll-snap-align: start; }
}