/* ================================================================
   QCE GATEWAY CLOUD — FireEdge White-Label Overlay  (Phase 2)
   ----------------------------------------------------------------
   Palette extracted from QCGW source (192.168.68.50:5900/src/index.css):
     3EA5DD (primary, 60x)   00E5FF (accent, 56x)   F5B93E (gold, 35x)
     121637 (navy, 31x)      0A0E14 (void, 23x)     4FB5ED (sky, 23x)
     2BBE8A (emerald, 19x)   2B8AC2 (deep, 18x)
   Fonts: Inter Tight (display), Inter (body), JetBrains Mono (code)
   Loaded AFTER FireEdge JSS bundle -> requires !important everywhere.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --qce-void: #0A0E14;
  --qce-navy: #121637;
  --qce-navy-2: #182045;
  --qce-primary: #3EA5DD;
  --qce-primary-bright: #4FB5ED;
  --qce-accent: #00E5FF;
  --qce-gold: #F5B93E;
  --qce-emerald: #2BBE8A;
  --qce-text: #E8ECF2;
  --qce-text-dim: #8A93A6;
  --qce-border: rgba(62, 165, 221, 0.15);
  --qce-border-bright: rgba(0, 229, 255, 0.35);
  --qce-glow-primary: rgba(62, 165, 221, 0.25);
  --qce-glow-accent: rgba(0, 229, 255, 0.20);
}

/* ---------- GLOBAL ---------- */
html, body, #root {
  background-color: var(--qce-void) !important;
  color: var(--qce-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
  background-image:
    radial-gradient(ellipse 800px 600px at 0% 0%, rgba(62,165,221,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 100%, rgba(0,229,255,0.08), transparent 60%) !important;
  background-attachment: fixed !important;
}

::selection {
  background: var(--qce-accent) !important;
  color: var(--qce-void) !important;
}

/* ---------- TYPOGRAPHY ---------- */
.MuiTypography-root,
.MuiFormLabel-root,
.MuiInputBase-root,
.MuiButton-root,
.MuiMenuItem-root,
.MuiListItemText-primary,
.MuiListItemText-secondary {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

.MuiTypography-h1,
.MuiTypography-h2,
.MuiTypography-h3,
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
  font-family: 'Inter Tight', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--qce-text) !important;
}

code, pre, .MuiTypography-mono {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ---------- APP BAR / TOP NAV ---------- */
.MuiAppBar-root {
  background-color: rgba(10, 14, 20, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--qce-border) !important;
  box-shadow: 0 1px 0 rgba(62,165,221,0.08) !important;
}

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

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

.MuiListItem-root { color: var(--qce-text) !important; }
.MuiListItem-root:hover { background-color: rgba(62,165,221,0.08) !important; }
.MuiListItem-root.Mui-selected {
  background-color: rgba(62,165,221,0.15) !important;
  border-left: 3px solid var(--qce-accent) !important;
}
.MuiListItemIcon-root { color: var(--qce-primary) !important; }

/* ---------- CARDS / PAPERS ---------- */
.MuiPaper-root {
  background-color: var(--qce-navy) !important;
  color: var(--qce-text) !important;
  border: 1px solid var(--qce-border) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}

.MuiCard-root {
  background-color: var(--qce-navy) !important;
  border: 1px solid var(--qce-border) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.MuiCard-root:hover {
  border-color: var(--qce-border-bright) !important;
  box-shadow: 0 8px 32px rgba(0,229,255,0.10) !important;
}

/* ---------- BUTTONS ---------- */
.MuiButton-root {
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.MuiButton-containedPrimary,
.MuiButton-contained.MuiButton-colorPrimary {
  background: linear-gradient(135deg, var(--qce-primary) 0%, var(--qce-accent) 100%) !important;
  color: var(--qce-void) !important;
  border: none !important;
  box-shadow: 0 4px 16px var(--qce-glow-primary) !important;
}
.MuiButton-containedPrimary:hover,
.MuiButton-contained.MuiButton-colorPrimary:hover {
  background: linear-gradient(135deg, var(--qce-primary-bright) 0%, var(--qce-accent) 100%) !important;
  box-shadow: 0 6px 24px var(--qce-glow-accent) !important;
  transform: translateY(-1px) !important;
}

.MuiButton-outlinedPrimary,
.MuiButton-outlined.MuiButton-colorPrimary {
  border-color: var(--qce-primary) !important;
  color: var(--qce-primary) !important;
}
.MuiButton-outlinedPrimary:hover {
  background-color: rgba(62,165,221,0.08) !important;
  border-color: var(--qce-accent) !important;
  color: var(--qce-accent) !important;
}

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

/* ---------- TEXT INPUTS ---------- */
.MuiOutlinedInput-root {
  background-color: rgba(10,14,20,0.6) !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(62,165,221,0.4) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--qce-accent) !important;
  border-width: 2px !important;
}
.MuiInputLabel-root { color: var(--qce-text-dim) !important; }
.MuiInputLabel-root.Mui-focused { color: var(--qce-accent) !important; }

/* ---------- LINKS ---------- */
a, .MuiLink-root {
  color: var(--qce-accent) !important;
  transition: color 0.2s ease !important;
}
a:hover, .MuiLink-root:hover {
  color: var(--qce-primary-bright) !important;
}

/* ---------- TABLES ---------- */
.MuiTableHead-root .MuiTableCell-root {
  background-color: rgba(18,22,55,0.8) !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(62,165,221,0.06) !important;
}
.MuiTableRow-root:hover { background-color: rgba(62,165,221,0.04) !important; }

/* ---------- CHIPS ---------- */
.MuiChip-root {
  background-color: rgba(62,165,221,0.12) !important;
  color: var(--qce-primary) !important;
  border: 1px solid var(--qce-border) !important;
}

/* ---------- DIALOGS ---------- */
.MuiDialog-paper {
  background-color: var(--qce-navy) !important;
  border: 1px solid var(--qce-border-bright) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}
.MuiDialogTitle-root { color: var(--qce-text) !important; }

/* ---------- SCROLLBARS ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--qce-void); }
::-webkit-scrollbar-thumb {
  background: rgba(62,165,221,0.3);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--qce-primary); }

/* ---------- LOGIN PAGE ENHANCEMENT ---------- */
/* FireEdge login: full-screen card. Enhance with QCE glow + branding. */
[class*="login" i],
[class*="Login"] {
  background-color: transparent !important;
}

/* Hide the OpenNebula/Sunstone logo image on login page (replaced by JS) */
img[alt*="Sunstone" i],
img[alt*="OpenNebula" i],
img[alt*="FireEdge" i] {
  display: none !important;
}

/* ---------- WATERMARK ---------- */
body::after {
  content: 'QCE GATEWAY CLOUD';
  position: fixed;
  bottom: 8px;
  right: 12px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: rgba(62,165,221,0.25);
  pointer-events: none;
  z-index: 9999;
  font-weight: 600;
}