html, body {
    font-size: 0.9rem;
}

body {
    height: 100vh;
}

body[data-member]::before {
    content: "";
    background-image: url('/images/logo/background-logo.svg');
    background-position: center center;
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.03;
}

.siteTitle img {
    max-height: 40px;
    margin-bottom: 0.5em;
}
.siteTitle .siteTitleText {
    font-size: 20px;
    color: #0AF47D;
}

/*accordion Navigation*/
nav .accordion {
    /*Farbe der Navigationspfeile auf weiss setzen*/
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

nav .accordion-item {
    background-color: #027358;
}

nav .accordion-button {
    color: #fff;
    background-color: #0F2D52;
}

nav .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #014549;
}

nav .accordion {
    color: #027358;
}


main {
    background-color: transparent;
}

.top-row:not(.top-main) {
    background-color: #0A2139 !important;
    border-bottom: 1px solid #0AF47D;
}

.sidebar {
    /*    background: transparent linear-gradient(0deg, #0F2D52 0%, #005DA6 100%) 0% 0% no-repeat padding-box !important;*/
    background: transparent linear-gradient(0deg, #0A2139 0%, #0A2139 100%) 0% 0% no-repeat padding-box !important;
}

.KaderPositionTitle td {
    padding: 0;
    border-bottom: #005da688 3px solid;
    background-color: transparent;
}

.KaderPositionTitle h6 {
    background-color: #005da608;
    color: #005DA6;
    padding: 0.5em;
    margin-bottom: 0;
}

hr.separator {
    color:#fff;
}

.iframe-fullsize{
    width:100%;
    height: 80vh;
}


/* Dasboard */
#dashboardId .card {
    /*height: 100%;*/
}

.chart-container {
    width: 100%;
    /*max-width: 900px;*/
    margin: 0 auto;
}

#metric-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 600px) {
    .form-check-inline label {
        /*display: block;*/
        margin-bottom: 0.5rem;
        min-width: 25%;
    }
}


svg text{
    font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
/*    font-size: 0.9em;*/
}
@media (max-width: 600px) {
    svg text {
        font-size: 1.0em;
    }
}

/* Table not width=100% */
.table-nonfluid {
    width: auto !important;
}


/* Bootstrap Card-Body collapsible */
.card-body-collapsible {
    transition: max-height 0.3s ease;
    overflow: hidden;
}

.card-body-collapsible.collapsed {
    max-height: 200px;
    overflow-y: auto;
}

.card-body-collapsible.expanded {
    max-height: none;
}

/* ------------ Session Graph Container --------- */
#offcanvasSessionGraph {
    --bs-offcanvas-height: 70vh;
}
/* ------------ Note Container --------- */

.event-item {
    transition: background-color 0.15s ease-in-out;
}
.event-item .event-text {
    cursor: pointer;
}

.event-item:hover {
    background-color: #f8f9fa; /* Bootstrap light */
}

.event-item-selected {
    background-color: #e7f1ff; /* Bootstrap primary-soft */
    border-left: 4px solid #0d6efd;
}

.coach-feedback-title{
    color: #333333;
    font-size: 1.2rem;
    padding: 4px 0px
}

.coach-feedback {
    border: 1px solid #dddddd;
    border-left: 4px solid #bbbbbb;
    border-radius: 8px;
    padding: 4px 16px;
    padding: 2px 8px;
    margin-bottom: 12px;
}

.coach-feedback ul {
    list-style-type: disc; /* marker shape */
}

.coach-feedback-content ul li::marker {
    color: #0d6efd; /* hex color for the bullet */
}

.coach-feedback-take-home ul li::marker {
    color: #ffc107; /* hex color for the bullet */
}


.coach-feedback-content {
    border-left-color: #0d6efd;
}
.coach-feedback-take-home {
    border-left-color: #ffc107;
}



/* ------------ SVG-Grafik Container --------- */
@media screen {
    /* Container als Grid */
    #chartContainer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: stretch; /* gleiche Höhe pro Zeile */
        padding: 1rem; /* Abstand zum Rand */
    }

    /* Einzelne Chart-Zellen */
    .chart-pair, .chart-pair-coach {
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Bottom-Alignment des Inhalts */
        justify-content: flex-end; /* Inhalt bottom-aligned */
        background-color: #f8f9fa; /* helles, neutrales Grau */
        color: #212529; /* dunkler Text für guten Kontrast */
        padding: 1rem 1.5rem; /* Innenabstand */
        border-radius: 0.75rem; /* abgerundete Ecken */
        box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* sanfter Schatten */
        transition: transform 0.2s, box-shadow 0.2s;
    }

    /* Hover-Effekt */
    .chart-pair:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    }

    /* Optional: Überschrift oben fixieren */
    .chart-pair h4,, .chart-pair-coach h4 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

/* ===========================
   Bootstrap Breakpoints
   =========================== */

    /* ≥576px (sm) */
    @media (min-width: 576px) {
        #chartContainer {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    /* ≥768px (md) */
    @media (min-width: 768px) {
        #chartContainer {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* ≥992px (lg) */
    @media (min-width: 992px) {
        #chartContainer {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* ≥1200px (xl) */
    @media (min-width: 1200px) {
        #chartContainer {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* ≥1400px (xxl) */
    @media (min-width: 1400px) {
        #chartContainer {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .showToggleColumns{
        display:none;
    }

    @media (min-width: 768px) {
        .showToggleColumns {
            display:block;
        }
        /* Fix 1 Spalte */
        #chartContainer.one-column {
            grid-template-columns: repeat(1, 1fr);
        }
        /* Fix 2 Spalten */
        #chartContainer.two-columns {
            grid-template-columns: repeat(2, 1fr);
        }

        /* Fix 3 Spalten */
        #chartContainer.three-columns {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}