/* Ballroom seat map overlay, shared by the invitation page and the gathering check in screen. */
.seat-map-overlay{position:fixed;z-index:1100;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#062a20d9;animation:seat-map-in .18s ease-out}
.seat-map-panel{display:flex;flex-direction:column;width:min(100%,640px);max-height:calc(100dvh - 32px);background:#fffdf8;border-radius:16px;box-shadow:0 20px 60px #0006;overflow:hidden;color:#07583d;font-family:Arial,sans-serif}
.seat-map-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:#07583d;color:#f7f0e6}
.seat-map-title{display:flex;gap:10px}
.seat-map-title>div{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:4px 12px;border:1px solid #f7f0e699;border-radius:8px}
.seat-map-title span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffb36b}
.seat-map-title strong{font-size:22px;line-height:1.15}
.seat-map-close{width:38px;height:38px;flex:none;border:1px solid #f7f0e699;border-radius:50%;background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer}
.seat-map-body{flex:1;min-height:0;overflow:auto;padding:10px}
.seat-map-svg{display:block;width:100%;height:auto;font-family:Arial,sans-serif}
.seat-map-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0;padding:10px 16px 14px;font-size:13px;font-weight:700}
.seat-map-legend>span{display:inline-flex;align-items:center;gap:8px}
.sm-key-mine{width:14px;height:14px;border-radius:50%;background:#ff7900;box-shadow:0 0 0 3px #ff790040}
.sm-key-here{width:14px;height:14px;border-radius:50%;background:#07583d;box-shadow:0 0 0 3px #07583d40}
.sm-key-route{width:22px;border-top:3px dashed #ff7900}

.sm-room{fill:#fff;stroke:#07583d;stroke-width:3}
.sm-stage{fill:#5a8a32}
.sm-stage-label{fill:#fff;font-size:16px;font-weight:700;letter-spacing:.08em;text-anchor:middle}
.sm-door-gap{stroke:#fff;stroke-width:6}
.sm-door{fill:none;stroke:#07583d;stroke-width:1.5}
.sm-entrance-label{fill:#07583d;font-size:17px;font-weight:700;letter-spacing:.08em}
.sm-end{text-anchor:end}
.sm-here{fill:#07583d;stroke:#fff;stroke-width:3}
.sm-here-pulse{fill:#07583d;opacity:.25;transform-box:fill-box;transform-origin:center;animation:seat-map-pulse 1.6s ease-out infinite}
.sm-here-label{fill:#07583d;font-size:17px;font-weight:700}
.sm-route{fill:none;stroke:#ff7900;stroke-width:3.5;stroke-dasharray:8 7;stroke-linecap:round;stroke-linejoin:round;animation:seat-map-walk 1s linear infinite}
@keyframes seat-map-walk{to{stroke-dashoffset:-15}}
.sm-chair{fill:#fff;stroke:#8a9a92;stroke-width:1.5}
.sm-top{stroke:#fff;stroke-width:2}
.sm-gold .sm-top{fill:#c08f00}
.sm-navy .sm-top{fill:#1f3a5f}
.sm-table-label{fill:#fff;font-size:15px;font-weight:700;text-anchor:middle}
.sm-dim{opacity:.45}
.sm-active .sm-top{fill:#ff7900}
.sm-active .sm-chair{stroke:#ff7900;stroke-width:2}
.sm-chair-label{fill:#07583d;font-size:9px;font-weight:700;text-anchor:middle}
.sm-chair.sm-mine{fill:#ff7900;stroke:#07583d;stroke-width:2.5}
.sm-mine-label{fill:#fff;font-size:11px}
.sm-pulse{fill:none;stroke:#ff7900;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:seat-map-pulse 1.6s ease-out infinite}
@keyframes seat-map-pulse{from{opacity:.9;transform:scale(.85)}to{opacity:0;transform:scale(1.35)}}
@keyframes seat-map-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.sm-pulse,.sm-here-pulse,.sm-route{animation:none}.sm-pulse{opacity:.6}.seat-map-overlay{animation:none}}
@media(max-width:600px){.seat-map-overlay{padding:8px}.seat-map-panel{max-height:calc(100dvh - 16px)}.seat-map-body{padding:4px}.seat-map-title strong{font-size:18px}}

/* The button that opens the map. */
.seat-map-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:#ff7900;color:#fff;font:700 13px/1 Arial,sans-serif;cursor:pointer}
.seat-map-button svg{width:16px;height:16px}

/* Admin seat layout page: occupancy on the map, the table panel beside it. */
.sm-click{cursor:pointer;outline:none}
.sm-click:hover .sm-top,.sm-click:focus-visible .sm-top{stroke:#ff7900;stroke-width:3}
.sm-chair.sm-taken{fill:#9fb0c4;stroke:#6b7f96}
.sm-chair.sm-present{fill:#087c60;stroke:#06624c}
.sm-chair-no{font-size:9.5px;pointer-events:none}
.sm-chair-no.sm-taken,.sm-chair-no.sm-present{fill:#fff}
.sm-table-count{fill:#fff;font-size:10px;font-weight:600;text-anchor:middle;opacity:.9}
.sm-middle{text-anchor:middle}
.seat-layout-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.sl-stat{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line,#e6ebe8);border-radius:8px;background:#fff;text-align:left;font:inherit;color:inherit}
.sl-stat span{font-size:12px;color:var(--muted,#7a8380)}
.sl-stat strong{font-size:22px;line-height:1.1}
.sl-stat-button{cursor:pointer}
.sl-stat-button:hover,.sl-stat-button.active{border-color:#ff7900}
.seat-layout-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:16px;align-items:start}
.seat-layout-map,.seat-layout-panel{padding:12px;border:1px solid var(--line,#e6ebe8);border-radius:8px;background:#fff}
.seat-layout-map .seat-map-legend{padding:8px 4px 2px;font-size:12px}
.seat-layout-panel{position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow:auto}
.seat-layout-panel header{padding:4px 4px 10px;border-bottom:1px solid var(--line,#e6ebe8)}
.seat-layout-panel h2{margin:0;font-size:20px}
.seat-layout-panel header p{margin:4px 0 0;color:var(--muted,#7a8380);font-size:13px}
.seat-layout-panel h3{margin:14px 4px 4px;font-size:13px;color:var(--muted,#7a8380)}
.sl-seats{list-style:none;margin:0;padding:0}
.sl-seat{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line,#e6ebe8)}
.sl-seat div{display:flex;flex-direction:column;min-width:0}
.sl-seat strong{overflow-wrap:anywhere}
.sl-seat small{color:var(--muted,#7a8380);font-size:12px;overflow-wrap:anywhere}
.sl-seat-no{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#9fb0c4;color:#fff;font-weight:700;font-size:12px}
.sl-present .sl-seat-no{background:#087c60}
.sl-empty .sl-seat-no{background:#fff;color:var(--muted,#7a8380);border:1.5px solid #c5cdc9}
.sl-empty strong{color:var(--subtle,#a0a8a4);font-weight:500}
.sl-state{font-size:12px;font-weight:600;color:var(--muted,#7a8380);white-space:nowrap}
.sl-present .sl-state{color:#087c60}
.sl-conflict{background:#fdf1e6}
.sl-conflict .sl-seat-no{background:#c74444}
.sl-hint{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;text-align:center;color:var(--muted,#7a8380)}
.sl-hint svg{width:28px;height:28px}
.sl-key{width:12px;height:12px;border-radius:50%;border:1.5px solid}
.sl-key-empty{background:#fff;border-color:#8a9a92}
.sl-key-taken{background:#9fb0c4;border-color:#6b7f96}
.sl-key-present{background:#087c60;border-color:#06624c}
@media(max-width:900px){.seat-layout-grid{grid-template-columns:1fr}.seat-layout-panel{position:static;max-height:none}.seat-layout-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Seat layout editing: drag a guest from a chair or a panel row onto another chair, table, row or "Tanpa meja". */
.seat-layout-edit .sm-chair.sm-taken,.seat-layout-edit .sm-chair.sm-present{cursor:grab;touch-action:none}
.seat-layout-edit [data-drag-guest]{cursor:grab;user-select:none;-webkit-user-select:none}
.seat-layout-edit .sl-seat[data-drag-guest]{grid-template-columns:30px minmax(0,1fr) auto 22px}
.sl-grip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:32px;color:var(--subtle,#a0a8a4);touch-action:none;cursor:grab}
.sl-grip svg{width:16px;height:16px}
.sl-dragging,.sl-dragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.sl-drag-source{opacity:.4}
.sm-chair.sl-drop{stroke:#ff7900;stroke-width:3.5;fill:#ffe3c7}
.sm-table.sl-drop .sm-top{stroke:#ff7900;stroke-width:4}
.sl-seat.sl-drop{background:#fff1e3;box-shadow:inset 3px 0 0 #ff7900}
.sl-stat-button.sl-drop{border-color:#ff7900;background:#fff1e3}
.sl-ghost{position:fixed;z-index:1200;top:0;left:0;display:flex;flex-direction:column;gap:2px;max-width:240px;padding:8px 12px;border-radius:8px;background:#07583d;color:#fff;box-shadow:0 8px 24px #0004;pointer-events:none;font:13px/1.3 Arial,sans-serif}
.sl-ghost strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-ghost small{color:#ffb36b;font-weight:700}
/* Swap a whole table: the panel control, or dragging a table onto another on the map (mouse). */
.sl-swap{display:flex;gap:8px;margin-top:10px}.sl-swap select{flex:1;min-width:0;min-height:36px;border:1px solid var(--line,#dfe5e0);border-radius:5px;background:#fff;font-size:12px;padding:6px 8px}
.seat-layout-edit .sm-table.sm-click{cursor:grab}.sl-dragging .sm-table.sm-click{cursor:grabbing}