/* Rechnungen page — layout hooks scoped to [data-rechnungen-page] */

[data-rechnungen-page] {
    --rechnungen-card-bg: var(--app-content-card-bg, #fff);
    --rechnungen-card-border: var(--app-content-card-border, #ececec);
    --rechnungen-pill-bg: #f4f4f5;
    --rechnungen-pill-text: #52525b;
    --rechnungen-tab-active-bg: #f4f4f5;
    --rechnungen-footer-bg: #f4f4f5;
    --rechnungen-detail-icon-teal-bg: #e6f4f1;
    --rechnungen-detail-icon-teal-fg: #0d6b5c;
    --rechnungen-detail-icon-blue-bg: #e8f0fe;
    --rechnungen-detail-icon-blue-fg: #1a56db;
    --rechnungen-invoice-icon-bg: #e6f4f1;
    --rechnungen-invoice-icon-fg: #0d6b5c;
}

.dark [data-rechnungen-page] {
    --rechnungen-pill-bg: color-mix(in oklab, var(--color-white) 8%, transparent);
    --rechnungen-pill-text: var(--color-zinc-300);
    --rechnungen-tab-active-bg: color-mix(in oklab, var(--color-white) 10%, transparent);
    --rechnungen-footer-bg: color-mix(in oklab, var(--color-zinc-400) 12%, transparent);
}

/* ── Cards ───────────────────────────────────────────────── */

[data-rechnungen-summary-card],
[data-rechnungen-table-card] {
    background: var(--rechnungen-card-bg);
    border: 1px solid var(--rechnungen-card-border);
    border-radius: var(--radius-xl, 0.75rem);
}

[data-rechnungen-summary-card] {
    padding: 1.25rem 1.5rem;
}

[data-rechnungen-summary-header] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

[data-rechnungen-summary-main] {
    min-width: 0;
    flex: 1 1 16rem;
}

[data-rechnungen-summary-pills] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-top: 1rem;
    width: 100%;
}

[data-rechnungen-summary-pills] [data-rechnungen-pill] {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    [data-rechnungen-summary-card] {
        padding: 1rem;
    }

    [data-rechnungen-summary-header] {
        flex-direction: column;
        align-items: stretch;
    }

    [data-rechnungen-summary-main] {
        flex: none;
        width: 100%;
    }

    [data-rechnungen-summary-pills] {
        flex-direction: column;
        gap: 0.5rem;
    }

    [data-rechnungen-summary-pills] [data-rechnungen-pill] {
        flex: none;
        width: 100%;
        justify-content: flex-start;
        overflow: visible;
        text-overflow: unset;
    }
}

[data-rechnungen-table-card] {
    overflow: hidden;
    --rechnungen-table-inset-x: 1.5rem;
}

/* ── Summary pills ───────────────────────────────────────── */

[data-rechnungen-pill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--rechnungen-pill-bg);
    color: var(--rechnungen-pill-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

[data-rechnungen-pill] svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

[data-rechnungen-pill]:not([data-rechnungen-mandate-badge]) svg {
    opacity: 0.7;
}

[data-rechnungen-pill][data-rechnungen-mandate-badge] {
    color: var(--app-content-badge-success-text);
    background-color: var(--app-content-badge-success-bg);
}

/* ── Filter bar ──────────────────────────────────────────── */

[data-rechnungen-filters] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

[data-rechnungen-search] {
    position: relative;
    flex: 1 1 16rem;
    min-width: 16rem;
    max-width: 22rem;
}

[data-rechnungen-search-icon] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--app-content-text-subtle, #a1a1aa);
    pointer-events: none;
}

[data-rechnungen-search-input] {
    display: block;
    width: 100%;
    height: 2.25rem;
    padding: 0 0.75rem 0 2.25rem;
    border: 1px solid var(--rechnungen-card-border);
    border-radius: var(--radius-lg);
    background: var(--rechnungen-card-bg);
    font-size: 0.875rem;
    color: var(--app-content-heading, #18181b);
}

[data-rechnungen-search-input]::placeholder {
    color: var(--app-content-input-placeholder, #a1a1aa);
}

[data-rechnungen-search-input]:focus {
    outline: 2px solid var(--app-content-input-focus-ring, var(--app-brand-700));
    outline-offset: 1px;
}

[data-rechnungen-tabs] {
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: var(--radius-lg);
    background: var(--rechnungen-pill-bg);
}

[data-rechnungen-tab] {
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rechnungen-pill-text);
    background: transparent;
    border: none;
    cursor: pointer;
}

[data-rechnungen-tab][data-active] {
    background: var(--rechnungen-card-bg);
    color: var(--app-content-heading, #18181b);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

[data-rechnungen-filter-select] {
    appearance: none;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--rechnungen-card-border);
    border-radius: var(--radius-md);
    background: var(--rechnungen-card-bg);
    font-size: 0.875rem;
    color: var(--app-content-text, #52525b);
}

[data-rechnungen-reset] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--app-content-text-muted, #71717a);
    text-decoration: none;
}

[data-rechnungen-reset]:hover {
    color: var(--app-content-heading, #18181b);
}

/* ── Area badges ─────────────────────────────────────────── */

[data-rechnungen-area-badge="fernstudium"] {
    color: var(--app-brand-800) !important;
    background-color: var(--app-brand-100) !important;
}

[data-rechnungen-area-badge="kurs"] {
    color: #854d0e !important;
    background-color: #fef9c3 !important;
}

[data-rechnungen-area-badge="community"] {
    color: #6b21a8 !important;
    background-color: #f3e8ff !important;
}

/* ── Table tweaks ──────────────────────────────────────────── */

[data-rechnungen-table-card] [data-flux-table] {
    border-collapse: separate;
}

[data-rechnungen-invoices-table] [data-flux-cell],
[data-rechnungen-invoices-table] [data-flux-column] {
    vertical-align: top;
}

[data-rechnungen-table-card] ui-table-scroll-area {
    padding: 0;
}

[data-rechnungen-table-card] [data-rechnungen-col="rechnung"] {
    padding-left: var(--rechnungen-table-inset-x) !important;
}

[data-rechnungen-table-card] [data-flux-column]:last-child,
[data-rechnungen-table-card] [data-flux-cell]:last-child {
    padding-right: var(--rechnungen-table-inset-x) !important;
}

[data-rechnungen-invoices-table] [data-rechnungen-col="zahlung"],
[data-rechnungen-invoices-table] td[data-rechnungen-col="zahlung"] {
    width: 1%;
    white-space: normal;
}

[data-rechnungen-invoices-table] [data-rechnungen-invoice-payment] {
    width: max-content;
    max-width: 100%;
}

[data-rechnungen-invoice-id] {
    font-weight: 600;
    color: var(--app-content-body-strong, #18181b);
}

[data-rechnungen-invoice-desc] {
    font-size: 0.8125rem;
    color: var(--app-content-text-muted, #71717a);
}

[data-rechnungen-invoice-area-compact] {
    display: none;
}

@media (max-width: 1399px) {
    [data-rechnungen-invoices-table] [data-rechnungen-col="bereich"],
    [data-rechnungen-invoices-table] [data-rechnungen-invoice-area-cell] {
        display: none !important;
    }

    [data-rechnungen-invoice-area-compact] {
        display: block;
        margin-top: 0.125rem;
    }
}

[data-rechnungen-invoice-status] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}

[data-rechnungen-receipt-download] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--app-content-badge-success-text);
    background-color: var(--app-content-badge-success-bg);
    text-decoration: none;
}

[data-rechnungen-receipt-download]:hover {
    color: var(--app-content-badge-success-text);
    background-color: var(--app-content-badge-success-bg);
    filter: brightness(0.97);
    text-decoration: none;
}

[data-rechnungen-receipt-download-icon] {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

[data-rechnungen-receipt-label-short] {
    display: none;
}

@media (max-width: 1199px) {
    [data-rechnungen-receipt-label-full] {
        display: none;
    }

    [data-rechnungen-receipt-label-short] {
        display: inline;
    }
}

/* ── Pagination ────────────────────────────────────────────── */

[data-rechnungen-pagination] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem var(--rechnungen-table-inset-x, 1.5rem);
    border-top: 1px solid var(--app-content-pagination-border);
    font-size: 0.875rem;
    color: var(--app-content-text-muted);
}

[data-rechnungen-pagination-summary] {
    flex-shrink: 0;
    white-space: nowrap;
}

[data-rechnungen-pagination-controls] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

[data-rechnungen-pagination-controls] a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}

[data-rechnungen-pagination-controls] a svg {
    width: 1rem;
    height: 1rem;
}

/* ── Footer support bar ────────────────────────────────────── */

[data-rechnungen-footer-bar] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-xl);
    background: var(--rechnungen-footer-bg);
    border: 1px solid var(--rechnungen-card-border);
}

[data-rechnungen-footer-bar] [data-rechnungen-footer-text] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--app-content-text-muted);
    flex: 1;
    min-width: 12rem;
}

[data-rechnungen-footer-bar] [data-flux-icon] {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--app-content-text-subtle);
}

/* Mandate confirmed — subtle inline hint, not a badge */
[data-rechnungen-mandate-confirmed] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--app-content-mandate-text);
}

[data-rechnungen-mandate-confirmed] svg {
    flex-shrink: 0;
}

/* ── Stacked date lines (Datum / Fällig) ──────────────────── */

[data-rechnungen-date-lines] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[data-rechnungen-date-row] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    white-space: nowrap;
}

[data-rechnungen-date-row] [data-rechnungen-invoice-detail-label] {
    flex-shrink: 0;
    min-width: 2.75rem;
}

[data-rechnungen-dates-cell] {
    white-space: normal;
}

/* ── Desktop / mobile / tablet visibility toggles ─────────── */

[data-rechnungen-mobile-only],
[data-rechnungen-tablet-only] {
    display: none;
}

/* ── Tablet invoice accordion (768px–1023px) ──────────────── */

@media (min-width: 768px) and (max-width: 1023px) {
    [data-rechnungen-desktop-only] {
        display: none !important;
    }

    [data-rechnungen-tablet-only] {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box;
    }

    [data-rechnungen-invoices-table] {
        display: block;
        width: 100%;
        white-space: normal;
    }

    [data-rechnungen-invoices-table] tbody {
        display: block;
        width: 100%;
    }

    [data-rechnungen-invoices-table] tr {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--rechnungen-card-border);
    }

    [data-rechnungen-invoices-table] tr:last-child {
        border-bottom: none;
    }

    [data-rechnungen-invoice-tablet-card] {
        font-size: 0.875rem;
    }

    [data-rechnungen-invoice-tablet-header] {
        display: block;
        padding: 0.875rem var(--rechnungen-table-inset-x);
        cursor: pointer;
        list-style: none;
    }

    [data-rechnungen-invoice-tablet-header]::-webkit-details-marker {
        display: none;
    }

    [data-rechnungen-invoice-tablet-overview] {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        width: 100%;
    }

    [data-rechnungen-invoice-tablet-rechnung] {
        flex: 1 1 auto;
        min-width: 0;
    }

    [data-rechnungen-invoice-tablet-dates] {
        flex-shrink: 0;
    }

    [data-rechnungen-invoice-tablet-status] {
        flex-shrink: 0;
    }

    [data-rechnungen-invoice-tablet-meta] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.375rem;
        flex-shrink: 0;
        min-width: 5.25rem;
    }

    [data-rechnungen-invoice-tablet-card] [data-rechnungen-invoice-id] {
        line-height: 1.25;
    }

    [data-rechnungen-invoice-tablet-card] [data-rechnungen-invoice-amount] {
        font-size: 0.875rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    [data-rechnungen-invoice-tablet-chevron] {
        width: 1.25rem;
        height: 1.25rem;
        color: var(--app-content-text-subtle, #a1a1aa);
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform 0.15s ease;
    }

    [data-rechnungen-invoice-tablet-card][open] [data-rechnungen-invoice-tablet-chevron] {
        transform: rotate(180deg);
    }

    [data-rechnungen-invoice-tablet-body] {
        border-top: 1px solid var(--rechnungen-card-border);
    }

    [data-rechnungen-invoice-tablet-body] [data-rechnungen-invoice-detail] {
        padding: 0.875rem var(--rechnungen-table-inset-x);
        border-bottom: none;
    }

    [data-rechnungen-invoice-tablet-body] [data-rechnungen-invoice-detail-content] {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        min-width: 0;
        flex: 1;
    }

    [data-rechnungen-invoice-tablet-body] [data-rechnungen-invoice-detail-label] {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--app-content-text-subtle, #a1a1aa);
    }

    [data-rechnungen-invoice-tablet-body] [data-rechnungen-invoice-detail-value],
    [data-rechnungen-invoice-tablet-body] [data-rechnungen-invoice-payment] .font-medium {
        font-size: 0.875rem;
    }
}

/* ── Mobile invoice card accordion (<768px) ─────────────── */

@media (max-width: 767px) {
    [data-rechnungen-desktop-only] {
        display: none !important;
    }

    [data-rechnungen-mobile-only] {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box;
    }

    [data-rechnungen-invoices-table] {
        display: block;
        width: 100%;
        white-space: normal;
    }

    [data-rechnungen-invoices-table] thead {
        display: none;
    }

    [data-rechnungen-invoices-table] tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        width: 100%;
        box-sizing: border-box;
    }

    [data-rechnungen-invoices-table] tr {
        display: block;
        width: 100%;
    }

    [data-rechnungen-table-card] ui-table-scroll-area {
        overflow: visible;
        display: block;
        width: 100%;
    }

    [data-rechnungen-table-card] {
        --rechnungen-table-inset-x: 1rem;
        --rechnungen-invoice-meta-width: 5.25rem;
        --rechnungen-invoice-card-inset-x: 1rem;
        --rechnungen-invoice-card-icon-size: 2rem;
        --rechnungen-invoice-card-header-gap: 0.625rem;
        --rechnungen-invoice-card-main-offset: calc(
            var(--rechnungen-invoice-card-inset-x) +
            var(--rechnungen-invoice-card-icon-size) +
            var(--rechnungen-invoice-card-header-gap)
        );
    }

    [data-rechnungen-invoice-card] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--rechnungen-card-border);
        border-radius: var(--radius-xl, 0.75rem);
        background: var(--rechnungen-card-bg);
        overflow: hidden;
    }

    [data-rechnungen-invoice-card-header] {
        display: flex;
        align-items: flex-start;
        gap: var(--rechnungen-invoice-card-header-gap);
        width: 100%;
        box-sizing: border-box;
        padding: var(--rechnungen-invoice-card-inset-x);
        cursor: pointer;
        list-style: none;
    }

    [data-rechnungen-invoice-card-header]::-webkit-details-marker {
        display: none;
    }

    [data-rechnungen-invoice-card-icon] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--rechnungen-invoice-card-icon-size);
        height: var(--rechnungen-invoice-card-icon-size);
        flex-shrink: 0;
        border-radius: 9999px;
        background: color-mix(in oklab, var(--rechnungen-invoice-icon-bg) 50%, transparent);
        color: color-mix(in oklab, var(--rechnungen-invoice-icon-fg) 70%, var(--app-content-text-muted, #71717a));
    }

    [data-rechnungen-invoice-card-icon] svg {
        width: 1rem;
        height: 1rem;
        opacity: 0.9;
    }

    [data-rechnungen-invoice-card-main] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        min-width: 0;
        flex: 1;
    }

    [data-rechnungen-invoice-card-main] [data-rechnungen-invoice-id] {
        font-size: 0.875rem;
        line-height: 1.25;
    }

    [data-rechnungen-invoice-card-action] {
        display: block;
        margin-top: 0.375rem;
    }

    [data-rechnungen-invoice-card-action] [data-rechnungen-invoice-card-status],
    [data-rechnungen-invoice-card-action] [data-rechnungen-receipt-download] {
        display: inline-flex;
    }

    [data-rechnungen-invoice-card-meta] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 0.375rem;
        flex-shrink: 0;
        width: var(--rechnungen-invoice-meta-width, 5.25rem);
        margin-left: auto;
    }

    [data-rechnungen-invoice-amount] {
        display: block;
        width: 100%;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--app-content-body-strong, #18181b);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        text-align: end;
    }

    [data-rechnungen-invoice-chevron] {
        width: 1.25rem;
        height: 1.25rem;
        color: var(--app-content-text-subtle, #a1a1aa);
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform 0.15s ease;
    }

    [data-rechnungen-invoice-card][open] [data-rechnungen-invoice-chevron] {
        transform: rotate(180deg);
    }

    [data-rechnungen-invoice-card-body] {
        border-top: 1px solid var(--rechnungen-card-border);
    }

    [data-rechnungen-invoice-detail] {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem var(--rechnungen-invoice-card-inset-x);
        padding-left: var(--rechnungen-invoice-card-main-offset);
        border-bottom: 1px solid var(--rechnungen-card-border);
    }

    [data-rechnungen-invoice-detail]:last-child {
        border-bottom: none;
    }

    [data-rechnungen-invoice-detail-content] {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        min-width: 0;
        flex: 1;
    }

    [data-rechnungen-invoice-detail-label] {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--app-content-text-subtle, #a1a1aa);
    }

    [data-rechnungen-invoice-detail-value] {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--app-content-body-strong, #18181b);
    }

    [data-rechnungen-invoice-card-body] [data-rechnungen-invoice-payment] {
        min-width: 0;
    }

    [data-rechnungen-invoice-card-body] [data-rechnungen-invoice-payment] .font-medium {
        font-size: 0.875rem;
    }

    [data-rechnungen-pagination] {
        flex-wrap: wrap;
    }

    [data-rechnungen-pagination-summary] {
        font-size: 0.8125rem;
    }
}