/* Self-contained marketing example of the tenant dashboard. All dimensions scale
   against the preview's inline-size container; no admin styles or live data. */
.dashboard-feature-preview {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  container-type: inline-size;
  border: 1px solid #d9cebf;
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(40, 32, 22, 0.12);
}
.dashboard-feature-note {
  font-size: 0.875rem;
  color: var(--brand-muted, #6f6254);
}
.dashboard-mock,
.dashboard-mock * {
  box-sizing: border-box;
}
.dashboard-mock {
  width: 100%;
  background: #f8f4ee;
  color: #38352e;
  font: 2cqi/1.45 var(--font-body, 'DM Sans', sans-serif);
  text-align: left;
}
.dashboard-mock__topbar {
  display: flex;
  align-items: center;
  gap: 1.5cqi;
  padding: 1.8cqi 3cqi;
  background: #2a3d2a;
  color: #f0ead8;
}
.dashboard-mock__topbar img {
  width: 5cqi;
  height: 5cqi;
  border-radius: 1cqi;
}
.dashboard-mock__topbar strong {
  font: 500 2.6cqi var(--font-display, 'Fraunces', Georgia, serif);
}
.dashboard-mock__topbar .dashboard-mock__avatar {
  flex: none;
  width: 5cqi;
  height: 5cqi;
  margin-left: auto;
  border-radius: 50%;
  object-fit: cover;
}
.dashboard-mock__body { padding: 3cqi; }
.dashboard-mock__greeting { display: grid; gap: 0.5cqi; margin-bottom: 3cqi; }
.dashboard-mock__greeting > strong { font: 500 4.4cqi var(--font-display, 'Fraunces', Georgia, serif); }
.dashboard-mock__greeting > span:last-child,
.dashboard-mock small { color: #746b5d; }
.dashboard-mock__eyebrow { font-size: 1.65cqi; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.dashboard-mock__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2cqi; margin-bottom: 2.5cqi; }
.dashboard-mock__tile { display: grid; align-content: space-between; gap: 1cqi; padding: 1.6cqi; border: 1px solid #dfd7c9; border-radius: 1.2cqi; background: #fcfaf5; }
.dashboard-mock__tile > span { font-size: 1.65cqi; }
.dashboard-mock__tile > strong { font: 500 5cqi var(--font-display, 'Fraunces', Georgia, serif); }
.dashboard-mock__tile--alert { background: #f8eee8; color: #91422f; border-color: #e6cdc0; }
.dashboard-mock__columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2cqi; }
.dashboard-mock__main,
.dashboard-mock__rail { display: grid; align-content: start; gap: 2cqi; min-width: 0; }
.dashboard-mock__card { min-width: 0; padding: 2cqi; border: 1px solid #e2d9ca; border-radius: 1.4cqi; background: #fcfaf6; }
.dashboard-mock__heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqi; margin-bottom: 1.8cqi; }
.dashboard-mock__heading > strong { font-size: 2.2cqi; }
.dashboard-mock__heading > span { font-size: 1.5cqi; color: #746b5d; white-space: nowrap; }
.dashboard-mock__bar { display: flex; height: 1.7cqi; overflow: hidden; border-radius: 1cqi; }
.dashboard-mock__bar i:nth-child(1) { width: 50%; background: #72906a; }
.dashboard-mock__bar i:nth-child(2) { width: 29.1667%; background: #d0ae62; }
.dashboard-mock__bar i:nth-child(3) { width: 8.3333%; background: #ba7554; }
.dashboard-mock__bar i:nth-child(4) { width: 12.5%; background: #b9b3a8; }
.dashboard-mock__legend { display: flex; justify-content: space-between; gap: 1cqi; margin: 1.2cqi 0 2.4cqi; font-size: 1.6cqi; color: #746b5d; }
.dashboard-mock__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5cqi; padding: 1.6cqi 0; border-top: 1px solid #eae2d5; }
.dashboard-mock__row b,
.dashboard-mock__card p b { font-weight: 500; }
.dashboard-mock small { display: block; margin-top: 0.4cqi; font-size: 1.6cqi; }
.dashboard-mock__row em,
.dashboard-mock__link { color: #496344; font-size: 1.6cqi; font-style: normal; }
.dashboard-mock__row em { flex: none; }
.dashboard-mock__chip { flex: none; padding: 0.5cqi 1cqi; border-radius: 3cqi; background: #efe4ca; color: #765b2d; font-size: 1.5cqi; }
.dashboard-mock__chip--red { background: #f4e1d8; color: #91422f; }
.dashboard-mock__task { display: flex; align-items: center; gap: 1.2cqi; }
.dashboard-mock__task i { flex: none; width: 2.5cqi; height: 2.5cqi; border: 1px solid #baad98; border-radius: 50%; }
.dashboard-mock__card p { margin: 0 0 1.5cqi; }
.dashboard-mock__total { display: flex; justify-content: space-between; gap: 1cqi; padding: 1cqi 0; }