:root{
  --i8w-blue:#2f5ea8;
  --i8w-blue-dark:#244b88;
  --i8w-blue-soft:#eff4fb;
  --i8w-line:#cfd8e6;
  --i8w-panel:#f6f7f9;
  --i8w-bg:#e9edf2;
  --i8w-text:#1e293b;
  --i8w-muted:#667085;
  --i8w-shadow:0 8px 24px rgba(15,23,42,.08);
}
.i8w-p4-shell{direction:rtl;font-family:Arial,sans-serif;color:var(--i8w-text)}
.i8w-p4-header-card{margin-bottom:16px !important;}

.i8w-p4-mobile-only[hidden],
.i8w-p4-overlay[hidden],
.i8w-p4-modal[hidden]{display:none !important;}

.i8w-p4-empty{background:#fff;border:1px solid var(--i8w-line);border-radius:18px;padding:30px;text-align:center}
.i8w-p4-mobile-only{min-height:380px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f1f5f9 0%,#e8edf8 100%);border:1px solid rgba(99,102,241,0.14);border-radius:22px;position:relative;overflow:hidden}
.i8w-p4-mobile-only::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(99,102,241,0.03) 0px,rgba(99,102,241,0.03) 1px,transparent 1px,transparent 12px);pointer-events:none}
.i8w-p4-mobile-card{padding:36px 32px;background:#fff;border:1.5px solid rgba(99,102,241,0.18);border-radius:20px;box-shadow:0 8px 32px rgba(99,102,241,0.14),0 2px 8px rgba(15,23,42,0.06);text-align:center;max-width:320px;position:relative}
.i8w-p4-mobile-card::before{content:'🔒';font-size:44px;display:block;margin-bottom:16px;line-height:1;filter:drop-shadow(0 2px 6px rgba(99,102,241,0.25))}
.i8w-p4-mobile-card h3{margin:0 0 10px;font-size:18px;font-weight:800;color:#1e293b;letter-spacing:-0.01em}
.i8w-p4-mobile-card p{margin:0;color:var(--i8w-muted);font-size:14px;line-height:1.5}

/* Mobile: show only the not-available notice, centered.
   R17: every rule is scoped with :not(.i8w-p4-tablet) — the JS flags real tablets with
   that class, so PHONES (and narrow desktop windows) keep this exact behavior while a
   tablet below 992px (portrait) keeps the full launcher/workspace styles. The
   declarations themselves are untouched. */
@media (max-width: 991px) {
  .i8w-p4-shell:not(.i8w-p4-tablet) .i8w-p4-header-card { display: none !important; }
  /* Fix 3: hide the launcher button card on mobile — only the lock notice stays */
  .i8w-p4-shell:not(.i8w-p4-tablet) .i8w-p4-launcher     { display: none !important; }
  .i8w-p4-shell:not(.i8w-p4-tablet) .i8w-p4-mobile-only {
    min-height: 0;
    border-radius: 18px;
    padding: 32px 16px;
    margin: 0 auto;
  }
  .i8w-p4-shell:not(.i8w-p4-tablet) .i8w-p4-mobile-card {
    max-width: 100%;
    padding: 28px 20px;
    box-sizing: border-box;
  }
}
.i8w-p4-mobile-card-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#1e40af,#4f46e5 55%,#7c3aed);color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;margin-top:18px}
.i8w-p4-launcher{display:flex;align-items:center;justify-content:center;min-height:280px;background:linear-gradient(180deg,#fff,#eef3fb);border:1px solid var(--i8w-line);border-radius:18px;box-shadow:var(--i8w-shadow)}
.i8w-p4-launch-btn,.i8w-btn{background:var(--i8w-blue);color:#fff;border:none;padding:12px 18px;border-radius:8px;cursor:pointer;font-weight:700;font-size:15px;transition:.18s opacity,.18s transform}
.i8w-p4-launch-btn:hover,.i8w-btn:hover{transform:translateY(-1px);opacity:.95}
.i8w-btn.secondary{background:#dbe7fb;color:#244b88}.i8w-btn.ghost{background:#fff;color:var(--i8w-text);border:1px solid #c8d3e3}.i8w-btn.close-btn,.i8w-top-btn.danger{background:#ef4444}
.i8w-p4-overlay{position:fixed;inset:0;z-index:999999}
.i8w-p4-workspace{display:flex;flex-direction:column;height:100dvh;min-height:100dvh;width:100vw;background:var(--i8w-bg);overflow:auto}
/* ===== R16 top bar — approved redesign (EVENT360). Two rows: an info row (brand + stats +
   close) and a full-width actions row grouped into 4 zones with subtle separators between
   active groups. Uniform button height / radius / font / padding; primary / secondary / ghost /
   danger hierarchy on the purple bar. Hover / focus / disabled / loading states never resize
   the button. Layout+design only — every button keeps its existing data-action / data-tab and
   its server-computed gating (locked classes reused, not re-implemented). ===== */
.i8w-p4-topbar{background:linear-gradient(180deg,#5b46e5,#7c3aed);color:#fff;padding:11px 16px 12px;display:flex;flex-direction:column;gap:11px;box-shadow:0 2px 12px rgba(79,70,229,.22)}
.i8w-p4-topbar-info{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.i8w-p4-topbar-brand{display:flex;flex-direction:column;line-height:1.15;min-width:0;margin-inline-end:auto}
.i8w-topbar-event-name{font-size:16px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i8w-topbar-event-sub{font-size:11.5px;opacity:.82;font-weight:600;color:#fff}
.i8w-p4-topbar-stats{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.i8w-p4-shell .top-stat{min-width:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);height:auto;border-radius:9px;color:#fff;padding:4px 9px;line-height:1.1}
.i8w-p4-shell .top-stat strong{font-size:15px;font-weight:800;line-height:1}
.i8w-p4-shell .top-stat span{font-size:10px;opacity:.85;font-weight:600;white-space:nowrap}
.i8w-tb-close{position:relative;height:37px;width:37px;flex:0 0 auto;border-radius:10px;border:1px solid rgba(255,180,180,.5);background:rgba(255,255,255,.10);color:#ffe1e1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s;overflow:visible}
/* R2-fix2: guaranteed CSS-drawn X (same approach as .i8w-ti-close) — shows in every view / theme. */
.i8w-tb-close svg{display:none !important}
.i8w-tb-close::before,.i8w-tb-close::after{content:"" !important;position:absolute;top:50%;left:50%;width:18px;height:2.6px;border-radius:2px;background:#ffe1e1;opacity:1 !important;visibility:visible !important;z-index:1}
.i8w-tb-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.i8w-tb-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.i8w-tb-close:hover{background:rgba(220,38,38,.3)}
/* actions row + groups */
.i8w-p4-topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-start;padding-top:11px;border-top:1px solid rgba(255,255,255,.22)}
.i8w-tb-grp{display:flex;align-items:center;gap:6px}
.i8w-tb-sep{width:1px;align-self:stretch;margin:5px 4px;background:rgba(255,255,255,.22);border-radius:1px}
/* uniform action button */
.i8w-tb{height:37px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;border-radius:10px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;border:1px solid transparent;transition:background .15s,border-color .15s,transform .06s,box-shadow .15s;line-height:1;color:#fff}
.i8w-tb svg{width:14px;height:14px;flex:0 0 auto}
.i8w-tb:active{transform:translateY(1px)}
.i8w-tb--primary{background:#fff;color:#4a37d6;box-shadow:0 2px 8px rgba(15,23,42,.18)}
.i8w-tb--primary:hover{background:#f3f1ff}
.i8w-tb--secondary{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.30)}
.i8w-tb--secondary:hover{background:rgba(255,255,255,.24)}
.i8w-tb--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.i8w-tb--ghost:hover{background:rgba(255,255,255,.12)}
.i8w-tb--danger{background:rgba(255,255,255,.10);color:#ffe1e1;border-color:rgba(255,150,150,.55)}
.i8w-tb--danger:hover{background:rgba(220,38,38,.30);border-color:#ffb4b4}
.i8w-tb:focus-visible{outline:2px solid #fff;outline-offset:2px}
.i8w-tb.tab.active{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.5);color:#fff}
/* locked / disabled states reuse the EXISTING server-gating classes (visual only, no logic here) */
.i8w-tb.i8w-add-locked,.i8w-tb[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.i8w-tb.i8w-hosts-locked{opacity:.5}
.i8w-tb.is-loading{position:relative;color:transparent!important}
.i8w-tb.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;animation:i8w-tb-spin .7s linear infinite}
@keyframes i8w-tb-spin{to{transform:rotate(360deg)}}
/* legacy top-bar buttons (kept for the hostess selectors / older markup references) */
.i8w-top-btn{height:42px;padding:0 16px;border:none;border-radius:6px;background:rgba(255,255,255,.16);color:#fff;font-weight:700;cursor:pointer}
.i8w-top-btn.accent{background:#dfe8f8;color:#1f3b6a}.i8w-top-btn.accent-dark{background:#17396b}.i8w-top-btn.ghost{background:rgba(255,255,255,.08)}.i8w-top-btn.tab.active{background:rgba(255,255,255,.24)}
.i8w-p4-panel{display:none;min-height:0;flex:1;padding:14px}.i8w-p4-panel.active{display:block}
.i8w-p4-shell .reference-layout{display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:12px;height:calc(100vh - 92px);min-height:0}
.i8w-p4-side,.i8w-p4-center{min-height:0}
.i8w-ref-panel,.i8w-p4-shell .ref-list-card{height:100%;background:#f4f5f7;border:1px solid #d5dbe4;box-shadow:inset 0 1px 0 rgba(255,255,255,.65);border-radius:4px;padding:14px;display:flex;flex-direction:column;min-height:0}
.i8w-ref-panel-title{font-size:22px;font-weight:700;color:#1f2937;margin-bottom:14px;text-align:center}
.i8w-ref-search-wrap{margin-bottom:14px}
.i8w-ref-search-wrap input,.i8w-p4-shell .bottom-head input,.i8w-p4-shell .table-form input,.i8w-p4-shell .table-form select{width:100%;height:44px;border:1px solid #cfd7e3;background:#fff;border-radius:4px;padding:0 14px;font:inherit}
.unassigned-list{display:grid;gap:6px;overflow:auto;min-height:0}
.i8w-ref-footer-note{margin-top:auto;padding-top:14px;border-top:1px solid #d7dde7;color:#475467;text-align:center;font-size:14px}
.i8w-ref-footer-note strong{font-size:20px;color:#1d4b89}
.i8w-ref-canvas-shell{height:100%;display:grid;grid-template-rows:auto 1fr;gap:10px;min-height:0}
.i8w-ref-canvas-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#f5f6f7;border:1px solid #d4dbe4;border-radius:4px;padding:10px 12px}
.i8w-ref-toolbar-left,.i8w-ref-toolbar-right{display:flex;gap:8px;align-items:center}
.i8w-tool-btn,.i8w-search-btn,.i8w-print-btn{height:40px;border:none;border-radius:4px;padding:0 16px;background:var(--i8w-blue);color:#fff;font-weight:700;cursor:pointer}
.i8w-tool-btn{min-width:52px;background:#fff;color:#0f172a;border:1px solid #cfd8e6}
.i8w-tool-btn.percent{min-width:74px}
.i8w-search-btn{background:#fff;color:#334155;border:1px solid #cfd8e6}
.i8w-p4-shell .reference-canvas{position:relative;background:#e6e7e9;border:1px solid #d2d8e1;border-radius:4px;overflow:hidden;padding:0;min-height:0}
.i8w-p4-shell .reference-stage{position:relative;width:100%;height:100%;background:#fff;border:1px solid #c9ced6;box-shadow:0 0 0 1px #e2e8f0 inset;overflow:hidden;transform-origin:center center;transform-box:fill-box}
.i8w-p4-map-layer,.i8w-p4-tables-layer{position:absolute;inset:0}
.i8w-p4-map-layer{background:#fff}
.i8w-p4-map-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;background:#fff;pointer-events:none}
.i8w-p4-tables-layer{z-index:2;position:absolute;inset:0;pointer-events:none}
.i8w-p4-shell .reference-tables-list{display:grid;gap:8px;overflow:auto;min-height:0;max-height:none;margin-top:14px}
.i8w-ref-warnings-title{margin-top:16px;margin-bottom:8px;font-size:16px;font-weight:700;color:#475467}
.i8w-p4-shell .warnings{overflow:auto;max-height:180px}
.i8w-p4-shell .warn-item{background:#fff6db;border:1px solid #f4d37d;padding:10px 12px;border-radius:4px}
.i8w-p4-shell .table-list-item{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid #d7dde7;border-radius:4px;padding:10px 12px}.i8w-p4-shell .table-list-item small,.i8w-p4-shell .muted{color:var(--i8w-muted)}
.i8w-p4-shell .inline-actions{display:flex;gap:6px;flex-wrap:wrap}.i8w-p4-shell .inline-actions button,.i8w-p4-shell .ghost-small{border:1px solid #d1d5db;background:#fff;border-radius:4px;padding:7px 9px;cursor:pointer}
/* "הסר/י" remove button — force readable, high-contrast text (was white-on-white) */
.i8w-p4-shell .ghost-small{color:#dc2626 !important;background:#fff !important;border-color:#fca5a5 !important;font-weight:700}
.i8w-p4-shell .ghost-small:hover{background:#fef2f2 !important}
.i8w-full-btn{width:100%;height:48px;font-size:18px;margin-bottom:10px}
.i8w-p4-shell .table-box{position:absolute;background:#b8bcc4;border:3px solid #efb341;border-radius:999px;padding:10px 10px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;box-shadow:0 6px 16px rgba(15,23,42,.12);transition:.18s box-shadow,.18s transform,.18s border-color;color:#fff;overflow:hidden;text-align:center}
.i8w-p4-shell .table-box:hover{box-shadow:0 10px 20px rgba(15,23,42,.16)}
.i8w-p4-shell .table-box.rect,.i8w-p4-shell .table-box.square{border-radius:18px}.i8w-p4-shell .table-box.vip{border-color:#efb341}.i8w-p4-shell .table-box.locked{box-shadow:0 0 0 4px rgba(59,130,246,.12),0 6px 16px rgba(15,23,42,.12)}.i8w-p4-shell .table-box.drop-target{box-shadow:0 0 0 5px rgba(34,197,94,.18),0 10px 20px rgba(34,197,94,.18);border-color:#22c55e}
.i8w-p4-shell .table-head{display:flex;justify-content:center;align-items:center;cursor:move;font-weight:800;gap:8px;color:#fff;background:transparent;padding:0;text-align:center;line-height:1.1;max-width:90%}
.i8w-p4-shell .table-head small{color:rgba(255,255,255,.92)}
.i8w-p4-shell .table-view-guests{border:none;background:rgba(255,255,255,.18);color:#fff;border-radius:999px;font-weight:700;cursor:pointer;max-width:88%;line-height:1.35;white-space:normal}
.i8w-p4-shell .table-flags{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;max-width:90%}.i8w-p4-shell .table-flags span{background:rgba(255,255,255,.24);color:#fff;padding:3px 8px;border-radius:999px}
.i8w-p4-shell .table-resizer{position:absolute;left:12px;bottom:12px;width:18px;height:18px;border-radius:4px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15);cursor:nwse-resize}
.i8w-p4-shell .seat-chip,.i8w-p4-shell .guest-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d8dee8;border-left:8px solid var(--guest-color,#5b8def);padding:12px 12px;border-radius:4px;cursor:grab;box-shadow:none}
.i8w-p4-shell .dot{width:12px;height:12px;border-radius:50%;background:var(--guest-color,#5b8def);display:inline-block;flex:0 0 auto}
.i8w-p4-shell .guest-chip .meta{display:grid;gap:3px;min-width:0}.i8w-p4-shell .guest-chip .meta strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}.i8w-p4-shell .guest-chip .meta small{color:var(--i8w-muted);font-size:13px}
.i8w-p4-shell .check-state{margin-inline-start:auto;background:#f3f4f6;color:#374151;padding:6px 10px;border-radius:999px;font-size:13px}.i8w-p4-shell .check-state.on{background:#dcfce7;color:#166534}
.i8w-p4-shell .bottom-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.i8w-p4-shell .bottom-head h3{margin:0;font-size:22px}
.i8w-p4-shell .checkin-list,.i8w-p4-shell .host-results{display:grid;gap:12px;max-height:calc(100vh - 180px);overflow:auto;padding-inline-end:4px}.i8w-p4-shell .list-row{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid #d8dee8;border-radius:4px;padding:12px}.i8w-p4-shell .row-side{display:grid;gap:8px;justify-items:end}.i8w-p4-shell .switch{display:flex;gap:8px;align-items:center}.i8w-p4-shell .host-card{background:#fff;border:1px solid #d8dee8;border-radius:4px;padding:16px}.i8w-p4-shell .host-table{margin-top:8px;font-size:22px;font-weight:800;color:var(--i8w-text)}
.i8w-no-select{user-select:none}
.i8w-p4-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1000000;display:flex;align-items:center;justify-content:center;padding:24px}
.i8w-p4-modal-card{background:#fff;border-radius:18px;box-shadow:0 25px 50px rgba(15,23,42,.25);width:min(680px,100%);max-height:90vh;overflow:auto;padding:22px}
.i8w-p4-shell .modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.i8w-p4-shell .modal-head h3{margin:0;font-size:26px}.i8w-p4-shell .modal-close{border:none;background:#eef2f7;width:42px;height:42px;border-radius:999px;font-size:26px;cursor:pointer}
.i8w-p4-shell .table-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.i8w-p4-shell .table-form label{display:grid;gap:8px;font-weight:700;color:#334155}.i8w-p4-shell .table-form .check-row{grid-column:1/-1;display:flex;align-items:center;gap:10px}.i8w-p4-shell .table-form .check-row input{width:auto;height:auto}.i8w-p4-shell .table-form .i8w-p4-shell .modal-actions{grid-column:1/-1}
.i8w-p4-shell .modal-actions{display:flex;justify-content:flex-start;gap:10px;margin-top:18px}
.i8w-p4-shell .table-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}.i8w-p4-shell .table-summary-grid>div{background:#f8fafc;border:1px solid #dbe3ef;border-radius:12px;padding:12px 14px}
.i8w-p4-shell .table-guests-list{display:grid;gap:10px}.i8w-p4-shell .table-guest-row{display:flex;align-items:center;gap:12px;border:1px solid #d8dee8;border-right:6px solid var(--guest-color,#5b8def);border-radius:12px;padding:12px 14px}.i8w-p4-shell .table-guest-row div{display:grid;gap:4px;flex:1}.i8w-p4-shell .table-guest-row small{color:var(--i8w-muted)}
@media (max-width: 1280px){.i8w-p4-shell .reference-layout{grid-template-columns:280px minmax(0,1fr) 300px}.i8w-p4-shell .top-stat{min-width:110px}}
/* R17: scoped with :not(.i8w-p4-tablet) exactly like the mobile-notice block above —
   phones keep this collapsed small-screen workspace, a tablet (portrait included) keeps
   the full desktop workspace layout. The declarations themselves are untouched. */
@media (max-width: 991px){
  .i8w-p4-shell:not(.i8w-p4-tablet) .reference-layout{grid-template-columns:1fr;height:auto;min-height:0}
  .i8w-p4-shell:not(.i8w-p4-tablet) .guests-side,.i8w-p4-shell:not(.i8w-p4-tablet) .tools-side{display:none}
  .i8w-p4-shell:not(.i8w-p4-tablet) .reference-canvas{min-height:55vw}
  .i8w-p4-shell:not(.i8w-p4-tablet) .i8w-p4-topbar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .i8w-p4-shell:not(.i8w-p4-tablet) .i8w-p4-topbar-center{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px}
  .i8w-p4-shell:not(.i8w-p4-tablet) .i8w-top-btn{height:36px;padding:0 10px;font-size:13px;white-space:nowrap}
  .i8w-p4-shell:not(.i8w-p4-tablet) .top-stat{min-width:auto;height:36px;padding:0 10px;font-size:12px}
  .i8w-p4-shell:not(.i8w-p4-tablet) .top-stat strong{font-size:20px}
  .i8w-p4-shell:not(.i8w-p4-tablet) .i8w-p4-panel{padding:8px}
  .i8w-p4-shell:not(.i8w-p4-tablet) .checkin-list,.i8w-p4-shell:not(.i8w-p4-tablet) .host-results{max-height:calc(100vh - 140px)}
  .i8w-p4-shell:not(.i8w-p4-tablet) .bottom-head h3{font-size:18px}
}
@media print{.i8w-p4-topbar,.guests-side,.tools-side,.i8w-ref-canvas-toolbar,.i8w-p4-modal{display:none!important}.i8w-p4-overlay{position:static!important}.i8w-p4-workspace{height:auto;width:auto;background:#fff}.i8w-p4-panel{display:block!important;padding:0}.i8w-p4-shell .reference-layout{grid-template-columns:1fr;height:auto}.i8w-p4-shell .reference-canvas,.i8w-p4-shell .reference-stage{border:none;box-shadow:none;background:#fff}}

.i8w-ref-canvas-toolbar{position:relative;z-index:4}
.i8w-top-btn.tab.active,.i8w-top-btn.active-view{box-shadow:inset 0 -3px 0 #ffffff;font-weight:800}

.i8w-p4-workspace.is-printing-host .i8w-p4-panel:not([data-panel="host"]),
.i8w-p4-workspace.is-printing-host .i8w-p4-topbar,
.i8w-p4-workspace.is-printing-host .i8w-p4-shell .bottom-head input,
.i8w-p4-workspace.is-printing-host .i8w-p4-shell .host-head-actions .i8w-btn{display:none !important}
.i8w-p4-workspace.is-printing-host .i8w-p4-panel[data-panel="host"]{display:block !important;padding:0}
.i8w-p4-workspace.is-printing-host .i8w-p4-shell .ref-list-card{border:none;box-shadow:none;background:#fff}
.i8w-p4-workspace.is-printing-board .i8w-p4-topbar,
.i8w-p4-workspace.is-printing-board .tools-side,
.i8w-p4-workspace.is-printing-board .guests-side,
.i8w-p4-workspace.is-printing-board .i8w-ref-canvas-toolbar{display:none !important}
.i8w-p4-workspace.is-printing-board .i8w-p4-panel[data-panel="board"]{display:block !important;padding:0}
.i8w-p4-workspace.is-printing-board .i8w-p4-shell .reference-layout{display:block;height:auto}
.i8w-p4-workspace.is-printing-board .i8w-p4-shell .reference-canvas{border:none;background:#fff;height:auto;min-height:0}
.i8w-p4-workspace.is-printing-board .i8w-p4-shell .reference-stage{border:none;box-shadow:none;transform:none !important;margin:0 auto}
.i8w-p4-workspace.is-printing-board .i8w-p4-shell .table-resizer,.i8w-p4-workspace.is-printing-board .i8w-p4-shell .entity-resize-handles,.i8w-p4-workspace.is-printing-board .i8w-p4-shell .table-view-guests{display:none !important}
.i8w-top-btn.tab.active{background:#2563eb !important;color:#fff !important;border:1px solid #1d4ed8}
.i8w-top-btn{border:1px solid rgba(255,255,255,.18)}
.i8w-top-btn:hover{background:rgba(255,255,255,.22)}
.i8w-p4-shell .host-head{align-items:flex-start}
.i8w-p4-shell .host-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:320px;max-width:520px;width:100%}
.i8w-p4-shell .host-head-actions input{flex:1}
.i8w-p4-shell .reference-canvas{background:#f1f5f9}
.i8w-p4-shell .reference-stage{display:flex;align-items:center;justify-content:center;background:#fff}
.i8w-p4-map-layer,.i8w-p4-tables-layer{inset:12px}
.i8w-p4-map-layer{display:flex;align-items:center;justify-content:center;overflow:visible}
.i8w-p4-map-layer img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;position:static}
.i8w-p4-tables-layer{overflow:visible}
.i8w-p4-shell .table-box{min-width:48px;min-height:40px}
.i8w-p4-shell .table-box .i8w-p4-shell .table-view-guests{display:inline-flex;align-items:center;justify-content:center;text-align:center}
.i8w-p4-shell .table-list-item .table-color-chip,.i8w-p4-shell .host-table-header .table-color-chip{width:14px;height:14px;border-radius:999px;display:inline-block;flex:0 0 auto}
.i8w-p4-shell .group-badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:52px;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#243b73;font-size:13px;font-weight:700;border:1px solid #dbe4ff}
.i8w-p4-shell .group-badge .group-symbol{font-size:13px;line-height:1}
.i8w-p4-shell .guest-chip .meta-top,.i8w-p4-shell .table-guest-row .meta-top,.i8w-p4-shell .host-guest-row .meta-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.i8w-p4-shell .table-guest-row,.i8w-p4-shell .host-guest-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #d8dee8;background:#fff;border-radius:8px;padding:12px 14px}
.i8w-p4-shell .table-guest-main,.i8w-p4-shell .host-guest-main{display:flex;align-items:center;gap:12px;min-width:0}
.i8w-p4-shell .table-guests-list,.i8w-p4-shell .host-groups{display:grid;gap:10px}
.i8w-p4-shell .host-group-card{border:1px solid #d8dee8;border-radius:10px;background:#fff;overflow:hidden}
.i8w-p4-shell .host-table-header{display:flex;align-items:center;gap:10px;padding:12px 14px;color:#0f172a;font-weight:800;border-bottom:1px solid rgba(255,255,255,.35)}
.i8w-p4-shell .host-table-header .i8w-p4-shell .table-print-btn{margin-inline-start:auto;background:#fff;color:#0f172a;border:1px solid rgba(15,23,42,.15);border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:700}
.i8w-p4-shell .host-table-guests{display:grid;gap:8px;padding:12px}
.i8w-p4-shell .modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.i8w-p4-shell .modal-close{background:#fff;border:1px solid #d1d5db;border-radius:8px;width:38px;height:38px;cursor:pointer;font-size:24px;line-height:1}
/* Guest popup header: keep "עריכת שולחן" beside the close button (top, no scroll) */
.i8w-p4-shell .modal-head-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.i8w-p4-shell .modal-head-edit{padding:9px 14px;font-size:14px;white-space:nowrap}
.i8w-p4-modal{position:fixed;inset:0;z-index:1000000;background:rgba(15,23,42,.36);display:flex;align-items:center;justify-content:center;padding:20px}
.i8w-p4-modal-card{width:min(1180px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:24px;box-shadow:0 20px 50px rgba(15,23,42,.28)}
.i8w-p4-shell .table-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.i8w-p4-shell .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
/* Table form: seat +/- stepper and reserve toggle */
.i8w-p4-shell .table-form .seat-stepper{display:inline-flex;align-items:center;gap:8px}
.i8w-p4-shell .table-form .seat-stepper input{width:96px;text-align:center}
.i8w-p4-shell .table-form .seat-step{width:36px;height:36px;flex:0 0 auto;border:1px solid #d8dee8;border-radius:9px;background:#f8fafc;color:#0f172a;font-size:21px;font-weight:800;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.i8w-p4-shell .table-form .seat-step:hover{background:#eef2ff;border-color:#c7d2fe}
.i8w-p4-shell .table-form .table-reserve-row{display:flex;flex-direction:row;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.i8w-p4-shell .table-form .table-reserve-row input{width:18px;height:18px;margin:0;flex:0 0 auto;cursor:pointer}
@media print{
  body *{visibility:hidden !important}
  .i8w-p4-workspace.is-printing-board, .i8w-p4-workspace.is-printing-board *, .i8w-p4-workspace.is-printing-host, .i8w-p4-workspace.is-printing-host *{visibility:visible !important}
  .i8w-p4-workspace.is-printing-board, .i8w-p4-workspace.is-printing-host{position:fixed;inset:0;background:#fff;height:auto;width:auto;overflow:visible}
}


.i8w-top-btn[data-action="refresh-guests"],.i8w-top-btn[data-action="print-board"],.i8w-top-btn[data-action="print-host"]{background:rgba(255,255,255,.18)}
.i8w-p4-shell .table-size-controls{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:3}
.i8w-p4-shell .table-size-btn{width:30px;height:30px;border:none;border-radius:999px;background:#ffffff;color:#0f172a;font-weight:900;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(15,23,42,.18);cursor:pointer}
.i8w-p4-shell .table-size-btn:hover{transform:translateY(-1px)}
.i8w-p4-shell .table-size-btn.shrink{font-size:24px}
.i8w-p4-shell .table-resizer{left:10px;bottom:10px;width:26px;height:26px;border-radius:8px;background:#fff;border:2px solid rgba(15,23,42,.14);box-shadow:0 4px 10px rgba(0,0,0,.18)}
.i8w-p4-shell .table-resizer::before{content:"↘";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#334155;font-size:14px;font-weight:700}
.i8w-search-btn{background:#2563eb;color:#fff;border:1px solid #1d4ed8}
.i8w-search-btn:hover{background:#1d4ed8}
.i8w-p4-map-layer img{display:block}

.i8w-board-ready-note{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:10px;background:#eef4ff;border:1px solid #c8d8fb;color:#244b88;font-weight:700;text-align:center}

/* v1.8.4 visual redesign closer to provided reference */
.i8w-p4-workspace{
  background:#f2f4f7;
  padding:14px;
  box-sizing:border-box;
  overflow:auto;
}
/* R16: the top bar is the primary action area again (the right control sidebar was removed),
   so it is shown in normal mode as a rounded floating card. Hostess mode keeps its own top-bar
   rule (higher specificity) below; the print rules re-hide it (the @media print line here beats
   this un-hide by source order, and the .is-printing-* rules beat it by specificity). */
.i8w-p4-topbar{display:flex !important;border-radius:14px;margin-bottom:14px;}
@media print{.i8w-p4-topbar{display:none !important;}}
.i8w-p4-panel.active{display:flex;flex-direction:column;height:auto;min-height:100%;padding:0;}
.i8w-p4-frame-head{
  display:grid;
  grid-template-columns:minmax(320px,auto) 1fr 260px;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.i8w-head-actions-left{display:flex;align-items:center;gap:12px;min-width:0;}
.i8w-head-reset,.i8w-head-exit{
  height:46px;border:none;border-radius:12px;background:linear-gradient(180deg,#3170ef,#255fe0);
  color:#fff;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 10px 20px rgba(37,95,224,.18);padding:0 16px;
}
.i8w-head-exit{background:linear-gradient(180deg,#3170ef,#255fe0);box-shadow:0 10px 20px rgba(37,95,224,.18);}
.i8w-head-title-wrap{text-align:center;}
.i8w-head-title{font-size:28px;font-weight:900;color:#1f3d7a;line-height:1.2}
.i8w-head-subtitle{margin-top:4px;color:#6b7280;font-size:18px;font-weight:700}
.i8w-head-status{
  justify-self:end;display:flex;align-items:center;gap:10px;background:#eefaf2;border:2px solid #b7e1c4;
  color:#117a37;padding:10px 16px;border-radius:18px;font-weight:800;white-space:nowrap;
}
.i8w-head-status::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:#18a34a;color:#fff;font-weight:900}
.i8w-head-status span{color:#6b7280;font-weight:700;font-size:14px}
/* R16: 2-column shell [ map | guests ] — the right control sidebar was removed and its actions
   moved to the top bar, so the map takes over that freed width. The guests column keeps its exact
   previous sizing; only the map got wider. Saved table coordinates are unaffected. */
.i8w-p4-board-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,11%);gap:14px;flex:1;min-height:0;align-items:stretch;padding-bottom:8px;}
.i8w-p4-main-stage{display:grid;grid-template-rows:minmax(0,1fr);gap:14px;min-height:0;}
.i8w-stage-card{min-height:0;}
.i8w-ref-canvas-shell.i8w-stage-card{gap:0;background:#fff;border:1px solid #d5dde8;border-radius:20px;padding:12px;box-shadow:0 8px 24px rgba(17,24,39,.06)}
.i8w-stage-toolbar{
  background:transparent;border:none;padding:0 0 10px;min-height:42px;
}
.i8w-ref-toolbar-left{gap:10px}
.i8w-tool-btn{
  width:40px;min-width:40px;height:40px;border-radius:12px;border:1px solid #d9e1ee;background:#fff;color:#475569;
  box-shadow:0 1px 2px rgba(15,23,42,.04);font-size:22px;font-weight:800;
}
.i8w-tool-btn.percent{width:auto;min-width:64px;font-size:14px}
.i8w-expand-btn{font-size:18px}
.i8w-board-ready-note{background:transparent;border:none;color:#344054;font-weight:700;padding:0}
/* The approved seat-colour key beside the drag hint. Which entries it holds is decided
   in PHP by the viewer's permission; the dots mirror the exact chair colours on this
   same board. Never on the hostess screen - its sketch legend already says it all. */
.i8w-p4-shell .i8w-board-key{display:inline-flex;align-items:center;gap:13px;margin-inline-start:12px;
	font-size:12.5px;font-weight:600;color:#475569;white-space:nowrap;}
.i8w-p4-shell .i8w-board-key i{width:10px;height:10px;border-radius:50%;display:inline-block;
	margin-inline-end:6px;vertical-align:-1px;}
.i8w-p4-shell .i8w-board-key .bk-free{background:#eef2f7;border:1px solid #b9c3d4;}
.i8w-p4-shell .i8w-board-key .bk-occ{background:#7e57c2;}
.i8w-p4-shell .i8w-board-key .bk-in{background:#16a34a;}
.i8w-p4-shell.i8w-hostess-only .i8w-board-key{display:none!important;}
.i8w-p4-shell .reference-canvas{
  background:#f7f8fb;border:1px solid #d9e0ea;border-radius:18px;padding:0;overflow:hidden;
}
.i8w-p4-shell .reference-stage{border:none;box-shadow:none;background:#fff;border-radius:16px;overflow:hidden}
.i8w-p4-map-layer,.i8w-p4-tables-layer{inset:0}
.i8w-p4-control-side,.i8w-p4-guests-side{min-height:0}
.i8w-control-card{height:100%;background:#f5f6f8;border:1px solid #d7dde7;border-radius:18px;padding:0;display:flex;flex-direction:column;overflow:auto}
.i8w-side-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #d7dde7;background:#eef2f7}
.i8w-side-tabs.is-single{grid-template-columns:1fr}
.i8w-side-tab{height:46px;border:none;background:transparent;font-weight:900;color:#6b7280;font-size:15px;cursor:default}
.i8w-side-tab.active{background:#fff;color:#2563eb;box-shadow:inset 0 -2px 0 #2563eb}
.i8w-side-section-title{padding:14px 14px 8px;color:#1f3d7a;font-size:15.5px;font-weight:900;text-align:center}
.i8w-side-action{
  margin:0 14px 8px;height:40px;border:none;border-radius:10px;background:#e5e7eb;color:#334155;font-weight:800;font-size:14px;
}
.i8w-side-action.primary{background:linear-gradient(180deg,#3170ef,#255fe0);color:#fff}
.i8w-side-action[disabled]{opacity:1;color:#334155}
.i8w-side-divider{height:1px;background:#d7dde7;margin:6px 14px}
.i8w-side-tables{padding:0 14px 6px;overflow:auto;min-height:88px;max-height:180px;margin-top:0}
.i8w-side-legend{display:grid;gap:8px;padding:4px 16px 8px;color:#475467;font-weight:700;font-size:13px}
.i8w-p4-shell .legend-dot{width:12px;height:12px;border-radius:999px;display:inline-block;margin-left:8px;vertical-align:middle}
.i8w-p4-shell .legend-dot.blue{background:#3b82f6}.i8w-p4-shell .legend-dot.gray{background:#9ca3af}.i8w-p4-shell .legend-dot.green{background:#6fcf97}
.i8w-ref-warnings-title{padding:6px 16px 4px;margin:0;color:#475467;font-size:14px}
.i8w-p4-shell .warnings{padding:0 14px 12px;max-height:none;overflow:auto}
.i8w-p4-shell .table-list-item{border-radius:12px;padding:10px;background:#fff;}
.i8w-p4-shell .table-list-item .i8w-p4-shell .inline-actions button{border-radius:8px}
.i8w-bottom-guests-panel{
  background:#fff;border:1px solid #d5dde8;border-radius:18px;padding:12px 14px;box-shadow:0 8px 24px rgba(17,24,39,.05);
  display:grid;grid-template-rows:auto 1fr auto;min-height:0;
}
.i8w-bottom-guests-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.i8w-filter-chip{height:40px;padding:0 18px;border:none;border-radius:12px;background:#e9f0ff;color:#255fe0;font-weight:900}
.i8w-bottom-search-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:1}
.i8w-bottom-count{font-weight:900;color:#1f3d7a;font-size:18px}
.i8w-bottom-count span{color:#475467}
.i8w-bottom-search-input{min-width:280px;max-width:360px;flex:1}
.i8w-bottom-search-input input{width:100%;height:42px;border:1px solid #d7dde7;border-radius:12px;padding:0 14px;background:#fff}
.i8w-bottom-guests-list{display:flex;gap:12px;overflow:auto;align-items:stretch;padding-bottom:4px}
.i8w-bottom-guests-list .i8w-p4-shell .guest-chip{min-width:140px;max-width:170px;flex-direction:column;justify-content:center;text-align:center;padding:12px 14px;border-radius:14px;border:1px solid #d8dee8;border-left:1px solid #d8dee8;box-shadow:0 4px 10px rgba(15,23,42,.04)}
.i8w-bottom-guests-list .i8w-p4-shell .dot{display:none}
.i8w-bottom-guests-list .meta-top{justify-content:center}
.i8w-bottom-guests-list .meta strong{white-space:normal;overflow:visible;text-overflow:unset}
.i8w-bottom-footer-note{margin-top:8px;padding-top:10px;border-top:1px solid #e5e7eb;text-align:center;font-size:14px}
.i8w-side-guests-panel{height:100%;padding:12px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.i8w-side-guests-head{display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch}
.i8w-side-search-wrap{display:grid;grid-template-columns:1fr;gap:10px;justify-content:stretch}
.i8w-side-search-input{min-width:0;max-width:none;flex:unset}
.i8w-side-search-input input{text-align:right}
.i8w-side-guests-list{display:flex;flex-direction:column;gap:10px;overflow:auto;padding-inline-end:4px;padding-bottom:0}
.i8w-side-guests-list .guest-chip{min-width:0;max-width:none;width:100%;flex-direction:row;justify-content:flex-start;text-align:right;padding:12px;border-radius:14px}
.i8w-side-guests-list .dot{display:inline-flex}
.i8w-side-guests-list .meta-top{justify-content:flex-start}
.i8w-side-guests-list .meta strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.i8w-p4-shell .table-box{
  border:none !important;background:#3b82f6 !important;color:#fff;box-shadow:0 12px 22px rgba(59,130,246,.22);padding:16px 14px 14px;
}
.i8w-p4-shell .table-box.round{border-radius:999px}
.i8w-p4-shell .table-box.round::before{
  content:"";position:absolute;inset:-10px;border-radius:999px;z-index:-1;
  background:
   radial-gradient(circle at 12% 24%, #3b82f6 0 12px, transparent 13px),
   radial-gradient(circle at 12% 50%, #3b82f6 0 12px, transparent 13px),
   radial-gradient(circle at 12% 76%, #3b82f6 0 12px, transparent 13px),
   radial-gradient(circle at 24% 12%, #3b82f6 0 12px, transparent 13px),
   radial-gradient(circle at 50% 10%, #3b82f6 0 12px, transparent 13px),
   radial-gradient(circle at 76% 12%, #3b82f6 0 12px, transparent 13px),
   radial-gradient(circle at 88% 24%, #3b82f6 0 12px, transparent 13px),
   radial-gradient(circle at 88% 50%, #3b82f6 0 12px, transparent 13px),
   radial-gradient(circle at 88% 76%, #3b82f6 0 12px, transparent 13px),
   radial-gradient(circle at 24% 88%, #3b82f6 0 12px, transparent 13px),
   radial-gradient(circle at 50% 90%, #3b82f6 0 12px, transparent 13px),
   radial-gradient(circle at 76% 88%, #3b82f6 0 12px, transparent 13px),
   #3b82f6;
  box-shadow:0 10px 18px rgba(59,130,246,.18);
}
.i8w-p4-shell .table-box.square,.i8w-p4-shell .table-box.rect{border-radius:18px}
.i8w-p4-shell .table-size-controls{top:8px;left:8px;gap:4px}
.i8w-p4-shell .table-size-btn,.i8w-p4-shell .table-resizer{display:none}
.i8w-p4-shell .table-head{font-weight:900;gap:2px;flex-direction:column;font-size:28px;line-height:1.05;max-width:100%}
.i8w-p4-shell .table-head small{font-size:.7em;color:#ffef5a;font-weight:900}
.i8w-p4-shell .table-head span{display:block}
.i8w-p4-shell .table-view-guests{background:transparent;padding:0;margin-top:0;color:#fff;font-weight:800;pointer-events:none}
.i8w-p4-shell .table-flags span{background:transparent;padding:0;font-size:22px;font-weight:800}
.i8w-p4-shell .table-box:hover{box-shadow:0 12px 22px rgba(126,87,194,.22)}

@media (max-width: 1400px){
  .i8w-p4-board-shell{grid-template-columns:minmax(0,1fr) minmax(210px,14%)}
}
@media (max-width: 1200px){
  .i8w-p4-board-shell{grid-template-columns:minmax(0,1fr) 240px}
  .i8w-head-title{font-size:24px}
}
.i8w-side-action.tab.active{background:#dbe8ff;color:#1d4ed8;box-shadow:inset 0 0 0 2px #bfd2ff}


/* v1.8.9 exact table style — table body colour: calm smoky blue-grey that harmonises with the
   light map background (replaces the earlier loud tone). Applied identically in normal and
   full-screen views. Visual only: seat count, seated guests, size, position and angle unchanged. */
.i8w-p4-shell .table-box.exact-style{
  background:#7e57c2 !important;
  border:none !important;
  color:#fff;
  box-shadow:none;
  padding:18px 18px 16px;
  justify-content:center;
  gap:10px;
  overflow:visible;
  z-index:2;
}
.i8w-p4-shell .table-box.exact-style.round{
  border-radius:26px;
}
.i8w-p4-shell .table-box.exact-style.round::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  background:#7e57c2;
  z-index:-1;
}
.i8w-p4-shell .table-box.exact-style.round::after{
  content:"";
  position:absolute;
  inset:-18px;
  z-index:-2;
  background:
    radial-gradient(circle at 16% 9%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 36% 8%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 56% 8%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 76% 9%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 91% 24%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 91% 44%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 91% 64%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 16% 91%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 36% 92%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 56% 92%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 76% 91%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 9% 24%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 9% 44%, #41a9e1 0 16px, transparent 17px),
    radial-gradient(circle at 9% 64%, #41a9e1 0 16px, transparent 17px);
}
.i8w-p4-shell .table-box.exact-style.square,
.i8w-p4-shell .table-box.exact-style.rect{border-radius:20px}
.i8w-p4-shell .table-box.exact-style .table-head{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:transparent;
  color:#fff;
  line-height:1;
  cursor:move;
}
.i8w-p4-shell .table-box.exact-style .table-no{
  display:block;
  font-weight:900;
  letter-spacing:.2px;
}
.i8w-p4-shell .table-box.exact-style .table-view-guests{
  border:none;
  background:transparent;
  color:#fff;
  border-radius:0;
  font-weight:900;
  cursor:pointer;
  padding:0;
  margin:0;
  pointer-events:none;
  max-width:none;
}
.i8w-p4-shell .table-box.exact-style .table-occ{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1;
  direction:ltr;
}
.i8w-p4-shell .table-box.exact-style .table-occ b{
  color:#ffee21;
  font-weight:900;
}
.i8w-p4-shell .table-box.exact-style .table-occ em,
.i8w-p4-shell .table-box.exact-style .table-occ strong{
  color:#fff;
  font-style:normal;
  font-weight:900;
}
.i8w-p4-shell .table-box.exact-style .table-flags{
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
}
.i8w-p4-shell .table-box.exact-style .table-flags span{
  background:transparent;
  color:#fff;
  padding:0;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Resize grip styled exactly like the hall-element resizer, but sitting OUTSIDE the
   table (just past its bottom-right corner) so it's always in clear space and grabbable
   at any size — including the minimum. The +/- buttons are hidden. */
.i8w-p4-shell .table-box.exact-style .table-size-controls{display:none !important}
.i8w-p4-shell .table-box.exact-style .table-resizer{display:block !important;position:absolute !important;left:auto !important;top:auto !important;right:-15px !important;bottom:-15px !important;width:18px;height:18px;border:none;border-radius:6px;background:rgba(255,255,255,.96);box-shadow:0 4px 12px rgba(15,23,42,.12);z-index:8 !important;cursor:nwse-resize;touch-action:none}
.i8w-p4-shell .table-box.exact-style .table-resizer::before{content:'↘';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#475569;font-weight:900}
/* Status markers floating ABOVE the table, clear of the chairs: reserve ( ! רזרבה )
   and full/locked ( lock icon ). Positioned above the seat ring, never on the table. */
.i8w-p4-shell .table-box.exact-style .table-badges{position:absolute;left:50%;bottom:calc(100% + 11px);top:auto;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:9;pointer-events:none}
.i8w-p4-shell .table-box.exact-style .table-badges-row{display:flex;flex-direction:row;align-items:center;gap:6px}
.i8w-p4-shell .table-badge-nick{max-width:190px;overflow:hidden;text-overflow:ellipsis;padding:0 11px;background:#ffffff;border:1px solid rgba(15,23,42,.08);color:#1e293b;font-size:12px;font-weight:800}
.i8w-p4-shell .table-badge{display:inline-flex;align-items:center;justify-content:center;height:22px;border-radius:999px;line-height:1;box-shadow:0 3px 9px rgba(15,23,42,.10);white-space:nowrap}
.i8w-p4-shell .table-badge-lock{width:22px;background:#f1f5f9;border:1px solid #e2e8f0;color:#475569}
.i8w-p4-shell .table-badge-lock svg{width:13px;height:13px;display:block}
.i8w-p4-shell .table-badge-reserve{gap:5px;padding:0 11px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:11.5px;font-weight:700;letter-spacing:.2px}
.i8w-p4-shell .table-badge-reserve .excl{color:#d97706;font-size:14px;font-weight:900;line-height:1}
.i8w-p4-shell .table-badge-full{gap:5px;padding:0 11px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;font-size:11.5px;font-weight:700;letter-spacing:.2px}
.i8w-p4-shell .table-badge-full svg{width:13px;height:13px;display:block}
.i8w-p4-shell .table-box.exact-style:hover{box-shadow:none}


/* dynamic seats by capacity */
.i8w-p4-shell .table-box.exact-style{
  background:#7e57c2 !important;
  border:none !important;
  color:#fff;
  box-shadow:none;
  padding:18px 18px 16px;
  justify-content:center;
  gap:10px;
  overflow:visible;
  z-index:2;
}
.i8w-p4-shell .table-box.exact-style.round{
  border-radius:26px;
}
.i8w-p4-shell .table-box.exact-style.round::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  background:#7e57c2;
  z-index:-1;
}
.i8w-p4-shell .table-box.exact-style.round::after{display:none !important}
.i8w-p4-shell .table-box.exact-style .table-core{
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  background:transparent;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0;
  box-sizing:border-box;
  box-shadow:none;
}
.i8w-p4-shell .table-box.exact-style.square .table-core,
.i8w-p4-shell .table-box.exact-style.rect .table-core{border-radius:inherit}
.i8w-p4-shell .table-seats-layer{position:absolute; inset:-8px; z-index:1; pointer-events:none}
.i8w-p4-shell .table-seat{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:999px;
  background:#eef2f7;
  border:2px solid #94a3b8;
  box-shadow:0 2px 5px rgba(15,23,42,.12);
  transform:translate(-50%,-50%);
}
.i8w-p4-shell .table-box.exact-style .table-head,
.i8w-p4-shell .table-box.exact-style .table-view-guests,
.i8w-p4-shell .table-box.exact-style .table-flags{position:relative; z-index:2}
.i8w-p4-shell .table-box.exact-style .table-head{max-width:90%}
.i8w-p4-shell .table-box.exact-style .table-flags span{max-width:100%}

.i8w-p4-shell .table-box{cursor:grab;touch-action:none}
.i8w-p4-shell .table-box.is-dragging{cursor:grabbing}


.i8w-hall-item{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:18px;border:2px solid #cfd9ea;background:linear-gradient(180deg,#ffffff,#eef4ff);box-shadow:0 10px 24px rgba(15,23,42,.08);color:#1e3a5f;font-weight:800;cursor:grab;user-select:none;padding:12px 14px;z-index:4;touch-action:none}
.i8w-hall-item.is-dragging{cursor:grabbing;box-shadow:0 16px 30px rgba(37,99,235,.18)}
.i8w-hall-item .hall-item-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;width:100%;height:100%}
.i8w-hall-item .hall-item-icon{pointer-events:none;font-size:20px;line-height:1;font-weight:900}
.i8w-hall-item .hall-item-label{pointer-events:none;line-height:1.15;font-size:16px}
.i8w-hall-item .hall-item-edit{position:absolute;top:6px;left:6px;width:28px;height:28px;border:none;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 4px 12px rgba(15,23,42,.12);font-weight:900;color:#334155;cursor:pointer}
.i8w-hall-item .hall-item-resizer{position:absolute;left:auto;top:auto;right:-15px;bottom:-15px;width:18px;height:18px;border:none;border-radius:6px;background:rgba(255,255,255,.96);box-shadow:0 4px 12px rgba(15,23,42,.12);z-index:8;cursor:nwse-resize;touch-action:none}
.i8w-hall-item .hall-item-resizer::before{content:'↘';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#475569;font-weight:900}
.i8w-hall-item.shape-square{border-radius:22px}
.i8w-hall-item.shape-pill{border-radius:999px}
.i8w-hall-item.shape-arch{border-radius:999px 999px 18px 18px}
.i8w-hall-item.shape-stage{border-radius:24px 24px 10px 10px}
.i8w-hall-item.type-bar{background:linear-gradient(180deg,#fff7ed,#ffedd5);border-color:#fdba74;color:#9a3412}
.i8w-hall-item.type-dancefloor{background:linear-gradient(180deg,#eff6ff,#dbeafe);border-color:#93c5fd;color:#1d4ed8}
.i8w-hall-item.type-restroom{background:linear-gradient(180deg,#f0fdf4,#dcfce7);border-color:#86efac;color:#15803d}
.i8w-hall-item.type-entrance{background:linear-gradient(180deg,#f5f3ff,#ede9fe);border-color:#c4b5fd;color:#6d28d9}
.i8w-hall-item.type-stage{background:linear-gradient(180deg,#fff1f2,#ffe4e6);border-color:#fda4af;color:#be123c}
.i8w-hall-item.type-custom{background:linear-gradient(180deg,#f8fafc,#eef2f7);border-color:#cbd5e1;color:#334155}
.i8w-hall-item.type-dancefloor .hall-item-icon{font-size:24px}
.i8w-hall-item.type-entrance .hall-item-icon{font-size:28px}
.i8w-hall-item.type-stage::after{content:'';position:absolute;left:12px;right:12px;bottom:10px;height:6px;border-radius:999px;background:rgba(190,24,93,.18);pointer-events:none}

.i8w-p4-shell .table-box{pointer-events:auto}
.i8w-p4-shell .hall-item-form .hall-item-size-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.i8w-p4-shell .i8w-btn.danger{background:#dc2626;color:#fff;border-color:#dc2626}

/* Fix3: the edit / duplicate / delete controls sit BELOW the element (never on top of it), centred to
   the element's width, with a small clear gap. When the element is close to the bottom of the map and
   there is no room beneath it, the JS adds .tools-above and they flip ABOVE as a fallback so they are
   never cut off by the map edge. The buttons, icons and their actions are unchanged. */
.i8w-p4-shell .entity-tools{position:absolute;top:calc(100% + var(--tools-gap,8px));left:50%;right:auto;transform:translateX(-50%);display:flex;flex-direction:row;gap:5px;z-index:8}
.i8w-p4-shell .entity-tools.tools-above{top:auto;bottom:calc(100% + var(--tools-gap,8px))}
.i8w-p4-shell .entity-tool-btn{width:28px;height:28px;padding:0;border:none;border-radius:999px;background:#ffffff;color:#0f172a;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(15,23,42,.30);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,box-shadow .12s}
.i8w-p4-shell .entity-tool-btn svg{width:15px;height:15px;display:block;pointer-events:none}
.i8w-p4-shell .entity-tool-btn.danger{background:#ffffff;color:#dc2626}
.i8w-p4-shell .entity-tool-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(15,23,42,.34)}
/* Tables: clear the chair ring — --handle-out (set per table by the JS) is the chairs' outward reach
   plus a clear gap, so the controls sit just beneath the chairs. Hall items use a small fixed gap. */
.i8w-p4-shell .table-tools{top:calc(100% + var(--handle-out,14px));right:auto}
.i8w-p4-shell .table-tools.tools-above{top:auto;bottom:calc(100% + var(--handle-out,14px))}
.i8w-p4-shell .hall-item-tools{top:calc(100% + 8px);right:auto}
.i8w-p4-shell .hall-item-tools.tools-above{top:auto;bottom:calc(100% + 8px)}
@media (max-width:768px){
  .i8w-p4-shell .entity-tool-btn{width:32px;height:32px}
  .i8w-p4-shell .entity-tool-btn svg{width:17px;height:17px}
}
.i8w-hall-item .hall-item-edit{display:none}

.i8w-p4-shell .modal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.i8w-p4-shell .modal-toolbar input[type="search"]{flex:1;min-width:260px;border:1px solid #d8dee8;border-radius:10px;padding:12px 14px;font-size:14px}
.i8w-p4-shell .modal-toolbar-note{font-size:13px;color:#166534;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:999px;padding:8px 12px}
.i8w-p4-shell .host-results-modal,.i8w-p4-shell .checkin-list-modal{max-height:calc(90vh - 200px)}
.i8w-p4-shell .host-results-modal .host-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.i8w-p4-shell .host-results-modal .host-group-card{min-width:0}
.i8w-p4-shell .host-results-modal .host-table-header{padding:10px 12px;gap:8px;flex-wrap:wrap}
.i8w-p4-shell .host-results-modal .host-table-guests{padding:10px;gap:6px}
.i8w-p4-shell .host-results-modal .host-guest-row{padding:10px 12px}
.i8w-p4-shell .host-results-modal .meta-top strong{font-size:15px}
.i8w-p4-shell .host-results-modal small{font-size:12px}
.i8w-p4-shell .guest-arrived-row{background:#f0fdf4;border-color:#bbf7d0}
.i8w-p4-shell .host-guest-row .check-state{margin-inline-start:0}
@media (max-width:1100px){.i8w-p4-shell .host-results-modal .host-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.i8w-p4-shell .host-results-modal .host-groups{grid-template-columns:1fr}.i8w-p4-modal-card{width:min(96vw,100%);padding:16px}}


.i8w-hostess-link-panel{grid-column:1 / -1;display:grid;gap:10px;background:#fff;border:1px solid #d8e1f0;border-radius:16px;padding:14px 16px;margin-bottom:14px;box-shadow:0 8px 24px rgba(17,24,39,.05)}
.i8w-hostess-link-label{font-weight:900;color:#1f3d7a}
.i8w-hostess-link-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.i8w-hostess-link-row input{height:42px;border:1px solid #d7dde7;border-radius:12px;padding:0 12px;background:#f8fafc;direction:ltr;text-align:left}
.i8w-hostess-link-note{font-size:13px;color:#64748b}
.i8w-p4-shell .checkin-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.i8w-p4-shell .checkin-group-guests{display:grid;gap:8px}
.i8w-p4-shell .checkin-head,.i8w-p4-shell .host-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.i8w-p4-shell .host-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.i8w-hostess-only .i8w-p4-launcher,.i8w-hostess-only .i8w-p4-frame-head,.i8w-hostess-only .i8w-p4-control-side,.i8w-hostess-only .i8w-p4-main-stage,.i8w-hostess-only .i8w-p4-guests-side,.i8w-hostess-only [data-panel='host'],.i8w-hostess-only [data-panel='board'],.i8w-hostess-only .i8w-top-btn.tab[data-tab='board'],.i8w-hostess-only .i8w-top-btn.tab[data-tab='host'],.i8w-hostess-only .i8w-top-btn[data-action='auto-arrange'],.i8w-hostess-only .i8w-top-btn[data-action='refresh-guests'],.i8w-hostess-only .i8w-top-btn[data-action='print-board'],.i8w-hostess-only .i8w-top-btn[data-action='print-host'],.i8w-hostess-only .i8w-top-btn[data-action='hostess-link-toggle'],.i8w-hostess-only .i8w-top-btn.danger,.i8w-hostess-only .i8w-top-btn[data-action='open-live-tables'],.i8w-hostess-only .i8w-top-btn.tab[data-tab='checkin'],.i8w-hostess-only .i8w-p4-topbar-center,.i8w-hostess-only .i8w-p4-header-card{display:none!important}
.i8w-hostess-only .i8w-p4-overlay{position:static;background:transparent;padding:0;display:block!important}
.i8w-hostess-only .i8w-p4-overlay[hidden]{display:block!important}
.i8w-hostess-only .i8w-p4-workspace{box-shadow:none;max-width:none;max-height:none;width:100%;height:auto;border-radius:0;padding:0;background:transparent}
.i8w-hostess-only .i8w-p4-topbar{display:flex!important;background:linear-gradient(135deg,#1e40af 0%,#4f46e5 55%,#7c3aed 100%);color:#fff;border-radius:20px;padding:16px 22px;margin-bottom:20px;box-shadow:0 8px 32px rgba(79,70,229,.22);font-family:'Rubik',Arial,sans-serif}
.i8w-hostess-only .i8w-p4-panel[data-panel='checkin']{display:block!important}
.i8w-hostess-only .bottom-card{min-height:calc(100vh - 180px)}
@media (max-width: 1100px){.i8w-p4-shell .checkin-groups{grid-template-columns:1fr}}

.i8w-hostess-link-panel--modal{margin:12px 0 14px;box-shadow:none;border-radius:14px}
.i8w-p4-shell .modal-toolbar .i8w-btn[data-action="hostess-link-toggle"]{white-space:nowrap}


.i8w-p4-shell .checkin-groups{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width: 1100px){.i8w-p4-shell .checkin-groups{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 720px){.i8w-p4-shell .checkin-groups{grid-template-columns:1fr;}}

/* ── Hostess topbar layout: one row, event name + stat pills ── */
/* R16: the base top bar is now a flex COLUMN (info row + actions row). In hostess mode the
   actions row is hidden and only the info block is shown, so force the bar back to a single
   row and let the info block span the full width (brand left, stats right). The close button
   that now lives in the stats zone is hidden here — hostess mode never had one. */
.i8w-hostess-only .i8w-p4-topbar{flex-direction:row;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.i8w-hostess-only .i8w-p4-topbar-info{flex:1 1 100%;width:100%}
.i8w-hostess-only .i8w-topbar-event-sub{display:none}
.i8w-hostess-only .i8w-tb-close{display:none!important}
.i8w-hostess-only .i8w-p4-topbar-actions{display:none!important}
.i8w-hostess-only .i8w-p4-topbar-brand{display:flex;align-items:center}
.i8w-hostess-only .i8w-topbar-event-name{font-family:'Rubik',Arial,sans-serif;font-size:22px;font-weight:900;color:#fff;letter-spacing:-0.01em}
.i8w-hostess-only .i8w-p4-topbar-stats{display:flex!important;align-items:center;gap:12px;width:auto!important}
.i8w-hostess-only .i8w-hostess-top-summary{display:flex;align-items:center;gap:10px}
.i8w-hostess-only .i8w-hostess-event-title{display:none!important}
.i8w-hostess-only .i8w-hostess-top-stats-grid{display:flex;gap:10px}
.i8w-hostess-only .top-stat.hostess-stat{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:10px 18px;min-height:auto;display:flex;flex-direction:row;align-items:center;gap:10px;color:#fff;box-shadow:none}
.i8w-hostess-only .top-stat.hostess-stat strong{font-size:26px;line-height:1;font-weight:900;color:#fff}
.i8w-hostess-only .top-stat.hostess-stat span{font-size:13px;font-weight:700;color:rgba(255,255,255,.88)}

/* ── Checkin panel ── */
.i8w-hostess-only .ref-list-card{background:transparent;border:none;box-shadow:none;padding:0}
.i8w-hostess-only .bottom-head{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:16px;align-items:center;margin-bottom:22px}
.i8w-hostess-only .bottom-head h3{margin:0;font-size:26px;color:#0f172a;font-weight:900;font-family:'Rubik',Arial,sans-serif;letter-spacing:-0.01em}
.i8w-hostess-only .bottom-head input[type="search"]{height:50px;border:1px solid rgba(99,102,241,.2);border-radius:18px;padding:0 18px;background:#fff;box-shadow:0 2px 8px rgba(99,102,241,.07);font-family:'Rubik',Arial,sans-serif;font-size:15px}
.i8w-hostess-only .checkin-list{max-height:none;overflow:visible;padding-inline-end:0}
.i8w-hostess-only .hostess-checkin-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:stretch}

/* ── Guest card ── */
.i8w-hostess-only .hostess-checkin-card{background:#fff;border:1px solid rgba(99,102,241,.12);border-radius:18px;padding:16px;display:grid;gap:12px;align-content:space-between;min-height:170px;box-shadow:0 4px 18px rgba(99,102,241,.09);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;position:relative;overflow:hidden}
.i8w-hostess-only .hostess-checkin-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(99,102,241,.16)}
.i8w-hostess-only .hostess-checkin-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4f46e5,#7c3aed);border-radius:18px 18px 0 0}
.i8w-hostess-only .hostess-checkin-main{display:grid;gap:8px;min-width:0}
.i8w-hostess-only .hostess-checkin-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.i8w-hostess-only .hostess-checkin-name-row strong{font-size:16px;color:#0f172a;font-weight:800;font-family:'Rubik',Arial,sans-serif}
.i8w-hostess-only .hostess-checkin-meta{font-size:13px;color:#64748b;line-height:1.5;word-break:break-word}
.i8w-hostess-only .hostess-checkin-switch{justify-content:space-between;border-top:1px solid rgba(99,102,241,.08);padding-top:10px}

/* ── Check-in list groups: confirmed first, then every other record with its live RSVP status ── */
.checkin-group-title{font-size:15px;font-weight:800;color:#0f172a;margin:6px 0 10px;font-family:'Rubik',Arial,sans-serif}
.checkin-group-title--others{margin-top:18px;padding-top:14px;border-top:1px dashed rgba(99,102,241,.25)}
.checkin-rsvp-badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:18px;white-space:nowrap}
.checkin-rsvp-badge.is-coming{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.checkin-rsvp-badge.is-other{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}

/* ── Responsive ── */
@media (max-width: 1280px){.i8w-hostess-only .hostess-checkin-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width: 1100px){.i8w-hostess-only .hostess-checkin-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width: 820px){.i8w-hostess-only .hostess-checkin-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.i8w-hostess-only .bottom-head{grid-template-columns:1fr;}}
@media (max-width: 560px){.i8w-hostess-only .hostess-checkin-grid{grid-template-columns:1fr;}.i8w-hostess-only .i8w-p4-topbar-stats{flex-wrap:wrap;}}

/* ── Arrived = solid light green card ── */
.i8w-hostess-only .hostess-checkin-card.guest-arrived-row{background:#dcfce7!important;border-color:#86efac!important;box-shadow:0 4px 14px rgba(34,197,94,.15)}
.i8w-hostess-only .hostess-checkin-card.guest-arrived-row:hover{box-shadow:0 10px 24px rgba(34,197,94,.22)}
.i8w-hostess-only .hostess-checkin-card.guest-arrived-row::before{background:linear-gradient(90deg,#16a34a,#22c55e)}
.i8w-hostess-only .hostess-checkin-card.guest-arrived-row strong,.i8w-hostess-only .hostess-checkin-card.guest-arrived-row .hostess-checkin-meta,.i8w-hostess-only .hostess-checkin-card.guest-arrived-row .check-state{color:#166534}
@media (max-width: 560px){.i8w-hostess-only .i8w-p4-topbar{flex-direction:column;align-items:flex-start;}}

@media (max-width: 1180px){
  .i8w-p4-frame-head{grid-template-columns:1fr;justify-items:stretch;}
  .i8w-head-actions-left{order:2;justify-content:center;flex-wrap:wrap;}
  .i8w-head-title-wrap{order:1;}
  .i8w-head-status{order:3;justify-self:center;}
}

@media (max-height: 900px){
  .i8w-p4-workspace{padding:10px;}
  .i8w-p4-frame-head{margin-bottom:8px;gap:10px;}
  .i8w-head-title{font-size:24px;}
  .i8w-head-subtitle{font-size:16px;}
  .i8w-side-action{height:38px;margin-bottom:6px;font-size:13px;}
  .i8w-side-section-title{padding-top:10px;}
  .i8w-side-tables{max-height:140px;}
}


.i8w-p4-shell .checkin-list-modal--hostess{max-height:calc(90vh - 220px);overflow:auto;padding-inline-end:4px}
.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch}
.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-card{background:#fff;border:1px solid #d8dee8;border-radius:16px;padding:14px;display:grid;gap:12px;align-content:space-between;min-height:170px;box-shadow:0 10px 24px rgba(15,23,42,.06);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-main{display:grid;gap:8px;min-width:0}
.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-name-row strong{font-size:16px;color:#0f172a}
.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-meta{font-size:13px;color:#64748b;line-height:1.5;word-break:break-word}
.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-switch{justify-content:space-between;border-top:1px solid #eef2f7;padding-top:10px}
.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-card.guest-arrived-row{background:linear-gradient(180deg,#f0fdf4 0%,#dcfce7 100%);border-color:#22c55e;box-shadow:0 12px 28px rgba(34,197,94,.18)}
.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-card.guest-arrived-row strong,.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-card.guest-arrived-row .hostess-checkin-meta,.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-card.guest-arrived-row .check-state{color:#166534}
@media (max-width: 1280px){.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width: 1100px){.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width: 820px){.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 560px){.i8w-p4-shell .checkin-list-modal--hostess .hostess-checkin-grid{grid-template-columns:1fr;}}

.i8w-p4-shell .special-meal-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:#fff7ed;color:#9a3412;font-size:11px;font-weight:700;border:1px solid #fed7aa}
.i8w-p4-shell .special-meal-badge--vegetarian{background:#ecfdf5;color:#166534;border-color:#bbf7d0}
.i8w-p4-shell .special-meal-badge--vegan{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.i8w-p4-shell .special-meal-badge--gluten_free{background:#fef3c7;color:#92400e;border-color:#fde68a}
.i8w-p4-shell .special-meal-badge--kids{background:#fdf2f8;color:#be185d;border-color:#fbcfe8}
.i8w-p4-shell .special-meal-summary{margin-top:4px;font-size:12px;color:#9a3412;font-weight:700}
.i8w-p4-shell .guest-chip .special-meal-summary,.i8w-p4-shell .table-guest-row .special-meal-summary,.i8w-p4-shell .host-guest-row .special-meal-summary{line-height:1.35}

/* =========================================================
   Infinity8Web FIX v1.8.24 - Hall map full screen / full canvas
   Ensures uploaded hall map fills the entire seating canvas instead
   of staying at its original small image dimensions.
   ========================================================= */
.i8w-p4-shell .reference-canvas{
  width:100% !important;
  height:calc(100vh - 175px) !important;
  min-height:720px !important;
  overflow:hidden !important;
}

.i8w-p4-shell .reference-stage{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  display:block !important;
  margin:0 auto !important;
}

.i8w-p4-shell .i8w-p4-map-layer,
.i8w-p4-shell .i8w-p4-tables-layer{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

.i8w-p4-shell .i8w-p4-map-layer{
  display:block !important;
  overflow:hidden !important;
  background:#fff !important;
}

.i8w-p4-shell .i8w-p4-map-layer img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}

/* Keep the board comfortable on shorter screens */
@media (max-height: 900px){
  .i8w-p4-shell .reference-canvas{
    height:calc(100vh - 145px) !important;
    min-height:560px !important;
  }
}

/* =========================================================
   Infinity8Web FIX v1.8.25 - Guests grouping in seating
   Only group color affects guest cards; no random per-guest color/shape.
   ========================================================= */
.i8w-p4-shell .guest-chip,
.i8w-p4-shell .seat-chip{
  border-left:1px solid #d8dee8 !important;
  border-right:1px solid #d8dee8 !important;
  border-radius:14px !important;
  background:#fff !important;
}
.i8w-p4-shell .guest-chip.has-group-color,
.i8w-p4-shell .seat-chip.has-group-color{
  border-right:8px solid var(--guest-color) !important;
  border-left:1px solid #d8dee8 !important;
  background:linear-gradient(90deg, #fff 0%, #fff 78%, color-mix(in srgb, var(--guest-color) 12%, #fff) 100%) !important;
}
.i8w-p4-shell .guest-chip.no-group-color .dot,
.i8w-p4-shell .seat-chip.no-group-color .dot{
  background:#cbd5e1 !important;
}
.i8w-p4-shell .guest-chip.has-group-color .dot,
.i8w-p4-shell .seat-chip.has-group-color .dot{
  background:var(--guest-color) !important;
}
.i8w-p4-shell .group-badge{
  border-color:#e2e8f0;
  color:#475569;
  background:#f8fafc;
  gap:6px;
}
.i8w-p4-shell .group-badge--plain{
  min-width:auto;
}
.i8w-p4-shell .group-badge--group span:first-child{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.i8w-side-guests-list .guest-chip,
.i8w-bottom-guests-list .guest-chip{
  width:100%;
}

.i8w-p4-shell .guest-meal-details{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;line-height:1.35;color:#475569;font-weight:600}
.i8w-p4-shell .guest-meal-details b{color:#0f172a;font-weight:900}
.i8w-p4-shell .guest-chip .guest-meal-details{max-width:220px}


/* Live Table Arrangement - added without changing existing layout */
.i8w-head-live{border:1px solid #93c5fd;background:#dbeafe;color:#1d4ed8;border-radius:0;padding:14px 22px;font-weight:900;cursor:pointer;margin-inline-start:8px}
.i8w-live-layout{height:100%;padding:18px;background:#f8fafc;overflow:auto;direction:rtl;color:#0f172a}
.i8w-live-head{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid #dbe4ee;border-radius:18px;padding:18px 22px;margin-bottom:14px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.i8w-live-head h3{margin:0 0 6px;font-size:24px;font-weight:900;color:#0f2a5f}.i8w-live-head p{margin:0;color:#64748b;font-weight:700}.i8w-live-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.i8w-btn.ghost{background:#fff;color:#1d4ed8;border:1px solid #bfdbfe}.i8w-btn.small{padding:8px 12px;font-size:12px}
.i8w-live-stats{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px;margin-bottom:14px}.i8w-live-stats>div{background:#fff;border:1px solid #dbe4ee;border-radius:16px;padding:14px;text-align:center;box-shadow:0 8px 22px rgba(15,23,42,.05)}.i8w-live-stats strong{display:block;font-size:28px;color:#1d4ed8}.i8w-live-stats span{font-weight:800;color:#64748b}
.i8w-live-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}.i8w-live-map-card,.i8w-live-recommendations{background:#fff;border:1px solid #dbe4ee;border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,.06)}.i8w-live-map-head{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid #e2e8f0;font-weight:900}.i8w-live-map-head span{font-size:12px;color:#64748b}.legend{width:12px;height:12px;border-radius:99px;display:inline-block;vertical-align:middle;margin-left:4px}.legend.arrived{background:#22c55e}.legend.pending{background:#cbd5e1}
.i8w-live-canvas{height:620px;overflow:auto;background:#f8fafc;border-radius:0 0 18px 18px;position:relative}.i8w-live-stage{position:relative;min-width:1100px;min-height:720px;transform-origin:top right}.i8w-live-table{position:absolute;border:2px solid #38bdf8;background:#e0f2fe;border-radius:28px;box-shadow:0 12px 24px rgba(14,165,233,.16)}.i8w-live-table.round{border-radius:999px}.i8w-live-table.square{border-radius:24px}.live-table-seats{position:absolute;inset:0;pointer-events:none}.live-seat{position:absolute;width:16px;height:16px;border-radius:999px;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(15,23,42,.18)}.live-seat.arrived{background:#22c55e}.live-seat.pending{background:#cbd5e1}.live-seat.empty{background:#f8fafc;border-color:#cbd5e1}.live-table-core{position:absolute;inset:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:900;color:#fff;text-shadow:0 1px 1px rgba(15,23,42,.18)}.live-table-core b{font-size:24px}.live-table-core span{font-size:18px;color:#fef08a}.live-table-core small{font-size:10px;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i8w-live-recommendations{padding:16px;min-height:220px}.i8w-live-recommendations h4{margin:0 0 12px;font-size:18px;color:#0f2a5f}.i8w-live-rec{border:1px solid #dbeafe;background:#eff6ff;border-radius:14px;padding:12px;margin-bottom:10px}.i8w-live-rec .rec-title{font-weight:900;color:#1e3a8a;margin-bottom:8px}.rec-lines{display:grid;gap:4px;color:#334155;font-weight:700;font-size:13px;margin-bottom:10px}.i8w-live-empty{display:grid;gap:8px;color:#64748b}.i8w-live-empty strong{color:#0f172a}.i8w-live-modal-list{display:grid;gap:12px;max-height:60vh;overflow:auto}.i8w-live-modal-list section{border:1px solid #e2e8f0;border-radius:12px;padding:12px}.i8w-live-modal-list h4{margin:0 0 8px;color:#1e3a8a}
@media(max-width:1200px){.i8w-live-body{grid-template-columns:1fr}.i8w-live-stats{grid-template-columns:repeat(2,1fr)}}


/* v1.8.32 live recommendations clarity/history/link - scoped only */
.i8w-p4-shell .i8w-chuppah-status{display:inline-flex;margin-top:10px;padding:7px 12px;border-radius:999px;background:#f1f5f9;color:#475569;font-weight:900;font-size:13px;border:1px solid #e2e8f0}
.i8w-p4-shell .i8w-chuppah-status.is-active{background:#dcfce7;color:#166534;border-color:#86efac}
.i8w-p4-shell .i8w-live-rec-transfer{display:grid;gap:10px;background:#fff;border:1px solid #bfdbfe;border-radius:12px;padding:10px;margin:8px 0}
.i8w-p4-shell .i8w-live-rec-transfer>strong{color:#0f2a5f;font-size:14px;line-height:1.45}
.i8w-p4-shell .i8w-live-rec-guests{display:grid;gap:8px;max-height:260px;overflow:auto;padding-inline-end:3px}
.i8w-p4-shell .i8w-live-rec-guests .guest-chip{width:100%;background:#f8fafc}
.i8w-p4-shell .i8w-live-rec-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.i8w-p4-shell .i8w-live-history-list{display:grid;gap:10px;max-height:60vh;overflow:auto;padding-top:8px}
.i8w-p4-shell .i8w-live-history-item{border:1px solid #e2e8f0;background:#fff;border-radius:12px;padding:12px;display:grid;gap:6px}
.i8w-p4-shell .i8w-live-history-item small{color:#64748b;font-weight:700}


/* Live arrangement enhancements */
.i8w-live-canvas{height:calc(100vh - 220px);overflow:auto;display:flex;align-items:flex-start;justify-content:center}
.i8w-live-stage{max-width:100%;max-height:100%;transform:scale(0.9)}
.i8w-live-table.inactive{border-color:#94a3b8 !important;background:#e5e7eb !important;opacity:.55;filter:grayscale(100%)}
.i8w-live-table.inactive .live-table-core{color:#64748b}

/* v1.8.35 live displacement + direct live link fixes */
.i8w-p4-shell .guest-chip.needs-seating{border-color:#fb923c!important;background:#fff7ed!important;box-shadow:0 0 0 2px rgba(251,146,60,.18)}
.i8w-p4-shell .guest-chip.needs-seating .check-state.on{background:#fed7aa;color:#9a3412;border-color:#fdba74}

/* =========================================================
   v1.9.0 – Elegant Table & Element Styling
   Matches the reference image exactly.
   Only visual overrides — no logic changes.
   ========================================================= */

/* ── Tables ──────────────────────────────────────────────── */

/* Base table: teal gradient, round for round shape */
.i8w-p4-shell .table-box.exact-style {
  background: linear-gradient(145deg,#3dd6e8,#18b8cc) !important;
  box-shadow: 0 10px 30px rgba(24,184,204,.30), 0 2px 8px rgba(15,23,42,.10) !important;
  border: none !important;
  overflow: visible !important;
}
.i8w-p4-shell .table-box.exact-style:hover {
  box-shadow: 0 12px 30px rgba(126,87,194,.34), 0 4px 10px rgba(15,23,42,.12) !important;
  /* R5-3: do NOT set a transform on hover. This rule used to force
     `transform: translateY(-2px) !important`, which (being !important) overrode the table's
     inline `transform: rotate(...)` — so hovering a rotated table snapped it back to 0°.
     Removing it lets the rotation persist on hover / focus / selection / drag. */
}

/* Round tables: perfect circle */
.i8w-p4-shell .table-box.exact-style.round {
  border-radius: 999px !important;
}
.i8w-p4-shell .table-box.exact-style.round::before,
.i8w-p4-shell .table-box.exact-style.round::after {
  display: none !important;
}

/* Square / rect tables */
.i8w-p4-shell .table-box.exact-style.square {
  border-radius: 22px !important;
}
.i8w-p4-shell .table-box.exact-style.rect {
  border-radius: 18px !important;
}
.i8w-p4-shell .table-box.exact-style.square::before,
.i8w-p4-shell .table-box.exact-style.rect::before {
  display: none !important;
}

/* Seats layer: fix inset to match JS SEAT_R = 11 */
.i8w-p4-shell .table-seats-layer {
  inset: var(--seats-inset, -11px) !important;
  overflow: visible !important;
}

/* Chair-shaped seats: a small top-view chair = backrest (outer) + seat cushion (inner). The
   footprint (--seat-w × --seat-h) and facing angle (--seat-rot) are set inline by the JS; the
   chair is centred on the table perimeter, nudged slightly outward, and rotated so it faces the
   table centre (and it turns together with the table when the table is rotated). Purely visual:
   the seat COUNT, the seated guests and the table body are all unchanged. Empty = white cushion +
   purple outline; occupied = filled purple cushion; arrived = green. */
.i8w-p4-shell .table-seat {
  --chair-col: #7e57c2;
  width: var(--seat-w, 12px) !important;
  height: var(--seat-h, 11px) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) rotate(var(--seat-rot, 0deg)) translateY(-44%) !important;
  transform-origin: center !important;
  pointer-events: none;
}
.i8w-p4-shell .table-seat .ch-back,
.i8w-p4-shell .table-seat .ch-seat {
  position: absolute;
  box-sizing: border-box;
  display: block;
  /* R14: no fixed-px drop-shadow. At the small chair size the 1px shadow inflated the chair on the map
     (it added ~2px of halo) so the reduction wasn't visible even though --seat-w had shrunk. Removing it
     lets the chair's on-screen size track --seat-w / --seat-h exactly. */
}
.i8w-p4-shell .table-seat .ch-back {
  top: 0; left: 10%; right: 10%; height: 36%;
  border-radius: 40% 40% 20% 20%;   /* R14: relative radii so the corners scale WITH the chair, not fixed px */
  background: var(--chair-col);
}
.i8w-p4-shell .table-seat .ch-seat {
  top: 28%; left: 0; right: 0; bottom: 0;
  border-radius: 20% 20% 40% 40%;
  background: #ffffff;
  border: 0.4px solid var(--chair-col);
}
.i8w-p4-shell .table-seat.seat-empty    { --chair-col: #7e57c2; }
.i8w-p4-shell .table-seat.seat-empty    .ch-seat { background: #ffffff; }
.i8w-p4-shell .table-seat.seat-occupied { --chair-col: #7e57c2; }
.i8w-p4-shell .table-seat.seat-occupied .ch-seat { background: #7e57c2; }
.i8w-p4-shell .table-seat.seat-arrived  { --chair-col: #16a34a; }
.i8w-p4-shell .table-seat.seat-arrived  .ch-seat { background: #dcfce7; }

/* Table core typography */
.i8w-p4-shell .table-box.exact-style .table-core {
  position: relative;
  z-index: 2;
  gap: 4px !important;
}
/* Line 2: table number, e.g. "שולחן 12" */
.i8w-p4-shell .table-box.exact-style .table-no {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  text-shadow: 0 1px 4px rgba(15,23,42,.18) !important;
  white-space: nowrap;
  overflow: visible;
}
/* Line 1 (headline): capacity, e.g. 8/10 */
.i8w-p4-shell .table-box.exact-style .table-occ {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,.92) !important;
  line-height: 1 !important;
}
/* "X/Y" — both numbers and the slash share one identical size & weight */
.i8w-p4-shell .table-box.exact-style .table-occ b,
.i8w-p4-shell .table-box.exact-style .table-occ em,
.i8w-p4-shell .table-box.exact-style .table-occ strong {
  font-size: 18px !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 1 !important;
}
.i8w-p4-shell .table-box.exact-style .table-occ b {
  color: #fff176 !important;
}
.i8w-p4-shell .table-box.exact-style .table-occ em,
.i8w-p4-shell .table-box.exact-style .table-occ strong {
  color: rgba(255,255,255,.90) !important;
}
/* Line 3: nickname, e.g. משפחת כהן — larger & bolder for quick scanning */
.i8w-p4-shell .table-box.exact-style .table-nick {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(15,23,42,.20) !important;
  max-width: 96%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fully-seated table: amber glow */
.i8w-p4-shell .table-box.exact-style.table-full {
  background: linear-gradient(145deg,#ffa726,#fb8c00) !important;
  box-shadow: 0 10px 30px rgba(251,140,0,.30) !important;
}

/* Reserve table (שולחן רזרבה): SAME design as a normal table, just gently faded /
   slightly less saturated so it reads as a reserve at a glance — never dark or
   "switched off". Visual only — the table behaves like any other table. */
.i8w-p4-shell .table-box.exact-style.table-reserve {
  opacity: .9 !important;
}

/* ── Hall elements (stage, dance floor, bar …) ───────────── */

.i8w-hall-item {
  border-radius: 22px !important;
  border: 2.5px solid rgba(255,255,255,.60) !important;
  box-shadow: 0 12px 32px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06) !important;
  transition: box-shadow .18s, transform .18s !important;
}
.i8w-hall-item:hover {
  box-shadow: 0 18px 40px rgba(15,23,42,.20) !important;
  transform: translateY(-2px) !important;
}
.i8w-hall-item .hall-item-body {
  background: transparent !important;
  gap: 10px !important;
}
.i8w-hall-item .hall-item-icon {
  font-size: 28px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 1px 3px rgba(15,23,42,.20)) !important;
}
.i8w-hall-item .hall-item-label {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  line-height: 1.2 !important;
}

/* Stage / chuppah — salmon-pink arch */
.i8w-hall-item.type-stage {
  background: linear-gradient(145deg,#ff8a80,#f4576a) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
}
.i8w-hall-item.type-stage .hall-item-icon,
.i8w-hall-item.type-stage .hall-item-label { color: #fff !important; }
.i8w-hall-item.type-stage::after { display: none !important; }

/* Dance floor — vivid blue */
.i8w-hall-item.type-dancefloor {
  background: linear-gradient(145deg,#64b5f6,#1e88e5) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
}
.i8w-hall-item.type-dancefloor .hall-item-icon,
.i8w-hall-item.type-dancefloor .hall-item-label { color: #fff !important; }

/* Bar — warm amber */
.i8w-hall-item.type-bar {
  background: linear-gradient(145deg,#ffca28,#fb8c00) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
}
.i8w-hall-item.type-bar .hall-item-icon,
.i8w-hall-item.type-bar .hall-item-label { color: #fff !important; }

/* Entrance — purple */
.i8w-hall-item.type-entrance {
  background: linear-gradient(145deg,#b39ddb,#7e57c2) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
}
.i8w-hall-item.type-entrance .hall-item-icon,
.i8w-hall-item.type-entrance .hall-item-label { color: #fff !important; }

/* Restroom — teal-green */
.i8w-hall-item.type-restroom {
  background: linear-gradient(145deg,#4db6ac,#00897b) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
}
.i8w-hall-item.type-restroom .hall-item-icon,
.i8w-hall-item.type-restroom .hall-item-label { color: #fff !important; }

/* Custom — light slate */
.i8w-hall-item.type-custom {
  background: linear-gradient(145deg,#ecf0f6,#dbe4ee) !important;
  border-color: rgba(203,213,225,.80) !important;
  color: #334155 !important;
}
.i8w-hall-item.type-custom .hall-item-icon,
.i8w-hall-item.type-custom .hall-item-label { color: #334155 !important; }

/* Shape adjustments */
.i8w-hall-item.shape-pill  { border-radius: 999px !important; }
.i8w-hall-item.shape-square{ border-radius: 22px  !important; }
.i8w-hall-item.shape-arch  { border-radius: 999px 999px 20px 20px !important; }
.i8w-hall-item.shape-stage { border-radius: 26px  26px  12px  12px !important; }

/* Live seating — waiting area */
.i8w-live-waiting {
  margin-top: 18px;
  background: #fff8f0;
  border: 1.5px solid #fed7aa;
  border-radius: 12px;
  padding: 14px 16px;
}
.i8w-live-waiting h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #c2410c;
}
.i8w-live-waiting-note {
  font-size: 12px;
  color: #92400e;
  margin-bottom: 10px;
}
.i8w-live-waiting-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Live seating — recommendation note */
.i8w-live-rec-note {
  font-size: 12px;
  color: #92400e;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  padding: 5px 10px;
  margin: 6px 0;
}

/* Live seating — floating alert */
.i8w-live-alert {
  position: fixed;
  top: 20px;
  right: 50%;
  transform: translateX(50%);
  z-index: 99999;
  background: #dc2626;
  color: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  font-size: 15px;
  font-weight: 700;
  max-width: 480px;
  animation: i8w-live-alert-in .25s ease;
}
.i8w-live-alert button {
  background: rgba(255,255,255,.25);
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 16px;
  flex-shrink: 0;
}
.i8w-live-alert button:hover { background: rgba(255,255,255,.4); }
@keyframes i8w-live-alert-in {
  from { opacity: 0; transform: translateX(50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(50%) translateY(0); }
}

/* Live seating — add table guest selector */
.i8w-live-guest-select-section {
  margin-top: 12px;
}
.i8w-live-guest-select-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  margin-top: 6px;
}
.i8w-live-guest-select-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.i8w-live-guest-select-row:hover { background: #f1f5f9; }
.i8w-live-guest-select-row input[type="checkbox"] { flex-shrink: 0; }


/* EVENT360 global mobile input zoom fix
   Purpose: prevent iOS Safari/Chrome mobile auto-zoom when focusing any editable field.
   Logic untouched. */
@media screen and (max-width: 900px) {
  html, body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select,
  .event360 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .event360 textarea,
  .event360 select,
  [class^="eil-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  [class*=" eil-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  [class^="eil-"] textarea,
  [class*=" eil-"] textarea,
  [class^="eil-"] select,
  [class*=" eil-"] select,
  [class^="p6-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  [class*=" p6-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  [class^="p6-"] textarea,
  [class*=" p6-"] textarea,
  [class^="p6-"] select,
  [class*=" p6-"] select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
}

/* ============================================================================
   Seating-map upgrades (p4). Appended and fully self-contained — every rule below
   is additive and scoped to the seating shell; nothing above is modified. Covers:
   (1) add-table dialog polish  (2) directional resize handles  (3) full-map mode
   (4) knights table  (5) elegant map background.
   ============================================================================ */

/* -------- (5) Elegant, subtle map background (replaces the flat white) -------- */
/* A calm light neutral with a faint dot grid: professional, easy on the eyes, keeps
   text / tables / elements perfectly readable, and applies in the normal AND full-map
   views. */
.i8w-p4-shell .reference-stage{
  background-color:#eef1f6;
  background-image:radial-gradient(rgba(47,94,168,.08) 1.15px, transparent 1.3px);
  background-size:24px 24px;
  background-position:12px 12px;
}
.i8w-p4-shell .i8w-p4-map-layer{background:transparent}
.i8w-p4-shell .i8w-p4-map-layer img{background:transparent}
.i8w-p4-shell .reference-canvas{background:#e7ebf1}

/* -------- (1) Add-table dialog helper text -------- */
.i8w-p4-shell .table-form-hint{display:block;margin-top:6px;color:#64748b;font-size:12.5px;line-height:1.5;font-weight:500}

/* -------- (4) Knights (banquet) table — a long rectangle -------- */
.i8w-p4-shell .table-box.exact-style.knights{border-radius:14px}

/* -------- (2) Directional resize handles (tables + hall elements) -------- */
/* Round/square tables expose the 4 corners only (uniform scaling → shape preserved);
   rectangular / knights tables and hall elements expose all edges + corners for free
   resizing. The SE grip stays visible as the primary affordance (also touch-friendly);
   the other handles fade in on hover so the map stays clean. */
.i8w-p4-shell .entity-resize-handles{position:absolute;inset:0;z-index:9;pointer-events:none}
.i8w-p4-shell .entity-resize-handles .erh{
  position:absolute;pointer-events:auto;touch-action:none;box-sizing:border-box;
  opacity:0;transition:opacity .12s ease;
  background:rgba(255,255,255,.97);border:1.5px solid #2f5ea8;box-shadow:0 2px 6px rgba(15,23,42,.28);
}
.i8w-p4-shell .table-box:hover .erh,
.i8w-p4-shell .table-box.is-resizing .erh,
.i8w-p4-shell .i8w-hall-item:hover .erh,
.i8w-p4-shell .i8w-hall-item.is-resizing .erh{opacity:1}
.i8w-p4-shell .entity-resize-handles .erh-se{opacity:1}
.i8w-p4-shell .table-box.is-dragging .erh,
.i8w-p4-shell .i8w-hall-item.is-dragging .erh{opacity:0 !important}
/* corners */
.i8w-p4-shell .erh-nw,.i8w-p4-shell .erh-ne,.i8w-p4-shell .erh-sw,.i8w-p4-shell .erh-se{width:15px;height:15px;border-radius:5px}
.i8w-p4-shell .erh-nw{top:-9px;left:-9px;cursor:nwse-resize}
.i8w-p4-shell .erh-se{right:-9px;bottom:-9px;cursor:nwse-resize}
.i8w-p4-shell .erh-ne{top:-9px;right:-9px;cursor:nesw-resize}
.i8w-p4-shell .erh-sw{bottom:-9px;left:-9px;cursor:nesw-resize}
/* edges */
.i8w-p4-shell .erh-n,.i8w-p4-shell .erh-s{left:50%;transform:translateX(-50%);width:24px;height:11px;border-radius:6px;cursor:ns-resize}
.i8w-p4-shell .erh-e,.i8w-p4-shell .erh-w{top:50%;transform:translateY(-50%);width:11px;height:24px;border-radius:6px;cursor:ew-resize}
.i8w-p4-shell .erh-n{top:-7px}
.i8w-p4-shell .erh-s{bottom:-7px}
.i8w-p4-shell .erh-e{right:-7px}
.i8w-p4-shell .erh-w{left:-7px}

/* -------- (3) Full-map ("הרחבת מפה") mode -------- */
/* Toolbar buttons: the full-map toggle is always shown; save + exit appear only while
   in full-map. */
.i8w-p4-shell .i8w-fullmap-btn{width:auto;min-width:0;display:inline-flex;align-items:center;gap:6px;padding:0 12px;font-size:13.5px;font-weight:800}
.i8w-p4-shell .i8w-fullmap-btn .i8w-fullmap-ico{font-size:16px;line-height:1}
.i8w-p4-shell .i8w-fullmap-btn.is-active{background:#2f5ea8;color:#fff;border-color:#2f5ea8}
.i8w-p4-shell .i8w-tool-btn.i8w-fullmap-save,
.i8w-p4-shell .i8w-tool-btn.i8w-fullmap-exit{width:auto;min-width:0;padding:0 14px;font-size:13.5px;font-weight:800}
.i8w-p4-shell .i8w-tool-btn.i8w-fullmap-save{background:#16a34a;color:#fff;border-color:#16a34a}
.i8w-p4-shell .i8w-tool-btn.i8w-fullmap-exit{background:#ef4444;color:#fff;border-color:#ef4444}
.i8w-p4-workspace:not(.is-fullmap) .i8w-fullmap-only{display:none !important}

/* Reflow the existing panels into: top action bar · map · bottom guest strip. The very
   same DOM nodes, drag handlers and seating logic are reused — only the layout changes,
   so exiting returns to the exact previous view. */
.i8w-p4-workspace.is-fullmap{padding:0}
.i8w-p4-workspace.is-fullmap .i8w-p4-panel[data-panel="board"].active{height:100dvh;min-height:100dvh;padding:0}
.i8w-p4-workspace.is-fullmap .i8w-p4-board-shell{
  grid-template-columns:1fr;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:8px;height:100dvh;padding:0;
}
.i8w-p4-workspace.is-fullmap .i8w-p4-si-bar{display:none}
/* top action bar (was the side "add" panel) */
.i8w-p4-workspace.is-fullmap .i8w-p4-control-side{min-height:0}
.i8w-p4-workspace.is-fullmap .i8w-control-card{
  height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;overflow:visible;
  padding:8px 12px;border-radius:0;border-inline:none;border-top:none;background:#f2f5fa;
}
.i8w-p4-workspace.is-fullmap .i8w-control-card .i8w-side-tabs,
.i8w-p4-workspace.is-fullmap .i8w-control-card .i8w-side-section-title,
.i8w-p4-workspace.is-fullmap .i8w-control-card .i8w-side-divider{display:none}
.i8w-p4-workspace.is-fullmap .i8w-control-card .i8w-side-action{margin:0;height:38px;flex:0 0 auto;padding:0 12px;font-size:13px}
/* map fills the middle */
.i8w-p4-workspace.is-fullmap .i8w-p4-main-stage{min-height:0}
.i8w-p4-workspace.is-fullmap .i8w-ref-canvas-shell.i8w-stage-card{border:none;border-radius:0;box-shadow:none;padding:6px 10px 8px;background:transparent}
/* R12: full screen shows the SAME map on the SAME background as the normal view — it must NOT paint a
   separate white background. The dotted-grid texture lives on .reference-canvas and the stage is
   transparent (see the R-texture block above), so both views share it automatically; here we only (a)
   drop the fixed min-height so the canvas is exactly the available board row — no forced 720px, hence no
   large dead band above/below — and (b) hard-guarantee no horizontal scroll while applyFullMapFit()
   centres the sketch. Background is intentionally left to the shared grid rule (no override). */
.i8w-p4-workspace.is-fullmap .reference-canvas{min-height:0 !important;overflow:hidden !important}
.i8w-p4-workspace.is-fullmap .reference-stage{overflow:hidden !important}
/* bottom unassigned-guests strip (horizontal, searchable, scrollable, draggable) */
.i8w-p4-workspace.is-fullmap .i8w-p4-guests-side{min-height:0}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-panel{
  height:auto;max-height:28vh;border-radius:0;border-inline:none;border-bottom:none;
  padding:10px 14px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;overflow:hidden;
}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-head{display:flex;flex-direction:row;align-items:center;gap:12px;margin:0}
.i8w-p4-workspace.is-fullmap .i8w-side-search-wrap{display:flex;flex-direction:row;align-items:center;gap:12px;flex:1}
.i8w-p4-workspace.is-fullmap .i8w-side-search-input{max-width:360px;min-width:180px;flex:1}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:10px;padding-bottom:6px;padding-inline-end:0}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list .guest-chip{min-width:150px;max-width:190px;width:auto;flex:0 0 auto;flex-direction:column;justify-content:center;text-align:center}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list .dot{display:none}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list .meta-top{justify-content:center}


/* =====================================================================
   Seating-arrangement improvements (Sections 1–6). Appended so the
   existing cascade is untouched; every rule is scoped under the plugin
   shell / workspace and only affects the new markup or the specific
   full-screen reflow it is meant to change.
   ===================================================================== */

/* ---- Section 1: existing-seats vs venue-commitment note (map toolbar) ---- */
.i8w-p4-shell .i8w-p4-capacity-note{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;color:#244b88;background:#eef4ff;border:1px solid #c8d8fb;border-radius:10px;padding:7px 14px;line-height:1.2;text-align:center;white-space:nowrap;font-family:'Rubik',Arial,sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.i8w-p4-shell .i8w-p4-capacity-note[hidden]{display:none}
.i8w-p4-shell .i8w-p4-capacity-note.is-over{color:#b42318;background:#fef3f2;border-color:#fda29b}
.i8w-p4-workspace.is-fullmap .i8w-p4-capacity-note{font-size:13px;padding:6px 12px}

/* ---- Section 2: board loader (no-flash first paint) ---- */
.i8w-p4-shell .i8w-p4-canvas{position:relative}
.i8w-p4-shell .i8w-p4-board-loader{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#f7f8fb;border-radius:18px}
.i8w-p4-shell .i8w-p4-board-loader[hidden]{display:none}
.i8w-p4-shell .i8w-p4-board-loader-inner{display:flex;flex-direction:column;align-items:center;gap:14px;color:#41557a;font-family:'Rubik',Arial,sans-serif;font-weight:700;font-size:16px}
/* While loading, the stage itself is invisible (visibility keeps layout + measurements
   intact, unlike display:none) so a half-settled sketch can never flash before the
   loader clears — the loader overlay is what the user sees instead. */
.i8w-p4-shell .i8w-p4-canvas.i8w-board-loading .reference-stage{visibility:hidden}
/* EVENT360 logo (bundled file / the site's WordPress logo) or wordmark fallback,
   + three gentle bouncing dots (brand gradient, clean + centred). mix-blend-mode
   folds a white logo background into the light loader backdrop so no box shows. */
.i8w-p4-shell .i8w-p4-loader-logo{width:min(260px,64%);height:auto;mix-blend-mode:multiply}
.i8w-p4-shell .i8w-p4-loader-brand{font-family:'Rubik',Arial,sans-serif;font-weight:900;font-size:36px;letter-spacing:.5px;line-height:1;color:#1e293b;direction:ltr}
.i8w-p4-shell .i8w-p4-loader-brand b{font-weight:900;background:linear-gradient(135deg,#4f46e5,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#4f46e5}
.i8w-p4-shell .i8w-p4-loader-dots{display:flex;gap:9px;height:16px;align-items:flex-end}
.i8w-p4-shell .i8w-p4-loader-dots i{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,#4f46e5,#7c3aed);animation:i8wP4Dots 1.15s ease-in-out infinite}
.i8w-p4-shell .i8w-p4-loader-dots i:nth-child(2){animation-delay:.16s}
.i8w-p4-shell .i8w-p4-loader-dots i:nth-child(3){animation-delay:.32s}
@keyframes i8wP4Dots{0%,70%,100%{transform:translateY(0);opacity:.35}35%{transform:translateY(-7px);opacity:1}}

/* ---- Section 3: full-screen action buttons on ONE horizontal row ---- */
/* Override the earlier wrap so the buttons never break to a second line; scroll instead. */
.i8w-p4-workspace.is-fullmap .i8w-control-card{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.i8w-p4-workspace.is-fullmap .i8w-control-card .i8w-side-action{flex:0 0 auto;height:40px;white-space:nowrap}
/* Owner view: admin-only "add" actions are locked (i8w-add-locked is applied ONLY when the
   viewer cannot add). Hide them in full-screen so the owner sees just the relevant actions —
   auto-arrange, seating, guest-locate, check-in. Admin/hostess never get the class, so they
   keep every button. Permissions themselves are unchanged. */
.i8w-p4-workspace.is-fullmap .i8w-control-card .i8w-side-action.i8w-add-locked{display:none !important}

/* ---- Section 4: full assignable-guest list at the bottom of full-screen ---- */
/* Wrap into rows with vertical scrolling so hundreds of guests stay browsable (not a single
   endless horizontal strip). Same chips, same drag, same search — only the reflow changes. */
.i8w-p4-workspace.is-fullmap .i8w-side-guests-panel{max-height:32vh}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list{flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;overflow-x:hidden;overflow-y:auto;gap:8px;padding-bottom:6px}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list .guest-chip{min-width:150px;max-width:220px;flex:0 1 auto}
.i8w-p4-workspace.is-fullmap .i8w-bottom-count{font-weight:800;white-space:nowrap}

/* ---- Section 5: table-type gallery + exact pixel sizing (add/edit modal) ---- */
.i8w-p4-shell .table-form.table-form--rich{display:flex;flex-direction:column;gap:12px;max-width:820px;width:100%;margin-inline:auto}
.i8w-p4-shell .table-form--rich .tf-top{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.i8w-p4-shell .table-form--rich .tf-fields{flex:1 1 260px;display:flex;flex-direction:column;gap:10px;min-width:0}
.i8w-p4-shell .table-form--rich .tf-preview{flex:0 0 150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#f5f8ff;border:1px solid #dbe6fb;border-radius:14px;padding:12px}
.i8w-p4-shell .table-form--rich .tf-preview-cap{font-size:12px;font-weight:700;color:#64748b}
.i8w-p4-shell .table-form--rich .tf-preview-canvas{width:124px;height:124px;display:flex;align-items:center;justify-content:center;position:relative}
.i8w-p4-shell .table-form--rich .tf-prev-box{position:relative;background:#7e57c2;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(15,23,42,.14)}
.i8w-p4-shell .table-form--rich .tf-prev-box.shape-round{border-radius:999px}
.i8w-p4-shell .table-form--rich .tf-prev-box.shape-oval{border-radius:50%}
.i8w-p4-shell .table-form--rich .tf-prev-box.shape-square,.i8w-p4-shell .table-form--rich .tf-prev-box.shape-rect,.i8w-p4-shell .table-form--rich .tf-prev-box.shape-knights{border-radius:9px}
.i8w-p4-shell .table-form--rich .tf-prev-seats{position:absolute;pointer-events:none}
.i8w-p4-shell .table-form--rich .tf-prev-seat{position:absolute;width:6px;height:6px;border-radius:999px;background:#ffffff;border:1px solid #7e57c2;transform:translate(-50%,-50%)}
.i8w-p4-shell .table-form--rich .tf-prev-label{position:relative;z-index:2;color:#fff;font-weight:800;font-size:12px;text-align:center;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.i8w-p4-shell .table-form--rich .tf-section-title{font-weight:800;color:#334155;font-size:13.5px;margin:4px 0 -2px}
.i8w-p4-shell .table-form--rich .tf-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.i8w-p4-shell .table-form--rich .tf-type-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer;text-align:center;transition:border-color .12s,box-shadow .12s}
.i8w-p4-shell .table-form--rich .tf-type-card:hover{border-color:#bcd0f7}
.i8w-p4-shell .table-form--rich .tf-type-card.is-selected{border-color:#3170ef;box-shadow:0 0 0 3px rgba(49,112,239,.15)}
.i8w-p4-shell .table-form--rich .tf-type-ico{background:#7e57c2;display:block;flex:0 0 auto}
.i8w-p4-shell .table-form--rich .tf-type-ico.shape-round{border-radius:999px;width:36px;height:36px}
.i8w-p4-shell .table-form--rich .tf-type-ico.shape-oval{border-radius:50%;width:50px;height:30px}
.i8w-p4-shell .table-form--rich .tf-type-ico.shape-square{border-radius:7px;width:36px;height:36px}
.i8w-p4-shell .table-form--rich .tf-type-ico.shape-rect{border-radius:6px;width:50px;height:30px}
.i8w-p4-shell .table-form--rich .tf-type-ico.shape-knights{border-radius:5px;width:56px;height:20px}
.i8w-p4-shell .table-form--rich .tf-type-name{font-weight:800;font-size:13px;color:#1e293b;line-height:1.2}
.i8w-p4-shell .table-form--rich .tf-type-meta{font-size:11px;color:#64748b}
.i8w-p4-shell .table-form--rich .tf-size-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.i8w-p4-shell .table-form--rich .tf-lock-row{font-size:14px}
.i8w-p4-shell .table-form--rich .tf-rot-quick{display:flex;flex-wrap:wrap;gap:6px}
.i8w-p4-shell .table-form--rich .tf-rot-q{border:1px solid #d9e1ee;background:#fff;border-radius:8px;padding:5px 11px;font-weight:700;font-size:12.5px;cursor:pointer;color:#475569;font-family:inherit}
.i8w-p4-shell .table-form--rich .tf-rot-q:hover{background:#eef2ff;border-color:#c7d2fe}
.i8w-p4-shell .table-form--rich .tf-rot-q.is-active{background:#3170ef;color:#fff;border-color:#3170ef}
.i8w-p4-shell .table-form--rich .tf-warn{background:#fef3f2;border:1px solid #fda29b;color:#b42318;border-radius:10px;padding:10px 12px;font-weight:700;font-size:13px;line-height:1.5}
.i8w-p4-shell .table-form--rich .tf-warn[hidden]{display:none}

/* New 'oval' table shape rendered as a true ellipse (round stays the existing rounded
   square; rect/square/knights keep their radii). Seats are placed on the matching ellipse
   by seatPositionsForTable, so they hug this edge. */
.i8w-p4-shell .table-box.exact-style.oval{border-radius:50%}

/* ---- Section 6: on-map rotation grip ---- */
.i8w-p4-shell .table-rotate-handle{position:absolute;left:50%;top:-34px;transform:translateX(-50%);width:26px;height:26px;padding:0;border:none;border-radius:999px;background:#fff;color:#7e57c2;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(15,23,42,.3);cursor:pointer;opacity:0;transition:opacity .12s ease;z-index:9;touch-action:none}
.i8w-p4-shell .table-rotate-handle svg{width:15px;height:15px;display:block;pointer-events:none}
.i8w-p4-shell .table-rotate-handle::before{content:'';position:absolute;left:50%;top:100%;width:2px;height:11px;background:#fff;transform:translateX(-50%);box-shadow:0 1px 2px rgba(15,23,42,.18)}
.i8w-p4-shell .table-box:hover .table-rotate-handle,.i8w-p4-shell .table-box.is-rotating .table-rotate-handle{opacity:1}
.i8w-p4-shell .table-box.is-rotating .table-rotate-handle{cursor:grabbing}
.i8w-p4-shell .table-box.is-rotating{transition:none !important}
.i8w-p4-shell .table-box.is-rotating .erh,.i8w-p4-shell .table-box.is-rotating .entity-tools{opacity:0 !important;pointer-events:none}
/* Rotated tables resize along their own axes only via the exact width/height fields in the
   edit dialog; hide the drag-resize handles (which resize along screen axes) so the gesture
   is never confusing. Drag and the rotation grip stay active. */
/* R9-1: a rotated table now KEEPS all 8 handles (resize is rotation-aware in JS). */

/* =====================================================================
   Round 2 refinements. Appended so the existing cascade is untouched.
   ===================================================================== */

/* ---- R2-2: full-screen = only the sketch + the bottom guest strip ---- */
/* Lift the whole modal above any surrounding dashboard chrome. */
.i8w-p4-overlay.i8w-fullmap-overlay{z-index:2147483647}
/* The p4 top bar is already hidden; keep it hidden in full-screen too (belt & suspenders). */
.i8w-p4-workspace.is-fullmap .i8w-p4-topbar{display:none !important}
/* Hide the add-buttons / tabs row (the top clutter). Exit is on the thin map toolbar
   ("יציאה ממסך מלא") and via the Esc key. */
.i8w-p4-workspace.is-fullmap .i8w-p4-control-side{display:none !important}
/* With the top row gone the board is simply: map (fills the screen) + bottom guest strip. */
.i8w-p4-workspace.is-fullmap .i8w-p4-board-shell{grid-template-rows:minmax(0,1fr) auto}

/* ---- R2-4: alignment guide lines shown while dragging a table ---- */
.i8w-p4-shell .i8w-p4-snap-guides{position:absolute;inset:0;pointer-events:none;z-index:55}
.i8w-p4-shell .i8w-snap-line{position:absolute;background:#ec4899;box-shadow:0 0 0 .5px rgba(236,72,153,.35)}
.i8w-p4-shell .i8w-snap-line.v{top:0;bottom:0;width:1px}
.i8w-p4-shell .i8w-snap-line.h{left:0;right:0;height:1px}

/* =====================================================================
   Round 3 refinements. Appended so the existing cascade is untouched.
   ===================================================================== */

/* ---- R3-2 / R3-3: fit the map canvas to its own frame instead of the viewport ----
   The earlier "hall map full canvas" rule forced .reference-canvas to height:calc(100vh-175px)
   with min-height:720px, ignoring the header/toolbar above it — so the sketch spilled below the
   white frame (normal view) and pushed the guest strip off-screen (full screen). Make the white
   card a flex column and let the canvas fill exactly the remaining space, bounded to the frame. */
.i8w-p4-shell .i8w-ref-canvas-shell.i8w-stage-card{display:flex;flex-direction:column;min-height:0}
.i8w-p4-shell .i8w-ref-canvas-shell.i8w-stage-card .reference-canvas{flex:1 1 0 !important;height:auto !important;min-height:0 !important}

/* ---- R3-2: full-screen bottom guest strip — bounded height, internal scroll, readable cards ---- */
.i8w-p4-workspace.is-fullmap .i8w-p4-board-shell{grid-template-rows:minmax(0,1fr) clamp(150px,24vh,260px)}
.i8w-p4-workspace.is-fullmap .i8w-p4-guests-side{min-height:0;overflow:hidden}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-panel{height:100%;max-height:none;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;overflow:hidden;padding:10px 14px}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list{flex-direction:row;flex-wrap:wrap;align-content:flex-start;overflow-y:auto;overflow-x:hidden;gap:8px;min-height:0;padding-bottom:4px}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list .guest-chip{min-width:160px;max-width:230px;width:auto;flex:0 0 auto;flex-direction:row;align-items:center;justify-content:flex-start;text-align:right}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list .guest-chip .dot{display:block}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list .guest-chip .meta{min-width:0}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list .guest-chip .meta-top{justify-content:flex-start}
.i8w-p4-workspace.is-fullmap .i8w-side-guests-list .guest-chip .meta-top strong{white-space:normal}

/* ---- R3-5: full-view button centred & prominent in the map toolbar ---- */
.i8w-p4-shell .i8w-ref-canvas-toolbar{align-items:center}
.i8w-p4-shell .i8w-ref-toolbar-left{flex:1 1 0;min-width:0}
.i8w-p4-shell .i8w-ref-toolbar-right{flex:1 1 0;min-width:0;justify-content:flex-end}
.i8w-p4-shell .i8w-ref-toolbar-center{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.i8w-p4-shell .i8w-ref-toolbar-left .i8w-p4-capacity-note{flex:0 1 auto;min-width:0}
.i8w-p4-shell .i8w-fullmap-btn--hero{height:42px;min-width:0;width:auto;padding:0 22px;font-size:15px;font-weight:800;border:none;border-radius:12px;background:linear-gradient(180deg,#3170ef,#255fe0);color:#fff;box-shadow:0 8px 18px rgba(37,95,224,.30);display:inline-flex;align-items:center;gap:8px}
.i8w-p4-shell .i8w-fullmap-btn--hero:hover{filter:brightness(1.06)}
.i8w-p4-shell .i8w-fullmap-btn--hero .i8w-fullmap-ico{font-size:18px;line-height:1}
/* In full screen the centre button is redundant (exit sits on the right + Esc) → hide it. */
.i8w-p4-workspace.is-fullmap .i8w-ref-toolbar-center{display:none}

/* =====================================================================
   Round 4 refinements. Appended so the existing cascade is untouched.
   ===================================================================== */

/* ---- R4-7: no white rectangle — the sketch uses the SAME background that already sits
   around the map (the canvas background), continuously, in both views and at every zoom. ---- */
.i8w-p4-shell .reference-stage{background:transparent !important;border:none !important;box-shadow:none !important}
/* Zoom "+" at the 100% ceiling reads as unavailable. */
.i8w-p4-shell .i8w-tool-btn.is-disabled,.i8w-p4-shell .i8w-tool-btn:disabled{opacity:.45;cursor:default;pointer-events:none}

/* ---- R4-6: guest-location "remove from table" button, unassigned matches, success toast ---- */
.i8w-p4-shell .host-guest-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.i8w-p4-shell .host-guest-row .host-guest-main{flex:1;min-width:0}
.i8w-p4-shell .host-unassign-btn{flex:0 0 auto;white-space:nowrap;padding:8px 14px;font-size:13px;border:1px solid #fecaca;background:#fef2f2;color:#b42318;border-radius:10px;font-weight:700;cursor:pointer}
.i8w-p4-shell .host-unassign-btn:hover{background:#fee2e2}
.i8w-p4-shell .host-unassign-btn:disabled{opacity:.5;cursor:default}
.i8w-p4-shell .host-group-unassigned .host-table-header{color:#92400e}
.i8w-p4-shell .host-unassigned-note{margin-top:3px;color:#b45309;font-size:12.5px;font-weight:700}
.i8w-p4-shell .host-guest-row .check-state{background:#fef3c7;color:#92400e;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700}
.i8w-p4-shell .host-guest-row .check-state.on{background:#dcfce7;color:#166534}
.i8w-p4-toast-host{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:2147483647;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;font-family:'Rubik',Arial,sans-serif}
.i8w-p4-toast{background:#065f46;color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:12px;box-shadow:0 12px 30px rgba(6,95,70,.32);opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;max-width:90vw;text-align:center}
.i8w-p4-toast.is-in{opacity:1;transform:translateY(0)}

/* ---- R5-1: the EVENT OWNER cannot edit the map structure — hide every structural control.
   Keyed on data-can-edit-structure="0" (set by the server: 0 = event owner, 1 = admin OR the
   assigned hostess, who keep FULL editing). The admin's editing is fully restored; only the
   owner is limited to viewing + guest seating. Viewing (data-show-table), printing and guest
   assignment/removal stay available to everyone. ---- */
.i8w-p4-shell[data-can-edit-structure="0"] .entity-resize-handles,
.i8w-p4-shell[data-can-edit-structure="0"] .table-rotate-handle,
.i8w-p4-shell[data-can-edit-structure="0"] .table-box .entity-tools,
.i8w-p4-shell[data-can-edit-structure="0"] .i8w-hall-item .entity-tools,
.i8w-p4-shell[data-can-edit-structure="0"] .i8w-side-action[data-action="add-table"],
.i8w-p4-shell[data-can-edit-structure="0"] .i8w-side-action[data-action="add-element"]{display:none !important}
.i8w-p4-shell[data-can-edit-structure="0"] .table-box,
.i8w-p4-shell[data-can-edit-structure="0"] .i8w-hall-item{cursor:default}
/* The same structural controls also render OUTSIDE the box — in the tables list, the
   guest-location window and the hall-item editor. Hide every one of them for the owner so
   nothing structural is even offered (drag/rotate/resize are additionally gated in JS and
   every structural AJAX action is blocked on the server). */
.i8w-p4-shell[data-can-edit-structure="0"] [data-edit-table],
.i8w-p4-shell[data-can-edit-structure="0"] [data-edit-table-from-guests],
.i8w-p4-shell[data-can-edit-structure="0"] [data-duplicate-table],
.i8w-p4-shell[data-can-edit-structure="0"] [data-delete-table],
.i8w-p4-shell[data-can-edit-structure="0"] [data-rotate-table],
.i8w-p4-shell[data-can-edit-structure="0"] [data-grow-table],
.i8w-p4-shell[data-can-edit-structure="0"] [data-shrink-table],
.i8w-p4-shell[data-can-edit-structure="0"] [data-edit-hall-item],
.i8w-p4-shell[data-can-edit-structure="0"] [data-duplicate-hall-item],
.i8w-p4-shell[data-can-edit-structure="0"] [data-delete-hall-item]{display:none !important}

/* ---- R4-2 / R5-2: full screen = the SAME map, spread over a larger area.
   The stage keeps a FIXED coordinate space — its size is frozen at the normal-view value
   when full screen opens (JS sets --stage-w / --stage-h) — and it is centered inside the
   canvas. A uniform zoom then scales that whole block to fill the larger area (in full screen
   it may exceed 100%, in the normal view it is capped at 100%). Tables therefore keep their
   exact relative positions, angles and relative sizes — nothing is re-flowed or rebuilt, and
   the normal <-> full round-trip never shifts anything. The fallback keeps the classic
   "stage fills the canvas" behaviour until JS measures it. ---- */
.i8w-p4-shell .reference-canvas{display:flex;align-items:center;justify-content:center}
.i8w-p4-shell .reference-stage{
  width:var(--stage-w, 100%) !important;
  height:var(--stage-h, 100%) !important;
  max-width:none !important;
  max-height:none !important;
  flex:0 0 auto !important;
  margin:0 !important;
}

/* ---- R5-4a: no white rectangle anywhere in the map area. The light dot-grid texture that
   already appears around the map is used CONTINUOUSLY across the whole canvas — normal view,
   full screen, and at every zoom level — and the map layer / stage are transparent so the
   texture shows through behind the tables. When a hall image is uploaded it covers the texture
   inside the stage exactly as before; with no image, the texture is seamless with no seam. ---- */
.i8w-p4-shell .reference-canvas{
  background-color:#eef1f6 !important;
  background-image:radial-gradient(rgba(47,94,168,.08) 1.15px, transparent 1.3px) !important;
  background-size:24px 24px !important;
  background-position:12px 12px !important;
}
.i8w-p4-shell .reference-stage{background:transparent !important}
.i8w-p4-shell .i8w-p4-map-layer{background:transparent !important}
.i8w-p4-shell .i8w-p4-map-layer img{background:transparent !important}

/* =====================================================================
   Round 6 — appended, self-contained. Only the rules below are new.
   ===================================================================== */

/* ---- (was R6-2) The manual display-percent controls are BACK: + / − step the view between
   50% and 100% and the middle button shows the current percent (and resets to 100%). The rule
   that hid them was removed — see the "display percent" section at the end of this file. ---- */

/* ---- R6-4: area (marquee) selection + multi-select highlight + floating action bar ---- */
/* Anchor the marquee rectangle / select bar to the canvas. */
.i8w-p4-shell .reference-canvas{position:relative}
/* Confirm-delete dialog body + actions. */
.i8w-p4-shell .i8w-p4-confirm-body{font-size:14.5px;line-height:1.75;color:#1e293b}
.i8w-p4-shell .i8w-p4-confirm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
/* The drag rectangle drawn on the canvas while selecting. */
.i8w-p4-shell .i8w-p4-marquee{position:absolute;z-index:58;pointer-events:none;
  border:1.5px solid #7e57c2;background:rgba(126,87,194,.12);border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}
/* Highlight for every selected table / hall element. Scoped so it never fights rotation
   (outline + box-shadow only — no transform). */
.i8w-p4-shell .table-box.is-multi-selected,
.i8w-p4-shell .i8w-hall-item.is-multi-selected{
  outline:2.5px solid #7e57c2 !important;
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(126,87,194,.22) !important;
}
/* Floating bar that appears while items are selected. */
.i8w-p4-shell .i8w-p4-selbar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e2e8f0;
  border-radius:14px;padding:9px 14px;box-shadow:0 12px 34px rgba(15,23,42,.20);font-family:'Rubik',Arial,sans-serif}
.i8w-p4-shell .i8w-p4-selbar[hidden]{display:none}
.i8w-p4-shell .i8w-p4-selbar .selbar-count{font-weight:800;color:#1e293b;font-size:14px}
.i8w-p4-shell .i8w-p4-selbar .selbar-btn{border:none;border-radius:10px;padding:8px 14px;font-weight:800;
  font-size:13.5px;cursor:pointer;font-family:inherit}
.i8w-p4-shell .i8w-p4-selbar .selbar-seat{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:#334155;font-size:13px}
.i8w-p4-shell .i8w-p4-selbar .selbar-seat-btn{width:26px;height:26px;border:1px solid #d8dee8;border-radius:8px;background:#f8fafc;color:#0f172a;font-size:18px;font-weight:800;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.i8w-p4-shell .i8w-p4-selbar .selbar-seat-btn:hover{background:#eef2ff;border-color:#c7d2fe}
.i8w-p4-shell .i8w-p4-selbar .selbar-seat-val{min-width:18px;text-align:center;color:#4a37d6;font-size:14px}
.i8w-p4-shell .i8w-p4-selbar .selbar-align{background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe}
.i8w-p4-shell .i8w-p4-selbar .selbar-align:hover{background:#e0e7ff}
.i8w-p4-shell .i8w-p4-selbar .selbar-dup{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}
.i8w-p4-shell .i8w-p4-selbar .selbar-dup:hover{filter:brightness(1.06)}
.i8w-p4-shell .i8w-p4-selbar .selbar-del{background:#dc2626;color:#fff}
.i8w-p4-shell .i8w-p4-selbar .selbar-del:hover{background:#b91c1c}
.i8w-p4-shell .i8w-p4-selbar .selbar-clear{background:#f1f5f9;color:#334155}
.i8w-p4-shell .i8w-p4-selbar .selbar-clear:hover{background:#e2e8f0}
/* While marquee-selecting, suppress text selection on the canvas. */
.i8w-p4-shell.i8w-p4-marquee-active,
.i8w-p4-shell.i8w-p4-marquee-active *{user-select:none !important}

/* =====================================================================
   Round 7 — realistic straight (front-elevation) art for the hall elements.
   The old flat gradient box + emoji is replaced by an isolated SVG data-URI that
   fills the element (contain, no distortion / crop). The box itself becomes the
   transparent interactive footprint — drag / marquee-select / resize / delete /
   the editable label all keep working exactly as before.
   ===================================================================== */
.i8w-p4-shell .i8w-hall-item.has-art{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
/* The art has its own depth/shadow, so the box stays put on hover (no lift/glow). */
.i8w-p4-shell .i8w-hall-item.has-art:hover{ box-shadow:none !important; transform:none !important; }
.i8w-p4-shell .i8w-hall-item.has-art .hall-item-art{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.i8w-p4-shell .i8w-hall-item.has-art .hall-item-icon{ display:none !important; }
/* Keep the (editable) element label as a small readable caption at the bottom. */
.i8w-p4-shell .i8w-hall-item.has-art .hall-item-body{
  position:absolute; left:0; right:0; bottom:3px; top:auto; z-index:2;
  flex-direction:row !important; align-items:flex-end !important; justify-content:center !important;
  gap:0 !important; background:transparent !important; pointer-events:none;
}
.i8w-p4-shell .i8w-hall-item.has-art .hall-item-label{
  font-size:11px !important; font-weight:800 !important; line-height:1.1 !important; color:#2a3446 !important;
  background:rgba(255,255,255,.86); border:1px solid rgba(15,23,42,.08); border-radius:8px; padding:2px 8px;
  max-width:94%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-shadow:0 2px 6px rgba(15,23,42,.12);
}
/* Keep the multi-select highlight readable over the transparent box. */
.i8w-p4-shell .i8w-hall-item.has-art.is-multi-selected{ outline:2.5px solid #7e57c2 !important; outline-offset:3px; }

/* =====================================================================
   R9-2 — per-table control layer positioned ~10–15px BEYOND the chair ring (never on the body,
   chairs or text). --handle-out is set per table in JS (= how far the chairs stick out + a clear
   gap). The layer — selection frame + 8 resize handles + the 90° rotate icon — appears when the
   table is SELECTED (persistent, one at a time) or hovered, so it also shows for tables loaded from
   a saved map. Real-time: --handle-out is refreshed on resize, so the layer follows the structure.
   ===================================================================== */
.i8w-p4-shell .table-box .erh-nw{ top: calc(-1 * var(--handle-out, 20px)) !important; left: calc(-1 * var(--handle-out, 20px)) !important; }
.i8w-p4-shell .table-box .erh-ne{ top: calc(-1 * var(--handle-out, 20px)) !important; right: calc(-1 * var(--handle-out, 20px)) !important; }
.i8w-p4-shell .table-box .erh-sw{ bottom: calc(-1 * var(--handle-out, 20px)) !important; left: calc(-1 * var(--handle-out, 20px)) !important; }
.i8w-p4-shell .table-box .erh-se{ bottom: calc(-1 * var(--handle-out, 20px)) !important; right: calc(-1 * var(--handle-out, 20px)) !important; }
.i8w-p4-shell .table-box .erh-n{ top: calc(-1 * var(--handle-out, 18px)) !important; }
.i8w-p4-shell .table-box .erh-s{ bottom: calc(-1 * var(--handle-out, 18px)) !important; }
.i8w-p4-shell .table-box .erh-e{ right: calc(-1 * var(--handle-out, 18px)) !important; }
.i8w-p4-shell .table-box .erh-w{ left: calc(-1 * var(--handle-out, 18px)) !important; }
/* 90° rotate icon clearly above the chair ring. */
.i8w-p4-shell .table-box .table-rotate-handle{ top: calc(-1 * var(--handle-out, 20px) - 20px) !important; }
/* Selection frame that surrounds the whole structure (body + chairs), ~10–15px beyond the chairs. */
.i8w-p4-shell .table-box .entity-resize-handles::before{
  content:''; position:absolute; inset: calc(-1 * var(--handle-out, 20px) + 3px);
  border:1.7px dashed rgba(126,87,194,0); border-radius:18px; pointer-events:none; transition:border-color .12s ease;
}
/* Show the control layer on SELECTION (persistent) as well as on hover — this is what makes the nav
   reappear for a table loaded from a saved map, not only for a freshly-added one. */
.i8w-p4-shell .table-box.is-selected-table .erh{ opacity:1; }
.i8w-p4-shell .table-box.is-selected-table .table-rotate-handle{ opacity:1; }
.i8w-p4-shell .table-box:hover .entity-resize-handles::before,
.i8w-p4-shell .table-box.is-selected-table .entity-resize-handles::before{ border-color:rgba(126,87,194,.6); }
/* Rotated tables keep the frame + rotate icon (resize via the exact fields or rotate back to 0°). */

/* (4) admin-only discoverability hint for area-select (JS gates it to structure-editors). */
.i8w-p4-shell .i8w-p4-selhint{
  position:absolute; left:14px; bottom:14px; z-index:57; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.95); border:1px solid #e2e8f0; border-radius:12px; padding:7px 8px 7px 12px;
  box-shadow:0 8px 22px rgba(15,23,42,.14); font-family:'Rubik',Arial,sans-serif; font-size:12.5px; color:#334155;
  max-width:290px; line-height:1.4;
}
.i8w-p4-shell .i8w-p4-selhint .selhint-x{ border:none; background:#eef2f7; color:#64748b; width:20px; height:20px; border-radius:6px; cursor:pointer; font-size:14px; line-height:1; flex:0 0 auto; }
.i8w-p4-shell .i8w-p4-selhint .selhint-x:hover{ background:#e2e8f0; }

/* (6) unified "add element" dialog — a card gallery + size/quantity + custom image upload. */
.i8w-p4-shell .ael-form{ display:flex; flex-direction:column; gap:14px; max-width:660px; width:100%; margin-inline:auto; }
.i8w-p4-shell .ael-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; }
.i8w-p4-shell .ael-card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 8px 10px; border:2px solid #e6eaf2; border-radius:13px;
  background:radial-gradient(120% 100% at 50% 20%,#ffffff,#eef2f9); cursor:pointer; transition:border-color .12s,box-shadow .12s,transform .12s; font-family:inherit; }
.i8w-p4-shell .ael-card:hover{ border-color:#c4b5fd; transform:translateY(-2px); }
.i8w-p4-shell .ael-card.is-selected{ border-color:#7e57c2; box-shadow:0 0 0 3px rgba(126,87,194,.16); }
.i8w-p4-shell .ael-card .ael-art{ width:100%; height:66px; background-repeat:no-repeat; background-position:center; background-size:contain; pointer-events:none; }
.i8w-p4-shell .ael-card .ael-name{ font-size:12.5px; font-weight:800; color:#334155; text-align:center; line-height:1.2; }
.i8w-p4-shell .ael-custom{ display:grid; gap:10px; background:#f7f9fc; border:1px solid #e6eaf2; border-radius:12px; padding:12px; }
.i8w-p4-shell .ael-custom[hidden]{ display:none; }
.i8w-p4-shell .ael-upload{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.i8w-p4-shell .ael-upload-preview img{ height:46px; border-radius:8px; border:1px solid #e2e8f0; display:block; }
.i8w-p4-shell .ael-size-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.i8w-p4-shell .ael-size-grid label{ display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:700; color:#334155; }
@media (max-width:520px){ .i8w-p4-shell .ael-size-grid{ grid-template-columns:1fr; } }

/* R9-2: inline status / loading + error line for the "add element" dialog (no silent failures). */
.i8w-p4-shell .ael-status{ margin-top:2px; padding:9px 12px; border-radius:10px; font-size:13px; font-weight:700; background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe; }
.i8w-p4-shell .ael-status[hidden]{ display:none; }
.i8w-p4-shell .ael-status.is-error{ background:#fef2f2; color:#b91c1c; border-color:#fecaca; }

/* =====================================================================
   R9-1 — categorised "add element" dialog (7 categories, per-category search + carousel)
   and clean, category-tinted map tiles for the non-realistic catalog elements.
   ===================================================================== */
/* R9-4: use (almost) the FULL modal width — the carousels span the window and show more cards,
   instead of a narrow centred column with big white side-bands. */
.i8w-p4-shell .ael-form--rich{ max-width:none; width:100%; margin-inline:0; display:flex; flex-direction:column; gap:0; max-height:min(80vh,780px); }
.i8w-p4-shell .ael-cats{ overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:16px; padding:2px 4px 8px; }
.i8w-p4-shell .ael-cat-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.i8w-p4-shell .ael-cat-title{ display:flex; align-items:center; gap:8px; font-weight:900; font-size:14.5px; color:#1f2937; }
.i8w-p4-shell .ael-cat-dot{ width:11px; height:11px; border-radius:999px; display:inline-block; flex:none; }
.i8w-p4-shell .ael-search-wrap{ display:flex; align-items:center; gap:7px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:10px; padding:5px 11px; min-width:210px; }
.i8w-p4-shell .ael-search-wrap svg{ width:15px; height:15px; color:#64748b; flex:none; }
.i8w-p4-shell .ael-search{ border:none; background:transparent; outline:none; font-size:13px; width:100%; color:#334155; font-family:inherit; }
.i8w-p4-shell .ael-carousel{ position:relative; }
.i8w-p4-shell .ael-track{ display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth; padding:4px 2px 10px; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.i8w-p4-shell .ael-track::-webkit-scrollbar{ height:8px; }
.i8w-p4-shell .ael-track::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }
.i8w-p4-shell .ael-track .ael-card{ flex:0 0 auto; width:108px; }
.i8w-p4-shell .ael-card[hidden]{ display:none !important; }
.i8w-p4-shell .ael-card .ael-emoji{ width:100%; height:60px; display:flex; align-items:center; justify-content:center; font-size:30px; line-height:1; border-radius:12px; background:#f7f9fc; box-shadow:inset 0 -3px 0 var(--cat,#94a3b8); }
.i8w-p4-shell .ael-arrow{ position:absolute; top:34px; z-index:4; width:30px; height:30px; border-radius:999px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 3px 10px rgba(15,23,42,.16); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; color:#475569; padding:0; }
.i8w-p4-shell .ael-arrow.prev{ right:-8px; }
.i8w-p4-shell .ael-arrow.next{ left:-8px; }
.i8w-p4-shell .ael-arrow.is-hidden{ display:none; }
.i8w-p4-shell .ael-arrow:disabled{ opacity:.32; cursor:default; box-shadow:none; }
.i8w-p4-shell .ael-empty{ padding:18px 12px; text-align:center; color:#64748b; font-size:13px; font-weight:700; }
.i8w-p4-shell .ael-footer{ border-top:1px solid #eef1f6; padding-top:12px; margin-top:8px; display:flex; flex-direction:column; gap:11px; }
.i8w-p4-shell .ael-selected{ font-size:13px; color:#475569; }
.i8w-p4-shell .ael-selected b{ color:#111827; }

/* Clean, category-tinted map tile for every non-realistic catalog element (emoji + name). */
.i8w-p4-shell .i8w-hall-item.is-clean{ background:#ffffff !important; border:2px solid var(--el-color,#94a3b8) !important; box-shadow:0 6px 16px rgba(15,23,42,.10) !important; color:#1f2937 !important; border-radius:16px !important; padding:9px 10px !important; overflow:hidden; }
.i8w-p4-shell .i8w-hall-item.is-clean::before{ content:''; position:absolute; left:0; right:0; top:0; height:5px; background:var(--el-color,#94a3b8); opacity:.92; pointer-events:none; }
.i8w-p4-shell .i8w-hall-item.is-clean .hall-item-body{ gap:5px !important; flex-direction:column !important; }
.i8w-p4-shell .i8w-hall-item.is-clean .hall-item-icon{ display:block !important; font-size:26px !important; line-height:1 !important; }
.i8w-p4-shell .i8w-hall-item.is-clean .hall-item-label{ display:block !important; font-size:13px !important; font-weight:800 !important; color:#334155 !important; line-height:1.15 !important; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.i8w-p4-shell .i8w-hall-item.is-clean.is-multi-selected{ outline:2.5px solid #7e57c2 !important; outline-offset:3px; }

/* =====================================================================
   R9-6 — "היסטוריית פעולות" (action-history) dialog + restore.
   ===================================================================== */
.i8w-p4-shell .i8w-hist{ position:relative; display:flex; flex-direction:column; gap:12px; max-height:min(78vh,720px); min-width:min(88vw,640px); }
.i8w-p4-shell .i8w-hist-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; padding:2px 2px 10px; border-bottom:1px solid #eef1f6; }
.i8w-p4-shell .i8w-hist-filters label{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:800; color:#475569; }
.i8w-p4-shell .i8w-hist-filters select,.i8w-p4-shell .i8w-hist-filters input{ height:34px; border:1px solid #d9e1ee; border-radius:8px; padding:0 8px; font-size:13px; background:#fff; color:#334155; font-family:inherit; }
.i8w-p4-shell .i8w-hist-filters [data-role="hist-reset"]{ height:34px; }
.i8w-p4-shell .i8w-hist-body{ overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-inline-end:2px; }
.i8w-p4-shell .i8w-hist-empty{ padding:26px 12px; text-align:center; color:#64748b; font-weight:700; }
.i8w-p4-shell .i8w-hist-date{ font-weight:900; font-size:13px; color:#0f172a; margin:6px 0 6px; position:sticky; top:0; background:#fff; padding:6px 2px; z-index:1; border-bottom:1px solid #f1f5f9; }
.i8w-p4-shell .i8w-hist-item{ border:1px solid #eef1f6; border-radius:12px; padding:10px 12px; margin-bottom:8px; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.05); }
.i8w-p4-shell .i8w-hist-item.is-restored{ opacity:.62; }
.i8w-p4-shell .i8w-hist-row1{ display:flex; align-items:center; gap:9px; }
.i8w-p4-shell .i8w-hist-badge{ flex:none; font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:999px; background:#f1f5f9; color:#475569; white-space:nowrap; }
.i8w-p4-shell .i8w-hist-badge.ent-table{ background:#eef2ff; color:#3730a3; }
.i8w-p4-shell .i8w-hist-badge.ent-element{ background:#ecfeff; color:#0e7490; }
.i8w-p4-shell .i8w-hist-badge.ent-guest{ background:#f0fdf4; color:#15803d; }
.i8w-p4-shell .i8w-hist-desc{ flex:1; min-width:0; font-size:13.5px; font-weight:700; color:#1f2937; line-height:1.3; }
.i8w-p4-shell .i8w-hist-time{ flex:none; font-size:12px; color:#94a3b8; font-weight:800; }
.i8w-p4-shell .i8w-hist-row2{ display:flex; align-items:center; gap:10px; margin-top:7px; flex-wrap:wrap; }
.i8w-p4-shell .i8w-hist-actor{ font-size:12px; color:#64748b; font-weight:700; }
.i8w-p4-shell .i8w-hist-ref{ font-size:12px; color:#475569; background:#f1f5f9; border-radius:6px; padding:1px 8px; }
.i8w-p4-shell .i8w-hist-tag{ font-size:11px; color:#9a3412; background:#ffedd5; border-radius:6px; padding:1px 8px; font-weight:800; }
.i8w-p4-shell .i8w-hist-restore{ margin-inline-start:auto; height:30px; padding:0 13px; border:1px solid #7e57c2; background:#fff; color:#7e57c2; border-radius:8px; font-weight:800; font-size:12.5px; cursor:pointer; transition:.14s; }
.i8w-p4-shell .i8w-hist-restore:hover{ background:#7e57c2; color:#fff; }
.i8w-p4-shell .i8w-hist-confirm{ position:absolute; inset:0; background:rgba(15,23,42,.38); display:flex; align-items:center; justify-content:center; border-radius:12px; z-index:6; }
.i8w-p4-shell .i8w-hist-confirm-card{ background:#fff; border-radius:16px; padding:20px; max-width:380px; width:92%; box-shadow:0 24px 60px rgba(0,0,0,.32); text-align:center; }
.i8w-p4-shell .i8w-hist-confirm-card p{ margin:0 0 16px; font-weight:700; color:#1f2937; line-height:1.4; }
.i8w-p4-shell .i8w-hist-confirm-acts{ display:flex; gap:10px; justify-content:center; }

/* R9-4: custom-element panel — title, preview, remove-image, and a supported-files note. */
.i8w-p4-shell .ael-custom-title{ font-weight:900; font-size:13.5px; color:#4c1d95; }
.i8w-p4-shell .ael-upload{ align-items:center; }
.i8w-p4-shell .ael-remove-img{ color:#b91c1c; border-color:#fecaca; }
.i8w-p4-shell .ael-upload-preview img{ height:52px; width:auto; max-width:120px; object-fit:contain; border-radius:8px; border:1px solid #e2e8f0; display:block; background:#fff; }
.i8w-p4-shell .ael-upload-note{ font-size:11.5px; color:#64748b; line-height:1.4; }

/* R9-2: brief highlight so a freshly-added element is clearly noticed. */
.i8w-p4-shell .i8w-hall-item.just-added{ outline:2.5px solid #7e57c2 !important; outline-offset:3px; animation:i8wJustAdded 1.5s ease; }
@keyframes i8wJustAdded{ 0%{ box-shadow:0 0 0 6px rgba(126,87,194,.35);} 100%{ box-shadow:0 0 0 6px rgba(126,87,194,0);} }

/* =====================================================================
   Workspace re-layout (thin top info row + map + right tools sidebar),
   display-percent zoom, dot-seats, duplicate placement, and browser-zoom
   responsiveness — appended, self-contained.
   ===================================================================== */

/* Smooth, flicker-free display-percent zoom: transition ONLY the stage transform in the normal
   view. (Full screen measures the stage rect mid-flight, so it stays transition-free.) */
.i8w-p4-workspace:not(.is-fullmap) .reference-stage{transition:transform .18s ease}

/* --- Browser-zoom / responsiveness: fluid columns (vw-based clamps shrink as the browser is
   zoomed IN so nothing overflows), and no page-level horizontal scroll. The internal map zoom
   (state.viewScale) and the browser zoom are independent — neither touches saved coordinates. --- */
.i8w-p4-workspace{overflow-x:hidden}
.i8w-p4-board-shell.i8w-p4-board-shell--split{grid-template-columns:clamp(146px,13vw,188px) minmax(0,1fr) clamp(158px,15vw,240px);gap:12px}
@media (max-width:1200px){.i8w-p4-board-shell.i8w-p4-board-shell--split{grid-template-columns:clamp(136px,14vw,168px) minmax(0,1fr) clamp(146px,16vw,200px);gap:8px}}

/* RIGHT tools sidebar — compact, grouped, scrolls on short screens. */
.i8w-p4-tools-side{min-height:0;overflow-y:auto;background:linear-gradient(180deg,#5b46e5,#7c3aed);border-radius:14px;padding:12px 10px;display:flex;flex-direction:column;gap:11px;box-shadow:0 2px 12px rgba(79,70,229,.22);scrollbar-width:thin}
.i8w-tools-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.i8w-tools-head-title{font-size:16px;font-weight:900;color:#fff;line-height:1.2}
.i8w-p4-tools-side .i8w-tb-close{height:32px;width:32px;border-radius:9px}
.i8w-tools-grp{display:flex;flex-direction:column;gap:6px;padding-top:9px;border-top:1px solid rgba(255,255,255,.22)}
.i8w-tools-grp-title{font-size:13px;font-weight:800;color:rgba(255,255,255,.72);letter-spacing:.2px;padding:0 2px}
/* R2-fix6: enlarge the tools-sidebar buttons for readability, bumped modestly so the longest Hebrew
   labels still fit the narrow column on one line (no wrap / no clipping / no layout break). */
.i8w-p4-tools-side .i8w-tb{width:100%;justify-content:flex-start;height:38px;font-size:13.5px;padding:0 10px}
.i8w-p4-tools-side .i8w-tb svg{width:15px;height:15px}

/* LEFT column: only the unassigned-guests list now (the event details moved to the thin top row). */
.i8w-p4-guests-side{display:flex;flex-direction:column;min-height:0}
.i8w-p4-guests-side .i8w-side-guests-panel{flex:1 1 auto;min-height:0;height:auto}

/* --- THIN top info row: one compact line above the map with the event details + counters.
   Wraps to a couple of thin lines only when there is not enough width; never grows into a tall
   card, and the browser zoom does not inflate it. --- */
.i8w-p4-topinfo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;direction:rtl;font-family:'Rubik',Arial,sans-serif;background:#fff;border:1px solid #e6e9f0;border-radius:12px;padding:7px 12px;margin-bottom:10px;flex:0 0 auto;font-size:15px;line-height:1.3;color:#1e293b}
/* Three zones (RTL): RIGHT = event details, CENTER = counters, LEFT = the close X.
   Each zone wraps internally on tight widths; the center stays centered, the X stays far-left. */
.i8w-ti-right{justify-self:start;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px}
.i8w-ti-center{justify-self:center;min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 10px}
/* Close X: a clear, centered RED X (never transparent / blending), stable across hover / active. */
.i8w-ti-close{justify-self:end;flex:0 0 auto;width:32px;height:32px;border-radius:9px;border:1px solid #fecaca;background:#fef2f2;color:#dc2626;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
/* R2-fix2: draw the X with pseudo-elements so it ALWAYS shows — immune to any svg/theme override
   (color / font-size / line-height / opacity / z-index / overflow / display / visibility cannot hide it).
   The inline <svg> is hidden to avoid a doubled X. Works identically in the normal and full-screen views. */
.i8w-ti-close{position:relative;overflow:visible !important;visibility:visible !important;opacity:1 !important}
.i8w-ti-close svg{display:none !important}
.i8w-ti-close::before,.i8w-ti-close::after{content:"" !important;position:absolute;top:50%;left:50%;width:18px;height:2.6px;border-radius:2px;background:#dc2626;opacity:1 !important;visibility:visible !important;z-index:1}
.i8w-ti-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.i8w-ti-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.i8w-ti-close:hover{background:#fee2e2;border-color:#fca5a5}
.i8w-ti-close:focus,.i8w-ti-close:focus-visible{outline:2px solid #fca5a5;outline-offset:1px}
.i8w-ti-close:hover::before,.i8w-ti-close:hover::after,.i8w-ti-close:active::before,.i8w-ti-close:active::after,.i8w-ti-close:focus::before,.i8w-ti-close:focus::after{background:#b91c1c}
.i8w-ti-lead{display:inline-flex;align-items:center;gap:22px;min-width:0}
/* Fix2: the phone (label + number) sits in its OWN block, clearly separated from the event name by a
   generous gap, and centred inside that block both horizontally and vertically — never stuck to the
   name and never cut. The "טלפון: <number>" order is preserved. Stays tidy at any row width. */
.i8w-ti-phone-block{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;align-self:stretch;text-align:center;white-space:nowrap}
/* R2-fix4: the "אולם" / "הערות" items (and their labels) are centred vertically AND horizontally inside
   their own blocks, so the title sits neatly with its value — never stuck to a side, too high/low or cut. */
.i8w-ti-right .i8w-ti-item{align-items:center;justify-content:center}
.i8w-ti-right .i8w-ti-item .i8w-ti-lbl{display:inline-flex;align-items:center;line-height:1.2}
.i8w-ti-notes{align-items:center}
.i8w-ti-notes [data-role="notes-view"],.i8w-ti-notes [data-role="notes-add-wrap"]{align-items:center}
.i8w-ti-name{font-size:17px;font-weight:900;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36vw}
.i8w-ti-phone{font-size:15px;font-weight:700;color:#475569;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.i8w-ti-phone-lbl{color:#475569}
.i8w-ti-sep{width:1px;height:15px;background:#e2e8f0;display:inline-block;flex:0 0 auto}
.i8w-ti-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.i8w-ti-lbl{font-size:13.5px;font-weight:700;color:#64748b}
.i8w-ti-val{font-weight:800;color:#1e293b}
.i8w-ti-num{font-weight:900;color:#4a37d6;font-size:16px}
/* Task: the CENTER record/seating counters read larger & clearer, while the row stays thin. */
.i8w-ti-center .i8w-ti-num{font-size:21px}
.i8w-ti-center .i8w-ti-lbl{font-size:15px}
.i8w-ti-center .i8w-ti-committed .i8w-p4-si-cin input[type=number]{font-size:17px;width:78px}
.i8w-ti-committed .i8w-p4-si-cin{display:inline-flex;align-items:center;gap:5px}
.i8w-ti-committed .i8w-p4-si-cin input[type=number]{width:66px;text-align:center;font-size:13px;border:1px solid #cbd5e1;border-radius:7px;padding:3px 6px;font-family:inherit;box-sizing:border-box}
.i8w-ti-notes [data-role="notes-view"],.i8w-ti-notes [data-role="notes-add-wrap"],.i8w-ti-notes [data-role="notes-edit-wrap"]{display:inline-flex;align-items:center;gap:6px}
.i8w-ti-notes .i8w-p4-si-notes-text{font-weight:700;color:#1e293b;max-width:min(260px,26vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.i8w-ti-notes .i8w-p4-si-link{background:none;border:none;color:#4f46e5;font-weight:700;cursor:pointer;font-size:12.5px;padding:0;font-family:inherit;text-decoration:underline}
.i8w-ti-notes .i8w-p4-si-ta{min-height:34px;width:min(240px,32vw);border:1px solid #cbd5e1;border-radius:8px;padding:5px 8px;font:inherit;box-sizing:border-box;resize:vertical}
.i8w-ti-notes .i8w-p4-si-btn{border:none;border-radius:999px;padding:5px 12px;font-weight:700;cursor:pointer;font-size:12.5px;font-family:inherit}
.i8w-ti-notes .i8w-p4-si-btn.primary{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}
.i8w-ti-notes .i8w-p4-si-btn.ghost{background:#eef2f7;color:#334155}
.i8w-ti-notes .i8w-p4-si-edit-acts{display:inline-flex;gap:6px}
.i8w-p4-si-status{font-size:11px}
.i8w-p4-si-status.is-ok{color:#065f46}
.i8w-p4-si-status.is-err{color:#b32d2e}
.i8w-p4-topinfo [hidden]{display:none !important}

/* --- Seats drawn as small simple DOTS (no chair glyph). DISPLAY ONLY: the seat COUNT, the
   seat positions, the capacity logic and the guest assignment are all unchanged — only the glyph
   changes. Applies to existing and new tables, every shape, at every zoom. The dot color reflects
   the seat state. The dot is a circle sized from --seat-w (set per table by the JS). --- */
.i8w-p4-shell .table-seat{width:var(--seat-w,3px) !important;height:var(--seat-w,3px) !important;min-width:.9px;min-height:.9px;background:var(--chair-col,#7e57c2) !important;border:none !important;border-radius:50% !important;box-shadow:0 0 0 .4px rgba(255,255,255,.85) !important;transform:translate(-50%,-50%) rotate(var(--seat-rot,0deg)) translateY(-40%) !important}
.i8w-p4-shell .table-seat .ch-back,
.i8w-p4-shell .table-seat .ch-seat{display:none !important}
/* Faint ring keeps each tiny dot legible on both the purple table body and the light map. */
.i8w-p4-shell .table-seat.seat-empty{background:#cdbdea !important}
.i8w-p4-shell .table-seat.seat-occupied{background:#6d28d9 !important}
.i8w-p4-shell .table-seat.seat-arrived{background:#16a34a !important}

/* --- Duplicate placement: the ghost copy that follows the cursor, and the cancel/instruction
   bar. The ghost never intercepts clicks (the placing click reaches the canvas), and its editing
   chrome is hidden so it reads as a clean preview. --- */
.i8w-p4-shell .i8w-p4-ghost{pointer-events:none !important;opacity:.55 !important;z-index:70 !important}
/* Force the whole ghost subtree to ignore the pointer — a child .table-box otherwise re-enables
   pointer-events:auto and would swallow the placing click (esp. for a duplicated AREA group). */
.i8w-p4-shell .i8w-p4-ghost *{pointer-events:none !important}
.i8w-p4-shell .i8w-p4-ghost-group{position:absolute}
.i8w-p4-shell .i8w-p4-ghost .entity-tools,
.i8w-p4-shell .i8w-p4-ghost .entity-resize-handles,
.i8w-p4-shell .i8w-p4-ghost .table-rotate-handle,
.i8w-p4-shell .i8w-p4-ghost .table-resizer,
.i8w-p4-shell .i8w-p4-ghost .hall-item-resizer,
.i8w-p4-shell .i8w-p4-ghost .table-badges{display:none !important}
.i8w-p4-shell .reference-canvas.i8w-p4-placing{cursor:copy}
.i8w-p4-place-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:12px;background:#1e293b;color:#fff;border-radius:12px;padding:9px 14px;box-shadow:0 12px 34px rgba(15,23,42,.30);font-family:'Rubik',Arial,sans-serif;font-size:13.5px;font-weight:700;direction:rtl}
.i8w-p4-place-cancel{border:none;border-radius:9px;padding:6px 12px;font-weight:800;font-size:12.5px;cursor:pointer;background:#ef4444;color:#fff;font-family:inherit}

/* Printing: the sidebars + the thin info row are UI, never part of a printed page. */
.i8w-p4-workspace.is-printing-board .i8w-p4-tools-side,
.i8w-p4-workspace.is-printing-board .i8w-p4-guests-side,
.i8w-p4-workspace.is-printing-board .i8w-p4-topinfo,
.i8w-p4-workspace.is-printing-host .i8w-p4-tools-side,
.i8w-p4-workspace.is-printing-host .i8w-p4-guests-side,
.i8w-p4-workspace.is-printing-host .i8w-p4-topinfo{display:none !important}
@media print{
  .i8w-p4-tools-side,.i8w-p4-guests-side,.i8w-p4-topinfo{display:none !important}
  .i8w-p4-board-shell.i8w-p4-board-shell--split{display:block !important}
}

/* ════════════════════════════════════════════════════════════════════════════
   Browser-zoom compensation — the FULL seating page always LOOKS like a 50%
   browser zoom, whatever the real Chrome/Edge zoom is.
   JS (p4.js) detects the real browser zoom, computes ONE compensating scale
   (0.5 / detectedZoom), sets it as --i8w-zc on the #i8w-p4-app shell and adds
   the i8w-zoomcomp-on class — only while the full-page workspace is open, and
   never in the inline hostess view or on mobile. Everything here is scoped to
   that class: nothing below can touch html/body, the personal area, the tabs
   or any other screen, and removing the class removes every effect at once.
   The workspace wrapper is scaled as ONE unit (top bar, side columns, map,
   tables, chairs, buttons — identical proportions), and its layout box is
   enlarged by exactly 1/scale, so both the layout width and the rendered size
   match a true 50% zoom. No fit-to-screen is added: the scale is fixed by the
   formula alone; spare room stays empty and overflow simply scrolls.
   ════════════════════════════════════════════════════════════════════════════ */
.i8w-p4-shell.i8w-zoomcomp-on{
  --i8w-zc:1; /* real value set inline by JS — the ONE source of truth */
  /* the emulated ("as if 50%") viewport — used below wherever the original
     styles use vw/vh, because inside the scaled subtree those units still
     resolve against the REAL viewport and would break the 50%-look parity */
  --i8w-zvw:calc(100vw / var(--i8w-zc,1));
  --i8w-zvh:calc(100vh / var(--i8w-zc,1));
  --i8w-zdvh:calc(100dvh / var(--i8w-zc,1));
}
/* The whole full-page workspace scales as one unit. transform (not zoom) so
   Chrome and Edge behave identically and event geometry stays predictable. */
.i8w-p4-shell.i8w-zoomcomp-on .i8w-p4-workspace{
  /* Anchor explicitly to the viewport's top-left inside the fixed overlay so the
     enlarged layout box scales back onto the screen exactly — in RTL the static
     flow would anchor the oversized box to the RIGHT edge and push it off-screen. */
  position:absolute;
  inset:auto;
  left:0;
  top:0;
  box-sizing:border-box;
  transform:scale(var(--i8w-zc,1));
  transform-origin:0 0;
  width:var(--i8w-zvw);
  height:var(--i8w-zdvh);
  min-height:var(--i8w-zdvh);
}
/* The page's own modal windows live OUTSIDE the workspace element (a
   position:fixed, inset:0 sibling inside the shell). Scale them the same
   way so every window matches the page. */
.i8w-p4-shell.i8w-zoomcomp-on .i8w-p4-modal{
  inset:auto !important;
  left:0 !important;
  top:0 !important;
  box-sizing:border-box !important;   /* it carries padding — keep the border box at exactly 1/scale of the viewport */
  width:var(--i8w-zvw) !important;
  height:var(--i8w-zdvh) !important;
  transform:scale(var(--i8w-zc,1)) !important;
  transform-origin:0 0 !important;
}
/* ---- vw/vh-based lengths inside the page, recomputed against the emulated
   viewport so proportions come out exactly as at a true 50% browser zoom.
   Same values as the originals — only the viewport reference changes. ---- */
.i8w-p4-shell.i8w-zoomcomp-on .reference-layout{height:calc(var(--i8w-zvh) - 92px)}
.i8w-p4-shell.i8w-zoomcomp-on .checkin-list,
.i8w-p4-shell.i8w-zoomcomp-on .host-results{max-height:calc(var(--i8w-zvh) - 180px)}
.i8w-p4-shell.i8w-zoomcomp-on .host-results-modal,
.i8w-p4-shell.i8w-zoomcomp-on .checkin-list-modal{max-height:calc(var(--i8w-zvh) * .9 - 200px)}
.i8w-p4-shell.i8w-zoomcomp-on .i8w-p4-modal .i8w-p4-modal-card{width:min(1180px,calc(var(--i8w-zvw) * .96));max-height:calc(var(--i8w-zvh) * .9)}
.i8w-p4-shell.i8w-zoomcomp-on .reference-canvas{height:calc(var(--i8w-zvh) - 175px) !important}
.i8w-p4-shell.i8w-zoomcomp-on .i8w-ref-canvas-shell.i8w-stage-card .reference-canvas{height:auto !important}
.i8w-p4-shell.i8w-zoomcomp-on .i8w-live-modal-list{max-height:calc(var(--i8w-zvh) * .6)}
.i8w-p4-shell.i8w-zoomcomp-on .i8w-live-history-list{max-height:calc(var(--i8w-zvh) * .6)}
.i8w-p4-shell.i8w-zoomcomp-on .i8w-live-canvas{height:calc(var(--i8w-zvh) - 220px)}
.i8w-p4-shell.i8w-zoomcomp-on .ael-form--rich{max-height:min(calc(var(--i8w-zvh) * .8),780px)}
.i8w-p4-shell.i8w-zoomcomp-on .i8w-hist{max-height:min(calc(var(--i8w-zvh) * .78),720px);min-width:min(calc(var(--i8w-zvw) * .88),640px)}
.i8w-p4-shell.i8w-zoomcomp-on .i8w-p4-board-shell.i8w-p4-board-shell--split{grid-template-columns:clamp(146px,calc(var(--i8w-zvw) * .13),188px) minmax(0,1fr) clamp(158px,calc(var(--i8w-zvw) * .15),240px);gap:12px}
.i8w-p4-shell.i8w-zoomcomp-on .i8w-ti-name{max-width:calc(var(--i8w-zvw) * .36)}
.i8w-p4-shell.i8w-zoomcomp-on .i8w-ti-notes .i8w-p4-si-notes-text{max-width:min(260px,calc(var(--i8w-zvw) * .26))}
.i8w-p4-shell.i8w-zoomcomp-on .i8w-ti-notes .i8w-p4-si-ta{width:min(240px,calc(var(--i8w-zvw) * .32))}
/* Full-map view inside the compensated page: same 100dvh / 24vh values,
   resolved against the emulated viewport. */
.i8w-p4-shell.i8w-zoomcomp-on .i8w-p4-workspace.is-fullmap .i8w-p4-panel[data-panel="board"].active{height:var(--i8w-zdvh);min-height:var(--i8w-zdvh)}
.i8w-p4-shell.i8w-zoomcomp-on .i8w-p4-workspace.is-fullmap .i8w-p4-board-shell{height:var(--i8w-zdvh);grid-template-rows:minmax(0,1fr) clamp(150px,calc(var(--i8w-zvh) * .24),260px)}
/* Printing must come out exactly as before — strip the compensation there. */
@media print{
  .i8w-p4-shell.i8w-zoomcomp-on .i8w-p4-workspace,
  .i8w-p4-shell.i8w-zoomcomp-on .i8w-p4-modal{
    position:static !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Feature additions: centralized table numbering, duplicate-with-numbers step,
   and "חזרה לנקודה זו" in the action history. New elements only — no existing
   rule is modified.
   ════════════════════════════════════════════════════════════════════════════ */
/* "חזרה לנקודה זו" — sits next to the existing restore button, amber accent so
   the full-rewind action is visually distinct from the single-action restore. */
.i8w-p4-shell .i8w-hist-rollback{ height:30px; padding:0 13px; border:1px solid #d97706; background:#fff; color:#b45309; border-radius:8px; font-weight:800; font-size:12.5px; cursor:pointer; transition:.14s; }
.i8w-p4-shell .i8w-hist-rollback:hover{ background:#d97706; color:#fff; }
/* Centralized numbering modal: mini-sketch preserving relative positions. */
.i8w-num-body{ display:flex; flex-direction:column; gap:12px; }
.i8w-num-hint{ font-size:13.5px; color:#475569; font-weight:600; }
.i8w-num-sketch-wrap{ overflow:auto; max-height:46vh; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; padding:14px; }
.i8w-num-sketch{ position:relative; margin-inline:auto; }
.i8w-num-tile{ position:absolute; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:#eef2ff; border:1.5px solid #818cf8; border-radius:8px; padding:2px; }
.i8w-num-tile.is-round{ border-radius:14px; }
.i8w-num-tile.is-dup{ background:#fef2f2; border-color:#ef4444; }
.i8w-num-cur{ font-size:10.5px; font-weight:700; color:#64748b; line-height:1; }
.i8w-num-input{ width:52px; max-width:90%; height:26px; text-align:center; border:1px solid #cbd5e1; border-radius:6px; font-weight:800; font-size:13px; }
.i8w-num-tile.is-dup .i8w-num-input{ border-color:#ef4444; color:#b91c1c; }
.i8w-num-auto{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:13.5px; font-weight:700; color:#334155; }
.i8w-num-auto label{ display:flex; align-items:center; gap:8px; }
.i8w-num-start{ width:84px; height:32px; text-align:center; border:1px solid #cbd5e1; border-radius:8px; font-weight:800; }
.i8w-num-auto-note{ font-size:12px; color:#64748b; font-weight:600; }
.i8w-num-status{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:10px; padding:8px 12px; font-size:13px; font-weight:700; }
.i8w-num-save[disabled]{ opacity:.55; cursor:not-allowed; }
/* Duplicate-numbering step dialog (extends the existing dup-card look). */
.i8w-p4-dup-card.i8w-dupnum-card{ width:min(560px, 92vw); max-height:80vh; overflow:auto; }
.i8w-dupnum-modes{ display:flex; gap:18px; justify-content:center; margin:10px 0 6px; font-size:14px; font-weight:700; color:#334155; }
.i8w-dupnum-modes label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.i8w-dupnum-auto{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:6px; font-weight:700; font-size:13.5px; color:#334155; }
.i8w-dupnum-auto label{ display:flex; align-items:center; gap:8px; }
.i8w-dupnum-start{ width:84px; height:32px; text-align:center; border:1px solid #cbd5e1; border-radius:8px; font-weight:800; }
.i8w-dupnum-preview{ font-size:12.5px; color:#4f46e5; font-weight:700; min-height:16px; }
.i8w-dupnum-manual{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin:6px 0; text-align:right; font-size:12.5px; font-weight:700; color:#334155; }
.i8w-dupnum-field{ display:flex; flex-direction:column; gap:3px; }
.i8w-dupnum-field input{ height:30px; text-align:center; border:1px solid #cbd5e1; border-radius:8px; font-weight:800; }

/* ══════════════════════════════════════════════════════════════════════════
   HOSTESS LINK — full width, plus the two read-only lookups
   Everything below is scoped to .i8w-hostess-only (the hostess link) or to the
   two new popups. The admin view, the event-owner view, the check-in screen
   itself, its cards, its search, its arrival marking, the header, the logo and
   the type sizes are all untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* The hostess screen breaks out of the theme's narrow centre column and uses
   almost the whole window, with one small even gutter on each side. Only the
   page that actually contains the hostess screen gets the clip, so no other
   page on the site is affected. */
html:has(.i8w-p4-shell.i8w-hostess-only){overflow-x:clip;}
.i8w-p4-shell.i8w-hostess-only{
	width:100vw;max-width:100vw;box-sizing:border-box;
	margin-inline:calc(50% - 50vw);
	padding-inline:clamp(10px,2vw,28px);}
/* With the extra room the cards grid fills the width by itself: as many cards
   per row as fit, never stretched, always the same gap. The fixed 5/4/3/2/1
   steps above are replaced only here, inside the hostess screen. */
@media (min-width:561px){
	.i8w-hostess-only .hostess-checkin-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
}

/* The site header must sit ABOVE the event bar, never on it. The bar keeps its
   place in the normal flow (it is never lifted over anything that comes before
   it), and the screen opens with a clear, even gap under whatever the theme puts
   at the top, so the two never touch or overlap. */
.i8w-p4-shell.i8w-hostess-only{padding-top:clamp(34px,4.5vw,64px);}
.i8w-hostess-only .i8w-p4-topbar{position:static;z-index:auto;margin-top:0;}

/* The two buttons live INSIDE the event bar, beside the name and the counters:
   same height as each other, one tidy row on a wide screen, wrapping neatly and
   then going full width on a phone. They are styled to belong to the bar — light
   glass on the purple — rather than to float over it. */
/* White with purple type is the RESTING look, not a hover effect. There is only
   one declaration of the colours for these two buttons — the purple fill they
   used to carry is gone rather than overridden, so nothing is left that could win
   the default state back. Hover only deepens the type and the shadow slightly. */
.i8w-hostess-actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 6px;justify-content:center;}
.i8w-hostess-actions .i8w-hostess-action{
	flex:0 1 260px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
	background:#fff;color:#4f46e5;border:1px solid rgba(255,255,255,.92);border-radius:16px;
	font-family:'Rubik',Arial,sans-serif;font-size:16px;font-weight:800;cursor:pointer;
	box-shadow:0 4px 14px rgba(15,23,42,.18);}
.i8w-hostess-actions .i8w-hostess-action:active{transform:translateY(1px);}
/* Hall sketch is desktop-only on the hostess link: below 768px the button is shown
   greyed-out and inert (pointer-events:none — no click, no popup, no sketch load).
   Width-based, so a regular laptop is never affected; the JS dispatcher guards too. */
@media (max-width: 767.98px){
	.i8w-hostess-action[data-action="hostess-open-sketch"],
	.i8w-hostess-only .i8w-p4-topbar .i8w-hostess-actions--bar button.i8w-hostess-action[data-action="hostess-open-sketch"],
	.i8w-p4-shell .i8w-hostess-actions--bar button.i8w-hostess-action[data-action="hostess-open-sketch"]{
		opacity:.55 !important;filter:grayscale(.5) !important;cursor:default !important;
		pointer-events:none !important;box-shadow:none !important;transform:none !important;}
}
.i8w-hostess-action.is-sketch-blocked{opacity:.55 !important;filter:grayscale(.5) !important;cursor:default !important;pointer-events:none !important;}

/* In-bar variant */
.i8w-hostess-only .i8w-p4-topbar .i8w-hostess-actions--bar{
	margin:0;gap:10px;justify-content:flex-end;flex:0 0 auto;}
/* Solid white with purple type. Declared !important and matched on the button
   itself, so a themed .i8w-btn rule or a stale cached stylesheet cannot tint it
   back towards the bar's own colour — these two have to stand out on the purple. */
.i8w-hostess-only .i8w-p4-topbar .i8w-hostess-actions--bar button.i8w-hostess-action,
.i8w-p4-shell .i8w-hostess-actions--bar button.i8w-hostess-action{
	flex:0 0 auto;min-height:46px;padding:0 22px;font-size:15px;font-weight:800;border-radius:14px;
	background:#fff !important;background-image:none !important;
	border:1px solid rgba(255,255,255,.92) !important;color:#4f46e5 !important;
	box-shadow:0 4px 14px rgba(15,23,42,.18) !important;white-space:nowrap;}
/* The resting colours are written on the button itself, so hover is expressed
   through properties the element does NOT carry inline — otherwise it could not
   show at all. A faint tint and lift, nothing more. */
.i8w-hostess-only .i8w-p4-topbar .i8w-hostess-actions--bar button.i8w-hostess-action:hover,
.i8w-p4-shell .i8w-hostess-actions--bar button.i8w-hostess-action:hover{
	filter:brightness(.965) saturate(1.06);transform:translateY(-1px);}
.i8w-hostess-only .i8w-p4-topbar .i8w-hostess-actions--bar button.i8w-hostess-action:active,
.i8w-p4-shell .i8w-hostess-actions--bar button.i8w-hostess-action:active{
	background:#ede9fe !important;}
/* The bar lays out as: event name · counters · buttons — spread across one row,
   never overlapping, wrapping to the next line when the width runs out. */
.i8w-hostess-only .i8w-p4-topbar-info{
	display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;width:100%;}
.i8w-hostess-only .i8w-p4-topbar-info>*{min-width:0;}
@media (max-width:900px){
	.i8w-hostess-only .i8w-p4-topbar .i8w-hostess-actions--bar{width:100%;justify-content:stretch;}
	.i8w-hostess-only .i8w-p4-topbar .i8w-hostess-actions--bar .i8w-hostess-action{flex:1 1 0;}
}
@media (max-width:560px){
	.i8w-hostess-actions{flex-direction:column;}
	.i8w-hostess-actions .i8w-hostess-action{flex:1 1 auto;width:100%;}
	.i8w-hostess-only .i8w-p4-topbar .i8w-hostess-actions--bar{flex-direction:row;}
}

/* ── Hostess screen: branding + spacing (three approved design fixes) ──
   1) The EVENT360 logo sits dead-centre (horizontally + vertically) of the purple
      bar — the shipped logo artwork as-is, rendered white by a CSS filter (the PNG
      is transparent), original ratio kept, never stretched and never touching the
      edges. Decorative only (pointer-events:none). Hidden on narrow screens where
      the bar's own content wraps into the centre.
   2) The bar starts right at the top of the content area — a small, even gap under
      the site header instead of the previous large one — and is slightly taller;
      its existing rounded corners and the small gap to the guest area below stay.
   3) Small, symmetric side margins: the purple bar and the guest area share the
      same inner width and no longer run edge-to-edge. */
.i8w-hostess-only .i8w-p4-topbar{position:relative;padding:20px 26px;min-height:92px;}
/* Two-row hostess header (approved layout).
   ROW 1 — branding: the event name on the RIGHT, a SMALL logo on the far LEFT.
   ROW 2 — operations: the four counter pills and the two lookup buttons, under a
   soft divider. The logo is a plain static flex item (never absolute), so it can
   never overlap anything; sizing mirrors the inline fallback on the tag. */
.i8w-hostess-only .i8w-hostess-bar-row1{
	display:flex;align-items:center;justify-content:space-between;gap:14px;
	flex:1 1 100%;width:100%;min-width:0;}
.i8w-hostess-only .i8w-hostess-bar-row2{
	display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
	flex:1 1 100%;width:100%;min-width:0;
	border-top:1px solid rgba(255,255,255,.18);padding-top:13px;margin-top:2px;}
.i8w-hostess-topbar-logo{
	position:static;transform:none;
	height:30px;width:auto;max-width:140px;min-width:0;
	flex:0 1 auto;object-fit:contain;
	filter:brightness(0) invert(1);
	pointer-events:none;user-select:none;}
@media (max-width:900px){.i8w-hostess-topbar-logo{display:none !important;}}
.i8w-p4-shell.i8w-hostess-only{
	padding-top:14px;
	padding-inline:clamp(16px,2vw,32px);}

/* ── The two popups ──
   Wide across most of the screen but deliberately NOT the full height, so the
   card starts well below whatever sits at the top of the page and its × is never
   covered. The heading is also pinned to the top of the card, so the × stays in
   place no matter how far the content is scrolled. The popup is lifted above any
   page furniture so a site header can never be drawn over it. */
/* The card can never begin higher than this, so a site header pinned to the top
   of the page cannot reach it and the × stays in the clear at every screen size.
   The page behind is dimmed well down so the popup reads as the thing in focus,
   while the screen underneath stays recognisable. */
.i8w-hostess-only .i8w-p4-modal{z-index:2147483000;align-items:center;padding:104px 16px 16px;
	background:rgba(9,14,30,.78);backdrop-filter:blur(1.5px);}
.i8w-p4-modal-card.is-hostess-modal{
	width:min(1720px,95vw);max-width:95vw;
	max-height:74vh;display:flex;flex-direction:column;padding:18px 20px;}
.i8w-p4-modal-card.is-hostess-modal .modal-head{
	position:sticky;top:-18px;z-index:4;background:#fff;
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	margin:-18px -20px 10px;padding:14px 20px 10px;border-bottom:1px solid rgba(99,102,241,.12);}
.i8w-p4-modal-card.is-hostess-modal .modal-close{
	flex:0 0 auto;width:40px;height:40px;border-radius:12px;font-size:20px;line-height:1;
	background:#f1f5f9;border:1px solid #e2e8f0;color:#334155;cursor:pointer;}
.i8w-p4-modal-card.is-hostess-modal .modal-close:hover{background:#e2e8f0;}
.i8w-p4-modal-card.is-hostess-modal .hostess-sketch-event{font-weight:700;color:#4f46e5;}
.i8w-p4-modal-card.is-hostess-modal .modal-foot{display:flex;justify-content:center;padding-top:12px;}
.hostess-find-empty{padding:26px;text-align:center;color:#64748b;font-weight:600;}

/* Guest finder — one card per table, ordered by table number. */
.hostess-find-results{overflow:auto;flex:1 1 auto;overscroll-behavior:contain;}
.hostess-find-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;align-items:start;padding:4px 2px 8px;}
.hostess-find-table{border:1px solid rgba(99,102,241,.16);border-radius:16px;background:#fff;overflow:hidden;}
.hostess-find-table-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid rgba(99,102,241,.12);}
.hostess-find-table-head strong{font-size:15px;color:#0f172a;}
.hostess-find-table-head .muted{font-size:12px;color:#64748b;}
.hostess-find-table-head .table-color-chip{width:12px;height:12px;border-radius:50%;flex:0 0 auto;}
.hostess-find-table-body{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;}
.hostess-find-guest{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;border-radius:10px;}
.hostess-find-guest .dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:0 0 auto;}
.hostess-find-guest .meta-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.hostess-find-guest strong{font-size:14px;color:#0f172a;}
.hostess-find-guest small{font-size:12px;color:#64748b;}
.hostess-find-guest.guest-arrived-row{background:#dcfce7;}
.hostess-find-guest.is-hit{background:#eef2ff;outline:2px solid #6366f1;outline-offset:-2px;}
.hostess-find-pending .hostess-find-table-head{background:#fff7ed;}
.hostess-find-pending{border-color:#fed7aa;}

/* Sketch — a copy of the saved map that cannot be touched. Every editing handle
   the shared builders emit is hidden, and the whole stage ignores the pointer,
   so nothing can be dragged, resized, rotated, added or deleted from here. */
/* Sketch view — clean FULLSCREEN overlay (approved demo): a uniform dark background that
   covers the entire page (header, hostess screen, everything), showing ONLY the sketch —
   centred and auto-fitted as one unit — plus a single top-left X. No title, no texts,
   no zoom controls, no bottom close. Scoped to the sketch view only. */
/* The sketch IS the screen. There is no dark surround with a drawing floating in it any
   more — the white hall surface runs edge to edge and the hall is centred inside it at the
   largest scale that still shows all of it. Nothing sits beside the drawing. */
.i8w-p4-modal.is-sketch-open{padding:0;align-items:center;justify-content:center;background:#fff;backdrop-filter:none;}
.i8w-hostess-only .i8w-p4-modal.is-sketch-open{padding:0;background:#fff;}
.i8w-p4-modal-card.is-hostess-modal.is-hostess-sketch{
	width:100vw;max-width:100vw;height:100vh;max-height:100vh;
	background:transparent;border-radius:0;box-shadow:none;padding:0;
	display:flex;align-items:center;justify-content:center;overflow:hidden;}
/* The one close control: a clear, comfortable X floating top-left above the dark
   background — it never covers the fitted sketch (the fit leaves room for it). */
.i8w-p4-modal-card.is-hostess-sketch .modal-close.hostess-sketch-fs-close{
	position:static;z-index:6;flex:0 0 auto;
	width:44px;height:44px;border-radius:14px;font-size:20px;line-height:1;
	background:#fff;border:1px solid #e6e9f2;color:#1e293b;
	box-shadow:0 6px 20px rgba(15,23,42,.12);
	display:flex;align-items:center;justify-content:center;cursor:pointer;}
.i8w-p4-modal-card.is-hostess-sketch .modal-close.hostess-sketch-fs-close:hover{background:#f8fafc;}

/* Floating strip: the event name, the key to the colours and the single close control.
   It hovers OVER the hall instead of taking a column beside it, so the drawing keeps the
   whole screen. Nothing here is a tool — there is nothing to edit on this screen. */
.i8w-p4-modal-card.is-hostess-sketch .hs-hud{
	position:fixed;top:14px;right:14px;left:14px;z-index:7;
	display:flex;align-items:center;gap:12px;pointer-events:none;}
.i8w-p4-modal-card.is-hostess-sketch .hs-hud > *{pointer-events:auto;}
.hs-hud-name{
	background:rgba(255,255,255,.9);border:1px solid #e6e9f2;border-radius:14px;
	padding:8px 15px;box-shadow:0 6px 20px rgba(15,23,42,.10);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
	font-size:13.5px;font-weight:700;color:#1e293b;margin-inline-end:auto;
	max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hs-hud-name em{font-style:normal;font-weight:500;color:#94a3b8;font-size:11.5px;margin-inline-start:8px;}
.hs-hud-legend{
	display:flex;align-items:center;gap:14px;
	background:rgba(255,255,255,.9);border:1px solid #e6e9f2;border-radius:14px;
	padding:9px 15px;box-shadow:0 6px 20px rgba(15,23,42,.10);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
	font-size:11.5px;font-weight:600;color:#64748b;white-space:nowrap;}
.hs-hud-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;
	margin-inline-end:6px;vertical-align:-1px;}
.hs-hud-legend .lg-in{background:#0f9d6e;}
.hs-hud-legend .lg-wait{background:#f2a93b;}
.hs-hud-legend .lg-free{background:#e2e7ef;border:1px solid #c9d2e0;}
.hs-hud-key{padding-inline-start:13px;border-inline-start:1px solid #e6e9f2;color:#94a3b8;}
.hs-hud-key b{color:#0f9d6e;font-weight:700;}
/* The colour key stays on every screen the sketch exists on (>=768px) — a hostess on a
   tablet needs it just as much; only the longer numbers explainer is dropped there. */
@media (max-width:1024px){.hs-hud-key{display:none;}}
/* Laid out from the TOP, not flex-centred: the fit computes the drawing's exact vertical
   position itself (under the floating strip, an equal gap above and below), and a flex
   centre over the whole screen would slide the hall up behind the strip. Horizontal
   centring stays with the auto margins on the canvas. */
.i8w-p4-modal-card.is-hostess-sketch .hostess-sketch-viewport{
	width:100%;height:100%;min-height:0;overflow:hidden;background:transparent;border:none;border-radius:0;
	display:block;}
.i8w-p4-modal-card.is-hostess-sketch .hostess-sketch-canvas{margin:0 auto;}
/* No card, no frame, no shadow — the drawing sits directly on the screen. A faint floor
   grid replaces the border so the hall still reads as a room. */
/* transform-origin stays as the shared rule sets it (top right): the fit sizes the canvas
   to stage × zoom and lets the viewport centre THAT, so changing the origin here would
   scale the drawing out of its own box. */
.i8w-p4-modal-card.is-hostess-sketch .hostess-sketch-stage{
	box-shadow:none;background:transparent;border-radius:0;}
.i8w-p4-modal-card.is-hostess-sketch .hostess-sketch-viewport::before{
	content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
	background-image:linear-gradient(#eef1f8 1px,transparent 1px),
	                 linear-gradient(90deg,#eef1f8 1px,transparent 1px);
	background-size:46px 46px;opacity:.5;}
.i8w-p4-modal-card.is-hostess-sketch .hostess-sketch-canvas{position:relative;z-index:1;}
.hostess-sketch-tables{position:absolute;inset:0;}
.i8w-p4-modal-card.is-hostess-sketch .hostess-sketch-loading{color:#e2e8f0;font-weight:700;}
.i8w-p4-modal-card.is-hostess-sketch .hostess-find-empty{color:#cbd5e1;}
.hostess-sketch-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.hostess-sketch-zoom{display:inline-flex;align-items:center;gap:8px;}
.hostess-sketch-zoom-val{min-width:52px;text-align:center;font-weight:700;color:#334155;}
.hostess-sketch-note{font-size:12px;color:#64748b;font-weight:600;}
.hostess-sketch-viewport{position:relative;flex:1 1 auto;min-height:340px;overflow:auto;overscroll-behavior:contain;background:#f8fafc;border:1px solid rgba(99,102,241,.14);border-radius:16px;}
.hostess-sketch-loading{padding:26px;text-align:center;color:#64748b;font-weight:600;}
.hostess-sketch-canvas{position:relative;margin:12px auto;}
.hostess-sketch-canvas.is-empty{width:auto!important;height:auto!important;}
.hostess-sketch-stage{position:relative;transform-origin:top right;background:#fff;border-radius:12px;box-shadow:0 2px 14px rgba(15,23,42,.08);}
.hostess-sketch-layer{position:absolute;inset:0;}
.hostess-sketch-map{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.hostess-sketch-stage,.hostess-sketch-stage *{pointer-events:none!important;user-select:none;}
.hostess-sketch-stage .entity-tools,
.hostess-sketch-stage .hall-item-tools,
.hostess-sketch-stage .table-tools,
.hostess-sketch-stage .resize-handle,
.hostess-sketch-stage [class*="resize-h"],
.hostess-sketch-stage [data-edit-hall-item],
.hostess-sketch-stage [data-delete-hall-item],
.hostess-sketch-stage [data-duplicate-hall-item]{display:none!important;}

/* ══════════════════════════════════════════════════════════════════════════
   HOSTESS SKETCH — viewing surface (approved design)

   A table here is drawn by the hostess-only renderer, so there is no editing
   chrome to hide: what is painted is the table, its chairs and its numbers.
   Nothing in this block affects the seating EDITOR — every selector is under
   .hostess-sketch-stage / .is-hostess-sketch, which exist only on this screen.
   ══════════════════════════════════════════════════════════════════════════ */

/* The stage stays inert (the rule above), but a table has to be tappable. Two
   classes beat the "* " rule above at equal !important weight. */
.hostess-sketch-stage .hs-table{pointer-events:auto!important;cursor:pointer;}

.hostess-sketch-stage .hs-table{
	position:absolute;border:0;padding:0;margin:0;background:none;
	font-family:inherit;-webkit-tap-highlight-color:transparent;}
.hostess-sketch-stage .hs-table .hs-body{
	position:absolute;inset:0;border:2.4px solid #7c5cd6;background:#fff;
	transition:box-shadow .18s ease,border-color .18s ease,background .18s ease;}
.hostess-sketch-stage .hs-table.round .hs-body,
.hostess-sketch-stage .hs-table.oval .hs-body{border-radius:50%;}
.hostess-sketch-stage .hs-table.square .hs-body,
.hostess-sketch-stage .hs-table.rect .hs-body,
.hostess-sketch-stage .hs-table.knights .hs-body{border-radius:14px;}
/* Green means one thing only on this screen: everyone seated here has arrived. */
.hostess-sketch-stage .hs-table.is-allin .hs-body{border-color:#34d399;background:#e8f8f1;}
.hostess-sketch-stage .hs-table.is-reserve .hs-body{border-color:#c4b5fd;background:#fbfaff;border-style:dashed;}

.hostess-sketch-stage .hs-core{
	position:absolute;inset:0;display:flex;flex-direction:column;
	align-items:center;justify-content:center;gap:3px;}
/* Big enough to read across the hall mid-event: the arrivals line and the table number
   are the two things a hostess looks for, so they carry real size. Both live inside
   .hs-core, which is centred over the table body, and the sizes are chosen so even the
   narrowest table holds them with room to spare. */
.hostess-sketch-stage .hs-occ{
	font-size:18px;font-weight:800;color:#0f9d6e;line-height:1;
	font-variant-numeric:tabular-nums;letter-spacing:-.2px;}
.hostess-sketch-stage .hs-occ em{font-style:normal;color:#94a3b8;font-weight:500;}
.hostess-sketch-stage .hs-occ i{font-style:normal;color:#7c5cd6;font-weight:600;}
.hostess-sketch-stage .hs-occ.is-empty{color:#94a3b8;font-weight:600;font-size:15px;}
.hostess-sketch-stage .hs-no{
	font-size:30px;font-weight:800;color:#1e293b;line-height:1;font-variant-numeric:tabular-nums;}
.hostess-sketch-stage .hs-nick{
	position:absolute;top:0;left:100%;height:100%;width:16px;margin-left:9px;
	display:grid;place-items:center;writing-mode:vertical-rl;white-space:nowrap;
	font-size:10.5px;font-weight:600;color:#64748b;}

.hostess-sketch-stage .hs-seats-layer{position:absolute;inset:var(--seats-inset,0);}
/* Sized by the variables the renderer sets (one hall-wide size — hostessSeatGeom), never
   a fixed pixel size. The white ring separates neighbours: where the saved layout packs
   seats tightly on a short edge, chairs at the uniform size touch, and the ring keeps
   each one reading as its own chair instead of one solid strip. */
.hostess-sketch-stage .hs-seat{
	position:absolute;width:var(--seat-w,7px);height:var(--seat-h,7px);border-radius:50%;
	background:#cbbdf0;transform:translate(-50%,-50%);
	box-shadow:0 0 0 1.5px #fff;}
/* Three states a hostess reads at a glance: green = the guest is here, soft amber = the
   seat is promised to a guest still on the way, light grey = genuinely free. (A declined
   guest is never assigned to a seat on this screen, so there is no fourth state to draw.) */
.hostess-sketch-stage .hs-seat.is-arrived{background:#0f9d6e;}
.hostess-sketch-stage .hs-seat.is-seated{background:#f2a93b;}
.hostess-sketch-stage .hs-seat.is-free{background:#e2e7ef;}

.hostess-sketch-stage .hs-chip{
	position:absolute;top:calc(-9px - var(--chair-out,4px));left:50%;transform:translateX(-50%);
	padding:2px 8px;border-radius:999px;white-space:nowrap;
	font-size:9.5px;font-weight:700;line-height:1.5;}
.hostess-sketch-stage .hs-chip.is-allin{background:#e8f8f1;color:#047857;border:1px solid #a7f3d0;}
.hostess-sketch-stage .hs-chip.is-reserve{background:#fff3e6;color:#c2410c;border:1px solid #fed7aa;}
.hostess-sketch-stage .hs-chip[hidden]{display:none!important;}

.hostess-sketch-stage .hs-table:hover .hs-body,
.hostess-sketch-stage .hs-table:focus-visible .hs-body{
	box-shadow:0 0 0 5px rgba(124,92,214,.16),0 10px 26px rgba(79,70,229,.20);border-color:#7c3aed;}
.hostess-sketch-stage .hs-table:focus-visible{outline:none;}
.hostess-sketch-stage .hs-table.is-active .hs-body{
	box-shadow:0 0 0 5px rgba(124,92,214,.28),0 14px 34px rgba(79,70,229,.28);border-color:#7c3aed;}

/* ── The table popup, above the sketch ── */
.i8w-p4-modal-card.is-hostess-sketch .hs-pop{
	position:fixed;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;
	padding:24px;background:rgba(6,10,22,.5);
	-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);direction:rtl;}
.i8w-p4-modal-card.is-hostess-sketch .hs-pop[hidden]{display:none!important;}
.hs-pop-card{
	width:min(400px,100%);background:#fff;color:#1e293b;border-radius:24px;overflow:hidden;
	box-shadow:0 30px 90px rgba(3,7,18,.55);font-family:'Rubik',Arial,sans-serif;
	text-align:right;}
.hs-pop-head{position:relative;padding:20px 22px 18px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;}
.hs-pop-eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:1.4px;color:rgba(255,255,255,.72);margin-bottom:3px;}
.hs-pop-title{margin:0;font-size:27px;font-weight:800;letter-spacing:-.4px;color:#fff;}
.hs-pop-sub{
	display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:4px 11px;border-radius:999px;
	background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);font-size:11.5px;font-weight:600;}
.hs-pop-x{
	position:absolute;top:14px;left:14px;width:32px;height:32px;border-radius:11px;
	border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;
	cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;}
.hs-pop-x:hover{background:rgba(255,255,255,.26);}
.hs-pop-body{padding:18px 20px 20px;}
.hs-pop-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.hs-cell{border:1px solid #eef1f8;background:#f9fafc;border-radius:15px;padding:12px 13px;display:flex;flex-direction:column;gap:3px;}
.hs-cell .hs-k{font-size:11.5px;font-weight:600;color:#64748b;}
.hs-cell .hs-v{font-size:26px;font-weight:800;line-height:1.05;color:#1e293b;font-variant-numeric:tabular-nums;}
.hs-cell.is-arrived{background:#e8f8f1;border-color:#c3ecdb;}
.hs-cell.is-arrived .hs-k{color:#047857;}
.hs-cell.is-arrived .hs-v{color:#0f9d6e;}
.hs-cell.is-left{background:#fff7ed;border-color:#fed7aa;}
.hs-cell.is-left .hs-k{color:#9a3412;}
.hs-cell.is-left .hs-v{color:#c2410c;}
.hs-pop-meter{margin-top:14px;}
.hs-pop-meter-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px;}
.hs-pop-meter-top b{font-size:12.5px;font-weight:600;color:#64748b;}
.hs-pop-meter-top span{font-size:13px;font-weight:800;color:#0f9d6e;font-variant-numeric:tabular-nums;}
.hs-bar{height:9px;border-radius:999px;background:#eef1f8;overflow:hidden;}
.hs-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#34d399,#0f9d6e);transition:width .35s cubic-bezier(.2,.8,.3,1);}
.hs-pop-note{margin-top:14px;padding-top:13px;border-top:1px solid #eef1f8;font-size:11.5px;font-weight:500;color:#94a3b8;line-height:1.6;}
@media (prefers-reduced-motion:reduce){
	.hostess-sketch-stage .hs-table .hs-body,.hs-bar i{transition:none;}
}

/* ── "כמות התחייבות" in the hostess counter row ──────────────────────────────
   A number a person typed, not a running tally, so it is set apart from the counters
   beside it with a dashed edge. It feeds no calculation anywhere. */
.i8w-hostess-top-stats-grid .hostess-stat--commit{
	border:1px dashed rgba(255,255,255,.34);background:rgba(255,255,255,.06);}
.i8w-hostess-top-stats-grid .hostess-stat--commit strong{color:#e9d5ff;}
/* Nothing entered yet: said in small, quiet words. The counters beside it are set at 26px/900
   by a rule of equal weight further up this file (and at 20px on mobile by one of HIGHER
   weight), so this is written to outrank both — otherwise the placeholder is rendered at the
   size of a headline number, which is exactly what it must not look like. It is a blank, not
   a fault: no red, no bold, no extra height. */
.i8w-p4-shell.i8w-hostess-only .i8w-hostess-top-stats-grid .top-stat.hostess-stat--commit.is-unset strong,
.i8w-hostess-top-stats-grid .hostess-stat--commit.is-unset strong{
	font-size:10.5px !important;
	font-weight:500 !important;
	color:rgba(255,255,255,.6) !important;
	line-height:1.35 !important;
	white-space:nowrap;letter-spacing:.1px;}
/* An empty tile has no big number in it, so it does not need a big number's height either. */
.i8w-p4-shell.i8w-hostess-only .i8w-hostess-top-stats-grid .top-stat.hostess-stat--commit.is-unset,
.i8w-hostess-top-stats-grid .hostess-stat--commit.is-unset{
	padding-top:8px;padding-bottom:8px;}
.i8w-p4-shell.i8w-hostess-only .top-stat.hostess-stat--commit.is-unset span{
	font-size:11.5px;}

/* ── "משימות למארחות" — the running order of the evening ───────────────────
   Scoped entirely to .is-hostess-tasks / .hs-task*, which exist only on this screen. */
/* A working screen, not a dialog box. A hostess uses this standing in a hall, so it takes a
   real share of the display: a wide panel on a laptop or tablet, and effectively the whole
   screen on a phone. Sized in viewport units with a ceiling, so it grows with the device
   instead of being pinned to one width. */
/* Centring. The hostess overlay's own inset is 104px at the top against 16px at the
   bottom (it keeps a pinned site header off the sketch's ×), so a card centred in it
   sits 44px below the middle of the screen — and a card taller than the space left
   over then runs off the bottom edge. The tasks panel carries its own header inside
   the card, so it does not need that clearance: while it is open the overlay gets an
   equal inset all round and the panel lands exactly in the middle, with the same gap
   above and below. `is-tasks-open` is put on the overlay by the JS that opens this one
   screen and taken off when it closes, so every other hostess popup keeps its current
   position untouched. */
.i8w-hostess-only .i8w-p4-modal.is-tasks-open,
.i8w-p4-modal.is-tasks-open{
	padding:24px 16px;align-items:center;justify-content:center;
	overscroll-behavior:contain;}
/* Height is a ceiling, never a fixed size: the panel is as tall as it can be without
   ever leaving the screen, and when the list is longer than that it is .hs-tasks-body
   below that scrolls — the panel itself never grows past the viewport. */
.i8w-p4-modal-card.is-hostess-modal.is-hostess-tasks,
.i8w-p4-modal-card.is-hostess-tasks{
	max-width:1100px;width:min(1100px,94vw);
	height:940px;max-height:min(100%,calc(100dvh - 48px));
	padding:0;overflow:hidden;display:flex;flex-direction:column;}
.hs-tasks{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;}
.hs-tasks-head{position:relative;padding:20px 22px 18px;flex:0 0 auto;
	background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;}
.hs-tasks-eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:1.4px;
	color:rgba(255,255,255,.72);margin-bottom:3px;}
.hs-tasks-title{margin:0;font-size:25px;font-weight:800;letter-spacing:-.4px;color:#fff;}
.hs-tasks-x{position:absolute;top:14px;left:14px;width:32px;height:32px;border-radius:11px;
	border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;
	cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;}
.hs-tasks-x:hover{background:rgba(255,255,255,.26);}
.hs-tasks-progress{margin-top:14px;}
.hs-tasks-progress-top{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);margin-bottom:7px;}
.hs-tasks-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden;}
.hs-tasks-bar i{display:block;height:100%;border-radius:999px;background:#5eead4;
	transition:width .35s cubic-bezier(.2,.8,.3,1);}

/* The single scrolling area of the whole screen while the panel is open. overscroll-behavior
   stops a wheel or a swipe that reaches the end of the list from carrying on into the page
   behind — there is no scroll chaining out of the panel. */
.hs-tasks-body{padding:18px 20px 22px;overflow:auto;flex:1 1 auto;min-height:0;background:#f8fafc;
	-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.hs-tasks-loading{padding:26px;text-align:center;color:#94a3b8;font-weight:600;font-size:13px;}
.hs-tasks-msg{margin-bottom:12px;padding:9px 13px;border-radius:11px;font-size:12.5px;
	font-weight:600;background:#e8f8f1;color:#047857;border:1px solid #c3ecdb;}
.hs-tasks-msg.is-err{background:#fff5f5;color:#b91c1c;border-color:#fca5a5;}
.hs-tasks-msg[hidden]{display:none!important;}

/* ── "דוח סיום אירוע" (admin only, hostess screen) ───────────────────────────
   The report's figures, then the two recipients with their checkboxes, then the
   single send button. Same card family as the other hostess popups. */
.i8w-p4-modal-card.is-hostess-modal.is-hostess-report{width:min(760px,94vw);max-width:94vw;}
.hs-report{display:flex;flex-direction:column;min-height:0;gap:12px;direction:rtl;}
.hs-report-loading{padding:26px;text-align:center;color:#94a3b8;font-weight:600;font-size:13px;}
.hs-report-event{font-size:15px;color:#334155;padding:2px 2px 0;}
.hs-report-event strong{color:#4f46e5;font-weight:800;}
.hs-report-scroll{overflow:auto;max-height:44vh;border:1px solid #e2e8f0;border-radius:12px;overscroll-behavior:contain;}
.hs-report-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.hs-report-table th,.hs-report-table td{padding:9px 12px;border-bottom:1px solid #eef2f7;text-align:right;vertical-align:top;}
.hs-report-table tr:last-child th,.hs-report-table tr:last-child td{border-bottom:0;}
.hs-report-table th{font-weight:600;color:#475569;width:46%;background:#f8fafc;}
.hs-report-table td b{color:#0f172a;font-weight:800;}
.hs-report-table td small{display:block;color:#64748b;font-size:11.5px;margin-top:2px;font-weight:500;}
.hs-report-link{border-top:1px dashed #e2e8f0;padding-top:10px;}
.hs-report-link-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid #c7d2fe;background:#eef2ff;border-radius:10px;}
.hs-report-link-row a{flex:1 1 240px;min-width:0;font-size:12.5px;color:#4f46e5;font-weight:600;word-break:break-all;overflow-wrap:anywhere;}
.hs-report-send{border-top:1px dashed #e2e8f0;padding-top:10px;}
.hs-report-send-t{font-weight:700;color:#1e293b;font-size:13.5px;margin-bottom:8px;}
.hs-report-rcpt{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #e2e8f0;border-radius:10px;
	margin-bottom:6px;font-size:13.5px;color:#334155;cursor:pointer;background:#fff;}
.hs-report-rcpt input{width:17px;height:17px;margin:0;accent-color:#4f46e5;}
.hs-report-rcpt b{color:#0f172a;font-weight:700;margin-inline-start:auto;}
.hs-report-rcpt.is-missing{opacity:.6;cursor:default;}
.hs-report-msg{margin-top:8px;padding:9px 13px;border-radius:11px;font-size:12.5px;font-weight:600;
	background:#e8f8f1;color:#047857;border:1px solid #c3ecdb;}
.hs-report-msg.is-err{background:#fff5f5;color:#b91c1c;border-color:#fca5a5;}
.hs-report-msg[hidden]{display:none!important;}
.hs-tasks-list{display:flex;flex-direction:column;gap:9px;}

.hs-task{background:#fff;border:1px solid #e6e9f2;border-radius:16px;padding:15px 17px;
	display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.hs-task.is-done{background:#f6fdfa;border-color:#c3ecdb;}
.hs-task.is-not_required{background:#fbfcfe;border-color:#e2e8f0;}
.hs-task-main{display:flex;gap:11px;align-items:flex-start;flex:1 1 260px;min-width:0;}
.hs-task-num{flex:0 0 auto;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
	background:#eef2ff;color:#4f46e5;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;}
.hs-task.is-done .hs-task-num{background:#0f9d6e;color:#fff;}
.hs-task.is-not_required .hs-task-num{background:#e2e8f0;color:#64748b;}
.hs-task-text{min-width:0;flex:1 1 auto;}
.hs-task-title{font-size:16px;font-weight:700;color:#1e293b;line-height:1.45;}
.hs-task.is-not_required .hs-task-title{color:#64748b;}
.hs-task-short{font-size:13.5px;color:#64748b;line-height:1.65;margin-top:3px;}
.hs-task-stamp{margin-top:6px;font-size:11.5px;font-weight:600;color:#047857;}
.hs-task.is-not_required .hs-task-stamp{color:#64748b;}
/* The one control that opens a step. Big enough to hit with a thumb. */
.hs-task-more{margin-top:9px;background:#f4f6fd;border:1px solid #e3e7f7;border-radius:10px;
	padding:7px 13px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;
	color:#4f46e5;display:inline-flex;align-items:center;gap:5px;}
.hs-task-more:hover{background:#eceffb;}
/* A note already written shows one quiet line even while the step is closed, so nothing that
   was recorded can be missed — the full field itself only opens with the step. */
.hs-task-notepeek{margin-top:8px;font-size:12.5px;color:#475569;background:#fffdf5;
	border:1px solid #fdeec4;border-radius:10px;padding:7px 11px;line-height:1.6;
	white-space:pre-line;overflow-wrap:anywhere;}
.hs-task-full{margin-top:11px;}
.hs-task-full[hidden]{display:none!important;}
.hs-task-fulltext{padding:13px 15px;border-radius:12px;background:#f8fafc;
	border:1px solid #eef1f8;font-size:13.5px;line-height:1.9;color:#334155;white-space:pre-line;}
/* The notes area belongs to the step that is open, and only to it. */
.hs-task-notewrap{margin-top:12px;padding:12px 14px;border-radius:12px;
	background:#fffdf5;border:1px solid #fdeec4;}
.hs-task-notelbl{font-size:12px;font-weight:700;color:#92400e;margin-bottom:7px;}
.hs-task-note{display:block;width:100%;border:1px solid #eadcc0;border-radius:11px;padding:10px 12px;
	font:inherit;font-size:13.5px;line-height:1.7;resize:vertical;min-height:64px;
	box-sizing:border-box;color:#1e293b;background:#fff;}
.hs-task-note:focus{outline:none;border-color:#a5b4fc;box-shadow:0 0 0 3px rgba(99,102,241,.12);}
.hs-task-notesave{margin-top:9px;border:1px solid #c7cdf5;background:#fff;color:#4f46e5;
	border-radius:10px;padding:9px 16px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;}
.hs-task-notesave:hover{background:#f5f6ff;}
.hs-task-notesave[disabled]{opacity:.5;cursor:default;}

.hs-task-acts{display:flex;gap:7px;flex:0 0 auto;align-items:center;flex-wrap:wrap;}
.hs-task-btn{border:1px solid #e2e8f0;background:#fff;color:#475569;border-radius:12px;
	padding:11px 18px;min-height:44px;font-family:inherit;font-size:13.5px;font-weight:700;
	cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
	white-space:nowrap;transition:background .14s ease,border-color .14s ease,color .14s ease;}
.hs-task-btn:hover{border-color:#c7cdf5;}
.hs-task-btn[disabled]{opacity:.55;cursor:default;}
.hs-task-tick{font-size:13px;line-height:1;}
.hs-task-btn.is-done.on{background:#0f9d6e;border-color:#0f9d6e;color:#fff;}
.hs-task-btn.is-na.on{background:#64748b;border-color:#64748b;color:#fff;}

/* Phone: the panel takes the screen, and every control is a comfortable target. */
@media (max-width:760px){
	/* dvh, not vh: on a phone the address bar makes 100vh taller than what is actually on
	   screen, which pushed the foot of the list out of reach. */
	.i8w-p4-modal-card.is-hostess-modal.is-hostess-tasks,
	.i8w-p4-modal-card.is-hostess-tasks{width:100vw;max-width:100vw;height:100dvh;
		max-height:100dvh;border-radius:0;}
	/* The overlay's own padding would inset a full-screen panel; on a phone it gets the
	   whole viewport. Scoped to the tasks overlay, nothing else. The class carries enough
	   weight to hold against the max-width:820px rule that follows it. */
	.i8w-hostess-only .i8w-p4-modal.is-tasks-open,
	.i8w-p4-modal.is-tasks-open{padding:0;}
	.hs-tasks-body{padding:14px 13px 20px;}
	.hs-task{flex-direction:column;padding:14px 14px 15px;}
	.hs-task-acts{width:100%;}
	.hs-task-btn{flex:1 1 auto;}
	.hs-tasks-title{font-size:21px;}
}

@media (max-width:820px){
	.i8w-hostess-only .i8w-p4-modal{padding-top:78px;}
	.i8w-p4-modal-card.is-hostess-modal{width:97vw;max-width:97vw;max-height:76vh;}
	.hostess-find-grid{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════════════════════════════════
   HOSTESS LINK — three approved design fixes (visual only)
   Scoped exclusively to the hostess link screen: every selector below is
   prefixed with .i8w-hostess-only (a class printed ONLY when the shortcode
   runs in mode=hostess_checkin) or matches .hostess-sketch-fs-close, which
   exists in exactly one place — the hostess sketch overlay. The admin seating
   workspace, the owner view, the calendar, the guest management screens, every
   other purple area and every other modal close button are untouched, because
   none of them can ever match these selectors.
   Nothing here changes markup, behaviour, sizes, positions or logic — only
   spacing, corner radius and two colours.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) A small, clean, even gap between the bottom of the purple bar and the
      start of the "בדיקת כניסה לאולם" area. A fixed pixel value (not a viewport
      unit), so it stays identical on every desktop width. It is a margin on the
      bar itself, so the guest area keeps its own inner padding and its list
      layout exactly as before.
   2) All four corners of the purple bar rounded with one and the same value —
      clearly visible, not exaggerated. No overflow clipping is introduced, so
      the centred EVENT360 logo can never be cut; its size, position and the
      purple background stay exactly as they were. */
.i8w-p4-shell.i8w-hostess-only .i8w-p4-topbar{
	border-radius:22px !important;
	margin-bottom:28px !important;}

/* 3) The sketch overlay's close control: white background with a black ✕, so it
      stands out on the dark backdrop. Position (fixed, top-left), size, rounded
      corners, the close action, the sketch itself and the dark background are
      all inherited unchanged from the existing rule — only the three colours and
      a soft shadow for contrast are set here. */
.i8w-p4-modal-card.is-hostess-modal.is-hostess-sketch .modal-close.hostess-sketch-fs-close{
	background:#fff !important;
	color:#000 !important;
	border:1px solid rgba(15,23,42,.14) !important;
	box-shadow:0 4px 16px rgba(0,0,0,.35) !important;}
.i8w-p4-modal-card.is-hostess-modal.is-hostess-sketch .modal-close.hostess-sketch-fs-close:hover{
	background:#f1f5f9 !important;
	color:#000 !important;}

/* ══════════════════════════════════════════════════════════════════════════
   HOSTESS LINK — two approved fixes (zoom scope + mobile event-name tag)
   Everything below is scoped to .i8w-p4-shell.i8w-hostess-only (printed only
   for mode=hostess_checkin) or to .is-sketch-open (added only by the hostess
   sketch overlay). No other screen can match these selectors, and no guest
   card, search field, arrival checkbox, data or logic is touched.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) While the sketch overlay is open the browser must not rescale it — the sketch
      always sits auto-fitted to the screen. touch-action:none stops a pinch on a
      touch screen from reaching the browser's zoom; the keyboard/wheel/gesture side
      is handled by the temporary JS lock that is installed with the overlay and
      removed the moment it closes. The overlay has nothing to scroll (it is a single
      fitted stage with overflow:hidden), so nothing is lost. The MAIN hostess screen
      is deliberately not touched here — its zoom stays the browser's own. */
.i8w-hostess-only .i8w-p4-modal.is-sketch-open{touch-action:none;}

/* 2) MOBILE (phones only, < 768px — tablets and desktops keep the full purple bar
      exactly as it is today). The purple bar itself is kept in the flow but stripped
      of its own paint, so it becomes a plain wrapper; the logo, the counters and the
      two lookup buttons are hidden, and the event name — the same element that is
      already in the markup — is dressed as one compact purple tag.
      Only presentation changes: no element is added, removed or reordered. */
@media (max-width:767.98px){
	.i8w-p4-shell.i8w-hostess-only .i8w-p4-topbar{
		display:block !important;
		background:none !important;background-image:none !important;
		box-shadow:none !important;border-radius:0 !important;
		padding:0 !important;min-height:0 !important;
		margin:0 0 10px !important;}
	/* Nothing but the name survives at the top on a phone, and no empty space is
	   left behind by what is hidden. */
	.i8w-p4-shell.i8w-hostess-only .i8w-hostess-topbar-logo,
	.i8w-p4-shell.i8w-hostess-only .i8w-p4-topbar-stats,
	.i8w-p4-shell.i8w-hostess-only .i8w-p4-topbar .i8w-hostess-actions--bar{display:none !important;}
	.i8w-p4-shell.i8w-hostess-only .i8w-p4-topbar-info{
		display:block !important;width:100% !important;
		gap:0 !important;margin:0 !important;padding:0 !important;}
	.i8w-p4-shell.i8w-hostess-only .i8w-p4-topbar-brand{
		display:flex !important;justify-content:center !important;align-items:center !important;
		width:100% !important;margin:0 !important;padding:0 !important;}
	/* The tag is sized by its text, never by the screen: an inline-block with
	   width:fit-content, so the purple background and border stop where the words
	   stop. A very long name wraps inside max-width instead of stretching edge to
	   edge, and the tag stays centred either way. */
	.i8w-p4-shell.i8w-hostess-only .i8w-topbar-event-name{
		display:inline-block !important;width:fit-content !important;max-width:92% !important;
		background:#6d28d9 !important;border:1px solid #6d28d9 !important;color:#fff !important;
		border-radius:14px !important;padding:8px 16px !important;
		font-size:17px !important;line-height:1.35 !important;font-weight:800 !important;
		text-align:center !important;overflow-wrap:break-word !important;}
}

/* ── HOSTESS LINK — the "desktop only" notice never belongs on this screen ──
   .i8w-p4-mobile-only is the padlock card ("סידורי הושבה — תכונה זו זמינה רק
   מהמחשב") that applyDeviceMode() reveals below 992px. It is correct for the full
   seating workspace, which really is desktop-only, but wrong for the hostess link:
   the check-in screen is built to be used from a phone. Hiding it here removes the
   card, its frame, its background and the space it occupied in one step, so the
   page starts straight at the event-name tag with the check-in area right below.
   Scoped to .i8w-hostess-only, so the notice keeps working exactly as before on the
   admin/owner seating screen. Not wrapped in a media query on purpose — the element
   is only ever revealed below 992px anyway, so this also covers tablets, and on a
   desktop it is already hidden by the JS and nothing changes. */
.i8w-p4-shell.i8w-hostess-only .i8w-p4-mobile-only{display:none !important;}

/* ════════════════════════════════════════════════════════════════════
   EVENT360 — Hostess check-in screen upgrade (approved mockup).
   UI layer only: quick-filter chips, whole-card tap affordance, the
   needs-attention accent, the per-card saving spinner, the undo toast
   and the 4-counter topbar on mobile. Everything is scoped to the
   hostess link (.i8w-hostess-only) — the owner workspace, the owner
   check-in modal and every other screen are untouched.
   ════════════════════════════════════════════════════════════════════ */

/* Quick filter chips — rendered in the panel, visible only on the hostess link */
.i8w-p4-shell .checkin-filters{display:none;}
.i8w-hostess-only .checkin-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;}
.i8w-hostess-only .checkin-fchip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid rgba(99,102,241,.22);color:#334155;border-radius:999px;padding:9px 16px;font-family:'Rubik',Arial,sans-serif;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 1px 4px rgba(15,23,42,.05);transition:background .15s ease,color .15s ease,border-color .15s ease;}
.i8w-hostess-only .checkin-fcount{background:#eef2ff;color:#4f46e5;border-radius:999px;font-size:12px;font-weight:800;padding:1px 8px;line-height:18px;min-width:26px;text-align:center;}
.i8w-hostess-only .checkin-fchip.active{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(99,102,241,.28);}
.i8w-hostess-only .checkin-fchip.active .checkin-fcount{background:rgba(255,255,255,.22);color:#fff;}
.i8w-hostess-only .checkin-fchip--attention .checkin-fcount{background:#fff7ed;color:#9a3412;}
.i8w-hostess-only .checkin-fchip--attention.active{background:linear-gradient(135deg,#ea580c,#f59e0b);}
.i8w-hostess-only .checkin-fchip--attention.active .checkin-fcount{background:rgba(255,255,255,.25);color:#fff;}

/* Whole card is the tap target (the switch stays as a visual indicator) */
.i8w-hostess-only .hostess-checkin-card{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;}
.i8w-hostess-only .hostess-checkin-card:active{transform:scale(.985);}
.i8w-hostess-only .checkin-tap-hint{font-size:11.5px;font-weight:600;color:#94a3b8;white-space:nowrap;}
.i8w-hostess-only .hostess-checkin-card.guest-arrived-row .checkin-tap-hint{color:rgba(22,101,52,.6);}

/* Needs-attention records — the EXISTING "יתר הרשומות" group, with an orange accent
   strip so it reads at a glance. An attention record that entered turns green like
   any other arrival (the arrived rules below this file's earlier section still win). */
.i8w-hostess-only .hostess-checkin-card.is-attention{border-color:rgba(234,88,12,.25);}
.i8w-hostess-only .hostess-checkin-card.is-attention::before{background:linear-gradient(90deg,#ea580c,#f59e0b);}
.i8w-hostess-only .hostess-checkin-card.is-attention.guest-arrived-row{border-color:#86efac!important;}
.i8w-hostess-only .hostess-checkin-card.is-attention.guest-arrived-row::before{background:linear-gradient(90deg,#16a34a,#22c55e);}

/* In-flight save: only the acting card is guarded — never the whole screen */
.i8w-hostess-only .hostess-checkin-card.is-saving{pointer-events:none;}
.i8w-hostess-only .hostess-checkin-card.is-saving::after{content:'';position:absolute;top:10px;left:10px;width:15px;height:15px;border-radius:50%;border:2.5px solid #c7d2fe;border-top-color:#4f46e5;animation:i8wCheckinSpin .7s linear infinite;}
@keyframes i8wCheckinSpin{to{transform:rotate(360deg)}}

/* Undo toast (success + short error notice) */
.i8w-checkin-toast{position:fixed;bottom:18px;right:50%;transform:translate(50%,20px);background:#0f172a;color:#fff;border-radius:999px;padding:10px 14px 10px 8px;display:flex;align-items:center;gap:10px;box-shadow:0 14px 40px rgba(15,23,42,.35);font-family:'Rubik',Arial,sans-serif;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:calc(100vw - 28px);z-index:2000002;direction:rtl;}
.i8w-checkin-toast.show{opacity:1;transform:translate(50%,0);pointer-events:auto;}
.i8w-checkin-toast.is-err{background:#b91c1c;padding-inline-start:16px;}
.i8w-checkin-toast .i8w-checkin-toast-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.i8w-checkin-toast button{background:linear-gradient(135deg,#4f46e5,#7c3aed);border:none;color:#fff;border-radius:999px;padding:7px 16px;font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;flex:0 0 auto;}

/* Search + filters stay reachable while scrolling the list (tablet/mobile) */
@media (max-width:1100px){
  .i8w-hostess-only .checkin-workhead{position:sticky;top:0;z-index:20;background:rgba(233,237,242,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin:0 -6px;padding:8px 6px 10px;border-radius:0 0 16px 16px;}
  .i8w-hostess-only .checkin-workhead .bottom-head{margin-bottom:10px;}
}

/* Phones (<768px): the compact bar (name tag, no logo, no lookup buttons) is kept
   exactly as the existing rules render it — but the four counters COME BACK as a
   2×2 pill grid right under the name (the approved upgrade needs them live at the
   door). The stripped bar has no purple ground on phones, so the pills carry the
   brand gradient themselves. Selector specificity matches the existing hiding rule
   (.i8w-p4-shell.i8w-hostess-only) and this block is later in the file, so it wins. */
@media (max-width:767.98px){
  .i8w-p4-shell.i8w-hostess-only .i8w-p4-topbar-stats{display:flex !important;width:100% !important;margin-top:10px !important;}
  .i8w-p4-shell.i8w-hostess-only .i8w-hostess-top-summary{width:100% !important;}
  .i8w-p4-shell.i8w-hostess-only .i8w-hostess-top-stats-grid{display:grid !important;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
  .i8w-p4-shell.i8w-hostess-only .top-stat.hostess-stat{justify-content:center;padding:10px 8px;background:linear-gradient(135deg,#4f46e5,#7c3aed) !important;border:none !important;box-shadow:0 4px 14px rgba(99,102,241,.22) !important;}
  .i8w-p4-shell.i8w-hostess-only .top-stat.hostess-stat strong{font-size:20px;}
}
/* Small phones: the filter chips settle into a 2×2 grid with roomy tap targets */
@media (max-width:560px){
  .i8w-hostess-only .checkin-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .i8w-hostess-only .checkin-fchip{justify-content:center;padding:10px 8px;font-size:13.5px;}
}

/* Two-row header on phones: the bar is already stripped to the compact name tag
   (row 1) with the 2×2 counter pills under it (row 2) — the row wrappers must not
   draw the desktop divider there or force a flex layout the phone design
   doesn't use. */
@media (max-width:767.98px){
  .i8w-p4-shell.i8w-hostess-only .i8w-hostess-bar-row1,
  .i8w-p4-shell.i8w-hostess-only .i8w-hostess-bar-row2{
    display:block !important;width:100% !important;min-width:0 !important;
    border-top:0 !important;padding-top:0 !important;margin-top:0 !important;}
}

/* ── "+ הוספת רשומה" on the hostess check-in screen ──────────────────────────────────
   A hostess adding someone who turned up and was never on the invitee list. The form is
   collapsed until the button is pressed, and it asks only for the fields a regular record
   has (name, phone, quantity) — no status field, because such a record is always created
   as "מגיעים" through the existing guaranteed-arrival mechanism. Shown on the hostess
   screen only; the owner's check-in modal is untouched. */
.i8w-p4-shell .checkin-addwrap{display:none;}
.i8w-hostess-only .checkin-addwrap{display:block;margin:10px 0 0;}
.i8w-hostess-only .checkin-addbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#f5f3ff;border:1px dashed rgba(124,58,237,.5);color:#6d28d9;border-radius:999px;padding:9px 18px;font-family:'Rubik',Arial,sans-serif;font-size:14px;font-weight:800;cursor:pointer;}
.i8w-hostess-only .checkin-addbtn:hover{background:#ede9fe;}
.i8w-hostess-only .checkin-addform{margin:10px 0 0;padding:14px;background:#fff;border:1px solid rgba(99,102,241,.2);border-radius:14px;box-shadow:0 4px 14px rgba(15,23,42,.06);}
.i8w-hostess-only .checkin-addrow{display:flex;gap:10px;flex-wrap:wrap;}
.i8w-hostess-only .checkin-addrow label{display:flex;flex-direction:column;gap:5px;flex:1 1 150px;font-size:12.5px;font-weight:700;color:#475569;}
.i8w-hostess-only .checkin-addrow input{border:1px solid #cbd5e1;border-radius:9px;padding:9px 11px;font:inherit;font-size:14px;box-sizing:border-box;width:100%;}
.i8w-hostess-only .checkin-addrow input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.14);}
.i8w-hostess-only .checkin-addnote{margin:10px 0 0;font-size:12px;color:#64748b;line-height:1.6;}
.i8w-hostess-only .checkin-addacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 0;}
.i8w-hostess-only .checkin-addmsg{font-size:12.5px;font-weight:700;color:#475569;}
.i8w-hostess-only .checkin-addmsg.is-err{color:#dc2626;}
/* The permanent marker on a record a hostess added during the event. */
.i8w-p4-shell .checkin-hostess-badge{display:inline-flex;align-items:center;background:#fff7ed;border:1px solid #fdba74;color:#9a3412;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:800;line-height:1.7;white-space:nowrap;}
@media (max-width:640px){
  .i8w-hostess-only .checkin-addrow label{flex:1 1 100%;}
  .i8w-p4-shell .checkin-hostess-badge{white-space:normal;}
}