/* static/style.css */

/* variables */
:root {
    --dark-text-color: rgb(97, 72, 51);
    --light-text-color: rgb(252, 245, 226);
    --accent-light: rgb(199, 167, 110);
    --accent-dark: rgb(113, 112, 100);
    --accent-attention: rgb(197, 51, 7);
    --accent-attention-light: rgb(228, 164, 144);
    --main-btn-color: rgb(140, 107, 79);
    --main-btn-color-hover: rgb(210, 167, 110);
    --main-border-color: rgb(28, 22, 16);
    --main-background-color: rgb(241, 236, 227);
    --main-background-color-light: rgb(241, 236, 227);
    --main-background-color-dark: rgb(28, 22, 16);
    --hightlight-color-light: rgba(210, 167, 110, 0.32);
    --main-text-block-height: 20px;
    --dark-line-color: rgba(97, 72, 51, 0.271);
    /* для универсального popup: */
    --popup-backdrop: rgba(0,0,0,.45);
    --popup-bg:#111827; 
    --popup-bg-light:#fff;
    --popup-fg:#e5e7eb; 
    --popup-fg-dark:#111827;
    --popup-radius:14px; 
    --popup-shadow:0 10px 30px rgba(0,0,0,.3);
    --popup-anim-ms:180ms; 
    --popup-width-sm:360px; 
    --popup-width-md:520px; 
    --popup-width-lg:720px;
  }

/* default settings reset */

html {
    box-sizing: border-box;
}
  
*,
*::before,
*::after {
    box-sizing: inherit;
}

a {
    color: inherit;
    text-decoration: none;
    font-style: inherit;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    display: inline-block;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

li {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

body {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    min-width: 320px;
    width: 100%;
}

/* end of default settings reset */


/* Универсальные стили (utility) */


.flex_column {
    display: flex;
    flex-direction: column;
}

.flex {
    display: flex;
    
}

.hide {
    display: none !important;;
}


/* Общие стили элементов */

.body {
    display: flex;
    flex-direction: column;
    background-color: var(--main-background-color-light);
}


.title {
    margin: 0;
}

.btn {
    display: inline-block;
    max-width: 150px;
    min-width: 80px;
    max-height: 50px;
    min-height: 40px;
    padding: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: var(--main-btn-color);
    color: var(--light-text-color);
    text-align: center;
    border-radius: 5px;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    border-style: solid;
    border-color: var(--main-border-color);
    border-width: 1px;
    transition: background-color 0.3s ease;
}


.btn:hover {
    background-color: var(--main-btn-color-hover);
}

.control-btn {
    width: 30px;
    height: 30px;
}






.input {
    height: var(--main-text-block-height);
    border: none;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
    padding: 5px 10px;
    background-color: var(--main-background-color-light);
    outline: 1px solid var(--main-background-color-dark);
    border-radius: 5px;
    width: 100%;
    min-width: 80px;
}

.select {
    height: var(--main-text-block-height);
    width: 100%;
    min-width: 80px;
    padding: 0 10px;
    margin-right: 0;
    margin-bottom: 0;
    border: none;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
    background-color: var(--main-background-color-light);
    outline: 1px solid var(--main-background-color-dark);
    border-radius: 5px;
    appearance: none; /* Убирает стандартный стиль браузера */
    cursor: pointer;
}

/* --- Кастомный чекбокс в фирменной гамме --- */
.checkbox {
    /* скрыть дефолтный */
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--main-background-color-light);
    border: 2px solid var(--main-border-color);
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: border 0.2s, box-shadow 0.2s;
    vertical-align: middle;
    position: relative;
}

.checkbox:checked {
    background-color: var(--accent-light);
    border-color: var(--main-btn-color);
    box-shadow: 0 0 0 2px var(--hightlight-color-light);
}

.checkbox:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid var(--main-background-color-dark);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.checkbox:focus {
    box-shadow: 0 0 0 2px var(--accent-light);
}

.checkbox:hover {
    border-color: var(--main-btn-color-hover);
}

.checkbox:disabled {
    background-color: var(--main-background-color-light);
    border-color: var(--main-border-color);
    cursor: not-allowed;
}


.label {
    color: var(--dark-text-color);
    font-size: 1.1rem;
    font-weight: bold;
}

.label--checkbox {
    display: flex;
    align-items: center;
    gap: 25px;
}


.textarea {
    width: 100%;
    min-height: 90px;
    padding: 8px 12px;
    border-radius: 5px;
    border: none;
    outline: 1px solid var(--main-background-color-dark);
    background-color: var(--main-background-color-light);
    color: var(--dark-text-color);
    font-size: 15px;
    font-family: inherit;
    resize: vertical; /* можно менять высоту */
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.08);
    transition: box-shadow 0.18s, outline 0.18s;
}

.textarea:focus {
    outline: 2px solid var(--main-btn-color);
    box-shadow: 0 0 4px var(--hightlight-color-light);
}

.textarea:disabled {
    background-color: var(--main-background-color);
    color: var(--accent-dark);
    cursor: not-allowed;
}


/* Контейнеры */

.container {
    width: 100%;    
    height: 100%;
    max-width: 1600px;   
    margin-left: auto;    
    margin-right: auto;
    padding: 15px 15px;
    background-color: transparent;
}



.box {
    padding: 10px;
}


/* блок авторизации */

.main-auth__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
    width: 450px;
    height: 450px;
    background-color: rgba(255, 255, 239, 0.9); 
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); 
    border-radius: 5px; 
    padding: 15px; 
    transform: translateX(-27vw);
    color: var(--dark-text-color);
}

.auth-register {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.auth-register__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.auth-register__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.auth-register__item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    
    color: inherit;
}

.auth-register__input {
    max-width: 270px;
}

.auth-register__error {
    color: var(--accent-attention);
    font-size: 0.9rem;
    font-weight: bold;
}

.auth-register__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}




.title-auth {
    margin: 0;
    padding: 0;
    color: inherit;
}



.auth-register__btn {
    margin-right: auto;
    margin-left: auto;
}

.auth-register__link {
    font-size: 1.1rem;
    font-weight: bold;
}

.auth-register__link:hover {
    color: var(--main-btn-color-hover);
}

.main-auth {
    display: flex;
    justify-content: center; 
    align-items: center;  
    background-image: url("/static/pic/radiologary_main_image.jpg"); 
    background-size: cover;    
    background-position: center; 
    background-repeat: no-repeat; 
    width: 100vw;                
    height: 100vh;             
}



/* Блок header */
.header {
    width: 100%;
    background-color: var(--main-background-color-dark);
}

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

.header__logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* чтобы не искажалось изображение */
}

.header__logo--link {
    display: block;
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 5px;
    background-color: var(--light-text-color);
}

.header__nav {
    flex-grow: 1;
    margin-left: 20px;
}

.header__menu {
    display: flex;            
}

.header__menu-item {
    margin-right: 15px;         
}

.header__menu-link {
    color: var(--light-text-color);
    font-weight: 500;            
    transition: color 0.3s;     
}

.header__menu-link:hover {
    color: var(--accent-light);
}

.header__paragraph {
    font-size: 10px;           
    color: var(--light-text-color);          
}


.header__paragraph--data {
    font-size: 12px;           
    color: var(--light-text-color);          
}

.header__paragraph--version {
    font-size: 12px;           
}



.header__exit {
    text-decoration: none;       
    color: var(--accent-attention);       
    font-weight: 600;           
    transition: color 0.3s;      
}

.header__exit:hover {
    color: var(--accent-attention-light);
}

.header__user-box {
    display: flex;
    flex-direction: column;
    max-width: 120px;
    align-items: start;        
    color: var(--light-text-color); 
    cursor: pointer;
    margin-right: 15px;
}



/* Блок main */
.main {
    margin-bottom: 20px;
} 


.main__title {
    margin-bottom: 20px;          
             
}

.main__body {
    min-height: 70vh; 
}

.main__heading {
    padding: 15px;
    font-size: 2rem;            
    color: var(--dark-text-color);              
    margin: 0;
    line-height: 1.2;
}



/* Блок footer */

.footer {
    width: 100%;
    background-color: var(--main-background-color-dark);
}

.footer__paragraph {
    color: var(--light-text-color);
    font-size: 12px;
    padding: 5px 0;
}



/* Остальные стили */





.section {
    display: flex;
    flex-direction: column;
    margin: 0 25px 25px 0;
}




.report__list {
    display: flex;
    flex-direction: column;
}

.text {
    margin: 0;
    padding: 5px;
    margin-top: 5px;
}

.left-side-container {
    width: 75%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.right-side-container {
    width: 24%;
    padding: 15px;
    position: sticky;
    top: 10px; 
    align-self: flex-start; 
    height: fit-content; 
    border-left: 1px solid var(--dark-line-color);
}


.sentence-select{
    max-width: 100%;
}



.edit-paragraph__input{
    font-size: 14px; /* сдублировал с .input чтобы не оставлять класс пустым */
}





.report__select {
    width: 90%;
    max-height: 25px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    border-color: var(--main-border-color);
}

.report__select--type {
    width: auto;

}


.report__sentence {
    display: inline;
    max-height: 25px;
    margin-right: 8px;
    vertical-align: middle;
}

.report__sentence.editing {
    color: darkred;
}


.report_label__list {
    margin-bottom: 10px;
}


.report_borderline {
    min-height: 2px;
    width: 50%;
    margin-bottom: 10px;
    background-color: var(--main-bg-color);
}




.paragraph__text--bold {
    text-transform: uppercase;
}

.paragraph__item--inactive {
    display: none;
}

.paragraph__item {
    margin-bottom: 7px;
}

.paragraph__text {
   font-weight: bold;
}


/* Стиль для правой часть working_with_report */

.report-controlpanel__inactive-paragraphs-list {
    font-size: 14px;
    list-style-type: none;
}

.report-controlpanel__inactive-paragraphs-item {
    margin-bottom: 5px;
    cursor: pointer;
}



.edit-report__input-block {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-right: 10px;
}


.edit-paragraph__title-wrapper {
    display: flex;
    align-items: center;
}

.edit-paragraph__title {
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.edit-sentence__item {
    font-size: 16px;
}

/* Блок для edit-paragraph */
.edit-paragraph__title--invisible {
    color: #1212126d;
}

.control-buttons__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 5px;
}

.control-buttons {
    display: flex;
    justify-content: space-between;
    padding: 2px 4px;
}

.control-info-icons {
    display: flex;
    justify-content: right;
    padding: 2px 4px;
    min-width: 60px;
}

.drag-handle {
    cursor: grab;
    padding: 4px;
    font-size: 18px;
    margin-right: 5px;
    user-select: none;
    align-self: center;
}

.sortable-ghost {
    opacity: 0.5;
    background: #f0f0f0;
}






.report_form__item {
    margin-top: 10px;
}

.report_input__item {
    width: 100%;
    padding: 5px;
}

.btn {
    max-width: 100px;
    max-height: 50px;
    padding: 5px 5px;
    cursor: pointer;
}




/* Блок PopUp */

/* Основной стиль для всплывающего окна working_with_report */
.popup {
    position: absolute;  /* Позволяет динамически задавать координаты через JS */
    background-color: #fff;  /* Белый фон */
    border: 1px solid #ccc;  /* Легкая рамка */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  /* Тень для красивого эффекта */
    padding: 10px;  /* Отступы внутри окна */
    z-index: 1000;  
    display: none;  /* Изначально скрыто */
    max-width: 900px; /* Ограничение на ширину */
    overflow-y: auto; /* Скроллинг, если список предложений слишком длинный */
}

/* Стили для списка внутри попапа */
.popup ul {
    list-style-type: none;  /* Убираем стандартные маркеры списка */
    margin: 0;
    padding: 0;
}

.popup ul li {
    padding: 5px 10px;
    cursor: pointer;  /* Указываем, что элементы списка можно кликать */
    border-bottom: 1px solid #eee;  /* Разделяем предложения линией */
}

.popup ul li:hover {
    background-color: var(--main-background-color-light)  /* Подсветка при наведении */
}


/* Блок кружочка */

/* Основной стиль для кружка "+" */
.plus-circle {
    position: absolute;  
    background-color: var(--main-btn-color);  
    border-radius: 50%;  
    width: 20px;  
    height: 20px;  
    display: none;  
    align-items: center;  
    justify-content: center;
    z-index: 1000;  
    cursor: pointer;  
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  
    transition: transform 0.2s ease;  
}

/* Стили для внутреннего текста (знак "+") */
.plus-circle::before {
    content: "+";  /* Текст внутри кружка */
    font-size: 24px;
    color: white;  /* Белый цвет знака "+" */
    display: block;
}

/* Эффект при наведении на кружок */
.plus-circle:hover {
    transform: scale(1.1);  /* Легкое увеличение кружка при наведении */
    cursor: pointer;  /* Меняем курсор на "указатель", как при наведении на ссылку */
}


.sentence {
    /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);   */
    border-radius: 4px; 
    padding: 2px 4px; 
}

/* Блок стиля предложений у которых есть всплывающие предложения */
.has-linked-sentences-highlighted-sentence {
    background-color: var(--hightlight-color-light);
}

/* Блок стиля предложений которые были изменены */
.was-changed-highlighted-sentence {
    color: var(--light-text-color);
    background-color: var(--accent-dark);     
}




.icon-btn {
    width: 18px; 
    height: 18px; 
    margin-right: 5px;
    background-size: contain; 
    border: none; 
    cursor: pointer; 
    transition: transform 0.3s ease; 
}

.icon-btn.expanded {
    transform: rotate(180deg); 
}






.temporary_wide {
    width: 500pt;
    max-width: 100%;
}


.sentence-separator {
    border: 0;
    height: 1px;
    width: 70%;
    background-color: var(--dark-line-color);
    margin: 10px 0;
}

/* Скрываем стандартный вид select */
.report__select_dynamic {
    display: inline;
    appearance: none; /* Убираем стандартный стиль select */
    -webkit-appearance: none; /* Для Safari */
    -moz-appearance: none; /* Для Firefox */
    background:transparent; 
    border: none; 
    color: rgb(191, 50, 50); 
    font-weight: bold; 
    cursor: pointer;
    padding: 0; 
    margin: 0; 
    text-indent: 0;
}




.red-highlight {
    color: var(--accent-attention);
    font-weight: bold;
}


.edit_delete_buttons_group {
    display: flex;
    margin: 0 25px 0 25px;
}


/* Стили для блока данных в admin-data */

.admin-filters__field--columns {
    margin-left: 20px;
}

.admin-data__table {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.admin-data__table h3 {
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #333;
}

.admin-data__table-element {
    width: 100%;
    border-collapse: collapse;
}

.admin-data__table-element th, .admin-data__table-element td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
}

.admin-data__table-element th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.admin-data__action-cell {
    min-width: 150px;
    text-align: center;
}


.edit-paragraph__form--sentence {
    min-width: 100%;
}


/* Стили для попапа в edit_report */
.paragraph-popup {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    font-size: 14px;
    min-width: 200px;
    white-space: nowrap;
}



.paragraph-popup-btn--save {
    background-color: #007bff;
    color: white;
    padding: 5px;
    border: none;
    cursor: pointer;
}


/* Стиль для предложения в edit_sentence */
.edit-sentence__text {
    font-size: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
/* Стили для my_reports */
.report-card__item--short{
    width: 70px;
}



/* стиль для карточки предложения в edit_report */

.wrapper__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 1px;
    padding: 3px 5px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    width: 100%;
    min-height: 60px;
}


/* Стили для попапа буфера обмена */

.buffer-popup {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 2px solid #ccc;
    padding: 20px;
    width: 600px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 9999;
    border-radius: 8px;
}

.buffer-popup__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.buffer-popup__content {
    margin: 15px 0;
    max-height: 300px;
    overflow-y: auto;
}

.buffer-popup__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    border-bottom: 1px solid #eee;
}

.buffer-popup__text {
    flex-grow: 1;
    margin-right: 10px;
}

.buffer-popup__text--report-type {
    font-weight: bold;
    color: var(--accent-attention);
}

.buffer-popup__footer {
    display: flex;
    justify-content: space-between;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
}




/* === Ripple Effect === */
/* Стили связанные с редактирование предложений */
.edit-sentence__links-icon--is-linked {
    display: inline-block; /* чтобы размеры были видны */
    width: 16px;
    height: 16px;
    position: relative; /* важно для ripple */
    cursor: pointer;
}

.sentence-popup {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    min-width: 200px;
    max-width: 300px;
    font-size: 14px;
    border-radius: 5px;
}


.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-effect 0.6s linear;
    background-color: rgba(0, 0, 0, 0.3); /* Цвет круга */
    pointer-events: none; /* Чтобы не мешать клику */
    z-index: 100;
  }
  
  @keyframes ripple-effect {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }

  

/* Это стиль для выделения главного предложения при изменении настроек профиля */
.wrapper__card--sentence-head {
    background-color: var(--main-background-color);
}
.wrapper__card--tail {
    background-color: var(--hightlight-color-light)
}

.wrapper__card--text {
    background-color: #dff0d3c8;
}

.wrapper__card--impression {
    background-color: #aebaa5ca;
}

.edit-sentence__wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.edit-sentence__wrapper--short {
    width: 120px;
}

.edit-sentence__label--text {
    width: 180px;
}
   
.edit-sentence__input--text {
    min-height: 40px;
}

.input--short {
    width: 40px;
}

.input--wide {
    flex-grow: 1;
    width: 100%;
}

/* редактирование параграфа */

.edit-sentence__title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.edit-sentence__title-span{
    cursor: pointer;
}


/* кружок в создании нового протокола */

.existing-fewreports__order-circle {
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--main-btn-color);
    color: white;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    margin-left: 10px;
}

/* Стили для настроек профиля */

.settings-block__item--changed {
    background-color: #a8acf5;
}



/* Это стиль для заглушки лоадера */
#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.hidden-loader {
    opacity: 0;
    pointer-events: none; /* Чтобы нельзя было кликнуть по скрытому лоадеру */
}

.loader-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Стили для попапа в my_reports*/
.popup-my-reports {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
    background: white;
    padding: 20px;
    width: 70%;
    margin: 10% auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}

.paragraph-block {
    padding: 10px;
    border-radius: 6px;
    background: #f1f3f5; /* Светлый фон */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Легкая тень */
    border-left: 4px solid #007bff; /* Цветной левый бордер */
    margin-bottom: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.paragraph-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.paragraph-block p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* Разные цвета для отчетов разные цвета не работают, нужно разобраться с кодом js позже настрою чтобы разными цветами подсвечивались разные варианты (например одним цветом, когда текст параграфа совпадает)*/



/* Стили для попапа в working_with_report*/

.selected-sentence {
    background-color: var(--hightlight-color-light);
}

/* Ключевые слова */
.keyword-highlighted {
    color: var(--accent-attention);
    cursor: pointer;
}

.keyword-highlighted--light {
    color: var(--accent-attention-light);
}

.icon-btn--add-sentence {
    display: inline;
    vertical-align: middle;    
}


/* Блок share-popup */

.share-popup {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-radius: 5px;
}

.share-popup__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.share-popup__input {
    padding: 8px;
    font-size: 14px;
}

.share-popup__btn {
    background-color: #0069d9;
    color: white;
    padding: 6px 12px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.share-popup__btn--close {
    background-color: #ccc;
    color: #333;
}

.share-popup__error {
    font-size: 14px;
}


/* Стили для report_creation */

.report-creation__container{
    display: flex;
    flex-direction: column;
}

.report-creation__container--action{
    width: 30%;
}

.report-creation__container--selection{
    width: 70%;
}

.report-creation__data-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    padding: 10px;
}

/* Стили для popup */


.popup-str-button {
    cursor: pointer;
    margin-bottom: 10px;
}

.popup-str-button:hover {
    background-color: #007bff;
    color: white;
}


/* help-block */

.help-text {
    max-width: 80%;
    font-size: 16px;
    color: #434141; /* нейтрально-серый */
    line-height: 1.2;
    margin-top: 8px;
    margin-bottom: 12px;
}

/* Стили для страницы 404 (Not Found) */
.notfound-container {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--dark-text-color, #3a5c66);
}
.notfound-title {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.85;
}
.notfound-subtitle {
    font-size: 1.2rem;
    margin-bottom: 20px;
    opacity: 0.75;
}
.notfound-btn {
    background-color: var(--main-btn-color, #3a5c66);
    color: #fff;
    padding: 10px 22px;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s;
}
.notfound-btn:hover {
    background-color: var(--main-btn-color-hover, #192730);
}


/*Стили для создания нового профиля*/

.creation-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    margin: 0;
}

.creation-profile__block {
    width: 100%;
    margin-bottom: 20px;
}

/* Стили для выпадающего меню для выбора профиля */

/* chooseProfilePopup (выбор профиля) */

.choose-profile-popup {
    position: absolute;
    top: 60px; /* чуть ниже header */
    right: 20px;
    min-width: 260px;
    max-width: 340px;
    background: var(--main-background-color-light);
    border: 1.5px solid var(--main-border-color);
    box-shadow: 0 8px 24px rgba(28,22,16,0.18);
    border-radius: 8px;
    z-index: 2000;
    padding: 20px 18px 14px 18px;
    font-size: 15px;
    color: var(--dark-text-color);
    animation: fadeInPopup 0.2s;
}

/* Анимация появления */
@keyframes fadeInPopup {
    from { opacity: 0; transform: translateY(-15px);}
    to { opacity: 1; transform: translateY(0);}
}

.choose-profile-popup__title {
    margin-bottom: 10px;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--main-btn-color);
    text-align: left;
}

.choose-profile-popup__list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.choose-profile-popup__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0 7px 3px;
    border-bottom: 1px solid var(--main-background-color-dark);
    cursor: pointer;
    transition: background 0.18s;
}


.choose-profile-popup__item:last-child {
    border-bottom: none;
}

.choose-profile-popup__item:hover {
    background: var(--hightlight-color-light);
}


.choose-profile-popup__text {
    flex: 1 1 auto;
    cursor: pointer;
    color: var(--dark-text-color);
    font-size: 15px;
}

.choose-profile-popup__label:hover {
    color: var(--main-btn-color-hover);
}

.choose-profile-popup__link {
    font-style: italic;
    color: var(--accent-light);
    font-weight: 500;
    padding-left: 3px;
}

/* Скроем popup по умолчанию, если не управляется через inline-style */
.choose-profile-popup[style*="display: none"] {
    display: none !important;
}

/* Responsive fix for mobile */
@media (max-width: 600px) {
    .choose-profile-popup {
        right: 5px;
        left: 5px;
        min-width: unset;
        max-width: unset;
        width: auto;
        padding: 14px 6px 10px 8px;
        font-size: 14px;
    }
}

.choose-profile-popup__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: var(--main-btn-color-hover);
    cursor: pointer;
    z-index: 2010;
    transition: color 0.15s;
    padding: 0;
    line-height: 1;
}

.choose-profile-popup__close:hover {
    color: var(--main-btn-color);
}

/* Стили настройки протоколов */
.report-settings__section--types {
    width: 35%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-settings__section--subtypes {
    width: 60%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-settings__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background-color: var(--main-background-color-light);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.report-settings__box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Стили для чекбоксов в настройках протоколов */
.editor-checkboxes {
    display: flex;
    margin: 0 10px 0 0;
    gap: 8px;
}


/* попап для динамики в working_with_report */
.dynamics-popup {
    position: fixed;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    max-width: 1100px;
    background-color: var(--main-background-color-light);
    border: 2px solid var(--main-border-color);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    padding: 25px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dynamics-popup__title {
    font-size: 1.5rem;
    color: var(--dark-text-color);
    margin: 0;
}

.dynamics-popup__textarea {
    width: 100%;
    min-height: 300px;
    padding: 12px;
    margin-right: 10px;
    border: 1px solid var(--main-border-color);
    border-radius: 6px;
    background-color: var(--main-background-color);
    resize: vertical;
    font-size: 14px;
    color: var(--dark-text-color);
    font-family: inherit;
}

.dynamics-popup__error {
    color: var(--accent-attention);
    font-weight: bold;
    display: block;
}

.dynamics-popup__actions {
    display: flex;
    justify-content: start;
     gap: 10px;
    flex-wrap: wrap;
}

.dynamics-popup__footer{
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    gap: 10px;

}


#aiDynamicBlock {
    margin-top: 15px;
    padding: 12px 16px;
    background-color: var(--main-background-color-light); /* светлый фон */
    border-left: 4px solid var(--main-btn-color); /* основной цвет кнопки */
    border-radius: 4px;
    font-size: 0.95rem;
    color: var(--main-text-color);
}

/* Блок неклассифицированных предложений (misc_sentences) */
.ai-response-block {
    background: var(--main-background-color);
    border-left: 4px solid var(--accent-attention);
    border-radius: 5px;
    padding: 12px 18px;
    margin: 18px 0 12px 0;
    box-shadow: 0 2px 8px rgba(97, 72, 51, 0.07);
}

.ai-response-header {
    color: var(--accent-attention);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1.04rem;
    letter-spacing: 0.5px;
}

.ai-response-list {
    padding-left: 20px;
    margin: 0;
    list-style-type: disc;
}

.ai-response-list li {
    color: var(--dark-text-color);
    font-size: 0.98rem;
    margin-bottom: 6px;
    line-height: 1.5;
    cursor: pointer;
}

.prevReportOverlay {
    display:none; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100vw; 
    height:100vh; 
    background:white; 
    color:black; 
    z-index:9999; 
    overflow:auto; 
    font-size:1.2rem; 
    white-space:pre-wrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.prevReportOverlay.show {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

.prevReportTextTitle {
    max-width: 70%;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 20px;
    color: var(--main-btn-color);
}

.prevReportText {
    margin-top: 30px;
    margin-left: 0;
    padding: 20px;
    max-width: 70%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.prevReportCloseButton {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--main-btn-color);
    z-index: 10001;
}

.prevReportCloseButton:hover {
    color: var(--main-btn-color-hover);
}

/* Прогресс бар для загрузки */
.dynamics-progress-container {
    
    margin: 0;
    width: 98%;
    min-width: 100px;
    max-width: 300px;
}

.dynamics-popup__progress-bar {
    --progress-width: 0%;
    height: 18px;
    background: var(--main-background-color);
    border: 1.5px solid var(--main-btn-color);
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(140,107,79,0.07);
    position: relative;
    margin-top: 4px;
}

.dynamics-popup__progress-bar::before {
    content: "";
    display: block;
    height: 100%;
    width: var(--progress-width, 0%);
    background: linear-gradient(90deg, var(--main-btn-color) 0%, var(--accent-light) 100%);
    border-radius: 9px 0 0 9px;
    transition: width 0.3s;
    position: absolute;
    left: 0; top: 0;
    z-index: 1;
}

/* Показываем процент поверх бара */
.dynamics-popup__progress-bar-label {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--dark-text-color);
    z-index: 2;
    line-height: 18px;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px #fff9;
    pointer-events: none;
}

.dynamics-popup__progress-bar-text {
    font-size: 13px;
    color: var(--main-btn-color);
    margin: 0 0 0 2px;
    font-weight: 500;
    letter-spacing: 0.01em;
}



/* ==== AI Generator Block ==== */
.ai-generator__container {
    background-color: var(--main-background-color-light);
    border: 1px solid var(--main-border-color);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(97, 72, 51, 0.07);
    padding: 18px 18px 12px 18px;
    margin-top: 10px;
    margin-bottom: 16px;
    max-width: 1100px;
    min-width: 440px;
}

.ai-generator__container h3 {
    color: var(--main-btn-color);
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 1.2rem;
    font-weight: 600;
}

.ai-generator__textarea {
    width: 100%;
    min-height: 290px;
    resize: vertical;
    padding: 10px 12px;
    font-size: 15px;
    border: 1.5px solid var(--main-border-color);
    border-radius: 6px;
    background: var(--main-background-color);
    color: var(--dark-text-color);
    margin-bottom: 16px;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(97, 72, 51, 0.08);
    transition: border-color 0.2s;
}

.ai-generator__textarea:focus {
    border-color: var(--main-btn-color);
    outline: 2px solid var(--main-btn-color-hover);
}

.ai-generator__dropzone {
    border: 2px dashed var(--accent-light);
    border-radius: 7px;
    background: rgba(199, 167, 110, 0.07);
    padding: 18px 10px 12px 10px;
    text-align: center;
    color: var(--dark-text-color);
    min-width: 320px;
    max-width: 420px;
    min-height: 85px;
    margin-right: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.ai-generator__dropzone.dragover {
    border-color: var(--main-btn-color-hover);
    background: rgba(199, 167, 110, 0.17);
}

.ai-generator__preview {
    margin-top: 9px;
    font-size: 0.95rem;
    color: var(--accent-dark);
    word-break: break-all;
    min-height: 20px;
}


@media (max-width: 900px) {
    .ai-generator__container {
        max-width: 100%;
        padding: 12px 7px 10px 7px;
    }
}

.creation-profile__step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
    max-width: 600px;
    margin: 0;
}


/* Прогресс-бар мастера создания профиля */
#wizard-progress {
    width: 95%;
    max-width: 500px;
    height: 18px;
    background: var(--main-background-color);
    border: 1.5px solid var(--main-btn-color);
    border-radius: 9px;
    margin-bottom: 22px;
    box-shadow: 0 1px 4px rgba(140,107,79,0.07);
    position: relative;
    overflow: hidden;
}

#wizard-progress .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--main-btn-color) 0%, var(--accent-light) 100%);
    border-radius: 9px 0 0 9px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    left: 0; top: 0;
    z-index: 1;
    min-width: 5%;  /* чтобы при первом шаге было видно */
}

#wizard-progress .progress-bar__label {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--dark-text-color);
    z-index: 2;
    line-height: 18px;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px #fff9;
    pointer-events: none;
}


.modality-title {
    display: flex;
    flex-direction: column;
    margin-top: 18px;
    margin-bottom: 5px;
    font-weight: bold;


}

.profile-settings-block {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    min-width: 300px;
    margin: 0;
}

/* попап для редактирования категорий */

.popup-category-edit {
    position: fixed;
    left: 50%;
    top: 24%;
    transform: translate(-50%, 0);
    background: var(--main-background-color-light);
    border: 2px solid var(--main-btn-color);
    border-radius: 8px;
    z-index: 9001;
    min-width: 340px;
    padding: 22px 30px 22px 30px;
    box-shadow: 0 6px 30px 0 rgba(50,40,25,0.22);
    color: var(--dark-text-color);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.popup-category-edit h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--main-btn-color);
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;
}

.popup-category-edit__close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--accent-attention);
    cursor: pointer;
}

.popup-category-edit__actions {
    display: flex;
    gap: 18px;
    justify-content: flex-end;
}

.btn-attention {
    background: var(--accent-attention);
    color: var(--light-text-color);
}

.btn-attention:hover {
    background: var(--accent-attention-light);
}


#dropzone-files-list .dz-item .dz-remove:hover {
  color: #c00;
  transform: scale(1.05);
}

/* Для универсального popup (использую в popup классе) */

.popup-backdrop{
    position:fixed;
    inset:0;
    background:var(--popup-backdrop);
    opacity:0;
    transition:opacity var(--popup-anim-ms) ease;
}

.popup-backdrop--visible{
    opacity:1;
}

.popup-obj{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(.98);
    background:var(--popup-bg);
    color:var(--popup-fg);
    border-radius:var(--popup-radius);
    box-shadow:var(--popup-shadow);
    max-width:90vw;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    outline:none;
    opacity:0;
    transform-origin:center;
    transition:opacity var(--popup-anim-ms) ease,transform var(--popup-anim-ms) ease;
}

.popup-obj[data-theme="light"]{background:var(--popup-bg-light);color:var(--popup-fg-dark);}
.popup--sm{width:var(--popup-width-sm);} .popup--md{width:var(--popup-width-md);} .popup--lg{width:var(--popup-width-lg);}
.popup--center{left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);}
.popup--open{opacity:1;} .popup--open.popup--center{transform:translate(-50%,-50%) scale(1);}
.popup__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:default;}
.popup__title{margin:0;font-size:16px;font-weight:600;line-height:1.2;}
.popup__close{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:inherit;opacity:.7;} .popup__close:hover{opacity:1;}
.popup__body{padding:14px;overflow:auto;}
.popup__footer{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);}
.popup[data-theme="light"] .popup__footer{border-top-color:rgba(0,0,0,.08);}
.popup__error{color:#ef4444;padding:0 14px 8px;min-height:1em;}
.popup__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;}
.popup__btn{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:transparent;color:inherit;cursor:pointer;}
.popup__btn--primary{background:#3b82f6;border-color:#3b82f6;color:#fff;}
.popup__resize-handle{position:absolute;}
.popup__resize--right{right:0;top:0;width:8px;height:100%;cursor:ew-resize;}
.popup__resize--bottom{left:0;bottom:0;width:100%;height:8px;cursor:ns-resize;}
.popup__resize--corner{right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;}
.popup--shake{animation:popup-shake .4s;}
@keyframes popup-shake{
  10%,90%{transform:translate(-50%,-50%) translateX(-1px);}
  20%,80%{transform:translate(-50%,-50%) translateX(2px);}
  30%,50%,70%{transform:translate(-50%,-50%) translateX(-4px);}
  40%,60%{transform:translate(-50%,-50%) translateX(4px);}
}
.is-loading{cursor:progress;} .is-dragging,.is-resizing{user-select:none;}
.popup[data-theme="light"] .popup__btn{border-color:rgba(0,0,0,.15);}

/* Конец блока стилей для универсального popup  */


.offline-container {
  font-family: 'Inter', system-ui, sans-serif;
  background: #1e1e1e;
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  padding: 2rem;

  h1 {
    color: #ff6666;
    margin-bottom: 1rem;
  }

  p {
    max-width: 480px;
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .btn-retry {
    display: inline-block;
    background: #1976d2;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease-in-out;

    &:hover {
      background: #1565c0;
    }
  }
}