/* Root Variables for Theming */
:root {
    --background-color: #121212;
    --sidebar-color: black;
    --text-color: #ffffff;
    --accent-color: #ffffff;
    --panel-color: #2a2a2a;
    --button-hover-bg-color: #008AD8;
}

/* Reset and Base Styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    height: 100vh;
}



/* Filter Dropdown Styles */
#filters-container-long {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 10px 0;
    align-items: center; /* Ensures vertical centering */
}
/* Filter Dropdown Styles */
#filters-container-short {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 10px 0;
    align-items: center; /* Ensures vertical centering */
}

#filters-container-spreads {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 10px 0;
    align-items: center; /* Ensures vertical centering */
}

#filters-container label {
    font-size: 12px;
    color: var(--text-color);
    margin-right: 5px; /* Adds space between label and select element */
}

#filters-container-long select {
    background-color: #333 !important; /* Force solid dark background */
    color: #fff !important; /* White text color */
    border: 2px solid #444 !important; /* Solid border */
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 10px; /* Optional: for rounded corners */
    appearance: none; /* Removes default dropdown arrow */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    position: relative; /* Required for positioning custom dropdown */
    height: 32px; /* Ensures consistent height for selects */
}

#filters-container-short select {
    background-color: #333 !important; /* Force solid dark background */
    color: #fff !important; /* White text color */
    border: 2px solid #444 !important; /* Solid border */
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 10px; /* Optional: for rounded corners */
    appearance: none; /* Removes default dropdown arrow */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    position: relative; /* Required for positioning custom dropdown */
    height: 32px; /* Ensures consistent height for selects */
}


#filters-container-spreads select {
    background-color: #333 !important; /* Force solid dark background */
    color: #fff !important; /* White text color */
    border: 1px solid #444 !important; /* Solid border */
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 10px; /* Optional: for rounded corners */
    appearance: none; /* Removes default dropdown arrow */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    position: relative; /* Required for positioning custom dropdown */
    height: 32px; /* Ensures consistent height for selects */
}
/* Custom Dropdown Arrow */
#filters-container select::after {
    content: "▼"; /* Unicode arrow symbol */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Ensures it doesn't interfere with clicks */
    color: #fff; /* Arrow color */
}

/* Optional: Remove any default styling applied by browsers */
select::-ms-expand {
    display: none; /* Removes dropdown arrow in IE/Edge */
}

/* Focus styling for select */
#filters-container select:focus {
    outline: none;
    border-color: var(--accent-color); /* Optional: change border color on focus */
}


/* Sidebar */
.sidebar {
    width: 6%;
    background-color: var(--sidebar-color);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(83, 81, 81); /* Adds a grey border */
}

.sidebar h4 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    text-align: center;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    
}

.sidebar a {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the text horizontally */
    border: 1px solid grey; /* Gray border */
    border-radius: 10px; /* Rounded corners */
    cursor: pointer;
    font-size: 0.8vw; /* Dynamically adjust font size based on screen width */
    background-color: var(--button-bg-color); /* Button background color */
    white-space: nowrap; /* Prevent text from wrapping */
    padding: 12px 1px; /* Padding inside the list items */
    color: var(--text-color);
    text-decoration: none;
    text-align: center; /* Center the text in the link */
    max-width: 100%; /* Ensure it doesn't overflow horizontally */
    overflow: hidden; /* Prevent text from overflowing beyond the container */
    box-sizing: border-box; /* Ensure padding and borders are included in width/height calculation */
}

/* Button-like effect for hover */
.sidebar a:hover {
    background-color: var(--button-hover-bg-color); /* Change background on hover */
}

/* Optional: Remove truncation if desired */
.sidebar a {
    overflow: visible; /* Ensure the text isn't truncated */
    text-overflow: unset; /* Remove ellipsis */
}




/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow-y: auto;
}

/* Filters */
.filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.filters label {
    margin-right: 0.5rem;
}

.filters select {
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
    padding: 0.5rem;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px; /* Small text size */
    border: 1px solid #444; /* Add border around the table */
    table-layout: auto;
}

th, td {
    padding: 5px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #444; /* Add borders between columns */
    
}

th {
    background-color: transparent;
    color: #fff;
    border-bottom: 2px solid #666; /* Optional: Thicker border for header row */
}

td {
    background-color: transparent;
}

/* tr:nth-child(even) td {
    background-color: #302f2f;
} */

/* Optional: Add hover effect for table rows */
tr:hover td {
    background-color: #444; /* Highlight row on hover */
}

/* Pagination and Search Box */
.dataTables_filter input, .dataTables_length select {
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
}

.dataTables_info {
    color: var(--text-color);
}


.dataTables_paginate .paginate_button {
    background-color: #797575;
    color: white;
    border: 1px solid #444;
}

.dataTables_paginate .paginate_button:hover {
    background-color: #444;
    color: #fff;
}

.dt-info {

    color: #5d5a5a; /* Dark text color */
    font-size: 12px; /* Font size */
    padding: 10px; /* Add padding */
    
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.dt-length {

    color: #5d5a5a; /* Dark text color */
    font-size: 12px; /* Font size */
    padding: 10px; /* Add padding */
    
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.dt-input {
    background-color: transparent;
}


/* Custom Styles for Data */
.positive {
    background-color: #30a246;
}

.negative {
    background: #d8404a;
}

.entry-price {
    color: white;
}

.current-price-red {
    color: red;
}


/* Container for the table title */
.table-title-container {
    background-color: #30a246; /* Green background */
    padding: 10px 0; /* Vertical padding for spacing */
    text-align: center; /* Center the title text */
    border-radius: 5px; /* Optional: rounded corners */
    margin-bottom: 10px; /* Space between the title and the table */
}

/* Title styling */
.table-title {
    color: white; /* White text for contrast */
    font-size: 24px; /* Adjust the font size as desired */
    font-weight: bold; /* Bold title */
    margin: 0; /* Remove default margin */
}


/* Style for the main content section */
/* Apply styles to the container holding the heading and button */
.container_welcome {
    display: flex; /* Use flexbox to align items horizontally */
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Align items vertically in the center */
    padding: 20px;
    gap: 20px; /* Space between the heading and the button */
  }

  /* Style the heading */
  .container_welcome h4 {
    font-size: 2vw;
    margin-bottom: 20px;
  }

  h4 {
    font-size: 1vw;
    margin-bottom: 20px;
  }
  /* Style the logout button */
  #logout-button {
    padding: 10px 20px; /* Add padding to make the button more comfortable */
    font-size: 0.6vw; /* Font size relative to viewport width */
    background-color: transparent;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: auto; /* Make the button's width automatic based on content */
    max-width: 300px; /* Max width to prevent the button from growing too large */
    margin: 10px auto; /* Center the button and add spacing */
    transition: background-color 0.3s ease;
  }

  /* Style the subscription button */
  #subscription-button {
    padding: 10px 20px; /* Add padding to make the button more comfortable */
    font-size: 0.6vw; /* Font size relative to viewport width */
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: auto; /* Make the button's width automatic based on content */
    max-width: 300px; /* Max width to prevent the button from growing too large */
    margin: 10px auto; /* Center the button and add spacing */
    transition: background-color 0.3s ease;
  }

  /* Style the button on hover */
  #logout-button:hover {
    background-color: #0056b3;
  }

    /* Style the subscription on hover */
    #subscription-button:hover {
        background-color: #0056b3;
      }



  /* Dropdown Account menu */
.dropdown {
    position: absolute; /* Allow precise positioning */
    right: 0; /* Align the dropdown to the right side */
    display: inline-block;
    background-color: transparent;
    width: 2vw;
    z-index: 999; /*Ensure the dropdown is above other elements */
    margin-right: 10px; /* Add padding from the right edge of the screen */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: black;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    /* z-index: 1000; */
    padding: 10px;
    border-radius: 5px;
    right: 0; /* Align dropdown content with the button on the right side */
}

.dropdown:hover .dropdown-content {
    display: block;
}





.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.6vw; /* Width of the hamburger icon */
    height: 2.6vh; /* Height of the hamburger icon */
    background-color: transparent;
    cursor: pointer;
    margin-left: auto;
    /* z-index: 1000; */
    margin-right: 10px; /* Add space between the menu and the right edge */
    transition: opacity 0.3s ease; /* Smooth hide/show effect */
}

.line {
    background-color: white;
    height: 4px;
    width: 100%;
    border-radius: 2px;
}