/* Nexpell – Discord Sidebar Widget */

.discord-embed-shell:not(.discord-embed-shell--page) {
    --discord-accent: var(--nx-color-primary, var(--bs-primary, #0d6efd));
    --discord-card: var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg, #fff)));
    --discord-surface: var(--nx-color-card-body-bg, var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg, #fff))));
    --discord-text: var(--nx-color-on-surface, var(--bs-body-color, #212529));
    --discord-muted: var(--nx-color-muted, var(--bs-secondary-color, #6c757d));
    --discord-border: var(--nx-color-card-border, var(--bs-card-border-color, var(--bs-border-color, rgba(0, 0, 0, .175))));
    --discord-shadow: var(--nx-shadow-card, var(--bs-box-shadow, none));

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}





/* =========================================================
 * SERVER INFO
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-server-info {
    display: flex;
    align-items: center;
    gap: .9rem;

    color: var(--discord-text);
    background: var(--discord-card);

    border-bottom: 1px solid var(--discord-border);
}


/* =========================================================
 * HEADER
 * =========================================================
 * Keine eigene Discord-Header-Farbe.
 * .card-header übernimmt vollständig das Design des aktiven Templates.
 */


/* =========================================================
 * SERVER ICON
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-server-icon {
    width: 3.35rem;
    height: 3.35rem;

    display: grid;
    place-items: center;

    flex: 0 0 3.35rem;

    border: 1px solid;
    border-radius: var(--bs-border-radius-lg, .75rem);

    font-size: 1.35rem;
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-server-details {
    min-width: 0;
}


/* =========================================================
 * SERVER NAME
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-server-name {
    margin: 0 0 .45rem;

    overflow: hidden;

    color: var(--discord-text);

    font-size: 1.05rem;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
 * SERVER STATS
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-stat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;

    padding: .28rem .55rem;

    color: var(--discord-muted);
    background: var(--discord-surface);

    border: 1px solid var(--discord-border);
    border-radius: 999px;

    font-size: .7rem;
    font-weight: 700;
}


/* =========================================================
 * STATUS DOTS
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .status-dot {
    width: .45rem;
    height: .45rem;

    display: inline-block;

    border-radius: 50%;
}

.discord-embed-shell:not(.discord-embed-shell--page) .status-dot.online {
    background: #3ca45c;
}

.discord-embed-shell:not(.discord-embed-shell--page) .status-dot.offline {
    background: var(--discord-muted);
    opacity: .65;
}


/* =========================================================
 * CONTENT
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-voice-channels {
    color: var(--discord-text);
    background: var(--discord-surface);
}


/* =========================================================
 * SECTION TITLE
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-section-title {
    display: flex;
    align-items: center;
    gap: .45rem;

    margin: 0 0 .55rem;

    color: var(--discord-muted);

    font-size: .68rem;
    font-weight: 700;

    letter-spacing: .045em;
    text-transform: uppercase;
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-section-title i,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-channel-name i {
    color: var(--discord-accent);
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-members-title {
    margin-top: 1rem;
}


/* =========================================================
 * CHANNEL / MEMBER
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-channel,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-member {
    margin-top: .45rem;
    padding: .55rem .65rem;

    color: var(--discord-text);
    background: var(--discord-card);

    border: 1px solid var(--discord-border);
    border-radius: var(--bs-border-radius, .375rem);
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-channel-name,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-member {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-channel-name,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-member-name {
    min-width: 0;

    overflow: hidden;

    color: var(--discord-text);

    font-size: .78rem;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
 * MEMBER AVATAR
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-member-avatar {
    width: 1.65rem;
    height: 1.65rem;

    display: grid;
    place-items: center;

    flex: 0 0 1.65rem;

    border-radius: var(--bs-border-radius, .375rem);

    object-fit: cover;
}


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

.discord-embed-shell:not(.discord-embed-shell--page) .discord-footer {
    display: flex;
    align-items: center;
    gap: .65rem;

    margin: 0;
    padding: .8rem;

    color: var(--discord-text);
    background: var(--discord-card);

    border-top: 1px solid var(--discord-border);
}


/* =========================================================
 * DISCORD BUTTON
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .btn-discord {
    width: auto;

    flex: 1 1 0;

    min-height: 2.65rem;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;

    font-size: .78rem;
    font-weight: 400 !important;
}


/* =========================================================
 * AUTOMATISCHE HÖHE
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page),
.discord-embed-shell:not(.discord-embed-shell--page) .discord-widget,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-voice-channels,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-members,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-members-section,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-members-list,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-online-members {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-widget,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-panel,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-members-section {
    flex: 0 0 auto !important;
    grid-template-rows: auto !important;
}


/* =========================================================
 * PANEL ABSTAND
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-panel {
    margin-bottom: 1rem !important;
}


/* =========================================================
 * VOICE CHANNELS
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-voice-channels {
    display: block;
    padding: .75rem;
}


/* =========================================================
 * MEMBERS LIST
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-members-list {
    grid-template-columns: 1fr;
}


/* =========================================================
 * SERVER INFO PADDING
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-server-info {
    padding: .65rem .9rem !important;
}


/* =========================================================
 * CHANNEL / MEMBER HEIGHT
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-channel,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-member {
    min-height: 0 !important;
}


/* =========================================================
 * COMPACT
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page)
.discord-compact .discord-server-info {
    padding-top: .4rem !important;
    padding-bottom: .4rem !important;
}

.discord-embed-shell:not(.discord-embed-shell--page)
.discord-compact .discord-channel,
.discord-embed-shell:not(.discord-embed-shell--page)
.discord-compact .discord-member {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}


/* =========================================================
 * MEHR ANZEIGEN
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-toggle-btn {
    min-height: 2.65rem;

    flex: 1 1 0;

    color: var(--bs-btn-color, var(--discord-accent)) !important;
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-toggle-btn:hover,
.discord-embed-shell:not(.discord-embed-shell--page) .discord-toggle-btn:focus {
    color: var(--bs-btn-hover-color, #fff) !important;
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-toggle-btn i {
    color: currentColor !important;
}


/* =========================================================
 * DISCORD ICON
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-server-icon {
    color: #5865f2 !important;

    background: color-mix(
        in srgb,
        #5865f2 10%,
        var(--discord-card)
    ) !important;

    border-color: color-mix(
        in srgb,
        #5865f2 28%,
        var(--discord-border)
    ) !important;
}


/* =========================================================
 * PRIMARY BUTTON
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page)
.btn-discord.btn-primary {
    color: var(--bs-btn-color, #fff) !important;

    background: var(
        --bs-btn-bg,
        var(--bs-primary, #0d6efd)
    ) !important;

    border-color: var(
        --bs-btn-border-color,
        var(--bs-primary, #0d6efd)
    ) !important;
}

.discord-embed-shell:not(.discord-embed-shell--page)
.btn-discord.btn-primary:hover,
.discord-embed-shell:not(.discord-embed-shell--page)
.btn-discord.btn-primary:focus-visible {
    color: var(--bs-btn-hover-color, #fff) !important;

    background: var(
        --bs-btn-hover-bg,
        var(--bs-primary, #0d6efd)
    ) !important;

    border-color: var(
        --bs-btn-hover-border-color,
        var(--bs-primary, #0d6efd)
    ) !important;
}


/* =========================================================
 * MITGLIEDERBEREICH
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page) .discord-members-title {
    display: flex !important;
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-members-list {
    --discord-member-row-height: 30px;

    display: block !important;

    min-height: var(
        --discord-sidebar-reserved-height,
        0px
    ) !important;

    height: auto !important;
    max-height: none !important;

    padding: 0 !important;
    margin: 0 !important;
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-member {
    min-height: var(--discord-member-row-height) !important;
    box-sizing: border-box;
}

.discord-embed-shell:not(.discord-embed-shell--page) .discord-member-placeholder {
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =========================================================
 * HEIGHT WIDGET – BODY
 * ========================================================= */

.discord-panel.nx-height-widget .discord-panel-body {
    display: flex !important;

    flex: 1 1 auto !important;
    flex-direction: column !important;

    min-height: 0 !important;
}


/* =========================================================
 * HEIGHT WIDGET – CONTENT
 * ========================================================= */

.discord-panel.nx-height-widget .discord-voice-channels {
    display: flex !important;

    flex: 1 1 auto !important;
    flex-direction: column !important;

    min-height: 0 !important;
}


/* =========================================================
 * FESTE WIDGET-HÖHE
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page)
.discord-panel.nx-height-widget.nx-height-collapsed {
    display: flex !important;

    flex: 0 0 var(--nx-widget-height) !important;
    flex-direction: column !important;

    height: var(--nx-widget-height) !important;
    min-height: var(--nx-widget-height) !important;
    max-height: var(--nx-widget-height) !important;
}


/* =========================================================
 * HÖHENBERECHNUNG
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page)
.discord-panel.nx-height-widget .discord-panel-body,

.discord-embed-shell:not(.discord-embed-shell--page)
.discord-panel.nx-height-widget .discord-voice-channels,

.discord-embed-shell:not(.discord-embed-shell--page)
.discord-panel.nx-height-widget
.discord-members-list.nx-height-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.discord-embed-shell:not(.discord-embed-shell--page)
.discord-panel.nx-height-widget
.discord-members-list.nx-height-content {
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

/* =========================================================
 * FOOTER – BUTTONS NEBENEINANDER
 * ========================================================= */

.discord-embed-shell:not(.discord-embed-shell--page)
.nx-height-footer {
    display: flex !important;
    align-items: center;
    gap: .65rem;
    flex-wrap: nowrap;
}

.discord-embed-shell:not(.discord-embed-shell--page)
.nx-height-footer .discord-toggle-btn,
.discord-embed-shell:not(.discord-embed-shell--page)
.nx-height-footer .btn-discord {
    flex: 1 1 0;
    width: 50%;
    min-width: 0;
    margin: 0;
}