/*
 * flohsale design: black with pink accent (colour taken from the brand logo).
 * Bootstrap 5.3 dark mode, primary colour and links set to the accent.
 */
:root,
[data-bs-theme="dark"] {
    --fs-rosa: #dc6e8a;
    --fs-rosa-hell: #e89aae;
    --fs-rosa-dunkel: #b45a72;
    --fs-rosa-rgb: 220, 110, 138;
    --fs-schwarz: #000;
    --fs-flaeche: #121212;
    --fs-flaeche-2: #1c1c1c;

    --bs-body-bg: var(--fs-schwarz);
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-body-color: #f2f2f2;
    --bs-secondary-bg: var(--fs-flaeche-2);
    --bs-tertiary-bg: var(--fs-flaeche);
    --bs-border-color: #2e2e2e;
    --bs-primary: var(--fs-rosa);
    --bs-primary-rgb: var(--fs-rosa-rgb);
    --bs-primary-text-emphasis: var(--fs-rosa-hell);
    --bs-primary-bg-subtle: #2a1219;
    --bs-primary-border-subtle: var(--fs-rosa-dunkel);
    --bs-link-color: var(--fs-rosa);
    --bs-link-color-rgb: var(--fs-rosa-rgb);
    --bs-link-hover-color: var(--fs-rosa-hell);
    --bs-link-hover-color-rgb: 232, 154, 174;
    --bs-focus-ring-color: rgba(var(--fs-rosa-rgb), .35);
}

.btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--fs-rosa);
    --bs-btn-border-color: var(--fs-rosa);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--fs-rosa-hell);
    --bs-btn-hover-border-color: var(--fs-rosa-hell);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--fs-rosa-dunkel);
    --bs-btn-active-border-color: var(--fs-rosa-dunkel);
    --bs-btn-disabled-bg: var(--fs-rosa-dunkel);
    --bs-btn-disabled-border-color: var(--fs-rosa-dunkel);
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--fs-rosa);
    --bs-btn-border-color: var(--fs-rosa);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--fs-rosa);
    --bs-btn-hover-border-color: var(--fs-rosa);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--fs-rosa-dunkel);
    --bs-btn-active-border-color: var(--fs-rosa-dunkel);
}

.text-bg-primary {
    color: #000 !important;
    background-color: var(--fs-rosa) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--fs-rosa);
    box-shadow: 0 0 0 .25rem rgba(var(--fs-rosa-rgb), .25);
}

.form-check-input:checked {
    background-color: var(--fs-rosa);
    border-color: var(--fs-rosa);
}

.page-link {
    --bs-pagination-active-bg: var(--fs-rosa);
    --bs-pagination-active-border-color: var(--fs-rosa);
    --bs-pagination-active-color: #000;
}

/* navigation bar: black with a pink line */
.navbar.bg-dark {
    background-color: var(--fs-schwarz) !important;
    border-bottom: 2px solid var(--fs-rosa);
}

.navbar-brand {
    color: var(--fs-rosa) !important;
    font-weight: 700;
}

.card,
.list-group-item,
.dropdown-menu,
.modal-content {
    --bs-card-bg: var(--fs-flaeche);
    --bs-list-group-bg: var(--fs-flaeche);
    --bs-dropdown-bg: var(--fs-flaeche);
    --bs-modal-bg: var(--fs-flaeche);
}

.table {
    --bs-table-bg: transparent;
}

::selection {
    background: var(--fs-rosa);
    color: #000;
}