/* Dashboard ("Overview") — quiet-luxury layout.

   Scoped to .pd so nothing here leaks into the other ~70 pages sharing
   style.css / figbloom-theme.css. Colour comes ONLY from the app's own
   theme tokens (--fb-*, set by assets/js/theme.js from the signed-in user's
   Settings > Appearance choices), so a custom accent/page colour, dark mode
   and the compact-density option all carry over with no extra work:
     --fb-accent-safe / -hover / -rgb   brand green (interactive + data)
     --fb-highlight                     brand orange — sparing accent only
     --fb-page-bg / --fb-page-text      ivory / charcoal
     --fb-card-bg                       white surface
   Every other shade is derived from those with color-mix(), so it tracks
   them. Status colours (success / warning / danger) are the app's existing
   semantic ones (see figbloom-theme.css .text-success / .trend-down /
   .alert-danger) — red appears only on genuinely failed payments, never as
   decoration, and icons never sit on a coloured background.

   Spacing is a 4px scale: 4 8 12 16 20 24 32 40. */

.pd {
  --pd-surface: var(--fb-card-bg, #ffffff);
  --pd-text: var(--fb-page-text, #1f2933);
  --pd-muted: color-mix(in srgb, var(--pd-text) 70%, var(--pd-surface));
  --pd-faint: color-mix(in srgb, var(--pd-text) 48%, var(--pd-surface));
  --pd-border: color-mix(in srgb, var(--pd-text) 11%, var(--pd-surface));
  --pd-border-strong: color-mix(in srgb, var(--pd-text) 20%, var(--pd-surface));
  --pd-hover: color-mix(in srgb, var(--pd-text) 4%, var(--pd-surface));

  --pd-accent: var(--fb-accent-safe, #1b3611);
  --pd-accent-hover: var(--fb-accent-hover, #18300f);
  --pd-accent-rgb: var(--fb-accent-rgb, 27, 54, 17);
  --pd-accent-tint: rgba(var(--pd-accent-rgb), 0.07);
  --pd-accent-tint-strong: rgba(var(--pd-accent-rgb), 0.13);
  --pd-on-accent: #ffffff;
  --pd-highlight: var(--fb-highlight, #ff9400);

  --pd-success: #005a24;
  --pd-warning: #984e03;
  --pd-danger: #991b1b;
  --pd-success-bg: rgba(0, 90, 36, 0.09);
  --pd-warning-bg: rgba(255, 148, 0, 0.14);
  --pd-danger-bg: rgba(153, 27, 27, 0.08);

  --pd-radius: 14px;
  --pd-radius-sm: 10px;
  --pd-pad: 24px;
  --pd-gap: 20px;
  --pd-section-gap: 32px;
  --pd-shadow: 0 1px 2px rgba(16, 24, 20, 0.04);
  --pd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pd-fast: 160ms;

  max-width: 1440px;
  margin: 0 auto;
  color: var(--pd-text);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

[data-theme='dark'] .pd {
  /* The brand green is tuned for white surfaces; on the dark card it would
     all but vanish, so data/active tints lean toward white instead. */
  --pd-accent: color-mix(in srgb, var(--fb-accent-safe, #1b3611) 45%, #ffffff);
  --pd-accent-hover: color-mix(in srgb, var(--fb-accent-safe, #1b3611) 32%, #ffffff);
  --pd-accent-tint: rgba(255, 255, 255, 0.06);
  --pd-accent-tint-strong: rgba(255, 255, 255, 0.11);
  --pd-on-accent: #11170f;
  --pd-success: #6fcf97;
  --pd-warning: #ffb454;
  --pd-danger: #f1a4a4;
  --pd-success-bg: rgba(111, 207, 151, 0.12);
  --pd-warning-bg: rgba(255, 180, 84, 0.13);
  --pd-danger-bg: rgba(241, 164, 164, 0.12);
  --pd-shadow: none;
}

html[data-density='compact'] .pd {
  --pd-pad: 18px;
  --pd-gap: 14px;
  --pd-section-gap: 24px;
}

/* ---- Resets against the vendor stylesheet ------------------------------ */

.pd h1, .pd h2, .pd h3, .pd h4, .pd p, .pd ul, .pd ol, .pd dl, .pd dd, .pd figure {
  margin: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
}
.pd ul, .pd ol { list-style: none; }
.pd a { text-decoration: none; }
.pd button { font-family: inherit; }
.pd .pd-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Page padding: 36px desktop / 24px tablet / 16px mobile. style.css gives
   .content-wrapper an asymmetric 56px left gutter meant for the template's
   own look. */
body[data-page='dashboard'] .content-wrapper {
  padding: 32px 36px 48px;
}
@media (max-width: 1199px) {
  body[data-page='dashboard'] .content-wrapper { padding: 24px 24px 40px; }
}
@media (max-width: 767px) {
  body[data-page='dashboard'] .content-wrapper { padding: 16px 16px 32px; }
}

/* ---- Top bar on this page: breadcrumb replaces the greeting ------------ */
/* The greeting moves into the page itself (below) — dashboard.html's <body>
   drops `with-welcome-text`, which is what makes the navbar print one — so
   the header carries the breadcrumb instead of a second "Good morning". */
.navbar-breadcrumb { display: none; }
body[data-page='dashboard'] .navbar-breadcrumb:not([hidden]) {
  display: block;
  align-self: center;
}
.navbar-breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: color-mix(in srgb, var(--fb-page-text, #1f2933) 62%, var(--fb-card-bg, #fff));
}
.navbar-breadcrumb li + li::before {
  content: '/';
  margin-right: 8px;
  opacity: 0.5;
}
.navbar-breadcrumb li[aria-current='page'] {
  color: var(--fb-page-text, #1f2933);
  font-weight: 600;
}

/* The other pages that sit on this system get the same crumb ("Workspace / Page", filled by layout.js's
   renderPageBreadcrumb) in place of the template's greeting and its "Your performance summary this
   month" line. The greeting is hidden here rather than removed, so pages that have not been converted
   yet are untouched. */
body.lp-page .navbar .welcome-text,
body.lp-page .navbar .welcome-sub-text,
body[data-page='properties-list'] .navbar .welcome-text,
body[data-page='properties-list'] .navbar .welcome-sub-text { display: none !important; }
body.lp-page .navbar-breadcrumb:not([hidden]),
body[data-page='properties-list'] .navbar-breadcrumb:not([hidden]) {
  display: block;
  align-self: center;
}

/* ---- Entry motion: short fade + 8px rise, once -------------------------- */

@keyframes pd-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.pd-reveal {
  animation: pd-rise 240ms var(--pd-ease) both;
}
.pd-reveal:nth-child(2) { animation-delay: 40ms; }
.pd-reveal:nth-child(3) { animation-delay: 80ms; }
.pd-reveal:nth-child(4) { animation-delay: 120ms; }
.pd-reveal:nth-child(5) { animation-delay: 160ms; }
.pd-reveal:nth-child(6) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  .pd *, .pd *::before, .pd *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
html[data-a11y-motion='reduce'] .pd *,
html[data-a11y-motion='reduce'] .pd *::before,
html[data-a11y-motion='reduce'] .pd *::after {
  animation: none !important;
  transition: none !important;
}

/* ---- Welcome ------------------------------------------------------------ */

/* Above the sections that follow it: their entry animation makes each a stacking
   context painted later, which would otherwise cover the Quick actions menu. */
.pd-welcome {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: var(--pd-section-gap);
}
.pd-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pd-muted);
  margin-bottom: 8px !important;
}
.pd-title {
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: var(--pd-text) !important;
}
.pd-subtitle {
  margin-top: 8px !important;
  font-size: 15px;
  color: var(--pd-muted);
}
.pd-scope {
  margin-top: 12px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--pd-muted);
}
.pd-scope[hidden] { display: none; }
.pd-scope::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pd-highlight);
}
.pd-welcome-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Buttons / form controls ------------------------------------------- */

.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--pd-fast) ease, border-color var(--pd-fast) ease, color var(--pd-fast) ease, box-shadow var(--pd-fast) ease;
}
.pd-btn-primary {
  background: var(--pd-accent);
  color: var(--pd-on-accent) !important;
}
.pd-btn-primary:hover { background: var(--pd-accent-hover); }
.pd-btn-secondary {
  background: var(--pd-surface);
  border-color: var(--pd-border-strong);
  color: var(--pd-text) !important;
}
.pd-btn-secondary:hover { background: var(--pd-hover); }
.pd-btn.dropdown-toggle::after { margin-left: 2px; }
.pd-btn:focus-visible,
.pd-seg:focus-visible,
.pd-chip:focus-visible,
.pd-link:focus-visible,
.pd-select:focus-visible,
.pd-icon-btn:focus-visible,
.pd-th-btn:focus-visible,
.pd-pager button:focus-visible,
.pd-action:focus-visible,
.pd-row-link:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 2px;
}

.pd-select {
  min-height: 40px;
  padding: 0 36px 0 14px;
  border-radius: 10px;
  border: 1px solid var(--pd-border-strong);
  background-color: var(--pd-surface);
  color: var(--pd-text);
  font-size: 13.5px;
  font-weight: 500;
  max-width: 220px;
}
/* The navbar's own property dropdown covers >=992px; this in-page select is
   the only switcher on tablet/phone, where that dropdown is hidden. */
.pd-select-wrap { display: none; }
@media (max-width: 991px) {
  .pd-select-wrap { display: block; }
}

.pd-menu {
  min-width: 232px;
  padding: 8px !important;
  border: 1px solid var(--pd-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(16, 24, 20, 0.12) !important;
}
.pd-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--pd-text);
}
.pd-menu .dropdown-item i { width: 16px; text-align: center; color: var(--pd-muted); }
.pd-menu .dropdown-item:hover,
.pd-menu .dropdown-item:focus { background: var(--pd-hover); color: var(--pd-text); }
.pd-menu .dropdown-divider { margin: 6px 4px; border-color: var(--pd-border); }

/* ---- Sections / panels -------------------------------------------------- */

.pd-section { margin-bottom: var(--pd-section-gap); }

.pd-grid {
  display: grid;
  gap: var(--pd-gap);
  margin-bottom: var(--pd-section-gap);
  align-items: stretch;
}
.pd-grid > * { min-width: 0; }
@media (min-width: 1200px) {
  .pd-grid-analytics { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  .pd-grid-attention { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .pd-grid-secondary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* The todo list and the one-sentence insight are very different heights —
   stretching the short one to match would just be an empty card. */
.pd-grid-secondary { align-items: start; }

.pd-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow);
  padding: var(--pd-pad);
  min-width: 0;
}
.pd-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 20px;
}
.pd-panel-head > :first-child { flex: 1 1 240px; min-width: 0; }
.pd-panel-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.3 !important;
  color: var(--pd-text) !important;
}
.pd-panel-sub {
  margin-top: 4px !important;
  font-size: 13px;
  color: var(--pd-muted);
}
.pd-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pd-accent) !important;
  white-space: nowrap;
  border-radius: 6px;
}
.pd-link:hover { text-decoration: underline !important; }
.pd-link i { margin-left: 4px; font-size: 11px; }

/* Pinned to the bottom of an equal-height panel: where to go for the full list. */
.pd-panel-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--pd-border);
}
.pd-attention, .pd-timeline { margin-bottom: 20px !important; }

/* Each panel's own loading / empty / error state */
.pd-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--pd-muted);
  font-size: 13.5px;
}
.pd-state strong {
  color: var(--pd-text);
  font-size: 14.5px;
  font-weight: 600;
}
.pd-state i { font-size: 22px; color: var(--pd-faint); }
.pd-state-ok i { color: var(--pd-success); }
.pd-state[hidden] { display: none; }
.pd-retry {
  margin-top: 4px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--pd-border-strong);
  background: var(--pd-surface);
  color: var(--pd-text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.pd-retry:hover { background: var(--pd-hover); }

/* Skeletons */
@keyframes pd-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.pd-skel {
  display: inline-block;
  vertical-align: middle;
  min-height: 1em;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--pd-hover) 25%, color-mix(in srgb, var(--pd-text) 9%, var(--pd-surface)) 50%, var(--pd-hover) 75%);
  background-size: 200% 100%;
  animation: pd-shimmer 1.4s linear infinite;
}
.pd-skel-lg { width: 132px; height: 30px; }
.pd-skel-md { width: 88px; height: 14px; }
.pd-skel-block { display: block; width: 100%; height: 56px; margin-bottom: 12px; }

/* ---- KPI cards ---------------------------------------------------------- */

.pd-kpis {
  display: grid;
  gap: var(--pd-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1199px) { .pd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .pd-kpis { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

.pd-kpi {
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: 20px 22px;
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow);
  transition: border-color var(--pd-fast) ease, transform var(--pd-fast) ease;
}
.pd-kpi:hover {
  border-color: var(--pd-border-strong);
  transform: translateY(-1px);
}
.pd-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pd-kpi-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pd-muted) !important;
  line-height: 1.3 !important;
}
.pd-kpi-label i {
  width: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--pd-accent);
}
.pd-kpi-tag {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pd-faint);
  white-space: nowrap;
}
/* The figure scales with ITS CARD (container query units), not the viewport:
   a 4-up grid beside the sidebar at 1280px and a full-width phone card need
   different sizes. 28-32px wherever it fits; 13+ character amounts
   (KES 2,450,000 and up) step down so they stay on one line. */
.pd-kpi { container-type: inline-size; }
.pd-kpi-value {
  margin-top: 14px !important;
  font-size: clamp(24px, 15cqw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--pd-text);
  white-space: nowrap;
}
.pd-kpi-value[data-long] { font-size: clamp(20px, 11.5cqw, 28px); }
.pd-kpi-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  min-height: 36px;
  font-size: 12.5px;
  color: var(--pd-muted);
}
.pd-kpi-note { min-width: 0; }
.pd-spark {
  margin-left: auto;
  flex: 0 0 auto;
  overflow: visible;
}
.pd-spark-line { fill: none; stroke: var(--pd-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pd-spark-area { fill: var(--pd-accent-tint); stroke: none; }
.pd-spark-dot { fill: var(--pd-accent); }

.pd-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pd-trend.d-none { display: none !important; }
.pd-trend-up { color: var(--pd-success); }
.pd-trend-down { color: var(--pd-warning); }
.pd-trend-flat { color: var(--pd-muted); }
.pd-trend i { font-size: 10px; }

/* Occupancy meter inside its KPI card */
.pd-meter {
  height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: var(--pd-border);
  overflow: hidden;
}
.pd-meter > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--pd-accent);
  transition: width 480ms var(--pd-ease);
}

@media (max-width: 575px) {
  .pd-kpi { min-height: 0; padding: 16px 18px; }
  .pd-kpi-value { margin-top: 8px !important; }
}

/* ---- Rent collection panel --------------------------------------------- */

.pd-segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--pd-border);
  border-radius: 10px;
  background: var(--pd-hover);
  flex: 0 0 auto;
}
.pd-seg {
  min-width: 44px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--pd-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--pd-fast) ease, color var(--pd-fast) ease;
}
.pd-seg:hover { color: var(--pd-text); }
.pd-seg[aria-pressed='true'] {
  background: var(--pd-surface);
  color: var(--pd-text);
  box-shadow: 0 1px 2px rgba(16, 24, 20, 0.1);
}

.pd-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px !important;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pd-border);
}
@media (max-width: 767px) { .pd-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd-summary dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pd-muted);
}
.pd-summary dd {
  margin-top: 4px !important;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pd-swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.pd-swatch-invoiced { background: var(--pd-highlight); }
.pd-swatch-collected { background: var(--pd-success); }
.pd-swatch-outstanding { background: var(--pd-danger); border-radius: 50%; }
.pd-swatch-overdue { background: transparent; border: 2px solid var(--pd-danger); border-radius: 50%; }

.pd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 16px !important;
  font-size: 12px;
  color: var(--pd-muted);
}
.pd-legend li { display: inline-flex; align-items: center; gap: 8px; }
.pd-more {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--pd-muted);
}
.pd-attention li.pd-more { display: block; padding: 12px 0 0; border-top: 0; }

/* Fixed height, not flex-grow: Chart.js sizes itself from its parent, and a
   parent that grows with its content can feed back into a resize loop. */
.pd-chart-box {
  position: relative;
  height: 300px;
}
@media (max-width: 575px) { .pd-chart-box { height: 240px; } }
.pd-chart-box canvas { width: 100% !important; }
.pd-chart-box .pd-state {
  position: absolute;
  inset: 0;
  background: var(--pd-surface);
}
.pd-basis {
  margin-top: 16px !important;
  font-size: 12px;
  color: var(--pd-faint);
}

/* ---- Occupancy panel ---------------------------------------------------- */

.pd-donut {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  margin: 0 auto 20px;
}
.pd-donut canvas { width: 100% !important; height: 100% !important; }
.pd-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pd-donut-center strong {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pd-donut-center span { font-size: 12.5px; color: var(--pd-muted); }
.pd-occ-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pd-border);
}
.pd-occ-legend li { font-size: 12.5px; color: var(--pd-muted); }
.pd-occ-legend li strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 500;
  color: var(--pd-text);
  font-variant-numeric: tabular-nums;
}
.pd-occ-legend .pd-swatch { display: inline-block; margin-right: 6px; vertical-align: 0; }
.pd-swatch-occupied { background: var(--pd-accent); }
.pd-swatch-vacant { background: color-mix(in srgb, var(--pd-text) 18%, var(--pd-surface)); }

.pd-occ-extra { margin-top: 20px; }
.pd-occ-extra[hidden] { display: none; }
.pd-subhead {
  margin-bottom: 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pd-muted) !important;
}
.pd-occ-note { margin-top: 14px !important; font-size: 12.5px; color: var(--pd-muted); }
.pd-occ-note:empty { display: none; }
.pd-vacant { display: grid; }
.pd-vacant[hidden], .pd-bars[hidden] { display: none; }
.pd-vacant li { border-top: 1px solid var(--pd-border); }
.pd-vacant li:first-child { border-top: 0; }
.pd-vacant .pd-row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 13.5px;
}
.pd-vacant .pd-row-link:hover .pd-vacant-name { text-decoration: underline; }
.pd-vacant-name { font-weight: 600; }
.pd-vacant-meta { color: var(--pd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-vacant li.pd-more { padding: 10px 0 0; margin: 0; }
.pd-bars { display: grid; gap: 14px; }
.pd-bars li { display: grid; gap: 6px; }
.pd-bars-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
}
.pd-bars-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pd-bars-val { color: var(--pd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Needs attention ---------------------------------------------------- */

.pd-attention { display: grid; }
.pd-attention li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--pd-border);
}
.pd-attention li:first-child { border-top: 0; padding-top: 0; }
.pd-attention li:last-child { padding-bottom: 0; }
.pd-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pd-border-strong);
  align-self: start;
  margin-top: 7px;
}
.pd-sev-urgent .pd-dot { background: var(--pd-highlight); box-shadow: 0 0 0 3px rgba(255, 148, 0, 0.2); }
.pd-sev-high .pd-dot { background: var(--pd-highlight); }
.pd-sev-medium .pd-dot { background: var(--pd-faint); }
.pd-attention-title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.pd-attention-meta { margin-top: 2px !important; font-size: 12.5px; color: var(--pd-muted); }
.pd-sev-tag {
  display: inline-block;
  margin-right: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pd-faint);
}
.pd-sev-urgent .pd-sev-tag, .pd-sev-high .pd-sev-tag { color: var(--pd-warning); }
.pd-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--pd-border-strong);
  border-radius: 8px;
  color: var(--pd-text) !important;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--pd-fast) ease, border-color var(--pd-fast) ease;
}
.pd-action:hover { background: var(--pd-hover); border-color: var(--pd-accent); }
.pd-attention-more { margin-top: 12px !important; font-size: 12.5px; color: var(--pd-muted); }
@media (max-width: 575px) {
  .pd-attention li { grid-template-columns: 8px minmax(0, 1fr); }
  .pd-attention li .pd-action { grid-column: 2; justify-self: start; }
}

/* ---- Activity timeline -------------------------------------------------- */

.pd-timeline { position: relative; display: grid; gap: 0; }
.pd-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 18px;
}
.pd-timeline li:last-child { padding-bottom: 0; }
.pd-timeline li::before {
  content: '';
  position: absolute;
  left: 9.5px; top: 22px; bottom: 0;
  width: 1px;
  background: var(--pd-border);
}
.pd-timeline li:last-child::before { display: none; }
.pd-timeline li > i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 15px;
  color: var(--pd-accent);
  background: var(--pd-surface);
}
.pd-tl-warn > i { color: var(--pd-warning) !important; }
.pd-tl-danger > i { color: var(--pd-danger) !important; }
.pd-tl-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.pd-tl-detail { font-size: 12.5px; color: var(--pd-muted); }
.pd-tl-time { font-size: 12px; color: var(--pd-faint); margin-top: 2px !important; }
.pd-row-link { color: inherit !important; border-radius: 6px; }
.pd-row-link:hover .pd-tl-title { text-decoration: underline; }

/* ---- Transactions table ------------------------------------------------- */

.pd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pd-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 360px;
}
.pd-search i {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--pd-faint);
  pointer-events: none;
}
.pd-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 14px 0 34px;
  border: 1px solid var(--pd-border-strong);
  border-radius: 10px;
  background: var(--pd-surface);
  color: var(--pd-text);
  font-size: 13.5px;
}
.pd-search input::placeholder { color: var(--pd-faint); }
.pd-search input:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 1px; }

.pd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-chip {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--pd-border-strong);
  border-radius: 999px;
  background: var(--pd-surface);
  color: var(--pd-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--pd-fast) ease, color var(--pd-fast) ease, border-color var(--pd-fast) ease;
}
.pd-chip:hover { color: var(--pd-text); border-color: var(--pd-accent); }
.pd-chip[aria-pressed='true'] {
  background: var(--pd-accent);
  border-color: var(--pd-accent);
  color: var(--pd-on-accent);
}

.pd-table-wrap { overflow-x: auto; margin: 0 calc(var(--pd-pad) * -1); padding: 0 var(--pd-pad); }
.pd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pd-table th {
  padding: 0 12px 10px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pd-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--pd-border-strong);
}
.pd-table th.pd-num, .pd-table td.pd-num { text-align: right; }
.pd-table th:first-child, .pd-table td:first-child { padding-left: 0; }
.pd-table th:last-child, .pd-table td:last-child { padding-right: 0; }
.pd-table td {
  height: 56px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--pd-border);
  vertical-align: middle;
}
.pd-table tbody tr { transition: background-color var(--pd-fast) ease; }
.pd-table tbody tr:hover { background: var(--pd-hover); }
.pd-table tbody tr:last-child td { border-bottom: 0; }
.pd-th-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  border-radius: 4px;
}
.pd-th-btn:hover { color: var(--pd-text); }
.pd-th-btn i { font-size: 10px; opacity: 0.5; }
th[aria-sort='ascending'] .pd-th-btn i,
th[aria-sort='descending'] .pd-th-btn i { opacity: 1; color: var(--pd-accent); }
.pd-cell-main { font-weight: 600; }
.pd-cell-sub { font-size: 12.5px; color: var(--pd-muted); }
.pd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: 0.02em; }
.pd-amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-amount-muted { color: var(--pd-muted); font-weight: 500; }

.pd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.pd-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pd-badge-success { color: var(--pd-success); background: var(--pd-success-bg); }
.pd-badge-warning { color: var(--pd-warning); background: var(--pd-warning-bg); }
.pd-badge-danger { color: var(--pd-danger); background: var(--pd-danger-bg); }
.pd-badge-neutral { color: var(--pd-muted); background: var(--pd-hover); }

.pd-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--pd-muted);
}
.pd-pager[hidden] { display: none; }
.pd-pager button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--pd-border-strong);
  border-radius: 8px;
  background: var(--pd-surface);
  color: var(--pd-text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.pd-pager button:hover:not(:disabled) { background: var(--pd-hover); }
.pd-pager button:disabled { opacity: 0.45; cursor: not-allowed; }
.pd-pager-btns { display: flex; gap: 8px; }

/* Tablet: Method is the least useful column — drop it (the phone cards below keep
   it) and let the table scroll sideways rather than wrap dates and amounts. */
.pd-table { min-width: 640px; }
.pd-table td[data-col='date'], .pd-table td[data-col='amount'], .pd-table td[data-col='reference'],
.pd-table td[data-col='payer'] .pd-cell-sub { white-space: nowrap; }
@media (max-width: 1099px) {
  .pd-table th:nth-child(4), .pd-table td:nth-child(4) { display: none; }
}

/* Phone: each transaction becomes a small card instead of a squeezed row. */
@media (max-width: 719px) {
  .pd-table { min-width: 0; }
  .pd-table-wrap { overflow: visible; }
  .pd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .pd-table, .pd-table tbody { display: block; }
  .pd-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pd-border);
  }
  .pd-table tbody tr:last-child { border-bottom: 0; }
  .pd-table td { display: block; height: auto; padding: 0 !important; border: 0; text-align: left !important; }
  .pd-table td[data-col='payer'] { grid-column: 1; }
  .pd-table td[data-col='amount'] { grid-column: 2; grid-row: 1; text-align: right !important; }
  .pd-table td[data-col='property'] { grid-column: 1; }
  .pd-table td[data-col='status'] { grid-column: 2; grid-row: 2; justify-self: end; }
  .pd-table td[data-col='date'], .pd-table td[data-col='reference'], .pd-table td[data-col='method'] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--pd-muted);
  }
  .pd-table td[data-col='date']::before, .pd-table td[data-col='reference']::before, .pd-table td[data-col='method']::before {
    content: attr(data-label);
    font-weight: 600;
  }
  .pd-table td[data-col='reference']:empty, .pd-table td[data-col='reference'][data-empty] { display: none; }
}

/* ---- Tasks & AI insight ------------------------------------------------- */

.pd-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.pd-add input[type='text'] { flex: 1 1 180px; }
.pd-add .pd-date { flex: 0 0 auto; width: 150px; }
.pd-add input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--pd-border-strong);
  border-radius: 10px;
  background: var(--pd-surface);
  color: var(--pd-text);
  font-size: 13.5px;
}
.pd-add input:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 1px; }
.pd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--pd-border-strong);
  border-radius: 10px;
  background: var(--pd-surface);
  color: var(--pd-text);
  cursor: pointer;
  transition: background-color var(--pd-fast) ease, border-color var(--pd-fast) ease;
}
.pd-icon-btn:hover { background: var(--pd-hover); border-color: var(--pd-accent); }
.pd-icon-btn:disabled { opacity: 0.5; cursor: progress; }
.pd-tasks { display: grid; max-height: 320px; overflow-y: auto; }
/* A task row takes its colour from its status: To do is neutral, In progress
   orange, Done green. A missed deadline turns the accent bar and the date red
   whatever the status, so overdue work stands out in every column. */
.pd-task {
  --task-accent: var(--pd-faint);
  --task-fg: var(--pd-muted);
  --task-bg: var(--pd-hover);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px 0 12px 14px;
  border-top: 1px solid var(--pd-border);
  box-shadow: inset 3px 0 0 var(--task-accent);
}
.pd-task:first-child { border-top: 0; }
.pd-task[data-status='in_progress'] {
  --task-accent: var(--pd-highlight);
  --task-fg: var(--pd-warning);
  --task-bg: var(--pd-warning-bg);
}
.pd-task[data-status='done'] {
  --task-accent: var(--pd-success);
  --task-fg: var(--pd-success);
  --task-bg: var(--pd-success-bg);
}
.pd-task.is-overdue { --task-accent: var(--pd-danger); }
.pd-task input[type='checkbox'] {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--pd-accent);
  cursor: pointer;
}
.pd-task-title { font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.pd-task.is-done .pd-task-title { color: var(--pd-faint); text-decoration: line-through; }
.pd-task-meta { margin-top: 8px !important; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--pd-muted); }
.pd-task-state { position: relative; display: inline-flex; }
.pd-task-state select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 28px;
  padding: 0 26px 0 10px;
  border: 1px solid color-mix(in srgb, var(--task-fg) 30%, transparent);
  border-radius: 999px;
  background: var(--task-bg);
  color: var(--task-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.pd-task-state select:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }
.pd-task-state option { background: var(--pd-surface); color: var(--pd-text); }
/* The chevron is drawn, not a data: image — the CSP's img-src doesn't allow data: URIs. */
.pd-task-state::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--task-fg);
  border-bottom: 1.5px solid var(--task-fg);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.pd-task-due {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--pd-border);
  border-radius: 8px;
  background: transparent;
  color: var(--pd-muted);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pd-task-due.is-empty { color: var(--pd-faint); }
.pd-task-due:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }
.pd-task.is-overdue .pd-task-due {
  color: var(--pd-danger);
  border-color: color-mix(in srgb, var(--pd-danger) 35%, transparent);
}
.pd-task-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--pd-faint);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.pd-task-remove:hover { color: var(--pd-text); background: var(--pd-hover); }
.pd-insight-text { font-size: 15px; line-height: 1.65; color: var(--pd-text); }
.pd-inline-error {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--pd-danger);
  background: var(--pd-danger-bg);
}
.pd-inline-error[hidden] { display: none; }

/* Prevents the 4-up/2-up grids from flashing a taller layout while loading */
.pd-panel[aria-busy='true'] { min-height: 160px; }

/* ---- Touch and phone ------------------------------------------------------ */

@media (max-width: 991px), (pointer: coarse) {
  .pd-link { min-height: 44px; }
  .pd-btn, .pd-select, .pd-search input, .pd-add input, .pd-icon-btn { min-height: 44px; }
  .pd-icon-btn { width: 44px; }
  .pd-chip, .pd-seg, .pd-pager button, .pd-action { min-height: 40px; }
  .pd-task { grid-template-columns: 24px minmax(0, 1fr) 44px; gap: 8px; }
  .pd-task-state select, .pd-task-due { min-height: 36px; }
  .pd-task input[type='checkbox'] { width: 22px; height: 22px; margin-top: 0; }
  .pd-task-remove { min-width: 44px; min-height: 44px; font-size: 22px; }
}
@media (max-width: 575px) {
  /* The workspace crumb is the first thing to go: "Overview" alone fits beside the icons. */
  .navbar-breadcrumb li:not([aria-current='page']) { display: none; }
  .navbar-breadcrumb li + li::before { display: none; }
  /* Title on its own line; deadline and the add button share the next one. */
  .pd-add input[type='text'] { flex-basis: 100%; }
  .pd-welcome-actions { width: 100%; }
  .pd-select-wrap { flex: 1 1 100%; }
  .pd-select { width: 100%; max-width: none; }
  #add-property-btn { flex: 1 1 auto; }
}
@media (min-width: 992px) {
  /* The header's left margin puts the crumb 20px inside the content's left edge. */
  body[data-page='dashboard'] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.navbar-breadcrumb,
  body.lp-page .navbar .navbar-menu-wrapper .navbar-nav .nav-item.navbar-breadcrumb,
  body[data-page='properties-list'] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.navbar-breadcrumb { margin-left: -20px; }
}

/* ---- Print (Quick actions > Print) --------------------------------------- */
/* Just the figures: no chrome, no controls, panels kept whole across pages. */
@media print {
  body[data-page='dashboard'] .sidebar,
  body[data-page='dashboard'] .navbar,
  body[data-page='dashboard'] .footer,
  body[data-page='dashboard'] #demo-banner,
  body[data-page='dashboard'] #trial-banner,
  body[data-page='dashboard'] #chat-widget-toggle,
  .pd-welcome-actions, .pd-scope, .pd-segmented, .pd-toolbar, .pd-pager, .pd-panel-foot,
  .pd-add, .pd-task-remove, .pd-icon-btn, .pd-retry {
    display: none !important;
  }
  body[data-page='dashboard'] .main-panel { margin-left: 0 !important; width: 100% !important; }
  body[data-page='dashboard'] .page-body-wrapper { padding-top: 0 !important; }
  body[data-page='dashboard'] .content-wrapper { padding: 0 !important; }
  .pd { max-width: none; }
  .pd-panel, .pd-kpi { break-inside: avoid; box-shadow: none; }
  .pd-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-grid-analytics, .pd-grid-attention, .pd-grid-secondary { grid-template-columns: minmax(0, 1fr); }
  .pd-table-wrap { overflow: visible; }
  .pd-reveal, .pd-skel { animation: none !important; }
}