/* v2.2.0-beta.38 - File tree upload/new-folder controls vertical stack
   Target: Server File Tree / DNS Settings file manager action strip.
   Purpose: keep the file actions from running horizontally across the card. */

:root {
  --bc-file-action-stack-width: min(100%, 22rem);
}

/* Runtime JS adds this class to the toolbar/card that contains Choose File, Upload, and New Folder controls. */
.bc-vertical-file-actions,
.bc-vertical-file-actions form,
.bc-vertical-file-actions .form-inline,
.bc-vertical-file-actions .input-group,
.bc-vertical-file-actions .btn-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.55rem !important;
  flex-wrap: nowrap !important;
  width: var(--bc-file-action-stack-width) !important;
  max-width: 100% !important;
}

.bc-vertical-file-actions input,
.bc-vertical-file-actions select,
.bc-vertical-file-actions textarea,
.bc-vertical-file-actions button,
.bc-vertical-file-actions .btn,
.bc-vertical-file-actions label,
.bc-vertical-file-actions .form-control,
.bc-vertical-file-actions input[type="file"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.bc-vertical-file-actions input[type="file"]::file-selector-button {
  margin-right: 0.5rem !important;
}

/* Common likely containers from the file tree/server editor page. */
#server-file-tree .file-actions,
#server-file-tree .upload-actions,
#server-file-tree .file-upload-actions,
#server-file-tree .server-file-actions,
#server-file-tree .file-manager-actions,
.server-file-tree .file-actions,
.server-file-tree .upload-actions,
.server-file-tree .file-upload-actions,
.server-file-tree .server-file-actions,
.server-file-tree .file-manager-actions,
.file-tree .file-actions,
.file-tree .upload-actions,
.file-tree .file-upload-actions,
.file-tree .server-file-actions,
.file-tree .file-manager-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.55rem !important;
  width: var(--bc-file-action-stack-width) !important;
  max-width: 100% !important;
}

#server-file-tree .file-actions > *,
#server-file-tree .upload-actions > *,
#server-file-tree .file-upload-actions > *,
#server-file-tree .server-file-actions > *,
#server-file-tree .file-manager-actions > *,
.server-file-tree .file-actions > *,
.server-file-tree .upload-actions > *,
.server-file-tree .file-upload-actions > *,
.server-file-tree .server-file-actions > *,
.server-file-tree .file-manager-actions > *,
.file-tree .file-actions > *,
.file-tree .upload-actions > *,
.file-tree .file-upload-actions > *,
.file-tree .server-file-actions > *,
.file-tree .file-manager-actions > * {
  width: 100% !important;
  max-width: 100% !important;
}

/* When the file tree page uses Bootstrap rows for the action strip, stack only the row containing a file input. */
.bc-file-tree-action-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.55rem !important;
  width: var(--bc-file-action-stack-width) !important;
  max-width: 100% !important;
}

.bc-file-tree-action-row > *,
.bc-file-tree-action-row input,
.bc-file-tree-action-row button,
.bc-file-tree-action-row .btn,
.bc-file-tree-action-row .form-control {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 900px) {
  :root { --bc-file-action-stack-width: 100%; }
}