:root {
  /* Light mode colors */
  --black: #000;
  --white: #fff;
  --primary: #8ec73c;
  --text: #051143;
  --success: #fff4de;
  --border: #bcbcbc;
  --gray: #657488;

  /* variables for backgrounds */
  --background-color: #fff;
  --card-background: #f5f5f5;
  --header-background: #ffffff;
  --sidebar-active-background: var(--primary);
  --table-header-bg: #f5f7ff;
  --chat-bg: #f8fafb;
  --chat-bubble: #fff;
  --chat-date-bg: #d5ff97;
  --user-hello-bg: #e0ffb3;
  --meeting-bg: #eff2ff;
  --call-card-bg: #dde3ff;
  --mute-icon-bg: #c4ceff;
  --mute-btn-bg: #f8d7d5;
  --video-btn-bg: #f8d7d5;
  --modal-bg: #eff2ff;
  --video-bar-bg: #000;
  --call-chat-bg: #dde3ff;
  --emoji-container-bg: rgba(0, 0, 0, 0.8);
}

/* Dark mode colors */
[data-theme="dark"] {
  --black: #fff;
  --white: #121212;
  --primary: #a6e050;
  --text: #e0e0e0;
  --success: #3a3000;
  --border: #555555;
  --gray: #a0a7b5;

  /* dark mode backgrounds */
  --background-color: #121212;
  --card-background: #222222;
  --header-background: #1a1a1a;
  --sidebar-active-background: #4a6921;
  --table-header-bg: #1e1e2f;
  --chat-bg: #1a1a1a;
  --chat-bubble: #252525;
  --chat-date-bg: #6ba71b;
  --user-hello-bg: #4a6921;
  --meeting-bg: #242424;
  --call-card-bg: #303030;
  --mute-icon-bg: #414141;
  --mute-btn-bg: #4c2522;
  --video-btn-bg: #4c2522;
  --modal-bg: #242424;
  --video-bar-bg: #000;
  --call-chat-bg: #414141;
  --emoji-container-bg: rgba(0, 0, 0, 0.9);
}

body {
  color: var(--text);
  background-color: var(--background-color);
  background-image: url("../images/site-bg.png");
  transition: all 0.3s ease;
}

[data-theme="dark"] body {
  background-image: url("../images/site-bg.png"), linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  background-blend-mode: overlay;
}

/* Links and buttons */
a {
  color: var(--primary);
}

.site-btn a {
  color: var(--text);
  background-color: var(--success);
}

[data-theme="dark"] .site-btn a {
  background-color: var(--primary);
}

[data-theme="dark"] .actions.callingUI span.site-btn a {
  background-color: var(--text);
}

.tableData .site-btn a {
  color: var(--text);
  background-color: var(--success);
}

[data-theme="dark"] .tableData .site-btn a {
  background-color: #3a3000;
}

/* Text and headings */
.fs-18 {
  color: var(--black);
}

.fs-32 {
  color: var(--text);
}

.fs-20 {
  color: var(--text);
}

.fs-16,
.dropdown-item {
  color: var(--black);
}

/* Table styles */
.tableData {
  background-color: var(--card-background);
  transition: background-color 0.3s ease;
}

.tableData thead {
  background-color: var(--table-header-bg);
}

.tableData thead th {
  color: var(--text);
}

.tableData tbody td {
  color: var(--text);
}

/* Status colors */
.ticket-status,
.in-progress,
.pending {
  color: #008000 !important;
  background: #e0ffd2 !important;
}

[data-theme="dark"] .ticket-status,
[data-theme="dark"] .in-progress,
[data-theme="dark"] .pending {
  background: #264d1a !important;
}

.pending {
  color: #b0b000 !important;
  background: #ffff001a !important;
}

[data-theme="dark"] .pending {
  background: #3d3d00 !important;
}

.in-progress {
  color: #ff5900 !important;
  background: #ff59001a !important;
}

[data-theme="dark"] .in-progress {
  background: #4d2600 !important;
}

/* Chat and messaging */
.chat-module form,
.search-filter .filter {
  background: var(--chat-bg);
}

.chat-bubble {
  background: var(--chat-bubble);
}

.chat-date {
  background-color: var(--chat-date-bg);
}

.message-count {
  color: var(--white);
  background-color: var(--primary);
}

/* Icons and buttons */
.icon,
.icon-container,
.attachment-container {
  background-color: var(--card-background);
  /* background-color: #303030; */
}

.icon i,
.chat-container i,
.chat-module i,
.profile-pic i {
  color: var(--primary);
}

.chat-group .profile-pic svg path {
  fill: var(--primary);
}

/* Meeting and call interfaces */
.meeting-container,
.calling-container,
.modal-body {
  background-color: var(--meeting-bg);
}

.call-card {
  background-color: var(--call-card-bg);
}

.mute-icon {
  background-color: var(--mute-icon-bg);
}

.mute-btn {
  background-color: var(--mute-btn-bg);
}

.video-btn {
  background-color: var(--video-btn-bg);
}

/* Export chat buttons */
.export-chat a {
  color: #325204;
}

[data-theme="dark"] .export-chat a {
  color: #a6e050;
}

.export-chat a:nth-child(2),
.draggable .title {
  color: var(--white);
}

.export-chat a:first-child {
  color: #006e26 !important;
}

[data-theme="dark"] .export-chat a:first-child {
  color: #00cc44 !important;
}

/* Pagination and page controls */
.showing-entries {
  color: var(--gray);
}

.page-btn {
  color: var(--gray);
}

.page-btn:hover {
  color: var(--text);
}

.page-btn:disabled {
  color: var(--border);
}

.current-page {
  color: var(--gray);
}

.separator {
  color: var(--gray);
}

.headerWrap form input[type="search"],
.chat-module form input[type="search"] {
  background-color: transparent;
}

.siteHeader .headerWrap form:focus-within {
  border-color: #5b5b5b;
}

.chat-info h4,
.info-text,
.location-button i.rightArrow,
.title,
.profile-name,
.text-input,
.calling-text,
.breadcrumb-item.active,
.breadcrumb-item+.breadcrumb-item::before {
  color: var(--black);
}

.chat-wrap,
.open-chat,
.userName ul.dropdown-menu,
.headerWrap ul.dropdown-menu {
  background-color: var(--white);
}


.zoom-button {
  background-color: var(--background-color);
}

.input-box,
.send-button,
.text-input {
  background: var(--chat-bubble);
}

.userStatus {
  color: var(--primary) !important;
}

.status-dot {
  background-color: var(--primary);
}

#second-popup .modal-body {
  padding: 0;
}

.callingUI .header,
#theme-toggle {
  background-color: var(--call-card-bg);
}

a.notification svg circle {
  fill: var(--call-card-bg);
}

a.notification svg circle.updateDot {
  fill: var(--primary);
}

[data-theme="dark"] .dropdown-menu {
  background-color: #121212;
}

[data-theme="dark"] .replied-message {
  background-color: #121212 !important;
}

[data-theme="dark"] .replied-message .small.text-muted {
  color: #fff !important;
}

[data-theme="dark"] .modal-content {
  background-color: #242424;
}

[data-theme="dark"] .card-header {
  background-color: #242424;
  color: #fff;
  border-bottom: 2px solid white;
}

[data-theme="dark"] .card-body {
  background-color: #242424;
  color: #fff;
}

[data-theme="dark"] .search-container form {
  background-color: #242424;
  color: white;
}

.settingButton{
  padding: 10px;
  border-radius: 10px;
}

[data-theme="dark"] .tableSearch {
  background-color: #242424;
  color: white;
}

[data-theme="dark"] .form-control {
  background-color: #242424;
  color: white;
}

[data-theme="dark"] table tr:nth-child(even) {
  background-color: #000;
}

[data-theme="dark"] table tr:nth-child(odd) {
  background-color: #303030;
}

[data-theme="dark"] td {
  background-color: transparent;
  color: white;
  border: 1px solid #4d5154;
}

[data-theme="dark"] .form-select {
  background-color: #242424;
  color: white;
}
[data-theme="dark"] .text-muted {
  color: white !important;
}

.time-style {
  display: flex;
  flex-direction: column;
  align-items: center;
}

[data-theme="dark"] .current-page {
  background-color: #242424;
}

[data-theme="dark"] .btn-close {
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e  ");
}

[data-theme="dark"] .list-group-item{
  background-color: #252525;
  border-bottom: black;
  color: #fff;
}

[data-theme="dark"] .closeBtn{
  color: white !important
}

[data-theme="dark"] .bg-light{
  background-color: #252525 !important;
  color: #fff;
}

[data-theme="light"] .callHistory{
  color: black;
  border:2px solid black
}

[data-theme="dark"] .text-dark{
  color:white !important
}