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

.docs-stage,
.docs-empty-state {
    width: 100%;
}

.docs-stage {
    position: relative;
}

.docs-shell {
    margin: 1em auto 2rem;
    max-width: 88rem;
}

.docs-sidebar {
    background: rgba(13, 17, 26, 0.78);
}

.docs-sidebar .docs-tree-page {
    font-weight: 520;
}

.docs-sidebar .docs-tree-page--public {
    color: #d8ffe4;
}

.docs-sidebar .docs-tree-page--user {
    color: #d6f3ff;
}

.docs-sidebar .docs-tree-page--ticket {
    color: #fff0c9;
}

.docs-sidebar .docs-tree-page--avastick {
    color: #ffe6ca;
}

.docs-sidebar .docs-tree-page--admin {
    color: #ffd9e7;
}

.docs-stage-header,
.docs-document,
.docs-empty-state {
    box-sizing: border-box;
}

.docs-stage-header {
    --docs-header-kicker: rgba(255, 214, 226, 0.78);
    --docs-header-title: #ffd9e7;
    --docs-header-summary: rgba(255, 236, 243, 0.82);
    width: 100%;
    max-width: 50em;
    margin-bottom: 1rem;
}

.docs-stage-header--public {
    --docs-header-kicker: rgba(197, 255, 214, 0.82);
    --docs-header-title: #d8ffe4;
    --docs-header-summary: rgba(226, 255, 235, 0.84);
}

.docs-stage-header--user {
    --docs-header-kicker: rgba(168, 229, 255, 0.82);
    --docs-header-title: #d6f3ff;
    --docs-header-summary: rgba(221, 245, 255, 0.84);
}

.docs-stage-header--ticket {
    --docs-header-kicker: rgba(255, 226, 165, 0.84);
    --docs-header-title: #fff0c9;
    --docs-header-summary: rgba(255, 243, 214, 0.84);
}

.docs-stage-header--avastick {
    --docs-header-kicker: rgba(255, 196, 146, 0.84);
    --docs-header-title: #ffe6ca;
    --docs-header-summary: rgba(255, 237, 219, 0.84);
}

.docs-stage-header--admin {
    --docs-header-kicker: rgba(255, 214, 226, 0.78);
    --docs-header-title: #ffd9e7;
    --docs-header-summary: rgba(255, 236, 243, 0.82);
}

.docs-stage-kicker {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: var(--docs-header-kicker);
}

.docs-stage-heading {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-top: 0.2rem;
}

.docs-stage-title,
.docs-empty-state h2 {
    margin: 0;
    color: var(--docs-header-title);
}

.docs-stage-summary {
    margin: 0.65rem 0 0;
    max-width: 62rem;
    color: var(--docs-header-summary);
}

.docs-document,
.docs-empty-state {
    padding: 1.35rem 1.45rem;
}

.docs-empty-state p:last-child {
    margin-bottom: 0;
}

.docs-stage-permission,
.docs-permission-form {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: rgba(255, 236, 243, 0.78);
    font-size: 0.88rem;
}

.docs-stage-permission strong {
    color: #ffd9e7;
}

.docs-permission-form label {
    color: rgba(255, 236, 243, 0.78);
    font-size: 0.88rem;
}

.docs-permission-form select {
    min-height: 2.35rem;
    max-width: 100%;
    padding: 0.35rem 1.8rem 0.35rem 0.65rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 12, 18, 0.72);
    color: #fff0db;
    font-size: 0.88rem;
}

.docs-stage-settings-trigger {
    position: absolute;
    top: 0.2rem;
    right: 0.25rem;
    min-height: 2.35rem;
    min-width: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--docs-header-title);
    font-size: 1rem;
    z-index: 2;
}

.docs-stage-settings-trigger:hover,
.docs-stage-settings-trigger:focus-visible {
    background: transparent;
    color: #ffffff;
}

.docs-stage-settings-trigger[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
}

.docs-stage-settings-glyph {
    font-size: 1.55rem;
    line-height: 1;
}

.docs-settings-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.docs-settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 5, 10, 0.74);
    backdrop-filter: blur(4px);
}

.docs-settings-dialog {
    position: relative;
    z-index: 1;
    width: min(32rem, calc(100vw - 2rem));
    margin: 8vh auto 0;
    padding: 1.2rem 1.25rem 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(17, 23, 33, 0.98), rgba(9, 13, 20, 0.98));
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.45);
}

.docs-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.docs-settings-header h3 {
    margin: 0;
    color: #fff0db;
}

.docs-settings-close {
    border: 0;
    background: transparent;
    color: rgba(255, 240, 219, 0.72);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.docs-settings-close:hover {
    color: #fff0db;
}

.docs-settings-form {
    display: grid;
    gap: 0.65rem;
}

.docs-settings-form label {
    font-size: 0.9rem;
    color: rgba(255, 236, 243, 0.82);
}

.docs-settings-form input,
.docs-settings-form select {
    min-height: 2.55rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 12, 18, 0.8);
    color: #fff0db;
    font-size: 0.95rem;
}

.docs-settings-form input:focus,
.docs-settings-form select:focus {
    outline: 2px solid rgba(168, 229, 255, 0.45);
    outline-offset: 1px;
}

.docs-settings-note {
    margin: 0.25rem 0 0;
    color: rgba(255, 236, 243, 0.74);
    font-size: 0.85rem;
    line-height: 1.5;
}

.docs-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 0.55rem;
}

body.docs-settings-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    .docs-stage-heading {
        align-items: flex-start;
    }

    .docs-settings-dialog {
        margin-top: 4vh;
    }

    .docs-settings-actions {
        flex-direction: column-reverse;
    }
}