/* Переменные для цветов */
:root {
    --transition: 0.3s ease;
    --valid-color: rgba(76, 175, 80, 0.25); /* Мягкий зелёный для успешной валидации */
    --invalid-color: rgba(244, 67, 54, 0.25); /* Мягкий красный для ошибки */
    --focus-invalid-color: rgba(255, 152, 0, 0.25); /* Мягкий оранжевый для фокуса на ошибке */

    --header-height: 0px;
    --footer-height: 0px;

    /* Bootstrap переменные */
    --bs-body-color: var(--text-200);
    --bs-body-bg: var(--bg-100);
    --bs-border-color: var(--bg-300);

    /* Основные цвета */
    --bs-primary: var(--primary-100);
    --bs-secondary: var(--accent-100);
    --bs-success: var(--primary-300);
    --bs-info: var(--primary-200);
    --bs-warning: var(--accent-200);
    --bs-light: var(--bg-300);
    --bs-dark: var(--bg-100);

    /* Цвета текста */
    --bs-body-text-color: var(--text-100);

    /* Цвета кнопок */
    --bs-btn-bg: var(--primary-100);
    --bs-btn-border-color: var(--primary-100);
    --bs-btn-color: var(--text-100);

    /* Карточки */
    --bs-card-bg: var(--bg-200);
    --bs-card-color: var(--text-100);
    --bs-card-border-color: var(--bg-300);

    /* Поля ввода */
    --bs-input-bg: var(--bg-200);
    --bs-input-border-color: var(--bg-300);
    --bs-input-color: var(--text-100);

    /* Навигация */
    --bs-navbar-bg: var(--bg-200);
    --bs-navbar-color: var(--text-100);
    --bs-navbar-border-color: var(--bg-300);

    /* Таблицы */
    --bs-table-bg: var(--bg-200);
    --bs-table-border-color: var(--bg-300);
    --bs-table-color: var(--text-100);
    --bs-table-hover-bg: var(--bg-200);

    --bs-primary-rgb: var(--accent-100-rgb);

    --bs-secondary-bg: var(--bg-200);

    --bs-tertiary-bg: var(--primary-100);

    --bs-link-color: var(--text-200);
    --bs-link-color-rgb: var(--text-200-rgb);
    --bs-link-hover-color: var(--accent-200);
    --bs-link-hover-color-rgb: var(--accent-200-rgb);

    --bs-light-rgb: var(--bg-200-rgb);

    --bs-emphasis-color: var(--text-200);
    --bs-emphasis-color-rgb: var(--accent-100-rgb);

    --bs-white-rgb: var(--bg-100-rgb);
}

.link-primary:hover {
    color: var(--bs-link-hover-color) !important
}

.pagination {
    --bs-pagination-active-bg: var(--accent-100);
    --bs-pagination-active-border-color: var(--accent-100);
}

.table-light {
    --bs-table-bg: var(--bg-200);
    --bs-table-color: var(--text-200);
}

@media (max-width: 576px) {
    .c-theme-sm-200 {
        background-color: var(--bg-200);
    }

    .с-shadow-not-md-none {
        box-shadow: none;
    }
}

@media (min-width: 576px) {
    .с-shadow-md-none {
        box-shadow: none;
    }
}

html {
    height: fit-content;
    scroll-behavior: smooth;
}

/*
body {
    background-color: var(--bg-100);
    color: var(--text-200)
}
*/
main {
    align-items: center;
    transition: min-height 0.5s ease;
}

/* Общие стили для всех элементов с атрибутами валидации */
[pattern], [required], [max], [min], [minlength], [maxlength], [step] {
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Стили для правильных полей (включая фокус) */
[pattern]:user-valid, [required]:user-valid, [max]:user-valid, [min]:user-valid,
[minlength]:user-valid, [maxlength]:user-valid, [step]:user-valid,
[pattern]:focus:valid, [required]:focus:valid, [max]:focus:valid, [min]:focus:valid,
[minlength]:focus:valid, [maxlength]:focus:valid, [step]:focus:valid {
    box-shadow: 0 0 0 .25rem var(--valid-color);
    border-color: var(--valid-color);
}

/* Стили для неверных полей */
[pattern]:user-invalid, [required]:user-invalid, [max]:user-invalid, [min]:user-invalid,
[minlength]:user-invalid, [maxlength]:user-invalid, [step]:user-invalid {
    box-shadow: 0 0 0 .25rem var(--invalid-color);
    border-color: var(--invalid-color);
}

/* Стили для фокуса на неверных полях */
[pattern]:focus:invalid, [required]:focus:invalid, [max]:focus:invalid, [min]:focus:invalid,
[minlength]:focus:invalid, [maxlength]:focus:invalid, [step]:focus:invalid {
    box-shadow: 0 0 0 .25rem var(--focus-invalid-color);
    border-color: var(--focus-invalid-color);
}

.dropdown-toggle::after {
    font-size: 1.3rem;
    vertical-align: unset;
    color: var(--accent-100);
}

.card {
    --bs-card-bg: var(--bg-100);
    height: 100%;
    border-color: var(--bg-300);
}

.dropdown-menu {

    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--bg-200);
    --bs-dropdown-border-color: var(--bs-border-color-translucent);

    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-link-color: var(--accent-100);
    --bs-dropdown-link-hover-color: var(--accent-100);
    --bs-dropdown-link-hover-bg: var(--primary-100);
    --bs-dropdown-link-active-color: var(--primary-100);
    --bs-dropdown-link-active-bg: var(--accent-100);
    --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
    --bs-dropdown-header-color: #6c757d;

    color: var(--text-100);
    background-color: var(--bg-100);
    border: var(--bs-dropdown-border-width) solid var(--bg-300);
}

.dropdown-menu.show a.dropdown-item {
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
}

.text-black {
    color: var(--text-100);
}

.text-dark {
    color: var(--text-200);
}

.hover-opacity {
    opacity: .5;
    transition: all var(--transition);
}

.hover-opacity:hover {
    opacity: .9;
    transition: all var(--transition);
}

select {
    border-color: var(--bg-300);
}

.modal-title {
    color: var(--text-200);
}

.modal-footer, .modal-header, .border, .border-start, .border-end, .border-bottom, .border-top {
    border-color: var(--bg-300);
}

.btn-primary {
    --bs-btn-font-weight: 500;

    --bs-btn-border-color: transparent;
    --bs-btn-bg: var(--primary-100);
    --bs-btn-color: var(--primary-300);

    --bs-btn-hover-color: var(--text-100);
    --bs-btn-hover-bg: var(--primary-200);
    --bs-btn-hover-border-color: transparent;

    --bs-btn-active-color: var(--primary-300);
    --bs-btn-active-bg: var(--primary-200);
    --bs-btn-active-border-color: transparent;

    transition: all var(--transition);
}

.btn-primary[disabled] {
    --bs-btn-disabled-bg: var(--primary-100);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-color: var(--text-200);
}

.btn-light {
    background-color: var(--bg-200);
    border: none;
    color: var(--text-200);
    font-weight: 500;
    transition: all var(--transition);
}

.btn-light:hover {
    background: var(--bg-300);
    color: var(--text-100);
    transition: all var(--transition);
}

.btn-outline-primary {
    --bs-btn-font-weight: 500;

    --bs-btn-border-color: var(--primary-100);
    --bs-btn-color: var(--primary-300);

    --bs-btn-hover-border-color: var(--primary-200);
    --bs-btn-hover-color: var(--primary-300);
    --bs-btn-hover-bg: var(--primary-100);

    --bs-btn-active-color: var(--primary-300);
    --bs-btn-active-bg: var(--primary-200);
    --bs-btn-active-border-color: var(--primary-200);

    transition: color var(--transition);
}

.c-gd0, .c-gd90, .c-gd180 {
    color: var(--primary-300);
}

.c-gd0-primary {
    background: linear-gradient(0deg, var(--primary-100) 0%, var(--primary-200) 100%);
}

.c-gd90-primary {
    background: linear-gradient(90deg, var(--primary-100) 0%, var(--primary-200) 100%);
}

.c-gd180-primary {
    background: linear-gradient(180deg, var(--primary-100) 0%, var(--primary-200) 100%);
    color: var(--text-100);
}

.c-gd {
    background: linear-gradient(0, var(--bg-100) 0%, var(--bg-200) 100%);
}

.c-gd90 {
    background: linear-gradient(90deg, var(--bg-100) 0%, var(--bg-200) 100%);
}

.c-gd180 {
    background: linear-gradient(180deg, var(--bg-100) 0%, var(--bg-200) 100%);
}

.navbar {
    --bs-navbar-color: var(--accent-100);
}

a.active {
    color: var(--primary-300);
    font-weight: 500;
}

.hover:hover, tr.hover:hover td {
    background: rgba(39, 97, 161,.25);
    color: var(--text-100);
    transition: all var(--transition);
    cursor: pointer;
}

/* Настройка шрифта и его размера для CodeMirror */
.CodeMirror {
    font-family: 'Fira Code', monospace; /* Используйте шрифт, подходящий для программирования */
    font-size: 14px; /* Настройте размер шрифта по вашему усмотрению */
    line-height: 1.5; /* Настройте межстрочный интервал для улучшенного восприятия */
    /* height: 100vh;
    max-height: 460px; */
}

@media (max-width: 767px), (max-height: 440px) {
    .CodeMirror {
        font-size: .625rem !important;
    }
}

/*
.CodeMirror, .CodeMirror-gutter {
    background-color: var(--bg-200);
    border-color: var(--bg-300);
    border-radius: var(--bs-border-radius);
}
*/

.img-thumbnail {
    background-color: #3174b8;
    border-color: #3174b8;
}

.table {
    --bs-table-striped-bg: var(--bg-200);
    --bs-table-hover-bg: var(--bg-200);
    --bs-table-color: var(--text-200);
}

/* table td, table th {
    background-color: var(--bg-200);
    box-shadow: 0 0 0 1px var(--bg-300);
    color: var(--text-200);
} */

/*
tr:hover td {
    box-shadow: 0 0 0 transparent, 0 -1px 1px var(--bg-300);
    cursor: pointer;
    transition: all var(--transition);
}
*/

.table input {
    background-color: var(--bg-100);
    border-color: var(--bg-300);
    color: var(--text-200);
}

textarea::placeholder, input::placeholder {
    color: var(--bg-300);
}

.bg-light {
    background-color: var(--bg-200) !important;
    border-color: var(--bg-300);
    color: var(--text-200);
}

.bg-light textarea,
.bg-light input,
.bg-light select {
    background-color: var(--bg-100);
    border-color: var(--bg-300);
    color: var(--text-200);
}

input:checked, .form-check-input:checked {
    background-color: var(--accent-200);
    border-color: var(--bg-300);
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #D9D9D9;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
            to bottom,
            #D9D9D9 0px,
            #FFFFFF 15px,
            #FFFFFF 100%
    );
}

.overflow-auto::-webkit-scrollbar-track {
    opacity: 0;
}

.overflow-auto::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.overflow-auto:hover::-webkit-scrollbar-track {
    background: linear-gradient(
            to bottom,
            #D9D9D9 0px,
            #FFFFFF 15px,
            #FFFFFF 100%
    );
    transition: all var(--transition);
}

.overflow-auto:hover::-webkit-scrollbar-thumb {
    background: var(--primary-100);
    transition: all var(--transition);
}

.overflow-auto:hover::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
            to bottom,
            #D9D9D9 0px,
            #FFFFFF 15px,
            #FFFFFF 100%
    );
    transition: all var(--transition);
}

.d-hover {
    opacity: 0;
}

.d-hover:hover {
    opacity: unset;
}

.bg-no-repeat {
    background-repeat: no-repeat;
}

.bg-cover {
    background-size: cover;
}

.bg-center {
    background-position: center;
}

.sortable-added {
    opacity: .7;
    background-color: var(--primary-200); /* Светло-серый фон для лучшей видимости */
    outline: 1px dashed var(--accent-100); /* Пунктирная граница */
    transition: all 0.3s ease; /* Плавный переход для всех изменений */
}

.shadow-inset {
    box-shadow: inset var(--bs-box-shadow);
}

.shadow-inset-sm {
    box-shadow: inset var(--bs-box-shadow-sm);
}

.htmx-loader {
    --loader-size: 64px;
    --loader-scale-duration: .3s;
}

body.htmx-loader {
    height: 100%;
}

.htmx-loader {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    cursor: wait;
    height: auto;
    width: 100%;
    pointer-events: none;
}

.htmx-loader > * {
    opacity: .4;
    filter: blur(5px);
}

.htmx-loader:before {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    max-width: var(--loader-size);
    max-height: var(--loader-size);
    background-image: url(../images/gif/loader.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
    animation: scaleUp var(--loader-scale-duration) ease-in-out forwards;
}

@keyframes scaleUp {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: .5;
    }
    80% {
        transform: translate(-50%, -50%) scale(1.1); /* Легкий overshoot эффект */
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.system__element-insertion-zone {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .6;
    background-color: var(--primary-100);
    color: var(--accent-100);
    border: 1px dashed var(--accent-100);
    transition: opacity 0.3s ease, border 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.system__element-insertion-zone:hover {
    opacity: 1;
    border-style: solid;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

a.system__element-insertion-zone:hover i {
    color: var(--accent-100);
}

.modal {
    cursor: pointer; /* Курсор указывает, что элемент можно кликнуть */
    /* backdrop-filter: blur(3px); */
    background-color: rgba(0, 0, 0, .65);
}

.modal-content {
    position: relative; /* Установим позицию для модального контента */
    cursor: auto;
}

.modal-content .modal-close-button {
    position: fixed;
    cursor: pointer;
    line-height: 1;
    right: .1rem; /* Увеличиваем расстояние от правого края */
    top: .1rem;
    font-size: 1.8rem; /* Увеличиваем размер символа */
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Добавляем тень */
    opacity: 0.75;
    transition: opacity 0.3s ease; /* Плавная смена прозрачности */
    z-index: 5;
}

.modal-content .modal-close-button:hover {
    opacity: 1;
}

.modal-content .modal-close-button::before {
    content: "\F659";
    font-family: "bootstrap-icons";
}

/* Настройки фона модального окна */
.modal-backdrop {
    /* opacity: 0.65; /* Увеличиваем видимость фона */
    visibility: hidden;
}


i.bi {
    line-height: 1;
}

.text-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-md {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.text-shadow-lg {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
}

.text-shadow-xl {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
}

.text-container {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px; /* Ширина контейнера */
    display: inline-block;
}

.CodeMirror i {
    opacity: .5;
}

.CodeMirror i:hover {
    opacity: 1;
}

.CodeMirror-guttermarker-subtle {
    color: #999;
    font-size: 1.4rem;
    line-height: .9;
    margin-left: -2px;
}

.cm-attribute-server {
    color: #7f0055; /* Более яркий красный с лучшей читаемостью */
    font-weight: bold;
}

.cm-value-server {
    color: #7f0055; /* Более яркий красный с лучшей читаемостью */
}

.cm-placeholder {
    color: #7f0055; /* розово-фиолетовый */
    font-weight: bold;
}

.cm-htmx {
    color: #7f6400; /* Умеренно яркий зеленый */
    font-weight: bold;
}

label {
    position: relative;
    cursor: pointer;
}

label > img {
    display: block;
    width: 100%; /* Убедитесь, что изображение имеет нужный размер */
}

label:has(img):hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Полупрозрачное затемнение */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Плавное затемнение и тень */
}

label:has(img):hover::after {
    content: '\F219'; /* Код значка из библиотеки Bootstrap Icons */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: .6;
    font-size: 3rem;
    transform: translate(-50%, -50%);
    color: white;
    z-index: 2;
}

.input-group:has(input:focus) label i {
    color: var(--text-200) !important
}

.hover-zoom {
    transition: transform 0.3s ease;
}

.hover-zoom:hover {
    transform: scale(1.1);
}

.animate__hover:hover {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#debug-server-info {
    height: 64px;
    background-color: var(--bg-300);
    z-index: 1;
}

#debug-server-info.show {
    max-height: 45vh;
    height: 500px;
    overflow: scroll;
}

#debug-server-info #demo-activity {
    height: 300px
}

#debug-server-info #demo-activity div {
    vertical-align: top
}

#debug-server-info #demo-activity ol li {
    list-style-position: inside;
}

#debug-server-info #demo-canvas {
    margin-bottom: 500px;
    padding-top: 12px;
}

:has(>input[type="password"], >input.password-type) {
    position: relative
}

:has(>input[type="password"], >input.password-type)::after {
    content: '\F340'; /* Unicode for bi-eye icon */
    font-family: 'bootstrap-icons';
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--bg-300);
}

:has(>input.toggle.password-type)::after {
    content: '\F341'; /* Unicode for bi-eye icon */
}

.bg-gradient {
    background: linear-gradient(180deg, var(--bg-100) 0%, var(--bg-200) 100%);
}

.sortable .handle {
    cursor: grab
}