:root {
    --bg: #f4f6fa;
    --card: #ffffff;
    --text: #1e293b;
    --muted: #64748b;
    --border: #e2e8f0;

    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --green: #16a34a;
    --red: #dc2626;

    --radius: 14px;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    height: 74px;

    background: white;

    border-bottom: 1px solid var(--border);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 28px;

    position: sticky;
    top: 0;

    z-index: 20;
}


.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}


.brand-icon {
    width: 42px;
    height: 42px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 800;
}


.brand-title {
    font-size: 17px;
    font-weight: 700;
}


.brand-subtitle {
    color: var(--muted);
    font-size: 12px;
}


.organization-code {
    margin-left: auto;
    margin-right: 20px;
    color: #475569;
    font-size: 13px;
    white-space: nowrap;
}

.organization-code strong {
    color: #1e293b;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 14px;
}

.topbar-actions {
    display: flex;
    gap: 10px;
}


/* =========================================================
   BUTTONS
========================================================= */

.button {
    border: 0;

    border-radius: 9px;

    padding: 10px 15px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    transition:
        background .15s,
        transform .15s;
}


.button:hover {
    transform: translateY(-1px);
}


.button:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}


.button-primary {
    color: white;
    background: var(--primary);
}


.button-primary:hover {
    background: var(--primary-dark);
}


.button-secondary {
    color: #334155;
    background: #eef2f7;
}


.button-secondary:hover {
    background: #e2e8f0;
}


.button-full {
    width: 100%;
}


/* =========================================================
   LAYOUT
========================================================= */

.layout {
    display: grid;

    grid-template-columns:
        380px minmax(0, 1fr);

    min-height:
        calc(100vh - 74px);
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    background: white;

    border-right:
        1px solid var(--border);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


.sidebar-header {
    padding:
        22px 22px 15px;
}


.sidebar-header h2 {
    margin: 0;
    font-size: 18px;
}


.sidebar-header p {
    margin: 5px 0 0;

    font-size: 13px;

    color: var(--muted);
}


.classifier-search {
    padding:
        0 16px 14px;
}


.classifier-search input,
.search-box input,
label input {
    width: 100%;

    border: 1px solid var(--border);

    background: #f8fafc;

    border-radius: 9px;

    padding: 11px 13px;

    outline: none;

    font-size: 14px;
}


.classifier-search input:focus,
.search-box input:focus,
label input:focus {
    border-color: #93c5fd;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, .10);

    background: white;
}


.tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;

    padding:
        0 10px 25px;
}


.tree-item {
    margin: 1px 0;
}


.tree-row {
    display: flex;
    align-items: stretch;
}


.tree-toggle {
    width: 30px;

    border: 0;
    background: transparent;

    cursor: pointer;

    color: #64748b;

    font-size: 21px;

    transition:
        transform .15s;
}


.tree-item.expanded
> .tree-row
> .tree-toggle {
    transform:
        rotate(90deg);
}


.tree-spacer {
    width: 30px;
}


.tree-node {
    flex: 1;

    border: 0;

    background: transparent;

    text-align: left;

    border-radius: 8px;

    padding: 8px;

    cursor: pointer;

    display: flex;

    align-items: flex-start;

    gap: 9px;
}


.tree-node:hover {
    background: #f1f5f9;
}


.tree-node.selected {
    background: #dbeafe;

    color: #1d4ed8;
}


.tree-code {
    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 12px;

    font-weight: 700;

    min-width: 50px;

    color: #475569;
}


.tree-node.selected
.tree-code {
    color: #1d4ed8;
}


.tree-name {
    font-size: 13px;

    line-height: 1.3;

    color: #334155;
}


.tree-node.selected
.tree-name {
    color: #1e40af;
}


.tree-children {
    display: none;

    padding-left: 16px;
}


.tree-item.expanded
> .tree-children {
    display: block;
}


.tree-node.leaf::after {
    content: "✓";

    margin-left: auto;

    opacity: 0;

    color: var(--green);
}


.tree-node.leaf:hover::after,
.tree-node.leaf.selected::after {
    opacity: 1;
}


/* =========================================================
   CONTENT
========================================================= */

.content {
    padding: 30px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    display: block;
}

.content-main {
    min-width: 0;
}


.breadcrumb {
    font-size: 12px;

    color: var(--muted);

    margin-bottom: 6px;
}


.page-header h1 {
    margin: 0;

    font-size: 27px;

    letter-spacing: -.5px;
}


.page-header p {
    color: var(--muted);

    margin: 6px 0 0;

    font-size: 14px;
}


/* =========================================================
   STATS
========================================================= */

.stats {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;

    margin-top: 25px;
}


.stat-card {
    background: white;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    padding: 18px;

    display: flex;
    align-items: center;

    gap: 13px;
}


.stat-icon {
    width: 43px;
    height: 43px;

    border-radius: 11px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 800;
}


.stat-icon.blue {
    background: #dbeafe;
    color: #2563eb;
}


.stat-icon.green {
    background: #dcfce7;
    color: #16a34a;
}


.stat-icon.purple {
    background: #ede9fe;
    color: #7c3aed;
}


.stat-value {
    font-size: 20px;
    font-weight: 800;
}


.stat-label {
    font-size: 12px;
    color: var(--muted);
}


/* =========================================================
   TOOLBAR
========================================================= */

.toolbar {
    margin-top: 22px;

    display: flex;

    gap: 10px;
}


.search-box {
    flex: 1;

    position: relative;
}


.search-icon {
    position: absolute;

    left: 13px;
    top: 50%;

    transform:
        translateY(-50%);

    color: #94a3b8;

    font-size: 20px;
}


.search-box input {
    padding-left: 40px;
}


/* =========================================================
   SELECTED CODE
========================================================= */

.selected-code {
    margin-top: 16px;

    min-height: 57px;

    background: #eff6ff;

    border: 1px solid #bfdbfe;

    border-radius: 12px;

    padding: 12px 15px;

    display: flex;

    align-items: center;

    gap: 12px;
}


.selected-code-number {
    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    color: #1d4ed8;

    font-weight: 800;
}


.selected-code-name {
    color: #334155;

    font-size: 13px;
}


/* =========================================================
   TABLE
========================================================= */

.table-card {
    background: white;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    margin-top: 15px;

    overflow: hidden;
}


.table-wrapper {
    overflow-x: auto;
}


table {
    width: 100%;

    border-collapse: collapse;

    min-width: 760px;
}


thead {
    background: #f8fafc;
}


th {
    text-align: left;

    padding: 12px 15px;

    color: #64748b;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .04em;

    border-bottom:
        1px solid var(--border);
}


td {
    padding: 13px 15px;

    border-bottom:
        1px solid #eef2f7;

    font-size: 13px;
}


tbody tr:hover {
    background: #fafcff;
}


.row-number {
    color: #94a3b8;
}


.drawing-number {
    display: inline-flex;

    padding: 5px 8px;

    border-radius: 6px;

    background: #eff6ff;

    color: #1d4ed8;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 12px;

    font-weight: 700;
}


.drawing-name {
    font-weight: 600;
}


.date {
    color: var(--muted);
    white-space: nowrap;
}


.actions {
    text-align: right;
}


.delete-button {
    width: 33px;
    height: 33px;

    border: 0;

    background: transparent;

    border-radius: 7px;

    cursor: pointer;

    opacity: .55;
}


.delete-button:hover {
    background: #fee2e2;

    opacity: 1;
}


.empty-row td,
.loading-row td {
    padding: 50px 20px;

    text-align: center;

    color: var(--muted);
}


/* =========================================================
   MODAL
========================================================= */

.modal {
    position: fixed;

    inset: 0;

    display: none;

    z-index: 100;
}


.modal.visible {
    display: block;
}


.modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(15, 23, 42, .55);

    backdrop-filter:
        blur(3px);
}


.modal-window {
    position: relative;

    width:
        min(520px, calc(100% - 30px));

    margin:
        10vh auto 0;

    background: white;

    border-radius: 17px;

    box-shadow:
        0 25px 70px
        rgba(15, 23, 42, .25);

    overflow: hidden;

    animation:
        modalIn .18s ease-out;
}


@keyframes modalIn {

    from {
        opacity: 0;
        transform:
            translateY(10px)
            scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }

}


.modal-header {
    padding: 21px 22px;

    display: flex;

    justify-content:
        space-between;

    border-bottom:
        1px solid var(--border);
}


.modal-header h2 {
    margin: 0;

    font-size: 19px;
}


.modal-header p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 13px;
}


.modal-close {
    width: 34px;
    height: 34px;

    border: 0;

    background: #f1f5f9;

    border-radius: 8px;

    cursor: pointer;

    font-size: 22px;
}


#drawingForm {
    padding: 22px;
}


label {
    display: block;

    margin-bottom: 17px;

    color: #334155;

    font-size: 13px;

    font-weight: 600;
}


label input,
label textarea {
    display: block;
    width: 100%;
    margin-top: 7px;
}

label textarea {
    min-height: 96px;
    resize: vertical;
    border: 1px solid var(--border);
    background: #f8fafc;
    border-radius: 9px;
    padding: 11px 13px;
    outline: none;
    font: inherit;
    font-size: 14px;
}

label textarea:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    background: white;
}


#formDrawingNumber {
    background: #f1f5f9;

    color: #1d4ed8;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-weight: 700;
}


.modal-footer {
    padding-top: 5px;

    display: flex;

    justify-content:
        flex-end;

    gap: 10px;
}


/* =========================================================
   LOGIN
========================================================= */

.login-page {
    min-height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at top left,
            #dbeafe,
            transparent 35%
        ),
        var(--bg);
}


.login-card {
    width:
        min(410px, calc(100% - 30px));

    background: white;

    border:
        1px solid var(--border);

    border-radius: 18px;

    padding: 35px;

    box-shadow:
        0 20px 60px
        rgba(15, 23, 42, .08);
}


.login-logo {
    width: 54px;
    height: 54px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 800;

    margin-bottom: 18px;
}


.login-card h1 {
    margin: 0;
    font-size: 24px;
}


.muted {
    color: var(--muted);
}


/* =========================================================
   ALERT / TOAST
========================================================= */

.alert {
    padding: 10px 12px;

    border-radius: 8px;

    font-size: 13px;

    margin: 15px 0;
}


.alert-danger {
    background: #fee2e2;

    color: #991b1b;
}


.toast {
    position: fixed;

    right: 25px;
    bottom: 25px;

    background: #0f172a;

    color: white;

    padding: 12px 17px;

    border-radius: 9px;

    font-size: 13px;

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, .2);

    transform:
        translateY(20px);

    opacity: 0;

    pointer-events: none;

    transition: .2s;

    z-index: 200;
}


.toast.show {
    transform: none;
    opacity: 1;
}


.toast.error {
    background: #b91c1c;
}


/* =========================================================
   EMPTY
========================================================= */

.empty-classifier {
    margin: 20px;

    padding: 20px;

    border-radius: 12px;

    background: #f8fafc;

    text-align: center;

    color: var(--muted);
}


.empty-classifier code {
    display: block;

    margin-top: 10px;

    padding: 8px;

    background: #e2e8f0;

    border-radius: 6px;

    font-size: 11px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .layout {
        grid-template-columns: 1fr;
    }


    .sidebar {
        border-right: 0;

        border-bottom:
            1px solid var(--border);

        max-height: 420px;
    }


    .stats {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .topbar {
        padding: 0 14px;
    }


    .brand-subtitle {
        display: none;
    }


    .topbar-actions
    .button-secondary {
        display: none;
    }


    .content {
        padding: 20px 14px;
    }


    .toolbar {
        flex-direction: column;
    }


    .selected-code {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 4px;
    }

}

/* =========================================================
   ЕСКД — ВИЗУАЛЬНЫЕ ПРЕВЬЮ
========================================================= */

.sidebar {
    position: relative;
}

.eskd-preview {
    position: fixed;
    top: 88px;
    right: 24px;
    z-index: 30;
    width: min(46vw, 680px);
    max-height: calc(100vh - 112px);
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
    display: none;
}

.eskd-preview.visible {
    display: block;
}

.eskd-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.eskd-preview-header strong {
    display: block;
    font-size: 15px;
    color: #0f172a;
}

.eskd-preview-header span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.preview-close {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 8px;
    background: #e2e8f0;
    color: #475569;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
}

.eskd-preview-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 12px;
    max-height: calc(100vh - 230px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 3px;
    scrollbar-width: thin;
}

.eskd-preview-card {
    min-width: 0;
    position: relative;
    border: 3px solid transparent;
    border-radius: 11px;
    background: #fff;
    padding: 6px;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

.eskd-preview-card:hover {
    transform: translateY(-1px);
}

.eskd-preview-card.highlight {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, .16), 0 6px 18px rgba(239, 68, 68, .15);
}

.eskd-preview-card img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: contain;
    background: #fff;
    border-radius: 7px;
}

.eskd-preview-card span {
    display: block;
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: #334155;
}

.eskd-preview-empty {
    width: 100%;
    padding: 30px 8px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}

/* =========================================================
   СПРАВОЧНИК
========================================================= */

.reference-window {
    width: min(920px, calc(100vw - 30px));
}

.reference-body {
    padding: 0 22px 22px;
    min-height: 420px;
}

#referenceSearch {
    width: 100%;
    border: 1px solid var(--border);
    background: #f8fafc;
    border-radius: 9px;
    padding: 11px 13px;
    outline: none;
    font-size: 14px;
    margin-bottom: 12px;
}

.reference-list {
    max-height: 60vh;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.reference-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s, background .12s;
}

.reference-item:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.reference-item-title {
    font-size: 13px;
    font-weight: 650;
    color: #1e293b;
}

.reference-item-path {
    font-size: 10px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .eskd-preview {
        width: min(52vw, 620px);
    }
    .eskd-preview-card img {
        height: 220px;
    }
}

@media (max-width: 900px) {
    .eskd-preview {
        width: min(92vw, 620px);
        right: 14px;
    }

    .eskd-preview-strip {
        max-height: 70vh;
    }

    .eskd-preview-card img {
        height: 220px;
    }

    .reference-list {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   НЕЗАВИСИМАЯ ПРОКРУТКА ОБЛАСТЕЙ
========================================================= */

html, body {
    height: 100%;
}

body {
    overflow: hidden;
}

.topbar {
    flex: 0 0 74px;
}

.layout {
    height: calc(100vh - 74px);
    min-height: 0;
}

.sidebar {
    min-height: 0;
}



/* =========================================================
   СПРАВКА
========================================================= */

.reference-document-window {
    width: min(1180px, calc(100vw - 30px));
    height: min(88vh, 900px);
}

.reference-document-body {
    min-height: 0;
    height: calc(100% - 90px);
    padding: 0 18px 18px;
}

.reference-document-body iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

/* =========================================================
   АДМИН-ПАНЕЛЬ
========================================================= */

.admin-page {
    height: calc(100vh - 74px);
    overflow: auto;
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.admin-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 18px;
    overflow: hidden;
}

.admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.admin-card-header h1,
.admin-card-header h2 {
    margin: 0;
    font-size: 20px;
}

.admin-card-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.admin-count {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border-radius: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 800;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #eef2f7;
    text-align: left;
    font-size: 13px;
}

.admin-table th {
    background: #f8fafc;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-actions {
    text-align: right !important;
    white-space: nowrap;
}

.button-danger {
    margin-left: 7px;
    color: #991b1b;
    background: #fee2e2;
}

.button-danger:hover {
    background: #fecaca;
}

.admin-empty {
    padding: 24px !important;
    text-align: center !important;
    color: #94a3b8;
}

.auth-links {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13px;
}

.auth-links a {
    color: #2563eb;
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

.auth-note {
    margin: 10px 0 0;
    text-align: center;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.45;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.reference-subtitle-empty {
    display: none !important;
}

@media (max-width: 800px) {
    .organization-code {
        display: none;
    }
    .eskd-preview {
        width: calc(100vw - 28px);
        right: 14px;
        top: 84px;
    }
    .eskd-preview-strip {
        grid-template-columns: 1fr;
    }
    .eskd-preview-card img {
        height: 260px;
    }
}

/* =========================================================
   ИСПРАВЛЕННЫЙ ПРЕДПРОСМОТР ЕСКД
========================================================= */

.topbar-reference-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 22px;
}

.eskd-preview {
    position: fixed;
    left: 380px;
    right: 0;
    top: 74px;
    bottom: 0;
    z-index: 18;
    display: none;
    box-sizing: border-box;
    padding: 18px 22px 22px;
    background: rgba(248, 250, 252, .98);
    border-left: 1px solid var(--border);
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
}

.eskd-preview.visible {
    display: block;
}

.eskd-preview-strip {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(var(--preview-columns, 3), minmax(0, 1fr));
    grid-template-rows: repeat(var(--preview-rows, 1), minmax(0, 1fr));
    gap: 14px;
    overflow: hidden;
}

.eskd-preview-card {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    position: relative;
    padding: 7px;
    border: 3px solid transparent;
    border-radius: 11px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
}

.eskd-preview-card.highlight {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, .16);
}

.eskd-preview-card img {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    max-height: calc(100% - 24px);
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
}

.eskd-preview-card span {
    flex: 0 0 18px;
    display: block;
    margin-top: 4px;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    font-weight: 800;
    color: #334155;
}

@media (max-width: 900px) {
    .topbar-reference-actions {
        display: none;
    }

    .eskd-preview {
        left: 0;
        top: 74px;
    }
}


/* =========================================================
   ТЕМА: ДНЕВНАЯ / НОЧНАЯ
========================================================= */
html[data-theme="dark"] {
    --bg: #0f172a;
    --card: #111827;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --border: #334155;
    --primary: #3b82f6;
    --primary-dark: #2563eb;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .content,
html[data-theme="dark"] .sidebar {
    background: var(--bg);
    color: var(--text);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .selected-code,
html[data-theme="dark"] .modal-window,
html[data-theme="dark"] .eskd-preview {
    background: #111827;
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .brand-subtitle,
html[data-theme="dark"] .page-header p,
html[data-theme="dark"] .organization-code,
html[data-theme="dark"] .tree-name,
html[data-theme="dark"] .tree-code {
    color: #94a3b8;
}

html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .tree-node:hover,
html[data-theme="dark"] .classifier-search input,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] label input,
html[data-theme="dark"] label textarea {
    background: #1e293b;
    color: #e5e7eb;
    border-color: #475569;
}

html[data-theme="dark"] .tree-node.selected {
    background: #1e3a8a;
    color: #dbeafe;
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
    border-color: var(--border);
}

/* Кнопка добавления над сообщением о выбранном коде */
.page-header .add-drawing-inline {
    margin-bottom: 10px;
}

/* Предпросмотр занимает ровно правую рабочую область и никогда не скроллится */
.eskd-preview {
    left: calc(var(--sidebar-width) + 5px) !important;
    right: 0 !important;
    top: 74px !important;
    bottom: 0 !important;
    width: auto !important;
    max-height: none !important;
    padding: 14px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.eskd-preview-strip {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    grid-template-columns: repeat(var(--preview-columns, 3), minmax(0, 1fr)) !important;
    grid-template-rows: repeat(var(--preview-rows, 1), minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.eskd-preview-card {
    min-height: 0 !important;
    padding: 4px !important;
}

.eskd-preview-card img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: contain !important;
}

.eskd-preview-card span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    margin: 0 !important;
    line-height: 16px !important;
    font-size: 11px !important;
    background: rgba(255,255,255,.78);
}

html[data-theme="dark"] .eskd-preview-card span {
    color: #e5e7eb;
    background: rgba(15,23,42,.78);
}

.manual-number-preview {
    margin: -4px 22px 18px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 9px;
    background: #f8fafc;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-weight: 700;
    color: #334155;
}

html[data-theme="dark"] .manual-number-preview {
    background: #1e293b;
    color: #e5e7eb;
}

.topbar-spacer { flex: 1 1 auto; }

@media (max-width: 900px) {
    .eskd-preview { left: 0 !important; }
    .organization-code { display: none; }
}

/* v7 функциональные улучшения */
.organization-code { font-size: 14px; font-weight: 650; color: #334155; }
.organization-code strong { font-size: 15px; }
.add-number-actions { display:flex; gap:8px; flex-wrap:wrap; }
.status-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; white-space:nowrap; }
.status-badge i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.status-active i { background:#16a34a; }
.status-active { color:#15803d; }
.status-deleted i { background:#dc2626; }
.status-deleted { color:#b91c1c; }
.row-deleted { opacity:.48; }
.row-deleted .drawing-number { background:#f1f5f9; color:#64748b; }
.profile-button .avatar { font-size:18px; line-height:1; }
.profile-avatar { width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#dbeafe;font-size:38px;margin:0 auto 18px; }
.profile-window { width:min(460px,calc(100% - 30px)); }
.sketch-number-preview { font-family:Consolas,monospace;font-size:22px;font-weight:800;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:12px;text-align:center;margin-bottom:14px; }

/* Справочные кнопки остаются на месте при прокрутке документа */
.reference-document-window .modal-header { position:relative; z-index:3; flex:0 0 auto; }
.reference-document-body { overflow:hidden; }

/* Превью строго в правой рабочей области */
.eskd-preview { left:calc(var(--sidebar-width) + 5px); right:0; top:74px; bottom:0; padding:10px; }
.eskd-preview-strip { gap:8px; padding:0; }
.eskd-preview-card { padding:4px; }
.eskd-preview-card span { font-size:11px; }

html[data-theme="dark"] .organization-code { color:#e2e8f0; }
html[data-theme="dark"] .status-active { color:#4ade80; }
html[data-theme="dark"] .status-deleted { color:#f87171; }
html[data-theme="dark"] .row-deleted { opacity:.42; }
.profile-window form { padding:20px 22px; }
.profile-window .modal-footer { justify-content:space-between; }

/* v8 */
:root { --sidebar-width: 380px; }
.layout { grid-template-columns: var(--sidebar-width) 5px minmax(0,1fr) !important; }
.layout-divider { cursor: col-resize; background: transparent; position:relative; z-index:25; }
.layout-divider::after { content:""; position:absolute; top:0; bottom:0; left:1px; width:3px; background:#cbd5e1; transition:.15s; }
.layout-divider:hover::after, body.resizing-layout .layout-divider::after { background:#2563eb; width:4px; }
.tree { scrollbar-width:thin; scrollbar-color:#94a3b8 #f1f5f9; }
.tree::-webkit-scrollbar { width:10px; }
.tree::-webkit-scrollbar-track { background:#f1f5f9; border-radius:10px; }
.tree::-webkit-scrollbar-thumb { background:#94a3b8; border-radius:10px; border:2px solid #f1f5f9; }
.table-card { max-width: 1450px; margin-left:auto; margin-right:auto; }
table { max-width:1450px; margin:0 auto; }
.sketches-section { display:none; margin-top:18px; }
.sketches-section.visible { display:block; }
.sketches-header { display:flex; align-items:center; gap:14px; margin:0 0 10px; }
.sketches-header h3 { margin:0; font-size:16px; }
.sketch-search-box { flex:1; }
.status-badge { min-width:82px; }
.restore-button,.restore-sketch-button { width:33px;height:33px;border:0;background:#dcfce7;color:#15803d;border-radius:7px;cursor:pointer; }
.restore-button:hover,.restore-sketch-button:hover { background:#bbf7d0; }
html[data-theme="dark"] .organization-code { color:#cbd5e1; }
html[data-theme="dark"] .organization-code strong { color:#ffffff !important; text-shadow:0 0 8px rgba(255,255,255,.12); }
html[data-theme="dark"] .tree-node.selected, html[data-theme="dark"] .tree-node.selected .tree-code, html[data-theme="dark"] .tree-node.selected .tree-name { color:#ffffff !important; }
html[data-theme="dark"] .tree-node.selected { background:#1d4ed8 !important; }
html[data-theme="dark"] .selected-code { background:#172554; color:#fff; }
html[data-theme="dark"] .selected-code-number, html[data-theme="dark"] .selected-code-name { color:#fff !important; }
html[data-theme="dark"] .layout-divider::after { background:#475569; }
html[data-theme="dark"] .layout-divider:hover::after { background:#60a5fa; }
html[data-theme="dark"] .tree { scrollbar-color:#64748b #1e293b; }
html[data-theme="dark"] .tree::-webkit-scrollbar-track { background:#1e293b; }
html[data-theme="dark"] .tree::-webkit-scrollbar-thumb { background:#64748b; border-color:#1e293b; }
@media (max-width:900px) { .layout { grid-template-columns:1fr !important; } .layout-divider { display:none; } }

/* v9 — таблицы, дерево и адаптивность */
.quick-class-buttons{display:flex;gap:5px;margin-bottom:9px;flex-wrap:nowrap}
.quick-class-button{width:32px;height:28px;padding:0;border:1px solid var(--border);border-radius:6px;background:#f1f5f9;color:#334155;font-size:11px;font-weight:700;cursor:pointer}
.quick-class-button:hover{background:#dbeafe;color:#1d4ed8}
.tree-toggle,.tree-spacer{display:flex;align-items:center;justify-content:center;flex:0 0 30px}
.tree-code{text-align:center}
.tree-row{align-items:center}
.table-card{max-width:1450px}
table{table-layout:auto;max-width:1450px}
th,td{padding-top:9px;padding-bottom:9px;line-height:1.25}
th:first-child,td:first-child{width:1%;white-space:nowrap}
th:nth-child(2),td:nth-child(2){width:145px;white-space:nowrap}
th:nth-child(4),td:nth-child(4){width:145px}
.actions-col,.actions{width:1%;white-space:nowrap;text-align:right}
.actions{display:flex;justify-content:flex-end;gap:5px}
.status-badge{min-width:0!important}
.edit-button,.delete-button,.restore-button{width:31px;height:31px;border:0;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.edit-button{background:#e2e8f0;color:#334155}.edit-button:hover{background:#cbd5e1}
.delete-button{background:#fee2e2;color:#b91c1c!important;opacity:1!important}.delete-button:hover{background:#fecaca}
.restore-button{background:#dcfce7;color:#15803d!important}.restore-button:hover{background:#bbf7d0}
.editable-cell{cursor:pointer}
.editable-cell:hover{background:#f8fafc}
html[data-theme="dark"] .edit-button{background:#334155;color:#f8fafc}
html[data-theme="dark"] .delete-button{background:#7f1d1d;color:#fff!important}
html[data-theme="dark"] .delete-button:hover{background:#991b1b}
html[data-theme="dark"] .restore-button{background:#14532d;color:#dcfce7!important}
html[data-theme="dark"] .editable-cell:hover{background:#1e293b}
html[data-theme="dark"] .quick-class-button{background:#1e293b;color:#e5e7eb;border-color:#475569}
html[data-theme="dark"] .quick-class-button:hover{background:#1d4ed8;color:#fff}
html[data-theme="dark"] .tree-node.selected{color:#fff!important}
.reference-document-body iframe{overflow:hidden}
/* fixed navigation lives inside the document, and the document itself scrolls */
.reference-document-body{position:relative}

@media (min-width:901px){.layout{grid-template-columns:var(--sidebar-width) 5px minmax(0,1fr)!important}}


/* v10 refinements */
.tree-toggle {
    width: 30px; height: 30px; flex: 0 0 30px;
    font-size: 26px; font-weight: 800; line-height: 1;
    color: #475569; border-radius: 7px;
}
.tree-toggle:hover { background:#e2e8f0; color:#1d4ed8; }
html[data-theme="dark"] .tree-toggle { color:#e2e8f0; }
html[data-theme="dark"] .tree-toggle:hover { background:#334155; color:#93c5fd; }
.eskd-preview { padding: 10px; }
.eskd-preview-strip {
    width:100%; height:100%; max-height:none; overflow:hidden;
    grid-template-columns: repeat(var(--preview-columns, 1), minmax(0,1fr));
    grid-template-rows: repeat(var(--preview-rows, 1), minmax(0,1fr));
    align-items:stretch;
}
.eskd-preview-card { min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.eskd-preview-card img { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; }
.eskd-preview-card span { display:none !important; }
.add-number-actions .button { height:42px; min-height:42px; }
.copy-button,.edit-button,.delete-button,.restore-button { width:31px; height:31px; border:0; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:15px; }
.copy-button { background:#e0f2fe; color:#0369a1; }
.copy-button:hover { background:#bae6fd; }
html[data-theme="dark"] .copy-button { background:#164e63; color:#e0f2fe; }
html[data-theme="dark"] .copy-button:hover { background:#155e75; }
.actions { gap:4px; }
.row-deleted { opacity:.72; }
.row-deleted td:not(:first-child) { color:#a8b0bb; }
.row-deleted .drawing-number { color:#a8b0bb; background:#f1f5f9; }
.row-deleted .status-deleted { color:#dc2626; opacity:1; }
html[data-theme="dark"] .row-deleted td:not(:first-child) { color:#64748b; }
html[data-theme="dark"] .row-deleted .drawing-number { color:#64748b; background:#1e293b; }
html[data-theme="dark"] .row-deleted .status-deleted { color:#f87171; }
html[data-theme="dark"] tbody tr:hover { background:#1e3a5f !important; }
html[data-theme="dark"] tbody tr:hover td { color:#f8fafc !important; }
html[data-theme="dark"] tbody tr:hover .status-deleted { color:#fca5a5 !important; }
.table-wrapper { max-height: 285px; overflow-y:auto; overflow-x:auto; }
.table-wrapper thead th { position:sticky; top:0; z-index:2; }
.table-wrapper table { margin:0; }
.reference-document-window { width:min(94vw,1500px); height:min(94vh,1100px); }
.reference-document-body { height:calc(100% - 78px); padding:0 10px 10px; }
.reference-document-body iframe { border-radius:8px; }
.organization-code { display:flex; align-items:center; line-height:1; }

/* v11 */
.page-header .add-number-actions{width:100%;align-items:center}.page-header .add-number-actions #exportButton{margin-left:auto}
.table-wrapper{max-height:285px;overflow-y:auto;overflow-x:auto}.table-wrapper thead th{position:sticky;top:0;z-index:5;background:#f8fafc;color:#64748b;text-align:center;box-shadow:0 1px 0 var(--border)}
th,td{text-align:center;padding:7px 10px;line-height:1.15}td:nth-child(3),td:nth-child(4),td:nth-child(5){text-align:left}th:first-child,td:first-child{width:92px}th:nth-child(2),td:nth-child(2){width:150px}th:nth-child(4),td:nth-child(4){width:150px}th.actions-col,td.actions{width:108px;min-width:108px;max-width:108px}.actions{justify-content:center;white-space:nowrap}.actions button{flex:0 0 31px}
html[data-theme="dark"] .table-wrapper thead th{background:#111827;color:#e5e7eb;box-shadow:0 1px 0 #334155}
html[data-theme="dark"] tbody tr:hover{background:#1e3a5f!important}html[data-theme="dark"] tbody tr:hover td{color:#fff!important}
.sketches-hint{display:none}.export-window{width:min(500px,calc(100% - 30px))}.export-form{padding:22px}.export-actions{display:flex;gap:8px;flex-wrap:wrap}
.standalone-page{padding:24px 28px;max-width:1550px;margin:0 auto}.standalone-page .table-wrapper{max-height:calc(100vh - 210px)}.sketches-page-card{margin-top:15px}

/* v11.1 classifier repair: stable row alignment for lazy-loaded tree */
.tree-row {
    display: flex;
    align-items: center !important;
    min-height: 34px;
}
.tree-toggle,
.tree-spacer {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
}
.tree-toggle {
    line-height: 1 !important;
    text-align: center !important;
}
.tree-node {
    min-width: 0;
    min-height: 32px;
    align-items: center !important;
    padding: 5px 8px !important;
    gap: 9px;
}
.tree-code {
    flex: 0 0 56px;
    width: 56px;
    min-width: 56px !important;
    text-align: center !important;
    line-height: 1.2;
}
.tree-name {
    min-width: 0;
    line-height: 1.25 !important;
}
.tree-children {
    padding-left: 16px;
}

/* v12 table/layout refinements */
.add-number-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
}
.add-number-actions .button,
.add-number-actions a.button {
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    line-height: 1;
}
.page-header .add-number-actions { align-items: stretch; }
.page-header .add-number-actions #exportButton { margin-left: auto; }

/* Clear, subtle vertical separators between columns */
.table-wrapper table { border-collapse: separate; border-spacing: 0; }
.table-wrapper th,
.table-wrapper td { border-right: 1px solid var(--border); }
.table-wrapper th:last-child,
.table-wrapper td:last-child { border-right: 0; }

/* Fixed opaque header while the table body scrolls */
.table-wrapper thead th {
    background: #f8fafc !important;
    opacity: 1 !important;
    isolation: isolate;
}
html[data-theme="dark"] .table-wrapper thead th {
    background: #111827 !important;
    color: #e5e7eb !important;
}

/* Status text is left-aligned so the dot never shifts between statuses. */
.table-wrapper th:first-child,
.table-wrapper td:first-child { text-align: left; }
.status-badge { justify-content: flex-start; text-align: left; }

/* Three action buttons need a little more room and must never overlap Note. */
th.actions-col, td.actions {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
}
.actions { justify-content: center !important; }

/* Exactly five data rows visible in the main table. */
.table-card .table-wrapper { max-height: 193px; }
.table-card .table-wrapper thead th { position: sticky; top: 0; }

/* Sketches page uses the same five-row viewport unless the screen is very small. */
.sketches-page-card .table-wrapper { max-height: 193px; }

html[data-theme="dark"] .table-wrapper th,
html[data-theme="dark"] .table-wrapper td { border-right-color: #334155; }

@media (max-width: 900px) {
    .add-number-actions { flex-wrap: wrap; }
    .page-header .add-number-actions #exportButton { margin-left: 0; }
}


/* v13 refinements */
.reference-document-window {
    margin: 2vh auto 0 !important;
    width: min(94vw, 1500px) !important;
    height: min(94vh, 1100px) !important;
    max-height: calc(100vh - 4vh) !important;
}
.reference-document-body {
    min-height: 0 !important;
    height: calc(100% - 78px) !important;
    overflow: hidden !important;
}
.reference-document-body iframe {
    height: 100% !important;
}

/* Main page description uses the same typography as the sketches page. */
.page-header > p {
    margin: 6px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: var(--muted) !important;
}

/* Exactly five data rows on the main archive table. */
.table-card .table-wrapper {
    max-height: 226px !important;
}

/* Sketch archive can extend to the bottom edge of the viewport. */
.standalone-page .sketches-page-card .table-wrapper {
    max-height: calc(100vh - 188px) !important;
}

/* Keep sketch-page controls aligned with the main page. */
.standalone-page .add-number-actions {
    align-items: stretch !important;
}



/* v14: author column and table readability */
.table-wrapper th:nth-child(5), .table-wrapper td:nth-child(5) { width: 150px; min-width: 150px; }
.table-wrapper th:nth-child(6), .table-wrapper td:nth-child(6) { min-width: 220px; }
.table-wrapper th:nth-child(7), .table-wrapper td:nth-child(7) { width: 112px; min-width: 112px; max-width: 112px; }
.table-wrapper .actions { width:112px; min-width:112px; max-width:112px; }
.table-wrapper th, .table-wrapper td { vertical-align: middle; }

/* Main archive: a little more than five visible rows, avoiding the clipped half-row. */
.table-card .table-wrapper { max-height: 260px !important; }

/* Standalone sketches: use all available vertical space, then scroll. */
.standalone-page .sketches-page-card .table-wrapper { max-height: calc(100vh - 190px) !important; }

.admin-settings-form { display:grid; grid-template-columns:minmax(0,520px) auto; align-items:end; gap:12px; padding:18px 20px 20px; }
.admin-settings-form label { display:flex; flex-direction:column; gap:7px; min-width:0; font-weight:650; }
.admin-settings-form input[type=text], .admin-settings-form input[type=file], .admin-settings-form label input { box-sizing:border-box; min-height:42px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--card); color:var(--text); }
.admin-settings-form #saveAdminName { min-height:42px; align-self:end; white-space:nowrap; }
@media (max-width: 640px) { .admin-settings-form { grid-template-columns:1fr; } .admin-settings-form #saveAdminName { width:100%; } }

/* Prefetched/lazy reference document: no visible layout flash. */
.reference-document-body iframe { background:#fff; }