/* assets/css/profile/modal-buttons.css
 *
 * Unified save/cancel button look across every dashboard modal.
 *
 * The new block-editor modals (copy / section header / spotlight) shipped
 * with polished `.blk-save` / `.blk-cancel` buttons — clean white save +
 * subtle outlined cancel, both with proper hover states. This file
 * generalises those styles so every modal in the dashboard gets the same
 * treatment without touching each modal individually.
 *
 * How it works:
 *   1. Explicit utility classes — apply `.btn-modal-save` and
 *      `.btn-modal-cancel` to new buttons for the canonical look.
 *   2. Selector retrofit — automatically applies the styles to existing
 *      modal-footer buttons via the common class names already in use
 *      (`.btn.primary`, `.btn.danger`, generic `<button>` inside
 *      `.modal-footer`). Where multiple selectors could match, the
 *      later/more-specific rule wins; we keep specificity intentionally
 *      low so individual modals can still override when needed.
 *
 * Load order: include AFTER login.css / dashboard.css so it can override.
 */

/* ────────────────────────────────────────────────────────────────────
 * Canonical primary "Save" button.
 * ──────────────────────────────────────────────────────────────────── */
.btn-modal-save,
.modal-footer .btn.primary,
.modal-footer .save-btn,
.modal-footer button[data-action="save"],
.modal-footer button[type="submit"]:not(.btn-modal-cancel):not(.danger),
.modal-footer .blk-save {
  padding: 11px 22px;
  border-radius: 11px;
  background: #fff;
  color: #000;
  border: 0;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 100px;
}
.btn-modal-save:hover,
.modal-footer .btn.primary:hover,
.modal-footer .save-btn:hover,
.modal-footer button[data-action="save"]:hover,
.modal-footer button[type="submit"]:not(.btn-modal-cancel):not(.danger):hover,
.modal-footer .blk-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(255, 255, 255, 0.12);
  background: #fafafa;
}
.btn-modal-save:active,
.modal-footer .btn.primary:active,
.modal-footer .save-btn:active,
.modal-footer button[data-action="save"]:active,
.modal-footer button[type="submit"]:not(.btn-modal-cancel):not(.danger):active,
.modal-footer .blk-save:active {
  transform: translateY(0);
}
.btn-modal-save:disabled,
.modal-footer .btn.primary:disabled,
.modal-footer .save-btn:disabled,
.modal-footer button[data-action="save"]:disabled,
.modal-footer button[type="submit"]:not(.btn-modal-cancel):not(.danger):disabled,
.modal-footer .blk-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ────────────────────────────────────────────────────────────────────
 * Canonical secondary "Cancel" button.
 * Subtle outlined look — important enough to be reachable, quiet
 * enough that the eye lands on the primary action first.
 * ──────────────────────────────────────────────────────────────────── */
.btn-modal-cancel,
.modal-footer .btn-cancel,
.modal-footer .cancel-btn,
.modal-footer button[data-action="cancel"],
.modal-footer .btn.secondary,
.modal-footer .blk-cancel {
  padding: 11px 18px;
  border-radius: 11px;
  background: transparent;
  color: #a0a0a8;
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.btn-modal-cancel:hover,
.modal-footer .btn-cancel:hover,
.modal-footer .cancel-btn:hover,
.modal-footer button[data-action="cancel"]:hover,
.modal-footer .btn.secondary:hover,
.modal-footer .blk-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

/* ────────────────────────────────────────────────────────────────────
 * Destructive "Delete" button — for modals that confirm a destructive
 * action (delete account, revoke session, etc.). Same proportions as
 * the save button so the modal footer stays visually balanced.
 * ──────────────────────────────────────────────────────────────────── */
.btn-modal-danger,
.modal-footer .btn.danger,
.modal-footer .delete-btn,
.modal-footer button[data-action="delete"] {
  padding: 11px 22px;
  border-radius: 11px;
  background: #ef4444;
  color: #fff;
  border: 0;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 100px;
}
.btn-modal-danger:hover,
.modal-footer .btn.danger:hover,
.modal-footer .delete-btn:hover,
.modal-footer button[data-action="delete"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.30);
  background: #dc2626;
}

/* ────────────────────────────────────────────────────────────────────
 * Modal-footer layout polish.
 * If a modal-footer is empty (no buttons), collapse it so it doesn't
 * leave a phantom strip of padding.
 * ──────────────────────────────────────────────────────────────────── */
.modal-footer:empty {
  display: none;
}
.modal-footer {
  gap: 10px;
  align-items: center;
}