/* ========================================================================
   AEON BETA Cinema — Interactive UI/UX Demo
   Design tokens mapped 1:1 from aeon-beta-ui-v3-sprint5.pen
   ======================================================================== */

/* ---------- ABC Diatype (official AEON BETA brand typeface) ---------- */
@font-face {
  font-family: 'ABC Diatype';
  src: url('../assets/fonts/ABCDiatype-Regular.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Diatype';
  src: url('../assets/fonts/ABCDiatype-Bold.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Diatype';
  src: url('../assets/fonts/ABCDiatype-Heavy.woff2') format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'ABC Diatype', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0a0a;
  color: #fff;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ---------- Design Tokens (Dark default) ---------- */
:root {
  /* Brand */
  --primary: #FA6E66;
  --primary-fg: #FFFFFF;

  /* Accents */
  --accent-cyan: #73E5EA;
  --accent-green: #61E883;
  --accent-lime: #CEFA69;
  --accent-magenta: #E476FA;
  --accent-peach: #FAAB67;
  --accent-purple: #707EFA;
  --accent-yellow: #FADC65;
  --accent-light-blue: #EBF5FC;

  /* Status */
  --success: #4CAF50;
  --warning: #FAAB67;
  --error: #EF4444;

  /* Radii */
  --r-sm: 4px;
  --r-m: 8px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Theme-dependent (dark default) */
  --bg: #0D0D0D;
  --bg-pure: #000000;
  --card: #1A1A1A;
  --surface-deep: #111111;
  --surface-glass: rgba(26, 26, 26, 0.7);
  --border: #333333;
  --fg: #FFFFFF;
  --muted-fg: #666666;
  --light-gray: #F2F2F2;
  --star-inactive: rgba(255, 255, 255, 0.15);
}
:root[data-theme="light"] {
  --bg: #F2F2F2;            /* White Smoke, brand primary (không phải #FFFFFF tuyệt đối) */
  --bg-pure: #FFFFFF;
  --card: #FFFFFF;
  --surface-deep: #F0F0F0;
  --surface-glass: rgba(255, 255, 255, 0.7);
  --border: #E5E5E5;
  --fg: #0D0D0D;
  --muted-fg: #666666;
  --star-inactive: rgba(0, 0, 0, 0.15);
}

/* ---------- Accent themes (guideline-compliant) ----------
   Chạy trên nền LIGHT (khách thích nền trắng): nền White Smoke #F2F2F2, chữ đen.
   Mỗi theme chỉ đổi MỘT màu signature (secondary) cho CTA/active/focus/badge/spotlight.
   Chữ + logo luôn primary (đen/trắng). Không gradient, không màu ngoài bảng duyệt. */
/* Premiere (Purple) + CINE FAN (Peach): accent đậm/ấm vừa, đọc tốt trên nền trắng */
:root[data-theme="premiere"],
:root[data-theme="cinefan"] {
  --bg: #F2F2F2; --bg-pure: #FFFFFF; --card: #FFFFFF; --surface-deep: #F0F0F0;
  --surface-glass: rgba(255, 255, 255, 0.7); --border: #E5E5E5; --fg: #0D0D0D;
  --muted-fg: #666666; --star-inactive: rgba(0, 0, 0, 0.15);
}
/* Now Showing (Cyan): cyan rất sáng -> nền ĐEN để accent nổi + chữ dễ đọc */
:root[data-theme="nowshowing"] {
  --bg: #0D0D0D; --bg-pure: #000000; --card: #1A1A1A; --surface-deep: #111111;
  --surface-glass: rgba(26, 26, 26, 0.7); --border: #333333; --fg: #FFFFFF;
  --muted-fg: #666666; --star-inactive: rgba(255, 255, 255, 0.15);
}
:root[data-theme="premiere"]   { --primary: #707EFA; --primary-fg: #FFFFFF; }  /* Purple 2366C, nền trắng */
:root[data-theme="nowshowing"] { --primary: #73E5EA; --primary-fg: #0D0D0D; }  /* Cyan 3105C, nền đen */
:root[data-theme="cinefan"]    { --primary: #FAAB67; --primary-fg: #0D0D0D; }  /* Peach 714C, nền trắng */

/* ========================================================================
   App Shell
   ======================================================================== */
.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100vh;
  width: 100vw;
  background: #0a0a0a;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: #111;
  border-right: 1px solid #1f1f1f;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.sidebar__brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid #1f1f1f;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar__brand-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--fg);   /* logo đơn sắc theo guideline: "Don't use secondary on logotype", không gradient */
  display: grid; place-items: center;
  color: var(--bg); font-weight: 700; font-size: 14px;
}
.sidebar__brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar__brand-name { font-weight: 700; font-size: 14px; color: #fff; letter-spacing: 0.02em; }
.sidebar__brand-tag { font-size: 11px; color: #888; }

.sidebar__controls {
  display: flex; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #1f1f1f;
}
.theme-switch {
  display: flex;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  padding: 3px;
  flex: 1;
}
.theme-switch button {
  flex: 1;
  padding: 6px 10px;
  font-size: 11px;
  color: #888;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s ease;
}
.theme-switch button.is-active {
  background: var(--primary);
  color: var(--primary-fg);
}
.theme-switch svg { width: 12px; height: 12px; }
.theme-switch .tdot { width: 12px; height: 12px; border-radius: 999px; display: block; }
.theme-switch button.is-active .tdot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg); }

.sidebar__search {
  padding: 12px 16px 8px;
  position: relative;
}
.sidebar__search input {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 8px 10px 8px 30px;
  color: #fff;
  font-size: 12px;
  outline: none;
}
.sidebar__search input:focus { border-color: var(--primary); }
.sidebar__search svg {
  position: absolute;
  left: 26px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  color: #555;
  pointer-events: none;
}

.sidebar__group-label {
  padding: 12px 20px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555;
  font-weight: 600;
}

.sidebar__list {
  overflow-y: auto;
  flex: 1;
  padding-bottom: 16px;
}
.sidebar__list::-webkit-scrollbar { width: 6px; }
.sidebar__list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: #aaa;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  text-align: left;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: #1a1a1a; color: #fff; }
.nav-item.is-active {
  background: #1f1f1f;
  color: #fff;
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}
.nav-item__num {
  width: 22px;
  font-size: 10px;
  color: #555;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.nav-item.is-active .nav-item__num { color: var(--primary); }
.nav-item__icon { width: 14px; height: 14px; flex-shrink: 0; color: inherit; }
.nav-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }