:root {
  --primary: #004b93;
  --primary-dark: #003366;
  --primary-light: #e0f2fe;
  
  --secondary: #64748b;
  --success: #10b981;
  --success-light: #ecfdf5;
  --danger: #ef4444;
  --danger-light: #fef2f2;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --info: #3b82f6;
  --info-light: #dbeafe;
  
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-sidebar: rgba(255, 255, 255, 0.85);
  --bg-hover: #f1f5f9;
  
  --text: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  
  --border: #e2e8f0;
  --border-hover: #cbd5e1;
  
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  
  --shadow-color: rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 8px -2px var(--shadow-color);
  --shadow: 0 4px 16px -4px var(--shadow-color), 0 2px 8px -2px rgba(15, 23, 42, 0.02);
  --shadow-lg: 0 12px 24px -6px var(--shadow-color), 0 8px 16px -4px rgba(15, 23, 42, 0.03);
  
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- ТЁМНАЯ ТЕМА --- */
body.dark-theme {
  --bg: #0b1120;
  --bg-card: #1e293b; 
  --bg-sidebar: rgba(15, 23, 42, 0.85);
  --bg-hover: #334155;
  
  --text: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  
  --border: #475569; /* Сделано светлее для видимости в таблицах */
  --border-hover: #64748b;
  
  --shadow-color: rgba(0, 0, 0, 0.7);
  
  --primary-light: #1e3a5f;
  --success-light: #064e3b;
  --danger-light: #450a0a;
  --warning-light: #451a03;
  --info-light: #172554;
}

body.dark-theme { 
  background-color: var(--bg); 
  color: var(--text);
}

/* BACKGROUND CUSTOMIZATION */
body.has-bg-image {
  background-image: var(--bg-image);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
body.has-bg-image::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(248, 250, 252, var(--bg-overlay-opacity, 0.85));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1;
}

/* Sidebar edit mode */
#sidebar nav.sidebar-nav-edit button[data-nav-id] { cursor: grab; }
#sidebar nav.sidebar-nav-edit button[data-nav-id]:active { cursor: grabbing; }
#sidebar nav.sidebar-nav-edit button[data-nav-id] .nav-grip { opacity: 1 !important; }
#sidebar nav.sidebar-nav-edit button[data-nav-id] { outline: 1px dashed rgba(148,163,184,.4); outline-offset: -2px; }
body.dark-theme.has-bg-image::before {
  background: rgba(11, 17, 32, 0.9);
}

/* DARK THEME CORE OVERRIDES */
body.dark-theme .bg-white { background-color: var(--bg-card) !important; }
body.dark-theme .bg-slate-50,
body.dark-theme .hover\:bg-slate-50:hover { background-color: rgba(51, 65, 85, 0.6) !important; } 
body.dark-theme .bg-slate-100,
body.dark-theme .hover\:bg-slate-100:hover { background-color: var(--bg-hover) !important; }
body.dark-theme .bg-slate-200,
body.dark-theme .hover\:bg-slate-200:hover { background-color: #3f3f46 !important; }

body.dark-theme .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.25) !important; }

/* ПРЕДПРОСМОТР КП В ТЕМНОЙ ТЕМЕ (НА ЭКРАНЕ) */
body.dark-theme #cp-builder-right-panel #print-area {
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
body.dark-theme #cp-builder-right-panel #print-area .bg-white {
  background-color: var(--bg-card) !important;
}
body.dark-theme #cp-builder-right-panel #print-area .bg-gray-50 {
  background-color: var(--bg-hover) !important;
}
body.dark-theme #cp-builder-right-panel #print-area .text-gray-900,
body.dark-theme #cp-builder-right-panel #print-area .text-gray-800,
body.dark-theme #cp-builder-right-panel #print-area .text-gray-700 {
  color: var(--text) !important;
}
body.dark-theme #cp-builder-right-panel #print-area .text-gray-600,
body.dark-theme #cp-builder-right-panel #print-area .text-gray-500 {
  color: var(--text-secondary) !important;
}
body.dark-theme #cp-builder-right-panel #print-area .border-gray-200,
body.dark-theme #cp-builder-right-panel #print-area .border-gray-100 {
  border-color: var(--border) !important;
}
body.dark-theme #cp-builder-right-panel #print-area table td,
body.dark-theme #cp-builder-right-panel #print-area table th {
  border-color: var(--border) !important;
}
body.dark-theme #cp-builder-right-panel #print-area .bg-gray-100 {
  background-color: rgba(51, 65, 85, 0.6) !important;
}

body.dark-theme .text-slate-900,
body.dark-theme .text-slate-800 { color: var(--text) !important; }
body.dark-theme .text-slate-700,
body.dark-theme .text-slate-600 { color: var(--text-secondary) !important; }
body.dark-theme .text-slate-500,
body.dark-theme .text-slate-400 { color: var(--text-muted) !important; }

/* Полупрозрачные бейджи в темной теме */
body.dark-theme .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important; border: 1px solid rgba(147, 197, 253, 0.2); }
body.dark-theme .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; color: #6ee7b7 !important; border: 1px solid rgba(110, 231, 183, 0.2); }
body.dark-theme .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; color: #fcd34d !important; border: 1px solid rgba(252, 211, 77, 0.2); }
body.dark-theme .bg-rose-50 { background-color: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; border: 1px solid rgba(252, 165, 165, 0.2); }
body.dark-theme .bg-indigo-50 { background-color: rgba(79, 70, 229, 0.15) !important; color: #a5b4fc !important; border: 1px solid rgba(165, 180, 252, 0.2); }

body.dark-theme .text-blue-600 { color: #60a5fa !important; }
body.dark-theme .text-emerald-600 { color: #34d399 !important; }
body.dark-theme .text-rose-600 { color: #f87171 !important; }
body.dark-theme .text-amber-600 { color: #fbbf24 !important; }

/* Фикс видимости границ в таблицах */
body.dark-theme .border-slate-200, 
body.dark-theme .border-slate-100,
body.dark-theme .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
body.dark-theme .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { 
  border-color: var(--border) !important; 
}

/* Zebra для таблиц в темной теме */
body.dark-theme tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Формы ввода */
body.dark-theme input, 
body.dark-theme select, 
body.dark-theme textarea { 
  background-color: rgba(15, 23, 42, 0.4) !important; 
  border-color: var(--border) !important; 
  color: var(--text) !important; 
}
body.dark-theme input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* --- ПРЕМИУМ-КАРТОЧКИ --- */
.premium-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.premium-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(59, 130, 246, 0.3);
}

/* --- КНОПКИ --- */
.premium-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-xl);
  font-weight: 700;
  transition: var(--transition);
  cursor: pointer;
  border: none;
}
.premium-btn-blue {
  background: linear-gradient(135deg, #004b93 0%, #0066cc 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 75, 147, 0.3);
}
.premium-btn-blue:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 75, 147, 0.4);
}

/* GLASSMORPHISM */
.glass-header {
  background: var(--bg-sidebar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.glass-sidebar {
  background: var(--bg-sidebar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid var(--border);
}

/* --- TOASTS --- */
.toast {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-xl);
  font-weight: 600;
  font-size: 0.875rem;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-info { background: var(--info); }
.toast-warning { background: var(--warning); }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(100vh) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Плавное переключение вкладок (экранов CRM) */
div[id^="app-"] {
  animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes tabFadeIn {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }

/* ─── ПЕЧАТЬ ─────────────────────────────────────────────── */
@page {
  size: A4;
  margin: 0;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  html, body {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Сброс отступа от сайдбара */
  #main-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  /* Скрываем UI-хром (sidebar и header уже имеют Tailwind print:hidden) */
  #sidebar,
  header,
  #toastContainer,
  .no-print,
  .ql-toolbar {
    display: none !important;
  }

  /* Quill-контент: убираем ограничения высоты */
  .ql-editor {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }
  .ql-container {
    border: none !important;
    height: auto !important;
  }

  /* Строки не разрываются, но таблица МОЖЕТ переходить на следующую страницу */
  table               { page-break-inside: auto !important; }
  tr                  { page-break-inside: avoid !important; page-break-after: auto !important; }
  thead               { display: table-header-group; }
  .print-no-break     { page-break-inside: avoid !important; }

  /* ── Бланки (letter_builder) ────────────────────── */
  /* ВНИМАНИЕ: @page внутри @media print браузеры игнорируют.
     Поля задаём через padding самого #letter-print-area */

  #app-blanks {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Скрываем всё кроме бланка A4 */
  #letter-app-wrapper > aside,
  #letter-app-wrapper .premium-card,
  #letterAutoSaveIndicator,
  #letter-body-drop {
    display: none !important;
  }
  /* Сбрасываем контейнер — без отступов, без ограничения ширины */
  #letter-app-wrapper,
  #letter-app-wrapper > div,
  #letter-app-wrapper > div > div {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  /* Бланк A4: поля задаём через padding (15mm = ~56px).
     @page { margin: 0 } → страница без отступов, элемент сам создаёт поля */
  #letter-print-area {
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 15mm !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 267mm !important;
    display: block !important;
  }
  /* Распорка — фиксированная высота при печати */
  #letter-print-area .flex-1 {
    display: none !important;
  }
  #letter-print-area > div[style*="height:24px"] {
    height: 24px !important;
    display: block !important;
  }
  /* Блок подписи: минимальный отступ сверху при печати */
  #letter-print-area .flex.justify-between.items-end {
    page-break-inside: avoid !important;
    margin-top: 8px !important;
  }
  /* Левая часть подписи — по центру вертикально */
  #letter-out-sign-title {
    align-self: center;
  }
  /* Исполнитель не разрывать */
  #letter-out-executor {
    page-break-inside: avoid !important;
  }
  /* Таблицы из Word — не вылезать за край, разрыв между строками разрешён */
  #letter-out-body table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    word-break: break-word !important;
    border-collapse: collapse !important;
    page-break-inside: auto !important;
  }
  #letter-out-body td, #letter-out-body th {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    border: 1px solid #999 !important;
    background: transparent !important;
  }
  /* Строка не разрывается пополам, но между строками разрыв страницы разрешён */
  #letter-out-body tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }
  /* Абзацы внутри ячеек — без лишних отступов */
  #letter-out-body td p, #letter-out-body th p {
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
  }
  /* Шапка таблицы повторяется на каждой странице */
  #letter-out-body thead {
    display: table-header-group;
  }

  /* ── КП (cp_builder) ────────────────────────────── */
  #app-cp-builder {
    height: auto !important;
    overflow: visible !important;
  }
  #cp-builder-left-panel,
  #cp-toolbar,
  .cp-no-print {
    display: none !important;
  }
}
body.dark-theme ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); }

/* ── Бланки: таблицы в превью (экранный режим) ──────────────────────────── */
#letter-out-body table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  font-size: 10pt;
  table-layout: auto;
  word-break: break-word;
  margin-bottom: 8px;
}
#letter-out-body td, #letter-out-body th {
  border: 1px solid #d1d5db;
  padding: 5px 8px;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: break-word;
  /* фон НЕ задаём — берём из inline-стилей Word */
}
#letter-out-body td p, #letter-out-body th p {
  margin: 0;
  padding: 0;
  text-indent: 0;
}
#letter-out-body h2 {
  font-size: 14pt;
  font-weight: 700;
  margin: 0 0 8px;
}
#letter-out-body h3 {
  font-size: 11pt;
  font-weight: 700;
  margin: 12px 0 4px;
}
/* Редактор бланка (contenteditable) — тоже без серых фонов */
#letter-body-editor td, #letter-body-editor th {
  border: 1px solid #d1d5db;
  padding: 4px 8px;
  vertical-align: top;
}

/* --- ЭКОНОМИКА (НЕОНОВЫЙ СТИЛЬ) --- */
#economicsBlock {
  transition: var(--transition);
}
body.dark-theme #economicsBlock {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Фикс для Quill в темной теме */
body.dark-theme .ql-editor { color: var(--text); }
body.dark-theme .ql-toolbar { background: rgba(15, 23, 42, 0.5); }

/* --- HERMES KAMAZ ANIMATION --- */
.hermes-kamaz-loader {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-size: 16px;
  margin-left: 8px;
  width: 55px; /* Запас хода для машинки */
  height: 24px;
}
.hermes-kamaz-loader.inline {
  margin-left: 12px;
}
.hermes-kamaz-loader .truck-container {
  display: inline-flex;
  align-items: center;
  position: absolute;
  left: 0;
  animation: kamazDrive 3s infinite ease-in-out;
}
.hermes-kamaz-loader .bounce-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
  animation: kamazBounce 0.25s infinite alternate ease-in-out;
}
.hermes-kamaz-loader .truck-icon {
  display: inline-block;
  animation: kamazFlip 3s infinite step-end;
}
.hermes-kamaz-loader .dust-container-left {
  position: absolute;
  left: -8px;
  bottom: -2px;
  animation: showDustLeft 3s infinite step-end;
}
.hermes-kamaz-loader .dust-container-right {
  position: absolute;
  right: -8px;
  bottom: -2px;
  transform: scaleX(-1);
  animation: showDustRight 3s infinite step-end;
}
.hermes-kamaz-loader .dust {
  display: inline-block;
  font-size: 10px;
  animation: dustPuff 0.4s infinite linear;
}

@keyframes kamazDrive {
  0% { transform: translateX(0px); }
  45% { transform: translateX(35px); }
  50% { transform: translateX(35px); }
  95% { transform: translateX(0px); }
  100% { transform: translateX(0px); }
}
@keyframes kamazFlip {
  0% { transform: scaleX(-1); }
  50% { transform: scaleX(1); }
  100% { transform: scaleX(-1); }
}
@keyframes showDustLeft {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes showDustRight {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes dustPuff {
  0% { transform: translateX(0px) scale(0.5); opacity: 0.8; }
  100% { transform: translateX(-10px) scale(1.5); opacity: 0; }
}
@keyframes kamazBounce {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-1.5px) rotate(-1deg); }
}