/* ================================================================
   Цветовая палитра: белый, серый, голубой, оранжевый, синий
   ================================================================ */
:root {
    --crm-white:      #ffffff;
    --crm-gray-light: #f4f6f9;
    --crm-gray:       #6b7280;
    --crm-gray-dark:  #374151;
    --crm-border:     #d1d5db;
    --crm-blue-light: #e8f0fe;
    --crm-blue:       #3b82f6;
    --crm-blue-dark:  #1d4ed8;
    --crm-sky:        #5b9bd5;
    --crm-orange:     #f97316;
    --crm-orange-dark:#ea580c;
    --crm-text:       #1f2937;
    --crm-muted:      #6b7280;
}

/* ================================================================
   Базовые стили
   ================================================================ */
body {
    background: var(--crm-gray-light);
    color: var(--crm-text);
}

.card {
    border: 1px solid var(--crm-border);
    background: var(--crm-white);
}

/* ================================================================
   Навигация
   ================================================================ */
.navbar.bg-dark {
    background-color: var(--crm-gray-dark) !important;
}

/* ================================================================
   Кнопки — переопределяем Bootstrap
   ================================================================ */

/* Основная (синяя) */
.btn-primary {
    background-color: var(--crm-blue);
    border-color: var(--crm-blue);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--crm-blue-dark);
    border-color: var(--crm-blue-dark);
    color: #fff;
}

/* Вторичная (серая) */
.btn-secondary {
    background-color: var(--crm-gray);
    border-color: var(--crm-gray);
    color: #fff;
}
.btn-secondary:hover {
    background-color: var(--crm-gray-dark);
    border-color: var(--crm-gray-dark);
    color: #fff;
}

/* Успех → синий */
.btn-success {
    background-color: var(--crm-blue);
    border-color: var(--crm-blue);
    color: #fff;
}
.btn-success:hover {
    background-color: var(--crm-blue-dark);
    border-color: var(--crm-blue-dark);
    color: #fff;
}

/* Опасность → оранжевый */
.btn-danger {
    background-color: var(--crm-orange);
    border-color: var(--crm-orange);
    color: #fff;
}
.btn-danger:hover {
    background-color: var(--crm-orange-dark);
    border-color: var(--crm-orange-dark);
    color: #fff;
}

/* Предупреждение → голубой */
.btn-warning {
    background-color: var(--crm-sky);
    border-color: var(--crm-sky);
    color: #fff;
}
.btn-warning:hover {
    background-color: var(--crm-blue);
    border-color: var(--crm-blue);
    color: #fff;
}

/* Outline-кнопки */
.btn-outline-primary {
    color: var(--crm-blue);
    border-color: var(--crm-blue);
}
.btn-outline-primary:hover {
    background-color: var(--crm-blue);
    border-color: var(--crm-blue);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--crm-gray);
    border-color: var(--crm-border);
}
.btn-outline-secondary:hover {
    background-color: var(--crm-gray-light);
    border-color: var(--crm-gray);
    color: var(--crm-gray-dark);
}

.btn-outline-success {
    color: var(--crm-blue);
    border-color: var(--crm-blue);
}
.btn-outline-success:hover {
    background-color: var(--crm-blue);
    border-color: var(--crm-blue);
    color: #fff;
}

.btn-outline-danger {
    color: var(--crm-orange);
    border-color: var(--crm-orange);
}
.btn-outline-danger:hover {
    background-color: var(--crm-orange);
    border-color: var(--crm-orange);
    color: #fff;
}

.btn-outline-warning {
    color: var(--crm-sky);
    border-color: var(--crm-sky);
}
.btn-outline-warning:hover {
    background-color: var(--crm-sky);
    color: #fff;
}

.btn-outline-info {
    color: var(--crm-sky);
    border-color: var(--crm-sky);
}
.btn-outline-info:hover {
    background-color: var(--crm-sky);
    color: #fff;
}

/* ================================================================
   Бейджи
   ================================================================ */
.badge.bg-success   { background-color: var(--crm-blue)   !important; }
.badge.bg-danger    { background-color: var(--crm-orange)  !important; }
.badge.bg-warning   { background-color: var(--crm-sky)     !important; color: #fff !important; }
.badge.bg-info      { background-color: var(--crm-sky)     !important; color: #fff !important; }
.badge.bg-primary   { background-color: var(--crm-blue)    !important; }
.badge.bg-secondary { background-color: var(--crm-gray)    !important; }
.badge.text-bg-primary { background-color: var(--crm-blue) !important; color: #fff !important; }

/* ================================================================
   Progress bars
   ================================================================ */
.progress-bar          { background-color: var(--crm-blue); }
.progress-bar.bg-success { background-color: var(--crm-blue)   !important; }
.progress-bar.bg-warning { background-color: var(--crm-sky)    !important; }
.progress-bar.bg-danger  { background-color: var(--crm-orange) !important; }
.progress-bar.bg-info    { background-color: var(--crm-sky)    !important; }
.progress-bar.bg-secondary { background-color: var(--crm-gray) !important; }

/* ================================================================
   Ссылки
   ================================================================ */
a { color: var(--crm-blue); }
a:hover { color: var(--crm-blue-dark); }

/* ================================================================
   Формы
   ================================================================ */
.form-control:focus, .form-select:focus {
    border-color: var(--crm-sky);
    box-shadow: 0 0 0 0.2rem rgba(91, 155, 213, 0.25);
}

.form-check-input:checked {
    background-color: var(--crm-blue);
    border-color: var(--crm-blue);
}

/* Плейсхолдеры */
.form-control::placeholder,
.form-select::placeholder {
    color: var(--crm-sky);
    opacity: 1;
}

/* ================================================================
   Таблицы
   ================================================================ */
.table > thead {
    background-color: var(--crm-gray-light);
    color: var(--crm-gray-dark);
}

/* ================================================================
   Alerts
   ================================================================ */
.alert-success { background-color: var(--crm-blue-light); border-color: var(--crm-blue); color: var(--crm-blue-dark); }
.alert-danger  { background-color: #fff3ed; border-color: var(--crm-orange); color: var(--crm-orange-dark); }
.alert-warning { background-color: #eef5fb; border-color: var(--crm-sky); color: #1a5276; }
.alert-info    { background-color: var(--crm-blue-light); border-color: var(--crm-sky); color: var(--crm-blue-dark); }

/* ================================================================
   Компоненты
   ================================================================ */
.skills-box {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--crm-border);
    border-radius: 0.375rem;
    padding: 0.5rem;
    background: var(--crm-white);
}

.dashboard-actions .btn { white-space: normal; }
.dashboard-actions form { margin: 0; }

@media (max-width: 767.98px) {
    .dashboard-head { gap: 0.75rem; flex-direction: column; }
    .dashboard-actions { width: 100%; }
    .dashboard-actions > .btn,
    .dashboard-actions > form { width: 100%; }
}

.llm-import-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(55, 65, 81, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.llm-import-overlay__card {
    width: min(420px, 100%);
    background: var(--crm-white);
    border-radius: 0.75rem;
    border: 1px solid var(--crm-border);
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 12px 30px rgba(31, 41, 55, 0.18);
}

.pipeline-board-row {
    width: 100%;
    min-height: 400px;
    overflow-x: auto;
    align-items: stretch;
}

.pipeline-kanban-col { flex: 1 1 0; min-width: 11rem; }
.pipeline-kanban-col--closed { min-width: 12rem; }

.pipeline-drop-hover {
    background-color: rgba(59, 130, 246, 0.08);
    border-radius: 0.25rem;
    outline: 2px dashed rgba(59, 130, 246, 0.45);
    outline-offset: -2px;
}

/* Канбан-заголовки колонок — единый синий вместо разноцветных */
.card-header.bg-secondary,
.card-header.bg-info,
.card-header.bg-primary,
.card-header.bg-warning,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-dark {
    background-color: var(--crm-gray-dark) !important;
    color: #fff !important;
}

/* Активная колонка воронки — голубой акцент */
.card-header.bg-primary { background-color: var(--crm-blue) !important; }
.card-header.bg-success { background-color: var(--crm-blue) !important; }
.card-header.bg-info    { background-color: var(--crm-sky)  !important; }
.card-header.bg-warning { background-color: var(--crm-sky)  !important; }
.card-header.bg-danger  { background-color: var(--crm-orange) !important; }

/* ================================================================
   Цветовые переопределения text-* классов
   ================================================================ */
.text-success { color: var(--crm-blue)   !important; }
.text-warning { color: var(--crm-sky)    !important; }
.text-info    { color: var(--crm-sky)    !important; }
.text-danger  { color: var(--crm-orange) !important; }

/* Убираем цвет у emoji — делаем монохромными через grayscale */
.btn .emoji,
.nav-link .emoji {
    filter: grayscale(1);
    opacity: 0.75;
}
