:root {
  color-scheme: dark;
  --gl-night: #08111f;
  --gl-surface: #101c2f;
  --gl-surface-raised: #17263d;
  --gl-border: #2a3b56;
  --gl-text: #eef4ff;
  --gl-muted: #aebbd0;
  --gl-blue: #62a5ff;
  --gl-blue-strong: #438ce8;
}

html,
body,
#root {
  background: var(--gl-night) !important;
  color: var(--gl-text) !important;
}

body {
  background-image:
    radial-gradient(circle at 18% 0%, rgba(67, 140, 232, 0.16), transparent 34rem),
    linear-gradient(180deg, #0b1525 0%, var(--gl-night) 32rem) !important;
  background-attachment: fixed !important;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
.text-dark,
.text-black,
.card-title,
.modal-title {
  color: var(--gl-text) !important;
}

.text-muted,
.text-secondary,
.form-text,
.breadcrumb-item,
.page-link:disabled {
  color: var(--gl-muted) !important;
}

a,
.text-link,
.text-brand,
.nav-link:hover,
.nav-link.active {
  color: var(--gl-blue) !important;
}

#navbar,
#navbar-menu,
.wide-white,
.bg-white {
  background: rgba(12, 24, 41, 0.96) !important;
  box-shadow: none !important;
}

#navbar {
  border-bottom: 1px solid rgba(98, 165, 255, 0.18);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22) !important;
}

/* Greenlight declares #navbar-menu a as black with !important. Keep the
   signed-in account controls readable without changing global link colors. */
#navbar #nav-user-dropdown,
#navbar #nav-user-dropdown span,
#navbar #chevron-profile,
#navbar-menu a,
#navbar-menu .nav-link {
  color: var(--gl-text) !important;
}

#navbar #nav-user-dropdown,
#navbar .navbar-toggler {
  background: transparent !important;
  border-color: transparent !important;
}

#navbar #nav-user-dropdown:hover,
#navbar #nav-user-dropdown:focus,
#navbar .show > #nav-user-dropdown,
#navbar-menu a:hover,
#navbar-menu a:focus,
#navbar-menu .nav-link:hover,
#navbar-menu .nav-link:focus {
  background: rgba(98, 165, 255, 0.12) !important;
  color: var(--gl-blue) !important;
}

#navbar #nav-user-dropdown:focus-visible,
#navbar-menu a:focus-visible {
  box-shadow: 0 0 0 3px rgba(98, 165, 255, 0.34) !important;
  outline: 0;
}

#navbar .dropdown-menu .dropdown-item,
#navbar .dropdown-menu a.dropdown-item {
  background: transparent !important;
  color: var(--gl-text) !important;
}

#navbar .dropdown-menu .dropdown-item:hover,
#navbar .dropdown-menu .dropdown-item:focus,
#navbar .dropdown-menu a.dropdown-item:hover,
#navbar .dropdown-menu a.dropdown-item:focus {
  background: rgba(98, 165, 255, 0.12) !important;
  color: var(--gl-blue) !important;
}

#navbar img[alt="CompanyLogo"] {
  background: transparent !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: 0;
}

.background-whitesmoke,
.bg-light {
  background: rgba(8, 17, 31, 0.72) !important;
  box-shadow: none !important;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.popover,
.toast,
.accordion-item,
.admin-table,
.tab-content {
  background: var(--gl-surface) !important;
  border-color: var(--gl-border) !important;
  color: var(--gl-text) !important;
}

.card {
  border: 1px solid rgba(98, 165, 255, 0.14) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.card:hover {
  border-color: rgba(98, 165, 255, 0.44) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34) !important;
  transform: translateY(-2px);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.dropdown-divider,
.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
hr {
  background: transparent !important;
  border-color: var(--gl-border) !important;
}

.homepage-card-icon-circle,
.room-icon,
.icon-circle {
  background: rgba(67, 140, 232, 0.2) !important;
  box-shadow: 0 0 0 8px rgba(98, 165, 255, 0.08) !important;
}

.form-control,
.form-select,
.input-group-text,
input,
textarea,
select {
  background-color: var(--gl-surface-raised) !important;
  border-color: var(--gl-border) !important;
  color: var(--gl-text) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: #8494ad !important;
  opacity: 1;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--gl-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(98, 165, 255, 0.2) !important;
}

.setting-select > button.dropdown-toggle {
  background: var(--gl-surface-raised) !important;
  border-color: var(--gl-border) !important;
  color: var(--gl-text) !important;
}

.setting-select > button.dropdown-toggle:hover,
.setting-select > button.dropdown-toggle:focus,
.setting-select > button.dropdown-toggle:active,
.setting-select.show > button.dropdown-toggle {
  background: #1c3150 !important;
  border-color: var(--gl-blue) !important;
  color: var(--gl-text) !important;
}

.setting-select > button.dropdown-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(98, 165, 255, 0.34) !important;
  outline: 0;
}

.setting-select .dropdown-menu .dropdown-item,
.setting-select .dropdown-menu a.dropdown-item {
  background: transparent !important;
  color: var(--gl-text) !important;
}

.setting-select .dropdown-menu .dropdown-item:hover,
.setting-select .dropdown-menu .dropdown-item:focus,
.setting-select .dropdown-menu .dropdown-item:active,
.setting-select .dropdown-menu a.dropdown-item:hover,
.setting-select .dropdown-menu a.dropdown-item:focus,
.setting-select .dropdown-menu a.dropdown-item:active {
  background: rgba(98, 165, 255, 0.12) !important;
  color: var(--gl-blue) !important;
}

.btn-brand,
.btn-primary {
  background: var(--gl-blue-strong) !important;
  border-color: var(--gl-blue-strong) !important;
  color: #fff !important;
}

.btn-brand:hover,
.btn-primary:hover {
  background: var(--gl-blue) !important;
  border-color: var(--gl-blue) !important;
}

.btn-brand-outline,
.btn-brand-outline-color,
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--gl-blue) !important;
  color: var(--gl-blue) !important;
}

.btn-brand-outline:hover,
.btn-brand-outline-color:hover,
.btn-outline-primary:hover {
  background: rgba(98, 165, 255, 0.12) !important;
  color: #fff !important;
}

.nav-tabs {
  border-color: var(--gl-border) !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link,
.dropdown-item,
.page-link {
  background: transparent !important;
  color: var(--gl-muted) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.dropdown-item:hover,
.dropdown-item:focus,
.page-link:hover {
  background: rgba(98, 165, 255, 0.12) !important;
  color: var(--gl-blue) !important;
}

/* Greenlight globally forces .dropdown a to black. This higher-specificity
   shared rule covers table actions and any other Bootstrap dropdown menus. */
.dropdown .dropdown-menu .dropdown-item,
.dropdown .dropdown-menu a.dropdown-item {
  background: transparent !important;
  color: var(--gl-text) !important;
}

.dropdown .dropdown-menu .dropdown-item svg,
.dropdown .dropdown-menu a.dropdown-item svg {
  color: currentColor !important;
}

.dropdown .dropdown-menu .dropdown-item:hover,
.dropdown .dropdown-menu .dropdown-item:focus,
.dropdown .dropdown-menu .dropdown-item:active,
.dropdown .dropdown-menu a.dropdown-item:hover,
.dropdown .dropdown-menu a.dropdown-item:focus,
.dropdown .dropdown-menu a.dropdown-item:active {
  background: rgba(98, 165, 255, 0.12) !important;
  color: var(--gl-blue) !important;
}

.dropdown .dropdown-menu .dropdown-item:disabled,
.dropdown .dropdown-menu .dropdown-item.disabled {
  color: #71819a !important;
  opacity: 0.72;
}

.table,
.table > :not(caption) > * > * {
  background: transparent !important;
  border-color: var(--gl-border) !important;
  color: var(--gl-text) !important;
}

.table-hover > tbody > tr:hover > * {
  background: rgba(98, 165, 255, 0.08) !important;
}

#footer #footer-container {
  border-color: var(--gl-border) !important;
}

@media (max-width: 767.98px) {
  #navbar-menu {
    border: 1px solid var(--gl-border);
    border-radius: 0 0 12px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }

  .card:hover {
    transform: none;
  }
}