/* assets/css/header-integration.css */

/* =========================================== */
/* HEADER COMPONENT THEME INTEGRATION */
/* =========================================== */

/* Ensure header component respects theme variables */
mysentimap-header {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1000;
}

/* Override component's hardcoded colors with theme variables */
.msm-header {
    background: var(--header-bg, #09090f) !important;
    border-bottom-color: var(--header-border, #1a1d28) !important;
}

.msm-logo-text {
    color: var(--header-text, #ffffff) !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(0, 0, 0, 0.5) !important;
    background: linear-gradient(to top,
            var(--header-bg, #09090f) 70%,
            transparent 100%) !important;
}

.msm-search-input {
    background: var(--input-bg, rgba(255, 255, 255, 0.08)) !important;
    border-color: var(--input-border, rgba(255, 255, 255, 0.15)) !important;
    color: var(--input-text, #ffffff) !important;
}

.msm-search-input:focus {
    border-color: var(--input-focus-border, #c87941) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-accent-rgb, 200, 121, 65), 0.18) !important;
}

.msm-nav-link {
    background: var(--nav-link-bg, transparent) !important;
    color: var(--nav-link-text, #ffffff) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.15)) !important;
}

.msm-nav-link:hover {
    background: var(--nav-link-hover-bg, #c87941) !important;
    color: var(--nav-link-hover-text, #ffffff) !important;
    border-color: var(--nav-link-hover-bg, #c87941) !important;
}

.msm-account-btn {
    background: var(--nav-link-bg, #c87941) !important;
    color: var(--nav-link-text, #ffffff) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.15)) !important;
}

.msm-account-btn:hover {
    background: var(--nav-link-hover-bg, #ffffff) !important;
    color: var(--nav-link-hover-text, #c87941) !important;
}

.msm-sentiment-banner {
    background: var(--header-bg, #09090f) !important;
    border-bottom-color: var(--header-border, #1a1d28) !important;
}

.msm-community-sentiment {
    background: var(--card-bg, #09090f) !important;
    color: var(--text-color, #ffffff) !important;
    border-bottom-color: var(--border-color, #1a1d28) !important;
}

.msm-community-sentiment h2 {
    color: var(--text-color, #ffffff) !important;
}

.msm-sentiment-disclosure {
    color: var(--text-color, rgba(255, 255, 255, 0.9)) !important;
    opacity: 0.9;
}

/* Theme transitions for smoother switching */
.msm-header,
.msm-logo-text,
.msm-search-input,
.msm-nav-link,
.msm-account-btn,
.msm-sentiment-banner,
.msm-community-sentiment {
    transition: background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

/* Body offset for fixed header (85px) + sentiment bar (60px) */
body {
    padding-top: 145px;
}

/* Force the header to stay on top */
.msm-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

/* =========================================== */
/* LOGOUT BUTTON STYLES - ADD THIS TO END OF FILE */
/* =========================================== */

.logout-button,
.msm-logout-btn {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.3);
    padding: 8px 16px;
    border-radius: 8px;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.logout-button:hover,
.msm-logout-btn:hover {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
    transform: translateY(-1px);
}

.logout-button i,
.msm-logout-btn i {
    font-size: 14px;
}

/* For dropdown version */
.msm-dropdown .logout-button,
.msm-dropdown .msm-logout-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 15px;
    margin: 0;
    color: var(--text-color, #ffffff);
}

.msm-dropdown .logout-button:hover,
.msm-dropdown .msm-logout-btn:hover {
    background: #dc2626;
    color: white;
}

/* Dark mode adjustments */
[data-theme="dark"] .logout-button,
[data-theme="dark"] .msm-logout-btn {
    background: rgba(220, 38, 38, 0.25);
    border-color: rgba(220, 38, 38, 0.5);
    color: #f87171;
}

[data-theme="dark"] .logout-button:hover,
[data-theme="dark"] .msm-logout-btn:hover {
    background: #dc2626;
    color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .logout-button,
    .msm-logout-btn {
        padding: 6px 12px;
        font-size: 12px;
        margin-left: 5px;
    }
}

/* =========================================== */
/* NAME EFFECTS — applied by level unlock      */
/* =========================================== */

@keyframes msm-shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}
@keyframes msm-shimmer-slow {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}
@keyframes msm-rainbow-shift {
    0%   { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* All gradient effects share these clip properties */
.msm-name-effect-gray,
.msm-name-effect-bronze,
.msm-name-effect-silver,
.msm-name-effect-gold,
.msm-name-effect-platinum,
.msm-name-effect-diamond,
.msm-name-effect-rainbow,
.msm-name-effect-obsidian {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Level 2 — Slate: cool grey sweep, earns the right to shine */
.msm-name-effect-gray {
    background: linear-gradient(90deg, #475569, #94a3b8, #cbd5e1, #94a3b8, #475569);
    background-size: 200% auto;
    animation: msm-shimmer-slow 5s linear infinite;
}

/* Level 7 — Bronze: burnished ore, dark depths to bright crest */
.msm-name-effect-bronze {
    background: linear-gradient(90deg, #3d1f0a, #cd7f32, #f0c060, #e8a050, #cd7f32, #3d1f0a);
    background-size: 220% auto;
    animation: msm-shimmer 3.5s linear infinite;
}

/* Level 12 — Silver: polished steel, dark to bright white streak */
.msm-name-effect-silver {
    background: linear-gradient(90deg, #374151, #94a3b8, #e8e8e8, #f8f8f8, #94a3b8, #374151);
    background-size: 220% auto;
    animation: msm-shimmer 2.8s linear infinite;
}

/* Level 23 — Gold: rich gilt, dark amber to blazing gold */
.msm-name-effect-gold {
    background: linear-gradient(90deg, #5c3a08, #c8880e, #ffd700, #ffe566, #c8880e, #5c3a08);
    background-size: 220% auto;
    animation: msm-shimmer 2.2s linear infinite;
}

/* Level 33 Premium — Platinum: liquid mercury, cold and brilliant */
.msm-name-effect-platinum {
    background: linear-gradient(90deg, #4b5563, #c8d0d8, #f0f4f8, #ffffff, #c8d0d8, #4b5563);
    background-size: 220% auto;
    animation: msm-shimmer 2.5s linear infinite;
}

/* Level 42 Premium — Diamond: ice-blue to sapphire to white spark */
.msm-name-effect-diamond {
    background: linear-gradient(90deg, #0369a1, #38bdf8, #e0f2fe, #bae6fd, #818cf8, #38bdf8, #0369a1);
    background-size: 250% auto;
    animation: msm-shimmer 1.8s linear infinite;
}

/* Level 82 Premium / ticks shop rainbow_name_24h */
.msm-name-effect-rainbow {
    background: linear-gradient(90deg, #f43f5e, #f59e0b, #4ade80, #38bdf8, #a78bfa, #f43f5e);
    background-size: 300% auto;
    animation: msm-rainbow-shift 2.8s linear infinite;
}

/* Level 99 Premium — Obsidian: deep void purple, a cold distant star */
.msm-name-effect-obsidian {
    background: linear-gradient(90deg, #0d0020, #4c1d95, #7c3aed, #ddd6fe, #7c3aed, #4c1d95, #0d0020);
    background-size: 300% auto;
    animation: msm-shimmer-slow 4.5s linear infinite;
}