/* ================================================================
   QCE GATEWAY — OpenNebula / Sunstone Skin v1.0.0
   2026-10-24 — ROZEN QCE (Tier 1)

   Scope: node.qcegateway.com ONLY.
   This file is a PRIVATE skin. It shares nothing with the Grafana
   skin except the icon assets in /qce-brand/shared/.

   Stable selectors used (survive OpenNebula upgrades):
     [data-cy="sidebar"]        - the nav sidebar
     svg.logoPadding            - the vendor logo mark
     .MuiDrawer-paper           - MUI drawer
     .MuiButton-root            - MUI buttons
     .MuiPaper-root             - MUI surfaces
   Emotion hashes (css-xxxxx) are NEVER targeted.
   ================================================================ */

:root {
  --qce-canvas: #020617;
  --qce-surface: #0B1528;
  --qce-border: #1E293B;
  --qce-primary: #00C2FF;
  --qce-cyan: #00D2FF;
  --qce-sky: #00A3FF;
  --qce-text: #FFFFFF;
  --qce-text-dim: #94A3B8;
  --qce-glow-primary: rgba(0, 194, 255, 0.28);
  --qce-glow-cyan: rgba(0, 210, 255, 0.22);
}

/* ---------- 1. CANVAS ---------- */
html, body, #root {
  background-color: var(--qce-canvas) !important;
  color: var(--qce-text) !important;
}

body {
  background-image:
    radial-gradient(ellipse 900px 600px at 0% 0%, rgba(0,194,255,0.08), transparent 62%),
    radial-gradient(ellipse 800px 600px at 100% 100%, rgba(0,210,255,0.06), transparent 62%) !important;
  background-attachment: fixed !important;
}

/* ---------- 2. KILL EVERY VENDOR LOGO MARK ---------- */
/* Two distinct vendor marks exist in Sunstone:
     svg.logoPadding                 - the sidebar cloud glyph
     svg[data-cy="opennebula-logo"]  - the LOGIN page cloud logo (440x48)
   Both must die, at every render stage (SSR + hydration + splash). */
svg.logoPadding,
svg[data-cy="opennebula-logo"],
svg[data-cy*="opennebula" i],
img[src*="opennebula" i],
img[src*="sunstone" i] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* Login card: Nebula Glass + Floating Sphere 1px border */
main.MuiContainer-root form,
main.MuiContainer-root .MuiBox-root,
.MuiContainer-root form {
  background-color: var(--qce-surface) !important;
  border: 1px solid var(--qce-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
}

/* QCE logo injected on the login card */
img.qce-login-logo {
  display: block !important;
  height: 56px !important;
  width: auto !important;
  max-width: 300px !important;
  margin: 0 auto 24px !important;
  object-fit: contain !important;
}

/* Kill any full-viewport vendor splash */
body > div > svg[viewBox="600 400 750 300"],
[class*="splash" i] svg,
[class*="loader" i] svg[data-cy*="opennebula" i] {
  display: none !important;
}

/* Give the sidebar logo container room for the QCE wordmark */
[data-cy="sidebar"] > div:first-child {
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
}

/* ---------- 3. SIDEBAR / DRAWER ---------- */
.MuiDrawer-paper {
  background-color: var(--qce-surface) !important;
  border-right: 1px solid var(--qce-border) !important;
  color: var(--qce-text) !important;
}

[data-cy="sidebar"] a,
[data-cy="sidebar"] .MuiListItem-root {
  color: var(--qce-text) !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

[data-cy="sidebar"] a:hover,
[data-cy="sidebar"] .MuiListItem-root:hover {
  background-color: rgba(0, 194, 255, 0.10) !important;
  color: var(--qce-cyan) !important;
}

[data-cy="sidebar"] .Mui-selected,
[data-cy="sidebar"] [aria-current="page"] {
  background-color: rgba(0, 194, 255, 0.16) !important;
  border-left: 3px solid var(--qce-primary) !important;
  color: var(--qce-primary) !important;
}

[data-cy="sidebar"] .MuiListItemIcon-root,
[data-cy="sidebar"] svg {
  color: var(--qce-primary) !important;
}

/* ---------- 4. SURFACES / CARDS ---------- */
.MuiPaper-root {
  background-color: var(--qce-surface) !important;
  color: var(--qce-text) !important;
  border: 1px solid var(--qce-border) !important;
}

.MuiCard-root,
.MuiAccordion-root {
  background-color: var(--qce-surface) !important;
  border: 1px solid var(--qce-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.40) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.MuiCard-root:hover {
  border-color: rgba(0, 194, 255, 0.40) !important;
  box-shadow: 0 8px 32px rgba(0, 194, 255, 0.12) !important;
}

/* ---------- 5. BUTTONS ---------- */
.MuiButton-root {
  text-transform: none !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  letter-spacing: 0.01em !important;
}

.MuiButton-containedPrimary,
.MuiButton-contained.MuiButton-colorPrimary {
  background-image: linear-gradient(135deg, var(--qce-primary) 0%, var(--qce-cyan) 100%) !important;
  background-color: var(--qce-primary) !important;
  color: var(--qce-canvas) !important;
  border: none !important;
  box-shadow: 0 4px 16px var(--qce-glow-primary) !important;
}

.MuiButton-containedPrimary:hover {
  background-image: linear-gradient(135deg, var(--qce-cyan) 0%, var(--qce-sky) 100%) !important;
  box-shadow: 0 6px 24px var(--qce-glow-cyan) !important;
  transform: translateY(-1px) !important;
}

.MuiButton-textPrimary,
.MuiButton-text.MuiButton-colorPrimary {
  color: var(--qce-primary) !important;
}

.MuiButton-outlinedPrimary {
  border-color: var(--qce-primary) !important;
  color: var(--qce-primary) !important;
}

/* ---------- 6. INPUTS ---------- */
.MuiOutlinedInput-root {
  background-color: rgba(11, 21, 40, 0.85) !important;
  color: var(--qce-text) !important;
  border-radius: 8px !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--qce-border) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(0, 194, 255, 0.40) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--qce-cyan) !important;
  border-width: 2px !important;
}

.MuiInputLabel-root {
  color: var(--qce-text-dim) !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--qce-cyan) !important;
}

.MuiInputBase-input::placeholder {
  color: var(--qce-text-dim) !important;
  opacity: 1 !important;
}

/* ---------- 7. TYPOGRAPHY ---------- */
.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 {
  color: var(--qce-text) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.MuiTypography-body1, .MuiTypography-body2 {
  color: var(--qce-text) !important;
}

.MuiTypography-caption {
  color: var(--qce-text-dim) !important;
}

/* ---------- 8. LINKS ---------- */
a, .MuiLink-root {
  color: var(--qce-sky) !important;
}

a:hover, .MuiLink-root:hover {
  color: var(--qce-cyan) !important;
}

/* ---------- 9. TABLES ---------- */
.MuiTableHead-root .MuiTableCell-root {
  background-color: rgba(17, 24, 39, 0.85) !important;
  color: var(--qce-text) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--qce-border) !important;
}

.MuiTableCell-root {
  color: var(--qce-text) !important;
  border-bottom: 1px solid rgba(0, 194, 255, 0.06) !important;
}

.MuiTableRow-root:hover {
  background-color: rgba(0, 194, 255, 0.04) !important;
}

/* ---------- 10. CHIPS / BADGES ---------- */
.MuiChip-root {
  background-color: rgba(0, 194, 255, 0.12) !important;
  color: var(--qce-primary) !important;
  border: 1px solid var(--qce-border) !important;
}

/* ---------- 11. SCROLLBARS ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--qce-canvas); }
::-webkit-scrollbar-thumb {
  background: rgba(0, 194, 255, 0.30);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--qce-primary); }

/* ---------- 12. LOGIN PAGE ---------- */
.MuiContainer-root {
  background-color: transparent !important;
}

/* Login card = Nebula Glass */
.MuiContainer-root .MuiPaper-root,
.MuiContainer-root form {
  background-color: var(--qce-surface) !important;
  border: 1px solid var(--qce-border) !important;
  border-radius: 12px !important;
}

/* ---------- 13. QCE LOGO SLOT (filled by one-runtime.js) ---------- */
.qce-one-logo {
  display: block !important;
  height: 30px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

/* ---------- 14. PROGRESS BARS ---------- */
.MuiLinearProgress-root {
  background-color: rgba(0, 194, 255, 0.12) !important;
}

.MuiLinearProgress-bar {
  background-image: linear-gradient(90deg, var(--qce-primary), var(--qce-cyan)) !important;
}

/* ---------- 15. VENDOR FOOTER LINKS ---------- */
/* The footer links still point at opennebula.io even after the text is
   de-branded. Remove them entirely. */
a[href*="opennebula.io"],
a[href*="opennebula.org"],
a[href*="github.com/OpenNebula"] {
  display: none !important;
}

/* ---------- 16. SIDEBAR NAV TOGGLE + ITEMS ---------- */
/* Sunstone collapses the nav rail by default. Ensure the expanded rail
   renders with QCE surfaces when opened. */
[data-cy="sidebar"] .MuiList-root,
[data-cy="sidebar"] ul {
  background-color: transparent !important;
}
[data-cy="sidebar"] li > div,
[data-cy="sidebar"] li > a {
  border-radius: 8px !important;
}

/* ---------- 17. MAIN CONTENT CANVAS (MUI default #222431 -> Cosmic Abyss) ---------- */
/* MUI paints the app shell with its own dark surface. Override at the
   structural level so the whole dashboard sits on Cosmic Abyss. */
#root,
#root > div,
#root > div > div,
main,
.MuiContainer-root,
.MuiBox-root[class*="css-"],
[class*="MuiContainer"] {
  background-color: transparent !important;
}

body,
#root {
  background-color: var(--qce-canvas) !important;
}

/* The app shell wrapper */
#root > div > div:not(.MuiDrawer-root):not([data-cy="sidebar"]) {
  background-color: var(--qce-canvas) !important;
}

/* Cards / panels inside the dashboard keep Nebula Glass */
.MuiCard-root,
.MuiPaper-root.MuiPaper-elevation1,
.MuiAccordion-root {
  background-color: var(--qce-surface) !important;
}

/* ---------- 18. KILL MUI DEFAULT PURPLE ACCENT ---------- */
/* #927eb2 is MUI dark-mode primary. Force our Action Aqua everywhere. */
.MuiSvgIcon-root,
.MuiIconButton-root,
.MuiCheckbox-root,
.MuiRadio-root,
.MuiSwitch-colorPrimary,
.MuiTabs-indicator,
.MuiLinearProgress-bar,
.MuiCircularProgress-colorPrimary {
  color: var(--qce-primary) !important;
}

.MuiTabs-indicator {
  background-color: var(--qce-primary) !important;
}

.MuiCheckbox-colorPrimary.Mui-checked,
.MuiRadio-colorPrimary.Mui-checked,
.MuiSwitch-colorPrimary.Mui-checked {
  color: var(--qce-primary) !important;
}

/* Selection + focus rings */
::selection {
  background: var(--qce-cyan) !important;
  color: var(--qce-canvas) !important;
}

*:focus-visible {
  outline: 2px solid var(--qce-cyan) !important;
  outline-offset: 1px !important;
}

/* ---------- 19. NEUTRALIZE SUNSTONE DECORATIVE BLOBS ---------- */
/* Each dashboard stat card carries a large decorative <span> painted with
   a soft purple radial blob (rgb(216,172,255)). The card surface is already
   Nebula Glass; only the blob needs re-tinting to Action Aqua. */
[data-cy="dashboard-widget-total-sunstone-resources"] .MuiPaper-root > span,
[data-cy="dashboard-widget-total-sunstone-resources"] .MuiPaper-root > span * {
  background-color: rgba(0, 194, 255, 0.10) !important;
  background-image: radial-gradient(circle, rgba(0, 194, 255, 0.18) 0%, transparent 70%) !important;
  opacity: 1 !important;
}

/* ---------- 20. LOGIN LOGO AT TOP OF CARD ---------- */
/* one-runtime.js prepends img.qce-login-logo as the first child of the
   login form, above the fieldset and the "Login in your account" headline. */
main form > img.qce-login-logo,
.MuiContainer-root form > img.qce-login-logo {
  display: block !important;
  height: 56px !important;
  width: auto !important;
  max-width: 280px !important;
  margin: 0 auto 20px !important;
  object-fit: contain !important;
  order: -1 !important;
}

main form {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* ---------- 21. SIDEBAR: SOLID, READABLE, NO HOVER BLEED ---------- */
/* [data-cy="sidebar"] IS the rail (46px). It measured rgba(0,0,0,0).
   Give it a solid Nebula Glass surface so hover states cannot bleed
   through to the page behind it. */
[data-cy="sidebar"] {
  background-color: var(--qce-surface) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid var(--qce-border) !important;
  z-index: 1200 !important;
}

/* The logo box must never shift or distort on hover */
[data-cy="sidebar"] > div:first-child {
  background-color: var(--qce-surface) !important;
  flex-shrink: 0 !important;
  transform: none !important;
  transition: none !important;
  position: relative !important;
  z-index: 2 !important;
}

[data-cy="sidebar"] > div:first-child img.qce-one-logo {
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}

/* Menu items: solid hover fill, no transparency bleed */
[data-cy="sidebar"] [data-cy="main-menu-item"] {
  background-color: transparent !important;
  transition: background-color 0.15s ease !important;
}

[data-cy="sidebar"] [data-cy="main-menu-item"]:hover {
  background-color: rgba(0, 194, 255, 0.14) !important;
}

[data-cy="sidebar"] [data-cy="main-menu-item"]:hover svg {
  color: var(--qce-cyan) !important;
}

/* ---------- 22. VM LIST ROWS + TABLE ROWS -> NEBULA GLASS ---------- */
.MuiDataGrid-row,
.MuiTableRow-root,
[class*="DataGrid"][class*="row"],
.MuiListItem-root {
  background-color: var(--qce-surface) !important;
  border: 1px solid var(--qce-border) !important;
  border-radius: 10px !important;
  margin: 4px 0 !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.MuiDataGrid-row:hover,
.MuiTableRow-root:hover,
.MuiListItem-root:hover {
  border-color: rgba(0, 194, 255, 0.45) !important;
  box-shadow: 0 4px 18px rgba(0, 194, 255, 0.10) !important;
}

.MuiTableCell-root {
  background-color: transparent !important;
  border-bottom: none !important;
}

/* Toolbar / list containers keep the canvas, not grey */
.MuiToolbar-root,
[class*="DataGrid"][class*="toolbar"],
[class*="DataGrid"][class*="container"] {
  background-color: transparent !important;
}