/* =================================== */
/* === STYLES FOR SCAM REPORT PAGE === */
/* =================================== */

.report-page-header {
    text-align: center;
    padding: 2rem 0;
    border-bottom: 1px solid #444;
}
.report-page-header i {
    font-size: 4rem;
    color: #dc3545; /* Bootstrap's danger color */
}
.report-page-header h1 {
    color: #fff;
    font-weight: bold;
    margin-top: 1rem;
}

.report-form-container, .recent-reports-container, .prevention-guide-container {
    background-color: #1a1a2a;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #333;
}
.report-form-container h4, .recent-reports-container h4, .prevention-guide-container h4 {
    color: #fff;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

/* Form Styles */
.report-form-container .form-label {
    color: #ccc;
}
.report-form-container .form-control, .report-form-container .form-select {
    background-color: #121221;
    border-color: #444;
    color: #fff;
}
.report-form-container .form-control:focus, .report-form-container .form-select:focus {
    background-color: #121221;
    color: #fff;
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.form-check-input:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-submit-report {
    background-color: #dc3545;
    color: #fff;
    border: none;
    font-weight: bold;
    padding: 0.75rem 2rem;
    width: 100%;
}
.btn-submit-report:hover {
    background-color: #b02a37;
    color: #fff;
}

/* Right Sidebar Styles */
.recent-reports-container .list-group-item {
    background-color: #2a2a3a;
    border-color: #333;
    color: #ccc;
}

.prevention-guide-container p {
    color: #aaa;
}
.prevention-guide-container p strong {
    color: #dc3545;
}
/* =================================== */
/* === STYLES FOR INTERACTIVE FEED === */
/* =================================== */
.interactive-report-feed {
    background-color: #1a1a2a;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #333;
}
.interactive-report-feed h4 {
    color: #fff;
    font-weight: 500;
}

.report-feed-item {
    background-color: #121221;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.report-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.report-status {
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: bold;
}
.report-status.pending { background-color: #ffc107; color: #000; }
.report-status.verified { background-color: #198754; color: #fff; }
.report-author {
    color: #888;
    font-size: 0.8rem;
}

.report-title {
    color: #fff;
    font-weight: 500;
    margin-bottom: 1rem;
}

.community-verification {
    border-top: 1px solid #333;
    padding-top: 1rem;
}
.verification-progress {
    background-color: #555;
    border-radius: 5px;
    height: 8px;
}
.verification-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #aaa;
}
.verification-actions {
    display: flex;
    gap: 0.5rem;
}
.btn-verify {
    background-color: transparent;
    border: 1px solid #198754;
    color: #198754;
}
.btn-verify:hover { background-color: #198754; color: #fff; }

.btn-dispute {
    background-color: transparent;
    border: 1px solid #ffc107;
    color: #ffc107;
}
.btn-dispute:hover { background-color: #ffc107; color: #000; }
/* =================================== */
/* === STYLES FOR COMMUNITY BLACKLIST === */
/* =================================== */
.blacklist-container {
    background-color: #1a1a2a;
    padding: 2rem;
    border-radius: 8px;
    border-top: 4px solid #dc3545;
}
.blacklist-container h4 {
    color: #fff;
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.blacklist-container .form-control {
    background-color: #121221;
    border-color: #444;
    color: #fff;
}

.blacklist-results {
    margin-top: 1.5rem;
}

.blacklist-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2a2a3a;
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.entry-main-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.entry-icon {
    font-size: 2.5rem;
    color: #dc3545;
}
.entry-name {
    color: #fff;
    font-weight: 500;
    font-size: 1.1rem;
}
.entry-platform {
    color: #aaa;
    font-size: 0.9rem;
}

.entry-stats {
    text-align: right;
}
.report-count {
    font-weight: bold;
    color: #dc3545;
    margin-bottom: 0.5rem;
}

.btn-share {
    background-color: transparent;
    border: 1px solid #888;
    color: #888;
}
.btn-share:hover {
    background-color: #fff;
    color: #111;
    border-color: #fff;
}
/* =================================== */
/* === STYLES FOR SCAM ANALYTICS  === */
/* =================================== */
.scam-analytics-container {
    background-color: #1a1a2a;
    padding: 2rem;
    border-radius: 8px;
}

.analytic-card-report {
    background-color: #2a2a3a;
    padding: 1.5rem;
    border-radius: 8px;
    height: 100%;
}
.analytic-card-report .analytic-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
}
.analytic-card-report .analytic-label {
    color: #aaa;
}

.analytic-card-report.hotspot {
    background: linear-gradient(135deg, #7c1a24, #b02a37);
    border: 1px solid #dc3545;
}
.analytic-card-report.hotspot .analytic-value {
    font-size: 1.5rem;
    color: #fff;
}
/* =================================== */
/* === STYLES FOR SENTINEL LEADERBOARD === */
/* =================================== */
.sentinel-leaderboard-container {
    background-color: #1a1a2a;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #333;
}
.sentinel-leaderboard-container h4 {
    color: #fff;
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.sentinel-leaderboard-container h4 i {
    color: #0dcaf0;
}

.sentinel-leaderboard-list {
    list-style: none;
    padding: 0;
}

.sentinel-player {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    position: relative;
}
.sentinel-player::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    font-weight: bold;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}
.sentinel-player.rank-1::before { content: '1'; background-color: #ffd700; color: #000; border-radius: 50%; }
.sentinel-player.rank-2::before { content: '2'; background-color: #c0c0c0; color: #000; border-radius: 50%; }
.sentinel-player.rank-3::before { content: '3'; background-color: #cd7f32; color: #000; border-radius: 50%; }

.sentinel-player .player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 25px;
}
.sentinel-player .player-name {
    flex-grow: 1;
    color: #fff;
    font-weight: 500;
}
.sentinel-player .player-prestige {
    color: #0dcaf0;
    font-size: 0.9rem;
}

.sentinel-rewards-info {
    margin-top: 1.5rem;
    text-align: center;
    font-style: italic;
    color: #888;
    font-size: 0.8rem;
}
/* =================================== */
/* === STYLES FOR TRUSTED CHECKER === */
/* =================================== */
.trusted-checker-container {
    background: linear-gradient(145deg, #1f2029, #121221);
    border: 1px solid #0dcaf0;
    padding: 2rem;
    border-radius: 8px;
}
.trusted-checker-container h4 i {
    color: #0dcaf0;
}
.trusted-checker-container .form-control {
    background-color: #121221;
    border-color: #444;
    color: #fff;
}
.btn-check-trust {
    background-color: #0dcaf0;
    color: #fff;
    border: none;
    font-weight: 500;
}

.check-result-area {
    background-color: rgba(13, 202, 240, 0.05);
    padding: 1.5rem;
    border-radius: 5px;
    margin-top: 1rem;
}
.result-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    margin-bottom: 1rem;
}
.result-user-info img {
    width: 50px; height: 50px; border-radius: 50%;
}
.trust-factors-list {
    list-style: none;
    padding: 0;
    color: #ccc;
}
.trust-factors-list li { margin-bottom: 0.5rem; }
.trust-factors-list i { color: #0dcaf0; margin-right: 10px; }
.trust-factors-list strong { color: #fff; }

.trust-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.trust-score {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(#0dcaf0 calc(var(--score) * 1%), #333 0);
    position: relative;
}
.trust-score::before {
    content: '';
    position: absolute;
    width: 85%;
    height: 85%;
    background-color: #1f2029;
    border-radius: 50%;
}
.trust-score-label {
    position: relative;
    font-size: 2.5rem;
    font-weight: bold;
    color: #0dcaf0;
}
.trust-level {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 5px 15px;
    border-radius: 20px;
}
.trust-level.high { background-color: #198754; color: #fff; }
.trust-level.medium { background-color: #ffc107; color: #000; }
.trust-level.low { background-color: #dc3545; color: #fff; }
/* =================================== */
/* === STYLES FOR SAFETY QUIZ     === */
/* =================================== */
.safety-quiz-container {
    background-color: #1a1a2a;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #333;
}
.safety-quiz-container h4 i {
    color: #198754;
}
.quiz-card {
    margin-top: 1rem;
}
.quiz-question-text {
    color: #fff;
    margin-bottom: 1rem;
}
.quiz-options {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.quiz-option {
    background-color: #2a2a3a;
    padding: 1rem;
    border-radius: 5px;
    cursor: pointer;
    color: #ccc;
    transition: all 0.2s ease;
    border: 1px solid #444;
}
.quiz-option:hover {
    background-color: #3a3a4a;
    color: #fff;
}
/* Trạng thái sau khi trả lời */
.quiz-option.correct {
    background-color: #198754;
    color: #fff;
    border-color: #198754;
}
.quiz-option.incorrect {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
}
.quiz-option.disabled {
    pointer-events: none;
    opacity: 0.7;
}

.quiz-explanation {
    background-color: #121221;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #aaa;
    display: none; /* Sẽ được bật bằng JS */
}
.quiz-explanation strong {
    color: #198754;
}
.quiz-explanation.visible {
    display: block;
}