/**
 * Kundenportal-Styles – EIGENSTÄNDIG
 * Alle Regeln sind auf .portal / .portal-sidebar beschränkt.
 * Beeinflusst die Blog-Formatierung NICHT.
 * Verwendet Theme-Farben aus blog_settings (--color-primary, --color-secondary etc.)
 */

/* =============================================================================
   BUTTONS – Portal-eigene Button-Formatierung (überschreibt Blog-Styles)
   ============================================================================= */

/* Basis: sichtbarer Button (border wird für outline-Varianten benötigt) */
.portal .btn,
.portal-sidebar .btn {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.portal .btn-sm,
.portal-sidebar .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Primary – gefüllt */
.portal .btn-primary,
.portal-sidebar .btn-primary {
    background-color: var(--color-primary, #0d6efd);
    border: 1px solid var(--color-primary, #0d6efd);
    color: #fff;
}

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

/* Outline Primary */
.portal .btn-outline-primary,
.portal-sidebar .btn-outline-primary {
    background-color: transparent;
    border: 1px solid var(--color-primary, #0d6efd);
    color: var(--color-primary, #0d6efd);
}

.portal .btn-outline-primary:hover,
.portal-sidebar .btn-outline-primary:hover {
    background-color: var(--color-primary, #0d6efd);
    border-color: var(--color-primary, #0d6efd);
    color: #fff;
}

/* Secondary – gefüllt */
.portal .btn-secondary,
.portal-sidebar .btn-secondary {
    background-color: var(--color-secondary, #6c757d);
    border: 1px solid 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;
}

/* Outline Secondary */
.portal .btn-outline-secondary,
.portal-sidebar .btn-outline-secondary {
    background-color: transparent;
    border: 1px solid 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;
}

/* Danger – gefüllt (z.B. Abmelden) */
.portal .btn-danger,
.portal-sidebar .btn-danger {
    background-color: var(--color-danger, #dc3545);
    border: 1px solid var(--color-danger, #dc3545);
    color: #fff;
}

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

/* Outline Danger */
.portal .btn-outline-danger,
.portal-sidebar .btn-outline-danger {
    background-color: transparent;
    border: 1px solid var(--color-danger, #dc3545);
    color: var(--color-danger, #dc3545);
}

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

/* =============================================================================
   ALERTS – nur innerhalb .portal
   ============================================================================= */
.portal .alert-primary,
.portal .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);
}

/* 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;
}