/* 
 * Custom CSS Override for Vivatbet Premium Liiga Prediction
 * 
 * This file overrides the default prediction.css styles
 * Store path in database: custom_css_file = '/new_css/prediction_vivatbet.css'
 */

/* Brand Colors */
:root {
    --vivatbet-primary: #19807E;
    --vivatbet-secondary: #0F4D4C;
    --vivatbet-correct: #A7CB0C;
    --vivatbet-incorrect: #CC082F;
}

/* Banner */
.prediction-banner {
    background-color: var(--vivatbet-primary) !important;
}

/* Menu */

.prediction-menu {
    background-color: var(--vivatbet-secondary) !important;
}

.prediction-menu-item a {
    color: #ffffff !important;
}

.prediction-menu-item.active,
.prediction-menu-item:hover {
    background-color: var(--vivatbet-secondary) !important;
}

.prediction-menu-item.active a,
.prediction-menu-item a:hover {
    border-bottom: 2px solid var(--vivatbet-correct) !important;
    color: #ffffff !important;
}

/* Container */
.prediction_container {
    background-color: var(--vivatbet-secondary) !important;
}

.prediction_info_message {
    background-color: var(--vivatbet-secondary) !important;
}

.prediction_question_list {
    background-color: var(--vivatbet-secondary) !important;
}

/* Select2 Dropdown */
.select2-container--default .select2-selection--single {
    /*background-color: var(--vivatbet-primary) !important;*/
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--vivatbet-primary) !important;
}

.prediction_date {
    background-color: var(--vivatbet-primary) !important;
}

.prediction_heading {
    background-color: var(--vivatbet-primary) !important;
}

/* Prediction Buttons */
.prediction_game_button_div.active {
    background-color: var(--vivatbet-primary) !important;
}

.prediction_game_button_div.correct {
    background-color: var(--vivatbet-correct) !important;
}

.prediction_game_button_div.incorrect {
    background-color: var(--vivatbet-incorrect) !important;
}

/* Question Results */
.prediction_question_correct {
    background-color: var(--vivatbet-correct) !important;
}

.prediction_question_incorrect {
    background-color: var(--vivatbet-incorrect) !important;
}

/* Notifications */
#ohsnap .alert.green {
    background-color: var(--vivatbet-correct) !important;
}

#ohsnap .alert.red {
    background-color: var(--vivatbet-incorrect) !important;
}

/* Introduction/Article content styling - only for pages WITHOUT prediction interface */
#prediction_content_article {
    background-color: var(--vivatbet-secondary);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 0 5px 5px;
}

/* Apply white text ONLY to direct article content, NOT to prediction containers */
.article-group.current-article > p,
.article-group.current-article > h1,
.article-group.current-article > h2,
.article-group.current-article > h3,
.article-group.current-article > h4,
.article-group.current-article > h5,
.article-group.current-article > h6,
.article-group.current-article > ul,
.article-group.current-article > ol,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) {
    color: #ffffff;
}

.article-group.current-article > p a,
.article-group.current-article > h1 a,
.article-group.current-article > h2 a,
.article-group.current-article > h3 a,
.article-group.current-article > h4 a,
.article-group.current-article > h5 a,
.article-group.current-article > h6 a,
.article-group.current-article > ul a,
.article-group.current-article > ol a,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) a {
    color: var(--vivatbet-correct);
    text-decoration: none;
}

.article-group.current-article > p a:hover,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) a:hover {
    color: #C8E832;
    text-decoration: none;
}

/* Nested elements in article content */
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) p,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) h1,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) h2,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) h3,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) h4,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) h5,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) h6,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) li,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) span,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) td,
.article-group.current-article > div:not(.prediction-banner):not(.prediction-menu):not(.prediction_container) th,
.article-group.current-article > ul li,
.article-group.current-article > ol li {
    color: #ffffff;
}

.article-group.current-article strong,
.article-group.current-article b {
    color: #ffffff;
    font-weight: bold;
}

@media screen and (max-width: 767px) {

    #main-element {
        background-color: var(--vivatbet-secondary);
    }

    .current-article {
        background-color: var(--vivatbet-secondary);
    }

}

/* Ranking Table - Highlight Current User */
.prediction_table_row_current {
    background-color: rgba(167, 203, 12, 0.15) !important;
}

.prediction_table_row_current .prediction_table_cell {
    color: #19807E !important;
    font-weight: 700 !important;
}

/* Friend League Form Overrides */
.prediction_form_button {
    background-color: var(--vivatbet-correct) !important;
    color: #000000 !important;
}

.prediction_form_button:hover {
    background-color: #b8dc1a !important;
}