/* ==========================================================================
   GLS Equity V4 - Scanners Module
   Module Specific Layouts (Depends on style.css for Core UI)
   ========================================================================== */

/* ==========================================
   1. CORE LAYOUT & CONTAINERS
   ========================================== */
.page-container {
    width: 100%;
    min-width: 0;
    padding: 16px;
    max-width: 1400px;
    margin: 0 auto;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    will-change: max-width; 
}

.page-container.expanded-view { max-width: 3000px; }
.scanner-layout { display: flex; flex-direction: column; gap: 20px; }
.panel-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); padding: 0; }
.sidebar-header { padding: 16px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; white-space: nowrap; overflow: hidden; }
.page-title { margin: 0; font-size: 1.25rem; color: #0f172a; }

/* ==========================================
   2. DESKTOP SIDEBAR LOGIC (>= 768px)
   ========================================== */
@media (min-width: 768px) {
    .scanner-layout { flex-direction: row; align-items: flex-start; }
    .scanner-sidebar {
        width: 320px;
        flex-shrink: 0;
        position: sticky;
        top: 80px; 
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        overflow-x: hidden; 
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: width, height;
    }

    .scanner-sidebar.collapsed { width: 60px !important; height: 60px !important; min-height: 60px !important; overflow: hidden; }
    .scanner-sidebar.collapsed .sidebar-header { padding: 0; height: 100%; border-bottom: none; display: flex; align-items: center; justify-content: center; }
    .scanner-sidebar.collapsed .filter-group-row { margin: 0; width: 100%; height: 100%; justify-content: center; }
    .scanner-sidebar.collapsed > :not(.sidebar-header) { display: none !important; }
    .scanner-sidebar.collapsed .page-title, .scanner-sidebar.collapsed #reset-filters-btn { display: none !important; }
    .scanner-sidebar.collapsed #toggle-sidebar-btn { transform: rotate(180deg); margin: 0; }

    .scanner-main { flex-grow: 1; min-width: 0; transform: translateZ(0); backface-visibility: hidden; will-change: width; }
}

/* ==========================================
   3. FILTERS & ACCORDIONS
   ========================================== */
.filter-accordion { border-bottom: 1px solid #f1f5f9; }
.filter-accordion:last-of-type { border-bottom: none; }

.filter-accordion summary {
    padding: 14px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background 0.2s;
}
.filter-accordion summary::-webkit-details-marker { display: none; }
.filter-accordion summary:after { content: '+'; font-size: 1.2rem; color: #64748b; font-weight: normal; }
.filter-accordion[open] summary:after { content: '−'; }
.filter-accordion summary:hover { background: #f8fafc; }

.accordion-body { padding: 0 16px 16px 16px; }
.filter-group { display: flex; flex-direction: column; }
.filter-group-row { display: flex; align-items: center; gap: 8px; }

.checkbox-group { display: flex; flex-direction: column; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #0f172a; cursor: pointer; }
.checkbox-label input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: #2563eb; }

/* Interactive Elements */
.btn-green { border: none; background: #10b981; color: white; cursor: pointer; transition: background 0.2s; }
.btn-green:hover { background: #059669; }
#toggle-sidebar-btn { width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
.segment-btn input[type="radio"]:checked { display: none; }
.segment-btn:has(input[type="radio"]:checked) { background: #2563eb; color: #ffffff; box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25); font-weight: 600; }

.ticker-link { color: #0f172a; text-decoration: none; }
.ticker-link:hover { color: #2563eb; text-decoration: underline; }
.watchlist-star-btn { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #cbd5e1; transition: all 0.2s ease; padding: 0; }
.watchlist-star-btn.active { color: #fbbf24; }
.watchlist-star-btn:hover { transform: scale(1.2); color: #fbbf24; }
.cursor-pointer { cursor: pointer; }

/* ==========================================
   4. SCANNER SPECIFIC UI (Colors, Badges)
   ========================================== */
.summary-text { font-size: 0.8rem; color: #64748b; font-weight: 500; }
.truncate-text { display: inline-block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

.color-bullish { color: #10b981; }
.color-bearish { color: #ef4444; }
.type-call { color: #10b981; font-weight: 700; }
.type-put { color: #ef4444; font-weight: 700; }

/* Table Row Highlights */
.data-table tr.bg-bullish td, .data-table tr.bg-bullish td.sticky-col { 
    background-color: #f0fdf4 !important;
    border-bottom: 4px solid #ffffff !important;
    transition: background 0.15s ease; 
}
.data-table tbody tr.bg-bullish:hover td, .data-table tbody tr.bg-bullish:hover td.sticky-col { background-color: #d1fae5 !important; }

.data-table tr.bg-bearish td, .data-table tr.bg-bearish td.sticky-col { 
    background-color: #fef2f2 !important;
    border-bottom: 4px solid #ffffff !important;
    transition: background 0.15s ease; 
}
.data-table tbody tr.bg-bearish:hover td, .data-table tbody tr.bg-bearish:hover td.sticky-col { background-color: #fee2e2 !important; }

/* Setup Badges */
.setup-badge { padding: 4px 8px; border-radius: 14px; font-size: 0.75rem; font-weight: 700; }
.setup-bull { color: #059669; background: #d1fae5; border: 1px solid currentColor; }
.setup-bear { color: #dc2626; background: #fee2e2; border: 1px solid currentColor; }
.setup-neutral { color: #d97706; background: #fef3c7; border: 1px solid currentColor; }
.setup-unknown { color: #0284c7; background: #e0f2fe; border: 1px solid currentColor; }
.setup-badge-clickable { cursor: pointer; }
.category-badge { color: #475569; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; border: 1px solid #e2e8f0;}

/* ==========================================
   5. MOBILE OVERRIDES (< 768px)
   ========================================== */
@media (max-width: 767px) {
    .page-container { padding: 0; }
    
    /* 1. Flex layout setup to weave the boxes together */
    .scanner-layout { 
        display: flex; 
        flex-direction: column; 
        gap: 0; 
    }
    
    /* Promotes the main contents to direct flex children so we can reorder them */
    .scanner-main { 
        display: contents; 
    }
    
    /* --- THE EXACT MOBILE ORDER YOU REQUESTED --- */
    
    /* Order 1: Dropdown Menu at top */
    .scanner-tabs-wrapper { 
        order: 1; 
        padding: 16px; 
        background: #f8fafc; 
        border-bottom: 1px solid #e2e8f0; 
        margin-bottom: 0; 
    }

    /* Order 2: Filters Sidebar */
    .scanner-sidebar { 
        order: 2; /* Moved up above the summary */
        border-radius: 0; 
        border-left: none; 
        border-right: none; 
        position: static; 
        max-height: none; 
        margin-bottom: 12px;
    }

    /* Order 3: Notes / Summary banner (Right above the table) */
    #result-summary { 
        order: 3; /* Moved down below the filters */
        padding: 0 16px 8px 16px; 
        margin-bottom: 0; 
        font-size: 0.9rem;
        color: #64748b;
        font-style: italic;
    }
    
    /* Order 4: Results Tables at the bottom */
    #scanLoading, .results-container { 
        order: 4; 
    }
    
    /* Edge-to-edge mobile tables */
    .table-responsive { max-height: 65vh; }
    .data-table th, .data-table td { padding: 5px 10px; }
    .segmented-control { width: max-content; }

    /* --- Smart Collapse Logic --- */
    /* Only hides the accordions and filter sections when collapsed. 
       Your Header and your Run Scan Button will stay perfectly visible! */
    .scanner-sidebar.collapsed > details,
    .scanner-sidebar.collapsed > .filter-section {
        display: none !important;
    }
    
    /* Smooth rotation for the toggle arrow */
    #toggle-sidebar-btn { 
        transform: rotate(90deg); /* Points Up (Open) */
    }
    .scanner-sidebar.collapsed #toggle-sidebar-btn { 
        transform: rotate(-90deg); /* Points Down (Closed) */
    }
}