/* Тёплая тема CRM (11.10.2026, по референсу Dribbble «Finance Dashboard —
   Fintech Web App», Ronas IT): тёплый фон, белые карточки без рамок с мягкой
   тенью, почти чёрная типографика, основные кнопки и выбранный пункт меню —
   чёрная «пилюля». Ссылки остаются цветом акцента: в таблицах и тексте их
   должно быть видно.
   .crm-warm — на <body> консоли платформы (layouts/admin); CRM с 17.10.2026 —
   в теме crm-slate по образцу ПланФакта (tokens.css, shell.css). .dash-warm —
   на области дашбордов (главные директора и собственника, прогноз денег):
   графики и витрина — только под .crm-warm, в теме crm-slate дашборды берут
   базовые стили charts.css. Разметка и данные не меняются — только токены и
   вид компонентов. */
.crm-warm {
  --warm-ink: #1D2117;
  --warm-coral: #E65D3F;
  --warm-orange: #F49C59;
  --warm-mustard: #E6B841;
  --warm-taupe: #C7B6A1;
  --warm-blue: #4677AA;
  --warm-sand: #F3E6D8;
  --warm-shadow: 0 1px 2px rgba(29, 33, 23, 0.04), 0 10px 28px rgba(120, 72, 30, 0.07);
  --bg-page: #F9E7D4;
  --text: var(--warm-ink);
  --border-panel: transparent;
  --border-soft: #F1E7DC;
  --surface-subtle: #FCF6F0;
  --text-faint: #B9A894;
  --nav-border: #EBDCCB;
  --nav-hover-bg: #FBF1E6;
  --nav-active-bg: var(--warm-ink);
  --nav-active-text: #fff;
}

/* Фон области контента — мягкий градиент от тёплого к светлому */
.crm-warm .app-main {
  background: linear-gradient(180deg, #F9E7D4 0, #FBF0E5 420px, #FCF7F2 100%);
}

.crm-warm .app-nav-item--active .app-nav-item__icon {
  color: #fff;
}

/* Основные кнопки — чёрная «пилюля», остальные — белая «пилюля» */
.crm-warm .btn {
  border-radius: 999px;
}

.crm-warm .btn--primary {
  background: var(--warm-ink);
  border-color: var(--warm-ink);
}

.crm-warm .btn--primary:hover {
  background: #33382c;
  border-color: #33382c;
}

.crm-warm .field__input {
  border-radius: 12px;
}

.crm-warm .modal {
  border-radius: 20px;
}

/* Дашборды: акцент выбранного — почти чёрный, подложки — тёплые */
.crm-warm .dash-warm {
  --accent-bg: #FBEFE4;
  --accent-border: #EBD3BC;
}

/* Карточки: без рамки, скругление 20, мягкая тень */
.crm-warm .panel,
.crm-warm .indicator,
.crm-warm .metric,
.crm-warm .table-panel,
.crm-warm .strip {
  border: none;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--warm-shadow);
}

.crm-warm .metric {
  border-radius: 16px;
  padding: 14px 16px 16px;
}

.crm-warm .panel__head,
.crm-warm .todo__head {
  background: transparent;
}

/* Главное число и плашки тренда */
.crm-warm .dash-warm .showcase {
  padding: clamp(18px, 2vw, 26px);
}

.crm-warm .dash-warm .showcase__sum {
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.crm-warm .dash-warm .trend {
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
}

.crm-warm .dash-warm .trend--up {
  background: #E3F4E8;
  color: #1F7A3F;
}

.crm-warm .dash-warm .trend--down {
  background: #FCE5DE;
  color: #B23A1E;
}

/* Плитки-показатели: стрелка — в круглой кнопке */
.crm-warm .dash-warm .indicator__value {
  font-size: 19px;
}

.crm-warm .dash-warm .indicator__chevron {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--warm-sand);
  color: var(--warm-ink);
  font-size: 16px;
}

.crm-warm .dash-warm .indicator:hover {
  box-shadow: 0 1px 2px rgba(29, 33, 23, 0.06), 0 14px 32px rgba(120, 72, 30, 0.12);
}

/* Период графиков и вкладки — чёрная «пилюля» у выбранного */
.crm-warm .dash-warm .owner-home__range {
  border: none;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(29, 33, 23, 0.06);
}

.crm-warm .dash-warm .owner-home__range-item {
  border-radius: 999px;
}

.crm-warm .dash-warm .owner-home__range-item--active {
  background: var(--warm-ink);
  color: #fff;
}

.crm-warm .dash-warm .tabs a[aria-current="page"] {
  color: var(--warm-ink);
}

/* Линия с заливкой: тёмная линия, оранжевая заливка, коралловая точка */
.crm-warm .dash-warm .area-chart__stop-top {
  stop-color: var(--warm-orange);
  stop-opacity: 0.32;
}

.crm-warm .dash-warm .area-chart__stop-bottom {
  stop-color: var(--warm-orange);
  stop-opacity: 0;
}

.crm-warm .dash-warm .area-chart__dot {
  fill: var(--warm-coral);
}

.crm-warm .dash-warm .area-chart__month--current {
  color: var(--warm-coral);
}

/* Колонки: обычные — тауп, выбранная — почти чёрная, идущий месяц —
   оранжевая штриховка, прогноз — светлая штриховка; минус — красный */
.crm-warm .dash-warm .col-chart__bar {
  background: #E2D4C3;
  border-radius: 6px 6px 0 0;
}

.crm-warm .dash-warm .col-chart__bar--base {
  background: var(--warm-sand);
}

.crm-warm .dash-warm .col-chart__col--selected {
  background: #FBEFE4;
}

.crm-warm .dash-warm .col-chart__col--selected .col-chart__bar:not(.col-chart__bar--base) {
  background: var(--warm-ink);
}

.crm-warm .dash-warm .col-chart__col--current .col-chart__bar:not(.col-chart__bar--base) {
  background: repeating-linear-gradient(135deg, var(--warm-orange) 0 3px, #FBD9BC 3px 6px);
}

.crm-warm .dash-warm .col-chart__col--forecast .col-chart__bar:not(.col-chart__bar--base) {
  background: repeating-linear-gradient(135deg, var(--warm-taupe) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px var(--warm-taupe);
}

.crm-warm .dash-warm .col-chart__col--selected .col-chart__bar.col-chart__bar--neg,
.crm-warm .dash-warm .col-chart__bar--neg {
  background: var(--warm-coral);
  opacity: 1;
}

.crm-warm .dash-warm .col-chart__month--selected {
  color: var(--warm-ink);
}

.crm-warm .dash-warm .chart-key::before {
  background: var(--warm-ink);
}

.crm-warm .dash-warm .chart-key--current::before {
  background: repeating-linear-gradient(135deg, var(--warm-orange) 0 3px, #FBD9BC 3px 6px);
}

/* Полосы: «оплачено», старение долга, заполняемость */
.crm-warm .dash-warm .bullet__bar,
.crm-warm .dash-warm .aging-bars__bar,
.crm-warm .dash-warm .dash-aging-table__bar,
.crm-warm .dash-warm .dash-aging__bar {
  background: var(--warm-sand);
  border-radius: 999px;
}

.crm-warm .dash-warm .bullet__bar::-webkit-progress-bar,
.crm-warm .dash-warm .aging-bars__bar::-webkit-progress-bar,
.crm-warm .dash-warm .dash-aging-table__bar::-webkit-progress-bar,
.crm-warm .dash-warm .dash-aging__bar::-webkit-progress-bar {
  background: var(--warm-sand);
}

.crm-warm .dash-warm .bullet__bar::-webkit-progress-value,
.crm-warm .dash-warm .aging-bars__bar::-webkit-progress-value,
.crm-warm .dash-warm .dash-aging__bar::-webkit-progress-value {
  background: var(--warm-ink);
  border-radius: 999px;
}

.crm-warm .dash-warm .bullet__bar::-moz-progress-bar,
.crm-warm .dash-warm .aging-bars__bar::-moz-progress-bar,
.crm-warm .dash-warm .dash-aging__bar::-moz-progress-bar {
  background: var(--warm-ink);
  border-radius: 999px;
}

.crm-warm .dash-warm .bullet--tone-danger .bullet__bar::-webkit-progress-value,
.crm-warm .dash-warm .aging-bars__row--late .aging-bars__bar::-webkit-progress-value {
  background: var(--warm-coral);
}

.crm-warm .dash-warm .bullet--tone-danger .bullet__bar::-moz-progress-bar,
.crm-warm .dash-warm .aging-bars__row--late .aging-bars__bar::-moz-progress-bar {
  background: var(--warm-coral);
}

/* Таблицы — шапка без серой подложки */
.crm-warm .table thead th {
  background: #fff;
}

.crm-warm .dash-warm .chart-key--forecast::before {
  background: repeating-linear-gradient(135deg, var(--warm-taupe) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px var(--warm-taupe);
}