/* ==========================================================================
   SEOvirt — плоская (flat) компактная тема поверх Bootstrap 5.
   Цвета — оригинальная фирменная гамма проекта (бирюза #0EBED5).
   ========================================================================== */

:root {
  --sv-primary: #0EBED5;      /* оригинальный фирменный бирюзовый */
  --sv-primary-dark: #0AB1C0; /* оригинальный hover-оттенок */
  --sv-primary-light: #E5F9FB;
  --sv-ink: #212529;          /* основной текст (bootstrap default) */
  --sv-muted: #6c757d;
  --sv-border: #dee2e6;
  --sv-bg: #f4f5f7;
  --sv-surface: #ffffff;
  --sv-surface-alt: #fafbfc;
  --sv-warning: #b7791f;
  --sv-danger: #c0392b;
  --sv-radius: .3rem;
  --sv-navbar-bg: #222222;
  --sv-input-bg: #ffffff;
  --sv-shadow: rgba(16,24,40,.08);

  --bs-primary: var(--sv-primary);
  --bs-primary-rgb: 14, 190, 213;
  --bs-link-color: var(--sv-primary);
  --bs-link-hover-color: var(--sv-primary-dark);
  --bs-border-radius: var(--sv-radius);
  --bs-border-radius-sm: .25rem;
  --bs-border-radius-lg: .4rem;
  --bs-body-color: var(--sv-ink);
  --bs-body-bg: var(--sv-bg);
  --bs-border-color: var(--sv-border);
  --bs-border-color-translucent: var(--sv-border);
  --bs-secondary-bg: var(--sv-surface-alt);
  --bs-tertiary-bg: var(--sv-surface-alt);
  --bs-emphasis-color: var(--sv-ink);
  --bs-secondary-color: var(--sv-muted);
}

/*
 * Тёмная тема — только по явному выбору пользователя (переключатель в
 * навбаре, хранится в localStorage). Светлая тема — всегда по умолчанию,
 * даже если в системе/браузере включена тёмная (специально по просьбе
 * заказчика — НЕ реагируем на prefers-color-scheme).
 * Все цвета заданы через собственные CSS-переменные (--sv-*), которыми
 * также переопределены нужные переменные Bootstrap 5, поэтому стандартные
 * компоненты (карточки, модалки, поля форм, list-group, аккордеон)
 * переключаются вместе с темой без "залипших" светлых блоков.
 */
:root[data-theme="dark"] {
  --sv-ink: #d7dadf;
  --sv-muted: #9aa1ab;
  --sv-border: #34383f;
  --sv-bg: #1b1e22;
  --sv-surface: #24272c;
  --sv-surface-alt: #2b2f35;
  --sv-primary: #2fd0e6;
  --sv-primary-dark: #55dcee;
  --sv-primary-light: #22343a;
  --sv-navbar-bg: #17191c;
  --sv-input-bg: #24272c;
  --sv-shadow: rgba(0,0,0,.35);
}

html { min-height: 100%; }
body {
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  background-color: var(--sv-bg);
  color: var(--sv-ink);
  font-size: .875rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--sv-primary); }
a:hover { color: var(--sv-primary-dark); }

/* ---------- Layout: компактные отступы ---------- */
.container, .container-fluid { max-width: 1320px; }
.container-fluid.mt-4 { margin-top: 1rem !important; padding-top: .5rem; }
main, .container-fluid.mt-4 { flex: 1 0 auto; }

/* ---------- Sticky footer: всегда прижат к низу окна ---------- */
footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* ---------- Navbar: явный тёмный фон (раньше был прозрачным) ---------- */
.navbar {
  padding-top: .35rem;
  padding-bottom: .35rem;
  box-shadow: none;
  background-color: var(--sv-navbar-bg) !important;
}
.theme-toggle-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: var(--bs-border-radius-sm);
  font-size: .8125rem;
  padding: .25rem .55rem;
  line-height: 1;
}
.theme-toggle-btn:hover { border-color: #fff; color: #fff; }
.navbar .navbar-brand { font-weight: 600; letter-spacing: .01em; font-size: 1rem; }
.navbar-nav .nav-link {
  padding-top: .3rem;
  padding-bottom: .3rem;
  padding-left: .6rem;
  padding-right: .6rem;
  font-size: .8125rem;
}
.logo-top { max-height: 30px; }
.logo-main { max-height: 30px; }

/* ---------- Cards: плоские, компактные ---------- */
.card {
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  box-shadow: none;
  margin-bottom: .75rem;
}
.card-header {
  background-color: var(--sv-surface);
  border-bottom: 1px solid var(--sv-border);
  padding: .5rem .85rem;
  font-weight: 600;
}
.card-header h4, .card-header h5 { margin-bottom: 0; font-size: .95rem; }
.card-body { padding: .75rem .85rem; }
.card.news-item { height: 100%; }

/* ---------- Buttons: плоские, компактные ---------- */
.btn {
  border-radius: var(--bs-border-radius-sm);
  font-size: .8125rem;
  padding: .3rem .65rem;
  box-shadow: none !important;
  font-weight: 500;
}
.btn-sm { padding: .2rem .45rem; font-size: .75rem; }
.btn-primary {
  --bs-btn-bg: var(--sv-primary);
  --bs-btn-border-color: var(--sv-primary);
  --bs-btn-hover-bg: var(--sv-primary-dark);
  --bs-btn-hover-border-color: var(--sv-primary-dark);
  --bs-btn-active-bg: var(--sv-primary-dark);
  --bs-btn-active-border-color: var(--sv-primary-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--sv-primary);
  --bs-btn-border-color: var(--sv-primary);
  --bs-btn-hover-bg: var(--sv-primary);
  --bs-btn-hover-border-color: var(--sv-primary);
  --bs-btn-active-bg: var(--sv-primary);
  --bs-btn-active-border-color: var(--sv-primary);
}
.btn-link { text-decoration: none; color: var(--sv-primary); }
.btn-link:hover { color: var(--sv-primary-dark); }
.btn-black-link { color: var(--sv-ink); text-decoration: none; }
.btn-black-link:hover { color: var(--sv-primary); }

/* ---------- Forms: компактные ---------- */
.form-label, label { font-size: .75rem; font-weight: 600; color: var(--sv-muted); margin-bottom: .2rem; }
.form-control, .form-select {
  border-radius: var(--bs-border-radius-sm);
  border-color: var(--sv-border);
  background-color: var(--sv-input-bg);
  color: var(--sv-ink);
  font-size: .8125rem;
  padding: .3rem .55rem;
}
.form-control:disabled, .form-select:disabled { background-color: var(--sv-surface-alt); }
.input-group-text {
  background-color: var(--sv-surface-alt);
  border-color: var(--sv-border);
  color: var(--sv-muted);
}
.form-control:focus, .form-select:focus {
  border-color: var(--sv-primary);
  box-shadow: 0 0 0 .15rem rgba(14,190,213,.2);
}
textarea.form-control { font-size: .8125rem; }
.mb-3 > label { display: block; }
.mb-3 { margin-bottom: .65rem !important; }
.form-check-input:checked { background-color: var(--sv-primary); border-color: var(--sv-primary); }
.form-check-input:focus { border-color: var(--sv-primary); box-shadow: 0 0 0 .15rem rgba(14,190,213,.2); }
.form-switch .form-check-input { width: 2.4em; }

/* ---------- Tables: компактные (аналог table-sm) ---------- */
.table { font-size: .8125rem; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .35rem .5rem; }
.table thead th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--sv-muted);
  border-bottom-width: 1px;
  background-color: var(--sv-surface-alt);
  white-space: nowrap;
}

/* ---------- Badges: компактные ---------- */
.badge { font-weight: 600; font-size: .7rem; padding: .3em .5em; }

/* ---------- Alerts / уведомления ---------- */
.system-notifications {
  position: fixed;
  top: 64px;
  right: 14px;
  z-index: 1080;
  width: 320px;
  max-width: calc(100vw - 28px);
}
.alert {
  border: 1px solid transparent;
  border-radius: var(--sv-radius);
  box-shadow: 0 1px 3px var(--sv-shadow);
  font-size: .8125rem;
  padding: .55rem .85rem;
}

/* ---------- Modals: компактные ---------- */
.modal-content { border-radius: var(--sv-radius); border: 1px solid var(--sv-border); }
.modal-header, .modal-footer { padding: .6rem .85rem; border-color: var(--sv-border); }
.modal-body { padding: .85rem; }
.modal-title { font-size: 1rem; }
/* В тёмной теме крестик закрытия (тёмная SVG-иконка) инвертируем, иначе
   он сливается с тёмным фоном модалки/алертов. */
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.8); }

/* ---------- Accordion (FAQ) ---------- */
.accordion-button { font-size: .8125rem; font-weight: 600; box-shadow: none; padding: .55rem .85rem; }
.accordion-body { padding: .65rem .85rem; font-size: .8125rem; }
.accordion-button:not(.collapsed) { color: var(--sv-primary-dark); background-color: var(--sv-primary-light); }
.accordion-button:focus { box-shadow: none; border-color: var(--sv-border); }

/* ---------- Чат ---------- */
.chat-thread {
  max-height: 380px;
  overflow-y: auto;
  padding: .6rem;
  background: var(--sv-surface-alt);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
}
.chat-bubble {
  max-width: 78%;
  padding: .4rem .65rem;
  border-radius: .5rem;
  margin-bottom: .5rem;
  font-size: .8125rem;
  position: relative;
  word-break: break-word;
}
.chat-bubble-client {
  background: var(--sv-surface);
  border: 1px solid var(--sv-border);
  margin-right: auto;
  border-bottom-left-radius: .15rem;
}
.chat-bubble-admin {
  background: var(--sv-primary-light);
  border: 1px solid var(--sv-primary-light);
  margin-left: auto;
  border-bottom-right-radius: .15rem;
}
.chat-bubble .chat-meta {
  display: block;
  font-size: .68rem;
  color: var(--sv-muted);
  margin-top: .2rem;
}
.chat-bubble .chat-edit-form { display: none; margin-top: .35rem; }
.chat-bubble.editing .chat-edit-form { display: block; }
.chat-bubble.editing .chat-text { display: none; }
.chat-empty { color: var(--sv-muted); font-size: .8125rem; text-align: center; padding: .85rem 0; }

/* ---------- Dashboard metric cards ---------- */
.metric-card {
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  background: var(--sv-surface);
  padding: .6rem .85rem;
}
.metric-card .metric-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.metric-card .metric-label { font-size: .68rem; color: var(--sv-muted); text-transform: uppercase; letter-spacing: .03em; }
.metric-card.metric-warn .metric-value { color: var(--sv-warning); }
.metric-card.metric-danger .metric-value { color: var(--sv-danger); }

/* ---------- Опции подключения (CRM / AI Bot) ---------- */
.feature-badge { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; gap: .1rem; }
.feature-badge .feature-date { font-size: .68rem; color: var(--sv-muted); }
.feature-badge .feature-date.text-danger,
.feature-badge .feature-date.text-warning { font-weight: 600; }
.feature-toggle-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.feature-toggle-row .form-switch { margin-bottom: 0; }
.feature-toggle-row .feature-until { flex: 1 1 auto; max-width: 190px; }

/* ---------- Вкладки разделов (nav-tabs) ---------- */
.nav-tabs {
  border-bottom-color: var(--sv-border);
}
.nav-tabs .nav-link {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--sv-muted);
  padding: .5rem .85rem;
  border: 1px solid transparent;
  border-top-left-radius: var(--bs-border-radius-sm);
  border-top-right-radius: var(--bs-border-radius-sm);
}
.nav-tabs .nav-link:hover { color: var(--sv-primary-dark); border-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--sv-primary-dark);
  background-color: var(--sv-surface);
  border-color: var(--sv-border) var(--sv-border) var(--sv-surface);
}
.tab-content > .tab-pane .card:first-child { margin-top: 0; }

/* ---------- Перетаскивание вкладок мышкой (админ-панель) ---------- */
.nav-tabs.sortable-tabs .nav-item { cursor: grab; }
.nav-tabs.sortable-tabs .nav-item.dragging { opacity: .4; }
.nav-tabs.sortable-tabs .nav-item.drag-over { border-left: 2px solid var(--sv-primary); }

/* ---------- FAQ: список вопросов с кнопками порядка вверх/вниз ---------- */
.faq-item { border-color: var(--sv-border); transition: box-shadow .15s ease; }
.faq-order-controls { min-width: 2.25rem; }
.faq-order-controls .btn { line-height: 1; padding: .25rem .5rem; }
.faq-order-controls .btn:disabled { opacity: .3; }
.faq-item .faq-view h6 { font-weight: 600; }

/* ---------- Прочее ---------- */
.list-group-item { border-color: var(--sv-border); font-size: .8125rem; padding: .5rem .75rem; }
hr { border-color: var(--sv-border); margin: .6rem 0; }
.text-muted { color: var(--sv-muted) !important; }

footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer.pt-4 { padding-top: 1.25rem !important; }

/* Скрыть иконки-разделители, оставшиеся от старого меню (fa-hyphen) */
.fa-hyphen { display: none; }

/* Плотнее сетка форм */
.row.g-2 > * { padding-top: .15rem; padding-bottom: .15rem; }
.row.g-3 > * { padding-bottom: .1rem; }

/* ---------- Компактная форма (карточка клиента и т.п.) ---------- */
.compact-form .row.g-2 > [class*="col-"] { margin-bottom: .35rem; }
.compact-form label { margin-bottom: .15rem; }

@media (max-width: 768px) {
  .system-notifications { top: 8px; right: 6px; left: 6px; width: auto; }
  .card-body { padding: .65rem; }
}