/*
  NP Lookup — стилі UI (тема День/Ніч)
  Ключові рішення UX:
  - Активний елемент у списку має виразний фон (`--activeTint`) і ліву акцентну межу
    для швидкого візуального фокусу, разом із відключенням outline.
  - Списки результатів мають `max-height:360px` та `overflow:auto`, щоб показувати
    більше елементів без переповнення вікна; для великих наборів рекомендується
    пагінація/«infinite scroll» на фронтенді.
  - Тема перемикається між light/dark через CSS‑змінні; значення читає JS.
*/
.theme-light, :root { /* значення за замовчуванням для світлої теми */ --bg:#f8f5ef; --panel:#f8f5ef; --text:#111827; --muted:#6b7280; --accent:#2563eb; --border:#e5e7eb; --ok:#059669; --bad:#dc2626; --chipBg:#f8f5ef; --surfaceHover:#efe9df; --thumbLight:#fbbf24; --thumbDark:#93c5fd; --activeTint: rgba(37,99,235,.12); --link:#2563eb; --linkHover:#1d4ed8; }
.theme-dark { --bg:#0d1117; --panel:#111827; --text:#e5e7eb; --muted:#9ca3af; --accent:#3b82f6; --border:#1f2937; --ok:#10b981; --bad:#ef4444; --chipBg:#0f172a; --surfaceHover:#0f172a; --thumbLight:#fbbf24; --thumbDark:#93c5fd; --activeTint: rgba(59,130,246,.18); --link:#8ab4f8; --linkHover:#a8c7fa; }
/* Ретро теми */
.theme-crt { --bg:#0a0f0a; --panel:#0b120b; --text:#b7ffb7; --muted:#7ac67a; --accent:#2ee22e; --border:#142414; --ok:#19c819; --bad:#ff4d4d; --chipBg:#081108; --surfaceHover:#0c160c; --activeTint: rgba(46,226,46,.16); }
.theme-matrix { --bg:#000000; --panel:#0b0b0b; --text:#8cff8c; --muted:#55aa55; --accent:#39ff14; --border:#121212; --ok:#20ff8f; --bad:#ff3355; --chipBg:#0a0a0a; --surfaceHover:#111111; --activeTint: rgba(57,255,20,.18); }
.theme-amber { --bg:#0f0c07; --panel:#16130c; --text:#ffd48a; --muted:#caa56a; --accent:#ffb020; --border:#2a2418; --ok:#21c878; --bad:#ff6b4a; --chipBg:#130f09; --surfaceHover:#1a150d; --activeTint: rgba(255,176,32,.16); --link:#8ab4f8; --linkHover:#a8c7fa; }
body { font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; margin:0; padding:0; background:var(--bg); color:var(--text); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.container, .grid, .card, .input-block, input, .results { /* глобальна коробка для уникнення переповнень */ box-sizing: border-box; }
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
.app-header { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding: 8px 0 16px; border-bottom:1px solid var(--border); }
.title { text-align:center; }
.title h1 { margin:0; font-size:28px; }
.title h1 { display:flex; align-items:center; gap:8px; }
.subtitle { color: var(--muted); }
.subtitle .brand-icon.small { margin-right:6px; }
.subtitle a { color: var(--link); text-decoration: underline; }
.subtitle a:hover { color: var(--linkHover); }
.brand { color: #60a5fa; font-weight:600; }
.version-badge { margin-left:8px; padding:2px 6px; border:1px solid var(--border); border-radius:6px; font-size:12px; color:var(--muted); }
.infra-banner { margin-top:8px; padding:6px 10px; border:1px dashed var(--border); border-radius:8px; font-size:12px; color:var(--muted); text-align:center; }
.infra-banner .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.header-controls { display:flex; flex-direction:column; gap:12px; align-items:flex-end; width:100%; }
.chips { display:flex; gap:8px; }
.status-row { display:flex; flex-wrap:nowrap; gap:8px; align-items:center; justify-content:center; white-space:nowrap; margin-top:12px; }
.status-row .chip { flex: 0 0 auto; }
@media (max-width: 640px) {
  .status-row { flex-wrap:wrap; white-space:normal; }
}
/* Мобільна читабельність: мінімальні розміри шрифтів у шапці */
@media (max-width: 640px) {
  .title h1 { font-size: 24px; }
  .chip { font-size: 13px; }
  .lang { font-size: 16px; }
  .method-label { font-size: 13px; }
}
.status-icon { color: var(--muted); font-size:14px; }
.chips-center { display:flex; flex-direction:column; align-items:center; gap:6px; align-self:center; width:100%; }
.chips-line { display:flex; gap:8px; align-items:center; justify-content:center; }
.chip { padding:4px 8px; border:1px solid var(--border); border-radius:12px; font-size:12px; color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.chip.label { background:var(--chipBg); }
.langs { display:flex; gap:8px; }
.langs-row { display:flex; justify-content:flex-end; width:100%; }
.theme-row { display:flex; justify-content:flex-end; width:100%; margin-top:6px; }
.theme-select, .profile-select { margin-left:8px; border:1px solid var(--border); background:var(--panel); color:var(--text); padding:4px 8px; border-radius:6px; }
.session-row { display:flex; gap:8px; justify-content:flex-end; width:100%; }
.focus-row { display:flex; justify-content:flex-end; width:100%; }
.checkbox input { margin-right:6px; }
.lang { padding:6px 10px; background:transparent; color:var(--text); border:1px solid var(--border); border-radius:12px; cursor:pointer; font-size:18px; line-height:1; }
.lang.active { background: var(--panel); border-color: var(--accent); }
.theme-switch { display:flex; align-items:center; gap:8px; }
/* Іконки сонця/місяця тієї ж висоти, що й перемикач (24px) і жовтого кольору */
.theme-icon { color:#fbbf24; font-size:24px; width:24px; height:24px; line-height:24px; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.toggle { position:relative; width:44px; height:24px; display:inline-block; margin-top:6px; }
.toggle input { display:none; }
.toggle .slider { position:absolute; inset:0; background:var(--panel); border:1px solid var(--border); border-radius:24px; }
.toggle .slider::after { content:""; position:absolute; width:18px; height:18px; left:3px; top:50%; transform: translateY(-50%); background:var(--thumbLight); border-radius:50%; transition:all .2s ease; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.theme-dark .toggle input:checked + .slider::after { transform: translate(20px, -50%); background:var(--thumbDark); }

.hint { color: var(--muted); margin: 12px 0 16px; }
.grid { display:grid; grid-template-columns: 1fr; gap:16px; }
.input-block { min-width:0; }
.input-block { grid-column: 1 / span 1; }
label { display:block; margin-bottom:8px; color:var(--muted); }
input { width:100%; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--panel); color:var(--text); }
.results { width:100%; }
.form-brand { display:flex; justify-content:center; margin-top:6px; }
.form-logo { width:160px; height:auto; opacity:0.9; }
.brand-icon { width:28px; height:28px; vertical-align:middle; }
.brand-icon.small { width:20px; height:20px; }
.results { list-style:none; margin:8px 0 0; padding:0; border:1px solid var(--border); border-radius:10px; background:var(--panel); max-height:360px; overflow:auto; }
.results li { padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer; }
.results li:hover { background:var(--surfaceHover); }
.results li.active { background: var(--activeTint); border-left: 3px solid var(--accent); outline: none; }
.results mark { background:transparent; color:var(--accent); font-weight:600; }
.actions { grid-column: 1 / span 2; display:flex; gap:12px; align-items:center; }
.primary { padding:10px 14px; border:0; border-radius:8px; background:var(--accent); color:white; cursor:pointer; display:flex; align-items:center; gap:8px; }
.primary:hover { filter:brightness(1.1); }
/* Вт. кнопка: естетична «пігулка», акцентна обводка */
.secondary { padding:8px 12px; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:999px; cursor:pointer; transition: filter .2s ease, transform .1s ease, box-shadow .2s ease, border-color .2s ease; }
.secondary:hover { filter: brightness(1.06); transform: translateY(-1px); }
/* Компактна варіація вторинної кнопки — для лейблів у списках деталей */
.secondary.compact { padding:4px 10px; font-size:12px; line-height:1.2; border-radius:999px; vertical-align:middle; }
#uaShow.secondary.compact { margin-left:6px; }
#focusModeBtn { border: 1px solid var(--accent); color: var(--accent); background: transparent; padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; min-width: 60px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; font-weight: 600; }
#focusModeBtn::before { content: none; }
.focus-mode #focusModeBtn { background: var(--accent); color: white; }
#focusModeBtn.active { background: var(--accent); color: white; animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
  50% { transform: scale(1.06); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
  100% { transform: scale(1); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
}
/* Спеціальні кольори для кнопки збереження: зелена активна, червона неактивна */
#saveBtn.primary { background: var(--ok); }
#saveBtn.primary:not(:disabled):hover { filter: brightness(1.1); }
#saveBtn.primary:disabled { background: var(--bad); cursor: not-allowed; opacity: 0.95; }
.save-result { font-size:13px; color:var(--muted); }
.error-text { color: var(--bad); min-height:18px; }
.hint.error { color: var(--bad); }
input.invalid { border-color: var(--bad); }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px; }
.card { overflow:hidden; min-width:0; }
#npRefsBlock { overflow: visible; }
.refs-table { width:100%; border-collapse:collapse; }
.refs-table th, .refs-table td { padding:8px 10px; border-bottom:1px dashed var(--border); }
.refs-table th { text-align:left; color: var(--muted); font-weight:600; }
/* Підказка прокрутки прихована за замовчуванням, показуємо лише на мобільних */
.scroll-hint { display: none; }
.scroll-x { display:block; width:100%; overflow-x:auto; overflow-y:hidden !important; -webkit-overflow-scrolling: touch; cursor: grab; touch-action: pan-x; overscroll-behavior-x: contain; padding-bottom: 6px; }
.scroll-x.dragging { cursor: grabbing; }
/* Видимий індикатор прокрутки (WebKit/Chromium) */
.scroll-x::-webkit-scrollbar { height: 10px; width: 0px; /* ховаємо вертикальний бар у WebKit/Chromium */ }
.scroll-x::-webkit-scrollbar:vertical { width: 0px; background: transparent; }
.scroll-x::-webkit-scrollbar-track { background: var(--chipBg); }
.scroll-x::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.scroll-x::-webkit-scrollbar-thumb:hover { background: var(--linkHover); }
/* Firefox */
@supports (scrollbar-color: auto) {
  .scroll-x { scrollbar-width: thin; scrollbar-color: var(--border) var(--chipBg); }
}
/* Плавні підказки по краях контейнера */
.scroll-x.fade-edges { position: relative; }
.scroll-x.fade-edges::before,
.scroll-x.fade-edges::after { content:""; position:absolute; top:0; bottom:8px; width:16px; pointer-events:none; }
.scroll-x.fade-edges::before { left:0; background: linear-gradient(to right, var(--chipBg), rgba(0,0,0,0)); }
.scroll-x.fade-edges::after { right:0; background: linear-gradient(to left, var(--chipBg), rgba(0,0,0,0)); }
#npRefsBlock { grid-column: 1 / span 1; }
.card h3 { margin:0 0 8px; }
.card h3 { line-height:1.25; }
.card h4 { margin:8px 0 6px; color: var(--muted); }
.details { list-style:none; margin:0; padding:0; }
.details li { padding:6px 0; border-bottom:1px dashed var(--border); }
.details .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }
.details .preline { white-space: pre-line; }
.details #statsAgentNote .mono { font-family: inherit !important; font-weight: 600; font-size: 13px; }
.tech-note { margin-top:8px; font-size:12px; color: var(--muted); }
.tech-note .icon { margin-right:4px; font-size:14px; vertical-align:-2px; color: var(--accent); }
.badge { margin-left:8px; padding:2px 8px; border-radius:12px; background:var(--chipBg); border:1px solid var(--border); color:var(--muted); }
.ok { color: var(--ok); border-color: var(--ok); }
.bad { color: var(--bad); border-color: var(--bad); }
.method-label { font-size:12px; color: var(--muted); margin-left:6px; }

/* Footer
   Футер складається з локалізованого тексту (`#footerCopy`) та логотипа бренду нижче тексту.
   Розмір логотипа — ширина 80px, висота авто; є плавний hover та доступний focus-visible.
*/
.app-footer { margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; text-align: center; }
.app-footer a { color: var(--link); text-decoration: underline; }
.app-footer a:hover { color: var(--linkHover); }
/* Текст футера окремим блоком, щоб логотип був нижче */
.app-footer #footerCopy { display:block; margin-bottom:8px; }
/* Логотип у футері */
.app-footer .footer-logo-link { display:inline-block; margin-top:10px; }
.app-footer .footer-logo { width:80px; height:auto; transition: filter .2s ease, transform .2s ease; }
.app-footer .footer-logo-link:hover .footer-logo { filter: brightness(1.08) drop-shadow(0 3px 8px rgba(0,0,0,0.35)); transform: translateY(-1px); }
.app-footer .footer-logo-link:focus-visible .footer-logo { filter: brightness(1.1) drop-shadow(0 3px 10px rgba(0,0,0,0.4)); }

/* Мобільний фікс: збільшуємо клікабельну область посилань у футері */
.app-footer a { padding: 2px 4px; display: inline-block; }

/* Узгоджуємо стиль лінків у картках, блоці результату та хедері */
.card a, .save-result a, .app-header .subtitle a { color: var(--link); text-decoration: underline; }
.card a:hover, .save-result a:hover, .app-header .subtitle a:hover { color: var(--linkHover); }
/* Дозволяємо перенос довгих токенів у <code> усередині карток */
.card code { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

/* Перенос довгих рядків і «нерозривних» токенів у картках */
.details, .details li, .details .mono, .details .preline, .tech-note, .save-result, .subtitle {
  overflow-wrap: anywhere; /* дозволяє розривати довгі слова/URL */
  word-break: break-word; /* fallback для старих движків */
}

/* Мʼякий бейдж‑стиль для токенів у середині карти «Статистика», без моноширинного шрифту */
#statsCard code {
  font-family: inherit; /* звичайний шрифт, як у тексті */
  font-weight: 600;
  color: var(--muted);
  background: var(--chipBg);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 8px;
}

/* Типографіка блоку «Статистика»: заголовок більший, текст деталей тонший і менший */
#statsCard h3 { font-size: 18px; font-weight: 700; }
#statsCard .details { font-size: 13px; color: var(--muted); }
#statsCard .details li > span:first-child { color: var(--text); font-weight: 600; }

/* Типографіка блоку «Користувач»: такий самий ритм, як у «Статус доступів» */
#clientCard h3 { font-size: 18px; font-weight: 700; }
#clientCard .details { font-size: 13px; color: var(--muted); }
#clientCard .details li > span:first-child { color: var(--text); font-weight: 600; }

/* Focus mode: приховує несуттєві блоки, лишає форму і результати */
.focus-mode .status-row,
.focus-mode #clientCard,
.focus-mode #statsCard,
.focus-mode #statusCard,
.focus-mode .hint,
.focus-mode .subtitle { display:none !important; }
/* У фокус-режимі ховаємо бренд-іконку в хедері та логотип у футері */
.focus-mode .brand-icon { display: none !important; }
.focus-mode .app-footer .footer-logo-link { display: none !important; }
/* У фокус-режимі назва та версія завжди в один рядок */
.focus-mode .title h1 { white-space: nowrap; }
/* У фокус-режимі в блоці НП показуємо лише кнопку збереження */
.focus-mode #npRefsBlock .refs-table { display: none; }
.focus-mode #npRefsBlock #saveProgress { display: none !important; }
/* У фокус‑режимі залишаємо результат збереження видимим, щоб показувати лінки/помилки */
.focus-mode #npRefsBlock #saveResult { display: inline-block; }
/* (Прибрано) ASCII таймер більше не використовується */

/* Легкий ефект скан-ліній для ретро тем (без перевантаження DOM) */
.theme-crt body::before,
.theme-matrix body::before,
.theme-amber body::before { content:""; position:fixed; inset:0; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 2px); background-size: 100% 3px; }

/* Прибрано глобальне overflow-x:hidden на body, щоб не блокувати локальний горизонтальний скрол */

/* Кнопка збереження над таблицею та прогрес */
.actions-top { margin-bottom: 12px; display:flex; align-items:center; gap:12px; }
.progress { position: relative; width: 220px; height: 10px; border-radius: 6px; background: var(--border); overflow: hidden; }
.progress .bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); transition: width .2s linear; }
.progress .countdown { margin-left: 8px; font-size: 12px; color: var(--muted); }
/* Гарантуємо приховування елементів з атрибутом hidden (щоб «порожня смужка» не зʼявлялась на старті) */
.progress[hidden] { display: none !important; }

/* (Прибрано) Стилі ASCII таймера — замінено на новий фокус‑прогрес */

/* Фокус-прогрес: тонка доріжка з індикатором і флажком */
.focus-progress { display: inline-flex; align-items: center; gap: 10px; min-width: 220px; }
.focus-progress[hidden] { display: none !important; }
.fp-track { position: relative; width: 220px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.fp-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); left: 0%; box-shadow: 0 0 6px rgba(0,0,0,0.25); }
.fp-label { font-size: 12px; color: var(--muted); }
.fp-flag { font-size: 12px; opacity: 0; transition: opacity .35s ease; }
.fp-flag.visible { opacity: 1; }
.fp-flag.ok { color: var(--ok); }
.fp-flag.err { color: var(--bad); }

/* У фокус‑режимі показуємо новий прогрес */
.focus-mode #npRefsBlock #focusProgress { display: inline-flex; }

/* Breakpoints */
@media (min-width: 768px) {
  .app-header { flex-direction:row; align-items:center; justify-content:space-between; }
  .title { text-align:left; }
  .grid { grid-template-columns: 1fr 1fr; }
  .input-block { grid-column: 1 / span 2; }
  #npRefsBlock { grid-column: 1 / span 2; }
  .status-row { justify-content:center; }
}
@media (min-width: 1024px) {
  .container { max-width: 1280px; }
  .title h1 { font-size:32px; }
  /* Три службові картки в один ряд на широких екранах */
  .grid { grid-template-columns: 1fr 1fr 1fr; gap:12px; }
  /* Основні блоки форми та довідник займають усю ширину */
  .input-block { grid-column: 1 / span 3; }
  #npRefsBlock { grid-column: 1 / span 3; }
  /* Трохи зменшуємо розміри карток для компактності */
  .card { padding:10px; }
  .details li { padding:5px 0; }
}

/* Додатковий мобільний фікс: перенос заголовка у фокус‑режимі */
@media (max-width: 768px) {
  .focus-mode .title h1 { white-space: normal; flex-wrap: wrap; row-gap: 4px; }
  .status-row { gap: 6px; }
  /* Горизонтальна прокрутка таблиці рефів на вузьких екранах */
  .refs-table th, .refs-table td { white-space: nowrap; font-size: 14px; }
  /* Щоб скрол не пропадав при появі підказки, ширина за контентом */
  .refs-table { width: max-content; }
  /* Фіксована верстка таблиці, щоб ширини колонок застосовувались стабільно */
  .refs-table { table-layout: fixed; }
  /* Жорстко вмикаємо горизонтальний скрол на мобільних */
  .scroll-x { overflow-x: scroll; }
  /* Встановлюємо керовані ширини колонок для кращої читабельності */
  .refs-table th:nth-child(1), .refs-table td:nth-child(1) { width: 110px; }
  .refs-table th:nth-child(2), .refs-table td:nth-child(2) { width: 180px; }
  .refs-table th:nth-child(3), .refs-table td:nth-child(3) { width: 320px; }
  .refs-table th:nth-child(4), .refs-table td:nth-child(4) { width: 280px; }
  /* min-width перенесено у глобальні стилі */
  .scroll-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
}
/* Додатково: робимо внутрішній вміст таблиці шириною за контентом,
   щоб горизонтальний скрол гарантовано зʼявлявся за потреби */
.refs-wrap { width: 100%; min-width: 900px; margin: 0 auto; display: inline-block; }