/* ==========================================================================
   CAUSANOVA TENANT DESIGN SYSTEM - EDITION: "STREAMER RGB BATTLESTATION"
   Für Twitch-Streamer, YouTuber, Podcaster, Esports & Gaming-Brands:
   - Echte 360° Chroma-RGB-Wave-Animation (@property --cn-rgb-angle)
   - Elgato Stream-Deck LCD-Keycap-Buttons mit Glas-Reflexion
   - OBS-Studio Broadcast-Header & Twitch-Sub-Alert Read-Only-Boxen
   - Light ("White Custom Watercooled PC") & Dark ("OLED Carbon & Twitch Purple")
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

@property --cn-rgb-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root,
html[data-theme='light'],
html[data-bs-theme='light'] {
    /* --- LIGHT MODE: "WHITE CUSTOM PC BUILD & ICE RGB" --- */
    --cn-primary: #9146ff;          /* Official Twitch Purple */
    --cn-primary-hover: #772ce8;
    --cn-primary-rgb: 145, 70, 255;
    --cn-primary-glow: rgba(145, 70, 255, 0.32);

    --cn-rgb-cyan: #00f5d4;
    --cn-rgb-pink: #ff007f;
    --cn-rgb-lime: #00e676;

    --cn-info: #00b4d8;
    --cn-success: #00c853;
    --cn-warning: #ffab00;
    --cn-danger: #ff1744;

    /* --- SURFACES --- */
    --cn-bg-body: #eef1f8;
    --cn-bg-surface: #ffffff;
    --cn-bg-surface-solid: #ffffff;
    --cn-bg-panel: #f4f6fb;
    --cn-bg-elevated: #e5e9f4;
    --cn-bg-input: #f8faff;
    --cn-bg-readonly: #edf0f9;
    --cn-bg-glass: rgba(255, 255, 255, 0.90);

    /* --- TEXT & BORDERS --- */
    --cn-text-main: #0e0e10;
    --cn-text-secondary: #323239;
    --cn-text-muted: #686875;
    --cn-border-color: rgba(145, 70, 255, 0.28);
    --cn-border-subtle: rgba(0, 180, 216, 0.22);

    /* --- SHADOWS --- */
    --cn-shadow-sm: 0 4px 12px rgba(14, 14, 16, 0.06);
    --cn-shadow-card: 0 22px 50px -12px rgba(145, 70, 255, 0.18);
    --cn-shadow-lg: 0 28px 65px -10px rgba(145, 70, 255, 0.32);

    --cn-font-display: 'Oxanium', system-ui, sans-serif;
    --cn-font-sans: 'Inter', system-ui, sans-serif;
    --cn-font-mono: 'JetBrains Mono', monospace;
}

html[data-theme='dark'],
html[data-bs-theme='dark'] {
    /* --- DARK MODE: "OLED CARBON BATTLESTATION & CHROMA RGB" --- */
    --cn-primary: #9146ff;          /* Twitch Purple */
    --cn-primary-hover: #a970ff;
    --cn-primary-rgb: 145, 70, 255;
    --cn-primary-glow: rgba(145, 70, 255, 0.55);

    --cn-rgb-cyan: #00f5ff;
    --cn-rgb-pink: #ff007f;
    --cn-rgb-lime: #39ff14;

    --cn-info: #00f5ff;
    --cn-success: #00e676;
    --cn-warning: #ffea00;
    --cn-danger: #ff1744;

    /* --- SURFACES (TWITCH DARK & CARBON WEAVE) --- */
    --cn-bg-body: #09090b;
    --cn-bg-surface: #121216;
    --cn-bg-surface-solid: #141419;
    --cn-bg-panel: #18181f;
    --cn-bg-elevated: #22222c;
    --cn-bg-input: #0c0c0f;
    --cn-bg-readonly: #16161d;
    --cn-bg-glass: rgba(18, 18, 22, 0.90);

    /* --- TEXT & BORDERS --- */
    --cn-text-main: #efeff1;
    --cn-text-secondary: #adadb8;
    --cn-text-muted: #71717a;
    --cn-border-color: rgba(145, 70, 255, 0.40);
    --cn-border-subtle: rgba(255, 255, 255, 0.08);

    /* --- SHADOWS --- */
    --cn-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.75);
    --cn-shadow-card:
        0 25px 60px -12px rgba(0, 0, 0, 0.92),
        0 0 35px -8px rgba(145, 70, 255, 0.30);
    --cn-shadow-lg:
        0 30px 75px -10px rgba(0, 0, 0, 0.95),
        0 0 50px -5px rgba(145, 70, 255, 0.55),
        0 0 70px -15px rgba(0, 245, 255, 0.40);
}

/* ==========================================================================
   KEYFRAME ANIMATIONEN (CHROMA RGB LOOP)
   ========================================================================== */
@keyframes cnChromaSpin {
    0%   { --cn-rgb-angle: 0deg; }
    100% { --cn-rgb-angle: 360deg; }
}

/* ==========================================================================
   1. CARBON-MATTE HINTERGRUND MIT AMBIENT-LED-BACKLIGHT
   ========================================================================== */
body {
    background-color: var(--cn-bg-body) !important;
    background-image:
        radial-gradient(circle at 10% 10%, rgba(145, 70, 255, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 90% 15%, rgba(0, 245, 255, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 50% 95%, rgba(255, 0, 127, 0.12) 0%, transparent 50%),
        radial-gradient(rgba(145, 70, 255, 0.12) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 24px 24px;
    background-attachment: fixed;
    color: var(--cn-text-main) !important;
    font-family: var(--cn-font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cn-font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ==========================================================================
   2. STREAM-DECK NAVBAR & FOOTER MIT CHROMA-UNTERBODENBELEUCHTUNG
   ========================================================================== */
.cn-navbar,
nav.navbar.bg-dark {
    background: var(--cn-bg-glass) !important;
    backdrop-filter: blur(20px);
    border-bottom: 3px solid transparent !important;
    border-image: linear-gradient(90deg, #ff007f, #9146ff, #00f5ff, #00e676, #ffea00, #ff007f) 1 !important;
    box-shadow: 0 8px 30px -6px var(--cn-primary-glow) !important;
    padding: 0.85rem 0 !important;
}

nav.navbar .navbar-brand,
.cn-navbar-brand {
    font-family: var(--cn-font-display);
    font-weight: 800;
    font-size: 1.28rem;
    letter-spacing: 0.04em;
    color: var(--cn-text-main) !important;
}

nav.navbar .navbar-brand::before,
.cn-navbar-brand::before {
    content: "🎙️ ";
}

nav.navbar .collapse.navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    justify-content: flex-end;
    gap: 0.6rem;
}

.cn-footer,
footer.footer.bg-black {
    background-color: var(--cn-bg-surface) !important;
    color: var(--cn-text-muted) !important;
    border-top: 1px solid var(--cn-border-color) !important;
    font-family: var(--cn-font-mono);
}

/* ==========================================================================
   3. JSON-HEILUNG: CHROMA-RGB STREAM-DECK CONTAINER
   ========================================================================== */
main .container.bg-dark,
main .container-fluid.bg-dark,
main .cn-container.bg-dark,
.dynamic-content-wrapper .bg-dark {
    background:
        linear-gradient(180deg, var(--cn-bg-surface-solid), var(--cn-bg-panel)) padding-box,
        conic-gradient(
            from var(--cn-rgb-angle),
            #ff007f,
            #9146ff,
            #00f5ff,
            #00e676,
            #ffea00,
            #ff007f
        ) border-box !important;
    border: 3px solid transparent !important;
    border-radius: 20px !important;
    box-shadow: var(--cn-shadow-card) !important;
    color: var(--cn-text-main) !important;
    padding: 3.5rem 2.6rem 2.5rem 2.6rem !important;
    max-width: 790px;
    position: relative;
    overflow: hidden;
    animation: cnChromaSpin 4.5s linear infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

main .container.bg-dark:focus-within,
.dynamic-content-wrapper .bg-dark:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--cn-shadow-lg) !important;
    animation-duration: 1.8s;
}

/* OBS Broadcast Telemetry Bar oben */
main .container.bg-dark::before,
.dynamic-content-wrapper .bg-dark::before {
    content: "● ON AIR // STREAM DECK OS // BITRATE: 6000 KBPS // 60 FPS";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.45rem 1.35rem;
    font-family: var(--cn-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffffff;
    background: linear-gradient(90deg, var(--cn-primary) 0%, #ff007f 60%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

main .container-fluid.bg-dark {
    max-width: 1420px !important;
}

html[data-theme='light'] main .text-white:not(.btn):not(.badge):not(.input-group-text) {
    color: var(--cn-text-main) !important;
}

html[data-theme='light'] main .text-info {
    color: var(--cn-info) !important;
}

/* Read-Only Felder im Look eines Twitch Sub-Alerts / Chat-Highlights */
main .bg-secondary.border-0 {
    background-color: var(--cn-bg-readonly) !important;
    border: 1px solid var(--cn-border-color) !important;
    border-left: 4px solid var(--cn-primary) !important;
    border-radius: 12px !important;
    padding: 0.85rem 1.15rem !important;
    font-family: var(--cn-font-mono);
    box-shadow: inset 0 0 15px rgba(145, 70, 255, 0.12) !important;
}

/* ==========================================================================
   4. FORMULARE: HOTKEY-LABELS & CHROMA-FOKUS-INPUTS
   ========================================================================== */
.form-label, .cn-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--cn-font-display);
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cn-text-secondary) !important;
    background: var(--cn-bg-panel);
    border: 1px solid var(--cn-border-subtle);
    border-bottom: 2px solid var(--cn-primary);
    padding: 0.2rem 0.7rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.form-label:empty {
    display: none;
}

.form-control, .form-select,
.cn-input, .cn-textarea, .cn-select {
    background-color: var(--cn-bg-input) !important;
    color: var(--cn-text-main) !important;
    border: 1.5px solid var(--cn-border-color) !important;
    border-radius: 12px !important;
    padding: 0.8rem 1.1rem !important;
    font-size: 0.95rem !important;
    font-weight: 500;
    box-shadow: var(--cn-shadow-sm) !important;
    transition: all 0.2s ease;
}

/* Beim Tippen bekommt auch das aktive Eingabefeld einen rotierenden RGB-Rahmen! */
.form-control:focus, .form-select:focus,
.cn-input:focus, .cn-textarea:focus, .cn-select:focus {
    background:
        linear-gradient(var(--cn-bg-surface-solid), var(--cn-bg-surface-solid)) padding-box,
        conic-gradient(from var(--cn-rgb-angle), #ff007f, #9146ff, #00f5ff, #00e676, #ff007f) border-box !important;
    border: 2px solid transparent !important;
    box-shadow: 0 0 22px var(--cn-primary-glow) !important;
    animation: cnChromaSpin 2.5s linear infinite;
    outline: none !important;
}

.form-check.form-switch {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.15rem;
    background-color: var(--cn-bg-panel);
    border: 1px solid var(--cn-border-color);
    border-radius: 12px;
    margin-top: 0.6rem;
    margin-bottom: 1.25rem !important;
}

.form-switch .form-check-input {
    width: 2.9em !important;
    height: 1.5em !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    cursor: pointer;
    border: 1.5px solid var(--cn-border-color);
    background-color: var(--cn-bg-input);
}

.form-switch .form-check-input:checked {
    background-color: var(--cn-primary) !important;
    border-color: var(--cn-rgb-cyan) !important;
    box-shadow: 0 0 15px var(--cn-primary-glow);
}

/* ==========================================================================
   5. ELGATO STREAM-DECK LCD-KEYCAP BUTTONS
   ========================================================================== */
.btn, .cn-btn {
    font-family: var(--cn-font-display);
    font-weight: 700 !important;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.8rem 1.5rem;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-bottom: 4px solid rgba(0, 0, 0, 0.45) !important;
    /* Oberer LCD-Glas-Glanzreflex */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 8px 20px -4px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.45rem 0.95rem !important;
    font-size: 0.8rem !important;
    border-radius: 10px !important;
}

.btn-primary, .cn-btn.btn-primary {
    background: linear-gradient(180deg, #a970ff 0%, #9146ff 50%, #6441a5 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 20px var(--cn-primary-glow) !important;
}

.btn-success {
    background: linear-gradient(180deg, #00e676 0%, #00a152 100%) !important;
    color: #000000 !important;
}

.btn-info {
    background: linear-gradient(180deg, #00f5ff 0%, #0088cc 100%) !important;
    color: #000000 !important;
}

.btn-warning {
    background: linear-gradient(180deg, #ffea00 0%, #ff9100 100%) !important;
    color: #000000 !important;
}

.btn-danger {
    background: linear-gradient(180deg, #ff1744 0%, #b2102f 100%) !important;
    color: #ffffff !important;
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

.btn:active {
    transform: translateY(2px);
    border-bottom-width: 1px !important;
}

/* ==========================================================================
   6. CARDS, DASHBOARD & STREAM-DECK ICON-TILES
   ========================================================================== */
.card, .cn-card {
    background-color: var(--cn-bg-surface) !important;
    color: var(--cn-text-main) !important;
    border: 1.5px solid var(--cn-border-color) !important;
    border-radius: 18px !important;
    box-shadow: var(--cn-shadow-card);
}

.cn-surface-elevated {
    background-color: var(--cn-bg-panel) !important;
    border: 1px solid var(--cn-border-subtle) !important;
    color: var(--cn-text-main) !important;
    border-radius: 14px;
}

.cn-card-interactive {
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.cn-card-interactive:hover {
    transform: translateY(-5px);
    border-color: var(--cn-rgb-cyan) !important;
    box-shadow: var(--cn-shadow-lg) !important;
}

/* Beleuchtete Stream-Deck-Taste als Icon-Box */
.cn-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: linear-gradient(145deg, var(--cn-bg-elevated), var(--cn-bg-input));
    border: 1.5px solid var(--cn-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 15px var(--cn-primary-glow);
    color: var(--cn-primary);
    flex-shrink: 0;
}

.cn-badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35em 0.85em;
    font-family: var(--cn-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 8px;
    background-color: rgba(145, 70, 255, 0.18);
    border: 1px solid var(--cn-primary);
    color: var(--cn-primary);
}

.cn-text-gradient {
    background: linear-gradient(90deg, #ff007f 0%, #9146ff 50%, #00f5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================================================
   7. SCHWEBENDER THEME-SWITCHER (RGB CHROMA FAN / WHEEL)
   ========================================================================== */
button#cn-theme-toggle-btn.cn-theme-switcher {
    position: fixed !important;
    bottom: 26px !important;
    left: 26px !important;
    right: auto !important;
    top: auto !important;
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background:
        linear-gradient(var(--cn-bg-surface-solid), var(--cn-bg-surface-solid)) padding-box,
        conic-gradient(from var(--cn-rgb-angle), #ff007f, #9146ff, #00f5ff, #00e676, #ffea00, #ff007f) border-box !important;
    border: 3px solid transparent !important;
    color: var(--cn-text-main) !important;
    box-shadow: var(--cn-shadow-lg) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    cursor: pointer;
    animation: cnChromaSpin 3s linear infinite;
    transition: transform 0.25s ease;
}

button#cn-theme-toggle-btn.cn-theme-switcher:hover {
    transform: scale(1.14);
}