/* Page module: settings.css
   Reserved for gradual extraction from css/legacy_overrides.css. */

/* ═══════════════════════════════════════════════════
   v3_7_0: sform-v100 — unified settings form shell
   Used by: company_form, factory_form, user_form
   ═══════════════════════════════════════════════════ */

/* v3.8.47: настройки выровнены по стандарту сайта — left-aligned, на всю ширину
   контента .main (как orders/catalog/factory). Раньше центрировались (margin:auto)
   с разными max-width (1100/1140/1200) → крошки прыгали 34/265/295. Теперь крошки
   на 59 на всех страницах настроек. */
.sform-panel-v100,
.usp-panel-v100 {
  max-width: none;
}

.sform-body-v100 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sform-card-v100 {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  padding: 24px;
}

.sform-section-label-v100 {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.sform-grid-v100 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}

.sform-span2-v100 {
  grid-column: span 2;
}

.sform-field-v100 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sform-field-v100 > span {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.sform-field-v100 input,
.sform-field-v100 select,
.sform-field-v100 textarea {
  /* v3.8.43: background-color (longhand) — background-shorthand затирал chevron
     у select из theme_v2 во всех формах настроек. */
  background-color: var(--field-bg, #FAFAFA);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 12px;
  color: var(--text);
  transition: border-color .15s;
  width: 100%;
  font-family: inherit;
}
.sform-field-v100 select {
  padding-right: 32px; /* место под chevron (theme_v2: right 11px center) */
}

.sform-field-v100 input:focus,
.sform-field-v100 select:focus,
.sform-field-v100 textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.sform-field-v100 textarea {
  resize: vertical;
  min-height: 80px;
}

.sform-check-row-v100 {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.sform-toggle-v100 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.sform-toggle-v100 input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

.sform-actions-v100 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 8px;
}

/* v3.8.64: .button.sform-danger-v100 (0,2,0) перебивает ui.css .button (0,1,0)
   без !important — ui.css грузится позже, нужна более высокая специфичность. */
.button.sform-danger-v100 {
  background: transparent;
  color: var(--danger, #CC2200);
  border-color: color-mix(in srgb, var(--danger, #CC2200) 35%, transparent);
  margin-left: auto;
}

.button.sform-danger-v100:hover {
  background: #FEF2F2;
  border-color: var(--danger, #CC2200);
}

/* ═══════════════════════════════════════════════════
   v3_7_0: usp-v100 — users settings page
   ═══════════════════════════════════════════════════ */

.usp-form-v100 {
  margin-bottom: 36px;
}

.usp-form-title-v100 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
}

.usp-form-grid-v100 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.usp-allowed-v100 {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.usp-allowed-label-v100 {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}

/* Access rights panel */
.usp-access-card-v100 {
  height: 100%;
}

.usp-access-sections-v100 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.usp-access-cols-v100 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.usp-access-group-v100 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.usp-access-group-title-v100 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}

.usp-access-row-v100 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}

.usp-access-row-v100:hover {
  background: var(--section-bg, var(--bg));
}

.usp-access-row-v100 input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.usp-access-name-v100 {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

/* Users table section */
.usp-users-table-v100 {
  margin-top: 12px;
}

.usp-table-header-v100 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Role badges */
.usp-role-badge-v100 {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  background: var(--section-bg, #F5F5F5);
  color: var(--muted);
  border: 1px solid var(--line);
}

/* Inactive row/badge */
.cmp-row-inactive td {
  opacity: .55;
}

.cmp-inactive-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  background: #FEF2F2;
  color: var(--danger, #CC2200);
  border: 1px solid color-mix(in srgb, var(--danger, #CC2200) 25%, transparent);
}

@media (max-width: 900px) {
  .usp-form-grid-v100 {
    grid-template-columns: 1fr;
  }
  .usp-access-cols-v100 {
    grid-template-columns: 1fr 1fr;
  }
  .sform-grid-v100 {
    grid-template-columns: 1fr;
  }
  .sform-span2-v100 {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .usp-access-cols-v100 {
    grid-template-columns: 1fr;
  }
}

/* v3_1_3 performance settings */
.performance-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat-value {
  font-size: 22px;
  font-weight: 500;
  margin: 8px 0 0;
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
}
.table-wrap code {
  white-space: nowrap;
}

/* v3_1_21: safe extraction from legacy_overrides.css. Settings, documentation and design-constructor layout only. */

.settings-section {
  margin-bottom: 28px;
}

.documentation-panel .doc-layout {
  display: grid;
  gap: 18px;
}

.documentation-panel .card {
  line-height: 1.55;
}

.documentation-panel h2 {
  margin-top: 0;
  font-size: 14px;
  letter-spacing: 0;
}

.documentation-panel table {
  width: 100%;
}

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

.settings-layout-v68 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

/* v3_1_33: page-by-page settings/entity extraction from legacy_overrides.css. */
.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }

/* v3_1_36: settings-zone bulk extraction from legacy_overrides.css. Scoped settings/status/field-builder blocks only. */
.status-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(560px, 1.3fr);
  gap: 24px;
  align-items: start;
}

.readonly-status {
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  line-height: 1.55;
}

/* v58: field type hints and manual/list mode */
.field-type-help {
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--jit-line, var(--line));
  border-radius: 12px;
}

.field-type-help strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}

.field-type-help ul {
  margin: 0;
  padding-left: 17px;
}

.field-type-help li {
  margin: 0;
  font-size: 12px;
  color: #6f675c;
  line-height: 1.35;
}

.select-manual-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px dashed var(--jit-line, var(--line));
  border-radius: 12px;
  background: rgba(255,255,255,.42);
}

.select-manual-widget-v58 {
  display: grid;
  gap: 10px;
}

.select-manual-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.select-manual-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--jit-line, var(--line));
  border-radius: 12px;
  background: rgba(255,255,255,.62);
  cursor: pointer;
}

.select-manual-mode input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.select-manual-mode:has(input:checked) {
  border-color: var(--dark);
  box-shadow: inset 0 0 0 1px var(--dark);
  background: var(--panel);
}

.select-manual-modes,
.select-double-manual-widget-v74 .select-manual-modes {
  gap: 6px;
}

.select-manual-mode,
.select-manual-widget label.select-manual-mode,
.select-double-manual-widget-v74 .select-manual-mode {
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.2;
}

.select-manual-mode input[type="radio"] {
  width: 14px;
  height: 14px;
  min-height: 14px;
  flex: 0 0 14px;
}

/* v76: select blocks in order form even more compact */
.select-manual-mode,
.select-double-manual-widget-v74 .select-manual-mode {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 12px;
}

.select-manual-modes,
.select-double-manual-widget-v74 .select-manual-modes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .current-image-preview-v76 {
    width: 140px;
    height: 105px;
  }
  .select-manual-modes,
  .select-double-manual-widget-v74 .select-manual-modes {
    grid-template-columns: 1fr;
  }
}

/* Compact custom list/radio controls without clipped text */
.select-manual-mode,
.select-manual-widget label.select-manual-mode,
.select-double-manual-widget-v74 .select-manual-mode {
  min-height: 38px;
  height: auto;
  padding: 7px 10px;
  align-items: center;
  line-height: 1.2;
}

.select-manual-mode span,
.select-double-manual-widget-v74 .select-manual-mode span {
  display: block;
  line-height: 1.2;
}

/* v3_2_9 — status edit compact layout and status color reset control */
/* v3.8.47: left-aligned, full width (см. .usp-panel-v100) */
.status-edit-page-v329 {
  max-width: none;
}

.status-edit-page-v329 .status-form-v329 {
  display: grid;
  gap: 14px;
}

/* ═══════════════════════════════════════════════════
   v3_7_0: sts-v100 — Statuses & ProductTypes layout
   ═══════════════════════════════════════════════════ */

.sts-layout-v100 {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}

.sts-form-v100 {
  position: sticky;
  top: 80px;
}

/* Color picker controls */
.sts-color-row-v100 {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* v3.8.64: input.sts-color-input-v100 (0,1,1) перебивает .sform-field-v100 input
   (0,1,1, выше по файлу) порядком — иначе width:100% растягивал color-input. */
input.sts-color-input-v100 {
  width: 48px;
  height: 38px;
  padding: 3px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.sts-color-preview-v100 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  flex-shrink: 0;
  transition: background .15s;
}

.sts-color-edit-v100 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sts-reset-btn-v100 {
  font-size: 11px;
  padding: 5px 10px;
  white-space: nowrap;
}

.sts-badge-preview-v100 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--section-bg, var(--bg));
  border: 1px solid var(--line);
  border-radius: 8px;
}

.sts-table-wrap-v100 {
  min-width: 0;
}

@media (max-width: 900px) {
  .sts-layout-v100 {
    grid-template-columns: 1fr;
  }
  .sts-form-v100 {
    position: static;
  }
}

/* ═══════════════════════════════════════════════════
   v3_7_0: usp-search — Users search & filter bar
   ═══════════════════════════════════════════════════ */

.usp-table-controls-v100 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.usp-search-wrap-v100 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--muted);
  transition: border-color .15s;
}

.usp-search-wrap-v100:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.usp-search-input-v100 {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none;
  padding: 9px 0;
  font-size: 12px;
  color: var(--text);
  min-width: 0;
}

.usp-search-input-v100::placeholder { color: var(--muted); }

.usp-search-count-v100 {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.usp-role-filter-v100 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.usp-filter-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
  white-space: nowrap;
}

.usp-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

.usp-filter-btn.active {
  background: var(--dark);
  color: var(--panel);
  border-color: var(--dark);
}

/* v3_7_0: Companies page — table redesign */
.cmp-panel-v100 {
  /* v3.8.47: left-aligned, full width (см. .usp-panel-v100) */
  max-width: none;
}

.cmp-table-wrap-v100 {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  background: var(--panel);
}

.cmp-table-v100 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.cmp-table-v100 thead th {
  padding: 11px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--section-bg, var(--bg));
}

.cmp-table-v100 thead th:first-child { border-radius: var(--radius, 12px) 0 0 0; }
.cmp-table-v100 thead th:last-child  { border-radius: 0 var(--radius, 12px) 0 0; }

.cmp-row-v100 td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--text);
}

.cmp-row-v100:last-of-type td,
.cmp-staff-row-v100:last-child td {
  border-bottom: none;
}

.cmp-row-v100:hover td {
  background: var(--section-bg, var(--bg));
}

.cmp-company-name {
  font-weight: 500;
  font-size: 12px;
}

.cmp-td-contact {
  color: var(--muted);
  font-size: 12px;
}

.cmp-td-contact .cmp-contact-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmp-td-contact .cmp-contact-wrap span:first-child {
  color: var(--text);
}

.cmp-phone {
  color: var(--muted);
  font-size: 12px;
}

.cmp-badge-discount {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--section-bg, var(--bg));
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
}

.cmp-staff-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--section-bg, var(--bg));
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.cmp-staff-toggle:hover {
  background: var(--panel);
  border-color: var(--accent);
  color: var(--accent);
}

.cmp-chevron {
  transition: transform .2s ease;
  color: var(--muted);
  flex-shrink: 0;
}

.cmp-staff-open .cmp-chevron {
  transform: rotate(180deg);
}

.cmp-staff-count {
  font-weight: 500;
}

.cmp-td-actions { width: 80px; }

.cmp-actions-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

/* v3.8.49: единый канон иконочной кнопки (28×28 / r8 / 1px line / transparent /
   muted / glyph 14px) — общий для .act-btn, .cmp-action-btn, .icon-btn. */
.cmp-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
  text-decoration: none;
}

.cmp-action-btn:hover {
  background: var(--section-bg, var(--bg));
  color: var(--text);
  border-color: var(--text);
}

.cmp-action-danger:hover {
  background: #FEF2F2;
  color: var(--danger, #CC2200);
  border-color: var(--danger, #CC2200);
}

/* expanded staff row */
.cmp-staff-td {
  padding: 0;
  background: var(--section-bg, var(--bg));
  border-top: none;
}

.cmp-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px dashed var(--line);
}

.cmp-staff-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.cmp-staff-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--panel);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.cmp-staff-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cmp-staff-info strong {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp-staff-info span {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp-staff-edit {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .cmp-th-contact,
  .cmp-td-contact { display: none; }
  .cmp-staff-grid {
    grid-template-columns: 1fr;
  }
}