/* Палитра снята с edo.mig24.ru (Tilda-страница, project8955963):
   фон #e1f3fe, текст/заголовки #0d202f, акценты (ссылки/бейджи) #ed6f33 / #ff8562 / #fa876b,
   шрифт Onest. */

:root {
  --bg: #e1f3fe;
  --surface: #ffffff;
  --ink: #0d202f;
  --ink-dim: #4c5c68;
  --accent: #ed6f33;
  --accent-2: #fa876b;
  --border: #cfe4f2;
  --error: #d1372b;
  --ok: #1f8a4c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d202f;
    --surface: #142c3f;
    --ink: #eaf4fb;
    --ink-dim: #a9c0cf;
    --accent: #ff8a5b;
    --accent-2: #ffa98d;
    --border: #21445c;
    --error: #ff8a80;
    --ok: #7be3a4;
  }
}

:root[data-theme="dark"] {
  --bg: #0d202f;
  --surface: #142c3f;
  --ink: #eaf4fb;
  --ink-dim: #a9c0cf;
  --accent: #ff8a5b;
  --accent-2: #ffa98d;
  --border: #21445c;
  --error: #ff8a80;
  --ok: #7be3a4;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Onest', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.45;
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

header.top {
  margin-bottom: 24px;
}

header.top h1 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  max-width: 720px;
  margin: 0;
}

header.top .tagline {
  color: var(--ink-dim);
  font-size: 14px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.tabs button {
  appearance: none;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tabs button.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.panel { display: none; }
.panel.active { display: block; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

.search-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

input[type="text"] {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  /* 16px, не 15 — iOS Safari иначе зумит страницу при фокусе на инпуте. */
  font-size: 16px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}

input[type="text"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

button.btn {
  appearance: none;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
}

button.btn:hover { background: var(--accent-2); }
button.btn:disabled { opacity: .5; cursor: default; }

button.btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}

.suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(13, 32, 47, .12);
  max-height: 320px;
  overflow-y: auto;
  z-index: 20;
}

.suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--bg); }

.suggestion-item .name { font-weight: 600; font-size: 14px; }
.suggestion-item .meta { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }

.selected-company {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-top: 14px;
}

.selected-company .name { font-weight: 600; }
.selected-company .meta { font-size: 13px; color: var(--ink-dim); margin-top: 4px; }

.hint { font-size: 13px; color: var(--ink-dim); margin-top: 8px; }
.error-box {
  background: #fdeceb;
  color: var(--error);
  border: 1px solid #f3c8c3;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  margin-top: 14px;
}

:root[data-theme="dark"] .error-box {
  background: #3a1f1c;
  border-color: #5c2e28;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .error-box {
    background: #3a1f1c;
    border-color: #5c2e28;
  }
}

.loading { font-size: 13px; color: var(--ink-dim); margin-top: 10px; }

.codes-subject {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 600;
  margin-top: 18px;
}

.codes-subject .meta {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-dim);
}

.results-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
  flex-wrap: wrap;
}

.results-toolbar h2 { font-size: 15px; margin: 0; }

.results-note {
  font-size: 12px;
  color: var(--ink-dim);
  margin: -4px 0 12px;
}

.abonent-list { display: flex; flex-direction: column; gap: 10px; }

.abonent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.op-logo {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  object-fit: contain;
  padding: 6px;
}

.op-badge {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.abonent-main { flex: 1; min-width: 0; }
.top-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.abonent-main .code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-weight: 700;
  font-size: 14px;
  /* Коды длинные и без пробелов — иначе распирают строку на узком экране. */
  overflow-wrap: anywhere;
}

.copy-btn {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink-dim);
  cursor: pointer;
}

.copy-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.copy-btn.copied {
  color: #1f8a4c;
  border-color: #b8e4c8;
  background: #e6f6ec;
}

:root[data-theme="dark"] .copy-btn.copied { color: #7be3a4; border-color: #235c3a; background: #163d27; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .copy-btn.copied { color: #7be3a4; border-color: #235c3a; background: #163d27; }
}
.abonent-main .operator-name { font-size: 13px; color: var(--ink-dim); }
.abonent-main .company-name { font-size: 14px; margin-top: 4px; }
.abonent-main .req-line { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.abonent-main .comment { font-size: 12px; color: var(--ink-dim); margin-top: 4px; font-style: italic; }

.status-chip {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-dim);
  border: 1px solid var(--border);
}

/* Активен - зелёный, Неактивен - красный, Низкая активность - жёлтый, Новый - синий. */
.status-chip--active { background: #e6f6ec; color: #1f8a4c; border-color: #b8e4c8; }
.status-chip--inactive { background: #fdeceb; color: #d1372b; border-color: #f3c8c3; }
.status-chip--low { background: #fff6db; color: #9a6c00; border-color: #f0dda0; }
.status-chip--new { background: #e6f0ff; color: #2054c7; border-color: #c3d7fb; }

:root[data-theme="dark"] .status-chip--active { background: #163d27; color: #7be3a4; border-color: #235c3a; }
:root[data-theme="dark"] .status-chip--inactive { background: #3a1f1c; color: #ff8a80; border-color: #5c2e28; }
:root[data-theme="dark"] .status-chip--low { background: #3a3212; color: #f0d27a; border-color: #5c4e1e; }
:root[data-theme="dark"] .status-chip--new { background: #16233d; color: #9db8ff; border-color: #28407a; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .status-chip--active { background: #163d27; color: #7be3a4; border-color: #235c3a; }
  :root:not([data-theme="light"]) .status-chip--inactive { background: #3a1f1c; color: #ff8a80; border-color: #5c2e28; }
  :root:not([data-theme="light"]) .status-chip--low { background: #3a3212; color: #f0d27a; border-color: #5c4e1e; }
  :root:not([data-theme="light"]) .status-chip--new { background: #16233d; color: #9db8ff; border-color: #28407a; }
}

footer.foot {
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 480px) {
  .wrap { padding: 20px 16px 40px; }
  header.top h1 { font-size: 22px; }
  .card { padding: 16px; }
  button.btn { padding: 10px 14px; }
  #find-codes-btn { width: 100%; }
  .results-toolbar { align-items: stretch; }
  .results-toolbar #download-csv-btn { width: 100%; }
}

.foot-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.foot-link {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.foot-link:hover { background: var(--accent-2); }

.foot-cta {
  font-size: 13px;
  color: var(--ink-dim);
}

.foot-cta a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.foot-cta a:hover { text-decoration: underline; }

/* Обратный поиск: блоки «по ЕГРЮЛ» / «из Реестра абонентов» и предупреждения */
.block-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

#code-result .name { font-weight: 600; font-size: 16px; }
#code-result .meta { color: var(--ink-dim); margin-top: 6px; font-size: 13px; }
#code-result .req-lines { margin-top: 8px; }
#code-result .req-line { font-size: 13px; color: var(--ink-dim); margin-top: 2px; }
#code-result .comment { font-size: 13px; color: var(--ink-dim); margin-top: 6px; font-style: italic; }

.code-notices { background: #fff6db; border-color: #f0dda0; }
.notice-line { font-size: 14px; font-weight: 600; color: #9a6c00; }
.notice-line + .notice-line { margin-top: 4px; }

:root[data-theme="dark"] .code-notices { background: #3a3212; border-color: #5c4e1e; }
:root[data-theme="dark"] .notice-line { color: #f0d27a; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .code-notices { background: #3a3212; border-color: #5c4e1e; }
  :root:not([data-theme="light"]) .notice-line { color: #f0d27a; }
}

/* Фильтры (КПП, тип документооборота) на вкладке "по компании" */
.filters-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
}

.filter-field label {
  margin-bottom: 0;
}

.filter-field select {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}

.doctype-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  min-height: 42px;
  align-items: center;
}

.doctype-checkboxes label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0;
  cursor: pointer;
}

.doctype-checkboxes input[type="checkbox"] {
  cursor: pointer;
}