.pop-up-container {
  background-color: rgba(0, 0, 0, 0.051);
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 101;
  left: 0;
}

.pop-up {
  background-color: var(--white);
  border: var(--border);
  border-radius: var(--borderRadius);
  padding: min(32px, 6vw) min(40px, 6vw);
  width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  line-height: 1.4;
  text-align: center;
  box-sizing: border-box;
  animation: zoomIn 0.3s ease forwards;
}

@keyframes zoomIn {
  from {
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes zoomOut {
  from {
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    transform: translate(-50%, -50%) scale(0);
  }
}

.pop-up-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}

.pop-up-container.success .pop-up-icon {
  background-color: rgb(55, 201, 55, 0.14); /*Success*/
}

.pop-up-container.error .pop-up-icon {
  background-color: rgba(255, 0, 0, 0.08); /*error*/
}

.pop-up-container.warning .pop-up-icon,
.pop-up-container.question .pop-up-icon {
  background-color: rgb(245, 179, 28, 0.15); /*Warning*/
}

.pop-up-container.info .pop-up-icon,
.pop-up-container.approval .pop-up-icon {
  background-color: rgb(160 160 160 / 14%); /*Neutral*/
}

.pop-up-container.approval div.pop-up-description p:nth-child(2){
  text-align: center;
}
.pop-up-container.approval div.pop-up-description {
  text-align: start;
  display: flex;
  gap: 24px;
  flex-direction: column;
  width: 100%;
}

.pop-up-description ul {
  background-color: var(--background);
  border-radius: var(--borderRadius);
  padding: 16px;
  box-sizing: border-box;
}

.pop-up-description ul li {
  margin: 4px 0;
}

.pop-up-description{
  white-space: break-spaces;
}

/* The confirmation dialog's plain-text message body. `.pop-up-description` above is the
   other dialog family's (message / question / warning); this is the Cancel-and-confirm
   one (confirmation-pop-up.vue), whose `{{ message }}` branch renders a text node. Without
   this it inherits `white-space: normal` and a blank line authored between two paragraphs
   is not merely under-spaced but deleted - both paragraphs collapse onto one line. #300. */
p.confirmation-message {
  white-space: break-spaces;
}

.pop-up .user-message {
  font-weight: bold;
  max-height: 60vh;
  overflow: auto;
  background-color: var(--background);
  border: var(--border);
  padding: 12px 16px;
  border-radius: var(--borderRadius);
}

.pop-up .buttons{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 16px;
}

.pop-up .buttons button {
  flex-grow: 1;
  justify-content: center;
}

.pop-up-icon > .icon {
  width: 24px;
  mix-blend-mode: color-burn;
  filter: contrast(0.8);
}

.buttons.multi-choice {
  flex-direction: column;
  display: flex;
}

.buttons.multi-choice ~ button {
  width: 100%;
}

.buttons.multi-choice button {
  width: 100%;
  padding: 24px 24px;
  display: flex;
  justify-content: flex-start;
  gap: 24px;
}

.buttons.multi-choice button .arrow {
  transform: rotate(-90deg);
}

.buttons.multi-choice button p {
  flex: 1;
  text-align: left;
}

.pop-up-icon svg .success{ /*Success*/
  fill: none;
  stroke: var(--green);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.pop-up-icon svg .error{ /*error*/
  fill: none;
  stroke: var(--red);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.pop-up-icon svg .warning,
.pop-up-icon svg .question{ /*Warning*/
  fill: none;
  stroke: var(--yellow);
  stroke-miterlimit: 133.33;
  stroke-width: 2px;
  stroke-linecap: round;
}

.pop-up-icon svg .info{ /*Neutral*/
  fill: none;
  stroke: var(--black);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

/* pop up textarea */
.pop-up.textarea-pop-up .buttons{
  margin-top: 0;
}

.pop-up.textarea-pop-up textarea{
  min-height: 80px;
}

.pop-up.textarea-pop-up {
  gap: 24px;
}

@media (max-width:500px)  {
  .pop-up .buttons {
    flex-direction: column;
  }
}


/* permissions popup */
.permissions-popup-main-wrapper {
  width: 100%;
  margin-top: 16px;
}

.permissions-popup-main-button {
  width: 100%;
}

.permissions-popup-icon {
  background-color: var(--background);
  border: var(--border);
}

.permissions-popup-input-wrapper > div:first-child {
  flex: 1;
  margin-bottom: 0;
}

.permissions-popup-input-wrapper {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  align-items: flex-end;
}

.permissions-popup-user {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 4px 8px 8px;
  border-radius: var(--borderRadius);
}

.permissions-popup-user:hover {
  background-color: var(--lightergrey);
}

.permissions-popup-user > p {
  flex: 1;
  text-align: left;
  margin-top: 3px;
}

.permissions-popup-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.permissions-popup-user img.user {
  width: 24px;
  height: 24px;
}

.permissions-popup-users-wrapper .group-img {
  width: 24px;
  height: 24px;
}

.permissions-popup-users-wrapper {
  border: var(--border);
  padding: 4px;
  border-color: transparent;
}

.permissions-popup-users-wrapper:has(> :nth-child(7)) {
  border-color: var(--lightgrey);
  border-radius: var(--borderRadius);
  height: 336px;
  overflow: auto;
}

.permissions-popup-buttons-wrapper .icon-button {
  height: 51px;
  width: 51px;
}

/* proposal export */
.proposal-export-pop-up {
  align-items: stretch;
  text-align: start;
  max-width: 700px;
}

.proposal-export-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.proposal-export-submit-btn {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}

.proposal-export-history {
  width: 100%;
}

.proposal-export-history-list {
  max-height: 240px;
  overflow: auto;
  border: var(--border);
  border-radius: var(--borderRadius);
}

.proposal-export-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border-bottom: var(--border);
}

.proposal-export-history-item:last-child {
  border-bottom: none;
}

.proposal-export-history-item-info {
  flex: 1;
}

.proposal-export-history-item-range {
  font-weight: bold;
}

.proposal-export-history-item-error {
  color: var(--red);
}

.proposal-export-empty-history {
  color: var(--grey);
}


/* document version history */
.document-version-history-overlay .document-version-history-pop-up {
  align-items: stretch;
  text-align: start;
  max-width: 800px;
}

.document-version-history-overlay .document-version-history-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.document-version-history-overlay .document-version-history-header h2 {
  margin: 0;
}

.document-version-history-overlay .document-version-history-document-name {
  flex-grow: 1;
  color: var(--grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* DbUp migrations (SG admins only, from the admin home page's database card) */
.dbup-scripts-overlay .dbup-scripts-pop-up {
  align-items: stretch;
  text-align: start;
  max-width: 760px;
  gap: 12px;
}

.dbup-scripts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.dbup-scripts-header h2 {
  margin: 0;
}

.dbup-scripts-close {
  margin-left: auto;
}

.dbup-scripts-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.dbup-scripts-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: var(--border);
  border-radius: 100px;
  background-color: var(--white);
  cursor: pointer;
  font-size: 0.85rem;
}

.dbup-scripts-tab.active {
  background-color: var(--lightergrey);
  font-weight: 500;
}

.dbup-scripts-tab-count {
  color: var(--darkgrey);
  font-size: 0.75rem;
}

.dbup-scripts-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--darkgrey);
  font-size: 0.8rem;
  flex-wrap: wrap;
}

.dbup-scripts-meta-sep {
  opacity: 0.5;
}

.dbup-scripts-filter {
  width: 100%;
  box-sizing: border-box;
}

/* The main database's journal is 300+ rows, so the list scrolls inside the pop-up rather than the page. */
.dbup-scripts-list {
  max-height: min(50vh, 420px);
  overflow-y: auto;
  border: var(--border);
  border-radius: var(--borderRadius);
}

.dbup-scripts-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  font-size: 0.8rem;
}

.dbup-scripts-row:not(:last-child) {
  border-bottom: var(--border);
}

.dbup-scripts-row.pending {
  background-color: var(--lightergrey);
}

.dbup-scripts-name {
  flex-grow: 1;
  word-break: break-all;
  font-family: monospace;
}

.dbup-scripts-applied {
  color: var(--darkgrey);
  white-space: nowrap;
}

.dbup-scripts-pending-badge {
  color: var(--red);
  font-size: 0.75rem;
  white-space: nowrap;
}

.dbup-scripts-problem {
  color: var(--red);
}