/* ============================================================
   SmartAssistant Lab — Dark Theme v2
   body.body--dark → Quasar native dark mode
   ============================================================ */

/* ── CSS переменные ── */
body.body--dark {
  --q-primary: #60a5fa;
  --q-secondary: #34d399;
  --q-accent: #fcd34d;
  --q-dark: #111;
  --q-dark-page: #000;
  --q-positive: #4ade80;
  --q-negative: #f87171;
  --q-info: #38bdf8;
  --q-warning: #fbbf24;
}

/* ── Базовый фон ── */
body.body--dark,
body.body--dark .q-page,
body.body--dark .q-page-container,
body.body--dark .q-layout {
  background: #0a0a0a !important;
  color: #d1d5db !important;
}

/* ── Layout header / toolbar ── */
body.body--dark .q-header,
body.body--dark .q-toolbar {
  background: #111 !important;
  border-bottom: 1px solid #1f1f1f !important;
  color: #e5e7eb !important;
}

body.body--dark .q-toolbar__title,
body.body--dark .q-header * {
  color: #e5e7eb !important;
}

/* ── Tabs полоска (вверху) ── */
body.body--dark .q-tabs,
body.body--dark .q-tab-panels,
body.body--dark .q-tab-panel {
  background: #0a0a0a !important;
}

body.body--dark .q-tabs__content {
  background: #111 !important;
  border-bottom: 1px solid #1f1f1f !important;
}

body.body--dark .q-tab {
  color: #6b7280 !important;
}

body.body--dark .q-tab--active {
  color: #60a5fa !important;
}

body.body--dark .q-tab__indicator {
  background: #60a5fa !important;
}

/* ── Drawer / Sidebar ── */
body.body--dark .q-drawer,
body.body--dark .q-drawer__content {
  background: #0d0d0d !important;
  border-right: 1px solid #1a1a1a !important;
}

/* ── Cards ── */
body.body--dark .q-card,
body.body--dark .q-card__section,
body.body--dark .q-table__card {
  background: #111 !important;
  color: #d1d5db !important;
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6) !important;
}

/* ── Banner / Notification strips ── */
body.body--dark .q-banner,
body.body--dark .q-banner__content {
  background: #161616 !important;
  color: #9ca3af !important;
  border-bottom: 1px solid #1f1f1f !important;
}

/* ── Menus / Popups ── */
body.body--dark .q-menu,
body.body--dark .q-select__dialog {
  background: #161616 !important;
  border: 1px solid #282828 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.85) !important;
  color: #d1d5db !important;
}

/* ── Items / Lists ── */
body.body--dark .q-item {
  color: #c4cdd8 !important;
}

body.body--dark .q-item__label--caption,
body.body--dark .q-item__label--overline {
  color: #4b5563 !important;
}

body.body--dark .q-item.q-router-link--active,
body.body--dark .q-item--active {
  background: rgba(96,165,250,0.1) !important;
  color: #60a5fa !important;
}

body.body--dark .q-item:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* ── Separators ── */
body.body--dark .q-separator,
body.body--dark hr {
  background: #1f1f1f !important;
  border-color: #1f1f1f !important;
}

/* ── Таблицы ── */
body.body--dark .q-table,
body.body--dark .q-markup-table {
  background: #0a0a0a !important;
  color: #d1d5db !important;
}

body.body--dark .q-table thead th,
body.body--dark .q-table__top,
body.body--dark .q-table__bottom,
body.body--dark .q-table__middle thead tr {
  background: #0d0d0d !important;
  color: #6b7280 !important;
  border-bottom: 1px solid #1f1f1f !important;
}

body.body--dark .q-table tbody tr {
  border-bottom: 1px solid #141414 !important;
}

body.body--dark .q-table tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
}

body.body--dark .q-table tbody td {
  border-color: #141414 !important;
  color: #c9d1db !important;
}

/* ── Строки клиентов / контент-строки ── */
body.body--dark .q-virtual-scroll__content > div,
body.body--dark .q-virtual-scroll__padding {
  background: transparent !important;
}

/* ── Fields / Inputs ── */
body.body--dark .q-field__native,
body.body--dark .q-field__input,
body.body--dark .q-field__label,
body.body--dark .q-field__marginal,
body.body--dark .q-field__prefix,
body.body--dark .q-field__suffix {
  color: #e5e7eb !important;
}

body.body--dark .q-field__control {
  background: #0d0d0d !important;
}

body.body--dark .q-field--outlined .q-field__control:before {
  border-color: #2a2a2a !important;
}

body.body--dark .q-field--outlined.q-field--focused .q-field__control:after {
  border-color: #60a5fa !important;
}

body.body--dark .q-field__bottom {
  color: #4b5563 !important;
}

/* ── Search bar ── */
body.body--dark .q-field--filled .q-field__control,
body.body--dark .q-field--filled .q-field__control:before {
  background: #111 !important;
}

/* ── Chip / badge ── */
body.body--dark .q-chip {
  background: #1c1c1c !important;
  color: #d1d5db !important;
  border: 1px solid #2a2a2a !important;
}

/* ── Badge (notification dot) ── */
body.body--dark .q-badge {
  background: #3b82f6 !important;
  color: #fff !important;
}

/* ── Buttons ── */
body.body--dark .q-btn.q-btn--flat,
body.body--dark .q-btn.q-btn--outline {
  color: #9ca3af !important;
}

body.body--dark .q-btn.q-btn--flat:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* ── Steppers ── */
body.body--dark .q-stepper {
  background: #111 !important;
}

/* ── Dialog ── */
body.body--dark .q-dialog__inner > .q-card {
  background: #161616 !important;
}

/* ── Inner loading ── */
body.body--dark .q-inner-loading {
  background: rgba(0,0,0,0.7) !important;
}

/* ── Carousel ── */
body.body--dark .q-carousel {
  background: #111 !important;
}

/* ── Date/time pickers ── */
body.body--dark .q-date,
body.body--dark .q-time {
  background: #161616 !important;
  color: #d1d5db !important;
}

/* ── Slide item ── */
body.body--dark .q-slide-item {
  background: #111 !important;
}

/* ── Expansion item ── */
body.body--dark .q-expansion-item__content {
  background: #0d0d0d !important;
}

/* ── Любые div/span с белым фоном в приложении ── */
body.body--dark [style*="background: white"],
body.body--dark [style*="background:#fff"],
body.body--dark [style*="background-color: white"],
body.body--dark [style*="background-color:#fff"],
body.body--dark [style*="background-color: rgb(255, 255, 255)"] {
  background-color: #111 !important;
}

body.body--dark [style*="color: black"],
body.body--dark [style*="color:#000"],
body.body--dark [style*="color: rgb(0, 0, 0)"] {
  color: #d1d5db !important;
}

/* ════════════════════════════════════
   ИКОНКИ — SVG через background-image → invert
   ════════════════════════════════════ */

body.body--dark [class*="icon--"],
body.body--dark [class*="icon__"] {
  filter: invert(1) brightness(0.8) !important;
  transition: filter 0.2s ease !important;
}

/* Material / Quasar q-icon */
body.body--dark .q-icon {
  color: #6b7280 !important;
}

body.body--dark .q-item.q-router-link--active .q-icon,
body.body--dark .q-item--active .q-icon {
  color: #60a5fa !important;
}

/* ════════════════════════════════════
   Фото-плейсхолдеры и аватары
   ════════════════════════════════════ */
body.body--dark img[src=""],
body.body--dark img:not([src]),
body.body--dark .q-avatar__content,
body.body--dark .no-photo {
  background: #1c1c1c !important;
  color: #4b5563 !important;
}

/* ════════════════════════════════════
   Текст и типографика
   ════════════════════════════════════ */
body.body--dark p,
body.body--dark span:not(.q-badge *),
body.body--dark div,
body.body--dark td,
body.body--dark th,
body.body--dark li {
  color: inherit;
}

body.body--dark .text-grey-7,
body.body--dark .text-grey-8,
body.body--dark .text-grey-9 {
  color: #6b7280 !important;
}

/* ── Скроллбар ── */
body.body--dark ::-webkit-scrollbar {
  width: 5px; height: 5px;
}
body.body--dark ::-webkit-scrollbar-track { background: #000; }
body.body--dark ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
body.body--dark ::-webkit-scrollbar-thumb:hover { background: #444; }

/* ════════════════════════════════════
   Плавные переходы
   ════════════════════════════════════ */
*, *::before, *::after {
  transition-property: background-color, color, border-color, filter, box-shadow;
  transition-duration: 0.18s;
  transition-timing-function: ease;
}

/* Исключаем transition для анимированных элементов */
.q-transition--fade-enter-active,
.q-transition--fade-leave-active,
.q-linear-progress__model {
  transition: none !important;
}

/* ════════════════════════════════════
   Кнопка темы в сайдбаре
   ════════════════════════════════════ */
#sa-theme-toggle-wrap { flex-shrink: 0; }

#sa-theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  width: 100%;
  border: none;
  border-top: 1px solid #e5e7eb;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: #9ca3af;
  text-align: left;
}

#sa-theme-toggle-btn:hover {
  background: rgba(0,0,0,0.06);
  color: #374151;
}

body.body--dark #sa-theme-toggle-btn {
  color: #4b5563;
  border-top: 1px solid #1a1a1a;
}

body.body--dark #sa-theme-toggle-btn:hover {
  background: rgba(255,255,255,0.04);
  color: #9ca3af;
}

#sa-theme-toggle-btn .sa-toggle-icon { font-size: 15px; flex-shrink: 0; }
#sa-theme-toggle-btn .sa-toggle-label { font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; }

/* ═══════════════════════════════════════════════════
   PATCH v3 — белые полосы: табы и Clients count
   ═══════════════════════════════════════════════════ */

/* Полностью перекрываем ВСЕ дочерние элементы внутри .q-tabs */
body.body--dark .q-tabs,
body.body--dark .q-tabs *,
body.body--dark .q-tabs__content,
body.body--dark .q-tabs__content * {
  background-color: #111111 !important;
  color: #9ca3af !important;
}

body.body--dark .q-tab--active,
body.body--dark .q-tab--active * {
  color: #60a5fa !important;
}

body.body--dark .q-tab__indicator {
  background: #60a5fa !important;
}

/* Белая полоса под табами (border-bottom вместо фона) */
body.body--dark .q-tabs__arrow {
  background: #111111 !important;
  color: #6b7280 !important;
}

/* q-separator между табами и контентом */
body.body--dark .q-separator {
  background: #1f1f1f !important;
}

/* ── "Clients count: X" баннер ── */
/* Quasar q-banner + любой кастомный контейнер-полоска */
body.body--dark .q-banner,
body.body--dark .q-banner *,
body.body--dark [class*="count"],
body.body--dark [class*="clients-count"],
body.body--dark [class*="client_count"],
body.body--dark [class*="info-bar"],
body.body--dark [class*="infobar"],
body.body--dark [class*="stat-bar"],
body.body--dark [class*="list-header"] {
  background: #111111 !important;
  background-color: #111111 !important;
  color: #9ca3af !important;
  border-color: #1f1f1f !important;
}

/* Catch-all: любой div с белым фоном прямо внутри q-page-container */
body.body--dark .q-page-container > div,
body.body--dark .q-page > div {
  background-color: inherit !important;
}

/* Белые "строчки" — элементы с явным background: #fff или white в атрибутах */
body.body--dark [style*="background: #fff"],
body.body--dark [style*="background:#fff"],
body.body--dark [style*="background: white"],
body.body--dark [style*="background-color: white"],
body.body--dark [style*="background-color:#fff"],
body.body--dark [style*="background-color: #fff"] {
  background: #111111 !important;
  background-color: #111111 !important;
}

/* q-splitter и q-tab-panels — контейнер под табами */
body.body--dark .q-splitter,
body.body--dark .q-splitter__panel,
body.body--dark .q-tab-panels,
body.body--dark .q-tab-panel {
  background: #0a0a0a !important;
}