/*===================================================================*/
/*                     БАЗОВЫЕ СТИЛИ (main.css)                   */
/*===================================================================*/

/* --------------------------- 1️⃣  Переменные --------------------------- */
:root {
    /* Отступы и размеры */
    --gap:                1rem;
    --sidebar-w:          300px;      /* ширина раскрытого меню на десктопе   */
    --sidebar-w-sm:       240px;      /* ширина раскрытого меню на мобильных   */
    --sidebar-collapsed:   70px;      /* свернутое меню (виден лишь ярлык)    */

    /* Шрифты */
    --font-base:          16px;

    /* Цвета */
    --color-bg:           #fafafa;   /* фон страницы */
    --color-sidebar:      #2c3e50;   /* фон сайд‑бара */
    --color-sidebar-text: #ecf0f1;  /* цвет текста в сайд‑баре */
    --color-sidebar-active:#34495e; /* активный пункт меню */

    /* Цвет гамбургера (по‑умолчанию – чёрный, т.е. светлая тема) */
    --toggle-color:      #000;
}

/* --------------------------- 2️⃣  Базовый сброс --------------------------- */
html {font-size:100%;}                     /* 1 rem = 16 px */
body {
    margin:0;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    background:var(--color-bg);
    color:#333;
}

/* --------------------------- 3️⃣  Flex‑контейнер --------------------------- */
.wrapper {
    display:flex;
    min-height:100vh;                     /* заставляем высоту окна */
}

/* --------------------------- 4️⃣  Сайд‑бар (базовый) --------------------------- */
.sidebar {
    width: var(--sidebar-collapsed);        /* 70 px – свернуто */
    background: var(--color-sidebar);
    color: var(--color-sidebar-text);
    height:100vh;
    position:fixed;
    left:0; top:0;
    overflow:hidden;
    transition: width .25s ease;
    z-index:1100;                         /* ниже кнопки‑гамбургера */
}
.sidebar ul {list-style:none; margin:0; padding:0;}
.sidebar li {
    padding: var(--gap) var(--gap);
    white-space:nowrap;
}
.sidebar li.active,
.sidebar li:hover {background:var(--color-sidebar-active);}
.sidebar a {
    color:inherit;
    text-decoration:none;
    display:block;
}

/* --------------------------- 5️⃣  Основной контент --------------------------- */
.content {
    flex:1;
    margin-left: var(--sidebar-collapsed);   /* отступ = ширина свернутого меню */
    padding: var(--gap);
    transition: margin-left .25s ease;
}

/* --------------------------- 6️⃣  Формы --------------------------- */
.search-box,
.bulk-form {
    background:#fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding: var(--gap);
    margin: var(--gap) 0;
    box-sizing:border-box;
    display:block;                     /* блочное поведение */
    width: calc(35% - var(--gap));
}

/* Внутри форм – 100 % ширины родителя */
.search-box input,
.bulk-form textarea,
.bulk-form input[type="file"],
.bulk-form select,
.bulk-form button {
    max-width:100%;
    box-sizing:border-box;
    margin-top:.1rem;
    width: 100%;
}

/* Кнопки – минимум 44 px высоты (рекомендация Google) */
button,
.download-btn,
.btn-primary {
    min-height:20px;
    line-height:0.1;
    cursor:pointer;
    border-radius:4px;
    border:1px solid #858181;
    padding:.5rem .75rem;
    background:#503838;
    color:#ffffff;
}
.download-btn:hover { background:#218838; }

/* --------------------------- 7️⃣  Таблица + скролл --------------------------- */
.table-wrapper {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;      /* плавный скролл на iOS */
}
table {
    border-collapse:collapse;
    width:34%;                             /* растягивается на всю ширину */
    background:#fff;
    margin-top: var(--gap);
}
th, td {
    border:1px solid #ddd;
    padding:.5rem .75rem;
    text-align:center;
}
th {background:#f0f0f0;}

/* --------------------------- 8️⃣  Индикатор «Идёт поиск» --------------------------- */
.loader‑overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.7);
    align-items:center;
    justify-content:center;
    z-index:9999;
}
.loader {
    border:4px solid #f3f3f3;
    border-top:4px solid #3498db;
    border-radius:50%;
    width:36px; height:36px;
    animation:spin .9s linear infinite;
}

/* --------------------------- 9️⃣  Сообщения (жёлтый блок) --------------------------- */
.msg {
    margin-top: var(--gap);
    padding: var(--gap);
    background:#ffefc1;
    border:1px solid #e2c777;
    border-radius:4px;
    width: calc(33% - var(--gap));
}

/* --------------------------- 🔟  Анимация спинера --------------------------- */
@keyframes spin {
    from {transform:rotate(0deg);}
    to   {transform:rotate(360deg);}
}

/*===================================================================*/
/*                     МЕДИА‑ЗАПРОСЫ – ДЕСКТОП                     */
/*===================================================================*/
@media (min-width:769px) {
    /* 1️⃣ При наведении раскрываем меню */
    .sidebar:hover {
        width: var(--sidebar-w);               /* 300 px */
    }

    /* 2️⃣ Сдвигаем контент, когда меню раскрыто */
    .sidebar:hover + .content {
        margin-left: var(--sidebar-w);          /* 300 px */
    }

    /* 3️⃣ Скрываем гамбургер‑кнопку – она не нужна на десктопе */
    .mobile-toggle {display:none;}
}

/*===================================================================*/
/*                     МЕДИА‑ЗАПРОСЫ – МОБИЛЬНЫЕ                    */
/*===================================================================*/
@media (max-width:768px) {
    /* ---------- 1️⃣ Сайд‑бар полностью скрыт ---------- */
    .sidebar {
        width:0;                                 /* скрыт */
    }
    .sidebar.open {
        width: var(--sidebar-w-sm);              /* 240 px – раскрыт */
    }

    /* ---------- 2️⃣ Гамбургер‑кнопка – видима --------- */
    .mobile-toggle {
        display:block;
        position:fixed;
        top: var(--gap);
        left: var(--gap);
        background:transparent;
        border:none;
        font-size:1.8rem;
        /* ---- цвет берётся из CSS‑переменной ---- */
        color: var(--toggle-color);
        z-index:1200;                           /* выше sidebar */
        cursor:pointer;
    }

    /* ---------- 3️⃣ Контент без отступа, пока меню закрыто */
    .content {margin-left:0;}

    /* ---------- 4️⃣ При открытом меню (sidebar.open) сдвигаем контент */
    .sidebar.open + .content {
        margin-left: var(--sidebar-w-sm);        /* 240 px */
    }

    /* ---------- 5️⃣ Формы – 100 % ширины */
    .search-box,
    .bulk-form {
        width:100%;
        max-width:none;
        margin-left:0;
        margin-right:0;
    }

    /* ---------- 6️⃣ Поле ввода кадастрового номера – 100 % */
    .cadastral-input {
        width:100%;
        max-width:none;
        min-width:auto;
    }

    /* ---------- 7️⃣ Сообщения тоже растягиваются */
    .msg {
        width:100%;
        max-width:none;
        margin-left:0;
        margin-right:0;
    }
}

/*===================================================================*/
/*   Темная система (prefers‑color‑scheme) – меняем переменную      */
/*===================================================================*/
@media (prefers-color-scheme: dark) {
    :root {
        --toggle-color: #fff;            /* белый гамбургер на тёмном фоне */
    }
}

/*===================================================================*/
/*   При ручном переключении темы через класс .dark               */
/*   (полезно, если вы меняете тему из JavaScript или cookie)      */
/*===================================================================*/
body.dark {
    --toggle-color: #fff;                /* тоже делает гамбургер белым */
}

/*===================================================================*/
/*   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ – дополнительные правки              */
/*===================================================================*/
@media (max-width:480px) {
    .search-box label,
    .bulk-form label {
        display:block;
        margin-bottom:.2rem;
    }
    .search-box input,
    .bulk-form textarea,
    .bulk-form select,
    .bulk-form button {
        margin-bottom:.5rem;
    }
}

/* --- Гармошка ФНС --- */
.fns-accordion { margin: 1rem 0; width: 100%; } /* Можно подстроить ширину */
.acc-header {
    background: #e9e9e9;
    padding: 2px;
    cursor: pointer;
    border: 1px solid #ddd;
    margin-top: 5px;
    font-weight: bold;
}
.acc-header:hover { background: #dcdcdc; }
.acc-content { display: none; padding: 5px 0 5px 20px; }
.acc-level-1 { margin-bottom: 5px; }
.acc-level-2 { margin-left: 10px; }
.acc-level-3 { margin-left: 10px; }

/* Стиль для иконки подсказки */
.tooltip {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    cursor: help;
    color: #000000;
    font-size: 0.85em;
    font-weight: normal;
}

/* Стиль для самой всплывающей подсказки */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 100;
    bottom: 125%; /* Расположение над иконкой */
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
}

/* Появление при наведении */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}