/*
  Универсальные классы раскладки для часто повторяющихся паттернов страниц.
  Файл специально вынесен отдельно: html_tags.css и base_blocks.css не изменяются.
*/

/* Полная ширина внутри текущего контейнера.
   Полезно для hero/detail-блоков, у которых базовый компонент может иметь max-width. */
.content-width-full,
.block-width-full {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-grid-gap, var(--space-4, 16px));
  min-width: 0;
  max-width: 100%;
}

.grid-2--compact {
  --layout-grid-gap: var(--space-2, 8px);
}

.grid-2--medium {
  --layout-grid-gap: var(--space-3, 12px);
}

.grid-2--comfortable {
  --layout-grid-gap: var(--space-4, 16px);
}

.grid-full,
.layout-full {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .grid-2--stack-mobile {
    grid-template-columns: minmax(0, 1fr);
  }
}

html[data-crm-ui="pwa"] .grid-2--stack-pwa,
body[data-interface-mode="pwa"] .grid-2--stack-pwa {
  grid-template-columns: minmax(0, 1fr);
}

.action-grid {
  display: grid;
  gap: var(--action-grid-gap, var(--space-2, 8px));
  min-width: 0;
  max-width: 100%;
}

.action-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.action-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.action-grid .btn,
.action-grid button,
.action-grid input[type="submit"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.action-grid--touch .btn,
.action-grid--touch button,
.action-grid--touch input[type="submit"] {
  min-height: 44px;
}

html[data-crm-ui="pwa"] .action-grid--touch .btn,
html[data-crm-ui="pwa"] .action-grid--touch button,
html[data-crm-ui="pwa"] .action-grid--touch input[type="submit"],
body[data-interface-mode="pwa"] .action-grid--touch .btn,
body[data-interface-mode="pwa"] .action-grid--touch button,
body[data-interface-mode="pwa"] .action-grid--touch input[type="submit"] {
  min-height: 46px;
}

.action-grid--fill-odd > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .action-grid--stack-mobile {
    grid-template-columns: minmax(0, 1fr);
  }
}

html[data-crm-ui="pwa"] .action-grid--stack-pwa,
body[data-interface-mode="pwa"] .action-grid--stack-pwa {
  grid-template-columns: minmax(0, 1fr);
}

.filter-form {
  display: grid;
  grid-template-columns: repeat(var(--filter-columns, 2), minmax(0, 1fr));
  gap: var(--filter-row-gap, 10px) var(--filter-column-gap, 8px);
  align-items: end;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.filter-form--compact {
  --filter-row-gap: 8px;
  --filter-column-gap: 8px;
}

.filter-form--2 {
  --filter-columns: 2;
}

.filter-form--3 {
  --filter-columns: 3;
}

.filter-form--4 {
  --filter-columns: 4;
}

.filter-form--search {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.filter-form > *,
.filter-form .form-field,
.filter-form .input {
  min-width: 0;
}

.filter-form .form-field {
  width: 100%;
}

.filter-form .input,
.filter-form select,
.filter-form textarea {
  width: 100%;
}

.filter-form .btn,
.filter-form button,
.filter-form input[type="submit"] {
  min-height: 42px;
}

.filter-form__submit,
.filter-form__actions {
  align-self: end;
}

.filter-form--button-full-pwa .filter-form__submit,
html[data-crm-ui="pwa"] .filter-form--button-full-pwa .btn,
html[data-crm-ui="pwa"] .filter-form--button-full-pwa button,
html[data-crm-ui="pwa"] .filter-form--button-full-pwa input[type="submit"],
body[data-interface-mode="pwa"] .filter-form--button-full-pwa .btn,
body[data-interface-mode="pwa"] .filter-form--button-full-pwa button,
body[data-interface-mode="pwa"] .filter-form--button-full-pwa input[type="submit"] {
  width: 100%;
}

html[data-crm-ui="pwa"] .filter-form--button-full-pwa .filter-form__submit,
html[data-crm-ui="pwa"] .filter-form--button-full-pwa > .btn,
html[data-crm-ui="pwa"] .filter-form--button-full-pwa > button,
html[data-crm-ui="pwa"] .filter-form--button-full-pwa > input[type="submit"],
body[data-interface-mode="pwa"] .filter-form--button-full-pwa .filter-form__submit,
body[data-interface-mode="pwa"] .filter-form--button-full-pwa > .btn,
body[data-interface-mode="pwa"] .filter-form--button-full-pwa > button,
body[data-interface-mode="pwa"] .filter-form--button-full-pwa > input[type="submit"] {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  .filter-form--4 {
    --filter-columns: 2;
  }
}

@media (max-width: 620px) {
  .filter-form--3,
  .filter-form--search {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-form--search .filter-form__actions,
  .filter-form--search .filter-form__actions .btn,
  .filter-form--search .btn,
  .filter-form--search button,
  .filter-form--search input[type="submit"] {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .filter-form--2,
  .filter-form--4 {
    --filter-columns: 1;
  }
}

.stats-grid {
  display: grid;
  gap: var(--stats-grid-gap, var(--space-2, 8px));
  min-width: 0;
  max-width: 100%;
}

.stats-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-grid--3-desktop-2-mobile {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-grid .stat,
.stats-grid > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.stats-grid--fill-odd > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .stats-grid--3-desktop-2-mobile,
  .stats-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .stats-grid--2,
  .stats-grid--3,
  .stats-grid--3-desktop-2-mobile,
  .stats-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

html[data-crm-ui="pwa"] .stats-grid--3-desktop-2-mobile,
body[data-interface-mode="pwa"] .stats-grid--3-desktop-2-mobile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chip-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--chip-line-gap, var(--space-2, 8px));
  align-items: center;
  min-width: 0;
}

.chip-line--compact {
  --chip-line-gap: 6px;
}

.chip-line--micro {
  --chip-line-gap: 5px;
}

.chip-line--right {
  justify-content: flex-end;
}

.surface-soft {
  min-width: 0;
  padding: var(--surface-soft-padding, var(--space-3, 12px));
  border: 1px solid var(--app-border, var(--line));
  border-radius: var(--radius-md, 14px);
  background: var(--app-surface-soft, var(--card-soft, rgba(15, 23, 42, .04)));
}

.time-card {
  display: grid;
  grid-template-columns: minmax(76px, .28fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 760px) {
  .time-card--stack-mobile {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Универсальные помощники для настоящих HTML-таблиц, которые должны
   оставаться таблицами в PWA/mobile вместо превращения в карточки. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.table--native-mobile {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  overflow: visible;
}

.table--native-mobile thead {
  display: table-header-group;
}

.table--native-mobile tbody {
  display: table-row-group;
}

.table--native-mobile tr {
  display: table-row;
}

.table--native-mobile th,
.table--native-mobile td {
  display: table-cell;
}

body[data-interface-mode="pwa"] .table--native-mobile,
html[data-crm-ui="pwa"] .table--native-mobile {
  display: table;
}

body[data-interface-mode="pwa"] .table--native-mobile thead,
html[data-crm-ui="pwa"] .table--native-mobile thead {
  display: table-header-group;
}

body[data-interface-mode="pwa"] .table--native-mobile tbody,
html[data-crm-ui="pwa"] .table--native-mobile tbody {
  display: table-row-group;
}

body[data-interface-mode="pwa"] .table--native-mobile tr,
html[data-crm-ui="pwa"] .table--native-mobile tr {
  display: table-row;
}

body[data-interface-mode="pwa"] .table--native-mobile th,
body[data-interface-mode="pwa"] .table--native-mobile td,
html[data-crm-ui="pwa"] .table--native-mobile th,
html[data-crm-ui="pwa"] .table--native-mobile td {
  display: table-cell;
}

body[data-interface-mode="pwa"] .table--native-mobile th::before,
body[data-interface-mode="pwa"] .table--native-mobile td::before,
html[data-crm-ui="pwa"] .table--native-mobile th::before,
html[data-crm-ui="pwa"] .table--native-mobile td::before {
  display: none;
  content: none;
}

.table--middle th,
.table--middle td {
  vertical-align: middle;
}

.table--top th,
.table--top td {
  vertical-align: top;
}

.table--nowrap th,
.table--nowrap td {
  white-space: nowrap;
}

.table--break th,
.table--break td,
.table--break code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table--center-except-first th:not(:first-child),
.table--center-except-first td:not(:first-child) {
  text-align: center;
}

.table--center-except-first th:first-child,
.table--center-except-first td:first-child,
.table--center-except-first tbody th[scope="row"] {
  text-align: left;
}

.table--cells-border th,
.table--cells-border td {
  padding: var(--table-cell-padding, 12px 14px);
  border-bottom: 1px solid var(--app-border, var(--line));
}

.text-break-anywhere,
.code-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}



/* Универсальные поверхности и компоненты выбора */
.stack,
.page-stack {
  display: grid;
  gap: var(--stack-gap, var(--space-4, 16px));
  min-width: 0;
}

.stack--xs { --stack-gap: var(--space-1, 4px); }
.stack--sm { --stack-gap: var(--space-2, 8px); }
.stack--md { --stack-gap: var(--space-3, 12px); }
.stack--lg { --stack-gap: var(--space-5, 20px); }
.stack--xl { --stack-gap: var(--space-6, 24px); }

html[data-crm-ui="pwa"] .page-stack--compact-pwa,
body[data-interface-mode="pwa"] .page-stack--compact-pwa {
  --stack-gap: var(--space-3, 12px);
}

.content-head,
.actions-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--content-head-gap, var(--space-3, 12px));
  min-width: 0;
}

.content-head__main,
.actions-row__main {
  min-width: 0;
}

.content-head__actions,
.actions-row__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
  min-width: 0;
}

.content-head--center,
.actions-row--center {
  align-items: center;
}

.content-head--top,
.actions-row--top {
  align-items: flex-start;
}

.actions-row--right {
  justify-content: flex-end;
}

.actions-row--wrap {
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .content-head--stack-mobile,
  .actions-row--stack-mobile {
    display: grid;
    justify-content: stretch;
  }

  .content-head--stack-mobile .content-head__actions,
  .actions-row--stack-mobile .actions-row__actions {
    justify-content: stretch;
  }
}

.surface,
.surface--card,
.surface--soft,
.surface--inner,
.surface--interactive,
.surface--selected,
.surface--danger,
.surface--warning,
.surface--success,
.surface--info {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--surface-border, var(--border-main, var(--app-border, var(--line))));
  border-radius: var(--surface-radius, var(--radius-lg, 18px));
  background: var(--surface-bg, var(--surface-card, var(--app-surface, var(--card))));
  color: var(--surface-text, var(--text-main, var(--app-text, var(--ink))));
}

.surface,
.surface--card {
  padding: var(--surface-padding, var(--space-4, 16px));
}

.surface--compact {
  --surface-padding: var(--space-3, 12px);
  --surface-radius: var(--radius-md, 14px);
}

.surface--loose {
  --surface-padding: var(--space-5, 20px);
  --surface-radius: var(--radius-xl, 24px);
}

.surface--soft,
.surface--inner {
  --surface-bg: var(--surface-soft, var(--app-surface-soft));
  --surface-radius: var(--radius-md, 14px);
}

.surface--interactive {
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.surface--interactive:hover {
  border-color: color-mix(in srgb, var(--app-accent, var(--accent)) 34%, var(--surface-border, var(--app-border)));
  box-shadow: var(--shadow-sm, 0 8px 20px rgba(15,23,42,.08));
}

.surface--selected {
  --surface-bg: var(--surface-selected, var(--app-accent-soft));
  --surface-border: color-mix(in srgb, var(--app-accent, var(--accent)) 48%, var(--app-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent, var(--accent)) 16%, transparent);
}

.surface--danger { --surface-bg: var(--state-danger-bg); --surface-border: var(--state-danger-border); }
.surface--warning { --surface-bg: var(--state-warning-bg); --surface-border: var(--state-warning-border); }
.surface--success { --surface-bg: var(--state-success-bg); --surface-border: var(--state-success-border); }
.surface--info { --surface-bg: var(--state-info-bg); --surface-border: var(--state-info-border); }

.choice-list {
  display: grid;
  grid-template-columns: repeat(var(--choice-columns, 2), minmax(0, 1fr));
  gap: var(--choice-gap, var(--space-2, 8px));
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice-list--2 { --choice-columns: 2; }
.choice-list--3 { --choice-columns: 3; }
.choice-list--4 { --choice-columns: 4; }
.choice-list--7 { --choice-columns: 7; }
.choice-list--compact { --choice-gap: var(--space-1, 4px); }

.choice-list > li {
  margin: 0;
  min-width: 0;
}

.choice-tile {
  display: flex;
  align-items: flex-start;
  gap: var(--choice-tile-gap, var(--space-2, 8px));
  min-height: var(--choice-tile-min-height, 42px);
  min-width: 0;
  padding: var(--choice-tile-padding, var(--space-3, 12px));
  border: 1px solid var(--choice-tile-border, var(--border-main, var(--app-border)));
  border-radius: var(--choice-tile-radius, var(--radius-md, 14px));
  background: var(--choice-tile-bg, var(--surface-soft, var(--app-surface-soft)));
  color: var(--choice-tile-text, var(--text-main, var(--app-text)));
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.choice-tile--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.choice-tile--compact {
  --choice-tile-padding: var(--space-2, 8px);
  --choice-tile-radius: var(--radius-sm, 10px);
}

.choice-tile--selected,
.choice-tile:has(input:checked) {
  --choice-tile-border: var(--app-accent, var(--accent));
  --choice-tile-bg: var(--app-accent-soft, var(--surface-selected));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent, var(--accent)) 16%, transparent);
}

.choice-tile input[type="checkbox"],
.choice-tile input[type="radio"] {
  flex: 0 0 auto;
  margin-top: .2em;
}

.choice-tile__body,
.choice-tile__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.choice-tile__title {
  color: var(--text-main, var(--app-text));
}

.choice-tile__meta {
  color: var(--text-muted, var(--app-muted));
}

@media (max-width: 760px) {
  .choice-list--stack-mobile,
  .choice-list--3,
  .choice-list--4,
  .choice-list--7 {
    --choice-columns: 1;
  }
}

html[data-crm-ui="pwa"] .choice-list--7,
body[data-interface-mode="pwa"] .choice-list--7 {
  --choice-columns: 4;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  min-width: 0;
  padding: var(--chip-padding, 4px 10px);
  border: 1px solid var(--chip-border, var(--border-main, var(--app-border)));
  border-radius: var(--radius-pill, 999px);
  background: var(--chip-bg, var(--surface-soft, var(--app-surface-soft)));
  color: var(--chip-text, var(--text-muted, var(--app-muted)));
  line-height: 1.25;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.chip--compact { --chip-padding: 3px 8px; min-height: 24px; }
.chip--soft { --chip-bg: var(--surface-soft, var(--app-surface-soft)); }
.chip--selected { --chip-bg: var(--app-accent-soft); --chip-border: var(--app-accent); --chip-text: var(--app-accent-strong); }
.chip--muted { --chip-text: var(--text-muted, var(--app-muted)); }
.chip--danger { --chip-bg: var(--state-danger-bg); --chip-border: var(--state-danger-border); --chip-text: var(--app-danger); }
.chip--success { --chip-bg: var(--state-success-bg); --chip-border: var(--state-success-border); --chip-text: var(--app-success); }
.chip--warning { --chip-bg: var(--state-warning-bg); --chip-border: var(--state-warning-border); --chip-text: var(--app-warning); }
.chip--button { cursor: pointer; }

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--icon-circle-size, 36px);
  height: var(--icon-circle-size, 36px);
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--icon-circle-border, transparent);
  background: var(--icon-circle-bg, var(--surface-soft, var(--app-surface-soft)));
  color: var(--icon-circle-text, var(--app-accent, var(--accent)));
  line-height: 1;
}

.icon-circle--sm { --icon-circle-size: 28px; }
.icon-circle--md { --icon-circle-size: 36px; }
.icon-circle--lg { --icon-circle-size: 46px; }
.icon-circle--accent { --icon-circle-bg: var(--app-accent-soft); --icon-circle-text: var(--app-accent-strong, var(--app-accent)); }
.icon-circle--success { --icon-circle-bg: var(--state-success-bg); --icon-circle-text: var(--app-success); --icon-circle-border: var(--state-success-border); }
.icon-circle--warning { --icon-circle-bg: var(--state-warning-bg); --icon-circle-text: var(--app-warning); --icon-circle-border: var(--state-warning-border); }
.icon-circle--danger { --icon-circle-bg: var(--state-danger-bg); --icon-circle-text: var(--app-danger); --icon-circle-border: var(--state-danger-border); }

.progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--progress-gap, var(--space-3, 12px));
  min-width: 0;
}

.progress--stack-mobile {
  grid-template-columns: minmax(0, 1fr);
}

.progress__bar {
  position: relative;
  overflow: hidden;
  min-height: var(--progress-height, 14px);
  border-radius: var(--radius-pill, 999px);
  background: var(--progress-bg, var(--surface-soft, var(--app-surface-soft)));
}

.progress__value-bar,
.progress__bar > span {
  display: block;
  width: min(var(--progress-value, var(--analytics-load, 0%)), 100%);
  min-height: inherit;
  border-radius: inherit;
  background: var(--progress-fill, var(--app-accent, var(--accent)));
}

.progress__value {
  white-space: nowrap;
  color: var(--text-main, var(--app-text));
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--overlay-z-index, 2100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--overlay-padding, var(--space-4, 16px));
  background: var(--overlay-bg, transparent);
}

.overlay--dim {
  --overlay-bg: var(--surface-overlay, var(--app-overlay));
}

.overlay--bottom {
  align-items: flex-end;
}

.floating-panel,
.bottom-sheet {
  box-sizing: border-box;
  width: min(var(--floating-panel-width, 480px), 100%);
  padding: var(--floating-panel-padding, var(--space-4, 16px));
  border: 1px solid var(--border-main, var(--app-border));
  border-radius: var(--floating-panel-radius, var(--radius-xl, 24px));
  background: var(--surface-card, var(--app-surface));
  color: var(--text-main, var(--app-text));
  box-shadow: var(--shadow-lg, var(--app-shadow));
}

.floating-panel--sm { --floating-panel-width: 360px; }
.floating-panel--md { --floating-panel-width: 520px; }
.floating-panel--glass { backdrop-filter: blur(16px); }

.bottom-sheet {
  --floating-panel-width: 720px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

@media (max-width: 640px) {
  .progress--stack-mobile {
    grid-template-columns: minmax(0, 1fr);
  }

  .floating-panel,
  .bottom-sheet {
    --floating-panel-width: 100%;
  }
}