/* Модалка заметки — визуально как «Запись на приём» (ab-*), но без теней (правило проекта). */
.nm-backdrop { position: fixed; inset: 0; z-index: 1060; background: rgba(15, 23, 42, .32); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.nm-modal { width: min(600px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }

.nm-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.nm-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.nm-title i { color: var(--primary); }
.nm-close { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.nm-close:hover { background: var(--surface-2); color: var(--ink); }

.nm-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }

/* Карточка привязки (владелец/питомец/приём) + «Перейти» */
.nm-entity { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: var(--r-sm); border: 1px solid var(--line); background: oklch(0.94 0.01 0); color: var(--ink); text-decoration: none; transition: border-color .13s, background .13s; }
a.nm-entity:hover { border-color: var(--primary); background: var(--primary-tint-2); }
.nm-entity__ic { font-size: 20px; color: var(--primary); flex: 0 0 auto; }
.nm-entity__b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nm-entity__k { font-size: 11px; color: var(--ink-3); }
.nm-entity__n { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-entity__go { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.nm-lbl { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); margin-bottom: -4px; }
.nm-input { width: 100%; padding: 9px 12px; font: 13.5px var(--font-ui); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); outline: none; transition: border-color .13s, background .13s; }
.nm-input:hover { border-color: var(--ink-3); }
.nm-input:focus { border-color: var(--primary); background: var(--surface); }
.nm-title-in { font-size: 15px; font-weight: 600; }
.nm-area { min-height: 72px; resize: vertical; }
.nm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nm-row2 > div, .nm-field { display: flex; flex-direction: column; gap: 6px; }

/* Поля дат: кастомный компонент (нативный datetime-local заменён). Поле только для чтения + иконка темы,
   всплывающий календарь + время. Календарь — «Срок», часы — «Напомнить». */
.nm-dp { position: relative; }
.nm-dp-input { padding-right: 34px; cursor: pointer; }
.nm-dp::after {
    content: ''; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; pointer-events: none;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
.nm-dp--clock::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E");
}
.nm-dp-clear {
    position: absolute; right: 33px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--surface-3); color: var(--ink-3); font-size: 12px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.nm-dp-clear:hover { background: var(--line-2); color: var(--ink); }

.nm-dp-pop {
    position: fixed; z-index: 1200; width: 252px;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px;
}
.nm-dp-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.nm-dp-mn { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.nm-dp-nav { width: 26px; height: 26px; border: 1px solid var(--line-2); background: transparent; border-radius: 7px; color: var(--ink-2); cursor: pointer; font-size: 16px; line-height: 1; }
.nm-dp-nav:hover { border-color: var(--primary); color: var(--primary); }
.nm-dp-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.nm-dp-wd span { text-align: center; font-size: 10.5px; font-weight: 600; color: var(--ink-3); padding: 2px 0; }
.nm-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.nm-dp-day { height: 30px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--ink); padding: 0; }
.nm-dp-day--out { visibility: hidden; cursor: default; }
.nm-dp-day:hover { background: var(--primary-tint); }
.nm-dp-day.today { color: var(--primary); font-weight: 700; }
.nm-dp-day.on { background: var(--primary); color: #fff; font-weight: 600; }
.nm-dp-day.on:hover { background: var(--primary-hover); }
.nm-dp-time { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.nm-dp-time select { border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 8px; font: 13px var(--font-ui); background: var(--surface); color: var(--ink); cursor: pointer; }
.nm-dp-colon { color: var(--ink-2); font-weight: 700; }
.nm-dp-ft { display: flex; gap: 8px; margin-top: 8px; }
.nm-dp-btn { flex: 1; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 7px; font: 600 12.5px var(--font-ui); cursor: pointer; }
.nm-dp-btn:hover { border-color: var(--primary); color: var(--primary); }
.nm-dp-btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.nm-dp-btn--primary:hover { background: var(--primary-hover); color: #fff; }

/* Исполнитель: комбобокс с поиском (вместо нативного select) */
.nm-combo { position: relative; }
.nm-combo::after {
    content: ''; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; pointer-events: none; opacity: .5;
    background-color: var(--ink-3);
    -webkit-mask: url("/Theme/ui-packages/project-theme/vetkaicon/svg/search.svg") center / contain no-repeat;
    mask: url("/Theme/ui-packages/project-theme/vetkaicon/svg/search.svg") center / contain no-repeat;
}
.nm-combo-input { padding-right: 32px; cursor: text; }
.nm-combo-pop {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 10;
    max-height: 220px; overflow: auto;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 4px;
}
.nm-combo-opt {
    display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; cursor: pointer;
    font-size: 13.5px; color: var(--ink);
}
.nm-combo-opt:hover, .nm-combo-opt.hl { background: var(--primary-tint); }
.nm-combo-opt.on { color: var(--primary-ink); font-weight: 600; }
.nm-combo-ava {
    width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
    background: var(--primary-tint-2); color: var(--primary-ink);
    font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.nm-combo-ava--none { background: var(--surface-3); color: var(--ink-3); }
.nm-combo-empty { padding: 12px; text-align: center; color: var(--ink-3); font-size: 12.5px; }

.nm-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.nm-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface-2); cursor: pointer; padding: 0; }
.nm-sw.on { border-color: var(--ink); }
.nm-sw--blue { background: var(--primary-tint); }
.nm-sw--mint { background: var(--success-tint); }
.nm-sw--amber { background: var(--warning-tint); }
.nm-sw--rose { background: var(--danger-tint); }
.nm-sw--sky { background: var(--info-tint); }

.nm-cl { display: flex; flex-direction: column; gap: 6px; }
.nm-cl-row { display: flex; align-items: center; gap: 8px; }
.nm-cl-row .nm-cl-text { flex: 1; }
.nm-cl-del { border: 1.5px solid var(--line-2); background: transparent; color: var(--ink-3); border-radius: var(--r-sm); width: 30px; height: 30px; cursor: pointer; font-size: 16px; line-height: 1; flex: 0 0 auto; }
.nm-cl-del:hover { border-color: var(--danger-tint); color: var(--danger); }
.nm-cl-add { align-self: flex-start; font: 600 12.5px var(--font-ui); color: var(--primary); background: transparent; border: 1.5px dashed var(--line-2); border-radius: var(--r-sm); padding: 6px 12px; cursor: pointer; }
.nm-cl-add:hover { border-color: var(--primary); }

.nm-checks { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.nm-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.nm-err { padding: 9px 11px; border-radius: var(--r-sm); background: var(--danger-tint); color: var(--danger); font-weight: 600; font-size: 13px; }

.nm-foot { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.nm-spacer { flex: 1; }
.nm-btn { font: 600 13.5px var(--font-ui); cursor: pointer; padding: 9px 18px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); }
.nm-btn:hover { border-color: var(--ink-3); }
.nm-btn--primary { color: var(--ink-on-dark); background: var(--primary); border-color: var(--primary); }
.nm-btn--primary:hover { background: var(--primary-hover); }
.nm-btn--danger { color: var(--danger); background: transparent; border-color: var(--danger-tint); }
.nm-btn--danger:hover { background: var(--danger-tint); }