/* Seating diagram editor (task 8697), drawn by wwwroot/js/seating-diagram.js inside the Seating tab.
   Colors come only from the :root variables in app.css and Bootstrap's; linen, object and meal
   colors are planner data and are set by the script. Stroke widths on the room's overlays use
   non-scaling strokes so they stay one weight at every zoom. */

.sd-host { position: relative; }
.sd-editor { position: relative; display: flex; flex-direction: column; height: max(36rem, calc(100vh - 14rem)); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; font-family: var(--font-primary); color: var(--color-body); }
/* Full Screen: the editor covers the viewport, below the house notification overlay (z-index 999999)
   so the host's confirmations still open on top of it. */
.sd-editor.sd-maximized { position: fixed; inset: 0; z-index: 99999; height: auto; border: 0; border-radius: 0; }
.sd-editor fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sd-editor :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Top bar */
.sd-topbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: .5rem 1rem; height: 3rem; padding: 0 .75rem; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.sd-title { display: flex; flex: 1 1 auto; align-items: baseline; gap: .625rem; min-width: 0; }
.sd-title-name { overflow: hidden; font-family: var(--font-headings); font-size: 1.05rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sd-title-size { color: var(--bs-secondary-color); font-size: .875rem; white-space: nowrap; }
.sd-pill-view { align-self: center; padding: .125rem .625rem; background: var(--color-primary); color: var(--color-buttons-text); border-radius: 1rem; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.sd-top-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .5rem; }
.sd-top-group { display: flex; align-items: center; gap: .125rem; }
.sd-view-wrap { position: relative; }
.sd-status { display: inline-flex; align-items: center; justify-content: flex-end; gap: .375rem; min-width: 9.5rem; color: var(--bs-secondary-color); font-size: .8125rem; white-space: nowrap; }
.sd-status-saved i { color: var(--color-secondary); }
.sd-status-saving i { color: var(--color-primary); }
.sd-status-retrying, .sd-status-failed, .sd-status-stale { color: var(--color-tertiary); font-weight: 600; }
.sd-reload { flex: 0 0 auto; }

/* Buttons */
.sd-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; padding: 0; background: transparent; color: var(--color-body); border: 0; border-radius: .375rem; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.sd-icon-btn:hover:not(:disabled) { background: var(--bs-tertiary-bg); color: var(--color-primary); }
.sd-icon-btn:disabled { opacity: .35; cursor: default; }
.sd-icon-btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-buttons-text); }
.sd-text-btn { display: inline-flex; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .625rem; background: transparent; color: var(--color-body); border: 0; border-radius: .375rem; font-family: var(--font-buttons); font-size: .9rem; font-weight: 700; cursor: pointer; }
.sd-text-btn:hover { background: var(--bs-tertiary-bg); color: var(--color-primary); }
.sd-caret { color: var(--bs-secondary-color); font-size: .7rem; }
.sd-danger:hover:not(:disabled) { color: var(--color-tertiary); }

/* Menus: the View menu, the right-click menu and a guest card's menu */
.sd-popover { position: absolute; z-index: 25; min-width: 13rem; padding: .25rem 0; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; box-shadow: 0 .25rem .75rem rgba(var(--bs-black-rgb), .12); }
.sd-view-menu { top: calc(100% + .25rem); right: 0; }
.sd-view-menu .sd-seg { margin: .25rem .75rem .5rem; }
.sd-context-menu, .sd-guest-menu { position: fixed; z-index: 1100; }
.sd-menu-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4rem .75rem; background: transparent; color: var(--color-body); border: 0; font-size: .875rem; text-align: left; cursor: pointer; }
.sd-menu-item:hover:not(:disabled), .sd-menu-item:focus-visible { background: var(--color-primary); color: var(--color-buttons-text); outline: 0; }
.sd-menu-item:disabled { opacity: .45; cursor: default; }
.sd-menu-keys { margin-left: auto; padding-left: 1.5rem; font-size: .75rem; opacity: .7; }
.sd-menu-sep { height: 1px; margin: .25rem 0; background: var(--bs-border-color); }
.sd-menu-label { padding: .25rem .75rem 0; color: var(--bs-secondary-color); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sd-menu-row { display: flex; padding: .125rem .5rem; }
.sd-check { width: 1rem; color: var(--color-primary); }
.sd-menu-item:hover .sd-check, .sd-menu-item:focus-visible .sd-check { color: inherit; }

/* Body: tool rail, context panel, room */
.sd-body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
.sd-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 3.25rem; gap: .125rem; padding: .5rem 0; overflow-y: auto; background: var(--color-body); }
.sd-rail-btn { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; background: transparent; color: var(--bs-gray-400); border: 0; border-radius: .375rem; font-size: 1.15rem; cursor: pointer; }
.sd-rail-btn:hover { background: rgba(var(--bs-white-rgb), .1); color: var(--color-buttons-text); }
.sd-rail-btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-buttons-text); }
.sd-rail-btn:focus-visible { outline-color: var(--color-secondary); }

.sd-panel { display: flex; flex-direction: column; flex: 0 0 19rem; width: 19rem; min-height: 0; background: var(--bs-tertiary-bg); border-right: 1px solid var(--bs-border-color); }
.sd-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .375rem .375rem .375rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.sd-panel-title { margin: 0; overflow: hidden; font-family: var(--font-headings); font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.sd-panel-body { flex: 1 1 auto; overflow-y: auto; padding: .75rem 1rem 1rem; }
.sd-panel-open { position: absolute; top: .5rem; left: .5rem; z-index: 6; display: none; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 .125rem .5rem rgba(var(--bs-black-rgb), .1); }
.sd-panel-collapsed .sd-panel { display: none; }
.sd-panel-collapsed .sd-panel-open { display: inline-flex; }
.sd-narrow .sd-title-size { display: none; }
.sd-narrow .sd-panel { position: absolute; top: 0; bottom: 0; left: 3.25rem; z-index: 20; width: min(19rem, calc(100% - 3.25rem)); box-shadow: .25rem 0 .75rem rgba(var(--bs-black-rgb), .15); }

/* Panel fields */
.sd-field { margin-bottom: .75rem; }
.sd-field .form-label { margin-bottom: .25rem; font-size: .8125rem; }
.sd-field-row { display: flex; gap: .5rem; }
.sd-field-row > .sd-field { flex: 1 1 0; min-width: 0; }
.sd-align-end { align-items: flex-end; }
.sd-panel .form-control, .sd-panel .input-group-text { font-size: .875rem; }
.sd-panel .input-group-text { padding-left: .5rem; padding-right: .5rem; }
.sd-switch { margin-bottom: .75rem; }
.sd-panel .form-range::-webkit-slider-thumb { background: var(--color-primary); }
.sd-panel .form-range::-moz-range-thumb { background: var(--color-primary); }
.sd-panel .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 .25rem color-mix(in srgb, var(--color-primary) 25%, transparent); }
.sd-muted { color: var(--bs-secondary-color); font-size: .8125rem; }
.sd-tip { margin: .5rem 0 .75rem; }
.sd-divider { height: 1px; margin: 1rem 0; background: var(--bs-border-color); }
.sd-subhead { margin: 0 0 .5rem; font-size: .875rem; font-weight: 700; }
.sd-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.sd-stats { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; margin: .75rem 0; font-size: .875rem; }
.sd-stats dt { color: var(--bs-secondary-color); font-weight: 400; }
.sd-stats dd { margin: 0; font-weight: 700; text-align: right; }

/* Segmented buttons */
.sd-seg { display: flex; overflow: hidden; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.sd-seg-btn { flex: 1 1 0; min-width: 0; padding: .375rem .375rem; background: transparent; color: var(--color-body); border: 0; border-right: 1px solid var(--bs-border-color); font-size: .8125rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sd-seg-btn:last-child { border-right: 0; }
.sd-seg-btn:hover:not([aria-pressed="true"]):not(:disabled) { background: var(--bs-tertiary-bg); color: var(--color-primary); }
.sd-seg-btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-buttons-text); }
.sd-seg-btn:disabled { opacity: .5; cursor: default; }

/* Dropdown in the look of the house argenta-select */
.sd-select { position: relative; }
.sd-select.open { z-index: 22; }
.sd-select-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .375rem .75rem; background: var(--bs-body-bg); color: var(--color-body); border: 1px solid var(--bs-border-color); border-radius: .375rem; font-family: var(--font-primary); font-size: .875rem; line-height: 1.5; white-space: nowrap; cursor: pointer; transition: border-color .15s; }
.sd-select-btn:hover { border-color: var(--color-primary); }
.sd-select-btn:focus { border-color: var(--color-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 15%, transparent); outline: 0; }
.sd-select-btn:disabled { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); cursor: not-allowed; }
.sd-select-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sd-select-btn i { flex-shrink: 0; margin-left: .5rem; color: var(--bs-secondary-color); font-size: .7rem; }
.sd-select-list { position: absolute; top: 100%; left: 0; z-index: 22; min-width: 100%; max-height: 15.5rem; margin: .25rem 0 0; padding: .25rem 0; overflow-y: auto; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; box-shadow: 0 .25rem .75rem rgba(var(--bs-black-rgb), .1); list-style: none; white-space: nowrap; }
.sd-select-list li { padding: .4rem .75rem; color: var(--color-body); font-size: .875rem; cursor: pointer; transition: background .1s, color .1s; }
.sd-select-list li:hover, .sd-select-list li.sd-active { background: var(--color-primary); color: var(--color-buttons-text); }
.sd-select-list li.selected { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); font-weight: 600; }
.sd-select-list li.selected:hover, .sd-select-list li.selected.sd-active { background: var(--color-primary); color: var(--color-buttons-text); }

/* Colors, rotation, arrange buttons, chairs per side */
.sd-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: .25rem; margin-bottom: .375rem; }
.sd-swatch { width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--bs-border-color); border-radius: .25rem; cursor: pointer; }
.sd-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--color-primary); }
.sd-colors .form-control { max-width: 7.5rem; }
.sd-rotate { display: flex; align-items: center; gap: .25rem; }
.sd-rotate .input-group { flex: 1 1 auto; }
.sd-actions { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; }
.sd-actions .sd-icon-btn { width: 2.125rem; height: 2.125rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); }
.sd-sides { display: grid; grid-template-columns: repeat(4, 1fr); gap: .375rem; }
.sd-side { display: flex; flex-direction: column; gap: .125rem; color: var(--bs-secondary-color); font-size: .75rem; }
.sd-side .form-control { padding: .25rem .375rem; text-align: center; }
.sd-seats-filled { margin: .25rem 0 .75rem; font-size: .875rem; font-weight: 700; }
.sd-seats-filled i { color: var(--color-secondary); }
.sd-seat-list { margin: 0; padding: 0; font-size: .8125rem; list-style: none; }
.sd-seat-list li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; border-bottom: 1px solid var(--bs-border-color); }
.sd-seat-no { width: 1.5rem; color: var(--bs-secondary-color); text-align: right; font-variant-numeric: tabular-nums; }

/* Library and templates */
.sd-lib-cat h3 { margin: .875rem 0 .375rem; color: var(--bs-secondary-color); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sd-lib-grid, .sd-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; }
.sd-template-grid { margin-bottom: .5rem; }
.sd-lib-item, .sd-template { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 4.25rem; padding: .375rem .25rem; background: var(--bs-body-bg); color: var(--color-body); border: 1px solid var(--bs-border-color); border-radius: .375rem; font-size: .75rem; line-height: 1.15; text-align: center; cursor: pointer; user-select: none; }
.sd-lib-item { cursor: grab; touch-action: none; }
.sd-lib-item i, .sd-template i { color: var(--color-primary); font-size: 1.25rem; }
.sd-lib-item:hover, .sd-template:hover { border-color: var(--color-primary); }
.sd-lib-item[aria-pressed="true"], .sd-template[aria-pressed="true"] { background: color-mix(in srgb, var(--color-primary) 10%, var(--bs-body-bg)); border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }

/* Guests */
.sd-guests .sd-seg { margin: .5rem 0; }
.sd-guests .sd-seg-btn { padding: .3rem .25rem; font-size: .75rem; line-height: 1.15; white-space: normal; }
.sd-guest-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .375rem; }
.sd-guest-count { font-size: .875rem; font-weight: 700; }
.sd-guest-list { display: flex; flex-direction: column; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.sd-guest { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; cursor: pointer; user-select: none; }
.sd-guest.sd-draggable { cursor: grab; touch-action: pan-y; }
.sd-guest:hover, .sd-guest:focus-visible { border-color: var(--color-primary); outline: 0; }
.sd-guest.sd-pending { opacity: .55; }
.sd-guest-empty { padding: .75rem 0; }
.sd-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem; width: 2rem; height: 2rem; color: var(--color-buttons-text); border-radius: 50%; font-size: .75rem; font-weight: 700; }
.sd-guest-main { flex: 1 1 auto; min-width: 0; }
.sd-guest-name { font-size: .875rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.sd-guest-plus { color: var(--bs-secondary-color); font-size: .8rem; }
.sd-guest-pills { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.sd-guest-seat { margin-top: .25rem; color: var(--color-primary); font-size: .75rem; font-weight: 700; }
.sd-guest-rsvp { margin-top: .125rem; color: var(--bs-secondary-color); font-size: .75rem; }
.sd-guest-chair { padding-top: .125rem; color: var(--bs-gray-400); font-size: 1rem; }
.sd-guest-chair.sd-on { color: var(--color-secondary); }
.sd-guest-more { width: 1.75rem; height: 1.75rem; }
.sd-pill { display: inline-block; padding: .05rem .45rem; background: var(--bs-secondary-bg); color: var(--color-body); border-radius: 1rem; font-size: .6875rem; font-weight: 600; line-height: 1.4; }
.sd-pill-meal { color: var(--color-buttons-text); }

/* The room */
.sd-stage { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; background: var(--bs-secondary-bg); outline: 0; }
.sd-stage:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--color-primary); }
.sd-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; transform-origin: 0 0; will-change: transform; }
.sd-lift { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; }
.sd-hand .sd-svg, .sd-space .sd-svg { cursor: grab; }
.sd-hand .sd-svg:active, .sd-space .sd-svg:active { cursor: grabbing; }
.sd-placing .sd-svg, .sd-editor[data-tool="templates"] .sd-svg, .sd-editor[data-tool="lines"] .sd-svg, .sd-editor[data-tool="numbering"] .sd-svg { cursor: crosshair; }
.sd-editor[data-tool="text"] .sd-svg { cursor: text; }
.sd-room-floor { fill: var(--bs-body-bg); }
.sd-room-walls { fill: none; stroke: var(--color-body); stroke-width: 2.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
.sd-grid path { fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.sd-grid-minor { stroke: var(--bs-border-color); }
.sd-grid-major { stroke: var(--bs-gray-400); }
.sd-floorplan { pointer-events: none; }
.sd-editor[data-tool="room"] .sd-floorplan-unlocked { pointer-events: auto; cursor: move; }
.sd-perimeter { fill: none; stroke: var(--color-secondary); pointer-events: none; }
.sd-perimeter > * { stroke-width: 1.5px; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sd-item { cursor: pointer; }
.sd-locked { cursor: default; }
.sd-sel-outline { fill: none; stroke: var(--color-primary); stroke-width: 1.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
.sd-sel-frame { fill: color-mix(in srgb, var(--color-primary) 6%, transparent); stroke: var(--color-primary); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.sd-handle { fill: var(--bs-body-bg); stroke: var(--color-primary); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sd-handle-rotate { cursor: grab; }
.sd-handle-n, .sd-handle-s { cursor: ns-resize; }
.sd-handle-e, .sd-handle-w { cursor: ew-resize; }
.sd-handle-nw, .sd-handle-se { cursor: nwse-resize; }
.sd-handle-ne, .sd-handle-sw { cursor: nesw-resize; }
.sd-handle[data-handle="p1"], .sd-handle[data-handle="p2"] { cursor: move; }
.sd-handle-stem { stroke: var(--color-primary); stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.sd-guide { stroke: var(--color-tertiary); stroke-width: 1px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.sd-marquee { fill: color-mix(in srgb, var(--color-primary) 10%, transparent); stroke: var(--color-primary); stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.sd-template-rect { fill: color-mix(in srgb, var(--color-secondary) 12%, transparent); stroke: var(--color-secondary); stroke-width: 1.5px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.sd-line-preview { stroke: var(--color-primary); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.sd-number-path { fill: none; stroke: var(--color-primary); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .8; pointer-events: none; }
.sd-ghost { opacity: .5; pointer-events: none; }
.sd-drop-ring { fill: color-mix(in srgb, var(--color-secondary) 25%, transparent); stroke: var(--color-secondary); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.sd-drop-ring.sd-drop-taken { fill: color-mix(in srgb, var(--color-tertiary) 20%, transparent); stroke: var(--color-tertiary); }
.sd-pulse { fill: none; stroke: var(--color-tertiary); stroke-width: 3px; vector-effect: non-scaling-stroke; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: sd-pulse .8s ease-out 2; }
@keyframes sd-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

/* Floating pieces over the room */
.sd-hint { position: absolute; top: .75rem; left: 50%; z-index: 5; max-width: calc(100% - 2rem); padding: .375rem .875rem; background: var(--color-body); color: var(--color-buttons-text); border-radius: 1rem; font-size: .8125rem; transform: translateX(-50%); pointer-events: none; }
.sd-scalebar { position: absolute; left: .75rem; bottom: .75rem; z-index: 5; display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; background: color-mix(in srgb, var(--bs-body-bg) 85%, transparent); border-radius: .25rem; font-size: .75rem; font-weight: 600; pointer-events: none; }
.sd-scalebar-line { display: block; height: .375rem; border: 2px solid var(--color-body); border-top: 0; }
.sd-controls { position: absolute; right: .75rem; bottom: .75rem; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; max-width: calc(100% - 1.5rem); }
.sd-control-bar { display: flex; align-items: center; gap: .125rem; padding: .25rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; box-shadow: 0 .125rem .5rem rgba(var(--bs-black-rgb), .1); }
.sd-zoom-label { min-width: 3.25rem; font-size: .8125rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.sd-sep { width: 1px; height: 1.5rem; margin: 0 .25rem; background: var(--bs-border-color); }
.sd-counter { max-width: 20rem; overflow: hidden; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; box-shadow: 0 .125rem .5rem rgba(var(--bs-black-rgb), .1); }
.sd-counter-row { display: flex; align-items: center; gap: .875rem; width: 100%; padding: .375rem .75rem; background: transparent; color: var(--color-body); border: 0; font-size: .8125rem; font-weight: 700; cursor: pointer; }
.sd-count { display: inline-flex; align-items: center; gap: .375rem; font-variant-numeric: tabular-nums; }
.sd-count i { color: var(--color-primary); }
.sd-equipment { max-height: 16rem; overflow-y: auto; padding: .5rem .75rem; border-bottom: 1px solid var(--bs-border-color); font-size: .8125rem; }
.sd-equipment-title { margin-bottom: .25rem; font-weight: 700; }
.sd-equipment table { width: 100%; }
.sd-equipment td { padding: .125rem 0; }
.sd-equipment td:last-child { padding-left: 1rem; font-weight: 700; text-align: right; }
.sd-tooltip { position: absolute; z-index: 8; max-width: 16rem; padding: .5rem .625rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; box-shadow: 0 .25rem .75rem rgba(var(--bs-black-rgb), .15); font-size: .8125rem; pointer-events: none; }
.sd-tip-name { font-weight: 700; }
.sd-tip-line { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.sd-tip-seat { margin-top: .375rem; color: var(--color-primary); font-size: .75rem; font-weight: 700; }
.sd-drag-ghost { position: fixed; top: 0; left: 0; z-index: 1200; display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem .375rem .375rem; background: var(--bs-body-bg); border: 1px solid var(--color-primary); border-radius: 2rem; box-shadow: 0 .25rem .75rem rgba(var(--bs-black-rgb), .2); font-size: .8125rem; font-weight: 700; white-space: nowrap; pointer-events: none; }
.sd-drag-ghost > i { padding-left: .375rem; color: var(--color-primary); }
.sd-shortcuts { position: absolute; top: 50%; left: 50%; z-index: 24; width: min(34rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto; padding: 1rem 1.25rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; box-shadow: 0 .5rem 1.5rem rgba(var(--bs-black-rgb), .2); transform: translate(-50%, -50%); }
.sd-shortcuts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.sd-shortcuts h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.sd-shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: .375rem 1rem; margin: 0; font-size: .8125rem; }
.sd-shortcuts dt { font-family: var(--bs-font-monospace); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.sd-shortcuts dd { margin: 0; }
.sd-print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }

@media (max-width: 575.98px) {
    .sd-topbar { flex-wrap: wrap; height: auto; padding: .375rem .75rem; }
    .sd-top-actions { flex-wrap: wrap; }
    .sd-title-size { display: none; }
    .sd-status { min-width: 0; }
    .sd-counter-row { gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-pulse { animation: none; }
}