/**
 * 12andus Cosmic Theme
 * This file loads last and applies the cosmic redesign
 * Phase 1 & 2: Design System + Typography
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design System)
   ============================================ */

:root {
    /* Color Palette - Deep Space */
    --color-void: #0a0a12;
    --color-cosmos: #0d1321;
    --color-nebula: #151b2d;
    --color-twilight: #1d2541;

    /* Celestial Accents */
    --color-stardust: #c9b8ff;
    --color-moonbeam: #e8e4f0;
    --color-aurora-teal: #00d4aa;
    --color-aurora-pink: #ff6b9d;
    --color-solar-gold: #ffd700;
    --color-solar-amber: #ffb347;

    /* Functional */
    --color-supernova: #ff4757;
    --color-text-primary: #e8e4f0;
    --color-text-secondary: #9ca3b0;
    --color-text-muted: #6b7280;
    --color-link: #c9b8ff;
    --color-link-hover: #00d4aa;

    /* Surfaces */
    --color-surface-dark: rgba(13, 19, 33, 0.95);
    --color-surface-card: rgba(29, 37, 65, 0.85);
    --color-glass: rgba(200, 200, 220, 0.08);
    --color-glass-border: rgba(200, 200, 220, 0.15);

    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Sans Pro', system-ui, sans-serif;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Transitions */
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;

    /* Borders */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
}

/* ============================================
   BASE STYLES
   ============================================ */

body {
    background-color: var(--color-cosmos) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    color: var(--color-moonbeam) !important;
    font-weight: 400 !important;
}

h1 {
    text-shadow: 0 0 40px rgba(201, 184, 255, 0.2);
}

a {
    color: var(--color-link) !important;
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

a:hover, a:focus {
    color: var(--color-link-hover) !important;
    text-shadow: 0 0 10px rgba(0, 212, 170, 0.3);
    text-decoration: none !important;
}

/* Preserve button text colors on hover - exclude from link hover rule */
/* Use very high specificity to override general a:hover */
html body a.btn:hover, html body a.btn:focus,
html body a[class*="btn-"]:hover, html body a[class*="btn-"]:focus,
body a.btn:hover, body a.btn:focus,
body a[class*="btn-"]:hover, body a[class*="btn-"]:focus {
    text-shadow: none !important;
}

html body a.btn-lead:hover, html body a.btn-lead:focus,
html body a.btn-info:hover, html body a.btn-info:focus,
body a.btn-lead:hover, body a.btn-lead:focus,
body a.btn-info:hover, body a.btn-info:focus,
a.btn-lead:hover, a.btn-lead:focus,
a.btn-info:hover, a.btn-info:focus {
    color: #fff !important;
    background-color: #217dbb !important;
}

html body a.btn-primary:hover, html body a.btn-primary:focus,
html body a.btn-success:hover, html body a.btn-success:focus,
body a.btn-primary:hover, body a.btn-primary:focus,
body a.btn-success:hover, body a.btn-success:focus,
a.btn-primary:hover, a.btn-primary:focus,
a.btn-success:hover, a.btn-success:focus {
    color: #0a0a12 !important;
}

p {
    color: var(--color-text-primary);
}

/* Subtext and muted */
.elgg-subtext,
.text-muted {
    color: var(--color-text-muted) !important;
}

/* ============================================
   NAVIGATION
   ============================================ */

.navbar,
.navbar-default,
.navbar-fixed-top,
nav#mainMenu {
    background-color: rgba(10, 10, 18, 0.95) !important;
    border-bottom: 1px solid var(--color-glass-border) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.navbar-default .navbar-nav > li > a,
.navbar-nav > li > a,
nav#mainMenu a {
    color: var(--color-text-secondary) !important;
    transition: color var(--transition-fast);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-nav > li > a:hover,
nav#mainMenu a:hover {
    color: var(--color-moonbeam) !important;
}

.navbar-brand,
.navbar-default .navbar-brand {
    color: var(--color-moonbeam) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--color-twilight) !important;
    border: 1px solid var(--color-glass-border) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dropdown-menu > li > a {
    color: var(--color-text-secondary) !important;
}

.dropdown-menu > li > a:hover {
    background-color: rgba(0, 212, 170, 0.1) !important;
    color: var(--color-aurora-teal) !important;
}

/* Compact navbar icons to prevent wrapping */
.nav-message-extra {
    padding: 9px 4px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

.elgg-page-body,
.elgg-inner,
.elgg-main,
#mainContent,
.container,
.container-fluid {
    background-color: transparent !important;
}

/* ============================================
   CARDS & PANELS
   ============================================ */

.panel,
.panel-default,
.elgg-module,
.well,
.thumbnail,
.info-thumbnail {
    background-color: var(--color-surface-card) !important;
    border: 1px solid var(--color-glass-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-primary) !important;
}

/* Premium/featured card styling */
.panel-premium,
.card-premium,
.featured-card,
.elgg-module-featured {
    border: 1px solid transparent !important;
    background: linear-gradient(var(--color-surface-card), var(--color-surface-card)) padding-box,
                linear-gradient(135deg, var(--color-solar-gold), var(--color-aurora-teal)) border-box !important;
}

/* Report cards - special styling */
.report-bigbuttons .info-thumbnail-link {
    background-color: var(--color-surface-card) !important;
    border: 1px solid var(--color-glass-border) !important;
    border-radius: var(--radius-md) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.report-bigbuttons .info-thumbnail-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 212, 170, 0.2);
    border-color: var(--color-aurora-teal) !important;
}

.panel-heading,
.panel-default > .panel-heading,
.elgg-module > .elgg-head {
    background-color: rgba(201, 184, 255, 0.1) !important;
    border-bottom: 1px solid var(--color-glass-border) !important;
    color: var(--color-moonbeam) !important;
}

.panel-body,
.elgg-module > .elgg-body {
    background-color: transparent !important;
}

.panel-title,
.elgg-module > .elgg-head h3 {
    color: var(--color-moonbeam) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-primary,
.elgg-button-submit,
input[type="submit"],
button[type="submit"] {
    background: linear-gradient(135deg, var(--color-aurora-teal), #00a896) !important;
    border: none !important;
    color: var(--color-void) !important;
    box-shadow: 0 4px 15px rgba(0, 212, 170, 0.3);
    transition: all var(--transition-base);
}

.btn-primary:hover,
.elgg-button-submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
a.btn-primary:hover,
a.btn-success:hover {
    background: linear-gradient(135deg, #00e6c3, var(--color-aurora-teal)) !important;
    box-shadow: 0 0 25px rgba(0, 212, 170, 0.5);
    transform: translateY(-2px);
    color: #0a0a12 !important;
}

.btn-default,
.btn-secondary,
.elgg-button-action {
    background-color: transparent !important;
    border: 2px solid var(--color-stardust) !important;
    color: var(--color-stardust) !important;
}

.btn-default:hover,
.btn-secondary:hover,
.elgg-button-action:hover {
    background-color: rgba(201, 184, 255, 0.1) !important;
    color: var(--color-moonbeam) !important;
}

.btn-danger,
.elgg-button-delete {
    background: linear-gradient(135deg, var(--color-supernova), #cc3a47) !important;
    border: none !important;
    color: white !important;
}

/* ============================================
   FORMS
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select,
.form-control {
    background-color: var(--color-surface-dark) !important;
    border: 2px solid var(--color-glass-border) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-base);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--color-aurora-teal) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.15) !important;
    background-color: var(--color-surface-card) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted) !important;
}

label {
    color: var(--color-text-secondary) !important;
}

/* Input group addon - icons next to form fields */
.input-group-addon {
    background-color: var(--color-nebula) !important;
    border: 2px solid var(--color-glass-border) !important;
    color: var(--color-stardust) !important;
}

.input-group-addon .fa,
.input-group-addon i {
    color: var(--color-stardust) !important;
}

/* Fix logo overlap on login/register pages */
body.login > section,
body.register > section {
    padding-top: 100px !important;
}

/* ============================================
   FOOTER
   ============================================ */

footer,
.site-footer,
.elgg-page-footer {
    background-color: var(--color-void) !important;
    border-top: 1px solid var(--color-glass-border) !important;
    color: var(--color-text-muted) !important;
}

footer a,
.site-footer a,
.elgg-page-footer a {
    color: var(--color-text-secondary) !important;
}

footer a:hover,
.site-footer a:hover,
.elgg-page-footer a:hover {
    color: var(--color-stardust) !important;
}

/* ============================================
   SIDEBAR
   ============================================ */

.elgg-sidebar,
#sidebar {
    background-color: var(--color-surface-dark) !important;
    border: 1px solid var(--color-glass-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) !important;
}

/* ============================================
   TABLES
   ============================================ */

.table,
table {
    color: var(--color-text-primary) !important;
}

.table > thead > tr > th,
.table > tbody > tr > td {
    border-color: var(--color-glass-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(200, 200, 220, 0.05) !important;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(0, 212, 170, 0.05) !important;
}

/* ============================================
   ALERTS & MESSAGES
   ============================================ */

.alert-success,
.elgg-message.elgg-state-success {
    background-color: rgba(0, 212, 170, 0.15) !important;
    border-color: var(--color-aurora-teal) !important;
    color: var(--color-aurora-teal) !important;
}

.alert-danger,
.elgg-message.elgg-state-error {
    background-color: rgba(255, 71, 87, 0.15) !important;
    border-color: var(--color-supernova) !important;
    color: var(--color-supernova) !important;
}

.alert-info,
.elgg-message.elgg-state-notice {
    background-color: rgba(201, 184, 255, 0.15) !important;
    border-color: var(--color-stardust) !important;
    color: var(--color-stardust) !important;
}

.alert-warning {
    background-color: rgba(255, 179, 71, 0.15) !important;
    border-color: var(--color-solar-amber) !important;
    color: var(--color-solar-amber) !important;
}

/* ============================================
   LISTS
   ============================================ */

.list-group-item {
    background-color: var(--color-surface-card) !important;
    border-color: var(--color-glass-border) !important;
    color: var(--color-text-primary) !important;
}

.list-group-item:hover {
    background-color: rgba(201, 184, 255, 0.05) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination > li > a,
.pagination > li > span,
.elgg-pagination a {
    background-color: var(--color-surface-dark) !important;
    border-color: var(--color-glass-border) !important;
    color: var(--color-text-secondary) !important;
}

.pagination > li > a:hover,
.elgg-pagination a:hover {
    background-color: var(--color-surface-card) !important;
    border-color: var(--color-stardust) !important;
    color: var(--color-stardust) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.elgg-pagination .elgg-state-selected span {
    background-color: var(--color-stardust) !important;
    border-color: var(--color-stardust) !important;
    color: var(--color-void) !important;
}

/* ============================================
   TABS
   ============================================ */

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

.nav-tabs > li > a {
    color: var(--color-text-secondary) !important;
    border-color: transparent !important;
}

.nav-tabs > li > a:hover {
    border-color: var(--color-glass-border) !important;
    background-color: var(--color-glass) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--color-surface-card) !important;
    border-color: var(--color-stardust) !important;
    border-bottom-color: var(--color-surface-card) !important;
    color: var(--color-stardust) !important;
}

/* ============================================
   BLOCKQUOTES
   ============================================ */

blockquote {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-stardust) !important;
    border-left: 3px solid var(--color-aurora-teal) !important;
    background-color: var(--color-glass) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ============================================
   CODE
   ============================================ */

code {
    background-color: var(--color-surface-dark) !important;
    color: var(--color-aurora-teal) !important;
    border-radius: var(--radius-sm);
}

pre {
    background-color: var(--color-surface-dark) !important;
    border: 1px solid var(--color-glass-border) !important;
    color: var(--color-text-primary) !important;
}

/* ============================================
   TEXT CONTRAST FIXES
   ============================================ */

/* GLOBAL TEXT COLOR OVERRIDE - catch everything */
html body,
html body *:not(a):not(.btn):not([class*="btn-"]):not(input):not(button):not(select):not(textarea):not(code):not(.fa):not([class*="fa-"]):not([class*="icon"]):not(.glyphicon) {
    color: var(--color-text-primary);
}

/* Ensure all text is readable on dark background */
body,
div,
span,
p,
li,
td,
th,
label,
.caption,
.description,
.help-block,
.text-muted,
.elgg-subtext,
.elgg-quiet,
.elgg-output,
.elgg-body,
.panel-body,
.info-thumbnail .caption,
.info-thumbnail .description,
article,
section,
main,
.birthdata-details,
.birthdata-details *,
.elgg-list,
.elgg-list *,
.elgg-item,
.elgg-item *,
.elgg-content,
.elgg-content *,
#birthdata,
#birthdata *,
.birthdata,
.birthdata * {
    color: var(--color-text-primary) !important;
}

/* Secondary/muted text - still readable but dimmer */
.text-muted,
.help-block,
.elgg-subtext,
.elgg-quiet,
small,
.small,
figcaption,
.caption small {
    color: var(--color-text-secondary) !important;
}

/* Ensure paragraphs in cards are readable */
.panel p,
.panel span,
.panel div,
.elgg-module p,
.elgg-module span,
.well p,
.well span,
.thumbnail p,
.thumbnail span,
.info-thumbnail p,
.info-thumbnail span,
.info-thumbnail .caption,
.info-thumbnail .description {
    color: var(--color-text-primary) !important;
}

/* Links should stand out */
.panel a,
.elgg-module a,
.well a,
.thumbnail a,
.info-thumbnail a {
    color: var(--color-link) !important;
}

.panel a:hover,
.elgg-module a:hover,
.well a:hover,
.thumbnail a:hover,
.info-thumbnail a:hover {
    color: var(--color-link-hover) !important;
}

/* Fix any inherited gray/dark text */
.text-dark,
.text-body,
.text-black,
.text-secondary,
.text-info {
    color: var(--color-text-primary) !important;
}

/* Fix Bootstrap default text colors that are unreadable on dark */
.text-default,
body .text-muted {
    color: var(--color-text-secondary) !important;
}

/* Ensure content inside containers is readable */
.container,
.container-fluid,
.row,
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    color: var(--color-text-primary);
}

/* Headings in panels/cards */
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6,
.elgg-module h1, .elgg-module h2, .elgg-module h3, .elgg-module h4, .elgg-module h5, .elgg-module h6,
.well h1, .well h2, .well h3, .well h4, .well h5, .well h6,
.info-thumbnail h1, .info-thumbnail h2, .info-thumbnail h3, .info-thumbnail h4, .info-thumbnail h5, .info-thumbnail h6 {
    color: var(--color-moonbeam) !important;
}

/* ============================================
   REPORT PAGES SPECIFIC FIXES
   ============================================ */

/* Report page containers */
.report-bigbuttons,
.report-bigbuttons *,
.report-bigbuttons p,
.report-bigbuttons span,
.report-bigbuttons div,
.report-bigbuttons li,
.report-bigbuttons td,
.report-bigbuttons th,
#report-toc,
#report-toc *,
.toc-grid,
.toc-grid *,
.toc-item,
.toc-item *,
.astro-controls,
.astro-controls *,
.title-container,
.title-container * {
    color: var(--color-text-primary) !important;
}

/* Report detail/info text */
body.report,
body.report *,
.report-bar,
.report-bar *,
.report-bar label,
.report-bar td,
.report-content,
.report-content *,
.report-section,
.report-section *,
.report-text,
.report-text * {
    color: var(--color-text-primary) !important;
}

/* Well containers on report pages */
.well,
.well *,
.well p,
.well span,
.well div {
    color: var(--color-text-primary) !important;
    background-color: var(--color-surface-card) !important;
}

/* Info thumbnails and cards */
.info-thumbnail,
.info-thumbnail *,
.info-thumbnail .caption,
.info-thumbnail .caption *,
.info-thumbnail p,
.info-thumbnail span,
.info-thumbnail .description,
.info-thumbnail h3,
.info-thumbnail h4 {
    color: var(--color-text-primary) !important;
}

.info-thumbnail h3,
.info-thumbnail h4,
.info-thumbnail .caption h3,
.info-thumbnail .caption h4 {
    color: var(--color-moonbeam) !important;
}

/* Alert boxes */
.alert,
.alert * {
    color: inherit !important;
}

.alert-info {
    background-color: rgba(201, 184, 255, 0.15) !important;
    border-color: var(--color-stardust) !important;
    color: var(--color-text-primary) !important;
}

.alert-info *,
.alert-info a,
.alert-info .alert-link {
    color: var(--color-stardust) !important;
}

/* ============================================
   BIRTHDATA PAGE SPECIFIC FIXES
   ============================================ */

/* Birthdata page elements */
.birthdata-details,
.birthdata-details *,
.birthdata-details .text,
.birthdata-details span,
.birthdata-incomplete,
.control.birthdata,
.control.birthdata *,
.control.birthdata label,
.control.birthdata span,
.run-reports,
.run-reports *,
.elgg-list-entity,
.elgg-list-entity *,
.elgg-item-object-birthdata,
.elgg-item-object-birthdata *,
body.birthdata,
body.birthdata *,
.birthdata-mine,
.birthdata-mine * {
    color: var(--color-text-primary) !important;
}

/* Form labels on birthdata page */
.control.birthdata label,
.birthdata label,
form label {
    color: var(--color-text-secondary) !important;
}

/* Any inline styles with dark colors - override with higher specificity */
[style*="color: #333"],
[style*="color: #444"],
[style*="color: #555"],
[style*="color: #666"],
[style*="color: black"],
[style*="color:#333"],
[style*="color:#444"],
[style*="color:#555"],
[style*="color:#666"] {
    color: var(--color-text-primary) !important;
}

/* Override quality containers that have hardcoded black text */
.quality-name,
.quality-value,
.innate-name,
.innate-value,
.quality_container,
.quality_container *,
.innate_container,
.innate_container * {
    color: var(--color-text-primary) !important;
    background-color: var(--color-surface-card) !important;
}

/* Force all text elements that might have dark colors */
body .elgg-body,
body .elgg-content,
body .elgg-output,
body .elgg-list,
body .elgg-item,
body .panel-body,
body .modal-body,
body .caption,
body .description,
body article,
body section,
body aside,
body main,
body header,
body footer nav,
body .content,
body .page-content,
body .main-content,
body #content,
body #main,
body #mainContent {
    color: var(--color-text-primary) !important;
}

/* Nuclear option: override ALL elements that don't have explicit light colors */
body:not(.elgg-admin) *:not(a):not(.btn):not(button):not(input):not(select):not(textarea):not([class*="fa"]):not([class*="icon"]):not(.glyphicon):not(code):not(pre):not(.badge):not(.label) {
    color: inherit;
}

body:not(.elgg-admin) {
    color: var(--color-text-primary) !important;
}

/* ============================================
   SELECTION
   ============================================ */

::selection {
    background: rgba(201, 184, 255, 0.3);
    color: var(--color-moonbeam);
}

::-moz-selection {
    background: rgba(201, 184, 255, 0.3);
    color: var(--color-moonbeam);
}

/* ============================================
   SCROLLBAR (Webkit)
   ============================================ */

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: #1a1f2e;
}

::-webkit-scrollbar-thumb {
    background: #7a8299;
    border-radius: 7px;
    border: 3px solid #1a1f2e;
}

::-webkit-scrollbar-thumb:hover {
    background: #9aa3b8;
}

::-webkit-scrollbar-thumb:active {
    background: #c9b8ff;
}

::-webkit-scrollbar-corner {
    background: #1a1f2e;
}

/* Firefox scrollbar */
* {
    scrollbar-width: auto;
    scrollbar-color: #7a8299 #1a1f2e;
}

/* ============================================
   FINAL OVERRIDE - HIGHEST SPECIFICITY
   ============================================ */

/* This catches any remaining dark text that slipped through */
html body.loggedin,
html body.loggedout,
html body.birthdata,
html body.activity,
html body.members,
html body.messages,
html body.report,
html body.profile,
html body.settings,
html body.friends,
html body.blog,
html body.questions {
    color: #e8e4f0 !important;
}

html body.loggedin *,
html body.loggedout *,
html body.birthdata *,
html body.activity *,
html body.members *,
html body.messages *,
html body.report *,
html body.profile *,
html body.settings *,
html body.friends *,
html body.blog *,
html body.questions * {
    color: inherit;
}

/* Re-apply specific colors after inheritance */
html body a {
    color: #c9b8ff !important;
}

html body a:hover {
    color: #00d4aa !important;
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
    color: #e8e4f0 !important;
}

html body .btn-primary,
html body .elgg-button-submit,
html body input[type="submit"],
html body button[type="submit"] {
    color: #0a0a12 !important;
}

html body .text-muted,
html body .elgg-subtext,
html body .help-block,
html body small.text-muted {
    color: #9ca3b0 !important;
}

/* ============================================
   ULTRA AGGRESSIVE TEXT FIX
   ============================================ */

/* Override neat-blue.css color classes - CRITICAL */
html body .color-black,
html body .color-black *,
html body .color-black p,
html body .color-black span,
html body .color-black div,
html body .color-black li,
html body .color-black td,
html body .color-black th,
html body .color-black label,
html body .color-black .caption,
html body .color-black .description,
body .color-black,
body .color-black *,
.color-black,
.color-black * {
    color: #e8e4f0 !important;
}

.color-black a,
body .color-black a,
html body .color-black a {
    color: #c9b8ff !important;
}

.color-black a:hover,
body .color-black a:hover,
html body .color-black a:hover {
    color: #00d4aa !important;
}

/* Override background-clouds to use dark background */
html body .background-clouds,
body .background-clouds,
.background-clouds {
    background-color: rgba(29, 37, 65, 0.95) !important;
    color: #e8e4f0 !important;
}

.background-clouds *,
body .background-clouds *,
html body .background-clouds * {
    color: #e8e4f0 !important;
}

/* Specific override for info-thumbnail with background-clouds color-black combo */
html body .info-thumbnail.background-clouds.color-black,
html body .info-thumbnail.background-clouds.color-black *,
html body .info-thumbnail.background-clouds.color-black p,
html body .info-thumbnail.background-clouds.color-black span,
html body .info-thumbnail.background-clouds.color-black .caption,
html body .info-thumbnail.background-clouds.color-black .description,
html body .thumbnail.info-thumbnail.background-clouds.color-black,
html body .thumbnail.info-thumbnail.background-clouds.color-black * {
    color: #e8e4f0 !important;
    background-color: rgba(29, 37, 65, 0.95) !important;
}

/* Keep the h3 headers inside info-thumbnails with their styled backgrounds */
html body .info-thumbnail h3[style*="background"],
html body .thumbnail h3[style*="background"] {
    color: white !important;
}

/* Target EVERYTHING and force light text */
html body .container *,
html body .container-fluid *,
html body .row *,
html body .col-xs-1 *, html body .col-xs-2 *, html body .col-xs-3 *, html body .col-xs-4 *,
html body .col-xs-5 *, html body .col-xs-6 *, html body .col-xs-7 *, html body .col-xs-8 *,
html body .col-xs-9 *, html body .col-xs-10 *, html body .col-xs-11 *, html body .col-xs-12 *,
html body .col-sm-1 *, html body .col-sm-2 *, html body .col-sm-3 *, html body .col-sm-4 *,
html body .col-sm-5 *, html body .col-sm-6 *, html body .col-sm-7 *, html body .col-sm-8 *,
html body .col-sm-9 *, html body .col-sm-10 *, html body .col-sm-11 *, html body .col-sm-12 *,
html body .col-md-1 *, html body .col-md-2 *, html body .col-md-3 *, html body .col-md-4 *,
html body .col-md-5 *, html body .col-md-6 *, html body .col-md-7 *, html body .col-md-8 *,
html body .col-md-9 *, html body .col-md-10 *, html body .col-md-11 *, html body .col-md-12 *,
html body .col-lg-1 *, html body .col-lg-2 *, html body .col-lg-3 *, html body .col-lg-4 *,
html body .col-lg-5 *, html body .col-lg-6 *, html body .col-lg-7 *, html body .col-lg-8 *,
html body .col-lg-9 *, html body .col-lg-10 *, html body .col-lg-11 *, html body .col-lg-12 * {
    color: #e8e4f0;
}

/* But keep links styled */
html body .container a,
html body .container-fluid a,
html body .row a,
html body [class*="col-"] a {
    color: #c9b8ff !important;
}

html body .container a:hover,
html body .container-fluid a:hover,
html body .row a:hover,
html body [class*="col-"] a:hover {
    color: #00d4aa !important;
}

/* Keep buttons properly colored */
html body .btn-primary,
html body .btn-success,
html body [class*="col-"] .btn-primary,
html body [class*="col-"] .btn-success {
    color: #0a0a12 !important;
}

html body .btn-danger,
html body [class*="col-"] .btn-danger {
    color: #fff !important;
}

/* Keep icons their proper colors */
html body .fa,
html body [class*="fa-"],
html body .glyphicon,
html body [class*="icon-"] {
    color: inherit;
}

/* ============================================
   BLOG PAGES
   ============================================ */

/* Blog titles and content */
html body .blog,
html body .blog *,
html body .blog-post,
html body .blog-post *,
html body .blog-excerpt,
html body .blog-excerpt *,
html body .elgg-river-item,
html body .elgg-river-item *,
html body article.blog,
html body article.blog *,
html body .blog-title,
html body .blog-title a,
html body .elgg-list-item h3,
html body .elgg-list-item h3 a,
html body .elgg-item h3,
html body .elgg-item h3 a {
    color: #e8e4f0 !important;
}

html body .blog a,
html body .blog-post a,
html body .blog-title a,
html body .elgg-list-item h3 a,
html body .elgg-item h3 a {
    color: #c9b8ff !important;
}

html body .blog a:hover,
html body .blog-post a:hover,
html body .blog-title a:hover,
html body .elgg-list-item h3 a:hover,
html body .elgg-item h3 a:hover {
    color: #00d4aa !important;
}

/* ============================================
   TOC ITEMS ON REPORT PAGE
   ============================================ */

#report-toc,
html body #report-toc {
    background: transparent !important;
}

#report-toc .toc-grid {
    gap: 10px !important;
}

#report-toc .toc-item,
#report-toc .toc-item span,
html body #report-toc .toc-item,
html body #report-toc .toc-item span {
    color: #e8e4f0 !important;
    background: rgba(29, 37, 65, 0.85) !important;
    border: 1px solid rgba(200, 200, 220, 0.15) !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
}

#report-toc .toc-item:hover,
html body #report-toc .toc-item:hover {
    background: rgba(201, 184, 255, 0.15) !important;
    border-color: rgba(201, 184, 255, 0.3) !important;
    color: #c9b8ff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 184, 255, 0.2);
}

#report-toc .toc-item:hover span,
html body #report-toc .toc-item:hover span {
    color: #c9b8ff !important;
}

/* ============================================
   PAGE HEADER/INTRO TEXT
   ============================================ */

/* Page title area */
.elgg-page-header,
.elgg-page-header *,
.page-header,
.page-header *,
.elgg-heading-main,
.elgg-main > h1,
.elgg-main > h2,
.elgg-layout-one-sidebar .elgg-main > h1,
.elgg-layout-one-sidebar .elgg-main > h2 {
    color: #e8e4f0 !important;
}

/* The intro text "Readings are available in..." */
html body .elgg-main > p,
html body .elgg-main > div > p,
html body .elgg-body > p,
html body .elgg-content > p,
html body .container > p,
html body .report-bigbuttons + p,
html body .container.col-md-12 > p,
html body p[style*="margin"],
body > .elgg-page-body .elgg-inner > .elgg-main > p:first-of-type {
    color: #e8e4f0 !important;
}

/* Any text right after page titles */
.elgg-layout-one-sidebar .elgg-main > p,
.elgg-layout-content .elgg-main > p {
    color: #e8e4f0 !important;
}

/* ============================================
   SHARE BUTTONS / SOCIAL ELEMENTS
   ============================================ */

.share-buttons,
.share-buttons *,
.social-share,
.social-share *,
[class*="share"],
[class*="Share"] {
    color: #e8e4f0 !important;
}

/* ============================================
   ELGG CONTENT ELEMENTS
   ============================================ */

/* Blog and content titles (h3 with links) */
html body h3 a,
html body h3 a:link,
html body h3 a:visited,
html body .elgg-body h3 a,
html body .elgg-content h3 a,
html body .elgg-list h3 a,
html body .elgg-item h3 a,
html body .blog h3 a,
html body .blog-title a,
html body article h3 a,
.elgg-list-entity h3 a,
.elgg-river-item h3 a {
    color: #c9b8ff !important;
}

html body h3 a:hover,
html body .elgg-body h3 a:hover,
html body .elgg-content h3 a:hover,
html body .elgg-list h3 a:hover,
html body .elgg-item h3 a:hover,
html body .blog h3 a:hover,
html body .blog-title a:hover,
html body article h3 a:hover,
.elgg-list-entity h3 a:hover,
.elgg-river-item h3 a:hover {
    color: #00d4aa !important;
}

/* elgg-content area */
.elgg-content,
.elgg-content *,
.elgg-content p,
.elgg-content span,
.elgg-content div,
.elgg-content li,
html body .elgg-content,
html body .elgg-content * {
    color: #e8e4f0 !important;
}

.elgg-content a,
html body .elgg-content a {
    color: #c9b8ff !important;
}

.elgg-content a:hover,
html body .elgg-content a:hover {
    color: #00d4aa !important;
}

/* elgg-subtext */
.elgg-subtext,
.elgg-subtext *,
.elgg-subtext a,
html body .elgg-subtext,
html body .elgg-subtext * {
    color: #9ca3b0 !important;
}

/* elgg-body (main content wrapper) */
.elgg-body,
.elgg-body > *,
.elgg-body p,
.elgg-body span,
.elgg-body div:not(.btn):not([class*="btn"]),
.elgg-body li,
.elgg-body td,
.elgg-body th,
html body .elgg-body,
html body .elgg-body > * {
    color: #e8e4f0 !important;
}

/* River/activity items */
.elgg-river-item,
.elgg-river-item *,
.elgg-river-item .elgg-river-summary,
.elgg-river-item .elgg-river-message,
html body .elgg-river-item,
html body .elgg-river-item * {
    color: #e8e4f0 !important;
}

.elgg-river-item a,
html body .elgg-river-item a {
    color: #c9b8ff !important;
}

.elgg-river-item a:hover,
html body .elgg-river-item a:hover {
    color: #00d4aa !important;
}

/* List items */
.elgg-list,
.elgg-list-entity,
.elgg-list *,
.elgg-list-entity *,
.elgg-item,
.elgg-item *,
html body .elgg-list,
html body .elgg-list-entity,
html body .elgg-item {
    color: #e8e4f0 !important;
}

.elgg-list a,
.elgg-list-entity a,
.elgg-item a,
html body .elgg-list a,
html body .elgg-item a {
    color: #c9b8ff !important;
}

/* Image block text (used in many listings) */
.elgg-image-block,
.elgg-image-block .elgg-body,
.elgg-image-block .elgg-body *,
html body .elgg-image-block,
html body .elgg-image-block * {
    color: #e8e4f0 !important;
}

/* Widget content */
.elgg-module-widget,
.elgg-module-widget *,
.elgg-widget-content,
.elgg-widget-content *,
html body .elgg-module-widget,
html body .elgg-widget-content {
    color: #e8e4f0 !important;
}

/* Profile elements */
.elgg-profile,
.elgg-profile *,
.profile-detail,
.profile-detail *,
.profile-content,
.profile-content *,
html body .elgg-profile,
html body .profile-detail {
    color: #e8e4f0 !important;
}

/* Message/inbox text */
.elgg-message,
.elgg-message *,
.message-content,
.message-content *,
html body .elgg-message,
html body .message-content {
    color: #e8e4f0 !important;
}

/* Comment text */
.elgg-comments,
.elgg-comments *,
.comment-body,
.comment-body *,
html body .elgg-comments,
html body .comment-body {
    color: #e8e4f0 !important;
}

/* Tags */
.elgg-tags,
.elgg-tags a,
html body .elgg-tags,
html body .elgg-tags a {
    color: #9ca3b0 !important;
}

html body .elgg-tags a:hover {
    color: #c9b8ff !important;
}

/* ============================================
   SPECIFIC TEXT COLOR FIXES BY CLASS
   ============================================ */

/* color-text class from neat-blue.css */
html body .color-text,
body .color-text,
.color-text {
    color: #e8e4f0 !important;
}

/* Override any grey/muted colors that are too dark */
html body [class*="text-gray"],
html body [class*="text-grey"],
html body [class*="text-dark"],
body [class*="text-gray"],
body [class*="text-grey"],
body [class*="text-dark"] {
    color: #9ca3b0 !important;
}

/* ============================================
   NEAT-BLUE.CSS COLOR/BACKGROUND OVERRIDES
   ============================================ */

/* Override color-text class (sets #333333 in neat-blue.css) */
html body .color-text,
body .color-text,
.color-text,
html body .color-text *,
body .color-text *,
.color-text * {
    color: #e8e4f0 !important;
}

/* Override background-white class */
html body .background-white,
body .background-white,
.background-white {
    background-color: rgba(29, 37, 65, 0.95) !important;
    color: #e8e4f0 !important;
}

html body .background-white *,
body .background-white *,
.background-white * {
    color: #e8e4f0 !important;
}

/* Override pricing elements */
.pricing-head,
.pricing-head *,
.pricing-head-body,
.pricing-head-body *,
.price-wrapper,
.price-wrapper *,
.price-theme,
.perpdf,
html body .pricing-head,
html body .pricing-head-body,
html body .price-wrapper {
    color: #e8e4f0 !important;
}

/* Theme page specific elements */
.h-theme,
.info-thumbnail-link-theme,
.info-thumbnail-link-theme *,
.pdf-product,
.pdf-product *,
.pricing-list-theme,
.pricing-list-theme li,
html body .h-theme,
html body .info-thumbnail-link-theme,
html body .pdf-product {
    color: #e8e4f0 !important;
}

/* Override background-sun-flower to use cosmic theme */
html body .background-sun-flower,
body .background-sun-flower,
.background-sun-flower {
    background: linear-gradient(135deg, #c9b8ff 0%, #00d4aa 100%) !important;
    color: #0a0a12 !important;
}

.background-sun-flower h3,
.background-sun-flower h3.h-theme,
html body .background-sun-flower h3 {
    color: #0a0a12 !important;
}

/* Fix floating navigation on theme pages */
#theme-sticky-nav,
html body #theme-sticky-nav {
    background: rgba(13, 19, 33, 0.95) !important;
    border: 1px solid rgba(200, 200, 220, 0.15) !important;
}

#theme-sticky-nav a,
html body #theme-sticky-nav a {
    background: linear-gradient(135deg, #00d4aa, #00a896) !important;
    color: #0a0a12 !important;
}

#theme-sticky-nav a:hover,
#theme-sticky-nav a.active,
html body #theme-sticky-nav a:hover,
html body #theme-sticky-nav a.active {
    background: linear-gradient(135deg, #c9b8ff, #a890ff) !important;
    color: #0a0a12 !important;
}

/* ============================================
   MAIN PAGE TEXT (Top paragraphs)
   ============================================ */

/* All paragraphs in main content area */
html body .elgg-main p,
html body .elgg-body p,
html body .elgg-layout p,
html body .container > p,
html body .container-fluid > p,
html body .col-md-12 > p,
html body .report-bigbuttons > p,
body > .elgg-page-body p,
html body .elgg-inner p,
html body #mainContent p {
    color: #e8e4f0 !important;
}

/* Page titles and headers */
html body .elgg-main > h1,
html body .elgg-main > h2,
html body .elgg-body > h1,
html body .elgg-body > h2,
html body .title-container h1,
html body .title-container h2,
html body .container h1,
html body .container h2,
html body #mainContent h1,
html body #mainContent h2 {
    color: #e8e4f0 !important;
}

/* Specific fix for "Astrological Reports for..." title */
html body .elgg-layout-one-sidebar .elgg-main h1,
html body .elgg-layout-one-sidebar .elgg-main h2,
html body .elgg-layout-content h1,
html body .elgg-layout-content h2,
.elgg-page-body h1,
.elgg-page-body h2 {
    color: #e8e4f0 !important;
}

/* ============================================
   ALL REMAINING DARK BACKGROUNDS OVERRIDE
   ============================================ */

/* Override silver/concrete/asbestos backgrounds */
html body .background-silver,
html body .background-concrete,
html body .background-asbestos,
body .background-silver,
body .background-concrete,
body .background-asbestos {
    background-color: rgba(29, 37, 65, 0.85) !important;
    color: #e8e4f0 !important;
}

.background-silver *,
.background-concrete *,
.background-asbestos * {
    color: #e8e4f0 !important;
}

/* Override lead/primary colors */
html body .color-lead,
html body .color-lead-light,
html body .color-lead-lighter,
html body .color-lead-dark,
body .color-lead,
body .color-lead-light {
    color: #c9b8ff !important;
}

/* ============================================
   DESCRIPTION AND CAPTION TEXT
   ============================================ */

/* Ensure all description text is readable */
.description,
.description *,
.description p,
.description li,
.description ul,
.description ol,
.caption,
.caption *,
.caption p,
html body .description,
html body .description *,
html body .caption,
html body .caption * {
    color: #e8e4f0 !important;
}

/* Special description links */
.description a,
.caption a,
html body .description a,
html body .caption a {
    color: #c9b8ff !important;
}

.description a:hover,
.caption a:hover,
html body .description a:hover,
html body .caption a:hover {
    color: #00d4aa !important;
}

/* ============================================
   MAIN PAGE LAYOUT STRUCTURE - DIRECT TARGETING
   ============================================ */

/* Target the main layout structure directly */
html body section,
html body section *,
html body section > .container,
html body section > .container *,
html body section > .container > .row,
html body section > .container > .row * {
    color: #e8e4f0;
}

/* Specific column content */
html body .col-md-9,
html body .col-md-9 > *,
html body .col-md-8,
html body .col-md-8 > *,
html body .col-md-12,
html body .col-md-12 > * {
    color: #e8e4f0 !important;
}

/* Page title (h2 with elgg-heading-main class) */
html body h2.elgg-heading-main,
html body .elgg-heading-main,
body h2.elgg-heading-main,
h2.elgg-heading-main {
    color: #e8e4f0 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* All direct text content in layout containers */
html body section > .container > .row > .col-md-9,
html body section > .container > .row > .col-md-8,
html body section > .container > .row > .col-md-12,
html body section > .container > .row > div[class*="col-"] {
    color: #e8e4f0 !important;
}

/* Ensure links in main content are properly colored */
html body section a,
html body section > .container a {
    color: #c9b8ff !important;
}

html body section a:hover,
html body section > .container a:hover {
    color: #00d4aa !important;
}

/* Keep buttons with their colors */
html body section .btn-primary,
html body section .btn-success,
html body section .btn-info,
html body section .btn-lead {
    color: #0a0a12 !important;
}

html body section .btn-danger {
    color: #fff !important;
}

/* ============================================
   ARTICLES / BLOG PAGE
   ============================================ */

/* Blog list and articles */
html body .blog-list,
html body .blog-list *,
html body .articles,
html body .articles *,
html body .elgg-list-blogs,
html body .elgg-list-blogs *,
html body article,
html body article *,
html body .blog-excerpt,
html body .blog-excerpt *,
html body .blog-body,
html body .blog-body *,
html body .blog-post,
html body .blog-post *,
body.blog .elgg-main,
body.blog .elgg-main *,
body.blog .elgg-body,
body.blog .elgg-body * {
    color: #e8e4f0 !important;
}

/* Blog/article titles */
html body .blog-list h3,
html body .blog-list h3 a,
html body .articles h3,
html body .articles h3 a,
html body article h1,
html body article h2,
html body article h3,
html body article h1 a,
html body article h2 a,
html body article h3 a {
    color: #e8e4f0 !important;
}

html body .blog-list h3 a:hover,
html body .articles h3 a:hover,
html body article h3 a:hover {
    color: #c9b8ff !important;
}

/* Article content */
html body .elgg-output,
html body .elgg-output *,
html body .elgg-output p,
html body .elgg-output li,
html body .elgg-output span,
html body .blog-content,
html body .blog-content *,
html body .article-content,
html body .article-content * {
    color: #e8e4f0 !important;
}

/* Article links */
html body .elgg-output a,
html body .blog-content a,
html body .article-content a {
    color: #c9b8ff !important;
}

html body .elgg-output a:hover,
html body .blog-content a:hover,
html body .article-content a:hover {
    color: #00d4aa !important;
}

/* ============================================
   12ANDUS.CSS OVERRIDES - SPECIFIC CLASSES
   ============================================ */

/* Override .quality-name and .quality-value which have color: black */
html body .quality-name,
html body .quality-value,
body .quality-name,
body .quality-value,
.quality-name,
.quality-value {
    color: #e8e4f0 !important;
    background: rgba(29, 37, 65, 0.85) !important;
}

/* Override innate containers */
html body .innate-name,
html body .innate-value,
body .innate-name,
body .innate-value,
.innate-name,
.innate-value {
    color: #e8e4f0 !important;
    background: rgba(29, 37, 65, 0.85) !important;
}

/* Override any element with inline color: black */
html body [style*="color: black"],
html body [style*="color:black"],
html body [style*="color:#000"],
html body [style*="color: #000"] {
    color: #e8e4f0 !important;
}

/* ============================================
   GENERIC TEXT INHERIT FIX
   ============================================ */

/* Make sure text nodes inherit the right color */
html body section,
html body .elgg-page-body,
html body .elgg-inner,
html body .elgg-main,
html body .elgg-body,
html body .elgg-layout,
html body .elgg-layout-one-sidebar,
html body .elgg-layout-content,
html body #mainContent {
    color: #e8e4f0 !important;
}

/* ============================================
   BIRTHDATA PAGE SPECIFIC
   ============================================ */

/* Birthdata list and items */
html body .birthdata-mine,
html body .birthdata-mine *,
html body .birthdata-complete,
html body .birthdata-complete *,
html body .birthdata-incomplete,
html body .birthdata-incomplete *,
html body .birthdata-details,
html body .birthdata-details *,
html body .birthdata-details .text,
html body .birthdata-details span,
html body .birthdata-details div,
body .birthdata-mine,
body .birthdata-complete,
body .birthdata-incomplete,
body .birthdata-details {
    color: #e8e4f0 !important;
}

/* Birthdata links */
html body .birthdata-details a,
html body .birthdata-complete a,
html body .birthdata-incomplete a,
html body .birthdata-mine a {
    color: #c9b8ff !important;
}

html body .birthdata-details a:hover,
html body .birthdata-complete a:hover,
html body .birthdata-incomplete a:hover,
html body .birthdata-mine a:hover {
    color: #00d4aa !important;
}

/* Run reports button area */
html body .run-reports,
html body .run-reports *,
html body .run-reports a {
    color: #e8e4f0 !important;
}

/* Birthdata form labels and inputs */
html body .control.birthdata,
html body .control.birthdata *,
html body .control.birthdata label,
html body .control.birthdata span,
html body form.birthdata,
html body form.birthdata * {
    color: #e8e4f0 !important;
}

/* Elgg image block (used for birthdata list items) */
html body .elgg-image-block,
html body .elgg-image-block *,
html body .elgg-image-block .elgg-body,
html body .elgg-image-block .elgg-body * {
    color: #e8e4f0 !important;
}

/* ============================================
   NUCLEAR OPTION - ALL TEXT ELEMENTS
   ============================================ */

/* Force ALL elements to have readable text */
html body,
html body *:not(a):not(.btn):not([class*="btn-"]):not(input):not(button):not(select):not(textarea):not(code):not(pre):not(.badge):not(.label):not([class*="fa"]):not([class*="icon"]):not(.glyphicon) {
    color: #e8e4f0;
}

/* Re-apply link colors after the nuclear option */
html body a:not(.btn):not([class*="btn-"]) {
    color: #c9b8ff !important;
}

html body a:not(.btn):not([class*="btn-"]):hover {
    color: #00d4aa !important;
}

/* Re-apply heading colors */
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
    color: #e8e4f0 !important;
}

/* Re-apply button text colors */
html body .btn-primary,
html body .btn-success,
html body .btn-info,
html body .btn-lead,
html body .elgg-button-submit,
html body input[type="submit"],
html body button[type="submit"] {
    color: #0a0a12 !important;
}

html body .btn-default,
html body .btn-secondary,
html body .elgg-button-action {
    color: #c9b8ff !important;
}

html body .btn-danger,
html body .elgg-button-delete {
    color: #fff !important;
}

/* Re-apply muted text colors */
html body .text-muted,
html body .elgg-subtext,
html body .help-block,
html body small,
html body .small,
html body .elgg-quiet {
    color: #9ca3b0 !important;
}

/* ============================================
   CONTAINER BACKGROUND FIX
   ============================================ */

/* Ensure containers have dark backgrounds */
html body section,
html body .elgg-page-body,
html body .container,
html body .container-fluid,
html body .row,
html body .elgg-inner,
html body .elgg-main,
html body .elgg-body,
html body .elgg-layout {
    background-color: transparent;
}

/* ============================================
   BIRTHDATA PAGE - SORT BUTTONS
   ============================================ */

/* Sort buttons styling */
html body .birthdata-sort-buttons,
html body .birthdata-sort-buttons *,
body .birthdata-sort-buttons {
    color: #e8e4f0 !important;
}

html body .birthdata-sort-buttons .elgg-button-action,
html body .elgg-button-action,
body .elgg-button-action,
.elgg-button-action {
    background: #1d2541 !important;
    border: 2px solid #c9b8ff !important;
    color: #e8e4f0 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    transition: all 0.25s ease !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html body .birthdata-sort-buttons .elgg-button-action:hover,
html body .elgg-button-action:hover,
body .elgg-button-action:hover,
.elgg-button-action:hover {
    background: #2a3555 !important;
    color: #fff !important;
    border-color: #00d4aa !important;
    box-shadow: 0 0 15px rgba(0, 212, 170, 0.3) !important;
}

/* ============================================
   ASTROSONG PAGE - TABLE OF CONTENTS & SECTIONS
   ============================================ */

/* Override light backgrounds on astrosong page */
html body .songs-table-of-contents,
html body .your-songs-section,
body .songs-table-of-contents,
body .your-songs-section {
    background-color: rgba(29, 37, 65, 0.85) !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
}

html body .songs-table-of-contents *,
html body .songs-table-of-contents h3,
html body .your-songs-section *,
html body .your-songs-section h3 {
    color: #e8e4f0 !important;
}

/* Report detailed pages */
html body .report-detailed-astrologicalsongs,
html body .report-detailed-astrologicalsongs *,
body .report-detailed-astrologicalsongs {
    color: #e8e4f0 !important;
}

/* Well containers should also be dark */
html body .well,
body .well,
.well {
    background-color: rgba(29, 37, 65, 0.85) !important;
    border-color: rgba(200, 200, 220, 0.15) !important;
    color: #e8e4f0 !important;
}

html body .well *,
body .well *,
.well * {
    color: #e8e4f0 !important;
}

html body .well a,
body .well a,
.well a {
    color: #c9b8ff !important;
}

html body .well a:hover,
body .well a:hover,
.well a:hover {
    color: #00d4aa !important;
}

/* ============================================
   CHAT PAGE - PROMO BOX
   ============================================ */

/* Promo box prominent styling */
html body .promo-box-prominent,
body .promo-box-prominent,
.promo-box-prominent {
    background: rgba(29, 37, 65, 0.95) !important;
    border: 2px solid rgba(201, 184, 255, 0.3) !important;
    border-radius: 12px !important;
    color: #e8e4f0 !important;
}

html body .promo-box-prominent *,
html body .promo-box-content,
html body .promo-box-content *,
html body .promo-box-title,
html body .promo-box-description,
html body .promo-box-link,
body .promo-box-prominent *,
.promo-box-content,
.promo-box-content *,
.promo-box-title,
.promo-box-description,
.promo-box-link {
    color: #e8e4f0 !important;
}

html body .promo-box-title,
body .promo-box-title,
.promo-box-title {
    color: #c9b8ff !important;
}

html body .promo-box-link,
body .promo-box-link,
.promo-box-link {
    color: #00d4aa !important;
}

/* Purchase form inside promo box */
html body .chat-purchase-form,
html body .chat-purchase-form *,
body .chat-purchase-form {
    color: #e8e4f0 !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
}

/* ============================================
   CHATBOTS PAGE - EXPLORE SECTION
   ============================================ */

/* Chatbot explore sections */
html body .chatbot-category,
html body .chatbot-category *,
html body .chatbot-grid,
html body .chatbot-grid *,
html body .chatbot-card,
html body .chatbot-card *,
html body .wisdom-path-card,
html body .wisdom-path-card *,
body .chatbot-category,
body .chatbot-grid,
body .chatbot-card,
body .wisdom-path-card {
    color: #e8e4f0 !important;
}

/* Category headers */
html body .chatbot-category h2,
html body .chatbot-category h3,
html body .chatbot-category h4 {
    color: #c9b8ff !important;
}

/* Chatbot cards */
html body .chatbot-card,
html body .wisdom-path-card {
    background: rgba(29, 37, 65, 0.85) !important;
    border-color: rgba(200, 200, 220, 0.15) !important;
}

html body .chatbot-card:hover,
html body .wisdom-path-card:hover {
    border-color: rgba(201, 184, 255, 0.3) !important;
    box-shadow: 0 4px 20px rgba(201, 184, 255, 0.15) !important;
}

/* ============================================
   NAVBAR - USERNAME STYLING
   ============================================ */

/* Override nav wrapper background */
html body #nav-wrapper,
body #nav-wrapper,
#nav-wrapper {
    background-color: rgba(10, 10, 18, 0.95) !important;
}

#nav-wrapper.background-white,
html body #nav-wrapper.background-white {
    background-color: rgba(10, 10, 18, 0.95) !important;
}

#nav-wrapper.color-black,
#nav-wrapper.color-black *,
html body #nav-wrapper.color-black {
    color: #e8e4f0 !important;
}

/* Username in navbar - use display font */
html body .navbar-brand,
html body .navbar-header .navbar-brand,
html body #mainMenu .navbar-brand,
body .navbar-brand,
.navbar-brand {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: #e8e4f0 !important;
}

html body .navbar-brand:hover,
body .navbar-brand:hover,
.navbar-brand:hover {
    color: #c9b8ff !important;
}

/* Navbar toggle buttons */
html body .navbar-toggle,
html body .navbar-toggle.btn,
html body .navbar-header .navbar-toggle,
body .navbar-toggle {
    color: #e8e4f0 !important;
    background-color: transparent !important;
}

html body .navbar-toggle a,
html body .navbar-header .navbar-toggle a,
body .navbar-toggle a {
    color: #e8e4f0 !important;
}

/* ============================================
   ADDITIONAL INLINE STYLE OVERRIDES
   ============================================ */

/* Override inline background-color styles */
html body [style*="background-color: #fff"],
html body [style*="background-color:#fff"],
html body [style*="background-color: #f5f5f5"],
html body [style*="background-color:#f5f5f5"],
html body [style*="background-color: white"],
html body [style*="background-color:white"],
html body [style*="background: #fff"],
html body [style*="background:#fff"],
html body [style*="background: white"],
html body [style*="background:white"] {
    background-color: rgba(29, 37, 65, 0.85) !important;
}

/* Override inline color: #856404 (yellow banner text) */
html body [style*="color: #856404"],
html body [style*="color:#856404"] {
    color: #e8e4f0 !important;
}

/* Social share section */
html body .social-share-buttons,
html body .social-share-buttons h4,
html body .desktop-share-buttons,
body .social-share-buttons {
    color: #e8e4f0 !important;
}

/* Fix h4 with inline color styles */
html body h4[style*="color:"],
html body h3[style*="color:"],
body h4[style*="color:"],
body h3[style*="color:"] {
    color: #e8e4f0 !important;
}

/* ============================================
   CHAT PAGE - EXPLORE CHATBOTS SECTION
   ============================================ */

/* Chatbot section title */
html body .chatbot-section-title,
body .chatbot-section-title,
.chatbot-section-title {
    color: #c9b8ff !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* Categories grid */
html body .chatbot-categories-grid,
html body .chatbot-categories-grid *,
body .chatbot-categories-grid {
    color: #e8e4f0 !important;
}

/* Category boxes */
html body .chatbot-category-box,
html body .chatbot-category-box *,
body .chatbot-category-box {
    color: #e8e4f0 !important;
}

html body .chatbot-category-box {
    background: rgba(29, 37, 65, 0.85) !important;
    border: 1px solid rgba(200, 200, 220, 0.15) !important;
    border-radius: 12px !important;
}

/* Category header and content */
html body .category-box-header,
html body .category-box-header *,
html body .category-box-content,
html body .category-box-content *,
html body .category-box-content h4,
html body .category-box-content p,
body .category-box-header,
body .category-box-content {
    color: #e8e4f0 !important;
}

/* Category expand icon */
html body .category-expand-icon,
html body .category-expand-icon *,
body .category-expand-icon {
    color: #00d4aa !important;
}

/* Expanded category content */
html body .category-box-expanded,
html body .category-box-expanded *,
body .category-box-expanded {
    color: #e8e4f0 !important;
    background: rgba(29, 37, 65, 0.95) !important;
}

/* Wisdom paths grid */
html body .wisdom-paths-grid,
html body .wisdom-paths-grid *,
body .wisdom-paths-grid {
    color: #e8e4f0 !important;
}

/* Wisdom path thumbnails */
html body .wisdom-path-thumb,
html body .wisdom-path-thumb *,
html body .wisdom-path-thumb p,
body .wisdom-path-thumb {
    color: #e8e4f0 !important;
}

/* Override inline color: #333 and #666 in chatbot thumbnails */
html body .wisdom-path-thumb p[style*="color: #333"],
html body .wisdom-path-thumb p[style*="color:#333"],
html body .wisdom-path-thumb p[style*="color: #666"],
html body .wisdom-path-thumb p[style*="color:#666"],
html body p[style*="color: #333"],
html body p[style*="color:#333"],
html body p[style*="color: #666"],
html body p[style*="color:#666"] {
    color: #e8e4f0 !important;
}

/* Category box border on hover */
html body .chatbot-category-box:hover {
    border-color: rgba(201, 184, 255, 0.3) !important;
}

/* Wisdom path thumb borders - make them cosmic */
html body .wisdom-path-thumb > div[style*="border:"],
body .wisdom-path-thumb > div[style*="border:"] {
    border-color: rgba(200, 200, 220, 0.2) !important;
}

html body .wisdom-path-thumb:hover > div[style*="border:"] {
    border-color: rgba(201, 184, 255, 0.5) !important;
}

/* ============================================
   INLINE STYLE OVERRIDES - EXTENDED
   ============================================ */

/* Override various inline dark text colors */
html body [style*="color: #333"],
html body [style*="color:#333"],
html body [style*="color: #444"],
html body [style*="color:#444"],
html body [style*="color: #555"],
html body [style*="color:#555"],
html body [style*="color: #666"],
html body [style*="color:#666"],
html body [style*="color: #777"],
html body [style*="color:#777"] {
    color: #e8e4f0 !important;
}

/* Override background-color: #fff3cd (yellow warning boxes) */
html body [style*="background-color: #fff3cd"],
html body [style*="background-color:#fff3cd"],
html body [style*="background: #fff3cd"],
html body [style*="background:#fff3cd"] {
    background-color: rgba(201, 184, 255, 0.15) !important;
    border-color: rgba(201, 184, 255, 0.3) !important;
}

/* ============================================
   ALERT INFO BOXES
   ============================================ */

html body .alert-info,
body .alert-info,
.alert-info {
    background-color: rgba(201, 184, 255, 0.15) !important;
    border-color: rgba(201, 184, 255, 0.3) !important;
    color: #e8e4f0 !important;
}

html body .alert-info *,
body .alert-info *,
.alert-info * {
    color: #e8e4f0 !important;
}

html body .alert-info a,
body .alert-info a,
.alert-info a {
    color: #c9b8ff !important;
    font-weight: 600;
}

html body .alert-info a:hover,
body .alert-info a:hover,
.alert-info a:hover {
    color: #00d4aa !important;
}

/* ============================================
   SECTION TITLES - DETAILED REPORT PAGE
   ============================================ */

/* Main section titles like "Birth Chart Readings for..." */
html body .title-container,
html body .title-container h1,
html body .title-container h2,
body .title-container,
body .title-container h1,
body .title-container h2 {
    color: #e8e4f0 !important;
}

html body .title-container h1,
body .title-container h1 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.8rem !important;
    text-shadow: 0 0 20px rgba(201, 184, 255, 0.2) !important;
}

/* ============================================
   TOC NAVIGATION - DETAILED REPORT PAGE
   Override inline styles in detailed.php
   ============================================ */

html body #report-toc .toc-item,
body #report-toc .toc-item,
#report-toc .toc-item {
    background: rgba(29, 37, 65, 0.85) !important;
    color: #e8e4f0 !important;
    border: 1px solid rgba(200, 200, 220, 0.15) !important;
}

html body #report-toc .toc-item:hover,
body #report-toc .toc-item:hover,
#report-toc .toc-item:hover {
    background: rgba(201, 184, 255, 0.15) !important;
    color: #fff !important;
    border-color: rgba(201, 184, 255, 0.3) !important;
}

html body #report-toc .toc-item span,
body #report-toc .toc-item span,
#report-toc .toc-item span {
    color: #e8e4f0 !important;
}

/* ============================================
   SAVED READINGS PAGE - /report/saved-readings
   ============================================ */

/* Override the inline styles in saved-readings/table.php */
html body .saved-readings-page,
html body .saved-readings-page *,
body .saved-readings-page {
    color: #e8e4f0 !important;
}

html body .saved-reading-item,
body .saved-reading-item {
    background-color: rgba(29, 37, 65, 0.95) !important;
    border-color: rgba(200, 200, 220, 0.15) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

html body .saved-reading-item .reading-header,
body .saved-reading-item .reading-header {
    border-bottom-color: rgba(200, 200, 220, 0.15) !important;
}

/* Context display - override inline color */
html body .saved-reading-item .context-display,
html body .saved-reading-item .context-display[style],
body .saved-reading-item .context-display {
    color: #c9b8ff !important;
}

/* Reading date */
html body .saved-reading-item .reading-date,
body .saved-reading-item .reading-date {
    color: #9ca3b0 !important;
}

/* Question section */
html body .saved-reading-item .reading-question h4,
body .saved-reading-item .reading-question h4 {
    color: #c9b8ff !important;
}

html body .saved-reading-item .reading-question-text,
body .saved-reading-item .reading-question-text {
    background-color: rgba(201, 184, 255, 0.1) !important;
    border-left-color: #c9b8ff !important;
    color: #e8e4f0 !important;
}

/* Answer section */
html body .saved-reading-item .reading-answer h4,
body .saved-reading-item .reading-answer h4 {
    color: #00d4aa !important;
}

html body .saved-reading-item .reading-answer-text,
body .saved-reading-item .reading-answer-text {
    background-color: rgba(0, 212, 170, 0.08) !important;
    border-left-color: #00d4aa !important;
    color: #e8e4f0 !important;
}

/* Birth data text - override inline color */
html body .saved-reading-item .birth-data,
body .saved-reading-item .birth-data {
    color: #e8e4f0 !important;
}

/* Reading icon */
html body .saved-reading-item .reading-icon,
body .saved-reading-item .reading-icon {
    border: 1px solid rgba(200, 200, 220, 0.2) !important;
}

/* Mobile: full width for saved-readings and saved-qa */
@media (max-width: 768px) {
    html body .saved-readings-page,
    body .saved-readings-page,
    .saved-readings-page,
    html body .saved-qa-page,
    body .saved-qa-page,
    .saved-qa-page {
        padding: 0 10px !important;
    }

    html body .saved-readings-page .container,
    body .saved-readings-page .container,
    .saved-readings-page .container,
    html body .saved-qa-page .container,
    body .saved-qa-page .container,
    .saved-qa-page .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    html body .saved-readings-page .col-md-12,
    body .saved-readings-page .col-md-12,
    .saved-readings-page .col-md-12,
    html body .saved-qa-page .col-md-12,
    body .saved-qa-page .col-md-12,
    .saved-qa-page .col-md-12 {
        width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    html body .saved-reading-item,
    body .saved-reading-item,
    .saved-reading-item,
    html body .saved-qa-item,
    body .saved-qa-item,
    .saved-qa-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   SAVED Q&A PAGE - /report/saved-qa
   ============================================ */

/* Override inline styles in saved-qa page */
html body .saved-qa-page,
body .saved-qa-page,
.saved-qa-page {
    color: #e8e4f0 !important;
}

html body .saved-qa-page p,
body .saved-qa-page p {
    color: #e8e4f0 !important;
}

html body .saved-qa-item,
body .saved-qa-item,
.saved-qa-item {
    background-color: #1d2541 !important;
    border-color: #3a4568 !important;
    color: #ffffff !important;
}

html body .saved-qa-item .qa-header,
body .saved-qa-item .qa-header {
    border-bottom-color: rgba(200, 200, 220, 0.15) !important;
}

html body .saved-qa-item .birth-data,
body .saved-qa-item .birth-data,
.saved-qa-item .birth-data {
    color: #ffffff !important;
}

html body .saved-qa-item .qa-date,
body .saved-qa-item .qa-date,
.saved-qa-item .qa-date {
    color: #9ca3b0 !important;
}

html body .saved-qa-item .context-display,
body .saved-qa-item .context-display,
.saved-qa-item .context-display,
.saved-qa-item .context-display[style] {
    color: #c9b8ff !important;
}

html body .saved-qa-item .qa-question h4,
body .saved-qa-item .qa-question h4,
.saved-qa-item .qa-question h4 {
    color: #c9b8ff !important;
}

html body .saved-qa-item .qa-question-text,
body .saved-qa-item .qa-question-text,
.saved-qa-item .qa-question-text {
    background-color: #2a3352 !important;
    border-left-color: #c9b8ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .saved-qa-item .qa-answer h4,
body .saved-qa-item .qa-answer h4,
.saved-qa-item .qa-answer h4 {
    color: #00d4aa !important;
}

html body .saved-qa-item .qa-answer-text,
body .saved-qa-item .qa-answer-text,
.saved-qa-item .qa-answer-text {
    background-color: #1d3a35 !important;
    border-left-color: #00d4aa !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ============================================
   SECTION ELEMENT - Override neat-blue.css white background
   ============================================ */

/* neat-blue.css sets section { background: #fff; } - MUST OVERRIDE */
html body section,
body section,
section {
    background: transparent !important;
    background-color: transparent !important;
}

/* ============================================
   PROFILE PAGE - /profile/*
   ============================================ */

/* Profile page - EXPLICIT DARK BACKGROUNDS */
html body .profile-ownerblock,
html body .profile-body,
html body #profile-details,
html body #profile-owner-block,
body .profile-ownerblock,
body .profile-body,
body #profile-details,
body #profile-owner-block {
    background-color: rgba(29, 37, 65, 0.95) !important;
    color: #e8e4f0 !important;
    padding: 15px !important;
    border-radius: 8px !important;
}

/* Profile details class with padding (pll = padding left large) */
html body #profile-details.elgg-body.pll,
html body #profile-details.pll,
html body #profile-details.elgg-body,
html body div#profile-details,
body #profile-details.pll,
body div#profile-details {
    background-color: rgba(29, 37, 65, 0.95) !important;
    color: #e8e4f0 !important;
}

html body #profile-details h2,
body #profile-details h2 {
    color: #e8e4f0 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* Profile details rows - explicit background AND text color */
html body #profile-details .odd,
html body #profile-details .even,
body #profile-details .odd,
body #profile-details .even {
    background-color: transparent !important;
    color: #e8e4f0 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(200, 200, 220, 0.1) !important;
}

/* Labels (Gender:, Birth date:, etc.) */
html body #profile-details b,
body #profile-details b {
    color: #c9b8ff !important;
    font-weight: 600 !important;
}

/* Values (Male, etc.) - these come after the b tag */
html body #profile-details .odd,
html body #profile-details .even,
html body #profile-details div,
body #profile-details .odd,
body #profile-details .even,
body #profile-details div {
    color: #e8e4f0 !important;
}

/* Profile page wrapper (the whole section) */
html body section .container .row .profile-ownerblock,
html body section .container .row .profile-body,
body section .container .row {
    background-color: transparent !important;
}

/* Ensure the profile section itself has dark background */
html body section:has(.profile-ownerblock),
html body section:has(.profile-body) {
    background-color: rgba(13, 19, 33, 0.95) !important;
}

/* Profile page columns - explicit backgrounds */
html body .col-md-3.profile-ownerblock,
html body .col-md-9.profile-body,
body .col-md-3.profile-ownerblock,
body .col-md-9.profile-body {
    background-color: rgba(29, 37, 65, 0.95) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

/* Profile visitors section - override inline styles */
html body .profile-visitors-section,
body .profile-visitors-section {
    background-color: rgba(29, 37, 65, 0.95) !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
}

html body .profile-visitors-section *,
body .profile-visitors-section * {
    color: #e8e4f0 !important;
}

/* Override specific inline styled elements in profile */
html body .profile-visitors-section p[style*="background-color: #fff3cd"],
html body .profile-visitors-section p[style*="background-color:#fff3cd"],
body [style*="background-color: #fff3cd"],
body [style*="background-color:#fff3cd"] {
    background-color: rgba(201, 184, 255, 0.15) !important;
    border-left-color: #c9b8ff !important;
    color: #e8e4f0 !important;
}

html body [style*="background-color: #e8f4f8"],
html body [style*="background-color:#e8f4f8"],
body [style*="background-color: #e8f4f8"],
body [style*="background-color:#e8f4f8"] {
    background-color: rgba(0, 212, 170, 0.1) !important;
    border-left-color: #00d4aa !important;
    color: #e8e4f0 !important;
}

html body [style*="background-color: #f9f9f9"],
html body [style*="background-color:#f9f9f9"],
body [style*="background-color: #f9f9f9"],
body [style*="background-color:#f9f9f9"] {
    background-color: rgba(29, 37, 65, 0.95) !important;
    color: #e8e4f0 !important;
}

html body [style*="background-color: #f0f8f0"],
html body [style*="background-color:#f0f8f0"],
body [style*="background-color: #f0f8f0"],
body [style*="background-color:#f0f8f0"] {
    background-color: rgba(0, 212, 170, 0.08) !important;
    border-color: #00d4aa !important;
    color: #e8e4f0 !important;
}

/* Profile visitors table */
html body .profile-visitors-section table,
body .profile-visitors-section table {
    background-color: rgba(29, 37, 65, 0.9) !important;
}

html body .profile-visitors-section table th,
body .profile-visitors-section table th {
    background-color: rgba(0, 212, 170, 0.3) !important;
    color: #fff !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
}

html body .profile-visitors-section table td,
body .profile-visitors-section table td {
    border-color: rgba(200, 200, 220, 0.15) !important;
    color: #e8e4f0 !important;
}

html body .profile-visitors-section h3,
body .profile-visitors-section h3 {
    color: #e8e4f0 !important;
    border-bottom-color: #00d4aa !important;
}

/* Logged out mutual attraction form */
html body .loggedout-mutual-attraction-form-container,
body .loggedout-mutual-attraction-form-container {
    background-color: rgba(29, 37, 65, 0.95) !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
}

html body .loggedout-mutual-attraction-form-container *,
body .loggedout-mutual-attraction-form-container * {
    color: #e8e4f0 !important;
}

html body .loggedout-mutual-attraction-form-container label,
body .loggedout-mutual-attraction-form-container label {
    color: #c9b8ff !important;
}

html body .loggedout-mutual-attraction-form-container input,
html body .loggedout-mutual-attraction-form-container select,
body .loggedout-mutual-attraction-form-container input,
body .loggedout-mutual-attraction-form-container select {
    background-color: rgba(13, 19, 33, 0.9) !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
    color: #e8e4f0 !important;
}

/* Visitor form preview section */
html body .visitor-form-preview-section,
body .visitor-form-preview-section {
    background-color: rgba(0, 212, 170, 0.08) !important;
    border-color: #00d4aa !important;
}

html body .visitor-form-preview-section *,
body .visitor-form-preview-section * {
    color: #e8e4f0 !important;
}

/* Registration box in profile */
html body .registration-box,
body .registration-box {
    background-color: rgba(29, 37, 65, 0.95) !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
}

html body .registration-box *,
body .registration-box * {
    color: #e8e4f0 !important;
}

/* General report link section */
html body .general-report-link,
body .general-report-link {
    color: #e8e4f0 !important;
}

html body .general-report-link a,
body .general-report-link a {
    color: #c9b8ff !important;
}

html body .general-report-link a:hover,
body .general-report-link a:hover {
    color: #00d4aa !important;
}

/* Profile owner block */
html body .profile-ownerblock .elgg-avatar,
body .profile-ownerblock .elgg-avatar {
    border-color: rgba(201, 184, 255, 0.3) !important;
}

/* ============================================
   STRIPE BUTTON - Price display fix
   ============================================ */

/* Remove any background from price inside Stripe button */
html body .payment.stripe .btn span,
html body .payment.stripe .btn .price,
html body .payment.stripe .btn .discount,
html body .payment.stripe #submit-button span,
html body #submit-button span,
body .payment.stripe .btn span,
body #submit-button span {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* Ensure btn-primary text is white */
html body .btn-primary,
html body .btn-primary *,
body .btn-primary,
body .btn-primary * {
    color: #fff !important;
}

/* Fix any dark backgrounds on button content */
html body .btn span,
html body .btn .fa,
body .btn span,
body .btn .fa {
    background-color: transparent !important;
}

/* ============================================
   MORE INLINE STYLE OVERRIDES
   ============================================ */

/* Override color: #856404 (warning text) */
html body [style*="color: #856404"],
html body [style*="color:#856404"],
body [style*="color: #856404"],
body [style*="color:#856404"] {
    color: #e8e4f0 !important;
}

/* Override background-color: white */
html body [style*="background-color: white"],
html body [style*="background-color:white"],
html body [style*="background: white"],
html body [style*="background:white"],
body [style*="background-color: white"],
body [style*="background-color:white"] {
    background-color: rgba(29, 37, 65, 0.95) !important;
}

/* Override border colors to cosmic */
html body [style*="border: 2px solid #ddd"],
html body [style*="border:2px solid #ddd"],
html body [style*="border: 1px solid #ddd"],
html body [style*="border:1px solid #ddd"],
body [style*="border: 2px solid #ddd"],
body [style*="border:2px solid #ddd"] {
    border-color: rgba(200, 200, 220, 0.2) !important;
}

/* Override table-striped colors */
html body .table-striped tbody tr:nth-of-type(odd),
body .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(201, 184, 255, 0.05) !important;
}

html body .table-striped tbody tr:nth-of-type(even),
body .table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(29, 37, 65, 0.5) !important;
}

/* ============================================
   SHARE BUTTONS - CTA MESSAGE BOX
   ============================================ */

/* Override the inline-styled share CTA message */
html body .social-share-buttons .share-cta-message,
html body .share-cta-message,
body .share-cta-message {
    background-color: rgba(0, 212, 170, 0.1) !important;
    border-color: #00d4aa !important;
    color: #e8e4f0 !important;
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.2) !important;
}

/* Ensure social share button text stays white */
html body .social-share-buttons .btn-social,
body .social-share-buttons .btn-social {
    color: #fff !important;
}

html body .social-share-buttons .btn-social span,
html body .social-share-buttons .btn-social .fa,
body .social-share-buttons .btn-social span,
body .social-share-buttons .btn-social .fa {
    color: inherit !important;
    background: transparent !important;
}

/* ============================================
   GENERAL NUCLEAR OVERRIDE FOR INLINE STYLES
   ============================================ */

/* Override any remaining dark text colors in inline styles */
html body [style*="color: #1a1a1a"],
html body [style*="color:#1a1a1a"],
body [style*="color: #1a1a1a"],
body [style*="color:#1a1a1a"] {
    color: #e8e4f0 !important;
}

/* Override common light backgrounds */
html body [style*="background-color: #e9ecef"],
html body [style*="background-color:#e9ecef"],
body [style*="background-color: #e9ecef"],
body [style*="background-color:#e9ecef"] {
    background-color: rgba(29, 37, 65, 0.8) !important;
}

/* Override #4CAF50 green to cosmic teal */
html body [style*="background-color: #4CAF50"],
html body [style*="background-color:#4CAF50"],
body [style*="background-color: #4CAF50"],
body [style*="background-color:#4CAF50"] {
    background-color: rgba(0, 212, 170, 0.8) !important;
}

html body [style*="border-color: #4CAF50"],
html body [style*="border:"][style*="#4CAF50"],
body [style*="border-color: #4CAF50"] {
    border-color: #00d4aa !important;
}

/* Ensure premium/premium_notice displays correctly */
html body .premium-notice,
html body .admin-notice,
body .premium-notice,
body .admin-notice {
    background-color: rgba(201, 184, 255, 0.15) !important;
    border-color: rgba(201, 184, 255, 0.3) !important;
    color: #e8e4f0 !important;
}

/* ============================================
   LOADER / SPINNER - MUST PRESERVE
   ============================================ */

/* Ensure loader is always visible and not affected by other styles */
html body #loading,
html body .report-bigbuttons-spinner,
body #loading,
body .report-bigbuttons-spinner,
#loading,
.report-bigbuttons-spinner,
.report-bigbuttons #loading,
#qualities-content #loading {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 120px !important;
    width: 100% !important;
}

/* When hidden by inline style, respect that */
html body #loading[style*="display: none"],
html body .report-bigbuttons-spinner[style*="display: none"],
body #loading[style*="display: none"],
body .report-bigbuttons-spinner[style*="display: none"] {
    display: none !important;
}

/* Bokeh loader - COMPLETE styles to ensure visibility */
html body .bokeh,
body .bokeh,
ul.bokeh,
.report-bigbuttons .bokeh,
#qualities-content .bokeh,
.bokeh {
    border: 3px solid #00d4aa !important;
    border-radius: 50% !important;
    font-size: 100px !important;
    height: 1em !important;
    width: 1em !important;
    list-style: outside none none !important;
    margin: 0 auto !important;
    position: relative !important;
    top: 0 !important;
    z-index: 2147483647 !important;
    background-color: rgba(13, 19, 33, 0.5) !important;
    display: block !important;
    padding: 0 !important;
}

/* Bokeh li base styles */
html body .bokeh li,
body .bokeh li,
.bokeh li,
html body .report-bigbuttons .bokeh li,
body .report-bigbuttons .bokeh li,
html body #qualities-content .bokeh li,
body #qualities-content .bokeh li {
    border-radius: 50% !important;
    height: 0.2em !important;
    width: 0.2em !important;
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Bokeh dot 1 - Green */
html body .bokeh li:nth-child(1),
body .bokeh li:nth-child(1),
.bokeh li:nth-child(1),
html body .report-bigbuttons .bokeh li:nth-child(1),
html body #qualities-content .bokeh li:nth-child(1) {
    animation: 1.13s linear 0s normal none infinite running rota, 3.67s ease-in-out 0s alternate none infinite running opa !important;
    background: #00c176 !important;
    background-color: #00c176 !important;
    left: 50% !important;
    margin: 0 0 0 -0.1em !important;
    top: 0 !important;
    transform-origin: 50% 250% 0 !important;
}

/* Bokeh dot 2 - Red */
html body .bokeh li:nth-child(2),
body .bokeh li:nth-child(2),
.bokeh li:nth-child(2),
html body .report-bigbuttons .bokeh li:nth-child(2),
html body #qualities-content .bokeh li:nth-child(2) {
    animation: 1.86s linear 0s normal none infinite running rota, 4.29s ease-in-out 0s alternate none infinite running opa !important;
    background: #ff003c !important;
    background-color: #ff003c !important;
    margin: -0.1em 0 0 !important;
    right: 0 !important;
    top: 50% !important;
    transform-origin: -150% 50% 0 !important;
}

/* Bokeh dot 3 - Yellow */
html body .bokeh li:nth-child(3),
body .bokeh li:nth-child(3),
.bokeh li:nth-child(3),
html body .report-bigbuttons .bokeh li:nth-child(3),
html body #qualities-content .bokeh li:nth-child(3) {
    animation: 1.45s linear 0s normal none infinite running rota, 5.12s ease-in-out 0s alternate none infinite running opa !important;
    background: #fabe28 !important;
    background-color: #fabe28 !important;
    bottom: 0 !important;
    left: 50% !important;
    margin: 0 0 0 -0.1em !important;
    transform-origin: 50% -150% 0 !important;
}

/* Ensure loader text is visible if any */
html body #loading *:not(li),
body #loading *:not(li) {
    color: #e8e4f0 !important;
}

/* Qualities content area where loader appears */
html body #qualities-content,
body #qualities-content,
#qualities-content {
    min-height: 200px;
}

/* When #loading is inside qualities-content, ensure proper display */
html body #qualities-content #loading,
body #qualities-content #loading,
#qualities-content #loading {
    min-height: 150px;
    display: block !important;
    text-align: center !important;
    padding-top: 20px !important;
}

/* Override the bokeh top positioning when in qualities-content */
html body #qualities-content .bokeh,
body #qualities-content .bokeh,
#qualities-content .bokeh {
    top: auto !important;
    margin: 0 auto !important;
    position: relative !important;
    display: block !important;
}

/* Bokeh animation keyframes - MUST BE DEFINED for animations to work */
@keyframes rota {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes opa {
    0% { opacity: 1; }
    12% { opacity: 0.8; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.6; }
    66.6% { opacity: 0.52; }
    70% { opacity: 0.63; }
    79.9% { opacity: 0.6; }
    84.2% { opacity: 0.75; }
    91% { opacity: 0.87; }
    100% { opacity: 1; }
}

/* ============================================
   MESSAGES INBOX PAGE
   ============================================ */
html body .elgg-form-messages-process,
body .elgg-form-messages-process,
.elgg-form-messages-process {
    background-color: rgba(29, 37, 65, 0.95) !important;
    padding: 15px !important;
    border-radius: 8px !important;
}

/* Message list items */
html body .messages-inbox-item,
html body .elgg-list-entity .elgg-item,
body .messages-inbox-item,
body .elgg-list-entity .elgg-item {
    background-color: rgba(29, 37, 65, 0.8) !important;
    border-bottom: 1px solid rgba(200, 200, 220, 0.15) !important;
    padding: 10px !important;
}

/* Message sender name */
html body .messages-owner,
html body .messages-sender,
html body .message-sender,
body .messages-owner,
body .messages-sender,
body .message-sender {
    color: #c9b8ff !important;
    font-weight: 600 !important;
}

/* Message subject/title */
html body .messages-subject,
html body .message-subject,
body .messages-subject,
body .message-subject {
    color: #e8e4f0 !important;
}

/* Message preview text */
html body .messages-body,
html body .message-body,
html body .message-excerpt,
body .messages-body,
body .message-body,
body .message-excerpt {
    color: #b8b8c8 !important;
}

/* Message timestamp */
html body .messages-timestamp,
html body .message-time,
body .messages-timestamp,
body .message-time {
    color: #9ca3b0 !important;
}

/* Unread message indicator */
html body .messages-unread,
html body .message-unread,
body .messages-unread,
body .message-unread {
    background-color: rgba(0, 212, 170, 0.15) !important;
}

/* ============================================
   ADMIN PAGE - ONLINE USERS SECTION
   ============================================ */

/* Override the .alert-info box styling for dark theme */
html body .admin-user-info,
body .admin-user-info,
.admin-user-info {
    color: #e8e4f0 !important;
}

/* Alert info box needs dark background */
html body .alert.alert-info,
body .alert.alert-info {
    background-color: rgba(29, 37, 65, 0.95) !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
    color: #e8e4f0 !important;
}

/* Override inline styles in admin_extras.php */
html body .admin-user-info .section-title,
body .admin-user-info .section-title,
.admin-user-info .section-title {
    color: #c9b8ff !important;
}

html body .admin-user-info .label,
body .admin-user-info .label,
.admin-user-info .label {
    color: #9ca3b0 !important;
}

html body .admin-user-info strong,
body .admin-user-info strong,
.admin-user-info strong {
    color: #e8e4f0 !important;
}

html body .admin-user-info a,
body .admin-user-info a,
.admin-user-info a {
    color: #c9b8ff !important;
}

html body .admin-user-info a:hover,
body .admin-user-info a:hover,
.admin-user-info a:hover {
    color: #00d4aa !important;
}

html body .admin-user-info hr,
body .admin-user-info hr,
.admin-user-info hr {
    border-color: rgba(200, 200, 220, 0.2) !important;
}

/* ============================================
   ADMIN USER INFO PANEL - KEEP LIGHT THEME
   These panels have inline light backgrounds and should stay light
   for proper contrast and readability
   ============================================ */

/* Keep the main container dark but let inner panels be light */
html body .admin-user-info,
body .admin-user-info,
.admin-user-info {
    color: #e8e4f0;
}

/* Payment history link - keep visible */
html body .admin-user-info [style*="color: #2c5aa0"],
body .admin-user-info [style*="color: #2c5aa0"] {
    color: #c9b8ff !important;
}

/* Expandable payment history panel - KEEP LIGHT for readability */
html body .admin-user-info [id^="payment-history-"],
body .admin-user-info [id^="payment-history-"],
.admin-user-info [id^="payment-history-"] {
    background: #fff !important;
    color: #333 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
}

/* Payment history table - all text dark */
html body .admin-user-info [id^="payment-history-"] *,
body .admin-user-info [id^="payment-history-"] * {
    color: #333 !important;
}

/* TYPE BADGES - Preserve inline background AND color styles */
html body .admin-user-info [id^="payment-history-"] span[style*="background"],
body .admin-user-info [id^="payment-history-"] span[style*="background"] {
    /* These badges have inline color styles that must be preserved */
    color: inherit !important;
}

/* Subscription type badge - blue */
html body .admin-user-info [id^="payment-history-"] span[style*="background: #e3f2fd"],
body .admin-user-info [id^="payment-history-"] span[style*="background: #e3f2fd"] {
    background: #e3f2fd !important;
    color: #1565c0 !important;
}

/* PDF type badge - orange */
html body .admin-user-info [id^="payment-history-"] span[style*="background: #fff3e0"],
body .admin-user-info [id^="payment-history-"] span[style*="background: #fff3e0"] {
    background: #fff3e0 !important;
    color: #e65100 !important;
}

/* AI Insights type badge - green */
html body .admin-user-info [id^="payment-history-"] span[style*="background: #e8f5e9"],
body .admin-user-info [id^="payment-history-"] span[style*="background: #e8f5e9"] {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
}

/* Failed type badge - red */
html body .admin-user-info [id^="payment-history-"] span[style*="background: #ffcdd2"],
body .admin-user-info [id^="payment-history-"] span[style*="background: #ffcdd2"] {
    background: #ffcdd2 !important;
    color: #c62828 !important;
}

/* Cancelled type badge - amber */
html body .admin-user-info [id^="payment-history-"] span[style*="background: #ffe0b2"],
body .admin-user-info [id^="payment-history-"] span[style*="background: #ffe0b2"] {
    background: #ffe0b2 !important;
    color: #e65100 !important;
}

/* Expired type badge - gray */
html body .admin-user-info [id^="payment-history-"] span[style*="background: #e0e0e0"],
body .admin-user-info [id^="payment-history-"] span[style*="background: #e0e0e0"] {
    background: #e0e0e0 !important;
    color: #616161 !important;
}

/* Method column - PayPal blue, Stripe purple */
html body .admin-user-info [id^="payment-history-"] strong[style*="color: #003087"],
body .admin-user-info [id^="payment-history-"] strong[style*="color: #003087"] {
    color: #003087 !important;
}

html body .admin-user-info [id^="payment-history-"] strong[style*="color: #635bff"],
body .admin-user-info [id^="payment-history-"] strong[style*="color: #635bff"] {
    color: #635bff !important;
}

/* Active subscriptions box - KEEP LIGHT GREEN */
html body .admin-user-info [style*="background: #e8f5e9"],
body .admin-user-info [style*="background: #e8f5e9"],
html body .admin-user-info [style*="background:#e8f5e9"],
body .admin-user-info [style*="background:#e8f5e9"] {
    background: #e8f5e9 !important;
    color: #333 !important;
}

html body .admin-user-info [style*="background: #e8f5e9"] *,
body .admin-user-info [style*="background: #e8f5e9"] * {
    color: #333 !important;
}

html body .admin-user-info [style*="background: #e8f5e9"] strong[style*="color: #2e7d32"],
body .admin-user-info [style*="background: #e8f5e9"] strong[style*="color: #2e7d32"] {
    color: #2e7d32 !important;
}

/* Active status badge - green */
html body .admin-user-info [style*="background: #e8f5e9"] span[style*="background: #c8e6c9"],
body .admin-user-info [style*="background: #e8f5e9"] span[style*="background: #c8e6c9"] {
    background: #c8e6c9 !important;
    color: #2e7d32 !important;
}

/* Method colors in active subscriptions */
html body .admin-user-info [style*="background: #e8f5e9"] strong[style*="color: #003087"],
body .admin-user-info [style*="background: #e8f5e9"] strong[style*="color: #003087"] {
    color: #003087 !important;
}

html body .admin-user-info [style*="background: #e8f5e9"] strong[style*="color: #635bff"],
body .admin-user-info [style*="background: #e8f5e9"] strong[style*="color: #635bff"] {
    color: #635bff !important;
}

/* Debug box - keep light gray with dark text for readability */
html body .admin-user-info div[style*="background: #f5f5f5"],
body .admin-user-info div[style*="background: #f5f5f5"],
html body .admin-user-info [style*="background: #e8f5e9"] div[style*="background: #f5f5f5"],
body .admin-user-info [style*="background: #e8f5e9"] div[style*="background: #f5f5f5"] {
    background: #f5f5f5 !important;
    color: #555 !important;
}

html body .admin-user-info div[style*="background: #f5f5f5"] strong,
body .admin-user-info div[style*="background: #f5f5f5"] strong,
html body .admin-user-info [style*="background: #e8f5e9"] div[style*="background: #f5f5f5"] strong,
body .admin-user-info [style*="background: #e8f5e9"] div[style*="background: #f5f5f5"] strong {
    color: #333 !important;
}

html body .admin-user-info div[style*="background: #f5f5f5"] code,
body .admin-user-info div[style*="background: #f5f5f5"] code,
html body .admin-user-info [style*="background: #e8f5e9"] div[style*="background: #f5f5f5"] code,
body .admin-user-info [style*="background: #e8f5e9"] div[style*="background: #f5f5f5"] code {
    color: #222 !important;
    background: #e8e8e8 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
}

/* Table headers in payment history - KEEP LIGHT GRAY */
html body .admin-user-info [id^="payment-history-"] table thead tr,
body .admin-user-info [id^="payment-history-"] table thead tr {
    background: #f5f5f5 !important;
}

html body .admin-user-info [id^="payment-history-"] table th,
body .admin-user-info [id^="payment-history-"] table th {
    color: #333 !important;
    background: #f5f5f5 !important;
}

html body .admin-user-info [id^="payment-history-"] table td,
body .admin-user-info [id^="payment-history-"] table td {
    color: #333 !important;
    border-color: #eee !important;
}

/* Type badges - preserve their inline styles */
html body .admin-user-info [id^="payment-history-"] table td span[style*="border-radius"],
body .admin-user-info [id^="payment-history-"] table td span[style*="border-radius"] {
    /* Let inline styles take precedence for badges */
}

/* Warning box for inactive subscriptions - keep light */
html body .admin-user-info [style*="background: #fff3cd"],
body .admin-user-info [style*="background: #fff3cd"] {
    background: #fff3cd !important;
    color: #333 !important;
}

html body .admin-user-info [style*="color: #856404"],
body .admin-user-info [style*="color: #856404"] {
    color: #856404 !important;
}

/* Failed/error rows - keep light pink */
html body .admin-user-info tr[style*="background: #ffebee"],
body .admin-user-info tr[style*="background: #ffebee"] {
    background: #ffebee !important;
}

html body .admin-user-info tr[style*="background: #ffebee"] td,
body .admin-user-info tr[style*="background: #ffebee"] td {
    color: #333 !important;
}

/* Cancelled rows - keep light yellow */
html body .admin-user-info tr[style*="background: #fff8e1"],
body .admin-user-info tr[style*="background: #fff8e1"] {
    background: #fff8e1 !important;
}

html body .admin-user-info tr[style*="background: #fff8e1"] td,
body .admin-user-info tr[style*="background: #fff8e1"] td {
    color: #333 !important;
}

/* Online users list styling */
html body .elgg-list-users .elgg-item,
body .elgg-list-users .elgg-item,
.elgg-list-users .elgg-item {
    background-color: rgba(29, 37, 65, 0.8) !important;
    border-bottom: 1px solid rgba(200, 200, 220, 0.15) !important;
}

html body .elgg-list-users .elgg-item a,
body .elgg-list-users .elgg-item a,
.elgg-list-users .elgg-item a {
    color: #c9b8ff !important;
}

html body .elgg-list-users .elgg-item a:hover,
body .elgg-list-users .elgg-item a:hover,
.elgg-list-users .elgg-item a:hover {
    color: #00d4aa !important;
}

/* ============================================
   GLOBAL TABLE FIXES - ELGG TABLES
   Overrides components.php odd/even row colors
   ============================================ */

/* Table base styling */
html body .elgg-table,
body .elgg-table,
.elgg-table {
    background-color: rgba(29, 37, 65, 0.95) !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
}

/* Table header */
html body .elgg-table th,
body .elgg-table th,
.elgg-table th {
    background-color: rgba(21, 27, 45, 0.95) !important;
    color: #c9b8ff !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
}

/* Table cells */
html body .elgg-table td,
body .elgg-table td,
.elgg-table td {
    color: #e8e4f0 !important;
    border-color: rgba(200, 200, 220, 0.15) !important;
}

/* CRITICAL: Override odd rows (1st, 3rd, 5th) - was #fff */
html body .elgg-table tr:nth-child(odd),
html body .elgg-table tr.odd,
body .elgg-table tr:nth-child(odd),
body .elgg-table tr.odd,
.elgg-table tr:nth-child(odd),
.elgg-table tr.odd {
    background-color: rgba(29, 37, 65, 0.95) !important;
}

/* CRITICAL: Override even rows (2nd, 4th, 6th) - was #f0f0f0 */
html body .elgg-table tr:nth-child(even),
html body .elgg-table tr.even,
body .elgg-table tr:nth-child(even),
body .elgg-table tr.even,
.elgg-table tr:nth-child(even),
.elgg-table tr.even {
    background-color: rgba(21, 27, 45, 0.95) !important;
}

/* Table links */
html body .elgg-table a,
body .elgg-table a,
.elgg-table a {
    color: #c9b8ff !important;
}

html body .elgg-table a:hover,
body .elgg-table a:hover,
.elgg-table a:hover {
    color: #00d4aa !important;
}

/* Table-alt styles */
html body .elgg-table-alt,
body .elgg-table-alt,
.elgg-table-alt {
    background-color: rgba(29, 37, 65, 0.95) !important;
}

html body .elgg-table-alt th,
body .elgg-table-alt th,
.elgg-table-alt th {
    background-color: rgba(21, 27, 45, 0.95) !important;
    color: #c9b8ff !important;
}

html body .elgg-table-alt td,
body .elgg-table-alt td,
.elgg-table-alt td {
    color: #e8e4f0 !important;
    border-color: rgba(200, 200, 220, 0.15) !important;
}

html body .elgg-table-alt tr:hover,
body .elgg-table-alt tr:hover,
.elgg-table-alt tr:hover {
    background-color: rgba(40, 50, 80, 0.95) !important;
}

/* ============================================
   MESSAGES PAGE - COMPLETE OVERHAUL
   ============================================ */

/* Messages table container */
html body .messages-container,
body .messages-container,
.messages-container {
    background-color: rgba(29, 37, 65, 0.95) !important;
}

/* Messages header area */
html body .messages-head,
body .messages-head,
.messages-head {
    background: rgba(21, 27, 45, 0.95) !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
    color: #e8e4f0 !important;
}

/* Messages body area */
html body .messages-body,
body .messages-body,
.messages-body {
    background: rgba(29, 37, 65, 0.95) !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
    color: #e8e4f0 !important;
}

/* Message read/unread styling */
html body .message-read,
body .message-read,
.message-read {
    color: #b8b8c8 !important;
}

html body .message-unread,
body .message-unread,
.message-unread,
html body a.message-unread,
body a.message-unread,
a.message-unread {
    color: #00d4aa !important;
    font-weight: bold !important;
}

html body td.message-unread,
body td.message-unread,
td.message-unread {
    background-color: rgba(0, 212, 170, 0.15) !important;
}

/* Message head info */
html body .messages-head-info,
body .messages-head-info,
.messages-head-info {
    color: #e8e4f0 !important;
}

/* Messages buttonbank */
html body .messages-buttonbank,
body .messages-buttonbank,
.messages-buttonbank {
    background-color: transparent !important;
}

/* Generic table fixes for all pages */
html body table,
body table {
    color: #e8e4f0 !important;
}

html body table th,
body table th {
    color: #c9b8ff !important;
}

html body table td,
body table td {
    color: #e8e4f0 !important;
}

/* Bootstrap table striped overrides */
html body .table-striped > tbody > tr:nth-of-type(odd),
body .table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(29, 37, 65, 0.95) !important;
}

html body .table-striped > tbody > tr:nth-of-type(even),
body .table-striped > tbody > tr:nth-of-type(even),
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: rgba(21, 27, 45, 0.95) !important;
}

/* Bootstrap table hover */
html body .table-hover > tbody > tr:hover,
body .table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover {
    background-color: rgba(40, 50, 80, 0.95) !important;
}

/* Bootstrap table general */
html body .table,
body .table,
.table {
    color: #e8e4f0 !important;
}

html body .table > thead > tr > th,
body .table > thead > tr > th,
.table > thead > tr > th {
    background-color: rgba(21, 27, 45, 0.95) !important;
    color: #c9b8ff !important;
    border-color: rgba(200, 200, 220, 0.2) !important;
}

html body .table > tbody > tr > td,
body .table > tbody > tr > td,
.table > tbody > tr > td {
    color: #e8e4f0 !important;
    border-color: rgba(200, 200, 220, 0.15) !important;
}

/* ============================================
   GLOBAL .odd AND .even CLASS OVERRIDES
   These classes are used throughout user listings
   (from 12andus_members/css.php and description.php)
   ============================================ */

/* Override .odd which has background-color: #efefef */
html body .odd,
body .odd,
div.odd,
.odd {
    background-color: transparent !important;
    background: transparent !important;
    color: #e8e4f0 !important;
}

/* Override .even (no background but might inherit) */
html body .even,
body .even,
div.even,
.even {
    background-color: transparent !important;
    background: transparent !important;
    color: #e8e4f0 !important;
}

/* Ensure all text inside .odd and .even is readable */
html body .odd *,
html body .even *,
body .odd *,
body .even *,
.odd *,
.even * {
    color: #e8e4f0 !important;
}

/* Links inside .odd and .even */
html body .odd a,
html body .even a,
body .odd a,
body .even a,
.odd a,
.even a {
    color: #c9b8ff !important;
}

html body .odd a:hover,
html body .even a:hover,
body .odd a:hover,
body .even a:hover,
.odd a:hover,
.even a:hover {
    color: #00d4aa !important;
}

/* User description rows in member listings */
html body .username-gender,
html body .city-description,
html body .languages-comments,
html body .whenvisited,
html body .whenasked,
html body .isfriend,
html body .befriend,
html body .friendpending,
html body .messages,
html body .instagram,
body .username-gender,
body .city-description,
body .languages-comments,
body .whenvisited,
body .whenasked,
body .isfriend,
body .befriend,
body .friendpending,
body .messages,
body .instagram {
    background-color: transparent !important;
    color: #e8e4f0 !important;
}

/* Elgg image blocks containing user info */
html body .elgg-image-block .elgg-body,
body .elgg-image-block .elgg-body,
.elgg-image-block .elgg-body {
    color: #e8e4f0 !important;
}

html body .elgg-image-block .elgg-body a,
body .elgg-image-block .elgg-body a,
.elgg-image-block .elgg-body a {
    color: #c9b8ff !important;
}

/* List containers */
html body .elgg-list,
body .elgg-list,
.elgg-list {
    background-color: transparent !important;
}

html body .elgg-list > li,
body .elgg-list > li,
.elgg-list > li {
    background-color: transparent !important;
    border-color: rgba(200, 200, 220, 0.15) !important;
    color: #e8e4f0 !important;
}

/* Viewed profile lists */
html body #search-results.viewed,
body #search-results.viewed,
#search-results.viewed {
    background-color: transparent !important;
}

html body #search-results.viewed .elgg-item,
body #search-results.viewed .elgg-item,
#search-results.viewed .elgg-item {
    background-color: transparent !important;
    color: #e8e4f0 !important;
}

/* ============================================
   SIDEBAR MODULES (Compose a message box, etc.)
   ============================================ */

/* Sidebar module aside boxes */
html body .elgg-module-aside,
body .elgg-module-aside,
.elgg-module-aside {
    background-color: rgba(29, 37, 65, 0.95) !important;
    border: 1px solid rgba(200, 200, 220, 0.15) !important;
    border-radius: 8px !important;
}

html body .elgg-module-aside > .elgg-head,
body .elgg-module-aside > .elgg-head,
.elgg-module-aside > .elgg-head {
    background-color: rgba(21, 27, 45, 0.95) !important;
    color: #c9b8ff !important;
    border-bottom: 1px solid rgba(200, 200, 220, 0.15) !important;
}

html body .elgg-module-aside > .elgg-head h3,
body .elgg-module-aside > .elgg-head h3,
.elgg-module-aside > .elgg-head h3 {
    color: #c9b8ff !important;
}

html body .elgg-module-aside > .elgg-body,
body .elgg-module-aside > .elgg-body,
.elgg-module-aside > .elgg-body {
    background-color: rgba(29, 37, 65, 0.95) !important;
    color: #e8e4f0 !important;
}

html body .elgg-module-aside .elgg-body *,
body .elgg-module-aside .elgg-body *,
.elgg-module-aside .elgg-body * {
    color: #e8e4f0 !important;
}

html body .elgg-module-aside a,
body .elgg-module-aside a,
.elgg-module-aside a {
    color: #c9b8ff !important;
}

html body .elgg-module-aside a:hover,
body .elgg-module-aside a:hover,
.elgg-module-aside a:hover {
    color: #00d4aa !important;
}

/* Page menu items (like Compose a message) */
html body .elgg-menu-page,
body .elgg-menu-page,
.elgg-menu-page {
    background-color: transparent !important;
}

html body .elgg-menu-page li a,
body .elgg-menu-page li a,
.elgg-menu-page li a {
    color: #c9b8ff !important;
    background-color: rgba(29, 37, 65, 0.8) !important;
    border: 1px solid rgba(200, 200, 220, 0.15) !important;
}

html body .elgg-menu-page li a:hover,
body .elgg-menu-page li a:hover,
.elgg-menu-page li a:hover {
    color: #00d4aa !important;
    background-color: rgba(40, 50, 80, 0.95) !important;
}

/* ============================================
   LIGHT THEME PAGES - Exempt from dark theme
   Pages with .light-theme-page class on body
   ============================================ */

/* Reset all dark theme overrides for light theme pages */
body.light-theme-page,
body.light-theme-page * {
    color: inherit !important;
}

/* Partner dashboard specific colors */
body.partner-dashboard-page {
    background: #f5f6fa !important;
    color: #333 !important;
}

body.partner-dashboard-page .dashboard-header {
    color: white !important;
}

body.partner-dashboard-page .dashboard-header h1,
body.partner-dashboard-page .dashboard-header p {
    color: white !important;
}

body.partner-dashboard-page .stat-card {
    background: white !important;
    color: #333 !important;
}

body.partner-dashboard-page .stat-card h3 {
    color: #666 !important;
}

body.partner-dashboard-page .stat-card .value {
    color: #1a1a2e !important;
}

body.partner-dashboard-page .stat-card.pending .value { color: #f39c12 !important; }
body.partner-dashboard-page .stat-card.approved .value { color: #27ae60 !important; }
body.partner-dashboard-page .stat-card.rejected .value { color: #e74c3c !important; }
body.partner-dashboard-page .stat-card.banned .value { color: #721c24 !important; }
body.partner-dashboard-page .stat-card.purchases .value { color: #3498db !important; }
body.partner-dashboard-page .stat-card.commissions .value { color: #9b59b6 !important; }

body.partner-dashboard-page .filters {
    background: white !important;
}

body.partner-dashboard-page .filters a {
    color: #666 !important;
    background: #f0f0f0 !important;
}

body.partner-dashboard-page .filters a:hover {
    background: #e0e0e0 !important;
}

body.partner-dashboard-page .filters a.active {
    background: #1a1a2e !important;
    color: white !important;
}

html body.partner-dashboard-page .partners-table,
body.partner-dashboard-page .partners-table {
    background: white !important;
}

html body.partner-dashboard-page .partners-table table,
body.partner-dashboard-page .partners-table table {
    color: #333 !important;
}

html body.partner-dashboard-page .partners-table th,
html body.partner-dashboard-page .partners-table table th,
body.partner-dashboard-page .partners-table th {
    background: #f8f9fa !important;
    color: #333 !important;
}

html body.partner-dashboard-page .partners-table td,
html body.partner-dashboard-page .partners-table table td,
body.partner-dashboard-page .partners-table td {
    color: #333 !important;
}

html body.partner-dashboard-page .partners-table select,
body.partner-dashboard-page .partners-table select {
    color: #333 !important;
    background: #fff !important;
}

html body.partner-dashboard-page .partners-table input,
body.partner-dashboard-page .partners-table input {
    color: #333 !important;
    background: #fff !important;
}

html body.partner-dashboard-page .partners-table button,
body.partner-dashboard-page .partners-table button {
    color: #fff !important;
}

body.partner-dashboard-page .partner-info strong {
    color: #333 !important;
}

body.partner-dashboard-page .partner-info .email {
    color: #666 !important;
}

body.partner-dashboard-page .partner-info .social a {
    color: #3498db !important;
}

body.partner-dashboard-page .metrics .metric-label {
    color: #888 !important;
}

body.partner-dashboard-page .metrics .metric-value {
    color: #333 !important;
}

body.partner-dashboard-page .metrics .metric-value.money {
    color: #27ae60 !important;
}

body.partner-dashboard-page .date-info {
    color: #888 !important;
}

body.partner-dashboard-page .funnel-metrics {
    color: #333 !important;
}

body.partner-dashboard-page .discount-url a {
    color: #27ae60 !important;
}

body.partner-dashboard-page .motivation-text {
    color: #666 !important;
}

/* ============================================
   DISCOUNT LANDING PAGE - Preserve intended colors
   ============================================ */

/* Reset cosmic theme overrides for discount pages */
body.discount-landing-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    color: #fff !important;
}

/* Main content should be white text on dark background */
body.discount-landing-page .container {
    color: #fff !important;
}

/* Detail boxes have white backgrounds with dark text */
body.discount-landing-page .detail-box {
    background: #fff !important;
    color: #333 !important;
}

body.discount-landing-page .detail-box *,
body.discount-landing-page .detail-box-content,
body.discount-landing-page .detail-box-content *,
body.discount-landing-page .detail-box-list,
body.discount-landing-page .detail-box-list li {
    color: #333 !important;
}

body.discount-landing-page .detail-box-header {
    color: #fff !important;
}

body.discount-landing-page .detail-box-header * {
    color: #fff !important;
}

/* Price display */
body.discount-landing-page .detail-box-price .original-price {
    color: #888 !important;
}

body.discount-landing-page .detail-box-price .discounted-price {
    color: #27ae60 !important;
}

/* Bonus text */
body.discount-landing-page .detail-box-bonus {
    color: #7b5e3c !important;
}

/* Notice boxes */
body.discount-landing-page .free-reports-notice {
    color: #333 !important;
}

body.discount-landing-page .free-reports-notice * {
    color: inherit !important;
}

/* Input fields in forms */
body.discount-landing-page input[type="text"],
body.discount-landing-page input[type="email"],
body.discount-landing-page input[type="date"],
body.discount-landing-page input[type="time"],
body.discount-landing-page select {
    color: #333 !important;
    background: #fff !important;
    background-color: #fff !important;
}

/* Input field states - focus, active, hover */
body.discount-landing-page input[type="text"]:focus,
body.discount-landing-page input[type="text"]:active,
body.discount-landing-page input[type="text"]:hover,
body.discount-landing-page input[type="text"].working,
body.discount-landing-page input[type="email"]:focus,
body.discount-landing-page input[type="email"]:active,
body.discount-landing-page select:focus,
body.discount-landing-page select:active {
    color: #333 !important;
    background: #fff !important;
    background-color: #fff !important;
}

/* Google autocomplete input field - must override cosmic theme :focus rules */
body.discount-landing-page .google-autocomplete,
body.discount-landing-page .google-autocomplete:focus,
body.discount-landing-page .google-autocomplete:active,
body.discount-landing-page .google-autocomplete:hover,
body.discount-landing-page .google-autocomplete.working,
html body.discount-landing-page .google-autocomplete,
html body.discount-landing-page .google-autocomplete:focus,
html body.discount-landing-page .google-autocomplete:active,
html body.discount-landing-page input[type="text"]:focus,
html body.discount-landing-page input[type="text"]:active,
html body.discount-landing-page input[type="text"]:hover,
html body.discount-landing-page input[type="email"]:focus,
html body.discount-landing-page input[type="email"]:active,
html body.discount-landing-page select:focus,
html body.discount-landing-page select:active,
html body.discount-landing-page .form-control:focus,
html body.discount-landing-page .form-control:active {
    color: #333 !important;
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15) !important;
}

body.discount-landing-page .form-label {
    color: #fff !important;
}

/* Warning and error messages */
body.discount-landing-page .birthdata-warning {
    color: #856404 !important;
}

body.discount-landing-page .error-msg {
    color: #e74c3c !important;
}

/* Birth data form - override cosmic theme's html body .control.birthdata rules */
html body.discount-landing-page .comparewith-bd,
html body.discount-landing-page .comparewith-bd *,
html body.discount-landing-page .control.birthdata,
html body.discount-landing-page .control.birthdata *,
html body.discount-landing-page .control.birthdata label,
html body.discount-landing-page .control.birthdata span,
html body.discount-landing-page .control.birthdata p,
body.discount-landing-page .comparewith-bd,
body.discount-landing-page .comparewith-bd *,
body.discount-landing-page .control.birthdata,
body.discount-landing-page .control.birthdata *,
body.discount-landing-page .control.birthdata label,
body.discount-landing-page .control.birthdata span,
body.discount-landing-page .control.birthdata p {
    color: #333 !important;
}

/* Birth data form selects/dropdowns */
html body.discount-landing-page .comparewith-bd select,
html body.discount-landing-page .control.birthdata select,
html body.discount-landing-page .birthdate select,
html body.discount-landing-page .birthhour select,
html body.discount-landing-page .birthminute select,
body.discount-landing-page .comparewith-bd select,
body.discount-landing-page .control.birthdata select,
body.discount-landing-page .birthdate select,
body.discount-landing-page .birthhour select,
body.discount-landing-page .birthminute select {
    color: #333 !important;
    background: #fff !important;
}

/* Birth data form text inputs */
html body.discount-landing-page .comparewith-bd input[type="text"],
html body.discount-landing-page .control.birthdata input[type="text"],
html body.discount-landing-page .control.city input,
body.discount-landing-page .comparewith-bd input[type="text"],
body.discount-landing-page .control.birthdata input[type="text"],
body.discount-landing-page .control.city input {
    color: #333 !important;
    background: #fff !important;
}

/* City of birth help text */
html body.discount-landing-page .control.city label,
body.discount-landing-page .control.city label {
    color: #333 !important;
}

/* Special bonus text - preserve intended brown color */
html body.discount-landing-page .detail-box-bonus,
html body.discount-landing-page p.detail-box-bonus,
body.discount-landing-page .detail-box-bonus,
body.discount-landing-page p.detail-box-bonus {
    color: #7b5e3c !important;
    background: #fffbe6 !important;
}

/* Email field label */
html body.discount-landing-page p > label,
body.discount-landing-page p > label {
    color: #333 !important;
}

/* NUCLEAR override for discount landing page - ensure all text in detail boxes is dark */
html body.discount-landing-page .detail-box,
html body.discount-landing-page .detail-box *,
html body.discount-landing-page .detail-box-content,
html body.discount-landing-page .detail-box-content *,
html body.discount-landing-page .detail-box p,
html body.discount-landing-page .detail-box label,
html body.discount-landing-page .detail-box span,
html body.discount-landing-page .detail-box div,
html body.discount-landing-page .detail-box ul,
html body.discount-landing-page .detail-box li {
    color: #333 !important;
}

/* Override for birthdata controls INSIDE detail boxes on discount pages */
html body.discount-landing-page .detail-box .control.birthdata,
html body.discount-landing-page .detail-box .control.birthdata *,
html body.discount-landing-page .detail-box .control.birthdata label,
html body.discount-landing-page .detail-box .control.birthdata span,
html body.discount-landing-page .detail-box .control.birthdata p,
html body.discount-landing-page .detail-box .comparewith-bd,
html body.discount-landing-page .detail-box .comparewith-bd * {
    color: #333 !important;
}

/* Select option elements on discount pages */
html body.discount-landing-page select option,
body.discount-landing-page select option {
    color: #333 !important;
    background: #fff !important;
}

/* ============================================
   CUSTOM CITY DROPDOWN ON DISCOUNT PAGES
   ============================================ */

/* Force light theme for city dropdowns on discount landing pages */
html body.discount-landing-page .city-dropdown-google,
body.discount-landing-page .city-dropdown-google,
html body.discount-landing-page .city-dropdown,
body.discount-landing-page .city-dropdown,
.discount-landing-page .city-dropdown-google,
.discount-landing-page .city-dropdown {
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
}

html body.discount-landing-page .city-dropdown-google .city-item,
body.discount-landing-page .city-dropdown-google .city-item,
html body.discount-landing-page .city-dropdown .city-item,
body.discount-landing-page .city-dropdown .city-item,
.discount-landing-page .city-item {
    color: #333 !important;
    background: #fff !important;
    background-color: #fff !important;
    border-bottom: 1px solid #eee !important;
}

html body.discount-landing-page .city-dropdown-google .city-item:hover,
body.discount-landing-page .city-dropdown-google .city-item:hover,
html body.discount-landing-page .city-dropdown .city-item:hover,
body.discount-landing-page .city-dropdown .city-item:hover,
.discount-landing-page .city-item:hover {
    background: #f0f0f0 !important;
    background-color: #f0f0f0 !important;
    color: #333 !important;
}

/* ============================================
   GOOGLE PLACES AUTOCOMPLETE DROPDOWN
   ============================================ */

/* The pac-container is appended to body by Google API, outside normal page structure */
/* General styling for all pages - ensure readable on cosmic dark theme */
.pac-container,
body .pac-container,
html body .pac-container {
    background-color: #1d2541 !important;
    background: #1d2541 !important;
    border: 1px solid #3d4a6a !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    z-index: 10000 !important;
}

.pac-item,
body .pac-item,
html body .pac-item,
.pac-container .pac-item {
    padding: 8px 12px !important;
    color: #e8e4f0 !important;
    background-color: #1d2541 !important;
    background: #1d2541 !important;
    border-top: 1px solid #2d3a5a !important;
    cursor: pointer !important;
}

.pac-item:first-child,
.pac-container .pac-item:first-child {
    border-top: none !important;
}

/* Hover and selected states - DARK background, LIGHT text */
.pac-item:hover,
.pac-item.pac-item-selected,
.pac-item:active,
.pac-item:focus,
body .pac-item:hover,
body .pac-item.pac-item-selected,
html body .pac-item:hover,
html body .pac-item.pac-item-selected,
.pac-container .pac-item:hover,
.pac-container .pac-item.pac-item-selected {
    background-color: #3d4a7a !important;
    background: #3d4a7a !important;
    color: #fff !important;
}

/* City name (query text) */
.pac-item-query,
.pac-item .pac-item-query,
body .pac-item-query,
html body .pac-item-query {
    color: #c9b8ff !important;
    font-weight: 500 !important;
}

/* Secondary text (region, country) */
.pac-item-query + span,
.pac-item span:not(.pac-item-query),
.pac-item .pac-secondary-text,
body .pac-item span,
html body .pac-item span {
    color: #a0a8c0 !important;
}

/* Matched text highlighting */
.pac-matched,
.pac-item .pac-matched,
body .pac-matched,
html body .pac-matched {
    color: #00d4aa !important;
    font-weight: 600 !important;
}

/* Hover state text colors */
.pac-item:hover .pac-item-query,
.pac-item.pac-item-selected .pac-item-query,
.pac-item:hover .pac-matched,
.pac-item.pac-item-selected .pac-matched,
body .pac-item:hover .pac-item-query,
body .pac-item:hover .pac-matched {
    color: #fff !important;
}

.pac-item:hover span,
.pac-item.pac-item-selected span,
body .pac-item:hover span,
html body .pac-item:hover span {
    color: #d0d8f0 !important;
}

/* Google Places icon */
.pac-icon,
.pac-item .pac-icon,
body .pac-icon,
html body .pac-icon {
    filter: brightness(1.5) !important;
}

/* Ensure no white backgrounds anywhere in pac-container */
.pac-container *,
body .pac-container * {
    background-color: transparent !important;
}

.pac-container .pac-item,
body .pac-container .pac-item {
    background-color: #1d2541 !important;
}

.pac-container .pac-item:hover,
.pac-container .pac-item.pac-item-selected,
body .pac-container .pac-item:hover,
body .pac-container .pac-item.pac-item-selected {
    background-color: #3d4a7a !important;
}

/* Discount landing page - use light theme for autocomplete */
body.discount-landing-page ~ .pac-container,
.discount-landing-page .pac-container {
    background-color: #fff !important;
    border: 1px solid #ddd !important;
}

body.discount-landing-page ~ .pac-container .pac-item,
.discount-landing-page .pac-container .pac-item {
    color: #333 !important;
    background-color: #fff !important;
    border-top: 1px solid #eee !important;
}

body.discount-landing-page ~ .pac-container .pac-item:hover,
body.discount-landing-page ~ .pac-container .pac-item.pac-item-selected,
.discount-landing-page .pac-container .pac-item:hover,
.discount-landing-page .pac-container .pac-item.pac-item-selected {
    background-color: #f0f0f0 !important;
    color: #333 !important;
}

body.discount-landing-page ~ .pac-container .pac-item-query,
.discount-landing-page .pac-container .pac-item-query {
    color: #1a1a2e !important;
    font-weight: 600 !important;
}

body.discount-landing-page ~ .pac-container .pac-item span:not(.pac-item-query),
.discount-landing-page .pac-container .pac-item span:not(.pac-item-query) {
    color: #666 !important;
}

body.discount-landing-page ~ .pac-container .pac-icon,
.discount-landing-page .pac-container .pac-icon {
    filter: none !important;
}

/* ============================================
   MESSAGES PAGE - COMPOSE BUTTON FIX
   ============================================ */

/* Title button (Compose a message button at top) */
html body.messages .elgg-button-action,
body.messages .elgg-button-action,
html body.messages .elgg-menu-title a,
body.messages .elgg-menu-title a,
html body.messages .elgg-menu-title .elgg-button,
body.messages .elgg-menu-title .elgg-button {
    color: #fff !important;
    background-color: var(--color-aurora-teal, #00d4aa) !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
}

html body.messages .elgg-button-action:hover,
body.messages .elgg-button-action:hover,
html body.messages .elgg-menu-title a:hover,
body.messages .elgg-menu-title a:hover {
    background-color: #00b894 !important;
    color: #fff !important;
}

/* Messages sidebar menu items */
html body.messages .elgg-menu-page li a,
body.messages .elgg-menu-page li a {
    color: #c9b8ff !important;
    background-color: rgba(29, 37, 65, 0.9) !important;
    border: 1px solid rgba(200, 200, 220, 0.2) !important;
    padding: 10px 15px !important;
    display: block !important;
    border-radius: 6px !important;
    margin-bottom: 5px !important;
}

html body.messages .elgg-menu-page li a:hover,
body.messages .elgg-menu-page li a:hover {
    color: #00d4aa !important;
    background-color: rgba(40, 50, 80, 0.95) !important;
}

/* Sidebar module in messages - ensure visibility */
html body.messages .elgg-sidebar,
body.messages .elgg-sidebar,
html body.messages .elgg-module-aside,
body.messages .elgg-module-aside {
    background-color: rgba(21, 27, 45, 0.95) !important;
}

html body.messages .elgg-sidebar *,
body.messages .elgg-sidebar * {
    color: #e8e4f0 !important;
}

html body.messages .elgg-sidebar a,
body.messages .elgg-sidebar a {
    color: #c9b8ff !important;
}

html body.messages .elgg-sidebar a:hover,
body.messages .elgg-sidebar a:hover {
    color: #00d4aa !important;
}

/* ============================================
   BLOG/ARTICLES PAGE - ADD BLOG POST BUTTON FIX
   ============================================ */

/* Title button (Add blog post button at top) */
html body.blog .elgg-button-action,
body.blog .elgg-button-action,
html body.blog .elgg-menu-title a,
body.blog .elgg-menu-title a,
html body.blog .elgg-menu-title .elgg-button,
body.blog .elgg-menu-title .elgg-button {
    color: #fff !important;
    background-color: var(--color-aurora-teal, #00d4aa) !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
}

html body.blog .elgg-button-action:hover,
body.blog .elgg-button-action:hover,
html body.blog .elgg-menu-title a:hover,
body.blog .elgg-menu-title a:hover {
    background-color: #00b894 !important;
    color: #fff !important;
}

/* ============================================
   NOTIFICATIONS PAGE - YES/NO BUTTON TOGGLE FIX
   ============================================ */

/* Button group styling for notification options */
html body .notifications-form .btn-group,
body .notifications-form .btn-group,
html body .notification-personal .btn-group,
body .notification-personal .btn-group {
    display: flex !important;
    width: 100% !important;
}

/* Default state for notification buttons */
html body .notifications-form .btn-default,
body .notifications-form .btn-default,
html body .notification-personal .btn-default,
body .notification-personal .btn-default,
html body .notifications-form .btn-group .btn,
body .notifications-form .btn-group .btn {
    background-color: rgba(29, 37, 65, 0.8) !important;
    border: 2px solid rgba(201, 184, 255, 0.4) !important;
    color: #9ca3b0 !important;
    transition: all 0.25s ease !important;
}

/* Active/Selected state - clearly highlighted */
html body .notifications-form .btn-default.active,
body .notifications-form .btn-default.active,
html body .notification-personal .btn-default.active,
body .notification-personal .btn-default.active,
html body .notifications-form .btn-group .btn.active,
body .notifications-form .btn-group .btn.active {
    background-color: var(--color-aurora-teal, #00d4aa) !important;
    border-color: var(--color-aurora-teal, #00d4aa) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 0 12px rgba(0, 212, 170, 0.4) !important;
}

/* Hover state for non-active buttons */
html body .notifications-form .btn-default:hover:not(.active),
body .notifications-form .btn-default:hover:not(.active),
html body .notifications-form .btn-group .btn:hover:not(.active),
body .notifications-form .btn-group .btn:hover:not(.active) {
    background-color: rgba(201, 184, 255, 0.15) !important;
    border-color: #c9b8ff !important;
    color: #e8e4f0 !important;
}

/* Notification labels */
html body .notifications-form label,
body .notifications-form label,
html body .notification-personal label,
body .notification-personal label {
    color: #e8e4f0 !important;
}

/* "Don't Send Any Emails" section - override light background */
html body div.notification-notifications_gdpr_none,
body div.notification-notifications_gdpr_none,
div.notification-notifications_gdpr_none {
    background-color: rgba(29, 37, 65, 0.9) !important;
    border: 2px solid rgba(255, 107, 157, 0.5) !important;
    border-radius: 8px !important;
    padding: 15px !important;
}

html body div.notification-notifications_gdpr_none label,
body div.notification-notifications_gdpr_none label,
div.notification-notifications_gdpr_none label {
    color: #ff6b9d !important;
    font-weight: 600 !important;
}

html body div.notification-notifications_gdpr_none *,
body div.notification-notifications_gdpr_none *,
div.notification-notifications_gdpr_none * {
    color: #e8e4f0 !important;
}

/* ============================================
   PAYMENT HISTORY TYPE BADGES (admin_extras.php)
   Keep inline styles - don't override with dark theme
   The payment history panels should stay light for readability
   ============================================ */

/* No dark theme overrides for badges - let inline styles work */

/* ============================================
   USER LISTING .odd ROWS - STRONGEST OVERRIDE
   This MUST override 12andus_members/css.php
   ============================================ */

/* Target the specific div classes used in user listings */
html body div.odd.username-gender,
html body div.odd.city-description,
html body div.odd.languages-comments,
html body div.odd.whenvisited,
html body div.odd.whenasked,
html body div.odd.isfriend,
html body div.odd.befriend,
html body div.odd.friendpending,
html body div.odd.messages,
html body div.odd.instagram,
body div.odd.username-gender,
body div.odd.city-description,
body div.odd.languages-comments,
body div.odd.whenvisited,
body div.odd.whenasked,
body div.odd.isfriend,
body div.odd.befriend,
body div.odd.friendpending,
body div.odd.messages,
body div.odd.instagram {
    background-color: transparent !important;
    background: none !important;
    color: #e8e4f0 !important;
}

/* Same for even rows */
html body div.even.username-gender,
html body div.even.city-description,
html body div.even.languages-comments,
html body div.even.whenvisited,
html body div.even.whenasked,
html body div.even.isfriend,
html body div.even.befriend,
html body div.even.friendpending,
html body div.even.messages,
html body div.even.instagram,
body div.even.username-gender,
body div.even.city-description,
body div.even.languages-comments,
body div.even.whenvisited,
body div.even.whenasked,
body div.even.isfriend,
body div.even.befriend,
body div.even.friendpending,
body div.even.messages,
body div.even.instagram {
    background-color: transparent !important;
    background: none !important;
    color: #e8e4f0 !important;
}

/* Generic .odd class with highest specificity */
html body .elgg-list .elgg-item div.odd,
html body .elgg-body div.odd,
html body .elgg-image-block div.odd,
body .elgg-list .elgg-item div.odd,
body .elgg-body div.odd,
body .elgg-image-block div.odd {
    background-color: transparent !important;
    background: none !important;
    color: #e8e4f0 !important;
}

html body .elgg-list .elgg-item div.even,
html body .elgg-body div.even,
html body .elgg-image-block div.even,
body .elgg-list .elgg-item div.even,
body .elgg-body div.even,
body .elgg-image-block div.even {
    background-color: transparent !important;
    background: none !important;
    color: #e8e4f0 !important;
}

/* ============================================
   ADMIN EXTRAS / PAYMENT HISTORY TABLES
   Preserve light theme inline styles for admin panels
   ============================================ */

/* Payment history section - preserve light backgrounds */
#payment-history-wrapper,
[id^="payment-history-"] {
    background-color: #fff !important;
    color: #333 !important;
}

[id^="payment-history-"] table {
    color: #333 !important;
}

[id^="payment-history-"] table th,
[id^="payment-history-"] table td {
    color: #333 !important;
}

[id^="payment-history-"] table thead tr {
    background: #f5f5f5 !important;
}

/* Type badge styling - ensure contrast is preserved */
[id^="payment-history-"] table td span[style*="background"],
[id^="payment-history-"] span[style*="border-radius: 3px"] {
    /* Let inline styles take precedence */
    color: inherit;
}

/* Active subscriptions section - preserve green theme */
div[style*="background: #e8f5e9"],
div[style*="background:#e8f5e9"] {
    background: #e8f5e9 !important;
    color: #333 !important;
}

div[style*="background: #e8f5e9"] table,
div[style*="background:#e8f5e9"] table,
div[style*="background: #e8f5e9"] table th,
div[style*="background:#e8f5e9"] table th,
div[style*="background: #e8f5e9"] table td,
div[style*="background:#e8f5e9"] table td {
    color: #333 !important;
}

div[style*="background: #e8f5e9"] strong,
div[style*="background:#e8f5e9"] strong {
    color: #2e7d32 !important;
}

/* Debug section in admin panels */
div[style*="background: #f5f5f5"] {
    background: #f5f5f5 !important;
    color: #666 !important;
}

div[style*="background: #f5f5f5"] code {
    color: #333 !important;
}

/* Warning panels */
div[style*="background: #fff3cd"] {
    background: #fff3cd !important;
    color: #333 !important;
}

div[style*="background: #fff3cd"] strong {
    color: #856404 !important;
}

/* Failed/error rows */
tr[style*="background: #ffebee"],
tr[style*="background:#ffebee"] {
    background: #ffebee !important;
}

tr[style*="background: #ffebee"] td,
tr[style*="background:#ffebee"] td {
    color: #333 !important;
}

/* Cancelled rows */
tr[style*="background: #fff8e1"],
tr[style*="background:#fff8e1"] {
    background: #fff8e1 !important;
}

tr[style*="background: #fff8e1"] td,
tr[style*="background:#fff8e1"] td {
    color: #333 !important;
}

/* ============================================
   CKEDITOR DARK THEME
   ============================================ */

.cke,
.cke_inner,
.cke_top,
.cke_bottom,
.cke_contents,
.cke_wysiwyg_frame,
.cke_wysiwyg_div,
.cke_editable,
.cke_panel,
.cke_dialog,
.cke_dialog_body {
    background-color: var(--color-surface-dark) !important;
    color: var(--color-text-primary) !important;
}

/* CKEditor toolbar */
.cke_toolbar,
.cke_toolgroup {
    background: rgba(29, 37, 65, 0.95) !important;
    border-color: var(--color-glass-border) !important;
}

.cke_button,
.cke_button__bold,
.cke_button__italic {
    filter: invert(1) !important;
}

/* CKEditor editable content area */
.cke_editable {
    background-color: var(--color-surface-dark) !important;
    color: var(--color-text-primary) !important;
}

iframe.cke_wysiwyg_frame {
    background-color: var(--color-surface-dark) !important;
}

/* CKEditor body inside iframe needs special handling */
.cke_editable_themed {
    background-color: #0d1321 !important;
    color: #e8e4f0 !important;
}

/* ============================================
   VACAROUSEL / VISITED-ASKED TOGGLE BUTTONS
   ============================================ */

#vaCarousel .nav {
    background: rgba(29, 37, 65, 0.95) !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

#vaCarousel .nav li {
    margin: 2px !important;
}

#vaCarousel .nav li a {
    color: var(--color-text-secondary) !important;
    background: transparent !important;
    border-radius: 6px !important;
    padding: 10px 15px !important;
    transition: all 0.2s ease !important;
}

#vaCarousel .nav li a:hover {
    color: var(--color-text-primary) !important;
    background: rgba(200, 200, 220, 0.1) !important;
}

/* Active state - make it clearly visible */
#vaCarousel .nav li.active a,
#vaCarousel .nav li.active a:hover,
#vaCarousel .nav li.active a:focus {
    background: var(--color-aurora-teal) !important;
    color: #0a0a12 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 10px rgba(0, 212, 170, 0.3) !important;
}

/* ============================================
   MEMBERS PAGE NAV TABS - Active State
   ============================================ */

/* Members page navigation tabs - active state with green background */
.nav-members li.active > a,
.nav-members li.active > a:hover,
.nav-members li.active > a:focus,
.nav-wizard li.active > a,
.nav-wizard li.active > a:hover,
.nav-wizard li.active > a:focus {
    background: linear-gradient(135deg, #00d4aa, #00e6c3) !important;
    background-color: #00d4aa !important;
    color: #0a0a12 !important;
    font-weight: 600 !important;
    border-color: #00d4aa !important;
}

/* Non-active tabs styling */
.nav-members li > a,
.nav-wizard li > a {
    color: var(--color-stardust) !important;
    background-color: var(--color-glass) !important;
    border-color: var(--color-glass-border) !important;
}

.nav-members li > a:hover,
.nav-wizard li > a:hover {
    background-color: var(--color-surface-card) !important;
    color: var(--color-aurora-teal) !important;
}

/* Mobile-specific styling for members nav tabs */
@media (max-width: 768px) {
    .nav-members,
    .nav-wizard {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .nav-members li,
    .nav-wizard li {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    .nav-members li > a,
    .nav-wizard li > a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 12px 15px !important;
    }

    .nav-members li.active > a,
    .nav-wizard li.active > a {
        background: linear-gradient(135deg, #00d4aa, #00e6c3) !important;
        color: #0a0a12 !important;
        font-weight: 600 !important;
    }
}

/* ============================================
   GLOBAL MOBILE FULL-WIDTH FIX
   ============================================ */

@media (max-width: 768px) {
    /* Force full-width containers on mobile */
    body .container,
    body .container-fluid,
    html body .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }

    body .col-md-12,
    body .col-sm-12,
    body .col-xs-12,
    body [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Saved readings specific fixes */
    body .saved-readings-page,
    body .saved-qa-page {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;
    }

    body .saved-reading-item,
    body .saved-qa-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Force the layout's outer container to be full width on saved-readings page */
    body.report section > .container,
    body.report section .container,
    body section > .container:has(.saved-readings-page),
    body section > .container:has(.saved-qa-page),
    section > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Additional fix: Override Bootstrap container on all screens for saved pages */
body.report section > .container:has(.saved-readings-page),
body.report section > .container:has(.saved-qa-page) {
    width: 100% !important;
    max-width: 100% !important;
}

/* Full width page override - uses body class for better browser support */
body.full-width-page .container,
body.full-width-page section > .container,
body.full-width-page .elgg-page-body .container,
body.saved-readings-view .container,
body.saved-readings-view section > .container,
body.saved-readings-view .elgg-page-body .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

body.full-width-page .row,
body.saved-readings-view .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.full-width-page [class*="col-"],
body.saved-readings-view [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

@media (max-width: 768px) {
    body.full-width-page .container,
    body.saved-readings-view .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* ============================================
   PHASE 4: COSMIC ANIMATIONS & MICRO-INTERACTIONS
   ============================================ */

/* ----------------------------------------
   KEYFRAME ANIMATIONS
   ---------------------------------------- */

/* Soft pulsing glow */
@keyframes cosmic-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(201, 184, 255, 0.2),
                    0 0 15px rgba(201, 184, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 15px rgba(201, 184, 255, 0.4),
                    0 0 30px rgba(201, 184, 255, 0.2);
    }
}

/* Gradient shimmer for text */
@keyframes cosmic-shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Subtle floating motion */
@keyframes cosmic-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* Aurora border glow */
@keyframes aurora-border {
    0%, 100% {
        border-color: rgba(201, 184, 255, 0.3);
    }
    33% {
        border-color: rgba(0, 212, 170, 0.4);
    }
    66% {
        border-color: rgba(255, 107, 157, 0.3);
    }
}

/* Fade in animation */
@keyframes cosmic-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide up animation */
@keyframes cosmic-slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icon pulse */
@keyframes cosmic-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Spinning loader */
@keyframes cosmic-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Twinkling star effect */
@keyframes cosmic-twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ----------------------------------------
   CARD HOVER EFFECTS
   ---------------------------------------- */

/* Cards lift and glow on hover */
.elgg-module,
.panel,
.well,
.thumbnail,
.info-thumbnail-link,
.report-bigbuttons .info-thumbnail-link,
.saved-qa-item,
.saved-reading-item,
.chatbot-card,
.wisdom-path-card {
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease !important;
}

.elgg-module:hover,
.panel:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(201, 184, 255, 0.15) !important;
}

/* Disable hover transform on cards with dropdowns to prevent visual glitches */
.thumbnail:hover,
.info-thumbnail-link:hover,
.report-bigbuttons .info-thumbnail-link:hover {
    /* Only subtle shadow, no transform - prevents issues with dropdowns */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Featured/premium cards get aurora border on hover */
.card-premium:hover,
.featured-card:hover,
.featured:hover {
    animation: aurora-border 3s ease infinite !important;
}

/* ----------------------------------------
   BUTTON ANIMATIONS
   ---------------------------------------- */

/* All buttons get smooth transitions */
.btn,
.elgg-button,
button,
input[type="submit"],
input[type="button"] {
    transition: all 0.25s ease !important;
    position: relative;
    overflow: hidden;
}

/* Primary/Success buttons glow on hover */
.btn-primary:hover,
.btn-success:hover,
.elgg-button-submit:hover,
button[type="submit"]:hover {
    box-shadow: 0 4px 20px rgba(0, 212, 170, 0.4),
                0 0 30px rgba(0, 212, 170, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* Action buttons (secondary) */
.btn-info:hover,
.btn-lead:hover,
.elgg-button-action:hover {
    box-shadow: 0 4px 20px rgba(201, 184, 255, 0.3),
                0 0 20px rgba(201, 184, 255, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Danger buttons */
.btn-danger:hover,
.elgg-button-delete:hover {
    box-shadow: 0 4px 20px rgba(255, 71, 87, 0.4),
                0 0 20px rgba(255, 71, 87, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* ----------------------------------------
   LINK ANIMATIONS
   ---------------------------------------- */

/* Animated underline for links */
article a,
.elgg-output a {
    position: relative;
}

article a::after,
.elgg-output a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--color-aurora-teal),
        var(--color-stardust));
    transition: width 0.3s ease;
}

article a:hover::after,
.elgg-output a:hover::after {
    width: 100%;
}

/* ----------------------------------------
   FORM FOCUS ANIMATIONS
   ---------------------------------------- */

/* Input focus glow */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
    transition: border-color 0.3s ease,
                box-shadow 0.3s ease,
                background-color 0.3s ease !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-stardust) !important;
    box-shadow: 0 0 0 3px rgba(201, 184, 255, 0.15),
                0 0 20px rgba(201, 184, 255, 0.1) !important;
    outline: none !important;
}

/* ----------------------------------------
   ICON ANIMATIONS
   ---------------------------------------- */

/* Menu icons have subtle glow */
.elgg-menu .fa,
.nav .fa,
.btn .fa {
    transition: text-shadow 0.3s ease, transform 0.3s ease;
}

.elgg-menu a:hover .fa,
.nav a:hover .fa {
    text-shadow: 0 0 10px currentColor;
}

/* Spinning icons for loading states */
.fa-spinner,
.fa-spin,
.loading .fa,
.working .fa {
    animation: cosmic-spin 1s linear infinite !important;
}

/* ----------------------------------------
   SHIMMER TEXT EFFECTS
   ---------------------------------------- */

/* Apply shimmer to special headlines */
.headline-cosmic,
.cosmic-shimmer,
h1.shimmer {
    background: linear-gradient(
        90deg,
        var(--color-solar-gold) 0%,
        var(--color-aurora-pink) 25%,
        var(--color-stardust) 50%,
        var(--color-aurora-pink) 75%,
        var(--color-solar-gold) 100%
    );
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: cosmic-shimmer 8s ease infinite;
}

/* ----------------------------------------
   PAGE LOAD ANIMATIONS
   ---------------------------------------- */

/* Fade in main content */
.elgg-page-body,
.elgg-main,
#mainContent {
    animation: cosmic-fadeIn 0.4s ease-out;
}

/* Staggered card entrance */
.elgg-list > .elgg-item,
.report-bigbuttons .info-thumbnail-link {
    animation: cosmic-slideUp 0.5s ease-out both;
}

.elgg-list > .elgg-item:nth-child(1) { animation-delay: 0.05s; }
.elgg-list > .elgg-item:nth-child(2) { animation-delay: 0.1s; }
.elgg-list > .elgg-item:nth-child(3) { animation-delay: 0.15s; }
.elgg-list > .elgg-item:nth-child(4) { animation-delay: 0.2s; }
.elgg-list > .elgg-item:nth-child(5) { animation-delay: 0.25s; }
.elgg-list > .elgg-item:nth-child(6) { animation-delay: 0.3s; }

.report-bigbuttons .info-thumbnail-link:nth-child(1) { animation-delay: 0.05s; }
.report-bigbuttons .info-thumbnail-link:nth-child(2) { animation-delay: 0.1s; }
.report-bigbuttons .info-thumbnail-link:nth-child(3) { animation-delay: 0.15s; }
.report-bigbuttons .info-thumbnail-link:nth-child(4) { animation-delay: 0.2s; }
.report-bigbuttons .info-thumbnail-link:nth-child(5) { animation-delay: 0.25s; }
.report-bigbuttons .info-thumbnail-link:nth-child(6) { animation-delay: 0.3s; }

/* ----------------------------------------
   DROPDOWN ANIMATIONS
   ---------------------------------------- */

/* Dropdown menu items slide in */
.dropdown-menu {
    animation: cosmic-fadeIn 0.2s ease-out;
}

/* ----------------------------------------
   COSMIC LOADER
   ---------------------------------------- */

/* Custom cosmic loading spinner */
.cosmic-loader {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 20px auto;
}

.cosmic-loader::before,
.cosmic-loader::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.cosmic-loader::before {
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--color-stardust);
    border-right-color: var(--color-aurora-teal);
    animation: cosmic-spin 1s linear infinite;
}

.cosmic-loader::after {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border: 2px solid transparent;
    border-bottom-color: var(--color-aurora-pink);
    border-left-color: var(--color-solar-gold);
    animation: cosmic-spin 0.8s linear infinite reverse;
}

/* ----------------------------------------
   NOTIFICATION ANIMATIONS
   ---------------------------------------- */

/* Alert/notification entrance */
.alert,
.elgg-message,
.elgg-system-message {
    animation: cosmic-slideUp 0.4s ease-out;
}

/* ----------------------------------------
   MODAL ANIMATIONS
   ---------------------------------------- */

/* Modal backdrop fade */
.modal-backdrop {
    transition: opacity 0.3s ease !important;
}

/* Modal content slide up */
.modal.in .modal-dialog,
.modal.fade.in .modal-dialog {
    animation: cosmic-slideUp 0.3s ease-out;
}

/* ----------------------------------------
   TOOLTIP ANIMATIONS
   ---------------------------------------- */

.tooltip {
    animation: cosmic-fadeIn 0.2s ease-out;
}

.tooltip .tooltip-inner {
    background: var(--color-twilight);
    border: 1px solid var(--color-glass-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------
   REDUCED MOTION SUPPORT
   ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .cosmic-loader::before,
    .cosmic-loader::after,
    .fa-spinner,
    .fa-spin {
        animation: none !important;
    }
}