@import url(template.min.css?v=1.1);

    .text-primary{
        color: #0d6efd !important;
    }
    .page-header {
        background: linear-gradient(135deg, #34456e 0%, #5a71a7 100%); color: white;
        padding: 2rem 1rem; border-radius: 0 0 24px 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); margin-bottom: 2rem;
    }
    .table-card { border-radius: 12px; overflow: hidden; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .table thead th { background: #f8f9fa; color: #495057; font-weight: 600; padding: 15px; border-bottom: 2px solid #e9ecef; white-space: nowrap; }
    .table tbody tr:hover { background-color: #f1f8ff; }
    .rank-circle-sm {
        width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        font-family: 'Prompt'; font-weight: bold; font-size: 0.8rem; margin-right: 10px; flex-shrink: 0;
    }
    .mobile-card {
        background: white; border-radius: 12px; margin-bottom: 12px; box-shadow: 1px 2px 8px rgba(0,0,0,0.2);
        overflow: hidden; border-left: 6px solid transparent; position: relative;
    }
    .m-header { padding: 10px 10px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid #f0f0f0; }
    .m-rank-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Prompt'; font-weight: 700; font-size: 0.9rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
    .m-school { font-family: 'Prompt'; font-weight: 600; font-size: 1rem; color: #212529; line-height: 1.3; }
    .m-trophy { position: absolute; top: 12px; right: 15px; font-size: 1.1rem; }
    .m-body { padding: 12px 15px; display: flex; justify-content: space-between; align-items: flex-end; }
    .m-badge-container { display: flex; align-items: center; }
    .score-num {font-weight: 600; font-size: 1.2rem; line-height: 1; color: #0d6efd; }
    .badge-base { padding: 4px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 400; display: inline-flex; align-items: center; border: 1px solid transparent; }
    
    .medal-gold { background: #fff9db; color: #f57f17; border-color: #ffe082; }
    .medal-silver { background: #f8f9fa; color: #636e72; border-color: #dee2e6; }
    .medal-bronze { background: #fff4e6; color: #d84315; border-color: #ffccbc; }
    .medal-participate { background: #f1f3f5; color: #636e72; border-color: #dfe6e9; }
    .text-not-participated { color: #dc3545; font-weight: 600; font-family: 'Prompt'; }
    .dash-symbol { font-weight: bold; color: #adb5bd; }

    .style-rank-1.mobile-card { border-left-color: #FFD700; }
    .style-rank-2.mobile-card { border-left-color: #BDBDBD; }
    .style-rank-3.mobile-card { border-left-color: #ff8a65; }
    .style-rank-n.mobile-card { border-left-color: #dee2e6; }

    /* Empty State Styles */
    .empty-state { padding: 4rem 2rem; text-align: center; background: white; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .empty-icon { font-size: 4rem; color: #dee2e6; margin-bottom: 1.5rem; }
    .title-activity{
        font-size: 1.8rem;
    }
    .sub-title-activity{
        font-size: .95rem;
    }

    @media (max-width: 768px) {
        .sub-title-activity{
            font-size: .7rem;
        }
        .title-activity{
            font-size: 1.2rem;
        }
    }