/* Modern Dashboard CSS - Professional Commercial Design */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  /* Color Palette - Default Theme */
  --primary-color: #2c3e50;
  --secondary-color: #3498db;
  --accent-color: #1abc9c;
  --danger-color: #e74c3c;
  --warning-color: #f39c12;
  --success-color: #2ecc71;
  --light-color: #ecf0f1;
  --dark-color: #34495e;
  --text-color: #333333;
  --text-light: #7f8c8d;
  --border-color: #ddd;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --bg-color: #ffffff;
  --header-bg: #2c3e50;
  --header-text: #ffffff;
  --content-bg: #ffffff;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --secondary-bg: #f8f9fa;
  --hover-bg: #f0f0f0;
  --primary-rgb: 44, 62, 80;
  --primary-dark: #1a252f;
  
  /* Typography */
  --font-primary: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* Border Radius */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  
  /* Transitions */
  --transition-speed: 0.3s;
}

/* Base Styles */
body {
  font-family: var(--font-primary);
  color: var(--text-color);
  background-color: var(--bg-color);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--primary-color);
  margin-top: 0;
}

a {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

a:hover {
  color: var(--accent-color);
}

/* Layout */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* Login Form */
#loginForm {
    display: none;
  max-width: 400px;
  margin: 100px auto;
  padding: var(--spacing-xl);
  background-color: white;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 6px var(--shadow-color);
  box-sizing: border-box;
}

#loginForm h2 {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: var(--primary-color);
}

#loginForm .form-group {
  margin-bottom: var(--spacing-md);
}

#loginForm input {
  width: 100%;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  box-sizing: border-box;
}

#loginForm button {
  width: 100%;
  padding: var(--spacing-md);
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
  box-sizing: border-box;
}

#loginForm button:hover {
  background-color: var(--accent-color);
}

/* Forgot Password Link */
.forgot-password {
  text-align: center;
  margin-top: var(--spacing-md);
  font-size: 0.9rem;
}

.forgot-password a {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

.forgot-password a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* First Time Login Form, Forgot Password Form, Security Questions Form */
#firstTimeLoginForm,
#forgotPasswordForm,
#securityQuestionsForm {
  max-width: 500px;
  margin: 100px auto;
  padding: var(--spacing-xl);
  background-color: white;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 6px var(--shadow-color);
  box-sizing: border-box;
}

#firstTimeLoginForm h2,
#forgotPasswordForm h2,
#securityQuestionsForm h2 {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: var(--primary-color);
}

#firstTimeLoginForm h3,
#securityQuestionsForm h3 {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.info-text {
  margin-bottom: var(--spacing-lg);
  color: var(--text-light);
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.5;
}

/* Security Questions */
#securityQuestionsContainer,
#securityQuestionsVerifyContainer {
  margin-bottom: var(--spacing-lg);
}

.security-question {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.security-question:last-child {
  border-bottom: none;
}

/* Password Requirements */
.password-requirements {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--light-color);
  border-radius: var(--border-radius-sm);
  font-size: 0.85rem;
}

.password-requirements p {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--text-color);
}

.password-requirements ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.password-requirements li {
  margin-bottom: var(--spacing-xs);
  color: var(--text-light);
}

/* Password Match Notification Styles */
.password-match-notification {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  transition: all var(--transition-speed) ease;
  opacity: 0;
  transform: translateY(-10px);
}

.password-match-notification.show {
  opacity: 1;
  transform: translateY(0);
}

.password-match-notification i {
  margin-right: var(--spacing-sm);
  font-size: 1rem;
}

.password-match-notification.match {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
}

.password-match-notification.no-match {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.password-match-notification.empty {
  background-color: #e2e3e5;
  color: #41464b;
  border: 1px solid #d6d8db;
}

/* Back to Login Link */
.back-to-login {
  text-align: center;
  margin-top: var(--spacing-md);
  font-size: 0.9rem;
}

.back-to-login a {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

.back-to-login a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Dashboard */
#dashboard {
  display: none;
  min-height: 100vh;
}

/* Dashboard Header */
#dashboardHeader {
  background-color: var(--header-bg);
  color: var(--header-text);
  padding: var(--spacing-lg) var(--spacing-lg);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 2px 5px var(--shadow-color);
  min-height: 70px;
}

#dashboardHeader h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#dashboardHeader h1 i {
  font-size: 1.8rem;
  color: var(--header-text);
}

/* User Info */
#userInfo {
  background-color: var(--card-bg);
  color: var(--text-color);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 1px 3px var(--shadow-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* User info container with profile picture */
.user-info-container {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Profile picture container */
.profile-picture-container {
  position: relative;
  margin-right: 15px;
  cursor: pointer;
}

/* Profile picture */
.profile-picture {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-color);
  background-color: var(--light-color);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Default avatar */
.default-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: var(--primary-color);
}

/* Upload overlay */
.profile-picture-upload {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--primary-color);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.profile-picture-upload:hover {
  opacity: 1;
}

/* User details */
.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: bold;
  font-size: 1rem;
}

.user-role {
  font-size: 0.8rem;
  opacity: 0.8;
  text-transform: capitalize;
}

/* Profile picture upload form */
#profilePictureUploadForm {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

#profilePictureUploadForm.show {
  display: flex;
}

#profilePictureUploadForm .popup-content {
  background-color: var(--card-bg);
  padding: 25px;
  border-radius: 8px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#profilePictureUploadForm h2 {
  color: var(--text-color);
  margin-bottom: 20px;
  text-align: center;
}

.upload-preview-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.image-preview {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--light-color);
  border: 3px solid var(--primary-color);
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview i {
  font-size: 80px;
  color: var(--primary-color);
}

.file-input-container {
  margin-bottom: 20px;
}

#profilePictureInput {
  display: none;
}

.file-input-label {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  transition: background-color 0.2s;
}

.file-input-label:hover {
  background-color: var(--accent-color);
}

#fileName {
  margin-left: 10px;
  font-size: 14px;
  color: var(--text-color);
}

.file-size-info {
  font-size: 13px;
  color: #6c757d;
  margin-top: 8px;
  padding-left: 2px;
  display: block;
}

.form-buttons {
  display: flex;
  justify-content: space-between;
}

.upload-btn, .cancel-btn {
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.upload-btn {
  background-color: var(--primary-color);
  color: white;
}

.upload-btn:hover {
  background-color: var(--accent-color);
}

.cancel-btn {
  background-color: var(--light-color);
  color: var(--text-color);
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

/* Logout Button */
#logoutButton {
    position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: var(--header-text);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.5rem 1rem;
    cursor: pointer;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: all 0.2s;
}

#logoutButton:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Dashboard Menu */
#dashboardMenu {
  background-color: var(--card-bg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 1px 3px var(--shadow-color);
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: space-between;
  overflow-x: auto;
  padding-left: 15px;
  padding-right: 15px;
}

#dashboardMenu button {
  padding: var(--spacing-sm) 12px;
  background-color: var(--light-color);
  color: var(--primary-color);
  border: none;
  border-radius: var(--border-radius-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  margin-right: 0;
  min-width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  white-space: nowrap;
}

#dashboardMenu button i {
  margin-right: 5px;
}

#dashboardMenu button:hover {
  background-color: var(--secondary-color);
  color: white;
}

#dashboardMenu button i {
    margin-right: 8px;
}

/* Icon-only button style for help button */
#dashboardMenu .icon-only-button {
    width: 24px;
    height: 24px;
    padding: 2px;
    min-width: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-left: 2px;
    font-size: 0.8em;
    line-height: 1;
}

#dashboardMenu .icon-only-button i {
    margin-right: 0;
}

/* Content Area */
#contentArea {
  padding: var(--spacing-lg);
  background-color: var(--content-bg);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 10px var(--shadow-color);
  margin-top: var(--spacing-md);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
  background-color: var(--card-bg);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

th, td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

th {
  background-color: var(--light-color);
  font-weight: 600;
  color: var(--text-color);
}

tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

tr:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.selected-row {
  background-color: rgba(52, 152, 219, 0.1);
}

/* Forms */
.form-group {
  margin-bottom: var(--spacing-md);
}

label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

input, select, textarea {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  transition: border-color var(--transition-speed) ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--secondary-color);
}

button {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
}

button:hover {
  background-color: var(--accent-color);
}

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

.cancel-button:hover {
  background-color: #c0392b;
}

/* Assign Form */
.assign-form {
  background-color: var(--light-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
    display: none;
}

.assign-form h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

.assign-form select, .assign-form button {
  margin-right: var(--spacing-sm);
}

/* Controls */
.controls {
  margin-bottom: var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.controls input, .controls button {
  margin: 0;
}

/* Loading */
.loading {
  text-align: center;
  margin-top: var(--spacing-lg);
  color: var(--text-light);
}

/* Popups and Modals */
.popup, .modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  padding: 20px;
}

.popup.show, .modal.show {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.popup-content, .modal-content {
  background-color: var(--bg-color);
  border-radius: var(--border-radius-md);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 100%;
  margin: 50px auto;
  padding: 25px;
  position: relative;
  animation: fadeIn 0.3s ease;
}

/* Add Lead Form Specific Styles */
#addLeadPopup .popup-content {
  max-width: 600px;
}

#addLeadPopup h2 {
  margin-top: 0;
  color: var(--primary-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

#addLeadPopup h2 i {
  margin-right: 10px;
  color: var(--accent-color);
}

#addLeadForm {
  display: block;
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 10px;
}

#addLeadForm .form-group {
  margin-bottom: 15px;
}

#addLeadForm label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: var(--text-color);
}

#addLeadForm input,
#addLeadForm select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
}

#addLeadForm input:focus,
#addLeadForm select:focus {
  border-color: var(--secondary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

#addLeadForm .form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
}

#addLeadForm .form-buttons button {
  padding: 10px 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

#addLeadForm .btn-primary {
  background-color: var(--accent-color);
  color: white;
  border: none;
}

#addLeadForm .btn-primary:hover {
  background-color: var(--secondary-color);
}

#addLeadForm .btn-secondary {
  background-color: var(--light-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

#addLeadForm .btn-secondary:hover {
  background-color: var(--border-color);
}

/* Confirmation modal specific styling */
#confirmationModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#confirmationModal .modal-content {
    position: fixed;
    background-color: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 10px var(--shadow-color);
    max-width: 400px;
    width: 90%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#confirmationModal h2 {
    color: var(--danger-color);
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#confirmationModal h2 i {
    font-size: 1.2em;
}

#confirmationModal p {
    margin: 15px 0;
}

#confirmationModal .popup-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

#confirmationModal button {
    padding: 8px 16px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 500;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#confirmationModal button i {
    margin-right: 5px;
}

#confirmationModal #confirmDelete {
    background-color: var(--danger-color);
    color: white;
    border: none;
}

#confirmationModal #confirmDelete:hover {
    background-color: #c0392b;
}

#confirmationModal #cancelDelete {
    background-color: var(--light-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

#confirmationModal #cancelDelete:hover {
    background-color: #e0e0e0;
}

/* Specific style for lead details popup */
#leadDetailsPopup .popup-content {
    max-width: 1000px;
    width: 95%;
  max-height: 85vh;
    overflow-y: auto;
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#leadDetailsPopup .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--primary-color);
    border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
}

#leadDetailsPopup .popup-header h2 {
    margin: 0;
    color: white;
    font-size: 1.4rem;
}

#leadDetailsPopup .popup-body {
    padding: 20px;
}

#leadDetailsPopup .close-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

#leadDetailsPopup .close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

#leadDetailsPopup .lead-detail {
  background-color: var(--light-color);
    padding: 15px;
  border-radius: var(--border-radius-sm);
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#leadDetailsPopup .lead-detail h3 {
  margin-top: 0;
    color: var(--primary-color);
    font-size: 1rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

#leadDetailsPopup .lead-detail h3 i {
    margin-right: 8px;
    color: var(--secondary-color);
}

#leadDetailsPopup .lead-detail p {
    margin: 0 0 15px 0;
    font-weight: 500;
    color: var(--text-color);
}

#leadDetailsPopup .form-group {
    margin-top: 10px;
}

#leadDetailsPopup .form-group label {
    display: block;
    margin-bottom: 5px;
  font-size: 0.9rem;
  color: var(--text-light);
}

#leadDetailsPopup .form-group input,
#leadDetailsPopup .form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
}

#leadDetailsPopup .lead-notes {
    background-color: var(--light-color);
    padding: 15px;
    border-radius: var(--border-radius-sm);
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#leadDetailsPopup .lead-notes h3 {
    margin-top: 0;
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

#leadDetailsPopup .lead-notes h3 i {
    margin-right: 8px;
    color: var(--secondary-color);
}

#leadDetailsPopup .notes-container {
  max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #fff;
  border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

#leadDetailsPopup .note {
    padding: 10px;
  border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

#leadDetailsPopup .note:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

#leadDetailsPopup .note p {
    margin: 0 0 5px 0;
  white-space: pre-wrap;
}

#leadDetailsPopup .note small {
  display: block;
  text-align: right;
    color: var(--text-light);
  font-size: 0.8rem;
}

#leadDetailsPopup .add-note h4 {
    margin-top: 0;
    color: var(--primary-color);
    font-size: 1rem;
    margin-bottom: 10px;
}

#leadDetailsPopup #noteContent {
    width: 100%;
    min-height: 80px;
    padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
    margin-bottom: 10px;
  resize: vertical;
}

#leadDetailsPopup .lead-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

/* Quick Notes Popup Styles */
#quickNotesPopup .quick-notes-popup {
    max-width: 500px;
    width: 90%;
}

#quickNotesPopup .popup-header h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

#quickNotesPopup .popup-header h3 i {
    margin-right: 8px;
    color: var(--secondary-color);
}

#quickNotesPopup .popup-body {
    padding: 20px;
}

#quickNotesPopup .quick-notes-recent h4,
#quickNotesPopup .quick-add-note h4 {
    margin: 0 0 10px 0;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
}

#quickNotesPopup .quick-notes-container {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 20px;
    padding: 10px;
    background-color: var(--light-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

#quickNotesPopup .quick-note {
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

#quickNotesPopup .quick-note:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

#quickNotesPopup .quick-note p {
    margin: 0 0 5px 0;
    white-space: pre-wrap;
    font-size: 0.9rem;
}

#quickNotesPopup .quick-note small {
    display: block;
    text-align: right;
    color: var(--text-light);
    font-size: 0.75rem;
}

#quickNotesPopup .no-notes {
    text-align: center;
    color: var(--text-light);
    font-style: italic;
    padding: 20px;
}

#quickNotesPopup #quickNoteContent {
    width: 100%;
    min-height: 60px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-bottom: 15px;
    resize: vertical;
    font-family: inherit;
    font-size: 0.9rem;
}

#quickNotesPopup .quick-note-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

#quickNotesPopup .quick-note-actions button {
    padding: 8px 16px;
    border-radius: var(--border-radius-sm);
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

#quickNotesPopup .btn-primary {
    background-color: var(--primary-color);
    color: white;
}

#quickNotesPopup .btn-primary:hover {
    background-color: var(--primary-hover);
}

#quickNotesPopup .btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

#quickNotesPopup .btn-secondary:hover {
    background-color: var(--secondary-hover);
}

/* Lead Vendor Notes Field Styles */
#newLeadNotes {
    width: 100%;
    min-height: 60px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-bottom: 5px;
    resize: vertical;
    font-family: inherit;
    font-size: 0.9rem;
}

.char-counter {
    text-align: right;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 15px;
}

/* Bulk Upload Notes Field Styles */
#bulkUploadNotes {
    width: 100%;
    min-height: 60px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    margin-bottom: 5px;
    resize: vertical;
    font-family: inherit;
    font-size: 0.9rem;
}

.lead-list-upload .form-hint {
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

#leadDetailsPopup .lead-actions button {
    padding: 10px 15px;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
}

/* Discard countdown styling */
.discard-countdown {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 12px;
    border-radius: 6px;
    margin: 12px 0;
    text-align: center;
}

.discard-countdown .lead-info-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-weight: 500;
    color: #856404;
}

.discard-countdown .lead-info-label i {
    margin-right: 4px;
    color: #856404;
    font-size: 1em; /* Make sure icon is not oversized */
}

.discard-countdown .countdown-days {
    display: block;
    margin: 10px auto;
    font-weight: 600;
    font-size: 1.1em;
    color: #856404;
    text-align: center;
}

.countdown-progress-container {
    background-color: rgba(255, 235, 186, 0.5);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin: 8px auto;
    max-width: 200px;
}

.countdown-progress-bar {
    background-color: #f0ad4e;
    height: 100%;
    transition: width 0.3s;
}

/* Popup Buttons */
.popup-buttons {
    display: flex;
    justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* Toggle Switches */
.toggle-switch {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  min-width: 200px;
}

.toggle-switch label {
  margin-bottom: 0;
  margin-left: var(--spacing-sm);
  font-size: 0.9rem;
  white-space: nowrap;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  flex-shrink: 0;
}

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

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

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

input:checked + .slider {
  background-color: var(--primary-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-color);
}

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

/* Analytics */
#analyticsButtons, #analyticsTypeButtons, #agentAnalyticsButtons {
    display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

#chartContainer, #agentChartContainer {
  background-color: white;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 1px 3px var(--shadow-color);
  margin-bottom: var(--spacing-lg);
}

/* Statistics Cards */
.statistics-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.stat-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg);
  box-shadow: 0 2px 8px var(--shadow-color);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--shadow-color);
}

.stat-card h3 {
  margin-top: 0;
  font-size: 1rem;
  color: var(--text-light);
}

.stat-card p {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

.stat-card.good { background-color: rgba(46, 204, 113, 0.1); }
.stat-card.warning { background-color: rgba(243, 156, 18, 0.1); }
.stat-card.alert { background-color: rgba(231, 76, 60, 0.1); }

/* Campaign Form */
#createCampaignForm {
  background-color: white;
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 1px 3px var(--shadow-color);
  margin-bottom: var(--spacing-lg);
}

#createCampaignForm h3 {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

#createCampaignForm input,
#createCampaignForm textarea,
#createCampaignForm select {
  margin-bottom: var(--spacing-md);
}

/* URL info message in campaign form */
.url-info-message {
  background-color: #f8f9fa;
  border-left: 4px solid #17a2b8;
  padding: 10px 15px;
  margin: 10px 0;
    border-radius: 4px;
  color: #495057;
  font-size: 0.9rem;
}

.url-info-message i {
  color: #17a2b8;
  margin-right: 5px;
}

/* Create campaign button positioning */
.create-campaign-button {
  margin-bottom: 20px;
  background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
  padding: 10px 15px;
  font-size: 1rem;
    cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.create-campaign-button:hover {
  background-color: #218838;
}

.create-campaign-button i {
  margin-right: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
  #dashboardMenu {
    flex-direction: column;
  }
  
  #dashboardMenu button {
    width: 100%;
    margin-right: 0;
    margin-bottom: var(--spacing-xs);
  }
  
  .statistics-cards {
    grid-template-columns: 1fr;
  }
  
  .lead-details-grid {
    grid-template-columns: 1fr;
  }
}

/* Agent-only content */
.agent-only {
  display: none;
}

/* Preserve existing classes that might be used by JavaScript */
tr:nth-child(even) { background-color: #f9f9f9; }
.loading { text-align: center; margin-top: 20px; }
.controls { margin-bottom: 20px; }
.assign-form { background-color: var(--light-color); border: 1px solid var(--border-color); }
.selected-row { background-color: rgba(52, 152, 219, 0.1); }

/* Leads Table Styles */
.table-responsive {
  overflow-x: auto;
  margin-bottom: var(--spacing-lg);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 1px 3px var(--shadow-color);
}

.leads-table {
    width: 100%;
    border-collapse: collapse;
  background-color: white;
}

.leads-table th {
  background-color: var(--primary-color);
  color: white;
  padding: var(--spacing-md);
    text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.leads-table th i {
  margin-right: var(--spacing-xs);
}

.leads-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.leads-table tr:hover {
  background-color: rgba(52, 152, 219, 0.05);
}

.leads-table tr.assigned {
  background-color: rgba(46, 204, 113, 0.05);
}

.leads-table .lead-name {
  color: var(--primary-color);
  font-weight: 500;
  text-decoration: none;
}

.leads-table .lead-name:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Status Select Styles */
.status-select-wrapper {
  position: relative;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

/* Status dropdown styles with matching colors for card highlights */
.status-dropdown {
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.status-dropdown:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

/* Status option colors to match card highlighting colors */
.status-dropdown option[value="New"] {
    background-color: rgba(52, 152, 219, 0.1);
    color: #3498db;
    position: relative;
}

.status-dropdown option[value="New"]::before {
    content: "●";
    color: #3498db;
    font-weight: bold;
    margin-right: 8px;
}

.status-dropdown option[value="Contacted"] {
    background-color: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
    position: relative;
}

.status-dropdown option[value="Contacted"]::before {
    content: "●";
    color: #9b59b6;
    font-weight: bold;
    margin-right: 8px;
}



.status-dropdown option[value="Appointment Set"] {
    background-color: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    position: relative;
}

.status-dropdown option[value="Appointment Set"]::before {
    content: "●";
    color: #2ecc71;
    font-weight: bold;
    margin-right: 8px;
}

.status-dropdown option[value="Appointment Denied_REMOVED"] { /* Removed Appointment Denied status */
    background-color: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    position: relative;
}

.status-dropdown option[value="Appointment Denied"]::before {
    content: "●";
    color: #e74c3c;
    font-weight: bold;
    margin-right: 8px;
}

.status-dropdown option[value="Closed Won"] {
    background-color: rgba(39, 174, 96, 0.1);
    color: #27ae60;
    position: relative;
}

.status-dropdown option[value="Closed Won"]::before {
    content: "●";
    color: #27ae60;
    font-weight: bold;
    margin-right: 8px;
}

.status-dropdown option[value="Closed Lost"] {
    background-color: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    position: relative;
}

.status-dropdown option[value="Closed Lost"]::before {
    content: "●";
    color: #e74c3c;
    font-weight: bold;
    margin-right: 8px;
}

.status-dropdown option[value="On Hold"] {
    background-color: rgba(149, 165, 166, 0.1);
    color: #95a5a6;
    position: relative;
}

.status-dropdown option[value="On Hold"]::before {
    content: "●";
    color: #95a5a6;
    font-weight: bold;
    margin-right: 8px;
}

/* Dropdown dynamic border color based on selected status */
.status-dropdown[data-current-status="New"] {
    border-left: 4px solid #3498db;
}

.status-dropdown[data-current-status="Contacted"] {
    border-left: 4px solid #9b59b6;
}



.status-dropdown[data-current-status="Appointment Set"] {
    border-left: 4px solid #2ecc71;
}

.status-dropdown[data-current-status="Appointment Denied_REMOVED"] { /* Removed Appointment Denied status */
    border-left: 4px solid #e74c3c;
}

.status-dropdown[data-current-status="Closed Won"] {
    border-left: 4px solid #27ae60;
}

.status-dropdown[data-current-status="Closed Lost"] {
    border-left: 4px solid #e74c3c;
}

.status-dropdown[data-current-status="On Hold"] {
    border-left: 4px solid #95a5a6;
}

/* Status class styling for all select dropdowns */
select.status-new, .status-dropdown.status-new {
    border-left: 4px solid #3498db !important;
}

select.status-contacted, .status-dropdown.status-contacted {
    border-left: 4px solid #9b59b6 !important;
}



select.status-appointment-set, .status-dropdown.status-appointment-set {
    border-left: 4px solid #2ecc71 !important;
}

select.status-appointment-denied, .status-dropdown.status-appointment-denied {
    border-left: 4px solid #e74c3c !important;
}

select.status-closed-won, .status-dropdown.status-closed-won {
    border-left: 4px solid #27ae60 !important;
}

select.status-closed-lost, .status-dropdown.status-closed-lost {
    border-left: 4px solid #e74c3c !important;
}

select.status-on-hold, .status-dropdown.status-on-hold {
    border-left: 4px solid #95a5a6 !important;
}

.lead-status {
    width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background-color: white;
  font-size: 0.9rem;
}

/* Lead status option colors to match card highlighting */
.lead-status option[value="New"] {
    background-color: rgba(52, 152, 219, 0.1);
    color: #3498db;
    position: relative;
}

.lead-status option[value="New"]::before {
    content: "●";
    color: #3498db;
    font-weight: bold;
    margin-right: 8px;
}

.lead-status option[value="Contacted"] {
    background-color: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
    position: relative;
}

.lead-status option[value="Contacted"]::before {
    content: "●";
    color: #9b59b6;
    font-weight: bold;
    margin-right: 8px;
}



.lead-status option[value="Appointment Set"] {
    background-color: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    position: relative;
}

.lead-status option[value="Appointment Set"]::before {
    content: "●";
    color: #2ecc71;
    font-weight: bold;
    margin-right: 8px;
}

.lead-status option[value="Appointment Denied_REMOVED"] { /* Removed Appointment Denied status */
    background-color: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    position: relative;
}

.lead-status option[value="Appointment Denied"]::before {
    content: "●";
    color: #e74c3c;
    font-weight: bold;
    margin-right: 8px;
}

.lead-status option[value="Closed Won"] {
    background-color: rgba(39, 174, 96, 0.1);
    color: #27ae60;
    position: relative;
}

.lead-status option[value="Closed Won"]::before {
    content: "●";
    color: #27ae60;
    font-weight: bold;
    margin-right: 8px;
}

.lead-status option[value="Closed Lost"] {
    background-color: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    position: relative;
}

.lead-status option[value="Closed Lost"]::before {
    content: "●";
    color: #e74c3c;
    font-weight: bold;
    margin-right: 8px;
}

.lead-status option[value="On Hold"] {
    background-color: rgba(149, 165, 166, 0.1);
    color: #95a5a6;
    position: relative;
}

.lead-status option[value="On Hold"]::before {
    content: "●";
    color: #95a5a6;
    font-weight: bold;
    margin-right: 8px;
}

/* Status Colors */
.status-new select {
  border-left: 4px solid #3498db;
}

.status-contacted select {
  border-left: 4px solid #9b59b6;
}

.status-qualified select {
  border-left: 4px solid #2ecc71;
}

.status-proposal select {
  border-left: 4px solid #f39c12;
}

.status-negotiation select {
  border-left: 4px solid #e67e22;
}

.status-closed-won select {
  border-left: 4px solid #27ae60;
}

.status-closed-lost select {
  border-left: 4px solid #e74c3c;
}

.status-on-hold select {
  border-left: 4px solid #95a5a6;
}

/* Badge Styles */
.badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

.badge-warning {
  background-color: var(--warning-color);
  color: white;
}

/* Button Styles */
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--border-radius-sm);
  margin-right: 0.25rem;
}

.btn-primary {
  background-color: var(--secondary-color);
    color: white;
    border: none;
}

.btn-primary:hover {
  background-color: #2980b9;
}

.btn-danger {
  background-color: var(--danger-color);
  color: white;
  border: none;
}

.btn-danger:hover {
  background-color: #c0392b;
}

.btn-info {
  background-color: #17a2b8;
  color: white;
  border: none;
}

.btn-info:hover {
  background-color: #138496;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: var(--spacing-xs);
}

/* Form Select */
.form-select {
  display: block;
    width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-color);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  appearance: none;
}

/* Text Colors */
.text-success {
  color: var(--success-color);
}

.text-danger {
  color: var(--danger-color);
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
}

.status-new {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
}

.status-contacted {
  background-color: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
}

.status-qualified {
  background-color: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.status-proposal {
  background-color: rgba(243, 156, 18, 0.2);
  color: #f39c12;
}

.status-negotiation {
  background-color: rgba(230, 126, 34, 0.2);
  color: #e67e22;
}

.status-closed-won {
  background-color: rgba(39, 174, 96, 0.2);
  color: #27ae60;
}

.status-closed-lost {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.status-on-hold {
  background-color: rgba(149, 165, 166, 0.2);
  color: #95a5a6;
}

/* Lead Cards Layout */
.leads-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.lead-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 8px var(--shadow-color);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.5s ease-in-out;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

/* Enhanced animation classes for lead card transitions */
.lead-card.fade-out {
  opacity: 0;
  transform: scale(0.9) translateY(-30px) rotate(-2deg);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
  background-color: rgba(var(--primary-rgb, 52, 152, 219), 0.1);
  transition: all 0.3s ease-out;
  pointer-events: none; /* Prevent interaction during fade out */
}

/* Special animation for unassigned leads */
.lead-card.fade-out.unassigned {
  background-color: rgba(255, 193, 7, 0.1);
  border-left-color: #ffc107;
  transform: scale(0.95) translateX(100px);
}

.lead-card.fade-in {
  animation: fadeInEnhanced 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  z-index: 100; /* Ensure animated cards appear above others */
}

/* Special animation for My Leads page transitions */
#myLeadTable .lead-card.fade-in {
  animation: fadeInMyLeads 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Add a subtle glow effect for cards being transitioned */
.lead-card.fade-out, .lead-card.fade-in {
  box-shadow: 0 0 20px rgba(var(--primary-rgb, 52, 152, 219), 0.3);
}

/* List row transition animations */
.lead-list-row {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Status card slide-out animation */
.status-lead-card.slide-out {
  opacity: 0;
  transform: translateX(-100%) scale(0.8);
  transition: all 0.3s ease-out;
  pointer-events: none;
}

.status-lead-card.slide-in {
  animation: slideInFromRight 0.3s ease-out;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes fadeInEnhanced {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(30px) rotate(-2deg);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
    background-color: rgba(var(--primary-rgb, 52, 152, 219), 0.1);
  }
  70% {
    opacity: 1;
    transform: scale(1.03) rotate(1deg);
    box-shadow: 0 5px 15px rgba(var(--primary-rgb, 52, 152, 219), 0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    box-shadow: 0 2px 8px var(--shadow-color);
    background-color: var(--card-bg);
  }
}

@keyframes fadeInMyLeads {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-40px) rotate(3deg);
    box-shadow: 0 15px 25px rgba(var(--primary-rgb, 52, 152, 219), 0.2);
    background-color: rgba(var(--primary-rgb, 52, 152, 219), 0.15);
  }
  25% {
    opacity: 0.8;
    transform: scale(1.05) translateY(10px) rotate(-1deg);
  }
  75% {
    opacity: 1;
    transform: scale(0.98) translateY(-5px) rotate(0.5deg);
    box-shadow: 0 8px 20px rgba(var(--primary-rgb, 52, 152, 219), 0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0);
    box-shadow: 0 2px 8px var(--shadow-color);
    background-color: var(--card-bg);
  }
}

.lead-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

/* Status-based border colors */
.lead-card.status-new {
  border-left-color: #3498db;
  border-left-width: 6px;
}

.lead-card.status-contacted {
  border-left-color: #9b59b6;
  border-left-width: 6px;
}

.lead-card.status-qualified {
  border-left-color: #2ecc71;
  border-left-width: 6px;
}

.lead-card.status-proposal {
  border-left-color: #f39c12;
  border-left-width: 6px;
}

.lead-card.status-negotiation {
  border-left-color: #e67e22;
  border-left-width: 6px;
}

.lead-card.status-closed-won {
  border-left-color: #27ae60;
  border-left-width: 6px;
}

.lead-card.status-closed-lost {
  border-left-color: #e74c3c;
  border-left-width: 6px;
}

.lead-card.status-on-hold {
  border-left-color: #95a5a6;
  border-left-width: 6px;
}

.lead-card.assigned {
  /* This will be applied in addition to the status color */
  /* We can add a different visual indicator for assigned leads */
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

/* Lead Card Header */
.lead-card-header {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lead-card-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--primary-color);
    cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.lead-card-header h3:hover {
  color: var(--secondary-color);
}

.lead-card-header h3 i {
  color: var(--secondary-color);
}

.lead-campaign {
  font-size: 0.9rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background-color: rgba(52, 152, 219, 0.1);
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
}

.lead-campaign i {
  color: var(--secondary-color);
}

/* Lead Card Body */
.lead-card-body {
  padding: var(--spacing-md);
  background-color: var(--card-bg);
  flex-grow: 1;
}

.lead-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-sm);
}

.lead-info-item {
  margin-bottom: var(--spacing-sm);
}

.lead-info-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 2px;
  font-weight: 600;
}

.lead-info-label i {
  margin-right: 4px;
  color: var(--secondary-color);
}

.lead-info-value {
  font-weight: 500;
  color: var(--text-color);
  word-break: break-word;
  line-height: 1.4;
}

/* Lead Card Footer */
.lead-card-footer {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* Lead Status Display (Read-only for Lead Vendors) */
.lead-status-display {
  margin-bottom: var(--spacing-sm);
}

.lead-status-display label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
  color: var(--text-light);
  font-weight: 600;
}

.status-readonly {
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  border: 2px solid transparent;
}

.status-readonly.status-new {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  border-color: #3498db;
}

.status-readonly.status-contacted {
  background-color: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
  border-color: #9b59b6;
}

.status-readonly.status-appointment-set {
  background-color: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
  border-color: #2ecc71;
}

.status-readonly.status-appointment-denied {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  border-color: #e74c3c;
}

.status-readonly.status-presented-plan {
  background-color: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  border-color: #f39c12;
}

.status-readonly.status-closed-won {
  background-color: rgba(39, 174, 96, 0.2);
  color: #27ae60;
  border-color: #27ae60;
}

.status-readonly.status-closed-lost {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  border-color: #e74c3c;
}

.status-readonly.status-on-hold {
  background-color: rgba(149, 165, 166, 0.2);
  color: #95a5a6;
  border-color: #95a5a6;
}

.lead-status-section,
.lead-assignment-section {
  margin-bottom: var(--spacing-sm);
}

.lead-status-section label,
.lead-assignment-section label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
  color: var(--text-light);
  font-weight: 600;
}

.lead-status-section .status-select-wrapper {
  margin-top: 4px;
}

.lead-assignment-section select {
    width: 100%;
  margin-top: 4px;
}

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.lead-actions button {
  flex: 1;
  min-width: 80px;
  justify-content: center;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .leads-cards-container {
    grid-template-columns: 1fr;
  }
  
  .lead-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .lead-info-grid {
    grid-template-columns: 1fr;
  }
  
  .lead-card-footer {
    flex-direction: column;
  }
  
  .lead-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .lead-actions button {
    width: 100%;
  }
}

/* Lead Filter Section */
.lead-filter-section {
  background-color: white;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 1px 3px var(--shadow-color);
  margin-bottom: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  position: relative; /* Add position relative */
  z-index: 1; /* Add z-index */
}

.filter-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.filter-inputs input[type="text"] {
  flex: 1;
  min-width: 200px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem;
}

.filter-inputs button {
  padding: var(--spacing-sm) var(--spacing-md);
  white-space: nowrap;
}

/* Modern UI Switches */
.ui-switches-container {
    display: flex;
  flex-direction: row;
    justify-content: flex-start;
  align-items: center;
  gap: 30px;
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-md);
}

.ui-switch {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}

.ui-switch-checkbox {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}

.ui-switch-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
    cursor: pointer;
  width: auto;
  position: relative;
}

.ui-switch-inner {
  display: block;
  width: 50px;
  height: 24px;
  background: #ccc;
  border-radius: 24px;
  position: relative;
  transition: background-color 0.2s;
  margin-right: 10px;
}

.ui-switch-inner:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 18px;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ui-switch-checkbox:checked + .ui-switch-label .ui-switch-inner {
  background: var(--primary-color);
}

.ui-switch-checkbox:checked + .ui-switch-label .ui-switch-inner:after {
  left: calc(100% - 3px);
  transform: translateX(-100%);
}

.ui-switch-text {
  font-size: 0.9rem;
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 768px) {
  .filter-inputs {
    flex-direction: column;
    align-items: stretch;
  }
  
  .ui-switches-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}

/* Agent Cards Styles */
.agents-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.agent-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 8px var(--shadow-color);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border-color);
    display: flex;
  flex-direction: column;
}

.agent-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

.agent-card.role-master {
  border-left-color: #e74c3c;
  border-left-width: 6px;
}

.agent-card.role-admin {
  border-left-color: #3498db;
  border-left-width: 6px;
}

.agent-card.role-agent {
  border-left-color: #2ecc71;
  border-left-width: 6px;
}

.agent-card.role-leadvendor {
  border-left-color: #ffc107;
  border-left-width: 6px;
}

.agent-card.current-user {
  background-color: rgba(52, 152, 219, 0.05);
  border: 2px solid var(--secondary-color);
  border-left-width: 6px;
}

/* Agent Card Header */
.agent-card-header {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
    align-items: center;
}

.agent-card-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.agent-card-header h3 i {
  color: var(--secondary-color);
}

.role-badge {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  text-transform: uppercase;
}

.role-badge.role-master {
  background-color: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

.role-badge.role-admin {
  background-color: rgba(52, 152, 219, 0.1);
  color: #3498db;
}

.role-badge.role-agent {
  background-color: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
}

.role-badge.role-leadvendor {
  background-color: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

/* Agent Card Body */
.agent-card-body {
  padding: var(--spacing-md);
  background-color: var(--card-bg);
  flex-grow: 1;
}

.agent-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-sm);
}

.agent-info-item {
  margin-bottom: var(--spacing-sm);
}

.agent-info-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 2px;
  font-weight: 600;
}

.agent-info-label i {
  margin-right: 4px;
  color: var(--secondary-color);
}

.agent-info-value {
  font-weight: 500;
  color: var(--text-color);
  word-break: break-word;
  line-height: 1.4;
}

/* Creation Source Badges */
.creation-source {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.creation-source.sales-page {
  background-color: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.creation-source.manual {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.creation-source i {
  font-size: 0.7rem;
}

/* Creation Date Display */
.creation-date {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.creation-date .date-line {
  font-weight: 500;
  color: var(--text-color);
}

.creation-date .time-line {
  font-size: 0.75rem;
  color: var(--text-light);
  font-weight: 400;
}

/* Agent Card Footer */
.agent-card-footer {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-top: 1px solid var(--border-color);
}

.agent-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.agent-actions button {
  flex: 1;
  justify-content: center;
  text-align: center;
}

.current-user-badge {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: rgba(52, 152, 219, 0.1);
  color: var(--secondary-color);
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  text-align: center;
}

.master-user-badge {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  text-align: center;
}

/* Note: create-agent-button styles are now defined above with uniform button styling */

/* Agent page buttons container */
.agent-page-buttons {
  display: flex;
  gap: 10px;
  margin: 15px 0;
  flex-wrap: wrap;
}

/* Uniform styling for all agent page buttons */
.create-agent-button,
.vendor-agent-assign-button,
.scripts-page-button {
  padding: 12px 20px;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all var(--transition-speed) ease;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  min-width: 180px;
  justify-content: center;
}

/* Create Agent Button */
.create-agent-button {
  background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.create-agent-button:hover {
  background: linear-gradient(135deg, var(--accent-color), #2980b9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

/* Vendor Agent Assignment button */
.vendor-agent-assign-button {
  background: linear-gradient(135deg, var(--accent-color), #16a085);
  box-shadow: 0 2px 8px rgba(26, 188, 156, 0.3);
}

.vendor-agent-assign-button:hover {
  background: linear-gradient(135deg, #16a085, var(--accent-color));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 188, 156, 0.4);
}

/* Scripts Page Button */
.scripts-page-button {
  background: linear-gradient(135deg, #6f42c1, #5a32a1);
  box-shadow: 0 2px 8px rgba(111, 66, 193, 0.3);
}

.scripts-page-button:hover {
  background: linear-gradient(135deg, #5a32a1, #4a2885);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.4);
}

/* Active state for all buttons */
.create-agent-button:active,
.vendor-agent-assign-button:active,
.scripts-page-button:active {
  transform: translateY(0);
}

/* Icon styling for all buttons */
.create-agent-button i,
.vendor-agent-assign-button i,
.scripts-page-button i {
  font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .agents-cards-container {
    grid-template-columns: 1fr;
  }
  
  .agent-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .agent-info-grid {
    grid-template-columns: 1fr;
  }
  
  .agent-actions {
    flex-direction: column;
  }
  
  .agent-actions button {
    width: 100%;
    margin-bottom: var(--spacing-xs);
  }
  
  .agent-page-buttons {
    flex-direction: column;
    gap: 8px;
  }
  
  .vendor-agent-assign-button,
  .create-agent-button,
  .scripts-page-button {
    width: 100%;
    justify-content: center;
    min-width: unset;
  }
}

/* Campaign Cards Styles */
.campaigns-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.campaign-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 8px var(--shadow-color);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.campaign-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

.campaign-card.active {
  border-left-color: var(--success-color);
  border-left-width: 6px;
}

.campaign-card.inactive {
  border-left-color: var(--text-light);
  border-left-width: 6px;
}

.campaign-card.sub-campaign {
  margin-left: var(--spacing-md);
  border-left-width: 6px;
}

/* Campaign Card Header */
.campaign-card-header {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.campaign-card-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.campaign-card-header h3 i {
  color: var(--secondary-color);
}

.sub-campaign-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: var(--border-radius-sm);
  background-color: rgba(52, 152, 219, 0.1);
  color: var(--secondary-color);
  margin-right: var(--spacing-xs);
}

.status-badge.status-active {
  background-color: rgba(46, 204, 113, 0.1);
  color: var(--success-color);
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-badge.status-inactive {
  background-color: rgba(149, 165, 166, 0.1);
  color: var(--text-light);
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Campaign Card Body */
.campaign-card-body {
  padding: var(--spacing-md);
  background-color: var(--card-bg);
  flex-grow: 1;
}

.campaign-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

.campaign-info-item {
  margin-bottom: var(--spacing-sm);
}

.campaign-info-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 2px;
  font-weight: 600;
}

.campaign-info-label i {
  margin-right: 4px;
  color: var(--secondary-color);
}

.campaign-info-value {
  font-weight: 500;
  color: var(--text-color);
  word-break: break-word;
  line-height: 1.4;
}

.url-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.url-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background-color: rgba(52, 152, 219, 0.1);
  color: var(--secondary-color);
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color var(--transition-speed) ease;
}

.url-link:hover {
  background-color: rgba(52, 152, 219, 0.2);
  color: var(--secondary-color);
}

.no-url {
  color: var(--text-light);
  font-style: italic;
  font-size: 0.9rem;
}

/* Campaign Card Footer */
.campaign-card-footer {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-top: 1px solid var(--border-color);
}

.campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.campaign-actions button {
  flex: 1;
  min-width: 80px;
  justify-content: center;
  text-align: center;
}

.create-campaign-button {
  display: block;
  margin: 0 0 var(--spacing-md) 0;
  padding: var(--spacing-md);
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
  width: auto;
}

.create-campaign-button:hover {
  background-color: var(--accent-color);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-xl);
  background-color: white;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 1px 3px var(--shadow-color);
}

.empty-state i {
  font-size: 3rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

.empty-state p {
  color: var(--text-light);
  font-size: 1.1rem;
}

/* Add a new button style for warning */
.btn-warning {
  background-color: var(--warning-color);
  color: white;
  border: none;
}

.btn-warning:hover {
  background-color: #d35400;
}

.btn-success {
  background-color: var(--success-color);
    color: white;
  border: none;
}

.btn-success:hover {
  background-color: #27ae60;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .campaigns-cards-container {
    grid-template-columns: 1fr;
  }
  
  .campaign-card.sub-campaign {
    margin-left: 0;
    width: 100%;
  }
  
  .campaign-actions {
    flex-direction: column;
  }
  
  .campaign-actions button {
    width: 100%;
    margin-bottom: var(--spacing-xs);
  }
}

/* Modal Styles */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 8px var(--shadow-color);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.modal-header h3 i {
  color: var(--secondary-color);
}

.close-btn {
    background: none;
    border: none;
  font-size: 1.2rem;
  color: var(--text-light);
    cursor: pointer;
  transition: color var(--transition-speed) ease;
}

.close-btn:hover {
  color: var(--danger-color);
}

.modal-body {
  padding: var(--spacing-md);
  flex-grow: 1;
  overflow-y: auto;
}

.modal-footer {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* Form Styles */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-group label i {
  color: var(--secondary-color);
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.form-control:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  outline: none;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

.url-input-group {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.url-input-group .form-control {
  flex-grow: 1;
}

.url-input-group .btn {
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .modal-footer button {
    width: 100%;
  }
}

.form-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.form-buttons button {
  flex: 1;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-buttons button i {
  margin-right: 5px;
}

.form-buttons .btn-primary {
  background-color: var(--primary-color);
  color: white;
  border: none;
}

.form-buttons .btn-primary:hover {
  background-color: var(--primary-dark-color, #0056b3);
}

.form-buttons .btn-secondary {
  background-color: #6c757d;
  color: white;
  border: none;
}

.form-buttons .btn-secondary:hover {
  background-color: #5a6268;
}

/* Inline assign form */
.assign-form-inline {
    background-color: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
  padding: 15px;
    margin: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.3s ease-in-out;
}

.assign-form-inline h3 {
    margin-top: 0;
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.assign-form-inline .form-group {
    margin-bottom: 15px;
}

.assign-form-inline label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.assign-form-inline select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
  border-radius: 4px;
    background-color: white;
}

.assign-form-inline .form-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.assign-form-inline button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.assign-form-inline button i {
    font-size: 0.9rem;
}

.assign-form-inline button:first-child {
    background-color: var(--success-color);
    color: white;
}

.assign-form-inline button:first-child:hover {
    background-color: #27ae60;
}

.assign-form-inline .cancel-button {
    background-color: var(--light-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.assign-form-inline .cancel-button:hover {
    background-color: #e0e0e0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Theme Selector */
#themeSelector {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.theme-dropdown {
  position: relative;
  display: inline-block;
  z-index: 1000;
}

.theme-dropdown-btn {
  background-color: transparent;
  color: var(--header-text);
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.theme-dropdown-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.theme-dropdown-btn i {
  margin-right: 5px;
}

.theme-dropdown-content {
  display: none;
  position: absolute;
  left: 0; /* Position from the left edge */
  background-color: var(--card-bg);
  min-width: 200px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 8px 0;
  z-index: 1001;
  max-height: 450px;
  overflow-y: auto;
}

.theme-dropdown-content.show {
  display: block;
  animation: fadeIn 0.2s ease;
}

.theme-option {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  color: var(--text-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.theme-option:hover {
  background-color: var(--hover-bg);
}

.theme-option::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.theme-option:nth-child(1)::after {
  background-color: #ffffff;
  border: 1px solid #cccccc;
}

.theme-option:nth-child(2)::after {
  background-color: #1a1a2e;
}

.theme-option:nth-child(3)::after {
  background-color: #6f00ff;
}

.theme-option:nth-child(4)::after {
  background-color: #1a4b8c;
}

.theme-option:nth-child(5)::after {
  background-color: #2e7d32;
}

.theme-option:nth-child(6)::after {
  background-color: #6a1b9a;
}

.theme-option:nth-child(7)::after {
  background-color: #0D0D0D;
}

.theme-option:nth-child(8)::after {
  background-color: #1C1C1C;
}

.theme-option:nth-child(9)::after {
  background-color: #2C2C2C;
}

.theme-option:nth-child(10)::after {
  background-color: #1A1A1A;
}

.theme-option:nth-child(11)::after {
  background-color: #181818;
}

.theme-option i {
  font-size: 1rem;
  width: 24px;
  text-align: center;
  margin-right: 10px;
  color: var(--secondary-color);
}

/* Dark Theme */
body.theme-dark {
  --primary-color: #1a1a2e;
  --secondary-color: #4361ee;
  --accent-color: #3bc9db;
  --danger-color: #e63946;
  --warning-color: #fb8500;
  --success-color: #2ecc71;
  --light-color: #293241;
  --dark-color: #16213e;
  --text-color: #e0e0e0;
  --text-light: #adb5bd;
  --border-color: #4a4a4a;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --bg-color: #121212;
  --header-bg: #1a1a2e;
  --header-text: #ffffff;
  --content-bg: #1a1a2e;
  --card-bg: #1e1e30;
  --input-bg: #2a2a3a;
  --secondary-bg: #232336;
  --hover-bg: #2c2c40;
  --primary-rgb: 26, 26, 46;
  --primary-dark: #0f0f1a;
  
  /* Improved status colors for dark mode */
  --status-new-bg: #1e2329;
  --status-contacted-bg: #1a3a5a;
  --status-appointment-set-bg: #1a3c2a;
  --status-appointment-denied-bg: #3a1a1a;
  
  --status-closed-won-bg: #1a3c2a;
  --status-closed-lost-bg: #3a1a1a;
  --status-on-hold-bg: #2a2a2a;
}


/* Neon Highlights Theme */
body.theme-neon-highlights {
  --primary-color: #00FF9D;
  --secondary-color: #FF00E6;
  --accent-color: #FFFF00;
  --danger-color: #FF3131;
  --warning-color: #FF9900;
  --success-color: #00FF9D;
  --light-color: #2A2A2A;
  --dark-color: #000000;
  --text-color: #FFFFFF;
  --text-light: #CCCCCC;
  --border-color: #333333;
  --shadow-color: rgba(0, 255, 133, 0.3);
  --bg-color: #0D0D0D;
  --header-bg: #0D0D0D;
  --header-text: #FFFFFF;
  --content-bg: #0D0D0D;
  --card-bg: #1A1A1A;
  --input-bg: #222222;
  --secondary-bg: #181818;
  --hover-bg: #222222;
  --primary-rgb: 255, 255, 255;
  --primary-dark: #000000;
  
  /* Status colors */
  --status-new-bg: #111111;
  --status-contacted-bg: #002244;
  --status-appointment-set-bg: #003311;
  --status-appointment-denied-bg: #330022;
  --status-presented-plan-bg: #332200;
  --status-closed-won-bg: #003311;
  --status-closed-lost-bg: #330022;
  --status-on-hold-bg: #222222;
}

/* Warm Tones Theme */
body.theme-warm-tones {
  --primary-color: #F5E8D8;
  --secondary-color: #FF6F61;
  --accent-color: #DAA520;
  --danger-color: #FF4500;
  --warning-color: #FF4500;
  --success-color: #FF6F61;
  --light-color: #2C2C2C;
  --dark-color: #111111;
  --text-color: #F5E8D8;
  --text-light: #CCCCCC;
  --border-color: #333333;
  --shadow-color: rgba(255, 111, 97, 0.3);
  --bg-color: #1C1C1C;
  --header-bg: #1C1C1C;
  --header-text: #F5E8D8;
  --content-bg: #1C1C1C;
  --card-bg: #2A2A2A;
  --input-bg: #333333;
  --secondary-bg: #242424;
  --hover-bg: #333333;
  --primary-rgb: 245, 232, 216;
  --primary-dark: #111111;
  
  /* Status colors */
  --status-new-bg: #2A2A2A;
  --status-contacted-bg: #4A3022;
  --status-appointment-set-bg: #3A4020;
  --status-appointment-denied-bg: #502020;
  --status-presented-plan-bg: #504020;
  --status-closed-won-bg: #3A4020;
  --status-closed-lost-bg: #502020;
  --status-on-hold-bg: #404040;
}

/* Muted Pastels Theme */
body.theme-muted-pastels {
  --primary-color: #E4E4E4;
  --secondary-color: #A8DADC;
  --accent-color: #FFC1CC;
  --danger-color: #B39CD0;
  --warning-color: #B39CD0;
  --success-color: #A8DADC;
  --light-color: #3A3A3A;
  --dark-color: #202020;
  --text-color: #E4E4E4;
  --text-light: #CCCCCC;
  --border-color: #444444;
  --shadow-color: rgba(168, 218, 220, 0.3);
  --bg-color: #2C2C2C;
  --header-bg: #2C2C2C;
  --header-text: #E4E4E4;
  --content-bg: #2C2C2C;
  --card-bg: #3A3A3A;
  --input-bg: #444444;
  --secondary-bg: #363636;
  --hover-bg: #444444;
  --primary-rgb: 228, 228, 228;
  --primary-dark: #202020;
  
  /* Status colors */
  --status-new-bg: #3A3A3A;
  --status-contacted-bg: #3A4A4A;
  --status-appointment-set-bg: #3A4A3A;
  --status-appointment-denied-bg: #4A3A3A;
  --status-presented-plan-bg: #4A4A3A;
  --status-closed-won-bg: #3A4A3A;
  --status-closed-lost-bg: #4A3A3A;
  --status-on-hold-bg: #444444;
}

/* Minty Fresh Theme - Modern light theme with mint accents */
body.theme-minty-fresh {
  --primary-color: #4AD295;
  --secondary-color: #38BFA7;
  --accent-color: #7BE495;
  --danger-color: #FF6B6B;
  --warning-color: #FFD166;
  --success-color: #4AD295;
  --light-color: #F2F7F5;
  --dark-color: #333333;
  --text-color: #333333;
  --text-light: #5F6C6B;
  --border-color: #E0E9E6;
  --shadow-color: rgba(56, 191, 167, 0.2);
  --bg-color: #FFFFFF;
  --header-bg: #F2F7F5;
  --header-text: #333333;
  --content-bg: #FFFFFF;
  --card-bg: #FFFFFF;
  --input-bg: #F2F7F5;
  --secondary-bg: #F2F7F5;
  --hover-bg: #E0F5EE;
  --primary-rgb: 74, 210, 149;
  --primary-dark: #2A9D72;
  
  /* Status colors */
  --status-new-bg: #F2F7F5;
  --status-contacted-bg: #E0F5EE;
  --status-appointment-set-bg: #E5FFF1;
  --status-appointment-denied-bg: #FFE5E5;
  --status-presented-plan-bg: #FFFCEB;
  --status-closed-won-bg: #E5FFF1;
  --status-closed-lost-bg: #FFE5E5;
  --status-on-hold-bg: #F2F2F7;
}

/* Sunset Gradient Theme - Warm light theme with orange-purple gradients */
body.theme-sunset-gradient {
  --primary-color: #FF8B71; 
  --secondary-color: #FF5F6D;
  --accent-color: #FFC371;
  --danger-color: #E95F6C;
  --warning-color: #FFC371;
  --success-color: #68D391;
  --light-color: #FEF6F5;
  --dark-color: #3C4858;
  --text-color: #3C4858;
  --text-light: #6B7280;
  --border-color: #EAEDF3;
  --shadow-color: rgba(255, 95, 109, 0.15);
  --bg-color: #FFFFFF;
  --header-bg: #FDF9F9;
  --header-text: #3C4858;
  --content-bg: #FFFFFF;
  --card-bg: #FFFFFF;
  --input-bg: #FEF6F5;
  --secondary-bg: #FEF6F5;
  --hover-bg: #FFF1EC;
  --primary-rgb: 255, 139, 113;
  --primary-dark: #FF5F6D;
  
  /* Status colors */
  --status-new-bg: #FEF6F5;
  --status-contacted-bg: #FFF1EC;
  --status-appointment-set-bg: #F4FFF9;
  --status-appointment-denied-bg: #FFF0F0;
  --status-presented-plan-bg: #FFF9EC;
  --status-closed-won-bg: #F4FFF9;
  --status-closed-lost-bg: #FFF0F0;
  --status-on-hold-bg: #F7F7F7;
}


/* Update search inputs for better visibility in dark themes */
#filterInput, #myLeadsFilterInput, #agentFilterInput, 
input[type="text"].form-control, #appointmentsFilterInput, 
#discardsFilterInput, #clientsFilterInput {
  background-color: var(--input-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 8px 35px 8px 10px;
  width: 100%;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

#filterInput:focus, #myLeadsFilterInput:focus, #agentFilterInput:focus, 
input[type="text"].form-control:focus, #appointmentsFilterInput:focus, 
#discardsFilterInput:focus, #clientsFilterInput:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
  outline: none;
}



/* Apply theme colors to elements */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.template-preview-hint {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 5px;
    padding: 5px 10px;
    background-color: rgba(52, 152, 219, 0.1);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
}

.template-preview-hint i {
    margin-right: 5px;
    color: var(--info-color);
}

#campaignTemplate {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px 12px;
    width: 100%;
    color: var(--text-color);
    transition: border-color 0.2s;
}

#campaignTemplate:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.lead-status-section {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.lead-status-section label,
.lead-assignment-section label {
    margin-right: 10px;
    font-weight: 600;
    color: var(--text-color);
}

.lead-status-section .status-select-wrapper {
    margin-right: 10px;
}

.history-btn {
    margin-left: 10px;
    padding: 4px 8px;
    font-size: 0.8rem;
}

/* Campaign Settings Styles */
.settings-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 1px 3px var(--shadow-color);
}

.settings-header button {
  margin-right: var(--spacing-md);
}

.settings-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--primary-color);
}

.settings-header h2 i {
  color: var(--secondary-color);
}

.settings-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 8px var(--shadow-color);
  overflow: hidden;
  margin-bottom: var(--spacing-lg);
}

.settings-description {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-bottom: 1px solid var(--border-color);
}

.settings-description p {
  margin: 0;
  color: var(--text-light);
  font-size: 0.9rem;
}

.settings-options {
  padding: var(--spacing-md);
}

.setting-option {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s;
}

.setting-option:last-child {
  border-bottom: none;
}

.setting-option:hover {
  background-color: rgba(52, 152, 219, 0.05);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.setting-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.setting-toggle {
  margin-left: var(--spacing-md);
}

.setting-name {
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.setting-name i {
  color: var(--secondary-color);
  width: 20px;
  text-align: center;
}

.setting-description {
  color: var(--text-light);
  font-size: 0.9rem;
}

.settings-actions {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.settings-actions button {
  min-width: 120px;
}

/* Toggle Switch Styles for Settings */
.settings-options .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  flex-shrink: 0;
}

.settings-options .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

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

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

.settings-options input:checked + .slider {
  background-color: var(--primary-color);
}

.settings-options input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-color);
}

.settings-options input:checked + .slider:before {
  transform: translateX(26px);
}

/* Responsive adjustments for settings */
@media (max-width: 768px) {
  .settings-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .settings-header button {
    margin-right: 0;
    margin-bottom: var(--spacing-sm);
  }
  
  .setting-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .setting-toggle {
    margin-left: 0;
    margin-top: var(--spacing-sm);
  }
  
  .setting-name {
    margin-bottom: var(--spacing-xs);
  }
}

/* Notification System */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  background-color: var(--light-color);
  border-left: 4px solid var(--primary-color);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  z-index: 1000;
  transform: translateX(120%);
  transition: transform 0.3s ease, top 0.3s ease;
  max-width: 350px;
  margin-bottom: 10px;
}

.notification.show {
  transform: translateX(0);
}

.notification i {
  margin-right: 10px;
  font-size: 1.2rem;
}

.notification-success {
  border-left-color: #2ecc71;
}

.notification-success i {
  color: #2ecc71;
}

.notification-error {
  border-left-color: #e74c3c;
}

.notification-error i {
  color: #e74c3c;
}

.notification-info {
  border-left-color: var(--primary-color);
}

.notification-info i {
  color: var(--primary-color);
}

/* Template Badge */
.template-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background-color: var(--accent-color-light);
  color: var(--text-color);
  border-radius: var(--border-radius-sm);
  font-size: 0.85rem;
}

.template-badge i {
  color: var(--accent-color);
  margin-right: 0.25rem;
}

.template-history-btn {
  margin-left: 0.5rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
}

.template-preview-container {
  margin-top: 1rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-color-light);
  padding: 0.5rem;
}

.template-preview-container img {
  max-width: 100%;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Created date */
.created-date {
  display: inline-flex;
  align-items: center;
  color: var(--text-color-muted);
  font-size: 0.85rem;
}

.created-date i {
  margin-right: 0.25rem;
  color: var(--accent-color);
}

/* Template history modal */
.template-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.template-history-table th,
.template-history-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.template-history-table th {
  background-color: var(--bg-color-light);
  font-weight: 600;
}

.template-history-table .no-history {
  text-align: center;
  padding: 2rem;
  color: var(--text-color-muted);
}

.template-history-table .template-badge {
  white-space: nowrap;
}

#templateHistoryLoading {
  text-align: center;
  padding: 2rem;
}

.template-metrics {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-color-muted);
}

.template-metrics .metric {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.template-metrics .metric i {
  color: var(--accent-color);
}

.metric-description {
  font-size: 0.7rem;
  color: var(--text-color-muted);
  margin-top: 0.2rem;
  font-style: italic;
}

#historyList li {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.error-message {
  color: var(--danger-color);
  padding: 1rem;
  text-align: center;
  background-color: var(--danger-color-light);
  border-radius: var(--border-radius-sm);
}

.error-message i {
  margin-right: 0.5rem;
}

/* Advanced Filter Styles */
.advanced-filter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    width: 100%;
    position: relative;
}

/* Advanced Filter Button */
.advanced-filter-btn {
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 500;
    background-color: var(--light-color);
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex !important;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    margin-top: 10px;
    width: fit-content;
    visibility: visible !important;
    opacity: 1 !important;
}

.advanced-filter-btn:hover {
    background-color: var(--secondary-color);
    color: white;
}

.advanced-filter-btn i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.advanced-filter-btn.active {
    background-color: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}

.advanced-filter-btn.active i {
    transform: rotate(180deg);
}

/* Advanced Filter Dropdown */
.advanced-filter-dropdown {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
    padding: 15px 20px;
    display: none;
    width: 100%;
    z-index: 100;
    position: relative;
}

.advanced-filter-dropdown.show {
    display: block !important;
    animation: slideDown 0.2s ease;
}

.filter-section-title {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
}

.filter-sections {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.filter-section-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
    margin-bottom: 2px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.filter-section-item:hover {
    background-color: var(--hover-bg) !important;
}

.filter-section-item input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    vertical-align: middle !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background-color: var(--input-bg) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
}

.filter-section-item input[type="checkbox"]:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.filter-section-item input[type="checkbox"]:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

.filter-section-item label {
    font-size: 14px !important;
    color: var(--text-color) !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .filter-sections {
        grid-template-columns: 1fr;
    }
    
    .advanced-filter-dropdown {
        width: 100%;
    }
}

/* Search Container Styles */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-light);
  font-size: 14px;
  z-index: 1;
}

#filterInput, #myLeadsFilterInput, #agentFilterInput, input[type="text"].form-control {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

#filterInput:focus, #myLeadsFilterInput:focus, #agentFilterInput:focus, input[type="text"].form-control:focus {
  border-color: var(--secondary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

#filterInput.active-filter, #myLeadsFilterInput.active-filter, #agentFilterInput.active-filter {
  border-color: var(--secondary-color);
  background-color: rgba(52, 152, 219, 0.05);
}

/* Clear Search Button - Only visible when input has text */
.clear-search {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  z-index: 2;
}

.clear-search:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--danger-color);
}

/* Show clear button only when input has text */
#filterInput:not(:placeholder-shown) + .clear-search,
#myLeadsFilterInput:not(:placeholder-shown) + .clear-search,
#agentFilterInput:not(:placeholder-shown) + .clear-search {
  display: flex;
}

/* Status colors */
.status-new { background-color: #f8f9fa; border-color: #dee2e6; }
.status-contacted { background-color: #cce5ff; border-color: #b8daff; }
.status-appointment-set { background-color: #d4edda; border-color: #c3e6cb; }
.status-appointment-denied { background-color: #f8d7da; border-color: #f5c6cb; }
.status-presented-plan { background-color: #fff3cd; border-color: #ffeeba; }
.status-closed-won { background-color: #d1e7dd; border-color: #badbcc; }
.status-closed-lost { background-color: #f8d7da; border-color: #f5c6cb; }
.status-on-hold { background-color: #e2e3e5; border-color: #d6d8db; }

/* Lead card with status */
.lead-card.status-new .lead-card-header { border-bottom: 2px solid #dee2e6; }
.lead-card.status-contacted .lead-card-header { border-bottom: 2px solid #b8daff; }
.lead-card.status-appointment-set .lead-card-header { border-bottom: 2px solid #c3e6cb; }
.lead-card.status-appointment-denied .lead-card-header { border-bottom: 2px solid #f5c6cb; }

.lead-card.status-closed-won .lead-card-header { border-bottom: 2px solid #badbcc; }
.lead-card.status-closed-lost .lead-card-header { border-bottom: 2px solid #f5c6cb; }
.lead-card.status-on-hold .lead-card-header { border-bottom: 2px solid #d6d8db; }

/* Status select wrapper */
.status-select-wrapper.status-new { background-color: #f8f9fa; border-color: #dee2e6; }
.status-select-wrapper.status-contacted { background-color: #cce5ff; border-color: #b8daff; }
.status-select-wrapper.status-appointment-set { background-color: #d4edda; border-color: #c3e6cb; }
.status-select-wrapper.status-appointment-denied { background-color: #f8d7da; border-color: #f5c6cb; }
.status-select-wrapper.status-closed-won { background-color: #d1e7dd; border-color: #badbcc; }
.status-select-wrapper.status-closed-lost { background-color: #f8d7da; border-color: #f5c6cb; }
.status-select-wrapper.status-on-hold { background-color: #e2e3e5; border-color: #d6d8db; }

/* Appointment info */
.appointment-info {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #e8f4ff;
    border-radius: 4px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.appointment-info i {
    color: #0d6efd;
}

/* Appointment scheduler popup */
.popup .form-group {
    margin-bottom: 15px;
}

.popup .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.popup .form-group input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.popup .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Status change animation */
@keyframes statusChangeHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

.status-change-highlight {
    animation: statusChangeHighlight 1s ease-in-out;
}

/* Add styles for discard countdown */
.discard-countdown {
    margin-top: 10px;
    padding: 12px;
    border-radius: 6px;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.discard-countdown .lead-info-label {
    color: #856404;
    font-weight: bold;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.discard-countdown .lead-info-value {
    color: #856404;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    margin-bottom: 8px;
}

.countdown-progress-container {
    width: 100%;
    height: 8px;
    background-color: #ffe8a1;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 5px;
}

.countdown-progress-bar {
    height: 100%;
    background-color: #f0ad4e;
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

.countdown-days {
    font-size: 1.2em;
}

.countdown-time {
    font-size: 0.9em;
    color: #9e7e2e;
}

/* Add styles for the discards page */
#discardsContent {
    padding: var(--spacing-md);
}

#discardsContent h2 {
    margin-bottom: var(--spacing-md);
}

#discardsContent .lead-filters {
    margin-bottom: var(--spacing-md);
}

#discardsContent .lead-filters input {
    padding: var(--spacing-sm);
    margin-right: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

#discardsContent .lead-filters button {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--secondary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
}

#discardsContent .lead-filters button:hover {
    background-color: var(--accent-color);
}

/* Tabs */
.discards-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.discards-tab {
    padding: 10px 20px;
    background-color: var(--secondary-color);
    color: white;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    top: 1px;
}

.discards-tab:hover {
    background-color: var(--accent-color);
}

.discards-tab.active {
    background-color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
    font-weight: bold;
    color: white;
}

/* Discards Containers */
.discards-container {
    display: none;
    margin-top: 20px;
}

.discards-container.active {
    display: block;
}

/* Limbo Lead Cards */
.limbo-lead-card {
    border-left-color: #dc3545;
    border-left-width: 6px;
}

.limbo-info {
    background-color: rgba(220, 53, 69, 0.05);
    border-radius: 4px;
    padding: 5px;
}

.limbo-lead-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.no-discards-message {
    text-align: center;
    padding: 20px;
    color: var(--text-light);
    font-style: italic;
}

/* Toast notifications */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 250px;
    max-width: 350px;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 12px 16px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateX(120%);
    transition: transform 0.3s ease-in-out;
    border-left: 4px solid var(--primary-color);
}

.toast.show {
    transform: translateX(0);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast-content i {
    font-size: 18px;
}

.toast-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 14px;
    padding: 4px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #666;
}

.toast-info {
    border-left-color: var(--primary-color);
}

.toast-info i {
    color: var(--primary-color);
}

.toast-success {
    border-left-color: #2ecc71;
}

.toast-success i {
    color: #2ecc71;
}

.toast-error {
    border-left-color: #e74c3c;
}

.toast-error i {
    color: #e74c3c;
}

.toast-warning {
    border-left-color: #f39c12;
}

.toast-warning i {
    color: #f39c12;
}

/* Template History Styles */
.history-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 4px var(--shadow-color);
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
}

.history-card h4 {
  margin: 0;
  padding: var(--spacing-md);
  background-color: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
  color: var(--primary-color);
  font-size: 1.1rem;
}

.history-card-content {
  padding: var(--spacing-sm);
  max-height: 400px;
  overflow-y: auto;
}

.history-card-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-card-content li {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.history-card-content li:last-child {
  border-bottom: none;
}

.template-badge {
  display: inline-block;
  background-color: var(--light-color);
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  color: var(--primary-color);
  font-weight: 500;
  margin-right: var(--spacing-sm);
}

.template-date {
  color: var(--text-light);
  margin-top: 5px;
  font-size: 0.85rem;
}

.template-metrics {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  color: var(--text-light);
  font-size: 0.9rem;
}

.metric i {
  margin-right: 4px;
  color: var(--secondary-color);
}

.campaign-history-item {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.campaign-history-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.campaign-history-item h4 {
  background-color: transparent;
  padding-left: 0;
  border-bottom: none;
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--primary-color);
}

.campaign-section-title {
  margin-top: 20px;
  margin-bottom: 15px;
  color: var(--primary-color);
  font-size: 1.2rem;
}

#campaignHistoriesContainer {
  padding: 15px;
}

/* Loading Indicators */
.history-loading {
  padding: 20px;
  text-align: center;
  color: var(--text-light);
}

/* Lead List Upload Styles */
.lead-list-upload-container {
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 15px;
    margin-top: 5px;
    background-color: rgba(var(--primary-rgb), 0.03);
}

.lead-list-upload-container input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-color);
}

.lead-list-preview {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-color);
}

.lead-list-preview h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--primary-color);
}

.lead-list-preview ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

.lead-list-preview ul li {
    padding: 5px 0;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.05);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.lead-list-preview ul li:last-child {
    border-bottom: none;
}

.lead-list-preview ul li i {
    margin-right: 8px;
    color: var(--success-color);
}

.lead-list-preview ul li.error {
    color: var(--danger-color);
}

.lead-list-preview ul li.error i {
    color: var(--danger-color);
}

/* Secondary button */
.secondary-button {
  background-color: var(--light-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.secondary-button i {
  margin-right: 5px;
}

.secondary-button:hover {
  background-color: var(--hover-bg);
}

/* Form actions container */
.form-actions {
  margin-top: var(--spacing-md);
  display: flex;
  justify-content: center;
}

.form-actions button {
  width: auto;
  margin: 0 5px;
}

#login-error-message {
  margin-top: 15px;
  padding: 10px;
  background-color: rgba(231, 76, 60, 0.1);
  border-left: 4px solid var(--danger-color);
  color: var(--danger-color);
  border-radius: 4px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  animation: fadeIn 0.3s ease-in-out;
}

#login-error-message i {
  margin-right: 8px;
  font-size: 1rem;
}

.field-note {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
  color: var(--text-light);
  font-style: italic;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Login error message */
#login-error-message {
    margin: 10px 0;
    padding: 10px 15px;
    background-color: #ffebee;
    border: 1px solid #f44336;
    color: #d32f2f;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
    animation: fadeIn 0.3s ease-in-out;
}

#login-error-message i {
    margin-right: 8px;
    font-size: 16px;
}

/* Locked account help */
.locked-account-help {
    margin: 15px 0;
    padding: 15px;
    background-color: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 4px;
    animation: fadeIn 0.3s ease-in-out;
    text-align: center;
}

.locked-account-help p {
    margin-bottom: 10px;
    color: #0d47a1;
    font-weight: 500;
}

.locked-account-help button {
    margin-top: 5px;
    padding: 8px 15px;
    background-color: #2196f3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.locked-account-help button:hover {
    background-color: #1976d2;
}

.locked-account-help button i {
    margin-right: 5px;
}

/* Field note for case sensitivity */
.field-note {
    display: block;
    margin: 5px 0 15px;
    font-size: 12px;
    color: #757575;
    font-style: italic;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* reCAPTCHA container styling */
.recaptcha-container {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.g-recaptcha {
    margin-bottom: 5px;
    transform-origin: left;
}

/* For mobile responsiveness */
@media screen and (max-width: 400px) {
    .g-recaptcha {
        transform: scale(0.85);
        margin-left: -20px;
    }
}

/* Ticket Notification Badge */
.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ff3860;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.notification-badge.pulse {
    animation: pulse-animation 1.5s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 56, 96, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 56, 96, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 56, 96, 0);
    }
}

/* Make sure menu buttons with badges have relative positioning */
#dashboardMenu button {
    position: relative;
}

/* Add Lead List Upload Styling */
.lead-list-upload {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lead-list-upload .form-container {
    background-color: var(--background);
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.lead-list-upload h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--heading);
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.lead-list-upload .form-group {
    margin-bottom: 15px;
}

.lead-list-upload label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text);
}

.lead-list-upload input[type="file"] {
    width: 100%;
    padding: 10px;
    background-color: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
}

.lead-list-upload .form-hint {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 5px;
}

.lead-list-upload .form-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.lead-list-upload button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.lead-list-upload button[type="submit"] {
    background-color: var(--primary);
    color: white;
}

.lead-list-upload button[type="submit"]:hover {
    background-color: var(--primary-dark);
}

.lead-list-upload .cancel-button {
    background-color: var(--secondary);
    color: white;
}

.lead-list-upload .cancel-button:hover {
    background-color: var(--secondary-dark);
}

/* Add new styles for masterControls */
#masterControls {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: var(--light-color);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 5px var(--shadow-color);
  z-index: 2; /* Higher z-index than filter section */
  position: relative; /* Position relative */
}

#masterControls .action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

#masterControls .action-buttons button {
  min-width: 150px;
  padding: 10px 15px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--border-radius-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

#masterControls .action-buttons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#masterControls .action-buttons button i {
  font-size: 1.1rem;
}

/* Master Help Content Styles */
#masterHelpContent {
    padding: 0;
    background: var(--background-color);
}

#masterHelpContent .help-container {
    max-width: 100%;
    margin: 0;
    background: var(--background-color);
    display: flex;
    flex-direction: column;
}

#masterHelpContent .help-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 2rem;
    text-align: center;
    margin-bottom: 0;
    width: 100%;
    flex-shrink: 0;
}

#masterHelpContent .help-header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 2.5rem;
    font-weight: 700;
}

#masterHelpContent .help-header .help-subtitle {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.9;
}

#masterHelpContent .help-content-wrapper {
    display: flex;
    min-height: calc(100vh - 200px);
    flex: 1;
}

#masterHelpContent .help-sidebar {
    width: 280px;
    background: var(--light-color);
    border-right: 1px solid var(--border-color);
    padding: 1rem 0;
    overflow-y: auto;
}

#masterHelpContent .help-sidebar .sidebar-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    color: var(--text-color);
    font-weight: 500;
}

#masterHelpContent .help-sidebar .sidebar-item:hover {
    background: var(--primary-light);
    border-left-color: var(--primary);
}

#masterHelpContent .help-sidebar .sidebar-item.active {
    background: var(--primary-light);
    border-left-color: var(--primary);
    color: var(--primary);
}

#masterHelpContent .help-sidebar .sidebar-item i {
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
}

#masterHelpContent .help-main-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    background: var(--background-color);
}

#masterHelpContent .help-content-section {
    display: none;
}

#masterHelpContent .help-content-section.active {
    display: block;
}

#masterHelpContent .help-section h2 {
    color: var(--primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-light);
    font-size: 1.8rem;
}

#masterHelpContent .help-section h3 {
    color: var(--text-color);
    margin: 1.5rem 0 1rem 0;
    font-size: 1.3rem;
}

#masterHelpContent .help-section h4 {
    color: var(--text-color);
    margin: 1rem 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

#masterHelpContent .help-section p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--text-color);
}

#masterHelpContent .help-section ul, 
#masterHelpContent .help-section ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

#masterHelpContent .help-section li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: var(--text-color);
}

#masterHelpContent .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

#masterHelpContent .feature-item {
    background: var(--light-color);
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px var(--shadow-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#masterHelpContent .feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color);
}

#masterHelpContent .feature-item h4 {
    margin: 0 0 0.5rem 0;
    color: var(--primary);
    font-size: 1.1rem;
}

#masterHelpContent .feature-item p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.95rem;
}

#masterHelpContent .feature-item i {
    margin-right: 0.5rem;
}

/* Responsive design for master help */
@media (max-width: 768px) {
    #masterHelpContent .help-content-wrapper {
        flex-direction: column;
    }
    
    #masterHelpContent .help-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 200px;
        overflow-y: auto;
    }
    
    #masterHelpContent .help-main-content {
        padding: 1rem;
    }
    
    #masterHelpContent .help-header h1 {
        font-size: 2rem;
    }
    
    #masterHelpContent .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* Two-Factor Authentication Forms */
#twoFactorForm,
#backupCodeForm {
  max-width: 450px;
  margin: 100px auto;
  padding: var(--spacing-xl);
  background-color: white;
  border-radius: var(--border-radius-md);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  text-align: center;
  border: 1px solid var(--border-color);
}

#twoFactorForm h2,
#backupCodeForm h2 {
  color: var(--primary-color);
  font-size: 1.75rem;
  margin-bottom: var(--spacing-md);
  position: relative;
  display: inline-block;
}

#twoFactorForm h2:after,
#backupCodeForm h2:after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--accent-color);
  margin: 8px auto 0;
}

#twoFactorForm .info-text,
#backupCodeForm .info-text {
  color: var(--text-light);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
  font-size: 1rem;
}

#twoFactorForm .form-group,
#backupCodeForm .form-group {
  margin-bottom: var(--spacing-lg);
}

#twoFactorForm label,
#backupCodeForm label {
  font-weight: 600;
  display: block;
  margin-bottom: var(--spacing-sm);
  text-align: left;
  color: var(--primary-color);
}

#twoFactorForm input,
#backupCodeForm input {
  width: 100%;
  padding: var(--spacing-md);
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: 4px;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  transition: all 0.3s ease;
  background-color: var(--input-bg);
}

#twoFactorForm input:focus,
#backupCodeForm input:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
  outline: none;
}

#twoFactorForm button,
#backupCodeForm button {
  width: 100%;
  padding: var(--spacing-md);
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius-md);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: var(--spacing-md);
  font-weight: 600;
}

#twoFactorForm button:hover,
#backupCodeForm button:hover {
  background-color: var(--accent-color);
}

#twoFactorForm button i,
#backupCodeForm button i {
  margin-right: var(--spacing-sm);
}

#twoFactorForm .form-toggle,
#backupCodeForm .form-toggle {
  margin: var(--spacing-md) 0;
  font-size: 0.95rem;
}

#twoFactorForm .form-toggle a,
#backupCodeForm .form-toggle a {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
}

#twoFactorForm .form-toggle a:hover,
#backupCodeForm .form-toggle a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

#twoFactorForm .back-to-login,
#backupCodeForm .back-to-login {
  margin-top: var(--spacing-lg);
  font-size: 0.9rem;
}

/* Adding an animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#twoFactorForm,
#backupCodeForm {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* Code input styling */
#twoFactorCode {
  font-family: monospace;
  font-size: 1.5rem;
}

/* Toast Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* Toast styling enhancements */
.toast-content {
  display: flex;
  align-items: center;
}

.toast-content i {
  margin-right: 10px;
  font-size: 1.2rem;
}

.toast-content span {
  flex: 1;
}

/* Code input styling enhancements */
#twoFactorCode, #backupCode {
  transition: transform 0.1s ease, border-color 0.3s ease;
}

/* Button styles */
#settingsButton {
  position: absolute;
  left: 46%;
  top: 26px;
  transform: translateX(-50%);
  background-color: transparent;
  color: var(--header-text);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 0.8em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  transition: all 0.2s;
  z-index: 100;
  min-width: auto;
}

#settingsButton:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.email-sent-message {
  text-align: center;
  padding: 20px;
  background-color: #f0f9ff;
  border-radius: 8px;
  border: 1px solid #bae6fd;
  margin-bottom: 25px;
}

.email-sent-message .email-icon {
  background-color: #0ea5e9;
  color: white;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.email-sent-message h3 {
  color: #0369a1;
  margin-bottom: 15px;
}

.email-sent-message p {
  margin-bottom: 10px;
  color: #0c4a6e;
}

.email-sent-message .email-note {
  font-size: 0.85rem;
  color: #64748b;
  font-style: italic;
}

.mandatory-2fa-message {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mandatory-2fa-message .alert-icon {
  flex-shrink: 0;
  margin-right: 15px;
  font-size: 24px;
  color: #ffc107;
}

.mandatory-2fa-message .alert-content {
  flex-grow: 1;
}

.mandatory-2fa-message h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #856404;
}

.mandatory-2fa-message p {
  margin-bottom: 8px;
  color: #856404;
}

/* ... existing CSS ... */

/* Appointments View Toggle Buttons */
.view-toggle-buttons {
    display: flex;
    gap: 10px;
    margin-left: 20px;
}

.view-toggle-btn {
    padding: 8px 15px;
    border: none;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn.active {
    background-color: #3498db;
    color: white;
}

.view-toggle-btn:hover:not(.active) {
    background-color: #e0e0e0;
}

/* US Map Styles */
.map-container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#us-map-container {
    position: relative;
    width: 100%;
    height: 600px;
}

#us-map {
    width: 100%;
    height: 100%;
}

.state {
    fill: #e0e0e0;
    stroke: #fff;
    stroke-width: 0.5;
    cursor: pointer;
    transition: fill 0.3s ease;
}

.state:hover {
    fill: #c0c0c0;
}

.state.has-appointments {
    fill: #3498db;  /* Blue color */
    stroke: #fff;
    stroke-width: 1.5;
}

.state.has-appointments:hover {
    fill: #2980b9;  /* Darker blue on hover */
}

.state-border {
    fill: none;
    stroke: #fff;
    stroke-width: 1;
    pointer-events: none;
}

/* Map Tooltip */
.map-tooltip {
    position: fixed !important; /* Use fixed positioning instead of absolute */
    display: none;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 5px 8px;
    font-size: 12px;
    z-index: 10000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    max-width: 150px;
    text-align: center;
    transform: none !important;
    margin: 0 !important;
}

.state {
    fill: #e0e0e0;
    stroke: #fff;
    stroke-width: 0.5;
    cursor: pointer;
    transition: fill 0.3s ease;
}

.state:hover {
    fill: #b3b3b3;
}

.state.has-appointments {
    fill: var(--secondary-color);
    stroke-width: 1;
}

.state.has-appointments:hover {
    fill: var(--accent-color);
}

/* Calendar View */
.state-calendar-view {
    width: 100%;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.calendar-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.back-to-map-btn {
    padding: 8px 15px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 20px;
}

.back-to-map-btn:hover {
    background-color: #2980b9;
}

.calendar-months {
    display: flex;
    flex-wrap: wrap;
    gap: 35px; /* Increased from 30px */
    justify-content: center;
    padding: 15px; /* Increased from 10px */
}

.calendar-month {
    width: 100%;
    max-width: 800px; /* Significantly increased from 550px to 800px */
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.month-header {
    background-color: #3498db;
    color: white;
    padding: 15px; /* Increased from 12px */
    text-align: center;
    margin: 0;
    font-size: 1.4rem; /* Increased from 1.2rem */
    font-weight: 500;
    border-bottom: 2px solid #2980b9;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px; /* Increased from 1px for more separation */
    background-color: #e0e0e0;
    padding: 2px;
}

.calendar-day-header {
    padding: 8px 0;
    text-align: center;
    background-color: #f0f0f0;
    font-weight: bold;
    font-size: 14px;
}

.calendar-day {
    min-height: 120px;
    min-width: 110px; /* Significantly increased from 75px */
    background-color: #fff;
    padding: 10px;
    position: relative;
}

.calendar-day.empty {
    background-color: #f9f9f9;
}

.calendar-day.has-appointments .day-number {
    color: #3498db;
    font-weight: bold;
}

.day-number {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.day-appointments {
    margin-top: 25px; /* Space for the day number */
    max-height: 95px; /* Increased from 90px */
    overflow-y: auto;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    padding-right: 5px;
}

.day-appointments::-webkit-scrollbar {
    width: 4px;
}

.day-appointments::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.day-appointments::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Mini Lead Cards in Calendar */
.mini-lead-card {
    padding: 6px 10px;
    background-color: #e8f4fc;
    border-left: 4px solid #3498db; /* Made border thicker */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    width: 100%;
    display: block;
    position: relative; /* Added for positioning the reschedule button */
}

.mini-lead-card:hover {
    background-color: #d0e8f7;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.mini-lead-time {
    color: #2980b9;
    font-size: 0.95rem;
    font-weight: bold;
    display: block;
    margin-bottom: 3px;
}

.mini-lead-name {
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #2c3e50;
    display: block;
}

.day-number {
    position: absolute;
    top: 6px;
    right: 10px;
    font-weight: bold;
    font-size: 0.95rem; /* Increased from 0.9rem */
    color: #777;
}

.no-appointments {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .calendar-month {
        max-width: 700px;
    }
    
    .calendar-day {
        min-width: 95px;
    }
}

@media (max-width: 992px) {
    .calendar-month {
        max-width: 100%;
    }
    
    .calendar-day {
        min-width: 75px;
    }
}

@media (max-width: 768px) {
    .calendar-months {
        flex-direction: column;
        gap: 25px;
    }
    
    .calendar-month {
        max-width: 100%;
    }
    
    .calendar-day {
        min-height: 90px;
        min-width: 60px; /* Increased from 45px */
    }
    
    .day-appointments {
        max-height: 65px;
    }
    
    .mini-lead-time, .mini-lead-name {
        font-size: 0.85rem;
    }
}

/* Map loading state */
.loading-map {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.loading-map i {
    font-size: 48px;
    color: #3498db;
    margin-bottom: 20px;
}

.loading-map p {
    font-size: 18px;
    color: #555;
}

.download-btn {
    padding: 8px 15px;
    background-color: var(--success-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s;
    margin-left: 10px;
}

.download-btn:hover {
    background-color: var(--accent-color);
}

.download-btn i {
    margin-right: 5px;
}

/* Lead Migration Button */
#leadMigrationButton {
  position: absolute;
  left: 54%;
  top: 26px;
  transform: translateX(-50%);
  background-color: transparent;
  color: var(--header-text);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 0.8em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  transition: all 0.2s;
  z-index: 100;
  min-width: auto;
}

#leadMigrationButton:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Calendar container for all appointments */
.calendar-container {
    width: 100%;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.calendar-container .calendar-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.calendar-container .calendar-header h3 {
    font-size: 1.5rem;
    margin: 0;
    color: var(--dark-color);
}

/* Responsive calendar view */
@media (max-width: 768px) {
    .calendar-months {
        flex-direction: column;
    }
    
    .calendar-month {
        max-width: 100%;
    }
    
    .calendar-day {
        min-height: 80px;
    }
}

.calendar-months {
    display: flex;
    flex-wrap: wrap;
    gap: 35px; /* Increased from 30px */
    justify-content: center;
    padding: 15px; /* Increased from 10px */
}

.appointment-calendar {
    max-width: 1800px; /* Increased from 1600px */
    margin: 0 auto;
    overflow-x: auto; /* Add horizontal scrolling for extra-wide calendars */
    padding-bottom: 15px; /* Add some padding for the scrollbar */
}

/* Add some styling for different appointment states */
.calendar-day.today {
    background-color: #f0f9ff;
    border: 1px solid #a8d8ff;
}

/* Make the calendar month container look better */
.calendar-container, .map-container {
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    padding: 25px;
    width: 100%;
    overflow: hidden; /* Ensure container doesn't overflow */
}

/* Adjust the calendar months container */
.calendar-months {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    justify-content: flex-start; /* Changed from center to flex-start */
    padding: 15px;
    width: max-content; /* Allow container to expand with calendar width */
    margin: 0 auto; /* Center the container */
}

/* Make sure the mini lead cards display properly */
.mini-lead-card {
    padding: 8px 12px; /* Increased padding */
    background-color: #e8f4fc;
    border-left: 4px solid #3498db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    width: 100%;
    display: block;
}

/* Adjust the calendar months container to stack vertically */
.calendar-months {
    display: flex;
    flex-direction: column; /* Stack vertically */
    gap: 40px; /* Increased spacing between months */
    justify-content: flex-start;
    padding: 15px;
    width: 100%; /* Full width */
    margin: 0 auto;
}

/* Make calendar months even wider */
.calendar-month {
    width: 100%;
    max-width: 95%; /* Almost full width */
    margin: 0 auto 20px; /* Center horizontally */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Adjust calendar container for vertical layout */
.appointment-calendar {
    max-width: 100%; /* Full width */
    margin: 0 auto;
    overflow-x: hidden; /* No horizontal scrolling */
    overflow-y: auto; /* Allow vertical scrolling */
    padding-bottom: 15px;
}

/* Make day cells wider */
.calendar-day {
    min-height: 120px;
    min-width: 13.5%; /* Approximately 1/7 of width, slightly wider */
    background-color: #fff;
    padding: 12px; /* Increased padding */
    position: relative;
}

/* Adjust responsive layouts */
@media (max-width: 1200px) {
    .calendar-month {
        max-width: 98%;
    }
}

@media (max-width: 992px) {
    .calendar-day {
        min-width: 13.5%;
    }
}

@media (max-width: 768px) {
    .calendar-day {
        min-height: 100px;
        min-width: 13.5%;
    }
    
    .day-appointments {
        max-height: 70px;
    }
}

/* Add subtle divider between months */
.calendar-month:not(:last-child)::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, #ccc, transparent);
    width: 80%;
    margin: 30px auto 0;
}

/* Enhanced notification system styles */
.notification {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px 20px;
    min-width: 300px;
    max-width: 400px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid #6c757d;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    transform: translateX(100%);
    opacity: 0;
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification-success {
    border-left-color: #28a745;
    background: linear-gradient(135deg, #ffffff 0%, #f8fff9 100%);
}

.notification-error {
    border-left-color: #dc3545;
    background: linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
}

.notification-warning {
    border-left-color: #ffc107;
    background: linear-gradient(135deg, #ffffff 0%, #fffdf7 100%);
}

.notification-info {
    border-left-color: #17a2b8;
    background: linear-gradient(135deg, #ffffff 0%, #f7fcfd 100%);
}

.notification i {
    font-size: 18px;
    flex-shrink: 0;
}

.notification-success i {
    color: #28a745;
}

.notification-error i {
    color: #dc3545;
}

.notification-warning i {
    color: #ffc107;
}

.notification-info i {
    color: #17a2b8;
}

.notification span {
    flex: 1;
    line-height: 1.4;
}

/* Auto-assign batch notifications */
.notification-auto-assign {
    border-left-color: #007bff;
    background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
}

.notification-auto-assign i {
    color: #007bff;
}

/* Animation for notification entrance */
@keyframes notificationSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation for notification exit */
@keyframes notificationSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Smooth repositioning animation */
.notification {
    transition: top 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

/* Notification container positioning */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
}

.notification-container .notification {
    pointer-events: auto;
    position: relative;
    right: 0;
    margin-bottom: 10px;
}

/* Add a scroll-to-top button for calendar view */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #3498db;
    color: white;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    z-index: 1000;
    opacity: 0.8;
}

.scroll-top-btn:hover {
    background-color: #2980b9;
    transform: translateY(-3px);
    opacity: 1;
}

.scroll-top-btn i {
    font-size: 24px;
}

/* Improve calendar day spacing */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px; /* Increased from 2px */
    background-color: #e0e0e0;
    padding: 3px; /* Increased from 2px */
}

/* Logs Table Styles - Moved from ui.js */
.logs-container {
    margin-top: 20px;
    overflow: auto;
    background-color: var(--card-bg, #fff);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding-bottom: 10px;
}

.logs-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--card-bg, #fff);
    border-radius: 8px;
    overflow: hidden;
}

.logs-table th,
.logs-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #eee);
}

.logs-table th {
    background-color: var(--accent-color-light, #f5f7fa);
    font-weight: 600;
    color: var(--text-primary, #333);
    cursor: pointer;
    transition: background-color 0.2s;
    position: sticky;
    top: 0;
    z-index: 10;
}

.logs-table th:hover {
    background-color: var(--accent-color-lighter, #e9ecef);
}

.logs-table tr:hover {
    background-color: var(--hover-color, #f8f9fa);
}

.logs-table tr.critical-row {
    background-color: rgba(255, 235, 238, 0.4);
}

.logs-table tr.error-row {
    background-color: rgba(255, 243, 224, 0.3);
}

.logs-table tr.warning-row {
    background-color: rgba(255, 248, 225, 0.3);
}

/* Log Type Badges */
.log-type {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.log-type-auth {
    background-color: #e3f2fd;
    color: #0d47a1;
}

.log-type-user {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.log-type-lead {
    background-color: #fff8e1;
    color: #ff8f00;
}

.log-type-ticket {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.log-type-error {
    background-color: #ffebee;
    color: #c62828;
}

/* Log Level Badges */
.log-level {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.log-level-info {
    background-color: #e3f2fd;
    color: #0d47a1;
}

.log-level-warning {
    background-color: #fff8e1;
    color: #ff8f00;
}

.log-level-error {
    background-color: #ffebee;
    color: #c62828;
}

.log-level-critical {
    background-color: #b71c1c;
    color: #ffffff;
}

.log-message {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-details-btn {
    background-color: transparent;
    border: none;
    color: var(--primary-color, #3498db);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 14px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.log-details-btn:hover {
    background-color: rgba(52, 152, 219, 0.1);
}

/* Logs Filter Section */
.logs-filter-section {
    background-color: var(--card-bg, #fff);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.logs-filter-section .filter-inputs {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.logs-filter-section .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.logs-filter-section .search-container {
    flex: 1;
    position: relative;
    max-width: 100%;
}

.logs-filter-section #logsFilterInput {
    width: 100%;
    padding: 8px 12px;
    padding-right: 30px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #ddd);
    font-size: 14px;
}

.logs-filter-section .clear-search {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-light, #999);
}

/* Ticket Styles - Moved from ui.js */
/* Close button styles */
.close-button {
    padding: 8px 16px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.close-button:hover {
    background-color: #d32f2f;
}

.close-button i {
    margin-right: 5px;
}

/* Ticket Table Styles */
.tickets-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: var(--card-bg, #fff);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Search box styles */
.search-container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-container input {
    width: 100%;
    padding: 8px 30px 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #ddd);
    font-size: 14px;
    color: var(--text-primary, #333);
}

.search-container .clear-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary, #666);
    cursor: pointer;
    padding: 0;
    z-index: 2;
}

/* Other ticket styles */
.tickets-table th,
.tickets-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #eee);
}

.tickets-table th {
    background-color: var(--accent-color-light, #f5f7fa);
    font-weight: 600;
    color: var(--text-primary, #333);
    cursor: pointer;
    transition: background-color 0.2s;
}

.tickets-table th:hover {
    background-color: var(--accent-color-lighter, #e9ecef);
}

.tickets-table tr:hover {
    background-color: var(--hover-color, #f8f9fa);
    cursor: pointer;
}

/* Status and Priority Badge Styles */
.status-badge,
.priority-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.status-open {
    background-color: #e3f2fd;
    color: #0d47a1;
}

.status-in-progress {
    background-color: #fff8e1;
    color: #ff8f00;
}

.status-resolved {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.status-closed {
    background-color: #eeeeee;
    color: #616161;
}

.priority-low {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.priority-medium {
    background-color: #fff8e1;
    color: #ff8f00;
}

.priority-high {
    background-color: #fff8e1;
    color: #e65100;
}

.priority-urgent {
    background-color: #ffebee;
    color: #c62828;
}

/* Ticket Modal Styles */
.ticket-modal-content {
    max-width: 800px;
    width: 90%;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-height: 85vh;
    overflow-y: auto;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.ticket-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #eee);
}

.ticket-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}



#myLeadsContent .advanced-filter-dropdown.show {
    display: block !important;
}

#myLeadsContent .filter-section-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
}

#myLeadsContent .filter-sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

#myLeadsContent .filter-section-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

#myLeadsContent .filter-section-item input[type="checkbox"] {
    margin: 0;
}

#myLeadsContent .filter-section-item label {
    margin: 0;
    font-size: 14px;
}

/* Profile Picture Upload Form Styles */
#profilePictureUploadForm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

#profilePictureUploadForm .popup-content {
    background-color: var(--bg-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 25px;
    width: 90%;
    max-width: 450px;
    position: relative;
}

#profilePictureUploadForm h2 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

#profilePictureUploadForm h2 i {
    color: var(--secondary-color);
}

#profilePictureUploadForm .form-group {
    margin-bottom: 20px;
}

#profilePictureUploadForm .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color);
}

#profilePictureUploadForm input[type="file"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--input-bg);
    cursor: pointer;
}

#profilePictureUploadForm .preview-container {
    background-color: var(--secondary-bg);
    border-radius: var(--border-radius-sm);
    padding: 15px;
    text-align: center;
}

#profilePictureUploadForm .preview-container img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#profilePictureUploadForm .form-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

#profilePictureUploadForm .form-buttons button {
    padding: 10px 16px;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s ease;
}

#profilePictureUploadForm .btn-primary {
    background-color: var(--secondary-color);
    color: white;
    border: none;
}

#profilePictureUploadForm .btn-primary:hover {
    background-color: var(--accent-color);
}

#profilePictureUploadForm .btn-secondary {
    background-color: var(--secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

#profilePictureUploadForm .btn-secondary:hover {
    background-color: var(--hover-bg);
}

@media (max-width: 576px) {
    #profilePictureUploadForm .popup-content {
        width: 95%;
        padding: 20px;
    }
    
    #profilePictureUploadForm .form-buttons {
        flex-direction: column;
    }
}

/* Create Ticket Form Styling */
.create-form {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
}

.create-form.active {
    display: flex;
}

.create-form form {
    background-color: var(--bg-color, #fff);
    max-width: 600px;
    width: 90%;
    padding: 25px;
    border-radius: var(--border-radius-md, 8px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    position: relative;
}

.create-form .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.create-form .form-header h3 {
    margin: 0;
    color: var(--primary-color, #0066cc);
    font-size: 1.5rem;
}

.create-form .form-header .close {
    cursor: pointer;
    font-size: 24px;
    color: #999;
    transition: color 0.2s ease;
}

.create-form .form-header .close:hover {
    color: #333;
}

.create-form .form-group {
    margin-bottom: 20px;
}

.create-form .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color, #333);
}

.create-form .form-group input,
.create-form .form-group select,
.create-form .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: var(--border-radius-sm, 4px);
    font-size: 1rem;
}

.create-form .form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.create-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 25px;
}

.create-form .form-actions button {
    padding: 10px 20px;
    border-radius: var(--border-radius-sm, 4px);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.create-form .form-actions .primary-button {
    background-color: var(--primary-color, #0066cc);
    color: white;
    border: none;
}

.create-form .form-actions .primary-button:hover {
    background-color: var(--primary-dark, #0052a3);
}

.create-form .form-actions .secondary-button {
    background-color: var(--light-color, #f0f0f0);
    color: var(--text-color, #333);
    border: 1px solid var(--border-color, #ddd);
}

.create-form .form-actions .secondary-button:hover {
    background-color: var(--border-color, #ddd);
}

/* Add styles for deactivated agents */
.agent-card.inactive {
  opacity: 0.7;
  position: relative;
  border: 1px solid #e74c3c;
}

.agent-card.inactive::before {
  content: "DEACTIVATED";
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #e74c3c;
  color: white;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: bold;
  z-index: 2;
}

/* Master user badge styling */
.master-user-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

.master-user-badge i {
  margin-right: 6px;
  font-size: 1rem;
}

/* Original master gets golden crown, new masters get orange crown */
.master-user-badge i.fa-crown[style*="color: #f39c12"] {
  filter: drop-shadow(0 0 2px rgba(243, 156, 18, 0.5));
}

/* Add styles for the new agent action buttons */
.agent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.agent-actions button {
  min-width: auto;
  padding: 5px 8px;
  font-size: 0.8rem;
}

.btn-warning {
  background-color: #f39c12;
  color: white;
}

.btn-warning:hover {
  background-color: #e67e22;
}

.btn-secondary {
  background-color: #7f8c8d;
  color: white;
}

.btn-secondary:hover {
  background-color: #95a5a6;
}

/* Custom Confirmation Dialog */
.custom-confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease-out;
}

.confirm-dialog-content {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 450px;
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}

.confirm-dialog-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.confirm-dialog-header i {
    color: #ffc107;
    font-size: 20px;
    margin-right: 10px;
}

.confirm-dialog-header h3 {
    flex: 1;
    margin: 0;
    font-size: 18px;
    color: #495057;
}

.confirm-dialog-header .close-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: #6c757d;
    cursor: pointer;
}

.confirm-dialog-body {
    padding: 20px;
    color: #212529;
}

.confirm-dialog-body p {
    margin: 10px 0;
    line-height: 1.5;
}

.confirm-dialog-body i {
    color: #17a2b8;
    margin-right: 5px;
}

.confirm-dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    gap: 10px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Add styles for the checkbox container */
.checkbox-container {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 1rem;
  user-select: none;
}

/* Hide the default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

/* On mouse-over, add a grey background */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Style the verification code section */
#verificationCodeSection {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* Add animated transition */
#verificationCodeSection {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

#verificationCodeSection.show {
  max-height: 200px;
}

.mini-lead-reschedule {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #3498db;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.mini-lead-reschedule:hover {
    opacity: 1;
    background-color: white;
    transform: rotate(90deg);
}

/* Lead List Upload Form Styles */
.lead-list-upload {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lead-list-upload .form-container {
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    padding: 25px;
    position: relative;
}

.lead-list-upload h2 {
    color: var(--accent-color);
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.lead-list-upload h2 i {
    margin-right: 10px;
    font-size: 1.2em;
}

.lead-list-upload .form-group {
    margin-bottom: 20px;
}

.lead-list-upload .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
}

.lead-list-upload .form-group input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.lead-list-upload .form-hint {
    font-size: 0.85em;
    color: #777;
    margin-top: 5px;
}

.lead-list-upload .form-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

.lead-list-upload .form-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.lead-list-upload .form-buttons button i {
    margin-right: 8px;
}

.lead-list-upload .form-buttons button[type="submit"] {
    background-color: var(--accent-color);
    color: white;
}

.lead-list-upload .form-buttons button[type="submit"]:hover {
    background-color: var(--accent-dark);
}

.lead-list-upload .form-buttons .cancel-button {
    background-color: #f0f0f0;
    color: #333;
}

.lead-list-upload .form-buttons .cancel-button:hover {
    background-color: #e0e0e0;
}

.lead-list-upload .upload-status {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.lead-list-upload .upload-status i {
    margin-right: 10px;
    font-size: 1.2em;
}

.lead-list-upload .upload-status.success {
    background-color: #e6f7e6;
    color: #2c662d;
    border: 1px solid #c3e6cb;
}

.lead-list-upload .upload-status.error {
    background-color: #fff0f0;
    color: #cc0000;
    border: 1px solid #ffcccc;
}

#uploadErrorContainer {
    background-color: #fff0f0;
    border: 1px solid #ffcccc;
    color: #cc0000;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}

#uploadErrorContainer h3 {
    margin-top: 0;
    font-size: 1.1em;
    display: flex;
    align-items: center;
}

#uploadErrorContainer h3 i {
    margin-right: 8px;
}

#duplicateEmailDetails {
    background-color: #f9f9f9;
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
}

#duplicateEmailDetails p {
    margin: 5px 0;
}

#duplicateLeadsContainer {
    margin: 15px 0;
    padding: 15px;
    border-radius: 6px;
    background-color: #fff9e6;
    border: 1px solid #e9c46a;
}

#duplicateLeadsContainer h3 {
    color: #92400e;
    margin-top: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

#duplicateLeadsContainer h3 i {
    margin-right: 8px;
    color: #e76f51;
}

#duplicateSummary {
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
}

#duplicatesList {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #fff;
}

#duplicatesList table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#duplicatesList th {
    text-align: left;
    padding: 8px 12px;
    background-color: #f9f9f9;
    border-bottom: 2px solid #e9c46a;
    position: sticky;
    top: 0;
    z-index: 1;
}

#duplicatesList td {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
}

#duplicatesList tr:hover {
    background-color: #f5f5f5;
}

#duplicatesList tr:last-child td {
    border-bottom: none;
}

#duplicatesList .monospace {
    font-family: monospace;
    background-color: #f8f8f8;
    padding: 2px 4px;
    border-radius: 3px;
}

/* Lead appointment info styling */
.lead-appointment-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.lead-appointment-datetime {
  background: rgba(52, 152, 219, 0.1);
  border: 1px solid rgba(52, 152, 219, 0.3);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 0.9rem;
  color: var(--accent-color);
  white-space: nowrap;
  flex-grow: 1; /* Allow date to take up available space */
}

.mini-lead-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  width: 100%; /* Full width to ensure proper alignment */
}

.mini-lead-datetime {
  font-size: 0.75rem;
  color: var(--accent-color);
  background: rgba(52, 152, 219, 0.1);
  border-radius: 3px;
  padding: 2px 6px;
  margin-right: 8px;
  flex-grow: 1; /* Allow date to take up available space */
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-lead-reschedule {
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: 3px;
  padding: 3px 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0; /* Prevent button from shrinking */
}

.mini-lead-reschedule:hover {
  background-color: var(--primary-color);
}

.calendar-day.has-appointments .mini-lead-card {
  position: relative;
  background-color: var(--light-color);
  border-radius: var(--border-radius-sm);
  padding: 8px;
  margin-bottom: 5px;
  font-size: 0.8rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.calendar-day.has-appointments .mini-lead-card:hover {
  background-color: var(--hover-color);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.mini-lead-time {
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 3px;
}

.mini-lead-name {
  margin-bottom: 5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Closed Won celebration styles */
.status-closed-won {
  background-color: rgba(38, 166, 154, 0.2);
  border-color: rgba(38, 166, 154, 0.4);
}

/* Lead card transition animations */
@keyframes leadCardTransition {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes closedWonHighlight {
  0% {
    box-shadow: 0 0 0 rgba(38, 166, 154, 0);
  }
  50% {
    box-shadow: 0 0 25px rgba(38, 166, 154, 0.8);
  }
  100% {
    box-shadow: 0 0 0 rgba(38, 166, 154, 0);
  }
}

/* Apply animations to leads newly added to the table */
#clientsTable .lead-card:nth-child(1),
#clientsTable .lead-card:nth-child(2),
#clientsTable .lead-card:nth-child(3) {
  animation: leadCardTransition 0.5s ease-out, closedWonHighlight 2s 0.5s;
}


/* Marketplace styles are now in css/marketplace.css */

/* Toggle Switch Styles for Dashboard */
.toggle-wrapper {
  position: relative;
  width: 50px;
  height: 24px;
  margin-right: 10px;
}

.toggle-wrapper input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

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

.toggle-wrapper label span {
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  transform: translateY(-50%);
  top: 50%;
}

.toggle-wrapper input:checked + label {
  background-color: var(--primary-color, #6f00ff);
}

.toggle-wrapper input:checked + label span {
  left: 29px;
}

.lead-appointment-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.9em;
}

.lead-appointment-datetime {
    display: flex;
    align-items: center;
    color: #28a745;
    font-weight: 500;
    margin-right: 10px;
    background-color: rgba(40, 167, 69, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.lead-closed-won-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    font-size: 0.9em;
    width: 100%;
}

.lead-closed-won-datetime {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3c763d;
    font-weight: 500;
    background-color: rgba(60, 118, 61, 0.1);
    padding: 6px 12px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
}

.lead-closed-won-datetime i {
    margin-right: 5px;
    color: #2d8838;
}

.mini-lead-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Lead card status changed info */
.lead-status-info {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: rgba(131, 171, 218, 0.2);
    border-radius: 4px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lead-status-datetime {
    color: #5a5a5a;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lead-status-datetime i {
    color: #5a7abf;
}

/* Status view styles */
.status-changed-info,
.status-changed-tag {
    margin-top: 6px;
    padding: 5px 8px;
    background-color: rgba(131, 171, 218, 0.2);
    border-radius: 4px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5a5a5a;
}

.status-changed-tag i {
    color: #5a7abf;
}

/* List view styles */
.lead-status-cell .status-changed-info {
    margin-top: 6px;
    font-size: 0.8rem;
}

/* Lead card status changed info */
.lead-status-info {
    margin: 10px auto;
    padding: 8px 12px;
    background-color: rgba(131, 171, 218, 0.2);
    border-radius: 4px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 350px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lead-status-datetime {
    color: #5a5a5a;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Discarded Lead Cards - Apply same styling as regular lead cards */
.discarded-lead-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 8px var(--shadow-color);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.5s ease-in-out;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.discarded-lead-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

.discarded-lead-card .lead-card-header {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discarded-lead-card .lead-card-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.discarded-lead-card .lead-status-badge {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
}

.discarded-lead-card .lead-status-badge.status-new {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
}

.discarded-lead-card .lead-status-badge.status-contacted {
  background-color: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
}

.discarded-lead-card .lead-status-badge.status-appointment-set {
  background-color: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.discarded-lead-card .lead-status-badge.status-appointment-denied {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.discarded-lead-card .lead-status-badge.status-presented-plan {
  background-color: rgba(243, 156, 18, 0.2);
  color: #f39c12;
}

.discarded-lead-card .lead-status-badge.status-closed-won {
  background-color: rgba(39, 174, 96, 0.2);
  color: #27ae60;
}

.discarded-lead-card .lead-status-badge.status-closed-lost {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.discarded-lead-card .lead-status-badge.status-on-hold {
  background-color: rgba(149, 165, 166, 0.2);
  color: #95a5a6;
}

.discarded-lead-card .lead-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--card-bg);
  flex-grow: 1;
}

.discarded-lead-card .lead-info-item {
  margin-bottom: var(--spacing-sm);
}

.discarded-lead-card .lead-info-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 2px;
  font-weight: 600;
}

.discarded-lead-card .lead-info-label i {
  margin-right: 4px;
  color: var(--secondary-color);
}

.discarded-lead-card .lead-info-value {
  font-weight: 500;
  color: var(--text-color);
  word-break: break-word;
  line-height: 1.4;
}

.discarded-lead-card .lead-card-footer {
  padding: var(--spacing-md);
  background-color: var(--light-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.discarded-lead-card .lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  width: 100%;
}

.discarded-lead-card .lead-actions button {
  flex: 1;
  min-width: 80px;
  justify-content: center;
  text-align: center;
}

.limbo-info {
    background-color: rgba(220, 53, 69, 0.05);
    border-radius: 4px;
    padding: 5px;
}

.limbo-lead-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Discarded leads list grid layout */
.discarded-leads-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

/* Lead count display */
.lead-count {
  grid-column: 1 / -1;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--light-color);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-md);
  font-weight: 500;
  color: var(--text-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* No discards message */
.no-discards-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--text-light);
  font-style: italic;
  background-color: var(--light-color);
  border-radius: var(--border-radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Dark Theme - Fix the text contrast for menu buttons */
body.theme-dark #dashboardMenu button {
  background-color: var(--secondary-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

body.theme-dark #dashboardMenu button:hover {
  background-color: var(--secondary-color);
  color: white;
}

body.theme-dark #dashboardMenu button.active {
  background-color: var(--secondary-color);
  color: white;
}

/* Fix filter search box in dark mode */
body.theme-dark .lead-filter-section {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

body.theme-dark .search-container .search-icon {
  color: var(--text-light);
}

body.theme-dark .filter-inputs button {
  background-color: var(--secondary-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

body.theme-dark .filter-inputs button:hover {
  background-color: var(--secondary-color);
  color: white;
}

/* Fix view mode box in dark mode */
body.theme-dark .view-toggle-controls {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px var(--shadow-color);
}

body.theme-dark .view-toggle-label {
  color: var(--text-color);
}

body.theme-dark .view-toggle-btn {
  background-color: var(--secondary-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

body.theme-dark .view-toggle-btn:hover {
  background-color: var(--hover-bg);
}

body.theme-dark .view-toggle-btn.active {
  background-color: var(--secondary-color);
  color: white;
  border-color: var(--secondary-color);
}

/* Fix advanced filter dropdown in dark mode */
body.theme-dark .advanced-filter-dropdown {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

body.theme-dark .filter-section-title {
  color: var(--text-color);
}

body.theme-dark .filter-section-item label {
  color: var(--text-color);
}

/* Fix status colors in dark mode to ensure better visibility */
body.theme-dark .status-select-wrapper.status-new { 
  background-color: var(--status-new-bg); 
}
body.theme-dark .status-select-wrapper.status-contacted { 
  background-color: var(--status-contacted-bg); 
}
body.theme-dark .status-select-wrapper.status-appointment-set { 
  background-color: var(--status-appointment-set-bg); 
}
body.theme-dark .status-select-wrapper.status-appointment-denied { 
  background-color: var(--status-appointment-denied-bg); 
}
body.theme-dark .status-select-wrapper.status-presented-plan { 
  background-color: var(--status-presented-plan-bg); 
}
body.theme-dark .status-select-wrapper.status-closed-won { 
  background-color: var(--status-closed-won-bg); 
}
body.theme-dark .status-select-wrapper.status-closed-lost { 
  background-color: var(--status-closed-lost-bg); 
}
body.theme-dark .status-select-wrapper.status-on-hold { 
  background-color: var(--status-on-hold-bg); 
}

/* Fix the clear search button in dark mode */
body.theme-dark .clear-search:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--danger-color);
}

/* Fix lead table text colors in dark mode for better visibility */
body.theme-dark .leads-table {
  background-color: var(--card-bg);
}

body.theme-dark .leads-table td {
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

body.theme-dark .leads-table tr:hover {
  background-color: var(--hover-bg);
}

/* Fix the leads table name links in dark mode */
body.theme-dark .leads-table .lead-name {
  color: var(--secondary-color);
}

body.theme-dark .leads-table .lead-name:hover {
  color: var(--accent-color);
}

/* Fix UI switches in dark mode */
body.theme-dark .ui-switches-container {
  border-top: 1px solid var(--border-color);
}

body.theme-dark .ui-switch-text {
  color: var(--text-color);
}

body.theme-dark .ui-switch-inner {
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
}

body.theme-dark .ui-switch-inner:after {
  background-color: var(--text-light);
}

body.theme-dark .ui-switch-checkbox:checked + .ui-switch-label .ui-switch-inner {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

body.theme-dark .ui-switch-checkbox:checked + .ui-switch-label .ui-switch-inner:after {
  background-color: white;
}

/* Fix toggle wrapper styles in dark mode */
body.theme-dark .toggle-wrapper label {
  background-color: var(--secondary-bg);
}

body.theme-dark .toggle-wrapper label span {
  background-color: var(--text-light);
}

body.theme-dark .toggle-wrapper input:checked + label {
  background-color: var(--secondary-color);
}

body.theme-dark .toggle-wrapper input:checked + label span {
  background-color: white;
}

/* Fix form elements in dark mode */
body.theme-dark select,
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark input[type="password"],
body.theme-dark input[type="number"],
body.theme-dark input[type="tel"],
body.theme-dark textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

body.theme-dark select:focus,
body.theme-dark input[type="text"]:focus,
body.theme-dark input[type="email"]:focus,
body.theme-dark input[type="password"]:focus,
body.theme-dark input[type="number"]:focus,
body.theme-dark input[type="tel"]:focus,
body.theme-dark textarea:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

/* Fix lead status select */
body.theme-dark .lead-status {
  background-color: var(--input-bg);
  color: var(--text-color);
}

/* Fix status badges in dark mode */
body.theme-dark .status-badge {
  color: white;
}

/* Fix lead cards in dark mode for better visibility */
body.theme-dark .lead-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

body.theme-dark .lead-card-header {
  border-bottom-color: var(--border-color);
}

body.theme-dark .lead-card-header h3 {
  color: var(--text-color);
}

body.theme-dark .lead-info-label {
  color: var(--text-light);
}

body.theme-dark .lead-info-value {
  color: var(--text-color);
}

/* Fix filter button active state for visibility */
body.theme-dark .advanced-filter-btn.active {
  background-color: var(--secondary-color);
  color: white;
}

/* Improve contrast for checkbox items in filters */
body.theme-dark .filter-section-item input[type="checkbox"]:checked::after {
  color: var(--secondary-color);
}

/* Fix news feed in dark mode */
body.theme-dark #newsContent {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

body.theme-dark #newsContent .news-item {
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
}

body.theme-dark #newsContent .news-item .news-title {
  color: var(--text-color);
}

body.theme-dark #newsContent .news-item .news-description {
  color: var(--text-light);
}

body.theme-dark #newsContent .news-item .news-source {
  color: var(--secondary-color);
}

body.theme-dark #newsContent .news-item .news-date {
  color: var(--text-light);
}

body.theme-dark .news-feed-container {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

body.theme-dark .news-feed-container h3 {
  color: var(--text-color);
}

body.theme-dark .loading {
  color: var(--text-light);
}

/* Fix welcome content in dark mode */
body.theme-dark #welcomeContent {
  color: var(--text-color);
}

body.theme-dark #welcomeContent h2 {
  color: var(--text-color);
}

body.theme-dark #welcomeContent p {
  color: var(--text-light);
}

body.theme-dark #newsContent .news-item a {
  color: var(--secondary-color);
  text-decoration: none;
}

body.theme-dark #newsContent .news-item a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

body.theme-dark #newsContent .news-item:hover {
  background-color: var(--hover-bg);
}

/* Fix spacing and borders for news items in dark mode */
body.theme-dark #newsContent .news-item {
  padding: 15px;
  margin-bottom: 10px;
  border-radius: var(--border-radius-sm);
  transition: background-color 0.2s;
}

/* Fix loading animation in dark mode */
body.theme-dark #newsContent .loading i {
  color: var(--secondary-color);
}

/* Enhance welcome box styling in dark mode */
body.theme-dark #welcomeContent {
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 10px var(--shadow-color);
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}

/* Fix lead card status colors in dark mode */
body.theme-dark .lead-card.status-new {
  border-left: 4px solid #3498db;
}

body.theme-dark .lead-card.status-contacted {
  border-left: 4px solid #9b59b6;
}

body.theme-dark .lead-card.status-qualified,
body.theme-dark .lead-card.status-appointment-set {
  border-left: 4px solid #2ecc71;
}

body.theme-dark .lead-card.status-proposal,
body.theme-dark .lead-card.status-presented-plan {
  border-left: 4px solid #f39c12;
}

body.theme-dark .lead-card.status-negotiation {
  border-left: 4px solid #e67e22;
}

body.theme-dark .lead-card.status-closed-won {
  border-left: 4px solid #27ae60;
}

body.theme-dark .lead-card.status-closed-lost,
body.theme-dark .lead-card.status-appointment-denied {
  border-left: 4px solid #e74c3c;
}

body.theme-dark .lead-card.status-on-hold {
  border-left: 4px solid #95a5a6;
}

/* Fix lead card header border colors in dark mode */
body.theme-dark .lead-card.status-new .lead-card-header {
  border-bottom-color: #3498db;
}

body.theme-dark .lead-card.status-contacted .lead-card-header {
  border-bottom-color: #9b59b6;
}

body.theme-dark .lead-card.status-qualified .lead-card-header,
body.theme-dark .lead-card.status-appointment-set .lead-card-header {
  border-bottom-color: #2ecc71;
}

body.theme-dark .lead-card.status-proposal .lead-card-header,
body.theme-dark .lead-card.status-presented-plan .lead-card-header {
  border-bottom-color: #f39c12;
}

body.theme-dark .lead-card.status-negotiation .lead-card-header {
  border-bottom-color: #e67e22;
}

body.theme-dark .lead-card.status-closed-won .lead-card-header {
  border-bottom-color: #27ae60;
}

body.theme-dark .lead-card.status-closed-lost .lead-card-header,
body.theme-dark .lead-card.status-appointment-denied .lead-card-header {
  border-bottom-color: #e74c3c;
}

body.theme-dark .lead-card.status-on-hold .lead-card-header {
  border-bottom-color: #95a5a6;
}

/* Fix status badges in dark mode */
body.theme-dark .status-badge.status-new {
  background-color: rgba(52, 152, 219, 0.3);
  color: #3498db;
}

body.theme-dark .status-badge.status-contacted {
  background-color: rgba(155, 89, 182, 0.3);
  color: #9b59b6;
}

body.theme-dark .status-badge.status-qualified,
body.theme-dark .status-badge.status-appointment-set {
  background-color: rgba(46, 204, 113, 0.3);
  color: #2ecc71;
}

body.theme-dark .status-badge.status-proposal,
body.theme-dark .status-badge.status-presented-plan {
  background-color: rgba(243, 156, 18, 0.3);
  color: #f39c12;
}

body.theme-dark .status-badge.status-negotiation {
  background-color: rgba(230, 126, 34, 0.3);
  color: #e67e22;
}

body.theme-dark .status-badge.status-closed-won {
  background-color: rgba(39, 174, 96, 0.3);
  color: #27ae60;
}

body.theme-dark .status-badge.status-closed-lost,
body.theme-dark .status-badge.status-appointment-denied {
  background-color: rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}

body.theme-dark .status-badge.status-on-hold {
  background-color: rgba(149, 165, 166, 0.3);
  color: #95a5a6;
}

/* Fix status select dropdowns in dark mode */
body.theme-dark .status-new select {
  border-left: 4px solid #3498db;
  background-color: var(--input-bg);
  color: var(--text-color);
}

body.theme-dark .status-contacted select {
  border-left: 4px solid #9b59b6;
  background-color: var(--input-bg);
  color: var(--text-color);
}

body.theme-dark .status-qualified select,
body.theme-dark .status-appointment-set select {
  border-left: 4px solid #2ecc71;
  background-color: var(--input-bg);
  color: var(--text-color);
}

body.theme-dark .status-proposal select,
body.theme-dark .status-presented-plan select {
  border-left: 4px solid #f39c12;
  background-color: var(--input-bg);
  color: var(--text-color);
}

body.theme-dark .status-negotiation select {
  border-left: 4px solid #e67e22;
  background-color: var(--input-bg);
  color: var(--text-color);
}

body.theme-dark .status-closed-won select {
  border-left: 4px solid #27ae60;
  background-color: var(--input-bg);
  color: var(--text-color);
}

body.theme-dark .status-closed-lost select,
body.theme-dark .status-appointment-denied select {
  border-left: 4px solid #e74c3c;
  background-color: var(--input-bg);
  color: var(--text-color);
}

body.theme-dark .status-on-hold select {
  border-left: 4px solid #95a5a6;
  background-color: var(--input-bg);
  color: var(--text-color);
}

/* Fix My Leads section styling in dark mode */
body.theme-dark #myLeadsContent {
  background-color: var(--bg-color);
  color: var(--text-color);
}

body.theme-dark #myLeadsContent h2 {
  color: var(--text-color);
}

/* Fix status view columns in dark mode */
body.theme-dark .status-column {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

body.theme-dark .status-column-header {
  background-color: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
}

body.theme-dark .status-column-header h3 {
  color: var(--text-color);
}

body.theme-dark .status-count {
  color: var(--text-light);
}

body.theme-dark .status-lead-card {
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
}

/* Fix welcome message container in dark mode */
body.theme-dark .welcome-message-container {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 4px var(--shadow-color);
  color: var(--text-color);
}

body.theme-dark .welcome-message-container h2 {
  color: var(--text-color);
}

body.theme-dark .welcome-message-container p {
  color: var(--text-light);
}

/* Fix welcome message container in the remaining themes */
body.theme-neon-highlights .welcome-message-container,
body.theme-warm-tones .welcome-message-container,
body.theme-muted-pastels .welcome-message-container {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 4px var(--shadow-color);
  color: var(--text-color);
}

body.theme-neon-highlights .welcome-message-container h2,
body.theme-warm-tones .welcome-message-container h2,
body.theme-muted-pastels .welcome-message-container h2 {
  color: var(--text-color);
}

body.theme-neon-highlights .welcome-message-container p,
body.theme-warm-tones .welcome-message-container p,
body.theme-muted-pastels .welcome-message-container p {
  color: var(--text-light);
}

/* Fix dashboard menu buttons */
body.theme-neon-highlights #dashboardMenu button,
body.theme-warm-tones #dashboardMenu button,
body.theme-muted-pastels #dashboardMenu button {
  background-color: var(--secondary-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

body.theme-neon-highlights #dashboardMenu button:hover,
body.theme-warm-tones #dashboardMenu button:hover,
body.theme-muted-pastels #dashboardMenu button:hover {
  background-color: var(--secondary-color);
  color: white;
}

body.theme-neon-highlights #dashboardMenu button.active,
body.theme-warm-tones #dashboardMenu button.active,
body.theme-muted-pastels #dashboardMenu button.active {
  background-color: var(--secondary-color);
  color: white;
}

/* Fix lead filter section */
body.theme-neon-highlights .lead-filter-section,
body.theme-warm-tones .lead-filter-section,
body.theme-muted-pastels .lead-filter-section {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

/* Fix filter inputs and buttons */
body.theme-neon-highlights .filter-inputs button,
body.theme-warm-tones .filter-inputs button,
body.theme-muted-pastels .filter-inputs button {
  background-color: var(--secondary-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

body.theme-neon-highlights .filter-inputs button:hover,
body.theme-warm-tones .filter-inputs button:hover,
body.theme-muted-pastels .filter-inputs button:hover {
  background-color: var(--secondary-color);
  color: white;
}

/* Fix view mode box */
body.theme-neon-highlights .view-toggle-controls,
body.theme-warm-tones .view-toggle-controls,
body.theme-muted-pastels .view-toggle-controls {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px var(--shadow-color);
}

body.theme-neon-highlights .view-toggle-label,
body.theme-warm-tones .view-toggle-label,
body.theme-muted-pastels .view-toggle-label {
  color: var(--text-color);
}

body.theme-neon-highlights .view-toggle-btn,
body.theme-warm-tones .view-toggle-btn,
body.theme-muted-pastels .view-toggle-btn {
  background-color: var(--secondary-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

/* Fix lead card status colors */
body.theme-neon-highlights .lead-card.status-new,
body.theme-warm-tones .lead-card.status-new,
body.theme-muted-pastels .lead-card.status-new {
  border-left: 4px solid #3498db;
}

body.theme-neon-highlights .lead-card.status-contacted,
body.theme-warm-tones .lead-card.status-contacted,
body.theme-muted-pastels .lead-card.status-contacted {
  border-left: 4px solid #9b59b6;
}

body.theme-neon-highlights .lead-card.status-qualified,
body.theme-neon-highlights .lead-card.status-appointment-set,
body.theme-warm-tones .lead-card.status-qualified,
body.theme-warm-tones .lead-card.status-appointment-set,
body.theme-muted-pastels .lead-card.status-qualified,
body.theme-muted-pastels .lead-card.status-appointment-set {
  border-left: 4px solid #2ecc71;
}

body.theme-neon-highlights .lead-card.status-closed-won,
body.theme-warm-tones .lead-card.status-closed-won,
body.theme-muted-pastels .lead-card.status-closed-won {
  border-left: 4px solid #27ae60;
}

body.theme-neon-highlights .lead-card.status-closed-lost,
body.theme-neon-highlights .lead-card.status-appointment-denied,
body.theme-warm-tones .lead-card.status-closed-lost,
body.theme-warm-tones .lead-card.status-appointment-denied,
body.theme-muted-pastels .lead-card.status-closed-lost,
body.theme-muted-pastels .lead-card.status-appointment-denied {
  border-left: 4px solid #e74c3c;
}

/* Fix news feed in remaining themes */
body.theme-neon-highlights #newsContent,
body.theme-warm-tones #newsContent,
body.theme-muted-pastels #newsContent {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

body.theme-neon-highlights #newsContent .news-item,
body.theme-warm-tones #newsContent .news-item,
body.theme-muted-pastels #newsContent .news-item {
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
}

body.theme-neon-highlights #newsContent .news-item .news-title,
body.theme-warm-tones #newsContent .news-item .news-title,
body.theme-muted-pastels #newsContent .news-item .news-title {
  color: var(--text-color);
}

body.theme-neon-highlights #newsContent .news-item a,
body.theme-warm-tones #newsContent .news-item a,
body.theme-muted-pastels #newsContent .news-item a {
  color: var(--secondary-color);
  text-decoration: none;
}

body.theme-neon-highlights #newsContent .news-item a:hover,
body.theme-warm-tones #newsContent .news-item a:hover,
body.theme-muted-pastels #newsContent .news-item a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

body.theme-neon-highlights .news-feed-container,
body.theme-warm-tones .news-feed-container,
body.theme-muted-pastels .news-feed-container {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

body.theme-neon-highlights .news-feed-container h3,
body.theme-warm-tones .news-feed-container h3,
body.theme-muted-pastels .news-feed-container h3 {
  color: var(--text-color);
}

/* News Button Styles */
#newsButton {
  position: absolute;
  left: 170px;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
  z-index: 100;
}

#newsButton:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Theme-specific news button styles */
body.theme-dark #newsButton {
  background-color: rgba(30, 30, 30, 0.2);
  color: #e0e0e0;
  border-color: rgba(200, 200, 200, 0.3);
}

body.theme-dark #newsButton:hover {
  background-color: rgba(40, 40, 40, 0.4);
  border-color: rgba(200, 200, 200, 0.5);
}

body.theme-neon-highlights #newsButton {
  background-color: rgba(0, 0, 0, 0.2);
  color: #00ffbb;
  border-color: #00ffbb;
  box-shadow: 0 0 5px rgba(0, 255, 187, 0.5);
}

body.theme-neon-highlights #newsButton:hover {
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px rgba(0, 255, 187, 0.7);
}

body.theme-warm-tones #newsButton {
  background-color: rgba(252, 235, 221, 0.15);
  color: #f8f0e5;
  border-color: rgba(245, 203, 167, 0.4);
}

body.theme-warm-tones #newsButton:hover {
  background-color: rgba(252, 235, 221, 0.25);
  border-color: rgba(245, 203, 167, 0.6);
}

body.theme-muted-pastels #newsButton {
  background-color: rgba(255, 255, 255, 0.15);
  color: #f8f6f7;
  border-color: rgba(203, 213, 225, 0.4);
}

body.theme-muted-pastels #newsButton:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(203, 213, 225, 0.6);
}

body.theme-minty-fresh #newsButton {
  background-color: rgba(74, 210, 149, 0.15);
  color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 0 0 5px rgba(74, 210, 149, 0.3);
}

body.theme-minty-fresh #newsButton:hover {
  background-color: rgba(74, 210, 149, 0.25);
  border-color: var(--primary-color);
  box-shadow: 0 0 8px rgba(74, 210, 149, 0.5);
}

body.theme-sunset-gradient #newsButton {
  background-color: rgba(255, 139, 113, 0.15);
  color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 0 0 5px rgba(255, 95, 109, 0.3);
  background-image: linear-gradient(45deg, rgba(255, 95, 109, 0.15), rgba(255, 195, 113, 0.15));
}

body.theme-sunset-gradient #newsButton:hover {
  background-color: rgba(255, 139, 113, 0.25);
  border-color: var(--primary-dark);
  box-shadow: 0 0 8px rgba(255, 95, 109, 0.5);
}

/* Theme-specific styles for lead details popup buttons */
body.theme-dark #leadDetailsPopup .lead-actions button {
    background-color: #34495e;
    color: #ecf0f1;
    border: 1px solid #455d7a;
    padding: 8px 16px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.3s ease;
}

body.theme-dark #leadDetailsPopup .lead-actions button:hover {
    background-color: #2c3e50;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

body.theme-neon-highlights #leadDetailsPopup .lead-actions button {
    background-color: #222;
    color: #00ff9d;
    border: 1px solid #333;
    box-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
}

body.theme-neon-highlights #leadDetailsPopup .lead-actions button:hover {
    background-color: #333;
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.7);
}

body.theme-warm-tones #leadDetailsPopup .lead-actions button {
    background-color: #ffefd5;
    color: #8b4513;
    border: 1px solid #d2b48c;
}

body.theme-warm-tones #leadDetailsPopup .lead-actions button:hover {
    background-color: #f5deb3;
}

body.theme-muted-pastels #leadDetailsPopup .lead-actions button {
    background-color: #f0f8ff;
    color: #708090;
    border: 1px solid #b0c4de;
}

body.theme-muted-pastels #leadDetailsPopup .lead-actions button:hover {
    background-color: #e6e6fa;
}

body.theme-minty-fresh #leadDetailsPopup .lead-actions button {
    background-color: #f5fffa;
    color: #2e8b57;
    border: 1px solid #98fb98;
}

body.theme-minty-fresh #leadDetailsPopup .lead-actions button:hover {
    background-color: #e0fff0;
}

body.theme-sunset-gradient #leadDetailsPopup .lead-actions button {
    background-color: #fff0f5;
    color: #ff6347;
    border: 1px solid #ffb6c1;
}

body.theme-sunset-gradient #leadDetailsPopup .lead-actions button:hover {
    background-color: #ffe4e1;
}

/* Fix for popup header colors in different themes */
body.theme-dark #leadDetailsPopup .popup-header {
    background-color: #34495e;
}

body.theme-neon-highlights #leadDetailsPopup .popup-header {
    background-color: #222;
    border-bottom: 2px solid #00ff9d;
}

body.theme-warm-tones #leadDetailsPopup .popup-header {
    background-color: #d2691e;
}

body.theme-muted-pastels #leadDetailsPopup .popup-header {
    background-color: #b0c4de;
}

body.theme-minty-fresh #leadDetailsPopup .popup-header {
    background-color: #3cb371;
}

body.theme-sunset-gradient #leadDetailsPopup .popup-header {
    background-color: #ff7f50;
}

/* Additional theme-specific styles for lead details popup content */
body.theme-dark #leadDetailsPopup .popup-content {
    background-color: #1a1a1a;
    border: 1px solid #333;
}

body.theme-dark #leadDetailsPopup .lead-detail,
body.theme-dark #leadDetailsPopup .lead-notes,
body.theme-dark #leadDetailsPopup .notes-container {
    background-color: #2c2c2c;
    border-color: #444;
}

body.theme-neon-highlights #leadDetailsPopup .popup-content {
    background-color: #121212;
    border: 1px solid #333;
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
}

body.theme-neon-highlights #leadDetailsPopup .lead-detail,
body.theme-neon-highlights #leadDetailsPopup .lead-notes,
body.theme-neon-highlights #leadDetailsPopup .notes-container {
    background-color: #1a1a1a;
    border-color: #00ff9d;
}

body.theme-warm-tones #leadDetailsPopup .popup-content {
    background-color: #fffaf0;
    border: 1px solid #d2b48c;
}

body.theme-warm-tones #leadDetailsPopup .lead-detail,
body.theme-warm-tones #leadDetailsPopup .lead-notes,
body.theme-warm-tones #leadDetailsPopup .notes-container {
    background-color: #fff8dc;
    border-color: #deb887;
}

body.theme-muted-pastels #leadDetailsPopup .popup-content {
    background-color: #f5f5f5;
    border: 1px solid #dcdcdc;
}

body.theme-muted-pastels #leadDetailsPopup .lead-detail,
body.theme-muted-pastels #leadDetailsPopup .lead-notes,
body.theme-muted-pastels #leadDetailsPopup .notes-container {
    background-color: #f0f0f0;
    border-color: #d3d3d3;
}

body.theme-minty-fresh #leadDetailsPopup .popup-content {
    background-color: #f0fff0;
    border: 1px solid #98fb98;
}

body.theme-minty-fresh #leadDetailsPopup .lead-detail,
body.theme-minty-fresh #leadDetailsPopup .lead-notes,
body.theme-minty-fresh #leadDetailsPopup .notes-container {
    background-color: #f5fffa;
    border-color: #90ee90;
}

body.theme-sunset-gradient #leadDetailsPopup .popup-content {
    background-color: #fff5ee;
    border: 1px solid #ffb6c1;
}

body.theme-sunset-gradient #leadDetailsPopup .lead-detail,
body.theme-sunset-gradient #leadDetailsPopup .lead-notes,
body.theme-sunset-gradient #leadDetailsPopup .notes-container {
    background-color: #fffafa;
    border-color: #ffc0cb;
}

/* Text color adjustments for dark themes */
body.theme-dark #leadDetailsPopup .lead-detail p,
body.theme-dark #leadDetailsPopup .lead-notes p,
body.theme-dark #leadDetailsPopup .note p,
body.theme-dark #leadDetailsPopup .form-group label {
    color: #ecf0f1;
}

body.theme-dark #leadDetailsPopup .note small,
body.theme-dark #leadDetailsPopup .lead-detail h3 i,
body.theme-dark #leadDetailsPopup .lead-notes h3 i {
    color: #bdc3c7;
}

body.theme-dark #leadDetailsPopup .lead-detail h3,
body.theme-dark #leadDetailsPopup .lead-notes h3,
body.theme-dark #leadDetailsPopup .add-note h4 {
    color: #3498db;
}

body.theme-neon-highlights #leadDetailsPopup .lead-detail p,
body.theme-neon-highlights #leadDetailsPopup .lead-notes p,
body.theme-neon-highlights #leadDetailsPopup .note p,
body.theme-neon-highlights #leadDetailsPopup .form-group label {
    color: #f0f0f0;
}

body.theme-neon-highlights #leadDetailsPopup .note small {
    color: #999;
}

body.theme-neon-highlights #leadDetailsPopup .lead-detail h3,
body.theme-neon-highlights #leadDetailsPopup .lead-notes h3,
body.theme-neon-highlights #leadDetailsPopup .add-note h4 {
    color: #00ff9d;
}

body.theme-neon-highlights #leadDetailsPopup .lead-detail h3 i,
body.theme-neon-highlights #leadDetailsPopup .lead-notes h3 i {
    color: #00ccff;
}

/* Input field styles for lead details in dark themes */
body.theme-dark #leadDetailsPopup .form-group input,
body.theme-dark #leadDetailsPopup .form-group select,
body.theme-dark #leadDetailsPopup #noteContent {
    background-color: #333;
    color: #ecf0f1;
    border-color: #444;
}

body.theme-neon-highlights #leadDetailsPopup .form-group input,
body.theme-neon-highlights #leadDetailsPopup .form-group select,
body.theme-neon-highlights #leadDetailsPopup #noteContent {
    background-color: #222;
    color: #f0f0f0;
    border-color: #333;
    border-left: 2px solid #00ff9d;
}

/* View mode buttons in dark theme */
body.theme-dark .view-toggle-btn {
    background-color: #2c3e50;
    color: #95a5a6;
    border: 1px solid #34495e;
    padding: 6px 14px;
    transition: all 0.3s ease;
}

body.theme-dark .view-toggle-btn:hover {
    background-color: #34495e;
    color: #ecf0f1;
}

body.theme-dark .view-toggle-btn.active {
    background-color: #3498db;
    color: #ecf0f1;
    border-color: #2980b9;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* Additional styles to ensure proper button display in dark theme */
body.theme-dark #leadDetailsPopup .close-btn {
    background-color: transparent;
    color: #ecf0f1;
    border: none;
    font-size: 18px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

body.theme-dark #leadDetailsPopup .close-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark button.btn-primary,
body.theme-dark button.btn-success,
body.theme-dark button.btn-info {
    background-color: #3498db;
    color: #ecf0f1;
    border: 1px solid #2980b9;
}

body.theme-dark button.btn-primary:hover,
body.theme-dark button.btn-success:hover,
body.theme-dark button.btn-info:hover {
    background-color: #2980b9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.theme-dark button.btn-danger,
body.theme-dark button.cancel-button {
    background-color: #e74c3c;
    color: #ecf0f1;
    border: 1px solid #c0392b;
}

body.theme-dark button.btn-danger:hover,
body.theme-dark button.cancel-button:hover {
    background-color: #c0392b;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Vendor Attribution Styling */
.vendor-attribution {
    background-color: rgba(255, 193, 7, 0.1);
    border-left: 3px solid #ffc107;
    padding-left: 8px;
    margin-top: 5px;
}

.vendor-badge {
    background-color: #ffc107;
    color: #212529;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vendor-attribution .lead-info-label {
    color: #856404;
    font-weight: 600;
}

/* Dark theme vendor styling */
body.theme-dark .vendor-attribution {
    background-color: rgba(255, 193, 7, 0.15);
    border-left-color: #ffc107;
}

body.theme-dark .vendor-badge {
    background-color: #ffc107;
    color: #000;
}

body.theme-dark .vendor-attribution .lead-info-label {
    color: #ffc107;
}

/* ========================================
   LEAD VENDOR HELP STYLES
   ======================================== */

/* Fix navigation bar positioning for lead vendor help */
.lead-vendor-help-container {
    display: block !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.lead-vendor-help-container .help-header {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--primary-color);
    color: white;
    border-radius: 8px;
}

.lead-vendor-help-container .help-content-wrapper {
    display: flex;
    gap: 25px;
    width: 100%;
}

.lead-vendor-help-container .help-sidebar {
    width: 250px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    height: fit-content;
    position: sticky;
    top: 20px;
}

.lead-vendor-help-container .help-main-content {
    flex: 1;
}

.lead-vendor-help-container .help-section {
    background: white;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.lead-vendor-help-container .help-section h2 {
    color: var(--primary-color);
    margin-top: 0;
}

.lead-vendor-help-container .help-section h3 {
    color: var(--secondary-color);
    margin-top: 30px;
}

/* Lead Vendor Help Content Styling */
#leadVendorHelpContent .help-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: var(--card-bg);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#leadVendorHelpContent .help-table th,
#leadVendorHelpContent .help-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

#leadVendorHelpContent .help-table th {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#leadVendorHelpContent .help-table td {
    font-size: 14px;
    color: var(--text-color);
}

#leadVendorHelpContent .help-table tbody tr:hover {
    background-color: var(--hover-bg);
}

#leadVendorHelpContent .required {
    background-color: #e74c3c;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

#leadVendorHelpContent .optional {
    background-color: #95a5a6;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

#leadVendorHelpContent .csv-sample {
    background-color: var(--code-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 15px;
    margin: 15px 0;
    overflow-x: auto;
}

#leadVendorHelpContent .csv-sample pre {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--text-color);
    white-space: pre-wrap;
    word-break: break-all;
}

#leadVendorHelpContent .step-by-step {
    margin: 25px 0;
}

#leadVendorHelpContent .step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 20px;
    background-color: var(--secondary-bg);
    border-radius: var(--border-radius-md);
    border-left: 4px solid var(--secondary-color);
}

#leadVendorHelpContent .step-number {
    background-color: var(--secondary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    margin-right: 15px;
    flex-shrink: 0;
}

#leadVendorHelpContent .step-content h4 {
    color: var(--primary-color);
    margin: 0 0 8px 0;
    font-size: 16px;
}

#leadVendorHelpContent .step-content p {
    margin: 0 0 10px 0;
    color: var(--text-color);
    line-height: 1.5;
}

#leadVendorHelpContent .step-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

#leadVendorHelpContent .step-content li {
    margin-bottom: 5px;
    color: var(--text-color);
}

#leadVendorHelpContent .tips-grid,
#leadVendorHelpContent .quality-standards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

#leadVendorHelpContent .tip-item,
#leadVendorHelpContent .standard-item {
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#leadVendorHelpContent .tip-item h4,
#leadVendorHelpContent .standard-item h4 {
    color: var(--secondary-color);
    margin: 0 0 12px 0;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#leadVendorHelpContent .tip-item p,
#leadVendorHelpContent .standard-item ul {
    color: var(--text-color);
    margin: 0;
    line-height: 1.5;
}

#leadVendorHelpContent .standard-item ul {
    padding-left: 16px;
}

#leadVendorHelpContent .standard-item li {
    margin-bottom: 6px;
}

#leadVendorHelpContent .important-note {
    background-color: rgba(255, 193, 7, 0.1);
    border: 1px solid #ffc107;
    border-radius: var(--border-radius-md);
    padding: 20px;
    margin: 25px 0;
}

#leadVendorHelpContent .important-note h4 {
    color: #856404;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#leadVendorHelpContent .csv-requirements {
    background-color: var(--secondary-bg);
    border-radius: var(--border-radius-md);
    padding: 20px;
    margin: 20px 0;
}

#leadVendorHelpContent .csv-requirements h4 {
    color: var(--primary-color);
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#leadVendorHelpContent .upload-tips,
#leadVendorHelpContent .performance-tips,
#leadVendorHelpContent .common-mistakes,
#leadVendorHelpContent .success-metrics {
    background-color: var(--card-bg);
    border-radius: var(--border-radius-md);
    padding: 20px;
    margin: 20px 0;
    border: 1px solid var(--border-color);
}

#leadVendorHelpContent .upload-tips h4,
#leadVendorHelpContent .performance-tips h4,
#leadVendorHelpContent .common-mistakes h4,
#leadVendorHelpContent .success-metrics h4 {
    color: var(--secondary-color);
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#leadVendorHelpContent .help-contact {
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--border-radius-md);
    padding: 25px;
    margin: 30px 0;
    text-align: center;
}

#leadVendorHelpContent .help-contact h4 {
    color: white;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#leadVendorHelpContent .help-contact p {
    margin: 0;
    line-height: 1.6;
    opacity: 0.9;
}

/* Dark Theme Support for Lead Vendor Help */
body.theme-dark #leadVendorHelpContent .important-note {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: #ffc107;
}

body.theme-dark #leadVendorHelpContent .important-note h4 {
    color: #ffc107;
}

body.theme-dark #leadVendorHelpContent .required {
    background-color: #e74c3c;
}

body.theme-dark #leadVendorHelpContent .optional {
    background-color: #7f8c8d;
}

body.theme-dark #leadVendorHelpContent .csv-sample {
    background-color: #2c3e50;
    border-color: #34495e;
}

body.theme-dark #leadVendorHelpContent .help-table th {
    background-color: var(--primary-color);
}

body.theme-dark #leadVendorHelpContent .step {
    background-color: #34495e;
    border-left-color: var(--secondary-color);
}

/* ========================================
   THEME SUPPORT FOR TICKETS PAGE
   ======================================== */

/* Dark Theme - Tickets */
body.theme-dark .tickets-container,
body.theme-dark .ticket-modal-content,
body.theme-dark .create-form {
    background-color: #1f2937;
    color: #e5e7eb;
    border-color: #374151;
}

body.theme-dark .tickets-table {
    background-color: #1f2937;
    color: #e5e7eb;
}

body.theme-dark .tickets-table th {
    background-color: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

body.theme-dark .tickets-table td {
    background-color: #1f2937;
    color: #e5e7eb;
    border-color: #374151;
}

body.theme-dark .tickets-table tr:hover {
    background-color: #374151;
}

body.theme-dark .ticket-modal-content .modal-header {
    background-color: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

body.theme-dark .create-form .form-header {
    background-color: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

body.theme-dark .create-form input,
body.theme-dark .create-form textarea,
body.theme-dark .create-form select {
    background-color: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

body.theme-dark .create-form input:focus,
body.theme-dark .create-form textarea:focus,
body.theme-dark .create-form select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Neon Highlights Theme - Tickets */
body.theme-neon-highlights .tickets-container,
body.theme-neon-highlights .ticket-modal-content,
body.theme-neon-highlights .create-form {
    background-color: #0f0f23;
    color: #e0e0e0;
    border: 1px solid #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

body.theme-neon-highlights .tickets-table {
    background-color: #0f0f23;
    color: #e0e0e0;
    border: 1px solid #00ffff;
}

body.theme-neon-highlights .tickets-table th {
    background-color: #1a1a3a;
    color: #00ffff;
    border-color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
}

body.theme-neon-highlights .tickets-table td {
    background-color: #0f0f23;
    color: #e0e0e0;
    border-color: #00ffff;
}

body.theme-neon-highlights .tickets-table tr:hover {
    background-color: #1a1a3a;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

body.theme-neon-highlights .status-badge {
    border: 1px solid #00ffff;
    text-shadow: 0 0 3px #00ffff;
}

/* Warm Tones Theme - Tickets */
body.theme-warm-tones .tickets-container,
body.theme-warm-tones .ticket-modal-content,
body.theme-warm-tones .create-form {
    background-color: #2d1810;
    color: #f4e4d6;
    border-color: #8b4513;
}

body.theme-warm-tones .tickets-table {
    background-color: #2d1810;
    color: #f4e4d6;
}

body.theme-warm-tones .tickets-table th {
    background-color: #3d2318;
    color: #deb887;
    border-color: #8b4513;
}

body.theme-warm-tones .tickets-table td {
    background-color: #2d1810;
    color: #f4e4d6;
    border-color: #8b4513;
}

body.theme-warm-tones .tickets-table tr:hover {
    background-color: #3d2318;
}

/* Muted Pastels Theme - Tickets */
body.theme-muted-pastels .tickets-container,
body.theme-muted-pastels .ticket-modal-content,
body.theme-muted-pastels .create-form {
    background-color: #f7f3f0;
    color: #5a5a5a;
    border-color: #d4c4b0;
}

body.theme-muted-pastels .tickets-table {
    background-color: #f7f3f0;
    color: #5a5a5a;
}

body.theme-muted-pastels .tickets-table th {
    background-color: #e8ddd4;
    color: #4a4a4a;
    border-color: #d4c4b0;
}

body.theme-muted-pastels .tickets-table td {
    background-color: #f7f3f0;
    color: #5a5a5a;
    border-color: #d4c4b0;
}

body.theme-muted-pastels .tickets-table tr:hover {
    background-color: #f0e6d6;
}

/* Minty Fresh Theme - Tickets */
body.theme-minty-fresh .tickets-container,
body.theme-minty-fresh .ticket-modal-content,
body.theme-minty-fresh .create-form {
    background-color: #f0fdf4;
    color: #14532d;
    border-color: #86efac;
}

body.theme-minty-fresh .tickets-table {
    background-color: #f0fdf4;
    color: #14532d;
}

body.theme-minty-fresh .tickets-table th {
    background-color: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

body.theme-minty-fresh .tickets-table td {
    background-color: #f0fdf4;
    color: #14532d;
    border-color: #86efac;
}

body.theme-minty-fresh .tickets-table tr:hover {
    background-color: #e6ffed;
}

/* Sunset Gradient Theme - Tickets */
body.theme-sunset-gradient .tickets-container,
body.theme-sunset-gradient .ticket-modal-content,
body.theme-sunset-gradient .create-form {
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
    color: #2d1810;
    border-color: #ff6b35;
}

body.theme-sunset-gradient .tickets-table {
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
    color: #2d1810;
}

body.theme-sunset-gradient .tickets-table th {
    background-color: rgba(255, 107, 53, 0.3);
    color: #1a0f08;
    border-color: #ff6b35;
}

body.theme-sunset-gradient .tickets-table td {
    background-color: rgba(254, 180, 123, 0.2);
    color: #2d1810;
    border-color: #ff6b35;
}

body.theme-sunset-gradient .tickets-table tr:hover {
    background-color: rgba(255, 107, 53, 0.2);
}

/* ========================================
   PROFESSIONAL TEMPLATE BUTTONS STYLING
   ======================================== */

/* Main template buttons container */
#templateButtons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
    padding: 20px 0;
}

/* Individual template button styling */
#templateButtons button {
    position: relative;
    width: 100%;
    height: 220px;
    padding: 0;
    border: 2px solid var(--border-color, #e1e5e9);
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: var(--text-color, #2c3e50);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* Template preview image area */
#templateButtons button::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    height: 140px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    opacity: 0.1;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Template name and icon styling */
#templateButtons button {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 164px 16px 16px 16px;
    line-height: 1.4;
}

/* Add template icons based on type */
#templateButtons button[onclick*="'default'"]::after {
    content: '🏠';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    z-index: 3;
}

#templateButtons button[onclick*="'fireeye_style'"]::after {
    content: '🔥';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    z-index: 3;
}

#templateButtons button[onclick*="'luxury_elite_style'"]::after,
#templateButtons button[onclick*="'luxury_style'"]::after {
    content: '💎';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    z-index: 3;
}

#templateButtons button[onclick*="'minimalist_style'"]::after {
    content: '✨';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    z-index: 3;
}

#templateButtons button[onclick*="'netsuite_style'"]::after {
    content: '🌐';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    z-index: 3;
}

#templateButtons button[onclick*="'paused_style'"]::after {
    content: '⏸️';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    z-index: 3;
}

#templateButtons button[onclick*="'saas_style'"]::after {
    content: '☁️';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    z-index: 3;
}

#templateButtons button[onclick*="'trulia_style'"]::after {
    content: '🏘️';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    z-index: 3;
}

/* Hover effects */
#templateButtons button:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color, #3498db);
    background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%);
}

#templateButtons button:hover::before {
    opacity: 0.2;
}

/* Active/Selected state */
#templateButtons button.selected {
    border-color: var(--accent-color, #3498db);
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f0fe 100%);
    box-shadow: 0 4px 20px rgba(52, 152, 219, 0.2);
}

/* Focus state for accessibility */
#templateButtons button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

/* Professional template selector header */
#websiteContent h2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--text-color, #2c3e50);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#websiteContent h2::before {
    content: '🎨';
    font-size: 32px;
}

/* Responsive design */
@media (max-width: 768px) {
    #templateButtons {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
        padding: 16px 0;
    }
    
    #templateButtons button {
        height: 180px;
        padding: 130px 12px 12px 12px;
    }
    
    #templateButtons button::before {
        height: 110px;
        top: 10px;
        left: 10px;
        right: 10px;
    }
    
    #templateButtons button::after {
        top: 55px;
        font-size: 20px;
    }
    
    #websiteContent h2 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    #templateButtons {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    #templateButtons button {
        height: 160px;
        padding: 110px 10px 10px 10px;
    }
    
    #templateButtons button::before {
        height: 90px;
    }
    
    #templateButtons button::after {
        top: 45px;
        font-size: 18px;
    }
}

/* ========================================
   THEME SUPPORT FOR WEBSITE PAGE
   ======================================== */

/* Dark Theme - Website */
body.theme-dark #websiteContent {
    background-color: #1f2937;
    color: #e5e7eb;
}

body.theme-dark #websiteContent h2,
body.theme-dark #websiteContent h3,
body.theme-dark #websiteContent h4 {
    color: #f9fafb;
}

body.theme-dark #templateButtons button {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    color: #e5e7eb;
    border-color: #4b5563;
}

body.theme-dark #templateButtons button:hover {
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
    color: #f9fafb;
    border-color: #60a5fa;
}

body.theme-dark #templateButtons button::before {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    opacity: 0.3;
}

body.theme-dark .history-card {
    background-color: #374151;
    border-color: #4b5563;
}

body.theme-dark .history-card h4 {
    background-color: #4b5563;
    color: #f9fafb;
}

body.theme-dark .history-card-content {
    background-color: #1f2937;
    color: #e5e7eb;
}

body.theme-dark .history-card-content li {
    border-color: #4b5563;
}

body.theme-dark .history-card-content li:hover {
    background-color: #374151;
}

body.theme-dark .template-badge {
    background-color: #4b5563;
    color: #e5e7eb;
}

body.theme-dark .template-date,
body.theme-dark .metric {
    color: #9ca3af;
}

/* Neon Highlights Theme - Website */
body.theme-neon-highlights #websiteContent {
    background-color: #0f0f23;
    color: #e0e0e0;
}

body.theme-neon-highlights #websiteContent h2,
body.theme-neon-highlights #websiteContent h3,
body.theme-neon-highlights #websiteContent h4 {
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
}

body.theme-neon-highlights #templateButtons button {
    background: linear-gradient(135deg, #1a1a3a 0%, #2a2a4a 100%);
    color: #00ffff;
    border: 2px solid #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

body.theme-neon-highlights #templateButtons button:hover {
    background: linear-gradient(135deg, #2a2a4a 0%, #3a3a5a 100%);
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.4), 0 0 20px rgba(0, 255, 255, 0.2);
    border-color: #00ffff;
}

body.theme-neon-highlights #templateButtons button::before {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a3a 100%);
    opacity: 0.4;
}

body.theme-neon-highlights .history-card {
    background-color: #1a1a3a;
    border: 1px solid #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

body.theme-neon-highlights .history-card h4 {
    background-color: #2a2a4a;
    color: #00ffff;
    text-shadow: 0 0 3px #00ffff;
}

body.theme-neon-highlights .history-card-content {
    background-color: #0f0f23;
    color: #e0e0e0;
}

body.theme-neon-highlights .history-card-content li:hover {
    background-color: #1a1a3a;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.1);
}

/* Warm Tones Theme - Website */
body.theme-warm-tones #websiteContent {
    background-color: #2d1810;
    color: #f4e4d6;
}

body.theme-warm-tones #websiteContent h2,
body.theme-warm-tones #websiteContent h3,
body.theme-warm-tones #websiteContent h4 {
    color: #deb887;
}

body.theme-warm-tones #templateButtons button {
    background: linear-gradient(135deg, #3d2318 0%, #4d2d20 100%);
    color: #deb887;
    border-color: #8b4513;
}

body.theme-warm-tones #templateButtons button:hover {
    background: linear-gradient(135deg, #4d2d20 0%, #5d3528 100%);
    color: #f4e4d6;
    border-color: #cd853f;
}

body.theme-warm-tones #templateButtons button::before {
    background: linear-gradient(135deg, #2d1810 0%, #3d2318 100%);
    opacity: 0.3;
}

body.theme-warm-tones .history-card {
    background-color: #3d2318;
    border-color: #8b4513;
}

body.theme-warm-tones .history-card h4 {
    background-color: #4d2d20;
    color: #deb887;
}

body.theme-warm-tones .history-card-content {
    background-color: #2d1810;
    color: #f4e4d6;
}

/* Muted Pastels Theme - Website */
body.theme-muted-pastels #websiteContent {
    background-color: #f7f3f0;
    color: #5a5a5a;
}

body.theme-muted-pastels #websiteContent h2,
body.theme-muted-pastels #websiteContent h3,
body.theme-muted-pastels #websiteContent h4 {
    color: #4a4a4a;
}

body.theme-muted-pastels #templateButtons button {
    background: linear-gradient(135deg, #e8ddd4 0%, #f0e6d6 100%);
    color: #4a4a4a;
    border-color: #d4c4b0;
}

body.theme-muted-pastels #templateButtons button:hover {
    background: linear-gradient(135deg, #ddd2c7 0%, #e8ddd4 100%);
    color: #3a3a3a;
    border-color: #c9b99e;
}

body.theme-muted-pastels #templateButtons button::before {
    background: linear-gradient(135deg, #f7f3f0 0%, #e8ddd4 100%);
    opacity: 0.2;
}

body.theme-muted-pastels .history-card {
    background-color: #f0e6d6;
    border-color: #d4c4b0;
}

body.theme-muted-pastels .history-card h4 {
    background-color: #e8ddd4;
    color: #4a4a4a;
}

/* Minty Fresh Theme - Website */
body.theme-minty-fresh #websiteContent {
    background-color: #f0fdf4;
    color: #14532d;
}

body.theme-minty-fresh #websiteContent h2,
body.theme-minty-fresh #websiteContent h3,
body.theme-minty-fresh #websiteContent h4 {
    color: #166534;
}

body.theme-minty-fresh #templateButtons button {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    color: #166534;
    border-color: #86efac;
}

body.theme-minty-fresh #templateButtons button:hover {
    background: linear-gradient(135deg, #bbf7d0 0%, #dcfce7 100%);
    color: #14532d;
    border-color: #16a34a;
}

body.theme-minty-fresh #templateButtons button::before {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    opacity: 0.2;
}

body.theme-minty-fresh .history-card {
    background-color: #e6ffed;
    border-color: #86efac;
}

body.theme-minty-fresh .history-card h4 {
    background-color: #dcfce7;
    color: #166534;
}

/* Sunset Gradient Theme - Website */
body.theme-sunset-gradient #websiteContent {
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
    color: #2d1810;
}

body.theme-sunset-gradient #websiteContent h2,
body.theme-sunset-gradient #websiteContent h3,
body.theme-sunset-gradient #websiteContent h4 {
    color: #1a0f08;
}

body.theme-sunset-gradient #templateButtons button {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3) 0%, rgba(254, 180, 123, 0.3) 100%);
    color: #1a0f08;
    border-color: #ff6b35;
}

body.theme-sunset-gradient #templateButtons button:hover {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.5) 0%, rgba(254, 180, 123, 0.5) 100%);
    color: #0f0804;
    border-color: #e85a2b;
}

body.theme-sunset-gradient #templateButtons button::before {
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
    opacity: 0.2;
}

/* ========================================
   AGENT LEAD CONTROLS STYLING
   ======================================== */

/* Agent controls container */
.agent-lead-controls {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.agent-controls-header h3 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-controls-header p {
    margin: 0 0 15px 0;
    color: #6c757d;
    font-size: 0.9em;
    line-height: 1.4;
}

.agent-controls-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.agent-add-lead-btn,
.agent-upload-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    min-width: 160px;
    justify-content: center;
}

.agent-add-lead-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.agent-add-lead-btn:hover {
    background: linear-gradient(135deg, #218838 0%, #1a9975 100%);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    transform: translateY(-1px);
}

.agent-upload-btn {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.agent-upload-btn:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    transform: translateY(-1px);
}

/* Agent popup styling */
#agentAddLeadPopup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#agentAddLeadPopup.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

#agentAddLeadPopup .popup-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

#agentAddLeadPopup.show .popup-content {
    transform: scale(1);
}

.agent-popup-subtitle {
    color: #6c757d;
    font-size: 0.9em;
    margin: -10px 0 20px 0;
    font-style: italic;
}

/* Agent form status messages */
.agent-form-status {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    animation: slideInFromTop 0.3s ease-out;
}

.agent-form-status.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.agent-form-status.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.agent-form-status i {
    margin-right: 8px;
    font-size: 16px;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Agent upload form styling */
.agent-lead-list-upload {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.agent-lead-list-upload .upload-form-container {
    background: white;
    border-radius: 12px;
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    padding: 30px;
}

.agent-upload-subtitle {
    color: #6c757d;
    font-size: 0.9em;
    margin: 5px 0 0 0;
    font-style: italic;
}

/* Enhanced agent upload form styling */
.agent-lead-list-upload .upload-header {
    padding: 0 0 25px 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 25px;
    position: relative;
}

.agent-lead-list-upload .upload-header h2 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 1.4em;
}

.agent-lead-list-upload .close-button {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    font-size: 1.5em;
    color: #6c757d;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.agent-lead-list-upload .close-button:hover {
    background: #f8f9fa;
    color: #dc3545;
}

.agent-lead-list-upload .upload-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 25px;
}

.agent-lead-list-upload .file-input-container {
    padding: 20px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
}

.agent-lead-list-upload .file-input-container:hover {
    border-color: #007bff;
    background: #f8f9ff;
}

.agent-lead-list-upload .file-input-label {
    display: block;
    cursor: pointer;
    padding: 20px;
}

.agent-lead-list-upload .file-input-label i {
    font-size: 2em;
    color: #007bff;
    margin-bottom: 10px;
    display: block;
}

.agent-lead-list-upload .file-input-label span {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    color: #495057;
}

.agent-lead-list-upload .file-input-label small {
    color: #6c757d;
    font-size: 0.85em;
}

.agent-lead-list-upload .upload-info {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.agent-lead-list-upload .upload-info h3 {
    margin: 0 0 15px 0;
    color: #495057;
    font-size: 1.1em;
}

.agent-lead-list-upload .upload-info ul {
    margin: 0;
    padding-left: 20px;
}

.agent-lead-list-upload .upload-info li {
    margin-bottom: 8px;
    color: #6c757d;
    line-height: 1.4;
}

.agent-lead-list-upload .form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding-top: 25px;
    border-top: 1px solid #e9ecef;
}

.agent-lead-list-upload .upload-button,
.agent-lead-list-upload .cancel-button {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
}

.agent-lead-list-upload .upload-button {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.agent-lead-list-upload .upload-button:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.agent-lead-list-upload .cancel-button {
    background: #6c757d;
    color: white;
}

.agent-lead-list-upload .cancel-button:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

/* Responsive design for agent upload form */
@media (max-width: 768px) {
    .agent-lead-list-upload .upload-form-container {
        width: 95%;
        max-width: none;
        padding: 20px;
        margin: 10px;
    }
    
    .agent-lead-list-upload .upload-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .agent-lead-list-upload .form-buttons {
        flex-direction: column;
    }
    
    .agent-lead-list-upload .upload-button,
    .agent-lead-list-upload .cancel-button {
        width: 100%;
    }
}

/* Responsive design for agent controls */
@media (max-width: 768px) {
    .agent-controls-buttons {
        flex-direction: column;
    }
    
    .agent-add-lead-btn,
    .agent-upload-btn {
        width: 100%;
        min-width: auto;
    }
    
    .agent-lead-controls {
        padding: 15px;
        margin: 15px 0;
    }
}

/* Theme support for agent controls */
body.theme-dark .agent-lead-controls {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    border-color: #6b7280;
}

body.theme-dark .agent-controls-header h3 {
    color: #f9fafb;
}

body.theme-dark .agent-controls-header p {
    color: #d1d5db;
}

body.theme-neon-highlights .agent-lead-controls {
    background: linear-gradient(135deg, #1a1a3a 0%, #2a2a4a 100%);
    border: 1px solid #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

body.theme-neon-highlights .agent-controls-header h3 {
    color: #00ffff;
}

body.theme-neon-highlights .agent-controls-header p {
    color: #b0e0e6;
}

body.theme-warm-tones .agent-lead-controls {
    background: linear-gradient(135deg, #3d2318 0%, #4d2d20 100%);
    border-color: #8b4513;
}

body.theme-warm-tones .agent-controls-header h3 {
    color: #deb887;
}

body.theme-warm-tones .agent-controls-header p {
    color: #cd853f;
}

body.theme-sunset-gradient .history-card {
    background-color: rgba(254, 180, 123, 0.3);
    border-color: #ff6b35;
}

body.theme-sunset-gradient .history-card h4 {
    background-color: rgba(255, 107, 53, 0.4);
    color: #1a0f08;
}

/* ========================================
   THEME SUPPORT FOR LOGS PAGE
   ======================================== */

/* Dark Theme - Logs */
body.theme-dark .logs-dashboard,
body.theme-dark .logs-filter-control-panel,
body.theme-dark .logs-chart-card,
body.theme-dark .summary-card {
    background-color: #1f2937;
    color: #e5e7eb;
    border-color: #374151;
}

body.theme-dark .logs-table {
    background-color: #1f2937;
    color: #e5e7eb;
}

body.theme-dark .logs-table th {
    background-color: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

body.theme-dark .logs-table td {
    background-color: #1f2937;
    color: #e5e7eb;
    border-color: #374151;
}

body.theme-dark .logs-table tbody tr:hover {
    background-color: #374151;
}

body.theme-dark .log-card {
    background-color: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

body.theme-dark .log-card:hover {
    background-color: #4b5563;
}

body.theme-dark .logs-main-search input {
    background-color: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

body.theme-dark .logs-main-search input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

body.theme-dark .search-tips {
    background-color: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

body.theme-dark .search-tips-header {
    color: #f9fafb;
}

body.theme-dark .tip-item {
    background-color: #4b5563;
    color: #e5e7eb;
}

body.theme-dark .filter-checkbox {
    background-color: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

body.theme-dark .filter-checkbox:hover {
    background-color: #4b5563;
}

body.theme-dark .pagination-button {
    background-color: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

body.theme-dark .pagination-button:hover:not(:disabled) {
    background-color: #4b5563;
    color: #f9fafb;
}

body.theme-dark .page-info {
    color: #9ca3af;
}

/* Neon Highlights Theme - Logs */
body.theme-neon-highlights .logs-dashboard,
body.theme-neon-highlights .logs-filter-control-panel,
body.theme-neon-highlights .logs-chart-card,
body.theme-neon-highlights .summary-card {
    background-color: #0f0f23;
    color: #e0e0e0;
    border: 1px solid #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

body.theme-neon-highlights .logs-table {
    background-color: #0f0f23;
    color: #e0e0e0;
    border: 1px solid #00ffff;
}

body.theme-neon-highlights .logs-table th {
    background-color: #1a1a3a;
    color: #00ffff;
    border-color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
}

body.theme-neon-highlights .logs-table td {
    background-color: #0f0f23;
    color: #e0e0e0;
    border-color: #00ffff;
}

body.theme-neon-highlights .logs-table tbody tr:hover {
    background-color: #1a1a3a;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

body.theme-neon-highlights .log-card {
    background-color: #1a1a3a;
    color: #e0e0e0;
    border: 1px solid #00ffff;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

body.theme-neon-highlights .log-card:hover {
    background-color: #2a2a4a;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

body.theme-neon-highlights .search-tips {
    background-color: #1a1a3a;
    color: #e0e0e0;
    border: 1px solid #00ffff;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
}

body.theme-neon-highlights .search-tips-header {
    color: #00ffff;
    text-shadow: 0 0 3px #00ffff;
}

body.theme-neon-highlights .tip-item {
    background-color: #2a2a4a;
    color: #e0e0e0;
    border: 1px solid rgba(0, 255, 255, 0.3);
}

/* Warm Tones Theme - Logs */
body.theme-warm-tones .logs-dashboard,
body.theme-warm-tones .logs-filter-control-panel,
body.theme-warm-tones .logs-chart-card,
body.theme-warm-tones .summary-card {
    background-color: #2d1810;
    color: #f4e4d6;
    border-color: #8b4513;
}

body.theme-warm-tones .logs-table {
    background-color: #2d1810;
    color: #f4e4d6;
}

body.theme-warm-tones .logs-table th {
    background-color: #3d2318;
    color: #deb887;
    border-color: #8b4513;
}

body.theme-warm-tones .logs-table td {
    background-color: #2d1810;
    color: #f4e4d6;
    border-color: #8b4513;
}

body.theme-warm-tones .logs-table tbody tr:hover {
    background-color: #3d2318;
}

body.theme-warm-tones .log-card {
    background-color: #3d2318;
    color: #f4e4d6;
    border-color: #8b4513;
}

body.theme-warm-tones .log-card:hover {
    background-color: #4d2d20;
}

body.theme-warm-tones .search-tips {
    background-color: #3d2318;
    color: #f4e4d6;
    border-color: #8b4513;
}

body.theme-warm-tones .search-tips-header {
    color: #deb887;
}

/* Muted Pastels Theme - Logs */
body.theme-muted-pastels .logs-dashboard,
body.theme-muted-pastels .logs-filter-control-panel,
body.theme-muted-pastels .logs-chart-card,
body.theme-muted-pastels .summary-card {
    background-color: #f7f3f0;
    color: #5a5a5a;
    border-color: #d4c4b0;
}

body.theme-muted-pastels .logs-table {
    background-color: #f7f3f0;
    color: #5a5a5a;
}

body.theme-muted-pastels .logs-table th {
    background-color: #e8ddd4;
    color: #4a4a4a;
    border-color: #d4c4b0;
}

body.theme-muted-pastels .logs-table td {
    background-color: #f7f3f0;
    color: #5a5a5a;
    border-color: #d4c4b0;
}

body.theme-muted-pastels .logs-table tbody tr:hover {
    background-color: #f0e6d6;
}

body.theme-muted-pastels .log-card {
    background-color: #f0e6d6;
    color: #5a5a5a;
    border-color: #d4c4b0;
}

body.theme-muted-pastels .log-card:hover {
    background-color: #e8ddd4;
}

/* Minty Fresh Theme - Logs */
body.theme-minty-fresh .logs-dashboard,
body.theme-minty-fresh .logs-filter-control-panel,
body.theme-minty-fresh .logs-chart-card,
body.theme-minty-fresh .summary-card {
    background-color: #f0fdf4;
    color: #14532d;
    border-color: #86efac;
}

/* ========================================
   SYSTEM TESTER INTEGRATION
   ======================================== */

/* System Test Button Integration with Content Header */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.content-header h2 {
    margin: 0;
    flex: 1;
}

.content-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Show system test button for master users (controlled by JavaScript) */
#systemTestButton {
    /* Button visibility is controlled by JavaScript for master users */
    align-items: center;
    gap: 8px;
}

/* Theme Support for System Test Button */
body.theme-dark .system-test-button {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

body.theme-dark .system-test-button:hover {
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

body.theme-neon-highlights .system-test-button {
    background: linear-gradient(135deg, #00ffff 0%, #ff00ff 100%);
    color: #0f0f23;
    text-shadow: 0 0 5px #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

body.theme-neon-highlights .system-test-button:hover {
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
}

body.theme-warm-tones .system-test-button {
    background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
}

body.theme-warm-tones .system-test-button:hover {
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.4);
}

body.theme-muted-pastels .system-test-button {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    box-shadow: 0 4px 15px rgba(156, 163, 175, 0.3);
}

body.theme-muted-pastels .system-test-button:hover {
    box-shadow: 0 6px 20px rgba(156, 163, 175, 0.4);
}

body.theme-minty-fresh .system-test-button {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
}

body.theme-minty-fresh .system-test-button:hover {
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
}

body.theme-minty-fresh .logs-table {
    background-color: #f0fdf4;
    color: #14532d;
}

body.theme-minty-fresh .logs-table th {
    background-color: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

body.theme-minty-fresh .logs-table td {
    background-color: #f0fdf4;
    color: #14532d;
    border-color: #86efac;
}

body.theme-minty-fresh .logs-table tbody tr:hover {
    background-color: #e6ffed;
}

body.theme-minty-fresh .log-card {
    background-color: #e6ffed;
    color: #14532d;
    border-color: #86efac;
}

body.theme-minty-fresh .log-card:hover {
    background-color: #dcfce7;
}

/* Sunset Gradient Theme - Logs */
body.theme-sunset-gradient .logs-dashboard,
body.theme-sunset-gradient .logs-filter-control-panel,
body.theme-sunset-gradient .logs-chart-card,
body.theme-sunset-gradient .summary-card {
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
    color: #2d1810;
    border-color: #ff6b35;
}

body.theme-sunset-gradient .logs-table {
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
    color: #2d1810;
}

body.theme-sunset-gradient .logs-table th {
    background-color: rgba(255, 107, 53, 0.3);
    color: #1a0f08;
    border-color: #ff6b35;
}

body.theme-sunset-gradient .logs-table td {
    background-color: rgba(254, 180, 123, 0.2);
    color: #2d1810;
    border-color: #ff6b35;
}

body.theme-sunset-gradient .logs-table tbody tr:hover {
    background-color: rgba(255, 107, 53, 0.2);
}

body.theme-sunset-gradient .log-card {
    background-color: rgba(254, 180, 123, 0.3);
    color: #2d1810;
    border-color: #ff6b35;
}

body.theme-sunset-gradient .log-card:hover {
    background-color: rgba(255, 107, 53, 0.3);
}

/* Theme-specific Ticket Status Badge Styles */

/* Dark Theme */
body.theme-dark .status-badge.status-open {
    background-color: #1e3a5f;
    color: #64b5f6;
    border: 1px solid #2196f3;
}

body.theme-dark .status-badge.status-in-progress {
    background-color: #3d2914;
    color: #ffb74d;
    border: 1px solid #ff9800;
}

body.theme-dark .status-badge.status-resolved {
    background-color: #1b5e20;
    color: #81c784;
    border: 1px solid #4caf50;
}

body.theme-dark .status-badge.status-closed {
    background-color: #424242;
    color: #bdbdbd;
    border: 1px solid #757575;
}

body.theme-dark .priority-badge.priority-low {
    background-color: #1b5e20;
    color: #81c784;
    border: 1px solid #4caf50;
}

body.theme-dark .priority-badge.priority-medium {
    background-color: #3d2914;
    color: #ffb74d;
    border: 1px solid #ff9800;
}

body.theme-dark .priority-badge.priority-high {
    background-color: #4a2c2a;
    color: #ffab91;
    border: 1px solid #ff5722;
}

body.theme-dark .priority-badge.priority-urgent {
    background-color: #4a1a1a;
    color: #ef5350;
    border: 1px solid #f44336;
}

/* Neon Highlights Theme */
body.theme-neon-highlights .status-badge.status-open {
    background-color: #001122;
    color: #00ffff;
    border: 1px solid #00cccc;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

body.theme-neon-highlights .status-badge.status-in-progress {
    background-color: #221100;
    color: #ffff00;
    border: 1px solid #cccc00;
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.3);
}

body.theme-neon-highlights .status-badge.status-resolved {
    background-color: #002211;
    color: #00ff00;
    border: 1px solid #00cc00;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

body.theme-neon-highlights .status-badge.status-closed {
    background-color: #222222;
    color: #cccccc;
    border: 1px solid #666666;
}

body.theme-neon-highlights .priority-badge.priority-low {
    background-color: #002211;
    color: #00ff00;
    border: 1px solid #00cc00;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

body.theme-neon-highlights .priority-badge.priority-medium {
    background-color: #221100;
    color: #ffff00;
    border: 1px solid #cccc00;
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.3);
}

body.theme-neon-highlights .priority-badge.priority-high {
    background-color: #221100;
    color: #ff8800;
    border: 1px solid #cc6600;
    box-shadow: 0 0 5px rgba(255, 136, 0, 0.3);
}

body.theme-neon-highlights .priority-badge.priority-urgent {
    background-color: #220011;
    color: #ff0066;
    border: 1px solid #cc0044;
    box-shadow: 0 0 5px rgba(255, 0, 102, 0.3);
}

/* Warm Tones Theme */
body.theme-warm-tones .status-badge.status-open {
    background-color: #2d3e50;
    color: #74b9ff;
    border: 1px solid #0984e3;
}

body.theme-warm-tones .status-badge.status-in-progress {
    background-color: #8b4513;
    color: #ffa500;
    border: 1px solid #e67e22;
}

body.theme-warm-tones .status-badge.status-resolved {
    background-color: #2d5016;
    color: #00b894;
    border: 1px solid #00a085;
}

body.theme-warm-tones .status-badge.status-closed {
    background-color: #636e72;
    color: #ddd;
    border: 1px solid #2d3436;
}

body.theme-warm-tones .priority-badge.priority-low {
    background-color: #2d5016;
    color: #00b894;
    border: 1px solid #00a085;
}

body.theme-warm-tones .priority-badge.priority-medium {
    background-color: #8b4513;
    color: #ffa500;
    border: 1px solid #e67e22;
}

body.theme-warm-tones .priority-badge.priority-high {
    background-color: #a0522d;
    color: #ff6b35;
    border: 1px solid #e55039;
}

body.theme-warm-tones .priority-badge.priority-urgent {
    background-color: #8b0000;
    color: #ff4757;
    border: 1px solid #c0392b;
}

/* Muted Pastels Theme */
body.theme-muted-pastels .status-badge.status-open {
    background-color: #e8f4f8;
    color: #2980b9;
    border: 1px solid #3498db;
}

body.theme-muted-pastels .status-badge.status-in-progress {
    background-color: #fef9e7;
    color: #d68910;
    border: 1px solid #f39c12;
}

body.theme-muted-pastels .status-badge.status-resolved {
    background-color: #eafaf1;
    color: #27ae60;
    border: 1px solid #2ecc71;
}

body.theme-muted-pastels .status-badge.status-closed {
    background-color: #f4f4f4;
    color: #7f8c8d;
    border: 1px solid #95a5a6;
}

body.theme-muted-pastels .priority-badge.priority-low {
    background-color: #eafaf1;
    color: #27ae60;
    border: 1px solid #2ecc71;
}

body.theme-muted-pastels .priority-badge.priority-medium {
    background-color: #fef9e7;
    color: #d68910;
    border: 1px solid #f39c12;
}

body.theme-muted-pastels .priority-badge.priority-high {
    background-color: #fdf2e9;
    color: #ca6f1e;
    border: 1px solid #e67e22;
}

body.theme-muted-pastels .priority-badge.priority-urgent {
    background-color: #fadbd8;
    color: #cb4335;
    border: 1px solid #e74c3c;
}

/* Minty Fresh Theme */
body.theme-minty-fresh .status-badge.status-open {
    background-color: #e8f8f5;
    color: #138d75;
    border: 1px solid #16a085;
}

body.theme-minty-fresh .status-badge.status-in-progress {
    background-color: #fef9e7;
    color: #b7950b;
    border: 1px solid #d4ac0d;
}

body.theme-minty-fresh .status-badge.status-resolved {
    background-color: #e8f6f3;
    color: #0e6655;
    border: 1px solid #17a2b8;
}

body.theme-minty-fresh .status-badge.status-closed {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #adb5bd;
}

body.theme-minty-fresh .priority-badge.priority-low {
    background-color: #e8f6f3;
    color: #0e6655;
    border: 1px solid #17a2b8;
}

body.theme-minty-fresh .priority-badge.priority-medium {
    background-color: #fef9e7;
    color: #b7950b;
    border: 1px solid #d4ac0d;
}

body.theme-minty-fresh .priority-badge.priority-high {
    background-color: #fdf2e9;
    color: #a04000;
    border: 1px solid #dc7633;
}

body.theme-minty-fresh .priority-badge.priority-urgent {
    background-color: #fadbd8;
    color: #922b21;
    border: 1px solid #c0392b;
}

/* Sunset Gradient Theme */
body.theme-sunset-gradient .status-badge.status-open {
    background-color: #fef9e7;
    color: #d68910;
    border: 1px solid #f39c12;
}

body.theme-sunset-gradient .status-badge.status-in-progress {
    background-color: #fdf2e9;
    color: #ca6f1e;
    border: 1px solid #e67e22;
}

body.theme-sunset-gradient .status-badge.status-resolved {
    background-color: #eafaf1;
    color: #27ae60;
    border: 1px solid #2ecc71;
}

body.theme-sunset-gradient .status-badge.status-closed {
    background-color: #f4f4f4;
    color: #7f8c8d;
    border: 1px solid #95a5a6;
}

body.theme-sunset-gradient .priority-badge.priority-low {
    background-color: #eafaf1;
    color: #27ae60;
    border: 1px solid #2ecc71;
}

body.theme-sunset-gradient .priority-badge.priority-medium {
    background-color: #fef9e7;
    color: #d68910;
    border: 1px solid #f39c12;
}

body.theme-sunset-gradient .priority-badge.priority-high {
    background-color: #fdf2e9;
    color: #ca6f1e;
    border: 1px solid #e67e22;
}

body.theme-sunset-gradient .priority-badge.priority-urgent {
    background-color: #fadbd8;
    color: #cb4335;
    border: 1px solid #e74c3c;
}

/* Ticket Details Modal Theme Styles */
body.theme-dark .ticket-details-header {
    border-bottom-color: #444;
}

body.theme-dark .ticket-meta {
    background-color: #2a2a2a;
    border: 1px solid #444;
}

body.theme-dark .ticket-meta .meta-item {
    color: #ccc;
}

body.theme-dark .ticket-meta .meta-label {
    color: #888;
}

body.theme-neon-highlights .ticket-details-header {
    border-bottom-color: #00ffff;
    box-shadow: 0 1px 0 rgba(0, 255, 255, 0.3);
}

body.theme-neon-highlights .ticket-meta {
    background-color: #001122;
    border: 1px solid #00cccc;
}

body.theme-neon-highlights .ticket-meta .meta-item {
    color: #00ffff;
}

body.theme-neon-highlights .ticket-meta .meta-label {
    color: #00aaaa;
}

body.theme-warm-tones .ticket-details-header {
    border-bottom-color: #8b4513;
}

body.theme-warm-tones .ticket-meta {
    background-color: #2d1810;
    border: 1px solid #8b4513;
}

body.theme-warm-tones .ticket-meta .meta-item {
    color: #ffa500;
}

body.theme-warm-tones .ticket-meta .meta-label {
    color: #cd853f;
}

body.theme-muted-pastels .ticket-details-header {
    border-bottom-color: #bdc3c7;
}

body.theme-muted-pastels .ticket-meta {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

body.theme-muted-pastels .ticket-meta .meta-item {
    color: #495057;
}

body.theme-muted-pastels .ticket-meta .meta-label {
    color: #6c757d;
}

body.theme-minty-fresh .ticket-details-header {
    border-bottom-color: #16a085;
}

body.theme-minty-fresh .ticket-meta {
    background-color: #e8f6f3;
    border: 1px solid #a3e4d7;
}

body.theme-minty-fresh .ticket-meta .meta-item {
    color: #0e6655;
}

body.theme-minty-fresh .ticket-meta .meta-label {
    color: #138d75;
}

body.theme-sunset-gradient .ticket-details-header {
    border-bottom-color: #e67e22;
}

body.theme-sunset-gradient .ticket-meta {
    background-color: #fdf2e9;
    border: 1px solid #f8c471;
}

body.theme-sunset-gradient .ticket-meta .meta-item {
    color: #ca6f1e;
}

body.theme-sunset-gradient .ticket-meta .meta-label {
    color: #d68910;
}

/* Ticket Details Message and Response Theme Styles */

/* Base styles for ticket details layout */
.ticket-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
}

.ticket-details-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.ticket-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.ticket-meta-item {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.ticket-meta-item .meta-label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #666;
}

.ticket-creator {
    display: flex;
    flex-direction: column;
}

.creator-info {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.creator-info span {
    margin-left: 10px;
    font-weight: 500;
    color: #333;
}

/* Base styles for ticket message and responses */
.ticket-message {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
}

.ticket-message h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
    color: #444;
}

.message-content {
    white-space: pre-wrap;
    line-height: 1.5;
    color: #333;
}

.ticket-responses-section {
    margin-bottom: 30px;
}

.ticket-responses-section h3 {
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: #444;
}

.ticket-responses {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ticket-response {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #e9ecef;
}

.response-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.response-user {
    display: flex;
    align-items: center;
}

.response-by {
    font-weight: bold;
    margin-left: 10px;
    color: #333;
}

.response-date {
    color: #777;
    font-size: 0.9rem;
}

.response-message {
    margin-top: 10px;
    white-space: pre-wrap;
    line-height: 1.5;
    color: #333;
}

.ticket-reply-section {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.ticket-reply-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
    color: #444;
}

.ticket-reply-section textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
    font-family: inherit;
    resize: vertical;
    background-color: #fff;
    color: #333;
}

.ticket-reply-section button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.ticket-reply-section button:hover {
    background-color: #0069d9;
}

.ticket-reply-section button i {
    margin-right: 8px;
}

.no-data {
    padding: 30px;
    text-align: center;
    color: #777;
    font-style: italic;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Dark Theme */
body.theme-dark .ticket-details-header {
    border-bottom-color: #444;
}

body.theme-dark .ticket-details-header h2 {
    color: #e0e0e0;
}

body.theme-dark .ticket-meta-item .meta-label {
    color: #aaa;
}

body.theme-dark .creator-info span {
    color: #e0e0e0;
}

body.theme-dark .ticket-message {
    background-color: #2a2a2a;
    border-color: #444;
}

body.theme-dark .ticket-message h3 {
    color: #e0e0e0;
}

body.theme-dark .message-content {
    color: #ccc;
}

body.theme-dark .ticket-responses-section h3 {
    color: #e0e0e0;
}

body.theme-dark .ticket-response {
    background-color: #333;
    border-color: #444;
}

body.theme-dark .response-by {
    color: #e0e0e0;
}

body.theme-dark .response-date {
    color: #aaa;
}

body.theme-dark .response-message {
    color: #ccc;
}

body.theme-dark .ticket-reply-section {
    background-color: #2a2a2a;
    border-color: #444;
}

body.theme-dark .ticket-reply-section h3 {
    color: #e0e0e0;
}

body.theme-dark .ticket-reply-section textarea {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
}

body.theme-dark .ticket-reply-section textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

body.theme-dark .no-data {
    background-color: #333;
    border-color: #444;
    color: #aaa;
}

/* Neon Highlights Theme */
body.theme-neon-highlights .ticket-details-header {
    border-bottom-color: #00ffff;
    box-shadow: 0 1px 0 rgba(0, 255, 255, 0.3);
}

body.theme-neon-highlights .ticket-details-header h2 {
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
}

body.theme-neon-highlights .ticket-meta-item .meta-label {
    color: #00aaaa;
}

body.theme-neon-highlights .creator-info span {
    color: #00ffff;
}

body.theme-neon-highlights .ticket-message {
    background-color: #1a1a3a;
    border-color: #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

body.theme-neon-highlights .ticket-message h3 {
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
}

body.theme-neon-highlights .message-content {
    color: #e0e0e0;
}

body.theme-neon-highlights .ticket-responses-section h3 {
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
}

body.theme-neon-highlights .ticket-response {
    background-color: #2a2a4a;
    border-color: #00cccc;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
}

body.theme-neon-highlights .response-by {
    color: #00ffff;
}

body.theme-neon-highlights .response-date {
    color: #00aaaa;
}

body.theme-neon-highlights .response-message {
    color: #e0e0e0;
}

body.theme-neon-highlights .ticket-reply-section {
    background-color: #1a1a3a;
    border-color: #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

body.theme-neon-highlights .ticket-reply-section h3 {
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
}

body.theme-neon-highlights .ticket-reply-section textarea {
    background-color: #2a2a4a;
    border-color: #00cccc;
    color: #e0e0e0;
}

body.theme-neon-highlights .ticket-reply-section textarea:focus {
    border-color: #00ffff;
    box-shadow: 0 0 0 0.2rem rgba(0, 255, 255, 0.25);
}

body.theme-neon-highlights .ticket-reply-section button {
    background-color: #00aaaa;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

body.theme-neon-highlights .ticket-reply-section button:hover {
    background-color: #00ffff;
    color: #000;
}

body.theme-neon-highlights .no-data {
    background-color: #2a2a4a;
    border-color: #00cccc;
    color: #00aaaa;
}

/* Warm Tones Theme */
body.theme-warm-tones .ticket-details-header {
    border-bottom-color: #8b4513;
}

body.theme-warm-tones .ticket-details-header h2 {
    color: #deb887;
}

body.theme-warm-tones .ticket-meta-item .meta-label {
    color: #cd853f;
}

body.theme-warm-tones .creator-info span {
    color: #deb887;
}

body.theme-warm-tones .ticket-message {
    background-color: #2d1810;
    border-color: #8b4513;
}

body.theme-warm-tones .ticket-message h3 {
    color: #deb887;
}

body.theme-warm-tones .message-content {
    color: #f4e4d6;
}

body.theme-warm-tones .ticket-responses-section h3 {
    color: #deb887;
}

body.theme-warm-tones .ticket-response {
    background-color: #3d2318;
    border-color: #8b4513;
}

body.theme-warm-tones .response-by {
    color: #deb887;
}

body.theme-warm-tones .response-date {
    color: #cd853f;
}

body.theme-warm-tones .response-message {
    color: #f4e4d6;
}

body.theme-warm-tones .ticket-reply-section {
    background-color: #2d1810;
    border-color: #8b4513;
}

body.theme-warm-tones .ticket-reply-section h3 {
    color: #deb887;
}

body.theme-warm-tones .ticket-reply-section textarea {
    background-color: #3d2318;
    border-color: #8b4513;
    color: #f4e4d6;
}

body.theme-warm-tones .ticket-reply-section textarea:focus {
    border-color: #ffa500;
    box-shadow: 0 0 0 0.2rem rgba(255, 165, 0, 0.25);
}

body.theme-warm-tones .ticket-reply-section button {
    background-color: #8b4513;
}

body.theme-warm-tones .ticket-reply-section button:hover {
    background-color: #a0522d;
}

body.theme-warm-tones .no-data {
    background-color: #3d2318;
    border-color: #8b4513;
    color: #cd853f;
}

/* Muted Pastels Theme */
body.theme-muted-pastels .ticket-details-header {
    border-bottom-color: #bdc3c7;
}

body.theme-muted-pastels .ticket-details-header h2 {
    color: #5a5a5a;
}

body.theme-muted-pastels .ticket-meta-item .meta-label {
    color: #6c757d;
}

body.theme-muted-pastels .creator-info span {
    color: #5a5a5a;
}

body.theme-muted-pastels .ticket-message {
    background-color: #f7f3f0;
    border-color: #d4c4b0;
}

body.theme-muted-pastels .ticket-message h3 {
    color: #5a5a5a;
}

body.theme-muted-pastels .message-content {
    color: #4a4a4a;
}

body.theme-muted-pastels .ticket-responses-section h3 {
    color: #5a5a5a;
}

body.theme-muted-pastels .ticket-response {
    background-color: #f0e6d6;
    border-color: #d4c4b0;
}

body.theme-muted-pastels .response-by {
    color: #5a5a5a;
}

body.theme-muted-pastels .response-date {
    color: #8a8a8a;
}

body.theme-muted-pastels .response-message {
    color: #4a4a4a;
}

body.theme-muted-pastels .ticket-reply-section {
    background-color: #f7f3f0;
    border-color: #d4c4b0;
}

body.theme-muted-pastels .ticket-reply-section h3 {
    color: #5a5a5a;
}

body.theme-muted-pastels .ticket-reply-section textarea {
    background-color: #fff;
    border-color: #d4c4b0;
    color: #4a4a4a;
}

body.theme-muted-pastels .ticket-reply-section textarea:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

body.theme-muted-pastels .no-data {
    background-color: #f0e6d6;
    border-color: #d4c4b0;
    color: #8a8a8a;
}

/* Minty Fresh Theme */
body.theme-minty-fresh .ticket-details-header {
    border-bottom-color: #16a085;
}

body.theme-minty-fresh .ticket-details-header h2 {
    color: #166534;
}

body.theme-minty-fresh .ticket-meta-item .meta-label {
    color: #138d75;
}

body.theme-minty-fresh .creator-info span {
    color: #166534;
}

body.theme-minty-fresh .ticket-message {
    background-color: #e8f6f3;
    border-color: #86efac;
}

body.theme-minty-fresh .ticket-message h3 {
    color: #166534;
}

body.theme-minty-fresh .message-content {
    color: #14532d;
}

body.theme-minty-fresh .ticket-responses-section h3 {
    color: #166534;
}

body.theme-minty-fresh .ticket-response {
    background-color: #dcfce7;
    border-color: #86efac;
}

body.theme-minty-fresh .response-by {
    color: #166534;
}

body.theme-minty-fresh .response-date {
    color: #16a085;
}

body.theme-minty-fresh .response-message {
    color: #14532d;
}

body.theme-minty-fresh .ticket-reply-section {
    background-color: #e8f6f3;
    border-color: #86efac;
}

body.theme-minty-fresh .ticket-reply-section h3 {
    color: #166534;
}

body.theme-minty-fresh .ticket-reply-section textarea {
    background-color: #f0fdf4;
    border-color: #86efac;
    color: #14532d;
}

body.theme-minty-fresh .ticket-reply-section textarea:focus {
    border-color: #16a085;
    box-shadow: 0 0 0 0.2rem rgba(22, 160, 133, 0.25);
}

body.theme-minty-fresh .ticket-reply-section button {
    background-color: #16a085;
}

body.theme-minty-fresh .ticket-reply-section button:hover {
    background-color: #138d75;
}

body.theme-minty-fresh .no-data {
    background-color: #dcfce7;
    border-color: #86efac;
    color: #16a085;
}

/* Sunset Gradient Theme */
body.theme-sunset-gradient .ticket-details-header {
    border-bottom-color: #e67e22;
}

body.theme-sunset-gradient .ticket-details-header h2 {
    color: #ca6f1e;
}

body.theme-sunset-gradient .ticket-meta-item .meta-label {
    color: #d68910;
}

body.theme-sunset-gradient .creator-info span {
    color: #ca6f1e;
}

body.theme-sunset-gradient .ticket-message {
    background: linear-gradient(135deg, #fef9e7 0%, #fdf2e9 100%);
    border-color: #f8c471;
}

body.theme-sunset-gradient .ticket-message h3 {
    color: #ca6f1e;
}

body.theme-sunset-gradient .message-content {
    color: #2d1810;
}

body.theme-sunset-gradient .ticket-responses-section h3 {
    color: #ca6f1e;
}

body.theme-sunset-gradient .ticket-response {
    background: linear-gradient(135deg, #fff8e1 0%, #fef9e7 100%);
    border-color: #f8c471;
}

body.theme-sunset-gradient .response-by {
    color: #ca6f1e;
}

body.theme-sunset-gradient .response-date {
    color: #d68910;
}

body.theme-sunset-gradient .response-message {
    color: #2d1810;
}

body.theme-sunset-gradient .ticket-reply-section {
    background: linear-gradient(135deg, #fef9e7 0%, #fdf2e9 100%);
    border-color: #f8c471;
}

body.theme-sunset-gradient .ticket-reply-section h3 {
    color: #ca6f1e;
}

body.theme-sunset-gradient .ticket-reply-section textarea {
    background-color: #fff;
    border-color: #f8c471;
    color: #2d1810;
}

body.theme-sunset-gradient .ticket-reply-section textarea:focus {
    border-color: #e67e22;
    box-shadow: 0 0 0 0.2rem rgba(230, 126, 34, 0.25);
}

body.theme-sunset-gradient .ticket-reply-section button {
    background-color: #e67e22;
}

body.theme-sunset-gradient .ticket-reply-section button:hover {
    background-color: #ca6f1e;
}

body.theme-sunset-gradient .no-data {
    background: linear-gradient(135deg, #fff8e1 0%, #fef9e7 100%);
    border-color: #f8c471;
    color: #d68910;
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 300px;
    max-width: 500px;
}

.notification-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.notification-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.notification-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.notification-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    margin-left: 15px;
    opacity: 0.7;
}

.notification-close:hover {
    opacity: 1;
}

/* Lead Script Button Styles */
.lead-script-btn {
    background: linear-gradient(135deg, #17a2b8 0%, #0c7489 100%) !important;
    border: none !important;
    color: white !important;
    transition: all 0.3s ease !important;
    margin: 2px !important;
}

.lead-script-btn:hover {
    background: linear-gradient(135deg, #138496 0%, #0a5a6b 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(23, 162, 184, 0.4) !important;
}

.lead-script-btn:active {
    transform: translateY(0) !important;
}

/* Ensure proper spacing in lead actions */
.lead-actions .lead-script-btn {
    margin-left: 3px;
    margin-right: 3px;
}

/* Note: Scripts page button styles are now defined above with uniform button styling */

/* Script Management Container Styles */
#scriptManagementContainer {
    padding: 20px 0;
}

.script-upload-container {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

#scriptUploadBtn {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

#scriptUploadBtn:hover {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
}

#scriptUploadBtn:active {
    transform: translateY(0) !important;
}

.script-management-section h3 {
    color: #495057;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.script-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.script-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.script-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #adb5bd;
}

.script-info h4 {
    margin: 0 0 8px 0;
    color: #343a40;
    font-size: 18px;
}

.script-info p {
    margin: 4px 0;
    color: #6c757d;
    font-size: 14px;
}

.script-actions {
    display: flex;
    gap: 10px;
}

.script-actions .btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.script-actions .btn-secondary {
    background: #6c757d;
    color: white;
}

.script-actions .btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

.script-actions .btn-danger {
    background: #dc3545;
    color: white;
}

.script-actions .btn-danger:hover {
    background: #c82333;
    transform: translateY(-1px);
}

.no-scripts-message {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed #dee2e6;
}

/* Script Toggle Container Styles */
.script-toggle-container {
    margin: 8px 0;
    padding: 8px 10px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.script-toggle-container:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.script-toggle-container .toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
}

.script-toggle-container .script-access-toggle {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.script-toggle-container .toggle-text {
    user-select: none;
    color: #495057;
}

.script-toggle-container input[type="checkbox"]:checked + .toggle-text {
    color: #28a745;
    font-weight: 600;
}

.script-toggle-container input[type="checkbox"]:checked {
    accent-color: #28a745;
}

/* Vendor Assignment Button Styles */
.vendor-assign-btn {
    background: linear-gradient(135deg, #2E8B57, #3CB371) !important;
    border: none !important;
    color: white !important;
    position: relative;
}

.vendor-assign-btn:hover {
    background: linear-gradient(135deg, #228B22, #32CD32) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(46, 139, 87, 0.3);
}

.vendor-assign-btn::before {
    content: '👤';
    position: absolute;
    top: -8px;
    right: -8px;
    background: #FF6B35;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
}

.vendor-unassign-btn {
    background: linear-gradient(135deg, #FF6B35, #FF8C42) !important;
    border: none !important;
    color: white !important;
}

.vendor-unassign-btn:hover {
    background: linear-gradient(135deg, #E55A2B, #FF7A29) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}

/* Vendor assignment specific popup styles */
#vendorAssignPopup .popup-content,
#vendorUnassignPopup .popup-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

#vendorAssignPopup .form-group label,
#vendorUnassignPopup .form-group label {
    color: #E8F4FD;
    font-weight: 600;
}

#vendorAssignPopup select,
#vendorUnassignPopup select {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #333;
}

#vendorAssignPopup select:focus,
#vendorUnassignPopup select:focus {
    border-color: #FFD700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

/* Lead real-time animations */
.new-lead-highlight {
    animation: newLeadPulse 3s ease-in-out;
    border: 2px solid #28a745 !important;
}

@keyframes newLeadPulse {
    0% {
        background-color: #d4edda;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    25% {
        background-color: #d4edda;
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0.3);
    }
    50% {
        background-color: #d4edda;
        transform: scale(1.02);
        box-shadow: 0 0 0 20px rgba(40, 167, 69, 0.1);
    }
    75% {
        background-color: #d4edda;
        transform: scale(1.01);
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0.1);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

.lead-updated-highlight {
    animation: leadUpdatedFlash 2s ease-in-out;
}

@keyframes leadUpdatedFlash {
    0% {
        background-color: #cce5ff;
        transform: scale(1);
    }
    50% {
        background-color: #99d6ff;
        transform: scale(1.01);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

/* Lead count animations */
.lead-count-updated {
    animation: countBounce 0.6s ease-in-out;
}

@keyframes countBounce {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* New assignment highlighting for agents */
.new-assignment-highlight {
    animation: newAssignmentPulse 3s ease-in-out;
    border: 2px solid #28a745 !important;
    position: relative;
}

/* Add "NEW ASSIGNMENT" badge to newly assigned leads */
#myLeadTable .lead-card.new-assignment-highlight::before {
    content: "NEW ASSIGNMENT";
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(45deg, #28a745, #20c997);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes newAssignmentPulse {
    0% {
        background-color: #d4edda;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.8);
    }
    25% {
        background-color: #d4edda;
        transform: scale(1.02);
        box-shadow: 0 0 0 12px rgba(40, 167, 69, 0.4);
    }
    50% {
        background-color: #d4edda;
        transform: scale(1.02);
        box-shadow: 0 0 0 20px rgba(40, 167, 69, 0.2);
    }
    75% {
        background-color: #d4edda;
        transform: scale(1.01);
        box-shadow: 0 0 0 12px rgba(40, 167, 69, 0.1);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}