/* CepaGEST Control Panel - Custom Styles */

/* Navigation */
.nav-link {
  opacity: 0.8;
  transition: opacity 0.2s, background-color 0.2s;
}

.nav-link:hover,
.nav-link.active {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: 500;
}

/* Cards */
.stat-card {
  @apply bg-white rounded-lg shadow p-4 transition-shadow hover:shadow-md;
}

.stat-card-title {
  @apply text-sm text-gray-500 font-medium;
}

.stat-card-value {
  @apply text-3xl font-bold text-gray-900 mt-1;
}

.stat-card-subtitle {
  @apply text-xs text-gray-400 mt-1;
}

/* Tables */
.data-table {
  @apply w-full;
}

.data-table thead {
  @apply bg-gray-50;
}

.data-table th {
  @apply text-left p-3 text-xs font-semibold text-gray-600 uppercase tracking-wider;
}

.data-table td {
  @apply p-3 text-sm text-gray-700;
}

.data-table tbody tr {
  @apply border-t border-gray-100 hover:bg-gray-50 transition-colors;
}

.data-table tbody tr.clickable {
  @apply cursor-pointer;
}

/* Badges */
.badge {
  @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-error {
  @apply bg-red-100 text-red-800;
}

.badge-info {
  @apply bg-blue-100 text-blue-800;
}

.badge-gray {
  @apply bg-gray-100 text-gray-800;
}

/* Forms */
.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-help {
  @apply text-xs text-gray-500 mt-1;
}

/* Buttons */
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400;
}

.btn-danger {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-sm {
  @apply px-3 py-1.5 text-sm;
}

/* Toast notifications */
.toast {
  @apply px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 min-w-[300px] max-w-md;
  animation: slideIn 0.3s ease-out;
}

.toast-success {
  @apply bg-green-600 text-white;
}

.toast-error {
  @apply bg-red-600 text-white;
}

.toast-warning {
  @apply bg-yellow-500 text-white;
}

.toast-info {
  @apply bg-blue-600 text-white;
}

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

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

.toast-exit {
  animation: slideOut 0.3s ease-in forwards;
}

/* Modal */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
  @apply bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-auto;
}

.modal-header {
  @apply px-6 py-4 border-b border-gray-200 flex justify-between items-center;
}

.modal-body {
  @apply px-6 py-4;
}

.modal-footer {
  @apply px-6 py-4 border-t border-gray-200 flex justify-end gap-3;
}

/* Pagination */
.pagination {
  @apply flex items-center gap-2;
}

.pagination-btn {
  @apply px-3 py-1 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed;
}

.pagination-btn.active {
  @apply bg-indigo-600 text-white border-indigo-600;
}

/* Charts container */
.chart-container {
  @apply relative h-64;
}

/* Log detail */
.log-section {
  @apply mb-6;
}

.log-section-title {
  @apply text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2;
}

.log-content {
  @apply bg-gray-50 rounded-lg p-4 text-sm font-mono overflow-x-auto max-h-96 overflow-y-auto;
}

.log-content pre {
  @apply whitespace-pre-wrap break-words;
}

/* Prompt viewer */
.prompt-section {
  @apply bg-white rounded-lg shadow mb-4;
}

.prompt-header {
  @apply p-4 border-b flex justify-between items-center cursor-pointer hover:bg-gray-50;
}

.prompt-content {
  @apply p-4 bg-gray-50 text-sm font-mono overflow-x-auto max-h-64 overflow-y-auto;
  white-space: pre-wrap;
}

/* Utilities */
.hidden {
  display: none !important;
}

.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 768px) {
  #main-nav {
    display: none;
  }
}