/* =======================================================================
   Xixou RDG - Style v40.51
   ======================================================================= */

.xrdg-root, .xrdg-root * { box-sizing: border-box; }

.xrdg-root {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 1600px; margin: 0 auto;
    display: grid; 
    grid-template-columns: 480px 1fr; 
    gap: 30px; align-items: flex-start;
    color: #e2e8f0; line-height: 1.5; position: relative;
}

/* --- IMAGES --- */
.xrdg-root img { max-width: 100% !important; height: auto !important; box-shadow: none !important; margin: 0 !important; display: inline-block; }
.xrdg-icon-box img, .xrdg-char-img, .xrdg-class-item img, .xrdg-detail-char img {
    width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; object-fit: contain; flex-shrink: 0;
}
.xrdg-icon-box-mini img { width: 20px !important; height: 20px !important; }
.xrdg-dropdown-icon { width: 24px !important; height: 24px !important; margin-right: 8px !important; vertical-align: middle; }

/* --- INPUTS --- */
.xrdg-input, .xrdg-select { width: 100%; height: 40px; background: #0f172a; border: 1px solid #475569; color: #fff !important; padding: 0 12px; border-radius: 6px; font-size: 13px; }
/* No arrows on number inputs */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* --- FLEX ROW (ACTIVITE ALIGNMENT) --- */
.xrdg-flex-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; position: relative; }
.xrdg-flex-row .xrdg-select { flex: 0 0 130px; min-width: 130px; }
/* Sub-inputs (hidden by default) */
.sub-dungeon, .sub-zone, .sub-text { flex: 1; margin-top: 0 !important; display: none; }
.sub-dungeon input, .sub-zone input, .sub-text input { width: 100%; }

/* --- AUTOCOMPLETE --- */
.xrdg-dropdown-list { 
    position: absolute; top: 100%; left: 0; width: 100%; 
    background: #0f172a; border: 1px solid #475569; border-radius: 0 0 6px 6px; 
    max-height: 250px; overflow-y: auto; z-index: 100000; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.9); display: none; 
}
.xrdg-dropdown-list.show { display: block; }
.xrdg-dropdown-item { padding: 10px 12px; cursor: pointer; color: #cbd5e1; font-size: 13px; border-bottom: 1px solid #1e293b; display: flex; align-items: center; }
.xrdg-dropdown-item:hover { background: #3b82f6; color: #fff; }

/* --- HEADER & SIDEBAR --- */
.xrdg-intro { grid-column: 1 / -1; text-align: center; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border: 2px solid #b45309; border-radius: 16px; padding: 25px; margin-bottom: 10px; position: relative; overflow: hidden; box-shadow: 0 0 15px rgba(180, 83, 9, 0.2); }
.xrdg-intro h1 { margin: 0; font-size: 28px; text-transform: uppercase; color: #fbbf24; text-shadow: 2px 2px 0 #000; letter-spacing: 1px; }
.xrdg-intro p { color: #e2e8f0; margin: 8px 0 0 0; font-size: 15px; }

.xrdg-sidebar { grid-column: 1; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; background: #1e293b; border: 1px solid #475569; border-radius: 12px; padding: 20px; }
.xrdg-nav { display: flex; gap: 5px; background: #0f172a; padding: 5px; border-radius: 10px; border: 1px solid #334155; overflow-x: auto; white-space: nowrap; }
.xrdg-nav-btn { flex: 1; background: transparent; border: none; color: #94a3b8; padding: 12px 0; font-size: 12px; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 6px; transition: 0.2s; text-align: center; }
.xrdg-nav-btn.active { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.xrdg-nav-btn[data-tab="search"]:hover, .xrdg-nav-btn[data-tab="search"].active { background: #3b82f6; }
.xrdg-nav-btn[data-tab="register"]:hover, .xrdg-nav-btn[data-tab="register"].active { background: #22c55e; }
.xrdg-nav-btn[data-tab="my-ads"]:hover, .xrdg-nav-btn[data-tab="my-ads"].active { background: #fbbf24; color: #0f172a; }
.xrdg-panel { margin-bottom: 20px; }
.xrdg-panel h3 { margin: 0 0 15px 0; font-size: 16px; color: #fbbf24; text-transform: uppercase; border-bottom: 1px solid #334155; padding-bottom: 10px; }
.xrdg-field { margin-bottom: 20px; position: relative; }
.xrdg-field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; color: #cbd5e1; }

/* --- ELEMENTS --- */
.xrdg-radio-group { display: flex; flex-wrap: wrap; gap: 5px; }
.xrdg-radio-label { flex: 1 0 13%; text-align: center; padding: 12px 5px; background: #0f172a; border: 1px solid #334155; border-radius: 6px; color: #94a3b8; font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.xrdg-radio-label.active { color: #fff !important; border-color: transparent; transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index:1; }
.xrdg-radio-label.active[data-val="Terre"] { background: #78350f !important; }
.xrdg-radio-label.active[data-val="Feu"] { background: #dc2626 !important; }
.xrdg-radio-label.active[data-val="Eau"] { background: #1e40af !important; }
.xrdg-radio-label.active[data-val="Air"] { background: #166534 !important; }
.xrdg-radio-label.active[data-val="Multi"] { background: linear-gradient(135deg, #991b1b, #1e40af) !important; }
.xrdg-radio-label.active[data-val="Sagesse"] { background: #7c3aed !important; }
.xrdg-radio-label.active[data-val="Vita"] { background: #7f1d1d !important; }

/* --- DISPO --- */
.xrdg-dispo-row { display: flex; gap: 5px; margin-bottom: 8px; }
.xrdg-chip { flex: 1; background: #0f172a; border: 1px solid #334155; color: #94a3b8; padding: 8px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; text-align: center; transition: 0.2s; }
.xrdg-chip.active { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; }

/* --- SOCIALS --- */
.xrdg-social-row-1line { display: flex; gap: 8px; width: 100%; margin-bottom: 10px; flex-direction: row !important; }
.xrdg-soc-btn { flex: 1; text-decoration: none; background: #1e293b; border: 1px solid #334155; color: #fff; padding: 10px; border-radius: 6px; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: 0.2s; position: relative; min-width: 0; }
.xrdg-soc-btn.disabled { filter: grayscale(100%); opacity: 0.6; cursor: default; border-color: #334155; background: #0f172a; }
.xrdg-soc-btn.discord:not(.disabled), .xrdg-social-toggle.active.discord { background: #5865F2 !important; border-color: #5865F2 !important; color: #fff !important; }
.xrdg-soc-btn.twitch:not(.disabled), .xrdg-social-toggle.active.twitch { background: #9146FF !important; border-color: #9146FF !important; color: #fff !important; }
.xrdg-soc-btn.x:not(.disabled), .xrdg-social-toggle.active.x { background: #000 !important; border-color: #fff !important; color: #fff !important; }
.xrdg-soc-btn.youtube:not(.disabled), .xrdg-social-toggle.active.youtube { background: #FF0000 !important; border-color: #FF0000 !important; color: #fff !important; }
.xrdg-soc-btn.kick:not(.disabled), .xrdg-social-toggle.active.kick { background: #53FC18 !important; border-color: #53FC18 !important; color: #000 !important; }
.xrdg-social-toggle { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; color: #475569; border-radius: 6px; background: #0f172a; border: 1px solid #334155; transition: 0.2s; }
.xrdg-social-toggle:hover { background: #334155; }
.soc-cross { color: #ef4444; font-weight: 800; margin-left: 5px; font-size: 14px; }

/* --- SERVER --- */
.xrdg-srv-container { display: flex; gap: 8px; }
.xrdg-srv-btn { flex: 1; background: #1e293b; border: 2px solid #334155; color: #cbd5e1; padding: 12px 5px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; transition: 0.2s; text-transform: uppercase; text-align: center; }
.xrdg-srv-btn.active { color: #fff; border-color: #fbbf24; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.xrdg-srv-btn[data-val="Fallanster"].active { background: #7c2d12 !important; }
.xrdg-srv-btn[data-val="Boune"].active { background: #581c87 !important; }
.xrdg-srv-btn[data-val="Allisteria"].active { background: #1e3a8a !important; }

/* --- CHARACTERS & CLASSES --- */
.xrdg-char-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 350px; overflow-y: auto; background: #0f172a; padding: 10px; border-radius: 8px; border: 1px solid #334155; }
.xrdg-char-card { background: #1e293b; border: 1px solid #374151; border-radius: 8px; padding: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; position:relative; transition: 0.2s; max-width: 100%; pointer-events: auto !important; }
.xrdg-char-card:hover, .xrdg-char-card.active { background: #334155; border-color: #fbbf24; }
.xrdg-char-card.active { background: rgba(251, 191, 36, 0.1); box-shadow: 0 0 12px rgba(251, 191, 36, 0.3); }
.xrdg-char-info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.xrdg-char-name { color: #fff; font-size: 13px; font-weight: 700; display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xrdg-srv-badge { color: #94a3b8; font-size: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.xrdg-lvl-badge { position: absolute; top: 6px; right: 6px; color: #fbbf24; font-weight: 800; font-size: 10px; background: rgba(251, 191, 36, 0.2); padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(251, 191, 36, 0.4); }
.char-remove-btn { position: absolute; top: -5px; right: -5px; background: #ef4444; color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; border: 2px solid #0f172a; z-index:10; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.xrdg-class-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.xrdg-class-item { display: flex; justify-content: center; align-items: center; height: 45px; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; position: relative; user-select: none; }
.xrdg-class-item img { opacity: 0.4; filter: grayscale(100%); transition: 0.2s; }
.xrdg-class-item.selected img { opacity: 1; filter: grayscale(0%) drop-shadow(0 0 4px #22c55e); transform: scale(1.15); }
.xrdg-class-item.refused img { opacity: 0.5; filter: grayscale(100%); }
.xrdg-class-item.refused::after { content: "✖"; position: absolute; color: #ef4444; font-weight: 800; font-size: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* --- RESULTS --- */
#xrdg-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
#xrdg-results.dashboard-view { display: block !important; }
.xrdg-card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; z-index: 1; pointer-events: auto; }
.xrdg-card:hover { transform: translateY(-4px); border-color: #fbbf24; box-shadow: 0 10px 25px rgba(0,0,0,0.3); z-index: 5; }
.xrdg-card-head { padding: 15px; background: rgba(0,0,0,0.2); border-bottom: 1px solid #334155; display: flex; gap: 12px; align-items: flex-start; position: relative; }
.xrdg-icon-box { width: 42px; height: 42px; background: #0f172a; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid #334155; overflow: hidden; flex-shrink: 0; }
.xrdg-pseudo { font-weight:800; color:#fff; font-size:15px; display:block; }
.xrdg-srv { font-size:11px; color:#fbbf24; text-transform:uppercase; font-weight:700; }
.xrdg-card-badge-count { background: #0f172a; color: #cbd5e1; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; border: 1px solid #334155; margin-top: 5px; }
.xrdg-card-body { padding: 15px; flex: 1; }
.xrdg-act-val { font-size: 16px; font-weight: 700; color: #fbbf24 !important; margin-bottom: 8px; display: block; }
.xrdg-card-foot { padding: 12px 15px; background: rgba(0,0,0,0.3); border-top: 1px solid #334155; display: flex; justify-content: space-between; align-items: center; font-size:11px; color:#94a3b8; }
.xrdg-btn-join { background: #22c55e; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; cursor: pointer; position: relative; z-index: 10; }

/* --- ACCORDEON --- */
.xrdg-accordion { display: flex; flex-direction: column; gap: 12px; }
.xrdg-acc-item { background: #1e293b; border: 1px solid #334155; border-radius: 10px; overflow: hidden; width: 100%; transition: 0.2s; margin-bottom: 10px; }
.xrdg-acc-item.completed { border-color: #22c55e; opacity: 0.8; }
.xrdg-acc-head { padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%); }
.xrdg-acc-head-left { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.xrdg-acc-head-right { display: flex; align-items: center; gap: 10px; }
.xrdg-acc-badge { padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #fff; }
.xrdg-acc-badge.server { background: #3b82f6; } .xrdg-acc-badge.team { background: #22c55e; }
.xrdg-acc-badge.type { font-size: 10px; padding: 4px 8px; border-radius: 4px; color: #fff; font-weight: 700; text-transform: uppercase; }
.xrdg-acc-badge.type.donjon { background: #7c3aed; } .xrdg-acc-badge.type.xp { background: #0ea5e9; } .xrdg-acc-badge.type.drop { background: #f59e0b; }
.xrdg-acc-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border-radius: 50%; color: #94a3b8; transition: 0.3s; }
.xrdg-acc-item.open .xrdg-acc-icon { transform: rotate(180deg); background: #fbbf24; color: #0f172a; }
.xrdg-acc-body { display: none; padding: 20px; border-top: 1px solid #334155; background: #0f172a; }
.xrdg-acc-item.open .xrdg-acc-body { display: block; animation: slideDown 0.2s ease-out; }
.xrdg-dash-actions { display: flex; gap: 10px; margin-top: 15px; justify-content: flex-end; }
.xrdg-btn-dash { flex: 1; border: none; padding: 12px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 13px; color: #fff !important; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; }
.xrdg-btn-dash:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.btn-edit { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.btn-del { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.btn-complete { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.btn-rate { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color:#0f172a !important; }
.btn-save-edit { width: 100%; margin-top: 15px; background: #22c55e; color: #fff; padding: 12px; border-radius: 8px; border: none; font-weight: 800; cursor: pointer; text-transform: uppercase; font-size: 14px; }
.btn-save-edit:hover { background: #16a34a; }
.btn-kick-member { position: absolute; top: -5px; right: -5px; background: #ef4444; color: #fff; border: 2px solid #0f172a; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.btn-kick-member:hover { transform: scale(1.2); }
.admin-del { position: absolute; bottom: 5px; right: 5px; background: #ef4444 !important; border: 1px solid #b91c1c !important; width: 24px; height: 24px; border-radius: 50%; font-size: 12px !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; z-index: 20; }
.admin-del:hover { transform: scale(1.2); background: #dc2626 !important; }

/* --- OVERLAYS --- */
#xrdg-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 99990; backdrop-filter: blur(4px); }
#xrdg-backdrop.show { display: block; }
#xrdg-notif { position: fixed; top: 120px; right: 30px; z-index: 120000; background: #10b981; color: #fff; padding: 12px 25px; border-radius: 8px; font-weight: 700; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); transform: translateY(-20px); opacity: 0; transition: 0.3s; pointer-events: none; border: 1px solid #059669; }
#xrdg-notif.show { transform: translateY(0); opacity: 1; }
#xrdg-toast { visibility: hidden; min-width: 320px; background-color: #1e293b; color: #fff; text-align: center; border-radius: 12px; padding: 25px; position: fixed; z-index: 100000; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 20px 60px rgba(0,0,0,0.9); border: 1px solid #475569; opacity: 0; transition: 0.2s; }
#xrdg-toast.show { visibility: visible; opacity: 1; }
#xrdg-toast.confirm { min-width: 420px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border: 1px solid #ef4444; }
#xrdg-toast.detail { width: 650px; max-width: 95vw; text-align: left; padding: 0; background: #0f172a; border-radius: 12px; overflow: hidden; }
.xrdg-detail-head { background: #1e293b; padding: 20px; border-bottom: 1px solid #334155; display: flex; justify-content: space-between; align-items: center; }
.xrdg-detail-title { font-size: 18px; color: #fbbf24; font-weight: 800; text-transform: uppercase; }
.xrdg-detail-close { cursor: pointer; color: #94a3b8; font-size: 24px; padding: 5px; }
.xrdg-detail-body { padding: 25px; max-height: 75vh; overflow-y: auto; }
.xrdg-detail-meta { display: flex; justify-content: space-between; align-items: center; background: #1e293b; padding: 15px; border-radius: 8px; border: 1px solid #334155; margin-bottom: 20px; }
#xrdg-floating-tooltip { position: fixed; display: none; z-index: 110000; background: #1e293b; border: 1px solid #60a5fa; border-radius: 8px; padding: 10px; color: #fff; font-size: 12px; pointer-events: none; box-shadow: 0 10px 25px rgba(0,0,0,0.9); min-width: 140px; }
.xrdg-tt-head { color:#fbbf24; font-weight:800; border-bottom:1px solid #334155; margin-bottom:5px; padding-bottom:3px; text-align:center; text-transform:uppercase; }
.xrdg-tt-row { display: flex; justify-content: space-between; margin-bottom: 2px; align-items:center; }
.tt-vita { color: #ef4444; } .tt-pa { color: #3b82f6; } .tt-pm { color: #22c55e; }
@media (max-width: 900px) { .xrdg-root { grid-template-columns: 1fr; } .xrdg-sidebar { position: static; width: 100% !important; } }