/* ============================================================
   Quantum Matrix World — Galaxy Nebula Dashboard theme
   Central design tokens + global/base component overrides.
   Loads after main.css, MDB, and general.css — page/shortcode
   CSS files are converted individually to defer to these tokens
   rather than redefining their own palettes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Background ---------- */
  --gx-bg-gradient-top: #0b0e28;
  --gx-bg-gradient-bottom: #030616;

  /* ---------- Surfaces ---------- */
  /* Slightly darkened from the original rgba(255,255,255,0.05) frost —
     panels were reading as too see-through against the busy nebula bg. */
  --gx-surface-glass: rgba(5, 8, 22, 0.28);
  --gx-surface-glass-border: rgba(229, 243, 255, 0.07);
  --gx-surface-solid: #1f2538;
  --gx-surface-overlay-alt: rgba(23, 24, 30, 0.85);
  --gx-surface-chip: #283046;

  /* ---------- Brand pair ---------- */
  --gx-primary: #6a11cb;
  --gx-secondary: #2575fc;
  --gx-link: #a39beb;

  /* ---------- Semantic ---------- */
  --gx-success: #00c9a7;
  --gx-danger: #e63946;
  --gx-warning: #fca311;
  --gx-info: #00b4d8;
  --gx-dark: #59667e;

  --gx-valid-border: #6ce2c1;
  --gx-invalid-border: #f799a7;

  /* ---------- Text ---------- */
  /* Brightened from #aab8c5/#8391a2 — text was reading as faded/low-contrast
     against the dark surfaces, especially away from the corrective darkening
     applied to --gx-surface-glass above. */
  --gx-text-body: #c4cedb;
/*   --gx-text-nav: #ced6df; */
  --gx-text-nav: #CD9C20;
  --gx-text-muted: #96a3b4;
  --gx-text-code: #faaaca;

  /* ---------- Shadows ---------- */
  --gx-shadow-card: 2px 8px 16px 0 rgba(57, 62, 80, 0.07);
  --gx-shadow-overlay: 0 0 30px 0 rgba(0, 0, 0, 0.3);

  /* ---------- Subtle (15%) tints ---------- */
  --gx-primary-subtle: rgba(106, 17, 203, 0.15);
  --gx-secondary-subtle: rgba(37, 117, 252, 0.15);
  --gx-success-subtle: rgba(0, 201, 167, 0.15);
  --gx-danger-subtle: rgba(230, 57, 70, 0.15);
  --gx-warning-subtle: rgba(252, 163, 17, 0.15);
  --gx-info-subtle: rgba(0, 180, 216, 0.15);

  /* ---------- Bootstrap variable bridge ---------- */
  --bs-primary: var(--gx-primary);
  --bs-secondary: var(--gx-secondary);
  --bs-success: var(--gx-success);
  --bs-danger: var(--gx-danger);
  --bs-warning: var(--gx-warning);
  --bs-info: var(--gx-info);
  --bs-body-bg: transparent;
  --bs-body-color: var(--gx-text-body);
  --bs-border-color: var(--gx-surface-glass-border);
  --bs-link-color: var(--gx-link);
  --bs-link-hover-color: var(--gx-primary);
  --bs-emphasis-color: #fff;
}

/* ============================================================
   Background — fixed gradient over a generated nebula wash
   (no external photo asset; procedural blooms + starfield)
   ============================================================ */
/* This enqueue isn't gated to the front end, so it also leaks into
   wp-admin. Rather than fight that, declare the page as dark so
   browsers that auto force-dark undeclared "light" pages (Edge/Chrome's
   "Auto dark mode for web content", some dark-mode extensions) leave
   our colors alone instead of layering their own heuristic recoloring
   on top of it — that double-darkening is what produces dark text on
   a dark background in wp-admin (native postboxes, table headers)
   even though our own CSS never sets those pairs that way. */
html {
  background-color: var(--gx-bg-gradient-bottom);
  color-scheme: dark;
}

body,
#page {
  background-color: var(--gx-bg-gradient-bottom) !important;
  background-image:
    linear-gradient(180deg, #0d1526 0%, #0d1526e6 100%), radial-gradient(ellipse 900px 600px at 12% 8%, rgba(106, 17, 203, 0.32), transparent 60%), radial-gradient(ellipse 700px 550px at 88% 18%, rgba(37, 117, 252, 0.24), transparent 62%), radial-gradient(ellipse 800px 500px at 20% 95%, rgba(106, 17, 203, 0.16), transparent 65%), radial-gradient(ellipse 600px 450px at 90% 100%, rgba(0, 180, 216, 0.12), transparent 65%), repeating-radial-gradient(circle at 22% 35%, rgba(255, 255, 255, 0.9) 0px, transparent 1px 180px), repeating-radial-gradient(circle at 68% 62%, rgba(255, 255, 255, 0.7) 0px, transparent 1px 220px), repeating-radial-gradient(circle at 45% 12%, rgba(255, 255, 255, 0.6) 0px, transparent 1px 260px) !important;
  background-size: cover, cover, cover, cover, cover, 100% 100%, 100% 100%, 100% 100% !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed !important;
  background-repeat: no-repeat !important;
  color: var(--gx-text-body);
  font-family: 'Outfit', sans-serif;
}

/* ============================================================
   Typography
   ============================================================ */
body,
p,
.default-font {
  font-family: 'Outfit', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: 'Outfit', sans-serif;
  color: var(--gx-text-body);
}

h1,
.h1 {
  font-size: 80px;
  font-weight: 300;
}

h2,
.h2 {
  font-size: 28px;
  font-weight: 600;
}

h3,
.h3 {
  font-size: 24.5px;
  font-weight: 600;
}

h4,
.h4 {
  font-size: 18px;
  font-weight: 700;
}

h5,
.h5 {
  font-size: 14px;
  font-weight: 600;
}

h6,
.h6 {
  font-size: 15px;
  font-weight: 600;
}

p {
  color: var(--gx-text-muted);
}

code {
  color: var(--gx-text-code);
  font-family: 'Outfit', sans-serif;
}

a {
  color: var(--gx-link);
}

a:hover {
  color: var(--gx-primary);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
}

.btn-lg {
  border-radius: 6.4px;
}

.btn-sm {
  border-radius: 3px;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
  color: #fff;
  border-color: transparent;
}

.btn-primary {
  background-color: var(--gx-primary);
}

.btn-secondary {
  background-color: var(--gx-secondary);
}

.btn-success {
  background-color: var(--gx-success);
}

.btn-danger {
  background-color: var(--gx-danger);
}

.btn-warning {
  background-color: var(--gx-warning);
  color: #241300;
}

.btn-info {
  background-color: var(--gx-info);
}

.btn-outline-primary {
  color: var(--gx-primary);
  border-color: var(--gx-primary);
}

.btn-outline-secondary {
  color: var(--gx-secondary);
  border-color: var(--gx-secondary);
}

.btn-outline-success {
  color: var(--gx-success);
  border-color: var(--gx-success);
}

.btn-outline-danger {
  color: var(--gx-danger);
  border-color: var(--gx-danger);
}

.btn-outline-warning {
  color: var(--gx-warning);
  border-color: var(--gx-warning);
}

.btn-outline-info {
  color: var(--gx-info);
  border-color: var(--gx-info);
}

.btn-soft-primary {
  background-color: var(--gx-primary-subtle);
  color: var(--gx-primary);
  border: none;
}

.btn-soft-secondary {
  background-color: var(--gx-secondary-subtle);
  color: var(--gx-secondary);
  border: none;
}

.btn-soft-success {
  background-color: var(--gx-success-subtle);
  color: var(--gx-success);
  border: none;
}

.btn-soft-danger {
  background-color: var(--gx-danger-subtle);
  color: var(--gx-danger);
  border: none;
}

.btn-soft-warning {
  background-color: var(--gx-warning-subtle);
  color: var(--gx-warning);
  border: none;
}

.btn-soft-info {
  background-color: var(--gx-info-subtle);
  color: var(--gx-info);
  border: none;
}

/* Auth/CTA pill exception */
.btn-auth-cta,
.btn-pill {
  border-radius: 800px;
}

/* ============================================================
   Badges
   ============================================================ */
.badge {
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 0;
}

.badge.rounded-pill {
  border-radius: 999px;
}

.badge.text-bg-primary,
.badge-primary {
  background-color: var(--gx-primary-subtle) !important;
  color: var(--gx-primary) !important;
}

.badge.text-bg-secondary,
.badge-secondary {
  background-color: var(--gx-secondary-subtle) !important;
  color: var(--gx-secondary) !important;
}

.badge.text-bg-success,
.badge-success {
  background-color: var(--gx-success-subtle) !important;
  color: var(--gx-success) !important;
}

.badge.text-bg-danger,
.badge-danger {
  background-color: var(--gx-danger-subtle) !important;
  color: var(--gx-danger) !important;
}

.badge.text-bg-warning,
.badge-warning {
  background-color: var(--gx-warning-subtle) !important;
  color: var(--gx-warning) !important;
}

.badge.text-bg-info,
.badge-info {
  background-color: var(--gx-info-subtle) !important;
  color: var(--gx-info) !important;
}

/* ============================================================
   Alerts (darkened text on 15% tint, per skill exception)
   ============================================================ */
.alert {
  border-radius: 4.8px;
  padding: 12px 16px;
}

.alert-primary {
  background-color: var(--gx-primary-subtle) !important;
  border-color: rgba(106, 17, 203, 0.3) !important;
  color: #c9a6ff !important;
}

.alert-success {
  background-color: var(--gx-success-subtle) !important;
  border-color: rgba(0, 201, 167, 0.3) !important;
  color: #0e8a72 !important;
}

.alert-danger {
  background-color: var(--gx-danger-subtle) !important;
  border-color: rgba(230, 57, 70, 0.3) !important;
  color: #c23240 !important;
}

.alert-warning {
  background-color: var(--gx-warning-subtle) !important;
  border-color: rgba(252, 163, 17, 0.3) !important;
  color: #bd7a0d !important;
}

.alert-info {
  background-color: var(--gx-info-subtle) !important;
  border-color: rgba(0, 180, 216, 0.3) !important;
  color: #0d7fa0 !important;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  background-color: var(--gx-surface-glass);
  border: 1px dashed var(--gx-surface-glass-border);
  border-radius: 2px;
  box-shadow: var(--gx-shadow-card);
  color: var(--gx-text-body);
}

.card-header,
.card-footer {
  background-color: transparent;
  border-color: var(--gx-surface-chip);
}

.card-header {
  border-bottom-style: dashed;
  border-bottom-color: var(--gx-surface-glass-border);
}

.card-title {
  font-size: 18px;
  font-weight: 700;
}

.card-body {
  padding: 24px;
}

.card-header,
.card-footer {
  padding: 18px 24px;
}

/* ============================================================
   Accordion — solid panel surface
   ============================================================ */
.accordion-item {
  background-color: var(--gx-surface-solid);
  border: 1px solid var(--gx-surface-glass-border);
  color: var(--gx-text-body);
}

.accordion-button {
  background-color: var(--gx-surface-solid);
  color: var(--gx-text-body);
  font-weight: 600;
  padding: 16px 20px;
}

.accordion-button:not(.collapsed) {
  background-color: var(--gx-surface-solid);
  color: var(--gx-primary);
  box-shadow: none;
}

.accordion-body {
  padding: 16px 20px;
}

/* ============================================================
   Dropdown menu — solid panel
   ============================================================ */
.dropdown-menu {
  background-color: var(--gx-surface-solid);
  border: 1px solid var(--gx-surface-glass-border);
  border-radius: 2px;
  box-shadow: var(--gx-shadow-overlay);
  padding: 4px;
}

.dropdown-item {
  color: var(--gx-text-body);
  font-size: 14px;
  border-radius: 2px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--gx-surface-chip);
  color: #fff;
}

/* ============================================================
   Modal — solid panel, inverted light scrim
   ============================================================ */
.modal-content {
  background-color: var(--gx-surface-solid) !important;
  border: none;
  border-radius: 6.4px;
  color: var(--gx-text-body) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--gx-surface-glass-border) !important;
  padding: 24px;
}

.modal-footer {
  padding: 20px 24px;
}

.modal-backdrop.show {
  background-color: rgb(176, 187, 197);
  opacity: 0.7;
}

.offcanvas {
  background-color: var(--gx-surface-solid);
  border: none;
  color: var(--gx-text-body);
}

/* ============================================================
   Toasts
   ============================================================ */
.toast {
  background-color: var(--gx-surface-overlay-alt);
  border: 1px solid var(--gx-surface-glass-border);
  border-radius: 2px;
  box-shadow: var(--gx-shadow-overlay);
  color: var(--gx-text-body);
}

/* ============================================================
   Popover / Tooltip
   ============================================================ */
.popover {
  background-color: var(--gx-surface-solid);
  border: 1px solid var(--gx-surface-glass-border);
  border-radius: 6.4px;
}

.popover-body {
  color: var(--gx-text-body);
}

.popover-header {
  background-color: transparent;
  color: var(--gx-text-body);
  border-color: var(--gx-surface-glass-border);
}

.bs-popover-auto .popover-arrow::after,
.popover .popover-arrow::after {
  border-top-color: var(--gx-surface-solid);
}

/* Tooltips deliberately invert: light bg, near-black text */
.tooltip .tooltip-inner {
  background-color: var(--gx-text-body);
  color: #17181e;
  border-radius: 2px;
  font-size: 13px;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--gx-text-body);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--gx-text-body);
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--gx-text-body);
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--gx-text-body);
}

/* ============================================================
   Tabs
   ============================================================ */
.nav-tabs {
  border-bottom-color: var(--gx-surface-glass-border);
}

.nav-tabs .nav-link {
  color: var(--gx-text-muted);
  border: 1px solid transparent;
  border-radius: 2px 2px 0 0;
}

.nav-tabs .nav-link.active {
  background-color: var(--gx-surface-solid);
  color: var(--gx-primary);
  border-color: var(--gx-surface-glass-border) var(--gx-surface-glass-border) var(--gx-surface-solid);
}

.nav-pills .nav-link {
  color: var(--gx-text-muted);
  border-radius: 2px;
}

.nav-pills .nav-link.active {
  background-color: var(--gx-primary);
  color: #fff;
}

/* ============================================================
   Pagination — active page is cyan, not purple
   ============================================================ */
.pagination .page-link {
  background-color: var(--gx-surface-solid);
  border-color: var(--gx-surface-glass-border);
  color: var(--gx-text-body);
}

.pagination .page-item.active .page-link {
  background-color: var(--gx-info);
  border-color: var(--gx-info);
  color: #fff;
}

.pagination .page-item.disabled .page-link {
  background-color: var(--gx-surface-solid);
  color: var(--gx-text-muted);
  opacity: 1;
}

/* ============================================================
   Progress
   ============================================================ */
.progress {
  background-color: var(--gx-surface-glass);
  border-radius: 2px;
  height: 16px;
}

.progress-bar {
  background-color: var(--gx-primary);
}

/* ============================================================
   List group
   ============================================================ */
.list-group-item {
  background-color: transparent;
  border-color: var(--gx-surface-glass-border);
  border-radius: 2px;
  color: var(--gx-text-body);
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb-item a {
  color: #7d6aa8;
}

.breadcrumb-item.active {
  color: var(--gx-text-body);
}

/* ============================================================
   Tables
   ============================================================ */
/* bootscore-child/style.css ships bare `tr { background: #f9f9f9 }` and
   `th { background: #f4f4f4 }` rules that show through as a light-mode leak
   on every dark table sitewide (translucent header/row tints compositing
   over near-white). Beat them once here instead of patching every
   shortcode's table CSS individually.
   Scoped away from wp-admin: this stylesheet isn't gated to the front
   end and also loads there, and wp-admin/plugin widgets (e.g. Wordfence's
   dashboard tables) pair their own light `th`/`td` text with their own
   dark header background — stripping that background via `!important`
   left white-on-white text with no fix on our side to pair it with. */
body:not(.wp-admin) tr,
body:not(.wp-admin) th,
body:not(.wp-admin) td {
  background-color: transparent !important;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--gx-text-body);
  /* Bootstrap's default --bs-table-striped-color is a literal black, not
     tied to body-color — leaves striped rows unreadable on a dark table. */
  --bs-table-striped-color: var(--gx-text-body);
  --bs-table-border-color: var(--gx-surface-chip);
  color: var(--gx-text-body);
}

.table> :not(caption)>*>* {
  border-bottom-width: 1px;
  box-shadow: none;
}

.table thead th {
  font-size: 13px;
  font-weight: 700;
  color: var(--gx-text-body);
  border-bottom: 1px solid var(--gx-surface-chip);
}

.table td,
.table th {
  padding: 8px 8px 8px 18px;
  vertical-align: middle;
}

/* ============================================================
   Forms
   ============================================================ */
/* !important because some bundled plugin/page-builder Bootstrap copies enqueue
   after this stylesheet despite it being registered to load last — without it,
   .form-control silently falls back to Bootstrap's white-on-dark default on
   pages where that happens (seen on mob, recoverytracker, and others). */
.form-control,
.form-select {
  background-color: var(--gx-surface-glass) !important;
  border: 1px solid var(--gx-surface-glass-border);
  border-radius: 4px;
  color: var(--gx-text-body) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--gx-surface-glass) !important;
  border-color: var(--gx-primary);
  color: var(--gx-text-body) !important;
  box-shadow: 0 0 0 0.2rem var(--gx-primary-subtle);
}

/* The dropdown popup is native browser chrome, not layered over the card —
   var(--gx-surface-glass) is translucent and composites against the OS's own
   white popup surface there, washing out to pale gray. Options need a solid
   color instead (seen on DNB, Quantum Soccer, Quantum Nostradamus selects). */
.form-select option,
select.form-control option {
  background-color: var(--gx-surface-solid, #1f2538);
  color: var(--gx-text-body, #aab8c5);
}

.form-select option:checked,
.form-select option:hover,
select.form-control option:checked,
select.form-control option:hover {
  background-color: var(--gx-primary, #6a11cb);
  color: #fff;
}

.form-select option:disabled,
select.form-control option:disabled {
  color: var(--gx-text-muted, #96a3b4);
}

.form-control::placeholder {
  color: var(--gx-text-muted) !important;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: var(--gx-text-muted) !important;
}

/* Browser autofill forces its own background that background-color can't
   override — without this, autofilled fields render light text on white. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--gx-surface-solid, #1f2538) inset !important;
  -webkit-text-fill-color: var(--gx-text-body, #aab8c5) !important;
  caret-color: var(--gx-text-body, #aab8c5);
  transition: background-color 5000s ease-in-out 0s;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--gx-valid-border);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--gx-invalid-border);
}

.valid-feedback {
  color: var(--gx-valid-border);
  font-size: 11.9px;
}

.invalid-feedback {
  color: var(--gx-invalid-border);
  font-size: 11.9px;
}

.form-control.search-pill,
input[type="search"] {
  border-radius: 800px;
}

/* ============================================================
   Nav menu — bootscore's real markup is Bootstrap's .navbar/.nav-link,
   not the legacy BootstrapMade .navmenu rules earlier in general.css
   (those are unused dead CSS, left as-is / not a Galaxy target).
   ============================================================ */
:root {
  --accent-color: var(--gx-primary);
  --secondary-color: var(--gx-secondary);
  --heading-color: #ffffff;
  --default-color: var(--gx-text-body);
  --contrast-color: #ffffff;
  --surface-color: var(--gx-surface-glass);
  /* BootstrapMade's `section, .section` rule (general.css) reads this and
     defaults to #ffffff — never bridged before, so any real <section>
     element (e.g. poisson's result blocks) rendered an opaque white panel
     underneath the glass-tint children instead of the dark page bg. */
  --background-color: transparent;
}

body #nav-main.navbar.navbar {
  background: linear-gradient(150deg, #28205d, #041123) !important;
}

body #nav-main.navbar .navbar-nav .nav-link,
body #nav-main.navbar .nav-link,
body #nav-main .navbar-brand {
  color: var(--gx-text-nav) !important;
}

body #nav-main.navbar .navbar-nav .nav-link:hover,
body #nav-main.navbar .navbar-nav .nav-link:focus,
body #nav-main.navbar .navbar-nav .nav-link.active,
body #nav-main.navbar .navbar-nav .nav-link.show {
  /* color: #ffffff !important; */
  color: #CD9C20;
}

body #nav-main .dropdown-menu .dropdown-item {
  color: var(--gx-text-nav) !important;
}

body #nav-main .dropdown-menu .dropdown-item:hover,
body #nav-main .dropdown-menu .dropdown-item:focus {
  background-color: var(--gx-primary-subtle) !important;
  color: #ffffff !important;
}

/* ============================================================
   wp-admin leak — not gated to the front end (see functions.php),
   so this stylesheet's dark canvas also paints behind wp-admin.
   Left in on purpose. WP core's page title ("Dashboard", "Plugins", ...)
   sits directly on that canvas with no box behind it, and its own
   `.wrap h1` rule otherwise wins over our bare `h1` selector — fix it
   explicitly rather than touching wp-admin's own boxed widgets/tables,
   which already pair correctly against their own white backgrounds.
   ============================================================ */
body.wp-admin .wrap h1,
body.wp-admin .wrap h2:not(.hndle),
body.wp-admin .displaying-num {
  color: var(--gx-text-body) !important;
}

/* `.form-table` (Settings > General/Writing/Reading/etc., and most plugin
   options pages) has no box background of its own in WP core either —
   its field labels sat directly on our dark canvas, unreadable. Inputs
   keep their own explicit light-field color rule (higher specificity than
   this), so they're unaffected. */
body.wp-admin .form-table th,
body.wp-admin .form-table label {
  color: var(--gx-text-body) !important;
}

body.wp-admin .description {
  color: var(--gx-text-muted) !important;
}

/* The "Modern" Admin Color Scheme's blue active-row tint on list tables
   (e.g. Plugins) reads as too saturated now that the page around it is
   dark rather than plain white — soften it rather than disabling the
   scheme outright. */
body.wp-admin .wp-list-table .active td,
body.wp-admin .wp-list-table .active th {
  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.03) !important;
}