/* === page-areas.css — Areas directory (Light) === */

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

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

.page-intro {
  margin: 0;
  color: var(--neutral-500);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Controls */
.areas-tool {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.areas-tool .field {
  flex: 1;
  min-width: 180px;
}

.areas-tool .field:first-child {
  flex: 2;
}

#areaSearch {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-size: var(--text-sm);
  background-color: var(--surface-input);
  color: var(--neutral-700);
  min-height: 40px;
  width: 100%;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

#areaSearch:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(5,28,201,0.2);
}

/* Chip filters */
.chip-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chip-filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.chip-filter-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-400);
  min-width: 82px;
}

.chip-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-chip {
  min-height: 32px;
  padding: 0.25rem 0.8rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--neutral-200);
  background: var(--surface-card);
  color: var(--neutral-500);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}

.filter-chip:hover {
  background: var(--surface-elevated);
  color: var(--neutral-700);
}

.filter-chip[aria-pressed="true"] {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: #fff;
  box-shadow: var(--glow-blue);
}

/* Count line */
.count-line {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--neutral-200);
  font-size: var(--text-sm);
  color: var(--neutral-500);
  font-variant-numeric: tabular-nums lining-nums;
}

.count-line b {
  color: var(--neutral-800);
  font-weight: 700;
}

.count-line .muted {
  color: var(--neutral-400);
}

/* Table */
.areas-table-wrapper {
  margin-top: var(--space-3);
}

.areas-table th,
.areas-table td {
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  vertical-align: middle;
}

.areas-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.areas-table th.sortable:hover {
  color: var(--primary-600);
}

.areas-table th.sortable::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  margin-inline-start: 0.25rem;
  opacity: 0.35;
  font-size: 0.65rem;
}

.areas-table th.sortable[aria-sort="descending"]::after {
  content: "▼";
  opacity: 1;
}

.areas-table th.sortable[aria-sort="ascending"]::after {
  content: "▲";
  opacity: 1;
}

.areas-table .loading-cell {
  text-align: center;
  color: var(--neutral-400);
  padding: var(--space-8);
}

.area-cell a {
  font-weight: 700;
  color: var(--neutral-800);
  font-size: var(--text-base);
}

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

.areas-table .sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--neutral-400);
  margin-top: 2px;
}

.areas-table .only-m,
.price-compact {
  display: none;
}

.areas-table .muted {
  color: var(--neutral-300);
}

.areas-table .ppm-val {
  font-weight: 700;
  color: var(--primary-400);
}

/* Proportional count bar */
.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;
}

/* Inline SVG sparkline */
.inline-spark {
  width: 96px;
  height: 24px;
  display: block;
}

.inline-spark rect {
  fill: var(--primary-300);
}

.inline-spark rect.last {
  fill: var(--primary-200);
}

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

.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;
}

/* Responsive */
@media (max-width: 768px) {
  .areas-table th,
  .areas-table td {
    padding: var(--space-2) var(--space-3);
  }
}

@media (max-width: 600px) {
  .chip-filter-label {
    min-width: 0;
    width: 100%;
  }

  .areas-table .hide-m {
    display: none;
  }

  .areas-table .only-m {
    display: inline;
  }

  .areas-table .sub.only-m {
    display: block;
  }

  .price-full {
    display: none;
  }

  .price-compact {
    display: inline;
  }

  .count-bar {
    display: none;
  }

  .areas-table th,
  .areas-table td {
    padding: 0.5rem 0.4rem;
    font-size: 0.75rem;
  }

  .areas-table th {
    white-space: normal;
    line-height: 1.3;
    font-size: 0.65rem;
    vertical-align: bottom;
  }

  .areas-table td.area-cell {
    white-space: normal;
    min-width: 96px;
  }

  .area-cell a {
    font-size: var(--text-sm);
  }

  .areas-table .sub {
    font-size: 0.65rem;
  }

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

@media (max-width: 480px) {
  .areas-tool {
    flex-direction: column;
  }

  .areas-tool .field {
    min-width: 0;
    width: 100%;
  }
}