/* «Сделки ↔ Проекты»: нативный вид Битрикс24 (тема Air). Токены как в «Квантовых полях». */
:root {
    --dp-accent: #0075ff;
    --dp-accent-hover: #0068e0;
    --dp-success: #1bce7b;
    --dp-danger: #ff5752;
    --dp-warning: #ffa900;
    --dp-text: #424956;
    --dp-muted: #828b95;
    --dp-line: #dfe0e3;
    --dp-bg: #ffffff;
    --dp-soft: #f6fafb;
    --dp-page: #eef2f5;
    --dp-radius: 6px;
    --dp-radius-lg: 12px;
    --dp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 14px/1.45 var(--dp-font); color: var(--dp-text); background: var(--dp-bg); -webkit-font-smoothing: antialiased; }
body.dp-field { background: transparent; overflow: hidden; }
.dp-app { padding: 0; }
body.dp-page .dp-app { padding: 16px 20px 20px; max-width: 1200px; }

/* ---------- кнопки в стиле ui-btn ---------- */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 14px; border-radius: var(--dp-radius); border: 1px solid transparent;
    font: 600 12px/1 var(--dp-font); letter-spacing: .02em; text-transform: uppercase; cursor: pointer;
    white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
    color: var(--dp-text); background: transparent;
}
.ui-btn-xs { height: 26px; padding: 0 10px; font-size: 11px; }
.ui-btn:disabled { opacity: .5; cursor: default; }
.ui-btn-primary { background: var(--dp-accent); color: #fff; }
.ui-btn-primary:hover:not(:disabled) { background: var(--dp-accent-hover); }
.ui-btn-light-border { border-color: var(--dp-line); background: #fff; }
.ui-btn-light-border:hover:not(:disabled) { border-color: #c6cdd3; background: var(--dp-soft); }
.ui-btn-danger { background: var(--dp-danger); color: #fff; }
.ui-btn-danger:hover:not(:disabled) { background: #f0413c; }
.ui-btn-link { color: var(--dp-accent); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; padding: 0 6px; }
.ui-btn-link:hover:not(:disabled) { color: var(--dp-accent-hover); text-decoration: underline; }
.ui-btn:focus-visible, .dp-input:focus-visible, .dp-link:focus-visible, .dp-picker-row:focus-visible { outline: 2px solid rgba(0,117,255,.35); outline-offset: 1px; }

.dp-link { color: var(--dp-accent); text-decoration: none; cursor: pointer; }
.dp-link:hover { color: var(--dp-accent-hover); text-decoration: underline; }
.dp-muted { color: var(--dp-muted); }
.dp-warn { color: #c77700; }
.dp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-input {
    flex: 1 1 220px; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--dp-line); border-radius: var(--dp-radius);
    font: 14px var(--dp-font); color: var(--dp-text); background: #fff; outline: none;
}
.dp-input:focus { border-color: var(--dp-accent); }

/* ---------- заголовки, карточки, уведомления ---------- */
.dp-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.dp-title { margin: 0; font-size: 20px; font-weight: 600; color: #333; flex: 0 0 auto; }
.dp-h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #333; }
.dp-header .dp-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.dp-summary { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dp-count { color: var(--dp-muted); }
.dp-total { background: var(--dp-soft); border: 1px solid var(--dp-line); border-radius: 20px; padding: 2px 10px; font-weight: 600; font-size: 13px; }
.dp-total-lost { font-weight: 400; color: var(--dp-muted); background: transparent; }
.dp-card { background: #fff; border: 1px solid var(--dp-line); border-radius: var(--dp-radius-lg); padding: 14px 16px; margin-bottom: 12px; }
.dp-notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: var(--dp-radius); margin: 6px 0 10px; font-size: 13px; border: 1px solid transparent; }
.dp-notice-info { background: #eef6ff; border-color: #cfe3ff; }
.dp-notice-success { background: #e8f9f0; border-color: #bfeed4; }
.dp-notice-warning { background: #fff6e0; border-color: #ffe2a3; }
.dp-notice-error { background: #fff0ef; border-color: #ffcdca; }
.dp-notice-text { flex: 1 1 200px; }
.dp-loading { display: inline-flex; align-items: center; gap: 8px; color: var(--dp-muted); font-size: 13px; padding: 4px 0; }
.dp-spin { width: 14px; height: 14px; border: 2px solid var(--dp-line); border-top-color: var(--dp-accent); border-radius: 50%; animation: dp-spin .8s linear infinite; }
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-hint { font-size: 12px; color: var(--dp-muted); margin-top: 4px; }
.dp-footer { margin-top: 16px; font-size: 12px; color: var(--dp-muted); }

/* ---------- иконки ---------- */
.dp-icon { display: inline-block; width: 18px; height: 18px; border-radius: 5px; flex: 0 0 18px; position: relative; }
.dp-icon-project { background: #e5f0ff; }
.dp-icon-project::after { content: ""; position: absolute; left: 4px; top: 5px; width: 10px; height: 8px; border: 2px solid var(--dp-accent); border-top-width: 3px; border-radius: 2px; box-sizing: border-box; }
.dp-icon-group { background: #eaf7f0; }
.dp-icon-group::before, .dp-icon-group::after { content: ""; position: absolute; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: #2fb574; }
.dp-icon-group::before { left: 3px; } .dp-icon-group::after { right: 3px; }

/* ---------- поле в карточке ---------- */
body.dp-field .dp-app { padding: 4px 2px; }
.dp-value { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 28px; }
.dp-value .dp-link { font-size: 14px; font-weight: 600; }
.dp-meta { font-size: 12px; color: var(--dp-muted); }
.dp-empty { color: var(--dp-muted); }
.dp-value .dp-actions { display: inline-flex; gap: 2px; align-items: center; }
.dp-confirm, .dp-confirm-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff6e0; border: 1px solid #ffe2a3; border-radius: var(--dp-radius); padding: 6px 10px; margin: 6px 0; font-size: 13px; }
.dp-confirm-inline { display: inline-flex; margin: 0; padding: 2px 6px; }

/* ---------- выбор проекта / поиск сделки ---------- */
.dp-picker { border: 1px solid var(--dp-line); border-radius: var(--dp-radius-lg); padding: 10px; background: #fff; margin: 4px 0 8px; }
.dp-picker.is-busy { opacity: .6; pointer-events: none; }
.dp-picker-status:not(:empty) { margin: 8px 0 0; }
.dp-picker-list { margin-top: 6px; max-height: 264px; overflow-y: auto; }
.dp-picker-list:empty { display: none; }
.dp-picker-row { display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: var(--dp-radius); background: transparent; text-align: left; cursor: pointer; font: 14px var(--dp-font); color: var(--dp-text); }
.dp-picker-row:hover { background: var(--dp-soft); }
.dp-picker-row.is-current { background: #eef6ff; }
.dp-picker-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dp-picker-meta { color: var(--dp-muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.dp-picker-create { border-top: 1px solid var(--dp-line); margin-top: 10px; padding-top: 10px; }
.dp-picker-create-title { font-size: 12px; color: var(--dp-muted); margin-bottom: 6px; }
.dp-result { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 4px; border-bottom: 1px solid #f0f1f3; }
.dp-result:last-child { border-bottom: 0; }
.dp-result .dp-picker-meta { margin-left: 0; }
.dp-result .ui-btn { margin-left: auto; }

/* ---------- таблица сделок ---------- */
.dp-table-wrap { overflow-x: auto; border: 1px solid var(--dp-line); border-radius: var(--dp-radius-lg); }
.dp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dp-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--dp-muted); background: var(--dp-soft); padding: 8px 10px; border-bottom: 1px solid var(--dp-line); white-space: nowrap; }
.dp-table td { padding: 9px 10px; border-bottom: 1px solid #f0f1f3; vertical-align: middle; }
.dp-table tr:last-child td { border-bottom: 0; }
.dp-col-title .dp-link { font-weight: 600; margin-right: 6px; }
.dp-col-sum { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-col-act { text-align: right; white-space: nowrap; }
.dp-deal.dp-state-won, .dp-deal.dp-state-lost, .dp-deal.dp-state-closed { background: #fbfcfc; }
.dp-deal.dp-state-lost .dp-col-title .dp-link { color: #6a737f; }
.dp-stage-wrap { display: inline-flex; flex-direction: column; gap: 2px; }
.dp-cat { font-size: 11px; color: var(--dp-muted); }
.dp-stage { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; vertical-align: 1px; }
.dp-badge-open { display: none; }
.dp-badge-won { background: #e3f8ec; color: #179a5a; }
.dp-badge-lost { background: #ffe9e8; color: #d6403b; }
.dp-badge-closed { background: #eef0f2; color: #6a737f; }
.dp-empty-state { text-align: center; padding: 32px 16px; border: 1px dashed var(--dp-line); border-radius: var(--dp-radius-lg); }
.dp-empty-title { font-weight: 600; margin-bottom: 4px; }

/* ---------- шаги установки ---------- */
.dp-steps { list-style: none; margin: 0; padding: 0; }
.dp-step { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid #f3f4f5; }
.dp-step:last-child { border-bottom: 0; }
.dp-step-mark { width: 18px; font-weight: 700; text-align: center; flex: 0 0 18px; }
.dp-step-ok .dp-step-mark { color: var(--dp-success); }
.dp-step-fail .dp-step-mark { color: var(--dp-danger); }
.dp-step-warn .dp-step-mark, .dp-step-unknown .dp-step-mark { color: var(--dp-warning); }
.dp-step-run .dp-step-mark { color: var(--dp-muted); }
.dp-step-title { font-weight: 600; }
.dp-step-detail { color: var(--dp-muted); font-size: 13px; flex-basis: 100%; padding-left: 26px; }
.dp-howto { margin: 0; padding-left: 20px; }
.dp-howto li { margin: 4px 0; }

@media (max-width: 640px) {
    body.dp-page .dp-app { padding: 12px 12px 16px; }
    .dp-header .dp-actions { margin-left: 0; }
    .dp-table th:nth-child(4), .dp-table td:nth-child(4), .dp-table th:nth-child(5), .dp-table td:nth-child(5) { display: none; }
}