/* Component module.
   Reserved for buttons, cards, forms, tables, filters and modals.
   Kept minimal in v90-refactor to avoid visual regressions. */

/* v3_1_21: safe extraction from legacy_overrides.css. Flash messages only. */

.flash-wrap { display: grid; gap: 10px; margin-bottom: 18px; }
.flash { background: #f1e6d5; border: 1px solid #E8E8E8; padding: 13px 16px; border-radius: 12px; }

/* v3_1_40 — Site confirm modal component.
   Used by data-confirm controls instead of browser confirm(). */
.jit-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18, 14, 16, .46);
  backdrop-filter: blur(3px);
}

.jit-confirm-dialog {
  width: min(520px, calc(100vw - 48px));
  background: var(--panel, #fffaf4);
  color: var(--text, #201417);
  border: 1px solid var(--line, rgba(90, 42, 55, .25));
  border-radius: 12px;
  box-shadow: 0 28px 80px rgba(20, 14, 18, .28);
  padding: 24px;
}

.jit-confirm-title {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
}

.jit-confirm-message {
  margin: 0;
  color: var(--muted, #6f5d63);
  font-size: 12px;
  line-height: 1.45;
}

.jit-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.jit-confirm-actions .button {
  min-width: 112px;
}

.jit-confirm-actions .jit-confirm-cancel {
  background: var(--button-secondary-bg, transparent);
  color: var(--button-secondary-text, var(--text));
  border-color: var(--line, currentColor);
}

/* v3_1_42 — reusable icon delete control.
   Used by delete/photo clear controls across forms. */
.jit-icon-delete {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  inline-size: 28px;
  block-size: 28px;
  flex: 0 0 28px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  line-height: 1;
  overflow: hidden;
  border-radius: 999px;
  cursor: pointer;
}

.jit-icon-delete input[type="checkbox"],
.jit-icon-delete input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.jit-icon-delete span,
.jit-icon-delete__icon {
  display: block;
  line-height: 1;
  font-size: 12px;
  transform: none;
}

/* v3_2_2 — canonical action component taxonomy.
   Effective cascade bridge is kept in theme_bridge.css for this transition release
   because legacy_overrides.css is still imported after components.css.
   Do not delete legacy button rules until the visual pass is manually verified. */
:root {
  /* v3.8.32 — кнопки НЕ pill, вес 500. v3.8.38 — единый радиус кнопок 8px
     (как .sh-btn/.btn-order/.qf-btn/.sh-select; .button был выбивающимся 12px). */
  --jit-action-radius: 8px;
  --jit-action-font-weight: 500;
  --jit-action-gap: 8px;
  --jit-action-padding-y: 8px; /* v3.8.56: 11→8 — кнопка ~32px (как .btn-black/.btn-order) */
  --jit-action-padding-x: 16px; /* 18→16 */
  --jit-action-small-padding-y: 7px;
  --jit-action-small-padding-x: 12px;
  --jit-action-small-font-size: 12px;
  --jit-icon-action-size: 34px;
  --jit-icon-action-radius: 10px;
}

/* Canonical targets for current templates:
   .button, .button.primary, .button.small, .danger-button,
   .icon-button, .icon-button.danger, .icon-action, .icon-action.danger,
   .primary-mini, .jit-order-button, .link, .link.danger, .btn.secondary. */

/* v3_2_3 — canonical field component taxonomy.
   Effective cascade bridge is kept in theme_bridge.css for this transition release
   because legacy_overrides.css and page CSS are still imported after components.css.
   Do not delete legacy field rules until manual verification confirms parity. */
:root {
  --jit-field-bg: var(--field-bg, #fffdf9);
  --jit-field-text: var(--text, #201417);
  --jit-field-muted: var(--muted, #6f5d63);
  --jit-field-border: var(--line, rgba(90, 42, 55, .22));
  --jit-field-border-focus: var(--accent, #9b7a4a);
  --jit-field-radius: 8px; /* v3.8.50: канон радиуса полей 8px (было calc→6px, разнобой) */
  --jit-field-focus-ring: rgba(155, 122, 74, .18);
}

/* Canonical targets for current templates:
   input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
   select, textarea, .select-manual-widget select, .select-manual-widget input,
   .select-double-manual-widget-v74 select, .select-double-manual-widget-v74 input:not([type="radio"]). */

/* v3_2_4 — canonical surface component taxonomy.
   Effective cascade bridge is intentionally conservative and remains in theme_bridge.css
   while legacy/page CSS still own layout, spacing and page-specific geometry.
   Do not delete broad .card/.panel/.section rules until page-by-page visual parity is confirmed. */
:root {
  --jit-surface-bg: var(--panel, #fffaf4);
  --jit-surface-section-bg: var(--section-bg, #fff7ef);
  --jit-surface-text: var(--text, #201417);
  --jit-surface-muted: var(--muted, #6f5d63);
  --jit-surface-border: var(--line, rgba(90, 42, 55, .22));
  --jit-surface-radius: var(--radius, 18px);
  --jit-surface-shadow: var(--shadow, 0 18px 44px rgba(48, 28, 22, .08));
}

/* Canonical targets for future template cleanup:
   .jit-surface, .jit-card, .jit-panel, .jit-section, .jit-page-section.
   Current templates still use mixed legacy/page-specific selectors: .card, .panel,
   .filters-card, .entity-card, .form-block, .order-section, .photo-upload-section,
   .catalog-panel, .jit-factory-section and many *-card variants. */

/* v3_2_5 — canonical modal / confirmation / flash taxonomy.
   Current runtime uses .jit-confirm-* for site confirmations and .flash for Flask messages. */
:root {
  --jit-modal-overlay-bg: rgba(18, 14, 16, .46);
  --jit-modal-backdrop-blur: 3px;
  --jit-modal-width: 520px;
  --jit-modal-radius: 22px;
  --jit-modal-padding: 24px;
  --jit-modal-shadow: 0 28px 80px rgba(20, 14, 18, .28);
  --jit-flash-radius: 14px;
  --jit-flash-padding-y: 13px;
  --jit-flash-padding-x: 16px;
}

/* Canonical targets for future template cleanup:
   .jit-confirm-overlay, .jit-confirm-dialog, .jit-confirm-title,
   .jit-confirm-message, .jit-confirm-actions, .flash-wrap, .flash. */

/* v3_2_6 — canonical table / badge / status taxonomy.
   Effective cascade bridge is kept in theme_bridge.css while legacy/page CSS still own
   table layout, column sizing, wrapping and page-specific status geometry. */
:root {
  --jit-table-bg: var(--panel, #fffdf9);
  --jit-table-head-bg: color-mix(in srgb, var(--field-bg, #fffdf9) 82%, var(--section-bg, #fff7ef));
  --jit-table-row-bg: transparent;
  --jit-table-row-hover-bg: color-mix(in srgb, var(--section-bg, #fff7ef) 58%, transparent);
  --jit-table-text: var(--text, #201417);
  --jit-table-muted: var(--muted, #6f5d63);
  --jit-table-border: var(--line, rgba(90, 42, 55, .22));
  --jit-badge-bg: var(--section-bg, #fff7ef);
  --jit-badge-text: var(--accent-dark, #755a33);
  --jit-badge-border: var(--line, rgba(90, 42, 55, .22));
  --jit-status-radius: 999px;
  --jit-status-padding-y: 5px;
  --jit-status-padding-x: 9px;
  --jit-status-font-size: 12px;
}

/* Canonical targets for future template cleanup:
   .jit-table, .jit-badge, .jit-status.
   Current templates still use mixed selectors: table, .compact-table, .bulk-table,
   .bulk-table-wide, .bulk-edit-table, .action-log-table-v35, .status,
   .readonly-status, .entity-status-v90, .field-badges span. */

/* v3_2_7 — canonical delete / upload visual taxonomy.
   Effective cascade bridge is kept in theme_bridge.css while legacy/page CSS still own
   upload mechanics, input wiring, image preview sizing and product-form geometry. */
:root {
  --jit-upload-bg: var(--field-bg, #fffdf9);
  --jit-upload-hover-bg: color-mix(in srgb, var(--section-bg, #fff7ef) 72%, var(--field-bg, #fffdf9));
  --jit-upload-text: var(--text, #201417);
  --jit-upload-muted: var(--muted, #6f5d63);
  --jit-upload-border: var(--line, rgba(90, 42, 55, .22));
  --jit-upload-border-hover: color-mix(in srgb, var(--accent, #7a4f37) 42%, var(--line, rgba(90, 42, 55, .22)));
  --jit-upload-radius: 16px;
  --jit-delete-size: 28px;
  --jit-delete-bg: color-mix(in srgb, var(--accent, #7a4f37) 8%, transparent);
  --jit-delete-bg-active: color-mix(in srgb, var(--danger, #c24b5a) 14%, transparent);
  --jit-delete-text: var(--accent, #7a4f37);
  --jit-delete-text-active: var(--danger, #c24b5a);
  --jit-delete-border: color-mix(in srgb, var(--accent, #7a4f37) 45%, transparent);
  --jit-delete-border-active: color-mix(in srgb, var(--danger, #c24b5a) 48%, transparent);
}

/* Canonical targets for future template cleanup:
   .jit-upload, .jit-upload-title, .jit-upload-note, .jit-delete-control.
   Current templates still use mixed selectors: .dropzone, .compact-dropzone,
   .image-dropzone, .extra-photo-dropzone, .photo-delete-check, .icon-only-delete,
   .jit-photo-delete-control. */

/* v3_2_8 — checkbox/status/palette visual tokens. */
:root {
  --jit-check-bg: var(--field-bg, #fffdf9);
  --jit-check-border: var(--line, rgba(90, 42, 55, .22));
  --jit-check-text: var(--text, #201417);
  --jit-check-radius: 14px;
  --jit-status-bg: var(--jit-badge-bg, var(--section-bg, #fff7ef));
}

/* ===== v3.7: УНИВЕРСАЛЬНАЯ ПОДШАПКА (subheader) ===== */
.subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 0.5px solid var(--line, #e8e8e8);
  margin-bottom: 10px;
  gap: 10px;
  flex-wrap: wrap;
  /* v3.8.46: было 30px → на страницах без правого контрола (фабрики) шапка была
     ниже, чем на каталоге с фильтром-селектом (30px) → крошки не совпадали по
     вертикали. 38px = высота строки с 30px-контролом + паддинги → крошки на ОДНОМ
     уровне на всех страницах с subheader. */
  min-height: 38px;
}

/* Хлебные крошки */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  flex-shrink: 0;
}
.bc-item {
  color: var(--muted, #888);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}
.bc-item:hover { color: var(--text, #111); }
.bc-sep {
  color: var(--line, #e8e8e8);
  font-size: 10px;
}
.bc-current {
  color: var(--text, #111);
  font-weight: 500;
}

/* Правая зона — фильтры и кнопки */
.subheader-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Quick-filter pills */
.qf-group { display: flex; gap: 3px; }
.qf-btn {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  border: 0.5px solid var(--line, #e8e8e8);
  background: transparent;
  color: var(--muted, #888);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  display: inline-block;
}
.qf-btn:not(.active):hover { background: var(--section-bg, #f5f5f5); }
.qf-btn.active {
  background: var(--accent, #1a1a1a);
  color: var(--panel, #fff);
  border-color: var(--accent, #1a1a1a);
}

/* Select-фильтры */
/* Фильтр-селект в subheader — плоский outline в стиле системы (v3.8.37:
   убран neumorphism-raised, чтобы «Все значения» не выбивался из единого вида). */
.sh-select {
  height: 30px;
  padding: 0 32px 0 12px; /* справа — место под chevron (theme_v2: right 11px) */
  border: 0.5px solid var(--line, #e8e8e8);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text, #111);
  background-color: var(--panel, #fff); /* longhand: не затирает background-image chevron */
  cursor: pointer;
  min-width: 110px;
  transition: border-color .12s ease;
}
.sh-select:hover { border-color: var(--accent, #1a1a1a); }
.sh-select:focus { outline: none; border-color: var(--accent, #1a1a1a); }

/* CTA-кнопки в subheader */
.sh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* v3.8.56: 5/12 (24px) → 8/14 + min-height 32 — единая высота кнопок с .button
     (раньше CTA в шапке 24px, а в теле формы 32px = «Добавить поле» выбивалась). */
  padding: 8px 14px;
  min-height: 32px;
  box-sizing: border-box;
  background: var(--accent, #1a1a1a);
  color: var(--panel, #fff);
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.sh-btn:hover { opacity: .85; }
.sh-btn.outline {
  background: transparent;
  color: var(--muted, #888);
  border: 0.5px solid var(--line, #e8e8e8);
}
.sh-btn.outline:hover { background: var(--section-bg, #f5f5f5); }

/* Скрыть старые блоки-заголовки там, где добавлен subheader */
.subheader + .panel-header,
.subheader + .page-header,
.subheader ~ .catalog-heading { display: none; }

/* v3.8.65: opacity-fade фото товаров УБРАН. Контейнеры фото уже резервируют место
   (aspect-ratio 3/4 в catalog/RTW; padding-top 133% на «Моей фабрике») → layout-jump
   нет и без анимации. Fade при этом сам мигал: каждое фото (включая видимые сверху)
   стартовало с opacity:0 и проявлялось по мере lazy-загрузки. Теперь фото появляются
   сразу в зарезервированном боксе — без мигания/«прыжка». */