/* ==========================================================================
   Hotel card — the details panel (#side). Desktop: floating drawer on the right.
   Phone: full-screen sheet sliding up from the bottom.
   The only stylesheet for the panel chrome and its panes.
   ========================================================================== */

/* ---- Backdrop + panel ---- */
.backdrop{
  position:fixed; inset:0; z-index:calc(var(--z-sheet) - 1);
  background:rgba(24,22,38,.38);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.backdrop.show{ opacity:1; pointer-events:auto; }

.side{
  position:fixed; z-index:var(--z-sheet);
  top:12px; right:12px; bottom:12px;
  width:min(780px, calc(100vw - 48px));
  display:flex; flex-direction:column;
  background:#F4F3EF;
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
  transform:translateX(calc(100% + 24px));
  visibility:hidden;
  transition:transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.side.open{ transform:none; visibility:visible; transition:transform var(--dur-slow) var(--ease-out), visibility 0s; }

/* ---- Header ---- */
.side .sideHeader{
  flex:0 0 auto;
  display:flex; align-items:flex-start; gap:10px;
  padding:16px 16px 14px 20px;
  background:linear-gradient(180deg, var(--header-bg), var(--header-bg-2));
  color:var(--header-ink);
}
.side .sideHeader .h{ flex:1 1 auto; min-width:0; }
.side .sideHeader .name{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
  font:800 19px/1.2 var(--font); letter-spacing:.02em; text-transform:uppercase;
  overflow-wrap:anywhere;
}
.side .sideHeader .name .badge.metaTag{ text-transform:none; letter-spacing:0; }
/* location facts under the name: country (outside the Maldives), atoll, transfer */
.side .sideHeader .sub{
  margin-top:8px; display:flex; flex-wrap:wrap; gap:6px;
  font:600 12px/1 var(--font); color:var(--header-ink-2);
}
.side .sideHeader .sub:empty{ display:none; }
.side .sideHeader .sideFact{
  display:inline-flex; align-items:center; height:24px; padding:0 10px;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.10); color:var(--header-ink);
  white-space:nowrap;
}
.side .sideHeader .sideFact.muted{ background:transparent; color:var(--header-ink-2); padding:0 2px; }
.side .sideHeader .close,
.side .sideHeader .bmDetailsDeleteHotelBtn{
  flex:0 0 auto; width:var(--ctl-md); height:var(--ctl-md);
  display:grid; place-items:center; padding:0;
  border:1px solid var(--header-ctl-border); border-radius:var(--radius-sm);
  background:var(--header-ctl); color:var(--header-ink);
  font:600 15px/1 var(--font); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.side .sideHeader .close:hover,
.side .sideHeader .bmDetailsDeleteHotelBtn:hover{ background:var(--header-ctl-hover); border-color:rgba(255,255,255,.24); }
.side .sideHeader .bmDetailsDeleteHotelBtn:hover{ background:rgba(255,128,140,.22); border-color:rgba(255,128,140,.4); }
.side .sideHeader .bmDetailsDeleteHotelBtn svg{ width:17px; height:17px; fill:currentColor; }

/* ---- Body, tabs ---- */
.side .sideBody{
  position:relative; flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:0 16px 24px;
  scrollbar-width:thin;
}
.side .sideBody > .tabs{
  position:sticky; top:0; z-index:3;
  /* desktop: every tab stays visible (wraps to a second row when a hotel has many counts) */
  display:flex; flex-wrap:wrap; gap:4px; margin:0 -16px 14px; padding:12px 16px 10px;
  scrollbar-width:none;
  background:linear-gradient(180deg, #F4F3EF 82%, rgba(244,243,239,0));
}
.side .sideBody > .tabs::-webkit-scrollbar{ display:none; }
.side .sideBody > .tabs > .tabBtn{
  flex:0 0 auto; height:34px; padding:0 10px;
  border:1px solid var(--border); border-radius:var(--radius-pill);
  background:var(--surface); color:var(--text-2);
  font:700 12px/1 var(--font); white-space:nowrap; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.side .sideBody > .tabs > .tabBtn:hover{ border-color:var(--border-strong); color:var(--text); }
.side .sideBody > .tabs > .tabBtn.active{ background:var(--accent2); border-color:var(--accent2); color:#fff; }
.side .sideBody > .tabs > .tabBtn{ display:inline-flex; align-items:center; gap:6px; }
.side .sideBody > .tabs .tabCount{
  min-width:17px; height:17px; padding:0 4px; border-radius:var(--radius-pill);
  display:inline-grid; place-items:center;
  background:var(--surface-sunken); color:var(--text-2); font:800 10.5px/1 var(--font);
}
.side .sideBody > .tabs > .tabBtn.active .tabCount{ background:rgba(255,255,255,.18); color:#fff; }
.side .sideBody > .pane{ display:none; }
.side .sideBody > .pane.active{ display:block; animation:bmPaneIn var(--dur) var(--ease-out); }
@keyframes bmPaneIn{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }

/* ---- Loading overlay (first open) ---- */
.side .sideLoading{ position:absolute; inset:64px 0 0; z-index:5; display:none; place-items:center; background:rgba(244,243,239,.7); }
.side .sideLoading.show, .side .sideLoading.open, .side .sideLoading.active{ display:grid; }
.side .sideLoadingInner{ display:grid; justify-items:center; gap:10px; }
.side .sideLoadingText{ font:600 12px/1.3 var(--font); color:var(--muted); }

/* ---- Sections ---- */
#sideBody .section{ display:flex; flex-direction:column; gap:10px; }
#sideBody .sectionHeader{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  min-height:34px; padding:0 2px 2px;
}
#sideBody .sectionTitle{
  margin:0; font:800 11.5px/1 var(--font); letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
#sideBody .sectionHeader > .bmDetailsAddBtn,
#sideBody .sectionHeader > .bmDetailsActionBtn{ margin-left:auto; }

/* ---- Cards ---- */
#sideBody .itemCard{
  position:relative;
  padding:14px 14px 13px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  box-shadow:0 1px 2px rgba(32,30,52,.04);
  min-width:0;
}
#sideBody .itemCard .itemCard{ box-shadow:none; background:var(--surface-soft); }
#sideBody .itemTop{ display:flex; align-items:flex-start; gap:10px; min-width:0; }
#sideBody .itemTop > :first-child{ flex:1 1 auto; min-width:0; }
#sideBody .itemTitle{ font:800 14px/1.3 var(--font); color:var(--text); overflow-wrap:anywhere; }
#sideBody .itemMeta{ margin-top:3px; font:500 12px/1.4 var(--font); color:var(--muted); overflow-wrap:anywhere; }
#sideBody .mono{ white-space:pre-wrap; overflow-wrap:anywhere; font:500 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:var(--text-2); }
#sideBody .muted{ color:var(--muted); }

/* ---- Card actions (edit / delete / attach / files) ---- */
#sideBody .bmDetailsActions,
#sideBody .bmDetailsContactActions,
#sideBody .bmDetailsResortActions{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
#sideBody .bmDetailsActionBtn,
#sideBody .bmDetailsDeleteBtn,
#sideBody .bmDetailsEditBtn,
#sideBody .bmEntityAttachBtn{
  flex:0 0 auto; width:30px; height:30px; padding:0;
  display:inline-grid; place-items:center;
  border:1px solid var(--border); border-radius:var(--radius-xs);
  background:var(--surface); color:var(--text-2); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
#sideBody .bmDetailsActionBtn svg,
#sideBody .bmDetailsDeleteBtn svg,
#sideBody .bmDetailsEditBtn svg,
#sideBody .bmEntityAttachBtn svg{ width:14px; height:14px; display:block; }
#sideBody .bmDetailsActionBtn:hover,
#sideBody .bmDetailsEditBtn:hover,
#sideBody .bmEntityAttachBtn:hover{ background:var(--violet-soft); border-color:var(--violet-ring); color:var(--violet-ink); }
#sideBody .bmDetailsDeleteBtn{ color:var(--danger); }
#sideBody .bmDetailsDeleteBtn:hover{ background:var(--danger-soft); border-color:rgba(168,62,72,.3); }
/* text buttons: "+ Contact", "+ Contract", "+ SPO" … */
#sideBody .bmDetailsAddBtn,
#sideBody .sectionHeader > .bmDetailsActionBtn{
  width:auto; height:32px; padding:0 13px;
  border:1px solid var(--border); border-radius:var(--radius-pill);
  background:var(--surface); color:var(--text);
  font:700 12px/1 var(--font); white-space:nowrap; cursor:pointer;
}
#sideBody .bmDetailsAddBtn:hover,
#sideBody .sectionHeader > .bmDetailsActionBtn:hover{ background:var(--violet-soft); border-color:var(--violet-ring); color:var(--violet-ink); }

/* ---- Drag handles (contacts, media) ---- */
#sideBody .bmDetailDragHandle{
  width:18px; height:30px; padding:0; border:0; border-radius:6px;
  display:grid; place-items:center; background:transparent; color:rgba(63,60,87,.35);
  cursor:grab; touch-action:none;
}
#sideBody .bmDetailDragHandle svg{ width:7px; height:14px; }
#sideBody .bmDetailDragHandle:hover{ color:var(--text-2); background:var(--surface-soft); }
#sideBody .bmDetailDragging{ box-shadow:var(--shadow-lg); z-index:4; }

/* ---- Contacts ---- */
#pane-contacts .itemCard{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:8px; align-items:start;
}
#pane-contacts .itemCard > .bmDetailDragHandle{ grid-column:1; grid-row:1; margin-top:4px; }
#pane-contacts .itemCard > .contactRow{ grid-column:2; grid-row:1; }
#pane-contacts .itemCard > .bmDetailsContactActions{ grid-column:3; grid-row:1; }
#pane-contacts .itemCard:not(.bmDetailSortable){ grid-template-columns:minmax(0,1fr) auto; }
#pane-contacts .itemCard:not(.bmDetailSortable) > .contactRow{ grid-column:1; }
#pane-contacts .itemCard:not(.bmDetailSortable) > .bmDetailsContactActions{ grid-column:2; }
#sideBody .contactRow{ display:flex; align-items:flex-start; gap:12px; min-width:0; }
#sideBody .contactRow .avatar{
  flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--violet-soft); color:var(--violet-ink); font:800 13px/1 var(--font); letter-spacing:.02em;
}
#sideBody .bmContactMain{ flex:1 1 auto; min-width:0; }
#sideBody .bmContactRole{ margin-top:2px; font:600 12.5px/1.35 var(--font); color:var(--muted); overflow-wrap:anywhere; }
#sideBody .bmContactHistory{ margin-top:8px; }
#sideBody .bmContactEmailLine{ margin-top:4px; display:flex; flex-wrap:wrap; gap:2px 8px; }
#sideBody .bmContactPhoneLine{ margin-top:4px; }

/* ---- Media ---- */
#pane-media .itemCard.bmDetailSortable{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:8px; }
#pane-media .itemCard.bmDetailSortable > :not(.bmDetailDragHandle){ grid-column:2; }
#pane-media .itemCard.bmDetailSortable > .bmDetailDragHandle{ grid-column:1; grid-row:1 / span 3; margin-top:2px; }
#sideBody a.link{ color:var(--info); text-decoration:none; font-weight:600; }
#sideBody a.link:hover{ text-decoration:underline; }

/* ---- Contracts: year accordions ---- */
#pane-contracts .acc{ display:flex; flex-direction:column; gap:8px; }
#pane-contracts .accHead{
  display:flex; align-items:center; min-height:34px; padding:0 4px;
  border-radius:var(--radius-sm); cursor:pointer; user-select:none;
}
#pane-contracts .accHead:hover{ background:rgba(63,60,87,.05); }
#pane-contracts .accHead:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
#pane-contracts .caret{
  width:9px; height:9px; margin:0 3px 0 4px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(-45deg); transition:transform var(--dur) var(--ease);
}
#pane-contracts .acc.open .caret{ transform:rotate(45deg); }
#pane-contracts .accBody{ display:none; flex-direction:column; gap:8px; }
#pane-contracts .acc.open .accBody{ display:flex; }

/* ---- Contracts / offers cards ---- */
#sideBody .dbContractCard > .itemTop,
#sideBody .dbOfferCard > .itemTop{ align-items:center; }
#sideBody .dbCardMain{ flex:1 1 auto; min-width:0; }
#sideBody .dbStatusSlot{ flex:0 0 auto; }
#sideBody .bmDetailsFilesPanel{
  margin-top:10px; padding:10px; border-radius:var(--radius-sm);
  background:var(--surface-soft); border:1px solid var(--border);
}

/* ---- SPO type tabs ---- */
#pane-spo .bmSpoTabBar{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-bottom:10px; }
#pane-spo .bmSpoTabBtn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 11px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--text-2);
  font:700 11px/1 var(--font); letter-spacing:.03em; cursor:pointer;
}
#pane-spo .bmSpoTabBtn.bmSpoTabActive{ background:var(--accent2); border-color:var(--accent2); color:#fff; }
#pane-spo .bmSpoTabPanel{ display:flex; flex-direction:column; gap:10px; }

/* ---- Overview ---- */
#pane-overview .chipRow{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
#pane-overview .chip{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:40px; margin:0; padding:8px 12px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
  font:600 13px/1.3 var(--font); color:var(--text);
}
#pane-overview .chip > b{ font:700 11px/1 var(--font); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
#pane-overview .chip.dbLiveEditable{ padding-right:40px; }
#pane-overview .chip.dbLiveEditable > .dbLiveEditBtn{ position:absolute; right:7px; top:50%; transform:translateY(-50%); }
#pane-overview .markupRows{ display:grid; gap:6px; margin-top:10px; }
#pane-overview .markupRow{ display:grid; grid-template-columns:minmax(70px, 120px) minmax(0,1fr); gap:10px; padding:8px 10px; border-radius:var(--radius-xs); background:var(--surface-soft); }
#pane-overview .markupMarket{ font:800 12px/1.35 var(--font); color:var(--text); }
#pane-overview .markupRule{ font:500 12.5px/1.45 var(--font); color:var(--text-2); white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---- Phone: full-screen sheet ---- */
@media (max-width:760px){
  .side{
    inset:0; top:auto; width:auto; height:100dvh; max-height:100dvh;
    border-radius:0; border:0;
    transform:translateY(100%);
  }
  .side .sideHeader{ padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 12px 16px; }
  .side .sideHeader .name{ font-size:16px; }
  .side .sideHeader .sub{ -webkit-line-clamp:1; }
  .side .sideBody{ padding:0 12px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .side .sideBody > .tabs{ flex-wrap:nowrap; overflow-x:auto; margin:0 -12px 12px; padding:10px 12px 8px; }
  #pane-overview .chipRow{ grid-template-columns:minmax(0,1fr); }
  #sideBody .itemCard{ padding:12px; }
  #sideBody .contactRow .avatar{ display:none; }
}
html.bm-force-mobile .side{ inset:0; top:auto; width:auto; height:100dvh; border-radius:0; transform:translateY(100%); }
html.bm-force-mobile .side.open{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .side, .backdrop, .side .sideBody > .pane.active{ transition:none; animation:none; }
}