/* ═══════════════════════════════════════════════════════════════════
   IPCS — тема портала, 2026-10
   Подключать ПОСЛЕДНИМ, после bootstrap.min.css и style.css
   (в layout.html и base.html). Переопределяет только внешний вид:
   цвета, шрифт, радиусы, кнопки, бейджи, таблицы, формы, вкладки,
   модальные окна. Разметку и логику шаблонов не трогает.
   ═══════════════════════════════════════════════════════════════════ */

/* Шрифт Onest подключён в <head> layout.html/base.html (link + preconnect): @import здесь
   грузился цепочкой после этого файла и задерживал отрисовку. */

/* ── 1. Токены ─────────────────────────────────────────────────────── */
:root {
  /* фирменные */
  --ipcs-ink: #141B2D;          /* основной текст */
  --ipcs-ink-2: #3B4458;        /* вторичный текст */
  --ipcs-muted: #5B6478;        /* подписи (контраст 5.9:1 на белом) */
  --ipcs-subtle: #6B7385;       /* мелкие подписи (4.8:1) */
  --ipcs-bg: #F3F5F9;           /* фон рабочей области */
  --ipcs-surface: #FFFFFF;
  --ipcs-surface-2: #F8FAFC;    /* шапки таблиц, подвалы карточек */
  --ipcs-line: #E3E7EF;         /* рамки карточек */
  --ipcs-line-soft: #EEF1F5;    /* разделители строк */
  --ipcs-line-strong: #D5DBE6;  /* рамки полей и вторичных кнопок */
  --ipcs-accent: #3461EB;       /* белый текст на нём — 5.2:1 */
  --ipcs-accent-hover: #2A51D1;
  --ipcs-accent-soft: #E8EEFF;
  --ipcs-accent-ink: #1D4ED8;
  --ipcs-ring: rgba(52, 97, 235, .22);
  --ipcs-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --ipcs-shadow-lift: 0 6px 16px -8px rgba(16, 24, 40, .18);

  /* мягкие статусы: фон / текст (все пары ≥ 5:1) */
  --ipcs-ok-bg: #E3F4EC;      --ipcs-ok: #0E6B4A;
  --ipcs-bad-bg: #FDECEA;     --ipcs-bad: #B42318;
  --ipcs-warn-bg: #FFF3DC;    --ipcs-warn: #8A4B00;
  --ipcs-info-bg: #E2F3F8;    --ipcs-info: #0B6E8A;
  --ipcs-neutral-bg: #EEF1F5; --ipcs-neutral: #334155;

  /* меню: тот же акцент, без градиента (у градиента светлый край давал 3.4:1) */
  --accent: #3461EB;
  --accent-2: #3461EB;

  /* Bootstrap 5.3 */
  --bs-body-font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-color: var(--ipcs-ink);
  --bs-body-color-rgb: 20, 27, 45;
  /* --bs-body-bg оставляем белым: от него берут фон таблицы, поля ввода,
     карточки и списки. Серый фон даём только body и рабочей области. */
  --bs-emphasis-color: var(--ipcs-ink);
  --bs-secondary-color: var(--ipcs-muted);
  --bs-secondary-color-rgb: 91, 100, 120;
  --bs-tertiary-bg: var(--ipcs-surface-2);
  --bs-border-color: var(--ipcs-line);
  --bs-border-color-translucent: rgba(20, 27, 45, .1);
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 14px;
  --bs-border-radius-xl: 16px;
  --bs-link-color: var(--ipcs-accent);
  --bs-link-color-rgb: 52, 97, 235;
  --bs-link-hover-color: var(--ipcs-accent-hover);
  --bs-link-hover-color-rgb: 42, 81, 209;
  --bs-focus-ring-color: var(--ipcs-ring);
  --bs-primary: #3461EB;      --bs-primary-rgb: 52, 97, 235;
  --bs-success: #0E7A52;      --bs-success-rgb: 14, 122, 82;
  --bs-danger: #C8322B;       --bs-danger-rgb: 200, 50, 43;
  --bs-warning: #F2B33D;      --bs-warning-rgb: 242, 179, 61;
  --bs-info: #0B6E8A;         --bs-info-rgb: 11, 110, 138;
  --bs-light: #F3F5F9;        --bs-light-rgb: 243, 245, 249;
  --bs-primary-text-emphasis: var(--ipcs-accent-ink);
  --bs-primary-bg-subtle: var(--ipcs-accent-soft);
  --bs-primary-border-subtle: #C7D5FB;
  --bs-success-text-emphasis: var(--ipcs-ok);
  --bs-success-bg-subtle: var(--ipcs-ok-bg);
  --bs-success-border-subtle: #B9E2CD;
  --bs-danger-text-emphasis: var(--ipcs-bad);
  --bs-danger-bg-subtle: var(--ipcs-bad-bg);
  --bs-danger-border-subtle: #F3C8C3;
  --bs-warning-text-emphasis: var(--ipcs-warn);
  --bs-warning-bg-subtle: var(--ipcs-warn-bg);
  --bs-warning-border-subtle: #F5D9A6;
  --bs-info-text-emphasis: var(--ipcs-info);
  --bs-info-bg-subtle: var(--ipcs-info-bg);
  --bs-info-border-subtle: #B5DEEA;
  --bs-secondary-text-emphasis: var(--ipcs-neutral);
  --bs-secondary-bg-subtle: var(--ipcs-neutral-bg);
  --bs-secondary-border-subtle: var(--ipcs-line-strong);
}

body {
  background-color: var(--ipcs-bg);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h4, .h5, .h6 { color: var(--ipcs-ink); }
h5, h6, .h5, .h6 { font-weight: 600; }
.fw-bold { font-weight: 700 !important; }
.text-muted { color: var(--ipcs-muted) !important; }
.table td, .table th, .font-monospace, .fs-4, .fs-5 { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--ipcs-accent); outline-offset: 2px; }

/* ── 2. Рабочая область ───────────────────────────────────────────── */
body > .d-flex > main.bg-light,
body > .d-flex > main { background-color: var(--ipcs-bg) !important; }
body > .d-flex > main.p-4 { padding: 28px 32px 48px !important; }

/* заголовок страницы: крупнее, без цветной иконки слева */
.page-header { margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem 1.5rem; }
.page-header > .d-flex { flex-wrap: wrap; }
.page-header .btn { white-space: nowrap; }
.page-header h4 { font-size: 1.625rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.page-header h4 > .bi:first-child { display: none; }
.page-header .small.text-muted { font-size: .875rem; }

/* ── 3. Карточки ──────────────────────────────────────────────────── */
.card {
  --bs-card-border-color: var(--ipcs-line);
  --bs-card-border-radius: 14px;
  --bs-card-inner-border-radius: 13px;
  --bs-card-cap-bg: var(--ipcs-surface);
  --bs-card-cap-padding-y: .875rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
}
main .card.border-0 { border: 1px solid var(--ipcs-line) !important; }
main .shadow-sm { box-shadow: var(--ipcs-shadow) !important; }
.card-header { font-weight: 600; border-bottom-color: var(--ipcs-line-soft); }
.card-header.bg-white { background: var(--ipcs-surface) !important; }
.card-footer { background: var(--ipcs-surface-2); border-top-color: var(--ipcs-line); }

.stat-card { border: 1px solid var(--ipcs-line) !important; border-radius: 14px; box-shadow: var(--ipcs-shadow); }
.stat-card .icon { width: 40px; height: 40px; border-radius: 10px; font-size: 1.15rem; }
a > .stat-card, a > .kpi { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a:hover > .stat-card, a:hover > .kpi { border-color: #C9D3E6 !important; box-shadow: var(--ipcs-shadow-lift) !important; transform: none; }

/* плитки-фильтры на «Клиентах»: чуть мельче цифры, чтобы суммы реже переносились */
main .kpi .fs-4 { font-size: 1.2rem !important; }

.user-card { border: 1px solid var(--ipcs-line) !important; border-radius: 12px; box-shadow: none; }
.user-card:hover { transform: none; border-color: #C9D3E6 !important; box-shadow: var(--ipcs-shadow-lift); }
.avatar { background: var(--ipcs-accent-soft); color: var(--ipcs-accent-ink); }
.avatar.disabled { background: var(--ipcs-neutral-bg); color: var(--ipcs-subtle); }

/* ── 4. Кнопки ────────────────────────────────────────────────────── */
.btn { --bs-btn-font-weight: 500; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .95rem; }
.btn-sm { --bs-btn-padding-y: .34rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .845rem; }
.btn-primary {
  --bs-btn-bg: #3461EB; --bs-btn-border-color: #3461EB; --bs-btn-font-weight: 600;
  --bs-btn-hover-bg: #2A51D1; --bs-btn-hover-border-color: #2A51D1;
  --bs-btn-active-bg: #2448BD; --bs-btn-active-border-color: #2448BD;
  --bs-btn-disabled-bg: #3461EB; --bs-btn-disabled-border-color: #3461EB;
  --bs-btn-focus-shadow-rgb: 52, 97, 235;
}
.btn-success {
  --bs-btn-bg: #0E7A52; --bs-btn-border-color: #0E7A52; --bs-btn-font-weight: 600;
  --bs-btn-hover-bg: #0B6646; --bs-btn-hover-border-color: #0B6646;
  --bs-btn-active-bg: #09573C; --bs-btn-active-border-color: #09573C;
  --bs-btn-disabled-bg: #0E7A52; --bs-btn-disabled-border-color: #0E7A52;
}
.btn-danger {
  --bs-btn-bg: #C8322B; --bs-btn-border-color: #C8322B;
  --bs-btn-hover-bg: #A82722; --bs-btn-hover-border-color: #A82722;
  --bs-btn-active-bg: #8F211D; --bs-btn-active-border-color: #8F211D;
}
.btn-outline-primary {
  --bs-btn-color: #2F5BEA; --bs-btn-border-color: #C7D5FB; --bs-btn-bg: #FFFFFF;
  --bs-btn-hover-color: #1D4ED8; --bs-btn-hover-bg: var(--ipcs-accent-soft); --bs-btn-hover-border-color: #A9BEF8;
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #3461EB; --bs-btn-active-border-color: #3461EB;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ipcs-ink); --bs-btn-border-color: var(--ipcs-line-strong); --bs-btn-bg: #FFFFFF;
  --bs-btn-hover-color: var(--ipcs-ink); --bs-btn-hover-bg: var(--ipcs-bg); --bs-btn-hover-border-color: #C2CADA;
  --bs-btn-active-color: var(--ipcs-ink); --bs-btn-active-bg: #E9EDF4; --bs-btn-active-border-color: #C2CADA;
}
.btn-outline-success {
  --bs-btn-color: var(--ipcs-ok); --bs-btn-border-color: #B9E2CD; --bs-btn-bg: #FFFFFF;
  --bs-btn-hover-color: var(--ipcs-ok); --bs-btn-hover-bg: var(--ipcs-ok-bg); --bs-btn-hover-border-color: #9AD3B6;
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #0E7A52; --bs-btn-active-border-color: #0E7A52;
}
.btn-outline-danger {
  --bs-btn-color: var(--ipcs-bad); --bs-btn-border-color: #F3C8C3; --bs-btn-bg: #FFFFFF;
  --bs-btn-hover-color: var(--ipcs-bad); --bs-btn-hover-bg: var(--ipcs-bad-bg); --bs-btn-hover-border-color: #EBA79F;
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #C8322B; --bs-btn-active-border-color: #C8322B;
}
.btn-link { --bs-btn-color: var(--ipcs-accent); --bs-btn-hover-color: var(--ipcs-accent-hover); text-decoration: none; }
/* переключатели «Сетка / Таблица», «По имени / По логину» */
.btn-group .btn-outline-secondary.active {
  --bs-btn-active-bg: var(--ipcs-ink); --bs-btn-active-border-color: var(--ipcs-ink); --bs-btn-active-color: #FFFFFF;
}

/* ── 5. Бейджи: мягкие, читаемые ─────────────────────────────────────
   Раньше: белый текст на жёлтом (bg-warning) и голубом (bg-info) — 1.6–2:1. */
main .badge { --bs-badge-font-size: .75rem; font-weight: 600; letter-spacing: 0; padding: .38em .7em; border-radius: 999px; }
main .badge.bg-success   { background-color: var(--ipcs-ok-bg) !important;      color: var(--ipcs-ok) !important; }
main .badge.bg-danger    { background-color: var(--ipcs-bad-bg) !important;     color: var(--ipcs-bad) !important; }
main .badge.bg-warning   { background-color: var(--ipcs-warn-bg) !important;    color: var(--ipcs-warn) !important; }
main .badge.bg-info      { background-color: var(--ipcs-info-bg) !important;    color: var(--ipcs-info) !important; }
main .badge.bg-secondary { background-color: var(--ipcs-neutral-bg) !important; color: var(--ipcs-neutral) !important; }
main .badge.bg-primary   { background-color: var(--ipcs-accent-soft) !important; color: var(--ipcs-accent-ink) !important; }
main .badge.bg-dark      { background-color: #1F2937 !important; color: #FFFFFF !important; }
main .badge.bg-light     { background-color: #FFFFFF !important; color: var(--ipcs-ink-2) !important; border: 1px solid var(--ipcs-line) !important; }
main .badge.bg-light.fw-normal { font-weight: 500 !important; border-radius: 7px; }
main .badge.text-dark { color: var(--ipcs-ink-2) !important; }

/* ── 6. Таблицы ───────────────────────────────────────────────────── */
.table {
  --bs-table-color: var(--ipcs-ink);
  --bs-table-border-color: var(--ipcs-line-soft);
  --bs-table-hover-bg: #F7F9FC;
  --bs-table-hover-color: var(--ipcs-ink);
  --bs-table-striped-bg: #FAFBFD;
  font-size: .875rem;
}
.table > :not(caption) > * > * { padding: .75rem .75rem; }
.table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }
.table-sm > :not(caption) > * > * { padding: .5rem .6rem; }
.table thead.table-light, .table .table-light {
  --bs-table-bg: var(--ipcs-surface-2);
  --bs-table-color: var(--ipcs-muted);
  --bs-table-border-color: var(--ipcs-line);
}
.table th {
  font-size: .78rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ipcs-muted);
}
.table tbody th { color: var(--ipcs-ink); font-size: inherit; }
.card > .table-responsive > .table > :last-child > tr:last-child > * { border-bottom: 0; }

/* подсветка строк по сроку оплаты (Клиенты): тише фон + цветная метка у края строки */
main .table tr.срок-жёлтый    { --bs-table-bg: #FFFCF2; }
main .table tr.срок-оранжевый { --bs-table-bg: #FFF7EC; }
main .table tr.срок-красный   { --bs-table-bg: #FFF5F4; }
main .table tr.срок-просрочен { --bs-table-bg: #FDECEA; }
main .table tr.срок-жёлтый    > td:first-child { box-shadow: inset 3px 0 0 #E8B64A; }
main .table tr.срок-оранжевый > td:first-child { box-shadow: inset 3px 0 0 #E8893A; }
main .table tr.срок-красный   > td:first-child { box-shadow: inset 3px 0 0 #D9534F; }
main .table tr.срок-просрочен > td:first-child { box-shadow: inset 3px 0 0 #B42318; }

/* ── 7. Формы ─────────────────────────────────────────────────────── */
.form-label { font-size: .8125rem; font-weight: 600; color: var(--ipcs-ink-2); margin-bottom: .375rem; }
.form-text { color: var(--ipcs-subtle); font-size: .78rem; }
.form-control, .form-select {
  border-color: var(--ipcs-line-strong); color: var(--ipcs-ink); font-size: .875rem;
  min-height: 40px; padding: .5rem .8rem;
}
.form-select { padding-right: 2.25rem; }
textarea.form-control { min-height: auto; }
.form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select {
  min-height: 34px; padding: .3rem .65rem; font-size: .845rem;
}
.form-select-sm, .input-group-sm > .form-select { padding-right: 2rem; }
.form-control::placeholder { color: #8C94A6; }
.form-control:focus, .form-select:focus {
  border-color: var(--ipcs-accent); box-shadow: 0 0 0 3px var(--ipcs-ring);
}
.input-group-text { background: var(--ipcs-surface-2); border-color: var(--ipcs-line-strong); color: var(--ipcs-muted); }
.input-group-text.bg-transparent { background: #FFFFFF !important; }
.form-check-input { border-color: #B8C1D3; }
.form-check-input:checked { background-color: var(--ipcs-accent); border-color: var(--ipcs-accent); }
.form-check-input:focus { border-color: var(--ipcs-accent); box-shadow: 0 0 0 3px var(--ipcs-ring); }

/* ── 8. Вкладки (карточка клиента и др.) ──────────────────────────── */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--ipcs-line);
  --bs-nav-tabs-border-width: 1px;
  gap: .25rem;
}
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
  padding: .7rem .85rem; color: var(--ipcs-muted); font-weight: 500; background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--ipcs-ink); border-bottom-color: var(--ipcs-line-strong); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--ipcs-ink); font-weight: 600; background: transparent; border-bottom-color: var(--ipcs-accent);
}
.nav-tabs .nav-link .badge { margin-left: .25rem; }

/* ── 9. Модальные окна, алерты, списки, аккордеон ─────────────────── */
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(16, 24, 40, .35); }
.modal-header { padding: 1.1rem 1.5rem; border-bottom-color: var(--ipcs-line-soft); }
.modal-title { font-size: 1.125rem; font-weight: 600; }
.modal-title > .bi:first-child { display: none; }
.modal-body { padding: 1.25rem 1.5rem; }
.modal-footer { padding: .9rem 1.5rem; background: var(--ipcs-surface-2); border-top-color: var(--ipcs-line); border-radius: 0 0 16px 16px; }

.alert { border-radius: 12px; font-size: .875rem; }
.alert-success { --bs-alert-bg: var(--ipcs-ok-bg);   --bs-alert-color: var(--ipcs-ok);   --bs-alert-border-color: #B9E2CD; }
.alert-danger  { --bs-alert-bg: var(--ipcs-bad-bg);  --bs-alert-color: var(--ipcs-bad);  --bs-alert-border-color: #F3C8C3; }
.alert-warning { --bs-alert-bg: var(--ipcs-warn-bg); --bs-alert-color: var(--ipcs-warn); --bs-alert-border-color: #F5D9A6; }
.alert-info    { --bs-alert-bg: var(--ipcs-info-bg); --bs-alert-color: var(--ipcs-info); --bs-alert-border-color: #B5DEEA; }

.list-group { --bs-list-group-border-color: var(--ipcs-line-soft); --bs-list-group-item-padding-x: 1.25rem; --bs-list-group-item-padding-y: .7rem; }

.accordion-item { border: 1px solid var(--ipcs-line) !important; border-radius: 14px !important; box-shadow: var(--ipcs-shadow) !important; }
.accordion-button { font-weight: 600; color: var(--ipcs-ink); background: var(--ipcs-surface); padding: .9rem 1.25rem; }
.accordion-button:not(.collapsed) { color: var(--ipcs-ink); background: var(--ipcs-surface); box-shadow: inset 0 -1px 0 var(--ipcs-line-soft); }
.accordion-button:focus { box-shadow: 0 0 0 3px var(--ipcs-ring); }
.accordion-button .bi-folder2-open { display: none; }

.dropdown-menu { border-color: var(--ipcs-line); border-radius: 12px; box-shadow: 0 12px 28px -12px rgba(16, 24, 40, .25); padding: .35rem; }
.dropdown-item { border-radius: 8px; padding: .45rem .7rem; font-size: .875rem; }
.dropdown-item:active { background: var(--ipcs-accent); }

.pagination { --bs-pagination-color: var(--ipcs-ink-2); --bs-pagination-active-bg: var(--ipcs-accent); --bs-pagination-active-border-color: var(--ipcs-accent); --bs-pagination-border-color: var(--ipcs-line); }

/* новости */
.news-card { border: 1px solid var(--ipcs-line) !important; box-shadow: var(--ipcs-shadow) !important; }
.news-card.news-new { box-shadow: 0 0 0 2px var(--ipcs-accent) inset !important; }
.news-card h5 { font-size: 1rem; font-weight: 600 !important; }
.news-body { color: var(--ipcs-ink-2); line-height: 1.55; }

/* ── 10. Боковое меню: доводка ────────────────────────────────────── */
.sidebar { font-family: var(--bs-body-font-family); }
.sidebar .nav-link.active {
  background: var(--ipcs-accent);
  box-shadow: 0 10px 24px -12px var(--ipcs-accent), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.sidebar .badge.bg-danger { background-color: rgba(255, 92, 92, .16) !important; color: #FF8A8A !important; }
/* дерево WhatsApp: шрифты были 9.6–10px — поднимаем до читаемых */
.wa-sub { font-size: .72rem; opacity: .62; }
.wa-time { font-size: .7rem; opacity: .6; }
.wa-unread { font-size: .68rem; }
.wa-ava { font-size: .66rem; }
.wa-empty, .wa-more { font-size: .78rem; }

/* телефон: меню сверху на всю ширину, без ресайза */
@media (max-width: 991.98px) {
  body > .d-flex { flex-direction: column; }
  #sidebar { width: 100% !important; min-width: 0 !important; }
  #sidebar .sb-resizer, #sidebar #sbToggle { display: none; }
  body > .d-flex > main.p-4 { padding: 20px 16px 32px !important; }
}
@media (max-width: 575.98px) {
  /* плитки главной по две в ряд: убираем иконку, чтобы сумма помещалась */
  main .stat-card .icon { display: none; }
  main .stat-card .fs-4 { font-size: 1.15rem !important; }
  .page-header h4 { font-size: 1.375rem; }
}

/* ── 11. Вход ─────────────────────────────────────────────────────── */
.login-wrapper {
  background-color: #0A1120;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 40px 40px;
  padding: 40px 16px;
}
.login-card { width: 400px; max-width: 100%; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.login-card.p-4 { padding: 2rem !important; }
.login-card .form-control { min-height: 44px; font-size: .9375rem; }
.login-card .btn-primary { min-height: 46px; font-size: .9375rem; }
.login-card h5 { font-size: 1.375rem; font-weight: 700 !important; }