:root {
  --blu-blue:  #0057B7;
  --blu-light: #00A0E4;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

body {
  background: #f0f4f8;
  color: #1e293b;
  font-size: 0.9375rem;
}

.site-nav {
  background-color: var(--blu-blue) !important;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */

.filter-bar {
  background: #fff;
  border: 1px solid #d1dbe8;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
}

.filter-bar label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

/* ── Comparison table ────────────────────────────────────────────────────── */

.table-phones {
  background: #fff;
  font-size: 0.875rem;
}

.table-phones thead th {
  background: #1e293b;
  color: #f1f5f9;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
  border-color: #334155;
  cursor: pointer;
  user-select: none;
}

.table-phones thead th:hover {
  background: #334155;
}

.table-phones thead th .sort-icon {
  opacity: 0.35;
  font-style: normal;
  font-size: 0.75em;
  margin-left: 0.2em;
}

.table-phones thead th.sorted .sort-icon {
  opacity: 1;
  color: var(--blu-light);
}

.table-phones tbody tr:hover td {
  background: #f0f7ff;
}

.phone-name-col {
  min-width: 145px;
}

.phone-name {
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
}

/* ── Per-cell highlights ─────────────────────────────────────────────────── */

.cell-best {
  color: #059669;
  font-weight: 700;
}

.text-unknown {
  color: #94a3b8;
}

.text-discontinued {
  color: #e11d48;
  font-size: 0.8125rem;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.badge-5g       { background-color: var(--blu-blue) !important; }
.badge-new      { background-color: #d97706 !important; }
.badge-value    { background-color: #059669 !important; }
.badge-wireless { background-color: #7c3aed !important; }
.badge-hz       { background-color: #0ea5e9; color: #fff; }

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

.site-footer {
  background: #1e293b;
  color: #94a3b8;
  font-size: 0.8125rem;
  padding: 1.25rem 0;
}

.site-footer a {
  color: #cbd5e1;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ── Results count / disclaimer ─────────────────────────────────────────── */

.disclaimer {
  font-size: 0.8125rem;
  color: #64748b;
}

.refresh-note {
  font-size: 0.8125rem;
  color: #64748b;
}

/* ── No-results row ──────────────────────────────────────────────────────── */

#no-results {
  display: none;
}

/* ── Discontinued filter ─────────────────────────────────────────────────── */

#phones-table.hide-discontinued tr[data-discontinued="1"] {
  display: none;
}

/* ── Phone detail page ───────────────────────────────────────────────────── */

.back-link {
  color: #64748b;
  text-decoration: none;
}

.back-link:hover {
  color: var(--blu-blue);
  text-decoration: underline;
}

.phone-hero {
  background: #fff;
  border: 1px solid #d1dbe8;
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
}

.phone-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--blu-blue);
  line-height: 1;
}

.spec-card-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.4rem;
}

.spec-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.1;
}

.spec-value--sm {
  font-size: 1.1rem;
}

.spec-unit {
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
}

/* ── Table: phone name link ──────────────────────────────────────────────── */

.phone-name a {
  color: inherit;
  text-decoration: none;
}

.phone-name a:hover {
  color: var(--blu-blue);
  text-decoration: underline;
}

.blu-ext {
  font-size: 0.7rem;
  color: #94a3b8;
  text-decoration: none;
  vertical-align: super;
}

.blu-ext:hover {
  color: var(--blu-blue);
}

.chipset-link {
  color: inherit;
  text-decoration: underline dotted #94a3b8;
}

.chipset-link:hover {
  color: var(--blu-blue);
  text-decoration: underline;
}

.series-label {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 0.1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}