/* === Единый стиль GoFlow поверх Bootstrap 5 === */
/* Вынесено из style_guide.html для использования на всех страницах. */

/* ============================================================
   ТЕМЫ — dark (по умолчанию) / light
   ============================================================ */
:root[data-theme="dark"] {
  --bs-body-color: #e6edf3;
  --bs-body-bg: #0f1419;
  --bs-card-color: #e6edf3;
  --bs-card-bg: #1a2028;
  --bs-card-border-color: #2d3744;
  --bs-card-cap-color: #e6edf3;
  --bs-card-cap-bg: #222b36;
  --bs-secondary-color: #8b98a8;
  --bs-secondary-bg: #222b36;
  --bs-emphasis-color: #e6edf3;
  --bs-heading-color: #e6edf3;
  --bs-link-color: #4a9eff;
  --bs-link-hover-color: #7db4ff;
  --bs-border-color: #2d3744;
  --bs-tertiary-bg: #222b36;
  --bs-tertiary-color: #8b98a8;
  --bs-form-control-bg: #1a2028;
  --bs-form-control-border-color: #2d3744;
  --bs-form-control-color: #e6edf3;
  --bs-form-select-bg: #1a2028;
  --bs-form-select-border-color: #2d3744;
  --bs-form-select-color: #e6edf3;
  --bs-input-group-addon-bg: #222b36;
  --bs-input-group-addon-color: #8b98a8;
  --bs-list-group-color: #e6edf3;
  --bs-list-group-bg: #1a2028;
  --bs-list-group-border-color: #2d3744;
  --bs-nav-link-color: #8b98a8;
  --bs-nav-link-hover-color: #e6edf3;
  --bs-nav-tabs-link-active-color: #4a9eff;
  --bs-nav-pills-link-active-color: #4a9eff;
  --bs-nav-pills-link-active-bg: rgba(74,158,255,.15);
  --bs-progress-bg: #222b36;
  --bs-table-color: #e6edf3;
  --bs-table-bg: transparent;
  --bs-table-border-color: #2d3744;
  --bs-table-striped-color: #e6edf3;
  --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-hover-color: #e6edf3;
  --bs-table-hover-bg: rgba(255,255,255,.02);
  --bs-table-color-state: #e6edf3;
  --bs-dropdown-color: #e6edf3;
  --bs-dropdown-bg: #1a2028;
  --bs-dropdown-border-color: #2d3744;
  --bs-dropdown-link-color: #e6edf3;
  --bs-dropdown-link-hover-color: #e6edf3;
  --bs-dropdown-link-hover-bg: #222b36;
  --bs-dropdown-divider-bg: #2d3744;
  --bs-modal-color: #e6edf3;
  --bs-modal-bg: #1a2028;
  --bs-modal-border-color: #2d3744;
  --bs-alert-color: #e6edf3;
  --bs-code-color: #7db4ff;
  --bs-highlight-bg: #222b36;
  --bs-btn-close-color: #e6edf3;
  --bg: #0f1419;
  --panel: #1a2028;
  --panel2: #222b36;
  --border: #2d3744;
  --border-light: #374251;
  --text: #e6edf3;
  --muted: #9aa8b8;
  --accent: #4a9eff;
  --accent-dark: #3a8eef;
  --green: #3fb950;
  --red: #f85149;
  --yellow: #d29922;
  --purple: #a371f7;
  --orange: #db6d28;
  --input-bg: #232b36;
  --input-border: #3a4452;
  --input-focus-shadow: rgba(74,158,255,.2);
  --hover-bg: rgba(255,255,255,.04);
  --shadow: 0 2px 8px rgba(0,0,0,.3);
  --tooltip-bg: #222b36;
  --code-bg: #222b36;
  --code-color: #7db4ff;
  --table-hover: rgba(255,255,255,.02);
  --form-row-border: #2d3744;
  --badge-blue-bg: rgba(74,158,255,.18); --badge-blue-fg: #7db4ff; --badge-blue-bd: rgba(74,158,255,.4);
  --badge-green-bg: rgba(63,185,80,.18); --badge-green-fg: #5fd175; --badge-green-bd: rgba(63,185,80,.4);
  --badge-red-bg: rgba(248,81,73,.18); --badge-red-fg: #ff8b84; --badge-red-bd: rgba(248,81,73,.4);
  --badge-yellow-bg: rgba(210,153,34,.18); --badge-yellow-fg: #e8b347; --badge-yellow-bd: rgba(210,153,34,.4);
  --badge-purple-bg: rgba(163,113,247,.18); --badge-purple-fg: #c198ff; --badge-purple-bd: rgba(163,113,247,.4);
  --badge-orange-bg: rgba(219,109,40,.18); --badge-orange-fg: #f08c4a; --badge-orange-bd: rgba(219,109,40,.4);
  --badge-grey-bg: rgba(139,152,168,.18); --badge-grey-fg: #a8b4c4; --badge-grey-bd: rgba(139,152,168,.4);
  --pill-bg: #222b36;
  --pill-bd: #2d3744;
  --pill-blue-bg: rgba(74,158,255,.12); --pill-blue-fg: #7db4ff; --pill-blue-bd: rgba(74,158,255,.3);
  --pill-green-bg: rgba(63,185,80,.12); --pill-green-fg: #5fd175; --pill-green-bd: rgba(63,185,80,.3);
  --pill-red-bg: rgba(248,81,73,.12); --pill-red-fg: #ff8b84; --pill-red-bd: rgba(248,81,73,.3);
  --pill-yellow-bg: rgba(210,153,34,.12); --pill-yellow-fg: #e8b347; --pill-yellow-bd: rgba(210,153,34,.3);
  --pill-purple-bg: rgba(163,113,247,.12); --pill-purple-fg: #c198ff; --pill-purple-bd: rgba(163,113,247,.3);
  --pill-grey-bg: rgba(139,152,168,.12); --pill-grey-fg: #a8b4c4; --pill-grey-bd: rgba(139,152,168,.3);
  --btn-icon-bg: #1a2028;
  --btn-icon-hover-bg: #222b36;
  --btn-icon-primary-bd: rgba(74,158,255,.4);
  --btn-icon-primary-hover-bg: rgba(74,158,255,.12);
  --btn-icon-success-bd: rgba(63,185,80,.4);
  --btn-icon-success-hover-bg: rgba(63,185,80,.12);
  --btn-icon-danger-bd: rgba(248,81,73,.4);
  --btn-icon-danger-hover-bg: rgba(248,81,73,.12);
  --btn-icon-warning-bd: rgba(210,153,34,.4);
  --btn-icon-warning-hover-bg: rgba(210,153,34,.12);
  --btn-icon-secondary-bd: #2d3744;
  --btn-icon-secondary-hover-bg: #222b36;
  --btn-dots-hover-bg: rgba(255,255,255,.06);
  --scrollbar-thumb: #2d3744;
  --scrollbar-track: transparent;
  --kbd-bg: #222b36;
  --kbd-bd: #2d3744;
  --kbd-fg: #8b98a8;
  --modal-bg: #1a2028;
  --modal-border: #2d3744;
  --dropdown-bg: #1a2028;
  --dropdown-bd: #2d3744;
  --dropdown-hover: #222b36;
  --dropdown-divider: #2d3744;
  --nav-pills-active: rgba(74,158,255,.15);
  --progress-bg: #222b36;
  --alert-info-bg: rgba(74,158,255,.1); --alert-info-bd: rgba(74,158,255,.3); --alert-info-fg: #7db4ff;
  --alert-success-bg: rgba(63,185,80,.1); --alert-success-bd: rgba(63,185,80,.3); --alert-success-fg: #5fd175;
  --alert-danger-bg: rgba(248,81,73,.1); --alert-danger-bd: rgba(248,81,73,.3); --alert-danger-fg: #ff8b84;
  --alert-warning-bg: rgba(210,153,34,.1); --alert-warning-bd: rgba(210,153,34,.3); --alert-warning-fg: #e8b347;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bs-body-color: #1e293b;
  --bs-body-bg: #f0f2f5;
  --bs-card-color: #1e293b;
  --bs-card-bg: #ffffff;
  --bs-card-border-color: #e2e8f0;
  --bs-card-cap-color: #1e293b;
  --bs-card-cap-bg: #f8fafc;
  --bs-secondary-color: #64748b;
  --bs-secondary-bg: #f1f5f9;
  --bs-heading-color: #1e293b;
  --bs-link-color: #3b82f6;
  --bs-link-hover-color: #2563eb;
  --bs-border-color: #e2e8f0;
  --bs-tertiary-bg: #f8fafc;
  --bs-tertiary-color: #64748b;
  --bs-form-control-bg: #ffffff;
  --bs-form-control-border-color: #cbd5e1;
  --bs-form-control-color: #1e293b;
  --bs-form-select-bg: #ffffff;
  --bs-form-select-border-color: #cbd5e1;
  --bs-form-select-color: #1e293b;
  --bs-input-group-addon-bg: #f8fafc;
  --bs-input-group-addon-color: #64748b;
  --bs-list-group-color: #1e293b;
  --bs-list-group-bg: #ffffff;
  --bs-list-group-border-color: #e2e8f0;
  --bs-nav-link-color: #64748b;
  --bs-nav-link-hover-color: #1e293b;
  --bs-nav-tabs-link-active-color: #3b82f6;
  --bs-nav-pills-link-active-color: #3b82f6;
  --bs-nav-pills-link-active-bg: rgba(59,130,246,.1);
  --bs-progress-bg: #e2e8f0;
  --bs-table-color: #1e293b;
  --bs-table-bg: transparent;
  --bs-table-border-color: #e2e8f0;
  --bs-table-striped-color: #1e293b;
  --bs-table-striped-bg: rgba(0,0,0,.03);
  --bs-table-hover-color: #1e293b;
  --bs-table-hover-bg: rgba(0,0,0,.02);
  --bs-dropdown-color: #1e293b;
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-border-color: #e2e8f0;
  --bs-dropdown-link-color: #1e293b;
  --bs-dropdown-link-hover-color: #1e293b;
  --bs-dropdown-link-hover-bg: #f8fafc;
  --bs-dropdown-divider-bg: #e2e8f0;
  --bs-modal-color: #1e293b;
  --bs-modal-bg: #ffffff;
  --bs-modal-border-color: #e2e8f0;
  --bs-alert-color: #1e293b;
  --bs-code-color: #3b82f6;
  --bs-btn-close-color: #1e293b;
  --bg: #f0f2f5;
  --panel: #ffffff;
  --panel2: #f8fafc;
  --border: #e2e8f0;
  --border-light: #cbd5e1;
  --text: #1e293b;
  --muted: #56657c;
  --accent: #3b82f6;
  --accent-dark: #2563eb;
  --green: #10b981;
  --red: #ef4444;
  --yellow: #f59e0b;
  --purple: #8b5cf6;
  --orange: #f97316;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-focus-shadow: rgba(59,130,246,.15);
  --hover-bg: rgba(0,0,0,.03);
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --tooltip-bg: #1e293b;
  --code-bg: #f1f5f9;
  --code-color: #3b82f6;
  --table-hover: rgba(0,0,0,.02);
  --form-row-border: #f1f5f9;
  --badge-blue-bg: rgba(59,130,246,.12); --badge-blue-fg: #2563eb; --badge-blue-bd: rgba(59,130,246,.3);
  --badge-green-bg: rgba(16,185,129,.12); --badge-green-fg: #059669; --badge-green-bd: rgba(16,185,129,.3);
  --badge-red-bg: rgba(239,68,68,.12); --badge-red-fg: #dc2626; --badge-red-bd: rgba(239,68,68,.3);
  --badge-yellow-bg: rgba(245,158,11,.12); --badge-yellow-fg: #d97706; --badge-yellow-bd: rgba(245,158,11,.3);
  --badge-purple-bg: rgba(139,92,246,.12); --badge-purple-fg: #7c3aed; --badge-purple-bd: rgba(139,92,246,.3);
  --badge-orange-bg: rgba(249,115,22,.12); --badge-orange-fg: #ea580c; --badge-orange-bd: rgba(249,115,22,.3);
  --badge-grey-bg: rgba(100,116,139,.12); --badge-grey-fg: #475569; --badge-grey-bd: rgba(100,116,139,.3);
  --pill-bg: #f1f5f9;
  --pill-bd: #e2e8f0;
  --pill-blue-bg: rgba(59,130,246,.08); --pill-blue-fg: #2563eb; --pill-blue-bd: rgba(59,130,246,.25);
  --pill-green-bg: rgba(16,185,129,.08); --pill-green-fg: #059669; --pill-green-bd: rgba(16,185,129,.25);
  --pill-red-bg: rgba(239,68,68,.08); --pill-red-fg: #dc2626; --pill-red-bd: rgba(239,68,68,.25);
  --pill-yellow-bg: rgba(245,158,11,.08); --pill-yellow-fg: #d97706; --pill-yellow-bd: rgba(245,158,11,.25);
  --pill-purple-bg: rgba(139,92,246,.08); --pill-purple-fg: #7c3aed; --pill-purple-bd: rgba(139,92,246,.25);
  --pill-grey-bg: rgba(100,116,139,.08); --pill-grey-fg: #475569; --pill-grey-bd: rgba(100,116,139,.25);
  --btn-icon-bg: #ffffff;
  --btn-icon-hover-bg: #f8fafc;
  --btn-icon-primary-bd: #bfdbfe;
  --btn-icon-primary-hover-bg: #eff6ff;
  --btn-icon-success-bd: #a7f3d0;
  --btn-icon-success-hover-bg: #ecfdf5;
  --btn-icon-danger-bd: #fecaca;
  --btn-icon-danger-hover-bg: #fef2f2;
  --btn-icon-warning-bd: #fde68a;
  --btn-icon-warning-hover-bg: #fffbeb;
  --btn-icon-secondary-bd: #e2e8f0;
  --btn-icon-secondary-hover-bg: #f1f5f9;
  --btn-dots-hover-bg: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-track: transparent;
  --kbd-bg: #f1f5f9;
  --kbd-bd: #e2e8f0;
  --kbd-fg: #64748b;
  --modal-bg: #ffffff;
  --modal-border: #e2e8f0;
  --dropdown-bg: #ffffff;
  --dropdown-bd: #e2e8f0;
  --dropdown-hover: #f8fafc;
  --dropdown-divider: #e2e8f0;
  --nav-pills-active: rgba(59,130,246,.1);
  --progress-bg: #e2e8f0;
  --alert-info-bg: rgba(59,130,246,.08); --alert-info-bd: rgba(59,130,246,.25); --alert-info-fg: #2563eb;
  --alert-success-bg: rgba(16,185,129,.08); --alert-success-bd: rgba(16,185,129,.25); --alert-success-fg: #059669;
  --alert-danger-bg: rgba(239,68,68,.08); --alert-danger-bd: rgba(239,68,68,.25); --alert-danger-fg: #dc2626;
  --alert-warning-bg: rgba(245,158,11,.08); --alert-warning-bd: rgba(245,158,11,.25); --alert-warning-fg: #d97706;
  color-scheme: light;
}


/* Базовые цвета body — из CSS-переменных тем */
body { background-color: var(--bs-body-bg); color: var(--bs-body-color); transition: background-color .2s, color .2s; }
.card { background-color: var(--bs-card-bg); border-color: var(--bs-card-border-color); color: var(--bs-card-color); }
.card-header { background-color: var(--bs-card-cap-bg); border-color: var(--bs-card-border-color); color: var(--bs-card-cap-color); }
.text-muted { color: var(--muted) !important; }

/* Переключатель тем */
.tc-theme-toggle { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font-size:.8125rem; color:var(--muted); padding:.25rem .5rem; border-radius:.375rem; border:1px solid var(--border); background:var(--panel); transition:all .15s }
.tc-theme-toggle:hover { background:var(--hover-bg); color:var(--text) }
.tc-theme-toggle i { font-size:.9rem }

/* Напоминание об окончании тарифа */
.tc-subscription-warning { display:inline-flex; align-items:center; gap:.3rem; font-size:.8125rem; color:var(--yellow); padding:.25rem .5rem; border-radius:.375rem; border:1px solid var(--yellow); background:rgba(255,193,7,.1); text-decoration:none; transition:all .15s; font-weight:600; }
.tc-subscription-warning:hover { background:rgba(255,193,7,.2); color:var(--yellow) }
.tc-subscription-warning i { font-size:.85rem }
.tc-subscription-warning-days { font-variant-numeric:tabular-nums }

/* Баннер "Email не подтверждён" */
.tc-email-verification-banner { display:flex; align-items:center; gap:.5rem; padding:.4rem 1rem; background:rgba(255,193,7,.12); border-bottom:1px solid var(--yellow); color:var(--text); font-size:.875rem; }
.tc-email-verification-banner i { color:var(--yellow); font-size:1rem; }

/* Баннер запланированного удаления */
.tc-deletion-banner { display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; font-size:.875rem; }
.tc-deletion-banner-danger { background:rgba(220,53,69,.15); border-bottom:1px solid var(--red); color:var(--text); }
.tc-deletion-banner-danger i { color:var(--red); font-size:1rem; }

/* NAVBAR / FOOTER / COOKIE-BANNER */
.tc-nav-container { max-width: 1400px; padding: 0 1rem; }
.tc-nav-right { align-items: center; gap: .25rem; }
.tc-nav-badge { font-size: .625rem; min-width: 1.125rem; }
.tc-badge-danger { background-color: var(--red); color: #fff; }
.tc-badge-wide { min-width: 1.375rem; }
.tc-lang-form { margin: 0; }
.tc-lang-btn { border: none; background: none; width: 100%; text-align: left; padding: .25rem 1rem; font-size: .8125rem; }
.tc-footer { background-color: var(--panel); border-top: 1px solid var(--border); padding: 1rem 0; margin-top: 2rem; }
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--panel); border-top: 1px solid var(--border); box-shadow: 0 -4px 12px rgba(0,0,0,.08); padding: .75rem 0; z-index: 1050; }
.tc-cookie-link { color: var(--accent); text-decoration: underline; }

/* Navbar — цвета из CSS-переменных */
.navbar { background: var(--panel) !important; border-bottom: 1px solid var(--border) !important; }
.navbar .navbar-brand { color: var(--text); }
.navbar .nav-link { color: var(--muted); }
.navbar .nav-link:hover { color: var(--text); }
.navbar .nav-link.active { color: var(--accent); }
.navbar .dropdown-menu { background: var(--dropdown-bg); border: 1px solid var(--dropdown-bd); }
.navbar .dropdown-item { color: var(--text); font-size: .85rem; }
.navbar .dropdown-item:hover { background: var(--dropdown-hover); color: var(--text); }
.navbar .dropdown-divider { border-color: var(--dropdown-divider); }
.navbar-nav .nav-item.dropdown .dropdown-menu.dropdown-menu-end { right: 0; left: auto; }

/* Модалки — цвета */
.modal-content { background: var(--modal-bg); border: 1px solid var(--modal-border); color: var(--text); }
.modal-header { border-bottom-color: var(--border); }
.modal-footer { border-top-color: var(--border); }
.modal-title { color: var(--text); }
/* Кнопки в модалках — стандартный Bootstrap размер, без сжатия */
.modal-footer .btn { border: 1px solid transparent !important; padding: 0.375rem 0.75rem !important; font-size: 1rem !important; line-height: 1.5 !important; border-radius: 0.375rem !important; display: inline-flex !important; align-items: center !important; }
.modal-footer .btn i { font-size: 1rem !important; }

/* Формы — цвета */
.form-control, .form-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text); }
.form-control:focus, .form-select:focus { background-color: var(--input-bg); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 .15rem var(--input-focus-shadow); }
.form-control::placeholder { color: var(--muted); }
.input-group-text { background-color: var(--panel2); border-color: var(--border); color: var(--muted); }

/* === Глобальный фикс: Tom Select + Bootstrap form-select === */
/* Tom Select копирует класс form-select с <select> на .ts-control.
   Bootstrap form-select добавляет background-image (стрелка) с тёмным цветом,
   что невидимо в тёмной теме. Заменяем на свой SVG в цвете --muted. */
:root[data-theme="dark"] .ts-control.form-select,
:root[data-theme="dark"] .ts-wrapper.single .ts-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239aa8b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.4rem center !important;
    background-size: 0.6rem 0.6rem !important;
    padding-right: 1.4rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
:root[data-theme="light"] .ts-control.form-select,
:root[data-theme="light"] .ts-wrapper.single .ts-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2356657c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.4rem center !important;
    background-size: 0.6rem 0.6rem !important;
    padding-right: 1.4rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
.ts-wrapper.form-select {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    appearance: none !important;
}

/* === Цветной выпадающий список этапов (Tom Select) === */
.tc-stage-opt { display: flex; align-items: center; gap: 6px; }
.tc-stage-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Table — цвета */
.table { color: var(--text); border-color: var(--border); }
.table > :not(caption) > * > * { background-color: transparent; }
/* Заголовки групп внутри таблиц — table-secondary / table-active / table-light / table-dark
   Bootstrap 5.1 задаёт --bs-table-color:#fff на .table-secondary — переопределяем переменную
   и сам color/background с !important для надёжного перебивания. */
.table-secondary { --bs-table-color: var(--text) !important; --bs-table-bg: var(--panel2) !important; --bs-table-accent-bg: transparent !important; }
.table-active { --bs-table-color: var(--text) !important; --bs-table-bg: var(--hover-bg) !important; --bs-table-accent-bg: transparent !important; }
.table-light { --bs-table-color: var(--text) !important; --bs-table-bg: var(--panel2) !important; --bs-table-accent-bg: transparent !important; }
.table-dark { --bs-table-color: var(--text) !important; --bs-table-bg: var(--panel2) !important; --bs-table-accent-bg: transparent !important; }
.table > :not(caption) > .table-secondary > * { background-color: var(--panel2) !important; color: var(--text) !important; }
.table > :not(caption) > .table-active > * { background-color: var(--hover-bg) !important; color: var(--text) !important; }
.table > :not(caption) > .table-light > * { background-color: var(--panel2) !important; color: var(--text) !important; }
.table > :not(caption) > .table-dark > * { background-color: var(--panel2) !important; color: var(--text) !important; }

/* List group */
.list-group-item { background-color: var(--panel); border-color: var(--border); color: var(--text); }

/* Toasts */
.lk-toast { background: var(--panel) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: var(--shadow) !important; }

/* btn-close */
.btn-close { filter: invert(.5); }
:root[data-theme="light"] .btn-close { filter: none; }

/* Скроллбар */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }


/* ============================================================
   МИГРИРОВАНО ИЗ neumorphism.css → с CSS-переменными тем
   ============================================================ */
.navbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: 60px;
    background: var(--panel) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
    z-index: 9998;
    padding: 0 !important;
}
body { padding-top: 60px; }
@media (max-width: 991.98px) { body { padding-top: 60px; } }
.navbar-brand { color: var(--text) !important; font-weight: 600; font-size: 1.125rem; display: flex; align-items: center; }
.navbar-brand:hover { color: var(--accent) !important; }
.navbar-brand i { margin-right: .5rem; color: var(--accent); }
.navbar-nav { height: 100%; display: flex; align-items: center; }
.nav-link { color: var(--muted) !important; font-weight: 500; font-size: .875rem; padding: 0 1rem !important; height: 100%; display: flex; align-items: center; transition: all .2s ease; position: relative; text-decoration: none !important; }
.nav-link:hover { color: var(--accent) !important; background: transparent !important; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--accent); transition: all .2s ease; }
.nav-link:hover::after, .nav-link.active::after { width: 80%; }
.nav-link.dropdown-toggle::after { display: none !important; }
.nav-link.active { color: var(--accent) !important; }
.nav-link i { margin-right: .375rem; font-size: .875rem; }
.dropdown-hover:hover .dropdown-menu { display: block; margin-top: 0; }
.nav-item.dropdown { position: relative; }
.navbar-nav .nav-item.dropdown .dropdown-menu { margin-top: 0 !important; padding-top: .5rem; }
.nav-item.dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 1.25rem; background: transparent; z-index: 999; }
/* Мобильное меню */
.navbar-toggler { border: 1px solid var(--border); padding: .25rem .5rem; border-radius: .375rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .15rem rgba(74,158,255,.15); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(154,168,184,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
@media (max-width: 991.98px) {
    .navbar { height: auto; min-height: 60px; }
    .navbar > .container-fluid { flex-wrap: wrap; }
    .navbar-collapse {
        flex-basis: 100%;
        border-top: 1px solid var(--border);
        padding: .5rem 0 .75rem;
        order: 3;
    }
    .navbar-collapse.show { display: block !important; }
    .navbar-nav { height: auto; flex-direction: column; align-items: stretch !important; gap: 0; }
    .navbar-nav .nav-item { width: 100%; }
    .navbar-nav .nav-link { padding: .5rem .75rem !important; height: auto; justify-content: flex-start; border-radius: .375rem; }
    .navbar-nav .nav-link::after { display: none; }
    .navbar-nav .nav-item.dropdown .dropdown-menu {
        position: static; float: none; min-width: auto;
        margin: 0 0 .25rem .5rem; padding: .25rem 0;
        background: var(--panel2); border: 1px solid var(--border);
    }
    .navbar-nav .nav-item.dropdown::after { display: none; }
    .tc-nav-right { flex-direction: row; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; }
    .tc-nav-right .nav-item { width: auto; }
}
main.tc-main-container { max-width: 1400px; margin: 0 auto; padding: .5rem 1rem 2rem; min-height: calc(100vh - 60px - 80px); overflow-x: hidden; }
/* Автозадачи: компактные поля в условиях/действиях — фиксированные размеры */
.tc-cond-select, .tc-cond-input { font-size: 0.8125rem !important; width: 180px !important; min-width: 180px !important; max-width: 180px !important; flex: 0 0 180px !important; }
.tc-cond-op { width: 140px !important; min-width: 140px !important; max-width: 140px !important; flex: 0 0 140px !important; }
.tc-cond-value { width: 150px !important; min-width: 150px !important; max-width: 150px !important; flex: 0 0 150px !important; }
.tc-action-select, .tc-action-input { font-size: 0.8125rem !important; width: 200px !important; min-width: 200px !important; max-width: 200px !important; flex: 0 0 200px !important; }
.tc-action-value { width: 180px !important; min-width: 180px !important; max-width: 180px !important; flex: 0 0 180px !important; }
.tc-logic-select { width: 70px !important; min-width: 70px !important; max-width: 70px !important; flex: 0 0 70px !important; }
/* Автозадачи: Tom Select в условиях/действиях — стили .ts-wrapper и .ts-control */
.tc-cond-select.ts-wrapper, .tc-cond-op.ts-wrapper, .tc-action-select.ts-wrapper,
.tc-cond-input.ts-wrapper, .tc-action-input.ts-wrapper, .tc-logic-select.ts-wrapper {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 1.75rem !important;
    display: inline-flex !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
}
.tc-cond-select.ts-wrapper { width: 180px !important; max-width: 180px !important; }
.tc-cond-op.ts-wrapper { width: 140px !important; max-width: 140px !important; }
.tc-cond-input.ts-wrapper, .tc-cond-value.ts-wrapper { width: 150px !important; max-width: 150px !important; }
.tc-action-select.ts-wrapper { width: 200px !important; max-width: 200px !important; }
.tc-action-input.ts-wrapper, .tc-action-value.ts-wrapper { width: 180px !important; max-width: 180px !important; }
.tc-logic-select.ts-wrapper { width: 70px !important; max-width: 70px !important; }
:root[data-theme] .tc-cond-select .ts-control, :root[data-theme] .tc-cond-op .ts-control, :root[data-theme] .tc-action-select .ts-control,
:root[data-theme] .tc-cond-input .ts-control, :root[data-theme] .tc-action-input .ts-control, :root[data-theme] .tc-logic-select .ts-control {
    min-height: 1.75rem !important;
    height: 1.75rem !important;
    padding: 0 1.4rem 0 0.4rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0.25rem !important;
    border: 1px solid var(--input-border) !important;
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
.tc-cond-select .ts-control .item, .tc-cond-op .ts-control .item,
.tc-action-select .ts-control .item, .tc-cond-input .ts-control .item,
.tc-action-input .ts-control .item, .tc-logic-select .ts-control .item {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    color: var(--text) !important;
}
.tc-cond-select .ts-control input, .tc-cond-op .ts-control input,
.tc-action-select .ts-control input, .tc-cond-input .ts-control input,
.tc-action-input .ts-control input, .tc-logic-select .ts-control input {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    height: 1.75rem !important;
    min-width: 0 !important;
}
.tc-cond-select .ts-control .ts-caret, .tc-cond-op .ts-control .ts-caret,
.tc-action-select .ts-control .ts-caret, .tc-cond-input .ts-control .ts-caret,
.tc-action-input .ts-control .ts-caret, .tc-logic-select .ts-control .ts-caret {
    display: flex !important;
    align-items: center !important;
}
.tc-cond-select .ts-control .ts-placeholder, .tc-cond-op .ts-control .ts-placeholder,
.tc-action-select .ts-control .ts-placeholder, .tc-cond-input .ts-control .ts-placeholder,
.tc-action-input .ts-control .ts-placeholder, .tc-logic-select .ts-control .ts-placeholder {
    cursor: text;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}
.tc-cond-select.ts-wrapper.focus .ts-control, .tc-cond-op.ts-wrapper.focus .ts-control,
.tc-action-select.ts-wrapper.focus .ts-control, .tc-cond-input.ts-wrapper.focus .ts-control,
.tc-action-input.ts-wrapper.focus .ts-control, .tc-logic-select.ts-wrapper.focus .ts-control {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.15rem var(--input-focus-shadow) !important;
}
/* Автозадачи: отступ вложенности группы условий */
.tc-cond-node[data-depth="0"] { margin-left: 0; }
.tc-cond-node[data-depth="1"] { margin-left: 16px; }
.tc-cond-node[data-depth="2"] { margin-left: 32px; }
.tc-cond-node[data-depth="3"] { margin-left: 48px; }
.tc-cond-group-items { border-left: 2px solid var(--border); }
/* Sticky thead для таблиц со скроллом */
.tc-sticky-head { position: sticky; top: 0; z-index: 1; background: var(--panel); }
/* Центрированная карточка (авторизация, приглашения, no_access) */
.tc-auth-card { max-width: 540px; margin: 3rem auto 0; }
.tc-auth-card-wide { max-width: 960px; margin: 2.5rem auto 0; }
/* Overlay спиннер (создание тенанта) */
.tc-overlay { position: fixed; inset: 0; background: rgba(var(--overlay-rgb, 255,255,255), 0.85); z-index: 9999; backdrop-filter: blur(2px); }
/* Личный кабинет — sidebar на всю ширину, без padding main */
main.tc-main-container.tc-main-fullwidth { padding: 0; max-width: none; }
.card { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: .5rem !important; box-shadow: var(--shadow) !important; transition: all .2s ease; margin-bottom: .75rem; animation: fadeInUp .4s ease-out; }
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; }
.card-header { background: var(--panel2) !important; border-bottom: 1px solid var(--border) !important; padding: .5rem .75rem !important; font-weight: 600; font-size: .8125rem; color: var(--text); }
.card-body { padding: .75rem; color: var(--text); }
.btn { border: none !important; border-radius: .375rem !important; font-weight: 500; transition: all .2s ease; }
.btn i { margin-right: .375rem; }
.btn-primary { background: var(--accent) !important; color: #fff !important; border: 1px solid var(--accent) !important; }
.btn-primary:hover { background: var(--accent-dark) !important; border-color: var(--accent-dark) !important; }
.btn-secondary { background: var(--panel2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.btn-outline-secondary { background: transparent !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.btn-outline-secondary:hover { background: var(--hover-bg) !important; color: var(--text) !important; }
.btn-success { background: var(--green) !important; color: #fff !important; border: 1px solid var(--green) !important; }
.btn-success:hover { filter: brightness(.9); }
.btn i, .btn-sm i, .btn .fas, .btn-sm .fas { font-size: .6875rem; }
.form-control { background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; border-radius: .375rem !important; color: var(--text); transition: all .2s ease; }
.form-control:focus { background: var(--input-bg) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 .15rem var(--input-focus-shadow) !important; color: var(--text); }
.form-control::placeholder { color: var(--muted); }
.form-label { font-weight: 500; color: var(--text); margin-bottom: .375rem; font-size: .875rem; }
.form-compact .form-group, .form-compact .form-check { margin-bottom: .35rem !important; }
.form-compact label { font-size: .6875rem; font-weight: 500; margin-bottom: .1rem; color: var(--muted); }
.form-compact .form-control, .form-compact .form-select { font-size: .75rem; padding: .05rem .15rem; min-height: 1.25rem; line-height: 1.2; }
.form-compact textarea.form-control { min-height: 60px; padding: .3rem .5rem; line-height: 1.4; }
.form-compact .form-text { font-size: .6875rem; margin-top: .1rem; }
.form-compact .card-header h5, .form-compact .lk-card h5 { font-size: .875rem; }
.form-compact .btn { padding: .05rem .35rem; font-size: .75rem; min-height: 1.25rem; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; }
.table { background: var(--panel) !important; border-radius: .5rem; overflow: hidden; border: 1px solid var(--border) !important; color: var(--text); }
.table thead th { background: var(--panel2) !important; border: none !important; font-weight: 600; color: var(--muted); padding: .75rem 1rem; font-size: .875rem; }
.table tbody td { border: none !important; padding: .75rem 1rem; border-top: 1px solid var(--border) !important; font-size: .875rem; color: var(--text); }
.table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--text) !important; --bs-table-accent-bg: var(--bs-table-striped-bg); }
.table tbody tr:hover { background: var(--hover-bg) !important; color: var(--text) !important; }
.table-hover > tbody > tr:hover > * { color: var(--text) !important; --bs-table-accent-bg: var(--hover-bg) !important; }
.table.table-sm td, .table.table-sm th { padding: .1875rem .375rem !important; font-size: .75rem; vertical-align: middle; }
.tender-list-table.table.table-sm td, .tender-list-table.table.table-sm th { padding: .1875rem .375rem !important; font-size: .75rem; vertical-align: middle; }
.badge { border-radius: .25rem; font-weight: 500; padding: .25rem .5rem; font-size: .75rem; }
.badge.bg-success { background: var(--green) !important; }
.badge.bg-warning { background: var(--yellow) !important; }
.badge.bg-danger { background: var(--red) !important; }
.progress { background: var(--progress-bg) !important; border-radius: .25rem !important; height: .5rem; overflow: hidden; }
.progress-bar { background: var(--accent) !important; border-radius: .25rem; transition: width .3s ease; }
.alert { border: 1px solid var(--border) !important; border-radius: .5rem !important; padding: 1rem; margin-bottom: 1.25rem; }
.alert-warning { background: var(--alert-warning-bg) !important; color: var(--alert-warning-fg) !important; border-color: var(--alert-warning-bd) !important; }
.alert-success { background: var(--alert-success-bg) !important; color: var(--alert-success-fg) !important; border-color: var(--alert-success-bd) !important; }
.alert-danger  { background: var(--alert-danger-bg) !important; color: var(--alert-danger-fg) !important; border-color: var(--alert-danger-bd) !important; }
.alert-info    { background: var(--alert-info-bg) !important; color: var(--alert-info-fg) !important; border-color: var(--alert-info-bd) !important; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--text); margin-bottom: 1rem; }
h1 { font-size: 1.75rem; margin-bottom: 1.5rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
.text-primary { color: var(--accent) !important; }
.text-success { color: var(--green) !important; }
.text-warning { color: var(--yellow) !important; }
.text-danger { color: var(--red) !important; }
.stat-card { border: 1px solid var(--border) !important; border-radius: .5rem !important; transition: all .2s ease; }
.stat-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; }
/* Дашборд: график динамики (bar chart) */
.tc-chart { display: flex; align-items: flex-end; gap: 12px; height: 120px; padding: 0 8px; }
.tc-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tc-chart-bars { display: flex; gap: 2px; align-items: flex-end; height: 80px; overflow: hidden; }
.tc-chart-bar { width: 14px; min-height: 2px; border-radius: 2px 2px 0 0; }
.tc-chart-bar-created { background: var(--purple); }
.tc-chart-bar-won { background: var(--green); }
.tc-chart-label { font-size: 9px; color: var(--muted); text-align: center; }
.tc-chart-legend { display: flex; gap: 1rem; margin-top: .5rem; justify-content: center; }
.tc-chart-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.tc-chart-legend-dot-created { background: var(--purple); }
.tc-chart-legend-dot-won { background: var(--green); }
/* Дашборд: progress bar в таблице этапов */
.tc-progress { height: 16px; }
.tc-progress .progress-bar { font-size: 10px; }
/* Дашборд: визуальная воронка */
.tc-funnel-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tc-funnel-label { width: 180px; font-size: 12px; text-align: end; }
.tc-funnel-track { flex: 1; height: 24px; display: flex; align-items: center; }
.tc-funnel-bar { height: 24px; border-radius: 4px; display: flex; align-items: center; padding: 0 8px; color: #fff; font-size: 11px; font-weight: 600; }
.tender-detail-edit .table .form-control, .tender-detail-edit .card-body textarea { border: 1px solid var(--input-border) !important; border-radius: .375rem !important; background: var(--input-bg) !important; padding: .3rem .4rem !important; box-shadow: none !important; font-size: .75rem !important; line-height: 1.2; color: var(--text); resize: none; min-width: 0; height: 1.75rem !important; max-height: 1.75rem; overflow: auto; }
.tender-detail-edit .table .form-select { border: 1px solid var(--input-border) !important; border-radius: .375rem !important; background-color: var(--input-bg) !important; padding: 0 14px 0 0.4rem !important; box-shadow: none !important; font-size: .75rem !important; line-height: 1.4; color: var(--text); min-width: 0; min-height: 1.75rem; height: 1.75rem; }
.tender-detail-edit .table .inline-form-control, .tender-detail-edit .table .inline-form-select { border: none !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; font-size: .75rem !important; min-width: 0; min-height: auto; height: auto; }
.tender-detail-edit .table .form-control:focus, .tender-detail-edit .table .form-select:focus, .tender-detail-edit .card-body textarea:focus { background: var(--input-bg) !important; box-shadow: none !important; outline: none; }
.tender-detail-edit td .d-inline-flex { align-items: center; }
.tender-detail-edit .table input[type="checkbox"] { width: 14px; height: 14px; margin: 0; padding: 0; }
.tender-detail-edit .table td { vertical-align: middle !important; }
.tender-detail-edit .tc-form-check { padding: 0 !important; margin: 0 !important; min-height: 1.75rem !important; display: flex; align-items: center; }
/* Карточка тендера: фиксированная ширина колонки названий полей */
.tender-detail-edit .table.table-sm td:first-child { width: 45% !important; white-space: normal !important; }

/* История тендера — список событий */
.tc-history-list { padding: .25rem 0; }
.tc-history-item { padding: .3rem .75rem; border-bottom: 1px solid var(--border); }
.tc-history-item:last-child { border-bottom: none; }
.tc-history-meta { display: flex; gap: .5rem; align-items: center; margin-bottom: .1rem; }
.tc-history-date { font-size: .7rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.tc-history-user { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-history-msg { font-size: .75rem; line-height: 1.3; color: var(--text); }
/* Системные события — нейтральные */
.tc-history-system .tc-history-msg { color: var(--muted); }
/* Сообщения от пользователей — выделенные */
.tc-history-manual { background: var(--hover-bg); }
.tc-history-manual .tc-history-msg { color: var(--text); }
.tc-history-manual .tc-history-user { color: var(--accent); font-weight: 500; }
/* Мои сообщения — с акцентной полосой слева */
.tc-history-mine { border-left: 3px solid var(--accent); padding-left: calc(.75rem - 3px); }
.btn-tiny { padding: .125rem .25rem; font-size: .7rem; line-height: 1; }
.pagination .page-link { padding: .125rem .375rem; font-size: .75rem; line-height: 1.2; }
/* Пагинация — из эталона theme_preview.html */
.pagination { gap: .25rem; }
.page-link { background-color: var(--input-bg); border-color: var(--border); color: var(--text); font-size: .8125rem; padding: .25rem .6rem; }
.page-link:hover { background-color: var(--hover-bg); border-color: var(--border-light); color: var(--accent); }
.page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); color: #fff; }
.page-item.disabled .page-link { background-color: var(--panel); border-color: var(--border); color: var(--muted); }
.nav-tabs { margin-bottom: .75rem !important; border-bottom-color: var(--border); }
.nav-tabs .nav-link { padding: .4rem .8rem !important; font-size: .8125rem; color: var(--muted); border-color: transparent; }
.nav-tabs .nav-link:hover { color: var(--accent); background: transparent; border-color: transparent; }
.nav-tabs .nav-link.active {
    color: var(--accent) !important;
    background: var(--panel) !important;
    border-color: var(--border) var(--border) var(--panel) !important;
}
.nav-tabs .nav-link.active::after { display: none; }
.ql-editor table { border-collapse: collapse; width: 100%; margin: .5rem 0; border: 1px solid var(--border); }
.ql-editor table td, .ql-editor table th { border: 1px solid var(--border); padding: .375rem .625rem; font-size: .8125rem; vertical-align: top; color: var(--text); }
.ql-editor table thead tr, .ql-editor table tr:first-child { background: var(--panel2); font-weight: bold; }
.ql-editor h1 { font-size: 1.8em; font-weight: 700; margin: .5em 0; }
.ql-editor h2 { font-size: 1.5em; font-weight: 700; margin: .5em 0; }
.ql-editor h3 { font-size: 1.2em; font-weight: 600; margin: .4em 0; }
.ql-editor hr { border: none; border-top: 1px solid var(--border); margin: .75rem 0; }
.ql-editor code { background: var(--code-bg); padding: 1px 4px; border-radius: 3px; font-size: .75rem; font-family: monospace; color: var(--code-color); }
.ql-editor strong { font-weight: 700; }
.ql-editor ol, .ql-editor ul { margin: .25rem 0; padding-left: 1.5rem; }
.ql-editor a { color: var(--accent); text-decoration: underline; }
.lead { font-size: 1.125rem; color: var(--muted); margin-bottom: 1.25rem; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.lk-toast-container { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .625rem; pointer-events: none; }
.lk-toast { display: flex; align-items: center; gap: .75rem; background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: .625rem; padding: .875rem 1.125rem; min-width: 280px; max-width: 380px; box-shadow: 0 4px 24px rgba(0,0,0,.18) !important; pointer-events: all; animation: lk-toast-in .25s ease; font-size: .875rem; color: var(--text) !important; line-height: 1.4; }
.lk-toast.success { border-left: 4px solid var(--green); }
.lk-toast.error   { border-left: 4px solid var(--red); }
.lk-toast.warning { border-left: 4px solid var(--yellow); }
.lk-toast.info    { border-left: 4px solid var(--accent); }
.lk-toast-icon { font-size: 1.125rem; flex-shrink: 0; }
.lk-toast-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0 0 0 .5rem; flex-shrink: 0; }
.lk-toast-close:hover { color: var(--text); }
.lk-toast.hiding { animation: lk-toast-out .25s ease forwards; }
@keyframes lk-toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes lk-toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } }

/* Toast (Bootstrap 5) — стилизация под тему */
.toast {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: .5rem !important;
    color: var(--text) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.18) !important;
    font-size: .875rem;
}
.toast-header {
    background: var(--panel2) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
}
.toast-header .btn-close { padding: .25rem; }
.toast-body { color: var(--text) !important; }
@media (max-width: 768px) {
    main.tc-main-container { padding: .5rem .375rem 1rem; }
    .tc-nav-container { padding: 0 .375rem; }
    .nav-link { padding: 0 .75rem !important; font-size: .8125rem; }
    .card-body { padding: 1rem; }
    h1 { font-size: 1.5rem; }
    .btn:not(.btn-action):not(.btn-action-sm):not(.btn-action-lg):not(.btn-icon):not(.btn-icon-sm):not(.btn-icon-lg) { padding: .5rem 1rem !important; font-size: .8125rem; }
}

/* ============================================================
   SIDEBAR (tc-sidebar) — боковое меню личного кабинета
   Из эталона theme_preview.html
   ============================================================ */
.tc-sidebar-layout { display: flex; min-height: calc(100vh - 60px); background: var(--bg); }
.tc-sidebar { width: 220px; min-width: 220px !important; flex: 0 0 220px !important; background: var(--panel); border-right: 1px solid var(--border); padding: 1rem 0 .75rem; display: flex; flex-direction: column; overflow-y: auto; max-height: calc(100vh - 60px); }
.tc-sidebar-section { margin-bottom: .25rem; }
.tc-sidebar-label { font-size: .6875rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: .5rem .75rem .25rem; }
.tc-sidebar a { display: block; padding: .35rem .75rem; font-size: .8125rem; color: var(--text); text-decoration: none; border-left: 3px solid transparent; transition: color .15s, background .15s; line-height: 1.4; }
.tc-sidebar a:hover { color: var(--accent); background: var(--hover-bg); }
.tc-sidebar a.active { color: var(--accent); border-left-color: var(--accent); background: var(--hover-bg); font-weight: 500; }
.tc-sidebar .sidebar-user { margin-top: auto; padding: .5rem .75rem 0; border-top: 1px solid var(--border); font-size: .75rem; color: var(--muted); }
.tc-sidebar .sidebar-user strong { display: block; color: var(--text); font-size: .8125rem; font-weight: 500; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-sidebar .sidebar-company { color: var(--muted); font-size: .75rem; margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-sidebar .sidebar-role-badge { display: inline-block; font-size: .6875rem; padding: 1px 6px; border-radius: 20px; margin-right: 4px; margin-bottom: 4px; background: var(--panel2); color: var(--muted); }
.tc-sidebar .logout-link { display: block; margin-top: .5rem; font-size: .75rem; color: var(--muted); text-decoration: none; }
.tc-sidebar .logout-link:hover { color: var(--red); }
.tc-sidebar-main { flex: 1; padding: 1.5rem 2rem; min-width: 0; }
@media (max-width: 768px) {
    .tc-sidebar-layout { flex-direction: column; }
    .tc-sidebar { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--border); max-height: 200px; overflow-y: auto; }
    .tc-sidebar-main { padding: 1rem; }
}


/* ============================================================
   PROFILE / ЛИЧНЫЙ КАБИНЕТ — мигрировано из profile.css
   ============================================================ */
.lk-layout { display: flex; min-height: calc(100vh - 60px); background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.lk-sidebar { width: 220px; min-width: 220px; background: var(--panel); border-right: 1px solid var(--border); padding: 1.75rem 0 1.25rem; display: flex; flex-direction: column; }
.lk-sidebar-section { margin-bottom: .375rem; }
.lk-sidebar-label { font-size: .6875rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: .875rem 1.25rem .375rem; }
.lk-sidebar a { display: block; padding: .5625rem 1.25rem; font-size: .875rem; color: var(--text); text-decoration: none; border-left: 3px solid transparent; transition: color .15s, background .15s; line-height: 1.4; }
.lk-sidebar a:hover { color: var(--accent); background: var(--hover-bg); }
.lk-sidebar a.active { color: var(--accent); border-left-color: var(--accent); background: var(--hover-bg); font-weight: 500; }
.lk-sidebar .sidebar-user { margin-top: auto; padding: 1rem 1.25rem 0; border-top: 1px solid var(--border); font-size: .8125rem; color: var(--muted); }
.lk-sidebar .sidebar-user strong { display: block; color: var(--text); font-size: .8125rem; font-weight: 500; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-sidebar .sidebar-user .sidebar-company { font-size: .75rem; color: var(--muted); margin-bottom: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-sidebar .sidebar-role-badge { display: inline-block; font-size: .6875rem; padding: 2px 8px; border-radius: 20px; margin-right: 4px; margin-bottom: 4px; background: var(--panel2); color: var(--muted); }
.lk-sidebar .logout-link { display: block; margin-top: .625rem; font-size: .8125rem; color: var(--muted); text-decoration: none; }
.lk-sidebar .logout-link:hover { color: var(--red); }
.lk-main { flex: 1; padding: 1.5rem 3rem 3rem; min-width: 0; }
.lk-stats { display: flex; gap: 1.25rem; margin-bottom: 2rem; flex-wrap: wrap; }
.lk-stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: .625rem; padding: 1.25rem 1.75rem; flex: 1; min-width: 150px; }
.lk-stat-card .stat-value { font-size: 1.625rem; font-weight: 600; color: var(--text); line-height: 1; margin-bottom: .375rem; }
.lk-stat-card .stat-label { font-size: .8125rem; color: var(--muted); }
.lk-table { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--panel); border-radius: .625rem; overflow: hidden; border: 1px solid var(--border); }
.lk-table th { text-align: left; font-size: .8125rem; font-weight: 500; color: var(--muted); padding: .75rem 1rem; border-bottom: 1px solid var(--border); background: var(--panel2); white-space: nowrap; }
.lk-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.lk-table tr:last-child td { border-bottom: none; }
.lk-table tr:hover td { background: var(--hover-bg); }
.lk-table tr.current-user td { background: var(--hover-bg); border-left: 3px solid var(--accent); }
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 500; }
.status-badge.active { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.status-badge.inactive { background: var(--badge-grey-bg); color: var(--badge-grey-fg); }
.status-badge.error { background: var(--badge-red-bg); color: var(--badge-red-fg); }
.role-badge { display: inline-block; padding: 3px 10px; border-radius: .375rem; font-size: .75rem; background: var(--badge-blue-bg); color: var(--badge-blue-fg); margin-right: 4px; white-space: nowrap; }
.lk-info-block { background: var(--alert-info-bg); border-radius: .5rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: .875rem; color: var(--alert-info-fg); }
.lk-info-block strong { display: block; margin-bottom: 4px; color: var(--accent); }
.lk-search { position: relative; margin-bottom: 1.25rem; }
.lk-search input { border: 1px solid var(--input-border); border-radius: .5rem; padding: .5625rem 1rem .5625rem 2.375rem; font-size: .875rem; color: var(--text); width: 300px; outline: none; background: var(--input-bg); transition: border-color .15s; }
.lk-search input:focus { border-color: var(--accent); }
.lk-search .search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .875rem; }
.btn-lk-primary { background: var(--accent); color: #fff; border: none; border-radius: .5rem; padding: .5625rem 1.25rem; font-size: .875rem; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; transition: background .15s; }
.btn-lk-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-lk-secondary { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: .5rem; padding: .5rem 1rem; font-size: .875rem; cursor: pointer; text-decoration: none; display: inline-block; transition: border-color .15s, color .15s; }
.btn-lk-secondary:hover { border-color: var(--accent); color: var(--accent); }
.lk-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; }
.lk-page-header h1 { font-size: 1.625rem; font-weight: 600; color: var(--text); margin: 0; }
.lk-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.lk-tabs a { padding: .625rem 1.25rem; font-size: .875rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s; }
.lk-tabs a.active, .lk-tabs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.lk-form-group { margin-bottom: .75rem; }
.lk-form-group label { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); margin-bottom: 3px; }
.lk-form-group input, .lk-form-group textarea, .lk-form-group select { width: 100%; border: 1px solid var(--input-border); border-radius: .5rem; padding: .25rem .5rem; font-size: .8125rem; color: var(--text); background: var(--input-bg); outline: none; transition: border-color .15s; box-sizing: border-box; min-height: 1.75rem; }
.lk-form-group input:focus, .lk-form-group textarea:focus, .lk-form-group select:focus { border-color: var(--accent); box-shadow: 0 0 0 .15rem var(--input-focus-shadow); }
.lk-section-title { font-size: .8125rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 1.75rem 0 .875rem; }
.lk-actions-btn { background: none; border: none; cursor: pointer; padding: .25rem .5rem; border-radius: .375rem; color: var(--muted); font-size: 1.125rem; line-height: 1; transition: background .15s; }
.lk-actions-btn:hover { background: var(--hover-bg); color: var(--text); }
.you-label { font-size: .6875rem; color: var(--accent); display: block; margin-top: 2px; }
.lk-reqs-table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.lk-reqs-table td { padding: .625rem 0; border-bottom: 1px solid var(--border); color: var(--text); }
.lk-reqs-table td:first-child { color: var(--muted); width: 200px; font-size: .8125rem; }
.lk-card { background: var(--panel); border: 1px solid var(--border); border-radius: .625rem; padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; }
.lk-card h5 { font-size: .9375rem; font-weight: 600; color: var(--text); margin: 0 0 1rem; }
.company-switch-btn { display: block; width: 100%; text-align: left; padding: .3125rem .5rem; margin-bottom: 2px; border: 1px solid var(--border); border-radius: .375rem; background: var(--panel); font-size: .75rem; color: var(--text); cursor: pointer; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-switch-btn.active-company { border-color: var(--accent); background: var(--hover-bg); color: var(--accent); font-weight: 600; }
.plan-card { display: flex; flex-direction: column; }
.plan-card.current-plan { border: 2px solid var(--accent); }
.current-badge { font-size: .6875rem; background: var(--badge-blue-bg); color: var(--accent); padding: 2px 8px; border-radius: .75rem; font-weight: 600; }
.lk-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; display: none; }
.lk-modal-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.4); }
.lk-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--modal-bg); border: 1px solid var(--modal-border); border-radius: .75rem; padding: 1.5rem; width: 90%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,.25); color: var(--text); }
.lk-modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); }
.lk-modal-close:hover { color: var(--text); }
.sidebar-email { color: var(--muted); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-company-switch { margin-bottom: .5rem; }


/* AUTH-СТРАНИЦЫ */
.tc-auth-body { padding: 2rem; }
.tc-auth-icon { font-size: 3rem; color: var(--accent); }
.tc-auth-icon-success { color: var(--green); }
.tc-info-panel { background: var(--alert-info-bg); border: 1px solid var(--alert-info-bd); border-radius: .5rem; padding: 1rem; margin-bottom: 1.25rem; color: var(--text); }
.tc-info-panel p { font-size: .875rem; }
.tc-steps-list { margin: 0; padding-left: 1.25rem; line-height: 1.7; }
.tc-auth-note { border-top: 1px solid var(--border); padding-top: .75rem; }

/* Rate-limit экран */
.tc-rate-limit-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.tc-rate-limit-box { background: var(--panel); padding: 2.25rem 2rem; border-radius: 1rem; max-width: 420px; width: 90%; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); color: var(--text); }
.tc-rate-limit-icon { font-size: 3rem; margin-bottom: 1rem; }
.tc-rate-limit-title { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; color: var(--text); }
.tc-rate-limit-text { color: var(--muted); margin-bottom: 1.5rem; line-height: 1.5; font-size: .9375rem; }
.tc-rate-limit-countdown { font-size: 2.625rem; font-weight: 700; color: var(--accent); margin-bottom: .25rem; }
.tc-rate-limit-unit { color: var(--muted); font-size: .875rem; text-transform: uppercase; letter-spacing: 1px; }

/* HOME / LANDING — hero-секция */
.tc-hero-card { border: none; background: linear-gradient(135deg, var(--panel2) 0%, var(--panel) 100%) !important; }
.tc-hero-title { color: var(--text); }
.tc-hero-icon { color: var(--accent); }
.tc-hero-subtitle { color: var(--muted); }
.tc-feature-icon { color: var(--accent); }

/* Переопределение primary-палитры Bootstrap под фирменный цвет */
.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-dark);
    --bs-btn-hover-border-color: var(--accent-dark);
    --bs-btn-active-bg: var(--accent-dark);
    --bs-btn-active-border-color: var(--accent-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
}
.text-primary { color: var(--accent) !important; }
.bg-primary { background-color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }
.link-primary { color: var(--accent) !important; }

/* Карточки */
.tc-card {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
/* Карточки с цветным акцентом (левая полоса) */
.tc-card-accent-success { border-left: 4px solid var(--green) !important; }
.tc-card-accent-warning { border-left: 4px solid var(--yellow) !important; }
.tc-card-accent-danger  { border-left: 4px solid var(--red) !important; }
.tc-card-accent-primary { border-left: 4px solid var(--accent) !important; }

/* Плотные таблицы */
.tc-table {
    font-size: 0.875rem;
    /* По умолчанию строки не переносятся */
    white-space: nowrap;
    /* Ограничиваем ширину ячеек по умолчанию, чтобы длинные поля
       (200 символов) не растягивали таблицу. col-auto — исключение. */
    table-layout: auto;
}
.tc-table th {
    font-weight: 600;
    color: var(--muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}
/* Компактные ячейки — меньше padding, ниже строки.
   !important нужен, чтобы перебить Bootstrap .table > :not(caption) > * > * */
.table.tc-table > :not(caption) > * > * {
    padding: 0.2rem 0.45rem !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    /* Ограничение ширины для всех ячеек, кроме col-auto.
       Длинный текст обрезается с многоточием.
       col-wrap / col-truncate переопределяют это поведение. */
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* col-auto — узкие столбцы (#, действия), без ограничений */
.table.tc-table > :not(caption) > * > *.col-auto {
    max-width: none;
}
/* th — без обрезки (заголовки должны быть видны полностью) */
.table.tc-table thead th {
    max-width: none;
}
/* Сверхкомпактная — для таблиц с большим количеством строк */
.table.tc-table.tc-table-tight > :not(caption) > * > * {
    padding: 0.1rem 0.35rem !important;
    line-height: 1.1 !important;
    font-size: 0.8125rem !important;
    vertical-align: middle !important;
}
.table.tc-table.tc-table-tight th {
    font-size: 0.7rem !important;
}
/* Столбец с переносом слов — задаёт max-width и word-wrap.
   Использование: <td class="col-wrap" style="max-width: 200px;"> */
.tc-table .col-wrap {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}
/* Столбец с обрезкой текста — многоточием.
   Использование: <td class="col-truncate" style="max-width: 150px;"> */
.tc-table .col-truncate {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Ширина столбца по содержимому (для узких: #, действия) */
.tc-table .col-auto {
    width: 1%;
    white-space: nowrap;
}
/* === Сортировка таблиц === */
/* Все <th> кликабельны, кроме .col-auto (действия, #) */
.tc-table thead th {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.4rem !important;
}
.tc-table thead th.col-auto {
    cursor: default;
    padding-right: 0.45rem !important;
}
/* Индикатор сортировки — стрелка справа в заголовке */
.tc-table thead th:not(.col-auto)::after {
    content: '\f0dc'; /* fa-sort */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    font-size: 0.65rem;
    color: #adb5bd;
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
}
/* Активная сортировка — стрелка вверх/вниз, цвет */
.tc-table thead th.tc-sort-asc::after {
    content: '\f0de'; /* fa-sort-up */
    color: var(--accent);
}
.tc-table thead th.tc-sort-desc::after {
    content: '\f0dd'; /* fa-sort-down */
    color: var(--accent);
}
/* При наведении — стрелка темнее */
.tc-table thead th:not(.col-auto):hover::after {
    color: #6c757d;
}
/* Отключить встроенную сортировку tc-table (для таблиц с серверной сортировкой) */
.tc-table.no-tc-sort thead th {
    cursor: default;
    padding-right: 0.45rem !important;
}
.tc-table.no-tc-sort thead th:not(.col-auto)::after,
.tc-table.no-tc-sort thead th.tc-sort-asc::after,
.tc-table.no-tc-sort thead th.tc-sort-desc::after,
.tc-table.no-tc-sort thead th:not(.col-auto):hover::after {
    content: none;
}

/* === Горизонтальные формы «Поле: значение» === */
/* Каждое поле в одну строку: label слева, input справа.
   .tc-form-row — строка поля
   .tc-form-label — подпись слева (фиксированная ширина)
   .tc-form-value — значение/инпут справа (растягивается)
   .tc-form-readonly — значение без редактирования (текст)
   Высота инпутов совпадает с btn-action-sm (1.75rem). */
.tc-form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
    border-bottom: 1px solid var(--border);
}
.tc-form-row:last-child {
    border-bottom: none;
}
.tc-form-label {
    flex: 0 0 auto;
    width: 160px;
    min-width: 100px;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: right;
    padding-right: 0.25rem;
}
/* Двоеточие после названия поля — только если label не пустой */
.tc-form-label:not(:empty)::after {
    content: ':';
}
/* Пустой label — выравнивает значение/кнопки по левому краю поля значения.
   Кнопки в строке формы по умолчанию прижимаются вправо. */
.tc-form-label:empty + .tc-form-value {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}
.tc-form-value {
    flex: 1 1 auto;
    min-width: 0;
}
/* Значение без редактирования — просто текст */
.tc-form-readonly {
    font-size: 0.8125rem;
    color: var(--text);
    padding: 0.25rem 0;
    line-height: 1.2;
}
.tc-form-readonly.text-muted {
    color: var(--muted) !important;
}
/* Инпуты внутри формы — компактные, высота 1.75rem (как btn-action-sm) */
.tc-form-value .form-control:not(textarea):not([type="file"]),
.tc-form-value .form-select {
    height: 1.75rem !important;
    font-size: 0.8125rem !important;
    padding: 0.15rem 0.4rem !important;
    line-height: 1.2 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Ограничение ширины по умолчанию — инпут не на всю строку */
.tc-form-value .form-control:not(textarea):not([type="file"]):not([type="date"]) {
    max-width: 320px;
}
.tc-form-value .form-select {
    max-width: 320px;
}
/* Порт сервера — узкий инпут рядом с host */
.tc-input-port {
    max-width: 90px;
    display: inline-block;
}
/* Чекбокс SSL рядом с инпутом порта */
.tc-check-inline {
    display: inline-block;
}
/* Tom Select dropdown — поверх карточек, адаптивная ширина по содержимому */
.ts-dropdown {
    z-index: 9999 !important;
    background: var(--panel2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    min-width: 100% !important;
    width: max-content !important;
    max-width: 480px !important;
}
.ts-dropdown .ts-dropdown-content {
    background: var(--panel2) !important;
    width: 100% !important;
}
.ts-dropdown .ts-dropdown-content {
    background: var(--panel2) !important;
}
.ts-dropdown .option {
    color: var(--text) !important;
    background: var(--panel2) !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: var(--hover-bg) !important;
    color: var(--accent) !important;
}
.ts-dropdown .option.selected {
    background: var(--badge-blue-bg) !important;
    color: var(--badge-blue-fg) !important;
}
.ts-dropdown .create {
    color: var(--accent) !important;
}
.ts-dropdown .dropdown-input-wrap input {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text) !important;
}
:root[data-theme] .ts-control input,
:root[data-theme] .ts-dropdown input {
    color: var(--text) !important;
}
:root[data-theme] .ts-control input::placeholder,
:root[data-theme] .ts-dropdown input::placeholder {
    color: var(--muted) !important;
}
.ts-wrapper {
    z-index: auto;
    overflow: visible !important;
}
/* Карточка с Tom Select — не обрезает dropdown */
.card.overflow-visible,
.card.overflow-visible > .card-body,
.card.overflow-visible .tc-form-value {
    overflow: visible !important;
}

/* ============================================================
   ПОЧТА — единые стили для /mail/ и вкладки «Переписка»
   ============================================================ */

/* Полноэкранный режим почты — footer скрыт через {% block footer %}{% endblock %} в шаблоне */

/* Главный layout — 3 колонки (папки | список | содержимое) */
.tc-mail-layout {
    display: flex; height: calc(100vh - var(--header-height, 60px));
    border-top: 1px solid var(--border); overflow: hidden;
}
/* Вкладка «Переписка» в тендере — фиксированная высота */
.tc-mail-layout-embedded {
    display: flex; border: 1px solid var(--border); border-radius: .375rem;
    overflow: hidden; background: var(--panel);
    height: calc(100vh - 160px); min-height: 400px;
}

/* Панель папок (крайняя левая) */
.tc-mail-folders {
    width: 180px; min-width: 180px; border-right: 1px solid var(--border);
    background: var(--panel2); overflow-y: auto;
}
.tc-mail-folder-link {
    display: block; padding: .25rem .5rem; font-size: .75rem;
    text-decoration: none; color: var(--text);
}
.tc-mail-folder-link:hover { background: var(--hover-bg); color: var(--accent); }
.tc-mail-folder-link.active { color: var(--accent); background: var(--hover-bg); }
.tc-mail-folder-link.outbox { border-top: 1px solid var(--border); }
.tc-mail-folder-link.outbox.active { background: rgba(255, 243, 224, .3); }
.tc-mail-folder-link.drafts.active { background: rgba(232, 245, 233, .3); }
.tc-mail-account-header {
    padding: .25rem .5rem; font-size: .625rem; color: var(--muted);
    text-transform: uppercase; border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
}
.tc-mail-account-header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* Узел дерева папок */
.tc-folder-node { }
.tc-folder-node-row { display: flex; align-items: center; min-height: 22px; }
.tc-folder-toggle {
    cursor: pointer; font-size: .625rem; color: var(--muted);
    width: 14px; text-align: center; user-select: none; flex-shrink: 0;
}
.tc-folder-spacer { width: 14px; flex-shrink: 0; }
.tc-folder-link {
    display: block; flex: 1; padding: .1875rem .375rem;
    text-decoration: none; color: var(--text); font-size: .75rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-folder-link:hover { background: var(--hover-bg); color: var(--accent); }
.tc-folder-link.active { color: var(--accent); background: var(--hover-bg); border-radius: .1875rem; }

/* Список тредов (средняя панель) */
.tc-mail-list {
    width: 280px; min-width: 280px; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; background: var(--panel);
}
.tc-mail-list-embedded {
    width: 300px; min-width: 300px; border-right: 1px solid var(--border);
    overflow-y: auto;
}
.tc-mail-list-header {
    padding: .375rem .5rem; border-bottom: 1px solid var(--border);
    background: var(--panel);
}
.tc-mail-list-body { flex: 1; overflow-y: auto; }

/* Элемент списка тредов */
.tc-mail-thread-item {
    display: block; padding: .4375rem .625rem; border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
}
.tc-mail-thread-item:hover { background: var(--hover-bg); }
.tc-mail-thread-item.active { background: var(--hover-bg); }
.tc-mail-thread-row { display: flex; justify-content: space-between; align-items: start; }
.tc-mail-thread-subject {
    font-size: .75rem; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; flex: 1;
}
.tc-mail-thread-subject.unread { font-weight: bold; }
.tc-mail-thread-date { font-size: .625rem; color: var(--muted); white-space: nowrap; margin-left: .25rem; }
.tc-mail-thread-meta { font-size: .625rem; color: var(--muted); margin-top: .0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Заголовки групп в списке (клиент/поставщик/логистика) */
.tc-mail-group-header {
    padding: .375rem .5rem; font-size: .625rem; color: var(--muted);
    text-transform: uppercase; border-bottom: 1px solid var(--border);
}
.tc-mail-group-header.client { background: rgba(74, 158, 255, .08); }
.tc-mail-group-header.supplier { background: rgba(255, 193, 7, .08); border-top: 1px solid var(--border); }
.tc-mail-group-header.logistics { background: rgba(40, 167, 69, .08); border-top: 1px solid var(--border); }
.tc-mail-group-header.other { background: rgba(220, 53, 69, .08); border-top: 1px solid var(--border); }

/* Элемент списка с кнопкой отвязки (вкладка «Переписка») */
.tc-mail-thread-row-with-action { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.tc-mail-thread-row-with-action.active { background: var(--hover-bg); }
.tc-mail-thread-row-with-action .tc-mail-thread-item { border-bottom: none; flex: 1; min-width: 0; }

/* Содержимое (правая панель) */
.tc-mail-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Заголовок треда */
.tc-mail-thread-header {
    padding: .375rem .75rem; border-bottom: 1px solid var(--border);
    background: var(--panel); flex-shrink: 0;
}
.tc-mail-thread-title { font-size: .8125rem; font-weight: bold; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-mail-thread-actions { display: flex; align-items: center; gap: .25rem; }
.tc-mail-thread-tenders { display: flex; align-items: center; gap: .25rem; margin-top: .25rem; flex-wrap: wrap; }

/* Контейнер сообщений */
.tc-mail-messages { flex: 1 1 0; overflow-y: auto; padding: .625rem .75rem; min-height: 0; }
.tc-mail-messages.collapsed { flex: 0 0 0; overflow: hidden; padding: 0; min-height: 0; }

/* Одно сообщение */
.tc-mail-msg { margin-bottom: .625rem; max-width: 75%; }
.tc-mail-msg.incoming { margin-right: auto; margin-left: 0; }
.tc-mail-msg.outgoing { margin-left: auto; margin-right: 0; }
.tc-mail-msg-bubble {
    padding: .5rem .625rem; border-radius: .375rem;
}
.tc-mail-msg.incoming .tc-mail-msg-bubble {
    background: rgba(74, 158, 255, .06); border: 1px solid rgba(74, 158, 255, .2);
}
.tc-mail-msg.outgoing .tc-mail-msg-bubble {
    background: rgba(40, 167, 69, .06); border: 1px solid rgba(40, 167, 69, .2);
}
.tc-mail-msg-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: .1875rem; }
.tc-mail-msg-from { font-size: .8125rem; }
.tc-mail-msg-from .muted { color: var(--muted); }
.tc-mail-msg-actions { display: flex; align-items: center; gap: .375rem; }
.tc-mail-msg-date { font-size: .625rem; color: var(--muted); white-space: nowrap; }
.tc-mail-msg-body { font-size: .75rem; line-height: 1.4; margin-top: .25rem; }
.tc-mail-msg-attachments { margin-top: .3125rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.tc-mail-msg-att-img { max-height: 200px; max-width: 300px; border: 1px solid var(--border); border-radius: .25rem; cursor: pointer; }
.tc-mail-att-chip { display: inline-flex; align-items: center; gap: .25rem; background: var(--panel2); border: 1px solid var(--border); border-radius: .25rem; padding: .125rem .25rem; }
.tc-mail-att-chip-link { display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; color: var(--text); font-size: .75rem; max-width: 220px; }
.tc-mail-att-chip-link:hover { background: var(--hover-bg); }
.tc-mail-att-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Тело email (внутри сообщения) */
.email-body { padding: .25rem .375rem !important; font-size: .75rem; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; max-width: 100%; overflow-x: auto; }
.email-body > div { margin: 0 !important; min-height: 1em; max-width: 100%; }
.email-body p { margin: 0 0 .375rem 0 !important; }
.email-body img { max-width: 100%; height: auto; min-height: 50px; display: block; }
.email-body blockquote { border-left: 2px solid var(--border); margin: .25rem 0 !important; padding: .25rem .5rem !important; color: var(--muted); }
.email-body a { color: var(--accent); word-break: break-all; }
.email-body table { border-collapse: collapse; width: 100%; table-layout: fixed; word-break: break-word; }
.email-body td, .email-body th { border: 1px solid var(--border); padding: .125rem .25rem !important; word-break: break-word; overflow-wrap: anywhere; }
.email-body pre { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.email-body-wrapper {
    width: 100%; line-height: 1.4; padding: .25rem .375rem;
    border: 1px solid var(--border); border-radius: .25rem; background: var(--panel);
}

/* Quill редактор — компактный */
.tc-mail-editor { font-size: .75rem; border: 1px solid var(--input-border); border-radius: .25rem; background: var(--input-bg); flex: 1 1 0; min-height: 0; overflow: hidden; }
.ql-toolbar { padding: .125rem .25rem !important; }
.ql-editor { padding: .25rem .375rem !important; min-height: 120px; font-size: .75rem; }
.ql-container { font-size: .75rem; }
.ql-snow .ql-picker { font-size: .75rem; }
.ql-editor.expanded { min-height: 300px !important; }
.ql-expand-btn { cursor: pointer !important; }

/* Форма ответа */
.tc-mail-reply {
    border-top: 1px solid var(--border); background: var(--panel);
    flex: 0 0 auto; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
}
.tc-mail-reply-header { padding: .375rem .75rem; display: flex; align-items: center; gap: .375rem; cursor: pointer; flex-shrink: 0; }
.tc-mail-reply-header .chevron { transition: transform .2s; }
.tc-mail-reply-header.open .chevron { transform: rotate(90deg); }
.tc-mail-reply-body { display: none; min-height: 0; padding: .375rem .75rem; border-top: 1px solid var(--border); }
.tc-mail-reply-body.open { display: flex; flex: 1 1 0; overflow: hidden; flex-direction: column; }
.tc-mail-reply-body .ql-toolbar { flex-shrink: 0; }
.tc-mail-reply-body .ql-container { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.tc-mail-reply-body .ql-editor { min-height: 120px; }
.tc-mail-reply-fields { display: flex; gap: .1875rem; margin-bottom: .125rem; flex-shrink: 0; }
.tc-mail-reply-footer { display: flex; justify-content: space-between; align-items: center; margin-top: .1875rem; flex-shrink: 0; }

/* Форма нового письма (inline) */
.tc-mail-new { display: none !important; flex: 1 1 0; flex-direction: column; min-height: 0; overflow: hidden; }
.tc-mail-new.open { display: flex !important; flex: 1 1 0; }
.tc-mail-new-header { display: flex; justify-content: space-between; align-items: center; padding: .5rem; border-bottom: 1px solid var(--border); background: var(--panel2); flex-shrink: 0; }
.tc-mail-new-body { padding: .5rem .75rem; background: var(--panel); flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.tc-mail-new .ql-toolbar { flex-shrink: 0; }
.tc-mail-new .ql-container { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.tc-mail-new .ql-editor { min-height: 120px; }

/* Модалка привязки */
.tc-mail-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: 9999; align-items: center; justify-content: center; }
.tc-mail-modal.open { display: flex; }
.tc-mail-modal-dialog { background: var(--panel); border-radius: .5rem; padding: 1rem; width: 440px; max-width: 90%; }
.tc-mail-modal-dialog.wide { width: 480px; }
/* Модалка привязки: dropdown выше полей */
.tc-mail-modal .assign-cp-row,
.tc-mail-modal .assign-tender-row { position: relative; }
.tc-mail-modal .ts-wrapper { position: relative; z-index: auto; }
.tc-mail-modal .ts-dropdown { z-index: 10010 !important; }
.tc-mail-modal .ts-control { min-height: 36px; }
/* Мультиселект тендеров: чипы ниже поля ввода */
.tc-mail-modal .assign-tender-row .ts-control .item { display: none !important; }
.tc-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  min-height: 0;
  max-height: 180px;
  overflow-y: auto;
}
.tc-chips-container:empty { display: none; }
.tc-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--accent);
  color: #fff !important;
  border-radius: 4px;
  font-size: .8125rem;
  line-height: 1.4;
  cursor: default;
}
.tc-chip .tc-chip-remove {
  margin-left: 6px;
  cursor: pointer;
  opacity: 0.8;
  font-weight: bold;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}
.tc-chip .tc-chip-remove:hover { opacity: 1; }

/* Пустое состояние */
.tc-mail-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .8125rem; }
.tc-mail-empty-icon { text-align: center; color: var(--muted); }
.tc-mail-empty-icon i { font-size: 2rem; }
.tc-mail-empty-icon div { margin-top: .375rem; font-size: .75rem; }

/* Email autocomplete (chips для Кому/Копия) */
.tc-email-input-wrap {
    position: relative; flex: 1; display: flex; flex-wrap: wrap; gap: 2px;
    align-items: center; border: 1px solid var(--input-border); border-radius: .25rem;
    padding: 1px 4px; background: var(--input-bg); min-height: calc(1.5em + .5rem + 2px);
}
.tc-email-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--input-focus-shadow); }
.tc-email-input {
    border: none; outline: none; flex: 1; min-width: 80px;
    font-size: .6875rem; padding: 1px 2px; background: transparent; color: var(--text);
}
.tc-email-chip {
    display: inline-flex; align-items: center; background: var(--hover-bg);
    border: 1px solid var(--border); border-radius: 3px; padding: 0 4px;
    font-size: .625rem; gap: 2px; white-space: nowrap; color: var(--text);
}
.tc-email-chip-x { color: var(--muted); font-size: .75rem; line-height: 1; cursor: pointer; text-decoration: none; }
.tc-email-chip-x:hover { color: var(--red); }
.tc-email-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
    background: var(--panel); border: 1px solid var(--border); border-radius: .25rem;
    box-shadow: var(--shadow); max-height: 200px; overflow-y: auto; display: none;
}
.tc-email-dropdown-item {
    padding: .25rem .5rem; cursor: pointer; font-size: .6875rem;
    border-bottom: 1px solid var(--border); color: var(--text);
}
.tc-email-dropdown-item:hover, .tc-email-dropdown-item.active { background: var(--hover-bg); color: var(--accent); }
.tc-email-dropdown-item:last-child { border-bottom: none; }

/* Quill — видимостью иконок в тёмной теме */
.ql-snow .ql-stroke { stroke: var(--text) !important; }
.ql-snow .ql-fill { fill: var(--text) !important; }
.ql-snow .ql-picker-label { color: var(--text) !important; }
.ql-snow .ql-picker-options { background: var(--panel); border-color: var(--border); }
.ql-snow .ql-picker-item { color: var(--text); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent) !important; }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent) !important; }
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active { color: var(--accent); }
.ql-snow .ql-editor { color: var(--text); background: var(--input-bg); }
.ql-snow .ql-editor.ql-blank::before { color: var(--muted); }
.ql-snow .ql-tooltip { background: var(--panel); border-color: var(--border); color: var(--text); box-shadow: var(--shadow); }
.ql-snow .ql-tooltip input[type=text] { background: var(--input-bg); color: var(--text); border-color: var(--input-border); }

/* Панель переменных для редактора шаблонов */
.var-panel { max-height: calc(100vh - 160px); overflow-y: auto; }
.var-group { margin-bottom: 2px; }
.var-group-header {
    display: flex; align-items: center; gap: 4px; padding: .25rem .375rem;
    font-size: .6875rem; font-weight: 700; color: var(--text);
    text-transform: uppercase; letter-spacing: .4px; cursor: pointer;
    border-radius: .25rem; background: var(--panel2); user-select: none;
}
.var-group-header:hover { background: var(--hover-bg); }
.var-group-header .chevron { transition: transform .15s; font-size: .5625rem; }
.var-group.collapsed .chevron { transform: rotate(-90deg); }
.var-group.collapsed .var-group-items { display: none; }
.var-group-items { padding: 2px 0; }
.var-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: .1875rem .5rem; margin: 1px 0; font-size: .75rem; cursor: pointer;
    border-radius: .25rem; transition: background .15s; white-space: nowrap; overflow: hidden;
    color: var(--text);
}
.var-item:hover { background: var(--hover-bg); color: var(--accent); }
.var-item .var-label { overflow: hidden; text-overflow: ellipsis; }
.var-item .var-code { display: none; }
#templateEditor.ql-editor { font-size: .875rem; line-height: 1.5; padding: .75rem; min-height: 320px; }

/* Элементы колонок (report_template_edit) */
.col-item {
    display: inline-block; padding: .25rem .625rem; margin: 2px;
    font-size: .75rem; border: 1px solid var(--border); border-radius: .25rem;
    cursor: pointer; user-select: none; background: var(--panel); color: var(--text);
}
.col-item:hover { border-color: var(--accent); }
.col-item.selected { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Элементы секций (report_edit) */
.section-item {
    display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; margin: 2px 0;
    border: 1px solid var(--border); border-radius: .375rem; background: var(--panel);
    cursor: move; font-size: .8125rem; color: var(--text);
}
.section-item.selected { border-color: var(--accent); background: var(--hover-bg); }
.section-item .handle { color: var(--muted); cursor: grab; }
.section-item .color-dot { width: .75rem; height: .75rem; border-radius: 50%; flex-shrink: 0; }
.section-item .title { font-weight: 600; }
.section-item .name { color: var(--muted); font-size: .6875rem; }
.section-item .order-num {
    background: var(--accent); color: #fff; border-radius: 50%;
    width: 1.25rem; height: 1.25rem; display: flex; align-items: center;
    justify-content: center; font-size: .6875rem; flex-shrink: 0;
}

/* Иконки и бейджи в папках почты */
.tc-mail-folder-icon { font-size: .625rem; }
.tc-mail-folder-badge { font-size: .5rem; margin-left: .1875rem; }
.tc-mail-outbox-body { white-space: pre-wrap; font-size: .75rem; color: var(--text); }

/* Индикаторы черновиков */
.tc-mail-draft-badge { color: var(--muted); display: none; }
.tc-mail-draft-icon { font-size: .5625rem; }
.tc-mail-draft-dot { font-size: .375rem; }

/* Иконки-ссылки в форме (внешние ссылки) */
.tc-form-link-icon { color: var(--purple); }

/* Метки в треде почты */
.tc-mail-tenders-label { font-size: .625rem; }
.tc-mail-tender-select { width: 100%; font-size: .6875rem; }

/* Редактор карточки */
.editor-field { cursor: pointer; transition: background .15s; }
.editor-field:hover { background: var(--hover-bg); }
.editor-section.dragging, .editor-field.dragging, .editor-tab.dragging { opacity: .5; }
.field-placeholder { height: 2rem; background: var(--hover-bg); border: 2px dashed var(--accent); margin: 2px 0; }
.req-badge { font-size: .65rem; }
.editor-toolbar {
    position: sticky; top: 0; z-index: 1020; background: var(--bg);
    padding: .5rem 0; border-bottom: 1px solid var(--border); margin-bottom: .75rem;
}
.editor-tab { cursor: move; }
.history-resizer {
    height: .875rem; cursor: ns-resize; background: var(--panel2);
    border-top: 1px solid var(--border); border-radius: 0 0 .25rem .25rem;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 100; touch-action: none;
}
.history-resizer i { color: var(--muted); font-size: .625rem; }
.history-resizer:hover, .history-resizer:active { background: var(--hover-bg); }
.history-resizer:hover i, .history-resizer:active i { color: var(--accent); }

/* Иконки/бейджи редактора карточки */
.tc-editor-nav-btn { font-size: .75rem; }
.tc-editor-dots-icon { font-size: .6875rem; margin: 0; }
.tc-editor-success-icon { font-size: 3rem; }
.tc-editor-feature-icon { font-size: 1.5rem; }
.tc-editor-start-btn { font-size: 1rem; }
.tc-editor-sys-badge { font-size: .6rem; }

/* Список тикетов */
.tc-ticket-company { font-size: .6875rem; }

.tc-form-value textarea,
.tender-detail-edit textarea {
    max-width: 500px;
    /* Минимальная высота — 4 строки (4 × 1.3rem line-height + 0.4rem padding) */
    min-height: 5.6rem;
    font-size: 0.8125rem !important;
    padding: 0.2rem 0.4rem !important;
    line-height: 1.3 !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 0.375rem !important;
    background: var(--input-bg) !important;
    color: var(--text) !important;
    resize: vertical;
}
/* Tom Select — базовые стили для ВСЕХ .ts-control (единый вид) */
:root[data-theme] .ts-wrapper { padding: 0 !important; }
:root[data-theme] .ts-wrapper .ts-control {
    min-height: 1.75rem !important;
    padding: 0 1.4rem 0 0.4rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0.25rem !important;
    border: 1px solid var(--input-border) !important;
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
}
.ts-wrapper .ts-control .item { padding: 0 !important; margin: 0 !important; line-height: 1.2 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 100% !important; }
.ts-wrapper .ts-control input { padding: 0 !important; margin: 0 !important; line-height: 1.2 !important; min-width: 0 !important; }
.ts-wrapper .ts-control .ts-caret { display: flex !important; align-items: center !important; color: var(--muted) !important; opacity: 0.9 !important; }
.ts-wrapper.focus .ts-control {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.15rem var(--input-focus-shadow) !important;
}
/* Убрать рамку с wrapper — она на .ts-control */
.ts-wrapper { border: none !important; box-shadow: none !important; }

/* Tom Select — компактный, выравнивание по центру, без выступающих рамок */
.tc-form-value .ts-wrapper {
    max-width: 320px;
    /* Не добавляем внешнюю рамку при фокусе/открытии */
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.tc-form-value .ts-wrapper.focus,
.tc-form-value .ts-wrapper.dropdown-active {
    border: none !important;
    box-shadow: none !important;
}
.tc-form-value .ts-wrapper.focus .ts-control {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.15rem var(--input-focus-shadow) !important;
}
:root[data-theme] .tc-form-value .ts-control {
    min-height: 1.75rem !important;
    height: 1.75rem !important;
    padding: 0 1.4rem 0 0.4rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0.25rem !important;
    border: 1px solid var(--input-border) !important;
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
}
/* Выбранное значение — строго по центру */
.tc-form-value .ts-control .item {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    color: var(--text) !important;
}
/* Поле ввода внутри control — тоже по центру */
.tc-form-value .ts-control input {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    height: 1.75rem !important;
    min-width: 0 !important;
}
/* Стрелка — по центру */
.tc-form-value .ts-control .ts-caret {
    display: flex !important;
    align-items: center !important;
}
/* Плейсхолдер — по центру */
.tc-form-value .ts-control .ts-placeholder {
    cursor: text;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}
/* Input group внутри формы — высота как у инпутов (1.75rem) */
.tc-form-value .input-group .input-group-text {
    font-size: 0.8125rem !important;
    padding: 0.15rem 0.4rem !important;
    line-height: 1.2 !important;
    height: 1.75rem !important;
    display: flex !important;
    align-items: center !important;
}
.tc-form-value .input-group .form-control {
    height: 1.75rem !important;
}
/* Ссылка на выбранный объект — иконка в label, после названия поля.
   Единая иконка: fas fa-external-link-alt.
   Формат: "Название" + иконка + ":" */
.tc-form-link {
    color: var(--accent);
    text-decoration: none;
    margin-left: 0.2rem;
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
}
.tc-form-link:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}
.tc-form-link i {
    font-size: 0.7rem;
}
/* Подсказка под полем */
.tc-form-text {
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 0.1rem;
}
/* Чекбокс в строке формы — компактный, без лишних отступов */
.tc-form-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    font-size: 0.8125rem;
}
/* Группа чекбоксов внутри формы — минимальные отступы по вертикали */
.tc-form-value .d-flex.flex-column.gap-2 {
    gap: 0.2rem !important;
}
/* form-check внутри формы — убрать стандартные отступы Bootstrap */
.tc-form-value .form-check {
    margin-bottom: 0;
    min-height: auto;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.tc-form-value .form-check-input {
    margin-left: 0;
    margin-top: 0;
    flex-shrink: 0;
}
.tc-form-value .form-check-label {
    font-size: 0.8125rem;
}
/* === Валидация и подсказки через иконку i === */
/* Инпут с ошибкой — красная рамка */
.tc-form-value .form-control.is-invalid,
.tc-form-value .form-select.is-invalid {
    border-color: var(--red) !important;
}
.tc-form-value .form-control.is-valid,
.tc-form-value .form-select.is-valid {
    border-color: var(--green) !important;
}
/* Убираем стандартные иконки Bootstrap (галочка/крестик справа) —
   они смещают ширину и конфликтуют с нашими tc-form-error-icon */
.tc-form-value .form-control.is-valid,
.tc-form-value .form-control.is-invalid,
.tc-form-value .form-select.is-valid,
.tc-form-value .form-select.is-invalid {
    background-image: none !important;
    padding-right: 0.4rem !important;
}
/* Скрываем стандартные блоки feedback */
.tc-form-value .invalid-feedback,
.tc-form-value .valid-feedback {
    display: none !important;
}
/* Иконка-подсказка i — синяя, рядом с label */
.tc-form-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    font-style: italic;
    cursor: help;
    margin-left: 0.25rem;
    flex-shrink: 0;
    position: relative;
    vertical-align: middle;
}
/* Иконка ошибки i — красная, рядом с инпутом */
.tc-form-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    font-style: italic;
    cursor: help;
    flex-shrink: 0;
    position: relative;
    vertical-align: middle;
}
/* Тултип — всплывает ВВЕРХ от иконки */
.tc-form-hint .tc-tooltip,
.tc-form-error-icon .tc-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    z-index: 1080;
    display: none;
    min-width: 200px;
    max-width: 320px;
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 400;
    font-style: normal;
    border-radius: 0.25rem;
    white-space: normal;
    line-height: 1.3;
    text-align: left;
}
.tc-form-hint .tc-tooltip {
    background: #1e293b;
    color: #fff;
}
.tc-form-error-icon .tc-tooltip {
    background: var(--red);
    color: #fff;
}
/* Стрелка тултипа */
.tc-form-hint .tc-tooltip::after,
.tc-form-error-icon .tc-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
}
.tc-form-hint .tc-tooltip::after {
    border-top-color: #1e293b;
}
.tc-form-error-icon .tc-tooltip::after {
    border-top-color: var(--red);
}
/* Показываем при наведении */
.tc-form-hint:hover .tc-tooltip,
.tc-form-error-icon:hover .tc-tooltip {
    display: block;
}
/* Контейнер для позиционирования */
.tc-form-value {
    position: relative;
}
/* Инпут + иконка ошибки в одну строку */
.tc-input-with-error {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Бейджи этапов */
.tc-badge-stage {
    font-size: 0.7rem;
    padding: 0.2em 0.5em;
}

/* === Иконки-кнопки (icon buttons) === */
/* Квадратные outline-кнопки с одной иконкой, бордером и тултипом.
   3 размера: .btn-icon-sm / .btn-icon / .btn-icon-lg
   Цвета: .btn-icon-primary / -success / -danger / -warning / -info / -secondary
   Единый компонент для таблиц, карточек и модальных окон. */
.btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--btn-icon-bg);
    color: var(--muted);
    border-radius: 0.375rem;
    transition: all 0.15s ease;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}
.btn-icon:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--btn-icon-hover-bg);
}
.btn-icon-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
    border-radius: 0.3rem;
}
.btn-icon-lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
    border-radius: 0.5rem;
}
/* Цветовые варианты — цвет виден сразу, фон при наведении */
.btn-icon-primary {
    color: var(--accent);
    border-color: var(--btn-icon-primary-bd);
}
.btn-icon-primary:hover {
    background: var(--btn-icon-primary-hover-bg);
    border-color: var(--accent);
    color: var(--accent);
}
.btn-icon-success {
    color: var(--green);
    border-color: var(--btn-icon-success-bd);
}
.btn-icon-success:hover {
    background: var(--btn-icon-success-hover-bg);
    border-color: var(--green);
    color: var(--green);
}
.btn-icon-danger {
    color: var(--red);
    border-color: var(--btn-icon-danger-bd);
}
.btn-icon-danger:hover {
    background: var(--btn-icon-danger-hover-bg);
    border-color: var(--red);
    color: var(--red);
}
.btn-icon-warning {
    color: var(--yellow);
    border-color: var(--btn-icon-warning-bd);
}
.btn-icon-warning:hover {
    background: var(--btn-icon-warning-hover-bg);
    border-color: var(--yellow);
    color: var(--yellow);
}
.btn-icon-info {
    color: var(--accent);
    border-color: var(--btn-icon-primary-bd);
}
.btn-icon-info:hover {
    background: var(--btn-icon-primary-hover-bg);
    border-color: var(--accent);
    color: var(--accent);
}
.btn-icon-secondary {
    color: var(--muted);
    border-color: var(--btn-icon-secondary-bd);
}
.btn-icon-secondary:hover {
    background: var(--btn-icon-secondary-hover-bg);
    border-color: var(--muted);
    color: var(--text);
}
/* Excel — фирменный зелёный (одинаковый в обеих темах) */
.btn-icon-excel {
    color: #1d6f42;
    border-color: #bbf7d0;
}
.btn-icon-excel:hover {
    background: #f0fdf4;
    border-color: #1d6f42;
}
/* Активное состояние (danger — красный фон при подтверждении) */
.btn-icon-active {
    color: var(--red);
    border-color: var(--red);
    background: var(--btn-icon-danger-hover-bg);
}
/* Disabled */
.btn-icon:disabled,
.btn-icon.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* === Кнопка «три точки» (⋮) — действия в таблицах === */
/* Использование: <button class="btn-dots" data-bs-toggle="dropdown"><i class="fas fa-ellipsis-v"></i></button>
   Квадратная, без рамки, с hover-фоном. Стандартный компонент для dropdown-меню действий. */
.btn-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    border-radius: 0.3rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.875rem;
    line-height: 1;
}
.btn-dots:hover,
.btn-dots[aria-expanded="true"] {
    background: var(--btn-dots-hover-bg);
    color: var(--text);
    border-color: var(--border);
}
.btn-dots::after {
    display: none; /* убираем стандартную стрелку Bootstrap dropdown-toggle */
}

/* === Поле поиска с иконкой-лупой === */
/* Использование: <div class="tc-search"><i class="fas fa-search"></i><input class="form-control" ...></div>
   Лупа — слева внутри поля, без разделителя, как часть input. */
.tc-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.tc-search > i {
    position: absolute;
    left: 0.6rem;
    color: var(--muted);
    font-size: 0.8125rem;
    pointer-events: none;
    z-index: 2;
}
.tc-search .form-control {
    padding-left: 2rem !important;
    height: 1.75rem !important;
    font-size: 0.8125rem !important;
}

/* === Компактные селекты для фильтров === */
/* Использование: <select class="form-select tc-select-sm"> или
   <select class="form-select tc-select-sm tc-tom-select">
   Высота 1.75rem (как btn-action-sm), ширина по содержимому (не растягивается). */
.tc-select-sm {
    height: 1.75rem !important;
    font-size: 0.8125rem !important;
    padding: 0.15rem 1.75rem 0.15rem 0.5rem !important;
    line-height: 1.2 !important;
    width: auto !important;
    min-width: 120px !important;
    background-position: right 0.5rem center !important;
}
/* Tom Select компактный — те же размеры */
.tc-select-sm.ts-wrapper {
    min-height: 1.75rem !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
:root[data-theme] .tc-select-sm .ts-control {
    min-height: 1.75rem !important;
    height: 1.75rem !important;
    padding: 0 1.4rem 0 0.4rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0.25rem !important;
    border: 1px solid var(--input-border) !important;
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
}
.tc-select-sm .ts-control .item {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    color: var(--text) !important;
}
.tc-select-sm .ts-control input {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    height: 1.75rem !important;
    min-width: 0 !important;
}
.tc-select-sm .ts-control .ts-caret {
    display: flex !important;
    align-items: center !important;
}
.tc-select-sm .ts-control .ts-placeholder {
    cursor: text;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}
.tc-select-sm.ts-wrapper.focus .ts-control {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.15rem var(--input-focus-shadow) !important;
}

/* === Компактные селекты для форм (полная ширина) === */
/* Использование: <select class="form-select tc-select-form tc-tom-select">
   Высота 1.75rem, ширина 100% (растягивается в колонке). */
.tc-select-form {
    height: 1.75rem !important;
    font-size: 0.8125rem !important;
    padding: 0.15rem 1.75rem 0.15rem 0.5rem !important;
    line-height: 1.2 !important;
    width: 100% !important;
    background-position: right 0.5rem center !important;
}
.tc-select-form.ts-wrapper {
    min-height: 1.75rem !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
}
:root[data-theme] .tc-select-form .ts-control {
    min-height: 1.75rem !important;
    height: 1.75rem !important;
    padding: 0 1.4rem 0 0.4rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0.25rem !important;
    border: 1px solid var(--input-border) !important;
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
    width: 100% !important;
}
.tc-select-form .ts-control .item {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    color: var(--text) !important;
}
.tc-select-form .ts-control input {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    height: 1.75rem !important;
    min-width: 0 !important;
}
.tc-select-form .ts-control .ts-caret {
    display: flex !important;
    align-items: center !important;
}
.tc-select-form .ts-control .ts-placeholder {
    cursor: text;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}
.tc-select-form.ts-wrapper.focus .ts-control {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.15rem var(--input-focus-shadow) !important;
}

/* === Строка фильтров — компактная, в одну строку === */
/* Использование: <div class="tc-filters">...</div>
   Элементы прижимаются влево, кнопка сброса — вправо (margin-left: auto). */
.tc-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}
.tc-filters .tc-search {
    flex: 0 0 auto;
}
.tc-filters > .tc-select-sm,
.tc-filters > select.tc-select-sm {
    flex: 0 0 auto;
}
.tc-filters > .btn {
    flex: 0 0 auto;
}
/* Кнопка сброса — прижимается вправо */
.tc-filters > .tc-filters-reset {
    margin-left: auto;
}

/* === Dropdown в таблицах === */
/* Dropdown-меню в таблицах может обрезаться предками с overflow: hidden.
   Решение: все предки таблицы — overflow: visible, меню — высокий z-index. */
.lk-layout,
.lk-main {
    overflow: visible !important;
}
.tc-table .dropdown {
    position: relative;
}
.tc-table .dropdown-menu {
    z-index: 10001 !important;
}

/* === Task status picker === */
.task-status-icon {
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
}
.task-status-icon:hover {
    transform: scale(1.25);
    transition: transform 0.15s;
}
.task-status-pick {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}
.task-status-pick:hover {
    background-color: #f0f0f0;
}

/* === Tooltip z-index === */
/* Шапка имеет z-index 9998, Bootstrap tooltip — 1080.
   Поднимаем tooltip выше шапки. */
.tooltip {
    z-index: 10000 !important;
}

/* === Modal: отступ ниже шапки === */
/* Шапка фиксированная, modal открывается ниже неё. */
.modal {
    z-index: 10001 !important;
}
.modal-dialog {
    margin-top: 80px;
}

/* === Кнопки-действия с текстом === */
/* Высота строго совпадает с иконками-кнопками: sm=1.75rem, по умолчанию=2.25rem, lg=2.75rem.
   Цвета через стандартные .btn-success / .btn-danger / .btn-outline-secondary и т.д.
   Единый компонент для модальных окон и основных действий. */
.btn-action {
    height: 2.25rem;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.375rem 0.875rem !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}
.btn-action-sm {
    height: 1.75rem;
    font-size: 0.8125rem;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0.625rem !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}
.btn-action-lg {
    height: 2.75rem;
    font-size: 1.0625rem;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1.25rem !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}