/* 
 * KloudMind Institutional Quant - Premium Light UI Styles (Stripe-Like)
 * Handles custom animations, soft drop shadows, and responsive grids.
 * Designed with a human-centric, professional, and clean aesthetic.
 */

/* Importing a coding font specifically for numbers and terminal logs */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');

:root {
    --accent-color: #4f46e5;
    --card-hover-bg: #ffffff;
    --terminal-green: #10b981;
    --border-light: #e2e8f0;
    --soft-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

/* ========================================== */
/* 1. BASE TWEAKS & TYPOGRAPHY                */
/* ========================================== */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Clean, premium light background */
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    color: #475569;
}

/* Monospace for Numbers & Terminal (Stops UI jumping when PNL/Prices change rapidly) */
.font-mono {
    font-family: 'Fira Code', monospace !important;
    letter-spacing: -0.5px;
}

/* ========================================== */
/* 2. ELEVATED PANELS (Stripe Style)          */
/* ========================================== */
.glass-panel {
    background: #ffffff;
    border: 1px solid var(--border-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-panel:hover {
    box-shadow: var(--soft-shadow);
}

/* ========================================== */
/* 3. SLEEK CUSTOM SCROLLBARS                 */
/* ========================================== */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* Specific scrollbar for Hacker Terminal to blend with dark bg */
#ai-logs::-webkit-scrollbar-thumb {
    background: #334155; /* slate-700 */
}
#ai-logs::-webkit-scrollbar-thumb:hover {
    background: var(--terminal-green);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* ========================================== */
/* 4. ANIMATIONS & TERMINAL LOGS              */
/* ========================================== */
.blink {
    animation: blinker 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes blinker {
    50% { opacity: 0.2; }
}

/* Neural Engine Terminal Log Slide-in Animation */
@keyframes terminalSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.log-entry {
    animation: terminalSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    border-left: 2px solid transparent;
    padding-left: 8px;
    margin-bottom: 6px;
    word-break: break-word;
}
/* Hover effect specifically for the dark terminal */
.log-entry:hover {
    border-left-color: var(--terminal-green);
    background: rgba(16, 185, 129, 0.1); 
}

/* Kill Switch Hover Pulse (Adapted for Light UI) */
#kill-switch {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
#kill-switch:hover {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
    transform: translateY(-1px);
    background-color: #ef4444; /* red-500 */
    color: #ffffff !important;
    border-color: #ef4444;
}

/* ========================================== */
/* 5. SIGNAL CARD ADVANCED STYLING            */
/* ========================================== */
/* Pop-in animation for newly generated signals */
@keyframes cardPop {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.signal-card {
    animation: cardPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    border-color: var(--border-light);
    box-shadow: var(--soft-shadow);
}

.signal-card:hover {
    background-color: var(--card-hover-bg);
    transform: translateY(-3px) !important;
    box-shadow: var(--hover-shadow);
    border-color: #cbd5e1; /* slate-300 */
}

/* ========================================== */
/* 6. RESPONSIVE GRID & MOBILE MAGIC          */
/* ========================================== */
/* Tablet & Small Desktop Fixes */
@media (max-width: 1280px) {
    main {
        flex-wrap: wrap;
    }
    main > aside:first-child { /* Watchlist */
        width: 30% !important;
    }
    main > section { /* Signal Board */
        width: calc(70% - 0.75rem) !important;
    }
    main > aside:last-child { /* Terminal/Telemetry */
        width: 100% !important;
        height: 350px !important;
        flex-direction: row; /* Split telemetry and terminal side-by-side on tablet */
    }
    main > aside:last-child > div:nth-child(2) {
        width: 50%;
        border-right: 1px solid var(--border-light);
        border-bottom: none;
    }
    #ai-logs {
        width: 50%;
    }
}

/* Mobile Screen Layout */
@media (max-width: 1024px) {
    /* Enable vertical scrolling on mobile instead of fixed full-screen */
    body {
        overflow-y: auto !important;
        overflow-x: hidden;
        height: auto;
        min-height: 100vh;
    }

    #main-dashboard {
        display: flex;
        flex-direction: column;
        padding: 12px;
        height: auto;
        overflow: visible;
    }

    /* Top Bar Mobile Layout */
    header {
        flex-direction: column;
        height: auto !important;
        padding: 16px !important;
        gap: 16px;
        align-items: flex-start !important;
    }
    
    header > div {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap; 
    }

    /* Stack the Columns (Watchlist, Signals, Telemetry) */
    main {
        flex-direction: column !important;
        height: auto !important;
        gap: 12px;
    }

    /* Reset width and apply heights for mobile */
    main > aside:first-child,
    main > section,
    main > aside:last-child {
        width: 100% !important;
        min-width: 100% !important;
    }

    main > aside:first-child { height: 250px !important; }
    main > section { min-height: 400px !important; }
    main > aside:last-child { 
        height: auto !important; 
        flex-direction: column !important; 
    }
    main > aside:last-child > div:nth-child(2),
    #ai-logs {
        width: 100% !important;
        border-right: none;
    }
    #ai-logs {
        height: 250px !important;
    }

    .signal-card .grid {
        gap: 0.5rem !important; 
    }

    /* Bottom Panel (Lifecycle Table) */
    footer {
        height: auto !important;
        min-height: 400px;
        margin-top: 8px;
    }

    /* 🟢 QA FIX: Light Mode Mobile Table Redesign */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr {
        background: #ffffff;
        border: 1px solid var(--border-light);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 16px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }
    
    td {
        border: none;
        position: relative;
        padding: 8px 0 8px 45% !important; /* Make room for labels */
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f1f5f9;
    }
    
    td:last-child {
        border-bottom: none;
    }
    
    /* Auto-generate labels for mobile rows based on column order */
    td:nth-of-type(1):before { content: "Symbol"; color: #64748b; font-size: 10px; font-weight: bold; text-transform: uppercase;}
    td:nth-of-type(2):before { content: "Direction"; color: #64748b; font-size: 10px; font-weight: bold; text-transform: uppercase;}
    td:nth-of-type(3):before { content: "Status"; color: #64748b; font-size: 10px; font-weight: bold; text-transform: uppercase;}
    td:nth-of-type(4):before { content: "Entry Price"; color: #64748b; font-size: 10px; font-weight: bold; text-transform: uppercase;}
    td:nth-of-type(5):before { content: "Current Price"; color: #64748b; font-size: 10px; font-weight: bold; text-transform: uppercase;}
    td:nth-of-type(6):before { content: "Target (TP)"; color: #64748b; font-size: 10px; font-weight: bold; text-transform: uppercase;}
    td:nth-of-type(7):before { content: "Result/Action"; color: #64748b; font-size: 10px; font-weight: bold; text-transform: uppercase;}
}