/* «Знання агента» — СПІЛЬНІ стилі «Клієнтів» і «Постачальників» (модуль /shared/knowledge.js). Друге коло 24.10 (Іван:
   «знания почему модалка такая узкая… поменяй внешний вид»): широке вікно, шапка з назвою й лічильниками, знання —
   картками в сітці, форма — рядками-полями з підкресленням, як у «Дані постачальника» й vendor_audit. Фон і текст —
   змінні господаря (--tw-* у «Постачальників», --bg-* / --text у «Клієнтів»), зелений і бурштиновий — свої. */

/* ширина: у «Постачальників» загальне правило діалогу (.sp-modal .imodal-card.sp-dialog, 560px) сильніше за просте
   .kn-modal — тому селектор того самого рівня + власний клас */
.modal-card.modal-panel.kn-modal { width: min(1080px, 96vw); height: 92vh; }
.sp-modal .imodal-card.sp-dialog.kn-modal { width: min(1080px, 96vw); height: 92vh; max-height: 92vh; }
.sp-modal .imodal-card.sp-dialog.kn-modal .sp-modal-body { padding: 0; }

.kn-win {
    --kn-tx: var(--tw-text, var(--text, #e8edf5));
    --kn-dim: var(--tw-dim, var(--text-dim, #8b9bb5));
    --kn-card: color-mix(in srgb, var(--kn-tx) 4.5%, transparent);
    --kn-line: color-mix(in srgb, var(--kn-tx) 13%, transparent);
    --kn-line2: color-mix(in srgb, var(--kn-tx) 22%, transparent);
    --kn-in: color-mix(in srgb, var(--kn-tx) 7%, transparent);
    --kn-ok: #10b981; --kn-mid: #f59e0b; --kn-bad: #ef4444; --kn-acc: #06b6d4;
    --kn-model: #a78bfa; --kn-prod: #60a5fa;   /* області «модель» і «товар» (27.10) — щоб не плутати з постачальником */
    padding: 0 18px 18px; color: var(--kn-tx); font-size: 13px; line-height: 1.4;
}
.kn-win input, .kn-win textarea, .kn-win select, .kn-win button { font: inherit; color: inherit; }

/* шапка */
.kn-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 0 12px; }
.kn-name { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.kn-name-t { font-size: 19px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-id { color: var(--kn-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.kn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px;
    background: var(--kn-card); border: 1px solid var(--kn-line); color: var(--kn-dim); white-space: nowrap; }
.kn-chip i { font-size: 11px; }
.kn-chip.ok { color: var(--kn-ok); border-color: color-mix(in srgb, var(--kn-ok) 40%, transparent); }
.kn-chip.wait, .kn-chip.mid { color: var(--kn-mid); border-color: color-mix(in srgb, var(--kn-mid) 40%, transparent); }

.kn-note-off { padding: 8px 12px; margin-bottom: 12px; border-radius: 9px; font-size: 12.5px; color: var(--kn-dim);
    background: color-mix(in srgb, var(--kn-mid) 8%, transparent); border: 1px solid color-mix(in srgb, var(--kn-mid) 30%, transparent); }

/* фільтр і «Додати» */
.kn-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kn-seg { margin-bottom: 0; flex-wrap: wrap; background: var(--kn-card); border: 1px solid var(--kn-line); border-radius: 10px; padding: 3px; }
.kn-seg .tw-seg-b { padding: 5px 12px; border-radius: 7px; }
.kn-seg .tw-seg-b.active { background: color-mix(in srgb, var(--kn-ok) 16%, transparent); color: var(--kn-tx); }
.kn-seg .tw-seg-b i { opacity: .75; margin-right: 2px; }
.kn-seg .tw-seg-b.active i { color: var(--kn-ok); opacity: 1; }
.kn-add { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px; cursor: pointer; font-weight: 600;
    border: 1px solid var(--kn-ok); background: var(--kn-ok); color: #fff; }
.kn-add:hover { filter: brightness(1.08); }

/* групи й картки знань */
.kn-empty { padding: 22px 4px; color: var(--kn-dim); }
.kn-empty.kn-err, .kn-err-line { color: var(--kn-bad); }
.kn-err-line { margin-top: 6px; font-size: 12.5px; }
.kn-err-line[hidden] { display: none; }
.kn-group { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; align-items: start; }
.kn-group-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--kn-dim); }
.kn-group-h::after { content: ''; flex: 1; height: 1px; background: var(--kn-line); }
/* області (27.10, Іван: модель у вікні постачальника читалась як знання постачальника): загальні умови — як були,
   кожна модель — окремим блоком свого кольору з назвою моделі й «N товарів», окремі товари — значком і артикулом */
.kn-group-h > i { font-size: 12px; }
.kn-group-t { white-space: nowrap; }
.kn-group-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--kn-dim); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kn-group-model { margin-top: 18px; padding: 10px 12px 12px; border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--kn-model) 38%, transparent);
    background: color-mix(in srgb, var(--kn-model) 6%, transparent); }
.kn-group-model > .kn-group-h { color: var(--kn-model); font-size: 13px; text-transform: none; letter-spacing: 0; }
.kn-group-model > .kn-group-h::after { display: none; }
.kn-group-model > .kn-group-h .kn-group-t { white-space: normal; }
.kn-group-product > .kn-group-h { color: var(--kn-prod); }
.kn-members-toggle { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--kn-model);
    background: transparent; border: 1px solid color-mix(in srgb, var(--kn-model) 45%, transparent); }
.kn-members-toggle:hover { background: color-mix(in srgb, var(--kn-model) 12%, transparent); }
.kn-members-toggle i { font-size: 10px; transition: transform .15s ease; }
.kn-members-toggle.open i { transform: rotate(180deg); }
.kn-members { grid-column: 1 / -1; padding: 8px 10px; border-radius: 10px; background: var(--kn-card); border: 1px solid var(--kn-line); }
.kn-members-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 2px 14px; }
.kn-members-common { margin-bottom: 6px; font-size: 12px; color: var(--kn-dim); }
.kn-members-common b { color: var(--kn-tx); font-weight: 600; }
.kn-member { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; font-size: 12.5px; min-width: 0; }
.kn-member-code { flex: none; color: var(--kn-dim); font-variant-numeric: tabular-nums; }
.kn-member-name { min-width: 0; overflow-wrap: anywhere; }
.kn-member.sample .kn-member-name { font-weight: 600; }
.kn-member-tag { flex: none; font-size: 11px; color: var(--kn-model); }
.kn-members-note { margin-top: 4px; font-size: 12px; color: var(--kn-dim); }
/* область на кожній замітці — рядком над темою */
.kn-scope { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 11.5px; color: var(--kn-dim);
    min-width: 0; }
.kn-scope > span { min-width: 0; overflow-wrap: anywhere; }
.kn-scope > i { font-size: 11px; flex: none; }
.kn-scope-model { color: var(--kn-model); }
.kn-scope-product { color: var(--kn-prod); }
.kn-item { position: relative; padding: 11px 13px 10px; border-radius: 12px; background: var(--kn-card); border: 1px solid var(--kn-line); }
.kn-item.kn-candidate { border-color: color-mix(in srgb, var(--kn-mid) 45%, transparent);
    background: color-mix(in srgb, var(--kn-mid) 5%, var(--kn-card)); }
.kn-item.kn-active { border-color: color-mix(in srgb, var(--kn-ok) 40%, transparent); }
.kn-item.kn-off, .kn-item.kn-deleted { opacity: .7; border-style: dashed; }
.kn-item-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.kn-topic { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px;
    color: var(--kn-acc); background: color-mix(in srgb, var(--kn-acc) 12%, transparent); }
.kn-flag { font-size: 11px; padding: 2px 8px; border-radius: 999px; color: var(--kn-bad);
    border: 1px solid color-mix(in srgb, var(--kn-bad) 50%, transparent); }
.kn-body { white-space: pre-wrap; line-height: 1.5; font-size: 14px; }
.kn-src, .kn-meta { margin-top: 5px; font-size: 12px; color: var(--kn-dim); }
.kn-src { padding-left: 8px; border-left: 2px solid var(--kn-line2); }
.kn-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--kn-line); }
.kn-act { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--kn-line2); background: transparent;
    font-size: 12.5px; padding: 4px 11px; border-radius: 8px; cursor: pointer; }
.kn-act:hover:not(:disabled) { background: var(--kn-in); }
.kn-act.kn-primary { background: var(--kn-ok); border-color: var(--kn-ok); color: #fff; font-weight: 600; }
.kn-act.kn-primary:hover:not(:disabled) { background: var(--kn-ok); filter: brightness(1.08); }
.kn-act.kn-danger { color: var(--kn-bad); border-color: color-mix(in srgb, var(--kn-bad) 40%, transparent); }
.kn-act:disabled { opacity: .5; cursor: default; }
.kn-hist { margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: var(--kn-in); font-size: 12px; }
.kn-hist-row { padding: 1px 0; color: var(--kn-dim); }
.kn-conflict { margin-top: 9px; padding: 9px 11px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--kn-mid) 55%, transparent);
    background: color-mix(in srgb, var(--kn-mid) 7%, transparent); }
.kn-conflict-h { font-weight: 700; font-size: 12.5px; }
.kn-conflict-t { margin: 4px 0; font-size: 13px; white-space: pre-wrap; }
.kn-conflict-q { font-size: 12.5px; color: var(--kn-dim); }
.kn-conflict .kn-acts { border-top: 0; padding-top: 0; }

/* форма: рядки-поля з підкресленням */
.kn-form { padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--kn-card);
    border: 1px solid color-mix(in srgb, var(--kn-ok) 40%, transparent); }
.kn-item .kn-form { margin: 8px 0 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--kn-line); border-radius: 0; background: transparent; }
.kn-f-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: start; padding: 4px 0; }
.kn-f-row + .kn-f-row { border-top: 1px solid var(--kn-line); }
.kn-f-l { padding-top: 6px; font-size: 12.5px; color: var(--kn-dim); }
.kn-f-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kn-f-stack { display: flex; flex-direction: column; gap: 2px; }
.kn-f-s { font-size: 12px; color: var(--kn-dim); }
.kn-f-pair { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.kn-in { background: transparent; border: 0; border-bottom: 1px dashed var(--kn-line2); border-radius: 0; padding: 5px 2px; min-width: 0;
    outline: none; font-size: 13px; transition: border-color .12s ease, background .12s ease; }
.kn-in:focus { border-bottom: 1px solid var(--kn-ok); background: color-mix(in srgb, var(--kn-ok) 6%, transparent); }
select.kn-in { background: var(--kn-in); border: 1px solid var(--kn-line); border-radius: 7px; padding: 4px 6px; }
select.kn-in option { color: #111; }
.kn-in[type="date"] { color-scheme: light dark; }
.kn-in[hidden], .kn-check[hidden] { display: none; }
.kn-in.kn-in-s { width: 150px; }
.kn-ta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; font-size: 14px; line-height: 1.5;
    border: 1px solid var(--kn-line); border-radius: 9px; padding: 8px 10px; background: var(--kn-in); }
.kn-ta:focus { border-color: var(--kn-ok); }
.kn-cnt { align-self: flex-end; font-size: 11px; color: var(--kn-dim); }
.kn-check { font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; }
.kn-form > .kn-acts { border-top: 0; }
.kn-more { margin: 4px 0 6px; }
.kn-more > summary { cursor: pointer; font-size: 12.5px; color: var(--kn-acc); margin: 2px 0 6px; }
@media (max-width: 600px) {
    .kn-win { padding: 0 12px 14px; }
    .kn-f-row { grid-template-columns: 1fr; gap: 3px; }
    .kn-f-l { padding-top: 0; }
    .kn-in.kn-in-s { width: 100%; }
    .kn-f-pair { width: 100%; }
    .kn-f-pair .kn-f-s { min-width: 96px; }
}

/* значок біля імені постачальника (§13.A1; з 26.10 у шапці один — Іван: «две иконки… оставить одну») і біля назви в
   картці постачальника: «на розгляді» — помітний з їхнім числом, «діють» — тихий з числом діючих, без обводки; клік —
   вікно знань */
.kn-mark { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; cursor: pointer; font-size: 11px;
    line-height: 1; color: var(--tw-dim, var(--text-dim)); vertical-align: middle; white-space: nowrap; }
.kn-mark[hidden] { display: none; }
.kn-mark-on { opacity: .65; }
.kn-mark-none { opacity: .4; }
.kn-mark-on:hover, .kn-mark-on:focus-visible, .kn-mark-none:hover, .kn-mark-none:focus-visible { opacity: 1; }
.kn-mark-wait { color: var(--tw-accent, var(--accent-strong, var(--accent, #d9a441))); font-weight: 700;
    background: rgba(217, 164, 65, .16); border-radius: 999px; padding: 2px 7px; }
.kn-mark-n { font-size: 11px; }
/* у картці постачальника — поруч із назвою (16 px), трохи більший; решта ряду (дата звірки, олівець) — праворуч */
.kn-mark.kn-card { font-size: 13px; margin-left: 2px; margin-right: auto; flex: none; }
.kn-mark.kn-card .kn-mark-n { font-size: 12px; }
.cd-top .cd-title:has(+ .kn-card) { flex-grow: 0; }
/* телефон: значок забрав ~50 px, і назва стискалась до «Рюкз…» (стенд 26.10) — олівець «Правити» в такому ряду лише
   значком (як вигляд «icon» з меню), назві повертається місце */
@media (max-width: 480px) {
    :is(.cd-head, .cd-top):has(.kn-card) .cd-vedit { padding: 0; width: 30px; justify-content: center; }
    :is(.cd-head, .cd-top):has(.kn-card) .cd-vedit .cd-vedit-l { display: none; }
}