/* ── Global ── */
body { background: #f8f9fa; font-family: system-ui, sans-serif; }

/* ── Drop zone ── */
.drop-zone {
  border: 2px dashed #adb5bd;
  border-radius: 12px;
  padding: 1.75rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  /* Prevent text selection on double-tap (mobile) */
  user-select: none;
  -webkit-user-select: none;
}
.drop-zone:hover,
.drop-zone.drag-over { border-color: #28a745; background: #f0fff4; }

/* Larger tap target on mobile */
@media (max-width: 767px) {
  .drop-zone { padding: 2rem 1rem; }
}

/* ── Category legend badges ── */
.badge-cat {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.badge-cat.recyclable { background: #28a745; }
.badge-cat.organic    { background: #6f42c1; }
.badge-cat.hazardous  { background: #dc3545; }
.badge-cat.discard    { background: #6c757d; }
.badge-cat.unknown    { background: #ffc107; color: #333; }

/* ── Detection list items ── */
.detection-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  margin-bottom: .4rem;
  background: #fff;
  transition: box-shadow .15s;
}
.detection-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.det-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.det-class       { font-weight: 600; font-size: .88rem; }
.det-cat         { font-size: .78rem; color: #555; }
.det-instruction { font-size: .75rem; color: #888; }
.det-conf        { margin-left: auto; font-size: .8rem; color: #888; flex-shrink: 0; }

/* ── Summary cards ── */
.summary-card {
  border-radius: 10px;
  color: #fff;
  padding: .6rem .9rem;
  text-align: center;
  min-width: 72px;
}
.summary-card .count { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.summary-card .label { font-size: .7rem; opacity: .9; margin-top: 2px; }

/* ── Live view ── */
#liveOutput { display: none; }

/* ── Card header ── */
.card-header { background: #fff; }

/* ── Buttons — larger tap targets on mobile ── */
@media (max-width: 575px) {
  .btn-lg { min-height: 48px; font-size: 1rem; }
  .nav-link { padding: .5rem .4rem; font-size: .85rem; }
}

/* ── Sticky nav safe area (notch phones) ── */
.navbar {
  padding-top: max(.5rem, env(safe-area-inset-top));
  padding-left: max(.75rem, env(safe-area-inset-left));
  padding-right: max(.75rem, env(safe-area-inset-right));
}

/* ── No horizontal overflow on mobile ── */
.container-fluid { overflow-x: hidden; }

/* ── Dashboard KPI cards ── */
.kpi-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  height: 100%;
  transition: box-shadow .15s;
}
.kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }

.kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  margin-bottom: .5rem;
}
.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: #212529;
}
.kpi-value-sm {
  font-size: 1.1rem;
  word-break: break-word;
}
.kpi-label {
  font-size: .75rem;
  color: #6c757d;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Dashboard table ── */
#recentTable th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
#recentTable td { font-size: .84rem; vertical-align: middle; }

/* ── Dashboard tab spinner overlay ── */
#dashContent { transition: opacity .2s; }