/*
    Arrow box for dark and light theme, e.g. displayed in card elements
*/
.arrow_box {
    position: relative;
    border: 1px solid #D2D2D2;
}

.dark-mode .arrow_box {
    border-color: #2B273D;
}

.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #fff;
    border-width: 15px;
    margin-left: -15px;
}

.dark-mode .arrow_box:after {
    border-top-color: #2B273D;
}

.arrow_box:before {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #D2D2D2;
    border-width: 21px;
    margin-left: -21px;
}

.dark-mode .arrow_box:before {
    border-top-color: #2B273D;
}

/*
    General Body, font-family, background-color, color
 */
body {
    background: #e5eff7;
    color: #0d1117;
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
    background-color: #1C1C2D;
    color: #c9d1d9;
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .card-title {
        font-size: 16px !important;
    }
}
@media (max-width: 576px) {
    .col-4.d-flex {
        justify-content: center !important;
    }
}

/*
    General design for card elements for dark and light theme
 */
.dark-mode .card {
    background-color: #2B273D;
}

.dark-mode .card-header {
    background-color: #2B273D;
}

.dark-mode .card-title,
.dark-mode .card-body {
    color: #c9d1d9;
}

/*
    Dark mode toggle switch
 */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #0c6efd;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/*
    Sticky sidebar
*/
.dark-mode .sticky-sidebar .list-group-item {
    background-color: #2B273D;
    color: #c9d1d9;
}

.dark-mode .sticky-sidebar .fw-bolder {
    color: #c9d1d9;
}

.dark-mode .sticky-sidebar .badge {
    background-color: #1f6feb !important;
    color: #ffffff;
}

@media (max-width: 768px) {
    .sticky-sidebar {
        position: static;
    }
}

/* New styles for scrollbar */
.sticky-sidebar::-webkit-scrollbar {
    width: 6px;
}

.sticky-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.sticky-sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.sticky-sidebar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* For Firefox */
.sticky-sidebar {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Dark mode scrollbar */
.dark-mode .sticky-sidebar::-webkit-scrollbar-track {
    background: #1c2128;
}

.dark-mode .sticky-sidebar::-webkit-scrollbar-thumb {
    background: #30363d;
}

.dark-mode .sticky-sidebar::-webkit-scrollbar-thumb:hover {
    background: #4a5460;
}

.dark-mode .sticky-sidebar {
    scrollbar-color: #30363d #1c2128;
}

@media (min-width: 768px) {
    .sticky-sidebar {
        position: sticky;
        top: 20px; /* Adjust this value based on your header height */
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        scroll-behavior: smooth;
    }
}

/*
    Social Icons
 */
.social-icon {
    fill: #0d1117;
    transition: fill 0.3s ease;
}

body.dark-mode .social-icon {
    fill: #c9d1d9;
}

/*
    Tweet category / topic filter
 */
.list-group-item.active {
    background-color: #007bff;
    color: white;
}

.dark-mode .list-group-item.active {
    background-color: #1f6feb;
    color: #c9d1d9;
}

.list-group-item.active .badge {
    background-color: white !important;
    color: #007bff !important;
}

.dark-mode .list-group-item.active .badge {
    background-color: #c9d1d9 !important;
    color: #1f6feb !important;
}

@media (max-width: 768px) {
    .list-group-item {
        padding: 10px 15px;
    }
}