/* --------------------------------------------------
   GLOBAL LAYOUT
-------------------------------------------------- */
body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    height: 100vh;
    overflow: hidden;
    background: #fafafa;
}

.app-container {
    display: grid;
    grid-template-columns: 260px 1fr 320px;
    height: 100vh;
}

/* --------------------------------------------------
   SIDEBARS
   (Z-Index: 100 to ensure they stay on top of everything)
-------------------------------------------------- */
.sidebar-left,
.sidebar-right {
    background: #f7f7f7;
    padding: 15px;
    border-right: 1px solid #d0d0d0;
    border-left: 1px solid #d0d0d0;
    overflow-y: auto;

    /* FIX: Ensure sidebars are always above main stage content */
    position: relative;
    z-index: 100;
}

.sidebar-right {
    border-left: none;
    border-right: none;
}

/* --------------------------------------------------
   MAIN STAGE (Central Area)
-------------------------------------------------- */
.main-stage {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding: 10px;
    gap: 15px;
    background: #fafafa;
    box-sizing: border-box;

    /* Ensure main stage creates its own stacking context */
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------
   PLOT GRID (Top Portion)
   (Z-Index: 1 to sit behind the panel)
-------------------------------------------------- */
.plot-grid {
    flex: 2;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    transition: flex 0.3s ease;

    /* FIX: Force plots to background layer */
    position: relative;
    z-index: 1;
}

.plot-container {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    min-height: 0;
}

/* --------------------------------------------------
   ENRICHMENT PANEL (Bottom Portion) - TOGGLEABLE
   (Z-Index: 50 to sit ABOVE plots)
-------------------------------------------------- */
.enrichment-panel {
    flex: 1;
    min-height: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* FIX: Force panel to front layer */
    position: relative;
    z-index: 50;
}

/* COLLAPSED STATE */
.enrichment-panel.collapsed {
    flex: 0 0 42px; /* Fixed height for header only */
    min-height: 42px;
}

.enrichment-panel.collapsed .enrich-content {
    opacity: 0;
    pointer-events: none;
}

.enrich-header {
    padding: 10px 15px;
    background: #f1f1f1;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    height: 42px;
    box-sizing: border-box;
}

.enrich-header:hover {
    background: #e5e5e5;
}

.enrich-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Rotating Arrow Icon */
.toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 10px;
    color: #555;
}

.enrichment-panel.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.enrich-controls {
    display: flex;
    align-items: center;
}

.btn-action {
    padding: 4px 12px;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.btn-action:hover {
    background: #1976D2;
}

.btn-action:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.enrich-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Enrichment Table Styles */
#enrich-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#enrich-table th {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 2px solid #eee;
    text-align: left;
    padding: 8px 10px;
    color: #555;
    font-weight: 600;
    z-index: 10;
}

#enrich-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #f9f9f9;
    color: #333;
    vertical-align: top;
}

#enrich-table tr:hover {
    background-color: #f5faff;
}

/* Custom scrollbar */
.enrich-content::-webkit-scrollbar { width: 8px; }
.enrich-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* --------------------------------------------------
   PANELS & COMPONENTS (Sidebar)
-------------------------------------------------- */
.panel {
    margin-bottom: 20px;
    padding: 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.panel h3 {
    margin-top: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.folder-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin: 4px 0;
    font-size: 13px;
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    cursor: grab;
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}

.folder-item:hover { background: #ececec; border-color: #bbbbbb; }
.folder-item:active { cursor: grabbing; }

.tree-root { list-style-type: none; padding-left: 0; }
.tree-root li { margin-left: 10px; cursor: pointer; }

.caret { font-weight: bold; padding: 4px; }
.caret::before { content: "▶"; display: inline-block; margin-right: 6px; transition: transform 0.15s; }
.caret-down::before { transform: rotate(90deg); }

.nested { display: none; padding-left: 12px; }
.nested.active { display: block; }

.slot {
    padding: 12px;
    margin-bottom: 8px;
    border: 2px dashed #999;
    text-align: center;
    background: #fff;
    border-radius: 6px;
    font-size: 14px;
    color: #666;
    transition: border-color 0.18s, background 0.18s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Ensure dragged items don't hide slot text */
    position: relative;
    z-index: 1;
}

.slot:hover { border-color: #777; background: #f0f0f0; }
.slot.loaded { border-color: #4CAF50; background: #e9fbe9; color: #347a34; font-weight: 600; }

.plot-loading {
    position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    width: 80%; text-align:center; display: none;
    z-index: 10; /* Ensure loading spinner is above plot */
}
.loading-text { font-size: 13px; margin-bottom: 6px; color: #666; font-style: italic; }
.progress-bar { width: 100%; height: 7px; background: #e6e6e6; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #4CAF50, #8BC34A); width: 0%; transition: width 0.3s ease; }

.btn-export { width: 100%; margin-top: 12px; padding: 10px; background: #4CAF50; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; }
.btn-export:hover { background: #45a045; }

.btn-clear { padding: 7px 12px; background: #f5f5f5; border: 1px solid #bbb; border-radius: 4px; cursor: pointer; font-size: 13px; width: 100%; }
.btn-clear:hover { background: #e0e0e0; }

.gene-search-wrapper { position: relative; width: 100%; }
.gene-search-wrapper input[type="text"] { width: 100%; padding: 8px 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }

/* Ensure dropdown is way above everything */
.gene-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 200;
}

.gene-row-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
.gene-row-item:hover { background-color: #f5f5f5; }
.dropdown-divider { height: 2px; background-color: #ddd; margin: 4px 0; }

#file-list-container, #matrisome-panel { overflow-y: auto; padding-right: 6px; }

/* UPDATED: Changed from max-height: 260px to height: 600px
   to make the folder list significantly longer.
*/
#file-list-container {
    height: 500px;
}

#matrisome-panel { max-height: 50vh; }

.cat-item { margin-left: 4px; margin-bottom: 6px; }
.cat-header { display: flex; align-items: center; gap: 6px; }
.cat-label { flex-grow: 1; font-size: 13px; }
.gene-list { display: none; margin-left: 18px; max-height: 140px; overflow-y: auto; border-left: 1px dashed #ccc; padding-left: 8px; }
.gene-list.active { display: block; }
.gene-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }

th.sortable-header {
    cursor: pointer;
    user-select: none; /* Prevent text selection while clicking repeatedly */
    transition: background-color 0.2s;
    position: relative; /* For positioning context if needed */
}

th.sortable-header:hover {
    background-color: #eef;
}

.sort-icon {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    color: #bbb;
}

th.sortable-header.active-sort .sort-icon {
    color: #333;
    font-weight: bold;
}