/* =============================================================================
   areas/residents.css (WP4): Talo · Asukkaat tab, apartment cards with the
   inline "+ Lisää asukas", the resident pages, tenant change, and the paste
   import (ways, paste, review). Classes: .res-*, .imp-*.
   ========================================================================== */
@layer areas {

/* ---------------------------------------------------------------- shared bits */
.field__optional { font-weight: var(--weight-regular); color: var(--color-text-muted); }

.res-mark {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 1.75rem; padding: .125rem var(--space-2);
  border-radius: var(--radius-tile); border: 0;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-tight);
  vertical-align: middle;
}
.res-mark .icon { width: 1.125rem; height: 1.125rem; }
.res-mark--attn { background: var(--status-attn-bg); color: var(--status-attn-fg); }
.res-mark--none { background: var(--status-none-bg); color: var(--status-none-fg); }

.imp-check {
  display: inline-flex; align-items: flex-start; gap: var(--space-3);
  min-height: var(--control-h-min); padding: var(--space-2) 0; cursor: pointer;
  font-size: var(--text-base); line-height: var(--leading-tight);
}
.imp-check input { width: 1.375rem; height: 1.375rem; margin: 0; flex: none; accent-color: var(--color-action); }
.imp-check .choice__hint { margin-top: var(--space-1); }

/* ---------------------------------------------------------------- tab */
.res-list { display: flex; flex-direction: column; gap: var(--space-6); }
.res-group { display: flex; flex-direction: column; gap: var(--space-3); }
.res-group__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.res-list__empty { margin: 0; font-size: var(--text-base); color: var(--color-text-muted); }
.res-concierge { margin-top: var(--space-6); max-width: var(--measure); }

.res-cards { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.res-card {
  position: relative;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface); border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  scroll-margin-top: calc(var(--topbar-h) + var(--space-4));
}
@media (max-width: 35.99rem) { .res-card { padding: var(--space-4); } }
.res-card[hidden] { display: none; }
.res-card[data-saved] { border-color: var(--status-ok-line); }
.res-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.res-card__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.res-card__empty { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.res-card__saved {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3); color: var(--status-ok-fg); font-weight: var(--weight-semibold);
}
.res-card__saved .icon { width: 1.25rem; height: 1.25rem; }
.res-card__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }

.res-people { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.res-person + .res-person { padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }
.res-person__name { margin: 0 0 var(--space-1); font-size: var(--text-base); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.res-person__role { display: inline-block; margin-left: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.res-person__contact { margin: 0; display: grid; gap: var(--space-1); }
.res-person__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.res-person__row dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.res-person__row dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 29.99rem) {
  .res-person__row { grid-template-columns: 1fr; gap: 0; }
}

/* "+ Lisää asukas" expands in place */
.res-add { flex: 1 1 100%; }
.res-add > summary { list-style: none; width: max-content; max-width: 100%; }
.res-add > summary::-webkit-details-marker { display: none; }
.res-add[open] > summary { margin-bottom: var(--space-3); }
.res-add__form {
  padding: var(--space-4); border-radius: var(--radius-card);
  background: var(--color-surface-sunken); border: 0;
}
.res-add__grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .res-add__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr); } }
.res-add__grid .field { margin: 0; max-width: none; }
.res-add__hint { margin: var(--space-3) 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------------------------------------------------------------- resident pages */
.res-form { max-width: 40rem; }
.res-form__pair { display: grid; gap: 0 var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .res-form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.res-form__pair .field { max-width: none; }
.res-form__date { max-width: 13rem; }
.res-form__primary { margin-bottom: var(--space-5); }
.res-more { margin-top: var(--space-6); }
.res-tc__date { margin: var(--space-3) 0 0; }
@supports selector(:has(*)) {
  .res-tc .choices:has([data-tc-pick]:not(:checked)) .res-tc__date:not(:has([aria-invalid])) { display: none; }
}

.res-filter { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.res-filter__row { display: grid; gap: 0 var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .res-filter__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.res-filter .field { margin-bottom: var(--space-2); max-width: none; }

/* ---------------------------------------------------------------- import: ways */
.imp-ways { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.imp-ways .card + .card { margin-top: 0; }
.imp-way { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.imp-way__icon { width: 2rem; height: 2rem; color: var(--color-action); }
.imp-way .card__title { margin: 0; }
.imp-way__desc { margin: 0; color: var(--color-text-muted); }
.imp-way__badge { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--status-wait-fg); }
.imp-concierge { max-width: var(--measure); }

/* ---------------------------------------------------------------- import: paste */
.imp-form { max-width: 48rem; }
.imp-text { font-variant-numeric: tabular-nums; min-height: 12rem; }
.imp-example { margin: 0 0 var(--space-3); max-width: 100%; overflow-x: auto; }
.imp-example__cap { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.imp-example__table { border-collapse: collapse; font-size: var(--text-sm); background: var(--color-surface-sunken); }
.imp-example__table td { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-subtle); white-space: nowrap; min-width: 3rem; }
.imp-file { padding: var(--space-2); height: auto; }

/* ---------------------------------------------------------------- import: review */
.imp { display: flex; flex-direction: column; gap: var(--space-4); }
.imp > .banner { margin: 0; }
.imp-cols { margin: 0; border: 1px solid var(--color-border-subtle); }
.imp-cols__legend { float: left; width: 100%; margin: 0 0 var(--space-2); padding: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.imp-cols__legend + * { clear: both; }
.imp-cols__list { display: grid; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.imp-col { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-tile); background: var(--color-surface-sunken); }
.imp-col__label { display: flex; flex-direction: column; gap: .125rem; font-size: var(--text-sm); }
.imp-col__name { font-weight: var(--weight-semibold); font-size: var(--text-base); overflow-wrap: anywhere; }
.imp-col__ex { color: var(--color-text-muted); overflow-wrap: anywhere; }
.imp-col__is { margin-top: var(--space-1); font-weight: var(--weight-semibold); }
.imp-summary { margin: var(--space-2) 0 0; font-size: var(--text-md); }

.imp-table td { vertical-align: top; }
.imp-row__state { min-width: 14rem; }
.imp-row__msg { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.imp-row--fix, .imp-row--ask { background: var(--status-attn-bg); }
.imp-row--skip td:not(.imp-row__state) { color: var(--color-text-muted); }
.imp-row[data-live="skip"] td:not(.imp-row__state) { color: var(--color-text-muted); text-decoration: line-through; }
.imp-row__email { overflow-wrap: anywhere; }
.imp-fix { margin-top: var(--space-2); }
.imp-fix__input { width: 100%; max-width: 20rem; }
.imp-ask { margin: var(--space-2) 0 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.imp-ask__choice { display: flex; align-items: flex-start; gap: var(--space-2); min-height: var(--control-h-min); padding: var(--space-1) 0; cursor: pointer; }
.imp-ask__choice input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; accent-color: var(--color-action); }
.imp-ask__hint { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.imp-check--skip { font-size: var(--text-sm); }
.imp-text-edit > summary { cursor: pointer; min-height: var(--control-h-min); display: flex; align-items: center; color: var(--color-link); text-decoration: underline; }
.imp-text-edit[open] > summary { margin-bottom: var(--space-2); }
.imp-actions { margin-top: 0; }

}