/* src/client/widgets/styles/NoteCard.css */
/* Styles for NoteCard component with header, body, and footer */

/* Pulse animation for updates */
@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.note-card--pulse {
  position: relative;
  z-index: 10;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

/* Wave container for pulse animation */
.wave-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Waves don't interfere with card interactions */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

/* Individual wave element */
.wave {
  position: absolute;
  width: 40px; /* Увеличим начальный размер для мягкости */
  height: 40px;
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  
  /* Делаем форму неидеальной (органической) */
  border-radius: 43% 57% 51% 49% / 57% 45% 55% 43%; 
  
  opacity: 0;
  pointer-events: none;
  
  /* Используем переменные из JS */
  animation: wave-ripple var(--wave-duration) ease-out forwards;
  
  /* Центрируем волну правильно */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Wave ripple animation */
@keyframes wave-ripple {
  0% {
    transform: translate(-50%, -50%) 
               rotate(var(--wave-rotate)) 
               skew(var(--wave-skew)) 
               scale(0.2);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  100% {
    /* В конце анимации меняем поворот и сильно увеличиваем */
    transform: translate(-50%, -50%) 
               rotate(calc(var(--wave-rotate) + 45deg)) 
               skew(calc(var(--wave-skew) * 1.5)) 
               scale(15);
    opacity: 0;
    /* К концу волна становится еще более бесформенной */
    border-radius: 50% 50% 50% 50%;
  }
}

.note-card {
  position: relative;
  width: 100%;
  min-width: 180px;
  min-height: 145px;
  background-color: #F2F2F2;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  user-select: none;
  transition: box-shadow 0.2s ease;
  height: 100% !important;
  box-sizing: border-box !important;
}

.note-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.accent-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 1;
}

.note-header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #E0E0E0;
}

/* Drag handle styles - позволяет таскать карточку только за заголовок */
.note-drag-handle {
  cursor: grab;
}

.note-drag-handle:active {
  cursor: grabbing;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}

.note-title {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-body {
  flex: 1;
  min-height: 65px;
  padding: 12px;
  overflow: hidden;
  font-size: 12px;
}

.note-content {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-footer {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-top: 1px solid #E0E0E0;
  font-size: 11px;
  background-color: #F2F2F2;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow: hidden;
}

.note-date {
  font-weight: 500;
  color: #333;
}

.note-author {
  color: #666;
  white-space: nowrap;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Role-based visual coding */
.role-admin {
  color: #D41D00;
  font-weight: 600;
}

.role-manager {
  color: #E3AA00;
  font-weight: 600;
}

.role-maid {
  color: #2F9FFA;
  font-weight: 600;
}


/* Smooth color transitions */
.note-card,
.note-header,
.note-footer,
.note-author {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Author name styling */
.note-author {
  font-weight: 500;
}