/* ==========================================================================
   1. FONT & GLOBAL STYLES
   ========================================================================== */

/* FIX: Explicitly set the color scheme to dark to prevent system light theme overrides. */
html.dark {
    color-scheme: dark;
}

body {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, 'Noto Serif Khmer', 'Nokora', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    transition: background-color 0.3s ease, color 0.3s ease;
    --banner-height: 0px;
    background-color: #000000;
    color: #ffffff; /* Default light gray text color for the app */
}
h1, h2, h3, h4 {
	color: #ffffff!important; /* Default light gray text color for the app */
}

/* FIX: Force all elements to inherit the body's text color by default.
   This prevents the browser's light theme from overriding specific element colors (like headings)
   while still allowing Tailwind's color utility classes (e.g., .text-purple-300) to work correctly. */
.dark * {
    color: inherit;
}


/* Paragraph line height override for better readability in data sections */
#ai-trade-idea-content p,
#symbol-impact-news-list p,
#anticipated-events-container p,
#scenarios-container p,
#ai-sentiment-container p,
#sniper-signal-summary,
.sr-table td {
    line-height: 1.8 !important;
    /* FIX: Add word wrapping to prevent text overflow on translation */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* FIX: Ensure flex containers with text can shrink properly to prevent overflow */
#scenarios-container .flex > div,
#sniper-signal-summary,
#ai-trade-idea-content,
#symbol-impact-news-list li {
    min-width: 0; /* This is the key fix for flexbox overflow */
}


/* ==========================================================================
   2. THEME OVERRIDES
   ========================================================================== */

/* Forcing a darker Dark Chocolate theme by overriding Tailwind utility classes */
.bg-gray-800 {
    background-color: #1F140C !important; /* Darker Chocolate */
}
.bg-gray-700 {
    background-color: #2C1D12 !important; /* Mid-Dark Chocolate for headers */
}
.bg-gray-900 {
    background-color: #1a1a1a !important; 
}
.border-gray-700 {
    border-color: #3A2A1F !important;
}
.divide-gray-700 {
    border-color: #3A2A1F !important;
}

/* Form element styling */
select, input, textarea {
    background-color: #1a1a1a;
    color: #f3f4f6;
    border-color: #333333;
}
select option { 
    background-color: #1a1a1a; 
    color: #f3f4f6; 
}

/* Custom select arrow for dark mode */
select { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none; 
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%239CA3AF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E'); 
    background-repeat: no-repeat; 
    background-position: right 0.7rem center; 
    background-size: 0.65em auto; 
    padding-right: 2.5rem; 
}

/* Textarea styling */
.fixed-height-textarea { 
    height: 70px; 
    min-height: 70px; 
    resize: vertical; 
}
#prompt-display-output {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    cursor: text;
}

/* ==========================================================================
   S/R Dashboard Table Styles
   ========================================================================== */
.sr-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.8rem; /* Smaller font for a compact look */
}

.sr-table thead th {
    background-color: #2C1D12; /* Mid-Dark Chocolate */
    color: #ffffff; /* zinc-400 */
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sr-table tbody tr {
    border-bottom: 1px solid #3A2A1F;
    transition: background-color 0.2s ease-in-out;
}

.sr-table tbody tr:last-child {
    border-bottom: none;
}

.sr-table tbody tr:hover {
    background-color: #2C1D12; /* Same as header for hover */
}

.sr-table td {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

.sr-table .support-level strong {
    color: #4ade80; /* green-400 */
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.sr-table .resistance-level strong {
    color: #f87171; /* red-400 */
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.sr-table .strength-level {
    font-style: italic;
    color: #d4d4d8; /* zinc-300 */
}

/* Highlight for the active S/R range */
.sr-table tr.sr-highlight-active {
    background-color: rgba(167, 139, 250, 0.18); /* A transparent violet */
    border-left: 3px solid #a78bfa; /* violet-400 */
    border-right: 3px solid #a78bfa; /* violet-400 */
}

.sr-table tr.sr-highlight-active td {
    font-weight: bold;
}

/* ==========================================================================
   5. CHART-SPECIFIC STYLES
   ========================================================================== */

.chart-container {
    overflow: auto; /* Enable scrolling */
    cursor: grab;
    border-radius: 0.5rem;
    border: 1px solid #374151; /* gray-700 */
    position: relative; /* For session overlay positioning */
    max-height: 45vh; /* Set a maximum height relative to the viewport */
    height: 45vh;
}
.chart-container.grabbing {
    cursor: grabbing;
}
.chart-zoom-btn{
	color: #000000;
}
/* FIX: Directly target the SVG for a white background */
#candlestick-chart-svg {
    background-color: #ffffff;
}

/* Session Labels Overlay */
.session-label-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}
.label-container {
    position: absolute;
    top: 0;
    left: 0;
}
.session-label {
    position: absolute;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    opacity: 0.7;
}
.session-label.dark { color: #d1d5db; }
.session-label.light { color: #374151; }

/* S/R Confluence Zones */
.sr-confluence-zone {
    opacity: 0.1;
}
.sr-confluence-zone.support { fill: #22c55e; } /* green-500 */
.sr-confluence-zone.resistance { fill: #ef4444; } /* red-500 */
.sr-confluence-zone.mixed { fill: #8b5cf6; } /* violet-500 */

/* Order Block Styles */
.order-block {
    opacity: 0.15;
}
.order-block.bullish { fill: #3b82f6; } /* blue-500 */
.order-block.bearish { fill: #f97316; } /* orange-500 */

/* Volume Profile Styles */
.volume-profile-bar {
    fill-opacity: 0.3;
}
.volume-profile-poc {
    fill-opacity: 0.6;
}

/* Crosshair Style */
.crosshair {
    pointer-events: none; 
}

/* Timeframe Switch Styles */
.timeframe-btn {
    padding: 0.5rem 1rem; /* Increased padding for easier clicking */
    border: none;
    background-color: transparent;
    color: #9ca3af; /* gray-400 */
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 0.375rem; /* rounded-md */
}

.timeframe-btn.active {
    background-color: #4f46e5; /* indigo-600 */
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.timeframe-btn:not(.active):hover {
    background-color: #374151; /* gray-700 */
    color: #ffffff;
}

/* ==========================================================================
   7. ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* Generic spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spinner {
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
}

/* Fetch button icon animation */
#fetch-AI-data svg#fetch-action-icon {
    transition: transform 0.3s ease-in-out;
}
#fetch-AI-data:hover:not(:disabled) svg#fetch-action-icon:not(.no-hover-effect) {
    transform: rotate(180deg) scale(1.1);
}
#fetch-AI-data:active:not(:disabled) svg#fetch-action-icon:not(.no-hover-effect) {
    transform: rotate(360deg) scale(1);
}

/* Onboarding pulse animation */
@keyframes first-time-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(216, 180, 254, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 12px rgba(216, 180, 254, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(216, 180, 254, 0);
    }
}

/* Onboarding arrow bounce animation */
@keyframes bounce-arrow-horizontal {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0) rotate(90deg);
    }
    40% {
        transform: translateX(-15px) rotate(90deg);
    }
    60% {
        transform: translateX(-7px) rotate(90deg);
    }
}

/* Auto-refresh indicator glow - OPTIMIZED */
@keyframes aura-glow {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.7;
    }
    70% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
}

/* AI Button Loading Animation */
.ai-button.loading {
    animation: ai-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes ai-pulse {
    50% {
        transform: scale(1.05);
        box-shadow: 0 10px 15px -3px rgb(249 115 22 / 0.2), 0 4px 6px -4px rgb(249 115 22 / 0.2);
    }
}

/* Content Card Animations */
@keyframes slideUpFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.content-card {
    opacity: 0;
    transform: translateY(25px);
    animation: slideUpFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
#sentiment-section.content-card { animation-delay: 0.1s; }
#trend-signal-section.content-card { animation-delay: 0.2s; }
#ai-insights-section.content-card { animation-delay: 0.3s; }
#pattern-insights-section.content-card { animation-delay: 0.4s; }
#anticipated-events-section.content-card { animation-delay: 0.5s; }
#candlestick-chart-section.content-card { animation-delay: 0.6s; }
#sr-dashboard-section.content-card { animation-delay: 0.7s; }
#candle-data-section.content-card { animation-delay: 0.8s; }


/* Rolling Digit Animation */
.digit-display-wrapper {
    height: 2.25rem; /* Match font size 2xl line-height */
}
.digit-display {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.digit-char-container {
    display: inline-block;
    height: 2rem; /* h-8 */
    line-height: 2rem; /* leading-8 */
    overflow: hidden;
}
.digit-reel {
    display: inline-block;
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.digit-reel > div {
    height: 2rem;
}
.digit-static {
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
}

/* Laser Beam Loading Animation - MODIFIED */
#laser-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998; /* Below modals but above content */
    pointer-events: none;
    overflow: hidden;
}

#laser-loading-overlay.loading {
    display: block;
}

.laser-beam {
    position: absolute;
    background: linear-gradient(90deg, transparent, #fb923c, transparent);
    box-shadow: 0 0 10px #fb923c, 0 0 20px #fb923c, 0 0 30px #f97316;
    opacity: 0;
    animation: laser-fade 2.5s linear infinite; /* Apply new fade animation */
}

.laser-beam.top { top: 0; left: 0; width: 100%; height: 3px; animation-delay: 0s; }
.laser-beam.right { top: 0; right: 0; width: 3px; height: 100%; animation-delay: 0.6s; }
.laser-beam.bottom { bottom: 0; left: 0; width: 100%; height: 3px; animation-delay: 1.2s; }
.laser-beam.left { top: 0; left: 0; width: 3px; height: 100%; animation-delay: 1.8s; }

/* New fade-in/out keyframe for the laser effect */
@keyframes laser-fade {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}


/* Super Trend Beam Shadow - MODIFIED */
.super-trend-beam {
    /* The animation property has been removed. */
    /* A subtle drop-shadow provides a static glow effect. */
    /* The main blur effect is handled by the SVG filter in chartOverlays.js */
    opacity: 0.7;
    filter: drop-shadow(0 0 3px currentColor);
}

/* Punch Me Button Animation */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}