/* =========================================
   TAB 2: TERMINAL (FINAL ELITE GRADE SYSTEM)
   ========================================= */

/* --- 1. SECTION HEADERS (Structural Anchor) --- */
.sys-subtitle {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    text-align: left;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* Fixed Section Top Margin */
    margin: 15px auto 5px auto; 
    padding-left: 20px;
    border-left: 3px solid var(--accent); 
    width: 100%;
    max-width: 1400px;
    opacity: 0.95;
    display: flex; align-items: center; gap: 10px;
}
.sys-subtitle::after {
    content: ''; flex: 1; height: 1px; 
    background: linear-gradient(90deg, rgba(0,255,157,0.1) 0%, transparent 100%);
}

/* --- 2. CAROUSEL TRACK (Tightened Vertical Space) --- */
#plannedTradeList, 
#openTradesList {
    display: flex !important;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Kept padding to visually contain the carousel content */
    padding: 10px 20px; 
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 250px; 
    align-items: stretch;
}
#plannedTradeList::-webkit-scrollbar, 
#openTradesList::-webkit-scrollbar { display: none; }

/* --- 3. TRADE CARDS (Hardened Containment) --- */
.planned-card, .trade-card {
    flex: 0 0 260px !important; 
    background: #090909;
    border: 1px solid #383838; 
    border-radius: 4px;
    padding: 12px; 
    display: flex; flex-direction: column; gap: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.planned-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 255, 157, 0.1);
    background: #0c0c0c;
    z-index: 10;
}

/* --- 4. CARD HIERARCHY --- */
.planned-info { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid #222; padding-bottom: 4px; position: relative; }
.planned-info .pair { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding-right: 35px; }
.planned-info .meta { font-size: 9px; color: #555; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; display: flex; justify-content: space-between; }
.plan-badge { position: absolute; top: 0; right: 0; font-size: 8px; font-family: var(--font-mono); font-weight: 700; padding: 2px 5px; border-radius: 2px; background: #000; border: 1px solid #333; color: #ccc; }
.plan-thumb { width: 100%; height: 100px; object-fit: contain; border: 1px solid #222; border-radius: 2px; margin-top: 3px; background-color: #030303; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 10px 10px; }
.plan-notes { font-size: 9px; color: #666; line-height: 1.3; height: 36px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }

/* --- 5. ACTION DISCIPLINE --- */
.plan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: auto; }
.btn-execute { grid-column: 1 / -1; background: rgba(0, 255, 157, 0.1); border: 1px solid var(--accent); color: var(--accent); padding: 6px 0; font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; border-radius: 2px; }
.btn-plan:not(.btn-execute) { background: transparent; border: 1px solid #252525; color: #555; padding: 4px 0; font-size: 9px; font-weight: 700; text-transform: uppercase; border-radius: 2px; }
.btn-plan:hover { border-color: #444; color: #888; background: rgba(255,255,255,0.02); }

/* --- 6. GHOST SLOT FIX (The Structural Divider) --- */
#btn-init-plan, #btn-open-trade {
    width: calc(100% - 40px);
    max-width: 1400px;
    /* FIX: TIGHT MARGINS ELIMINATE DEAD SPACE */
    margin: 15px auto 15px auto; 
    
    display: flex; align-items: center; justify-content: center; gap: 10px;
    
    background: rgba(0, 255, 157, 0.02); 
    border: 1px dashed rgba(0, 255, 157, 0.3); 
    color: var(--accent); opacity: 0.7;
    
    padding: 10px 0; 
    font-family: var(--font-mono); font-weight: 700; font-size: 10px;
    letter-spacing: 2px; text-transform: uppercase; 
    cursor: pointer; border-radius: 4px; transition: all 0.2s ease;
}

#btn-init-plan:hover, #btn-open-trade:hover {
    background: rgba(0, 255, 157, 0.08); 
    border-style: solid; 
    opacity: 1;
}

/* --- 7. MISC CONTROLS (Dynamic Visibility Fix) --- */
/* CRITICAL FIX: HIDE CONTROLS BY DEFAULT (JS controls display: flex) */
#carouselNav, #openNavControls {
    display: none; 
    justify-content: flex-end; 
    gap: 10px; 
    
    /* Positioning fix: Pull up to float above the track */
    margin-top: -50px; 
    margin-bottom: 30px; 
    
    margin-right: 20px;
    position: relative; 
    z-index: 20; 
    pointer-events: none;
}

/* Arrow Button Styles (Remains subtle) */
#carouselPrev, #carouselNext, #openPrev, #openNext {
    pointer-events: auto;
    width: 28px; height: 28px; border-radius: 2px;
    background: #000; border: 1px solid #222; color: #666;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}

#carouselPrev:hover, #carouselNext:hover, #openPrev:hover, #openNext:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 255, 157, 0.05);
}

/* Responsive */
@media (max-width: 768px) {
    .planned-card, .trade-card { flex: 0 0 260px !important; }
}

/* =========================================
   TAB 2: TERMINAL (FINAL ELITE GRADE SYSTEM)
   --- EMPTY STATE FINAL FIX ---
   ========================================= */

/* --- 2. CAROUSEL TRACK (Tightened Vertical Space) --- */
#plannedTradeList, 
#openTradesList {
    display: flex !important;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Maintain padding to visually contain content/empty state */
    padding: 10px 20px; 
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 250px; 
    align-items: stretch;
    /* Visual Container for the Track itself */
    border: 1px solid #1a1a1a; 
    border-radius: 4px;
    background: #050505; 
}
#plannedTradeList::-webkit-scrollbar, 
#openTradesList::-webkit-scrollbar { display: none; }

/* --- 6. GHOST SLOT FIX (The Structural Divider) --- */
#btn-init-plan, #btn-open-trade {
    width: calc(100% - 40px);
    max-width: 1400px;
    /* FIX: TIGHT MARGINS ELIMINATE DEAD SPACE */
    margin: 15px auto 15px auto; 
    
    display: flex; align-items: center; justify-content: center; gap: 10px;
    
    background: rgba(0, 255, 157, 0.02); 
    border: 1px dashed rgba(0, 255, 157, 0.3); 
    color: var(--accent); opacity: 0.7;
    
    padding: 10px 0; 
    font-family: var(--font-mono); font-weight: 700; font-size: 10px;
    letter-spacing: 2px; text-transform: uppercase; 
    cursor: pointer; border-radius: 4px; transition: all 0.2s ease;
}

/* --- 8. EMPTY SLOT CONTAINER (Final Polished Look) --- */
.empty-slot-container {
    width: 100%; 
    height: 200px; /* Slightly shorter and cleaner */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    /* Use dashes for subtle separation, not heavy borders */
    border: 1px dashed #333; 
    border-radius: 4px; 
    background: #080808;
    color: #444; 
    font-family: var(--font-mono); 
    font-size: 10px; 
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 15px 0; /* Ensures it sits neatly within the track */
}

.empty-slot-container svg {
    width: 32px; 
    height: 32px; 
    margin-bottom: 12px;
    stroke: #333; 
    stroke-width: 1.5; 
    opacity: 0.8;
}