/* VX Product UX #27 — unified cabinet design system. Scoped to body.vx-ds-v27. */
body.vx-ds-v27 {
  --vx27-bg: #08111d;
  --vx27-bg-soft: #0c1726;
  --vx27-panel: #101d2d;
  --vx27-panel-2: #142235;
  --vx27-panel-hover: #182a40;
  --vx27-line: rgba(154, 179, 211, .14);
  --vx27-line-strong: rgba(154, 179, 211, .24);
  --vx27-text: #edf5ff;
  --vx27-muted: #91a4bd;
  --vx27-primary: #2f80ed;
  --vx27-primary-strong: #3b8cff;
  --vx27-success: #22c55e;
  --vx27-warning: #f59e0b;
  --vx27-danger: #ef4444;
  --vx27-info: #06b6d4;
  --vx27-watch: #8b5cf6;
  --vx27-radius-sm: 8px;
  --vx27-radius: 12px;
  --vx27-radius-lg: 16px;
  --vx27-shadow: 0 14px 40px rgba(0,0,0,.22);
  --vx27-control-h: 38px;
  --vx27-gap: 12px;
  color: var(--vx27-text);
}

/* predictable sizing / focus */
body.vx-ds-v27 *, body.vx-ds-v27 *::before, body.vx-ds-v27 *::after { box-sizing: border-box; }
body.vx-ds-v27 :where(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 2px solid rgba(59,140,255,.9) !important;
  outline-offset: 2px;
}

/* page hierarchy */
body.vx-ds-v27 :where(.page-title, .vxPageTitle, .vxOpsTitle, .vxOwnerDashboardTitle, h1) {
  letter-spacing: -.02em;
}
body.vx-ds-v27 :where(.muted, .hint, .subtle, .vx-muted, .vxMutedish) { color: var(--vx27-muted) !important; }
body.vx-ds-v27 :where(.card, .panel, .vxCard, .vx-card, .vxPanel, .vx-panel, .vxOpsCard, .vxOwnerDashboardCard) {
  border-color: var(--vx27-line) !important;
  border-radius: var(--vx27-radius) !important;
}

/* Controls */
body.vx-ds-v27 :where(button, .btn, .button, .vxBtn, .vx-button, a.primary, button.primary) {
  min-height: var(--vx27-control-h);
  border-radius: var(--vx27-radius-sm) !important;
  font-weight: 650;
  letter-spacing: 0;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease, opacity .15s ease;
}
body.vx-ds-v27 :where(button, .btn, .button, .vxBtn, .vx-button):not(:disabled):active { transform: translateY(1px); }
body.vx-ds-v27 :where(button, .btn, .button, .vxBtn, .vx-button):disabled { opacity: .48; cursor: not-allowed; }
body.vx-ds-v27 :where(.primary, .btn-primary, .vxBtnPrimary, .vx-button--primary) {
  background: linear-gradient(180deg, var(--vx27-primary-strong), var(--vx27-primary)) !important;
  border-color: rgba(89,159,255,.42) !important;
  color: #fff !important;
}
body.vx-ds-v27 :where(.danger, .btn-danger, .vxBtnDanger, .vx-button--danger) {
  background: rgba(239,68,68,.14) !important;
  border-color: rgba(239,68,68,.35) !important;
  color: #ffb6b6 !important;
}

/* Inputs / filters */
body.vx-ds-v27 :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  min-height: var(--vx27-control-h);
  border-radius: var(--vx27-radius-sm) !important;
  border-color: var(--vx27-line-strong) !important;
  background-color: rgba(6,14,24,.52) !important;
  color: var(--vx27-text) !important;
}
body.vx-ds-v27 :where(input, select, textarea)::placeholder { color: #6f839e; }
body.vx-ds-v27 :where(.filters, .filterbar, .filter-bar, .vxFilters, .vx-filterbar, .vxOpsFilters) {
  gap: 10px !important;
}

/* Tables */
body.vx-ds-v27 :where(table, .vxTable, .vx-table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
body.vx-ds-v27 :where(table, .vxTable, .vx-table) thead th {
  color: #a9bad0;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em;
  border-bottom-color: var(--vx27-line-strong) !important;
}
body.vx-ds-v27 :where(table, .vxTable, .vx-table) tbody tr { transition: background-color .12s ease; }
body.vx-ds-v27 :where(table, .vxTable, .vx-table) tbody tr:hover { background: rgba(59,140,255,.055); }
body.vx-ds-v27 :where(table, .vxTable, .vx-table) td { border-bottom-color: var(--vx27-line) !important; }

/* Tabs */
body.vx-ds-v27 :where(.tabs, .vxTabs, .vx-tabs, [role=tablist]) {
  gap: 4px;
  border-bottom-color: var(--vx27-line) !important;
}
body.vx-ds-v27 :where(.tab, .vxTab, .vx-tab, [role=tab]) {
  border-radius: 8px 8px 0 0 !important;
  color: var(--vx27-muted);
}
body.vx-ds-v27 :where(.tab.active, .tab.is-active, .vxTab.active, .vx-tab.active, [role=tab][aria-selected=true]) {
  color: var(--vx27-text) !important;
  background: rgba(47,128,237,.11) !important;
}

/* Status pills: use existing semantic class names without requiring markup migrations. */
body.vx-ds-v27 :where(.badge, .pill, .chip, .tag, .status, .vxBadge, .vx-badge, .vxPill) {
  border-radius: 999px !important;
  font-weight: 650;
}
body.vx-ds-v27 :where(.online, .success, .is-online, .is-success, .status-ok) { color: #72e59b !important; }
body.vx-ds-v27 :where(.warning, .warn, .is-warning) { color: #ffc768 !important; }
body.vx-ds-v27 :where(.error, .danger-text, .is-error, .offline, .is-offline) { color: #ff8d8d !important; }
body.vx-ds-v27 :where(.watch, .vxWatchBadge, .is-watch) { color: #c5adff !important; }

/* Modals / drawers */
body.vx-ds-v27 :where(.modal, .vxModal, .vx-modal, [role=dialog]) {
  border-radius: var(--vx27-radius-lg) !important;
}
body.vx-ds-v27 :where(.modal-content, .vxModalContent, .vx-modal__content, .drawer, .vxDrawer) {
  border: 1px solid var(--vx27-line-strong) !important;
  box-shadow: var(--vx27-shadow) !important;
}
body.vx-ds-v27 :where(.modal-header, .modal-footer, .vxModalHeader, .vxModalFooter, .vx-modal__header, .vx-modal__footer) {
  border-color: var(--vx27-line) !important;
}

/* Empty / loading states */
body.vx-ds-v27 :where(.empty, .empty-state, .vxEmpty, .vx-empty, .no-data) {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  color: var(--vx27-muted);
}
body.vx-ds-v27 :where(.skeleton, .vxSkeleton, .vx-skeleton) {
  background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.075), rgba(255,255,255,.035));
  background-size: 220% 100%;
  animation: vx27Skeleton 1.35s linear infinite;
  border-radius: 8px;
}
@keyframes vx27Skeleton { to { background-position: -220% 0; } }

/* Compact density for administration surfaces. */
body.vx-ds-v27 :where(.vxOwnerDashboard, .vxOperations, .vxMapShell, .vxLogsWorkspace, .vxSAConsole) {
  --vx27-control-h: 36px;
}

/* Utility classes available to all new product work. */
body.vx-ds-v27 .vx27-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
body.vx-ds-v27 .vx27-page-head__title { margin:0; font-size:24px; line-height:1.15; }
body.vx-ds-v27 .vx27-page-head__sub { margin-top:5px; color:var(--vx27-muted); font-size:13px; }
body.vx-ds-v27 .vx27-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
body.vx-ds-v27 .vx27-status { display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:3px 9px; border:1px solid var(--vx27-line); border-radius:999px; font-size:12px; font-weight:700; }
body.vx-ds-v27 .vx27-status--ok { color:#72e59b; background:rgba(34,197,94,.09); border-color:rgba(34,197,94,.22); }
body.vx-ds-v27 .vx27-status--warning { color:#ffc768; background:rgba(245,158,11,.09); border-color:rgba(245,158,11,.22); }
body.vx-ds-v27 .vx27-status--danger { color:#ff9898; background:rgba(239,68,68,.09); border-color:rgba(239,68,68,.22); }
body.vx-ds-v27 .vx27-status--watch { color:#c5adff; background:rgba(139,92,246,.09); border-color:rgba(139,92,246,.22); }
body.vx-ds-v27 .vx27-grid { display:grid; gap:12px; }
body.vx-ds-v27 .vx27-card { border:1px solid var(--vx27-line); background:linear-gradient(180deg, rgba(20,34,53,.92), rgba(13,25,40,.92)); border-radius:var(--vx27-radius); padding:14px; }
body.vx-ds-v27 .vx27-card:hover { border-color:var(--vx27-line-strong); }
body.vx-ds-v27 .vx27-kbd { display:inline-flex; align-items:center; min-height:22px; padding:1px 6px; border:1px solid var(--vx27-line-strong); border-bottom-color:rgba(154,179,211,.36); border-radius:5px; color:#b9c8da; background:rgba(255,255,255,.035); font-size:11px; }

/* Responsive behavior: tables stay usable and action bars wrap rather than crush. */
@media (max-width: 980px) {
  body.vx-ds-v27 .vx27-page-head { flex-direction:column; }
  body.vx-ds-v27 .vx27-actions { width:100%; }
  body.vx-ds-v27 :where(.table-wrap, .vxTableWrap, .vx-table-wrap) { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (max-width: 640px) {
  body.vx-ds-v27 { --vx27-control-h: 42px; }
  body.vx-ds-v27 :where(button, .btn, .button, .vxBtn, .vx-button) { min-height:42px; }
  body.vx-ds-v27 :where(.modal-content, .vxModalContent, .vx-modal__content) { max-width:calc(100vw - 20px) !important; }
}