:root,
[data-bs-theme="light"] {
    --nutri-font-sans: "Montserrat", Arial, Helvetica, sans-serif;
    --nutri-font-script: "Burgues Script", "BurguesScript", "Burgues Script Regular", var(--nutri-font-sans);
    --bs-font-sans-serif: var(--nutri-font-sans);
    --bs-body-font-family: var(--nutri-font-sans);
    --nutri-button-bg: #5aaa95;
    --nutri-button-bg-active: #418b76;
    --nutri-button-light-bg: #dff3ed;
    --nutri-sidebar-secondary-bg: #e4cce5;
    --nutri-sidebar-secondary-text: #4a304f;
    --nutri-sidebar-secondary-muted: #5b3f62;
    --nutri-sidebar-secondary-active-bg: rgba(255, 255, 255, 0.26);
    --bs-primary: #c8a2c8;
    --bs-primary-active: #b284be;
    --bs-primary-light: #e4cce5;
    --bs-primary-inverse: #ffffff;
    --bs-primary-rgb: 200, 162, 200;
    --bs-primary-active-rgb: 178, 132, 190;
    --bs-primary-clarity: rgba(200, 162, 200, 0.2);
    --bs-text-primary: #b284be;
    --bs-secondary: #b284be;
    --bs-secondary-active: #9f70aa;
    --bs-secondary-light: #e4cce5;
    --bs-secondary-inverse: #ffffff;
    --bs-secondary-rgb: 178, 132, 190;
    --bs-text-secondary: #b284be;
    --bs-success: #b284be;
    --bs-success-active: #9f70aa;
    --bs-success-light: #e4cce5;
    --bs-success-inverse: #ffffff;
    --bs-success-rgb: 178, 132, 190;
    --bs-success-active-rgb: 159, 112, 170;
    --bs-success-clarity: rgba(178, 132, 190, 0.2);
    --bs-success-text-emphasis: #7d5487;
    --bs-success-bg-subtle: #f6edf6;
    --bs-success-border-subtle: #e4cce5;
    --bs-text-success: #b284be;
    --bs-info-inverse: #ffffff;
    --bs-warning-inverse: #ffffff;
    --bs-danger-inverse: #ffffff;
    --bs-dark: #060808;
    --bs-dark-active: #111515;
    --bs-dark-inverse: #ffffff;
    --bs-body-bg: #fcfafc;
    --bs-app-header-base-bg-color: #c8a2c8;
    --bs-app-sidebar-base-bg-color: #c8a2c8;
    --bs-app-sidebar-primary-base-bg-color: #b284be;
    --bs-app-sidebar-secondary-base-bg-color: var(--nutri-sidebar-secondary-bg);
}

[data-bs-theme="dark"] {
    --nutri-font-sans: "Montserrat", Arial, Helvetica, sans-serif;
    --nutri-font-script: "Burgues Script", "BurguesScript", "Burgues Script Regular", var(--nutri-font-sans);
    --bs-font-sans-serif: var(--nutri-font-sans);
    --bs-body-font-family: var(--nutri-font-sans);
    --nutri-button-bg: #5aaa95;
    --nutri-button-bg-active: #418b76;
    --nutri-button-light-bg: #1e3e36;
    --nutri-sidebar-secondary-bg: #e4cce5;
    --nutri-sidebar-secondary-text: #4a304f;
    --nutri-sidebar-secondary-muted: #5b3f62;
    --nutri-sidebar-secondary-active-bg: rgba(255, 255, 255, 0.26);
    --bs-primary: #c8a2c8;
    --bs-primary-active: #e4cce5;
    --bs-primary-light: #3b263d;
    --bs-primary-inverse: #ffffff;
    --bs-primary-rgb: 200, 162, 200;
    --bs-primary-active-rgb: 228, 204, 229;
    --bs-primary-clarity: rgba(200, 162, 200, 0.2);
    --bs-text-primary: #c8a2c8;
    --bs-secondary: #b284be;
    --bs-secondary-active: #c8a2c8;
    --bs-secondary-light: #3b263d;
    --bs-secondary-inverse: #ffffff;
    --bs-secondary-rgb: 178, 132, 190;
    --bs-text-secondary: #c8a2c8;
    --bs-success: #c8a2c8;
    --bs-success-active: #e4cce5;
    --bs-success-light: #3b263d;
    --bs-success-inverse: #ffffff;
    --bs-success-rgb: 200, 162, 200;
    --bs-success-active-rgb: 228, 204, 229;
    --bs-success-clarity: rgba(200, 162, 200, 0.2);
    --bs-success-text-emphasis: #e4cce5;
    --bs-success-bg-subtle: #3b263d;
    --bs-success-border-subtle: #5b3f62;
    --bs-text-success: #c8a2c8;
    --bs-info-inverse: #ffffff;
    --bs-warning-inverse: #ffffff;
    --bs-danger-inverse: #ffffff;
    --bs-dark: #060808;
    --bs-dark-active: #111515;
    --bs-dark-inverse: #ffffff;
    --bs-body-bg: #060808;
    --bs-app-header-base-bg-color: #060808;
    --bs-app-sidebar-base-bg-color: #060808;
    --bs-app-sidebar-primary-base-bg-color: #060808;
    --bs-app-sidebar-secondary-base-bg-color: var(--nutri-sidebar-secondary-bg);
}

:root,
[data-bs-theme="light"] {
    --nutri-badge-success: #17c653;
    --nutri-badge-success-light: #e8fff3;
    --nutri-badge-info: #1b84ff;
    --nutri-badge-info-light: #eef6ff;
    --nutri-badge-warning: #f6c000;
    --nutri-badge-warning-light: #fff8dd;
    --nutri-badge-danger: #f8285a;
    --nutri-badge-danger-light: #fff5f8;
    --nutri-badge-secondary: #4b5675;
    --nutri-badge-secondary-light: #f1f1f4;
    --nutri-badge-dark: #252f4a;
    --nutri-badge-dark-light: #f1f1f4;
}

[data-bs-theme="dark"] {
    --nutri-badge-success: #17c653;
    --nutri-badge-success-light: rgba(23, 198, 83, 0.16);
    --nutri-badge-info: #1b84ff;
    --nutri-badge-info-light: rgba(27, 132, 255, 0.16);
    --nutri-badge-warning: #f6c000;
    --nutri-badge-warning-light: rgba(246, 192, 0, 0.16);
    --nutri-badge-danger: #f8285a;
    --nutri-badge-danger-light: rgba(248, 40, 90, 0.16);
    --nutri-badge-secondary: #c4cada;
    --nutri-badge-secondary-light: rgba(241, 241, 244, 0.12);
    --nutri-badge-dark: #dbdfe9;
    --nutri-badge-dark-light: rgba(219, 223, 233, 0.12);
}

body {
    font-family: var(--nutri-font-sans);
    background-color: var(--bs-body-bg);
}

.badge.badge-light-success {
    background-color: var(--nutri-badge-success-light);
    color: var(--nutri-badge-success);
}

.badge.badge-light-info {
    background-color: var(--nutri-badge-info-light);
    color: var(--nutri-badge-info);
}

.badge.badge-light-warning {
    background-color: var(--nutri-badge-warning-light);
    color: var(--nutri-badge-warning);
}

.badge.badge-light-danger {
    background-color: var(--nutri-badge-danger-light);
    color: var(--nutri-badge-danger);
}

.badge.badge-light-secondary {
    background-color: var(--nutri-badge-secondary-light);
    color: var(--nutri-badge-secondary);
}

.badge.badge-light-dark {
    background-color: var(--nutri-badge-dark-light);
    color: var(--nutri-badge-dark);
}

.app-sidebar-secondary {
    background-color: var(--nutri-sidebar-secondary-bg);
}

.app-sidebar-secondary .text-gray-900,
.app-sidebar-secondary .text-muted,
.app-sidebar-secondary .text-gray-700 {
    color: var(--nutri-sidebar-secondary-muted) !important;
}

.app-sidebar-secondary .bg-light {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.page-heading,
.card-title h1,
.card-title h2,
.card-title h3,
.card-title h4,
.modal-title {
    color: var(--bs-primary-active) !important;
}

.menu-state-primary .menu-item .menu-link.active .menu-title,
.menu-state-primary .menu-item .menu-link.active .menu-icon i {
    color: var(--bs-primary-active);
}

.app-sidebar-primary .hover-scroll-y:hover,
.app-sidebar-secondary .hover-scroll-y:hover {
    scrollbar-color: var(--bs-primary-active) transparent;
}

.app-sidebar-primary .hover-scroll-y:hover::-webkit-scrollbar-thumb,
.app-sidebar-secondary .hover-scroll-y:hover::-webkit-scrollbar-thumb {
    background-color: var(--bs-primary-active);
}

.app-sidebar-primary .app-sidebar-menu .menu > .menu-item > .menu-link .menu-icon,
.app-sidebar-primary .app-sidebar-menu .menu > .menu-item > .menu-link .menu-icon .svg-icon,
.app-sidebar-primary .app-sidebar-menu .menu > .menu-item > .menu-link .menu-icon i {
    color: var(--bs-primary-light);
}

.nutri-sidebar-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
}

.nutri-sidebar-logo img {
    display: block;
    width: 50px;
    height: auto;
    max-height: 50px;
    object-fit: contain;
}

.nutri-sidebar-secondary-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 250px;
    box-sizing: border-box;
    transform: translateX(-8px);
}

.nutri-sidebar-secondary-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link .menu-title,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link .menu-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link .menu-icon .svg-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link .menu-icon i,
.app-sidebar-secondary .custom-link,
.app-sidebar-secondary .custom-link .svg-icon,
.app-sidebar-secondary .menu-section,
.app-sidebar-secondary .menu-heading,
.menu-sub-dropdown .menu-section {
    color: var(--nutri-sidebar-secondary-text);
}

.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link .menu-bullet .bullet,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link .menu-arrow:after {
    background-color: var(--nutri-sidebar-secondary-text);
}

.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here),
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.show > .menu-link,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.here > .menu-link,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link.active {
    background-color: var(--nutri-sidebar-secondary-active-bg);
    color: var(--nutri-sidebar-secondary-muted);
}

.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-title,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.show > .menu-link .menu-title,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.here > .menu-link .menu-title,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link.active .menu-title,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon i,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.show > .menu-link .menu-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.show > .menu-link .menu-icon .svg-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.show > .menu-link .menu-icon i,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.here > .menu-link .menu-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.here > .menu-link .menu-icon .svg-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.here > .menu-link .menu-icon i,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link.active .menu-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link.active .menu-icon .svg-icon,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link.active .menu-icon i {
    color: var(--nutri-sidebar-secondary-muted);
}

.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.show > .menu-link .menu-bullet .bullet,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.here > .menu-link .menu-bullet .bullet,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link.active .menu-bullet .bullet,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-arrow:after,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-arrow:after,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.show > .menu-link .menu-arrow:after,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item.here > .menu-link .menu-arrow:after,
.app-sidebar-secondary .app-sidebar-secondary-menu.menu .menu-item .menu-link.active .menu-arrow:after {
    background-color: var(--nutri-sidebar-secondary-muted);
}

.btn.btn-primary,
.btn.btn-success,
.btn.btn-info,
.btn.btn-warning,
.btn.btn-danger,
.btn.btn-dark {
    color: #ffffff;
}

.btn.btn-primary,
.btn.btn-success {
    border-color: var(--nutri-button-bg);
    background-color: var(--nutri-button-bg);
}

.btn.btn-primary i,
.btn.btn-primary .svg-icon,
.btn.btn-success i,
.btn.btn-success .svg-icon {
    color: #ffffff;
}

.btn-check:checked + .btn.btn-primary,
.btn-check:active + .btn.btn-primary,
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show,
.show > .btn.btn-primary,
.btn-check:checked + .btn.btn-success,
.btn-check:active + .btn.btn-success,
.btn.btn-success:hover:not(.btn-active),
.btn.btn-success:focus:not(.btn-active),
.btn.btn-success:active:not(.btn-active),
.btn.btn-success.active,
.btn.btn-success.show,
.show > .btn.btn-success {
    border-color: var(--nutri-button-bg-active);
    background-color: var(--nutri-button-bg-active) !important;
    color: #ffffff;
}

.btn.btn-light-primary,
.btn.btn-light-success {
    border-color: var(--nutri-button-light-bg);
    background-color: var(--nutri-button-light-bg);
    color: var(--nutri-button-bg);
}

.btn.btn-light-primary i,
.btn.btn-light-primary .svg-icon,
.btn.btn-light-success i,
.btn.btn-light-success .svg-icon {
    color: var(--nutri-button-bg);
}

.btn-check:checked + .btn.btn-light-primary,
.btn-check:active + .btn.btn-light-primary,
.btn.btn-light-primary:hover:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active),
.btn.btn-light-primary:active:not(.btn-active),
.btn.btn-light-primary.active,
.btn.btn-light-primary.show,
.show > .btn.btn-light-primary,
.btn-check:checked + .btn.btn-light-success,
.btn-check:active + .btn.btn-light-success,
.btn.btn-light-success:hover:not(.btn-active),
.btn.btn-light-success:focus:not(.btn-active),
.btn.btn-light-success:active:not(.btn-active),
.btn.btn-light-success.active,
.btn.btn-light-success.show,
.show > .btn.btn-light-success {
    border-color: var(--nutri-button-bg);
    background-color: var(--nutri-button-bg) !important;
    color: #ffffff;
}

.btn-check:checked + .btn.btn-light-primary i,
.btn-check:checked + .btn.btn-light-primary .svg-icon,
.btn-check:active + .btn.btn-light-primary i,
.btn-check:active + .btn.btn-light-primary .svg-icon,
.btn.btn-light-primary:hover:not(.btn-active) i,
.btn.btn-light-primary:hover:not(.btn-active) .svg-icon,
.btn.btn-light-primary:focus:not(.btn-active) i,
.btn.btn-light-primary:focus:not(.btn-active) .svg-icon,
.btn.btn-light-primary:active:not(.btn-active) i,
.btn.btn-light-primary:active:not(.btn-active) .svg-icon,
.btn.btn-light-primary.active i,
.btn.btn-light-primary.active .svg-icon,
.btn.btn-light-primary.show i,
.btn.btn-light-primary.show .svg-icon,
.show > .btn.btn-light-primary i,
.show > .btn.btn-light-primary .svg-icon,
.btn-check:checked + .btn.btn-light-success i,
.btn-check:checked + .btn.btn-light-success .svg-icon,
.btn-check:active + .btn.btn-light-success i,
.btn-check:active + .btn.btn-light-success .svg-icon,
.btn.btn-light-success:hover:not(.btn-active) i,
.btn.btn-light-success:hover:not(.btn-active) .svg-icon,
.btn.btn-light-success:focus:not(.btn-active) i,
.btn.btn-light-success:focus:not(.btn-active) .svg-icon,
.btn.btn-light-success:active:not(.btn-active) i,
.btn.btn-light-success:active:not(.btn-active) .svg-icon,
.btn.btn-light-success.active i,
.btn.btn-light-success.active .svg-icon,
.btn.btn-light-success.show i,
.btn.btn-light-success.show .svg-icon,
.show > .btn.btn-light-success i,
.show > .btn.btn-light-success .svg-icon {
    color: #ffffff;
}

.btn.btn-nutri-lilac {
    border-color: var(--bs-primary-active);
    background-color: var(--bs-primary-active);
    color: #ffffff;
}

.btn.btn-nutri-lilac i,
.btn.btn-nutri-lilac .svg-icon {
    color: #ffffff;
}

.btn.btn-nutri-lilac:hover,
.btn.btn-nutri-lilac:focus,
.btn.btn-nutri-lilac:active,
.btn.btn-nutri-lilac.active {
    border-color: #9f70aa;
    background-color: #9f70aa !important;
    color: #ffffff;
}

.nutri-action-hint {
    background-color: var(--bs-primary-light);
    border-color: var(--bs-primary);
    color: var(--bs-primary-active);
}

.nutri-action-hint i {
    color: var(--bs-primary-active);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active,
.btn.btn-secondary.active,
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-success.active,
.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info:active,
.btn.btn-info.active,
.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:active,
.btn.btn-warning.active,
.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:active,
.btn.btn-danger.active,
.btn.btn-dark:hover,
.btn.btn-dark:focus,
.btn.btn-dark:active,
.btn.btn-dark.active {
    color: #ffffff;
}

.btn.btn-light,
.btn.btn-muted,
.btn[class*="btn-light-"]:not(.btn-light-primary):not(.btn-light-success) {
    color: var(--bs-gray-900);
}

.nutri-hero {
    background: linear-gradient(135deg, #fcfafc 0%, #e4cce5 58%, #f6edf6 100%);
}

.nutri-login-logo {
    display: block;
    width: clamp(220px, 28vw, 340px);
    max-width: 78vw;
    height: auto;
}

.nutri-login-signature {
    font-family: var(--nutri-font-sans);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--nutri-sidebar-secondary-muted);
}

.nutri-plan-day {
    min-height: 100%;
}

.nutri-plan-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
}

.nutri-plan-tabs .nav-item {
    min-width: 0;
}

.nutri-plan-tabs .nav-link {
    width: 100%;
    min-height: 70px;
}

.nutri-plan-tabs .nav-link.active {
    background-color: var(--bs-primary-light);
    border-radius: 0.475rem 0.475rem 0 0;
}

.card-header.collapsible.cursor-pointer,
.card-header.collapsible.cursor-pointer * {
    cursor: pointer !important;
}

.nutri-plan-overview-button {
    pointer-events: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nutri-repeat-row {
    background-color: var(--bs-gray-100);
}

.nutri-unit-hint {
    min-height: 1.25rem;
}

.card-header.rotate:not(.collapsed) .nutri-plan-overview-button {
    background-color: var(--bs-primary);
    color: var(--bs-primary-inverse);
}

.card-header.rotate:not(.collapsed) .nutri-plan-overview-button i {
    color: var(--bs-primary-inverse);
}

.nutri-upload-thumb {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.nutri-table-thumb {
    width: 42px;
    height: 42px;
    object-fit: cover;
}

.nutri-recipe-ingredient-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(175px, 1fr) 78px 78px;
    gap: 0.75rem;
    align-items: start;
}

.nutri-recipe-ingredient-grid--actions {
    grid-template-columns: minmax(220px, 1.35fr) minmax(175px, 1fr) 78px 78px 100px;
}

.nutri-recipe-ingredient-grid .form-label {
    white-space: nowrap;
}

.nutri-recipe-ingredient-actions {
    display: flex;
    gap: 0.5rem;
}

.btn.btn-icon.nutri-recipe-ingredient-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 calc(1.5em + 1.55rem + 2px);
    width: calc(1.5em + 1.55rem + 2px);
    min-width: calc(1.5em + 1.55rem + 2px);
    height: calc(1.5em + 1.55rem + 2px);
    min-height: calc(1.5em + 1.55rem + 2px);
    padding: 0;
}

@media (max-width: 991.98px) {
    .nutri-recipe-ingredient-grid,
    .nutri-recipe-ingredient-grid--actions {
        grid-template-columns: minmax(220px, 1fr) minmax(175px, 1fr) 78px 78px;
    }

    .nutri-recipe-ingredient-actions-cell {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .nutri-recipe-ingredient-grid,
    .nutri-recipe-ingredient-grid--actions {
        grid-template-columns: 1fr;
    }

    .nutri-recipe-ingredient-actions-cell {
        grid-column: auto;
    }
}

.nutri-chat-photo {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-width: 180px;
}

.nutri-chat-photo--single {
    aspect-ratio: 4 / 3;
    max-width: 360px;
}

.nutri-notifications-menu-header {
    background: linear-gradient(115deg, #9f72ae 0%, #b284be 48%, #c8a2c8 100%);
}

[data-nutri-notifications-root] > .menu {
    border: 1px solid rgba(178, 132, 190, 0.18);
    box-shadow: 0 16px 42px rgba(87, 56, 95, 0.16);
    overflow: hidden;
}

[data-nutri-notifications-root] [data-nutri-notification-link] {
    transition: background-color 0.18s ease, transform 0.18s ease;
}

[data-nutri-notifications-root] [data-nutri-notification-link]:hover {
    background-color: rgba(200, 162, 200, 0.14);
    transform: translateX(2px);
}

.nutri-notification-body {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.nutri-notification-date {
    white-space: normal;
}

#kt_app_header [data-nutri-notifications-root] > a {
    color: #fff;
}

.nutri-diary-feed {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

.nutri-diary-card {
    overflow: hidden;
    scroll-margin-top: 120px;
}

.nutri-diary-avatar {
    letter-spacing: 0;
}

.nutri-diary-photo {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    object-fit: cover;
    background: var(--bs-gray-100);
    max-height: 520px;
}

.nutri-diary-like i,
.nutri-diary-like span {
    color: inherit;
}

.nutri-diary-like.is-liked i {
    color: var(--bs-danger);
}

.nutri-chart {
    min-height: 280px;
}

code {
    word-break: break-word;
}