/* =====================================================================
   documents-dialogs.css  —  global styles for the Documents-page dialogs.

   Import ONCE globally (MudDialog renders in a portal, so .razor.css can't
   reach it). Every dialog sets  Class="doc-dlg"  on its <MudDialog>.

   SIZING is done by MudBlazor (DialogOptions: MaxWidth.ExtraSmall +
   FullWidth=true) — not by CSS — so it works regardless of theme/version.
   The Document-Type field is a SELF-CONTAINED custom dropdown (.doc-dlg-cselect)
   built inside the dialog, so it never renders behind the dialog like a
   MudSelect popover can.

   Colours use MudBlazor palette variables so they follow the active theme.
   ===================================================================== */

/* ---- the paper / surface ---- */
/* overflow:visible so the custom Document-Type menu can extend past the edge;
   header/footer corners are rounded separately to keep the rounded silhouette. */
.mud-dialog.doc-dlg {
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 28px 70px rgba(20, 24, 40, .32);
}
.doc-dlg .mud-dialog-title   { border-radius: 16px 16px 0 0; }
.doc-dlg .mud-dialog-actions { border-radius: 0 0 16px 16px; }

/* ---- header bar ---- */
.doc-dlg .mud-dialog-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  margin: 0;
  border-bottom: 1px solid var(--mud-palette-lines-default, #eef0f3);
}
.doc-dlg .doc-dlg-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--mud-palette-text-primary, #232427);
  line-height: 1.2;
}
.doc-dlg .doc-dlg-x {
  width: 32px;
  height: 32px;
  flex: none;
  border: none;
  border-radius: 8px;
  background: var(--mud-palette-background-grey, #f4f5f8);
  color: var(--mud-palette-text-secondary, #5b6472);
  cursor: pointer;
  font-size: 18px;
  display: grid;
  place-items: center;
  transition: .15s;
}
.doc-dlg .doc-dlg-x:hover { background: #e9ebf0; color: var(--mud-palette-primary, #2563eb); }

/* ---- body ---- */
.doc-dlg .mud-dialog-content {
  padding: 22px 24px;
  overflow: visible;
}
.doc-dlg .doc-dlg-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mud-palette-text-primary, #232427);
  margin-bottom: 9px;
}
.doc-dlg .doc-dlg-label + .doc-dlg-label { margin-top: 20px; }
.doc-dlg .doc-dlg-confirm {
  font-size: 14px;
  color: var(--mud-palette-text-secondary, #4d5663);
  line-height: 1.55;
}

/* ---- text field (folder name) ---- */
.doc-dlg .doc-dlg-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--mud-palette-lines-inputs, #eef0f3);
  border-radius: 10px;
  background: var(--mud-palette-background-grey, #f7f8fb);
  transition: .15s;
}
.doc-dlg .doc-dlg-field:focus-within {
  border-color: var(--mud-palette-primary, #2563eb);
  background: var(--mud-palette-surface, #fff);
  box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb, 37, 99, 235), .12);
}
.doc-dlg .doc-dlg-field > i { flex: none; font-size: 18px; color: var(--mud-palette-text-secondary, #8c9097); }
.doc-dlg .doc-dlg-field input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--mud-palette-text-primary, #232427);
}

/* ---- custom Document-Type dropdown (self-contained; never renders behind the dialog) ---- */
.doc-dlg .doc-dlg-cselect { position: relative; }
.doc-dlg .doc-dlg-cselect-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 46px;
  padding: 0 12px 0 14px; border: 1px solid var(--mud-palette-lines-inputs, #eef0f3);
  border-radius: 10px; background: var(--mud-palette-background-grey, #f7f8fb);
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--mud-palette-text-primary, #232427); cursor: pointer; text-transform: none;
}
.doc-dlg .doc-dlg-cselect-btn > span { flex: 1; text-align: left; }
.doc-dlg .doc-dlg-cselect-btn > span.ph { color: var(--mud-palette-text-secondary, #8c9097); font-weight: 400; }
.doc-dlg .doc-dlg-cselect-btn > i { font-size: 20px; color: var(--mud-palette-text-secondary, #8c9097); transition: transform .18s; }
.doc-dlg .doc-dlg-cselect.open .doc-dlg-cselect-btn {
  border-color: var(--mud-palette-primary, #2563eb); background: var(--mud-palette-surface, #fff);
  box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb, 37, 99, 235), .12);
}
.doc-dlg .doc-dlg-cselect.open .doc-dlg-cselect-btn > i { transform: rotate(180deg); }
/* full-screen click-catcher so clicking outside closes the menu */
.doc-dlg .doc-dlg-cselect-bg { position: fixed; inset: 0; z-index: 40; }
.doc-dlg .doc-dlg-cselect-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--mud-palette-surface, #fff); border: 1px solid var(--mud-palette-lines-default, #eef0f3);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(20, 24, 40, .18); padding: 6px;
}
.doc-dlg .doc-dlg-cselect-opt {
  display: flex; align-items: center; padding: 11px 12px; border-radius: 8px;
  font-size: 14px; color: var(--mud-palette-text-secondary, #3a4150); cursor: pointer;
}
.doc-dlg .doc-dlg-cselect-opt:hover {
  background: rgba(var(--mud-palette-primary-rgb, 37, 99, 235), .08); color: var(--mud-palette-primary, #2563eb);
}
.doc-dlg .doc-dlg-cselect-opt.sel { color: var(--mud-palette-primary, #2563eb); font-weight: 600; }

/* ---- upload: dropzone button ---- */
.doc-dlg .doc-dlg-dropzone.mud-button-root {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 48px;
  border: none; border-radius: 10px; background: var(--mud-palette-primary, #2563eb);
  color: var(--mud-palette-primary-text, #fff); font-size: 14px; font-weight: 600; text-transform: none;
  cursor: pointer; box-shadow: 0 4px 12px rgba(var(--mud-palette-primary-rgb, 37, 99, 235), .26); transition: .15s;
}
.doc-dlg .doc-dlg-dropzone.mud-button-root:hover { filter: brightness(1.05); }
.doc-dlg .doc-dlg-dropzone .mud-icon-root,
.doc-dlg .doc-dlg-dropzone i { font-size: 18px; }

/* hide MudFileUpload's built-in file chip so the name shows once (only our chip) */
.doc-dlg .mud-file-upload .mud-chipset,
.doc-dlg .mud-file-upload .mud-chip { display: none !important; }

/* ---- upload: our selected-file chip + size ---- */
.doc-dlg .doc-dlg-filechip {
  display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 6px 0 14px;
  margin-top: 12px; border-radius: 20px; background: rgba(var(--mud-palette-primary-rgb, 37, 99, 235), .12);
  color: var(--mud-palette-primary, #2563eb); font-size: 13px; font-weight: 600;
}
.doc-dlg .doc-dlg-filechip .rm {
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(var(--mud-palette-primary-rgb, 37, 99, 235), .18); color: var(--mud-palette-primary, #2563eb);
  cursor: pointer; display: grid; place-items: center; font-size: 13px;
}
.doc-dlg .doc-dlg-filechip .rm:hover { background: var(--mud-palette-primary, #2563eb); color: #fff; }
.doc-dlg .doc-dlg-filesize { font-size: 12.5px; color: var(--mud-palette-text-secondary, #8c9097); margin: 12px 0; }

/* ---- footer bar ---- */
.doc-dlg .mud-dialog-actions {
  padding: 16px 24px; margin: 0; gap: 10px;
  border-top: 1px solid var(--mud-palette-lines-default, #eef0f3);
  background: var(--mud-palette-background-grey, #fbfcfe);
}

/* ---- footer "Verwijderen" = text-style danger ---- */
.doc-dlg .doc-dlg-delete.mud-button-root { background: transparent; box-shadow: none; padding: 6px 14px; font-weight: 600; text-transform: none; }
.doc-dlg .doc-dlg-delete.mud-button-root:hover { background: rgba(239, 68, 68, .08); }