/* Base Card Component Styles */
/* Shared across all card types: coaching-order, coach, participant, jobcenter, referral-bonus */

.bl-card {
    transition: all 0.3s ease;
    border-radius: 8px;
    background: white;
    border: 1px solid #e9ecef !important;
}

.bl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    border-color: var(--bl-tertiary-color) !important;
}

.bl-card .card-header {
    border-radius: 8px 8px 0 0;
}

.bl-card .card-body h6 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.bl-card .badge {
    font-weight: 500;
    border-radius: 4px;
}

.bl-card .card-body .badge.bg-light {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
}

/* Task items (used in home coaching-order cards) */
.bl-card .task-item {
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f4;
}

.bl-card .task-item:last-child {
    border-bottom: none;
}

/* Details sections */
.bl-details {
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    border-left: 3px solid var(--bl-tertiary-color);
}

/* Status Cards (for Checks im Überblick section) */
.bl-status-card {
    height: 100%;
    min-height: 140px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Add vertical spacing to card columns in the checks section */
#traffic_lights .row > div {
    margin-bottom: 2rem;
}

.bl-status-card .card-header {
    background: white !important;
    border-bottom: 1px solid #e9ecef;
    padding: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

.bl-status-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    min-height: 80px;
    flex: 1;
}

.bl-status-card .card-footer {
    background: white !important;
    border-top: 1px solid #e9ecef;
    padding: 0.5rem 0.75rem;
}

/* Status-specific styling */
.bl-status-card.status-warning {
    border-left: 4px solid #dc3545;
}

.bl-status-card.status-warning:hover {
    border-left: 4px solid #dc3545;
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.15) !important;
}

.bl-status-card.status-success {
    border-left: 4px solid #198754;
}

.bl-status-card.status-success:hover {
    border-left: 4px solid #198754;
    box-shadow: 0 4px 20px rgba(25, 135, 84, 0.15) !important;
}

.bl-status-card.status-info {
    border-left: 4px solid #ffc107;
}

.bl-status-card.status-info:hover {
    border-left: 4px solid #ffc107;
    box-shadow: 0 4px 20px rgba(255, 193, 7, 0.15) !important;
}

/* Status icon styling */
.bl-status-icon {
    font-size: 2.25rem;
    margin-bottom: 0.375rem;
}

.bl-status-content {
    text-align: center;
}

.bl-status-count {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 0.375rem;
}

/* Under a flagged item on the checks page: what is wrong, in red, and the
   button to the fix (checks/_item_hint.html). Side by side while there is
   room; on a phone the button drops below at full width. */
.bl-check-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.bl-check-hint__text {
    min-width: 0;
}

.bl-check-hint__action {
    white-space: nowrap;
}

/* The open items of a check, two columns (item | confirm exception). Below
   tablet width the columns would leave the item and its hint a sliver, so
   each row becomes a block: the item on top, the confirm form under it. */
@media (max-width: 767.98px) {
    .bl-checks-flagged thead {
        display: none;
    }

    .bl-checks-flagged tr,
    .bl-checks-flagged td {
        display: block;
        width: 100%;
    }

    .bl-checks-flagged tr {
        padding: 0.75rem 0;
        border-bottom: 1px solid #e9ecef;
    }

    .bl-checks-flagged td {
        border: 0;
        padding: 0.25rem 0;
    }

    .bl-checks-flagged td + td {
        padding-top: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .bl-check-hint__action,
    .bl-checks-flagged form .btn {
        width: 100%;
        margin-left: 0;
    }
}

/* Success state specific styling */
.bl-status-card.status-success .bl-status-icon {
    color: #198754;
}

/* Warning state specific styling */
.bl-status-card.status-warning .bl-status-icon {
    color: #dc3545;
}

.bl-status-card.status-warning .bl-status-count {
    color: #dc3545;
}

/* Info state specific styling (for birthdays) */
.bl-status-card.status-info .bl-status-icon {
    color: #ffc107;
}

.bl-status-card.status-info .bl-status-count {
    color: #856404;
}
/* ------------------------------------------------------------------------
   Dokumentenordner — the card on the coaching page and the page that sets it
   (templates/coaching_detail.html, templates/dokumentenordner_aendern.html).
   ------------------------------------------------------------------------ */
.min-w-0 {
    min-width: 0;
}

.bl-folder-card {
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(26, 27, 65, 0.06);
}

.bl-folder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: #f1f3f5;
}

/* The folder that is set now, as one wide tappable row. */
.bl-folder-current {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid #d7e9e0;
    border-radius: 0.5rem;
    background: #f4faf7;
    color: var(--bl-secondary-color);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bl-folder-current:hover,
.bl-folder-current:focus-visible {
    background: #e7f4ee;
    border-color: #b9dccb;
    color: var(--bl-secondary-color);
}

.bl-folder-howto {
    background: #fafbfc;
}

.bl-folder-steps {
    padding-left: 1.25rem;
    line-height: 1.6;
}

.bl-folder-steps li + li {
    margin-top: 0.4rem;
}

.bl-folder-steps code {
    font-size: 0.85em;
    color: var(--bl-secondary-color);
    background: #eef5f6;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    word-break: break-word;
}

/* Old free-form links, read-only, one per row. */
.bl-folder-oldlinks li + li {
    margin-top: 0.25rem;
}

.bl-folder-oldlinks a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    color: #495057;
    font-size: 0.875rem;
    text-decoration: none;
}

.bl-folder-oldlinks a:hover,
.bl-folder-oldlinks a:focus-visible {
    background: #f1f3f5;
    color: var(--bl-secondary-color);
}

.bl-folder-oldlinks-block {
    border-top: 1px dashed #dee2e6;
    padding-top: 0.75rem;
}

.bl-folder-open {
    min-width: 10rem;
}

@media (max-width: 575.98px) {
    .bl-folder-open {
        width: 100%;
    }
}

/* „Dokumentenordner gespeichert.“ — right in the card staff land on. */
.bl-folder-flash {
    color: #146c43;
    font-weight: 500;
    animation: bl-folder-flash-in 0.35s ease-out;
}

@keyframes bl-folder-flash-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-folder-flash { animation: none; }
}

.bl-folder-flash--warning {
    color: #8a5a00;
}

/* The error names the service account, one long unbreakable address: let it
   wrap anywhere rather than push a phone screen sideways. */
.bl-folder-card .invalid-feedback {
    overflow-wrap: anywhere;
}

/* Finance pages: section headings and headline figures, shared by the
   Finanzen-Dashboard and the Liquiditätsvorschau so both read as one family. */

/* Section headings: the icon is decoration, so it stays out of the text's way and
   keeps a constant width, which lines the headings up down the page. */
.bl-finance-section-icon {
    flex: 0 0 2.5rem;
    font-size: 1.75rem;
    line-height: 1;
}

/* The year card carries one number that should read as the headline figure of the
   page, with last year's next to it rather than beneath it as a footnote. */
.bl-finance-headline {
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-success);
}

.bl-finance-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
}


/* --- Section cards and figure tiles ---
   Shared by the Liquiditätsvorschau, „Ausgaben verwalten" and the
   Coachings-Dashboard: cards that hold charts, lists and tables to read and work
   in, and the tiles that carry a page's key figures. */

/* These cards hold charts, lists and tables to read and work in, so they stay
   put under the pointer instead of lifting like the clickable cards elsewhere. */
.bl-section-card:hover {
    transform: none;
    box-shadow: none !important;
    border-color: #e9ecef !important;
}

.bl-section-card .card-header {
    padding: 0.875rem 1.25rem;
}

.bl-section-card .card-body {
    padding: 1.25rem;
}

.bl-section-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bl-quinary-color);
}

.bl-section-icon {
    color: var(--bl-tertiary-color);
    font-size: 1.1rem;
    line-height: 1;
}

/* Key figures as tiles, two by two unless a page sets its own columns. In a row
   of four the forecast's dates did not fit beside its Kontostand field. */
.bl-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.bl-figure-tile {
    padding: 0.875rem 1rem;
    border: 1px solid rgba(148, 138, 252, 0.22);
    border-radius: 8px;
    background-color: rgba(148, 138, 252, 0.05);
    min-width: 0;
    /* The figure sizes itself to its tile, however narrow the page makes it. */
    container-type: inline-size;
}

.bl-figure-tile dd {
    margin: 0;
}

.bl-figure-tile .bl-finance-label {
    margin-bottom: 0.35rem;
}

.bl-figure-value {
    font-size: clamp(1rem, 12cqi, 1.35rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bl-quinary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Income over expenses, one below the other, in the space of one figure. */
.bl-figure-pair {
    display: flex;
    flex-direction: column;
    font-size: 1.05rem;
}

.bl-figure-note {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #6c757d;
}

/* Phones: two tiles share about 150px each. */
@media (max-width: 575.98px) {
    .bl-figure-tile {
        padding: 0.75rem;
    }

    .bl-figure-pair {
        font-size: 0.95rem;
    }

    /* No room for the icon beside a date; the red and the note below still say it. */
    .bl-figure-value .bi {
        display: none;
    }
}

/* The tables here only ever scroll sideways; a border a pixel taller than its
   row must not add a vertical scrollbar. */
.bl-section-card .table-responsive {
    overflow-y: hidden;
}

/* Phones: a little less padding, so the content keeps its width. */
@media (max-width: 575.98px) {
    .bl-section-card .card-header,
    .bl-section-card .card-body {
        padding: 0.875rem 1rem;
    }

    .bl-section-card .card-body.p-0 {
        padding: 0;
    }
}

/* A page's section heading: the title, its icon, and a hairline after it, so the
   sections read apart without boxes around them. */
.bl-section-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bl-quinary-color);
}

.bl-section-heading::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: #e9ecef;
}

.bl-section-heading .bl-section-icon {
    font-size: 1.2rem;
}