/**
 * Nucleus Page — стили для страницы nucleus.html
 * Учитывает ширину меню в развернутом и свернутом состоянии
 */

/* Предотвращаем горизонтальный скролл и скрываем вертикальный скроллбар */
html:has(body.nucleus-page),
html.nucleus-page {
    overflow-x: hidden !important;
    overflow-y: hidden !important; /* Убираем скролл на html */
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE и Edge */
}

html:has(body.nucleus-page)::-webkit-scrollbar,
html.nucleus-page::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
    width: 0 !important;
    height: 0 !important;
}

body.nucleus-page {
    overflow-x: hidden !important;
    overflow-y: hidden !important; /* Убираем скролл на body */
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    min-height: 100dvh;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE и Edge */
}

/* До снятия preloader-active base.css ставит .container { pointer-events: none } — не кликаются чипы над чатом и сам iframe. */
body.nucleus-page.preloader-active .container {
    pointer-events: auto !important;
}

/* Рядом с лоадером: .container height:100% получает опорную высоту */
body.nucleus-page .container {
    min-height: 100%;
    align-items: stretch;
}

/* Подразделы Nucleus в левом меню: визуально вложены под основной пункт. */
.nucleus-page .left-nav .nav-item.nav-item-subsection {
    padding-left: 28px;
    opacity: 0.88;
}

.nucleus-page .left-nav .nav-item.nav-item-subsection .nav-text {
    font-size: 13px;
}

body.nucleus-page::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
    width: 0 !important;
    height: 0 !important;
}

/* Main Content — занимает оставшееся пространство */
.nucleus-page .main-content {
    flex: 1;
    min-width: 0; /* Позволяет flex-элементу сжиматься */
    min-height: 0; /* flex-строка: иначе min-height:auto блокирует нормальный overflow-y */
    width: auto; /* Автоматическая ширина в flexbox */
    height: 100vh;
    overflow-x: hidden !important; /* Убираем горизонтальный скролл */
    overflow-y: auto;
    overscroll-behavior-y: contain; /* Вертикальный скролл страницы Nucleus только здесь, не на body/html */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative; /* Для правильного позиционирования скроллбара */
    padding-top: 0; /* Убираем верхний padding */
}

/*
 * Дашборд: не трогаем height/max-height у main — иначе два независимых порога прокрутки (main + вложенные).
 * Один скролл: базовый .main-content (100vh + overflow-y: auto).
 */
.nucleus-page .main-content:has(#nucleus-dashboard-container) {
    flex: 1;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    /* clip вместо hidden: без лишнего scrollport, вертикальное колесо стабильно доходит до этого скролла */
    overflow-x: clip !important;
}

/* Скрываем скроллбар для main-content, но оставляем функциональность прокрутки */
.nucleus-page .main-content {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE и Edge */
}

.nucleus-page .main-content::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.nucleus-page .main-content::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.nucleus-page .main-content::-webkit-scrollbar-thumb {
    display: none !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Универсальное правило: скрываем скроллбар для ВСЕХ элементов на странице nucleus */
body.nucleus-page *,
body.nucleus-page *::before,
body.nucleus-page *::after {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE и Edge */
}

body.nucleus-page *::-webkit-scrollbar,
body.nucleus-page *::before::-webkit-scrollbar,
body.nucleus-page *::after::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

body.nucleus-page *::-webkit-scrollbar-track,
body.nucleus-page *::before::-webkit-scrollbar-track,
body.nucleus-page *::after::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

body.nucleus-page *::-webkit-scrollbar-thumb,
body.nucleus-page *::before::-webkit-scrollbar-thumb,
body.nucleus-page *::after::-webkit-scrollbar-thumb {
    display: none !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Скрываем скроллбар для всех элементов на странице nucleus */
.nucleus-page * {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE и Edge */
}

.nucleus-page *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.nucleus-page *::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.nucleus-page *::-webkit-scrollbar-thumb {
    display: none !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Content Wrapper — центрирует контент */
.nucleus-page .content-wrapper {
    width: 100%;
    max-width: 1200px; /* Максимальная ширина контента */
    min-height: 100%;
    margin-top: 0;
    padding-top: 0; /* Убираем padding-top */
    padding-bottom: 0; /* Убираем нижний padding */
    padding-left: 48px; /* Увеличенный padding слева */
    padding-right: 48px; /* Увеличенный padding справа */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden !important; /* Полностью убираем горизонтальный скролл */
    overflow-y: visible; /* Не создаем скролл здесь, скролл на main-content */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0; /* Убираем нижний margin */
    position: relative; /* Для правильного позиционирования */
}

/* Дашборд Nucleus: сброс min-height:100% у общего .content-wrapper — иначе рост «пустого» холста и двойной скролл с main */
.nucleus-page .main-content > .content-wrapper:has(#nucleus-dashboard-container) {
    min-height: auto !important;
    height: auto !important;
    overflow-y: visible !important;
    flex: 0 1 auto;
}

/* Заголовок страницы - часть контента, не плавающий */
.nucleus-page-header {
    width: 100%;
    max-width: 100%;
    text-align: left; /* Выравнивание по левому краю */
    margin-top: 0; /* Убираем верхний margin */
    margin-bottom: var(--spacing-3xl);
    padding-top: 0; /* Убираем padding-top, чтобы заголовок был частью контента */
    padding-bottom: 0;
    box-sizing: border-box;
    position: relative; /* Обычное позиционирование, не fixed/absolute */
}

.nucleus-page-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.2;
    text-align: left; /* Выравнивание по левому краю */
}

.nucleus-page-description {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    color: rgba(255, 255, 255, 0.5); /* Серый текст */
    margin: 0;
    line-height: 1.6;
    max-width: 800px;
    text-align: left; /* Выравнивание по левому краю */
}

/* Calculator Container */
.nucleus-calculator-container {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
}

/* Financial Mirror Container */
#financial-mirror-container {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
}

/* Финансовое зеркало внутри контейнера */
#financial-mirror-container .financial-mirror {
    width: 100%;
    max-width: 100%;
    margin-top: 0; /* Используем margin вместо padding */
    padding-top: 0; /* Убираем padding-top */
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Добавляем gap между секциями Financial Mirror */
.nucleus-page #financial-mirror-container .financial-mirror-combined,
.nucleus-page #financial-mirror-container .financial-mirror.financial-mirror-combined {
    gap: var(--spacing-4xl) !important; /* Увеличен gap между основными секциями */
}

/* Увеличиваем отступы между секциями */
.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-section {
    margin-bottom: var(--spacing-3xl) !important; /* Увеличен отступ между секциями */
    padding-top: var(--spacing-2xl) !important;
    padding-bottom: var(--spacing-2xl) !important;
}

.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-section:first-of-type {
    padding-top: 0 !important;
}

.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Увеличиваем отступы для Income и Expenses блоков */
.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-income-expenses-row {
    margin-bottom: var(--spacing-3xl) !important; /* Увеличен отступ */
    margin-top: var(--spacing-2xl) !important; /* Добавлен верхний отступ */
}

.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-income-expenses-row:last-child {
    margin-bottom: 0 !important;
}

/* Увеличиваем отступы для разделителей */
.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-section-divider {
    margin: var(--spacing-4xl) 0 !important; /* Увеличен отступ для разделителей */
}

/* Увеличиваем gap между Income и Expenses внутри блока - переопределяем financial-mirror.css */
body.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-income-expenses-row .fm-income-expenses-content,
body.nucleus-page #financial-mirror-container .financial-mirror.financial-mirror-combined .fm-income-expenses-row .fm-income-expenses-content {
    gap: var(--spacing-4xl) !important; /* Увеличен gap между Income и Expenses */
}

/* Увеличиваем отступы между Income и Expenses внутри блока - переопределяем financial-mirror.css */
body.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-income-expenses-row .fm-income,
body.nucleus-page #financial-mirror-container .financial-mirror.financial-mirror-combined .fm-income-expenses-row .fm-income {
    margin-bottom: var(--spacing-3xl) !important; /* Большой отступ между Income и Expenses */
    padding-bottom: var(--spacing-3xl) !important; /* Увеличен padding-bottom - переопределяет var(--spacing-2xl) из financial-mirror.css */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; /* Сохраняем разделитель */
}

body.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-income-expenses-row .fm-expenses,
body.nucleus-page #financial-mirror-container .financial-mirror.financial-mirror-combined .fm-income-expenses-row .fm-expenses {
    margin-top: var(--spacing-3xl) !important; /* Большой отступ сверху для Expenses */
    padding-top: var(--spacing-3xl) !important; /* Увеличен padding-top - переопределяет var(--spacing-2xl) из financial-mirror.css */
}

/* Увеличиваем отступы для заголовков секций */
.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-section h2 {
    margin-bottom: var(--spacing-3xl) !important; /* Увеличен отступ под заголовком */
}

/* Стили для H1 заголовка в секции Income */
.nucleus-page #financial-mirror-container .fm-section.fm-income h1,
.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-section.fm-income h1 {
    margin: 0 0 var(--spacing-3xl) 0 !important;
    padding: 0 !important;
    font-size: var(--font-size-2xl) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-primary) !important;
}

/* Отступ сверху для блока Income */
.nucleus-page #financial-mirror-container .fm-section.fm-income,
.nucleus-page #financial-mirror-container .financial-mirror-combined .fm-section.fm-income {
    margin-top: 48px !important;
}


/* Убираем горизонтальный скролл у основных контейнеров и скрываем вертикальные скроллбары */
.nucleus-page #financial-mirror-container,
.nucleus-page #financial-mirror-container .financial-mirror,
.nucleus-page #financial-mirror-container .financial-mirror-combined,
.nucleus-page #financial-mirror-container .financial-mirror.financial-mirror-combined,
.nucleus-page #financial-mirror-container .fm-section,
.nucleus-page #financial-mirror-container .fm-income-expenses-row,
.nucleus-page #financial-mirror-container .fm-income-expenses-content,
.nucleus-page #financial-mirror-container .fm-income,
.nucleus-page #financial-mirror-container .fm-expenses {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE и Edge */
}

.nucleus-page #financial-mirror-container::-webkit-scrollbar,
.nucleus-page #financial-mirror-container .financial-mirror::-webkit-scrollbar,
.nucleus-page #financial-mirror-container .financial-mirror-combined::-webkit-scrollbar,
.nucleus-page #financial-mirror-container .financial-mirror.financial-mirror-combined::-webkit-scrollbar,
.nucleus-page #financial-mirror-container .fm-section::-webkit-scrollbar,
.nucleus-page #financial-mirror-container .fm-income-expenses-row::-webkit-scrollbar,
.nucleus-page #financial-mirror-container .fm-income-expenses-content::-webkit-scrollbar,
.nucleus-page #financial-mirror-container .fm-income::-webkit-scrollbar,
.nucleus-page #financial-mirror-container .fm-expenses::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

/* Убираем горизонтальный скролл только у контейнеров, не у всех элементов */
.nucleus-page #financial-mirror-container form,
.nucleus-page #financial-mirror-container .fm-form {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Категории расходов: стек — подпись, затем сумма + валюта */
.nucleus-page #financial-mirror-container .fm-expense-category-row.fm-expense-category-stack,
body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row.fm-expense-category-stack {
    margin-bottom: var(--spacing-lg) !important;
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: var(--spacing-sm) !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    min-width: 0 !important;
}

.nucleus-page #financial-mirror-container .fm-expense-fields-row,
body.nucleus-page #financial-mirror-container .fm-expense-fields-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.nucleus-page #financial-mirror-container .fm-expense-name-row .expense-category-name-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.nucleus-page #financial-mirror-container .fm-expense-category-row:last-child {
    margin-bottom: 0 !important;
}

/* Строка сумма + валюта */
.nucleus-page #financial-mirror-container .fm-expense-amount-row .expense-amount-input {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    max-width: none !important;
    width: auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}

/* Перекрываем стили из financial-mirror.css для currency wrapper в expense rows */
.nucleus-page #financial-mirror-container .fm-expense-amount-row .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container .fm-expense-amount-row .invoice-currency-wrapper {
    flex: 0 1 auto !important;
    min-width: 140px !important;
    max-width: 200px !important;
    width: auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 1 !important;
}

/* Currency select внутри expense category row */
.nucleus-page #financial-mirror-container .fm-expense-amount-row .invoice-currency-select {
    width: 100% !important;
    min-width: 140px !important;
    max-width: 160px !important;
}

/* Кнопка удаления категории - справа, но выровнена по центру */
.nucleus-page #financial-mirror-container .fm-expense-category-row .fm-btn-remove-expense-category {
    flex-shrink: 0 !important; /* Никогда не сжимается */
    flex-grow: 0 !important; /* Не растягивается */
    margin-left: var(--spacing-md) !important; /* Используем margin вместо auto для контроля */
    margin-right: 0 !important;
    align-self: center !important;
    width: 28px !important; /* Фиксированная ширина кнопки */
    height: 28px !important; /* Фиксированная высота кнопки */
    min-width: 28px !important; /* Минимальная ширина */
    box-sizing: border-box !important;
}

/* Выравнивание для формы доходов - по левому краю */
.nucleus-page #financial-mirror-container .fm-form-section {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
    align-items: flex-start !important; /* Выравнивание по левому краю */
    margin-bottom: var(--spacing-lg) !important; /* Отступ между секциями */
}

.nucleus-page #financial-mirror-container .fm-form-section:last-child {
    margin-bottom: 0 !important;
}

.nucleus-page #financial-mirror-container .fm-form-section-label {
    width: 100% !important;
    text-align: left !important;
    margin-bottom: var(--spacing-sm) !important; /* Отступ под label */
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-md) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-text-secondary) !important;
}

.nucleus-page #financial-mirror-container .fm-form-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 0 !important; /* Убираем gap */
    justify-content: flex-start !important; /* Выравнивание по левому краю */
    margin-bottom: 0 !important;
}

/* Горизонтальная строка для Amount и Currency */
.nucleus-page #financial-mirror-container .fm-form-row-horizontal {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: var(--spacing-md) !important; /* Отступ между элементами */
    justify-content: flex-start !important; /* Выравнивание по левому краю */
}

/* Элементы в строках форм - выравнивание по левому краю */
.nucleus-page #financial-mirror-container .fm-form-row > * {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.nucleus-page #financial-mirror-container .fm-form-row-horizontal > * {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Input поля в форме доходов - полная ширина для одиночных полей */
.nucleus-page #financial-mirror-container .fm-form-row input[type="text"],
.nucleus-page #financial-mirror-container .fm-form-row input[type="number"] {
    width: 100% !important;
    flex: 1 !important;
}

/* Input в горизонтальной строке (Amount) - растягиваем */
body.nucleus-page #financial-mirror-container .fm-form-row-horizontal input[type="number"],
body.nucleus-page #financial-mirror-container form .fm-form-row-horizontal input[type="number"],
.nucleus-page #financial-mirror-container .fm-form-row-horizontal input[type="number"] {
    flex: 1 1 auto !important;
    min-width: 200px !important;
    max-width: none !important;
    width: auto !important;
}

/* Перекрываем стили из financial-mirror.css для input в горизонтальной строке */
body.nucleus-page #financial-mirror-container .fm-form-row-horizontal input,
body.nucleus-page #financial-mirror-container form .fm-form-row-horizontal input {
    flex: 1 1 auto !important;
    min-width: 200px !important;
    max-width: none !important;
    width: auto !important;
}

/* Currency wrapper в горизонтальной строке - растягиваем */
body.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container form .fm-form-row-horizontal .invoice-currency-wrapper,
.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-wrapper {
    flex: 1 1 auto !important;
    min-width: 200px !important;
    max-width: none !important;
    width: auto !important;
    flex-shrink: 1 !important; /* Перекрываем flex-shrink: 0 */
}

/* Перекрываем стили из financial-mirror.css для currency-wrapper */
body.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container form .fm-form-row-horizontal .invoice-currency-wrapper {
    width: auto !important;
    min-width: 200px !important;
    max-width: none !important;
}

/* Currency select внутри wrapper - растягиваем */
body.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-select,
body.nucleus-page #financial-mirror-container form .fm-form-row-horizontal .invoice-currency-select,
.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-select {
    width: 100% !important;
    min-width: 200px !important;
    max-width: none !important;
}

/* Перекрываем стили из financial-mirror.css для currency-select */
body.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-select,
body.nucleus-page #financial-mirror-container form .fm-form-row-horizontal .invoice-currency-select {
    width: 100% !important;
    min-width: 200px !important;
    max-width: none !important;
}

/* Currency dropdown внутри wrapper - растягиваем */
body.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-dropdown,
body.nucleus-page #financial-mirror-container form .fm-form-row-horizontal .invoice-currency-dropdown,
.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-dropdown {
    width: 100% !important;
    min-width: 200px !important;
    max-width: none !important;
}

/* Дополнительные перекрывающие стили для гарантии */
body.nucleus-page #income-form .fm-form-row-horizontal input[type="number"],
body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-wrapper {
    flex: 1 1 auto !important;
    min-width: 200px !important;
    max-width: none !important;
    width: auto !important;
}

body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-wrapper {
    width: auto !important;
    min-width: 200px !important;
    max-width: none !important;
    flex-shrink: 1 !important;
}

body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-select {
    width: 100% !important;
    min-width: 200px !important;
    max-width: none !important;
}

/* Перекрываем стили из financial-mirror.css для .fm-form-row-horizontal */
body.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container form#income-form .fm-form-row-horizontal .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container .fm-form .fm-form-row-horizontal .invoice-currency-wrapper {
    width: auto !important;
    min-width: 200px !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    flex-shrink: 1 !important;
}

/* Перекрываем стили из financial-mirror.css для .fm-form-row (которые применяются к .fm-form-row-horizontal) */
body.nucleus-page #financial-mirror-container .fm-form-row.fm-form-row-horizontal .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container form#income-form .fm-form-row.fm-form-row-horizontal .invoice-currency-wrapper {
    width: auto !important;
    min-width: 200px !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    flex-shrink: 1 !important;
}

body.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-select,
body.nucleus-page #financial-mirror-container form#income-form .fm-form-row-horizontal .invoice-currency-select,
body.nucleus-page #financial-mirror-container .fm-form-row.fm-form-row-horizontal .invoice-currency-select {
    width: 100% !important;
    min-width: 200px !important;
    max-width: none !important;
}

/* Растягиваем инпут Amount по ID - максимальная специфичность */
body.nucleus-page #income-amount,
body.nucleus-page #financial-mirror-container #income-amount,
body.nucleus-page #income-form #income-amount,
body.nucleus-page #financial-mirror-container #income-form #income-amount,
body.nucleus-page #financial-mirror-container .fm-form-row-horizontal input[type="number"],
body.nucleus-page #financial-mirror-container form#income-form .fm-form-row-horizontal input[type="number"],
body.nucleus-page #financial-mirror-container .fm-form-row.fm-form-row-horizontal input[type="number"] {
    flex: 1 1 auto !important;
    min-width: 200px !important;
    max-width: none !important;
    width: auto !important;
}

/* Растягиваем currency wrapper - максимальная специфичность */
body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container #income-form .fm-form-row-horizontal .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container form#income-form .fm-form-row-horizontal .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container .fm-form-row.fm-form-row-horizontal .invoice-currency-wrapper {
    width: auto !important;
    min-width: 200px !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    flex-shrink: 1 !important;
}

/* Растягиваем currency select по ID - максимальная специфичность */
body.nucleus-page #income-payment-currency-display,
body.nucleus-page #financial-mirror-container #income-payment-currency-display,
body.nucleus-page #income-form #income-payment-currency-display,
body.nucleus-page #financial-mirror-container #income-form #income-payment-currency-display,
body.nucleus-page #financial-mirror-container .fm-form-row-horizontal .invoice-currency-select,
body.nucleus-page #financial-mirror-container form#income-form .fm-form-row-horizontal .invoice-currency-select,
body.nucleus-page #financial-mirror-container .fm-form-row.fm-form-row-horizontal .invoice-currency-select {
    width: 100% !important;
    min-width: 200px !important;
    max-width: none !important;
}

/* Select в форме доходов - полная ширина для одиночных */
.nucleus-page #financial-mirror-container .fm-form-row select {
    width: 100% !important;
    flex: 1 !important;
}

/* Растягиваем Period select - максимальная специфичность */
body.nucleus-page #income-period,
body.nucleus-page #financial-mirror-container #income-period,
body.nucleus-page #income-form #income-period,
body.nucleus-page #income-form .fm-form-row #income-period,
body.nucleus-page #financial-mirror-container .fm-form-row #income-period,
body.nucleus-page #financial-mirror-container #income-form .fm-form-row select {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 200px !important;
    max-width: 100% !important;
}

/* Растягиваем Project length input */
body.nucleus-page #income-project-days,
body.nucleus-page #financial-mirror-container #income-project-days,
body.nucleus-page #income-form #income-project-days {
    width: 100% !important;
    flex: 1 !important;
    min-width: 200px !important;
    max-width: 100% !important;
}

/* Подсказка под полем Project length */
.nucleus-page #financial-mirror-container .fm-input-hint {
    margin-top: var(--spacing-xs) !important;
    text-align: left !important;
    width: 100% !important;
    font-style: italic !important;
    color: var(--color-text-tertiary) !important;
}

/* ============================================
   АДАПТИВНОСТЬ ДЛЯ NUCLEUS PAGE
   ============================================ */

/* Большие экраны (1440px и выше) */
@media (min-width: 1440px) {
    .nucleus-page .content-wrapper {
        max-width: 1200px;
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* Средние экраны (1025px - 1439px) */
@media (min-width: 1025px) and (max-width: 1439px) {
    .nucleus-page .content-wrapper {
        max-width: 1000px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Планшеты в альбомной ориентации (801px - 1024px) */
@media (min-width: 801px) and (max-width: 1024px) {
    .nucleus-page .content-wrapper {
        max-width: 100%;
        padding-left: 32px;
        padding-right: 32px;
    }
    
    .nucleus-page-header {
        padding-top: 0; /* Заголовок часть контента, padding на content-wrapper */
    }
    
    .nucleus-page-title {
        font-size: var(--font-size-2xl);
    }
    
    .nucleus-page-description {
        font-size: var(--font-size-md);
        max-width: 100%;
    }
}

/* Планшеты в портретной ориентации и маленькие планшеты (641px - 800px) */
@media (min-width: 641px) and (max-width: 800px) {
    .nucleus-page .main-content {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .nucleus-page .content-wrapper {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: var(--spacing-lg);
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
        width: 100%;
        max-width: 100%;
    }
    
    .nucleus-page-header {
        padding-top: 0; /* Заголовок часть контента, padding на content-wrapper */
        margin-bottom: var(--spacing-2xl);
    }
    
    .nucleus-page-title {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-sm);
    }
    
    .nucleus-page-description {
        font-size: var(--font-size-md);
        max-width: 100%;
    }
    
    /* Уменьшаем отступы для секций Financial Mirror */
    .nucleus-page #financial-mirror-container .fm-section.fm-income {
        margin-top: var(--spacing-2xl) !important;
    }
}

/* Мобильные устройства (до 640px) */
@media (max-width: 640px) {
    .nucleus-page .main-content {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .nucleus-page .content-wrapper {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: var(--spacing-md);
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        width: 100%;
        max-width: 100%;
    }
    
    .nucleus-page-header {
        padding-top: 0; /* Заголовок часть контента, padding на content-wrapper */
        margin-bottom: var(--spacing-xl);
    }
    
    .nucleus-page-title {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-sm);
        line-height: 1.3;
    }
    
    .nucleus-page-description {
        font-size: var(--font-size-sm);
        max-width: 100%;
        line-height: 1.5;
    }
    
    /* Уменьшаем отступы для секций Financial Mirror */
    .nucleus-page #financial-mirror-container .fm-section.fm-income {
        margin-top: var(--spacing-xl) !important;
    }
    
    
    /* Адаптируем заголовки секций */
    .nucleus-page #financial-mirror-container .fm-section.fm-income h1 {
        font-size: var(--font-size-xl) !important;
        margin-bottom: var(--spacing-lg) !important;
    }
    
    .nucleus-page #financial-mirror-container .fm-section h2 {
        font-size: var(--font-size-lg) !important;
        margin-bottom: var(--spacing-lg) !important;
    }
}

/* Очень маленькие мобильные устройства (до 480px) */
@media (max-width: 480px) {
    .nucleus-page .content-wrapper {
        margin-top: 0;
        padding-top: 0;
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .nucleus-page-header {
        padding-top: 0; /* Заголовок часть контента, padding на content-wrapper */
        margin-bottom: var(--spacing-lg);
    }
    
    .nucleus-page-title {
        font-size: var(--font-size-lg);
    }
    
    .nucleus-page-description {
        font-size: var(--font-size-xs);
    }
    
}

/* Дополнительное правило для контейнера и всех возможных элементов со скроллом */
body.nucleus-page .container,
body.nucleus-page .container *,
body.nucleus-page main,
body.nucleus-page main *,
body.nucleus-page .main-content,
body.nucleus-page .main-content *,
body.nucleus-page .content-wrapper,
body.nucleus-page .content-wrapper *,
body.nucleus-page .nucleus-calculator-container,
body.nucleus-page .nucleus-calculator-container *,
body.nucleus-page #financial-mirror-container,
body.nucleus-page #financial-mirror-container * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body.nucleus-page .container::-webkit-scrollbar,
body.nucleus-page .container *::-webkit-scrollbar,
body.nucleus-page main::-webkit-scrollbar,
body.nucleus-page main *::-webkit-scrollbar,
body.nucleus-page .main-content::-webkit-scrollbar,
body.nucleus-page .main-content *::-webkit-scrollbar,
body.nucleus-page .content-wrapper::-webkit-scrollbar,
body.nucleus-page .content-wrapper *::-webkit-scrollbar,
body.nucleus-page .nucleus-calculator-container::-webkit-scrollbar,
body.nucleus-page .nucleus-calculator-container *::-webkit-scrollbar,
body.nucleus-page #financial-mirror-container::-webkit-scrollbar,
body.nucleus-page #financial-mirror-container *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Максимальное скругление для кнопок на nucleus-page */
body.nucleus-page .fm-btn-secondary,
body.nucleus-page #income-form .fm-btn-secondary,
body.nucleus-page #expenses-form .fm-btn-secondary {
    border-radius: var(--radius-full) !important; /* Максимальное скругление */
}

/* Адаптивность для форм и элементов Financial Mirror */
@media (max-width: 768px) {
    /* Адаптируем формы */
    .nucleus-page #financial-mirror-container .fm-form {
        gap: var(--spacing-md) !important;
    }
    
    /* Адаптируем контейнеры с датами */
    .nucleus-page #financial-mirror-container .fm-date-container {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    /* Адаптируем кнопки */
    .nucleus-page #financial-mirror-container .fm-btn-secondary,
    .nucleus-page #financial-mirror-container .fm-btn-add-custom-expense {
        width: 100%;
        min-width: auto;
    }
    
    /* Адаптируем инпуты */
    .nucleus-page #financial-mirror-container .fm-input,
    .nucleus-page #financial-mirror-container .fm-select {
        width: 100%;
        min-width: auto;
    }
    
    /* Адаптируем строки с валютами */
    .nucleus-page #financial-mirror-container .fm-currency-row {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 480px) {
    /* Уменьшаем отступы в формах */
    .nucleus-page #financial-mirror-container .fm-form {
        gap: var(--spacing-sm) !important;
    }
    
    /* Адаптируем заголовки форм */
    .nucleus-page #financial-mirror-container .fm-form-group label {
        font-size: var(--font-size-sm);
    }
    
    /* Адаптируем кнопки добавления категорий */
    .nucleus-page #financial-mirror-container .fm-expense-category-row {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* Mobile header (320-800px): main-content ниже fixed .mobile-menu-header (top:16px + height:56px) */
@media (max-width: 800px) {
    .nucleus-page .main-content {
        position: fixed;
        top: calc(16px + 56px + env(safe-area-inset-top));
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        min-height: 0;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-y: auto;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .nucleus-page .content-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 0;
        /* Отступ сверху уже даёт top у main; не дублируем «второй» зазор */
        padding-top: var(--spacing-md);
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
        padding-bottom: var(--spacing-6xl);
    }
}

/* Адаптивность с учетом навигации */
/* Когда навигация свернута на мобильных устройствах */
@media (max-width: 768px) {
    .nucleus-page .container:has(.left-nav.collapsed) .main-content {
        margin-left: 0;
    }
    
    /* Учитываем ширину свернутой навигации */
    .nucleus-page .container:has(.left-nav:not(.collapsed)) .main-content {
        margin-left: 0;
    }
}

/* Горизонтальная ориентация планшетов */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) {
    .nucleus-page .content-wrapper {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .nucleus-page-header {
        padding-top: 0; /* Заголовок часть контента, padding на content-wrapper */
    }
}

/* ============================================
   ПРИОРИТЕТНЫЕ СТИЛИ ДЛЯ РАСТЯГИВАНИЯ ИНПУТОВ
   Добавлены в конец файла для максимального приоритета
   ============================================ */

/* Растягиваем инпут Amount - используем ID для максимальной специфичности */
body.nucleus-page #income-amount {
    flex: 1 1 auto !important;
    min-width: 200px !important;
    max-width: none !important;
    width: auto !important;
}

/* Растягиваем currency wrapper - используем ID формы для максимальной специфичности */
body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-wrapper {
    flex: 1 1 auto !important;
    min-width: 200px !important;
    max-width: none !important;
    width: auto !important;
    flex-shrink: 1 !important;
}

/* Растягиваем currency select - используем ID для максимальной специфичности */
body.nucleus-page #income-payment-currency-display {
    width: 100% !important;
    min-width: 200px !important;
    max-width: none !important;
}

/* Адаптивные стили для растягивания инпутов - применяются во всех медиа-запросах */
@media (min-width: 1440px) {
    body.nucleus-page #income-amount,
    body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-wrapper,
    body.nucleus-page #income-payment-currency-display {
        flex: 1 1 auto !important;
        min-width: 200px !important;
        max-width: none !important;
        width: auto !important;
    }
    
    body.nucleus-page #income-payment-currency-display {
        width: 100% !important;
    }
}

@media (min-width: 1025px) and (max-width: 1439px) {
    body.nucleus-page #income-amount,
    body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-wrapper,
    body.nucleus-page #income-payment-currency-display {
        flex: 1 1 auto !important;
        min-width: 200px !important;
        max-width: none !important;
        width: auto !important;
    }
    
    body.nucleus-page #income-payment-currency-display {
        width: 100% !important;
    }
}

@media (min-width: 801px) and (max-width: 1024px) {
    body.nucleus-page #income-amount,
    body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-wrapper,
    body.nucleus-page #income-payment-currency-display {
        flex: 1 1 auto !important;
        min-width: 150px !important;
        max-width: none !important;
        width: auto !important;
    }
    
    body.nucleus-page #income-payment-currency-display {
        width: 100% !important;
    }
}

@media (min-width: 641px) and (max-width: 800px) {
    body.nucleus-page #income-amount,
    body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-wrapper,
    body.nucleus-page #income-payment-currency-display {
        flex: 1 1 auto !important;
        min-width: 150px !important;
        max-width: none !important;
        width: auto !important;
    }
    
    body.nucleus-page #income-payment-currency-display {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    body.nucleus-page #income-amount,
    body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-wrapper,
    body.nucleus-page #income-payment-currency-display {
        flex: 1 1 auto !important;
        min-width: 120px !important;
        max-width: none !important;
        width: auto !important;
    }
    
    body.nucleus-page #income-payment-currency-display {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    body.nucleus-page #income-amount,
    body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-wrapper,
    body.nucleus-page #income-payment-currency-display {
        flex: 1 1 auto !important;
        min-width: 100px !important;
        max-width: none !important;
        width: auto !important;
    }
    
    body.nucleus-page #income-payment-currency-display {
        width: 100% !important;
    }
}

/* ============================================
   КРИТИЧЕСКИЕ СТИЛИ ДЛЯ РАСТЯГИВАНИЯ - ПРИОРИТЕТ #1
   Добавлены в самый конец для гарантированного применения
   ============================================ */

/* Принудительно растягиваем горизонтальную строку */
body.nucleus-page #income-form .fm-form-row-horizontal {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--spacing-md) !important;
}

/* Принудительно растягиваем Amount input - используем flex: 1 1 0% для равномерного распределения */
body.nucleus-page #income-amount {
    flex: 1 1 0% !important;
    min-width: 200px !important;
    max-width: 100% !important;
    width: 0 !important; /* width: 0 позволяет flex правильно работать */
}

/* Принудительно растягиваем Currency wrapper - используем flex: 1 1 0% для равномерного распределения */
body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-wrapper {
    flex: 1 1 0% !important;
    min-width: 200px !important;
    max-width: 100% !important;
    width: 0 !important; /* width: 0 позволяет flex правильно работать */
    flex-shrink: 1 !important;
}

/* Принудительно растягиваем Currency select */
body.nucleus-page #income-payment-currency-display,
body.nucleus-page #income-form .fm-form-row-horizontal .invoice-currency-select {
    width: 100% !important;
    min-width: 200px !important;
    max-width: 100% !important;
}

/* Принудительно растягиваем Period dropdown — только форма дохода, не «Show income in» и не расходы */
body.nucleus-page #income-period-display,
body.nucleus-page #income-form .fm-form-row:not(.fm-currencies-row) .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container #income-form .fm-form-row:not(.fm-currencies-row) .invoice-currency-wrapper {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 200px !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
}

/* Растягиваем Period select display */
body.nucleus-page #income-period-display,
body.nucleus-page #income-form .fm-form-row:not(.fm-currencies-row) .invoice-currency-select,
body.nucleus-page #financial-mirror-container #income-form .fm-form-row:not(.fm-currencies-row) .invoice-currency-select {
    width: 100% !important;
    min-width: 200px !important;
    max-width: 100% !important;
}

/* Растягиваем только панель периода (#income-period). Раньше селектор .fm-form-row .invoice-currency-dropdown без #income-form попадал на категории расходов и ломал left/right/ширину. */
body.nucleus-page #income-period-dropdown:not([data-fm-dropdown-floating="1"]),
body.nucleus-page #financial-mirror-container #income-period-dropdown:not([data-fm-dropdown-floating="1"]),
body.nucleus-page #income-form #income-period-dropdown:not([data-fm-dropdown-floating="1"]),
body.nucleus-page #income-form .fm-form-row #income-period-dropdown:not([data-fm-dropdown-floating="1"]),
body.nucleus-page #financial-mirror-container #income-form .fm-form-row #income-period-dropdown:not([data-fm-dropdown-floating="1"]) {
    width: 100% !important;
    min-width: 200px !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* ============================================
   КРИТИЧЕСКИЕ ПЕРЕОПРЕДЕЛЕНИЯ ДЛЯ EXPENSE CATEGORY ROWS
   Перекрываем стили из financial-mirror.css
   ============================================ */

/* Перекрываем стили из financial-mirror.css для currency wrapper в expense rows */
body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row .invoice-currency-wrapper {
    width: auto !important;
    min-width: 140px !important;
    max-width: 160px !important;
    flex-shrink: 1 !important; /* Перекрываем flex-shrink: 0 из financial-mirror.css */
}

body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row .invoice-currency-select {
    width: 100% !important;
    min-width: 140px !important;
    max-width: 160px !important;
}

/* Ограничиваем ширину контейнера формы расходов */
body.nucleus-page #financial-mirror-container #expenses-form,
body.nucleus-page #financial-mirror-container #expenses-form-container,
body.nucleus-page #financial-mirror-container .fm-section.fm-expenses {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Дополнительные переопределения для expense category rows - максимальный приоритет */
body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Перекрываем все стили из financial-mirror.css для expense rows */
body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row .invoice-currency-wrapper,
body.nucleus-page #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-wrapper {
    width: auto !important;
    min-width: 140px !important;
    max-width: 160px !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
}

body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row .invoice-currency-select,
body.nucleus-page #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-select {
    width: 100% !important;
    min-width: 140px !important;
    max-width: 160px !important;
}

/* Input суммы в expense rows */
body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row .expense-amount-input {
    flex: 0 1 auto !important;
    min-width: 120px !important;
    max-width: 150px !important;
    width: auto !important;
}

/* Кнопка удаления - всегда видна */
body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row .fm-btn-remove-expense-category {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* ============================================
   ФИНАЛЬНЫЕ ПЕРЕОПРЕДЕЛЕНИЯ ДЛЯ CURRENCY WRAPPER В EXPENSE ROWS
   Перекрываем все стили из financial-mirror.css с максимальным приоритетом
   ============================================ */

/* Перекрываем .fm-form-row .invoice-currency-wrapper из financial-mirror.css */
body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row .invoice-currency-wrapper,
body.nucleus-page #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-wrapper {
    width: auto !important;
    min-width: 140px !important;
    max-width: 160px !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
}

/* Перекрываем .fm-form-row .invoice-currency-select из financial-mirror.css */
body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row .invoice-currency-select,
body.nucleus-page #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-select,
body.nucleus-page #financial-mirror-container #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-select {
    width: 100% !important;
    min-width: 140px !important;
    max-width: 160px !important;
}

/* Перекрываем .fm-form-row .invoice-currency-dropdown из financial-mirror.css */
body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row .invoice-currency-dropdown,
body.nucleus-page #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-dropdown,
body.nucleus-page #financial-mirror-container #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-dropdown {
    width: 100% !important;
    min-width: 140px !important;
    max-width: 160px !important;
}

/* Перекрываем все возможные селекторы для currency wrapper в expense rows - используем ID формы */
body.nucleus-page #expenses-form .fm-expense-category-row .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container #expenses-form .fm-expense-category-row .invoice-currency-wrapper,
body.nucleus-page #expenses-form-container #expenses-form .fm-expense-category-row .invoice-currency-wrapper,
body.nucleus-page #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-wrapper {
    width: auto !important;
    min-width: 140px !important;
    max-width: 160px !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
}

/* Перекрываем .fm-form-row-horizontal .invoice-currency-wrapper из financial-mirror.css (max-width: 200px) */
body.nucleus-page #expenses-form .fm-form-row-horizontal .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container #expenses-form .fm-form-row-horizontal .invoice-currency-wrapper {
    width: auto !important;
    min-width: 140px !important;
    max-width: 160px !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
}

/* Абсолютно все возможные селекторы для currency wrapper в expense rows - максимальный приоритет */
body.nucleus-page #financial-mirror-container .fm-section.fm-expenses .fm-form-row.fm-expense-category-row .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container .fm-section.fm-expenses #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container .fm-section.fm-expenses #expenses-form-container #expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-wrapper,
body.nucleus-page #financial-mirror-container .fm-section.fm-expenses #expenses-form-container form#expenses-form .fm-form-row.fm-expense-category-row .invoice-currency-wrapper {
    width: auto !important;
    min-width: 140px !important;
    max-width: 160px !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
}

/* Обрезка текста в currency select с троеточием */
body.nucleus-page #financial-mirror-container .invoice-currency-select .currency-value,
body.nucleus-page #financial-mirror-container .fm-expense-category-row .invoice-currency-select .currency-value,
body.nucleus-page #expenses-form .invoice-currency-select .currency-value,
body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row .invoice-currency-select .currency-value {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important; /* Позволяет сжиматься для ellipsis */
}

/* Ограничиваем ширину currency select для правильной работы ellipsis */
body.nucleus-page #financial-mirror-container .fm-expense-category-row .invoice-currency-select,
body.nucleus-page #financial-mirror-container .fm-form-row.fm-expense-category-row .invoice-currency-select {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important; /* Позволяет сжиматься */
}

/* ============================================
   НОВЫЙ ДАШБОРД NUCLEUS
   ============================================ */

/* Dashboard Container */
.nucleus-dashboard-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 0 32px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xl);
    /* remove container background */
    background: transparent;
}

/* Statistics Grid */
.nucleus-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2xl);
    width: 100%;
    margin-top: var(--spacing-2xl);
}

.nucleus-stat-card {
    /* slightly more transparent card background */
    background: linear-gradient(180deg, rgba(39, 39, 39, 0.3) 0%, rgba(31, 31, 31, 0.3) 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: relative;
}

.nucleus-stat-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nucleus-stat-value {
    font-family: var(--font-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.2;
}

.nucleus-stat-currency {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

/* Всегда выводим символ валюты слева */
.nucleus-stat-value-wrapper.currency-right .nucleus-stat-currency {
    order: -1;
    margin-right: var(--spacing-xs);
    margin-left: 0;
}

/* Calendar Section */
.nucleus-calendar-section {
    width: 100%;
    /* slightly more transparent section background */
    background: linear-gradient(180deg, rgba(39, 39, 39, 0.3) 0%, rgba(31, 31, 31, 0.3) 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    min-height: 420px;
    box-sizing: border-box;
}

.nucleus-calendar-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--spacing-lg);
    width: 100%;
    box-sizing: border-box;
}

.nucleus-calendar-nav-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
}

.nucleus-calendar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.nucleus-calendar-nav-btn:active {
    transform: scale(0.95);
}

.nucleus-calendar-selects {
    display: flex;
    gap: var(--spacing-md);
    flex: 1;
    justify-content: center;
}

.nucleus-calendar-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    min-width: 120px;
}

.nucleus-calendar-select:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.nucleus-calendar-months {
    display: flex;
    gap: var(--spacing-xl);
    overflow-x: auto;
    padding: var(--spacing-lg) 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nucleus-calendar-months::-webkit-scrollbar {
    display: none;
}

.nucleus-calendar-month {
    min-width: 280px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-base);
}

.nucleus-calendar-month.active {
    background: rgba(14, 124, 102, 0.1);
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 2px rgba(14, 124, 102, 0.2);
}

.nucleus-calendar-month-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.nucleus-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-xs);
    height: 220px; /* Фиксированная высота для 6 строк (1 заголовок + 6 строк дней) */
}

.nucleus-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    position: relative;
    transition: all var(--transition-base);
}

.nucleus-calendar-day.has-income {
    background: rgba(14, 124, 102, 0.2);
    color: var(--color-accent-primary);
}

.nucleus-calendar-day.has-expense {
    background: rgba(251, 146, 60, 0.2);
    color: var(--color-error);
}

.nucleus-calendar-day.has-both {
    background: linear-gradient(135deg, rgba(14, 124, 102, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: var(--color-text-primary);
}

.nucleus-calendar-day-header {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
}

.nucleus-calendar-legend-item {
    display: flex;
    align-items: center;
    /* 4px gap between dot and text */
    gap: 8px;
}

.nucleus-calendar-legend-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent-primary);
    box-shadow: none;
    flex-shrink: 0;
}

.nucleus-calendar-legend-text:not(.nucleus-calendar-header-legend-label) {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

/* Метка (точка) для дней с бюджетом */
.nucleus-calendar-day.has-budget {
    position: relative;
}

.nucleus-calendar-budget-dot {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--color-accent-primary);
    pointer-events: none;
    z-index: 1;
    box-shadow: none;
}

/* Month Board */
.nucleus-month-board {
    width: 100%;
    min-height: 300px;
    /* slightly more transparent board background */
    background: linear-gradient(180deg, rgba(39, 39, 39, 0.3) 0%, rgba(31, 31, 31, 0.3) 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.nucleus-month-board.zero-state {
    text-align: center;
}

.nucleus-month-board-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.06);
}

.nucleus-month-board-empty-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.nucleus-month-board-empty-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin: 0;
}

.nucleus-month-board-empty-description {
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    color: var(--color-text-tertiary);
    margin: 0;
}

.nucleus-month-board-add-btn {
    background: var(--color-accent-primary);
    color: var(--color-text-primary);
    border: none;
    border-radius: var(--radius-full);
    padding: var(--spacing-md) var(--spacing-3xl);
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.nucleus-month-board-add-btn:hover {
    background: var(--color-accent-hover);
}

.nucleus-month-board-data {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.nucleus-month-board-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 24px;
    padding: var(--spacing-3xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.nucleus-month-board-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-2xl);
}

.nucleus-month-board-card-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.nucleus-month-board-card-date {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    background: rgba(255, 255, 255, 0.05);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
}

.nucleus-month-board-card-delete {
    background: transparent;
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: var(--color-error);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}

.nucleus-month-board-card-delete:hover {
    background: rgba(251, 146, 60, 0.1);
    border-color: var(--color-error);
}

.nucleus-month-board-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.nucleus-month-board-stat {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.nucleus-month-board-stat-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nucleus-month-board-stat-value {
    font-family: var(--font-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

/* AI Summary */
.nucleus-ai-summary {
    width: 100%;
    background: linear-gradient(180deg, #272727 0%, #1F1F1F 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.nucleus-ai-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nucleus-ai-summary-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.nucleus-ai-summary-content {
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.nucleus-ai-summary-placeholder {
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* Financial Mirror Sidebar */
.nucleus-financial-mirror-sidebar {
    position: fixed;
    top: 0;
    right: -500px;
    width: 500px;
    height: 100vh;
    background: linear-gradient(180deg, #272727 0%, #1F1F1F 100%);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    transition: right var(--transition-slow);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.nucleus-financial-mirror-sidebar.open {
    right: 0;
}

.nucleus-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* Типографика заголовка дровера — в nucleus-dashboard.css (#nucleus-financial-mirror-sidebar .nucleus-sidebar-title) как у .content-main-title */


.nucleus-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-2xl);
}

/* Overlay для sidebar */
.nucleus-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.nucleus-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Адаптивность для дашборда */
@media (max-width: 1024px) {
    .nucleus-stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .nucleus-financial-mirror-sidebar {
        width: 100%;
        right: -100%;
    }
}

@media (max-width: 768px) {
    .nucleus-calendar-header {
        flex-wrap: wrap;
    }

    .nucleus-calendar-selects {
        width: 100%;
        justify-content: space-between;
    }

    .nucleus-month-board-card-stats {
        grid-template-columns: 1fr;
    }
}