/* ════════════════════════════════════════════════════════════════════
   /users («Пользователи») — шапка с вкладками-фильтрами, как на
   /settings, /knowledge-base и /important-notes; список строками;
   страницы — кнопками с главной (/index) 1 в 1; боковая панель клиента в
   стиле окон «Добавить сотрудника». Общее (шапка, вкладки) — в
   css/control-panel-v2.css. Подключается после dark-theme.css.
   ════════════════════════════════════════════════════════════════════ */

.usx{ --cp-card:#fff; --cp-brd:rgba(165,180,252,.35); --cp-line:#eef0f6; --cp-tx:#0f172a; --cp-tx2:#334155; --cp-mu:#64748b; --cp-mu2:#94a3b8;
  --cp-trk:#eef1f7; --cp-t1:#f5f7ff; --cp-t2:#e0e7ff; --cp-tb:#c7d2fe; --cp-tc:#4f46e5;
  --cp-sh:0 2px 6px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.10);
  --us-row:#f9fafb; --us-rowb:#e5e7eb; --us-field:#fff; --us-fieldb:#e3e8f2;
  font-family:"Segoe UI",Arial,system-ui,sans-serif; }
html[data-theme="dark"] .usx{ --cp-card:#1b2433; --cp-brd:rgba(148,163,184,.2); --cp-line:#2c3a4f; --cp-tx:#e5e7eb; --cp-tx2:#cbd5e1; --cp-mu:#94a3b8; --cp-mu2:#64748b;
  --cp-trk:#243145; --cp-t1:rgba(99,102,241,.16); --cp-t2:rgba(99,102,241,.1); --cp-tb:rgba(129,140,248,.32); --cp-tc:#c7d2fe;
  --cp-sh:0 2px 6px rgba(0,0,0,.3), 0 14px 36px rgba(0,0,0,.45);
  --us-row:#141c29; --us-rowb:#2c3a4f; --us-field:#141c29; --us-fieldb:#2c3a4f; }
.usx [hidden]{ display:none !important; }

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

/* ── шапка ── */
.users-container.usx{ display:flex; flex-direction:column; gap:14px; max-width:1400px; margin:24px auto; padding:0 24px; box-sizing:border-box; min-height:0; }
.usx-head{ padding:18px 22px; }
.usx-head .cp-tabs{ flex:none; }
.usx-head .cp-tab-tx{ white-space:nowrap; }
.usx-hl{ display:flex; align-items:center; gap:14px; min-width:0; }
.cp-tile.usx-hic{ width:42px; height:42px; border-radius:12px; }
.cp-tile.usx-hic svg{ width:19px; height:19px; }

/* ── карточка списка ── */
.usx-card{ padding:18px 22px 20px; border-radius:16px; background:var(--cp-card); border:1px solid var(--cp-brd); box-shadow:var(--cp-sh); }
.usx-tb{ display:flex; align-items:center; gap:14px; padding-bottom:14px; }
.usx-search{ flex:0 1 460px; min-width:0; display:flex; align-items:center; gap:8px; height:40px; padding:0 13px; box-sizing:border-box;
  border:1px solid var(--us-fieldb); border-radius:10px; background:var(--us-field); color:var(--cp-mu2); cursor:text; transition:border-color .15s, box-shadow .15s; }
.usx-search:hover{ border-color:#a5b4fc; }
.usx-search:focus-within{ border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.14); }
.usx-search svg{ flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.usx .usx-search input, html[data-theme="dark"] .usx .usx-search input{ flex:1; min-width:0; height:100%; padding:0; border:none; outline:none; background:transparent;
  box-shadow:none; font:400 14px "Segoe UI",Arial,system-ui,sans-serif; color:var(--cp-tx); }
.usx .usx-search input::placeholder{ color:var(--cp-mu2); }
.usx-count{ margin-left:auto; font-size:13px; color:var(--cp-mu); white-space:nowrap; }

/* столбцы: «Контакт», «Обращения», «Последнее обращение» — по центру,
   ближе к клиенту; свободное место — перед «Смотреть» */
.usx-hd, .usx-row{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,300px) 130px 210px minmax(110px,1fr); gap:16px; align-items:center; }
.usx-hd{ padding:0 16px 6px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--cp-mu2); }
.usx-hd .c, .usx-contact, .usx-tk, .usx-last{ justify-self:center; text-align:center; }
.usx-list{ display:flex; flex-direction:column; gap:6px; }
.usx-row{ min-height:58px; padding:8px 16px; box-sizing:border-box; border-radius:12px; border:1px solid var(--us-rowb); background:var(--us-row); cursor:pointer;
  transition:border-color .15s, box-shadow .15s; }
.usx-row:hover{ border-color:#a5b4fc; }
.usx-row:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.25); }
.usx-row.sel{ border-color:#a5b4fc; box-shadow:0 0 0 1px #a5b4fc; background:var(--cp-card); }
html[data-theme="dark"] .usx-row:hover{ border-color:rgba(129,140,248,.5); }
html[data-theme="dark"] .usx-row.sel{ border-color:rgba(129,140,248,.5); box-shadow:0 0 0 1px rgba(129,140,248,.5); }
.usx-who{ display:flex; align-items:center; gap:12px; min-width:0; }
.usx-av{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; box-sizing:border-box; border-radius:11px;
  font-size:12.5px; font-weight:700; color:var(--c, #6366f1); background:color-mix(in srgb, var(--c, #6366f1) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--c, #6366f1) 28%, transparent); }
.usx-av.big{ width:48px; height:48px; border-radius:14px; font-size:16px; }
.usx-nm{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.usx-nm b{ font-size:14px; font-weight:600; color:var(--cp-tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usx-ch{ display:inline-flex; align-items:center; gap:4px; width:max-content; font-size:11px; font-weight:600; color:var(--cp-mu); }
.usx-ch svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.usx-ch.tg, .usx-ch.max{ color:#0284c7; }
html[data-theme="dark"] .usx-ch.tg, html[data-theme="dark"] .usx-ch.max{ color:#7dd3fc; }
.usx-contact{ max-width:100%; font-size:13px; color:var(--cp-tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usx-tk{ font-size:14px; font-weight:700; color:var(--cp-tx); font-variant-numeric:tabular-nums; }
.usx-last{ font-size:13px; color:var(--cp-tx2); white-space:nowrap; }
.usx-row .view-btn{ justify-self:end; }
.usx-empty{ padding:40px 20px; text-align:center; font-size:13.5px; color:var(--cp-mu); }
/* Загрузка списка — на месте строк (users.js, showUsersLoader), как
   .table-loader в «Структуре» и лоадер тикетов на главной. */
.usx-loader{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:320px; }
.usx-loader img{ width:70px; height:70px; margin-bottom:12px; animation:usx-loader-spin 1s linear infinite; }
.usx-loader-text{ font-size:16px; font-weight:600; color:var(--cp-tx); }
@keyframes usx-loader-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .usx-loader img{ animation-duration:2.5s; } }

/* ── страницы — как на главной (/index), 1 в 1 ── */
.usx .pagination-wrap{ display:flex; justify-content:space-between; align-items:center; padding:16px 4px 0; margin-top:14px; background:none;
  border-top:1px solid #edf0f3; border-radius:0; }
html[data-theme="dark"] .usx .pagination-wrap{ background:none; border-top-color:rgba(148,163,184,.10); }
.usx .pagination-info{ font-size:13px; color:#6b7280; }
html[data-theme="dark"] .usx .pagination-info{ color:#94a3b8; }
.usx .pagination-controls{ display:flex; gap:4px; align-items:center; }
.usx .pagination-btn{ min-width:28px; height:28px; padding:0 9px; border:1px solid rgba(165,180,252,.45); background:linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
  border-radius:8px; font-size:12px; font-weight:600; color:#4338ca; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-align:center;
  font-family:inherit; transition:background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease, transform .22s ease;
  box-shadow:0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(99,102,241,.10), inset 0 1px 0 rgba(255,255,255,1); }
.usx .pagination-btn:hover:not(.active):not(:disabled){ background:linear-gradient(180deg, #ffffff 0%, #eef2ff 100%); border-color:rgba(99,102,241,.75); color:#4f46e5;
  transform:translateY(var(--lift-1,-1px)); box-shadow:0 2px 4px rgba(15,23,42,.08), 0 6px 14px rgba(99,102,241,.18), inset 0 1px 0 rgba(255,255,255,1); }
.usx .pagination-btn.active{ background:linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); border-color:transparent; color:#fff;
  box-shadow:0 2px 6px rgba(99,102,241,.30), 0 6px 14px rgba(99,102,241,.20), inset 0 1px 0 rgba(255,255,255,.25); }
.usx .pagination-btn.active:hover{ background:linear-gradient(180deg, #7274f4 0%, #4f46e5 100%); color:#fff; }
.usx .pagination-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.usx .pagination-dots{ padding:6px 8px; color:#9ca3af; font-size:13px; }
html[data-theme="dark"] .usx .pagination-dots{ color:#64748b; }

/* ── боковая панель клиента — в стиле окна «Добавить сотрудника» ── */
.side-panel.usx-dw{ width:460px; background:linear-gradient(180deg,#ffffff 0%,#fafbff 100%); border-left:1px solid rgba(165,180,252,.4);
  border-radius:16px 0 0 16px; box-shadow:-24px 0 48px rgba(15,23,42,.18); }
html[data-theme="dark"] .side-panel.usx-dw{ background:linear-gradient(180deg,#1d2735 0%,#161f2c 100%); border-left-color:rgba(148,163,184,.2); box-shadow:-24px 0 48px rgba(0,0,0,.5); }
/* закрытая панель стоит за правым краем — без тени, чтобы та не выглядывала */
.side-panel.usx-dw:not(.show), html[data-theme="dark"] .side-panel.usx-dw:not(.show){ box-shadow:none; }
.usx-dwh{ flex:none; display:flex; align-items:center; gap:14px; padding:22px 22px 18px; border-bottom:1px solid #e8ebf4; }
html[data-theme="dark"] .usx-dwh{ border-bottom-color:#2c3a4f; }
.usx-dwt{ flex:1; min-width:0; }
.usx-dw .panel-user-name-wrapper{ display:flex; align-items:center; gap:6px; margin:0; min-width:0; }
.usx-dw .panel-user-name, html[data-theme="dark"] .usx-dw .panel-user-name{ margin:0; min-width:0; font-size:19px; font-weight:700; letter-spacing:-.2px; color:var(--cp-tx);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usx-dw .panel-user-name-input, html[data-theme="dark"] .usx-dw .panel-user-name-input{ min-width:0; flex:1; height:36px; box-sizing:border-box; padding:0 10px;
  border:1px solid #6366f1; border-radius:9px; background:var(--us-field); color:var(--cp-tx); box-shadow:0 0 0 3px rgba(99,102,241,.15);
  font:600 15px "Segoe UI",Arial,system-ui,sans-serif; outline:none; }
.usx-dw .edit-icon-btn, .usx-dw .save-icon-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0;
  border-radius:8px; cursor:pointer; transform:none; box-shadow:none; transition:background-color .15s, border-color .15s; }
.usx-dw .edit-icon-btn{ border:1px solid #c7d2fe; background:#f5f7ff; }
.usx-dw .edit-icon-btn:hover{ background:#e0e7ff; border-color:#a5b4fc; }
.usx-dw .edit-icon-btn svg{ width:14px; height:14px; stroke:#4f46e5; stroke-width:2; fill:none; }
.usx-dw .edit-icon-btn:hover svg{ stroke:#4338ca; }
html[data-theme="dark"] .usx-dw .edit-icon-btn{ border-color:rgba(129,140,248,.32); background:rgba(99,102,241,.12); }
html[data-theme="dark"] .usx-dw .edit-icon-btn svg{ stroke:#c7d2fe; }
.usx-dw .save-icon-btn{ border:none; background:linear-gradient(180deg,#6366f1,#4f46e5); }
.usx-dw .save-icon-btn:hover{ background:linear-gradient(180deg,#7274f4,#4f46e5); transform:none; }
.usx-dw .save-icon-btn svg{ width:14px; height:14px; stroke:#fff; stroke-width:3; fill:none; }
.usx-dwmail{ display:flex; align-items:center; gap:6px; margin-top:4px; min-width:0; font-size:13px; color:var(--cp-mu); }
.usx-dwmail svg{ flex:none; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.usx-dwmail span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usx-x{ flex:none; align-self:flex-start; display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:none; border-radius:8px;
  background:transparent; color:#9ca3af; cursor:pointer; transition:background-color .15s, color .15s; }
.usx-x:hover{ background:#f3f4f6; color:#374151; }
html[data-theme="dark"] .usx-x{ color:#64748b; }
html[data-theme="dark"] .usx-x:hover{ background:#243145; color:#cbd5e1; }
.usx-x svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* счётчики — плитками, цифры мягкими цветами статусов */
.usx-stats{ flex:none; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:16px 22px 0; }
.usx-stat{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; border:1px solid #e3e8f5; background:#f8faff; }
html[data-theme="dark"] .usx-stat{ border-color:#2c3a4f; background:#141c29; }
.usx-stat b{ font-size:20px; font-weight:800; color:var(--cp-tx); font-variant-numeric:tabular-nums; }
.usx-stat span{ font-size:11.5px; color:var(--cp-mu); }
.usx-stat.o b{ color:#4fb98c; } .usx-stat.p b{ color:#e9a656; } .usx-stat.c b{ color:#e88787; }
html[data-theme="dark"] .usx-stat.o b{ color:#8fd9b6; }
html[data-theme="dark"] .usx-stat.p b{ color:#f2c98a; }
html[data-theme="dark"] .usx-stat.c b{ color:#f1aaaa; }

/* фильтр обращений — переключатель со счётчиками */
.usx-seg{ flex:none; display:flex; gap:2px; margin:14px 22px 12px; padding:4px; border-radius:12px; background:var(--cp-trk); }
html[data-theme="dark"] .usx-seg{ background:#141c29; }
.usx-sg{ flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:7px 6px; border:none; border-radius:9px; background:transparent;
  font:600 12.5px "Segoe UI",Arial,system-ui,sans-serif; color:var(--cp-tx2); white-space:nowrap; cursor:pointer; transition:background-color .15s, color .15s; }
.usx-sg:hover:not(.active){ background:rgba(255,255,255,.6); }
html[data-theme="dark"] .usx-sg:hover:not(.active){ background:rgba(255,255,255,.04); }
.usx-sg.active{ background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff; }
/* строка Segoe UI садится ниже середины — подпись на 1px выше, вровень со счётчиком */
.usx-sgt{ position:relative; top:-1px; }
.usx-sg em{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:18px; min-width:18px; padding:0 6px; border-radius:999px;
  font-style:normal; font-size:11px; font-weight:700; line-height:1; color:var(--cp-mu); background:var(--cp-card); }
.usx-sg.active em{ background:rgba(255,255,255,.25); color:#fff; }

/* обращения — карточки прежние (стекло с индиго-оттенком), ниже по высоте */
.usx-dw .panel-content{ flex:1; min-height:0; overflow-y:auto; padding:0 22px 14px; }
.usx-dw .panel-ticket{ display:block; padding:11px 14px; margin-bottom:8px; color:inherit; text-decoration:none; }
.usx-dw .panel-ticket:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.3); }
.usx-dw .panel-ticket-header{ margin-bottom:4px; }
.usx-dw .panel-ticket-status{ padding:3px 10px; }
.usx-dw .panel-ticket-subject{ margin-bottom:0; }
.usx-dw .panel-ticket-meta{ margin-top:7px; padding-top:6px; }
.usx-dw .usx-empty{ padding:28px 10px; }
.usx-dw .pagination-wrap{ flex:none; margin:0; padding:12px 22px 16px; border-top:1px solid #e8ebf4; }
html[data-theme="dark"] .usx-dw .pagination-wrap{ border-top-color:#2c3a4f; }