/*--------------------------------
  Background / Profile Image popup (#update-banner-modal)

  Desk's top-bar "Add profile picture" item and the camera badges on the member
  header both open this modal. Out of the box it is a full-height sheet
  (height: calc(100% - 100px) in profile.css) holding two raw ACF image fields,
  so it looks like a stray form rather than a Desk surface.

  Scoped to this one modal via body.author + #update-banner-modal; the other
  profile modals keep their existing look.

  Live DOM this targets (ACF Pro), note the trailing hidden validation field:
    .inner > .close + .content
      .modal-header                    (added in inc/modals.php)
      <form.acf-form#update-banner-photos
        .acf-fields > .acf-field.acf-field-image  x2   (profile, background)
        .acf-field.acf-field-text[data-name=_validate_email]   display:none
        .acf-form-submit > input[type=submit]

  member-functions.js mirrors each uploader's value onto .hm-has-image and adds
  the .hm-image-control Delete button, because ACF's own remove link is
  hover-only and vanishes as soon as the value is cleared. Adding an image is
  left to ACF's "Add Image" button.
--------------------------------*/

/* --- Backdrop: fills the iframe, never its own scroll container --- */
body.author .modal-box#update-banner-modal {
  /* Both backdrops are position:fixed with z-index:auto, so painting falls back
     to document order — and Account Settings prints after this popup, which put
     it on top. Lift this one above it. */
  z-index: 100001;
  overflow-y: auto;
  padding-top: 6vh !important;
  padding-bottom: 6vh !important;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: rgba(15, 17, 26, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* --- Card: shrink-wraps its content instead of filling the viewport --- */
body.author .modal-box#update-banner-modal .inner {
  display: flex;
  flex-direction: column;
  width: 32rem;
  max-width: 100%;
  height: auto !important;
  max-height: 100%;
  margin: 0 auto;
  padding: 0 !important;
  border-radius: 18px;
  border: 1px solid var(--d2-glass-border, rgba(0, 0, 0, 0.08));
  background-color: var(--d2-glass-bg, #ffffff);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.28),
    0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  font-family: inherit;
  color: var(--d2-topbar-text, #212529);
}

/* The profile page renders outside Desk, so the Desk tokens are usually absent
   and every var() above falls back to the light palette. Tell the popup which
   theme it is in: Desk forwards its theme on the bridge, and the page's own
   .admin-bar / body classes cover anyone viewing TheHive directly. */
body.author .modal-box#update-banner-modal[data-desk-theme="dark"],
body.admin-bar.author .modal-box#update-banner-modal,
body.dark-mode.author .modal-box#update-banner-modal {
  color: #e9ecef;
}

body.author .modal-box#update-banner-modal[data-desk-theme="dark"] .inner,
body.admin-bar.author .modal-box#update-banner-modal .inner,
body.dark-mode.author .modal-box#update-banner-modal .inner {
  background-color: #1c1d27;
  border-color: rgba(255, 255, 255, 0.1);
}

body.author .modal-box#update-banner-modal[data-desk-theme="dark"] .modal-header h2,
body.admin-bar.author #update-banner-modal .modal-header h2,
body.dark-mode.author #update-banner-modal .modal-header h2 {
  color: #f1f3f5 !important;
}

body.author .modal-box#update-banner-modal[data-desk-theme="dark"] .content,
body.admin-bar.author .modal-box#update-banner-modal .content,
body.dark-mode.author .modal-box#update-banner-modal .content {
  color: #e9ecef;
}

body.author .modal-box#update-banner-modal[data-desk-theme="dark"] .close,
body.admin-bar.author .modal-box#update-banner-modal .close,
body.dark-mode.author .modal-box#update-banner-modal .close {
  color: #e9ecef !important;
}

body.author .modal-box#update-banner-modal[data-desk-theme="dark"] .acf-fields > .acf-field,
body.admin-bar.author .modal-box#update-banner-modal .acf-fields > .acf-field,
body.dark-mode.author .modal-box#update-banner-modal .acf-fields > .acf-field {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.author .modal-box#update-banner-modal[data-desk-theme="dark"] .acf-image-uploader .hide-if-value p,
body.admin-bar.author .modal-box#update-banner-modal .acf-image-uploader .hide-if-value p,
body.dark-mode.author .modal-box#update-banner-modal .acf-image-uploader .hide-if-value p {
  color: #ced4da;
}

body.author .modal-box#update-banner-modal[data-desk-theme="dark"] .acf-form-submit,
body.admin-bar.author .modal-box#update-banner-modal .acf-form-submit,
body.dark-mode.author .modal-box#update-banner-modal .acf-form-submit {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* --- Close: circular, inside the card corner --- */
body.author .modal-box#update-banner-modal .inner .close {
  right: 0.75rem;
  top: 0.75rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 50%;
  background: transparent !important;
  color: var(--d2-topbar-text, #212529) !important;
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.55;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

body.author .modal-box#update-banner-modal .inner .close:hover {
  opacity: 1;
  background-color: var(--d2-sidebar-item-hover-bg, rgba(0, 0, 0, 0.05)) !important;
}

/* Profile.css sizes .content with an absolute height; drop that so the card
   hugs its content. Keep it as the only scroll area for tall content. */
body.author .modal-box#update-banner-modal .inner .content {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 12vh);
  padding: 1.5rem 1.5rem 1.25rem !important;
  overflow-y: auto;
  overflow-x: hidden;
}

/* --- Header --- */
/* The theme's compiled bundle carries Bootstrap's .modal-header, which is
   display:flex + justify-content:space-between. That put the <h2> and the
   description side by side and squashed them; stack them instead. */
body.author #update-banner-modal .modal-header {
  display: block !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 2.25rem 0 0 !important;
  margin: 0 0 1.25rem 0 !important;
  border-bottom: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

body.author #update-banner-modal .modal-header h2 {
  display: block;
  width: auto;
  margin: 0 0 0.35rem 0 !important;
  font-size: var(--d2-text-xl, 1.25rem);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow-wrap: break-word;
  color: var(--d2-topbar-text, #212529);
}

body.author #update-banner-modal .modal-header p {
  display: block;
  max-width: 34rem;
  margin: 0 !important;
  font-size: var(--d2-text-sm, 0.85rem);
  line-height: 1.5;
  opacity: 0.65;
}

/* --- Fields: two stacked cards --- */
body.author #update-banner-modal .acf-fields {
  border: 0 !important;
  background: transparent !important;
}

body.author #update-banner-modal .acf-fields > .acf-field {
  border: 1px solid var(--d2-glass-border, rgba(0, 0, 0, 0.1)) !important;
  border-top: 1px solid var(--d2-glass-border, rgba(0, 0, 0, 0.1)) !important;
  border-radius: 14px;
  padding: 0.9rem 1rem !important;
  margin: 0 0 0.75rem 0 !important;
  background-color: var(--d2-sidebar-item-hover-bg, rgba(0, 0, 0, 0.02));
}

/* ACF appends a hidden _validate_email text field inside the same list. It is
   display:none inline, but the card styling above would still paint a box, so
   make the exclusion explicit. */
body.author #update-banner-modal .acf-fields > .acf-field[data-name="_validate_email"] {
  display: none !important;
}

body.author #update-banner-modal .acf-field > .acf-label {
  margin-bottom: 0.55rem;
}

body.author #update-banner-modal .acf-field > .acf-label label {
  font-size: var(--d2-text-xs, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d2-accent, #6366f1);
}

/* --- Empty state: "No image selected [Add Image]" --- */
body.author #update-banner-modal .acf-image-uploader .hide-if-value p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: var(--d2-text-sm, 0.85rem);
  color: var(--d2-topbar-text, #6c757d);
  opacity: 0.75;
  white-space: nowrap;
}

body.author #update-banner-modal .acf-image-uploader .hide-if-value a.acf-button,
body.author #update-banner-modal .acf-image-uploader .hide-if-value a.acf-button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--d2-accent, #6366f1) !important;
  border-radius: 999px;
  background: transparent !important;
  background-image: none !important;
  color: var(--d2-accent, #6366f1) !important;
  font-size: var(--d2-text-sm, 0.8rem);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body.author #update-banner-modal .acf-image-uploader .hide-if-value a.acf-button:hover,
body.author #update-banner-modal .acf-image-uploader .hide-if-value a.acf-button:focus {
  background: var(--d2-accent, #6366f1) !important;
  color: #ffffff !important;
}

/* --- State: has an image / has none ---
   member-functions.js mirrors each uploader's hidden input onto .hm-has-image.
   ACF's own .has-value / .max-width classes and inline max-width are not used
   here: they depend on ACF's field JS having initialised and on hover, which
   left the preview hidden and the Delete control unreachable. */
body.author #update-banner-modal .acf-image-uploader .show-if-value.image-wrap {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: none !important;
}

body.author #update-banner-modal .acf-image-uploader:not(.hm-has-image) .show-if-value {
  display: none !important;
}

body.author #update-banner-modal .acf-image-uploader.hm-has-image .show-if-value {
  display: flex !important;
}

body.author #update-banner-modal .acf-image-uploader .show-if-value img {
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  max-width: 4.25rem;
  max-height: 4.25rem !important;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--d2-glass-border, rgba(0, 0, 0, 0.1));
  background-color: rgba(0, 0, 0, 0.04);
}

/* The banner is wide by nature, so show it as a wide preview. */
body.author #update-banner-modal .acf-field-600ab427d7287 .show-if-value img {
  width: 9rem;
  max-width: 9rem;
  height: 3.4rem;
  max-height: 3.4rem !important;
  border-radius: 8px;
}

body.author #update-banner-modal .acf-image-uploader .hide-if-value {
  display: block !important;
}

body.author #update-banner-modal .acf-image-uploader.hm-has-image .hide-if-value {
  display: none !important;
}

/* ACF's own hover-only Edit/Remove links: the Delete button below replaces
   them, and ACF does not load the icon font on the front end. */
body.author #update-banner-modal .acf-image-uploader .acf-actions {
  display: none !important;
}

/* --- Delete (always visible while an image is set) --- */
body.author #update-banner-modal .acf-image-uploader .hm-image-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

body.author #update-banner-modal .acf-image-uploader .hm-image-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(180, 35, 24, 0.35);
  background: transparent;
  color: #b42318;
  font-size: var(--d2-text-sm, 0.8rem);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

body.author #update-banner-modal .acf-image-uploader .hm-image-control button.hm-image-delete:hover,
body.author #update-banner-modal .acf-image-uploader .hm-image-control button.hm-image-delete:focus {
  color: #912018;
  border-color: #b42318;
  background-color: rgba(180, 35, 24, 0.06);
}

/* With no image there is nothing to delete, and ACF's "Add Image" button is
   showing instead, so drop the whole row (and its top margin). */
body.author #update-banner-modal .acf-image-uploader:not(.hm-has-image) .hm-image-control {
  display: none;
}


/* --- Footer --- */
body.author #update-banner-modal .acf-form-submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--d2-glass-border, rgba(0, 0, 0, 0.08));
  text-align: right;
}

body.author #update-banner-modal .acf-form-submit input[type="submit"],
body.author #update-banner-modal .acf-form-submit .acf-button {
  margin: 0 !important;
  padding: 0.55rem 1.5rem;
  border: none !important;
  border-radius: 999px;
  background: var(--d2-accent, #6366f1) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: var(--d2-text-sm, 0.85rem);
  font-weight: 600;
  line-height: 1.4;
  text-shadow: none;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

body.author #update-banner-modal .acf-form-submit input[type="submit"]:hover {
  background: var(--d2-accent-alt, #4f46e5) !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45);
}

/* --- Loading overlay --- */
body.author .modal-box#update-banner-modal .inner .panel-loading {
  border-radius: 18px;
}

/* --- Dark mode: Desk forwards its theme over the bridge (data-desk-theme),
   and direct visits to TheHive use the page's own classes. See the block
   above the header for the shared declarations. --- */
body.author .modal-box#update-banner-modal[data-desk-theme="dark"] .inner .panel-loading,
body.admin-bar.author .modal-box#update-banner-modal .inner .panel-loading {
  background-color: rgba(28, 29, 39, 0.6);
}

/* --- Mobile: full-sheet is fine here, but keep the card chrome --- */
@media only screen and (max-width: 640px) {
  body.author .modal-box#update-banner-modal {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }

  body.author .modal-box#update-banner-modal .inner {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
    border: none;
  }

  body.author .modal-box#update-banner-modal .inner .content {
    max-height: none;
    padding: 1.25rem 1.1rem !important;
  }
}