/* ========== RESET + ROOT ========== */


*,
*::before,
*::after {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;
}


html {
  font-size: 18px;
}


/* ========== ЦВЕТОВЫЕ ПЕРЕМЕННЫЕ (ТЕМНАЯ ТЕМА - DEFAULT) ========== */
:root {
  color-scheme: dark light;


  /* Основные фоны */
  --bg-main: #040e1c;
  --bg-contacts: #121519;
  --bg-card: #111827;
  --bg-card-alt: #0b101a;


  /* Текст — мягкий off-white вместо чистого #fff */
  --text-main: #e8ecf4;
  --text-muted: rgba(232, 236, 244, 0.72);
  --text-muted-strong: rgba(232, 236, 244, 0.9);


  /* Заголовок */
  --header-bg: rgba(4, 14, 28, 0.7);
  --header-bg-mobile: rgba(4, 14, 28, 0.85);


  /* Кнопки и акценты */
  --btn-bg: #ffffff;
  --btn-text: #040e1c;
  --btn-bg-hover: #ffbb7a;
  --btn-text-hover: #040e1c;


  /* Линии и тени */
  --accent-line: #a63218;
  --accent-line-soft: rgba(166, 50, 24, 0);
  --border-soft: 1px solid #2a3550;
  --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.5);
}


/* ========== СВЕТЛАЯ ТЕМА (на основе логотипа) ========== */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;


    /* Основные фоны */
    --bg-main: #ffffff;
    --bg-contacts: #ffffff;
    --bg-card: #f8fafc;
    --bg-card-alt: #eef2f7;


    /* Текст */
    --text-main: #0a1628;
    --text-muted: #475569;
    --text-muted-strong: #1e293b;


    /* Заголовок */
    --header-bg: rgba(248, 250, 252, 0.95);
    --header-bg-mobile: rgba(248, 250, 252, 0.98);


    /* Кнопки и акценты */
    --btn-bg: #0066cc;
    --btn-text: #ffffff;
    --btn-bg-hover: #0052a3;
    --btn-text-hover: #ffffff;


    /* Линии и тени */
    --accent-line: #0066cc;
    --accent-line-soft: rgba(0, 102, 204, 0);
    --border-soft: 1px solid #cbd5e1;
    --shadow-card: 0 4px 12px rgba(15, 23, 42, 0.08);
  }
}


/* Ручное переключение с data-color-scheme */
/* ВАЖНО: значения должны совпадать с :root default — чтобы режимы
   «Системная (dark OS)» и «Тёмная» выглядели идентично. */
[data-color-scheme="dark"] {
  color-scheme: dark;


  --bg-main: #040e1c;
  --bg-contacts: #121519;
  --bg-card: #111827;
  --bg-card-alt: #0b101a;


  --text-main: #e8ecf4;
  --text-muted: rgba(232, 236, 244, 0.72);
  --text-muted-strong: rgba(232, 236, 244, 0.9);


  --header-bg: rgba(4, 14, 28, 0.7);
  --header-bg-mobile: rgba(4, 14, 28, 0.85);


  --btn-bg: #ffffff;
  --btn-text: #040e1c;
  --btn-bg-hover: #ffbb7a;
  --btn-text-hover: #040e1c;


  --accent-line: #a63218;
  --accent-line-soft: rgba(166, 50, 24, 0);
  --border-soft: 1px solid #2a3550;
  --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.5);
}


[data-color-scheme="light"] {
  color-scheme: light;


  --bg-main: #ffffff;
  --bg-contacts: #ffffff;
  --bg-card: #f8fafc;
  --bg-card-alt: #eef2f7;


  --text-main: #0a1628;
  --text-muted: #475569;
  --text-muted-strong: #1e293b;


  --header-bg: rgba(248, 250, 252, 0.95);
  --header-bg-mobile: rgba(248, 250, 252, 0.98);


  --btn-bg: #0066cc;
  --btn-text: #ffffff;
  --btn-bg-hover: #0052a3;
  --btn-text-hover: #ffffff;


  --accent-line: #0066cc;
  --accent-line-soft: rgba(0, 102, 204, 0);
  --border-soft: 1px solid #cbd5e1;
  --shadow-card: 0 4px 12px rgba(15, 23, 42, 0.08);
}


body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  font-size: 1rem;
}


.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}


/* ========== ХЕДЕР ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--header-bg);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}


.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  width: 100%;
  max-width: none;
  margin: 0;
}


.main-nav {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  gap: 40px;
}


.main-nav__group {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.9rem;
}


.main-nav__group--left {
  flex: 1 1 0;
  justify-content: flex-start;
}


.main-nav__group--right {
  flex: 1 1 0;
  justify-content: flex-end;
}


.main-nav a {
  text-decoration: none;
  color: var(--text-main);
  opacity: 0.8;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}


.main-nav a:hover {
  opacity: 1;
}


.logo {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}


/* ========== ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ========== */
.theme-switcher {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

[data-color-scheme="light"] .theme-switcher,
:root:not([data-color-scheme]) .theme-switcher {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 102, 204, 0.2);
}

@media (prefers-color-scheme: light) {
  :root:not([data-color-scheme="dark"]) .theme-switcher {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 102, 204, 0.2);
  }
}

.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.theme-btn:hover {
  opacity: 0.8;
}

.theme-btn.active {
  background: var(--btn-bg);
  color: var(--btn-text);
  opacity: 1;
}

.theme-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* В мобильном меню */
.mobile-theme {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mobile-theme__label {
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin-right: 4px;
}

.mobile-theme .theme-switcher {
  display: flex;
}

/* Языковой переключатель */
.lang-switcher {
  position: relative;
  font-size: 0.85rem;
}


.lang-switcher__current {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
}

[data-color-scheme="light"] .lang-switcher__current {
  border-color: rgba(0, 102, 204, 0.3);
}


.lang-switcher__dropdown {
  position: absolute;
  left: -8px;
  top: calc(100% + 13px);
  background-color: var(--header-bg-mobile);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 65px;
}


@media (prefers-color-scheme: light) {
  .lang-switcher__dropdown {
    border-color: rgba(0, 102, 204, 0.2);
  }
}

[data-color-scheme="light"] .lang-switcher__dropdown {
  border-color: rgba(0, 102, 204, 0.2);
}


.lang-switcher__dropdown button {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
  font-size: 0.85rem;
}


.lang-switcher__dropdown button:hover {
  background-color: rgba(255, 255, 255, 0.08);
}


@media (prefers-color-scheme: light) {
  .lang-switcher__dropdown button:hover {
    background-color: rgba(0, 102, 204, 0.1);
  }
}


.lang-switcher.is-open .lang-switcher__dropdown {
  display: flex;
}


/* Бургер-меню */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  margin-left: 16px;
}


.burger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--text-main);
  transition: transform 0.2s ease, opacity 0.2s ease;
}


.site-header.is-open .burger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}


.site-header.is-open .burger span:nth-child(2) {
  opacity: 0;
}


.site-header.is-open .burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


.mobile-nav {
  display: none;
}


.mobile-lang {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}


.mobile-lang button {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--text-main);
  font-size: 0.85rem;
  cursor: pointer;
}


.mobile-lang button:hover {
  background-color: rgba(255, 255, 255, 0.08);
}


@media (prefers-color-scheme: light) {
  .mobile-lang button {
    border-color: rgba(0, 102, 204, 0.2);
  }


  .mobile-lang button:hover {
    background-color: rgba(0, 102, 204, 0.1);
  }
}

[data-color-scheme="light"] .mobile-lang button {
  border-color: rgba(0, 102, 204, 0.2);
}

[data-color-scheme="light"] .mobile-lang button:hover {
  background-color: rgba(0, 102, 204, 0.1);
}


/* ========== КНОПКИ ========== */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  background-color: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}


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


.btn:active {
  transform: translateY(1px);
}


.btn--full {
  width: 100%;
}


.btn--ghost {
  background: none;
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.25);
}


.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
}


@media (prefers-color-scheme: light) {
  .btn--ghost {
    border-color: rgba(0, 102, 204, 0.3);
    color: var(--text-main);
  }


  .btn--ghost:hover {
    background-color: rgba(0, 102, 204, 0.06);
    color: #0052a3;
  }
}

[data-color-scheme="light"] .btn--ghost {
  border-color: rgba(0, 102, 204, 0.3);
  color: var(--text-main);
}

[data-color-scheme="light"] .btn--ghost:hover {
  background-color: rgba(0, 102, 204, 0.06);
  color: #0052a3;
}

/* В тёмной теме делаем все .btn приглушённо-прозрачными с рамкой —
   чтобы белые заливки не казались слишком яркими */
@media (prefers-color-scheme: dark) {
  .btn {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.35);
  }
  .btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.55);
  }
}

[data-color-scheme="dark"] .btn {
  background-color: transparent;
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

[data-color-scheme="dark"] .btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.55);
}

/* ========== HERO ========== */
.hero {
  background-color: var(--bg-main);
  padding: 52px 0 0;
}


.hero-top {
  text-align: center;
  padding-bottom: 32px;
}


.hero-title {
  margin: 0 0 12px;
  font-size: 2.1rem;
  font-weight: 700;
}


.hero-subtitle {
  margin: 0;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
  color: var(--text-muted);
}


.hero-image {
  max-width: 1140px;
  margin: 0 auto;
  height: 300px;
  border-radius: 14px;
  background-color: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
  padding: 0;
}


.hero-slider {
  display: flex;
  height: 100%;
  width: 100%;
  transform: translateX(0);
  transition: transform 0.4s ease;
  gap: 10px;
}


.hero-slide {
  flex: 0 0 calc((100% - 20px) / 3);
  height: 100%;
  box-sizing: border-box;
}


.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.hero-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.65);
  color: #ffffff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  z-index: 2;
}


.hero-slider__btn:hover {
  background: rgba(15, 23, 42, 0.9);
}


.hero-slider__btn--prev {
  left: 12px;
}


.hero-slider__btn--next {
  right: 12px;
}


/* ========== СЕКЦИИ ========== */
.section {
  padding: 86px 0;
  background-color: var(--bg-main);
  position: relative;
}


.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1180px;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--accent-line-soft),
    var(--accent-line) 18%,
    var(--accent-line) 82%,
    var(--accent-line-soft)
  );
  opacity: 0.9;
}


.hero::before,
#catalog::before,
.section--contacts::before {
  content: none;
}


.section-header {
  margin-bottom: 48px;
}


.section-header--center {
  text-align: center;
}


.section-title {
  margin: 0 0 18px;
  font-size: 1.7rem;
}


.section-subtitle {
  margin: 0;
  max-width: 700px;
  font-size: 0.95rem;
  color: var(--text-muted);
}


.section-header--center .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}


/* ========== КАТАЛОГ ========== */
#catalog .section-header {
  text-align: center;
  margin: 40px auto 30px;
  max-width: 800px;
}


#catalog .section-header.section-header--center {
  margin-top: 0;
  padding-top: 10px;
}


#catalog .section-header:not(.section-header--center) {
  position: relative;
  padding-top: 30px;
}


#catalog .section-header:not(.section-header--center)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1180px;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--accent-line-soft),
    var(--accent-line) 18%,
    var(--accent-line) 82%,
    var(--accent-line-soft)
  );
  opacity: 0.9;
}


#catalog .section-header + .cards-grid {
  margin-top: 10px;
}


/* ========== КАРТОЧКИ ========== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}


.card {
  border-radius: 16px;
  background-color: var(--bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}


.card-image {
  height: 190px;
  background-color: var(--bg-card-alt);
}


.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.card-body {
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  height: 100%;
}


.card-title {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--text-muted-strong);
}


.card-text {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: var(--text-muted);
  flex-grow: 1;
}


.card-body .btn {
  margin-top: auto;
  align-self: flex-start;
}


/* ========== ПРЕИМУЩЕСТВА ========== */
.benefits-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 46px;
}


.benefit {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}


.benefit-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-muted-strong);
}


@media (prefers-color-scheme: light) {
  .benefit-icon {
    border-color: rgba(0, 102, 204, 0.3);
  }
}

[data-color-scheme="light"] .benefit-icon {
  border-color: rgba(0, 102, 204, 0.3);
}


.benefit-content h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--text-muted-strong);
}


.benefit-content p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}


/* ========== МАКЕТЫ ========== */
.about-layout,
.quote-layout,
.contacts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 46px;
}


.about-left p,
.about-right p {
  font-size: 0.95rem;
  color: var(--text-muted);
}


/* ========== ДОКУМЕНТАЦИЯ ========== */
.docs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.doc-item {
  font-size: 0.95rem;
  color: var(--btn-bg-hover);
  text-decoration: none;
}


/* ========== ФОРМА КП ========== */
.quote-layout {
  align-items: flex-start;
}


.quote-form {
  background-color: var(--bg-card);
  border-radius: 16px;
  padding: 24px 24px 22px;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}


.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}


.form-row label {
  margin-bottom: 5px;
  font-size: 0.9rem;
  color: var(--text-muted-strong);
}


.form-row input,
.form-row textarea {
  padding: 11px 12px;
  border-radius: 10px;
  border: var(--border-soft);
  background-color: var(--btn-text);
  color: var(--text-main);
  font-size: 0.9rem;
  font-family: inherit;
}


@media (prefers-color-scheme: light) {
  .form-row input,
  .form-row textarea {
    background-color: #ffffff;
    color: #111827;
  }
}


.form-row textarea {
  resize: none;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: #ffbb7a;
}


.form-message {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #22c55e;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  white-space: normal;
  display: block;
}


.form-message--error {
  color: #f87171;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow: hidden;
}


/* ========== КОНТАКТЫ ========== */
.section--contacts {
  border-top: 1px solid var(--accent-line);
  background-color: var(--bg-main);
}


.contacts-layout {
  gap: 46px;
}


.contacts-text p {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--text-muted);
}


.contacts-map img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}


/* ========== ПОДВАЛ ========== */
.site-footer {
  background-color: var(--bg-main);
  border-top: 1px solid var(--accent-line);
  padding: 22px 0;
  font-size: 0.8rem;
}


.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:12px;
  opacity: 0.7;
}


/* ========== СТРАНИЦА ТОВАРА ========== */
.breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}


.breadcrumb a {
  color: var(--btn-bg);
  text-decoration: none;
}


@media (prefers-color-scheme: light) {
  .breadcrumb a {
    color: #0066cc;
  }
}


.breadcrumb a:hover {
  opacity: 0.7;
}


.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 30px;
}


.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.product-image-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}


.product-image-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.product-thumbs {
  display: flex;
  gap: 10px;
}


.product-thumb {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
}


.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.product-thumb.active,
.product-thumb:hover {
  border-color: var(--btn-bg);
}


@media (prefers-color-scheme: light) {
  .product-thumb.active,
  .product-thumb:hover {
    border-color: #0066cc;
  }
}


.product-info h1 {
  margin: 0 0 12px;
  font-size: 1.8rem;
}


.product-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: var(--text-muted);
}


@media (prefers-color-scheme: light) {
  .product-meta {
    border-bottom-color: rgba(0, 102, 204, 0.1);
  }
}

[data-color-scheme="light"] .product-meta {
  border-bottom-color: rgba(0, 102, 204, 0.1);
}


.product-category {
  color: var(--btn-bg-hover);
  font-weight: 600;
}


@media (prefers-color-scheme: light) {
  .product-category {
    color: #0066cc;
  }
}


.product-description {
  margin-bottom: 24px;
}


.product-description h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}


.product-description p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}


.product-specs {
  margin-bottom: 28px;
}


.product-specs h3 {
  margin: 0 0 14px;
  font-size: 1.1rem;
}


.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}


.specs-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


@media (prefers-color-scheme: light) {
  .specs-table tr {
    border-bottom-color: rgba(0, 102, 204, 0.1);
  }
}

[data-color-scheme="light"] .specs-table tr {
  border-bottom-color: rgba(0, 102, 204, 0.1);
}


.specs-table tr:last-child {
  border-bottom: none;
}


.specs-table td {
  padding: 12px 0;
}


.spec-label {
  font-weight: 600;
  color: var(--btn-bg);
  width: 40%;
}


@media (prefers-color-scheme: light) {
  .spec-label {
    color: #0066cc;
  }
}


.specs-table td:last-child {
  color: var(--text-muted);
  text-align: right;
}


.product-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}


.product-actions .btn {
  width: 100%;
}


.product-info-box {
  background-color: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
}


@media (prefers-color-scheme: light) {
  .product-info-box {
    border-color: rgba(0, 102, 204, 0.1);
  }
}

[data-color-scheme="light"] .product-info-box {
  border-color: rgba(0, 102, 204, 0.1);
}


.product-info-box h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}


.product-info-box p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}


/* ========== АДАПТИВ ========== */
@media (max-width: 992px) {
  .about-layout,
  .quote-layout,
  .contacts-layout {
    grid-template-columns: 1fr;
  }


  .benefits-list {
    grid-template-columns: 1fr;
  }


  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }


  .product-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 768px) {
  .site-header {
    z-index: 40;
  }


  .header-inner {
    justify-content: flex-start;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
  }


  .logo {
    margin: 0 auto;
    font-size: 0.9rem;
  }


  .main-nav {
    display: none;
  }


  .burger {
    display: flex;
    margin-left: auto;
  }


  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 53px;
    padding: 16px 32px 18px;
    background-color: var(--header-bg-mobile);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 30;
  }


  .mobile-nav a {
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.95rem;
    opacity: 0.9;
  }


  .site-header.is-open .mobile-nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }


  .section {
    padding: 60px 0;
  }


  .cards-grid {
    grid-template-columns: 1fr;
  }


  .hero-image {
    height: 230px;
  }


  .hero-slide {
    flex: 0 0 100%;
  }


  .hero-title {
    font-size: 1.8rem;
  }


  .section-title {
    font-size: 1.45rem;
  }


  .hero-subtitle {
    font-size: 0.9rem;
  }


  .product-grid {
    gap: 20px;
  }
}


@media (max-width: 480px) {
  .header-inner {
    padding: 10px 12px;
  }


  .container {
    padding: 0 12px;
  }


  .cards-grid {
    gap: 16px;
  }


  .hero-image {
    height: 180px;
    border-radius: 8px;
  }


  .product-thumbs {
    gap: 6px;
  }


  .product-thumb {
    width: 60px;
    height: 60px;
  }
}


/* ===== SERIES TABLE (серии): "Значение" справа + цветная линия под шапкой (как на скрине) ===== */
.series-table {
  width: 100%;
  border-collapse: collapse;
}

/* Отступы */
.series-table th,
.series-table td {
  padding: 12px 0;
}

/* Выравнивание колонок */
.series-table th.series-th-left,
.series-table td.series-td-left {
  text-align: left;
}

.series-table th.series-th-right,
.series-table td.series-td-right {
  text-align: right;
}

/* Разделители строк */
.series-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.series-table tbody tr:last-child {
  border-bottom: none;
}

/* Цветная линия под верхней строкой "Параметр / Значение" */
.series-table thead {
  position: relative;
}

/* на всякий случай убираем border у tr заголовка, чтобы не было двойной линии */
.series-table thead tr {
  border-bottom: none !important;
}

/* Рисуем полоску на всю ширину */
.series-table thead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent-line);
  opacity: 1;
}

/* В светлой теме — такие же разделители строк */
@media (prefers-color-scheme: light) {
  .series-table tbody tr {
    border-bottom-color: rgba(0, 102, 204, 0.1);
  }
}
/* Series buttons: active state uses theme variables */
.series-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.series-btn.is-active {
  background-color: var(--btn-bg);
  color: var(--btn-text);/* ===== Series buttons (theme-safe) ===== */
.series-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Base style: same size as .btn, but looks like a switch group */
.series-buttons .series-btn {
  /* uses your .btn and .btn--ghost styles; only adds consistency */
  padding: 10px 18px;
  font-size: 0.9rem;
}

/* Active = filled button in theme colors */
.series-buttons .series-btn.is-active {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border: none;
}

/* Optional: make inactive clearly "ghost" in both themes */
.series-buttons .series-btn:not(.is-active) {
  background: transparent;
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

@media (prefers-color-scheme: light) {
  .series-buttons .series-btn:not(.is-active) {
    border-color: rgba(0, 102, 204, 0.3);
  }
}

/* If you use data-color-scheme attribute switching */
[data-color-scheme="light"] .series-buttons .series-btn:not(.is-active) {
  border-color: rgba(0, 102, 204, 0.3);
}

  border-color: transparent;
}

/* Specs groups styling */
.specs-group {
  margin-bottom: 32px;
}

.specs-group-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--btn-bg);
}

.specs-group-table {
  width: 100%;
  border-collapse: collapse;
}

.specs-group-table .spec-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.specs-group-table .spec-row:last-child {
  border-bottom: none;
}

.specs-group-table .spec-label {
  font-weight: 600;
  color: var(--btn-bg);
  padding: 12px 16px 12px 0;
  width: 40%;
  vertical-align: top;
}

.specs-group-table .spec-value {
  color: var(--text-muted);
  padding: 12px 0;
  vertical-align: top;
}

@media (prefers-color-scheme: light) {
  .specs-group-title {
    color: var(--text-primary);
    border-bottom-color: #0066cc;
  }
  
  .specs-group-table .spec-label {
    color: #0066cc;
  }
  
  .specs-group-table .spec-row {
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }
}

[data-color-scheme="light"] .specs-group-table .spec-row {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-color-scheme="light"] .specs-group-table .spec-label {
  color: #0066cc;
}

[data-color-scheme="light"] .spec-item {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* Backward compatibility for old flat format */
.specs-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.spec-item:last-child {
  border-bottom: none;
}

.spec-item .spec-label {
  font-weight: 600;
  color: var(--btn-bg);
  flex: 0 0 40%;
}

.spec-item .spec-value {
  color: var(--text-muted);
  flex: 1;
  text-align: right;
}

@media (prefers-color-scheme: light) {
  .spec-item {
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }

  .spec-item .spec-label {
    color: #0066cc;
  }
}


/* ===================================================== */
/* ===== ВХОД ДЛЯ СОТРУДНИКОВ (login.html) ============= */
/* ===================================================== */
.login-page{min-height:100vh;display:flex;flex-direction:column}
.login-main{flex:1;display:flex;align-items:center;justify-content:center;padding:60px 20px}
.login-card{width:100%;max-width:420px;background-color:var(--bg-card);border-radius:16px;box-shadow:var(--shadow-card);border:var(--border-soft);padding:40px 36px}
.login-card__logo{font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;text-align:center}
.login-card__badge{display:inline-block;background-color:rgba(126,31,7,.15);color:var(--accent-line);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin:0 auto 20px;border:1px solid rgba(126,31,7,.3)}
[data-color-scheme="light"] .login-card__badge{background-color:rgba(0,102,204,.08);color:#0066cc;border-color:rgba(0,102,204,.25)}
.login-card__badge-wrap{text-align:center;margin-bottom:10px}
.auth-title{font-size:1.25rem;font-weight:700;margin:0 0 4px;text-align:center}
.auth-subtitle{font-size:.83rem;color:var(--text-muted);text-align:center;margin:0 0 24px}
.form-group{margin-bottom:15px}
.form-group label{display:block;font-size:.83rem;color:var(--text-muted);margin-bottom:6px}
.form-group input{width:100%;padding:10px 13px;background-color:var(--bg-main);border:var(--border-soft);border-radius:9px;color:var(--text-main);font-size:.93rem;font-family:inherit;transition:border-color .2s;box-sizing:border-box}
.form-group input:focus{outline:none;border-color:rgba(255,255,255,.45)}
.form-group input::placeholder{color:var(--text-muted);opacity:.45}
[data-color-scheme="light"] .form-group input{background-color:#f8fafc;color:#0a1628}
.auth-error{background-color:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fca5a5;border-radius:8px;padding:10px 14px;font-size:.83rem;margin-bottom:14px;display:none}
[data-color-scheme="light"] .auth-error{color:#b91c1c;background-color:rgba(239,68,68,.08)}
.login-card .btn{margin-top:4px}
.login-back{text-align:center;margin-top:18px;font-size:.83rem;color:var(--text-muted)}
.login-back a{color:var(--text-main);text-decoration:underline;text-underline-offset:3px;opacity:.7}
.login-back a:hover{opacity:1}
.site-footer{text-align:center;padding:18px;font-size:.78rem;color:var(--text-muted);opacity:.6;border-top:var(--border-soft)}
.login-theme{position:absolute;top:16px;right:20px}
@media(max-width:480px){.login-card{padding:28px 20px}}


/* ===================================================== */
/* ===== ВНУТРЕННИЙ ПОРТАЛ (dashboard.html) ============ */
/* ===================================================== */
/* ── Базовая разметка ── */
/* На десктопе body фиксирован по высоте, чтобы sidebar оставался на месте, а
   .content скроллился отдельно. На мобиле .container становится в column, и
   нужен обычный body-скролл — поэтому desktop-версия. */
body.dashboard-body{background-color:var(--bg-main);color:var(--text-main);height:100vh;overflow:hidden;display:flex;flex-direction:column}

/* ── Верхняя панель ── */
.dash-header{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background-color:var(--header-bg);border-bottom:1px solid rgba(148,163,184,.35);position:sticky;top:0;z-index:70;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);gap:16px;flex-wrap:wrap}
.dash-header__title{margin:0;font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-main)}
.dash-header__right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dash-header__user{font-size:.85rem;color:var(--text-muted)}
.dash-header__user b{color:var(--text-main);font-weight:600}
.logout-btn{background-color:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.32);padding:7px 15px;border-radius:8px;cursor:pointer;font-size:.85rem;font-family:inherit;transition:background-color .2s;margin-left:0}
.logout-btn:hover{background-color:rgba(239,68,68,.22)}
[data-color-scheme="light"] .logout-btn{color:#dc2626;background-color:rgba(239,68,68,.08);border-color:rgba(239,68,68,.22)}

/* ── Основной каркас ── */
.dashboard-body .container{display:flex;flex:1;min-height:0;max-width:none;margin:0;padding:0;width:100%}
.sidebar{width:250px;flex-shrink:0;background-color:var(--bg-card);border-right:var(--border-soft);padding:18px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-item{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--text-muted);cursor:pointer;font-size:.88rem;transition:background-color .2s,color .2s;border:none;background:none;border-left:none;width:100%;text-align:left;box-sizing:border-box;white-space:nowrap}
.nav-item:hover{background-color:rgba(255,255,255,.06);color:var(--text-main)}
.nav-item.active{background-color:rgba(255,255,255,.1);color:var(--text-main);font-weight:600}
[data-color-scheme="light"] .nav-item:hover{background-color:rgba(0,102,204,.07)}
[data-color-scheme="light"] .nav-item.active{background-color:rgba(0,102,204,.12)}

/* Иконка слева — без фона, просто SVG. Цвет наследует от nav-item, меняется
   на hover/active вместе с текстом. */
.nav-item__icon{
    width:24px;height:24px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--text-muted);
    transition:color .2s;
}
.nav-item__icon svg{width:18px;height:18px;display:block}
.nav-item:hover .nav-item__icon,
.nav-item.active .nav-item__icon{color:var(--text-main)}
[data-color-scheme="light"] .nav-item:hover .nav-item__icon,
[data-color-scheme="light"] .nav-item.active .nav-item__icon{color:#0a1628}

.nav-item__label{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Бэдж непрочитанных — единый стиль (старый inline-style на каждом span убран в HTML). */
.nav-item__badge{margin-left:auto;background:#ef4444;color:#fff;border-radius:999px;padding:1px 7px;font-size:.7rem;font-weight:700;min-width:18px;text-align:center;flex-shrink:0;line-height:1.4}

.role-admin,.role-manager,.role-worker{display:none}

/* ── Контент ── */
.content{flex-grow:1;padding:28px 32px;overflow-x:hidden;overflow-y:auto;min-width:0;min-height:0}
.card{background-color:var(--bg-card);border:var(--border-soft);border-radius:14px;padding:26px 28px;box-shadow:var(--shadow-card);margin-bottom:20px;color:var(--text-main)}
.card h2{margin:0 0 18px;font-size:1.2rem;font-weight:700;color:var(--text-main)}
.card h3{margin:0 0 14px;font-size:1rem;font-weight:700;color:var(--text-main)}
.card h4{margin:0 0 10px;font-size:.92rem;font-weight:700;color:var(--text-main)}
.card p{color:var(--text-muted);font-size:.9rem}

/* ── Поля ввода ── */
.content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
.content select,
.content textarea{background-color:var(--bg-main);border:var(--border-soft);border-radius:8px;color:var(--text-main);padding:9px 12px;font-family:inherit;font-size:.9rem;transition:border-color .15s;box-sizing:border-box}
.content input:focus,.content select:focus,.content textarea:focus{outline:none;border-color:rgba(255,255,255,.45)}
[data-color-scheme="light"] .content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
[data-color-scheme="light"] .content select,
[data-color-scheme="light"] .content textarea{background-color:#f8fafc;color:#0a1628}
.content input::placeholder,.content textarea::placeholder{color:var(--text-muted);opacity:.55}
.content label{color:var(--text-muted);font-size:.85rem}

/* ── Кнопки по умолчанию (без класса) в контенте ── */
/* В тёмной теме — приглушённые прозрачные с рамкой; в светлой — синие заливные */
.content button:not([class]){background-color:transparent;color:var(--text-main);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:9px 16px;cursor:pointer;font-size:.87rem;font-family:inherit;font-weight:500;transition:background-color .15s,border-color .15s,color .15s}
.content button:not([class]):hover{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4);color:var(--text-main)}
[data-color-scheme="light"] .content button:not([class]){background-color:#0066cc;color:#fff;border:1px solid #0066cc}
[data-color-scheme="light"] .content button:not([class]):hover{background-color:#0052a3;border-color:#0052a3;color:#fff}
@media (prefers-color-scheme: light){
  :root:not([data-color-scheme="dark"]) .content button:not([class]){background-color:#0066cc;color:#fff;border:1px solid #0066cc}
  :root:not([data-color-scheme="dark"]) .content button:not([class]):hover{background-color:#0052a3;border-color:#0052a3;color:#fff}
}
.content button:disabled{opacity:.55;cursor:not-allowed}

/* ── Таблицы ── */
.content table{width:100%;border-collapse:collapse;background-color:var(--bg-card);border:var(--border-soft);border-radius:10px;overflow:hidden;font-size:.88rem;margin-bottom:8px}
.content th{background-color:var(--bg-card-alt);text-align:left;padding:10px 14px;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:var(--border-soft);font-weight:600;white-space:nowrap}
.content td{padding:11px 14px;border-bottom:var(--border-soft);color:var(--text-main);vertical-align:middle}
.content tr:last-child td{border-bottom:none}
.content tr:hover td{background-color:rgba(255,255,255,.025)}
[data-color-scheme="light"] .content tr:hover td{background-color:rgba(0,102,204,.04)}

/* ── Чат ── */
.chat-msg{background-color:var(--bg-card-alt);border:var(--border-soft);padding:15px;border-radius:10px;margin-bottom:15px;border-left:4px solid var(--accent-line)}
.chat-msg.answered{border-left-color:#22c55e}
.chat-reply{background-color:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.18);padding:10px 12px;margin-top:10px;border-radius:6px;font-style:italic;color:var(--text-muted-strong)}

/* ── Чат сотрудников (telegram-style) ─────────────────────── */
.emp-chat{display:flex;border:var(--border-soft);border-radius:12px;background:var(--bg-card-alt);overflow:hidden;height:65vh;min-height:480px;max-height:720px}
.emp-chat__sidebar{width:300px;flex-shrink:0;border-right:var(--border-soft);display:flex;flex-direction:column;background:var(--bg-card)}
.emp-chat__search{padding:12px;border-bottom:var(--border-soft)}
.emp-chat__search input{width:100%;padding:8px 12px;border-radius:8px;border:var(--border-soft);background:var(--bg-main);color:var(--text-main);font-size:.85rem;box-sizing:border-box}
.emp-chat__open-toggle{padding:10px 12px;border-bottom:var(--border-soft);background:var(--bg-card-alt)}
.emp-chat__list{flex:1;overflow-y:auto}
.emp-chat__group-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:12px 14px 6px;background:var(--bg-card)}
.emp-chat__contact{display:flex;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(148,163,184,.08);align-items:center;transition:background-color .12s}
.emp-chat__contact:hover{background:rgba(255,255,255,.04)}
[data-color-scheme="light"] .emp-chat__contact:hover{background:rgba(0,102,204,.05)}
.emp-chat__contact.active{background:rgba(59,130,246,.14)}
[data-color-scheme="light"] .emp-chat__contact.active{background:rgba(0,102,204,.13)}
.emp-chat__avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#a63218);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem;flex-shrink:0;text-transform:uppercase}
.emp-chat__contact-body{flex:1;min-width:0}
.emp-chat__contact-name{font-size:.88rem;font-weight:600;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-chat__contact-meta{font-size:.72rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.emp-chat__contact-preview{font-size:.78rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.emp-chat__contact-unread{background:#dc3545;color:#fff;font-size:.7rem;font-weight:700;border-radius:999px;padding:1px 7px;min-width:18px;text-align:center;flex-shrink:0}
.emp-chat__role-badge{font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:4px;background:rgba(148,163,184,.18);color:var(--text-muted-strong)}
.emp-chat__role-badge.role-Admin{background:rgba(166,50,24,.22);color:#fca47e}
.emp-chat__role-badge.role-Manager{background:rgba(14,165,233,.22);color:#7dd3fc}
.emp-chat__role-badge.role-Worker{background:rgba(34,197,94,.18);color:#86efac}
[data-color-scheme="light"] .emp-chat__role-badge.role-Admin{color:#7c2d12}
[data-color-scheme="light"] .emp-chat__role-badge.role-Manager{color:#0c4a6e}
[data-color-scheme="light"] .emp-chat__role-badge.role-Worker{color:#14532d}
.emp-chat__open-mark{font-size:.65rem;color:#22c55e}
.emp-chat__main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
/* Drag-and-drop overlay для чатов (admin↔клиент и сотрудник↔сотрудник) */
.emp-chat__main.chat-drop-active::after{content:attr(data-drop-text);position:absolute;inset:0;background:rgba(255,187,122,.15);border:2px dashed var(--accent-line);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--text-main);pointer-events:none;z-index:5;font-size:1rem}
[data-color-scheme="light"] .emp-chat__main.chat-drop-active::after{background:rgba(196,87,13,.1)}
.emp-chat__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);font-size:.9rem;text-align:center;padding:30px}
.emp-chat__active{flex:1;display:flex;flex-direction:column;min-height:0}
.emp-chat__header{padding:14px 18px;border-bottom:var(--border-soft);display:flex;align-items:center;justify-content:space-between;background:var(--bg-card);gap:12px}
.emp-chat__back-btn{display:none;width:34px;height:34px;border:none;background:transparent;color:var(--text-main);font-size:1.4rem;line-height:1;cursor:pointer;border-radius:50%;flex-shrink:0;padding:0;align-items:center;justify-content:center}
.emp-chat__back-btn:hover{background:rgba(255,255,255,.07)}
[data-color-scheme="light"] .emp-chat__back-btn:hover{background:rgba(0,102,204,.08)}
.emp-chat__header-avatar{display:none;width:38px;height:38px;font-size:.9rem}
.emp-chat__header-name{font-weight:700;color:var(--text-main);font-size:1rem}
.emp-chat__header-meta{font-size:.78rem;color:var(--text-muted);margin-top:2px}
.emp-chat__messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:8px;background:var(--bg-card-alt)}
.emp-chat__bubble{max-width:75%;padding:8px 12px;border-radius:14px;font-size:.88rem;line-height:1.4;word-wrap:break-word;white-space:pre-wrap;position:relative}
/* Свои сообщения — прозрачно-синяя плашка, без 1px-border (зернит на retina вокруг медиа) */
.emp-chat__bubble.from-me{align-self:flex-end;background:rgba(59,130,246,.18);color:var(--text-main);border-bottom-right-radius:4px}
[data-color-scheme="light"] .emp-chat__bubble.from-me{background:rgba(0,102,204,.12);color:var(--text-main)}
.emp-chat__bubble.from-them{align-self:flex-start;background:var(--bg-card);color:var(--text-main);border:var(--border-soft);border-bottom-left-radius:4px}
/* Bubble с медиа — минимальный padding, чтобы картинка/файл не утопали в пустоте.
   :has() поддерживается во всех актуальных браузерах с 2024. */
.emp-chat__bubble:has(> a[data-attach-img-url]),
.emp-chat__bubble:has(> a[data-attach-file-url]){padding:3px;line-height:1}
.emp-chat__bubble > a[data-attach-img-url],
.emp-chat__bubble > a[data-attach-file-url]{margin:0;display:block;font-size:0;line-height:0}
.emp-chat__bubble:has(> a[data-attach-img-url]) .emp-chat__bubble-meta,
.emp-chat__bubble:has(> a[data-attach-file-url]) .emp-chat__bubble-meta{padding:2px 9px 0;margin-top:0;line-height:1}
/* Текст и имя отправителя под/над медиа: левый/правый отступ как в обычном
   bubble (12px), чтобы не прижимались к плотному padding:3px вокруг картинки.
   12-3=9px доп. */
.emp-chat__bubble:has(> a[data-attach-img-url]) > .emp-chat__bubble-text,
.emp-chat__bubble:has(> a[data-attach-file-url]) > .emp-chat__bubble-text{padding:4px 9px 0;line-height:1.4}
.emp-chat__bubble:has(> a[data-attach-img-url]) > .emp-chat__bubble-sender,
.emp-chat__bubble:has(> a[data-attach-file-url]) > .emp-chat__bubble-sender{padding:3px 9px 4px}
/* Имя отправителя сверху чужого пузыря (для группового контекста — клиент-чат
   с несколькими менеджерами). Цвет наследуется от роли (role-Admin/Manager/Worker)
   так же, как в .emp-chat__role-badge — единая палитра по всему интерфейсу.
   Клиенты (без role-класса) — нейтральный белый/серый текст. */
.emp-chat__bubble-sender{font-size:.7rem;font-weight:600;color:var(--text-main);margin-bottom:3px;line-height:1.2;opacity:.85}
[data-color-scheme="light"] .emp-chat__bubble-sender{color:#0a1628}
.emp-chat__bubble-sender.role-Admin   {color:#fca47e}
.emp-chat__bubble-sender.role-Manager {color:#7dd3fc}
.emp-chat__bubble-sender.role-Worker  {color:#86efac}
[data-color-scheme="light"] .emp-chat__bubble-sender.role-Admin   {color:#7c2d12}
[data-color-scheme="light"] .emp-chat__bubble-sender.role-Manager {color:#0c4a6e}
[data-color-scheme="light"] .emp-chat__bubble-sender.role-Worker  {color:#14532d}
.emp-chat__bubble.from-me .emp-chat__bubble-sender{display:none}
.emp-chat__bubble-meta{font-size:.65rem;opacity:.75;margin-top:3px;text-align:right;display:flex;justify-content:flex-end;align-items:center;gap:0}
.emp-chat__bubble.from-them .emp-chat__bubble-meta{color:var(--text-muted)}
/* SVG-галочки в Telegram-стиле. «Прочитано» — насыщенный зелёный (как в Telegram),
   «отправлено» — наследует цвет meta-строки (приглушённый). */
.emp-chat__ticks{display:block}
.emp-chat__ticks--sent{color:currentColor;opacity:.85}
.emp-chat__ticks--read{color:#22c55e;opacity:1}
[data-color-scheme="light"] .emp-chat__ticks--read{color:#16a34a}

/* Скелетон для chat-attach картинок до прихода blob — рамка с shimmer-анимацией.
   Применяется к img[data-attach-url]:not([src]). После установки src background
   уже не виден (картинка покрывает), но animation продолжает крутить — поэтому
   на JS убираем style.background по img.onload. */
@keyframes chatImgSkeleton{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}
img[data-attach-url]:not([src]),
img[data-attach-load]:not([src]){
    display:block;border-radius:6px;
    background:linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 75%);
    background-size:200% 100%;
    animation:chatImgSkeleton 1.4s linear infinite;
    color:transparent; /* прячем alt-текст до загрузки */
}
/* Если у img НЕТ height-атрибута (legacy без размеров) — fallback-фрейм 240x160. */
img[data-attach-url]:not([src]):not([height]),
img[data-attach-load]:not([src]):not([height]){
    min-width:240px;min-height:160px;
}
[data-color-scheme="light"] img[data-attach-url]:not([src]),
[data-color-scheme="light"] img[data-attach-load]:not([src]){
    background:linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.05) 75%);
    background-size:200% 100%;
}

/* (Старые правки legacy-replyDiv удалены — buildReplyDiv теперь использует
   .emp-chat__bubble классы; media-padding управляется общим правилом
   .emp-chat__bubble:has(> a[data-attach-img-url]) выше.) */
.emp-chat__day-divider{align-self:center;font-size:.7rem;color:var(--text-muted);background:var(--bg-card);padding:3px 10px;border-radius:999px;margin:6px 0}
.emp-chat__composer{padding:10px 14px;border-top:var(--border-soft);display:flex;gap:8px;align-items:flex-end;background:var(--bg-card)}
.emp-chat__composer textarea{flex:1;resize:none;min-height:38px;max-height:30vh;padding:9px 12px;border-radius:10px;border:var(--border-soft);background:var(--bg-main);color:var(--text-main);font-family:inherit;font-size:.9rem;overflow-y:hidden;box-sizing:border-box}
[data-color-scheme="light"] .emp-chat__composer textarea{background:#f8fafc;color:#0a1628}
@media(max-width:768px){
  /* Telegram-style: одна панель на экране за раз. По умолчанию виден список;
     при выборе собеседника контейнер получает класс --show-main и переключается
     на переписку. Кнопка ← в шапке возвращает к списку. */
  .emp-chat{flex-direction:column;height:calc(100dvh - 180px);min-height:480px;max-height:none;border-radius:10px}

  /* Fullscreen-режим чата (emp ИЛИ client): прячем заголовки секций и
     плавающий бургер, растягиваем на 100dvh, блокируем страничный скролл. */
  body.dashboard-body.chat-fullscreen #section-welcome > h2,
  body.dashboard-body.chat-fullscreen #section-welcome > p,
  body.dashboard-body.chat-fullscreen #section-chat > h2,
  body.dashboard-body.chat-fullscreen .dash-floating-burger { display: none !important; }
  body.dashboard-body.chat-fullscreen #section-welcome.card,
  body.dashboard-body.chat-fullscreen #section-chat.card {
    padding: 0; margin: 0; border: none; border-radius: 0;
    background: transparent; box-shadow: none;
  }
  body.dashboard-body.chat-fullscreen .content { padding: 0; }

  /* Жёстко привязываем body к видимой высоте viewport, иначе на реальном смартфоне
     осталась бы возможность проскроллить страницу — body имеет min-height:100vh,
     а 100vh > 100dvh когда показана нижняя панель браузера. */
  html.chat-fullscreen,
  body.dashboard-body.chat-fullscreen {
    height: 100dvh; min-height: 100dvh; max-height: 100dvh;
    overflow: hidden;
  }
  body.dashboard-body.chat-fullscreen .container,
  body.dashboard-body.chat-fullscreen .content,
  body.dashboard-body.chat-fullscreen #section-welcome,
  body.dashboard-body.chat-fullscreen #section-chat { min-height: 0; }

  body.dashboard-body.chat-fullscreen .emp-chat {
    height: 100dvh; min-height: 0; max-height: 100dvh;
    border-radius: 0; border: none;
  }
  /* Прочие div'ы (например, карточка смены пароля под welcome) — скрываем. */
  body.dashboard-body.chat-fullscreen #section-welcome > div:not(#empChatRoot):not(.emp-chat) {
    display: none;
  }
  /* flex:1 + min-height:0 — иначе сайдбар сжимается до контента и внутренний
     список не получает overflow-y, прокрутка не работает. */
  .emp-chat__sidebar{width:100%;max-height:none;border-right:none;border-bottom:var(--border-soft);flex:1;min-height:0}
  .emp-chat__main{min-height:0;display:none}
  .emp-chat--show-main .emp-chat__sidebar{display:none}
  .emp-chat--show-main .emp-chat__main{display:flex;flex:1;min-height:0}

  .emp-chat__back-btn{display:flex}
  .emp-chat__header-avatar{display:flex}
  .emp-chat__header{padding:10px 12px;gap:10px}
  .emp-chat__header-name{font-size:.95rem}
  .emp-chat__header-meta{font-size:.74rem}
  .emp-chat__messages{padding:14px 12px}
  .emp-chat__bubble{max-width:85%;font-size:.92rem}
  .emp-chat__composer{padding:8px 10px}
}

.prod-img-thumbnail{width:40px;height:40px;object-fit:cover;border-radius:4px;border:var(--border-soft);margin-right:4px}

/* ── Прогресс-бар ── */
.progress-container{width:100%;background-color:var(--bg-card-alt);border-radius:4px;margin-top:5px;display:none}
.progress-bar{width:0%;height:10px;background-color:#22c55e;border-radius:4px;transition:width .2s ease}
.progress-text{font-size:11px;color:var(--text-muted);margin-top:2px;text-align:right}

/* ── Бейджи уведомлений в навигации ── */
.nav-item span[id$="Badge"]{background:#ef4444;color:#fff;border-radius:999px;padding:1px 7px;font-size:.7rem;font-weight:700;margin-left:auto;min-width:18px;text-align:center}

/* ── Инфо/предупреждение блоки ── */
.info-box{background-color:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);padding:14px 16px;border-radius:10px;margin-bottom:16px;color:var(--text-main);font-size:.9rem}
.warning-box{background-color:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);padding:12px 14px;border-radius:10px;margin-bottom:16px;color:var(--text-main);font-size:.88rem}
.panel-soft{background-color:var(--bg-card-alt);border:var(--border-soft);padding:16px;border-radius:10px;margin-bottom:18px}

/* ── Модалки ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1000;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}
.modal-box{background-color:var(--bg-card);border:var(--border-soft);color:var(--text-main);padding:28px;border-radius:14px;width:100%;max-width:600px;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-card)}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--text-muted);padding:4px 8px;line-height:1}
.modal-close:hover{color:var(--text-main)}

/* ── Ссылки внутри контента ── */
.content a{color:var(--accent-line)}
[data-color-scheme="light"] .content a{color:#0066cc}

/* ── Спиннер загрузки (индикатор сохранения товара) ── */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ── Адаптивность ── */
/* Бургер для мобильного портала. На десктопе скрыт. */
.dash-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:0;border:none;background:none;cursor:pointer;flex-shrink:0;margin-right:4px}
.dash-burger span{display:block;height:3px;width:24px;background-color:var(--text-main);border-radius:2px;transition:transform .2s ease, opacity .2s ease}
.dash-burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.dash-burger.is-open span:nth-child(2){opacity:0}
.dash-burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Плавающая кнопка-бургер: видна только на мобиле, когда меню закрыто.
   Открывает drawer и показывает полную шапку — тогда сама прячется. */
.dash-floating-burger{display:none;position:fixed;top:12px;left:12px;z-index:65;width:44px;height:44px;padding:0;border:none;border-radius:12px;background-color:var(--bg-card);box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:var(--border-soft)}
.dash-floating-burger span:not(.dash-floating-burger__badge){display:block;height:3px;width:22px;background-color:var(--text-main);border-radius:2px}
/* Бейдж непрочитанных на плавающей кнопке-бургере. */
.dash-floating-burger__badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;background:#dc3545;color:#fff;border-radius:999px;font-size:.72rem;font-weight:700;line-height:20px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.4);box-sizing:border-box;border:2px solid var(--bg-main)}

/* Подложка под раскрытым меню — затемняет контент и ловит клик «вне меню». */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
.sidebar-backdrop.is-open{display:block}

@media(max-width:768px){
  .dash-header{padding:12px 16px;display:none}                /* скрыта по умолчанию */
  body.dashboard-body.menu-open .dash-header{display:flex}    /* видна только вместе с drawer'ом */
  .dash-header__title{font-size:.85rem}
  .dash-burger{display:flex}
  .dash-floating-burger{display:flex}
  body.dashboard-body.menu-open .dash-floating-burger{display:none} /* спрятана, когда меню открыто */
  .dashboard-body .container{flex-direction:column;position:relative}

  /* Сайдбар становится drawer-ом, выезжающим слева. */
  .sidebar{
    position:fixed;
    top:0;left:0;bottom:0;          /* bottom:0 — гарантия высоты без зависимости от 100vh */
    width:78%;max-width:300px;
    height:100vh;                    /* fallback для старых браузеров */
    height:100dvh;                   /* учитывает мобильный UI браузера */
    /* Отступ сверху равен реальной высоте dash-header (JS пробрасывает через переменную). */
    padding:calc(var(--dash-header-h, 64px) + 12px) 12px 24px;
    border-right:var(--border-soft);
    border-bottom:none;
    background-color:var(--bg-card);
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:60;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch; /* плавный inertial-скролл на iOS */
    flex-direction:column;
    flex-wrap:nowrap;
    gap:2px;
    box-shadow:4px 0 24px rgba(0,0,0,.25);
  }
  .sidebar.is-open{transform:translateX(0)}
  .nav-item{flex:0 0 auto;padding:11px 14px;font-size:.92rem;width:100%;box-sizing:border-box}

  .content{padding:64px 18px 18px}    /* верх — место под плавающий бургер */
  .card{padding:20px}

  /* ── Списки-таблицы превращаются в стек карточек ── */
  /* Класс .dash-card-list и data-label у <td> расставляет JS (см. dashboard.js). */
  .dash-card-list{
    display:block !important;
    width:100% !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    margin:0 !important;
  }
  .dash-card-list tbody{display:block;width:100%}
  /* Скрываем шапку — её содержимое уезжает в data-label */
  .dash-card-list .dash-card-list__head,
  .dash-card-list thead{display:none !important}
  /* Каждая строка-данных — отдельная карточка */
  .dash-card-list tr{
    display:block !important;
    background-color:var(--bg-card) !important;
    border:var(--border-soft) !important;
    border-radius:10px !important;
    padding:10px 12px !important;
    margin-bottom:10px !important;
  }
  .dash-card-list tr:hover td{background:transparent !important}
  /* Ячейки-друг под другом, label сверху */
  .dash-card-list td{
    display:block !important;
    width:auto !important;
    border:none !important;
    padding:6px 0 !important;
    color:var(--text-main);
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .dash-card-list td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text-muted);
    font-weight:600;
    margin-bottom:3px;
  }
  /* Контейнеры списков — без overflow, иначе всплывают серые полоски от inline-стилей */
  #ordersList,#usersList,#clientsList,#adminCategoriesList,#adminCatalogList,
  #adminRequestsList,#requestsList,
  #deactivatedUsersBlock,#deactivatedClientsBlock{
    overflow:visible;
    min-width:0;
  }

  /* ── Inline-формы внутри карточек: складываются в столбец, поля не вылазят за экран ── */
  /* Покрывает inline-стиль `flex-wrap` у форм в dashboard.html (addOrderForm,
     addUserForm, addClientForm, addCategoryForm, addProductForm и т.п.) */
  .content .card form{flex-direction:column !important;align-items:stretch !important}
  .content .card form > input,
  .content .card form > select,
  .content .card form > textarea,
  .content .card form > div,
  .content .card form > button,
  .content .card form > p,
  .content .card form > label{
    flex:0 0 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box;
  }
  /* Вложенные поля (например, две даты в одной строке внутри form > div) */
  .content .card form input,
  .content .card form select,
  .content .card form textarea{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  /* Группа кнопок «Сохранить / Отмена» — пусть переносится */
  .content .card form > div[style*="display"][style*="flex"]{
    flex-wrap:wrap;
  }
}

/* ── Цветовые утилиты для кнопок действий ── */
/* Тёмная тема (default): мягкий tint в стиле .logout-btn — чтобы не резало глаза.
   Светлая тема: сплошной bootstrap-style — тинт на белом слишком блёклый. */
/* Единый font-weight для всех цветных кнопок — иначе при переключении тем
   светлая добавляет 600, тёмная остаётся 400, и ширина текста «прыгает»,
   из-за чего сдвигаются соседние элементы (таблицы, формы). */
.dashboard-body .btn-danger,
.dashboard-body .btn-success,
.dashboard-body .btn-info,
.dashboard-body .btn-warn,
.dashboard-body .btn-neutral,
.dashboard-body .btn-primary{font-weight:600}

.dashboard-body .btn-danger{background-color:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.32)}
.dashboard-body .btn-danger:hover{background-color:rgba(239,68,68,.2)}
.dashboard-body .btn-success{background-color:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.32)}
.dashboard-body .btn-success:hover{background-color:rgba(34,197,94,.2)}
.dashboard-body .btn-info{background-color:rgba(14,165,233,.14);color:#7dd3fc;border:1px solid rgba(14,165,233,.32)}
.dashboard-body .btn-info:hover{background-color:rgba(14,165,233,.22)}
.dashboard-body .btn-warn{background-color:rgba(245,158,11,.14);color:#fbbf24;border:1px solid rgba(245,158,11,.32)}
.dashboard-body .btn-warn:hover{background-color:rgba(245,158,11,.22)}
.dashboard-body .btn-neutral{background-color:rgba(148,163,184,.12);color:#cbd5e1;border:1px solid rgba(148,163,184,.32)}
.dashboard-body .btn-neutral:hover{background-color:rgba(148,163,184,.22)}
.dashboard-body .btn-primary{background-color:rgba(166,50,24,.18);color:#fca47e;border:1px solid rgba(166,50,24,.4)}
.dashboard-body .btn-primary:hover{background-color:rgba(166,50,24,.28)}

/* ── Статус-бейджи для списка заявок ── */
.dashboard-body .status-badge-danger{background-color:rgba(239,68,68,.18);color:#f87171;border:1px solid rgba(239,68,68,.4);font-weight:600}
.dashboard-body .status-badge-warn{background-color:rgba(245,158,11,.18);color:#fbbf24;border:1px solid rgba(245,158,11,.4);font-weight:600}
.dashboard-body .status-badge-success{background-color:rgba(34,197,94,.18);color:#4ade80;border:1px solid rgba(34,197,94,.4);font-weight:600}
.dashboard-body .status-badge-neutral{background-color:rgba(148,163,184,.18);color:#cbd5e1;border:1px solid rgba(148,163,184,.4);font-weight:600}
[data-color-scheme="light"] .dashboard-body .status-badge-danger{background-color:rgba(239,68,68,.16);color:#b91c1c;border-color:rgba(239,68,68,.45)}
[data-color-scheme="light"] .dashboard-body .status-badge-warn{background-color:rgba(245,158,11,.20);color:#92400e;border-color:rgba(245,158,11,.5)}
[data-color-scheme="light"] .dashboard-body .status-badge-success{background-color:rgba(34,197,94,.18);color:#14532d;border-color:rgba(34,197,94,.48)}
[data-color-scheme="light"] .dashboard-body .status-badge-neutral{background-color:rgba(100,116,139,.16);color:#334155;border-color:rgba(100,116,139,.45)}
@media (prefers-color-scheme: light){
  :root:not([data-color-scheme="dark"]) .dashboard-body .status-badge-danger{background-color:rgba(239,68,68,.16);color:#b91c1c;border-color:rgba(239,68,68,.45)}
  :root:not([data-color-scheme="dark"]) .dashboard-body .status-badge-warn{background-color:rgba(245,158,11,.20);color:#92400e;border-color:rgba(245,158,11,.5)}
  :root:not([data-color-scheme="dark"]) .dashboard-body .status-badge-success{background-color:rgba(34,197,94,.18);color:#14532d;border-color:rgba(34,197,94,.48)}
  :root:not([data-color-scheme="dark"]) .dashboard-body .status-badge-neutral{background-color:rgba(100,116,139,.16);color:#334155;border-color:rgba(100,116,139,.45)}
}

/* Красная плашка-предупреждение (архив пользователей и т.п.) */
.dashboard-body .danger-notice{background-color:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.32);border-radius:6px;padding:10px 14px;margin-bottom:12px;font-size:13px;line-height:1.5}
[data-color-scheme="light"] .dashboard-body .danger-notice{background-color:#f8d7da;color:#842029;border-color:#f5c2c7}
@media (prefers-color-scheme: light){
  :root:not([data-color-scheme="dark"]) .dashboard-body .danger-notice{background-color:#f8d7da;color:#842029;border-color:#f5c2c7}
}

/* ── Подкраска строк-шапок таблиц ── */
.dashboard-body .tr-head--success{background:rgba(34,197,94,.14);color:var(--text-main)}
.dashboard-body .tr-head--info{background:rgba(14,165,233,.14);color:var(--text-main)}

/* ── Светлая тема: насыщенные тинты ── */
/* Применяется в двух случаях: (а) явно выбрана светлая тема, (б) система в
   светлой теме и явно не переопределено на тёмную. */
[data-color-scheme="light"] .dashboard-body .btn-danger{background-color:rgba(239,68,68,.18);color:#991b1b;border:1px solid rgba(239,68,68,.45);font-weight:600}
[data-color-scheme="light"] .dashboard-body .btn-danger:hover{background-color:rgba(239,68,68,.28)}
[data-color-scheme="light"] .dashboard-body .btn-success{background-color:rgba(34,197,94,.20);color:#14532d;border:1px solid rgba(34,197,94,.48);font-weight:600}
[data-color-scheme="light"] .dashboard-body .btn-success:hover{background-color:rgba(34,197,94,.30)}
[data-color-scheme="light"] .dashboard-body .btn-info{background-color:rgba(14,165,233,.20);color:#0c4a6e;border:1px solid rgba(14,165,233,.48);font-weight:600}
[data-color-scheme="light"] .dashboard-body .btn-info:hover{background-color:rgba(14,165,233,.30)}
[data-color-scheme="light"] .dashboard-body .btn-warn{background-color:rgba(245,158,11,.22);color:#78350f;border:1px solid rgba(245,158,11,.5);font-weight:600}
[data-color-scheme="light"] .dashboard-body .btn-warn:hover{background-color:rgba(245,158,11,.32)}
[data-color-scheme="light"] .dashboard-body .btn-neutral{background-color:rgba(100,116,139,.18);color:#1e293b;border:1px solid rgba(100,116,139,.45);font-weight:600}
[data-color-scheme="light"] .dashboard-body .btn-neutral:hover{background-color:rgba(100,116,139,.28)}
[data-color-scheme="light"] .dashboard-body .btn-primary{background-color:rgba(166,50,24,.20);color:#7c2d12;border:1px solid rgba(166,50,24,.5);font-weight:600}
[data-color-scheme="light"] .dashboard-body .btn-primary:hover{background-color:rgba(166,50,24,.30)}
[data-color-scheme="light"] .dashboard-body .tr-head--success{background:rgba(34,197,94,.2);color:#14532d}
[data-color-scheme="light"] .dashboard-body .tr-head--info{background:rgba(14,165,233,.2);color:#0c4a6e}

@media (prefers-color-scheme: light){
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-danger{background-color:rgba(239,68,68,.18);color:#991b1b;border:1px solid rgba(239,68,68,.45);font-weight:600}
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-danger:hover{background-color:rgba(239,68,68,.28)}
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-success{background-color:rgba(34,197,94,.20);color:#14532d;border:1px solid rgba(34,197,94,.48);font-weight:600}
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-success:hover{background-color:rgba(34,197,94,.30)}
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-info{background-color:rgba(14,165,233,.20);color:#0c4a6e;border:1px solid rgba(14,165,233,.48);font-weight:600}
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-info:hover{background-color:rgba(14,165,233,.30)}
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-warn{background-color:rgba(245,158,11,.22);color:#78350f;border:1px solid rgba(245,158,11,.5);font-weight:600}
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-warn:hover{background-color:rgba(245,158,11,.32)}
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-neutral{background-color:rgba(100,116,139,.18);color:#1e293b;border:1px solid rgba(100,116,139,.45);font-weight:600}
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-neutral:hover{background-color:rgba(100,116,139,.28)}
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-primary{background-color:rgba(166,50,24,.20);color:#7c2d12;border:1px solid rgba(166,50,24,.5);font-weight:600}
  :root:not([data-color-scheme="dark"]) .dashboard-body .btn-primary:hover{background-color:rgba(166,50,24,.30)}
  :root:not([data-color-scheme="dark"]) .dashboard-body .tr-head--success{background:rgba(34,197,94,.2);color:#14532d}
  :root:not([data-color-scheme="dark"]) .dashboard-body .tr-head--info{background:rgba(14,165,233,.2);color:#0c4a6e}
}