/* =========================================================
   CSS VÁLTOZÓK
   ========================================================= */
:root {
  --accent:        #1f4fa3;
  --accent-cyan:   #00d4ff;
  --accent-soft:   #eef3fb;
  --card-soft:     #f7f9fe;
  --text:          #111827;
  --muted:         #4b5563;
  --border:        #e5e7eb;
  --bg:            #ffffff;
  --radius:        14px;
  --header-height: 100px;
  --footer-height: 40px;
  --danger:        #e63946;
  --warning:       #f4a261;
  --green:         #2a9d8f;
}

/* =========================================================
   ALAP RESET
   ========================================================= */
* { box-sizing: border-box }
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden }
body {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  display: flex;
  flex-direction: column;
}

/* =========================================================
   HEADER
   ========================================================= */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(135deg, #0a1929 0%, #1e3a5f 100%);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(20px, calc((100% - 1100px) / 2));
}

/* díszítő pseudo-elemek – mindig a tartalom alatt */
header::before,
header::after { z-index: 0 }

header::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,212,255,.18) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse 8s infinite ease-in-out;
  pointer-events: none;
}
header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00d4ff, #0099ff, #00d4ff);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: .3 }
  50%       { transform: scale(1.2); opacity: .5 }
}
@keyframes shimmer {
  0%   { background-position: -200% 0 }
  100% { background-position:  200% 0 }
}

/* fejléc tartalom a díszítések felett */
.brand,
.header-right,
.header-title {
  position: relative;
  z-index: 2;
}

/* ─── Logo / brand ─── */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  animation: slideDown 0.9s ease-out;
}

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

.site-logo-main {
  height: 68px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ─── Középső cím ─── */
.header-title {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  white-space: nowrap;
}

/* ─── Jobb oldal gombok ─── */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.export-btn {
  background: transparent;
  border: 1px solid rgba(0,212,255,.4);
  border-radius: 10px;
  color: rgba(255,255,255,.85);
  padding: 9px 18px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all .2s ease;
  letter-spacing: .3px;
  white-space: nowrap;
}
.export-btn:hover {
  background: rgba(0,212,255,.1);
  border-color: rgba(0,212,255,.8);
  color: var(--accent-cyan);
  box-shadow: 0 0 14px rgba(0,212,255,.15);
}
.export-btn svg { width: 15px; height: 15px; flex-shrink: 0 }

.import-btn {
  background: transparent;
  border: 1px solid rgba(42,157,143,.5);
  border-radius: 10px;
  color: rgba(255,255,255,.85);
  padding: 9px 18px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all .2s ease;
  letter-spacing: .3px;
  white-space: nowrap;
}
.import-btn:hover {
  background: rgba(42,157,143,.15);
  border-color: rgba(42,157,143,.9);
  color: #2a9d8f;
  box-shadow: 0 0 14px rgba(42,157,143,.2);
}
.import-btn svg { width: 15px; height: 15px; flex-shrink: 0 }

/* =========================================================
   MAIN / TARTALOM
   ========================================================= */
main {
  margin-top: var(--header-height);
  margin-bottom: var(--footer-height);
  height: calc(100vh - var(--header-height) - var(--footer-height));
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px max(16px, calc((100% - 1100px) / 2));
}

/* =========================================================
   NAVIGÁCIÓ (JAVÍTOTT)
   - Két oszlop, mint a record-card (bal kártya | jobb kártya)
   - Bal oldalon 3 zóna: bal gombok | számláló középen | jobb gombok
   - Jobb oldalon action gombok: mindig egysorban
   ========================================================= */

/* NAV – ugyanaz a 2 oszlop, mint a record-card */
.record-nav{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* bal kártya | jobb kártya */
  gap: 16px;
  margin-bottom: 20px;
  align-items: center;
}

/* Bal oldali navigáció – 3 zóna */
.nav-group{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* Bal blokk */
.nav-left{
  display:flex;
  gap:16px;
  justify-content:flex-start;
  min-width: 0;
}

/* Középső számláló */
.nav-center{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width: 0;
}

/* Jobb blokk */
.nav-right{
  display:flex;
  gap:16px;
  justify-content:flex-end;
  min-width: 0;
}

/* Action gombok jobb oldalt (Új eset + Törlés) – mindig egysorban */
.nav-actions{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto; /* ha nagyon szűk, inkább görgethető */
}

/* Gombok ne törjenek */
.nav-group .nav-btn,
.nav-actions .nav-btn{
  flex:0 0 auto;
  white-space: nowrap;
}

/* ─── Nav gombok / számláló (eredeti stílusok) ─── */
.nav-btn {
  background: linear-gradient(135deg, #0a1929, #1e3a5f);
  border: 1px solid rgba(0,212,255,.3);
  border-radius: 10px;
  color: rgba(255,255,255,.9);
  padding: 10px 22px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all .2s ease;
  letter-spacing: .3px;
}
.nav-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1e3a5f, #2a5280);
  border-color: rgba(0,212,255,.7);
  box-shadow: 0 0 16px rgba(0,212,255,.2);
  color: var(--accent-cyan);
}
.nav-btn:disabled { opacity: .35; cursor: not-allowed }
.nav-btn svg { width: 18px; height: 18px; flex-shrink: 0 }

.record-counter { font-size: .95rem; color: var(--muted); margin: 0 8px }
.record-counter strong { color: var(--accent); font-size: 1.2rem }

.nav-btn-icon {
  padding: 9px 11px;
  gap: 0;
}
.nav-btn-upload {
  border-color: rgba(0,212,255,.5);
  color: var(--accent-cyan);
}
.nav-btn-upload:hover:not(:disabled) {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 16px rgba(0,212,255,.2);
}
.nav-btn-batch {
  border-color: rgba(160,120,255,.5);
  color: rgba(180,140,255,.9);
}
.nav-btn-batch:hover:not(:disabled) {
  border-color: rgba(160,120,255,.9);
  color: rgba(200,170,255,1);
  box-shadow: 0 0 16px rgba(160,120,255,.2);
}
.batch-info-box {
  background: #f0f4f8;
  border: 1px solid #d0d8e4;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: .85rem;
  line-height: 1.6;
  margin: 16px 24px;
  color: #2d3a4a;
}
.batch-info-box code {
  font-size: .8rem;
  background: #dde5f0;
  padding: 1px 5px;
  border-radius: 4px;
}
.batch-btn-row {
  display: flex;
  gap: 10px;
  padding: 0 24px 24px;
  flex-wrap: wrap;
}
.nav-btn-delete {
  border-color: rgba(230,57,70,.45);
  color: rgba(255,110,115,.9);
}
.nav-btn-delete:hover:not(:disabled) {
  background: linear-gradient(135deg, #1a0a0b, #3a1015);
  border-color: rgba(230,57,70,.8);
  color: #ff7b80;
  box-shadow: 0 0 14px rgba(230,57,70,.2);
}

/* ─── Filter tagek ─── */

/* ─── Rekord kártya ─── */
.record-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  animation: fadeCard .35s ease-out;
}
@keyframes fadeCard {
  from { opacity: 0; transform: translateY(12px) }
  to   { opacity: 1; transform: translateY(0) }
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(0deg, #fff 0%, var(--card-soft) 100%);
  padding: 22px;
  min-width: 0;          /* grid-cella ne táguljon a tartalom után */
  overflow: hidden;      /* belső elemek se lógjanak ki */
}
.card.highlight { background: linear-gradient(0deg, #fff 0%, var(--accent-soft) 100%); border-color: #d9e5f7 }
.card.span-2    { grid-column: span 2 }

.card-title { font-size: 1rem; font-weight: 700; color: var(--accent); margin: 0 0 14px 0; display: flex; align-items: center; gap: 8px }
.card-title-icon { width: 28px; height: 28px; background: var(--accent); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.card-title-icon svg { width: 14px; height: 14px; fill: #fff }

/* ─── Galéria ─── */
.gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.gallery-main {
  width: 100%; height: 320px;
  border-radius: 10px; overflow: hidden; position: relative;
  background: #e8edf5; border: 1px solid var(--border);
  cursor: zoom-in; transition: transform .2s;
}
.gallery-main:hover { transform: scale(1.01) }
.gallery-main img   { width: 100%; height: 100%; object-fit: cover }

.img-label {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(10,25,41,.75); color: #fff;
  font-size: .72rem; padding: 3px 8px; border-radius: 6px;
  backdrop-filter: blur(4px); letter-spacing: .3px;
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;         /* görgetősáv ne takarjon rá */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.gallery-thumbs::-webkit-scrollbar        { height: 4px }
.gallery-thumbs::-webkit-scrollbar-track  { background: transparent }
.gallery-thumbs::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 2px }

.gallery-thumb {
  flex: 0 0 auto;              /* NE nyúljon ki – a kép szélessége szabja meg */
  height: 72px;
  min-width: 48px;
  max-width: 180px;            /* nagyon széles panoráma-képeknél korlát */
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: #e8edf5;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-thumb img {
  height: 100%;                /* magasság rögzített */
  width: auto;                 /* szélesség a kép saját arányából */
  display: block;
  object-fit: cover;           /* ha a max-width korlátot eléri, ne nyújtson */
}
.gallery-thumb.active { border-color: var(--accent) }
.gallery-thumb:hover  { border-color: rgba(31,79,163,.4); transform: translateY(-2px) }
.thumb-placeholder    { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: .65rem; color: var(--muted); text-align: center; padding: 4px }

/* ─── Info grid ─── */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.info-item  { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px }
.info-item .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 600; margin-bottom: 3px }
.info-item .value { font-size: .95rem; font-weight: 600; color: var(--text) }
.info-item.full-width { grid-column: span 2 }

/* ─── Súlyossági badge-ek ─── */

/* ─── Sérülés lista ─── */

/* ─── Sérülés csoportos dobozok ─── */
.muted { color: var(--muted) }

/* =========================================================
   PÉNZÜGYI PANEL
   ========================================================= */
.finance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.finance-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; position: relative;
  transition: transform .15s, box-shadow .15s;
}
.finance-card:hover  { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.07) }
.finance-card.market { border-left: 4px solid var(--accent) }
.finance-card.repair { border-left: 4px solid var(--warning) }
.finance-card.depr   { border-left: 4px solid var(--danger) }

.finance-label  { font-size: .68rem; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 600; margin-bottom: 5px }
.finance-amount { font-size: 1.05rem; font-weight: 800; letter-spacing: -.3px; line-height: 1 }
.finance-card.market .finance-amount { color: var(--accent) }
.finance-card.repair .finance-amount { color: var(--warning) }
.finance-card.depr   .finance-amount { color: var(--danger) }
.finance-currency { font-size: .75rem; font-weight: 600; opacity: .7; margin-left: 2px }

.finance-bar-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border) }
.finance-pct { font-size: .68rem; font-weight: 800; width: 32px; text-align: right; flex-shrink: 0; letter-spacing: .3px }
.finance-card.market .finance-pct { color: var(--accent) }
.finance-card.repair .finance-pct { color: var(--warning) }
.finance-card.depr   .finance-pct { color: var(--danger) }

.finance-bar-row .finance-bar { flex: 1; height: 5px; background: #e9ecef; border-radius: 3px; overflow: hidden }
.finance-bar-row .finance-bar span { display: block; height: 100%; border-radius: 3px; transition: width .6s cubic-bezier(.4,0,.2,1) }
.finance-card.market .finance-bar span { background: linear-gradient(90deg, #3a7bd5, var(--accent)) }
.finance-card.repair .finance-bar span { background: linear-gradient(90deg, #f4a261, #e07b39) }
.finance-card.depr   .finance-bar span { background: linear-gradient(90deg, #f28b8b, var(--danger)) }

.depr-input-wrap { display: flex; align-items: center; gap: 6px; margin-top: 2px }
.depr-input {
  width: 100%; font-size: 1.05rem; font-weight: 800; color: var(--danger);
  background: transparent; border: none; border-bottom: 2px solid rgba(230,57,70,.3);
  outline: none; padding: 2px 0; letter-spacing: -.3px; font-family: inherit; transition: border-color .2s;
}
.depr-input:focus       { border-bottom-color: var(--danger) }
.depr-input::placeholder { color: #ccc; font-weight: 400; font-size: .9rem }
.depr-unit { font-size: .75rem; font-weight: 600; color: var(--danger); opacity: .7; flex-shrink: 0 }

/* =========================================================
   SÚLYOSSÁGI MINI BLOKKOK
   ========================================================= */
.sev-mini       { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: #fff }
.sev-mini-title { font-size: 12px; color: var(--muted); font-weight: 800; margin-bottom: 6px }
.sev-mini-text  { color: var(--muted); font-weight: 600 }

/* =========================================================
   FOOTER
   ========================================================= */
footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(135deg, #0a1929 0%, #1e3a5f 100%);
  height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(20px, calc((100% - 1100px) / 2));
  font-size: .8rem;
  color: rgba(255,255,255,.7);
}
footer span            { opacity: .8 }
footer .footer-stat    { color: var(--accent-cyan); font-weight: 700 }

/* =========================================================
   MODÁLIS ABLAK
   ========================================================= */
.modal-bg {
  display: none;
  position: fixed; inset: 0;
  background: rgba(5,12,22,.88);
  z-index: 500;
  align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.modal-bg.show { display: flex }
.modal-bg img  { max-width: 90vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6) }
.modal-close {
  position: absolute; top: 20px; right: 24px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 1.4rem;
  width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.modal-close:hover { background: rgba(255,255,255,.2) }

/* =========================================================
   RESZPONZÍV
   ========================================================= */
@media (max-width: 860px) {
  :root { --header-height: 110px }
  .record-card     { grid-template-columns: 1fr }
  .card.span-2     { grid-column: span 1 }
  .finance-grid    { grid-template-columns: 1fr }

  /* NAV mobilon: 1 oszlop, de action gombok továbbra is egysorban */
  .record-nav{
    grid-template-columns: 1fr;
  }
  .nav-actions{
    justify-content: flex-start;
  }
}

/* ─────────────────────────────
   DAMAGE BOXES – FÜGGŐLEGES
   ───────────────────────────── */

/* ─────────────────────────────
   DAMAGE ROWS – CÍM-KÁRTYA BALRA, LISTA JOBBRA
   ───────────────────────────── */

/* ─────────────────────────────
   DAMAGE STATUS STYLE
   ───────────────────────────── */

.damage-status-rows{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.damage-status{
  position:relative;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px 16px 14px 22px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.damage-status::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:6px;
  border-radius:6px;
  background:#ccc;
}

.damage-status.primary::before   { background:#e63946; }
.damage-status.secondary::before { background:#f4a261; }
.damage-status.minor::before     { background:#adb5bd; }

.damage-status-pill{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:999px;
  background:transparent;
  border:1px solid #c0392b;
  color:#c0392b;
  width:max-content;
}

.damage-status.secondary .damage-status-pill{
  background:transparent;
  border:1px solid #d97706;
  color:#d97706;
}

.damage-status.minor .damage-status-pill{
  background:transparent;
  border:1px solid #6b7280;
  color:#6b7280;
}

.damage-status-text{
  font-size:14px;
  line-height:1.5;
  color:#111827;
}

/* =========================================================
   UPLOAD PANEL
   ========================================================= */

/* Új eset gomb a headerben */

/* Overlay háttér */
.upload-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(5,12,22,.75);
  z-index: 600;
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
.upload-overlay.show { display: flex }

/* Középre igazított, arányos magasságú dialog */
.upload-drawer {
  background: #fff;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
  animation: drawerIn .2s ease-out;
  overflow: hidden;
}
@keyframes drawerIn {
  from { transform: scale(.96) translateY(12px); opacity: 0 }
  to   { transform: scale(1)   translateY(0);    opacity: 1 }
}

/* Panel fejléc */
.upload-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, #0a1929 0%, #1e3a5f 100%);
  flex-shrink: 0;
}
.upload-drawer-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: .3px;
}
.upload-close-btn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  flex-shrink: 0;
}
.upload-close-btn:hover { background: rgba(255,255,255,.22) }

/* Lépések konténer */
.upload-step {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

/* Preview lépés: flex column, gomb alul rögzítve */
.upload-step-preview {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.upload-step-preview .upload-preview-header {
  padding: 20px 24px 12px 24px;
  flex-shrink: 0;
}
.upload-step-preview .upload-file-list {
  flex: 1;
  overflow-y: auto;
  margin: 0 24px;
  max-height: none;
}
.upload-go-wrap {
  padding: 16px 24px;
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid var(--border);
}

/* Drop zone */
.upload-drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
  background: var(--card-soft);
}
.upload-drop-zone.drag-over {
  border-color: var(--accent-cyan);
  background: rgba(0,212,255,.05);
  box-shadow: 0 0 0 4px rgba(0,212,255,.1);
}
.upload-drop-icon { font-size: 2rem; margin-bottom: 8px }
.upload-drop-title { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 4px }
.upload-drop-sub   { font-size: .82rem; color: var(--muted); margin-bottom: 14px }
.upload-drop-hint  { font-size: .72rem; color: #9ca3af; margin-top: 12px }
.upload-drop-btns  { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }

/* Tallózó gombok */
.upload-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .2s ease;
  white-space: nowrap;
}
.upload-pick-btn.primary {
  background: linear-gradient(135deg, #0a1929, #1e3a5f);
  color: var(--accent-cyan);
  border: 1px solid rgba(0,212,255,.4);
}
.upload-pick-btn.primary:hover {
  border-color: rgba(0,212,255,.8);
  box-shadow: 0 0 14px rgba(0,212,255,.15);
}
.upload-pick-btn.secondary {
  background: var(--card-soft);
  color: var(--muted);
  border: 1px solid var(--border);
}
.upload-pick-btn.secondary:hover {
  background: #e9edf5;
  color: var(--text);
}

/* Előnézet lépés */
.upload-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.upload-file-count {
  font-size: .9rem;
  font-weight: 700;
  color: var(--accent);
}
.upload-file-list {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.upload-step-preview .upload-file-list {
  max-height: 180px;
  margin-bottom: 0;
}
.upload-file-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .83rem;
  color: var(--text);
}
.upload-file-list li:last-child { border-bottom: none }
.ufl-icon { font-size: 1rem; flex-shrink: 0 }
.ufl-size { margin-left: auto; color: var(--muted); font-size: .75rem; white-space: nowrap }

/* Feldolgozás indítása gomb */
.upload-go-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #0a1929, #1e3a5f);
  color: var(--accent-cyan);
  border: 1px solid rgba(0,212,255,.5);
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: all .2s ease;
  letter-spacing: .3px;
}
.upload-go-btn:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px rgba(0,212,255,.2);
}

/* Napló */
.upload-log-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  margin-bottom: 8px;
  padding: 24px 24px 0 24px;
}
.upload-log {
  background: #0d1b2a;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: .78rem;
  line-height: 1.7;
  color: #c8d6e5;
  max-height: 260px;
  overflow-y: auto;
  margin: 0 24px 16px 24px;
  min-height: 80px;
}
.upload-log div { padding: 1px 0 }

/* Spinner */
.upload-spinner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px 24px 24px;
  color: var(--muted);
  font-size: .85rem;
}
.upload-spin-ring {
  width: 20px; height: 20px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Siker */
.upload-success-icon { font-size: 3rem; text-align: center; margin: 24px 0 12px }
.upload-success-msg {
  text-align: center;
  font-size: .95rem;
  font-weight: 600;
  color: var(--green);
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Hiba */
.upload-error-box {
  background: #fff5f5;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--danger);
  font-size: .88rem;
  font-weight: 600;
  margin: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 520px) {
  .upload-drawer { max-width: 100% }
}

/* =========================================================
   TÖRLÉS GOMB
   ========================================================= */
/* ── Upload: eset névinput ─────────────────────────────── */

/* ── Sérülések info tooltip ─────────────────────── */
.dmg-info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dmg-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent, #2a9d8f);
  color: #fff;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  cursor: default;
  flex-shrink: 0;
  user-select: none;
}
.dmg-info-popup {
  display: none;
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  background: #1e2d3d;
  color: #e8edf2;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: normal;
  width: 280px;
  z-index: 200;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  pointer-events: none;
}
.dmg-info-tip:hover .dmg-info-popup { display: block; }

/* BVSK i-gomb popup – felfelé és balra nyílik */
.bvsk-info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: default;
}
.bvsk-info-tip .dmg-info-popup { display: none !important; }

/* Fixed body-szintű BVSK tooltip */
#bvsk-tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  background: #1e2d3d;
  color: #e8edf2;
  font-size: .75rem;
  font-family: 'Courier New', Courier, monospace;
  white-space: pre;
  line-height: 1.7;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
  pointer-events: none;
  letter-spacing: 0;
}
#bvsk-tooltip.visible { display: block; }

/* ── Batch progress bar ──────────────────────────────────────────────────── */
.batch-progress-header {
  font-size: .9rem;
  font-weight: 600;
  color: #2d3a4a;
  padding: 20px 24px 8px;
}
.batch-progress-bar-wrap {
  margin: 0 24px;
  height: 10px;
  background: #dde5f0;
  border-radius: 99px;
  overflow: hidden;
}
.batch-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0a1929, #1e88e5);
  border-radius: 99px;
  transition: width .4s ease;
}
.batch-progress-stat {
  padding: 6px 24px;
  font-size: .8rem;
  color: #6b7a8d;
}
.ae-tooltip{
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  background: #1e2d3d;
  color: #e8edf2;
  border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0,0,0,.45);
  padding: 10px 12px;
  font-size: .8rem;
  line-height: 1.45;
  max-width: 420px;
  pointer-events: none;
}

/* Tooltip tartalom – opcionális, ha kártya-szerű HTML-t adsz meg */
.ae-tooltip .tt-card{ display:block; }
.ae-tooltip .tt-title{ font-weight:700; margin-bottom:6px; }
.ae-tooltip .tt-row{ opacity:.95; }