:root {
    color-scheme: light;
}

.main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h3, .h3, h4, .h4 {
    opacity: .9;
    margin-top: 0rem;
}


/* Table and general content styling */
body {
    background-color: var(--quarto-light); /* Light background */
    color: var(--quarto-dark); /* Dark text */
    margin: 0;
    padding: 0;
}

.half-break {
  display: block;
  height: 0.5em; /* Adjust as needed */
}

.boxed {
    display: inline-block;
    border: 2px solid black;
    padding: 5px;
    border-radius: 5px; /* Optional, for rounded corners */
}

.title {
        color: #1f4eb6;
}

.highlight {
        background-color: #EBEDEF; /* Light translucent gray */
        color: inherit; /* Keeps the text color natural */
        padding: 2px;
        border-radius: 3px; /* Subtle rounded corners */
    }

/* buttons */

.download-btn-minimal {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 12px;
   margin: 8px;
   background: white;
   color: #374151;
   text-decoration: none;
   border: 2px solid #e5e7eb;
   border-radius: 8px;
   font-weight: 500;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
   min-width: 120px;
}

.download-btn-minimal:hover {
   border-color: #6366f1;
   color: #6366f1;
   background: #f8fafc;
}

.download-btn-minimal.clicked {
   background: #6366f1;
   color: white;
   border-color: #6366f1;
}

.download-icon {
   margin-right: 8px;
   font-size: 18px;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-color: black;
}

.tooltip .tooltiptext { 
    visibility: hidden; 
    width: 200px;
    background-color: black; 
    color: #fff; text-align: center; 
    border-radius: 5px; padding: 5px 0; 
    padding: 10px 15px;  /* Make the tooltip text box larger */

    position: absolute; 
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the text */ 
    left: 50%; 
    margin-left: -100px; /* Adjust the tooltip's position */
    opacity: 0; 
    transition: opacity 0.3s; 
    font-size: 20px;  /* Make the tooltip text a little bigger */
    line-height: 1.5;  /* Improve the readability of the text */
    max-width: 100%;  /* Allow the tooltip to resize if content is too long */
} 

.tooltip:hover .tooltiptext { visibility: visible;
                              opacity: 1; }




/* Apply consistent margin for the main content */

main {
    /* margin: 0; */
    padding-top: 60px; 
    padding-left: 25px;
    padding-right: 25px;
}



/* Table-specific styles: Ensure light background and dark text */
table {
    background-color: #ffffff !important; /* Force white background */
    color: #000000 !important; /* Force black text */
    border-collapse: collapse; /* Clean borders */
    width: 100%; /* Responsive table width */
    margin: 10px 0; /* Add spacing around tables */
    border: 1px solid #ddd; /* Subtle border for tables */
}

table thead th {
    background-color: #f8f9fa; /* Light gray header background */
    color: #000000; /* Black text for headers */
    text-align: left;
    padding: 8px;
    border-bottom: 2px solid #ddd;
}

table tbody td {
    padding: 4px;
    border-bottom: 1px solid #ddd;
}

/* Apply white text color if the background is black */
table[style*="background-color: black"], 
table[style*="background-color: #000000"] {
    color: white !important; /* Force white text */
}

/* Navigation bar and footer styles */

/* nav, footer {
    background-color: #ffffff; /* Ensure light background */
    color: #000000; /* Ensure dark text */
    margin: 0;
    padding: 0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
} */

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap; /* Prevent line breaks */
  padding: 0.5rem 1rem; /* Adjust spacing */
}


/* Optional: Links */
/* a {
    color: #1a73e8;
    text-decoration: none;
}
 */
/* a:hover {
    color: #d32f2f;
    text-decoration: underline;
}
 */

th.dtfc-fixed-start.dtfc-fixed-left {
    width: auto; /* Reset any conflicting width */
    padding: 0 1px; /* Adjust padding if needed */
}

span.dt-column-title input[type="text"] {
    width: 100% !important;  /* Apply width directly */
    font-size: 12px !important;  /* Change the font size */
}

#popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);  /* semi-transparent background */
  display: none;  /* Hidden by default */
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  width: 300px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

.buttonPassword:hover {
  background-color: #2780e3;
  color: white;
}

.btn {
  display: inline-block;
  padding: 6px 10px; 
  font-family: var(--bs-body-font-family);
  background-color: transparent;
  color: black;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid black; 
  font-size: 16px;
  transition: background-color 0.3s;
}

.btn.active {
    color: #fff; /* White text */
    background-color: #1f4eb6; /* Primary button background */
    border-color: #1f4eb6; /* Primary button border */
    pointer-events: none; /* Make it non-clickable */
}

.button:hover {
  background-color: #1f4eb6;
  color: white;
}

.buttonNonclickable {
  display: inline-block;
  padding: 4px 6px;
  background-color: #1f4eb6; /* Primary button background */
  border-color: #1f4eb6; /* Primary button border */
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s;
  font-size: 16px;
  pointer-events: none; /* Disable pointer events */
  border: 1px solid white; /* Change the outline color to red */
   &:hover {
    background-color: black; 
  }
}

.buttonPassword {
  display: inline-block;
  padding: 4px 6px;
  background-color: transparent;
  color: transparent;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s;
  font-size: 16px;
  border: 1px solid white; /* Change the outline color to red */
  transition: background-color 0.3s;
}


/* itables */

.dt-container {
  font-size: 16px;
  font-family: var(--bs-body-font-family);
  margin: 0px 0;  /* Add spacing if needed */
}

.dt-column-title {
    font-size: 16px !important;
    font-weight: bold !important; 
    color: #333 !important;
}


.dt-buttons button {
  display: inline-block;
  padding: 6px 10px;
  background-color: transparent;
  color: black;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid black; 
  font-family: var(--bs-body-font-family);
  font-size: 16px;
  transition: background-color 0.3s;
}

.btn-outline-primary:hover {
    --bs-btn-hover-bg: #1f4eb6;
}


.dt-buttons button:hover {
  background-color: #1f4eb6;
  color: white;
}

thead tr.top-header th {
    background-color: #f0f0f0;
    font-weight: bold;
    text-align: center;
}

/* Styling the input field text */
/* .dt-input {
    font-style: italic; /* Make the input text italic */
    border: 5px solid #ccc; /* Add a light border */
    border-radius: 4px; /* Optional: Rounded corners */
    padding: 2px; /* Add some padding */
    font-size: 14px; /* Adjust font size */
} */


/* **from here to "ends here" is to what removed search engine
/* Completely hide the global search container */
div.dataTables_filter {
    display: none !important;
}
label[for^="dt-search"] {
    display: none !important;
}

/* Optional: Just in case input is still rendered directly */
input[type="search"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
/** ends here

/* Make the title row a flex container aligned to the left */
div.dtsp-titleRow {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1em; /* spacing between title and buttons */
}

/* Prevent buttons from floating to the right */
div.dtsp-verticalButtons {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Optional: normalize button spacing */
div.dtsp-verticalButtons button {
    margin: 0 0.25em 0 0;
}

/* Container holding the buttons and title */
.dtsp-titleRow {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Adjusts the space between items */
}

.dtsp-buttons {
  display: flex;
  gap: 2px; /* Narrow space between the buttons */
}


/* Set order of each item */
.dtsp-showAll {
  order: 1;

}

.dtsp-collapseAll {
  order: 2;
  padding: 0;
  line-height: 1;
}

.dtsp-showAll + .dtsp-collapseAll {
  margin-top: -25px; /* reduce the gap between ▼ and ▲ */
  margin-left: -35.75px;
}

.dtsp-title {
  order: 3;
}

.dtsp-clearAll {
  order: 4;
}

.dtsp-showAll::before {
  content: "🔍 Display/Hide All"; /* Add text or icons before the button */
  padding-right: 10px; /* Adjust the spacing between the text and button */
  color: #1f4eb6;
  font-style: bold;
}

.dtsp-clearAll::after {
  content: "Pro tip: To select multiple values within a given column, press and hold command and click on desired values."; /* Add text or icons before the button */
  padding-left: 10px; /* Adjust the spacing between the text and button */
  color: #1f4eb6
}



/* Styling the placeholder text to make it transparent */
.dtsp-paneInputButton::placeholder {
    color: transparent;  /* Make placeholder text transparent */
    opacity: 0;          /* Optional: Ensure the placeholder is fully invisible */
}

/* Optional: You can also adjust the tooltip style if needed */
.dtsp-paneInputButton[title]::after {
    content: attr(title);  /* Display the tooltip from the title attribute */
    color: #d4af37;           /* Tooltip text color */
    font-size: 15px;       /* Tooltip font size */
}

.dtsp-paneInputButton {
    padding: 5px 10px;   /* Adjust padding to make it smaller */
}

.dtsp-paneInputButton {
    width: 150px;        /* Adjust width */
    height: 30px;        /* Adjust height */
    font-size: 10px;     /* Adjust font size */
}

.dtsp-searchPane table,
.dtsp-searchPane .dtsp-name span,
.dtsp-searchPane .dtsp-count,
.dtsp-searchPane .dtsp-search,
.dtsp-searchPane label,
.dtsp-searchPane input {
    font-size: 12px !important;
}





/* Targeting the input fields within the th elements that have the dtfc-fixed-start and dtfc-fixed-left classes */
th.dtfc-fixed-start.dtfc-fixed-left input[type="text"] {
    width: 50px;  /* Adjust the width to make the input field shorter */
}

span.dt-column-title input[type="text"] {
    width: 50px;  /* Adjust the width to make the input field shorter */
}

/* Ensure a max-width for all table cells */
table.dataTable td,
table.dataTable th {
    max-width: 200px; /* Set your preferred max width */
    text-overflow: ellipsis; /* Handle overflow with ellipsis */
    overflow: hidden; /* Hide overflow content */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Adjust fixed columns */
.dtfc-fixed-left, .dtfc-fixed-right {
    background-color: #f9f9f9; /* Match table body */
    border-right: 1px solid #ddd; /* Optional border */
}

/* Table wrapper adjustments */
.dataTables_wrapper {
    overflow-x: auto; /* Allow horizontal scrolling */
    width: 100%; /* Ensure full width */
}

/* Fixed header alignment */
.dataTables_scrollHeadInner {
    width: 100% !important; /* Match the table's width */
}


table.dataTable thead th {
    text-align: left; /* Center-align headers */
    vertical-align: middle; /* Center headers vertically */
}


/* Change font for navbar items */
.navbar-nav .nav-link {
    font-family: 'Roboto Sans', sans-serif;/* Replace with your preferred font */
    font-weight: bold;  
    font-size: 18px;    
}

/* Change color on hover */
.navbar-nav .nav-link:hover {
    color: #d4af37; /* Change to your desired hover color */
}

/* Change color when active (when the page is selected) */
.navbar-nav .nav-link.active {
    color: #d4af37 !important; /* Keeps color on active page */
}

/* Change color when clicked */
.navbar-nav .nav-link:focus, 
.navbar-nav .nav-link:active {
    color: #d4af37 !important;
}

/* Change color when active */
.navbar-nav .nav-link:disabled {
    color: #d4af37;   /* Change to your desired active color */
}

/* Change background color on hover in the dropdown menu */
.navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: #d4af37; /* Change to your desired hover background color */
    color: #fff; /* Change text color when hovering (optional) */
}

/* Change background color when active in the dropdown menu */
.navbar-nav .dropdown-menu .dropdown-item:active {
    background-color: #d4af37; /* Change to your desired active background color */
    color: #fff; /* Text color when active (optional) */
}

/* Keep dropdown header highlighted when dropdown is open */
.navbar-nav .nav-item.dropdown.show > .nav-link {
    color: #d4af37 !important;
}

/* Keep 'ConnectomeDB' gold when any database file is active */
.navbar-nav .nav-item.dropdown .nav-link {
    color: inherit; /* Default color */
}

/* If any page in 'database' is active, highlight the dropdown header */
.navbar-nav .nav-item.dropdown.active > .nav-link {
    color: #d4af37 !important;
}

.navbar-toggler {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
}
            
.navbar-toggler:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.navbar-toggler:active, .navbar-toggler[aria-expanded="true"] {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25) !important;
}


/* nav-bar brand starts here */

.navbar-brand {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
            
    /* Gradient text */
    background: linear-gradient(
        to right,
        #ffffff 0%,
        #d4af37 10%,
        #ffffff 50%,
        #d4af37 70%,
        #ffffff 90%,
        #d4af37 100%
    );
    position: relative;
    overflow: visible;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent !important; /* Force override */
    }


/* Hover effects */
.navbar-brand:hover {
            color: #d4af37;
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

/* Active/Click effects */
.navbar-brand.active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    color: #d4af37 !important;
    background-color: rgba(212, 175, 55, 0.1) !important;
}

.navbar-brand.active::after {
            background-color: #d4af37;
        }

.navbar-brand:hover::before {
            left: 100%;
    }

/* Alternative style with underline effect */
.navbar-brand-alt {
            display: inline-block;
            color: #fff;
            text-decoration: none;
            font-size: 1.5rem;
            font-weight: bold;
            padding: 0.5rem 1rem;
            margin-left: 2rem;
            position: relative;
            transition: color 0.3s ease;
            cursor: pointer;
    }

.navbar-brand-alt::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background-color: #d4af37 !important;
            transition: all 0.3s ease;
            transform: translateX(-50%);
    }

.navbar-brand-alt:hover {
        color: #d4af37;
    }

.navbar-brand-alt:hover::after {
        width: 100%;
    }

.navbar-brand-alt:active {
        color: #d4af37;
        transform: scale(0.98);
    }

.navbar-brand-alt.active::after {
    width: 100%;
}

.clickable-icon {
  color: #e67e22; /* A bright orange color */
  margin-left: 8px;
  font-size: 0.8em; /* Slightly bigger to catch the eye */
  vertical-align: middle; /* Aligns nicely with text */
  transition: color 0.3s ease;
}

a:hover .clickable-icon {
  color: #d35400; /* Darker orange on hover */
}

.nav-icon {
 font-size: 20px;
}

@media screen and (max-width: 768px) {
  main {
    min-height: 100vh !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  body {
    font-size: 80% !important;
  }
    
 .navbar-container {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
 }
 .navbar-toggler-icon {
   width: 1.1em !important;
   height: 1.1em !important;
  }
    
  span.dt-column-title input[type="text"] {
    width: 100% !important;  /* Apply width directly */
    font-size: 90% !important;  /* Change the font size */
  }
    .dt-buttons, .responsive-icon {
        transform: scale(0.8);
        transform-origin: top left;
  }

  div.dt-container .dt-paging .dt-paging-button {
        transform: scale(0.8);
        transform-origin: top left;
  }

  /* Optional: further scale down specific UI elements */
  .nav-icon {
        font-size: 18px;
  }

  /* .navbar-nav .nav-link  */
  h1, h2, h3, .h1, .h2, .h3, h4, h5,
  h6, .h4, .h5, .h6,
  .dt-column-title {
    font-size: 98% !important;
  } 

  ul li {
  font-size: 80% !important;
  }
  .navbar-nav .nav-link, .navbar-nav .dropdown-item,
  .navbar-nav .dropdown-item, .navbar .dropdown-item,
  .dropdown-item,{
        font-size: 90% !important;
    }
  .dt-info, p, text,
      .btn, button, 
      .dataTables_wrapper, 
      .dataTable, 
      table, 
      th, td,
      .itables-container,
      .dataTables_filter input,
      .dataTables_length select,
      .dataTables_paginate,
      .dataTables_info {
        font-size: 80% !important;
      }

}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px 20px;
  text-align: center;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #d4af37;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}
.loading-subtext {
  font-size: 14px;
  color: #999;
  font-style: italic;
}