/* User Level System for PlanetVRC - Stylesheet (v4) */

/* 進捗セクション全体を囲む枠 */
.user-level-dashboard .next-level-info {
    border: 1px solid #f0f0f0;
    padding: 24px;
    border-radius: 8px;
    margin-top: 1em;
    background-color: #ffffff;
}

/* 進捗セクションのタイトル (h4) */
.user-level-dashboard .next-level-info h4 {
    margin: 0;
    padding: 0;
    font-size: 18px;
}

/* 各進捗項目のリスト全体 (UL) */
.user-level-dashboard .next-level-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px; /* 間隔を少しだけ再調整 */
    margin-top: 20px; 
}

/* ★★★ ここが重要: LI要素のテーマスタイルをリセット ★★★ */
/* 各進捗項目（テキスト + バー 1行分）のコンテナ */
.user-level-dashboard .progress-item {
    /* --- テーマスタイルを強制的に無効化 --- */
    /* テーマによる箇条書きのマーカー（・や数字）を削除 */
    list-style-type: none !important;
    /* テーマによる余白やインデントをすべて削除 */
    padding: 0 !important;
    margin: 0 !important;
    /* テーマによる背景やボーダーを削除 */
    background: none !important;
    border: none !important;

    /* --- プラグイン独自のレイアウトを再定義 --- */
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

/* 達成条件のテキスト部分 */
.user-level-dashboard .progress-text {
    font-size: 16px;
    color: #555;
    padding-right: 20px; 
}

/* プログレスバー部分 */
.user-level-dashboard progress {
    width: 45%;
    height: 10px;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
}

/* --- バーの見た目をカスタム（Chrome, Safariなど） --- */
.user-level-dashboard progress::-webkit-progress-bar {
    background-color: #eeeeee;
    border-radius: 10px;
}
.user-level-dashboard progress::-webkit-progress-value {
    background-color: #0073e6;
    border-radius: 10px;
}

/* --- バーの見た目をカスタム（Firefox） --- */
.user-level-dashboard progress::-moz-progress-bar {
    background-color: #0073e6;
    border-radius: 10px;
}

/* --- レスポンシブ対応（画面幅が狭い場合） --- */
@media (max-width: 600px) {
    .user-level-dashboard .next-level-info {
        padding: 20px;
    }

    .user-level-dashboard .progress-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .user-level-dashboard .progress-text,
    .user-level-dashboard progress {
        width: 100%;
    }
}