/* ==========================================================================
   Trecker Treck — Custom Event Page Themes
   Applied via .ECP__Shell.theme-{name} when UseCustomLayout is active.
   Each theme overrides --trecker-accent* and sets a TopBar background.
   ========================================================================== */

/* ── Shared custom-layout shell ── */
.ECP__Shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.ECP__TopBar {
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    height: 52px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

.ECP__BackBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    letter-spacing: 0.01em;
    transition: color 0.15s;
}

.ECP__BackBtn:hover {
    text-decoration: none;
    color: rgba(255,255,255,0.85);
}

.ECP__BackBtn svg {
    flex-shrink: 0;
}

.ECP__Main {
    flex: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   Theme 1 — Rally Grün
   ───────────────────────────────────────────────────────────────────────── */
.ECP__Shell.theme-rally-green {
    --trecker-accent:           #52b96b;
    --trecker-accent-hover:     #3da057;
    --trecker-accent-dark:      #2d7a3e;
    --trecker-accent-light:     rgba(82, 185, 107, 0.12);
    --trecker-accent-secondary: #52b96b;
    --trecker-accent-secondary-light: rgba(82, 185, 107, 0.12);
    --trecker-accent-gradient:  linear-gradient(135deg, #52b96b 0%, #2d7a3e 100%);
    --trecker-text-link:        #52b96b;
    --trecker-text-link-hover:  #3da057;
    --trecker-border-focus:     #52b96b;
    --ecp-topbar-bg:            #2d7a3e;
}

/* ─────────────────────────────────────────────────────────────────────────
   Theme 2 — Midnight Dark
   ───────────────────────────────────────────────────────────────────────── */
.ECP__Shell.theme-midnight-dark {
    --trecker-accent:           #e94560;
    --trecker-accent-hover:     #d03050;
    --trecker-accent-dark:      #b02040;
    --trecker-accent-light:     rgba(233, 69, 96, 0.14);
    --trecker-accent-secondary: #e94560;
    --trecker-accent-secondary-light: rgba(233, 69, 96, 0.12);
    --trecker-accent-gradient:  linear-gradient(135deg, #e94560 0%, #b02040 100%);
    --trecker-text-link:        #e94560;
    --trecker-text-link-hover:  #d03050;
    --trecker-border-focus:     #e94560;
    /* force dark backgrounds regardless of user theme */
    --trecker-bg-primary:       #0d0d1a;
    --trecker-bg-secondary:     #16213e;
    --trecker-bg-tertiary:      #1a1a2e;
    --trecker-bg-card:          #16213e;
    --trecker-bg-card-hover:    #1a1a2e;
    --trecker-text-primary:     #f0f0f0;
    --trecker-text-secondary:   #a0a0a0;
    --ecp-topbar-bg:            #0d0d1a;
}

/* ─────────────────────────────────────────────────────────────────────────
   Theme 3 — Gravel Blau
   ───────────────────────────────────────────────────────────────────────── */
.ECP__Shell.theme-gravel-blue {
    --trecker-accent:           #2e86c1;
    --trecker-accent-hover:     #2472a4;
    --trecker-accent-dark:      #1b4f72;
    --trecker-accent-light:     rgba(46, 134, 193, 0.12);
    --trecker-accent-secondary: #2e86c1;
    --trecker-accent-secondary-light: rgba(46, 134, 193, 0.12);
    --trecker-accent-gradient:  linear-gradient(135deg, #2e86c1 0%, #1b4f72 100%);
    --trecker-text-link:        #2e86c1;
    --trecker-text-link-hover:  #2472a4;
    --trecker-border-focus:     #2e86c1;
    --ecp-topbar-bg:            #1b4f72;
}

/* ─────────────────────────────────────────────────────────────────────────
   Theme 4 — Wüsten Orange
   ───────────────────────────────────────────────────────────────────────── */
.ECP__Shell.theme-desert-orange {
    --trecker-accent:           #f0862a;
    --trecker-accent-hover:     #d97020;
    --trecker-accent-dark:      #b7470a;
    --trecker-accent-light:     rgba(240, 134, 42, 0.12);
    --trecker-accent-secondary: #f0862a;
    --trecker-accent-secondary-light: rgba(240, 134, 42, 0.12);
    --trecker-accent-gradient:  linear-gradient(135deg, #f0862a 0%, #b7470a 100%);
    --trecker-text-link:        #f0862a;
    --trecker-text-link-hover:  #d97020;
    --trecker-border-focus:     #f0862a;
    --ecp-topbar-bg:            #b7470a;
}

/* ─────────────────────────────────────────────────────────────────────────
   Theme 5 — Walderde
   ───────────────────────────────────────────────────────────────────────── */
.ECP__Shell.theme-forest-earth {
    --trecker-accent:           #8b6914;
    --trecker-accent-hover:     #755808;
    --trecker-accent-dark:      #5a4510;
    --trecker-accent-light:     rgba(139, 105, 20, 0.12);
    --trecker-accent-secondary: #8b6914;
    --trecker-accent-secondary-light: rgba(139, 105, 20, 0.12);
    --trecker-accent-gradient:  linear-gradient(135deg, #a67c1a 0%, #5a4510 100%);
    --trecker-text-link:        #8b6914;
    --trecker-text-link-hover:  #755808;
    --trecker-border-focus:     #8b6914;
    --ecp-topbar-bg:            #3d5a32;
}

/* Apply TopBar background from theme variable */
.ECP__Shell .ECP__TopBar {
    background: var(--ecp-topbar-bg, #1a1a1a);
}

/* ==========================================================================
   JS-driven custom layout (body.tt-ecp-active)
   EventInfo.razor calls TreckerUtils.applyCustomLayout(true/false) because
   TreckerLayout is SSR-rendered and cannot react to the WASM DI service.
   ========================================================================== */

body.tt-ecp-active .TreckerHeader,
body.tt-ecp-active footer.TreckerFooter,
body.tt-ecp-active .TreckerMobileNavOverlay,
body.tt-ecp-active #trecker-back-to-top {
    display: none !important;
}

/* === Inline TopBar (rendered by EventInfo, fixed at top) === */

.eip-custom-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    z-index: 200;
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
    background: #1a1a1a;
}

.eip-custom-topbar--rally-green   { background: #2d7a3e; }
.eip-custom-topbar--midnight-dark  { background: #0d0d1a; }
.eip-custom-topbar--gravel-blue    { background: #1b4f72; }
.eip-custom-topbar--desert-orange  { background: #b7470a; }
.eip-custom-topbar--forest-earth   { background: #3d5a32; }

/* Offset the page content so it doesn't sit under the fixed topbar */
body.tt-ecp-active .TreckerMain {
    padding-top: 52px;
}