/*
 * NOTE: Most styling is done via Tailwind CSS classes in the HTML.
 * This stylesheet contains custom styles and overrides.
 */

body {
    font-family: 'Inter', sans-serif;
    background-color: #0f172a; /* slate-900 */
    /* Adds a subtle dot grid background */
    background-image: radial-gradient(circle at 1px 1px, #334155 1px, transparent 0);
    background-size: 20px 20px;
}

/* "Glassmorphism" effect for main panels */
.glass-pane {
    background-color: rgba(30, 41, 59, 0.5); /* slate-800 with 50% opacity */
    backdrop-filter: blur(12px); /* The blur effect */
    border: 1px solid rgba(51, 65, 85, 0.7); /* slate-700 with 70% opacity */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Styling for input fields */
.form-input {
    background-color: #1e293b; /* slate-800 */
    border-color: #334155; /* slate-700 */
    color: #f1f5f9; /* slate-100 */
    transition: all 0.2s ease-in-out;
}

.form-input:focus {
    outline: none;
    border-color: #38bdf8; /* sky-400 */
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3); /* Adds a glow effect on focus */
}

.form-input::placeholder {
    color: #64748b; /* slate-500 */
}

/* FIX: Ensure dropdown options are readable on default light backgrounds */
select.form-input option {
    color: #1e293b; /* A dark color for the text */
    background-color: #f8fafc; /* A light background for the options */
}

/* Gradient and hover effects for the primary button */
.btn-gradient-primary {
    background-image: linear-gradient(to right, #3b82f6, #60a5fa);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(59, 130, 246, 0.4);
}

.btn-gradient-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(59, 130, 246, 0.5);
}

/* Styling for secondary buttons */
.btn-secondary {
    background-color: #334155; /* slate-700 */
    border: 1px solid #475569; /* slate-600 */
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background-color: #475569; /* slate-600 */
    border-color: #64748b; /* slate-500 */
}

/* Text and bar colors for analysis results */
.result-bullish { color: #22c55e; } .bar-bullish { background-color: #22c55e; }
.result-bearish { color: #ef4444; } .bar-bearish { background-color: #ef4444; }
.result-neutral { color: #f59e0b; } .bar-neutral { background-color: #f59e0b; }

/* Custom scrollbar for the candle inputs container */
#candle-inputs-container::-webkit-scrollbar { width: 8px; }
#candle-inputs-container::-webkit-scrollbar-track { background: transparent; }
#candle-inputs-container::-webkit-scrollbar-thumb {
    background-color: #475569; /* slate-600 */
    border-radius: 10px;
    border: 2px solid #1e293b; /* slate-800 */
}

/* Spinning loader animation */
.loader {
    border: 4px solid #4b5563; /* slate-600 */
    border-left-color: #ffffff; /* white */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 
    to { 
        transform: rotate(360deg); 
    } 
}

/* Notification styles for alerts */
.notification {
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(110%);
    opacity: 0;
    background-color: #dc2626; /* red-600 */
    box-shadow: 0 4px 15px 0 rgba(220, 38, 38, 0.5);
}

.notification.show { 
    transform: translateX(0); 
    opacity: 1; 
}