@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Montserrat:wght@300;400;600;700;800;900&display=swap');

:root {
  --brand-purple: #7700C4;
  --brand-blue: #2E3192;
  --brand-gradient: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-blue) 100%);
  --text-dark: #2c3e50;
  --text-muted: #7f8c8d;
  --surface: #ffffff;
  --surface-alt: #ceced1;
  --shadow: 0 10px 25px rgba(0,0,0,0.08);
  --body-bg: linear-gradient(180deg, #f3f2ff 0%, #eef3ff 100%);
}

/*--surface-alt: #f8f9fc;*/

/* Dark Mode Theme */
body.dark-mode {
  --text-dark: #e0e0e0;
  --text-muted: #b0b0b0;
  --surface: #1e1e2e;
  --surface-alt: #2a2a3e;
  --shadow: 0 10px 25px rgba(0,0,0,0.3);
  --body-bg: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
}

body.dark-mode {
  background: var(--body-bg);
  color: var(--text-dark);
}

body.dark-mode .navbar {
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

body.dark-mode .navbar a {
  color: var(--text-dark);
}

body.dark-mode .navbar a:hover {
  color: white;
  background: var(--brand-gradient);
}

body.dark-mode main {
  background: transparent;
}

body.dark-mode table {
  background: var(--surface);
  color: var(--text-dark);
}

body.dark-mode table thead {
  background: var(--surface-alt);
}

body.dark-mode table tbody tr {
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

body.dark-mode table tbody tr:hover {
  background: var(--surface-alt);
}

/* Highlighted lead row */
table tbody tr.highlighted-lead-row {
  background: #fff3cd !important;
  border-left: 4px solid #ffc107 !important;
  animation: highlightPulse 2s ease-in-out;
}

body.dark-mode table tbody tr.highlighted-lead-row {
  background: #856404 !important;
  border-left: 4px solid #ffc107 !important;
}

@keyframes highlightPulse {
  0%, 100% {
    background: #fff3cd;
  }
  50% {
    background: #ffe69c;
  }
}

body.dark-mode .modal-content {
  background: var(--surface);
  color: var(--text-dark);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: var(--surface-alt);
  color: var(--text-dark);
  border-color: rgba(255,255,255,0.2);
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: var(--brand-purple);
  outline: none;
}

body.dark-mode .meeting-card {
  background: var(--surface);
  color: var(--text-dark);
  border-color: rgba(255,255,255,0.1);
}

body.dark-mode .meeting-card:hover {
  border-color: var(--brand-purple);
  box-shadow: 0 8px 20px rgba(119, 0, 196, 0.3);
}

body.dark-mode .meeting-card-info {
  color: var(--text-muted);
}

/* نافذة التحميل */
.import-progress-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(5px);
}

.import-progress-content {
  background: var(--surface);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  min-width: 400px;
  max-width: 500px;
  text-align: center;
}

.import-progress-content h3 {
  margin: 0 0 1.5rem 0;
  color: var(--text-dark);
  font-size: 1.3rem;
}

.progress-container {
  margin: 1.5rem 0;
}

.progress-bar {
  width: 100%;
  height: 30px;
  background: #e0e0e0;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.5rem;
}

body.dark-mode .progress-bar {
  background: var(--surface-alt);
}

.progress-fill {
  height: 100%;
  background: var(--brand-gradient);
  border-radius: 15px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.progress-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-top: 0.5rem;
}

.progress-details {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

body.dark-mode .import-progress-content {
  background: var(--surface);
  color: var(--text-dark);
}

body.dark-mode .meeting-card-employee {
  background: rgba(119, 0, 196, 0.1);
  border-right-color: var(--brand-purple);
}

body.dark-mode .no-meetings {
  color: var(--text-muted);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

body.dark-mode .theme-toggle-btn {
  background: var(--brand-gradient);
}

/* Scroll To Top Button */
.scroll-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.dark-mode .scroll-top-btn {
  background: var(--brand-gradient);
}

body.dark-mode th,
body.dark-mode thead {
  background: var(--brand-blue);
  color: white;
}

body.dark-mode tbody tr:nth-child(even) {
  background-color: var(--surface-alt);
}

body.dark-mode tbody tr:nth-child(odd) {
  background-color: var(--surface);
}

body.dark-mode td {
  border-bottom-color: rgba(255,255,255,0.1);
}

body.dark-mode .add-btn {
  background: var(--brand-gradient);
  color: white;
}

body.dark-mode .modal {
  background-color: rgba(0,0,0,0.7);
}

body.dark-mode .modal-content {
  background-color: var(--surface);
  color: var(--text-dark);
}

body.dark-mode .close {
  color: var(--text-dark);
}

body.dark-mode .close:hover {
  color: var(--brand-purple);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
  color: var(--text-dark);
}

/* Meeting details modal (update meeting) */
.meeting-details-modal {
  display: none;
}

.meeting-details-modal .meeting-modal-content {
  max-width: 520px;
}

.meeting-details-title {
  margin-bottom: 1rem;
}

.meeting-details-form {
  display: block;
}

.meeting-details-label {
  display: block;
  margin-bottom: 0.35rem;
}

.meeting-details-input,
.meeting-details-select,
.meeting-details-textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.75rem;
  border-radius: 6px;
  border: 1px solid rgb(204, 204, 204);
}

.meeting-link-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.meeting-link-input {
  flex: 1;
}

.meeting-link-btn {
  background: #1a73e8;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.9rem;
}

.meeting-help-text {
  font-size: 0.85rem;
  color: #666;
  margin: -0.5rem 0 0.75rem 0;
  line-height: 1.4;
}

.meeting-assign-self {
  display: none;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.meeting-assign-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.meeting-assign-text {
  font-weight: 500;
}

.meeting-admin-fields {
  display: block;
}

.meeting-price-container {
  display: none;
}

.meeting-notes-container {
  display: block;
}

.meeting-actions {
  display: flex;
  gap: 0.75rem;
}

.meeting-save-btn {
  background: rgb(39, 174, 96);
  color: rgb(255, 255, 255);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
}

.meeting-cancel-btn {
  background: #95a5a6;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
}

.meeting-details-info {
  display: block;
  line-height: 1.6;
  color: rgb(51, 51, 51);
}

.meeting-details-card {
  background: #f8f9fd;
  padding: 0.75rem;
  border-radius: 6px;
  margin-top: 1rem;
  line-height: 1.6;
}

.meeting-details-item {
  margin: 0 0 0.4rem;
}

.meeting-details-item:last-child {
  margin-bottom: 0;
}

/* خلايا الملاحظات - تتبع نمط الصف */
body.dark-mode .notes-cell {
  background: inherit !important;
  color: var(--text-dark);
}

/* Dark Mode - خلايا الملاحظات تتبع نمط الصف */
body.dark-mode tbody tr:nth-child(even) .notes-cell {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
}

body.dark-mode tbody tr:nth-child(odd) .notes-cell {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
}

body.dark-mode tbody tr:hover .notes-cell {
  background: var(--surface-alt) !important;
}

/* خلايا المسودة وملاحظات السيلز والتلي سيلز وملاحظات العملاء - تتبع لون الصف */
.draft-cell,
.sales-notes-cell,
.telesales-notes-cell,
.lead-notes-cell {
  background: inherit !important;
  color: inherit;
}

/* في الثيم الفاتح - الصفوف الزوجية */
tbody tr:nth-child(even) .draft-cell,
tbody tr:nth-child(even) .sales-notes-cell,
tbody tr:nth-child(even) .telesales-notes-cell,
tbody tr:nth-child(even) .lead-notes-cell {
  background: #e7ebf8 !important;
  color: #2c3e50;
}

/* في الثيم الفاتح - الصفوف الفردية */
tbody tr:nth-child(odd) .draft-cell,
tbody tr:nth-child(odd) .sales-notes-cell,
tbody tr:nth-child(odd) .telesales-notes-cell,
tbody tr:nth-child(odd) .lead-notes-cell {
  background: #ffffff !important;
  color: #2c3e50;
}

/* Dark Mode - خلايا المسودة وملاحظات السيلز والتلي سيلز وملاحظات العملاء - تتبع لون الصف */
body.dark-mode tbody tr:nth-child(even) .draft-cell,
body.dark-mode tbody tr:nth-child(even) .sales-notes-cell,
body.dark-mode tbody tr:nth-child(even) .telesales-notes-cell,
body.dark-mode tbody tr:nth-child(even) .lead-notes-cell {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
}

/* خلية تحميل داخل الجداول */
.table-loading-cell {
  text-align: center;
  padding: 1.5rem;
  color: #7f8c8d;
  font-size: 0.95rem;
}

body.dark-mode .table-loading-cell {
  color: var(--text-muted);
}

body.dark-mode tbody tr:nth-child(odd) .draft-cell,
body.dark-mode tbody tr:nth-child(odd) .sales-notes-cell,
body.dark-mode tbody tr:nth-child(odd) .telesales-notes-cell,
body.dark-mode tbody tr:nth-child(odd) .lead-notes-cell {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
}

/* عند التمرير على الصف */
tbody tr:hover .draft-cell,
tbody tr:hover .sales-notes-cell,
tbody tr:hover .telesales-notes-cell,
tbody tr:hover .lead-notes-cell {
  background: var(--surface-alt) !important;
}

body.dark-mode tbody tr:hover .draft-cell,
body.dark-mode tbody tr:hover .sales-notes-cell,
body.dark-mode tbody tr:hover .telesales-notes-cell,
body.dark-mode tbody tr:hover .lead-notes-cell {
  background: var(--surface-alt) !important;
}

body.dark-mode .status {
  color: white;
}

body.dark-mode .small {
  background: var(--brand-gradient);
  color: white;
}

body.dark-mode .actions-menu-dropdown {
  background: var(--surface);
  border-color: rgba(255,255,255,0.2);
}

body.dark-mode .actions-menu-dropdown button {
  color: var(--text-dark);
}

body.dark-mode .actions-menu-dropdown button:hover {
  background: var(--surface-alt);
}

/* Dark Mode - القوائم المنسدلة في الجداول */
body.dark-mode .table-select:not(.status-select),
body.dark-mode #leadsTable td select:not(.status-select),
body.dark-mode #myLeadsTable td select:not(.status-select),
body.dark-mode #meetingsTable td select:not(.status-select),
body.dark-mode #myMeetingsTable td select:not(.status-select) {
  background-color: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode .table-select:hover:not(.status-select),
body.dark-mode #leadsTable td select:hover:not(.status-select),
body.dark-mode #myLeadsTable td select:hover:not(.status-select),
body.dark-mode #meetingsTable td select:hover:not(.status-select),
body.dark-mode #myMeetingsTable td select:hover:not(.status-select) {
  background-color: var(--surface) !important;
  border-color: var(--brand-purple) !important;
}

body.dark-mode .table-select:focus:not(.status-select),
body.dark-mode #leadsTable td select:focus:not(.status-select),
body.dark-mode #myLeadsTable td select:focus:not(.status-select),
body.dark-mode #meetingsTable td select:focus:not(.status-select),
body.dark-mode #myMeetingsTable td select:focus:not(.status-select) {
  background-color: var(--surface-alt) !important;
  border-color: var(--brand-purple) !important;
}

body.dark-mode .table-select:disabled,
body.dark-mode #leadsTable td select:disabled,
body.dark-mode #myLeadsTable td select:disabled,
body.dark-mode #meetingsTable td select:disabled,
body.dark-mode #myMeetingsTable td select:disabled {
  background-color: rgba(255,255,255,0.05) !important;
  opacity: 0.5 !important;
}

body.dark-mode .table-select option,
body.dark-mode #leadsTable td select option,
body.dark-mode #myLeadsTable td select option,
body.dark-mode #meetingsTable td select option,
body.dark-mode #myMeetingsTable td select option {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
}

body.dark-mode .table-select option:hover,
body.dark-mode #leadsTable td select option:hover,
body.dark-mode #myLeadsTable td select option:hover,
body.dark-mode #meetingsTable td select option:hover,
body.dark-mode #myMeetingsTable td select option:hover {
  background: var(--surface-alt) !important;
}

body.dark-mode .table-select option:checked,
body.dark-mode #leadsTable td select option:checked,
body.dark-mode #myLeadsTable td select option:checked,
body.dark-mode #meetingsTable td select option:checked,
body.dark-mode #myMeetingsTable td select option:checked {
  background: var(--brand-blue) !important;
  color: white !important;
}

/* Dark Mode - الأزرار */
body.dark-mode button {
  background: var(--brand-gradient);
  color: white;
}

body.dark-mode button:hover {
  filter: brightness(1.1);
}

/* Dark Mode - حقول الإدخال */
body.dark-mode input[type="url"],
body.dark-mode input[type="number"],
body.dark-mode input[type="text"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="date"],
body.dark-mode input[type="search"] {
  background: var(--surface-alt);
  color: var(--text-dark);
  border-color: rgba(255,255,255,0.2);
}

body.dark-mode input[type="url"]:focus,
body.dark-mode input[type="number"]:focus,
body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="tel"]:focus,
body.dark-mode input[type="date"]:focus,
body.dark-mode input[type="search"]:focus {
  border-color: var(--brand-purple);
  outline: none;
}

/* Dark Mode - قائمة الصلاحيات */
body.dark-mode .permissions-list {
  background: var(--surface-alt);
  border-color: rgba(255,255,255,0.2);
}

body.dark-mode .permissions-list label {
  color: var(--text-dark);
}

body.dark-mode .permissions-list label:hover {
  background: var(--surface);
}

body.dark-mode .permissions-list::-webkit-scrollbar-track {
  background: var(--surface-alt);
}

body.dark-mode .permissions-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
}

body.dark-mode .permissions-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.5);
}

/* Dark Mode - بطاقات الإحصائيات */
body.dark-mode .stat-card {
  background: var(--surface);
  color: var(--text-dark);
}

body.dark-mode .stat-card h3 {
  color: var(--text-muted);
}

body.dark-mode .stat-card p {
  color: var(--text-dark);
}

/* Dark Mode - بطاقات الإحصائيات الملونة (مع inline styles) */
body.dark-mode .stat-card[style*="background: #e3f2fd"],
body.dark-mode .stat-card[style*="background:#e3f2fd"] {
  background: rgba(33, 150, 243, 0.15) !important;
  border-left-color: #64b5f6 !important;
}

body.dark-mode .stat-card[style*="background: #ffebee"],
body.dark-mode .stat-card[style*="background:#ffebee"] {
  background: rgba(244, 67, 54, 0.15) !important;
  border-left-color: #ef5350 !important;
}

body.dark-mode .stat-card[style*="background: #fff3e0"],
body.dark-mode .stat-card[style*="background:#fff3e0"] {
  background: rgba(255, 152, 0, 0.15) !important;
  border-left-color: #ffb74d !important;
}

body.dark-mode .stat-card[style*="background: #f3e5f5"],
body.dark-mode .stat-card[style*="background:#f3e5f5"] {
  background: rgba(156, 39, 176, 0.15) !important;
  border-left-color: #ba68c8 !important;
}

body.dark-mode .stat-card[style*="background: #e8f5e9"],
body.dark-mode .stat-card[style*="background:#e8f5e9"] {
  background: rgba(76, 175, 80, 0.15) !important;
  border-left-color: #81c784 !important;
}

body.dark-mode .stat-card[style*="background: #e1f5fe"],
body.dark-mode .stat-card[style*="background:#e1f5fe"] {
  background: rgba(3, 169, 244, 0.15) !important;
  border-left-color: #4fc3f7 !important;
}

body.dark-mode .stat-card[style*="background: #f1f8e9"],
body.dark-mode .stat-card[style*="background:#f1f8e9"] {
  background: rgba(139, 195, 74, 0.15) !important;
  border-left-color: #aed581 !important;
}

body.dark-mode .stat-card[style*="background: #fff3cd"],
body.dark-mode .stat-card[style*="background:#fff3cd"] {
  background: rgba(243, 156, 18, 0.15) !important;
  border-left-color: #ffcc80 !important;
}

body.dark-mode .stat-card[style*="background: #d5f4e6"],
body.dark-mode .stat-card[style*="background:#d5f4e6"] {
  background: rgba(39, 174, 96, 0.15) !important;
  border-left-color: #66bb6a !important;
}

body.dark-mode .stat-card[style*="background: #fadbd8"],
body.dark-mode .stat-card[style*="background:#fadbd8"] {
  background: rgba(231, 76, 60, 0.15) !important;
  border-left-color: #e57373 !important;
}

/* Dark Mode - ألوان النصوص في بطاقات الإحصائيات */
body.dark-mode .stat-card p[style*="color: #2196f3"],
body.dark-mode .stat-card p[style*="color:#2196f3"] {
  color: #64b5f6 !important;
}

body.dark-mode .stat-card p[style*="color: #f44336"],
body.dark-mode .stat-card p[style*="color:#f44336"] {
  color: #ef5350 !important;
}

body.dark-mode .stat-card p[style*="color: #ff9800"],
body.dark-mode .stat-card p[style*="color:#ff9800"] {
  color: #ffb74d !important;
}

body.dark-mode .stat-card p[style*="color: #9c27b0"],
body.dark-mode .stat-card p[style*="color:#9c27b0"] {
  color: #ba68c8 !important;
}

body.dark-mode .stat-card p[style*="color: #4caf50"],
body.dark-mode .stat-card p[style*="color:#4caf50"] {
  color: #81c784 !important;
}

body.dark-mode .stat-card p[style*="color: #03a9f4"],
body.dark-mode .stat-card p[style*="color:#03a9f4"] {
  color: #4fc3f7 !important;
}

body.dark-mode .stat-card p[style*="color: #8bc34a"],
body.dark-mode .stat-card p[style*="color:#8bc34a"] {
  color: #aed581 !important;
}

/* Dark Mode - التنبيهات (Alerts) */
.alert {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  border-right: 4px solid;
}

.alert-success {
  background: #e8f5e9;
  border-right-color: #4caf50;
  color: #2e7d32;
}

.alert-warning {
  background: #fff3e0;
  border-right-color: #ff9800;
  color: #f57c00;
}

.alert-info {
  background: #e3f2fd;
  border-right-color: #2196f3;
  color: #1976d2;
}

.alert a {
  text-decoration: none;
  font-weight: bold;
}

.alert-success a {
  color: #2e7d32;
}

.alert-warning a {
  color: #f57c00;
}

.alert-info a {
  color: #1976d2;
}

body.dark-mode .alert-success {
  background: rgba(76, 175, 80, 0.15) !important;
  border-right-color: #81c784 !important;
  color: #81c784 !important;
}

body.dark-mode .alert-warning {
  background: rgba(255, 152, 0, 0.15) !important;
  border-right-color: #ffb74d !important;
  color: #ffb74d !important;
}

body.dark-mode .alert-info {
  background: rgba(33, 150, 243, 0.15) !important;
  border-right-color: #64b5f6 !important;
  color: #64b5f6 !important;
}

body.dark-mode .alert-success a {
  color: #81c784 !important;
}

body.dark-mode .alert-warning a {
  color: #ffb74d !important;
}

body.dark-mode .alert-info a {
  color: #64b5f6 !important;
}

/* Dark Mode - Labels في البوب أب */
body.dark-mode label[style*="display:block"],
body.dark-mode label[style*="display: flex"],
body.dark-mode label[style*="display:flex"] {
  color: var(--text-dark) !important;
}

body.dark-mode label[style*="font-weight:500"],
body.dark-mode label[style*="font-weight: 500"],
body.dark-mode span[style*="font-weight:500"],
body.dark-mode span[style*="font-weight: 500"] {
  color: var(--text-dark) !important;
}

/* Dark Mode - الحاويات الديناميكية */
body.dark-mode div[style*="display:grid"],
body.dark-mode div[style*="display: flex"],
body.dark-mode div[style*="display:flex"] {
  color: var(--text-dark);
}

/* Dark Mode - النصوص في meetingDetailsInfo */
body.dark-mode div[style*="color: #333"],
body.dark-mode div[style*="color:#333"],
body.dark-mode div[style*="color: #666"],
body.dark-mode div[style*="color:#666"] {
  color: var(--text-dark) !important;
}

/* Dark Mode - Lead Details Body */
body.dark-mode .lead-details-body {
  color: var(--text-dark);
}

body.dark-mode .lead-details-body > div {
  color: var(--text-dark);
}

body.dark-mode .lead-details-body strong {
  color: var(--text-dark);
}

/* Dark Mode - Details Actions */
body.dark-mode #myLeadDetailsActions,
body.dark-mode #leadDetailsActions {
  color: var(--text-dark);
}

/* Dark Mode - Assign to Employee Section */
body.dark-mode #assignToEmployeeSection,
body.dark-mode #assignToEmployeeSection select,
body.dark-mode #assignToEmployeeSection button {
  color: var(--text-dark);
}

body.dark-mode #assignToEmployeeSection {
  background: var(--surface-alt);
  border-color: rgba(255,255,255,0.1);
}

body.dark-mode #assignToEmployeeSection select {
  background: var(--surface);
  border-color: rgba(255,255,255,0.2);
  color: var(--text-dark);
}

/* Dark Mode - I will follow up button */
body.dark-mode #followUpButton {
  background: var(--brand-gradient);
  color: white;
}

/* Dark Mode - Status badges in tables */
body.dark-mode span[style*="background: #e3f2fd"],
body.dark-mode span[style*="background:#e3f2fd"] {
  background: rgba(33, 150, 243, 0.2) !important;
  color: #64b5f6 !important;
}

body.dark-mode span[style*="color: #1976d2"],
body.dark-mode span[style*="color:#1976d2"] {
  color: #64b5f6 !important;
}

/* Dark Mode - Status colors in duplicate leads */
/* Note: Status colors are handled dynamically in JavaScript */

/* Dark Mode - Buttons with inline styles */
body.dark-mode .btn[style*="background: #27ae60"],
body.dark-mode .btn[style*="background:#27ae60"],
body.dark-mode .btn[style*="background: #e74c3c"],
body.dark-mode .btn[style*="background:#e74c3c"],
body.dark-mode .btn[style*="background: #3498db"],
body.dark-mode .btn[style*="background:#3498db"],
body.dark-mode .btn[style*="background: #2E3192"],
body.dark-mode .btn[style*="background:#2E3192"],
body.dark-mode .btn[style*="background: #e67e22"],
body.dark-mode .btn[style*="background:#e67e22"],
body.dark-mode .btn[style*="background: #9b59b6"],
body.dark-mode .btn[style*="background:#9b59b6"] {
  color: white !important;
}

/* Dark Mode - h2, h3 titles */
body.dark-mode h2[style*="margin"],
body.dark-mode h2[style*="margin-bottom"] {
  color: var(--text-dark);
}

body.dark-mode h3 {
  color: var(--text-dark);
}

/* Dark Mode - Links in alerts and buttons */
body.dark-mode a[style*="text-decoration: none"] {
  color: inherit;
}

body.dark-mode a[style*="text-decoration: none"]:hover {
  opacity: 0.8;
}

/* Dark Mode - الجداول الديناميكية في dashboard */
body.dark-mode #upcomingMeetingsTable,
body.dark-mode #recentTable {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
}

body.dark-mode #upcomingMeetingsTable td,
body.dark-mode #recentTable td {
  color: var(--text-dark) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode #upcomingMeetingsTable tbody tr:nth-child(even),
body.dark-mode #recentTable tbody tr:nth-child(even) {
  background: var(--surface-alt) !important;
}

body.dark-mode #upcomingMeetingsTable tbody tr:nth-child(odd),
body.dark-mode #recentTable tbody tr:nth-child(odd) {
  background: var(--surface) !important;
}

body.dark-mode #upcomingMeetingsTable tbody tr:hover,
body.dark-mode #recentTable tbody tr:hover {
  background: var(--surface-alt) !important;
}

/* Sticky header لجدول المستخدمين - يجب أن يكون بعد القواعد العامة */
#usersTableContainer {
  overflow-x: auto !important;
  position: relative;
}

#usersTable {
  position: relative;
  display: table !important;
}

#usersTable thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: linear-gradient(135deg, #7700C4 0%, #2E3192 100%) !important;
  display: table-header-group !important;
}

#usersTable thead tr {
  background: linear-gradient(135deg, #7700C4 0%, #2E3192 100%) !important;
}

#usersTable thead th {
  position: relative !important;
  z-index: 1001 !important;
  background: linear-gradient(135deg, #7700C4 0%, #2E3192 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* تقليل عرض عمود الملاحظات في جدول آخر 20 عميل محدث */
#recentTable td.notes-cell {
  max-width: 150px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

#recentTable td.notes-cell .notes-display {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Dark Mode - Empty state messages */
body.dark-mode td[style*="text-align: center"][style*="color: #999"],
body.dark-mode td[style*="text-align:center"][style*="color:#999"] {
  color: var(--text-muted) !important;
}

/* Dark Mode - Form elements in modals with inline styles */
body.dark-mode #meetingDateInput,
body.dark-mode #meetingTimeInput,
body.dark-mode #meetingLinkInput,
body.dark-mode #meetingStatusInput,
body.dark-mode #meetingConversionInput,
body.dark-mode #meetingPriceInput,
body.dark-mode #meetingNotesInput {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode #meetingDateInput:focus,
body.dark-mode #meetingTimeInput:focus,
body.dark-mode #meetingLinkInput:focus,
body.dark-mode #meetingStatusInput:focus,
body.dark-mode #meetingConversionInput:focus,
body.dark-mode #meetingPriceInput:focus,
body.dark-mode #meetingNotesInput:focus {
  border-color: var(--brand-purple) !important;
  outline: none !important;
}

body.dark-mode #meetingLinkInput::placeholder,
body.dark-mode #meetingPriceInput::placeholder {
  color: var(--text-muted) !important;
}

/* Dark Mode - Checkbox container */
body.dark-mode #assignToSelfContainer {
  background: var(--surface-alt) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode #assignToSelfContainer label,
body.dark-mode #assignToSelfContainer span {
  color: var(--text-dark) !important;
}

/* Dark Mode - Meeting Details Info */
body.dark-mode #meetingDetailsInfo {
  color: var(--text-dark) !important;
}

/* Dark Mode - Lead Details Modal */
body.dark-mode #myLeadDetailsTitle,
body.dark-mode #leadDetailsTitle {
  color: var(--text-dark) !important;
}

body.dark-mode .lead-details-body > div > div {
  color: var(--text-dark) !important;
}

body.dark-mode .lead-details-body strong {
  color: var(--text-dark) !important;
}

/* Dark Mode - All dynamically created elements */
body.dark-mode [id*="Details"],
body.dark-mode [id*="Modal"],
body.dark-mode [id*="Container"] {
  color: var(--text-dark);
}

/* Dark Mode - Ensure all text in modals is visible */
body.dark-mode .modal-content * {
  color: inherit;
}

body.dark-mode .modal-content label {
  color: var(--text-dark) !important;
}

body.dark-mode .modal-content p {
  color: var(--text-dark) !important;
}

body.dark-mode .modal-content span {
  color: var(--text-dark) !important;
}

body.dark-mode .modal-content div {
  color: var(--text-dark) !important;
}

/* Dark Mode - Links in modals */
body.dark-mode .modal-content a {
  color: var(--brand-purple) !important;
}

body.dark-mode .modal-content a:hover {
  color: var(--brand-blue) !important;
}

/* Dark Mode - Quick Links Section */
body.dark-mode .add-btn[style*="text-decoration: none"] {
  color: white !important;
}

body.dark-mode .add-btn[style*="background: linear-gradient"] {
  color: white !important;
}

/* Dark Mode - All h2 titles */
body.dark-mode h2 {
  color: var(--text-dark) !important;
}

body.dark-mode h2 span {
  color: var(--text-dark) !important;
}

/* Dark Mode - Ensure stat-card text is visible */
body.dark-mode .stat-card h3 {
  color: var(--text-muted) !important;
}

body.dark-mode .stat-card p {
  color: var(--text-dark) !important;
}

/* Dark Mode - Override any inline color styles in stat cards */
body.dark-mode .stat-card p[style*="color"] {
  /* Keep the color but ensure visibility */
  opacity: 1;
}

/* Dark Mode - Table headers with gradient */
body.dark-mode tr[style*="background: var(--brand-gradient)"] {
  background: var(--brand-gradient) !important;
  color: white !important;
}

body.dark-mode tr[style*="background: var(--brand-gradient)"] th {
  color: white !important;
}

/* Dark Mode - All input placeholders */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7;
}

/* Dark Mode - Select options */
body.dark-mode select option {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
}

body.dark-mode select {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - All form elements */
body.dark-mode form input,
body.dark-mode form select,
body.dark-mode form textarea {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode form input:focus,
body.dark-mode form select:focus,
body.dark-mode form textarea:focus {
  border-color: var(--brand-purple) !important;
  outline: none !important;
}

/* Dark Mode - All dynamically created content */
body.dark-mode [style*="color: #999"],
body.dark-mode [style*="color:#999"] {
  color: var(--text-muted) !important;
}

/* Dark Mode - Ensure all text is visible in dark mode */
/* Note: Specific rules below will override hardcoded light colors */

body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color:#000"],
body.dark-mode [style*="color: black"],
body.dark-mode [style*="color:black"] {
  color: var(--text-dark) !important;
}

/* Dark Mode - Small text */
body.dark-mode small {
  color: var(--text-muted) !important;
}

body.dark-mode small[style*="color"] {
  color: var(--text-muted) !important;
}

/* Dark Mode - All containers and sections */
body.dark-mode main > div,
body.dark-mode main > section {
  color: var(--text-dark);
}

/* Dark Mode - Links in dashboard */
body.dark-mode main a {
  color: var(--brand-purple);
}

body.dark-mode main a:hover {
  color: var(--brand-blue);
}

/* Dark Mode - Ensure stat-card backgrounds work in dark mode */
/* Note: Specific stat-card background rules are defined above */

/* Dark Mode - Override white backgrounds in tables */
body.dark-mode table[style*="background: white"],
body.dark-mode table[style*="background:white"],
body.dark-mode table[style*="background: #fff"],
body.dark-mode table[style*="background:#fff"],
body.dark-mode table[style*="background: #ffffff"],
body.dark-mode table[style*="background:#ffffff"] {
  background: var(--surface) !important;
}

/* Dark Mode - Box shadows in dark mode */
body.dark-mode [style*="box-shadow: 0 2px 8px rgba(0,0,0,0.1)"] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* Dark Mode - Border colors */
body.dark-mode [style*="border: 1px solid #e0e4e8"],
body.dark-mode [style*="border:1px solid #e0e4e8"],
body.dark-mode [style*="border: 1px solid #dfe3ea"],
body.dark-mode [style*="border:1px solid #dfe3ea"],
body.dark-mode [style*="border: 1px solid #ddd"],
body.dark-mode [style*="border:1px solid #ddd"],
body.dark-mode [style*="border: 1px solid #ccc"],
body.dark-mode [style*="border:1px solid #ccc"],
body.dark-mode [style*="border: 1px solid #dee2e6"],
body.dark-mode [style*="border:1px solid #dee2e6"] {
  border-color: rgba(255,255,255,0.1) !important;
}

/* Dark Mode - جميع الألوان الثابتة في النصوص */
body.dark-mode [style*="color: #7f8c8d"],
body.dark-mode [style*="color:#7f8c8d"],
body.dark-mode [style*="color: #555"],
body.dark-mode [style*="color:#555"],
body.dark-mode [style*="color: #777"],
body.dark-mode [style*="color:#777"],
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"] {
  color: var(--text-muted) !important;
}

/* Dark Mode - الخلفيات الفاتحة */
body.dark-mode [style*="background: #f3f6f9"],
body.dark-mode [style*="background:#f3f6f9"],
body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background:#f8f9fa"],
body.dark-mode [style*="background-color: #f8f9fa"],
body.dark-mode [style*="background-color:#f8f9fa"],
body.dark-mode [style*="background: #f0f0f0"],
body.dark-mode [style*="background:#f0f0f0"] {
  background: var(--surface-alt) !important;
}

body.dark-mode [style*="background: #f3f6f9"] label,
body.dark-mode [style*="background:#f3f6f9"] label,
body.dark-mode [style*="background: #f3f6f9"] span,
body.dark-mode [style*="background:#f3f6f9"] span,
body.dark-mode [style*="background: #f3f6f9"] small,
body.dark-mode [style*="background:#f3f6f9"] small {
  color: var(--text-dark) !important;
}

/* Dark Mode - Status badges مع inline styles */
body.dark-mode span[style*="background: #e3f2fd"][style*="color: #1976d2"],
body.dark-mode span[style*="background:#e3f2fd"][style*="color:#1976d2"] {
  background: rgba(33, 150, 243, 0.2) !important;
  color: #64b5f6 !important;
}

/* Dark Mode - Small text مع inline styles */
body.dark-mode small[style*="color: #7f8c8d"],
body.dark-mode small[style*="color:#7f8c8d"],
body.dark-mode small[style*="color: #777"],
body.dark-mode small[style*="color:#777"] {
  color: var(--text-muted) !important;
}

/* Dark Mode - Paragraphs مع inline styles */
body.dark-mode p[style*="color: #555"],
body.dark-mode p[style*="color:#555"],
body.dark-mode p[style*="color: #666"],
body.dark-mode p[style*="color:#666"] {
  color: var(--text-dark) !important;
}

/* Dark Mode - Labels مع inline styles */
body.dark-mode label[style*="background: #f3f6f9"],
body.dark-mode label[style*="background:#f3f6f9"] {
  background: var(--surface-alt) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode label[style*="background: #f3f6f9"] span,
body.dark-mode label[style*="background:#f3f6f9"] span,
body.dark-mode label[style*="background: #f3f6f9"] small,
body.dark-mode label[style*="background:#f3f6f9"] small {
  color: var(--text-dark) !important;
}

/* Dark Mode - Select elements مع inline styles */
body.dark-mode select[style*="border:1px solid #dfe3ea"],
body.dark-mode select[style*="border: 1px solid #dfe3ea"],
body.dark-mode select[style*="border:1px solid #ddd"],
body.dark-mode select[style*="border: 1px solid #ddd"],
body.dark-mode select[style*="border:1px solid #ccc"],
body.dark-mode select[style*="border: 1px solid #ccc"] {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* Dark Mode - Input elements مع inline styles */
body.dark-mode input[style*="border:1px solid #dfe3ea"],
body.dark-mode input[style*="border: 1px solid #dfe3ea"],
body.dark-mode input[style*="border:1px solid #ddd"],
body.dark-mode input[style*="border: 1px solid #ddd"],
body.dark-mode input[style*="border:1px solid #ccc"],
body.dark-mode input[style*="border: 1px solid #ccc"] {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* Dark Mode - Textarea elements مع inline styles */
body.dark-mode textarea[style*="border:1px solid #ddd"],
body.dark-mode textarea[style*="border: 1px solid #ddd"],
body.dark-mode textarea[style*="border:1px solid #ccc"],
body.dark-mode textarea[style*="border: 1px solid #ccc"] {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode textarea[style*="background-color: #f8f9fa"],
body.dark-mode textarea[style*="background-color:#f8f9fa"] {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Price input */
body.dark-mode .price-input,
body.dark-mode input.price-input {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode .price-input:focus,
body.dark-mode input.price-input:focus {
  border-color: var(--brand-purple) !important;
  outline: none !important;
}

/* Dark Mode - Assign section */
body.dark-mode div[style*="background: #f6f7fb"][style*="border: 1px solid #e0e0e0"],
body.dark-mode div[style*="background:#f6f7fb"][style*="border:1px solid #e0e0e0"] {
  background: var(--surface-alt) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode div[style*="background: #f6f7fb"] strong,
body.dark-mode div[style*="background:#f6f7fb"] strong,
body.dark-mode div[style*="background: #f6f7fb"] select,
body.dark-mode div[style*="background:#f6f7fb"] select,
body.dark-mode div[style*="background: #f6f7fb"] button,
body.dark-mode div[style*="background:#f6f7fb"] button {
  color: var(--text-dark) !important;
}

body.dark-mode div[style*="background: #f6f7fb"] select {
  background: var(--surface) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* Dark Mode - All divs with text */
body.dark-mode div[style*="grid-column"],
body.dark-mode div[style*="display: grid"],
body.dark-mode div[style*="display:flex"],
body.dark-mode div[style*="display: flex"] {
  color: var(--text-dark);
}

/* Dark Mode - Strong tags */
body.dark-mode strong {
  color: var(--text-dark) !important;
}

body.dark-mode .lead-details-body strong,
body.dark-mode #meetingRowDetailsBody strong,
body.dark-mode #myLeadDetailsBody strong {
  color: var(--text-dark) !important;
}

/* Dark Mode - All spans in modals */
body.dark-mode .modal-content span,
body.dark-mode #meetingRowDetailsBody span,
body.dark-mode #myLeadDetailsBody span {
  color: var(--text-dark) !important;
}

/* Dark Mode - Links in modals */
body.dark-mode .modal-content a,
body.dark-mode #meetingRowDetailsBody a,
body.dark-mode #myLeadDetailsBody a {
  color: var(--brand-purple) !important;
}

body.dark-mode .modal-content a:hover,
body.dark-mode #meetingRowDetailsBody a:hover,
body.dark-mode #myLeadDetailsBody a:hover {
  color: var(--brand-blue) !important;
}

/* Dark Mode - Border bottom colors */
body.dark-mode [style*="border-bottom:1px solid #f0f0f0"],
body.dark-mode [style*="border-bottom: 1px solid #f0f0f0"],
body.dark-mode [style*="border-bottom:1px solid #e0e0e0"],
body.dark-mode [style*="border-bottom: 1px solid #e0e0e0"] {
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

/* Dark Mode - Modal textareas */
body.dark-mode .modal-textarea {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode .modal-textarea-draft {
  background: var(--surface-alt) !important;
}

body.dark-mode .modal-textarea:focus {
  border-color: var(--brand-purple) !important;
  outline: none !important;
}

/* Dark Mode - All elements with specific IDs */
body.dark-mode #assignToEmployeeSection_*,
body.dark-mode [id^="assignToEmployeeSection_"] {
  background: var(--surface-alt) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode [id^="assignToEmployeeSection_"] strong,
body.dark-mode [id^="assignToEmployeeSection_"] select,
body.dark-mode [id^="assignToEmployeeSection_"] button {
  color: var(--text-dark) !important;
}

body.dark-mode [id^="assignToEmployeeSection_"] select {
  background: var(--surface) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* Dark Mode - Universal text color override for dark mode */
/* Note: More specific rules below will override this */

/* Dark Mode - Ensure all text in lead details is visible */
body.dark-mode .lead-details-body > div {
  color: var(--text-dark) !important;
}

body.dark-mode .lead-details-body > div > strong {
  color: var(--text-dark) !important;
  font-weight: 700;
}

body.dark-mode .lead-details-body > div > br + * {
  color: var(--text-dark) !important;
}

/* Dark Mode - Meeting details body */
body.dark-mode #meetingRowDetailsBody > div {
  color: var(--text-dark) !important;
}

body.dark-mode #meetingRowDetailsBody > div > strong {
  color: var(--text-dark) !important;
  font-weight: 700;
}

/* Dark Mode - All select elements in modals */
body.dark-mode .modal-content select,
body.dark-mode #myLeadDetailsBody select,
body.dark-mode #meetingRowDetailsBody select {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode .modal-content select:focus,
body.dark-mode #myLeadDetailsBody select:focus,
body.dark-mode #meetingRowDetailsBody select:focus {
  border-color: var(--brand-purple) !important;
  outline: none !important;
}

body.dark-mode .modal-content select option,
body.dark-mode #myLeadDetailsBody select option,
body.dark-mode #meetingRowDetailsBody select option {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - All input elements in modals */
body.dark-mode .modal-content input[type="text"],
body.dark-mode .modal-content input[type="number"],
body.dark-mode .modal-content input[type="date"],
body.dark-mode .modal-content input[type="time"],
body.dark-mode .modal-content input[type="url"],
body.dark-mode .modal-content input[type="tel"] {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode .modal-content input:focus {
  border-color: var(--brand-purple) !important;
  outline: none !important;
}

/* Dark Mode - All textarea elements in modals */
body.dark-mode .modal-content textarea {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode .modal-content textarea:focus {
  border-color: var(--brand-purple) !important;
  outline: none !important;
}

/* Dark Mode - Override any remaining light colors */
/* Note: More specific rules below will override light colors */

/* Dark Mode - Ensure buttons keep their colors */
/* Note: Button background colors are preserved as defined */

body.dark-mode button[style*="color: #fff"],
body.dark-mode button[style*="color:#fff"],
body.dark-mode button[style*="color: white"],
body.dark-mode button[style*="color:white"] {
  color: white !important;
}

/* Dark Mode - Universal override for all text elements in dark mode */
body.dark-mode .modal-content,
body.dark-mode #myLeadDetailsModal,
body.dark-mode #meetingRowDetailsModal,
body.dark-mode #meetingDetailsModal {
  color: var(--text-dark) !important;
}

body.dark-mode .modal-content *:not(button):not(a):not(.status):not(th):not(tr[style*="background: var(--brand-gradient)"]) {
  color: inherit;
}

/* Dark Mode - Specific overrides for common text colors */
body.dark-mode [style*="color: #1976d2"],
body.dark-mode [style*="color:#1976d2"] {
  color: #64b5f6 !important;
}

body.dark-mode [style*="color: #2e7d32"],
body.dark-mode [style*="color:#2e7d32"] {
  color: #81c784 !important;
}

body.dark-mode [style*="color: #f57c00"],
body.dark-mode [style*="color:#f57c00"] {
  color: #ffb74d !important;
}

/* Dark Mode - Ensure all divs with grid layouts have proper text color */
body.dark-mode div[style*="grid-template-columns"],
body.dark-mode div[style*="display: grid"] {
  color: var(--text-dark);
}

body.dark-mode div[style*="grid-template-columns"] > div,
body.dark-mode div[style*="display: grid"] > div {
  color: var(--text-dark);
}

/* Dark Mode - All table cells in modals */
body.dark-mode .modal-content td,
body.dark-mode .modal-content th {
  color: var(--text-dark) !important;
}

/* Dark Mode - All list items */
body.dark-mode .modal-content li {
  color: var(--text-dark) !important;
}

/* Dark Mode - All headings in modals */
body.dark-mode .modal-content h1,
body.dark-mode .modal-content h2,
body.dark-mode .modal-content h3,
body.dark-mode .modal-content h4,
body.dark-mode .modal-content h5,
body.dark-mode .modal-content h6 {
  color: var(--text-dark) !important;
}

/* Dark Mode - Ensure status classes work in dark mode */
body.dark-mode .status.new,
body.dark-mode .status.in-progress,
body.dark-mode .status.failed,
body.dark-mode .status.done {
  color: white !important;
}

/* Dark Mode - All disabled elements */
body.dark-mode select:disabled,
body.dark-mode input:disabled,
body.dark-mode textarea:disabled,
body.dark-mode button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dark Mode - Focus states for all form elements */
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: var(--brand-purple) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(119, 0, 196, 0.2) !important;
}

/* Dark Mode - Hover states */
body.dark-mode .modal-content a:hover {
  opacity: 0.8;
}

body.dark-mode button:hover:not(:disabled) {
  filter: brightness(1.1);
}

/* Dark Mode - Ensure all inline styles with specific colors are handled */
body.dark-mode [style*="background: #e3f2fd"]:not(button):not(.stat-card) {
  background: rgba(33, 150, 243, 0.15) !important;
}

body.dark-mode [style*="background: #fff3e0"]:not(button):not(.stat-card) {
  background: rgba(255, 152, 0, 0.15) !important;
}

body.dark-mode [style*="background: #e8f5e9"]:not(button):not(.stat-card) {
  background: rgba(76, 175, 80, 0.15) !important;
}

/* Dark Mode - Ensure all text is readable */
/* Note: Base rule - more specific rules below will override */

body.dark-mode .modal-content,
body.dark-mode .lead-details-body,
body.dark-mode #meetingRowDetailsBody,
body.dark-mode #meetingDetailsForm {
  color: var(--text-dark) !important;
}

/* Dark Mode - Override any remaining light backgrounds in modals */
body.dark-mode .modal-content [style*="background: white"],
body.dark-mode .modal-content [style*="background:white"],
body.dark-mode .modal-content [style*="background: #fff"],
body.dark-mode .modal-content [style*="background:#fff"] {
  background: var(--surface-alt) !important;
}

/* Dark Mode - Ensure all borders are visible */
/* Note: Borders are handled by specific rules above */

/* Dark Mode - All icons and emojis should remain visible */
/* Note: Icons remain as they are - no changes needed */

/* Dark Mode - Ensure proper contrast for all interactive elements */
body.dark-mode button:not([style*="background: #"]):not([style*="background:#"]) {
  background: var(--brand-gradient) !important;
  color: white !important;
}

body.dark-mode .btn:not([style*="background: #"]):not([style*="background:#"]) {
  background: var(--brand-gradient) !important;
  color: white !important;
}

/* Dark Mode - قائمة الإجراءات */
body.dark-mode .actions-menu-dropdown {
  background: var(--surface);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

body.dark-mode .actions-menu-dropdown button {
  color: var(--text-dark);
  border-bottom-color: rgba(255,255,255,0.1);
}

body.dark-mode .actions-menu-dropdown button:hover {
  background: var(--surface-alt);
}

/* Dark Mode - النصوص الصغيرة */
body.dark-mode small {
  color: var(--text-muted);
}

/* Dark Mode - الصف المميز */
body.dark-mode .highlighted-row {
  background-color: rgba(119, 0, 196, 0.3) !important;
  animation: highlightPulse 2s ease-in-out;
}

@keyframes highlightPulse {
  0%, 100% { background-color: rgba(119, 0, 196, 0.3); }
  50% { background-color: rgba(119, 0, 196, 0.5); }
}

/* Dark Mode - رسائل عدم وجود بيانات */
body.dark-mode .no-data,
body.dark-mode .no-meetings {
  color: var(--text-muted);
}

/* جدول كروت الاجتماعات في وضع الجدول */
.meetings-cards-table th,
.meetings-cards-table td {
  border: 1px solid #e0e0e0;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  text-align: center;
}

.meetings-cards-table th {
  background: #2E3192;
  color: #ffffff;
  font-weight: 600;
}

body.dark-mode .meetings-cards-table th,
body.dark-mode .meetings-cards-table td {
  border-color: rgba(255,255,255,0.1);
}

body.dark-mode .meetings-cards-table th {
  background: var(--surface-alt);
  color: var(--text-dark);
}

/* Dark Mode - صفحة التحميل */
body.dark-mode #loadingPage {
  background: var(--body-bg);
}

body.dark-mode .loading-text {
  color: var(--text-dark);
}

/* Dark Mode - معلومات المستخدم */
body.dark-mode .user-info {
  color: white;
}

body.dark-mode .user-info button {
  background: rgba(255,255,255,0.2);
  color: white;
}

body.dark-mode .user-info button:hover {
  background: rgba(255,255,255,0.3);
}

/* Toast notifications */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  min-width: 260px;
  max-width: 360px;
  background: #ffffff;
  color: #2c3e50;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border-inline-start: 4px solid #3498db;
  cursor: pointer;
  direction: rtl;
}

.toast-icon {
  font-size: 1.2rem;
  margin-top: 0.1rem;
}

.toast-message {
  flex: 1;
}

.toast-close {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.6;
}

.toast-success {
  border-inline-start-color: #27ae60;
}

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

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

body.dark-mode .toast {
  background: var(--surface);
  color: var(--text-dark);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* Dark Mode - الأزرار المخصصة (Excel, etc.) */
body.dark-mode .add-btn[style*="background: #27ae60"],
body.dark-mode .add-btn[style*="background: #3498db"] {
  color: white;
}

/* Dark Mode - النماذج */
body.dark-mode form label {
  color: var(--text-dark);
}

body.dark-mode form input::placeholder,
body.dark-mode form textarea::placeholder {
  color: var(--text-muted);
}

/* Dark Mode - الفلاتر */
body.dark-mode #leadsFilters,
body.dark-mode #myLeadsFilters,
body.dark-mode #meetingsFilters,
body.dark-mode #myMeetingsFilters {
  background: var(--surface) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

body.dark-mode #leadsFilters select,
body.dark-mode #myLeadsFilters select,
body.dark-mode #meetingsFilters select,
body.dark-mode #myMeetingsFilters select,
body.dark-mode #leadsFilters input,
body.dark-mode #myLeadsFilters input,
body.dark-mode #meetingsFilters input,
body.dark-mode #myMeetingsFilters input {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode #leadsFilters select:focus,
body.dark-mode #myLeadsFilters select:focus,
body.dark-mode #meetingsFilters select:focus,
body.dark-mode #myMeetingsFilters select:focus,
body.dark-mode #leadsFilters input:focus,
body.dark-mode #myLeadsFilters input:focus,
body.dark-mode #meetingsFilters input:focus,
body.dark-mode #myMeetingsFilters input:focus {
  border-color: var(--brand-purple) !important;
  outline: none;
}

/* أزرار الفلاتر - الوضع الفاتح */
#leadsFilters button,
#myLeadsFilters button,
#meetingsFilters button,
#myMeetingsFilters button {
  background: #e67e22 !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(230, 126, 34, 0.3) !important;
  transition: all 0.2s ease !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

#leadsFilters button:hover,
#myLeadsFilters button:hover,
#meetingsFilters button:hover,
#myMeetingsFilters button:hover {
  background: #d35400 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(230, 126, 34, 0.4) !important;
}

body.dark-mode #leadsFilters button,
body.dark-mode #myLeadsFilters button,
body.dark-mode #meetingsFilters button,
body.dark-mode #myMeetingsFilters button {
  background: #e67e22 !important;
  color: white !important;
}

body.dark-mode #leadsFilters button:hover,
body.dark-mode #myLeadsFilters button:hover,
body.dark-mode #meetingsFilters button:hover,
body.dark-mode #myMeetingsFilters button:hover {
  background: #d35400 !important;
}

/* Dark Mode - صفحات التقارير */
body.dark-mode .filter-section {
  background: var(--surface);
  color: var(--text-dark);
}

body.dark-mode .filter-section label {
  color: var(--text-dark);
}

body.dark-mode .filter-section select,
body.dark-mode .filter-section input {
  background: var(--surface-alt);
  color: var(--text-dark);
  border-color: rgba(255,255,255,0.2);
}

body.dark-mode .kpi-card {
  background: var(--surface);
  color: var(--text-dark);
}

body.dark-mode .kpi-card h3 {
  color: var(--text-dark);
}

body.dark-mode .kpi-value {
  color: var(--text-dark);
}

/* Dark Mode - العناصر الديناميكية */
body.dark-mode #autoReturnPanel {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
}

body.dark-mode #autoReturnPanel strong,
body.dark-mode #autoReturnPanel span {
  color: var(--text-dark) !important;
}

body.dark-mode #autoReturnPanel input {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode #meetingDistributionPanel {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
}

body.dark-mode #meetingDistributionPanel strong,
body.dark-mode #meetingDistributionPanel span,
body.dark-mode #meetingDistributionPanel label {
  color: var(--text-dark) !important;
}

body.dark-mode #meetingDistributionPanel select,
body.dark-mode #meetingDistributionPanel input {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* Dark Mode - الإشعارات */
body.dark-mode #notifDropdown {
  background: var(--surface) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
}

body.dark-mode #notifDropdown > div:first-child {
  background: var(--surface-alt) !important;
}

body.dark-mode #notifDropdown strong {
  color: var(--text-dark) !important;
}

body.dark-mode #notifList {
  background: var(--surface) !important;
}

body.dark-mode #notifList .notif-item {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode #notifList .notif-item:hover {
  background: var(--surface-alt) !important;
}

body.dark-mode #notifList .notif-item.unread {
  background: rgba(119, 0, 196, 0.1) !important;
}

/* Dark Mode - النصوص والروابط */
body.dark-mode a {
  color: var(--text-dark);
}

body.dark-mode a:hover {
  color: var(--brand-purple);
}

body.dark-mode p {
  color: var(--text-dark);
}

body.dark-mode span {
  color: var(--text-dark);
}

body.dark-mode label {
  color: var(--text-dark);
}

/* Dark Mode - التمرير (Scrollbar) */
body.dark-mode ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: var(--surface-alt);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 6px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.5);
}

/* Dark Mode - الجداول مع inline styles */
body.dark-mode table[style*="background: white"],
body.dark-mode table[style*="background:white"],
body.dark-mode table[style*="background:#fff"],
body.dark-mode table[style*="background:#ffffff"] {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
}

body.dark-mode table[style*="background: white"] td,
body.dark-mode table[style*="background:white"] td,
body.dark-mode table[style*="background:#fff"] td,
body.dark-mode table[style*="background:#ffffff"] td {
  color: var(--text-dark) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode table[style*="background: white"] tbody tr,
body.dark-mode table[style*="background:white"] tbody tr,
body.dark-mode table[style*="background:#fff"] tbody tr,
body.dark-mode table[style*="background:#ffffff"] tbody tr {
  background: var(--surface) !important;
}

body.dark-mode table[style*="background: white"] tbody tr:nth-child(even),
body.dark-mode table[style*="background:white"] tbody tr:nth-child(even),
body.dark-mode table[style*="background:#fff"] tbody tr:nth-child(even),
body.dark-mode table[style*="background:#ffffff"] tbody tr:nth-child(even) {
  background: var(--surface-alt) !important;
}

/* Dark Mode - الحقول مع inline styles */
body.dark-mode div[style*="background: #f6f7fb"],
body.dark-mode div[style*="background:#f6f7fb"],
body.dark-mode div[style*="background: #ffffff"],
body.dark-mode div[style*="background:#ffffff"],
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background:white"] {
  background: var(--surface-alt) !important;
}

body.dark-mode div[style*="background: linear-gradient(135deg, #ffffff"],
body.dark-mode div[style*="background:linear-gradient(135deg, #ffffff"] {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%) !important;
}

body.dark-mode label[style*="background: #fff"],
body.dark-mode label[style*="background:#fff"],
body.dark-mode label[style*="background: white"],
body.dark-mode label[style*="background:white"] {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
}

body.dark-mode label[style*="background: #fff"]:hover,
body.dark-mode label[style*="background:#fff"]:hover,
body.dark-mode label[style*="background: white"]:hover,
body.dark-mode label[style*="background:white"]:hover {
  background: var(--surface-alt) !important;
}

/* Dark Mode - النصوص الملونة */
body.dark-mode td[style*="color: #999"],
body.dark-mode td[style*="color:#999"],
body.dark-mode span[style*="color: #999"],
body.dark-mode span[style*="color:#999"] {
  color: var(--text-muted) !important;
}

body.dark-mode td[style*="color: #1976d2"],
body.dark-mode td[style*="color:#1976d2"],
body.dark-mode span[style*="color: #1976d2"],
body.dark-mode span[style*="color:#1976d2"] {
  color: #64b5f6 !important;
}

/* Dark Mode - التنبيهات (Alerts) */
body.dark-mode div[style*="background: #e8f5e9"],
body.dark-mode div[style*="background:#e8f5e9"] {
  background: rgba(76, 175, 80, 0.15) !important;
  border-right-color: #81c784 !important;
}

body.dark-mode div[style*="background: #fff3e0"],
body.dark-mode div[style*="background:#fff3e0"] {
  background: rgba(255, 152, 0, 0.15) !important;
  border-right-color: #ffb74d !important;
}

body.dark-mode div[style*="background: #e3f2fd"],
body.dark-mode div[style*="background:#e3f2fd"] {
  background: rgba(33, 150, 243, 0.15) !important;
  border-right-color: #64b5f6 !important;
}

body.dark-mode div[style*="color: #2e7d32"],
body.dark-mode div[style*="color:#2e7d32"],
body.dark-mode span[style*="color: #2e7d32"],
body.dark-mode span[style*="color:#2e7d32"] {
  color: #81c784 !important;
}

body.dark-mode div[style*="color: #f57c00"],
body.dark-mode div[style*="color:#f57c00"],
body.dark-mode span[style*="color: #f57c00"],
body.dark-mode span[style*="color:#f57c00"] {
  color: #ffb74d !important;
}

body.dark-mode div[style*="color: #1976d2"],
body.dark-mode div[style*="color:#1976d2"],
body.dark-mode span[style*="color: #1976d2"],
body.dark-mode span[style*="color:#1976d2"] {
  color: #64b5f6 !important;
}

/* Dark Mode - حقول الإدخال في البوب أب */
body.dark-mode input[style*="border:1px solid #ccc"],
body.dark-mode input[style*="border: 1px solid #ccc"],
body.dark-mode select[style*="border:1px solid #ccc"],
body.dark-mode select[style*="border: 1px solid #ccc"],
body.dark-mode textarea[style*="border:1px solid #ccc"],
body.dark-mode textarea[style*="border: 1px solid #ccc"] {
  background: var(--surface-alt) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode input[style*="border:1px solid #ccc"]:focus,
body.dark-mode input[style*="border: 1px solid #ccc"]:focus,
body.dark-mode select[style*="border:1px solid #ccc"]:focus,
body.dark-mode select[style*="border: 1px solid #ccc"]:focus,
body.dark-mode textarea[style*="border:1px solid #ccc"]:focus,
body.dark-mode textarea[style*="border: 1px solid #ccc"]:focus {
  border-color: var(--brand-purple) !important;
  outline: none !important;
}

/* Dark Mode - النصوص في البوب أب */
body.dark-mode p[style*="color: #666"],
body.dark-mode p[style*="color:#666"],
body.dark-mode span[style*="color: #666"],
body.dark-mode span[style*="color:#666"],
body.dark-mode div[style*="color: #333"],
body.dark-mode div[style*="color:#333"] {
  color: var(--text-muted) !important;
}

/* Dark Mode - الحاويات في البوب أب */
body.dark-mode div[style*="background: #f8f9fa"],
body.dark-mode div[style*="background:#f8f9fa"],
body.dark-mode div[style*="background: #dee2e6"],
body.dark-mode div[style*="background:#dee2e6"] {
  background: var(--surface-alt) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode div[style*="background: #f8f9fa"] label,
body.dark-mode div[style*="background:#f8f9fa"] label,
body.dark-mode div[style*="background: #f8f9fa"] span,
body.dark-mode div[style*="background:#f8f9fa"] span {
  color: var(--text-dark) !important;
}

/* Dark Mode - الأزرار في البوب أب */
body.dark-mode button[style*="background: #1a73e8"],
body.dark-mode button[style*="background:#1a73e8"],
body.dark-mode button[style*="background: #27ae60"],
body.dark-mode button[style*="background:#27ae60"],
body.dark-mode button[style*="background: #95a5a6"],
body.dark-mode button[style*="background:#95a5a6"] {
  color: white !important;
}

/* Dark Mode - جميع العناصر المتبقية */
body.dark-mode * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Cairo', 'Montserrat', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background: var(--body-bg);
  color: var(--text-dark);
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
}

header {
  background: var(--brand-gradient);
  color: white;
  padding: 1rem;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.brand-logo {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
}

.brand-logo img {
  height: 32px;
  width: auto;
  display: block;
}

.user-info {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.user-info button {
  background: rgba(255,255,255,0.2);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 1rem;
  transition: all 0.2s ease-in-out;
}

.navbar {
  background: var(--surface);
  padding: 1rem;
  text-align: center;
  position: sticky;
  top: calc(var(--header-height, 70px));
  z-index: 999;
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.navbar a {
  color: var(--brand-blue);
  margin: 0 1rem;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
}

.navbar a:hover {
  color: white;
  background: var(--brand-gradient);
}

/* حشو داخلي للمحتوى بدون تغيير الهامش العلوي الخاص بالهيدر/النافبار */
main {
  padding: 2rem;
}

.add-btn {
  background: var(--brand-gradient);
  color: #ffffff !important;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(119, 0, 196, 0.25);
  transition: all 0.3s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(119, 0, 196, 0.35);
  filter: brightness(1.05);
}

.add-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(119, 0, 196, 0.25);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 8px;
  overflow: visible;
  box-shadow: var(--shadow);
  display: table;
  table-layout: auto;
}

/* Table container for horizontal scrolling on small screens */
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.table-container table {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

th, td {
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

th {
  background: var(--brand-blue);
  color: white;
}

thead {
  position: sticky;
  top: var(--thead-top, calc(var(--header-height, 70px) + var(--navbar-height, 60px) + var(--filter-height, 70px)));
  z-index: 998;
  background: var(--brand-blue);
  display: table-header-group;
}

thead th {
  position: relative;
  z-index: 999;
  background: var(--brand-blue);
}

/* Meetings filters styles */
.meetings-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
  background: rgb(246, 247, 251);
  padding: 0.6rem;
  border-radius: 8px;
  align-items: center;
}
.meetings-filter-select {
  min-width: 160px;
  padding: 0.4rem 0.5rem;
  border: 1px solid #dfe3ea;
  border-radius: 6px;
}
.meetings-employee-select { min-width: 180px; }
.meetings-filter-input {
  padding: 0.4rem 0.5rem;
  border: 1px solid #dfe3ea;
  border-radius: 6px;
}
.meetings-search-input {
  min-width: 220px;
  padding: 0.4rem 0.6rem;
  border: 1px solid #dfe3ea;
  border-radius: 6px;
}
.meetings-reset-btn {
  margin-inline-start: auto;
  background: #e67e22;
  color: #fff;
  padding: 0.45rem 0.8rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .meetings-filters { gap: 0.6rem; }
  .meetings-filter-select, .meetings-filter-input, .meetings-search-input { min-width: 180px; }
}

/* Meetings list specific styles */
.meeting-code { 
  cursor: pointer; 
  color: var(--brand-blue); 
  font-weight: 600; 
}

.phone-actions { 
  display: flex; 
  align-items: center; 
  gap: 0.15rem; 
  min-width: 200px; 
}
.phone-link { 
  flex: 1; 
  text-decoration: none; 
  color: #3498db; 
  margin-right: 0.1rem; 
}
.phone-btn { 
  color: white; 
  border: none; 
  padding: 0.2rem 0.4rem; 
  border-radius: 4px; 
  cursor: pointer; 
  font-size: 0.85rem; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 0.15rem; 
  transition: transform 0.12s ease, box-shadow 0.12s ease; 
  transform: scale(1); 
}
.phone-btn:hover { 
  transform: scale(1.05); 
}
.phone-btn:active { 
  transform: scale(1); 
}
.phone-btn-copy { 
  background: rgb(52, 152, 219); 
  box-shadow: rgba(52, 152, 219, 0.3) 0px 2px 4px; 
}
.phone-btn-whatsapp { 
  background: rgb(37, 211, 102); 
  box-shadow: rgba(37, 211, 102, 0.3) 0px 2px 4px; 
}

.status { 
  padding: 0.4rem 0.8rem; 
  border-radius: 4px; 
  display: inline-block; 
}
.status.done { 
  background: #e8f5e9; 
  color: #27ae60; 
}
.badge-call { 
  padding: 0.4rem 0.8rem; 
  border-radius: 4px; 
  display: inline-block; 
  background: #f3e5f5; 
  color: #8e44ad; 
}

.notes-cell { 
  padding: 0.5rem; 
  border-radius: 4px; 
  font-size: 0.85rem; 
  max-width: 200px; 
}
.note-title { 
  cursor: help; 
}



/* Sticky positioning for filter bars */
#leadsFilters,
#myLeadsFilters,
#meetingsFilters,
#myMeetingsFilters {
  position: sticky;
  top: calc(var(--header-height, 70px) + var(--navbar-height, 60px));
  z-index: 997;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background: var(--surface);
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
}

#leadsFilters select,
#myLeadsFilters select,
#meetingsFilters select,
#myMeetingsFilters select,
#leadsFilters input,
#myLeadsFilters input,
#meetingsFilters input,
#myMeetingsFilters input {
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 0.9rem;
  min-width: 150px;
  flex: 1 1 auto;
}

#leadsFilters label,
#myLeadsFilters label,
#meetingsFilters label,
#myMeetingsFilters label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
}

tr:hover {
  background: var(--surface-alt);
}

/* تباين ألوان الصفوف في الجداول */
tbody tr:nth-child(even) {
  background-color: #e7ebf8;
}

tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

tbody tr:hover {
  background-color: var(--surface-alt) !important;
}

button {
  background: var(--brand-gradient);
  color: #ffffff !important;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  margin: 0 0.25rem;
  box-shadow: 0 3px 10px rgba(119, 0, 196, 0.2);
  transition: all 0.3s ease;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(119, 0, 196, 0.3);
  filter: brightness(1.08);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(119, 0, 196, 0.2);
}

.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ضبط ترتيب طبقات بعض النوافذ المنبثقة حتى تظهر فوق بعضها بشكل صحيح */
#myLeadDetailsModal {
  z-index: 1000; /* نافذة تفاصيل العميل الأساسية */
}

#editLeadModal,
#meetingDetailsModal {
  z-index: 1100; /* تظهر فوق نافذة تفاصيل العميل عند الفتح */
}

/* عندما يكون myLeadDetailsModal مفتوحاً، جعل خلفية meetingDetailsModal أكثر شفافية */
#meetingDetailsModal.has-parent-modal {
  background-color: rgba(0,0,0,0.2) !important;
}

.modal-content {
  background-color: white;
  margin: 5% auto;
  padding: 2rem;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* Modal improvements for small screens */
@media screen and (max-width: 768px) {
  .modal-content {
    margin: 2% auto;
    padding: 1.5rem;
    width: 95%;
    max-width: 95%;
    border-radius: 8px;
  }
  
  .modal-content h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  
  .modal-content form {
    width: 100%;
  }
  
  .modal-content .details-actions-inline {
    flex-direction: column;
  }
  
  .modal-content .details-actions-inline .btn {
    width: 100%;
    margin: 0.25rem 0;
  }
}

.close {
  float: left;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
}

form input, form select {
  width: 100%;
  padding: 0.75rem;
  margin: 0.5rem 0;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: var(--shadow);
  flex: 1;
  min-width: 150px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.stat-card h3 {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.stat-card p {
  font-size: 2rem;
  font-weight: bold;
  color: var(--text-dark);
}

.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-container {
  background: white;
  padding: 3rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 400px;
  text-align: center;
}

.login-container h1 {
  margin-bottom: 2rem;
  color: #2c3e50;
}

.error {
  color: #e74c3c;
  margin-top: 1rem;
}

/* حالات العملاء */
.status {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
}

.status.new { background: var(--brand-blue); color: white; }
.status.in-progress { background: #f39c12; color: white; }
.status.failed { background: #e74c3c; color: white; }
.status.done { background: #27ae60; color: white; }

.assign {
  background: var(--brand-purple);
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
}

.small { 
  font-size: 0.75rem; 
  padding: 0.35rem 0.7rem; 
  font-weight: 600;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.small:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.notes-cell {
  max-width: 150px;
  word-wrap: break-word;
  font-size: 0.85rem;
}

.notes-display {
  display: block;
  margin-bottom: 0.25rem;
}


input[type="url"], input[type="number"] {
  width: 100%;
  padding: 0.4rem;
  margin: 0.2rem 0;
  font-size: 0.8rem;
  border: 1px solid #e6e8f0;
  border-radius: 6px;
}

/* قائمة الصلاحيات */
.permissions-list {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0.75rem;
  background: #f8f9fa;
  margin: 0.5rem 0;
}

.permissions-list label {
  display: block;
  padding: 0.5rem;
  margin: 0.25rem 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.permissions-list label:hover {
  background: #e9ecef;
}

.permissions-list input[type="checkbox"] {
  margin-left: 0.5rem;
  cursor: pointer;
  width: auto;
}

.permissions-list::-webkit-scrollbar {
  width: 8px;
}

.permissions-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.permissions-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.permissions-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* عناوين بشخصية CallVa */
header h1 {
  font-family: 'Cairo', 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #ffffff; /* لتحسين الوضوح على خلفية الهيدر */
  text-shadow: rgba(0,0,0,0.25) 0 2px 8px;
}

.page-title {
  font-family: 'Cairo', 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* لمسات زخرفية على البطاقات */
.stat-card::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(closest-side, rgba(119,0,196,0.18), rgba(46,49,146,0.08), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* شعار نصي صغير يمكن استخدامه عند الحاجة */
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-weight: 700;
}

.brand-badge .icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  border-radius: 6px;
  background: var(--brand-gradient);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6);
}

/* تصغير أزرار عمود الإجراءات بنسبة 25% */
#leadsTable td:last-child button,
#myLeadsTable td:last-child button,
#meetingsTable td:last-child button,
#myMeetingsTable td:last-child button {
  font-size: 0.75rem !important;
  padding: 0.35rem 0.65rem !important;
  display: inline-block !important;
  width: auto !important;
  line-height: 1.1 !important;
}

/* تحسين جميع القوائم المنسدلة في الجداول */
.table-select,
#leadsTable td select,
#myLeadsTable td select,
#meetingsTable td select,
#myMeetingsTable td select {
  font-size: 0.85rem !important;
  padding: 0.4rem 0.6rem !important;
  padding-left: 2.2rem !important;
  padding-right: 0.6rem !important;
  height: auto !important;
  min-height: 2rem !important;
  display: inline-block !important;
  width: auto !important;
  min-width: fit-content !important;
  max-width: 100% !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23666' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 0.6rem center !important;
  background-size: 12px 12px !important;
  text-align: right !important;
  color: #2c3e50 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* القوائم المنسدلة العادية (بدون حالة) */
.table-select:not(.status-select),
#leadsTable td select:not(.status-select),
#myLeadsTable td select:not(.status-select),
#meetingsTable td select:not(.status-select),
#myMeetingsTable td select:not(.status-select) {
  background-color: white !important;
}

.table-select:hover:not(.status-select),
#leadsTable td select:hover:not(.status-select),
#myLeadsTable td select:hover:not(.status-select),
#meetingsTable td select:hover:not(.status-select),
#myMeetingsTable td select:hover:not(.status-select) {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 2px 4px rgba(46, 49, 146, 0.15) !important;
  background-color: #f8f9fc !important;
  transform: translateY(-1px) !important;
}

.status-select:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
  filter: brightness(0.98) !important;
}

.table-select:focus:not(.status-select),
#leadsTable td select:focus:not(.status-select),
#myLeadsTable td select:focus:not(.status-select),
#meetingsTable td select:focus:not(.status-select),
#myMeetingsTable td select:focus:not(.status-select) {
  outline: none !important;
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(46, 49, 146, 0.2) !important;
  background-color: white !important;
}

.status-select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
  filter: brightness(0.95) !important;
}

.table-select:disabled,
#leadsTable td select:disabled,
#myLeadsTable td select:disabled,
#meetingsTable td select:disabled,
#myMeetingsTable td select:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background-color: #f5f5f5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2395a5a6' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
}

/* تحديد عرض القوائم المنسدلة حسب المحتوى */
.table-select option,
#leadsTable td select option,
#myLeadsTable td select option,
#meetingsTable td select option,
#myMeetingsTable td select option {
  padding: 0.5rem 0.7rem !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
  text-align: right !important;
  background: white !important;
  color: #2c3e50 !important;
}

.table-select option:hover,
#leadsTable td select option:hover,
#myLeadsTable td select option:hover,
#meetingsTable td select option:hover,
#myMeetingsTable td select option:hover {
  background: #f8f9fc !important;
  color: var(--brand-blue) !important;
}

.table-select option:checked,
#leadsTable td select option:checked,
#myLeadsTable td select option:checked,
#meetingsTable td select option:checked,
#myMeetingsTable td select option:checked {
  background: var(--brand-blue) !important;
  color: white !important;
}

/* القوائم المنسدلة في قوائم الإجراءات يجب أن تبقى width:100% */
.actions-menu-dropdown select {
  width: 100% !important;
}

/* ألوان القوائم المنسدلة حسب الحالة - حالة الرد (تصميم خفيف) */
.status-select[data-status-type="response"][data-status="لم يتم المحاوله"] {
  background-color: #f8f9fa !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%237f8c8d' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  color: #7f8c8d !important;
  border-color: #7f8c8d !important;
  box-shadow: 0 1px 3px rgba(127, 140, 141, 0.15) !important;
}

.status-select[data-status-type="response"][data-status="لم يتم المحاوله"] option {
  background: white !important;
  color: #2c3e50 !important;
}

.status-select[data-status-type="response"][data-status="تم الرد"] {
  background-color: #e8f5e9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2327ae60' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  color: #27ae60 !important;
  border-color: #27ae60 !important;
  box-shadow: 0 1px 3px rgba(39, 174, 96, 0.15) !important;
}

.status-select[data-status-type="response"][data-status="تم الرد"] option {
  background: white !important;
  color: #2c3e50 !important;
}

.status-select[data-status-type="response"][data-status="لم يتم الرد"] {
  background-color: #fff3e0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23e67e22' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  color: #e67e22 !important;
  border-color: #e67e22 !important;
  box-shadow: 0 1px 3px rgba(230, 126, 34, 0.15) !important;
}

.status-select[data-status-type="response"][data-status="لم يتم الرد"] option {
  background: white !important;
  color: #2c3e50 !important;
}

.status-select[data-status-type="response"][data-status="اعاده التواصل"] {
  background-color: #f3e5f5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%238e44ad' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  color: #8e44ad !important;
  border-color: #8e44ad !important;
  box-shadow: 0 1px 3px rgba(142, 68, 173, 0.15) !important;
}

.status-select[data-status-type="response"][data-status="اعاده التواصل"] option {
  background: white !important;
  color: #2c3e50 !important;
}

/* ألوان القوائم المنسدلة حسب الحالة - حالة التحويل (تصميم خفيف) */
.status-select[data-status-type="conversion"][data-status="failed"] {
  background-color: #ffebee !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23e74c3c' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  color: #e74c3c !important;
  border-color: #e74c3c !important;
  box-shadow: 0 1px 3px rgba(231, 76, 60, 0.15) !important;
}

.status-select[data-status-type="conversion"][data-status="failed"] option {
  background: white !important;
  color: #2c3e50 !important;
}

.status-select[data-status-type="conversion"][data-status="done"] {
  background-color: #e8f5e9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2327ae60' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  color: #27ae60 !important;
  border-color: #27ae60 !important;
  box-shadow: 0 1px 3px rgba(39, 174, 96, 0.15) !important;
}

.status-select[data-status-type="conversion"][data-status="done"] option {
  background: white !important;
  color: #2c3e50 !important;
}

/* ألوان القوائم المنسدلة حسب الحالة - حالة الاجتماع (تصميم خفيف) */
.status-select[data-status-type="meeting"][data-status="new"],
.status-select[data-status-type="meeting"][data-status="in-progress"] {
  background-color: #e3f2fd !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%232E3192' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  color: #2E3192 !important;
  border-color: #2E3192 !important;
  box-shadow: 0 1px 3px rgba(46, 49, 146, 0.15) !important;
}

.status-select[data-status-type="meeting"][data-status="new"] option,
.status-select[data-status-type="meeting"][data-status="in-progress"] option {
  background: white !important;
  color: #2c3e50 !important;
}

.status-select[data-status-type="meeting"][data-status="follow-up"] {
  background-color: #fff3e0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23e67e22' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  color: #e67e22 !important;
  border-color: #e67e22 !important;
  box-shadow: 0 1px 3px rgba(230, 126, 34, 0.15) !important;
}

.status-select[data-status-type="meeting"][data-status="follow-up"] option {
  background: white !important;
  color: #2c3e50 !important;
}

.status-select[data-status-type="meeting"][data-status="failed"] {
  background-color: #ffebee !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23e74c3c' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  color: #e74c3c !important;
  border-color: #e74c3c !important;
  box-shadow: 0 1px 3px rgba(231, 76, 60, 0.15) !important;
}

.status-select[data-status-type="meeting"][data-status="failed"] option {
  background: white !important;
  color: #2c3e50 !important;
}

.status-select[data-status-type="meeting"][data-status="done"] {
  background-color: #e8f5e9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2327ae60' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  color: #27ae60 !important;
  border-color: #27ae60 !important;
  box-shadow: 0 1px 3px rgba(39, 174, 96, 0.15) !important;
}

.status-select[data-status-type="meeting"][data-status="done"] option {
  background: white !important;
  color: #2c3e50 !important;
}

/* تحديث الألوان عند تغيير القائمة المنسدلة */
.status-select:focus {
  box-shadow: 0 0 0 3px rgba(46, 49, 146, 0.2) !important;
}

.status-select option {
  background: white !important;
  color: #2c3e50 !important;
}

/* واجهة الإشعارات - تحسينات محسنة */
#notifBell {
  position: relative;
}

.notif-bell-btn {
  position: relative;
  background: var(--brand-gradient);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-bell-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(119, 0, 196, 0.3);
}

.notif-bell-btn.has-unread {
  animation: bellPulse 2s ease-in-out infinite;
}

@keyframes bellPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.bell-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.notif-bell-btn:hover .bell-icon {
  transform: rotate(-10deg);
}

.notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #e74c3c;
  color: #fff;
  border-radius: 999px;
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
  font-weight: bold;
  min-width: 18px;
  text-align: center;
  display: none;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
  border: 2px solid #fff;
  z-index: 10;
}

.notif-badge.has-notifications {
  animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.notif-dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 2.5rem;
  min-width: 320px;
  max-width: 400px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  border-radius: 12px;
  overflow: hidden;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.notif-dropdown.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f6f7fb;
  border-bottom: 1px solid #e0e0e0;
}

.notif-header strong {
  font-size: 1rem;
  color: #2c3e50;
  font-weight: 700;
}

.notif-header-actions {
  display: flex;
  gap: 0.5rem;
}

.notif-action-btn {
  background: var(--brand-blue);
  color: #000000 !important;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(46, 49, 146, 0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.notif-action-btn:hover {
  background: var(--brand-purple);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(119, 0, 196, 0.3);
}

.notif-filters {
  padding: 0.75rem;
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
}

.notif-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.notif-search:focus {
  outline: none;
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(119, 0, 196, 0.1);
}

.notif-filter-tabs {
  display: flex;
  gap: 0.5rem;
}

.notif-filter-tab {
  flex: 1;
  padding: 0.4rem 0.75rem;
  border: 1px solid #ddd;
  background: #fff;
  color: #2c3e50 !important;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s ease;
  font-weight: 500;
}

.notif-filter-tab:hover {
  background: #f0f0f0;
  color: #2c3e50 !important;
}

.notif-filter-tab.active {
  background: var(--brand-gradient);
  color: #fff !important;
  border-color: var(--brand-purple);
}

.notif-list {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #999;
}

.notif-empty svg {
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.notif-empty p {
  margin: 0;
  font-size: 0.9rem;
}

.notif-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.notif-item:hover {
  background: #f8f9fa;
}

.notif-item.unread {
  background: #f3f6ff;
  border-right: 3px solid var(--brand-purple);
}

.notif-item.read {
  background: #ffffff;
  opacity: 0.85;
}

.notif-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  color: var(--brand-purple);
  opacity: 0.9;
}

body.dark-mode .notif-icon {
  color: var(--brand-purple);
  opacity: 1;
}

.notif-content {
  flex: 1;
  min-width: 0;
}

.notif-message {
  font-size: 0.9rem;
  color: #000000;
  margin-bottom: 0.4rem;
  line-height: 1.4;
  word-wrap: break-word;
  font-weight: 500;
}

.notif-item.read .notif-message {
  color: #000000;
  font-weight: 400;
}

.notif-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.notif-time {
  color: #000000;
  font-size: 0.75rem;
  font-weight: 500;
}

.notif-actions {
  display: flex;
  gap: 0.4rem;
}

.notif-mark-read-btn,
.notif-delete-btn {
  background: rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.2);
  color: #2c3e50 !important;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.notif-mark-read-btn {
  background: rgba(39, 174, 96, 0.15);
  border-color: rgba(39, 174, 96, 0.3);
  color: #27ae60 !important;
}

.notif-mark-read-btn:hover {
  background: #27ae60;
  color: #fff !important;
  border-color: #27ae60;
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(39, 174, 96, 0.3);
}

.notif-delete-btn {
  background: rgba(231, 76, 60, 0.15);
  border-color: rgba(231, 76, 60, 0.3);
  color: #e74c3c !important;
}

.notif-delete-btn:hover {
  background: #e74c3c;
  color: #fff !important;
  border-color: #e74c3c;
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(231, 76, 60, 0.3);
}

/* Dark Mode - الإشعارات */
body.dark-mode .notif-bell-btn {
  background: var(--brand-gradient);
}

body.dark-mode .notif-action-btn {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 2px 6px rgba(119, 0, 196, 0.3) !important;
}

body.dark-mode .notif-action-btn:hover {
  background: var(--brand-purple) !important;
  box-shadow: 0 4px 10px rgba(119, 0, 196, 0.4) !important;
}

body.dark-mode .notif-dropdown {
  background: var(--surface) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

body.dark-mode .notif-header {
  background: var(--surface-alt) !important;
  border-bottom-color: rgba(255,255,255,0.1);
}

body.dark-mode .notif-header strong {
  color: var(--text-dark) !important;
  font-weight: 700;
}

body.dark-mode .notif-filters {
  background: var(--surface-alt) !important;
  border-bottom-color: rgba(255,255,255,0.1);
}

body.dark-mode .notif-search {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode .notif-search:focus {
  border-color: var(--brand-purple) !important;
}

body.dark-mode .notif-filter-tab {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode .notif-filter-tab:hover {
  background: var(--surface-alt) !important;
}

body.dark-mode .notif-filter-tab.active {
  background: var(--brand-gradient) !important;
  color: #fff !important;
}

body.dark-mode .notif-item {
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode .notif-item:hover {
  background: var(--surface-alt) !important;
}

body.dark-mode .notif-item.unread {
  background: rgba(119, 0, 196, 0.15) !important;
  border-right-color: var(--brand-purple) !important;
}

body.dark-mode .notif-item.read {
  background: var(--surface) !important;
  opacity: 0.7;
}

body.dark-mode .notif-message {
  color: var(--text-dark) !important;
  font-weight: 500;
}

body.dark-mode .notif-item.read .notif-message {
  color: var(--text-muted) !important;
  font-weight: 400;
}

body.dark-mode .notif-time {
  color: var(--text-muted) !important;
  font-weight: 500;
}

body.dark-mode .notif-mark-read-btn,
body.dark-mode .notif-delete-btn {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: var(--text-dark) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

body.dark-mode .notif-mark-read-btn:hover {
  background: #27ae60 !important;
  color: #fff !important;
}

body.dark-mode .notif-delete-btn:hover {
  background: #e74c3c !important;
  color: #fff !important;
}

body.dark-mode .notif-empty {
  color: var(--text-muted) !important;
}

body.dark-mode .notif-empty svg {
  color: var(--text-muted) !important;
}

/* قائمة منسدلة للأزرار في عمود الإجراءات */
.actions-menu {
  position: relative;
  display: inline-block;
}

.actions-menu-btn {
  background: var(--brand-gradient);
  color: white;
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: var(--shadow);
  min-width: 40px;
  text-align: center;
}

.actions-menu-btn:hover {
  filter: brightness(1.1);
}

.actions-menu-dropdown {
  display: none;
  position: absolute;
  background: white;
  min-width: 180px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 9999; /* للتأكد من ظهورها فوق النوافذ المنبثقة الأخرى */
  border-radius: 8px;
  overflow: hidden;
  left: 0;
  top: 100%;
  margin-top: 0.25rem;
  direction: rtl;
}

.actions-menu-dropdown.show {
  display: block;
}

.actions-menu-dropdown button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0.85rem 1.2rem;
  text-align: right;
  border: none;
  background: white;
  color: #2c3e50 !important;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  border-bottom: 1px solid #e8eaf0;
  transition: all 0.2s ease;
  box-shadow: none;
  margin: 0;
  border-radius: 0;
  gap: 0.75rem;
  position: relative;
}

.actions-menu-dropdown button:last-child {
  border-bottom: none;
}

.actions-menu-dropdown button:hover:not(:disabled) {
  background: linear-gradient(90deg, #f8f9fc 0%, #f0f2f7 100%);
  color: var(--brand-blue);
  padding-right: 1.5rem;
  transform: translateX(-3px);
  box-shadow: inset 3px 0 0 var(--brand-purple);
  font-weight: 700;
}

.actions-menu-dropdown button:active:not(:disabled) {
  background: #eef3ff;
  transform: translateX(-1px);
}

.actions-menu-dropdown button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #fafbfc;
  color: #95a5a6;
  font-weight: 400;
}

/* تحسين الأزرار الخاصة (تعديل، تفاصيل، إلخ) - ألوان مميزة حسب الحالة */

/* أزرار التعديل - أزرق */
.actions-menu-dropdown button[onclick*="showEditLeadModal"],
.actions-menu-dropdown button[onclick*="showEditNotesModal"],
.actions-menu-dropdown button[onclick*="openMeetingDetailsForMyMeeting"],
.actions-menu-dropdown button[onclick*="viewMeetingDetails"],
.actions-menu-dropdown button[onclick*="openMeetingDetailsForEdit"],
.actions-menu-dropdown button[onclick*="openMeetingDetailsForLead"] {
  color: #2E3192 !important;
  border-left: 3px solid #2E3192;
  font-weight: 600;
}

.actions-menu-dropdown button[onclick*="showEditLeadModal"]:hover:not(:disabled),
.actions-menu-dropdown button[onclick*="showEditNotesModal"]:hover:not(:disabled),
.actions-menu-dropdown button[onclick*="openMeetingDetailsForMyMeeting"]:hover:not(:disabled),
.actions-menu-dropdown button[onclick*="viewMeetingDetails"]:hover:not(:disabled),
.actions-menu-dropdown button[onclick*="openMeetingDetailsForEdit"]:hover:not(:disabled),
.actions-menu-dropdown button[onclick*="openMeetingDetailsForLead"]:hover:not(:disabled) {
  background: linear-gradient(90deg, #e8ecf5 0%, #d6dcef 100%) !important;
  color: #1a1f5c !important;
}

/* أزرار المتابعة والتخصيص - أخضر */
.actions-menu-dropdown button[onclick*="assignToMe"],
.actions-menu-dropdown button[onclick*="assignMeeting"] {
  color: #27ae60 !important;
  border-left: 3px solid #27ae60;
  font-weight: 600;
}

.actions-menu-dropdown button[onclick*="assignToMe"]:hover:not(:disabled),
.actions-menu-dropdown button[onclick*="assignMeeting"]:hover:not(:disabled) {
  background: linear-gradient(90deg, #d5f4e6 0%, #b8e6d1 100%) !important;
  color: #1e8449 !important;
}

/* أزرار التحويل - أخضر فاتح */
.actions-menu-dropdown button[onclick*="startMeetingConversion"] {
  color: #2ecc71 !important;
  border-left: 3px solid #2ecc71;
  font-weight: 600;
}

.actions-menu-dropdown button[onclick*="startMeetingConversion"]:hover:not(:disabled) {
  background: linear-gradient(90deg, #d5f4e6 0%, #b8e6d1 100%) !important;
  color: #27ae60 !important;
}

/* أزرار تفاصيل الاجتماع - أزرق فاتح */
.actions-menu-dropdown button[onclick*="openMeetingDetailsForLead"] {
  color: #3498db !important;
  border-left: 3px solid #3498db;
  font-weight: 600;
}

.actions-menu-dropdown button[onclick*="openMeetingDetailsForLead"]:hover:not(:disabled) {
  background: linear-gradient(90deg, #e3f2fd 0%, #bbdefb 100%) !important;
  color: #1976d2 !important;
}

/* أزرار دخول الاجتماع - أخضر */
.actions-menu-dropdown button[onclick*="window.open"] {
  color: #27ae60 !important;
  border-left: 3px solid #27ae60;
  font-weight: 600;
}

.actions-menu-dropdown button[onclick*="window.open"]:hover:not(:disabled) {
  background: linear-gradient(90deg, #d5f4e6 0%, #b8e6d1 100%) !important;
  color: #1e8449 !important;
}

/* أزرار تسجيل اجتماع جديد - برتقالي */
.actions-menu-dropdown button[onclick*="registerNewMeetingFromFailed"] {
  color: #e67e22 !important;
  border-left: 3px solid #e67e22;
  font-weight: 600;
}

.actions-menu-dropdown button[onclick*="registerNewMeetingFromFailed"]:hover:not(:disabled) {
  background: linear-gradient(90deg, #fde4d1 0%, #fcd5b4 100%) !important;
  color: #d35400 !important;
}

/* أزرار الإرجاع - أصفر/برتقالي */
.actions-menu-dropdown button[onclick*="returnMeetingToPool"] {
  color: #f39c12 !important;
  border-left: 3px solid #f39c12;
  font-weight: 600;
}

.actions-menu-dropdown button[onclick*="returnMeetingToPool"]:hover:not(:disabled) {
  background: linear-gradient(90deg, #fef5e7 0%, #fdebd0 100%) !important;
  color: #e67e22 !important;
}

/* أزرار القفل - أخضر داكن */
.actions-menu-dropdown button[onclick*="lockMeeting"] {
  color: #16a085 !important;
  border-left: 3px solid #16a085;
  font-weight: 600;
}

.actions-menu-dropdown button[onclick*="lockMeeting"]:hover:not(:disabled) {
  background: linear-gradient(90deg, #d1f2eb 0%, #a3e4d7 100%) !important;
  color: #138d75 !important;
}

/* أزرار التوجيه داخل القوائم المنسدلة - بنفسجي */
.actions-menu-dropdown > div button[onclick*="assignLeadToUser"],
.actions-menu-dropdown > div button[onclick*="assignMeetingToUser"] {
  background: #9b59b6 !important;
  color: #fff !important;
  border: none !important;
  border-left: 3px solid #8e44ad !important;
  font-weight: 600;
}

.actions-menu-dropdown > div button[onclick*="assignLeadToUser"]:hover:not(:disabled),
.actions-menu-dropdown > div button[onclick*="assignMeetingToUser"]:hover:not(:disabled) {
  background: #8e44ad !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
}

/* أزرار معطلة - رمادي */
.actions-menu-dropdown button:disabled {
  color: #95a5a6 !important;
  border-left: 3px solid #bdc3c7 !important;
  background: #f8f9fa !important;
  opacity: 0.6;
  cursor: not-allowed;
  font-weight: 400;
}

/* تحسينات للوضع الداكن */
body.dark-mode .actions-menu-dropdown {
  background: var(--surface) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4) !important;
}

body.dark-mode .actions-menu-dropdown button {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode .actions-menu-dropdown button:hover:not(:disabled) {
  background: var(--surface-alt) !important;
}

body.dark-mode .actions-menu-dropdown button:disabled {
  background: var(--surface-alt) !important;
  color: var(--text-muted) !important;
  opacity: 0.5;
}

body.dark-mode .actions-menu-dropdown > div {
  background: var(--surface-alt) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

body.dark-mode .actions-menu-dropdown > div select {
  background: var(--surface) !important;
  color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* ===== ألوان الأزرار في البوب أب (Modal) ===== */
.details-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* أزرار التعديل في البوب أب - أزرق */
.details-actions-inline .btn[onclick*="showEditLeadModal"],
.details-actions-inline .btn[onclick*="openMeetingDetailsForEdit"] {
  background: #2E3192 !important;
  color: #ffffff !important;
  border: 2px solid #1a1f5c !important;
  box-shadow: 0 3px 10px rgba(46, 49, 146, 0.3) !important;
}

.details-actions-inline .btn[onclick*="showEditLeadModal"]:hover:not(:disabled),
.details-actions-inline .btn[onclick*="openMeetingDetailsForEdit"]:hover:not(:disabled) {
  background: #1a1f5c !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(46, 49, 146, 0.4) !important;
}

/* أزرار التحويل إلى ميتنج - أخضر فاتح */
.details-actions-inline .btn[onclick*="startMeetingConversion"] {
  background: #2ecc71 !important;
  color: #ffffff !important;
  border: 2px solid #27ae60 !important;
  box-shadow: 0 3px 10px rgba(46, 204, 113, 0.3) !important;
}

.details-actions-inline .btn[onclick*="startMeetingConversion"]:hover:not(:disabled) {
  background: #27ae60 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4) !important;
}

/* أزرار تفاصيل الاجتماع - أزرق فاتح */
.details-actions-inline .btn[onclick*="openMeetingDetailsForLead"],
.details-actions-inline .btn[onclick*="viewMeetingDetails"],
.details-actions-inline .btn[onclick*="openMeetingDetailsForMyMeeting"],
.details-actions-inline .btn[onclick*="viewMeetingDetailsLocked"] {
  background: #3498db !important;
  color: #ffffff !important;
  border: 2px solid #2980b9 !important;
  box-shadow: 0 3px 10px rgba(52, 152, 219, 0.3) !important;
}

.details-actions-inline .btn[onclick*="openMeetingDetailsForLead"]:hover:not(:disabled),
.details-actions-inline .btn[onclick*="viewMeetingDetails"]:hover:not(:disabled),
.details-actions-inline .btn[onclick*="openMeetingDetailsForMyMeeting"]:hover:not(:disabled),
.details-actions-inline .btn[onclick*="viewMeetingDetailsLocked"]:hover:not(:disabled) {
  background: #2980b9 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4) !important;
}

/* أزرار دخول الاجتماع - أخضر */
.details-actions-inline .btn[onclick*="window.open"] {
  background: #27ae60 !important;
  color: #ffffff !important;
  border: 2px solid #1e8449 !important;
  box-shadow: 0 3px 10px rgba(39, 174, 96, 0.3) !important;
}

.details-actions-inline .btn[onclick*="window.open"]:hover:not(:disabled) {
  background: #1e8449 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4) !important;
}

/* أزرار تسجيل اجتماع جديد - برتقالي */
.details-actions-inline .btn[onclick*="registerNewMeetingFromFailed"] {
  background: #e67e22 !important;
  color: #ffffff !important;
  border: 2px solid #d35400 !important;
  box-shadow: 0 3px 10px rgba(230, 126, 34, 0.3) !important;
}

.details-actions-inline .btn[onclick*="registerNewMeetingFromFailed"]:hover:not(:disabled) {
  background: #d35400 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(230, 126, 34, 0.4) !important;
}

/* أزرار الإرجاع - أصفر/برتقالي */
.details-actions-inline .btn[onclick*="returnMeetingToPool"] {
  background: #f39c12 !important;
  color: #ffffff !important;
  border: 2px solid #e67e22 !important;
  box-shadow: 0 3px 10px rgba(243, 156, 18, 0.3) !important;
}

.details-actions-inline .btn[onclick*="returnMeetingToPool"]:hover:not(:disabled) {
  background: #e67e22 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(243, 156, 18, 0.4) !important;
}

/* أزرار القفل - أخضر داكن */
.details-actions-inline .btn[onclick*="lockMeeting"] {
  background: #16a085 !important;
  color: #ffffff !important;
  border: 2px solid #138d75 !important;
  box-shadow: 0 3px 10px rgba(22, 160, 133, 0.3) !important;
}

.details-actions-inline .btn[onclick*="lockMeeting"]:hover:not(:disabled) {
  background: #138d75 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(22, 160, 133, 0.4) !important;
}

/* أزرار حفظ الملاحظات - أخضر */
.details-actions-inline .btn[onclick*="saveNotesFromDetailsModal"] {
  background: #27ae60 !important;
  color: #ffffff !important;
  border: 2px solid #1e8449 !important;
  box-shadow: 0 3px 10px rgba(39, 174, 96, 0.3) !important;
}

.details-actions-inline .btn[onclick*="saveNotesFromDetailsModal"]:hover:not(:disabled) {
  background: #1e8449 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4) !important;
}

/* أزرار معطلة - رمادي */
.details-actions-inline .btn:disabled {
  background: #95a5a6 !important;
  color: #ffffff !important;
  border: 2px solid #7f8c8d !important;
  box-shadow: 0 2px 5px rgba(149, 165, 166, 0.2) !important;
  opacity: 0.6;
  cursor: not-allowed;
}

/* تحسينات للوضع الداكن */
body.dark-mode .details-actions-inline .btn {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .details-actions-inline .btn:hover:not(:disabled) {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .details-actions-inline .btn:disabled {
  background: #7f8c8d !important;
  border-color: #95a5a6 !important;
  opacity: 0.5;
}

/* تحسين الأقسام الخاصة (مثل التوجيه) */
.actions-menu-dropdown > div {
  padding: 0.75rem;
  background: #f8f9fc;
  border-bottom: 1px solid #e8eaf0;
  border-top: 1px solid #e8eaf0;
  margin: 0.25rem 0;
}

.actions-menu-dropdown > div:first-child {
  border-top: none;
}

.actions-menu-dropdown > div:last-child {
  border-bottom: none;
}

.actions-menu-dropdown > div select {
  width: 100%;
  padding: 0.6rem;
  margin-bottom: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  background: white;
  transition: border-color 0.2s;
}

.actions-menu-dropdown > div select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(46, 49, 146, 0.1);
}

.actions-menu-dropdown > div button {
  width: 100% !important;
  padding: 0.7rem !important;
  background: var(--brand-gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  display: block !important;
  text-align: center !important;
  margin: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
  align-items: center !important;
}

.actions-menu-dropdown > div button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
  filter: brightness(1.05) !important;
  background: var(--brand-gradient) !important;
  color: #fff !important;
  padding-right: 0.7rem !important;
}

.actions-menu-dropdown > div button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* تحسين القائمة المنسدلة بشكل عام */
.actions-menu-dropdown {
  border: 1px solid #e0e4e8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* إضافة تأثير للزر الرئيسي */
.actions-menu-btn:focus {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* صفحة التحميل */
#loadingPage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-blue) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#loadingPage.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1.5rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  margin-top: 1rem;
}

.loading-logo {
  margin-bottom: 2rem;
}

.loading-logo img {
  height: 50px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* ============================================
   Responsive Design - Media Queries
   ============================================ */

/* Large screens (desktops) - default styles apply */

/* MacBook 13" and similar laptops (1280px - 1440px) */
@media screen and (min-width: 1280px) and (max-width: 1440px) {
  main {
    padding: 1.75rem;
  }
  
  .stats {
    grid-template-columns: repeat(4, 1fr);
    /* Ensure 4 items per row if possible */
    gap: 1rem;
  }
  
  .stat-card {
    padding: 1.25rem;
  }
  
  table {
    font-size: 0.9rem;
  }
  
  th, td {
    padding: 0.85rem 0.6rem;
  }
  
  .navbar a {
    margin: 0 0.6rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.9rem;
  }
  
  header h1 {
    font-size: 1.4rem;
  }
  
  .modal-content {
    max-width: 550px;
    padding: 1.75rem;
  }
}

/* Medium screens (tablets and small laptops) */
@media screen and (max-width: 1279px) {
  main {
    padding: 1.5rem;
  }
  
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
  
  .stat-card {
    min-width: 180px;
    padding: 1.25rem;
  }
  
  table {
    font-size: 0.9rem;
  }
  
  th, td {
    padding: 0.75rem 0.5rem;
  }
  
  .navbar a {
    margin: 0 0.5rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
  }
  
  header h1 {
    font-size: 1.3rem;
  }
  
  .brand-logo img {
    height: 28px;
  }
  
  .user-info {
    font-size: 0.85rem;
  }
  
  .user-info button {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  }
  
  .modal-content {
    max-width: 500px;
    padding: 1.5rem;
  }
}

/* Small screens (tablets and mobile phones) */
@media screen and (max-width: 768px) {

  /* Header adjustments */
  /* Header adjustments */
  header {
    padding: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  header h1 {
    font-size: 1.1rem;
    margin: 0.5rem 0;
    order: 2;
    line-height: 1.4;
  }
  
  .brand-logo {
    position: relative;
    right: auto;
    top: auto;
    justify-content: center;
    margin-bottom: 0;
    order: 1;
  }
  
  .brand-logo img {
    height: 24px;
  }
  
  .user-info {
    position: relative;
    left: auto;
    top: auto;
    text-align: center;
    margin-top: 0;
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }
  
  .user-info span {
    font-size: 0.85rem;
  }
  
  .user-info button {
    margin-right: 0;
    margin-top: 0;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
  
  /* Navigation adjustments */
  .navbar {
    padding: 0.75rem 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;
    /* Align start to allow scroll */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    display: flex;
    gap: 0.5rem;
  }
  
  .navbar::-webkit-scrollbar {
    height: 4px;
  }
  
  .navbar::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .navbar::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
  }
  
  .navbar a {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  /* Main content */
  main {
    padding: 1rem;
  }
  
  h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  
  /* Stats cards */
  .stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .stat-card {
    min-width: 100%;
    padding: 1.25rem;
  }
  
  .stat-card p {
    font-size: 1.75rem;
  }
  
  /* Tables - make scrollable */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin: 0;
  }
  
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.8rem;
    width: 100%;
    min-width: 600px;
  }
  
  thead {
    display: table-header-group;
  }
  
  tbody {
    display: table-row-group;
  }
  
  tr {
    display: table-row;
  }
  
  th, td {
    padding: 0.5rem 0.4rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  
  /* Buttons */
  .add-btn {
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  button {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    margin: 0.25rem 0.15rem;
  }
  
  /* Modals */
  .modal {
    padding: 0.5rem;
  }
  
  .modal-content {
    width: 95%;
    max-width: 95%;
    margin: 2% auto;
    padding: 1.5rem;
    max-height: 95vh;
    overflow-y: auto;
  }
  
  form input, 
  form select, 
  form textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.75rem;
  }
  
  /* Filter sections */
  #leadsFilters,
  #myLeadsFilters,
  #meetingsFilters,
  #myMeetingsFilters {
    padding: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    display: flex;
    align-items: center;
  }
  
  #leadsFilters > *,
  #myLeadsFilters > *,
  #meetingsFilters > *,
  #myMeetingsFilters > * {
    margin: 0;
    font-size: 0.85rem;
    flex: 1 1 auto;
    min-width: 120px;
  }
  
  #leadsFilters select,
  #myLeadsFilters select,
  #meetingsFilters select,
  #myMeetingsFilters select,
  #leadsFilters input,
  #myLeadsFilters input,
  #meetingsFilters input,
  #myMeetingsFilters input {
    width: 100%;
    padding: 0.6rem;
  }
  
  #leadsFilters button,
  #myLeadsFilters button,
  #meetingsFilters button,
  #myMeetingsFilters button {
    flex: 1 1 100%;
    margin-top: 0.5rem;
  }
  
  /* Actions menu */
  .actions-menu-dropdown {
    position: fixed;
    right: 1rem;
    left: 1rem;
    width: auto;
    max-width: calc(100% - 2rem);
    max-height: 70vh;
    overflow-y: auto;
  }
  
  /* Notes cells */
  .notes-cell {
    max-width: 150px;
    font-size: 0.75rem;
  }
  
  /* Login page */
  .login-container {
    width: 90%;
    max-width: 90%;
    padding: 1.5rem;
  }
  
  /* Dashboard stats */
  .dashboard .stats {
    grid-template-columns: 1fr;
  }
  
  /* Toast notifications */
  .toast-container {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 1rem;
  }
  
  .toast {
    min-width: auto;
    max-width: 100%;
    width: 100%;
  }
  
  /* Theme toggle button */
  .theme-toggle-btn {
    bottom: 1rem;
    left: 1rem;
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }
  
  /* Import progress modal */
  .import-progress-content {
    min-width: 90%;
    max-width: 90%;
    padding: 1.5rem;
  }
}

/* Extra small screens (small mobile phones) */
@media screen and (max-width: 480px) {
  header {
    padding: 0.5rem;
  }
  
  header h1 {
    font-size: 1rem;
    margin: 0.25rem 0;
  }
  
  .brand-logo img {
    height: 20px;
  }
  
  .user-info {
    font-size: 0.8rem;
  }
  
  .user-info button {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
  
  .navbar {
    padding: 0.5rem;
  }
  
  .navbar a {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
  }
  
  main {
    padding: 0.75rem;
  }
  
  h2 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-card h3 {
    font-size: 0.9rem;
  }
  
  .stat-card p {
    font-size: 1.5rem;
  }
  
  th, td {
    padding: 0.4rem 0.3rem;
    font-size: 0.75rem;
  }
  
  .modal-content {
    padding: 1rem;
    margin: 1% auto;
    width: 98%;
    max-width: 98%;
  }
  
  .add-btn {
    font-size: 0.85rem;
    padding: 0.6rem;
  }
  
  button {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    margin: 0.2rem 0.1rem;
  }
  
  form input, 
  form select, 
  form textarea {
    padding: 0.65rem;
    font-size: 16px;
  }
  
  #leadsFilters,
  #myLeadsFilters,
  #meetingsFilters,
  #myMeetingsFilters {
    padding: 0.5rem;
  }
  
  #leadsFilters > *,
  #myLeadsFilters > *,
  #meetingsFilters > *,
  #myMeetingsFilters > * {
    font-size: 0.8rem;
    min-width: 100px;
  }
  
  /* Hide less important columns on very small screens */
  .notes-cell {
    display: none;
  }
  
  .actions-menu-btn {
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    min-width: 35px;
  }
  
  .theme-toggle-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    bottom: 0.75rem;
    left: 0.75rem;
  }
}

/* Landscape orientation on mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
  header {
    padding: 0.5rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  header h1 {
    font-size: 1rem;
    margin: 0;
    order: 2;
  }
  
  .brand-logo {
    order: 1;
    margin-bottom: 0;
  }
  
  .user-info {
    order: 3;
    flex-direction: row;
    gap: 0.5rem;
    width: auto;
  }
  
  .navbar {
    padding: 0.5rem;
  }
  
  main {
    padding: 0.75rem;
  }
  
  .modal-content {
    margin: 1% auto;
    max-height: 90vh;
  }
}

/* High DPI / Retina displays */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .brand-logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  button,
  .add-btn,
  .navbar a {
    min-height: 44px;
    min-width: 44px;
  }
  
  .actions-menu-btn {
    min-height: 40px;
    min-width: 40px;
  }
  
  th, td {
    padding: 0.75rem 0.5rem;
  }
  
  .table-select,
  #leadsTable td select,
  #myLeadsTable td select,
  #meetingsTable td select,
  #myMeetingsTable td select {
    min-height: 44px;
    padding: 0.6rem 0.8rem;
  }
}

/* Print styles */
@media print {
  header,
  .navbar,
  .add-btn,
  button,
  .actions-menu-dropdown {
    display: none;
  }
  
  main {
    padding: 0;
  }
  
  table {
    box-shadow: none;
  }
}