/* Demo-only layout details; Namoja colors, type and components come from namoja-ui.css. */
.app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.demo-sidebar__foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding: var(--s-4) var(--s-3) 0;
  border-top: 1px solid var(--line);
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}
.demo-sidebar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.demo-main { display: flex; flex-direction: column; gap: var(--s-6); }
.demo-main--people { max-width: none; }
.demo-main .page-head { margin: 0; }
.demo-theme { white-space: nowrap; text-decoration: none; }
.demo-workspace-tabs { width: 100%; margin: 0; }
.demo-workspace-panel { width: 100%; }
.demo-workspace-panel .association-setup-card { min-height: 270px; padding: var(--s-6); }
.demo-workspace-panel .association-setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.demo-workspace-panel .association-setup-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); background: var(--surface-2); }
.demo-workspace-panel .association-emblem { display: grid; place-items: center; flex: none; width: var(--s-12); height: var(--s-12); border: 1px solid var(--line-strong); border-radius: 50%; background: var(--button-surface); color: var(--mint); }
.demo-workspace-panel .association-emblem svg { display: block; width: var(--s-6); height: var(--s-6); flex: none; }
.demo-workspace-panel .association-setup-card > div { min-height: 72px; }
.demo-workspace-panel .association-setup-card > .btn { margin-top: auto; }
.demo-workspace-panel .association-setup-card > .association-next { margin: calc(-1 * var(--s-2)) 0 0; }
.demo-workspace-panel .association-setup-status { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-3); color: var(--text-muted); font-size: var(--fs-sm); }
.demo-workspace-panel .association-setup-status svg,
.demo-workspace-panel .association-info-item > svg,
.demo-workspace-panel .association-info-item p svg { display: block; width: var(--s-5); height: var(--s-5); flex: none; }
.demo-workspace-panel .association-setup-status--entered { color: var(--ok); }
.demo-workspace-panel .association-next { display: flex; align-items: center; gap: var(--s-2); color: var(--mint); font-size: var(--fs-sm); }
.demo-workspace-panel .association-next svg { display: block; width: var(--s-4); height: var(--s-4); flex: none; }
.demo-workspace-panel .association-setup-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.demo-workspace-panel .association-info-item { display: flex; align-items: flex-start; gap: var(--s-3); color: var(--text-muted); }
.demo-workspace-panel .association-info-item h3 { font-family: var(--font-body); font-size: var(--fs-sm); }
.demo-workspace-panel .association-info-item p { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-1); font-size: var(--fs-xs); }
.demo-workspace-panel .association-info-item p svg { color: var(--info); }
.demo-workspace-panel .association-info-item > svg { margin-top: var(--s-1); }
.demo-workspace-tasks { width: 100%; }
.demo-workspace-tasks .association-section-heading { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--s-4); }
.demo-workspace-tasks .association-section-heading h2 { font-size: var(--fs-h2); }
.demo-workspace-tasks .association-section-heading .association-emblem { display: grid; place-items: center; flex: none; width: var(--s-12); height: var(--s-12); border: 1px solid var(--line-strong); border-radius: 50%; background: var(--button-surface); color: var(--mint); }
.demo-workspace-tasks .association-section-heading .association-emblem svg { display: block; width: var(--s-6); height: var(--s-6); }
.demo-workspace-tasks .association-task-date { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); width: calc(var(--s-12) + var(--s-8)); padding: var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-xs); }
.demo-workspace-tasks .association-task-date > span:first-child svg { width: var(--s-5); height: var(--s-5); }
.demo-workspace-tasks .association-task-date > span:first-child { display: grid; place-items: center; }
.demo-workspace-tasks .association-task-preview .list__item { min-height: 88px; }
.demo-workspace-tasks .association-task-preview .list__item > .btn { margin-left: auto; }
@media (max-width: 640px) {
  .demo-workspace-panel .association-setup,
  .demo-workspace-panel .association-setup-info { grid-template-columns: minmax(0, 1fr); }
  .demo-workspace-panel .association-setup-card { min-height: 0; padding: var(--s-4); }
  .demo-workspace-panel .association-setup-card > div { min-height: 0; }
  .demo-workspace-tasks .association-section-heading { align-items: flex-start; }
  .demo-workspace-tasks .association-task-preview .list__item { flex-wrap: wrap; padding-inline: var(--s-4); }
  .demo-workspace-tasks .association-task-preview .list__body { flex-basis: 50%; }
  .demo-workspace-tasks .association-task-preview .list__item > .btn { margin-left: auto; }
}
.demo-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: 160px;
  border-radius: var(--r-lg);
}
.demo-welcome h2 { margin-top: var(--s-3); }
.demo-welcome p { margin-top: var(--s-2); color: var(--text-muted); }
.demo-welcome__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  color: var(--mint);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.demo-welcome__badge svg { width: 16px; height: 16px; }
.demo-stats { width: 100%; }
.demo-stat {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  column-gap: var(--s-3);
  min-height: 124px;
  color: var(--text);
  text-decoration: none;
}
.demo-stat:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface-2); }
.demo-stat__icon {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--mint-soft);
  color: var(--mint);
}
.demo-stat__icon svg { width: 20px; height: 20px; }
.demo-stat .stat__label { align-self: end; }
.demo-stat .stat__value { align-self: start; margin-top: 0; font-size: 1.75rem; line-height: 1.2; }
.demo-stat__more {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--mint);
  font-size: var(--fs-xs);
}
.demo-stat__more svg { width: 14px; height: 14px; }
.demo-dashboard-lists { width: 100%; align-items: start; }
.demo-dashboard-row { color: var(--text); text-decoration: none; }
.demo-dashboard-row:hover { color: var(--text); }
.demo-dashboard-row .list__icon { color: var(--mint); }
.demo-dashboard-row .list__icon svg { width: 18px; height: 18px; }
.demo-dashboard-row .list__body { min-width: 0; }
.demo-dashboard-row .list__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-row-arrow { color: var(--text-subtle); font-size: 1.25rem; }
.demo-main form { display: flex; align-items: end; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.demo-main form label { display: block; color: var(--text-muted); font-size: var(--fs-sm); }
.demo-main input, .demo-main select {
  display: block;
  min-width: min(100%, 16rem);
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}
.demo-main table { width: 100%; border-collapse: collapse; }
.demo-main th, .demo-main td { text-align: left; padding: var(--s-4); border-bottom: 1px solid var(--line); }
.demo-main th { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; background: var(--bg-elevated); }
.demo-main td { font-size: var(--fs-sm); }
.demo-main tr:last-child td { border-bottom: 0; }
.demo-main tbody tr:hover { background: var(--surface-2); }
.demo-main td a { font-weight: 600; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.demo-review { display: inline-flex; align-items: center; gap: var(--s-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-review svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-review--ok { color: var(--ok); }
.demo-review--warn { color: var(--warn); }
.demo-review--urgent { color: var(--warn-urgent); }
.demo-review--missing { color: var(--text-muted); }
.demo-relations { display: flex; flex-direction: column; gap: var(--s-4); }
.demo-relations ul { margin: 0; padding-left: var(--s-6); }
.demo-pages, .demo-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.demo-pages a { display: inline-grid; min-width: 40px; min-height: 40px; place-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; }
.demo-pages a[aria-current="page"] { border-color: var(--deep-border); color: var(--mint); background: var(--mint-soft); }
.demo-footer { justify-content: space-between; padding-block: var(--s-5); border-top: 1px solid var(--line); }
.demo-unit-detail { display: flex; flex-direction: column; gap: var(--s-6); padding: 0; border: 0; background: transparent; }
.demo-unit-owners .card__head { margin-bottom: 0; }
.demo-owner-row { min-height: 72px; }
.demo-owner-row:first-child { border-top: 0; }
.demo-owner-row .list__icon svg { width: 24px; height: 24px; }
.demo-owner-share { margin-left: auto; color: var(--text); font-size: var(--fs-body); }
.demo-unit-fields .card__intro { margin-bottom: var(--s-6); }
.demo-unit-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.demo-unit-field-grid .field { min-width: 0; }
.demo-unit-field-grid .input { min-height: 56px; }
.demo-unit-area-note { grid-column: 2 / 4; align-self: end; min-height: 56px; }
.demo-unit-source { grid-column: 1 / -1; }
.demo-unit-source .textarea { min-height: 132px; }
.demo-building-search { width: 100%; }
.demo-building-search .search { flex: 1 1 280px; }
.demo-building-search .input { min-height: 52px; background: var(--surface); }
.demo-building-search .btn { min-height: 52px; }
.demo-building-list, .demo-unit-list { margin: 0; padding: 0; list-style: none; }
.demo-building-row, .demo-building-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .6fr) minmax(0, .6fr) calc(var(--s-12) * 3);
  gap: var(--s-5);
}
.demo-building-columns, .demo-unit-columns {
  padding: var(--s-3) var(--s-6);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line);
}
.demo-building-main, .demo-unit-main { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.demo-building-main .list__icon, .demo-unit-main .list__icon { color: var(--mint); }
.demo-building-main .list__icon svg, .demo-unit-main .list__icon svg { width: 30px; height: 30px; }
.demo-building-title, .demo-unit-title { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; }
.demo-building-count .list__meta { margin-top: var(--s-1); }
.demo-building-action, .demo-unit-action { justify-self: end; }
.demo-building-note { display: block; }
.demo-building-note summary { display: flex; align-items: center; gap: var(--s-3); min-height: var(--s-6); cursor: pointer; }
.demo-building-note summary svg { width: var(--s-5); height: var(--s-5); flex: none; }
.demo-building-note p { margin-top: var(--s-3); }
.demo-unit-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.demo-unit-stat { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; padding: var(--s-5); }
.demo-unit-stat > .list__icon { color: var(--mint); }
.demo-unit-stat > .list__icon svg { width: 30px; height: 30px; }
.demo-unit-stat .stat__value { margin: 0; font-size: var(--fs-h1); line-height: 1.1; }
.demo-unit-stat .stat__label { display: block; margin-top: var(--s-1); font-size: var(--fs-xs); }
.demo-unit-progress { display: flex; align-items: center; gap: var(--s-3); width: 100%; margin-top: var(--s-2); color: var(--text-muted); font-size: var(--fs-xs); }
.demo-unit-progress > span:first-child { flex: none; min-width: 2.5em; }
.demo-unit-progress progress { flex: 1; width: 0; min-width: 0; height: var(--s-2); border: 0; border-radius: var(--r-sm); accent-color: var(--mint); appearance: none; }
.demo-unit-progress progress::-webkit-progress-bar { background: var(--surface-3); border-radius: var(--r-sm); }
.demo-unit-progress progress::-webkit-progress-value { background: var(--mint); border-radius: var(--r-sm); }
.demo-unit-progress progress::-moz-progress-bar { background: var(--mint); border-radius: var(--r-sm); }
.demo-unit-hint { color: var(--text-muted); font-size: var(--fs-sm); }
.demo-unit-toolbar { align-items: flex-end; }
.demo-unit-toolbar .search { flex: 1 1 280px; min-width: 0; }
.demo-unit-toolbar .input, .demo-unit-toolbar .select { min-height: 52px; }
.demo-unit-toolbar .field { flex: 0 1 calc(var(--s-12) * 3); margin: 0; }
.demo-unit-columns, .demo-unit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, .5fr) minmax(0, .5fr) calc(var(--s-12) * 3);
  gap: var(--s-5);
}
.demo-unit-main .list__meta { margin-top: var(--s-1); }
.demo-unit-owner .state { display: block; margin-top: var(--s-1); font-size: var(--fs-xs); }
.demo-unit-owner .state__label { display: inline-flex; align-items: center; gap: var(--s-2); }
.demo-unit-owner .tag { vertical-align: middle; }
.demo-unit-area .list__meta { margin-top: var(--s-1); }
.demo-unit-state .state__label::before { width: 8px; height: 8px; }
.demo-people-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.demo-people-stat { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0 var(--s-3); min-height: 144px; padding: var(--s-5); color: var(--text); text-decoration: none; }
.demo-people-stat:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface-2); }
.demo-people-stat > .list__icon { grid-row: 1 / 3; width: 48px; height: 48px; color: var(--mint); background: var(--mint-soft); border-radius: var(--r-sm); }
.demo-people-stat > .list__icon svg { width: 32px; height: 32px; }
.demo-people-stat__value { font-size: var(--fs-h1); line-height: 1.1; font-weight: 600; }
.demo-people-stat__label { color: var(--text-muted); font-size: var(--fs-sm); }
.demo-people-stat__link { position: absolute; right: var(--s-4); bottom: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); color: var(--mint); font-size: var(--fs-sm); }
.demo-people-stat__link svg { width: 16px; height: 16px; }
.demo-people-hint { color: var(--text-muted); font-size: var(--fs-sm); }
.demo-people-toolbar { display: grid !important; grid-template-columns: minmax(180px, 1.6fr) repeat(3, minmax(130px, .9fr)) minmax(150px, .9fr) auto; align-items: end !important; gap: var(--s-3) !important; }
.demo-people-toolbar .search { min-width: 0; }
.demo-people-toolbar .search .input, .demo-people-toolbar .select { width: 100%; min-width: 0; min-height: 52px; }
.demo-people-toolbar .field { min-width: 0; margin: 0; }
.demo-people-toolbar .label { margin-bottom: var(--s-2); }
.demo-people-toolbar > .btn { min-height: 52px; white-space: nowrap; }
.demo-people-card-head { margin: 0 calc(var(--s-6) * -1); }
.demo-people-columns, .demo-people-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, .7fr) minmax(0, .7fr) calc(var(--s-12) * 3); gap: var(--s-5); }
.demo-people-columns { padding: var(--s-3) var(--s-6); color: var(--text-muted); font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.demo-people-list { margin: 0 calc(var(--s-6) * -1); padding: 0; list-style: none; }
.demo-people-row { align-items: center; min-height: 112px; padding: var(--s-4) var(--s-6); }
.demo-person-identity { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.demo-person-avatar { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; color: var(--mint); background: var(--surface-2); font-weight: 600; }
.demo-person-identity .list__body { min-width: 0; }
.demo-person-name { margin: 0 0 var(--s-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; }
.demo-person-identity .chip { max-width: 100%; }
.demo-person-identity .chip__icon svg { width: 18px; height: 18px; }
.demo-person-units p { margin: 0 0 var(--s-1); }
.demo-person-units a { display: block; width: fit-content; max-width: 100%; margin-top: var(--s-1); color: var(--mint); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.demo-person-membership .state, .demo-person-status .state { display: block; }
.demo-person-status { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.demo-person-status .state__label::before { width: 8px; height: 8px; }
.demo-contact-review { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); white-space: nowrap; }
.demo-contact-review svg { width: 16px; height: 16px; }
.demo-contact-review--ok { color: var(--ok); }
.demo-contact-review--warn { color: var(--warn); }
.demo-contact-review--urgent { color: var(--warn-urgent); }
.demo-person-action { justify-self: end; }

@media (max-width: 960px) {
  .demo-main { padding: var(--s-5) var(--s-4); }
  .demo-welcome { align-items: flex-start; flex-direction: column; }
  .demo-welcome__badge { align-self: flex-start; }
  .demo-people-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-people-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-people-toolbar .search { grid-column: 1 / -1; }
  .demo-people-toolbar > .btn { justify-self: stretch; }
  .demo-people-columns { display: none; }
  .demo-people-row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-4); gap: var(--s-3); }
  .demo-people-list { margin-inline: calc(var(--s-4) * -1); }
  .demo-person-identity { grid-column: 1 / -1; }
  .demo-person-units, .demo-person-membership { grid-column: 1 / -1; padding-left: calc(48px + var(--s-4)); }
  .demo-person-status { grid-column: 1; grid-row: 4; padding-left: calc(48px + var(--s-4)); }
  .demo-person-action { grid-column: 2; grid-row: 4; align-self: center; }
}
@media (max-width: 640px) {
  .demo-main { gap: var(--s-4); }
  .demo-main .page-head { align-items: flex-start; }
  .demo-main .page-head__sub { font-size: var(--fs-sm); }
  .demo-main .topbar__role { margin-left: auto; }
  .demo-main .demo-theme { order: 4; }
  .demo-stat { min-height: 108px; }
  .demo-dashboard-lists { grid-template-columns: minmax(0, 1fr); }
  .demo-main th, .demo-main td { padding: var(--s-3); }
  .demo-building-columns, .demo-unit-columns { display: none; }
  .demo-building-row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-4); gap: var(--s-4); }
  .demo-building-main { grid-column: 1 / -1; }
  .demo-building-count { grid-column: 1; }
  .demo-building-action { grid-column: 2; grid-row: 2; align-self: center; }
  .demo-building-state { grid-column: 1 / -1; }
  .demo-unit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-unit-row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-4); gap: var(--s-4); }
  .demo-unit-main, .demo-unit-owner { grid-column: 1 / -1; }
  .demo-unit-area { grid-column: 1; grid-row: 3; }
  .demo-unit-state { grid-column: 1 / -1; grid-row: 4; }
  .demo-unit-action { grid-column: 2; grid-row: 3; align-self: center; }
  .demo-unit-toolbar .field { flex: 1 1 140px; }
  .demo-unit-field-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .demo-unit-area-note, .demo-unit-source { grid-column: 1; }
  .demo-people-card-head { margin-top: 0; }
}