/* Responsive layer, 15 October 2026. Loaded after every other stylesheet.
 * Three ideas, in order of specificity:
 *   1. Pointer, not width, decides touch density: (pointer: coarse) gives 44px targets at any width.
 *   2. The shell switches to the off-canvas menu up to 1024px (tablet portrait, landscape phone), not only 760px.
 *   3. Short viewports (landscape phones) compress the order card header so the form stays visible.
 * Audit: docs/UI-AUDIT-20261015.md (U1, U2, U5, U6, U12). */

/* ---------- 1. Touch density by pointer ---------- */
@media (pointer: coarse) {
  .crm-ui :is(.btn, .icon-btn, button.link, .btn.link) { min-height: 40px; }
  .crm-ui :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { min-height: 44px; font-size: 16px; }
  .crm-ui :is(.module-tabs a, .tabs button, .ct-tabs button, .task-tabs button, .wh-subnav a, .co-card-tabs button, .ord-card-tabs button, .ct-card-tabs button, .fn-form-tabs button, .wh-form-tabs button, .task-event-tabs button) { min-height: 44px; }
  .crm-ui .sidebar .nav-item { min-height: 44px; }
  .crm-ui :is(.settings-nav > a, .profile-nav a, .profile-nav button) { min-height: 44px; }
  .crm-ui :is(.employee-scroll-previous, .employee-scroll-next) { min-width: 44px; min-height: 44px; }
  .crm-ui tbody td .btn.link { display: inline-flex; align-items: center; min-height: 40px; padding-top: 0; padding-bottom: 0; }
  .crm-ui .ord-filter-chip, .crm-ui .lead-filter-chip, .crm-ui .text-button { min-height: 40px; }
  .crm-ui input[type=checkbox], .crm-ui input[type=radio] { width: 22px; height: 22px; min-height: 22px; }
}

/* ---------- 2. Compact shell up to 1024px (tablet portrait, landscape phone) ---------- */
@media (max-width: 1024px) {
  :root { --workspace-sidebar: 0px; }
  .crm-ui .main, .crm-ui .main.with-settings, .crm-ui .main.with-profile { margin-left: 0; padding: 12px 12px 0; }
  .crm-ui .sidebar { inset: 10px auto 10px 10px; width: min(300px, calc(100vw - 32px)); height: auto; z-index: 90; padding: 0 14px; border-radius: 24px; transform: translateX(-100%); visibility: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .workspace-nav-open { overflow: hidden; }
  .workspace-nav-open .crm-ui .sidebar, .crm-ui .workspace-nav-open .sidebar, .workspace-nav-open .sidebar { transform: translateX(0); visibility: visible; }
  .crm-ui .workspace-brand { padding: 20px 8px; }
  .crm-ui .sidebar nav { flex: 1; overflow: visible; }
  .crm-ui .sidebar .nav-item { height: 44px; justify-content: flex-start; padding: 0 14px; margin: 2px 0; font-size: 14px; }
  .crm-ui .sidebar .nav-item span { display: inline; }
  .crm-ui .sidebar .nav-flyout { display: none; }
  .crm-ui .sidebar .profile-button { flex-shrink: 0; }
  .crm-ui .workspace-menu, .crm-ui .workspace-nav-close { display: grid; place-items: center; min-width: 44px; height: 44px; color: #344153; background: transparent; border-radius: 7px; }
  .crm-ui .workspace-nav-close { position: absolute; top: 17px; right: 8px; background: #fff; border-radius: 999px; }
  .workspace-nav-open .workspace-scrim { display: block; position: fixed; inset: 0; z-index: 89; background: #17243b66; backdrop-filter: blur(3px); }
  .crm-ui .topbar { min-height: 68px; height: auto; padding: 12px 14px; gap: 8px; flex-wrap: wrap; border-radius: 20px; }
  .crm-ui .top-title { gap: 10px; flex: 1; min-width: 0; }
  .crm-ui .top-title h1 { font-size: 22px; letter-spacing: -.5px; }
  .crm-ui .topbar .help-link, .crm-ui .topbar .ord-training, .crm-ui .co-training { display: none; }
  .crm-ui :is(.settings-nav, .profile-nav) { position: static; display: flex; flex-direction: row; width: auto; height: auto; margin: 12px 0 0; padding: 8px; border-radius: 16px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
  .crm-ui :is(.settings-nav > a, .profile-nav a, .profile-nav button) { flex: 0 0 auto; min-height: 44px; padding: 12px; }
  .crm-ui .settings-nav-footer { display: none; }
  .crm-ui .main > main { padding: 16px 0; }
}

/* Section search: full-width second row instead of a 44px stub (U1). */
@media (max-width: 1024px) {
  .crm-ui .top-actions { width: 100%; gap: 8px; flex-wrap: wrap; }
  .crm-ui .top-actions:has(.global-search):not(:has(.ord-search)) { display: flex; }
  .crm-ui .topbar :is(.global-search, .ord-search, .search) { display: flex; align-items: center; flex: 1 1 100%; width: 100%; min-width: 0; min-height: 44px; margin: 0; border-radius: 12px; }
  .crm-ui .global-search input, .crm-ui .search input { position: static; width: 100%; max-width: none; min-height: 0; font-size: 16px !important; color: var(--ink); background: transparent; border: 0; box-shadow: none; }
  .crm-ui .global-search svg { display: block; flex-shrink: 0; }
  .crm-ui .global-search input:not(:focus)::placeholder { font-size: 16px; }
}

/* Order card up to 1024px: one column, history as a tab, no second header row for the close button (U5). */
@media (max-width: 1024px) {
  .crm-ui .ord-workspace-v3 { width: 100%; max-width: 100%; display: flex; grid-template-columns: minmax(0, 1fr); }
  .crm-ui .ord-workspace-v3 > .ord-main { width: 100%; min-width: 0; }
  .crm-ui .ord-workspace-v3 > .ord-history, .crm-ui .ord-workspace-v3 > .ord-history-toggle { display: none; }
  .crm-ui .ord-workspace-v3 .ord-card-content > .ord-history { border: 0; height: 100%; min-height: 300px; }
  .crm-ui .ord-workspace-v3.ord-history-page .ord-card-content { padding: 0; background: #edf4ff; }
  .crm-ui .ord-workspace-v3.ord-history-page .ord-card-content > .ord-history { min-height: 0; height: 100%; }
  .crm-ui .ord-workspace-v3 .ord-header-history { display: none; }
  .crm-ui .ord-workspace-v3 .ord-history-tab { display: inline-flex; }
  .crm-ui .ord-workspace-v3 .ord-card-head { flex-wrap: nowrap; min-height: 60px; padding: 10px 14px; gap: 8px; }
  .crm-ui .ord-workspace-v3 .ord-card-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }
  .crm-ui .ord-workspace-v3 .ord-card-head [data-oa=close] { margin-left: auto; flex-shrink: 0; }
  .crm-ui .ord-workspace-v3 .ord-card-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .crm-ui .ord-workspace-v3 .ord-card-tabs .btn { flex: 0 0 auto; white-space: nowrap; }
  .crm-ui .ord-workspace-v3 .ord-form-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-ui .ord-workspace-v3 .ord-identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .crm-ui .ord-workspace-v3 .ord-form-section, .crm-ui .ord-workspace-v3 .ord-identity { grid-template-columns: 1fr; }
}

/* ---------- 3. Short viewports: landscape phone, split-screen tablet (U12) ---------- */
@media (max-height: 620px) {
  .crm-ui .topbar { min-height: 52px; padding: 8px 14px; }
  .crm-ui .top-title h1 { font-size: 18px; }
  .crm-ui .ord-workspace-v3 .ord-card-head { min-height: 48px; padding: 4px 12px; }
  .crm-ui .ord-workspace-v3 .ord-card-head h2 { font-size: 17px; }
  .crm-ui .ord-workspace-v3 .ord-card-head .btn, .crm-ui .ord-workspace-v3 .ord-card-actions > .btn { min-height: 38px; }
  .crm-ui .ord-workspace-v3 .ord-card-actions { padding: 4px 12px; }
  .crm-ui .ord-workspace-v3 .ord-card-tabs { min-height: 40px; padding: 2px 8px; }
  .crm-ui .ord-workspace-v3 .ord-card-tabs .btn { min-height: 38px; padding: 6px 10px; }
  .crm-ui .ord-workspace-v3 .ord-card-footer { padding: 6px 12px; min-height: 0; }
  .crm-ui .ord-workspace-v3 .ord-card-footer .btn { min-height: 40px; }
  .crm-ui .ord-workspace-v3 .ord-card-footer > span strong { font-size: 16px; }
  .crm-ui .ord-workspace-v3 .ord-card-content { padding: 8px 12px; }
  .crm-ui .ord-workspace-v3 .ord-form-section { padding: 10px 12px; gap: 8px 16px; }
}

/* ---------- 4. Sidebar badge never hides under the scrollbar (U6) ---------- */
.crm-ui .sidebar nav { scrollbar-gutter: stable; padding-right: 2px; }
.crm-ui .sidebar .nav-item { gap: 10px; }
.crm-ui .sidebar .nav-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-ui .sidebar .nav-item .task-nav-count { flex-shrink: 0; margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; line-height: 20px; text-align: center; }

/* ---------- 4b. Order card head never pushes the close button under the history pane ---------- */
.crm-ui .ord-workspace-v3 .ord-card-head > .ord-spacer { flex: 1 1 0; min-width: 0; }
.crm-ui .ord-workspace-v3 .ord-card-head > h2 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm-ui .ord-workspace-v3 .ord-card-head > .btn { flex-shrink: 0; }
.crm-ui .ord-workspace-v3 .ord-card-head > [data-oa=close] { margin-right: 0; }

/* ---------- 5. Phone toolbars: one scrollable row instead of three wrapped rows (U4, U11) ---------- */
@media (pointer: coarse) {
  .crm-ui .ord-status { min-height: 36px; }
}
@media (max-width: 1024px) {
  /* Summary badges: a compact strip, never a floating card (phones and portrait tablets). */
  .crm-ui .ord-badges { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; min-height: 0; margin: 0 0 12px; padding: 0 0 4px; overflow-x: auto; scrollbar-width: thin; border: 0; }
  .crm-ui .ord-badges .btn { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; min-width: 0; min-height: 44px; padding: 6px 14px; border: 0; border-right: 0; }
  .crm-ui .ord-badges .btn b { font-size: 15px; }
  .crm-ui .ord-badges .btn span { font-size: 12px; }
}
@media (max-width: 760px) {
  /* Action rows scroll horizontally; the primary action stays first and visible. */
  .crm-ui :is(.ord-toolbar, .lead-toolbar, .wh-toolbar, .ct-toolbar, .iv-toolbar, .sale-toolbar) { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; }
  .crm-ui :is(.ord-toolbar, .lead-toolbar, .wh-toolbar, .ct-toolbar, .iv-toolbar, .sale-toolbar) > * { flex: 0 0 auto; white-space: nowrap; }
  .crm-ui :is(.ord-toolbar, .lead-toolbar, .wh-toolbar, .ct-toolbar, .iv-toolbar, .sale-toolbar) :is(.ord-spacer, .iv-spacer, .sale-spacer, .iv-divider, .sale-toolbar-divider) { display: none; }
  .crm-ui :is(.iv-toolbar, .sale-toolbar) .btn { min-height: 44px; }
  /* Invoice summary badges: the same compact strip as orders (stage 2). */
  .crm-ui .iv-badges { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 12px; padding: 0 0 4px; overflow-x: auto; scrollbar-width: thin; }
  .crm-ui .iv-badges .btn { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; }
  /* Leads: view switcher and badges in one row each, chips look like controls. */
  .crm-ui .lead-list-controls .lead-view, .crm-ui .lead-view { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin-bottom: 10px; scrollbar-width: thin; }
  .crm-ui .lead-view .btn { flex: 0 0 auto; min-height: 44px; }
  .crm-ui .lead-view a { display: none; }
  .crm-ui .lead-list-controls .lead-badges, .crm-ui .lead-badges { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-bottom: 10px; scrollbar-width: thin; }
  .crm-ui .lead-badges .btn { flex: 0 0 auto; min-height: 44px; }
  .crm-ui .lead-toolbar > label { display: inline-flex; align-items: center; gap: 6px; }
  .crm-ui .lead-toolbar .lead-filter > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border: 1px solid #cbd4dd; border-radius: 999px; background: #fff; list-style: none; cursor: pointer; }
  .crm-ui .lead-toolbar .lead-filter > summary::-webkit-details-marker { display: none; }
  /* Filter lists open as a bottom sheet, so the scrolling toolbar never clips them. */
  .crm-ui .lead-toolbar .lead-filter > div { position: fixed; inset: auto 12px 12px 12px; top: auto; min-width: 0; max-width: none; max-height: 60dvh; z-index: 60; }
  .crm-ui #lead-search { display: flex; gap: 8px; }
  .crm-ui #lead-search input { flex: 1 1 auto; min-width: 0; }
  .crm-ui #lead-search .btn { flex: 0 0 auto; }
  /* Order card: long party names stay clear of the change button (U13). */
  .crm-ui .ord-workspace-v3 .ord-contact-summary { padding-right: 52px; }
}

/* ---------- 6. Phone lists as cards instead of a table with a column pager (U3) ---------- */
/* list-cards.js renders these only at ≤760px; tablets and desktops keep the table. */
@media (max-width: 760px) {
  .crm-ui .list-cards { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
  .crm-ui .list-cards-head { display: flex; align-items: center; gap: 8px; min-height: 44px; }
  .crm-ui .list-cards-select { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; font-size: 13px; color: var(--muted, #64748b); }
  .crm-ui .list-cards-sort { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; }
  .crm-ui .list-cards-sort > span { flex-shrink: 0; font-size: 12px; color: var(--muted, #64748b); }
  /* Warehouse registers set flex-wrap: wrap inline with an id selector; keep the stage-2 single row (U11). */
  .crm-ui :is(#warehouse-document-register, #warehouse-operational) .wh-toolbar { flex-wrap: nowrap; }
  .crm-ui .list-cards-sort select { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; }
  .crm-ui .list-cards-direction { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0; font-size: 18px; }
  .crm-ui .list-card { display: grid; gap: 8px; padding: 12px 14px; background: #fff; border: 1px solid var(--line, #e3e8ef); border-radius: 14px; box-shadow: 0 2px 6px #26364d08; }
  .crm-ui .list-card.list-card-open { cursor: pointer; }
  .crm-ui .list-card:focus-visible { outline: 2px solid var(--accent, #075cbe); outline-offset: 2px; }
  .crm-ui .list-card-top { display: flex; align-items: center; gap: 10px; min-height: 40px; }
  .crm-ui .list-card-check { display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 40px; margin-left: -4px; }
  .crm-ui .list-card-title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
  .crm-ui .list-card-title :is(.btn.link, .ct-name) { display: inline; min-height: 0; min-width: 0; padding: 0; font-size: 16px; font-weight: 600; line-height: 1.3; text-align: left; white-space: normal; }
  .crm-ui .list-card-title .ct-stat { display: none; }
  .crm-ui .list-card-status { flex: 0 1 auto; max-width: 52%; min-width: 0; }
  .crm-ui .list-card-status :is(.ord-status, .wh-status, .iv-status-button) { max-width: 100%; }
  .crm-ui .list-card-status .iv-status-button { min-height: 40px; }
  .crm-ui .list-card-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
  .crm-ui .list-card-fields > div { min-width: 0; }
  .crm-ui .list-card-fields > .list-card-wide { grid-column: 1 / -1; }
  .crm-ui .list-card-fields dt { margin: 0 0 2px; font-size: 11px; line-height: 1.2; letter-spacing: .3px; text-transform: uppercase; color: var(--muted, #64748b); }
  .crm-ui .list-card-fields dd { margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
  .crm-ui .list-card-fields dd small { display: block; font-size: 12px; color: var(--muted, #64748b); }
  .crm-ui .list-card-fields dd .btn.link { display: inline-flex; align-items: center; min-height: 36px; min-width: 0; padding: 0; text-align: left; white-space: normal; }
  .crm-ui .list-card-amount { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; font-size: 16px; font-weight: 600; }
  .crm-ui .list-card-amount > span { font-size: 12px; font-weight: 400; color: var(--muted, #64748b); }
  .crm-ui .list-card-amount small { font-weight: 400; font-size: 12px; color: var(--muted, #64748b); }
  .crm-ui .list-cards-empty { padding: 24px 12px; text-align: center; color: var(--muted, #64748b); }
  .crm-ui .list-cards-empty :is(.ct-empty, .sale-empty) { padding: 0; }
  .crm-ui .list-cards-empty h3 { margin: 8px 0 4px; font-size: 16px; }
  /* Pagers stay in one row under the cards. */
  .crm-ui :is(.ord-pagination, .ct-bottom, .iv-list-footer, .sale-list-footer, .wh-pagination, .wh-footer) { flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 400px) {
  /* Narrow phones: the select keeps its aria-label, the visible word would squeeze the column name. */
  .crm-ui .list-cards-sort > span { display: none; }
}

/* ---------- 7. Chat sidebar: filter rows never overlap, at any screen width ---------- */
/* The list column was a fixed 360px even on 2K screens, and three equal-width quick-filter buttons
   could not hold "Не назначено" next to the "Фильтры" button. The column now grows with the screen,
   the buttons size by content and clip with an ellipsis, the "Фильтры" button is icon-only while the
   column is narrow, and as a last resort it wraps under the group instead of being overdrawn. */
.crm-ui .chat-filter-bar { flex-wrap: wrap; row-gap: 6px; }
.crm-ui .chat-quick-filters { flex: 1 1 auto; min-width: 0; }
.crm-ui .chat-filter-toggle { flex: 0 0 auto; margin-left: auto; }
.crm-ui :is(.chat-type-filters, .chat-quick-filters) .btn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1501px) {
  .crm-ui .chat-workspace { grid-template-columns: clamp(380px, 20vw, 480px) minmax(320px, 1fr); }
  .crm-ui .chat-workspace.context-open { grid-template-columns: clamp(380px, 20vw, 480px) minmax(320px, 1fr) 300px; }
}
@media (min-width: 701px) and (max-width: 1500px) {
  .crm-ui .chat-filter-toggle { padding: 5px 8px; }
  .crm-ui .chat-filter-toggle span { display: none; }
  .crm-ui .chat-filter-toggle svg { width: 20px; height: 20px; }
}

/* ---------- 8. Owner matrix 2026-10-15 (320–5120 px, breakpoints ±1, zoom): nothing overdraws its neighbour ---------- */
/* 8.1 Long names in list tables wrap inside their cell instead of running over the next column
   (invoices client/payer from 2560 px and after column paging, contacts name/address on ultra-wide). */
.crm-ui :is(.iv-table, .sale-table, .ct-table, .fn-table, .wh-table, .lead-table, .task-table) td { white-space: normal; overflow-wrap: anywhere; }
.crm-ui :is(.iv-table, .sale-table, .ct-table, .fn-table, .wh-table, .lead-table, .task-table) td :is(.btn.link, .ct-name) { white-space: normal; text-align: left; overflow-wrap: anywhere; max-width: 100%; }
/* 8.2 Leads: the last filter popover ("Ещё") opens to the left so it never leaves the screen (1366–1536 px);
   on tablets the filter lists open as a centred sheet instead of an absolute panel that can overflow. */
.crm-ui .lead-toolbar details.lead-filter:last-of-type > div { left: auto; right: 0; }
@media (min-width: 761px) and (max-width: 1024px) {
  .crm-ui .lead-toolbar .lead-filter > div { position: fixed; left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); min-width: 0; max-width: none; max-height: 70dvh; z-index: 60; }
}
/* 8.3 Task assignee popup never wider than the phone screen. */
.crm-ui .task-people-popup { width: min(270px, calc(100vw - 24px)); }
/* 8.4 Touch tablets: sort buttons in table headers and small links reach 36 px. */
@media (pointer: coarse) {
  .crm-ui th > button, .crm-ui th .btn, .crm-ui .sale-training, .crm-ui .lead-view a, .crm-ui .ct-table .ct-name { min-height: 36px; }
  .crm-ui th > button { padding-block: 6px; }
  .crm-ui td .btn.link { min-height: 32px; min-width: 32px; }
}
/* Tablets without a reliable pointer media query (desktop-UA tablets, emulators): same touch sizes up to 1024 px. */
@media (max-width: 1024px) {
  .crm-ui th > button, .crm-ui th .btn, .crm-ui .sale-training, .crm-ui .lead-view a, .crm-ui .ct-table .ct-name { min-height: 36px; }
  .crm-ui th > button { padding-block: 6px; }
  .crm-ui :is(.iv-table, .sale-table, .ct-table, .fn-table, .wh-table, .lead-table, .task-table, .ord-table, .ord-lines) td .btn.link { display: inline-flex; align-items: center; min-height: 32px; min-width: 32px; padding-top: 0; padding-bottom: 0; }
}
/* 8.5 Document templates: the action bar was sticky to the viewport bottom and covered the fields, the HTML
   source and the variables list on every screen shorter than the form; it now sits in the flow after the editor. */
.crm-ui .document-templates .document-actions { position: static; border-top: 0; padding: 8px 0; }
/* 8.6 Task card: feed header tabs wrap instead of being cut at the pane edge. */
.crm-ui .task-history > header { flex-wrap: wrap; gap: 6px; }
.crm-ui .task-event-tabs { flex-wrap: wrap; }
/* 8.7 Planner day/week grid: employee and resource names stay inside their column header. */
.crm-ui .ord-time-grid > header { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.crm-ui .ord-time-grid > header > .btn { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 8.8 Contacts on phones: the page footer with the pager is in the flow, so the last row is never hidden under it. */
@media (max-width: 760px) {
  .crm-ui .ct-bottom { position: static; }
}

/* ---------- 9. Desktop tables and small controls, 15 October 2026 (U7, U8, U10, U14, U17, U18, chat filters, tablet targets) ---------- */
/* 9.1 Contacts table (U7): words never break mid-word, long tokens (e-mail, phone) still wrap inside the cell,
   the name column keeps a minimum and the address is one line with an ellipsis and the full text in a tooltip. */
.crm-ui .ct-table td { overflow-wrap: break-word; }
.crm-ui .ct-table td:is([data-col=email], [data-col=phone], [data-col=tags]) { overflow-wrap: anywhere; }
.crm-ui .ct-table td[data-col=name] { min-width: 200px; }
.crm-ui .ct-table td[data-col=name] .ct-name { display: inline; max-width: 360px; overflow-wrap: break-word; hyphens: manual; }
.crm-ui .ct-table td[data-col=email] { max-width: 260px; }
.crm-ui .ct-cell-clip { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 9.2 Stock table (U8): the name column has width priority and whole-word wrapping; numbers stay on one line. */
.crm-ui #warehouse-stock-workspace .wh-table td[data-col=name] { min-width: 240px; max-width: none; overflow-wrap: break-word; hyphens: manual; }
.crm-ui #warehouse-stock-workspace .wh-table th[data-col=name] { width: 34%; }
.crm-ui #warehouse-stock-workspace .wh-table td:is([data-col=sku], [data-col=quantity], [data-col=transit], [data-col=minimum], [data-col=cost], [data-col=partner], [data-col=retail], [data-col=dmlink]) { white-space: nowrap; }
.crm-ui #warehouse-stock-workspace .wh-table td[data-col=quantity] .expiry-badge { white-space: normal; }
@media (max-width: 1024px) {
  .crm-ui #warehouse-stock-workspace .wh-table td[data-col=name] { min-width: 200px; }
}
/* Section tab rows (module-tabs) show a fade at the edge that still has hidden tabs (employee-ui.js sets the classes). */
.crm-ui .module-tabs.employee-can-scroll::after,
.crm-ui .module-tabs.employee-can-scroll::before { content: ''; position: sticky; flex: 0 0 36px; align-self: stretch; pointer-events: none; z-index: 1; transition: opacity var(--motion-fast, 140ms); }
.crm-ui .module-tabs.employee-can-scroll::after { right: 0; margin-left: -36px; background: linear-gradient(to right, #f7f9fc00, #f3f6fa 65%); }
.crm-ui .module-tabs.employee-can-scroll::before { left: 0; margin-right: -36px; background: linear-gradient(to left, #f7f9fc00, #f3f6fa 65%); }
.crm-ui .module-tabs.employee-can-scroll.employee-scroll-end::after,
.crm-ui .module-tabs.employee-can-scroll.employee-scroll-start::before { opacity: 0; }
.crm-ui .module-tabs.employee-can-scroll { scrollbar-width: thin; scrollbar-color: #91a6c2 transparent; }
/* 9.3 Orders list on desktops (U10): summary badges share one row with the action buttons; long cells are clamped. */
@media (min-width: 1025px) {
  .crm-ui #orders-module .ord-head { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
  .crm-ui #orders-module .ord-head > .ord-toolbar { flex: 1 1 auto; min-width: 0; margin: 0; }
  .crm-ui #orders-module .ord-head > .ord-badges { order: 2; flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-height: 0; margin: 0; padding: 0; border: 0; }
  .crm-ui #orders-module .ord-badges .btn { flex-direction: row; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 6px 14px; border: 1px solid #d2dce8; border-radius: 12px; line-height: 1.3; }
  .crm-ui #orders-module .ord-badges .btn:first-child { padding-left: 14px; }
  .crm-ui #orders-module .ord-badges .btn b { font-size: 15px; }
  .crm-ui #orders-module .ord-badges .btn span { font-size: 12px; }
  .crm-ui #orders-module .ord-badges .btn.selected { border-color: #7baae6; background: #eaf3ff; outline: 0; }
  .crm-ui .ord-table .ord-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .crm-ui .ord-table td:is([data-col=client], [data-col=payer], [data-col=partner]) > .btn.link { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .crm-ui .ord-table td { max-width: 260px; }
}
/* 9.4 Order search on desktops (U14): the auto-focused field shows the form-field highlight, not the 3px keyboard ring. */
.crm-ui .topbar .ord-search:focus-visible { outline: 0; }
.crm-ui .topbar .ord-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #0969da1f; }
/* 9.5 Order card header: the barcode button has an icon and a label; keyboard focus uses a 2px ring (U17). */
.crm-ui .ord-workspace-v3 .ord-card-head .ord-barcode-button { gap: 6px; padding: 5px 10px; font-size: 12px; }
.crm-ui .ord-workspace-v3 .ord-card-head .ord-barcode-button .ord-icon { width: 18px; height: 18px; }
.crm-ui .ord-workspace-v3 .ord-card-head .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 480px) {
  .crm-ui .ord-workspace-v3 .ord-card-head .ord-barcode-button span { display: none; }
}
/* 9.6 "Обучение" next to the view switcher is a chip in the same panel style (U18); section 2 hides it up to 1024 px. */
@media (min-width: 1025px) {
  .crm-ui .topbar .ord-training { display: inline-flex; align-items: center; gap: 6px; height: 38px; margin-left: 4px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #f1f4f8; color: #64748b; font-size: 12px; font-weight: 550; text-decoration: none; }
  .crm-ui .topbar .ord-training:hover { color: var(--accent); border-color: #c5d7f3; background: #e8f0ff; }
  .crm-ui .topbar .ord-training .ord-icon { width: 16px; height: 16px; }
}
/* 9.7 Chat filter popover: a select with a "Найти…" button wraps the button under the select in a narrow column
   instead of squeezing the select to a few letters. */
.crm-ui .chat-filter-popover label > span { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.crm-ui .chat-filter-popover label > span > select { flex: 1 1 120px; min-width: 0; width: auto; }
.crm-ui .chat-filter-popover label > span > .btn { flex: 0 0 auto; }
.crm-ui .chat-filter-popover label { align-content: start; }
.crm-ui .chat-filter-popover select { padding-right: 20px; padding-left: 8px; }
/* The two selects with the longest values take a full row; dense packing keeps the short ones paired. */
.crm-ui .chat-filter-popover { grid-auto-flow: dense; }
.crm-ui .chat-filter-popover label:is(:has(> span > select[name=manager]), :has(> select[name=message_state])) { grid-column: 1 / -1; }
/* 9.8 Tablets 768–1024: links, status buttons and sort headers in list tables reach 40 px. */
@media (min-width: 761px) and (max-width: 1024px) {
  .crm-ui :is(.iv-table, .sale-table, .ct-table, .fn-table, .wh-table, .lead-table, .task-table, .ord-table) td :is(.btn.link, .ct-name, .wh-link, .iv-status-button, .ord-status) { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; padding-top: 0; padding-bottom: 0; }
  .crm-ui :is(.iv-table, .sale-table, .ct-table, .fn-table, .wh-table, .lead-table, .task-table, .ord-table) th :is(button, .btn) { min-height: 40px; }
  .crm-ui .ct-table .ct-stat.btn { min-height: 40px; min-width: 40px; opacity: 1; }
  .crm-ui .ord-table td small > .btn.link { min-height: 40px; }
  .crm-ui :is(.iv-table, .sale-table, .ct-table, .fn-table, .wh-table, .lead-table, .task-table, .ord-table) td { padding-top: 6px; padding-bottom: 6px; }
  .crm-ui :is(.iv-table, .sale-table, .ct-table, .fn-table, .wh-table, .lead-table, .task-table, .ord-table) input[type=checkbox] { width: 22px; height: 22px; }
  .crm-ui :is(.wh-resize, [data-iv-resize], .ord-table-resize) { width: 14px; }
}