/* Админка 1crm.shop — оформление СВЕТЛОЙ темы.

   У админки Django две темы, и переключатель в правом верхнем углу. Тёмную мы
   намеренно не трогаем: она у Django самодостаточная, а попытка перекрасить её
   наполовину и дала те «чёрные куски», из-за которых всё выглядело разнородным.

   Как это разделено:
   * палитра объявляется только когда тема светлая — явно выбрана либо система
     светлая и тёмная не выбрана;
   * собственная геометрия (скругления, отступы, типографика) применяется всегда,
     но цвета в ней берутся из переменных `--crm-*`, которых в тёмной теме нет —
     значит там всё откатывается к штатным цветам Django.
*/

html[data-theme="light"] {
  --primary: #6d4aff;
  --primary-fg: #ffffff;
  --secondary: #6d4aff;
  --accent: #6d4aff;
  --link-fg: #5b38f0;
  --link-hover-color: #4526d6;
  --link-selected-fg: #4526d6;

  --header-bg: #241d3d;
  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-link-color: #cfc8ff;

  --breadcrumbs-bg: #efeaff;
  --breadcrumbs-fg: #4b4467;
  --breadcrumbs-link-fg: #5b38f0;

  --body-bg: #f7f6fc;
  --body-fg: #16141f;
  --body-quiet-color: #6b6880;
  --body-loud-color: #16141f;

  --button-bg: #6d4aff;
  --button-fg: #ffffff;
  --button-hover-bg: #5b38f0;
  --default-button-bg: #6d4aff;
  --default-button-hover-bg: #5b38f0;
  --close-button-bg: #8b869f;
  --delete-button-bg: #d93025;

  --object-tools-bg: #6d4aff;
  --object-tools-fg: #ffffff;
  --object-tools-hover-bg: #5b38f0;

  --hairline-color: #e7e4f2;
  --border-color: #e7e4f2;
  --selected-bg: #efeaff;
  --selected-row: #f4f0ff;
  --darkened-bg: #f0eefa;

  --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Наши собственные переменные. В тёмной теме они НЕ объявлены, и правила ниже
     откатываются к штатным значениям Django — так тёмная тема остаётся такой,
     какой её сделали в Django, а светлая выглядит по-нашему. */
  --crm-card-bg: #ffffff;
  --crm-thead-bg: #faf9ff;
  --crm-row-hover: #faf9ff;
  --crm-shadow: 0 1px 2px rgba(22, 20, 31, .04);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --primary: #6d4aff;
  --primary-fg: #ffffff;
  --secondary: #6d4aff;
  --accent: #6d4aff;
  --link-fg: #5b38f0;
  --link-hover-color: #4526d6;
  --link-selected-fg: #4526d6;

  --header-bg: #241d3d;
  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-link-color: #cfc8ff;

  --breadcrumbs-bg: #efeaff;
  --breadcrumbs-fg: #4b4467;
  --breadcrumbs-link-fg: #5b38f0;

  --body-bg: #f7f6fc;
  --body-fg: #16141f;
  --body-quiet-color: #6b6880;
  --body-loud-color: #16141f;

  --button-bg: #6d4aff;
  --button-fg: #ffffff;
  --button-hover-bg: #5b38f0;
  --default-button-bg: #6d4aff;
  --default-button-hover-bg: #5b38f0;
  --close-button-bg: #8b869f;
  --delete-button-bg: #d93025;

  --object-tools-bg: #6d4aff;
  --object-tools-fg: #ffffff;
  --object-tools-hover-bg: #5b38f0;

  --hairline-color: #e7e4f2;
  --border-color: #e7e4f2;
  --selected-bg: #efeaff;
  --selected-row: #f4f0ff;
  --darkened-bg: #f0eefa;

  --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Наши собственные переменные. В тёмной теме они НЕ объявлены, и правила ниже
     откатываются к штатным значениям Django — так тёмная тема остаётся такой,
     какой её сделали в Django, а светлая выглядит по-нашему. */
  --crm-card-bg: #ffffff;
  --crm-thead-bg: #faf9ff;
  --crm-row-hover: #faf9ff;
  --crm-shadow: 0 1px 2px rgba(22, 20, 31, .04);
  }
}

body { font-size: 14px; }

/* --- Шапка: логотип как на сайте + быстрые ссылки --- */

#header { padding: 12px 24px; align-items: center; }

.crm-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.crm-logo-mark {
  display: grid; place-items: center; min-width: 36px; height: 30px; padding-inline: 4px;
  border-radius: 9px; background: linear-gradient(135deg, #6d4aff, #9a7bff);
  color: #fff; font-weight: 800; font-size: 16px;
}
.crm-logo-text { font-weight: 800; font-size: 19px; letter-spacing: -.03em; color: var(--header-color); }

#site-name { display: flex; align-items: center; gap: 20px; margin: 0; font-weight: 400; }
.crm-quick {
  color: var(--header-link-color) !important; text-decoration: none; font-size: 13px;
  padding: 5px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
}
.crm-quick:hover { background: rgba(255,255,255,.1); }

#user-tools { font-size: 12px; text-transform: none; letter-spacing: 0; }
#user-tools a { border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }

/* --- Крошки, карточки, таблицы: форма общая, цвета — по теме --- */

div.breadcrumbs { padding: 11px 24px; font-size: 13px; border: 0; }

.module, .dashboard .module, #content-main .module {
  background: var(--crm-card-bg, var(--body-bg));
  border: 1px solid var(--hairline-color);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--crm-shadow, none);
  margin-bottom: 18px;
}

.module h2, .module caption, .inline-group h2 {
  background: var(--crm-card-bg, var(--darkened-bg));
  color: var(--body-loud-color);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline-color);
}

.dashboard #content { width: auto; }
#content { padding: 24px; }

#changelist table { border: 0; }
#changelist table thead th {
  background: var(--crm-thead-bg, var(--darkened-bg));
  border-bottom: 1px solid var(--hairline-color);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  padding: 12px 14px;
}
#changelist table tbody td, #changelist table tbody th { padding: 12px 14px; }
#changelist tbody tr:hover { background: var(--crm-row-hover, var(--darkened-bg)); }
#changelist-filter {
  background: var(--crm-card-bg, var(--body-bg));
  border: 1px solid var(--hairline-color);
  border-radius: 14px;
}
#changelist-filter h2 { border-radius: 14px 14px 0 0; }

/* --- Кнопки --- */

.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 9px;
  padding: 9px 16px;
  font-weight: 600;
  border: 0;
  text-transform: none;
}
.submit-row {
  border-radius: 12px;
  border: 1px solid var(--hairline-color);
  background: var(--crm-card-bg, var(--body-bg));
  padding: 14px 18px;
}
.object-tools a { border-radius: 9px; text-transform: none; font-weight: 600; letter-spacing: 0; }

/* --- Формы --- */

.form-row { padding: 14px 18px; border-bottom: 1px solid var(--hairline-color); }
fieldset.module { border-radius: 14px; }
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], textarea, select, .vTextField {
  border: 1px solid var(--border-color);
  border-radius: 9px;
  padding: 9px 12px;
}
input[type=text]:focus, textarea:focus, select:focus, .vTextField:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(109, 74, 255, .16);
}

/* Расшифровка разговора: длинный текст, читаемый абзацем. */
.field-transcript textarea, .field-transcript .readonly {
  white-space: pre-wrap;
  line-height: 1.55;
  max-height: 340px;
  overflow-y: auto;
  display: block;
  background: var(--crm-thead-bg, var(--darkened-bg));
  border-radius: 9px;
  padding: 12px 14px;
}

/* --- Мелочи --- */

.messagelist li { border-radius: 9px; }
a:link, a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
.paginator { border-top: 1px solid var(--hairline-color); padding: 12px 18px; }