/* C2 — ofis rejasi: zonalar, xonalar, navigatsiya.
   Uslub: yorug' "zamonaviy ofis" — och pol, navy aksent, yashil o'simliklar.
   O'lchamlar "dunyo" birligida (px); butun reja .fp-world ichida transform bilan masshtablanadi. */

/* ------------------------------ Ko'rish oynasi ------------------------------ */
#office.fp{
  --navy:#1f3a5f; --navy-2:#2c4a73; --wall:#33476a; --floor:#eef1f5; --wood:#f3ece1;
  --sw:140px;            /* stol slot eni */
  --sh:216px;            /* stol slot balandligi (JS birinchi stoldan o'lchaydi) */
  --g:10px;
  --lab:1;               /* sarlavha shriftining zoom'ga qarshi koeffitsienti */
  display:block; position:relative; overflow:hidden; padding:0;
  touch-action:none; cursor:grab; user-select:none;
  background:
    radial-gradient(circle at 1px 1px, rgba(31,58,95,.10) 1px, transparent 1.5px) 0 0/22px 22px,
    #e4e9f0;
}
#office.fp.panning{cursor:grabbing}
#office.fp:focus-visible{outline:3px solid var(--navy-2); outline-offset:-3px}

.fp-world{
  position:absolute; left:0; top:0;
  transform-origin:0 0;
  display:flex; flex-direction:column; gap:18px;
  width:max-content; padding:24px;
  background:
    linear-gradient(90deg, rgba(31,58,95,.045) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(rgba(31,58,95,.045) 1px, transparent 1px) 0 0/48px 48px,
    var(--floor);
  border:6px solid var(--wall); border-radius:18px;
  box-shadow:0 30px 80px rgba(21,42,80,.18);
  will-change:transform;
}
.fp-world.fp-anim{transition:transform .38s cubic-bezier(.3,.7,.2,1)}
@media (prefers-reduced-motion: reduce){ .fp-world.fp-anim{transition:none} }

/* Polosalar: faqat ish zonasi polosasi enini belgilaydi, qolganlari unga moslashadi */
.fp-band{display:flex; gap:18px; align-items:stretch}
.fp-band:not(.b-work){width:0; min-width:100%}
.b-top{height:190px}
.b-lower{align-items:stretch}
.b-meet{height:370px; flex:none !important}
.b-amen{height:310px; flex:none !important}
.fp-group{display:flex; gap:14px; min-width:0; flex:1 1 0}
.fp-group.col{flex-direction:column}
.fp-group.row{flex:1}
.fp-group > .fp-room{flex:1 1 0}

/* ------------------------------ Xona ------------------------------ */
.fp-room{
  position:relative; display:flex; flex-direction:column; min-width:0; min-height:0;
  flex:1 1 0;
  background:#fff;
  border:4px solid var(--wall); border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 2px 0 rgba(21,42,80,.08);
  transition:box-shadow .25s, opacity .25s;
}
.fp-room.k-zone, .fp-guests{
  flex:none;
  width:calc(var(--cols) * var(--sw) + (var(--cols) - 1) * var(--g) + 28px);
  background:
    radial-gradient(circle at 1px 1px, rgba(31,58,95,.08) 1px, transparent 1.4px) 0 0/16px 16px,
    #f8fafc;
  border:2px dashed #a9b7cc; border-radius:14px;
}
.fp-room.locked{
  flex:none;
  width:calc(var(--cols) * var(--sw) + (var(--cols) - 1) * var(--g) + 28px);
  border:6px solid var(--navy); border-radius:10px;
  background:
    repeating-linear-gradient(135deg, rgba(31,58,95,.05) 0 10px, transparent 10px 20px),
    #f4f6fb;
}
.fp-room.k-amenity{background:var(--wood); border-color:#6c7c96}
.fp-room.k-booth{background:#f2f8ff; border:3px solid #8fb3d9; border-radius:10px}
.fp-room[data-location="cafeteria"]{background:
  linear-gradient(90deg, rgba(160,120,70,.06) 1px, transparent 1px) 0 0/34px 34px, var(--wood)}
.fp-room[data-location="lounge"]{background:#eef7f0; border-color:#5f8f73}
.fp-room[data-location="server-it"]{background:#e9edf3}
.fp-room[data-location="wc"]{background:
  linear-gradient(90deg, rgba(31,58,95,.07) 1px, transparent 1px) 0 0/18px 18px,
  linear-gradient(rgba(31,58,95,.07) 1px, transparent 1px) 0 0/18px 18px, #f3f6f9}

.fp-room[data-mood="busy"]{box-shadow:0 0 0 4px rgba(34,168,102,.28)}
.fp-room[data-mood="error"]{box-shadow:0 0 0 5px rgba(229,72,77,.42)}

/* Squad rang polosasi */
.fp-sq{position:absolute; left:14px; right:14px; top:-2px; height:6px; border-radius:0 0 6px 6px; background:var(--sq)}

/* Sarlavha — bosilganda shu xonaga fokus */
.fp-head{
  flex:none; height:48px; display:flex; align-items:center; gap:8px;
  padding:0 12px; cursor:pointer; min-width:0;
  font-size:calc(17px * var(--lab)); line-height:1;
}
.fp-head:hover .fp-nm{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
.fp-ic{flex:none; font-size:1.05em}
.fp-nm{font-weight:800; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1}
.fp-lock{flex:none}
.fp-cap{
  flex:none; font-size:.78em; font-weight:800; font-family:'JetBrains Mono', monospace;
  color:#2f6a4e; background:#e3f5ec; border:1.5px solid #bfe3cf; padding:3px 8px; border-radius:20px;
}
.fp-cap:empty{display:none}
.fp-cap.full{color:#8a5a00; background:#fff3d6; border-color:#f0d08a}
.fp-cap.over{color:#a3242a; background:#ffe7e8; border-color:#f3b4b7}
.fp-room.k-zone .fp-head, .fp-room.locked .fp-head{height:54px; font-size:calc(21px * var(--lab))}
.fp-room.locked .fp-nm{color:#fff}
.fp-room.locked .fp-head{background:var(--navy); color:#fff}
.fp-room.locked .fp-cap{background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.35)}

/* Tadbir nomi xona ustida */
.fp-event{
  position:absolute; z-index:6; left:10px; top:52px; max-width:calc(100% - 20px);
  background:var(--navy); color:#fff; font-weight:700;
  font-size:calc(14px * var(--lab)); padding:5px 11px; border-radius:20px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 4px 12px rgba(31,58,95,.35);
}
.fp-event[hidden]{display:none}
.fp-event::before{content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#5ee59a; margin-right:7px; vertical-align:1px; animation:fpPulse 1.6s infinite}
@keyframes fpPulse{50%{opacity:.25}}
.fp-room.has-event{box-shadow:0 0 0 4px rgba(54,136,224,.35)}
.fp-room.has-event .fp-occ{padding-top:44px}
.fp-room.k-zone .fp-event, .fp-room.locked .fp-event{top:58px}

.fp-body{position:relative; flex:1; min-height:0}

/* ------------------------------ Stollar ------------------------------ */
.fp-desks{
  display:grid; grid-template-columns:repeat(var(--cols, 4), var(--sw));
  gap:var(--g); padding:4px 12px 14px; align-content:start;
}
.fp-slot{position:relative; min-height:var(--sh); border-radius:10px; contain:layout style}
.fp-seat{
  height:var(--sh); border:2px dashed #ccd6e4; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:#8a98b0; font-size:12px; font-weight:600; text-align:center; padding:8px;
  background:rgba(255,255,255,.55);
}
.fp-chair{width:58px; height:34px; border-radius:6px; background:#dfe5ee; position:relative}
.fp-chair::after{content:''; position:absolute; left:16px; top:42px; width:26px; height:26px; border-radius:50%; background:#cfd8e5}

.fp-slot .desk{
  background:#fff; border:1px solid #dbe3ee; border-radius:10px;
  box-shadow:0 2px 6px rgba(21,42,80,.06);
  transition:opacity .3s, filter .3s, box-shadow .2s;
}
.fp-slot .desk:hover{box-shadow:0 0 0 2px var(--navy-2)}
.desk.away{opacity:.42; filter:grayscale(.85)}
.desk.away::after{
  content:'chiqib ketgan'; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  background:#fff; border:1.5px solid #c5d0e0; color:#56657e; font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:12px; white-space:nowrap; z-index:7;
}
.desk.dim, .avatar.dim{opacity:.16; filter:grayscale(1)}
.desk.away.dim{opacity:.1}

/* Economy: hot-desk zonasidagi stollar */
.fp-world[data-variant="economy"] .fp-room[data-location="hot-desks"]{--cols:6 !important; border-color:var(--navy-2); border-style:solid}
.fp-world[data-variant="economy"] .b-amen{height:auto; min-height:310px}

/* ------------------------------ Mehmonlar ------------------------------ */
.fp-guests{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:3px dashed #b7c3d6; border-radius:14px;
}
.fp-guests .fp-none{margin:0; padding:2px 16px 16px; color:#8a98b0; font-weight:600; font-size:15px}
.fp-guests.has .fp-none{display:none}

/* ------------------------------ Belgilar (stoldan tashqarida) ------------------------------ */
.fp-occ{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:8px 10px; padding:10px;
}
.fp-room.k-zone .fp-occ, .fp-guests .fp-occ{position:static; justify-content:flex-start; padding:0 12px 12px}
.fp-room.k-zone .fp-occ:empty, .fp-guests .fp-occ:empty{display:none}
.fp-occ > *{pointer-events:auto}

/* Fallback belgi (C3 createAvatar bo'lmasa) */
.avatar.fp-av{
  width:74px; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
}
.fp-av .av-dot{
  width:54px; height:54px; border-radius:50%; background:var(--c, #5a6b85); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:21px;
  border:3px solid #fff; box-shadow:0 3px 8px rgba(21,42,80,.28);
  position:relative;
}
.fp-av .av-dot::after{
  content:''; position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%;
  background:var(--st, #c2cddc); border:2px solid #fff;
}
.fp-av .av-nm{
  max-width:74px; font-size:12px; font-weight:700; color:#33415c; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(255,255,255,.85); border-radius:6px; padding:0 4px;
}
.avatar.fp-moving{z-index:30; position:relative}

/* ------------------------------ Mebel (yuqoridan) ------------------------------ */
.fp-furn{position:absolute; inset:6px 10px 10px; pointer-events:none}
.fp-furn i{display:none; position:absolute}
.fp-furn::before, .fp-furn::after{content:''; position:absolute}

/* Uchrashuv stoli + atrofidagi stullar (nuqtali halqa) */
.f-table::before, .f-table-sm::before, .f-table-long::before, .f-table-war::before{
  left:22%; right:22%; top:24%; bottom:24%; background:#e2d3b8; border:3px solid #c4ae88; border-radius:40px;
}
.f-table::after, .f-table-sm::after, .f-table-long::after, .f-table-war::after{
  left:calc(22% - 16px); right:calc(22% - 16px); top:calc(24% - 16px); bottom:calc(24% - 16px);
  border:9px dotted #9fb0c8; border-radius:56px;
}
.f-table-sm::before{left:30%; right:30%; top:26%; bottom:26%}
.f-table-sm::after{left:calc(30% - 14px); right:calc(30% - 14px); top:calc(26% - 14px); bottom:calc(26% - 14px); border-width:8px}
.f-table-long::before{left:12%; right:12%; top:30%; bottom:30%}
.f-table-long::after{left:calc(12% - 16px); right:calc(12% - 16px); top:calc(30% - 16px); bottom:calc(30% - 16px)}
.f-table-war::before{left:16%; right:16%; top:34%; bottom:20%; background:#d9dfe9; border-color:#9aa8bf}
.f-table-war::after{left:calc(16% - 16px); right:calc(16% - 16px); top:calc(34% - 16px); bottom:calc(20% - 16px)}
.f-table-war i:nth-child(1){display:block; left:10%; right:10%; top:2%; height:12%; background:#1f3a5f; border-radius:4px;
  box-shadow:inset 0 0 0 3px #3e6aa3}

/* Kafeteriya: yumaloq stollar to'ri */
.f-cafe::before{inset:0;
  background:
    radial-gradient(circle, #dcc8a6 0 17px, #b99e74 18px 19px, transparent 20px),
    radial-gradient(circle, transparent 0 25px, #a9b8cd 26px 30px, transparent 31px);
  background-size:84px 84px; background-position:center; opacity:.9}
.f-cafe::after{right:0; top:0; bottom:0; width:60px; background:#d6dde8; border-left:4px solid #9aa8bf; border-radius:6px}

/* Dam olish: divan, stol tennisi, o'simlik */
.f-sofa::before{left:4%; top:8%; width:44%; height:34%; border:16px solid #7aa38a; border-top-color:#5f8f73; border-right:none; border-radius:14px 0 0 14px}
.f-sofa::after{right:6%; bottom:10%; width:38%; height:40%; background:#2f8a62; border:4px solid #fff; outline:3px solid #1f6b4a; border-radius:4px;
  background-image:linear-gradient(90deg, transparent calc(50% - 2px), #fff calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px))}
.f-sofa i:nth-child(1){display:block; left:12%; top:58%; width:70px; height:70px; background:url(../assets/floor/plant.svg) center/contain no-repeat}

/* Oshxona: peshtaxta */
.f-counter::before{left:0; right:0; top:0; height:30px; background:#cdd5e1; border-bottom:4px solid #9aa8bf; border-radius:4px}
.f-counter::after{left:10%; top:4px; width:24px; height:22px; background:#2b3a55; border-radius:4px; box-shadow:44px 0 0 #8a5a2b, 88px 0 0 #b7c3d6}

/* Namozxona: gilamlar */
.f-rugs::before{left:6%; right:6%; top:14%; bottom:10%;
  background:repeating-linear-gradient(90deg, #2f7d5b 0 34px, #3f9b70 34px 38px, transparent 38px 48px); opacity:.55; border-radius:4px}

/* Sokin xona */
.f-chair::before{left:calc(50% - 28px); top:calc(50% - 22px); width:56px; height:44px; background:#c9b8e3; border-radius:18px 18px 10px 10px}
.f-chair::after{right:8px; bottom:6px; width:48px; height:48px; background:url(../assets/floor/plant.svg) center/contain no-repeat}

/* Resepshn */
.f-front::before{left:20%; right:20%; top:10%; height:56%; border:14px solid #2c4a73; border-top:none; border-radius:0 0 120px 120px}
.f-front::after{left:6px; bottom:4px; width:54px; height:54px; background:url(../assets/floor/plant.svg) center/contain no-repeat}

/* Server / IT: shkaflar va chiroqlar (server holati) */
.f-racks i{display:block; top:6%; bottom:10%; width:22%; background:#2a3550; border-radius:5px;
  background-image:repeating-linear-gradient(180deg, transparent 0 9px, #3c4a6a 9px 11px)}
.f-racks i:nth-child(1){left:6%} .f-racks i:nth-child(2){left:39%} .f-racks i:nth-child(3){left:72%}
.f-racks i::after{content:''; position:absolute; left:18%; right:18%; top:12%; height:5px; border-radius:3px;
  background:repeating-linear-gradient(90deg, #39d98a 0 6px, transparent 6px 11px); animation:fpBlink 1.2s steps(2) infinite}
.fp-room[data-online="0"] .f-racks i::after{background:repeating-linear-gradient(90deg, #ff5d62 0 6px, transparent 6px 11px); animation-duration:.5s}
@keyframes fpBlink{50%{opacity:.35}}

/* Hojatxona */
.f-wc::before{left:50%; top:10%; bottom:10%; width:4px; background:#9aa8bf}

/* Rahbar kabineti: stol + kreslo + o'simlik */
.f-office::before{left:18%; right:18%; top:16%; height:30%; background:#dccbb0; border:3px solid #b99e74; border-radius:6px}
.f-office::after{left:calc(50% - 15px); top:54%; width:30px; height:30px; border-radius:50%; background:#5d6f8f}
.f-office i:nth-child(1){display:block; right:2px; bottom:0; width:36px; height:36px; background:url(../assets/floor/plant.svg) center/contain no-repeat}

/* Kabina */
.f-booth::before{left:16%; right:16%; top:10%; height:30%; background:#cbd9ea; border-radius:4px}
.f-booth::after{left:calc(50% - 12px); top:50%; width:24px; height:24px; border-radius:50%; background:#8fb3d9}

/* Ish zonasi va lounge burchaklarida o'simliklar */
.fp-room.k-zone::after, .fp-room.locked::after{
  content:''; position:absolute; right:-18px; bottom:-18px; width:46px; height:46px;
  background:url(../assets/floor/plant.svg) center/contain no-repeat; pointer-events:none;
}

/* ------------------------------ Navigatsiya paneli ------------------------------ */
.fp-nav{
  position:absolute; right:14px; top:14px; z-index:20;
  display:flex; flex-direction:column; gap:6px;
  background:rgba(255,255,255,.92); border:1px solid var(--line, #dfe6ef); border-radius:12px;
  padding:6px; box-shadow:0 6px 18px rgba(21,42,80,.14);
}
.fp-nav button{
  width:34px; height:34px; border-radius:8px; border:1px solid #dfe6ef; background:#fff;
  color:var(--navy); font-size:18px; font-weight:800; cursor:pointer; line-height:1;
}
.fp-nav button:hover{background:#eef3fa}
.fp-nav button:focus-visible{outline:2px solid var(--navy-2); outline-offset:1px}
.fp-nav .fp-zoom{font:700 10px 'JetBrains Mono', monospace; color:#56657e; text-align:center}

/* ------------------------------ Bo'sh holat (reja ustida kichik karta) ------------------------------ */
#office.fp .empty{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:15;
  padding:12px 18px; background:rgba(255,255,255,.95); border:1px solid #dfe6ef; border-radius:14px;
  box-shadow:0 8px 24px rgba(21,42,80,.14); pointer-events:none; max-width:min(560px, 90%);
}
#office.fp .empty .emptyfig{display:none}
#office.fp .empty h2{font-size:16px}
#office.fp .empty p{margin:4px 0 0; font-size:13px}
#office.fp .empty pre{display:none}
#office.fp .empty.gone{display:none}

/* Harakat paytida manzil xonasi boshqa xonalar ustida chiziladi */
.fp-room.fp-raise, .fp-guests.fp-raise{z-index:40}