/**
 * Global Table Styles
 * ALL tables, row color coding, level badges, payment alerts
 * ONE source of truth - no table styles anywhere else
 */

/* Table Container */
.table-container {
    background: white;
    border-radius: var(--radius-md);
    overflow-x: auto;
}

/* Base Table */
.courses-table {
    width: 100%;
    border-collapse: collapse;
}

.courses-table thead {
    background: var(--plava);
    position: sticky;
    top: 0;
    z-index: 2;
}

.courses-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
}

.enrollment-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.enrollment-row:hover {
    background-color: rgba(135, 156, 254, 0.06);
}

.enrollment-row.expanded {
    background-color: rgba(135, 156, 254, 0.12);
}

.enrollment-detail-row {
    display: none;
}

.enrollment-detail-row.active {
    display: table-row;
}

.courses-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.9375rem;
}

.courses-table tbody tr {
    transition: background 0.2s;
    border-left: 4px solid transparent;
}

.courses-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* Clickable Rows */
.clickable-row {
    cursor: pointer;
}

/* Row Color Coding by Participant Count — left accent + full-row tint */
.courses-table tbody tr.status-blue {
    border-left-color: var(--blue);
    background: rgba(0, 150, 255, 0.14);
}
.courses-table tbody tr.status-green {
    border-left-color: var(--green);
    background: rgba(34, 221, 34, 0.13);
}
.courses-table tbody tr.status-yellow {
    border-left-color: var(--yellow);
    background: rgba(210, 165, 0, 0.16);
}
.courses-table tbody tr.status-red {
    border-left-color: var(--red);
    background: rgba(255, 49, 49, 0.14);
}

/* Hover — slightly more saturated */
.courses-table tbody tr.status-blue:hover  { background: rgba(0, 150, 255, 0.22); }
.courses-table tbody tr.status-green:hover { background: rgba(34, 221, 34, 0.21); }
.courses-table tbody tr.status-yellow:hover{ background: rgba(210, 165, 0, 0.25); }
.courses-table tbody tr.status-red:hover   { background: rgba(255, 49, 49, 0.22); }

/* Course Name Cell */
.course-name-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

/* ── Course-detail participant payment row colours (blinking) ──────────── */
@keyframes blink-red {
    0%, 100% { background: rgba(255, 49, 49, 0.15); }
    50%       { background: rgba(255, 49, 49, 0.04); }
}
@keyframes blink-yellow {
    0%, 100% { background: rgba(210, 165, 0, 0.18); }
    50%       { background: rgba(210, 165, 0, 0.05); }
}

.courses-table tbody tr.payment-none {
    border-left: 4px solid var(--red);
    animation: blink-red 2s ease-in-out infinite;
}
.courses-table tbody tr.payment-partial {
    border-left: 4px solid var(--yellow);
    animation: blink-yellow 2s ease-in-out infinite;
}
/* Fully paid — no animation, plain white row */
.courses-table tbody tr.payment-ok {
    border-left: 4px solid transparent;
}

/* ── Level Badge */
.level-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--plava);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.level-badge-lg {
    font-size: 1rem;
    padding: 0.375rem 0.875rem;
}

/* Participants Cell */
.participants-cell {
    white-space: nowrap;
}

/* Participant Name Cell */
.participant-name-cell {
    font-weight: 500;
}

/* ── Level badges (participant list inline badges) ──────────────────── */
.lbadge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.4;
}
.lbadge sup {
    font-size: 0.6rem;
    vertical-align: super;
    font-weight: 600;
}
.participant-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}
.participant-badges-sep {
    margin: 0 6px;
    color: var(--text-muted);
    font-weight: 300;
    vertical-align: middle;
}
/* A1 family — purple */
.lbadge-a1,   .lbadge-a1-1 { background: #9D8FE8; }
.lbadge-a1-2                { background: #7A6BCE; }
/* A2 family — blue */
.lbadge-a2,   .lbadge-a2-1 { background: #5BAAE8; }
.lbadge-a2-2                { background: #3A8ACC; }
/* B1 family — green */
.lbadge-b1,   .lbadge-b1-1 { background: #3DD9A0; }
.lbadge-b1-2                { background: #1DB880; }
/* B2 family — amber (dark text for readability) */
.lbadge-b2,   .lbadge-b2-1 { background: #F5C84E; color: #5a4000; }
.lbadge-b2-2                { background: #D5A830; color: #5a4000; }
/* C1 family — coral */
.lbadge-c1,   .lbadge-c1-1 { background: #F07068; }
.lbadge-c1-2                { background: #D05040; }
/* K (Konversation) — teal */
.lbadge-k                   { background: #17A898; }

/* ── Compact course table (dashboard) ───────────────────────────────────── */
.courses-table--compact td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}

/* Badge column: shrink to badge width */
.courses-table--compact .course-badge-cell {
    width: 1%;
    white-space: nowrap;
}

/* Count column: shrink, right-aligned */
.courses-table--compact .course-count-cell {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    font-weight: 600;
    color: var(--text-dark);
}

/* Mobile — keep compact rows, do NOT convert to cards.
   Double-class selector (.courses-table.courses-table--compact) raises
   specificity above the global .courses-table tbody tr card-layout rule. */

/* Payment Alert */
.payment-alert {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 1rem;
    animation: blink 1.5s infinite;
}

.alert-red { color: var(--red); }
.alert-yellow { color: var(--yellow); }

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Inline Badges (Bezahlt, Offen, etc.) */
.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 0.3125rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-badge.active { background: var(--color-success-bg); color: var(--color-success-text); }
.status-badge.inactive { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* Enrollment Status */
.enrollment-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.status-pending { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-confirmed { background: var(--color-success-bg); color: var(--color-success-text); }
.status-completed { background: var(--color-info-bg); color: var(--color-info-text); }
.status-cancelled { background: var(--color-danger-bg); color: var(--color-danger-text); }
.status-withdrawn { background: var(--color-neutral-bg); color: var(--color-neutral-text); }

/* No Data Message */
.no-data-message,
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.empty-state .btn {
    margin-top: 1rem;
}

/* Multi-line cell value wrapper — keeps multiple spans as ONE flex item */
.td-value-stack {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    text-align: right;
}

.td-line {
    display: block;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.td-sub {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Participant name + badges group */
.participant-name-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.participant-name-text {
    white-space: nowrap;
}

/* level-badge-lg shrinks to normal badge size on mobile to save header space */
@media (max-width: 768px) {
    .level-badge-lg {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }
}

/* Mobile Responsive - Card Layout */
@media (max-width: 768px) {
    .courses-table thead {
        display: none;
    }
    .courses-table tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        border-left-width: 4px !important;
        background: white;
    }
    .courses-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        word-break: break-word;
        overflow-wrap: anywhere;
        min-width: 0;
    }
    .courses-table td:last-child {
        border-bottom: none;
    }
    .courses-table td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 1rem;
        flex-shrink: 0;
        color: var(--text-muted);
    }
    .course-name-cell {
        flex-wrap: wrap;
    }

    /* Enrollment expand row — opt out of card layout, preserve show/hide */
    .courses-table tbody tr.enrollment-detail-row {
        display: none;
        border: none;
        border-radius: 0;
        margin-bottom: 0;
        background: transparent;
    }

    .courses-table tbody tr.enrollment-detail-row.active {
        display: table-row;
    }

    .enrollment-detail-row > td {
        display: block;
        padding: 0;
        border-bottom: none;
    }

    .enrollment-detail-row > td::before {
        display: none;
    }

    /* Name first, badges below on mobile */
    .participant-name-group {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }

    .participant-name-text {
        white-space: normal;
        word-break: break-word;
    }

    /* When td-lines carry their own data-label, each becomes its own card row.
       The outer td becomes a block, its ::before label is hidden,
       and each td-line[data-label] renders as a full flex row with its own label. */
    .courses-table td:has(.td-line[data-label]) {
        display: block;
        padding: 0;
    }

    .courses-table td:has(.td-line[data-label])::before {
        display: none;
    }

    .courses-table td:has(.td-line[data-label]) .td-value-stack {
        display: block;
    }

    .courses-table td .td-line[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        word-break: break-word;
        overflow-wrap: anywhere;
        min-width: 0;
        font-size: inherit;
        color: var(--text-dark);
    }

    .courses-table td .td-line[data-label]:last-child {
        border-bottom: none;
    }

    .courses-table td .td-line[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 1rem;
        flex-shrink: 0;
        color: var(--text-muted);
        white-space: nowrap;
    }

    /* Compact course table — opt out of card layout entirely */
    .courses-table.courses-table--compact tbody tr {
        display: table-row;
        border-radius: 0;
        margin-bottom: 0;
        box-shadow: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .courses-table.courses-table--compact td {
        display: table-cell;
        padding: 0.45rem 0.5rem;
        word-break: normal;
        overflow-wrap: normal;
    }

    .courses-table.courses-table--compact td::before {
        display: none;
    }

    .courses-table.courses-table--compact .level-badge {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }

    .courses-table.courses-table--compact .course-count-cell {
        font-size: 0.8rem;
    }
}