/* Дизайн-система video-service (E13-S01) — направление «а-ля YouTube».
   Медиатека: обложки-доминанты 16:9 со скруглением, красный акцент, шрифт Roboto,
   минимум хрома. Грузится ПОСЛЕ Bootstrap 5.3 — перекрывает его CSS-переменные каскадом.
   Токены в неймспейсе --vs-*, мапятся на --bs-*. Правка облика идёт здесь, не в шаблонах. */

/* ── шрифты ─────────────────────────────────────────────────────────────── */
:root {
  --vs-font-ui: "Roboto", "Arial", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vs-font-mono: ui-monospace, "SF Mono", "Roboto Mono", Consolas, monospace;
}

/* ── палитра: light (по-умолчанию у YouTube) ────────────────────────────── */
:root,
[data-bs-theme="light"] {
  --vs-bg: #ffffff;
  --vs-surface: #ffffff;
  --vs-surface-2: #f2f2f2;
  --vs-border: #e5e5e5;
  --vs-text: #0f0f0f;
  --vs-text-muted: #606060;
  --vs-accent: #cc0000;
  --vs-accent-hover: #aa0000;
  --vs-accent-active: #990000;
  --vs-success: #2ba640;
  --vs-danger: #cc0000;
  --vs-warning: #c98a00;
  --vs-shadow-sm: none;
  --vs-shadow: none;
  --vs-elev: none;
}

/* ── палитра: dark (основной режим, тёмный YouTube) ─────────────────────── */
[data-bs-theme="dark"] {
  --vs-bg: #0f0f0f;
  --vs-surface: #212121;
  --vs-surface-2: #272727;
  --vs-border: #303030;
  --vs-text: #f1f1f1;
  --vs-text-muted: #aaaaaa;
  --vs-accent: #ff0000;
  --vs-accent-hover: #ff4444;
  --vs-accent-active: #cc0000;
  --vs-success: #2ba640;
  --vs-danger: #ff4e45;
  --vs-warning: #f1c40f;
  --vs-shadow-sm: none;
  --vs-shadow: none;
  --vs-elev: none;
}

/* ── мапинг на Bootstrap ────────────────────────────────────────────────── */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-bg: var(--vs-bg);
  --bs-body-color: var(--vs-text);
  --bs-secondary-color: var(--vs-text-muted);
  --bs-tertiary-color: var(--vs-text-muted);
  --bs-border-color: var(--vs-border);
  --bs-primary: var(--vs-accent);
  --bs-primary-rgb: 204, 0, 0;
  --bs-link-color: var(--vs-accent);
  --bs-link-color-rgb: 204, 0, 0;
  --bs-link-hover-color: var(--vs-accent-hover);
  --bs-emphasis-color: var(--vs-text);
  --bs-border-radius-sm: 6px;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 12px;
  --bs-body-font-size: .9375rem;
  --bs-body-font-family: var(--vs-font-ui);
}
[data-bs-theme="dark"] { --bs-primary-rgb: 255, 0, 0; }

body {
  font-feature-settings: "tnum" 1;
}

/* ── типографика ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--vs-text);
}
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
h3, .h3 { font-size: 1.15rem; }
code, pre, .font-monospace { font-family: var(--vs-font-mono); }
.vs-mono { font-family: var(--vs-font-mono); font-feature-settings: "tnum" 1; }

/* ── навбар: следует теме (белая в light, чёрная в dark), как у YouTube ──── */
.navbar {
  background: var(--vs-bg) !important;
  border-bottom: 1px solid var(--vs-border);
  --bs-navbar-color: var(--vs-text-muted);
  --bs-navbar-hover-color: var(--vs-text);
  --bs-navbar-active-color: var(--vs-text);
  padding-top: .45rem;
  padding-bottom: .45rem;
}
/* бренд — красный «плашкой», узнаваемый YouTube-жест */
.navbar-brand {
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--vs-text) !important;
}
.navbar .nav-link { border-radius: 8px; padding-left: .6rem; padding-right: .6rem; }
.navbar .nav-link.active { color: var(--vs-text); font-weight: 500; }
.navbar .nav-link:hover { background: var(--vs-surface-2); }
/* кнопки в навбаре, что были рассчитаны на тёмный бар */
.navbar .btn-outline-light {
  --bs-btn-color: var(--vs-text);
  --bs-btn-border-color: var(--vs-border);
  --bs-btn-hover-bg: var(--vs-surface-2);
  --bs-btn-hover-color: var(--vs-text);
  --bs-btn-hover-border-color: var(--vs-border);
}

/* переключатель темы — тоже следует теме */
.vs-theme-toggle {
  background: transparent;
  border: 1px solid var(--vs-border);
  color: var(--vs-text-muted);
  border-radius: 999px;
  width: 34px; height: 34px;
  line-height: 1;
  cursor: pointer;
}
.vs-theme-toggle:hover { color: var(--vs-text); background: var(--vs-surface-2); }

/* ── карточки каталога — медиатека YouTube: без рамки, обложка-доминанта ──── */
.card {
  --bs-card-bg: transparent;
  --bs-card-border-color: transparent;
  --bs-card-spacer-y: 10px;
  --bs-card-spacer-x: 2px;
  border: 0;
  border-radius: var(--bs-border-radius-lg);
  background: transparent;
  box-shadow: none;
}
/* обложка: пропорцию 16:9 держит КОНТЕЙНЕР (.vs-thumb-wrap), картинка заполняет его
   абсолютом — надёжнее, чем aspect-ratio на самом <img> (тот схлопывается без высоты). */
.vs-thumb-wrap {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  background: var(--vs-surface-2);
}
.vs-thumb-wrap .card-img-top,
.vs-thumb-wrap > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}
.card-body { padding-left: 2px; padding-right: 2px; --bs-card-spacer-x: 2px; }
.card-title, .card .fw-semibold { line-height: 1.3; }
.card:hover .vs-thumb-wrap .card-img-top { filter: brightness(.92); }
.card-footer {
  background: transparent;
  border-top: 0;
  color: var(--vs-text-muted);
  font-size: .8125rem;
  padding-left: 2px; padding-right: 2px;
}
/* бейдж длительности поверх обложки — как на YouTube */
.vs-dur {
  position: absolute;
  right: 6px; bottom: 6px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: var(--vs-font-mono);
}

/* ── списки/группы ──────────────────────────────────────────────────────── */
.list-group-item {
  background: var(--vs-surface);
  border-color: var(--vs-border);
  color: var(--vs-text);
}

/* ── таблицы ────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--vs-text);
  --bs-table-border-color: var(--vs-border);
  --bs-table-striped-bg: var(--vs-surface-2);
  --bs-table-hover-bg: var(--vs-surface-2);
  --bs-table-cell-padding-y: 6px;
  --bs-table-cell-padding-x: 10px;
}
.table > thead th {
  color: var(--vs-text-muted);
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--vs-border);
}

/* ── кнопки ─────────────────────────────────────────────────────────────── */
.btn { font-weight: 500; }
.btn-sm { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .55rem; }
.btn-primary {
  --bs-btn-bg: var(--vs-accent);
  --bs-btn-border-color: var(--vs-accent);
  --bs-btn-hover-bg: var(--vs-accent-hover);
  --bs-btn-hover-border-color: var(--vs-accent-hover);
  --bs-btn-active-bg: var(--vs-accent-active);
  --bs-btn-active-border-color: var(--vs-accent-active);
}
.btn-outline-secondary {
  --bs-btn-color: var(--vs-text);
  --bs-btn-border-color: var(--vs-border);
  --bs-btn-hover-bg: var(--vs-surface-2);
  --bs-btn-hover-border-color: var(--vs-accent);
  --bs-btn-hover-color: var(--vs-text);
}
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .3);
}

/* ── формы ──────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--vs-surface);
  border-color: var(--vs-border);
  color: var(--vs-text);
}
.form-control:focus, .form-select:focus {
  background: var(--vs-surface);
  border-color: var(--vs-accent);
  color: var(--vs-text);
}
.form-control::placeholder { color: var(--vs-text-muted); }
.form-control-sm { padding: .25rem .5rem; }
.input-group-text {
  background: var(--vs-surface-2);
  border-color: var(--vs-border);
  color: var(--vs-text-muted);
}

/* ── модалки ────────────────────────────────────────────────────────────── */
.modal-content {
  --bs-modal-bg: var(--vs-surface);
  --bs-modal-border-color: var(--vs-border);
  --bs-modal-border-radius: var(--bs-border-radius-xl);
}
.modal-header, .modal-footer { border-color: var(--vs-border); }
.modal-backdrop.show { opacity: .6; }

/* ── бейджи / тэги ──────────────────────────────────────────────────────── */
.badge.bg-secondary,
.badge.text-bg-secondary {
  background: var(--vs-surface-2) !important;
  color: var(--vs-text) !important;
  border: 1px solid var(--vs-border);
  font-weight: 500;
}
.badge.bg-primary { background: var(--vs-accent) !important; }
/* мягкий tinted-тэг (для Ф3, заменит пёстрые bg-light text-dark border) */
.vs-tag {
  background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
  color: var(--vs-accent-hover);
  border: 1px solid color-mix(in srgb, var(--vs-accent) 30%, transparent);
  border-radius: 4px;
  padding: .15em .5em;
  font-size: .78rem;
  font-weight: 500;
}
/* жёсткие утилиты, что не победить переменными: приглушаем в dark */
[data-bs-theme="dark"] .badge.bg-light {
  background: var(--vs-surface-2) !important;
  color: var(--vs-text) !important;
}
[data-bs-theme="dark"] .badge.bg-warning.text-dark,
[data-bs-theme="dark"] .badge.bg-warning {
  color: #1c1206 !important;
}

/* ── статус задач ───────────────────────────────────────────────────────── */
.vs-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 500;
  padding: .15em .55em; border-radius: 4px;
}
.vs-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.vs-status--done { color: var(--vs-success); }
.vs-status--done::before { background: var(--vs-success); }
.vs-status--error { color: var(--vs-danger); }
.vs-status--error::before { background: var(--vs-danger); }
.vs-status--proc { color: var(--vs-accent); }
.vs-status--proc::before { background: var(--vs-accent); animation: vs-pulse 1.2s infinite; }
@keyframes vs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ── прогресс ───────────────────────────────────────────────────────────── */
.progress {
  background: var(--vs-surface-2);
  height: 6px;
  border-radius: 3px;
}
.progress-bar { background: var(--vs-accent); }

/* ── прочее ─────────────────────────────────────────────────────────────── */
hr { border-color: var(--vs-border); opacity: 1; }
.alert { border-radius: var(--bs-border-radius); }
::selection { background: rgba(59, 130, 246, .35); }