/* incidents.css */
#incident-details-container,
.incidents-feature,
.incident-full-card {

    .tab-panel {
        display: none;

        &.active {
            display: block;
        }
    }

    .posts-content {
        padding: 0 !important;
    }

    .post-card {
        margin-bottom: 0;
    }

    .sub-heading {
        line-height: 3
    }

    .col-md-4.incident-title {
        max-width: 31.9%;
    }

    .incident-full-title,
    .incident-title {
        flex: 1 1 calc(33.333% - 20px);
        text-align: left;

        i {
            color: var(--secondary-color);
        }

        .media-content {
            text-align: center;
        }

        .news-image {
            margin: 0.5rem 0;
        }

        .accented {
            color: var(--accent-color-1);
        }

        .posted-date {
            font-size: var(--font-size-p1);
        }

        .news-image img,
        .media-content img {
            max-width: 80%;
            max-height: 10rem;
        }

        .severity-badge {
            text-transform: capitalize;
        }

        .category-container {
            font-size: var(--font-size-p3);
            padding: 10px;

            div:not(:last-child) {
                margin-bottom: 0.5rem;
            }
        }

        .metrics {
            border-top: 1px solid var(--background-color);

            .flag-icon {
                font-size: 2rem;
            }
        }

        .incident-show-more {
            display: none;
            font-size: var(--font-size-p1);
        }

        .incident-show {
            font-size: var(--font-size-p1);
        }

        .location {
            font-weight: bold;
        }

        .show-more,
        .show-less {
            text-decoration: none;
            color: var(--hyperlink-color) !important;
            font-size: var(--font-size-p1);
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }

        .category,
        .subcategory {
            text-decoration: none;
            color: var(--hyperlink-color) !important;

            &:hover {
                text-decoration: underline !important;
            }
        }

        .incident-kpi-card {
            flex: 1 1 100px;
            background-color: var(--white-color);
            text-align: center;
            max-width: 100px;

            p {
                font-weight: bold;
                color: var(--primary-color);
                margin: 0;
                font-size: var(--font-size-p3);
            }

            h6 {
                color: var(--primary-color);
                margin: 0;
                font-weight: 400;
                font-size: var(--font-size-p3);
            }
        }
    }

    .incidents-locations {
        #locations-container {
            display: flex;
            gap: 1rem;
            padding-top: 1rem;
        }

        #country-list {
            max-width: 25%;
            min-width: 24.5%;
            border-right: 1px solid var(--primary-color);
            /* padding-right: 1rem; */
        }

        #loc-post-display {
            max-width: 75%;
            min-width: 74.5%;
        }

        #country-items div {
            padding-left: 0px;
        }

        #loc-column-1,
        #loc-column-2 {
            width: 49%;
        }

        /* Styling for country and region items */
        .country-item,
        .region-item {
            display: flex;
            /* flex-direction: column; */
            justify-content: space-between;
            align-items: flex-start;
            padding: 0.7rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
            border-bottom: 1px solid var(--primary-color);
            text-align: left !important;
        }

        /* .country-item:hover,
    .region-item:hover {
        background-color: var(--tertiary-color);
        color: var(--white-color);
        opacity: 0.8;
    } */

        .region-item.active,
        .country-item.active {
            /* background-color: var(--tertiary-color); */
            color: var(--secondary-color);
            opacity: 1;
        }

        .country-flag {
            width: 24px;
            height: 16px;
            margin-right: 0.5rem;
        }

        .result-count {
            font-size: var(--font-size-p1);
            /* color: var(--tertiary-color); */
            margin-left: 2rem;
        }

        .region-result-count {
            font-size: var(--font-size-p1);
            /* color: var(--tertiary-color); */
            margin-left: 1.rrem;
        }

        /* .country-item:hover .result-count,
    .region-item:hover .region-result-count,
    .country-item.active .result-count,
    .region-item.active .region-result-count {
        color: var(--white-color);
    } */

        /* Country and region list styling */
        .country-info,
        .region-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: var(--font-size-p1);
            /* font-weight: bold; */
        }

        #postModal-loc {
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(3px);
        }

        #selected-country,
        #selected-country-heading {
            margin-bottom: 1rem;
            /* font-size: 1.8rem;
        font-weight: 550; */
            text-align: center;
            width: fit-content;
        }

        #selected-country {
            position: absolute;
            left: 50%;
        }

        .no-posts {
            text-align: center;
            color: #666;
            font-size: 1.2em;
            margin-top: 20px;
        }

        .end-of-posts-loc {
            text-align: center;
            margin: 20px auto;
            padding: 20px;
            color: #6c757d;

            i {
                color: #28a745;
                margin-bottom: 10px;
            }

            p {
                font-size: 18px;
                font-weight: 500;
                margin: 0;
            }
        }

        @media (max-width: 768px) {
            #country-list.menu-expanded {
                display: block;
                transition: max-height 0.3s ease-in-out;
                max-height: max-content;
                border-right: none;
            }

            #country-list-container {
                max-height: 0;
                overflow: hidden;
            }

            #locations-container {
                display: flex;
                flex-direction: column;
                padding: 0.2rem;
            }

            #loc-post-display {
                max-width: 100%;
                padding: 0;
                border-right: none;
                min-height: 50vh;
            }

            #country-list {
                display: flex;
                flex-wrap: wrap;
                position: relative;
                padding: 0.5rem;
                flex-direction: row !important;
                max-height: max-content;
                max-width: 100%;
            }

            .country-item,
            .region-item {
                font-size: 1rem;
                white-space: nowrap;
                text-align: left !important;
            }

            .country-item {
                cursor: pointer;
            }

            .result-count {
                margin-left: 0;
            }

            #posts-content {
                flex-direction: column;
                gap: 0;
                padding: 0;
            }

            .modal-content {
                padding: 0;
            }

            .p-1 .col-md-6 {
                width: 100%;
            }

            .p1 {
                padding: none;
            }

            .posts-container {
                width: 100%;
            }

            #selected-country,
            #selected-country-heading {
                font-size: 1.5rem;
            }

            #selected-country {
                position: relative;
                left: 0 !important;
            }

            #country-list {
                border: none;
            }

            #country-items,
            #region-items {
                width: 100%;
            }

            #loc-column-1,
            #loc-column-2 {
                width: 100%;
            }

        }

        /* Tablet view adjustments */
        @media (min-width: 769px) and (max-width: 1000px) {
            #locations-container {
                flex-direction: row;
                width: 100%;
            }

            .result-count {
                margin-left: 0;
            }

            .col-md-5 {
                flex: 0 0 auto;
                width: 100%;
            }

            #country-list {
                width: 30%;
                /* padding-right: 1rem; */
            }

            #loc-post-display {
                width: 90%;
                padding-left: 1rem;
            }

            #posts-content {
                gap: 15px;
            }
        }
    }

    @media (max-width: 913px) {
        .col-md-4.incident-title {
            max-width: 48.7%;
        }

        .incident-full-title,
        .incident-title {
            flex: 1 1 calc(48.7% - 20px);
        }
    }

    @media (max-width: 767.97px) {
        .col-md-4.incident-title {
            max-width: 100%;
            flex: 1 1 100%;
        }

        .incident-full-title,
        .incident-title {
            flex: 1 1 100%;
        }
    }
}

.incident-full-card {
    display: flex;

    .incident-full-title {
        max-width: 68%;

        a {
            text-decoration: none;
            color: var(--hyperlink-color) !important;

            &:hover {
                text-decoration: underline;
            }
        }

        .flag-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .incident-kpi-card {
            box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.1);
            padding: 10px;
        }

        .incident-tooltip {
            font-size: 1.4rem;
        }

        .table-responsive {

            td,
            th {
                padding: 10px;
                font-size: var(--font-size-p3);
            }

            .modal-side-heading {
                font-weight: bold;
                text-align: left;
                margin-top: 10px;
                color: var(--primary-color);
                margin-bottom: 0;
            }

            tr:nth-child(odd) {
                background-color: var(--bottom-bar-bg);
            }
        }
    }

    #incident-sidebar {
        max-width: 32%;
        border: 1px solid var(--background-color);
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);

        .posts-content {
            display: block;
        }

        .incident-title {
            margin-bottom: 1rem;
        }
    }

    @media(max-width: 767.97px) {
        display: block;

        #incident-sidebar {
            max-width: 100%;
        }

        .incident-full-title {
            max-width: 100%;
        }
    }
}