/* =========================================================
   Bootstrap Breakpoints
   ---------------------------------------------------------
   xs:     0px
   sm:   576px
   md:   768px
   lg:   992px
   xl:  1200px
   xxl: 1400px
   ========================================================= */

.accent
{
    color: var(--rf-accent);
}

.bg-accent
{
    background-color: var(--rf-accent);
}

.border-accent
{
    border-color: var(--rf-accent);
}

.bg-accent-subtle
{
    background-color: rgba(var(--bs-primary-rgb), 0.16);
}

.border-accent-subtle
{
    border-color: rgba(var(--bs-primary-rgb), 0.16);
}

.complementary
{
    color: var(--rf-complementary);
}

.bg-complementary
{
    background-color: rgb(var(--rf-complementary-rgb));
}

.text-complementary
{
    color: rgb(var(--rf-complementary-rgb));
}

.border-complementary
{
    border-color: rgb(var(--rf-complementary-rgb));
}

.bg-complementary-subtle
{
    background-color: rgba(var(--rf-complementary-rgb), 0.16);
}

.border-complementary-subtle
{
    border-color: rgba(var(--rf-complementary-rgb), 0.16);
}

.text-bg-complementary
{
    color: #ffffff !important;
    background-color: RGBA(var(--rf-complementary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-gold
{
    background-color: var(--rf-gold);
}

.border-gold
{
    border-color: var(--rf-gold);
}

.border-bottom-gold
{
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--rf-gold) !important;
}

.bg-gold-subtle
{
    background-color: rgba(var(--rf-gold-rgb), 0.16);
}

.bg-surface-1
{
    background-color: var(--rf-surface-1-bg) !important;
}

html,
body
{
    min-height: 100%;
}

body
{
    margin: 0;
    display: flex;
    justify-content: center;
    background-color: var(--rf-app-outer-bg);
}

.fs-body
{
    font-size: var(--bs-body-font-size);
}

form
{
    margin-bottom: 24px;
}

.dropdown-menu form,
.delete-form
{
    margin: 0;
}

.dropdown-menu
{
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: rgba(var(--rf-accent-rgb), .10);
    --bs-dropdown-link-active-color: var(--bs-body-color);
    --bs-dropdown-link-active-bg: rgba(var(--rf-accent-rgb), .18);
}

.dropdown-item
{
    transition:
            color .12s ease,
            background-color .12s ease,
            box-shadow .12s ease;
}

.dropdown-item.active,
.dropdown-item:active
{
    font-weight: 600;
    box-shadow: inset .2rem 0 0 var(--rf-accent);
}

.dropdown-item:focus-visible
{
    outline: 2px solid rgba(var(--rf-accent-rgb), .6);
    outline-offset: -2px;
}


.ph,
.ph-light,
.ph-thin,
.ph-bold,
.ph-fill
{
    line-height: 1;
    vertical-align: middle;
}

.flash-message
{
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.flash-success
{
    background: var(--rf-flash-success-bg);
    border: 1px solid var(--rf-flash-success-border);
}

.flash-error
{
    background: var(--rf-flash-error-bg);
    border: 1px solid var(--rf-flash-error-border);
}

.min-w-0
{
    min-width: 0;
}

.form-control:focus,
.form-select:focus
{
    border-color: var(--rf-accent);
    box-shadow: 0 0 0 .25rem rgba(var(--rf-accent-rgb), .15);
}

.btn-xs
{
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.45rem;
    --bs-btn-font-size: 0.8rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.list-group-item-complementary
{
    --bs-list-group-color: var(--rf-complementary);
    --bs-list-group-action-color: var(--rf-complementary);
    --bs-list-group-bg: rgba(var(--rf-complementary-rgb), 0.04);
    --bs-list-group-border-color: rgba(var(--rf-complementary-rgb), 0.18);

    --bs-list-group-action-hover-color: var(--rf-complementary);
    --bs-list-group-action-hover-bg: rgba(var(--rf-complementary-rgb), 0.14);

    --bs-list-group-action-active-color: var(--rf-complementary);
    --bs-list-group-action-active-bg: rgba(var(--rf-complementary-rgb), 0.20);

    --bs-list-group-active-color: #ffffff;
    --bs-list-group-active-bg: var(--rf-complementary);
    --bs-list-group-active-border-color: var(--rf-complementary);
}

/* Bootstrap button height overrides */
.btn
{
    height: calc(1.5em + 0.75rem + 2px);
}

.btn-xs
{
    height: calc(1.5em + 0.3rem + 2px);
}

.btn-sm
{
    height: calc(1.5em + 0.5rem + 2px);
}

.btn-lg
{
    height: calc(1.5em + 1rem + 2px);
}

/* Link variants */

.user-link
{
    color: var(--rf-accent);
    text-decoration: none;
}

.ranking-link
{
    text-decoration: none;
}