/* Premium UI Theme Overrides for ChatPro */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap");

:root {
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Brand Colors (ZenDealer ChatPro Orange & Silver) */
    --primary-color: #ff6a00;
    --primary-hover: #e05c00;
    --primary-rgb: 255, 106, 0;
    --secondary-color: #8a92a6;
    
    /* Light Mode Variables */
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-sidebar-active: #f1f5f9;
    --border-color: #e2e8f0;
    
    --text-color: #1e293b;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);

    /* Alerts */
    --alert-info-bg: #fff7ed;
    --alert-info-border: #ffedd5;
    --alert-info-text: #c2410c;
    
    --theme-invert: 0;
}

[data-theme="dark"] {
    /* Dark Mode Variables */
    --bg-main: #0b0f19;
    --bg-card: #151b2c;
    --bg-sidebar: #0f1322;
    --bg-sidebar-active: #1e2538;
    --border-color: #27314a;
    
    --text-color: #e2e8f0;
    --text-muted: #94a3b8;
    --text-inverse: #0f172a;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);

    --alert-info-bg: rgba(255, 106, 0, 0.1);
    --alert-info-border: rgba(255, 106, 0, 0.2);
    --alert-info-text: #ff9d5c;
    
    --theme-invert: 1;
}

/* Global Styles */
body {
    font-family: var(--font-sans) !important;
    background-color: var(--bg-main) !important;
    color: var(--text-color) !important;
}

body.chat-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

body.chat-page .layout-wrapper {
    flex: 1;
    min-height: 0;
    height: 100vh;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans) !important;
    color: var(--text-color) !important;
    font-weight: 600 !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Layout Overrides */
.layout-wrapper {
    background-color: var(--bg-main) !important;
}

/* Sidebar Menu */
.side-menu {
    background-color: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

@media (max-width: 991.98px) {
    .side-menu {
        border-top: 1px solid var(--border-color) !important;
        border-right: none !important;
    }
}

.side-menu-nav .nav-item .nav-link {
    color: var(--text-muted) !important;
    transition: all 0.2s ease-in-out;
}

.side-menu-nav .nav-item .nav-link:hover {
    color: var(--primary-color) !important;
    background-color: var(--bg-sidebar-active) !important;
}

.side-menu-nav .nav-item .nav-link.active {
    background-color: var(--bg-sidebar-active) !important;
    color: var(--primary-color) !important;
    box-shadow: inset 3px 0 0 var(--primary-color);
}

@media (max-width: 991.98px) {
    .side-menu-nav .nav-item .nav-link.active {
        box-shadow: inset 0 -3px 0 var(--primary-color);
    }
}

/* Left Sidebar (Chats List) */
.chat-leftsidebar {
    background-color: var(--bg-main) !important;
    border-right: 1px solid var(--border-color) !important;
}

/* Unified, Seamless Search Boxes for Chat & Calls */
.search-box .input-group,
.chat-search-box .input-group {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.search-box .input-group:focus-within,
.chat-search-box .input-group:focus-within {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 106, 0), 0.15) !important;
}

.search-box .input-group .input-group-text,
.chat-search-box .input-group .input-group-text {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--text-muted) !important;
    padding: 8px 10px 8px 14px !important;
    box-shadow: none !important;
}

.search-box .input-group input.form-control,
.search-box .input-group input.search,
.chat-search-box .input-group input.form-control,
.chat-search-box .input-group input.search {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--text-color) !important;
    font-size: 14px !important;
    padding: 8px 14px 8px 4px !important;
    box-shadow: none !important;
    outline: none !important;
}

.search-box .input-group input.form-control:focus,
.search-box .input-group input.search:focus,
.chat-search-box .input-group input.form-control:focus,
.chat-search-box .input-group input.search:focus {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--text-color) !important;
}

.search-box .input-group input::placeholder,
.chat-search-box .input-group input::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.75 !important;
}

.chat-search-box [id$="SearchClose"],
.search-box [id$="SearchClose"] {
    cursor: pointer !important;
    opacity: 0.65 !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

.chat-search-box [id$="SearchClose"]:hover,
.search-box [id$="SearchClose"]:hover {
    opacity: 1 !important;
    color: var(--primary-color) !important;
    transform: scale(1.1);
}

.chat-search-box [id$="SearchClose"].hide,
.search-box [id$="SearchClose"].hide {
    display: none !important;
}

.chat-list li a {
    border-radius: 10px;
    margin: 4px 8px;
    padding: 10px 14px !important;
    transition: all 0.2s ease;
}

.chat-list li a:hover {
    background-color: var(--bg-sidebar-active) !important;
}

.chat-list li.active a {
    background-color: var(--bg-sidebar-active) !important;
    border-left: 3px solid var(--primary-color);
    border-radius: 0 10px 10px 0;
}

/* Global .hide enforcement */
.hide,
.user-chat.hide,
#chatScreen.hide,
#welcomeChatScreen.hide,
div.hide {
    display: none !important;
}

/* User Chat Section & Flex Height Layout */
.user-chat {
    background-color: var(--bg-card) !important;
    border-left: 1px solid var(--border-color) !important;
}

.user-chat:not(.hide) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.user-chat > .d-lg-flex {
    display: flex !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.user-chat > .d-lg-flex > .w-100 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.user-chat-show {
    background-color: var(--bg-card) !important;
}

/* Chat Header */
.user-chat .border-bottom {
    border-bottom: 1px solid var(--border-color) !important;
    background-color: var(--bg-card) !important;
    flex-shrink: 0 !important;
}

/* Chat Conversation Scroll Area */
.chat-conversation {
    flex: 1 1 0% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Chat Input Bar */
.chat-input-section {
    background-color: var(--bg-card) !important;
    border-top: 1px solid var(--border-color) !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

.chat-input-section input {
    background-color: var(--bg-main) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Chat Bubbles & Conversation Spacing */
.chat-conversation .conversation-list {
    margin-bottom: 24px !important;
    display: inline-flex !important;
    align-items: flex-end !important;
    position: relative;
    max-width: 85%;
}

.chat-conversation .conversation-list .ctext-wrap {
    display: flex !important;
    align-items: flex-end !important;
    margin-bottom: 4px !important;
    gap: 6px;
}

.chat-conversation .ctext-wrap-content {
    background-color: var(--bg-card, #ffffff) !important;
    color: var(--text-color, #1e293b) !important;
    border-radius: 14px 14px 14px 2px !important;
    padding: 10px 16px !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    position: relative;
    word-break: break-word;
    max-width: 100%;
}

.chat-conversation .ctext-wrap-content:before {
    border-left-color: var(--bg-card, #ffffff) !important;
    border-top-color: var(--bg-card, #ffffff) !important;
}

.chat-conversation .right .conversation-list {
    float: right !important;
    text-align: right !important;
}

.chat-conversation .right .ctext-wrap-content {
    background-color: var(--primary-color, #ff6a00) !important;
    color: #ffffff !important;
    border-radius: 14px 14px 2px 14px !important;
    padding: 10px 16px !important;
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.22) !important;
    border: none !important;
    text-align: left !important;
    max-width: 100%;
}

.chat-conversation .right .ctext-wrap-content:before {
    border-top-color: var(--primary-color, #ff6a00) !important;
    border-right-color: var(--primary-color, #ff6a00) !important;
    border-left-color: transparent !important;
}

.ctext-message-text {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 4px;
    word-break: break-word;
}

.chat-conversation .ctext-wrap-content .chat-time {
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    color: var(--text-muted, #64748b) !important;
}

.chat-conversation .right .ctext-wrap-content .chat-time,
.chat-conversation .right .ctext-wrap-content .chat-time i,
.chat-conversation .right .ctext-wrap-content .chat-time span {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Status badge styling */
.msg-status-pending {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    margin-left: 6px;
    vertical-align: middle;
}

[data-theme="dark"] .msg-status-pending {
    background: rgba(0, 0, 0, 0.35);
    color: #ffd166 !important;
}

/* Conversation User Name & Avatar */
.chat-conversation .conversation-list .conversation-name {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-color, #1e293b) !important;
    margin-top: 4px !important;
}

.chat-conversation .right .conversation-name {
    text-align: right !important;
    margin-right: 2px !important;
}

[data-theme="dark"] .chat-conversation .right .conversation-name,
[data-theme="dark"] .chat-conversation .conversation-list .conversation-name {
    color: #cbd5e1 !important;
}

.chat-conversation .chat-avatar {
    margin-right: 10px !important;
}

.chat-conversation .right .chat-avatar {
    margin-left: 10px !important;
    margin-right: 0 !important;
    order: 3 !important;
}

.chat-conversation .chat-avatar .profileImage {
    margin: 0 !important;
}

/* Forms & Inputs */
.form-control, .form-select {
    background-color: var(--bg-main) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: 8px !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15) !important;
    background-color: var(--bg-main) !important;
    color: var(--text-color) !important;
}

/* Cards & Modals */
.card, .modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
}

.modal-header, .modal-footer {
    border-color: var(--border-color) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.25) !important;
}

.btn-light {
    background-color: var(--bg-sidebar-active) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: 8px !important;
}

.btn-light:hover {
    background-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Ensure Circular and Pill buttons retain exact shape regardless of generic .btn rules */
.rounded-circle,
.btn.rounded-circle,
.btn-primary.rounded-circle,
.btn-danger.rounded-circle,
button.rounded-circle {
    border-radius: 50% !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
}

.rounded-pill,
.btn.rounded-pill,
.btn-primary.rounded-pill,
.btn-light.rounded-pill {
    border-radius: 9999px !important;
}

/* Brand Primary Color Overrides for all icons and texts */
.text-primary,
a.text-primary,
i.text-primary,
span.text-primary,
.ri-phone-line.text-primary,
.ri-phone-fill.text-primary,
.ri-user-add-line.text-primary {
    color: var(--primary-color, #ff6a00) !important;
}

.text-primary-hover:hover {
    color: var(--primary-hover, #e05c00) !important;
}

.bg-primary {
    background-color: var(--primary-color, #ff6a00) !important;
}

.border-primary {
    border-color: var(--primary-color, #ff6a00) !important;
}

.bg-soft-primary,
.bg-primary-subtle {
    background-color: rgba(255, 106, 0, 0.15) !important;
    color: var(--primary-color, #ff6a00) !important;
}

/* Modals & Dropdown Theming */
.modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.modal-header .modal-title {
    color: var(--text-color) !important;
}

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

/* Universal Dropdown Menus & Items Theming */
.dropdown-menu {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: 10px !important;
    padding: 6px !important;
}

.dropdown-item {
    color: var(--text-color) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    transition: all 0.15s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-sidebar-active) !important;
    color: var(--primary-color, #ff6a00) !important;
}

.dropdown-item i {
    transition: color 0.15s ease !important;
}

.dropdown-item i.text-primary {
    color: var(--primary-color, #ff6a00) !important;
}

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

.dropdown-item:hover i {
    color: var(--primary-color, #ff6a00) !important;
}

.dropdown-divider {
    border-color: var(--border-color) !important;
}

#countryDropdownContainer .dropdown-menu {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

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

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

.country-dropdown-item:hover {
    background-color: var(--bg-sidebar-active) !important;
}

.country-dropdown-item.active {
    background-color: var(--bg-sidebar-active) !important;
}

.country-dropdown-item .badge {
    background-color: rgba(255, 106, 0, 0.15) !important;
    color: var(--primary-color) !important;
}

.dialpad-display-wrapper {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dialpad-display-wrapper input#dialDisplay {
    background-color: transparent !important;
    border: none !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

/* Alerts / Notification Bar modern styling overrides */
.alert {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    margin: 12px 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid transparent !important;
    transition: all 0.3s ease !important;
}

/* Ensure inline display: none takes priority over flex layout styles */
.alert[style*="display: none"] {
    display: none !important;
}

.alert-content {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.alert-icon {
    font-size: 20px !important;
}

.alertSelf {
    background-color: var(--alert-info-bg) !important;
    border: 1px solid var(--alert-info-border) !important;
    color: var(--alert-info-text) !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    margin: 10px 14px !important;
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.alertSelf h5,
#notificationAlertDiv h5,
#notificationErrorAlertDiv h5,
#notificationNotSupportAlertDiv h5 {
    color: var(--alert-info-text) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    display: inline-block !important;
}

.alertSelf .alert-icon {
    color: var(--primary-color) !important;
}

.alertSelf b a,
#notificationAlertDiv b a,
#notificationErrorAlertDiv b a {
    color: var(--primary-color) !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

.alertDanger {
    background-color: #ffeef0 !important;
    border-color: #ffd0d6 !important;
    color: #d81b3a !important;
}

/* Dark mode overrides for alerts to maintain contrast */
[data-theme="dark"] .alertSelf {
    background-color: rgba(255, 106, 0, 0.12) !important;
    border-color: rgba(255, 106, 0, 0.28) !important;
    color: #ff9e59 !important;
}

[data-theme="dark"] .alertSelf h5,
[data-theme="dark"] #notificationAlertDiv h5,
[data-theme="dark"] #notificationErrorAlertDiv h5,
[data-theme="dark"] #notificationNotSupportAlertDiv h5 {
    color: #ff9e59 !important;
}

[data-theme="dark"] .alertSelf .alert-icon {
    color: #ff9e59 !important;
}

[data-theme="dark"] .alertSelf b a,
[data-theme="dark"] #notificationAlertDiv b a,
[data-theme="dark"] #notificationErrorAlertDiv b a {
    color: #ff9e59 !important;
}

[data-theme="dark"] .alertDanger {
    background-color: rgba(239, 71, 111, 0.1) !important;
    border-color: rgba(239, 71, 111, 0.25) !important;
    color: #ff758f !important;
}

.alert span.closebtn,
.alert .closebtn,
.alertSelf .closebtn,
.alertSelf span.closebtn {
    color: var(--alert-info-text) !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    opacity: 0.85 !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    padding: 0 4px !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.alert span.closebtn:hover,
.alert .closebtn:hover,
.alertSelf .closebtn:hover,
.alertSelf span.closebtn:hover {
    opacity: 1 !important;
    color: var(--primary-color) !important;
    transform: translateY(-50%) scale(1.15) !important;
}

[data-theme="dark"] .alert span.closebtn,
[data-theme="dark"] .alert .closebtn,
[data-theme="dark"] .alertSelf .closebtn,
[data-theme="dark"] .alertSelf span.closebtn {
    color: #ff9e59 !important;
    opacity: 0.85 !important;
}

[data-theme="dark"] .alert span.closebtn:hover,
[data-theme="dark"] .alert .closebtn:hover,
[data-theme="dark"] .alertSelf .closebtn:hover,
[data-theme="dark"] .alertSelf span.closebtn:hover {
    opacity: 1 !important;
    color: #ffffff !important;
}

/* Ensure font size overrides on alert messages are clean */
.alert h5, .alert span {
    font-size: 14px !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* Login Page Theme Override */
.loginCard {
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Login Page Links & Labels (Remember Login Credentials / Forget Password?) */
#forgetPasswordLink,
.loginCard a#forgetPasswordLink,
body.login-page #forgetPasswordLink {
    color: var(--primary-color, #ff6a00) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, opacity 0.2s ease !important;
}

#forgetPasswordLink:hover,
.loginCard a#forgetPasswordLink:hover,
body.login-page #forgetPasswordLink:hover {
    color: #e65c00 !important;
    text-decoration: underline !important;
    opacity: 0.9 !important;
}

[data-theme="dark"] #forgetPasswordLink,
[data-theme="dark"] .loginCard a#forgetPasswordLink,
[data-theme="dark"] body.login-page #forgetPasswordLink {
    color: #ff8c3a !important;
}

[data-theme="dark"] #forgetPasswordLink:hover,
[data-theme="dark"] .loginCard a#forgetPasswordLink:hover,
[data-theme="dark"] body.login-page #forgetPasswordLink:hover {
    color: #ffa35c !important;
}

.loginCard .form-check-label,
body.login-page .form-check-label {
    color: var(--text-color, #1e293b) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    user-select: none !important;
}

[data-theme="dark"] .loginCard .form-check-label,
[data-theme="dark"] body.login-page .form-check-label {
    color: #cbd5e1 !important;
}

.loginCard .form-label,
body.login-page .form-label {
    color: var(--text-color, #1e293b) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

[data-theme="dark"] .loginCard .form-label,
[data-theme="dark"] body.login-page .form-label {
    color: #f1f5f9 !important;
}

#chatMainLogo.brand_logo_container {
    background-image: url("/image/chatpro_logo_dark.png") !important;
    height: 100px !important;
    background-size: contain !important;
}

/* Custom Inner logo container size adjustment */
.customInnerChatLogo {
    content: url("/image/chatpro_logo_dark.png") !important;
    width: auto !important;
    max-width: 140px !important;
    height: 32px !important;
    object-fit: contain !important;
}

/* Theme Toggle styles */
.theme-toggle-btn {
    cursor: pointer;
}

/* Active style toggle icon support */
[data-theme="dark"] .theme-icon-light {
    display: none !important;
}

[data-theme="dark"] .theme-icon-dark {
    display: inline-block !important;
}

[data-theme="light"] .theme-icon-light {
    display: inline-block !important;
}

[data-theme="light"] .theme-icon-dark {
    display: none !important;
}

/* Dynamic Login and Authentication Page Styling (supports Light/Dark mode toggling) */
body.login-page, 
body.authentication-page, 
body.user-authentication-page,
.account-pages, 
.authy-wrapper {
    background-color: var(--bg-main) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

body.login-page .card, 
body.authentication-page .card,
body.user-authentication-page .main {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: var(--shadow-lg) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

body.login-page .card-body,
body.user-authentication-page .bg-light,
body.authentication-page .parentStep,
body.authentication-page .appLabel,
body.authentication-page .smsLabel {
    background-color: var(--bg-card) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s ease !important;
}

body.login-page input,
body.user-authentication-page input,
body.authentication-page input,
body.authentication-page select {
    background-color: var(--bg-main) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

body.login-page input:focus,
body.user-authentication-page input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15) !important;
}

/* Dynamic Brand Logo rendering based on theme (Dark vs Light) */
#chatMainLogo.brand_logo_container {
    height: 100px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: background-image 0.2s ease !important;
}

/* Dark Mode Logo Settings */
[data-theme="dark"] #chatMainLogo.brand_logo_container {
    background-image: url("/image/chatpro_logo_dark.png") !important;
}

[data-theme="dark"] .brand-logo-img {
    content: url("/image/chatpro_logo_dark.png") !important;
}

/* Light Mode Logo Settings */
[data-theme="light"] #chatMainLogo.brand_logo_container {
    background-image: url("/image/chatpro_logo_dark.png") !important;
}

[data-theme="light"] .brand-logo-img {
    content: url("/image/chatpro_logo_dark.png") !important;
}

/* Wrapper alignment for authentication logos */
.siteLogo {
    background-color: transparent !important;
    display: inline-block !important;
    margin: 15px auto !important;
    text-align: center !important;
}

.siteLogo img.brand-logo-img {
    height: auto !important;
    max-height: 48px !important;
}

/* Chat navigation tab links dark mode visibility */
.tablinks {
    color: var(--text-muted) !important;
    border-bottom: 2px solid var(--border-color) !important;
}

.tablinks.tabActive {
    color: var(--primary-color) !important;
    border-bottom: 2px solid var(--primary-color) !important;
}

/* Recently deleted link styles */
#resentlyDeleted {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    transition: color 0.2s ease !important;
}

#resentlyDeleted:hover {
    color: var(--primary-color) !important;
}



/* Active chat list item style adjustments */
.chat-list li.active a,
.chat-list li.active,
.chat-list li.unread a,
.chat-list li.unread {
    background-color: var(--bg-sidebar-active) !important;
}

.chat-list li.active a *,
.chat-list li.active * {
    color: var(--text-color) !important;
}

.chat-list li.active a .chat-user-message,
.chat-list li.active .chat-user-message {
    color: var(--text-muted) !important;
}

/* Notes & Quick Response tabs styling overrides */
.user-profile-desc #infoTab {
    background-color: var(--bg-sidebar-active) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    display: flex !important;
    justify-content: space-between !important;
}

.user-profile-desc #infoTab .nav-item {
    flex: 1 !important;
    text-align: center !important;
}

.user-profile-desc #infoTab .nav-link {
    background-color: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    transition: all 0.2s ease !important;
}

.user-profile-desc #infoTab .nav-link:hover {
    color: var(--primary-color) !important;
}

.user-profile-desc #infoTab .nav-link.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(255, 106, 0, 0.2) !important;
}

/* Tab icon inversion for dark mode */
[data-theme="dark"] .user-profile-desc #infoTab .nav-link img {
    filter: none !important;
}

/* Notes accordion styling overrides */
.user-profile-desc .accordion-item {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.user-profile-desc .accordion-header button {
    background-color: var(--bg-sidebar) !important;
    color: var(--text-color) !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.user-profile-desc .accordion-button:not(.collapsed) {
    background-color: var(--bg-sidebar-active) !important;
    color: var(--primary-color) !important;
}

.user-profile-desc .accordion-button::after {
    filter: invert(var(--theme-invert, 0)) !important;
}

.user-profile-desc .accordion-body {
    background-color: var(--bg-card) !important;
    color: var(--text-color) !important;
}

.user-profile-desc p.text-muted {
    color: var(--text-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

.user-profile-desc .aboutSectionText {
    color: var(--text-color) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.user-profile-desc hr {
    border-top: 1px solid var(--border-color) !important;
    opacity: 0.15 !important;
    margin: 12px 0 !important;
}

.user-profile-desc .card-footer {
    background-color: var(--bg-sidebar) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Chat Textbox Styles */
#senderTextBox {
    background-color: var(--bg-main) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

#senderTextBox:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15) !important;
}

/* Premium Flat Chat List with Borders */
.chat-list li {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease !important;
    overflow: hidden !important;
}

.chat-list li a {
    margin: 0 !important;
    padding: 16px 20px !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    border-top: none !important;
    transition: all 0.2s ease !important;
}

.chat-list li:hover {
    background-color: var(--bg-sidebar-active) !important;
    transform: none !important;
    box-shadow: none !important;
}

.chat-list li.active {
    background-color: var(--bg-sidebar-active) !important;
    border-left: 4px solid var(--primary-color) !important;
    box-shadow: none !important;
}

.chat-list li.active a {
    background-color: transparent !important;
}

/* Sender Name and Last Message hierarchy */
.chat-list li .listSenderName {
    color: var(--text-color) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 4px !important;
}

.chat-list li .chat-user-message {
    color: var(--text-muted) !important;
    font-size: 13px !important;
}

.chat-list li .msgDetailDiv {
    color: var(--text-muted) !important;
    font-size: 11px !important;
}

/* User avatar styling overrides */
#contactList .chat-user-img img {
    background-color: #fff !important;
    border: 1px solid var(--border-color) !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
}

/* Dropdown & select UI improvements */
.form-select {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15) !important;
}

/* Search input improvements */
#searchChatList {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#searchChatList:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15) !important;
}

/* Welcome Screen Styling */
.user-chat-welcome {
    background-color: var(--bg-card) !important;
    color: var(--text-color) !important;
}

.user-chat-welcome h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
}

.user-chat-welcome p {
    color: var(--text-muted) !important;
}

/* Custom Simplebar Scrollbars styling */
.simplebar-scrollbar::before {
    background: var(--text-muted) !important;
    opacity: 0.25 !important;
    border-radius: 4px !important;
}

.simplebar-scrollbar.simplebar-visible::before {
    opacity: 0.55 !important;
}

/* Accuracy & styling overrides for image attachments */
.imageStyleClass .ctext-wrap-content {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.imageStyleClass .ctext-wrap-content::before {
    display: none !important;
}

/* Color overrides for double check status ticks and message timestamps */
.chat-conversation .ctext-wrap-content .chat-time,
.chat-conversation .ctext-wrap-content .chat-time i,
.chat-conversation .ctext-wrap-content .chat-time span {
    color: var(--text-muted) !important;
}

/* On the right side (agent's orange bubble), the time and double check should always be white/light */
.chat-conversation .right .ctext-wrap-content .chat-time,
.chat-conversation .right .ctext-wrap-content .chat-time i,
.chat-conversation .right .ctext-wrap-content .chat-time span {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Also for image attachments, make the time and status readable on the page background */
.imageStyleClass .chat-time,
.imageStyleClass .chat-time i,
.imageStyleClass .chat-time span {
    color: var(--text-muted) !important;
}

/* Left side (customer bubble) link colors matching the theme */
[data-theme="light"] #messageChatBody .ctext-wrap-content a:not(.attachmentLinkColor) {
    color: #000000 !important;
}

[data-theme="dark"] #messageChatBody .ctext-wrap-content a:not(.attachmentLinkColor) {
    color: #ffffff !important;
}

/* Right side (agent's orange bubble) link colors (always white for contrast against orange bg) */
#messageChatBody .right .ctext-wrap-content a {
    color: #ffffff !important;
}

.ctext-wrap-content a:hover {
    text-decoration: underline !important;
}

/* Remember me custom checkbox background color overrides (Orange) */
body.login-page #chatRememberCheck:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

body.login-page #chatRememberCheck:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 106, 0, 0.25) !important;
}

/* Card and Authentication UI Overrides for Dark/Light Mode Cohesion */
.authyContentDiv {
    background-color: var(--bg-card) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.card-header {
    background-color: var(--bg-sidebar) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.card-header h5 {
    color: var(--text-color) !important;
}

.card-body {
    background-color: var(--bg-card) !important;
    color: var(--text-color) !important;
}

/* Radio Option Labels checked states */
.btn-check:checked + .appLabel,
.btn-check:checked + .smsLabel {
    background-color: rgba(27, 132, 255, 0.15) !important;
    border-color: #1b84ff !important;
}

/* Form Controls & Switches Overrides */
.form-check-input {
    background-color: var(--bg-main) !important;
    border-color: var(--border-color) !important;
}

.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.form-check-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 106, 0, 0.25) !important;
}

/* Custom switch handle knob styling for dark mode when unchecked */
[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.6%29'/%3e%3c/svg%3e") !important;
}

/* Specific styling for active/inactive checkbox text in switches */
.form-switch label,
#authenticationCheckboxText,
#smsAuthenticationCheckboxText {
    color: var(--text-color) !important;
    font-weight: 500;
    margin-left: 8px;
    vertical-align: middle;
}

/* Inactive labels dimmed slightly */
.form-switch input:not(:checked) + label,
#authenticationCheckbox:not(:checked) + #authenticationCheckboxText,
#smsAuthenticationCheckbox:not(:checked) + #smsAuthenticationCheckboxText {
    color: var(--text-muted) !important;
}

/* Ensure generic border lines use the correct border color variable */
.border,
.border-dashed {
    border-color: var(--border-color) !important;
}

/* Notes & Quick Response icon visibility fixes in Dark Mode */
#senderInfoTab img,
#quickResponseTab img {
    background-color: transparent !important;
}

[data-theme="dark"] .notes-icon,
[data-theme="dark"] .quick-response-icon {
    filter: none !important;
}

/* Quick Response Card & Screen Dark Mode Custom Overrides */
.quickTextLabel {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Heading color of quick response card to theme primary color */
.quickTextLabel .dealerNameColor {
    color: var(--primary-color) !important;
}

/* Quick response list action icons and messages styling */
.quickTextLabel .chat-user-message {
    color: var(--text-muted) !important;
}

.quickResponseActions span i {
    color: var(--text-muted) !important;
    transition: color 0.2s ease;
}

.quickResponseActions span i:hover {
    color: var(--primary-color) !important;
}

.quickResponseSearchDiv i {
    color: var(--text-muted) !important;
}

/* Transfer button icon visibility in Dark Mode */
[data-theme="dark"] .transferButton img {
    filter: invert(1) brightness(2) !important;
}

/* Floating Theme Switch button on the Login Page */
.login-page .theme-toggle-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
    color: var(--text-color) !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md) !important;
    transition: all 0.3s ease !important;
    z-index: 1000;
}

[data-theme="dark"] .login-page .theme-toggle-btn:hover {
    background-color: var(--bg-card) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

[data-theme="light"] .login-page .theme-toggle-btn:hover {
    background-color: var(--bg-card) !important;
    color: #1e293b !important;
    border-color: #1e293b !important;
}

/* User Profile/Notes toggle button dark mode color */
[data-theme="dark"] .user-profile-show,
[data-theme="dark"] .user-profile-show i {
    color: #ffffff !important;
}

/* AI Reply text color in Dark Mode */
[data-theme="dark"] #aiReplyToggleContainer span {
    color: #ffffff !important;
}

/* Profile Image Background Color Override to Brand Primary Color */
.profileImage,
.mainProfileImage,
.userAgentProfileImage {
    background: var(--primary-color) !important;
}

/* Make unchecked switch/checkbox border more visible in dark mode */
[data-theme="dark"] .form-check-input:not(:checked) {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Premium Switch Toggle Styling Overrides for Dark Mode */
[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Chat conversation image and attachment overflow fixes */
.chat-conversation .imageStyleClass .ctext-wrap-content {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.chat-conversation .imageStyleClass .ctext-wrap-content::before {
    display: none !important;
}

.chat-conversation .imageStyleClass img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

.attached-file-box {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="light"] .attached-file-box {
    border-color: var(--border-color) !important;
}

/* Word-wrapping for attachment names inside the chat bubble */
.attached-file h5 {
    word-break: break-all !important;
    white-space: normal !important;
}

/* Expanded width for conversation bubbles */
.chat-conversation .conversation-list .ctext-wrap-content {
    width: auto !important;
    max-width: 75vw !important;
}

.chat-conversation .right .conversation-list .ctext-wrap .ctext-wrap-content {
    width: auto !important;
    max-width: 54vw !important;
}

/* Mobile viewport adjustments for iOS and Android notch devices */
.chat-input-section {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 991.98px) {
    body {
        padding-top: env(safe-area-inset-top) !important;
    }
}

/* Prevent auto-zooming on iOS when focusing text input fields on mobile */
@media screen and (max-width: 767px) {
    input, 
    select, 
    textarea, 
    .form-control,
    .form-select {
        font-size: 16px !important;
    }
}

/* Clip overflowing chat and group list items at container boundary */
.chat-message-list,
.chat-group-list {
    overflow: hidden !important;
}

/* Prevent horizontal scrolling on mobile viewports due to off-screen panels */
html,
body,
.layout-wrapper {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Styling for Native Scrollbars in Dark & Light Modes */
.chat-message-list,
.chat-conversation,
.accordion-body,
#quickResponseSectionContainer,
.userAgentDiv {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth momentum scrolling on iOS */
    scrollbar-width: thin !important; /* Firefox: thin scrollbar */
    scrollbar-color: var(--border-color) transparent !important; /* Firefox colors */
}

/* Chrome, Safari, and Edge custom scrollbar styles */
.chat-message-list::-webkit-scrollbar,
.chat-conversation::-webkit-scrollbar,
.accordion-body::-webkit-scrollbar,
#quickResponseSectionContainer::-webkit-scrollbar,
.userAgentDiv::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.chat-message-list::-webkit-scrollbar-track,
.chat-conversation::-webkit-scrollbar-track,
.accordion-body::-webkit-scrollbar-track,
#quickResponseSectionContainer::-webkit-scrollbar-track,
.userAgentDiv::-webkit-scrollbar-track {
    background: transparent !important;
}

.chat-message-list::-webkit-scrollbar-thumb,
.chat-conversation::-webkit-scrollbar-thumb,
.accordion-body::-webkit-scrollbar-thumb,
#quickResponseSectionContainer::-webkit-scrollbar-thumb,
.userAgentDiv::-webkit-scrollbar-thumb {
    background-color: var(--border-color) !important;
    border-radius: 10px !important;
    transition: background-color 0.2s ease-in-out !important;
}

.chat-message-list::-webkit-scrollbar-thumb:hover,
.chat-conversation::-webkit-scrollbar-thumb:hover,
.accordion-body::-webkit-scrollbar-thumb:hover,
#quickResponseSectionContainer::-webkit-scrollbar-thumb:hover,
.userAgentDiv::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted) !important;
}

/* Hide welcome screen on mobile and tablet devices */
@media (max-width: 991.98px) {
    #welcomeChatScreen {
        display: none !important;
    }
}

/* ==========================================================================
   COMPREHENSIVE DARK MODE CONTRAST & VISIBILITY ENHANCEMENTS
   ========================================================================== */
[data-theme="dark"] .text-dark,
[data-theme="dark"] h1.text-dark,
[data-theme="dark"] h2.text-dark,
[data-theme="dark"] h3.text-dark,
[data-theme="dark"] h4.text-dark,
[data-theme="dark"] h5.text-dark,
[data-theme="dark"] h6.text-dark,
[data-theme="dark"] p.text-dark,
[data-theme="dark"] span.text-dark,
[data-theme="dark"] .call-contact-name,
[data-theme="dark"] .timeline-title {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .timeline-time {
    color: #94a3b8 !important;
}

[data-theme="dark"] .timeline-duration {
    color: #f1f5f9 !important;
}

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

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

[data-theme="dark"] .border-light,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: var(--border-color) !important;
}

/* Calls Page Specific Dark Mode Visibility */
[data-theme="dark"] .calls-sidebar {
    background-color: var(--bg-sidebar) !important;
    border-right-color: var(--border-color) !important;
}

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

[data-theme="dark"] .call-item,
[data-theme="dark"] .contact-item {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .call-item:hover,
[data-theme="dark"] .contact-item:hover {
    background-color: var(--bg-sidebar-active) !important;
}

[data-theme="dark"] .call-item.active,
[data-theme="dark"] .contact-item.active {
    background-color: var(--bg-sidebar-active) !important;
    border-left: 4px solid var(--primary-color) !important;
}

[data-theme="dark"] .call-item h6,
[data-theme="dark"] .contact-item h6 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .call-item span,
[data-theme="dark"] .contact-item span {
    color: #94a3b8;
}

/* Filter Buttons in Dark Mode */
[data-theme="dark"] .filter-btn.btn-outline-secondary {
    border: 1px solid var(--border-color) !important;
    background-color: var(--bg-card) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .filter-btn.btn-outline-secondary:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: var(--bg-sidebar-active) !important;
}

[data-theme="dark"] .filter-btn.btn-primary.active,
[data-theme="dark"] .filter-btn.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Call Activity Timeline & Header Card in Dark Mode */
[data-theme="dark"] #callsDetailActiveContainer .border-bottom {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] #detailName {
    color: #f8fafc !important;
}

[data-theme="dark"] #detailPhone,
[data-theme="dark"] #detailEmail,
[data-theme="dark"] #detailDept {
    color: #94a3b8 !important;
}

[data-theme="dark"] .card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .card h6 {
    color: #f8fafc !important;
}

[data-theme="dark"] #timelineCallCountBadge {
    background-color: var(--bg-sidebar-active) !important;
    color: #cbd5e1 !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .timeline {
    border-left-color: var(--border-color) !important;
}

[data-theme="dark"] .timeline span.position-absolute,
[data-theme="dark"] .timeline-dot,
[data-theme="dark"] #timelineIconSpan,
[data-theme="dark"] span[id^="timelineIconSpan"],
[data-theme="dark"] .timeline .bg-white {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
}

[data-theme="dark"] .timeline h6,
[data-theme="dark"] #timelineCallType {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .timeline span.text-muted,
[data-theme="dark"] #timelineCallTime {
    color: #94a3b8 !important;
}

[data-theme="dark"] .timeline strong,
[data-theme="dark"] #timelineDuration {
    color: #f1f5f9 !important;
}

/* Call Status Badges in Dark Mode */
[data-theme="dark"] .badge-incoming,
[data-theme="dark"] .bg-success-subtle {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .badge-outgoing,
[data-theme="dark"] .bg-primary-subtle {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

[data-theme="dark"] .badge-missed,
[data-theme="dark"] .bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

[data-theme="dark"] .badge-voicemail,
[data-theme="dark"] .bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

[data-theme="dark"] .btn-soft-primary {
    background-color: rgba(255, 106, 0, 0.15) !important;
    color: #ff9e59 !important;
    border: 1px solid rgba(255, 106, 0, 0.3) !important;
}

[data-theme="dark"] .btn-soft-primary:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Call Activity History Circular Arrow Badges */
.activity-arrow-circle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

.activity-arrow-circle.activity-icon-incoming {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.activity-arrow-circle.activity-icon-outgoing {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

.activity-arrow-circle.activity-icon-missed {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

[data-theme="dark"] .activity-arrow-circle.activity-icon-incoming {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .activity-arrow-circle.activity-icon-outgoing {
    background-color: rgba(59, 130, 246, 0.18) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

[data-theme="dark"] .activity-arrow-circle.activity-icon-missed {
    background-color: rgba(239, 68, 68, 0.18) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

.activity-call-item:last-child {
    border-bottom: none !important;
}

/* ==========================================================================
   MODERN FLOATING TOAST NOTIFICATION SYSTEM
   ========================================================================== */
.app-toast-container {
    position: fixed !important;
    top: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: none !important;
}

.app-toast {
    pointer-events: auto !important;
    background-color: var(--bg-card, #ffffff) !important;
    color: var(--text-color, #1e293b) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    border-radius: 50px !important;
    padding: 10px 22px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 220px !important;
    max-width: 90vw !important;
    animation: appToastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-toast.app-toast-hiding {
    opacity: 0 !important;
    transform: translateY(-20px) scale(0.9) !important;
}

.app-toast .app-toast-icon {
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.app-toast.app-toast-success .app-toast-icon {
    color: #10b981 !important;
}

.app-toast.app-toast-error .app-toast-icon {
    color: #ef4444 !important;
}

.app-toast.app-toast-info .app-toast-icon {
    color: var(--primary-color, #ff6a00) !important;
}

[data-theme="dark"] .app-toast {
    background-color: #151b2c !important;
    color: #f1f5f9 !important;
    border-color: #27314a !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

@keyframes appToastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-25px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   CHAT MESSAGE ACTIONS DROPDOWN (COPY / SAVE) POSITIONING & VISIBILITY
   ========================================================================== */
.chat-conversation .dropdown {
    position: relative !important;
}

.chat-conversation .dropdown .dropdown-toggle {
    color: var(--text-muted) !important;
    font-size: 18px !important;
    padding: 2px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.chat-conversation .dropdown .dropdown-toggle:hover,
.chat-conversation .dropdown .dropdown-toggle:focus {
    color: var(--primary-color, #ff6a00) !important;
    background-color: var(--bg-sidebar-active) !important;
}

.chat-conversation .dropdown .dropdown-menu {
    min-width: 140px !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
    padding: 5px !important;
    z-index: 1060 !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 4px !important;
}

.chat-conversation .dropdown .dropdown-item {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 7px 12px !important;
    border-radius: 6px !important;
    color: var(--text-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    transition: all 0.15s ease !important;
}

.chat-conversation .dropdown .dropdown-item i {
    font-size: 15px !important;
    color: var(--text-muted) !important;
    transition: color 0.15s ease !important;
}

.chat-conversation .dropdown .dropdown-item:hover {
    background-color: var(--bg-sidebar-active) !important;
    color: var(--primary-color, #ff6a00) !important;
}

.chat-conversation .dropdown .dropdown-item:hover i {
    color: var(--primary-color, #ff6a00) !important;
}

/* Ensure message containers do not clip the dropdown menu */
.chat-conversation .conversation-list,
.chat-conversation .ctext-wrap,
.chat-conversation .chat-message-list,
.chat-conversation li {
    overflow: visible !important;
}

/* ==========================================================================
   VEHICLE INVENTORY DETAILS MODAL THEME (LIGHT & DARK)
   ========================================================================== */
#inventoryDataModal .modal-content {
    background-color: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    color: var(--text-color, #1e293b) !important;
    border-radius: 14px !important;
}

#inventoryDataModal .modal-header {
    background-color: var(--bg-card, #ffffff) !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
    color: var(--text-color, #1e293b) !important;
    padding: 16px 24px !important;
}

#inventoryDataModal #invModalTitle {
    color: var(--text-color, #0f172a) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

#inventoryDataModal .inv-stock-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    line-height: 1.4 !important;
    transition: all 0.2s ease !important;
}

/* Light Theme Stock Status Badges */
#inventoryDataModal .inv-stock-active {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

#inventoryDataModal .inv-stock-sold {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

#inventoryDataModal .inv-stock-other {
    background-color: rgba(245, 158, 11, 0.12) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

#inventoryDataModal .modal-body {
    background-color: var(--bg-main, #f8fafc) !important;
}

#inventoryDataModal .card {
    background-color: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
}

#inventoryDataModal .image-gallery-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#inventoryDataModal .main-img-container {
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background-color: var(--bg-main, #f1f5f9) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 8px !important;
}

#inventoryDataModal #invMainImage {
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: auto !important;
}

#inventoryDataModal .thumbnail-gallery {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 0 !important;
}

#inventoryDataModal .inv-thumb-img {
    width: 66px !important;
    height: 52px !important;
    min-width: 66px !important;
    min-height: 52px !important;
    object-fit: cover !important;
    background-color: var(--bg-card, #ffffff) !important;
    border: 2px solid var(--border-color, #e2e8f0) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

#inventoryDataModal .inv-thumb-img:hover {
    border-color: var(--primary-color, #ff6a00) !important;
    transform: scale(1.04);
}

#inventoryDataModal .inv-thumb-img.border-primary,
#inventoryDataModal .inv-thumb-img.active {
    border: 2px solid var(--primary-color, #ff6a00) !important;
    box-shadow: 0 2px 8px rgba(255, 106, 0, 0.3) !important;
}

/* Specs Table */
#inventoryDataModal .table-responsive {
    background-color: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#inventoryDataModal .inv-specs-table {
    color: var(--text-color, #1e293b) !important;
    background-color: var(--bg-card, #ffffff) !important;
    border-color: var(--border-color, #e2e8f0) !important;
    height: 100% !important;
    margin-bottom: 0 !important;
}

#inventoryDataModal .inv-specs-table th {
    background-color: var(--bg-sidebar-active, #f1f5f9) !important;
    color: var(--text-muted, #64748b) !important;
    font-weight: 600 !important;
    border-color: var(--border-color, #e2e8f0) !important;
    padding: 8px 14px !important;
    vertical-align: middle !important;
}

#inventoryDataModal .inv-specs-table td {
    background-color: var(--bg-card, #ffffff) !important;
    color: var(--text-color, #1e293b) !important;
    border-color: var(--border-color, #e2e8f0) !important;
    padding: 8px 14px !important;
    vertical-align: middle !important;
}

#inventoryDataModal .inv-specs-table #invPrice {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

/* Description Card */
#inventoryDataModal .card-header {
    background-color: var(--bg-sidebar-active, #f1f5f9) !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
}

#inventoryDataModal .card-header h6 {
    color: var(--text-color, #1e293b) !important;
}

#inventoryDataModal #invDescription {
    background-color: var(--bg-card, #ffffff) !important;
    color: var(--text-color, #1e293b) !important;
    line-height: 1.6 !important;
}

#inventoryDataModal .modal-footer {
    background-color: var(--bg-card, #ffffff) !important;
    border-top: 1px solid var(--border-color, #e2e8f0) !important;
}

/* Dark Mode Specific Overrides for Inventory Modal */
[data-theme="dark"] #inventoryDataModal .modal-content {
    background-color: #151b2c !important;
    border-color: #27314a !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] #inventoryDataModal .modal-header {
    background-color: #151b2c !important;
    border-bottom-color: #27314a !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] #inventoryDataModal #invModalTitle {
    color: #f8fafc !important;
}

[data-theme="dark"] #inventoryDataModal .inv-stock-active {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.12) !important;
}

[data-theme="dark"] #inventoryDataModal .inv-stock-sold {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

[data-theme="dark"] #inventoryDataModal .inv-stock-other {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

[data-theme="dark"] #inventoryDataModal .modal-body {
    background-color: #0b0f19 !important;
}

[data-theme="dark"] #inventoryDataModal .card {
    background-color: #151b2c !important;
    border-color: #27314a !important;
}

[data-theme="dark"] #inventoryDataModal .main-img-container {
    background-color: #0b0f19 !important;
    border-color: #27314a !important;
}

[data-theme="dark"] #inventoryDataModal .inv-thumb-img {
    background-color: #151b2c !important;
    border-color: #27314a !important;
}

[data-theme="dark"] #inventoryDataModal .table-responsive {
    background-color: #151b2c !important;
    border-color: #27314a !important;
}

[data-theme="dark"] #inventoryDataModal .inv-specs-table {
    background-color: #151b2c !important;
    border-color: #27314a !important;
}

[data-theme="dark"] #inventoryDataModal .inv-specs-table th {
    background-color: #1e2538 !important;
    color: #94a3b8 !important;
    border-color: #27314a !important;
}

[data-theme="dark"] #inventoryDataModal .inv-specs-table td {
    background-color: #151b2c !important;
    color: #f1f5f9 !important;
    border-color: #27314a !important;
}

[data-theme="dark"] #inventoryDataModal .inv-specs-table #invPrice {
    color: #f87171 !important;
}

[data-theme="dark"] #inventoryDataModal .card-header {
    background-color: #1e2538 !important;
    border-bottom-color: #27314a !important;
}

[data-theme="dark"] #inventoryDataModal .card-header h6 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] #inventoryDataModal #invDescription {
    background-color: #151b2c !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] #inventoryDataModal .modal-footer {
    background-color: #151b2c !important;
    border-top-color: #27314a !important;
}

/* ==========================================================================
   UNIVERSAL MODAL DESIGN SYSTEM (LIGHT & DARK THEMES)
   ========================================================================== */
.modal-dialog {
    margin: 3.5rem auto 1.75rem auto !important;
    display: block !important;
    min-height: auto !important;
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 1.5rem auto !important;
    }
}

.modal-content {
    background-color: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    color: var(--text-color, #1e293b) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
}

.modal-header {
    background-color: var(--bg-card, #ffffff) !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
    color: var(--text-color, #1e293b) !important;
    padding: 16px 22px !important;
}

.modal-title {
    color: var(--text-color, #0f172a) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.modal-body {
    background-color: var(--bg-card, #ffffff) !important;
    color: var(--text-color, #1e293b) !important;
    padding: 22px 24px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
}

.modal-body h4,
.modal-body h5,
.modal-body h6,
.modal-body p {
    color: var(--text-color, #0f172a) !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

/* Ensure confirmation questions are not green */
.modal-body h5.text-success,
.modal-body h4.text-success,
.modal-body h5.text-info,
.modal-body h4.text-info {
    color: var(--text-color, #0f172a) !important;
}

.modal-body label.text-danger,
.modal-body .control-label.text-danger {
    color: #ef4444 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

.modal-body .text-muted {
    color: var(--text-muted, #64748b) !important;
}

/* Modal Form Inputs & Selects */
.modal .form-control,
.modal .form-select {
    background-color: var(--bg-main, #f8fafc) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    color: var(--text-color, #1e293b) !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
}

.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--primary-color, #ff6a00) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15) !important;
}

.modal .form-label {
    color: var(--text-color, #1e293b) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

/* Modal Tables */
.modal table {
    color: var(--text-color, #1e293b) !important;
    border-color: var(--border-color, #e2e8f0) !important;
}

.modal table th {
    background-color: var(--bg-sidebar-active, #f1f5f9) !important;
    color: var(--text-muted, #64748b) !important;
    border-color: var(--border-color, #e2e8f0) !important;
    padding: 9px 14px !important;
}

.modal table td {
    background-color: var(--bg-card, #ffffff) !important;
    color: var(--text-color, #1e293b) !important;
    border-color: var(--border-color, #e2e8f0) !important;
    padding: 9px 14px !important;
}

/* Modal Footer & Buttons */
.modal-footer {
    background-color: var(--bg-card, #ffffff) !important;
    border-top: 1px solid var(--border-color, #e2e8f0) !important;
    padding: 14px 22px !important;
    gap: 10px !important;
}

.modal-footer .btn {
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    transition: all 0.2s ease !important;
}

.modal-footer .btn-primary,
.modal .btn-primary {
    background-color: var(--primary-color, #ff6a00) !important;
    border-color: var(--primary-color, #ff6a00) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(255, 106, 0, 0.25) !important;
}

.modal-footer .btn-primary:hover,
.modal .btn-primary:hover {
    background-color: var(--primary-hover, #e05e00) !important;
    border-color: var(--primary-hover, #e05e00) !important;
    transform: translateY(-1px);
}

.modal-footer .btn-secondary,
.modal-footer .btn-light,
.modal .btn-secondary,
.modal .btn-light {
    background-color: var(--bg-sidebar-active, #f1f5f9) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    color: var(--text-color, #475569) !important;
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-light:hover,
.modal .btn-secondary:hover,
.modal .btn-light:hover {
    background-color: var(--border-color, #e2e8f0) !important;
    color: var(--text-color, #1e293b) !important;
}

/* ==========================================================================
   UNIVERSAL MODAL DARK MODE OVERRIDES
   ========================================================================== */
[data-theme="dark"] .modal-content {
    background-color: #151b2c !important;
    border-color: #27314a !important;
    color: #f1f5f9 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .modal-header {
    background-color: #151b2c !important;
    border-bottom-color: #27314a !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .modal-title {
    color: #f8fafc !important;
}

[data-theme="dark"] .modal-body {
    background-color: #151b2c !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .modal-body h4,
[data-theme="dark"] .modal-body h5,
[data-theme="dark"] .modal-body h6,
[data-theme="dark"] .modal-body p,
[data-theme="dark"] .modal-body h4.text-success,
[data-theme="dark"] .modal-body h5.text-success,
[data-theme="dark"] .modal-body h4.text-info,
[data-theme="dark"] .modal-body h5.text-info {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .modal-body label.text-danger,
[data-theme="dark"] .modal-body .control-label.text-danger {
    color: #f87171 !important;
}

[data-theme="dark"] .modal-body .text-muted {
    color: #94a3b8 !important;
}

[data-theme="dark"] .modal .form-control,
[data-theme="dark"] .modal .form-select {
    background-color: #0b0f19 !important;
    border-color: #27314a !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .modal .form-label {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .modal table {
    color: #f1f5f9 !important;
    border-color: #27314a !important;
}

[data-theme="dark"] .modal table th {
    background-color: #1e2538 !important;
    color: #94a3b8 !important;
    border-color: #27314a !important;
}

[data-theme="dark"] .modal table td {
    background-color: #151b2c !important;
    color: #f1f5f9 !important;
    border-color: #27314a !important;
}

[data-theme="dark"] .modal-footer {
    background-color: #151b2c !important;
    border-top-color: #27314a !important;
}

[data-theme="dark"] .modal-footer .btn-secondary,
[data-theme="dark"] .modal-footer .btn-light,
[data-theme="dark"] .modal .btn-secondary,
[data-theme="dark"] .modal .btn-light {
    background-color: #1e2538 !important;
    border-color: #27314a !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .modal-footer .btn-secondary:hover,
[data-theme="dark"] .modal-footer .btn-light:hover,
[data-theme="dark"] .modal .btn-secondary:hover,
[data-theme="dark"] .modal .btn-light:hover {
    background-color: #27314a !important;
    color: #ffffff !important;
}

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

/* ==========================================================================
   CHOSEN SELECT DROPDOWNS THEMING (LIGHT & DARK MODES)
   ========================================================================== */
.chosen-container {
    font-size: 13.5px !important;
    width: 100% !important;
}

/* Closed Trigger Button */
.chosen-container-single .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single,
.chosen-container-active .chosen-single {
    background-color: var(--bg-card, #ffffff) !important;
    background-image: none !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    color: var(--text-color, #1e293b) !important;
    border-radius: 8px !important;
    height: 40px !important;
    line-height: 38px !important;
    padding: 0 14px !important;
    box-shadow: none !important;
}

.chosen-container-single .chosen-single div,
.chosen-container-single .chosen-single div:after,
.chosen-container-single .chosen-single:not(.chosen-single-with-deselect) div:after,
.chosen-container-active.chosen-with-drop .chosen-single div:after,
.chosen-container-single .chosen-single abbr {
    background-color: transparent !important;
    box-shadow: none !important;
}

.chosen-container-single .chosen-single span {
    color: var(--text-color, #1e293b) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 38px !important;
    margin-right: 28px !important;
}

.chosen-container-single .chosen-default span {
    color: var(--text-muted, #64748b) !important;
}

/* Arrow Icon Perfectly Centered */
.chosen-container-single .chosen-single div {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 10px !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

.chosen-container-single .chosen-single div:after {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E") !important;
    background-size: 14px 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.chosen-container-active.chosen-with-drop .chosen-single div:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff6a00' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E") !important;
}

.chosen-container-active .chosen-single,
.chosen-container.chosen-with-drop .chosen-single {
    border-color: var(--primary-color, #ff6a00) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15) !important;
}

.chosen-container.chosen-with-drop .chosen-single {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Dropdown Container */
.chosen-container .chosen-drop {
    background-color: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-top: none !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    padding: 8px !important;
    margin-top: 0 !important;
}

/* Search input inside chosen */
.chosen-container-single .chosen-search {
    padding: 4px !important;
    position: relative !important;
    margin-bottom: 4px !important;
}

.chosen-container-single .chosen-search input[type="text"] {
    background-color: var(--bg-main, #f8fafc) !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 15px 15px !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    color: var(--text-color, #1e293b) !important;
    border-radius: 6px !important;
    padding: 8px 32px 8px 12px !important;
    font-size: 13px !important;
    height: 36px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.chosen-container-single .chosen-search input[type="text"]:focus {
    border-color: var(--primary-color, #ff6a00) !important;
    box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.15) !important;
}

/* Hide broken pseudo-element from component-chosen */
.chosen-container-single .chosen-search:after {
    display: none !important;
    content: none !important;
}

/* Results List */
.chosen-container .chosen-results {
    margin: 0 !important;
    padding: 4px 2px !important;
    max-height: 220px !important;
}

.chosen-container .chosen-results li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: var(--text-color, #1e293b) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    line-height: 1.4 !important;
    margin-bottom: 2px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

/* Remove clipped :before icon */
.chosen-container .chosen-results li:before,
.chosen-container .chosen-results li.result-selected:before,
.chosen-container .chosen-results li.highlighted:before {
    display: none !important;
    content: none !important;
}

/* Highlighted (Hovered) Option */
.chosen-container .chosen-results li.highlighted {
    background-color: rgba(255, 106, 0, 0.12) !important;
    color: var(--primary-color, #ff6a00) !important;
}

/* Selected Active Option */
.chosen-container .chosen-results li.result-selected {
    background-color: var(--primary-color, #ff6a00) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.chosen-container .chosen-results li.result-selected:after {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Dark Mode Overrides */
[data-theme="dark"] .chosen-container-single .chosen-single,
[data-theme="dark"] .chosen-container-active.chosen-with-drop .chosen-single,
[data-theme="dark"] .chosen-container-active .chosen-single {
    background-color: #151b2c !important;
    border-color: #27314a !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .chosen-container-single .chosen-single span {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .chosen-container-single .chosen-default span {
    color: #94a3b8 !important;
}

[data-theme="dark"] .chosen-container .chosen-drop {
    background-color: #151b2c !important;
    border-color: #27314a !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .chosen-container-single .chosen-search input[type="text"] {
    background-color: #0b0f19 !important;
    border-color: #27314a !important;
    color: #f1f5f9 !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .chosen-container-single .chosen-search input[type="text"]:focus {
    border-color: #ff6a00 !important;
    box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.25) !important;
}

[data-theme="dark"] .chosen-container .chosen-results li {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .chosen-container .chosen-results li.highlighted {
    background-color: #1e2538 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .chosen-container .chosen-results li.result-selected {
    background-color: #ff6a00 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .chosen-container .chosen-results .no-results {
    color: #94a3b8 !important;
}

/* ==========================================================================
   Recently Deleted Chat Items in Sidebar (Full Light Red Background)
   ========================================================================== */
#contactList li.isDeleted,
#contactList li.isDeleted > a {
    background-color: #fee2e2 !important;
    border-radius: 8px !important;
    border: 1px solid #fca5a5 !important;
    transition: all 0.2s ease !important;
}

#contactList li.isDeleted {
    margin-bottom: 6px !important;
    padding: 0 !important;
}

#contactList li.isDeleted:hover > a {
    background-color: #fecaca !important;
}

#contactList li.isDeleted.messageItemActive > a {
    background-color: #f87171 !important;
    border-color: #ef4444 !important;
}

#contactList li.isDeleted.messageItemActive .chat-user-message h5,
#contactList li.isDeleted.messageItemActive .chat-user-message p,
#contactList li.isDeleted.messageItemActive .chat-user-message span {
    color: #ffffff !important;
}

#contactList li.isDeleted .chat-user-message h5 {
    color: #991b1b !important;
    font-weight: 600 !important;
}

#contactList li.isDeleted .chat-user-message p,
#contactList li.isDeleted .chat-user-message span {
    color: #b91c1c !important;
}

/* Dark Theme Support for Sidebar Deleted Chat Items */
[data-theme="dark"] #contactList li.isDeleted,
[data-theme="dark"] #contactList li.isDeleted > a {
    background-color: #3b1219 !important;
    border-color: #5c1d25 !important;
}

[data-theme="dark"] #contactList li.isDeleted:hover > a {
    background-color: #4a1920 !important;
}

[data-theme="dark"] #contactList li.isDeleted.messageItemActive > a {
    background-color: #5c1d25 !important;
    border-color: #ef4444 !important;
}

[data-theme="dark"] #contactList li.isDeleted .chat-user-message h5 {
    color: #fca5a5 !important;
}

[data-theme="dark"] #contactList li.isDeleted .chat-user-message p,
[data-theme="dark"] #contactList li.isDeleted .chat-user-message span {
    color: #f87171 !important;
}