/* ============================================================================
   ServiceCRM — глобальный тематический слой (iOS-clean, светлая тема)
   2026-05-24

   ЦЕЛЬ: освежить вид всего приложения «как нативное iOS-приложение», не меняя
   разметку и НЕ влияя на производительность. Только внешний вид: цвета, тени,
   скругления, мягкие фокус-кольца, frosted-навигация. Никакого JS, никаких
   изменений позиционирования/размеров, ломающих layout.

   Палитра и токены продолжают язык orders_premium.css (slate #0f172a / #64748b,
   мягкие тени rgba(15,23,42,…), радиус 16-18px, синий акцент #0d6efd) — чтобы
   уже-современная карточка заказа и остальное приложение выглядели единообразно.

   КЕШ: файл НОВЫЙ → доезжает до всех сразу (не упирается в immutable-30д на
   правку существующих CSS). На будущие правки ЭТОГО файла — бить ?v= в base.html.
   ОТКАТ: убрать <link> на theme.css в base.html + kill -HUP gunicorn.
   ============================================================================ */

:root {
  /* — Bootstrap-переменные: глобальное скругление (круглее = современнее) — */
  --bs-border-radius:      .7rem;    /* было .375rem */
  --bs-border-radius-sm:   .5rem;
  --bs-border-radius-lg:   1rem;
  --bs-border-radius-xl:   1.25rem;
  --bs-border-radius-2xl:  1.75rem;
  --bs-border-radius-pill: 999px;

  /* — нейтрали (тёплый slate) — */
  --bs-body-color:       #0f172a;
  --bs-secondary-color:  #64748b;
  --bs-border-color:     #e6e9f0;
  --bs-link-color-rgb:   13, 110, 253;

  /* — собственные токены — */
  --scrm-bg:           #f4f5f8;
  --scrm-text:         #0f172a;
  --scrm-muted:        #64748b;
  --scrm-border:       #e6e9f0;
  --scrm-card-radius:  18px;
  --scrm-shadow-xs:    0 1px 2px rgba(15,23,42,.04);
  --scrm-shadow-sm:    0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.05);
  --scrm-shadow:       0 6px 22px rgba(15,23,42,.08);
  --scrm-shadow-hover: 0 12px 30px rgba(15,23,42,.12);
  --scrm-accent:       #0d6efd;
  --scrm-accent-soft:  rgba(13,110,253,.10);
}

/* — Базовая типографика: сглаживание как в iOS + аккуратный трекинг — */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.bg-light { background-color: var(--scrm-bg) !important; }

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 { letter-spacing: -.011em; }

/* ============================================================================
   NAVBAR — синий бренд, но богаче: лёгкий градиент + мягкая тень
   ============================================================================ */
.navbar.bg-primary {
  background: linear-gradient(135deg, #2c7bff 0%, #0d6efd 52%, #0a58ca 100%) !important;
  box-shadow: 0 2px 16px rgba(13, 110, 253, .22);
}
.navbar-brand.fw-semibold { letter-spacing: -.02em; font-weight: 700; }

/* ============================================================================
   КАРТОЧКИ — крупнее радиус, мягкая многослойная тень
   ============================================================================ */
.card {
  border-radius: var(--scrm-card-radius);
  border-color: var(--scrm-border);
}
.shadow-sm { box-shadow: var(--scrm-shadow-sm) !important; }
.shadow    { box-shadow: var(--scrm-shadow) !important; }

/* NB: намеренно НЕ форсируем рамку на .card.border-0 — иначе !important перебил бы
   цветные акценты border-start/border-3 (паттерн статус-полосок по всему приложению).
   Мягкой тени на светлом фоне достаточно для «плавающего» вида. */

@media (hover: hover) {
  .card.shadow-sm { transition: box-shadow .18s ease, transform .18s ease; }
}

/* ============================================================================
   КНОПКИ — чуть жирнее текст, мягкая тень у основной, аккуратные радиусы
   (инлайн border-radius в шаблонах перебивает — трогаем только без инлайна)
   ============================================================================ */
.btn { font-weight: 500; }
.btn-primary {
  --bs-btn-bg: #0d6efd;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-border-color: #0d6efd;
  box-shadow: 0 4px 12px rgba(13, 110, 253, .20);
}
.btn-primary:hover { box-shadow: 0 6px 16px rgba(13, 110, 253, .26); }
.btn-success { box-shadow: 0 4px 12px rgba(25, 135, 84, .18); }
.btn-danger  { box-shadow: 0 4px 12px rgba(220, 53, 69, .16); }
.btn-outline-secondary {
  --bs-btn-color: #475569;
  --bs-btn-border-color: #cdd5e1;
  --bs-btn-hover-bg: #f1f4f9;
  --bs-btn-hover-border-color: #b6c0d0;
  --bs-btn-hover-color: #0f172a;
}

/* ============================================================================
   ФОРМЫ — мягкое современное фокус-кольцо вместо тяжёлого bootstrap-glow
   ============================================================================ */
.form-control, .form-select {
  border-color: var(--scrm-border);
}
.form-control:focus, .form-select:focus {
  border-color: rgba(13, 110, 253, .45);
  box-shadow: 0 0 0 4px var(--scrm-accent-soft);
}

/* ============================================================================
   БЕЙДЖИ / ЧИПЫ
   ============================================================================ */
.badge { font-weight: 600; letter-spacing: .01em; }
/* мягкий «light»-чип (например, тег сайта) — приятнее серого bootstrap */
.badge.bg-light.text-dark {
  background-color: #eef1f6 !important;
  color: #475569 !important;
}

/* ============================================================================
   ALERTS (Django messages) — мягче, под общий радиус
   ============================================================================ */
.alert { border: 1px solid transparent; border-radius: 14px; }

/* ============================================================================
   НАВИГАЦИЯ — чистый вид, СПЛОШНОЙ фон.
   ⚠️ НИКАКОГО backdrop-filter/blur/transform/will-change на .bottom-nav!
   На iOS любой такой проп промотит fixed-бар в композитный слой → он «съезжает»
   при скролле и открытии клавиатуры. Это уже ломали раньше (transform), теперь
   повторили через blur. Только сплошной фон + бордюр + тень (тень безопасна).
   См. memory/project_bottom_nav_center_jump_fix.
   ============================================================================ */
.bottom-nav {
  background: #ffffff !important;
  border-top: 1px solid #e6e9f0;
  box-shadow: 0 -4px 18px rgba(15, 23, 42, .06);
}
.side-nav {
  background: #ffffff;
  border-right: 1px solid #e6e9f0;
}
.side-nav__item.active,
.bottom-nav__item.active { font-weight: 600; }

/* ============================================================================
   ПЕРЕИСПОЛЬЗУЕМЫЕ ПЛИТКИ СТАТИСТИКИ — тонированные, color-coded
   (web-leads дашборд и где угодно ещё)
   ============================================================================ */
.stat-tile {
  border-radius: 16px;
  padding: 14px 10px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--scrm-border);
  box-shadow: var(--scrm-shadow-xs);
}
.stat-tile__value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--scrm-text);
}
.stat-tile__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--scrm-muted);
  margin-top: 4px;
}
.stat-tile--slate { background: #f1f3f8; border-color: #e6e9f0; }
.stat-tile--blue  { background: #eef4ff; border-color: #dce9ff; }
.stat-tile--blue  .stat-tile__value { color: #1d6ff2; }
.stat-tile--green { background: #e9faf1; border-color: #cdf2dd; }
.stat-tile--green .stat-tile__value { color: #16a34a; }
.stat-tile--red   { background: #fdeef0; border-color: #fbd9de; }
.stat-tile--red   .stat-tile__value { color: #e11d48; }
.stat-tile--amber { background: #fff5e6; border-color: #ffe6bf; }
.stat-tile--amber .stat-tile__value { color: #d97706; }

/* ============================================================================
   ПЕРЕИСПОЛЬЗУЕМЫЕ SEGMENTED-ПИЛЛЫ ФИЛЬТРОВ (iOS-style)
   ============================================================================ */
.seg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--scrm-border);
  background: #fff;
  color: #475569;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.seg-pill:hover { color: #0f172a; border-color: #c8d2e0; }
.seg-pill:active { transform: scale(.96); }
.seg-pill.is-active {
  background: var(--scrm-accent);
  border-color: var(--scrm-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(13, 110, 253, .22);
}
.seg-pill__count {
  font-size: .72rem;
  font-weight: 700;
  opacity: .85;
}