/* Folder Navigation Styles */
.folder-btn {
    display: inline-block;
    padding: 10px 16px;
    margin: 0 8px 8px 0;
    border-radius: 6px;
    background: #f8f9fa;
    text-decoration: none;
    color: #2c3e50;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    font-weight: 500;
}

.folder-btn:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    color: #2c3e50;
    text-decoration: none;
}

.folder-btn.active {
    background: #007bff;
    color: white;
    border-color: #0056b3;
    box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}

.folder-btn.active:hover {
    background: #0056b3;
    border-color: #003d82;
}

.folder-btn i {
    margin-right: 6px;
}

.folder-btn .folder-count {
    font-size: 12px;
    opacity: 0.75;
    margin-left: 4px;
}

/* Folder Edit Button - Show on Hover */
.folder-btn:hover .folder-edit-btn {
    display: inline-block !important;
}

.folder-edit-btn {
    display: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #95a5a6 !important;
    font-size: 14px !important;
    padding: 2px 6px !important;
    margin-left: 8px !important;
    transition: all 0.2s !important;
}

.folder-edit-btn:hover {
    color: #3498db !important;
}

/* Content Header */
.content-header {
    border-bottom: 4px solid #000000;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* Content Padding */
.content {
    padding-top: 0;
}

/* Card Styling */
.card-header {
    background: #212529;
    border-radius: 6px 6px 0 0;
}

.card-title {
    color: white;
    font-weight: 600;
    margin: 0;
    padding: 8px 0;
}

.card-title i {
    margin-right: 8px;
    color: #fff;
}

.card-title .document-count {
    font-size: 13px;
    font-weight: 500;
    margin-left: 12px;
    opacity: 0.7;
    color: #495057;
}

/* Table Header Styling */
.table thead {
    background: #212529;
}

.table thead th {
    color: white;
    border-color: #495057;
}

/* Table Row Styling */
.table tbody td {
    vertical-align: middle;
}

.doc-file-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.doc-file-icon {
    font-size: 24px;
    color: #3498db;
}

.doc-file-icon .fa-file-pdf {
    color: #e74c3c;
}

.doc-file-name {
    font-weight: 600;
    color: #2c3e50;
}

.doc-file-extension {
    font-size: 12px;
    color: #95a5a6;
    margin-top: 2px;
}

.doc-folder-badge {
    color: black;
}

.doc-upload-date {
    font-size: 13px;
    color: #2c3e50;
}

.doc-actions {
    display: flex;
    gap: 8px;
}

/* Empty State */
.empty-state-container {
    text-align: center;
    padding: 60px 20px;
    color: #95a5a6;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 500;
}

.empty-state-message {
    font-size: 14px;
}


/* File Preview Image Background */
.preview-image {
    background: repeating-conic-gradient(#e9ecef 0% 25%, #ffffff 0% 50%) 50% / 24px 24px;
}

/* Modal Styling */
#fileModal .modal-dialog.modal-lg {
    max-width: 900px !important;
    height: 90vh !important;
}

#fileModal .modal-content {
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

#fileModal .modal-body {
    flex: 1;
    overflow-y: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#fileContent {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#fileContent img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#fileContent iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* File Name Cell Styling */
.file-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-icon {
    font-size: 24px;
    color: #3498db;
    flex-shrink: 0;
}

.file-icon.pdf {
    color: #e74c3c;
}

.file-icon.image {
    color: #9b59b6;
}

.file-info {
    flex: 1;
}

.download-btn {
    flex-shrink: 0;
    cursor: pointer;
    color: #3498db;
    text-decoration: none;
}

.download-btn:hover {
    color: #2980b9;
}

/* ---- Folder tree ---------------------------------------------------------
   The tree reuses .folder-btn for each row, so hover, active and drag-over
   states stay identical to the flat navigation it replaced. Only the layout
   changes: rows stack and indent instead of flowing inline.                */

.folder-tree .folder-btn {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0;
    padding: 7px 12px;
    transform: none;
}

.folder-tree .folder-btn:hover {
    transform: none;
}

.folder-tree-root,
.folder-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each level steps in, with a guide line back to the parent. */
.folder-tree-children {
    margin-left: 18px;
    padding-left: 10px;
    border-left: 1px solid #e9ecef;
}

.folder-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.folder-tree-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #95a5a6;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    padding: 0;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.folder-tree-toggle:hover {
    background: #e9ecef;
    color: #2c3e50;
}

.folder-tree-toggle i {
    font-size: 11px;
    margin: 0;
}

/* Keeps rows without children aligned with rows that have a toggle. */
.folder-tree-toggle-spacer {
    display: inline-block;
    width: 22px;
    flex: 0 0 22px;
}

.folder-tree-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-tree-count {
    font-size: 12px;
    opacity: 0.75;
    margin-left: 8px;
    white-space: nowrap;
}

.folder-tree-item.drag-over > .folder-tree-row > .folder-btn {
    background: #d4edda;
    border-color: #28a745;
}

/* Breadcrumb above the tree. */
.folder-breadcrumb {
    margin-bottom: 12px;
    font-size: 14px;
    color: #6c757d;
}

.folder-breadcrumb a {
    color: #007bff;
    text-decoration: none;
}

.folder-breadcrumb a:hover {
    text-decoration: underline;
}

.folder-breadcrumb-sep {
    margin: 0 6px;
    color: #ced4da;
}

.folder-breadcrumb-current {
    font-weight: 600;
    color: #2c3e50;
}

@media (max-width: 575px) {
    .folder-tree-children {
        margin-left: 10px;
        padding-left: 6px;
    }
}

/* ---- Drag files in from the desktop -------------------------------------
   The documents card is a drop zone; the overlay only appears while files
   are actually over it.                                                    */

#documentsDropZone {
    position: relative;
}

.file-drop-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px dashed #28a745;
    border-radius: 6px;
    background: rgba(212, 237, 218, 0.92);
    color: #1e7e34;
    pointer-events: none; /* never swallow the drop itself */
}

#documentsDropZone.file-drop-active .file-drop-overlay {
    display: flex;
}

.file-drop-overlay i {
    font-size: 40px;
    margin-bottom: 10px;
}

.file-drop-overlay-text {
    font-size: 16px;
    font-weight: 600;
}

/* A folder in the tree highlights the same way when files hover over it. */
.folder-btn.drag-over {
    background: #d4edda;
    border-color: #28a745;
    color: #1e7e34;
}

/* ---- Bulk selection ------------------------------------------------------ */

.document-selection-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #e7f1ff;
    border-bottom: 1px solid #b8daff;
}

.document-selection-count {
    font-weight: 600;
    color: #004085;
    white-space: nowrap;
}

.document-selection-bar select {
    width: auto;
    min-width: 180px;
    max-width: 100%;
}

.document-selection-hint {
    font-size: 12px;
    color: #6c757d;
}

/* Admin: the whole row is a tick target. Member: it opens the reader. Either way it reacts. */
.cd-table tbody tr[data-document-id] {
    cursor: pointer;
}

tr.row-selected {
    background: #e7f1ff !important;
}

/* The whole batch fades while it is being dragged, not just the grabbed row. */
tr.dragging {
    opacity: 0.45;
}

@media (max-width: 575px) {
    .document-selection-hint {
        display: none;
    }
}

/* Selection column. The box itself is drawn by the theme's .custom-control-label pseudo-elements,
   so nothing here touches its size or colour - these checkboxes must match every other one in the
   admin UI. The label only needs a hit area, because it carries no text. */
.document-select-cell {
    width: 44px;
    text-align: center;
    vertical-align: middle;
}

/* Bootstrap draws the box with .custom-control-label::before at left:-1.5rem - inside the
   parent's padding, outside the label's own box. That is fine when the label has text to click,
   but these labels are empty, so the box you see would not be part of anything clickable.
   Pull the padding off and bring the box inside the label, which then IS the hit area.
   Sizes and colours are left to the theme. */
.document-select-cell .custom-control {
    display: inline-block;
    margin: 0;
    padding-left: 0;
}

.document-select-cell .custom-control-label {
    display: block;
    width: 1rem;
    height: 1.25rem;
    cursor: pointer;
}

.document-select-cell .custom-control-label::before,
.document-select-cell .custom-control-label::after {
    left: 0;
}

/* The toolbar's own controls line up on one baseline. */
.document-selection-bar label {
    font-weight: 500;
    white-space: nowrap;
}

/* Nothing ticked: still readable, plainly not actionable. */
.document-selection-bar.is-idle {
    background: #f8f9fa;
    border-bottom-color: #dee2e6;
    color: #6c757d;
}

.document-selection-bar.is-idle .document-selection-count {
    color: #6c757d;
}

.document-selection-bar :disabled {
    cursor: not-allowed;
}

/* ============================================================================
   Club Documents layout
   Folder tree in a column beside the documents rather than full-width bars
   above them, with the audit trail on the right of the admin screen.
   Palette is the app's existing Bootstrap/AdminLTE set.
   ========================================================================== */

.cd-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cd-page-sub {
    margin: 4px 0 0;
    font-size: 15px;
    color: #6c757d;
}

.cd-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cd-search {
    position: relative;
}

.cd-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 14px;
    pointer-events: none;
}

.cd-search input {
    width: 250px;
    height: 40px;
    padding-left: 34px;
    border-radius: 6px;
}

.cd-layout {
    display: grid;
    /* A fair slice of the width for folders, the rest for the files - but never so narrow
       that folder names have to be cut short, which is what a fixed 240px did on longer ones like
       "Board Minutes". minmax takes whichever is larger, so the percentage governs on a wide
       screen and the floor takes over on a small one. */
    grid-template-columns: minmax(260px, 40%) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.cd-layout-member {
    /* Same split as the admin side - the member tree shows the same folder names. */
    grid-template-columns: minmax(260px, 40%) minmax(0, 1fr);
}

.cd-rail-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 10px;
    padding: 0 4px;
}

.cd-rail-note {
    margin: 14px 4px 0;
    padding-top: 12px;
    border-top: 1px solid #dee2e6;
    font-size: 13px;
    line-height: 1.5;
    color: #6c757d;
}

.cd-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 2px 10px;
}

.cd-count {
    font-size: 15px;
    color: #6c757d;
}

.cd-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cd-sort label {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
}

.cd-sort select {
    width: auto;
    border-radius: 6px;
}

.cd-card {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 0;
}

/* --- table ---------------------------------------------------------------- */

.cd-table {
    margin-bottom: 0;
}

.cd-table thead th {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-top: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #495057;
    padding: 11px 16px;
    white-space: nowrap;
}

.cd-table tbody td {
    border-top: 1px solid #e9ecef;
    padding: 14px 16px;
    vertical-align: middle;
}

.cd-table tbody tr:first-child td {
    border-top: 0;
}

.cd-file-name {
    font-weight: 600;
    color: #2c3e50;
}

.cd-file-meta {
    font-size: 13px;
    color: #6c757d;
    margin-top: 2px;
}

.cd-file-meta i {
    margin-right: 3px;
}

.cd-dot {
    margin: 0 4px;
}

.cd-new-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #007bff;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cd-col-access { width: 210px; }
.cd-col-uploaded { width: 160px; white-space: nowrap; }
.cd-col-actions { width: 160px; text-align: right; }

.cd-uploaded-date {
    font-size: 14px;
    color: #2c3e50;
}

.cd-uploaded-by {
    font-size: 13px;
    color: #6c757d;
    margin-top: 2px;
}

/* --- "Members can" -------------------------------------------------------- */

.cd-access-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.cd-access-btn .cd-caret {
    font-size: 10px;
    opacity: 0.65;
}

.cd-access-hidden {
    background: #fff;
    border: 1px solid #ced4da;
    color: #495057;
}

.cd-access-read {
    background: #e7f1ff;
    border: 1px solid #b8daff;
    color: #0056b3;
}

.cd-access-save {
    background: #d4edda;
    border: 1px solid #b1dfbb;
    color: #1e7e34;
}

.cd-access-menu {
    padding: 6px;
    min-width: 290px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.cd-access-menu .dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 6px;
    white-space: normal;
}

.cd-access-menu .dropdown-item i {
    margin-top: 3px;
    width: 16px;
    color: #6c757d;
}

.cd-access-menu .dropdown-item strong {
    display: block;
    font-size: 14px;
    color: #2c3e50;
}

.cd-access-menu .dropdown-item small {
    display: block;
    font-size: 13px;
    color: #6c757d;
}

.cd-access-plain {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #6c757d;
    white-space: nowrap;
}

/* Members cannot see it whatever the flags say, because a folder above is private. */
.cd-blocked {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #721c24;
}

.cd-blocked i {
    color: #dc3545;
}

.cd-access-choice legend {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

.cd-access-choice .custom-radio {
    margin-bottom: 12px;
}

.cd-access-choice .custom-control-label strong {
    font-weight: 600;
}

.cd-access-choice .form-text {
    margin-top: 1px;
}

.cd-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.cd-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: #6c757d;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.cd-icon-btn:hover,
.cd-icon-btn:focus {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #2c3e50;
    text-decoration: none;
}

.cd-icon-btn.is-danger:hover,
.cd-icon-btn.is-danger:focus {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Taking a copy away is the one thing worth colouring on the member row. */
.cd-icon-btn.is-download {
    color: #1e7e34;
}

.cd-icon-btn.is-download:hover,
.cd-icon-btn.is-download:focus {
    background: #d4edda;
    border-color: #b1dfbb;
    color: #155724;
}

/* --- empty states --------------------------------------------------------- */

.cd-empty {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.cd-empty i {
    font-size: 56px;
    opacity: 0.25;
    margin-bottom: 18px;
}

.cd-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}

.cd-empty-rail {
    text-align: center;
    padding: 22px 16px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    color: #6c757d;
}

.cd-empty-rail i {
    font-size: 26px;
    opacity: 0.4;
    margin-bottom: 8px;
}

.cd-empty-rail p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
}

.cd-no-matches {
    text-align: center;
    padding: 50px 20px;
    color: #6c757d;
}

.cd-no-matches-title {
    font-size: 17px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}

/* --- folder tree in a narrow column --------------------------------------- */

.cd-sidebar .folder-navigation {
    margin-bottom: 0;
}

.cd-sidebar .folder-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    min-height: 42px;
}

.cd-sidebar .folder-btn:hover {
    transform: none;
    box-shadow: none;
}

.cd-sidebar .folder-tree-name {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-sidebar .folder-tree-count {
    font-size: 14px;
    color: #6c757d;
}

.cd-sidebar .folder-btn.active .folder-tree-count {
    color: #fff;
}

/* --- narrower screens ----------------------------------------------------- */

@media (max-width: 991px) {
    .cd-layout,
    .cd-layout-member {
        grid-template-columns: minmax(0, 1fr);
    }

    .cd-search input {
        width: 100%;
    }

    .cd-page-actions {
        width: 100%;
    }

    .cd-col-uploaded,
    .cd-table thead .cd-col-uploaded {
        display: none;
    }
}

/* Opening a folder swaps this panel rather than reloading, so it dims while the
   request is in flight instead of the browser showing its own loading state. */
#documentPanel {
    transition: opacity 120ms ease;
}

#documentPanel.cd-panel-loading {
    opacity: 0.55;
    pointer-events: none;
}


/* ============================================================================
   Member document list - two lines per document
   Name on the first line, clipped rather than wrapped; status, folder and date
   on the second; the two actions filling the height at the end.
   ========================================================================== */

.cd-doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cd-doc {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 14px;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
}

.cd-doc:last-child {
    border-bottom: 0;
}

.cd-doc:hover {
    background: #f8f9fa;
}

.cd-doc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    flex-shrink: 0;
    font-size: 18px;
    color: #6c757d;
}

.cd-doc-icon.pdf { color: #dc3545; }
.cd-doc-icon.image { color: #9b59b6; }
.cd-doc-icon.document { color: #3498db; }
.cd-doc-icon.spreadsheet { color: #28a745; }

/* min-width:0 is what lets the name actually clip inside a flex row. */
.cd-doc-name {
    flex-grow: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.3;
}

.cd-doc-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.cd-doc-name .cd-new-badge {
    flex-shrink: 0;
    margin-left: 0;
}

.cd-doc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cd-doc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    color: #6c757d;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.cd-doc-btn:hover,
.cd-doc-btn:focus {
    background: #e7f1ff;
    border-color: #b8daff;
    color: #0056b3;
    text-decoration: none;
}

.cd-doc-btn.is-download {
    color: #1e7e34;
}

.cd-doc-btn.is-download:hover,
.cd-doc-btn.is-download:focus {
    background: #d4edda;
    border-color: #b1dfbb;
    color: #155724;
}

@media (max-width: 575px) {
    .cd-doc {
        padding: 9px 11px;
        gap: 9px;
    }

    .cd-doc-icon {
        width: 26px;
        font-size: 16px;
    }

    .cd-doc-name {
        font-size: 14.5px;
    }

    .cd-doc-btn {
        width: 36px;
    }
}

/* Search and sort stay on one row: the sort keeps its natural size and the search takes
   whatever is left, rather than the search claiming 100% and pushing sort onto a second line.
   Scoped to the member header, which holds just these two - the admin header also carries
   Upload and New Folder, which do need to wrap. */
.cd-actions-filters {
    flex-wrap: nowrap;
    min-width: 0;
}

.cd-actions-filters .cd-sort {
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .cd-actions-filters {
        width: 100%;
    }

    /* Only here does the search flex. On a wide screen it keeps its fixed width: a flexible
       item whose input is width:100% has no intrinsic size to grow from, and collapses. */
    .cd-actions-filters .cd-search {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cd-actions-filters .cd-search input {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    /* The options already read "Newest first" and "Name A-Z", so the word "Sort" beside the
       select is the first thing that can go when the row gets tight. */
    .cd-actions-filters .cd-sort label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cd-actions-filters .cd-sort select {
        max-width: 140px;
    }
}

/* The date the row no longer carries. */
.cd-preview-meta {
    font-size: 13px;
    color: #6c757d;
}


/* Up/down controls on a folder row. Kept quiet until the row is hovered so the tree still reads
   as a list of folders rather than a row of buttons. */
.folder-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 2px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #adb5bd;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease;
}

.folder-tree-row:hover .folder-order-btn,
.folder-order-btn:focus {
    opacity: 1;
}

.folder-order-btn:hover {
    background: #e9ecef;
    color: #2c3e50;
}

.folder-btn.active .folder-order-btn {
    color: rgba(255, 255, 255, 0.75);
}

.folder-btn.active .folder-order-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}


/* Shown in the reader when the file is something no browser can display. */
.cd-no-preview {
    margin: 0;
    padding: 48px 24px;
    color: #6c757d;
    font-size: 15px;
}

/* ============================================================================
   Busy state
   Every action on these screens ends in the workspace being redrawn, so while
   one is in flight the page says so and refuses to start another.
   ========================================================================== */

.cd-busy-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2000;
    overflow: hidden;
    background: rgba(0, 123, 255, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

body.cd-busy .cd-busy-bar {
    opacity: 1;
}

/* Indeterminate sweep: the round trips are short and a real percentage would be made up. */
.cd-busy-bar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    background: #007bff;
    transform: translateX(-100%);
}

body.cd-busy .cd-busy-bar::before {
    animation: cd-busy-sweep 1.1s ease-in-out infinite;
}

@keyframes cd-busy-sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(340%); }
}

body.cd-busy {
    cursor: progress;
}

/* The two regions that start work. Modals stay usable so a hung request cannot trap someone
   behind a dialog they cannot dismiss - their action buttons disable themselves instead. */
body.cd-busy #documentLayout,
body.cd-busy .cd-page-actions {
    pointer-events: none;
}

body.cd-busy #documentLayout {
    opacity: 0.6;
}

/* Already dimmed by the swap itself; don't compound it. */
body.cd-busy #documentLayout.cd-panel-loading {
    opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
    .cd-busy-bar::before,
    body.cd-busy .cd-busy-bar::before {
        animation: none;
        transform: none;
        width: 100%;
    }

    #documentPanel,
    .cd-busy-bar {
        transition: none;
    }
}