/* ── Base ───────────────────────────────────────────────────────── */
body { background: #f5f7fa; }

/* ── Reszponzív padding ──────────────────────────────────────────── */
@media (max-width: 575px) {
  .container-fluid.px-4 { padding-left: 10px !important; padding-right: 10px !important; }
  .navbar .container-fluid.px-4 { padding-left: 12px !important; padding-right: 12px !important; }
  h5 { font-size: 1.1rem; }
}

/* ── Loader bar ──────────────────────────────────────────────────── */
#loader-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: #5c6bc0; z-index: 9998;
  transition: width .25s ease, opacity .3s ease;
  opacity: 0;
}
#loader-bar.loading {
  opacity: 1;
  animation: loader-grow 1.2s ease-in-out infinite;
}
#loader-bar.done {
  width: 100% !important;
  opacity: 0;
  transition: width .1s ease, opacity .4s ease .1s;
}
@keyframes loader-grow {
  0%   { width: 10%; }
  50%  { width: 75%; }
  100% { width: 85%; }
}

/* ── Content spinner ─────────────────────────────────────────────── */
#content-spinner {
  position: fixed; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: rgba(245,247,250,.7); z-index: 100;
  backdrop-filter: blur(2px);
}

/* ── Navbar ─────────────────────────────────────────────────────── */
.navbar { background: #1a237e !important; }
.navbar-brand { color: #fff !important; font-weight: 700; letter-spacing: .01em; display: flex; align-items: baseline; gap: 8px; }
.navbar-sub { font-size: .75rem; font-weight: 400; color: rgba(255,255,255,.65); letter-spacing: .03em; }
.version-badge { font-size: .7rem; color: rgba(255,255,255,.45); letter-spacing: .05em; font-family: monospace; }

/* ── Breadcrumb (in navbar) ──────────────────────────────────────── */
#breadcrumb ol { margin: 0; background: transparent; }
#breadcrumb .breadcrumb-item a { color: rgba(255,255,255,.6); text-decoration: none; }
#breadcrumb .breadcrumb-item a:hover { color: #fff; }
#breadcrumb .breadcrumb-item.active { color: #fff; }
#breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.3); }

/* ── Cards ───────────────────────────────────────────────────────── */
.card { border: none; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ── Tables ──────────────────────────────────────────────────────── */
.table > :not(caption) > * > th {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: #6c757d; font-weight: 600;
}
.table-hover tbody tr { cursor: pointer; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(0,0,0,.025); }
.table-hover > tbody > tr:hover > * { background-color: #e8eef8 !important; }
.text-nowrap { white-space: nowrap; }

/* Mobilon kisebb cellák */
@media (max-width: 575px) {
  .table td, .table th { padding: 6px 6px; font-size: .82rem; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Status badges ───────────────────────────────────────────────── */
.badge-active  { background: #e8f5e9; color: #2e7d32; border-radius: 20px; padding: 3px 10px; font-size: .75rem; display:inline-block; }
.badge-closed  { background: #f3f4f6; color: #6b7280; border-radius: 20px; padding: 3px 10px; font-size: .75rem; display:inline-block; }

/* ── Item editor table ───────────────────────────────────────────── */
.item-table tbody tr:nth-of-type(odd) > * { background-color: rgba(0,0,0,.025); }
.item-table tbody tr:hover > * { background-color: #e8eef8 !important; }
@media (max-width: 575px) {
  .item-table .col-unit { display: none; }
  .item-table .col-unit-th { display: none; }
}
.item-table input {
  border: none; background: transparent;
  width: 100%; padding: 2px 4px; font-size: .875rem;
}
.item-table input:focus {
  background: #fff; border: 1px solid #90caf9;
  outline: none; border-radius: 4px;
}
.total-row { background: #e3f2fd; }
.total-row td { font-weight: 600; border-bottom: 0; }

/* ── Image thumbnails ────────────────────────────────────────────── */
.page-thumb {
  position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid #e0e0e0; background: #fafafa;
  margin-bottom: 8px;
}
.page-thumb img {
  width: 100%; max-height: 220px; object-fit: contain;
  display: block; cursor: zoom-in;
}
.page-thumb .page-label {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: .7rem; padding: 2px 8px; border-radius: 10px;
}
.page-thumb .page-delete {
  position: absolute; top: 6px; right: 6px;
  background: rgba(220,38,38,.85); color: #fff; border: none;
  border-radius: 50%; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .7rem;
}
.page-thumb .page-delete:hover { background: #dc2626; }
.page-thumb .ocr-status {
  font-size: .7rem; padding: 3px 8px; background: #f8f9fa;
  border-top: 1px solid #eee; color: #888;
}

/* ── OCR preview ─────────────────────────────────────────────────── */
.ocr-preview {
  font-family: monospace; font-size: .76rem; white-space: pre-wrap;
  max-height: 200px; overflow-y: auto;
  background: #f8f9fa; border-radius: 6px; padding: 10px; color: #555;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.empty-state { text-align: center; color: #bbb; padding: 52px 0; }
.empty-state i { font-size: 2.8rem; display: block; margin-bottom: 12px; }

/* ── Offcanvas resizable ─────────────────────────────────────────── */
.offcanvas.offcanvas-end { resize: horizontal; overflow: auto; min-width: 320px; }