/* --------------------------------------------------- */
/*                   CONFIRM DIALOG                     */
/* --------------------------------------------------- */
/* Shared by the homepage AND the tasks page (both load this file) — the
   generic "are you sure" confirmation dialog shell, reused by e.g. the
   homepage's own .reset-confirm settings-reset prompt and the History
   dialog's own .history-open-confirm (scripts/localStorageHistory.js).
   Self-contained (including its own button styling) so it looks right
   regardless of whichever page's own button/dialog conventions it's
   dropped into. */
.confirm-dialog {
  /* A modal <dialog> is normally centered in the viewport via the browser's
     own UA stylesheet (roughly position:fixed + inset:0 + margin:auto),
     independent of page scroll — overriding position to "relative" put it
     back in normal document flow instead. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: 380px;
  padding: 0;
  background-color: var(--main-theme-lighter);
  border-radius: 8px;
  border: 1px solid var(--secondary-color);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 1);
  color: white;
  font-size: 12px;

  transition: opacity 300ms ease;
  opacity: 0;
}
/* Makes it obvious this is a separate floating layer, not more content of
   whatever's behind it - especially needed when that's ANOTHER already-open
   dialog (e.g. .template-delete-confirm over .template-manager-dialog,
   tasks/workspace.partial.txt) rather than the plain page: adjustBackground
   (scripts/settings.js) already dims/blurs the real page behind ANY open
   dialog, but deliberately EXCLUDES every dialog element itself from that
   blur, so one dialog opened on top of another previously had nothing at
   all distinguishing them - both sit on the exact same background color.
   A native <dialog>'s own ::backdrop always renders directly behind IT
   specifically (in the browser's top layer, between it and whatever's
   next), so this looks correct automatically regardless of what that
   happens to be - the plain page, or another dialog - with no JS of its
   own needed. */
.confirm-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.confirm-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
}
.confirm-dialog-title {
  margin: 0;
  color: var(--secondary-color);
}
.confirm-dialog-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: var(--main-theme-darker);
  border-radius: 8px;
  padding: 10px;
}
.confirm-dialog-details > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.confirm-dialog-label {
  color: var(--font-color);
  opacity: 0.7;
  white-space: nowrap;
}
.confirm-dialog-value {
  color: var(--font-color-clear);
  text-align: right;
  overflow-wrap: anywhere;
}
.confirm-dialog-warning {
  margin: 0;
  color: var(--highlight);
  font-size: 11px;
}
/* Async in-progress/error feedback for a dialog whose confirm action itself
   makes a network request (confirmSaveBeforeProfileSwitch, scripts/
   localStorageHistory.js) — collapses to nothing via :empty while idle,
   rather than reserving a permanently visible blank line. */
.confirm-dialog-status {
  margin: 0;
  color: var(--highlight);
  font-size: 11px;
}
.confirm-dialog-status:empty {
  display: none;
}
.confirm-dialog-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Own @keyframes rather than reusing styles.css's icon-fetch-spin — this
   file is shared with the tasks page (see the header comment above), which
   never defines that name at all, so a confirm dialog shown there would
   otherwise just show a static, non-spinning ring. */
@keyframes confirm-dialog-spin {
  to {
    transform: rotate(360deg);
  }
}
.confirm-dialog-spinner {
  display: none;
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--main-theme);
  border-top-color: var(--secondary-color);
  border-radius: 50%;
  animation: confirm-dialog-spin 700ms linear infinite;
}
.confirm-dialog-spinner.visible {
  display: block;
}
.confirm-dialog .button-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
}
/* Same look as .icon-manager-save-btn/.history-save-btn/.settings-button
   (styles.css) — a plain border + centered icon+label row instead of the
   old two-tone-border/heavy-shadow chrome, so every confirm dialog's own
   Cancel/Save (Reset Settings, icon replace, backup restore/delete, page
   delete, the profile-switch save prompt above, ...) reads the same as the
   rest of the app's own save/action buttons. Explicit font-size — plain
   <button> elements don't inherit the dialog's own 12px by default, so
   without this they'd render at the browser's own (visibly larger) default
   instead. */
.confirm-dialog button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  background-color: var(--main-theme-darker);
  color: var(--font-color-clear);
  font-weight: bold;
  font-size: 12px;
  padding: 6px 16px;
  cursor: var(--cursor-pointer, pointer);
  user-select: none;
}
.confirm-dialog button:not(.custom-select-popup-item) {
  border: 1px solid var(--secondary-color);
}
.confirm-dialog button:hover {
  color: var(--highlight);
}
.history-open-confirm.invalid .button-save {
  display: none;
}
/* --------------------------------------------------- */
/*                BACKUP SAVED TOAST                    */
/* --------------------------------------------------- */
/* Reuses .bookmark-export-toast's exact show/hide mechanic (shared/styles/
   quickAdd.css) for a third, unrelated caller (shared/scripts/backup.js's
   showBackupSavedToast) rather than writing yet another near-duplicate —
   same bottom-center slide/fade primitive, just its own class since it's
   defined in this file instead of that one. Self-contained the same way as
   the rest of this file — driven by shared/scripts/backup.js, dropped in
   as-is regardless of either page's own styling. */
.backup-saved-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--secondary-color);
  background-color: var(--main-theme);
  color: var(--font-color-clear);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, 100px);
  opacity: 0;
  transition:
    transform 500ms ease,
    opacity 500ms ease;
}
.backup-saved-toast.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.backup-saved-toast i {
  color: var(--secondary-color);
}