/* =====================================================================
   Кастомная тема CRM — поверх Bootstrap 5.3
   Палитра по референсу "Шторная CRM.html" (shadcn/Tailwind teal-600 #009588)
   Light + Dark (по референсу, правильные цвета)
   ===================================================================== */

:root {
  /* --- Нейтральная палитра (light, по референсу) --- */
  --bs-body-bg:           #ffffff;
  --bs-body-color:        #0a0a0a;
  --bs-emphasis-color:    #171717;
  --bs-secondary-color:   #737373;
  --bs-tertiary-color:    #a1a1a1;
  --bs-border-color:      #e5e5e5;
  --bs-secondary-bg:      #f5f5f5;
  --bs-tertiary-bg:       #fafafa;

  /* --- Primary (используем "почти чёрный" как в shadcn, акцент — teal) --- */
  --bs-primary:           #009588;          /* teal-600 — бренд-акцент */
  --bs-primary-rgb:       0, 149, 136;
  --bs-emphasis-bg:       #171717;
  --bs-emphasis-bg-rgb:   23, 23, 23;

  /* --- Бренд-акценты (Tailwind-like) --- */
  --crm-teal-500:          #00baa7;
  --crm-teal-600:          #009588;
  --crm-emerald-500:       #00bb7f;
  --crm-emerald-600:       #009767;
  --crm-amber-500:         #f99c00;
  --crm-amber-600:         #dd7400;
  --crm-rose-500:          #f43f5e;
  --crm-rose-600:          #e11d48;

  /* --- Sidebar (по референсу: bg-card = #fff, border #e5e5e5) --- */
  --crm-sidebar-bg:        #ffffff;
  --crm-sidebar-border:    #e5e5e5;
  --crm-sidebar-text:      #0a0a0a;
  --crm-sidebar-muted:     #737373;
  --crm-sidebar-active-bg: rgba(0, 186, 167, 0.10);  /* teal-500/10 */
  --crm-sidebar-hover-bg:  #f5f5f5;
  --crm-sidebar-avatar-bg: #009588;

  /* --- Радиусы и тени --- */
  --crm-radius-sm: 0.375rem;
  --crm-radius:    0.625rem;     /* 10px по референсу */
  --crm-radius-lg: 0.875rem;     /* 14px = radius+4 (rounded-xl) */
  --crm-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --crm-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);

  /* Segoe UI — решение Дмитрия (13.09): Inter пробовали, он крупнее и хуже смотрелся.
     system-ui/Segoe UI — нативный шрифт Windows, загружать веб-шрифт не нужно. */
  --bs-body-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

}

/* --- Тёмная тема (по референсу .dark) --- */
[data-bs-theme="dark"] {
  --bs-body-bg:           #0a0a0a;
  --bs-body-color:        #fafafa;
  --bs-emphasis-color:    #fafafa;
  --bs-secondary-color:   #a1a1a1;
  --bs-tertiary-color:    #737373;
  --bs-border-color:      rgba(255,255,255,0.10);
  --bs-secondary-bg:      #262626;
  --bs-tertiary-bg:       #171717;

  --bs-primary:           #00baa7;        /* teal-400 в dark — светлее для контраста */
  --bs-primary-rgb:       0, 186, 167;
  --bs-emphasis-bg:       #e5e5e5;
  --bs-emphasis-bg-rgb:   229, 229, 229;

  --crm-sidebar-bg:        #171717;
  --crm-sidebar-border:    rgba(255,255,255,0.10);
  --crm-sidebar-text:      #fafafa;
  --crm-sidebar-muted:     #a1a1a1;
  --crm-sidebar-active-bg: rgba(0, 186, 167, 0.10);
  --crm-sidebar-hover-bg:  #262626;
  --crm-sidebar-avatar-bg: #00baa7;

  --bs-link-color-rgb:    0, 186, 167;
  --bs-link-hover-color-rgb: 0, 186, 167;

}

/* =====================================================================
   Bootstrap overrides — primary button (gradient teal->emerald в референсе)
   ===================================================================== */
.btn-primary {
  --bs-btn-bg:             var(--crm-teal-600);
  --bs-btn-border-color:   var(--crm-teal-600);
  --bs-btn-hover-bg:       #007a6e;
  --bs-btn-hover-border-color: #007a6e;
  --bs-btn-active-bg:      #006a60;
  --bs-btn-active-border-color: #006a60;
  --bs-btn-disabled-bg:    var(--crm-teal-600);
  --bs-btn-disabled-border-color: var(--crm-teal-600);
  --bs-btn-color:          #fff;
  --bs-btn-hover-color:    #fff;
  --bs-btn-active-color:   #fff;

}

.btn-gradient {
  background: linear-gradient(135deg, var(--crm-teal-600) 0%, var(--crm-emerald-600) 100%);
  border: none;
  color: #fff;
  transition: opacity 0.15s ease;

}
.btn-gradient:hover { opacity: 0.92; color: #fff; 
}

/* outline-кнопки (в т.ч. radio btn-check «тип договора») — брендовый teal вместо синего */
.btn-outline-primary {
  --bs-btn-color:        var(--crm-teal-600);
  --bs-btn-border-color: var(--crm-teal-600);
  --bs-btn-hover-bg:     var(--crm-teal-600);
  --bs-btn-hover-border-color: var(--crm-teal-600);
  --bs-btn-hover-color:  #fff;
  --bs-btn-active-bg:    var(--crm-teal-600);
  --bs-btn-active-border-color: var(--crm-teal-600);
  --bs-btn-active-color: #fff;

}
.btn-check:checked + .btn-outline-primary {
  background: linear-gradient(135deg, var(--crm-teal-600) 0%, var(--crm-emerald-600) 100%);
  border-color: transparent;
  color: #fff;

}

/* Рекламация: красноватая кнопка */
.btn-claim {
  --bs-btn-color:        var(--crm-rose-600);
  --bs-btn-border-color: var(--crm-rose-600);
  --bs-btn-hover-bg:     var(--crm-rose-600);
  --bs-btn-hover-border-color: var(--crm-rose-600);
  --bs-btn-hover-color:  #fff;
  --bs-btn-active-bg:    #e11d48;
  --bs-btn-active-border-color: #e11d48;
  --bs-btn-active-color: #fff;

}

/* Прилипающая кнопка «Сохранить изменения» карточки договора (правый нижний угол) */
.save-bar {
  position: fixed;
  right: 24px; bottom: 20px;
  z-index: 1020;

}

/* Вкладки карточки договора (Изделия/Задачи/Платежи/Логи) — брендовый teal */
.contract-tabs-card .nav-tabs {
  border-bottom: 1px solid var(--bs-border-color);
  gap: 0.25rem;

}
.contract-tabs-card .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.55rem 0.9rem;
  background: transparent;

}
.contract-tabs-card .nav-tabs .nav-link:hover { color: var(--crm-teal-600); 
}
.contract-tabs-card .nav-tabs .nav-link.active {
  color: var(--crm-teal-600);
  border-bottom-color: var(--crm-teal-600);
  background: transparent;
  font-weight: 600;

}
[data-bs-theme="dark"] .contract-tabs-card .nav-tabs .nav-link.active {
  color: var(--crm-teal-500);
  border-bottom-color: var(--crm-teal-500);

}

/* Детальная калькуляция «Подробнее» — на весь блок */
.calc-details-table {
  width: 100%;
  max-width: none !important;

}
.calc-details-table td { padding: 0.3rem 0.4rem; font-size: 0.9rem; 
}
.calc-details-table td:last-child { width: 130px; text-align: right; white-space: nowrap; 
}

.text-primary { color: var(--bs-primary) !important; 
}
.bg-primary { background-color: var(--bs-primary) !important; 
}
.border-primary { border-color: var(--bs-primary) !important; 
}
.link-primary { color: var(--bs-primary) !important; 
}
.link-primary:hover { color: var(--crm-emerald-600) !important; 
}

/* =====================================================================
   Страница входа (auth) — по референсу login.html (teal/emerald градиент)
   ===================================================================== */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d9488 0%, #059669 100%);
  position: relative;
  overflow: hidden;

}
.auth-body::before,
.auth-body::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  filter: blur(80px);

}
.auth-body::before { width: 420px; height: 420px; top: -120px; left: -120px; 
}
.auth-body::after  { width: 520px; height: 520px; bottom: -160px; right: -160px; 
}

.auth-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 1rem;

}
/* Центрирование карточки входа по вертикали; на мобильном — отступ сверху */
.auth-body {
  min-height: 100vh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;

}

.auth-card {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 2.25rem 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.20);

}
.auth-brand { text-align: center; margin-bottom: 1.5rem; 
}
.auth-brand-icon {
  width: 56px; height: 56px;
  margin: 0 auto 0.875rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--crm-teal-600), var(--crm-emerald-600));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff;
  box-shadow: 0 10px 24px rgba(0,149,136,0.30);

}
.auth-title { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -0.025em; 
}
.auth-subtitle { font-size: 0.9rem; color: var(--bs-secondary-color); margin: 0.2rem 0 0; 
}
.auth-hint { text-align: center; color: var(--bs-secondary-color); font-size: 0.875rem; 
}
.auth-submit {
  background: linear-gradient(135deg, var(--crm-teal-600), var(--crm-emerald-600));
  border: none; font-weight: 600; color: #fff;

}
.auth-submit:hover { opacity: 0.92; color: #fff; 
}
.auth-demo-hint { text-align: center; font-size: 0.825rem; color: var(--bs-secondary-color); 
}
.auth-demo-hint code {
  background: rgba(0,149,136,0.10);
  color: var(--bs-primary);
  padding: 0.1rem 0.4rem;
  border-radius: 0.35rem;
  font-weight: 600;

}

/* =====================================================================
   Основной layout (sidebar + main) — по референсу Шторная CRM.html
   ===================================================================== */
.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bs-body-bg);

}

/* --- Sidebar (280px, bg-card, border-r) --- */
.sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--crm-sidebar-bg);
  border-right: 1px solid var(--crm-sidebar-border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  transition: width 0.2s ease;

}
.sidebar-brand {
  display: flex; align-items: center; gap: 0.6rem;
  height: 56px; padding: 0 1rem;
  border-bottom: 1px solid var(--crm-sidebar-border);

}
.sidebar-brand-icon {
  width: 32px; height: 32px;
  border-radius: 0.625rem;
  background: var(--crm-teal-600);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;

}
.sidebar-brand-text { font-weight: 600; font-size: 0.95rem; color: var(--crm-sidebar-text); 
}

.sidebar-nav {
  flex: 1; overflow-y: auto;
  padding: 0.5rem;
  display: flex; flex-direction: column; gap: 2px;

}
.sidebar-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  color: var(--crm-sidebar-muted);
  text-decoration: none;
  font-size: 0.875rem; font-weight: 500;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;

}
.sidebar-link:hover {
  background: var(--crm-sidebar-hover-bg);
  color: var(--crm-sidebar-text);

}
.sidebar-link.active {
  background: var(--crm-sidebar-active-bg);
  color: var(--crm-teal-600);
  font-weight: 600;
  border-left: 2px solid var(--crm-teal-600);

}
[data-bs-theme="dark"] .sidebar-link.active { color: var(--crm-teal-500); border-left-color: var(--crm-teal-500); 
}
.sidebar-link i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; 
}
.sidebar-link .badge-count {
  margin-left: auto;
  background: var(--crm-rose-600);
  color: #fff;
  font-size: 0.7rem;
  border-radius: 1rem;
  padding: 0.1rem 0.4rem;
  min-width: 1.3rem; text-align: center;

}

/* --- Низ sidebar: сворачивание + профиль (имя, роль, иконки темы/выхода) --- */
.sidebar-footer {
  border-top: 1px solid var(--crm-sidebar-border);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

}
.sidebar-collapse-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0.45rem 0.65rem;
  background: transparent; border: none;
  color: var(--crm-sidebar-muted);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
  border-radius: 0.5rem;

}
.sidebar-collapse-toggle:hover { background: var(--crm-sidebar-hover-bg); color: var(--crm-sidebar-text); 
}

.sidebar-profile {
  display: flex; flex-direction: column; gap: 0.6rem;
  width: 100%;

}
.sidebar-profile-info { min-width: 0; 
}
.sidebar-profile-name { font-size: 0.875rem; font-weight: 600; color: var(--crm-sidebar-text); line-height: 1.2; padding-left: 0.65rem; 
}
.sidebar-profile-role { font-size: 0.75rem; color: var(--crm-sidebar-muted); margin-top: 0.15rem; padding-left: 0.65rem; 
}
.sidebar-profile-actions {
  padding-left: 3px; display: flex; align-items: center; gap: 0.35rem;
  margin-top: 0.5rem; 

}
.theme-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px;
  background: transparent; border: none; border-radius: 0.4rem;
  color: var(--crm-sidebar-muted);
  cursor: pointer; transition: all 0.15s;
  padding: 0;

}
.theme-toggle-btn:hover { background: var(--crm-sidebar-hover-bg); color: var(--crm-sidebar-text); 
}
.theme-toggle-btn i { font-size: 1rem; width: auto; 
}
.sidebar-logout-btn {
  background: transparent; border: none;
  color: var(--crm-sidebar-muted);
  width: 30px; height: 28px;
  border-radius: 0.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
  padding: 0;

}
.sidebar-logout-btn:hover { color: var(--crm-rose-600); background: rgba(244,63,94,0.10); 
}

/* Стрелка сворачивания — прилипает к правому краю ряда действий */
.sidebar-collapse-toggle {
  margin-left: auto;
  background: transparent; border: none;
  color: var(--crm-sidebar-muted);
  width: 30px; height: 28px;
  border-radius: 0.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
  padding: 0;

}
.sidebar-collapse-toggle:hover { background: var(--crm-sidebar-hover-bg); color: var(--crm-sidebar-text); 
}

/* =====================================================================
   Sidebar в свёрнутом виде (только иконки) — всё ровно в одну колонку.
   Состояние = класс sb-collapsed на <html> (ставится до отрисовки из localStorage).
   ===================================================================== */
@media (min-width: 768px) {
  .sb-collapsed .sidebar {
    width: 76px;
  
}
  /* Лого по центру, без текста */
  .sb-collapsed .sidebar-brand { justify-content: center; padding: 0; 
}
  .sb-collapsed .sidebar-brand-text { display: none !important; 
}

  /* Пункты меню: только иконки */
  .sb-collapsed .sidebar-nav { padding: 0.5rem; 
}
  .sb-collapsed .sidebar-link { justify-content: center; padding: 0.6rem 0; position: relative; 
}
  .sb-collapsed .sidebar-link span { display: none !important; 
}
  .sb-collapsed .sidebar-link i { width: auto; 
}
  .sb-collapsed .sidebar-link .badge-count {
    position: absolute; top: 4px; right: 4px;
    margin-left: 0;
    min-width: 1rem; height: 1rem; padding: 0;
    font-size: 0.6rem;
    display: inline-flex; align-items: center; justify-content: center;
  
}

  /* Низ: имя/роль скрыты, колонка иконок по центру */
  .sb-collapsed .sidebar-footer { align-items: stretch; padding: 0.5rem 0.4rem; 
}
  .sb-collapsed .sidebar-profile { align-items: center; 
}
  .sb-collapsed .sidebar-profile-name,
  .sb-collapsed .sidebar-profile-role { display: none !important; 
}
  .sb-collapsed .sidebar-profile-actions {
    flex-direction: column; margin-top: 0; gap: 0.4rem;
    align-items: center; width: 100%;
  
}
  /* стрелка — обычная ячейка колонки, без прилипания вправо */
  .sb-collapsed .sidebar-collapse-toggle { margin-left: 0; 
}

}

/* --- Main content --- */
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; 
}

.app-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  height: 56px; padding: 0 1.5rem;
  background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bs-border-color);

}
.app-header h1 { font-size: 1.125rem; font-weight: 600; margin: 0; 
}
.app-header-spacer { flex: 1; 
}
.app-header-actions { display: flex; align-items: center; gap: 0.5rem; 
}

/* --- Header: кнопки поиска/колокольчика/профиля --- */
.header-icon-btn {
  background: transparent; border: none;
  color: var(--bs-secondary-color);
  width: 36px; height: 36px;
  border-radius: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s; position: relative;

}
.header-icon-btn:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); 
}
.header-icon-btn i { font-size: 1.1rem; 
}

.header-search {
  display: none; gap: 0.5rem; align-items: center;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem; padding: 0.4rem 0.75rem;
  font-size: 0.875rem; color: var(--bs-secondary-color);
  cursor: pointer;

}
@media (min-width: 640px) { .header-search { display: inline-flex; 
} 
}
.header-search kbd {
  font-size: 0.625rem; padding: 0.1rem 0.3rem;
  background: var(--bs-secondary-bg); border-radius: 0.3rem;
  font-family: ui-monospace, monospace;

}

.header-bell { position: relative;
}
/* Бейдж колокольчика (28.10, п.11 Дмитрия): красный кружок с цифрой,
   аккуратный — в правом верхнем углу иконки */
.header-bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 0.25rem;
  background: #dc3545; color: #fff;
  border-radius: 1rem; font-size: 0.625rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bs-body-bg);
}
[data-bs-theme="dark"] .header-bell-badge { background: #dc3545; color: #fff;
}

.header-profile {
  display: flex; align-items: center; gap: 0.5rem;
  background: transparent; border: none;
  cursor: pointer; padding: 0;

}
.header-profile-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--crm-teal-600);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.8rem;

}
.header-profile-name {
  font-size: 0.875rem; font-weight: 600;
  color: var(--bs-body-color);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

}
@media (max-width: 767.98px) { .header-profile-name { display: none; 
} 
}

.header-logout {
  background: transparent; border: none;
  color: var(--bs-secondary-color);
  width: 36px; height: 36px;
  border-radius: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;

}
.header-logout:hover { background: rgba(244,63,94,0.10); color: var(--crm-rose-600); 
}

.app-content { flex: 1; padding: 1.5rem; overflow-y: auto; 
}

/* --- Мобильный гамбургер в header --- */
.sidebar-mobile-toggle {
  background: transparent; border: none;
  color: var(--bs-body-color);
  width: 36px; height: 36px;
  border-radius: 0.5rem;
  display: none; align-items: center; justify-content: center;
  cursor: pointer;

}
@media (max-width: 767.98px) { .sidebar-mobile-toggle { display: inline-flex; 
} 
}

/* =====================================================================
   KPI-плитки (по референсу: круглые иконки 48px, числа 30px bold)
   ===================================================================== */
.kpi-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--crm-radius-lg);
  padding: 1rem; /* 07.11 (Дмитрий): высота плитки как в Дашборде (~82px вместо ~98px) */
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  cursor: pointer;

}
/* KPI-ряд (06.09): правило без исключений — карточки минимум 256px и зазор 16px.
   Если всё вместе не помещается в строку — перенос на следующую, карточки
   последней строки растягиваются на равную ширину. Никогда не сжимаются и не слипаются. */
.row.row-cols-2:has(> .col > .kpi-card) {
  display: flex;      /* не Bootstrap row с отрицательными margin — чистый flex */
  flex-wrap: wrap;
  gap: 0 16px;        /* 16px по горизонтали; по вертикали 0 — межстрочный отдаёт g-3 (mb-4 ряда) */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1rem; /* визуальный отступ до блока ниже, как было с g-3 */
}
.row.row-cols-2:has(> .col > .kpi-card) > .col {
  flex: 1 1 256px;    /* база 256px, растёт, чтобы заполнить строку ровно */
  min-width: 256px;   /* но не сжимается ниже */
  max-width: none;
  padding: 0;         /* паддинги колонки не участвуют — зазор делает gap */
}

/* Поисковые поля с иконкой: фокус подсвечивает ВСЮ группу (иконка + поле), 06.09 */
.input-group:focus-within .input-group-text {
  border-color: var(--crm-teal-600);
  color: var(--crm-teal-600);
}
.input-group:focus-within .form-control {
  border-color: var(--crm-teal-600);
  box-shadow: none;
}
.kpi-card:hover { box-shadow: var(--crm-shadow-md); transform: translateY(-1px); 
}
.kpi-card .d-flex { gap: 0.75rem;
}
.kpi-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
  border: 2px solid currentColor; /* ободок в цвет иконки (05.09) */
}
.kpi-icon.teal    { background: rgba(0,186,167,0.10); color: var(--crm-teal-600);
}
.kpi-icon.emerald { background: rgba(0,187,127,0.10); color: var(--crm-emerald-600);
}
.kpi-icon.amber   { background: rgba(249,156,0,0.10);  color: var(--crm-amber-600);
}
.kpi-icon.rose    { background: rgba(244,63,94,0.10);  color: var(--crm-rose-600);
}
.kpi-icon.slate   { background: rgba(100,116,139,0.10); color: var(--crm-slate-600, #475569);
}
[data-bs-theme="dark"] .kpi-icon.teal    { color: var(--crm-teal-500);
}
[data-bs-theme="dark"] .kpi-icon.emerald { color: var(--crm-emerald-500);
}
[data-bs-theme="dark"] .kpi-icon.amber   { color: var(--crm-amber-500);
}
[data-bs-theme="dark"] .kpi-icon.rose    { color: var(--crm-rose-500);
}
[data-bs-theme="dark"] .kpi-icon.slate   { color: #94a3b8;
}
/* Нейтральная цифра KPI: чёрная в светлой теме, белая в тёмной (05.09) */
.kpi-value-neutral { color: var(--bs-emphasis-color);
}
.kpi-value { font-size: 1.875rem; font-weight: 700; line-height: 1; letter-spacing: -0.025em; 
}
.kpi-label { font-size: 0.875rem; color: var(--bs-secondary-color); margin-top: 0.3rem; 
}
.kpi-sub { font-size: 0.75rem; color: var(--bs-secondary-color); margin-top: 0.5rem; display: flex; align-items: center; gap: 0.3rem; 
}

/* --- Плашки статусов (по референсу: slate/violet/amber/cyan/blue) --- */
.status-badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.8rem; font-weight: 600;

}
.status-secondary { background: #f1f5f9; color: #334155; 
}
.status-warning   { background: #fef3c7; color: #92400e; 
}
.status-danger    { background: #fee2e2; color: #991b1b; 
}
.status-info      { background: #cffafe; color: #155e75; 
}
.status-primary   { background: rgba(0,186,167,0.15); color: var(--crm-teal-600); 
}
.status-success   { background: #d1fae5; color: #065f46; 
}
.status-violet   { background: #ede9fe; color: #5b21b6; 
}
[data-bs-theme="dark"] .status-secondary { background: #334155; color: #e2e8f0; 
}
[data-bs-theme="dark"] .status-warning   { background: #78350f; color: #fde68a; 
}
[data-bs-theme="dark"] .status-danger    { background: #7f1d1d; color: #fecaca; 
}
[data-bs-theme="dark"] .status-info      { background: #155e75; color: #cffafe; 
}
[data-bs-theme="dark"] .status-primary   { background: rgba(0,186,167,0.20); color: var(--crm-teal-500); 
}
[data-bs-theme="dark"] .status-success   { background: #064e3b; color: #a7f3d0; 
}
[data-bs-theme="dark"] .status-violet    { background: #2e1065; color: #ddd6fe; 
}

/* --- Плашки статусов ДОГОВОРА: отдельный класс на каждый статус (19.09, по решению
   Дмитрия — раньше статусы делили общие классы, цвета нельзя было менять независимо).
   Стартовые цвета = прежние общие (вид не изменился). Менять — только здесь.
   Маппинг код → класс: app/reference.php, statuses(). --- */
.status-calc        { background: #5e4ddd; color: #ffffff; }
.status-clarify     { background: #a3abb3; color: #ffffff; }
.status-cancel      { background: #3e4652; color: #e55a5a; }
.status-selfpickup  { background: #c3691a; color: #ffffff; }
.status-pickup      { background: #9656cf; color: #ffffff; }
.status-pickupdone  { background: #9656cf; color: #ffffff; }
.status-measuring   { background: #bf9f41; color: #ffffff; }
.status-washing     { background: #5595f3; color: #ffffff; }
.status-packing     { background: #cbc71d; color: #ffffff; }
/* Согласование (05.10, решение Дмитрия): тот же цвет, что у кнопки согласования изделия */
.status-approval    { background: #5e4ddd; color: #ffffff; }
.status-ready       { background: #009767; color: #ffffff; }
.status-delivery    { background: #9ad939; color: #ffffff; }
.status-closed      { background: #db3141; color: #ffffff; }

[data-bs-theme="dark"] .status-calc        { background: #5e4ddd; color: #000000; }
[data-bs-theme="dark"] .status-clarify     { background: #c1d0df; color: #000000; }
[data-bs-theme="dark"] .status-cancel      { background: #3e4652; color: #e55a5a; }
[data-bs-theme="dark"] .status-selfpickup  { background: #c3691a; color: #000000; }
[data-bs-theme="dark"] .status-pickup      { background: #9656cf; color: #000000; }
[data-bs-theme="dark"] .status-pickupdone  { background: #9656cf; color: #000000; }
[data-bs-theme="dark"] .status-measuring   { background: #bf9f41; color: #000000; }
[data-bs-theme="dark"] .status-washing     { background: #5595f3; color: #000000; }
[data-bs-theme="dark"] .status-packing     { background: #cbc71d; color: #000000; }
[data-bs-theme="dark"] .status-approval    { background: #5e4ddd; color: #000000; }
[data-bs-theme="dark"] .status-ready       { background: #009767; color: #000000; }
[data-bs-theme="dark"] .status-delivery    { background: #9ad939; color: #000000; }
[data-bs-theme="dark"] .status-closed      { background: #db3141; color: #000000; }

/* --- Карточки (по референсу: rounded-xl, border, shadow-sm) --- */
.card { border-radius: var(--crm-radius-lg); box-shadow: var(--crm-shadow-sm);
}

/* ==== 07.11 (Дмитрий): единая высота контролов карточек фильтров 34px ====
   Промежуточный размер между sm (31px) и дефолтом (38px). sm-классы в вью остаются,
   высота/паддинги переопределяются только внутри .filter-card (Договоры + Задачи),
   модалки и остальные формы системы не задеваются */
.filter-card .form-control,
.filter-card .form-select {
  height: 34px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  font-size: 0.875rem;
}
.filter-card .input-group-text {
  height: 34px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  font-size: 0.875rem;
}
.filter-card .btn {
  height: 34px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 07.11 (Дмитрий): «Фильтры» и «Найти» — единая ширина 100px во всех списках */
.filter-card .btn-filters-bar {
  width: 100px;
  flex: 0 0 100px;
}

/* --- Таблицы --- */
.table-clickable tbody tr { cursor: pointer; transition: background 0.1s; 
}
.table-clickable tbody tr:hover { background: var(--bs-secondary-bg); 
}

/* --- Тосты --- */
.toast-success { background: #ecfdf5; border-left: 4px solid var(--crm-emerald-600); color: #065f46; 
}
.toast-error   { background: #fef2f2; border-left: 4px solid var(--crm-rose-600);  color: #991b1b; 
}

/* --- Flash-сообщение: плавающая плашка поверх контента --- */
.app-main { position: relative; 
}
.flash-toast {
  position: fixed;
  top: 64px;
  /* центр области контента = половина экрана + половина сайдбара (280/2),
     при свёрнутом сайдбаре поправим ниже */
  left: calc(50% + 140px);
  transform: translateX(-50%);
  z-index: 1090;
  max-width: min(560px, 60vw);
  padding: 0.75rem 1rem;
  border-radius: var(--crm-radius-md, 0.75rem);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  font-weight: 500;
  display: flex; align-items: center;
  animation: flash-in .25s ease-out;
  transition: opacity .5s ease, transform .5s ease;

}
.sb-collapsed .flash-toast { left: calc(50% + 38px); 
}
.flash-toast.is-hiding { opacity: 0; transform: translateX(-50%) translateY(-12px); 
}
.flash-toast-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0;
}
.flash-toast-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
}
.flash-toast-danger  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
}
[data-bs-theme="dark"] .flash-toast-success { background: #064e3b; color: #a7f3d0; border-color: #065f46;
}
[data-bs-theme="dark"] .flash-toast-info    { background: #1e3a8a; color: #bfdbfe; border-color: #1e40af;
}
[data-bs-theme="dark"] .flash-toast-danger  { background: #7f1d1d; color: #fecaca; border-color: #991b1b;
}
@keyframes flash-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); 
}
  to   { opacity: 1; transform: translateX(-50%) translateY(0); 
}

}
/* Мобильный: сайдбара нет — чистый центр экрана */
@media (max-width: 767.98px) {
  .flash-toast {
    top: 16px;
    left: 50% !important;
    max-width: calc(100vw - 24px);
    width: max-content;
  
}

}

/* --- Мобильная версия: sidebar как overlay --- */
.sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.40);
  z-index: 1035; display: none;

}
.sidebar-overlay.show { display: block; 
}

@media (max-width: 767.98px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 1040;
    width: 280px !important;          /* мобильное меню всегда полное, независимо от sb-collapsed */
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  
}
  .sidebar.show { transform: translateX(0); 
}

}

/* --- Пагинация: фирменный teal вместо синего Bootstrap --- */
.pagination {
  --bs-pagination-color: var(--crm-teal-600);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--crm-teal-600);
  --bs-pagination-hover-border-color: var(--crm-teal-600);
  --bs-pagination-focus-color: var(--crm-teal-600);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0,186,167,0.25);
  --bs-pagination-active-bg: var(--crm-teal-600);
  --bs-pagination-active-border-color: var(--crm-teal-600);

}
[data-bs-theme="dark"] .pagination {
  --bs-pagination-color: var(--crm-teal-500);
  --bs-pagination-active-bg: var(--crm-teal-500);
  --bs-pagination-active-border-color: var(--crm-teal-500);

}

/* --- Ссылки: teal, не синие --- */
a { color: var(--crm-teal-600); 
}
[data-bs-theme="dark"] a { color: var(--crm-teal-500); 
}
a:hover { color: var(--crm-emerald-600); 
}

/* --- Форм-контроль в фокусе — teal рамка --- */
.form-control:focus, .form-select:focus {
  border-color: var(--crm-teal-500);
  box-shadow: 0 0 0 0.25rem rgba(0,186,167,0.15);

}

/* --- Чекбоксы (17.10, решение Дмитрия): ФИРМЕННЫЙ teal (#00baa7) у ВСЕХ чекбоксов
   системы — как у чекбоксов доп.услуг изделий (.svc). Раньше teal был только
   у переключателя «В рекламации» (16.10) — теперь глобальное правило. */
.form-check-input[type="checkbox"] {
  border-color: #c7c7c7;
}
.form-check-input[type="checkbox"]:hover { border-color: #009588; }
.form-check-input[type="checkbox"]:checked {
  background-color: #00baa7;
  border-color: #00baa7;
}
.form-check-input[type="checkbox"]:focus {
  border-color: #00baa7;
  box-shadow: 0 0 0 0.25rem rgba(0,186,167,0.20);
}
.form-check-input[type="checkbox"]:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input[type="checkbox"]:disabled { opacity: .5; }
[data-bs-theme="dark"] .form-check-input[type="checkbox"] { border-color: #3f3f3f; background-color: #171717; }
[data-bs-theme="dark"] .form-check-input[type="checkbox"]:checked { border-color: #00baa7; background-color: #00baa7; }
/* Переключатель «В рекламации» (16.10) — наследует то же правило, отдельный класс оставлен
   для фокуса карточки (совместимость), собственного стиля больше не требуется. */

/* =====================================================================
   Клиенты: обложка модуля
   ===================================================================== */

/* Заголовки-ссылки таблицы без подчёркивания, аккуратная стрелка */
.th-sort-link { gap: 0.25rem; 
}
th.sortable a.th-sort-link:hover { color: var(--bs-primary); 
}

/* Действия в строке: кнопки уже, без рамок до ховера */
.row-actions .btn { padding: 0.2rem 0.45rem; --bs-btn-border-color: transparent; 
}
.row-actions .btn:hover { border-color: var(--bs-secondary); 
}

/* Карточка клиента: таблица «метка-значение» */
.client-info-table td { padding: 0.45rem 0.5rem; vertical-align: top; 
}
.client-info-table .info-label {
  color: var(--bs-secondary-color);
  width: 180px;
  font-size: 0.875rem;
  white-space: nowrap;

}

/* =====================================================================
   Сортировка по клику на заголовок таблицы
   ===================================================================== */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

}
th.sortable:hover { color: var(--bs-primary); 
}
th.sortable .sort-icon {
  font-size: 0.55rem;
  opacity: 0.55;
  margin-left: 0.25rem;
  vertical-align: middle;

}
th.sortable.sorted { color: var(--bs-primary); 
}
th.sortable.sorted .sort-icon { opacity: 1; 
}

/* =====================================================================
   Кастомный datepicker (попап-календарь)
   ===================================================================== */
.datepicker-group { cursor: pointer; position: relative; 
}
.datepicker-group input { cursor: pointer; 
}

.crm-datepicker-popup {
  position: absolute;
  z-index: 1085;
  width: 268px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
  padding: 0.75rem;
  color: var(--bs-body-color);

}
.crm-datepicker-popup .dp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;

}
.crm-datepicker-popup .dp-title {
  font-size: 0.9rem; font-weight: 600;

}
.crm-datepicker-popup .dp-nav {
  width: 28px; height: 28px;
  border: none; background: transparent;
  border-radius: 0.5rem;
  color: var(--bs-secondary-color);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;

}
.crm-datepicker-popup .dp-nav:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); 
}
.crm-datepicker-popup .dp-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.68rem; font-weight: 600;
  color: var(--bs-tertiary-color);
  text-transform: uppercase;
  margin-bottom: 0.25rem;

}
.crm-datepicker-popup .dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;

}
.crm-datepicker-popup .dp-day {
  height: 32px;
  border: none; background: transparent;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: var(--bs-body-color);
  cursor: pointer;
  transition: all 0.12s;

}
.crm-datepicker-popup .dp-day:hover { background: var(--bs-secondary-bg); 
}
.crm-datepicker-popup .dp-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--crm-teal-600);
  font-weight: 600;
  color: var(--crm-teal-600);

}
.crm-datepicker-popup .dp-day.is-selected {
  background: var(--crm-teal-600);
  color: #fff;
  font-weight: 600;

}
.crm-datepicker-popup .dp-day.is-selected.is-today { box-shadow: none; 
}
.crm-datepicker-popup .dp-footer {
  display: flex; justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bs-border-color);

}
.crm-datepicker-popup .dp-clear,
.crm-datepicker-popup .dp-today {
  border: none; background: transparent;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.4rem;
  cursor: pointer;

}
.crm-datepicker-popup .dp-clear { color: var(--bs-secondary-color); 
}
.crm-datepicker-popup .dp-clear:hover { background: var(--bs-secondary-bg); 
}
.crm-datepicker-popup .dp-today { color: var(--crm-teal-600); font-weight: 600; 
}
.crm-datepicker-popup .dp-today:hover { background: rgba(0,149,136,0.08); 
}

/* =====================================================================
   Карточка клиента: информационная таблица
   ===================================================================== */
.client-info-table .info-label {
  width: 42%;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  padding-left: 0;

}
.client-info-table td { padding: 0.45rem 0; font-size: 0.9rem; vertical-align: middle; 
}
.client-info-table tr { border-bottom: 1px solid var(--bs-border-color); 
}
.client-info-table tr:last-child { border-bottom: none; 
}

/* =====================================================================
   Модальные окна (по референсу — чистый вид)
   ===================================================================== */
.crm-modal {
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);

}
.crm-modal .form-label { font-size: 0.8rem; margin-bottom: 0.3rem; 
}
.crm-modal .modal-header { align-items: center; 
}
.crm-modal .modal-title { font-size: 1.05rem; 
}

/* Модалка создания договора: надёжный скролл на любых разрешениях.
   ВАЖНО: <form> между .modal-content и .modal-body разрывает стандартную
   flex-раскладку modal-dialog-scrollable, поэтому задаём её вручную:
   content = колонка с max-height (90vh), body — единственный скролл,
   header/footer остаются закреплены сверху/снизу. */
#contract-modal .modal-dialog {
  max-width: min(860px, calc(100vw - 1.5rem));

}
@media (max-width: 767.98px) {
  #contract-modal .modal-dialog { margin: 0.5rem auto; 
}

}
#contract-modal .modal-content {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: 92vh;
  overflow: hidden;

}
#contract-modal form {
  display: flex;
  flex-direction: column;
  min-height: 0;          /* ключ к скроллу вложенного блока во flex */
  overflow: hidden;

}
#contract-modal .modal-header {
  flex-shrink: 0;

}
#contract-modal .modal-body {
  overflow-y: auto !important;
  overscroll-behavior: contain;   /* скролл не «протекает» на страницу под модалкой */
  min-height: 0;

}
#contract-modal .modal-footer {
  flex-wrap: nowrap;
  flex-shrink: 0;

}

/* Адресная строка модалки договора: точные ширины по макету
   (город 150 · район 150 · улица 344 · подъезд 50 · этаж 50 · кв 50 + gap'ы) */
.contract-grid {
  display: grid;
  grid-template-columns: 150px 150px 323px 50px 50px 50px;
  gap: 0.5rem;

}
/* Скидка: на мобильном JS переносит узел в ячейку mobile-discount-cell
   (рядом с Кв.), на десктопе она пуста и схлопнута. */
.contract-grid .mobile-discount-cell:empty { display: none; 
}
@media (max-width: 767.98px) {
  .contract-grid {
    grid-template-columns: 1fr 1fr;  /* на мобильном — 2 колонки */
  
}
  .contract-grid .street-col { grid-column: span 2; 
}
  .contract-grid .mobile-discount-cell { display: block; 
}
  .params-row .discount-col { display: none; 
}

}

/* =====================================================================
   Тёмная тема — карточки/контейнеры цвета sidebar (по замечанию)
   ===================================================================== */
[data-bs-theme="dark"] .kpi-card {
  background: var(--crm-sidebar-bg);

}
[data-bs-theme="dark"] .card {
  background: var(--crm-sidebar-bg);

}
[data-bs-theme="dark"] .modal-content {
  background: var(--crm-sidebar-bg);

}
[data-bs-theme="dark"] .dropdown-menu {
  background: var(--crm-sidebar-bg);

}
[data-bs-theme="dark"] .toast {
  background: var(--crm-sidebar-bg);

}
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;

}
.item-cost { font-size: 1.05rem; 
}

/* ==== Карточка изделия (макет mockup_item.html, утверждён 30.08.2026) ==== */
.item-row { position: relative; border: 1px solid var(--bs-border-color); border-radius: 10px; margin-bottom: 14px; }
.item-row .card-body { padding: 10px 14px; }

/* Расчётные карточки снапшота (18.10): вид как у карточек изделий, только просмотр;
   плашки доп.услуг */
.calc-item-row { background: var(--bs-tertiary-bg); }
.calc-item-row .item-num { min-width: 40px; font-size: 1.15rem; }
.svc-chip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 0.78rem; line-height: 1; white-space: nowrap;
  background: rgba(0, 149, 136, 0.12); color: #00796b; border: 1px solid rgba(0, 149, 136, 0.35);
}
[data-bs-theme="dark"] .svc-chip { background: rgba(0, 186, 167, 0.15); color: #7fdbd2; border-color: rgba(0, 186, 167, 0.4); }

/* Просмотр «Расчет» (19.10): блок информации договора + блок предварительной
   калькуляции перед расчётными карточками (снапшот на момент записи).
   Блок договора — 12 полей в ДВЕ колонки по 6 строк (десктоп, решение Дмитрия 19.10),
   на мобильном — одна колонка; комментарий — на всю ширину. */
.calc-contract-block, .calc-totals-block {
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
}
.calc-info-two-cols {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto);
  grid-auto-flow: column; gap: 2px 24px; /* заливка ПО КОЛОНКАМ: 1-6 слева, 7-12 справа */
}
.ci-row { display: flex; align-items: baseline; gap: 8px; padding: 0.3rem 0; border-bottom: 1px solid var(--bs-border-color); min-width: 0; }
.ci-row:last-child, .ci-row:nth-last-child(2) { border-bottom: none; }
.ci-row label { color: var(--bs-secondary-color); font-size: 0.8rem; white-space: nowrap; margin: 0; flex-shrink: 0; }
.ci-row span { font-size: 0.85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) {
  .calc-info-two-cols { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .ci-row:last-child { border-bottom: none; }
  .ci-row:nth-last-child(2) { border-bottom: 1px solid var(--bs-border-color); }
}
.calc-totals-block .calc-details-table td:last-child { width: 110px; }
.calc-totals-block .calc-sub td { color: var(--bs-secondary-color); font-size: 0.82rem; padding: 0.15rem 0.4rem; }
.calc-totals-block tfoot td { padding: 0.4rem 0.4rem 0; }

/* Удалить — правый верхний угол */
.item-remove { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--crm-rose-600); background: transparent; border: none; }
.item-remove:hover { background: rgba(244, 63, 94, 0.12); }

/* Рулетка — центр правой стороны */
.item-tape { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-secondary-color); }
.item-tape:hover { color: var(--bs-primary); border-color: var(--bs-primary); }

/* Основная строка: № | фото | материал | ширина | длина | оверлок | статус */
.item-main { display: flex; align-items: center; gap: 14px; padding-right: 110px; }
.item-num { font-size: 1.4rem; font-weight: 700; min-width: 56px; text-align: center; }
.item-photo-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.item-thumb, .item-photo-add {
  width: 52px; height: 52px; border-radius: 8px; object-fit: cover; display: inline-flex;
  align-items: center; justify-content: center;
}
.item-photo-hint { font-size: 0.68rem; color: var(--bs-secondary-color); }
.item-photo-add { border: 1.5px dashed var(--bs-tertiary-color); color: var(--bs-tertiary-color); font-size: 1.3rem; cursor: pointer; background: var(--bs-tertiary-bg); }
.item-photo-add:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.item-f { display: flex; flex-direction: column; gap: 2px; }
.item-f label { font-size: 0.72rem; color: var(--bs-secondary-color); line-height: 1; }
.item-f .form-control, .item-f .form-select { min-width: 82px; }
.item-f.material .form-select { min-width: 120px; }
.item-status-seg { display: flex; flex-direction: column; gap: 3px; }
.item-status-seg label { font-size: 0.72rem; color: var(--bs-secondary-color); }
.item-status-seg .seg-row { display: flex; gap: 2px; }
.seg { flex: 1 1 0; font-size: 0.8rem; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-secondary-color); white-space: nowrap; }
.seg.active { color: #fff; border-color: transparent; }
.seg.active.s-not_accepted { background: var(--bs-secondary-color); }
/* Статусы изделий (01.10, решения Дмитрия): Принят — teal темы, Стираем — голубой */
.seg.active.s-accepted { background: #009588; }
.seg.active.s-washing { background: #5595f3; }
.seg.active.s-overlock { background: var(--crm-amber-500); }
.seg.active.s-packed { background: var(--crm-emerald-600); }
/* Прачка (01.10): размеры видны, но пустые и заблокированные */
.item-row.is-laundry .dims .form-control { background: var(--bs-secondary-bg); }
/* Галерея фото изделия (01.10, доработка Дмитрия): превью + маленькая кнопка
   «Добавить фото» рядом с фото (центрирована по вертикали); клик по превью — просмотр.
   Счётчик фото (05.10, решение Дмитрия): полупрозрачная цифра по центру превью. */
.item-photo-wrap { display: flex; align-items: center; gap: 6px; }
.item-thumb-wrap { position: relative; display: inline-flex; }
.photo-count {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 600; pointer-events: none;
  color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.28); border-radius: 8px; /* как у .item-thumb */
}
[data-bs-theme="dark"] .photo-count { background: rgba(0, 0, 0, 0.38); }
.item-photo-add-sm {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 0.72rem; padding: 4px 8px; border-radius: 7px;
  border: 1px dashed var(--bs-tertiary-color); background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
}
.item-photo-add-sm:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
/* Модалка просмотра фото (01.10, доработка Дмитрия): ширина по контуру фото
   (везде отступы 10px), заголовок по центру, стрелки внутри фото,
   мусорка — полупрозрачный кружок внизу по центру (при наведении ярче). */
.photo-view-dialog { max-width: calc(100vw - 24px); width: fit-content; }
.photo-view-modal .modal-header { padding: 10px 10px 0; }
.photo-view-modal .modal-body { padding: 10px; }
.photo-view-wrap { position: relative; display: inline-block; }
.photo-view-wrap img { max-width: 100%; max-height: 75vh; display: block; border-radius: 8px; }
.photo-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.65); background: rgba(0, 0, 0, 0.35);
  color: #fff; font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center;
}
.photo-nav:hover { background: rgba(0, 0, 0, 0.6); color: #fff; }
.photo-nav-prev { left: 10px; }
.photo-nav-next { right: 10px; }
.photo-del {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid rgb(208 35 35 / 50%); background: rgb(198 32 32 / 30%);
  color: #be1818; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center;
}
.photo-del:hover { background: var(--crm-rose-600); border-color: var(--crm-rose-600); color: #fff; }

/* Доп. услуги — одной строкой */
.item-services { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--bs-border-color); margin-top: 10px; padding-top: 8px; }
.item-services .lbl { font-size: 0.8rem; font-weight: 600; color: var(--bs-secondary-color); flex-shrink: 0; }
.svc { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; line-height: 1; cursor: pointer; white-space: nowrap; margin: 0; }
/* нейтрализуем Bootstrap form-check внутри .svc — ровный квадратный чекбокс как в макете */
.svc input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; margin: 0; padding: 0; flex-shrink: 0;
  border: 1.5px solid #c7c7c7; border-radius: 4px; background-color: #fff;
  cursor: pointer; display: inline-block; position: static; float: none; vertical-align: middle;
}
.svc input[type="checkbox"]:hover { border-color: #009588; }
.svc input[type="checkbox"]:checked {
  border-color: #009588; background-color: #009588;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M4 8.5l3 3 5.5-6.5%27/%3E%3C/svg%3E");
  background-size: 14px 14px; background-position: center; background-repeat: no-repeat;
}
.svc:hover { color: #009588; }
[data-bs-theme="dark"] .svc input[type="checkbox"] { border-color: #3f3f3f; background-color: #171717; }
[data-bs-theme="dark"] .svc input[type="checkbox"]:checked { border-color: #00baa7; background-color: #00baa7; }
[data-bs-theme="dark"] .svc:hover { color: #00baa7; }

/* ==== Адаптивность карточки изделия: поля не выезжают за края ==== */
@media (max-width: 1399.98px) {
  .item-main { gap: 10px; }
  .item-f .form-control, .item-f .form-select { min-width: 70px; }
  .item-f.material .form-select { min-width: 105px; }
  .item-main { padding-right: 96px; }
}
@media (max-width: 1199.98px) {
  /* Строка 1 переносится: № + фото + материал + размеры в первой линии, статус ниже */
  .item-main { flex-wrap: wrap; row-gap: 10px; padding-right: 96px; }
  .item-status-seg { flex-basis: 100%; }
}
@media (max-width: 767.98px) {
  .item-main { padding-right: 0; }
  .item-remove, .item-tape { position: static; transform: none; }
  .item-row .card-body { padding-top: 40px; position: relative; }
  .item-remove { top: 6px; right: 6px; }
  .item-tape { top: 6px; right: 44px; }
  .item-f { flex: 1 1 40%; }
  .item-note { flex-basis: 100%; margin-bottom: 6px; }
  .item-bottom { flex-wrap: wrap; }
  .item-cost { text-align: left; }
}

/* Заметка + согласование + стоимость (30.09: выравнивание к низу — кнопка согласования
   на одном уровне с полем «Заметка», замечание Дмитрия) */
.item-bottom { display: flex; align-items: flex-end; gap: 14px; margin-top: 8px; border-top: 1px solid var(--bs-border-color); padding-top: 8px; }
.item-note { flex: 1; }
.item-note label { font-size: 0.72rem; color: var(--bs-secondary-color); }
.item-cost { text-align: right; min-width: 150px; }
.item-cost .lbl { font-size: 0.72rem; color: var(--bs-secondary-color); }
.item-cost .val { font-size: 1.15rem; font-weight: 700; color: var(--bs-body-color); }

/* Кнопка согласования изделия (30.09, решение Дмитрия): стиль — как у сегментов
   статуса по дефолту (контур, без заливки). Состояния:
   «Согласовать» (дефолт) → «На согласовании» #5e4ddd → «Согласовано» #009588. */
.item-approve {
  flex-shrink: 0; font-size: 0.8rem; padding: 4px 14px; border-radius: 7px;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  color: var(--bs-secondary-color); white-space: nowrap;
}
.item-approve:not(.appr-pending):not(.appr-approved):hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.item-approve.appr-pending  { background: #5e4ddd; border-color: #5e4ddd; color: #fff; cursor: default; }
.item-approve.appr-approved { background: #009588; border-color: #009588; color: #fff; cursor: default; }
/* 06.10: «Согласовано» у цеха/админа — кликабельная кнопка (type=submit) — палец;
   у оператора/водителя остаётся плашкой (cursor: default) */
.item-approve.appr-approved[type="submit"] { cursor: pointer; }
.item-approve.appr-approved[type="submit"]:hover { filter: brightness(1.08); }
.item-approve.appr-pending:hover, .item-approve.appr-approved:hover { color: #fff; }
/* У изделия «На согласовании» сегменты статуса приглушены (заблокированы) */
.item-row.is-appr-pending .seg { opacity: 0.55; }
/* Карточка, подсвеченная из задачи согласования (?item={global_number}) */
.item-row.item-highlight { border-color: #5e4ddd; box-shadow: 0 0 0 3px rgba(94, 77, 221, 0.28); }

/* Рекламация (16.10, решение Дмитрия): изделие «в рекламации» — красная карточка;
   замороженные изделия вне рекламации — приглушены (заблокированы в состоянии закрытого) */
.item-row.is-claim { border-color: #dc3545; box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.22); }
.item-row.is-claim .item-num { color: #dc3545; }
.item-claim-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 600; color: #fff; background: #dc3545;
  border-radius: 20px; padding: 2px 9px; white-space: nowrap; align-self: center;
}
/* Переключатель «В рекламации» (цех/админ) и его статичная плашка */
.item-claim-toggle {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 0.82rem; font-weight: 600; color: #dc3545; cursor: pointer;
  border: 1px solid rgba(220, 53, 69, 0.45); border-radius: 8px; padding: 4px 10px;
}
.item-claim-toggle input { cursor: pointer; }
.item-claim-toggle.on { background: rgba(220, 53, 69, 0.08); border-color: #dc3545; }
.item-claim-toggle.static { cursor: default; }
/* Модалка «Рекламация» (16.10): контур по наполнению, не на всю 800px как modal-lg */
.claim-dialog { max-width: max-content; }
.claim-dialog .modal-content {
  width: max-content;
  max-width: min(680px, 94vw);
  min-width: min(480px, 94vw); /* форма забора и таблица поиска не сжимаются в узкую полоску */
}
/* Замороженные изделия рекламационного договора (вне рекламации) — приглушены */
.item-row.is-frozen { opacity: 0.72; }
[data-bs-theme="dark"] .item-row.is-claim { border-color: #dc3545; }
[data-bs-theme="dark"] .item-claim-toggle.on { background: rgba(220, 53, 69, 0.16); }

/* Тёмная тема: карточка изделия */
[data-bs-theme="dark"] .item-row { background: var(--crm-sidebar-bg); }
[data-bs-theme="dark"] .item-photo-add { background: transparent; }
[data-bs-theme="dark"] .item-tape { background: transparent; }
[data-bs-theme="dark"] .seg { background: transparent; }
[data-bs-theme="dark"] .item-approve { background: transparent; }
[data-bs-theme="dark"] .item-approve.appr-pending { background: #5e4ddd; }
[data-bs-theme="dark"] .item-approve.appr-approved { background: #009588; }
/* Числовые поля: убрать стрелки step (input[type=number]) */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* =====================================================================
   Кастомный datepicker (попап-календарь, портирован из старого проекта)
   ===================================================================== */
.datepicker-group { cursor: pointer; position: relative; }
.datepicker-group input { cursor: pointer; }

.crm-datepicker-popup {
  position: absolute;
  z-index: 1085;
  width: 268px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
  padding: 0.75rem;
  color: var(--bs-body-color);
}
.crm-datepicker-popup .dp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.crm-datepicker-popup .dp-title {
  font-size: 0.9rem; font-weight: 600;
}
.crm-datepicker-popup .dp-nav {
  width: 28px; height: 28px;
  border: none; background: transparent;
  border-radius: 0.5rem;
  color: var(--bs-secondary-color);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
}
.crm-datepicker-popup .dp-nav:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.crm-datepicker-popup .dp-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.68rem; font-weight: 600;
  color: var(--bs-tertiary-color);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.crm-datepicker-popup .dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.crm-datepicker-popup .dp-day {
  height: 32px;
  border: none; background: transparent;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: var(--bs-body-color);
  cursor: pointer;
  transition: all 0.12s;
}
.crm-datepicker-popup .dp-day:hover { background: var(--bs-secondary-bg); }
.crm-datepicker-popup .dp-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--crm-teal-600);
  font-weight: 600;
  color: var(--crm-teal-600);
}
.crm-datepicker-popup .dp-day.is-selected {
  background: var(--crm-teal-600);
  color: #fff;
  font-weight: 600;
}
.crm-datepicker-popup .dp-day.is-selected.is-today { box-shadow: none; }
.crm-datepicker-popup .dp-footer {
  display: flex; justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bs-border-color);
}
.crm-datepicker-popup .dp-clear,
.crm-datepicker-popup .dp-today {
  border: none; background: transparent;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.4rem;
  cursor: pointer;
}
.crm-datepicker-popup .dp-clear { color: var(--bs-secondary-color); }
.crm-datepicker-popup .dp-clear:hover { background: var(--bs-secondary-bg); }
.crm-datepicker-popup .dp-today { color: var(--crm-teal-600); font-weight: 600; }
.crm-datepicker-popup .dp-today:hover { background: rgba(0,149,136,0.08); }
/* ==== Таблица договоров: минимальные ширины колонок и высота строк ==== */
.contracts-table td, .contracts-table th { min-height: 50px; height: 50px; }
.contracts-table .col-status { min-width: 157px; }
.contracts-table .col-sum { min-width: 89px; }
.contracts-table .col-phone { min-width: 156px; }
.contracts-table .row-delete { opacity: 0.55; color: #dc3545; }
.contracts-table tr:hover .row-delete { opacity: 1; }
/* 30.10 (п.5 Дмитрия): мусорка удаления — красная ВСЕГДА (не только при hover);
   applies и к корзине задач (.task-delete-btn) */
.contracts-table .row-delete { color: #dc3545 !important; }
/* 04.11 (п.5 Дмитрия): колонка «Действия» в договорах (мусорка у админа) */
.contracts-table .col-actions { width: 84px; white-space: nowrap; }
.task-delete-btn { color: #dc3545 !important; }
/* 07.11 (Дмитрий, согласовано): подсветка строк списка по статусу.
   Через --bs-table-bg на tr (Bootstrap 5.3 рисует фон ячеек этой переменной),
   hover — чуть плотнее тот же цвет.
   Выполнено — лёгкий зеленоватый; В работе — бледный оранжево-жёлтый (amber-400) */
.tasks-table tr[data-status="done"] { --bs-table-bg: rgba(52, 211, 153, 0.10); }
.tasks-table.table-hover > tbody > tr[data-status="done"]:hover > * { --bs-table-hover-bg: rgba(52, 211, 153, 0.16); }
.tasks-table tr[data-status="in_progress"] { --bs-table-bg: rgba(251, 191, 36, 0.12); }
.tasks-table.table-hover > tbody > tr[data-status="in_progress"]:hover > * { --bs-table-hover-bg: rgba(251, 191, 36, 0.18); }
/* ==== Модуль Задачи (24.10): вкладки, канбан, смена ==== */
/* Вкладки-«папки» (07.11, образец Дмитрия — классические CSS-вкладки): активная
   вкладка сливается с телом карточки, линия под ней разорвана (margin-bottom:-1px) */
.task-tabs { gap: 0.25rem; }
.task-tabs .nav-link {
  padding: 0.45rem 0.9rem; font-size: 0.875rem;
  color: var(--bs-secondary-color);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--crm-radius) var(--crm-radius) 0 0;
  margin-bottom: -1px; /* перекрываем нижнюю границу панели — «срез» вкладки */
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.task-tabs .nav-link:hover { color: var(--crm-teal-600); background: var(--crm-sidebar-hover-bg); }
.task-tabs .nav-link.active {
  color: var(--crm-teal-600);
  font-weight: 600;
  background: var(--bs-card-bg, var(--bs-body-bg)); /* = фон тела карточки */
  border-color: var(--bs-card-border-color, var(--bs-border-color));
  cursor: default;
}
.task-tabs .badge.text-bg-light { font-weight: 600; }
.task-tabs .nav-link.active .badge.text-bg-light {
  background: rgba(0,149,136,0.12) !important; color: var(--crm-teal-600) !important;
}
[data-bs-theme="dark"] .task-tabs .badge.text-bg-light { color: #fafafa !important; background: #262626 !important; }
[data-bs-theme="dark"] .task-tabs .nav-link:hover { color: var(--crm-teal-500); background: var(--crm-sidebar-hover-bg); }
[data-bs-theme="dark"] .task-tabs .nav-link.active {
  color: var(--crm-teal-500);
  /* фон = фон карточки в тёмной теме (#171717), а не body-bg (#0a0a0a) */
  background: var(--crm-sidebar-bg);
}
[data-bs-theme="dark"] .task-tabs .nav-link.active .badge.text-bg-light {
  background: rgba(0,186,167,0.16) !important; color: var(--crm-teal-500) !important;
}
/* 07.11: панель вкладок — «шапка» карточки списка задач (таблица = тело карточки);
   полоса-разделитель под вкладками; активная вкладка «срезает» её (margin-bottom:-1px),
   сливаясь с содержимым; переключатель вида/«Создать» — в карточке фильтров */
.task-listbar-header {
  padding: 0.6rem 1rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
/* Переключатель «Список/Канбан» — фирменный сегмент в тон teal (вместо серых кнопок) */
.task-listbar-view {
  display: inline-flex;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.625rem;
  overflow: hidden;
  background: var(--bs-body-bg);
}
.task-listbar-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; min-width: 2.35rem; /* 07.11: 34px минус рамки сегмента, вровень с .filter-card .btn */
  padding: 0 0.5rem;
  font-size: 0.95rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
  transition: all 0.15s;
}
.task-listbar-view-btn + .task-listbar-view-btn { border-left: 1px solid var(--bs-border-color); }
.task-listbar-view-btn:hover { color: var(--crm-teal-600); background: var(--crm-sidebar-hover-bg); }
.task-listbar-view-btn.active {
  background: linear-gradient(135deg, var(--crm-teal-600) 0%, var(--crm-emerald-600) 100%);
  color: #fff;
}
[data-bs-theme="dark"] .task-listbar-view-btn:hover { color: var(--crm-teal-500); }
[data-bs-theme="dark"] .task-listbar-view-btn.active { color: #fff; }

/* Таблица задач — как в Договорах (замечание Дмитрия 24.10): высота строк 50px,
   ФИКС ширины столбцов классами (как .col-status/.col-sum в contracts-table),
   колонка «Задача» — не шире 300px */
.tasks-table { table-layout: fixed; }
.tasks-table td, .tasks-table th { height: 50px; overflow: hidden; text-overflow: ellipsis; }
.tasks-table .col-check     { width: 34px; }
.tasks-table .col-contract  { width: 110px; }
.tasks-table .col-executor  { width: 190px; }
.tasks-table .col-priority  { width: 130px; }
.tasks-table .col-due       { width: 120px; }
.tasks-table .col-actions   { width: 40px; } /* корзина удаления (админ) */
/* 27.10 (Дмитрий): колонка «Задача» — 300px (шире не растягивается, длинное название с многоточием) */
.tasks-table .col-task-title { width: 300px; max-width: 300px; }
.tasks-table .col-task-title a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* 04.11 (п.3 Дмитрия): название + иконки-флаги ПРИКЛЕЕНЫ к правому краю поля —
   flex-строка: ссылка обрезается (min-width:0), иконки не уезжают */
.tasks-table .task-title-cell { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.tasks-table .task-title-cell .task-title-link { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-table .task-title-cell .badge { flex-shrink: 0; }
.task-flag-icon { font-size: 20px; line-height: 1; flex-shrink: 0; vertical-align: middle; }
/* 04.11 (п.5 Дмитрия): карандаш + корзина в одной колонке «Действия» */
.tasks-table .col-actions { width: 84px; white-space: nowrap; }
.tasks-table .col-actions .task-delete-btn, .tasks-table .col-actions .task-list-edit { font-size: 1rem; }
/* 04.11 (п.5 Дмитрия): мусорка в канбан-карточке — как карандаш */
.task-kanban-card .task-delete-btn { font-size: 1rem; }
/* Кнопка клика по уведомлению (модалка колокольчика, 30.10 — п.5 Дмитрия):
   текст серый, чуть крупнее; вторая строка — «От кого · дата» мельче и светлее;
   ведро удаления строки — красное */
.notification-link { color: var(--bs-secondary-color); }
.notification-link:hover { color: var(--crm-teal-600); }
.notification-link .notification-text { font-size: 0.95rem; display: block; }
.notification-link .notification-meta { font-size: 0.78rem; color: var(--bs-tertiary-color); margin-top: 0.25rem; }
.notification-delete { color: #dc3545 !important; }
.notification-delete:hover { color: #a02622 !important; }
/* 04.11 (п.4 Дмитрия): иконка check-circle перед текстом уведомления */
.notification-check { font-size: 1.15rem; color: var(--crm-teal-600); flex-shrink: 0; }
[data-bs-theme="dark"] .notification-check { color: var(--crm-teal-500); }

/* Канбан */
.task-kanban { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 1rem; align-items: start; }
.task-kanban-col { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 0.75rem; padding: 0.75rem; min-height: 200px; }
/* 07.11 (по образцу tasks_canban.html): цветная верхняя кромка 4px у каждой графы:
   Назначено — slate, В работе — amber, Выполнено — emerald */
.task-kanban-col { border-top: 4px solid transparent; }
.task-kanban-col[data-status="assigned"]    { border-top-color: #94a3b8; } /* slate-400 */
.task-kanban-col[data-status="in_progress"] { border-top-color: #fbbf24; } /* amber-400 */
.task-kanban-col[data-status="done"]        { border-top-color: #34d399; } /* emerald-400 */
.task-kanban-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.65rem; font-weight: 600; font-size: 0.9rem; }
.task-kanban-body { display: flex; flex-direction: column; gap: 0.55rem; min-height: 120px; }
.task-kanban-body.drag-over { outline: 2px dashed var(--crm-teal-600); outline-offset: 2px; border-radius: 0.5rem; }
.task-kanban-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 0.6rem; padding: 0.6rem 0.7rem; cursor: grab; }
.task-kanban-card[draggable="false"] { cursor: default; opacity: 0.65; }
.task-kanban-card.dragging { opacity: 0.5; }
.task-kanban-title { font-weight: 600; color: var(--bs-body-color); text-decoration: none; font-size: 0.875rem; }
.task-kanban-title:hover { color: var(--crm-teal-600); }
/* 30.10 (п.10 Дмитрия): длинное название не выезжает за карточку — обрезается */
.task-kanban-card { overflow: hidden; }
.task-kanban-card .task-kanban-title {
    display: block; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* Стрелки перемещения (27.10) и карандаш редактирования */
.task-kanban-nav { font-size: 0.85rem; }
.task-kanban-nav .kb-move:hover { color: var(--crm-teal-600) !important; }
.task-kanban-card .kb-edit:hover { color: var(--crm-teal-600) !important; }

/* Точка смены у имени профиля */
.shift-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 0.4rem; vertical-align: middle; }
.shift-dot-on { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.25); }
.shift-dot-off { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.2); }

/* Мобильный гамбургер: точка при наличии назначенных задач */
#sidebar-mobile-toggle.has-tasks { position: relative; }
#sidebar-mobile-toggle.has-tasks::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }

/* Свёрнутый сайдбар (sb-collapsed): счётчик задач у «Задачи» — красная точка у иконки,
   как у мобильного гамбургера (замечание Дмитрия 24.10). Реализация через ::after:
   бейдж #task-count перебивается правилом .sb-collapsed .sidebar-link span{display:none} */
@media (min-width: 768px) {
  .sb-collapsed .sidebar-link[data-task-link] { position: relative; }
  .sb-collapsed .sidebar-link[data-task-link] #task-count { display: none !important; }
  .sb-collapsed .sidebar-link[data-task-link].has-tasks::after {
    content: ""; position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  }
}