/**
 * Frontend-Styles für Discord Widget Box
 */

/* === Widget-Container === */
.dwb-widget-box {
    max-width: var(--dwb-max-width, 100%);
    margin: 1.5rem auto;
    background: var(--dwb-bg, #161221);
    border: 2px solid var(--dwb-border, #7B68EE);
    border-radius: 16px;
    padding: 1.5rem;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.dwb-widget-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

/* === Linke Spalte (Bild + Subtitle) === */
.dwb-col-left {
    flex: 0 0 140px;
    text-align: center;
}

.dwb-server-image img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--dwb-border, #7B68EE);
    display: block;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dwb-subtitle {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #ccc;
    line-height: 1.4;
    word-break: break-word;
}

/* === Rechte Spalte (Discord-Infos) === */
.dwb-col-right {
    flex: 1 1 200px;
    min-width: 0;
}

.dwb-server-name {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dwb-online-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #e0e0e0;
}

.dwb-status-dot {
    width: 10px;
    height: 10px;
    background: #3ba55d;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* === Avatar-Grid (ALLE anzeigen, nicht überlappend) === */
.dwb-avatar-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.dwb-avatar-wrap {
    position: relative;
    display: inline-flex;
    transition: transform 0.2s ease;
}

.dwb-avatar-wrap:hover {
    transform: translateY(-4px);
}

.dwb-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--dwb-bg, #161221);
    object-fit: cover;
    display: block;
    background: #2a2338;
}

/* Status-Indikator unten rechts am Avatar */
.dwb-avatar-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--dwb-bg, #161221);
    background: #747f8d; /* offline / fallback */
}

.dwb-status-online::after { background: #3ba55d; }
.dwb-status-idle::after   { background: #faa81a; }
.dwb-status-dnd::after    { background: #ed4245; }
.dwb-status-offline::after{ background: #747f8d; }

/* === "+X" Rest-Bubble (falls Discord mehr online meldet als liefert) === */
.dwb-avatar-more {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px dashed var(--dwb-border, #7B68EE);
    background: rgba(123, 104, 238, 0.2);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
    cursor: default;
    transition: background 0.2s ease;
}

.dwb-avatar-more:hover {
    background: rgba(123, 104, 238, 0.35);
}

/* === Offline-Meldung (Fallback) === */
.dwb-offline-msg {
    font-size: 0.875rem;
    color: #aaa;
    margin: 0 0 1rem;
}

/* === Join-Button === */
.dwb-join-btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    background: var(--dwb-accent, #5865F2);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: filter 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

.dwb-join-btn:hover {
    filter: brightness(1.15);
    color: #fff;
    transform: translateY(-1px);
}

.dwb-join-btn:active {
    transform: translateY(0);
}

/* === Responsive === */
@media (max-width: 480px) {
    .dwb-widget-inner {
        flex-direction: column;
        text-align: center;
    }

    .dwb-col-left {
        flex: 0 0 auto;
    }

    .dwb-col-right {
        width: 100%;
    }

    .dwb-avatar-grid {
        justify-content: center;
    }

    .dwb-join-btn {
        width: 100%;
        text-align: center;
    }
}