/*
 * modals.css — HD Design System look for every ZK modal / popup window
 * --------------------------------------------------------------------------
 * The legacy ZK theme gave dialogs a green win-header.png bar, mint bodies and
 * a faint backdrop. This restyles them to the HD Modal component:
 *   invoker-core .../molecules/Modal/Modal.tsx + ModalContent
 *   - dark dimmed scrim, white dialog, 1px grayBlue20 border, rounded corners,
 *     soft shadow; clean header with a real title + subtle round close button.
 *
 * Loaded globally via <theme-uri> in WEB-INF/zk.xml. Colours from tokens.css.
 * ZK 10 modal DOM: .z-modal-mask (scrim), .z-window(.z-window-modal/-shadow/
 * -noborder), .z-window-header(-move), .z-window-icons, .z-window-icon,
 * .z-window-close, .z-window-content.
 */

/* ---- dimmed backdrop (HD scrim: blackBlue100 @ ~60%) ---- */
.z-modal-mask{
  background-color:rgba(40,46,56,.6) !important;
  background-image:none !important;
}

/* ---- dialog shell ---- */
.z-window,
.z-window-modal,
.z-window-shadow{
  background:var(--hd-surface) !important;
  background-image:none !important;
  border:1px solid var(--hd-border) !important;
  border-radius:12px !important;
  box-shadow:0 18px 48px -12px rgba(40,46,56,.40), 0 4px 12px -6px rgba(40,46,56,.25) !important;
  overflow:hidden;
}

/* ---- header: real title bar ---- */
.z-window-header{
  background:var(--hd-surface) !important;
  background-image:none !important;
  color:var(--hd-text) !important;
  font-size:17px !important;
  font-weight:700 !important;
  font-family:var(--hd-font) !important;
  padding:15px 20px !important;
  border:none !important;
  border-bottom:1px solid var(--hd-line) !important;
}

/* ---- close (and other header icon) buttons -> subtle round button ---- */
.z-window-icons{ top:9px !important; right:12px !important; }
.z-window-icon,
.z-window-close{
  color:var(--hd-text-muted) !important;
  border-radius:8px !important;
  width:28px !important; height:28px !important;
  line-height:28px !important; text-align:center;
  opacity:.8;
  transition:background .12s ease, color .12s ease, opacity .12s ease;
}
.z-window-icon:hover,
.z-window-close:hover{
  background:var(--hd-bg) !important;
  color:var(--hd-text) !important;
  opacity:1;
}

/* ---- body ---- */
.z-window-content{
  background:var(--hd-surface) !important;
  background-image:none !important;
  padding:18px 20px !important;
}

/* messagebox keeps the same shell; just give its text room */
.z-messagebox-window .z-window-content{ padding:20px 22px !important; }