/* =========================================================================
   MINIMAL UI LAYER — спокойный, «бумажный» стиль в духе Linear / Vercel.
   Подключается ПОСЛЕ styles.css и motion.css. Переопределяет ключевые блоки:
   - левый сайдбар вместо верхних табов
   - тонкие бордеры вместо градиентов/теней
   - чёрный/графитовый primary, пастельные пилюли
   - типографика с табличными цифрами
   Работает поверх обеих тем (orange/dark). Атмосферный фон оставлен в motion.css.
   ========================================================================= */

/* ----- 1. Токены ----- */
:root {
    --m-radius:      14px;
    --m-radius-sm:   10px;
    --m-radius-pill: 999px;
    --m-border:      #EAEAEA;
    --m-border-strong: #D4D4D4;
    --m-surface:     #FFFFFF;
    --m-surface-2:   #FAFAF9;
    --m-bg:          #F7F7F5;
    --m-text:        #0A0A0A;
    --m-text-2:      #525252;
    --m-text-3:      #8A8A8A;
    --m-accent:      #0A0A0A;
    --m-accent-fg:   #FFFFFF;
    --m-shadow-1:    0 1px 2px rgba(15, 15, 15, 0.04);
    --m-shadow-2:    0 4px 12px rgba(15, 15, 15, 0.06);
    --m-sidebar-w:   240px;
    --m-nav-h:       56px;
}

[data-theme="dark"] {
    --m-border:        rgba(255, 255, 255, 0.08);
    --m-border-strong: rgba(255, 255, 255, 0.14);
    --m-surface:       #0F0F10;
    --m-surface-2:     #131315;
    --m-bg:            #08080A;
    --m-text:          #FAFAFA;
    --m-text-2:        rgba(255, 255, 255, 0.66);
    --m-text-3:        rgba(255, 255, 255, 0.42);
    --m-accent:        #FAFAFA;
    --m-accent-fg:     #0A0A0A;
    --m-shadow-1:      0 1px 2px rgba(0, 0, 0, 0.4);
    --m-shadow-2:      0 6px 20px rgba(0, 0, 0, 0.5);
}

/* ----- 2. Базовый body ----- */
body,
[data-theme="dark"] body,
[data-theme="orange"] body {
    background: var(--m-bg) !important;
    background-image: none !important;
    color: var(--m-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: "cv11", "ss01", "ss03";
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}

/* ----- 3. Layout shell: убираем фикс-навбар, перенесли в сайдбар ----- */
.modern-nav {
    position: fixed !important;
    top: 0 !important;
    left: var(--m-sidebar-w) !important;
    right: 0 !important;
    width: auto !important;
    transform: none !important;
    height: var(--m-nav-h) !important;
    max-height: var(--m-nav-h) !important;
    z-index: 50 !important;
    background: var(--m-surface) !important;
    border-bottom: 1px solid var(--m-border) !important;
}

.modern-nav .glass-container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    height: var(--m-nav-h) !important;
    min-height: var(--m-nav-h) !important;
    max-height: var(--m-nav-h) !important;
    padding: 0 24px !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 16px;
}

/* Брэнд-блок в навбаре: только название */
.modern-nav .brand {
    grid-column: 1;
    justify-content: flex-start;
}
.modern-nav .brand span {
    font-size: 14px;
    font-weight: 600;
    color: var(--m-text);
    letter-spacing: -0.01em;
}

/* Логотип в центре навбара скрываем — он переезжает в сайдбар */
.modern-nav .nav-logo-center {
    display: none !important;
}

.modern-nav .nav-actions {
    grid-column: 3;
    gap: 8px;
}

/* ----- 4. Сайдбар: .tabs превращаем в левую панель ----- */
/* .tabs-container содержит и .tabs, и все .tab-content — оставляем обычным потоком,
   а сайдбаром делаем именно .tabs */
.tabs-container {
    margin: 0 !important;
    padding: 0 0 0 var(--m-sidebar-w) !important;
    padding-top: var(--m-nav-h) !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow: visible !important;
}

.tabs {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--m-sidebar-w) !important;
    z-index: 60;
    background: var(--m-surface) !important;
    border-right: 1px solid var(--m-border) !important;
    border: none !important;
    border-right: 1px solid var(--m-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Заголовок-бренд в сайдбаре через ::before на .tabs */
.tabs::before {
    content: "elusive";
    display: flex;
    align-items: center;
    height: var(--m-nav-h);
    padding: 0 12px;
    margin: -12px -10px 8px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
    color: var(--m-text);
    border-bottom: 1px solid var(--m-border);
    flex-shrink: 0;
}

.tabs button,
[data-theme="dark"] .tabs button {
    flex: 0 0 auto !important;
    width: 100%;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--m-text-2) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--m-radius-sm) !important;
    box-shadow: none !important;
    text-align: left;
    transition: background-color 140ms ease, color 140ms ease;
}

.tabs button:hover,
[data-theme="dark"] .tabs button:hover {
    background: var(--m-surface-2) !important;
    color: var(--m-text) !important;
}

.tabs button.active,
[data-theme="dark"] .tabs button.active {
    background: var(--m-surface-2) !important;
    color: var(--m-text) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border-radius: var(--m-radius-sm) !important;
}

[data-theme="dark"] .tabs button.active {
    background: rgba(255, 255, 255, 0.06) !important;
}

.tabs button i,
.tabs button svg,
.tabs button svg.lucide {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    color: currentColor !important;
    stroke: currentColor !important;
    opacity: 0.85;
}

.tabs button.active svg,
.tabs button.active svg.lucide,
[data-theme="dark"] .tabs button.active svg,
[data-theme="dark"] .tabs button.active svg.lucide {
    color: var(--m-text) !important;
    stroke: var(--m-text) !important;
    opacity: 1;
}

.tabs button.active svg path,
.tabs button.active svg rect,
.tabs button.active svg circle,
[data-theme="dark"] .tabs button.active svg path,
[data-theme="dark"] .tabs button.active svg rect,
[data-theme="dark"] .tabs button.active svg circle {
    stroke: var(--m-text) !important;
}

/* ----- 5. Главный контент: отступы внутри уже сдвинутого .tabs-container ----- */
.tab-content {
    padding: 28px 32px 60px;
    max-width: 1400px;
    box-sizing: border-box;
}

.tab-content.active {
    display: block;
}

/* ----- 6. Контент-заголовки ----- */
.content-header h2,
.content-header h2 {
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--m-text) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--m-text) !important;
}

/* ----- 7. Карточки данных и stat-card ----- */
.data-card,
[data-theme="dark"] .data-card,
body:not([data-theme="dark"]) .data-card {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-1) !important;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.data-card:hover,
[data-theme="dark"] .data-card:hover,
body:not([data-theme="dark"]) .data-card:hover {
    background: var(--m-surface) !important;
    border-color: var(--m-border-strong) !important;
    box-shadow: var(--m-shadow-2) !important;
    transform: none !important;
}

.stat-card,
[data-theme="dark"] .stat-card,
body:not([data-theme="dark"]) .stat-card {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-1) !important;
}

.stat-card:hover,
body:not([data-theme="dark"]) .stat-card:hover {
    border-color: var(--m-border-strong) !important;
    box-shadow: var(--m-shadow-2) !important;
    background: var(--m-surface) !important;
    transform: none !important;
}

.statistics-metrics-bar,
[data-theme="dark"] .statistics-metrics-bar,
body:not([data-theme="dark"]) .statistics-metrics-bar {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-1) !important;
}

/* ----- 8. Кнопки ----- */
.btn-primary,
button.btn-primary {
    background: var(--m-accent) !important;
    color: var(--m-accent-fg) !important;
    border: 1px solid var(--m-accent) !important;
    border-radius: var(--m-radius-sm) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    transition: opacity 140ms ease, transform 140ms ease;
}
.btn-primary:hover,
button.btn-primary:hover {
    opacity: 0.88;
    transform: none !important;
}

.btn-secondary,
body:not([data-theme="dark"]) .btn-secondary,
[data-theme="dark"] .btn-secondary {
    background: var(--m-surface) !important;
    color: var(--m-text) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.btn-secondary:hover,
body:not([data-theme="dark"]) .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:hover {
    background: var(--m-surface-2) !important;
    border-color: var(--m-border-strong) !important;
    box-shadow: none !important;
}

/* Icon-кнопки в навбаре */
.icon-btn,
[data-theme="dark"] .icon-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--m-text-2) !important;
    box-shadow: none !important;
    width: 34px;
    height: 34px;
    border-radius: var(--m-radius-sm) !important;
    transition: background-color 140ms ease, color 140ms ease;
}
.icon-btn:hover,
[data-theme="dark"] .icon-btn:hover {
    background: var(--m-surface-2) !important;
    color: var(--m-text) !important;
    border-color: var(--m-border) !important;
    box-shadow: none !important;
    transform: none !important;
}
.icon-btn svg,
.icon-btn svg.lucide,
[data-theme="dark"] .icon-btn svg,
[data-theme="dark"] .icon-btn svg.lucide {
    color: currentColor !important;
    stroke: currentColor !important;
    width: 16px;
    height: 16px;
}

/* ----- 9. Поля поиска / селекты ----- */
.search-input,
.search-type-select,
[data-theme="dark"] .search-input,
[data-theme="dark"] .search-type-select {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    color: var(--m-text) !important;
    border-radius: var(--m-radius-sm) !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    padding: 8px 12px !important;
}
.search-input::placeholder {
    color: var(--m-text-3) !important;
}
.search-input:focus,
.search-type-select:focus,
[data-theme="dark"] .search-input:focus,
[data-theme="dark"] .search-type-select:focus {
    outline: none !important;
    border-color: var(--m-text-2) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="dark"] .search-input:focus,
[data-theme="dark"] .search-type-select:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06) !important;
}

/* ----- 10. Модалки ----- */
.modal {
    background: rgba(15, 15, 15, 0.45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
[data-theme="dark"] .modal {
    background: rgba(0, 0, 0, 0.6) !important;
}
.modal-content,
[data-theme="dark"] .modal-content,
body:not([data-theme="dark"]) .modal-content {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-2) !important;
    color: var(--m-text);
}

/* ----- 11. Статус-пилюли — пастельные ----- */
.blocked-indicator,
.cooldown-indicator,
.zamenapass-indicator,
.tenevoy-indicator,
.linked-requisite-status-badge {
    border-radius: var(--m-radius-pill) !important;
    font-weight: 500 !important;
    font-size: 11.5px !important;
    padding: 3px 10px !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

/* ----- 12. Пагинация ----- */
.pagination,
body:not([data-theme="dark"]) .pagination {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-1) !important;
}
.pagination-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--m-text-2) !important;
    border-radius: var(--m-radius-sm) !important;
}
.pagination-btn:hover {
    background: var(--m-surface-2) !important;
    color: var(--m-text) !important;
}
.pagination-btn.active {
    background: var(--m-accent) !important;
    color: var(--m-accent-fg) !important;
    border-color: var(--m-accent) !important;
}

/* ----- 13. Brand-logo в темной теме на minimal-сайдбаре — не нужен фильтр, лого скрыт */

/* ----- 14. Снижаем интенсивность атмосферного фона под тихий стиль ----- */
[data-theme="dark"] .atmo-bg,
[data-theme="orange"] .atmo-bg {
    opacity: 0.55;
}
[data-theme="dark"] .atmo-grid,
[data-theme="orange"] .atmo-grid {
    opacity: 0.025 !important;
}
[data-theme="dark"] .atmo-orb,
[data-theme="orange"] .atmo-orb {
    opacity: 0.55;
}

/* ----- 15. Адаптив ----- */
@media (max-width: 900px) {
    :root {
        --m-sidebar-w: 64px;
    }
    .tabs-container::before {
        content: "e";
        justify-content: center;
        padding: 0;
    }
    .tabs button span {
        display: none;
    }
    .tabs button {
        justify-content: center !important;
        padding: 10px !important;
    }
    .tab-content {
        padding: 20px 16px 40px;
    }
    .modern-nav .glass-container {
        padding: 0 16px !important;
    }
}