/* Card */
.po-card {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
}

/* Optional card sections */
.po-card-header {
    margin-bottom: var(--space-4);
}

.po-card-title {
    margin: 0;
    font-weight: 700;
}

.po-card-subtitle {
    margin: var(--space-2) 0 0 0;
    color: var(--muted);
}

/* Primary CTA Button (works with Bootstrap .btn) */
.btn-po-primary {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
    background-color: var(--primary);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    border-radius: 999px;
    padding: .4rem 1.0rem;
    box-shadow: var(--shadow-soft);
}

    .btn-po-primary:hover {
        color: #fff;
        filter: brightness(1.05);
    }

    .btn-po-primary:active {
        transform: translateY(1px);
    }

    .btn-po-primary:disabled,
    .btn-po-primary.disabled {
        opacity: .55;
        box-shadow: none;
        transform: none;
    }


/* PO Dark Table (passt in po-card) */
.po-table {
    /* Hintergrund der Zellen */
    --bs-table-bg: transparent;
    /* Textfarbe */
    --bs-table-color: var(--text);
    /* Linien */
    --bs-table-border-color: var(--border);
    /* Hover / Stripe (optional) */
    --bs-table-hover-bg: rgba(255,255,255,.05);
    --bs-table-striped-bg: rgba(255,255,255,.03);
}

    /* Header optisch absetzen */
    .po-table thead th {
        background: rgba(255,255,255,.04);
        color: var(--text);
        border-bottom-color: var(--border);
    }

/* Wenn du Streifen willst, ergänze in HTML: class="table table-striped ..." */



/* Group container */
.po-sidenav-group {
    margin-bottom: .25rem;
}

/* Clickable group header */
.po-sidenav-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: transparent;
    border: 0;
    padding: .65rem .75rem;
    border-radius: 5px;
    color: inherit;
    text-align: left;
}

    .po-sidenav-group-toggle:hover {
        background: rgba(255,255,255,.06);
    }

/* Title + caret */
.po-sidenav-group-title {
    flex: 1;
    font-weight: 600;
}

.po-sidenav-caret {
    transition: transform .15s ease;
    opacity: .8;
}

/* rotate caret when expanded */
.po-sidenav-group-toggle[aria-expanded="true"] .po-sidenav-caret {
    transform: rotate(180deg);
}

/* Sub-items indentation */
.po-sidenav-sub {
    padding: .15rem 0 .35rem 2.25rem;
}

    .po-sidenav-sub .po-sidenav-item {
        padding: .5rem .75rem;
        border-radius: 5px;
        display: block;
    }

        /* Optional: make sub-items slightly softer */
        .po-sidenav-sub .po-sidenav-item:not(.is-active) {
            opacity: .9;
        }