:root {
    --bg: #121212;
    --surface: #1e1e1e;
    --surface-alt: #2a2a2a;
    --border: #333333;
    --border-strong: #444444;
    --text: #e0e0e0;
    --text-muted: #a0a0a0;
    --accent: #764abc;
    --accent-hover: #5f3a9a;
    --danger: #ff5252;
    --danger-hover: #e04848;
    --success: #4caf50;
    --warning: #faa61a;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --transition: 180ms ease;
}

* {
    box-sizing: border-box;
}

/* Einheitlicher, schmalerer Scrollbalken im gesamten Webpanel (statt des
   hässlichen Standard-Scrollbalkens) - global statt pro Container, damit
   jede scrollbare Stelle (Seite selbst, Tabellen, Textfelder, Modals, Rollen-
   Checkliste, Emoji-Picker etc.) automatisch mit erfasst wird, auch wenn
   spaeter neue hinzukommen. */
html {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--border-strong) transparent; /* Firefox */
}

::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent);
    background-clip: padding-box;
}

html {
    font-size: 100%; /* skaliert mit Browser-/OS-Zoom statt fixer Pixelgroesse */
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: radial-gradient(circle at top, #1a1a1f 0%, var(--bg) 55%);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container {
    position: relative;
    overflow: hidden;
    width: min(1440px, 94vw);
    margin: clamp(1rem, 3vw, 2.5rem) auto;
    background-color: var(--surface);
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
}

.login-box {
    position: relative;
    overflow: hidden;
    width: min(440px, 100%);
    padding: clamp(2rem, 1.5rem + 2vw, 3rem);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    text-align: center;
}

.container::before,
.login-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #a78bfa);
}

h1, h2, h3 {
    margin-top: 0;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.25;
}

h1 {
    font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
}

h2 {
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

p {
    color: var(--text-muted);
}

a {
    color: inherit;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    transition: color var(--transition), transform var(--transition), text-shadow var(--transition);
}

.back-link:hover {
    color: #ffffff;
    transform: translateX(-2px);
    text-shadow: 0 0 10px var(--accent), 0 0 2px var(--accent);
}

.hint-text {
    font-size: 0.875rem;
    margin-top: -0.5rem;
}

/* Wie .hint-text, aber fuer Hinweise/Feedback NACH einem Eingabefeld, Button
   oder Toggle statt direkt unter einer Ueberschrift - dort wuerde der
   negative margin-top von .hint-text in das vorherige Element hineinziehen. */
.field-hint {
    font-size: 0.875rem;
    margin-top: 0.4rem;
    margin-bottom: 0;
}

/* ---- Nav ---- */
nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 1rem;
}

.nav-brand {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.05rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: color var(--transition);
}

.nav-brand:hover {
    color: var(--accent);
}

.nav-link {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition);
}

.nav-link:hover {
    color: var(--accent);
}

.nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.nav-user {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ---- Stat cards ---- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.stat-card {
    background-color: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    transition: border-color var(--transition), transform var(--transition);
}

.stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.stat-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.stat-value {
    display: block;
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

.stat-card-clickable {
    cursor: pointer;
}

.stat-card-hint {
    display: block;
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-top: 0.4rem;
}

/* ---- Status Pills ---- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.85em;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 700;
    white-space: nowrap;
}

.status-online { background: rgba(76, 175, 80, 0.15); color: var(--success); }
.status-offline { background: rgba(255, 82, 82, 0.15); color: var(--danger); }
.status-idle { background: rgba(250, 166, 26, 0.15); color: var(--warning); }
.status-dnd { background: rgba(237, 66, 69, 0.15); color: #ed4245; }

.log-danger { background: rgba(255, 82, 82, 0.15); color: var(--danger); }
.log-success { background: rgba(76, 175, 80, 0.15); color: var(--success); }
.log-warning { background: rgba(250, 166, 26, 0.15); color: var(--warning); }
.log-neutral { background: rgba(160, 160, 160, 0.15); color: var(--text-muted); }

/* ---- Tables ---- */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-top: 1.25rem;
}

table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
}

th, td {
    padding: 0.85rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}

th {
    background-color: var(--surface-alt);
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

tbody tr:last-child td {
    border-bottom: none;
}

.text-center { text-align: center; }
.text-right { text-align: right; }
.col-shrink { width: 1%; white-space: nowrap; }

.fixed-layout { table-layout: fixed; }

tbody tr:hover {
    background-color: var(--surface-alt);
}

.member-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.6em;
    object-fit: cover;
    background-color: var(--surface-alt);
}

.guild-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.6em;
    object-fit: cover;
    background-color: var(--surface-alt);
}

.guild-icon-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

/* ---- Forms ---- */
.input-group {
    margin-bottom: 1.25rem;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

input[type="text"], input[type="password"], input[type="number"], select, textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background-color: var(--surface-alt);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

textarea {
    resize: vertical;
    min-height: 4.5rem;
}

input[type="color"] {
    width: 4rem;
    height: 2.75rem;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background-color: var(--surface-alt);
    cursor: pointer;
}

/* Haessliche native Spinner-Pfeile bei number-Inputs ausblenden - Tippen und
   Pfeiltasten funktionieren weiterhin, nur die sichtbaren Buttons verschwinden. */
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(118, 74, 188, 0.3);
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23a0a0a0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 0.9rem;
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

.member-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-end;
}

.member-controls .input-group {
    flex: 1 1 220px;
    margin-bottom: 0;
}

/* ---- Auto-Mod ---- */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    margin-bottom: 0.9rem;
}

.toggle-row-main {
    font-weight: 700;
    font-size: 1.05rem;
}

.toggle-row-label {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.7rem;
    flex-shrink: 0;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 1.2rem;
    width: 1.2rem;
    left: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent);
    border-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateY(-50%) translateX(1.3rem);
}

.toggle-switch input:focus-visible + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(118, 74, 188, 0.3);
}

.checkbox-row-title {
    display: block;
    font-weight: 700;
    margin-bottom: 0.9rem;
}

/* ---- Ankuendigung: Rollen-Checkliste ---- */
.role-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-height: 12rem;
    overflow-y: auto;
    background-color: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}

.role-checklist-item {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.4rem 0;
    cursor: pointer;
    font-size: 0.9rem;
}

.role-checklist-item input[type="checkbox"] {
    width: 1.05em;
    height: 1.05em;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* ---- Ankuendigung: Format-Auswahl ---- */
.format-radio-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.format-radio-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background-color: var(--surface-alt);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.format-radio-item input[type="radio"] {
    accent-color: var(--accent);
    cursor: pointer;
}

.format-radio-item:has(input:checked) {
    border-color: var(--accent);
    background-color: rgba(118, 74, 188, 0.18);
}

/* ---- Ankuendigung: Datei-Upload ---- */
.file-upload {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-upload-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.65em 1.25em;
    border-radius: var(--radius-sm);
    background-color: var(--surface-alt);
    border: 1px solid var(--border-strong);
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: border-color var(--transition), background-color var(--transition);
}

.file-upload-button:hover {
    border-color: var(--accent);
}

.file-upload-input:focus-visible + .file-upload-button {
    outline: none;
    box-shadow: 0 0 0 3px rgba(118, 74, 188, 0.3);
}

.file-upload-name {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.welcome-banner-preview {
    display: block;
    max-width: 100%;
    max-height: 12rem;
    border-radius: 0.5rem;
    object-fit: cover;
}

/* ---- Reaction Roles: Emoji-Rolle-Zeilen ---- */
.emoji-role-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.emoji-role-row input[type="text"] {
    flex: 1;
    min-width: 0;
}

.emoji-role-row select {
    flex: 2;
    min-width: 0;
}

.emoji-picker-trigger {
    flex: 0 0 auto;
    padding: 0.5rem 0.7rem;
}

/* Grosses, zentriertes Modal (wie .modal-overlay/.modal-container beim
   Mitglieder-Aktions-Fenster) statt eines kleinen, an den Button angedockten
   Popups - robuster gegenueber ueberlagerndem overflow:hidden auf .container
   und bietet genug Platz fuer die Emoji-Auswahl. */
.emoji-picker-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.emoji-picker-container {
    background-color: var(--surface);
    margin: auto;
    padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
    border: 1px solid var(--border-strong);
    width: 90%;
    max-width: 52rem;
    max-height: 80vh;
    border-radius: var(--radius-lg);
    position: relative;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s;
}

.emoji-picker-search {
    width: 100%;
    margin-bottom: 0.75rem;
}

.emoji-picker-body {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.emoji-picker-category {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin: 0.75rem 0 0.4rem;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
    gap: 0.25rem;
}

.emoji-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    font-size: 1.5rem;
    background: transparent;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
}

.emoji-picker-item:hover {
    background: rgba(118, 74, 188, 0.25);
}

.emoji-picker-item img {
    max-width: 28px;
    max-height: 28px;
}


.automod-rule-card {
    background-color: var(--surface-alt);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.automod-rule-card .input-group:last-child,
.automod-rule-card .member-controls:last-child {
    margin-bottom: 0;
}

.automod-rule-card .checkbox-row {
    margin-bottom: 0.9rem;
}

.automod-rule-card .checkbox-row:only-child {
    margin-bottom: 0;
}

/* ---- Server-Uebersicht: gruppierte Feature-Karten (statt einer flachen
   Buttonwand) ---- */
.feature-section {
    margin-bottom: 2rem;
}

.feature-section:last-child {
    margin-bottom: 0.5rem;
}

.feature-section-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 0.85rem;
    font-weight: 700;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: 1rem;
    /* Kein "align-items: start" hier: das liesse jede Karte nur so hoch
       werden wie ihr eigener Text, wodurch Karten mit laengerer Beschreibung
       aus der Reihe fallen. Stattdessen bleibt es beim Grid-Standard
       "stretch" - die Zeilenhoehe richtet sich nach der hoechsten Karte, alle
       anderen werden darauf gestreckt. Ueberlaufender Text (der Grund fuer das
       fruehere "start") kann dabei nicht auftreten, weil die Spurhoehe aus dem
       Inhalt berechnet wird und damit nie kleiner als der Inhalt ist. */
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 1.1rem 1.25rem;
    background-color: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text);
    box-sizing: border-box;
    /* Fuellt die vom Grid vorgegebene Zeilenhoehe wirklich aus - ohne das
       bliebe die Karte in manchen Browsern bei ihrer Inhaltshoehe stehen und
       die Raender waeren wieder unterschiedlich hoch. */
    height: 100%;
    /* Sorgt dafuer, dass die Kacheln auch ueber verschiedene Abschnitte hinweg
       gleich gross wirken: Platz fuer Icon, Titel und drei Zeilen
       Beschreibung. Braucht eine Karte mehr, waechst die ganze Zeile mit. */
    min-height: 9.25rem;
    transition: border-color var(--transition), transform var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    background-color: rgba(118, 74, 188, 0.14);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}

.feature-card-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 0.15rem;
}

.feature-card-title {
    font-weight: 700;
    color: #ffffff;
    font-size: 1rem;
}

.feature-card-desc {
    font-size: 0.83rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ---- Kanal-Auswaehler: Suche nach Name + freie ID-Eingabe ---- */
.channel-picker {
    position: relative;
}

.channel-picker-dropdown {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.3rem);
    left: 0;
    right: 0;
    max-height: 14rem;
    overflow-y: auto;
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.channel-picker-dropdown.open {
    display: block;
}

.channel-picker-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    font-size: 0.92rem;
}

.channel-picker-option:hover {
    background-color: var(--surface-alt);
}

.channel-picker-option-sub {
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.channel-picker-option-rawid {
    color: var(--accent);
    font-weight: 700;
}

.channel-picker-empty {
    padding: 0.6rem 0.9rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ---- Buttons ---- */
button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.75em 1.5em;
    border: none;
    border-radius: var(--radius-sm);
    background-color: var(--accent);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

button:hover, .button:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(118, 74, 188, 0.35);
}

button:active, .button:active {
    transform: translateY(0);
    box-shadow: none;
}

.button-sm {
    font-size: 0.85rem;
    padding: 0.55em 1.1em;
}

.button-lg {
    display: flex;
    width: 100%;
    font-size: 1.05rem;
    padding: 0.9em 1.5em;
    margin-top: 0.5rem;
}

.button-discord {
    background-color: #5865F2;
}

.button-discord:hover {
    background-color: #4752c4;
    box-shadow: 0 8px 18px rgba(88, 101, 242, 0.35);
}

.delete-button {
    background-color: var(--danger);
}

.delete-button:hover {
    background-color: var(--danger-hover);
    box-shadow: 0 8px 18px rgba(255, 82, 82, 0.35);
}

.error-message, .success-message {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
}

.error-message {
    background-color: rgba(255, 82, 82, 0.1);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.success-message {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--success);
    border: 1px solid var(--success);
}

/* ---- Modal Styles ---- */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.modal-container {
    background-color: var(--surface);
    margin: auto;
    padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
    border: 1px solid var(--border-strong);
    width: 90%;
    max-width: 500px;
    border-radius: var(--radius-lg);
    position: relative;
    animation: fadeIn 0.3s;
}

.modal-container-wide {
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.event-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.event-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    padding: 0.6rem 0.75rem;
    background-color: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.event-row .member-avatar {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.event-row-body {
    min-width: 0;
    flex: 1;
}

.event-row-message .event-row-body > div:first-child {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

.event-message-content {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    word-break: break-word;
    white-space: pre-wrap;
}

.modal-close {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 1.75rem;
    font-weight: bold;
    transition: color var(--transition);
}

.modal-close:hover,
.modal-close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
    padding-right: 2rem;
}

.modal-header h2 {
    margin-top: 0;
    margin-bottom: 0.15rem;
    font-size: 1.1rem;
}

.modal-header .member-avatar {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0;
    flex-shrink: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ---- Member-Aktionen-Modal ---- */
.clickable-rows tr {
    cursor: pointer;
}

.mute-badge {
    margin-left: 0.4em;
    font-size: 0.9em;
}

.action-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.action-tab {
    padding: 0.5em 1em;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface-alt);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.action-tab:hover {
    color: var(--text);
    border-color: var(--accent);
}

.action-tab.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.button-neutral {
    background-color: var(--surface-alt);
    border: 1px solid var(--border-strong);
    color: var(--text);
}

.button-neutral:hover {
    background-color: var(--border);
    box-shadow: none;
}

@media (max-width: 520px) {
    .nav-actions {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}

/* ---- DM-Postfach ---- */
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.chat-bubble {
    max-width: min(70%, 32rem);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background-color: var(--surface-alt);
    border: 1px solid var(--border);
}

.chat-in {
    align-self: flex-start;
}

.chat-out {
    align-self: flex-end;
    background-color: rgba(118, 74, 188, 0.18);
    border-color: var(--accent);
}

.chat-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.chat-content {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}

/* ---------- Backups ---------- */

.backup-note {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.1rem;
    margin: 1.25rem 0;
}

.backup-note p {
    margin: 0.35rem 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.backup-note strong {
    color: var(--text);
}

/* Damit ein einzelner Knopf nicht die volle Breite als Block einnimmt */
.backup-inline-form {
    display: inline-block;
    margin: 0;
}

.backup-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.backup-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
}

.backup-card-title {
    font-weight: 600;
    color: var(--text);
}

.backup-card-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.backup-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--accent);
    color: #ffffff;
}

.backup-badge-muted {
    background: var(--surface-alt);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
}

.backup-restore-details {
    margin-top: 0.9rem;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}

.backup-restore-details > summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    transition: color var(--transition), text-shadow var(--transition);
}

.backup-restore-details > summary:hover {
    color: #ffffff;
    text-shadow: 0 0 8px var(--accent);
}

/* Auswahl zwischen "sicher" und "exakt": Radio links, Erklaerung daneben */
.backup-mode-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.backup-mode-row input {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.backup-mode-row strong {
    color: var(--text);
}

.backup-mode-row em {
    color: var(--danger);
    font-style: normal;
}
/* ---------- Server-Kachel auf dem Dashboard ---------- */
/* Ersetzt die frühere Serverliste: der Bot bedient nur noch einen Server. */

.server-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--transition), transform var(--transition);
}

.server-tile:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.server-tile-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.server-tile-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
    border: 1px solid var(--border-strong);
    font-size: 1.3rem;
}

.server-tile-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.server-tile-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.server-tile-meta {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.server-tile-action {
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 600;
}

.server-tile:hover .server-tile-action {
    color: #ffffff;
    text-shadow: 0 0 8px var(--accent);
}