/* ========================================= */
/* BASE STYLES: Общие сбросы и стили тела страницы */
/* ========================================= */
:root {
  --main-color: #888888;
  --grey: #888888;
  --yellow: #e8ff18;
  --orange: #ffa200;
  --purple: #ff0084;
  --red: #ff0000;
  --green: rgb(44, 173, 44);
  --blue: rgb(37, 117, 255);
  --line-thickness: 2px;
  --main-padding: 15px;
}
input, textarea, select {
    outline: none;                   /* Полностью отключаем стандартную обводку */
    border: none;       /* Удаляем стандартную рамку */
    background: none;   /* Удаляем дефолтный фон браузера, если нужно */
}
input:focus, textarea:focus, select:focus, button:focus, [contenteditable="true"]:focus {
  /* 1. Убираем рамку и ее хром-модификации */
  outline: 0 !important;
  outline: none !important;
  outline: 1px solid transparent !important; /* Фикс для некоторых версий Chrome */
  /* 2. Убираем двойную тень (Хром часто подмешивает свою синюю/белую тень) */
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  /* 3. Сбрасываем системный внешний вид элемента */
  -webkit-appearance: none !important;
  appearance: none !important;
}
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
*,
*::before,
*::after {
    box-sizing: border-box !important;
    margin: 0; /* Обнуляем дефолтные внешние отступы, чтобы не ломали сетку */
}

/* Для всего сайта */
::selection {
  background-color: #888888; /* Цвет фона при выделении */
  color: #ffffff;            /* Цвет текста при выделении */
}

/* Для браузеров на движке Gecko (старый Firefox) */
::-moz-selection {
  background-color: #888888;
  color: #ffffff;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Основной контейнер не должен прокручиваться сам */
    font-family: sans-serif;
    background: #111;
    color: #fff;
}





/* ========================================= */
/* LAYOUT STYLES: Структура холста и контейнеров */
/* ========================================= */

.node, .image-node, .todo-item {
    /* Браузер сам пропустит этапы рендеринга, если нода за экраном */
    content-visibility: auto;
    /* Укажите примерные средние размеры вашей ноды. 
       Это нужно, чтобы скроллбар и холст не прыгали при появлении ноды на экране */
    contain-intrinsic-size: 200px 140px;
}


#viewport {
    position: relative;
    overflow: hidden; /* Чтобы холст не вылезал за границы экрана */
    width: 100vw;
    height: 100vh;
    
    /* Перенесенные свойства вашей сетки */
    background-image: 
        linear-gradient(to right, rgba(0, 255, 136, 0.15) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(0, 255, 136, 0.15) 2px, transparent 2px),
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 2px, transparent 2px);
}


/* Бесконечный холст (Canvas) */
#canvas {
    position: absolute;
    width: 1000px;
    height: 1000px;
    top: 0;
    left: 0;
    transform-origin: 0 0; /* Важно: трансформация должна идти от левого верхнего угла! */
}

.chunk-label {
    position: absolute;
    width: 100px;
    color: rgba(0, 255, 136, 0.8);
    font-family: sans-serif;
    font-weight: bold;
    pointer-events: none;
    transform: translate(-50%, -50%);
    /* ЗАПРЕТ ПЕРЕНОСА СТРОК */
    white-space: nowrap; 
}


/* Слой для линий соединения (SVG) */
#connections-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50000;
    pointer-events: none; /* Чтобы слой не мешал кликать по нодам */
    overflow: visible;    /* Чтобы линии не обрезались по краям */
    z-index: 69;
}

.connection-line {
    stroke: var(--yellow); 
    stroke-width: 3;  /* <-- Толщина линии */
    fill: none;       /* <-- Линия не закрашена, только контур */
    z-index: 69;
    display: block; 
    visibility: visible; 
    opacity: 1;
}


/* Контейнер для всех нод (для управления их позиционированием) */
#nodes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


/* Рамка группового выделения */
#selection-marquee {
    position: absolute;
    border: 1px dashed #00ff88;
    background: rgba(0, 255, 136, 0.1);
    pointer-events: none;
    z-index: 90;
}


.node-view-mode {
    white-space: pre-wrap;
    word-break: break-word; /* Чтобы длинные ссылки не вылезали за края ноды */
    overflow-y: hidden;
}




/* Пример подсветки кнопки "Сохранить", когда флаг активен */
#big_save_button.unsaved {
    background-color: #00ff37 !important; /* Оранжевый предупреждающий цвет */
    box-shadow: 0 0 10px rgba(69, 255, 76, 0.6);
    color: white !important;
}