/* Facilities (helpdesk, amenities, notices, cameras, overview), the plan in 2D and 3D, and
   connecting devices. Shared by the app pages and the admin portal. */

.community .bar,
.plan .bar,
.connect .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.community .spacer,
.plan .spacer {
  flex: 1;
}
.community h3,
.plan h3,
.connect h3 {
  font-size: 15px;
  margin: 16px 0 8px;
}
.community .bar h3 {
  margin: 0;
}
.community .chips,
.plan .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.community .chips button,
.plan .seg button,
.connect .seg button,
.plan .chips button,
.plan .tools button {
  border-radius: 999px;
  padding: 5px 13px;
  background: var(--card);
}
.community .chips button[aria-pressed='true'],
.plan .seg button[aria-pressed='true'],
.connect .seg button[aria-pressed='true'],
.plan .tools button[aria-pressed='true'],
.plan .chips button[aria-pressed='true'] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.community .chips .n {
  opacity: 0.75;
}
.plan .seg,
.connect .seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.community .bad {
  color: var(--red);
}
.community .pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.community button.danger,
.plan button.danger {
  color: var(--red);
}

/* ---- Helpdesk ---- */
.community .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.community .ticket {
  display: grid;
  gap: 4px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.community .ticket.late {
  border-left-color: var(--red);
}
.community .thead {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}
.community .timeline {
  list-style: none;
  margin: 0 0 10px;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--line);
  display: grid;
  gap: 8px;
}
.community .timeline .ev-escalate div {
  color: var(--red);
  font-weight: 600;
}
.community .timeline .ev-comment div {
  background: var(--subtle);
  border-radius: 8px;
  padding: 6px 8px;
}
dialog.community .photo {
  max-width: 100%;
  max-height: 260px;
  border-radius: 8px;
  display: block;
  margin: 8px 0;
}
dialog.community textarea,
.community textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  font: inherit;
}
dialog.community .actions.wrap,
.community .actions.wrap {
  flex-wrap: wrap;
}
.community label.inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.community label.inline select {
  width: auto;
}
.community .rate button {
  font-size: 22px;
  padding: 2px 6px;
  color: var(--amber);
  border: 0;
  background: none;
}

/* ---- Amenities ---- */
.community .tiles,
.plan .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.community .tile,
.plan .tile {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.community .tile.off {
  opacity: 0.55;
}
.community .big,
.plan .big {
  font-size: 34px;
  line-height: 1.1;
}
.community .booking,
.connect .thing {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.community .booking .ico,
.connect .thing .ico {
  font-size: 22px;
}
.community .what,
.connect .what {
  flex: 1;
  min-width: 150px;
  display: grid;
}
dialog.community .slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
  margin: 10px 0;
}
dialog.community .slots button {
  display: grid;
  padding: 8px 4px;
}
dialog.community .slots button small {
  color: var(--muted);
}
dialog.community .slots button.mine {
  border-color: var(--green);
  color: var(--green);
}
dialog.community .days {
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 4px;
}
dialog.community .days button {
  white-space: nowrap;
}

/* ---- Notices ---- */
.community .notice {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.community .notice.pinned {
  border-color: var(--blue);
}
.community .notice p {
  margin: 6px 0 0;
}

/* ---- Cameras ---- */
.community .cams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.community .cam {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.community .cam img,
.community .cam video,
.community .cam iframe,
.community .cam .door {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0b0e14;
  border: 0;
}
.community .cam .door {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #fff;
}
.community .cam figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
}

/* ---- Overview ---- */
.community .stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.community .stat {
  display: grid;
  gap: 2px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
}
.community .stat:not([disabled]) {
  cursor: pointer;
}
.community .stat strong {
  font-size: 26px;
}
.community .stat span {
  color: var(--muted);
  font-size: 13px;
}
.community .stat.bad strong {
  color: var(--red);
}
.community .stat.warn strong {
  color: var(--amber);
}
.community .stat.ok strong {
  color: var(--green);
}
.community .charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.community .charts section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 14px 14px;
}
.community .bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 130px;
}
.community .bars div {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
}
.community .bars i {
  width: 100%;
  min-height: 2px;
  background: var(--blue);
  border-radius: 3px 3px 0 0;
}
.community .bars span {
  font-size: 10px;
  color: var(--muted);
}
.community .hbar {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  font-size: 13px;
}
.community .hbar i {
  height: 10px;
  background: var(--blue);
  border-radius: 5px;
}
.community td input,
.community td select {
  width: 100%;
  min-width: 80px;
}

/* ---- The plan ---- */
.plan .canvas {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  touch-action: pan-y;
  overflow: hidden;
}
.plan .canvas.editing {
  touch-action: none;
}
.plan svg.flat {
  display: block;
  width: 100%;
  max-height: 72vh;
  user-select: none;
  color: var(--muted);
}
.plan .slab {
  fill: var(--subtle);
  stroke: var(--line);
  stroke-width: 2;
}
.plan .room rect {
  fill-opacity: 0.32;
  stroke: var(--ink);
  stroke-opacity: 0.55;
  stroke-width: 3;
  transition: fill-opacity 0.6s;
}
.plan .room.lit rect {
  fill-opacity: 0.6;
}
.plan .room text {
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink);
  pointer-events: none;
}
.plan .room.sel rect,
.plan .item.sel rect {
  stroke: var(--blue);
  stroke-opacity: 1;
  stroke-dasharray: 6 4;
}
.plan .room .handle {
  fill: var(--blue);
  fill-opacity: 1;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: none;
  cursor: nwse-resize;
}
.plan .item rect {
  fill: var(--card);
  stroke: var(--muted);
  stroke-width: 1.5;
}
.plan .item text {
  pointer-events: none;
}
.plan .draft {
  fill: var(--blue);
  fill-opacity: 0.2;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  pointer-events: none;
}
.plan .canvas.editing .room,
.plan .canvas.editing .item,
.plan .canvas.editing .dev {
  cursor: grab;
}
.plan .canvas.tool-room svg,
.plan .canvas.tool-item svg,
.plan .canvas.tool-device svg,
.plan .canvas.tool-place svg {
  cursor: crosshair;
}
.plan g.dev {
  cursor: pointer;
}
.plan g.dev .dot {
  fill: var(--card);
  stroke: var(--muted);
  stroke-width: 2;
}
.plan g.dev .ring,
.plan g.dev .halo {
  fill: none;
  stroke: none;
  pointer-events: none;
}
.plan g.dev .label {
  font-size: 9.5px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  pointer-events: none;
}
.plan g.dev.sel .dot {
  stroke: var(--blue);
  stroke-width: 4;
}
.plan g.dev.offline {
  opacity: 0.45;
}
.plan g.dev.pending .dot {
  stroke-dasharray: 4 3;
}
/* On: each kind shows it its own way */
.plan g.dev.equipment.on .dot {
  fill: #ffe9a6;
  stroke: #e0a100;
}
.plan g.dev.equipment.on .halo {
  fill: #ffd54a;
  fill-opacity: 0.35;
  animation: plan-glow 2.4s ease-in-out infinite;
}
.plan g.dev.k-fan.on .ico,
.plan g.dev.k-exhaust.on .ico {
  transform-box: fill-box;
  transform-origin: center;
  animation: plan-spin 0.9s linear infinite;
}
.plan g.dev.k-ac.on .halo,
.plan g.dev.k-geyser.on .halo,
.plan g.dev.k-pump.on .halo,
.plan g.dev.k-pool_pump.on .halo,
.plan g.dev.k-sprinkler.on .halo {
  fill: #58c7ff;
}
.plan g.dev.k-geyser.on .halo {
  fill: #ff8a5c;
}
.plan g.dev.k-ac.on .dot {
  fill: #d7f1ff;
  stroke: #2a9fd6;
}
.plan g.dev.k-siren.on .ring,
.plan g.dev.alarm .ring {
  stroke: #e53935;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: plan-ripple 1.1s ease-out infinite;
}
.plan g.dev.alarm .dot {
  fill: #ffd6d6;
  stroke: #e53935;
}
.plan g.dev.sensor.active .dot {
  fill: #d9f7e3;
  stroke: #2e9e5b;
}
.plan g.dev.sensor.active .ring {
  stroke: #2e9e5b;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: plan-ripple 1.8s ease-out infinite;
}
@keyframes plan-glow {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes plan-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes plan-ripple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .plan g.dev *,
  .plan .d3 * {
    animation: none !important;
  }
}
.plan .tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.plan .tools select,
.plan .bar select {
  width: auto;
  max-width: 100%;
}
.plan .hint {
  color: var(--blue);
  font-weight: 600;
  font-size: 13px;
}
.plan .props {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.plan .props label {
  margin: 0;
}
.plan .props input,
.plan .props select {
  width: auto;
}
.plan .tray {
  margin-top: 10px;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.plan .tray .chips {
  margin-top: 6px;
}
.plan .tray .chips button.on {
  border-color: #e0a100;
  background: #ffe9a6;
  color: #3b2f00;
}
.plan .tray .chips button.alarm {
  border-color: var(--red);
}
.plan .tray small {
  opacity: 0.7;
}
.plan .empty {
  text-align: center;
  padding: 20px 8px;
}
.plan .center {
  text-align: center;
  margin: 6px 0 0;
}
.plan .floorbar {
  margin-top: 8px;
}

/* 3D */
.plan .stage {
  perspective: 1400px;
  height: min(70vh, 560px);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.plan .world {
  position: relative;
  transform-style: preserve-3d;
  zoom: var(--zoom, 1);
}
.plan .f3 {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  background: color-mix(in srgb, var(--subtle) 88%, transparent);
  outline: 2px solid var(--line);
  box-shadow: 0 0 40px rgb(0 0 0 / 25%);
}
.plan .fname {
  position: absolute;
  left: 4px;
  bottom: -20px;
  font-size: 12px;
  color: var(--muted);
}
.plan .r3 {
  position: absolute;
  transform-style: preserve-3d;
  background: color-mix(in srgb, var(--rc) 42%, var(--card));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 70%, #000);
  transition: background 0.6s;
}
.plan .r3.lit {
  background: color-mix(in srgb, var(--rc) 45%, #fff3c4);
}
.plan .r3 .name {
  position: absolute;
  left: 6px;
  top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.8;
}
.plan .r3 .w {
  position: absolute;
  background: color-mix(in srgb, var(--rc) 60%, var(--card));
  opacity: 0.5;
  backface-visibility: visible;
}
.plan .r3 .wn {
  left: 0;
  right: 0;
  top: 0;
  transform-origin: top;
  transform: rotateX(90deg);
}
.plan .r3 .ws {
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: bottom;
  transform: rotateX(-90deg);
  opacity: 0.22;
}
.plan .r3 .ww {
  top: 0;
  bottom: 0;
  left: 0;
  transform-origin: left;
  transform: rotateY(-90deg);
}
.plan .r3 .we {
  top: 0;
  bottom: 0;
  right: 0;
  transform-origin: right;
  transform: rotateY(90deg);
  opacity: 0.22;
}
.plan .i3 {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ(1px);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  outline: 1px solid var(--muted);
  display: grid;
  place-items: center;
}
.plan .i3 b,
.plan .d3 b {
  display: grid;
  justify-items: center;
  font-weight: 400;
  transform-origin: bottom center;
  transform: rotateZ(var(--a)) rotateX(var(--t));
}
.plan .i3 b {
  font-size: 20px;
  transform: translateZ(4px) rotateZ(var(--a)) rotateX(var(--t));
}
.plan .d3 {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  cursor: pointer;
}
.plan .d3 b {
  position: absolute;
  left: -40px;
  width: 80px;
  bottom: 0;
  transform: translateZ(10px) rotateZ(var(--a)) rotateX(var(--t));
}
.plan .d3 .ico {
  font-size: 22px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 2px solid var(--muted);
  border-radius: 50%;
}
.plan .d3 small {
  font-size: 9.5px;
  background: color-mix(in srgb, var(--card) 85%, transparent);
  border-radius: 4px;
  padding: 0 3px;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan .d3 .glow {
  position: absolute;
  left: -46px;
  top: -46px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  pointer-events: none;
}
.plan .d3.equipment.on .ico {
  background: #ffe9a6;
  border-color: #e0a100;
}
.plan .d3.equipment.on .glow {
  background: radial-gradient(circle, rgb(255 213 74 / 75%) 0%, rgb(255 213 74 / 0%) 70%);
  animation: plan-glow 2.4s ease-in-out infinite;
}
.plan .d3.k-ac.on .glow,
.plan .d3.k-pump.on .glow,
.plan .d3.k-pool_pump.on .glow,
.plan .d3.k-sprinkler.on .glow {
  background: radial-gradient(circle, rgb(88 199 255 / 75%) 0%, rgb(88 199 255 / 0%) 70%);
}
.plan .d3.k-geyser.on .glow {
  background: radial-gradient(circle, rgb(255 138 92 / 75%) 0%, rgb(255 138 92 / 0%) 70%);
}
.plan .d3.k-fan.on .ico,
.plan .d3.k-exhaust.on .ico {
  animation: plan-spin 0.9s linear infinite;
}
.plan .d3.alarm .ico {
  background: #ffd6d6;
  border-color: #e53935;
}
.plan .d3.alarm .glow,
.plan .d3.k-siren.on .glow {
  background: radial-gradient(circle, rgb(229 57 53 / 0%) 40%, rgb(229 57 53 / 85%) 55%, rgb(229 57 53 / 0%) 70%);
  animation: plan-ripple 1.1s ease-out infinite;
}
.plan .d3.sensor.active .ico {
  background: #d9f7e3;
  border-color: #2e9e5b;
}
.plan .d3.offline {
  opacity: 0.45;
}

/* ---- Connect devices ---- */
.connect .pcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 14px 14px;
}
.connect pre {
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  overflow-x: auto;
  font-size: 12.5px;
  user-select: all;
}
.connect .thing select {
  width: auto;
}
.connect summary {
  cursor: pointer;
  color: var(--muted);
  margin: 10px 0;
}