/* =========================================================================
   Shared Styles for Alpaca Markets Options Projects
   ========================================================================= */

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Toast Notifications */
.toast {
    @apply bg-slate-800 border border-slate-700 rounded-xl p-4 shadow-2xl pointer-events-auto;
    animation: slideIn 0.3s ease-out;
}

.toast-success {
    @apply border-emerald-500/50 bg-emerald-950/50;
}

.toast-error {
    @apply border-rose-500/50 bg-rose-950/50;
}

.toast-warning {
    @apply border-amber-500/50 bg-amber-950/50;
}

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

/* Table Styles */
.options-table {
    @apply w-full text-left text-xs text-slate-300 border-collapse;
}

.options-table thead {
    @apply bg-slate-950/80 text-slate-400 uppercase font-semibold text-[11px] tracking-wider border-b border-slate-800;
}

.options-table tbody {
    @apply divide-y divide-slate-800/60 font-mono;
}

.options-table th,
.options-table td {
    @apply py-3.5 px-4;
}

/* Button Styles */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-500 text-white font-semibold px-4 py-2 rounded-lg transition shadow-lg;
}

.btn-secondary {
    @apply bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 px-4 py-2 rounded-lg transition;
}

.btn-success {
    @apply bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2 rounded-lg transition;
}

.btn-danger {
    @apply bg-rose-600 hover:bg-rose-500 text-white px-4 py-2 rounded-lg transition;
}

/* Card Styles */
.card {
    @apply bg-slate-900 border border-slate-800 rounded-xl p-6 shadow-xl;
}

.card-header {
    @apply border-b border-slate-800 pb-4 mb-4;
}

/* Badge Styles */
.badge {
    @apply px-2 py-0.5 rounded-full text-[10px] font-semibold;
}

.badge-green {
    @apply bg-emerald-500/10 text-emerald-400 border border-emerald-500/20;
}

.badge-yellow {
    @apply bg-amber-500/10 text-amber-400 border border-amber-500/20;
}

.badge-orange {
    @apply bg-orange-500/10 text-orange-400 border border-orange-500/20;
}

.badge-red {
    @apply bg-rose-500/10 text-rose-400 border border-rose-500/20;
}

.badge-blue {
    @apply bg-blue-500/10 text-blue-400 border border-blue-500/20;
}

/* Input Styles */
.input {
    @apply bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-blue-500 transition;
}

.input-sm {
    @apply px-2 py-1 text-xs;
}

/* Loading Spinner */
.spinner {
    @apply inline-block w-5 h-5 border-2 border-slate-600 border-t-blue-500 rounded-full;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Modal Styles */
.modal-overlay {
    @apply fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-slate-900 border border-slate-800 rounded-2xl max-w-4xl w-full shadow-2xl relative;
}

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

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

.modal-footer {
    @apply flex items-center justify-end space-x-3 border-t border-slate-800 p-6;
}