/* OPTIMIZED COLOR PALETTE - Cosmic Workshop */
:root {
    --cosmic-bg: #0a0a1a;
    --cosmic-bg-light: #1a1a2e;
    --cosmic-bg-lighter: #2a2a3e;
    --cosmic-text: hsl(60, 30%, 95%);
    --cosmic-text-muted: hsl(60, 30%, 85%);
    --cosmic-text-light: hsl(60, 30%, 98%);
    --cosmic-primary: #0a5fa0;
    --cosmic-primary-h: 210;
    --cosmic-primary-s: 88%;
    --cosmic-primary-l: 35%;
    --cosmic-secondary: #4a148c;
    --cosmic-secondary-h: 270;
    --cosmic-secondary-s: 75%;
    --cosmic-secondary-l: 30%;
    --cosmic-success: #2e7d32;
    --cosmic-warning: #ffa726;
    --cosmic-danger: #c62828;
    --cosmic-info: #0277bd;
    --cosmic-magic: #9c27b0;
    --cosmic-twilight: #8888cc;
}

/* Fix dark text classes */
.text-dark, .text-black { color: var(--cosmic-text-light) !important; }
.text-muted, .text-secondary { color: var(--cosmic-text-muted) !important; }

/* Ensure all text in cosmic cards is light */
.cosmic-card, .cosmic-card * { color: var(--cosmic-text) !important; }

/* Footer text */
footer, footer * { color: var(--cosmic-text-light) !important; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Sticky navigation */
.cosmic-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Dropdown menus above content */
.dropdown-menu {
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 1050 !important;
}

/* Ensure dropdown toggle and container are above content */
.nav-item.dropdown {
    z-index: 1040;
    position: relative;
}

/* Fix any Bootstrap dropdown positioning issues */
.dropdown, .dropleft, .dropright, .dropup {
    position: relative;
}

/* Ensure main content doesn't overlap nav */
main, .container:not(.cosmic-nav .container) {
    position: relative;
    z-index: 1;
}

/* Focus accessibility */
*:focus { outline: 2px solid var(--cosmic-primary); outline-offset: 2px; }
.btn:focus, .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(79, 195, 247, 0.25); }

/* Mobile optimizations */
@media (max-width: 768px) {
    :root {
        --cosmic-text: hsl(60, 30%, 98%);
        --cosmic-text-muted: hsl(60, 30%, 90%);
    }
    
    /* Better touch targets */
    .btn, .dropdown-toggle, .nav-link {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    /* Stack navigation on mobile */
    .d-flex.flex-wrap {
        flex-direction: column !important;
    }
    
    .dropdown {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .dropdown-toggle {
        width: 100%;
        text-align: left;
    }
    
    .dropdown-menu {
        width: 100%;
    }
    
    /* Hide text, show only icons on very small screens */
    @media (max-width: 480px) {
        .btn span:not(.bi) {
            display: none;
        }
        .btn .bi {
            margin-right: 0 !important;
            font-size: 20px;
        }
    }
}

/* === HIGH-CONTRAST ACCESSIBILITY OVERRIDE === */
/* Add ?highcontrast=1 to URL to enable */
.high-contrast-mode {
    --cosmic-bg: #000000 !important;
    --cosmic-bg-light: #111111 !important;
    --cosmic-bg-lighter: #222222 !important;
    --cosmic-text: #ffffff !important;
    --cosmic-text-muted: #cccccc !important;
    --cosmic-text-light: #ffffff !important;
}

.high-contrast-mode body {
    background: #000000 !important;
    color: #ffffff !important;
}

.high-contrast-mode * {
    color: #ffffff !important;
}

.high-contrast-mode .btn,
.high-contrast-mode .dropdown-toggle,
.high-contrast-mode .nav-link,
.high-contrast-mode .navbar-toggler,
.high-contrast-mode .cosmic-btn,
.high-contrast-mode [class*="btn-outline-"] {
    background-color: #ffff00 !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

.high-contrast-mode .btn:hover,
.high-contrast-mode .dropdown-toggle:hover,
.high-contrast-mode .nav-link:hover {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border: 3px solid #ffff00 !important;
}

/* Force all navigation elements visible */
.high-contrast-mode .cosmic-nav {
    background: #000000 !important;
    border-bottom: 3px solid #ffff00 !important;
    padding: 15px 0 !important;
}

.high-contrast-mode .cosmic-nav * {
    color: #000000 !important;
    background-color: #ffff00 !important;
}

.high-contrast-mode .navbar-toggler-icon {
    background-color: #000000 !important;
    border: 2px solid #ffff00 !important;
}

.high-contrast-mode .cosmic-nav {
    background: #000000 !important;
    border-bottom: 3px solid #ffff00 !important;
}

/* Emergency install button */
.emergency-install-btn {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    background-color: #ffff00 !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    padding: 15px 20px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border-radius: 10px !important;
    box-shadow: 0 0 20px #ffff00 !important;
    text-align: center !important;
}

.emergency-install-btn a {
    color: #000000 !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .emergency-install-btn {
        font-size: 16px !important;
        padding: 12px 16px !important;
        bottom: 10px !important;
        right: 10px !important;
    }
}

/* PWA Install Button (shown via JavaScript) */
.pwa-install-button {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9998 !important;
    background-color: #ffff00 !important;
    color: #000000 !important;
    border: 3px solid #000000 !important;
    padding: 15px 25px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border-radius: 15px !important;
    box-shadow: 0 0 30px #ffff00 !important;
    text-align: center !important;
    cursor: pointer !important;
    display: none; /* Hidden by default, shown via JS */
}

.pwa-install-button.show {
    display: block !important;
}

.high-contrast-mode .pwa-install-button {
    background-color: #ffff00 !important;
    color: #000000 !important;
    border: 4px solid #000000 !important;
    box-shadow: 0 0 40px #ffff00 !important;
}

@media (max-width: 768px) {
    .pwa-install-button {
        bottom: 80px !important; /* Above emergency button */
        font-size: 16px !important;
        padding: 12px 20px !important;
        width: 90% !important;
        max-width: 400px !important;
    }
}

/* === BUTTON COLOR OVERRIDES === */
/* Fix grey buttons with white text – use cosmic theme colors */
.btn-secondary {
    background-color: var(--cosmic-secondary) !important;
    border-color: var(--cosmic-secondary) !important;
    color: var(--cosmic-text) !important;
}
.btn-secondary:hover {
    background-color: hsl(var(--cosmic-secondary-h), var(--cosmic-secondary-s), calc(var(--cosmic-secondary-l) + 10%)) !important;
    border-color: hsl(var(--cosmic-secondary-h), var(--cosmic-secondary-s), calc(var(--cosmic-secondary-l) + 10%)) !important;
    color: var(--cosmic-text) !important;
}
.btn-outline-secondary {
    color: var(--cosmic-secondary) !important;
    border-color: var(--cosmic-secondary) !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover {
    background-color: var(--cosmic-secondary) !important;
    color: var(--cosmic-text) !important;
}

/* === BUTTON PADDING ENFORCEMENT === */
/* Ensure all buttons have at least 10px padding around text */
.btn, .btn-cosmic, .btn-harmony, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-light, .btn-outline-dark, .nav-link, .dropdown-toggle, .badge, .paragon-type, .layer-badge, .band-chip, .api-method {
    padding: 10px 15px !important;
    margin: 5px !important;
}

/* Ensure buttons don't touch each other */
.btn + .btn, .btn-cosmic + .btn-cosmic, .btn-harmony + .btn-harmony {
    margin-left: 10px !important;
}

/* Override Bootstrap small/large button padding */
.btn.btn-sm, .btn-sm {
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
}
.btn.btn-lg, .btn-lg {
    padding: 12px 20px !important;
    font-size: 1.125rem !important;
}

/* === DARK‑ON‑DARK TEXT OVERRIDE === */
/* Replace dark gray text with light text for accessibility */
[style*="color: #666"], [style*="color: #888"], [style*="color: #999"], [style*="color: #aaa"], [style*="color: #bbb"], [style*="color: #ccc"] {
    color: var(--cosmic-text-muted) !important;
}

/* Ensure footer text is visible */
footer, footer * {
    color: var(--cosmic-text-muted) !important;
}

/* Override any inline dark text colors */
.text-dark, .text-black, .text-muted, .text-secondary {
    color: var(--cosmic-text-muted) !important;
}

/* === ADVISOR IMAGES === */
.advisor-img {
    border-radius: 50%;
    border: 3px solid var(--cosmic-primary);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.advisor-row {
    padding: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
}
.advisor-row:hover {
    background: rgba(255,255,255,0.1);
}


/* ===== UNCLASSED BUTTONS ===== */
/* Style buttons missing btn class */
button:not([class*="btn"]):not(.navbar-toggler) {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cosmic-text) !important;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--cosmic-primary) !important;
    border: 1px solid transparent !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

button:not([class*="btn"]):not(.navbar-toggler):hover {
    background-color: hsl(var(--cosmic-primary-h), var(--cosmic-primary-s), calc(var(--cosmic-primary-l) + 10%)) !important;
}

/* ===== CONTAINER FIXES - Added by automated fix ===== */
/* Ensure content fits properly in containers */
.card, .card-body {
    overflow: hidden !important;
}

/* Allow vertical scrolling for fixed-height containers */
.fixed-height-container {
    max-height: 400px;
    overflow-y: auto;
}

/* Prevent text overflow */
.text-container {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure images fit in containers */
.container img, .card img {
    max-width: 100%;
    height: auto;
}

/* Better padding for card bodies */
.card-body {
    padding: 1.5rem !important;
}

/* Minimum height for cards to prevent collapsing */
.card {
    min-height: 180px;
}


/* FIX: Container overflow & layout issues */
.container, .container-fluid {
    overflow-x: hidden !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.card, .cosmic-card {
    overflow: hidden !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}
.card-body {
    overflow: hidden !important;
    padding: 1.25rem !important;
}
img {
    max-width: 100% !important;
    height: auto !important;
}
.card .btn {
    white-space: normal !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
}
.input-group {
    max-width: 100% !important;
    flex-wrap: nowrap !important;
}
.input-group .form-control {
    min-width: 0 !important;
}
@media (max-width: 576px) {
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .col-md-6, .col-lg-4, .col-md-8, .col-md-4 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .card-body {
        padding: 0.75rem !important;
    }
}
.btn-floating, .fixed-bottom, .sticky-bottom {
    position: relative !important;
    bottom: auto !important;
    margin-top: 1rem !important;
}
pre, code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}
.safe-hero {
    padding: 2rem 1rem !important;
}
.planet-card {
    max-width: 100% !important;
    overflow: hidden !important;
}
@media (max-width: 991.98px) {
    .dropdown-menu {
        max-height: none !important;
        overflow-y: visible !important;
    }
    .navbar-nav {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
}


/* ==============================================
   FIX: White text on light Bootstrap backgrounds
   Force dark text inside light-bg elements
   ============================================== */

/* Info/blue backgrounds - force dark text */
.bg-info, .bg-info.bg-opacity-10, .bg-info.bg-opacity-25,
.bg-info.bg-opacity-50, .bg-info *,
.card-header.bg-info, .card-header.bg-info * {
    color: #0a0a1a !important;
}

/* Warning/yellow backgrounds - force dark text */
.bg-warning, .bg-warning *,
.card-header.bg-warning, .card-header.bg-warning *,
.badge.bg-warning, .badge.bg-warning * {
    color: #0a0a1a !important;
}

/* Success/green backgrounds - force dark text */
.bg-success, .bg-success *,
.card-header.bg-success, .card-header.bg-success *,
.badge.bg-success, .badge.bg-success * {
    color: #0a0a1a !important;
}

/* Primary backgrounds */
.bg-primary, .bg-primary *,
.badge.bg-primary, .badge.bg-primary * {
    color: #ffffff !important;
}

/* Alert boxes - force dark text */
.alert-info, .alert-info *,
.alert-warning, .alert-warning *,
.alert-success, .alert-success *,
.alert-danger, .alert-danger * {
    color: #0a0a1a !important;
}
.alert-info a, .alert-warning a, .alert-success a {
    color: #1a1a6e !important;
    font-weight: bold;
}

/* Light/white backgrounds */
.bg-light, .bg-light *,
.bg-white, .bg-white *,
.card.bg-light, .card.bg-light *,
.card.bg-white, .card.bg-white * {
    color: #0a0a1a !important;
}

/* Fix headings inside light backgrounds */
.bg-info h1, .bg-info h2, .bg-info h3, .bg-info h4, .bg-info h5, .bg-info h6,
.bg-warning h1, .bg-warning h2, .bg-warning h3, .bg-warning h4, .bg-warning h5, .bg-warning h6,
.bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6,
.alert-info h1, .alert-info h2, .alert-info h3, .alert-info h4, .alert-info h5, .alert-info h6,
.alert-warning h1, .alert-warning h2, .alert-warning h3, .alert-warning h4, .alert-warning h5, .alert-warning h6,
.alert-success h1, .alert-success h2, .alert-success h3, .alert-success h4, .alert-success h5, .alert-success h6 {
    color: #0a0a1a !important;
}

/* Make icons visible on light backgrounds */
.bg-info .bi, .bg-warning .bi, .bg-success .bi,
.alert-info .bi, .alert-warning .bi, .alert-success .bi {
    color: #0a0a1a !important;
}

/* Override any cosmic-card overrides inside light backgrounds */
.bg-info .cosmic-card, .bg-info .cosmic-card *,
.bg-warning .cosmic-card, .bg-warning .cosmic-card *,
.bg-success .cosmic-card, .bg-success .cosmic-card * {
    color: var(--cosmic-text) !important;
}

/* === FORCE VISIBLE BUTTON TEXT ON DARK BACKGROUND === */
.btn-outline-primary { color: #64b5f6 !important; border-color: #64b5f6 !important; }
.btn-outline-primary:hover { background-color: #64b5f6 !important; color: #000000 !important; }
.btn-outline-secondary { color: #b0bec5 !important; border-color: #b0bec5 !important; }
.btn-outline-secondary:hover { background-color: #b0bec5 !important; color: #000000 !important; }
.btn-outline-success { color: #81c784 !important; border-color: #81c784 !important; }
.btn-outline-success:hover { background-color: #81c784 !important; color: #000000 !important; }
.btn-outline-danger { color: #e57373 !important; border-color: #e57373 !important; }
.btn-outline-danger:hover { background-color: #e57373 !important; color: #000000 !important; }
.btn-outline-warning { color: #ffd54f !important; border-color: #ffd54f !important; }
.btn-outline-warning:hover { background-color: #ffd54f !important; color: #000000 !important; }
.btn-outline-info { color: #4dd0e1 !important; border-color: #4dd0e1 !important; }
.btn-outline-info:hover { background-color: #4dd0e1 !important; color: #000000 !important; }
.btn-outline-light { color: #e0e0e0 !important; border-color: #e0e0e0 !important; background-color: rgba(255,255,255,0.05) !important; }
.btn-outline-light:hover { background-color: #e0e0e0 !important; color: #000000 !important; }
.btn-outline-dark { color: #90a4ae !important; border-color: #90a4ae !important; }
.btn-outline-dark:hover { background-color: #90a4ae !important; color: #000000 !important; }
  /* FORCE WHITE TEXT - User reports black on black */
        .cosmic-nav .nav-link,
        .cosmic-nav .navbar-brand,
        .cosmic-nav .dropdown-toggle,
        .cosmic-nav .dropdown-item,
        .cosmic-nav .dropdown-header,
        .cosmic-nav .bi {
            color: #ffffff !important;
        }
        .cosmic-nav .dropdown-menu {
            background-color: rgba(0, 0, 30, 0.98) !important;
            max-height: 70vh !important;
            overflow-y: auto !important;
        }
        .cosmic-nav .dropdown-item:hover {
            background-color: rgba(79, 195, 247, 0.3) !important;
        }
        /* Sticky navigation */
        .cosmic-nav {
            position: sticky !important;
            top: 0 !important;
            z-index: 1030 !important;
        }