@import url("https://code.highcharts.com/css/highcharts.css");
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");
@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

html, body, * {
    font-family: 'Inter', sans-serif !important;
}

/* *
 *
 *  Navigation bar
 *
 * */
.navbar {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the links as a whole */
    padding: 10px 20px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    top: 0;
    width: 100%;
    z-index: 1000;
    gap: 20px; /* Add spacing between the logo and other content */
    height: 75px; /* Ensure consistent height */
    box-sizing: border-box;
    position: relative; /* For absolute positioning of the logo */
}

/* Portal Header Logo Container */
.portal-header-logo-container {
    position: absolute; /* Remove from normal flow to prevent affecting centering */
    left: 20px; /* Align to the left */
    display: flex;
    align-items: center;
}

.portal-header-logo-container > a {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding-left: 0; /* Removed padding-left since logo is absolutely positioned */
}

.portal-header-logo-container svg {
    width: 14.12px;
    height: 23.93px;
    color: #333333;
    fill: currentColor; /* Ensures paths use the svg's color */
}

.portal-header-divider {
    width: 1px;
    height: 30px;
    background-color: #333333;
    margin: 0 8px;
}

.portal-header-logo-container span {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
}

/* Center links */
.navbar-links {
    display: flex;
    gap: 10px; /* Space between buttons */
    border: 1px solid #333333; /* Outer border color for all buttons */
    border-radius: 25px; /* Smooth rounded edges */
    padding: 5px; /* Add padding to create space between border and buttons */
    background-color: #fff; /* White background for the button group */
}

.navbar-links:hover {
    border-color: #079BCA;
}

/* Link styles */
.navbar-link {
    padding: 8px 12px;
    font-weight: bold;
    border-radius: 25px;
    color: #1e4557; /* Default font color */
    text-decoration: none;
    font-size: 20px; /* Larger font size */
    text-align: center;
    transition: all 0.3s ease;
}

/* Active link */
.navbar-link.active {
    background-color: #1e6d8b; /* Active background color */
    color: #fff; /* White font color for active link */
    pointer-events: none; /* Prevent hover on active links */
}

/* Hover effects for non-active links */
.navbar-link:not(.active):hover {
    color: #079BCA; /* Hover font color */
    background-color: transparent; /* Ensure background stays transparent unless active */
}
/* Hover effects for non-active links */
.navbar-link:not(.active):hover {
    color: #079BCA; /* Hover font color */
    background-color: transparent; /* Ensure background stays transparent unless active */
}

/* Responsive adjustments for devices smaller than 1210px */
@media (max-width: 1210px) {
    .portal-header-logo-container svg {
        width: 10.58px;
        height: 17.94px;
    }

    .portal-header-logo-container span {
        font-size: 18px; /* Adjust text size */
    }

    .navbar-link {
        font-size: 14px; /* Adjust navbar link font size */
    }
}

/* Responsive adjustments for devices smaller than 1024px */
@media (max-width: 1024px) {
    .navbar {
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align items to the left */
        gap: 10px; /* Add spacing between stacked elements */
        height: auto; /* Allow dynamic height based on content */
        padding: 20px 20px; /* Increase padding for spacing */
    }

    .portal-header-logo-container {
        position: relative; /* Ensure proper positioning in column layout */
        left: 0; /* Align to the left */
        width: 100%; /* Allow the logo container to fit within the navbar width */
        display: flex;
        align-items: center;
    }

    .portal-header-logo-container span {
        font-size: 16px; /* Adjust text size */
        flex-grow: 1; /* Ensure logo text stays aligned with the logo */
    }

    .navbar-links {
        justify-content: center; /* Center navbar links */
        width: auto; /* Prevent the navbar links from stretching */
        margin: 0 auto; /* Center align in the navbar */
        display: flex; /* Keep links in a row */
        gap: 10px; /* Adjust gap between links */
        border: 1px solid #333333; /* Retain border styling */
        border-radius: 25px; /* Smooth rounded edges */
        padding: 5px; /* Padding inside the links container */
        background-color: #fff; /* White background */
    }

    .navbar-link {
        font-size: 18px; /* Adjust navbar link font size */
        padding: 8px 12px; /* Add padding for better spacing */
        border-radius: 25px; /* Ensure buttons have rounded edges */
        text-align: center;
    }
}

/* Responsive adjustments to prevent wrapping */
@media (max-width: 768px) {
    .navbar-links {
        flex-wrap: wrap; /* Allow wrapping if space is insufficient */
        justify-content: center;
    }
}

/* Right-aligned container */
.navbar-action {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

@media (max-width: 1024px) {
    .navbar-action {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        align-self: flex-end;
        margin-top: 10px;
    }
}

/* Action-style button */
.btn-action {
    display: inline-flex;
    align-items: center;
    background-color: #f5f7f8; /* Default background */
    border: 2px solid #5b6d73; /* Default border */
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

/* Hover / focus / active */
.btn-action:hover,
.btn-action:focus,
.btn-action:active {
    background-color: #146C8B;
    color: white;
}

/* Disabled */
.btn-action:disabled {
    background-color: #ccc;
    border-color: #ccc;
    color: #777;
    cursor: not-allowed;
}

.btn-action img,
.btn-action svg {
   width: 20px;
   height: 20px;
   margin-right: 8px;
   transition: transform 0.3s ease, filter 0.25s ease, color 0.25s ease, fill 0.25s ease;
   flex-shrink: 0;
   display: inline-block;
}

/* Ensure inline SVGs follow the button color */
.btn-action svg {
    fill: currentColor;
}

/* Hover: scale icon and make it white.
   For inline SVG this sets fill; for raster/external SVGs we use filter. */
.btn-action:hover img,
.btn-action:focus img,
.btn-action:active img {
    transform: scale(1.1);
    filter: invert(1) brightness(1.2) grayscale(1);
}

.btn-action:hover svg,
.btn-action:focus svg,
.btn-action:active svg {
    transform: scale(1.1);
    color: #fff;
    fill: #fff;
}

/* *
 *
 *  Charts
 *
 * */

/* LARGE (> 1210px) */
@media (min-width: 1211px) {
    #map,
    #yearly-charts,
    #hour-table,
    #hourly-charts,
    #weekly-table,
    #weekly-dtv-chart,
    #month-table,
    #monthly-charts {
        flex: 1 1 50%; /* Take half the container width */
    }
}

/* MEDIUM (768px to 1210px) */
@media (max-width: 1210px) and (min-width: 769px) {
    #map,
    #yearly-charts,
    #hour-table,
    #hourly-charts,
    #weekly-table,
    #weekly-dtv-chart,
    #month-table,
    #monthly-charts {
        flex: 1 1 100%; /* Take full width */
    }

    #hour-table,
    #month-table,
    #weekly-table {
        height: 400px; /* Set a fixed height for tables */
    }

    #hourly-dtv-chart,
    #hourly-donut-chart,
    #yearly-chart,
    #availability-chart,
    #monthly-dtv-chart,
    #monthly-weather-chart {
        flex: 1 1 50%; /* Half width for nested charts */
    }
}

/* SMALL (< 768px) */
@media (max-width: 768px) {
    #map,
    #yearly-charts,
    #hour-table,
    #hourly-charts,
    #weekly-table,
    #weekly-dtv-chart,
    #month-table,
    #monthly-charts {
        flex: 1 1 100%; /* Full width for all main charts */
    }

    #hour-table,
    #month-table,
    #weekly-table {
        height: 400px; /* Set a fixed height for tables */
    }

    #hourly-dtv-chart,
    #hourly-donut-chart,
    #yearly-chart,
    #availability-chart,
    #monthly-dtv-chart,
    #monthly-weather-chart {
        flex: 1 1 100%; /* Full width for nested charts */
    }
}

/* *
 *
 *  Filter buttons
 *
 * */

/* Flexbox layout for filter buttons container */
#filter-buttons,
#day-range-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Add space between filter-groups */
    gap: 10px; /* Space between each filter-group */
    align-items: flex-start; /* Align items to the top */
    padding: 20px;
}

/* Style for filter group headers */
.filter-group h3 {
    margin: 0; /* Remove default margins */
    font-size: 16px;
    color: #333;
    white-space: nowrap; /* Prevent the header from wrapping */
}

/* Adjust the filter group container if needed */
.filter-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* Space between items */
}

@media (max-width: 768px) {
    .filter-group {
        flex: 1 1 100%; /* Stack vertically on smaller screens */
    }
}

/* Hide inputs */
#filter-buttons input[type="radio"],
#day-range-buttons input[type="checkbox"],
#day-range-buttons input[type="radio"] {
    display: none;
}

/* General styling for labels */
#filter-buttons label,
#day-range-buttons label {
    display: inline-flex;
    align-items: center;
    background-color: #f5f7f8; /* Default background */
    border: 2px solid #5b6d73; /* Default border */
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 14px;
    margin: 0 5px 0 0;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
    position: relative; /* Required for pseudo-elements */
}

/* Checked state styling */
#filter-buttons input[type="radio"]:checked + label,
#day-range-buttons input[type="checkbox"]:checked + label,
#day-range-buttons input[type="radio"]:checked + label {
    border-color: #6A0DAD;
    box-shadow: 0 0 10px 3px rgba(106, 13, 173, 0.3); /* Violet glow effect */
}

/* Hover effect for all buttons */
#filter-buttons label:hover,
#day-range-buttons label:hover {
    background-color: #e0e6e8; /* Slightly darker on hover */
}

/* Styles for date inputs */
#day-range-buttons input[type="date"] {
    background-color: #f5f7f8;
    border: 2px solid #5b6d73;
    border-radius: 20px;
    padding: 8px 12px;
    margin: 0 5px 0 0;
    font-size: 14px;
    color: #333;
    transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Focus effect for date inputs */
#day-range-buttons input[type="date"]:focus {
    border-color: #6A0DAD;
    box-shadow: 0 0 10px 3px rgba(106, 13, 173, 0.3); /* Violet glow effect */
}

/* Adjust labels for date inputs */
#day-range-buttons .filter-group label[for="start-date"],
#day-range-buttons .filter-group label[for="end-date"] {
    background: none;
    border: none;
    padding: 0;
    margin: 0 5px 0 0;
    cursor: default;
}

#day-range-buttons .filter-group label[for="start-date"]:hover,
#day-range-buttons .filter-group label[for="end-date"]:hover {
    background: none;
}

/* Ensure date inputs are inline */
#day-range-buttons .filter-group input[type="date"] {
    display: inline-block;
    width: auto;
}

/* Icon and color circle styling */
.filter-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    transition: transform 0.3s ease;
    border-radius: 50%; /* For color circles */
}

#filter-buttons label:hover .filter-icon {
    transform: scale(1.1); /* Slight scale-up effect on hover */
}

/* Flexbox for date-picker container */
.date-picker {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for small screens */
    gap: 10px; /* Space between date-item elements */
}

/* Flexbox for each date-item */
.date-item {
    display: flex;
    flex-direction: row; /* Keep label and input inline */
    align-items: center;
    gap: 5px; /* Space between label and input */
}

/* Force "Bis" to drop below on smaller screens */
@media (max-width: 768px) {
    .date-item {
        flex: 1 1 100%; /* Each pair takes full width on small screens */
    }
}



/* *
 *
 *  Dropdown styles
 *
 * */

/* Style for the custom select container */
.custom-select {
    position: relative;
    display: inline-block;
    background-color: #f5f7f8;
    border: 2px solid #5b6d73;
    border-radius: 20px;
    padding: 0; /* Remove padding to avoid double spacing */
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
    width: 100%; /* Full width of the container */
}

/* Style for the select element inside custom-select */
.custom-select select {
    appearance: none;
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    background: transparent;
    border: none;
    font-size: 14px;
    color: #333;
    padding: 12px 12px;
    border-radius: 20px; /* Match the container's border-radius */
    width: 100%;
    cursor: pointer;
    outline: none; /* Remove default outline */
}

/* Add a custom arrow using ::after */
.custom-select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 0;
    height: 0;
    margin-top: -4px;
    border-top: 8px solid #333;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    pointer-events: none;
}

/* Hover effect for the custom select */
.custom-select:hover {
    background-color: #e0e6e8; /* Slightly darker on hover */
}

/* Focused state styling */
.custom-select:focus-within {
    border-color: #6A0DAD;
    box-shadow: 0 0 10px 3px rgba(106, 13, 173, 0.3); /* Violet glow effect */
}

/* Remove default arrow in IE */
.custom-select select::-ms-expand {
    display: none;
}

/* Optional: Style the options (Note: Styling options is limited) */
#zaehlstellen-dropdown option {
    background-color: #fff;
    color: #333;
}

/* Optional: Adjust font size and padding of options */
#zaehlstellen-dropdown option {
    padding: 10px;
    font-size: 14px;
}