/**
 * UIKit Layout — стили каркаса приложения (sidebar + main + content).
 * Значения соответствуют UIKit DesignTokens (Colors, Spacing).
 */

:root {
    /* Colors */
    --uikit-bg-primary: #FFFFFF;
    --uikit-bg-secondary: #F9FAFB;
    --uikit-bg-tertiary: #F3F4F6;
    --uikit-border-main: #E5E7EB;
    --uikit-border-light: #F3F4F6;
    --uikit-primary-main: #268AFF;
    --uikit-primary-dark: #1A6ECC;
    --uikit-primary-bg-soft: rgba(38, 138, 255, 0.08);
    --uikit-neutral-bg-soft: rgba(107, 114, 128, 0.12);
    --uikit-text-primary: #111827;
    --uikit-text-secondary: #6B7280;
    --uikit-gray-600: #4B5563;
    /* Chart */
    --uikit-chart-fact: var(--uikit-primary-main);
    --uikit-chart-plan: var(--uikit-gray-600);
    /* Layout / Spacing */
    --uikit-header-height: 64px;
    --uikit-header-padding: 0 24px;
    --uikit-sidebar-width: 250px;
    --uikit-content-padding: 24px;
    --uikit-content-padding-top: 24px;
    --uikit-content-padding-bottom: 48px;
    --uikit-spacing-2: 8px;
    --uikit-spacing-3: 12px;
    --uikit-spacing-4: 16px;
    --uikit-radius-sm: 4px;
    --uikit-radius-md: 6px;
    --uikit-radius-card: 8px;
    --uikit-radius-pill: 999px;
    /* Shadows.Elevation (UIKit.DesignTokens.Shadows) */
    --uikit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100vw;
    box-sizing: border-box;
}

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

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    overflow-x: hidden;
}

main {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    background-color: var(--uikit-bg-secondary);
}

main > article,
main .content {
    max-width: 100%;
    box-sizing: border-box;
}

.sidebar {
    background-color: var(--uikit-bg-primary);
    border-right: 1px solid var(--uikit-border-main);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar .top-row {
    background-color: transparent !important;
    border-bottom: 1px solid var(--uikit-border-light) !important;
    justify-content: flex-start !important;
    padding-left: var(--uikit-spacing-3) !important;
    padding-right: var(--uikit-spacing-3) !important;
}

.top-row {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--uikit-border-main);
    justify-content: flex-end;
    height: var(--uikit-header-height);
    display: flex;
    align-items: center;
    padding: var(--uikit-header-padding);
    box-sizing: border-box;
}

.top-row ::deep a, .top-row ::deep .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
    text-decoration: underline;
}

.top-row ::deep a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-section {
    display: flex;
    align-items: center;
    gap: var(--uikit-spacing-4);
}

.btn-link {
    background: none;
    border: none;
    color: var(--uikit-primary-main);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.btn-link:hover {
    color: var(--uikit-primary-dark);
}

@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: var(--uikit-sidebar-width);
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        flex-shrink: 0;
        z-index: 100;
        overflow-y: auto;
    }

    .page:has(.sidebar) main {
        margin-left: var(--uikit-sidebar-width);
    }

    .page:not(:has(.sidebar)) main {
        width: 100%;
    }
}

/* Chart — цвета из CSS‑переменных UI Kit */
.uikit-period-balances-chart .chart-fact-line {
    stroke: var(--uikit-chart-fact);
}
.uikit-period-balances-chart .chart-plan-line {
    stroke: var(--uikit-chart-plan);
}
.uikit-period-balances-chart .chart-legend-fact {
    color: var(--uikit-chart-fact);
}
.uikit-period-balances-chart .chart-legend-plan {
    color: var(--uikit-chart-plan);
}

/* Скелетоны (PLAN_REFACTORING_UNIFIED 4.1) */
@keyframes uikit-skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.uikit-skeleton-line {
    background: linear-gradient(
        90deg,
        var(--uikit-border-light) 0%,
        var(--uikit-bg-secondary) 50%,
        var(--uikit-border-light) 100%
    );
    background-size: 200% 100%;
    animation: uikit-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Виртуализация таблицы (PLAN_REFACTORING_UNIFIED 2.3): корневой div Virtualize внутри tbody не создаёт бокс — tr остаются допустимыми дочерними tbody */
.uikit-table-virtualized tbody > div {
    display: contents;
}