/* MIRROR Custom CSS */

/* Gradient utilities */
.mirror-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.mirror-gradient-light {
  background: linear-gradient(135deg, #a8b9f0 0%, #b49bc8 100%);
}

/* Card styles */
.mirror-card {
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.mirror-card:hover {
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

/* Button styles */
.mirror-btn {
  transition: all 0.3s ease;
  font-weight: 500;
}

.mirror-btn:hover {
  transform: translateY(-1px);
}

/* Form styles */
.mirror-input {
  @apply w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-colors;
}

.mirror-input:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* VAS Scale styling */
.vas-scale {
  @apply flex items-center space-x-2 p-3 bg-gray-50 rounded-lg;
}

.vas-scale input[type="range"] {
  @apply flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer;
}

.vas-scale input[type="range"]::-webkit-slider-thumb {
  @apply appearance-none w-5 h-5 bg-purple-500 rounded-full cursor-pointer;
}

.vas-scale input[type="range"]::-moz-range-thumb {
  @apply w-5 h-5 bg-purple-500 rounded-full cursor-pointer border-0;
}

/* Tab styles */
.mirror-tab {
  @apply py-3 px-4 border-b-2 border-transparent text-gray-500 hover:text-purple-600 cursor-pointer transition-colors;
}

.mirror-tab.active {
  @apply border-purple-500 text-purple-600 font-semibold;
}

/* Chart container */
.chart-container {
  @apply relative w-full bg-white p-4 rounded-lg shadow-sm;
  min-height: 300px;
}

/* Notification animation */
.notification {
  animation: slideInRight 0.3s ease-out, slideOutRight 0.3s ease-in 4.7s forwards;
}

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

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* Loading states */
.loading {
  @apply opacity-50 pointer-events-none;
}

.loading::after {
  content: '';
  @apply absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center;
  z-index: 10;
}

/* User type selection cards */
.user-type-card {
  @apply transition-all duration-200 cursor-pointer border-2;
}

.user-type-card:hover {
  @apply border-purple-300 bg-purple-50;
}

/* Dashboard stats cards */
.stats-card {
  @apply bg-white rounded-xl p-6 shadow-sm border border-gray-100;
}

.stats-card .icon {
  @apply w-12 h-12 rounded-lg flex items-center justify-center text-2xl text-white;
}

.stats-card .icon.blue { @apply bg-blue-500; }
.stats-card .icon.green { @apply bg-green-500; }
.stats-card .icon.purple { @apply bg-purple-500; }
.stats-card .icon.orange { @apply bg-orange-500; }
.stats-card .icon.red { @apply bg-red-500; }

/* Diary entry cards */
.diary-entry {
  @apply bg-white border border-gray-200 rounded-lg p-4 mb-3 hover:shadow-md transition-shadow;
}

.diary-entry .entry-date {
  @apply text-sm font-semibold text-purple-600 mb-2;
}

.diary-entry .symptoms {
  @apply flex flex-wrap gap-2 mb-3;
}

.diary-entry .symptom-tag {
  @apply px-2 py-1 text-xs rounded-full;
}

.diary-entry .symptom-tag.present {
  @apply bg-red-100 text-red-800;
}

.diary-entry .symptom-tag.absent {
  @apply bg-green-100 text-green-800;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .mirror-card {
    @apply mx-4;
  }
  
  .container {
    @apply px-4;
  }
}

/* Print styles */
@media print {
  .mirror-gradient {
    background: #6366f1 !important;
    -webkit-print-color-adjust: exact;
  }
  
  .no-print {
    display: none !important;
  }
}