/* Alpine.js cloak directive - hide elements until Alpine is ready */
[x-cloak] {
    display: none !important;
}

/* Status Badge Styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

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

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

.badge-winner, .badge-buy {
    @apply bg-green-100 text-green-800;
}

.badge-loser, .badge-skip {
    @apply bg-red-100 text-red-800;
}

.badge-watching, .badge-watch {
    @apply bg-yellow-100 text-yellow-800;
}

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

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

/* Price Change Colors */
.price-up {
    @apply text-green-600 font-semibold;
}

.price-down {
    @apply text-red-600 font-semibold;
}

.price-neutral {
    @apply text-gray-600;
}

/* Card Styles */
.card {
    @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-200;
}

.card-header {
    @apply flex justify-between items-center mb-4 pb-4 border-b border-gray-200;
}

.card-title {
    @apply text-xl font-bold text-gray-800;
}

.card-subtitle {
    @apply text-sm text-gray-600;
}

/* Button Styles */
.btn {
    @apply px-4 py-2 rounded-md font-medium transition duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

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

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

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

.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;
}

.btn-lg {
    @apply px-6 py-3 text-lg;
}

/* Form Styles */
.form-group {
    @apply mb-4;
}

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

.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm;
}

.form-textarea {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm;
}

.form-select {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm;
}

.form-error {
    @apply text-red-600 text-sm mt-1;
}

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

.modal-container {
    @apply bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-screen overflow-y-auto;
}

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

.modal-title {
    @apply text-xl font-bold text-gray-800;
}

.modal-body {
    @apply p-6;
}

.modal-footer {
    @apply flex justify-end space-x-3 p-6 border-t border-gray-200;
}

/* Timeline Styles */
.timeline {
    @apply relative;
}

.timeline-item {
    @apply relative pb-8;
}

.timeline-item:last-child {
    @apply pb-0;
}

.timeline-line {
    @apply absolute top-0 left-4 w-0.5 h-full bg-gray-300;
}

.timeline-dot {
    @apply absolute top-0 left-0 w-8 h-8 rounded-full flex items-center justify-center z-10;
}

.timeline-content {
    @apply ml-12 bg-white rounded-lg shadow p-4;
}

/* Table Styles */
.table-container {
    @apply overflow-x-auto shadow ring-1 ring-black ring-opacity-5 rounded-lg;
}

.table {
    @apply min-w-full divide-y divide-gray-300;
}

.table-header {
    @apply bg-gray-50;
}

.table-th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.table-row {
    @apply hover:bg-gray-50 transition duration-150;
}

/* Stat Card Styles */
.stat-card {
    @apply bg-white rounded-lg shadow p-6;
}

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

.stat-label {
    @apply text-sm text-gray-600 mt-1;
}

.stat-icon {
    @apply w-12 h-12 text-purple-600;
}