* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    font-family: sans-serif;
}

/* Mindestbreite für den Viewport */
html, body {
  min-width: 260px;
  overflow-x: auto;
}

body > * {
  min-width: 260px;
}


/*Spezifikationen für den Druck der Website*/
@media print {
 .table, .table__body {
  overflow: visible;
  height: auto !important;
  width: auto !important;
 }
}

@page {
    size: landscape;
    margin: 0; 
}

.custom-background {
    min-height: 100vh;
    background: url('images/UR_Ansicht_See.jpg') center / cover no-repeat, #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
}

main.table {
    width: 82vw;
    height: 90vh;
    background-color: #fff5;

    backdrop-filter: blur(7px);
    box-shadow: 0 .4rem .8rem #0005;
    border-radius: .8rem;

    overflow: hidden;
}

.table_header {
    width: 100%;
    height: 10%;
    background-color: #fff4;
    padding: .8rem 1rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.table_header .input-group {
    width: 35%;
    height: 100%;
    background-color: #fff5;
    padding: 0 .8rem;
    border-radius: 2rem;

    display: flex;
    justify-content: center;
    align-items: center;

    transition: .2s;
}

.table_header .input-group:hover {
    width: 45%;
    background-color: #fff8;
    box-shadow: 0 .1rem .4rem #0002;
}

.table-header-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.table-header-left {
    display: flex;
    align-items: center;
}

.home-btn {
    display: flex;
    align-items: center;
    margin-right: 0.5em;
    padding: 0.2em;
    border: none;
    background: none;
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}

.home-icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
}

.table_body {
    position: relative;
    width: 95%;
    max-height: calc(89% - 1.6rem);
    background-color: #fffb;

    margin: 0.8rem auto;
    border-radius: 0.6rem;

    overflow: auto; /* Scrollen aktiviert */

    /* Scrollbar komplett ausblenden. Leider lässt sich keine vernünftige Lösung für Firefox finden, bei der die Scrollbar erst beim Hovern eingeblendet wird */
    scrollbar-width: none; 
}

table {
    width: 100%;
}

table, th, td {
    border-collapse: collapse;
    padding: 1rem;
    text-align: left;
}

thead th {
    position: sticky;
    top: 0;
    left: 0;
    background-color: #d5d1defe;
    cursor: pointer;
    text-transform: capitalize;
    z-index: 9998; /*Höherer z-index bewirkt, dass der Header beim Überlagern Vorrang hat (aber nur innerhalb eines Layering Kontexts 😥)*/
}

tbody tr:nth-child(even) {
    background-color: #0000000b;
}

tbody tr {
    --delay: .1s;
    transition: .5s ease-in-out var(--delay), background-color 0s;
}

tbody tr:hover {
    background-color: #fff6 !important; /*Heimtückisch*/
}

tbody tr td{
    transition: .2s ease-in-out;
}

.local-highlight {
    background-color: #ffcccc !important;
    border: 2px solid #cc0000;
}

.local-highlight:hover {
    background-color: #ffb3b3 !important;
}

.highlight {
    background-color: #e7dc7781 !important; /* Hellgelbe Farbe für Fernleihbestellungen */
}

.highlight:hover {
    background-color: #b6a7228e !important;
}

/*Styling zur Spaltenbreite*/

/*Signatur*/
td:nth-child(2),
th:nth-child(2) {
    white-space: nowrap;
}

/*Kommentar*/
td:nth-child(7),
th:nth-child(7) {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal; 
    min-width: 20ch;
}

/* Sticky-Eigenschaften für die letzten beiden Spalten */
tbody td:last-of-type,
thead th:last-of-type {
    position: sticky;
    right: -5rem; /* Fixiert die Zelle am rechten Rand */
    border-bottom: 2px solid transparent; /* Linie zwischen den Zeilen */
}

tbody td:nth-last-of-type(2),
thead th:nth-last-of-type(2) {
    position: sticky;
    right: 1.5rem; /* Abstand zur letzten Spalte (anpassen je nach Breite der Spalten) */
    border-bottom: 2px solid transparent; /* Linie zwischen den Zeilen */
}

tbody td:nth-last-of-type(2)::before,
thead th:nth-last-of-type(2)::before {
    content: ""; /* Erzeugt ein leeres Pseudo-Element für die Linie*/
    position: absolute;
    top: 0;
    left: 0; /* Box-Shadow beginnt an der linken Linie */
    bottom: 0;
    width: 10px; /* Breite der Linie */
    background-color: transparent; /* Keine sichtbare Farbe */
    box-shadow: -4px 0 5px -2px rgba(0, 0, 0, 0.8); /* Schatten für die linke Linie */
    z-index: 9999;
}
/*
thead tr:last-child th:nth-last-of-type(2),
thead tr:last-child th:last-of-type {
    border-bottom: none;
} */

tbody tr:last-child td:nth-last-of-type(2),
tbody tr:last-child td:last-of-type {
    border-bottom: none; /* Keine Linie für die letzte Zeile */
}

.sticky-column {
    position: sticky;
    right: 0;
    overflow: visible;
    pointer-events: none;
    background-color: #b4afbd;
}

.sticky-column .btn-success {
    pointer-events: auto !important; /* Aktiviert die Interaktion für den Button */
    cursor: pointer !important; /* Stellt sicher, dass der Zeiger sich ändert */
}

.btn-success {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    font-family: sans-serif;
    text-decoration: none;
    background-color: #fff;
    color: #333;
    border-radius: 50%;
    border: 2px solid #333;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    z-index: 300;
    transition: all .35s;
    overflow: hidden; /* Wichtige Anpassung für den inneren Farbeffekt */
}

.btn-success:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #008000;
    transition: all .35s;
    z-index: -2;
    border-radius: 50%;
    transform: scaleX(0); /* Effekt von innen nach außen */
    transform-origin: center; /* Start von der Mitte */
}

.btn-success:hover {
    color: #fff;
}

.btn-success:hover:after {
    transform: scaleX(1); /* Von innen nach außen wachsen */
}

.button-group {
    display: flex;
    gap: 20px; /* Mindestabstand */
    flex-shrink: 0; /* Nicht kleiner werden */
}

td:first-child {
    position: relative;
}

.comment-icon {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 15px;
    left: 15px;
    width: 27px;
    height: 27px;
    line-height: 22px; /* Steuert die vertikale Position des Stift-Symbols */
    text-align: center;
    font-size: 0.9rem;
    background: #fff;
    border-radius: 50%;
    padding: 2px 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
}

.csv-btn, .reload-btn {
    padding: 10px 15px;
    font-size: 18px;
    font-weight: bold;
    background-color: #fff;
    color: #333;
    border: 2px solid #333;
    letter-spacing: 2px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.csv-btn {
    right: 20%;
}

.csv-btn:hover {
    background-color: #e0e0e0;
}

.reload-btn {
    right: 2.5%;
}

.reload-btn:hover {
    background: radial-gradient(ellipse at center, #443501 40%, #000000 100%);
    color: #cfc09f;
    text-shadow: -1px 0 1px #c6bb9f,
    0 1px 1px #c6bb9f,
    5px 5px 10px rgba(0, 0, 0, 0.4),
    -5px -5px 10px  rgba(0, 0, 0, 0.4);
}

.reload-btn:hover .reload-text {
    background: linear-gradient(to bottom, #cfc09f 22%, #634f2c 24%, #cfc09f 26%, #cfc09f 27%, #ffecb3 40%, #7a5c1f 78%);
    background-clip: text;
    -webkit-background-clip: text; /* "webkit"-Präfix für ältere Browser */
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

@media screen and (max-width: 600px) {
    .table-header-left h1 {
        display: none;
    }
}

.sticky-column .dropdown-toggle {
    pointer-events: auto !important; /* Aktiviert die Interaktion für den Button */
    cursor: pointer !important; /* Stellt sicher, dass der Zeiger sich ändert */
}

.dropdown-toggle {
    display: inline-block;
    width: 30px;
    height: 50px;
    font-size: 22px;
    font-family: sans-serif;
    color: #333;
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 0.6rem;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    transition: all 0.3s;
}

.dropdown-toggle:hover {
    background-color: #e0e0e0;
}

.dropdown-menu {
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    width: 184px;
    min-height: 90px;
    margin: 0;
    padding: 3px;
    list-style: none; /* Entfernt Aufzählungspunkte */
    display: none; /* Standardmäßig ausgeblendet */
    min-width: unset; /*Wichtig weil sonst eine Breite von 260px gilt*/
}

.dropdown-menu.active {
    display: block; /* Sichtbar bei Aktivierung */
}

.dropdown-menu li {
    margin: 0;
    padding: 0;
}

.dropdown-item {
    margin: 2px;
    min-height: 40px;
    width: 170px;
    text-align: center;
    cursor: pointer;
    padding: 10px 15px;
    border: none; /* Entfernt unnötige Rahmen */
    font-size: 1rem;
    font-family: Arial, sans-serif;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
    list-style: none; /* Entfernt Aufzählungspunkte */
}

.missing-btn {
    background-color: #f7cfcfcc;
    color: #d81111;
}

.missing-btn:hover {
    background-color: #d81111;
    color: #ffffff;
}

.full-record-btn {
    background-color: #e0e0e0;
    color: #333;
}

.full-record-btn:hover {
    background-color: #9b9b9bfe;
    color: #ffffff;
}

@media (max-width: 1310px) {
    td:not(:first-of-type) {
        min-width: 12.1rem;
    }
}

thead th span.icon-arrow {
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: 1.4px solid transparent;
    
    text-align: center;
    font-size: 1rem;
    
    margin-left: .5rem;
    transition: .2s ease-in-out;
}

.highlighted-row {
    background-color: #464645 !important;
    color: #ffffff !important;
    pointer-events: none !important;
}