/* Shared workspace layout, using the existing UI Core tokens. */
.vx-cloud-frame:not(.hidden) { min-width:0; }
.vx-cloud-frame > .vx-shell-header {
  position:sticky; top:0; z-index:30; display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:14px; padding-inline:24px;
  height:76px; min-height:76px; border-bottom:1px solid var(--vx-ui-line);
  background:var(--vx-ui-panel); color:var(--vx-ui-text);
}
.vx-shell-brand {
  display:inline-flex; align-items:center; gap:10px; min-width:0;
  width:fit-content; max-width:100%; color:inherit; text-decoration:none;
}
.vx-shell-brand .vx-mark { flex:none; display:grid; place-items:center; width:34px; height:34px; }
.vx-shell-brand svg { width:100%; height:100%; }
.vx-shell-brand-copy { display:grid; min-width:0; }
.vx-shell-brand-copy strong { font-size:20px; line-height:1.12; letter-spacing:.03em; }
.vx-shell-brand-copy > span { display:flex; gap:5px; min-width:0; align-items:center; }
.vx-shell-brand-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:var(--vx-ui-muted); }
.vx-shell-brand-copy .cloud-version { flex:none; }
.vx-cloud-frame .vx-shell-search { display:flex; justify-content:center; }
.vx-cloud-frame .vx-shell-controls { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:0; position:relative; }
.vx-cloud-frame .vx-shell-control, .vx-cloud-frame .vx-shell-profile {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:none; min-height:44px;
  min-width:44px; border:1px solid var(--vx-ui-line); border-radius:12px; padding:0 9px;
  color:var(--vx-ui-text); background:var(--vx-ui-panel); text-decoration:none; cursor:pointer;
}
.vx-cloud-frame .vx-shell-control:disabled { cursor:wait; opacity:.65; }
.vx-cloud-frame .vx-shell-profile > b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
.vx-shell-icon { display:block; width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.vx-cloud-frame .vx-shell-menu {
  position:absolute; inset-inline: auto 0; top:calc(100% + 8px); padding:8px;
  min-width:250px; max-width:min(320px,calc(100vw - 20px)); max-height:calc(100dvh - 100px); overflow:auto;
  border:1px solid var(--vx-ui-line); border-radius:16px; z-index:31;
  background:var(--vx-ui-panel); box-shadow:0 18px 42px #142d5525;
}
.vx-cloud-frame .vx-shell-menu.hidden { display:none; }
.vx-cloud-frame .vx-shell-menu .user-menu-head { display:grid; gap:2px; padding:9px 12px; overflow-wrap:anywhere; }
.vx-cloud-frame .vx-shell-menu .user-menu-head span { color:var(--vx-ui-muted); font-size:.82em; }
.vx-cloud-frame .vx-shell-menu [data-cloud-profile-item] {
  display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 12px; border:0;
  border-radius:9px; background:transparent; color:var(--vx-ui-text); text-decoration:none;
  text-align:start; font:inherit; cursor:pointer;
}
.vx-cloud-frame .vx-shell-menu [data-cloud-profile-item]:is(:hover,:focus-visible,[aria-current=page]),
.vx-cloud-frame .vx-shell-nav-item[aria-current=page], .vx-cloud-frame .vx-shell-bottom-item[aria-current=page] {
  background:var(--vx-ui-tint); color:var(--vx-ui-accent); font-weight:650;
}
.vx-cloud-frame .vx-shell-layout { display:grid; grid-template-columns:var(--vv-cloud-sidebar-w,220px) minmax(0,1fr); }
.vx-cloud-frame .vx-shell-sidebar { display:block; padding:20px 12px; }
.vx-cloud-frame .vx-shell-sidebar > nav { display:grid; gap:4px; }
.vx-cloud-frame .vx-shell-nav-item {
  display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 12px; border-radius:12px;
  color:var(--vx-ui-text); text-decoration:none; overflow-wrap:anywhere;
}
.vx-cloud-frame .vx-shell-nav-label { min-width:0; }
.vx-cloud-frame .vx-shell-bottom { display:none; }
.vx-cloud-frame .vx-shell-control:focus-visible, .vx-cloud-frame .vx-shell-profile:focus-visible,
.vx-cloud-frame .vx-shell-nav-item:focus-visible, .vx-cloud-frame .vx-shell-bottom-item:focus-visible {
  outline:2px solid var(--vx-ui-accent); outline-offset:2px;
}
@media (max-width:760px) {
  .vx-cloud-frame > .vx-shell-header {
    grid-template-columns:minmax(0,1fr) auto auto; gap:4px; height:68px; min-height:68px; padding-inline:9px;
  }
  .vx-cloud-frame .vx-shell-controls { gap:3px; }
  .vx-cloud-frame .vx-shell-profile > b, .vx-cloud-frame .vx-shell-profile > .user-menu-chevron,
  .vx-cloud-frame .vx-shell-search kbd, .vx-cloud-frame .vx-shell-search .vx-search-label { display:none; }
  .vx-shell-brand .vx-mark { width:28px; height:28px; }
  .vx-shell-brand { gap:5px; }
  .vx-shell-brand-copy strong { font-size:15px; }
  .vx-cloud-frame .vx-shell-layout { display:block; padding-bottom:76px; }
  .vx-cloud-frame .vx-shell-sidebar { display:none; }
  .vx-cloud-frame .vx-shell-bottom {
    position:fixed; inset:auto 0 0; z-index:25; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
    padding:5px 3px max(5px,env(safe-area-inset-bottom)); gap:1px;
    border-top:1px solid var(--vx-ui-line); background:var(--vx-ui-panel);
  }
  .vx-cloud-frame .vx-shell-bottom-item {
    display:grid; justify-items:center; align-content:center; gap:3px; min-width:0; min-height:50px; padding:4px 1px;
    border-radius:8px; color:var(--vx-ui-text); text-decoration:none; position:relative;
    text-align:center; font-size:clamp(8px,2.1vw,11px); line-height:1.12; overflow-wrap:anywhere;
  }
}
.vx-shell-quick-language { margin:5px 12px; }
.vx-cloud-frame .r1-device-row { gap:14px; }
.r1-device-facts { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:start; }
.r1-device-facts > span { display:grid; gap:2px; }
.r1-device-facts small { color:var(--vx-ui-muted); }
.owner-overview-group, .owner-overview-activity { margin-block:20px; }
.owner-overview-group h2 { margin-block-end:10px; }
.owner-overview-device { display:grid; gap:14px; }
@media(max-width:760px) {
  .vx-cloud-frame .r1-device-row { align-items:start; }
  .r1-device-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.vx-cloud-frame .vx-shell-brand-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:360px) {
  #ownerApp.vx-cloud-frame .vx-shell-brand .vx-mark { display:none; }
}

.vx-cloud-frame .r1-operation {
  grid-template-columns:minmax(0,1fr) minmax(0,.75fr) minmax(0,.8fr) minmax(0,.8fr) auto;
  overflow-wrap:anywhere;
}
@media(max-width:900px) {
  .vx-cloud-frame .r1-operation { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Shared page elements for staff and owner workspaces. */
.vx-page-section-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.vx-page-section-heading h2, .vx-page-row-text { min-width:0; overflow-wrap:anywhere; }
.vx-page-row .cloud-row-actions { display:flex; flex-wrap:wrap; gap:8px; }
.vx-page-search input { min-width:0; max-width:100%; }
.vx-page-feedback {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:14px; border:1px solid var(--vx-ui-line); border-radius:12px; overflow-wrap:anywhere;
}
.vx-page-feedback p { margin:.25rem 0 0; color:var(--vx-ui-muted); }
.vx-page-feedback[data-cloud-feedback="loading"] { background:var(--vx-ui-tint); }
.vx-page-feedback[data-cloud-feedback="forbidden"] { border-inline-start:3px solid var(--vx-ui-muted); }
.vx-page-feedback:is([data-cloud-feedback="error"],[data-cloud-feedback="stale"]) { border-inline-start:3px solid var(--vx-ui-accent); }
@media(max-width:900px) {
  .vx-cloud-frame .cloud-profile-grid { grid-template-columns:minmax(0,1fr); }
}

.vx-operation-context {
  display:grid; gap:6px; padding:12px 14px; border:1px solid var(--vx-ui-line);
  border-inline-start:3px solid var(--vx-ui-accent); border-radius:10px;
  background:var(--vx-ui-soft); overflow-wrap:anywhere;
}
.vx-operation-context p { margin:0; }