/* ── Shared page-modal base  (.modal-backdrop / .modal-box) ──── */
/* Used by agents, skills, and mcp_servers pages. Loaded via modal.css. */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-box {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  width: 100%; max-width: 740px;
  height: 80vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
}
.modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-title { font-size: 1.125rem; font-weight: 600; color: var(--text); }
.modal-body  { overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 0.875rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 0.75rem;
  flex-shrink: 0;
  background: var(--panel-bg);
}

/* Shared icon button used inside modals across all pages */
.icon-btn {
  min-width: 2rem; min-height: 2rem; padding: 0.375rem;
  background: transparent; border: 1px solid transparent;
  color: var(--text-secondary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.icon-btn:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.icon-btn.danger:hover { background: rgba(218,30,40,.1); border-color: rgba(218,30,40,.3); color: var(--support-error); }

/* ── IBM Carbon Modal ─────────────────────────────────────────── */

.ibm-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}

.ibm-modal {
  background: var(--panel-bg);
  width: 100%; max-width: 520px;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  /* no border-radius  -  Carbon is sharp */
}

/* Size variants */
.ibm-modal--lg { height: 80vh; }
.ibm-modal--sm { height: auto; max-height: 80vh; }

/* ── Header ───────────────────────────────────────────────────── */

.ibm-modal-header {
  padding: 1.25rem 4rem 1.25rem 1.5rem; /* right leaves room for × */
  flex-shrink: 0;
}

.ibm-modal-label {
  font-size: 0.75rem; font-weight: 400;
  color: var(--text-secondary);
  margin: 0 0 0.375rem;
  letter-spacing: 0.32px;
}

.ibm-modal-title {
  font-size: 1.25rem; font-weight: 400;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Close button  -  absolute top-right corner */
.ibm-modal-close {
  position: absolute; top: 0; right: 0;
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text);
  transition: background 0.1s;
}
.ibm-modal-close:hover { background: var(--hover-bg, rgba(0,0,0,0.06)); }
html.dark .ibm-modal-close:hover { background: rgba(255,255,255,0.08); }

/* ── Body ─────────────────────────────────────────────────────── */

.ibm-modal-body {
  padding: 0 1.5rem 2rem;
  overflow-y: auto;
  flex: 1;
}

/* When body contains a nav layout, remove padding so sidebar sits flush */
.ibm-modal-body:has(.mnav-body) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Helper text class for body paragraphs */
.ibm-modal-text {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* ── Footer ───────────────────────────────────────────────────── */

.ibm-modal-footer {
  display: flex;
  flex-shrink: 0;
  margin-top: auto;
}

.ibm-modal-btn {
  flex: 1;
  height: 4rem;
  padding: 0 1.5rem;
  font-size: 0.875rem; font-weight: 400;
  border: none; cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
  text-align: left;
  transition: background 0.1s;
}

/* Cancel  -  always dark */
.ibm-modal-btn--cancel { background: var(--gray-80, #393939); color: var(--gray-10, #f4f4f4); }
.ibm-modal-btn--cancel:hover { background: var(--btn-secondary-hover, #474747); }

/* Default confirm  -  blue */
.ibm-modal-btn--confirm { background: var(--blue-60, #0f62fe); color: var(--text-on-color); }
.ibm-modal-btn--confirm:hover { background: var(--blue-70, #0353e9); }

/* Danger confirm  -  red */
.ibm-modal--danger .ibm-modal-btn--confirm { background: var(--red-60, #da1e28); color: var(--text-on-color); }
.ibm-modal--danger .ibm-modal-btn--confirm:hover { background: var(--btn-danger-hover, #b81922); }

/* ── Dark mode body overrides ─────────────────────────────────── */
html.dark .ibm-modal-btn--cancel { background: var(--gray-60, #6f6f6f); }
html.dark .ibm-modal-btn--cancel:hover { background: var(--gray-50, #8d8d8d); }

/* ── Extra size variants ─────────────────────────────────────── */
.ibm-modal--xs .ibm-modal-content { max-width: 320px; }
.ibm-modal--md .ibm-modal-content { max-width: 576px; }