/* ==========================================================================
   Dazos CRM Design System — modal standard (CRM-3935, foundation)
   Source: Design System "Modal Component Guidelines" (templates/modal/Modal.dc.html).

   Scope, on purpose:
   - `.dz-modal-std` is set by Vtiger_Helper_Js on every container it opens
     (.myModal, #popupModal, the confirm/alert containers). Rules on it are
     behaviour-level only: stacking, motion, focus ring.
   - `.dz-sheet` is the standard SHEET (header / body / footer tray). Only
     content built on it gets the shell look, so the ~350 legacy modal
     templates keep rendering as they do until each one is migrated.
   - Tokens are defined here, on the modal containers, not on :root, so this
     sheet cannot restyle anything outside a modal. Names follow the existing
     `--dz-*` family (listview-design.css, dark-mode-design.css).
   ========================================================================== */

.dz-modal-std {
  --dzm-surface: var(--dz-surface, #ffffff);
  --dzm-bg: var(--dz-bg, #f4f6f8);
  --dzm-border: var(--dz-border, #dde2e7);
  --dzm-text: var(--dz-text, #1f2a36);
  --dzm-text-2: var(--dz-text-2, #5a6a7a);
  --dzm-icon: var(--dz-text-2, #5a6a7a);
  --dzm-accent: #008ce0;
  --dzm-accent-hover: #006cb6;
  --dzm-accent-fg: #ffffff;
  --dzm-error: #d32f2f;
  --dzm-error-hover: #b71c1c;
  --dzm-error-border: #f8c5c1;
  --dzm-focus: var(--dz-focus, 0 0 0 3px #b3e5fc);
  --dzm-shadow-xl: 0 20px 25px rgba(31, 42, 54, .10), 0 8px 10px rgba(31, 42, 54, .04);
  --dzm-radius-lg: 12px;
  --dzm-radius-md: 8px;
  --dzm-scrim: rgba(31, 42, 54, .32);
}

.dark-mode .dz-modal-std {
  --dzm-surface: var(--dz-surface, #0f172a);
  --dzm-bg: var(--dz-bg, #0a1120);
  --dzm-border: var(--dz-border, #394451);
  --dzm-text: var(--dz-text, #e8edf2);
  --dzm-text-2: var(--dz-text-2, #aab4be);
  --dzm-icon: #c6d3db;
  --dzm-accent: #36b7fa;
  --dzm-accent-hover: #7ccefd;
  --dzm-accent-fg: #0a1120;
  --dzm-error: #f0635a;
  --dzm-error-hover: #f4837c;
  --dzm-error-border: #b71c1c;
  --dzm-focus: var(--dz-focus, 0 0 0 3px #0b476f);
  --dzm-shadow-xl: 0 20px 25px rgba(0, 0, 0, .45), 0 8px 10px rgba(0, 0, 0, .3);
  --dzm-scrim: rgba(0, 0, 0, .55);
}

/* ---- backdrop (S1): dims, never blurred, never brand-tinted -------------- */
.modal-backdrop.show { background: rgba(31, 42, 54, 1); opacity: .32; }
.dark-mode .modal-backdrop.show { background: #000; opacity: .55; }

/* A confirm or alert raised over an open modal gets no second backdrop; its
   own container carries a light scrim so two sheets never go near-black. */
.dz-modal-std.dz-modal--stacked { background: rgba(31, 42, 54, .16); }
.dark-mode .dz-modal-std.dz-modal--stacked { background: rgba(0, 0, 0, .28); }
.dz-modal-std.dz-modal--layer { z-index: 1060; }

/* ---- legacy templates: Bootstrap size classes land on the seven-step scale ---
   Every container the helper opens carries .dz-modal-std (and adoptStandardModal
   adds it to any other Bootstrap modal when it opens), so the ~350 existing
   templates are mapped here without editing each one. The default is M 640, per
   the design system; the size NAMES below (dz-modal--*) still win over these. */
.dz-modal-std .modal-dialog { max-width: 640px; width: 100%; margin: 32px auto; min-width: 0; } /* common.css gives .modal-xl min-width:90%, which beats every max-width step */
.dz-modal-std .modal-dialog.modal-sm { max-width: 400px; }
.dz-modal-std .modal-dialog.modal-lg { max-width: 880px; }
.dz-modal-std .modal-dialog.modal-xl { max-width: 1120px; }
/* related-module record lists (Vtiger/Popup.tpl and its siblings) keep their pre-standard width, 90% of the window,
   nested or not: their columns need the room (Akansha, 2026-10-06) */
@media (min-width: 720px) {
  .dz-modal-std .modal-dialog.modal-xl:has(#popupPageContainer) { max-width: 90%; }
}

/* ---- size scale (S2): seven steps, set through the size NAME only ---------- */
.dz-modal-std.dz-modal--xs .modal-dialog { max-width: 400px; }
.dz-modal-std.dz-modal--s  .modal-dialog { max-width: 480px; }
.dz-modal-std.dz-modal--m  .modal-dialog { max-width: 640px; }
.dz-modal-std.dz-modal--l  .modal-dialog { max-width: 880px; }
.dz-modal-std.dz-modal--xl .modal-dialog { max-width: 1120px; }
.dz-modal-std.dz-modal--full .modal-dialog { max-width: calc(100vw - 64px); }
.dz-modal-std[class*="dz-modal--"] .modal-dialog { width: 100%; margin: 32px auto; }
.dz-modal-std.dz-modal--full .modal-content { min-height: calc(100vh - 64px); }

/* ---- the sheet (S1, S3) ------------------------------------------------- */
/* Height cap: the design's 32px gap to the viewport on every side (calc(100vh - 64px)) instead of its 80vh,
   which left short windows with a small sheet (Akansha, 2026-09-30). */
.dz-sheet {
  display: flex; flex-direction: column; max-height: calc(100vh - 64px); overflow: hidden;
  background: var(--dzm-surface); color: var(--dzm-text);
  border: 1px solid var(--dzm-border); border-radius: var(--dzm-radius-lg);
  box-shadow: var(--dzm-shadow-xl);
  font-family: 'Open Sans', sans-serif; text-align: left;
}
.dz-modal__header {
  display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box;
  padding: 16px 20px; border-bottom: 1px solid transparent; flex: none;
}
.dz-sheet--divided .dz-modal__header,
.dz-sheet.is-scrolling .dz-modal__header { border-bottom-color: var(--dzm-border); }
.dz-modal__title {
  flex: 1; min-width: 0; margin: 0;
  font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--dzm-text);
}
.dz-modal__close {
  width: 32px; height: 32px; flex: none; padding: 0; border: 0; border-radius: var(--dzm-radius-md);
  background: transparent; color: var(--dzm-icon); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dz-modal__close:hover { background: var(--dzm-bg); color: var(--dzm-text); }
.dz-modal__close svg, .dz-modal__close i { width: 20px; height: 20px; }
.dz-modal__body {
  padding: 20px; display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; flex: 1 1 auto; min-height: 0;
  font-size: 14px; line-height: 1.6; color: var(--dzm-text-2);
}
.dz-modal__body > p { margin: 0; }
.dz-modal__message { color: var(--dzm-text); font-size: 15px; line-height: 1.55; word-wrap: break-word; }
.dz-modal__message--text { white-space: pre-line; }
.dz-modal__footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; flex: none;
  padding: 14px 20px; border-top: 1px solid transparent;
}
.dz-sheet--divided .dz-modal__footer,
.dz-sheet.is-scrolling .dz-modal__footer { border-top-color: var(--dzm-border); }

/* ---- the tray (S4): [reset][destructive] ...grow... [close][second][main] --- */
.dz-modal__tray-start, .dz-modal__tray-end { display: flex; align-items: center; gap: 12px; }
.dz-modal__tray-end { margin-left: auto; }
.dz-btn {
  font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .01em;
  min-height: 40px; padding: 8px 16px; box-sizing: border-box; line-height: 24px;
  border-radius: var(--dzm-radius-md); border: 1px solid transparent; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; cursor: pointer;
}
.dz-btn svg, .dz-btn i { width: 18px; height: 18px; flex: none; }
.dz-btn--contained { background: var(--dzm-accent); color: var(--dzm-accent-fg); }
.dz-btn--contained:hover { background: var(--dzm-accent-hover); color: var(--dzm-accent-fg); }
.dz-btn--outlined { color: var(--dzm-text); border-color: var(--dzm-border); font-weight: 600; }
.dz-btn--outlined:hover { background: var(--dzm-bg); }
.dz-btn--text { color: var(--dzm-accent); padding-left: 12px; padding-right: 12px; }
.dz-btn--text:hover { background: var(--dzm-bg); }
.dz-btn--danger.dz-btn--contained { background: var(--dzm-error); color: #fff; }
.dz-btn--danger.dz-btn--contained:hover { background: var(--dzm-error-hover); }
.dz-btn--danger.dz-btn--outlined { color: var(--dzm-error); }
.dz-btn[disabled] { opacity: .5; cursor: not-allowed; }
.dz-btn:focus-visible, .dz-modal__close:focus-visible { outline: none; box-shadow: var(--dzm-focus); }
.dz-sheet:focus { outline: none; }

/* ---- motion (S11): 150ms fade + 8px rise in, 100ms fade out -------------
   The layers built fresh per open (confirm, alert, picker) use Bootstrap's `fade`.
   The shared .myModal must NOT carry `fade`: Bootstrap 4 ignores show() while a
   hide transition is running, and showModal() hides the previous modal right before
   showing the next one — a fade there would silently drop modal-to-modal flows.
   So .myModal gets a CSS enter animation only (its hide stays instant). */
.dz-modal-std.fade { transition: opacity 100ms linear; }
.dz-modal-std.fade.show { transition-duration: 150ms; }
.dz-modal-std.fade .modal-dialog { transition: transform 150ms ease-out; transform: translate(0, 8px); }
.dz-modal-std.fade.show .modal-dialog { transform: none; }
.dz-modal-std:not(.fade).show { animation: dzModalFade 150ms linear; }
.dz-modal-std:not(.fade).show .modal-dialog { animation: dzModalRise 150ms ease-out; }
@keyframes dzModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dzModalRise { from { transform: translate(0, 8px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dz-modal-std.fade .modal-dialog, .dz-modal-std.fade.show .modal-dialog { transition: none; transform: none; }
  .dz-modal-std:not(.fade).show .modal-dialog { animation: none; }
}

/* ---- nested picker (sec 07): narrower than the parent, 56px below its top ---- */
.dz-modal-std.dz-modal-picker .modal-dialog { margin-top: 88px; }

/* ==========================================================================
   Legacy templates on the standard shell (CRM-3935, bulk migration, step 1).
   The Bootstrap parts the existing templates render (.modal-content, -header,
   .modal-title, .close, -body, -footer) are styled to the design-system sheet
   whenever they sit inside a .dz-modal-std container. Footer buttons are mapped
   by the classes they already carry, and the tray order is set with flex
   `order`, so no template's structure changes and nothing that finds a button
   by position breaks. Templates whose footer breaks the rules (two filled
   buttons, Yes/No labels, ...) are fixed one by one in step 4.
   The tray rules match `.modal-overlay-footer` as well as `.modal-footer`: the
   Export, Import, Reports-export and Workflows-task dialogs build their tray with
   that class, and outside a .dz-modal-std container (the page-level edit views)
   it is left alone.
   ========================================================================== */
.dz-modal-std .modal-content {
  /* overflow stays visible (Bootstrap's own default): a menu opened from the footer, e.g. "Send Statement"
     on Patient Balance, must be able to drop outside the sheet. The body scrolls by itself (flex, min-height 0). */
  display: flex; flex-direction: column; max-height: calc(100vh - 64px); overflow: visible;
  background: var(--dzm-surface); color: var(--dzm-text);
  border: 1px solid var(--dzm-border); border-radius: var(--dzm-radius-lg); box-shadow: var(--dzm-shadow-xl);
}
.dz-modal-std .modal-header {
  display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; flex: none;
  padding: 16px 20px; border-bottom: 1px solid var(--dzm-border); border-radius: 0; background: transparent;
}
.dz-modal-std .modal-header .modal-title,
.dz-modal-std .modal-header h1, .dz-modal-std .modal-header h2, .dz-modal-std .modal-header h3,
.dz-modal-std .modal-header h4, .dz-modal-std .modal-header h5, .dz-modal-std .modal-header h6 {
  flex: 1; min-width: 0; margin: 0; padding: 0;
  font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--dzm-text);
}
.dz-modal-std .modal-header .close {
  order: 99; margin: 0 0 0 auto; padding: 0; width: 32px; height: 32px; flex: none; float: none;
  border: 0; border-radius: var(--dzm-radius-md); background: transparent; color: var(--dzm-icon);
  opacity: 1; text-shadow: none; font-size: 24px; line-height: 1; font-weight: 400;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.dz-modal-std .modal-header .close:hover,
.dz-modal-std .modal-header .close:focus { background: var(--dzm-bg); color: var(--dzm-text); opacity: 1; outline: none; }
.dz-modal-std .modal-header .close:focus-visible { box-shadow: var(--dzm-focus); }
.dz-modal-std .modal-header .close svg { width: 20px; height: 20px; }
.dz-modal-std .modal-body {
  padding: 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; color: var(--dzm-text);
  max-height: none;   /* common.css caps every .modal-body at 80vh on its own; inside the sheet the height cap belongs to .modal-content */
}
/* 116 templates wrap header/body/footer in a <form>, 9 in a <div>, directly under .modal-content.
   Pass the column layout down through those wrappers so the body scrolls and the footer stays in view.
   Direct children only, and never a .modal: some templates (Vtiger/EditViewDependency.tpl, EditView.tpl) keep
   hidden Bootstrap modals inside the sheet, and a descendant match turned their display:none into flex. */
.dz-modal-std .modal-content > form,
.dz-modal-std .modal-content > :not(.modal):not(.modal-body):has(.modal-body) {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
/* One level further for the forms that wrap header/body/footer in a plain <div> (Vtiger/MassEditForm.tpl,
   Calendar/MassEditForm.tpl) or an .overlayBody (Vtiger/MergeRecords.tpl, whose form sits under a bare
   .fc-overlay-modal rather than a .modal-content), and for a form that sits inside a wrapper <div>
   (Import/ImportBasicStep.tpl: .importview-content > form > .modal-body): without it the body cannot
   shrink, so it never scrolls and the tray lands below the sheet. */
.dz-modal-std .modal-content > .fc-overlay-modal:not(.modal-content) > form,
.dz-modal-std .modal-content > form > :not(.modal):not(.modal-body):has(> .modal-body),
.dz-modal-std .modal-content > div:not(.modal):not(.modal-body):has(.modal-body) > :not(.modal):not(.modal-body):has(> .modal-body),
.dz-modal-std .modal-content > .fc-overlay-modal:not(.modal-content) > form > :not(.modal):not(.modal-body):has(> .modal-body) {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
.dz-modal-std .modal-content .modal-body { display: block; }
.dz-modal-std .modal-content .modal-header, .dz-modal-std .modal-content :is(.modal-footer, .modal-overlay-footer) { flex: none; }
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: flex-end; flex: none;
  padding: 14px 20px; border-top: 1px solid var(--dzm-border); border-radius: 0; background: transparent;
}
/* Bootstrap utility tints some templates still carry on the shell (bg-primary, bg-light, text-white, ...)
   use !important; the sheet's surface and text win inside the standard. */
.dz-modal-std .modal-header[class*="bg-"], .dz-modal-std :is(.modal-footer, .modal-overlay-footer)[class*="bg-"],
.dz-modal-std .modal-content[class*="bg-"] { background: transparent !important; }
.dz-modal-std .modal-header.text-white, .dz-modal-std .modal-header.text-white .modal-title,
.dz-modal-std .modal-header[class*="bg-"] .modal-title { color: var(--dzm-text) !important; }
.dz-modal-std .modal-header[class*="bg-"] .close, .dz-modal-std .modal-header.text-white .close { color: var(--dzm-icon) !important; }
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) > * { margin: 0; }
/* Footers that wrap their buttons in <center>, a .btn-group or a .cancelLinkContainer: let the buttons join the
   tray directly so the slot order (text, outlined, contained) applies to them, not to the wrapper. */
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) > center,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) > .btn-group,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) > .cancelLinkContainer { display: contents; }
/* .modal-overlay-footer trays wrap their buttons in .row > .col-* > div (Vtiger/Export.tpl, Import/*.tpl,
   Reports/ReportSettingExport.tpl, Settings/Workflows/EditTask.tpl): same treatment, so the buttons are
   tray items and the centred column no longer decides their place. */
.dz-modal-std .modal-overlay-footer > .row,
.dz-modal-std .modal-overlay-footer > .row > [class*="col-"],
.dz-modal-std .modal-overlay-footer > .row > [class*="col-"] > div:not(.hide) { display: contents; }

/* the tray: [destructive] ...grow... [text] [outlined] [contained] */
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn {
  font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .01em;
  min-height: 40px; height: auto; padding: 8px 16px; line-height: 24px; box-sizing: border-box; order: 1;
  border: 1px solid transparent; border-radius: var(--dzm-radius-md); background: transparent; color: var(--dzm-text);
  box-shadow: none; text-shadow: none; text-transform: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn strong { font-weight: inherit; }
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn:focus { outline: none; }
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn:focus-visible { box-shadow: var(--dzm-focus); }
/* Every colour in the tray rules below is !important on purpose: Vtiger/ThemeStyle.tpl sets the
   white-label button colours (.btn-success, .btn-danger, .btn-secondary, ...) with !important. With both
   sides !important the more specific selector wins, so this applies inside modal footers only. */
/* Close / Cancel: text */
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-default, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-secondary,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-link, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .cancelLink,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn[data-dismiss="modal"] {
  order: 2; background: transparent !important; border-color: transparent !important; color: var(--dzm-accent) !important; padding-left: 12px; padding-right: 12px;
}
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-default:hover, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-secondary:hover,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-link:hover, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .cancelLink:hover,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn[data-dismiss="modal"]:hover { background: var(--dzm-bg) !important; color: var(--dzm-accent) !important; text-decoration: none; }
/* Second: outlined */
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-info, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-warning,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-outline-primary, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-outline-info,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-outline-secondary {
  order: 3; background: transparent !important; border-color: var(--dzm-border) !important; color: var(--dzm-text) !important; font-weight: 600;
}
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-info:hover, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-warning:hover,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-outline-primary:hover, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-outline-info:hover,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-outline-secondary:hover { background: var(--dzm-bg) !important; color: var(--dzm-text) !important; }
/* Main: the one contained button */
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-success, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-primary {
  order: 4; background: var(--dzm-accent) !important; border-color: var(--dzm-accent) !important; color: var(--dzm-accent-fg) !important;
}
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-success:hover, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-primary:hover,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-success:focus, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-primary:focus {
  background: var(--dzm-accent-hover) !important; border-color: var(--dzm-accent-hover) !important; color: var(--dzm-accent-fg) !important;
}
/* In an XS / S confirm sheet the destructive action IS the Main slot (sec 05): contained red, right end */
.dz-modal-std .modal-dialog.modal-sm :is(.modal-footer, .modal-overlay-footer) .btn-danger:not(.cancelLink):not([data-dismiss="modal"]),
.dz-modal-std.dz-modal--xs :is(.modal-footer, .modal-overlay-footer) .btn-danger:not(.cancelLink):not([data-dismiss="modal"]),
.dz-modal-std.dz-modal--s :is(.modal-footer, .modal-overlay-footer) .btn-danger:not(.cancelLink):not([data-dismiss="modal"]) {
  order: 4; margin-right: 0; background: var(--dzm-error) !important; border-color: var(--dzm-error) !important; color: #fff !important; font-weight: 700;
}
.dz-modal-std .modal-dialog.modal-sm :is(.modal-footer, .modal-overlay-footer) .btn-danger:not(.cancelLink):not([data-dismiss="modal"]):hover,
.dz-modal-std.dz-modal--xs :is(.modal-footer, .modal-overlay-footer) .btn-danger:not(.cancelLink):not([data-dismiss="modal"]):hover,
.dz-modal-std.dz-modal--s :is(.modal-footer, .modal-overlay-footer) .btn-danger:not(.cancelLink):not([data-dismiss="modal"]):hover {
  background: var(--dzm-error-hover) !important; border-color: var(--dzm-error-hover) !important; color: #fff !important;
}
/* Destructive: outlined red, left edge */
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-danger:not(.cancelLink):not([data-dismiss="modal"]),
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-outline-danger {
  order: 0; margin-right: auto; background: transparent !important; border-color: var(--dzm-error-border) !important; color: var(--dzm-error) !important; font-weight: 600;
}
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-danger:not(.cancelLink):not([data-dismiss="modal"]):hover,
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-outline-danger:hover { background: var(--dzm-bg) !important; color: var(--dzm-error-hover) !important; }
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn[disabled], .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn.disabled { opacity: .5; cursor: not-allowed; }
/* An affirmative button that only closes (Done, OK on a read-only sheet) is still the Main slot, contained. */
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-success[data-dismiss="modal"], .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-primary[data-dismiss="modal"] {
  order: 4; background: var(--dzm-accent) !important; border-color: var(--dzm-accent) !important; color: var(--dzm-accent-fg) !important; padding-left: 16px; padding-right: 16px;
}
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-success[data-dismiss="modal"]:hover, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-primary[data-dismiss="modal"]:hover {
  background: var(--dzm-accent-hover) !important; border-color: var(--dzm-accent-hover) !important; color: var(--dzm-accent-fg) !important;
}
/* The tray's Clear / Reset slot (S4): text, left edge */
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn.dz-slot-reset { order: 0; margin-right: auto; }
.dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn svg { width: 18px; height: 18px; flex: none; }
.dz-modal-std .modal-header .dz-badge { flex: none; gap: 4px; height: 24px; }
.dz-modal-std .modal-header .dz-badge svg { width: 14px; height: 14px; }

/* ---- mobile (< 720px): full-screen, radius 0, no backdrop, stacked tray ---
   Kept AFTER the legacy-template rules above: they use selectors of the same weight, so declared earlier
   these overrides lost and phones got the desktop 100vh - 64px cap, 12px corners and 40px buttons. */
@media (max-width: 719.98px) {
  .dz-modal-std .modal-dialog { max-width: none; width: 100%; height: 100%; margin: 0; }
  .dz-modal-std .dz-sheet, .dz-modal-std .modal-content { max-height: none; height: 100%; border-radius: 0; border: 0; }
  .dz-modal__close, .dz-modal-std .modal-header .close { width: 44px; height: 44px; }
  .dz-modal__footer, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) { flex-direction: column-reverse; align-items: stretch; padding: 16px; }
  .dz-modal__tray-start, .dz-modal__tray-end { flex-direction: column-reverse; align-items: stretch; margin-left: 0; }
  .dz-btn, .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn { min-height: 48px; font-size: 16px; width: 100%; }
  .dz-modal-std :is(.modal-footer, .modal-overlay-footer) .btn-danger:not(.cancelLink):not([data-dismiss="modal"]) { margin-right: 0; }
}

/* ---- signature modal (sec 06) ------------------------------------------------
   One tab row for the capture methods, the canvas, the consent line above the tray
   (in the footer, so it is never behind a scroll), Clear at the left edge, and Sign
   disabled with its reason beside it. Signed state: badge, read-only preview, stamp. */
.dz-sign__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.dz-sign__tab {
  height: 40px; padding: 0 16px; border: 0; border-radius: var(--dzm-radius-md); background: transparent;
  font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 600; line-height: 1; color: var(--dzm-accent); cursor: pointer;
}
.dz-sign__tab:hover { background: var(--dzm-bg); }
.dz-sign__tab.is-active { background: var(--dzm-accent); color: var(--dzm-accent-fg); font-weight: 700; }
.dz-sign__tab:focus-visible { outline: none; box-shadow: var(--dzm-focus); }
.dz-sign__canvas {
  display: block; width: 100%; height: 220px; box-sizing: border-box;
  border: 1px solid var(--dzm-border); border-radius: var(--dzm-radius-md); background: var(--dzm-surface); touch-action: none;
}
.dz-sign__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--dzm-text); }
.dz-sign .modal-body input.dz-sign__pin { width: 100%; max-width: 240px; }
.dz-modal-std .modal-footer .dz-sign__consent { flex: 1 1 100%; order: -1; margin: 0 0 4px; font-size: 12px; line-height: 1.55; color: var(--dzm-text-2); }
.dz-modal-std .modal-footer .dz-sign__consent strong { color: var(--dzm-text); }
.dz-modal-std .modal-footer .dz-sign__hint { order: 3; font-size: 12px; line-height: 1.4; color: var(--dzm-text-2); }
.dz-sign__preview {
  display: flex; align-items: center; justify-content: center; min-height: 120px; max-height: 300px; overflow: auto; padding: 12px;
  border: 1px solid var(--dzm-border); border-radius: var(--dzm-radius-md); background: var(--dzm-bg);
}
.dz-sign__preview svg, .dz-sign__preview img { max-width: 100%; height: auto; }
.dz-sign__stamp {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--dzm-border); border-radius: var(--dzm-radius-md); background: var(--dzm-bg);
}
.dz-sign__stamp > svg { flex: none; width: 20px; height: 20px; color: var(--dz-txn-success, #3cb371); }
.dz-sign__stamp-meta { min-width: 0; font-size: 11.5px; line-height: 1.45; color: var(--dzm-text-2); }
.dz-sign__stamp-meta b { display: block; font-size: 13px; font-weight: 600; color: var(--dzm-text); }
@media (max-width: 719.98px) {
  .dz-sign__canvas { height: 240px; } /* sec 06 rule 7: at least 200dp of canvas on touch */
  .dz-modal-std .modal-footer .dz-sign__hint { text-align: center; }
}

/* ---- two-column forms (sec 03): allowed from L 880 up ------------------------
   A legacy horizontal form (.form-group.row > label.control-label + div.col-*) wrapped
   in .dz-form-grid lays out two fields per line, in source order, label above its
   control. Textareas and multi-selects take the whole line (sec 03 C); one column
   again under 720px (sec 03 B). The dialog that uses it carries modal-lg (L 880). */
.dz-modal-std .dz-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.dz-modal-std .dz-form-grid > .form-group { display: block; margin: 0; min-width: 0; }
.dz-modal-std .dz-form-grid > .form-group > .control-label,
.dz-modal-std .dz-form-grid > .form-group [class*="col-"] {
  display: block; float: none; flex: none; width: 100%; max-width: 100%; padding: 0; text-align: left;
}
.dz-modal-std .dz-form-grid > .form-group > .control-label {
  margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--dzm-text);
}
.dz-modal-std .dz-form-grid > .form-group:has(textarea),
.dz-modal-std .dz-form-grid > .form-group:has(select[multiple]),
.dz-modal-std .dz-form-grid > .form-group.dz-form-grid__wide { grid-column: 1 / -1; }
.dz-modal-std .dz-form-grid .form-control { float: none; width: 100%; }
.dz-modal-std .dz-form-grid .select2-container { width: 100% !important; }
@media (max-width: 719.98px) {
  .dz-modal-std .dz-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- quick create, Family A fields whose control is not one box -----------------
   The floating label (transactions-design.css, .dz-fa) rests inside a 48px input. A rich-text editor, a
   toggle, a radio / checkbox set, a slider or a file upload has no such box, so the label sat on top of
   the control. Those fields get a plain label above the control instead. */
.dz-quick-create .dz-fa.dz-fa:not(.dz-fa-multi):has(.cke, .bootstrap-switch, .toggleSwichField, .dz-choice-set, .filesUploadContainer, .fileUploadContainer, input[type="radio"], input[type="range"], input[type="file"]) > :is(.fieldLabel, .dz-field-label) {
  position: static; transform: none; display: block; max-width: none; margin: 0 0 6px; padding: 0;
  overflow: visible; white-space: normal; background: transparent; pointer-events: auto; transition: none;
  font-size: 13px; font-weight: 600; color: var(--dz-text, #1f2a36);
}
.dark-mode .dz-quick-create .dz-fa.dz-fa:not(.dz-fa-multi):has(.cke, .bootstrap-switch, .toggleSwichField, .dz-choice-set, .filesUploadContainer, .fileUploadContainer, input[type="radio"], input[type="range"], input[type="file"]) > :is(.fieldLabel, .dz-field-label) {
  color: var(--dz-text, #e8edf2);
}
/* First Name with its salutation (uitype 55, Salutation.tpl): the salutation select and the name input share
   one row instead of the select stretching full width and the input wrapping underneath. The input keeps its
   inline width:56% !important, so it widens through flex-grow, not width. */
.dz-quick-create .dz-fa:has(select[name="salutationtype"]) > .fieldValue { display: flex; align-items: stretch; gap: 8px; }
.dz-quick-create .dz-fa.dz-fa:has(select[name="salutationtype"]) > .fieldValue > .select2-container { flex: 0 0 104px; width: 104px !important; min-width: 0; float: none; }
.dz-quick-create .dz-fa:has(select[name="salutationtype"]) > .fieldValue > input[type="text"] { flex: 1 1 auto; min-width: 0; float: none; }
/* a checkbox row is as tall as the other fields, so the last one is not left squashed against the edge */
.dz-quick-create .dz-fa-check { min-height: 48px; }
/* the mandatory star stays red: Family A labels make every child inherit the (grey / accent) label colour */
.dz-quick-create .dz-fa.dz-fa > :is(.fieldLabel, .dz-field-label) .dz-req,
.dz-quick-create :is(.fieldLabel, .dz-field-label) .redColor.dz-req { color: var(--dz-txn-danger, #d32f2f); margin-left: 2px; }