/* ---------- Layout variables ---------- */
:root{
  --pf-gap:12px;
  --pf-radius:10px;
  --pf-border:#e7e7e7;
  --pf-muted:#6b7280;
  --pf-text:#111827;
  --pf-bg:#ffffff;
  --pf-accent:#2563eb;
  --pf-accent-2:#1d4ed8;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark){
  :root{
    --pf-border:#2a2a2a;
    --pf-muted:#9ca3af;
    --pf-text:#f3f4f6;
    --pf-bg:#0b0b0b;
  }
}

/* Filter bar */
#property-filter-form{
  display:grid;
  grid-template-columns: repeat(6, minmax(120px,1fr));
  gap: var(--pf-gap);
  align-items:end;
  background: var(--pf-bg);
  border:1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding:16px;
  position:sticky;
  top:0;
  z-index:1;
}
#property-filter-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.9rem;
  color: var(--pf-muted);
}
#property-filter-form select,
#property-filter-form input[type="number"],
#property-filter-form input[type="date"]{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--pf-border);
  border-radius:8px;
  background:#fff;
  color: var(--pf-text);
  outline:none;
}
#property-filter-form select:focus,
#property-filter-form input:focus{
  border-color: var(--pf-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
#property-filter-form button[type="submit"]{
  padding:12px 14px;
  border:none;
  border-radius:8px;
  background: var(--pf-accent);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
#property-filter-form button[type="submit"]:hover{ background: var(--pf-accent-2); }

/* Responsive */
@media (max-width: 1024px){
  #property-filter-form{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  #property-filter-form{ grid-template-columns: 1fr 1fr; }
  #property-filter-form button[type="submit"]{ grid-column: 1 / -1; }
}

/* Results grid */
#property-results{ margin-top:16px; }
.pf-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.property-item{ border:1px solid var(--pf-border); border-radius: var(--pf-radius); background:var(--pf-bg); padding:12px; }
.property-item img{ width:100%; height:160px; object-fit:cover; border-radius:6px; margin-bottom:10px; }
.pf-muted{ color: var(--pf-muted); font-size: .92rem; }