* { box-sizing: border-box; }

body {
  margin: 0;
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #111;
  background: #fff;
}

#app { display: flex; height: 100vh; }

#sidebar {
  width: 280px;
  flex: 0 0 280px;
  border-right: 1px solid #ccc;
  padding: 14px;
  overflow-y: auto;
}

h1 { font-size: 17px; margin: 0 0 14px; }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.topbar h1 { margin: 0; flex: 1 1 100%; min-width: 0; }
.topbar h1 a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#viewToggle {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #a63d54;
  background: #fff;
  color: #a63d54;
  font-weight: 600;
  font-size: 12px;
}
#viewToggle::before { content: "👁"; font-size: 12px; line-height: 1; }
#viewToggle:hover { background: #fdf3f0; }
body.viewmode #viewToggle { background: #a63d54; color: #fff; border-color: #a63d54; }
body.viewmode #viewToggle:hover { background: #7d2c3f; }
body.viewmode .edit-only { display: none; }
body.viewmode #canvas { touch-action: auto; }
body.viewmode .item { cursor: default; }

#guestSearch { width: 100%; }
#guestResults:empty { display: none; }
#guestResults { margin-top: 8px; max-height: 260px; overflow-y: auto; }
.gRow {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  margin-bottom: 4px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fafafa;
}
.gRow:hover { background: #fdf3f0; border-color: #d9a3ac; }
.gRow.active { background: #fbe6ea; border-color: #a63d54; }
.gRow b { font-weight: 600; }
.gRow span { display: block; font-size: 11px; color: #666; }
.gEmpty { font-size: 12px; color: #888; padding: 4px 0; }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #555; margin: 0 0 8px; }

h2.secHead { margin: 0 0 8px; }
.secToggle {
  all: unset;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #555;
  padding: 2px 0;
}
.secToggle:hover { color: #a63d54; }
.secToggle .emoji { margin-right: 7px; font-size: 15px; text-transform: none; }
.secToggle .chev { margin-left: auto; font-size: 10px; color: #999; transition: transform .15s; }
.secToggle:focus-visible { outline: 2px solid #a63d54; outline-offset: 2px; border-radius: 2px; }
section.collapsed .secToggle .chev { transform: rotate(-90deg); }
section.collapsed .secBody { display: none; }
section.collapsed { margin-bottom: 8px; padding-bottom: 8px; }

section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
section:last-child { border-bottom: 0; }

.row { display: flex; gap: 8px; margin-bottom: 8px; }
label { flex: 1; display: block; font-size: 12px; color: #444; }
label.check { display: flex; align-items: center; gap: 6px; flex: none; }
label.check input { width: auto; }

input[type="number"], input[type="text"], select {
  width: 100%;
  padding: 5px 6px;
  margin-top: 3px;
  border: 1px solid #bbb;
  border-radius: 3px;
  font: inherit;
  background: #fff;
}
input[type="range"] { width: 100%; margin-top: 3px; }

button {
  padding: 6px 10px;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #f6f6f6;
  font: inherit;
  cursor: pointer;
}
button:hover { background: #ececec; }
button.primary { width: 100%; background: #a63d54; color: #fff; border-color: #a63d54; }
button.primary:hover { background: #7d2c3f; }
button.danger { color: #a11; }
#addObj, #clearBtn { width: 100%; }

.seg { gap: 0; }
.seg button { flex: 1; border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 3px 0 0 3px; margin-left: 0; }
.seg button:last-child { border-radius: 0 3px 3px 0; }
.seg button.active { background: #a63d54; color: #fff; border-color: #a63d54; }

.stats { width: 100%; border-collapse: collapse; }
.stats th { text-align: left; font-weight: 400; color: #555; padding: 2px 0; }
.stats td { text-align: right; padding: 2px 0; font-variant-numeric: tabular-nums; }
.stats td.big { font-size: 18px; font-weight: 600; }

.muted { color: #888; font-weight: 400; }
.hint { font-size: 11px; color: #666; margin: 10px 0 0; }
#ioMsg:empty { display: none; }
#ioMsg { color: #1a6b2f; }
#ioMsg.error { color: #b3261e; }

#stage { flex: 1; overflow: auto; background: #f2f2f2; padding: 24px; }
#canvasWrap { display: inline-block; }
#canvasWrap.dropping { outline: 3px dashed #1a6b2f; outline-offset: 4px; }
#canvas { background: #fff; border: 1px solid #999; display: block; touch-action: none; }

.item { cursor: move; }
.item .body { fill: #fff; stroke: #333; stroke-width: .03; }
.item.round .body { fill: #fff; }
.item .chair { fill: #e4e4e4; stroke: #666; stroke-width: .02; }
.item .chair.taken { fill: #f3d9de; stroke: #a63d54; }
.item .chair.seat-active { stroke: #a63d54; stroke-width: .05; }
.item .seat { cursor: text; }
.item .seatName {
  font-size: .17px;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #123;
  pointer-events: none;
}
.item .label { font-size: .32px; text-anchor: middle; dominant-baseline: middle; fill: #333; pointer-events: none; }
.item .sublabel { font-size: .22px; text-anchor: middle; dominant-baseline: middle; fill: #777; pointer-events: none; }
.item.obj .body { fill: #ededed; stroke: #555; stroke-dasharray: .12 .08; }
.item.obj.dancefloor .body { fill: #f4f1e6; }
.item.obj.stage .body { fill: #e9eef4; }
.item.obj.bar .body { fill: #f2ece9; }
.item.obj.buffet .body { fill: #eef3ec; }
.item.obj.door .body { fill: #fff; stroke-dasharray: none; stroke-width: .06; }
.item.selected .body { stroke: #a63d54; stroke-width: .06; }
.handle { fill: #a63d54; cursor: nwse-resize; }
.grid { stroke: #e6e6e6; stroke-width: .01; }
.grid.major { stroke: #d0d0d0; stroke-width: .02; }

.seatsHead { margin: 14px 0 6px; }
.seatList { max-height: 230px; overflow-y: auto; margin-bottom: 8px; }
.seatRow { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.seatNo {
  flex: 0 0 20px;
  text-align: right;
  font-size: 11px;
  color: #888;
  font-variant-numeric: tabular-nums;
}
.seatInput { margin-top: 0; padding: 3px 5px; font-size: 12px; }
.seatInput:placeholder-shown { color: #333; background: #fafafa; }

/* ---------- phone / narrow screens ---------- */

@media (max-width: 820px) {
  #app { flex-direction: column; height: auto; min-height: 100vh; min-height: 100dvh; }

  #sidebar {
    width: 100%;
    flex: none;
    border-right: 0;
    border-bottom: 1px solid #ccc;
    overflow-y: visible;
    padding: 12px;
  }

  #stage { padding: 12px; -webkit-overflow-scrolling: touch; }

  /* 16px stops iOS zooming the page when a field is focused */
  input[type="number"], input[type="text"], input[type="search"], select { font-size: 16px; padding: 8px; }
  .seatInput { font-size: 16px; padding: 6px; }

  /* comfortable tap targets */
  button { min-height: 44px; padding: 8px 12px; }
  .seatNo { flex: 0 0 24px; font-size: 13px; }
  .gRow { min-height: 44px; padding: 8px 10px; }
  .seatList { max-height: none; }
  #guestResults { max-height: none; }
}