/* Documentenmap popup of the groepenscherm: laid over the group form like Opmerkingen, so the
   group stays where it was while the documents are moved. The dialog sticks to the top of the
   scrolled modal, because the Map button that opens it sits in the footer, far down the form. */
.organisation-documents-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.35);
    padding: 15px;
}

.organisation-documents-dialog {
    position: sticky;
    top: 15px;
    max-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.organisation-documents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #e5e5e5;
}

.organisation-documents-body {
    display: flex;
    gap: 15px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 15px;
}

.organisation-documents-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.organisation-documents-dropbox {
    flex: 3 1 0;
}

.organisation-documents-server {
    flex: 2 1 0;
}

.organisation-documents-pane-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}

.organisation-documents-select-all {
    font-weight: normal;
    margin: 0;
}

.organisation-documents-breadcrumb {
    margin-bottom: 8px;
    padding: 6px 10px;
}

/* Each pane scrolls on its own; the dialog itself keeps its height. */
.organisation-documents-list {
    flex: 1 1 auto;
    min-height: 160px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.organisation-documents-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-bottom: 1px solid #f0f0f0;
}

.organisation-documents-row:last-child {
    border-bottom: 0;
}

.organisation-documents-row.is-folder {
    cursor: pointer;
}

.organisation-documents-row.is-folder:hover {
    background: #f5f5f5;
}

.organisation-documents-row input[type="checkbox"] {
    margin: 0;
}

.organisation-documents-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organisation-documents-size,
.organisation-documents-date {
    flex: 0 0 auto;
    color: #777;
    font-size: 0.9em;
    white-space: nowrap;
}

.organisation-documents-notice {
    margin: 5px 0 0;
    min-height: 1.5em;
}

.organisation-documents-footer {
    padding: 10px 15px;
    border-top: 1px solid #e5e5e5;
}

.organisation-documents-conflict {
    margin-bottom: 10px;
}

.organisation-documents-conflict-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.organisation-documents-progress {
    margin-bottom: 8px;
}

.organisation-documents-progress .progress {
    margin-bottom: 5px;
}

/* The log grows with every file; it scrolls rather than pushing the buttons off screen. */
.organisation-documents-log {
    max-height: 110px;
    overflow-y: auto;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.organisation-documents-log .is-error {
    color: #a94442;
}

.organisation-documents-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

/* Checks popup of the groepenscherm (card "Checks in Groep pop-up"): the same overlay, header and
   footer as de Documentenmap, but a small dialog with nothing more than the list of controls. */
.organisation-checks-dialog {
    max-width: 420px;
    margin: 0 auto;
}

.organisation-checks-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 15px;
}

.organisation-checks-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.organisation-checks-item + .organisation-checks-item {
    margin-top: 6px;
}

/* The row carries a title that says what was found or why it is not judged, so the pointer has
   to show there is something to read. */
.organisation-checks-item label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-weight: normal;
    cursor: help;
}

/* A missing document stays red, also after the warning has been confirmed: confirming only says
   that it has been seen, the document is still not there (card). */
.organisation-checks-item.is-missing label,
.organisation-checks-item.is-missing input {
    color: #a94442;
    accent-color: #a94442;
}