/* GYPTO Mezzanine V18.11 - FIRST live indoor tracking + calibration */
#first-floor-layout-panel{scroll-margin-top:150px;position:relative}
#first-floor-layout-panel .panel-heading{align-items:flex-start;gap:14px;flex-wrap:wrap}
.ff-layout-heading-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.ff-layout-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #cfe0da;background:#f5faf8;color:#31584d;border-radius:999px;padding:5px 9px;font-size:9px;font-weight:900;letter-spacing:.35px}
.ff-layout-badge.vector{background:#eaf8f3;color:#0d7356;border-color:#bce5d6}
.ff-layout-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 16px 10px;padding:9px 10px;border:1px solid #d9e6e1;border-radius:13px;background:#fbfdfc;direction:rtl}
.ff-layout-toolbar-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ff-layout-button{border:1px solid #cfdfd9;background:#fff;color:#1b493c;border-radius:10px;min-height:34px;padding:7px 11px;font:800 10px/1.2 inherit;cursor:pointer;white-space:nowrap}
.ff-layout-button:hover{border-color:#8fcab6;background:#f1faf6}
.ff-layout-button.active,.ff-layout-button.primary{background:#0f7759;border-color:#0f7759;color:#fff}
.ff-layout-button.warn{color:#835b0a;background:#fff9e9;border-color:#ecd59b}
.ff-layout-zoom-value{min-width:50px;text-align:center;font-size:10px;font-weight:900;color:#45645a}
.ff-layout-viewport{height:min(68vh,690px);min-height:480px;margin:0 16px 16px;border:1px solid #cadbd5;border-radius:16px;overflow:hidden;background:#e9f0ed;position:relative;direction:ltr;touch-action:none;cursor:grab;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.ff-layout-viewport.dragging{cursor:grabbing}
.ff-layout-world{position:absolute;left:0;top:0;width:100%;aspect-ratio:3370/2384;transform-origin:0 0;will-change:transform;background:#fff;box-shadow:0 8px 35px rgba(12,61,47,.10)}
.ff-layout-plan{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.ff-layout-zones,.ff-layout-markers{position:absolute;inset:0;pointer-events:none}
.ff-zone{position:absolute;z-index:2;border:1.5px dashed rgba(16,119,89,.55);background:rgba(20,150,110,.055);border-radius:8px;pointer-events:none}
.ff-zone span{position:absolute;right:4px;top:4px;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(255,255,255,.91);color:#0f5f49;border:1px solid rgba(16,119,89,.2);border-radius:6px;padding:2px 5px;font-size:6px;font-weight:900;box-shadow:0 2px 7px rgba(0,0,0,.06)}
.ff-layout-panel.hide-zones .ff-zone{display:none}
.ff-person-marker{position:absolute;z-index:8;transform:translate(-50%,-50%);pointer-events:auto;border:2px solid #fff;background:#0d6c51;color:#fff;min-width:31px;height:31px;border-radius:999px;padding:0 7px;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 5px 14px rgba(0,52,40,.35);cursor:pointer;font-size:7px;font-weight:900;white-space:nowrap}
.ff-person-marker.moving{background:#15966e;box-shadow:0 0 0 4px rgba(21,150,110,.14),0 5px 14px rgba(0,52,40,.28)}
.ff-person-marker.emergency{background:#d83845;animation:ffSos 1s infinite;z-index:15}
.ff-person-marker.offline{background:#7d8d87;filter:grayscale(.25)}
.ff-person-marker.guest{background:#5269a8}
.ff-person-marker i{display:block;width:5px;height:5px;border-radius:50%;background:#70f1c1}
.ff-person-marker.emergency i{background:#fff}
@keyframes ffSos{50%{box-shadow:0 0 0 11px rgba(216,56,69,0),0 5px 14px rgba(216,56,69,.35)}0%,100%{box-shadow:0 0 0 3px rgba(216,56,69,.25),0 5px 14px rgba(216,56,69,.35)}}
.ff-layout-note{position:absolute;left:10px;bottom:10px;z-index:20;max-width:min(430px,80%);background:rgba(255,255,255,.92);border:1px solid #d5e3de;border-radius:9px;padding:7px 9px;color:#5d716a;font-size:8px;line-height:1.5;pointer-events:none;backdrop-filter:blur(5px)}
.ff-layout-note strong{color:#0c684e}
.ff-layout-empty{position:absolute;inset:auto 50% 15px auto;transform:translateX(50%);z-index:20;background:#fff9e8;border:1px solid #ecdcae;color:#725a1b;border-radius:9px;padding:6px 10px;font-size:8px;font-weight:800;pointer-events:none}
.ff-layout-return{background:#0f7759!important;color:#fff!important;border-color:#0f7759!important}
#gps-live-map.ff-gps-hidden{display:none!important}
#first-floor-layout-panel.ff-layout-hidden{display:none!important}
#first-floor-layout-panel:fullscreen{background:#edf4f1;padding:14px;overflow:auto}
#first-floor-layout-panel:fullscreen .ff-layout-viewport{height:calc(100vh - 155px);margin-bottom:0}
/* Keep the original React schematic in DOM for state + click routing, but don't show it. */
#first-floor-layout-panel .floor-map{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip-path:inset(50%)!important}
#first-floor-layout-panel .floor-map .person-marker,#first-floor-layout-panel .floor-map .map-zone{pointer-events:auto!important}
@media(max-width:760px){
  .ff-layout-toolbar{margin:0 8px 8px;padding:8px}
  .ff-layout-button{min-height:38px;padding:8px 10px;font-size:9px}
  .ff-layout-viewport{margin:0 8px 12px;height:58vh;min-height:390px;border-radius:13px}
  .ff-person-marker{min-width:28px;height:28px;padding:0 6px;font-size:6px}
  .ff-layout-note{font-size:7px;max-width:88%}
}

/* GYPTO Mezzanine V18.11 — Live indoor people overlay + movement trails + calibration */
.ff-layout-badge.live{background:#fff4e8;color:#b85e00;border-color:#ffd2a5}
.ff-layout-trails{position:absolute;inset:0;width:100%;height:100%;z-index:6;overflow:visible;pointer-events:none}
.ff-person-trail{fill:none;stroke:#15966e;stroke-width:.35;stroke-linecap:round;stroke-linejoin:round;opacity:.65;stroke-dasharray:1.1 1.2}
.ff-person-trail.stationary{stroke:#0d6c51;opacity:.36}
.ff-person-trail.offline{stroke:#7d8d87;opacity:.28}
.ff-person-trail.emergency{stroke:#d7192d;stroke-width:.5;opacity:.9}
.ff-person-marker{transition:left 2.6s linear,top 2.6s linear,box-shadow .2s ease,transform .2s ease;overflow:visible}
.ff-person-marker em{position:absolute;top:34px;left:50%;transform:translateX(-50%);font-style:normal;background:rgba(255,255,255,.96);border:1px solid #cbd9e4;border-radius:6px;padding:2px 5px;color:#0b3558;font-size:6px;font-weight:900;box-shadow:0 2px 6px rgba(0,33,61,.12);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-heading-arrow{position:absolute;right:-10px;top:-10px;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid #aac3d6;color:#0b4f7c;display:grid;place-items:center;font-size:10px;transform-origin:center}
.ff-person-marker.moving:after{content:"";position:absolute;inset:-7px;border:2px solid rgba(21,150,110,.5);border-radius:999px;animation:ffMovePulse 1.3s infinite}
.ff-person-marker.focused{z-index:40;transform:translate(-50%,-50%) scale(1.45);box-shadow:0 0 0 8px rgba(255,132,0,.28),0 8px 28px rgba(0,40,76,.38)}
.ff-person-marker.focused:before{content:"CURRENT LOCATION";position:absolute;bottom:42px;background:#ff8400;color:#fff;border-radius:6px;padding:3px 6px;font-size:6px;letter-spacing:.35px;white-space:nowrap}
@keyframes ffMovePulse{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.55);opacity:0}}
.ff-calibration-status{display:inline-flex;align-items:center;min-height:28px;padding:5px 8px;border-radius:999px;border:1px solid #d6e0e9;background:#f7fafc;color:#60768a;font-size:7px;font-weight:900;letter-spacing:.3px;white-space:nowrap}
.ff-calibration-status.ok{background:#eaf8f1;border-color:#b7e4cc;color:#0c7a4f}
.ff-calibration-status.warn{background:#fff8e8;border-color:#f2d79a;color:#8a5a00}
.ff-layout-button.calibration{border-color:#ffb66b;color:#a84f00;background:#fff7ee}
.ff-layout-viewport.calibration-capture{cursor:crosshair!important;box-shadow:inset 0 0 0 3px #ff8400}
.ff-layout-viewport.calibration-capture:after{content:"اضغط على نقطة المرجع على مخطط FIRST";position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:50;background:#ff8400;color:#fff;padding:8px 13px;border-radius:8px;font-size:10px;font-weight:900;pointer-events:none;box-shadow:0 5px 20px rgba(168,79,0,.28)}
.ff-calibration-modal[hidden]{display:none!important}
.ff-calibration-modal{position:fixed;inset:0;z-index:30000;background:rgba(4,30,51,.58);display:grid;place-items:center;padding:18px;backdrop-filter:blur(4px)}
.ff-calibration-dialog{width:min(680px,96vw);max-height:88vh;overflow:auto;background:#fff;border:1px solid #d7e2eb;border-radius:18px;box-shadow:0 28px 80px rgba(0,33,61,.28);padding:22px;direction:rtl;position:relative}
.ff-calibration-close{position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:50%;border:0;background:#eef3f7;color:#0b3558;font-size:23px;cursor:pointer}
.ff-calibration-kicker{display:block;color:#ff8400;font-size:9px;font-weight:900;letter-spacing:1.2px;margin-bottom:6px}
.ff-calibration-dialog h3{margin:0 0 8px;color:#0b3558;font-size:22px}.ff-calibration-dialog p{margin:0 0 16px;color:#667d90;line-height:1.8;font-size:12px}
.ff-calibration-dialog label{display:grid;gap:7px;margin:12px 0}.ff-calibration-dialog label span{font-size:11px;font-weight:900;color:#0b3558}.ff-calibration-dialog select{min-height:46px;border:1px solid #cbd9e4;border-radius:10px;padding:0 12px;background:#fff;font:700 12px inherit;color:#0b3558}
.ff-calibration-rows{display:grid;gap:9px;margin:14px 0}.ff-calibration-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #dbe5ed;border-radius:11px;padding:10px 12px;background:#f9fbfd}.ff-calibration-row div{display:grid;gap:3px}.ff-calibration-row b{color:#0b3558}.ff-calibration-row span{font-size:10px;color:#72879a}.ff-calibration-row button{border:0;border-radius:8px;background:#0b4f7c;color:#fff;padding:8px 12px;font-weight:900;cursor:pointer}
.ff-calibration-message{min-height:22px;border-radius:8px;padding:7px 9px;font-size:11px}.ff-calibration-message:empty{padding:0}.ff-calibration-message.info{background:#eef6ff;color:#0b4f7c}.ff-calibration-message.success{background:#ebf9f1;color:#0b7a50}.ff-calibration-message.error{background:#fff0f1;color:#b51f2d}
.ff-calibration-actions{display:flex;gap:8px;justify-content:flex-start;margin-top:12px}.ff-calibration-actions button{min-height:40px;border-radius:9px;padding:0 14px;font-weight:900;cursor:pointer}.ff-calibration-actions .danger{border:1px solid #efb6bc;background:#fff2f3;color:#b51f2d}.ff-calibration-actions .secondary{border:1px solid #cad8e2;background:#fff;color:#0b3558}
@media(max-width:760px){.ff-person-marker em{display:none}.ff-calibration-status{max-width:160px;overflow:hidden;text-overflow:ellipsis}.ff-calibration-dialog{padding:18px 14px}.ff-calibration-row{align-items:flex-start}.ff-calibration-row span{font-size:9px}}