/* -------------------------------------------------------------
   Studyfinder – Layout & Formular
------------------------------------------------------------- */
* {
    font-family: inherit;
    --ss-primary-color: #235a78 !important;
    --ss-animation-timing: 0s !important;
}

#studyProgramsTable {
    cursor: initial;
}

.studyfinder-form select.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding: 10px 40px 10px 15px;
    border: 1px solid #999999;
    border-radius: 6px;
    background-image: url('https://webadmin.tugraz.at/fileadmin/templates/default/images/chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
    color: black;
    font: inherit;
}

/* Firefox:*/
.studyfinder-form select.form-select option,
.studyfinder-form select.form-select optgroup {
    font: inherit;
}

.ss-arrow {
    width: 10px !important;
    height: 10px !important;
    stroke: black !important;
}

.filter-wrap {
    display: grid;
    width: 100%;
    grid-template-columns:
    minmax(0, 1.45fr)
    minmax(0, 3fr)
    minmax(0, 1fr)
    auto;
    margin-bottom: 25px;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
}

.filter-wrap > div:last-child {
    justify-self: end;
}

input[type=text], input[type=text] {
    background-color: white;
    border: 1px solid #999999;
}

:focus-visible, .ss-main.form-select:focus,
.ss-main.form-select:focus-visible {
    outline: 2px solid #000;
    outline-offset: -1px;
    box-shadow: none;
}

.tabulator-responsive-collapse-toggle:focus-visible {
    border: 2px solid #000;
    outline: none;
    border-radius: 0px !important;
}


.studyfinder-form {
    padding: 0 15px;
}

.float-lab {
    position: relative;
}

.studyfinder-form label {
    font-size: 1rem;
    color: #000;
    background-color: white;
    position: absolute;
    top: -12px;
    left: 10px;
    z-index: 10;
    padding: 0px 8px;
}

.studyfinder-form select.form-select,
.studyfinder-form input.form-control {
    height: 40px;
    padding: 0 12px 0 12px;
    font-size: 1rem;
    background-color: transparent;
    border: 1px solid #999999;
    border-radius: 0;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    box-sizing: border-box;
}

/* Suchfeld – Icon */
#searchInput {
    background-image: url('https://webadmin.tugraz.at/fileadmin/templates/default/images/search_black.png');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 40px;

}


/* Zurücksetzen-Button */
#resetButton {
    color: black;
    border: none;
    font-weight: 500;
    font-size: 1rem;
    border-bottom: 1px solid #999;
    text-align: right;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
}

#resetButton:hover {
    background-color: #000;
    color: white;
}

button:disabled:not(.tabulator-footer * ) {
    background-color: initial;
    color: #666666 !important;
    border-bottom: 1px solid transparent !important;
    cursor: initial !important;
}

button:disabled:hover {
    background-color: transparent !important;
}


/* Hinweistext */
#emptyMessage {
    font-size: 1rem;
    color: #666;
    text-align: center;
}

/* -------------------------------------------------------------
   SlimSelect
------------------------------------------------------------- */

.ss-main {
    min-height: 40px !important;
    padding: 5px 12px !important;
    font-size: 1rem !important;
    background-color: transparent !important;
    border: 1px solid #999999 !important;
    border-radius: 0;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

}

.ss-placeholder {
    color: #666 !important;
    font-size: 1rem !important;
}

.ss-multi-selected {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.ss-search {
    display: none !important;
}

.ss-main .ss-values .ss-value .ss-value-text {
    font-size: 16px !important;
}

.ss-main .ss-values {
    align-items: end;
    padding-top: 3px;
}

.ss-main .ss-values .ss-value {
    border-radius: 0 !important;
    height: max-content;
}

.ss-main .ss-values .ss-value .ss-value-delete, .ss-main .ss-values .ss-value .ss-value-delete svg {
    height: 11px !important;
    width: 11px !important;
    border: none;
}


.ss-main .ss-values .ss-value .ss-value-delete svg path {

    stroke-width: 10px !important;
    stroke-linecap: square !important;
}

.ss-content .ss-open-below {
    border: 1px solid #999 !important;
}

/* -------------------------------------------------------------
   Tabulator anpassen
------------------------------------------------------------- */


#studyProgramsTable .tabulator {
    background: transparent;
    border: none !important;
}

#studyProgramsTable .tabulator .tabulator-col {
    padding: 10px;
    border-right: 1px solid #c0c0c0;
}

#studyProgramsTable .tabulator .tabulator-col:last-child {
    border-right: none;
}

#studyProgramsTable .tabulator-row {
    background-color: white;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s;
}

#studyProgramsTable .tabulator-row:hover {
    background-color: transparent;
}

#studyProgramsTable .tabulator-cell {
    padding: 12px;
    border-right: 1px solid #eee;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#studyProgramsTable .tabulator-cell:last-child, #studyProgramsTable .tabulator-cell {
    border-right: none;
}

#studyProgramsTable .tabulator-row:nth-child(odd) {
    background-color: inherit;
}

#studyProgramsTable .tabulator-row {
    border-bottom: 1px solid #000;
}

.tabulator {
    border: none;
    font-size: 1rem;
    background-color: inherit;
}

#studyProgramsTable .tabulator-cell {
    padding: 5px;
    margin: 20px 0px;
    text-overflow: ellipsis;
    overflow: hidden;

}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    background-color: #f5f5f5;
    padding: 15px 10px;
    color: black;
    font-weight: 300;
}

#studyProgramsTable .tabulator-col {
    background: #f5f5f5;

}

#studyProgramsTable .tabulator-header {
    background-color: white;
    border: none;
    height: max-content;
}

.tabulator .tabulator-header {
    height: max-content;
    background-color: red;
}

.tabulator-header br {
    display: none;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter {
    color: #000;
}

#studyProgramsTable .tabulator-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    line-height: 1.35;
}

#studyProgramsTable .tabulator-col .tabulator-col-title {
    white-space: normal;
}

.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
    color: #000;
    font-weight: normal;
}

.tabulator .tabulator-footer .tabulator-paginator {
    text-align: center;
}


/* -------------------------------------------------------------
   Responsive Tabulatortables
------------------------------------------------------------- */
/* nur dieses Tabulator-Grid anfassen – ID anpassen falls anders */
#studyProgramsTable .tabulator-responsive-collapse {
    overflow: visible; /* nichts abschneiden */
}


#studyProgramsTable .tabulator-responsive-collapse tr > td:not(:first-child) {
    white-space: normal; /* Umbruch erlauben */
    overflow-wrap: anywhere; /* bricht auch in langen Tokens */
    word-break: break-word; /* Fallback */
}


.tabulator-row .tabulator-responsive-collapse {
    border-top: inherit;
    border-bottom: inherit;
}

.tabulator-row .tabulator-responsive-collapse table {
    font-size: 1em;
}

.tabulator-row .tabulator-responsive-collapse table td {
    padding-bottom: 5px;
}

.tabulator-row .tabulator-responsive-collapse table td strong {
    font-weight: bold;
    white-space: inherit;
    overflow-wrap: normal;
    word-break: initial;
}

.tabulator-row .tabulator-responsive-collapse table tr {
    vertical-align: top;
}

#studyProgramsTable .tabulator-cell {
    align-items: start;
    justify-content: start;
}

#studyProgramsTable .tabulator-cell svg {
    stroke: transparent;
    background-color: transparent;
    width: 100%;
    height: 100%;
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {
    background: transparent !important;
    width: 36px;
    height: 30px;

}


.tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-open {
    background-image: url('https://webadmin.tugraz.at/fileadmin/templates/default/images/chevron-down.svg');
    background-repeat: no-repeat;
    background-size: 24px 24px;
}

.tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close {
    background-image: url('https://webadmin.tugraz.at/fileadmin/templates/default/images/chevron-down.svg');
    background-repeat: no-repeat;
    transform: rotate(180deg);
    background-size: 24px 24px;
    background-position-x: 6px;
    background-position-y: 4px;
}


#studyProgramsTable .tabulator-col {
    background: #f3f4f6;
    color: #111827;
    border: none;
}

/* -------------------------------------------------------------
   Pagination anpassen
------------------------------------------------------------- */
#studyProgramsTable .tabulator-footer {
    background: transparent;
    border: none;
    margin-top: 10px;
}

#studyProgramsTable .tabulator-paginator button, #studyProgramsTable .tabulator-paginator .tabulator-page {
    display: inline-block;
    padding: 7px 12px;
    margin-right: 3px;
    border: 1px solid #245b78;
    border-radius: 0;
    color: initial;
}

#studyProgramsTable .tabulator-page.active {
    background-color: #245b78;
    color: white;
}


/* ============================================================
   SlimSelect – TU Graz Blau
   ============================================================ */

/*Multiselects in TU Graz blau */
.studyfinder-form .ss-main .ss-multi-selected .ss-values .ss-value {
    background: #0c5a77 !important;
    border: 1px solid #0c5a77 !important;
    color: #fff !important;
}

.studyfinder-form .ss-main .ss-multi-selected .ss-values .ss-value .ss-value-text {
    color: #fff !important;
}

.studyfinder-form .ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete {
    color: #fff !important;
    opacity: .95;
}

.studyfinder-form .ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete:hover {
    opacity: 1;
}

/* Hover/Active im Dropdown */
.studyfinder-form .ss-content .ss-list .ss-option:hover,
.studyfinder-form .ss-content .ss-list .ss-option.ss-highlighted {
    background: #e6f0f4 !important; /* hellblau zum HOvern */
    color: #0c5a77 !important;
}

.studyfinder-form .ss-content .ss-list .ss-option.selected {
    background: #0c5a77 !important;
    color: #fff !important;
}

/*kleine Akzentlinie, wenn das Feld im Fokus */
.studyfinder-form .ss-main.ss-open {
    box-shadow: inset 0 0 0 2px #0c5a77;
}


/* Links in der Tabulator-Spalte "Name" */
.studyfinder-form #studyProgramsTable .tabulator-cell a.sf-name-link {
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color .15s ease, text-decoration-color .15s ease;
}

.studyfinder-form #studyProgramsTable .tabulator-cell a.sf-name-link:hover {
    text-decoration: underline; /* Unterstreichen beim Hover */
    text-underline-offset: .12em; /* etwas Abstand */
    text-decoration-thickness: from-font;
}

.studyfinder-form #studyProgramsTable .tabulator-cell a.sf-name-link:focus-visible {
    outline: 2px solid #000; /* Tastaturfokus gut sichtbar */
    outline-offset: 2px;
    text-decoration: underline;
    border-radius: 0;
}


/* Screenreader-only: visuell versteckt */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.studyfinder-form .ss-main .ss-placeholder {
    opacity: 0; /* oder: visibility: hidden; */
}

/* -----------------------------------------
   Einheitlicher Dropdown-Pfeil - gleiche Grafik, gleiche Größe, gleiche Position
----------------------------------------- */

/* Variablen – zentral anpassen */
:root {
    --sf-chevron-url: url('https://webadmin.tugraz.at/fileadmin/templates/default/images/chevron-down.svg');
    --sf-chevron-size: 20px; /* <— ggf. 18–22 testen bis 100% match */
    --sf-chevron-right: 12px; /* Abstand vom rechten Rand */
}

/* Gemeinsame Höhe für alle Controls */
.studyfinder-form select.form-select,
.studyfinder-form .ss-main {
    min-height: 40px;
    line-height: 38px;
}

/* Native <select> (Programmtyp, Sprache) */
.studyfinder-form select.form-select {
    background-image: var(--sf-chevron-url) !important;
    background-repeat: no-repeat !important;
    background-position: right var(--sf-chevron-right) center !important;
    background-size: 12px 12px !important;
    padding-right: calc(var(--sf-chevron-size) + var(--sf-chevron-right) + 10px) !important;
}

/* SlimSelect: eigenen Arrow verstecken und dieselbe Grafik nutzen */
.studyfinder-form .ss-main {
    position: relative;
    background-image: var(--sf-chevron-url) !important;
    background-repeat: no-repeat !important;
    background-position: right var(--sf-chevron-right) center !important;
    background-size: 13px 13px !important;
    padding-right: calc(var(--sf-chevron-size) + var(--sf-chevron-right) + 10px) !important;
}

/* Alle möglichen SlimSelect-Arrow-Varianten weg */
.studyfinder-form .ss-main .ss-arrow,
.studyfinder-form .ss-main .ss-arrow span,
.studyfinder-form .ss-main .ss-arrow svg {
    display: none !important;
}

/* sichtbarer Fokus fürs X */
.ss-value .ss-value-delete:focus {
    border: 2px solid #fff;
}


/* Retina: minimal größer, wenn es zu klein wirkt */
@media (min-resolution: 2dppx) {
    .studyfinder-form select.form-select,
    .studyfinder-form .ss-main {
        background-size: 14px 14px !important;
    }
}

@media only screen and (max-width: 930px) {


    #resetButton {
        width: max-content;
        text-align: right;
    }

    .tabulator .tabulator-cell {
        font-size: 1rem;
        padding: 6px 8px;
    }

    .tabulator .tabulator-header {
        font-size: 1rem;
    }

    .filter-wrap {
        grid-template-columns: 100%;
        margin-bottom: 20px;
        margin-top: 25px;
    }

    .filter-wrap > div {
        margin-bottom: 10px;
    }

    .studyfinder-form .filter-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr; /* zwei Spalten */
        gap: 16px; /* Abstand zwischen Feldern */
        align-items: end; /* Label-Linien schön bündig */
    }

    /* Kategorie: volle Breite Zeile 1 */
    #filterCategoryWrap {
        grid-column: 1 / -1;
    }

    /* Interessensgebiete: volle Breite Zeile 2 */
    #filterInterestWrap {
        grid-column: 1 / -1;
    }

    /* Zeile 3: Sprache links … */
    #filterLanguageWrap {
        grid-column: 1 / 2;
    }

    /* … Reset rechts, bündig nach rechts */
    #resetWrap {
        grid-column: 2 / 3;
        justify-self: end; /* nach rechts schieben */
        align-self: end; /* unten bündig mit dem Select */
    }

    /* falls irgendwo noch margin-top drauf war */
    #resetWrap #resetButton {
        margin-top: 0 !important;
    }

    #filterButtonWrap {
        display: flex;
        justify-content: end;
    }
}


@media only screen and (max-width: 437px) {
    #studyProgramsTable .tabulator-cell svg {
        stroke: initial;
        background-color: #fff;
    }

    .tabulator-responsive-collapse-toggle svg path {
        display: none !important;
        visibility: hidden;
    }

    .tabulator-responsive-collapse-toggle svg {
        width: 14px;
        height: 14px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        display: inline-block;
    }

    .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-open {
        background-image: url('https://webadmin.tugraz.at/fileadmin/templates/default/images/chevron-down.svg');
        background-repeat: no-repeat;
        background-size: 24px 24px;
        background-position-x: 0px;
        background-position-y: -3px;
    }

    .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close {
        background-image: url('https://webadmin.tugraz.at/fileadmin/templates/default/images/chevron-down.svg');
        background-repeat: no-repeat;
        transform: rotate(180deg);
        background-size: 24px 24px;
        background-position-x: 0px;
        background-position-y: 8px;

    }

    /* Header-Zelle links (enthält den Chevron) immer zeigen */
    .tabulator .tabulator-col.tabulator-row-header {
        display: inline-block !important; /* Tabulator nutzt inline-block im Header */
        width: 25px !important;
        min-width: 25px !important;
        padding: 0 !important;
    }

    /* Zell-Pendant in jeder Row */
    .tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 25px !important;
        min-width: 25px !important;
        padding: 0 !important;
    }

    /* Der eigentliche Toggle-Button darf nicht wegkaskadieren */
    .tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-responsive-collapse-toggle {
        display: inline-flex !important;
        margin-top: 8px;
    }

    .tabulator-row .tabulator-responsive-collapse table td strong {
        white-space: initial;
    }

    .tabulator-responsive-collapse {
        max-width: 80vw;
        padding: 0;
    }

    .tabulator-responsive-collapse table {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: -25px;
    }

    .tabulator-responsive-collapse table tr {
        display: flex;
        flex-direction: column;
        padding: 10px 0px;
        padding-left: 35px;
        margin-top: -5px;
    }

    #studyProgramsTable .tabulator-cell {
        margin-right: 10px !important;
    }

    .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
        padding-left: 0px;
    }


}

/* --- Cursor-Policy: im Studyfinder grundsätzlich KEINE Hand --- */
.studyfinder-form,
.studyfinder-form * {
    cursor: auto !important; /* = Standardpfeil */
}

/* --- Ausnahmen: echte Schaltflächen / Toggles dürfen Hand zeigen --- */
.studyfinder-form button,
.studyfinder-form .btn, /* Bootstrap-Buttons */
.studyfinder-form [role="button"], /* z.B. dein Chevron (per JS gesetzt) */
.studyfinder-form #resetButton,
.studyfinder-form .tabulator-responsive-collapse-toggle svg {
    cursor: pointer !important;
}

/* Vendor-spezifische Rücknahmen, falls die Libs pointer setzen */
.studyfinder-form .tabulator .tabulator-row,
.studyfinder-form .tabulator .tabulator-cell {
    cursor: auto !important;
}


/* Links Standardpfeil (nur Buttons als Hand) */
.studyfinder-form a {
    cursor: pointer !important;
}


/* standard: verstecken */
.mobile-only {
    display: none;
}

.sf-mobile-actions,
.mobile-only {
    display: none;
}

@media (max-width: 437px) {
    .sf-mobile-actions {
        display: flex;
        gap: .5rem;
        margin: .75rem 0;
    }

    /* Falls der eigentliche Button die Klasse .mobile-only hat */
    .mobile-only {
        display: inline-block;
    }
}


/* Button-Stil */
.sf-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: .6rem .75rem;
    border: 1px solid currentColor;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.sf-btn-outline {
    background: transparent;
}

.sf-hidden {
    display: none !important;
}