/* Услуги v3 — макет Астры, P1–P4, 20.09.2026.
   Тестовая клиника (флаг PATIENT_PAGE_TEST_CLINIC_IDS, см. svcV3Enabled()
   в services-v3.js). Значения геометрии — 1:1 из design-spec.md пакета
   anexis-services-final (radius, отступы, ширины колонок), через
   переменные проекта (--card/--paper/--border/--ink/--action-bg/--money-*),
   без новой фиксированной палитры.
   Правила ограничены [data-ui-services="v3"], КРОМЕ ширины трёх новых
   модалок (#svcv3-add-modal/#svcv3-edit-modal/#svcv3-excel-modal) — они
   верстаются как модалки вне обёртки раздела, как и .modal у остальных
   разделов проекта (см. паттерн #modal-doctor-earnings в components.css). */

[data-ui-services="v3"] .svcv3-headrow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
[data-ui-services="v3"] .svcv3-headrow h2 { font-size: 20px; }
[data-ui-services="v3"] .svcv3-sub { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
[data-ui-services="v3"] .svcv3-headactions { display: flex; gap: 8px; flex: none; }

[data-ui-services="v3"] .svcv3-card { padding: 0; border-radius: 10px; }

[data-ui-services="v3"] .svcv3-toolbar {
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
  padding: 24px 24px 16px;
}
[data-ui-services="v3"] .svcv3-search-field { flex: 1; max-width: 500px; }
[data-ui-services="v3"] .svcv3-sort-field { width: 238px; flex: none; }

[data-ui-services="v3"] .svcv3-filterrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 24px 16px; flex-wrap: wrap;
}
[data-ui-services="v3"] .svcv3-segmented {
  display: inline-flex; gap: 4px; background: var(--paper);
  border: 1px solid var(--border); border-radius: 8px; padding: 3px;
}
[data-ui-services="v3"] .svcv3-seg-btn {
  border: 0; background: none; padding: 6px 14px; font-size: 12px; font-weight: 600;
  color: var(--ink-soft); border-radius: 6px; cursor: pointer; min-height: 30px;
}
[data-ui-services="v3"] .svcv3-seg-btn.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.08)); }
[data-ui-services="v3"] .svcv3-found { font-size: 12px; color: var(--ink-soft); }

[data-ui-services="v3"] #svcv3-msg { margin: 0 24px 12px; }

[data-ui-services="v3"] .svcv3-table { width: 100%; border-collapse: collapse; font-size: 13px; }
[data-ui-services="v3"] .svcv3-table th {
  padding: 12px 24px; font-size: 11px; font-weight: 600; color: var(--ink-soft);
  text-align: left; white-space: nowrap;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
[data-ui-services="v3"] .svcv3-table th:nth-child(2) { text-align: right; }
[data-ui-services="v3"] .svcv3-table td {
  padding: 12px 24px; border-bottom: 1px solid var(--border); vertical-align: middle;
  min-height: 64px;
}
[data-ui-services="v3"] .svcv3-table tbody tr:last-child td { border-bottom: 0; }
[data-ui-services="v3"] .svcv3-table td.svcv3-name-cell { font-weight: 600; white-space: normal; word-break: break-word; }
[data-ui-services="v3"] .svcv3-table td.svcv3-price-cell {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600;
}
[data-ui-services="v3"] .svcv3-table td.svcv3-actions-cell { text-align: right; }
[data-ui-services="v3"] .svcv3-table td.svcv3-inactive-row-name { color: var(--ink-soft); }

[data-ui-services="v3"] .svcv3-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}
[data-ui-services="v3"] .svcv3-pill.active { background: var(--money-good-soft); color: var(--money-good-ink); }
[data-ui-services="v3"] .svcv3-pill.inactive { background: var(--paper); color: var(--ink-soft); }

[data-ui-services="v3"] .svcv3-edit-btn { height: 32px; padding: 0 14px; font-size: 12px; }

[data-ui-services="v3"] .svcv3-footerline {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 24px; border-top: 1px solid var(--border); font-size: 11px; color: var(--ink-soft);
}
[data-ui-services="v3"] .svcv3-rangebadge { font-size: 11px; color: var(--ink-soft); }

[data-ui-services="v3"] .svcv3-empty { padding: 40px 24px; text-align: center; color: var(--ink-soft); font-size: 13px; }

/* ---------- Ширина новых модалок (вне обёртки раздела) ---------- */
#svcv3-add-modal .modal { max-width: 560px; }
#svcv3-edit-modal .modal { max-width: 560px; }
#svcv3-excel-modal .modal { max-width: 740px; }

@media (max-width: 1200px) {
  [data-ui-services="v3"] .svcv3-sort-field { width: 210px; }
  [data-ui-services="v3"] .svcv3-table th:nth-child(2),
  [data-ui-services="v3"] .svcv3-table td.svcv3-price-cell { }
}

@media (max-width: 1024px) {
  [data-ui-services="v3"] .svcv3-filterrow { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) {
  [data-ui-services="v3"] .svcv3-toolbar .field,
  [data-ui-services="v3"] .svcv3-search-field,
  [data-ui-services="v3"] .svcv3-sort-field { width: 100%; max-width: none; }
  [data-ui-services="v3"] .svcv3-headrow { flex-direction: column; align-items: stretch; }
  [data-ui-services="v3"] .svcv3-headactions { display: grid; grid-template-columns: 1fr 1fr; }

  /* Таблица -> блоки: название/цена в первой строке, статус/«Изменить» во второй. */
  [data-ui-services="v3"] .svcv3-table thead { display: none; }
  [data-ui-services="v3"] .svcv3-table, [data-ui-services="v3"] .svcv3-table tbody,
  [data-ui-services="v3"] .svcv3-table tr, [data-ui-services="v3"] .svcv3-table td { display: block; width: auto !important; }
  [data-ui-services="v3"] .svcv3-table colgroup { display: none; }
  [data-ui-services="v3"] .svcv3-table tr {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 6px 0;
  }
  [data-ui-services="v3"] .svcv3-table td { padding: 0; border-bottom: 0; }
  [data-ui-services="v3"] .svcv3-table td.svcv3-name-cell { flex: 1 1 100%; order: 1; }
  [data-ui-services="v3"] .svcv3-table td.svcv3-price-cell { flex: none; margin-left: auto; order: 2; text-align: right; }
  [data-ui-services="v3"] .svcv3-table td.svcv3-status-cell { flex: 1 1 auto; order: 3; margin-top: 8px; }
  [data-ui-services="v3"] .svcv3-table td.svcv3-actions-cell { flex: none; order: 4; margin-top: 8px; margin-left: auto; }
  [data-ui-services="v3"] .svcv3-edit-btn { min-height: 44px; }
  [data-ui-services="v3"] .svcv3-seg-btn { min-height: 44px; }
}