:root {
    --sk-motion-fast: 0.18s;
    --sk-motion-base: 0.22s;
    --sk-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sk-card-shadow-light: 0 14px 28px rgba(15, 23, 42, 0.05);
    --sk-card-shadow-light-hover: 0 18px 34px rgba(15, 23, 42, 0.08);
    --sk-card-shadow-dark: 0 18px 34px rgba(0, 0, 0, 0.32);
    --sk-card-shadow-dark-hover: 0 22px 40px rgba(0, 0, 0, 0.36);
}

body #layout-wrapper #page-topbar,
body #layout-wrapper .vertical-menu,
body #layout-wrapper .card,
body #layout-wrapper .dropdown-menu,
body #layout-wrapper .modal-content,
body #layout-wrapper .right-bar,
body #layout-wrapper .btn,
body #layout-wrapper .header-item,
body #layout-wrapper .app-search .form-control,
body #layout-wrapper .app-search .btn,
body #layout-wrapper .form-control,
body #layout-wrapper .form-select,
body #layout-wrapper #sidebar-menu ul li a,
body #layout-wrapper .notification-item,
body #layout-wrapper .dropdown-icon-item {
    transition:
        background-color var(--sk-motion-fast) var(--sk-motion-ease),
        border-color var(--sk-motion-fast) var(--sk-motion-ease),
        color var(--sk-motion-fast) var(--sk-motion-ease),
        box-shadow var(--sk-motion-base) var(--sk-motion-ease),
        transform var(--sk-motion-base) var(--sk-motion-ease);
}

body #layout-wrapper .vertical-menu {
    transition:
        width 0.26s var(--sk-motion-ease),
        background-color var(--sk-motion-fast) var(--sk-motion-ease),
        border-color var(--sk-motion-fast) var(--sk-motion-ease),
        box-shadow var(--sk-motion-base) var(--sk-motion-ease);
}

body:not([data-layout-mode="dark"]) #layout-wrapper .card,
body:not([data-layout-mode="dark"]) #layout-wrapper .dropdown-menu,
body:not([data-layout-mode="dark"]) #layout-wrapper .modal-content,
body:not([data-layout-mode="dark"]) #layout-wrapper .right-bar {
    box-shadow: var(--sk-card-shadow-light);
}

body[data-layout-mode="dark"] #layout-wrapper .card,
body[data-layout-mode="dark"] #layout-wrapper .dropdown-menu,
body[data-layout-mode="dark"] #layout-wrapper .modal-content,
body[data-layout-mode="dark"] #layout-wrapper .right-bar {
    box-shadow: var(--sk-card-shadow-dark);
}

@media (hover: hover) and (pointer: fine) {
    body #layout-wrapper .card:hover {
        transform: translateY(-2px);
    }

    body:not([data-layout-mode="dark"]) #layout-wrapper .card:hover {
        box-shadow: var(--sk-card-shadow-light-hover);
    }

    body[data-layout-mode="dark"] #layout-wrapper .card:hover {
        box-shadow: var(--sk-card-shadow-dark-hover);
    }

    body[data-sidebar-size="sm"] .vertical-menu {
        overflow: visible;
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a {
        overflow: hidden;
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a span {
        display: inline-block !important;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        transform: translateX(-6px);
        transition:
            max-width 0.24s var(--sk-motion-ease),
            opacity 0.16s ease,
            transform 0.24s var(--sk-motion-ease);
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu .menu-title,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu .sidebar-alert {
        display: block !important;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-4px);
        transition:
            max-height 0.22s var(--sk-motion-ease),
            opacity 0.16s ease,
            transform 0.22s var(--sk-motion-ease);
    }

    body[data-sidebar-size="sm"] .vertical-menu:hover {
        width: 250px !important;
    }

    body[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu .menu-title,
    body[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu .sidebar-alert {
        max-height: 48px;
        opacity: 1;
        transform: translateY(0);
    }

    body[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu > ul > li > a {
        width: auto !important;
        margin: 4px 12px !important;
        padding: 0.72rem 1rem !important;
        justify-content: flex-start;
        gap: 12px;
    }

    body[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu > ul > li > a span {
        max-width: 160px;
        opacity: 1;
        padding-left: 0 !important;
        transform: translateX(0);
    }

    body[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu > ul > li > a.has-arrow:after {
        display: block !important;
        margin-left: auto;
        margin-right: 0;
    }

    body[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu > ul > li:hover > a {
        width: auto !important;
    }

    body[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu > ul > li:hover > ul {
        display: block;
        position: static !important;
        left: auto !important;
        width: auto !important;
        margin: 0 12px 8px;
        padding: 6px 0 8px;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu > ul > li:hover > ul a {
        width: auto !important;
        padding: 8px 16px 8px 48px !important;
        box-shadow: none !important;
    }

    body #layout-wrapper #sidebar-menu ul li a:hover,
    body #layout-wrapper #sidebar-menu ul li.mm-active > a {
        transform: translateX(1px);
    }

    body #layout-wrapper .header-item:hover,
    body #layout-wrapper .btn:hover,
    body #layout-wrapper .notification-item:hover,
    body #layout-wrapper .dropdown-icon-item:hover {
        transform: translateY(-1px);
    }

    body:not([data-layout-mode="dark"])[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu > ul > li:hover > a {
        background-color: #ebe6ff !important;
        color: #5156be !important;
    }

    body:not([data-layout-mode="dark"])[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu > ul > li:hover > a i,
    body:not([data-layout-mode="dark"])[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu > ul > li:hover > a svg {
        color: #5156be !important;
        fill: rgba(81, 86, 190, 0.2) !important;
    }

    body:not([data-layout-mode="dark"])[data-sidebar-size="sm"] .vertical-menu:hover #sidebar-menu > ul > li:hover > ul a:hover {
        background: rgba(81, 86, 190, 0.08);
        color: #5156be !important;
        border-radius: 10px;
    }
}

body[data-layout-mode="dark"] #layout-wrapper .btn:hover,
body[data-layout-mode="dark"] #layout-wrapper .dropdown-item:hover,
body[data-layout-mode="dark"] #layout-wrapper .dropdown-icon-item:hover {
    filter: none;
}

@media (max-width: 991.98px) {
    body #layout-wrapper .card,
    body #layout-wrapper .dropdown-menu,
    body #layout-wrapper .modal-content,
    body #layout-wrapper .right-bar {
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    }

    body[data-layout-mode="dark"] .page-content::before {
        display: none;
    }

    body[data-layout-mode="dark"][data-topbar="dark"] #page-topbar,
    body[data-layout-mode="dark"][data-topbar="dark"] .navbar-header,
    body[data-layout-mode="dark"][data-sidebar="dark"] .vertical-menu,
    body[data-layout-mode="dark"][data-sidebar="dark"] .vertical-menu .navbar-brand-box,
    body[data-layout-mode="dark"][data-sidebar="dark"] #sidebar-menu,
    body[data-layout-mode="dark"][data-sidebar="dark"] .vertical-menu .simplebar-content-wrapper,
    body[data-layout-mode="dark"][data-sidebar="dark"] .vertical-menu .simplebar-content,
    body[data-layout-mode="dark"] .card,
    body[data-layout-mode="dark"] .dropdown-menu,
    body[data-layout-mode="dark"] .modal-content,
    body[data-layout-mode="dark"] .right-bar,
    body[data-layout-mode="dark"] .swal2-popup {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body #layout-wrapper .card:hover,
    body #layout-wrapper .btn:hover,
    body #layout-wrapper .header-item:hover,
    body #layout-wrapper #sidebar-menu ul li a:hover,
    body #layout-wrapper .notification-item:hover,
    body #layout-wrapper .dropdown-icon-item:hover {
        transform: none !important;
    }

    body #layout-wrapper #sidebar-menu ul li a {
        margin: 2px 10px;
    }

    body #layout-wrapper .page-content {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body #layout-wrapper #page-topbar,
    body #layout-wrapper .vertical-menu,
    body #layout-wrapper .card,
    body #layout-wrapper .dropdown-menu,
    body #layout-wrapper .modal-content,
    body #layout-wrapper .right-bar,
    body #layout-wrapper .btn,
    body #layout-wrapper .header-item,
    body #layout-wrapper .app-search .form-control,
    body #layout-wrapper .app-search .btn,
    body #layout-wrapper .form-control,
    body #layout-wrapper .form-select,
    body #layout-wrapper #sidebar-menu ul li a,
    body #layout-wrapper .notification-item,
    body #layout-wrapper .dropdown-icon-item {
        transition: none !important;
    }

    body #layout-wrapper .card:hover,
    body #layout-wrapper .btn:hover,
    body #layout-wrapper .header-item:hover,
    body #layout-wrapper #sidebar-menu ul li a:hover,
    body #layout-wrapper .notification-item:hover,
    body #layout-wrapper .dropdown-icon-item:hover {
        transform: none !important;
    }
}