:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --ink: #1f2933;
  --muted: #6b7280;
  --border: #e3e8ee;
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --flash: #ecfdf5;
  --flash-border: #6ee7b7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; }
.topbar nav { display: flex; align-items: center; gap: 1rem; }
.topbar nav a { color: var(--accent); text-decoration: none; }
.topbar nav a:hover { text-decoration: underline; }
.topbar .user { color: var(--muted); font-size: 0.9rem; }
.topbar .logout { color: var(--muted); }

.container { max-width: 860px; margin: 1.5rem auto; padding: 0 1.25rem; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
.muted { color: var(--muted); }
.note { margin-top: 1.5rem; font-size: 0.9rem; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;   /* egységes függőleges dobozköz (= a rács vízszintes gapje) */
}
.card.center { text-align: center; }
.card.narrow { max-width: 380px; margin: 3rem auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;   /* a rács alatti doboz is ugyanannyira legyen */
}
/* Rácson belül a gap adja a közt, ne duplázzon a kártya-margó. */
.grid > .card { margin-bottom: 0; }
.stat-label { color: var(--muted); font-size: 0.85rem; }
.stat-value { font-size: 1.75rem; font-weight: 700; margin-top: 0.25rem; }

.btn {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
}
.btn.primary, .btn.google { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* Inaktív gomb (pl. tervezett funkció): szürkített, nem kattintható. */
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn.google { margin-top: 1rem; }

.flash {
  background: var(--flash);
  border: 1px solid var(--flash-border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
}

/* Modern toast értesítések (a [data-toast] flash-eket a base.html JS-e ide emeli). */
#toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 3000; display: flex; flex-direction: column; gap: 0.55rem; width: min(420px, 92vw); }
.toast {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: var(--card); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 10px; padding: 0.7rem 0.85rem; font-size: 0.92rem; line-height: 1.4;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.16); animation: toast-in 0.22s ease;
}
.toast.ok { border-left-color: #10b981; }
.toast.warn { border-left-color: #ef4444; background: #fef2f2; }
.toast .toast-msg { flex: 1; word-break: break-word; }
.toast .toast-x { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1.25rem; line-height: 1; padding: 0 0.15rem; }
.toast .toast-x:hover { color: var(--ink); }
.toast.hide { opacity: 0; transform: translateX(14px); transition: opacity 0.2s ease, transform 0.2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.settings-form { display: flex; flex-direction: column; gap: 0.5rem; }
.setting-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 1rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.setting-row label { display: flex; flex-direction: column; gap: 0.15rem; }
.setting-label { font-weight: 600; }
.setting-desc { color: #374151; font-size: 0.82rem; line-height: 1.45; margin: 0.1rem 0; }

/* Beállítások fülek (CSS-only rádió-trükk). */
.tabradio { position: absolute; left: -9999px; opacity: 0; }
.settings-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; }
.settings-tabs .tab {
  padding: 0.5rem 1rem; cursor: pointer; color: var(--muted);
  border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; margin-bottom: -1px;
}
.settings-tabs .tab:hover { color: var(--ink); }
/* A panel rejtett; láthatóként flex-oszlop egyenletes réssel, hogy a beállítás-dobozok ne érjenek össze. */
.settings-panel { display: none; flex-direction: column; gap: 0.6rem; }
.setting-key { color: var(--muted); font-size: 0.75rem; }
.setting-input input[type="text"] { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; }
.setting-input select { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; background: var(--card); }
.setting-input input[type="checkbox"] { width: 1.2rem; height: 1.2rem; }
.settings-form .btn { align-self: flex-start; margin-top: 0.5rem; }

/* --- Fázis 1 --- */
/* 1000px → 1300px (+30%): a táblázatos oldalak (források, lefedettség) kiférjenek. */
.container { max-width: 1300px; }
.small { font-size: 0.8rem; }
.stat-value.small { font-size: 1rem; }

.setting-row.wide { grid-template-columns: 1fr; }
.json-input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.quick-filter { padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; min-width: 308px; }
.search-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.search-form input { flex: 1; padding: 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; }

table.data { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; background: var(--card); }
table.data th, table.data td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; vertical-align: top; }
table.data th { color: var(--muted); font-weight: 600; }
table.data td.r, table.data th.r { text-align: right; }
table.data tr.excluded { color: var(--muted); background: #fafafa; }
table.data tr.selected-row { background: #eff6ff; }

table.kv { width: 100%; border-collapse: collapse; }
table.kv td { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
table.kv td.r { text-align: right; }

.grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .grid.two { grid-template-columns: 1fr; } }

.big-price { font-size: 1.8rem; font-weight: 700; margin: 0.25rem 0; }
/* Saját bruttó ár kiemelése (kék) — az áttekintő listában és a termék-adatlapon. */
.own-price { color: #1d4ed8; font-weight: 700; }
/* Javaslati/kiemelt ár a termék-adatlapon és a javaslat-listában (narancs). */
.price-highlight { color: #c2410c; font-weight: 700; font-size: 1.15em; }
.method { margin: 0.25rem 0; }

.badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge.ok { background: #ecfdf5; color: #047857; }
.badge.bad { background: #fef2f2; color: #b91c1c; }

.flash.warn { background: #fffbeb; border-color: #fcd34d; }

.watch-form { margin: 0.5rem 0 1rem; }
.switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.switch input { width: 1.2rem; height: 1.2rem; }

.feed-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.feed-form .field { display: flex; flex-direction: column; gap: 0.25rem; }
.feed-form select { padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; }

/* --- Fázis 1c: katalógus böngésző --- */
.catalog-layout { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 760px) { .catalog-layout { grid-template-columns: 1fr; } }

.catalog-tree { max-height: 70vh; overflow: auto; padding: 0.75rem; }
.catalog-tree .tree-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
.cat-root, .cat-children { list-style: none; margin: 0; padding: 0; }
.cat-children { margin-left: 0.85rem; border-left: 1px solid var(--border); padding-left: 0.4rem; }
.catalog-tree li { margin: 0.05rem 0; }
.catalog-tree details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.catalog-tree details > summary::-webkit-details-marker { display: none; }
.catalog-tree details > summary::before { content: "▸"; color: var(--muted); font-size: 0.7rem; width: 1rem; display: inline-block; }
.catalog-tree details[open] > summary::before { content: "▾"; }
.cat-link { display: inline-block; padding: 0.12rem 0.3rem; border-radius: 5px; text-decoration: none; color: var(--ink); font-size: 0.88rem; }
.cat-link.leaf { margin-left: 1rem; }
.cat-link:hover { background: #f1f5f9; }
.cat-link.active { background: var(--accent); color: var(--accent-ink); }
.cat-count { color: var(--muted); font-size: 0.75rem; margin-left: 0.2rem; }
.cat-link.active .cat-count { color: #dbeafe; }

.product-results { min-width: 0; }
/* A jobb oszlop első eleme (táblázat vagy üres-állapot szöveg) ne kapjon felső margót → a
   Kategóriák kártya felső széle egy vonalba kerül a termék-táblázat tetejével. */
.product-results > :first-child { margin-top: 0; }
/* A találat/segéd-szöveg a rács FÖLÖTT, teljes szélességben (hogy a két doboz teteje igazodjon). */
.result-hint { margin: 0 0 0.75rem; }

/* --- Fázis 2: források --- */
.badge { background: #eef2f7; color: var(--muted); }
form.inline { display: inline; }
.nowrap { white-space: nowrap; }
.btn-sm { font-size: 0.78rem; padding: 0.2rem 0.5rem; border-radius: 5px; border: 1px solid var(--border); background: var(--card); color: var(--ink); cursor: pointer; }
.btn-sm.ok { background: #ecfdf5; color: #047857; border-color: #6ee7b7; }
.btn-sm.bad { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.btn-sm.primary { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }  /* világoskék */
.card h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
table.data a { word-break: break-all; }

/* --- UX-átrendezés: dashboard (spec 8/18 backlog a/c) --- */
.section-head { font-size: 1.05rem; margin: 1.5rem 0 0.6rem; color: var(--muted); font-weight: 600; }
.section-head:first-of-type { margin-top: 1rem; }

/* Kattintható kártya (link a szűrt nézetre). */
a.card { color: inherit; text-decoration: none; display: block; transition: border-color .12s, box-shadow .12s; }
a.card:hover { border-color: #c7d2e3; box-shadow: 0 1px 4px rgba(15,23,42,.06); }

/* Teendő-kártyák vizuális hierarchiája: kiemelt ha van teendő, halvány ha 0 (spec 8/18 d-előzetes). */
.card.todo .stat-value { font-size: 1.75rem; font-weight: 700; margin-top: 0.25rem; }
.card.todo.no-todo { background: #fafbfc; }
.card.todo.no-todo .stat-value { color: var(--muted); }
.card.todo.has-todo { border-color: #cbd5e1; }
.card.todo.has-todo.warn { background: #fffbeb; border-color: #fcd34d; }
.card.todo.has-todo.warn .stat-value { color: #b45309; }
.card.todo.has-todo.bad { background: #fef2f2; border-color: #fecaca; }
.card.todo.has-todo.bad .stat-value { color: #b91c1c; }
.card.todo-ok { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }

/* Gyors műveletek gombsora. */
/* Gyorsgombok: max. 4 egyforma széles gomb soronként (a rács sortöri az 5.-et). */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; align-items: stretch; }
.quick-actions > form.inline { display: block; margin: 0; }
.quick-actions .btn { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; text-align: center; height: 42px; padding: 0 0.9rem; line-height: 1.15; }
@media (max-width: 720px) { .quick-actions { grid-template-columns: repeat(2, 1fr); } }

/* Hibás-jelvény (a halott piros .badge.bad mellé). */
.badge.warn { background: #fffbeb; color: #b45309; }
a.active-filter { font-weight: 700; text-decoration: underline; }

/* --- Termékek oldal: fülek + áttekintő lista (UX-szál, spec 8/18) --- */
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.tabs .tab {
  padding: 0.5rem 1rem; text-decoration: none; color: var(--muted);
  border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
}
.tabs .tab:hover { color: var(--ink); }
.tabs .tab.active { color: var(--ink); font-weight: 600; background: var(--card); border-color: var(--border); }

/* Gyorsszűrő-chipek. align-items:center → a chipek nem nyúlnak a magasabb inputhoz, a szöveg középen. */
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; align-items: center; }
.filters .chip {
  display: inline-flex; align-items: center; line-height: 1;
  font-size: 0.82rem; padding: 0.35rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--ink); text-decoration: none;
}
.filters .chip:hover { border-color: #c7d2e3; }
.filters .chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.legend { margin: 0 0 0.75rem; line-height: 1.9; }

/* Készlet-állapot. */
.stock.in { color: #047857; font-weight: 600; }
.stock.low { color: #b45309; font-weight: 600; }
.stock.out { color: #b91c1c; font-weight: 600; }

/* Árrés-szorzó szín a min. szorzóhoz mérve. */
.margin { font-weight: 700; }
.margin.ok { color: #047857; }
.margin.warn { color: #b45309; }
.margin.bad { color: #b91c1c; }

/* Sűrűbb áttekintő tábla. */
table.overview td { font-size: 0.86rem; }
table.overview td.r { white-space: nowrap; }

/* Javasolt ár az áttekintő Javaslat oszlopában: lila, bold (felül; a címke alatta). */
.proposed-price { color: #7c3aed; font-weight: 700; white-space: nowrap; }
/* „Nem változik" (már a konkurencia fölött vagyunk) — kékeszöld. */
.price-hold { color: #0d9488; font-weight: 700; white-space: nowrap; }
.badge.hold { background: #ccfbf1; color: #0f766e; }

/* Külső-link ikon (termékoldal új lapon) — a 🔗 emoji helyett, a link színét örökli. */
.ext-icon { width: 0.95em; height: 0.95em; vertical-align: -0.12em; color: var(--accent); }
a:hover .ext-icon { color: var(--accent); opacity: 0.8; }

/* Forrás-oldal <title> a forráslistában: sötét szürke (a .muted-nél sötétebb). */
.page-title { color: #374151; }

/* Ártörténet chart — fejléc-csoport + popup (modal). */
.th-left { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pricechart-backdrop {
  display: none; position: fixed; inset: 0; z-index: 2000; padding: 1rem;
  background: rgba(15, 23, 42, .45); align-items: center; justify-content: center;
}
.pricechart-modal {
  background: var(--card); border-radius: 12px; width: min(820px, 96vw); max-height: 90vh;
  overflow: auto; padding: 1rem 1.25rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.pricechart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.pricechart-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.pricechart-canvas-wrap { position: relative; height: 380px; }
/* Termékek lista: ártörténet sor-gomb + kinyíló sor. */
.chart-icon { background: none; border: none; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 .25rem; }
.pc-row-toggle { background: none; border: none; cursor: pointer; font-size: 0.95rem; padding: 0 .15rem; line-height: 1; }
.pc-row-toggle.open { filter: brightness(0.6); }
tr.pc-expand > td { background: #fafbfc; padding: 0.75rem 1rem; }

/* Árjavaslatok — szellős, kártya-alapú döntési nézet (spec 8/18). */
.prop-section { margin-bottom: 1.75rem; }
.prop-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; }
.prop-section-head h2 { font-size: 1.15rem; margin: 0; }
.select-all-lbl { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }

.prop-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin-bottom: 0.75rem;
}
.prop-head { display: flex; align-items: flex-start; gap: 0.65rem; }
.prop-check { margin-top: 0.3rem; flex: none; }
.prop-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.prop-title a { font-size: 1.02rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.prop-title a:hover { text-decoration: underline; }
.prop-title code { color: var(--muted); }

.prop-prices { display: flex; align-items: center; gap: 1rem; margin: 0.75rem 0 0; padding-left: 1.8rem; flex-wrap: wrap; }
.price-box { display: flex; flex-direction: column; }
.price-box .lbl { font-size: 0.72rem; color: var(--muted); }
.price-box .val { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.prop-arrow { color: var(--muted); font-size: 1.25rem; }
.chg-up-val { color: #047857; }
.chg-down-val { color: #b91c1c; }
.badge.chg-up { background: #ecfdf5; color: #047857; }
.badge.chg-down { background: #fef2f2; color: #b91c1c; }

.prop-metrics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; padding-left: 1.8rem; }
.metric { background: var(--bg); border-radius: 7px; padding: 0.35rem 0.6rem; line-height: 1.3; }
.metric span { display: block; font-size: 0.7rem; color: var(--muted); }
.metric b { font-size: 0.85rem; font-weight: 600; }

.reason-callout { margin: 0.75rem 0 0 1.8rem; padding: 0.5rem 0.7rem; border-radius: 7px; font-size: 0.85rem; line-height: 1.45; }
.reason-callout.gyanus { background: #fffbeb; color: #92400e; }
.reason-callout.varakozo { background: #eff6ff; color: #1e40af; }
.reason-callout.auto { background: #ecfdf5; color: #047857; }

.comp-chips { margin: 0.75rem 0 0 1.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.comp-chip { font-size: 0.8rem; border: 1px solid var(--border); border-radius: 6px; padding: 0.18rem 0.5rem; white-space: nowrap; }
.comp-chip a { color: var(--accent); text-decoration: none; }
.comp-chip a:hover { text-decoration: underline; }
.comp-chip .badge { margin-left: 0.2rem; }

.prop-actions { display: flex; align-items: center; gap: 0.5rem; margin: 0.85rem 0 0 1.8rem; }
.prop-detail-link { margin-left: auto; color: var(--accent); text-decoration: none; }
.prop-detail-link:hover { text-decoration: underline; }

.prop-bulk { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; background: var(--bg); border-radius: 8px; }

/* Dashboard — futás-állapot pötty (zöld=siker / piros=hiba). */
.run-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 0.4rem; vertical-align: middle; cursor: help; }
.run-dot.ok { background: #10b981; }
.run-dot.stale { background: #f59e0b; }
.run-dot.bad { background: #ef4444; }
.sync-state { cursor: help; font-size: 0.85em; margin-right: 0.15rem; }
.sync-state.off { opacity: 0.85; }
/* A futás-állapot (idő + pötty) egyben hover-célpont → könnyebb eltalálni, mint a 9px pötty. */
.run-status { cursor: help; white-space: nowrap; }

/* Gyors, saját tooltip a natív `title` (~1 mp késés, pici célpont) helyett — JS NÉLKÜL (CSS-only),
   mert a tesztkörnyezet nem futtat JS-t. Azonnal (≈60 ms) megjelenik hoverre. */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  z-index: 50;
  width: max-content;
  max-width: 300px;
  white-space: normal;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  background: #1f2937;
  color: #f9fafb;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.06s ease, visibility 0.06s ease;
  pointer-events: none;
}
.tip:hover::after, .tip:focus::after { opacity: 1; visibility: visible; }
/* Jobbra igazított futás-státusz: a tooltip a jobb szélhez igazodik (ne lógjon ki a képből). */
.run-status.tip::after { right: 0; }
/* A sor elején lévő ✅/⛔ ikon: a tooltip a bal szélhez igazodik. */
.sync-state.tip::after { left: 0; }