/* Upgrade 2026-10 – area "data": data (move-in / move-out inspections, property map, bulk import). Tokens from theme.css only; no all-caps labels, no thick coloured left borders. */

/* ---------- handover reports (inspections.js) ---------- */
.ins .mini { display: block; color: var(--text-3); font-size: var(--fs-xs); font-weight: 400; }
.ins-rooms { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ins-head, .ins-item { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(150px, 1fr) minmax(160px, 2fr) minmax(96px, auto); gap: 10px; align-items: center; padding: 8px 18px; }
.ins-head.out, .ins-items.out .ins-item { grid-template-columns: minmax(130px, 1.1fr) minmax(150px, 1fr) minmax(160px, 2fr) 110px minmax(96px, auto); }
.ins-head { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ins-head .r, .ins-d { text-align: right; }
.ins-item + .ins-item { border-top: 1px solid var(--border); }
.ins-item .input { min-height: 38px; }
.ins-d .input { text-align: right; }
.ins-p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ins-ph { position: relative; display: inline-block; }
.ins-ph img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; }
.ins-ph-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  display: grid; place-items: center; padding: 0; cursor: pointer; }
.ins-ph-x .icon { width: 12px; height: 12px; }
.ins-cam { cursor: pointer; }
.ins-cond { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--fs-xs); background: var(--neutral-bg); color: var(--text-2); }
.ins-cond-good { background: var(--success-bg); color: var(--success); }
.ins-cond-used { background: var(--warning-bg); color: var(--warning); }
.ins-cond-damaged, .ins-cond-missing { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.tbl tr.ins-damage td { background: var(--danger-bg); }
.ins-keys { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ins-key { display: inline-flex; gap: 6px; align-items: center; }
.ins-key select.input { width: auto; min-width: 150px; } .ins-key input.input { width: 72px; }
.ins-read { width: 130px; display: inline-block; }
.ins-addroom { display: flex; gap: 8px; flex-wrap: wrap; } .ins-addroom select { width: auto; min-width: 200px; }
.ins-sum { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 4px 18px; font-size: var(--fs-sm); }
.ins-sum b { font-variant-numeric: tabular-nums; }
.ins-cons ul { margin: 6px 0 0; }
@media (max-width: 760px) {
  .ins-head { display: none; }
  .ins-item, .ins-items.out .ins-item { grid-template-columns: 1fr 1fr; grid-template-areas: "what what" "c d" "n n" "p p"; padding: 12px 14px; }
  .ins-what { grid-area: what; } .ins-c { grid-area: c; } .ins-d { grid-area: d; text-align: left; } .ins-n { grid-area: n; } .ins-p { grid-area: p; }
  .ins-read { width: 100%; }
}

/* ---------- property map (components/property-map.js) ---------- */
.pm-switch .seg { flex-wrap: nowrap; }
.pm-wrap { position: relative; padding: 0 18px 8px; }
.pm-svg { width: 100%; height: auto; display: block; overflow: hidden; }
.pm-bg { fill: var(--surface-2); stroke: var(--border); }
.pm-grid line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 6; }
.pm-pin { cursor: pointer; outline: none; }
.pm-pin path { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.pm-pin.has-vacant path { fill: var(--warning); }
.pm-pin circle { fill: var(--surface); }
.pm-pin text { font-size: 15px; font-weight: 600; fill: var(--text); paint-order: stroke; stroke: var(--surface-2); stroke-width: 4px; }
.pm-pin:hover path, .pm-pin:focus-visible path, .pm-pin.on path { stroke: var(--text); stroke-width: 2.5; }
.pm-scale line { stroke: var(--text-2); stroke-width: 2; } .pm-scale text, text.pm-north { font-size: 13px; fill: var(--text-2); } path.pm-north { fill: var(--text-2); }
.pm-card { position: absolute; left: 30px; top: 12px; width: min(340px, calc(100% - 60px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,.12)); padding: 14px 16px; display: grid; gap: 8px; }
.pm-x { position: absolute; top: 6px; right: 6px; }
.pm-units { display: flex; flex-wrap: wrap; gap: 4px 14px; } .pm-free { color: var(--warning); font-weight: 600; }
.pm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 0; }
.pm-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); display: inline-block; } .pm-dot.vacant { background: var(--warning); margin-left: 8px; }
.pm-note { flex-basis: 100%; }
.pm-list .pm-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 18px; }
.pm-list .pm-row + .pm-row { border-top: 1px solid var(--border); }
.pm-row .mini { display: block; color: var(--text-3); font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .pm-wrap { padding: 0 8px 8px; }
  .pm-card { position: static; width: auto; margin-top: 8px; }
  .pm-list .pm-row { grid-template-columns: 1fr; }
}

/* ---------- bulk import (import.js) ---------- */
.imp-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.imp-kind h2 { font-size: var(--fs-md); gap: 8px; } .imp-kind h2 .icon { stroke: var(--primary); }
.imp-drop { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); cursor: pointer; background: var(--surface-2); }
.imp-drop:hover, .imp-drop:focus-within { border-color: var(--primary); }
.imp-drop > span { display: grid; gap: 2px; } .imp-drop .icon { width: 26px; height: 26px; stroke: var(--primary); flex: none; }
.imp-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }
.imp-table { max-height: 560px; }
.imp-table td { vertical-align: top; }
.imp-err { margin: 4px 0 0; padding-left: 16px; color: var(--danger); font-size: var(--fs-xs); }
.imp .mini { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.imp-table tr.imp-duplicate td { color: var(--text-3); }
.imp-go { justify-content: space-between; }
@media (max-width: 900px) { .imp-kinds { grid-template-columns: 1fr; } }
.ins-cond { white-space: nowrap; }
.tbl tr.ins-damage .ins-cond { background: var(--surface); }
.ins-unit { display: inline-block; min-width: 40px; text-align: left; }
.pm-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* follow-up 2026-10-20: background tiles (proxied by the app server), zoom buttons, attribution */
.pm-tiles .pm-attr { font-size: 12px; fill: #1f1e1d; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; }
.pm-wrap { position: relative; }
.pm-zoom { position: absolute; top: 10px; left: 28px; display: flex; flex-direction: column; gap: 4px; }
.pm-zoom .btn { min-width: 44px; min-height: 44px; font-size: 18px; justify-content: center; background: var(--surface); }
.pm-tiles .pm-scale text { fill: #1f1e1d; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; } .pm-tiles .pm-scale line { stroke: #1f1e1d; }