/* Файл: static/css/crm_redesign.css
   Новый вид интерфейса «Диспетчерская» (2026-10-17). Слой поверх старых стилей:
   подключается шаблоном _crm_redesign.html только при CRM_UI_REDESIGN=1 (app_config),
   все правила под html.crm-v2 — без флага страницы выглядят как раньше.
   Разметку и id не меняем: на них завязаны index_page.js, chat_live.js и др.
   Шрифт — вендорный Inter (static/vendor/inter), цифры — системный моноширинный. */

/* Inter — вендорный; на страницах без своего подключения (вход, кабинеты) берём его отсюда. */
@import url("../vendor/inter/inter.css");

/* ───────────────────────── Токены ───────────────────────── */
html.crm-v2{
  --v2-ground: #F2F3EF;
  --v2-surface: #FFFFFF;
  --v2-surface-2: #FAFAF8;
  --v2-hover: #F7F8F5;
  --v2-ink: #15171C;
  --v2-ink-2: #3A3F48;
  --v2-muted: #5E6470;
  --v2-line: #E3E5E0;
  --v2-line-strong: #D3D6D0;
  --v2-row: #ECEEEA;
  --v2-accent: #2447D6;
  --v2-accent-hover: #1B37A8;
  --v2-accent-soft: #E8EDFF;
  --v2-accent-past: #C9D3F7;
  --v2-ok: #1F8A4C;
  --v2-danger: #C0362C;

  --v2-side: #15171C;
  --v2-side-hover: #21242B;
  --v2-side-active: #262A33;
  --v2-side-card: #1D2026;
  --v2-side-text: #C9CCD3;
  --v2-side-muted: #8D929C;
  --v2-side-icon: #8FA6FF;
  --v2-side-w: 232px;

  /* Статусы: фон / текст */
  --v2-st-new-bg: #E6EDFF;        --v2-st-new: #1D3FB8;
  --v2-st-progress-bg: #FFF1D6;   --v2-st-progress: #8A5300;
  --v2-st-done-bg: #DFF3E6;       --v2-st-done: #17663A;
  --v2-st-overdue-bg: #FDE4E1;    --v2-st-overdue: #A3241A;
  --v2-st-guarantee-bg: #EEE6FB;  --v2-st-guarantee: #5B2EA6;
  --v2-st-transfer-bg: #E3F1F3;   --v2-st-transfer: #1E5F69;
  --v2-st-refusal-bg: #ECEDEA;    --v2-st-refusal: #4E535C;

  --v2-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --v2-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --v2-r-sm: 8px;
  --v2-r-md: 10px;
  --v2-r-lg: 14px;
  --v2-shadow: 0 1px 2px rgba(21, 23, 28, 0.06);
  --v2-shadow-pop: 0 12px 32px rgba(21, 23, 28, 0.16);
  --v2-focus: 0 0 0 3px rgba(36, 71, 214, 0.22);

  /* Старые токены (app.css, crm_ui.css, index_page.css) → новые значения */
  --ui-font-family: var(--v2-font);
  --ui-radius-xs: 6px;
  --ui-radius-sm: 8px;
  --ui-radius-md: 10px;
  --ui-radius-lg: 14px;
  --ui-color-bg: var(--v2-ground);
  --ui-color-surface: var(--v2-surface);
  --ui-color-surface-soft: var(--v2-surface-2);
  --ui-color-text: var(--v2-ink);
  --ui-color-muted: var(--v2-muted);
  --ui-color-border: var(--v2-line);
  --ui-color-accent: var(--v2-accent);
  --ui-color-accent-strong: var(--v2-accent-hover);
  --ui-color-accent-soft: var(--v2-accent-soft);
  --ui-color-success: var(--v2-ok);
  --ui-color-danger: var(--v2-danger);
  --ui-shadow-sm: var(--v2-shadow);
  --ui-shadow-md: var(--v2-shadow);
  --ui-shadow-lg: var(--v2-shadow-pop);
  --ui-status-new: var(--v2-st-new);
  --ui-status-overdue: var(--v2-st-overdue);
  --ui-status-in-progress: var(--v2-st-progress);
  --ui-status-completed: var(--v2-st-done);
  --ui-status-guarantee: var(--v2-st-guarantee);
  --ui-status-transferred: var(--v2-st-transfer);
  --ui-status-rejected: var(--v2-st-refusal);
  --ui-status-cancelled: var(--v2-st-refusal);

  --crm-ui-font: var(--v2-font);
  --crm-ui-text: var(--v2-ink);
  --crm-ui-muted: var(--v2-muted);
  --crm-ui-border: var(--v2-line);
  --crm-ui-border-strong: var(--v2-line-strong);
  --crm-ui-surface: var(--v2-surface);
  --crm-ui-surface-soft: var(--v2-surface-2);
  --crm-ui-bg: var(--v2-ground);
  --crm-ui-accent: var(--v2-accent);
  --crm-ui-accent-soft: var(--v2-accent-soft);

  --crm-topbar-bg: var(--v2-side);
  --crm-topbar-text: var(--v2-side-text);
  --crm-topbar-muted: var(--v2-side-muted);
  --crm-topbar-border: rgba(255, 255, 255, 0.08);
  --crm-topbar-shadow: none;
  --crm-topbar-accent: #FFFFFF;

  /* Bootstrap 5 */
  --bs-body-font-family: var(--v2-font);
  --bs-body-color: var(--v2-ink);
  --bs-body-bg: var(--v2-ground);
  --bs-border-color: var(--v2-line);
  --bs-primary: var(--v2-accent);
  --bs-primary-rgb: 36, 71, 214;
  --bs-link-color: var(--v2-accent);
  --bs-link-hover-color: var(--v2-accent-hover);
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 14px;

  background: var(--v2-ground);
  color-scheme: light;
}

/* ───────────────────────── База ───────────────────────── */
html.crm-v2 body{
  font-family: var(--v2-font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--v2-ink);
  background: var(--v2-ground);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
html.crm-v2 a{ color: var(--v2-accent); }
html.crm-v2 a:hover{ color: var(--v2-accent-hover); }
html.crm-v2 :focus-visible{ outline: 2px solid var(--v2-accent); outline-offset: 2px; }
html.crm-v2 h1{ font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--v2-ink); }
html.crm-v2 h2{ font-size: 20px; font-weight: 600; letter-spacing: -0.005em; }
html.crm-v2 h3, html.crm-v2 h4{ font-weight: 600; }
html.crm-v2 h5, html.crm-v2 h6{ font-weight: 600; }
html.crm-v2 .text-muted{ color: var(--v2-muted) !important; }
html.crm-v2 .crm-money,
html.crm-v2 .money,
html.crm-v2 .crm-date{ font-family: var(--v2-mono); font-variant-numeric: tabular-nums; }

/* ───────────────────────── Боковое меню (admin_nav.html) ───────────────────────── */
html.crm-v2 .crm-topbar{
  background: var(--v2-side);
  color: var(--v2-side-text);
  border: 0;
  box-shadow: none;
  font-family: var(--v2-font);
}
html.crm-v2 .crm-brand{ align-items: center; gap: 12px; }
html.crm-v2 .crm-brand::before{
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--v2-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
html.crm-v2 .crm-brand__link{ color: #FFFFFF; font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
html.crm-v2 .crm-brand__link:hover{ color: #FFFFFF; }
html.crm-v2 .crm-brand__meta{ color: var(--v2-side-muted); font-size: 12px; }
html.crm-v2 .crm-nav-toggle{
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.16);
  background: transparent;
  border-radius: 8px;
  min-height: 40px;
}
html.crm-v2 .crm-nav__item{
  color: var(--v2-side-text);
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  min-height: 40px;
  padding: 0 12px;
  gap: 12px;
}
html.crm-v2 .crm-nav__item:hover{ background: var(--v2-side-hover); color: #FFFFFF; border: 0; }
html.crm-v2 .crm-nav__item.active{ background: var(--v2-side-active); color: #FFFFFF; font-weight: 500; border: 0; }
html.crm-v2 .crm-nav__item.active::before{ background-color: var(--v2-side-icon); }
html.crm-v2 .crm-nav__item.is-disabled{ background: transparent; opacity: 0.4; }
html.crm-v2 .crm-nav__item--danger:hover{ background: rgba(192, 54, 44, 0.18); color: #FFB4AC; }
html.crm-v2 .crm-nav__badge{
  margin-left: auto;
  background: var(--v2-accent);
  font-family: var(--v2-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 1px 8px;
}
html.crm-v2 .crm-nav__caption{
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-side-muted);
  padding: 0 12px 6px;
}
html.crm-v2 .crm-nav__more[open] > summary{ background: var(--v2-side-hover); color: #FFFFFF; }
html.crm-v2 .crm-nav__more-menu{ background: var(--v2-side); border-color: rgba(255, 255, 255, 0.08); }
html.crm-v2 .crm-nav__user{ display: none; }
html.crm-v2 .crm-nav__item[data-ico] .crm-nav__arrow,
html.crm-v2 .crm-nav__item[data-ico] .crm-nav__caret{ display: none; }

/* Иконки пунктов: маска из SVG, цвет = цвет текста. */
html.crm-v2 .crm-nav__item[data-ico]::before{
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--v2-ico) center / 18px 18px no-repeat;
  mask: var(--v2-ico) center / 18px 18px no-repeat;
  opacity: 0.92;
}
html.crm-v2 [data-ico="home"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="shift"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="list"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1'/%3E%3Ccircle cx='4.5' cy='12' r='1'/%3E%3Ccircle cx='4.5' cy='18' r='1'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="inbox"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 10.5h7M8.5 13.5h4.5'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="clients"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.6 3.4-5.5 6.5-5.5s5.7 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18.5 14.8c1.6.7 2.6 2.4 3 5.2'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="finance"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='2.5'/%3E%3Cpath d='M16 13h2M3 10h18M7 6V4.5h10V6'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="salary"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='9' cy='7' rx='6' ry='3'/%3E%3Cpath d='M3 7v5c0 1.7 2.7 3 6 3M3 12v5c0 1.7 2.7 3 6 3'/%3E%3Ccircle cx='17.5' cy='16.5' r='3.5'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="masters"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="operators"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1.5'/%3E%3Cpath d='M19 19c0 1.5-1.5 2-4 2h-2'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="content"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="messages"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="more"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="back"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="export"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="report"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10 14M21 3l-7 18-4-7-7-4z'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="key"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M17 6l3 3M15 8l2 2'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="logout"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l5-5-5-5M15 12H4'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="view"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9h18M9 9v11'/%3E%3C/svg%3E"); }
html.crm-v2 [data-ico="phone"]{ --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }

/* ПК: меню — тёмная колонка слева, страница сдвигается вправо. */
@media (min-width: 921px){
  html.crm-v2 body:has(#crmTopbar){ padding-left: var(--v2-side-w); }
  html.crm-v2 .crm-topbar{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--v2-side-w);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #3A3F48 transparent;
  }
  html.crm-v2 .crm-topbar__inner{
    max-width: none;
    min-height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 20px 14px 16px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 22px;
    flex-wrap: nowrap;
  }
  html.crm-v2 .crm-brand{ padding: 0 8px; }
  html.crm-v2 .crm-nav{
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 2px;
  }
  html.crm-v2 .crm-nav__item{ min-height: 44px; padding: 0 12px; border-radius: 8px; }
  html.crm-v2 .crm-nav__group{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
  }
  html.crm-v2 .crm-nav__caption{ display: block; }
  html.crm-v2 .crm-nav__more{ margin-top: auto; padding-top: 16px; }
  html.crm-v2 .crm-nav__more > summary{ width: 100%; box-sizing: border-box; }
  html.crm-v2 .crm-nav__more-menu{
    position: static;
    min-width: 0;
    margin-top: 2px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  html.crm-v2 .crm-nav__more-menu .crm-nav__group{ border: 0; margin: 10px 0 6px; padding: 0; }
  html.crm-v2 .crm-nav > .crm-nav__item--danger{ margin-top: auto; }
  html.crm-v2 .crm-nav__user{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--v2-side-card);
  }
  html.crm-v2 .crm-nav__more ~ .crm-nav__user,
  html.crm-v2 .crm-nav > .crm-nav__item--danger ~ .crm-nav__user{ margin-top: 12px; }
  html.crm-v2 .crm-nav__avatar{
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #3A3F48;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
  }
  html.crm-v2 .crm-nav__who{ min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  html.crm-v2 .crm-nav__who b{ color: #FFFFFF; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.crm-v2 .crm-nav__who span{ color: var(--v2-side-muted); font-size: 12px; }
}

/* Телефон: тёмная полоса сверху, меню раскрывается под ней. */
@media (max-width: 920px){
  html.crm-v2 .crm-topbar__inner{ padding: 8px 12px; }
  html.crm-v2 .crm-brand::before{ width: 30px; height: 30px; border-radius: 8px; background-size: 18px 18px; }
  html.crm-v2 .crm-nav{ border-top-color: rgba(255, 255, 255, 0.08); padding: 8px 0 6px; gap: 2px; }
  html.crm-v2 .crm-nav__item{ min-height: 44px; }
}

/* ───────────────────────── Кнопки, поля, карточки (Bootstrap и свои) ───────────────────────── */
html.crm-v2 .btn{
  --bs-btn-font-weight: 500;
  border-radius: 10px;
  font-weight: 500;
  box-shadow: none;
}
html.crm-v2 .btn:not(.btn-sm):not(.btn-lg):not(.btn-close):not(.btn-link){ min-height: 40px; }
html.crm-v2 .btn-primary{
  --bs-btn-bg: var(--v2-accent);
  --bs-btn-border-color: var(--v2-accent);
  --bs-btn-hover-bg: var(--v2-accent-hover);
  --bs-btn-hover-border-color: var(--v2-accent-hover);
  --bs-btn-active-bg: var(--v2-accent-hover);
  --bs-btn-active-border-color: var(--v2-accent-hover);
  --bs-btn-disabled-bg: var(--v2-accent);
  --bs-btn-disabled-border-color: var(--v2-accent);
  background-color: var(--v2-accent);
  border-color: var(--v2-accent);
  color: #FFFFFF;
}
html.crm-v2 .btn-primary:hover{ background-color: var(--v2-accent-hover); border-color: var(--v2-accent-hover); color: #FFFFFF; }
html.crm-v2 .btn-outline-primary,
html.crm-v2 .btn-outline-secondary,
html.crm-v2 .btn-light,
html.crm-v2 .btn-secondary{
  --bs-btn-color: var(--v2-ink);
  --bs-btn-bg: var(--v2-surface);
  --bs-btn-border-color: var(--v2-line-strong);
  --bs-btn-hover-color: var(--v2-ink);
  --bs-btn-hover-bg: var(--v2-ground);
  --bs-btn-hover-border-color: var(--v2-line-strong);
  --bs-btn-active-color: var(--v2-ink);
  --bs-btn-active-bg: var(--v2-row);
  --bs-btn-active-border-color: var(--v2-line-strong);
  color: var(--v2-ink);
  background-color: var(--v2-surface);
  border-color: var(--v2-line-strong);
}
html.crm-v2 .btn-outline-primary:hover,
html.crm-v2 .btn-outline-secondary:hover,
html.crm-v2 .btn-light:hover,
html.crm-v2 .btn-secondary:hover{ background-color: var(--v2-ground); color: var(--v2-ink); border-color: var(--v2-line-strong); }
html.crm-v2 .btn-success{
  --bs-btn-bg: var(--v2-ok); --bs-btn-border-color: var(--v2-ok);
  --bs-btn-hover-bg: #17703D; --bs-btn-hover-border-color: #17703D;
  background-color: var(--v2-ok); border-color: var(--v2-ok);
}
html.crm-v2 .btn-danger{
  --bs-btn-bg: var(--v2-danger); --bs-btn-border-color: var(--v2-danger);
  --bs-btn-hover-bg: #A3241A; --bs-btn-hover-border-color: #A3241A;
  background-color: var(--v2-danger); border-color: var(--v2-danger);
}
html.crm-v2 .btn-outline-danger{
  --bs-btn-color: var(--v2-danger); --bs-btn-border-color: #F0C4BF;
  --bs-btn-hover-bg: var(--v2-st-overdue-bg); --bs-btn-hover-color: var(--v2-st-overdue); --bs-btn-hover-border-color: #F0C4BF;
}
html.crm-v2 .btn:focus-visible,
html.crm-v2 .form-control:focus,
html.crm-v2 .form-select:focus{ box-shadow: var(--v2-focus); border-color: var(--v2-accent); }

html.crm-v2 .form-control,
html.crm-v2 .form-select{
  border-radius: 10px;
  border-color: var(--v2-line-strong);
  color: var(--v2-ink);
  background-color: var(--v2-surface);
  font-size: 14px;
}
html.crm-v2 .form-control:not(textarea):not(.form-control-sm),
html.crm-v2 .form-select:not([multiple]):not(.form-select-sm){ min-height: 44px; }
html.crm-v2 .form-control::placeholder{ color: #8A8F99; }
html.crm-v2 .form-label,
html.crm-v2 label.form-label{ font-size: 12px; font-weight: 500; color: var(--v2-muted); margin-bottom: 6px; }
html.crm-v2 .form-check-input:checked{ background-color: var(--v2-accent); border-color: var(--v2-accent); }
html.crm-v2 .form-switch .form-check-input:focus{ box-shadow: var(--v2-focus); }

html.crm-v2 .card{
  --bs-card-border-color: var(--v2-line);
  --bs-card-border-radius: 14px;
  --bs-card-cap-bg: transparent;
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  box-shadow: none;
  background: var(--v2-surface);
}
html.crm-v2 .card-header{ background: transparent; border-bottom-color: var(--v2-line); font-weight: 600; }
html.crm-v2 .shadow, html.crm-v2 .shadow-sm{ box-shadow: var(--v2-shadow) !important; }
html.crm-v2 .modal-content{ border: 0; border-radius: 14px; box-shadow: var(--v2-shadow-pop); }
html.crm-v2 .modal-header, html.crm-v2 .modal-footer{ border-color: var(--v2-line); }
html.crm-v2 .dropdown-menu{ border-color: var(--v2-line); border-radius: 10px; box-shadow: var(--v2-shadow-pop); padding: 6px; }
html.crm-v2 .dropdown-item{ border-radius: 8px; min-height: 40px; display: flex; align-items: center; }
html.crm-v2 .badge{ font-weight: 600; border-radius: 999px; }
html.crm-v2 .alert{ border-radius: 10px; }

/* Таблицы */
html.crm-v2 .table{
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--v2-row);
  --bs-table-hover-bg: var(--v2-hover);
  --bs-table-striped-bg: var(--v2-surface-2);
  color: var(--v2-ink);
}
html.crm-v2 .table > thead > tr > th,
html.crm-v2 table.table thead th{
  background: var(--v2-surface-2);
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  border-bottom: 1px solid var(--v2-line);
}
html.crm-v2 .table > tbody > tr > td,
html.crm-v2 table.table td{ border-bottom-color: var(--v2-row); vertical-align: middle; }

/* Вкладки */
html.crm-v2 .nav-tabs{ border-bottom-color: var(--v2-line); gap: 4px; }
html.crm-v2 .nav-tabs .nav-link{ border: 0; border-bottom: 2px solid transparent; color: var(--v2-muted); font-weight: 500; border-radius: 0; }
html.crm-v2 .nav-tabs .nav-link:hover{ color: var(--v2-ink); border-bottom-color: var(--v2-line-strong); }
html.crm-v2 .nav-tabs .nav-link.active{ color: var(--v2-ink); background: transparent; border-bottom-color: var(--v2-accent); }
html.crm-v2 .nav-pills .nav-link{ border-radius: 8px; color: var(--v2-ink-2); }
html.crm-v2 .nav-pills .nav-link.active{ background: var(--v2-ink); color: #FFFFFF; }

/* ───────────────────────── Статусы заявок ───────────────────────── */
/* Мягкие «таблетки» с цветом текста вместо сплошной заливки. */
/* Только статусы заявок (.status.status-new и т.п.): голый .status в чате и уведомлениях — это строка состояния. */
html.crm-v2 .status[class*="status-"],
html.crm-v2 .status-pill,
html.crm-v2 .crm-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  white-space: nowrap;
  animation: none;
  box-sizing: border-box;
}
html.crm-v2 .status[class*="status-"]::before,
html.crm-v2 .crm-status::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
html.crm-v2 .status-new,         html.crm-v2 .crm-status--new{ background: var(--v2-st-new-bg); color: var(--v2-st-new); }
html.crm-v2 .status-in_progress, html.crm-v2 .crm-status--in_progress{ background: var(--v2-st-progress-bg); color: var(--v2-st-progress); }
html.crm-v2 .status-completed,   html.crm-v2 .crm-status--completed{ background: var(--v2-st-done-bg); color: var(--v2-st-done); }
html.crm-v2 .status-overdue,     html.crm-v2 .crm-status--overdue{ background: var(--v2-st-overdue-bg); color: var(--v2-st-overdue); }
html.crm-v2 .status-guarantee,   html.crm-v2 .crm-status--guarantee{ background: var(--v2-st-guarantee-bg); color: var(--v2-st-guarantee); }
html.crm-v2 .status-transferred, html.crm-v2 .crm-status--transferred{ background: var(--v2-st-transfer-bg); color: var(--v2-st-transfer); }
html.crm-v2 .status-rejected,    html.crm-v2 .crm-status--rejected,
html.crm-v2 .status-cancelled,   html.crm-v2 .crm-status--cancelled{ background: var(--v2-st-refusal-bg); color: var(--v2-st-refusal); }
html.crm-v2 .status.status-click:hover{ filter: brightness(0.97); box-shadow: inset 0 0 0 1px currentColor; }
html.crm-v2 .status.status-click:focus{ box-shadow: var(--v2-focus); }
html.crm-v2 .status-menu{ border: 1px solid var(--v2-line); border-radius: 10px; box-shadow: var(--v2-shadow-pop); padding: 6px; }
html.crm-v2 .status-menu__item{ border: 0; border-radius: 8px; min-height: 40px; }
html.crm-v2 .status-menu__item:hover{ background: var(--v2-hover); }
html.crm-v2 .status-menu.status-menu--sheet{ border-radius: 14px; }

/* ───────────────────────── Список заявок (index.html) ───────────────────────── */
html.crm-v2 body:has(#requests-table) h1{
  margin: 0;
  padding: 28px 32px 0;
  font-size: 28px;
}
/* Оранжевый ключ перед h1 — общий старый декор form_styles.css / minimal_table.css (других h1::before нет). */
html.crm-v2 h1::before{ display: none; }

html.crm-v2 .orders-toolbar{
  margin: 18px 32px 16px;
  padding: 12px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  box-shadow: none;
}
html.crm-v2 .orders-toolbar .view-toggle{ margin-bottom: 12px; gap: 12px; }
html.crm-v2 .seg,
html.crm-v2 .orders-toolbar .seg{
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--v2-ground);
  border: 0;
  border-radius: 11px;
  box-shadow: none;
}
html.crm-v2 .seg button,
html.crm-v2 .orders-toolbar .seg button{
  min-height: 36px;
  min-width: 104px;
  padding: 0 16px;
  border-radius: 9px;
  font-weight: 500;
  font-size: 14px;
  color: var(--v2-muted);
}
html.crm-v2 .seg button:hover{ color: var(--v2-ink); }
html.crm-v2 .seg button.active{
  background: var(--v2-surface);
  color: var(--v2-ink);
  box-shadow: 0 1px 2px rgba(21, 23, 28, 0.12);
}
html.crm-v2 .orders-toolbar .density{
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--v2-muted);
  font-weight: 500;
  font-size: 13px;
}
html.crm-v2 .density select,
html.crm-v2 .orders-toolbar .density select{
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 10px;
  font-weight: 500;
  color: var(--v2-ink);
}
html.crm-v2 .search-label{ color: var(--v2-muted); font-weight: 500; font-size: 13px; }
html.crm-v2 #search-phone,
html.crm-v2 .orders-toolbar input[type="tel"],
html.crm-v2 .orders-toolbar input[type="search"],
html.crm-v2 .orders-toolbar input[type="text"]{
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--v2-line-strong);
  border-radius: 10px;
  background: var(--v2-surface);
  font-size: 15px;
  color: var(--v2-ink);
  box-shadow: none;
}
html.crm-v2 #search-phone:focus{ border-color: var(--v2-accent); box-shadow: var(--v2-focus); outline: none; }

html.crm-v2 .btn-add-request{
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--v2-accent);
  color: #FFFFFF;
  font-weight: 500;
  font-size: 14px;
  box-shadow: none;
}
html.crm-v2 .btn-add-request:hover{ background: var(--v2-accent-hover); transform: none; box-shadow: none; }
html.crm-v2 .btn-add-request.is-open{ background: var(--v2-surface); color: var(--v2-ink); border: 1px solid var(--v2-line-strong); box-shadow: none; }
html.crm-v2 #btn-quick-calc{
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 10px;
  background: var(--v2-surface);
  color: var(--v2-ink);
  font-weight: 500;
  box-shadow: none;
}
html.crm-v2 #btn-quick-calc:hover{ background: var(--v2-ground); }

/* Таблица заявок */
html.crm-v2 .table-wrapper{
  width: auto;
  margin: 0 32px 16px;
  padding: 0;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
}
html.crm-v2 #requests-table thead th{
  background: var(--v2-surface-2);
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--v2-line);
}
html.crm-v2 #requests-table td{
  border-bottom: 1px solid var(--v2-row);
  font-size: 14px;
  vertical-align: middle;
  padding-top: 12px;
  padding-bottom: 12px;
}
html.crm-v2 #requests-table tbody tr:hover td{ background: var(--v2-hover); }
/* С боковым меню таблица уже на 232px: «Статус» и «Телефон» шире за счёт «Работы». */
html.crm-v2 #requests-table col:nth-child(5){ width: 19% !important; }
html.crm-v2 #requests-table col:nth-child(7){ width: 9.5% !important; }
html.crm-v2 #requests-table col:nth-child(8){ width: 9% !important; }
html.crm-v2 #requests-table tr.group-header td{
  background: var(--v2-surface-2);
  color: var(--v2-ink);
  font-family: var(--v2-mono);
  font-size: 13px;
  font-weight: 600;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--v2-line);
}
html.crm-v2 #requests-table tr.group-header:hover td{ background: var(--v2-surface-2); }
html.crm-v2 #requests-table .status{ min-height: 22px; padding: 0 7px; font-size: 11.5px; }
html.crm-v2 #requests-table .status::before{ display: none; }
html.crm-v2 #requests-table td[data-label="Действия"] .btn-edit,
html.crm-v2 #requests-table td[data-label="Действия"] .btn-delete,
html.crm-v2 #requests-table td[data-label="Действия"] .btn-restore,
html.crm-v2 #requests-table td[data-label="Действия"] .btn-chat,
html.crm-v2 #requests-table td[data-label="Действия"] .btn-copy{
  width: 30px;
  min-width: 30px;
  height: 30px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line-strong);
  color: var(--v2-ink-2);
  box-shadow: none;
}
html.crm-v2 #requests-table td[data-label="Действия"] .btn-edit:hover,
html.crm-v2 #requests-table td[data-label="Действия"] .btn-chat:hover,
html.crm-v2 #requests-table td[data-label="Действия"] .btn-copy:hover{ background: var(--v2-hover); color: var(--v2-accent); }
html.crm-v2 #requests-table td[data-label="Действия"] .btn-delete{ color: var(--v2-danger); }
html.crm-v2 #requests-table td[data-label="Действия"] .btn-delete:hover{ background: var(--v2-st-overdue-bg); border-color: #F0C4BF; }
html.crm-v2 #requests-table td[data-label="Время"],
html.crm-v2 #requests-table td[data-label="Дата"],
html.crm-v2 #requests-table td[data-label="№ заявки"],
html.crm-v2 #requests-table td[data-label="Оплата"],
html.crm-v2 #requests-table td[data-label="Телефон"]{ font-family: var(--v2-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* Карточки заявок */
html.crm-v2 .cards-date-block{ padding: 0 32px 8px; margin-top: 20px; }
html.crm-v2 .cards-date-title{
  margin: 0 0 12px;
  padding: 10px 2px;
  background: var(--v2-ground);
  color: var(--v2-ink);
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--v2-line);
  font-size: 15px;
  font-weight: 600;
}
html.crm-v2 .cards-date-title i{ color: var(--v2-muted); opacity: 1; }
html.crm-v2 .day-stat-chip{
  min-height: 22px;
  padding: 0 8px;
  border: 0;
  background: var(--v2-surface);
  color: var(--v2-ink-2);
  font-family: var(--v2-mono);
  font-size: 12px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--v2-line);
}
html.crm-v2 .day-stat-new{ background: var(--v2-st-new-bg); color: var(--v2-st-new); box-shadow: none; }
html.crm-v2 .day-stat-progress{ background: var(--v2-st-progress-bg); color: var(--v2-st-progress); box-shadow: none; }
html.crm-v2 .day-stat-overdue{ background: var(--v2-st-overdue-bg); color: var(--v2-st-overdue); box-shadow: none; }
html.crm-v2 .day-toggle-btn{
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  background: var(--v2-surface);
  color: var(--v2-ink);
  font-size: 13px;
  font-weight: 500;
}
html.crm-v2 .day-toggle-btn:hover{ background: var(--v2-hover); }

/* «На сегодня заявок пока нет» в карточном виде: в старых стилях блок без оформления, прилипал к краю. */
html.crm-v2 .cards-empty{
  margin: 18px var(--gap, 16px) 0;
  padding: 18px 16px;
  border: 1px dashed var(--v2-line-strong);
  border-radius: 14px;
  background: var(--v2-surface);
  color: var(--v2-muted);
  font-size: 14px;
  text-align: center;
}

html.crm-v2 .order-card{
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  box-shadow: none;
  padding: 14px 16px;
}
html.crm-v2 .order-card.hint-new,
html.crm-v2 .order-card.hint-in_progress,
html.crm-v2 .order-card.hint-overdue{ box-shadow: none; }
html.crm-v2 .order-card.hint-new::before,
html.crm-v2 .order-card.hint-in_progress::before,
html.crm-v2 .order-card.hint-overdue::before{ background: none; }
html.crm-v2 .order-card.hint-new::after,
html.crm-v2 .order-card.hint-in_progress::after,
html.crm-v2 .order-card.hint-overdue::after{
  left: 0;
  right: auto;
  top: 14px;
  bottom: 14px;
  width: 3px;
  height: auto;
  border-radius: 0 3px 3px 0;
}
html.crm-v2 .order-card.hint-new::after{ background: var(--v2-st-new); }
html.crm-v2 .order-card.hint-in_progress::after{ background: #D98A00; }
html.crm-v2 .order-card.hint-overdue::after{ background: var(--v2-st-overdue); }
html.crm-v2 .order-card.collapsed{ padding: 12px 16px; }

html.crm-v2 .req-num,
html.crm-v2 .time-badge,
html.crm-v2 .date-badge{
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 8px;
  border: 0;
}
html.crm-v2 .req-num{ background: var(--v2-ground); color: var(--v2-ink); }
html.crm-v2 .time-badge{ background: var(--v2-ink); color: #FFFFFF; }
html.crm-v2 .time-badge i{ opacity: 0.7; }
html.crm-v2 .date-badge{ background: var(--v2-ground); color: var(--v2-ink-2); }
html.crm-v2 .addr-badge,
html.crm-v2 .phone-badge,
html.crm-v2 .master-badge,
html.crm-v2 .operator-badge{
  border: 0;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
  background: var(--v2-ground);
  color: var(--v2-ink-2);
}
html.crm-v2 .phone-badge{ font-family: var(--v2-mono); font-variant-numeric: tabular-nums; }
html.crm-v2 .addr-badge{ background: transparent; padding-left: 0; color: var(--v2-ink); }
html.crm-v2 .operator-badge{ background: #F6EFE6; color: #6B3F12; }
html.crm-v2 .order-card .status{ border: 0; }
html.crm-v2 .card-address-compact{
  background: transparent;
  border: 0;
  padding-left: 0;
  color: var(--v2-ink);
  font-weight: 600;
}
html.crm-v2 .card-address-compact i{ color: var(--v2-muted); }
html.crm-v2 .client-link{ background: var(--v2-accent-soft); border: 0; color: var(--v2-accent); font-weight: 500; }
html.crm-v2 .payment-badge{
  background: var(--v2-ground);
  border: 0;
  color: var(--v2-ink);
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
}
html.crm-v2 .inline-field{ background: var(--v2-surface); border: 1px solid var(--v2-line-strong); color: var(--v2-ink); }
html.crm-v2 .btn-copy,
html.crm-v2 .header-icon-btn{
  background: var(--v2-surface);
  border: 1px solid var(--v2-line-strong);
  color: var(--v2-ink-2);
  box-shadow: none;
}
html.crm-v2 .btn-copy:hover,
html.crm-v2 .header-icon-btn:hover{ background: var(--v2-hover); color: var(--v2-ink); }

/* Пагинация */
html.crm-v2 .pagination-bar{
  margin: 12px 32px 32px;
  padding: 10px 12px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  box-shadow: none;
}

/* Форма «Добавить заявку» (index.html, #add-request-form) — карточка под панелью фильтров. */
html.crm-v2 #add-request-form{
  margin: 0 32px 16px;
  padding: 16px;
  gap: 12px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: 14px;
}
html.crm-v2 #add-request-form input:not([type="checkbox"]):not([type="file"]),
html.crm-v2 #add-request-form select,
html.crm-v2 #add-request-form textarea{
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  color: var(--v2-ink);
  font-size: 14px;
}
html.crm-v2 #add-request-form input:focus,
html.crm-v2 #add-request-form select:focus,
html.crm-v2 #add-request-form textarea:focus{
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px var(--v2-accent-soft);
}
html.crm-v2 #add-request-form .request-media-field{
  border: 1px dashed var(--v2-line-strong);
  background: var(--v2-surface-2);
  color: var(--v2-ink-2);
  font-weight: 500;
  font-size: 13px;
}
html.crm-v2 #add-request-form .warranty-label{ color: var(--v2-ink-2); }
html.crm-v2 #add-request-form .warranty-label:hover{ background: var(--v2-hover); border-color: var(--v2-line); }
html.crm-v2 #add-request-form .warranty-label input[type="checkbox"]{ accent-color: var(--v2-accent); }
html.crm-v2 #add-request-form button[type="submit"]{
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--v2-accent);
  box-shadow: none;
  font-size: 14px;
}
html.crm-v2 #add-request-form button[type="submit"]:hover{ background: var(--v2-accent-hover); box-shadow: none; }

@media (max-width: 920px){
  html.crm-v2 body:has(#requests-table) h1{ padding: 18px 16px 0; font-size: 24px; }
  html.crm-v2 .orders-toolbar{ margin: 14px 16px 12px; }
  html.crm-v2 #add-request-form{ margin: 0 16px 12px; padding: 12px; }
  html.crm-v2 .table-wrapper{ margin: 0 16px 12px; }
  html.crm-v2 .cards-date-block{ padding: 0 16px 8px; }
  html.crm-v2 .pagination-bar{ margin: 12px 16px 24px; }
}
/* Телефон, вид «Таблица»: minimal_table.css делает строки блоками, но таблица остаётся
   table-layout: fixed, и строка с датой сжималась до ширины первой колонки (буквы в столбик). */
@media (max-width: 768px){
  html.crm-v2 #requests-table,
  html.crm-v2 #requests-table > tbody{ display: block; width: 100%; }
  html.crm-v2 #requests-table tr.group-header td{ display: block; }
  html.crm-v2 #requests-table td::before{
    color: var(--v2-muted);
    font-family: var(--v2-font);
    font-weight: 500;
    letter-spacing: 0;
  }
}

/* ───────────────────────── Чат по заявке (chat.html) ───────────────────────── */
/* Свои переменные чата (--brand и т.п.) переопределяем только внутри чата. */
html.crm-v2 body:has(> .chat-app){
  --bg: var(--v2-ground);
  --panel: var(--v2-surface);
  --panel-2: var(--v2-surface-2);
  --panel-3: var(--v2-accent-soft);
  --line: var(--v2-line);
  --line-strong: var(--v2-line-strong);
  --text: var(--v2-ink);
  --muted: var(--v2-muted);
  --brand: var(--v2-accent);
  --brand-2: var(--v2-accent-hover);
  --brand-soft: var(--v2-accent-soft);
  --shadow: none;
  --shadow-soft: none;
  font-family: var(--v2-font);
}
html.crm-v2 .chat-app{
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  box-shadow: none;
}
/* Кнопки чата прячутся атрибутом hidden — стили слоя не должны их показывать. */
html.crm-v2 .chat-app [hidden]{ display: none !important; }
html.crm-v2 .chat-app .title{ font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
html.crm-v2 .chat-app .nav a{ display: inline-flex; align-items: center; }
html.crm-v2 .chat-app .nav a,
html.crm-v2 .chat-app .btn-ghost{
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 10px;
  background: var(--v2-surface);
  color: var(--v2-ink);
  font-size: 13px;
  font-weight: 500;
}
html.crm-v2 .chat-app .nav a:hover,
html.crm-v2 .chat-app .btn-ghost:hover{ background: var(--v2-hover); border-color: var(--v2-line-strong); color: var(--v2-ink); }
html.crm-v2 .chat-app .btn-ghost.alt{ background: var(--v2-surface); color: var(--v2-ink); }
html.crm-v2 .chat-app .btn-ghost.danger{ color: var(--v2-danger); }
html.crm-v2 .chat-app #btnWorkCalcToggle{ border-color: var(--v2-accent-past); background: var(--v2-accent-soft); color: var(--v2-accent-hover); }
html.crm-v2 .chat-app .pill{ border-radius: 999px; font-weight: 500; background: var(--v2-surface); border-color: var(--v2-line); color: var(--v2-ink-2); min-width: 0; }
html.crm-v2 .chat-app .pill.online{ background: #E3F4EA; border-color: transparent; color: #17663A; }
html.crm-v2 .chat-app .pill.online .pill-dot{ background: var(--v2-ok); box-shadow: 0 0 0 3px rgba(31, 138, 76, 0.18); }
html.crm-v2 .chat-app .chip{ border: 0; border-radius: 8px; background: var(--v2-ground); color: var(--v2-ink-2); font-weight: 500; }
html.crm-v2 .chat-app a.chip-link{ background: var(--v2-accent-soft); color: var(--v2-accent); font-family: var(--v2-mono); }
html.crm-v2 .chat-app .meta{ color: var(--v2-muted); font-weight: 500; font-family: var(--v2-mono); font-size: 12px; }
html.crm-v2 .chat-app .history{ background: var(--v2-ground); border-color: var(--v2-line); }
html.crm-v2 .chat-app .msg{
  border: 1px solid var(--v2-line);
  border-radius: 4px 14px 14px 14px;
  box-shadow: none;
  font-size: 14px;
}
html.crm-v2 .chat-app .msg.operator{
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  border-radius: 14px 4px 14px 14px;
  box-shadow: none;
}
html.crm-v2 .chat-app .msg.internal{ border-radius: 10px; background: var(--v2-st-progress-bg); border-color: #F0D49A; color: #6B4100; }
html.crm-v2 .chat-app .msg-head{ font-weight: 500; font-size: 12px; }
html.crm-v2 .chat-app .msg-head time,
html.crm-v2 .chat-app .msg-time{ font-family: var(--v2-mono); }
html.crm-v2 .chat-app .msg.selected{ border-color: var(--v2-accent); box-shadow: var(--v2-focus); }
html.crm-v2 .chat-app .msg.selected::after{ background: var(--v2-accent); box-shadow: none; }
html.crm-v2 .chat-app .composer{ border-top-color: var(--v2-line); }
html.crm-v2 .chat-app .btn-send{ border-radius: 10px; background: var(--v2-accent); font-weight: 500; box-shadow: none; }
html.crm-v2 .chat-app .btn-send:hover{ background: var(--v2-accent-hover); }
html.crm-v2 .chat-app .to-bottom{ background: var(--v2-ink); border-radius: 999px; box-shadow: var(--v2-shadow-pop); }
html.crm-v2 .chat-app .to-bottom.has-new{ background: var(--v2-accent); }

/* ---------- Чат: панель «Расчёт работ» ---------- */
/* Бирюзовая палитра панели → нейтральная поверхность и акцент; «идёт расчёт» и ошибки сохранения не трогаем. */
html.crm-v2 .workcalc-panel{
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  background: var(--v2-ground);
  padding: 10px;
}
html.crm-v2 .workcalc-summary,
html.crm-v2 .workcalc-summary:after{ color: var(--v2-ink); }
html.crm-v2 .workcalc-summary{ font-size: 13px; font-weight: 600; }
html.crm-v2 .workcalc-head{ border-top-color: var(--v2-line); }
html.crm-v2 .workcalc-step{
  border: 1px solid var(--v2-line);
  border-radius: 12px;
  background: var(--v2-surface);
  padding: 12px;
}
html.crm-v2 .workcalc-step-num{
  border: 0;
  border-radius: 6px;
  background: var(--v2-ink);
  color: #fff;
  font-family: var(--v2-mono);
  font-weight: 600;
}
html.crm-v2 .workcalc-step-title{ font-size: 13px; font-weight: 600; color: var(--v2-ink); }
html.crm-v2 .workcalc-step textarea,
html.crm-v2 .workcalc-history{
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  color: var(--v2-ink);
  font-size: 13px;
}
html.crm-v2 .workcalc-step textarea:focus,
html.crm-v2 .workcalc-history:focus{
  outline: none;
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px var(--v2-accent-soft);
}
html.crm-v2 .workcalc-step textarea[readonly]{ background: var(--v2-surface-2); color: var(--v2-ink-2); }
html.crm-v2 .workcalc-actions button,
html.crm-v2 .workcalc-item-editor-actions button,
html.crm-v2 .workcalc-negotiated-actions button,
html.crm-v2 .workcalc-close{
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  background: var(--v2-surface);
  color: var(--v2-ink);
  font-size: 12px;
  font-weight: 500;
}
html.crm-v2 .workcalc-actions button{ min-height: 32px; padding: 0 12px; }
html.crm-v2 .workcalc-actions button:hover,
html.crm-v2 .workcalc-item-editor-actions button:hover,
html.crm-v2 .workcalc-negotiated-actions button:hover,
html.crm-v2 .workcalc-close:hover{ background: var(--v2-hover); }
html.crm-v2 .workcalc-actions button.is-primary,
html.crm-v2 .workcalc-negotiated-actions .is-primary{
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  color: #fff;
}
html.crm-v2 .workcalc-actions button.is-primary:hover,
html.crm-v2 .workcalc-negotiated-actions .is-primary:hover{ background: var(--v2-accent-hover); }
html.crm-v2 .workcalc-close.has-news{ border-color: #E9B44C; background: #FFF6E5; color: #8A5300; }
html.crm-v2 .workcalc-help,
html.crm-v2 .workcalc-versions{
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  background: var(--v2-surface);
  color: var(--v2-ink-2);
}
html.crm-v2 .workcalc-help summary,
html.crm-v2 .workcalc-versions > summary{ color: var(--v2-ink); font-weight: 600; }
html.crm-v2 .workcalc-status:not(.pending){
  border: 1px solid var(--v2-line);
  background: var(--v2-surface);
  color: var(--v2-muted);
}
html.crm-v2 .workcalc-autosave-state:not([data-state]),
html.crm-v2 .workcalc-autosave-state[data-state="idle"]{ color: var(--v2-muted); }
html.crm-v2 .workcalc-autosave-state[data-state="saved"]{ color: var(--v2-ok); }
html.crm-v2 .workcalc-final-summary-row.is-total strong{ color: var(--v2-ink); font-family: var(--v2-mono); }

/* ---------- Формы заявки (edit_request.html и другие .form-card) ---------- */
html.crm-v2 .form-card{
  max-width: 880px;
  margin: 24px auto;
  padding: 24px 28px;
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  box-shadow: none;
}
html.crm-v2 .form-card h1{
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
}
html.crm-v2 .creator-badge{
  background: var(--v2-accent-soft);
  color: var(--v2-accent);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
}
html.crm-v2 .order-details{ flex-wrap: wrap; gap: 8px; }
html.crm-v2 .order-details .detail{
  background: var(--v2-surface-2);
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  color: var(--v2-ink-2);
  font-size: 13px;
}
html.crm-v2 .order-details .detail a{ color: var(--v2-accent); font-family: var(--v2-mono); }
html.crm-v2 .form-card label,
html.crm-v2 .form-card .warranty-label,
html.crm-v2 .form-group label{
  color: var(--v2-ink-2);
  font-size: 12.5px;
  font-weight: 500;
}
html.crm-v2 .form-card input[type="text"],
html.crm-v2 .form-card input[type="tel"],
html.crm-v2 .form-card input[type="number"],
html.crm-v2 .form-card input[type="date"],
html.crm-v2 .form-card input[type="time"],
html.crm-v2 .form-card select,
html.crm-v2 .form-card textarea{
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  background: var(--v2-surface);
  color: var(--v2-ink);
  font-size: 14px;
}
html.crm-v2 .form-card input:focus,
html.crm-v2 .form-card select:focus,
html.crm-v2 .form-card textarea:focus{
  outline: none;
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px var(--v2-accent-soft);
}
html.crm-v2 .form-card .hint{ color: var(--v2-muted); }
html.crm-v2 .request-media-panel{
  border: 1px dashed var(--v2-line-strong);
  border-radius: 12px;
  background: var(--v2-surface-2);
}
html.crm-v2 .request-media-head{ color: var(--v2-ink); font-weight: 600; }
html.crm-v2 .request-media-upload input[type="file"]{ border: 1px dashed var(--v2-line-strong); border-radius: 8px; }
html.crm-v2 .request-media-chip{ border-color: var(--v2-line-strong); color: var(--v2-ink-2); }
html.crm-v2 .request-media-chip button{ background: var(--v2-row); color: var(--v2-ink-2); }

/* ---------- Вход (login.html) ---------- */
html.crm-v2 body:has(> .login-container){ font-family: var(--v2-font); background: var(--v2-ground); }
html.crm-v2 .login-container{
  max-width: 380px;
  padding: 32px 28px 24px;
  border: 1px solid var(--v2-line);
  border-radius: 16px;
  box-shadow: none;
}
html.crm-v2 .login-container .branding{
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--v2-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}
/* Эмодзи-ключ → тот же знак, что в боковой панели. */
html.crm-v2 .login-container .branding-icon{
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 10px;
  font-size: 0;
  flex: 0 0 auto;
  background: var(--v2-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
html.crm-v2 .login-container h2{
  text-align: left;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
  color: var(--v2-ink);
}
html.crm-v2 .login-container label{ color: var(--v2-ink-2); font-size: 12.5px; font-weight: 500; margin-bottom: 6px; }
html.crm-v2 .login-container input{
  min-height: 44px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  background: var(--v2-surface);
  color: var(--v2-ink);
  font: inherit;
  font-size: 14px;
}
html.crm-v2 .login-container input:focus{ border-color: var(--v2-accent); box-shadow: 0 0 0 3px var(--v2-accent-soft); }
html.crm-v2 .login-container button{
  min-height: 44px;
  margin-top: 6px;
  border-radius: 10px;
  background: var(--v2-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
html.crm-v2 .login-container button:hover{ background: var(--v2-accent-hover); }
html.crm-v2 .login-container .error{
  padding: 8px 12px;
  border-radius: 8px;
  background: #FDE4E1;
  color: #A3241A;
  text-align: left;
}
html.crm-v2 .login-container a{ color: var(--v2-muted); font-size: 13px; }

/* ---------- Цифры: главное меню, финансы, зарплаты, кабинеты ---------- */
/* .mono в старых страницах — только табличные цифры Inter; в новом виде деньги и счётчики моноширинные. */
html.crm-v2 .mono,
html.crm-v2 .metric-value{
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
html.crm-v2 .metric-value{ font-weight: 600; }

/* ---------- Кабинет мастера (master_cabinet.html) ---------- */
/* Страница со своими :root-переменными; переопределяем их на body кабинета (.wrap > .head есть только тут).
   --muted темнее общего: мастера читают кабинет с телефона на улице (контраст ~7:1, как было). */
html.crm-v2 body:has(> .wrap > .head){
  --bg: var(--v2-ground);
  --bg2: var(--v2-ground);
  --card: var(--v2-surface);
  --text: var(--v2-ink);
  --muted: #4E535C;
  --line: var(--v2-line);
  --brand: var(--v2-accent);
  --brand-soft: var(--v2-accent-soft);
  --danger: var(--v2-danger);
  --chip: var(--v2-surface-2);
  --shadow: none;
  background: var(--v2-ground);
  font-size: 15px;
}
html.crm-v2 .wrap:has(> .head) .head{
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--v2-line);
  box-shadow: none;
}
html.crm-v2 .wrap:has(> .head) .title{ font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
html.crm-v2 .wrap:has(> .head) .card h2{ font-size: 17px; font-weight: 600; margin-bottom: 12px; }
html.crm-v2 .wrap:has(> .head) :is(.refresh-btn, .retry-btn, .pager-btn, .order-action){
  border: 1px solid var(--v2-line-strong);
  background: var(--v2-surface);
  color: var(--v2-ink);
  font-weight: 600;
  border-radius: 10px;
}
html.crm-v2 .wrap:has(> .head) :is(.refresh-btn, .retry-btn, .pager-btn, .order-action):hover{
  background: var(--v2-hover);
  color: var(--v2-ink);
}
html.crm-v2 .wrap:has(> .head) .order-action[href^="tel:"]{
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  color: #FFFFFF;
}
html.crm-v2 .wrap:has(> .head) .order-action[href^="tel:"]:hover{ background: var(--v2-accent-hover); }
html.crm-v2 .wrap:has(> .head) .logout-btn{
  border-color: #F3C9C4;
  background: #FDF1EF;
  font-weight: 600;
  border-radius: 10px;
}
/* Периоды — сегменты: неактивные нейтральные, выбранный тёмный. */
html.crm-v2 .wrap:has(> .head) .period-btn{
  border: 1px solid var(--v2-line-strong);
  background: var(--v2-surface);
  color: var(--v2-ink-2);
  font-weight: 500;
  border-radius: 10px;
}
html.crm-v2 .wrap:has(> .head) .period-btn:hover{ background: var(--v2-hover); }
html.crm-v2 .wrap:has(> .head) .period-btn.active{
  border-color: var(--v2-ink);
  background: var(--v2-ink);
  color: #FFFFFF;
  font-weight: 600;
}
html.crm-v2 .wrap:has(> .head) :is(.pill, .order-time){
  background: var(--v2-surface-2);
  border-color: var(--v2-line);
  color: var(--v2-ink-2);
}
html.crm-v2 .wrap:has(> .head) .order-time{ font-family: var(--v2-mono); font-variant-numeric: tabular-nums; }
html.crm-v2 .wrap:has(> .head) :is(.order, .entry, .day-card){
  background: var(--v2-surface);
  border-color: var(--v2-line);
}
html.crm-v2 .wrap:has(> .head) .day-card{ background: var(--v2-surface-2); }
html.crm-v2 .wrap:has(> .head) .empty{ background: var(--v2-surface-2); border-color: var(--v2-line-strong); }
html.crm-v2 .wrap:has(> .head) :is(.summary, .money){ border-top-color: var(--v2-line-strong); }
/* .money в кабинете — блок с подписями: моноширинные только суммы (.money-val). */
html.crm-v2 .wrap:has(> .head) .money{ font-family: var(--v2-font); }
html.crm-v2 .wrap:has(> .head) :is(.guarantee-group, .pager){ border-top-color: var(--v2-row); }
html.crm-v2 .wrap:has(> .head) .money-row.bonus{ color: var(--v2-ok); }
html.crm-v2 .wrap:has(> .head) :is(.money-val, .period-total b){
  font-family: var(--v2-mono);
  letter-spacing: -0.02em;
}
html.crm-v2 .wrap:has(> .head) .period-total{ border-color: var(--v2-accent-past); font-weight: 600; }
html.crm-v2 .wrap:has(> .head) .money-row.money-total{ font-weight: 700; }
html.crm-v2 .wrap:has(> .head) .shortcut-input{ background: var(--v2-surface-2); border-color: var(--v2-line-strong); }

/* ---------- Чат мастера с администратором (master_direct_chat.html) ---------- */
/* Свои :root-переменные страницы — переопределяем на её body. --muted тёмный, как было (~7:1). */
html.crm-v2 body:has(> .chat-shell){
  --bg: var(--v2-ground);
  --surface: var(--v2-surface);
  --surface-soft: var(--v2-surface-2);
  --text: var(--v2-ink);
  --muted: #4E535C;
  --line: var(--v2-line);
  --accent: var(--v2-accent);
  --accent-strong: var(--v2-accent-hover);
  --accent-soft: var(--v2-accent-soft);
  --danger: var(--v2-danger);
  --shadow: none;
}
html.crm-v2 .chat-shell .chat-title h1{ font-size: 18px; font-weight: 600; letter-spacing: -0.005em; }
html.crm-v2 .chat-shell .bubble{ border-radius: 12px; border-color: var(--v2-line); }
html.crm-v2 .chat-shell .bubble-row.master .bubble{ border-color: var(--v2-accent-past); }
html.crm-v2 .chat-shell :is(.att, .day-note, .empty-state){ border-color: var(--v2-line); border-radius: 10px; }
html.crm-v2 .chat-shell :is(.icon-btn, #messageText, .file-item){ border-color: var(--v2-line-strong); border-radius: 10px; }
html.crm-v2 .chat-shell .icon-btn.primary{ border-color: var(--v2-accent); }
html.crm-v2 .chat-shell #messageText:focus{ border-color: var(--v2-accent); box-shadow: var(--v2-focus); }
html.crm-v2 .chat-shell .voice-panel{ border-color: var(--v2-accent-past); background: var(--v2-accent-soft); border-radius: 10px; }
html.crm-v2 .chat-shell .voice-info{ color: var(--v2-accent-hover); }
@media (min-width: 760px){
  html.crm-v2 .chat-shell{ border-radius: 14px; }
}

/* ---------- Кабинет оператора (operator_cabinet_stats.html) ---------- */
html.crm-v2 body:has(> .wrap > .card > .periods){
  --accent: var(--v2-accent);
  --border: var(--v2-line);
  --text: var(--v2-ink);
  --muted: #4E535C;
}
html.crm-v2 .card:has(> .periods){ box-shadow: none; padding: 28px; }
html.crm-v2 .card:has(> .periods) .title{ font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
html.crm-v2 .card:has(> .periods) .period-btn{
  border: 1px solid var(--v2-line-strong);
  background: var(--v2-surface);
  color: var(--v2-ink-2);
  font-weight: 500;
  border-radius: 10px;
}
html.crm-v2 .card:has(> .periods) .period-btn:hover{ background: var(--v2-hover); }
html.crm-v2 .card:has(> .periods) .period-btn.active{
  border-color: var(--v2-ink);
  background: var(--v2-ink);
  color: #FFFFFF;
  font-weight: 600;
}
html.crm-v2 .card:has(> .periods) .count{
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--v2-ink);
}
html.crm-v2 .card:has(> .periods) .totals .cell{ background: var(--v2-surface-2); }
html.crm-v2 .card:has(> .periods) .totals .v{
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--v2-ink);
}
html.crm-v2 .card:has(> .periods) .go-crm-btn{
  border: 1px solid var(--v2-accent);
  background: var(--v2-accent);
  color: #FFFFFF;
  font-weight: 600;
}
html.crm-v2 .card:has(> .periods) .go-crm-btn:hover{ background: var(--v2-accent-hover); border-color: var(--v2-accent-hover); }

/* ───────────────────────── Карточки заявок: цветная полоса статуса ───────────────────────── */
/* Полоса слева у каждой карточки по её статусу (data-status ставит index_page.js). */
html.crm-v2 .order-card{ --v2-card-stripe: transparent; position: relative; overflow: hidden; }
html.crm-v2 .order-card[data-status="new"]{ --v2-card-stripe: var(--v2-accent); }
html.crm-v2 .order-card[data-status="in_progress"]{ --v2-card-stripe: #D98A00; }
html.crm-v2 .order-card[data-status="overdue"]{ --v2-card-stripe: var(--v2-danger); }
html.crm-v2 .order-card[data-status="completed"]{ --v2-card-stripe: var(--v2-ok); }
html.crm-v2 .order-card[data-status="guarantee"]{ --v2-card-stripe: #7B4BD1; }
html.crm-v2 .order-card[data-status="transferred"]{ --v2-card-stripe: #2A8A99; }
html.crm-v2 .order-card[data-status="rejected"],
html.crm-v2 .order-card[data-status="cancelled"]{ --v2-card-stripe: #A3A8B0; }
html.crm-v2 .order-card.hint-new::after,
html.crm-v2 .order-card.hint-in_progress::after,
html.crm-v2 .order-card.hint-overdue::after{ display: none; }
html.crm-v2 .order-card::before,
html.crm-v2 .order-card.hint-new::before,
html.crm-v2 .order-card.hint-in_progress::before,
html.crm-v2 .order-card.hint-overdue::before{
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  width: 4px;
  height: auto;
  border-radius: 0;
  background: var(--v2-card-stripe);
  pointer-events: none;
}

/* ───────────────────────── Телефон: раскладка приложения ───────────────────────── */
/* Нижняя панель разделов (admin_nav.html, #crmTabbar) — только на узком экране. */
html.crm-v2 .crm-tabbar{ display: none; }

@media (max-width: 920px){
  html.crm-v2{ --v2-tabbar-h: 62px; }
  html.crm-v2 .crm-tabbar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    height: calc(var(--v2-tabbar-h) + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--v2-line);
    box-shadow: 0 -6px 20px rgba(21, 23, 28, 0.06);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    font-family: var(--v2-font);
  }
  html.crm-v2 .crm-tabbar__item{
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--v2-muted);
    font: 500 11px/1.1 var(--v2-font);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.crm-v2 .crm-tabbar__item::before{
    content: "";
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--v2-ico) center / 22px 22px no-repeat;
    mask: var(--v2-ico) center / 22px 22px no-repeat;
  }
  html.crm-v2 .crm-tabbar__item > span{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Пять пунктов (админ) на узком телефоне: крупный «Размер текста» обрезал «Главное»/«Финансы» —
     подпись растёт, но не шире своей колонки (3.8vw: «Финансы» влезает и на 320 px). */
  html.crm-v2 .crm-tabbar:has(> .crm-tabbar__item ~ .crm-tabbar__item ~ .crm-tabbar__item ~ .crm-tabbar__item ~ .crm-tabbar__item) .crm-tabbar__item > span{
    font-size: min(calc(11px * var(--crm-text, 1)), 3.8vw);
  }
  /* Шесть пунктов (админ + «Набрать»): колонка уже — подпись мельче, чтобы «Финансы» влезали на 320 px. */
  html.crm-v2 .crm-tabbar:has(> .crm-tabbar__item ~ .crm-tabbar__item ~ .crm-tabbar__item ~ .crm-tabbar__item ~ .crm-tabbar__item ~ .crm-tabbar__item) .crm-tabbar__item > span{
    font-size: min(calc(11px * var(--crm-text, 1)), 3.2vw);
  }
  html.crm-v2 .crm-tabbar__item:hover{ color: var(--v2-ink); text-decoration: none; }
  html.crm-v2 .crm-tabbar__item.active{ color: var(--v2-accent); background: var(--v2-accent-soft); font-weight: 600; }
  html.crm-v2 .crm-tabbar__badge{
    position: absolute;
    top: 1px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 2px solid var(--v2-surface);
    background: var(--v2-danger);
    color: #FFFFFF;
    font: 700 10px/14px var(--v2-mono);
    text-align: center;
  }
  html.crm-v2 .crm-tabbar__badge[hidden]{ display: none; }

  /* Место под панель внизу каждой страницы с меню. */
  html.crm-v2.crm-has-tabbar body{ padding-bottom: calc(var(--v2-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px)); }

  /* Шапка: только бренд, «☰ Меню» переехало в панель снизу. */
  html.crm-v2.crm-has-tabbar .crm-nav-toggle{ display: none; }
  html.crm-v2 .crm-topbar__inner{ min-height: 52px; box-sizing: border-box; }

  /* Полное меню — лист над панелью, пункты в две колонки; при крупном «Размере текста» — в одну. */
  html.crm-v2.crm-has-tabbar .crm-topbar.is-open::after{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1028;
    background: rgba(21, 23, 28, 0.42);
  }
  /* Затемнение и лист живут внутри шапки (sticky, z-index 1100) и перекрывали панель:
     кнопку «Меню» нельзя было нажать второй раз. Класс ставит скрипт панели (admin_nav.html). */
  html.crm-v2.crm-tabbar-menu-open .crm-tabbar{ z-index: 1101; }
  html.crm-v2.crm-has-tabbar .crm-topbar.is-open .crm-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--v2-tabbar-h) + env(safe-area-inset-bottom, 0px));
    z-index: 1029;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    align-content: start;
    gap: 4px;
    width: auto;
    max-height: calc(100dvh - var(--v2-tabbar-h) - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 12px 12px;
    border: 0;
    border-radius: 20px 20px 0 0;
    background: var(--v2-side);
    box-shadow: 0 -12px 32px rgba(21, 23, 28, 0.3);
  }
  html.crm-v2.crm-has-tabbar .crm-nav__group{ display: contents; }
  html.crm-v2.crm-has-tabbar .crm-nav__caption{ display: none; }
  html.crm-v2.crm-has-tabbar .crm-nav__item{
    min-height: 48px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--v2-side-card);
    font-size: 14px;
    min-width: 0;
  }
  html.crm-v2.crm-has-tabbar .crm-nav__item.active{ background: var(--v2-side-active); box-shadow: inset 0 0 0 1px rgba(143, 166, 255, 0.45); }
  html.crm-v2.crm-has-tabbar .crm-nav__more{ grid-column: 1 / -1; display: block; width: 100%; }
  html.crm-v2.crm-has-tabbar .crm-nav__more > summary{ width: 100%; box-sizing: border-box; }
  html.crm-v2.crm-has-tabbar .crm-nav__more-menu{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 4px;
    margin-top: 4px;
    padding: 0;
    background: transparent;
  }
  html.crm-v2.crm-has-tabbar .crm-nav__more-menu .crm-nav__group{ display: contents; }
  html.crm-v2.crm-has-tabbar .crm-nav__user{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--v2-side-card);
  }
  html.crm-v2.crm-has-tabbar .crm-nav__avatar{
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #3A3F48;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
  }
  html.crm-v2.crm-has-tabbar .crm-nav__who{ min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  html.crm-v2.crm-has-tabbar .crm-nav__who b{ color: #FFFFFF; font-weight: 500; }
  html.crm-v2.crm-has-tabbar .crm-nav__who span{ color: var(--v2-side-muted); font-size: 12px; }
}

/* Телефон боком (2026-10-21): панель снизу брала ~70px из 320–430 — значок рядом с подписью, одна строка. */
@media (max-width: 920px) and (max-height: 500px) and (orientation: landscape){
  html.crm-v2{ --v2-tabbar-h: 44px; }
  html.crm-v2 .crm-tabbar{ padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  /* Ширина по содержимому: пункту со счётчиком нужно больше места. */
  html.crm-v2 .crm-tabbar__item{ flex: 1 1 auto; flex-direction: row; gap: 6px; }
  html.crm-v2 .crm-tabbar__item::before{ flex: none; }
  /* Счётчик — после подписи, а не поверх неё. */
  html.crm-v2 .crm-tabbar__badge{ position: static; flex: none; border: 0; }
}

/* Телефон, список заявок: заголовок, поиск и фильтры без «коробки», кнопка «+» внизу. */
@media (max-width: 920px){
  html.crm-v2 body:has(#requests-table) h1{ padding: 16px 16px 0; font-size: 26px; letter-spacing: -0.02em; }
  html.crm-v2 .orders-toolbar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 8px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  html.crm-v2 .orders-toolbar .view-toggle{ order: 2; flex: 0 0 auto; margin: 0; }
  html.crm-v2 .orders-toolbar .seg{ background: #E7E9E3; }
  html.crm-v2 .orders-toolbar .seg button{ min-width: 0; min-height: 34px; padding: 0 14px; font-size: 13px; }
  html.crm-v2 .orders-toolbar .density{ display: none; }
  html.crm-v2 .orders-toolbar .search-block{
    order: 1;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
  }
  html.crm-v2 .orders-toolbar .search-label{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.crm-v2 .orders-toolbar .search-field{ flex: 1 1 100%; width: 100%; margin: 0; }
  html.crm-v2 .orders-toolbar #search-phone{
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    border-color: var(--v2-line);
    background: var(--v2-surface);
    font-size: 16px;
    box-shadow: 0 1px 2px rgba(21, 23, 28, 0.05);
  }
  html.crm-v2 .orders-toolbar .search-state{ flex: 1 1 auto; margin: 0; color: var(--v2-muted); font-size: 12px; }
  /* «Показывать все заявки» — чип-переключатель: тёмный, когда включён. */
  html.crm-v2 .orders-toolbar #show-all-wrapper{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--v2-line-strong);
    border-radius: 999px;
    background: var(--v2-surface);
    color: var(--v2-ink-2);
    cursor: pointer;
  }
  html.crm-v2 .orders-toolbar #show-all-wrapper input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  html.crm-v2 .orders-toolbar #show-all-wrapper .toggle-slider{ display: none; }
  html.crm-v2 .orders-toolbar #show-all-wrapper .show-all-toggle-text{ margin: 0; font-size: 13px; font-weight: 500; color: inherit; }
  html.crm-v2 .orders-toolbar #show-all-wrapper:has(input:checked){ background: var(--v2-ink); border-color: var(--v2-ink); color: #FFFFFF; }
  html.crm-v2 .orders-toolbar #show-all-wrapper:has(input:focus-visible){ box-shadow: var(--v2-focus); }
  html.crm-v2 .orders-toolbar .masters-shift-indicator{ order: 4; flex: 1 1 100%; margin: 0; }
  html.crm-v2 .orders-toolbar #btn-quick-calc{
    order: 3;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
  }
  html.crm-v2 .orders-toolbar .live-status{ order: 5; flex: 1 1 100%; }

  /* «Добавить заявку» — круглая кнопка «+» над панелью разделов; открытая форма — «×». */
  html.crm-v2 .orders-toolbar #toggle-add-request{
    --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    position: fixed;
    right: 16px;
    bottom: calc(var(--v2-tabbar-h, 0px) + 14px + env(safe-area-inset-bottom, 0px));
    z-index: 1031;
    order: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--v2-accent);
    color: #FFFFFF;
    font-size: 0;
    line-height: 0;
    box-shadow: 0 10px 24px rgba(36, 71, 214, 0.38), 0 2px 6px rgba(21, 23, 28, 0.18);
  }
  html.crm-v2 .orders-toolbar #toggle-add-request::before{
    content: "";
    width: 28px;
    height: 28px;
    background-color: currentColor;
    -webkit-mask: var(--v2-ico) center / 28px 28px no-repeat;
    mask: var(--v2-ico) center / 28px 28px no-repeat;
    transition: transform 0.18s ease;
  }
  html.crm-v2 .orders-toolbar #toggle-add-request.is-open{ background: var(--v2-ink); color: #FFFFFF; border: 0; box-shadow: 0 10px 24px rgba(21, 23, 28, 0.32); }
  html.crm-v2 .orders-toolbar #toggle-add-request.is-open::before{ transform: rotate(45deg); }
  html.crm-v2 #add-request-form{ border-radius: 18px; box-shadow: 0 1px 2px rgba(21, 23, 28, 0.05); }

  /* Дни: крупная дата, счётчики справа. */
  html.crm-v2 .cards-date-block{ margin-top: 14px; padding: 0 12px 4px; }
  html.crm-v2 .cards-date-title{
    margin: 0 4px 10px;
    padding: 4px 0 8px;
    border-bottom: 0;
    background: transparent;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  html.crm-v2 .cards-grid{ gap: 10px; }

  /* Карточка заявки — блок «Карточка заявки v2» в конце файла (новая разметка, все ширины). */

  html.crm-v2 .cards-empty{ margin: 16px; padding: 28px 18px; border-radius: 18px; }

  /* Страницы: подписи одной серой строкой, кнопки круглые, без рамки-карточки. */
  html.crm-v2 .pagination-bar{ justify-content: center; margin: 8px 12px 16px; padding: 4px 0; background: transparent; border: 0; }
  html.crm-v2 .pagination-left{ width: 100%; justify-content: center; gap: 6px; flex-wrap: wrap; }
  html.crm-v2 .pagination-left .page-info,
  html.crm-v2 .pagination-left .total-info{ padding: 0; border: 0; background: transparent; color: var(--v2-muted); font-size: 12px; font-weight: 500; }
  html.crm-v2 .pagination-left .page-info + .total-info::before{ content: "·"; margin-right: 6px; }
  html.crm-v2 .pagination-controls{ justify-content: center; gap: 6px; }
  html.crm-v2 .pagination-controls .pg-btn,
  html.crm-v2 .pagination-controls .page-number{ height: 40px; min-width: 40px; padding: 0 10px; border-radius: 999px; font-size: 15px; }
}

/* Страницы списка — общий вид для всех ширин. */
html.crm-v2 .pagination-controls .pg-btn,
html.crm-v2 .pagination-controls .page-number{
  border: 1px solid var(--v2-line);
  background: var(--v2-surface);
  color: var(--v2-ink);
  font-weight: 600;
  box-shadow: none;
}
html.crm-v2 .pagination-controls .pg-btn:hover,
html.crm-v2 .pagination-controls .page-number:hover{ background: var(--v2-hover); border-color: var(--v2-line-strong); }
html.crm-v2 .pagination-controls .page-number.active,
html.crm-v2 .pagination-controls .page-number.active:hover{ background: var(--v2-accent); border-color: var(--v2-accent); color: #FFFFFF; text-shadow: none; box-shadow: none; }
html.crm-v2 .page-info,
html.crm-v2 .total-info{ border-color: var(--v2-line); background: var(--v2-surface-2); color: var(--v2-ink-2); font-size: 13px; }

/* ===== Инбокс (inbox.html): вкладки-переключатель, список чатов с кружком мастера,
   пузыри сообщений и поле ввода в новом виде. Разметку и id не меняем — только стили. ===== */
html.crm-v2 .inbox-shell{ padding: 0; background: transparent; border: 0; box-shadow: none; }
html.crm-v2 .inbox-tabs{
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  background: var(--v2-surface-2);
  border: 1px solid var(--v2-line);
  border-radius: 999px;
}
html.crm-v2 .inbox-tab-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--v2-ink-2);
  font-size: 14px;
  font-weight: 600;
}
html.crm-v2 .inbox-tab-btn.active{ background: var(--v2-ink); color: #FFFFFF; }
html.crm-v2 .inbox-shell .badge{ border-radius: 999px; font-weight: 700; }
html.crm-v2 .inbox-table-wrap,
html.crm-v2 .direct-list,
html.crm-v2 .direct-chat{ background: var(--v2-surface); border-color: var(--v2-line); border-radius: 16px; }
html.crm-v2 .inbox-table thead th{ background: var(--v2-surface-2); border-bottom-color: var(--v2-line); color: var(--v2-muted); font-size: 12px; font-weight: 600; }
html.crm-v2 .inbox-row:hover{ background: var(--v2-hover); }
html.crm-v2 .meta-pill{ background: var(--v2-surface-2); border-color: var(--v2-line); color: var(--v2-ink-2); }
html.crm-v2 .inbox-new-hint{ background: var(--v2-accent-soft); border-color: transparent; color: var(--v2-accent); border-radius: 999px; }
html.crm-v2 #q,
html.crm-v2 #direct-q{ min-height: 42px; padding: 8px 14px; border: 1px solid var(--v2-line-strong); border-radius: 12px; font-size: 15px; }
html.crm-v2 #q:focus,
html.crm-v2 #direct-q:focus{ border-color: var(--v2-accent); box-shadow: 0 0 0 3px var(--v2-accent-soft); }

/* Список чатов: кружок мастера слева, имя и время сверху, последнее сообщение ниже. */
html.crm-v2 .direct-list-head{ padding: 12px; background: var(--v2-surface); border-bottom-color: var(--v2-row); box-shadow: none; }
html.crm-v2 .direct-thread{
  position: relative;
  min-height: 68px;
  padding: 12px 16px 12px 66px;
  background: var(--v2-surface);
  border-bottom: 1px solid var(--v2-row);
  color: var(--v2-ink);
}
html.crm-v2 .direct-thread::before,
html.crm-v2 .direct-thread::after{
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
}
html.crm-v2 .direct-thread::before{ left: 14px; width: 40px; height: 40px; background: var(--v2-surface-2); }
html.crm-v2 .direct-thread::after{
  left: 24px;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: var(--v2-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.crm-v2 .direct-thread:hover{ background: var(--v2-hover); }
html.crm-v2 .direct-thread.active{ background: var(--v2-accent-soft); }
html.crm-v2 .direct-thread.active::before,
html.crm-v2 .direct-thread:has(.badge)::before{ background: var(--v2-accent); }
html.crm-v2 .direct-thread.active::after,
html.crm-v2 .direct-thread:has(.badge)::after{ background: #FFFFFF; }
html.crm-v2 .direct-thread .fw-semibold{ font-size: 15px; }
html.crm-v2 .direct-thread:has(.badge) .direct-last{ color: var(--v2-ink) !important; font-weight: 600; }

/* Переписка */
html.crm-v2 .direct-chat-head{ padding: 10px 12px; background: var(--v2-surface); border-bottom-color: var(--v2-row); box-shadow: none; }
html.crm-v2 .direct-back-btn{ border-color: var(--v2-line); border-radius: 50%; background: var(--v2-surface); color: var(--v2-ink); font-weight: 600; }
html.crm-v2 .direct-note{ background: var(--v2-surface-2); border-bottom-color: var(--v2-row); }
html.crm-v2 .direct-note-toggle{ color: var(--v2-ink); font-weight: 700; }
html.crm-v2 .direct-messages{ background: var(--v2-ground); }
html.crm-v2 .direct-bubble{
  padding: 10px 14px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: 18px 18px 18px 6px;
  box-shadow: none;
  color: var(--v2-ink);
  font-size: 14px;
}
html.crm-v2 .direct-bubble.admin{ background: var(--v2-accent-soft); border-color: transparent; border-radius: 18px 18px 6px 18px; }
html.crm-v2 .direct-bubble-head{ font-size: 11px; }
html.crm-v2 .direct-pin-btn{ color: var(--v2-muted); font-size: 11px; font-weight: 600; text-decoration: none; }
html.crm-v2 .direct-pin-btn:hover{ color: var(--v2-accent); }
html.crm-v2 .direct-att{ background: var(--v2-surface); border-color: var(--v2-line); border-radius: 12px; }
html.crm-v2 .direct-att-link{ color: var(--v2-accent); font-weight: 600; }

/* Поле ввода: текст на всю ширину, ниже «скрепка»-кнопка выбора файлов и «Отправить». */
html.crm-v2 .direct-composer{ background: var(--v2-surface); border-top-color: var(--v2-row); box-shadow: none; }
html.crm-v2 #direct-text{ min-height: 44px; padding: 10px 14px; border: 1px solid var(--v2-line-strong); border-radius: 14px; font-size: 15px; }
html.crm-v2 #direct-text:focus{ border-color: var(--v2-accent); box-shadow: 0 0 0 3px var(--v2-accent-soft); }
html.crm-v2 #direct-files{ flex: 1 1 160px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--v2-muted); font-size: 12px; box-shadow: none; }
html.crm-v2 #direct-files::file-selector-button{
  min-height: 36px;
  margin-right: 10px;
  padding: 0 14px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: var(--v2-surface-2);
  color: var(--v2-ink);
  font-weight: 600;
}
html.crm-v2 .direct-composer button[type="submit"]{
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--v2-accent);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
}
html.crm-v2 .direct-composer button[type="submit"]:hover{ background: var(--v2-accent-hover); }

@media (max-width: 700px){
  html.crm-v2 .inbox-tabs{ margin-left: 10px; }
  html.crm-v2 .inbox-table-wrap,
  html.crm-v2 .direct-list,
  html.crm-v2 .direct-chat{ border-radius: 0; }
  html.crm-v2 body.direct-mobile-chat-open .direct-pane,
  html.crm-v2 .direct-layout{ background: var(--v2-ground); }
  html.crm-v2 .direct-bubble{ max-width: 86%; }
  /* Строка «Выбрать файлы» + «Отправить» в одну линию: файл слева, отправка справа. */
  html.crm-v2 #direct-files{ flex: 1 1 0; }
}

/* ===== Вкладки страниц (crm_ui.css .crm-ui-tabs): «таблетки» вместо подчёркивания,
   полоса прокрутки под ними скрыта (листаются пальцем, как раньше). ===== */
html.crm-v2 .crm-ui-tabs{ gap: 6px; padding-bottom: 2px; border-bottom: 0; scrollbar-width: none; }
html.crm-v2 .crm-ui-tabs::-webkit-scrollbar{ display: none; }
html.crm-v2 .crm-ui-tabs .nav-link,
html.crm-v2 .crm-ui-tabs > button,
html.crm-v2 .crm-ui-tabs > a,
html.crm-v2 .crm-ui-tabs .crm-ui-tab{
  min-height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: var(--v2-surface);
  color: var(--v2-ink-2);
  font-size: 13px;
}
html.crm-v2 .crm-ui-tabs .nav-link:hover,
html.crm-v2 .crm-ui-tabs > button:hover,
html.crm-v2 .crm-ui-tabs > a:hover,
html.crm-v2 .crm-ui-tabs .crm-ui-tab:hover{ background: var(--v2-hover); border-color: var(--v2-line-strong); color: var(--v2-ink); }
html.crm-v2 .crm-ui-tabs .nav-link.active,
html.crm-v2 .crm-ui-tabs .crm-tab-btn.is-active,
html.crm-v2 .crm-ui-tabs .crm-ui-tab.is-active,
html.crm-v2 .crm-ui-tabs [role="tab"][aria-selected="true"]{ background: var(--v2-ink); border-color: var(--v2-ink); color: #FFFFFF; }

/* ===== Главное меню (dashboard.html, .desk): цифры — отдельные плитки, блоки — карточки. ===== */
html.crm-v2 .desk{
  --desk-accent: var(--v2-accent);
  --desk-ink: var(--v2-ink);
  --desk-muted: var(--v2-muted);
  --desk-line: var(--v2-line);
  --desk-surface: var(--v2-surface);
}
html.crm-v2 .desk-button{ min-height: 40px; padding: 0 16px; border: 1px solid var(--v2-line); border-radius: 999px; background: var(--v2-surface); font-weight: 600; }
html.crm-v2 .desk-button:hover{ background: var(--v2-hover); }
html.crm-v2 .desk select,
html.crm-v2 .desk input{ min-height: 40px; border-color: var(--v2-line-strong); border-radius: 10px; }
html.crm-v2 .desk .metrics{ gap: 10px; background: transparent; border-block: 0; }
html.crm-v2 .desk .metric{ position: relative; overflow: hidden; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 16px; }
html.crm-v2 .desk .metric-label{ color: var(--v2-muted); font-weight: 600; }
html.crm-v2 .desk .metric-attention::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--v2-danger); }
html.crm-v2 .desk .metric-attention .metric-value{ color: var(--v2-danger); }
html.crm-v2 .desk .workspace{ gap: 10px; margin-top: 10px; background: transparent; border-bottom: 0; }
html.crm-v2 .desk .attention,
html.crm-v2 .desk .shift-context,
html.crm-v2 .desk .trend-section{ background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 16px; }
html.crm-v2 .desk .finance-summary{ overflow: hidden; border: 1px solid var(--v2-line); border-radius: 16px; }
html.crm-v2 .desk .table-scroll{ border: 1px solid var(--v2-line); border-radius: 12px; }
html.crm-v2 .desk th{ background: var(--v2-surface-2); color: var(--v2-muted); }
html.crm-v2 .desk .task-row{ border-top-color: var(--v2-row); }
html.crm-v2 .desk .task-row > a{ padding: 6px 12px; border-radius: 999px; background: var(--v2-accent-soft); font-weight: 600; }
html.crm-v2 .desk .task-row > a:hover{ text-decoration: none; }
html.crm-v2 .desk .notice{ border-radius: 12px; }
@media (max-width: 700px){
  html.crm-v2 .desk .metric{ padding: 14px; }
  html.crm-v2 .desk .metric-value{ font-size: 28px; }
  html.crm-v2 .desk .shift-context{ border-top: 1px solid var(--v2-line); }
  html.crm-v2 .desk .profit-total{ border-bottom-color: var(--v2-row); }
}

/* ===== Чат на телефоне: во весь экран без рамки-карточки, ссылки сверху — компактные «таблетки»
   (слой выше делает их 36px и 13px, поверх мобильных размеров chat.html — возвращаем компактность). ===== */
@media (max-width: 760px){
  html.crm-v2 body:has(> .chat-app){ --chat-shell-offset: 0px; }
  html.crm-v2 .chat-app{ width: 100vw; margin: 0; border: 0; border-radius: 0; }
  html.crm-v2 .chat-app .head{ padding: 8px 10px 8px; }
  html.crm-v2 .chat-app .nav{ max-width: calc(100% - 92px); gap: 6px; }
  html.crm-v2 .chat-app .nav a{ flex: 0 0 auto; min-height: 32px; padding: 0 11px; border-color: var(--v2-line); border-radius: 999px; font-size: 12px; }
  html.crm-v2 .chat-app .pill{ padding: 4px 9px; font-size: 11px; }
  html.crm-v2 .chat-app .title{ font-size: 18px; }
  html.crm-v2 .chat-app .btn-ghost{ min-height: 34px; padding: 0 11px; border-color: var(--v2-line); border-radius: 999px; font-size: 12px; }
  html.crm-v2 .chat-app .main{ padding: 8px 10px; }
}

/* Телефон боком (2026-10-21): окно диалога было узким — шапка и кнопки чата компактнее, чат на весь экран.
   Ниже правил «чат на телефоне», иначе на 568–760px они возвращают крупные размеры. */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape){
  html.crm-v2 .chat-app{ border: 0; border-radius: 0; }
  html.crm-v2 .chat-app .head{ padding: 4px 8px; }
  html.crm-v2 .chat-app .nav{ max-width: none; gap: 4px; }
  html.crm-v2 .chat-app .title{ font-size: 15px; }
  html.crm-v2 .chat-app .nav a,
  html.crm-v2 .chat-app .btn-ghost{ min-height: 28px; padding: 0 10px; font-size: 12px; }
  html.crm-v2 .chat-app .pill{ padding: 6px; font-size: 0; }
  html.crm-v2 .chat-app .main{ padding: 4px 8px; }
}
/* Маленький телефон боком: «← Назад» повторяет жест «назад», без него шапка короче на строку. */
@media (max-width: 700px) and (max-height: 500px) and (orientation: landscape){
  html.crm-v2 .chat-app .nav a[href^="javascript:history.back"]{ display: none; }
}

/* ===== Кабинет мастера, новый вид: тёмная шапка с именем (белый на почти чёрном — читается на улице),
   вкладки периода — таблетки без полосы прокрутки (листаются пальцем, как раньше), карточки скруглённые. ===== */
html.crm-v2 .wrap:has(> .head) .head{
  padding: 16px;
  background: var(--v2-ink);
  border-color: var(--v2-ink);
  border-radius: 18px;
  color: #FFFFFF;
}
html.crm-v2 .wrap:has(> .head) .head .title{ color: #FFFFFF; }
html.crm-v2 .wrap:has(> .head) .head .sub{ color: rgba(255, 255, 255, 0.78); }
html.crm-v2 .wrap:has(> .head) .head .sub b{ color: #FFFFFF; }
html.crm-v2 .wrap:has(> .head) .head .updated-at{ color: rgba(255, 255, 255, 0.72); }
html.crm-v2 .wrap:has(> .head) .head .refresh-btn{ border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: #FFFFFF; }
html.crm-v2 .wrap:has(> .head) .head .refresh-btn:hover{ background: rgba(255, 255, 255, 0.2); color: #FFFFFF; }
html.crm-v2 .wrap:has(> .head) .card{ border-color: var(--v2-line); border-radius: 18px; }
html.crm-v2 .wrap:has(> .head) .toolbar{ gap: 6px; scrollbar-width: none; }
html.crm-v2 .wrap:has(> .head) .toolbar::-webkit-scrollbar{ display: none; }
html.crm-v2 .wrap:has(> .head) :is(.period-btn, .pill, .order-time, .refresh-btn, .retry-btn, .pager-btn, .order-action, .logout-btn){ border-radius: 999px; }
html.crm-v2 .wrap:has(> .head) :is(.order, .entry){ border-radius: 14px; }
html.crm-v2 .wrap:has(> .head) .empty{ border-radius: 12px; }
@media (max-width: 640px){
  /* Имя слева, «Обновить» справа в одну строку. */
  html.crm-v2 .wrap:has(> .head) .head{ flex-wrap: nowrap; align-items: flex-start; }
  html.crm-v2 .wrap:has(> .head) .head-actions{ flex: 0 0 auto; align-items: flex-end; }
  html.crm-v2 .wrap:has(> .head) .head .updated-at{ text-align: right; font-size: 12px; }
  html.crm-v2 .wrap:has(> .head) .head .refresh-btn{ min-height: 40px; padding: 0 14px; font-size: 14px; }
}

/* ===== Плашка «Подгружаем день…» (#loading-indicator, index_page.js _setLoader) =====
   Догрузки дней идут цепочкой, и плашка мигала внизу слева поверх нижней панели.
   Теперь она по центру над панелью и появляется, только если загрузка длится дольше ~0,45 с:
   класс force-show снимается после каждого дня, анимация перезапускается — короткие загрузки не видны.
   Кликабельность в ошибке сохраняется (там кнопка «Повторить загрузку» или ссылка «Войти»). */
html.crm-v2 #loading-indicator{
  border-color: var(--v2-line);
  border-radius: 12px;
  box-shadow: none;
  color: var(--v2-ink-2);
  font-size: 13px;
  font-weight: 600;
}
html.crm-v2 #loading-indicator.force-show{
  left: 50%;
  right: auto;
  bottom: 18px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: var(--v2-shadow-pop);
  text-align: center;
  transform: translateX(-50%);
  animation: crm-v2-loader-in 0.2s ease 0.45s both;
}
html.crm-v2 #loading-indicator.force-show :is(a, button){
  margin-left: 8px;
  padding: 2px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--v2-accent);
  color: #FFFFFF;
  font: inherit;
  text-decoration: none;
}
@keyframes crm-v2-loader-in{
  from{ opacity: 0; visibility: hidden; }
  to{ opacity: 1; visibility: visible; }
}
@media (max-width: 920px){
  /* Телефон: между левым краем и круглой кнопкой «+» (58 px справа), на одной высоте с ней. */
  html.crm-v2 #loading-indicator.force-show{
    left: 16px;
    right: 84px;
    bottom: calc(var(--v2-tabbar-h) + 25px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 100px);
    margin: 0 auto;
    transform: none;
  }
}

/* Кнопка «Ещё» у длинных работ/комментариев — тихая «таблетка», а не синий прямоугольник. */
html.crm-v2 .toggle-text{
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--v2-accent-soft);
  color: var(--v2-accent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
html.crm-v2 .toggle-text:hover{ background: var(--v2-accent); color: #FFFFFF; }

/* Телефон, вид «Таблица»: ячейка — строка «подпись … значение». minimal_table.css разносит
   детей по краям (space-between): при трёх и больше элементах подпись и кнопка «Ещё» сжимались
   в столбик («Раб/оты»), телефон и кнопки действий разъезжались по всей ширине.
   Подпись слева не сжимается, всё остальное — одной группой справа. */
@media (max-width: 768px){
  html.crm-v2 #requests-table tbody tr:not(.group-header) td{
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    text-align: right;
  }
  html.crm-v2 #requests-table tbody tr:not(.group-header) td::before{
    flex: 0 0 auto;
    margin: 0 auto 0 0;
    white-space: nowrap;
    text-align: left;
  }
  html.crm-v2 #requests-table tbody tr:not(.group-header) td > *{ min-width: 0; }
  /* Работы и комментарий — длинный текст: подпись сверху, текст на всю ширину под ней. */
  html.crm-v2 #requests-table tbody tr:not(.group-header) td[data-label="Работы"]{ display: block; text-align: left; }
  html.crm-v2 #requests-table tbody tr:not(.group-header) td[data-label="Работы"]::before{ margin: 0 0 6px; }
  html.crm-v2 #requests-table tbody tr:not(.group-header) td[data-label="Работы"] .toggle-text{ margin-top: 6px; }
}

/* ===== Развёрнутая карточка заявки: адрес, работы, комментарий, мастер/оплата, кнопки =====
   Действует на всех ширинах: карточка на компьютере (~360px в сетке) устроена так же, как на телефоне.
   В index_page.css правило «одна колонка на ≤700px» для .card-meta стоит раньше базового
   «две колонки» и проигрывает ему — бейджи оператора/автора висели посередине карточки.
   Здесь: мастер и оплата — по строке на всю ширину, бейджи — вместе последней строкой. */
html.crm-v2 .order-card .card-collapsible .section-title{ margin: 14px 0 6px; color: var(--v2-muted); font-size: 12px; font-weight: 600; }
html.crm-v2 .order-card :is(.card-works, .card-comment) .collapsible-text{
  padding: 10px 12px;
  background: var(--v2-surface-2);
  border-radius: 12px;
  color: var(--v2-ink);
  font-size: 14px;
}
html.crm-v2 .order-card .card-comment .comment-panel{ margin-top: 0; font-style: normal; color: var(--v2-ink-2); }
html.crm-v2 .order-card .card-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
html.crm-v2 .order-card .card-meta > .meta-line:has(.inline-field){ flex: 1 1 100%; min-width: 0; }
html.crm-v2 .order-card .card-meta > .meta-line:has(.inline-payment){ order: 1; }
html.crm-v2 .order-card .card-meta > :not(.meta-line:has(.inline-field)){ order: 2; }
html.crm-v2 .order-card .card-meta .meta-line > i{ flex: 0 0 18px; color: var(--v2-muted); text-align: center; opacity: 1; }
html.crm-v2 .order-card .card-meta .inline-field{ min-height: 32px; padding: 5px 12px; border: 1px dashed var(--v2-line-strong); border-radius: 10px; background: var(--v2-surface); }
html.crm-v2 .order-card .card-meta .creator-badge{ margin: 0; }
html.crm-v2 .order-card .actions-row{ gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--v2-row); }
html.crm-v2 .order-card .actions-row :is(.btn-edit, .btn-delete, .btn-restore, .btn-copy){
  height: 38px;
  min-height: 38px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 999px;
  background: var(--v2-surface);
  color: var(--v2-ink-2);
  box-shadow: none;
}
html.crm-v2 .order-card .actions-row :is(.btn-edit, .btn-delete){ width: 38px; min-width: 38px; padding: 0; }
html.crm-v2 .order-card .actions-row .btn-delete{ color: var(--v2-danger); }
html.crm-v2 .order-card .actions-row :is(.btn-restore, .btn-copy){ padding: 0 14px; font-size: 13px; font-weight: 600; }

/* Поля ввода берут шрифт интерфейса: по умолчанию браузер ставит Arial, а в textarea — моноширинный. */
html.crm-v2 :is(input, select, textarea){ font-family: inherit; }
/* «Выбрать файлы» (фото к заявке и др.) — «таблетка», как в инбоксе, вместо системной кнопки. */
html.crm-v2 input[type="file"]{ color: var(--v2-muted); font-size: 13px; }
html.crm-v2 input[type="file"]::file-selector-button{
  min-height: 36px;
  margin-right: 10px;
  padding: 0 14px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: var(--v2-surface-2);
  color: var(--v2-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ===== Форма редактирования заявки (edit_request.html, в т.ч. в окне поверх списка) =====
   Одиночные поля (телефон, источник, статус, мастер…) стояли без отступа и слипались
   со следующей подписью. На телефоне форма была зажата полями 52 px в две колонки:
   адрес обрезался, «Работы» и «Комментарий» — узкие столбики, крестик окна закрывал заголовок. */
html.crm-v2 .form-card > .form-group{ margin-bottom: 16px; }
@media (max-width: 768px){
  html.crm-v2 .form-card{ margin: 12px; padding: 16px; }
  html.crm-v2 body[data-embed-mode="1"]{ padding: 0; }
  html.crm-v2 body[data-embed-mode="1"] .form-card{ margin: 0; border: 0; border-radius: 0; }
  html.crm-v2 body[data-embed-mode="1"] .form-card + .form-card{ border-top: 8px solid var(--v2-ground); }
  /* Справа место под крестик окна (#close-edit, 44 px). */
  html.crm-v2 body[data-embed-mode="1"] .form-card h1{ padding-right: 48px; }
  html.crm-v2 .form-card h1{ flex-wrap: wrap; gap: 8px; font-size: 20px; line-height: 1.25; }
  html.crm-v2 .form-card .form-row{ flex-direction: column; gap: 16px; }
  html.crm-v2 .form-card .form-group{ min-width: 0; }
  html.crm-v2 .form-card .form-group :is(input, select, textarea){ width: 100%; max-width: 100%; }
  html.crm-v2 .form-card textarea{ min-height: 88px; }
  html.crm-v2 .order-details{ margin-bottom: 18px; }
  html.crm-v2 .request-media-upload input[type="file"]{ width: 100%; max-width: 100%; }
}
/* Кнопки «Развернуть чат» / «Открыть отдельно»: на этой странице нет Bootstrap, а v2 задаёт
   только цвет рамки — кнопки выглядели как текст. */
html.crm-v2 .chat-card-actions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* Карточки таблиц на телефоне (mobile_workspace.css, table[data-mobile-cards]): у ячейки
   с кнопками подпись пустая, а сетка «подпись | значение» сдвигала кнопку в правую половину.
   Такая ячейка — на всю ширину, одиночная кнопка тоже. */
@media (max-width: 700px){
  html.crm-v2 table[data-mobile-cards] tr > td[data-mobile-label=""]{ display: block; }
  html.crm-v2 table[data-mobile-cards] tr > td[data-mobile-label=""]::before{ display: none; }
  html.crm-v2 table[data-mobile-cards] tr > td[data-mobile-label=""] > .btn:only-child{ width: 100%; }
}

/* ===== Карточка заявки v2 (index_page.js __renderOrderCardV2 → .order-card.v2-card) =====
   Свёрнутая: «время · № … статус», адрес (до 2 строк), телефон (+ повтор, «Клиент»),
   чипы мастера и оплаты; справа от чипов — «Чат», бейджи и иконки шапки. Статус — полоса
   слева (.order-card[data-status]) и «таблетка». Без мастера — чип «Без мастера»: жёлтый
   у новых/просроченных/в работе, серый пунктир у остальных. Чип оплаты скрыт без суммы.
   data-empty чипов обновляет __v2EnsureChipObserver по изменениям текста. Раскрытая часть —
   блок «Развёрнутая карточка заявки» выше. Одинаково для телефона и сетки на компьютере. */
html.crm-v2 .order-card.v2-card,
html.crm-v2 .order-card.v2-card.collapsed{ gap: 0; padding: 14px 14px 12px 18px; }
html.crm-v2 .order-card.v2-card .card-header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
}
html.crm-v2 .order-card.v2-card .ch-left{
  order: 1;
  flex: 1 1 calc(100% - 24px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
html.crm-v2 .order-card.v2-card .card-header > .chevron{ order: 2; flex: 0 0 16px; align-self: flex-start; margin-top: 5px; color: var(--v2-muted); text-align: center; opacity: 1; }
html.crm-v2 .order-card.v2-card .v2-card-chips{ order: 3; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
html.crm-v2 .order-card.v2-card .ch-right{
  order: 4;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}
html.crm-v2 .order-card.v2-card .ch-right > *{ width: auto; }
html.crm-v2 .order-card.v2-card .header-comm-slot:not(:has(*)){ display: none; }

/* Строка 1: время (моно, жирно), номер, статус справа. */
html.crm-v2 .order-card.v2-card .card-topline{ display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; width: 100%; min-width: 0; }
html.crm-v2 .order-card.v2-card .card-topline-left{ display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
html.crm-v2 .order-card.v2-card .time-badge{
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--v2-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
html.crm-v2 .order-card.v2-card .time-badge:empty{ display: none; }
/* Номер — шрифтом интерфейса: в моноширинном Cascadia Mono знак «№» похож на стрелку. */
html.crm-v2 .order-card.v2-card .req-num{ padding: 0; border-radius: 0; background: transparent; color: var(--v2-muted); font-family: inherit; font-size: 12px; font-weight: 500; }
html.crm-v2 .order-card.v2-card .card-topline .status{ flex: 0 0 auto; margin-left: auto; min-height: 26px; padding: 0 10px; font-size: 12px; }

/* Строка 2: адрес — до двух строк в свёрнутой карточке, целиком в раскрытой. */
html.crm-v2 .order-card.v2-card .card-address-compact{ display: block; width: 100%; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
html.crm-v2 .order-card.v2-card .card-address-compact .ellipsis{
  display: -webkit-box;
  max-width: none;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
html.crm-v2 .order-card.v2-card:not(.collapsed) .card-address-compact .ellipsis{ display: block; -webkit-line-clamp: none; }

/* Строка 3: телефон приглушённо, рядом повтор и «Клиент». */
html.crm-v2 .order-card.v2-card .card-contact-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; }
html.crm-v2 .order-card.v2-card .card-contact-row .phone-badge{ display: inline; width: auto; min-height: 0; padding: 0; background: transparent; color: var(--v2-muted); font-size: 13px; font-weight: 500; }
html.crm-v2 .order-card.v2-card .card-contact-row .repeat-badge{ margin: 0; font-size: 11.5px; }
html.crm-v2 .order-card.v2-card .card-contact-row .client-link{ display: inline-flex; align-items: center; min-height: 22px; margin: 0; padding: 0 9px; border-radius: 999px; font-size: 12px; }

/* Строка 4: чипы мастера и оплаты. */
html.crm-v2 .order-card.v2-card .v2-chip{
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  height: 30px;
  min-height: 0;
  padding: 0 11px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: var(--v2-surface-2);
  color: var(--v2-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 28px;
  cursor: pointer;
}
html.crm-v2 .order-card.v2-card .v2-chip:hover{ background: var(--v2-hover); }
html.crm-v2 .order-card.v2-card .v2-chip-master{ display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
html.crm-v2 .order-card.v2-card .v2-chip-master::before{
  content: "\f007";
  margin-right: 6px;
  color: var(--v2-accent);
  font-family: "Font Awesome 6 Free";
  font-size: 11px;
  font-weight: 900;
}
html.crm-v2 .order-card.v2-card .v2-chip-master[data-empty="1"]:not([data-editing="1"]){
  border-style: dashed;
  border-color: var(--v2-line-strong);
  background: var(--v2-surface);
  color: var(--v2-muted);
  font-size: 0;
}
html.crm-v2 .order-card.v2-card .v2-chip-master[data-empty="1"]:not([data-editing="1"])::before{ color: currentColor; }
html.crm-v2 .order-card.v2-card .v2-chip-master[data-empty="1"]:not([data-editing="1"])::after{ content: "Без мастера"; font-size: 13px; }
html.crm-v2 .order-card.v2-card:is([data-status="new"], [data-status="overdue"], [data-status="in_progress"]) .v2-chip-master[data-empty="1"]:not([data-editing="1"]){
  border-color: #E0A43A;
  background: var(--v2-st-progress-bg);
  color: var(--v2-st-progress);
}
html.crm-v2 .order-card.v2-card .v2-chip-master[data-editing="1"]{ height: auto; padding: 2px; line-height: normal; overflow: visible; }
html.crm-v2 .order-card.v2-card .v2-chip-master[data-editing="1"]::before{ display: none; }
html.crm-v2 .order-card.v2-card .v2-chip-pay{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  width: auto;
  height: auto;
  min-height: 30px;
  padding: 3px 11px;
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
}
html.crm-v2 .order-card.v2-card .v2-chip-pay[data-empty="1"]{ display: none; }
html.crm-v2 .order-card.v2-card .v2-chip-pay .inline-payment{
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.crm-v2 .order-card.v2-card .v2-chip-pay :is(.inline-fee, .inline-warranty){ margin: 0; padding: 0 6px; font-size: 11px; line-height: 18px; }
html.crm-v2 .order-card.v2-card .v2-chip-pay .inline-prepay{ margin: 0; color: var(--v2-muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; }

/* «Чат» с бейджами и иконки шапки — справа от чипов. */
html.crm-v2 .order-card.v2-card .header-chat-row{ display: flex; align-items: center; width: auto; gap: 4px; }
html.crm-v2 .order-card.v2-card .btn-chat.header-chat{
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--v2-ink);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
}
html.crm-v2 .order-card.v2-card .btn-chat.header-chat:hover{ background: var(--v2-ink-2); }
html.crm-v2 .order-card.v2-card .header-icon-row{ display: flex; width: auto; gap: 6px; }
html.crm-v2 .order-card.v2-card .header-icon-row .header-icon-btn{ width: 30px; min-width: 30px; height: 30px; min-height: 30px; border-radius: 50%; }

/* Раскрытая часть: кв/подъезд/этаж, бейджи оператора и автора одной строкой. */
html.crm-v2 .order-card.v2-card:not(.collapsed) .card-collapsible{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v2-row); }
html.crm-v2 .order-card.v2-card .card-main{ display: block; }
html.crm-v2 .order-card.v2-card .apt-line{ display: flex; align-items: center; gap: 8px; color: var(--v2-ink-2); font-size: 14px; }
html.crm-v2 .order-card.v2-card .apt-line i{ flex: 0 0 18px; color: var(--v2-muted); text-align: center; opacity: 1; }
html.crm-v2 .order-card.v2-card .card-meta .v2-card-people{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html.crm-v2 .order-card.v2-card .card-meta .v2-card-people .creator-badge{ margin: 0; }

/* Телефон: крупнее шрифт и цели касания (≥34px). */
@media (max-width: 920px){
  html.crm-v2 .order-card.v2-card{ border-radius: 16px; box-shadow: 0 1px 2px rgba(21, 23, 28, 0.05); }
  html.crm-v2 .order-card.v2-card .time-badge{ font-size: 18px; }
  html.crm-v2 .order-card.v2-card .card-address-compact{ font-size: 16px; }
  html.crm-v2 .order-card.v2-card .v2-chip{ height: 34px; line-height: 32px; }
  html.crm-v2 .order-card.v2-card .v2-chip-pay{ height: auto; min-height: 34px; line-height: 1.2; }
  html.crm-v2 .order-card.v2-card .v2-chip-master[data-editing="1"]{ height: auto; line-height: normal; }
  html.crm-v2 .order-card.v2-card .btn-chat.header-chat{ min-height: 34px; padding: 0 16px; }
  html.crm-v2 .order-card.v2-card .header-icon-row .header-icon-btn{ width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
}

/* ===== Редактирование заявки на весь экран (телефон, до 920 px — там же нижнее меню v2) =====
   Окно со списка заявок (index.html: #edit-modal.edit-modal--full) становится листом на весь
   экран поверх нижнего меню (z-index окна 10001 > .crm-tabbar 1030): сверху полоса 52 px
   «‹ Заявка № N» (#close-edit — кнопка «назад», #edit-modal-title), ниже iframe с формой.
   Внутри iframe (метка html.crm-edit-full — её ставит edit_request.html, только если iframe
   с data-edit-full) кнопки формы — липкая полоса снизу, «Сохранить и закрыть» — главная.
   «Входящие» (inbox.html, те же id без класса и метки) и компьютер (> 920 px) — как раньше. */
html.crm-v2 #edit-modal .edit-modal-title{ display: none; }
@media (max-width: 920px){
  html.crm-v2 #edit-modal.edit-modal--full{
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
    background: var(--v2-surface);
    z-index: 10001;
  }
  html.crm-v2 #edit-modal.edit-modal--full #edit-box{
    box-sizing: border-box;
    width: var(--chat-modal-vw, 100vw);
    max-width: none;
    height: var(--chat-modal-vh, 100dvh);
    max-height: var(--chat-modal-vh, 100dvh);
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: 52px minmax(0, 1fr);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--v2-surface);
    border-radius: 0;
    box-shadow: none;
  }
  html.crm-v2 #edit-modal.edit-modal--full #close-edit{
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: var(--v2-ink);
    background: transparent;
    border-radius: 10px;
    box-shadow: none;
  }
  /* Шеврон «‹» вместо крестика: сам символ × скрыт font-size: 0. */
  html.crm-v2 #edit-modal.edit-modal--full #close-edit::before{
    content: "";
    width: 11px;
    height: 11px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateX(2px) rotate(45deg);
  }
  html.crm-v2 #edit-modal.edit-modal--full #close-edit:hover{ background: var(--v2-ground); color: var(--v2-ink); }
  html.crm-v2 #edit-modal.edit-modal--full #close-edit:focus-visible{ outline: none; box-shadow: var(--v2-focus); }
  html.crm-v2 #edit-modal.edit-modal--full .edit-modal-title{
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    padding-right: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--v2-ink);
  }
  html.crm-v2 #edit-modal.edit-modal--full #edit-box iframe{
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-top: 1px solid var(--v2-line);
    background: var(--v2-ground);
  }

  /* --- Форма внутри iframe --- */
  html.crm-v2.crm-edit-full body[data-embed-mode="1"]{ padding: 0; }
  html.crm-v2.crm-edit-full body[data-embed-mode="1"] .form-card{
    max-width: none;
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 0;
  }
  html.crm-v2.crm-edit-full body[data-embed-mode="1"] .form-card + .form-card{ border-top: 8px solid var(--v2-ground); }
  /* Крестик больше не лежит поверх заголовка — отступ справа под него не нужен. */
  html.crm-v2.crm-edit-full body[data-embed-mode="1"] .form-card h1{ padding-right: 0; }
  html.crm-v2.crm-edit-full body[data-embed-mode="1"] .form-card > .button-group{
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin: 24px -16px -16px;
    padding: 10px 16px;
    background: var(--v2-surface);
    border-top: 1px solid var(--v2-line);
  }
  html.crm-v2.crm-edit-full body[data-embed-mode="1"] .form-card > .button-group .btn{
    min-height: 44px;
    margin: 0;
    padding: 6px 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    /* «Закрыть без сохранения» в половину ширины 375 px не влезает — переносим, не режем. */
    white-space: normal;
    text-align: center;
  }
  html.crm-v2.crm-edit-full body[data-embed-mode="1"] .form-card > .button-group .btn[value="save_close"]{
    grid-column: 1 / -1;
    grid-row: 1;
    background: var(--v2-accent);
    border-color: var(--v2-accent);
    color: #FFFFFF;
  }
  html.crm-v2.crm-edit-full body[data-embed-mode="1"] .form-card > .button-group .btn[value="save_close"]:hover{ background: var(--v2-accent-hover); border-color: var(--v2-accent-hover); }
  html.crm-v2.crm-edit-full body[data-embed-mode="1"] .form-card > .button-group .btn[value="save"]{
    background: var(--v2-surface);
    border-color: var(--v2-line-strong);
    color: var(--v2-ink);
  }
  html.crm-v2.crm-edit-full body[data-embed-mode="1"] .form-card > .button-group .btn[value="save"]:hover{ background: var(--v2-ground); }
  html.crm-v2.crm-edit-full body[data-embed-mode="1"] .form-card > .button-group .btn-outline-danger{
    background: var(--v2-surface);
    border-color: #F0C4BF;
    color: var(--v2-danger);
  }
}

/* ===== Нижний лист «мастер/оплата» (index.html .sheet-actions, index_page.js openEditSheet) =====
   form_styles.css красит текст всех button белым, а у .sheet-btn (index_page.css) белый фон
   без своего цвета текста: «Отмена» была белой на белом, «Сохранить» — белой на светло-голубом. */
html.crm-v2 .sheet-btn{
  border: 1px solid var(--v2-line-strong);
  border-radius: 12px;
  background: var(--v2-surface);
  color: var(--v2-ink);
  box-shadow: none;
  transform: none;
}
html.crm-v2 .sheet-btn:hover:not(:disabled){ background: var(--v2-ground); box-shadow: none; transform: none; }
html.crm-v2 .sheet-btn.primary{ border-color: var(--v2-accent); background: var(--v2-accent); color: #FFFFFF; }
html.crm-v2 .sheet-btn.primary:hover:not(:disabled){ border-color: var(--v2-accent-hover); background: var(--v2-accent-hover); }
html.crm-v2 .sheet-btn:disabled{ opacity: 0.45; cursor: default; }