/* Plus Jakarta Sans - self-hosted variable font from Fontsource (OFL-1.1, wwwroot/lib/plus-jakarta-sans).
   One file per subset covers every weight. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(../lib/plus-jakarta-sans/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(../lib/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: italic;
    font-display: swap;
    font-weight: 200 800;
    src: url(../lib/plus-jakarta-sans/plus-jakarta-sans-latin-ext-wght-italic.woff2) format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: italic;
    font-display: swap;
    font-weight: 200 800;
    src: url(../lib/plus-jakarta-sans/plus-jakarta-sans-latin-wght-italic.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

html[data-topbar-color=dark] {
    --ct-topbar-bg: #183963;
    --ct-topbar-item-color: #8391a2;
    --ct-topbar-item-hover-color: #bccee4;
    --ct-topbar-search-bg: #464f5b;
    --ct-topbar-user-bg: #3c4655;
    --ct-topbar-user-border: #414d5d;
}

:root {
    --ct-logo-lg-height: 64px;
    --ct-logo-sm-height: 48px;
}

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 24,57,99;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-rgb: 24,57,99;
    --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
}


:root, [data-bs-theme=light] {
    --ct-blue: red;
    --ct-indigo: #727cf5;
    --ct-purple: red;
    --ct-pink: #ff679b;
    --ct-red: #ff5b5b;
    --ct-orange: #fd7e14;
    --ct-yellow: #f9c851;
    --ct-green: #10c469;
    --ct-teal: #02a8b5;
    --ct-cyan: #35b8e0;
    --ct-black: #000;
    --ct-white: #fff;
    --ct-gray: #8a969c;
    --ct-gray-dark: #343a40;
    --ct-gray-100: #f6f7fb;
    --ct-gray-200: #EEF2FE;
    --ct-gray-300: #dee2e6;
    --ct-gray-400: #ced4da;
    --ct-gray-500: #a1a9b1;
    --ct-gray-600: #8a969c;
    --ct-gray-700: #6c757d;
    --ct-gray-800: #343a40;
    --ct-gray-900: #313a46;
    --ct-primary: #183963;
    --ct-secondary: #6c757d;
    --ct-success: #10c469;
    --ct-info: #35b8e0;
    --ct-warning: #f9c851;
    --ct-danger: red;
    --ct-light: #eef2f7;
    --ct-dark: #313a46;
    --ct-primary-rgb: 83, 109, 230;
    --ct-secondary-rgb: 108, 117, 125;
    --ct-success-rgb: 16, 196, 105;
    --ct-info-rgb: 53, 184, 224;
    --ct-warning-rgb: 249, 200, 81;
    --ct-danger-rgb: 255, 91, 91;
    --ct-light-rgb: 238, 242, 247;
    --ct-dark-rgb: 49, 58, 70;
    --ct-primary-text-emphasis: #212c5c;
    --ct-secondary-text-emphasis: #8a969c;
    --ct-success-text-emphasis: #064e2a;
    --ct-info-text-emphasis: #154a5a;
    --ct-warning-text-emphasis: #645020;
    --ct-danger-text-emphasis: #662424;
    --ct-light-text-emphasis: #6c757d;
    --ct-dark-text-emphasis: #6c757d;
    --ct-primary-bg-subtle: #eef0fd;
    --ct-secondary-bg-subtle: #f6f7fb;
    --ct-success-bg-subtle: #e7f9f0;
    --ct-info-bg-subtle: #ebf8fc;
    --ct-warning-bg-subtle: #fefaee;
    --ct-danger-bg-subtle: #ffefef;
    --ct-light-bg-subtle: #fbfbfd;
    --ct-dark-bg-subtle: #ced4da;
    --ct-primary-border-subtle: #bac5f5;
    --ct-secondary-border-subtle: #eef2f7;
    --ct-success-border-subtle: #9fe7c3;
    --ct-info-border-subtle: #aee3f3;
    --ct-warning-border-subtle: #fde9b9;
    --ct-danger-border-subtle: #ffbdbd;
    --ct-light-border-subtle: #eef2f7;
    --ct-dark-border-subtle: #a1a9b1;
    --ct-white-rgb: 255, 255, 255;
    --ct-black-rgb: 0, 0, 0;
    --ct-font-sans-serif: "Plus Jakarta Sans", "Nunito", sans-serif;
    --ct-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --ct-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --ct-body-font-family: var(--ct-font-sans-serif);
    --ct-body-font-size: 0.9rem;
    --ct-body-font-weight: 400;
    --ct-body-line-height: 1.5;
    --ct-body-color: #6c757d;
    --ct-body-color-rgb: 108, 117, 125;
    --ct-body-bg: #fafbfe;
    --ct-body-bg-rgb: 250, 251, 254;
    --ct-emphasis-color: rgba(108, 117, 125, 0.75);
    --ct-emphasis-color-rgb: 108, 117, 125;
    --ct-secondary-color: #8a969c;
    --ct-secondary-color-rgb: 138, 150, 156;
    --ct-secondary-bg: #fff;
    --ct-secondary-bg-rgb: 255, 255, 255;
    --ct-tertiary-color: #6c757d;
    --ct-tertiary-color-rgb: 108, 117, 125;
    --ct-tertiary-bg: #f6f7fb;
    --ct-tertiary-bg-rgb: 246, 247, 251;
    --ct-heading-color: inherit;
    --ct-link-color: black;
    --ct-link-color-rgb: 0,0,0;
    --ct-link-decoration: none;
    --ct-link-hover-color: #183963;
    --ct-link-hover-color-rgb: 71, 93, 196;
    --ct-code-color: #35b8e0;
    --ct-highlight-color: #6c757d;
    --ct-highlight-bg: #fef4dc;
    --ct-border-width: 1px;
    --ct-border-style: solid;
    --ct-border-color: #dee2e6;
    --ct-border-color-translucent: #dee2e6;
    --ct-border-radius: 0.25rem;
    --ct-border-radius-sm: 0.2rem;
    --ct-border-radius-lg: 0.3rem;
    --ct-border-radius-xl: 1rem;
    --ct-border-radius-xxl: 2rem;
    --ct-border-radius-2xl: var(--ct-border-radius-xxl);
    --ct-border-radius-pill: 50rem;
    --ct-box-shadow: 0px 0px 35px 0px rgba(154, 161, 171, 0.15);
    --ct-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--ct-body-color-rgb), 0.15);
    --ct-box-shadow-lg: 0 0 45px 0 rgba(var(--ct-body-color-rgb), 0.2);
    --ct-box-shadow-inset: inset 0 1px 2px rgba(var(--ct-body-color-rgb), 0.075);
    --ct-focus-ring-width: 0.15rem;
    --ct-focus-ring-opacity: 0.25;
    --ct-focus-ring-color: rgba(83, 109, 230, 0.25);
    --ct-form-valid-color: #10c469;
    --ct-form-valid-border-color: #10c469;
    --ct-form-invalid-color: #ff5b5b;
    --ct-form-invalid-border-color: #ff5b5b;
}

html[data-menu-color=light] {
    --ct-menu-bg: #ffffff;
    --ct-menu-item-color: #6c757d;
    --ct-menu-item-hover-color: #183963;
    --ct-menu-item-active-color: #183963;
    --ct-help-box-bg: #536de6;
}

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #183963;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 24,57,99;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-rgb: 33, 37, 41;
    --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
}

.card.activity {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color:;
    --bs-card-subtitle-color:;
    --bs-card-border-width: 2px;
    --bs-card-border-color: #183963;
    --bs-card-border-radius: 0;
    --bs-card-box-shadow:;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color:;
    --bs-card-height:;
    --bs-card-color:;
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
}

    .card.activity > .card-header {
        background-color: #183963;
        border-radius: 0;
        color:white;
        padding: 4px;
    }


.btn-outline-primary {
    --ct-btn-color: #183963 !important;
    --ct-btn-border-color: #183963 !important;
    --ct-btn-hover-color: #fff !important;
    --ct-btn-hover-bg: #183963 !important;
    --ct-btn-hover-border-color: #183963 !important;
    --ct-btn-focus-shadow-rgb: 83, 109, 230;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #183963 !important;
    --ct-btn-active-border-color: #183963 !important;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #536de6;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #536de6;
    --ct-gradient: none;
}

.btn-outline-primary {
    --bs-btn-color: #183963;
    --bs-btn-border-color: #183963;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #183963;
    --bs-btn-hover-border-color: #183963;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
}


.btn-info {
    --ct-btn-color: #fff;
    --ct-btn-bg: #183963;
    --ct-btn-border-color: #183963;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #31aacf;
    --ct-btn-hover-border-color: #31aacf;
    --ct-btn-focus-shadow-rgb: 83, 195, 229;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #31aacf;
    --ct-btn-active-border-color: #31aacf;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: #35b8e0;
    --ct-btn-disabled-border-color: #35b8e0;
}

.table-dark {
    --ct-table-color: #fff;
    --ct-table-bg: #183963;
    --ct-table-border-color: #464e59;
    --ct-table-striped-bg: white;
    --ct-table-striped-color: #313a46;
    --ct-table-active-bg: white;
    --ct-table-active-color: #313a46;
    --ct-table-hover-bg: white;
    --ct-table-hover-color: #313a46;
    color: var(--ct-table-color);
    border-color: var(--ct-table-border-color);
}

.pagination {
    --ct-pagination-padding-x: 0.75rem;
    --ct-pagination-padding-y: 0.375rem;
    --ct-pagination-font-size: 0.9rem;
    --ct-pagination-color: var(--ct-tertiary-color);
    --ct-pagination-bg: var(--ct-secondary-bg);
    --ct-pagination-border-width: var(--ct-border-width);
    --ct-pagination-border-color: var(--ct-border-color);
    --ct-pagination-border-radius: var(--ct-border-radius);
    --ct-pagination-hover-color: var(--ct-link-hover-color);
    --ct-pagination-hover-bg: var(--ct-tertiary-bg);
    --ct-pagination-hover-border-color: var(--ct-border-color);
    --ct-pagination-focus-color: var(--ct-link-hover-color);
    --ct-pagination-focus-bg: var(--ct-secondary-bg);
    --ct-pagination-focus-box-shadow: none;
    --ct-pagination-active-color: #fff;
    --ct-pagination-active-bg: #183963;
    --ct-pagination-active-border-color: #536de6;
    --ct-pagination-disabled-color: var(--ct-secondary-color);
    --ct-pagination-disabled-bg: var(--ct-secondary-bg);
    --ct-pagination-disabled-border-color: var(--ct-border-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
}

.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family:;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1;
}


.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: transparent;
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: whitesmoke;
    --bs-accordion-border-width: 2px;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e);
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x: 0.5rem;
    --bs-accordion-body-padding-y: 0rem;
    --bs-accordion-active-color: white;
    --bs-accordion-active-bg: #8c95ae;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 4px 4px;
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}

    .accordion-button:focus {
        z-index: 3;
        outline: 0;
        box-shadow: none !important;
    }

.accordion-body {
    border: 2px solid #8c95ae;
    padding: 4px;
}

.accordion-button:not(.collapsed) {
    color: black;
    background-color: var(--bs-accordion-active-bg);
    box-shadow: none;
}



.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border: none;
}


/*    html {
        font-size: 14px;
    }

    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
    }

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        margin-bottom: 60px;
    }

    .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
        color: var(--bs-secondary-color);
        text-align: end;
    }

    .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
        text-align: start;
    }*/
ul.d-flex {
    padding: 0px;
}


.alert {
    margin-bottom: 0px;
}


.fa-users:before {
    content: '\e533';
}

.fa-teams:before {
    content: '\e591';
}

.fa-activities:before {
    content: '\f073';
}

.fa-pin:before {
    content: '\f3c5';
}

.fa-clock:before {
    content: '\f017';
}

.fa-meeting:before {
    content: '\e593';
}

.fa-roles-Player:before {
    content: '\f007';
    color: silver;
}

.fa-roles-Coach:before {
    content: '\f6a4';
    color: darkgoldenrod;
}

.fa-enrollments-Present:before {
    content: '\f00c';
    color: green;
}

.fa-enrollments-NotPresent:before {
    content: '\e59b';
    color: red;
}

.fa-enrollments-Unknown:before {
    content: '\003f';
    color: silver;    
}

.fa-invisible:before {
    content: '\f070';
    color: silver;
}

.fa-link:before {
    content: '\f35d';
    color: silver;
}

.fa-today:before {
    content: '\f784 ';
}


.fa-eventtype-Schwimmen:before {
    content: '\e78b';
}

.fa-eventtype-Laufen:before {
    content: '\f70c';
}

.fa-eventtype-Radfahren:before {
    content: '\f84a';
}


.fa-trainer-warning:before {
    content: '\f321';
}

.fa-trainer-Present:before {
    content: '\f14a';
    color: green;
}

.fa-trainer-NotPresent:before {
    content: '\f2d3';
    color: darkred;
}

.fa-trainer-Holiday:before {
    content: '\f811';
    color: darkred;
}

.fa-trainer-Unknown:before {
    content: '\f2fd';
    color: dimgray;
}

.fa-sync-sportmember:before {
    content: '\f2f1';
    color: #f0731c;
}

.fa-today:before {
    content: '\f783';
}

.fa-calendar:before {
    content: '\f073';
}

.fa-maincoach:before {
    content: '\f521';
}

.fa-holiday:before {
    content: '\f811';
}

.fa-exchange:before {
    content: '\e6b8';
}

.fa-attendance-Present:before {
    content: '\f606';
    color: green;
}

.fa-attendance-NotPresent:before {
    content: '\f60e';
    color: red;
}

.fa-attendance-Unknown:before {
    content: '\f60b';
    color: silver;
}

.card-header {
    border-bottom: none;
}


li.team {
    border-radius: 4px;
    color: black;
    background-color: white;
    padding: 0px 4px;
    font-size: 10px;
}

div.team {
    border-radius: 4px;
    color: white;
    background-color: #183963;
    padding: 0px 4px;
    font-size: 10px;
}


span.activity-type {
    border-radius: 4px;
    color: black;
    background-color: lightgray;
    padding: 0px 4px;
}

/* Sportart: eine Farbe pro Typ - als Streifen oben an der Trainingskarte und am
   Sportart-Symbol (siehe Theme unten). Ohne Typ bleibt es beim Vereinsblau. */
.event-type-Schwimmen {
    --tk-sport: #1e88e5;
}

.event-type-Laufen {
    --tk-sport: #1a8754;
}

.event-type-Radfahren {
    --tk-sport: #6b7280;
}

div.holiday-line {
    text-align: center;
    color: black;
    background-image: linear-gradient(45deg, rgb(221, 133, 9) 0%, rgb(221, 133, 9) 14.286%,rgb(227, 152, 25) 14.286%, rgb(227, 152, 25) 28.572%,rgb(232, 170, 40) 28.572%, rgb(232, 170, 40) 42.858%,rgb(238, 189, 56) 42.858%, rgb(238, 189, 56) 57.144%,rgb(244, 208, 72) 57.144%, rgb(244, 208, 72) 71.43%,rgb(249, 226, 87) 71.43%, rgb(249, 226, 87) 85.716%,rgb(255, 245, 103) 85.716%, rgb(255, 245, 103) 100.002%);
}


.avatar {
    display: block; /* Ensures the image behaves as a block-level element */
    width: 32px; /* Set a fixed width */
    height: 32px; /* Set the same fixed height to create a square canvas */
    border-radius: 50%; /* Makes the square image into a circle */
    object-fit: cover; /* Fills the circle without stretching or distorting the image */
    overflow: hidden; /* Hides any parts of the image that extend beyond the circle */
}

.avatar-sm {
    display: block; /* Ensures the image behaves as a block-level element */
    width: 24px; /* Set a fixed width */
    height: 24px; /* Set the same fixed height to create a square canvas */
    border-radius: 50%; /* Makes the square image into a circle */
    object-fit: cover; /* Fills the circle without stretching or distorting the image */
    overflow: hidden; /* Hides any parts of the image that extend beyond the circle */
}

.avatar-lg {
    display: block; /* Ensures the image behaves as a block-level element */
    width: 128px; /* Set a fixed width */
    height: 128px; /* Set the same fixed height to create a square canvas */
    border-radius: 50%; /* Makes the square image into a circle */
    object-fit: cover; /* Fills the circle without stretching or distorting the image */
    overflow: hidden; /* Hides any parts of the image that extend beyond the circle */
}

/* Placeholder on the person page when SportMember has no profile picture for the athlete */
.avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dee2e6;
    color: #6c757d;
    font-size: 48px;
}

div.day-header {
    background-color: #183963;
    color: white;
    font-weight: bold;
}

    div.day-header.today {
        background-color: gold;
        color: black;
        font-weight: bold;
    }

.bg-linkedprofile {
    background-color: gold;
    color: black !important;
    line-height: 1 !important;
}

.bg-notlinkedprofile {
    margin-left: 0.25em;
}

/* Leiste mit den Personen, die mit dem angemeldeten Konto verknuepft sind */
.linked-profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.25rem 0;
    padding: 0;
    list-style: none;
}

/* Die Karten werden nicht gestaucht, sondern in die naechste Zeile umgebrochen.
   Passt eine Karte allein nicht in die Zeile, bricht stattdessen ihr Inhalt um
   (white-space hebt das nowrap von .badge auf). */
.linked-profile {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: normal;
}

    /* Verhindert, dass das Portrait im Flex-Layout schmal gequetscht wird */
    .linked-profile .avatar-sm {
        flex: 0 0 auto;
    }

.linked-profile-name {
    display: block;
    line-height: 1.2;
}

.linked-profile-teams {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.25rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 8pt;
    font-weight: normal;
    line-height: 1.2;
}


/* Aktionen auf einer Trainingskarte laufen per fetch (site.js): waehrend der
   Anfrage ist die Karte gesperrt, danach blitzt sie kurz auf. */
.activity.event-busy {
    opacity: 0.5 !important;
    pointer-events: none;
    cursor: progress;
}

.activity.event-updated {
    animation: event-updated-flash 1s ease-out;
}

/* Der Grundschatten wird mitgefuehrt, sonst verliert die Karte ihn waehrend
   der Animation. */
@keyframes event-updated-flash {
    from {
        box-shadow: 0 0 0 3px gold, var(--tk-shadow-sm);
    }

    to {
        box-shadow: 0 0 0 3px rgba(255, 215, 0, 0), var(--tk-shadow-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .activity.event-updated {
        animation: none;
    }
}


h5.timeofday {
    text-align: center;
    background-color: #183963;
    color: white;
    padding: 2px;
}

.badge-lg {
    --bs-badge-padding-x: 0.25em;
    --bs-badge-padding-y: 0.15em;
    --bs-badge-font-size: 1em;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: var(--bs-border-radius);
    display: inline-block;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    line-height: 1;
    color: var(--bs-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--bs-badge-border-radius);
}

.green {
    background: #66FF99;
}

.grayed-out {
    background-color: silver;
    opacity: .3;
}

.red {
    background: red;
}

.blue {
    background: #3652D9;
}

.rose {
    background: #FF66CC;
}


.circle {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;
    box-shadow: 0px 0px 1px 1px #0000001a;
}

.pulse {
    animation: pulse-animation 1.5s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
}
/* Competency card thumbnails on the person page: small enough to scan a whole sport at a
   glance, click opens the full artwork in a modal. */
.competency-thumb {
    object-fit: contain;
    max-height: 110px;
    cursor: pointer;
    background-color: #f8f9fa;
    transition: transform 0.1s ease-in-out;
}

    .competency-thumb:hover,
    .competency-thumb:focus {
        transform: scale(1.03);
        outline: 2px solid #183963;
    }

/* ==========================================================================
   Theme: klar und modern, angelehnt an www.tri-kagran.at. Das Vereinsblau
   #183963 (CI) traegt Kopfzeile, Hauptaktionen und Hervorhebungen; sonst
   helle Flaechen, feine Rahmen, Pillen statt Kanten. Statusfarben (gruen,
   gelb, rot) nur dort, wo sie etwas bedeuten.

   Regeln mit .tk-app greifen nur in den beiden Frontend-Layouts (_Layout,
   _LayoutWide).
   ========================================================================== */
:root {
    --tk-blue: #183963;
    --tk-blue-hover: #24508a;
    --tk-blue-50: #e8eef7;
    --tk-blue-100: #d3dff0;
    --tk-page: #f4f6fa;
    --tk-border: #e3e8ef;
    --tk-border-soft: #eef1f5;
    --tk-text: #1d2939;
    --tk-muted: #667085;
    --tk-chip: #f2f4f7;
    --tk-chip-text: #344054;
    --tk-highlight: #fde68a;
    --tk-highlight-text: #5c4400;
    --tk-radius-sm: 0.5rem;
    --tk-radius: 0.75rem;
    --tk-radius-lg: 0.875rem;
    --tk-radius-pill: 999px;
    --tk-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --tk-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --tk-shadow: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
    /* Bootstrap: Vereinsblau als Primaer- und Linkfarbe */
    --bs-primary: #183963;
    --bs-primary-rgb: 24, 57, 99;
    --bs-link-color: #183963;
    --bs-link-color-rgb: 24, 57, 99;
    --bs-link-hover-color: #24508a;
    --bs-link-hover-color-rgb: 36, 80, 138;
    --bs-body-color: #1d2939;
    --bs-body-color-rgb: 29, 41, 57;
    --bs-secondary-color: #667085;
    --bs-border-color: #e3e8ef;
    --bs-border-radius: 0.5rem;
}

body.tk-app {
    background-color: var(--tk-page);
    color: var(--tk-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tk-app h1, .tk-app h2, .tk-app h3, .tk-app h4 {
    font-weight: 700;
    letter-spacing: -0.015em;
}

.tk-app main h2 {
    color: var(--tk-blue);
}

/* --- Kopfzeile -------------------------------------------------------- */
/* Die Trennlinie kommt aus dem scoped CSS des Layouts, daher !important */
.tk-app .navbar {
    background-color: var(--tk-blue) !important;
    border-bottom: 0 !important;
    box-shadow: none;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

    .tk-app .navbar .nav-link {
        border-radius: var(--tk-radius-pill);
        padding: 0.4rem 0.9rem;
        color: rgba(255, 255, 255, 0.8) !important;
        font-weight: 500;
        font-size: 0.925rem;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .tk-app .navbar .nav-link:hover,
        .tk-app .navbar .nav-link:focus-visible,
        .tk-app .navbar .nav-link.active {
            background-color: rgba(255, 255, 255, 0.14);
            color: #fff !important;
        }

    .tk-app .navbar .form-control {
        background-color: rgba(255, 255, 255, 0.12);
        border-color: transparent;
        border-radius: var(--tk-radius-pill);
        color: #fff;
        padding-left: 0.9rem;
    }

        .tk-app .navbar .form-control::placeholder {
            color: rgba(255, 255, 255, 0.65);
        }

        .tk-app .navbar .form-control:focus {
            background-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
        }

    /* Auf dem blauen Grund hebt sich nur eine helle Schaltflaeche ab */
    .tk-app .navbar .btn-primary {
        --bs-btn-bg: #fff;
        --bs-btn-color: var(--tk-blue);
        --bs-btn-border-color: #fff;
        --bs-btn-hover-bg: var(--tk-blue-50);
        --bs-btn-hover-color: var(--tk-blue);
        --bs-btn-hover-border-color: var(--tk-blue-50);
        --bs-btn-active-bg: var(--tk-blue-100);
        --bs-btn-active-color: var(--tk-blue);
    }

    .tk-app .navbar .badge {
        background-color: rgba(255, 255, 255, 0.16) !important;
        color: #fff !important;
        font-weight: 500;
        border-radius: var(--tk-radius-pill);
    }

    .tk-app .navbar-toggler {
        border: 0;
        border-radius: var(--tk-radius-sm);
        padding: 0.4rem 0.55rem;
    }

        .tk-app .navbar-toggler:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
        }

    /* Kleine Bildschirme: Schluesselkarten-Suche neben dem Menue-Knopf */
    .tk-app .navbar-keycard {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

        .tk-app .navbar-keycard:hover,
        .tk-app .navbar-keycard:focus-visible {
            background-color: rgba(255, 255, 255, 0.22);
            color: #fff;
        }

/* Aufgeklapptes Menue (unter lg): Eintraege untereinander und volle Breite,
   der Kontobereich durch eine Linie abgesetzt. */
@media (max-width: 991.98px) {
    .tk-app .navbar-collapse {
        padding: 0.75rem 0 0.25rem;
    }

    .tk-app .navbar .navbar-nav {
        gap: 2px;
    }

    .tk-app .navbar .nav-link {
        padding: 0.6rem 0.9rem;
    }

    .tk-app .navbar .navbar-account {
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        gap: 0.5rem;
    }

    .tk-app .navbar .navbar-search .form-control {
        font-size: 1rem;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    .tk-app .navbar .navbar-dashboard {
        width: 100%;
    }
}

.tk-app .footer {
    border-top: 1px solid var(--tk-border) !important;
    background-color: transparent !important;
    color: var(--tk-muted) !important;
    font-size: 0.85rem;
}

    .tk-app .footer a {
        color: var(--tk-blue);
    }

/* --- Bedienelemente --------------------------------------------------- */
.tk-app .btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.45rem;
    --bs-btn-font-size: 0.925rem;
    border-radius: var(--tk-radius-pill);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.tk-app .btn-primary {
    --bs-btn-bg: var(--tk-blue);
    --bs-btn-border-color: var(--tk-blue);
    --bs-btn-hover-bg: var(--tk-blue-hover);
    --bs-btn-hover-border-color: var(--tk-blue-hover);
    --bs-btn-active-bg: var(--tk-blue-hover);
    --bs-btn-active-border-color: var(--tk-blue-hover);
    --bs-btn-disabled-bg: var(--tk-blue);
    --bs-btn-disabled-border-color: var(--tk-blue);
    --bs-btn-focus-shadow-rgb: 24, 57, 99;
}

/* Nebenaktionen: weiss mit feinem Rahmen, beim Darueberfahren hellblau */
.tk-app .btn-outline-primary {
    --bs-btn-color: var(--tk-blue);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--tk-border);
    --bs-btn-hover-color: var(--tk-blue);
    --bs-btn-hover-bg: var(--tk-blue-50);
    --bs-btn-hover-border-color: var(--tk-blue-100);
    --bs-btn-active-color: var(--tk-blue);
    --bs-btn-active-bg: var(--tk-blue-100);
    --bs-btn-active-border-color: var(--tk-blue-100);
    --bs-btn-disabled-color: var(--tk-muted);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--tk-border);
    --bs-btn-focus-shadow-rgb: 24, 57, 99;
}

.tk-app .btn-group {
    border-radius: var(--tk-radius-pill);
    box-shadow: var(--tk-shadow-xs);
}

.tk-app .form-control,
.tk-app .form-select {
    border-color: var(--tk-border);
    border-radius: var(--tk-radius-sm);
}

    .tk-app .form-control:focus,
    .tk-app .form-select:focus {
        border-color: #8aa4c8;
        box-shadow: 0 0 0 0.2rem rgba(24, 57, 99, 0.15);
    }

.tk-app .dropdown-menu {
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    box-shadow: var(--tk-shadow);
    padding: 0.25rem;
}

.tk-app .dropdown-item {
    border-radius: var(--tk-radius-sm);
}

.tk-app .alert {
    border-radius: var(--tk-radius-sm);
}

/* Tabellenkoepfe hell statt dunkelblau */
.tk-app .table > thead.table-dark,
.tk-app .table > thead.table-dark > tr > th {
    --bs-table-bg: var(--tk-blue-50);
    --bs-table-color: var(--tk-blue);
    --bs-table-border-color: var(--tk-border);
    color: var(--tk-blue);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tk-app .accordion-button:not(.collapsed) {
    background-color: var(--tk-blue-50);
    color: var(--tk-blue);
    font-weight: 600;
}

.tk-app .accordion-body {
    border: 1px solid var(--tk-border);
    border-top: 0;
}

/* --- Karten ----------------------------------------------------------- */
/* Steht bewusst vor .card.activity, damit die spezielleren Regeln der
   Trainingskarte gewinnen. */
.tk-app .card {
    --bs-card-border-color: var(--tk-border);
    --bs-card-border-radius: var(--tk-radius-lg);
    --bs-card-inner-border-radius: calc(var(--tk-radius-lg) - 1px);
    --bs-card-cap-bg: #fff;
    box-shadow: var(--tk-shadow-xs);
}

/* --- Trainingskarten -------------------------------------------------- */
/* Weiss mit einem Streifen in der Farbe der Sportart oben. Kein
   overflow: hidden - das wuerde die Dropdowns in der Karte abschneiden. */
.card.activity {
    --tk-sport-color: var(--tk-sport, var(--tk-blue));
    --bs-card-border-radius: var(--tk-radius-lg);
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--tk-border);
    --bs-card-bg: #fff;
    border-color: var(--tk-border) !important;
    box-shadow: var(--tk-shadow-xs);
    transition: box-shadow 0.15s ease;
}

    /* Zwischen den runden Ecken, damit der Streifen ihnen nicht in die Quere kommt */
    .card.activity::before {
        content: "";
        position: absolute;
        top: -1px;
        left: var(--tk-radius-lg);
        right: var(--tk-radius-lg);
        height: 3px;
        border-radius: 0 0 3px 3px;
        background-color: var(--tk-sport-color);
    }

    .card.activity:hover {
        box-shadow: var(--tk-shadow);
    }

    .card.activity > .card-header {
        background: #fff;
        color: var(--tk-text);
        text-shadow: none;
        border-radius: calc(var(--tk-radius-lg) - 1px) calc(var(--tk-radius-lg) - 1px) 0 0;
        border-bottom: 1px solid var(--tk-border-soft);
        padding: 12px 12px 8px;
    }

        .card.activity > .card-header .fw-bold {
            font-weight: 700 !important;
        }

        .card.activity > .card-header [class*="fa-eventtype-"] {
            color: var(--tk-sport-color);
        }

        .card.activity > .card-header .fa-pin,
        .card.activity > .card-header .fa-clock {
            color: var(--tk-muted);
        }

    .card.activity .badge {
        border-radius: var(--tk-radius-pill);
    }

    /* Der Standard-Alert ist in der schmalen Karte zu wuchtig */
    .card.activity .alert {
        padding: 0.35rem 0.6rem;
        border: 0;
    }

.tk-app .card.activity {
    margin-bottom: 0.5rem;
}

/* --- Wiederkehrende Beschriftungen ------------------------------------ */
div.day-header {
    background-color: var(--tk-blue);
    border-radius: var(--tk-radius);
    padding: 6px 4px;
    letter-spacing: 0.02em;
    font-weight: 700;
}

    div.day-header.today {
        background-color: var(--tk-highlight);
        color: var(--tk-highlight-text);
    }

h5.timeofday {
    background-color: var(--tk-blue);
    border-radius: var(--tk-radius-pill);
    padding: 6px 14px;
    letter-spacing: 0.02em;
    font-size: 0.9rem;
    font-weight: 700;
}

div.holiday-line {
    border-radius: var(--tk-radius-sm);
    padding: 2px 8px;
}

/* --- Chips ------------------------------------------------------------ */
li.team,
div.team,
span.activity-type {
    border-radius: var(--tk-radius-pill);
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
}

li.team,
span.activity-type {
    background-color: var(--tk-chip);
    color: var(--tk-chip-text);
}

/* Gleiche Schriftgroesse wie der umgebende Text: die hervorgehobenen eigenen
   Kinder stehen in derselben Liste wie alle anderen Teilnehmer. */
.badge-lg {
    --bs-badge-border-radius: var(--tk-radius-pill);
    --bs-badge-font-weight: 600;
    --bs-badge-font-size: 1em;
    border-radius: var(--tk-radius-pill);
    padding: 0.2em 0.55em;
}

/* Nicht hervorgehobene Teilnehmer ruecken um das Innenmass der Pille ein, damit
   alle Namen in der Liste buendig stehen. */
.bg-notlinkedprofile {
    margin-left: 0.55em;
}

/* Fremde Trainer: neutrale Pille statt grauem Kasten */
.badge-lg.bg-dark-subtle {
    background-color: var(--tk-chip) !important;
    color: var(--tk-chip-text) !important;
}

/* Die eigenen, mit dem Konto verknuepften Personen */
.bg-linkedprofile {
    background-color: var(--tk-highlight);
    color: var(--tk-highlight-text) !important;
}

/* Die Personen-Chips koennen mehrzeilig werden, deshalb keine volle Pille */
.linked-profile {
    border-radius: var(--tk-radius-lg);
    padding: 0.4rem 0.7rem;
    transition: box-shadow 0.15s ease;
}

    .linked-profile:hover {
        box-shadow: var(--tk-shadow-sm);
    }

/* --- Anmeldeseiten (SportMember, Admin) ------------------------------ */
.auth-wrap {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0 3rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background-color: #fff;
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius-lg);
    box-shadow: var(--tk-shadow);
    padding: 2rem 1.75rem 1.5rem;
}

    .auth-card h1 {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--tk-blue);
        margin-bottom: 0.35rem;
    }

    .auth-card .form-label {
        font-weight: 600;
        font-size: 0.875rem;
        margin-bottom: 0.3rem;
    }

    .auth-card .form-control {
        padding: 0.65rem 0.85rem;
        font-size: 1rem;
    }

    .auth-card .input-validation-error {
        border-color: #dc3545;
    }

.auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background-color: var(--tk-blue-50);
    color: var(--tk-blue);
}

    .auth-icon img {
        width: 26px;
        height: 26px;
    }

.auth-subtitle {
    color: var(--tk-muted);
    font-size: 0.925rem;
    margin-bottom: 1.5rem;
}

/* Hinweise als leiser Text unter dem Feld statt als farbiger Kasten */
.auth-hint {
    margin-top: 0.35rem;
    color: var(--tk-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.auth-field-error {
    display: block;
    margin-top: 0.3rem;
    color: #b42318;
    font-size: 0.8rem;
}

.auth-submit {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    font-size: 1rem;
}

/* Fehler der Anmeldung unter der Schaltflaeche; leer (validation-summary-valid) unsichtbar */
.auth-error {
    margin-top: 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--tk-radius-sm);
    background-color: #fdecec;
    color: #9b1c1c;
    font-size: 0.875rem;
}

    .auth-error.validation-summary-valid {
        display: none;
    }

    .auth-error ul {
        margin: 0;
        padding-left: 1.1rem;
    }

    .auth-error ul:has(> li:only-child) {
        list-style: none;
        padding-left: 0;
    }

.auth-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tk-border-soft);
    color: var(--tk-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* --- Tagesübersicht als Zeitstrahl ------------------------------------- */
/* Same spacing on every width: the time bar sits 8px above its first card, and the slots
   are separated by the container gap only (no list or heading margins adding up). */
.day-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.timeline-slot > .timeline-head h5.timeofday {
    margin-bottom: 0;
}

.timeline-slot ul {
    margin-bottom: 0;
}

.timeline-nav {
    display: none;
}

/* Wochenuebersicht: dieselbe Achse, ein Abschnitt pro Tag. Heute in Gold, vergangene
   Tage blass - die Karten selbst blasst das Kompakt-Partial schon ab. */
h5.timeofday.today {
    background-color: var(--tk-highlight);
    color: var(--tk-highlight-text);
}

.timeline-slot.is-past h5.timeofday {
    opacity: 0.4;
}

/* Each start time is a slot; from lg upwards the slots sit next to each other along a
   horizontal axis and scroll sideways when they don't fit. A slot is as wide as the most
   parallel trainings it holds (--slot-cols, set in Index.cshtml). Phones keep the stacked list. */
@media (min-width: 992px) {
    .day-timeline {
        flex-direction: row;
        align-items: flex-start;
        column-gap: 1rem;
        overflow-x: auto;
        /* No scrollbar - the chevrons in .timeline-scroller replace it (site.js). Trackpad
           swipes and Shift+wheel still scroll. */
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        /* Room for card shadows at the bottom edge. */
        padding-bottom: 0.25rem;
        /* Room for the rows' negative gutter margins, which would otherwise always scroll a bit. */
        padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    }

    .day-timeline::-webkit-scrollbar {
        display: none;
    }

    .timeline-slot {
        scroll-snap-align: start;
    }

    .timeline-scroller {
        position: relative;
    }

    /* Fade the edge where more slots are hidden, so a cut-off card reads as "there is more". */
    .timeline-scroller::before,
    .timeline-scroller::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 3.5rem;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .timeline-scroller::before {
        left: 0;
        background: linear-gradient(to right, var(--tk-page), rgba(244, 246, 250, 0));
    }

    .timeline-scroller::after {
        right: 0;
        background: linear-gradient(to left, var(--tk-page), rgba(244, 246, 250, 0));
    }

    .timeline-scroller.can-scroll-prev::before,
    .timeline-scroller.can-scroll-next::after {
        opacity: 1;
    }

    /* Round chevrons sitting on the time axis at both ends. */
    .timeline-nav:not([hidden]) {
        position: absolute;
        top: -3px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #183963;
        color: #fff;
        box-shadow: var(--tk-shadow);
        cursor: pointer;
        transition: transform 0.15s, background-color 0.15s;
    }

    .timeline-nav:hover {
        background: var(--tk-blue-hover);
        transform: scale(1.08);
    }

    .timeline-nav:focus-visible {
        outline: 3px solid var(--tk-blue-100);
        outline-offset: 2px;
    }

    .timeline-nav-prev {
        left: 0;
    }

    .timeline-nav-next {
        right: 0;
    }

    /* Slots are narrower than the old full-width cards: let name and place share lines. */
    .timeline-slot .card-header > .d-flex:first-child {
        flex-wrap: wrap;
    }

    .timeline-slot .card-header .fw-bold.text-nowrap {
        white-space: normal !important;
    }

    .timeline-slot {
        flex: 1 0 calc(var(--slot-cols, 1) * 320px);
        min-width: calc(var(--slot-cols, 1) * 320px);
    }

    /* Vertical stickiness does nothing inside a horizontal scroller. */
    .timeline-slot > .timeline-head {
        position: relative;
        top: auto;
        z-index: auto;
    }

    /* The axis: a line through every slot header, reaching into the gaps so it looks continuous. */
    .timeline-slot > .timeline-head::before {
        content: "";
        position: absolute;
        left: -0.5rem;
        right: -0.5rem;
        top: 50%;
        border-top: 2px solid var(--tk-blue-100);
    }

    .timeline-slot:first-child > .timeline-head::before {
        left: 50%;
    }

    .timeline-slot:last-child > .timeline-head::before {
        right: 50%;
    }

    .timeline-slot > .timeline-head h5.timeofday {
        position: relative;
        display: table;
        margin: 0 auto;
        min-width: 8rem;
    }
}