/* ════════════════════════════════════════════════════════════════════
   /important-notes («Заметки») — шапка в стиле /settings и /knowledge-base:
   плитка, вкладки «Общие» / «Личные» со счётчиками, второй строкой —
   отделы, подсказка и кнопки. Общее (карточка шапки, вкладки) — в
   css/control-panel-v2.css. Стекло и заметки — прежние, здесь их нет.
   Подключается после dark-theme.css.
   ════════════════════════════════════════════════════════════════════ */

/* страница не уже 1180px: ниже — горизонтальная прокрутка вместо сломанной
   раскладки (как на /settings и /knowledge-base) */
body{ min-width:1180px; }

.ntx-head{ flex-wrap:wrap; row-gap:14px; padding:18px 22px; margin-bottom:12px; font-family:"Segoe UI",Arial,system-ui,sans-serif; }
.ntx-head [hidden]{ display:none !important; }
.ntx-hl{ display:flex; align-items:center; gap:14px; min-width:0; }
.cp-tile.ntx-hic{ width:42px; height:42px; border-radius:12px; }
.cp-tile.ntx-hic svg{ width:19px; height:19px; }
.ntx-head .cp-tabs{ flex:none; }
.ntx-head .cp-tab-tx{ white-space:nowrap; }

/* вторая строка: отделы, подсказка, кнопки */
.ntx-row{ flex-basis:100%; display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1px solid var(--cp-line); min-width:0; }
.ntx-dept{ flex:none; width:220px; }
.ntx-head .ntx-dept .rich-select-btn{ width:100%; height:40px; padding:0 13px; gap:8px; box-sizing:border-box; border:1px solid #e3e8f2; border-radius:10px;
  background:#fff; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; font:400 14px "Segoe UI",Arial,system-ui,sans-serif; color:var(--cp-tx); }
.ntx-head .ntx-dept .rich-select-btn:hover{ border-color:#a5b4fc; }
.ntx-head .ntx-dept .rich-select-btn[aria-expanded="true"]{ border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.14); }
.ntx-head .ntx-dept .rich-select-label{ flex:1; min-width:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--cp-tx); }
/* кружок и стрелка — по центру поля, а строка Segoe UI садится ниже
   середины: текст поднимаем на 1px, чтобы буквы стояли вровень с кружком */
.ntx-head .ntx-dept .rich-select-label{ position:relative; top:-1px; }
.ntx-head .ntx-dept .rich-select-chevron{ fill:none; }
.ntx-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:conic-gradient(#6366f1 0 25%, #0ea5e9 0 50%, #14b8a6 0 75%, #a855f7 0); }
.ntx-hint{ flex:1; min-width:0; font-size:12.5px; color:var(--cp-mu); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* кнопки — как в общих настройках */
.ntx-prim, .ntx-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:none; border-radius:10px; cursor:pointer; white-space:nowrap;
  font:600 13.5px "Segoe UI",Arial,system-ui,sans-serif; transition:background-color .15s, border-color .15s, box-shadow .15s; }
.ntx-prim{ padding:10px 18px; border:none; background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff; box-shadow:0 2px 8px rgba(79,70,229,.3); }
.ntx-prim:hover{ background:linear-gradient(180deg,#7274f4,#4f46e5); box-shadow:0 4px 12px rgba(79,70,229,.34); }
.ntx-ghost{ padding:9px 14px; border:1px solid var(--cp-tb); background:var(--cp-t1); color:#3730a3; font-size:13px; }
.ntx-ghost:hover{ background:#e0e7ff; border-color:#a5b4fc; }
.ntx-head .ntx-prim svg, .ntx-head .ntx-ghost svg{ width:15px; height:15px; }

/* ── тёмная тема ── */
html[data-theme="dark"] .ntx-head .ntx-dept .rich-select-btn{ background:#141c29; border-color:#2c3a4f; }
html[data-theme="dark"] .ntx-head .ntx-dept .rich-select-btn:hover{ border-color:rgba(129,140,248,.5); }
html[data-theme="dark"] .ntx-ghost{ color:#c7d2fe; }
html[data-theme="dark"] .ntx-ghost:hover{ background:rgba(99,102,241,.24); border-color:rgba(129,140,248,.5); }