.documents-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.documents-workspace {
    display: grid;
    grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
    min-height: 540px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: var(--bg-glass);
}

.collections-pane,
.documents-pane {
    min-width: 0;
}

.collections-pane {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    border-right: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
}

.documents-pane {
    display: flex;
    flex-direction: column;
    padding: 1.15rem;
}

.pane-heading,
.documents-title-line,
.documents-detail-header,
.documents-toolbar,
.collection-row-main,
.collection-row-meta {
    display: flex;
    align-items: center;
}

.pane-heading {
    justify-content: space-between;
}

.pane-heading h3,
.documents-detail-header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.pane-count {
    min-width: 1.6rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--bg-glass-hover);
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-align: center;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0 0.7rem;
    border: 1px solid var(--border-light);
    border-radius: 9px;
    background: var(--bg-primary);
    color: var(--text-muted);
}

.search-field:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.search-field input {
    width: 100%;
    min-width: 0;
    padding: 0.62rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}

.search-field input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.collection-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 0;
    overflow-y: auto;
}

.collection-row {
    width: 100%;
    padding: 0.7rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.collection-row:hover {
    border-color: var(--border-light);
    background: var(--bg-glass-hover);
}

.collection-row:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.collection-row.is-selected {
    border-color: color-mix(in srgb, var(--accent-primary) 52%, var(--border-light));
    background: color-mix(in srgb, var(--accent-primary) 13%, transparent);
}

.collection-row-main {
    justify-content: space-between;
    gap: 0.5rem;
}

.collection-row-title {
    min-width: 0;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-row-meta {
    gap: 0.35rem;
    margin-top: 0.22rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.collection-kind {
    flex: 0 0 auto;
    padding: 0.08rem 0.42rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-light));
    border-radius: 999px;
    color: var(--accent-primary);
    font-size: 0.68rem;
    font-weight: 600;
}

.status-dot {
    width: 0.46rem;
    height: 0.46rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--text-muted);
}

.status-dot.status-ready {
    background: var(--success);
}

.status-dot.status-missing {
    background: var(--warning);
}

.status-dot.status-unavailable {
    background: var(--error);
}

.documents-detail-header {
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.documents-detail-title {
    min-width: 0;
}

.documents-title-line {
    flex-wrap: wrap;
    gap: 0.55rem;
}

#documents-selected-summary,
.access-summary {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.83rem;
}

.access-summary {
    color: var(--text-muted);
}

.compact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.btn-compact {
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
}

.btn-icon {
    justify-content: center;
    width: 2.65rem;
    padding: 0.65rem;
}

.danger-action {
    color: var(--error);
}

.danger-action:hover {
    border-color: color-mix(in srgb, var(--error) 65%, var(--border-light));
    background: color-mix(in srgb, var(--error) 10%, transparent);
}

.btn-primary:disabled,
.btn-secondary:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

.documents-toolbar {
    gap: 0.65rem;
    padding: 1rem 0;
}

.documents-search-field {
    flex: 1;
}

.documents-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 260px;
    border-top: 1px solid var(--border-light);
}

.document-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border-light);
}

.document-row:hover {
    background: color-mix(in srgb, var(--bg-glass-hover) 70%, transparent);
}

.document-open {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.72rem 0.55rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.document-open:focus-visible,
.document-delete:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.file-icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--text-muted);
    color: #fff;
}

.file-icon.pdf {
    background: #dc2626;
}

.file-icon.word,
.file-icon.docx {
    background: #2563eb;
}

.file-icon.txt,
.file-icon.csv {
    background: #64748b;
}

.file-icon.excel,
.file-icon.xlsx {
    background: #15803d;
}

.document-row-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.document-row-title {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-row-meta {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-delete {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-right: 0.35rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
}

.empty-state {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 180px;
    padding: 1.5rem;
    color: var(--text-muted);
    text-align: center;
}

.empty-state i {
    font-size: 2rem;
}

.empty-state.compact {
    min-height: 90px;
    padding: 0.8rem;
    font-size: 0.82rem;
}

.error-state {
    color: var(--error);
}

.danger-note {
    margin-top: 1rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--error) 45%, var(--border-light));
    border-radius: 8px;
    background: color-mix(in srgb, var(--error) 9%, transparent);
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.btn-danger {
    background: var(--error);
}

.upload-target {
    padding: 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-glass);
}

.upload-target-label,
.upload-target small,
.file-size {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.upload-target strong {
    display: block;
    margin: 0.12rem 0;
    color: var(--text-primary);
}

.upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.5rem;
    border: 2px dashed var(--border-light);
    border-radius: 12px;
    background: var(--bg-glass);
    text-align: center;
    cursor: pointer;
}

.upload-zone:hover,
.upload-zone.is-dragging,
.upload-zone.has-files {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-glass));
}

.upload-zone > i {
    color: var(--accent-primary);
    font-size: 2.2rem;
}

.upload-zone h4,
.upload-zone p {
    margin: 0;
}

.upload-preview {
    margin-top: 1rem;
}

.file-previews {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.file-preview {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.file-info {
    min-width: 0;
    flex: 1;
}

.file-name {
    display: block;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-remove {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.file-remove:hover {
    background: color-mix(in srgb, var(--error) 10%, transparent);
    color: var(--error);
}

.supported-formats {
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
}

.doc-viewer-modal {
    width: min(960px, 96vw);
    height: min(85vh, 850px);
    max-width: 960px;
}

.doc-viewer-body {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.65rem;
    overflow: hidden;
}

.doc-viewer-meta {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.doc-viewer-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.doc-viewer-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.doc-viewer-legend-swatch {
    width: 0.8rem;
    height: 0.8rem;
    border: 1px solid var(--border-medium);
    border-radius: 3px;
}

.doc-viewer-scroll {
    min-height: 0;
    flex: 1;
    overflow: auto;
    padding: 0.85rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-glass);
}

.doc-viewer-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.875rem;
    line-height: 1.55;
}

.doc-viewer-text .doc-chunk {
    border-radius: 2px;
}

.doc-viewer-text .doc-chunk-0,
.doc-viewer-legend-swatch.doc-chunk-0 {
    background: rgb(99 102 241 / 22%);
}

.doc-viewer-text .doc-chunk-1 {
    background: rgb(16 185 129 / 20%);
}

.doc-viewer-text .doc-chunk-2 {
    background: rgb(245 158 11 / 22%);
}

.doc-viewer-text .doc-chunk-3 {
    background: rgb(236 72 153 / 18%);
}

.doc-viewer-text .doc-chunk-4 {
    background: rgb(139 92 246 / 20%);
}

.doc-viewer-text .doc-chunk-5 {
    background: rgb(20 184 166 / 20%);
}

.doc-viewer-text .doc-overlap,
.doc-viewer-legend-swatch.doc-overlap {
    background: repeating-linear-gradient(
        -45deg,
        rgb(245 158 11 / 28%),
        rgb(245 158 11 / 28%) 4px,
        rgb(245 158 11 / 12%) 4px,
        rgb(245 158 11 / 12%) 8px
    );
}

.doc-viewer-rechunk {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

@media (max-width: 900px) {
    .documents-workspace {
        grid-template-columns: 1fr;
    }

    .collections-pane {
        max-height: 270px;
        border-right: 0;
        border-bottom: 1px solid var(--border-light);
    }

    .collection-list {
        min-height: 100px;
    }
}

@media (max-width: 640px) {
    .documents-page-header,
    .documents-detail-header {
        flex-direction: column;
    }

    .documents-page-header .btn-primary {
        width: 100%;
        justify-content: center;
    }

    .compact-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .compact-actions .btn-compact {
        flex: 1 1 auto;
        justify-content: center;
    }

    .documents-toolbar {
        flex-wrap: wrap;
    }

    .documents-search-field {
        flex-basis: 100%;
    }

    .documents-pane {
        padding: 0.85rem;
    }

    .document-row-meta {
        white-space: normal;
    }
}