.catalog-folder-manager {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
    grid-template-rows: auto minmax(280px, 1fr) auto;
    gap: var(--app-space-4);
    height: 100%;
    min-height: 0;
}
.catalog-folder-toolbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--app-space-1); }
.catalog-folder-tree { min-width: 0; min-height: 0; }
.catalog-folder-editor { min-width: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--app-space-3); padding: var(--app-space-3); border-left: 1px solid var(--app-border); }
.catalog-folder-heading { font-size: var(--app-font-size-section-title); font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.catalog-folder-path { overflow-wrap: anywhere; color: var(--app-text-subtle); }
.catalog-folder-hint, .catalog-folder-selection, .catalog-navigation-title-hint { color: var(--app-text-subtle); font-size: var(--app-font-size-small); }
.catalog-folder-fields { display: flex; flex-direction: column; gap: var(--app-space-2); }
.catalog-folder-fields[hidden], .catalog-folder-hint[hidden] { display: none; }
.catalog-folder-actions { display: flex; flex-wrap: wrap; gap: var(--app-space-2); margin-top: var(--app-space-3); }
.catalog-folder-selection { margin-top: auto; }
.catalog-navigation-settings { grid-column: 1 / -1; border-top: 1px solid var(--app-border); padding-top: var(--app-space-2); }
.catalog-navigation-settings summary { cursor: pointer; color: var(--app-text-subtle); }
.catalog-navigation-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--app-space-2); margin-block: var(--app-space-2); }
/* Общий шаг дерева сохраняется поверх обеих тем бокового меню и во flyout. */
.sidebar-nav ul.catalog-navigation-tree {
    padding: var(--app-space-1) 0 var(--app-space-1) var(--app-space-3);
    margin: 0;
    list-style: none;
}
.sidebar-nav .catalog-navigation-tree .catalog-folder-children {
    margin: 0 0 0 var(--app-space-2);
    padding: 0 0 0 calc(var(--app-space-2) - 1px);
    border-left: 1px solid var(--app-border);
    list-style: none;
}
.sidebar-nav .catalog-navigation-tree a.catalog-tree-row {
    display: grid;
    grid-template-columns: var(--app-space-3) var(--app-space-4) minmax(0, 1fr);
    align-items: start;
    gap: var(--app-space-2);
    min-height: 32px;
    margin: 0;
    padding: var(--app-space-2);
    font-size: var(--app-font-size-body);
    font-weight: var(--app-font-weight-regular);
    line-height: var(--app-line-height-body);
    border-radius: var(--app-radius-sm);
    color: var(--sidebar-text-color);
    text-decoration: none;
}
.sidebar-nav .catalog-navigation-tree .catalog-tree-node > a.catalog-tree-row::before { content: none; }
.sidebar-nav .catalog-navigation-tree a.catalog-tree-row:hover {
    background: var(--app-control-background-soft);
}
.sidebar-nav .catalog-navigation-tree a.catalog-tree-row.active {
    background: var(--app-primary-focus-ring);
    color: var(--sidebar-active-text-color);
    font-weight: var(--app-font-weight-semibold);
}
.sidebar-nav .catalog-navigation-tree a.catalog-tree-row:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
}
.sidebar-nav .catalog-navigation-tree .catalog-tree-row .sidebar-label {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
.sidebar-nav .catalog-navigation-tree .catalog-tree-row .sidebar-icon {
    display: block;
    width: var(--app-space-4);
    min-width: 0;
    margin: 2px 0 0;
    font-size: var(--app-space-4);
    line-height: 1;
    border-radius: 0;
    background: transparent;
    color: var(--sidebar-icon-catalogs, var(--app-primary));
}
.sidebar-nav .catalog-navigation-tree .catalog-tree-row .catalog-tree-folder-icon {
    color: var(--app-accent);
}
.sidebar-nav .catalog-navigation-tree .catalog-tree-caret {
    width: 6px;
    height: 6px;
    margin: 6px 0 0 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--app-transition-base);
}
.sidebar-nav .catalog-navigation-tree .catalog-folder-toggle[aria-expanded="true"] > .catalog-tree-caret {
    transform: rotate(45deg);
}
@media (max-width: 767.98px) {
    .catalog-folder-manager { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 300px auto auto; overflow: auto; min-height: 0; }
    .catalog-navigation-title-row { grid-template-columns: minmax(0, 1fr); }
    .catalog-folder-tree { height: 300px; }
    .catalog-folder-editor { overflow: visible; border-left: 0; border-top: 1px solid var(--app-border); }
}
:root {
    scroll-behavior: smooth;
    --default-font-family: roboto, "roboto fallback", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", "adwaita sans", cantarell, ubuntu, noto, helvetica, arial, sans-serif;

    --app-font-family: var(--default-font-family);
    --app-font-size-body: 14px;
    --app-font-size-small: 13px;
    --app-font-size-section-title: 15px;
    --app-font-size-card-title: 17px;
    --app-font-size-breadcrumb: 13px;
    --app-font-size-page-title: 22px;
    --app-font-weight-regular: 400;
    --app-font-weight-medium: 500;
    --app-font-weight-semibold: 600;
    --app-font-weight-bold: 700;
    --app-line-height-body: 1.4;
    --app-line-height-compact: 1.35;
    --app-primary: #258fd0;
    --app-primary-dark: #126faa;
    --app-primary-hover: #2288c7;
    --app-primary-end: #187fbd;
    --app-primary-focus-ring: rgba(44, 156, 219, 0.14);
    --app-primary-focus-ring-strong: rgba(44, 156, 219, 0.25);
    --app-primary-shadow: rgba(44, 156, 219, 0.18);
    --app-primary-shadow-strong: rgba(44, 156, 219, 0.22);
    --app-accent: #d96f12;
    --app-text: #172033;
    --app-text-strong: #111827;
    --app-text-muted: #667085;
    --app-text-subtle: #8a97a8;
    --app-control-text: #344054;
    --app-field-label-color: #64748b;
    --app-field-value-color: var(--app-text-muted);
    --app-data-field-gap: var(--app-space-3);
    --app-section-title-color: var(--app-secondary-text);
    --app-card-title-color: var(--app-text-strong);
    --app-breadcrumb-color: var(--app-text-muted);
    --app-breadcrumb-hover-color: var(--app-secondary-hover-text);
    --app-page-title-color: var(--app-text-strong);
    --app-on-primary: #ffffff;
    --app-border: #d7e2ef;
    --app-border-strong: #d4dfed;
    --app-divider: #e6edf6;
    --app-surface: #ffffff;
    --app-row-inactive-background: #f1f4f8;
    --app-row-inactive-background-hover: #e6ebf1;
    --app-control-background: #fcfdff;
    --app-control-background-soft: #fbfdff;
    --app-page-background: #f3f8fc;
    --app-secondary-text: #24344d;
    --app-secondary-hover-text: #0f5d93;
    --app-accent-text: #8f4b0c;
    --app-accent-hover-text: #784006;
    --app-accent-border-soft: rgba(217, 111, 18, 0.34);
    --app-accent-background-soft: #fffaf5;
    --app-accent-background-hover: #fff5e9;
    --app-info-text: #155d95;
    --app-info-border: #b9dcff;
    --app-info-background: #eef7ff;
    --app-success-text: #16824a;
    --app-success-border: #b9e2ca;
    --app-success-background: #f0fbf5;
    --app-success-solid: #16824a;
    --app-success-solid-hover: #116638;
    --app-warning-text: #8a5b0a;
    --app-warning-border: #f1d291;
    --app-warning-background: #fff9ec;
    --app-danger: #dc3545;
    --app-danger-text: #9b1c1c;
    --app-danger-border: #f3b9b9;
    --app-danger-background: #fff1f1;
    --app-action-create-text: #16824a;
    --app-action-refresh-text: #126faa;
    --app-action-columns-text: #5b5fc7;
    --app-action-layout-text: #33637f;
    --app-action-export-text: #0f766e;
    --app-action-favorite-text: #f59e0b;
    --app-grid-row-hover-background: #f0f7fd;
    --app-grid-row-selected-background: #daeeff;
    --app-grid-row-edited-background: #f0fdf4;
    --app-tag-min-height: 24px;
    --app-tag-padding: 3px 9px;
    --app-tag-border-radius: 6px;
    --app-tag-border: var(--app-border);
    --app-tag-background: var(--app-control-background-soft);
    --app-tag-text: var(--app-secondary-text);
    --app-status-min-height: 26px;
    --app-status-padding: 4px 10px;
    --app-status-border-radius: 6px;
    --app-status-border: var(--app-border);
    --app-status-background: var(--app-control-background-soft);
    --app-status-text: var(--app-secondary-text);
    --app-disabled-opacity: 0.72;
    --app-radius-xs: 3px;
    --app-radius-sm: 4px;
    --app-radius-md: 6px;
    --app-radius-lg: 8px;
    --app-radius-pill: 999px;
    --app-space-1: 4px;
    --app-space-2: 8px;
    --app-space-3: 12px;
    --app-space-4: 16px;
    --app-space-5: 20px;
    --app-space-6: 24px;
    --app-page-padding-x: 20px;
    --app-page-padding-top: var(--app-space-3);
    --app-page-padding-y: 16px;
    --app-header-height: 56px;
    --app-substitution-banner-height: 0px;
    --app-sidebar-width: 280px;
    --app-sidebar-min-width: 240px;
    --app-sidebar-max-width: 600px;
    --app-sidebar-content-min-width: 480px;
    --app-sidebar-collapsed-width: 72px;
    --app-toolbar-height: 42px;
    --app-shadow-sm: 0 2px 10px rgba(23, 32, 51, 0.08);
    --app-shadow-md: 0 10px 28px rgba(23, 32, 51, 0.10);
    --app-shadow-lg: 0 18px 42px rgba(23, 32, 51, 0.18);
    --app-layer-header: 997;
    --app-layer-sidebar: 996;
    --app-layer-dropdown: 1000;
    --app-layer-floating: 1050;
    --app-transition-fast: 0.2s ease;
    --app-transition-base: 0.3s ease;

    --theme-color: var(--app-primary);
    --sidebar-text-color: var(--app-secondary-text);
    --sidebar-active-text-color: var(--app-primary-dark);
    --nav-tabs-color: var(--app-secondary-text);
    --text-color: var(--app-text-muted);
    --text-color-selected: var(--app-text-strong);
    --link-color: var(--app-primary);
    --background-color: var(--app-page-background);
    --card-caption-color: var(--app-secondary-text);
    --card-fieldtitle-color: var(--app-control-text);
    --bs-primary-rgb: 37,143,208;
    --counter-badge-color: var(--app-primary);
    --counter-badge-shadow: 0 4px 10px var(--app-primary-shadow-strong);
}
[data-theme="dark"] {
    color-scheme: dark;
    --app-primary: #4daae0;
    --app-primary-dark: #7ec4eb;
    --app-primary-hover: #5eb5e5;
    --app-primary-end: #3d9fd8;
    --app-primary-focus-ring: rgba(77, 170, 224, 0.18);
    --app-primary-focus-ring-strong: rgba(77, 170, 224, 0.28);
    --app-primary-shadow: rgba(77, 170, 224, 0.22);
    --app-primary-shadow-strong: rgba(77, 170, 224, 0.28);
    --app-accent: #f59e42;
    --app-text: #e0e4e9;
    --app-text-strong: #f3f5f7;
    --app-text-muted: #a8b0bb;
    --app-text-subtle: #8b95a3;
    --app-field-label-color: #94a3b8;
    --app-control-text: #d2d8e0;
    --app-on-primary: #ffffff;
    --app-border: #3d444d;
    --app-border-strong: #4a535e;
    --app-divider: #343a42;
    --app-surface: #282c31;
    --app-row-inactive-background: #32373d;
    --app-row-inactive-background-hover: #3a4048;
    --app-control-background: #30353b;
    --app-control-background-soft: #2d3238;
    --app-page-background: #202327;
    --app-secondary-text: #d8dde3;
    --app-secondary-hover-text: #9fd4f3;
    --app-accent-text: #fbbf77;
    --app-accent-hover-text: #fcd9a8;
    --app-accent-border-soft: rgba(245, 158, 66, 0.34);
    --app-accent-background-soft: rgba(245, 158, 66, 0.12);
    --app-accent-background-hover: rgba(245, 158, 66, 0.18);
    --app-info-text: #8ecdf5;
    --app-info-border: #2f5f82;
    --app-info-background: rgba(37, 143, 208, 0.16);
    --app-success-text: #6fd39a;
    --app-success-border: #2f6848;
    --app-success-background: rgba(22, 130, 74, 0.16);
    --app-success-solid: #1d9457;
    --app-success-solid-hover: #16824a;
    --app-warning-text: #f0c56d;
    --app-warning-border: #7a5a18;
    --app-warning-background: rgba(138, 91, 10, 0.18);
    --app-danger: #f07178;
    --app-danger-text: #fca5a5;
    --app-danger-border: #7f3434;
    --app-danger-background: rgba(155, 28, 28, 0.18);
    --app-action-create-text: #6fd39a;
    --app-action-refresh-text: #8ecdf5;
    --app-action-columns-text: #a5b4fc;
    --app-action-layout-text: #8eb8d4;
    --app-action-export-text: #5eead4;
    --app-action-favorite-text: #fbbf24;
    --app-grid-row-hover-background: #323d4a;
    --app-grid-row-selected-background: #3a5068;
    --app-grid-row-edited-background: rgba(22, 130, 74, 0.22);
    --app-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
    --app-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.34);
    --app-shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.42);
    --sidebar-active-text-color: #ffffff;
    --bs-primary-rgb: 77, 170, 224;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background-color: var(--app-page-background);
    color: var(--app-text);
    font-family: var(--app-font-family);
    font-size: var(--app-font-size-body);
    line-height: var(--app-line-height-body);
}
.catalog-move-selection {
    max-height: 10rem;
    overflow: auto;
    overflow-wrap: anywhere;
}
.login-page .d-none {
    display: none !important;
}
body.login-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: var(--app-text);
    font-family: var(--app-font-family);
    background:
        linear-gradient(140deg, rgba(44, 156, 219, 0.11) 0%, rgba(44, 156, 219, 0.03) 44%, rgba(245, 130, 32, 0.055) 100%),
        linear-gradient(180deg, var(--app-control-background-soft) 0%, var(--app-page-background) 100%);
}
[data-theme="dark"] body.login-page {
    background:
        linear-gradient(140deg, rgba(77, 170, 224, 0.08) 0%, rgba(77, 170, 224, 0.02) 44%, rgba(245, 158, 66, 0.04) 100%),
        linear-gradient(180deg, var(--app-control-background-soft) 0%, var(--app-page-background) 100%);
}
.login-container {
    width: 462px;
    max-width: calc(100vw - 32px);
    padding: 32px 34px;
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    box-shadow: var(--app-shadow-lg);
}
.login-header {
    margin-bottom: 24px;
    text-align: center;
}
.login-logo {
    display: block;
    width: min(100%, 276px);
    height: auto;
    margin: 0 auto 18px;
}
.login-title {
    margin: 0;
    color: var(--app-text-strong);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}
.login-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 11px 13px;
    border: 1px solid var(--app-info-border);
    border-radius: 8px;
    color: var(--app-info-text);
    background-color: var(--app-info-background);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}
.login-message--info {
    border-color: var(--app-info-border);
    color: var(--app-info-text);
    background-color: var(--app-info-background);
}
.login-message--danger {
    border-color: var(--app-danger-border);
    color: var(--app-danger-text);
    background-color: var(--app-danger-background);
}
.login-message-icon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex: 0 0 18px;
    color: currentColor;
}
.login-icon {
    display: block;
    background-color: currentColor;
    mask: var(--login-icon-url) center / contain no-repeat;
    -webkit-mask: var(--login-icon-url) center / contain no-repeat;
}
.login-fields {
    display: grid;
    gap: 11px;
}
.login-form {
    display: grid;
    gap: 13px;
}
.login-field {
    position: relative;
    display: grid;
    gap: 6px;
}
.login-field label {
    color: var(--app-text-muted);
    font-size: 12px;
    line-height: 1.2;
}
.login-field-hint {
    color: var(--app-text-muted);
    font-size: var(--app-font-size-small);
    line-height: 1.4;
}
.login-required-marker {
    color: var(--app-danger);
}
.login-input {
    display: block;
    width: 100%;
    height: 43px;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid var(--app-border);
    border-color: var(--app-border);
    border-radius: 7px;
    color: var(--app-text);
    background-color: var(--app-control-background);
    box-shadow: none;
    font: inherit;
}
.login-input:focus {
    border-color: var(--app-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--app-primary-focus-ring);
}
.was-validated .login-input:invalid {
    border-color: var(--app-danger);
}
.login-password-field .login-input {
    padding-right: 48px;
}
.login-password-toggle {
    position: absolute;
    top: 23px;
    right: 1px;
    z-index: 4;
    width: 44px;
    height: 41px;
    border: 0;
    border-radius: 0 6px 6px 0;
    color: var(--app-control-text);
    background-color: transparent;
}
.login-password-toggle:hover,
.login-password-toggle:focus {
    color: var(--app-primary-dark);
    background-color: var(--app-info-background);
    outline: none;
}
.login-password-icon {
    width: 18px;
    height: 18px;
    margin: 0 auto;
}
.invalid-feedback {
    display: none;
    margin-top: 6px;
    color: var(--app-danger);
    font-size: 12px;
    line-height: 1.25;
}
.was-validated .login-input:invalid ~ .invalid-feedback {
    display: block;
}
.login-actions-placeholder {
    display: none;
}
.login-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 17px;
}
.login-actions > div,
.login-actions .login-action {
    width: 100%;
}
.login-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
    font: inherit;
    cursor: pointer;
}
.login-action-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    color: currentColor;
}
.login-action-icon--spin {
    animation: login-spin 0.8s linear infinite;
}
.login-action-primary {
    border-color: var(--app-primary);
    color: var(--app-on-primary);
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-end));
    box-shadow: 0 10px 20px var(--app-primary-shadow);
}
.login-action-primary:hover,
.login-action-primary:focus {
    border-color: var(--app-primary-dark);
    color: var(--app-on-primary);
    background: linear-gradient(135deg, var(--app-primary-hover), var(--app-primary-dark));
    box-shadow: 0 12px 22px var(--app-primary-shadow-strong);
}
.login-action-secondary {
    border-color: var(--app-border-strong);
    color: var(--app-secondary-text);
    background-color: var(--app-control-background-soft);
}
.login-action-secondary:hover,
.login-action-secondary:focus {
    border-color: var(--app-primary);
    color: var(--app-secondary-hover-text);
    background-color: var(--app-info-background);
}
.login-action-sso {
    border-color: var(--app-accent-border-soft);
    color: var(--app-accent-text);
    background-color: var(--app-accent-background-soft);
}
.login-action-sso:hover,
.login-action-sso:focus {
    border-color: var(--app-accent);
    color: var(--app-accent-hover-text);
    background-color: var(--app-accent-background-hover);
}
.login-action:disabled {
    cursor: wait;
    opacity: 0.72;
}
.login-action:focus-visible {
    outline: 3px solid var(--app-primary-focus-ring-strong);
    outline-offset: 2px;
}
.login-divider {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 20px 0 0;
    color: var(--app-text-subtle);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: uppercase;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--app-divider);
}
.login-actions--sso {
    margin-top: 11px;
}
@keyframes login-spin {
    to {
        transform: rotate(360deg);
    }
}
@media (max-width: 520px) {
    body.login-page {
        display: block;
        align-items: flex-start;
        padding: 18px 12px;
    }

    .login-container {
        width: auto;
        max-width: none;
        margin: 0 auto;
        padding: 26px 18px;
        border-radius: 8px;
    }

    .login-logo {
        width: min(100%, 252px);
        margin-bottom: 18px;
    }

    .login-title {
        font-size: 20px;
    }

}