/* === crm-styles.css === */
/**
 * CRM Styles v1
 * Единый файл стилей для кастомизации интерфейса
 * - Цветные иконки навигации
 * - Стили компонента "Интерфейс" (interface-settings.js)
 */

/* ============================================
   НАВИГАЦИЯ — цветные иконки (через JS inline)
   Цвета задаются в interface-settings.js NAV_COLORS
   Здесь только transition для плавности
   ============================================ */

/* Навигация — цвета через CSS переменную --nav-clr
   Высокая специфичность чтобы перебить device-crm.css */
button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr] svg {
    color: var(--nav-clr) !important;
    stroke: var(--nav-clr) !important;
    transition: color 0.2s ease, stroke 0.2s ease;
}

button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr] span:not([style*="absolute"]) {
    color: var(--nav-clr) !important;
    transition: color 0.2s ease;
}

/* Активная кнопка — белый текст и иконка */
button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr].text-white svg,
button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr].bg-indigo-500 svg,
button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr].acc-active svg {
    color: #fff !important;
    stroke: #fff !important;
}

button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr].text-white span,
button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr].bg-indigo-500 span,
button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr].acc-active span {
    color: #fff !important;
}

/* Убираем мерцание при переключении кнопок */
button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr].acc-active {
    transition: none !important;
}
button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr].acc-active svg,
button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr].acc-active span {
    transition: none !important;
}


/* ============================================
   ИНТЕРФЕЙС — компонент настроек
   ============================================ */

#if-custom-panel {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Заголовок */
#if-custom-panel .if-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1e293b;
}

/* Карточка-блок */
#if-custom-panel .if-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
}

/* Подзаголовок */
#if-custom-panel .if-subtitle {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #475569;
}

/* Лейбл */
#if-custom-panel .if-label {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 6px;
    display: block;
}

/* Инпут */
#if-custom-panel .if-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

#if-custom-panel .if-input:focus {
    border-color: #8b5cf6;
}

/* Подсказка */
#if-custom-panel .if-hint {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

/* Кнопка сохранить */
#if-custom-panel .if-btn {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

#if-custom-panel .if-btn:hover {
    opacity: 0.9;
}

#if-custom-panel .if-btn:disabled,
#if-custom-panel .if-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Превью логотипа */
#if-custom-panel .if-preview-box {
    padding: 16px;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
    text-align: center;
    margin-bottom: 12px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Слайдер */
#if-custom-panel .if-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #e2e8f0, #8b5cf6);
    outline: none;
    cursor: pointer;
}

#if-custom-panel .if-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #8b5cf6;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4);
}

#if-custom-panel .if-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #8b5cf6;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4);
}

/* Сетка 2 колонки */
#if-custom-panel .if-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Предупреждение */
#if-custom-panel .if-warning {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: #92400e;
    margin-bottom: 12px;
}

/* Превью логотипа входа */
#if-custom-panel .if-login-logo {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Превью логотипа навбара */
#if-custom-panel .if-nav-logo {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

/* Статус сохранения */
#if-custom-panel .if-save-status {
    text-align: right;
    margin-top: 8px;
    font-size: 13px;
    color: #22c55e;
}

/* Бейдж уведомлений — белый текст */
button.flex-shrink-0.flex.flex-col.items-center[data-nav-clr] span[style*="absolute"] {
    color: #fff !important;
}

/* === Тёмная тема: Настройки → Интерфейс === */
html.dark #if-custom-panel .if-card { background:#1b1c28 !important; border-color:#2f3142 !important; }
html.dark #if-custom-panel .if-title { color:#e7e7ec !important; }
html.dark #if-custom-panel .if-subtitle { color:#cfd2e0 !important; }
html.dark #if-custom-panel .if-label { color:#9aa0b4 !important; }
html.dark #if-custom-panel .if-hint { color:#76767f !important; }
html.dark #if-custom-panel .if-input { background:#232533 !important; border-color:#3a3c4f !important; color:#e7e7ec !important; }
html.dark #if-custom-panel .if-nav-logo { color: #e7e7ec !important; }
html.dark #if-custom-panel .if-preview-box { border-color: #3a3c4f !important; }
html.dark #if-custom-panel .if-warning { background: #26220f !important; border-color: #4a3d1a !important; color: #fbbf24 !important; }

/* === CRM_LOGO_GRID_FIX === блоки «Логотип (текст)» друг под другом, без рассинхрона === */
#if-custom-panel .if-grid2 { grid-template-columns: 1fr; }

/* === device-crm.css === */
@charset "UTF-8";
/* ================================================
   Device CRM — Unified Design System
   Version: 1.0
   ================================================ */

/* ---- Design Tokens ---- */
:root {
  --primary: #6366f1;
  --primary-hover: #5558e6;
  --primary-light: #eef2ff;
  --accent: #8b5cf6;
  --success: #10b981;
  --success-light: #ecfdf5;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --danger: #ef4444;
  --danger-light: #fef2f2;
  --info: #3b82f6;
  --info-light: #eff6ff;

  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-input: #f8fafc;
  --bg-hover: #f1f5f9;

  --text: #334155;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  --border: #e2e8f0;
  --border-light: #f1f5f9;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.06);
  --shadow-xl: 0 8px 30px rgba(0,0,0,0.08);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-success: linear-gradient(135deg, #10b981, #059669);
  --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);

  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  background-attachment: fixed;
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
}

/* Force font on ALL elements */
html, body, input, button, select, textarea, div, span, p,
h1, h2, h3, h4, h5, h6, a, label, th, td, li {
  font-family: var(--font) !important;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  font-weight: 700;
  line-height: 1.3;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  color: var(--primary-hover);
}

/* ---- Forms ---- */
input, select, textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  background: var(--bg-card);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

/* ---- Buttons ---- */
.crm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1.4;
}
.crm-btn-primary {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.crm-btn-primary:hover {
  box-shadow: 0 4px 16px rgba(99,102,241,0.35);
  transform: translateY(-1px);
}
.crm-btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
}
.crm-btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
  color: var(--primary);
}
.crm-btn-success {
  background: var(--gradient-success);
  color: var(--text-inverse);
}
.crm-btn-danger {
  background: var(--gradient-danger);
  color: var(--text-inverse);
}
.crm-btn-sm {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
}
.crm-btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: var(--radius-sm);
}

/* ---- Cards ---- */
.crm-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  transition: box-shadow var(--transition);
}
.crm-card:hover {
  box-shadow: var(--shadow-md);
}
.crm-card-flat {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1rem;
}

/* ---- Stat Cards (Dashboard) ---- */
.crm-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.crm-stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.crm-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.crm-stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.crm-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.crm-stat-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* ---- Status Chips (Filter Bar) ---- */
.crm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
}
.crm-chip-active {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.crm-chip:hover {
  transform: translateY(-1px);
}
.crm-chip-count {
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(255,255,255,0.3);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-full);
  min-width: 1.25rem;
  text-align: center;
}

/* ---- Navigation ---- */
.crm-nav {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.crm-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  min-width: 4.5rem;
  text-align: center;
  border: none;
  background: transparent;
  flex-shrink: 0;
}
.crm-nav-item:hover {
  background: var(--bg-hover);
  color: var(--primary);
}
.crm-nav-item-active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}
.crm-nav-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

/* ---- Order Cards ---- */
.crm-order {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
  transition: all var(--transition);
  cursor: pointer;
}
.crm-order:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}

/* ---- Badges ---- */
.crm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- FAB Menu ---- */
.crm-fab {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 9998;
}
.crm-fab-btn {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  color: var(--text-inverse);
  font-size: 1.625rem;
  box-shadow: 0 6px 24px rgba(99,102,241,0.4);
  transition: all 0.3s cubic-bezier(0.68,-0.55,0.27,1.55);
  position: relative;
  z-index: 9999;
}
.crm-fab-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(99,102,241,0.5);
}
.crm-fab-item {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  color: var(--text-inverse);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transform: translateY(0) scale(0.3);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.68,-0.55,0.27,1.55);
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
}
.crm-fab-label {
  position: absolute;
  right: 3.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,23,42,0.85);
  color: var(--text-inverse);
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.crm-fab-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9997;
}

/* ---- Toast / Tips ---- */
.crm-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 9990;
  max-width: 22rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  box-shadow: var(--shadow-xl);
  transform: translateY(1.25rem);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.crm-toast.show {
  transform: translateY(0);
  opacity: 1;
}
.crm-toast-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}
.crm-toast-text {
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.5;
}
.crm-toast-close {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.125rem;
  line-height: 1;
}
.crm-toast-dismiss {
  border: none;
  background: none;
  font-size: 0.6875rem;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.7;
  text-decoration: underline;
}

/* ---- Toggle Switch ---- */
.crm-toggle {
  width: 2.75rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  position: relative;
  transition: background var(--transition);
  background: var(--border);
  flex-shrink: 0;
}
.crm-toggle.on {
  background: var(--success);
}
.crm-toggle-knob {
  position: absolute;
  top: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--bg-card);
  transition: left var(--transition);
  left: 0.1875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.crm-toggle.on .crm-toggle-knob {
  left: 1.4375rem;
}

/* ---- Animations ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-fadeIn { animation: fadeIn 0.3s ease; }
.animate-slideUp { animation: slideUp 0.3s ease; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ---- Sticky header ---- */
.sticky.top-0 {
  z-index: 60 !important;
}

/* ---- Hide old FAB buttons ---- */
.fixed.flex.flex-col.gap-3[style*="z-index"] > button {
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
.fixed.flex.flex-col.gap-3[style*="z-index"] {
  gap: 0 !important;
}

/* ---- Force light theme — complete override ---- */
.bg-gray-900, .bg-slate-900:not(.fixed.inset-0), .bg-slate-800,
[class*="bg-gray-900"], [class*="bg-slate-900"]:not(.fixed.inset-0),
[class*="bg-gray-800"], [class*="bg-slate-800"] {
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
}
.bg-gray-800, .bg-slate-700, [class*="bg-gray-700"] {
  background-color: var(--bg-card) !important;
}
/* Fix text colors for light theme */
.text-white:not(.crm-fab-btn):not([style*="gradient"]):not([class*="rounded-full"]):not(.bg-indigo-500):not(button) { color: var(--text) !important; }
.text-gray-100, .text-gray-200, .text-gray-300, .text-slate-100, .text-slate-200 { color: var(--text) !important; }
.text-gray-400, .text-slate-400 { color: var(--text-secondary) !important; }
.text-gray-500, .text-slate-500 { color: var(--text-secondary) !important; }
.border-gray-700, .border-gray-600, .border-slate-700, .border-slate-600 { border-color: var(--border) !important; }
.bg-slate-700\/40, [class*="bg-slate-700"] { background-color: var(--bg-hover) !important; }

/* Header/top bar — force light on everything with inline gradients */
.sticky.top-0, header, [class*="sticky"][class*="top-0"] {
  background: var(--bg-card) !important;
  background-image: none !important;
  border-bottom: none !important;
  color: var(--text) !important;
}
/* Override ANY element with inline gradient background */
/* But keep gradient on buttons and specific UI elements */
button[style*="gradient"], [class*="bg-gradient"], [class*="from-"] {
  /* These are OK - keep their colors */
}
.sticky.top-0 *, header * {
  color: var(--text) !important;
}
.sticky.top-0 button, header button {
  color: var(--text) !important;
}
/* Override the main top bar specifically */
#root > div:not([style*="fixed"]) > div:first-child {
  background: var(--bg-card) !important;
  background-image: none !important;
}
/* Override navigation container background */
#root > div:not([style*="fixed"]) > div:first-child > div {
  background: var(--bg-card) !important;
  background-image: none !important;
}

/* Navigation bar — clean light style */
nav, [role="navigation"] {
  background: var(--bg-card) !important;
}

/* Override inline dark backgrounds on body */
body[style*="background"] {
  background: var(--bg) !important;
}

/* Fix gradient buttons — keep their colors (scoped to buttons/links only) */
button[class*="bg-gradient"], button[style*="gradient"], a[class*="bg-gradient"], a[style*="gradient"] {
  color: #fff !important;
}
/* Поставщики — чёрный текст на жёлтом фоне */
header button[style*="gradient"][style*="253, 230"] { color: #1e293b !important; }
header button[style*="gradient"][style*="254, 243"] { color: #1e293b !important; }
button[class*="bg-indigo"]:not([class*="bg-indigo-50"]):not([class*="bg-indigo-100"]), button[class*="bg-purple"],
button[class*="bg-violet"], button[class*="bg-green"]:not([class*="bg-green-50"]):not([class*="bg-green-100"]) {
  color: #fff !important;
}

/* Shadow cleanup — softer everywhere */
.shadow-lg { box-shadow: var(--shadow) !important; }
.shadow-xl { box-shadow: var(--shadow-md) !important; }
.shadow-2xl { box-shadow: var(--shadow-lg) !important; }

/* ---- Global hover smoothness (iphoster-inspired) ---- */
button, a, [role="button"], .cursor-pointer {
  transition: all 0.25s ease !important;
}
button:active, a:active, [role="button"]:active {
  transform: scale(0.98);
}

/* ---- Pleasant card hover effect ---- */
.rounded-2xl, .rounded-xl, .rounded-lg {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.rounded-2xl:hover, .rounded-xl:hover {
  box-shadow: var(--shadow-md);
}

/* ---- Soft selection highlight ---- */
::selection {
  background: rgba(99,102,241,0.15);
  color: inherit;
}

/* ---- Input placeholders consistency ---- */
::-webkit-input-placeholder { color: var(--text-muted); opacity: 0.8; }
::-moz-placeholder { color: var(--text-muted); opacity: 0.8; }

/* ---- Top header bar ---- */
.crm-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.92);
}

/* ---- Modal / Dialog overlay ---- */
.crm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.crm-modal {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 32rem;
  width: 95%;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}
.crm-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crm-modal-body {
  padding: 1.5rem;
}

/* ---- Tab bar (settings, etc.) ---- */
.crm-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.crm-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.25s ease;
}
.crm-tab:hover {
  color: var(--primary);
}
.crm-tab-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* ---- Table ---- */
.crm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.crm-table th {
  background: var(--bg);
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.crm-table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border-light);
}
.crm-table tr:hover td {
  background: var(--bg-hover);
}

/* ---- Loading skeleton ---- */
.crm-skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, var(--bg-hover) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Empty state ---- */
.crm-empty {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
}
.crm-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}
.crm-empty-text {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* ================================================
   MOBILE RESPONSIVE
   ================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .crm-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  body {
    font-size: 0.9375rem;
  }

  .crm-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .crm-stat-card {
    padding: 0.75rem;
  }
  .crm-stat-value {
    font-size: 1.25rem;
  }

  .crm-nav {
    border-radius: var(--radius);
    padding: 0.5rem;
    gap: 0.125rem;
  }
  .crm-nav-item {
    min-width: 3.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.625rem;
  }
  .crm-nav-icon {
    font-size: 1rem;
  }

  .crm-card {
    border-radius: var(--radius);
    padding: 1rem;
  }

  .crm-fab-btn {
    width: 3rem;
    height: 3rem;
    font-size: 1.375rem;
  }
  .crm-fab-item {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }

  .crm-toast {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
  }

  /* Hide desktop elements on mobile */
  .hide-mobile {
    display: none !important;
  }
}

/* Bottom navigation for mobile */
@media (max-width: 640px) {
  .crm-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
  }
  .crm-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.625rem;
    color: var(--text-muted);
    padding: 0.25rem 0.75rem;
    border: none;
    background: none;
    cursor: pointer;
  }
  .crm-bottom-nav-item.active {
    color: var(--primary);
  }
  .crm-bottom-nav-icon {
    font-size: 1.25rem;
  }

  /* Make room for bottom nav */
  main, #root {
    padding-bottom: 4rem;
  }
}

/* Large screens */
@media (min-width: 1280px) {
  .crm-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Mobile: Header compact ---- */
@media (max-width: 640px) {
  /* Compact top search bar */
  .sticky.top-0 {
    padding: 0.5rem 0.75rem !important;
  }
  .sticky.top-0 input[type="text"],
  .sticky.top-0 input[type="search"] {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
  }

  /* Navigation icons — compact grid */
  .crm-nav, .flex-shrink-0.flex.flex-col.items-center {
    min-width: 3.5rem !important;
    padding: 0.25rem 0.375rem !important;
    font-size: 0.5625rem !important;
  }

  /* Filter chips — wrap instead of scroll */
  .overflow-visible {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }
  .overflow-visible > button,
  .overflow-visible > div {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
  }

  /* Order cards — compact */
  .rounded-2xl {
    border-radius: var(--radius) !important;
    padding: 0.75rem !important;
    margin-bottom: 0.375rem !important;
  }

  /* Settings tabs grid — stack vertically */
  .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.375rem !important;
  }

  /* Modal/form max width */
  .max-w-7xl, .max-w-6xl, .max-w-5xl {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Print form — stack */
  .grid[style*="grid-template-columns: 1fr 1fr"],
  div[style*="display: grid"][style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Mobile: Order card layout ---- */
@media (max-width: 768px) {
  /* Order row — stack vertically */
  .flex.items-center.gap-3 > * {
    flex-shrink: 1;
  }

  /* Dashboard cards — 2 cols */
  .crm-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem;
  }
  .crm-stat-value {
    font-size: 1.125rem;
  }
  .crm-stat-label {
    font-size: 0.625rem;
  }

  /* Main content padding for bottom nav */
  body {
    padding-bottom: 4.5rem;
  }
}

/* ---- Mobile: Very small screens ---- */
@media (max-width: 400px) {
  .crm-stat-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .crm-stat-card {
    padding: 0.625rem;
  }
  .crm-stat-value {
    font-size: 1rem;
  }

  .crm-fab {
    bottom: 5rem;
    right: 1rem;
  }
  .crm-fab-btn {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
  }
}

/* ---- Bottom Navigation (mobile) ---- */
.crm-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .crm-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    justify-content: space-around;
    align-items: center;
    padding: 0.375rem 0;
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
  }
  .crm-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .crm-bottom-nav-item.active {
    color: var(--primary);
    font-weight: 600;
  }
  .crm-bottom-nav-item:active {
    transform: scale(0.95);
  }
  .crm-bottom-nav-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .crm-bottom-nav-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
  }

  /* Hide desktop top nav on mobile */
  .crm-hide-mobile-nav {
    display: none !important;
  }

  /* FAB moves up above bottom nav */
  .crm-fab {
    bottom: 5rem !important;
  }
}

/* ---- Tablet tweaks ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  .crm-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.grid-cols-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---- Smooth page transitions ---- */
main, #root > div {
  animation: fadeIn 0.2s ease;
}

/* ---- Header refinement ---- */
/* Top search bar — clean, bordered */
#root > div:not([style*="fixed"]) > div:first-child,
.sticky.top-0.bg-white,
div[class*="sticky"][class*="top-0"] {
  background: var(--bg-card) !important;
  background-image: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* "Поставщики" button — softer (any green button in header area) */
/* Исключаем фиолетовые/индиго кнопки (Поставщики теперь indigo gradient) */
button[class*="bg-green"], button[class*="bg-emerald"],
button[style*="#22c55e"], button[style*="#10b981"],
button[style*="rgb(34, 197, 94)"], button[style*="rgb(16, 185, 129)"] {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(99,102,241,0.15) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
/* Keep status buttons green */
.overflow-visible button[class*="bg-green"],
.overflow-visible button[class*="bg-emerald"] {
  background: #22c55e !important;
  color: #fff !important;
  border: none !important;
}

/* ---- Logo — text-based ---- */
.crm-logo-text {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.5px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.crm-logo-text span {
  color: var(--text);
}

/* ---- Navigation overflow fix ---- */
/* Prevent nav items from being cut off on right */
.flex.overflow-x-auto, .flex[style*="overflow"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.flex.overflow-x-auto::-webkit-scrollbar {
  display: none;
}
/* Nav container — proper scroll padding */
.rounded-2xl > .flex.gap-1,
.bg-white > .flex.gap-1 {
  padding-right: 1rem !important;
}

/* ---- Order cards — refined ---- */
/* Order number — bold, primary color */
div[class*="rounded-2xl"] span[class*="font-bold"][class*="text-lg"],
div[class*="rounded-2xl"] .text-lg.font-bold {
  color: var(--primary) !important;
  font-weight: 800 !important;
}
/* Order price — right aligned, accent color */
div[class*="rounded-2xl"] span[class*="font-bold"][class*="text-right"] {
  color: var(--text) !important;
}
/* Days counter chip */
div[class*="rounded-2xl"] span[class*="text-xs"][class*="text-gray"] {
  color: var(--text-muted) !important;
}
/* Order card subtle left accent */
.crm-stat-grid + div + div > div[class*="rounded-2xl"] {
  border-left: 3px solid transparent;
  transition: border-color 0.2s;
}
.crm-stat-grid + div + div > div[class*="rounded-2xl"]:hover {
  border-left-color: var(--primary);
}

/* ---- Navigation icons — monochrome ---- */
/* Make all nav icons unified purple/gray instead of rainbow */
.flex-shrink-0.flex.flex-col.items-center svg,
nav svg, [role="navigation"] svg {
  stroke: var(--text-secondary) !important;
  color: var(--text-secondary) !important;
}
/* Active nav item icon */
.flex-shrink-0.flex.flex-col.items-center.bg-indigo-500 svg,
.flex-shrink-0.flex.flex-col.items-center[class*="bg-indigo"] svg {
  stroke: white !important;
  color: white !important;
}
/* Nav item text — unified color */
.flex-shrink-0.flex.flex-col.items-center span:last-child {
  color: var(--text-secondary) !important;
  font-size: 0.6875rem !important;
}
.flex-shrink-0.flex.flex-col.items-center.text-white span:last-child,.flex-shrink-0.flex.flex-col.items-center.bg-indigo-500 span:last-child {  color: #fff !important;}
/* Active nav item — keep purple bg but softer */
.flex-shrink-0.flex.flex-col.items-center[class*="bg-indigo"],
.flex-shrink-0.flex.flex-col.items-center .bg-indigo-500 {
  background: var(--primary) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25) !important;
}

/* ---- Status filter chips — softer colors ---- */
/* Keep colors but make them more pastel/muted */
.overflow-visible button[class*="rounded-full"],
.overflow-visible > button {
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
.overflow-visible button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* ---- Order cards — cleaner ---- */
/* Remove colored left borders, use subtle hover */
.rounded-2xl[class*="border-l-4"],
div[style*="border-left: 4px"] {
  border-left: 3px solid var(--primary-light) !important;
}
/* Order card hover */
.rounded-2xl:has(button):hover {
  box-shadow: var(--shadow-md) !important;
}

/* ---- Action buttons — refined ---- */
/* "Выдать" button — keep green but softer */
button[class*="bg-green-500"], button[class*="bg-green-600"] {
  background: var(--gradient-success) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 8px rgba(16,185,129,0.25) !important;
}
/* "Удалить" button — softer red */
button[class*="bg-red-500"], button[class*="bg-red-600"] {
  background: var(--gradient-danger) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 8px rgba(239,68,68,0.2) !important;
}

/* ---- Stat card decorative blobs — hide ---- */
.crm-stat-card div[style*="border-radius:50%"],
.crm-stat-card div[style*="position:absolute"],
div[id="new-dashboard"] div[style*="border-radius:50%"] {
  display: none !important;
}

/* ---- Avatar circles — consistent ---- */
.rounded-full[class*="bg-gradient-to-br"] {
  background: var(--gradient-primary) !important;
}

/* ---- Input fields — refined ---- */
input[class*="rounded-xl"], input[class*="rounded-lg"],
select[class*="rounded-xl"], select[class*="rounded-lg"] {
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
input[class*="rounded-xl"]:focus, input[class*="rounded-lg"]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
}

/* ---- Profile dropdown — clean ---- */
div[class*="rounded-2xl"][class*="shadow-xl"][class*="bg-white"] {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ---- Global improvements ---- */
/* Smooth focus ring for accessibility */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Remove default button outlines */
button:focus {
  outline: none;
}

/* Better link underlines */
a:not([class]) {
  text-decoration-color: rgba(99,102,241,0.3);
  text-underline-offset: 2px;
}

/* ---- Print ---- */
@media print {
  .crm-fab, .crm-toast, .crm-bottom-nav {
    display: none !important;
  }
}

/* Обращения: фильтры горизонтально */
.flex.flex-wrap.gap-2 > input[class*='min-w-'],
.flex.flex-wrap.gap-2 > select.rounded-xl {
    width: auto !important;
    flex: 1 1 180px !important;
    max-width: 250px !important;
}

/* Обращения: fix empty model div showing as circle */
.flex.gap-2 > div:not([class]) {
    min-width: 120px !important;
}

/* Активные табы с indigo фоном — белый текст */
button.bg-indigo-50.text-indigo-700 {
    background-color: #6366f1 !important;
    color: #fff !important;
}

/* Modal overlay — тёмная полупрозрачная подложка */
.fixed.inset-0.z-50 {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px) !important;
}

/* Отчёты — горизонтальный интервал дат */
.bg-white.rounded-2xl.shadow-sm .flex.flex-wrap.items-center.gap-2 {
  flex-wrap: nowrap !important;
}
.bg-white.rounded-2xl.shadow-sm .flex.flex-wrap.items-center.gap-2 input[type='datetime-local'] {
  flex: 1 1 auto !important;
  max-width: none !important;
}

/* Отчёты — активная кнопка периода */
button.bg-purple-100 {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}

/* ---- Settings tabs — unified purple active style ---- */
.grid.grid-cols-4.gap-4 button[class*="bg-"][class*="-500"]:not(.bg-white):not([class*="overflow"]) {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border: 0.8px solid rgba(99,102,241,0.15) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* FAB items must be above the overlay */
.crm-fab-item {
  z-index: 10001 !important;
}
.crm-fab-btn {
  z-index: 10001 !important;
}

/* Print button icon — dark stroke on light theme */
button.bg-slate-700,
button.bg-slate-800 {
  color: #1e293b !important;
}
button.bg-slate-700 svg,
button.bg-slate-700 svg path,
button.bg-slate-800 svg,
button.bg-slate-800 svg path {
  stroke: #1e293b !important;
  color: #1e293b !important;
}


/* Hide История panel in order edit form — 3rd column in grid */
.grid.grid-cols-1.lg\:grid-cols-3.gap-3:not(.md\:grid-cols-2) > div:nth-child(3) {
  display: none !important;
}
.grid.grid-cols-1.lg\:grid-cols-3.gap-3:not(.md\:grid-cols-2) {
  grid-template-columns: 1fr 1fr !important;
}

/* Касса: белый текст на активной кнопке навигации */
button.bg-indigo-500 > span,
button.border-indigo-500 > span,
button.text-white > span {
    color: #fff !important;
}

/* Fix: nav active button text white + remove double border */
[class*='overflow-x-auto'] button.text-white span {
    color: #fff !important;
}
[class*='overflow-x-auto'] {
    border: none !important;
    box-shadow: none !important;
}

/* ─── Скругление контейнеров кассы ─────────────────── */
#cash-register-app > div {
  border-radius: 1rem !important;
  overflow: hidden;
}
#cash-register-app > div > div[style*='border'] {
  border-radius: 1rem !important;
}

/* ─── Стилизация чекбоксов ─────────────────────────── */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
input[type="checkbox"]:checked {
  background: #6366f1;
  border-color: #6366f1;
}
input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
input[type="checkbox"]:hover {
  border-color: #6366f1;
}

/* ─── Стилизация radio buttons ─────────────────────── */
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
input[type="radio"]:checked {
  border-color: #6366f1;
  background: #fff;
}
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6366f1;
}
input[type="radio"]:hover {
  border-color: #6366f1;
}

/* ─── Скрыть виджет поддержки внутри модалок ────────── */
.fixed .crm-support-widget,
div[style*="z-index"][style*="fixed"] ~ .crm-support-widget {
  display: none !important;
}

/* ─── Fix: input flex-1 сжимается до кружка ────────── */
.flex > input.flex-1,
.flex > input[class*="flex-1"] {
  min-width: 120px !important;
}
/* Форма продажи: оба поля в ряд */
.flex.gap-2.mb-3 > input {
  min-width: 0;
  flex-shrink: 1;
}
.flex.gap-2.mb-3 > input.flex-1,
.flex.gap-2.mb-3 > input[class*="flex-1"] {
  min-width: 140px !important;
  flex: 1 1 auto !important;
}

}


/* ─── Fix: числа не вылезают за карточки статистики ── */
.flex.gap-3.overflow-x-auto > div,
.flex.gap-4.overflow-x-auto > div,
.grid > div[class*="rounded"] {
  overflow: hidden;
  min-width: 0;
}
.text-2xl, .text-3xl, .text-xl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Fix: карточки статистики — число внутри карточки */
.crm-stat-grid > div,
.flex.gap-3 > div[class*="rounded"],
.flex.gap-4 > div[class*="rounded"],
.grid.grid-cols-2 > div,
.grid.grid-cols-3 > div,
.grid.grid-cols-6 > div {
  overflow: hidden !important;
  word-break: break-all;
}
.crm-stat-grid > div > div:first-child,
.flex.gap-3 > div > div > span.font-bold,
.flex.gap-3 > div span[class*="text-2xl"],
.flex.gap-3 > div span[class*="text-xl"],
.flex.gap-4 > div span[class*="text-2xl"],
.flex.gap-4 > div span[class*="text-xl"] {
  font-size: clamp(12px, 2.5vw, 22px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  max-width: 100% !important;
}

/* ─── Карточки статистики: жёсткое ограничение ─────── */
.flex.gap-3.overflow-x-auto > div,
.flex.gap-4.overflow-x-auto > div {
  max-width: 200px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.flex.gap-3.overflow-x-auto > div *,
.flex.gap-4.overflow-x-auto > div * {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.flex.gap-3.overflow-x-auto > div:hover,
.flex.gap-4.overflow-x-auto > div:hover {
  overflow: hidden !important;
  max-width: 200px !important;
  transform: none !important;
}

/* ─── Авто-уменьшение длинных чисел в карточках ────── */
.flex.gap-3.overflow-x-auto > div .font-bold,
.flex.gap-4.overflow-x-auto > div .font-bold {
  font-size: clamp(11px, 1.8vw, 20px) !important;
  white-space: nowrap !important;
}

/* ─── Принудительное уменьшение для длинных значений ─ */
.flex.gap-3.overflow-x-auto > div,
.flex.gap-4.overflow-x-auto > div {
  container-type: inline-size;
}
@container (max-width: 180px) {
  .font-bold { font-size: 14px !important; }
}
@container (max-width: 140px) {
  .font-bold { font-size: 12px !important; }
}

/* ─── Белый текст на фиолетовых кнопках ────────────── */
a[style*="background"][style*="7c3aed"],
a[style*="background"][style*="6366f1"],
button[style*="background"][style*="7c3aed"],
button[style*="background"][style*="6366f1"] {
  color: #fff !important;
}

/* ─── Белый текст на ВСЕХ фиолетовых/индиго кнопках и ссылках ─ */



/* ─── Белый текст только на кнопках с фиолетовым ФОНОМ ─ */
a[style*="background"][style*="6366f1"],
a[style*="background"][style*="7c3aed"],
a[style*="background"][style*="6d28d9"],
a[style*="background"][style*="8b5cf6"] {
  color: #fff !important;
}

/* ─── Белый текст: кнопки с background-color или gradient ─ */
a[style*="background-color: #6366f1"],
a[style*="background-color: #7c3aed"],
a[style*="background-color:#6366f1"],
a[style*="background-color:#7c3aed"],
a[style*="background: linear-gradient"],
a[style*="background:linear-gradient"],
a[style*="background: #6366f1"],
a[style*="background: #7c3aed"],
a[style*="background:#6366f1"],
a[style*="background:#7c3aed"] {
  color: #fff !important;
}

/* ---- Stat card: force icon+value on same row (override stale cache) ---- */
#new-dashboard .crm-stat-card > div:first-child { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; flex-wrap: nowrap !important; }
#new-dashboard .crm-stat-card > div:first-child > div:last-child { font-size: 24px !important; font-weight: 800 !important; line-height: 1.1 !important; white-space: nowrap !important; }
#new-dashboard .crm-stat-card > div:first-child > div:first-child { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; }

/* --- Compact period chips (Сегодня/Неделя/Месяц/Год/Всё время) --- */
.im-period-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 3px 13px !important;
  border: 1.5px solid transparent !important;
  border-radius: 11px !important;
  background: #f3f4f6 !important;
  color: #374151 !important;
  font: 600 13px/1.2 inherit !important;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all .15s ease;
  outline: none;
  min-height: 28px;
}
.im-period-chip:hover {
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
}
.im-period-chip[data-period-active='1'] {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.35), 0 0 0 3px rgba(99,102,241,0.18) !important;
  transform: translateY(-1px);
}

/* ===== Audit log (Журнал действий) — brand-aligned filter pills ===== */
/* Entity filter pills (Все/Заказы/Пользователи/...) */
.flex.flex-wrap.items-center.gap-2.mb-4 > button.bg-blue-500 {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.32) !important;
    transform: translateY(-1px);
}
.flex.flex-wrap.items-center.gap-2.mb-4 > button {
    transition: transform .12s, box-shadow .15s, background .15s !important;
}
.flex.flex-wrap.items-center.gap-2.mb-4 > button:not(.bg-blue-500):hover {
    transform: translateY(-1px);
}
/* Period segmented pill (Все/Сегодня/7 дней/Месяц) — active state */
.inline-flex.items-center.rounded-full.border > button.bg-gray-900 {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
}

/* DBHealth «Обновить» button */
.crm-dbhealth-page button {
    transition: transform .12s, box-shadow .15s !important;
}
.crm-dbhealth-page button:hover {
    transform: translateY(-1px);
}

/* ===== Suppliers / Search page polish ===== */
.crm-suppliers-page input[type="text"],
.crm-suppliers-page input[type="password"],
.crm-suppliers-page input[type="email"],
.crm-suppliers-page input[type="number"],
.crm-suppliers-page select {
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    font-size: 14px !important;
    color: #0f172a !important;
    transition: border-color .15s, box-shadow .15s !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03) !important;
}
.crm-suppliers-page input:focus,
.crm-suppliers-page select:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.18) !important;
    outline: none !important;
}
.crm-suppliers-page label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}
/* Narrow inputs like наценка (markup percent) */
.crm-suppliers-page input[type="number"][style*="width"] {
    height: 38px !important;
    padding: 0 10px !important;
    text-align: center !important;
}
/* All "Сохранить" buttons → uniform brand purple */
.crm-suppliers-page button {
    transition: transform .12s, box-shadow .15s, background .15s !important;
}
.crm-suppliers-page button:not([disabled]):hover {
    transform: translateY(-1px);
}
/* The per-supplier "Сохранить" buttons use inline background:sup.color — override */
.crm-suppliers-page button[class*="rounded-lg"][class*="text-white"][class*="font-bold"] {
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.32) !important;
    border: none !important;
    font-weight: 700 !important;
}
.crm-suppliers-page button[class*="rounded-lg"][class*="text-white"][class*="font-bold"]:hover {
    box-shadow: 0 6px 18px rgba(99,102,241,0.42) !important;
}
/* "+ Добавить поставщика" */
.crm-suppliers-page button[class*="bg-green"],
.crm-suppliers-page button[class*="bg-emerald"] {
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg,#10b981,#059669) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(16,185,129,0.28) !important;
    border: none !important;
    font-weight: 700 !important;
}

/* ===== Integrations page polish — поля и кнопки в едином стиле =====
   Scope: .crm-integrations-page (set in settings-tab-integrations.jsx). */
.crm-integrations-page input[type="text"],
.crm-integrations-page input[type="password"],
.crm-integrations-page input[type="email"],
.crm-integrations-page input[type="tel"],
.crm-integrations-page input[type="number"],
.crm-integrations-page input[type="url"],
.crm-integrations-page select,
.crm-integrations-page textarea {
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    font-size: 14px !important;
    color: #0f172a !important;
    transition: border-color .15s, box-shadow .15s !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03) !important;
}
.crm-integrations-page textarea {
    height: auto !important;
    min-height: 80px !important;
    padding: 12px 14px !important;
    line-height: 1.5 !important;
}
.crm-integrations-page input:focus,
.crm-integrations-page select:focus,
.crm-integrations-page textarea:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.18) !important;
    outline: none !important;
}
.crm-integrations-page label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    letter-spacing: 0.01em !important;
}

/* «Сохранить настройки» и прочие primary-кнопки */
.crm-integrations-page button[class*="bg-indigo"],
.crm-integrations-page button[class*="bg-violet"],
.crm-integrations-page button[class*="bg-purple"],
.crm-integrations-page button[class*="bg-blue"]:not([class*="bg-blue-100"]):not([class*="bg-blue-50"]),
.crm-integrations-page button[class*="bg-cyan"] {
    height: 46px !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    border: none !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.32) !important;
    color: #fff !important;
    transition: transform .12s, box-shadow .15s !important;
    cursor: pointer;
}
.crm-integrations-page button[class*="bg-indigo"]:hover,
.crm-integrations-page button[class*="bg-violet"]:hover,
.crm-integrations-page button[class*="bg-purple"]:hover,
.crm-integrations-page button[class*="bg-blue"]:not([class*="bg-blue-100"]):not([class*="bg-blue-50"]):hover,
.crm-integrations-page button[class*="bg-cyan"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(99,102,241,0.42) !important;
}

/* Зелёные / teal (например «Изменить» подключение) — оставляем зелёные, но в новой форме */
.crm-integrations-page button[class~="bg-teal-500"],
.crm-integrations-page button[class~="bg-green-500"],
.crm-integrations-page button[class~="bg-emerald-500"] {
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    border: none !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg,#10b981,#059669) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(16,185,129,0.28) !important;
    transition: transform .12s !important;
}
.crm-integrations-page button[class~="bg-teal-500"]:hover,
.crm-integrations-page button[class~="bg-green-500"]:hover,
.crm-integrations-page button[class~="bg-emerald-500"]:hover {
    transform: translateY(-1px);
}

/* Серые второстепенные кнопки */
.crm-integrations-page button[class~="bg-gray-100"],
.crm-integrations-page button[class~="bg-gray-200"]:not(.im-tab-pill) {
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    transition: background .15s, transform .12s !important;
}
.crm-integrations-page button[class~="bg-gray-100"]:hover,
.crm-integrations-page button[class~="bg-gray-200"]:not(.im-tab-pill):hover {
    background: #e2e8f0 !important;
    transform: translateY(-1px);
}

/* «Подключено» бейдж */
.crm-integrations-page [class*="bg-emerald-100"],
.crm-integrations-page [class*="bg-green-100"] {
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
}

/* dark mode */
.dark .crm-integrations-page input[type="text"],
.dark .crm-integrations-page input[type="password"],
.dark .crm-integrations-page input[type="email"],
.dark .crm-integrations-page input[type="tel"],
.dark .crm-integrations-page input[type="number"],
.dark .crm-integrations-page input[type="url"],
.dark .crm-integrations-page select,
.dark .crm-integrations-page textarea {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}
.dark .crm-integrations-page label { color: #94a3b8 !important; }

/* ===== Integration sub-tab pills (Telegram / SMS / Email / ...) =====
   Используется и React-табами (settings-tab-integrations.jsx),
   и extension-табами (integrations-master.js). Единый брендовый стиль. */
.im-tab-pill {
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    transform: none !important;
}
.im-tab-pill:hover {
    transform: translateY(-1px) !important;
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
.im-tab-pill-active,
.im-tab-pill.im-tab-pill-active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.32);
    transform: translateY(-1px);
    font-weight: 700;
}
.im-tab-pill-active:hover {
    background: linear-gradient(135deg, #5b59ee, #7d4cf3) !important;
}
.dark .im-tab-pill {
    background: rgba(148,163,184,0.08);
    border-color: rgba(148,163,184,0.2);
    color: #cbd5e1;
}
.dark .im-tab-pill:hover {
    background: rgba(99,102,241,0.12);
}

/* ===== User-form modal polish (class set by user-form-polish.js) =====
   Унифицирует поля и кнопки модалки «Редактировать / Новый пользователь». */
.crm-user-form { padding: 22px 24px !important; border-radius: 18px !important; }
.crm-user-form input[type="text"],
.crm-user-form input[type="password"],
.crm-user-form input[type="email"],
.crm-user-form input[type="tel"],
.crm-user-form input[type="number"],
.crm-user-form select {
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    font-size: 14px !important;
    transition: border-color .15s, box-shadow .15s !important;
    box-sizing: border-box !important;
}
.crm-user-form input:focus,
.crm-user-form select:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.18) !important;
    outline: none !important;
}
.crm-user-form label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.01em !important;
}
.crm-user-form h3 { font-size: 17px !important; }
/* Кнопки в подвале модалки: «Сохранить» / «Отмена» — одинаковая высота 44px, скруглённые. */
.crm-user-form button {
    border-radius: 12px !important;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease !important;
}
.crm-user-form button:hover { transform: translateY(-1px); }
.crm-user-form button[class*="bg-indigo"],
.crm-user-form button[class*="bg-violet"],
.crm-user-form button[class*="bg-purple"],
.crm-user-form button[class*="bg-blue"],
.crm-user-form button[class*="bg-teal"],
.crm-user-form button[class*="bg-green"],
.crm-user-form button[class*="bg-emerald"] {
    height: 44px !important;
    padding: 0 22px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.28) !important;
    color: #fff !important;
    border: none !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
}
.crm-user-form button[class*="bg-indigo"]:disabled,
.crm-user-form button[class*="bg-violet"]:disabled,
.crm-user-form button[class*="bg-purple"]:disabled,
.crm-user-form button[class*="bg-blue"]:disabled,
.crm-user-form button[class*="bg-teal"]:disabled,
.crm-user-form button[class*="bg-green"]:disabled,
.crm-user-form button[class*="bg-emerald"]:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}
/* «Отмена» — secondary button (bg-gray-100). Matches `flex-1 ... bg-gray-100` footer button. */
.crm-user-form button[class*="bg-gray-100"],
.crm-user-form button[class*="bg-slate-700"] {
    height: 44px !important;
    padding: 0 22px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    border: 1px solid #e2e8f0 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
}
/* Native checkbox inside modal (e.g. "Только просмотр") */
.crm-user-form input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #6366f1 !important;
    cursor: pointer !important;
}
/* "Доступные разделы" — render section grid items as uniform chips.
   In app.compiled.js each section is a <button> inside .grid.grid-cols-3. */
.crm-user-form .grid.grid-cols-3 { gap: 8px !important; }
.crm-user-form .grid.grid-cols-3 > button {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    transition: all .15s ease !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}
.crm-user-form .grid.grid-cols-3 > button:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px);
}
.crm-user-form .grid.grid-cols-3 > button[class*="emerald"] {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    border-color: #6ee7b7 !important;
    color: #047857 !important;
    box-shadow: 0 2px 6px rgba(16,185,129,0.15) !important;
}
.crm-user-form .grid.grid-cols-3 > button[class*="emerald"]:hover {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
}
.crm-user-form .grid.grid-cols-3 > button > span:last-child { opacity: 1 !important; }

/* "Все вкл / Все выкл" — small pill toggles. Use [class~=] (word match) so it doesn't
   collide with footer "Отмена" button which contains `hover:bg-gray-200` substring. */
.crm-user-form button[class~="bg-gray-200"] {
    height: 30px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
.crm-user-form button[class~="bg-gray-200"]:hover {
    background: #e2e8f0 !important;
    transform: translateY(-1px);
}

/* Dark mode variants */
.dark .crm-user-form input[type="text"],
.dark .crm-user-form input[type="password"],
.dark .crm-user-form input[type="email"],
.dark .crm-user-form input[type="tel"],
.dark .crm-user-form input[type="number"],
.dark .crm-user-form select {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}
.dark .crm-user-form label { color: #94a3b8 !important; }
.dark .crm-user-form label.cursor-pointer:hover { background: rgba(148,163,184,0.08) !important; }
.dark .crm-user-form label.cursor-pointer:has(input[type="checkbox"]:checked) {
    background: rgba(99,102,241,0.15) !important;
    border-color: rgba(99,102,241,0.4) !important;
}

/* Salary history modal — summary cards (Начислено / Выплачено / Остаток).
   Use !important so external scripts/CSS can't shrink the numbers (e.g. crm-patches setting 9px). */
.salary-summary-card {
  font-size: 14px !important;
}
.salary-summary-label {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  line-height: 1 !important;
}
.salary-summary-value {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Transparent page wrappers so body wallpaper shows through */
[style*="rgb(241, 245, 249)"] { background-color: transparent !important; background-image: none !important; }
.dark [style*="rgb(15, 23, 42)"] { background-color: transparent !important; background-image: none !important; }

/* ===== Tailwind responsive variants — added 2026-05-03 to fix layout regressions ===== */
/* sm breakpoint: ≥640px */
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row !important; }
    .sm\:flex-col { flex-direction: column !important; }
    .sm\:items-center { align-items: center !important; }
    .sm\:items-start { align-items: flex-start !important; }
    .sm\:items-end { align-items: flex-end !important; }
    .sm\:justify-between { justify-content: space-between !important; }
    .sm\:justify-end { justify-content: flex-end !important; }
    .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .sm\:p-6 { padding: 1.5rem !important; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .sm\:flex { display: flex !important; }
    .sm\:hidden { display: none !important; }
    .sm\:block { display: block !important; }
    .sm\:gap-4 { gap: 1rem !important; }
    .sm\:gap-6 { gap: 1.5rem !important; }
    .sm\:text-base { font-size: 1rem !important; }
}

/* md breakpoint: ≥768px */
@media (min-width: 768px) {
    .md\:flex { display: flex !important; }
    .md\:flex-row { flex-direction: row !important; }
    .md\:hidden { display: none !important; }
    .md\:block { display: block !important; }
    .md\:grid { display: grid !important; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .md\:col-span-2 { grid-column: span 2 / span 2 !important; }
    .md\:col-span-3 { grid-column: span 3 / span 3 !important; }
    .md\:items-center { align-items: center !important; }
    .md\:justify-between { justify-content: space-between !important; }
    .md\:gap-4 { gap: 1rem !important; }
    .md\:gap-6 { gap: 1.5rem !important; }
    .md\:p-6 { padding: 1.5rem !important; }
    .md\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

/* lg breakpoint: ≥1024px */
@media (min-width: 1024px) {
    .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .lg\:flex { display: flex !important; }
    .lg\:flex-row { flex-direction: row !important; }
    .lg\:hidden { display: none !important; }
    .lg\:block { display: block !important; }
}

/* === Status dropdown в Заказы запчастей: убираем прозрачность/пастель === */
/* Узко: только дропдаун статусов парт-страницы (min-w-[160px] py-1) */
.absolute[class*="min-w-"][class*="160px"].bg-white {
    background: #ffffff !important;
    backdrop-filter: none !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
    border: 1px solid #e5e7eb !important;
}
.absolute[class*="min-w-"][class*="160px"].bg-white > button {
    background: #ffffff !important;
}
.absolute[class*="min-w-"][class*="160px"].bg-white > button:hover {
    background: #f3f4f6 !important;
}

/* ─── Компактные чекбоксы для таблицы Остатки склада ───────────────── */
input[type="checkbox"].wh-cb-tiny,
input[type="checkbox"].wh-cb-tiny:checked,
input[type="checkbox"].wh-cb-tiny:hover {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  border-width: 1.5px !important;
  border-radius: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
input[type="checkbox"].wh-cb-tiny {
  border: 1.5px solid #cbd5e1 !important;
  background: #fff !important;
  transition: background 0.12s, border-color 0.12s !important;
}
input[type="checkbox"].wh-cb-tiny:hover {
  border-color: #7c3aed !important;
}
input[type="checkbox"].wh-cb-tiny:checked {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
}
/* Полностью гасим стандартную галочку '✓' и рисуем геометрически */
input[type="checkbox"].wh-cb-tiny::after {
  content: '' !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: none !important;
}
input[type="checkbox"].wh-cb-tiny:checked::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 3.5px !important;
  width: 4px !important;
  height: 8px !important;
  border: solid #fff !important;
  border-width: 0 1.5px 1.5px 0 !important;
  transform: rotate(45deg) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: transparent !important;
}

/* ===== Settings → Защита (settings-tab-security.jsx) =====
   Полишинг под бренд: hover-lift, фирменные тени, кнопки в едином стиле. */
.crm-security-page .sec-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(99,102,241,0.42) !important;
    background: linear-gradient(135deg,#5b59ee,#7d4cf3) !important;
}
.crm-security-page .grid > div[class*="rounded-xl"] {
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.crm-security-page .grid > div[class*="rounded-xl"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,0.07) !important;
}
/* «🚫 Бан» / «Разблокировать» / «+ Добавить» / «Удалить» — оставляем семантические цвета, но lift */
.crm-security-page button[class*="bg-red-"],
.crm-security-page button[class*="bg-green-"],
.crm-security-page button[class*="bg-orange-"] {
    transition: transform .12s, box-shadow .15s, filter .15s !important;
}
.crm-security-page button[class*="bg-red-"]:hover,
.crm-security-page button[class*="bg-green-"]:hover,
.crm-security-page button[class*="bg-orange-"]:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
}
/* «Очистить старше N дней» — единообразный мягкий стиль */
.crm-security-page button[class*="bg-gray-100"] {
    height: 32px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-weight: 600 !important;
    transition: all .15s ease !important;
}
.crm-security-page button[class*="bg-gray-100"]:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}
/* Поля ввода в белом списке IP */
.crm-security-page input[type="text"] {
    height: 38px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    padding: 0 12px !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.crm-security-page input[type="text"]:focus {
    outline: none !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.15) !important;
}
/* Таблица «Последние попытки входа» — мягкая зебра + строки */
.crm-security-page table tbody tr {
    transition: background-color .12s ease !important;
}
.crm-security-page table thead th {
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    font-size: 11px !important;
}
/* Tag-пилюли «✅ Успех» / «❌ Пароль» / «⛔ Забанен» — чуть жирнее */
.crm-security-page .rounded-full {
    font-weight: 600 !important;
}
.dark .crm-security-page input[type="text"] {
    background: rgba(148,163,184,0.08) !important;
    border-color: rgba(148,163,184,0.2) !important;
    color: #e2e8f0 !important;
}
.dark .crm-security-page button[class*="bg-gray-100"] {
    background: rgba(148,163,184,0.1) !important;
    border-color: rgba(148,163,184,0.2) !important;
    color: #cbd5e1 !important;
}


/* === Nav tile buttons: never look pressed unless they actually carry bg-indigo === */
.flex-shrink-0.flex.flex-col.items-center:not([class*="bg-indigo"]):not(.bg-indigo-500):focus,
.flex-shrink-0.flex.flex-col.items-center:not([class*="bg-indigo"]):not(.bg-indigo-500):focus-visible,
.flex-shrink-0.flex.flex-col.items-center:not([class*="bg-indigo"]):not(.bg-indigo-500):active {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}


/* === Кнопки с inline-градиентом в шапке (Поставщики и т.п.) — белый текст === */
/* Спецификация .sticky.top-0 + tag + attr перебивает .sticky.top-0 button { color: var(--text) } */
.sticky.top-0 button[style*="gradient"],
header button[style*="gradient"],
[class*="sticky"][class*="top-0"] button[style*="gradient"] {
  color: #ffffff !important;
}
.sticky.top-0 button[style*="gradient"] *,
header button[style*="gradient"] *,
[class*="sticky"][class*="top-0"] button[style*="gradient"] * {
  color: #ffffff !important;
}


/* === Toggle-кнопки (aria-pressed) с зелёным inline-фоном — не перебиваем === */
button[aria-pressed][style*="#22c55e"],
button[aria-pressed][style*="rgb(34, 197, 94)"],
button[aria-pressed][style*="#10b981"],
button[aria-pressed][style*="rgb(16, 185, 129)"] {
  background: #22c55e !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.25) !important;
}

/* ============================================================
   ТЁМНАЯ ТЕМА CRM — полное покрытие светлых поверхностей.
   Префикс html.dark — чтобы перебить инлайновые .dark-правила.
   2026-05-21
   ============================================================ */

/* Фон страницы и базовый текст */
html.dark body { background: #0f1117 !important; color: #e6e6ea !important; }

/* Поверхности-карточки (были светлыми) */
html.dark .bg-white { background-color: #1b1c28 !important; }
html.dark .bg-gray-50, html.dark .bg-slate-50, html.dark .bg-neutral-50, html.dark .bg-zinc-50 { background-color: #16171f !important; }
html.dark .bg-gray-100, html.dark .bg-slate-100, html.dark .bg-neutral-100, html.dark .bg-zinc-100 { background-color: #232533 !important; }
html.dark .bg-gray-200, html.dark .bg-slate-200, html.dark .bg-neutral-200 { background-color: #2c2e3f !important; }

/* Текст */
html.dark .text-black,
html.dark .text-gray-900, html.dark .text-gray-800,
html.dark .text-slate-900, html.dark .text-slate-800,
html.dark .text-zinc-900, html.dark .text-neutral-900 { color: #e6e6ea !important; }
html.dark .text-gray-700, html.dark .text-gray-600,
html.dark .text-slate-700, html.dark .text-slate-600,
html.dark .text-zinc-700, html.dark .text-neutral-700 { color: #a8a8b3 !important; }
html.dark .text-gray-500, html.dark .text-gray-400,
html.dark .text-slate-500, html.dark .text-slate-400 { color: #76767f !important; }

/* Границы */
html.dark .border-white,
html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300,
html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300,
html.dark .border-zinc-100, html.dark .border-zinc-200,
html.dark .border-neutral-100, html.dark .border-neutral-200 { border-color: #2c2e3f !important; }

/* Разделители divide-* */
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2c2e3f !important; }

/* Hover светлых фонов */
html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-white:hover { background-color: #232533 !important; }
html.dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-slate-100:hover { background-color: #2c2e3f !important; }

/* Тени мягче на тёмном */
html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md,
html.dark .shadow-lg, html.dark .shadow-xl { box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important; }

/* Таблицы */
html.dark table thead, html.dark table th { background-color: #1b1c28 !important; color: #cfcfd6 !important; }
html.dark table td, html.dark table th { border-color: #2c2e3f !important; }
html.dark tbody tr:hover td { background-color: #232533 !important; }

/* Поля ввода — исправляем баг (раньше цвет текста = цвет фона = невидимо) */
html.dark input, html.dark select, html.dark textarea, html.dark [contenteditable="true"] {
  background-color: #232533 !important;
  color: #e6e6ea !important;
  -webkit-text-fill-color: #e6e6ea !important;
  border-color: #34364a !important;
}
html.dark input::placeholder, html.dark textarea::placeholder {
  color: #6b6b76 !important; -webkit-text-fill-color: #6b6b76 !important;
}

/* ── Тёмная тема: переопределение дизайн-токенов :root ──
   Весь интерфейс построен на var(--bg-card) и т.п. — меняем токены. */
html.dark {
  --bg: #0f1117;
  --bg-card: #1b1c28;
  --bg-input: #232533;
  --bg-hover: #2a2c3d;
  --text: #e7e7ec;
  --text-secondary: #a6a6b2;
  --text-muted: #76767f;
  --border: #2f3142;
  --border-light: #282a3a;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --shadow: 0 2px 6px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.5);
  --shadow-lg: 0 6px 22px rgba(0,0,0,0.55);
  --shadow-xl: 0 10px 32px rgba(0,0,0,0.6);
  --primary-light: #20223f;
  --success-light: #102a20;
  --warning-light: #2c2410;
  --danger-light: #2e1616;
  --info-light: #122638;
}

/* Тёмная тема: страницы настроек с жёстко прописанными светлыми фонами */
html.dark .im-period-chip { background: #232533 !important; color: #c9c9d2 !important; }
html.dark .im-tab-pill { background: #1b1c28 !important; color: #c9c9d2 !important; }
html.dark .im-tab-pill:hover { background: #2c2e3f !important; }
html.dark .crm-suppliers-page select,
html.dark .crm-integrations-page textarea,
html.dark .crm-user-form select,
html.dark .crm-user-form input,
html.dark .crm-security-page input[type="text"] {
  background: #232533 !important; color: #e7e7ec !important; border-color: #34364a !important;
}
html.dark .crm-user-form .grid.grid-cols-3 > button { background: #232533 !important; color: #e7e7ec !important; }
html.dark .crm-user-form .grid.grid-cols-3 > button:hover { background: #2c2e3f !important; }

/* Тёмная тема: значения в плитках статистики (инлайн-цвет был тёмным) */
html.dark .crm-stat-card div[style] { color: #f3f3f6 !important; }

/* Тёмная тема: колокольчик уведомлений и панель уведомлений */
html.dark #nb-fab { background: #1b1c28 !important; border-color: #2f3142 !important; color: #e7e7ec !important; box-shadow: 0 2px 6px rgba(0,0,0,0.45) !important; }
html.dark #nb-fab:hover { background: #2a2c3d !important; }
html.dark #nb-panel { background: #1b1c28 !important; border-color: #2f3142 !important; color: #e7e7ec !important; }
html.dark #nb-panel .nb-head { border-bottom-color: #2f3142 !important; }
html.dark #nb-panel .nb-item { border-bottom-color: #262838 !important; }
html.dark #nb-panel .nb-item:hover,
html.dark #nb-panel .nb-item.unread:hover { background: #232533 !important; }
html.dark #nb-panel .nb-head-btn:hover { background: #232533 !important; }
html.dark #nb-panel .nb-empty { color: #8a8a93 !important; }

/* Тёмная тема: контейнеры-обёртки max-w-* не должны иметь фон (была видна «подложка») */
html.dark .max-w-7xl,
html.dark .max-w-6xl,
html.dark .max-w-5xl,
html.dark .max-w-4xl { background-color: transparent !important; }

/* Тёмная тема: панель уведомлений — заголовки */
html.dark #nb-panel .nb-title,
html.dark #nb-panel .nb-head-title { color: #e7e7ec !important; }
html.dark #nb-panel .nb-msg { color: #9a9aa6 !important; }

/* Тёмная тема: модалка «Новый заказ» (.no-* из new-order-inject.js) */
html.dark .no-modal { background: #161721 !important; color: #e7e7ec !important; }
html.dark .no-head { background: #1b1c28 !important; border-bottom-color: #2f3142 !important; color: #e7e7ec !important; }
html.dark .no-section { background: #1b1c28 !important; border-color: #2f3142 !important; }
html.dark .no-foot { background: #1b1c28 !important; border-top-color: #2f3142 !important; }
html.dark .no-btn-secondary { background: #232533 !important; color: #c9c9d2 !important; border-color: #34364a !important; }
html.dark .no-btn-secondary:hover { background: #2c2e3f !important; color: #e7e7ec !important; }
html.dark .no-close { color: #9a9aa6 !important; }
html.dark .no-close:hover { background: #2c2e3f !important; color: #e7e7ec !important; }
html.dark .no-ac-list { background: #1b1c28 !important; border-color: #2f3142 !important; }
html.dark .no-ac-item:hover,
html.dark .no-field .no-ms label.no-ms-opt:hover { background: #232533 !important; }

/* Тёмная тема: тулбар конструктора формы в модалке нового заказа */
html.dark #nov2-builder-toolbar { background: #1b1c28 !important; border-color: #2f3142 !important; }

/* Тёмная тема: неактивные таб-кнопки bg-slate-700/800 — был тёмный текст */
html.dark button.bg-slate-700,
html.dark button.bg-slate-800 { color: #e7e7ec !important; }

/* Тёмная тема: модальные окна .fixed.inset-0.z-50 (легаси-правило делало их белыми) */
html.dark .fixed.inset-0.z-50 > div { background-color: #1b1c28 !important; }
html.dark .fixed.inset-0.z-50 input,
html.dark .fixed.inset-0.z-50 textarea,
html.dark .fixed.inset-0.z-50 select { background-color: #232533 !important; color: #e7e7ec !important; border-color: #34364a !important; }

/* Тёмная тема: карточки .sse-result-hover (был жёсткий белый фон) */
html.dark .sse-result-hover { background-color: #1b1c28 !important; border-color: #2f3142 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }
html.dark .sse-result-hover img { background: #232533 !important; }

/* ============================================================
   Тёмная тема: точечные доводки 2026-05-21
   ============================================================ */
/* Партнёры — внешняя обёртка-«подложка» (инлайн-стиль в app.compiled.js) */
html.dark div[style*="max-width: 1220px"][style*="backdrop-filter"] { background-color: rgba(15,17,23,0.6) !important; border-color: #2f3142 !important; }
/* Любой элемент с инлайн-белым фоном — в тёмной теме делаем тёмным
   (карточки базы знаний, кнопки «+ добавить», и т.п.) */
html.dark [style*="background: rgb(255, 255, 255)"]:not(input):not(textarea):not(select) { background-color: #1b1c28 !important; border-color: #2f3142 !important; }
html.dark button[style*="background: rgb(255, 255, 255)"],
html.dark a[style*="background: rgb(255, 255, 255)"] { color: #e7e7ec !important; }
/* Светлый dashed-бордер у кнопок-плейсхолдеров */
html.dark [style*="dashed rgb(209, 213, 219)"] { border-color: #3a3c4f !important; }
/* Партнёры: активная карточка уровня + чип реферального кода */
html.dark .partner-level-card.active { background: #1f2030 !important; }
html.dark [style*="background: rgb(238, 242, 255)"]:not(input):not(textarea):not(select) { background-color: #232533 !important; }
/* Тёмная тема: инлайн-пастельные фоны (accent-боксы) */
html.dark [style*="background: rgb(236, 253, 245)"]:not(input):not(textarea):not(select) { background-color: #15241c !important; }
html.dark [style*="background: rgb(240, 253, 244)"]:not(input):not(textarea):not(select) { background-color: #15241c !important; }
html.dark [style*="background: rgb(209, 250, 229)"]:not(input):not(textarea):not(select) { background-color: #15241c !important; }
html.dark [style*="background: rgb(254, 242, 242)"]:not(input):not(textarea):not(select) { background-color: #2a1a1a !important; }
html.dark [style*="background: rgb(254, 226, 226)"]:not(input):not(textarea):not(select) { background-color: #2a1a1a !important; }
html.dark [style*="background: rgb(255, 251, 235)"]:not(input):not(textarea):not(select) { background-color: #26220f !important; }
html.dark [style*="background: rgb(254, 243, 199)"]:not(input):not(textarea):not(select) { background-color: #26220f !important; }
html.dark [style*="background: rgb(239, 246, 255)"]:not(input):not(textarea):not(select) { background-color: #15202e !important; }
html.dark [style*="background: rgb(219, 234, 254)"]:not(input):not(textarea):not(select) { background-color: #15202e !important; }
html.dark [style*="background: rgb(250, 245, 255)"]:not(input):not(textarea):not(select) { background-color: #1f1830 !important; }
html.dark [style*="background: rgb(243, 232, 255)"]:not(input):not(textarea):not(select) { background-color: #1f1830 !important; }
html.dark [style*="background: rgb(248, 250, 252)"]:not(input):not(textarea):not(select) { background-color: #16171f !important; }
/* Зелёные мини-чипы (правило подсветки green-text) — убираем светлый фон */
html.dark [style*="color: rgb(16, 185, 129)"] { background-color: transparent !important; }
/* Тёмная тема: цветные Tailwind-тинты (-50/-100) — accent-бейджи */
html.dark .bg-emerald-50, html.dark .bg-green-50, html.dark .bg-teal-50,
html.dark .bg-emerald-100, html.dark .bg-green-100, html.dark .bg-teal-100 { background-color: #15241c !important; }
html.dark .bg-red-50, html.dark .bg-rose-50, html.dark .bg-pink-50,
html.dark .bg-red-100, html.dark .bg-rose-100 { background-color: #2a1a1a !important; }
html.dark .bg-amber-50, html.dark .bg-yellow-50, html.dark .bg-orange-50,
html.dark .bg-amber-100, html.dark .bg-yellow-100, html.dark .bg-orange-100 { background-color: #26220f !important; }
html.dark .bg-blue-50, html.dark .bg-sky-50, html.dark .bg-indigo-50, html.dark .bg-cyan-50,
html.dark .bg-blue-100, html.dark .bg-sky-100, html.dark .bg-indigo-100 { background-color: #15202e !important; }
html.dark .bg-purple-50, html.dark .bg-violet-50, html.dark .bg-fuchsia-50,
html.dark .bg-purple-100, html.dark .bg-violet-100 { background-color: #1f1830 !important; }
/* Тёмная тема: страница входа — поля логин/пароль */
html.dark .min-h-screen.justify-center form > div { background-color: #15161f !important; border-color: #2f3142 !important; }
html.dark .min-h-screen.justify-center form input { color: #e7e7ec !important; background-color: transparent !important; }
html.dark .min-h-screen.justify-center form input::placeholder { color: #76767f !important; }
/* Партнёры: панель «Калькулятор дохода» (CSS-правило .partner-calc перебивало инлайн) */
html.dark body .partner-calc { background: linear-gradient(135deg, #1e1e2e, #2d1f4e) !important; border-color: #2f3142 !important; }
/* Тёмная тема: выравнивание slate-700/600 инлайн-фонов под палитру темы */
html.dark [style*="background-color: rgb(51, 65, 85)"] { background-color: #232533 !important; }
html.dark [style*="background-color: rgb(71, 85, 105)"] { background-color: #3a3c4f !important; }

/* ============================================================
   Тёмная тема: глобальный отлов инлайн-светлых стилей
   (кастомные компоненты — new-order, parts-orders, модалки)
   ============================================================ */
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background: rgb(255, 255, 255)"],
html.dark [style*="background:rgb(255, 255, 255)"],
html.dark [style*="background-color:#fff"],
html.dark [style*="background-color: #fff"],
html.dark [style*="background-color: rgb(255, 255, 255)"],
html.dark [style*="background-color:rgb(255, 255, 255)"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background: rgb(255, 255, 255)"],
html.dark [style*="background:rgb(255, 255, 255)"],
html.dark [style*="background-color:#ffffff"],
html.dark [style*="background-color: #ffffff"],
html.dark [style*="background-color: rgb(255, 255, 255)"],
html.dark [style*="background-color:rgb(255, 255, 255)"],
html.dark [style*="background:#fefefe"],
html.dark [style*="background: #fefefe"],
html.dark [style*="background: rgb(254, 254, 254)"],
html.dark [style*="background:rgb(254, 254, 254)"],
html.dark [style*="background-color:#fefefe"],
html.dark [style*="background-color: #fefefe"],
html.dark [style*="background-color: rgb(254, 254, 254)"],
html.dark [style*="background-color:rgb(254, 254, 254)"],
html.dark [style*="background:#f9fafb"],
html.dark [style*="background: #f9fafb"],
html.dark [style*="background: rgb(249, 250, 251)"],
html.dark [style*="background:rgb(249, 250, 251)"],
html.dark [style*="background-color:#f9fafb"],
html.dark [style*="background-color: #f9fafb"],
html.dark [style*="background-color: rgb(249, 250, 251)"],
html.dark [style*="background-color:rgb(249, 250, 251)"],
html.dark [style*="background:#f8fafc"],
html.dark [style*="background: #f8fafc"],
html.dark [style*="background: rgb(248, 250, 252)"],
html.dark [style*="background:rgb(248, 250, 252)"],
html.dark [style*="background-color:#f8fafc"],
html.dark [style*="background-color: #f8fafc"],
html.dark [style*="background-color: rgb(248, 250, 252)"],
html.dark [style*="background-color:rgb(248, 250, 252)"],
html.dark [style*="background:#f3f4f6"],
html.dark [style*="background: #f3f4f6"],
html.dark [style*="background: rgb(243, 244, 246)"],
html.dark [style*="background:rgb(243, 244, 246)"],
html.dark [style*="background-color:#f3f4f6"],
html.dark [style*="background-color: #f3f4f6"],
html.dark [style*="background-color: rgb(243, 244, 246)"],
html.dark [style*="background-color:rgb(243, 244, 246)"],
html.dark [style*="background:#f1f5f9"],
html.dark [style*="background: #f1f5f9"],
html.dark [style*="background: rgb(241, 245, 249)"],
html.dark [style*="background:rgb(241, 245, 249)"],
html.dark [style*="background-color:#f1f5f9"],
html.dark [style*="background-color: #f1f5f9"],
html.dark [style*="background-color: rgb(241, 245, 249)"],
html.dark [style*="background-color:rgb(241, 245, 249)"],
html.dark [style*="background:#fafbff"],
html.dark [style*="background: #fafbff"],
html.dark [style*="background: rgb(250, 251, 255)"],
html.dark [style*="background:rgb(250, 251, 255)"],
html.dark [style*="background-color:#fafbff"],
html.dark [style*="background-color: #fafbff"],
html.dark [style*="background-color: rgb(250, 251, 255)"],
html.dark [style*="background-color:rgb(250, 251, 255)"],
html.dark [style*="background:#fafafa"],
html.dark [style*="background: #fafafa"],
html.dark [style*="background: rgb(250, 250, 250)"],
html.dark [style*="background:rgb(250, 250, 250)"],
html.dark [style*="background-color:#fafafa"],
html.dark [style*="background-color: #fafafa"],
html.dark [style*="background-color: rgb(250, 250, 250)"],
html.dark [style*="background-color:rgb(250, 250, 250)"],
html.dark [style*="background:#f4f4f5"],
html.dark [style*="background: #f4f4f5"],
html.dark [style*="background: rgb(244, 244, 245)"],
html.dark [style*="background:rgb(244, 244, 245)"],
html.dark [style*="background-color:#f4f4f5"],
html.dark [style*="background-color: #f4f4f5"],
html.dark [style*="background-color: rgb(244, 244, 245)"],
html.dark [style*="background-color:rgb(244, 244, 245)"],
html.dark [style*="background:#f5f5f5"],
html.dark [style*="background: #f5f5f5"],
html.dark [style*="background: rgb(245, 245, 245)"],
html.dark [style*="background:rgb(245, 245, 245)"],
html.dark [style*="background-color:#f5f5f5"],
html.dark [style*="background-color: #f5f5f5"],
html.dark [style*="background-color: rgb(245, 245, 245)"],
html.dark [style*="background-color:rgb(245, 245, 245)"] { background-color: #1b1c28 !important; }
html.dark [style*="background:#f5f3ff"],
html.dark [style*="background: #f5f3ff"],
html.dark [style*="background: rgb(245, 243, 255)"],
html.dark [style*="background:rgb(245, 243, 255)"],
html.dark [style*="background-color:#f5f3ff"],
html.dark [style*="background-color: #f5f3ff"],
html.dark [style*="background-color: rgb(245, 243, 255)"],
html.dark [style*="background-color:rgb(245, 243, 255)"],
html.dark [style*="background:#faf5ff"],
html.dark [style*="background: #faf5ff"],
html.dark [style*="background: rgb(250, 245, 255)"],
html.dark [style*="background:rgb(250, 245, 255)"],
html.dark [style*="background-color:#faf5ff"],
html.dark [style*="background-color: #faf5ff"],
html.dark [style*="background-color: rgb(250, 245, 255)"],
html.dark [style*="background-color:rgb(250, 245, 255)"],
html.dark [style*="background:#ede9fe"],
html.dark [style*="background: #ede9fe"],
html.dark [style*="background: rgb(237, 233, 254)"],
html.dark [style*="background:rgb(237, 233, 254)"],
html.dark [style*="background-color:#ede9fe"],
html.dark [style*="background-color: #ede9fe"],
html.dark [style*="background-color: rgb(237, 233, 254)"],
html.dark [style*="background-color:rgb(237, 233, 254)"],
html.dark [style*="background:#eef2ff"],
html.dark [style*="background: #eef2ff"],
html.dark [style*="background: rgb(238, 242, 255)"],
html.dark [style*="background:rgb(238, 242, 255)"],
html.dark [style*="background-color:#eef2ff"],
html.dark [style*="background-color: #eef2ff"],
html.dark [style*="background-color: rgb(238, 242, 255)"],
html.dark [style*="background-color:rgb(238, 242, 255)"],
html.dark [style*="background:#f3e8ff"],
html.dark [style*="background: #f3e8ff"],
html.dark [style*="background: rgb(243, 232, 255)"],
html.dark [style*="background:rgb(243, 232, 255)"],
html.dark [style*="background-color:#f3e8ff"],
html.dark [style*="background-color: #f3e8ff"],
html.dark [style*="background-color: rgb(243, 232, 255)"],
html.dark [style*="background-color:rgb(243, 232, 255)"],
html.dark [style*="background:#f8f5ff"],
html.dark [style*="background: #f8f5ff"],
html.dark [style*="background: rgb(248, 245, 255)"],
html.dark [style*="background:rgb(248, 245, 255)"],
html.dark [style*="background-color:#f8f5ff"],
html.dark [style*="background-color: #f8f5ff"],
html.dark [style*="background-color: rgb(248, 245, 255)"],
html.dark [style*="background-color:rgb(248, 245, 255)"] { background-color: #1f1830 !important; }
html.dark [style*="background:#eff6ff"],
html.dark [style*="background: #eff6ff"],
html.dark [style*="background: rgb(239, 246, 255)"],
html.dark [style*="background:rgb(239, 246, 255)"],
html.dark [style*="background-color:#eff6ff"],
html.dark [style*="background-color: #eff6ff"],
html.dark [style*="background-color: rgb(239, 246, 255)"],
html.dark [style*="background-color:rgb(239, 246, 255)"],
html.dark [style*="background:#f0f9ff"],
html.dark [style*="background: #f0f9ff"],
html.dark [style*="background: rgb(240, 249, 255)"],
html.dark [style*="background:rgb(240, 249, 255)"],
html.dark [style*="background-color:#f0f9ff"],
html.dark [style*="background-color: #f0f9ff"],
html.dark [style*="background-color: rgb(240, 249, 255)"],
html.dark [style*="background-color:rgb(240, 249, 255)"],
html.dark [style*="background:#e0f2fe"],
html.dark [style*="background: #e0f2fe"],
html.dark [style*="background: rgb(224, 242, 254)"],
html.dark [style*="background:rgb(224, 242, 254)"],
html.dark [style*="background-color:#e0f2fe"],
html.dark [style*="background-color: #e0f2fe"],
html.dark [style*="background-color: rgb(224, 242, 254)"],
html.dark [style*="background-color:rgb(224, 242, 254)"],
html.dark [style*="background:#dbeafe"],
html.dark [style*="background: #dbeafe"],
html.dark [style*="background: rgb(219, 234, 254)"],
html.dark [style*="background:rgb(219, 234, 254)"],
html.dark [style*="background-color:#dbeafe"],
html.dark [style*="background-color: #dbeafe"],
html.dark [style*="background-color: rgb(219, 234, 254)"],
html.dark [style*="background-color:rgb(219, 234, 254)"] { background-color: #15202e !important; }
html.dark [style*="background:#fffbeb"],
html.dark [style*="background: #fffbeb"],
html.dark [style*="background: rgb(255, 251, 235)"],
html.dark [style*="background:rgb(255, 251, 235)"],
html.dark [style*="background-color:#fffbeb"],
html.dark [style*="background-color: #fffbeb"],
html.dark [style*="background-color: rgb(255, 251, 235)"],
html.dark [style*="background-color:rgb(255, 251, 235)"],
html.dark [style*="background:#fef3c7"],
html.dark [style*="background: #fef3c7"],
html.dark [style*="background: rgb(254, 243, 199)"],
html.dark [style*="background:rgb(254, 243, 199)"],
html.dark [style*="background-color:#fef3c7"],
html.dark [style*="background-color: #fef3c7"],
html.dark [style*="background-color: rgb(254, 243, 199)"],
html.dark [style*="background-color:rgb(254, 243, 199)"],
html.dark [style*="background:#fefce8"],
html.dark [style*="background: #fefce8"],
html.dark [style*="background: rgb(254, 252, 232)"],
html.dark [style*="background:rgb(254, 252, 232)"],
html.dark [style*="background-color:#fefce8"],
html.dark [style*="background-color: #fefce8"],
html.dark [style*="background-color: rgb(254, 252, 232)"],
html.dark [style*="background-color:rgb(254, 252, 232)"],
html.dark [style*="background:#fff7ed"],
html.dark [style*="background: #fff7ed"],
html.dark [style*="background: rgb(255, 247, 237)"],
html.dark [style*="background:rgb(255, 247, 237)"],
html.dark [style*="background-color:#fff7ed"],
html.dark [style*="background-color: #fff7ed"],
html.dark [style*="background-color: rgb(255, 247, 237)"],
html.dark [style*="background-color:rgb(255, 247, 237)"],
html.dark [style*="background:#fef9c3"],
html.dark [style*="background: #fef9c3"],
html.dark [style*="background: rgb(254, 249, 195)"],
html.dark [style*="background:rgb(254, 249, 195)"],
html.dark [style*="background-color:#fef9c3"],
html.dark [style*="background-color: #fef9c3"],
html.dark [style*="background-color: rgb(254, 249, 195)"],
html.dark [style*="background-color:rgb(254, 249, 195)"] { background-color: #26220f !important; }
html.dark [style*="background:#fef2f2"],
html.dark [style*="background: #fef2f2"],
html.dark [style*="background: rgb(254, 242, 242)"],
html.dark [style*="background:rgb(254, 242, 242)"],
html.dark [style*="background-color:#fef2f2"],
html.dark [style*="background-color: #fef2f2"],
html.dark [style*="background-color: rgb(254, 242, 242)"],
html.dark [style*="background-color:rgb(254, 242, 242)"],
html.dark [style*="background:#fee2e2"],
html.dark [style*="background: #fee2e2"],
html.dark [style*="background: rgb(254, 226, 226)"],
html.dark [style*="background:rgb(254, 226, 226)"],
html.dark [style*="background-color:#fee2e2"],
html.dark [style*="background-color: #fee2e2"],
html.dark [style*="background-color: rgb(254, 226, 226)"],
html.dark [style*="background-color:rgb(254, 226, 226)"],
html.dark [style*="background:#fff1f2"],
html.dark [style*="background: #fff1f2"],
html.dark [style*="background: rgb(255, 241, 242)"],
html.dark [style*="background:rgb(255, 241, 242)"],
html.dark [style*="background-color:#fff1f2"],
html.dark [style*="background-color: #fff1f2"],
html.dark [style*="background-color: rgb(255, 241, 242)"],
html.dark [style*="background-color:rgb(255, 241, 242)"] { background-color: #2a1a1a !important; }
html.dark [style*="background:#f0fdf4"],
html.dark [style*="background: #f0fdf4"],
html.dark [style*="background: rgb(240, 253, 244)"],
html.dark [style*="background:rgb(240, 253, 244)"],
html.dark [style*="background-color:#f0fdf4"],
html.dark [style*="background-color: #f0fdf4"],
html.dark [style*="background-color: rgb(240, 253, 244)"],
html.dark [style*="background-color:rgb(240, 253, 244)"],
html.dark [style*="background:#ecfdf5"],
html.dark [style*="background: #ecfdf5"],
html.dark [style*="background: rgb(236, 253, 245)"],
html.dark [style*="background:rgb(236, 253, 245)"],
html.dark [style*="background-color:#ecfdf5"],
html.dark [style*="background-color: #ecfdf5"],
html.dark [style*="background-color: rgb(236, 253, 245)"],
html.dark [style*="background-color:rgb(236, 253, 245)"],
html.dark [style*="background:#dcfce7"],
html.dark [style*="background: #dcfce7"],
html.dark [style*="background: rgb(220, 252, 231)"],
html.dark [style*="background:rgb(220, 252, 231)"],
html.dark [style*="background-color:#dcfce7"],
html.dark [style*="background-color: #dcfce7"],
html.dark [style*="background-color: rgb(220, 252, 231)"],
html.dark [style*="background-color:rgb(220, 252, 231)"],
html.dark [style*="background:#d1fae5"],
html.dark [style*="background: #d1fae5"],
html.dark [style*="background: rgb(209, 250, 229)"],
html.dark [style*="background:rgb(209, 250, 229)"],
html.dark [style*="background-color:#d1fae5"],
html.dark [style*="background-color: #d1fae5"],
html.dark [style*="background-color: rgb(209, 250, 229)"],
html.dark [style*="background-color:rgb(209, 250, 229)"] { background-color: #15241c !important; }
html.dark [style*="color:#1f2937"],
html.dark [style*="color: #1f2937"],
html.dark [style*="color: rgb(31, 41, 55)"],
html.dark [style*="color:rgb(31, 41, 55)"],
html.dark [style*="color:#111827"],
html.dark [style*="color: #111827"],
html.dark [style*="color: rgb(17, 24, 39)"],
html.dark [style*="color:rgb(17, 24, 39)"],
html.dark [style*="color:#0f172a"],
html.dark [style*="color: #0f172a"],
html.dark [style*="color: rgb(15, 23, 42)"],
html.dark [style*="color:rgb(15, 23, 42)"],
html.dark [style*="color:#1e293b"],
html.dark [style*="color: #1e293b"],
html.dark [style*="color: rgb(30, 41, 59)"],
html.dark [style*="color:rgb(30, 41, 59)"],
html.dark [style*="color:#374151"],
html.dark [style*="color: #374151"],
html.dark [style*="color: rgb(55, 65, 81)"],
html.dark [style*="color:rgb(55, 65, 81)"],
html.dark [style*="color:#1e1e2e"],
html.dark [style*="color: #1e1e2e"],
html.dark [style*="color: rgb(30, 30, 46)"],
html.dark [style*="color:rgb(30, 30, 46)"],
html.dark [style*="color:#18181b"],
html.dark [style*="color: #18181b"],
html.dark [style*="color: rgb(24, 24, 27)"],
html.dark [style*="color:rgb(24, 24, 27)"],
html.dark [style*="color:#1f2024"],
html.dark [style*="color: #1f2024"],
html.dark [style*="color: rgb(31, 32, 36)"],
html.dark [style*="color:rgb(31, 32, 36)"],
html.dark [style*="color:#334155"],
html.dark [style*="color: #334155"],
html.dark [style*="color: rgb(51, 65, 85)"],
html.dark [style*="color:rgb(51, 65, 85)"],
html.dark [style*="color:#030712"],
html.dark [style*="color: #030712"],
html.dark [style*="color: rgb(3, 7, 18)"],
html.dark [style*="color:rgb(3, 7, 18)"] { color: #e7e7ec !important; }
html.dark [style*="color:#6b7280"],
html.dark [style*="color: #6b7280"],
html.dark [style*="color: rgb(107, 114, 128)"],
html.dark [style*="color:rgb(107, 114, 128)"],
html.dark [style*="color:#64748b"],
html.dark [style*="color: #64748b"],
html.dark [style*="color: rgb(100, 116, 139)"],
html.dark [style*="color:rgb(100, 116, 139)"],
html.dark [style*="color:#475569"],
html.dark [style*="color: #475569"],
html.dark [style*="color: rgb(71, 85, 105)"],
html.dark [style*="color:rgb(71, 85, 105)"],
html.dark [style*="color:#4b5563"],
html.dark [style*="color: #4b5563"],
html.dark [style*="color: rgb(75, 85, 99)"],
html.dark [style*="color:rgb(75, 85, 99)"],
html.dark [style*="color:#71717a"],
html.dark [style*="color: #71717a"],
html.dark [style*="color: rgb(113, 113, 122)"],
html.dark [style*="color:rgb(113, 113, 122)"],
html.dark [style*="color:#6c757d"],
html.dark [style*="color: #6c757d"],
html.dark [style*="color: rgb(108, 117, 125)"],
html.dark [style*="color:rgb(108, 117, 125)"] { color: #9aa0b4 !important; }
/* New-order: кнопка «+ Добавить работу» (.no-add-row — класс) */
html.dark #new-order-v2-modal .no-add-row { background: #1f1830 !important; border-color: #4c3a82 !important; color: #a78bfa !important; }
html.dark #new-order-v2-modal .no-add-row:hover { background: #2a2147 !important; }
html.dark .icm-drawer { background: #15161f !important; }
/* Тёмная тема: фон самого <html> (убирает белую полосу сверху при overscroll) */
html.dark { background-color: #0f1117 !important; }
/* Чат обращения: значения в сайдбаре */
html.dark .icm-info-value { color: #e7e7ec !important; }
html.dark .icm-info-value a { color: #a5b4fc !important; }

/* === Тёмная тема: CKEditor 5 (редактор прайс-листа/базы знаний) === */
html.dark {
  --ck-color-base-background: #1b1c28;
  --ck-color-base-foreground: #232533;
  --ck-color-base-border: #2f3142;
  --ck-color-base-active: #8b5cf6;
  --ck-color-base-active-focus: #7c3aed;
  --ck-color-base-text: #e7e7ec;
  --ck-color-text: #e7e7ec;
  --ck-color-shadow-drop: rgba(0,0,0,0.4);
  --ck-color-shadow-inner: rgba(0,0,0,0.3);
  --ck-color-toolbar-background: #1b1c28;
  --ck-color-toolbar-border: #2f3142;
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: #2c2e3f;
  --ck-color-button-default-active-background: #34364a;
  --ck-color-button-on-background: #2a2147;
  --ck-color-button-on-hover-background: #332a52;
  --ck-color-button-on-active-background: #332a52;
  --ck-color-button-on-color: #c4b5fd;
  --ck-color-button-action-background: #10b981;
  --ck-color-button-action-hover-background: #059669;
  --ck-color-dropdown-panel-background: #1b1c28;
  --ck-color-dropdown-panel-border: #2f3142;
  --ck-color-panel-background: #1b1c28;
  --ck-color-panel-border: #2f3142;
  --ck-color-list-background: #1b1c28;
  --ck-color-list-button-hover-background: #2c2e3f;
  --ck-color-list-button-on-background: #2a2147;
  --ck-color-list-button-on-text: #c4b5fd;
  --ck-color-input-background: #232533;
  --ck-color-input-border: #3a3c4f;
  --ck-color-input-text: #e7e7ec;
  --ck-color-input-disabled-background: #1b1c28;
  --ck-color-labeled-field-label-background: #1b1c28;
  --ck-color-split-button-hover-background: #2c2e3f;
  --ck-color-tooltip-background: #0f1117;
  --ck-color-tooltip-text: #e7e7ec;
}
html.dark .ck.ck-content,
html.dark .ck-editor__editable { background-color: #15161f !important; color: #e7e7ec !important; }
html.dark .ck.ck-toolbar { background: #1b1c28 !important; border-color: #2f3142 !important; }
html.dark .ck.ck-button, html.dark a.ck.ck-button { color: #e7e7ec !important; }
html.dark .ck.ck-toolbar__separator { background: #2f3142 !important; }
/* Тёмная тема: тёмно-оранжевый/янтарный текст на затемнённых чипах — осветляем для читаемости */
html.dark [style*="color:#92400e"], html.dark [style*="color: #92400e"], html.dark [style*="color: rgb(146, 64, 14)"] { color: #fbbf24 !important; }
html.dark [style*="color:#b45309"], html.dark [style*="color: #b45309"], html.dark [style*="color: rgb(180, 83, 9)"] { color: #fbbf24 !important; }
html.dark [style*="color:#9a3412"], html.dark [style*="color: rgb(154, 52, 18)"] { color: #fdba74 !important; }
html.dark [style*="color:#9a3412"], html.dark [style*="color: #9a3412"] { color: #fdba74 !important; }
/* Тёмная тема: инфо-панель Avito-чата (светлый градиент) */
html.dark [style*="linear-gradient(135deg,#f0f9ff"] { background: #15202e !important; border-color: #2f3142 !important; }
html.dark [style*="linear-gradient(135deg, #f0f9ff"] { background: #15202e !important; border-color: #2f3142 !important; }
/* Тёмная тема: шапка-подложка — поднимаем фон до уровня меню (#1b1c28), чтобы панель была видна */
html.dark header.bg-gray-900 { background-color: #1b1c28 !important; border-color: #2f3142 !important; }
/* Тёмная тема: кнопки с белым инлайн-фоном (напр. «Отмена» в модалках) — отдельный приподнятый фон + рамка, чтобы кнопка была видна */
html.dark button[style*="background:#fff"], html.dark button[style*="background: #fff"], html.dark button[style*="background: rgb(255, 255, 255)"], html.dark button[style*="background:rgb(255, 255, 255)"], html.dark button[style*="background:#ffffff"], html.dark button[style*="background: #ffffff"] { background-color: #2c2e3f !important; border: 1px solid #3a3c4f !important; }
/* Тёмная тема: вторичный текст чуть светлее для читаемости */
html.dark .text-gray-500, html.dark .text-gray-400, html.dark .text-slate-500, html.dark .text-slate-400, html.dark .text-zinc-500, html.dark .text-zinc-400, html.dark .text-neutral-500, html.dark .text-neutral-400 { color: #9a9aa6 !important; }
html.dark .text-gray-700, html.dark .text-gray-600, html.dark .text-slate-700, html.dark .text-slate-600, html.dark .text-zinc-700, html.dark .text-zinc-600 { color: #c2c2cc !important; }

/* === CRM_AUTOFILL_FIX === убираем жёлтый фон браузерного автозаполнения === */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #1f2937 !important;
  caret-color: #1f2937;
  transition: background-color 9999s ease-out 0s;
}
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark input:-webkit-autofill:active,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #262735 inset !important;
  -webkit-text-fill-color: #e5e7eb !important;
  caret-color: #e5e7eb;
}

/* === CRM_USERMENU_FIX === меню пользователя (Профиль/Тема/Выйти) === */
/* Поверх контента — чтобы кнопка «Выйти» не перекрывалась строкой ниже */
button[data-user-menu] + div {
  z-index: 2147483600 !important;
}
/* Всегда 3 кнопки в один ряд — окно остаётся низким и не налезает на контент.
   display:grid форсируем на случай если его перебили на flex (тогда кнопки
   переносятся 2+1 и «Выйти» уезжает вниз под контент). */
button[data-user-menu] + div > .grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-flow: row !important;
}
button[data-user-menu] + div > .grid > button {
  width: auto !important;
  min-width: 0 !important;
  flex: none !important;
}
@media (max-width: 768px) {
  button[data-user-menu] + div {
    width: 290px !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* === CRM_SELECT_DARK_FIX === нативные выпадающие списки <select> в тёмной теме === */
/* color-scheme:dark заставляет браузер рисовать всплывающий список <select> тёмным,
   сохраняя нативную ширину. Явный background у <option> НЕ задаём — иначе Chrome
   переключается на кастомную отрисовку и список «распирает» за рамки поля. */
html.dark select {
  color-scheme: dark;
}

/* === CRM_BILLING_GRID_FIX === тарифные карточки на мобильном === */
/* Сетка тарифов (Настройки → Финансы) задана инлайн-стилем repeat(3, 1fr).
   На телефоне 3 карточки в ряд не помещаются — средняя сжимается в полоску.
   На узких экранах раскладываем карточки в один столбец. */
@media (max-width: 768px) {
  div[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* === CRM_PRICELIST_DARK_FIX === таблицы прайс-листа (CKEditor) в тёмной теме === */
/* Заголовки таблиц в контенте «Цены и Гарантия» имеют белый фон, заданный в
   редакторе — в тёмной теме перекрываем на тёмный, текст светлый, рамки тёмные. */
html.dark .prices-doc-view th {
  background-color: #232a3d !important;
  color: #e7e7ec !important;
}
html.dark .prices-doc-view th * {
  background-color: transparent !important;
  color: #e7e7ec !important;
}
html.dark .prices-doc-view th,
html.dark .prices-doc-view td {
  border-color: #3a3c4f !important;
}

/* === CRM_THEME_GRID_FIX === палитра «Фон» в профиле === */
/* Жёсткая сетка из 9 колонок не помещается в узкое окно профиля — последние
   кружки обрезаются. Делаем сетку адаптивной: переносится на новые строки. */
div[style*="repeat(9, 1fr)"] {
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important;
}

/* === Lock body scroll when fullscreen modal overlay is open === */
body:has(> div[style*="position:fixed"][style*="background:rgba(0,0,0"]),
body:has(> div[style*="position: fixed"][style*="background: rgba(0, 0, 0"]) {
  overflow: hidden !important;
}

/* === navigation.css === */
/* =====================================================
   CRM Navigation v2 — чистые стили
   Заменяет навигационные стили из:
   crm-patches.js, crm-styles.css, device-crm.css,
   interface-settings.js
   ===================================================== */

/* ─── Анти-FOUC: не используем visibility:hidden (оставлял пустой блок при медленной загрузке).
   Вместо этого navigation.jsx использует MutationObserver и монтирует v2 моментально,
   как только header появляется в DOM. Оригинал прячем display:none ТОЛЬКО когда v2 уже готова. */
.crm-orig-nav-hidden {
  display: none !important;
}
/* Старую мобильную нав-полосу тоже прячем сразу */
#crm-mobile-bottom-nav:not([data-keep]) {
  display: none !important;
}

/* ─── Десктопная навигация ──────────────────────────── */
#crm-nav2-root {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.crm-nav2,
div.crm-nav2,
div#crm-nav2-root > .crm-nav2 {
  background: var(--bg-card, #fff) !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 30px !important;
  margin-bottom: 1rem;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.crm-nav2-track {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 0.75rem;
  min-width: max-content;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.25) transparent;
  -webkit-overflow-scrolling: touch;
}
.crm-nav2-track::-webkit-scrollbar { height: 4px; }
.crm-nav2-track::-webkit-scrollbar-thumb { background: rgba(99,102,241,.25); border-radius: 2px; }

/* ─── Пункт меню ───────────────────────────────────── */
.crm-nav2-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 78px;
  min-width: 78px;
  padding: 0.5rem 0.25rem;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.crm-nav2-item:hover {
  background: rgba(99, 102, 241, 0.06);
  transform: translateY(-1px);
}
.crm-nav2-item:active {
  transform: translateY(0);
}

/* ─── Иконка ───────────────────────────────────────── */
.crm-nav2-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--item-color);
  transition: color 0.2s ease;
}
.crm-nav2-icon .crm-nav-icon {
  width: 1.75rem;
  height: 1.75rem;
}

/* ─── Подпись ──────────────────────────────────────── */
.crm-nav2-label {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  color: var(--item-color);
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* ─── Активный пункт ──────────────────────────────── */
.crm-nav2-item.crm-nav2-active,
button.crm-nav2-item.crm-nav2-active {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
  transform: none !important;
  border: none !important;
}
.crm-nav2-active .crm-nav2-icon,
.crm-nav2-active .crm-nav2-label {
  color: #fff !important;
}
.crm-nav2-active .crm-nav-icon {
  stroke: #fff !important;
  color: #fff !important;
}

/* ─── Бейдж ────────────────────────────────────────── */
.crm-nav2-badge {
  position: absolute;
  top: 2px;
  right: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff !important;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}

/* ─── Мобильная навигация (нижняя) ─────────────────── */
.crm-nav2-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-card, #fff);
  border-top: 1px solid var(--border, #e5e7eb);
  padding: 0.375rem 0;
  padding-bottom: max(0.375rem, env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}

.crm-nav2-mobile-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  font-size: 0.625rem;
  font-weight: 500;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.crm-nav2-mobile-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crm-nav2-mobile-icon .crm-nav-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.crm-nav2-mobile-active {
  color: #6366f1;
}
.crm-nav2-mobile-active .crm-nav-icon {
  stroke: #6366f1;
}

@media (max-width: 768px) {
  .crm-nav2-mobile {
    display: flex;
  }
  body {
    padding-bottom: 4.5rem !important;
  }
}

/* ─── Скрываем старые элементы навигации ───────────── */
.crm-orig-nav-hidden {
  display: none !important;
}
#acc-nav-compiled {
  display: none !important;
}
#crm-mobile-bottom-nav {
  display: none !important;
}

/* ─── Тёмная тема ──────────────────────────────────── */
.dark .crm-nav2,
[data-theme="dark"] .crm-nav2 {
  background: var(--bg-card, #1e293b);
  border-color: var(--border, #334155);
}
.dark .crm-nav2-item:hover,
[data-theme="dark"] .crm-nav2-item:hover {
  background: rgba(99, 102, 241, 0.12);
}
.dark .crm-nav2-mobile,
[data-theme="dark"] .crm-nav2-mobile {
  background: var(--bg-card, #1e293b);
  border-top-color: var(--border, #334155);
}

/* ─── Декоративные круги (из оригинала) ────────────── */
.crm-nav2-item::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--item-color);
  opacity: 0.08;
  pointer-events: none;
  transition: opacity 0.2s;
}
.crm-nav2-item:hover::after {
  opacity: 0.14;
}
.crm-nav2-active::after {
  opacity: 0;
}

/* Fix: remove shadow/border from inactive nav items */
.crm-nav2-item:not(.crm-nav2-active) {
  box-shadow: none !important;
  border: none !important;
}

/* Fix: ensure no background on inactive items */
.crm-nav2-item:not(.crm-nav2-active) {
  background: transparent !important;
}

/* Override device-crm.css color-based selectors for nav items */
.crm-nav2-item:not(.crm-nav2-active),
button.crm-nav2-item:not(.crm-nav2-active) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

/* === dark-fixes.css === */

/* Тёмная тема — нативные option, иначе текст невидим */
html.dark select option,
html.dark select optgroup {
  background-color: #232533 !important;
  color: #e7e7ec !important;
}
html.dark select option:checked,
html.dark select option:hover {
  background-color: #3a3d52 !important;
  color: #ffffff !important;
}


/* Раздел «Обращения» — поля Быстрой заявки и др. на тёмной теме */
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
  background-color: #232533 !important;
  color: #e7e7ec !important;
}
html.dark input[type="text"]:not([data-no-dark]),
html.dark input[type="tel"]:not([data-no-dark]),
html.dark input[type="email"]:not([data-no-dark]),
html.dark input[type="search"]:not([data-no-dark]),
html.dark input[type="number"]:not([data-no-dark]),
html.dark textarea:not([data-no-dark]) {
  background-color: #1b1c28 !important;
  border-color: #34364a !important;
  color: #e7e7ec !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #6b6b78 !important; opacity: 1; }
html.dark .text-gray-700, html.dark .text-gray-800, html.dark .text-gray-900 { color: #e7e7ec !important; }
html.dark .text-gray-500, html.dark .text-gray-600 { color: #9a9aa6 !important; }
html.dark .border-gray-200, html.dark .border-gray-300 { border-color: #34364a !important; }


/* === DEVIA chat panel и встраиваемые карточки === */
html.dark .devia-bubble,
html.dark .devia-bubble.devia-brief {
  background: #1b1c28 !important;
  color: #e7e7ec !important;
  border-color: #2f3142 !important;
}
html.dark .devia-bubble .devia-brief-greet,
html.dark .devia-brief-greet { color: #e7e7ec !important; }
html.dark .devia-brief-line,
html.dark .devia-brief-line span:last-child { color: #cbd5e1 !important; }
html.dark .devia-act,
html.dark .devia-actions .devia-act {
  background: #232533 !important;
  color: #c4b5fd !important;
  border: 1px solid #34364a !important;
}
html.dark .devia-act:hover { background: #2a1e44 !important; }

/* === DEVIA настройки (страница и роль-карточки) === */
html.dark #devia-settings-modal,
html.dark .devia-settings-page,
html.dark [data-beh-card] {
  background-color: #1b1c28 !important;
  color: #e7e7ec !important;
  border-color: #2f3142 !important;
}
html.dark [data-beh-card] { background-color: #232533 !important; }
html.dark [data-beh-card] div,
html.dark [data-beh-card] span { color: inherit; }

/* Заголовки внутри страницы настроек Devia */
html.dark .devia-settings-page .no-card,
html.dark #devia-settings-modal > div,
html.dark #devia-settings-modal > div > div { background-color: #1b1c28 !important; }

/* Серые подложки в формах */
html.dark [style*="background:#f8f6fd"],
html.dark [style*="background: #f8f6fd"],
html.dark [style*="background:#f3f0fa"],
html.dark [style*="background: #f3f0fa"],
html.dark [style*="background:#fafafd"],
html.dark [style*="background: #fafafd"],
html.dark [style*="background:#f5f3fa"],
html.dark [style*="background: #f5f3fa"] {
  background-color: #232533 !important;
}

/* Белые карточки в любом разделе настроек */
html.dark [style*="background:#fff"]:not(input):not(textarea):not(select):not([data-no-dark]),
html.dark [style*="background: #fff"]:not(input):not(textarea):not(select):not([data-no-dark]),
html.dark [style*="background:#ffffff"]:not(input):not(textarea):not(select):not([data-no-dark]) {
  background-color: #1b1c28 !important;
}

/* Справочники CRM — белая внешняя карточка */
html.dark .bg-white,
html.dark [class*="bg-white"] {
  background-color: #1b1c28 !important;
  color: #e7e7ec !important;
}

/* Кнопки сохранения/отмены в фуллере настроек */
html.dark [style*="background:#fafafd"][style*="border-top"] {
  background-color: #1b1c28 !important;
  border-top-color: #2f3142 !important;
}

/* Текстовые поля в роль-карточках */
html.dark [data-beh-card] input,
html.dark [data-beh-card] select,
html.dark [data-beh-card] textarea {
  background-color: #1b1c28 !important;
  border-color: #34364a !important;
  color: #e7e7ec !important;
}


/* === светло-серые подложки (пилюли «Отмена», «Все вкл/выкл», чипы) === */
html.dark [style*="background:#f3f4f6"]:not([data-no-dark]),
html.dark [style*="background: #f3f4f6"]:not([data-no-dark]),
html.dark [style*="background:#f1f5f9"]:not([data-no-dark]),
html.dark [style*="background: #f1f5f9"]:not([data-no-dark]),
html.dark [style*="background:#eef2f7"]:not([data-no-dark]),
html.dark [style*="background: #eef2f7"]:not([data-no-dark]),
html.dark [style*="background:#e2e8f0"]:not([data-no-dark]),
html.dark [style*="background: #e2e8f0"]:not([data-no-dark]),
html.dark [style*="background:#f8fafc"]:not([data-no-dark]),
html.dark [style*="background: #f8fafc"]:not([data-no-dark]),
html.dark [style*="background:#f9fafb"]:not([data-no-dark]),
html.dark [style*="background: #f9fafb"]:not([data-no-dark]),
html.dark [style*="background:#f0edfb"]:not([data-no-dark]),
html.dark [style*="background: #f0edfb"]:not([data-no-dark]),
html.dark [style*="background:#ede9fe"]:not([data-no-dark]),
html.dark [style*="background: #ede9fe"]:not([data-no-dark]),
html.dark [style*="background:#e0e7ff"]:not([data-no-dark]),
html.dark [style*="background: #e0e7ff"]:not([data-no-dark]) {
  background-color: #232533 !important;
  color: #e7e7ec !important;
}

/* Текст серый -> светлый внутри таких пилюль */
html.dark [style*="color:#475569"][style*="background"]:not([data-no-dark]),
html.dark [style*="color: #475569"][style*="background"]:not([data-no-dark]),
html.dark [style*="color:#64748b"][style*="background"]:not([data-no-dark]),
html.dark [style*="color: #64748b"][style*="background"]:not([data-no-dark]),
html.dark [style*="color:#1e293b"][style*="background"]:not([data-no-dark]),
html.dark [style*="color: #1e293b"][style*="background"]:not([data-no-dark]),
html.dark [style*="color:#5b21b6"][style*="background"]:not([data-no-dark]),
html.dark [style*="color: #5b21b6"][style*="background"]:not([data-no-dark]) {
  color: #c4b5fd !important;
}

/* tailwind: bg-gray-50/100/200, bg-slate-*, bg-zinc-* */
html.dark .bg-gray-50, html.dark .bg-gray-100, html.dark .bg-gray-200,
html.dark .bg-slate-50, html.dark .bg-slate-100, html.dark .bg-slate-200,
html.dark .bg-zinc-50, html.dark .bg-zinc-100, html.dark .bg-zinc-200,
html.dark .bg-violet-50, html.dark .bg-violet-100,
html.dark .bg-purple-50, html.dark .bg-purple-100,
html.dark .bg-indigo-50, html.dark .bg-indigo-100 {
  background-color: #232533 !important;
  color: #e7e7ec !important;
}
html.dark .bg-gray-50 *, html.dark .bg-gray-100 *,
html.dark .bg-slate-50 *, html.dark .bg-slate-100 *,
html.dark .bg-violet-50 *, html.dark .bg-violet-100 *,
html.dark .bg-purple-50 *, html.dark .bg-purple-100 * {
  color: inherit;
}

/* tailwind text утилиты — светло-серые тексты на тёмном */
html.dark .text-slate-700, html.dark .text-slate-800, html.dark .text-slate-900,
html.dark .text-zinc-700, html.dark .text-zinc-800, html.dark .text-zinc-900,
html.dark .text-violet-700, html.dark .text-violet-800, html.dark .text-violet-900,
html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-900 {
  color: #e7e7ec !important;
}
html.dark .text-slate-500, html.dark .text-slate-600,
html.dark .text-zinc-500, html.dark .text-zinc-600 { color: #9a9aa6 !important; }

/* кнопки с фиолетовым текстом-на-светлом (типа чипов запчастей АКБ / Дисплей) */
html.dark button[style*="color:#7c3aed"][style*="background:#"]:not([data-no-dark]),
html.dark button[style*="color: #7c3aed"][style*="background:#"]:not([data-no-dark]) {
  background-color: #232533 !important;
  color: #c4b5fd !important;
}

/* для чипов запчастей (если используют bg-violet-50) — уже выше покрыто */


/* Кнопка «+ Добавить» в справочниках и подобные */
html.dark button[style*="background:linear-gradient(135deg,#8b5cf6"],
html.dark button[style*="background: linear-gradient(135deg,#8b5cf6"] {
  filter: brightness(1.05);
}
html.dark button:disabled,
html.dark button[disabled] {
  opacity: 0.6;
}

/* Светлые «pill» бейджи (жёлтый «Apple», янтарь и т.п.) — оставляем яркими,
   но фон делаем чуть темнее, чтобы текст не сливался */
html.dark [style*="background:#fef3c7"]:not([data-no-dark]),
html.dark [style*="background: #fef3c7"]:not([data-no-dark]) {
  background-color: #3d3320 !important;
  color: #fcd34d !important;
}
html.dark [style*="background:#dcfce7"]:not([data-no-dark]),
html.dark [style*="background: #dcfce7"]:not([data-no-dark]) {
  background-color: #1a3a2a !important;
  color: #6ee7b7 !important;
}
html.dark [style*="background:#fee2e2"]:not([data-no-dark]),
html.dark [style*="background: #fee2e2"]:not([data-no-dark]) {
  background-color: #3a1c1c !important;
  color: #fca5a5 !important;
}
html.dark [style*="background:#fef2f2"]:not([data-no-dark]),
html.dark [style*="background: #fef2f2"]:not([data-no-dark]) {
  background-color: #2a1a1a !important;
}

/* Чипы запчастей (АКБ/Дисплей/...) — общие правила для светлых пилюль */
html.dark .bg-blue-50, html.dark .bg-blue-100,
html.dark .bg-green-50, html.dark .bg-green-100,
html.dark .bg-red-50, html.dark .bg-red-100,
html.dark .bg-yellow-50, html.dark .bg-yellow-100,
html.dark .bg-amber-50, html.dark .bg-amber-100,
html.dark .bg-emerald-50, html.dark .bg-emerald-100,
html.dark .bg-pink-50, html.dark .bg-pink-100,
html.dark .bg-rose-50, html.dark .bg-rose-100 {
  background-color: #232533 !important;
  color: #e7e7ec !important;
}

/* Селекты, отображающие сложный value с inline-стилем */
html.dark select[style*="background:#fff"],
html.dark select[style*="background: #fff"],
html.dark select[style*="background:#ffffff"] {
  background-color: #1b1c28 !important;
  color: #e7e7ec !important;
}

/* Хедер с белым/светлым фоном */
html.dark header[style*="background"]:not([data-no-dark]),
html.dark nav[style*="background"]:not([data-no-dark]) {
  /* осторожно: не трогаем градиенты */
}
html.dark header[style*="background:#fff"]:not([data-no-dark]),
html.dark header[style*="background: #fff"]:not([data-no-dark]),
html.dark nav[style*="background:#fff"]:not([data-no-dark]),
html.dark nav[style*="background: #fff"]:not([data-no-dark]) {
  background-color: #1b1c28 !important;
}

/* Универсальное правило для любого «+Добавить»/«Сохранить» — оставляем фиолетовыми */
html.dark .btn-primary, html.dark .button-primary {
  background: linear-gradient(135deg,#8b5cf6,#6d28d9) !important;
  color: #fff !important;
}


/* === Devia chat panel — оставшиеся белые места === */
html.dark .devia-messages { background: #161721 !important; }
html.dark .devia-msg-ava { background: #232533 !important; border-color: #34364a !important; }
html.dark .devia-ai .devia-bubble { background: #1b1c28 !important; border-color: #2f3142 !important; color: #e7e7ec !important; }
html.dark .devia-input-row { background: #1b1c28 !important; border-top-color: #2f3142 !important; }
html.dark .devia-input { background: #232533 !important; border-color: #34364a !important; color: #e7e7ec !important; }
html.dark .devia-input:focus { background: #1b1c28 !important; border-color: #8b5cf6 !important; }
html.dark .devia-footer { background: #1b1c28 !important; color: #6b6b78 !important; }
html.dark .devia-attach { background: #2a1e44 !important; color: #c4b5fd !important; }
html.dark .devia-attach:hover { background: #3a2960 !important; }


/* Devia sidebar (история чатов + быстрые вопросы) */
html.dark .devia-sidebar { background: #1b1c28 !important; border-right: 1px solid #2f3142; }
html.dark .devia-sec-title { color: #9a9aa6 !important; }
html.dark .devia-hist-item,
html.dark .devia-preset { background: #232533 !important; border-color: #34364a !important; color: #e7e7ec !important; }
html.dark .devia-hist-item:hover,
html.dark .devia-preset:hover { background: #2a2c3d !important; border-color: #8b5cf6 !important; }
html.dark .devia-hist-item.devia-active { background: #2a1e44 !important; border-color: #8b5cf6 !important; }
html.dark .devia-hist-q { color: #e7e7ec !important; }
html.dark .devia-hist-t { color: #6b6b78 !important; }
html.dark .devia-hist-empty { color: #6b6b78 !important; }


/* Devia voice popup (Опишите заказ голосом) */
html.dark #devia-ov-pop { background: #1b1c28 !important; box-shadow: 0 28px 80px rgba(0,0,0,0.55) !important; }
html.dark #devia-ov-pop .dov-body { background: #1b1c28 !important; color: #e7e7ec !important; }
html.dark #devia-ov-pop .dov-tr { background: #232533 !important; border-color: #34364a !important; color: #e7e7ec !important; }
html.dark #devia-ov-pop .dov-tr:empty:before { color: #6b6b78 !important; }
html.dark #devia-ov-pop .dov-row { background: #232533 !important; }
html.dark #devia-ov-pop .dov-row .k { color: #9a9aa6 !important; }
html.dark #devia-ov-pop .dov-row .v { color: #e7e7ec !important; }
html.dark #devia-ov-pop .dov-hint { color: #9a9aa6 !important; }
html.dark #devia-ov-pop .dov-foot { color: #6b6b78 !important; }
html.dark #devia-ov-pop .dov-sec-t { color: #c4b5fd !important; }

/* Конструктор формы — внешняя белая карточка */
html.dark .ib-card,
html.dark [class*="builder-card"] { background: #1b1c28 !important; border-color: #2f3142 !important; }


/* === Конструктор формы квитанции (form-builder-inject) === */
html.dark .fb-section { background: #1b1c28 !important; border-color: #2f3142 !important; }
html.dark .fb-section-title input { background: #232533 !important; border-color: #4c1d95 !important; color: #e7e7ec !important; }
html.dark .fb-field-label input { background: #232533 !important; border-color: #4c1d95 !important; color: #e7e7ec !important; }
html.dark .fb-required-chk { background: #232533 !important; border-color: #34364a !important; color: #9a9aa6 !important; }
html.dark .fb-btn-secondary { background: #232533 !important; border-color: #34364a !important; color: #c4b5fd !important; }
html.dark .fb-toggle::after { background: #e7e7ec !important; }

/* Заголовочный блок «Конструктор формы квитанции» (.style background:#fff inline) */
html.dark #fb-panel > header,
html.dark [id^="fb-"] > header { background: #1b1c28 !important; border-color: #2f3142 !important; color: #e7e7ec !important; }
html.dark #fb-panel h2,
html.dark [id^="fb-"] h2 { color: #e7e7ec !important; }
html.dark #fb-panel p, html.dark [id^="fb-"] p { color: #9a9aa6 !important; }


/* Toasts должны быть поверх всех модалок */
.im-toast, .d-toast, .fb-toast,
[id^="toast"], [class*="toast"]:not(.no-zfix) {
  z-index: 2147483600 !important;
}

/* NO_LIFT_2026_05_26: убрать lift-эффект на hover из списков/карточек/folder-rows */
[class*='cat-item']:hover,
[class*='cat-row']:hover,
[class*='list-item']:hover,
[class*='catalog-row']:hover,
[class*='product-row']:hover,
[class*='folder-row']:hover,
[class*='dropdown-item']:hover,
.sse-result-hover:hover {
    transform: none !important;
}
/* Подсветка цветом (если не задана) */
[class*='cat-item']:hover,
[class*='catalog-row']:hover,
[class*='folder-row']:hover {
    background: rgba(99,102,241,0.10) !important;
}
html.dark [class*='cat-item']:hover,
html.dark [class*='catalog-row']:hover,
html.dark [class*='folder-row']:hover {
    background: rgba(99,102,241,0.16) !important;
}

/* SIMPLE_MODE_DARK_2026_05_26 */
html.dark #crm-simple-mode-modal > div { background: #1b1c28 !important; border-color: #2f3142 !important; color: #e5e7eb !important; }
html.dark #crm-simple-mode-modal > div > div > div > div { color: #e5e7eb !important; }
/* Highlight box (light purple bg inner) */
html.dark #crm-simple-mode-modal div[style*='#f5f3ff'] { background: rgba(99,102,241,0.10) !important; border-color: rgba(99,102,241,0.35) !important; }
html.dark #crm-simple-mode-modal div[style*='#f5f3ff'] > div,
html.dark #crm-simple-mode-modal div[style*='#f5f3ff'] ul,
html.dark #crm-simple-mode-modal div[style*='#f5f3ff'] li { color: #c4b5fd !important; }
html.dark #crm-simple-mode-modal div[style*='#f5f3ff'] b { color: #ddd6fe !important; }
/* Section cards (slate-ish bg) */
html.dark #crm-simple-mode-modal div[style*='#f8fafc'] { background: #232533 !important; border-color: #3a3c4f !important; }
html.dark #crm-simple-mode-modal div[style*='#f8fafc'] * { color: #e5e7eb !important; }
/* Sub-section labels (📌/⚠️ blocks) */
html.dark #crm-simple-mode-modal div[style*='#0f172a'] { color: #e5e7eb !important; }
html.dark #crm-simple-mode-modal div[style*='#475569'] { color: #9aa0b4 !important; }
html.dark #crm-simple-mode-modal div[style*='#64748b'] { color: #9aa0b4 !important; }
/* Close button */
html.dark #crm-simple-mode-modal button[style*='#f1f5f9'] { background: #232533 !important; color: #e5e7eb !important; }

/* CHAT_WIDGET_CONFIG_DARK_2026_05_26 */
html.dark .cwc-block { background: #1b1c28 !important; border-color: #2f3142 !important; }
html.dark .cwc-title { color: #e5e7eb !important; }
html.dark .cwc-sub { color: #9aa0b4 !important; }
html.dark .cwc-label { color: #9aa0b4 !important; }
html.dark .cwc-input { background: #232533 !important; border-color: #3a3c4f !important; color: #e5e7eb !important; }
html.dark .cwc-input:focus { background: #1b1c28 !important; border-color: #6366f1 !important; }
html.dark .cwc-preset { background: #232533 !important; border-color: #3a3c4f !important; color: #cbd5e1 !important; }
html.dark .cwc-preset:hover { background: #2c2e3f !important; }
html.dark .cwc-color-custom input[type=color] { background: #232533 !important; border-color: #3a3c4f !important; }
html.dark .cwc-color-custom label { color: #9aa0b4 !important; }
html.dark .cwc-position button { background: #232533 !important; border-color: #3a3c4f !important; color: #cbd5e1 !important; }
html.dark .cwc-position button.cwc-active { background: rgba(99,102,241,0.18) !important; border-color: #6366f1 !important; color: #c4b5fd !important; }
/* Preview area оставляем светлым (имитирует реальный сайт) — но wrap фон сделаем тёмным */
html.dark .cwc-preview-wrap { background: #0e0f17 !important; border-color: #2f3142 !important; }
/* Emoji buttons (cwc-emoji-grid) */
html.dark .cwc-block button[style*='#f9fafb'] { background: #232533 !important; border-color: #3a3c4f !important; color: #e5e7eb !important; }

/* === Dark fix: light header gradients in modals (Добавить работу, SMTP settings, etc) === */
html.dark [style*="linear-gradient(135deg,#eff6ff"],
html.dark [style*="linear-gradient(135deg, #eff6ff"] {
  background: linear-gradient(135deg, #1e293b 0%, #312e81 100%) !important;
}
html.dark [style*="linear-gradient(135deg,#eff6ff"] h3,
html.dark [style*="linear-gradient(135deg, #eff6ff"] h3 {
  color: #f1f5f9 !important;
}

/* === devia-theme.css === */
/* devia-theme.css — единые цвета и фоны для всех модалов Devia.
 * Любой новый модал получает тему, добавив одну из классов:
 *   .dw-morning / .dm-mr — утренняя
 *   .dw-evening / .dm-ev — вечерняя
 * Внутри использовать переменные с префиксом --t-* (примерно как theme-вары React).
 * Чтобы сменить тему глобально — правьте только этот файл.
 */

:root {
  /* === ФОНОВЫЕ КАРТИНКИ === */
  --devia-bg-morning: url('/images/devia/bg-morning.png');
  --devia-bg-evening: url('/images/devia/bg-evening.png');

  /* === УТРЕННЯЯ ТЕМА (raw) === */
  --devia-mr-overlay:        linear-gradient(135deg, rgba(254,243,199,0.25), rgba(254,215,170,0.20) 45%, rgba(199,210,254,0.30));
  --devia-mr-glass:          rgba(255,255,255,0.72);
  --devia-mr-text:           #1a1430;
  --devia-mr-accent:         #7c3aed;
  --devia-mr-muted:          #8b8398;
  --devia-mr-insight-bg:     rgba(255,255,255,0.85);
  --devia-mr-insight-hover:  #f1ecfd;
  --devia-mr-insight-go:     #c4b9e0;
  --devia-mr-btn-sec-bg:     #f0edfb;
  --devia-mr-btn-sec-col:    #5b21b6;
  --devia-mr-btn-ghost:      #8b8398;
  --devia-mr-close-bg:       rgba(0,0,0,0.05);
  --devia-mr-close-col:      #8b8398;
  --devia-mr-border:         rgba(255,255,255,0.50);

  /* === ВЕЧЕРНЯЯ ТЕМА (raw) === */
  --devia-ev-overlay:        linear-gradient(135deg, rgba(30,27,75,0.55), rgba(76,29,149,0.45) 45%, rgba(131,24,67,0.55));
  --devia-ev-glass:          rgba(20,15,50,0.55);
  --devia-ev-text:           #f3f4f6;
  --devia-ev-accent:         #f0abfc;
  --devia-ev-muted:          rgba(243,244,246,0.78);
  --devia-ev-insight-bg:     rgba(255,255,255,0.10);
  --devia-ev-insight-hover:  rgba(255,255,255,0.18);
  --devia-ev-insight-go:     rgba(255,255,255,0.55);
  --devia-ev-btn-sec-bg:     rgba(255,255,255,0.15);
  --devia-ev-btn-sec-col:    #f3f4f6;
  --devia-ev-btn-ghost:      rgba(255,255,255,0.75);
  --devia-ev-close-bg:       rgba(255,255,255,0.18);
  --devia-ev-close-col:      #f3f4f6;
  --devia-ev-border:         rgba(139,92,246,0.35);

  /* === НЕОНОВОЕ СВЕЧЕНИЕ welcome-модала === */
  --devia-neon-glow: 0 0 0 1.5px rgba(59,130,246,0.7), 0 0 32px rgba(59,130,246,0.55), 0 0 72px rgba(96,165,250,0.35), 0 18px 50px rgba(0,0,0,0.5);
}

/* === АЛИАСЫ ТЕМЫ — короткие имена внутри областей с классом темы === */
.dw-morning, .dm-mr {
  --t-bg-image:    var(--devia-bg-morning);
  --t-overlay:     var(--devia-mr-overlay);
  --t-glass:       var(--devia-mr-glass);
  --t-text:        var(--devia-mr-text);
  --t-accent:      var(--devia-mr-accent);
  --t-muted:       var(--devia-mr-muted);
  --t-insight-bg:  var(--devia-mr-insight-bg);
  --t-insight-hover: var(--devia-mr-insight-hover);
  --t-insight-go:  var(--devia-mr-insight-go);
  --t-btn-sec-bg:  var(--devia-mr-btn-sec-bg);
  --t-btn-sec-col: var(--devia-mr-btn-sec-col);
  --t-btn-ghost:   var(--devia-mr-btn-ghost);
  --t-close-bg:    var(--devia-mr-close-bg);
  --t-close-col:   var(--devia-mr-close-col);
  --t-border:      var(--devia-mr-border);
}

.dw-evening, .dm-ev {
  --t-bg-image:    var(--devia-bg-evening);
  --t-overlay:     var(--devia-ev-overlay);
  --t-glass:       var(--devia-ev-glass);
  --t-text:        var(--devia-ev-text);
  --t-accent:      var(--devia-ev-accent);
  --t-muted:       var(--devia-ev-muted);
  --t-insight-bg:  var(--devia-ev-insight-bg);
  --t-insight-hover: var(--devia-ev-insight-hover);
  --t-insight-go:  var(--devia-ev-insight-go);
  --t-btn-sec-bg:  var(--devia-ev-btn-sec-bg);
  --t-btn-sec-col: var(--devia-ev-btn-sec-col);
  --t-btn-ghost:   var(--devia-ev-btn-ghost);
  --t-close-bg:    var(--devia-ev-close-bg);
  --t-close-col:   var(--devia-ev-close-col);
  --t-border:      var(--devia-ev-border);
}