/* MaterialPro theme shell. Shared UI components live in /assets/app/css/components.css. */

body {
    background: #eef5f9;
    color: #34495e;
}

.preloader {
    align-items: center;
    background: rgba(255, 255, 255, 0.82);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 2000;
}

.lds-ripple {
    height: 48px;
    position: relative;
    width: 48px;
}

.lds-ripple .lds-pos {
    animation: appRipple 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    border: 3px solid #26c6da;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
}

.lds-ripple .lds-pos:nth-child(2) {
    animation-delay: -0.6s;
}

@keyframes appRipple {
    0% {
        height: 0;
        left: 24px;
        opacity: 0;
        top: 24px;
        width: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        height: 48px;
        left: 0;
        opacity: 0;
        top: 0;
        width: 48px;
    }
}

#main-wrapper {
    min-height: 100vh;
    position: relative;
}

.topbar {
    background: #1e88e5;
    box-shadow: 0 2px 8px rgba(21, 54, 83, 0.12);
    left: 0;
    min-height: 67px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
}

.topbar .top-navbar {
    min-height: 67px;
    padding: 0;
}

.topbar .navbar-header {
    align-items: center;
    background: #1e88e5;
    display: flex;
    flex: 0 0 240px;
    min-height: 67px;
    padding: 0 18px;
    width: 240px;
}

.topbar .navbar-collapse {
    min-height: 67px;
    padding: 0 18px;
}

.topbar .nav-link,
.topbar .navbar-brand,
.topbar .topbartoggler,
.topbar .sidebartoggler,
.topbar .nav-toggler {
    color: #ffffff;
}

.topbar .navbar-nav {
    align-items: center;
}

.navbar-brand {
    align-items: center;
    display: inline-flex;
    margin: 0;
    min-width: 0;
}

.logo-icon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
}

.logo-icon img {
    max-height: 32px;
}

.left-sidebar {
    background: #ffffff;
    border-right: 1px solid #dde9f0;
    bottom: 0;
    box-shadow: 6px 0 18px rgba(22, 44, 65, 0.04);
    left: 0;
    position: fixed;
    top: 67px;
    transition: transform 0.2s ease, width 0.2s ease;
    width: 240px;
    z-index: 900;
}

.scroll-sidebar {
    height: 100%;
    overflow-y: auto;
}

.user-profile {
    background-size: cover !important;
    color: #ffffff;
    min-height: 172px;
    padding: 34px 24px 14px;
    text-align: center;
}

.profile-img {
    margin-bottom: 12px;
}

.profile-text .dropdown-menu {
    left: 16px;
    right: 16px;
}

.sidebar-nav {
    padding: 16px 14px;
}

#sidebarnav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#sidebarnav .sidebar-item {
    list-style: none;
    margin: 4px 0;
}

#sidebarnav .sidebar-link {
    align-items: center;
    border-radius: 6px;
    color: #8aa0af;
    display: flex;
    gap: 12px;
    min-height: 42px;
    padding: 10px 14px;
    transition: background 0.16s ease, color 0.16s ease;
}

#sidebarnav .sidebar-link:hover,
#sidebarnav .sidebar-link.active,
#sidebarnav .sidebar-item.selected > .sidebar-link {
    background: #26c6da;
    color: #ffffff;
}

#sidebarnav .sidebar-link > i {
    align-items: center;
    display: inline-flex;
    flex: 0 0 20px;
    font-size: 16px;
    justify-content: center;
    width: 20px;
}

#sidebarnav .first-level {
    list-style: none;
    margin: 0;
    padding: 0 0 0 28px;
}

#sidebarnav .first-level .sidebar-link {
    background: transparent;
    color: #8aa0af;
    font-size: 14px;
    min-height: 36px;
    padding: 8px 12px;
}

#sidebarnav .first-level .sidebar-link:hover,
#sidebarnav .first-level .sidebar-link.active,
#sidebarnav .first-level .sidebar-item.selected > .sidebar-link {
    color: #26c6da;
}

#sidebarnav .first-level .sidebar-link.active,
#sidebarnav .first-level .sidebar-item.selected > .sidebar-link {
    background: #26c6da;
    color: #ffffff;
}

.has-arrow::after {
    content: ">";
    font-size: 12px;
    margin-left: auto;
    transition: transform 0.16s ease;
}

.has-arrow[aria-expanded="true"]::after {
    transform: rotate(90deg);
}

.page-wrapper {
    margin-left: 240px;
    min-height: 100vh;
    padding-top: 67px;
    transition: margin-left 0.2s ease;
}

.footer {
    color: #8aa0af;
    font-size: 13px;
    padding: 14px 20px;
}

.mini-sidebar .left-sidebar {
    width: 72px;
}

.mini-sidebar .left-sidebar:hover {
    box-shadow: 8px 0 24px rgba(22, 44, 65, 0.12);
    width: 240px;
}

.mini-sidebar .page-wrapper {
    margin-left: 72px;
}

.mini-sidebar .app-logo-text,
.mini-sidebar #sidebarnav .hide-menu,
.mini-sidebar .user-profile .profile-text {
    display: none !important;
}

.mini-sidebar .left-sidebar:hover #sidebarnav .hide-menu,
.mini-sidebar .left-sidebar:hover .user-profile .profile-text {
    display: block !important;
}

.mini-sidebar .topbar .navbar-header {
    flex-basis: 72px;
    justify-content: center;
    width: 72px;
}

.mini-sidebar #sidebarnav .first-level {
    padding-left: 0;
}

.mini-sidebar .left-sidebar:hover #sidebarnav .first-level {
    padding-left: 28px;
}

.mini-sidebar #sidebarnav .sidebar-link {
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

.mini-sidebar .left-sidebar:hover #sidebarnav .sidebar-link {
    justify-content: flex-start;
    padding-left: 14px;
    padding-right: 14px;
}

.mini-sidebar .left-sidebar:hover #sidebarnav .first-level .sidebar-link {
    padding-left: 12px;
    padding-right: 12px;
}

.text-themecolor {
    color: #1e88e5;
}

.app-logo-text {
    align-items: center;
    color: #ffffff;
    display: inline-flex;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    min-height: 70px;
    padding-left: 8px;
    white-space: nowrap;
}

.app-topbar-label {
    color: #6c757d;
    font-size: 13px;
    font-weight: 600;
}

.app-language-menu .dropdown-item.active {
    background: #26c6da;
    color: #ffffff;
}

@keyframes appPageEnter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body.app-page-transition #main-wrapper,
body.app-page-transition .auth-wrapper,
body.app-page-transition .app-auth-language,
body.app-page-transition .app-popup-shell {
    opacity: 1;
}

body.app-page-transition.app-page-ready #main-wrapper,
body.app-page-transition.app-page-ready .auth-wrapper,
body.app-page-transition.app-page-ready .app-auth-language,
body.app-page-transition.app-page-ready .app-popup-shell {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    body.app-page-transition #main-wrapper,
    body.app-page-transition .auth-wrapper,
    body.app-page-transition .app-auth-language,
    body.app-page-transition .app-popup-shell {
        animation: none;
        opacity: 1;
    }
}

body.app-modal-scroll-locked #main-wrapper::after {
    display: none;
}

#sidebarnav .collapse.first-level {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease;
}

#sidebarnav .collapse.first-level.in {
    max-height: var(--sidebar-menu-height, 1600px);
    opacity: 1;
    transform: translateY(0);
}

#sidebarnav .collapse.first-level > .sidebar-item {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.22s ease 0.04s, transform 0.22s ease 0.04s;
}

#sidebarnav .collapse.first-level.in > .sidebar-item {
    opacity: 1;
    transform: translateY(0);
}

#sidebarnav .collapse.first-level .sidebar-link {
    align-items: center;
    display: flex;
    gap: 10px;
}

#sidebarnav .collapse.first-level .sidebar-link > i {
    display: inline-flex !important;
    flex: 0 0 20px;
    font-size: 16px;
    justify-content: center;
    line-height: 1;
    margin: 0;
    opacity: 1;
    width: 20px;
}

#sidebarnav .collapse.first-level .sidebar-link .hide-menu {
    flex: 1 1 auto;
    min-width: 0;
}

.page-wrapper > .container-fluid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    padding: 18px 20px 10px;
    width: auto !important;
}

.page-titles {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    margin-bottom: 0;
    padding: 14px 20px;
    width: auto !important;
}

.page-titles h3 {
    font-size: 20px;
}

.app-auth-language {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 20;
}

.auth-wrapper {
    min-height: 100vh;
}

@media (max-width: 767.98px) {
    .topbar .navbar-header {
        flex-basis: 100%;
        justify-content: space-between;
        width: 100%;
    }

    .topbar .navbar-collapse {
        background: #1e88e5;
        box-shadow: 0 12px 24px rgba(21, 54, 83, 0.14);
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .left-sidebar {
        transform: translateX(-100%);
    }

    #main-wrapper.show-sidebar .left-sidebar {
        transform: translateX(0);
    }

    .page-wrapper,
    .mini-sidebar .page-wrapper {
        margin-left: 0;
    }

    .app-logo-text {
        font-size: 16px;
        min-height: 60px;
    }

    .page-wrapper > .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
}