.dashboard-shell { width: min(100%, 70rem); }
.dashboard-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.dashboard-logo { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.dashboard-eyebrow { margin: 0; color: var(--color-primary-dark); font-weight: 600; }
.dashboard-header h1 { margin: .1rem 0 0; font-size: clamp(1.45rem, 6vw, 2rem); line-height: 1.3; }
.dashboard-grid { display: grid; gap: 1rem; }
.section-card h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.tenant-card .section-card__body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; }
.tenant-avatar { width: 5rem; height: 5rem; border: 2px solid var(--color-border); border-radius: 50%; object-fit: cover; }
.info-list { display: grid; gap: .65rem; margin: 0; }
.info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.info-row dt { color: var(--color-muted); }
.info-row dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.wifi-list { display: grid; gap: .85rem; }
.wifi-account { padding: .85rem; border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-background); }
.wifi-account h3 { margin: 0 0 .75rem; font-size: 1rem; }
.credential-row { display: grid; gap: .6rem; padding-block: .65rem; border-top: 1px solid var(--color-border); }
.credential-label, .credential-value { display: block; }
.credential-label { color: var(--color-muted); font-size: .85rem; }
.credential-value { font-weight: 600; overflow-wrap: anywhere; }
.credential-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.credential-action { min-height: 44px; padding: .5rem .7rem; font-size: .875rem; }
.invoice-total { padding-top: .65rem; border-top: 1px solid var(--color-border); font-weight: 700; }
.invoice-history { width: 100%; margin-top: 1rem; }
#page-loading, #page-error { min-height: 12rem; }
@media (min-width: 40rem) { .credential-row { grid-template-columns: 1fr auto; align-items: center; } }
@media (min-width: 52rem) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .wifi-card, .invoice-card { grid-column: span 2; }
  .wifi-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}