/* ── Tower Plan Overlay ─────────────────────────────────────────────────── */
#tower-plan-overlay {
  display: none; position: fixed; top: 56px; left: 220px; right: 0; bottom: 0;
  z-index: 1200; background: #f2f7f4; flex-direction: row;
}
body.sb-icon-only #tower-plan-overlay { left: 68px; }
@media (max-width: 600px) { #tower-plan-overlay { left: 0; top: 56px; } }

/* ── Left sidebar ── DARK MODE ───────────────────────────────────────────── */
#tpo-side {
  width: 300px; flex-shrink: 0; display: flex; flex-direction: column;
  background: #0d1914;
  border-right: 1px solid rgba(44,221,127,.12);
  box-shadow: 2px 0 20px rgba(0,0,0,.45);
  overflow: hidden;
}

/* Header */
#tpo-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(44,221,127,.10);
  background: linear-gradient(180deg, #12201a 0%, #0d1914 100%);
}
#tpo-brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
#tpo-brand-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(44,221,127,.08);
  border: 1px solid rgba(44,221,127,.22);
  display: flex; align-items: center; justify-content: center;
}
#tpo-brand-title {
  font-size: .88rem; font-weight: 800; color: #edf4f0; letter-spacing: .2px;
}
#tpo-brand-sub {
  font-size: .65rem; color: #58b282; font-weight: 600; margin-top: 1px;
}
#tpo-exit-btn {
  margin-left: auto; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid rgba(44,221,127,.18);
  background: rgba(44,221,127,.06);
  color: #7acca0; cursor: pointer; font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
#tpo-exit-btn:hover {
  background: rgba(220,50,50,.18);
  color: #f87171;
  border-color: rgba(220,50,50,.40);
}
#tpo-subhead {
  display: flex; align-items: center; justify-content: space-between;
}
#tpo-hint {
  font-size: .6rem; font-weight: 700; color: #57b282;
  letter-spacing: 1px; text-transform: uppercase;
}
#tpo-topbottom {
  font-size: .6rem; font-weight: 600; color: #2cdd7f; cursor: pointer;
  letter-spacing: .3px;
}
#tpo-topbottom:hover { text-decoration: underline; }

/* Search bar */
#tpo-search-wrap {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 12px 4px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(44,221,127,.12);
  background: rgba(44,221,127,.04);
}
#tpo-search-icon { flex-shrink: 0; opacity: .5; }
#tpo-search {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: .75rem; color: #cee2d8;
}
#tpo-search::placeholder { color: #57b282; }
#tpo-filter-btn {
  border: none; background: transparent; cursor: pointer; padding: 0;
  display: flex; align-items: center; opacity: .5;
}
#tpo-filter-btn:hover { opacity: 1; }

/* Floor accordion list */
#tpo-list {
  flex: 1; overflow-y: auto; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
#tpo-list::-webkit-scrollbar { width: 4px; }
#tpo-list::-webkit-scrollbar-thumb { background: rgba(44,221,127,.18); border-radius: 4px; }

/* Floor card */
.tpo-card {
  border: 1px solid rgba(44,221,127,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.tpo-card:hover {
  box-shadow: 0 2px 16px rgba(44,221,127,.10);
  border-color: rgba(44,221,127,.22);
}
.tpo-card.tpo-card-active {
  border-color: rgba(44,221,127,.38);
  box-shadow: 0 0 0 2px rgba(44,221,127,.12);
  background: rgba(44,221,127,.04);
}
.tpo-card.tpo-card-3d-active {
  border-color: rgba(44,221,127,.42);
  box-shadow: 0 0 0 2px rgba(44,221,127,.16);
}

/* Card header row */
.tpo-card-header {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; cursor: pointer;
  user-select: none;
}
.tpo-card-badge {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800;
  background: rgba(44,221,127,.08);
  border: 1px solid rgba(44,221,127,.20);
  color: #2cdd7f;
}
.tpo-card-active .tpo-card-badge {
  background: rgba(44,221,127,.16);
  border-color: rgba(44,221,127,.38);
  color: #2cdd7f;
}
.tpo-card-empty .tpo-card-badge {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: #57b282;
}
.tpo-card-name {
  flex: 1; min-width: 0;
  font-size: .8rem; font-weight: 700; color: #cee2d8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpo-card-empty .tpo-card-name { color: #57b282; }
.tpo-card-meta {
  font-size: .62rem; color: #5eab82; margin-top: 1px;
  white-space: nowrap;
}
.tpo-card-status {
  font-size: .6rem; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; flex-shrink: 0;
  background: rgba(0,255,128,.10);
  color: #00ff9d;
  border: 1px solid rgba(0,255,128,.22);
}
.tpo-card-status.empty {
  background: rgba(255,255,255,.04);
  color: #57b282;
  border-color: rgba(255,255,255,.08);
}
.tpo-card-chevron {
  flex-shrink: 0; color: #57b282; transition: transform .22s ease;
  display: flex; align-items: center;
}
.tpo-card-active .tpo-card-chevron { transform: rotate(180deg); color: #2cdd7f; }

/* Card body (expanded) */
.tpo-card-body { display: none; padding: 0 12px 12px; }
.tpo-card-active .tpo-card-body { display: block; }

/* Stats grid inside expanded card */
.tpo-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; margin-bottom: 10px;
}
.tpo-stat-cell {
  background: rgba(44,221,127,.04);
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(44,221,127,.08);
}
.tpo-stat-cell-label {
  font-size: .58rem; font-weight: 600; color: #5eab82;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px;
  display: flex; align-items: center; gap: 4px;
}
.tpo-stat-cell-label svg { opacity: .5; }
.tpo-stat-cell-val {
  font-size: .92rem; font-weight: 800; color: #cee2d8;
}

/* Room list */
.tpo-room-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 6px; }

/* Full room list — scrollable */
.tpo-room-full {
  max-height: 200px; overflow-y: auto;
  border: 1px solid rgba(44,221,127,.10);
  border-radius: 8px;
  margin-bottom: 8px;
  background: rgba(0,0,0,.18);
}
.tpo-room-full::-webkit-scrollbar { width: 3px; }
.tpo-room-full::-webkit-scrollbar-thumb { background: rgba(44,221,127,.22); border-radius: 4px; }

/* Individual room row */
.tpo-room-row {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px;
  border-bottom: 1px solid rgba(44,221,127,.06);
  transition: background .12s;
}
.tpo-room-row:last-child { border-bottom: none; }
.tpo-room-row:hover { background: rgba(44,221,127,.07); }

/* House icon */
.tpo-room-icon { flex-shrink: 0; color: #2cdd7f; }

/* Room name */
.tpo-room-name {
  flex: 1; font-size: .72rem; font-weight: 600; color: #a0d8ba;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Asset / camera mini-badges */
.tpo-room-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tpo-room-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .6rem; font-weight: 700; color: #5eab82;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 5px; padding: 2px 5px;
  white-space: nowrap;
}
.tpo-room-badge svg { opacity: .6; }

/* Camera badge highlight */
.tpo-cam-badge-active {
  background: rgba(44,221,127,.10);
  border-color: rgba(44,221,127,.25);
  color: #2cdd7f;
}
.tpo-cam-badge-active svg { opacity: 1; }

/* Camera stat cell */
.tpo-cam-stat-cell { transition: background .2s, border-color .2s; }
.tpo-cam-stat-active {
  background: rgba(44,221,127,.10);
  border-color: rgba(44,221,127,.28);
}
.tpo-cam-stat-active .tpo-stat-cell-val { color: #2cdd7f; }
.tpo-cam-stat-active .tpo-stat-cell-label { color: #2cdd7f; }

/* View details link */
.tpo-view-details {
  font-size: .7rem; font-weight: 600; color: #2cdd7f;
  cursor: pointer; display: inline-flex; align-items: center; gap: 3px;
  margin-top: 2px;
}
.tpo-view-details:hover { text-decoration: underline; }

/* Footer totals bar */
#tpo-foot {
  display: flex; align-items: center;
  padding: 10px 16px;
  border-top: 1px solid rgba(44,221,127,.10);
  background: rgba(0,0,0,.25);
  gap: 0; flex-shrink: 0;
}
.tpo-foot-item { flex: 1; text-align: center; }
.tpo-foot-num { font-size: .95rem; font-weight: 800; color: #edf4f0; line-height: 1; }
.tpo-foot-lbl {
  font-size: .58rem; font-weight: 600; color: #57b282;
  text-transform: uppercase; letter-spacing: .4px; margin-top: 2px;
}
.tpo-foot-sep { width: 1px; height: 28px; background: rgba(44,221,127,.10); flex-shrink: 0; }

/* ── Right canvas — UNTOUCHED ────────────────────────────────────────────── */
#tpo-canvas-wrap {
  flex: 1; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 60% 30%, #e7f0ec 0%, #f2f7f4 60%, #f6f9f8 100%);
}
#tower-plan-canvas { width: 100%; height: 100%; display: block; }
#tpo-loading, #tpo-empty-msg {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 12px; pointer-events: none;
}
#tpo-empty-msg { display: none; }
#tpo-loading-text, #tpo-empty-text { font-size: .88rem; font-weight: 600; color: #41c880; }
#tpo-loading-sub, #tpo-empty-sub { font-size: .7rem; color: #60c08d; }

/* ── Blueprint preview modal ─────────────────────────────────────────────── */
#fp-bp-modal {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(6,10,8,.96); backdrop-filter: blur(14px);
  align-items: center; justify-content: center;
}
#fp-bp-modal.visible { display: flex; animation: fp-fade-in .2s ease; }
.fp-bp-box {
  width: min(96vw, 1400px); height: min(94vh, 900px);
  background: rgba(9,17,14,.99);
  border: 1px solid rgba(44,221,127,.22); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 0 80px rgba(44,221,127,.12), 0 30px 80px rgba(0,0,0,.9);
}
.fp-bp-header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; flex-shrink: 0;
  background: rgba(44,221,127,.04);
  border-bottom: 1px solid rgba(44,221,127,.14);
}
.fp-bp-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg,rgba(44,221,127,.15),rgba(119,233,214,.15)); border: 1px solid rgba(44,221,127,.25); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.fp-bp-title-wrap { flex: 1; min-width: 0; }
.fp-bp-title-wrap h3 { font-family: 'Space Grotesk', sans-serif; font-size: .88rem; font-weight: 700; color: #e4eee9; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-bp-title-wrap span { font-size: .65rem; color: rgba(44,221,127,.6); font-weight: 600; }
.fp-bp-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fp-bp-open-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 8px; cursor: pointer; font-size: .72rem; font-weight: 600; white-space: nowrap; background: linear-gradient(135deg,rgba(44,221,127,.15),rgba(119,233,214,.15)); border: 1px solid rgba(44,221,127,.3); color: var(--accent); transition: all .2s; }
.fp-bp-open-btn:hover { background: linear-gradient(135deg,rgba(44,221,127,.28),rgba(119,233,214,.28)); box-shadow: 0 0 14px rgba(44,221,127,.25); }
.fp-bp-close-btn { width: 32px; height: 32px; border-radius: 8px; border: none; background: rgba(255,77,109,.12); color: #ff4d6d; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.fp-bp-close-btn:hover { background: rgba(255,77,109,.28); }
.fp-bp-body { flex: 1; position: relative; overflow: hidden; background: #f5f5f5; }
#fp-bp-embed { width: 100%; height: 100%; border: none; display: block; transition: opacity .3s; }
.fp-bp-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(9,17,14,.92); color: rgba(44,221,127,.6); font-size: .8rem; }
.fp-bp-spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(44,221,127,.15); border-top-color: rgba(44,221,127,.8); animation: fp-spin .9s linear infinite; }
@keyframes fp-spin { to { transform: rotate(360deg); } }
@keyframes fp-fade-in { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }