/*
 * theme-modals.css
 * Global enterprise modal sizing, spacing, and full-width form controls.
 * Loaded after theme-components.css. Uses CSS variables only (light/dark/scheme safe).
 */

:root {
  --modal-pad-x: 1.35rem;
  --modal-pad-y: 1.1rem;
  --modal-footer-gap: 0.65rem;
  --modal-label-gap: 0.4rem;
  --modal-field-gap-y: 1rem;

  /* Bootstrap 3 uses width (not max-width) for .modal-dialog */
  --modal-dialog-width: min(96vw, 760px);
  --modal-sm-width: min(96vw, 420px);
  --modal-lg-width: min(96vw, 1120px);
  --modal-xl-width: min(96vw, 1320px);
  --modal-enterprise-width: min(98vw, 1480px);
}

/* ── Width scale (overrides Bootstrap 3 hard widths) ───── */
@media (min-width: 768px) {
  .modal .modal-dialog {
    width: var(--modal-dialog-width);
    max-width: 96vw;
    margin-left: auto;
    margin-right: auto;
  }

  .modal .modal-dialog.modal-sm {
    width: var(--modal-sm-width);
    max-width: 96vw;
  }
}

@media (min-width: 992px) {
  .modal .modal-dialog.modal-lg {
    width: var(--modal-lg-width);
    max-width: 96vw;
  }

  .modal .modal-dialog.modal-xl,
  .modal .modal-dialog.modal-enterprise {
    width: var(--modal-xl-width);
    max-width: 96vw;
  }

  .modal .modal-dialog.modal-enterprise {
    width: var(--modal-enterprise-width);
    max-width: 98vw;
  }
}

/* Keep existing .modal-xl utility in sync with tokens */
.modal-xl {
  width: var(--modal-xl-width) !important;
  max-width: 96vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.modal-enterprise {
  width: var(--modal-enterprise-width) !important;
  max-width: 98vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Spacing / rhythm ─────────────────────────────────── */
.modal .modal-header {
  padding: var(--modal-pad-y) var(--modal-pad-x);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.modal .modal-header .modal-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}

.modal .modal-header .modal-title .fa,
.modal .modal-header .modal-title .fas,
.modal .modal-header .modal-title .far,
.modal .modal-header .modal-title .fab {
  margin-right: 0.4rem;
  opacity: 0.9;
}

.modal .modal-header .close,
.modal .modal-header .btn-close {
  margin: 0;
  order: 2;
  float: none;
}

.modal .modal-body {
  padding: calc(var(--modal-pad-y) + 0.15rem) var(--modal-pad-x);
}

.modal .modal-footer {
  padding: var(--modal-pad-y) var(--modal-pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: var(--modal-footer-gap);
  align-items: center;
  justify-content: flex-end;
}

.modal .modal-body .form-label,
.modal .modal-body label:not(.btn):not(.radio-inline):not(.checkbox-inline) {
  display: block;
  margin-bottom: var(--modal-label-gap);
  font-weight: 600;
}

.modal .modal-body .row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: var(--modal-field-gap-y);
}

.modal .modal-body .row > [class*="col-"] {
  margin-bottom: 0.35rem;
}

.modal .modal-body textarea.form-control {
  min-height: 6.5rem;
}

/* ── Full-bleed controls inside modals ────────────────── */
.modal .form-control,
.modal .form-select,
.modal select.form-control:not(.select2-hidden-accessible),
.modal select.form-select:not(.select2-hidden-accessible),
.modal input.form-control,
.modal textarea.form-control,
.modal .input-group,
.modal .bootstrap-timepicker,
.modal .datepicker,
.modal .twitter-typeahead,
.modal .tt-input {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Select2 hides the native select — never force it visible/full-width */
.modal select.select2-hidden-accessible {
  width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  position: absolute !important;
  left: -10000px !important;
  opacity: 0 !important;
}

.modal .select2-container,
.modal .select2-container--default,
.modal span.select2.select2-container {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

.modal .select2-container .select2-selection--single,
.modal .select2-container .select2-selection--multiple {
  width: 100% !important;
  min-height: 38px;
}

.modal .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
  padding-left: 12px;
  padding-right: 28px;
}

.modal .select2-container .select2-selection--single .select2-selection__arrow {
  height: 36px;
}

.modal .input-group {
  display: flex !important;
  align-items: stretch;
  width: 100% !important;
  max-width: 100%;
}

.modal .input-group .input-group-addon,
.modal .input-group .input-group-btn,
.modal .input-group .input-group-text {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
}

.modal .input-group .form-control,
.modal .input-group .form-select,
.modal .input-group .select2-container {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none;
}

.modal .input-group .select2-container {
  width: 100% !important;
  flex: 1 1 auto;
}

/* Scrollable bodies for tall enterprise forms */
.modal .modal-dialog-scrollable {
  max-height: calc(100vh - 2rem);
}

.modal .modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 2rem);
}

.modal .modal-dialog-scrollable .modal-body {
  overflow-y: auto;
  max-height: calc(100vh - 11rem);
}

/* POS Multiple Pay — always scrollable (BS3 + Dreams overflow nests) */
#modal_payment.modal {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
#modal_payment .modal-dialog.modal-dialog-scrollable,
#modal_payment .modal-dialog {
  max-height: calc(100vh - 1.5rem);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
#modal_payment .modal-dialog.modal-dialog-scrollable .modal-content,
#modal_payment .modal-content {
  max-height: calc(100vh - 1.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#modal_payment .modal-dialog.modal-dialog-scrollable .modal-body,
#modal_payment .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Healthcare / module hosts share the same rules */
.prescription_modal .modal-dialog,
.view_modal .modal-dialog,
.product_modal .modal-dialog,
.contact_modal .modal-dialog,
.user_modal .modal-dialog,
.role_modal .modal-dialog,
.purchase_modal .modal-dialog,
.expense_modal .modal-dialog {
  /* inherit width from size class; ensure centering */
  margin-left: auto;
  margin-right: auto;
}