/* ====== LAYOUT ==================================================================================================== */

/* ------ Links ------------------------------------------------------------------------------------------------ */

a:hover {
    text-decoration: none !important;
}

/* ------ Navigation ------------------------------------------------------------------------------------------------ */

.sidebar-item [data-lucide] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
}

/* ------ Tables - Filter ------------------------------------------------------------------------------------------- */
.table-filter {
    background: #f4f7f9;
    box-shadow: none;
    border: 0;
    color: #293042;
    height: calc(2.44375rem + 2px);
    padding: 0.45rem 0.75rem;
}
.input-group-search .btn {
    cursor: auto;
}
/* ====== PLUGINS =================================================================================================== */

/* ------ Datatable - Pagination ------------------------------------------------------------------------------------ */

.dt-paging-button.page-item.disabled {
    opacity: .4;                                                      /* Pfeile weniger sichtbar machen, wenn inaktiv */
}

/* ====== MODULE ==================================================================================================== */

/* ------ Personenverwaltung - Attribute ---------------------------------------------------------------------------- */

.attribute-row {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.attribute-row:hover {
    background-color: #f7f9fc;
}
.competence-wrapper {
    border-left: 5px solid #eff2f6; /* #3f80ea */
    padding-left: 12px;
}

.list-group-item.active {
    z-index: 2;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x) var(--bs-list-group-item-padding-y) calc(var(--bs-list-group-item-padding-x) - 5px);
    color: var(--bs-list-group-color);
    background-color: var(--bs-list-group-bg);
    border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
    border-left: 5px solid var(--bs-list-group-active-border-color);
}



/* ------ Shapes - Stationen ---------------------------------------------------------------------------- */

.station_shapes {
    display: flex;
    justify-content: center; /* Zentrierung horizontal */
    align-items: center; /* Zentrierung vertikal */

    width: 100px;
    aspect-ratio: 16/9;

    color: #000;
    background-color: #fff;
    border-color: #000;
}
.shape_rectangle {
    border: 1px solid #000;
    aspect-ratio: 16/9;
}
.shape_rectangle_rounded {
    border-radius: 10px;
    border: 1px solid #000;
}



/* Der Wrapper ist für die äußere 1px Border zuständig */
.hexagon_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100px; /* Breite des Hexagons */
    aspect-ratio: 16/9; /* Rechteckiges Seitenverhältnis */
    position: relative;
    background-color: #ff2600; /* Die Farbe der Border */
    clip-path: polygon(
            10% 0%, 90% 0%,
            100% 50%, 90% 100%,
            10% 100%, 0% 50%
    );
}

/* Das innere Element erzeugt die Hexagon-Fläche */
.station_shapes.shape_hexagon {
    display: flex;
    justify-content: center;
    align-items: center;

    width: calc(100% - 2px); /* Größe des inneren Hexagons: 2px Abzug für die Border */
    height: calc(100% - 2px); /* Gleiche Proportionen wie Breite */
    background-color: #d5d5d5; /* Hintergrundfarbe des Hexagons */
    clip-path: polygon(
            10% 0%, 90% 0%,
            100% 50%, 90% 100%,
            10% 100%, 0% 50%
    );
    position: absolute;
    top: 1px; /* Zentriert das innere Hexagon innerhalb des Wrappers */
    left: 1px;
    border: none; /* Keine Border innerhalb des Hexagons */
}




.shape_ellipse {
    border-radius: 50%;
    border: 1px solid #000;
}