/* Used on every layout: the footer logo, popup confirmations and small animations. */

.powered-by { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.powered-by-logo { height: 32px; width: auto; }

/* Page change */
.page-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
  background: var(--bs-primary, #3056f5);
  transform-origin: left;
  animation: page-progress 1.6s cubic-bezier(.1, .7, .3, 1) forwards;
}
@keyframes page-progress { from { transform: scaleX(.05); } to { transform: scaleX(.9); } }

/* Each section rather than the whole page, and not popups: a transform would stop one covering the whole screen */
.app-content > :not(.modal):not(.powered-by), .login-page > :not(.powered-by):not(script) { animation: page-enter .24s ease-out backwards; }
/* A list's row actions: Edit and Delete as icons, and the rest in a menu (ui.js) */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; vertical-align: middle; }
.row-icon { width: 16px; height: 16px; pointer-events: none; }
.row-menu { display: inline-block; vertical-align: middle; }
.row-menu > .dropdown-menu { display: none; }
.row-menu-toggle.is-done .row-icon { display: none; }
.row-menu-toggle.is-done::after { content: "✓"; font-weight: 700; }
body > .dropdown-menu .dropdown-item { white-space: nowrap; }
@media (pointer: coarse) { .btn-icon { width: 40px; height: 40px; } }
@keyframes page-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Button press */
.btn { position: relative; transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .12s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.app-sidebar-nav .nav-link { position: relative; transition: color .15s, background-color .15s; }
.ripple-host { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ripple {
  position: absolute; border-radius: 50%; background: currentColor; opacity: .22;
  transform: scale(0); animation: ripple .45s ease-out forwards;
}
@keyframes ripple { to { transform: scale(2.4); opacity: 0; } }

/* Popup confirmation */
.app-confirm.fade .modal-dialog { transform: scale(.9); transition: transform .2s cubic-bezier(.2, .9, .3, 1.25); }
.app-confirm.show .modal-dialog { transform: none; }
.app-confirm .modal-body .alert:last-child { margin-bottom: 0; }
/* Always on white, whatever the theme, or phones cannot read it */
.survey-link-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 16px; }
.survey-link-qr img { width: 180px; height: 180px; background: #fff; border-radius: 8px; }

/* No card: its parts stand directly on the page behind, blurred past reading, with Cancel on the left and the action on the right */
.app-confirm { --confirm-veil: rgba(253, 242, 248, .72); --confirm-veil-solid: rgba(253, 242, 248, .97); --confirm-dial-off: #DCCFE3; --confirm-routine: #2E1065; --confirm-danger: #DC2626; --confirm-danger-icon: #B91C1C; }
:root[data-theme="dark"] .app-confirm { --confirm-veil: rgba(21, 16, 31, .72); --confirm-veil-solid: rgba(21, 16, 31, .97); --confirm-dial-off: #4A3C66; --confirm-routine: #F9A8D4; --confirm-danger: #F87171; --confirm-danger-icon: #F87171; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-confirm { --confirm-veil: rgba(21, 16, 31, .72); --confirm-veil-solid: rgba(21, 16, 31, .97); --confirm-dial-off: #4A3C66; --confirm-routine: #F9A8D4; --confirm-danger: #F87171; --confirm-danger-icon: #F87171; }
}
.app-confirm { background-color: var(--confirm-veil-solid); }   /* where a browser cannot blur, the page is hidden instead */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-confirm { background-color: var(--confirm-veil); -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); }
}
body:has(.app-confirm.show) .modal-backdrop { opacity: 0; }   /* the blur replaces the usual dark layer */
.app-confirm .modal-dialog { --bs-modal-width: 420px; }
.app-confirm .modal-content { align-items: center; padding: 30px 26px 18px; text-align: center; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-confirm .modal-title { margin: 18px 0 0; font-size: 1.35rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.app-confirm .modal-body { flex: none; width: 100%; margin-top: 8px; padding: 0; overflow-wrap: anywhere; color: var(--color-text-muted); }
.app-confirm .modal-footer, .app-confirm-page .modal-body form { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
.app-confirm .modal-footer { width: 100%; margin-top: 22px; padding: 0; border: 0; }
.app-confirm .modal-footer .btn, .app-confirm-page .modal-body form .btn { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; margin: 0; }   /* a label that wraps leaves both the same height */
.app-confirm .modal-footer .btn, .app-confirm-page .modal-body .btn { min-height: 48px; border-radius: 24px; font-weight: 600; }
.app-confirm-page .modal-body > .btn { width: 100%; }   /* Back, alone when there is nothing to confirm */
.app-confirm-page .modal-body { margin-top: 14px; }
.app-confirm-page .modal-body .alert { text-align: left; }
.app-confirm .modal-body .alert-warning { padding: 0; border: 0; background: transparent; text-align: center; color: var(--color-text-muted); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.app-confirm .modal-body .alert-warning strong { color: var(--color-text); }
.app-confirm .form-label { display: block; text-align: left; }   /* fields to read or copy, such as the survey link */
.app-confirm-dial { flex: none; }
.dial-part { fill: none; stroke: var(--confirm-dial-off); stroke-width: 9; }
.app-confirm:not(.app-confirm-danger) .dial-routine { stroke: var(--confirm-routine); }
.app-confirm-danger .dial-danger { stroke: var(--confirm-danger); }
.dial-icon { fill: none; stroke: var(--confirm-routine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-danger { display: none; stroke: var(--confirm-danger-icon); }
.app-confirm-danger .icon-danger { display: inline; }
.app-confirm-danger .icon-routine { display: none; }

@media (prefers-reduced-motion: reduce) {
  .app-content > *, .login-page > * { animation: none !important; }
  .page-progress { animation: none; transform: scaleX(.9); }
  .btn:active:not(:disabled) { transform: none; }
  .app-confirm.fade .modal-dialog { transition: none; transform: none; }
}

/* Show or hide a password: an eye, crossed out while the password can be seen. In CSS, so changing it leaves the button's ripple alone. */
.password-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }
.password-toggle::before {
  content: ""; width: 1.25rem; height: 1.25rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.password-toggle.is-visible::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
}

/* Email template form: fields to add */
.email-fields { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .25rem; }
.email-fields[hidden] { display: none; }
[data-for-invitation][hidden] { display: none !important; }