/* ── Base / Light theme ────────────────────────────── */
body { background: #f4f6f9; min-height: 100vh; color: #1e2329; }

/* Navbar */
.app-navbar { background: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.app-navbar .navbar-brand { color: #1e2329; font-size: 1.05rem; }

/* Cards */
.card { border: 1px solid #dde1e8; border-radius: 14px; background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.card-header { background: #f8f9fb; border-bottom: 1px solid #dde1e8; border-radius: 14px 14px 0 0 !important; font-size: .92rem; padding: .65rem 1rem; }

/* Stat cards */
.stat-card { padding: .85rem 1rem; border: 1px solid #dde1e8; border-radius: 12px; background: #ffffff; box-shadow: 0 1px 6px rgba(0,0,0,.05); font-size: .9rem; color: #4a5568; }
.stat-card strong { color: #1e2329; font-size: 1.05rem; }

/* Terminal shell (scanner input panel) */
.terminal-shell { padding: 14px; background: #f8f9fb; border: 1px solid #dde1e8; border-radius: 14px; }

/* Scan input */
.scan-input { height: 44px; font-size: 1rem; border-radius: 10px; border: 1.5px solid #c3cad6; background: #fff; color: #1e2329; transition: border-color .2s, box-shadow .2s; }
.scan-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); outline: none; }
.scan-input:disabled { background: #f0f2f5; opacity: .6; }

/* Live status box */
.live-status {
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  border-radius: 16px; border: 1.5px solid #dde1e8;
  font-size: 3rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.status-idle     { background: #f4f6f9; color: #94a3b8; border-color: #dde1e8; }
.status-verified { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.status-duplicate{ background: #fffbeb; color: #92400e; border-color: #fcd34d; box-shadow: 0 0 0 3px rgba(251,191,36,.15); }
.status-extra    { background: #fef2f2; color: #991b1b; border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }

.result-pop { animation: scanPop .22s ease; }
@keyframes scanPop { 0%{transform:scale(.97);opacity:.7} 100%{transform:scale(1);opacity:1} }

/* Full-screen flash overlay */
.feedback-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 5rem; font-weight: 900; letter-spacing: .05em;
  opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 1080;
}
.feedback-overlay.show { opacity: 1; }
.feedback-verified  { color: #065f46; background: rgba(236,253,245,.88); }
.feedback-duplicate { color: #92400e; background: rgba(255,251,235,.88); }
.feedback-extra     { color: #991b1b; background: rgba(254,242,242,.88); }

/* Scanner page layout: fixed-height side-by-side panels */
.scanner-bottom-row { display: flex; gap: 1rem; margin-top: 1rem; height: 340px; }
.scanner-bottom-row .panel-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid #dde1e8; border-radius: 14px; background: #fff; overflow: hidden; }
.scanner-bottom-row .panel-card .panel-header { padding: .55rem 1rem; background: #f8f9fb; border-bottom: 1px solid #dde1e8; font-size: .88rem; font-weight: 600; color: #374151; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.scanner-bottom-row .panel-card .panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; font-size: .82rem; }
.scanner-bottom-row .panel-card .panel-footer { flex-shrink: 0; min-height: 2rem; }
.scanner-bottom-row .panel-card table { margin: 0; font-size: .82rem; }
.scanner-bottom-row .panel-card table thead th { position: sticky; top: 0; background: #f8f9fb; z-index: 1; font-size: .78rem; padding: .35rem .6rem; }
.scanner-bottom-row .panel-card table tbody td { padding: .3rem .6rem; vertical-align: middle; }

/* DataTables inside panel override */
.panel-body .dataTables_wrapper .dataTables_filter,
.panel-body .dataTables_wrapper .dataTables_length { padding: .4rem .6rem; }
.panel-body .dataTables_wrapper .dataTables_info,
.panel-body .dataTables_wrapper .dataTables_paginate { padding: .3rem .6rem; font-size: .78rem; }

/* Status badge colours (light) */
.badge-verified  { background: #d1fae5; color: #065f46; }
.badge-duplicate { background: #fef3c7; color: #92400e; }
.badge-extra     { background: #fee2e2; color: #991b1b; }

/* Tables */
.table { font-size: .88rem; }
.table thead th { background: #f8f9fb; font-size: .82rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }

/* Buttons */
.btn-sm { font-size: .8rem; }

@media (max-width: 992px) {
  .live-status { min-height: 150px; font-size: 2rem; }
  .feedback-overlay { font-size: 2.8rem; }
  .scanner-bottom-row { flex-direction: column; height: auto; }
  .scanner-bottom-row .panel-card { height: 300px; }
}

/* Dedicated mobile scanner page */
.scanner-mobile-page .mobile-live-status { min-height: 110px; font-size: 2rem; }
.scanner-mobile-page .mobile-scan-input { height: 52px; font-size: 1.05rem; }
.scanner-mobile-page .mobile-control-btn { height: 44px; font-size: .9rem; }
.scanner-mobile-page .mobile-qr-video {
  width: 100%;
  max-height: 42vh;
  background: #0f172a;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  object-fit: cover;
}
.scanner-mobile-page .panel-card {
  border: 1px solid #dde1e8;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.scanner-mobile-page .panel-header {
  padding: .55rem .85rem;
  background: #f8f9fb;
  border-bottom: 1px solid #dde1e8;
  font-size: .84rem;
  font-weight: 600;
  color: #374151;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scanner-mobile-page .panel-body { max-height: 38vh; overflow: auto; font-size: .8rem; }
.scanner-mobile-page .panel-body table thead th {
  position: sticky;
  top: 0;
  background: #f8f9fb;
  z-index: 1;
  font-size: .72rem;
}
@media (max-width: 576px) {
  .scanner-mobile-page { padding-bottom: 1rem; }
  .scanner-mobile-page .mobile-live-status { min-height: 96px; font-size: 1.6rem; }
  .scanner-mobile-page .mobile-qr-video { max-height: 34vh; }
  .scanner-mobile-page .panel-body { max-height: 34vh; }
  .scanner-mobile-page .stat-card { padding: .6rem .7rem; }
}