/* 20-plan.css — the room plan drawing: sheet frame, rack tiles ghost->built. */

.plan-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.plan-room-sel { font-family: var(--font-draw); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.plan-meter { display: flex; align-items: center; gap: 8px; }
.plan-meter .meter { width: 160px; }
.plan-meter .mono { font-size: 13px; }
.plan-spacer { flex: 1; }

.plan-scroller { overflow: auto; }
.plan-svg {
  display: block; width: 100%; max-width: 980px; margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--hair); border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.plan-frame { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.plan-sheet-title {
  font-family: var(--font-draw); font-weight: 600; font-size: 13px;
  letter-spacing: .12em; fill: var(--steel);
}
.plan-tick { stroke: var(--ghost); stroke-width: 1; }

/* rack tile */
.plan-rack { cursor: pointer; }
.pr-body { fill: var(--card2); stroke: var(--ink); stroke-width: 1.5; }
.pr-front { stroke: var(--ink); stroke-width: 3; opacity: .85; }
.pr-fill { fill: var(--ink); opacity: .12; }
.pr-name {
  font-family: var(--font-draw); font-weight: 700; font-size: 15px;
  text-anchor: middle; fill: var(--ink); letter-spacing: .04em;
}
.pr-pct { font-family: var(--font-mono); font-size: 11px; text-anchor: middle; fill: var(--steel); }
.pr-tick { font-size: 13px; fill: var(--stamp); font-weight: 700; }

.plan-rack:hover .pr-body { stroke: var(--blueline); stroke-width: 2; }

/* ghost: planned only — dashed linework, nothing solid */
.plan-rack.stage-ghost .pr-body { fill: none; stroke: var(--ghost); stroke-dasharray: 5 4; stroke-width: 1.2; }
.plan-rack.stage-ghost .pr-front { stroke: var(--ghost); stroke-dasharray: 4 4; stroke-width: 1.5; }
.plan-rack.stage-ghost .pr-name { fill: var(--ghost); }
.plan-rack.stage-ghost .pr-pct { fill: var(--ghost); }

/* placed: solid steel, empty inside */
.plan-rack.stage-placed .pr-body { fill: var(--card); stroke: var(--steel); }

/* cabling: ink rises */
.plan-rack.stage-cabling .pr-fill { fill: var(--blueline); opacity: .16; }
.plan-rack.stage-cabling .pr-body { stroke: var(--ink); }

/* complete */
.plan-rack.stage-complete .pr-body { fill: var(--stamp-soft); stroke: var(--stamp); stroke-width: 1.8; }
.plan-rack.stage-complete .pr-fill { display: none; }
.plan-rack.stage-complete .pr-pct { fill: var(--stamp); }

/* punch flag pin */
.pr-flag circle { fill: var(--redline); }
.pr-flag text {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  fill: #fff; text-anchor: middle;
}

.plan-svg.editing .plan-rack { cursor: grab; }
.plan-svg.editing .pr-body { stroke-dasharray: 3 3; }

.plan-legend { display: flex; gap: 18px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.plan-legend .lg { display: inline-block; width: 14px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; }
.lg-ghost { border: 1.5px dashed var(--ghost); }
.lg-placed { border: 1.5px solid var(--steel); background: var(--card); }
.lg-cabling { border: 1.5px solid var(--ink); background: var(--blueline-soft); }
.lg-done { border: 1.5px solid var(--stamp); background: var(--stamp-soft); }
.lg-flag { background: var(--redline); border-radius: 50%; width: 10px; }

.plan-empty { padding: 34px; text-align: center; max-width: 560px; margin: 40px auto; }
.plan-empty .draw-title { font-size: 17px; margin-bottom: 8px; }

/* tile / list segmented toggle */
.plan-seg { display: inline-flex; border: 1px solid var(--hair); border-radius: var(--r-sm); overflow: hidden; }
.plan-seg-btn {
  font-family: var(--font-draw); font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  font-size: 11.5px; padding: 6px 13px; background: var(--card); color: var(--steel);
  border: 0; cursor: pointer;
}
.plan-seg-btn + .plan-seg-btn { border-left: 1px solid var(--hair); }
.plan-seg-btn.active { background: var(--ink); color: var(--card); }
:root[data-theme="dark"] .plan-seg-btn.active { color: #14181B; }

/* list view */
.plan-list { display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin: 0 auto; }
.plan-lrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  cursor: pointer; color: var(--ink); text-align: left; width: 100%;
}
.plan-lrow:hover { border-color: var(--blueline); }
.plan-lname { font-size: 16px; min-width: 84px; }
.plan-lstage {
  font-family: var(--font-draw); font-weight: 700; font-size: 10px; letter-spacing: .1em;
  border-radius: 2px; padding: 2px 7px;
}
.plan-lstage.st-ghost { color: var(--steel); border: 1px dashed var(--ghost); }
.plan-lstage.st-placed { color: var(--steel); border: 1px solid var(--steel); }
.plan-lstage.st-cabling { color: var(--blueline); border: 1px solid var(--blueline); background: var(--blueline-soft); }
.plan-lstage.st-complete { color: var(--stamp); border: 1px solid var(--stamp); background: var(--stamp-soft); }
.plan-lmeter { flex: 1; min-width: 80px; }
.plan-lpct { font-size: 12px; min-width: 40px; text-align: right; }
.plan-lwork { font-size: 11.5px; min-width: 66px; }
.plan-lgo { color: var(--steel); }
.plan-lrow.stage-ghost .plan-lname { color: var(--ghost); }
@media (max-width: 560px) { .plan-lwork { display: none; } }