/* property_deatails */
.btn-print {
  background: var(--emerald); color: #fff; border: none;
  padding: 7px 16px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s;
  text-decoration: none;
}
.card-pd-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 24px;
}

.card-pd-head h3 {
    margin: 0;
}

.card-pd-head p {
    margin: 6px 0 0;
    color: #172033;
    font-size: 16px;
}
.tbl{
    width:100%;
    border-collapse:collapse;
}

.tbl th,
.tbl td{
    border:1px solid #ccc;
    padding:10px;
}

.no-data-row{
    text-align:center;
    color:#dc3545;
    font-weight:600;
    background:#fff;
    padding:20px;
}

  /* set this for margin and top,bottom */
  .pd-section {
    margin-top: 15px;
    margin-bottom: 15px;
}
  .ml-value-label {
  background: #fff;
  border: 1px solid #64748B;
  border-radius: 4px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.ml-value-label::before { border-top-color: #64748B !important; }

.ml-subject-marker {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--emerald); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
  .tbl thead tr:first-child th {
    background:#243b53;
    color:white;
    text-align:center;
    font-size:16px;
    padding:12px;
}
.pd-section-title-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 20px;
  border: 1px solid #212529;
  border-radius: 6px;
  padding: 8px 20px;
  font-weight: 600;
  text-align: center;
}
.legal-doc-card {
  border: 1px solid #e9ecef;
  border-radius: 6px;
  text-align: center;
  overflow: hidden;
}
.legal-doc-icon {
  font-size: 28px;
  color: #495057;
  padding: 20px 0 8px;
}
.legal-doc-label {
  font-weight: 500;
  padding-bottom: 16px;
  color: #212529;
}
.legal-doc-status {
  background: #f1f3f5;
  padding: 10px;
  font-weight: 600;
  font-size: 13px;
  color: #495057;
}
.street-house-card {
  border: 1px solid #e9ecef;
  border-radius: 6px;
  text-align: center;
  overflow: hidden;
}
.street-house-icon {
  font-size: 28px;
  color: #0d6efd;
  padding: 20px 0 8px;
}
.street-house-address {
  padding: 12px 8px;
  font-weight: 600;
  font-size: 13px;
}
  /* ═══════════════════════════════════════
   HEADER — white card style (breadcrumb+title / address bar)
═══════════════════════════════════════ */
.pd-header-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.pd-header-card .breadcrumb { margin-bottom: 4px; }
.pd-header-card .breadcrumb-item a { color: var(--ink-faint); text-decoration: none; font-size: 12px; }
.pd-header-card .breadcrumb-item a:hover { color: var(--emerald); }
.pd-header-card .breadcrumb-item.active,
.pd-header-card .breadcrumb-item + .breadcrumb-item::before { color: var(--ink-faint) !important; font-size: 12px; }
.pd-header-card h1 { font-size: 1.4rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin: 0; }

.pd-brand-lg { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.pd-brand-lg .pd-brand-icon {
  width: 34px; height: 34px; background: var(--emerald);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.9rem; flex-shrink: 0;
}
.pd-brand-lg .pd-brand-name { font-weight: 800; font-size: 1.2rem; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.pd-brand-lg .pd-brand-name span { color: var(--emerald); }

.pd-address-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.pd-address-bar h2 {
  font-size: 0.95rem; font-weight: 700; color: var(--ink);
  letter-spacing: 0.02em; margin: 0;
}

@media (max-width: 480px) {
  .pd-header-card, .pd-address-bar { padding: 14px 16px; }
  .pd-header-card h1 { font-size: 1.15rem; }
}
/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --navy-deep:    #081222;
  --navy:         #0F2342;
  --navy-mid:     #1B3A63;
  --emerald:      #059669;
  --emerald-light:#10B981;
  --emerald-soft: #ECFDF5;
  --paper:        #F7F8FA;
  --surface:      #FFFFFF;
  --ink:          #0F172A;
  --ink-muted:    #64748B;
  --ink-faint:    #94A3B8;
  --line:         #E2E8F0;
  --line-strong:  #CBD5E1;
  --amber:        #F59E0B;
  --green:        #16A34A;
  --green-soft:   #F0FDF4;
  --green-border: #BBF7D0;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --radius:       12px;
  --radius-sm:    8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════
   NAV BAR (mini — just brand + back link)
═══════════════════════════════════════ */
.pd-topnav {
  background: var(--navy);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 20px;
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 12px rgba(8,18,34,0.35);
}
.pd-brand {
  display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0;
}
.pd-brand-icon {
  width: 30px; height: 30px; background: var(--emerald); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.78rem;
}
.pd-brand-name {
  font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: -0.01em; line-height: 1;
}
.pd-brand-name span { color: var(--emerald-light); }
.pd-nav-back {
  font-size: 12px; color: rgba(255,255,255,0.55); text-decoration: none;
  display: flex; align-items: center; gap: 5px;
  transition: color 0.15s;
}
.pd-nav-back:hover { color: #fff; }
.pd-nav-right { margin-left: auto; }
.btn-print {
  background: var(--emerald); color: #fff; border: none;
  padding: 7px 16px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s;
}
.btn-print:hover { background: var(--emerald-light); }

/* ═══════════════════════════════════════
   PAGE WRAP
═══════════════════════════════════════ */
.pd-wrap { max-width: 1060px; margin: 0 auto; padding: 24px 16px 72px; }

/* ═══════════════════════════════════════
   CARD BASE
═══════════════════════════════════════ */
.card-pd {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.card-pd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.card-pd-head h3 {
  font-size: 13px; font-weight: 700; color: var(--ink); margin: 0;
  display: flex; align-items: center; gap: 7px;
}
.card-pd-head h3 i { color: var(--emerald); }
.card-pd-body { padding: 16px 20px; }
.card-pd-body.p-0 { padding: 0; }

/* ═══════════════════════════════════════
   HERO (breadcrumb + title + address)
═══════════════════════════════════════ */
.pd-hero {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  border-radius: var(--radius);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.pd-hero::after {
  content: '';
  position: absolute; right: -50px; top: -50px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(16,185,129,0.12); pointer-events: none;
}
.breadcrumb { margin-bottom: 8px; }
.breadcrumb-item a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 11.5px; }
.breadcrumb-item a:hover { color: var(--emerald-light); }
.breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.35) !important; font-size: 11.5px; }
.pd-hero h1 { font-size: 1.35rem; font-weight: 700; color: #fff; margin: 0 0 4px; }
.pd-hero .address-line {
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.65);
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════
   ML CHECK ROWS
═══════════════════════════════════════ */
.ml-check-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; font-size: 13.5px; color: var(--ink-muted); border-bottom: 1px dashed var(--line); }
.ml-check-row:last-child { border-bottom: none; }
.ml-check-row strong { color: var(--ink); }
.icon-check {
  width: 20px; height: 20px; border-radius: 50%; background: var(--emerald);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.icon-check i { color: #fff; font-size: 10px; }

/* ═══════════════════════════════════════
   LISTING CARDS
═══════════════════════════════════════ */
.listing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.listing-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.listing-card-head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 10px; }
.listing-price { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.1; }
.listing-psf { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.listing-card-body { padding: 14px 16px; }

/* ═══════════════════════════════════════
   INFO ROWS (label : value)
═══════════════════════════════════════ */
.info-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.info-row:last-child { border-bottom: none; }
.info-row .lbl { color: var(--ink-faint); flex-shrink: 0; }
.info-row .val { font-weight: 600; color: var(--ink); text-align: right; }
.val.note  { font-weight: 400; font-size: 12px; color: var(--ink-muted); text-align: right; }

/* TOM box */
.tom-box { background: var(--emerald-soft); border-radius: var(--radius-sm); padding: 10px 14px; margin: 12px 0; }
.tom-label { font-size: 10.5px; font-weight: 700; color: var(--emerald); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 3px; }
.tom-value { font-size: 13px; font-weight: 600; color: var(--navy); }

/* Tier badge */
.tier-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700; }

/* CTA small */
.btn-sm-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
  color: var(--navy); background: var(--paper); text-decoration: none;
  transition: all 0.15s;
}
.btn-sm-cta:hover { background: var(--emerald); color: #fff; border-color: var(--emerald); }

/* ═══════════════════════════════════════
   PROBABLE SETTLEMENT
═══════════════════════════════════════ */
.settlement-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--emerald-light); flex-shrink: 0; }
.settlement-val { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--navy); }
.settlement-val.na { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--ink-faint); }

/* ═══════════════════════════════════════
   INFO GRID (6 cards)
═══════════════════════════════════════ */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.info-grid-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.info-grid-card h4 { font-size: 12.5px; font-weight: 700; color: var(--navy); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* ═══════════════════════════════════════
   DATA TABLES
═══════════════════════════════════════ */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead { background: var(--navy); }
.tbl thead th { padding: 10px 14px; color: #fff; font-weight: 600; text-align: left; vertical-align: middle; white-space: nowrap; font-size: 12.5px; }
.tbl thead th.tc { text-align: center; }
.tbl tbody tr { border-bottom: 1px solid var(--line); }
.tbl tbody tr:last-child { border-bottom: none; }
.tbl tbody tr:hover { background: var(--paper); }
.tbl tbody td { padding: 10px 14px; color: #374151; vertical-align: middle; }
.tbl tbody td.tc { text-align: center; }
.tbl-lbl { width: 180px; background: var(--paper); color: var(--ink-faint); font-weight: 500; font-size: 12.5px; }

/* Pills */
.pill     { display: inline-block; padding: 3px 11px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; }
.pill-em  { display: inline-block; padding: 3px 10px; border-radius: 20px; background: var(--emerald-soft); color: var(--emerald); border: 1px solid rgba(5,150,105,0.2); font-size: 11px; font-weight: 700; }
.pill-blue { display: inline-block; padding: 3px 10px; border-radius: 20px; background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; font-size: 11px; font-weight: 700; }

/* ═══════════════════════════════════════
   ML VALUATION TABLE (fixed layout, precision columns)
═══════════════════════════════════════ */
.ml-tbl { table-layout: fixed; }
.ml-tbl col.desc  { width: 57%; }
.ml-tbl col.price { width: 24%; }
.ml-tbl col.psf   { width: 19%; }
.ml-tbl td.tc, .ml-tbl th.tc { text-align: center; }
.ml-badge {
  display: inline-block;
  background: var(--navy); color: #fff;
  padding: 8px 20px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 1rem; font-weight: 700;
  white-space: nowrap; letter-spacing: -0.01em;
}
/* .highlight-row { background: var(--emerald-soft) !important; } */
/* .highlight-row td { color: var(--navy) !important; } */

/* ═══════════════════════════════════════
   MAP
═══════════════════════════════════════ */
.map-tab-group { display: flex; gap: 6px; margin-bottom: 14px; }
.map-tab {
  padding: 7px 16px; border: 1.5px solid var(--line); background: var(--paper);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-weight: 600;
  font-family: var(--font-body); color: var(--ink-muted); transition: all 0.15s;
}
.map-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.map-panel { display: none; }
.map-panel.active { display: block; }
#map-street, #map-cadastral { width: 100%; height: 420px; border-radius: var(--radius-sm); }

/* ═══════════════════════════════════════
   TIMELINE
═══════════════════════════════════════ */
.pd-timeline-wrap { position: relative; padding-left: 80px; margin-bottom: 16px; }
.pd-timeline-line {
  position: absolute; left: 28px; top: 0; bottom: 0; width: 3px; border-radius: 2px;
  background: linear-gradient(to bottom, var(--navy), var(--emerald), var(--ink-faint), var(--navy));
}
.pd-timeline-item { position: relative; margin-bottom: 18px; }
.pd-timeline-badge {
  position: absolute; left: -80px; top: 13px;
  min-width: 64px; text-align: center; padding: 5px 7px;
  border-radius: 20px; font-size: 10px; font-weight: 700; color: #fff;
  z-index: 2; box-shadow: 0 2px 8px rgba(15,23,42,0.18);
  font-family: var(--font-mono); white-space: nowrap;
}
.b-start  { background: var(--navy); }
.b-event  { background: var(--emerald); }
.b-today  { background: var(--navy); }

/* ═══════════════════════════════════════
   NEARBY — pagination bar
═══════════════════════════════════════ */
.pg-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--paper); font-size: 12px; }
.pg-info { color: var(--ink-faint); }
.pg-btns { display: flex; align-items: center; gap: 6px; }
.pg-btn { padding: 5px 12px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font-body); color: var(--ink-muted); transition: all 0.15s; }
.pg-btn:hover:not(:disabled) { background: var(--navy); color: #fff; border-color: var(--navy); }
.pg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pg-label { font-size: 12px; font-weight: 600; color: var(--navy); }

/* ═══════════════════════════════════════
   MAP MARKERS
═══════════════════════════════════════ */
.pd-metro-marker, .pd-school-marker {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--emerald); border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
}

/* ═══════════════════════════════════════
   EMPTY / ERROR STATES
═══════════════════════════════════════ */
.empty-state {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; background: var(--paper); border-radius: var(--radius-sm);
  border: 1px solid var(--line); font-size: 13px; color: var(--ink-muted);
}
.warn-state { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }

/* ═══════════════════════════════════════
   PRINT
═══════════════════════════════════════ */
@media print {
  body { background: #fff; }
  .pd-topnav, .btn-print, .map-tab-group, .pg-btn { display: none !important; }
  .card-pd { box-shadow: none !important; border: 1px solid #e5e7eb !important; break-inside: avoid; page-break-inside: avoid; }
  .map-panel { display: block !important; }
  #map-street, #map-cadastral { height: 260px !important; }
  .tbl td, .tbl th { font-size: 11px; }
  .school-row { display: table-row !important; }
  a[href]::after { content: ""; }
  .pd-wrap { padding: 0; }
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 767px) {
  .listing-grid, .info-grid { grid-template-columns: 1fr; }
  #map-street, #map-cadastral { height: 300px; }
  .pd-timeline-wrap { padding-left: 62px; }
  .pd-timeline-badge { left: -62px; min-width: 52px; font-size: 9px; }
  .ml-tbl col.desc  { width: 50%; }
  .ml-tbl col.price { width: 27%; }
  .ml-tbl col.psf   { width: 23%; }
  .tbl-lbl { width: 120px; }
}
@media (max-width: 480px) {
  .pd-wrap { padding: 14px 12px 48px; }
  .listing-price { font-size: 1.2rem; }
  .pd-topnav { padding: 0 14px; }
}
  /* tom */

.pd-brand {
    display: flex; align-items: center; gap: 9px;
    text-decoration: none; flex-shrink: 0;
}
.pd-brand-icon {
    width: 32px; height: 32px; background: var(--pd-accent-dark);
    border-radius: 7px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.82rem; flex-shrink: 0;
}
.pd-brand-name {
    font-weight: 700; font-size: 1.15rem; color: var(--pd-ink);
    letter-spacing: -0.01em; line-height: 1;
}
.pd-brand-name span { color: var(--pd-accent-dark); }
  :root {
    --pd-accent: #16a34a;
    --pd-accent-dark: #059669;
    --pd-ink: #111827;
    --pd-muted: #000000;
}
  :root { --pd-accent-dark: #059669; --pd-ink: #111827; --pd-muted: #000000; }
  body { font-family: 'DM Sans', sans-serif; background: #f0f2f5; color: #1a1a2e; }

  .pd-card { border: none; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

  .icon-circle {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pd-accent-dark);
    flex-shrink: 0;
  }

  .info-row { font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f3f4f6; }
  .info-row:last-of-type { border-bottom: none; }
  .info-row .lbl { color: var(--pd-muted); }
  .info-row .val { font-weight: 600; color: var(--pd-ink); }

  .tom-box { background: #eff6ff; border-radius: 8px; }
  .tom-box .tom-label { font-size: 11px; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: .5px; }
  .tom-box .tom-value { font-size: 13px; font-weight: 600; color: #1e40af; }

  .btn-view-listing { font-size: 0.8rem; font-weight: 600; }
  .btn-view-listing:hover { background: var(--pd-accent-dark); color: #fff; border-color: var(--pd-accent-dark); }

  .legend-line { display: inline-block; width: 22px; height: 4px; border-radius: 2px; flex-shrink: 0; }
  .chart-area { position: relative; height: 380px; }

  .tom-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    padding: 5px 12px 5px 10px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
    font-size: 12px;
    color: #6b7280;
  }
  .tom-chip:hover { border-color: #c7cbd1; }
  .tom-chip.active {
    background: #fff;
    border-color: var(--chip-color, #111827);
    color: #111827;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .tom-chip.inactive .legend-line { opacity: 0.3; }
  .tom-chip.inactive { opacity: 0.55; }

  .pd-hero-emoji { font-size: 64px; line-height: 1; }

  @media (max-width: 991px) {
    .pd-hero-emoji { font-size: 48px; }
  }
.text-muted,
.text-secondary {
  color: #000000 !important;
}