/**
 * Custom CSS for Trading System UI
 * Extends Tailwind CSS with additional styles
 */

/* ============================================================
   GLOBAL LOADING INDICATOR
   ============================================================ */

/* Global loader overlay */
.global-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Semi-transparent backdrop */
.loader-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

/* Chess loader container */
.chess-loader {
    position: relative;
    z-index: 1;
}

/* Chess board grid - 4x4 */
.chess-board {
    display: grid;
    grid-template-columns: repeat(4, 20px);
    grid-template-rows: repeat(4, 20px);
    gap: 2px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: chess-pulse 1.5s ease-in-out infinite;
}

/* Individual chess squares */
.chess-square {
    width: 20px;
    height: 20px;
    border-radius: 2px;
}

/* Green squares */
.chess-square.green {
    background: #10B981;
    animation: square-pulse-green 1.5s ease-in-out infinite;
}

/* Orange squares */
.chess-square.orange {
    background: #F97316;
    animation: square-pulse-orange 1.5s ease-in-out infinite 0.3s;
}

/* Pulse animation for the whole board */
@keyframes chess-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* Green square pulse */
@keyframes square-pulse-green {
    0%, 100% {
        background: #10B981;
        box-shadow: 0 0 0 rgba(16, 185, 129, 0);
    }
    50% {
        background: #34D399;
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
    }
}

/* Orange square pulse */
@keyframes square-pulse-orange {
    0%, 100% {
        background: #F97316;
        box-shadow: 0 0 0 rgba(249, 115, 22, 0);
    }
    50% {
        background: #FB923C;
        box-shadow: 0 0 12px rgba(249, 115, 22, 0.6);
    }
}

/* Bloomberg Theme - Electric Green & Gold */
[data-theme="bloomberg"] .chess-square.green {
    background: #00FF00;
}

[data-theme="bloomberg"] .chess-square.orange {
    background: #FFD700;
}

[data-theme="bloomberg"] @keyframes square-pulse-green {
    0%, 100% {
        background: #00FF00;
        box-shadow: 0 0 0 rgba(0, 255, 0, 0);
    }
    50% {
        background: #33FF33;
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.8);
    }
}

[data-theme="bloomberg"] @keyframes square-pulse-orange {
    0%, 100% {
        background: #FFD700;
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
    50% {
        background: #FFE55C;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    }
}

/* HFT Theme - Cyan & Magenta */
[data-theme="hft"] .chess-square.green {
    background: #00D4FF;
}

[data-theme="hft"] .chess-square.orange {
    background: #FF00FF;
}

[data-theme="hft"] @keyframes square-pulse-green {
    0%, 100% {
        background: #00D4FF;
        box-shadow: 0 0 0 rgba(0, 212, 255, 0);
    }
    50% {
        background: #33E0FF;
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
    }
}

[data-theme="hft"] @keyframes square-pulse-orange {
    0%, 100% {
        background: #FF00FF;
        box-shadow: 0 0 0 rgba(255, 0, 255, 0);
    }
    50% {
        background: #FF33FF;
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
    }
}

/* ============================================================
   STRATEGY ADD BUTTON CHESS ICON
   ============================================================ */

/* Quick pulse animation for chess icon */
.chess-icon-pulse {
    animation: chess-icon-pulse-quick 0.8s ease-in-out infinite;
}

@keyframes chess-icon-pulse-quick {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Pause animation on button hover */
.strategy-add-btn:hover .chess-icon-pulse {
    animation: none;
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   SCROLLBAR UTILITIES
   ============================================================ */

/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

/* ============================================================
   SCROLLBAR STYLING
   ============================================================ */

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color, #374151);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-brand, #60A5FA);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #374151) transparent;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

/* Fade in animation for HTMX loaded content */
.htmx-settling {
    opacity: 0;
}

.htmx-swapping {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.htmx-added {
    opacity: 0;
}

/* Pulse animation for loading indicators */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
}

.pulse-glow {
    animation: pulse-glow 2s infinite;
}


/* ============================================================
   TABLE STYLES
   ============================================================ */

/* Stable table layout - prevents column width shifts when content changes */
.table-stable {
    table-layout: fixed;
    width: 100%;
}

/* Tabular numbers for consistent digit widths (prevents shaking on time updates) */
.tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Fixed width columns for dynamic content */
.col-time {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    text-align: center;
    padding-right: 16px;
}

.col-status {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    text-align: center;
}

.col-signals {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}

.col-actions {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    text-align: center;
    padding-left: 16px;
}

.col-pnl {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    text-align: right;
}

.col-qty {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}

.col-price {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    text-align: right;
}

/* Striped table rows */
.table-striped tbody tr:nth-child(odd) {
    background-color: rgba(55, 65, 81, 0.3);
}

/* Hover effect for table rows */
.table-hover tbody tr:hover {
    background-color: rgba(55, 65, 81, 0.5);
}


/* ============================================================
   CARD STYLES
   ============================================================ */

/* Card hover effect */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}


/* ============================================================
   TRADING SPECIFIC STYLES
   ============================================================ */

/* Profit/Loss colors */
.pnl-positive {
    color: #10B981;
}

.pnl-negative {
    color: #EF4444;
}

/* Buy/Sell badge colors */
.badge-buy {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-sell {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Status badges */
.badge-pending {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.badge-complete {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.badge-rejected {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

/* ============================================================
   BLOOMBERG THEME SPECIFIC STYLES
   ============================================================ */

/* Bloomberg: Keyframe Animations */
@keyframes bloomberg-flash-positive {
    0% { background-color: transparent; }
    50% { background-color: rgba(0, 255, 0, 0.2); box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); }
    100% { background-color: transparent; }
}

@keyframes bloomberg-flash-negative {
    0% { background-color: transparent; }
    50% { background-color: rgba(255, 51, 51, 0.2); box-shadow: 0 0 10px rgba(255, 51, 51, 0.3); }
    100% { background-color: transparent; }
}

@keyframes bloomberg-shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes bloomberg-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 5px currentColor;
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 15px currentColor;
    }
}

/* Bloomberg: Animation utility classes */
[data-theme="bloomberg"] .flash-positive {
    animation: bloomberg-flash-positive 0.6s ease-out;
}

[data-theme="bloomberg"] .flash-negative {
    animation: bloomberg-flash-negative 0.6s ease-out;
}

[data-theme="bloomberg"] .shimmer {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 140, 0, 0.1) 50%, transparent 100%);
    background-size: 1000px 100%;
    animation: bloomberg-shimmer 2s infinite linear;
}

[data-theme="bloomberg"] .pulse-indicator {
    animation: bloomberg-pulse 2s infinite;
}

/* Bloomberg: Badge overrides */
[data-theme="bloomberg"] .badge-pending {
    background-color: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    border: 1px solid #FFD700;
}

[data-theme="bloomberg"] .badge-complete {
    background-color: rgba(0, 255, 0, 0.1);
    color: #00FF00;
    border: 1px solid #00FF00;
}

[data-theme="bloomberg"] .badge-rejected {
    background-color: rgba(255, 51, 51, 0.1);
    color: #FF3333;
    border: 1px solid #FF3333;
}

/* Bloomberg: Grid cell styling for data-dense displays */
[data-theme="bloomberg"] .grid-cell {
    padding: 2px 4px;
    border: 1px solid #1E1E1E;
    font-size: 11px;
}

/* Bloomberg: Data panel with amber header */
[data-theme="bloomberg"] .data-panel {
    background-color: #000000;
    border: 1px solid #1E1E1E;
}

[data-theme="bloomberg"] .data-panel-header {
    background-color: #0A0A0A;
    color: #FF8C00;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10px;
    padding: 4px 8px;
    border-bottom: 1px solid #FF8C00;
}

/* Bloomberg: Ticker tape styling */
[data-theme="bloomberg"] .ticker-up {
    color: #00FF00;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

[data-theme="bloomberg"] .ticker-down {
    color: #FF3333;
    text-shadow: 0 0 5px rgba(255, 51, 51, 0.5);
}

[data-theme="bloomberg"] .ticker-neutral {
    color: #FFFFFF;
}

/* Bloomberg: Highlighted row for focus */
[data-theme="bloomberg"] tr.row-highlight {
    background-color: #1A1A00 !important;
    border-left: 2px solid #FFD700;
}

/* Bloomberg: Quick stats boxes */
[data-theme="bloomberg"] .stat-box {
    background-color: #0A0A0A;
    border: 1px solid #1E1E1E;
    padding: 8px 12px;
}

[data-theme="bloomberg"] .stat-box-label {
    color: #FF8C00;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

[data-theme="bloomberg"] .stat-box-value {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
}

/* ============================================================
   BLOOMBERG: PHASE 2 - HIGH-TRAFFIC PAGES
   ============================================================ */

/* Bloomberg: Dashboard - Stat Cards */
[data-theme="bloomberg"] .stat-box,
[data-theme="bloomberg"] .bg-gray-800,
[data-theme="bloomberg"] .bg-gray-700\/50 {
    background-color: #0A0A0A !important;
    border: 1px solid #1E1E1E !important;
}

[data-theme="bloomberg"] .stat-box-label,
[data-theme="bloomberg"] .text-gray-400,
[data-theme="bloomberg"] .text-gray-500 {
    color: #FF8C00 !important;
}

/* Bloomberg: Dashboard - Market Status with glow */
[data-theme="bloomberg"] .bg-green-900 {
    background-color: #001100 !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2) !important;
}

[data-theme="bloomberg"] .bg-red-900 {
    background-color: #110000 !important;
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.2) !important;
}

/* Bloomberg: Dashboard - Section icons (all amber) */
[data-theme="bloomberg"] svg.text-brand,
[data-theme="bloomberg"] .text-brand svg {
    color: #FF8C00 !important;
}

/* Bloomberg: Dashboard - Quick Actions buttons */
[data-theme="bloomberg"] button.bg-brand,
[data-theme="bloomberg"] a.bg-brand {
    background-color: #FF8C00 !important;
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.3) !important;
}

[data-theme="bloomberg"] button.bg-brand:hover,
[data-theme="bloomberg"] a.bg-brand:hover {
    background-color: #FFA500 !important;
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.5) !important;
}

/* Bloomberg: Markets - Ticker bar amber accents */
[data-theme="bloomberg"] .border-brand {
    border-color: #FF8C00 !important;
}

/* Bloomberg: Markets - Section headers with amber underline */
[data-theme="bloomberg"] h2,
[data-theme="bloomberg"] h3 {
    border-bottom: 1px solid #FF8C00 !important;
    padding-bottom: 4px !important;
}

/* Bloomberg: Positions - P&L Hero Metric with glow */
[data-theme="bloomberg"] .text-3xl,
[data-theme="bloomberg"] .text-4xl,
[data-theme="bloomberg"] .text-5xl {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
}

[data-theme="bloomberg"] .pnl-positive.text-3xl,
[data-theme="bloomberg"] .pnl-positive.text-4xl,
[data-theme="bloomberg"] .pnl-positive.text-5xl,
[data-theme="bloomberg"] .text-green-400.text-3xl,
[data-theme="bloomberg"] .text-green-400.text-4xl,
[data-theme="bloomberg"] .text-green-500.text-3xl {
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.5) !important;
}

[data-theme="bloomberg"] .pnl-negative.text-3xl,
[data-theme="bloomberg"] .pnl-negative.text-4xl,
[data-theme="bloomberg"] .pnl-negative.text-5xl,
[data-theme="bloomberg"] .text-red-400.text-3xl,
[data-theme="bloomberg"] .text-red-400.text-4xl,
[data-theme="bloomberg"] .text-red-500.text-3xl {
    text-shadow: 0 0 20px rgba(255, 51, 51, 0.5) !important;
}

/* Bloomberg: Positions - Summary card border glow */
[data-theme="bloomberg"] .border-green-500 {
    border-color: #00FF00 !important;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2) !important;
}

[data-theme="bloomberg"] .border-red-500 {
    border-color: #FF3333 !important;
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.2) !important;
}

/* Bloomberg: Positions - Long/Short badges with borders */
[data-theme="bloomberg"] .bg-green-600 {
    background-color: #002200 !important;
    border: 1px solid #00FF00 !important;
    color: #00FF00 !important;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3) !important;
}

[data-theme="bloomberg"] .bg-red-600 {
    background-color: #220000 !important;
    border: 1px solid #FF3333 !important;
    color: #FF3333 !important;
    box-shadow: 0 0 8px rgba(255, 51, 51, 0.3) !important;
}

/* Bloomberg: Positions - Exit button enhanced danger styling */
[data-theme="bloomberg"] button.bg-red-500,
[data-theme="bloomberg"] button.bg-red-600 {
    background-color: #FF3333 !important;
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.4) !important;
}

[data-theme="bloomberg"] button.bg-red-500:hover,
[data-theme="bloomberg"] button.bg-red-600:hover {
    background-color: #FF5555 !important;
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.6) !important;
}

/* ============================================================
   BLOOMBERG: PHASE 3 - TRADING CRITICAL PAGES
   ============================================================ */

/* Bloomberg: Orders - Buy button (electric green with glow) */
[data-theme="bloomberg"] button.bg-green-500,
[data-theme="bloomberg"] button.bg-green-600,
[data-theme="bloomberg"] .btn-buy {
    background-color: #00FF00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5) !important;
    border: 2px solid #00FF00 !important;
}

[data-theme="bloomberg"] button.bg-green-500:hover,
[data-theme="bloomberg"] button.bg-green-600:hover,
[data-theme="bloomberg"] .btn-buy:hover {
    background-color: #33FF33 !important;
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.7) !important;
}

/* Bloomberg: Orders - Sell button (electric red with glow) */
[data-theme="bloomberg"] button.bg-red-500:not(.bg-red-900),
[data-theme="bloomberg"] button.bg-red-600:not(.bg-red-900),
[data-theme="bloomberg"] .btn-sell {
    background-color: #FF3333 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.5) !important;
    border: 2px solid #FF3333 !important;
}

[data-theme="bloomberg"] button.bg-red-500:hover:not(.bg-red-900),
[data-theme="bloomberg"] button.bg-red-600:hover:not(.bg-red-900),
[data-theme="bloomberg"] .btn-sell:hover {
    background-color: #FF5555 !important;
    box-shadow: 0 0 25px rgba(255, 51, 51, 0.7) !important;
}

/* Bloomberg: Orders - Order status badges */
[data-theme="bloomberg"] .badge-complete,
[data-theme="bloomberg"] [x-text*="COMPLETE"],
[data-theme="bloomberg"] span:contains("COMPLETE") {
    background-color: rgba(0, 255, 0, 0.1) !important;
    color: #00FF00 !important;
    border: 1px solid #00FF00 !important;
}

[data-theme="bloomberg"] .badge-pending,
[data-theme="bloomberg"] [x-text*="PENDING"],
[data-theme="bloomberg"] [x-text*="OPEN"] {
    background-color: rgba(255, 215, 0, 0.1) !important;
    color: #FFD700 !important;
    border: 1px solid #FFD700 !important;
    animation: bloomberg-pulse 2s infinite !important;
}

[data-theme="bloomberg"] .badge-rejected,
[data-theme="bloomberg"] [x-text*="CANCELLED"],
[data-theme="bloomberg"] [x-text*="REJECTED"] {
    background-color: rgba(255, 51, 51, 0.1) !important;
    color: #FF3333 !important;
    border: 1px solid #FF3333 !important;
}

/* Bloomberg: Scanner - Toggle buttons with colored glow when ON */
[data-theme="bloomberg"] input[type="checkbox"]:checked + label,
[data-theme="bloomberg"] .toggle-on {
    box-shadow: 0 0 12px currentColor !important;
}

/* Bloomberg: Scanner - Trade Execution toggle (green glow) */
[data-theme="bloomberg"] input[type="checkbox"]:checked + label:contains("Trade"),
[data-theme="bloomberg"] .toggle-trade:checked + label {
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.5) !important;
    border-color: #00FF00 !important;
}

/* Bloomberg: Scanner - Kite URLs toggle (amber glow) */
[data-theme="bloomberg"] input[type="checkbox"]:checked + label:contains("Kite"),
[data-theme="bloomberg"] .toggle-kite:checked + label {
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.5) !important;
    border-color: #FF8C00 !important;
}

/* Bloomberg: Scanner - Telegram toggle (cyan glow) */
[data-theme="bloomberg"] input[type="checkbox"]:checked + label:contains("Telegram"),
[data-theme="bloomberg"] .toggle-telegram:checked + label {
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.5) !important;
    border-color: #00BFFF !important;
}

/* Bloomberg: Scanner - Strategy status (pulsing amber when running) */
[data-theme="bloomberg"] .status-running,
[data-theme="bloomberg"] span:contains("Running") {
    color: #FF8C00 !important;
    animation: bloomberg-pulse 2s infinite !important;
}

/* Bloomberg: Scanner - Broker toggles with colored backgrounds */
[data-theme="bloomberg"] .broker-toggle {
    background-color: #0A0A0A !important;
    border: 1px solid #1E1E1E !important;
}

[data-theme="bloomberg"] .broker-toggle.active {
    border-color: #FF8C00 !important;
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.3) !important;
}

/* Bloomberg: SOS - Enhanced warning banner */
[data-theme="bloomberg"] .bg-red-900\/50,
[data-theme="bloomberg"] .border.border-red-500 {
    background-color: rgba(255, 51, 51, 0.15) !important;
    border: 2px solid #FF3333 !important;
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.3) !important;
}

/* Bloomberg: SOS - Emergency icon pulsing */
[data-theme="bloomberg"] .text-red-400 svg,
[data-theme="bloomberg"] svg.text-red-500 {
    animation: bloomberg-pulse 1.5s infinite !important;
    filter: drop-shadow(0 0 8px rgba(255, 51, 51, 0.6)) !important;
}

/* Bloomberg: SOS - EXIT ALL button (massive presence) */
[data-theme="bloomberg"] button:contains("EXIT ALL"),
[data-theme="bloomberg"] .btn-exit-all {
    background: linear-gradient(135deg, #FF3333 0%, #CC0000 100%) !important;
    color: #FFFFFF !important;
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    padding: 1rem 2rem !important;
    border: 3px solid #FF3333 !important;
    box-shadow: 0 0 30px rgba(255, 51, 51, 0.8) !important;
    animation: bloomberg-pulse 1s infinite !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

[data-theme="bloomberg"] button:contains("EXIT ALL"):hover,
[data-theme="bloomberg"] .btn-exit-all:hover {
    background: linear-gradient(135deg, #FF5555 0%, #EE0000 100%) !important;
    box-shadow: 0 0 40px rgba(255, 51, 51, 1) !important;
}

/* Bloomberg: SOS - Confirmation modal red border with glow */
[data-theme="bloomberg"] .modal-sos,
[data-theme="bloomberg"] div[x-show*="confirmSOS"] {
    border: 3px solid #FF3333 !important;
    box-shadow: 0 0 30px rgba(255, 51, 51, 0.5) !important;
}

/* Bloomberg: SOS - CONFIRM input red focus state */
[data-theme="bloomberg"] input[placeholder*="CONFIRM"]:focus,
[data-theme="bloomberg"] input[placeholder*="EXIT"]:focus {
    border-color: #FF3333 !important;
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.5) !important;
    background-color: rgba(255, 51, 51, 0.05) !important;
}

/* ============================================================
   BLOOMBERG: PHASE 4 - SUPPORTING PAGES
   ============================================================ */

/* Bloomberg: Backtest - Results metrics with glow on Return */
[data-theme="bloomberg"] .metric-return {
    font-size: 2rem !important;
    font-weight: 700 !important;
}

[data-theme="bloomberg"] .metric-return.positive,
[data-theme="bloomberg"] .return-positive {
    color: #00FF00 !important;
    text-shadow: 0 0 15px rgba(0, 255, 0, 0.5) !important;
}

[data-theme="bloomberg"] .metric-return.negative,
[data-theme="bloomberg"] .return-negative {
    color: #FF3333 !important;
    text-shadow: 0 0 15px rgba(255, 51, 51, 0.5) !important;
}

/* Bloomberg: Backtest - Win Rate with cyan accent */
[data-theme="bloomberg"] .win-rate,
[data-theme="bloomberg"] .metric-winrate {
    color: #00BFFF !important;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.3) !important;
}

/* Bloomberg: Backtest - Max Drawdown with red emphasis */
[data-theme="bloomberg"] .max-drawdown,
[data-theme="bloomberg"] .metric-drawdown {
    color: #FF3333 !important;
    font-weight: 600 !important;
}

/* Bloomberg: Backtest - Run Backtest button (green) */
[data-theme="bloomberg"] button:contains("Run Backtest"),
[data-theme="bloomberg"] button:contains("Start Backtest"),
[data-theme="bloomberg"] .btn-run-backtest {
    background-color: #00FF00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.4) !important;
}

[data-theme="bloomberg"] button:contains("Run Backtest"):hover,
[data-theme="bloomberg"] button:contains("Start Backtest"):hover,
[data-theme="bloomberg"] .btn-run-backtest:hover {
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6) !important;
}

/* Bloomberg: Funds - Available Cash with large font and green glow */
[data-theme="bloomberg"] .available-cash,
[data-theme="bloomberg"] .cash-balance {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #00FF00 !important;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.5) !important;
}

/* Bloomberg: Funds - Margin bar gradient with glow */
[data-theme="bloomberg"] .margin-bar {
    background: linear-gradient(90deg, #00FF00 0%, #FFD700 50%, #FF3333 100%) !important;
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.3) !important;
    height: 8px !important;
}

/* Bloomberg: Funds - Fund labels with appropriate colors */
[data-theme="bloomberg"] .label-used {
    color: #FFD700 !important;
}

[data-theme="bloomberg"] .label-available {
    color: #00FF00 !important;
}

[data-theme="bloomberg"] .label-collateral {
    color: #00BFFF !important;
}

/* Bloomberg: Settings - Status badges with borders */
[data-theme="bloomberg"] .status-connected {
    background-color: rgba(0, 255, 0, 0.1) !important;
    color: #00FF00 !important;
    border: 1px solid #00FF00 !important;
    padding: 4px 12px !important;
    border-radius: 2px !important;
}

[data-theme="bloomberg"] .status-pending {
    background-color: rgba(255, 215, 0, 0.1) !important;
    color: #FFD700 !important;
    border: 1px solid #FFD700 !important;
    padding: 4px 12px !important;
    border-radius: 2px !important;
}

[data-theme="bloomberg"] .status-disconnected,
[data-theme="bloomberg"] .status-error {
    background-color: rgba(255, 51, 51, 0.1) !important;
    color: #FF3333 !important;
    border: 1px solid #FF3333 !important;
    padding: 4px 12px !important;
    border-radius: 2px !important;
}

/* Bloomberg: Settings - Section icons (all amber) */
[data-theme="bloomberg"] .settings-icon,
[data-theme="bloomberg"] h3 svg {
    color: #FF8C00 !important;
}

/* Bloomberg: Settings - Test buttons (cyan accent) */
[data-theme="bloomberg"] button:contains("Test"),
[data-theme="bloomberg"] .btn-test {
    background-color: #00BFFF !important;
    color: #000000 !important;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.3) !important;
}

[data-theme="bloomberg"] button:contains("Test"):hover,
[data-theme="bloomberg"] .btn-test:hover {
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.5) !important;
}

/* Bloomberg: Settings - Save buttons (amber) */
[data-theme="bloomberg"] button:contains("Save"),
[data-theme="bloomberg"] .btn-save {
    background-color: #FF8C00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.3) !important;
}

[data-theme="bloomberg"] button:contains("Save"):hover,
[data-theme="bloomberg"] .btn-save:hover {
    background-color: #FFA500 !important;
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.5) !important;
}

/* Bloomberg: Profile - Avatar with amber gradient and glow */
[data-theme="bloomberg"] .avatar,
[data-theme="bloomberg"] .profile-avatar {
    border: 2px solid #FF8C00 !important;
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.4) !important;
}

/* Bloomberg: Profile - Connection pulse (green glow) */
[data-theme="bloomberg"] .connection-status {
    animation: bloomberg-pulse 2s infinite !important;
}

[data-theme="bloomberg"] .connection-status.connected {
    color: #00FF00 !important;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
}

/* Bloomberg: Profile - Exchange badges (amber text on dark bg) */
[data-theme="bloomberg"] .exchange-badge {
    background-color: #0A0A0A !important;
    color: #FF8C00 !important;
    border: 1px solid #FF8C00 !important;
    padding: 4px 10px !important;
    border-radius: 2px !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Bloomberg: Profile - API status indicators */
[data-theme="bloomberg"] .api-status-active {
    color: #00FF00 !important;
}

[data-theme="bloomberg"] .api-status-inactive {
    color: #FF3333 !important;
}

/* Bloomberg: Common - Card backgrounds */
[data-theme="bloomberg"] .card,
[data-theme="bloomberg"] .panel {
    background-color: #080808 !important;
    border: 1px solid #1E1E1E !important;
}

[data-theme="bloomberg"] .card:hover,
[data-theme="bloomberg"] .panel:hover {
    background-color: #0F0F0F !important;
    border-color: #2A2A2A !important;
}

/* Bloomberg: Criteria Editor Category Tab Hover */
[data-theme="bloomberg"] button.hover\:text-green-400:hover {
    color: #00FF00 !important;
}

[data-theme="bloomberg"] button.hover\:border-green-500:hover {
    border-color: #00FF00 !important;
}

/* ============================================================
   HFT ALGO THEME SPECIFIC STYLES
   ============================================================ */

/* HFT: Badge overrides with glow effects */
[data-theme="hft"] .badge-pending {
    background-color: rgba(255, 217, 61, 0.15);
    color: #FFD93D;
    border: 1px solid #FFD93D;
    box-shadow: 0 0 8px rgba(255, 217, 61, 0.3);
}

[data-theme="hft"] .badge-complete {
    background-color: rgba(0, 255, 136, 0.1);
    color: #00FF88;
    border: 1px solid #00FF88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

[data-theme="hft"] .badge-rejected {
    background-color: rgba(255, 77, 106, 0.1);
    color: #FF4D6A;
    border: 1px solid #FF4D6A;
    box-shadow: 0 0 8px rgba(255, 77, 106, 0.3);
}

/* HFT: Grid cell styling for data-dense displays */
[data-theme="hft"] .grid-cell {
    padding: 4px 6px;
    border: 1px solid #1A3A5C;
    font-size: 11px;
    background-color: rgba(13, 31, 60, 0.5);
}

/* HFT: Data panel with cyan accent */
[data-theme="hft"] .data-panel {
    background: linear-gradient(180deg, #0D1F3C 0%, #0A1628 100%);
    border: 1px solid #1A3A5C;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.1);
}

[data-theme="hft"] .data-panel-header {
    background-color: rgba(0, 212, 255, 0.1);
    color: #00D4FF;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

/* HFT: Ticker tape styling with glow */
[data-theme="hft"] .ticker-up {
    color: #00FF88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

[data-theme="hft"] .ticker-down {
    color: #FF4D6A;
    text-shadow: 0 0 8px rgba(255, 77, 106, 0.5);
}

[data-theme="hft"] .ticker-neutral {
    color: #00D4FF;
}

/* HFT: Highlighted row for focus */
[data-theme="hft"] tr.row-highlight {
    background-color: rgba(0, 212, 255, 0.1) !important;
    border-left: 2px solid #00D4FF;
    box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.1);
}

/* HFT: Quick stats boxes with glow */
[data-theme="hft"] .stat-box {
    background: linear-gradient(135deg, #0D1F3C 0%, #132D50 100%);
    border: 1px solid #1A3A5C;
    padding: 10px 14px;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.1);
}

[data-theme="hft"] .stat-box-label {
    color: #7EB8DA;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

[data-theme="hft"] .stat-box-value {
    color: #00D4FF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

/* HFT: Glowing card effect */
[data-theme="hft"] .card-hover:hover {
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.4);
}

/* HFT: Multi-color indicator lines (for charts/data visualization) */
[data-theme="hft"] .indicator-cyan { color: #00D4FF; }
[data-theme="hft"] .indicator-magenta { color: #FF00FF; }
[data-theme="hft"] .indicator-yellow { color: #FFD93D; }
[data-theme="hft"] .indicator-green { color: #00FF88; }
[data-theme="hft"] .indicator-red { color: #FF4D6A; }

/* HFT: Criteria Editor Category Tab Hover */
[data-theme="hft"] button.hover\:text-green-400:hover {
    color: #00D4FF !important;
}

[data-theme="hft"] button.hover\:border-green-500:hover {
    border-color: #00D4FF !important;
}


/* ============================================================
   FORM STYLES
   ============================================================ */

/* Focus ring for inputs */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Number input without spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}


/* ============================================================
   CHART CONTAINER
   ============================================================ */

.chart-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

/* Loading overlay for charts */
.chart-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(31, 41, 55, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}


/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
    /* Smaller padding on mobile */
    .mobile-compact {
        padding: 1rem;
    }

    /* Stack buttons on mobile */
    .mobile-stack {
        flex-direction: column;
    }

    .mobile-stack > * {
        width: 100%;
    }
}