/* ============================================
   BASE STYLES - Reset & Typography
   ICT Analyzer Pro V30 - Performance Optimized
============================================ */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* V31: Force English/Western numerals EVERYWHERE */
@font-face {
    font-family: 'NumericOverride';
    src: local('Roboto Mono'), local('Consolas'), local('Monaco');
    unicode-range: U+0030-0039; /* 0-9 */
}

html {
    font-feature-settings: "lnum" 1, "tnum" 1 !important;
    font-variant-numeric: lining-nums tabular-nums !important;
}

/* V31: html rule above inherits to all children — no need for body * */

/* V31: All numeric elements - FORCE LTR + English font */
.numeric, .price, .pnl, .balance, .percentage, .value, .number,
[data-value], [class*="price"], [class*="pnl"], [class*="balance"],
[class*="percent"], [class*="change"], [class*="count"], [class*="total"],
.tf-btn, .timeframe-btn, .stat-value, .metric-value, .badge,
.countdown, .timer, .time-label, .chart-info span,
/* V31: Additional elements that show numbers */
.notification-item-time, .toast-minimal-text,
.market-countdown, .market-time, .market-current-time,
.ohlc-value, .crosshair-value, [id*="Time"], [id*="time"],
.signal-confidence, .signal-price, .signal-entry, .signal-sl, .signal-tp,
.position-pnl, .position-price, .position-qty,
.bm-input-wrap input, .paper-balance, #paperBalance {
    font-family: 'Roboto Mono', 'Consolas', monospace !important;
    font-feature-settings: "lnum" 1, "tnum" 1 !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

/* V31: Inputs always Western numerals */
input, select, textarea {
    font-family: 'Roboto Mono', var(--font-family);
    font-feature-settings: "lnum" 1, "tnum" 1 !important;
}

/* V31: font-feature-settings inherited from html rule above */

/* V30: Performance - GPU acceleration for animated elements */
.modal, .toast {
    will-change: transform;
    contain: layout style;
}

/* V30: Reduce paint areas */
.toolbar-btn, .btn {
    contain: layout;
}

/* HTML & Body - Full Height */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    line-height: 1.6;
}

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

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

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

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

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* GPU Acceleration */
.modal {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Content Containment */
.signals-list,
.positions-list,
.controls-content {
    contain: content;
}

/* Reduce Paint Complexity */
.signal-item,
.position-item {
    isolation: isolate;
}

/* Smooth Scrolling */
.signals-list,
.positions-list {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg,
    var(--bg-tertiary) 25%,
    var(--bg-hover) 50%,
    var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 1rem;
    width: 80%;
    margin-bottom: 0.5rem;
}

.skeleton-text.short { width: 40%; }

.skeleton-signal {
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.skeleton-line {
    background: linear-gradient(90deg,
    var(--bg-tertiary) 25%,
    var(--bg-hover) 50%,
    var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}