@import 'bootstrap/dist/css/bootstrap.min.css';

:root {
    --hms-body-bg: #f6f8fb;
    --hms-border-color: #d9e2ec;
}

body {
    background: var(--hms-body-bg);
}

.hms-shell {
    min-height: 100vh;
}

.hms-sidebar {
    display: none;
}

.hms-main {
    min-height: 100vh;
}

.hms-nav-link {
    color: rgba(255, 255, 255, 0.72);
    display: block;
    border-radius: 0.375rem;
    padding: 0.625rem 0.75rem;
    text-decoration: none;
}

.hms-nav-link:hover,
.hms-nav-link.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.hms-nav-link.disabled {
    color: rgba(255, 255, 255, 0.36);
    pointer-events: none;
}

@media (min-width: 992px) {
    .hms-shell {
        display: grid;
        grid-template-columns: 280px 1fr;
    }

    .hms-sidebar {
        display: block;
        min-height: 100vh;
        position: sticky;
        top: 0;
    }
}