/* Тема адмінки у стилі Telegram-бота (33-admin-theme.md).
   Єдине джерело кольорів — змінні --vpusty-* нижче. Тема лише стилі:
   розмітка сторінок не змінюється. */

:root {
  --vpusty-brand: #2A66C4;
  --vpusty-brand-rgb: 42, 102, 196;
  --vpusty-brand-hover: #1B4FA0;
  --vpusty-brand-dark: #1B4FA0;
  --vpusty-on-brand: #FFFFFF;
  --vpusty-on-brand-dark: #FFFFFF;
  --vpusty-accent: #F59E0B;
  --vpusty-accent-ink: #1F2937;
  --vpusty-bg: #F4F7FB;
  --vpusty-surface: #FFFFFF;
  --vpusty-ink: #1F2937;

  --tblr-primary: var(--vpusty-brand);
  --tblr-primary-rgb: var(--vpusty-brand-rgb);
  --tblr-primary-fg: var(--vpusty-on-brand);
  --tblr-link-color: var(--vpusty-brand);
  --tblr-link-color-rgb: var(--vpusty-brand-rgb);
  --tblr-link-hover-color: var(--vpusty-brand-hover);
  --tblr-body-bg: var(--vpusty-bg);
  --tblr-body-color: var(--vpusty-ink);
  --tblr-bg-surface: var(--vpusty-surface);
}

/* Сайдбар і шапка: кольори задані явно, а не успадковані від атрибута
   Tabler на самих елементах. */
aside.navbar-vertical,
header.navbar {
  background-color: var(--vpusty-brand-dark);
  color: var(--vpusty-on-brand-dark);
}

aside.navbar-vertical .nav-link,
aside.navbar-vertical .navbar-brand,
header.navbar .nav-link {
  color: var(--vpusty-on-brand-dark);
}

/* Вкладене меню (`nav.navbar`) має власний темний фон Tabler — прозорий,
   щоб сайдбар був суцільним. */
aside.navbar-vertical .navbar,
aside.navbar-vertical .navbar-collapse {
  background-color: transparent;
  color: var(--vpusty-on-brand-dark);
}

aside.navbar-vertical .navbar-brand {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

aside.navbar-vertical .nav-link:hover {
  background-color: color-mix(in srgb, var(--vpusty-on-brand-dark) 12%, transparent);
}

aside.navbar-vertical .btn-secondary {
  background-color: transparent;
  border-color: var(--vpusty-on-brand-dark);
  color: var(--vpusty-on-brand-dark);
}

aside.navbar-vertical .btn-secondary:hover {
  background-color: color-mix(in srgb, var(--vpusty-on-brand-dark) 12%, transparent);
}

/* Помаранчевий акцент №1: активний пункт меню. */
.navbar-vertical .nav-link.active {
  background-color: color-mix(in srgb, var(--vpusty-on-brand-dark) 18%, transparent);
  color: var(--vpusty-on-brand-dark);
  box-shadow: inset 4px 0 0 var(--vpusty-accent);
}

/* Помаранчевий акцент №2: банер попередження. */
.alert-warning {
  background-color: var(--vpusty-accent);
  color: var(--vpusty-accent-ink);
  border-color: var(--vpusty-accent);
}

/* Нейтральні елементи робочої зони беруть кольори палітри, а не власні
   (світлі/сірі) кольори Tabler, які в темній темі не збігаються з нею. */
.btn-secondary,
.btn-light,
.btn-white,
.form-select {
  background-color: var(--vpusty-surface);
  color: var(--vpusty-ink);
  border-color: color-mix(in srgb, var(--vpusty-ink) 25%, transparent);
}

.card-footer,
.table thead th {
  background-color: transparent;
  color: var(--vpusty-ink);
}

/* Приглушений текст (підписи, заголовки колонок, пагінація): контраст
   вищий за стандартний Tabler, але лишається м'якшим за основний. */
.text-secondary,
.text-muted,
.table thead th,
.pagination .page-link:not(.active) {
  color: color-mix(in srgb, var(--vpusty-ink) 80%, transparent) !important;
}

.btn-primary {
  --tblr-btn-bg: var(--vpusty-brand);
  --tblr-btn-color: var(--vpusty-on-brand);
  --tblr-btn-border-color: var(--vpusty-brand);
  background-color: var(--vpusty-brand);
  border-color: var(--vpusty-brand);
  color: var(--vpusty-on-brand);
}

.btn-primary:hover {
  background-color: var(--vpusty-brand-hover);
  border-color: var(--vpusty-brand-hover);
  color: var(--vpusty-on-brand);
}

a:focus-visible {
  outline: 3px solid var(--vpusty-brand);
  outline-offset: 2px;
}

/* Логін: синє тло, логотип над карткою (він білий і на білій картці
   був би невидимий). */
.vpusty-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--vpusty-brand-dark);
}

.vpusty-login .vpusty-login-logo {
  margin-bottom: 1.5rem;
}

.vpusty-login .card {
  background-color: var(--vpusty-surface);
  color: var(--vpusty-ink);
  width: 100%;
  max-width: 28rem;
}

.vpusty-login .card .card-title,
.vpusty-login .card .form-label {
  color: inherit;
}

/* Перемикач теми (створюється vpusty-theme-toggle.js). */
.vpusty-theme-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--vpusty-brand);
  border-radius: 50%;
  background-color: var(--vpusty-surface);
  color: var(--vpusty-brand);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.vpusty-theme-toggle:hover {
  background-color: var(--vpusty-bg);
}

.vpusty-theme-toggle:focus-visible {
  outline: 3px solid var(--vpusty-brand);
  outline-offset: 2px;
}