/*############NAVBAR############  */

/* Navbar styling */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
background: linear-gradient(90deg, #F5F5F5, #E0E1E2) !important;
  color: #333333
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
}

/* Logo styling */
.logo {
  height: 120px;
  width: auto;
  margin-right: 1rem;

  /* let it grow inside the container*/ 
  transform: scale(1.1);  /* Makes the logo 20% bigger */
  transform-origin: left center;  /* Scales from left center point */
  object-fit: contain;  /* Ensures the image maintains aspect ratio */
}
  
  
}

/* Left section styling */
.left-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.title {
  font-size: 2.5em;
  font-weight: 700;
  margin: 0;
  color: #2D2D2D;
}

.subtitle {
  font-size: 1.2em;
  margin: 0;
  color: #4A4A4A;
}

/* Social buttons container styling */
.social-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Icon header styling */
.icon-header {
  margin: 0;
  font-size: 1.1em;
  font-weight: 500;
  color: #4A4A4A;
  line-height: 1.5em;
}

/* Social icons styling */
.social-buttons .icon {
  font-size: 2.5em;
  color: #4A4A4A;
  transition: all 0.2s ease;
  margin-left: 0.5rem;
}

/* specific size for coffee mug icon */
.social-buttons .fa-mug-hot {
  font-size: 2.2em;  /* Slightly smaller than the 2.5em used for other icons */
  color: #4A4A4A;
  transition: all 0.2s ease;
  margin-left: 0.5rem;
  transform: translateY(-0.1em);  /* Slightly adjust the vertical position */
}





.social-buttons .github:hover {
  color: #000;
}

.social-buttons .linkedin:hover {
  color: #0077b5;
}

.social-buttons .coffe:hover i{
  color: #000;
}




/* Responsive design */
@media (max-width: 810px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .social-buttons {
    justify-content: flex-start;
    width: 100%;
    margin-top: 1rem;
  }
  .logo {
    height: 100px;
    margin-bottom: 10px;
  }
  .title {
    font-size: 2em;
  }
  .subtitle {
    font-size: 1em;
  }
}

@media (min-width: 811px){
  
.logo{
    margin-left:9rem;
    
    
  }
  
.title, .subtitle{
  
   
    
    
  }
  
.left-section{
    margin-left: 1rem;
    margin-right: 41rem; 
  }
  
  
  
}





/********************* UPLOAD FORM **********************/
/* Custom styling for Data Upload section */


/* Base segment style */
div.ui.raised.segment:nth-child(-n+3) {
    background: linear-gradient(90deg, #F5F5F5, #E0E1E2) !important;
    
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}


/* Specific adjustments for the upload segment */
div.ui.raised.segment:first-child {

}

/* Or for a specific width: */
.ui.raised.segment .ui.file.input .ui.input {
 width:79% !important;

}

@media (max-width: 810px) {
  /* Adjust the width of the file input */
  .ui.raised.segment .ui.file.input .ui.input {
    width: 100% !important;
  }
}



/* Fix flex layout for header toggle */
div[style*="display: flex; flex-direction: column"] {
    
}



/* Add hover effect */
div.ui.raised.segment:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    transition: box-shadow 0.3s ease;
   
}

/* Adjust download demo spacing */

.download-demo {
    margin-top: 0.3rem !important;     
    margin-bottom: 1rem !important;    
    padding: 0.5em 0 !important;  
    transform: translateY(-1rem) !important;
}

.download-demo .ui.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Target radio buttons within the form */
.ui.form .field .ui.radio.checkbox {
    margin-top: 0.05rem !important;    /* Space above each radio button */
    margin-bottom: 0.05rem !important; /* Space below each radio button */
    padding-top: 0 !important;        /* Remove default padding */
    padding-bottom: 0 !important;     /* Remove default padding */
}

/* If needed, also target the label spacing */
.ui.form .field > label {
    margin-bottom: 0.3rem !important;  /* Space between field label and first radio button */
}


/* Add spacing between elements inside segments */
.ui.raised.segment:not(:first-of-type) > * {
    margin-bottom: 0.8rem;
}

.ui.raised.segment:first-of-type > * {
   padding 0rem 0rem;
  }



.ui.raised.segment:first-of-type .ui.grey.ribbon.label {
  margin-bottom: 0.5rem;
 }
 
 
 
/* Add spacing after ribbon labels */
.ui.raised.segment .ribbon.label {
 margin-right: 1rem;
   
}



/**  COLOR PICKERS WERE SHOWING ALPHA CHANNEL, SO I made them narrower */

 .ui.raised.segment .colourpicker {
            width: 100px !important;
        }
        .ui.raised.segment .colourpicker input {
            width: 100% !important;
        }
        .ui.raised.segment .colourpicker .colourpicker-input-container .colourpicker-swatch {
            width: 20px !important;
            height: 20px !important;
        }

/** DOWNLOADERS BUTTONS*/
.ui.tiny.fluid.buttons {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .ui.tiny.fluid.buttons .button {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        margin: 0 !important;
    }

/************* Results section segment ********************************/

.ui.segment.placeholder {
  background: linear-gradient(to bottom, #f6f8fa, #ddf4ff ) !important;
 
}


/************* Dataset preview ********************************/
@media  screen and (min-width: 810px){
/* Add margin to the DataTable wrapper */


.dataTables_wrapper.dt-semanticUI {
  margin: 0.5rem;
}

/* Make the table background transparent */
.dataTables_wrapper.dt-semanticUI table {
  background-color: transparent;
}

/* Style the table headers specifically */
.dataTables_wrapper.dt-semanticUI table thead th {
  background-color: #E0E1E2; /* Green background for headers */
  color: black; /* White text for contrast */
  text-align: center; /* Center align the text */
  font-weight: bold; /* Make the text bold */
  padding: 10px; /* Add some padding for better spacing */
  border-bottom: 2px solid #ddd; /* Add a subtle border below headers */
}

/* Add hover effect to headers for interactivity */
.dataTables_wrapper.dt-semanticUI table thead th:hover {
  background-color: #B0B1B2; /* Slightly darker green on hover */
  cursor: pointer; /* Indicate interactivity */
}


/* Optional: Style the pagination menu */
.dataTables_wrapper.dt-semanticUI .pagination.menu {
  background-color: transparent;
  border: none;
}

/* Adjust dropdown styles if necessary */
.dataTables_wrapper.dt-semanticUI .ui.dropdown {
  margin: 0.3rem;
}

/* Align Show Entries and Search in the same row */
.dataTables_wrapper.dt-semanticUI .dataTables_length,
.dataTables_wrapper.dt-semanticUI .dataTables_filter {
  display: inline-flex; /* Place them inline */
  align-items: center; /* Vertically align elements */
  gap: 1rem; /* Space between label and input */
}

/* Wrap the length and filter into one container */
.dataTables_wrapper.dt-semanticUI .dataTables_top {
  display: flex;
  justify-content: space-between; /* Push Show Entries to the left, Search to the right */
  margin-bottom: 1rem; /* Add some spacing below */
}

/* Reset unnecessary spacing for consistent alignment */
.dataTables_wrapper.dt-semanticUI .dataTables_length label,
.dataTables_wrapper.dt-semanticUI .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Space between text and input */
}

}

/************* DISPLAY FOR MOBILE *****************************/

/* Responsive design for mobile devices */

@media screen and (max-width: 810px) {
    /* Parent container switches to column layout */
    .ui.fluid.container > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem; /* Adds spacing between panels */
    }

    /* Sidebar panel takes full width and is displayed first */
    .ui.fluid.container .ui.sidebar.panel {
        width: 100% !important;
        order: 1;
    }

    /* Main panel takes full width and is displayed second */
    .ui.fluid.container .ui.main.panel {
        width: 100% !important;
        order: 2;
    }
    
     div.ui.left.action.input.ui-ss-input {
        width: 75% !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Center the element */
    }
    
     div.ui.form div.three.fields div.field div div.ui.toggle.checked.checkbox {
        margin: 0 !important;
        padding: 0 !important;
        }
        
    /* Ensure the inner elements also adapt to the width */
    .ui.file.input .ui.left.action.input .ui.labeled.icon.button,
    .ui.file.input .ui.left.action.input .ui.text.input {
        flex: 1 1 auto;
    }
    
    /************* DATA TABLE MOBILE STYLES ***********************/   
    /* Ensure the DataTable is scrollable horizontally  - not perfect but i failed with other methods and the
    native approuch for DT responsive somehow was not working*/

    /************* DATA TABLE MOBILE STYLES ***********************/   


    .dataTables_wrapper.dt-semanticUI {
        overflow-x: auto; /* Enable scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
    }

    .dataTables_wrapper.dt-semanticUI table {
        table-layout: auto; /* Allow flexible resizing */
        min-width: 600px; /* Prevent stacking */
        
        
    }

   
   /* selector for all elements of the table*/  
  /* Style for the entire scrollable container */
/* Style for the entire scrollable container */
/* Style for the entire scrollable container */

>.datatables{
    width: 100%;
    overflow-x: auto;
    padding:1rem;
    margin:1rem;
    background-color: #E0E1E2;
}

.dataTables_scroll {
    width: 100%;
    overflow-x: auto;
    padding:1rem;
    margin:1rem;
    background-color: #E0E1E2;
}

/* Target header row specifically using the exact selector */
.dataTables_scrollHeadInner > table:nth-child(1) > thead:nth-child(1) > tr {
    display: flex !important;
    white-space: nowrap;
     background-color: #E0E1E2;
     border:none ;
     padding:0 !important;
}

/* Target header cells */
.dataTables_scrollHeadInner > table:nth-child(1) > thead:nth-child(1) > tr > th {
    display: inline-block;
    white-space: nowrap;
     background-color: #E0E1E2;
    
}

/* Target all body rows */
.ui.small.compact.table.dataTable.no-footer > tbody > tr {
    display: flex !important;
    white-space: nowrap;
     background-color: #E0E1E2;
}



/* Target body cells */
.ui.small.compact.table.dataTable.no-footer > tbody > tr > td {
    display: inline-block;
    white-space: nowrap;
     background-color: #E0E1E2;
}

/* Ensure smooth scrolling */
.dataTables_scrollBody {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
     background-color: #E0E1E2;
}

.ui.small.compact.table.dataTable.no-footer > thead:nth-child(1) > tr:nth-child(1){
  padding: 0 !important;
}


.dataTables_wrapper.dt-semanticUI.no-footer > * {
        margin: 1rem !important;
    }

/* Container for pagination */
    .ui.stackable.pagination.menu {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding: 0.5rem !important;
        background-color: #E0E1E2; /* To match your table style */
    }

    /* Individual pagination items */
    .ui.stackable.pagination.menu .item {
        display: inline-flex !important;
        float: none !important;
        margin: 0 0.25rem !important;
        flex: 0 0 auto !important;
    }

    /* Remove any stacking behaviors */
    .ui.stackable.pagination.menu > .item {
        width: auto !important;
    }

}


/**** *********************** MOBILE RULES FOR THE RESULTS SECTION*******************************/


@media screen and (max-width: 810px) {
    /* Make two column grid stack vertically */
    .ui.two.column.grid {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Make columns take full width */
    .ui.two.column.grid > .column {
        width: 100% !important;
        margin: 0.2rem 0 !important;
    }

    /* Adjust plot outputs for mobile */
    #volcano_plot {
        height: 400px !important; /* Reduced height for mobile */
        width: 100% !important;
    }

    #volcano_plotly {
        height: 400px !important;
        width: 100% !important;
    }

    /* Style download buttons for better mobile display */
    .ui.tiny.fluid.buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .ui.tiny.fluid.buttons > .ui.button {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 4px !important; /* Reset border radius for stacked buttons */
    }

    /* Add spacing between segments */
    .segment {
        margin: 1rem 0 !important;
    }

    /* Adjust GT table container */
    .gt_table {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Make tabs more mobile-friendly */
    .ui.tabset .menu {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .ui.tabset .menu .item {
        width: 100% !important;
        text-align: center !important;
        margin: 0.25rem 0 !important;
    }

    /* Add spacing for the log output */
    #log_output {
        margin: 1rem 0 !important;
        width: 100% !important;
        overflow-x: auto !important;
    }


/***********tabset styling********************/


    /* Style the tabset menu for mobile */
    .ui.menu.sem.top.attached.tabular.shiny-bound-input {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        border-bottom: none !important; /* Remove default border */
    }

    /* Style individual tab items */
    .ui.menu.sem.top.attached.tabular.shiny-bound-input > .item {
        width: 100% !important;
        text-align: center !important;
        margin: 0.25rem 0 !important;
        border: 1px solid rgba(34, 36, 38, 0.15) !important; /* Add border to each tab */
        border-radius: 4px !important;
        background-color: #f8f9fa !important;
    }

    /* Active tab styling */
    .ui.menu.sem.top.attached.tabular.shiny-bound-input > .item.active {
        background-color: #ffffff !important;
        border-bottom: 1px solid #ffffff !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    /* Hover state for tabs */
    .ui.menu.sem.top.attached.tabular.shiny-bound-input > .item:hover {
        background-color: #e9ecef !important;
    }

    /* Content area below tabs */
    .ui.bottom.attached.tab.segment.active {
        margin-top: 1rem !important;
        border-top: 1px solid rgba(34, 36, 38, 0.15) !important;
    }

}   

/*GSEA SECTION STYLING*/
/* The h4 titles in the GSEA tabset now appear at the same height*/

.segment-header {
  position: relative;
  height: auto;
  margin-bottom: 1rem;
}



/* Ensure proper spacing in the controls grid */
.ui.stackable.grid {
  margin-top: 0.3rem !important;
  margin-bottom: 0.5rem !important;
}

/* Adjust radio button group alignment */
.radiobuttongroup {
  margin-bottom: 0 !important;
}

/* Responsive adjustments */
@media only screen and (max-width: 801px) {
  .ui.stackable.grid > .column:not(.row) {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
  }
}

/* Adjust spacing for mobile view */
@media only screen and (max-width: 801px) {
  .ui.grid.stackable.mobile.reversed > .column:not(.row) {
    margin-bottom: 2rem !important;
  }
  
  .ui.grid.stackable.mobile.reversed > .column:last-child {
    margin-bottom: 0 !important;
  }
}



/* CSS styling for mobile devices to shrink the plot without rotating it.
   This ensures that the plot container adapts to smaller screen sizes. */
@media only screen and (max-width: 800px) {
  .mobile-shrink-plot {
    width: 90%;
    height: auto;
    margin: 20px auto; /* Centers the container */
    overflow: visible;
  }
}

/* CSS rules for reactive UI for GSEA */

/* Custom segment styling with a linear-gradient background */
/* Specific styling for GSEA segment */
.ui.segment.custom-segment {
  background: linear-gradient(90deg, #F5F5F5, #E0E1E2);
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 10px;
 
}

/* Specific styling for GSEA grid */
.custom-segment .ui.stackable.grid {
  margin: 0;
}

/* Style the radio buttons container */
.custom-segment .eight.wide.column .field {
  margin-bottom: 0;
}

/* Center the action button container */
.custom-segment .eight.wide.column:last-child > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Ensure proper spacing in mobile view */
@media screen and (max-width: 767px) {
  .custom-segment .ui.stackable.grid > .row > .column {
    padding: 10px !important;
  }
  
  .custom-segment .eight.wide.column:last-child {
    margin-top: 10px;
  }
}
/********* TOOLTIP*//****************


/* Tooltip container */
.tooltip-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 2px;  /* Reduced from 10px to bring it closer to the ribbon */
  height: 100%;
  vertical-align: middle;
  }


/* Container for ribbon and icon */
.ribbon-container {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 0;
}

/* Question mark icon */
.info-icon {
  color: #2185D0 !important;
  font-size: 20px !important;
  cursor: help;
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1;
  position: relative;
  left: -18px;  /* Pull the icon slightly closer to the ribbon */
  transform: translateY(-1px);  /* Slightly adjust the vertical position */
}



/* Tooltip text */
.tooltip-text {
  visibility: hidden;
  position: absolute;
  width: 250px;
  background-color: #333;
  color: #fff;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Show tooltip on hover */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* CSS for the loaders*/ 
#gsea-loader-overlay, #volcano-loader-overlay {
  display: none; 
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: 300px; 
        height: 300px; 
        background: rgba(0,0,0,0.7); 
        z-index: 9999;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
  }

/***** action button for custom x axis limits */


/* Specific styles for volcano plot limits input group */

.volcano-limits-container .ui.action.input.volcano-limits-input-group {
  width: auto !important;
}

.volcano-limits-container .ui.action.input.volcano-limits-input-group input[type="number"] {
  height: 38px !important;
  width: 100px !important; /* Set specific width for number input */
}

.volcano-limits-container .volcano-limits-button.ui.button {
  height: 38px !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  min-width: 250px !important; /* Ensure button is wide enough for text */
  justify-content: center !important;
}

/* Ensure input group can accommodate the wider button */
.volcano-limits-container .ui.action.input {
  display: inline-flex !important;
  align-items: stretch !important;
}

/* styles for hide annot ui*/  
.ui.label.tiny {
        font-size: 0.85em !important;
        padding: 0.5em 1em !important;
        margin: 0 !important;
        transition: all 0.3s ease !important;
      }

      .ui.label.green {
        background-color: #21ba45 !important;
        color: white !important;
        border: none !important;
      }

      .ui.grid.middle.aligned {
        margin: 1em 0 !important;
      }

      .ui.fitted.toggle.checkbox {
        display: flex;
        justify-content: center;
      }

      .volcano-limits-container {
        margin-bottom: 1em !important;
      }

      .volcano-limits-input-group {
        margin: 0.5em 0 !important;
      }
      
      
      .no-padding-right {
  padding-right: 0 !important;
}

.no-padding-left {
  padding-left: 0 !important;
}

.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ui.grid.compact {
  margin: 0.5em 0 !important;
}

.ui.grid.compact > .column {
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
}

/* Adjust the toggle position */
.ui.fitted.toggle.checkbox {
  margin: 0 0.5em !important;
}
      
.ui.label.tiny {
  cursor: pointer !important;  /* Add pointer cursor to show clickability */
  user-select: none !important;  /* Prevent text selection when clicking */
}