/* ── Global ── */
body {
  background-color: #f4f6fb;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container-fluid {
  max-width: 1400px;
}

/* ── Navbar ── */
.navbar-brand {
  font-size: 1.25rem;
  letter-spacing: .02em;
}

/* ── Cards ── */
.card {
  border-radius: 12px;
}

.card-hover {
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

/* ── Tables ── */
.table th {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.table td {
  vertical-align: middle;
}

/* ── Badges ── */
.badge {
  font-weight: 500;
  letter-spacing: .02em;
}

/* ── Forms ── */
.form-control:focus,
.form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* ── Scanner overlay animation ── */
@keyframes scan-line {
  0%   { top: 10%; }
  50%  { top: 85%; }
  100% { top: 10%; }
}

#scanLine {
  position: absolute;
  left: 5%;
  width: 90%;
  height: 2px;
  background: #0f0;
  box-shadow: 0 0 6px #0f0;
  animation: scan-line 2s linear infinite;
  pointer-events: none;
}

/* ── Video scanner ── */
#videoCamera {
  display: block;
  width: 100%;
}

/* ── Code font ── */
code, .font-monospace {
  font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}

/* ── Footer ── */
.footer {
  margin-top: auto;
}

/* ── Success animation ── */
@keyframes pop-in {
  0%   { transform: scale(.8); opacity: 0; }
  80%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.animate-pop {
  animation: pop-in .35s ease forwards;
}

/* ── Clickable table rows ── */
.apto-row:hover td {
  background-color: #e3f2fd !important;
}
.apto-row:hover .badge.bg-info {
  background-color: #0288d1 !important;
}

/* ── Mobile tweaks ── */
@media (max-width: 576px) {
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }
  h2 { font-size: 1.4rem; }
}
