:root {
    --bg-color: #ffffff;
    --text-color: #212529;
    --secondary-bg-color: #F0F2F5;
    --border-color: rgba(0, 0, 0, 0.1);
    --icon-color: #212529;
    --dropdown-bg: #ffffff;
    --dropdown-text: #212529;
    --dropdown-hover: #e9ecef;
}

[data-theme="dark"] {
    --bg-color: #18191A;
    --text-color: #ffffff;
    --secondary-bg-color: #242526;
    --border-color: rgba(255, 255, 255, 0.1);
    --icon-color: #E4E6EB;
    --dropdown-bg: #242526;
    --dropdown-text: #E4E6EB;
    --dropdown-hover: #3A3B3C;
}

body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] .bg-white {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

.bg-secondary-light {
    background-color: var(--secondary-bg-color) !important;
}

.text-dark {
    color: var(--text-color) !important;
}

/* Dropdown styling for dark mode */
.dropdown-menu {
    background-color: var(--dropdown-bg) !important;
    color: var(--dropdown-text) !important;
    border-color: var(--border-color) !important;
}

.dropdown-item {
    color: var(--dropdown-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--dropdown-hover) !important;
    color: var(--dropdown-text) !important;
}

/* Theme toggle icon styling */
#theme-toggle {
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--icon-color);
    padding: 8px;
    /* border-radius: 50%; */
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#theme-icon{
    padding: 10px;
}
#theme-toggle:hover {
    background-color: var(--border-color);
}

/* Modal styling for dark mode */
[data-theme="dark"] .modal-content {
    background-color: var(--secondary-bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-content.loader-content-wrapper {
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border-color) !important;
    background-color: var(--secondary-bg-color) !important;
}

[data-theme="dark"] .modal-title {
    color: var(--text-color) !important;
}

/* [data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
} */

/* Loader styling */
[data-theme="dark"] .modal-fg2sgdtrvre43awqwd {
    /* background: rgba(0, 0, 0, 0.8) !important; */
}

[data-theme="dark"] .loader-hgy67vg .modal-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .loader-info-kjhgfsr45qn h2,
[data-theme="dark"] .loader-info-kjhgfsr45qn p {
    color: var(--text-color) !important;
}

/* Icon styling */
/* [data-theme="dark"] i {
    color: var(--icon-color) !important;
} */

[data-theme="dark"] .text-secondary {
    color: #a0a3b1 !important;
}

[dark-theme="dark"] .tale-jhgfd {
    color: var(--dropdown-bg) !important;
}

[data-theme="dark"] .btn-secondary-light {
    background-color: #3A3B3C !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .close5fgdr4 {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .close5fgdr4:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* dropdown triangle/arrow color in dark mode */
[data-theme="dark"] .tale-jhgfd,
[data-theme="dark"] .dropdown-menu .fa-triangle {
    color: var(--dropdown-bg) !important;
}

[data-theme="dark"] .card {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* specific icon hover state reported by user */
[data-theme="dark"] .h45fsrydyj:not(:hover) i {
    color: var(--icon-color) !important;
}

/* Comment Box Styling */
[data-theme="dark"] .form-control.comment-textarea-input,
[data-theme="dark"] .form-control {
    background-color: var(--secondary-bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--secondary-bg-color) !important;
    color: var(--text-color) !important;
}

/* Share Button Styling */
[data-theme="dark"] .share-btn {
    color: var(--text-color) !important;
    /* background-color: var(--dropdown-bg) !important; */
}

[data-theme="dark"] .dropdown-item.share-btn {
    background-color: var(--dropdown-bg) !important;
}

[data-theme="dark"] .share-btn:hover {
    background-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .galleryphotos5grdhdht4e {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card.ggdrrd5er {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card-header {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card.ggdrrd5er .card-body.hjfjfj6546aw span.group-name-badge {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .card.ggdrrd5er .card-footer {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .all-loaded-notice span {
    color: var(--text-color) !important;
}

[data-theme="dark"] .user-profile-name {
    color: var(--text-color) !important;
}

[data-theme="dark"] select {
    color: var(--text-color) !important;
    background-color: var(--secondary-bg-color) !important;
}

[data-theme="dark"] input {
    color: var(--text-color) !important;
    background-color: var(--secondary-bg-color) !important;
}

[data-theme="dark"] .options-container .option  {
    color: var(--text-color) !important;
    background-color: var(--secondary-bg-color) !important;
}

[data-theme="dark"] .options-footer-container  {
    color: var(--text-color) !important;
    background-color: var(--secondary-bg-color) !important;
}

[data-theme="dark"] .search-footer-containersvdf {
    color: var(--text-color) !important;
    background-color: var(--secondary-bg-color) !important;
}

[data-theme="dark"] .teammates-search-containerjdchds {
    color: var(--text-color) !important;
    background-color: var(--secondary-bg-color) !important;
}

[data-theme="dark"] .accordionContainer .accordion-item {
    color: var(--text-color) !important;
    background-color: var(--secondary-bg-color) !important;
}

[data-theme="dark"] .panzoom-feature-btns button i{
    color: var(--text-color) !important;
    background-color: var(--secondary-bg-color) !important;
}