/**
 * Стили из Heroic-CMS (heroic-cms.info) — базовая палитра и оформление панели
 */

/* Палитра Heroic :root */
:root {
    --primary: 120, 67, 233;
    --secondary: 236, 65, 118;
    --body: 27, 37, 59;
    --dark-DEFAULT: 30, 31, 67;
    --dark-50: 83, 103, 132;
    --dark-100: 74, 90, 121;
    --dark-200: 65, 81, 114;
    --dark-300: 53, 69, 103;
    --dark-400: 48, 61, 93;
    --dark-500: 41, 53, 82;
    --dark-600: 40, 51, 78;
    --dark-700: 39, 45, 69;
    --dark-800: 27, 37, 59;
    --dark-900: 15, 23, 42;
    --success-bg: 0, 170, 0;
    --success-text: 255, 255, 255;
    --warning-bg: 255, 220, 42;
    --warning-text: 139, 116, 0;
    --error: 224, 45, 45;
    --error-bg: 224, 45, 45;
    --error-text: 255, 255, 255;
    --info-bg: 0, 121, 255;
    --info-text: 255, 255, 255;
}

:root.dark {
    --body: 27, 37, 59;
    --success-bg: 17, 157, 17;
    --success-text: 178, 255, 178;
    --warning-bg: 225, 169, 0;
    --warning-text: 255, 255, 199;
    --error: 185, 28, 28;
    --error-bg: 190, 10, 10;
    --error-text: 255, 197, 197;
    --info-bg: 38, 93, 205;
    --info-text: 179, 220, 255;
}

/* Heroic: кнопки — блик при наведении */
.btn {
    border-radius: 2px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            120deg,
            transparent,
            rgba(146, 148, 248, 0.17),
            transparent
    );
    transition: all 650ms;
}

.btn:hover:before {
    left: 100%;
}

a {
    transition-duration: 0s;
}

.layout-menu .menu {
    gap: 3px !important;
    margin-top: 10px;
}

@media (max-width: 1280px) {
    .menu-inner-link .badge,
    .menu-heading-logo > a .custom_logo {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .menu-heading-logo > a .custom_logo {
        display: block !important;
    }
}

:is(.dark .menu .menu-inner-link) {
    box-shadow: 0 0 4px -3px;
}

.layout-menu .menu {
    gap: 7px !important;
}

.dark .box {
    /* background: linear-gradient(135deg, rgba(48, 61, 94, 0.5), rgba(17, 30, 48, 0.5)); */
	background: linear-gradient(135deg, #2e3b57, rgb(17 30 48));
	background: linear-gradient(135deg, #2e3b57, #2e3b57);
	background: linear-gradient(135deg, #2e3b5799, #2e3b5791);
	/* margin-bottom: 50px; */
}

.dark .menu-inner-item._is-active .menu-inner-text,
.dark .menu-inner-item._is-active .menu-inner-link svg,
.dark .menu-inner-item._is-active .menu-inner-button svg {
    color: #fff;
    transform: translateX(-2px);
}

.menu-inner-item._is-active > .menu-inner-link::before,
.menu-inner-item._is-active > .menu-inner-link,
.menu-inner-item._is-active > .menu-inner-button {
    background: #ffffff !important;
}

.menu-inner-item._is-active .menu-inner-link,
.menu-inner-item._is-active .menu-inner-button {
    color: #000;
}

.dark .menu-inner-item._is-active > .menu-inner-link::before,
.dark .menu-inner-item._is-active > .menu-inner-link,
.dark .menu-inner-item._is-active > .menu-inner-button {
    background-color: rgba(var(--dark-300), var(--tw-bg-opacity, 1)) !important;
}

._is-minimized .menu.menu-inner-link {
    display: flex;
    justify-content: center;
}

@media (min-width: 1024px) {
    .menu-inner-link {
        display: flex;
        justify-content: center;
    }
}

.menu-inner-link,
.menu-inner-button {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
}

.menu-inner-link::before,
.menu-inner-button::before {
    content: "";
    position: absolute;
    left: -100%;
    bottom: 0;
    width: 200%;
    height: 120%;
    background: linear-gradient(135deg, #ffffff17, #1f345463);
    transition: left 0.5s ease;
    z-index: 0;
}

.dark .menu-inner-link::before,
.dark .menu-inner-button::before {
    background: linear-gradient(135deg, #303d5e, #111e30);
}

.dark .btn {
    background: linear-gradient(135deg, #303d5e, #111e30);
	border-radius: 5px;
	/* background: linear-gradient(135deg, #384b6d, #2b3c59); */
	transition: color 0.15s 
	ease-in-out, background-color 0.15s 
	ease-in-out, border-color 0.15s 
	ease-in-out, box-shadow 0.15s 
	ease-in-out;
}
.dark .btn:hover {
	/* color: #37476e; */
    /* background-color: #eac485; */
    /* border-color: #eac485; */
}

.menu-inner-text,
.menu-inner-link svg,
.menu-inner-button svg {
    position: relative;
    z-index: 1;
    transition: color 0.3s ease, transform 0.3s ease;
}

.menu-inner-link:hover .menu-inner-text,
.menu-inner-button:hover .menu-inner-text,
.menu-inner-link:hover svg,
.menu-inner-button:hover svg {
    color: #dfdfdf !important;
    transform: translateX(-2px);
}

.menu-inner-item._is-active > .menu-inner-link:hover .menu-inner-text,
.menu-inner-button:hover .menu-inner-text,
.menu-inner-item._is-active > .menu-inner-link:hover svg,
.menu-inner-button:hover svg {
    color: inherit !important;
    transform: translateX(-2px);
}

.dark .menu-inner-link:hover .menu-inner-text,
.dark .menu-inner-button:hover .menu-inner-text,
.dark .menu-inner-link:hover svg,
.dark .menu-inner-button:hover svg {
    color: #fff;
    transform: translateX(-2px);
}

.menu-inner-link:hover,
.menu-inner-button:hover {
    background: transparent !important;
}

.menu-inner-link .badge > div > svg,
.menu-inner-link .badge .balance-user {
    color: #fff !important;
    z-index: 1;
}

._is-active .menu-inner-link .badge > div > svg,
._is-active .menu-inner-link .badge .balance-user {
    color: #000 !important;
}

.dark ._is-active .menu-inner-link .badge > div > svg,
.dark ._is-active .menu-inner-link .badge .balance-user {
    color: #fff !important;
}

.menu-inner-link .badge {
    background: transparent !important;
}

.fade-in-text {
    opacity: 0;
    transform: translateY(5px);
    animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading-btn--success {
    opacity: 1 !important;
}

@media (max-width: 1024px) {
    .layout-content {
        padding: 0;
    }
}