/* VARIABLE DEFINITIONS */
html[data-theme="light"],
:root {
    --primary: #5775FF; /* Основной акцент */
    --secondary: #DDE3FF; /* Второстепенный цвет */
    --accent: #FFAF4F; /* Дополнительный акцент */
    --primary-fg: #ffffff; /* Цвет текста на кнопках */

    --body-fg: #333333; /* Основной текст */
    --body-bg: #ffffff; /* Фон страницы */
    --body-quiet-color: #666666; /* Тихий текст */
    --body-loud-color: #000000; /* Выделенный текст */

    --header-color: #ffffff; /* Цвет текста в шапке */
    --header-branding-color: var(--accent); /* Цвет логотипа */
    --header-bg: var(--primary); /* Фон шапки */
    --header-link-color: var(--primary-fg); /* Цвет ссылок в шапке */

    --breadcrumbs-fg: #4c516a; /* Цвет текста хлебных крошек */
    --breadcrumbs-link-fg: var(--primary); /* Цвет ссылок хлебных крошек */
    --breadcrumbs-bg: var(--secondary); /* Фон хлебных крошек */

    --link-fg: #5775FF; /* Цвет ссылок */
    --link-hover-color: #4056BF; /* Цвет при наведении */
    --link-selected-fg: #3A4EBF; /* Цвет для выбранных ссылок */

    --hairline-color: #E0E4F0; /* Линии/границы */
    --border-color: #BCC6E0; /* Цвет границ */

    --error-fg: #D43F3F; /* Ошибки */

    --message-success-bg: #D8F5E8; /* Сообщение об успехе */
    --message-warning-bg: #FFF4CC; /* Сообщение-предупреждение */
    --message-error-bg: #FDE1E1; /* Сообщение-ошибка */

    --darkened-bg: #EBF0FF; /* Чуть более темный фон */
    --selected-bg: #E0E8FF; /* Фон выделенного */
    --selected-row: #C6D4FF; /* Выделенная строка */

    --button-fg: #FFFFFF; /* Цвет текста кнопок */
    --button-bg: var(--primary); /* Основной фон кнопок */
    --button-hover-bg: #4056BF; /* Фон кнопки при наведении */
    --default-button-bg: #4866e7; /* Фон второстепенных кнопок */
    --default-button-hover-bg: #B0BFFF; /* Фон второстепенных кнопок при наведении */
    --close-button-bg: #A0A0A0; /* Кнопка закрытия */
    --close-button-hover-bg: #808080; /* Кнопка закрытия при наведении */
    --delete-button-bg: #D43F3F; /* Кнопка удаления */
    --delete-button-hover-bg: #B82828; /* Кнопка удаления при наведении */

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: #6c84f7;
    --object-tools-hover-bg: var(--default-button-hover-bg);

    --font-family-primary:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        system-ui,
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-family-monospace:
        ui-monospace,
        Menlo,
        Monaco,
        "Cascadia Mono",
        "Segoe UI Mono",
        "Roboto Mono",
        "Oxygen Mono",
        "Ubuntu Monospace",
        "Source Code Pro",
        "Fira Mono",
        "Droid Sans Mono",
        "Courier New",
        monospace,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #2D3AFF; /* Основной акцент */
        --secondary: #A5AEFF; /* Второстепенный цвет */
        --accent: #FFC773; /* Дополнительный акцент */
        --primary-fg: #ffffff; /* Цвет текста на кнопках */

        --body-fg: #EEEEEE; /* Основной текст */
        --body-bg: #121212; /* Фон страницы */
        --body-quiet-color: #CCCCCC; /* Тихий текст */
        --body-loud-color: #FFFFFF; /* Выделенный текст */

        --header-color: #ffffff; /* Цвет текста в шапке */
        --header-branding-color: var(--accent); /* Цвет логотипа */
        --header-bg: var(--primary); /* Фон шапки */
        --header-link-color: var(--primary-fg); /* Цвет ссылок в шапке */

        --breadcrumbs-fg: #4c516a; /* Цвет текста хлебных крошек */
        --breadcrumbs-link-fg: var(--primary); /* Цвет ссылок хлебных крошек */
        --breadcrumbs-bg: var(--secondary); /* Фон хлебных крошек */

        --link-fg: #A5C8FF; /* Цвет ссылок */
        --link-hover-color: #809DFF; /* Цвет при наведении */
        --link-selected-fg: #5B75FF; /* Цвет для выбранных ссылок */

        --hairline-color: #272727; /* Линии/границы */
        --border-color: #353535; /* Цвет границ */

        --error-fg: #FF7070; /* Ошибки */

        --message-success-bg: #00391A; /* Сообщение об успехе */
        --message-warning-bg: #49310A; /* Сообщение-предупреждение */
        --message-error-bg: #4D1212; /* Сообщение-ошибка */

        --darkened-bg: #1F1F1F; /* Чуть более темный фон */
        --selected-bg: #2D3AFF; /* Фон выделенного */
        --selected-row: #3A4BFF; /* Выделенная строка */

        --button-fg: #FFFFFF; /* Цвет текста кнопок */
        --button-bg: var(--primary); /* Основной фон кнопок */
        --button-hover-bg: #4A59FF; /* Фон кнопки при наведении */
        --default-button-bg: #4866e7; /* Фон второстепенных кнопок */
        --default-button-hover-bg: #6D78FF; /* Фон второстепенных кнопок при наведении */
        --close-button-bg: #5A5A5A; /* Кнопка закрытия */
        --close-button-hover-bg: #7A7A7A; /* Кнопка закрытия при наведении */
        --delete-button-bg: #FF4A4A; /* Кнопка удаления */
        --delete-button-hover-bg: #CC3939; /* Кнопка удаления при наведении */

        --object-tools-fg: var(--button-fg);
        --object-tools-bg: var(--default-button-bg);
        --object-tools-hover-bg: var(--default-button-hover-bg);

        --font-family-primary:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            system-ui,
            Roboto,
            "Helvetica Neue",
            Arial,
            sans-serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol",
            "Noto Color Emoji";
        --font-family-monospace:
            ui-monospace,
            Menlo,
            Monaco,
            "Cascadia Mono",
            "Segoe UI Mono",
            "Roboto Mono",
            "Oxygen Mono",
            "Ubuntu Monospace",
            "Source Code Pro",
            "Fira Mono",
            "Droid Sans Mono",
            "Courier New",
            monospace,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol",
            "Noto Color Emoji";
    }
}

html[data-theme="dark"] {
    --primary: #2D3AFF; /* Основной акцент */
    --secondary: #A5AEFF; /* Второстепенный цвет */
    --accent: #FFC773; /* Дополнительный акцент */
    --primary-fg: #ffffff; /* Цвет текста на кнопках */

    --body-fg: #EEEEEE; /* Основной текст */
    --body-bg: #121212; /* Фон страницы */
    --body-quiet-color: #CCCCCC; /* Тихий текст */
    --body-loud-color: #FFFFFF; /* Выделенный текст */

    --breadcrumbs-fg: #4c516a; /* Цвет текста хлебных крошек */
    --breadcrumbs-link-fg: var(--primary); /* Цвет ссылок хлебных крошек */
    --breadcrumbs-bg: var(--secondary); /* Фон хлебных крошек */

    --link-fg: #A5C8FF; /* Цвет ссылок */
    --link-hover-color: #809DFF; /* Цвет при наведении */
    --link-selected-fg: #5B75FF; /* Цвет для выбранных ссылок */

    --hairline-color: #272727; /* Линии/границы */
    --border-color: #353535; /* Цвет границ */

    --error-fg: #FF7070; /* Ошибки */

    --message-success-bg: #00391A; /* Сообщение об успехе */
    --message-warning-bg: #49310A; /* Сообщение-предупреждение */
    --message-error-bg: #4D1212; /* Сообщение-ошибка */

    --darkened-bg: #1F1F1F; /* Чуть более темный фон */
    --selected-bg: #2D3AFF; /* Фон выделенного */
    --selected-row: #3A4BFF; /* Выделенная строка */

    --button-fg: #FFFFFF; /* Цвет текста кнопок */
    --button-bg: var(--primary); /* Основной фон кнопок */
    --button-hover-bg: #4A59FF; /* Фон кнопки при наведении */
    --default-button-bg: #4866e7; /* Фон второстепенных кнопок */
    --default-button-hover-bg: #6D78FF; /* Фон второстепенных кнопок при наведении */
    --close-button-bg: #5A5A5A; /* Кнопка закрытия */
    --close-button-hover-bg: #7A7A7A; /* Кнопка закрытия при наведении */
    --delete-button-bg: #FF4A4A; /* Кнопка удаления */
    --delete-button-hover-bg: #CC3939; /* Кнопка удаления при наведении */

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--default-button-bg);
    --object-tools-hover-bg: var(--default-button-hover-bg);
}

/* Контейнер для авторизации */
.login #container {
    width: 33em;
}


/* Контейнер для логотипа и текста */
#site-name {
    display: flex; /* Выравнивание по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    background-color: #fff; /* Белый фон для контейнера */
    padding: 5px 15px; /* Отступы вокруг содержимого */
    border-radius: 10px; /* Скругление углов */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень для глубины */
    gap: 15px; /* Отступ между */
}

/* Контейнер для логотипа с темным фоном */
.logo-container {
    padding-top: 5px; /* Отступ сверху */
}

/* Логотип без изменений */
.logo-icon {
    height: 30px; /* Размер логотипа */
}

/* Текст заголовка с темным цветом */
#site-name > .site-header {
    font-size: 16px; /* Размер шрифта заголовка */
    font-weight: bold; /* Полужирный текст */
    color: #333!important; /* Темный цвет текста, чтобы не сливаться с фоном */
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.3s ease; /* Плавное изменение цвета */
}

/* Эффект наведения для текста заголовка */
#site-name > .site-header:hover {
    color: #5775FF!important; /* Цвет текста при наведении */
}

/* Устанавливает жирный шрифт для ссылок в хлебных крошках */
div.breadcrumbs a {
    font-weight: bold;
}

/* Эффект наведения для ссылок в хлебных крошках */
div.breadcrumbs a:hover {
    color: #454c6e!important; /* Цвет текста при наведении */
}

input.custom-number-input::-webkit-outer-spin-button,
input.custom-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}