/* =====================================================================
   LKW CRM - megjelenés
   Mobile-first: az alapstílusok telefonra szólnak, a nagyobb képernyő
   a @media blokkokban kap oldalsávot és több oszlopot.
   Árnyékot szándékosan nem használunk - finom keret és halvány háttér
   adja a tagolást, mert az árnyékos panelek régies hatásúak.
   ===================================================================== */

:root {
  color-scheme: light;

  /* Felület */
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #fbfcfd;
  --surface-3: #f1f3f6;
  --line: #e4e7ec;
  --line-strong: #d3d8e0;

  /* Szöveg */
  --text: #11181f;
  --text-2: #4e5b6b;
  /* A halvány szövegszín is olvasható kell legyen: fehéren 5,2:1, a halvány
     piros kártyán is 4,7:1. Ennél világosabbra ne vidd. */
  --text-3: #68717e;

  /* Márka */
  --brand: #d6232c;
  --brand-dark: #b01c24;
  --brand-soft: #fdf2f2;
  --brand-line: #f6d4d6;

  /* Márkaszín két külön szerepben. Ezeket NE cseréld --brand-re:
     --brand-ink  = márkaszínű SZÖVEG halvány márkahátéren (chip, aktív menü),
     --brand-solid = fehér szöveget hordozó TELI felület (elsődleges gomb).
     Sötét módban a --brand világosabb, ezért ott mindkettő külön értéket kap. */
  --brand-ink: #b01c24;
  --brand-solid: #d6232c;
  --brand-solid-hover: #b01c24;

  /* Jelzések */
  --ok: #15803d;
  --ok-soft: #f0fdf4;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --info: #1d4ed8;
  --info-soft: #eff4ff;
  --danger: #c81e1e;   /* a halvany piros chipen is 5,2:1 */
  --danger-soft: #fef2f2;
  /* "Megnyitotta" es "Targyalas" sajat szine - token, hogy a sotet valtozat
     egy helyen alljon, es ne maradjon le rola egyetlen felhasznalo sem. */
  --indigo: #4338ca;
  --indigo-soft: #eef2ff;
  --violet: #6d28d9;
  --violet-soft: #f5f3ff;

  /* Forma */
  --r-sm: 8px;
  --r: 11px;
  --r-lg: 16px;
  --r-full: 999px;

  --sidebar-w: 236px;
  --header-h: 56px;
  --tabbar-h: 60px;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Az ikonok soha ne nyúljanak meg: a méretet mindig a hely szabja meg. */
svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss03" 1;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  /* Cegnev, e-mail es azonosito is kerul cimsorba: ha nincs benne szokoz,
     telefonon enelkul vizszintesen szetfeszitene a lapot. */
  overflow-wrap: anywhere;
}

h1 { font-size: 1.3rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }

p { margin: 0 0 0.6em; }

a {
  color: inherit;
  text-decoration: none;
}

a.link {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--info) 35%, transparent);
}

a.link:hover { text-decoration-color: var(--info); }

/* Számok mindig egy szélességűek, hogy a listák ne ugráljanak */
.num, td.num, .money, .tabular { font-variant-numeric: tabular-nums; }

.mono { font-family: var(--mono); font-size: 0.86em; }

/* ---------------------------------------------------------------------
   Váz
   --------------------------------------------------------------------- */

.app {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Mobil fejléc */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--header-h);
  padding: 0 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.topbar .brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--brand-solid);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.topbar .spacer { flex: 1; }

.content {
  padding: 14px 14px calc(var(--tabbar-h) + 22px);
  max-width: 1280px;
  margin: 0 auto;
}

/* Alsó navigáció - telefonon ez a fő navigáció */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: var(--tabbar-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--line);
}

.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
}

.tabbar a svg { width: 21px; height: 21px; }
.tabbar a.on { color: var(--brand); }

/* Oldalsáv - csak nagy képernyőn */
.sidebar { display: none; }

@media (min-width: 900px) {
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 16px 12px;
    background: var(--surface);
    border-right: 1px solid var(--line);
  }

  .sidebar .brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 16px;
    font-weight: 650;
    font-size: 1rem;
    letter-spacing: -0.02em;
  }

  .sidebar .brand-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--brand-solid);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
  }

  .sidebar nav { display: flex; flex-direction: column; gap: 1px; }

  .sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
  }

  .sidebar nav a svg { width: 18px; height: 18px; opacity: 0.8; }
  .sidebar nav a:hover { background: var(--surface-3); color: var(--text); }

  .sidebar nav a.on {
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-weight: 560;
  }

  .sidebar nav a.on svg { opacity: 1; }

  .sidebar .sect {
    padding: 14px 10px 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .sidebar .bottom { margin-top: auto; }

  .topbar { display: none; }
  .tabbar { display: none; }
  .content { padding: 22px 26px 40px; }
}

/* ---------------------------------------------------------------------
   Oldalfej
   --------------------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.page-head .grow { flex: 1; min-width: 0; }

.page-head h1 { font-size: 1.35rem; }

.page-head .sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-3);
}

.page-head .actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .page-head h1 { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------------
   Kártya
   --------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.card + .card { margin-top: 12px; }

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.card-head h2, .card-head h3 { flex: 1; min-width: 0; }

.card-head .hint { font-size: 12px; color: var(--text-3); }
.card-head > svg { width: 17px; height: 17px; color: var(--text-3); }

.card-body { padding: 14px; }
.card-body.tight { padding: 0; }

.card-foot {
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

/* Rács */
.grid { display: grid; gap: 12px; }

/* A rács- és flex-elemek alapértelmezésben nem zsugorodnak a tartalmuk alá
   (min-width: auto), ezért egy hosszú, nem törhető sor vízszintesen
   kinyújtaná az egész lapot telefonon. Ez állítja meg. */
.grid > *,
.stack > *,
.card,
.list,
.row,
.row > * { min-width: 0; }

@media (min-width: 700px) {
  .grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .grid.sidebar-right { grid-template-columns: minmax(0, 1fr) 330px; }
}

/* ---------------------------------------------------------------------
   Számkártya
   --------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 760px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat {
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.stat .label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}

.stat .value {
  margin-top: 3px;
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat .foot { margin-top: 3px; font-size: 12px; color: var(--text-3); }
.stat.accent { border-color: var(--brand-line); background: var(--brand-soft); }
.stat.accent .value { color: var(--brand-ink); }

/* ---------------------------------------------------------------------
   Lista - telefonon ez váltja ki a táblázatot
   --------------------------------------------------------------------- */

.list { display: flex; flex-direction: column; }

.row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.row:last-child { border-bottom: 0; }
a.row:active { background: var(--surface-3); }

@media (hover: hover) {
  a.row:hover { background: var(--surface-2); }
}

.row .grow { flex: 1; min-width: 0; }

.row .title {
  font-weight: 550;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nevnel egy sor a helyes, de ahol a cim maga a mondanivalo (teendo szovege),
   ott a levagas tartalmat veszit: a .wrap ket sorig engedi. */
.row .title.wrap {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.row .meta {
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--text-3);
}

.row .chev { flex-shrink: 0; color: var(--text-3); opacity: 0.6; }
.row .chev svg { width: 16px; height: 16px; }

/* Avatar / monogram */
.ava {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
}

/* A kep es a mogotte allo tartalek ikon ugyanabban a racscellaban all, igy
   ha a kep nem toltodik be (onerror="this.remove()"), az ikon lathatova valik
   a bongeszo torott-kep jelzese helyett. */
.ava > * { grid-area: 1 / 1; }
.ava img { width: 100%; height: 100%; object-fit: cover; }
.ava.sm { width: 26px; height: 26px; font-size: 10.5px; }
.ava.lg { width: 52px; height: 52px; font-size: 17px; }

/* ---------------------------------------------------------------------
   Táblázat - csak nagy képernyőn
   --------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.table th {
  padding: 9px 12px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

table.table tr:last-child td { border-bottom: 0; }
table.table tbody tr:hover { background: var(--surface-2); }
table.table td.num, table.table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Segédosztályok: !important kell, mert a komponens-szabályok (pl. a
   .page-head .actions flexe) egyébként erősebbek lennének. */
.only-wide { display: none !important; }
.only-narrow { display: revert !important; }

@media (min-width: 900px) {
  .only-wide { display: revert !important; }
  .only-narrow { display: none !important; }
}

/* ---------------------------------------------------------------------
   Jelzések: chip, pötty, badge
   --------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 540;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid transparent;
}

.chip .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
  flex-shrink: 0;
}

/* Ajánlat-státuszok - ugyanaz a hét állapot, mint a gyorsajánlatnál */
.chip.s-draft       { background: var(--surface-3); color: var(--text-2); }
.chip.s-sent        { background: var(--info-soft); color: var(--info); }
.chip.s-viewed      { background: var(--indigo-soft); color: var(--indigo); }
.chip.s-interested  { background: var(--warn-soft); color: var(--warn); }
.chip.s-negotiating { background: var(--violet-soft); color: var(--violet); }
.chip.s-won         { background: var(--ok-soft); color: var(--ok); }
.chip.s-lost        { background: var(--danger-soft); color: var(--danger); }

.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.brand { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }
.chip.plain { background: transparent; border-color: var(--line-strong); color: var(--text-2); }

/* Határidő jelzése a napi listán */
.due { font-size: 12.5px; font-weight: 550; font-variant-numeric: tabular-nums; }
.due.overdue { color: var(--danger); }
.due.today { color: var(--brand); }
.due.soon { color: var(--warn); }
.due.later { color: var(--text-3); }

/* ---------------------------------------------------------------------
   Gombok - telefonon legalább 44px magas érintőfelület
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  /* Adatbol jovo felirat (pl. cegnev) is kerulhet gombra: ilyenkor a gomb
     a helyehez igazodik, a felirat pedig <span class="truncate"> benne. */
  max-width: 100%;
  transition: background 0.12s, border-color 0.12s;
}

.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(0.5px); }

.btn svg { width: 17px; height: 17px; }

.btn.primary {
  background: var(--brand-solid);
  border-color: var(--brand-solid);
  color: #fff;
}

.btn.primary:hover { background: var(--brand-solid-hover); border-color: var(--brand-solid-hover); }

.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }

.btn.danger { background: transparent; border-color: var(--line-strong); color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }

/* Telefonon a "kis" gomb is rendes erintofelulet; egerrel visszavesz. */
.btn.sm { min-height: 40px; padding: 0 12px; font-size: 13px; }

@media (min-width: 900px) {
  .btn.sm { min-height: 34px; padding: 0 11px; }
}
.btn.sm svg { width: 15px; height: 15px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.btn-icon:hover { background: var(--surface-3); color: var(--text); }
.btn-icon svg { width: 19px; height: 19px; }

/* Lebegő gomb: telefonon a leggyakoribb művelet egy kattintásra */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));
  z-index: 44;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--brand-solid);
  color: #fff;
  cursor: pointer;
}

.fab svg { width: 24px; height: 24px; }

@media (min-width: 900px) {
  .fab { display: none; }
}

/* ---------------------------------------------------------------------
   Űrlap
   --------------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 5px; }

.field > label {
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-2);
}

.field .help { font-size: 12px; color: var(--text-3); }
.field .err { font-size: 12px; color: var(--danger); font-weight: 500; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="tel"],
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px; /* 16px alatt a mobil Safari ráközelít - ezért nem kisebb */
  appearance: none;
}

textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}

input::placeholder, textarea::placeholder { color: var(--text-3); }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368717e' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 17px;
  padding-right: 34px;
}

/* A nyil beegetett szinu SVG, ezert sotet modhoz kulon valtozat kell. */

/* Tól-ig mezőpár */
.range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; }
.range .sep { color: var(--text-3); font-size: 13px; }

/* Jelölők */
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  cursor: pointer;
  font-size: 14px;
}

.check input[type="checkbox"], .check input[type="radio"] {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--brand);
  flex-shrink: 0;
}

/* Választógombok sora - felépítmény, csatorna, ilyenekhez */
.pills { display: flex; flex-wrap: wrap; gap: 7px; }

.pills input { position: absolute; opacity: 0; pointer-events: none; }

.pills label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 13.5px;
  font-weight: 520;
  color: var(--text-2);
  cursor: pointer;
}

.pills label:hover { background: var(--surface-3); }

.pills input:checked + label {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 580;
}

.pills input:focus-visible + label { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }

/* Szűrősáv */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.filters .search { flex: 1; min-width: 190px; position: relative; }

.filters .search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--text-3);
  pointer-events: none;
}

.filters .search input { padding-left: 35px; }
.filters select { width: auto; min-width: 130px; }

/* ---------------------------------------------------------------------
   Idővonal - "mikor mit beszéltünk"
   --------------------------------------------------------------------- */

.timeline { display: flex; flex-direction: column; }

.tl {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 16px 0;
}

.tl:last-child { padding-bottom: 0; }

.tl .pin {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-2);
  z-index: 1;
}

.tl .pin svg { width: 15px; height: 15px; }

/* A függőleges vonal a pöttyök között */
.tl:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.tl .body { flex: 1; min-width: 0; padding-top: 4px; }

.tl .when {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.tl .what { font-size: 14px; margin-top: 1px; }
.tl .what strong { font-weight: 580; }
.tl .note {
  margin-top: 5px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--text-2);
  white-space: pre-line;
}

.tl.c-phone .pin { background: var(--info-soft); color: var(--info); }
.tl.c-email .pin { background: var(--indigo-soft); color: var(--indigo); }
.tl.c-personal .pin { background: var(--ok-soft); color: var(--ok); }
.tl.c-won .pin { background: var(--ok-soft); color: var(--ok); }
.tl.c-lost .pin { background: var(--danger-soft); color: var(--danger); }

/* ---------------------------------------------------------------------
   Adatlista (címke-érték párok)
   --------------------------------------------------------------------- */

.dl { display: flex; flex-direction: column; gap: 0; }

.dl > div {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.dl > div:last-child { border-bottom: 0; }

.dl dt {
  flex-shrink: 0;
  width: 44%;
  max-width: 180px;
  font-size: 13px;
  color: var(--text-3);
}

.dl dd { flex: 1; margin: 0; min-width: 0; }
.dl dd.empty { color: var(--text-3); }

/* ---------------------------------------------------------------------
   Üres állapot
   --------------------------------------------------------------------- */

.empty {
  padding: 34px 20px;
  text-align: center;
}

.empty .ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 11px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-3);
}

.empty .ico svg { width: 21px; height: 21px; }
.empty h3 { font-size: 15px; }
.empty p { margin: 5px auto 14px; max-width: 360px; font-size: 13.5px; color: var(--text-3); }

/* ---------------------------------------------------------------------
   Fülek
   --------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs a {
  padding: 9px 13px;
  font-size: 14px;
  font-weight: 530;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.tabs a:hover { color: var(--text); }

.tabs a.on {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 580;
}

.tabs .count {
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Visszajelzés
   --------------------------------------------------------------------- */

.flash { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  background: var(--surface);
}

.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* Az ertesites sajat szinet orokli a benne allo hivatkozas, ezert szin nem
   kulonbozteti meg a szovegtol - alahuzas teszi lathatova, hogy kattinthato. */
.alert a {
  font-weight: 580;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.alert.success { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); color: var(--ok); }
.alert.error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger); }
.alert.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); color: var(--warn); }
.alert.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 22%, transparent); color: var(--info); }

/* ---------------------------------------------------------------------
   Párbeszédpanel - telefonon alulról feljövő lap
   --------------------------------------------------------------------- */

dialog.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--text);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
}

dialog.sheet::backdrop { background: rgba(10, 14, 20, 0.45); backdrop-filter: blur(2px); }

@media (min-width: 640px) {
  dialog.sheet {
    inset: 0;
    margin: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    max-height: 86dvh;
  }
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}

.sheet-head h2 { flex: 1; font-size: 1rem; }

.sheet-body {
  padding: 15px;
  overflow-y: auto;
  max-height: calc(92dvh - 130px);
}

.sheet-foot {
  display: flex;
  gap: 9px;
  padding: 12px 15px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.sheet-foot .btn { flex: 1; }

@media (min-width: 640px) {
  .sheet-foot { justify-content: flex-end; }
  .sheet-foot .btn { flex: 0 0 auto; min-width: 110px; }
}

/* ---------------------------------------------------------------------
   Belépés
   --------------------------------------------------------------------- */

.login-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 22px 16px;
  background:
    radial-gradient(1100px 420px at 50% -8%, color-mix(in srgb, var(--brand) 9%, transparent), transparent),
    var(--bg);
}

.login {
  width: 100%;
  max-width: 382px;
}

.login .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.login .logo .brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--brand-solid);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.login .card-body { padding: 20px; }
.login h1 { font-size: 1.15rem; margin-bottom: 3px; }
.login .sub { font-size: 13.5px; color: var(--text-3); margin-bottom: 18px; }
.login .foot { margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ---------------------------------------------------------------------
   Apróságok
   --------------------------------------------------------------------- */

.muted { color: var(--text-3); }
.small { font-size: 12.5px; }
.strong { font-weight: 580; }
.nowrap { white-space: nowrap; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.right { text-align: right; }
.center { text-align: center; }

.stack { display: flex; flex-direction: column; gap: 10px; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }
.mb-2 { margin-bottom: 12px; }

.sep { height: 1px; background: var(--line); margin: 12px 0; border: 0; }

/* Lenyilo kapcsolo: telefonon ez is ujjal kezelt felulet. */
summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  cursor: pointer;
}

@media (min-width: 900px) {
  summary { min-height: 0; }
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Betöltés jelzése */
.spin {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: var(--r-full);
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .sidebar, .tabbar, .topbar, .fab, .page-head .actions { display: none !important; }
  .app { display: block; }
  .card { border-color: #ccc; }
  body { background: #fff; }
}

/* =====================================================================
   Sűrűbb listasorok, kartonfejléc, halvány üres állapot
   (listák + ügyfélkarton)

   Csak hozzáfűzés: a fentebbi szabályokat egyik sem írja át. Azért kellett
   új osztály, mert a .row eddig egysoros volt (a .meta levágta a szöveget),
   a listákon viszont látni kell azt is, MIT KERES az ügyfél és van-e rá
   lejárt teendő - ez két-három sor, és telefonon is olvashatónak kell
   lennie, vízszintes görgetés nélkül.
   ===================================================================== */

/* Több soros listaelem: a tartalom tetejéhez igazít, nem középre. */
.row.top { align-items: flex-start; }
.row.top > .ava { margin-top: 1px; }

/* A sor fejsora: a név balra, a legfontosabb jelzés (mikor beszéltünk)
   jobbra. Így 390px-en sincs szükség külön hasábra a sor jobb szélén. */
.rowtop { display: flex; align-items: baseline; gap: 9px; }
.rowtop .title { flex: 1; min-width: 0; }

.rowtop .when {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  white-space: nowrap;
}

/* Régen beszéltünk vele, vagy még soha: ez a lista legfontosabb jele. */
.rowtop .when.old   { color: var(--warn); }
.rowtop .when.never { color: var(--brand-ink); }

/* Ahol a meta maga a mondanivaló (mit keres az ügyfél), ott ne vágjuk le:
   két sorig törhet.

   Flex-sor, mert az ikonok a lap tetején "display: block"-ok - egy sima
   szövegfolyamban a saját sorukba kerülnének. Így az ikon az első elem, a
   szöveg mellette fut, és a .txt vágja két sorra. */
.row .meta.wrap {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.row .meta.wrap > svg { margin-top: 2px; }

.row .meta.wrap > .txt {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Jelzéscsík a sor bal szélén. A 3px szegély + 11px belső = a .row 14px-e,
   ezért a szöveg nem csúszik el a szomszédos soroktól. */
.row.sig { border-left: 3px solid transparent; padding-left: 11px; }
.row.sig-warn   { border-left-color: var(--warn); }
.row.sig-danger { border-left-color: var(--danger); }
.row.sig-brand  { border-left-color: var(--brand); }

/* Apró chipek a cím alatt: "2 nyitott ajánlat", "megnyitotta". */
.chipline { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip.xs { min-height: 20px; padding: 1px 7px; font-size: 11px; }
.chip.xs svg { width: 11px; height: 11px; }

/* Lejárt vagy mai teendő a soron - ez hívja vissza az értékesítőt. */
.rowdue {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 540;
  color: var(--text-2);
}
.rowdue svg { width: 14px; height: 14px; flex-shrink: 0; }
.rowdue.overdue { color: var(--danger); }
.rowdue.today   { color: var(--brand-ink); }
.rowdue .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Műveletek a soron. Legalább 40px magas, hogy telefonon is eltaláld. */
.rowact { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rowact .btn, .rowact .btn-icon { min-height: 40px; }

/* Halvány üres állapot: egy mondat és egy gomb, nem nagy üres doboz.
   Oda kell, ahol egy kártyának nincs adata, de a helye számít. */
.thin {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--text-3);
  border-top: 1px solid var(--line);
}
.card > .thin:first-child,
.card-head + .thin { border-top: 0; }
.thin > .grow { flex: 1 1 150px; min-width: 0; }
.thin .btn { flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Kartonfejléc: amit hívás előtt a legelső pillantásra látni kell
   --------------------------------------------------------------------- */

.ident { display: flex; align-items: flex-start; gap: 12px; }
.ident > .grow { flex: 1; min-width: 0; }

/* Négy tény egy rácsban. Telefonon kettő egy sorban, nagy képernyőn négy. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 12px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

@media (min-width: 760px) {
  .facts.f4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts.f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.facts > div { padding: 9px 11px; background: var(--surface); }

.facts .k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-3);
}

.facts .v {
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 550;
  overflow-wrap: anywhere;
}

.facts .v.warn   { color: var(--warn); }
.facts .v.danger { color: var(--danger); }
.facts .v.ok     { color: var(--ok); }
.facts .v.none   { font-weight: 450; color: var(--text-3); }
.facts .v .sub   { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 450; color: var(--text-3); }

/* Gyorsműveletek a fejlécben: telefonon egymás mellett, egy ujjal. */
.quickbar { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.quickbar .btn { flex: 1 1 140px; min-height: 44px; }

/* ---------------------------------------------------------------------
   "Régebbiek" nyitó - hosszú idővonalhoz
   --------------------------------------------------------------------- */

details.more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-2);
  border-top: 1px solid var(--line);
}

details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::marker { content: ''; }
details.more > summary:hover { background: var(--surface-2); color: var(--text); }
details.more[open] > summary { color: var(--text-3); }
details.more > summary svg { width: 15px; height: 15px; }
details.more[open] > summary svg { transform: rotate(180deg); }
details.more .card-body { padding-top: 12px; }

/* Blokk-hivatkozás a soron belül. Azért kell, mert a sor szövege egészében
   kattintható, a gombjai viszont nem lehetnek a hivatkozáson BELÜL
   (érvénytelen HTML, és telefonon rosszul is működik). */
.rowlink { display: block; color: inherit; }

@media (hover: hover) {
  .rowlink:hover .title { text-decoration: underline; text-underline-offset: 2px; }
}

/* =====================================================================
   Igény-űrlap: ügyfél-kereső, javaslat-gombok, összecsukható blokk
   (hozzáfűzve - a fentebbi szabályokat nem írja át)
   ===================================================================== */

/* --- Gépelés közbeni ügyfél-kereső ---------------------------------- */

.ac { position: relative; }

.ac-box { position: relative; }

.ac-box .ac-ico {
  position: absolute;
  left: 11px;
  /* A mező magasságának a fele, NEM 50%: a dobozban a találati lista is
     benne van, ahhoz képest a nagyító a lista közepére csúszna. */
  top: 21px;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
  display: flex;
}

.ac-box .ac-ico svg { width: 17px; height: 17px; }

/* Két osztály kell: az input[type="text"] alapszabály erősebb egy sima
   osztálynál, és akkor a nagyító a beírt szöveg alá kerülne. */
.ac-box .ac-input { padding-left: 36px; }

/* A találati lista a folyamban van, nem lebeg: a kártya overflow:hidden-je
   levágná a lebegő panelt, és telefonon az átfedő lista alatt nem látszik,
   mi marad a mezőben. */
.ac-list {
  margin-top: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}

.ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 11px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ac-item:last-child { border-bottom: 0; }
.ac-item .grow { flex: 1; min-width: 0; }

.ac-item .nev {
  display: block;
  font-size: 14.5px;
  font-weight: 560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-item .alsor {
  display: block;
  font-size: 12.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Az egérrel és a nyíllal kijelölt elem ugyanúgy nézzen ki. */
.ac-item.on, .ac-item:hover { background: var(--brand-soft); }
.ac-item.on { box-shadow: inset 3px 0 0 var(--brand); }

.ac-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 13px 12px;
  font-size: 13.5px;
  color: var(--text-2);
}

.ac-busy { padding: 13px 12px; font-size: 13px; color: var(--text-3); }

/* A kiválasztott ügyfél: egy sor, X gombbal lecserélhető. */
.ac-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px 8px 11px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
}

.ac-chip .grow { flex: 1; min-width: 0; }
.ac-chip .nev { display: block; font-size: 14.5px; font-weight: 580; }
.ac-chip .alsor { display: block; font-size: 12.5px; color: var(--text-2); }
.ac-chip .nev, .ac-chip .alsor { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ha már van kiválasztva ügyfél, a keresőt elrejtjük - az X hozza vissza. */
.ac.has-pick .ac-box { display: none; }
.ac.has-pick .ac-tools .help { display: none; }

.ac-tools { justify-content: space-between; gap: 10px; }
.ac-tools .help { flex: 1; min-width: 0; }

/* --- Javaslat-gombok (márka) ---------------------------------------- */

.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.suggest-lead { font-size: 12px; color: var(--text-3); }

.suggest-btn {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.suggest-btn:hover { background: var(--surface-3); color: var(--text); }

.suggest-btn.on {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 560;
}

/* --- Összecsukható blokk: ami ritkán kell ---------------------------- */

.fold {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}

.fold > summary {
  gap: 10px;
  padding: 12px 14px;
  min-height: 48px;
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 560;
  list-style: none;
}

.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::marker { content: ''; }
.fold > summary > svg { width: 17px; height: 17px; color: var(--text-3); flex-shrink: 0; }
.fold > summary .grow { flex-shrink: 0; }

.fold-hint {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-3);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fold-chev { display: flex; color: var(--text-3); flex-shrink: 0; }
.fold-chev svg { width: 17px; height: 17px; transition: transform 0.15s; }
.fold[open] > summary .fold-chev svg { transform: rotate(180deg); }
.fold[open] > summary { border-bottom: 1px solid var(--line); }

.fold-body { padding: 14px; }

/* 390px-en a súgószöveg nem fér a cím mellé, ezért alá kerül. Elrejteni nem
   lehet: a megnevezés-blokknál éppen ez a sor mutatja, mi lesz a megnevezés. */
@media (max-width: 560px) {
  .fold > summary { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .fold > summary > svg { order: 0; }
  .fold > summary .grow { order: 1; flex: 1; }
  .fold-chev { order: 2; }
  .fold-hint {
    order: 3;
    flex: 0 0 100%;
    margin-left: 27px;
    text-align: left;
    white-space: normal;
  }
}

/* --- Az igény-űrlap lapja ------------------------------------------- */

/* Olvasható szélesség: egy végig elnyúló szövegmező nagy képernyőn üresnek
   és olcsónak hat. Telefonon nincs hatása, ott úgyis egy hasáb van. */
.urlap-lap { max-width: 900px; }

/* Ami rövid adat (dátum, darabszám), az ne nyúljon végig a soron. */
@media (min-width: 700px) {
  .field.keskeny input, .field.keskeny select { max-width: 260px; }
}

/* A kiválasztott ügyfél X gombja: a × jel önmagában túl apró volt. */
.ac-chip .btn-icon { font-size: 21px; line-height: 1; }

/* Nagy képernyőn a sor műveletei ne vigyenek el egy teljes sort: a szöveg
   mellé, jobbra kerülnek. Telefonon marad az egymás alatti elrendezés, mert
   ott a 390px-be nem fér el mindkettő. */
@media (min-width: 900px) {
  .row.top > .grow.splitrow { display: flex; align-items: flex-start; gap: 14px; }
  .row.top > .grow.splitrow > .rowlink { flex: 1; min-width: 0; }
  .row.top > .grow.splitrow > .rowact { margin-top: 0; flex-shrink: 0; justify-content: flex-end; }
}

/* =====================================================================
   Gyorsajánlat (hozzáfűzve - a fentebbi szabályokat nem írja át)

   Az adatlap elsődlegesen olvasásra való: felül a jármű képe, az ár és az öt
   adat, ami elsőre eldönti, érdekes-e. Minden osztály gy- előtaggal, hogy a
   közös fájlban ne ütközzön másik területtel.
   ===================================================================== */

/* --- A jármű blokk az adatlap tetején -------------------------------- */

.gy-hero { display: flex; flex-direction: column; }

/* A nagy kép. A kép és a helyőrző ugyanabban a rácscellában áll: ha a kép
   betölt, object-fit: cover-rel teljesen elfedi a helyőrzőt, ha nem jön meg
   (onerror="this.hidden=true"), akkor a helyőrző látszik - nem a böngésző
   törött-kép jelzése. */
.gy-stage {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 10;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
}

.gy-stage > .gy-shot,
.gy-stage > .gy-noshot { grid-area: 1 / 1; }

.gy-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-3);
}

.gy-noshot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

/* A globális svg-méret 18px, ezért a nagy ikonnak itt kell méretet adni. */
.gy-noshot svg { width: 34px; height: 34px; opacity: 0.45; }

.gy-count {
  position: absolute;
  right: 9px;
  bottom: 9px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: rgba(12, 16, 22, 0.62);
  color: #fff;
  font-size: 11.5px;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}

/* Kis képek csíkban. Telefonon vízszintesen görgethető, de a LAP nem
   mozdul: a csík a saját overflow-ján belül csúszik. */
.gy-thumbs {
  display: flex;
  gap: 7px;
  padding: 9px 11px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  scrollbar-width: thin;
}

.gy-thumb {
  flex: 0 0 auto;
  display: grid;
  width: 68px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  overflow: hidden;
  cursor: pointer;
}

/* A kis kép és a tartalék ikon egy cellában: ha a kép nem jön meg, az ikon
   marad - nem egy üres doboz. */
.gy-thumb > * { grid-area: 1 / 1; }
.gy-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gy-thumb svg { width: 16px; height: 16px; margin: auto; opacity: 0.55; color: var(--text-3); }
.gy-thumb:hover { border-color: var(--text-3); }

.gy-thumb.on {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Az ár: ez a második dolog, amit megnéz. */
.gy-headline { padding: 14px 14px 12px; }

.gy-price {
  font-size: 1.75rem;
  font-weight: 680;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Az öt adat hajszálvonalas rácsban. Flex-szel, nem rácsráccsal: páratlan
   darabszámnál a rács üres cellája szürke foltot hagyna a sor végén.
   A negatív margó a jobb és az alsó hajszálvonalat tolja ki a kártyán kívülre
   (a .card overflow: hidden levágja), így nincs kettős szegély. */
.gy-facts {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1px -1px 0;
  border-top: 1px solid var(--line);
}

.gy-fact {
  flex: 1 1 140px;
  min-width: 140px;
  padding: 10px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gy-fact .k { display: block; font-size: 11.5px; color: var(--text-3); }

.gy-fact .v {
  display: block;
  font-size: 14px;
  font-weight: 580;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Nagy képernyőn a 16:10-es kép 500 pixel magas lenne, és leszorítaná a
   lényeget a hajtás alá. Laposabb arány, felső korláttal. */
@media (min-width: 1000px) {
  .gy-stage { aspect-ratio: 16 / 9; max-height: 400px; }
}

/* --- A leírás -------------------------------------------------------- */

/* Olvasható sorhossz: 68 karakter körül. Ennél hosszabb sorban a szem
   elveszti a sor végét, és a kereskedő nem olvassa el. */
.gy-prose {
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.gy-prose > :first-child { margin-top: 0; }
.gy-prose > :last-child { margin-bottom: 0; }
.gy-prose p { margin: 0 0 0.85em; }
.gy-prose ul, .gy-prose ol { margin: 0 0 0.85em; padding-left: 20px; }
.gy-prose li { margin-bottom: 0.3em; }
.gy-prose strong, .gy-prose b { font-weight: 600; color: var(--text); }

.gy-prose h3, .gy-prose h4 {
  margin: 1.1em 0 0.4em;
  font-size: 15px;
  color: var(--text);
}

/* --- Felszereltség: tömör, több hasábban ----------------------------- */

.gy-feat {
  display: grid;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--text-2);
}

.gy-feat li { position: relative; padding-left: 15px; }

.gy-feat li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--line-strong);
}

@media (min-width: 560px) { .gy-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gy-feat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Nyomonkövetés: kiküldés és megnyitás ---------------------------- */

.gy-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.gy-mini-cell {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  text-align: center;
}

.gy-mini-cell .n {
  display: block;
  font-size: 1.3rem;
  font-weight: 650;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.gy-mini-cell .l { display: block; font-size: 11.5px; color: var(--text-3); }
.gy-mini-cell.on { border-color: var(--brand-line); background: var(--brand-soft); }
.gy-mini-cell.on .n { color: var(--brand-ink); }

/* --- Lista: képhelyőrző és a "most nézi" kiemelés -------------------- */

/* Nem üres szürke kör: a jármű ikonja a kép arányában, finom átmenettel.
   Így a lista akkor sem lyukas, ha a hirdetésről nem jött le fotó. */
.gy-tile {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: linear-gradient(155deg, var(--surface-3),
              color-mix(in srgb, var(--line-strong) 55%, var(--surface-3)));
  color: var(--text-3);
  overflow: hidden;
}

.gy-tile > * { grid-area: 1 / 1; }
.gy-tile img { width: 100%; height: 100%; object-fit: cover; }
.gy-tile svg { width: 18px; height: 18px; opacity: 0.7; }

@media (min-width: 640px) {
  .gy-tile { width: 64px; height: 44px; }
}

/* Akinek most nyílt meg az ajánlata, és azóta nem beszéltünk vele. */
.row.gy-hot { background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn); }

.gy-now {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--brand-solid);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.gy-now svg { width: 12px; height: 12px; }

/* --- Lehívás közbeni visszajelzés (új gyorsajánlat) ------------------ */

/* Nem valódi folyamatjelző: a szerver a lehívás közben nem tud szólni.
   Azt mutatja, hogy dolgozunk - ezért csúszik, nem telik. */
.gy-bar {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}

.gy-bar > span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-solid);
  animation: gy-slide 1.9s ease-in-out infinite;
}

@keyframes gy-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(270%); }
}

.gy-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.gy-steps li { position: relative; display: flex; gap: 11px; padding-bottom: 14px; }
.gy-steps li:last-child { padding-bottom: 0; }

.gy-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 21px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.gy-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface);
}

.gy-step-body .t { display: block; font-size: 14px; font-weight: 550; color: var(--text-3); }
.gy-step-body .d { display: block; font-size: 12.5px; color: var(--text-3); }

.gy-steps li.on .gy-dot {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent);
  animation: gy-pulse 1.5s ease-in-out infinite;
}

.gy-steps li.on .t { color: var(--text); }
.gy-steps li.done .gy-dot { border-color: var(--ok); background: var(--ok); }
.gy-steps li.done .t { color: var(--text-2); }

@keyframes gy-pulse {
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 5%, transparent); }
}

/* =====================================================================
   Mobil gesztusok (public/js/gestures.js)
   Csak érintős eszközön él: a sorok balra húzhatók, mögöttük gombok.
   ===================================================================== */

/* A sort egy doboz fogja körbe, a gombok mögötte ülnek. */
.sor-muveletek {
  position: relative;
  overflow: hidden;
  background: var(--surface-3);
}

.sor-muveletek > .row {
  position: relative;
  z-index: 1;
  will-change: transform;
}

.sor-muveletek > .sm-gomb {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 66px;
  border: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.sor-muveletek > .sm-gomb svg { width: 20px; height: 20px; }

/* A gombok vízszintes helyét a gestures.js állítja be (right), mert a sor
   maga is a doboz gyereke, és elcsúsztatná a sorszám alapú szelektorokat. */

.sm-gomb.hiv  { background: var(--ok); }
.sm-gomb.kesz { background: var(--info); }
.sm-gomb.besz { background: var(--brand-solid, var(--brand)); }

/* Koppintás-visszajelzés: azonnal látszódjon, hogy fogta. */
.nyomva { background: var(--surface-3) !important; }
.btn.nyomva, .sm-gomb.nyomva { filter: brightness(0.94); }

/* Lefelé húzás = frissítés */
.frissit-jelzo {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  left: 50%;
  margin-left: -18px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-3);
  opacity: 0;
  pointer-events: none;
}

.frissit-jelzo .spin { border-color: color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; }
.frissit-jelzo.kesz { color: var(--brand); border-color: var(--brand-line); }
.frissit-jelzo.tolt { opacity: 1 !important; }

@media (min-width: 900px) {
  .sor-muveletek > .sm-gomb { display: none; }
}

/* Telefonon a soron belüli gyors gombokat a húzás váltja ki: két helyen
   ugyanaz a művelet csak zavar, és elveszi a helyet a szövegtől. */
@media (hover: none) and (pointer: coarse) and (max-width: 899px) {
  .row .right .btn-icon,
  .row .right .btn.sm {
    display: none;
  }
  .row .right { gap: 2px; }
}

/* =====================================================================
   Megjelenés-finomítás
   Visszafogott: a cél az olvashatóság és a tagoltság, nem a látványosság.
   ===================================================================== */

/* A lap tartalma halkan megjelenik. Elmozdulás nincs, mert az ugrálásnak
   hat; csak az áttetszőség változik, és csak egyszer, betöltéskor. */
@media (prefers-reduced-motion: no-preference) {
  .content > * {
    animation: megjelen 0.22s ease-out both;
  }
  @keyframes megjelen {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Tipográfia: a listák címsora egy árnyalattal erősebb, a kísérőszöveg
   egy árnyalattal halkabb - így a szem gyorsabban találja meg a lényeget. */
.row .title { font-weight: 560; letter-spacing: -0.006em; }
.row .meta  { line-height: 1.45; }

/* A számok mindenhol egy szélességűek, hogy a listák ne ugráljanak. */
.stat .value, .due, .row .right .small, table.table td { font-variant-numeric: tabular-nums; }

/* Kártyafejléc: a cím és a kiegészítő információ közti arány rendezése. */
.card-head h2 { font-size: 1.02rem; letter-spacing: -0.018em; }
.card-head h3 { font-size: 0.94rem; letter-spacing: -0.012em; }

/* Lista-elválasztók halkabbak a kártyán belül: a keret már tagol. */
.card .row { border-bottom-color: color-mix(in srgb, var(--line) 72%, transparent); }

/* Kattintható sor: finom jelzés, hogy tovább visz. */
@media (hover: hover) {
  a.row:hover .chev { opacity: 1; transform: translateX(1px); }
  .chev { transition: opacity .14s ease, transform .14s ease; }
}

/* Fókusz billentyűzetről: látható, de nem harsány. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hosszú cégnevek és megjegyzések sehol ne feszítsék szét a sort. */
.row .title, .row .meta, .dl dd, .tl .what { overflow-wrap: anywhere; }

/* Üres állapot: kevesebb helyet foglaljon ott, ahol csak kiegészítő. */
.card .empty { padding: 26px 18px; }
.stack .card .empty p { margin-bottom: 10px; }

/* Telefonon a sorba épített műveletsor helyett a húzás-gesztus szolgál
   (gestures.js): a sor balra húzva adja a hívást és a rögzítést. Így egy
   képernyőre háromszor annyi ügyfél fér, ami 370-nél érezhető különbség.
   Nagy képernyőn, ahol nincs érintés, a gombok maradnak. */
@media (hover: none) and (pointer: coarse) and (max-width: 899px) {
  .row .rowact { display: none; }
  .row.top { padding-top: 10px; padding-bottom: 10px; }
  .chipline { gap: 5px; }
  .chip.xs { font-size: 11px; padding: 2px 7px; }
}

/* A listák címe telefonon két sorban is megjelenhet: egy levágott cégnév
   vagy igény-megnevezés semmit nem mond. A név-jellegű címek maradnak
   egy sorban (azokat a .truncate osztály jelöli). */
@media (max-width: 899px) {
  .row .title:not(.truncate) {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* A "még nem beszéltetek róla" jellegű kiegészítő gombok a húzás alatt
     érhetők el, a sorban csak helyet foglalnának. */
  .row .rowact, .row .sorgomb { display: none; }
}

/* Összecsukható kártya: a ritkán kellő műveletek ne foglaljanak helyet. */
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::marker { content: ''; }
details.card > summary { user-select: none; }
details.card > summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--text-3);
  border-bottom: 1.6px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
  flex-shrink: 0;
}
details.card[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
details.card > summary:hover { background: var(--surface-3); }

/* =====================================================================
   Folyamat-sáv az ügyfélkartonon: hol tart az ügy.
   Az állapotot a rendszer olvassa ki az adatokból, nem kézzel állítjuk.
   ===================================================================== */

.folyamat {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  scrollbar-width: none;
}

.folyamat::-webkit-scrollbar { display: none; }

.folyamat .fl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 68px;
  text-align: center;
}

/* Az összekötő vonal a pöttyök között. */
.folyamat .fl::before {
  content: '';
  position: absolute;
  top: 7px;
  left: calc(-50% + 9px);
  width: calc(100% - 18px);
  height: 2px;
  background: var(--line-strong);
}

.folyamat .fl:first-child::before { display: none; }
.folyamat .fl.kesz::before, .folyamat .fl.itt::before { background: var(--ok); }

.folyamat .pont {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  color: #fff;
  z-index: 1;
}

.folyamat .fl.kesz .pont { background: var(--ok); border-color: var(--ok); }
.folyamat .fl.itt .pont  { background: var(--brand-solid, var(--brand)); border-color: var(--brand-solid, var(--brand)); box-shadow: 0 0 0 3px var(--brand-soft); }

.folyamat .cim { font-size: 12px; font-weight: 580; color: var(--text-3); }
.folyamat .alcim { font-size: 10.5px; color: var(--text-3); line-height: 1.3; }

.folyamat .fl.kesz .cim { color: var(--text-2); }
.folyamat .fl.itt .cim  { color: var(--brand-dark, var(--brand)); }
.folyamat .fl.itt .alcim { color: var(--text-2); }

@media (max-width: 560px) {
  .folyamat .alcim { display: none; }
  .folyamat .fl { min-width: 56px; }
  .folyamat .cim { font-size: 11px; }
}

/* =====================================================================
   Ügyfélkarton telefonon: a hívásig vezető út lerövidítése.
   A képernyő tetején az számít, ki ő és mit kell vele kezdeni; a
   "nincs adat" sorok nem érdemelnek egész kártyát.
   ===================================================================== */

@media (max-width: 560px) {

  /* Folyamat-sáv: elfér vágás nélkül. A feliratok kisebbek és tördelnek,
     a leírások már korábban eltűntek. */
  .folyamat {
    padding: 10px 8px;
    gap: 0;
  }
  .folyamat .fl { min-width: 0; }
  .folyamat .cim {
    font-size: 9.5px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .folyamat .pont { width: 14px; height: 14px; }
  .folyamat .fl::before { top: 6px; }

  /* A négy tény: tömör, kétoszlopos rács nagy betűk nélkül. Amire nincs
     adat, az halvány és kicsi marad - ne vigye el a helyet a lényeg elől. */
  .facts.f4 {
    gap: 1px;
    font-size: 13px;
  }
  .facts.f4 > div { padding: 8px 10px; }
  .facts .k { font-size: 10px; letter-spacing: 0.02em; }
  .facts .v { font-size: 14px; line-height: 1.25; }
  .facts .v.none { font-size: 12.5px; font-weight: 400; opacity: 0.75; }
  .facts .v .sub { font-size: 11px; }

  /* A fejléc egy sorba: név mellett a típus és a felelős, külön chip-sor
     nélkül. A "Most nézte" jelzés marad, mert az a hívás oka. */
  .page-head .ava.lg { width: 38px; height: 38px; font-size: 13px; }
  .page-head h1 { font-size: 1.22rem; line-height: 1.2; }
  .page-head .sub { font-size: 12.5px; }
}