/* DataTable inline square spinner */
@keyframes dtSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Red square with trash icon spinner (mini delete-like) */
.dt-spinner-trash {
  width: 18px;
  height: 18px;
  background: #dc3545; /* bootstrap danger */
  display: inline-block;
  position: relative;
  border-radius: 2px;
  animation: dtSpin 1s linear infinite;
}
.dt-spinner-trash i {
  color: #fff;
  font-size: var(--font-size-small); /* small icon to fit 18x18 */
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

/* Green square with plus icon (mini create-like) */
.dt-spinner-plus {
  width: 18px;
  height: 18px;
  background: #198754; /* bootstrap success */
  display: inline-block;
  position: relative;
  border-radius: 2px;
  animation: dtSpin 1s linear infinite;
}
.dt-spinner-plus i {
  color: #fff;
  font-size: var(--font-size-small);
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

/* Primary square with check icon (mini save-like) */
.dt-spinner-check {
  width: 18px;
  height: 18px;
  background: #0d6efd; /* bootstrap primary */
  display: inline-block;
  position: relative;
  border-radius: 2px;
  animation: dtSpin 1s linear infinite;
}
.dt-spinner-check i {
  color: #fff;
  font-size: var(--font-size-small);
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}


/* Positioning classes for spinners */
.dt-spinner-positioned {
  position: absolute !important;
  top: 5px !important;
  left: 7px !important;
  pointer-events: none !important;
  line-height: 1 !important;
  display: none !important;
}

.dt-spinner-positioned.show {
  display: block !important;
}

/* Row state highlighting for AgGrid */

/* Строки в процессе ожидания (pending) - желтая подсветка */
.ag-row-pending {
  background-color: #fff3cd !important; /* Bootstrap warning light */
  border-left: 4px solid #ffc107 !important; /* Bootstrap warning */
  position: relative;
}

.ag-row-pending::before {
  content: "⏳";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-body-lg);
  z-index: 1;
}

/* Строки в процессе удаления (deleting) - красная подсветка */
.ag-row-deleting {
  background-color: #f8d7da !important; /* Bootstrap danger light */
  border-left: 4px solid #dc3545 !important; /* Bootstrap danger */
  opacity: 0.8;
  position: relative;
  animation: deleting-pulse 1.5s ease-in-out infinite;
}

.ag-row-deleting::before {
  content: "🗑️";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-body-lg);
  z-index: 1;
  animation: deleting-icon 1s ease-in-out infinite;
}

/* Оптимистичные строки (новые, добавляемые) - зеленая подсветка */
.ag-row-optimistic {
  background-color: #d1ecf1 !important; /* Bootstrap info light */
  border-left: 4px solid #0dcaf0 !important; /* Bootstrap info */
  position: relative;
  animation: optimistic-glow 2s ease-in-out infinite;
}

.ag-row-optimistic::before {
  content: "+";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-secondary);
  font-weight: bold;
  color: white;
  background-color: #198754; /* Bootstrap success green */
  border-radius: 3px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  animation: optimistic-button 1.5s ease-in-out infinite;
}

/* Анимации для состояний */
@keyframes deleting-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.6; }
}

@keyframes deleting-icon {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.1); }
}

@keyframes optimistic-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(13, 202, 240, 0.3); }
  50% { box-shadow: 0 0 15px rgba(13, 202, 240, 0.6); }
}

@keyframes optimistic-button {
  0%, 100% { 
    transform: translateY(-50%) scale(1); 
    box-shadow: 0 0 0 rgba(25, 135, 84, 0.4);
  }
  50% { 
    transform: translateY(-50%) scale(1.1); 
    box-shadow: 0 0 8px rgba(25, 135, 84, 0.6);
  }
}

/* Плавные переходы между состояниями */
.ag-row-pending,
.ag-row-deleting,
.ag-row-optimistic {
  transition: all 0.3s ease-in-out;
}

/* Иконки позиционируются абсолютно, не влияя на layout */
.ag-row-pending::before,
.ag-row-deleting::before,
.ag-row-optimistic::before {
  pointer-events: none; /* Иконки не блокируют клики */
}

/* Небольшой отступ только для первой колонки, чтобы текст не перекрывался с иконкой */
.ag-row-pending .ag-cell:first-child,
.ag-row-deleting .ag-cell:first-child,
.ag-row-optimistic .ag-cell:first-child {
  padding-left: 25px; /* Только для первой колонки */
}

/* Стили для текста в разных состояниях */
.ag-row-pending .ag-cell {
  color: #856404; /* Bootstrap warning text */
}

.ag-row-deleting .ag-cell {
  color: #721c24; /* Bootstrap danger text */
  text-decoration: line-through;
}

.ag-row-optimistic .ag-cell {
  color: #0c5460; /* Bootstrap info text */
}