/* ═══ Dashboard Styles ════════════════════════════════════════════ */

.dash-body { background: var(--bg); min-height: 100vh; }

/* ── Loading ─────────────────────────────────────────────────── */
.dash-loading { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:16px;color:var(--text-dim) }
.dash-loading-spinner { width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Login ───────────────────────────────────────────────────── */
.dash-login { display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px }
.dash-login-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:48px 40px;text-align:center;max-width:420px;width:100% }
.dash-login-logo { font-size:1.8rem;font-weight:800;margin-bottom:8px }
.dash-login-logo span { color:var(--accent-light) }
.dash-login-card h1 { font-size:1.4rem;font-weight:700;margin-bottom:8px }
.dash-login-card>p { font-size:.88rem;color:var(--text-dim);margin-bottom:28px;line-height:1.6 }

.discord-login-btn { display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:#5865F2;color:#fff;border-radius:var(--r-sm);font-weight:700;font-size:.95rem;transition:all .25s;text-decoration:none }
.discord-login-btn:hover { background:#4752C4;transform:translateY(-2px);box-shadow:0 6px 24px rgba(88,101,242,.4) }
.back-link { display:block;margin-top:20px;font-size:.82rem;color:var(--text-muted);text-decoration:none;transition:color .2s }
.back-link:hover { color:var(--text) }

/* ── App Layout ──────────────────────────────────────────────── */
.dash-app { display:flex;min-height:100vh }

.dash-sidebar { width:240px;background:var(--bg-card);border-right:1px solid var(--border);padding:20px 16px;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:10 }
.dash-sidebar-logo { font-size:1.2rem;font-weight:800;padding:0 8px 16px;border-bottom:1px solid var(--border);margin-bottom:16px }
.dash-sidebar-logo span { color:var(--accent-light) }

.dash-user { display:flex;align-items:center;gap:10px;padding:10px 8px;margin-bottom:16px;font-size:.85rem;font-weight:600 }
.dash-user img { width:32px;height:32px;border-radius:50% }

.dash-nav { display:flex;flex-direction:column;gap:4px;flex:1 }
.dash-nav-btn { display:flex;align-items:center;gap:8px;padding:10px 12px;background:none;border:1px solid transparent;border-radius:var(--r-sm);color:var(--text-dim);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;text-align:left;font-family:var(--font) }
.dash-nav-btn:hover { background:rgba(255,255,255,.04);color:var(--text) }
.dash-nav-btn.active { background:rgba(110,90,240,.1);border-color:rgba(110,90,240,.2);color:var(--accent-light) }
.dash-nav-btn:disabled { opacity:.4;cursor:not-allowed }

.dash-logout { padding:12px 8px;font-size:.82rem;color:var(--text-muted);text-decoration:none;transition:color .2s;border-top:1px solid var(--border);margin-top:auto }
.dash-logout:hover { color:var(--text) }

.dash-main { flex:1;margin-left:240px;padding:32px 40px }

/* ── Panels ──────────────────────────────────────────────────── */
.dash-panel { display:none }
.dash-panel.active { display:block }
.dash-panel h2 { font-size:1.8rem;font-weight:800;margin-bottom:6px }
.dash-subtitle { font-size:.88rem;color:var(--text-dim);margin-bottom:24px }
.dash-panel-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px }

/* ── Server Grid ─────────────────────────────────────────────── */
.server-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px }
.server-card { display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .3s }
.server-card:hover { border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.3) }
.server-card.selected { border-color:var(--accent);background:rgba(110,90,240,.06) }
.server-icon { width:44px;height:44px;border-radius:14px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden }
.server-icon img { width:100%;height:100%;object-fit:cover }
.server-info { flex:1;overflow:hidden }
.server-name { font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.server-id { font-size:.72rem;color:var(--text-muted);font-family:var(--mono) }
.dash-empty { text-align:center;padding:60px 20px;color:var(--text-dim) }
.dash-empty p { margin-bottom:20px }

/* ── Features Toggle Grid ────────────────────────────────────── */
.features-toggle-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px }
.feature-toggle { display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);transition:all .2s }
.feature-toggle:hover { border-color:rgba(255,255,255,.1) }
.feature-toggle-icon { font-size:1.3rem;flex-shrink:0 }
.feature-toggle-info { flex:1 }
.feature-toggle-name { font-weight:600;font-size:.88rem }
.feature-toggle-desc { font-size:.72rem;color:var(--text-muted) }

/* Toggle switch */
.toggle-switch { position:relative;width:44px;height:24px;flex-shrink:0 }
.toggle-switch input { opacity:0;width:0;height:0 }
.toggle-slider { position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .3s }
.toggle-slider::before { content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .3s }
.toggle-switch input:checked + .toggle-slider { background:var(--green) }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(20px) }

/* ── Mod Settings ────────────────────────────────────────────── */
.mod-settings-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px }
.mod-setting-group { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:22px }
.mod-setting-group h3 { font-size:1rem;font-weight:700;margin-bottom:16px }
.mod-field { margin-bottom:14px }
.mod-field:last-child { margin-bottom:0 }
.mod-field label { display:block;font-size:.78rem;font-weight:600;color:var(--text-dim);margin-bottom:6px }
.mod-field select, .mod-field input { width:100%;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:.88rem;font-family:var(--font);transition:border-color .2s;appearance:none;-webkit-appearance:none }
.mod-field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238a8aa0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px }
.mod-field input[type=number] { -moz-appearance:textfield }
.mod-field input::-webkit-outer-spin-button,.mod-field input::-webkit-inner-spin-button { -webkit-appearance:none }
.mod-field select:focus,.mod-field input:focus { outline:none;border-color:var(--accent) }

/* ── Save toast ──────────────────────────────────────────────── */
.save-toast { position:fixed;bottom:32px;right:32px;padding:14px 24px;background:var(--green);color:#fff;border-radius:var(--r-sm);font-weight:600;font-size:.88rem;z-index:999;transform:translateY(100px);opacity:0;transition:all .4s ease }
.save-toast.show { transform:translateY(0);opacity:1 }

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:768px) {
    .dash-sidebar { width:60px;padding:12px 8px }
    .dash-sidebar-logo,.dash-user span,.dash-nav-btn span,.dash-logout { display:none }
    .dash-nav-btn { justify-content:center;padding:12px }
    .dash-main { margin-left:60px;padding:20px 16px }
    .mod-settings-grid { grid-template-columns:1fr }
    .features-toggle-grid { grid-template-columns:1fr }
    .server-grid { grid-template-columns:1fr }
    .dash-panel-header { flex-direction:column;gap:12px }
}