/* Плавный переход для навигации */
.top-nav {
    transition: transform 0.3s ease-in-out;
    position: sticky; /* Или fixed, если она у вас фиксирована */
    top: 0;
    z-index: 1000; /* Чтобы была поверх всего */
    background: var(--bg-card); /* Убедитесь, что есть фон */
}

/* Класс для скрытия навигации (сдвиг вверх) */
.top-nav.nav-hidden {
    transform: translateY(-100%);
}

/* Плавный переход для заголовка страницы */
.page-header {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Класс для скрытия заголовка */
.page-header.header-hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none; /* Чтобы нельзя было кликнуть по невидимому */
}

/* --- OZON THEMES ENGINE --- */
.main-content
{
    flex-grow: 1 !important;
}
:root {
    /* LIGHT THEME (Default) */
    --bg-page: #f0f2f5;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --border-color: #cbd3db;
    --border-hover: #aeb5bc;
    --text-main: #001a34;
    --text-sec: #808d9a;
    --text-placeholder: #bdc5cd;
    --accent-blue: #005bff;
    --accent-blue-hover: #004ed6;
    --focus-shadow: rgba(0, 91, 255, 0.15);
    --error-color: #f91155;
    --dropdown-bg: #ffffff;
    --dropdown-hover: #f0f2f5;
    --tag-bg: #f0f2f5;
    --tag-text: #001a34;
    --hint-bg: #333333;
    --hint-text: #ffffff;
}

/* DARK THEME CLASS */
body.dark-theme {
    --bg-page: #121214;
    --bg-card: #232427;
    --bg-input: #2c2d30;
    --border-color: #3e3f42;
    --border-hover: #505155;
    --text-main: #ffffff;
    --text-sec: #8b8e99;
    --text-placeholder: #5c5f65;
    --accent-blue: #005bff;
    --accent-blue-hover: #337aff;
    --focus-shadow: rgba(0, 91, 255, 0.3);
    --error-color: #ff4d80;
    --dropdown-bg: #232427;
    --dropdown-hover: #2c2d30;
    --tag-bg: #3e3f42;
    --tag-text: #ffffff;
    --hint-bg: #ffffff;
    --hint-text: #000000;
}

/* --- GLOBAL STYLES --- */
body {
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-main);
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- CONTROLS (clControlNew) --- */

/* Input Container */
.controller_text .darkinput,
.controller_list .darkinput {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 12px !important;
    min-height: 52px !important;
    transition: all 0.2s ease;
}

.controller_text .darkinput:hover,
.controller_list .darkinput:hover {
    border-color: var(--border-hover) !important;
}

/* Focus State */
.div_focus {
    border-color: var(--accent-blue) !important;
    background-color: var(--bg-input) !important; /* Keep bg same or slightly lighter */
    box-shadow: 0 0 0 3px var(--focus-shadow) !important;
}

/* Floating Label */
.el_title {
    color: var(--text-sec) !important;
    font-size: 14px !important;
    transition: all 0.2s ease;
}

.value_yes {
    color: var(--accent-blue) !important;
    background: var(--primary); !important; /* Match input bg to hide border behind label */
}

/* Inputs inside controls */
.controller_text input[type="text"],
.controller_text input[type="tel"],
.controller_text input[type="password"],
.controller_text input[type="email"],
.input_prop_visible {
    color: var(--text-main) !important;
    font-size: 16px !important;
}

.controller_text input::placeholder,
.input_prop_visible::placeholder {
    color: var(--text-placeholder) !important;
}

/* Icons (Clear, Help, Arrow) */
.btClearInput svg path,
.btHelpInput svg path,
.btDrop svg path,
.btArrow svg path {
    fill: var(--text-sec) !important;
    transition: fill 0.2s;
}

.btClearInput:hover svg path,
.btHelpInput:hover svg path,
.btDrop:hover svg path,
.btArrow:hover svg path {
    fill: var(--accent-blue) !important;
}

/* Dropdown List */
.input_list_drop, .input_list_drop_find {
    background-color: var(--dropdown-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

.items_drop {
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-color);
}

.items_drop:hover {
    background-color: var(--dropdown-hover) !important;
    color: var(--accent-blue) !important;
}

.items_drop.selected {
    background-color: rgba(0, 91, 255, 0.1) !important;
    color: var(--accent-blue) !important;
}

/* Multi-select Tags */
.items_select_prop {
    background-color: var(--tag-bg) !important;
    color: var(--tag-text) !important;
    border: 1px solid transparent;
}

.btDeleteProp svg path {
    fill: var(--tag-text) !important;
}

/* Tooltip/Hint */
.block_hint {
    background-color: var(--hint-bg) !important;
    color: var(--hint-text) !important;
}
.block_hint::after {
    border-top-color: var(--hint-bg) !important;
}

/* Error State */
.error_prop {
    border-color: var(--error-color) !important;
    background-color: rgba(249, 17, 85, 0.05) !important;
}

/* --- BUTTONS --- */
.btSt1, .btn-primary {
    background-color: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btSt1:hover, .btn-primary:hover {
    background-color: var(--accent-blue-hover);
}

/* --- THEME TOGGLE BUTTON --- */
.theme-toggle-btn {
    position: absolute;
    top: 13px;
    right: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.theme-toggle-btn:hover {
    transform: scale(1.05);
    border-color: var(--accent-blue);
}

.theme-toggle-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--text-main);
}

/* =============================================
SCROLLBAR STYLES (THEMES)
============================================= */

/* Light Theme Scrollbar (Default) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f0f2f5; /* Светлый фон трека */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd3db; /* Серый ползунок */
    border-radius: 4px;
    border: 2px solid #f0f2f5; /* Отступ от краев */
}

::-webkit-scrollbar-thumb:hover {
    background: #aeb5bc; /* Темнее при наведении */
}

/* Dark Theme Scrollbar */
body.dark-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-theme ::-webkit-scrollbar-track {
    background: #1a1b1e; /* Темный фон трека */
    border-radius: 4px;
}

body.dark-theme ::-webkit-scrollbar-thumb {
    background: #3e3f42; /* Темно-серый ползунок */
    border-radius: 4px;
    border: 2px solid #1a1b1e; /* Отступ от краев */
}

body.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: #505155; /* Светлее при наведении */
}

/* Firefox Support (Standard Properties) */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd3db #f0f2f5; /* thumb track */
}

body.dark-theme * {
    scrollbar-color: #3e3f42 #1a1b1e; /* thumb track */
}