/* Shield Health application-specific styling layered on top of Bootstrap 5. */

.preload {
    opacity: 0;
}

body.loaded .preload {
    opacity: 1;
    transition: opacity 180ms ease-in;
}

/*#region custom colors */
.bg-teal-dark {
    background-color: #006d75;
}

.bg-gray-light {
    background-color: #f2f2f2;
}
/*#endregion*/

/*#region btn-blue*/
.btn-blue {
    color: white !important;
    background-color: #08AAAE !important;
    border-color: #9499a3 !important;
}

    .btn-blue:hover {
        color: #fff;
        background-color: #0C747A;
        border-color: #0C747A;
    }

    .btn-blue:focus, .btn-blue.focus {
        box-shadow: 0 0 0 .2rem rgba(137,142,151,0.5)
    }

    .btn-blue.disabled, .btn-blue:disabled {
        color: #1C4748;
        background-color: #9499a3;
        border-color: #9499a3
    }

    .btn-blue:not(:disabled):not(.disabled):active, .btn-blue:not(:disabled):not(.disabled).active, .show > .btn-blue.dropdown-toggle {
        color: #fff;
        background-color: #797f8b;
        border-color: #727885
    }

        .btn-blue:not(:disabled):not(.disabled):active:focus, .btn-blue:not(:disabled):not(.disabled).active:focus, .show > .btn-blue.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(137,142,151,0.5)
        }
/*#endregion*/

.header {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    background: #fffdf4;
    border-bottom: 1px solid rgba(28, 71, 72, 0.08);
    box-shadow: 0 4px 12px rgba(28, 71, 72, 0.08);
    min-height: 5rem;
}

.header .branding {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11.25rem;
    transition: width 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
    background: #fffdf4;
    overflow: hidden;
}

.header .branding .logo {
    font-size: 1.55rem;
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
}

.header .branding .logo a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
}

.header .topbar {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.header .topbar .navbar-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header .notification-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shield-slate);
}

.header .notification-container .notification-icon {
    color: var(--shield-primary);
    font-size: 1.125rem;
}

.header .notification-container .dropdown-menu {
    --bs-dropdown-link-color: var(--shield-slate);
    --bs-dropdown-link-hover-bg: var(--shield-neutral-100);
    width: clamp(15rem, 15vw, 20rem);
    max-height: 22rem;
    overflow-y: auto;
    box-shadow: 0 14px 34px rgba(28, 71, 72, 0.15);
    border: 1px solid rgba(28, 71, 72, 0.08);
}

.header .notification-container .badge {
    font-size: 0.675rem;
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
}

.btn.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(28, 71, 72, 0.12);
    background-color: #fff;
    color: inherit;
    padding: 0;
}

.btn.icon-btn:hover,
.btn.icon-btn:focus {
    border-color: rgba(8, 170, 174, 0.4);
    background-color: rgba(8, 170, 174, 0.08);
    color: var(--shield-teal);
}

.main-content {
    padding: 1.5rem;
}

.main-content > .container-fluid {
    padding: 0;
}

.content-section {
    margin-bottom: 2rem;
}

#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0.35rem;
    background-color: rgba(8, 170, 174, 0.18);
    overflow: hidden;
    z-index: 2000;
    display: none;
}

#progress-bar .progress {
    height: 100%;
    width: 0%;
    background-image: linear-gradient(90deg, rgba(8, 170, 174, 0.85), rgba(239, 85, 63, 0.85));
    animation: progressAnimation 2s linear infinite;
}

@keyframes progressAnimation {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.fullpage-spinner {
    position: fixed;
    inset: 0;
    background-color: rgba(150, 147, 147, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.fullpage-spinner .spinner-border {
    width: 4rem;
    height: 4rem;
}

.badge-dot {
    position: relative;
    padding-right: 1.1rem;
}

.badge-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: currentColor;
}

.stats-card {
    border-radius: 0.75rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid rgba(28, 71, 72, 0.08);
    box-shadow: 0 20px 40px rgba(28, 71, 72, 0.08);
}

.stats-card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background-color: rgba(8, 170, 174, 0.12);
    color: var(--shield-teal);
}

.stats-card .value {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.table-sticky-header thead th {
    position: sticky;
    top: 0;
    background: #f6fcfc;
    box-shadow: inset 0 -1px 0 rgba(28, 71, 72, 0.1);
    z-index: 2;
}

@media (max-width: 991.98px) {
    .header {
        flex-wrap: wrap;
    }

        .header .branding {
            width: 100%;
            justify-content: flex-start;
            padding-inline: 1.5rem;
            border-bottom: 1px solid rgba(28, 71, 72, 0.08);
        }

            .header .branding .logo {
                font-size: 1.25rem;
            }

        .header .topbar {
            flex-wrap: wrap;
            padding: 1rem;
        }

    .main-content {
        padding: 1rem;
    }

    .dropdown-toggle::after {
        border-top: 0.35em solid currentColor;
        border-right: 0.35em solid transparent;
        border-left: 0.35em solid transparent;
        opacity: 0.65;
        transition: opacity 120ms ease-in-out;
    }

    .dropdown-toggle:hover::after,
    .dropdown-toggle:focus-visible::after {
        opacity: 1;
    }

    .dropdown-menu {
        background-color: #ffffff;
        border: 1px solid rgba(28, 71, 72, 0.12);
        box-shadow: 0 14px 34px rgba(28, 71, 72, 0.12);
    }

        .dropdown-menu .dropdown-item {
            color: var(--shield-slate);
        }

            .dropdown-menu .dropdown-item:hover,
            .dropdown-menu .dropdown-item:focus {
                background-color: var(--shield-neutral-100);
                color: var(--shield-slate);
            }
}

/*#region toggles */
    .form-check-input {
        width: 1.5em;
        height: 1.25em;
    }

        /* Checked state */
        .form-check-input:checked {
            background-color: var(--shield-primary);
            border-color: var(--shield-primary);
        }

        /* Focused & checked */
        .form-check-input:checked:focus,
        .form-check-input:checked:focus-visible {
            box-shadow: 0 0 0 0.25rem rgba(239, 85, 63, 0.25);
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23f59386'/></svg>");
        }

        /* Focused but unchecked (OFF) */
        .form-check-input:not(:checked):focus,
        .form-check-input:not(:checked):focus-visible {
            background-color: #ffffff;
            border-color: #adb5bd;
            box-shadow: 0 0 0 0.25rem rgba(239, 85, 63, 0.25);
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23f59386'/></svg>");
        }

    .form-switch {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23ffffff'/></svg>");
    }
/*#endregion*/