/* Seating plan editor — shared by prep4event/seating.html and
   wedding/seating.html. Colours come from the page through --w-* custom
   properties, so the editor takes on each client's theme. */
    /* ── toolbar ── */
    .seating-toolbar {
      display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
      margin-bottom: 1rem;
    }
    .seating-plan-select {
      flex: 1; min-width: 150px;
      border: 1px solid var(--w-text-light); background: var(--w-bg); color: var(--w-text);
      padding: 0.4rem 0.6rem; font-family: var(--w-font-body); font-size: 0.88rem;
    }
    .seating-plan-select:focus { outline: none; border-color: var(--w-accent); }
    .seating-plan-select option { background: var(--w-bg); }

    /* ── actions dropdown ── */
    .seating-actions-wrap { position: relative; display: inline-block; }
    .seating-actions-menu {
      display: none; position: absolute; top: calc(100% + 4px); right: 0;
      background: var(--w-bg); border: 1px solid var(--w-border);
      min-width: 170px; z-index: 200;
    }
    .seating-actions-menu.open { display: block; }
    .seating-actions-item {
      display: block; width: 100%; padding: 0.5rem 0.9rem; background: none; border: none;
      text-align: left; font-family: var(--w-font-body); font-size: 0.85rem;
      color: var(--w-text); text-decoration: none; cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .seating-actions-item:hover { background: var(--w-section-bg); color: var(--w-accent); }

    /* Mode toggle */
    #modeToggle { display: flex; align-items: center; gap: 0.6rem; }
    .mode-toggle { display: flex; border: 1px solid var(--w-border); }
    .mode-btn {
      padding: 0.3rem 0.85rem; background: var(--w-bg);
      border: none; border-right: 1px solid var(--w-border);
      color: var(--w-text-light); font-family: var(--w-font-body); font-size: 0.82rem;
      cursor: pointer; transition: background 0.15s, color 0.15s;
    }
    .mode-btn:last-child { border-right: none; }
    .mode-btn.active { background: var(--w-accent); color: #fff; }
    .mode-btn:hover:not(.active) { color: var(--w-text); }

    /* ── 3-column workspace ── */
    /* One column of panels on the left, the room taking the rest — the layout
       of the editor this came from. */
    .seating-workspace { display: flex; gap: 0.85rem; align-items: flex-start; }
    .seating-left   { width: 230px; flex-shrink: 0; max-height: calc(100vh - 8rem); overflow-y: auto; }
    .seating-center { flex: 1; min-width: 0; }

    /* ── shared panel heading ── */
    .seating-panel-heading {
      font-family: var(--w-font-heading); font-size: 0.78rem; letter-spacing: .06em;
      text-transform: uppercase; color: var(--w-text-light); margin-bottom: 0.5rem;
      padding-bottom: 0.3rem; border-bottom: 1px solid var(--w-border);
    }

    /* ── palette ── */
    .seating-palette-btn {
      display: flex; align-items: center; gap: 0.4rem; width: 100%;
      background: var(--w-section-bg); border: 1px solid var(--w-border);
      color: var(--w-text); font-family: var(--w-font-body); font-size: 0.82rem;
      padding: 0.45rem 0.6rem; margin-bottom: 0.4rem; cursor: pointer;
      text-align: left; transition: border-color 0.15s, color 0.15s;
    }
    .seating-palette-btn:hover { border-color: var(--w-accent); color: var(--w-accent); }
    .seating-palette-btn i { font-size: 1rem; flex-shrink: 0; }

    /* ── canvas ── */
    .seating-canvas-wrap {
      border: 1px solid var(--w-border); background: var(--w-section-bg);
      overflow: auto; position: relative; user-select: none;
    }
    .seating-canvas-wrap svg {
      display: block; touch-action: none;
      width: 100%; height: clamp(420px, calc(100vh - 16rem), 1200px);
    }
    /* ── canvas tools (zoom) ── */
    .canvas-tools { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
    .canvas-tool-btn {
      border: 1px solid var(--w-text-light); background: var(--w-bg); color: var(--w-text);
      font-family: var(--w-font-body); font-size: 0.8rem; padding: 0.15rem 0.55rem; cursor: pointer;
    }
    .canvas-tool-btn:hover { border-color: var(--w-accent); }
    .canvas-tool-btn.armed { border-color: var(--w-accent); color: var(--w-accent); }
    .canvas-zoom-label { font-size: 0.75rem; color: var(--w-text-light); min-width: 3rem; text-align: center; }
    .canvas-tool-hint { font-size: 0.72rem; color: var(--w-text-light); margin-left: auto; }
    .seating-palette-btn.armed { border-color: var(--w-accent); color: var(--w-accent); }
    .seating-empty {
      color: var(--w-text-light); font-style: italic; text-align: center; padding: 4rem 0;
    }

    /* ── SVG elements. Sizes here are centimetres of the room, so text keeps its
       size relative to the tables at any zoom. ── */
    .seating-grid         { stroke: var(--w-border); stroke-width: 0.5; pointer-events: none; }
    .seating-room-border  { fill: none; stroke: var(--w-text-light); stroke-width: 2; pointer-events: none; }
    .seating-scale-label  { fill: var(--w-text-light); font-family: var(--w-font-body); font-size: 18px; pointer-events: none; }
    .seating-item-label   { fill: var(--w-text); font-family: var(--w-font-body); font-size: 26px; font-weight: 600; pointer-events: none; }
    /* A table nobody has named carries its number, a shade lighter. */
    .seating-item-label.seating-item-unnamed { fill: var(--w-text-light); font-weight: 400; }
    /* In design mode the name is the way into the table's dialog, so it looks
       like a link — the table itself stays free to be dragged and resized. */
    .seating-item-label.seating-item-link {
      fill: var(--w-accent); pointer-events: auto; cursor: pointer;
      text-decoration: underline; text-decoration-thickness: 1.5px;
    }
    .seating-item-label.seating-item-link:hover { text-decoration-thickness: 3px; }
    /* Chairs take clicks in design mode (click a chair to switch it off or on);
       in seating mode the chair group handles its own drops. */
    .seating-chair        { pointer-events: none; }
    .seating-chair[data-seat-key] { pointer-events: auto; }
    .seating-item         { cursor: grab; }
    .seating-item:active  { cursor: grabbing; }
    .seating-item:hover .seating-shape { filter: brightness(1.1); }
    /* In seating mode items are clickable, not draggable */
    .seating-mode-active .seating-item { cursor: pointer; }

    /* Drag highlights for considerations (CSS overrides SVG presentation attributes) */
    .cons-good .seating-shape { stroke: #5a9c5a; stroke-width: 5; }
    .cons-bad  .seating-shape { stroke: #c44444; stroke-width: 5; }
    .cons-soft .seating-shape { stroke: #d4920a; stroke-width: 5; }

    /* Dietary summary in table panel */
    .table-diet-summary {
      font-size: 0.75rem; color: var(--w-text-light);
      margin: 0.25rem 0 0.5rem; padding: 0.3rem 0.5rem;
      background: var(--w-section-bg); border-radius: 4px;
    }

    /* ── right properties panel ── */
    .seating-no-sel {
      color: var(--w-text-light); font-size: 0.82rem; font-style: italic;
      padding: 0.5rem 0; text-align: center;
    }
    .seating-prop-group  { margin-bottom: 0.7rem; }
    .seating-prop-label  {
      display: block; font-family: var(--w-font-body); font-size: 0.78rem;
      color: var(--w-text-light); margin-bottom: 0.18rem;
    }
    .seating-prop-input {
      width: 100%; border: 1px solid var(--w-text-light); background: var(--w-bg);
      color: var(--w-text); padding: 0.3rem 0.5rem;
      font-family: var(--w-font-body); font-size: 0.85rem;
    }
    .seating-prop-input:focus { outline: none; border-color: var(--w-accent); }
    .seating-prop-divider { border: none; border-top: 1px solid var(--w-border); margin: 0.85rem 0; }

    /* ── guest list (seating mode left panel) ── */
    .guest-summary {
      font-family: var(--w-font-body); font-size: 0.78rem; color: var(--w-text-light);
      margin-bottom: 0.5rem; text-align: center;
    }
    .guest-search {
      width: 100%; border: 1px solid var(--w-text-light); background: var(--w-bg);
      color: var(--w-text); padding: 0.3rem 0.5rem;
      font-family: var(--w-font-body); font-size: 0.82rem; margin-bottom: 0.5rem;
    }
    .guest-search:focus { outline: none; border-color: var(--w-accent); }
    .guest-list { max-height: 480px; overflow-y: auto; }
    .guest-card {
      border: 1px solid var(--w-border); padding: 0.4rem 0.5rem;
      margin-bottom: 0.3rem; cursor: grab; background: var(--w-section-bg);
      font-family: var(--w-font-body); font-size: 0.82rem;
      transition: border-color 0.1s;
    }
    .guest-card:hover { border-color: var(--w-accent); }
    .guest-card.assigned { opacity: 0.55; }
    .guest-card:active { cursor: grabbing; }
    .guest-card-name  { font-weight: 600; color: var(--w-text); line-height: 1.2; }
    .guest-card-role  { font-size: 0.72rem; color: var(--w-text-light); }
    .guest-card-loc   { font-size: 0.75rem; color: var(--w-text); font-style: italic; }
    .guest-card-diet  { font-size: 0.75rem; color: var(--w-text-light); }
    .guest-list-empty { color: var(--w-text-light); font-size: 0.82rem; font-style: italic; text-align: center; padding: 1rem 0; }
    .role-filter { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
    .role-pill {
      font-size: 0.72rem; padding: 0.15rem 0.55rem;
      border: 1px solid var(--w-border); cursor: pointer;
      background: transparent; color: var(--w-text-light);
      font-family: var(--w-font-body);
    }
    .role-pill.active { background: var(--w-accent); color: #fff; border-color: var(--w-accent); }
    .show-names-label {
      display: flex; align-items: center; gap: 0.3rem;
      font-size: 0.82rem; color: var(--w-text-light);
      cursor: pointer; font-family: var(--w-font-body); white-space: nowrap;
    }
    .show-names-label input { cursor: pointer; accent-color: var(--w-accent); }

    /* ── table summary (seating mode right panel) ── */
    .table-sum-title  { font-family: var(--w-font-heading); font-size: 1rem; color: var(--w-text); margin-bottom: 0.2rem; }
    .table-sum-count  { font-size: 0.8rem; color: var(--w-text-light); margin-bottom: 0.75rem; }
    .table-sum-row {
      display: flex; align-items: flex-start; gap: 0.35rem;
      font-family: var(--w-font-body); font-size: 0.8rem; color: var(--w-text);
      padding: 0.25rem 0; border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    .table-sum-row:last-child { border-bottom: none; }
    .table-sum-idx    { color: var(--w-text-light); min-width: 1.2rem; flex-shrink: 0; }
    .table-sum-name   { flex: 1; }
    .table-sum-diet   { font-size: 0.73rem; color: var(--w-text-light); }
    .table-sum-empty  { color: var(--w-text-light); font-style: italic; }
    .table-sum-unassign {
      background: none; border: none; color: var(--w-text-light); cursor: pointer;
      font-size: 0.9rem; padding: 0; line-height: 1; flex-shrink: 0;
    }
    .table-sum-unassign:hover { color: #c0392b; }

    /* ── modal ── */
    .s-modal-label { font-family: var(--w-font-body); font-size: 0.85rem; color: var(--w-text-light); margin-bottom: 0.2rem; }
    .s-modal-input {
      width: 100%; border: 1px solid var(--w-text-light); background: var(--w-bg); color: var(--w-text);
      padding: 0.4rem 0.6rem; font-family: var(--w-font-body); font-size: 0.9rem; margin-bottom: 0.85rem;
    }
    .s-modal-input:focus { outline: none; border-color: var(--w-accent); }
    .s-modal-row { display: flex; gap: 0.75rem; }
    .s-modal-row .s-modal-group { flex: 1; }
    .s-modal-group { display: flex; flex-direction: column; }
    /* ── seats per side: the four fields sit where the sides are ── */
    /* The four counts hug the preview, which takes the middle and all the room
       left over — no empty column either side of it. */
    /* The table is the control: each side's stepper sits against the side it
       governs, and the whole block is capped so nothing drifts to the edges
       of the dialog. */
    .seat-compass {
      display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) 5.4rem;
      grid-template-rows: auto auto auto; gap: 0.35rem 0.4rem; align-items: center;
      max-width: 23rem; margin: 0 auto; position: relative;
    }
    .seat-compass > #iStepTop    { grid-column: 2; grid-row: 1; }
    .seat-compass > #iStepLeft   { grid-column: 1; grid-row: 2; }
    .seat-compass > #iStepRight  { grid-column: 3; grid-row: 2; }
    .seat-compass > #iStepBottom { grid-column: 2; grid-row: 3; }
    #iSeatPreviewRect  { grid-column: 2; grid-row: 2; }
    .seat-compass-round { grid-template-rows: auto auto; }
    .seat-compass-round > #iStepSeats  { grid-column: 2; grid-row: 1; }
    .seat-compass-round > #iSeatPreviewRound { grid-column: 2; grid-row: 2; }

    /* − n + as one control: a single bordered pill, shared height, hairline
       dividers instead of three separate boxes. The number stays typeable,
       because a stepper alone is twelve clicks for a twelve-seat side. */
    .seat-stepper {
      display: inline-flex; align-items: stretch; justify-self: center;
      height: 1.95rem; background: var(--w-bg);
      border: 1px solid var(--w-text-light);
      transition: border-color 0.15s;
    }
    .seat-stepper:hover        { border-color: var(--w-accent); }
    .seat-stepper:focus-within { border-color: var(--w-accent); }
    .seat-stepper input {
      width: 2.3rem; padding: 0; border: none; background: none; color: var(--w-text);
      text-align: center; font-family: var(--w-font-body); font-size: 0.9rem;
      font-variant-numeric: tabular-nums;
      border-left: 1px solid var(--w-border); border-right: 1px solid var(--w-border);
      -moz-appearance: textfield; appearance: textfield;   /* a third way to say the same thing */
    }
    .seat-stepper input:focus { outline: none; }
    .seat-stepper input::-webkit-outer-spin-button,
    .seat-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .seat-step {
      display: flex; align-items: center; justify-content: center;
      width: 1.6rem; padding: 0; border: none; background: none;
      color: var(--w-text-light); font-family: var(--w-font-body); font-size: 1rem;
      line-height: 1; cursor: pointer; transition: background 0.12s, color 0.12s;
    }
    .seat-step:hover  { background: var(--w-accent); color: #fff; }
    .seat-step:active { background: var(--w-accent); color: #fff; filter: brightness(0.9); }

    /* An empty side folds down to a single dashed "+", the same height as the
       pill it replaces, so the row does not jump when a side is seated. */
    .seat-seat-end {
      display: none; width: 2.6rem; height: 1.95rem; padding: 0; line-height: 1;
      background: none; border: 1px dashed var(--w-text-light); color: var(--w-text-light);
      font-family: var(--w-font-body); font-size: 1rem; cursor: pointer; opacity: 0.7;
      transition: border-color 0.15s, color 0.15s, opacity 0.15s;
    }
    .seat-seat-end:hover { border-color: var(--w-accent); color: var(--w-accent); opacity: 1; }
    .seat-stepper-empty {
      border-color: transparent; background: none;
    }
    .seat-stepper-empty:hover { border-color: transparent; }
    .seat-stepper-empty > .seat-step,
    .seat-stepper-empty > input          { display: none; }
    .seat-stepper-empty > .seat-seat-end { display: block; }

    /* Rotation: a labelled row, because an unlabelled arrow had people asking
       what it was for. */
    .rotation-row { display: flex; gap: 0.4rem; align-items: center; }
    .rotation-row input { flex: 1 1 5rem; min-width: 0; }
    .rotation-row button { flex: 0 0 auto; padding: 0.25rem 0.6rem; font-size: 0.82rem; white-space: nowrap; }

    /* Where the table stands: numbers that the plan usually settles. */
    .seating-details { margin-bottom: 0.7rem; }
    .seating-details > summary {
      font-family: var(--w-font-body); font-size: 0.78rem; color: var(--w-text-light);
      cursor: pointer; margin-bottom: 0.3rem;
    }
    .seating-details > summary:hover { color: var(--w-accent); }

    .seating-prop-hint { font-size: 0.72rem; color: var(--w-text-light); margin-top: 0.35rem; }
    /* The notes under the preview belong to the picture, so they sit under
       its middle rather than against the left edge of the dialog. */
    .seating-prop-hint.hint-centered { text-align: center; }

/* Corner handle on the selected item: drag it to resize. */
.seating-resize-handle { cursor: nwse-resize; }

/* Toolbar extras: the snap switch and the plan's counts. */
.canvas-tool-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--w-text-light); }
.canvas-tool-stats { font-size: 0.75rem; color: var(--w-text-light); margin-left: 0.6rem; }
.canvas-tools .mt-1 { margin-top: 0.25rem; }

/* Table list (design mode): what is in the room, and a way to reach it. */
.table-list { margin-bottom: 0.9rem; max-height: 14rem; overflow-y: auto; }
.table-row {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.35rem;
  border: 1px solid transparent; border-radius: 4px; cursor: pointer;
}
.table-row:hover { border-color: var(--w-border); }
.table-row.active { border-color: var(--w-accent); }
.table-swatch { width: 12px; height: 9px; border: 1px solid var(--w-text-light); flex: none; }
.table-swatch.round { border-radius: 50%; width: 11px; height: 11px; }
.table-row-name {
  flex: 1; min-width: 0; border: none; background: none; color: var(--w-text);
  font-family: var(--w-font-body); font-size: 0.82rem; padding: 0.1rem 0.2rem;
}
.table-row-name:focus { outline: 1px solid var(--w-accent); border-radius: 3px; }
.table-row-seats { font-size: 0.72rem; color: var(--w-text-light); white-space: nowrap; }
.seating-item-sublabel { fill: var(--w-text-light); font-family: var(--w-font-body); font-size: 18px; pointer-events: none; }

/* What to do with the clicked item: the three choices side by side. */
/* Every button in the editor's own dialogs is a plain dialog button. Left to
   the theme, a wedding client's primary is a ceremonial call to action, so
   "Avbryt" and "SPARA" came out in different sizes and different cases. */
.seating-modal .modal-footer button {
  padding: 0.5rem 1.2rem; font-size: 0.85rem;
  letter-spacing: 0.05em; text-transform: none; line-height: 1.35;
}

/* The room in three dimensions: the canvas fills the dialog, and a line of
   text floats over it saying how to get about. */
#view3dModal .modal-body { background: #1a1a1e; }
.view3d-status {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  background: rgba(20, 20, 24, 0.72); color: #f2f2f4;
  font-family: var(--w-font-body); font-size: 0.8rem;
  padding: 0.4rem 0.9rem; border-radius: 999px; pointer-events: none;
  max-width: 90%; text-align: center;
}

/* The three actions are equals in one row, so the editor settles their size
   and the theme only supplies their colours. A wedding theme's primary button
   is a ceremonial call to action — uppercase, wide-tracked, deeply padded —
   and beside two utility buttons it made the row look broken. */
.item-actions { display: flex; gap: 0.5rem; }
.item-actions button {
  flex: 1 1 0; white-space: nowrap;
  padding: 0.5rem 0.9rem; font-size: 0.85rem;
  letter-spacing: 0.05em; text-transform: none; line-height: 1.35;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
}

/* The three table kinds share the row evenly. */
.table-kinds { display: flex; }
.table-kinds .mode-btn { flex: 1 1 0; white-space: nowrap; }

/* The table is an outline, the chairs are solid — both in the button's own
   colour, so they follow hover and the active state. */
.kind-icon { width: 1.9em; height: 1.9em; vertical-align: -0.55em; }
.kind-icon circle { fill: currentColor; }
.kind-icon rect,
.kind-icon .kind-table { fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Position and size on one line: X, Y and then the table's measurements. */
.geom-row { display: flex; gap: 0.4rem; }
.geom-field { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.geom-field > label { font-size: 0.7rem; color: var(--w-text-light); margin-bottom: 0.1rem; }