/* ==========================================================================
   Shared components used across dashboard surfaces.
   ========================================================================== */

/* ---- Floating in-place editor (opened by a field's pencil) ---- */
.dbInlinePopover{
  position:fixed; z-index:var(--z-popover);
  padding:8px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-pop);
  opacity:0; transform:translateY(-4px) scale(.98); transform-origin:top left;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease-out);
}
.dbInlinePopover.open{ opacity:1; transform:none; }
.dbInlinePopover.busy{ pointer-events:none; opacity:.7; }
.dbInlinePopover .dbQuickEditor{ display:flex; align-items:center; gap:6px; min-width:0; }
.dbInlinePopover .dbQuickInput{
  flex:1 1 auto; min-width:0; height:var(--ctl-md); padding:0 12px;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); font:500 14px/1 var(--font); outline:none;
}
.dbInlinePopover .dbQuickInput:focus{ border-color:var(--violet); box-shadow:var(--focus-ring); }
.dbInlinePopover .dbQuickOk,
.dbInlinePopover .dbQuickCancel{
  flex:0 0 auto; width:var(--ctl-md); height:var(--ctl-md); border-radius:var(--radius-sm);
  border:1px solid var(--border); cursor:pointer; font:700 15px/1 var(--font);
}
.dbInlinePopover .dbQuickOk{ background:var(--violet); border-color:var(--violet); color:#fff; }
.dbInlinePopover .dbQuickOk:hover{ background:var(--violet-ink); }
.dbInlinePopover .dbQuickCancel{ background:var(--surface); color:var(--muted); }
.dbInlinePopover .dbQuickCancel:hover{ background:var(--surface-soft); color:var(--text); }

/* ---- Pane placeholder while a hotel's full data loads ---- */
.bmPaneLoading{ display:grid; gap:10px; margin-top:12px; }
.bmPaneLoading span{
  display:block; height:64px; border-radius:var(--radius-md);
  background:linear-gradient(90deg, var(--surface-sunken), var(--surface-soft), var(--surface-sunken));
  background-size:200% 100%; animation:bmShimmer 1.3s linear infinite;
}
.bmPaneLoading span:nth-child(2){ height:48px; opacity:.8; }
.bmPaneLoading span:nth-child(3){ height:56px; opacity:.6; }
@keyframes bmShimmer{ to{ background-position:-200% 0; } }

/* ---- Country switcher (multi-country mode) ----
   Segmented control above the summary; the selected country scopes the whole dashboard. */
.countrySwitch{
  position:relative; display:inline-flex; gap:2px; max-width:100%;
  margin:0 0 var(--space-4); padding:4px;
  border-radius:var(--radius-pill); background:rgba(62,61,86,.07);
  overflow-x:auto; scrollbar-width:none;
}
.countrySwitch::-webkit-scrollbar{ display:none; }
.countrySwitchBtn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 16px; border:0; border-radius:var(--radius-pill);
  background:transparent; color:var(--muted); font:700 13px/1 var(--font); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.countrySwitchBtn:hover{ color:var(--ink); }
.countrySwitchBtn[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 2px 10px rgba(28,32,54,.10); }
.countrySwitchBtn:focus-visible{ outline:0; box-shadow:var(--focus-ring); }
.countrySwitchFlag{ font-size:16px; line-height:1; }
.countrySwitchCount{
  min-width:22px; height:20px; padding:0 6px; border-radius:var(--radius-pill);
  display:inline-grid; place-items:center; background:rgba(62,61,86,.08); color:var(--muted); font:800 11px/1 var(--font);
}
.countrySwitchBtn[aria-selected="true"] .countrySwitchCount{ background:var(--violet-soft); color:var(--violet-ink); }
@media (max-width:760px){
  .countrySwitch{ display:flex; margin-bottom:var(--space-3); }
  .countrySwitchBtn{ flex:1 1 0; justify-content:center; gap:6px; padding:0 8px; font-size:12.5px; }
  .countrySwitchCount{ display:none; }
}

/* Country badge (SPO messages, lists) */
.countryBadge{
  display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 8px;
  border-radius:var(--radius-pill); background:rgba(62,61,86,.07); color:var(--ink);
  font:700 11px/1 var(--font); letter-spacing:0; text-transform:none; white-space:nowrap;
}
.spoCountrySlot:empty{ display:none; }

/* Empty hotel list (filters match nothing / a country without hotels yet) */
.bmListEmpty{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:44px 16px; text-align:center; }
.bmListEmpty b{ font:800 15px/1.3 var(--font); color:var(--ink); }
.bmListEmpty span{ font:500 13px/1.45 var(--font); color:var(--muted); }
#tbody > tr.bmListEmptyRow > td{ padding:0; border:0; background:transparent; }

/* Motion shared by renderers: rows that appear in a live list, and content swaps */
.bmEntering{ animation:bmEnter .34s var(--ease-out) both; }
@keyframes bmEnter{ from{ opacity:0; transform:translateY(-6px) scale(.99); } to{ opacity:1; transform:none; } }
tr.bmEntering{ animation-name:bmEnterRow; }
@keyframes bmEnterRow{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .bmEntering{ animation:none; } }