/* ==========================================================================
   Dialogs
   --------------------------------------------------------------------------
   Every dialog in the app outside the counter: adding a unit, a brand, a tax
   rate, a customer group, taking a payment, editing a product's variations.
   They are all Bootstrap modals, so styling the shell reaches all of them.
   The counter has its own pass in pos-redesign.css; this is the same design
   for everywhere else, which is why it is scoped away from body.pos-rd.

   Nothing here changes behaviour: data-dismiss, data-href, every form and
   every handler keep their own markup and hooks.
   ========================================================================== */

body:not(.pos-rd) .modal {
  --rm-surface:    #FFFFFF;
  --rm-surface-2:  #F5F7FB;
  --rm-line:       #E4EAF2;
  --rm-line-soft:  #EDF1F7;
  --rm-text:       #101828;
  --rm-text-2:     #5A6779;
  --rm-text-3:     #8A94A6;
  --rm-brand:      var(--theme-700, #004EEB);
  --rm-brand-wash: color-mix(in srgb, var(--theme-700, #004EEB) 9%, #FFFFFF);
  --rm-danger:     #D92D20;
  --rm-success:    #12B76A;
  --rm-warning:    #F79009;
  --rm-radius:     14px;
  --rm-radius-sm:  10px;
  --rm-ease:       cubic-bezier(.4, 0, .2, 1);
  /* Figures in a readable sans with even-width digits. This was IBM Plex Mono,
     which only the POS loaded; everywhere else it fell back to Courier New. */
  --rm-mono: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body:not(.pos-rd) .modal-backdrop.in { opacity: .55; background: #0B1220; }

/* ==========================================================================
   1. The shell
   ========================================================================== */

body:not(.pos-rd) .modal-dialog { margin: 36px auto; }

body:not(.pos-rd) .modal-content {
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius);
  background: var(--rm-surface);
  box-shadow: 0 32px 64px -24px rgba(11, 18, 32, .5);
}
body:not(.pos-rd) .modal.in .modal-dialog { animation: rm-in .26s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rm-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 992px) {
  body:not(.pos-rd) .modal-lg { width: 940px; }
}

/* ==========================================================================
   2. Header
   ========================================================================== */

body:not(.pos-rd) .modal-header {
  position: relative;
  padding: 18px 56px 14px 22px;
  border-bottom: 1px solid var(--rm-line-soft);
}
body:not(.pos-rd) .modal-header .modal-title,
body:not(.pos-rd) .modal-header h4 {
  margin: 0;
  color: var(--rm-text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
}

/* The close control is a target, not a stray character. */
body:not(.pos-rd) .modal-header .close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--rm-text-3);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  transition: background .16s var(--rm-ease), color .16s var(--rm-ease), border-color .16s var(--rm-ease);
}
body:not(.pos-rd) .modal-header .close:hover {
  border-color: color-mix(in srgb, var(--rm-danger) 35%, transparent);
  background: color-mix(in srgb, var(--rm-danger) 9%, #FFFFFF);
  color: var(--rm-danger);
  opacity: 1;
}

/* ==========================================================================
   3. Body, and the fields in it
   --------------------------------------------------------------------------
   These forms are laid out on Bootstrap's float grid in widths chosen row by
   row, so nothing lines up from one row to the next. The columns keep their
   markup; they are laid on a grid instead, so every field in a dialog starts
   on one of two lines.

   Bootstrap clears .row with ::before and ::after, and a grid container makes
   a grid item out of each of them, which would push every field one cell
   along. They go.
   ========================================================================== */

body:not(.pos-rd) .modal-body { padding: 18px 22px; font-size: 13.5px; color: var(--rm-text); }

body:not(.pos-rd) .modal-body .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin: 0;
}
body:not(.pos-rd) .modal-body .row::before,
body:not(.pos-rd) .modal-body .row::after { display: none; }
body:not(.pos-rd) .modal-body .row > [class*="col-"] {
  width: auto !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body:not(.pos-rd) .modal-body .row > .col-md-12,
body:not(.pos-rd) .modal-body .row > .col-sm-12,
body:not(.pos-rd) .modal-body .row > .col-xs-12,
body:not(.pos-rd) .modal-body .row > .col-md-8,
body:not(.pos-rd) .modal-body .row > .col-md-9,
body:not(.pos-rd) .modal-body .row > .col-md-10 { grid-column: 1 / -1; }
body:not(.pos-rd) .modal-body .row > .clearfix { grid-column: 1 / -1; height: 0; margin: 0; padding: 0; }
/* A row nested inside a column governs its own fields. */
body:not(.pos-rd) .modal-body .row .row { grid-column: 1 / -1; }

/* A group of fields wrapped in a plain div — a set of options, say — spans
   the dialog and lays its own children out, rather than being squeezed into
   one cell with its columns floating inside it. */
body:not(.pos-rd) .modal-body .row > div:not([class*="col-"]):not(.clearfix) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
body:not(.pos-rd) .modal-body .row > div:not([class*="col-"]):not(.clearfix) > [class*="col-"] {
  width: auto !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body:not(.pos-rd) .modal .form-group { margin-bottom: 14px; }

body:not(.pos-rd) .modal label,
body:not(.pos-rd) .modal .control-label {
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rm-text-2);
  font-size: 12.5px;
  font-weight: 600;
}

body:not(.pos-rd) .modal .form-control {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-sm);
  background: var(--rm-surface);
  box-shadow: none;
  color: var(--rm-text);
  font-size: 13.5px;
  transition: border-color .16s var(--rm-ease), box-shadow .16s var(--rm-ease);
}
body:not(.pos-rd) .modal textarea.form-control { height: auto; padding: 10px 12px; }
body:not(.pos-rd) .modal .form-control:hover { border-color: color-mix(in srgb, var(--rm-brand) 40%, var(--rm-line)); }
body:not(.pos-rd) .modal .form-control:focus {
  border-color: var(--rm-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-brand) 14%, transparent);
  outline: none;
}
body:not(.pos-rd) .modal .form-control::placeholder { color: var(--rm-text-3); }
body:not(.pos-rd) .modal .form-control[readonly],
body:not(.pos-rd) .modal .form-control[disabled] { background: var(--rm-surface-2); color: var(--rm-text-2); }

body:not(.pos-rd) .modal select.form-control {
  padding-right: 34px;
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--rm-caret);
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px 15px;
}
body:not(.pos-rd) .modal { --rm-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

body:not(.pos-rd) .modal .help-block { margin: 6px 0 0; color: var(--rm-text-3); font-size: 11.5px; }
body:not(.pos-rd) .modal label.error,
body:not(.pos-rd) .modal .help-block.text-danger { color: var(--rm-danger) !important; font-weight: 500; }
body:not(.pos-rd) .modal .form-control.error { border-color: var(--rm-danger); }

/* An input with a prefix or a suffix reads as one control. */
body:not(.pos-rd) .modal .input-group-addon {
  width: 42px;
  min-width: 42px;
  padding: 0;
  text-align: center;
  border: 1px solid var(--rm-line);
  border-radius: 0;
  background: var(--rm-surface-2);
  color: var(--rm-text-2);
  font-family: var(--rm-mono);
  font-size: 12.5px;
}
body:not(.pos-rd) .modal .input-group-addon:first-child { border-right: 0; border-radius: var(--rm-radius-sm) 0 0 var(--rm-radius-sm); }
body:not(.pos-rd) .modal .input-group-addon:last-child { border-left: 0; border-radius: 0 var(--rm-radius-sm) var(--rm-radius-sm) 0; }
body:not(.pos-rd) .modal .input-group .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body:not(.pos-rd) .modal .input-group .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body:not(.pos-rd) .modal .input-group-btn > .btn { height: 40px; border-radius: 0 var(--rm-radius-sm) var(--rm-radius-sm) 0; }
body:not(.pos-rd) .modal .input-group-addon i { font-size: 13px; color: var(--rm-text-3); }

/* A picker inside a group has to match the plain controls it sits beside. */
body:not(.pos-rd) .modal .input-group .select2-container--default .select2-selection--single {
  height: 40px !important;
  border-radius: 0 var(--rm-radius-sm) var(--rm-radius-sm) 0 !important;
  border-left: 0 !important;
}
body:not(.pos-rd) .modal .input-group .select2-container { width: auto !important; flex: 1 1 auto; }
body:not(.pos-rd) .modal .input-group { display: flex; align-items: stretch; width: 100%; }
body:not(.pos-rd) .modal .input-group > .form-control,
body:not(.pos-rd) .modal .input-group > .select2-container { width: 1% !important; flex: 1 1 auto; }
body:not(.pos-rd) .modal .input-group-addon,
body:not(.pos-rd) .modal .input-group-btn { display: flex; align-items: center; justify-content: center; flex: none; }

/* Select2, matched to the plain controls beside it. */
body:not(.pos-rd) .modal .select2-container { width: 100% !important; }
body:not(.pos-rd) .modal .select2-container--default .select2-selection--single {
  height: 40px !important;
  border: 1px solid var(--rm-line) !important;
  border-radius: var(--rm-radius-sm) !important;
  background: var(--rm-surface) !important;
}
body:not(.pos-rd) .modal .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--rm-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-brand) 14%, transparent);
}
body:not(.pos-rd) .modal .select2-container--default .select2-selection__rendered {
  padding-left: 12px !important;
  color: var(--rm-text) !important;
  font-size: 13.5px;
  line-height: 38px !important;
}
body:not(.pos-rd) .modal .select2-container--default .select2-selection__arrow { height: 38px !important; right: 8px !important; }
body:not(.pos-rd) .modal .select2-container--default .select2-selection__arrow b {
  width: 15px !important;
  height: 15px !important;
  margin: -7px 0 0 -7px !important;
  border: 0 !important;
  background: var(--rm-caret) center / 15px 15px no-repeat;
}
body:not(.pos-rd) .modal .select2-container--default .select2-selection--multiple {
  min-height: 40px;
  border: 1px solid var(--rm-line) !important;
  border-radius: var(--rm-radius-sm) !important;
}
body:not(.pos-rd) .modal .select2-container--default .select2-selection__choice {
  margin: 5px 4px 0 0;
  padding: 2px 9px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--rm-brand-wash) !important;
  color: var(--rm-brand);
  font-size: 12px;
  font-weight: 600;
}

/* Checkboxes, given the shape iCheck is about to give them, so the swap when
   it runs is not something you see. */
body:not(.pos-rd) .modal .checkbox,
body:not(.pos-rd) .modal .radio { margin: 0 0 10px; }
body:not(.pos-rd) .modal .checkbox label,
body:not(.pos-rd) .modal .radio label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--rm-text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
body:not(.pos-rd) .modal input[type="checkbox"].input-icheck,
body:not(.pos-rd) .modal input[type="radio"].input-icheck {
  width: 19px;
  height: 19px;
  margin: 0;
  flex: none;
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid var(--rm-line);
  border-radius: 6px;
  background: var(--rm-surface) no-repeat center / 11px 11px;
}
body:not(.pos-rd) .modal input[type="radio"].input-icheck { border-radius: 999px; }
body:not(.pos-rd) .modal input[type="checkbox"].input-icheck:checked,
body:not(.pos-rd) .modal input[type="radio"].input-icheck:checked { border-color: var(--rm-brand); background-color: var(--rm-brand); }
body:not(.pos-rd) .modal input[type="checkbox"].input-icheck:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5 9-11'/%3E%3C/svg%3E");
}
body:not(.pos-rd) .modal input[type="radio"].input-icheck:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='white'/%3E%3C/svg%3E");
}
body:not(.pos-rd) .modal [class*="icheckbox_"],
body:not(.pos-rd) .modal [class*="iradio_"] {
  width: 19px !important;
  height: 19px !important;
  flex: none;
  border: 1.5px solid var(--rm-line);
  border-radius: 6px;
  background: var(--rm-surface) !important;
  background-image: none !important;
}
body:not(.pos-rd) .modal [class*="iradio_"] { border-radius: 999px; }
body:not(.pos-rd) .modal [class*="icheckbox_"].checked,
body:not(.pos-rd) .modal [class*="iradio_"].checked { border-color: var(--rm-brand); background: var(--rm-brand) !important; }
body:not(.pos-rd) .modal [class*="icheckbox_"].checked::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
body:not(.pos-rd) .modal [class*="iradio_"].checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 4.5px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
}

/* ==========================================================================
   A set of options
   --------------------------------------------------------------------------
   Picking an invoice format, and anything else offered as .option-div cards.
   They were flat grey slabs with the chosen one marked by a red tick; they
   are cards now, and the chosen one is marked in the business colour.
   ========================================================================== */

body:not(.pos-rd) .modal .option-div {
  position: relative;
  height: 100%;
  padding: 14px 16px !important;
  border: 1px solid var(--rm-line) !important;
  border-radius: var(--rm-radius-sm);
  background: var(--rm-surface) !important;
  color: var(--rm-text) !important;
  transition: border-color .16s var(--rm-ease), background .16s var(--rm-ease), transform .16s var(--rm-ease), box-shadow .16s var(--rm-ease);
}
body:not(.pos-rd) .modal .option-div-group .option-div:hover {
  border-color: var(--rm-brand) !important;
  background: var(--rm-brand-wash) !important;
  transform: translateY(-1px);
}
body:not(.pos-rd) .modal .option-div h4 {
  margin: 0;
  color: inherit;
  font-family: var(--rm-mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
body:not(.pos-rd) .modal .option-div-group .active {
  border-color: var(--rm-brand) !important;
  background: var(--rm-brand-wash) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-brand) 12%, transparent);
}
body:not(.pos-rd) .modal .option-div-group .active h4 { color: var(--rm-brand) !important; }
body:not(.pos-rd) .modal .option-div-group .icon { color: var(--rm-brand) !important; }
body:not(.pos-rd) .modal .option-div-group .form-group { height: 100%; margin-bottom: 14px; }

/* The little blue "i" beside a label. */
body:not(.pos-rd) .modal .fa-info-circle,
body:not(.pos-rd) .modal .hover-q {
  color: var(--rm-text-3) !important;
  font-size: 12px;
  transition: color .15s var(--rm-ease);
}
body:not(.pos-rd) .modal .fa-info-circle:hover,
body:not(.pos-rd) .modal .hover-q:hover { color: var(--rm-brand) !important; }

/* ==========================================================================
   A block of facts
   --------------------------------------------------------------------------
   Bootstrap's .well, which these dialogs use to show who is being paid and
   what they owe. It was a grey slab of running text; it is a card, with the
   labels quiet and the figures reading as figures.
   ========================================================================== */

body:not(.pos-rd) .modal .well {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-sm);
  background: var(--rm-surface-2);
  box-shadow: none;
  color: var(--rm-text);
  font-size: 12.5px;
  line-height: 2;
}
body:not(.pos-rd) .modal .well strong {
  color: var(--rm-text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body:not(.pos-rd) .modal .well .display_currency {
  color: var(--rm-text);
  font-family: var(--rm-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body:not(.pos-rd) .modal .well br:last-child { display: none; }

/* ==========================================================================
   Attaching a file
   --------------------------------------------------------------------------
   The browser's own file control is a button and a line of grey text. This
   gives it the same frame as the fields around it, and marks it as somewhere
   a file goes.
   ========================================================================== */

body:not(.pos-rd) .modal input[type="file"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px dashed var(--rm-line);
  border-radius: var(--rm-radius-sm);
  background: var(--rm-surface-2);
  color: var(--rm-text-2);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .16s var(--rm-ease), background .16s var(--rm-ease);
}
body:not(.pos-rd) .modal input[type="file"]:hover {
  border-color: var(--rm-brand);
  background: var(--rm-brand-wash);
}
body:not(.pos-rd) .modal input[type="file"]::file-selector-button {
  height: 30px;
  margin: 0 12px 0 0;
  padding: 0 12px;
  border: 1px solid var(--rm-line);
  border-radius: 8px;
  background: var(--rm-surface);
  color: var(--rm-text-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s var(--rm-ease), background .16s var(--rm-ease), color .16s var(--rm-ease);
}
body:not(.pos-rd) .modal input[type="file"]::file-selector-button:hover {
  border-color: var(--rm-brand);
  background: var(--rm-brand-wash);
  color: var(--rm-brand);
}

/* A heading inside a dialog's body, leading with a mark. */
body:not(.pos-rd) .modal-body h4:not(.modal-title),
body:not(.pos-rd) .modal-body h5 {
  margin: 18px 0 10px;
  color: var(--rm-text);
  font-size: 14px;
  font-weight: 600;
}
body:not(.pos-rd) .modal-body > h4:first-child,
body:not(.pos-rd) .modal-body > h5:first-child { margin-top: 0; }
body:not(.pos-rd) .modal-body hr { margin: 16px 0; border-top: 1px solid var(--rm-line-soft); }

/* ==========================================================================
   4. Buttons
   --------------------------------------------------------------------------
   Bootstrap's and daisyUI's classes both turn up in these dialogs, often on
   the same row. One shape for all of them; colour only where the action has
   a meaning.
   ========================================================================== */

body:not(.pos-rd) .modal .btn,
body:not(.pos-rd) .modal .tw-dw-btn {
  height: 40px;
  min-height: 40px;
  padding: 0 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--rm-line) !important;
  border-radius: var(--rm-radius-sm) !important;
  background: var(--rm-surface) !important;
  box-shadow: none !important;
  color: var(--rm-text-2) !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  transition: transform .16s var(--rm-ease), border-color .16s var(--rm-ease), background .16s var(--rm-ease), color .16s var(--rm-ease), filter .16s var(--rm-ease);
}
body:not(.pos-rd) .modal .btn:hover,
body:not(.pos-rd) .modal .tw-dw-btn:hover {
  border-color: var(--rm-brand) !important;
  background: var(--rm-brand-wash) !important;
  color: var(--rm-brand) !important;
  transform: translateY(-1px);
}
body:not(.pos-rd) .modal .btn:active,
body:not(.pos-rd) .modal .tw-dw-btn:active { transform: translateY(0); }

body:not(.pos-rd) .modal .btn-primary,
body:not(.pos-rd) .modal .tw-dw-btn-primary,
body:not(.pos-rd) .modal [type="submit"].btn,
body:not(.pos-rd) .modal [type="submit"].tw-dw-btn {
  border-color: transparent !important;
  background: var(--rm-brand) !important;
  box-shadow: 0 10px 24px -12px var(--rm-brand) !important;
  color: #fff !important;
}
body:not(.pos-rd) .modal .btn-primary:hover,
body:not(.pos-rd) .modal .tw-dw-btn-primary:hover,
body:not(.pos-rd) .modal [type="submit"].btn:hover,
body:not(.pos-rd) .modal [type="submit"].tw-dw-btn:hover {
  background: var(--rm-brand) !important;
  color: #fff !important;
  filter: brightness(1.1);
}

body:not(.pos-rd) .modal .btn-success,
body:not(.pos-rd) .modal .tw-dw-btn-success {
  border-color: transparent !important;
  background: var(--rm-success) !important;
  color: #fff !important;
}
body:not(.pos-rd) .modal .btn-danger,
body:not(.pos-rd) .modal .tw-dw-btn-error {
  border-color: transparent !important;
  background: var(--rm-danger) !important;
  color: #fff !important;
}
body:not(.pos-rd) .modal .btn-warning,
body:not(.pos-rd) .modal .tw-dw-btn-warning {
  border-color: transparent !important;
  background: var(--rm-warning) !important;
  color: #fff !important;
}
body:not(.pos-rd) .modal .btn-success:hover,
body:not(.pos-rd) .modal .tw-dw-btn-success:hover,
body:not(.pos-rd) .modal .btn-danger:hover,
body:not(.pos-rd) .modal .tw-dw-btn-error:hover,
body:not(.pos-rd) .modal .btn-warning:hover,
body:not(.pos-rd) .modal .tw-dw-btn-warning:hover { filter: brightness(1.1); color: #fff !important; }

/* Closing is backing out, whatever classes the markup gave it. */
body:not(.pos-rd) .modal [data-dismiss="modal"].btn:not(.rd-page-add),
body:not(.pos-rd) .modal [data-dismiss="modal"].tw-dw-btn:not(.rd-page-add),
body:not(.pos-rd) .rd-page .modal [data-dismiss="modal"].tw-dw-btn.tw-dw-btn-neutral,
body:not(.pos-rd) .rd-page .modal [data-dismiss="modal"].tw-dw-btn.tw-dw-btn-primary {
  border-color: var(--rm-line) !important;
  background: var(--rm-surface) !important;
  box-shadow: none !important;
  color: var(--rm-text-2) !important;
}
body:not(.pos-rd) .modal [data-dismiss="modal"].btn:not(.rd-page-add):hover,
body:not(.pos-rd) .modal [data-dismiss="modal"].tw-dw-btn:not(.rd-page-add):hover,
body:not(.pos-rd) .rd-page .modal [data-dismiss="modal"].tw-dw-btn.tw-dw-btn-neutral:hover,
body:not(.pos-rd) .rd-page .modal [data-dismiss="modal"].tw-dw-btn.tw-dw-btn-primary:hover {
  border-color: var(--rm-text-3) !important;
  background: var(--rm-surface-2) !important;
  color: var(--rm-text) !important;
  filter: none;
}
/* …except the close in the header, which keeps its own treatment. */
body:not(.pos-rd) .modal-header .close[data-dismiss="modal"] {
  border-color: transparent !important;
  background: transparent !important;
}

/* A button in the body is not the dialog's action — the one that carries the
   dialog out sits in the footer. */
body:not(.pos-rd) .modal-body .btn-primary:not([type="submit"]),
body:not(.pos-rd) .modal-body .tw-dw-btn-primary:not([type="submit"]) {
  border-color: var(--rm-line) !important;
  background: var(--rm-surface) !important;
  box-shadow: none !important;
  color: var(--rm-text-2) !important;
}
body:not(.pos-rd) .modal-body .btn-primary:not([type="submit"]):hover,
body:not(.pos-rd) .modal-body .tw-dw-btn-primary:not([type="submit"]):hover {
  border-color: var(--rm-brand) !important;
  background: var(--rm-brand-wash) !important;
  color: var(--rm-brand) !important;
  filter: none;
}

body:not(.pos-rd) .modal .btn-link {
  height: auto;
  min-height: 0;
  padding: 0 2px !important;
  border: 0 !important;
  background: none !important;
  color: var(--rm-brand) !important;
  font-weight: 600;
}
body:not(.pos-rd) .modal .btn-link:hover { background: none !important; text-decoration: underline; transform: none; }

body:not(.pos-rd) .modal .btn-xs,
body:not(.pos-rd) .modal .tw-dw-btn-xs { height: 30px; min-height: 30px; padding: 0 10px !important; font-size: 12px; }
body:not(.pos-rd) .modal .btn-sm,
body:not(.pos-rd) .modal .tw-dw-btn-sm { height: 34px; min-height: 34px; padding: 0 12px !important; font-size: 12.5px; }

/* ==========================================================================
   5. Footer
   --------------------------------------------------------------------------
   The markup usually puts the action that carries on first; backing out
   belongs on the left and carrying on belongs on the right.
   ========================================================================== */

body:not(.pos-rd) .modal-footer {
  margin: 0;
  padding: 14px 22px 18px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--rm-line-soft);
  text-align: left;
}
body:not(.pos-rd) .modal-footer .btn + .btn,
body:not(.pos-rd) .modal-footer .tw-dw-btn + .tw-dw-btn { margin: 0; }

/* ==========================================================================
   6. Tables inside a dialog
   --------------------------------------------------------------------------
   The same table the lists use: a tinted header strip in 10px caps, hairline
   separators, tabular figures and a hover tint.
   ========================================================================== */

body:not(.pos-rd) .modal .table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
body:not(.pos-rd) .modal .table > thead > tr > th {
  padding: 9px 10px;
  border: 0 !important;
  border-bottom: 1px solid var(--rm-line) !important;
  background: var(--rm-surface-2);
  color: var(--rm-text-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
body:not(.pos-rd) .modal .table > tbody > tr > td,
body:not(.pos-rd) .modal .table > tfoot > tr > td,
body:not(.pos-rd) .modal .table > tfoot > tr > th {
  padding: 9px 10px;
  border: 0 !important;
  border-bottom: 1px solid var(--rm-line-soft) !important;
  color: var(--rm-text);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
body:not(.pos-rd) .modal .table > tbody > tr:last-child > td,
body:not(.pos-rd) .modal .table > tbody > tr:last-child > th { border-bottom: 0 !important; }

/* Some of these tables have no thead at all: the th is a label at the head of
   its row, not a column heading, so it reads as a label rather than taking
   the header strip. */
body:not(.pos-rd) .modal .table > tbody > tr > th {
  padding: 9px 10px;
  border: 0 !important;
  border-bottom: 1px solid var(--rm-line-soft) !important;
  background: transparent;
  color: var(--rm-text);
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
body:not(.pos-rd) .modal .table-striped > tbody > tr:nth-of-type(odd),
body:not(.pos-rd) .modal .table > tbody > tr.odd { background-color: transparent; }
body:not(.pos-rd) .modal .table > tbody > tr { transition: background .14s var(--rm-ease); }
body:not(.pos-rd) .modal .table > tbody > tr:hover > td { background: var(--rm-surface-2); }
body:not(.pos-rd) .modal .table > tfoot > tr > th,
body:not(.pos-rd) .modal .table > tfoot > tr > td {
  border-top: 1px solid var(--rm-line) !important;
  background: var(--rm-surface-2);
  font-weight: 600;
}
body:not(.pos-rd) .modal .table-bordered {
  border: 1px solid var(--rm-line);
  border-radius: 12px;
  overflow: hidden;
}
body:not(.pos-rd) .modal .table-bordered > thead > tr > th,
body:not(.pos-rd) .modal .table-bordered > tbody > tr > td { border-left: 0 !important; border-right: 0 !important; }
body:not(.pos-rd) .modal .table .label,
body:not(.pos-rd) .modal .table .badge { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }

/* AdminLTE's colour classes turn up on these tables — a bright green header
   row on a grey table — and they are not this product's colours. */
body:not(.pos-rd) .modal .table.bg-gray,
body:not(.pos-rd) .modal .table .bg-gray,
body:not(.pos-rd) .modal .table .bg-green,
body:not(.pos-rd) .modal .table .bg-blue,
body:not(.pos-rd) .modal .table .bg-aqua,
body:not(.pos-rd) .modal .table .bg-purple,
body:not(.pos-rd) .modal .table .bg-maroon {
  background-color: transparent !important;
  color: inherit !important;
}

/* A row of nothing but th cells is a header, whether or not it was put in a
   thead — several of these tables have no thead at all. */
body:not(.pos-rd) .modal .table > tbody > tr:has(> th):not(:has(> td)) > th {
  padding: 9px 10px;
  border: 0 !important;
  border-bottom: 1px solid var(--rm-line) !important;
  background: var(--rm-surface-2) !important;
  color: var(--rm-text-3) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A picture in a dialog is there to be recognised, not to fill the dialog. */
body:not(.pos-rd) .modal .modal-body img {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: var(--rm-radius-sm);
}

/* A dialog's own DataTable keeps the chrome the lists have. */
body:not(.pos-rd) .modal .dataTables_wrapper { font-size: 12.5px; }
body:not(.pos-rd) .modal .dataTables_wrapper .dataTables_filter input,
body:not(.pos-rd) .modal .dataTables_wrapper .dataTables_length select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--rm-line);
  border-radius: 9px;
  box-shadow: none;
}

/* ==========================================================================
   7. Tabs inside a dialog
   ========================================================================== */

body:not(.pos-rd) .modal .nav-tabs-custom { margin: 0; border: 0; background: transparent; box-shadow: none; }
body:not(.pos-rd) .modal .nav-tabs-custom > .nav-tabs {
  padding: 0;
  border-bottom: 1px solid var(--rm-line);
  background: transparent;
}
body:not(.pos-rd) .modal .nav-tabs-custom > .nav-tabs > li { border: 0 !important; margin: 0; }
body:not(.pos-rd) .modal .nav-tabs-custom > .nav-tabs > li > a {
  position: relative;
  margin: 0;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 9px 9px 0 0;
  background: transparent !important;
  color: var(--rm-text-2) !important;
  font-size: 13px;
  font-weight: 600;
}
body:not(.pos-rd) .modal .nav-tabs-custom > .nav-tabs > li > a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--rm-brand);
  transform: scaleX(0);
  transition: transform .24s var(--rm-ease);
}
body:not(.pos-rd) .modal .nav-tabs-custom > .nav-tabs > li.active > a { color: var(--rm-brand) !important; }
body:not(.pos-rd) .modal .nav-tabs-custom > .nav-tabs > li.active > a::after { transform: scaleX(1); }
body:not(.pos-rd) .modal .nav-tabs-custom > .tab-content { padding: 16px 0 0; border: 0; }

@media (max-width: 640px) {
  body:not(.pos-rd) .modal-dialog { margin: 14px; }
  body:not(.pos-rd) .modal-body .row { grid-template-columns: minmax(0, 1fr); }
  body:not(.pos-rd) .modal-footer { flex-direction: column-reverse; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.pos-rd) .modal.in .modal-dialog { animation: none !important; }
}