/**
 * Kundenportal-Styles
 * Verwendet dieselben Farben und Klassen wie der Shop (--color-primary, --color-secondary)
 * Alerts und Buttons nutzen die Theme-Farben aus blog_settings
 */

/* Alerts – Theme-Farben wie Shop */
.portal .alert-primary,
.alert.alert-primary {
    background-color: color-mix(in srgb, var(--color-primary, #007bff) 12%, white);
    border-color: var(--color-primary, #007bff);
    color: color-mix(in srgb, var(--color-primary, #007bff) 85%, black);
}

.portal .alert-info,
.portal .alert.alert-info {
    background-color: color-mix(in srgb, var(--color-primary, #007bff) 10%, white);
    border-color: var(--color-primary, #007bff);
    color: color-mix(in srgb, var(--color-primary, #007bff) 80%, black);
}

.portal .alert-warning,
.portal .alert.alert-warning {
    background-color: color-mix(in srgb, var(--color-warning, #ffc107) 20%, white);
    border-color: var(--color-warning, #ffc107);
}

.portal .alert-secondary,
.portal .alert.alert-secondary {
    background-color: color-mix(in srgb, var(--color-secondary, #6c757d) 12%, white);
    border-color: var(--color-secondary, #6c757d);
    color: color-mix(in srgb, var(--color-secondary, #6c757d) 85%, black);
}

/* Buttons – Theme-Farben wie Shop/Termine */
.portal .btn-secondary,
.portal-sidebar .btn-secondary {
    background-color: var(--color-secondary, #6c757d);
    border-color: var(--color-secondary, #6c757d);
    color: #fff;
}

.portal .btn-secondary:hover,
.portal-sidebar .btn-secondary:hover {
    background-color: color-mix(in srgb, var(--color-secondary, #6c757d) 85%, black);
    border-color: color-mix(in srgb, var(--color-secondary, #6c757d) 85%, black);
    color: #fff;
}

.portal .btn-outline-secondary,
.portal-sidebar .btn-outline-secondary {
    border-color: var(--color-secondary, #6c757d);
    color: var(--color-secondary, #6c757d);
}

.portal .btn-outline-secondary:hover,
.portal-sidebar .btn-outline-secondary:hover {
    background-color: var(--color-secondary, #6c757d);
    border-color: var(--color-secondary, #6c757d);
    color: #fff;
}

/* Card-Header – wie Shop */
.portal .card-header.bg-light {
    background-color: var(--color-sidebar-bg, #f8f9fa) !important;
    border-bottom-color: var(--color-border, #dee2e6);
}

/* Portal-Sidebar */
.portal-sidebar-card .portal-sidebar-link {
    color: var(--color-text, #333);
    transition: color 0.2s ease;
}

.portal-sidebar-card .portal-sidebar-link:hover {
    color: var(--color-primary, #007bff);
}

.portal-sidebar-card .nav-link.active {
    color: var(--color-primary, #007bff);
    font-weight: 600;
}

/* Sticky-Sidebar: Abstand beim Scrollen */
.portal-sidebar-card.sticky-top {
    top: 1rem;
}