/* Native Veild Menu & Dashboard Luxury Theme Overrides */

/* Hide old green blurry glowing blobs */
.field, .field-a, .field-b, .field-c, .sheen {
  display: none !important;
}

/* Global variables override for dark luxury theme */
:root, .dark, .dark [data-theme="dashboard"], [data-theme="dashboard"] {
  --background: #070908 !important;
  --cream: transparent !important;
  --surface: 16 24 19 !important;
  --ink: 235 248 241 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif !important;
}

/* Force standard modern sans-serif instead of serif */
.font-serif, [data-theme="dashboard"] .font-serif, [data-theme="dashboard"] h1, [data-theme="dashboard"] h2, [data-theme="dashboard"] h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif !important;
}

/* Direct fixed background on body */
html {
  background-color: #060807 !important;
  color-scheme: dark;
}

body {
  background-color: #060807 !important;
  color: #ededed !important;
  background-image: 
    linear-gradient(180deg, rgba(8, 10, 9, 0.88) 0%, rgba(5, 7, 6, 0.94) 100%),
    url('/static/Backrourund.png') !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed, fixed !important;
  min-height: 100vh;
  position: relative;
}

/* Dynamic Interactive Mouse Aura / Spotlight */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(650px circle at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(0, 230, 118, 0.15) 0%, rgba(0, 230, 118, 0.03) 40%, transparent 75%);
  will-change: background;
}

/* Make layout wrappers transparent so the background shines through smoothly */
#root,
#root > div,
[data-theme="dashboard"],
.bg-cream,
.min-h-dvh.bg-cream,
.min-h-screen.bg-cream,
.h-dvh.bg-cream,
.h-dvh,
.min-h-dvh {
  background-color: transparent !important;
  background: transparent !important;
}

/* Luxury solid glassmorphism for all surface cards across Admin, Dashboard and Menu */
.bg-surface,
.dark .bg-surface {
  background-color: rgba(16, 23, 19, 0.9) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-color: rgba(235, 248, 241, 0.08) !important;
  box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
}

aside {
  background-color: rgba(11, 16, 13, 0.94) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border-right: 1px solid rgba(235, 248, 241, 0.08) !important;
}

header,
[data-theme="dashboard"] header {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Luxury Minimalist Scrollbars - Global & Unified */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 230, 118, 0.55);
}

::-webkit-scrollbar-thumb:active {
  background: #00e676;
}

::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

.thin-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.thin-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 230, 118, 0.55);
}

/* VS Code Styled Lua Code Editor */
.lua-editor-pre,
.lua-code-textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 13px !important;
  line-height: 22px !important;
  padding: 14px 16px !important;
  letter-spacing: 0px !important;
  tab-size: 2 !important;
  border: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  word-wrap: break-word !important;
}

.lua-code-textarea {
  caret-color: #00e676 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: transparent !important;
}

.lua-code-textarea::selection {
  background: rgba(0, 230, 118, 0.25) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Store & Products Glassmorphic Container Overrides */
.store-container,
[data-theme="store"],
#pricing {
  background-color: transparent !important;
  background: transparent !important;
}

.store-card,
.product-card {
  background-color: rgba(16, 23, 19, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(235, 248, 241, 0.08) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
}

.store-card:hover,
.product-card:hover {
  background-color: rgba(19, 31, 24, 0.94) !important;
  border-color: rgba(0, 230, 118, 0.35) !important;
  box-shadow: 0 20px 48px -6px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 230, 118, 0.12) !important;
}

/* User Profile Avatar - Bigger, Clean, No Border/Frame */
[data-slot="avatar"],
.group\/avatar {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

[data-slot="avatar"]::after,
.group\/avatar::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

[data-slot="avatar"] img,
[data-slot="avatar-image"] {
  border: none !important;
  outline: none !important;
  border-radius: 9999px !important;
  object-fit: cover !important;
}

/* Header User Avatar Trigger */
button[aria-label="Account menu"] {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
}

button[aria-label="Account menu"] [data-slot="avatar"] {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: none !important;
}

button[aria-label="Account menu"]:hover [data-slot="avatar"] {
  transform: scale(1.06);
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Remove any remaining theme toggle buttons or artifacts */
button[aria-label*="theme"],
button[aria-label*="Theme"],
button[aria-label*="Switch to"],
[data-slot="theme-toggle"] {
  display: none !important;
}

/* Global Dark Theme for HTML Select & Options to prevent native white popups */
select,
select option,
select optgroup {
  background-color: #0c140f !important;
  color: #ededed !important;
}

select option:hover,
select option:focus,
select option:checked {
  background-color: #00e676 !important;
  color: #000000 !important;
}

/* Custom Dropdown Animation & Solid Luxury Dark Background */
.custom-dropdown-menu {
  background-color: #0b1410 !important;
  background: #0b1410 !important;
  border: 1px solid rgba(0, 230, 118, 0.25) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 230, 118, 0.15) !important;
  z-index: 99999 !important;
  animation: fadeInMenu 0.15s ease-out forwards;
}

.custom-dropdown-menu input {
  background-color: #060a08 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.custom-dropdown-menu .dropdown-item {
  background-color: transparent;
  transition: all 0.15s ease;
}

.custom-dropdown-menu .dropdown-item:hover {
  background-color: rgba(0, 230, 118, 0.12) !important;
  color: #00e676 !important;
}

.target-resource-pill {
  background: rgba(16, 24, 19, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.target-resource-pill:hover,
.target-resource-pill.active {
  background: rgba(0, 230, 118, 0.15) !important;
  border-color: rgba(0, 230, 118, 0.4) !important;
  color: #00e676 !important;
}

@keyframes fadeInMenu {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* User Profile Avatar - Clean circular without any bounding box, ring or border */
button[aria-label="Account menu"],
button[aria-label="Account menu"]:focus,
button[aria-label="Account menu"]:active {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 9999px !important;
}

[data-slot="avatar"],
.group\/avatar {
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

[data-slot="avatar-image"],
[data-slot="avatar"] img {
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: none !important;
  object-fit: cover !important;
}