:root {
    --bl-primary-color: yellow;
    --bl-secondary-color: #0D5C63;
    --bl-tertiary-color: #948afc;
    --bl-tertiary-color-subtle: #948afc7e;
    --bl-quaternary-color: #FFACE4;
    --bl-quaternary-color-subtle: #FFACE47e;
    --bl-quinary-color: #1A1B41;
    --bl-dark-purple: rgba(75, 0, 130, 1);
    --bl-glowing-pink: rgb(172, 255, 202);
    
    --bl-exciting-bg-img: linear-gradient(90deg, var(--bl-tertiary-color), var(--bl-quaternary-color));
}

a { 
    color: inherit;
} 

a:hover {
    color: #FFACE4;
    text-decoration: underline;
}


body {
    font-family: "Georgia";
}

body::before { 
    display: block; 
    content: ''; 
    height: 56px;
}

.bl-primary-color {
    color: var(--bl-primary-color);
}

.bl-primary-color-bg {
    background-color: var(--bl-primary-color);
}

.bl-tertiary-color {
    color: var(--bl-tertiary-color);
}

.bl-tertiary-color-subtle {
    color: var(--bl-tertiary-color-subtle);
}

.bl-tertiary-color-bg {
    background-color: var(--bl-tertiary-color);
}

.bl-tertiary-color-subtle-bg {
    background-color: var(--bl-tertiary-color-subtle);
}

.bl-quaternary-color {
    color: var(--bl-quaternary-color);
}

.bl-quaternary-color-bg {
    background-color: var(--bl-quaternary-color);
}

.bl-quaternary-color-subtle-bg {
    background-color: var(--bl-quaternary-color-subtle);
}

.bl-section {
    background-color: var(--primary-bl-color);
}

/* Always keep room for the scrollbar where the system shows one, so a short
   page (no scrollbar) and a long one do not centre the navbar and the page
   a few pixels apart. Overlay scrollbars are unaffected. */
html {
    scrollbar-gutter: stable;
}

html, body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  /* Style the footer */
  footer {
    margin-top: auto;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 0rem;
    color: black;
    background-color: rgba(211, 211, 211, 0.363);
  }

  .home-section {
    background-color: var(--bl-quaternary-color);
    background-image: var(--bl-exciting-bg-img);
  }

  .bl-intro-background {
    /* background-color: var(--bl-quaternary-color);
    background-image: var(--bl-exciting-bg-img); */
    color: var(--bl-tertiary-color);
    border-top: 1px solid white;
    /* box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05); */
  }
  
.text-extra-small {
    font-size: 1rem; /* Adjust as needed */
}

.card-header {
    background-image: var(--bl-tertiary-color-subtle);
}

.card {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); 
}

/* Custom BeginnerLuft Button Styles */
.btn-bl-primary {
    color: var(--bl-quinary-color);
    background-color: transparent;
    border: 2px solid var(--bl-tertiary-color);
    border-radius: 8px;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    transition: all 0.3s ease;
}

.btn-bl-primary:hover {
    color: white;
    background-color: var(--bl-tertiary-color);
    border-color: var(--bl-tertiary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(148, 138, 252, 0.3);
}

.btn-bl-primary:focus {
    color: white;
    background-color: var(--bl-tertiary-color);
    border-color: var(--bl-tertiary-color);
    box-shadow: 0 0 0 0.2rem rgba(148, 138, 252, 0.25);
}

.btn-bl-primary:active {
    color: white;
    background-color: var(--bl-tertiary-color);
    border-color: var(--bl-tertiary-color);
    transform: translateY(0);
}

/* Small variant */
.btn-bl-primary.btn-sm {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

nav, .chart {
    background-color: var(--bl-quaternary-color);
    background-image: var(--bl-exciting-bg-img);
}

/* Breadcrumbs — quiet by design.
   The `nav` rule above paints the brand gradient, which is right for the
   navbar and wrong for a breadcrumb trail: it is orientation, not a banner. */
nav.bl-breadcrumb {
    background-color: transparent;
    background-image: none;
}

nav.bl-breadcrumb a {
    color: var(--bs-secondary-color);
}

nav.bl-breadcrumb a:hover {
    color: var(--bl-tertiary-color);
}

/* Context links (breadcrumb strips, meta rows): they carry the colour of the
   text around them and only announce themselves on hover. The !important is
   there to beat text-body-secondary, which is itself !important. */
.bl-context-link:hover {
    color: var(--bl-tertiary-color) !important;
    text-decoration: underline !important;
}

/* The navbar's open-Sonderfälle counter.

   It used to wear Bootstrap's .bg-danger, and page stylesheets are free to
   redefine that: coachings.css washes every .badge.bg-danger down to a pastel
   #f8d7da, so the same count rendered bright red on the Sonderfälle page and
   faded on the four pages that link that file. The counter owns its colour
   here instead, out of reach of any page-level .badge rule. */
.bl-nav-count {
    background-color: var(--bs-danger);
    color: #fff;
}

/* Who is responsible — a filled pill so it reads before the prose does. */
.bl-assignee-badge {
    background-color: var(--bl-tertiary-color-subtle);
    color: var(--bl-quinary-color);
}

/* Small avatar circle for comment threads — the card-sized
   .bl-avatar-circle in components/avatars.css is too heavy for a discussion. */
.bl-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
}

/* User-entered text: keep the author's line breaks, break long words rather
   than letting a German compound push the layout sideways on a phone. */
.bl-prewrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.global-faq {
  --bs-accordion-active-bg: var(--bl-tertiary-color-subtle);
} 

.custom-faq {
  --bs-accordion-active-bg: var(--bl-quaternary-color-subtle);
}

.participant-accordion {
    --bs-accordion-active-bg: var(--bl-quaternary-color-subtle);
}

summary {
    cursor: pointer;
    padding: 8px;
    background-color: var(--bl-quaternary-color);
    background-image: var(--bl-exciting-bg-img);
    border-radius: 8px;
    height: 60px;
    font-weight: bold;
    color: white;
    display: flex; /* Make it a flex container */
    align-items: center; /* Vertically center the content */
}


/* Border and spacing for details */
details {
    margin-bottom: 20px;
}

.coaching-list:hover {
    background-color: rgba(128, 128, 128, 0.049);
    border-radius: 8px;
}

.fixed-card {
    width: 330px;
}

.rounded-bottom-corners {
    border-bottom-left-radius: 30% 50px;
    border-bottom-right-radius: 30% 50px;
}

.rounded-top-corners {
    border-top-left-radius: 30% 50px;
    border-top-right-radius: 30% 50px;
}

.double-underline {
    text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-thickness: 3px;
    text-underline-offset: 10px;
}

.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.tooltip .tooltip-inner {
    background-color: white;
    color: black;
    border: 3px solid var(--bl-tertiary-color);
    text-align: left;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.tooltip-trigger:hover {
    color: #FFACE4;
    text-decoration: underline;
    cursor: pointer;
}

.tooltip.show {
    opacity: 1;
}

.bold-label ~ label {
    font-weight: bold;
}

/* ---------------------------------------------------------------------------
   Main navbar (base.html)

   Two shapes. From 1200px everything sits on one line; below that it folds
   behind the menu button. Bootstrap's default fold point, 992px, was too
   early: seven entries and a name do not fit there, and the bar wrapped onto
   a second line that slid over the page.
   ------------------------------------------------------------------------ */

/* Entries are a softened navy, so the current one can stand out simply by
   being full black — no underline, no weight change, no shift. */
.bl-navbar .nav-link {
    font-weight: 500;
    color: rgba(26, 27, 65, .75);
    border-radius: .5rem;
}
.bl-navbar .nav-link:hover,
.bl-navbar .nav-link:focus-visible {
    color: var(--bl-quinary-color);
    background-color: rgba(255, 255, 255, .35);
}
/* The page you are on: full black instead of the softened navy. Deliberately
   no bolder weight — bold text is wider, and every entry after it would shift
   a few pixels from one page to the next. */
.bl-navbar .nav-link.active {
    color: #000;
    background-color: transparent;
}
.bl-navbar .nav-link:focus-visible,
.bl-navbar .dropdown-item:focus-visible,
.bl-navbar__quick:focus-visible {
    outline: 2px solid var(--bl-quinary-color);
    outline-offset: 2px;
}

.bl-navbar .dropdown-header {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bl-tertiary-color);
}

/* The Prio count beside the menu button on tablet and phone. */
.bl-navbar__quick {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: 0 .75rem;
    margin-right: .5rem;
    border-radius: .5rem;
    color: var(--bl-quinary-color);
    text-decoration: none;
    background-color: rgba(255, 255, 255, .45);
}
.bl-navbar__quick:hover { color: var(--bl-quinary-color); background-color: rgba(255, 255, 255, .65); }
.bl-navbar__quick .badge { font-size: .7em; }

/* Desktop: one line, menus drop below. */
@media (min-width: 1200px) {
    .bl-navbar .navbar-nav .nav-link { padding: .45rem .7rem; }
    .bl-navbar .navbar-nav { gap: .1rem; }

    .bl-navbar .dropdown-menu {
        border: 0;
        border-radius: .75rem;
        box-shadow: 0 10px 30px rgba(26, 27, 65, .12);
        padding: .4rem;
        margin-top: .4rem;
    }
    .bl-navbar .dropdown-item { border-radius: .4rem; padding: .4rem .75rem; }

    /* BL Tools: the groups side by side, so thirty entries need no scrollbar.
       Bootstrap toggles display itself, hence the .show. */
    .bl-navbar .bl-mega.show {
        display: grid;
        grid-template-columns: repeat(3, minmax(11rem, 1fr));
        gap: .25rem 1rem;
        width: min(44rem, calc(100vw - 2rem));
        padding: .75rem;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
    .bl-navbar .bl-mega__group .dropdown-header { padding: .5rem .75rem .25rem; }
}

/* Tablet and phone: the open menu is a panel of its own. */
@media (max-width: 1199.98px) {
    /* The bar is fixed, so a long open menu has to scroll inside itself —
       otherwise the end of BL Tools sits below the screen, out of reach. */
    .bl-navbar .navbar-collapse {
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: .75rem;
    }
    /* Big enough for a thumb. */
    .bl-navbar .navbar-nav .nav-link { padding: .7rem .75rem; }
    .bl-navbar .dropdown-menu {
        border: 0;
        background-color: rgba(255, 255, 255, .7);
        border-radius: .5rem;
        margin: 0 0 .5rem;
        padding: .25rem;
    }
    .bl-navbar .dropdown-item { padding: .6rem .9rem; border-radius: .4rem; }
    .bl-navbar .bl-mega__group + .bl-mega__group { margin-top: .25rem; }

    /* The account menu as its own section, not right-aligned mid-list. */
    .bl-navbar__user {
        border-top: 1px solid rgba(26, 27, 65, .15);
        margin-top: .5rem;
        padding-top: .5rem;
    }
}

/* Tablet: the BL Tools groups in two columns — there is room, and half the
   scrolling. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .bl-navbar .bl-mega.show {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1rem;
    }
    .bl-navbar .bl-mega__group + .bl-mega__group { margin-top: 0; }
}
/* ---------------------------------------------------------------------------
   Filed documents — the list under G-Drive Ablage
   ------------------------------------------------------------------------ */

/* A superseded copy is still part of the record, so it stays readable rather
   than being hidden — muted enough to be skipped when scanning for what is
   current. */
.bl-filed-docs__row--superseded {
    opacity: 0.6;
}

/* Below this the table stops being a table. Five columns cannot be read at
   phone width, and a sideways scrollbar inside a page that already scrolls
   down is easy to miss entirely — so each row becomes a small stacked card
   with the column headings repeated as labels. */
@media (max-width: 767.98px) {
    .bl-filed-docs__table thead {
        display: none;
    }

    .bl-filed-docs__table table,
    .bl-filed-docs__table tbody,
    .bl-filed-docs__table tr,
    .bl-filed-docs__table td {
        display: block;
        width: 100%;
    }

    .bl-filed-docs__row {
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
    }

    .bl-filed-docs__row td {
        border: 0;
        padding: 0.15rem 0;
    }

    /* The heading the cell lost, put back in front of its value. */
    .bl-filed-docs__row td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--bs-secondary-color);
        font-size: 0.75rem;
    }

    /* The first cell leads the card, so it needs no label. */
    .bl-filed-docs__row td:first-child::before,
    .bl-filed-docs__row td:last-child::before {
        content: none;
    }
}