/* ========================================
   Enhanced Components - רכיבים משופרים
   רכיבים מקצועיים בהשראת shadcn/ui
   ======================================== */

@layer components {
/* ========================================
   Dialog / Modal - דיאלוג/מודאל
   ======================================== */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  background-color: var(--bg-overlay);
  backdrop-filter: blur(4px);
  animation: fadeIn 150ms ease-out;
}

.dialog-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  width: 90%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 0;
  animation: slideIn 200ms ease-out;
}

.dialog-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-bottom: 1px solid var(--border-primary);
}

.dialog-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.dialog-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.dialog-body {
  padding: var(--space-6);
  color: var(--text-primary);
}

.dialog-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-6);
  border-top: 1px solid var(--border-primary);
}

/* ========================================
   Dropdown Menu - תפריט נפתח
   ======================================== */
.dropdown-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  min-width: 12rem;
  padding: var(--space-1);
  background-color: var(--popover-bg);
  border: 1px solid var(--popover-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--popover-shadow);
  animation: slideDown 150ms ease-out;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: none;
  text-align: start;
}

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

.dropdown-item:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
}

.dropdown-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.dropdown-separator {
  height: 1px;
  margin: var(--space-1) 0;
  background-color: var(--border-primary);
}

/* ========================================
   Tabs - טאבים
   ======================================== */
.tabs-list {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-primary);
}

.tabs-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: none;
  white-space: nowrap;
}

.tabs-trigger:hover {
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

.tabs-trigger[data-state="active"] {
  color: var(--text-primary);
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

.tabs-content {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
}

/* ========================================
   Accordion - אקורדיון
   ======================================== */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.accordion-item {
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--card-bg);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  background-color: var(--card-bg);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: start;
}

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

.accordion-trigger[data-state="open"] {
  border-bottom: 1px solid var(--border-primary);
}

.accordion-icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-normal);
}

.accordion-trigger[data-state="open"] .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  overflow: hidden;
  animation: slideDown 200ms ease-out;
}

.accordion-content[data-state="closed"] {
  animation: slideUp 200ms ease-out;
}

.accordion-body {
  padding: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ========================================
   Popover - חלון קופץ
   ======================================== */
.popover {
  position: relative;
  display: inline-block;
}

.popover-content {
  position: absolute;
  z-index: var(--z-popover);
  min-width: 12rem;
  padding: var(--space-4);
  background-color: var(--popover-bg);
  border: 1px solid var(--popover-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--popover-shadow);
  animation: fadeIn 150ms ease-out;
  margin-top: var(--space-2);
}

.popover-content[data-side="top"] {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.popover-content[data-side="left"] {
  margin-left: 0;
  margin-right: var(--space-2);
}

.popover-content[data-side="right"] {
  margin-right: 0;
  margin-left: var(--space-2);
}

/* ========================================
   Tooltip - טולטיפ
   ======================================== */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip-content {
  position: absolute;
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-inverse);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  animation: fadeIn 150ms ease-out;
  margin-top: var(--space-2);
}

.tooltip-content[data-side="top"] {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.tooltip-content[data-side="left"] {
  margin-left: 0;
  margin-right: var(--space-2);
}

.tooltip-content[data-side="right"] {
  margin-right: 0;
  margin-left: var(--space-2);
}

/* ========================================
   Badge - תג
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
  background-color: var(--primary-100);
  color: var(--primary-700);
}

.badge-secondary {
  background-color: #6b7280;
  color: #ffffff;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.badge-success {
  background-color: var(--success-100);
  color: var(--success-700);
}

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

.badge-error {
  background-color: var(--error-100);
  color: var(--error-700);
}

.badge-info {
  background-color: var(--info-100);
  color: var(--info-700);
}

.badge-outline {
  background-color: transparent;
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
}

/* ========================================
   Skeleton - שלד טעינה
   ======================================== */
.skeleton {
  display: block;
  height: 1rem;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-circle {
  border-radius: var(--radius-full);
}

.skeleton-text {
  height: 0.875rem;
  margin-bottom: var(--space-2);
}

.skeleton-text:last-child {
  width: 75%;
}

/* ========================================
   Progress - התקדמות
   ======================================== */
.progress {
  position: relative;
  width: 100%;
  height: 0.5rem;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: var(--primary-500);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

.progress-bar-success {
  background-color: var(--success-500);
}

.progress-bar-warning {
  background-color: var(--warning-500);
}

.progress-bar-error {
  background-color: var(--error-500);
}

/* ========================================
   Separator - מפריד
   ======================================== */
.separator {
  height: 1px;
  width: 100%;
  background-color: var(--border-primary);
  margin: var(--space-4) 0;
}

.separator-vertical {
  width: 1px;
  height: 100%;
  margin: 0 var(--space-4);
}

/* ========================================
   Switch - מתג
   ======================================== */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.switch[data-state="checked"] {
  background-color: var(--primary-500);
}

.switch-thumb {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
  transform: translateX(0.125rem);
}

.switch[data-state="checked"] .switch-thumb {
  transform: translateX(1.375rem);
}

/* ========================================
   Animations - אנימציות
   ======================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ========================================
   RTL Support - תמיכת RTL
   ======================================== */
[dir="rtl"] .dialog-content {
  left: auto;
  right: 50%;
  transform: translate(50%, -50%);
}

[dir="rtl"] .dropdown-menu {
  text-align: right;
}

[dir="rtl"] .dropdown-item {
  text-align: right;
}

[dir="rtl"] .tabs-trigger {
  text-align: center;
}

[dir="rtl"] .accordion-trigger {
  text-align: right;
}

[dir="rtl"] .switch-thumb {
  transform: translateX(-0.125rem);
}

[dir="rtl"] .switch[data-state="checked"] .switch-thumb {
  transform: translateX(-1.375rem);
}

/* ========================================
   Accessibility - נגישות
   ======================================== */
.dialog-overlay:focus-visible,
.dropdown-item:focus-visible,
.tabs-trigger:focus-visible,
.accordion-trigger:focus-visible,
.switch:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

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

/* ========================================
   Badges - תגיות סטטוס
   ======================================== */
/* Badge סטטוס כללי */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: var(--font-medium);
}

  /* סטטוס פעיל */
  .status-active {
    background: var(--success-100);
    color: #000000;
  }

/* סטטוס לא פעיל */
.status-inactive {
  background: var(--border-primary);
  color: var(--text-secondary);
}

/* Badge תאריך - פג תוקף */
.badge-expired {
  background: var(--error-500);
  color: var(--text-inverse);
}

/* Badge תאריך - עומד לפוג */
.badge-expiring {
  background: var(--warning-500);
  color: var(--text-primary);
}

/* Badge תאריך - תקף */
.badge-valid {
  background: var(--success-500);
  color: var(--text-inverse);
}

  /* וריאציות נוספות של status-badge */
  .status-badge.status-active {
    background: var(--success-100);
    color: #000000;
  }

.status-badge.status-inactive {
  background: var(--error-100);
  color: var(--error-800);
}

.status-badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* וריאציות נוספות מ-safety module */
.status-badge.active {
  background: var(--success-50);
  color: var(--success-600);
}

.status-badge.expired {
  background: var(--error-50);
  color: var(--error-700);
}

.status-badge.suspended {
  background: var(--warning-50);
  color: var(--warning-800);
}

.status-badge.cancelled {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* ========================================
   רכיבים נוספים מ-components.css
   ======================================== */

/* Summary Count */
.summary-count {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
}

/* Form Error */
.form-error::before {
  content: "⚠";
  font-size: 14px;
}

/* Badge variants with bg-* classes support */
.badge.bg-primary,
.badge.bg-success {
  background-color: var(--success-500);
  color: #000000;
}

.badge.bg-danger,
.badge.bg-warning,
.badge.bg-info {
  color: var(--text-inverse);
}

.badge.bg-primary {
  background-color: var(--primary-600);
}

.badge.bg-danger {
  background-color: var(--error-500);
}

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

.badge.bg-info {
  background-color: var(--info-500);
}

.badge.bg-neutral-600 {
  background-color: var(--secondary-600);
  color: var(--text-inverse);
}

/* Badge variants with specific color shades (600) */
.badge-primary-600 {
  background-color: var(--primary-600);
  color: var(--text-inverse);
}

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

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

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

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

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

.badge-pill {
  border-radius: 999px;
}

/* Badge Status - Association Status (קבלנים/עובדים) */
.badge-status-active,
.badge-association-active {
  background-color: var(--success-600);
  color: var(--text-inverse);
}

.badge-status-completed,
.badge-association-completed {
  background-color: var(--secondary-600);
  color: var(--text-inverse);
}

.badge-status-suspended,
.badge-association-suspended {
  background-color: var(--warning-600);
  color: var(--text-inverse);
}

/* Badge Status - Worklog Status */
.badge-worklog-completed {
  background-color: var(--success-600);
  color: var(--text-inverse);
}

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

.badge-worklog-pending {
  background-color: var(--info-600);
  color: var(--text-inverse);
}

/* Badge Status - Budget Status */
.badge-budget-on-track {
  background-color: var(--success-600);
  color: var(--text-inverse);
}

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

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

/* Badge Status - Credit Usage */
.badge-credit-low {
  background-color: var(--success-600);
  color: var(--text-inverse);
}

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

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

/* Heading Colors - Dynamic Status Colors */
.heading-success,
.text-status-success {
  color: var(--success-600);
}

.heading-warning,
.text-status-warning {
  color: var(--warning-600);
}

.heading-error,
.text-status-error {
  color: var(--error-600);
}

.heading-info,
.text-status-info {
  color: var(--info-600);
}

/* Heading Status - Budget Status */
.heading-budget-on-track {
  color: var(--success-600);
}

.heading-budget-at-risk {
  color: var(--warning-600);
}

.heading-budget-over {
  color: var(--error-600);
}

/* Heading Status - Schedule Deviation */
.heading-schedule-on-time {
  color: var(--success-600);
}

.heading-schedule-delayed {
  color: var(--warning-600);
}

.heading-schedule-very-delayed {
  color: var(--error-600);
}

/* Heading Status - Quality/Safety Score */
.heading-score-excellent {
  color: var(--success-600);
}

.heading-score-good {
  color: var(--warning-600);
}

.heading-score-poor {
  color: var(--error-600);
}

/* Status Badge Inactive/Pending */
.status-badge-inactive {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
}

.status-badge-pending {
  background: rgba(251, 191, 36, 0.1);
  color: var(--color-warning);
}

/* Tooltip Wrapper - גרסה נוספת */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-wrapper .tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  color: var(--text-inverse);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius-sm);
  border: 2px solid var(--info-500);
  font-size: var(--fs-muted);
  white-space: nowrap;
  z-index: var(--z-tooltip);
  margin-bottom: var(--spacing-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  box-shadow: var(--shadow-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;
}

/* Toast Container - גרסה נוספת */
.toast-container-alt {
  position: fixed;
  top: var(--spacing-4);
  left: var(--spacing-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.toast-alt {
  background: var(--color-surface);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-4);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  min-width: 300px;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  animation: slideInRight 0.3s ease-out;
}

.toast-alt.toast-success {
  border-inline-start: 4px solid var(--color-success);
}

.toast-alt.toast-danger {
  border-inline-start: 4px solid var(--color-danger);
}

.toast-alt.toast-warning {
  border-inline-start: 4px solid var(--color-warning);
}

.toast-alt.toast-info {
  border-inline-start: 4px solid var(--color-info);
}

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

/* Primary Action Buttons Variants - וריאציות כפתורי פעולה ראשית */
.btn-primary-v1 {
  transition: all var(--transition-base);
}
.btn-primary-v1:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-primary-v2 {
  transition: all var(--transition-base);
}
.btn-primary-v2:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
}

.btn-primary-v3 {
  transition: all var(--transition-base);
}
.btn-primary-v3:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-strong);
}

.btn-primary-v4 {
  transition: all var(--transition-base);
}
.btn-primary-v4:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-primary-v5 {
  transition: all var(--transition-base);
}
.btn-primary-v5:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-primary-v6 {
  background: var(--color-primary-600);
  color: white;
  border: none;
  transition: all var(--transition-base);
}
.btn-primary-v6:hover {
  background: var(--color-primary-700);
}
.ripple-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.ripple-btn:active::after {
  width: 300px;
  height: 300px;
}

.btn-primary-v7 {
  background: var(--color-primary-600);
  color: white;
  border: none;
  transition: all var(--transition-base);
}
.btn-primary-v7:hover {
  background: var(--color-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-primary-v8 {
  background: var(--color-primary-600);
  color: white;
  border: none;
  transition: all var(--transition-base);
}
.btn-primary-v8:hover {
  background: var(--color-primary-700);
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(79, 70, 229, 0.4), 0 0 0 4px rgba(79, 70, 229, 0.15);
}

.btn-primary-v9 {
  transition: all var(--transition-base);
}
.btn-primary-v9:hover {
  background: var(--color-primary-600);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-primary-v10 {
  background: var(--color-primary-600);
  color: white;
  border: none;
  transition: all var(--transition-base);
}
.btn-primary-v10:hover {
  background: var(--color-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-primary-v11 {
  transition: all var(--transition-base);
}
.btn-primary-v11:hover {
  background: var(--color-primary-600);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-primary-v12 {
  background: var(--color-primary-600);
  color: white;
  border: none;
  transition: all var(--transition-base);
}
.btn-primary-v12:hover {
  background: var(--color-primary-700);
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(79, 70, 229, 0.8), 0 0 60px rgba(79, 70, 229, 0.4);
}

.btn-primary-v13 {
  background: var(--color-primary-600);
  color: white;
  border: none;
  transition: all var(--transition-base);
}
.btn-primary-v13:hover {
  background: var(--color-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-primary-v14 {
  background: var(--color-primary-600);
  color: white;
  border: none;
  cursor: wait;
  opacity: 0.8;
}

.btn-primary-v15 {
  background: var(--color-primary-600);
  color: white;
  border: none;
  transition: all var(--transition-base);
}
.btn-primary-v15:hover {
  background: var(--color-primary-700);
}

/* Filter Buttons Variants - וריאציות כפתורי פילטרים */
.btn-filter-v1 {
  background: var(--color-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}
.btn-filter-v1:hover {
  background: var(--color-primary-100);
  border-color: var(--color-primary-300);
}

.btn-filter-v2 {
  background: var(--color-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}
.btn-filter-v2:hover {
  background: var(--color-primary-100);
  border-color: var(--color-primary-300);
}

.btn-filter-v3 {
  background: var(--color-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}
.btn-filter-v3:hover {
  background: var(--color-primary-100);
  border-color: var(--color-primary-300);
}

.btn-filter-v4 {
  transition: all var(--transition-base);
}
.btn-filter-v4:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-300);
  color: var(--color-primary-600);
}

.btn-filter-v5 {
  background: var(--color-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}
.btn-filter-v5:hover {
  background: var(--color-primary-100);
  border-color: var(--color-primary-300);
}

.btn-filter-chip {
  transition: all var(--transition-base);
  cursor: pointer;
}
.btn-filter-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn-filter-chip.active {
  box-shadow: var(--shadow-md);
}

.btn-filter-v14 {
  transition: all var(--transition-base);
}
.btn-filter-v14:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  filter: brightness(1.1);
}

.btn-filter-v15 {
  transition: all var(--transition-base);
}
.btn-filter-v15:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5);
}
.btn-filter-v15.active {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.6);
  }
}

/* View Toggle Buttons - כפתורי החלפת תצוגה */
.view-toggle-v1 {
  position: relative;
}
.view-toggle-v1:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  filter: brightness(1.1);
}
.view-toggle-v1::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  background: var(--bg-elevated);
  border: 2px solid var(--info-500);
  color: var(--text-inverse);
  box-shadow: var(--shadow-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: 1000;
}
.view-toggle-v1::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  right: 50%;
  transform: translateX(50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: 1000;
}
.view-toggle-v1:hover::before,
.view-toggle-v1:hover::after {
  opacity: 1;
  visibility: visible;
}

.view-toggle-v2 {
  position: relative;
  transition: all var(--transition-base);
}
.view-toggle-v2:hover {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  filter: brightness(1.1);
}
.view-toggle-v2::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  background: var(--bg-elevated);
  border: 2px solid var(--info-500);
  color: var(--text-inverse);
  box-shadow: var(--shadow-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: 1000;
}
.view-toggle-v2:hover::before {
  opacity: 1;
  visibility: visible;
}

.view-toggle-v3 {
  position: relative;
}
.view-toggle-v3:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  filter: brightness(1.1);
}
.view-toggle-v3::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  background: var(--bg-elevated);
  border: 2px solid var(--info-500);
  color: var(--text-inverse);
  box-shadow: var(--shadow-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: 1000;
}
.view-toggle-v3:hover::before {
  opacity: 1;
  visibility: visible;
}

.view-toggle-v4 {
  position: relative;
}
.view-toggle-v4:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  filter: brightness(1.1);
}
.view-toggle-v4::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  background: var(--bg-elevated);
  border: 2px solid var(--info-500);
  color: var(--text-inverse);
  box-shadow: var(--shadow-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: 1000;
}
.view-toggle-v4:hover::before {
  opacity: 1;
  visibility: visible;
}

.view-toggle-v5 {
  position: relative;
}
.view-toggle-v5:hover {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  color: var(--text-inverse);
  filter: brightness(1.1);
}
.view-toggle-v5.active {
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.view-toggle-v5::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  background: var(--bg-elevated);
  border: 2px solid var(--info-500);
  color: var(--text-inverse);
  box-shadow: var(--shadow-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: 1000;
}
.view-toggle-v5:hover::before {
  opacity: 1;
  visibility: visible;
}

.view-toggle-v6 {
  position: relative;
}
.view-toggle-v6:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  filter: brightness(1.1);
}
.view-toggle-v6:hover .view-toggle-icon {
  transform: rotate(90deg);
}
.view-toggle-v6::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  background: var(--bg-elevated);
  border: 2px solid var(--info-500);
  color: var(--text-inverse);
  box-shadow: var(--shadow-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: 1000;
}
.view-toggle-v6:hover::before {
  opacity: 1;
  visibility: visible;
}

.view-toggle-v7 {
  position: relative;
  transition: all var(--transition-base);
}
.view-toggle-v7:hover {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
  filter: brightness(1.1);
}
.view-toggle-v7::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  background: var(--bg-elevated);
  border: 2px solid var(--info-500);
  color: var(--text-inverse);
  box-shadow: var(--shadow-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: 1000;
}
.view-toggle-v7:hover::before {
  opacity: 1;
  visibility: visible;
}

.view-toggle-v8 {
  position: relative;
}
.view-toggle-v8:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, rgba(124, 142, 240, 0.9) 0%, rgba(138, 95, 184, 0.9) 100%);
  filter: brightness(1.1);
}
.view-toggle-v8::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  background: var(--bg-elevated);
  border: 2px solid var(--info-500);
  color: var(--text-inverse);
  box-shadow: var(--shadow-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: 1000;
}
.view-toggle-v8:hover::before {
  opacity: 1;
  visibility: visible;
}

.view-toggle-v9 {
  position: relative;
}
.view-toggle-v9:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  filter: brightness(1.1);
}
.view-toggle-v9::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  background: var(--bg-elevated);
  border: 2px solid var(--info-500);
  color: var(--text-inverse);
  box-shadow: var(--shadow-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: 1000;
}
.view-toggle-v9:hover::before {
  opacity: 1;
  visibility: visible;
}

.view-toggle-v10 {
  position: relative;
}
.view-toggle-v10:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.7), 0 4px 12px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  filter: brightness(1.1);
}
.view-toggle-v10::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  background: var(--bg-elevated);
  border: 2px solid var(--info-500);
  color: var(--text-inverse);
  box-shadow: var(--shadow-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  pointer-events: none;
  z-index: 1000;
}
.view-toggle-v10:hover::before {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   Advanced Components מ-advanced-components.css
   ======================================== */

/* Statistics Cards with Icons */
.stat-card {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  transition: all 0.2s;
}

.stat-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-0.25rem);
}

.stat-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.stat-card-icon.primary {
  background-color: #dbeafe;
  color: #2563eb;
}

.stat-card-icon.success {
  background-color: #dcfce7;
  color: #16a34a;
}

.stat-card-icon.warning {
  background-color: #fef3c7;
  color: #ca8a04;
}

.stat-card-icon.danger {
  background-color: #fee2e2;
  color: #dc2626;
}

.stat-card-icon.info {
  background-color: #e0e7ff;
  color: #4f46e5;
}

.stat-number {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin-top: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
  margin-top: 0.25rem;
}

.stat-change {
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
}

.stat-change.positive {
  color: #16a34a;
}

.stat-change.negative {
  color: #dc2626;
}

/* Progress Bars */
.progress-bar-advanced {
  width: 100%;
  background-color: #e5e7eb;
  border-radius: 9999px;
  height: 0.625rem;
}

.progress-fill-advanced {
  height: 0.625rem;
  border-radius: 9999px;
  transition: all 0.5s ease-out;
}

.progress-fill-advanced.primary {
  background-color: #2563eb;
}

.progress-fill-advanced.success {
  background-color: #16a34a;
}

.progress-fill-advanced.warning {
  background-color: #ca8a04;
}

.progress-fill-advanced.danger {
  background-color: #dc2626;
}

/* Chart Containers */
.chart-container {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.chart-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.chart-subtitle {
  font-size: 0.875rem;
  color: #4b5563;
}

.chart-content {
  position: relative;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chart-legend-color {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
}

.chart-legend-label {
  font-size: 0.875rem;
  color: #4b5563;
}

/* Advanced Form Components */
.form-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.form-step {
  display: flex;
  align-items: center;
}

.form-step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
}

.form-step-number.active {
  background-color: #2563eb;
  color: white;
}

.form-step-number.completed {
  background-color: #16a34a;
  color: white;
}

.form-step-number.inactive {
  background-color: #e5e7eb;
  color: #4b5563;
}

.form-step-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
  margin-right: 0.5rem;
}

.form-step-connector {
  flex: 1 1 0%;
  height: 0.125rem;
  background-color: #e5e7eb;
  margin-left: 1rem;
  margin-right: 1rem;
}

.form-step-connector.completed {
  background-color: #16a34a;
}

/* File Upload with Preview */
.file-upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.file-upload-area:hover {
  border-color: #60a5fa;
  background-color: #eff6ff;
}

.file-upload-area.drag-over {
  border-color: #3b82f6;
  background-color: #dbeafe;
}

.file-upload-icon {
  font-size: 2.25rem;
  color: #9ca3af;
  margin-bottom: 1rem;
}

.file-upload-text {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 0.5rem;
}

.file-upload-subtext {
  font-size: 0.875rem;
  color: #4b5563;
}

.file-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background-color: #f9fafb;
  border-radius: 0.5rem;
  margin-top: 1rem;
}

.file-preview-icon {
  width: 2rem;
  height: 2rem;
  color: #6b7280;
}

.file-preview-info {
  flex: 1 1 0%;
}

.file-preview-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

.file-preview-size {
  font-size: 0.75rem;
  color: #6b7280;
}

.file-preview-remove {
  color: #ef4444;
  cursor: pointer;
}

.file-preview-remove:hover {
  color: #b91c1c;
}

/* Multi-select Dropdown */
.multi-select {
  position: relative;
}

.multi-select-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.multi-select-input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.multi-select-dropdown {
  position: absolute;
  z-index: 50;
  width: 100%;
  margin-top: 0.25rem;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-height: 15rem;
  overflow: auto;
}

.multi-select-option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.multi-select-option:hover {
  background-color: #f3f4f6;
}

.multi-select-option.selected {
  background-color: #eff6ff;
  color: #1e40af;
}

.multi-select-checkbox {
  width: 1rem;
  height: 1rem;
  color: #2563eb;
  border-color: #d1d5db;
  border-radius: 0.25rem;
}

.multi-select-checkbox:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.multi-select-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.multi-select-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: #dbeafe;
  color: #1e3a8a;
  font-size: 0.75rem;
  border-radius: 9999px;
}

.multi-select-tag-remove {
  color: #2563eb;
  cursor: pointer;
}

.multi-select-tag-remove:hover {
  color: #1e40af;
}

/* Advanced Table */
.advanced-table {
  width: 100%;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.advanced-table-header {
  background-color: #f9fafb;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.advanced-table-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.advanced-table-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.advanced-table-filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.advanced-table-filter {
  flex: 1 1 0%;
}

.advanced-table-filter label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

.advanced-table-filter select,
.advanced-table-filter input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.advanced-table-filter select:focus,
.advanced-table-filter input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.advanced-table-content {
  overflow-x: auto;
}

.advanced-table table {
  width: 100%;
}

.advanced-table th {
  padding: 0.75rem 1.5rem;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e5e7eb;
}

.advanced-table td {
  padding: 1rem 1.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
}

.advanced-table tbody tr:hover {
  background-color: #f9fafb;
}

.advanced-table-pagination {
  padding: 1rem 1.5rem;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.advanced-table-info {
  font-size: 0.875rem;
  color: #374151;
}

.advanced-table-pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Alert Banner */
.alert-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 1rem;
  text-align: center;
}

.alert-banner-success {
  background-color: #16a34a;
  color: white;
}

.alert-banner-error {
  background-color: #dc2626;
  color: white;
}

.alert-banner-warning {
  background-color: #ca8a04;
  color: white;
}

.alert-banner-info {
  background-color: #2563eb;
  color: white;
}

/* Skeleton Loading - גרסאות נוספות */
.skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #e5e7eb;
  border-radius: 9999px;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-card {
  padding: 1.5rem;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.skeleton-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.skeleton-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Spinner Variants */
.spinner {
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  border: 2px solid #e5e7eb;
  border-top-color: #2563eb;
}

.spinner-sm {
  width: 1rem;
  height: 1rem;
}

.spinner-md {
  width: 1.5rem;
  height: 1.5rem;
}

.spinner-lg {
  width: 2rem;
  height: 2rem;
}

.spinner-xl {
  width: 3rem;
  height: 3rem;
}

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

/* Loading States */
.loading-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.loading-text {
  font-size: 0.875rem;
  color: #4b5563;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-flex;
  height: 1.5rem;
  width: 2.75rem;
  align-items: center;
  border-radius: 9999px;
  background-color: #e5e7eb;
  transition: background-color 0.15s;
}

.toggle-switch:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.toggle-switch.active {
  background-color: #2563eb;
}

.toggle-switch-thumb {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  transform: translateX(0.125rem);
  border-radius: 9999px;
  background-color: white;
  transition: transform 0.15s;
}

.toggle-switch.active .toggle-switch-thumb {
  transform: translateX(1.5rem);
}

/* Rating Stars */
.rating-stars {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.rating-star {
  width: 1.25rem;
  height: 1.25rem;
  color: #d1d5db;
  cursor: pointer;
  transition: color 0.2s;
}

.rating-star.active {
  color: #fbbf24;
}

.rating-star:hover {
  color: #fcd34d;
}

/* Progress Steps */
.progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-step {
  display: flex;
  align-items: center;
}

.progress-step-circle {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  border: 2px solid;
}

.progress-step-circle.active {
  border-color: #2563eb;
  background-color: #2563eb;
  color: white;
}

.progress-step-circle.completed {
  border-color: #16a34a;
  background-color: #16a34a;
  color: white;
}

.progress-step-circle.inactive {
  border-color: #d1d5db;
  background-color: white;
  color: #6b7280;
}

.progress-step-line {
  flex: 1 1 0%;
  height: 0.125rem;
  background-color: #d1d5db;
  margin-left: 1rem;
  margin-right: 1rem;
}

.progress-step-line.completed {
  background-color: #16a34a;
}

/* RTL Support for Advanced Components */
[dir="rtl"] .stat-card-icon {
  margin-right: 0;
  margin-left: 0.75rem;
}

[dir="rtl"] .stat-label {
  text-align: right;
}

[dir="rtl"] .chart-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .form-step {
  flex-direction: row-reverse;
}

[dir="rtl"] .form-step-label {
  margin-right: 0;
  margin-left: 0.5rem;
}

[dir="rtl"] .file-upload-area {
  text-align: right;
}

[dir="rtl"] .multi-select-tag {
  flex-direction: row-reverse;
}

[dir="rtl"] .advanced-table th,
[dir="rtl"] .advanced-table td {
  text-align: right;
}

[dir="rtl"] .toast-container {
  right: auto;
  left: 1rem;
}

[dir="rtl"] .alert-banner {
  text-align: right;
}

[dir="rtl"] .rating-stars {
  flex-direction: row-reverse;
}

[dir="rtl"] .progress-steps {
  flex-direction: row-reverse;
}

[dir="rtl"] .progress-step {
  flex-direction: row-reverse;
}

[dir="rtl"] .progress-step-label {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* Responsive Components */
@media (max-width: 768px) {
  .stat-card {
    padding: 1rem;
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
  
  .chart-container {
    padding: 1rem;
  }
  
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .advanced-table-filters {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .advanced-table-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .toast-container {
    left: 1rem;
    right: 1rem;
  }
  
  .progress-steps {
    flex-direction: column;
    gap: 1rem;
  }
  
  .progress-step-line {
    width: 0.125rem;
    height: 2rem;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

/* Animation Utilities */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.slide-in-up {
  animation: slideInUp 0.3s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.bounce-in {
  animation: bounceIn 0.5s ease-out;
}

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

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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