/* ==========================================================================
   LayoutFilter.css
   - Styles for filters on the statistics page
   - Root variables for central control of colors, spacing, etc.
   --> The title is set in .chart-title (LayoutCharts), as currently no different titles are required for filters and charts
   ========================================================================== */
:root {
    /* Header */
    --filter-header-bg: #f9f9f9; /*bg = backgrund --> background color for the header*/
    --filter-header-text: #000;

    /* Box */
    --filter-box-bg: #fff;
    --filter-box-border-color: #e7e7e7;
    --filter-box-border: 1px solid var(--filter-box-border-color);
    --filter-box-padding: 0 20px; /*Innneabstand Box (top/bottom left/right)*/
    --filter-box-radius: 6px;
    --filter-box-shadow: none;

    --filter-box-space: 10px;


    /* Fonts */
    --filter-font-size: 18px;
    --filter-font-weight: 600; /* 600 = bold */

    /* Checkbox */
    --filter-checkbox-gap: 30px;
    --filter-checkbox-width: calc(50% - 20px);
    --filter-checkbox-label-space: 16px;

    /* Slider */
    --slider-border-color: var(--filter-box-border-color);
    --slider-border: 1px solid var(--slider-border-color);
    --slider-handle-bg: #fff;
    --slider-handle-border: #e7e7e7;
    --slider-connect-bg: #6b6b6b;
    --slider-handle-hover-border: #0074bd;

    /* Button*/
    --filter-button-reset-bg: #e7e7e7;

}

/*====================== Wrapper und Hauptboxen ============================ */
/* Wrapper (Exclude publication types, Exclude preprints already published in journals) */
.filter-wrapper {
    display: flex;  /* Flexbox for side-by-side filters */
    /*padding: 5px 0;*/
    align-items: stretch;
    flex-wrap: wrap;    /* Line break for small screens */
    gap: var(--filter-box-space);  /* Distance between filter boxes */
    margin-bottom: var(--filter-box-space);
}

.filter-box {
    flex: 0 0 auto; /* fixed width */
    max-width: 50%;  /* max width */
    min-width: 250px; /* min width */
    box-sizing: border-box; /* Include padding & border in element's total width/height */
    border: 1px solid var(--filter-box-border-color);
    border-radius: var(--filter-box-radius);
    background: var(--filter-box-bg);
    box-shadow: var(--filter-box-shadow);
    overflow: hidden;/* Content must not overflow */
}

/* Rechte Spalte: Preprint + Collaboration Maps */
.filter-column-right {
    display: flex;
    flex-direction: column; /* oben/unten */
    gap: var(--filter-box-space);
    flex: 0 0 48%; /* Breite der rechten Spalte */
}


/* ==================== Header within the box ==================== */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--filter-header-bg);
    color: var(--filter-header-text);
    font-size: var(--filter-font-size);
    font-weight: var(--filter-font-weight);
    padding: 10px 12px;
    border-bottom: var(--filter-box-border);
    border-radius: var(--filter-box-radius) var(--filter-box-radius) 0 0; /*header do not need radius on bottom*/
}

/*---------------------------------- Checkbox ------------------------------ */
/* Content inside the box */
.filter-box .chart-box {
    padding: var(--filter-box-padding); /*addional padding in the filter-box */
    border: none; /*no addional border box of filterelement */
}


/* Checkbox into two */
.filter-box .form-checkboxes {
    display: flex;
    flex-wrap: wrap;     /* Wrap checkboxes */
    gap: 0 var(--filter-checkbox-gap); /* horizontal distance between checkboxes (if its to big only one list */
}

.filter-box .form-checkboxes > div {
    display: flex;
    align-items: center;
    width: var(--filter-checkbox-width); /* Breite pro Checkbox */
    box-sizing: border-box; /* Include padding & border in element's total width/height */
}

/*checkbox itself and text*/
.filter-box .form-checkboxes input[type="checkbox"] {
    margin-right: var(--filter-checkbox-label-space);
}

/* Spezifisch für Preprints-Box */
.filter-box .form-item-exclude-preprints-published {
    margin-top: 8px;    /* Abstand oben zur Überschrift */
    margin-bottom: 8px; /* Abstand unten zur Boxkante */
}
/*===================== Year slider ====================*/
/* Year Slider */
.filter-year-slider {
    border: var(--slider-border);
    border-radius: var(--filter-box-radius);
    background: var(--filter-box-bg);
    box-shadow: var(--filter-box-shadow);
    overflow: hidden;
    margin-bottom: var(--filter-box-space); /* Abstand nach unten zu den anderen Filter-Boxen */
}

/* keine veränderung wenn farben geändert wurden
.filter-year-slider .chart-header {
    background: var(--filter-header-bg);
    font-size: var(--filter-font-size);
    font-weight: var(--filter-font-weight);
    padding: 10px 12px;
    border-bottom: 1px solid var(--slider-border-color);
    border-radius: 6px 6px 0 0;
} */

/*slider content (box) around the whole slider funktion in the box */
.filter-year-slider .chart-box {
    padding: 30px 30px 0 30px; /* oben = 30px, rechts = 30px, unten = 0 pedding from value, links = 30px */
    border: none;
}

/* Slider Handles */
#year-slider .noUi-connect {
    background: var(--slider-connect-bg) !important;
}

#year-slider .noUi-handle {
    background: var(--slider-handle-bg) !important; /* handle slider */
    border: 1px solid var(--slider-handle-border) !important;
    border-radius: 4px !important;
    cursor: grab;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
/* Hover effect slider */
#year-slider .noUi-handle:hover {
    border-color: var(--slider-handle-hover-border) !important;
}

.year-slider-values {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    font-weight: bold;
    font-size: 16px;
    color: #000;
    margin: 0;
}


/* Abstand Punkt ↔ Text für alle Radios */
.filter-box input[type="radio"] {
    margin-right: 10px; /* Abstand Kreis Text */
    vertical-align: middle;
}


/* Preprints-Radios nebeneinander */
#edit-exclude-preprints-published .form-item {
    display: inline-flex;       /* Flex statt inline-block */
    align-items: center;        /* vertikal mittig */
    margin-right: 55px;         /* Abstand zwischen den Radios */
    /*padding-left: 0px;*/

}
/*==================== Apply Button =========================== */
.filter-button {
    position: absolute;          /* fixes the buttons relative to the filter box */
    bottom: var(--filter-box-space);
    right: var(--filter-box-space);
    display: flex;
    flex-direction: column;      /*  Buttons below each other */
    align-items: stretch;     /* left-aligned within the flex column  */
    gap: 10px;
    margin: 0 !important;
}

.filter-button input[type="submit"] {
    width: 200px;        /* same width */
    text-align: center;
    box-sizing: border-box;  /* important so that padding & border are included in width */
    display: block;
    margin-right: 0 !important;
    margin-left: 0 !important;

}

/* Reset-Button grey */
#edit-reset {
    background-color: var(--filter-button-reset-bg);
    color: #000;
    border: 1px solid #999;
}

#edit-reset:hover {
    background-color: #bbb;
}

/* Tooltip-Styling für den Info-Icon im filter-header */
.filter-header .info-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid var(--info-icon-border);
    background-color: var(--info-icon-bg);
    color: var(--info-icon-color);
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    position: relative;
    margin-left: auto; /* Pushes the icon to the right */
    margin-right: 10px; /* Optional: Abstand zum Rand */
}

.filter-header .info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--info-tooltip-bg);
    color: var(--info-tooltip-color);
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: normal;
    white-space: pre-line;
    word-wrap: break-word;
    text-align: justify;
    text-align-last: left;
    line-height: 1.6;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    width: var(--info-tooltip-width);
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.filter-header .info-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Stelle sicher, dass der filter-header den Tooltip nicht abschneidet */
.filter-header {
    position: relative;
    overflow: visible;
}

/* Stelle sicher, dass der Tooltip nicht von übergeordneten Elementen abgeschnitten wird */
.filter-box,
.filter-header,
.filter-box .chart-box {
    overflow: visible !important;
}