/* ============================================================================
   Apple Movies Player — Admin Panel
   Design tokens matched to the reference screenshots:
   dark charcoal background, red primary, white text, subtle gray borders.
   ============================================================================ */

:root {
  --bg-body: #0a0a0a;
  --bg-sidebar: #0c0c0c;
  --bg-topbar: #0c0c0c;
  --bg-card: #141414;
  --bg-card-alt: #1a1a1a;
  --bg-input: #1c1c1c;
  --bg-hover: #1f1f1f;

  --border-color: #262626;
  --border-color-light: #2e2e2e;

  --text-primary: #f5f5f5;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  --red: #e11d2a;
  --red-dark: #b8151f;
  --red-light: #ff4757;
  --red-soft: rgba(225, 29, 42, 0.12);

  --green: #22c55e;
  --green-soft: rgba(34, 197, 94, 0.12);
  --yellow: #eab308;
  --yellow-soft: rgba(234, 179, 8, 0.12);
  --gray-badge: #3a3a3a;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  /* Spacing scale — the single source of truth for vertical rhythm.
     Every card/section/form spacing rule below is built from these
     instead of one-off pixel values scattered across pages. */
  --space-tight: 6px;
  --space-block: 16px;
  --space-section: 20px;

  --sidebar-width: 260px;
  --topbar-height: 64px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --transition: 150ms ease;
}

/* Light theme override — toggled via the moon/sun icon in the topbar */
[data-theme="light"] {
  --bg-body: #f4f5f7;
  --bg-sidebar: #ffffff;
  --bg-topbar: #ffffff;
  --bg-card: #ffffff;
  --bg-card-alt: #f8f9fa;
  --bg-input: #ffffff;
  --bg-hover: #f1f2f4;
  --border-color: #e5e7eb;
  --border-color-light: #eceef1;
  --text-primary: #16181d;
  --text-secondary: #565d6b;
  --text-muted: #8a919e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: transform var(--transition);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-brand .logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-brand .logo-mark svg { width: 18px; height: 18px; fill: #fff; }

.sidebar-brand .brand-text .brand-name {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--text-primary);
  line-height: 1.2;
}

.sidebar-brand .brand-text .brand-sub {
  font-size: 11.5px;
  color: var(--red);
  font-weight: 500;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
}

.nav-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 14px 10px 6px;
}

.nav-group-label:first-child { padding-top: 4px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background var(--transition), color var(--transition);
}

.nav-link svg, .nav-link i { width: 17px; height: 17px; font-size: 15px; flex-shrink: 0; }

.nav-link:hover { background: var(--bg-hover); color: var(--text-primary); }

.nav-link.active {
  background: var(--red);
  color: #fff;
}

.nav-link.has-children { justify-content: space-between; }
.nav-link.has-children .nav-link-main { display: flex; align-items: center; gap: 12px; }
.nav-link .chevron { transition: transform var(--transition); font-size: 12px; }
.nav-group.open > .nav-link .chevron { transform: rotate(180deg); }

.nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
  padding-left: 30px;
}

.nav-group.open .nav-submenu { max-height: 400px; }

.nav-submenu .nav-link { font-size: 13px; padding: 8px 12px; }

/* ---------------------------------------------------------------------------
   Topbar
   --------------------------------------------------------------------------- */

.main-area {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-height);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar-left { display: flex; align-items: center; gap: 16px; }

.menu-toggle {
  width: 36px;
  height: 36px;
  background: var(--red);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.topbar-title { font-size: 19px; font-weight: 700; color: var(--text-primary); }

.topbar-right { display: flex; align-items: center; gap: 18px; }

.icon-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 17px;
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.badge-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.admin-chip { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: var(--radius-sm); position: relative; }
.admin-chip:hover { background: var(--bg-hover); }

.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }

.admin-chip-text { line-height: 1.25; }
.admin-chip-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.admin-chip-role { font-size: 11.5px; color: var(--text-secondary); }

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

.page-content { padding: 26px 28px 60px; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-header h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.page-header p { margin: 0; color: var(--text-secondary); font-size: 13.5px; }

.breadcrumb { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.breadcrumb .current { color: var(--red); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
}

.card-title {
  font-size: 15.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-block);
}

/* A real subtitle pulls up tight against its title (their own paragraph),
   then still leaves the standard block gap before whatever comes next.
   This means card header spacing is now IDENTICAL whether a card has a
   title only, or a title + subtitle — no per-page " " spacer divs
   or guesswork required. */
.card-subtitle { font-size: 12.5px; color: var(--text-secondary); margin: -10px 0 var(--space-block); }

/* Consistent gap between stacked top-level sections (cards or grids of
   cards) in the main content area — the single source of truth for
   "space between sections", so pages never need an inline
   margin-top/margin-bottom to separate one section from the next. */
.page-content > .card + .card,
.page-content > .card + .grid,
.page-content > .grid + .card,
.page-content > .grid + .grid {
  margin-top: var(--space-section);
}

.grid { display: grid; gap: var(--space-section); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px 18px 14px;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--red-soft);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.stat-label { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 4px; }
.stat-value { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.stat-link { font-size: 12.5px; color: var(--red); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), opacity var(--transition);
  white-space: nowrap;
}

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); }

.btn-outline { background: transparent; border-color: var(--border-color-light); color: var(--text-primary); }
.btn-outline:hover { background: var(--bg-hover); }

.btn-danger-outline { background: transparent; border-color: rgba(225,29,42,0.4); color: var(--red-light); }
.btn-danger-outline:hover { background: var(--red-soft); }

.btn-block { width: 100%; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 12.5px; }

/* A button that directly follows form content gets the standard block
   gap automatically — no per-page inline margin-top needed. */
.field + .btn,
.setting-row + .btn,
.rich-editor + .btn {
  margin-top: var(--space-block);
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */

.field { margin-bottom: var(--space-block); }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--text-primary); }
.field .hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.field .help-icon { color: var(--text-muted); font-size: 12px; margin-left: 4px; }

/* A field that follows a setting-row (toggle list) needs its own top gap —
   setting-row uses border-bottom for internal rhythm, not a margin, so
   without this the next field sits flush against it. */
.setting-row + .field { margin-top: var(--space-block); }

.input, .select, textarea.input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-color-light);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color var(--transition);
}

/* Pin single-line controls to one consistent height so text/date/number
   inputs and <select> all line up pixel-for-pixel with each other and
   with buttons in the same row — browsers otherwise compute slightly
   different heights per input type. Multi-line controls (textarea, the
   rich-text editor body, which also reuses the .input class for shared
   visual styling) keep their own padding-based sizing. */
input.input, select.select {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}

.input:focus, .select:focus, textarea.input:focus {
  outline: none;
  border-color: var(--red);
}

.input-group { position: relative; }
.input-group .input { padding-right: 42px; }
.input-group .input-action {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-group .input-action:hover { background: var(--bg-hover); color: var(--text-primary); }
.input-group.has-two-actions .input { padding-right: 78px; }
.input-group.has-two-actions .input-action:nth-of-type(2) { right: 38px; }

textarea.input { resize: vertical; min-height: 90px; }

select.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%239ca3af'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 32px;
}

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
  position: absolute; inset: 0;
  background: #3a3a3a;
  border-radius: 999px;
  transition: background var(--transition);
}
.toggle .slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
}
.toggle input:checked + .slider { background: var(--red); }
.toggle input:checked + .slider::before { transform: translateX(18px); }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-color);
}
.setting-row:last-child { border-bottom: none; }
.setting-row .setting-text .setting-title { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.setting-row .setting-text .setting-desc { font-size: 12px; color: var(--text-secondary); }
.setting-row-value { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Badges / status pills
   --------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-red { background: var(--red-soft); color: var(--red-light); }
.badge-yellow { background: var(--yellow-soft); color: var(--yellow); }
.badge-gray { background: var(--gray-badge); color: var(--text-secondary); }

.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
.status-dot.gray { background: var(--text-muted); }
.status-dot.red { background: var(--red); }

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th {
  text-align: left;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
table.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  white-space: nowrap;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: var(--bg-hover); }

.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; }
.pagination a, .pagination span {
  min-width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color-light);
  color: var(--text-secondary);
  font-size: 13px;
}
.pagination .active { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------------- */

.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 13px;
  margin-bottom: 18px;
}
.notice-warning { background: rgba(234,179,8,0.08); border-color: rgba(234,179,8,0.3); color: #f0c419; }
.notice-info { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); color: #7dabf7; }
.notice-success { background: var(--green-soft); border-color: rgba(34,197,94,0.3); color: var(--green); }
.notice-error { background: var(--red-soft); border-color: rgba(225,29,42,0.3); color: var(--red-light); }

.dropdown-menu { display: none; }
.dropdown-menu.open { display: block; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--bg-hover); }

.chip-list { display: flex; flex-direction: column; gap: 10px; }
.domain-chip {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-input);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  font-size: 13px;
}
.domain-chip .remove-btn { color: var(--red-light); background: none; border: none; font-size: 14px; }

/* Small inline text-link-style button, e.g. "Clear" next to a saved-secret status line */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--red-light);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--red); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 18px; }
.tab {
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab.active { color: var(--red); border-color: var(--red); }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-secondary); }
.checklist li i { color: var(--red); margin-top: 2px; }

.provider-card { border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 18px; background: var(--bg-card); }
.provider-card.selected { border-color: var(--red); }
.provider-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.provider-icon { width: 40px; height: 40px; border-radius: var(--radius); background: var(--bg-card-alt); display: flex; align-items: center; justify-content: center; font-size: 18px; }

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #161616 0%, #0a0a0a 60%);
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
}
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }

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

@media (max-width: 1200px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .menu-toggle { display: flex; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 39; }
  .sidebar-backdrop.show { display: block; }
}

@media (max-width: 640px) {
  .grid-5, .grid-4 { grid-template-columns: 1fr 1fr; }
  .page-content { padding: 18px 14px 40px; }
  .topbar { padding: 0 14px; }
  table.data-table { font-size: 12px; }
}