/* Custom CSS for JSAdmin - All custom styles go here */

/* JSAdmin brand text with small caps */
.font-small-caps {
	font-variant: small-caps;
}

/* ========================================
   MISSING TAILWIND UTILITY CLASSES
   ======================================== */

/* Gap utilities */
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }

/* Size utilities */
.h-4 { height: 1rem; }
.w-4 { width: 1rem; }
.h-5 { height: 1.25rem; }
.w-5 { width: 1.25rem; }
.min-w-0 { min-width: 0; }

/* Padding utilities */
.p-1 { padding: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }

/* Margin utilities */
.ml-1 { margin-left: 0.25rem; }
.-mt-4 { margin-top: -1rem; }
.-mr-4 { margin-right: -1rem; }
.-mb-4 { margin-bottom: -1rem; }
.-ml-4 { margin-left: -1rem; }

/* Border radius */
.rounded-xl { border-radius: 0.75rem; }

/* Rotate utility for accordion */
.rotate-180 { transform: rotate(180deg); }

/* Truncate text */
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Opacity utilities */
.opacity-75 { opacity: 0.75; }
.opacity-90 { opacity: 0.9; }

/* Background opacity */
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }

/* Text opacity */
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }

/* Additional color classes for light mode fixes */
.text-gray-800 { color: rgb(31 41 55); }
.text-gray-700 { color: rgb(55 65 81); }
.text-gray-900 { color: rgb(17 24 39); }
.dark .dark\:text-gray-100 { color: rgb(243 244 246); }

/* Hover backgrounds for cards */
.hover\:bg-violet-50:hover { background-color: rgb(245 243 255); }
.hover\:bg-gray-200:hover { background-color: rgb(229 231 235); }
.bg-gray-100 { background-color: rgb(243 244 246); }

/* Dark mode hover - ensure it doesn't turn white */
.dark .dark\:hover\:bg-gray-700:hover { background-color: rgb(55 65 81); }

/* Rose color utilities (for Descartar button) */
.bg-rose-100 { background-color: rgb(255 228 230); }
.text-rose-700 { color: rgb(190 18 60); }
.hover\:bg-rose-200:hover { background-color: rgb(254 205 211); }
.dark .dark\:bg-rose-900\/40 { background-color: rgba(127, 29, 29, 0.4); }
.dark .dark\:text-rose-200 { color: rgb(254 205 211); }
.dark .dark\:hover\:bg-rose-800:hover { background-color: rgb(153 27 27); }

/* Status badges with proper contrast */
.badge-active {
	background-color: rgb(220 252 231);
	color: rgb(22 101 52);
}
.dark .badge-active {
	background-color: rgba(34, 197, 94, 0.2);
	color: rgb(134 239 172);
}

.badge-inactive {
	background-color: rgb(254 249 195);
	color: rgb(133 77 14);
}
.dark .badge-inactive {
	background-color: rgba(234, 179, 8, 0.2);
	color: rgb(253 224 71);
}

.badge-pending {
	background-color: rgb(219 234 254);
	color: rgb(29 78 216);
}
.dark .badge-pending {
	background-color: rgba(59, 130, 246, 0.2);
	color: rgb(147 197 253);
}

.badge-suspended {
	background-color: rgb(254 226 226);
	color: rgb(153 27 27);
}
.dark .badge-suspended {
	background-color: rgba(239, 68, 68, 0.2);
	color: rgb(252 165 165);
}

/* Level badges */
.badge-nivel-1 {
	background-color: rgb(237 233 254);
	color: rgb(91 33 182);
}
.dark .badge-nivel-1 {
	background-color: rgba(139, 92, 246, 0.2);
	color: rgb(196 181 253);
}

.badge-nivel-2 {
	background-color: rgb(254 243 199);
	color: rgb(146 64 14);
}
.dark .badge-nivel-2 {
	background-color: rgba(245, 158, 11, 0.2);
	color: rgb(252 211 77);
}

.badge-nivel-3 {
	background-color: rgb(254 226 226);
	color: rgb(153 27 27);
}
.dark .badge-nivel-3 {
	background-color: rgba(239, 68, 68, 0.2);
	color: rgb(252 165 165);
}

.badge-nivel-4 {
	background-color: rgb(219 234 254);
	color: rgb(30 64 175);
}
.dark .badge-nivel-4 {
	background-color: rgba(59, 130, 246, 0.2);
	color: rgb(147 197 253);
}

/* Column settings modal */
.column-settings-item {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	cursor: grab;
	transition: background-color 0.15s;
}
.column-settings-item:hover {
	background-color: rgb(243 244 246);
}
.dark .column-settings-item:hover {
	background-color: rgb(55 65 81);
}
.column-settings-item.dragging {
	opacity: 0.5;
	background-color: rgb(219 234 254);
}

/* Relative date colors */
.date-recent { color: rgb(22 163 74); } /* < 3 months - green */
.date-medium { color: rgb(139 92 246); } /* 3-6 months - violet */
.date-old { color: rgb(245 158 11); } /* 6+ months - amber */

.dark .date-recent { color: rgb(74 222 128); }
.dark .date-medium { color: rgb(167 139 250); }
.dark .date-old { color: rgb(251 191 36); }

/* Table compact mode */
.table-compact td { padding: 0.5rem 0.75rem; }
.table-compact th { padding: 0.5rem 0.75rem; }

/* Action buttons in table */
.action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.375rem;
	border-radius: 0.375rem;
	transition: all 0.15s;
}
.action-btn:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgb(102 126 234);
}

/* Action button gradients */

/* WhatsApp - green gradient */
.whatsapp-btn {
	background: linear-gradient(135deg, #128C7E 0%, #25D366 20%, #25D366 80%, #075E54 100%);
	border: 1px solid #128C7E;
}
.whatsapp-btn:hover {
	background: linear-gradient(135deg, #075E54 0%, #25D366 30%, #25D366 70%, #128C7E 100%);
	box-shadow: 0 2px 8px rgba(37, 211, 102, 0.4);
}

/* Edit - orange gradient */
.edit-btn {
	background: linear-gradient(135deg, #EA580C 0%, #F97316 20%, #F97316 80%, #C2410C 100%);
	border: 1px solid #EA580C;
}
.edit-btn:hover {
	background: linear-gradient(135deg, #C2410C 0%, #F97316 30%, #F97316 70%, #EA580C 100%);
	box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
}

/* Delete - red gradient (dangerous) */
.delete-btn {
	background: linear-gradient(135deg, #B91C1C 0%, #DC2626 20%, #DC2626 80%, #991B1B 100%);
	border: 1px solid #B91C1C;
}
.delete-btn:hover {
	background: linear-gradient(135deg, #991B1B 0%, #EF4444 30%, #EF4444 70%, #B91C1C 100%);
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
}

/* Additional button colors */
.bg-emerald-500 { background-color: rgb(16 185 129); }
.bg-emerald-600 { background-color: rgb(5 150 105); }
.hover\:bg-emerald-600:hover { background-color: rgb(5 150 105); }
.bg-blue-500 { background-color: rgb(59 130 246); }
.bg-blue-600 { background-color: rgb(37 99 235); }
.hover\:bg-blue-600:hover { background-color: rgb(37 99 235); }
.bg-red-600 { background-color: rgb(220 38 38); }
.bg-red-700 { background-color: rgb(185 28 28); }
.hover\:bg-red-700:hover { background-color: rgb(185 28 28); }
.border-red-700 { border-color: rgb(185 28 28); }

/* Flex utilities */
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }

/* ========================================
   COURSES MANAGEMENT STYLES
   ======================================== */

/* Course status badges */
.badge-scheduled {
	background-color: rgb(219 234 254);
	color: rgb(29 78 216);
}
.dark .badge-scheduled {
	background-color: rgba(59, 130, 246, 0.2);
	color: rgb(147 197 253);
}

.badge-ongoing {
	background-color: rgb(220 252 231);
	color: rgb(22 101 52);
}
.dark .badge-ongoing {
	background-color: rgba(34, 197, 94, 0.2);
	color: rgb(134 239 172);
}

.badge-completed {
	background-color: rgb(243 244 246);
	color: rgb(75 85 99);
}
.dark .badge-completed {
	background-color: rgba(107, 114, 128, 0.2);
	color: rgb(209 213 219);
}

.badge-cancelled {
	background-color: rgb(254 226 226);
	color: rgb(153 27 27);
}
.dark .badge-cancelled {
	background-color: rgba(239, 68, 68, 0.2);
	color: rgb(252 165 165);
}

/* Enrollment status badges */
.badge-enrolled {
	background-color: rgb(219 234 254);
	color: rgb(29 78 216);
}
.dark .badge-enrolled {
	background-color: rgba(59, 130, 246, 0.2);
	color: rgb(147 197 253);
}

.badge-attended {
	background-color: rgb(220 252 231);
	color: rgb(22 101 52);
}
.dark .badge-attended {
	background-color: rgba(34, 197, 94, 0.2);
	color: rgb(134 239 172);
}

.badge-no-show {
	background-color: rgb(254 249 195);
	color: rgb(133 77 14);
}
.dark .badge-no-show {
	background-color: rgba(234, 179, 8, 0.2);
	color: rgb(253 224 71);
}

/* Payment status badges */
.badge-paid {
	background-color: rgb(220 252 231);
	color: rgb(22 101 52);
}
.dark .badge-paid {
	background-color: rgba(34, 197, 94, 0.2);
	color: rgb(134 239 172);
}

.badge-payment-pending {
	background-color: rgb(254 249 195);
	color: rgb(133 77 14);
}
.dark .badge-payment-pending {
	background-color: rgba(234, 179, 8, 0.2);
	color: rgb(253 224 71);
}

.badge-refunded {
	background-color: rgb(243 244 246);
	color: rgb(75 85 99);
}
.dark .badge-refunded {
	background-color: rgba(107, 114, 128, 0.2);
	color: rgb(209 213 219);
}

/* Capacity progress bar */
.capacity-bar {
	height: 4px;
	border-radius: 2px;
	background-color: rgb(229 231 235);
	overflow: hidden;
}
.dark .capacity-bar {
	background-color: rgb(75 85 99);
}

.capacity-fill {
	height: 100%;
	border-radius: 2px;
	transition: width 0.3s ease;
}

.capacity-fill.low { background-color: rgb(34 197 94); }
.capacity-fill.medium { background-color: rgb(59 130 246); }
.capacity-fill.high { background-color: rgb(245 158 11); }
.capacity-fill.full { background-color: rgb(239 68 68); }