/* VERXSON — verify page styles (full file)
   Location: cert-panel/verify/assets/style.css
   Includes: header, layout, forms, buttons, scanner, results, footer
   NOTE: The header logo now uses the horse image automatically.
         Put the file at: cert-panel/verify/assets/brand/verxson-logo-horse.png
*/

:root{
  --bg:#0b0d10;           /* page background */
  --panel:#11161d;        /* cards */
  --line:#202733;         /* borders */
  --txt:#e8eaee;          /* main text */
  --muted:#99a3b5;        /* muted text */
  --brand:#ffd000;        /* brand yellow */
  --brand-ink:#0b0d10;    /* dark text on yellow */
  --ok:#1fd37d;
  --warn:#ffb02e;
  --err:#ff6b6b;
  --info:#7aa2ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}

/* ---------- Header ---------- */
.hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0d1117,#0b0f14);
}
.hdr-left{display:flex;gap:12px;align-items:center}
.brand-txt .name{font-weight:800;letter-spacing:.08em}
.brand-txt .tag{font-size:12px;color:var(--muted);margin-top:2px}
.hdr-right .nav-link{color:var(--muted)}
.hdr-right .nav-link.current{color:var(--txt)}

/* Old yellow square "V" is preserved for layout,
   but we turn it into an image background with the horse logo. */
.logo-square{
  width:36px;height:36px;border-radius:8px;
  background: var(--brand) url("brand/verxson-logo-horse.png") center/28px 28px no-repeat !important;
  /* hide any letter inside */
  color:transparent !important;
  font-size:0 !important; line-height:0 !important; overflow:hidden;
  display:grid; place-items:center;
}

/* If a project uses <img class="logo-img"> instead of .logo-square */
.logo-img{height:36px;width:auto;display:block;border-radius:8px;background:transparent}

/* ---------- Layout ---------- */
.wrap{max-width:980px;margin:22px auto;padding:0 14px;display:grid;gap:16px}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
h1,h2{margin:0 0 12px}
.sub{margin:0 0 12px;color:var(--muted)}

/* ---------- Form ---------- */
.frm{display:grid;gap:10px}
.lbl{display:grid;gap:6px}
.cap{font-size:13px;color:var(--muted)}
.lbl input{
  background:#0d1116;
  color:var(--txt);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 12px;
  outline:none;
}
.lbl input:focus{border-color:#334155}
.or{color:var(--muted);text-align:center;margin:4px 0}

/* ---------- Buttons ---------- */
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{
  border-radius:10px;
  border:1px solid var(--line);
  padding:12px 14px;
  background:#151b23;
  color:var(--txt);
  cursor:pointer;
  transition:transform .04s ease;
  user-select:none;
}
.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:rgba(0,0,0,.2);font-weight:700}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.tab{background:#1b212b;color:var(--txt);border:1px solid var(--line);width:100%;margin-top:8px;font-weight:600}
.btn:active{transform:translateY(1px)}
.mt{margin-top:10px}
.hidden{display:none !important}

/* ---------- Scanner ---------- */
.scan{margin-top:12px;position:relative}
#video{
  display:block;
  width:100%;
  height:260px;
  background:#000;
  border-radius:12px;
  position:relative; z-index:1;
}
@media (min-width:780px){ #video{height:300px} }
.scan-snapshot{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; background:#000;
  border-radius:12px; z-index:2;
}
.scan-snapshot.hidden{display:none !important}
.scan-hud{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  padding:6px 12px; background:rgba(0,0,0,.55);
  border-radius:12px; font-weight:700; z-index:3;
}
.scan-hud.hidden{display:none !important}
.scan-tip{color:var(--muted);text-align:center;margin-top:12px}

/* ---------- Result panel ---------- */
.result-state{
  padding:10px;border-radius:9px;background:#0f141a;border:1px solid var(--line)
}
.result-state.ok{border-color:rgba(31,211,125,.5);background:rgba(31,211,125,.08)}
.result-state.warn{border-color:rgba(255,176,46,.5);background:rgba(255,176,46,.08)}
.result-state.err{border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.08)}
.result-state.info{border-color:rgba(122,162,255,.5);background:rgba(122,162,255,.08)}
.result-body{margin-top:10px;display:grid;gap:8px}
.result-row{display:grid;grid-template-columns:180px 1fr;gap:10px}
.result-key{color:var(--muted)}
.result-val a.btn-link{
  display:inline-block;padding:8px 12px;border-radius:10px;border:1px solid var(--line);
  text-decoration:none;background:#1b212b
}
.result-actions{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Footer ---------- */
.ftr{color:var(--muted);text-align:center;padding:14px 18px}

/* ----- VERXSON verify scanner PATCH START ----- */

/* === Scanner layout clamp (desktop + mobile) — patch v1 === */
#scanBox{
  position: relative;
  --scan-h: clamp(220px, 42vw, 380px);
  background:#0e1117;
  border-radius:12px;
  padding-bottom: 40px;
}
#scanBox video,
#scanBox canvas{
  display:block;
  width:100%;
  height: var(--scan-h);
  object-fit: cover;
  background:#000;
}
#scanBox .scan-tip{
  position:absolute;
  bottom:8px; right:8px;
  opacity:.8; font-size:14px;
  background:rgba(0,0,0,.35);
  padding:4px 8px; border-radius:6px;
}
#btnStop{
  position:absolute;
  bottom:8px; left:8px;
  z-index:2;
}
@media (max-width: 640px){
  #scanBox{ --scan-h: clamp(200px, 52vw, 320px); }
}
/* === Scanner layout clamp — patch v2 (safe-append) === */
/* 1) Стабільна висота, без чорної смуги знизу */
#scanBox{
  position: relative;
  --scan-h: clamp(220px, 42vw, 380px);
  background:#0e1117;
  border-radius:12px;
  padding-bottom: 0; /* раніше було 40px — прибрано */
}
/* стабільна висота відео */
#scanBox video,
#scanBox canvas{
  display:block;
  width:100%;
  height: var(--scan-h);
  object-fit: cover;
  background:#000;
}
/* 2) Кнопка + підказка — оверлеї; підказка не блокує кліки */
#btnStop{
  position:absolute;
  bottom:8px; left:8px;
  z-index:2;
}
#scanBox .scan-tip{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:12px;                 /* базово внизу по центру */
  opacity:.85; font-size:14px;
  background:rgba(0,0,0,.35);
  padding:4px 8px; border-radius:6px;
  pointer-events:none;         /* не заважає натиснути кнопку */
}
/* 3) На вузьких екранах підняти підказку вище кнопки */
@media (max-width: 480px){
  #scanBox{ --scan-h: clamp(200px, 52vw, 320px); }
  #scanBox .scan-tip{ bottom: 56px; } /* запас під кнопкою */
}


/* === End of patch v1 === */

/* ----- VERXSON verify scanner PATCH END ----- */


/* === Patch: Stop button below video, same style as Start, no overlay === */
#btnStop{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  width: 100% !important;
  margin-top: 10px !important;
}


/* --- PATCH vTipTorch-2025-10-28 --- */
/* Ensure scan container is positioning context */
#scanBox{ position: relative; }

/* Place the tip inside the video area, bottom-aligned (no overlap with Stop button) */
.scan-tip{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--scan-tip-bottom, 24px); /* adjusted via JS to align to video bottom */
  margin: 0;
  padding: 8px 12px;
  background: rgba(0,0,0,.15);
  color: #fff !important;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
  z-index: 4; /* above video */
}

/* Keep Stop button below video and full width (as previously requested) */
#btnStop{
  position: static !important;
  width: 100% !important;
  margin-top: 10px !important;
}


/* --- PATCH vFixBlackGap-2025-10-28 --- */
#scanBox{ padding-bottom: 0 !important; }

/* --- PATCH vCanvasLayoutFix-2025-10-28 --- */
/* Prevent extra black area: make Quagga canvases non-layout */
#scanBox > canvas{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  pointer-events:none !important;
  display:block !important; /* keep in DOM for Quagga timing */
}

/* --- UI Update: Status Badges & PDF Button --- */

/* Бейдж статусу (Активний / Не дійсний) */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Зелений (Активний) */
.status-badge.active {
  background: rgba(31, 211, 125, 0.15); /* напівпрозорий зелений */
  color: #1fd37d; /* яскраво-зелений текст */
  border: 1px solid rgba(31, 211, 125, 0.2);
}

/* Червоний (Прострочений) */
.status-badge.expired {
  background: rgba(255, 107, 107, 0.15); /* напівпрозорий червоний */
  color: #ff6b6b; /* яскраво-червоний текст */
  border: 1px solid rgba(255, 107, 107, 0.2);
}

/* Оновлена кнопка PDF */
.btn.btn-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  color: var(--brand); /* Жовтий текст */
  border: 1px solid var(--brand); /* Жовта рамка */
  transition: all 0.2s ease;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.btn.btn-pdf:hover {
  background: var(--brand);
  color: var(--brand-ink); /* Чорний текст при наведенні */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 208, 0, 0.2);
}

.btn.btn-pdf .icon {
  font-size: 16px;
}


/* --- UI Upgrade: Compact Result (Fixed Badge) --- */

/* 1. Основний контейнер рядка */
.result-body .row {
  position: relative; /* !ВАЖЛИВО: Це робить рядок "базою" для бейджа */
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 0;
  margin: 0;
}

/* 2. Прибираємо зайві розділювачі */
.result-body .sep {
  display: none;
}

/* 3. Заголовки (Тип, Номер...) */
.result-body strong {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 4px; /* Відступ до значення */
  line-height: 1;
}

/* 4. Значення (Сам текст) */
.result-body .row {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  line-height: 1.3;
  padding-right: 10px; /* Щоб довгий текст не наїжджав на правий край */
}

/* 5. Виправлення БЕЙДЖА (Абсолютне позиціонування) */
.status-badge {
  position: absolute; /* Вириваємо з потоку тексту */
  top: 8px;           /* Рівняємо по верхньому краю (там де заголовок) */
  right: 0;           /* Притискаємо до правого краю */
  
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  
  /* Скидаємо старі проблемні стилі */
  float: none;
  margin: 0;
  transform: none;
}

/* 6. Останній рядок (Товар) */
.result-body .row:last-of-type {
  border-bottom: none;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 8px;
}

/* Назва товару */
.result-body .row:last-of-type {
  font-size: 15px;
  color: #e2e8f0;
}

/* SKU/EAN під товаром */
.result-body small {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-family: monospace;
  font-size: 11px;
}

/* Кнопка PDF */
.btn.btn-pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
}

.btn.btn-pdf:hover {
  background: var(--brand);
  color: #000;
}

/* --- UI Upgrade: Accordion List --- */

/* Контейнер списку */
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Сам елемент (картка) */
.doc-accordion {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.2s;
}

/* Заголовок (те, що видно завжди) */
.doc-header {
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.doc-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.doc-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Стрілочка */
.doc-arrow {
  color: #64748b;
  transition: transform 0.3s ease;
  font-size: 12px;
}

/* Коли відкрито - стрілка повертається */
.doc-accordion.open .doc-arrow {
  transform: rotate(180deg);
}

/* Прихований контент */
.doc-content {
  display: none; /* Приховано за замовчуванням */
  padding: 0 14px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  animation: slideDown 0.3s ease;
}

.doc-accordion.open .doc-content {
  display: block; /* Показуємо, коли є клас open */
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Маленькі бейджі в списку */
.mini-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.mini-badge.active { background: #1fd37d; box-shadow: 0 0 5px rgba(31, 211, 125, 0.5); }
.mini-badge.expired { background: #ff6b6b; }

/* --- UI POLISH: Better Contrast & Borders --- */

/* 1. Поля вводу: чіткіша рамка + яскравий акцент при кліку */
.lbl input {
  background: #0d1116; /* Глибокий темний фон */
  border: 1px solid #30363d; /* Світліша рамка, щоб було видно межі */
  transition: all 0.2s ease;
  color: #fff;
  font-weight: 500;
}

/* Коли натискаєш на поле - рамка стає жовтою */
.lbl input:focus {
  border-color: var(--brand); 
  box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.15); /* Легке світіння */
  background: #161b22; /* Трохи світлішає всередині */
}

/* 2. Другорядні кнопки ("Очистити", "Сканувати") */
/* Робимо їм видимий контур, щоб вони не зливалися */
.btn {
  border: 1px solid rgba(255, 255, 255, 0.15); /* Напівпрозора біла рамка */
  background: rgba(255, 255, 255, 0.03); /* Дуже легкий фон */
  color: #e6edf3;
  font-weight: 600;
  transition: all 0.2s ease;
}

/* При наведенні мишкою */
.btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

/* 3. Головна жовта кнопка ("Перевірити") */
/* Їй рамка не треба, але зробимо її більш насиченою */
.btn.primary {
  background: var(--brand);
  border: 1px solid var(--brand); /* Рамка того ж кольору для розміру */
  color: #0b0d10; /* Чорний текст для контрасту */
  box-shadow: 0 4px 12px rgba(255, 208, 0, 0.2); /* Тінь */
}

.btn.primary:hover {
  background: #ffdb4d; /* Світліша при наведенні */
  transform: translateY(-1px); /* Легкий ефект підняття */
  box-shadow: 0 6px 16px rgba(255, 208, 0, 0.3);
}

/* 4. Кнопка сканування (велика нижня) */
/* Їй можна додати легкий синій або нейтральний відтінок, щоб відрізнялась */
.btn[onclick="startScan()"] {
  margin-top: 5px;
  border-color: #30363d;
  color: #8b949e; /* Трохи приглушений текст, поки не наведеш */
}
.btn[onclick="startScan()"]:hover {
  color: #fff;
  border-color: #58a6ff; /* Синя рамка при наведенні - натяк на камеру */
  background: rgba(56, 139, 253, 0.1);
}

/* === Scanner: fix tip overlay positioning (desktop) === */
/* The tip and HUD should be positioned relative to the video area, not the whole #scanBox.
   We wrap video/UI into .scan-frame in index.html to avoid overlapping the Stop button. */
#scanBox .scan-frame{ position: relative; }

/* Keep the tip inside the video area */
#scanBox .scan-frame .scan-tip{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 12px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: rgba(0,0,0,.35) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

/* Stop button stays below video, full width */
#btnStop{
  position: static !important;
  width: 100% !important;
  margin-top: 10px !important;
}