/* === page-area.css — Single area profile (Light) === */

/* Breadcrumb + page head */
.crumbs {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  margin-bottom: var(--space-3);
}

.crumbs a:hover {
  color: var(--primary-500);
}

.crumbs b {
  color: var(--neutral-600);
  font-weight: 600;
}

.page-head {
  margin-bottom: var(--space-5);
}

.kicker {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--neutral-400);
  letter-spacing: 0.3px;
}

.page-head h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-3xl);
  color: var(--neutral-800);
  line-height: 1.2;
}

.page-intro {
  margin: 0;
  color: var(--neutral-500);
  font-size: var(--text-base);
  line-height: 1.7;
  max-width: 900px;
}

.page-intro b {
  color: var(--neutral-800);
  font-variant-numeric: tabular-nums lining-nums;
}

/* -- Hero KPI Band (same as homepage) -- */
.hero-kpis {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: 0;
  margin-bottom: var(--space-8);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--neutral-200);
}

.hero-kpi {
  color: var(--neutral-700);
  padding: var(--space-6) var(--space-4) var(--space-5);
  text-align: center;
  position: relative;
  min-width: 0;
}

.hero-kpi:nth-child(1) { background: rgba(5,28,201,0.02); }
.hero-kpi:nth-child(2) { background: rgba(255,150,0,0.02); }
.hero-kpi:nth-child(3) { background: rgba(173,21,255,0.02); }
.hero-kpi:nth-child(4) { background: rgba(235,74,108,0.02); }
.hero-kpi:nth-child(5) { background: rgba(34,197,94,0.02); }

.hero-kpi::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary-400);
}

.hero-kpi:nth-child(2)::before { background: var(--warm-500); }
.hero-kpi:nth-child(3)::before { background: var(--cat-auction); }
.hero-kpi:nth-child(4)::before { background: var(--cat-sale); }
.hero-kpi:nth-child(5)::before { background: var(--success); }

.hero-kpi:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--neutral-200) 20%, var(--neutral-200) 80%, transparent);
}

.hero-kpi .kpi-value {
  font-size: var(--text-3xl);
  font-weight: 800;
  margin: var(--space-2) 0;
  line-height: 1.1;
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--primary-400);
}

.hero-kpi:nth-child(2) .kpi-value { color: var(--warm-600); }
.hero-kpi:nth-child(3) .kpi-value { color: var(--cat-auction); }

.hero-kpi .kpi-value small {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-400);
}

.hero-kpi .kpi-label {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  font-weight: 500;
}

.hero-kpi .kpi-change {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
  color: var(--neutral-400);
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Layout rows */
.area-grid-32 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

#bottomGrid {
  grid-template-columns: 3fr 2fr;
}

#bottomGrid.single {
  grid-template-columns: 1fr;
}

.area-grid-32 > *,
.area-grid-2 > * {
  min-width: 0;
}

.area-grid-32.single {
  grid-template-columns: 1fr;
}

.area-stack {
  display: flex;
  flex-direction: column;
}

.area-stack .card:last-child {
  margin-bottom: 0;
}

.area-grid-32 .card,
.area-grid-2 .card {
  margin-bottom: 0;
}

.area-grid-32,
.area-grid-2 {
  margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}

.area-stack .card:first-child {
  margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}

/* Charts */
.chart-wrapper.chart-ppm { height: 240px; }
.chart-wrapper.chart-count { height: 120px; }
.chart-wrapper.chart-yearly { height: 260px; }

.chart-subtitle {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--text-xs);
  color: var(--neutral-400);
  font-weight: 600;
}

/* Section header with a link on the left */
.section-header .more-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary-500);
}

.section-header .more-link:hover {
  text-decoration: underline;
}

/* Tables */
.groups-table th,
.groups-table td,
.recent-table th,
.recent-table td {
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums lining-nums;
}

.groups-table th,
.groups-table td,
.recent-table th,
.recent-table td {
  padding: var(--space-3) var(--space-2);
}

.loading-cell {
  text-align: center;
  color: var(--neutral-400);
  padding: var(--space-6) !important;
}

.groups-table .sub,
.recent-table .sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--neutral-400);
  margin-top: 2px;
  white-space: nowrap;
}

.recent-table .price {
  font-weight: 700;
  color: var(--primary-400);
}

.recent-table .price .sub {
  font-weight: 400;
}

.only-m,
.price-compact,
.groups-table .sub.only-m,
.recent-table .sub.only-m {
  display: none;
}

.recent-table .date {
  color: var(--neutral-500);
}

.recent-table .muted,
.groups-table .muted {
  color: var(--neutral-300);
}

.count-bar {
  display: inline-block;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--primary-300);
  margin-inline-start: var(--space-2);
  vertical-align: middle;
}

.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--neutral-400);
  line-height: 1.6;
}

.table-foot a {
  color: var(--primary-500);
  font-weight: 600;
}

.table-foot button {
  margin-inline-start: auto;
}

/* Lists (largest deals, similar areas, radar) */
.deal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.deal-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  border-right: 3px solid var(--primary-400);
  transition: background var(--duration-fast);
}

.deal-list li:hover {
  background: var(--neutral-200);
}

.deal-list li.plain {
  background: none;
  border: none;
  padding: 0;
  color: var(--neutral-400);
  font-size: var(--text-sm);
}

.deal-list .who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.deal-list .who a {
  font-weight: 700;
  color: var(--neutral-800);
  font-size: var(--text-base);
}

.deal-list .who a:hover {
  color: var(--primary-500);
}

.deal-list .who small {
  font-size: var(--text-xs);
  color: var(--neutral-400);
}

.deal-list .what {
  text-align: left;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums lining-nums;
}

.deal-list .what b {
  color: var(--primary-400);
  font-weight: 800;
  font-size: var(--text-base);
}

.deal-list .what small {
  display: block;
  font-size: var(--text-xs);
  color: var(--neutral-400);
}

.deal-list .desc {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-inline-start: var(--space-1);
}

/* Radar badges */
.badge-grey {
  background: var(--neutral-200);
  color: var(--neutral-600);
}

/* Property-type chip */
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-600);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  vertical-align: middle;
}

.type-chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9AA3B2;
  flex-shrink: 0;
}

.type-chip[data-group="أراضي"] i { background: #4F9D69; }
.type-chip[data-group="بيوت"] i { background: #1F6FEB; }
.type-chip[data-group="شقق"] i { background: #B8479E; }
.type-chip[data-group="عمارات"] i { background: #D97B1A; }

/* Delta (reliable % or "عينة صغيرة") */
.delta {
  display: inline-block;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.delta.up { color: var(--success); }
.delta.down { color: var(--danger); }
.delta.flat { color: var(--neutral-500); }

.delta.na {
  color: var(--neutral-400);
  font-weight: 500;
  font-size: var(--text-xs);
  cursor: help;
}

/* Note at the end of a metric section */
.section-note {
  color: var(--neutral-400);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: var(--space-4) 0 0;
}

.section-note:empty {
  display: none;
}

/* Error state */
#errorBox .empty-state {
  padding: var(--space-10);
}

#errorBox .empty-state strong {
  display: block;
  color: var(--neutral-700);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

#errorBox .empty-state a.primary {
  display: inline-block;
  margin-top: var(--space-4);
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 600;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--glow-blue);
}

/* Responsive */
@media (max-width: 900px) {
  .hero-kpis { grid-template-columns: repeat(3, 1fr); }
  .area-grid-32,
  #bottomGrid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .hero-kpis { grid-template-columns: repeat(2, 1fr); }
  .hero-kpi:not(:last-child)::after { display: none; }
  .hero-kpi::before { left: 30%; right: 30%; }
  .hero-kpi .kpi-value { font-size: var(--text-2xl); }
  .hero-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-head h1 { font-size: var(--text-2xl); }

  .groups-table th,
  .groups-table td,
  .recent-table th,
  .recent-table td {
    padding: var(--space-2) var(--space-3);
  }

  .chart-wrapper.chart-ppm { height: 210px; }
  .chart-wrapper.chart-yearly { height: 220px; }
}

@media (max-width: 600px) {
  .groups-table th,
  .groups-table td,
  .recent-table th,
  .recent-table td {
    padding: 0.5rem 0.45rem;
    font-size: 0.75rem;
  }

  .groups-table .sub,
  .recent-table .sub {
    font-size: 0.65rem;
  }

  .hide-m,
  .price-full {
    display: none;
  }

  .groups-table .sub.only-m,
  .recent-table .sub.only-m {
    display: block;
  }

  .price-compact {
    display: inline;
  }

  .groups-table .count-bar {
    display: none;
  }

  .type-chip {
    font-size: 0.65rem;
    padding: 0.05rem 0.4rem;
  }

  .delta.na {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .hero-kpis { grid-template-columns: 1fr; }
  .hero-kpi::before { left: 25%; right: 25%; }
  .hero-kpi .kpi-value { font-size: var(--text-xl); }

  .deal-list li {
    padding: var(--space-2) var(--space-3);
  }

  .deal-list .who a {
    font-size: var(--text-sm);
  }
}