/* ========================================
   Enhanced Dark Mode Support
   תמיכה משופרת ב-Dark Mode
   ======================================== */

@layer theme {
/* ===== Dark Mode Toggle Button ===== */
.dark-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dark-mode-toggle:hover {
  background-color: var(--bg-secondary);
  border-color: var(--border-secondary);
}

.dark-mode-toggle:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.dark-mode-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Hide sun icon in dark mode */
.dark .dark-mode-toggle .sun-icon {
  display: none;
}

/* Hide moon icon in light mode */
.dark-mode-toggle .moon-icon {
  display: none;
}

.dark .dark-mode-toggle .moon-icon {
  display: block;
}

/* ===== Smooth Transition ===== */
/* הוסר: קוד כפיה גלובלי - transitions יוגדרו על אלמנטים ספציפיים בלבד */
/* אלמנטים שצריכים transitions כבר מוגדרים עם transition properties שלהם */

/* ===== Dark Mode Specific Adjustments ===== */
.dark,
[data-theme="dark"],
[data-theme="dark"] body {
  /* Ensure all backgrounds use dark mode colors */
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.dark body,
[data-theme="dark"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* ===== Dark Mode for Cards ===== */
/* הכללים הבאים חלים על כל הכרטיסים */
/* הכללים הספציפיים לטבלאות נמצאים ב-@layer overrides וידרסו את הכללים האלה */
.dark .card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
  color: var(--text-primary);
}

.dark .card-header {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

/* חריגה ל-project-header-custom - עיצוב גלובלי לטפסים - רקע כהה עם טקסט לבן (מבוסס על project-card-header מהגיבוי) */
.dark .card-header.project-header-custom,
.dark .form-card .card-header.project-header-custom {
  background: var(--secondary-800); /* רקע כהה - במקום var(--project-bg-dark) */
  color: var(--text-inverse); /* טקסט לבן - במקום var(--project-text-on-dark) */
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15); /* var(--project-shadow-lg) */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 4px solid var(--primary-500); /* var(--project-border-primary) */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

.dark .card-header.project-header-custom h1,
.dark .card-header.project-header-custom h1.mb-2,
.dark .form-card .card-header.project-header-custom h1,
.dark .form-card .card-header.project-header-custom h1.mb-2 {
  color: var(--text-inverse); /* var(--project-text-on-dark) */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding-bottom: 12px;
  border-bottom: 3px solid var(--primary-500); /* var(--project-border-primary) */
  display: inline-block;
  margin-bottom: 16px;
}

.dark .card-header.project-header-custom p,
.dark .form-card .card-header.project-header-custom p,
.dark .card-header.project-header-custom .text-dark,
.dark .form-card .card-header.project-header-custom .text-dark,
.dark .card-header.project-header-custom .text-muted,
.dark .form-card .card-header.project-header-custom .text-muted,
.dark .card-header.project-header-custom span:not(.badge),
.dark .form-card .card-header.project-header-custom span:not(.badge),
.dark .card-header.project-header-custom small,
.dark .form-card .card-header.project-header-custom small {
  color: rgba(255, 255, 255, 0.95);
}

.dark .card-header.project-header-custom .badge,
.dark .form-card .card-header.project-header-custom .badge {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-inverse); /* var(--project-text-on-dark) */
  border: 1px solid rgba(255, 255, 255, 0.3);
}

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

.dark .card-footer {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

/* ===== Dark Mode for Buttons ===== */
.dark .btn-primary {
  background-color: var(--primary-500);
  color: var(--text-inverse);
  border-color: var(--primary-500);
}

.dark .btn-primary:hover {
  background-color: var(--primary-400);
  border-color: var(--primary-400);
}

.dark .btn-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.dark .btn-secondary:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--border-secondary);
}

/* ===== Dark Mode for Forms ===== */
.dark .form-input,
.dark .form-select,
.dark .form-textarea {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

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

.dark .form-input:focus,
.dark .form-select:focus,
.dark .form-textarea:focus {
  border-color: var(--input-border-focus);
  background-color: var(--input-bg);
}

.dark .form-label {
  color: var(--text-primary);
}

.dark .form-help {
  color: var(--text-secondary);
}

.dark .form-error {
  color: var(--error-400);
}

} /* סיום @layer theme */

@layer overrides {
/* ===== Dark Mode for Tables ===== */
/* עיצוב מקצועי ואיכותי לטבלאות בעיצוב כהה - בהתאם למשתני העיצוב הכהה של האתר */
/* מבוסס על best practices של עיצוב טבלאות בעיצוב כהה - פלטת צבעים מונוכרומטית מקצועית */
/* הכללים כאן ב-@layer overrides ידרסו את הכללים ב-@layer components ו-@layer base לפי ההיררכיה הנכונה */
/* לפי סדר הטעינה: @layer base → @layer components → @layer overrides */
/* לכן הכללים כאן ידרסו את הכללים הקודמים ללא צורך ב-specificity מורכב */

/* Wrapper של הטבלה - עיצוב מקצועי עם גוונים מדויקים */
body.dark .table-wrapper,
html.dark .table-wrapper,
.dark .table-wrapper,
body.dark .projects-table-wrapper,
html.dark .projects-table-wrapper,
.dark .projects-table-wrapper,
body.dark .employees-table-wrapper,
html.dark .employees-table-wrapper,
.dark .employees-table-wrapper,
body.dark .contracts-table-wrapper,
html.dark .contracts-table-wrapper,
.dark .contracts-table-wrapper,
body.dark .materials-table-wrapper,
html.dark .materials-table-wrapper,
.dark .materials-table-wrapper,
body.dark .worklogs-table-wrapper,
html.dark .worklogs-table-wrapper,
.dark .worklogs-table-wrapper {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  transition: box-shadow 0.3s ease, border-color 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark .table-wrapper:hover,
html.dark .table-wrapper:hover,
.dark .table-wrapper:hover,
body.dark .projects-table-wrapper:hover,
html.dark .projects-table-wrapper:hover,
.dark .projects-table-wrapper:hover,
body.dark .employees-table-wrapper:hover,
html.dark .employees-table-wrapper:hover,
.dark .employees-table-wrapper:hover,
body.dark .contracts-table-wrapper:hover,
html.dark .contracts-table-wrapper:hover,
.dark .contracts-table-wrapper:hover,
body.dark .materials-table-wrapper:hover,
html.dark .materials-table-wrapper:hover,
.dark .materials-table-wrapper:hover,
body.dark .worklogs-table-wrapper:hover,
html.dark .worklogs-table-wrapper:hover,
.dark .worklogs-table-wrapper:hover {
  box-shadow: var(--shadow-strong);
  border-color: var(--border-strong);
}

/* טבלה בסיסית */
body.dark .table,
html.dark .table,
.dark .table,
body.dark .employees-table,
html.dark .employees-table,
.dark .employees-table,
body.dark .contracts-table,
html.dark .contracts-table,
.dark .contracts-table,
body.dark .materials-table,
html.dark .materials-table,
.dark .materials-table,
body.dark .worklogs-table,
html.dark .worklogs-table,
.dark .worklogs-table,
body.dark .projects-table,
html.dark .projects-table,
.dark .projects-table,
body.dark table,
html.dark table,
.dark table {
  color: var(--text-main);
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

/* כותרת הטבלה - gradient כחול מקצועי */
body.dark .table thead,
html.dark .table thead,
.dark .table thead,
body.dark .employees-table thead,
html.dark .employees-table thead,
.dark .employees-table thead,
body.dark .contracts-table thead,
html.dark .contracts-table thead,
.dark .contracts-table thead,
body.dark .materials-table thead,
html.dark .materials-table thead,
.dark .materials-table thead,
body.dark .worklogs-table thead,
html.dark .worklogs-table thead,
.dark .worklogs-table thead,
body.dark .projects-table thead,
html.dark .projects-table thead,
.dark .projects-table thead,
body.dark table thead,
html.dark table thead,
.dark table thead {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

body.dark .table thead tr,
html.dark .table thead tr,
.dark .table thead tr,
body.dark .employees-table thead tr,
html.dark .employees-table thead tr,
.dark .employees-table thead tr,
body.dark .contracts-table thead tr,
html.dark .contracts-table thead tr,
.dark .contracts-table thead tr,
body.dark .materials-table thead tr,
html.dark .materials-table thead tr,
.dark .materials-table thead tr,
body.dark .worklogs-table thead tr,
html.dark .worklogs-table thead tr,
.dark .worklogs-table thead tr,
body.dark .projects-table thead tr,
html.dark .projects-table thead tr,
.dark .projects-table thead tr,
body.dark table thead tr,
html.dark table thead tr,
.dark table thead tr {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

body.dark .table thead th,
html.dark .table thead th,
.dark .table thead th,
body.dark .employees-table thead th,
html.dark .employees-table thead th,
.dark .employees-table thead th,
body.dark .contracts-table thead th,
html.dark .contracts-table thead th,
.dark .contracts-table thead th,
body.dark .materials-table thead th,
html.dark .materials-table thead th,
.dark .materials-table thead th,
body.dark .worklogs-table thead th,
html.dark .worklogs-table thead th,
.dark .worklogs-table thead th,
body.dark .projects-table thead th,
html.dark .projects-table thead th,
.dark .projects-table thead th,
body.dark table thead th,
html.dark table thead th,
.dark table thead th {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--text-on-primary);
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  font-weight: 600;
  letter-spacing: 0.025em;
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
  text-align: right;
  font-size: 0.8125rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  position: relative;
}

body.dark .table thead th:first-child,
html.dark .table thead th:first-child,
.dark .table thead th:first-child {
  border-top-right-radius: var(--radius-lg);
}

body.dark .table thead th:last-child,
html.dark .table thead th:last-child,
.dark .table thead th:last-child {
  border-top-left-radius: var(--radius-lg);
}

/* גוף הטבלה */
body.dark .table tbody,
html.dark .table tbody,
.dark .table tbody,
body.dark .employees-table tbody,
html.dark .employees-table tbody,
.dark .employees-table tbody,
body.dark .contracts-table tbody,
html.dark .contracts-table tbody,
.dark .contracts-table tbody,
body.dark .materials-table tbody,
html.dark .materials-table tbody,
.dark .materials-table tbody,
body.dark .worklogs-table tbody,
html.dark .worklogs-table tbody,
.dark .worklogs-table tbody,
body.dark .projects-table tbody,
html.dark .projects-table tbody,
.dark .projects-table tbody,
body.dark table tbody,
html.dark table tbody,
.dark table tbody {
  background: transparent;
}

/* שורות רגילות - רקע כהה מקצועי עם transition חלק */
/* הכללים כאן ב-@layer overrides ידרסו את הכללים ב-@layer components לפי ההיררכיה הנכונה */
body.dark .table tbody tr,
html.dark .table tbody tr,
.dark .table tbody tr,
body.dark .employees-table tbody tr,
html.dark .employees-table tbody tr,
.dark .employees-table tbody tr,
body.dark .contracts-table tbody tr,
html.dark .contracts-table tbody tr,
.dark .contracts-table tbody tr,
body.dark .materials-table tbody tr,
html.dark .materials-table tbody tr,
.dark .materials-table tbody tr,
body.dark .worklogs-table tbody tr,
html.dark .worklogs-table tbody tr,
.dark .worklogs-table tbody tr,
body.dark .projects-table tbody tr,
html.dark .projects-table tbody tr,
.dark .projects-table tbody tr,
body.dark table tbody tr,
html.dark table tbody tr,
.dark table tbody tr {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s ease;
}

/* שורות זוגיות - רקע כהה יותר */
body.dark .table tbody tr:nth-child(even),
html.dark .table tbody tr:nth-child(even),
.dark .table tbody tr:nth-child(even),
body.dark .employees-table tbody tr:nth-child(even),
html.dark .employees-table tbody tr:nth-child(even),
.dark .employees-table tbody tr:nth-child(even),
body.dark .contracts-table tbody tr:nth-child(even),
html.dark .contracts-table tbody tr:nth-child(even),
.dark .contracts-table tbody tr:nth-child(even),
body.dark .materials-table tbody tr:nth-child(even),
html.dark .materials-table tbody tr:nth-child(even),
.dark .materials-table tbody tr:nth-child(even),
body.dark .worklogs-table tbody tr:nth-child(even),
html.dark .worklogs-table tbody tr:nth-child(even),
.dark .worklogs-table tbody tr:nth-child(even),
body.dark .projects-table tbody tr:nth-child(even),
html.dark .projects-table tbody tr:nth-child(even),
.dark .projects-table tbody tr:nth-child(even),
body.dark .table-striped tbody tr:nth-child(even),
html.dark .table-striped tbody tr:nth-child(even),
.dark .table-striped tbody tr:nth-child(even),
body.dark table tbody tr:nth-child(even),
html.dark table tbody tr:nth-child(even),
.dark table tbody tr:nth-child(even) {
  background: var(--bg-surface-soft);
}

/* Hover - אפקט מקצועי עם transform, shadow ו-border accent */
body.dark .table tbody tr:hover,
html.dark .table tbody tr:hover,
.dark .table tbody tr:hover,
body.dark .table.table-hover tbody tr:hover,
html.dark .table.table-hover tbody tr:hover,
.dark .table.table-hover tbody tr:hover,
body.dark .employees-table tbody tr:hover,
html.dark .employees-table tbody tr:hover,
.dark .employees-table tbody tr:hover,
body.dark .contracts-table tbody tr:hover,
html.dark .contracts-table tbody tr:hover,
.dark .contracts-table tbody tr:hover,
body.dark .materials-table tbody tr:hover,
html.dark .materials-table tbody tr:hover,
.dark .materials-table tbody tr:hover,
body.dark .worklogs-table tbody tr:hover,
html.dark .worklogs-table tbody tr:hover,
.dark .worklogs-table tbody tr:hover,
body.dark .projects-table tbody tr:hover,
html.dark .projects-table tbody tr:hover,
.dark .projects-table tbody tr:hover,
body.dark table tbody tr:hover,
html.dark table tbody tr:hover,
.dark table tbody tr:hover {
  background: var(--bg-elevated);
  transform: translateY(-1px) scale(1.001);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
              0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom-color: var(--border-strong);
  border-left: 2px solid var(--primary);
  border-right: none;
}

/* תאים - עיצוב מקצועי עם spacing מדויק */
body.dark .table td,
html.dark .table td,
.dark .table td,
body.dark .employees-table td,
html.dark .employees-table td,
.dark .employees-table td,
body.dark .contracts-table td,
html.dark .contracts-table td,
.dark .contracts-table td,
body.dark .materials-table td,
html.dark .materials-table td,
.dark .materials-table td,
body.dark .worklogs-table td,
html.dark .worklogs-table td,
.dark .worklogs-table td,
body.dark .projects-table td,
html.dark .projects-table td,
.dark .projects-table td,
body.dark table td,
html.dark table td,
.dark table td {
  color: var(--text-main);
  border-color: var(--border-subtle);
  background: transparent;
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.5;
}

/* Wrapper responsive */
body.dark .table-responsive,
html.dark .table-responsive,
.dark .table-responsive,
body.dark .contracts-table-responsive,
html.dark .contracts-table-responsive,
.dark .contracts-table-responsive,
body.dark .employees-table-responsive,
html.dark .employees-table-responsive,
.dark .employees-table-responsive,
body.dark .materials-table-responsive,
html.dark .materials-table-responsive,
.dark .materials-table-responsive,
body.dark .worklogs-table-responsive,
html.dark .worklogs-table-responsive,
.dark .worklogs-table-responsive,
body.dark .projects-table-responsive,
html.dark .projects-table-responsive,
.dark .projects-table-responsive {
  background: transparent;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* קישורים בטבלה - עיצוב מקצועי */
body.dark .table a,
html.dark .table a,
.dark .table a,
body.dark .employees-table a,
html.dark .employees-table a,
.dark .employees-table a,
body.dark .contracts-table a,
html.dark .contracts-table a,
.dark .contracts-table a,
body.dark .materials-table a,
html.dark .materials-table a,
.dark .materials-table a,
body.dark .worklogs-table a,
html.dark .worklogs-table a,
.dark .worklogs-table a,
body.dark .projects-table a,
html.dark .projects-table a,
.dark .projects-table a,
body.dark table a,
html.dark table a,
.dark table a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
  font-weight: 500;
}

body.dark .table a:hover,
html.dark .table a:hover,
.dark .table a:hover,
body.dark .employees-table a:hover,
html.dark .employees-table a:hover,
.dark .employees-table a:hover,
body.dark .contracts-table a:hover,
html.dark .contracts-table a:hover,
.dark .contracts-table a:hover,
body.dark .materials-table a:hover,
html.dark .materials-table a:hover,
.dark .materials-table a:hover,
body.dark .worklogs-table a:hover,
html.dark .worklogs-table a:hover,
.dark .worklogs-table a:hover,
body.dark .projects-table a:hover,
html.dark .projects-table a:hover,
.dark .projects-table a:hover,
body.dark table a:hover,
html.dark table a:hover,
.dark table a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* טקסט משני בטבלה */
body.dark .table .text-muted,
html.dark .table .text-muted,
.dark .table .text-muted,
body.dark .table .text-secondary,
html.dark .table .text-secondary,
.dark .table .text-secondary,
body.dark .employees-table .text-muted,
html.dark .employees-table .text-muted,
.dark .employees-table .text-muted,
body.dark .contracts-table .text-muted,
html.dark .contracts-table .text-muted,
.dark .contracts-table .text-muted,
body.dark .materials-table .text-muted,
html.dark .materials-table .text-muted,
.dark .materials-table .text-muted,
body.dark .worklogs-table .text-muted,
html.dark .worklogs-table .text-muted,
.dark .worklogs-table .text-muted,
body.dark .projects-table .text-muted,
html.dark .projects-table .text-muted,
.dark .projects-table .text-muted,
body.dark .projects-table .text-secondary,
html.dark .projects-table .text-secondary,
.dark .projects-table .text-secondary,
body.dark table .text-muted,
html.dark table .text-muted,
.dark table .text-muted,
body.dark table .text-secondary,
html.dark table .text-secondary,
.dark table .text-secondary {
  color: var(--text-muted);
}

/* Badges בטבלה */
body.dark .table .badge,
html.dark .table .badge,
.dark .table .badge,
body.dark .employees-table .badge,
html.dark .employees-table .badge,
.dark .employees-table .badge,
body.dark .contracts-table .badge,
html.dark .contracts-table .badge,
.dark .contracts-table .badge,
body.dark .materials-table .badge,
html.dark .materials-table .badge,
.dark .materials-table .badge,
body.dark .worklogs-table .badge,
html.dark .worklogs-table .badge,
.dark .worklogs-table .badge,
body.dark .projects-table .badge,
html.dark .projects-table .badge,
.dark .projects-table .badge,
body.dark table .badge,
html.dark table .badge,
.dark table .badge {
  background: var(--bg-surface-soft);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Card שמכיל טבלה - עיצוב מקצועי עם אפקטים עדינים */
/* הכללים כאן ב-@layer overrides ידרסו את הכללים ב-@layer base לפי ההיררכיה */
body.dark .projects-table-wrapper,
html.dark .projects-table-wrapper,
.dark .projects-table-wrapper {
  background: var(--bg-surface);
}

body.dark .projects-table-wrapper .card,
html.dark .projects-table-wrapper .card,
.dark .projects-table-wrapper .card,
body.dark .card .table-wrapper,
html.dark .card .table-wrapper,
.dark .card .table-wrapper {
  background: var(--bg-surface);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark .projects-table-wrapper .card:hover,
html.dark .projects-table-wrapper .card:hover,
.dark .projects-table-wrapper .card:hover {
  box-shadow: var(--shadow-strong);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

body.dark .projects-table-wrapper .card-body,
html.dark .projects-table-wrapper .card-body,
.dark .projects-table-wrapper .card-body {
  background: var(--bg-surface);
  background-color: var(--bg-surface);
  padding: 0;
}

body.dark .projects-table-wrapper .table-responsive,
html.dark .projects-table-wrapper .table-responsive,
.dark .projects-table-wrapper .table-responsive,
body.dark .projects-table-wrapper .projects-table-responsive,
html.dark .projects-table-wrapper .projects-table-responsive,
.dark .projects-table-wrapper .projects-table-responsive {
  background: var(--bg-surface);
  background-color: var(--bg-surface);
}

/* שיפורים נוספים - אנימציות חלקות */
body.dark .table tbody tr,
html.dark .table tbody tr,
.dark .table tbody tr,
body.dark .table tbody td,
html.dark .table tbody td,
.dark .table tbody td,
body.dark .projects-table tbody tr,
html.dark .projects-table tbody tr,
.dark .projects-table tbody tr,
body.dark .projects-table tbody td,
html.dark .projects-table tbody td,
.dark .projects-table tbody td {
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Dark Mode for Alerts ===== */
.dark .alert-success {
  background-color: var(--success-soft);
  border-color: var(--success-500);
  color: var(--success-300);
}

.dark .alert-warning {
  background-color: var(--warning-soft);
  border-color: var(--warning-500);
  color: var(--warning-300);
}

.dark .alert-error {
  background-color: var(--danger-soft);
  border-color: var(--error-500);
  color: var(--error-300);
}

.dark .alert-info {
  background-color: var(--info-soft);
  border-color: var(--info-500);
  color: var(--info-300);
}

/* ===== Dark Mode for Navigation ===== */
.dark .sidebar {
  background-color: var(--sidebar-bg);
  border-color: var(--sidebar-border);
  color: var(--sidebar-text);
}

.dark .nav-link {
  color: var(--sidebar-text);
}

.dark .nav-link:hover {
  background-color: var(--sidebar-hover);
  color: var(--sidebar-text);
}

.dark .nav-link.active {
  background-color: var(--sidebar-active);
  color: var(--sidebar-active-text);
}

/* ===== Dark Mode for Modals ===== */
.dark .modal-backdrop {
  background-color: var(--bg-overlay);
}

.dark .modal-content {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  color: var(--text-primary);
}

.dark .modal-header {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.dark .modal-body {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

.dark .modal-footer {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

/* ===== Dark Mode for Dropdowns ===== */
.dark .dropdown-menu {
  background-color: var(--popover-bg);
  border-color: var(--popover-border);
  box-shadow: var(--popover-shadow);
  color: var(--text-primary);
}

.dark .dropdown-item {
  color: var(--text-primary);
}

.dark .dropdown-item:hover {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* ===== Dark Mode for Tooltips ===== */
.dark .tooltip {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

/* ===== Dark Mode for Badges ===== */
.dark .badge {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.dark .badge-primary {
  background-color: var(--primary-600);
  color: var(--text-inverse);
}

.dark .badge-success {
  background-color: var(--success-600);
  color: var(--text-inverse);
}

.dark .badge-warning {
  background-color: var(--warning-600);
  color: var(--text-inverse);
}

.dark .badge-error {
  background-color: var(--error-600);
  color: var(--text-inverse);
}

/* ===== Dark Mode for Progress Bars ===== */
.dark .progress-bar {
  background-color: var(--bg-tertiary);
}

.dark .progress-fill {
  background-color: var(--primary-500);
}

/* ===== Dark Mode for Charts ===== */
.dark .chart-container {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  color: var(--text-primary);
}

.dark .chart-title {
  color: var(--text-primary);
}

.dark .chart-subtitle {
  color: var(--text-secondary);
}

/* ===== Reduced Motion Support ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none;
    animation: none;
  }
}

/* ===== Print Styles (always light) ===== */
@media print {
  .dark,
  .dark * {
    background-color: var(--bg-surface);
    color: var(--text-main);
    border-color: var(--border-subtle);
  }

  /* ============================================
     Light Theme - הוסר - רק dark mode נתמך
     ============================================ */
}

} /* סיום @layer overrides */