/* Activity submission forms: use more of the screen than the site-wide 360px modal body */
#activity-action-modal .modal-body,
.activity-action-modal .modal-body {
    max-height: max(360px, min(60vh, 640px));
}

[class*="field-approval-file"] + br {
    display: none;
}

/* Wrappers of hidden inputs (activity id, answer ids) only add empty space */
#activity-action-modal .form-group:not(:has(input:not([type="hidden"]), textarea, select)),
.activity-action-modal .form-group:not(:has(input:not([type="hidden"]), textarea, select)) {
    display: none;
}

/* Photo picker as a square tile, before and after a photo is chosen, with the Select Photo button the same width */
.file-input:has(input[id^="approval-file-"]) {
    max-width: 200px;
}

.file-input:has(input[id^="approval-file-"]) .file-drop-zone {
    min-height: 0;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-input:has(input[id^="approval-file-"]) .file-drop-zone-title {
    padding: 10px;
    font-size: 13px;
}

.file-input:has(input[id^="approval-file-"]) .file-drop-zone:has(> .file-drop-zone-title) .file-preview-thumbnails {
    display: none;
}

.file-input:has(input[id^="approval-file-"]) .file-drop-zone-title::before {
    content: "\f030";
    font-family: FontAwesome;
    display: block;
    font-size: 32px;
    margin-bottom: 8px;
}

.file-input:has(input[id^="approval-file-"]) .file-preview-thumbnails {
    width: 100%;
    height: 100%;
}

.file-input:has(input[id^="approval-file-"]) .file-preview-frame {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 4px;
    float: none;
    border: 0;
    box-shadow: none;
}

.file-input:has(input[id^="approval-file-"]) .file-preview-frame .kv-file-content {
    width: 100%;
    height: 100%;
}

.file-input:has(input[id^="approval-file-"]) .file-preview-frame .kv-file-content img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.file-input:has(input[id^="approval-file-"]) .file-thumbnail-footer {
    display: none;
}

/* Rotate buttons over the top-right corner of the submission photo preview */
.file-preview-frame .kv-file-content {
    position: relative;
}

.photo-rotate-controls {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 6px;
}

.photo-rotate-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 16px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
}

.photo-rotate-button:hover,
.photo-rotate-button:focus {
    background: rgba(0, 0, 0, 0.8);
}

.photo-rotate-button:disabled {
    opacity: 0.5;
    cursor: wait;
}