/* v5: загрузка изображений и страница подбора вакансий */
.image-field { gap: 8px; }
.image-field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.upload-button { white-space: nowrap; justify-content: center; }
.image-preview { margin-top: 8px; border: 1px solid var(--line, #e5e7eb); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.72); max-width: 340px; }
.image-preview img { display: block; width: 100%; max-height: 180px; object-fit: cover; }
.image-field small { color: var(--muted, #6b7280); }

.job-search-block { display: grid; gap: 18px; }
.job-search-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.job-search-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.72); border: 1px solid rgba(229,231,235,.86); }
.job-search-wide { grid-column: span 3; }
.job-search-submit { align-self: end; justify-content: center; min-height: 44px; }
.job-search-note { padding: 12px 14px; border-radius: 16px; background: rgba(238,242,255,.86); border: 1px solid rgba(199,210,254,.9); }
.job-loading, .job-empty, .job-warning, .job-results-top { padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.82); border: 1px solid rgba(229,231,235,.86); }
.job-warning { color: #854d0e; background: rgba(254,252,232,.95); border-color: rgba(253,224,71,.85); display: grid; gap: 6px; }
.job-warning p { margin: 0; }
.job-results-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.job-list { display: grid; gap: 12px; }
.job-card { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 14px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.92); border: 1px solid rgba(229,231,235,.86); box-shadow: 0 14px 38px rgba(17,24,39,.08); }
.job-logo { width: 76px; height: 76px; border-radius: 20px; overflow: hidden; background: #eef2ff; display: grid; place-items: center; }
.job-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.job-logo-placeholder { font-weight: 900; color: var(--accent, #5865f2); }
.job-card-body { min-width: 0; }
.job-card h3 { margin: 4px 0 6px; }
.job-card-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.job-card-meta span { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #eef2ff; color: var(--accent, #5865f2); font-size: 12px; font-weight: 800; }
.job-company, .job-salary { margin: 4px 0; }
.job-salary { font-weight: 800; }
.job-snippet { margin: 8px 0 0; color: var(--muted, #6b7280); }
.job-card-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .image-field-row { grid-template-columns: 1fr; }
  .job-search-form { grid-template-columns: 1fr; }
  .job-search-wide { grid-column: auto; }
  .job-card { grid-template-columns: 1fr; }
  .job-logo { width: 64px; height: 64px; }
}


/* v7: исправление выпадающих списков и скрытие технических сообщений от пользователя */
.job-search-form select,
.job-search-form select.input {
  color: #1f2937 !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, .95);
}

.job-search-form option {
  color: #1f2937 !important;
  background-color: #ffffff !important;
}

.job-search-form option:checked,
.job-search-form option:hover {
  color: #111827 !important;
  background-color: #dbeafe !important;
}

.job-search-note,
.job-warning {
  display: none !important;
}

/* v8: надёжный выбор направления без нативного выпадающего списка, выбор источника вакансий и читаемое описание */
.job-search-full { grid-column: 1 / -1; }
.job-direction-field { position: relative; align-self: start; }
.job-picker-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(203, 213, 225, .95);
  border-radius: 14px;
  background: #ffffff;
  color: #111827;
  padding: 10px 38px 10px 12px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 2px;
  position: relative;
}
.job-picker-button::after {
  content: '⌄';
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-52%);
  color: #334155;
  font-size: 18px;
  line-height: 1;
}
.job-picker-title {
  color: #111827;
  font-weight: 800;
  line-height: 1.2;
}
.job-picker-subtitle {
  color: #475569;
  font-size: 12px;
  line-height: 1.25;
}
.job-picker-menu {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, .65);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
  max-height: 290px;
  overflow: auto;
}
.job-picker-menu[hidden] { display: none !important; }
.job-picker-option {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #111827;
  padding: 10px 11px;
  text-align: left;
  display: grid;
  gap: 2px;
  cursor: pointer;
}
.job-picker-option:hover,
.job-picker-option.active {
  background: #dbeafe;
}
.job-provider-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.job-provider-button {
  border: 1px solid rgba(203, 213, 225, .95);
  border-radius: 999px;
  background: #ffffff;
  color: #1f2937;
  padding: 9px 13px;
  font-weight: 800;
  cursor: pointer;
}
.job-provider-button.active {
  border-color: rgba(88, 101, 242, .55);
  background: linear-gradient(135deg, #1f64d1, #7b38df);
  color: #ffffff;
}
.job-fixed-select,
.job-search-block select,
.job-search-block option {
  color: #111827 !important;
  background: #ffffff !important;
  -webkit-text-fill-color: #111827 !important;
  color-scheme: light !important;
}
.job-card,
.job-card-body,
.job-card h3,
.job-company,
.job-salary,
.job-snippet,
.job-empty,
.job-loading,
.job-results-top {
  color: #111827;
}
.job-company,
.job-snippet {
  color: #374151 !important;
}
.job-snippet {
  line-height: 1.55;
}
.job-results-top .muted {
  color: #475569 !important;
}

@media (max-width: 900px) {
  .job-search-full { grid-column: auto; }
  .job-provider-buttons { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
  .job-provider-buttons { grid-template-columns: 1fr; }
}