main {
    margin-top: 1rem;
    margin-bottom: var(--bottom-nav-h);
}

:root { --bottom-nav-h: 64px; }

.dock {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    height: var(--bottom-nav-h);
    z-index: 1030;              /* over content; > header if needed */
    padding-bottom: env(safe-area-inset-bottom);
    /* background: your color; border-top: etc. */
}

.nav-pills .nav-link {
    min-height: 56px;
    align-content: center;
}

.nav-pills .nav-link.active {
    background-color: #001bd7;
}

.nav-link.active, .nav-pills .nav-link.active {
    background-color: aliceblue;
}

.fixed-bottom > .nav > .nav-item > a > span {
    font-size: 12px;
}

.hoverable {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform, box-shadow;
}

.hoverable:hover {
    transform: translateY(-3px) scale(1.02); /* smaller lift and scale */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
    z-index: 1;
}

.toast-container {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    z-index: 1050; /* above most content */
    pointer-events: none; /* so clicks outside the toast pass through */
    /* optional: add padding so it doesn't hug screen edges */
    padding: 0 1rem;
}
.toast-container > #flash > .toast {
    pointer-events: auto; /* allow interacting with the toast buttons */
}

.gradient-custom-2 {
    /* fallback for old browsers */
    background: #0b4edc;

    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, #0b4edc, #1e40af, #2563eb, #3b5fd9);

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, #0b4edc, #1e40af, #2563eb, #3b5fd9);
}

@media (min-width: 768px) {
    .gradient-form {
        height: 100vh !important;
    }
}
@media (min-width: 769px) {
    .gradient-custom-2 {
        border-top-right-radius: .3rem;
        border-bottom-right-radius: .3rem;
    }
}

.avatar-56 {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .avatar-56 {
        width: 100px;
        height: 100px;
    }
}

.list-group-item [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.list-group-item {
    border: 1px solid #dee2e6;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
}

/* Mobile: turn list items into cards */
@media (max-width: 767.98px) {
    .list-group-item {
        border: 1px solid #dee2e6 !important;
        border-radius: .75rem !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    }

    /* remove top border joining effect when stacked */
    .list-group-item + .list-group-item {
        border-top: 1px solid #dee2e6 !important;
    }
}

.shadow-2-strong-md {
    box-shadow: none !important;
}

/* md+ apply the real shadow */
@media (min-width: 768px) {
    .shadow-2-strong-md {
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15) !important; /* same as .shadow-2-strong */
    }
}

.form-floating > .ss-main {
    width: 100%;
    min-height: calc(3.4rem + var(--bs-border-width)*2);
    padding: 1.625rem .75rem .625rem .75rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-width);
    background-color: var(--bs-body-bg);
}

.form-floating > .form-select {
    min-height: calc(3.4rem + var(--bs-border-width)*2);
}

.form-floating > .is-valid, .ss-main {
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-image: initial;
}

/* Keep the label floated when using Slim Select */
.form-floating > .ss-main ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* Focus ring to match Bootstrap */
.form-floating > .ss-main:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.form-floating.disabled > .ss-main {
    background-color: var(--bs-secondary-bg);
}

.highlight-fnb {
    color: var(--bs-primary); /* Red highlight for "Food & Beverage" */
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}