/* ============================================================
   PsicoPront - Estilos Globais
   ============================================================ */

:root {
  --sidebar-width: 260px;
  --header-height: 64px;
}

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Sidebar */
.sidebar-transition {
  transition: transform 0.3s ease-in-out;
}
@media (max-width: 768px) {
  .sidebar-mobile {
    transform: translateX(-100%);
  }
  .sidebar-mobile.open {
    transform: translateX(0);
  }
}

/* Cards e containers */
.card-hover {
  transition: all 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.dark .card-hover:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Status badges */
.status-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}
.status-badge.scheduled { @apply bg-blue-100 text-blue-800; }
.status-badge.confirmed { @apply bg-green-100 text-green-800; }
.status-badge.completed { @apply bg-gray-100 text-gray-800; }
.status-badge.cancelled { @apply bg-red-100 text-red-800; }
.status-badge.no_show { @apply bg-yellow-100 text-yellow-800; }
.status-badge.in_progress { @apply bg-purple-100 text-purple-800; }
.dark .status-badge.scheduled { @apply bg-blue-900 text-blue-200; }
.dark .status-badge.confirmed { @apply bg-green-900 text-green-200; }
.dark .status-badge.completed { @apply bg-gray-700 text-gray-200; }
.dark .status-badge.cancelled { @apply bg-red-900 text-red-200; }
.dark .status-badge.no_show { @apply bg-yellow-900 text-yellow-200; }
.dark .status-badge.in_progress { @apply bg-purple-900 text-purple-200; }

/* Risk indicators */
.risk-low { @apply text-green-600; }
.risk-medium { @apply text-yellow-600; }
.risk-high { @apply text-orange-600; }
.risk-critical { @apply text-red-600; }

/* Calendário */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.calendar-cell {
  min-height: 100px;
  padding: 4px;
  @apply border border-gray-200;
}
.dark .calendar-cell { @apply border-gray-700; }
.calendar-cell.today { @apply bg-primary-50; }
.dark .calendar-cell.today { @apply bg-primary-900/30; }
.calendar-cell.other-month { @apply bg-gray-50 text-gray-400; }
.dark .calendar-cell.other-month { @apply bg-gray-800/50 text-gray-600; }

/* Animações */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease-out; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.slide-in { animation: slideIn 0.3s ease-out; }

/* Loading spinner */
.spinner {
  border: 3px solid #e5e7eb;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* SOAP Note */
.soap-label { @apply font-semibold text-sm uppercase tracking-wider; }
.soap-S { @apply text-blue-600; }
.soap-O { @apply text-green-600; }
.soap-A { @apply text-orange-600; }
.soap-P { @apply text-purple-600; }
.dark .soap-S { @apply text-blue-400; }
.dark .soap-O { @apply text-green-400; }
.dark .soap-A { @apply text-orange-400; }
.dark .soap-P { @apply text-purple-400; }

/* Progress bars */
.progress-bar {
  height: 8px;
  border-radius: 4px;
  @apply bg-gray-200 overflow-hidden;
}
.dark .progress-bar { @apply bg-gray-700; }
.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Modal overlay */
.modal-overlay {
  @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
  animation: fadeIn 0.2s ease;
}

/* Responsive table */
.table-container {
  @apply overflow-x-auto;
}
.data-table {
  @apply min-w-full divide-y divide-gray-200;
}
.dark .data-table { @apply divide-gray-700; }
.data-table th {
  @apply px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
}
.dark .data-table th { @apply text-gray-400 bg-gray-800; }
.data-table td {
  @apply px-4 py-3 whitespace-nowrap text-sm;
}

/* Tabs */
.tab-active {
  @apply border-b-2 border-primary-500 text-primary-600 font-medium;
}
.dark .tab-active { @apply border-primary-400 text-primary-400; }

/* Tooltip */
.tooltip {
  @apply invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-200;
  @apply absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs text-white bg-gray-900 rounded;
  white-space: nowrap;
}