/* burble-core.css / core-modal.css: Modal, Bootstrap modal interop, dialogs.
   Linked by common/burble_core_css.php, in the order listed there. */

/* ── Modal (framework-agnostic) ──────────────────────────────
   Usage:
     <div class="bc-modal-backdrop is-open">
       <div class="bc-modal bc-modal--sm">
         <div class="bc-modal-header"><div class="bc-modal-title">…</div></div>
         <div class="bc-modal-body">…</div>
         <div class="bc-modal-footer">
           <button class="bc-btn bc-btn--outline">Cancel</button>
           <button class="bc-btn bc-btn--primary">Save</button>
         </div>
       </div>
     </div>
   For Bootstrap-based modals, see "Bootstrap modal interop" below. */
.bc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bc-modal-backdrop.is-open {
  display: flex;
}
/* Set by extensions/ba-modal.js while any .bc-modal is open, so the page behind
   the backdrop cannot be scrolled away from the dialog. */
html.bc-modal-lock,
html.bc-modal-lock body {
  overflow: hidden;
}

.bc-modal {
  background: var(--white);
  border-radius: 20px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  animation: ba-modal-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}
.bc-modal--sm {
  max-width: 400px;
}
.bc-modal--lg {
  max-width: 720px;
}
.bc-modal--xl {
  max-width: 960px;
}

.modal .modal-header,
/* extensions/ba-modal.js focuses the panel on open; that programmatic focus
   must not draw a ring. */
.bc-modal:focus {
  outline: none;
}

.modal .modal-header,
.bc-modal-header {
  padding: 18px 0 14px;
  margin: 0 18px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal .modal-title,
.bc-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
}

.modal .modal-header .close,
.bc-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--sl-400);
  transition: color 0.15s;
  line-height: 0;
  font-size: 18px;
  margin: 0;
}

.modal .modal-header .close:hover,
.bc-modal-close:hover {
  color: var(--sl-500);
}

.modal .modal-body,
.bc-modal-body {
  padding: 18px 24px;
  overflow-y: auto;
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-strong);
}
/* The body pads itself, so a paragraph's own margins would double the gap at
   the top and above the footer. */
.bc-modal-body > p:first-child {
  margin-top: 0;
}
.bc-modal-body > p:last-child {
  margin-bottom: 0;
}
/* Loading: while a modal fetches what it shows, .is-loading on the .bc-modal
   shows its body's .bc-loading (core-feedback.css) in place of the rest, and
   holds its footer's actions — not Cancel or Close — until the data is in.

   Usage: <div class="bc-modal is-loading">
            <div class="bc-modal-body">
              <div class="bc-loading"><span class="bc-spinner" aria-hidden="true"></span> Loading…</div>
              …the content… */
.bc-modal-body > .bc-loading {
  display: none;
}
.bc-modal.is-loading .bc-modal-body > .bc-loading {
  display: flex;
}
.bc-modal.is-loading .bc-modal-body > :not(.bc-loading) {
  display: none;
}
.bc-modal.is-loading .bc-modal-footer .bc-btn:not([data-ba-modal-close]) {
  opacity: 0.4;
  pointer-events: none;
}
.modal .modal-footer,
.bc-modal-footer {
  padding: 14px 24px 18px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0 18px;
}
/* An action or a status at the start, the usual Cancel / Save at the end: put
   the end group in a .bc-push-end, whose auto margin takes the free space.
     <div class="bc-modal-footer">
       <button class="bc-btn bc-btn--outline">Add</button>
       <div class="bc-push-end"><button …>Cancel</button><button …>Save</button></div>
     </div> */

/* ── Bootstrap modal interop ──────────────────────────────────
   Redesign pages carry Bootstrap modals whose markup is shared with the classic
   pages (the dashboard popups, RBAC dialogs, expire waivers, change requests,
   the load-board picker). This gives them the .bc-modal look without editing
   that markup. Only the redesign shells load this stylesheet, so classic pages
   keep their Bootstrap look.

   Chrome and standard form controls only: what a modal puts in its body is
   left alone, and no width is set because several set their own. */
.modal .modal-content {
  border: 0;
  border-radius: 20px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Footer buttons (.modal .modal-footer .btn*) are styled with .bc-btn in
   core-buttons.css; buttons inside a body are left alone. */

/* Standard form controls inside a modal body get the .bc-input box. */
.modal .modal-body .form-group {
  margin-bottom: 16px;
}
.modal .modal-body .form-group:last-child {
  margin-bottom: 0;
}
.modal .modal-body .form-group > label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-label);
}
.modal .modal-body .form-control {
  min-height: 38px;
  padding: 8px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-input);
  background: var(--bg-light);
  font-size: 13.5px;
  color: var(--navy);
  box-shadow: none;
}
/* Disabled and read-only: core's look for those fields (core-forms.css).
   Outweighs Bootstrap's own grey. */
.modal .modal-body .form-control:is([readonly], :disabled) {
  background-color: var(--sl-200);
  color: var(--sl-400);
  opacity: 1;
}
/* Not on a read-only or disabled field, which keeps the resting look above;
   that rule outweighs Bootstrap's own focus glow. */
.modal .modal-body .form-control:focus:where(:not([readonly], :disabled)) {
  border-color: var(--teal);
  box-shadow: var(--focus-ring);
  background: var(--white);
}
.modal .modal-body select.form-control {
  height: 38px;
}
.modal .modal-body .form-control-sm {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 13px;
}
.modal .modal-body textarea.form-control {
  min-height: 84px;
}

/* Keep every Bootstrap modal footer on one line; Bootstrap 4 sets
   flex-wrap: wrap. */
.modal-footer {
  flex-wrap: nowrap !important;
}

/* confirm() / alert() panels built by extensions/ba-dialog.js */
/* Only a question about deleting something is marked: the header carries the
   same red .bc-modal-header-icon tile as every other delete dialog. */
.bc-dialog-icon {
  display: none;
}
.bc-dialog--danger .bc-dialog-icon {
  display: flex;
}
.bc-dialog-message {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sl-700);
  white-space: pre-line;
}

@keyframes ba-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}