/**
 * Watchdog Scanner Admin Dashboard — styles (polish pass)
 * Built by Kenan Zeljkovic at Beagle, for Beagle.
 *
 * Same palette as the extension itself (popup.css): orange #FF7A00 as the
 * brand color, near-black #1B2430 for text, warm off-white tints for
 * secondary surfaces, red for destructive/false-positive, green for
 * success — kept consistent so this feels like the same product, not a
 * separate tool bolted on.
 *
 * Every class/ID name here is unchanged from before this pass — this is
 * a visual refinement (depth, motion, typography), not a restructure, so
 * nothing in index.html or app.js needed to change alongside it.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #FAFAF9;
  color: #1B2430;
  -webkit-font-smoothing: antialiased;
}

/* ── Shared motion ───────────────────────────────────────────────────────
 * One pulse animation, reused by both the global status dot and the
 * per-rep presence dots — a slow, gentle breathing fade rather than a
 * hard blink, so the dashboard reads as "alive" without being distracting
 * to look at for an admin who has it open all day. */
@keyframes watchdog-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #FF9433 0%, #FF7A00 55%, #F27000 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 12px rgba(255, 122, 0, 0.25);
}

header h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

header .header-sub {
  font-weight: 600;
  font-size: 13px;
  opacity: 0.85;
  margin-left: 6px;
}

.auth-area {
  margin-left: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
}

.status-indicator-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: watchdog-pulse 2.4s ease-in-out infinite;
}
.status-indicator-dot.active { background: #3DDC64; box-shadow: 0 0 0 3px rgba(61, 220, 100, 0.28); }
.status-indicator-dot.disabled { background: #FF4D4D; box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.32); }

.kill-switch-area {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.kill-switch-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  user-select: none;
}

/* A proper pill-style switch instead of a bare native checkbox — reads
 * more like a real "power" control befitting what it actually does. */
.kill-switch-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  position: relative;
  cursor: pointer;
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.kill-switch-toggle input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}
.kill-switch-toggle input[type="checkbox"]:checked {
  background: rgba(255, 255, 255, 0.35);
}
.kill-switch-toggle input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}

.auth-area img.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.auth-area .signout-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.auth-area .signout-btn:hover { background: rgba(255, 255, 255, 0.3); }

/* ── Signed-out view ─────────────────────────────────────────────────── */

.signed-out-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 60px);
  padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 148, 51, 0.06), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(255, 122, 0, 0.05), transparent 45%);
}

/* Without this, [hidden]'s default display:none loses to the class rule
 * above at equal CSS specificity — meaning this card would stay visibly
 * displayed even after app.js sets signedOutView.hidden = true on a
 * successful sign-in. This is the actual root cause of the dashboard
 * appearing "stuck" on the sign-in screen even when auth succeeded. */
.signed-out-view[hidden] {
  display: none;
}

.signed-out-card {
  max-width: 380px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #F0DCC0;
  border-radius: 16px;
  padding: 36px 30px;
  box-shadow: 0 8px 30px rgba(27, 36, 48, 0.08), 0 2px 8px rgba(27, 36, 48, 0.04);
}

.signed-out-card img {
  filter: drop-shadow(0 4px 10px rgba(255, 122, 0, 0.25));
}

.signed-out-card h2 {
  margin: 16px 0 6px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.signed-out-card p {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: #6B7280;
  line-height: 1.55;
}

.signin-btn {
  width: 100%;
  padding: 12px 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(180deg, #FF9433 0%, #FF7A00 55%, #F27000 100%);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(255, 122, 0, 0.3);
  transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.signin-btn:hover { box-shadow: 0 8px 20px rgba(255, 122, 0, 0.4); transform: translateY(-1px); }
.signin-btn:active { transform: translateY(0); }

.signin-error {
  margin-top: 12px;
  font-size: 12.5px;
  color: #E03131;
}

/* ── Main view ────────────────────────────────────────────────────────── */

.main-view {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid #EEE;
}

.tab-btn {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #8A6A50;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 10px 14px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-btn:hover { color: #CC5F00; }

.tab-btn.selected {
  color: #CC5F00;
  border-bottom-color: #FF7A00;
}

.tab-panel[hidden] { display: none; }
.tab-panel {
  animation: watchdog-tab-fade 0.18s ease-out;
}
@keyframes watchdog-tab-fade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.panel-toolbar input[type="search"] {
  flex: 1;
  max-width: 360px;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #E5D9C6;
  background: #FFFFFF;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.panel-toolbar input[type="search"]:focus {
  outline: none;
  border-color: #FF7A00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.12);
}

.count-pill {
  font-size: 12px;
  font-weight: 700;
  color: #CC5F00;
  background: #FFF2E3;
  border: 1px solid #FFE1BB;
  border-radius: 999px;
  padding: 4px 10px;
}

.table-wrap {
  background: #FFFFFF;
  border: 1px solid #EEE;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(27, 36, 48, 0.04);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8A6A50;
  background: #FFF9F2;
  padding: 11px 14px;
  border-bottom: 1px solid #F0DCC0;
}

tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid #F3F3F1;
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: #FFFBF6; }

/* DNC Numbers table — fixed column widths + consistent single-line
   truncation, instead of letting phone numbers and names wrap
   unpredictably (found via a real screenshot showing some rows at one
   line and others at two, purely by accident of content length). Every
   row is now a consistent height regardless of how long a name is —
   the full text is still available via the title attribute on hover. */
#numbersTable {
  table-layout: fixed;
}
#numbersTable td:nth-child(1) {
  white-space: nowrap;
  width: 118px;
}
#numbersTable td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0; /* forces the ellipsis to respect table-layout: fixed's column width instead of growing */
}
#numbersTable td:nth-child(4) {
  white-space: nowrap;
  width: 150px;
}
#numbersTable td:nth-child(5) {
  white-space: nowrap;
  width: 150px;
}

.empty-row td, p.empty-row {
  color: #A0A0A0;
  text-align: center;
  padding: 32px 14px;
  font-size: 13px;
}

.kind-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}
.kind-universal { background: #FDEBEB; color: #E03131; }
.kind-enterprise { background: #FFECD9; color: #CC5F00; }

.reporter-badge {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: #8A6A50;
  background: #F5EFE6;
  border: 1px solid #E5D9C6;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  cursor: help;
}

.info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #B8A488;
  cursor: help;
  margin-left: 3px;
  vertical-align: middle;
  transition: color 0.15s ease;
}
.info-badge:hover { color: #CC5F00; }

.tab-blurb {
  font-size: 12.5px;
  color: #8A8F98;
  margin: 0 0 14px;
  line-height: 1.5;
}

.admin-col[hidden] { display: none; }

.row-action-btn {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  border: none;
  border-radius: 7px;
  padding: 6px 10px;
  cursor: pointer;
  margin-right: 4px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.row-action-btn:active { transform: scale(0.96); }

.row-action-btn.delete {
  background: #FDEBEB;
  color: #E03131;
}
.row-action-btn.delete:hover { background: #F8D4D4; }

.row-action-btn.add {
  background: #FFF2E3;
  color: #CC5F00;
}
.row-action-btn.add:hover { background: #FFE7CC; }

/* Duplicates tab — each cluster is its own card rather than more table
   rows, since (unlike every other tab) each item here represents a GROUP
   of raw entries, not a single flat record. */
.dup-cluster {
  background: #FFFFFF;
  border: 1px solid #EEE;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(27, 36, 48, 0.04);
  margin-bottom: 14px;
  overflow: hidden;
}

.dup-cluster-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #FFF9F2;
  border-bottom: 1px solid #F0DCC0;
}
.dup-cluster-header strong { font-size: 14px; }
.dup-variant-count {
  flex: 1;
  font-size: 12px;
  color: #8A8F98;
}

.dup-cluster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dup-cluster-table thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8A6A50;
  padding: 8px 14px;
  border-bottom: 1px solid #F3F3F1;
}
.dup-cluster-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid #F8F8F6;
}
.dup-cluster-table tbody tr:last-child td { border-bottom: none; }
.dup-cluster-table code {
  font-family: "Courier New", monospace;
  font-size: 12px;
  background: #F5EFE6;
  border-radius: 4px;
  padding: 1px 5px;
}

.dup-canonical-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #2B8A3E;
  background: #E9F7EC;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
}

/* ── Users tab ──────────────────────────────────────────────────────────── */

.users-subheading {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8A6A50;
  margin: 24px 0 10px;
}
.users-subheading:first-of-type { margin-top: 0; }

.add-admin-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.add-admin-row input[type="email"] {
  flex: 1;
  max-width: 320px;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #E5D9C6;
  background: #FFFFFF;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.add-admin-row input[type="email"]:focus {
  outline: none;
  border-color: #FF7A00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.12);
}

.admins-list, .users-list {
  background: #FFFFFF;
  border: 1px solid #EEE;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(27, 36, 48, 0.04);
}

.admin-row, .user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #F3F3F1;
  font-size: 13px;
  transition: background 0.12s ease;
}
.admin-row:last-child, .user-row:last-child { border-bottom: none; }
.admin-row:hover, .user-row:hover { background: #FFFBF6; }

.admin-row span:first-child { flex: 1; }

.user-name {
  flex: 1;
  font-weight: 600;
}

.presence-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Only the ACTIVE dot pulses — a gray/inactive dot pulsing would read as
 * "something's happening" when nothing is, which is the wrong signal. */
.presence-dot.active {
  background: #2F9E44;
  box-shadow: 0 0 0 3px rgba(47, 158, 68, 0.22);
  animation: watchdog-pulse 2.4s ease-in-out infinite;
}
.presence-dot.inactive { background: #D6D6D6; }

.role-toggle {
  display: flex;
  gap: 6px;
}

.role-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid #E5D9C6;
  background: #FFFFFF;
  color: #8A6A50;
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.role-btn:hover { background: #FFF9F2; }
.role-btn.selected {
  background: #FF7A00;
  border-color: #FF7A00;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(255, 122, 0, 0.28);
}

/* ── Reports list (cards, not a table — screenshots need room) ─────────── */

.reports-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-card {
  display: flex;
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid #EEE;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(27, 36, 48, 0.04);
  transition: box-shadow 0.18s ease, transform 0.15s ease;
}
.report-card:hover {
  box-shadow: 0 6px 18px rgba(27, 36, 48, 0.08);
  transform: translateY(-1px);
}

.report-card.reviewed {
  opacity: 0.6;
}

.report-thumb {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #EEE;
  cursor: zoom-in;
  background: #F5F5F5;
  transition: transform 0.15s ease;
}
.report-thumb:hover { transform: scale(1.03); }

.report-body {
  flex: 1;
  min-width: 0;
}

.report-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.report-type-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}
.report-type-badge.false_positive { background: #FDEBEB; color: #E03131; }
.report-type-badge.false_negative { background: #FFECD9; color: #CC5F00; }

.report-title {
  font-weight: 700;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-meta {
  font-size: 11.5px;
  color: #8A8F98;
  margin: 2px 0 6px;
}

.report-note {
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 8px;
  color: #333;
}

.report-actions {
  display: flex;
  gap: 6px;
}

/* ── Lightbox (full-size screenshot view) ───────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 30px;
  animation: watchdog-lightbox-fade 0.15s ease-out;
}
.lightbox[hidden] { display: none; }

@keyframes watchdog-lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox-inner img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  display: block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #FF7A00;
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}
.lightbox-close:hover { transform: scale(1.08); }

/* ── Help button + tutorial modal ─────────────────────────────────────── */

.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  cursor: pointer;
  margin-left: 8px;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.12s ease;
}
.help-btn:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.06); }

.help-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 30px;
  animation: watchdog-lightbox-fade 0.15s ease-out;
}
.help-modal[hidden] { display: none; }

.help-modal-inner {
  position: relative;
  max-width: 560px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 28px 30px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Deliberately NOT reusing .lightbox-close here — that button floats
   OUTSIDE its container using negative top/right offsets, which relies
   on the parent having no overflow clipping. This modal needs
   overflow-y: auto to let long tutorial content scroll, and that same
   overflow property clips anything positioned outside the box — which is
   exactly why the reused button was nearly invisible, clipped in the
   corner. This version sits INSIDE the padded area instead (positive
   offsets), so it stays fully visible regardless of scrolling. */
.help-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #F5F0E8;
  color: #8A6A50;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.help-modal-close:hover { background: #FF7A00; color: #FFFFFF; }

.help-modal-inner h2 {
  margin: 0 0 4px;
  font-size: 18px;
  color: #1B2430;
}

.help-modal-inner h3 {
  margin: 18px 0 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #CC5F00;
}

.help-intro {
  margin: 0;
  font-size: 12.5px;
  color: #8A8F98;
  line-height: 1.5;
}

.help-modal-inner p {
  font-size: 13px;
  line-height: 1.55;
  color: #333;
  margin: 0;
}

.help-list {
  margin: 0;
  padding-left: 18px;
}
.help-list li {
  font-size: 13px;
  line-height: 1.55;
  color: #333;
  margin-bottom: 6px;
}

/* Exposure lookup modal — each row is one real warning-shown event, not
   a summary count, so this deliberately looks like a small log rather
   than a stat card. */
.exposure-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F3F3F1;
  font-size: 13px;
}
.exposure-row:last-child { border-bottom: none; }
.exposure-rep { font-weight: 700; color: #1B2430; }
.exposure-source {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
}
.exposure-source.record { background: #FDECEC; color: #C0392B; }
.exposure-source.dialer { background: #FFF2E3; color: #CC5F00; }
.exposure-when { color: #8A8F98; font-size: 12px; white-space: nowrap; }
.exposure-empty { color: #8A8F98; font-size: 13px; padding: 12px 0; }

.help-homage {
  margin-top: 18px !important;
  padding-top: 12px;
  border-top: 1px solid #F0DCC0;
  font-size: 10.5px !important;
  color: #C4B39A !important;
  font-style: italic;
}

/* ── Retention warning (Recently Deleted tab) ──────────────────────────── */

.retention-warning {
  margin: 16px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #E03131;
  text-align: center;
}

/* ── Trends tab ─────────────────────────────────────────────────────── */

.stat-cards {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 160px;
  background: #FFFFFF;
  border: 1px solid #EEE;
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(27, 36, 48, 0.04);
}

.stat-number {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #FF7A00;
  letter-spacing: -0.01em;
}

.stat-label {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #8A8F98;
}

.bar-chart {
  background: #FFFFFF;
  border: 1px solid #EEE;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(27, 36, 48, 0.04);
  margin-bottom: 8px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.bar-label {
  flex: 0 0 130px;
  font-size: 12px;
  font-weight: 600;
  color: #1B2430;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  flex: 1;
  height: 10px;
  background: #F5F0E8;
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF9433, #FF7A00);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.bar-value {
  flex: 0 0 30px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: #CC5F00;
}

/* ── Users tab: deactivation ────────────────────────────────────────── */

.link-btn {
  display: inline-block;
  margin-top: 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #CC5F00;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.link-btn:hover { text-decoration: underline; }

.deactivated-list {
  margin-top: 10px;
  opacity: 0.85;
}

.deactivated-row {
  background: #FAFAF9;
}
.deactivated-row .user-name {
  color: #8A8F98;
  font-weight: 500;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.dashboard-footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 24px 28px;
}

.dashboard-footer p {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #B8A488;
}

.footer-version {
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  color: #D6C7AE;
}

/* ══════════════════════════════════════════════════════════════════════
 * MOBILE LAYOUT — everything below only activates under 680px wide.
 * Every rule above this point is completely untouched on desktop; this
 * block only adds narrower-screen overrides, it never removes or
 * changes what desktop sees.
 * ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* Header: let it wrap into two rows instead of squeezing everything
     into one and overflowing. Drop the "Admin Dashboard" subtitle and
     shrink the title — reclaims just enough width for the status badge,
     kill switch, and sign-out button to fit on the second row. */
  header {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 8px;
  }
  header h1 { font-size: 14px; }
  header .header-sub { display: none; }
  .status-indicator { margin-left: 0; font-size: 11px; }
  .kill-switch-area { margin-left: 0; }
  .auth-area { margin-left: 0; gap: 6px; }
  .auth-area span { display: none; } /* name text — avatar + Sign out is enough on a small screen */

  /* Tabs: horizontal swipe instead of wrapping into a cramped grid. */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn {
    flex-shrink: 0;
    padding: 10px 11px;
    font-size: 12.5px;
  }

  .main-view { padding: 14px 12px 40px; }

  /* Tables: horizontal scroll rather than crushing columns unreadable. */
  .table-wrap { overflow-x: auto; }
  table { min-width: 560px; }

  /* Toolbar: stack search above the count pill instead of side by side. */
  .panel-toolbar { flex-wrap: wrap; }
  .panel-toolbar input[type="search"] { max-width: 100%; flex-basis: 100%; }

  /* Report cards: stack the screenshot above the text instead of a
     cramped side-by-side that squeezes the text column too narrow. */
  .report-card { flex-direction: column; }
  .report-thumb { width: 100%; height: 160px; }

  /* Users/Admins tab: let rows wrap so the role buttons drop to their
     own line instead of overflowing off the right edge. */
  .admin-row, .user-row { flex-wrap: wrap; }
  .role-toggle { flex-basis: 100%; justify-content: flex-start; margin-top: 4px; }
  .add-admin-row { flex-direction: column; }
  .add-admin-row input[type="email"] { max-width: 100%; }
}

/* Phone-width only (narrower than the tablet breakpoint above) — the
   DNC Numbers table specifically. Horizontal scroll alone reads as
   jumbled at true phone widths (columns end up touching with almost no
   visual gap) — stacked cards read cleanly at any width instead.
   data-label attributes on each <td> (added in app.js) drive the ::before
   labels below via CSS alone, no extra markup duplication needed. */
@media (max-width: 480px) {
  #tab-numbers .table-wrap, #tab-auditLog .table-wrap { overflow-x: visible; }
  #tab-numbers table, #tab-numbers thead, #tab-numbers tbody, #tab-numbers tr, #tab-numbers td,
  #tab-auditLog table, #tab-auditLog thead, #tab-auditLog tbody, #tab-auditLog tr, #tab-auditLog td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  #tab-numbers thead, #tab-auditLog thead { display: none; }
  #tab-numbers tbody tr, #tab-auditLog tbody tr {
    border-bottom: 8px solid #F8F8F6;
    padding: 10px 0;
  }
  #tab-numbers tbody tr.empty-row, #tab-auditLog tbody tr.empty-row { border-bottom: none; }
  #tab-numbers tbody td, #tab-auditLog tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    border-bottom: none;
    text-align: right;
  }
  #tab-numbers tbody td[data-label]:not([data-label=""])::before,
  #tab-auditLog tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8A6A50;
    text-align: left;
    flex-shrink: 0;
  }
  #tab-numbers tbody td[title] {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── Bulk Import (DNC) — temporary, remove alongside bulk-import-dnc.js ── */
#bulkImportLog { max-height: 260px; overflow-y: auto; }
#bulkImportLog p { margin: 4px 0; font-size: 12.5px; font-family: ui-monospace, monospace; }
#bulkImportLog p.ok-row { color: #2F9E44; }
#bulkImportLog p.bad-row { color: #E03131; }

/* Bootstrap/admin-setup failure detail on the denial screen — normally
   empty, so it takes up no space unless something actually went wrong. */
.denied-message:empty { display: none; }
.denied-message {
  margin-top: 10px; font-size: 12.5px; color: #E03131;
  background: #FDEBEB; border: 1px solid #F5C2C2; border-radius: 8px;
  padding: 10px 12px; text-align: left; line-height: 1.5;
}

/* DEMO BUILD chip */
.demo-chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(255,255,255,0.22); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.35);
  padding: 3px 9px; border-radius: 999px; margin-left: 10px; white-space: nowrap;
}