/* ============================================
   css/ui/mypage-stats.css - マイステータス専用スタイル
   ============================================ */

.my-stats-dashboard {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 10px 0 20px;
}

.stats-section {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 188, 212, 0.2);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.stats-section-title {
    font-family: 'Orbitron', sans-serif;
    color: #00838f;
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #eceff1;
    padding-bottom: 8px;
}

.stats-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.stats-table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.stats-table th {
    background: #f8f9fa;
    color: #546e7a;
    font-weight: 700;
    padding: 12px 15px;
    text-align: right;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #eceff1;
    width: 17%;
}

.stats-table th:first-child {
    text-align: left;
    width: 32%;
}

.stats-table td {
    padding: 15px;
    border-bottom: 1px solid #eceff1;
    text-align: right;
    color: #37474f;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1rem;
}

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

.stats-table td.row-label {
    text-align: left;
    font-family: inherit;
    font-weight: 700;
    color: #546e7a;
    font-size: 0.85rem;
}

/* カラム別のカラーハイライト */
.stats-table th.col-overall, .stats-table td.col-overall { background: rgba(0, 188, 212, 0.03); color: #00838f; }
.stats-table th.col-easy, .stats-table td.col-easy { color: #4caf50; }
.stats-table th.col-normal, .stats-table td.col-normal { color: #ff9800; }
.stats-table th.col-hard, .stats-table td.col-hard { color: #f44336; }

/* 補助テキスト（単位や注釈など） */
.stats-subtext {
    font-size: 0.65rem;
    color: #90a4ae;
    font-weight: 400;
    margin-left: 4px;
    font-family: sans-serif;
}

/* 円グラフ・プログレスバー用の特別なレイアウト用（必要に応じて利用） */
.stats-pie-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.stats-pie-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: conic-gradient(#00bcd4 0% 75%, #eceff1 75% 100%);
}